<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">ComponentPlaceholder</h3><p class="text-sm text-muted-foreground gap-y-2">PhlexIcons::Radix</p><a href="https://github.com/AliOsm/phlex-icons/blob/main/lib/phlex-icons/radix/component_placeholder.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 ↓</p><svg class="size-10" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.2249 12.7395C7.41898 12.6113 7.68295 12.6321 7.85381 12.803C8.0489 12.9981 8.04875 13.3147 7.85381 13.51C7.65857 13.7052 7.34204 13.7052 7.14677 13.51C6.95151 13.3147 6.95151 12.9982 7.14677 12.803C7.17106 12.7787 7.19733 12.7577 7.2249 12.7395ZM5.73174 11.3889C5.92692 11.1937 6.24348 11.1939 6.43877 11.3889C6.63403 11.5842 6.63403 11.9007 6.43877 12.0959C6.24349 12.291 5.92694 12.2911 5.73174 12.0959C5.53678 11.9007 5.53674 11.5841 5.73174 11.3889ZM8.56084 11.3889C8.75611 11.1938 9.07266 11.1937 9.26787 11.3889C9.46299 11.5841 9.46295 11.9007 9.26787 12.0959C9.07264 12.2912 8.75611 12.2911 8.56084 12.0959C8.36557 11.9007 8.36557 11.5842 8.56084 11.3889ZM4.31767 9.97483C4.5129 9.7796 4.82943 9.77968 5.0247 9.97483C5.21997 10.1701 5.21997 10.4866 5.0247 10.6819C4.82943 10.8769 4.51287 10.8771 4.31767 10.6819C4.12258 10.4867 4.12264 10.1701 4.31767 9.97483ZM9.9749 9.97483C10.1702 9.77957 10.4867 9.77957 10.6819 9.97483C10.8771 10.1701 10.8772 10.4866 10.6819 10.6819C10.4867 10.8771 10.1702 10.877 9.9749 10.6819C9.77964 10.4866 9.77965 10.1701 9.9749 9.97483ZM2.90361 8.56077C3.09887 8.36551 3.41538 8.36551 3.61064 8.56077C3.80584 8.75604 3.80588 9.07256 3.61064 9.2678C3.41539 9.46286 3.09882 9.46294 2.90361 9.2678C2.70841 9.0726 2.70853 8.75605 2.90361 8.56077ZM11.389 8.56077C11.5842 8.36551 11.9007 8.36551 12.096 8.56077C12.2912 8.75604 12.2912 9.07257 12.096 9.2678C11.9007 9.46288 11.5842 9.46292 11.389 9.2678C11.1938 9.07259 11.1939 8.75604 11.389 8.56077ZM1.48955 7.14671C1.71053 6.92572 2.09066 6.9668 2.26103 7.22483C2.38899 7.41888 2.36736 7.68295 2.19658 7.85374C2.00137 8.04874 1.68476 8.04874 1.48955 7.85374C1.29435 7.65854 1.29448 7.34198 1.48955 7.14671ZM12.803 7.14671C12.9983 6.95144 13.3148 6.95144 13.5101 7.14671C13.7052 7.34197 13.7053 7.6585 13.5101 7.85374C13.3148 8.04865 12.9982 8.04882 12.803 7.85374C12.6079 7.65858 12.6081 7.34199 12.803 7.14671ZM2.90361 5.73167C3.09879 5.53665 3.41541 5.53673 3.61064 5.73167C3.80585 5.92688 3.80575 6.24342 3.61064 6.4387C3.41538 6.63396 3.09887 6.63396 2.90361 6.4387C2.70862 6.24341 2.70844 5.92684 2.90361 5.73167ZM11.389 5.73167C11.5842 5.53667 11.9008 5.53671 12.096 5.73167C12.2912 5.92687 12.2911 6.24342 12.096 6.4387C11.9007 6.63396 11.5842 6.63396 11.389 6.4387C11.1939 6.24342 11.1938 5.92685 11.389 5.73167ZM4.31767 4.3176C4.51284 4.12244 4.82942 4.12263 5.0247 4.3176C5.21997 4.51287 5.21997 4.82937 5.0247 5.02464C4.82944 5.21988 4.51293 5.21989 4.31767 5.02464C4.12271 4.82936 4.12252 4.51277 4.31767 4.3176ZM9.9749 4.3176C10.1701 4.12255 10.4867 4.1225 10.6819 4.3176C10.8771 4.51281 10.877 4.82936 10.6819 5.02464C10.4867 5.2199 10.1702 5.2199 9.9749 5.02464C9.77974 4.82936 9.77967 4.51283 9.9749 4.3176ZM5.73174 2.90354C5.92691 2.70837 6.24348 2.70855 6.43877 2.90354C6.63403 3.0988 6.63403 3.41531 6.43877 3.61057C6.24349 3.80568 5.92695 3.80578 5.73174 3.61057C5.5368 3.41534 5.53672 3.09872 5.73174 2.90354ZM8.56084 2.90354C8.75611 2.70846 9.07267 2.70834 9.26787 2.90354C9.46301 3.09875 9.46293 3.41532 9.26787 3.61057C9.07263 3.80581 8.7561 3.80578 8.56084 3.61057C8.36557 3.41531 8.36557 3.0988 8.56084 2.90354ZM7.14677 1.48948C7.34205 1.2944 7.65861 1.29428 7.85381 1.48948C8.04882 1.6847 8.04882 2.00129 7.85381 2.19651C7.6586 2.39171 7.34205 2.39159 7.14677 2.19651C6.95151 2.00125 6.95151 1.68474 7.14677 1.48948Z" fill="currentColor"></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">Radix</span><span class="o">::</span><span class="no">ComponentPlaceholder</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">Radix</span><span class="o">::</span><span class="no">ComponentPlaceholder</span><span class="p">.</span><span class="nf">new</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 15 15'</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">'M7.2249 12.7395C7.41898 12.6113 7.68295 12.6321 7.85381 12.803C8.0489 12.9981 8.04875 13.3147 7.85381 13.51C7.65857 13.7052 7.34204 13.7052 7.14677 13.51C6.95151 13.3147 6.95151 12.9982 7.14677 12.803C7.17106 12.7787 7.19733 12.7577 7.2249 12.7395ZM5.73174 11.3889C5.92692 11.1937 6.24348 11.1939 6.43877 11.3889C6.63403 11.5842 6.63403 11.9007 6.43877 12.0959C6.24349 12.291 5.92694 12.2911 5.73174 12.0959C5.53678 11.9007 5.53674 11.5841 5.73174 11.3889ZM8.56084 11.3889C8.75611 11.1938 9.07266 11.1937 9.26787 11.3889C9.46299 11.5841 9.46295 11.9007 9.26787 12.0959C9.07264 12.2912 8.75611 12.2911 8.56084 12.0959C8.36557 11.9007 8.36557 11.5842 8.56084 11.3889ZM4.31767 9.97483C4.5129 9.7796 4.82943 9.77968 5.0247 9.97483C5.21997 10.1701 5.21997 10.4866 5.0247 10.6819C4.82943 10.8769 4.51287 10.8771 4.31767 10.6819C4.12258 10.4867 4.12264 10.1701 4.31767 9.97483ZM9.9749 9.97483C10.1702 9.77957 10.4867 9.77957 10.6819 9.97483C10.8771 10.1701 10.8772 10.4866 10.6819 10.6819C10.4867 10.8771 10.1702 10.877 9.9749 10.6819C9.77964 10.4866 9.77965 10.1701 9.9749 9.97483ZM2.90361 8.56077C3.09887 8.36551 3.41538 8.36551 3.61064 8.56077C3.80584 8.75604 3.80588 9.07256 3.61064 9.2678C3.41539 9.46286 3.09882 9.46294 2.90361 9.2678C2.70841 9.0726 2.70853 8.75605 2.90361 8.56077ZM11.389 8.56077C11.5842 8.36551 11.9007 8.36551 12.096 8.56077C12.2912 8.75604 12.2912 9.07257 12.096 9.2678C11.9007 9.46288 11.5842 9.46292 11.389 9.2678C11.1938 9.07259 11.1939 8.75604 11.389 8.56077ZM1.48955 7.14671C1.71053 6.92572 2.09066 6.9668 2.26103 7.22483C2.38899 7.41888 2.36736 7.68295 2.19658 7.85374C2.00137 8.04874 1.68476 8.04874 1.48955 7.85374C1.29435 7.65854 1.29448 7.34198 1.48955 7.14671ZM12.803 7.14671C12.9983 6.95144 13.3148 6.95144 13.5101 7.14671C13.7052 7.34197 13.7053 7.6585 13.5101 7.85374C13.3148 8.04865 12.9982 8.04882 12.803 7.85374C12.6079 7.65858 12.6081 7.34199 12.803 7.14671ZM2.90361 5.73167C3.09879 5.53665 3.41541 5.53673 3.61064 5.73167C3.80585 5.92688 3.80575 6.24342 3.61064 6.4387C3.41538 6.63396 3.09887 6.63396 2.90361 6.4387C2.70862 6.24341 2.70844 5.92684 2.90361 5.73167ZM11.389 5.73167C11.5842 5.53667 11.9008 5.53671 12.096 5.73167C12.2912 5.92687 12.2911 6.24342 12.096 6.4387C11.9007 6.63396 11.5842 6.63396 11.389 6.4387C11.1939 6.24342 11.1938 5.92685 11.389 5.73167ZM4.31767 4.3176C4.51284 4.12244 4.82942 4.12263 5.0247 4.3176C5.21997 4.51287 5.21997 4.82937 5.0247 5.02464C4.82944 5.21988 4.51293 5.21989 4.31767 5.02464C4.12271 4.82936 4.12252 4.51277 4.31767 4.3176ZM9.9749 4.3176C10.1701 4.12255 10.4867 4.1225 10.6819 4.3176C10.8771 4.51281 10.877 4.82936 10.6819 5.02464C10.4867 5.2199 10.1702 5.2199 9.9749 5.02464C9.77974 4.82936 9.77967 4.51283 9.9749 4.3176ZM5.73174 2.90354C5.92691 2.70837 6.24348 2.70855 6.43877 2.90354C6.63403 3.0988 6.63403 3.41531 6.43877 3.61057C6.24349 3.80568 5.92695 3.80578 5.73174 3.61057C5.5368 3.41534 5.53672 3.09872 5.73174 2.90354ZM8.56084 2.90354C8.75611 2.70846 9.07267 2.70834 9.26787 2.90354C9.46301 3.09875 9.46293 3.41532 9.26787 3.61057C9.07263 3.80581 8.7561 3.80578 8.56084 3.61057C8.36557 3.41531 8.36557 3.0988 8.56084 2.90354ZM7.14677 1.48948C7.34205 1.2944 7.65861 1.29428 7.85381 1.48948C8.04882 1.6847 8.04882 2.00129 7.85381 2.19651C7.6586 2.39171 7.34205 2.39159 7.14677 2.19651C6.95151 2.00125 6.95151 1.68474 7.14677 1.48948Z'</span><span class="p">,</span>
			<span class="ss">fill: </span><span class="s1">'currentColor'</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 15 15"</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">"M7.2249 12.7395C7.41898 12.6113 7.68295 12.6321 7.85381 12.803C8.0489 12.9981 8.04875 13.3147 7.85381 13.51C7.65857 13.7052 7.34204 13.7052 7.14677 13.51C6.95151 13.3147 6.95151 12.9982 7.14677 12.803C7.17106 12.7787 7.19733 12.7577 7.2249 12.7395ZM5.73174 11.3889C5.92692 11.1937 6.24348 11.1939 6.43877 11.3889C6.63403 11.5842 6.63403 11.9007 6.43877 12.0959C6.24349 12.291 5.92694 12.2911 5.73174 12.0959C5.53678 11.9007 5.53674 11.5841 5.73174 11.3889ZM8.56084 11.3889C8.75611 11.1938 9.07266 11.1937 9.26787 11.3889C9.46299 11.5841 9.46295 11.9007 9.26787 12.0959C9.07264 12.2912 8.75611 12.2911 8.56084 12.0959C8.36557 11.9007 8.36557 11.5842 8.56084 11.3889ZM4.31767 9.97483C4.5129 9.7796 4.82943 9.77968 5.0247 9.97483C5.21997 10.1701 5.21997 10.4866 5.0247 10.6819C4.82943 10.8769 4.51287 10.8771 4.31767 10.6819C4.12258 10.4867 4.12264 10.1701 4.31767 9.97483ZM9.9749 9.97483C10.1702 9.77957 10.4867 9.77957 10.6819 9.97483C10.8771 10.1701 10.8772 10.4866 10.6819 10.6819C10.4867 10.8771 10.1702 10.877 9.9749 10.6819C9.77964 10.4866 9.77965 10.1701 9.9749 9.97483ZM2.90361 8.56077C3.09887 8.36551 3.41538 8.36551 3.61064 8.56077C3.80584 8.75604 3.80588 9.07256 3.61064 9.2678C3.41539 9.46286 3.09882 9.46294 2.90361 9.2678C2.70841 9.0726 2.70853 8.75605 2.90361 8.56077ZM11.389 8.56077C11.5842 8.36551 11.9007 8.36551 12.096 8.56077C12.2912 8.75604 12.2912 9.07257 12.096 9.2678C11.9007 9.46288 11.5842 9.46292 11.389 9.2678C11.1938 9.07259 11.1939 8.75604 11.389 8.56077ZM1.48955 7.14671C1.71053 6.92572 2.09066 6.9668 2.26103 7.22483C2.38899 7.41888 2.36736 7.68295 2.19658 7.85374C2.00137 8.04874 1.68476 8.04874 1.48955 7.85374C1.29435 7.65854 1.29448 7.34198 1.48955 7.14671ZM12.803 7.14671C12.9983 6.95144 13.3148 6.95144 13.5101 7.14671C13.7052 7.34197 13.7053 7.6585 13.5101 7.85374C13.3148 8.04865 12.9982 8.04882 12.803 7.85374C12.6079 7.65858 12.6081 7.34199 12.803 7.14671ZM2.90361 5.73167C3.09879 5.53665 3.41541 5.53673 3.61064 5.73167C3.80585 5.92688 3.80575 6.24342 3.61064 6.4387C3.41538 6.63396 3.09887 6.63396 2.90361 6.4387C2.70862 6.24341 2.70844 5.92684 2.90361 5.73167ZM11.389 5.73167C11.5842 5.53667 11.9008 5.53671 12.096 5.73167C12.2912 5.92687 12.2911 6.24342 12.096 6.4387C11.9007 6.63396 11.5842 6.63396 11.389 6.4387C11.1939 6.24342 11.1938 5.92685 11.389 5.73167ZM4.31767 4.3176C4.51284 4.12244 4.82942 4.12263 5.0247 4.3176C5.21997 4.51287 5.21997 4.82937 5.0247 5.02464C4.82944 5.21988 4.51293 5.21989 4.31767 5.02464C4.12271 4.82936 4.12252 4.51277 4.31767 4.3176ZM9.9749 4.3176C10.1701 4.12255 10.4867 4.1225 10.6819 4.3176C10.8771 4.51281 10.877 4.82936 10.6819 5.02464C10.4867 5.2199 10.1702 5.2199 9.9749 5.02464C9.77974 4.82936 9.77967 4.51283 9.9749 4.3176ZM5.73174 2.90354C5.92691 2.70837 6.24348 2.70855 6.43877 2.90354C6.63403 3.0988 6.63403 3.41531 6.43877 3.61057C6.24349 3.80568 5.92695 3.80578 5.73174 3.61057C5.5368 3.41534 5.53672 3.09872 5.73174 2.90354ZM8.56084 2.90354C8.75611 2.70846 9.07267 2.70834 9.26787 2.90354C9.46301 3.09875 9.46293 3.41532 9.26787 3.61057C9.07263 3.80581 8.7561 3.80578 8.56084 3.61057C8.36557 3.41531 8.36557 3.0988 8.56084 2.90354ZM7.14677 1.48948C7.34205 1.2944 7.65861 1.29428 7.85381 1.48948C8.04882 1.6847 8.04882 2.00129 7.85381 2.19651C7.6586 2.39171 7.34205 2.39159 7.14677 2.19651C6.95151 2.00125 6.95151 1.68474 7.14677 1.48948Z"</span> <span class="na">fill=</span><span class="s">"currentColor"</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>