<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">CameraAi</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/camera_ai.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="M8.31253 4.7812L7.6885 4.36517V4.36517L8.31253 4.7812ZM7.5 6V6.75C7.75076 6.75 7.98494 6.62467 8.12404 6.41603L7.5 6ZM2.17224 8.83886L1.45453 8.62115L2.17224 8.83886ZM4.83886 6.17224L4.62115 5.45453H4.62115L4.83886 6.17224ZM3.46243 20.092L3.93822 19.5123L3.93822 19.5123L3.46243 20.092ZM2.90796 19.5376L3.48772 19.0618L3.48772 19.0618L2.90796 19.5376ZM21.092 19.5376L20.5123 19.0618L20.5123 19.0618L21.092 19.5376ZM20.5376 20.092L20.0618 19.5123L20.0618 19.5123L20.5376 20.092ZM14.0195 3.89791C14.3847 4.09336 14.8392 3.95575 15.0346 3.59054C15.2301 3.22534 15.0924 2.77084 14.7272 2.57539L14.0195 3.89791ZM22.5455 8.62115C22.4252 8.22477 22.0064 8.00092 21.61 8.12116C21.2137 8.2414 20.9898 8.6602 21.1101 9.05658L22.5455 8.62115ZM21.25 11.5V13.5H22.75V11.5H21.25ZM14.5 20.25H9.5V21.75H14.5V20.25ZM2.75 13.5V11.5H1.25V13.5H2.75ZM12.3593 2.25H11.6407V3.75H12.3593V2.25ZM7.6885 4.36517L6.87596 5.58397L8.12404 6.41603L8.93657 5.19722L7.6885 4.36517ZM11.6407 2.25C11.1305 2.25 10.6969 2.24925 10.3369 2.28282C9.96142 2.31783 9.61234 2.39366 9.27276 2.57539L9.98055 3.89791C10.0831 3.84299 10.2171 3.80049 10.4762 3.77634C10.7506 3.75075 11.1031 3.75 11.6407 3.75V2.25ZM8.93657 5.19722C9.23482 4.74985 9.43093 4.45704 9.60448 4.24286C9.76825 4.04074 9.87794 3.95282 9.98055 3.89791L9.27276 2.57539C8.93318 2.75713 8.67645 3.00553 8.43904 3.29853C8.2114 3.57947 7.97154 3.94062 7.6885 4.36517L8.93657 5.19722ZM2.75 11.5C2.75 10.0499 2.75814 9.49107 2.88994 9.05657L1.45453 8.62115C1.24186 9.32224 1.25 10.159 1.25 11.5H2.75ZM7.5 5.25C6.159 5.25 5.32224 5.24186 4.62115 5.45453L5.05657 6.88994C5.49107 6.75814 6.04987 6.75 7.5 6.75V5.25ZM2.88994 9.05657C3.20503 8.01787 4.01787 7.20503 5.05657 6.88994L4.62115 5.45453C3.10304 5.91505 1.91505 7.10304 1.45453 8.62115L2.88994 9.05657ZM9.5 20.25C7.83789 20.25 6.65724 20.2488 5.75133 20.1417C4.86197 20.0366 4.33563 19.8384 3.93822 19.5123L2.98663 20.6718C3.69558 21.2536 4.54428 21.5095 5.57525 21.6313C6.58966 21.7512 7.87463 21.75 9.5 21.75V20.25ZM1.25 13.5C1.25 15.1254 1.24877 16.4103 1.36868 17.4248C1.49054 18.4557 1.74638 19.3044 2.3282 20.0134L3.48772 19.0618C3.16158 18.6644 2.96343 18.138 2.85831 17.2487C2.75123 16.3428 2.75 15.1621 2.75 13.5H1.25ZM3.93822 19.5123C3.77366 19.3772 3.62277 19.2263 3.48772 19.0618L2.3282 20.0134C2.52558 20.2539 2.74612 20.4744 2.98663 20.6718L3.93822 19.5123ZM21.25 13.5C21.25 15.1621 21.2488 16.3428 21.1417 17.2487C21.0366 18.138 20.8384 18.6644 20.5123 19.0618L21.6718 20.0134C22.2536 19.3044 22.5095 18.4557 22.6313 17.4248C22.7512 16.4103 22.75 15.1254 22.75 13.5H21.25ZM14.5 21.75C16.1254 21.75 17.4103 21.7512 18.4248 21.6313C19.4557 21.5095 20.3044 21.2536 21.0134 20.6718L20.0618 19.5123C19.6644 19.8384 19.138 20.0366 18.2487 20.1417C17.3428 20.2488 16.1621 20.25 14.5 20.25V21.75ZM20.5123 19.0618C20.3772 19.2263 20.2263 19.3772 20.0618 19.5123L21.0134 20.6718C21.2539 20.4744 21.4744 20.2539 21.6718 20.0134L20.5123 19.0618ZM12.3593 3.75C12.8969 3.75 13.2494 3.75075 13.5238 3.77634C13.7829 3.80049 13.9169 3.84299 14.0195 3.89791L14.7272 2.57539C14.3877 2.39366 14.0386 2.31783 13.6631 2.28282C13.3031 2.24925 12.8695 2.25 12.3593 2.25V3.75ZM22.75 11.5C22.75 10.159 22.7581 9.32224 22.5455 8.62115L21.1101 9.05658C21.2419 9.49107 21.25 10.0499 21.25 11.5H22.75Z" fill="#141B34"></path><path d="M16 13C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13Z" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M17.9737 3.02148C17.9795 2.99284 18.0205 2.99284 18.0263 3.02148C18.3302 4.50808 19.4919 5.66984 20.9785 5.97368C21.0072 5.97954 21.0072 6.02046 20.9785 6.02632C19.4919 6.33016 18.3302 7.49192 18.0263 8.97852C18.0205 9.00716 17.9795 9.00716 17.9737 8.97852C17.6698 7.49192 16.5081 6.33016 15.0215 6.02632C14.9928 6.02046 14.9928 5.97954 15.0215 5.97368C16.5081 5.66984 17.6698 4.50808 17.9737 3.02148Z" stroke="#141B34" stroke-width="1.5" stroke-linecap="round" 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">CameraAi</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">CameraAi</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">'M8.31253 4.7812L7.6885 4.36517V4.36517L8.31253 4.7812ZM7.5 6V6.75C7.75076 6.75 7.98494 6.62467 8.12404 6.41603L7.5 6ZM2.17224 8.83886L1.45453 8.62115L2.17224 8.83886ZM4.83886 6.17224L4.62115 5.45453H4.62115L4.83886 6.17224ZM3.46243 20.092L3.93822 19.5123L3.93822 19.5123L3.46243 20.092ZM2.90796 19.5376L3.48772 19.0618L3.48772 19.0618L2.90796 19.5376ZM21.092 19.5376L20.5123 19.0618L20.5123 19.0618L21.092 19.5376ZM20.5376 20.092L20.0618 19.5123L20.0618 19.5123L20.5376 20.092ZM14.0195 3.89791C14.3847 4.09336 14.8392 3.95575 15.0346 3.59054C15.2301 3.22534 15.0924 2.77084 14.7272 2.57539L14.0195 3.89791ZM22.5455 8.62115C22.4252 8.22477 22.0064 8.00092 21.61 8.12116C21.2137 8.2414 20.9898 8.6602 21.1101 9.05658L22.5455 8.62115ZM21.25 11.5V13.5H22.75V11.5H21.25ZM14.5 20.25H9.5V21.75H14.5V20.25ZM2.75 13.5V11.5H1.25V13.5H2.75ZM12.3593 2.25H11.6407V3.75H12.3593V2.25ZM7.6885 4.36517L6.87596 5.58397L8.12404 6.41603L8.93657 5.19722L7.6885 4.36517ZM11.6407 2.25C11.1305 2.25 10.6969 2.24925 10.3369 2.28282C9.96142 2.31783 9.61234 2.39366 9.27276 2.57539L9.98055 3.89791C10.0831 3.84299 10.2171 3.80049 10.4762 3.77634C10.7506 3.75075 11.1031 3.75 11.6407 3.75V2.25ZM8.93657 5.19722C9.23482 4.74985 9.43093 4.45704 9.60448 4.24286C9.76825 4.04074 9.87794 3.95282 9.98055 3.89791L9.27276 2.57539C8.93318 2.75713 8.67645 3.00553 8.43904 3.29853C8.2114 3.57947 7.97154 3.94062 7.6885 4.36517L8.93657 5.19722ZM2.75 11.5C2.75 10.0499 2.75814 9.49107 2.88994 9.05657L1.45453 8.62115C1.24186 9.32224 1.25 10.159 1.25 11.5H2.75ZM7.5 5.25C6.159 5.25 5.32224 5.24186 4.62115 5.45453L5.05657 6.88994C5.49107 6.75814 6.04987 6.75 7.5 6.75V5.25ZM2.88994 9.05657C3.20503 8.01787 4.01787 7.20503 5.05657 6.88994L4.62115 5.45453C3.10304 5.91505 1.91505 7.10304 1.45453 8.62115L2.88994 9.05657ZM9.5 20.25C7.83789 20.25 6.65724 20.2488 5.75133 20.1417C4.86197 20.0366 4.33563 19.8384 3.93822 19.5123L2.98663 20.6718C3.69558 21.2536 4.54428 21.5095 5.57525 21.6313C6.58966 21.7512 7.87463 21.75 9.5 21.75V20.25ZM1.25 13.5C1.25 15.1254 1.24877 16.4103 1.36868 17.4248C1.49054 18.4557 1.74638 19.3044 2.3282 20.0134L3.48772 19.0618C3.16158 18.6644 2.96343 18.138 2.85831 17.2487C2.75123 16.3428 2.75 15.1621 2.75 13.5H1.25ZM3.93822 19.5123C3.77366 19.3772 3.62277 19.2263 3.48772 19.0618L2.3282 20.0134C2.52558 20.2539 2.74612 20.4744 2.98663 20.6718L3.93822 19.5123ZM21.25 13.5C21.25 15.1621 21.2488 16.3428 21.1417 17.2487C21.0366 18.138 20.8384 18.6644 20.5123 19.0618L21.6718 20.0134C22.2536 19.3044 22.5095 18.4557 22.6313 17.4248C22.7512 16.4103 22.75 15.1254 22.75 13.5H21.25ZM14.5 21.75C16.1254 21.75 17.4103 21.7512 18.4248 21.6313C19.4557 21.5095 20.3044 21.2536 21.0134 20.6718L20.0618 19.5123C19.6644 19.8384 19.138 20.0366 18.2487 20.1417C17.3428 20.2488 16.1621 20.25 14.5 20.25V21.75ZM20.5123 19.0618C20.3772 19.2263 20.2263 19.3772 20.0618 19.5123L21.0134 20.6718C21.2539 20.4744 21.4744 20.2539 21.6718 20.0134L20.5123 19.0618ZM12.3593 3.75C12.8969 3.75 13.2494 3.75075 13.5238 3.77634C13.7829 3.80049 13.9169 3.84299 14.0195 3.89791L14.7272 2.57539C14.3877 2.39366 14.0386 2.31783 13.6631 2.28282C13.3031 2.24925 12.8695 2.25 12.3593 2.25V3.75ZM22.75 11.5C22.75 10.159 22.7581 9.32224 22.5455 8.62115L21.1101 9.05658C21.2419 9.49107 21.25 10.0499 21.25 11.5H22.75Z'</span><span class="p">,</span>
			<span class="ss">fill: </span><span class="s1">'#141B34'</span>
		<span class="p">)</span>
		<span class="n">s</span><span class="p">.</span><span class="nf">path</span><span class="p">(</span>
			<span class="ss">d:
				</span><span class="s1">'M16 13C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13Z'</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">'M17.9737 3.02148C17.9795 2.99284 18.0205 2.99284 18.0263 3.02148C18.3302 4.50808 19.4919 5.66984 20.9785 5.97368C21.0072 5.97954 21.0072 6.02046 20.9785 6.02632C19.4919 6.33016 18.3302 7.49192 18.0263 8.97852C18.0205 9.00716 17.9795 9.00716 17.9737 8.97852C17.6698 7.49192 16.5081 6.33016 15.0215 6.02632C14.9928 6.02046 14.9928 5.97954 15.0215 5.97368C16.5081 5.66984 17.6698 4.50808 17.9737 3.02148Z'</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="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">"M8.31253 4.7812L7.6885 4.36517V4.36517L8.31253 4.7812ZM7.5 6V6.75C7.75076 6.75 7.98494 6.62467 8.12404 6.41603L7.5 6ZM2.17224 8.83886L1.45453 8.62115L2.17224 8.83886ZM4.83886 6.17224L4.62115 5.45453H4.62115L4.83886 6.17224ZM3.46243 20.092L3.93822 19.5123L3.93822 19.5123L3.46243 20.092ZM2.90796 19.5376L3.48772 19.0618L3.48772 19.0618L2.90796 19.5376ZM21.092 19.5376L20.5123 19.0618L20.5123 19.0618L21.092 19.5376ZM20.5376 20.092L20.0618 19.5123L20.0618 19.5123L20.5376 20.092ZM14.0195 3.89791C14.3847 4.09336 14.8392 3.95575 15.0346 3.59054C15.2301 3.22534 15.0924 2.77084 14.7272 2.57539L14.0195 3.89791ZM22.5455 8.62115C22.4252 8.22477 22.0064 8.00092 21.61 8.12116C21.2137 8.2414 20.9898 8.6602 21.1101 9.05658L22.5455 8.62115ZM21.25 11.5V13.5H22.75V11.5H21.25ZM14.5 20.25H9.5V21.75H14.5V20.25ZM2.75 13.5V11.5H1.25V13.5H2.75ZM12.3593 2.25H11.6407V3.75H12.3593V2.25ZM7.6885 4.36517L6.87596 5.58397L8.12404 6.41603L8.93657 5.19722L7.6885 4.36517ZM11.6407 2.25C11.1305 2.25 10.6969 2.24925 10.3369 2.28282C9.96142 2.31783 9.61234 2.39366 9.27276 2.57539L9.98055 3.89791C10.0831 3.84299 10.2171 3.80049 10.4762 3.77634C10.7506 3.75075 11.1031 3.75 11.6407 3.75V2.25ZM8.93657 5.19722C9.23482 4.74985 9.43093 4.45704 9.60448 4.24286C9.76825 4.04074 9.87794 3.95282 9.98055 3.89791L9.27276 2.57539C8.93318 2.75713 8.67645 3.00553 8.43904 3.29853C8.2114 3.57947 7.97154 3.94062 7.6885 4.36517L8.93657 5.19722ZM2.75 11.5C2.75 10.0499 2.75814 9.49107 2.88994 9.05657L1.45453 8.62115C1.24186 9.32224 1.25 10.159 1.25 11.5H2.75ZM7.5 5.25C6.159 5.25 5.32224 5.24186 4.62115 5.45453L5.05657 6.88994C5.49107 6.75814 6.04987 6.75 7.5 6.75V5.25ZM2.88994 9.05657C3.20503 8.01787 4.01787 7.20503 5.05657 6.88994L4.62115 5.45453C3.10304 5.91505 1.91505 7.10304 1.45453 8.62115L2.88994 9.05657ZM9.5 20.25C7.83789 20.25 6.65724 20.2488 5.75133 20.1417C4.86197 20.0366 4.33563 19.8384 3.93822 19.5123L2.98663 20.6718C3.69558 21.2536 4.54428 21.5095 5.57525 21.6313C6.58966 21.7512 7.87463 21.75 9.5 21.75V20.25ZM1.25 13.5C1.25 15.1254 1.24877 16.4103 1.36868 17.4248C1.49054 18.4557 1.74638 19.3044 2.3282 20.0134L3.48772 19.0618C3.16158 18.6644 2.96343 18.138 2.85831 17.2487C2.75123 16.3428 2.75 15.1621 2.75 13.5H1.25ZM3.93822 19.5123C3.77366 19.3772 3.62277 19.2263 3.48772 19.0618L2.3282 20.0134C2.52558 20.2539 2.74612 20.4744 2.98663 20.6718L3.93822 19.5123ZM21.25 13.5C21.25 15.1621 21.2488 16.3428 21.1417 17.2487C21.0366 18.138 20.8384 18.6644 20.5123 19.0618L21.6718 20.0134C22.2536 19.3044 22.5095 18.4557 22.6313 17.4248C22.7512 16.4103 22.75 15.1254 22.75 13.5H21.25ZM14.5 21.75C16.1254 21.75 17.4103 21.7512 18.4248 21.6313C19.4557 21.5095 20.3044 21.2536 21.0134 20.6718L20.0618 19.5123C19.6644 19.8384 19.138 20.0366 18.2487 20.1417C17.3428 20.2488 16.1621 20.25 14.5 20.25V21.75ZM20.5123 19.0618C20.3772 19.2263 20.2263 19.3772 20.0618 19.5123L21.0134 20.6718C21.2539 20.4744 21.4744 20.2539 21.6718 20.0134L20.5123 19.0618ZM12.3593 3.75C12.8969 3.75 13.2494 3.75075 13.5238 3.77634C13.7829 3.80049 13.9169 3.84299 14.0195 3.89791L14.7272 2.57539C14.3877 2.39366 14.0386 2.31783 13.6631 2.28282C13.3031 2.24925 12.8695 2.25 12.3593 2.25V3.75ZM22.75 11.5C22.75 10.159 22.7581 9.32224 22.5455 8.62115L21.1101 9.05658C21.2419 9.49107 21.25 10.0499 21.25 11.5H22.75Z"</span> <span class="na">fill=</span><span class="s">"#141B34"</span><span class="nt">&gt;&lt;/path&gt;</span>
	<span class="nt">&lt;path</span> <span class="na">d=</span><span class="s">"M16 13C16 15.2091 14.2091 17 12 17C9.79086 17 8 15.2091 8 13C8 10.7909 9.79086 9 12 9C14.2091 9 16 10.7909 16 13Z"</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">"M17.9737 3.02148C17.9795 2.99284 18.0205 2.99284 18.0263 3.02148C18.3302 4.50808 19.4919 5.66984 20.9785 5.97368C21.0072 5.97954 21.0072 6.02046 20.9785 6.02632C19.4919 6.33016 18.3302 7.49192 18.0263 8.97852C18.0205 9.00716 17.9795 9.00716 17.9737 8.97852C17.6698 7.49192 16.5081 6.33016 15.0215 6.02632C14.9928 6.02046 14.9928 5.97954 15.0215 5.97368C16.5081 5.66984 17.6698 4.50808 17.9737 3.02148Z"</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;/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>