<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">VideoAiFill</h3><p class="text-sm text-muted-foreground gap-y-2">PhlexIcons::Remix</p><a href="https://github.com/AliOsm/phlex-icons/blob/main/lib/phlex-icons/remix/video_ai_fill.rb" type="button" class="whitespace-nowrap justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground px-3 py-1.5 h-8 text-xs flex items-center gap-1" target="-blank">Source code<svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path></svg></a></div><div class="py-4 space-y-4"><div class="space-y-2"><div><p class="text-sm font-normal">Icon ↓</p><svg class="size-10" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M19.7134 8.12811L19.4668 8.69379C19.2864 9.10792 18.7136 9.10792 18.5331 8.69379L18.2866 8.12811C17.8471 7.11947 17.0555 6.31641 16.0677 5.87708L15.308 5.53922C14.8973 5.35653 14.8973 4.75881 15.308 4.57612L16.0252 4.25714C17.0384 3.80651 17.8442 2.97373 18.2761 1.93083L18.5293 1.31953C18.7058 0.893489 19.2942 0.893489 19.4706 1.31953L19.7238 1.93083C20.1558 2.97373 20.9616 3.80651 21.9748 4.25714L22.6919 4.57612C23.1027 4.75881 23.1027 5.35653 22.6919 5.53922L21.9323 5.87708C20.9445 6.31641 20.1529 7.11947 19.7134 8.12811ZM19 11C19.7013 11 20.3744 10.8797 21 10.6586V20.0066C21 20.5552 20.5551 21 20.0066 21H3.9934C3.44476 21 3 20.5551 3 20.0066V3.9934C3 3.44476 3.44495 3 3.9934 3H13.3414C13.1203 3.62556 13 4.29873 13 5C13 8.31371 15.6863 11 19 11ZM10.6219 8.41459C10.5562 8.37078 10.479 8.34741 10.4 8.34741C10.1791 8.34741 10 8.52649 10 8.74741V15.2526C10 15.3316 10.0234 15.4088 10.0672 15.4745C10.1897 15.6583 10.4381 15.708 10.6219 15.5854L15.5008 12.3328C15.5447 12.3035 15.5824 12.2658 15.6117 12.2219C15.7343 12.0381 15.6846 11.7897 15.5008 11.6672L10.6219 8.41459Z"></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">Remix</span><span class="o">::</span><span class="no">VideoAiFill</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">Remix</span><span class="o">::</span><span class="no">VideoAiFill</span><span class="p">.</span><span class="nf">new</span></pre></div></div></div><div class="absolute top-2 right-2"><div data-ruby-ui--clipboard-target="trigger" data-action="click->ruby-ui--clipboard#copy"><button type="button" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 h-6 w-6 text-white hover:text-white hover:bg-white/20"><svg xmlns="http://www.w3.org/2000/svg" fill="none" viewbox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6"></path></svg></button></div></div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="successPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copied!</div></div><div class="hidden" style="width: max-content; position: absolute; top: 0; left: 0;" data-ruby-ui--clipboard-target="errorPopover"><div data-state="open" class="z-50 rounded-md text-sm border bg-background px-2 py-0.5 text-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">Copy failed!</div></div></div></div></div><div><p class="text-sm font-normal">Plain Phlex ↓</p><div class="w-full mt-1"><style>.highlight table td { padding: 5px; }
.highlight table pre { margin: 0; }
.highlight, .highlight .w {
  color: #c9d1d9;
  background-color: #161b22;
}
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp, .highlight .kr, .highlight .kt, .highlight .kv {
  color: #ff7b72;
}
.highlight .gr {
  color: #f0f6fc;
}
.highlight .gd {
  color: #ffdcd7;
  background-color: #67060c;
}
.highlight .nb {
  color: #ffa657;
}
.highlight .nc {
  color: #ffa657;
}
.highlight .no {
  color: #ffa657;
}
.highlight .nn {
  color: #ffa657;
}
.highlight .sr {
  color: #7ee787;
}
.highlight .na {
  color: #7ee787;
}
.highlight .nt {
  color: #7ee787;
}
.highlight .gi {
  color: #aff5b4;
  background-color: #033a16;
}
.highlight .ges {
  font-weight: bold;
  font-style: italic;
}
.highlight .kc {
  color: #79c0ff;
}
.highlight .l, .highlight .ld, .highlight .m, .highlight .mb, .highlight .mf, .highlight .mh, .highlight .mi, .highlight .il, .highlight .mo, .highlight .mx {
  color: #79c0ff;
}
.highlight .sb {
  color: #79c0ff;
}
.highlight .bp {
  color: #79c0ff;
}
.highlight .ne {
  color: #79c0ff;
}
.highlight .nl {
  color: #79c0ff;
}
.highlight .py {
  color: #79c0ff;
}
.highlight .nv, .highlight .vc, .highlight .vg, .highlight .vi, .highlight .vm {
  color: #79c0ff;
}
.highlight .o, .highlight .ow {
  color: #79c0ff;
}
.highlight .gh {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .gu {
  color: #1f6feb;
  font-weight: bold;
}
.highlight .s, .highlight .sa, .highlight .sc, .highlight .dl, .highlight .sd, .highlight .s2, .highlight .se, .highlight .sh, .highlight .sx, .highlight .s1, .highlight .ss {
  color: #a5d6ff;
}
.highlight .nd {
  color: #d2a8ff;
}
.highlight .nf, .highlight .fm {
  color: #d2a8ff;
}
.highlight .err {
  color: #f0f6fc;
  background-color: #8e1519;
}
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm, .highlight .cp, .highlight .cpf, .highlight .c1, .highlight .cs {
  color: #8b949e;
}
.highlight .gl {
  color: #8b949e;
}
.highlight .gt {
  color: #8b949e;
}
.highlight .ni {
  color: #c9d1d9;
}
.highlight .si {
  color: #c9d1d9;
}
.highlight .ge {
  color: #c9d1d9;
  font-style: italic;
}
.highlight .gs {
  color: #c9d1d9;
  font-weight: bold;
}</style><div data-controller="ruby-ui--clipboard" data-action="click@window->ruby-ui--clipboard#onClickOutside" data-ruby-ui--clipboard-success-value="Copied!" data-ruby-ui--clipboard-error-value="Copy failed!" data-ruby-ui--clipboard-options-value="{}" class="relative"><div><div data-ruby-ui--clipboard-target="source"><div style="tab-size: 2;" class="highlight text-sm max-h-[350px] after:content-none flex font-mono overflow-auto overflow-x rounded-md border !bg-stone-900 [&_pre]:p-4"><div class="after:content-none"><pre><span class="k">def</span> <span class="nf">view_template</span>
	<span class="n">svg</span><span class="p">(</span>
		<span class="o">**</span><span class="n">attrs</span><span class="p">,</span>
		<span class="ss">viewbox: </span><span class="s1">'0 0 24 24'</span><span class="p">,</span>
		<span class="ss">fill: </span><span class="s1">'currentColor'</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">'M19.7134 8.12811L19.4668 8.69379C19.2864 9.10792 18.7136 9.10792 18.5331 8.69379L18.2866 8.12811C17.8471 7.11947 17.0555 6.31641 16.0677 5.87708L15.308 5.53922C14.8973 5.35653 14.8973 4.75881 15.308 4.57612L16.0252 4.25714C17.0384 3.80651 17.8442 2.97373 18.2761 1.93083L18.5293 1.31953C18.7058 0.893489 19.2942 0.893489 19.4706 1.31953L19.7238 1.93083C20.1558 2.97373 20.9616 3.80651 21.9748 4.25714L22.6919 4.57612C23.1027 4.75881 23.1027 5.35653 22.6919 5.53922L21.9323 5.87708C20.9445 6.31641 20.1529 7.11947 19.7134 8.12811ZM19 11C19.7013 11 20.3744 10.8797 21 10.6586V20.0066C21 20.5552 20.5551 21 20.0066 21H3.9934C3.44476 21 3 20.5551 3 20.0066V3.9934C3 3.44476 3.44495 3 3.9934 3H13.3414C13.1203 3.62556 13 4.29873 13 5C13 8.31371 15.6863 11 19 11ZM10.6219 8.41459C10.5562 8.37078 10.479 8.34741 10.4 8.34741C10.1791 8.34741 10 8.52649 10 8.74741V15.2526C10 15.3316 10.0234 15.4088 10.0672 15.4745C10.1897 15.6583 10.4381 15.708 10.6219 15.5854L15.5008 12.3328C15.5447 12.3035 15.5824 12.2658 15.6117 12.2219C15.7343 12.0381 15.6846 11.7897 15.5008 11.6672L10.6219 8.41459Z'</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">fill=</span><span class="s">"currentColor"</span> <span class="na">viewbox=</span><span class="s">"0 0 24 24"</span><span class="nt">&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M19.7134 8.12811L19.4668 8.69379C19.2864 9.10792 18.7136 9.10792 18.5331 8.69379L18.2866 8.12811C17.8471 7.11947 17.0555 6.31641 16.0677 5.87708L15.308 5.53922C14.8973 5.35653 14.8973 4.75881 15.308 4.57612L16.0252 4.25714C17.0384 3.80651 17.8442 2.97373 18.2761 1.93083L18.5293 1.31953C18.7058 0.893489 19.2942 0.893489 19.4706 1.31953L19.7238 1.93083C20.1558 2.97373 20.9616 3.80651 21.9748 4.25714L22.6919 4.57612C23.1027 4.75881 23.1027 5.35653 22.6919 5.53922L21.9323 5.87708C20.9445 6.31641 20.1529 7.11947 19.7134 8.12811ZM19 11C19.7013 11 20.3744 10.8797 21 10.6586V20.0066C21 20.5552 20.5551 21 20.0066 21H3.9934C3.44476 21 3 20.5551 3 20.0066V3.9934C3 3.44476 3.44495 3 3.9934 3H13.3414C13.1203 3.62556 13 4.29873 13 5C13 8.31371 15.6863 11 19 11ZM10.6219 8.41459C10.5562 8.37078 10.479 8.34741 10.4 8.34741C10.1791 8.34741 10 8.52649 10 8.74741V15.2526C10 15.3316 10.0234 15.4088 10.0672 15.4745C10.1897 15.6583 10.4381 15.708 10.6219 15.5854L15.5008 12.3328C15.5447 12.3035 15.5824 12.2658 15.6117 12.2219C15.7343 12.0381 15.6846 11.7897 15.5008 11.6672L10.6219 8.41459Z"</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>