<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">Touchpad01</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/touchpad01.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="M21.4484 13.9694L20.9205 14.5022L21.4484 13.9694ZM21.1863 18.5514L21.8607 18.8794L21.8607 18.8794L21.1863 18.5514ZM13 15.258L12.5062 15.8225C12.7276 16.0162 13.042 16.0626 13.3099 15.941C13.5779 15.8194 13.75 15.5523 13.75 15.258H13ZM11.2615 13.737L11.7554 13.1725L11.754 13.1713L11.2615 13.737ZM9.30671 15.6709L9.90133 15.2138C9.89838 15.21 9.8954 15.2062 9.89238 15.2024L9.30671 15.6709ZM11.9726 19.1389L12.5673 18.6818L11.9726 19.1389ZM9.3002 13.9242L8.71102 13.4602L8.71102 13.4602L9.3002 13.9242ZM19.5372 22C19.5372 22.4142 19.8729 22.75 20.2872 22.75C20.7014 22.75 21.0372 22.4142 21.0372 22H19.5372ZM12.1921 22C12.1921 22.4142 12.5279 22.75 12.9421 22.75C13.3563 22.75 13.6921 22.4142 13.6921 22H12.1921ZM12.829 20.4924L13.5441 20.2664L13.5441 20.2664L12.829 20.4924ZM12.797 20.3979L13.5022 20.1426L13.5022 20.1426L12.797 20.3979ZM16 11.9796H15.25C15.25 12.1842 15.3336 12.38 15.4814 12.5214C15.6292 12.6629 15.8284 12.7379 16.0328 12.7289L16 11.9796ZM20.9205 14.5022C21.2056 14.7847 21.3244 15.3167 21.2033 16.1129C21.0876 16.8736 20.7801 17.6717 20.5118 18.2233L21.8607 18.8794C22.167 18.2497 22.5398 17.3011 22.6862 16.3384C22.8272 15.4112 22.7898 14.2428 21.9763 13.4367L20.9205 14.5022ZM20.5118 18.2233C20.4463 18.358 20.3633 18.5055 20.2625 18.683C20.1659 18.8532 20.0539 19.0491 19.9514 19.2508C19.753 19.6415 19.5372 20.1517 19.5372 20.7056H21.0372C21.0372 20.519 21.1154 20.2715 21.2889 19.93C21.3724 19.7656 21.4657 19.6018 21.5668 19.4238C21.6637 19.2532 21.7708 19.0643 21.8607 18.8794L20.5118 18.2233ZM13.4938 14.6935L11.7554 13.1725L10.7677 14.3015L12.5062 15.8225L13.4938 14.6935ZM8.7121 16.128L11.378 19.596L12.5673 18.6818L9.90133 15.2138L8.7121 16.128ZM8.71102 13.4602C8.09263 14.2453 8.09672 15.359 8.72105 16.1394L9.89238 15.2024C9.70371 14.9665 9.70238 14.6257 9.88939 14.3883L8.71102 13.4602ZM11.754 13.1713C10.8407 12.3763 9.45892 12.5106 8.71102 13.4602L9.88939 14.3883C10.1095 14.1088 10.5058 14.0735 10.7691 14.3027L11.754 13.1713ZM19.5372 20.7056V22H21.0372V20.7056H19.5372ZM13.6921 22C13.6921 21.2796 13.7001 20.76 13.5441 20.2664L12.1139 20.7184C12.184 20.9404 12.1921 21.1873 12.1921 22H13.6921ZM11.378 19.596C11.8705 20.2367 12.0128 20.4351 12.0917 20.6531L13.5022 20.1426C13.3258 19.6552 13.0036 19.2495 12.5673 18.6818L11.378 19.596ZM13.5441 20.2664C13.531 20.2249 13.517 20.1836 13.5022 20.1426L12.0917 20.6531C12.0996 20.6747 12.1069 20.6965 12.1139 20.7184L13.5441 20.2664ZM12.25 7.5V15.258H13.75V7.5H12.25ZM15.25 7.5V11.9796H16.75V7.5H15.25ZM16.0328 12.7289C17.3045 12.6732 19.3922 12.9879 20.9205 14.5022L21.9763 13.4367C20.0407 11.5188 17.4714 11.1645 15.9672 11.2304L16.0328 12.7289ZM13.75 7.5C13.75 7.08579 14.0858 6.75 14.5 6.75V5.25C13.2574 5.25 12.25 6.25736 12.25 7.5H13.75ZM14.5 6.75C14.9142 6.75 15.25 7.08579 15.25 7.5H16.75C16.75 6.25736 15.7426 5.25 14.5 5.25V6.75Z" fill="#141B34"></path><path d="M22 9.99989C22 6.22866 22 4.34304 20.8284 3.17147C19.6569 1.99989 17.7712 1.99989 14 1.99989H10C6.22876 1.99989 4.34315 1.99989 3.17157 3.17147C2 4.34304 2 6.22866 2 9.99989V11.9999C2 13.8637 2 14.7955 2.30448 15.5306C2.71046 16.5107 3.48915 17.2894 4.46927 17.6954C5.05932 17.9398 5.77617 17.988 7 17.9976" stroke="#141B34" stroke-width="1.5" stroke-linecap="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">Touchpad01</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">Touchpad01</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">'M21.4484 13.9694L20.9205 14.5022L21.4484 13.9694ZM21.1863 18.5514L21.8607 18.8794L21.8607 18.8794L21.1863 18.5514ZM13 15.258L12.5062 15.8225C12.7276 16.0162 13.042 16.0626 13.3099 15.941C13.5779 15.8194 13.75 15.5523 13.75 15.258H13ZM11.2615 13.737L11.7554 13.1725L11.754 13.1713L11.2615 13.737ZM9.30671 15.6709L9.90133 15.2138C9.89838 15.21 9.8954 15.2062 9.89238 15.2024L9.30671 15.6709ZM11.9726 19.1389L12.5673 18.6818L11.9726 19.1389ZM9.3002 13.9242L8.71102 13.4602L8.71102 13.4602L9.3002 13.9242ZM19.5372 22C19.5372 22.4142 19.8729 22.75 20.2872 22.75C20.7014 22.75 21.0372 22.4142 21.0372 22H19.5372ZM12.1921 22C12.1921 22.4142 12.5279 22.75 12.9421 22.75C13.3563 22.75 13.6921 22.4142 13.6921 22H12.1921ZM12.829 20.4924L13.5441 20.2664L13.5441 20.2664L12.829 20.4924ZM12.797 20.3979L13.5022 20.1426L13.5022 20.1426L12.797 20.3979ZM16 11.9796H15.25C15.25 12.1842 15.3336 12.38 15.4814 12.5214C15.6292 12.6629 15.8284 12.7379 16.0328 12.7289L16 11.9796ZM20.9205 14.5022C21.2056 14.7847 21.3244 15.3167 21.2033 16.1129C21.0876 16.8736 20.7801 17.6717 20.5118 18.2233L21.8607 18.8794C22.167 18.2497 22.5398 17.3011 22.6862 16.3384C22.8272 15.4112 22.7898 14.2428 21.9763 13.4367L20.9205 14.5022ZM20.5118 18.2233C20.4463 18.358 20.3633 18.5055 20.2625 18.683C20.1659 18.8532 20.0539 19.0491 19.9514 19.2508C19.753 19.6415 19.5372 20.1517 19.5372 20.7056H21.0372C21.0372 20.519 21.1154 20.2715 21.2889 19.93C21.3724 19.7656 21.4657 19.6018 21.5668 19.4238C21.6637 19.2532 21.7708 19.0643 21.8607 18.8794L20.5118 18.2233ZM13.4938 14.6935L11.7554 13.1725L10.7677 14.3015L12.5062 15.8225L13.4938 14.6935ZM8.7121 16.128L11.378 19.596L12.5673 18.6818L9.90133 15.2138L8.7121 16.128ZM8.71102 13.4602C8.09263 14.2453 8.09672 15.359 8.72105 16.1394L9.89238 15.2024C9.70371 14.9665 9.70238 14.6257 9.88939 14.3883L8.71102 13.4602ZM11.754 13.1713C10.8407 12.3763 9.45892 12.5106 8.71102 13.4602L9.88939 14.3883C10.1095 14.1088 10.5058 14.0735 10.7691 14.3027L11.754 13.1713ZM19.5372 20.7056V22H21.0372V20.7056H19.5372ZM13.6921 22C13.6921 21.2796 13.7001 20.76 13.5441 20.2664L12.1139 20.7184C12.184 20.9404 12.1921 21.1873 12.1921 22H13.6921ZM11.378 19.596C11.8705 20.2367 12.0128 20.4351 12.0917 20.6531L13.5022 20.1426C13.3258 19.6552 13.0036 19.2495 12.5673 18.6818L11.378 19.596ZM13.5441 20.2664C13.531 20.2249 13.517 20.1836 13.5022 20.1426L12.0917 20.6531C12.0996 20.6747 12.1069 20.6965 12.1139 20.7184L13.5441 20.2664ZM12.25 7.5V15.258H13.75V7.5H12.25ZM15.25 7.5V11.9796H16.75V7.5H15.25ZM16.0328 12.7289C17.3045 12.6732 19.3922 12.9879 20.9205 14.5022L21.9763 13.4367C20.0407 11.5188 17.4714 11.1645 15.9672 11.2304L16.0328 12.7289ZM13.75 7.5C13.75 7.08579 14.0858 6.75 14.5 6.75V5.25C13.2574 5.25 12.25 6.25736 12.25 7.5H13.75ZM14.5 6.75C14.9142 6.75 15.25 7.08579 15.25 7.5H16.75C16.75 6.25736 15.7426 5.25 14.5 5.25V6.75Z'</span><span class="p">,</span>
			<span class="ss">fill: </span><span class="s1">'#141B34'</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">'M22 9.99989C22 6.22866 22 4.34304 20.8284 3.17147C19.6569 1.99989 17.7712 1.99989 14 1.99989H10C6.22876 1.99989 4.34315 1.99989 3.17157 3.17147C2 4.34304 2 6.22866 2 9.99989V11.9999C2 13.8637 2 14.7955 2.30448 15.5306C2.71046 16.5107 3.48915 17.2894 4.46927 17.6954C5.05932 17.9398 5.77617 17.988 7 17.9976'</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_linecap: </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">"M21.4484 13.9694L20.9205 14.5022L21.4484 13.9694ZM21.1863 18.5514L21.8607 18.8794L21.8607 18.8794L21.1863 18.5514ZM13 15.258L12.5062 15.8225C12.7276 16.0162 13.042 16.0626 13.3099 15.941C13.5779 15.8194 13.75 15.5523 13.75 15.258H13ZM11.2615 13.737L11.7554 13.1725L11.754 13.1713L11.2615 13.737ZM9.30671 15.6709L9.90133 15.2138C9.89838 15.21 9.8954 15.2062 9.89238 15.2024L9.30671 15.6709ZM11.9726 19.1389L12.5673 18.6818L11.9726 19.1389ZM9.3002 13.9242L8.71102 13.4602L8.71102 13.4602L9.3002 13.9242ZM19.5372 22C19.5372 22.4142 19.8729 22.75 20.2872 22.75C20.7014 22.75 21.0372 22.4142 21.0372 22H19.5372ZM12.1921 22C12.1921 22.4142 12.5279 22.75 12.9421 22.75C13.3563 22.75 13.6921 22.4142 13.6921 22H12.1921ZM12.829 20.4924L13.5441 20.2664L13.5441 20.2664L12.829 20.4924ZM12.797 20.3979L13.5022 20.1426L13.5022 20.1426L12.797 20.3979ZM16 11.9796H15.25C15.25 12.1842 15.3336 12.38 15.4814 12.5214C15.6292 12.6629 15.8284 12.7379 16.0328 12.7289L16 11.9796ZM20.9205 14.5022C21.2056 14.7847 21.3244 15.3167 21.2033 16.1129C21.0876 16.8736 20.7801 17.6717 20.5118 18.2233L21.8607 18.8794C22.167 18.2497 22.5398 17.3011 22.6862 16.3384C22.8272 15.4112 22.7898 14.2428 21.9763 13.4367L20.9205 14.5022ZM20.5118 18.2233C20.4463 18.358 20.3633 18.5055 20.2625 18.683C20.1659 18.8532 20.0539 19.0491 19.9514 19.2508C19.753 19.6415 19.5372 20.1517 19.5372 20.7056H21.0372C21.0372 20.519 21.1154 20.2715 21.2889 19.93C21.3724 19.7656 21.4657 19.6018 21.5668 19.4238C21.6637 19.2532 21.7708 19.0643 21.8607 18.8794L20.5118 18.2233ZM13.4938 14.6935L11.7554 13.1725L10.7677 14.3015L12.5062 15.8225L13.4938 14.6935ZM8.7121 16.128L11.378 19.596L12.5673 18.6818L9.90133 15.2138L8.7121 16.128ZM8.71102 13.4602C8.09263 14.2453 8.09672 15.359 8.72105 16.1394L9.89238 15.2024C9.70371 14.9665 9.70238 14.6257 9.88939 14.3883L8.71102 13.4602ZM11.754 13.1713C10.8407 12.3763 9.45892 12.5106 8.71102 13.4602L9.88939 14.3883C10.1095 14.1088 10.5058 14.0735 10.7691 14.3027L11.754 13.1713ZM19.5372 20.7056V22H21.0372V20.7056H19.5372ZM13.6921 22C13.6921 21.2796 13.7001 20.76 13.5441 20.2664L12.1139 20.7184C12.184 20.9404 12.1921 21.1873 12.1921 22H13.6921ZM11.378 19.596C11.8705 20.2367 12.0128 20.4351 12.0917 20.6531L13.5022 20.1426C13.3258 19.6552 13.0036 19.2495 12.5673 18.6818L11.378 19.596ZM13.5441 20.2664C13.531 20.2249 13.517 20.1836 13.5022 20.1426L12.0917 20.6531C12.0996 20.6747 12.1069 20.6965 12.1139 20.7184L13.5441 20.2664ZM12.25 7.5V15.258H13.75V7.5H12.25ZM15.25 7.5V11.9796H16.75V7.5H15.25ZM16.0328 12.7289C17.3045 12.6732 19.3922 12.9879 20.9205 14.5022L21.9763 13.4367C20.0407 11.5188 17.4714 11.1645 15.9672 11.2304L16.0328 12.7289ZM13.75 7.5C13.75 7.08579 14.0858 6.75 14.5 6.75V5.25C13.2574 5.25 12.25 6.25736 12.25 7.5H13.75ZM14.5 6.75C14.9142 6.75 15.25 7.08579 15.25 7.5H16.75C16.75 6.25736 15.7426 5.25 14.5 5.25V6.75Z"</span> <span class="na">fill=</span><span class="s">"#141B34"</span><span class="nt">&gt;&lt;/path&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M22 9.99989C22 6.22866 22 4.34304 20.8284 3.17147C19.6569 1.99989 17.7712 1.99989 14 1.99989H10C6.22876 1.99989 4.34315 1.99989 3.17157 3.17147C2 4.34304 2 6.22866 2 9.99989V11.9999C2 13.8637 2 14.7955 2.30448 15.5306C2.71046 16.5107 3.48915 17.2894 4.46927 17.6954C5.05932 17.9398 5.77617 17.988 7 17.9976"</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-linecap=</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>