<turbo-stream action="update" target="icon-sheet"><template><div data-controller="ruby-ui--sheet"><div data-action="click->ruby-ui--sheet#open" data-controller="click"></div><template data-ruby-ui--sheet-target="content"><div data-controller="ruby-ui--sheet-content"><div data-state="open" data-action="click->ruby-ui--sheet-content#close" class="fixed pointer-events-auto inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"></div><div data-state="open" class="fixed pointer-events-auto z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 inset-y-0 right-0 h-full border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right w-[300px] overflow-scroll"><div class="flex flex-col space-y-1.5 sm:text-left text-left"><h3 class="text-lg font-semibold leading-none tracking-tight">Gears</h3><p class="text-sm text-muted-foreground gap-y-2">PhlexIcons::Huge</p><a href="https://github.com/AliOsm/phlex-icons/blob/main/lib/phlex-icons/huge/gears.rb" type="button" class="whitespace-nowrap justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground px-3 py-1.5 h-8 text-xs flex items-center gap-1" target="-blank">Source code<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div><div class="py-4 space-y-4"><div class="space-y-2"><div><p class="text-sm font-normal">Icon (Variant: <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">:stroke</code>) ↓</p><svg class="size-10" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.37866 3.83307L9.21729 2.88021C9.14611 2.45991 9.11052 2.24976 8.95858 2.12488C8.80664 2 8.58655 2 8.14636 2H7.85617C7.41598 2 7.19589 2 7.04395 2.12488C6.89202 2.24976 6.85643 2.45991 6.78525 2.88021L6.62387 3.83307C6.28266 3.96639 5.96616 4.14778 5.68298 4.36874L4.7826 4.03678C4.3673 3.88367 4.15966 3.80712 3.97059 3.87291C3.78152 3.93869 3.67182 4.12567 3.45243 4.49963L3.29194 4.77319C3.07837 5.13722 2.97159 5.31924 3.00653 5.50636C3.04146 5.69349 3.20731 5.82785 3.53901 6.09658L4.30581 6.7178C4.28019 6.89156 4.26694 7.06926 4.26694 7.25C4.26694 7.4314 4.28029 7.60974 4.30609 7.7841L3.5411 8.40386C3.2094 8.67259 3.04355 8.80695 3.00861 8.99408C2.97367 9.1812 3.08046 9.36322 3.29402 9.72725L3.45451 10.0008C3.6739 10.3748 3.7836 10.5617 3.97267 10.6275C4.16174 10.6933 4.36939 10.6168 4.78468 10.4637L5.68403 10.1321C5.96694 10.3527 6.28308 10.5338 6.62387 10.6669L6.78524 11.6198C6.85643 12.0401 6.89202 12.2502 7.04395 12.3751C7.19589 12.5 7.41598 12.5 7.85617 12.5H8.14636C8.58655 12.5 8.80664 12.5 8.95858 12.3751C9.11051 12.2502 9.14611 12.0401 9.21729 11.6198L9.37866 10.6669C9.71912 10.5339 10.035 10.353 10.3177 10.1327L11.2153 10.4637C11.6306 10.6168 11.8383 10.6933 12.0273 10.6275C12.2164 10.5617 12.3261 10.3748 12.5455 10.0008L12.706 9.72725C12.9195 9.36322 13.0263 9.1812 12.9914 8.99408C12.9565 8.80695 12.7906 8.67259 12.4589 8.40386L11.6962 7.78593C11.7221 7.61099 11.7356 7.43204 11.7356 7.25C11.7356 7.06862 11.7222 6.89031 11.6965 6.71597L12.461 6.09658C12.7927 5.82785 12.9585 5.69349 12.9935 5.50636C13.0284 5.31924 12.9216 5.13722 12.7081 4.77319L12.5476 4.49963C12.3282 4.12567 12.2185 3.93869 12.0294 3.87291C11.8403 3.80712 11.6327 3.88367 11.2174 4.03678L10.3187 4.3681C10.0358 4.14743 9.71954 3.96626 9.37866 3.83307Z" stroke="#141B34" stroke-width="1.5" stroke-linejoin="round"></path><path d="M17.3787 13.3331L17.2173 12.3802C17.1461 11.9599 17.1105 11.7498 16.9586 11.6249C16.8066 11.5 16.5866 11.5 16.1464 11.5H15.8562C15.416 11.5 15.1959 11.5 15.044 11.6249C14.892 11.7498 14.8564 11.9599 14.7852 12.3802L14.6239 13.3331C14.2827 13.4664 13.9662 13.6478 13.683 13.8687L12.7826 13.5368C12.3673 13.3837 12.1597 13.3071 11.9706 13.3729C11.7815 13.4387 11.6718 13.6257 11.4524 13.9996L11.2919 14.2732C11.0784 14.6372 10.9716 14.8192 11.0065 15.0064C11.0415 15.1935 11.2073 15.3279 11.539 15.5966L12.3058 16.2178C12.2802 16.3916 12.2669 16.5693 12.2669 16.75C12.2669 16.9314 12.2803 17.1097 12.3061 17.2841L11.5411 17.9039C11.2094 18.1726 11.0435 18.307 11.0086 18.4941C10.9737 18.6812 11.0805 18.8632 11.294 19.2272L11.4545 19.5008C11.6739 19.8748 11.7836 20.0617 11.9727 20.1275C12.1617 20.1933 12.3694 20.1168 12.7847 19.9637L13.684 19.6321C13.9669 19.8527 14.2831 20.0338 14.6239 20.1669L14.7852 21.1198C14.8564 21.5401 14.892 21.7502 15.044 21.8751C15.1959 22 15.416 22 15.8562 22H16.1464C16.5866 22 16.8066 22 16.9586 21.8751C17.1105 21.7502 17.1461 21.5401 17.2173 21.1198L17.3787 20.1669C17.7191 20.0339 18.035 19.853 18.3177 19.6327L19.2153 19.9637C19.6306 20.1168 19.8383 20.1933 20.0273 20.1275C20.2164 20.0617 20.3261 19.8748 20.5455 19.5008L20.706 19.2272C20.9195 18.8632 21.0263 18.6812 20.9914 18.4941C20.9565 18.307 20.7906 18.1726 20.4589 17.9039L19.6962 17.2859C19.7221 17.111 19.7356 16.932 19.7356 16.75C19.7356 16.5686 19.7222 16.3903 19.6965 16.216L20.461 15.5966C20.7927 15.3279 20.9585 15.1935 20.9935 15.0064C21.0284 14.8192 20.9216 14.6372 20.7081 14.2732L20.5476 13.9996C20.3282 13.6257 20.2185 13.4387 20.0294 13.3729C19.8403 13.3071 19.6327 13.3837 19.2174 13.5368L18.3187 13.8681C18.0358 13.6474 17.7195 13.4663 17.3787 13.3331Z" stroke="#141B34" stroke-width="1.5" stroke-linejoin="round"></path><path d="M8.75 7.25C8.75 7.66421 8.41421 8 8 8C7.58579 8 7.25 7.66421 7.25 7.25C7.25 6.83579 7.58579 6.5 8 6.5C8.41421 6.5 8.75 6.83579 8.75 7.25Z" stroke="#141B34" stroke-width="1.5" stroke-linejoin="round"></path><path d="M16.75 16.75C16.75 17.1642 16.4142 17.5 16 17.5C15.5858 17.5 15.25 17.1642 15.25 16.75C15.25 16.3358 15.5858 16 16 16C16.4142 16 16.75 16.3358 16.75 16.75Z" stroke="#141B34" stroke-width="1.5" stroke-linejoin="round"></path></svg></div><div><p class="text-sm font-normal">With <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">Phlex::Kit</code> ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="no">Huge</span><span class="o">::</span><span class="no">Gears</span><span class="p">(</span><span class="ss">variant: :stroke</span><span class="p">)</span></pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div><div><p class="text-sm font-normal">Without <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">Phlex::Kit</code> (e.g. ERB) ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="n">render</span> <span class="no">PhlexIcons</span><span class="o">::</span><span class="no">Huge</span><span class="o">::</span><span class="no">Gears</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="ss">variant: :stroke</span><span class="p">)</span></pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div><div><p class="text-sm font-normal">Plain Phlex ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="k">def</span> <span class="nf">view_template</span>
	<span class="n">svg</span><span class="p">(</span>
		<span class="o">**</span><span class="n">attrs</span><span class="p">,</span>
		<span class="ss">viewbox: </span><span class="s1">'0 0 24 24'</span><span class="p">,</span>
		<span class="ss">fill: </span><span class="s1">'none'</span><span class="p">,</span>
		<span class="ss">xmlns: </span><span class="s1">'http://www.w3.org/2000/svg'</span>
	<span class="p">)</span> <span class="k">do</span> <span class="o">|</span><span class="n">s</span><span class="o">|</span>
		<span class="n">s</span><span class="p">.</span><span class="nf">path</span><span class="p">(</span>
			<span class="ss">d:
				</span><span class="s1">'M9.37866 3.83307L9.21729 2.88021C9.14611 2.45991 9.11052 2.24976 8.95858 2.12488C8.80664 2 8.58655 2 8.14636 2H7.85617C7.41598 2 7.19589 2 7.04395 2.12488C6.89202 2.24976 6.85643 2.45991 6.78525 2.88021L6.62387 3.83307C6.28266 3.96639 5.96616 4.14778 5.68298 4.36874L4.7826 4.03678C4.3673 3.88367 4.15966 3.80712 3.97059 3.87291C3.78152 3.93869 3.67182 4.12567 3.45243 4.49963L3.29194 4.77319C3.07837 5.13722 2.97159 5.31924 3.00653 5.50636C3.04146 5.69349 3.20731 5.82785 3.53901 6.09658L4.30581 6.7178C4.28019 6.89156 4.26694 7.06926 4.26694 7.25C4.26694 7.4314 4.28029 7.60974 4.30609 7.7841L3.5411 8.40386C3.2094 8.67259 3.04355 8.80695 3.00861 8.99408C2.97367 9.1812 3.08046 9.36322 3.29402 9.72725L3.45451 10.0008C3.6739 10.3748 3.7836 10.5617 3.97267 10.6275C4.16174 10.6933 4.36939 10.6168 4.78468 10.4637L5.68403 10.1321C5.96694 10.3527 6.28308 10.5338 6.62387 10.6669L6.78524 11.6198C6.85643 12.0401 6.89202 12.2502 7.04395 12.3751C7.19589 12.5 7.41598 12.5 7.85617 12.5H8.14636C8.58655 12.5 8.80664 12.5 8.95858 12.3751C9.11051 12.2502 9.14611 12.0401 9.21729 11.6198L9.37866 10.6669C9.71912 10.5339 10.035 10.353 10.3177 10.1327L11.2153 10.4637C11.6306 10.6168 11.8383 10.6933 12.0273 10.6275C12.2164 10.5617 12.3261 10.3748 12.5455 10.0008L12.706 9.72725C12.9195 9.36322 13.0263 9.1812 12.9914 8.99408C12.9565 8.80695 12.7906 8.67259 12.4589 8.40386L11.6962 7.78593C11.7221 7.61099 11.7356 7.43204 11.7356 7.25C11.7356 7.06862 11.7222 6.89031 11.6965 6.71597L12.461 6.09658C12.7927 5.82785 12.9585 5.69349 12.9935 5.50636C13.0284 5.31924 12.9216 5.13722 12.7081 4.77319L12.5476 4.49963C12.3282 4.12567 12.2185 3.93869 12.0294 3.87291C11.8403 3.80712 11.6327 3.88367 11.2174 4.03678L10.3187 4.3681C10.0358 4.14743 9.71954 3.96626 9.37866 3.83307Z'</span><span class="p">,</span>
			<span class="ss">stroke: </span><span class="s1">'#141B34'</span><span class="p">,</span>
			<span class="ss">stroke_width: </span><span class="s1">'1.5'</span><span class="p">,</span>
			<span class="ss">stroke_linejoin: </span><span class="s1">'round'</span>
		<span class="p">)</span>
		<span class="n">s</span><span class="p">.</span><span class="nf">path</span><span class="p">(</span>
			<span class="ss">d:
				</span><span class="s1">'M17.3787 13.3331L17.2173 12.3802C17.1461 11.9599 17.1105 11.7498 16.9586 11.6249C16.8066 11.5 16.5866 11.5 16.1464 11.5H15.8562C15.416 11.5 15.1959 11.5 15.044 11.6249C14.892 11.7498 14.8564 11.9599 14.7852 12.3802L14.6239 13.3331C14.2827 13.4664 13.9662 13.6478 13.683 13.8687L12.7826 13.5368C12.3673 13.3837 12.1597 13.3071 11.9706 13.3729C11.7815 13.4387 11.6718 13.6257 11.4524 13.9996L11.2919 14.2732C11.0784 14.6372 10.9716 14.8192 11.0065 15.0064C11.0415 15.1935 11.2073 15.3279 11.539 15.5966L12.3058 16.2178C12.2802 16.3916 12.2669 16.5693 12.2669 16.75C12.2669 16.9314 12.2803 17.1097 12.3061 17.2841L11.5411 17.9039C11.2094 18.1726 11.0435 18.307 11.0086 18.4941C10.9737 18.6812 11.0805 18.8632 11.294 19.2272L11.4545 19.5008C11.6739 19.8748 11.7836 20.0617 11.9727 20.1275C12.1617 20.1933 12.3694 20.1168 12.7847 19.9637L13.684 19.6321C13.9669 19.8527 14.2831 20.0338 14.6239 20.1669L14.7852 21.1198C14.8564 21.5401 14.892 21.7502 15.044 21.8751C15.1959 22 15.416 22 15.8562 22H16.1464C16.5866 22 16.8066 22 16.9586 21.8751C17.1105 21.7502 17.1461 21.5401 17.2173 21.1198L17.3787 20.1669C17.7191 20.0339 18.035 19.853 18.3177 19.6327L19.2153 19.9637C19.6306 20.1168 19.8383 20.1933 20.0273 20.1275C20.2164 20.0617 20.3261 19.8748 20.5455 19.5008L20.706 19.2272C20.9195 18.8632 21.0263 18.6812 20.9914 18.4941C20.9565 18.307 20.7906 18.1726 20.4589 17.9039L19.6962 17.2859C19.7221 17.111 19.7356 16.932 19.7356 16.75C19.7356 16.5686 19.7222 16.3903 19.6965 16.216L20.461 15.5966C20.7927 15.3279 20.9585 15.1935 20.9935 15.0064C21.0284 14.8192 20.9216 14.6372 20.7081 14.2732L20.5476 13.9996C20.3282 13.6257 20.2185 13.4387 20.0294 13.3729C19.8403 13.3071 19.6327 13.3837 19.2174 13.5368L18.3187 13.8681C18.0358 13.6474 17.7195 13.4663 17.3787 13.3331Z'</span><span class="p">,</span>
			<span class="ss">stroke: </span><span class="s1">'#141B34'</span><span class="p">,</span>
			<span class="ss">stroke_width: </span><span class="s1">'1.5'</span><span class="p">,</span>
			<span class="ss">stroke_linejoin: </span><span class="s1">'round'</span>
		<span class="p">)</span>
		<span class="n">s</span><span class="p">.</span><span class="nf">path</span><span class="p">(</span>
			<span class="ss">d:
				</span><span class="s1">'M8.75 7.25C8.75 7.66421 8.41421 8 8 8C7.58579 8 7.25 7.66421 7.25 7.25C7.25 6.83579 7.58579 6.5 8 6.5C8.41421 6.5 8.75 6.83579 8.75 7.25Z'</span><span class="p">,</span>
			<span class="ss">stroke: </span><span class="s1">'#141B34'</span><span class="p">,</span>
			<span class="ss">stroke_width: </span><span class="s1">'1.5'</span><span class="p">,</span>
			<span class="ss">stroke_linejoin: </span><span class="s1">'round'</span>
		<span class="p">)</span>
		<span class="n">s</span><span class="p">.</span><span class="nf">path</span><span class="p">(</span>
			<span class="ss">d:
				</span><span class="s1">'M16.75 16.75C16.75 17.1642 16.4142 17.5 16 17.5C15.5858 17.5 15.25 17.1642 15.25 16.75C15.25 16.3358 15.5858 16 16 16C16.4142 16 16.75 16.3358 16.75 16.75Z'</span><span class="p">,</span>
			<span class="ss">stroke: </span><span class="s1">'#141B34'</span><span class="p">,</span>
			<span class="ss">stroke_width: </span><span class="s1">'1.5'</span><span class="p">,</span>
			<span class="ss">stroke_linejoin: </span><span class="s1">'round'</span>
		<span class="p">)</span>
	<span class="k">end</span>
<span class="k">end</span>
</pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div><div><p class="text-sm font-normal">Plain SVG ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">""</span> <span class="na">viewbox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M9.37866 3.83307L9.21729 2.88021C9.14611 2.45991 9.11052 2.24976 8.95858 2.12488C8.80664 2 8.58655 2 8.14636 2H7.85617C7.41598 2 7.19589 2 7.04395 2.12488C6.89202 2.24976 6.85643 2.45991 6.78525 2.88021L6.62387 3.83307C6.28266 3.96639 5.96616 4.14778 5.68298 4.36874L4.7826 4.03678C4.3673 3.88367 4.15966 3.80712 3.97059 3.87291C3.78152 3.93869 3.67182 4.12567 3.45243 4.49963L3.29194 4.77319C3.07837 5.13722 2.97159 5.31924 3.00653 5.50636C3.04146 5.69349 3.20731 5.82785 3.53901 6.09658L4.30581 6.7178C4.28019 6.89156 4.26694 7.06926 4.26694 7.25C4.26694 7.4314 4.28029 7.60974 4.30609 7.7841L3.5411 8.40386C3.2094 8.67259 3.04355 8.80695 3.00861 8.99408C2.97367 9.1812 3.08046 9.36322 3.29402 9.72725L3.45451 10.0008C3.6739 10.3748 3.7836 10.5617 3.97267 10.6275C4.16174 10.6933 4.36939 10.6168 4.78468 10.4637L5.68403 10.1321C5.96694 10.3527 6.28308 10.5338 6.62387 10.6669L6.78524 11.6198C6.85643 12.0401 6.89202 12.2502 7.04395 12.3751C7.19589 12.5 7.41598 12.5 7.85617 12.5H8.14636C8.58655 12.5 8.80664 12.5 8.95858 12.3751C9.11051 12.2502 9.14611 12.0401 9.21729 11.6198L9.37866 10.6669C9.71912 10.5339 10.035 10.353 10.3177 10.1327L11.2153 10.4637C11.6306 10.6168 11.8383 10.6933 12.0273 10.6275C12.2164 10.5617 12.3261 10.3748 12.5455 10.0008L12.706 9.72725C12.9195 9.36322 13.0263 9.1812 12.9914 8.99408C12.9565 8.80695 12.7906 8.67259 12.4589 8.40386L11.6962 7.78593C11.7221 7.61099 11.7356 7.43204 11.7356 7.25C11.7356 7.06862 11.7222 6.89031 11.6965 6.71597L12.461 6.09658C12.7927 5.82785 12.9585 5.69349 12.9935 5.50636C13.0284 5.31924 12.9216 5.13722 12.7081 4.77319L12.5476 4.49963C12.3282 4.12567 12.2185 3.93869 12.0294 3.87291C11.8403 3.80712 11.6327 3.88367 11.2174 4.03678L10.3187 4.3681C10.0358 4.14743 9.71954 3.96626 9.37866 3.83307Z"</span> <span class="na">stroke=</span><span class="s">"#141B34"</span> <span class="na">stroke-width=</span><span class="s">"1.5"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;/path&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M17.3787 13.3331L17.2173 12.3802C17.1461 11.9599 17.1105 11.7498 16.9586 11.6249C16.8066 11.5 16.5866 11.5 16.1464 11.5H15.8562C15.416 11.5 15.1959 11.5 15.044 11.6249C14.892 11.7498 14.8564 11.9599 14.7852 12.3802L14.6239 13.3331C14.2827 13.4664 13.9662 13.6478 13.683 13.8687L12.7826 13.5368C12.3673 13.3837 12.1597 13.3071 11.9706 13.3729C11.7815 13.4387 11.6718 13.6257 11.4524 13.9996L11.2919 14.2732C11.0784 14.6372 10.9716 14.8192 11.0065 15.0064C11.0415 15.1935 11.2073 15.3279 11.539 15.5966L12.3058 16.2178C12.2802 16.3916 12.2669 16.5693 12.2669 16.75C12.2669 16.9314 12.2803 17.1097 12.3061 17.2841L11.5411 17.9039C11.2094 18.1726 11.0435 18.307 11.0086 18.4941C10.9737 18.6812 11.0805 18.8632 11.294 19.2272L11.4545 19.5008C11.6739 19.8748 11.7836 20.0617 11.9727 20.1275C12.1617 20.1933 12.3694 20.1168 12.7847 19.9637L13.684 19.6321C13.9669 19.8527 14.2831 20.0338 14.6239 20.1669L14.7852 21.1198C14.8564 21.5401 14.892 21.7502 15.044 21.8751C15.1959 22 15.416 22 15.8562 22H16.1464C16.5866 22 16.8066 22 16.9586 21.8751C17.1105 21.7502 17.1461 21.5401 17.2173 21.1198L17.3787 20.1669C17.7191 20.0339 18.035 19.853 18.3177 19.6327L19.2153 19.9637C19.6306 20.1168 19.8383 20.1933 20.0273 20.1275C20.2164 20.0617 20.3261 19.8748 20.5455 19.5008L20.706 19.2272C20.9195 18.8632 21.0263 18.6812 20.9914 18.4941C20.9565 18.307 20.7906 18.1726 20.4589 17.9039L19.6962 17.2859C19.7221 17.111 19.7356 16.932 19.7356 16.75C19.7356 16.5686 19.7222 16.3903 19.6965 16.216L20.461 15.5966C20.7927 15.3279 20.9585 15.1935 20.9935 15.0064C21.0284 14.8192 20.9216 14.6372 20.7081 14.2732L20.5476 13.9996C20.3282 13.6257 20.2185 13.4387 20.0294 13.3729C19.8403 13.3071 19.6327 13.3837 19.2174 13.5368L18.3187 13.8681C18.0358 13.6474 17.7195 13.4663 17.3787 13.3331Z"</span> <span class="na">stroke=</span><span class="s">"#141B34"</span> <span class="na">stroke-width=</span><span class="s">"1.5"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;/path&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M8.75 7.25C8.75 7.66421 8.41421 8 8 8C7.58579 8 7.25 7.66421 7.25 7.25C7.25 6.83579 7.58579 6.5 8 6.5C8.41421 6.5 8.75 6.83579 8.75 7.25Z"</span> <span class="na">stroke=</span><span class="s">"#141B34"</span> <span class="na">stroke-width=</span><span class="s">"1.5"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;/path&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M16.75 16.75C16.75 17.1642 16.4142 17.5 16 17.5C15.5858 17.5 15.25 17.1642 15.25 16.75C15.25 16.3358 15.5858 16 16 16C16.4142 16 16.75 16.3358 16.75 16.75Z"</span> <span class="na">stroke=</span><span class="s">"#141B34"</span> <span class="na">stroke-width=</span><span class="s">"1.5"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;/path&gt;</span>
<span class="nt">&lt;/svg&gt;</span>
</pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div></div></div><div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm w-full" data-action="click->ruby-ui--sheet-content#close">Close</button></div><button type="button" class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click->ruby-ui--sheet-content#close"><svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template></div></template></turbo-stream>