<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">Kg</h3><p class="text-sm text-muted-foreground gap-y-2">PhlexIcons::Flag</p><a href="https://github.com/AliOsm/phlex-icons/blob/main/lib/phlex-icons/flag/kg.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">:rectangle</code>) ↓</p><svg class="size-10" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 640 480" space="preserve"><path fill="red" d="M0 0h640v480H0Z"></path><path fill="#ff0" fill-rule="evenodd" d="m340.7 146.6 2.7-52q0-.4-.4-.5-.3 0-.5.4l-13.3 50.1-.1.5a5.9 5.9 0 1 0 11.6 1.5m14.4 4.4 10.8-51q.2-.3-.3-.5-.3 0-.5.3L344 147.2l-.2.5a5.9 5.9 0 1 0 11.3 3.3m13.5 6.6 18.7-48.6a.5.5 0 0 0-.8-.4L358.2 152l-.2.4a5.9 5.9 0 1 0 10.6 5m12.3 8.7 26-45a.5.5 0 0 0-.7-.6l-34.7 38.6-.3.4a5.9 5.9 0 1 0 9.7 6.6m10.8 10.4 32.8-40.4v-.6h-.7l-40.3 32.6-.4.4a5.9 5.9 0 1 0 8.6 8m9 12 38.7-34.8q.3-.3 0-.7h-.6L394 179l-.4.2a5.9 5.9 0 1 0 7.2 9.3m7 13.3 43.7-28.4a.5.5 0 0 0-.4-.8l-48.4 18.6-.5.3a5.9 5.9 0 1 0 5.6 10.3m5 14.2 47.5-21.2a.5.5 0 0 0-.3-.8l-50.7 10.8-.5.1a5.9 5.9 0 1 0 4 11m2.5 14.9 50.4-13.4q.3-.1.3-.5-.1-.4-.5-.4l-51.8 2.7h-.5a5.9 5.9 0 1 0 2.1 11.6m.3 15 51.8-5.4q.4-.1.4-.5 0-.3-.4-.5l-51.6-5.4h-.5a5.9 5.9 0 1 0 .3 11.8m-2.1 14.8 52 2.7a.5.5 0 0 0 .1-.9l-50.1-13.3-.5-.1a5.9 5.9 0 1 0-1.5 11.6m-4.4 14.4 51 10.8q.3.2.5-.3 0-.3-.3-.5l-47.5-21-.5-.2a5.9 5.9 0 1 0-3.3 11.3m-6.6 13.5 48.6 18.7a.5.5 0 0 0 .4-.8L408 278.2l-.4-.2a5.9 5.9 0 1 0-5 10.6m-8.7 12.3 45 26a.5.5 0 0 0 .6-.7l-38.6-34.7-.4-.3a5.9 5.9 0 1 0-6.6 9.7m-10.4 10.8 40.4 32.8a.5.5 0 0 0 .7-.7l-32.7-40.3-.4-.4a5.9 5.9 0 1 0-8 8.6m-12 9 34.8 38.7a.5.5 0 0 0 .8-.6L381 314l-.3-.4a5.9 5.9 0 1 0-9.3 7.2m-13.3 7 28.4 43.7q.2.3.6.2.3-.2.2-.6l-18.6-48.4-.3-.5a5.9 5.9 0 1 0-10.3 5.6m-14.2 5 21.2 47.5q.1.5.5.3.4 0 .3-.6l-10.8-50.7-.1-.5a5.9 5.9 0 1 0-11 4m-14.9 2.5 13.4 50.4q.1.3.5.3.4-.1.4-.5l-2.7-51.8v-.5a5.9 5.9 0 1 0-11.6 2.1m-15 .3 5.4 51.8a.5.5 0 0 0 1 0l5.4-51.6a6 6 0 0 0-5.9-6.4 6 6 0 0 0-5.9 6.2m-14.8-2.1-2.7 52a.5.5 0 0 0 .9.1l13.3-50.1.1-.5a5.9 5.9 0 1 0-11.6-1.5m-14.4-4.4-10.8 51a.5.5 0 0 0 .8.2l21.1-47.4.2-.5a5.9 5.9 0 1 0-11.3-3.3m-13.5-6.6L252.7 371q-.1.4.2.6t.6-.2l28.3-43.5a6 6 0 0 0-2.3-8.3 6 6 0 0 0-8 2.8m-12.4-8.6-26 45a.5.5 0 0 0 .7.6l34.7-38.6.3-.4a5.9 5.9 0 1 0-9.7-6.6m-10.8-10.4-32.8 40.4v.6q.4.3.7 0l40.3-32.6.4-.4a5.9 5.9 0 1 0-8.6-8m-9-12-38.7 34.8a.5.5 0 0 0 .6.8l44.9-26 .4-.3a5.9 5.9 0 1 0-7.2-9.3m-7-13.3-43.7 28.4a.5.5 0 0 0 .4.8l48.4-18.6.5-.3a5.9 5.9 0 1 0-5.6-10.3m-5-14.2-47.5 21.2q-.5.1-.3.5 0 .4.6.3l50.7-10.8.5-.1a5.9 5.9 0 1 0-4-11m-2.5-14.9-50.4 13.4a.5.5 0 0 0 .2 1l51.8-2.8h.5a5.9 5.9 0 1 0-2.1-11.6m-.3-15-51.8 5.4a.5.5 0 0 0 0 1l51.6 5.4h.5a5.9 5.9 0 1 0-.3-11.8m2.1-14.8-52-2.7a.5.5 0 0 0-.1.9l50.1 13.3.5.1a5.9 5.9 0 1 0 1.5-11.6m4.4-14.4-51-10.8q-.3-.2-.5.3 0 .3.3.5l47.4 21.1.5.2a5.9 5.9 0 1 0 3.3-11.3m6.6-13.5L189 172.7a.5.5 0 0 0-.4.8l43.5 28.3.4.2a5.9 5.9 0 1 0 5-10.6m8.7-12.3-45-26h-.7q-.1.3.1.7l38.6 34.7.4.3a5.9 5.9 0 1 0 6.6-9.7m10.4-10.8-40.4-32.8h-.6q-.3.3 0 .7l32.6 40.3.4.4a5.9 5.9 0 1 0 8-8.6m12-9-34.8-38.7a.5.5 0 0 0-.7.6l26 44.9.2.4a5.9 5.9 0 1 0 9.3-7.2m13.3-7-28.4-43.7a.5.5 0 0 0-.8.4l18.6 48.4.3.5a5.9 5.9 0 1 0 10.3-5.6m14.2-5-21.2-47.5a.5.5 0 0 0-.8.3l10.8 50.7.1.5a5.9 5.9 0 1 0 11-4m14.9-2.5-13.4-50.4q-.1-.3-.5-.3-.4.1-.4.5l2.7 51.8v.5a5.9 5.9 0 1 0 11.6-2.1m15-.3-5.4-51.8a.5.5 0 0 0-1 0l-5.4 51.6v.5a5.9 5.9 0 1 0 11.8-.3m-5.9 6.3a89.2 89.2 0 1 1 0 178.4 89.2 89.2 0 0 1 0-178.4m0 10.7a78.5 78.5 0 1 1 0 157 78.5 78.5 0 0 1 0-157m-65.6 102a155 155 0 0 1 32-44l6 4a155 155 0 0 0-34.1 48.4 70 70 0 0 1-3.9-8.3m71.1-40.6q2.8 2.3 5.4 4.8l5.8-4.5-5.4-4.7zm-11.4-8.7 5.9 4.3 5.9-4.3-5.9-4.3zm.6 18.3 5.3 5 5.3-5-5.3-5zm-11.4-9.3q3 2.2 5.8 4.5l5.4-4.8-5.8-4.4q-2.7 2.2-5.4 4.7m35.2-16.9q-3-2.3-6-4.3l-6.7 4 6 4.3zm10.4 8.6-5.3-4.6-6.4 4 5.5 4.6zm-36-16.6q3.5-2.3 7.1-4.3l7 4.3-7 4zm-11.5 8q3-2.3 6-4.3l6.7 4-6 4.3zM291 215l5.3-4.6 6.4 4-5.5 4.6zm-32.7-10.2a157 157 0 0 1 21.5 10.6 153 153 0 0 0-28.6 37.4 71 71 0 0 1 7-48m6-9.2q13 4.2 25.6 11l-5.3 4.6q-11.6-6.4-23.6-10.8 1.6-2.6 3.3-4.8m7.5-8.3q14.6 4 29.2 11.3l-6 4.2q-13.5-6.7-27.3-11.2zm11-8.4.6.2.8.2q14.8 4 29.7 11.5l-7.4 4.3a187 187 0 0 0-30.2-11.6q3-2.5 6.4-4.6m68.6-3.4-.8.3q-15.4 4.5-30.5 11.8-14.8-7.2-30-11.7l-.5-.1q-.5 0-.8-.3a70 70 0 0 1 62.6 0m12.5 8-.7.2q-15 4.4-29.6 11.4-3.6-2.3-7.4-4.3a145 145 0 0 1 31.3-11.9q3.4 2.2 6.4 4.6m8.5 8q-13.8 4.5-27.2 11.3l-6-4.2q14.5-7.4 29-11.3zm6.7 8.8q-12 4.4-23.6 10.8l-5.3-4.5q12.6-7 25.6-11 1.8 2.1 3.3 4.7m9.7 52.4a153 153 0 0 0-28.6-37.4 157 157 0 0 1 21.5-10.6 70 70 0 0 1 7.1 48m-7 19.1a155 155 0 0 0-34-48.3q3-2.2 6-4.1a157 157 0 0 1 31.9 44 70 70 0 0 1-3.9 8.4m-10.9 15c-8.6-22-20.6-39.9-34.7-54.2l5.6-4.7c14.6 14.4 27 32 35 51.9a71 71 0 0 1-5.9 7m-13.3 10.9-.9-2.5c-7.7-21-18.6-38.2-31.4-52.3l5.3-5.3a151 151 0 0 1 34 55 71 71 0 0 1-7 5m-67.9 4 .9-2.8c6.5-19 16.8-36 29.5-50.3 12.7 14.4 23 31.3 29.5 50.3l1 2.8a70 70 0 0 1-60.9 0m-14.1-9a151 151 0 0 1 34-55l5.3 5.3a158 158 0 0 0-31.4 52.3l-1 2.5a70 70 0 0 1-7-5m-12-13c8-19.9 20.3-37.4 34.9-51.8l5.6 4.7a157 157 0 0 0-34.7 54.2q-3.1-3.4-5.9-7"></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">Flag</span><span class="o">::</span><span class="no">Kg</span><span class="p">(</span><span class="ss">variant: :rectangle</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">Flag</span><span class="o">::</span><span class="no">Kg</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="ss">variant: :rectangle</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">xmlns: </span><span class="s1">'http://www.w3.org/2000/svg'</span><span class="p">,</span>
		<span class="ss">viewbox: </span><span class="s1">'0 0 640 480'</span><span class="p">,</span>
		<span class="ss">space: </span><span class="s1">'preserve'</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">fill: </span><span class="s1">'red'</span><span class="p">,</span> <span class="ss">d: </span><span class="s1">'M0 0h640v480H0Z'</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">fill: </span><span class="s1">'#ff0'</span><span class="p">,</span>
			<span class="ss">fill_rule: </span><span class="s1">'evenodd'</span><span class="p">,</span>
			<span class="ss">d:
				</span><span class="s1">'m340.7 146.6 2.7-52q0-.4-.4-.5-.3 0-.5.4l-13.3 50.1-.1.5a5.9 5.9 0 1 0 11.6 1.5m14.4 4.4 10.8-51q.2-.3-.3-.5-.3 0-.5.3L344 147.2l-.2.5a5.9 5.9 0 1 0 11.3 3.3m13.5 6.6 18.7-48.6a.5.5 0 0 0-.8-.4L358.2 152l-.2.4a5.9 5.9 0 1 0 10.6 5m12.3 8.7 26-45a.5.5 0 0 0-.7-.6l-34.7 38.6-.3.4a5.9 5.9 0 1 0 9.7 6.6m10.8 10.4 32.8-40.4v-.6h-.7l-40.3 32.6-.4.4a5.9 5.9 0 1 0 8.6 8m9 12 38.7-34.8q.3-.3 0-.7h-.6L394 179l-.4.2a5.9 5.9 0 1 0 7.2 9.3m7 13.3 43.7-28.4a.5.5 0 0 0-.4-.8l-48.4 18.6-.5.3a5.9 5.9 0 1 0 5.6 10.3m5 14.2 47.5-21.2a.5.5 0 0 0-.3-.8l-50.7 10.8-.5.1a5.9 5.9 0 1 0 4 11m2.5 14.9 50.4-13.4q.3-.1.3-.5-.1-.4-.5-.4l-51.8 2.7h-.5a5.9 5.9 0 1 0 2.1 11.6m.3 15 51.8-5.4q.4-.1.4-.5 0-.3-.4-.5l-51.6-5.4h-.5a5.9 5.9 0 1 0 .3 11.8m-2.1 14.8 52 2.7a.5.5 0 0 0 .1-.9l-50.1-13.3-.5-.1a5.9 5.9 0 1 0-1.5 11.6m-4.4 14.4 51 10.8q.3.2.5-.3 0-.3-.3-.5l-47.5-21-.5-.2a5.9 5.9 0 1 0-3.3 11.3m-6.6 13.5 48.6 18.7a.5.5 0 0 0 .4-.8L408 278.2l-.4-.2a5.9 5.9 0 1 0-5 10.6m-8.7 12.3 45 26a.5.5 0 0 0 .6-.7l-38.6-34.7-.4-.3a5.9 5.9 0 1 0-6.6 9.7m-10.4 10.8 40.4 32.8a.5.5 0 0 0 .7-.7l-32.7-40.3-.4-.4a5.9 5.9 0 1 0-8 8.6m-12 9 34.8 38.7a.5.5 0 0 0 .8-.6L381 314l-.3-.4a5.9 5.9 0 1 0-9.3 7.2m-13.3 7 28.4 43.7q.2.3.6.2.3-.2.2-.6l-18.6-48.4-.3-.5a5.9 5.9 0 1 0-10.3 5.6m-14.2 5 21.2 47.5q.1.5.5.3.4 0 .3-.6l-10.8-50.7-.1-.5a5.9 5.9 0 1 0-11 4m-14.9 2.5 13.4 50.4q.1.3.5.3.4-.1.4-.5l-2.7-51.8v-.5a5.9 5.9 0 1 0-11.6 2.1m-15 .3 5.4 51.8a.5.5 0 0 0 1 0l5.4-51.6a6 6 0 0 0-5.9-6.4 6 6 0 0 0-5.9 6.2m-14.8-2.1-2.7 52a.5.5 0 0 0 .9.1l13.3-50.1.1-.5a5.9 5.9 0 1 0-11.6-1.5m-14.4-4.4-10.8 51a.5.5 0 0 0 .8.2l21.1-47.4.2-.5a5.9 5.9 0 1 0-11.3-3.3m-13.5-6.6L252.7 371q-.1.4.2.6t.6-.2l28.3-43.5a6 6 0 0 0-2.3-8.3 6 6 0 0 0-8 2.8m-12.4-8.6-26 45a.5.5 0 0 0 .7.6l34.7-38.6.3-.4a5.9 5.9 0 1 0-9.7-6.6m-10.8-10.4-32.8 40.4v.6q.4.3.7 0l40.3-32.6.4-.4a5.9 5.9 0 1 0-8.6-8m-9-12-38.7 34.8a.5.5 0 0 0 .6.8l44.9-26 .4-.3a5.9 5.9 0 1 0-7.2-9.3m-7-13.3-43.7 28.4a.5.5 0 0 0 .4.8l48.4-18.6.5-.3a5.9 5.9 0 1 0-5.6-10.3m-5-14.2-47.5 21.2q-.5.1-.3.5 0 .4.6.3l50.7-10.8.5-.1a5.9 5.9 0 1 0-4-11m-2.5-14.9-50.4 13.4a.5.5 0 0 0 .2 1l51.8-2.8h.5a5.9 5.9 0 1 0-2.1-11.6m-.3-15-51.8 5.4a.5.5 0 0 0 0 1l51.6 5.4h.5a5.9 5.9 0 1 0-.3-11.8m2.1-14.8-52-2.7a.5.5 0 0 0-.1.9l50.1 13.3.5.1a5.9 5.9 0 1 0 1.5-11.6m4.4-14.4-51-10.8q-.3-.2-.5.3 0 .3.3.5l47.4 21.1.5.2a5.9 5.9 0 1 0 3.3-11.3m6.6-13.5L189 172.7a.5.5 0 0 0-.4.8l43.5 28.3.4.2a5.9 5.9 0 1 0 5-10.6m8.7-12.3-45-26h-.7q-.1.3.1.7l38.6 34.7.4.3a5.9 5.9 0 1 0 6.6-9.7m10.4-10.8-40.4-32.8h-.6q-.3.3 0 .7l32.6 40.3.4.4a5.9 5.9 0 1 0 8-8.6m12-9-34.8-38.7a.5.5 0 0 0-.7.6l26 44.9.2.4a5.9 5.9 0 1 0 9.3-7.2m13.3-7-28.4-43.7a.5.5 0 0 0-.8.4l18.6 48.4.3.5a5.9 5.9 0 1 0 10.3-5.6m14.2-5-21.2-47.5a.5.5 0 0 0-.8.3l10.8 50.7.1.5a5.9 5.9 0 1 0 11-4m14.9-2.5-13.4-50.4q-.1-.3-.5-.3-.4.1-.4.5l2.7 51.8v.5a5.9 5.9 0 1 0 11.6-2.1m15-.3-5.4-51.8a.5.5 0 0 0-1 0l-5.4 51.6v.5a5.9 5.9 0 1 0 11.8-.3m-5.9 6.3a89.2 89.2 0 1 1 0 178.4 89.2 89.2 0 0 1 0-178.4m0 10.7a78.5 78.5 0 1 1 0 157 78.5 78.5 0 0 1 0-157m-65.6 102a155 155 0 0 1 32-44l6 4a155 155 0 0 0-34.1 48.4 70 70 0 0 1-3.9-8.3m71.1-40.6q2.8 2.3 5.4 4.8l5.8-4.5-5.4-4.7zm-11.4-8.7 5.9 4.3 5.9-4.3-5.9-4.3zm.6 18.3 5.3 5 5.3-5-5.3-5zm-11.4-9.3q3 2.2 5.8 4.5l5.4-4.8-5.8-4.4q-2.7 2.2-5.4 4.7m35.2-16.9q-3-2.3-6-4.3l-6.7 4 6 4.3zm10.4 8.6-5.3-4.6-6.4 4 5.5 4.6zm-36-16.6q3.5-2.3 7.1-4.3l7 4.3-7 4zm-11.5 8q3-2.3 6-4.3l6.7 4-6 4.3zM291 215l5.3-4.6 6.4 4-5.5 4.6zm-32.7-10.2a157 157 0 0 1 21.5 10.6 153 153 0 0 0-28.6 37.4 71 71 0 0 1 7-48m6-9.2q13 4.2 25.6 11l-5.3 4.6q-11.6-6.4-23.6-10.8 1.6-2.6 3.3-4.8m7.5-8.3q14.6 4 29.2 11.3l-6 4.2q-13.5-6.7-27.3-11.2zm11-8.4.6.2.8.2q14.8 4 29.7 11.5l-7.4 4.3a187 187 0 0 0-30.2-11.6q3-2.5 6.4-4.6m68.6-3.4-.8.3q-15.4 4.5-30.5 11.8-14.8-7.2-30-11.7l-.5-.1q-.5 0-.8-.3a70 70 0 0 1 62.6 0m12.5 8-.7.2q-15 4.4-29.6 11.4-3.6-2.3-7.4-4.3a145 145 0 0 1 31.3-11.9q3.4 2.2 6.4 4.6m8.5 8q-13.8 4.5-27.2 11.3l-6-4.2q14.5-7.4 29-11.3zm6.7 8.8q-12 4.4-23.6 10.8l-5.3-4.5q12.6-7 25.6-11 1.8 2.1 3.3 4.7m9.7 52.4a153 153 0 0 0-28.6-37.4 157 157 0 0 1 21.5-10.6 70 70 0 0 1 7.1 48m-7 19.1a155 155 0 0 0-34-48.3q3-2.2 6-4.1a157 157 0 0 1 31.9 44 70 70 0 0 1-3.9 8.4m-10.9 15c-8.6-22-20.6-39.9-34.7-54.2l5.6-4.7c14.6 14.4 27 32 35 51.9a71 71 0 0 1-5.9 7m-13.3 10.9-.9-2.5c-7.7-21-18.6-38.2-31.4-52.3l5.3-5.3a151 151 0 0 1 34 55 71 71 0 0 1-7 5m-67.9 4 .9-2.8c6.5-19 16.8-36 29.5-50.3 12.7 14.4 23 31.3 29.5 50.3l1 2.8a70 70 0 0 1-60.9 0m-14.1-9a151 151 0 0 1 34-55l5.3 5.3a158 158 0 0 0-31.4 52.3l-1 2.5a70 70 0 0 1-7-5m-12-13c8-19.9 20.3-37.4 34.9-51.8l5.6 4.7a157 157 0 0 0-34.7 54.2q-3.1-3.4-5.9-7'</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 640 480"</span> <span class="na">space=</span><span class="s">"preserve"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">fill=</span><span class="s">"red"</span> <span class="na">d=</span><span class="s">"M0 0h640v480H0Z"</span><span class="nt">&gt;&lt;/path&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">fill=</span><span class="s">"#ff0"</span> <span class="na">fill-rule=</span><span class="s">"evenodd"</span> <span class="na">d=</span><span class="s">"m340.7 146.6 2.7-52q0-.4-.4-.5-.3 0-.5.4l-13.3 50.1-.1.5a5.9 5.9 0 1 0 11.6 1.5m14.4 4.4 10.8-51q.2-.3-.3-.5-.3 0-.5.3L344 147.2l-.2.5a5.9 5.9 0 1 0 11.3 3.3m13.5 6.6 18.7-48.6a.5.5 0 0 0-.8-.4L358.2 152l-.2.4a5.9 5.9 0 1 0 10.6 5m12.3 8.7 26-45a.5.5 0 0 0-.7-.6l-34.7 38.6-.3.4a5.9 5.9 0 1 0 9.7 6.6m10.8 10.4 32.8-40.4v-.6h-.7l-40.3 32.6-.4.4a5.9 5.9 0 1 0 8.6 8m9 12 38.7-34.8q.3-.3 0-.7h-.6L394 179l-.4.2a5.9 5.9 0 1 0 7.2 9.3m7 13.3 43.7-28.4a.5.5 0 0 0-.4-.8l-48.4 18.6-.5.3a5.9 5.9 0 1 0 5.6 10.3m5 14.2 47.5-21.2a.5.5 0 0 0-.3-.8l-50.7 10.8-.5.1a5.9 5.9 0 1 0 4 11m2.5 14.9 50.4-13.4q.3-.1.3-.5-.1-.4-.5-.4l-51.8 2.7h-.5a5.9 5.9 0 1 0 2.1 11.6m.3 15 51.8-5.4q.4-.1.4-.5 0-.3-.4-.5l-51.6-5.4h-.5a5.9 5.9 0 1 0 .3 11.8m-2.1 14.8 52 2.7a.5.5 0 0 0 .1-.9l-50.1-13.3-.5-.1a5.9 5.9 0 1 0-1.5 11.6m-4.4 14.4 51 10.8q.3.2.5-.3 0-.3-.3-.5l-47.5-21-.5-.2a5.9 5.9 0 1 0-3.3 11.3m-6.6 13.5 48.6 18.7a.5.5 0 0 0 .4-.8L408 278.2l-.4-.2a5.9 5.9 0 1 0-5 10.6m-8.7 12.3 45 26a.5.5 0 0 0 .6-.7l-38.6-34.7-.4-.3a5.9 5.9 0 1 0-6.6 9.7m-10.4 10.8 40.4 32.8a.5.5 0 0 0 .7-.7l-32.7-40.3-.4-.4a5.9 5.9 0 1 0-8 8.6m-12 9 34.8 38.7a.5.5 0 0 0 .8-.6L381 314l-.3-.4a5.9 5.9 0 1 0-9.3 7.2m-13.3 7 28.4 43.7q.2.3.6.2.3-.2.2-.6l-18.6-48.4-.3-.5a5.9 5.9 0 1 0-10.3 5.6m-14.2 5 21.2 47.5q.1.5.5.3.4 0 .3-.6l-10.8-50.7-.1-.5a5.9 5.9 0 1 0-11 4m-14.9 2.5 13.4 50.4q.1.3.5.3.4-.1.4-.5l-2.7-51.8v-.5a5.9 5.9 0 1 0-11.6 2.1m-15 .3 5.4 51.8a.5.5 0 0 0 1 0l5.4-51.6a6 6 0 0 0-5.9-6.4 6 6 0 0 0-5.9 6.2m-14.8-2.1-2.7 52a.5.5 0 0 0 .9.1l13.3-50.1.1-.5a5.9 5.9 0 1 0-11.6-1.5m-14.4-4.4-10.8 51a.5.5 0 0 0 .8.2l21.1-47.4.2-.5a5.9 5.9 0 1 0-11.3-3.3m-13.5-6.6L252.7 371q-.1.4.2.6t.6-.2l28.3-43.5a6 6 0 0 0-2.3-8.3 6 6 0 0 0-8 2.8m-12.4-8.6-26 45a.5.5 0 0 0 .7.6l34.7-38.6.3-.4a5.9 5.9 0 1 0-9.7-6.6m-10.8-10.4-32.8 40.4v.6q.4.3.7 0l40.3-32.6.4-.4a5.9 5.9 0 1 0-8.6-8m-9-12-38.7 34.8a.5.5 0 0 0 .6.8l44.9-26 .4-.3a5.9 5.9 0 1 0-7.2-9.3m-7-13.3-43.7 28.4a.5.5 0 0 0 .4.8l48.4-18.6.5-.3a5.9 5.9 0 1 0-5.6-10.3m-5-14.2-47.5 21.2q-.5.1-.3.5 0 .4.6.3l50.7-10.8.5-.1a5.9 5.9 0 1 0-4-11m-2.5-14.9-50.4 13.4a.5.5 0 0 0 .2 1l51.8-2.8h.5a5.9 5.9 0 1 0-2.1-11.6m-.3-15-51.8 5.4a.5.5 0 0 0 0 1l51.6 5.4h.5a5.9 5.9 0 1 0-.3-11.8m2.1-14.8-52-2.7a.5.5 0 0 0-.1.9l50.1 13.3.5.1a5.9 5.9 0 1 0 1.5-11.6m4.4-14.4-51-10.8q-.3-.2-.5.3 0 .3.3.5l47.4 21.1.5.2a5.9 5.9 0 1 0 3.3-11.3m6.6-13.5L189 172.7a.5.5 0 0 0-.4.8l43.5 28.3.4.2a5.9 5.9 0 1 0 5-10.6m8.7-12.3-45-26h-.7q-.1.3.1.7l38.6 34.7.4.3a5.9 5.9 0 1 0 6.6-9.7m10.4-10.8-40.4-32.8h-.6q-.3.3 0 .7l32.6 40.3.4.4a5.9 5.9 0 1 0 8-8.6m12-9-34.8-38.7a.5.5 0 0 0-.7.6l26 44.9.2.4a5.9 5.9 0 1 0 9.3-7.2m13.3-7-28.4-43.7a.5.5 0 0 0-.8.4l18.6 48.4.3.5a5.9 5.9 0 1 0 10.3-5.6m14.2-5-21.2-47.5a.5.5 0 0 0-.8.3l10.8 50.7.1.5a5.9 5.9 0 1 0 11-4m14.9-2.5-13.4-50.4q-.1-.3-.5-.3-.4.1-.4.5l2.7 51.8v.5a5.9 5.9 0 1 0 11.6-2.1m15-.3-5.4-51.8a.5.5 0 0 0-1 0l-5.4 51.6v.5a5.9 5.9 0 1 0 11.8-.3m-5.9 6.3a89.2 89.2 0 1 1 0 178.4 89.2 89.2 0 0 1 0-178.4m0 10.7a78.5 78.5 0 1 1 0 157 78.5 78.5 0 0 1 0-157m-65.6 102a155 155 0 0 1 32-44l6 4a155 155 0 0 0-34.1 48.4 70 70 0 0 1-3.9-8.3m71.1-40.6q2.8 2.3 5.4 4.8l5.8-4.5-5.4-4.7zm-11.4-8.7 5.9 4.3 5.9-4.3-5.9-4.3zm.6 18.3 5.3 5 5.3-5-5.3-5zm-11.4-9.3q3 2.2 5.8 4.5l5.4-4.8-5.8-4.4q-2.7 2.2-5.4 4.7m35.2-16.9q-3-2.3-6-4.3l-6.7 4 6 4.3zm10.4 8.6-5.3-4.6-6.4 4 5.5 4.6zm-36-16.6q3.5-2.3 7.1-4.3l7 4.3-7 4zm-11.5 8q3-2.3 6-4.3l6.7 4-6 4.3zM291 215l5.3-4.6 6.4 4-5.5 4.6zm-32.7-10.2a157 157 0 0 1 21.5 10.6 153 153 0 0 0-28.6 37.4 71 71 0 0 1 7-48m6-9.2q13 4.2 25.6 11l-5.3 4.6q-11.6-6.4-23.6-10.8 1.6-2.6 3.3-4.8m7.5-8.3q14.6 4 29.2 11.3l-6 4.2q-13.5-6.7-27.3-11.2zm11-8.4.6.2.8.2q14.8 4 29.7 11.5l-7.4 4.3a187 187 0 0 0-30.2-11.6q3-2.5 6.4-4.6m68.6-3.4-.8.3q-15.4 4.5-30.5 11.8-14.8-7.2-30-11.7l-.5-.1q-.5 0-.8-.3a70 70 0 0 1 62.6 0m12.5 8-.7.2q-15 4.4-29.6 11.4-3.6-2.3-7.4-4.3a145 145 0 0 1 31.3-11.9q3.4 2.2 6.4 4.6m8.5 8q-13.8 4.5-27.2 11.3l-6-4.2q14.5-7.4 29-11.3zm6.7 8.8q-12 4.4-23.6 10.8l-5.3-4.5q12.6-7 25.6-11 1.8 2.1 3.3 4.7m9.7 52.4a153 153 0 0 0-28.6-37.4 157 157 0 0 1 21.5-10.6 70 70 0 0 1 7.1 48m-7 19.1a155 155 0 0 0-34-48.3q3-2.2 6-4.1a157 157 0 0 1 31.9 44 70 70 0 0 1-3.9 8.4m-10.9 15c-8.6-22-20.6-39.9-34.7-54.2l5.6-4.7c14.6 14.4 27 32 35 51.9a71 71 0 0 1-5.9 7m-13.3 10.9-.9-2.5c-7.7-21-18.6-38.2-31.4-52.3l5.3-5.3a151 151 0 0 1 34 55 71 71 0 0 1-7 5m-67.9 4 .9-2.8c6.5-19 16.8-36 29.5-50.3 12.7 14.4 23 31.3 29.5 50.3l1 2.8a70 70 0 0 1-60.9 0m-14.1-9a151 151 0 0 1 34-55l5.3 5.3a158 158 0 0 0-31.4 52.3l-1 2.5a70 70 0 0 1-7-5m-12-13c8-19.9 20.3-37.4 34.9-51.8l5.6 4.7a157 157 0 0 0-34.7 54.2q-3.1-3.4-5.9-7"</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 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">:square</code>) ↓</p><svg class="size-10" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 512 512" space="preserve"><path fill="red" d="M0 0h512v512H0Z"></path><path fill="#ff0" fill-rule="evenodd" d="m278.1 156.4 2.9-55.5q0-.5-.4-.5t-.6.4l-14.2 53.4-.1.6a6.3 6.3 0 1 0 12.4 1.6m15.3 4.7 11.6-54.4q0-.4-.3-.6-.4 0-.6.3L281.6 157l-.2.5a6.3 6.3 0 1 0 12 3.6m14.4 7 20-51.8a.5.5 0 0 0-.9-.5l-30.1 46.4-.3.5a6.3 6.3 0 1 0 11.3 5.4m13.1 9.2 27.9-48a.5.5 0 0 0-.8-.6l-37 41-.4.5a6.3 6.3 0 1 0 10.3 7.1m11.5 11.1 35-43.1q.3-.3 0-.7h-.7l-43 34.8-.4.4a6.3 6.3 0 1 0 9.1 8.6m9.7 12.8 41.3-37.2q.2-.2 0-.6l-.6-.2-48 27.8-.4.3a6.3 6.3 0 1 0 7.7 9.9m7.5 14.1 46.6-30.2a.5.5 0 0 0-.5-.9l-51.6 19.9-.5.2a6.3 6.3 0 1 0 6 11m5.2 15.2 50.8-22.6a.5.5 0 0 0-.3-.9L351 218.5l-.5.2a6.3 6.3 0 1 0 4.2 11.8m2.8 15.8 53.7-14.3q.4 0 .3-.6-.1-.3-.5-.4l-55.3 2.9h-.5a6.3 6.3 0 1 0 2.3 12.4m.2 16 55.3-5.8a.5.5 0 0 0 0-1l-55-5.7h-.6a6.3 6.3 0 1 0 .3 12.5m-2.2 15.8L411 281a.5.5 0 0 0 .1-1l-53.4-14.2-.6-.1a6.3 6.3 0 1 0-1.6 12.4m-4.7 15.3 54.4 11.6q.4 0 .6-.3 0-.5-.3-.6L355 281.6l-.5-.2a6.3 6.3 0 1 0-3.6 12m-7 14.4 51.8 20q.4.1.7-.2 0-.4-.2-.7l-46.4-30.1-.5-.3a6.3 6.3 0 1 0-5.4 11.3m-9.2 13.1 48 27.9a.5.5 0 0 0 .6-.8l-41-37-.5-.4a6.3 6.3 0 1 0-7.1 10.3m-11.1 11.5 43.1 35a.5.5 0 0 0 .7-.7l-34.8-43-.4-.4a6.3 6.3 0 1 0-8.6 9.1m-12.8 9.7 37.2 41.3a.5.5 0 0 0 .8-.6l-27.8-48-.3-.4a6.3 6.3 0 1 0-9.9 7.7m-14.1 7.5 30.2 46.6q.3.3.7.2.3-.3.2-.7l-19.9-51.6-.2-.5a6.3 6.3 0 1 0-11 6m-15.2 5.2 22.6 50.8q0 .3.6.3.4-.2.3-.6L293.5 351l-.2-.5a6.3 6.3 0 1 0-11.8 4.2m-15.8 2.8 14.3 53.7q0 .4.6.3.4-.1.4-.5l-2.9-55.3v-.5a6.3 6.3 0 1 0-12.4 2.3m-16 .2 5.8 55.3a.5.5 0 0 0 1 0l5.7-55v-.6a6.3 6.3 0 1 0-12.5.3m-15.8-2.2L231 411a.5.5 0 0 0 1 .1l14.2-53.4.1-.6a6.3 6.3 0 1 0-12.4-1.6m-15.3-4.7L207 405.3a.5.5 0 0 0 1 .3l22.4-50.6.2-.5a6.3 6.3 0 1 0-12-3.6m-14.4-7-20 51.8q-.1.4.2.7.4 0 .7-.2l30.1-46.4.3-.5a6.3 6.3 0 1 0-11.3-5.4m-13.1-9.2-27.9 48a.5.5 0 0 0 .8.6l37-41 .4-.5a6.3 6.3 0 1 0-10.3-7.1m-11.5-11.1-35 43.1q-.3.3 0 .7t.7 0l43-34.8.4-.4a6.3 6.3 0 1 0-9.1-8.6m-9.7-12.8L128.6 348a.5.5 0 0 0 .6.8l48-27.8.4-.3a6.3 6.3 0 1 0-7.7-9.9m-7.5-14.1-46.6 30.2a.5.5 0 0 0 .5.9l51.6-19.9.5-.2a6.3 6.3 0 1 0-6-11m-5.2-15.2-50.8 22.6q-.3 0-.3.6.2.4.6.3l54.2-11.5.5-.2a6.3 6.3 0 1 0-4.2-11.8m-2.8-15.8L100.7 280a.5.5 0 0 0 .2 1l55.3-2.9h.5a6.3 6.3 0 1 0-2.3-12.4m-.2-16-55.3 5.8a.5.5 0 0 0 0 1l55 5.7h.6a6.3 6.3 0 1 0-.3-12.5m2.2-15.8-55.5-2.9a.5.5 0 0 0-.1 1l53.4 14.2.6.1a6.3 6.3 0 1 0 1.6-12.4m4.7-15.3L106.7 207q-.4 0-.6.3 0 .4.3.6l50.6 22.5.5.2a6.3 6.3 0 1 0 3.6-12m7-14.4-51.8-20a.5.5 0 0 0-.5.9l46.4 30.1.5.3a6.3 6.3 0 1 0 5.4-11.3m9.2-13.1-48-27.9-.7.2q-.2.4 0 .6l41.2 37 .4.4a6.3 6.3 0 1 0 7.1-10.3m11.1-11.5-43.1-35a.5.5 0 0 0-.7.7l34.8 43 .4.4a6.3 6.3 0 1 0 8.6-9.1m12.8-9.7L164 128.6h-.6q-.4.2-.2.6l27.8 48 .3.4a6.3 6.3 0 1 0 9.9-7.7m14.1-7.5-30.2-46.6a.5.5 0 0 0-.9.5l19.9 51.6.2.5a6.3 6.3 0 1 0 11-6m15.2-5.2-22.6-50.8a.5.5 0 0 0-.9.3l11.5 54.2.2.5a6.3 6.3 0 1 0 11.8-4.2m15.8-2.8L232 100.7q0-.4-.6-.3-.3.1-.4.5l2.9 55.3v.5a6.3 6.3 0 1 0 12.4-2.3m16-.2-5.8-55.3a.5.5 0 0 0-1 0l-5.7 55v.6a6.3 6.3 0 1 0 12.5-.3m-6.3 6.6a95.2 95.2 0 1 1 0 190.4 95.2 95.2 0 0 1 0-190.4m0 11.4a83.8 83.8 0 1 1 0 167.6 83.8 83.8 0 0 1 0-167.6m-70 109c8.6-18 20.5-33.8 34.1-47.1q3.3 2 6.4 4.4a165 165 0 0 0-36.4 51.5q-2.3-4.2-4-8.9m75.8-43.2 5.8 5 6-4.7-5.7-5q-3 2.2-6 4.7m-12.3-9.3 6.3 4.6q3-2.4 6.3-4.6L256 224zm.6 19.5q3 2.5 5.7 5.4l5.7-5.4-5.7-5.2q-3 2.4-5.7 5.2m-12-10 6 4.9q2.9-2.7 5.8-5-3-2.6-6.1-4.8zm37.5-18q-3-2.5-6.3-4.6-3.6 2-7.2 4.3l6.5 4.5q3.4-2.2 7-4.2m11.1 9.2-5.7-5-6.7 4.3 5.8 4.9zm-38.3-17.8 7.5-4.5 7.5 4.5-7.5 4.4zm-12.2 8.6q3-2.5 6.3-4.6 3.6 2 7.2 4.3l-6.5 4.5zm-11.1 9.2 5.7-5 6.7 4.3-5.8 4.9zm-35-11q11.7 4.7 23 11.4c-11.5 11-22 24.3-30.5 39.9a75 75 0 0 1 7.6-51.3m6.3-9.7q13.8 4.5 27.3 11.8l-5.7 4.8a191 191 0 0 0-25.2-11.6zm8-8.9q15.6 4.1 31.1 12l-6.4 4.6a196 196 0 0 0-29.1-12zm11.7-9 .6.3.9.2a155 155 0 0 1 31.7 12.2l-8 4.6a199 199 0 0 0-32.2-12.4q3.3-2.6 7-4.9m73-3.6-.7.3A199 199 0 0 0 256 200a199 199 0 0 0-32-12.4l-.6-.2q-.4 0-.8-.3a75 75 0 0 1 66.8 0m13.3 8.6-.7.2q-16 4.5-31.5 12.1l-8-4.6a154 154 0 0 1 33.3-12.6 75 75 0 0 1 7 4.9m9 8.6q-14.8 4.6-29 12l-6.5-4.6q15.6-7.9 31.1-12zm7.2 9.3q-12.9 4.7-25.2 11.6l-5.7-4.8q13.6-7.5 27.3-11.8zm10.3 56c-8.5-15.6-19-28.8-30.6-40q11.4-6.6 23-11.3a75 75 0 0 1 7.6 51.3M322 290a165 165 0 0 0-36.4-51.5q3.1-2.3 6.4-4.4a166 166 0 0 1 34 47q-1.7 4.6-4 9m-11.7 16c-9.1-23.6-22-42.6-37-57.9l6-5c15.6 15.4 28.7 34 37.3 55.3q-3 4-6.3 7.5M296 317.6l-1-2.7a169 169 0 0 0-33.5-55.7l5.7-5.6a161 161 0 0 1 36.3 58.6q-3.6 3-7.5 5.4m-72.4 4.3 1-3a157 157 0 0 1 31.4-53.7 159 159 0 0 1 31.5 53.7l1 3a75 75 0 0 1-65 0m-15-9.7a161 161 0 0 1 36.3-58.6q3 2.7 5.7 5.6a169 169 0 0 0-33.6 55.7l-1 2.7q-3.8-2.4-7.4-5.4m-13-13.7a162 162 0 0 1 37.4-55.2q3 2.3 6 5a164 164 0 0 0-37 57.7 75 75 0 0 1-6.4-7.5"></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">Flag</span><span class="o">::</span><span class="no">Kg</span><span class="p">(</span><span class="ss">variant: :square</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">Flag</span><span class="o">::</span><span class="no">Kg</span><span class="p">.</span><span class="nf">new</span><span class="p">(</span><span class="ss">variant: :square</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">xmlns: </span><span class="s1">'http://www.w3.org/2000/svg'</span><span class="p">,</span>
		<span class="ss">viewbox: </span><span class="s1">'0 0 512 512'</span><span class="p">,</span>
		<span class="ss">space: </span><span class="s1">'preserve'</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">fill: </span><span class="s1">'red'</span><span class="p">,</span> <span class="ss">d: </span><span class="s1">'M0 0h512v512H0Z'</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">fill: </span><span class="s1">'#ff0'</span><span class="p">,</span>
			<span class="ss">fill_rule: </span><span class="s1">'evenodd'</span><span class="p">,</span>
			<span class="ss">d:
				</span><span class="s1">'m278.1 156.4 2.9-55.5q0-.5-.4-.5t-.6.4l-14.2 53.4-.1.6a6.3 6.3 0 1 0 12.4 1.6m15.3 4.7 11.6-54.4q0-.4-.3-.6-.4 0-.6.3L281.6 157l-.2.5a6.3 6.3 0 1 0 12 3.6m14.4 7 20-51.8a.5.5 0 0 0-.9-.5l-30.1 46.4-.3.5a6.3 6.3 0 1 0 11.3 5.4m13.1 9.2 27.9-48a.5.5 0 0 0-.8-.6l-37 41-.4.5a6.3 6.3 0 1 0 10.3 7.1m11.5 11.1 35-43.1q.3-.3 0-.7h-.7l-43 34.8-.4.4a6.3 6.3 0 1 0 9.1 8.6m9.7 12.8 41.3-37.2q.2-.2 0-.6l-.6-.2-48 27.8-.4.3a6.3 6.3 0 1 0 7.7 9.9m7.5 14.1 46.6-30.2a.5.5 0 0 0-.5-.9l-51.6 19.9-.5.2a6.3 6.3 0 1 0 6 11m5.2 15.2 50.8-22.6a.5.5 0 0 0-.3-.9L351 218.5l-.5.2a6.3 6.3 0 1 0 4.2 11.8m2.8 15.8 53.7-14.3q.4 0 .3-.6-.1-.3-.5-.4l-55.3 2.9h-.5a6.3 6.3 0 1 0 2.3 12.4m.2 16 55.3-5.8a.5.5 0 0 0 0-1l-55-5.7h-.6a6.3 6.3 0 1 0 .3 12.5m-2.2 15.8L411 281a.5.5 0 0 0 .1-1l-53.4-14.2-.6-.1a6.3 6.3 0 1 0-1.6 12.4m-4.7 15.3 54.4 11.6q.4 0 .6-.3 0-.5-.3-.6L355 281.6l-.5-.2a6.3 6.3 0 1 0-3.6 12m-7 14.4 51.8 20q.4.1.7-.2 0-.4-.2-.7l-46.4-30.1-.5-.3a6.3 6.3 0 1 0-5.4 11.3m-9.2 13.1 48 27.9a.5.5 0 0 0 .6-.8l-41-37-.5-.4a6.3 6.3 0 1 0-7.1 10.3m-11.1 11.5 43.1 35a.5.5 0 0 0 .7-.7l-34.8-43-.4-.4a6.3 6.3 0 1 0-8.6 9.1m-12.8 9.7 37.2 41.3a.5.5 0 0 0 .8-.6l-27.8-48-.3-.4a6.3 6.3 0 1 0-9.9 7.7m-14.1 7.5 30.2 46.6q.3.3.7.2.3-.3.2-.7l-19.9-51.6-.2-.5a6.3 6.3 0 1 0-11 6m-15.2 5.2 22.6 50.8q0 .3.6.3.4-.2.3-.6L293.5 351l-.2-.5a6.3 6.3 0 1 0-11.8 4.2m-15.8 2.8 14.3 53.7q0 .4.6.3.4-.1.4-.5l-2.9-55.3v-.5a6.3 6.3 0 1 0-12.4 2.3m-16 .2 5.8 55.3a.5.5 0 0 0 1 0l5.7-55v-.6a6.3 6.3 0 1 0-12.5.3m-15.8-2.2L231 411a.5.5 0 0 0 1 .1l14.2-53.4.1-.6a6.3 6.3 0 1 0-12.4-1.6m-15.3-4.7L207 405.3a.5.5 0 0 0 1 .3l22.4-50.6.2-.5a6.3 6.3 0 1 0-12-3.6m-14.4-7-20 51.8q-.1.4.2.7.4 0 .7-.2l30.1-46.4.3-.5a6.3 6.3 0 1 0-11.3-5.4m-13.1-9.2-27.9 48a.5.5 0 0 0 .8.6l37-41 .4-.5a6.3 6.3 0 1 0-10.3-7.1m-11.5-11.1-35 43.1q-.3.3 0 .7t.7 0l43-34.8.4-.4a6.3 6.3 0 1 0-9.1-8.6m-9.7-12.8L128.6 348a.5.5 0 0 0 .6.8l48-27.8.4-.3a6.3 6.3 0 1 0-7.7-9.9m-7.5-14.1-46.6 30.2a.5.5 0 0 0 .5.9l51.6-19.9.5-.2a6.3 6.3 0 1 0-6-11m-5.2-15.2-50.8 22.6q-.3 0-.3.6.2.4.6.3l54.2-11.5.5-.2a6.3 6.3 0 1 0-4.2-11.8m-2.8-15.8L100.7 280a.5.5 0 0 0 .2 1l55.3-2.9h.5a6.3 6.3 0 1 0-2.3-12.4m-.2-16-55.3 5.8a.5.5 0 0 0 0 1l55 5.7h.6a6.3 6.3 0 1 0-.3-12.5m2.2-15.8-55.5-2.9a.5.5 0 0 0-.1 1l53.4 14.2.6.1a6.3 6.3 0 1 0 1.6-12.4m4.7-15.3L106.7 207q-.4 0-.6.3 0 .4.3.6l50.6 22.5.5.2a6.3 6.3 0 1 0 3.6-12m7-14.4-51.8-20a.5.5 0 0 0-.5.9l46.4 30.1.5.3a6.3 6.3 0 1 0 5.4-11.3m9.2-13.1-48-27.9-.7.2q-.2.4 0 .6l41.2 37 .4.4a6.3 6.3 0 1 0 7.1-10.3m11.1-11.5-43.1-35a.5.5 0 0 0-.7.7l34.8 43 .4.4a6.3 6.3 0 1 0 8.6-9.1m12.8-9.7L164 128.6h-.6q-.4.2-.2.6l27.8 48 .3.4a6.3 6.3 0 1 0 9.9-7.7m14.1-7.5-30.2-46.6a.5.5 0 0 0-.9.5l19.9 51.6.2.5a6.3 6.3 0 1 0 11-6m15.2-5.2-22.6-50.8a.5.5 0 0 0-.9.3l11.5 54.2.2.5a6.3 6.3 0 1 0 11.8-4.2m15.8-2.8L232 100.7q0-.4-.6-.3-.3.1-.4.5l2.9 55.3v.5a6.3 6.3 0 1 0 12.4-2.3m16-.2-5.8-55.3a.5.5 0 0 0-1 0l-5.7 55v.6a6.3 6.3 0 1 0 12.5-.3m-6.3 6.6a95.2 95.2 0 1 1 0 190.4 95.2 95.2 0 0 1 0-190.4m0 11.4a83.8 83.8 0 1 1 0 167.6 83.8 83.8 0 0 1 0-167.6m-70 109c8.6-18 20.5-33.8 34.1-47.1q3.3 2 6.4 4.4a165 165 0 0 0-36.4 51.5q-2.3-4.2-4-8.9m75.8-43.2 5.8 5 6-4.7-5.7-5q-3 2.2-6 4.7m-12.3-9.3 6.3 4.6q3-2.4 6.3-4.6L256 224zm.6 19.5q3 2.5 5.7 5.4l5.7-5.4-5.7-5.2q-3 2.4-5.7 5.2m-12-10 6 4.9q2.9-2.7 5.8-5-3-2.6-6.1-4.8zm37.5-18q-3-2.5-6.3-4.6-3.6 2-7.2 4.3l6.5 4.5q3.4-2.2 7-4.2m11.1 9.2-5.7-5-6.7 4.3 5.8 4.9zm-38.3-17.8 7.5-4.5 7.5 4.5-7.5 4.4zm-12.2 8.6q3-2.5 6.3-4.6 3.6 2 7.2 4.3l-6.5 4.5zm-11.1 9.2 5.7-5 6.7 4.3-5.8 4.9zm-35-11q11.7 4.7 23 11.4c-11.5 11-22 24.3-30.5 39.9a75 75 0 0 1 7.6-51.3m6.3-9.7q13.8 4.5 27.3 11.8l-5.7 4.8a191 191 0 0 0-25.2-11.6zm8-8.9q15.6 4.1 31.1 12l-6.4 4.6a196 196 0 0 0-29.1-12zm11.7-9 .6.3.9.2a155 155 0 0 1 31.7 12.2l-8 4.6a199 199 0 0 0-32.2-12.4q3.3-2.6 7-4.9m73-3.6-.7.3A199 199 0 0 0 256 200a199 199 0 0 0-32-12.4l-.6-.2q-.4 0-.8-.3a75 75 0 0 1 66.8 0m13.3 8.6-.7.2q-16 4.5-31.5 12.1l-8-4.6a154 154 0 0 1 33.3-12.6 75 75 0 0 1 7 4.9m9 8.6q-14.8 4.6-29 12l-6.5-4.6q15.6-7.9 31.1-12zm7.2 9.3q-12.9 4.7-25.2 11.6l-5.7-4.8q13.6-7.5 27.3-11.8zm10.3 56c-8.5-15.6-19-28.8-30.6-40q11.4-6.6 23-11.3a75 75 0 0 1 7.6 51.3M322 290a165 165 0 0 0-36.4-51.5q3.1-2.3 6.4-4.4a166 166 0 0 1 34 47q-1.7 4.6-4 9m-11.7 16c-9.1-23.6-22-42.6-37-57.9l6-5c15.6 15.4 28.7 34 37.3 55.3q-3 4-6.3 7.5M296 317.6l-1-2.7a169 169 0 0 0-33.5-55.7l5.7-5.6a161 161 0 0 1 36.3 58.6q-3.6 3-7.5 5.4m-72.4 4.3 1-3a157 157 0 0 1 31.4-53.7 159 159 0 0 1 31.5 53.7l1 3a75 75 0 0 1-65 0m-15-9.7a161 161 0 0 1 36.3-58.6q3 2.7 5.7 5.6a169 169 0 0 0-33.6 55.7l-1 2.7q-3.8-2.4-7.4-5.4m-13-13.7a162 162 0 0 1 37.4-55.2q3 2.3 6 5a164 164 0 0 0-37 57.7 75 75 0 0 1-6.4-7.5'</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 512 512"</span> <span class="na">space=</span><span class="s">"preserve"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">fill=</span><span class="s">"red"</span> <span class="na">d=</span><span class="s">"M0 0h512v512H0Z"</span><span class="nt">&gt;&lt;/path&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">fill=</span><span class="s">"#ff0"</span> <span class="na">fill-rule=</span><span class="s">"evenodd"</span> <span class="na">d=</span><span class="s">"m278.1 156.4 2.9-55.5q0-.5-.4-.5t-.6.4l-14.2 53.4-.1.6a6.3 6.3 0 1 0 12.4 1.6m15.3 4.7 11.6-54.4q0-.4-.3-.6-.4 0-.6.3L281.6 157l-.2.5a6.3 6.3 0 1 0 12 3.6m14.4 7 20-51.8a.5.5 0 0 0-.9-.5l-30.1 46.4-.3.5a6.3 6.3 0 1 0 11.3 5.4m13.1 9.2 27.9-48a.5.5 0 0 0-.8-.6l-37 41-.4.5a6.3 6.3 0 1 0 10.3 7.1m11.5 11.1 35-43.1q.3-.3 0-.7h-.7l-43 34.8-.4.4a6.3 6.3 0 1 0 9.1 8.6m9.7 12.8 41.3-37.2q.2-.2 0-.6l-.6-.2-48 27.8-.4.3a6.3 6.3 0 1 0 7.7 9.9m7.5 14.1 46.6-30.2a.5.5 0 0 0-.5-.9l-51.6 19.9-.5.2a6.3 6.3 0 1 0 6 11m5.2 15.2 50.8-22.6a.5.5 0 0 0-.3-.9L351 218.5l-.5.2a6.3 6.3 0 1 0 4.2 11.8m2.8 15.8 53.7-14.3q.4 0 .3-.6-.1-.3-.5-.4l-55.3 2.9h-.5a6.3 6.3 0 1 0 2.3 12.4m.2 16 55.3-5.8a.5.5 0 0 0 0-1l-55-5.7h-.6a6.3 6.3 0 1 0 .3 12.5m-2.2 15.8L411 281a.5.5 0 0 0 .1-1l-53.4-14.2-.6-.1a6.3 6.3 0 1 0-1.6 12.4m-4.7 15.3 54.4 11.6q.4 0 .6-.3 0-.5-.3-.6L355 281.6l-.5-.2a6.3 6.3 0 1 0-3.6 12m-7 14.4 51.8 20q.4.1.7-.2 0-.4-.2-.7l-46.4-30.1-.5-.3a6.3 6.3 0 1 0-5.4 11.3m-9.2 13.1 48 27.9a.5.5 0 0 0 .6-.8l-41-37-.5-.4a6.3 6.3 0 1 0-7.1 10.3m-11.1 11.5 43.1 35a.5.5 0 0 0 .7-.7l-34.8-43-.4-.4a6.3 6.3 0 1 0-8.6 9.1m-12.8 9.7 37.2 41.3a.5.5 0 0 0 .8-.6l-27.8-48-.3-.4a6.3 6.3 0 1 0-9.9 7.7m-14.1 7.5 30.2 46.6q.3.3.7.2.3-.3.2-.7l-19.9-51.6-.2-.5a6.3 6.3 0 1 0-11 6m-15.2 5.2 22.6 50.8q0 .3.6.3.4-.2.3-.6L293.5 351l-.2-.5a6.3 6.3 0 1 0-11.8 4.2m-15.8 2.8 14.3 53.7q0 .4.6.3.4-.1.4-.5l-2.9-55.3v-.5a6.3 6.3 0 1 0-12.4 2.3m-16 .2 5.8 55.3a.5.5 0 0 0 1 0l5.7-55v-.6a6.3 6.3 0 1 0-12.5.3m-15.8-2.2L231 411a.5.5 0 0 0 1 .1l14.2-53.4.1-.6a6.3 6.3 0 1 0-12.4-1.6m-15.3-4.7L207 405.3a.5.5 0 0 0 1 .3l22.4-50.6.2-.5a6.3 6.3 0 1 0-12-3.6m-14.4-7-20 51.8q-.1.4.2.7.4 0 .7-.2l30.1-46.4.3-.5a6.3 6.3 0 1 0-11.3-5.4m-13.1-9.2-27.9 48a.5.5 0 0 0 .8.6l37-41 .4-.5a6.3 6.3 0 1 0-10.3-7.1m-11.5-11.1-35 43.1q-.3.3 0 .7t.7 0l43-34.8.4-.4a6.3 6.3 0 1 0-9.1-8.6m-9.7-12.8L128.6 348a.5.5 0 0 0 .6.8l48-27.8.4-.3a6.3 6.3 0 1 0-7.7-9.9m-7.5-14.1-46.6 30.2a.5.5 0 0 0 .5.9l51.6-19.9.5-.2a6.3 6.3 0 1 0-6-11m-5.2-15.2-50.8 22.6q-.3 0-.3.6.2.4.6.3l54.2-11.5.5-.2a6.3 6.3 0 1 0-4.2-11.8m-2.8-15.8L100.7 280a.5.5 0 0 0 .2 1l55.3-2.9h.5a6.3 6.3 0 1 0-2.3-12.4m-.2-16-55.3 5.8a.5.5 0 0 0 0 1l55 5.7h.6a6.3 6.3 0 1 0-.3-12.5m2.2-15.8-55.5-2.9a.5.5 0 0 0-.1 1l53.4 14.2.6.1a6.3 6.3 0 1 0 1.6-12.4m4.7-15.3L106.7 207q-.4 0-.6.3 0 .4.3.6l50.6 22.5.5.2a6.3 6.3 0 1 0 3.6-12m7-14.4-51.8-20a.5.5 0 0 0-.5.9l46.4 30.1.5.3a6.3 6.3 0 1 0 5.4-11.3m9.2-13.1-48-27.9-.7.2q-.2.4 0 .6l41.2 37 .4.4a6.3 6.3 0 1 0 7.1-10.3m11.1-11.5-43.1-35a.5.5 0 0 0-.7.7l34.8 43 .4.4a6.3 6.3 0 1 0 8.6-9.1m12.8-9.7L164 128.6h-.6q-.4.2-.2.6l27.8 48 .3.4a6.3 6.3 0 1 0 9.9-7.7m14.1-7.5-30.2-46.6a.5.5 0 0 0-.9.5l19.9 51.6.2.5a6.3 6.3 0 1 0 11-6m15.2-5.2-22.6-50.8a.5.5 0 0 0-.9.3l11.5 54.2.2.5a6.3 6.3 0 1 0 11.8-4.2m15.8-2.8L232 100.7q0-.4-.6-.3-.3.1-.4.5l2.9 55.3v.5a6.3 6.3 0 1 0 12.4-2.3m16-.2-5.8-55.3a.5.5 0 0 0-1 0l-5.7 55v.6a6.3 6.3 0 1 0 12.5-.3m-6.3 6.6a95.2 95.2 0 1 1 0 190.4 95.2 95.2 0 0 1 0-190.4m0 11.4a83.8 83.8 0 1 1 0 167.6 83.8 83.8 0 0 1 0-167.6m-70 109c8.6-18 20.5-33.8 34.1-47.1q3.3 2 6.4 4.4a165 165 0 0 0-36.4 51.5q-2.3-4.2-4-8.9m75.8-43.2 5.8 5 6-4.7-5.7-5q-3 2.2-6 4.7m-12.3-9.3 6.3 4.6q3-2.4 6.3-4.6L256 224zm.6 19.5q3 2.5 5.7 5.4l5.7-5.4-5.7-5.2q-3 2.4-5.7 5.2m-12-10 6 4.9q2.9-2.7 5.8-5-3-2.6-6.1-4.8zm37.5-18q-3-2.5-6.3-4.6-3.6 2-7.2 4.3l6.5 4.5q3.4-2.2 7-4.2m11.1 9.2-5.7-5-6.7 4.3 5.8 4.9zm-38.3-17.8 7.5-4.5 7.5 4.5-7.5 4.4zm-12.2 8.6q3-2.5 6.3-4.6 3.6 2 7.2 4.3l-6.5 4.5zm-11.1 9.2 5.7-5 6.7 4.3-5.8 4.9zm-35-11q11.7 4.7 23 11.4c-11.5 11-22 24.3-30.5 39.9a75 75 0 0 1 7.6-51.3m6.3-9.7q13.8 4.5 27.3 11.8l-5.7 4.8a191 191 0 0 0-25.2-11.6zm8-8.9q15.6 4.1 31.1 12l-6.4 4.6a196 196 0 0 0-29.1-12zm11.7-9 .6.3.9.2a155 155 0 0 1 31.7 12.2l-8 4.6a199 199 0 0 0-32.2-12.4q3.3-2.6 7-4.9m73-3.6-.7.3A199 199 0 0 0 256 200a199 199 0 0 0-32-12.4l-.6-.2q-.4 0-.8-.3a75 75 0 0 1 66.8 0m13.3 8.6-.7.2q-16 4.5-31.5 12.1l-8-4.6a154 154 0 0 1 33.3-12.6 75 75 0 0 1 7 4.9m9 8.6q-14.8 4.6-29 12l-6.5-4.6q15.6-7.9 31.1-12zm7.2 9.3q-12.9 4.7-25.2 11.6l-5.7-4.8q13.6-7.5 27.3-11.8zm10.3 56c-8.5-15.6-19-28.8-30.6-40q11.4-6.6 23-11.3a75 75 0 0 1 7.6 51.3M322 290a165 165 0 0 0-36.4-51.5q3.1-2.3 6.4-4.4a166 166 0 0 1 34 47q-1.7 4.6-4 9m-11.7 16c-9.1-23.6-22-42.6-37-57.9l6-5c15.6 15.4 28.7 34 37.3 55.3q-3 4-6.3 7.5M296 317.6l-1-2.7a169 169 0 0 0-33.5-55.7l5.7-5.6a161 161 0 0 1 36.3 58.6q-3.6 3-7.5 5.4m-72.4 4.3 1-3a157 157 0 0 1 31.4-53.7 159 159 0 0 1 31.5 53.7l1 3a75 75 0 0 1-65 0m-15-9.7a161 161 0 0 1 36.3-58.6q3 2.7 5.7 5.6a169 169 0 0 0-33.6 55.7l-1 2.7q-3.8-2.4-7.4-5.4m-13-13.7a162 162 0 0 1 37.4-55.2q3 2.3 6 5a164 164 0 0 0-37 57.7 75 75 0 0 1-6.4-7.5"</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>