<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">Cupcake02</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/cupcake02.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="M7.88457 9.17584C6.17716 9.66367 5 11.2243 5 13M7.88457 9.17584C9.85501 8.61285 14.0271 8.25059 14.8267 6.00741M7.88457 9.17584C7.88457 5 12 6 12 2C14.0469 2 15.5026 4.11086 14.8267 6.00741M14.8267 6.00741C16.454 5.8677 17.5442 7.73849 16.6846 9.07847M16.6846 9.07847C16.4109 9.50517 15.9612 9.85252 15.5 10.119M16.6846 9.07847C18.6418 9.5353 19 11.2937 19 13" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M16 14.9487C16 12.3504 20 12.3504 20 14.9487C20 16.3111 19.2446 17.4779 18.6584 18.659C17.8515 20.2846 17.448 21.0973 16.7231 21.5487C15.9981 22 15.096 22 13.2918 22H10.7082C8.90398 22 8.00186 22 7.27691 21.5487C6.55195 21.0973 6.14852 20.2846 5.34164 18.659C4.7554 17.4779 4 16.3111 4 14.9487C4 12.3504 8 12.3504 8 14.9487C8 12.3504 12 12.3504 12 14.9487C12 12.3504 16 12.3504 16 14.9487Z" stroke="#141B34" stroke-width="1.5" stroke-linejoin="round"></path></svg></div><div><p class="text-sm font-normal">With <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">Phlex::Kit</code> ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="no">Huge</span><span class="o">::</span><span class="no">Cupcake02</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">Cupcake02</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">'M7.88457 9.17584C6.17716 9.66367 5 11.2243 5 13M7.88457 9.17584C9.85501 8.61285 14.0271 8.25059 14.8267 6.00741M7.88457 9.17584C7.88457 5 12 6 12 2C14.0469 2 15.5026 4.11086 14.8267 6.00741M14.8267 6.00741C16.454 5.8677 17.5442 7.73849 16.6846 9.07847M16.6846 9.07847C16.4109 9.50517 15.9612 9.85252 15.5 10.119M16.6846 9.07847C18.6418 9.5353 19 11.2937 19 13'</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="ss">stroke_linejoin: </span><span class="s1">'round'</span>
		<span class="p">)</span>
		<span class="n">s</span><span class="p">.</span><span class="nf">path</span><span class="p">(</span>
			<span class="ss">d:
				</span><span class="s1">'M16 14.9487C16 12.3504 20 12.3504 20 14.9487C20 16.3111 19.2446 17.4779 18.6584 18.659C17.8515 20.2846 17.448 21.0973 16.7231 21.5487C15.9981 22 15.096 22 13.2918 22H10.7082C8.90398 22 8.00186 22 7.27691 21.5487C6.55195 21.0973 6.14852 20.2846 5.34164 18.659C4.7554 17.4779 4 16.3111 4 14.9487C4 12.3504 8 12.3504 8 14.9487C8 12.3504 12 12.3504 12 14.9487C12 12.3504 16 12.3504 16 14.9487Z'</span><span class="p">,</span>
			<span class="ss">stroke: </span><span class="s1">'#141B34'</span><span class="p">,</span>
			<span class="ss">stroke_width: </span><span class="s1">'1.5'</span><span class="p">,</span>
			<span class="ss">stroke_linejoin: </span><span class="s1">'round'</span>
		<span class="p">)</span>
	<span class="k">end</span>
<span class="k">end</span>
</pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div><div><p class="text-sm font-normal">Plain SVG ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">""</span> <span class="na">viewbox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M7.88457 9.17584C6.17716 9.66367 5 11.2243 5 13M7.88457 9.17584C9.85501 8.61285 14.0271 8.25059 14.8267 6.00741M7.88457 9.17584C7.88457 5 12 6 12 2C14.0469 2 15.5026 4.11086 14.8267 6.00741M14.8267 6.00741C16.454 5.8677 17.5442 7.73849 16.6846 9.07847M16.6846 9.07847C16.4109 9.50517 15.9612 9.85252 15.5 10.119M16.6846 9.07847C18.6418 9.5353 19 11.2937 19 13"</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="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;/path&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M16 14.9487C16 12.3504 20 12.3504 20 14.9487C20 16.3111 19.2446 17.4779 18.6584 18.659C17.8515 20.2846 17.448 21.0973 16.7231 21.5487C15.9981 22 15.096 22 13.2918 22H10.7082C8.90398 22 8.00186 22 7.27691 21.5487C6.55195 21.0973 6.14852 20.2846 5.34164 18.659C4.7554 17.4779 4 16.3111 4 14.9487C4 12.3504 8 12.3504 8 14.9487C8 12.3504 12 12.3504 12 14.9487C12 12.3504 16 12.3504 16 14.9487Z"</span> <span class="na">stroke=</span><span class="s">"#141B34"</span> <span class="na">stroke-width=</span><span class="s">"1.5"</span> <span class="na">stroke-linejoin=</span><span class="s">"round"</span><span class="nt">&gt;&lt;/path&gt;</span>
<span class="nt">&lt;/svg&gt;</span>
</pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div></div></div><div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm w-full" data-action="click->ruby-ui--sheet-content#close">Close</button></div><button type="button" class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click->ruby-ui--sheet-content#close"><svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template></div></template></turbo-stream>