<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">MilkCoconut</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/milk_coconut.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="M10.9712 21.9985H8.01002M18.025 8.0386L15.7395 5.21499C15.591 5.03156 15.5122 4.80151 15.517 4.56556L15.5379 3.53212C15.5549 2.69196 14.8785 2.00171 14.0382 2.00171H6.48688C5.65846 2.00171 4.98688 2.67328 4.98688 3.50171V4.94586L2.56347 7.45745C2.20374 7.83026 2.00272 8.32811 2.00272 8.84618V19.9985C2.00272 21.103 2.89814 21.9985 4.00271 21.9985H8.00185H8.01002M18.025 8.0386V10.0815M18.025 8.0386H7.83972M5.02585 4.94586L7.44927 7.45745C7.6141 7.62827 7.74561 7.82535 7.83972 8.0386M8.01002 21.9985V8.84617C8.01002 8.56549 7.95101 8.29075 7.83972 8.0386" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M13.2479 18.5748C12.5939 17.9209 13.2566 16.1982 14.7282 14.7271C16.1997 13.2559 17.9229 12.5933 18.577 13.2472M13.2479 18.5748C13.2479 19.1667 13.603 20.1137 14.1361 20.6466C15.9347 22.4447 18.8507 22.4447 20.6493 20.6466C22.4479 18.8485 22.4479 15.9332 20.6493 14.1351C20.1163 13.6022 19.169 13.2472 18.577 13.2472M13.2479 18.5748C13.8115 19.1382 15.1689 18.7241 16.4752 17.6575M18.577 13.2472C19.2309 13.901 18.5683 15.6237 17.0967 17.0949C16.8931 17.2983 16.6849 17.4863 16.4752 17.6575M16.4752 17.6575C16.5836 18.3579 16.8006 19.1667 17.9848 19.7587" stroke="#141B34" stroke-width="1.5" stroke-linecap="round"></path></svg></div><div><p class="text-sm font-normal">With <code class="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold">Phlex::Kit</code> ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="no">Huge</span><span class="o">::</span><span class="no">MilkCoconut</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">MilkCoconut</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">'M10.9712 21.9985H8.01002M18.025 8.0386L15.7395 5.21499C15.591 5.03156 15.5122 4.80151 15.517 4.56556L15.5379 3.53212C15.5549 2.69196 14.8785 2.00171 14.0382 2.00171H6.48688C5.65846 2.00171 4.98688 2.67328 4.98688 3.50171V4.94586L2.56347 7.45745C2.20374 7.83026 2.00272 8.32811 2.00272 8.84618V19.9985C2.00272 21.103 2.89814 21.9985 4.00271 21.9985H8.00185H8.01002M18.025 8.0386V10.0815M18.025 8.0386H7.83972M5.02585 4.94586L7.44927 7.45745C7.6141 7.62827 7.74561 7.82535 7.83972 8.0386M8.01002 21.9985V8.84617C8.01002 8.56549 7.95101 8.29075 7.83972 8.0386'</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">'M13.2479 18.5748C12.5939 17.9209 13.2566 16.1982 14.7282 14.7271C16.1997 13.2559 17.9229 12.5933 18.577 13.2472M13.2479 18.5748C13.2479 19.1667 13.603 20.1137 14.1361 20.6466C15.9347 22.4447 18.8507 22.4447 20.6493 20.6466C22.4479 18.8485 22.4479 15.9332 20.6493 14.1351C20.1163 13.6022 19.169 13.2472 18.577 13.2472M13.2479 18.5748C13.8115 19.1382 15.1689 18.7241 16.4752 17.6575M18.577 13.2472C19.2309 13.901 18.5683 15.6237 17.0967 17.0949C16.8931 17.2983 16.6849 17.4863 16.4752 17.6575M16.4752 17.6575C16.5836 18.3579 16.8006 19.1667 17.9848 19.7587'</span><span class="p">,</span>
			<span class="ss">stroke: </span><span class="s1">'#141B34'</span><span class="p">,</span>
			<span class="ss">stroke_width: </span><span class="s1">'1.5'</span><span class="p">,</span>
			<span class="ss">stroke_linecap: </span><span class="s1">'round'</span>
		<span class="p">)</span>
	<span class="k">end</span>
<span class="k">end</span>
</pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div><div><p class="text-sm font-normal">Plain SVG ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="nt">&lt;svg</span> <span class="na">xmlns=</span><span class="s">"http://www.w3.org/2000/svg"</span> <span class="na">class=</span><span class="s">""</span> <span class="na">viewbox=</span><span class="s">"0 0 24 24"</span> <span class="na">fill=</span><span class="s">"none"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M10.9712 21.9985H8.01002M18.025 8.0386L15.7395 5.21499C15.591 5.03156 15.5122 4.80151 15.517 4.56556L15.5379 3.53212C15.5549 2.69196 14.8785 2.00171 14.0382 2.00171H6.48688C5.65846 2.00171 4.98688 2.67328 4.98688 3.50171V4.94586L2.56347 7.45745C2.20374 7.83026 2.00272 8.32811 2.00272 8.84618V19.9985C2.00272 21.103 2.89814 21.9985 4.00271 21.9985H8.00185H8.01002M18.025 8.0386V10.0815M18.025 8.0386H7.83972M5.02585 4.94586L7.44927 7.45745C7.6141 7.62827 7.74561 7.82535 7.83972 8.0386M8.01002 21.9985V8.84617C8.01002 8.56549 7.95101 8.29075 7.83972 8.0386"</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">"M13.2479 18.5748C12.5939 17.9209 13.2566 16.1982 14.7282 14.7271C16.1997 13.2559 17.9229 12.5933 18.577 13.2472M13.2479 18.5748C13.2479 19.1667 13.603 20.1137 14.1361 20.6466C15.9347 22.4447 18.8507 22.4447 20.6493 20.6466C22.4479 18.8485 22.4479 15.9332 20.6493 14.1351C20.1163 13.6022 19.169 13.2472 18.577 13.2472M13.2479 18.5748C13.8115 19.1382 15.1689 18.7241 16.4752 17.6575M18.577 13.2472C19.2309 13.901 18.5683 15.6237 17.0967 17.0949C16.8931 17.2983 16.6849 17.4863 16.4752 17.6575M16.4752 17.6575C16.5836 18.3579 16.8006 19.1667 17.9848 19.7587"</span> <span class="na">stroke=</span><span class="s">"#141B34"</span> <span class="na">stroke-width=</span><span class="s">"1.5"</span> <span class="na">stroke-linecap=</span><span class="s">"round"</span><span class="nt">&gt;&lt;/path&gt;</span>
<span class="nt">&lt;/svg&gt;</span>
</pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div></div></div><div class="flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2 gap-y-2 sm:gap-y-0"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground px-4 py-2 h-9 text-sm w-full" data-action="click->ruby-ui--sheet-content#close">Close</button></div><button type="button" class="absolute end-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground" data-action="click->ruby-ui--sheet-content#close"><svg width="15" height="15" viewbox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="h-4 w-4"><path d="M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><span class="sr-only">Close</span></button></div></div></template></div></template></turbo-stream>