diff --git a/README.md b/README.md
index 66ee9d8..8b71405 100644
--- a/README.md
+++ b/README.md
@@ -51,7 +51,7 @@ Add `corex` to your `mix.exs` dependencies:
 ```elixir
 def deps do
   [
-    {:corex, "~> 0.1.0-alpha.26"}
+    {:corex, "~> 0.1.0-alpha.27"}
   ]
 end
 ```
diff --git a/design/components/clipboard.css b/design/components/clipboard.css
index eba8c2f..0407fb4 100644
--- a/design/components/clipboard.css
+++ b/design/components/clipboard.css
@@ -61,3 +61,29 @@
     display: inline-block !important;
   }
 }
+
+@utility clipboard--* {
+  [data-scope="clipboard"][data-part="root"] {
+    max-width: --value(--container-ui-*, [length]);
+    gap: --value(--spacing-ui-gap-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="control"] {
+    gap: --value(--spacing-ui-gap-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="trigger"] {
+    font-size: --value(--text-ui-*, [length]);
+    line-height: --value(--text-ui-* --line-height, [length]);
+    min-height: --value(--spacing-ui-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="label"] {
+    font-size: --value(--text-ui-*, [length]);
+    line-height: --value(--text-ui-* --line-height, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="input"] {
+    max-width: --value(--container-ui-*, [length]);
+  }
+}
diff --git a/design/components/code.css b/design/components/code.css
new file mode 100644
index 0000000..f6dec12
--- /dev/null
+++ b/design/components/code.css
@@ -0,0 +1,126 @@
+@import "../main.css";
+
+@layer components {
+  .code[data-scope="code"][data-part="root"] {
+    @apply ui-root;
+  }
+
+  .code [data-scope="code"][data-part="content"] .highlight {
+    @apply ui-content scrollbar scrollbar--sm;
+    font-family: var(--font-code);
+    font-size: var(--text-ui-sm);
+    line-height: var(--text-ui-sm--line-height);
+    padding: var(--spacing-ui-padding);
+    background-color: var(--color-ui);
+    color: var(--color-ui--text);
+    border: 1px solid var(--color-ui--border);
+    overflow: auto;
+    background-image: linear-gradient(
+      var(--color-root) 50%,
+      var(--color-layer) 50%
+    );
+    background-size: 100% calc(var(--text-ui) * var(--text-ui--line-height));
+    background-origin: content-box;
+    background-attachment: local;
+    background-position: 0 calc(var(--spacing-ui-padding) / 2);;
+    
+
+    & code {
+      width: fit-content;
+      padding-inline-end: var(--spacing-ui);
+    }
+  }
+
+
+  .code .highlight .unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+
+  [data-mode="light"] .code .highlight .hll { background-color: #fff9c4; }
+  [data-mode="light"] .code .highlight .bp { color: #0070c1; }
+  [data-mode="light"] .code .highlight .c, [data-mode="light"] .code .highlight .c1, [data-mode="light"] .code .highlight .ch, [data-mode="light"] .code .highlight .cm, [data-mode="light"] .code .highlight .cs { color: #008000; font-style: italic; }
+  [data-mode="light"] .code .highlight .cp, [data-mode="light"] .code .highlight .cpf { color: #0000ff; font-style: normal; }
+  [data-mode="light"] .code .highlight .dl { color: #a31515; }
+  [data-mode="light"] .code .highlight .err { border-color: #cd3131; color: #cd3131; }
+  [data-mode="light"] .code .highlight .fm { color: #795e26; }
+  [data-mode="light"] .code .highlight .gd { color: #a31515; }
+  [data-mode="light"] .code .highlight .ge { font-style: italic; }
+  [data-mode="light"] .code .highlight .gh { color: #000080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .gi { color: #098658; }
+  [data-mode="light"] .code .highlight .go { color: #6e7681; }
+  [data-mode="light"] .code .highlight .gp { color: #000080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .gr { color: #cd3131; }
+  [data-mode="light"] .code .highlight .gs { font-weight: bold; }
+  [data-mode="light"] .code .highlight .gt { color: #0451a5; }
+  [data-mode="light"] .code .highlight .gu { color: #800080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .il { color: #098658; }
+  [data-mode="light"] .code .highlight .k, [data-mode="light"] .code .highlight .kd, [data-mode="light"] .code .highlight .kr, [data-mode="light"] .code .highlight .kc, [data-mode="light"] .code .highlight .kn, [data-mode="light"] .code .highlight .kp { color: #0000ff; font-weight: bold; }
+  [data-mode="light"] .code .highlight .kt { color: #267f99; }
+  [data-mode="light"] .code .highlight .m, [data-mode="light"] .code .highlight .mb, [data-mode="light"] .code .highlight .mf, [data-mode="light"] .code .highlight .mh, [data-mode="light"] .code .highlight .mi, [data-mode="light"] .code .highlight .mo { color: #098658; }
+  [data-mode="light"] .code .highlight .na { color: #e50000; }
+  [data-mode="light"] .code .highlight .nb { color: #267f99; }
+  [data-mode="light"] .code .highlight .nc, [data-mode="light"] .code .highlight .nn { color: #267f99; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nd { color: #af00db; }
+  [data-mode="light"] .code .highlight .ne { color: #cd3131; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nf { color: #795e26; }
+  [data-mode="light"] .code .highlight .ni { color: #6e7681; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nl { color: #000000; }
+  [data-mode="light"] .code .highlight .no { color: #0070c1; }
+  [data-mode="light"] .code .highlight .nt { color: #800000; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nv, [data-mode="light"] .code .highlight .vc, [data-mode="light"] .code .highlight .vg, [data-mode="light"] .code .highlight .vi, [data-mode="light"] .code .highlight .vm { color: #001080; }
+  [data-mode="light"] .code .highlight .o { color: #000000; }
+  [data-mode="light"] .code .highlight .ow { color: #0000ff; font-weight: bold; }
+  [data-mode="light"] .code .highlight .s, [data-mode="light"] .code .highlight .s1, [data-mode="light"] .code .highlight .s2, [data-mode="light"] .code .highlight .sa, [data-mode="light"] .code .highlight .sb, [data-mode="light"] .code .highlight .sc, [data-mode="light"] .code .highlight .sh, [data-mode="light"] .code .highlight .sx { color: #a31515; }
+  [data-mode="light"] .code .highlight .sd { color: #a31515; font-style: italic; }
+  [data-mode="light"] .code .highlight .se { color: #ee0000; font-weight: bold; }
+  [data-mode="light"] .code .highlight .si { color: #811f3f; font-weight: bold; }
+  [data-mode="light"] .code .highlight .sr { color: #811f3f; }
+  [data-mode="light"] .code .highlight .ss { color: #001080; }
+
+  [data-mode="dark"] .code .highlight .hll { background-color: #264f78; }
+  [data-mode="dark"] .code .highlight .bp { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .c, [data-mode="dark"] .code .highlight .c1, [data-mode="dark"] .code .highlight .ch, [data-mode="dark"] .code .highlight .cm, [data-mode="dark"] .code .highlight .cs { color: #6a9955; font-style: italic; }
+  [data-mode="dark"] .code .highlight .cp, [data-mode="dark"] .code .highlight .cpf { color: #569cd6; font-style: normal; }
+  [data-mode="dark"] .code .highlight .dl { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .err { border-color: #f44747; color: #f44747; }
+  [data-mode="dark"] .code .highlight .fm { color: #dcdcaa; }
+  [data-mode="dark"] .code .highlight .gd { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .ge { font-style: italic; }
+  [data-mode="dark"] .code .highlight .gh { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gi { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .go { color: #808080; }
+  [data-mode="dark"] .code .highlight .gp { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gr { color: #f44747; }
+  [data-mode="dark"] .code .highlight .gs { font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gt { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .gu { color: #c586c0; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .il { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .k, [data-mode="dark"] .code .highlight .kd, [data-mode="dark"] .code .highlight .kr, [data-mode="dark"] .code .highlight .kc, [data-mode="dark"] .code .highlight .kn, [data-mode="dark"] .code .highlight .kp { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .kt { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .m, [data-mode="dark"] .code .highlight .mb, [data-mode="dark"] .code .highlight .mf, [data-mode="dark"] .code .highlight .mh, [data-mode="dark"] .code .highlight .mi, [data-mode="dark"] .code .highlight .mo { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .na { color: #9cdcfe; }
+  [data-mode="dark"] .code .highlight .nb { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .nc, [data-mode="dark"] .code .highlight .nn { color: #4ec9b0; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nd { color: #c586c0; }
+  [data-mode="dark"] .code .highlight .ne { color: #f44747; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nf { color: #dcdcaa; }
+  [data-mode="dark"] .code .highlight .ni { color: #808080; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nl { color: #c8c8c8; }
+  [data-mode="dark"] .code .highlight .no { color: #4fc1ff; }
+  [data-mode="dark"] .code .highlight .nt { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nv, [data-mode="dark"] .code .highlight .vc, [data-mode="dark"] .code .highlight .vg, [data-mode="dark"] .code .highlight .vi, [data-mode="dark"] .code .highlight .vm { color: #9cdcfe; }
+  [data-mode="dark"] .code .highlight .o { color: #d4d4d4; }
+  [data-mode="dark"] .code .highlight .ow { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .s, [data-mode="dark"] .code .highlight .s1, [data-mode="dark"] .code .highlight .s2, [data-mode="dark"] .code .highlight .sa, [data-mode="dark"] .code .highlight .sb, [data-mode="dark"] .code .highlight .sc, [data-mode="dark"] .code .highlight .sh, [data-mode="dark"] .code .highlight .sx { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .sd { color: #ce9178; font-style: italic; }
+  [data-mode="dark"] .code .highlight .se { color: #d7ba7d; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .si { color: #d7ba7d; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .sr { color: #d16969; }
+  [data-mode="dark"] .code .highlight .ss { color: #9cdcfe; }
+}
diff --git a/design/components/typo.css b/design/components/typo.css
index 2729c4b..6825f93 100644
--- a/design/components/typo.css
+++ b/design/components/typo.css
@@ -286,16 +286,4 @@
     gap: var(--spacing-ui-gap-lg);
   }
 
-  .typo pre {
-    @apply scrollbar scrollbar--sm;
-
-    font-family: var(--font-code);
-    font-size: var(--text-ui-sm);
-    line-height: var(--text-ui-sm--line-height);
-    padding: var(--spacing-ui-padding-sm);
-    background-color: var(--color-ui);
-    color: var(--color-ui--text);
-    border: 1px solid var(--color-ui--border);
-    overflow: auto;
-  }
 }
diff --git a/e2e/assets/corex/components/clipboard.css b/e2e/assets/corex/components/clipboard.css
index eba8c2f..0407fb4 100644
--- a/e2e/assets/corex/components/clipboard.css
+++ b/e2e/assets/corex/components/clipboard.css
@@ -61,3 +61,29 @@
     display: inline-block !important;
   }
 }
+
+@utility clipboard--* {
+  [data-scope="clipboard"][data-part="root"] {
+    max-width: --value(--container-ui-*, [length]);
+    gap: --value(--spacing-ui-gap-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="control"] {
+    gap: --value(--spacing-ui-gap-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="trigger"] {
+    font-size: --value(--text-ui-*, [length]);
+    line-height: --value(--text-ui-* --line-height, [length]);
+    min-height: --value(--spacing-ui-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="label"] {
+    font-size: --value(--text-ui-*, [length]);
+    line-height: --value(--text-ui-* --line-height, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="input"] {
+    max-width: --value(--container-ui-*, [length]);
+  }
+}
diff --git a/e2e/assets/corex/components/code.css b/e2e/assets/corex/components/code.css
new file mode 100644
index 0000000..f6dec12
--- /dev/null
+++ b/e2e/assets/corex/components/code.css
@@ -0,0 +1,126 @@
+@import "../main.css";
+
+@layer components {
+  .code[data-scope="code"][data-part="root"] {
+    @apply ui-root;
+  }
+
+  .code [data-scope="code"][data-part="content"] .highlight {
+    @apply ui-content scrollbar scrollbar--sm;
+    font-family: var(--font-code);
+    font-size: var(--text-ui-sm);
+    line-height: var(--text-ui-sm--line-height);
+    padding: var(--spacing-ui-padding);
+    background-color: var(--color-ui);
+    color: var(--color-ui--text);
+    border: 1px solid var(--color-ui--border);
+    overflow: auto;
+    background-image: linear-gradient(
+      var(--color-root) 50%,
+      var(--color-layer) 50%
+    );
+    background-size: 100% calc(var(--text-ui) * var(--text-ui--line-height));
+    background-origin: content-box;
+    background-attachment: local;
+    background-position: 0 calc(var(--spacing-ui-padding) / 2);;
+    
+
+    & code {
+      width: fit-content;
+      padding-inline-end: var(--spacing-ui);
+    }
+  }
+
+
+  .code .highlight .unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+
+  [data-mode="light"] .code .highlight .hll { background-color: #fff9c4; }
+  [data-mode="light"] .code .highlight .bp { color: #0070c1; }
+  [data-mode="light"] .code .highlight .c, [data-mode="light"] .code .highlight .c1, [data-mode="light"] .code .highlight .ch, [data-mode="light"] .code .highlight .cm, [data-mode="light"] .code .highlight .cs { color: #008000; font-style: italic; }
+  [data-mode="light"] .code .highlight .cp, [data-mode="light"] .code .highlight .cpf { color: #0000ff; font-style: normal; }
+  [data-mode="light"] .code .highlight .dl { color: #a31515; }
+  [data-mode="light"] .code .highlight .err { border-color: #cd3131; color: #cd3131; }
+  [data-mode="light"] .code .highlight .fm { color: #795e26; }
+  [data-mode="light"] .code .highlight .gd { color: #a31515; }
+  [data-mode="light"] .code .highlight .ge { font-style: italic; }
+  [data-mode="light"] .code .highlight .gh { color: #000080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .gi { color: #098658; }
+  [data-mode="light"] .code .highlight .go { color: #6e7681; }
+  [data-mode="light"] .code .highlight .gp { color: #000080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .gr { color: #cd3131; }
+  [data-mode="light"] .code .highlight .gs { font-weight: bold; }
+  [data-mode="light"] .code .highlight .gt { color: #0451a5; }
+  [data-mode="light"] .code .highlight .gu { color: #800080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .il { color: #098658; }
+  [data-mode="light"] .code .highlight .k, [data-mode="light"] .code .highlight .kd, [data-mode="light"] .code .highlight .kr, [data-mode="light"] .code .highlight .kc, [data-mode="light"] .code .highlight .kn, [data-mode="light"] .code .highlight .kp { color: #0000ff; font-weight: bold; }
+  [data-mode="light"] .code .highlight .kt { color: #267f99; }
+  [data-mode="light"] .code .highlight .m, [data-mode="light"] .code .highlight .mb, [data-mode="light"] .code .highlight .mf, [data-mode="light"] .code .highlight .mh, [data-mode="light"] .code .highlight .mi, [data-mode="light"] .code .highlight .mo { color: #098658; }
+  [data-mode="light"] .code .highlight .na { color: #e50000; }
+  [data-mode="light"] .code .highlight .nb { color: #267f99; }
+  [data-mode="light"] .code .highlight .nc, [data-mode="light"] .code .highlight .nn { color: #267f99; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nd { color: #af00db; }
+  [data-mode="light"] .code .highlight .ne { color: #cd3131; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nf { color: #795e26; }
+  [data-mode="light"] .code .highlight .ni { color: #6e7681; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nl { color: #000000; }
+  [data-mode="light"] .code .highlight .no { color: #0070c1; }
+  [data-mode="light"] .code .highlight .nt { color: #800000; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nv, [data-mode="light"] .code .highlight .vc, [data-mode="light"] .code .highlight .vg, [data-mode="light"] .code .highlight .vi, [data-mode="light"] .code .highlight .vm { color: #001080; }
+  [data-mode="light"] .code .highlight .o { color: #000000; }
+  [data-mode="light"] .code .highlight .ow { color: #0000ff; font-weight: bold; }
+  [data-mode="light"] .code .highlight .s, [data-mode="light"] .code .highlight .s1, [data-mode="light"] .code .highlight .s2, [data-mode="light"] .code .highlight .sa, [data-mode="light"] .code .highlight .sb, [data-mode="light"] .code .highlight .sc, [data-mode="light"] .code .highlight .sh, [data-mode="light"] .code .highlight .sx { color: #a31515; }
+  [data-mode="light"] .code .highlight .sd { color: #a31515; font-style: italic; }
+  [data-mode="light"] .code .highlight .se { color: #ee0000; font-weight: bold; }
+  [data-mode="light"] .code .highlight .si { color: #811f3f; font-weight: bold; }
+  [data-mode="light"] .code .highlight .sr { color: #811f3f; }
+  [data-mode="light"] .code .highlight .ss { color: #001080; }
+
+  [data-mode="dark"] .code .highlight .hll { background-color: #264f78; }
+  [data-mode="dark"] .code .highlight .bp { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .c, [data-mode="dark"] .code .highlight .c1, [data-mode="dark"] .code .highlight .ch, [data-mode="dark"] .code .highlight .cm, [data-mode="dark"] .code .highlight .cs { color: #6a9955; font-style: italic; }
+  [data-mode="dark"] .code .highlight .cp, [data-mode="dark"] .code .highlight .cpf { color: #569cd6; font-style: normal; }
+  [data-mode="dark"] .code .highlight .dl { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .err { border-color: #f44747; color: #f44747; }
+  [data-mode="dark"] .code .highlight .fm { color: #dcdcaa; }
+  [data-mode="dark"] .code .highlight .gd { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .ge { font-style: italic; }
+  [data-mode="dark"] .code .highlight .gh { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gi { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .go { color: #808080; }
+  [data-mode="dark"] .code .highlight .gp { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gr { color: #f44747; }
+  [data-mode="dark"] .code .highlight .gs { font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gt { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .gu { color: #c586c0; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .il { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .k, [data-mode="dark"] .code .highlight .kd, [data-mode="dark"] .code .highlight .kr, [data-mode="dark"] .code .highlight .kc, [data-mode="dark"] .code .highlight .kn, [data-mode="dark"] .code .highlight .kp { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .kt { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .m, [data-mode="dark"] .code .highlight .mb, [data-mode="dark"] .code .highlight .mf, [data-mode="dark"] .code .highlight .mh, [data-mode="dark"] .code .highlight .mi, [data-mode="dark"] .code .highlight .mo { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .na { color: #9cdcfe; }
+  [data-mode="dark"] .code .highlight .nb { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .nc, [data-mode="dark"] .code .highlight .nn { color: #4ec9b0; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nd { color: #c586c0; }
+  [data-mode="dark"] .code .highlight .ne { color: #f44747; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nf { color: #dcdcaa; }
+  [data-mode="dark"] .code .highlight .ni { color: #808080; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nl { color: #c8c8c8; }
+  [data-mode="dark"] .code .highlight .no { color: #4fc1ff; }
+  [data-mode="dark"] .code .highlight .nt { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nv, [data-mode="dark"] .code .highlight .vc, [data-mode="dark"] .code .highlight .vg, [data-mode="dark"] .code .highlight .vi, [data-mode="dark"] .code .highlight .vm { color: #9cdcfe; }
+  [data-mode="dark"] .code .highlight .o { color: #d4d4d4; }
+  [data-mode="dark"] .code .highlight .ow { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .s, [data-mode="dark"] .code .highlight .s1, [data-mode="dark"] .code .highlight .s2, [data-mode="dark"] .code .highlight .sa, [data-mode="dark"] .code .highlight .sb, [data-mode="dark"] .code .highlight .sc, [data-mode="dark"] .code .highlight .sh, [data-mode="dark"] .code .highlight .sx { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .sd { color: #ce9178; font-style: italic; }
+  [data-mode="dark"] .code .highlight .se { color: #d7ba7d; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .si { color: #d7ba7d; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .sr { color: #d16969; }
+  [data-mode="dark"] .code .highlight .ss { color: #9cdcfe; }
+}
diff --git a/e2e/assets/corex/components/typo.css b/e2e/assets/corex/components/typo.css
index 2729c4b..947ee9d 100644
--- a/e2e/assets/corex/components/typo.css
+++ b/e2e/assets/corex/components/typo.css
@@ -285,17 +285,4 @@
     flex-direction: column;
     gap: var(--spacing-ui-gap-lg);
   }
-
-  .typo pre {
-    @apply scrollbar scrollbar--sm;
-
-    font-family: var(--font-code);
-    font-size: var(--text-ui-sm);
-    line-height: var(--text-ui-sm--line-height);
-    padding: var(--spacing-ui-padding-sm);
-    background-color: var(--color-ui);
-    color: var(--color-ui--text);
-    border: 1px solid var(--color-ui--border);
-    overflow: auto;
-  }
 }
diff --git a/e2e/assets/css/app.css b/e2e/assets/css/app.css
index 518c01b..b96ffff 100644
--- a/e2e/assets/css/app.css
+++ b/e2e/assets/css/app.css
@@ -10,6 +10,12 @@
 @import "../corex/main.css";
 @import "../corex/tokens/themes/neo/light.css";
 @import "../corex/tokens/themes/neo/dark.css";
+@import "../corex/tokens/themes/uno/light.css";
+@import "../corex/tokens/themes/uno/dark.css";
+@import "../corex/tokens/themes/duo/light.css";
+@import "../corex/tokens/themes/duo/dark.css";
+@import "../corex/tokens/themes/leo/light.css";
+@import "../corex/tokens/themes/leo/dark.css";
 @import "../corex/components/typo.css";
 @import "../corex/components/accordion.css";
 @import "../corex/components/layout.css";
@@ -43,6 +49,7 @@
 @import "../corex/components/pin-input.css";
 @import "../corex/components/radio-group.css";
 @import "../corex/components/timer.css";
+@import "../corex/components/code.css";
 
 @import "./navigation.css";
 
@@ -50,7 +57,10 @@
 
 #locale-select.select,
 #locale-select.select [data-scope="select"][data-part="root"],
-#locale-select.select [data-scope="select"][data-part="trigger"] {
+#locale-select.select [data-scope="select"][data-part="trigger"],
+#theme-select.select,
+#theme-select.select [data-scope="select"][data-part="root"],
+#theme-select.select [data-scope="select"][data-part="trigger"] {
     width: auto;
 }
 
diff --git a/e2e/assets/css/code_highlight.css b/e2e/assets/css/code_highlight.css
new file mode 100644
index 0000000..24b6479
--- /dev/null
+++ b/e2e/assets/css/code_highlight.css
@@ -0,0 +1,77 @@
+.highlight .hll {background-color: #ffffcc}
+.highlight {background-color: #f8f8f8}.highlight .unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.highlight .bp {color: #008000; } /* :name_builtin_pseudo */
+.highlight .c {color: #408080; font-style: italic; } /* :comment */
+.highlight .c1 {color: #408080; font-style: italic; } /* :comment_single */
+.highlight .ch {color: #408080; font-style: italic; } /* :comment_hashbang */
+.highlight .cm {color: #408080; font-style: italic; } /* :comment_multiline */
+.highlight .cp {color: #BC7A00; font-style: normal; } /* :comment_preproc */
+.highlight .cpf {color: #BC7A00; font-style: normal; } /* :comment_preproc_file */
+.highlight .cs {color: #408080; font-style: italic; } /* :comment_special */
+.highlight .dl {color: #BA2121; } /* :string_delimiter */
+.highlight .err {border: #FF0000; } /* :error */
+.highlight .fm {color: #0000FF; } /* :name_function_magic */
+.highlight .gd {color: #A00000; } /* :generic_deleted */
+.highlight .ge {font-style: italic; } /* :generic_emph */
+.highlight .gh {color: #000080; font-weight: bold; } /* :generic_heading */
+.highlight .gi {color: #00A000; } /* :generic_inserted */
+.highlight .go {color: #888; } /* :generic_output */
+.highlight .gp {color: #000080; font-weight: bold; } /* :generic_prompt */
+.highlight .gr {color: #FF0000; } /* :generic_error */
+.highlight .gs {font-weight: bold; } /* :generic_strong */
+.highlight .gt {color: #04D; } /* :generic_traceback */
+.highlight .gu {color: #800080; font-weight: bold; } /* :generic_subheading */
+.highlight .il {color: #666666; } /* :number_integer_long */
+.highlight .k {color: #008000; font-weight: bold; } /* :keyword */
+.highlight .kc {color: #008000; font-weight: bold; } /* :keyword_constant */
+.highlight .kd {color: #008000; font-weight: bold; } /* :keyword_declaration */
+.highlight .kn {color: #008000; font-weight: bold; } /* :keyword_namespace */
+.highlight .kp {color: #008000; font-weight: normal; } /* :keyword_pseudo */
+.highlight .kr {color: #008000; font-weight: bold; } /* :keyword_reserved */
+.highlight .kt {color: #B00040; font-weight: normal; } /* :keyword_type */
+.highlight .m {color: #666666; } /* :number */
+.highlight .mb {color: #666666; } /* :number_bin */
+.highlight .mf {color: #666666; } /* :number_float */
+.highlight .mh {color: #666666; } /* :number_hex */
+.highlight .mi {color: #666666; } /* :number_integer */
+.highlight .mo {color: #666666; } /* :number_oct */
+.highlight .na {color: #7D9029; } /* :name_attribute */
+.highlight .nb {color: #008000; } /* :name_builtin */
+.highlight .nc {color: #0000FF; font-weight: bold; } /* :name_class */
+.highlight .nd {color: #AA22FF; } /* :name_decorator */
+.highlight .ne {color: #D2413A; font-weight: bold; } /* :name_exception */
+.highlight .nf {color: #0000FF; } /* :name_function */
+.highlight .ni {color: #999999; font-weight: bold; } /* :name_entity */
+.highlight .nl {color: #A0A000; } /* :name_label */
+.highlight .nn {color: #0000FF; font-weight: bold; } /* :name_namespace */
+.highlight .no {color: #880000; } /* :name_constant */
+.highlight .nt {color: #008000; font-weight: bold; } /* :name_tag */
+.highlight .nv {color: #19177C; } /* :name_variable */
+.highlight .o {color: #666666; } /* :operator */
+.highlight .ow {color: #AA22FF; font-weight: bold; } /* :operator_word */
+.highlight .s {color: #BA2121; } /* :string */
+.highlight .s1 {color: #BA2121; } /* :string_single */
+.highlight .s2 {color: #BA2121; } /* :string_double */
+.highlight .sa {color: #BA2121; } /* :string_affix */
+.highlight .sb {color: #BA2121; } /* :string_backtick */
+.highlight .sc {color: #BA2121; } /* :string_char */
+.highlight .sd {color: #BA2121; font-style: italic; } /* :string_doc */
+.highlight .se {color: #BB6622; font-weight: bold; } /* :string_escape */
+.highlight .sh {color: #BA2121; } /* :string_heredoc */
+.highlight .si {color: #BB6688; font-weight: bold; } /* :string_interpol */
+.highlight .sr {color: #BB6688; } /* :string_regex */
+.highlight .ss {color: #19177C; } /* :string_symbol */
+.highlight .sx {color: #008000; } /* :string_other */
+.highlight .sx {color: #BA2121; } /* :string_sigil */
+.highlight .vc {color: #19177C; } /* :name_variable_class */
+.highlight .vg {color: #19177C; } /* :name_variable_global */
+.highlight .vi {color: #19177C; } /* :name_variable_instance */
+.highlight .vm {color: #19177C; } /* :name_variable_magic */
diff --git a/e2e/assets/styles/custom.css b/e2e/assets/styles/custom.css
new file mode 100644
index 0000000..24b6479
--- /dev/null
+++ b/e2e/assets/styles/custom.css
@@ -0,0 +1,77 @@
+.highlight .hll {background-color: #ffffcc}
+.highlight {background-color: #f8f8f8}.highlight .unselectable {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.highlight .bp {color: #008000; } /* :name_builtin_pseudo */
+.highlight .c {color: #408080; font-style: italic; } /* :comment */
+.highlight .c1 {color: #408080; font-style: italic; } /* :comment_single */
+.highlight .ch {color: #408080; font-style: italic; } /* :comment_hashbang */
+.highlight .cm {color: #408080; font-style: italic; } /* :comment_multiline */
+.highlight .cp {color: #BC7A00; font-style: normal; } /* :comment_preproc */
+.highlight .cpf {color: #BC7A00; font-style: normal; } /* :comment_preproc_file */
+.highlight .cs {color: #408080; font-style: italic; } /* :comment_special */
+.highlight .dl {color: #BA2121; } /* :string_delimiter */
+.highlight .err {border: #FF0000; } /* :error */
+.highlight .fm {color: #0000FF; } /* :name_function_magic */
+.highlight .gd {color: #A00000; } /* :generic_deleted */
+.highlight .ge {font-style: italic; } /* :generic_emph */
+.highlight .gh {color: #000080; font-weight: bold; } /* :generic_heading */
+.highlight .gi {color: #00A000; } /* :generic_inserted */
+.highlight .go {color: #888; } /* :generic_output */
+.highlight .gp {color: #000080; font-weight: bold; } /* :generic_prompt */
+.highlight .gr {color: #FF0000; } /* :generic_error */
+.highlight .gs {font-weight: bold; } /* :generic_strong */
+.highlight .gt {color: #04D; } /* :generic_traceback */
+.highlight .gu {color: #800080; font-weight: bold; } /* :generic_subheading */
+.highlight .il {color: #666666; } /* :number_integer_long */
+.highlight .k {color: #008000; font-weight: bold; } /* :keyword */
+.highlight .kc {color: #008000; font-weight: bold; } /* :keyword_constant */
+.highlight .kd {color: #008000; font-weight: bold; } /* :keyword_declaration */
+.highlight .kn {color: #008000; font-weight: bold; } /* :keyword_namespace */
+.highlight .kp {color: #008000; font-weight: normal; } /* :keyword_pseudo */
+.highlight .kr {color: #008000; font-weight: bold; } /* :keyword_reserved */
+.highlight .kt {color: #B00040; font-weight: normal; } /* :keyword_type */
+.highlight .m {color: #666666; } /* :number */
+.highlight .mb {color: #666666; } /* :number_bin */
+.highlight .mf {color: #666666; } /* :number_float */
+.highlight .mh {color: #666666; } /* :number_hex */
+.highlight .mi {color: #666666; } /* :number_integer */
+.highlight .mo {color: #666666; } /* :number_oct */
+.highlight .na {color: #7D9029; } /* :name_attribute */
+.highlight .nb {color: #008000; } /* :name_builtin */
+.highlight .nc {color: #0000FF; font-weight: bold; } /* :name_class */
+.highlight .nd {color: #AA22FF; } /* :name_decorator */
+.highlight .ne {color: #D2413A; font-weight: bold; } /* :name_exception */
+.highlight .nf {color: #0000FF; } /* :name_function */
+.highlight .ni {color: #999999; font-weight: bold; } /* :name_entity */
+.highlight .nl {color: #A0A000; } /* :name_label */
+.highlight .nn {color: #0000FF; font-weight: bold; } /* :name_namespace */
+.highlight .no {color: #880000; } /* :name_constant */
+.highlight .nt {color: #008000; font-weight: bold; } /* :name_tag */
+.highlight .nv {color: #19177C; } /* :name_variable */
+.highlight .o {color: #666666; } /* :operator */
+.highlight .ow {color: #AA22FF; font-weight: bold; } /* :operator_word */
+.highlight .s {color: #BA2121; } /* :string */
+.highlight .s1 {color: #BA2121; } /* :string_single */
+.highlight .s2 {color: #BA2121; } /* :string_double */
+.highlight .sa {color: #BA2121; } /* :string_affix */
+.highlight .sb {color: #BA2121; } /* :string_backtick */
+.highlight .sc {color: #BA2121; } /* :string_char */
+.highlight .sd {color: #BA2121; font-style: italic; } /* :string_doc */
+.highlight .se {color: #BB6622; font-weight: bold; } /* :string_escape */
+.highlight .sh {color: #BA2121; } /* :string_heredoc */
+.highlight .si {color: #BB6688; font-weight: bold; } /* :string_interpol */
+.highlight .sr {color: #BB6688; } /* :string_regex */
+.highlight .ss {color: #19177C; } /* :string_symbol */
+.highlight .sx {color: #008000; } /* :string_other */
+.highlight .sx {color: #BA2121; } /* :string_sigil */
+.highlight .vc {color: #19177C; } /* :name_variable_class */
+.highlight .vg {color: #19177C; } /* :name_variable_global */
+.highlight .vi {color: #19177C; } /* :name_variable_instance */
+.highlight .vm {color: #19177C; } /* :name_variable_magic */
diff --git a/e2e/lib/e2e/place/helper.ex b/e2e/lib/e2e/place/helper.ex
index e72d616..8d54fa5 100644
--- a/e2e/lib/e2e/place/helper.ex
+++ b/e2e/lib/e2e/place/helper.ex
@@ -1,7 +1,6 @@
 defmodule E2e.Place.Helper do
   @moduledoc false
-  alias E2e.Place
-
+  alias E2e.Repo
   require Logger
 
   def country_name_from_code(country_code) do
@@ -9,40 +8,64 @@ defmodule E2e.Place.Helper do
     country_name
   end
 
-  # Save from seeds
   def fetch_and_insert_cities() do
-    priv_dir = :code.priv_dir(:e2e)
-    file_path = Path.join([priv_dir, "repo", "seeds", "cities.tar.gz"])
-
-    {:ok, file} = File.open(file_path, [:read, :utf8, :compressed])
+    read_compressed("cities.tar.gz")
+    |> Jason.decode!()
+    |> Enum.chunk_every(500)
+    |> Enum.each(fn batch ->
+      entries =
+        Enum.map(batch, fn city ->
+          %{
+            id: city["id"],
+            name: city["name"],
+            iata_code: city["iata_code"],
+            iata_country_code: city["iata_country_code"],
+            # embedded airports stored as jsonb
+            airports: city["airports"] |> encode_embed()
+          }
+        end)
 
-    all_cities = IO.read(file, :eof)
+      Repo.insert_all("cities", entries, on_conflict: :nothing, conflict_target: :id)
+    end)
+  end
 
-    File.close(file)
+  def fetch_and_insert_airports() do
+    read_compressed("airports.tar.gz")
+    |> Jason.decode!()
+    |> Enum.chunk_every(500)
+    |> Enum.each(fn batch ->
+      entries =
+        Enum.map(batch, fn airport ->
+          %{
+            id: airport["id"],
+            name: airport["name"],
+            iata_code: airport["iata_code"],
+            city_name: airport["city_name"],
+            iata_city_code: airport["iata_city_code"],
+            iata_country_code: airport["iata_country_code"],
+            icao_code: airport["icao_code"],
+            latitude: airport["latitude"],
+            longitude: airport["longitude"],
+            time_zone: airport["time_zone"],
+            # embedded city stored as jsonb
+            city: airport["city"] |> encode_embed()
+          }
+        end)
 
-    for city <- Jason.decode!(all_cities) do
-      case Place.create_city(city) do
-        {:error, changeset} -> Logger.debug(changeset)
-        {:ok, _city} -> :ok
-      end
-    end
+      Repo.insert_all("airports", entries, on_conflict: :nothing, conflict_target: :id)
+    end)
   end
 
-  def fetch_and_insert_airports() do
+  defp read_compressed(filename) do
     priv_dir = :code.priv_dir(:e2e)
-    file_path = Path.join([priv_dir, "repo", "seeds", "airports.tar.gz"])
-
+    file_path = Path.join([priv_dir, "repo", "seeds", filename])
     {:ok, file} = File.open(file_path, [:read, :utf8, :compressed])
-
-    all_airports = IO.read(file, :eof)
-
+    data = IO.read(file, :eof)
     File.close(file)
-
-    for airport <- Jason.decode!(all_airports) do
-      case Place.create_airport(airport) do
-        {:error, changeset} -> Logger.debug(changeset)
-        {:ok, _airport} -> :ok
-      end
-    end
+    data
   end
+
+  defp encode_embed(nil), do: nil
+  defp encode_embed(data) when is_list(data), do: data
+  defp encode_embed(data) when is_map(data), do: data
 end
diff --git a/e2e/lib/e2e_web/code_examples.ex b/e2e/lib/e2e_web/code_examples.ex
new file mode 100644
index 0000000..42d4e0f
--- /dev/null
+++ b/e2e/lib/e2e_web/code_examples.ex
@@ -0,0 +1,21 @@
+defmodule E2eWeb.CodeExamples do
+  @code_examples_path Path.join(:code.priv_dir(:e2e), "code_examples")
+
+  def load(name) do
+    path = Path.join(@code_examples_path, name)
+
+    case File.read(path) do
+      {:ok, content} -> content
+      {:error, _} -> ""
+    end
+  end
+
+  def all do
+    %{
+      elixir: load("hello.ex"),
+      html: load("component.html"),
+      css: load("styles.css"),
+      js: load("app.js")
+    }
+  end
+end
diff --git a/e2e/lib/e2e_web/components/layouts.ex b/e2e/lib/e2e_web/components/layouts.ex
index 3350070..ba01c8c 100644
--- a/e2e/lib/e2e_web/components/layouts.ex
+++ b/e2e/lib/e2e_web/components/layouts.ex
@@ -20,7 +20,7 @@ defmodule E2eWeb.Layouts do
 
   ## Examples
 
-      <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+      <Layouts.app flash={@flash} mode={@mode} theme={@theme} locale={@locale} current_path={@current_path}>
         <h1>Content</h1>
       </Layouts.app>
 
@@ -29,6 +29,8 @@ defmodule E2eWeb.Layouts do
 
   attr :mode, :string, default: "light", doc: "the mode (dark or light) from cookie/session"
 
+  attr :theme, :string, default: "neo", doc: "the theme (neo, uno, duo, leo) from cookie/session"
+
   attr :current_scope, :map,
     default: nil,
     doc: "the current [scope](https://hexdocs.pm/phoenix/scopes.html)"
@@ -56,8 +58,8 @@ defmodule E2eWeb.Layouts do
 
     ~H"""
     <header class="layout__header">
-      <div class="layout__header__content">
-        <div class="layout__row gap-mini-gap">
+      <div class="layout__header__content px-1 sm:px-ui-padding">
+        <div class="layout__row gap-0 sm:gap-1">
           <.dialog id="menu-dialog" class="dialog dialog--side lg:hidden">
             <:trigger class="button button--sm button--circle rounded-full" aria_label="Open menu">
               <.icon name="hero-bars-3" class="icon" />
@@ -126,11 +128,12 @@ defmodule E2eWeb.Layouts do
                 fill="var(--color-layer--brand)"
               />
             </svg>
-            Corex
+            <span class="hidden md:block">Corex</span>
           </a>
         </div>
-        <div class="layout__row">
+        <div class="layout__row gap-0 sm:gap-1">
           <.locale_switcher :if={@locale} locale={@locale} current_path={@current_path} />
+          <.theme_toggle theme={@theme} />
           <.mode_toggle mode={@mode} />
         </div>
       </div>
@@ -253,6 +256,44 @@ defmodule E2eWeb.Layouts do
     """
   end
 
+  attr :theme, :string,
+    default: "neo",
+    values: ["neo", "uno", "duo", "leo"],
+    doc: "the theme from cookie/session"
+
+  @doc """
+  Provides theme selection using the select component.
+  """
+  def theme_toggle(assigns) do
+    ~H"""
+    <.select
+      id="theme-select"
+      class="select select--sm select--micro"
+      collection={[
+        %{id: "neo", label: "Neo"},
+        %{id: "uno", label: "Uno"},
+        %{id: "duo", label: "Duo"},
+        %{id: "leo", label: "Leo"}
+      ]}
+      value={[@theme]}
+      on_value_change_client="phx:set-theme"
+    >
+      <:label class="sr-only">
+        Theme
+      </:label>
+      <:item :let={item}>
+        {item.label}
+      </:item>
+      <:trigger>
+        <.icon name="hero-swatch" />
+      </:trigger>
+      <:item_indicator>
+        <.icon name="hero-check" />
+      </:item_indicator>
+    </.select>
+    """
+  end
+
   attr :mode, :string,
     default: "light",
     values: ["light", "dark"],
@@ -260,7 +301,6 @@ defmodule E2eWeb.Layouts do
 
   @doc """
   Provides dark vs light theme toggle using toggle_group.
-
   """
   def mode_toggle(assigns) do
     ~H"""
@@ -334,6 +374,14 @@ defmodule E2eWeb.Layouts do
           [label: "Async", id: "/#{locale}/async/accordion"]
         ]
       ],
+      [
+        label: "Action",
+        id: "action",
+        children: [
+          [label: "Controller", id: "/#{locale}/action"],
+          [label: "Live", id: "/#{locale}/live/action"]
+        ]
+      ],
       [
         label: "Angle Slider",
         id: "angle-slider",
@@ -376,6 +424,14 @@ defmodule E2eWeb.Layouts do
           [label: "Live", id: "/#{locale}/live/clipboard"]
         ]
       ],
+      [
+        label: "Code",
+        id: "code",
+        children: [
+          [label: "Controller", id: "/#{locale}/code"],
+          [label: "Live", id: "/#{locale}/live/code"]
+        ]
+      ],
       [
         label: "Collapsible",
         id: "collapsible",
@@ -442,6 +498,14 @@ defmodule E2eWeb.Layouts do
           [label: "Live", id: "/#{locale}/live/menu"]
         ]
       ],
+      [
+        label: "Navigate",
+        id: "navigate",
+        children: [
+          [label: "Controller", id: "/#{locale}/navigate"],
+          [label: "Live", id: "/#{locale}/live/navigate"]
+        ]
+      ],
       [
         label: "Number Input",
         id: "number-input",
diff --git a/e2e/lib/e2e_web/components/layouts/captures.html.heex b/e2e/lib/e2e_web/components/layouts/captures.html.heex
index 9cd2be5..2aa485e 100644
--- a/e2e/lib/e2e_web/components/layouts/captures.html.heex
+++ b/e2e/lib/e2e_web/components/layouts/captures.html.heex
@@ -8,7 +8,7 @@
         else: "ltr"
       )
   }
-  data-theme="neo"
+  data-theme={assigns[:theme] || "neo"}
   data-mode={assigns[:mode]}
 >
   <head>
@@ -78,6 +78,24 @@
           const mode = Array.isArray(value) && value[0] ? value[0] : "light";
           setMode(mode);
         });
+
+        const validThemes = ["neo", "uno", "duo", "leo"];
+        const setTheme = (theme) => {
+          const resolved = validThemes.includes(theme) ? theme : "neo";
+          localStorage.setItem("phx:theme", resolved);
+          document.cookie = "phx_theme=" + resolved + "; path=/; max-age=31536000";
+          document.documentElement.setAttribute("data-theme", resolved);
+        };
+
+        setTheme(localStorage.getItem("phx:theme") || document.documentElement.getAttribute("data-theme") || "neo");
+
+        window.addEventListener("storage", (e) => e.key === "phx:theme" && e.newValue && setTheme(e.newValue));
+
+        window.addEventListener("phx:set-theme", (e) => {
+          const value = e.detail?.value;
+          const theme = Array.isArray(value) && value[0] ? value[0] : "neo";
+          setTheme(theme);
+        });
       })();
     </script>
   </head>
@@ -100,6 +118,7 @@
           </a>
         </div>
         <div class="layout__row">
+          <.theme_toggle theme={assigns[:theme] || "neo"} />
           <.mode_toggle mode={@mode} />
           <div class="layout__row gap-ui-gap">
             <a
diff --git a/e2e/lib/e2e_web/components/layouts/root.html.heex b/e2e/lib/e2e_web/components/layouts/root.html.heex
index de97811..8f9f65d 100644
--- a/e2e/lib/e2e_web/components/layouts/root.html.heex
+++ b/e2e/lib/e2e_web/components/layouts/root.html.heex
@@ -8,7 +8,7 @@
         else: "ltr"
       )
   }
-  data-theme="neo"
+  data-theme={assigns[:theme] || "neo"}
   data-mode={assigns[:mode]}
 >
   <head>
@@ -78,6 +78,24 @@
           const mode = Array.isArray(value) && value[0] ? value[0] : "light";
           setMode(mode);
         });
+
+        const validThemes = ["neo", "uno", "duo", "leo"];
+        const setTheme = (theme) => {
+          const resolved = validThemes.includes(theme) ? theme : "neo";
+          localStorage.setItem("phx:theme", resolved);
+          document.cookie = "phx_theme=" + resolved + "; path=/; max-age=31536000";
+          document.documentElement.setAttribute("data-theme", resolved);
+        };
+
+        setTheme(localStorage.getItem("phx:theme") || document.documentElement.getAttribute("data-theme") || "neo");
+
+        window.addEventListener("storage", (e) => e.key === "phx:theme" && e.newValue && setTheme(e.newValue));
+
+        window.addEventListener("phx:set-theme", (e) => {
+          const value = e.detail?.value;
+          const theme = Array.isArray(value) && value[0] ? value[0] : "neo";
+          setTheme(theme);
+        });
       })();
     </script>
   </head>
diff --git a/e2e/lib/e2e_web/controllers/page_controller.ex b/e2e/lib/e2e_web/controllers/page_controller.ex
index 0920eb6..ecd174e 100644
--- a/e2e/lib/e2e_web/controllers/page_controller.ex
+++ b/e2e/lib/e2e_web/controllers/page_controller.ex
@@ -9,6 +9,14 @@ defmodule E2eWeb.PageController do
     render(conn, :accordion_page)
   end
 
+  def action_page(conn, _params) do
+    render(conn, :action_page)
+  end
+
+  def navigate_page(conn, _params) do
+    render(conn, :navigate_page)
+  end
+
   def switch_page(conn, _params) do
     render(conn, :switch_page)
   end
@@ -79,6 +87,21 @@ defmodule E2eWeb.PageController do
     render(conn, :clipboard_page)
   end
 
+  def code_page(conn, _params) do
+    heredoc_example = """
+    defmodule Hello do
+      def world do
+        "Hello, World!"
+      end
+    end
+    """
+
+    conn
+    |> assign(:code_examples, E2eWeb.CodeExamples.all())
+    |> assign(:heredoc_example, heredoc_example)
+    |> render(:code_page)
+  end
+
   def date_picker_page(conn, _params) do
     render(conn, :date_picker_page)
   end
diff --git a/e2e/lib/e2e_web/controllers/page_html.ex b/e2e/lib/e2e_web/controllers/page_html.ex
index 2651896..dfb8e64 100644
--- a/e2e/lib/e2e_web/controllers/page_html.ex
+++ b/e2e/lib/e2e_web/controllers/page_html.ex
@@ -37,6 +37,13 @@ defmodule E2eWeb.PageHTML do
           [label: "Live", id: "/#{locale}/live/clipboard"]
         ]
       ],
+      [
+        label: "Code",
+        id: "code",
+        children: [
+          [label: "Controller", id: "/#{locale}/code"]
+        ]
+      ],
       [
         label: "Collapsible",
         id: "collapsible",
diff --git a/e2e/lib/e2e_web/controllers/page_html/accordion_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/accordion_page.html.heex
index ff967f5..3a9c614 100644
--- a/e2e/lib/e2e_web/controllers/page_html/accordion_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/accordion_page.html.heex
@@ -1,24 +1,30 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Accordion</h1>
   <h2>Controller View</h2>
   <h3>Client Api</h3>
   <section class="layout__section">
     <div class="layout__row">
-      <button
+      <.action
         phx-click={Corex.Accordion.set_value("my-accordion", ["lorem"])}
         class="button button--sm"
       >
         Open Lorem
-      </button>
-      <button
+      </.action>
+      <.action
         phx-click={Corex.Accordion.set_value("my-accordion", ["lorem", "donec"])}
         class="button button--sm"
       >
         Open Lorem & Donec
-      </button>
-      <button phx-click={Corex.Accordion.set_value("my-accordion", [])} class="button button--sm">
+      </.action>
+      <.action phx-click={Corex.Accordion.set_value("my-accordion", [])} class="button button--sm">
         Close all Items
-      </button>
+      </.action>
     </div>
   </section>
 
diff --git a/e2e/lib/e2e_web/controllers/page_html/action_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/action_page.html.heex
new file mode 100644
index 0000000..9fda167
--- /dev/null
+++ b/e2e/lib/e2e_web/controllers/page_html/action_page.html.heex
@@ -0,0 +1,71 @@
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
+  <h1>Action</h1>
+  <h2>Controller View</h2>
+  <h3>Anatomy</h3>
+  <section class="layout__section">
+    <div class="layout__row gap-ui-gap">
+      <.action class="button">Text</.action>
+      <.action class="button">
+        Text and SVG
+        <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+      </.action>
+      <.action class="button button--square" aria_label="Button text">
+        <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+      </.action>
+      <.action class="button button--square" aria_label="Button text">B</.action>
+    </div>
+  </section>
+
+  <h3>Color</h3>
+  <section class="layout__section">
+    <div class="layout__row gap-ui-gap">
+      <.action class="button">Text</.action>
+      <.action class="button button--accent">Text</.action>
+      <.action class="button button--brand">Text</.action>
+      <.action class="button button--alert">Text</.action>
+      <.action class="button button--info">Text</.action>
+      <.action class="button button--success">Text</.action>
+    </div>
+  </section>
+
+  <h3>Size</h3>
+  <section class="layout__section">
+    <div class="layout__row gap-ui-gap items-center">
+      <.action class="button button--sm">Button SM</.action>
+      <.action class="button">Button MD</.action>
+      <.action class="button button--lg">Button LG</.action>
+      <.action class="button button--xl">Button XL</.action>
+    </div>
+  </section>
+
+  <h3>Shape</h3>
+  <section class="layout__section">
+    <div class="layout__row gap-ui-gap items-center">
+      <.action class="button button--square" aria_label="Square button">
+        <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+      </.action>
+      <.action class="button button--square" aria_label="Square button">B</.action>
+      <.action class="button button--circle" aria_label="Circle button">
+        <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+      </.action>
+      <.action class="button button--circle" aria_label="Circle button">B</.action>
+    </div>
+  </section>
+
+  <h3>Disabled</h3>
+  <section class="layout__section">
+    <div class="layout__row gap-ui-gap items-center">
+      <.action class="button" disabled>Text</.action>
+      <.action class="button button--accent" disabled>Text</.action>
+      <.action class="button button--square" aria_label="Disabled" disabled>
+        <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+      </.action>
+    </div>
+  </section>
+</Layouts.app>
diff --git a/e2e/lib/e2e_web/controllers/page_html/angle_slider_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/angle_slider_page.html.heex
index fe1a12e..1aec8ec 100644
--- a/e2e/lib/e2e_web/controllers/page_html/angle_slider_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/angle_slider_page.html.heex
@@ -1,33 +1,39 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Angle Slider</h1>
   <h2>Controller View</h2>
   <h3>Client Api</h3>
   <section class="layout__section">
     <div class="layout__row">
-      <button
+      <.action
         phx-click={Corex.AngleSlider.set_value("my-angle-slider", 0)}
         class="button button--sm"
       >
         Set to 0°
-      </button>
-      <button
+      </.action>
+      <.action
         phx-click={Corex.AngleSlider.set_value("my-angle-slider", 90)}
         class="button button--sm"
       >
         Set to 90°
-      </button>
-      <button
+      </.action>
+      <.action
         phx-click={Corex.AngleSlider.set_value("my-angle-slider", 180)}
         class="button button--sm"
       >
         Set to 180°
-      </button>
-      <button
+      </.action>
+      <.action
         phx-click={Corex.AngleSlider.set_value("my-angle-slider", 270)}
         class="button button--sm"
       >
         Set to 270°
-      </button>
+      </.action>
     </div>
   </section>
   <.angle_slider id="my-angle-slider" class="angle-slider" marker_values={[0, 90, 180, 270]}>
diff --git a/e2e/lib/e2e_web/controllers/page_html/avatar_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/avatar_page.html.heex
index 44627ad..50d95d9 100644
--- a/e2e/lib/e2e_web/controllers/page_html/avatar_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/avatar_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Avatar</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/carousel_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/carousel_page.html.heex
index 5ab2ec8..7612ff5 100644
--- a/e2e/lib/e2e_web/controllers/page_html/carousel_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/carousel_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Carousel</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/checkbox_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/checkbox_page.html.heex
index 04245ec..7e4d781 100644
--- a/e2e/lib/e2e_web/controllers/page_html/checkbox_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/checkbox_page.html.heex
@@ -1,29 +1,35 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Checkbox</h1>
     <h2>Controller View</h2>
   </div>
   <h3>Client Api</h3>
   <div class="layout__row">
-    <button
+    <.action
       phx-click={Corex.Checkbox.set_checked("my-checkbox", true)}
       class="button button--sm"
     >
       Set checked
-    </button>
+    </.action>
 
-    <button
+    <.action
       phx-click={Corex.Checkbox.set_checked("my-checkbox", false)}
       class="button button--sm"
     >
       Set unchecked
-    </button>
-    <button
+    </.action>
+    <.action
       phx-click={Corex.Checkbox.toggle_checked("my-checkbox")}
       class="button button--sm"
     >
       Toggle checked
-    </button>
+    </.action>
   </div>
 
   <.checkbox id="my-checkbox" class="checkbox">
diff --git a/e2e/lib/e2e_web/controllers/page_html/clipboard_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/clipboard_page.html.heex
index ce70ef6..6fa99c3 100644
--- a/e2e/lib/e2e_web/controllers/page_html/clipboard_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/clipboard_page.html.heex
@@ -1,26 +1,32 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Clipboard</h1>
   <h2>Controller View</h2>
   <h3>Client Api</h3>
   <div class="layout__row">
-    <button
+    <.action
       phx-click={Corex.Clipboard.set_value("my-clipboard", "Hello, World!")}
       class="button button--sm"
     >
       Set to "Hello, World!"
-    </button>
-    <button
+    </.action>
+    <.action
       phx-click={Corex.Clipboard.set_value("my-clipboard", "info@netoum.com")}
       class="button button--sm"
     >
       Set to "info@netoum.com"
-    </button>
-    <button
+    </.action>
+    <.action
       phx-click={Corex.Clipboard.copy("my-clipboard")}
       class="button button--sm"
     >
       Copy
-    </button>
+    </.action>
   </div>
   <.clipboard
     id="my-clipboard"
diff --git a/e2e/lib/e2e_web/controllers/page_html/code_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/code_page.html.heex
new file mode 100644
index 0000000..222f840
--- /dev/null
+++ b/e2e/lib/e2e_web/controllers/page_html/code_page.html.heex
@@ -0,0 +1,104 @@
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
+  <h1>Code</h1>
+  <h2>Controller View</h2>
+  <h3>Elixir</h3>
+  <section class="layout__section">
+    <div class="relative w-full">
+      <.clipboard
+        id="code-elixir"
+        class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+        value={@code_examples.elixir}
+        input={false}
+        trigger_aria_label="Copy code"
+      >
+        <:trigger>
+          <.icon name="hero-clipboard" class="icon data-copy" />
+          <.icon name="hero-check" class="icon data-copied" />
+        </:trigger>
+      </.clipboard>
+      <.code code={@code_examples.elixir} language={:elixir} class="code" />
+    </div>
+  </section>
+
+  <h3>HTML</h3>
+  <section class="layout__section">
+    <div class="relative w-full">
+      <.clipboard
+        id="code-html"
+        class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+        value={@code_examples.html}
+        input={false}
+        trigger_aria_label="Copy code"
+      >
+        <:trigger>
+          <.icon name="hero-clipboard" class="icon data-copy" />
+          <.icon name="hero-check" class="icon data-copied" />
+        </:trigger>
+      </.clipboard>
+      <.code code={@code_examples.html} language={:html} class="code" />
+    </div>
+  </section>
+
+  <h3>CSS</h3>
+  <section class="layout__section">
+    <div class="relative w-full">
+      <.clipboard
+        id="code-css"
+        class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+        value={@code_examples.css}
+        input={false}
+        trigger_aria_label="Copy code"
+      >
+        <:trigger>
+          <.icon name="hero-clipboard" class="icon data-copy" />
+          <.icon name="hero-check" class="icon data-copied" />
+        </:trigger>
+      </.clipboard>
+      <.code code={@code_examples.css} language={:css} class="code" />
+    </div>
+  </section>
+
+  <h3>JavaScript</h3>
+  <section class="layout__section">
+    <div class="relative w-full">
+      <.clipboard
+        id="code-js"
+        class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+        value={@code_examples.js}
+        input={false}
+        trigger_aria_label="Copy code"
+      >
+        <:trigger>
+          <.icon name="hero-clipboard" class="icon data-copy" />
+          <.icon name="hero-check" class="icon data-copied" />
+        </:trigger>
+      </.clipboard>
+      <.code code={@code_examples.js} language={:js} class="code" />
+    </div>
+  </section>
+
+  <h3>Inline with heredoc</h3>
+  <section class="layout__section">
+    <div class="relative w-full">
+      <.clipboard
+        id="code-heredoc"
+        class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+        value={@heredoc_example}
+        input={false}
+        trigger_aria_label="Copy code"
+      >
+        <:trigger>
+          <.icon name="hero-clipboard" class="icon data-copy" />
+          <.icon name="hero-check" class="icon data-copied" />
+        </:trigger>
+      </.clipboard>
+      <.code language={:elixir} class="code" code={@heredoc_example} />
+    </div>
+  </section>
+</Layouts.app>
diff --git a/e2e/lib/e2e_web/controllers/page_html/collapsible_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/collapsible_page.html.heex
index 5a9d1ca..94d2e02 100644
--- a/e2e/lib/e2e_web/controllers/page_html/collapsible_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/collapsible_page.html.heex
@@ -1,21 +1,27 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Collapsible</h1>
   <h2>Controller View</h2>
   <h3>Client Api</h3>
   <section class="layout__section">
     <div class="layout__row">
-      <button
+      <.action
         phx-click={Corex.Collapsible.set_open("my-collapsible", true)}
         class="button button--sm"
       >
         Open
-      </button>
-      <button
+      </.action>
+      <.action
         phx-click={Corex.Collapsible.set_open("my-collapsible", false)}
         class="button button--sm"
       >
         Close
-      </button>
+      </.action>
     </div>
   </section>
   <section class="layout__section">
diff --git a/e2e/lib/e2e_web/controllers/page_html/combobox_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/combobox_page.html.heex
index cfc59e7..62e0f57 100644
--- a/e2e/lib/e2e_web/controllers/page_html/combobox_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/combobox_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Combobox</h1>
     <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/date_picker_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/date_picker_page.html.heex
index 2bcad98..ae322e0 100644
--- a/e2e/lib/e2e_web/controllers/page_html/date_picker_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/date_picker_page.html.heex
@@ -1,20 +1,26 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Date Picker</h1>
   <h2>Controller View</h2>
   <h3>Client Api</h3>
   <div class="layout__row">
-    <button
+    <.action
       phx-click={Corex.DatePicker.set_value("my-date-picker", "2024-01-15")}
       class="button button--sm"
     >
       Set to 2024-01-15
-    </button>
-    <button
+    </.action>
+    <.action
       phx-click={Corex.DatePicker.set_value("my-date-picker", "2024-12-25")}
       class="button button--sm"
     >
       Set to 2024-12-25
-    </button>
+    </.action>
   </div>
   <.date_picker
     id="my-date-picker"
diff --git a/e2e/lib/e2e_web/controllers/page_html/dialog_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/dialog_page.html.heex
index 360843b..b0a040a 100644
--- a/e2e/lib/e2e_web/controllers/page_html/dialog_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/dialog_page.html.heex
@@ -1,14 +1,20 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Dialog</h1>
   <h2>Controller View</h2>
   <h3>Client Api</h3>
   <div class="layout__row">
-    <button
+    <.action
       phx-click={Corex.Dialog.set_open("my-dialog", true)}
       class="button button--sm"
     >
       Open Dialog
-    </button>
+    </.action>
   </div>
   <.dialog id="my-dialog" class="dialog">
     <:trigger>Open Dialog</:trigger>
@@ -18,12 +24,12 @@
     </:description>
     <:content>
       <p>Dialog content goes here. You can add any content you want inside the dialog.</p>
-      <button
+      <.action
         phx-click={Corex.Dialog.set_open("my-dialog", false)}
         class="button button--sm"
       >
         API Close Dialog
-      </button>
+      </.action>
     </:content>
     <:close_trigger>
       <.icon name="hero-x-mark" class="icon" />
diff --git a/e2e/lib/e2e_web/controllers/page_html/editable_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/editable_page.html.heex
index 63fdc71..7e43978 100644
--- a/e2e/lib/e2e_web/controllers/page_html/editable_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/editable_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Editable</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/floating_panel_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/floating_panel_page.html.heex
index 2ac2e39..eeab99d 100644
--- a/e2e/lib/e2e_web/controllers/page_html/floating_panel_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/floating_panel_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Floating Panel</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/home.html.heex b/e2e/lib/e2e_web/controllers/page_html/home.html.heex
index a71f88a..dcc7f67 100644
--- a/e2e/lib/e2e_web/controllers/page_html/home.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/home.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <section class="gap-ui-sm sm:gap-ui md:gap-ui-lg py-ui sm:py-ui-lg md:py-ui-xl px-ui-padding-xl relative mx-auto flex max-w-(--container-ui-xl) flex-col justify-between">
     <h1 class="my-0 text-4xl md:text-6xl">
       Build <span class="text-root--success">fast</span>,
@@ -38,7 +44,7 @@
           </path>
         </svg>
       </a>
-      <button
+      <.action
         phx-click={Corex.Dialog.set_open("menu-dialog", true)}
         class="button md:button--lg w-full md:w-auto lg:hidden"
       >
@@ -58,9 +64,9 @@
           >
           </path>
         </svg>
-      </button>
-      <.button
-        href={~p"/#{@locale}/accordion"}
+      </.action>
+      <.navigate
+        to={~p"/#{@locale}/accordion"}
         class="button md:button--lg w-full md:w-auto hidden lg:flex"
       >
         Examples
@@ -79,7 +85,7 @@
           >
           </path>
         </svg>
-      </.button>
+      </.navigate>
     </div>
   </section>
 </Layouts.app>
diff --git a/e2e/lib/e2e_web/controllers/page_html/listbox_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/listbox_page.html.heex
index 25041d0..92dd0c2 100644
--- a/e2e/lib/e2e_web/controllers/page_html/listbox_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/listbox_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Listbox</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/menu_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/menu_page.html.heex
index 82b049c..8694663 100644
--- a/e2e/lib/e2e_web/controllers/page_html/menu_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/menu_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Menu</h1>
   <h2>Controller View</h2>
 
diff --git a/e2e/lib/e2e_web/controllers/page_html/navigate_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/navigate_page.html.heex
new file mode 100644
index 0000000..da4a987
--- /dev/null
+++ b/e2e/lib/e2e_web/controllers/page_html/navigate_page.html.heex
@@ -0,0 +1,78 @@
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
+  <h1>Navigate</h1>
+  <h2>Controller View</h2>
+  <h3>Anatomy</h3>
+  <section class="layout__section">
+    <div class="layout__row gap-ui-gap">
+      <.navigate to="#" class="link">Internal Link</.navigate>
+      <.navigate to="#" class="link">
+        Internal Link
+        <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+      </.navigate>
+      <.navigate to="#" class="link" aria_label="Internal link icon only">
+        <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+      </.navigate>
+      <.navigate to="https://example.com" class="link" external>
+        External Link
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+        >
+          <title>Opens in a new window</title>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+          />
+        </svg>
+      </.navigate>
+      <.navigate to="#" class="link" download="report.pdf">
+        Download Link
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+        >
+          <title>Download PDF, 2MB</title>
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+          />
+        </svg>
+      </.navigate>
+    </div>
+  </section>
+
+  <h3>Color</h3>
+  <section class="layout__section">
+    <div class="layout__row gap-ui-gap">
+      <.navigate to="#" class="link link--accent">Internal Link</.navigate>
+      <.navigate to="#" class="link link--brand">Internal Link</.navigate>
+      <.navigate to="#" class="link link--alert">Internal Link</.navigate>
+      <.navigate to="#" class="link link--info">Internal Link</.navigate>
+      <.navigate to="#" class="link link--success">Internal Link</.navigate>
+    </div>
+  </section>
+
+  <h3>Size</h3>
+  <section class="layout__section">
+    <div class="layout__row gap-ui-gap items-center">
+      <.navigate to="#" class="link link--sm">Internal Link</.navigate>
+      <.navigate to="#" class="link link--md">Internal Link</.navigate>
+      <.navigate to="#" class="link link--lg">Internal Link</.navigate>
+      <.navigate to="#" class="link link--xl">Internal Link</.navigate>
+    </div>
+  </section>
+</Layouts.app>
diff --git a/e2e/lib/e2e_web/controllers/page_html/number_input_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/number_input_page.html.heex
index 5d05fe1..1a7c6db 100644
--- a/e2e/lib/e2e_web/controllers/page_html/number_input_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/number_input_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Number Input</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/password_input_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/password_input_page.html.heex
index 03eb14b..30b4404 100644
--- a/e2e/lib/e2e_web/controllers/page_html/password_input_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/password_input_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Password Input</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/pin_input_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/pin_input_page.html.heex
index c96eae3..0f1905a 100644
--- a/e2e/lib/e2e_web/controllers/page_html/pin_input_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/pin_input_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Pin Input</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/radio_group_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/radio_group_page.html.heex
index 2ace990..f84bbe4 100644
--- a/e2e/lib/e2e_web/controllers/page_html/radio_group_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/radio_group_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Radio Group</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/select_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/select_page.html.heex
index 16cf3ce..f44ed0d 100644
--- a/e2e/lib/e2e_web/controllers/page_html/select_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/select_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Select</h1>
     <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/signature_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/signature_page.html.heex
index 171e01f..01a6387 100644
--- a/e2e/lib/e2e_web/controllers/page_html/signature_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/signature_page.html.heex
@@ -1,12 +1,18 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Signature Pad</h1>
   <h2>Controller View</h2>
 
   <h3>Client API</h3>
   <div class="layout__row">
-    <button phx-click={Corex.SignaturePad.clear("my-signature-pad")} class="button button--sm">
+    <.action phx-click={Corex.SignaturePad.clear("my-signature-pad")} class="button button--sm">
       Clear Signature
-    </button>
+    </.action>
   </div>
 
   <.signature_pad id="my-signature-pad" on_draw_end="signature_drawn">
diff --git a/e2e/lib/e2e_web/controllers/page_html/switch_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/switch_page.html.heex
index b7e024e..1f2c803 100644
--- a/e2e/lib/e2e_web/controllers/page_html/switch_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/switch_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Switch</h1>
   <h2>Controller View</h2>
   <.switch class="switch">
diff --git a/e2e/lib/e2e_web/controllers/page_html/tabs_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/tabs_page.html.heex
index 37229b1..b74dcd5 100644
--- a/e2e/lib/e2e_web/controllers/page_html/tabs_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/tabs_page.html.heex
@@ -1,23 +1,29 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Tabs</h1>
   <h2>Controller View</h2>
   <h3>Client Api</h3>
   <div class="layout__row">
-    <button
+    <.action
       phx-click={Corex.Tabs.set_value("my-tabs", "lorem")}
       class="button button--sm"
     >
       Open Lorem
-    </button>
-    <button
+    </.action>
+    <.action
       phx-click={Corex.Tabs.set_value("my-tabs", "duis")}
       class="button button--sm"
     >
       Open Duis
-    </button>
-    <button phx-click={Corex.Tabs.set_value("my-tabs", nil)} class="button button--sm">
+    </.action>
+    <.action phx-click={Corex.Tabs.set_value("my-tabs", nil)} class="button button--sm">
       Close all Tabs
-    </button>
+    </.action>
   </div>
   <.tabs
     id="my-tabs"
diff --git a/e2e/lib/e2e_web/controllers/page_html/timer_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/timer_page.html.heex
index 4bb2188..3c6497c 100644
--- a/e2e/lib/e2e_web/controllers/page_html/timer_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/timer_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Timer</h1>
     <h2>Controller View</h2>
diff --git a/e2e/lib/e2e_web/controllers/page_html/toast_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/toast_page.html.heex
index 7bda6ca..24b5e66 100644
--- a/e2e/lib/e2e_web/controllers/page_html/toast_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/toast_page.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Toast</h1>
   <h2>Controller View</h2>
 
@@ -35,13 +41,13 @@
     </.select>
 
     <footer class="flex w-full justify-end gap-ui-gap">
-      <.button class="button button--accent">Create Flash Message</.button>
+      <.action class="button button--accent">Create Flash Message</.action>
     </footer>
   </.form>
 
   <h3>Client Api</h3>
   <div class="layout__row">
-    <button
+    <.action
       phx-click={
         Corex.Toast.create_toast(
           "This is an info toast",
@@ -52,9 +58,9 @@
       class="button"
     >
       Create Info Toast
-    </button>
+    </.action>
 
-    <button
+    <.action
       phx-click={
         Corex.Toast.create_toast(
           "This is a success toast",
@@ -65,8 +71,8 @@
       class="button"
     >
       Succes Toast
-    </button>
-    <button
+    </.action>
+    <.action
       phx-click={
         Corex.Toast.create_toast(
           "This is a error toast",
@@ -77,9 +83,9 @@
       class="button"
     >
       Error Toast
-    </button>
+    </.action>
 
-    <button
+    <.action
       phx-click={
         Corex.Toast.create_toast(
           "This is a loading toast",
@@ -91,6 +97,6 @@
       class="button"
     >
       Create Loading
-    </button>
+    </.action>
   </div>
 </Layouts.app>
diff --git a/e2e/lib/e2e_web/controllers/page_html/toggle_group_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/toggle_group_page.html.heex
index 1a7523c..8595289 100644
--- a/e2e/lib/e2e_web/controllers/page_html/toggle_group_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/toggle_group_page.html.heex
@@ -1,28 +1,34 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <div class="layout__row">
     <h1>Toggle Group</h1>
     <h2>Controller View</h2>
   </div>
   <h3>Client Api</h3>
   <div class="layout__row">
-    <button
+    <.action
       phx-click={Corex.ToggleGroup.set_value("my-toggle-group", ["lorem"])}
       class="button button--sm"
     >
       Toggle Lorem
-    </button>
-    <button
+    </.action>
+    <.action
       phx-click={Corex.ToggleGroup.set_value("my-toggle-group", ["lorem", "donec"])}
       class="button button--sm"
     >
       Toggle Lorem and Donec
-    </button>
-    <button
+    </.action>
+    <.action
       phx-click={Corex.ToggleGroup.set_value("my-toggle-group", [])}
       class="button button--sm"
     >
       Toggle no items
-    </button>
+    </.action>
   </div>
   <.toggle_group id="my-toggle-group" class="toggle-group">
     <:item value="lorem">
diff --git a/e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex b/e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex
index 775c488..0539d62 100644
--- a/e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex
+++ b/e2e/lib/e2e_web/controllers/page_html/tree_view_page.html.heex
@@ -1,33 +1,39 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <h1>Tree View</h1>
   <h2>Controller View</h2>
   <h3>Client Api</h3>
   <section class="layout__section">
     <div class="layout__row">
-      <button
+      <.action
         phx-click={Corex.TreeView.set_expanded_value("my-tree", ["accordion", "checkbox"])}
         class="button button--sm"
       >
         Expand Accordion & Checkbox
-      </button>
-      <button
+      </.action>
+      <.action
         phx-click={Corex.TreeView.set_expanded_value("my-tree", [])}
         class="button button--sm"
       >
         Collapse all
-      </button>
-      <button
+      </.action>
+      <.action
         phx-click={Corex.TreeView.set_selected_value("my-tree", ["/#{@locale}/accordion"])}
         class="button button--sm"
       >
         Select Controller (Accordion)
-      </button>
-      <button
+      </.action>
+      <.action
         phx-click={Corex.TreeView.set_selected_value("my-tree", [])}
         class="button button--sm"
       >
         Clear selection
-      </button>
+      </.action>
     </div>
   </section>
   <.tree_view
diff --git a/e2e/lib/e2e_web/controllers/user_html/edit.html.heex b/e2e/lib/e2e_web/controllers/user_html/edit.html.heex
index 184905e..fa49184 100644
--- a/e2e/lib/e2e_web/controllers/user_html/edit.html.heex
+++ b/e2e/lib/e2e_web/controllers/user_html/edit.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <.header>
     Edit User {@user.id}
     <:subtitle>Use this form to manage user records in your database.</:subtitle>
diff --git a/e2e/lib/e2e_web/controllers/user_html/index.html.heex b/e2e/lib/e2e_web/controllers/user_html/index.html.heex
index 47819fd..67cee01 100644
--- a/e2e/lib/e2e_web/controllers/user_html/index.html.heex
+++ b/e2e/lib/e2e_web/controllers/user_html/index.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <.header>
     Listing Users
     <:actions>
diff --git a/e2e/lib/e2e_web/controllers/user_html/new.html.heex b/e2e/lib/e2e_web/controllers/user_html/new.html.heex
index 62ca3d4..bbea01c 100644
--- a/e2e/lib/e2e_web/controllers/user_html/new.html.heex
+++ b/e2e/lib/e2e_web/controllers/user_html/new.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <.header>
     New User
     <:subtitle>Use this form to manage user records in your database.</:subtitle>
diff --git a/e2e/lib/e2e_web/controllers/user_html/show.html.heex b/e2e/lib/e2e_web/controllers/user_html/show.html.heex
index 6eb80a5..9b950d7 100644
--- a/e2e/lib/e2e_web/controllers/user_html/show.html.heex
+++ b/e2e/lib/e2e_web/controllers/user_html/show.html.heex
@@ -1,4 +1,10 @@
-<Layouts.app flash={@flash} locale={@locale} current_path={@current_path}>
+<Layouts.app
+  flash={@flash}
+  mode={@mode}
+  theme={@theme}
+  locale={@locale}
+  current_path={@current_path}
+>
   <.header>
     User {@user.id}
     <:subtitle>This is a user record from your database.</:subtitle>
diff --git a/e2e/lib/e2e_web/live/accordion_async_live.ex b/e2e/lib/e2e_web/live/accordion_async_live.ex
index ed7b102..b976b0c 100644
--- a/e2e/lib/e2e_web/live/accordion_async_live.ex
+++ b/e2e/lib/e2e_web/live/accordion_async_live.ex
@@ -40,7 +40,13 @@ defmodule E2eWeb.AccordionAsyncLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Accordion</h1>
         <h2>Async</h2>
diff --git a/e2e/lib/e2e_web/live/accordion_controlled_live.ex b/e2e/lib/e2e_web/live/accordion_controlled_live.ex
index 7c28366..7425e0c 100644
--- a/e2e/lib/e2e_web/live/accordion_controlled_live.ex
+++ b/e2e/lib/e2e_web/live/accordion_controlled_live.ex
@@ -47,7 +47,13 @@ defmodule E2eWeb.AccordionControlledLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Accordion</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/accordion_live.ex b/e2e/lib/e2e_web/live/accordion_live.ex
index 0a41b9e..3e8e1d8 100644
--- a/e2e/lib/e2e_web/live/accordion_live.ex
+++ b/e2e/lib/e2e_web/live/accordion_live.ex
@@ -32,7 +32,13 @@ defmodule E2eWeb.AccordionLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Accordion</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/accordion_play_live.ex b/e2e/lib/e2e_web/live/accordion_play_live.ex
index 534c526..b5c03e6 100644
--- a/e2e/lib/e2e_web/live/accordion_play_live.ex
+++ b/e2e/lib/e2e_web/live/accordion_play_live.ex
@@ -91,7 +91,13 @@ defmodule E2eWeb.AccordionPlayLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Accordion</h1>
         <h2>Playground</h2>
diff --git a/e2e/lib/e2e_web/live/action_live.ex b/e2e/lib/e2e_web/live/action_live.ex
new file mode 100644
index 0000000..de6868c
--- /dev/null
+++ b/e2e/lib/e2e_web/live/action_live.ex
@@ -0,0 +1,83 @@
+defmodule E2eWeb.ActionLive do
+  use E2eWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
+      <h1>Action</h1>
+      <h2>Live View</h2>
+      <h3>Anatomy</h3>
+      <section class="layout__section">
+        <div class="layout__row gap-ui-gap">
+          <.action class="button">Text</.action>
+          <.action class="button">
+            Text and SVG
+            <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+          </.action>
+          <.action class="button button--square" aria_label="Button text">
+            <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+          </.action>
+          <.action class="button button--square" aria_label="Button text">B</.action>
+        </div>
+      </section>
+
+      <h3>Color</h3>
+      <section class="layout__section">
+        <div class="layout__row gap-ui-gap">
+          <.action class="button">Text</.action>
+          <.action class="button button--accent">Text</.action>
+          <.action class="button button--brand">Text</.action>
+          <.action class="button button--alert">Text</.action>
+          <.action class="button button--info">Text</.action>
+          <.action class="button button--success">Text</.action>
+        </div>
+      </section>
+
+      <h3>Size</h3>
+      <section class="layout__section">
+        <div class="layout__row gap-ui-gap items-center">
+          <.action class="button button--sm">Button SM</.action>
+          <.action class="button">Button MD</.action>
+          <.action class="button button--lg">Button LG</.action>
+          <.action class="button button--xl">Button XL</.action>
+        </div>
+      </section>
+
+      <h3>Shape</h3>
+      <section class="layout__section">
+        <div class="layout__row gap-ui-gap items-center">
+          <.action class="button button--square" aria_label="Square button">
+            <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+          </.action>
+          <.action class="button button--square" aria_label="Square button">B</.action>
+          <.action class="button button--circle" aria_label="Circle button">
+            <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+          </.action>
+          <.action class="button button--circle" aria_label="Circle button">B</.action>
+        </div>
+      </section>
+
+      <h3>Disabled</h3>
+      <section class="layout__section">
+        <div class="layout__row gap-ui-gap items-center">
+          <.action class="button" disabled>Text</.action>
+          <.action class="button button--accent" disabled>Text</.action>
+          <.action class="button button--square" aria_label="Disabled" disabled>
+            <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+          </.action>
+        </div>
+      </section>
+    </Layouts.app>
+    """
+  end
+end
diff --git a/e2e/lib/e2e_web/live/admin_live/form.ex b/e2e/lib/e2e_web/live/admin_live/form.ex
index fd176fa..c5cbca9 100644
--- a/e2e/lib/e2e_web/live/admin_live/form.ex
+++ b/e2e/lib/e2e_web/live/admin_live/form.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.AdminLive.Form do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <.header>
         {@page_title}
         <:subtitle>Use this form to manage admin records in your database.</:subtitle>
diff --git a/e2e/lib/e2e_web/live/admin_live/index.ex b/e2e/lib/e2e_web/live/admin_live/index.ex
index 58ffea3..80ae53a 100644
--- a/e2e/lib/e2e_web/live/admin_live/index.ex
+++ b/e2e/lib/e2e_web/live/admin_live/index.ex
@@ -6,7 +6,13 @@ defmodule E2eWeb.AdminLive.Index do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <.header>
         Listing Admins
         <:actions>
diff --git a/e2e/lib/e2e_web/live/admin_live/show.ex b/e2e/lib/e2e_web/live/admin_live/show.ex
index abf6283..bc79b3e 100644
--- a/e2e/lib/e2e_web/live/admin_live/show.ex
+++ b/e2e/lib/e2e_web/live/admin_live/show.ex
@@ -6,7 +6,13 @@ defmodule E2eWeb.AdminLive.Show do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <.header>
         Admin {@admin.id}
         <:subtitle>This is a admin record from your database.</:subtitle>
diff --git a/e2e/lib/e2e_web/live/angle_slider_controlled_live.ex b/e2e/lib/e2e_web/live/angle_slider_controlled_live.ex
index 8773037..73fcea0 100644
--- a/e2e/lib/e2e_web/live/angle_slider_controlled_live.ex
+++ b/e2e/lib/e2e_web/live/angle_slider_controlled_live.ex
@@ -26,7 +26,13 @@ defmodule E2eWeb.AngleSliderControlledLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Angle Slider</h1>
         <h2>Controlled</h2>
diff --git a/e2e/lib/e2e_web/live/angle_slider_live.ex b/e2e/lib/e2e_web/live/angle_slider_live.ex
index 882f11e..13933d8 100644
--- a/e2e/lib/e2e_web/live/angle_slider_live.ex
+++ b/e2e/lib/e2e_web/live/angle_slider_live.ex
@@ -37,7 +37,13 @@ defmodule E2eWeb.AngleSliderLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Angle Slider</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/angle_slider_play_live.ex b/e2e/lib/e2e_web/live/angle_slider_play_live.ex
index 9c6691d..8c8b361 100644
--- a/e2e/lib/e2e_web/live/angle_slider_play_live.ex
+++ b/e2e/lib/e2e_web/live/angle_slider_play_live.ex
@@ -90,7 +90,13 @@ defmodule E2eWeb.AngleSliderPlayLive do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Angle Slider</h1>
         <h2>Playground</h2>
@@ -130,7 +136,7 @@ defmodule E2eWeb.AngleSliderPlayLive do
           checked={@controls.show_markers}
           on_checked_change="control_changed"
         >
-          <:label>Show Markers (0°, 90°, 180°, 270°)</:label>
+          <:label>Show Markers</:label>
         </.switch>
 
         <.toggle_group
diff --git a/e2e/lib/e2e_web/live/avatar_live.ex b/e2e/lib/e2e_web/live/avatar_live.ex
index 9af0750..ad311eb 100644
--- a/e2e/lib/e2e_web/live/avatar_live.ex
+++ b/e2e/lib/e2e_web/live/avatar_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.AvatarLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Avatar</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/carousel_live.ex b/e2e/lib/e2e_web/live/carousel_live.ex
index 6f2ff3f..3c96752 100644
--- a/e2e/lib/e2e_web/live/carousel_live.ex
+++ b/e2e/lib/e2e_web/live/carousel_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.CarouselLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Carousel</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/checkbox_live.ex b/e2e/lib/e2e_web/live/checkbox_live.ex
index 06bbd58..68b89f0 100644
--- a/e2e/lib/e2e_web/live/checkbox_live.ex
+++ b/e2e/lib/e2e_web/live/checkbox_live.ex
@@ -15,7 +15,13 @@ defmodule E2eWeb.CheckboxLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Checkbox</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/clipboard_live.ex b/e2e/lib/e2e_web/live/clipboard_live.ex
index 080d820..1b5c5ce 100644
--- a/e2e/lib/e2e_web/live/clipboard_live.ex
+++ b/e2e/lib/e2e_web/live/clipboard_live.ex
@@ -19,7 +19,13 @@ defmodule E2eWeb.ClipboardLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Clipboard</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/code_live.ex b/e2e/lib/e2e_web/live/code_live.ex
new file mode 100644
index 0000000..2f0d1d7
--- /dev/null
+++ b/e2e/lib/e2e_web/live/code_live.ex
@@ -0,0 +1,129 @@
+defmodule E2eWeb.CodeLive do
+  use E2eWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    heredoc_example = """
+    defmodule Hello do
+      def world do
+        "Hello, World!"
+      end
+    end
+    """
+
+    socket =
+      socket
+      |> assign(:code_examples, E2eWeb.CodeExamples.all())
+      |> assign(:heredoc_example, heredoc_example)
+
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
+      <h1>Code</h1>
+      <h2>Live View</h2>
+      <h3>Elixir</h3>
+      <section class="layout__section">
+        <div class="relative w-full">
+          <.clipboard
+            id="code-elixir"
+            class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+            value={@code_examples.elixir}
+            input={false}
+            trigger_aria_label="Copy code"
+          >
+            <:trigger>
+              <.icon name="hero-clipboard" class="icon data-copy" />
+              <.icon name="hero-check" class="icon data-copied" />
+            </:trigger>
+          </.clipboard>
+          <.code code={@code_examples.elixir} language={:elixir} class="code" />
+        </div>
+      </section>
+
+      <h3>HTML</h3>
+      <section class="layout__section">
+        <div class="relative w-full">
+          <.clipboard
+            id="code-html"
+            class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+            value={@code_examples.html}
+            input={false}
+            trigger_aria_label="Copy code"
+          >
+            <:trigger>
+              <.icon name="hero-clipboard" class="icon data-copy" />
+              <.icon name="hero-check" class="icon data-copied" />
+            </:trigger>
+          </.clipboard>
+          <.code code={@code_examples.html} language={:html} class="code" />
+        </div>
+      </section>
+
+      <h3>CSS</h3>
+      <section class="layout__section">
+        <div class="relative w-full">
+          <.clipboard
+            id="code-css"
+            class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+            value={@code_examples.css}
+            input={false}
+            trigger_aria_label="Copy code"
+          >
+            <:trigger>
+              <.icon name="hero-clipboard" class="icon data-copy" />
+              <.icon name="hero-check" class="icon data-copied" />
+            </:trigger>
+          </.clipboard>
+          <.code code={@code_examples.css} language={:css} class="code" />
+        </div>
+      </section>
+
+      <h3>JavaScript</h3>
+      <section class="layout__section">
+        <div class="relative w-full">
+          <.clipboard
+            id="code-js"
+            class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+            value={@code_examples.js}
+            input={false}
+            trigger_aria_label="Copy code"
+          >
+            <:trigger>
+              <.icon name="hero-clipboard" class="icon data-copy" />
+              <.icon name="hero-check" class="icon data-copied" />
+            </:trigger>
+          </.clipboard>
+          <.code code={@code_examples.js} language={:js} class="code" />
+        </div>
+      </section>
+
+      <h3>Inline with heredoc</h3>
+      <section class="layout__section">
+        <div class="relative w-full">
+          <.clipboard
+            id="code-heredoc"
+            class="clipboard clipboard--sm absolute top-ui-padding right-ui-padding z-10"
+            value={@heredoc_example}
+            input={false}
+            trigger_aria_label="Copy code"
+          >
+            <:trigger>
+              <.icon name="hero-clipboard" class="icon data-copy" />
+              <.icon name="hero-check" class="icon data-copied" />
+            </:trigger>
+          </.clipboard>
+          <.code language={:elixir} class="code" code={@heredoc_example} />
+        </div>
+      </section>
+    </Layouts.app>
+    """
+  end
+end
diff --git a/e2e/lib/e2e_web/live/collapsible_live.ex b/e2e/lib/e2e_web/live/collapsible_live.ex
index 15e5009..0cebb4d 100644
--- a/e2e/lib/e2e_web/live/collapsible_live.ex
+++ b/e2e/lib/e2e_web/live/collapsible_live.ex
@@ -19,7 +19,13 @@ defmodule E2eWeb.CollapsibleLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Collapsible</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/combobox_fetch.ex b/e2e/lib/e2e_web/live/combobox_fetch.ex
index b909401..d821fd9 100644
--- a/e2e/lib/e2e_web/live/combobox_fetch.ex
+++ b/e2e/lib/e2e_web/live/combobox_fetch.ex
@@ -84,7 +84,13 @@ defmodule E2eWeb.ComboboxFetch do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Combobox</h1>
         <h2>Server-side Filtering</h2>
diff --git a/e2e/lib/e2e_web/live/combobox_form.ex b/e2e/lib/e2e_web/live/combobox_form.ex
index 080b624..00a2a9c 100644
--- a/e2e/lib/e2e_web/live/combobox_form.ex
+++ b/e2e/lib/e2e_web/live/combobox_form.ex
@@ -149,7 +149,13 @@ defmodule E2eWeb.ComboboxForm do
   @impl true
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Combobox</h1>
         <h2>Form with validation</h2>
@@ -157,7 +163,9 @@ defmodule E2eWeb.ComboboxForm do
 
       <.header>
         Combobox form
-        <:subtitle>Phoenix form with Ecto validation, database fetching and server side fitlering combobox.</:subtitle>
+        <:subtitle>
+          Phoenix form with Ecto validation, database fetching and server side fitlering combobox.
+        </:subtitle>
       </.header>
 
       <.form
diff --git a/e2e/lib/e2e_web/live/combobox_live.ex b/e2e/lib/e2e_web/live/combobox_live.ex
index 0c6adc9..8ae8a9e 100644
--- a/e2e/lib/e2e_web/live/combobox_live.ex
+++ b/e2e/lib/e2e_web/live/combobox_live.ex
@@ -12,7 +12,13 @@ defmodule E2eWeb.ComboboxLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Combobox</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/date_picker_live.ex b/e2e/lib/e2e_web/live/date_picker_live.ex
index e074d97..5851a27 100644
--- a/e2e/lib/e2e_web/live/date_picker_live.ex
+++ b/e2e/lib/e2e_web/live/date_picker_live.ex
@@ -11,7 +11,13 @@ defmodule E2eWeb.DatePickerLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Date Picker</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/dialog_live.ex b/e2e/lib/e2e_web/live/dialog_live.ex
index 494b6ab..46399c2 100644
--- a/e2e/lib/e2e_web/live/dialog_live.ex
+++ b/e2e/lib/e2e_web/live/dialog_live.ex
@@ -19,7 +19,13 @@ defmodule E2eWeb.DialogLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Dialog</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/editable_live.ex b/e2e/lib/e2e_web/live/editable_live.ex
index 13a8e90..ca6218d 100644
--- a/e2e/lib/e2e_web/live/editable_live.ex
+++ b/e2e/lib/e2e_web/live/editable_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.EditableLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Editable</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/floating_panel_live.ex b/e2e/lib/e2e_web/live/floating_panel_live.ex
index 58cffca..d03b0ca 100644
--- a/e2e/lib/e2e_web/live/floating_panel_live.ex
+++ b/e2e/lib/e2e_web/live/floating_panel_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.FloatingPanelLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Floating Panel</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/hooks/theme_live.ex b/e2e/lib/e2e_web/live/hooks/theme_live.ex
new file mode 100644
index 0000000..c6cbf41
--- /dev/null
+++ b/e2e/lib/e2e_web/live/hooks/theme_live.ex
@@ -0,0 +1,10 @@
+defmodule E2eWeb.ThemeLive do
+  @moduledoc """
+  Assigns the theme from the session to the LiveView socket.
+  """
+  def on_mount(:default, _params, session, socket) do
+    theme = session["theme"] || "neo"
+
+    {:cont, Phoenix.Component.assign(socket, :theme, theme)}
+  end
+end
diff --git a/e2e/lib/e2e_web/live/listbox_live.ex b/e2e/lib/e2e_web/live/listbox_live.ex
index 5fa98b7..2bcacb6 100644
--- a/e2e/lib/e2e_web/live/listbox_live.ex
+++ b/e2e/lib/e2e_web/live/listbox_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.ListboxLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Listbox</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/menu_live.ex b/e2e/lib/e2e_web/live/menu_live.ex
index 95445be..ded3ccd 100644
--- a/e2e/lib/e2e_web/live/menu_live.ex
+++ b/e2e/lib/e2e_web/live/menu_live.ex
@@ -16,7 +16,13 @@ defmodule E2eWeb.MenuLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Menu</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/navigate_live.ex b/e2e/lib/e2e_web/live/navigate_live.ex
new file mode 100644
index 0000000..011c644
--- /dev/null
+++ b/e2e/lib/e2e_web/live/navigate_live.ex
@@ -0,0 +1,90 @@
+defmodule E2eWeb.NavigateLive do
+  use E2eWeb, :live_view
+
+  def mount(_params, _session, socket) do
+    {:ok, socket}
+  end
+
+  def render(assigns) do
+    ~H"""
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
+      <h1>Navigate</h1>
+      <h2>Live View</h2>
+      <h3>Anatomy</h3>
+      <section class="layout__section">
+        <div class="layout__row gap-ui-gap">
+          <.navigate to="#" class="link">Internal Link</.navigate>
+          <.navigate to="#" class="link">
+            Internal Link
+            <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+          </.navigate>
+          <.navigate to="#" class="link" aria_label="Internal link icon only">
+            <span aria-hidden="true"><.icon name="hero-arrow-right" class="icon" /></span>
+          </.navigate>
+          <.navigate to="https://example.com" class="link" external>
+            External Link
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <title>Opens in a new window</title>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M13.5 6H5.25A2.25 2.25 0 0 0 3 8.25v10.5A2.25 2.25 0 0 0 5.25 21h10.5A2.25 2.25 0 0 0 18 18.75V10.5m-10.5 6L21 3m0 0h-5.25M21 3v5.25"
+              />
+            </svg>
+          </.navigate>
+          <.navigate to="#" class="link" download="report.pdf">
+            Download Link
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+            >
+              <title>Download PDF, 2MB</title>
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M3 16.5v2.25A2.25 2.25 0 0 0 5.25 21h13.5A2.25 2.25 0 0 0 21 18.75V16.5M16.5 12 12 16.5m0 0L7.5 12m4.5 4.5V3"
+              />
+            </svg>
+          </.navigate>
+        </div>
+      </section>
+
+      <h3>Color</h3>
+      <section class="layout__section">
+        <div class="layout__row gap-ui-gap">
+          <.navigate to="#" class="link link--accent">Internal Link</.navigate>
+          <.navigate to="#" class="link link--brand">Internal Link</.navigate>
+          <.navigate to="#" class="link link--alert">Internal Link</.navigate>
+          <.navigate to="#" class="link link--info">Internal Link</.navigate>
+          <.navigate to="#" class="link link--success">Internal Link</.navigate>
+        </div>
+      </section>
+
+      <h3>Size</h3>
+      <section class="layout__section">
+        <div class="layout__row gap-ui-gap items-center">
+          <.navigate to="#" class="link link--sm">Internal Link</.navigate>
+          <.navigate to="#" class="link link--md">Internal Link</.navigate>
+          <.navigate to="#" class="link link--lg">Internal Link</.navigate>
+          <.navigate to="#" class="link link--xl">Internal Link</.navigate>
+        </div>
+      </section>
+    </Layouts.app>
+    """
+  end
+end
diff --git a/e2e/lib/e2e_web/live/number_input_live.ex b/e2e/lib/e2e_web/live/number_input_live.ex
index e3e05c2..fcb7d61 100644
--- a/e2e/lib/e2e_web/live/number_input_live.ex
+++ b/e2e/lib/e2e_web/live/number_input_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.NumberInputLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Number Input</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/password_input_live.ex b/e2e/lib/e2e_web/live/password_input_live.ex
index 14b0f90..251363b 100644
--- a/e2e/lib/e2e_web/live/password_input_live.ex
+++ b/e2e/lib/e2e_web/live/password_input_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.PasswordInputLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Password Input</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/pin_input_live.ex b/e2e/lib/e2e_web/live/pin_input_live.ex
index c0037fb..3f1760a 100644
--- a/e2e/lib/e2e_web/live/pin_input_live.ex
+++ b/e2e/lib/e2e_web/live/pin_input_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.PinInputLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Pin Input</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/radio_group_live.ex b/e2e/lib/e2e_web/live/radio_group_live.ex
index 765119c..1ec9821 100644
--- a/e2e/lib/e2e_web/live/radio_group_live.ex
+++ b/e2e/lib/e2e_web/live/radio_group_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.RadioGroupLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Radio Group</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/select_live.ex b/e2e/lib/e2e_web/live/select_live.ex
index 3773771..7493e48 100644
--- a/e2e/lib/e2e_web/live/select_live.ex
+++ b/e2e/lib/e2e_web/live/select_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.SelectLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Select</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/signature_live.ex b/e2e/lib/e2e_web/live/signature_live.ex
index 1376b74..46998aa 100644
--- a/e2e/lib/e2e_web/live/signature_live.ex
+++ b/e2e/lib/e2e_web/live/signature_live.ex
@@ -20,7 +20,13 @@ defmodule E2eWeb.SignatureLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Signature Pad</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/switch_live.ex b/e2e/lib/e2e_web/live/switch_live.ex
index 1bdfa16..091858a 100644
--- a/e2e/lib/e2e_web/live/switch_live.ex
+++ b/e2e/lib/e2e_web/live/switch_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.SwitchLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <h1>Switch</h1>
       <h2>Live View</h2>
       <.switch class="switch">
diff --git a/e2e/lib/e2e_web/live/tabs_live.ex b/e2e/lib/e2e_web/live/tabs_live.ex
index 467de87..ec49ef9 100644
--- a/e2e/lib/e2e_web/live/tabs_live.ex
+++ b/e2e/lib/e2e_web/live/tabs_live.ex
@@ -11,7 +11,13 @@ defmodule E2eWeb.TabsLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Tabs</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/timer_live.ex b/e2e/lib/e2e_web/live/timer_live.ex
index e4e88b5..e3d9887 100644
--- a/e2e/lib/e2e_web/live/timer_live.ex
+++ b/e2e/lib/e2e_web/live/timer_live.ex
@@ -7,7 +7,13 @@ defmodule E2eWeb.TimerLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Timer</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/toast_live.ex b/e2e/lib/e2e_web/live/toast_live.ex
index f34cd53..eab9f37 100644
--- a/e2e/lib/e2e_web/live/toast_live.ex
+++ b/e2e/lib/e2e_web/live/toast_live.ex
@@ -60,7 +60,13 @@ defmodule E2eWeb.ToastLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Toast</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/toggle_group_live.ex b/e2e/lib/e2e_web/live/toggle_group_live.ex
index 5e527ae..0d68f34 100644
--- a/e2e/lib/e2e_web/live/toggle_group_live.ex
+++ b/e2e/lib/e2e_web/live/toggle_group_live.ex
@@ -11,7 +11,13 @@ defmodule E2eWeb.ToggleGroupLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Toggle Group</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/live/tree_view_live.ex b/e2e/lib/e2e_web/live/tree_view_live.ex
index 22d3581..ebf6f81 100644
--- a/e2e/lib/e2e_web/live/tree_view_live.ex
+++ b/e2e/lib/e2e_web/live/tree_view_live.ex
@@ -77,7 +77,13 @@ defmodule E2eWeb.TreeViewLive do
 
   def render(assigns) do
     ~H"""
-    <Layouts.app flash={@flash} mode={@mode} locale={@locale} current_path={@current_path}>
+    <Layouts.app
+      flash={@flash}
+      mode={@mode}
+      theme={@theme}
+      locale={@locale}
+      current_path={@current_path}
+    >
       <div class="layout__row">
         <h1>Tree View</h1>
         <h2>Live View</h2>
diff --git a/e2e/lib/e2e_web/plugs/theme.ex b/e2e/lib/e2e_web/plugs/theme.ex
new file mode 100644
index 0000000..8593a6d
--- /dev/null
+++ b/e2e/lib/e2e_web/plugs/theme.ex
@@ -0,0 +1,25 @@
+defmodule E2eWeb.Plugs.Theme do
+  @moduledoc """
+  Reads the theme from the phx_theme cookie and puts it in assigns and session.
+  Allows the server to render the correct theme in the initial HTML (no flash).
+  """
+  import Plug.Conn
+
+  @valid_themes ~w(neo uno duo leo)
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    theme =
+      conn.cookies["phx_theme"]
+      |> parse_theme()
+
+    conn
+    |> assign(:theme, theme)
+    |> put_session(:theme, theme)
+  end
+
+  defp parse_theme(nil), do: "neo"
+  defp parse_theme(theme) when theme in @valid_themes, do: theme
+  defp parse_theme(_), do: "neo"
+end
diff --git a/e2e/lib/e2e_web/router.ex b/e2e/lib/e2e_web/router.ex
index f313202..1936ba1 100644
--- a/e2e/lib/e2e_web/router.ex
+++ b/e2e/lib/e2e_web/router.ex
@@ -8,6 +8,7 @@ defmodule E2eWeb.Router do
     plug :fetch_flash
     plug :fetch_live_flash
     plug E2eWeb.Plugs.Mode
+    plug E2eWeb.Plugs.Theme
     plug E2eWeb.Plugs.Locale
     plug :put_root_layout, html: {E2eWeb.Layouts, :root}
     plug :protect_from_forgery
@@ -31,13 +32,16 @@ defmodule E2eWeb.Router do
   scope "/:locale", E2eWeb do
     pipe_through :browser
 
-    live_session :default, on_mount: [E2eWeb.ModeLive, E2eWeb.SharedEvents] do
+    live_session :default, on_mount: [E2eWeb.ModeLive, E2eWeb.ThemeLive, E2eWeb.SharedEvents] do
       live "/live/accordion", AccordionLive
       live "/playground/accordion", AccordionPlayLive
       live "/controlled/accordion", AccordionControlledLive
       live "/async/accordion", AccordionAsyncLive
       live "/live/checkbox", CheckboxLive
       live "/live/clipboard", ClipboardLive
+      live "/live/code", CodeLive
+      live "/live/action", ActionLive
+      live "/live/navigate", NavigateLive
       live "/live/collapsible", CollapsibleLive
       live "/live/combobox", ComboboxLive
       live "/live/combobox-fetch", ComboboxFetch
@@ -71,9 +75,13 @@ defmodule E2eWeb.Router do
     get "/", PageController, :home
 
     get "/accordion", PageController, :accordion_page
+    get "/action", PageController, :action_page
     get "/checkbox", PageController, :checkbox_page
 
     get "/clipboard", PageController, :clipboard_page
+    get "/code", PageController, :code_page
+
+    get "/navigate", PageController, :navigate_page
 
     get "/collapsible", PageController, :collapsible_page
 
@@ -109,7 +117,7 @@ defmodule E2eWeb.Router do
     get "/radio-group", PageController, :radio_group_page
     get "/timer", PageController, :timer_page
 
-    live_session :browser, on_mount: [E2eWeb.ModeLive, E2eWeb.SharedEvents] do
+    live_session :browser, on_mount: [E2eWeb.ModeLive, E2eWeb.ThemeLive, E2eWeb.SharedEvents] do
       live "/admins", AdminLive.Index, :index
       live "/admins/new", AdminLive.Form, :new
       live "/admins/:id", AdminLive.Show, :show
diff --git a/e2e/mix.exs b/e2e/mix.exs
index ee79b79..4ccaec4 100644
--- a/e2e/mix.exs
+++ b/e2e/mix.exs
@@ -68,6 +68,11 @@ defmodule E2e.MixProject do
       {:dns_cluster, "~> 0.2.0"},
       {:bandit, "~> 1.5"},
       {:corex, path: "../../corex"},
+      {:makeup, "~> 1.2"},
+      {:makeup_elixir, "~> 1.0.1 or ~> 1.1"},
+      {:makeup_html, "~> 0.2"},
+      {:makeup_css, "~> 0.2"},
+      {:makeup_js, "~> 0.1.0"},
       {:wallaby, "~> 0.30", only: :test},
       {:a11y_audit, "~> 0.3.1", only: :test},
       {:flagpack, "~> 0.6.0"},
diff --git a/e2e/mix.lock b/e2e/mix.lock
index 2b8311d..c7a1bbd 100644
--- a/e2e/mix.lock
+++ b/e2e/mix.lock
@@ -27,11 +27,17 @@
   "jason": {:hex, :jason, "1.4.4", "b9226785a9aa77b6857ca22832cffa5d5011a667207eb2a0ad56adb5db443b8a", [:mix], [{:decimal, "~> 1.0 or ~> 2.0", [hex: :decimal, repo: "hexpm", optional: true]}], "hexpm", "c5eb0cab91f094599f94d55bc63409236a8ec69a21a67814529e8d5f6cc90b3b"},
   "lazy_html": {:hex, :lazy_html, "0.1.10", "ffe42a0b4e70859cf21a33e12a251e0c76c1dff76391609bd56702a0ef5bc429", [:make, :mix], [{:cc_precompiler, "~> 0.1", [hex: :cc_precompiler, repo: "hexpm", optional: false]}, {:elixir_make, "~> 0.9.0", [hex: :elixir_make, repo: "hexpm", optional: false]}, {:fine, "~> 0.1.0", [hex: :fine, repo: "hexpm", optional: false]}], "hexpm", "50f67e5faa09d45a99c1ddf3fac004f051997877dc8974c5797bb5ccd8e27058"},
   "live_capture": {:hex, :live_capture, "0.2.7", "d06d636b468d3579c30dc6be35fea6c2f805b1e9d4dd67d8d96184ec6852ee60", [:mix], [{:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: false]}, {:phoenix_live_view, "~> 1.0", [hex: :phoenix_live_view, repo: "hexpm", optional: false]}], "hexpm", "e5d176d0b90292683faf5852dbd67a2d331f28430d39624754e209da20378e25"},
+  "makeup": {:hex, :makeup, "1.2.1", "e90ac1c65589ef354378def3ba19d401e739ee7ee06fb47f94c687016e3713d1", [:mix], [{:nimble_parsec, "~> 1.4", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "d36484867b0bae0fea568d10131197a4c2e47056a6fbe84922bf6ba71c8d17ce"},
+  "makeup_css": {:hex, :makeup_css, "0.2.3", "abbe801a520b88a0430684293f98745a7b082fb47c3902c61ec277a0fb7b79d7", [:mix], [{:makeup, "~> 1.1", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "656afcd4e96468311ac9b34ce4c91bb8521a48203afa33982d5f21edc012e79a"},
+  "makeup_elixir": {:hex, :makeup_elixir, "1.0.1", "e928a4f984e795e41e3abd27bfc09f51db16ab8ba1aebdba2b3a575437efafc2", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}, {:nimble_parsec, "~> 1.2.3 or ~> 1.3", [hex: :nimble_parsec, repo: "hexpm", optional: false]}], "hexpm", "7284900d412a3e5cfd97fdaed4f5ed389b8f2b4cb49efc0eb3bd10e2febf9507"},
+  "makeup_html": {:hex, :makeup_html, "0.2.0", "9f810da8d43d625ccd3f7ea25997e588fa541d80e0a8c6b895157ad5c7e9ca13", [:mix], [{:makeup, "~> 1.2", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "0856f7beb9a6a642ab1307e06d990fe39f0ba58690d0b8e662aa2e027ba331b2"},
+  "makeup_js": {:hex, :makeup_js, "0.1.0", "ffa8ce9db95d14dcd09045334539d5992d540d63598c592d4805b7674bdd6675", [:mix], [{:makeup, "~> 1.0", [hex: :makeup, repo: "hexpm", optional: false]}], "hexpm", "3f0c1a5eb52c9737b1679c926574e83bb260ccdedf08b58ee96cca7c685dea75"},
   "metrics": {:hex, :metrics, "1.0.1", "25f094dea2cda98213cecc3aeff09e940299d950904393b2a29d191c346a8486", [:rebar3], [], "hexpm", "69b09adddc4f74a40716ae54d140f93beb0fb8978d8636eaded0c31b6f099f16"},
   "mime": {:hex, :mime, "2.0.7", "b8d739037be7cd402aee1ba0306edfdef982687ee7e9859bee6198c1e7e2f128", [:mix], [], "hexpm", "6171188e399ee16023ffc5b76ce445eb6d9672e2e241d2df6050f3c771e80ccd"},
   "mimerl": {:hex, :mimerl, "1.4.0", "3882a5ca67fbbe7117ba8947f27643557adec38fa2307490c4c4207624cb213b", [:rebar3], [], "hexpm", "13af15f9f68c65884ecca3a3891d50a7b57d82152792f3e19d88650aa126b144"},
   "mint": {:hex, :mint, "1.7.1", "113fdb2b2f3b59e47c7955971854641c61f378549d73e829e1768de90fc1abf1", [:mix], [{:castore, "~> 0.1.0 or ~> 1.0", [hex: :castore, repo: "hexpm", optional: true]}, {:hpax, "~> 0.1.1 or ~> 0.2.0 or ~> 1.0", [hex: :hpax, repo: "hexpm", optional: false]}], "hexpm", "fceba0a4d0f24301ddee3024ae116df1c3f4bb7a563a731f45fdfeb9d39a231b"},
   "nimble_options": {:hex, :nimble_options, "1.1.1", "e3a492d54d85fc3fd7c5baf411d9d2852922f66e69476317787a7b2bb000a61b", [:mix], [], "hexpm", "821b2470ca9442c4b6984882fe9bb0389371b8ddec4d45a9504f00a66f650b44"},
+  "nimble_parsec": {:hex, :nimble_parsec, "1.4.2", "8efba0122db06df95bfaa78f791344a89352ba04baedd3849593bfce4d0dc1c6", [:mix], [], "hexpm", "4b21398942dda052b403bbe1da991ccd03a053668d147d53fb8c4e0efe09c973"},
   "nimble_pool": {:hex, :nimble_pool, "1.1.0", "bf9c29fbdcba3564a8b800d1eeb5a3c58f36e1e11d7b7fb2e084a643f645f06b", [:mix], [], "hexpm", "af2e4e6b34197db81f7aad230c1118eac993acc0dae6bc83bac0126d4ae0813a"},
   "parse_trans": {:hex, :parse_trans, "3.4.1", "6e6aa8167cb44cc8f39441d05193be6e6f4e7c2946cb2759f015f8c56b76e5ff", [:rebar3], [], "hexpm", "620a406ce75dada827b82e453c19cf06776be266f5a67cff34e1ef2cbb60e49a"},
   "phoenix": {:hex, :phoenix, "1.8.3", "49ac5e485083cb1495a905e47eb554277bdd9c65ccb4fc5100306b350151aa95", [:mix], [{:bandit, "~> 1.0", [hex: :bandit, repo: "hexpm", optional: true]}, {:jason, "~> 1.0", [hex: :jason, repo: "hexpm", optional: true]}, {:phoenix_pubsub, "~> 2.1", [hex: :phoenix_pubsub, repo: "hexpm", optional: false]}, {:phoenix_template, "~> 1.0", [hex: :phoenix_template, repo: "hexpm", optional: false]}, {:phoenix_view, "~> 2.0", [hex: :phoenix_view, repo: "hexpm", optional: true]}, {:plug, "~> 1.14", [hex: :plug, repo: "hexpm", optional: false]}, {:plug_cowboy, "~> 2.7", [hex: :plug_cowboy, repo: "hexpm", optional: true]}, {:plug_crypto, "~> 1.2 or ~> 2.0", [hex: :plug_crypto, repo: "hexpm", optional: false]}, {:telemetry, "~> 0.4 or ~> 1.0", [hex: :telemetry, repo: "hexpm", optional: false]}, {:websock_adapter, "~> 0.5.3", [hex: :websock_adapter, repo: "hexpm", optional: false]}], "hexpm", "36169f95cc2e155b78be93d9590acc3f462f1e5438db06e6248613f27c80caec"},
diff --git a/e2e/priv/code_examples/app.js b/e2e/priv/code_examples/app.js
new file mode 100644
index 0000000..2184af5
--- /dev/null
+++ b/e2e/priv/code_examples/app.js
@@ -0,0 +1,6 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const button = document.querySelector("button");
+  button?.addEventListener("click", () => {
+    console.log("Clicked!");
+  });
+});
diff --git a/e2e/priv/code_examples/component.html b/e2e/priv/code_examples/component.html
new file mode 100644
index 0000000..5b3ad8e
--- /dev/null
+++ b/e2e/priv/code_examples/component.html
@@ -0,0 +1,3 @@
+<div class="greeting">
+  <h1>Hello, <%= @name %>!</h1>
+</div>
diff --git a/e2e/priv/code_examples/hello.ex b/e2e/priv/code_examples/hello.ex
new file mode 100644
index 0000000..a242b2e
--- /dev/null
+++ b/e2e/priv/code_examples/hello.ex
@@ -0,0 +1,5 @@
+defmodule Hello do
+  def world do
+    "Hello, World!"
+  end
+end
diff --git a/e2e/priv/code_examples/styles.css b/e2e/priv/code_examples/styles.css
new file mode 100644
index 0000000..370ec50
--- /dev/null
+++ b/e2e/priv/code_examples/styles.css
@@ -0,0 +1,8 @@
+.greeting {
+  padding: 1rem;
+  background: var(--color-layer);
+}
+
+.greeting h1 {
+  font-size: 1.5rem;
+}
diff --git a/e2e/priv/static/images/apple-touch-icon-180x180-480d4b1992079367b6cda44422dcbc96.png b/e2e/priv/static/images/apple-touch-icon-180x180-480d4b1992079367b6cda44422dcbc96.png
new file mode 100644
index 0000000..13b654c
Binary files /dev/null and b/e2e/priv/static/images/apple-touch-icon-180x180-480d4b1992079367b6cda44422dcbc96.png differ
diff --git a/e2e/priv/static/images/avatar-bad9d852614f92cdfb9e547ffaede5ae.png b/e2e/priv/static/images/avatar-bad9d852614f92cdfb9e547ffaede5ae.png
new file mode 100644
index 0000000..cd084b0
Binary files /dev/null and b/e2e/priv/static/images/avatar-bad9d852614f92cdfb9e547ffaede5ae.png differ
diff --git a/e2e/priv/static/images/beach-53c468d9dab6f884c050d58958e6c3d2.jpg b/e2e/priv/static/images/beach-53c468d9dab6f884c050d58958e6c3d2.jpg
new file mode 100644
index 0000000..3a2e18f
Binary files /dev/null and b/e2e/priv/static/images/beach-53c468d9dab6f884c050d58958e6c3d2.jpg differ
diff --git a/e2e/priv/static/images/corex-ui-og-8952a72b82157d452a54bfc82c001011.jpg b/e2e/priv/static/images/corex-ui-og-8952a72b82157d452a54bfc82c001011.jpg
new file mode 100644
index 0000000..2a0dc6e
Binary files /dev/null and b/e2e/priv/static/images/corex-ui-og-8952a72b82157d452a54bfc82c001011.jpg differ
diff --git a/e2e/priv/static/images/fall-5f37212ea29d4300569b148c4b2eb2bc.jpg b/e2e/priv/static/images/fall-5f37212ea29d4300569b148c4b2eb2bc.jpg
new file mode 100644
index 0000000..1cbbd98
Binary files /dev/null and b/e2e/priv/static/images/fall-5f37212ea29d4300569b148c4b2eb2bc.jpg differ
diff --git a/e2e/priv/static/images/favicon-7e94605551aa8aa20243bed3756d9343.ico b/e2e/priv/static/images/favicon-7e94605551aa8aa20243bed3756d9343.ico
new file mode 100644
index 0000000..a263d84
Binary files /dev/null and b/e2e/priv/static/images/favicon-7e94605551aa8aa20243bed3756d9343.ico differ
diff --git a/e2e/priv/static/images/maskable-icon-512x512-1e9be444ed2d780f521ab103340c3f15.png b/e2e/priv/static/images/maskable-icon-512x512-1e9be444ed2d780f521ab103340c3f15.png
new file mode 100644
index 0000000..db67fc0
Binary files /dev/null and b/e2e/priv/static/images/maskable-icon-512x512-1e9be444ed2d780f521ab103340c3f15.png differ
diff --git a/e2e/priv/static/images/pwa-192x192-d874e80476b7bb8610a27acd76e24c58.png b/e2e/priv/static/images/pwa-192x192-d874e80476b7bb8610a27acd76e24c58.png
new file mode 100644
index 0000000..029c1a9
Binary files /dev/null and b/e2e/priv/static/images/pwa-192x192-d874e80476b7bb8610a27acd76e24c58.png differ
diff --git a/e2e/priv/static/images/pwa-512x512-b05b19fb9e7210bcde2ed7bdfa24bc27.png b/e2e/priv/static/images/pwa-512x512-b05b19fb9e7210bcde2ed7bdfa24bc27.png
new file mode 100644
index 0000000..039fe66
Binary files /dev/null and b/e2e/priv/static/images/pwa-512x512-b05b19fb9e7210bcde2ed7bdfa24bc27.png differ
diff --git a/e2e/priv/static/images/pwa-64x64-e3204a9e30605560ebcf76a7280099a0.png b/e2e/priv/static/images/pwa-64x64-e3204a9e30605560ebcf76a7280099a0.png
new file mode 100644
index 0000000..5e21a1b
Binary files /dev/null and b/e2e/priv/static/images/pwa-64x64-e3204a9e30605560ebcf76a7280099a0.png differ
diff --git a/e2e/priv/static/images/sand-cb1e068d7c2553040ad21f38a607ef92.jpg b/e2e/priv/static/images/sand-cb1e068d7c2553040ad21f38a607ef92.jpg
new file mode 100644
index 0000000..2732344
Binary files /dev/null and b/e2e/priv/static/images/sand-cb1e068d7c2553040ad21f38a607ef92.jpg differ
diff --git a/e2e/priv/static/images/star-1981517c7246c2e0e2de660489b98c6d.jpg b/e2e/priv/static/images/star-1981517c7246c2e0e2de660489b98c6d.jpg
new file mode 100644
index 0000000..973d492
Binary files /dev/null and b/e2e/priv/static/images/star-1981517c7246c2e0e2de660489b98c6d.jpg differ
diff --git a/e2e/priv/static/images/winter-e3e112f7d35ec9131ea2063c45eef8b9.jpg b/e2e/priv/static/images/winter-e3e112f7d35ec9131ea2063c45eef8b9.jpg
new file mode 100644
index 0000000..4182857
Binary files /dev/null and b/e2e/priv/static/images/winter-e3e112f7d35ec9131ea2063c45eef8b9.jpg differ
diff --git a/e2e/test/components/action_test.exs b/e2e/test/components/action_test.exs
new file mode 100644
index 0000000..cd5f072
--- /dev/null
+++ b/e2e/test/components/action_test.exs
@@ -0,0 +1,16 @@
+defmodule E2eWeb.ActionTest do
+  use ExUnit.Case, async: true
+  use Wallaby.Feature
+
+  alias E2eWeb.ActionModel, as: Action
+
+  for mode <- [:static, :live] do
+    @mode mode
+
+    feature "#{@mode} - Action has no A11y violations", %{session: session} do
+      session
+      |> Action.goto(@mode)
+      |> Action.check_accessibility()
+    end
+  end
+end
diff --git a/e2e/test/components/code_test.exs b/e2e/test/components/code_test.exs
new file mode 100644
index 0000000..32d9e5e
--- /dev/null
+++ b/e2e/test/components/code_test.exs
@@ -0,0 +1,16 @@
+defmodule E2eWeb.CodeTest do
+  use ExUnit.Case, async: true
+  use Wallaby.Feature
+
+  alias E2eWeb.CodeModel, as: Code
+
+  for mode <- [:static, :live] do
+    @mode mode
+
+    feature "#{@mode} - Code has no A11y violations", %{session: session} do
+      session
+      |> Code.goto(@mode)
+      |> Code.check_accessibility()
+    end
+  end
+end
diff --git a/e2e/test/components/navigate_test.exs b/e2e/test/components/navigate_test.exs
new file mode 100644
index 0000000..42a2d1c
--- /dev/null
+++ b/e2e/test/components/navigate_test.exs
@@ -0,0 +1,16 @@
+defmodule E2eWeb.NavigateTest do
+  use ExUnit.Case, async: true
+  use Wallaby.Feature
+
+  alias E2eWeb.NavigateModel, as: Navigate
+
+  for mode <- [:static, :live] do
+    @mode mode
+
+    feature "#{@mode} - Navigate has no A11y violations", %{session: session} do
+      session
+      |> Navigate.goto(@mode)
+      |> Navigate.check_accessibility()
+    end
+  end
+end
diff --git a/e2e/test/support/models/action_model.ex b/e2e/test/support/models/action_model.ex
new file mode 100644
index 0000000..6e9802d
--- /dev/null
+++ b/e2e/test/support/models/action_model.ex
@@ -0,0 +1,3 @@
+defmodule E2eWeb.ActionModel do
+  use E2eWeb.Model, component: "action"
+end
diff --git a/e2e/test/support/models/code_model.ex b/e2e/test/support/models/code_model.ex
new file mode 100644
index 0000000..ad61d48
--- /dev/null
+++ b/e2e/test/support/models/code_model.ex
@@ -0,0 +1,3 @@
+defmodule E2eWeb.CodeModel do
+  use E2eWeb.Model, component: "code"
+end
diff --git a/e2e/test/support/models/navigate_model.ex b/e2e/test/support/models/navigate_model.ex
new file mode 100644
index 0000000..04a3985
--- /dev/null
+++ b/e2e/test/support/models/navigate_model.ex
@@ -0,0 +1,3 @@
+defmodule E2eWeb.NavigateModel do
+  use E2eWeb.Model, component: "navigate"
+end
diff --git a/guides/installation.md b/guides/installation.md
index 747f725..117d2a1 100644
--- a/guides/installation.md
+++ b/guides/installation.md
@@ -44,7 +44,7 @@ Add `corex` to your `mix.exs` dependencies:
 ```elixir
 def deps do
   [
-    {:corex, "~> 0.1.0-alpha.26"}
+    {:corex, "~> 0.1.0-alpha.27"}
   ]
 end
 ```
diff --git a/guides/theming.md b/guides/theming.md
new file mode 100644
index 0000000..17d41f7
--- /dev/null
+++ b/guides/theming.md
@@ -0,0 +1,202 @@
+# Theming
+
+## Introduction
+
+This guide explains how to set up **theme selection** using the `data-theme` attribute and the `Corex.Select` component in Phoenix LiveView.
+
+Theme (neo, uno, duo, leo) is independent from mode (light/dark). The CSS token system uses both: `[data-theme="neo"][data-mode="dark"]`. See [Dark Mode](dark_mode.html) for mode setup.
+
+This approach uses [Plugs](https://hexdocs.pm/plug/Plug.html) to load the correct theme on initial render, avoiding FOUC (Flash of Unstyled Content).
+
+---
+
+## Implementation
+
+### 1. Create the Theme Plug
+
+Create a plug that reads the theme from the `phx_theme` cookie and puts it in assigns and session:
+
+```elixir
+defmodule MyAppWeb.Plugs.Theme do
+  @moduledoc """
+  Reads the theme from the phx_theme cookie and puts it in assigns and session.
+  Allows the server to render the correct theme in the initial HTML (no flash).
+  """
+  import Plug.Conn
+
+  @valid_themes ~w(neo uno duo leo)
+
+  def init(opts), do: opts
+
+  def call(conn, _opts) do
+    theme =
+      conn.cookies["phx_theme"]
+      |> parse_theme()
+
+    conn
+    |> assign(:theme, theme)
+    |> put_session(:theme, theme)
+  end
+
+  defp parse_theme(nil), do: "neo"
+  defp parse_theme(theme) when theme in @valid_themes, do: theme
+  defp parse_theme(_), do: "neo"
+end
+```
+
+### 2. Add the Plug to Your Router
+
+Add the Theme plug to your browser pipeline, after the Mode plug:
+
+```elixir
+pipeline :browser do
+  plug :accepts, ["html"]
+  plug :fetch_session
+  plug :fetch_live_flash
+  plug MyAppWeb.Plugs.Mode
+  plug MyAppWeb.Plugs.Theme
+  plug :put_root_layout, html: {MyAppWeb.Layouts, :root}
+  plug :protect_from_forgery
+  plug :put_secure_browser_headers
+end
+```
+
+### 3. Create the Theme Live Hook
+
+Create a LiveView hook that assigns the theme from the session:
+
+```elixir
+defmodule MyAppWeb.ThemeLive do
+  @moduledoc """
+  Assigns the theme from the session to the LiveView socket.
+  """
+  def on_mount(:default, _params, session, socket) do
+    theme = session["theme"] || "neo"
+
+    {:cont, Phoenix.Component.assign(socket, :theme, theme)}
+  end
+end
+```
+
+Add it to your live sessions:
+
+```elixir
+live_session :default, on_mount: [MyAppWeb.ModeLive, MyAppWeb.ThemeLive, MyAppWeb.SharedEvents] do
+  live "/", PageLive, :index
+end
+```
+
+### 4. Configure Your Root Layout
+
+Update your `root.html.heex` to use a dynamic `data-theme` attribute and add the theme script (alongside the mode script):
+
+```heex
+<html lang="en" data-theme={assigns[:theme] || "neo"} data-mode={assigns[:mode] || "light"}>
+  <head>
+    <script>
+      (() => {
+        const validThemes = ["neo", "uno", "duo", "leo"];
+        const setTheme = (theme) => {
+          const resolved = validThemes.includes(theme) ? theme : "neo";
+          localStorage.setItem("phx:theme", resolved);
+          document.cookie = "phx_theme=" + resolved + "; path=/; max-age=31536000";
+          document.documentElement.setAttribute("data-theme", resolved);
+        };
+
+        setTheme(localStorage.getItem("phx:theme") || document.documentElement.getAttribute("data-theme") || "neo");
+
+        window.addEventListener("storage", (e) => e.key === "phx:theme" && e.newValue && setTheme(e.newValue));
+
+        window.addEventListener("phx:set-theme", (e) => {
+          const value = e.detail?.value;
+          const theme = Array.isArray(value) && value[0] ? value[0] : "neo";
+          setTheme(theme);
+        });
+      })();
+    </script>
+  </head>
+  <body>
+    {@inner_content}
+  </body>
+</html>
+```
+
+### 5. Theme Select Component
+
+Add a theme switcher using the Select component:
+
+```elixir
+attr :theme, :string,
+  default: "neo",
+  values: ["neo", "uno", "duo", "leo"],
+  doc: "the theme from cookie/session"
+
+def theme_toggle(assigns) do
+  ~H"""
+  <.select
+    id="theme-select"
+    class="select select--sm select--micro"
+    collection={[
+      %{id: "neo", label: "Neo"},
+      %{id: "uno", label: "Uno"},
+      %{id: "duo", label: "Duo"},
+      %{id: "leo", label: "Leo"}
+    ]}
+    value={[@theme]}
+    on_value_change_client="phx:set-theme"
+  >
+    <:label class="sr-only">
+      Theme
+    </:label>
+    <:item :let={item}>
+      {item.label}
+    </:item>
+    <:trigger>
+      <.icon name="hero-swatch" />
+    </:trigger>
+    <:item_indicator>
+      <.icon name="hero-check" />
+    </:item_indicator>
+  </.select>
+  """
+end
+```
+
+### 6. Styling
+
+Import all theme CSS files so switching works. Each theme has light and dark variants, combined with `data-mode`:
+
+```css
+@import "../corex/tokens/themes/neo/light.css";
+@import "../corex/tokens/themes/neo/dark.css";
+@import "../corex/tokens/themes/uno/light.css";
+@import "../corex/tokens/themes/uno/dark.css";
+@import "../corex/tokens/themes/duo/light.css";
+@import "../corex/tokens/themes/duo/dark.css";
+@import "../corex/tokens/themes/leo/light.css";
+@import "../corex/tokens/themes/leo/dark.css";
+```
+
+---
+
+## Available Themes
+
+- **neo** – default
+- **uno**
+- **duo**
+- **leo**
+
+Theme and mode are independent. The active selector is `[data-theme="neo"][data-mode="dark"]` for Neo in dark mode.
+
+---
+
+## Summary
+
+1. The theme is read from the `phx_theme` cookie on initial load (via Theme plug)
+2. The theme is stored in assigns and session
+3. A client-side script in `root.html.heex` initializes and persists the theme
+4. LiveView receives the theme via the ThemeLive `on_mount` hook
+5. The Select component dispatches `phx:set-theme` on change
+6. Both cookie and localStorage stay in sync for server and client
+
+Theme logic is separate from mode logic: use distinct plugs, hooks, cookies, and scripts for each.
diff --git a/lib/components/action.ex b/lib/components/action.ex
new file mode 100644
index 0000000..773b832
--- /dev/null
+++ b/lib/components/action.ex
@@ -0,0 +1,66 @@
+defmodule Corex.Action do
+  @moduledoc """
+  Renders a button element for actions based of Phoenix Core Components.
+  Use the `type` attribute to set the button type.
+  Icon-only buttons must pass `aria_label` to screen readers.
+
+  ## Examples
+    ```elixir
+    <.action>Send!</.action>
+    <.action phx-click="go">Send!</.action>
+    <.action type="submit">Save</.action>
+    <.action aria_label="Close dialog">
+      <.icon name="hero-x-mark" aria-hidden="true" />
+    </.action>
+    ```
+
+  ## Styling
+
+  If you wish to use the default Corex styling, you can use the class `button` on the component.
+  This requires to install `Mix.Tasks.Corex.Design` first and import the component css file.
+
+  ```css
+  @import "../corex/main.css";
+  @import "../corex/tokens/themes/neo/light.css";
+  @import "../corex/components/button.css";
+  ```
+
+  You can then use modifiers
+
+  ```heex
+  <.action class="button button--accent button--lg">
+  ```
+
+  Learn more about modifiers and [Corex Design](https://corex-ui.com/components/button#modifiers)
+  """
+
+  @doc type: :component
+  use Phoenix.Component
+
+  attr(:type, :string,
+    default: "button",
+    values: ["button", "submit", "reset"],
+    doc: "The button type, defaults to button to prevent accidental form submissions"
+  )
+
+  attr(:aria_label, :string,
+    default: nil,
+    doc: "Required for icon-only buttons, describes the button to screen readers"
+  )
+
+  attr(:disabled, :boolean, default: false, doc: "Disables the button")
+
+  attr(:rest, :global,
+    include: ~w(class name value form phx-click phx-submit phx-disable-with phx-value)
+  )
+
+  slot(:inner_block, required: true)
+
+  def action(assigns) do
+    ~H"""
+    <button type={@type} aria-label={@aria_label} disabled={@disabled} {@rest}>
+      {render_slot(@inner_block)}
+    </button>
+    """
+  end
+end
diff --git a/lib/components/clipboard.ex b/lib/components/clipboard.ex
index 414f467..0168ff1 100644
--- a/lib/components/clipboard.ex
+++ b/lib/components/clipboard.ex
@@ -159,6 +159,11 @@ defmodule Corex.Clipboard do
       "Accessible name for the input when it's not associated with a visible label (e.g. \"Value to copy\")"
   )
 
+  attr(:input, :boolean,
+    default: true,
+    doc: "Whether to render the input element. Set to false when using only the trigger to copy."
+  )
+
   attr(:rest, :global)
 
   slot :label, required: false do
@@ -198,6 +203,7 @@ defmodule Corex.Clipboard do
         </label>
         <div {Connect.control(%Control{id: @id, dir: @dir})}>
           <input
+            :if={@input}
             {Connect.input(%Input{id: @id, dir: @dir, value: @value})}
             aria-label={@input_aria_label}
           />
diff --git a/lib/components/code.ex b/lib/components/code.ex
new file mode 100644
index 0000000..a6b89b5
--- /dev/null
+++ b/lib/components/code.ex
@@ -0,0 +1,156 @@
+defmodule Corex.Code do
+  @moduledoc ~S'''
+  Displays syntax-highlighted code with Makeup.
+
+  ## Installation
+
+  Add `makeup` and the lexer packages for each language you use:
+
+  ```elixir
+  defp deps do
+    [
+      {:makeup, "~> 1.2"},
+      {:makeup_elixir, "~> 1.0.1 or ~> 1.1"},
+      {:makeup_html, "~> 1.0"},
+      {:makeup_css, "~> 1.0"},
+      {:makeup_js, "~> 1.0"}
+    ]
+  end
+  ```
+
+  Only `makeup` is required. Add the lexer packages you need; without a lexer, code renders as plain escaped text.
+
+  ## Examples
+
+  ### Basic Usage
+
+  ```heex
+  <.code code="def hello, do: :world" />
+  ```
+
+  ### Multi-line with heredoc
+
+  Use `"""` heredoc for readable multi-line code in templates:
+
+  ```heex
+  <.code code={"""
+  defmodule Hello do
+    def world, do: "Hello, World!"
+  end
+  """} />
+  ```
+
+  ### Loading from a file
+
+  ```heex
+  <.code code={File.read!("priv/code_examples/example.ex")} language={:elixir} />
+  ```
+
+  Or in a controller, load the file and pass the contents:
+
+  ```elixir
+  def my_page(conn, _params) do
+    code = File.read!("priv/code_examples/example.ex")
+
+    render(conn, :my_page, code: code)
+  end
+  ```
+
+  ```heex
+  <.code code={@code} language={:elixir} />
+  ```
+
+  The `language` attribute maps to Makeup's registry (e.g. `:elixir` → `"elixir"`).
+  Add the corresponding lexer package to your deps for each language. Without it, code renders as plain escaped text.
+
+  ## Styling
+
+  Use data attributes to target elements:
+
+  ```css
+  [data-scope="code"][data-part="root"] {}
+  [data-scope="code"][data-part="content"] {}
+  ```
+
+  With Corex Design (`mix corex.design`), syntax highlighting styles are included in
+  `code.css`. Nothing else is required.
+
+  Without Corex Design, run `mix corex.code` to generate the Makeup stylesheet and
+  import it in your CSS:
+
+  ```bash
+  mix corex.code
+  mix corex.code assets/styles/syntax.css
+  mix corex.code --force
+  ```
+
+  ```css
+  @import "./code_highlight.css";
+  ```
+  '''
+
+  @doc type: :component
+  use Phoenix.Component
+
+  attr(:code, :string, required: true, doc: "The raw source code to display")
+
+  attr(:language, :atom,
+    default: :elixir,
+    doc:
+      "The language name in Makeup's registry (e.g. :elixir, :html). Add the lexer package to deps; otherwise renders as plain escaped text."
+  )
+
+  attr(:rest, :global)
+
+  def code(assigns) do
+    makeup = Module.concat(["Elixir", "Makeup"])
+
+    unless Code.ensure_loaded?(makeup) do
+      raise """
+      Corex.Code requires makeup.
+
+      Add it to your mix.exs:
+
+        {:makeup, "~> 1.2"}
+
+      Add lexer packages for each language you use (e.g. makeup_elixir, makeup_html).
+      """
+    end
+
+    assigns =
+      assigns
+      |> assign(:lexer, lexer_for(assigns.language))
+      |> then(&assign(&1, :highlighted_html, highlight_code(&1)))
+
+    ~H"""
+    <div data-scope="code" data-part="root" {@rest}>
+      <div data-scope="code" data-part="content">
+        <pre class="highlight" tabindex="0"><code>{Phoenix.HTML.raw(@highlighted_html)}</code></pre>
+      </div>
+    </div>
+    """
+  end
+
+  defp lexer_for(language) do
+    name = to_string(language)
+    registry = Module.concat(["Elixir", "Makeup", "Registry"])
+
+    case apply(registry, :fetch_lexer_by_name, [name]) do
+      {:ok, {lexer, _opts}} -> lexer
+      :error -> nil
+    end
+  end
+
+  defp highlight_code(assigns) do
+    case assigns.lexer do
+      nil ->
+        assigns.code
+        |> Phoenix.HTML.html_escape()
+        |> Phoenix.HTML.safe_to_string()
+
+      lexer ->
+        makeup = Module.concat(["Elixir", "Makeup"])
+        apply(makeup, :highlight_inner_html, [assigns.code, [lexer: lexer]])
+    end
+  end
+end
diff --git a/lib/components/combobox.ex b/lib/components/combobox.ex
index c09dce3..8427018 100644
--- a/lib/components/combobox.ex
+++ b/lib/components/combobox.ex
@@ -131,7 +131,7 @@ defmodule Corex.Combobox do
 
   ### Server-side Filtering
 
-  Use `on_input_value_change` to filter on the server. This example uses a local list; replace with a database query for real apps.
+  Disable client filtering with `disabled={false}` and use `on_input_value_change` to filter on the server. This example uses a local list; replace with a database query for real apps.
 
   ```heex
   defmodule MyAppWeb.CountryCombobox do
@@ -168,6 +168,7 @@ defmodule Corex.Combobox do
       <.combobox
         id="country-combobox"
         collection={@items}
+        filter={false}
         on_input_value_change="search"
       >
         <:empty>No results</:empty>
diff --git a/lib/components/listbox/connect.ex b/lib/components/listbox/connect.ex
index 1e2c7b6..3d2d6a0 100644
--- a/lib/components/listbox/connect.ex
+++ b/lib/components/listbox/connect.ex
@@ -89,7 +89,7 @@ defmodule Corex.Listbox.Connect do
       "data-scope" => "listbox",
       "data-part" => "label",
       "dir" => assigns.dir,
-      "id" => "select:#{assigns.id}:label"
+      "id" => "listbox:#{assigns.id}:label"
     }
   end
 
diff --git a/lib/components/navigate.ex b/lib/components/navigate.ex
new file mode 100644
index 0000000..9976a18
--- /dev/null
+++ b/lib/components/navigate.ex
@@ -0,0 +1,109 @@
+defmodule Corex.Navigate do
+  @moduledoc """
+  Renders an anchor element for navigation based of Phoenix Core Components and Phoenix Link
+
+  Supports plain href, LiveView navigate, and LiveView patch.
+  External links should be flagged with the `external` attribute.
+  Icon-only links must pass `aria_label` to screen readers.
+
+  ## Examples
+
+  ```heex
+      <.navigate to="/about">About</.navigate>
+      <.navigate to={~p"/dashboard"} type="navigate">Dashboard</.navigate>
+      <.navigate to={~p"/items"} type="patch">Filter</.navigate>
+      <.navigate to="https://example.com" external>
+        External
+        <svg aria-label="Opens in a new window" ...>...</svg>
+      </.navigate>
+      <.navigate to="/file.pdf" download="report.pdf">
+        Download PDF
+        <svg aria-label="Download PDF, 2MB" ...>...</svg>
+      </.navigate>
+      <.navigate to="/profile" aria_label="View profile">
+        <svg aria-hidden="true" ...>...</svg>
+      </.navigate>
+    ```
+
+  ## Styling
+
+  If you wish to use the default Corex styling, you can use the class `link` on the component.
+  This requires to install `Mix.Tasks.Corex.Design` first and import the component css file.
+
+  ```css
+  @import "../corex/main.css";
+  @import "../corex/tokens/themes/neo/light.css";
+  @import "../corex/components/link.css";
+  ```
+
+  You can then use modifiers
+
+  ```heex
+  <.navigate class="link link--accent link--lg">
+  ```
+
+  Learn more about modifiers and [Corex Design](https://corex-ui.com/components/link#modifiers)
+  """
+
+  @doc type: :component
+  use Phoenix.Component
+
+  attr(:to, :string, required: true, doc: "The destination URL")
+
+  attr(:type, :string,
+    default: "href",
+    values: ["href", "navigate", "patch"],
+    doc: "The navigation type, defaults to href"
+  )
+
+  attr(:external, :boolean,
+    default: false,
+    doc:
+      "Marks the link as external, only valid with type=\"href\". Adds target=\"_blank\" and rel=\"noopener noreferrer\""
+  )
+
+  attr(:download, :any,
+    default: nil,
+    doc: "Prompts the browser to download the target, accepts a boolean or filename string"
+  )
+
+  attr(:aria_label, :string,
+    default: nil,
+    doc: "Required for icon-only links, describes the link to screen readers"
+  )
+
+  attr(:rest, :global, include: ~w(class method replace))
+  slot(:inner_block, required: true)
+
+  def navigate(%{rest: %{replace: _}, type: "href"} = assigns) do
+    IO.warn("<.navigate> replace has no effect with type=\"href\"")
+    navigate(Map.update!(assigns, :rest, &Map.delete(&1, :replace)))
+  end
+
+  def navigate(%{rest: %{method: _}, type: type} = assigns) when type in ["navigate", "patch"] do
+    IO.warn("<.navigate> method has no effect with type=\"#{type}\"")
+    navigate(Map.update!(assigns, :rest, &Map.delete(&1, :method)))
+  end
+
+  def navigate(%{external: true, type: type} = assigns) when type in ["navigate", "patch"] do
+    IO.warn("<.navigate> external has no effect with type=\"#{type}\"")
+    navigate(%{assigns | external: false})
+  end
+
+  def navigate(assigns) do
+    ~H"""
+    <.link
+      href={@type == "href" && @to}
+      navigate={@type == "navigate" && @to}
+      patch={@type == "patch" && @to}
+      download={@download}
+      aria-label={@aria_label}
+      target={@external && "_blank"}
+      rel={@external && "noopener noreferrer"}
+      {@rest}
+    >
+      {render_slot(@inner_block)}
+    </.link>
+    """
+  end
+end
diff --git a/lib/corex.ex b/lib/corex.ex
index 8cf9edb..db6bfaf 100644
--- a/lib/corex.ex
+++ b/lib/corex.ex
@@ -2,47 +2,45 @@ defmodule Corex do
   @moduledoc false
 
   @components %{
-    accordion:
-      {Corex.Accordion,
-       [
-         accordion: 1,
-         accordion_skeleton: 1
-       ]},
-    combobox: {Corex.Combobox, [combobox: 1]},
-    switch: {Corex.Switch, [switch: 1]},
-    toggle_group: {Corex.ToggleGroup, [toggle_group: 1]},
-    toast:
-      {Corex.Toast,
-       [
-         toast_group: 1,
-         toast_client_error: 1,
-         toast_server_error: 1,
-         toast_connected: 1,
-         toast_disconnected: 1
-       ]},
-    form: {Corex.Form, [get_form_id: 1]},
-    select: {Corex.Select, [select: 1]},
+    accordion: {Corex.Accordion, [accordion: 1, accordion_skeleton: 1]},
+    action: {Corex.Action, [action: 1]},
+    angle_slider: {Corex.AngleSlider, [angle_slider: 1]},
+    avatar: {Corex.Avatar, [avatar: 1]},
+    carousel: {Corex.Carousel, [carousel: 1]},
     checkbox: {Corex.Checkbox, [checkbox: 1]},
-    tabs: {Corex.Tabs, [tabs: 1, tabs_trigger: 1, tabs_content: 1]},
     clipboard: {Corex.Clipboard, [clipboard: 1]},
+    code: {Corex.Code, [code: 1]},
     collapsible: {Corex.Collapsible, [collapsible: 1]},
+    combobox: {Corex.Combobox, [combobox: 1]},
+    date_picker: {Corex.DatePicker, [date_picker: 1]},
     dialog:
       {Corex.Dialog, [dialog: 1, dialog_title: 1, dialog_description: 1, dialog_close_trigger: 1]},
-    date_picker: {Corex.DatePicker, [date_picker: 1]},
-    signature_pad: {Corex.SignaturePad, [signature_pad: 1]},
-    menu: {Corex.Menu, [menu: 1]},
-    tree_view: {Corex.TreeView, [tree_view: 1, tree_item: 1, tree_branch: 1]},
-    angle_slider: {Corex.AngleSlider, [angle_slider: 1]},
-    avatar: {Corex.Avatar, [avatar: 1]},
-    carousel: {Corex.Carousel, [carousel: 1]},
     editable: {Corex.Editable, [editable: 1]},
     floating_panel: {Corex.FloatingPanel, [floating_panel: 1]},
+    form: {Corex.Form, [get_form_id: 1]},
     listbox: {Corex.Listbox, [listbox: 1]},
+    menu: {Corex.Menu, [menu: 1]},
+    navigate: {Corex.Navigate, [navigate: 1]},
     number_input: {Corex.NumberInput, [number_input: 1]},
     password_input: {Corex.PasswordInput, [password_input: 1]},
     pin_input: {Corex.PinInput, [pin_input: 1]},
     radio_group: {Corex.RadioGroup, [radio_group: 1]},
-    timer: {Corex.Timer, [timer: 1]}
+    select: {Corex.Select, [select: 1]},
+    signature_pad: {Corex.SignaturePad, [signature_pad: 1]},
+    switch: {Corex.Switch, [switch: 1]},
+    tabs: {Corex.Tabs, [tabs: 1, tabs_trigger: 1, tabs_content: 1]},
+    timer: {Corex.Timer, [timer: 1]},
+    toast:
+      {Corex.Toast,
+       [
+         toast_group: 1,
+         toast_client_error: 1,
+         toast_server_error: 1,
+         toast_connected: 1,
+         toast_disconnected: 1
+       ]},
+    toggle_group: {Corex.ToggleGroup, [toggle_group: 1]},
+    tree_view: {Corex.TreeView, [tree_view: 1, tree_item: 1, tree_branch: 1]}
   }
 
   defmacro __using__(opts \\ []) do
diff --git a/lib/mix/tasks/corex.code.ex b/lib/mix/tasks/corex.code.ex
new file mode 100644
index 0000000..a7199d3
--- /dev/null
+++ b/lib/mix/tasks/corex.code.ex
@@ -0,0 +1,91 @@
+defmodule Mix.Tasks.Corex.Code do
+  use Mix.Task
+
+  @shortdoc "Generate and copy Makeup syntax highlighting stylesheet to your project"
+
+  @default_path "assets/css/code_highlight.css"
+
+  @moduledoc """
+  Generates the full Makeup syntax highlighting stylesheet and writes it to your project.
+
+  Run when you add or update Makeup language packages (e.g. makeup_elixir, makeup_html, makeup_css).
+
+  Requires `makeup` and `makeup_elixir` in your deps.
+
+  ## Examples
+
+      # Default path (assets/css/code_highlight.css)
+      mix corex.code
+
+      # Custom path and filename
+      mix corex.code assets/styles/syntax.css
+
+      # Override if file already exists
+      mix corex.code --force
+      mix corex.code assets/css/code_highlight.css --force
+
+  ## Import
+
+  Add the generated file to your CSS (e.g. assets/css/app.css):
+
+      @import "./code_highlight.css";
+
+  Works with or without Corex Design. For unstyled projects, import only the highlight file.
+  """
+
+  @impl Mix.Task
+  def run(args) do
+    Mix.Task.run("app.start")
+
+    {opts, paths, _} =
+      OptionParser.parse(args, switches: [force: :boolean])
+
+    path = List.first(paths) || @default_path
+    force = Keyword.get(opts, :force, false)
+    full_path = Path.expand(path, File.cwd!())
+
+    validate_makeup!()
+    validate_path!(full_path, force)
+    generate!(full_path)
+
+    Mix.shell().info("Makeup stylesheet written to: #{path}")
+  end
+
+  defp validate_makeup! do
+    makeup = Module.concat(["Elixir", "Makeup"])
+
+    unless Code.ensure_loaded?(makeup) do
+      Mix.raise("""
+      Makeup is not available. Add to your mix.exs:
+
+        defp deps do
+          [
+            {:makeup, "~> 1.2"},
+            {:makeup_elixir, "~> 1.0.1 or ~> 1.1"}
+          ]
+        end
+      """)
+    end
+  end
+
+  defp validate_path!(full_path, force) do
+    if File.exists?(full_path) and not force do
+      Mix.raise("""
+      #{full_path} already exists.
+
+      Re-run with --force to overwrite.
+      """)
+    end
+  end
+
+  defp generate!(full_path) do
+    makeup = Module.concat(["Elixir", "Makeup"])
+    stylesheet = apply(makeup, :stylesheet, [:default_style])
+
+    full_path
+    |> Path.dirname()
+    |> File.mkdir_p!()
+
+    File.write!(full_path, stylesheet)
+  end
+end
diff --git a/mix.exs b/mix.exs
index 728d368..e00d53b 100644
--- a/mix.exs
+++ b/mix.exs
@@ -1,7 +1,7 @@
 defmodule Corex.MixProject do
   use Mix.Project
 
-  @version "0.1.0-alpha.26"
+  @version "0.1.0-alpha.27"
   @elixir_requirement "~> 1.15"
 
   def project do
@@ -96,6 +96,7 @@ defmodule Corex.MixProject do
       main: "Corex",
       extras: [
         "guides/installation.md",
+        "guides/theming.md",
         "guides/dark_mode.md",
         "guides/locale.md",
         "guides/rtl.md",
@@ -116,11 +117,13 @@ defmodule Corex.MixProject do
     [
       Components: [
         Corex.Accordion,
+        Corex.Action,
         Corex.AngleSlider,
         Corex.Avatar,
         Corex.Carousel,
         Corex.Checkbox,
         Corex.Clipboard,
+        Corex.Code,
         Corex.Combobox,
         Corex.Collapsible,
         Corex.DatePicker,
@@ -129,6 +132,7 @@ defmodule Corex.MixProject do
         Corex.FloatingPanel,
         Corex.Listbox,
         Corex.Menu,
+        Corex.Navigate,
         Corex.NumberInput,
         Corex.PasswordInput,
         Corex.PinInput,
diff --git a/package.json b/package.json
index b5553d4..38e26e6 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "corex",
-  "version": "0.1.0-alpha.26",
+  "version": "0.1.0-alpha.27",
   "description": "The official JavaScript client for the Corex Phoenix Hooks.",
   "license": "MIT",
   "module": "./priv/static/corex.mjs",
@@ -62,36 +62,36 @@
     "@eslint/js": "^9.39.2",
     "@typescript-eslint/eslint-plugin": "^8.0.0",
     "@typescript-eslint/parser": "^8.0.0",
-"@zag-js/accordion": "^1.34.0",
-    "@zag-js/angle-slider": "^1.34.0",
-    "@zag-js/avatar": "^1.34.0",
-    "@zag-js/carousel": "^1.34.0",
-    "@zag-js/collection": "^1.34.0",
-    "@zag-js/checkbox": "^1.34.0",
-    "@zag-js/clipboard": "^1.34.0",
-    "@zag-js/collapsible": "^1.34.0",
-    "@zag-js/combobox": "^1.34.0",
-    "@zag-js/date-picker": "^1.34.0",
-    "@zag-js/dialog": "^1.34.0",
-    "@zag-js/editable": "^1.34.0",
-    "@zag-js/floating-panel": "^1.34.0",
-    "@zag-js/listbox": "^1.34.0",
-    "@zag-js/menu": "^1.34.0",
-    "@zag-js/number-input": "^1.34.0",
-    "@zag-js/password-input": "^1.34.0",
-    "@zag-js/pin-input": "^1.34.0",
-    "@zag-js/popper": "^1.34.0",
-    "@zag-js/radio-group": "^1.34.0",
-    "@zag-js/select": "^1.34.0",
-    "@zag-js/signature-pad": "^1.34.0",
-    "@zag-js/switch": "^1.34.0",
-    "@zag-js/tabs": "^1.34.0",
-    "@zag-js/timer": "^1.34.0",
-    "@zag-js/toast": "^1.34.0",
-    "@zag-js/toggle-group": "^1.34.0",
-    "@zag-js/tree-view": "^1.34.0",
-    "@zag-js/types": "^1.34.0",
-    "@zag-js/vanilla": "^1.34.0",
+"@zag-js/accordion": "^1.34.1",
+    "@zag-js/angle-slider": "^1.34.1",
+    "@zag-js/avatar": "^1.34.1",
+    "@zag-js/carousel": "^1.34.1",
+    "@zag-js/collection": "^1.34.1",
+    "@zag-js/checkbox": "^1.34.1",
+    "@zag-js/clipboard": "^1.34.1",
+    "@zag-js/collapsible": "^1.34.1",
+    "@zag-js/combobox": "^1.34.1",
+    "@zag-js/date-picker": "^1.34.1",
+    "@zag-js/dialog": "^1.34.1",
+    "@zag-js/editable": "^1.34.1",
+    "@zag-js/floating-panel": "^1.34.1",
+    "@zag-js/listbox": "^1.34.1",
+    "@zag-js/menu": "^1.34.1",
+    "@zag-js/number-input": "^1.34.1",
+    "@zag-js/password-input": "^1.34.1",
+    "@zag-js/pin-input": "^1.34.1",
+    "@zag-js/popper": "^1.34.1",
+    "@zag-js/radio-group": "^1.34.1",
+    "@zag-js/select": "^1.34.1",
+    "@zag-js/signature-pad": "^1.34.1",
+    "@zag-js/switch": "^1.34.1",
+    "@zag-js/tabs": "^1.34.1",
+    "@zag-js/timer": "^1.34.1",
+    "@zag-js/toast": "^1.34.1",
+    "@zag-js/toggle-group": "^1.34.1",
+    "@zag-js/tree-view": "^1.34.1",
+    "@zag-js/types": "^1.34.1",
+    "@zag-js/vanilla": "^1.34.1",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 9ad876f..45e1209 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -21,95 +21,95 @@ importers:
         specifier: ^8.0.0
         version: 8.54.0(eslint@9.39.2)(typescript@5.9.3)
       '@zag-js/accordion':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/angle-slider':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/avatar':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/carousel':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/checkbox':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/clipboard':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/collapsible':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/collection':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/combobox':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/date-picker':
-        specifier: ^1.34.0
-        version: 1.34.0(@internationalized/date@3.11.0)
+        specifier: ^1.34.1
+        version: 1.34.1(@internationalized/date@3.11.0)
       '@zag-js/dialog':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/editable':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/floating-panel':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/listbox':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/menu':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/number-input':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/password-input':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/pin-input':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/popper':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/radio-group':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/select':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/signature-pad':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/switch':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/tabs':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/timer':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/toast':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/toggle-group':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/tree-view':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/types':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       '@zag-js/vanilla':
-        specifier: ^1.34.0
-        version: 1.34.0
+        specifier: ^1.34.1
+        version: 1.34.1
       eslint:
         specifier: ^9.39.2
         version: 9.39.2
@@ -279,144 +279,144 @@ packages:
     resolution: {integrity: sha512-VFlhGSl4opC0bprJiItPQ1RfUhGDIBokcPwaFH4yiBCaNPeld/9VeXbiPO1cLyorQi1G1vL+ecBk1x8o1axORA==}
     engines: {node: ^18.18.0 || ^20.9.0 || >=21.1.0}
 
-  '@zag-js/accordion@1.34.0':
-    resolution: {integrity: sha512-4zK897tjM72D65dBZ+DKwxzJXV1Hy/QjDANDiLukpVE8oD+bO4jwh5i8Ee7U3n8YuJFluM7Ajn+xZ/HQdg9yJA==}
+  '@zag-js/accordion@1.34.1':
+    resolution: {integrity: sha512-FEk9iBwoCkbs96386MfKG7fKZ6uAnID/ppkYFs3FatTf79liJi6cQekWuOxhDPwpmbndCBNSO+eRJgsN1DWGxw==}
 
-  '@zag-js/anatomy@1.34.0':
-    resolution: {integrity: sha512-c13dPCG7Sa8Xqhz25AoZFWvMkhw5RlNgTOPD0Z6ZXpURNauLn1r5C9a/H0SAdO66yOsPHJoK8LZxoL4BiGE8KQ==}
+  '@zag-js/anatomy@1.34.1':
+    resolution: {integrity: sha512-FQuhlB5ggZvC2AKy52qITBe8Q8GCHdO+tsSY0A7kOe1C3wDnZNRCKtiNfkcIlEc3uP+alMhF/7xn09N7XXOTcQ==}
 
-  '@zag-js/angle-slider@1.34.0':
-    resolution: {integrity: sha512-WEQTxxiqqfh025Bq7mhfYQc0AMua8dWWjmCOrGxXQD2kVI58RMNNCBImcNVYyvyCd97Om5rcaVEzaJ248xBNxQ==}
+  '@zag-js/angle-slider@1.34.1':
+    resolution: {integrity: sha512-TQjzs9GZMWX4TKCmO164eWBnmw9R0EzQUkbEMSPgQ5Ue2vxxU4CCFlcn2HNlP0cz1PASk2xnMPRhcoPoRUTM+w==}
 
-  '@zag-js/aria-hidden@1.34.0':
-    resolution: {integrity: sha512-aloo68LsjiHpZdR+qzNNBuFP6F72gPfwpBmPmcVUQbHp0o5nhT+oxmcqg1A3xeuJkvJibQVqgaSep2YMcVZSQQ==}
+  '@zag-js/aria-hidden@1.34.1':
+    resolution: {integrity: sha512-3oO8T4ezzZI+DSDTaPZ4ZE6wdzHqywlz2Q6sqwjnsE46NcmlnZkaFgDPJCNPH56tXLsB7uE7A6KXLYxQrLf6fw==}
 
-  '@zag-js/avatar@1.34.0':
-    resolution: {integrity: sha512-rlJ8xpNLqSFxpyFtO2j+JRI0LTPgqzviEWSO/ejb+1w/VvB2SHPfslHfJsLqll9yUwnEvEn6+kEalcTPn/V5RQ==}
+  '@zag-js/avatar@1.34.1':
+    resolution: {integrity: sha512-O7Bt02kZiTozNsEaWWgGYyTOU3wFejQIQl1Y0bYEeFbBQ2y75pmffhK9792UW6oZ+nwQ+s/0/kAMkzZWSl3qww==}
 
-  '@zag-js/carousel@1.34.0':
-    resolution: {integrity: sha512-g9pmUfWQlII0glsltLJb12L6EXsw+ms69xELAF58pZxwxK4hss0M2ZZRRY/JOgU9nX6UtZTs8CdfaKI+bIyP5g==}
+  '@zag-js/carousel@1.34.1':
+    resolution: {integrity: sha512-aKOXJCslU8HoPp54sNv0tQraVG00fq9qL/ZwmZAzKw6G2kLtHaHtxBunQMRVrVGCYxXqsdoHWGikKT9PJWIICg==}
 
-  '@zag-js/checkbox@1.34.0':
-    resolution: {integrity: sha512-47rEtbHXUh5t8bgk3j18lDvhoMTkxTKLBRUKx/TlNYl0r6/RwUWp4yRUpOM0NQkV3wvFyMc6LqTrOKRK6KKngg==}
+  '@zag-js/checkbox@1.34.1':
+    resolution: {integrity: sha512-qj9paN6hcFwmQz+T7ABrlN8zVeA/11WLB2JDhno2xuJjdHDmOSWnWVxCEf8lv4nxcw3SUnJnMgFtAWLd0xJkFA==}
 
-  '@zag-js/clipboard@1.34.0':
-    resolution: {integrity: sha512-Wkm4sWwXcIvpeZEdaUQB7Oy91UMUm1Rfyb/UjWUv12gMlXTAmdUucaT2yR7cPanYzUzwOR3ZNepwOxC2CjYE6w==}
+  '@zag-js/clipboard@1.34.1':
+    resolution: {integrity: sha512-O1xH2e3E+GYXubA/vtBkuE3AD81hO3N5P1weA6iHOCyDl8CAtKMZZ1xMuCTwt+wujwdvM1DT4IF+II9fBMngAw==}
 
-  '@zag-js/collapsible@1.34.0':
-    resolution: {integrity: sha512-P2d4DLVpVbLP0Qfq/rWjyCSgj380LKcnU04xLQV4ujAESx6Ga+w6MbW09ywCZGi1JPWlRu6A06bhVSRvyHTGHg==}
+  '@zag-js/collapsible@1.34.1':
+    resolution: {integrity: sha512-1u32Zz/shcmxPbPsXuiIc5D9eIoZdpFoLuzlUzGlutBzq7zoavmMVIGmSevBEn12a6vhk/dPoiz2+OAKXi+2ww==}
 
-  '@zag-js/collection@1.34.0':
-    resolution: {integrity: sha512-2fU7l/iRpCSsngRYTfbnVOFLGhlylk4+IuJgWZPpBHafDv5hg14Ju5OZK0U+SCFSkHDvN/vnr/4QllIftBWsfQ==}
+  '@zag-js/collection@1.34.1':
+    resolution: {integrity: sha512-C61BL3cFyEfPCsPKeWshc8l7D3igqySPksVtmfzHhxcnlOxgVkBBpik7JF/cYk9yU6pHB6bCRzRgPDziiyOHLQ==}
 
-  '@zag-js/combobox@1.34.0':
-    resolution: {integrity: sha512-fsTfGCDBbyYaWAmsF7VsOh5LIpqhbd2IxMLl41I8GPeQIRkiqomuOjEmq4vNiNIBEGVPMREFWb67ADlivZcPOQ==}
+  '@zag-js/combobox@1.34.1':
+    resolution: {integrity: sha512-YzqOYbfh8vDmc/ewj3DetGHt0hwYuvDV/2BdCQJ5rLtLK8iLJuTB79x8l6QJBCi93BG64E7aY7Wa7jyK+1oILQ==}
 
-  '@zag-js/core@1.34.0':
-    resolution: {integrity: sha512-+w6zQ5PiBNbUd2xu91FUQruIAHcTYsueUNlXz3biAEAcU7pzre3Es4ApTepkbijYjcsiXzI/QwTtujot53eVyA==}
+  '@zag-js/core@1.34.1':
+    resolution: {integrity: sha512-GjOZOL/p0tsuH/koYR+mSoegs3JXpP0ZkFuidAf0R4zqklNSdTLzhb00CZHGZcdWCExhmG18YwpjbEx8eyfV5g==}
 
-  '@zag-js/date-picker@1.34.0':
-    resolution: {integrity: sha512-0jF2clkuwyK6fIIkHd8RsqWO+/zl6xwK5HHEJoLHWEbWaJ4DvOfjadQD/5bHGIbCulZb37yHKgidI3pcQ1R3uw==}
+  '@zag-js/date-picker@1.34.1':
+    resolution: {integrity: sha512-ubhpCRDf7vVXSvToJvnsnqjTB2hhbsYEaeIrwsHTFAFOETD15A5H/aC5PeiwCouLEbTQDiIoaDlOsNh57IO7XQ==}
     peerDependencies:
       '@internationalized/date': '>=3.0.0'
 
-  '@zag-js/date-utils@1.34.0':
-    resolution: {integrity: sha512-9LjsBA4oCq1+jq33CTw469lhNhCajAvN1QyNGLTfzRdUDfaJE1/egv3akM2Gn+FaKU1pOWB11uJiK+VR6Eui9w==}
+  '@zag-js/date-utils@1.34.1':
+    resolution: {integrity: sha512-UG0aooQXNWINlO8RWcBFv6aEHE1jAFKU4vNprh0nDOl61O0+j+lbV0qYushgyZ7O6aYSoI+tdb/Myv+BPqQxyg==}
     peerDependencies:
       '@internationalized/date': '>=3.0.0'
 
-  '@zag-js/dialog@1.34.0':
-    resolution: {integrity: sha512-w52x1jCgpmaOx5zmJ2878sX6yIjz7QN/ICT5eH22uoyZQ1YKl1XlFUYf3SOCzY3svs4gSRHLd+/KFA/u0YEGGQ==}
+  '@zag-js/dialog@1.34.1':
+    resolution: {integrity: sha512-2PfuUhC2e0ouQ2s2F9qmeThwTMGptVCAMDNMh1ZOPeVzQLvnsIQDvcYHeb62BuKgYDeoUiz3Tz/ns/sV/VI1kw==}
 
-  '@zag-js/dismissable@1.34.0':
-    resolution: {integrity: sha512-R+H2E1gasWhChnBBXgzWSnok5NIL4IG9XfVPFTOWNz5OldqOTWH6p0xZgVbO85/ifBDmF3C+663ZeaZ1EW49EA==}
+  '@zag-js/dismissable@1.34.1':
+    resolution: {integrity: sha512-7dj7G0Cl6Fu7IHENdLT1tFeePuq8BqxPT6xANdk66hnpVeyDKcrR3XjN+ChWpYxGIkeOfPGYsjRHx1kDiFv89g==}
 
-  '@zag-js/dom-query@1.34.0':
-    resolution: {integrity: sha512-bK3rEAsY130SPrRsWn+M4Dim2Ne92Sq+RsRQ4I9UTOa98OeSPVc8F77zPdoc4aKS+XAWWpzNASTfDjYhAy1gKQ==}
+  '@zag-js/dom-query@1.34.1':
+    resolution: {integrity: sha512-7GaxMaShtWsGgsz9jPfi+aJSQrx7aVFnCi5edGet76Tcytv0MRTqFKUcpSCWu3W3znBt8tQO07Mu1SBSNQk07Q==}
 
-  '@zag-js/editable@1.34.0':
-    resolution: {integrity: sha512-ABJl+HusXMFidoGClcuH8rOhkw/9StKKak9WSQbHRcgd4f3GQQt7h8ENMaxmaK2FwZKywcoNnVB4+OdssVAxWQ==}
+  '@zag-js/editable@1.34.1':
+    resolution: {integrity: sha512-IXR8TE/S7uuTOY/Mj3tk8zmXlpgym9OUYZGFjohVdXeUC9INIeO27ei8mfAxY3JLqnYIyrLGD0Q7OUUj2L/vTQ==}
 
-  '@zag-js/floating-panel@1.34.0':
-    resolution: {integrity: sha512-5bd/5sOGfHunfKFXxQm96QbS6RgezB72nHW6Ir/wD1/CxClcRKILYwznx6E3BxpqPaOq8s6JdsMnLdzSoASoAw==}
+  '@zag-js/floating-panel@1.34.1':
+    resolution: {integrity: sha512-2yreCW74MO047Yd3jjofFyJpbfd55E9TBw0Hh4W1kMPpWg8E3XnL4gWrYYKX6ycjeWNVNNvyAg1O/0qiM49fiA==}
 
-  '@zag-js/focus-trap@1.34.0':
-    resolution: {integrity: sha512-vejkVmkqQ5Uv3/bhFaFovC2ownIwN+3Bh2CGLhqTI+bijsGtbFpmcpmwVXxnWQdO9VKaesygChFLmgQaFJ9UWw==}
+  '@zag-js/focus-trap@1.34.1':
+    resolution: {integrity: sha512-vfIC3diaYbdxDmKmNASZYx0RrNj6bG0InrIgQF0Kk/qI81FcK/VXQDjpXnnWC+yG2u3hG8h+6kbfgHtgoCuDjQ==}
 
-  '@zag-js/focus-visible@1.34.0':
-    resolution: {integrity: sha512-tHtvqxiBsNfzDaZaD8qpSBl7PRndeDrVLgCX80M0bcYu6f1RHJY53qGriBFqocRuKlNtSASE39JAicKCojQzpw==}
+  '@zag-js/focus-visible@1.34.1':
+    resolution: {integrity: sha512-Wvl/w6JpPU8DwEfq+I82yzlBX9mEp2o2k6DZc+3Kb3x/3oP8Jr0fCXdk+qWTvKekfVvDpM2vS1fjNNLfiOaQww==}
 
-  '@zag-js/interact-outside@1.34.0':
-    resolution: {integrity: sha512-U7E3k2pkF7xh9cxU3za1BaiAo33kCdW/iulicPutTVEgSa09bXARa2/v/ISrpAKj/Crau69UAfxjjl4D56fxnw==}
+  '@zag-js/interact-outside@1.34.1':
+    resolution: {integrity: sha512-wQdOYVhPFyYPJUDPYXQc1tg8vdJGTG5xwTEdOGVG1DpVo87VNsdb0KjnWPZsfPQEUSkvJIXtbjopp/OLw4fFow==}
 
-  '@zag-js/listbox@1.34.0':
-    resolution: {integrity: sha512-T1KHdYpaN/iIL2w14ySG4wLLti/az62CIe1Tnx9szuo7nC38GeeSsWtQJxc+DRKYTPNC9PDvbImKS6CsdcaaSg==}
+  '@zag-js/listbox@1.34.1':
+    resolution: {integrity: sha512-0KcGH8lILd1fLO49VCl3nyalesm+Nvr6/oH6qflsbn+frM4JaDcF/S6gngtKXJ8Mzx+5Qua97uAvuk047Z0I/A==}
 
-  '@zag-js/live-region@1.34.0':
-    resolution: {integrity: sha512-GTlVqRLJaZpqSg6j6XufxrD2z0EIaTp1tIddU4USceNb38SDb4JbFf/DB6IATRS506W27kfxQW1J4uau5bJLEg==}
+  '@zag-js/live-region@1.34.1':
+    resolution: {integrity: sha512-0Heu0z0cBQQDA1289nm0wQM3+ybEuOSqpPffHQdRgaTtUWnG0xkw0jt8qq0A/tq2VIlwLnbNledE4dh1Y6KwhA==}
 
-  '@zag-js/menu@1.34.0':
-    resolution: {integrity: sha512-qruSZvJuLVBi0Af8YkB/7+fRAmLuAu6MSMLuIW2WT4FlcsqLk9AEnYXD5X/shUKJmNiIvZisyaZlpzMxkNHChQ==}
+  '@zag-js/menu@1.34.1':
+    resolution: {integrity: sha512-nhVM6dNf48QqeY0qzn6n5hTk8qbBM7FwnGAUJmGRx9nrrG1SpIpQ5sCxDcOwgI/Q2vMu+2ggmIiObvZKAqZkiA==}
 
-  '@zag-js/number-input@1.34.0':
-    resolution: {integrity: sha512-xuq7skBhR4zH7bf9quuADOTQwl2FVdv/Wpsetj4epN+ZLJk31UwRYYYusfEhXZ3B9N9m7qdgADEF1zJLjwtm+g==}
+  '@zag-js/number-input@1.34.1':
+    resolution: {integrity: sha512-ZcqsC7XRzutc3nDV1AJO/kwb6ycAeDGTMOL3jTQND0xPZfUb5u/YZcMxinWHLwXZZ8ZuXZeWvtiy3veCUJGCFg==}
 
-  '@zag-js/password-input@1.34.0':
-    resolution: {integrity: sha512-OAkJNz443Pm90GVBomfDEhI20ADZEGv/23MprP3x1+sV/Ppn9HOTWUWSyghVQzIfocDK0X5zPygIE/XaJVaxBQ==}
+  '@zag-js/password-input@1.34.1':
+    resolution: {integrity: sha512-0gay9u9NqN8b4QuIpABlCtP93TbQJ8uRGurUSQwgbbG6llf+EOLiZs5f0H19MVnhbcINatv9p34Je6GAP2SBbA==}
 
-  '@zag-js/pin-input@1.34.0':
-    resolution: {integrity: sha512-PpH0MGW67tnNupApXv5a0LzzkYgzVxgomcirCrWjqPGMa+ZHBy6T0ZdHBVR/zBfOwtB/s/wiS883n18TIJ0Ekg==}
+  '@zag-js/pin-input@1.34.1':
+    resolution: {integrity: sha512-xmXdDA2JahFD+I+avDw62WX9/tKH6ab6rkn46ciqHbGTTgSW23s/btiPRuMshdd4lnqXgQgKBE/wkVdRZzeRnA==}
 
-  '@zag-js/popper@1.34.0':
-    resolution: {integrity: sha512-JCcQUfe8aSkE1Pgfes30xx5Fea2O3eIOhMKr7pMAFByYw9otLEimFaA3T8OU11O9gTgy5qlStAljbxpJYFB4pg==}
+  '@zag-js/popper@1.34.1':
+    resolution: {integrity: sha512-e9xklP5YjfqS6sTSzezsRBdaD5ilMTQoEedAQecy16jstIAQsberctUYZVg8vRQubA9ukmv1JvaNbkVFclr13w==}
 
-  '@zag-js/radio-group@1.34.0':
-    resolution: {integrity: sha512-xqUVmMrFgN/9/oBa/rvuTnKVc1KAH1jpHNsIYhMIAAbyR96Kl8LxRC0tq+gnwLFGijHnxjnTfqqHSwul+k3Suw==}
+  '@zag-js/radio-group@1.34.1':
+    resolution: {integrity: sha512-dRy7Z1zE2qwyyjI68icLBkPzM+ZzL0aAklFVc7kd/ejYxZfk6SrPoMjg3u22a34J2scxHwh/LdSuQFmauj4sAA==}
 
-  '@zag-js/rect-utils@1.34.0':
-    resolution: {integrity: sha512-KUJrU0xb1L53PFDDP0y/VuOzKDIFAFvfWru6AWIR1HaDDcX62K9s51mg9E27LgHSsXn1/yUTR2Nktb+wXy1dOg==}
+  '@zag-js/rect-utils@1.34.1':
+    resolution: {integrity: sha512-ms81ltfYBsabzk6tqy+kheMAUkx9IB+AUt8sATWGgqSTemBuMv/dptCJt3+WbkQjc8NveuEWmq3S6w1KJ31gaQ==}
 
-  '@zag-js/remove-scroll@1.34.0':
-    resolution: {integrity: sha512-StGyXyFdKXU5P86M7Jqiwh5dy9UwguXva2WuO+eM4vCfI/GvS76JoznjJqjF08uKBRelJdm+JDO0+KJj2OGqUA==}
+  '@zag-js/remove-scroll@1.34.1':
+    resolution: {integrity: sha512-irnvF4cwoAidwdU4UsPQyhTivnY3V/ZBO9EW/zTJ78qm3sjkRDDZsKEVV2UstUEmvH1jcFFPp6eNoTVItsyJBg==}
 
-  '@zag-js/scroll-snap@1.34.0':
-    resolution: {integrity: sha512-WJ6u75xIlQvtglLon4HADDBjbj9frQsmIAoeTkhDw7RaHNwT4Z0jqilPtkP87wBkSTNRc5/xuifgPSpm+81o3Q==}
+  '@zag-js/scroll-snap@1.34.1':
+    resolution: {integrity: sha512-pvgbJ3tjKRM1LlF14QY5riV/KT2EYGfYY4Cl5QuONqjO0ergrRd0FxDzhiwqIthgXrDZOavMucr7yqCLrjVQQA==}
 
-  '@zag-js/select@1.34.0':
-    resolution: {integrity: sha512-Cg3aMo4cMF2UWoP5oy4N/iwKR3vMbmrP12azlvQ0ZIjwGoDVBzUKbVvTo6W4Br5+PJWhzlYKphkf3RoCwpYB/w==}
+  '@zag-js/select@1.34.1':
+    resolution: {integrity: sha512-4Pc062McPgdRYwOU6v8jaqP48nBeTuSbuToHWixTVUhDkAsLDd7A8od2sKPsGHRsPOce0D259vJS5L3c0vtfig==}
 
-  '@zag-js/signature-pad@1.34.0':
-    resolution: {integrity: sha512-nyBOhncvaGa+FpAPM54q5oPnu0UNSK3EedIZdEAB1GZi0sI7wYmcKnKGxxN1QIwT4kWXbDWoA0y1ivHZFZFgdg==}
+  '@zag-js/signature-pad@1.34.1':
+    resolution: {integrity: sha512-yeYi4Tl+IgPfGA5ejbYSpHU52MBchR0S2aqT9X4kRJniCcnKLV3ZI5VOz8cYXCpYMDiWSsQnzcIIohHNHVhK2g==}
 
-  '@zag-js/store@1.34.0':
-    resolution: {integrity: sha512-ITHPt9mZT7OQUicVGVI3ajRa3/VZvXGiIPXo3YsQtajM62N3RvlbjyDRqfy0ApmW1/uQzO+ftj+v6BbDWBe2IQ==}
+  '@zag-js/store@1.34.1':
+    resolution: {integrity: sha512-127OWtrFKuS9HsbZITancVrydA9CpDHxyS5V+gDA7bnsNdw8kKx1H82oMh8Ok6hkDXvilhEB+g+UIOVeQD7RwQ==}
 
-  '@zag-js/switch@1.34.0':
-    resolution: {integrity: sha512-g9ZJDHDSD57VPYmNpARHhEmZPn5M3l+SCcHIT73IeiCR0EEmvKtNzd7YruAUGZBeFDch4g3lLAPqD4FPMgIEyA==}
+  '@zag-js/switch@1.34.1':
+    resolution: {integrity: sha512-yOibKwJ+/WZBxVBpiK7mFEFjz88rLCzAhYEr5Om52fsWPc7BbxZKBZw058e0yx5mEBXJUTXNebgp1fkmth7U9g==}
 
-  '@zag-js/tabs@1.34.0':
-    resolution: {integrity: sha512-UW4uTdutIl5tgkUOsmRH68K7zhar2MNg5usYGeykQu0Gk/GeEir+R1VvU6NFBu9Tc5nSq4VvEGytwjlNkNDU5A==}
+  '@zag-js/tabs@1.34.1':
+    resolution: {integrity: sha512-5qAz3jyawmfwpIjd5rNe10yae3YdZSaUu9bNk8ZzJXkXu+Sf69BO6M/k32+ZtAS1i+cku7ZXluza95CxA/Oshg==}
 
-  '@zag-js/timer@1.34.0':
-    resolution: {integrity: sha512-ppH1XRvp83y68ww1qLiKkzwUOgWpb5g47nHU3Q20zq3l/gfWIhjfkTcqp+ak/0C/Vk4ZvmP5Jhfn+oFFpAbTFg==}
+  '@zag-js/timer@1.34.1':
+    resolution: {integrity: sha512-awQXcKCHAKS+XBJCV+TpZhSI+zRmQCtYUqVjXMv6Mj1jmB7PS/I7gAt1D7wGmMKtkBZ4vbRxe2p2qO3StlpxRA==}
 
-  '@zag-js/toast@1.34.0':
-    resolution: {integrity: sha512-v9mWi5dBpUGXJLMvSVMOR/mmujENKhE2v2M6VJ/+0bilBYwcX3VW05OywSYaTlxi5vt9n2cOpvFDstMAnuRJHQ==}
+  '@zag-js/toast@1.34.1':
+    resolution: {integrity: sha512-Ad1QQ2aSbJUO+wDOLRAONrhhTsAm6YHwSxKnp4wMOvTw6UcBgRr2MeebrvYx/kwHa4UK/Y9L5rxoyRoTrk2mGg==}
 
-  '@zag-js/toggle-group@1.34.0':
-    resolution: {integrity: sha512-zXw9A5jTygdWgjsQi+gasvXaxekIbDTCbB0vrbLVZE/10aSO+v70INZmhlbffl6MjykqMD9HeV2eKvdpg0Uudw==}
+  '@zag-js/toggle-group@1.34.1':
+    resolution: {integrity: sha512-QDgABKDhz8EShqZoIK4NR0Ca2qDpOYAaClHlq4loyWqBhKSt1Xtok7GaD4iwer+U/5WpkzJqIlwV2nC09dsRpA==}
 
-  '@zag-js/tree-view@1.34.0':
-    resolution: {integrity: sha512-10WbUg/w9OlohHabJWqwFx3PSyqUdxyF7dHWJQKLxZo6J1YUrp1KXIC6+/NOSKtJ0F0olZbRJnrTAvgkejo97Q==}
+  '@zag-js/tree-view@1.34.1':
+    resolution: {integrity: sha512-ExoUFplWtTyVEGITgAFR2kIaJax/zznPuWVBiWL+Avf7qn0+CCs1b1JOPeGQtqUXk9Fso67uw9BwNQFOxbQelA==}
 
-  '@zag-js/types@1.34.0':
-    resolution: {integrity: sha512-0DRMFFfq77ofAQIXQrqieGAOvFezKx6VDrdgMsV7zhQRbTPBXxA7VjDdd0mSSk8sHFiA1AL7Jxzc5zFrQcOpow==}
+  '@zag-js/types@1.34.1':
+    resolution: {integrity: sha512-DAg2cD5g0PvYGIC08GWa71aSyO2IEGlQCIIdOtmUSN2PdLyRi3IllNHlnDYFCkTGbb0GUunCro8FLvE9Aj2BOA==}
 
-  '@zag-js/utils@1.34.0':
-    resolution: {integrity: sha512-rdk7T3M8Rj+Wew7jtQuaWzxT/htbk2PCoLuF2yj3ldef+4txVE2uVQWodeM5mp7vArvMJxXvipnJJtkTXEPNkw==}
+  '@zag-js/utils@1.34.1':
+    resolution: {integrity: sha512-XgNTbcxPgNkPEuH/s/WUSU3M1mnO7453P53Wvym3dte+zPmqjwf5VT1FmEw8t6YQDBiBkIEKpUnNwR2x/pmZgg==}
 
-  '@zag-js/vanilla@1.34.0':
-    resolution: {integrity: sha512-svVl2KrUNgB4O4l2LQu2f6crb+Qw5kfRL54WJUaVGeJZrrD3kjoXtcCMUP4nLNqX/YVnY4d2kPn/qskU+JUc1A==}
+  '@zag-js/vanilla@1.34.1':
+    resolution: {integrity: sha512-hMiIUhbAwB8TuRLGSd9vFeVjA13S5yqrDlgDbA3kOeDdqKilEhHaXuSFS1iid6QXUbGTPOlrdh0VLJRtA8OnVQ==}
 
   acorn-jsx@5.3.2:
     resolution: {integrity: sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==}
@@ -983,327 +983,327 @@ snapshots:
       '@typescript-eslint/types': 8.54.0
       eslint-visitor-keys: 4.2.1
 
-  '@zag-js/accordion@1.34.0':
+  '@zag-js/accordion@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/anatomy@1.34.0': {}
+  '@zag-js/anatomy@1.34.1': {}
 
-  '@zag-js/angle-slider@1.34.0':
+  '@zag-js/angle-slider@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/rect-utils': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/rect-utils': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/aria-hidden@1.34.0':
+  '@zag-js/aria-hidden@1.34.1':
     dependencies:
-      '@zag-js/dom-query': 1.34.0
+      '@zag-js/dom-query': 1.34.1
 
-  '@zag-js/avatar@1.34.0':
+  '@zag-js/avatar@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/carousel@1.34.0':
+  '@zag-js/carousel@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/scroll-snap': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/scroll-snap': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/checkbox@1.34.0':
+  '@zag-js/checkbox@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/focus-visible': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/focus-visible': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/clipboard@1.34.0':
+  '@zag-js/clipboard@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/collapsible@1.34.0':
+  '@zag-js/collapsible@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/collection@1.34.0':
+  '@zag-js/collection@1.34.1':
     dependencies:
-      '@zag-js/utils': 1.34.0
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/combobox@1.34.0':
+  '@zag-js/combobox@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/aria-hidden': 1.34.0
-      '@zag-js/collection': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dismissable': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/focus-visible': 1.34.0
-      '@zag-js/popper': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/aria-hidden': 1.34.1
+      '@zag-js/collection': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dismissable': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/focus-visible': 1.34.1
+      '@zag-js/popper': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/core@1.34.0':
+  '@zag-js/core@1.34.1':
     dependencies:
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/date-picker@1.34.0(@internationalized/date@3.11.0)':
+  '@zag-js/date-picker@1.34.1(@internationalized/date@3.11.0)':
     dependencies:
       '@internationalized/date': 3.11.0
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/date-utils': 1.34.0(@internationalized/date@3.11.0)
-      '@zag-js/dismissable': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/live-region': 1.34.0
-      '@zag-js/popper': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
-
-  '@zag-js/date-utils@1.34.0(@internationalized/date@3.11.0)':
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/date-utils': 1.34.1(@internationalized/date@3.11.0)
+      '@zag-js/dismissable': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/live-region': 1.34.1
+      '@zag-js/popper': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
+
+  '@zag-js/date-utils@1.34.1(@internationalized/date@3.11.0)':
     dependencies:
       '@internationalized/date': 3.11.0
 
-  '@zag-js/dialog@1.34.0':
+  '@zag-js/dialog@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/aria-hidden': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dismissable': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/focus-trap': 1.34.0
-      '@zag-js/remove-scroll': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/aria-hidden': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dismissable': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/focus-trap': 1.34.1
+      '@zag-js/remove-scroll': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/dismissable@1.34.0':
+  '@zag-js/dismissable@1.34.1':
     dependencies:
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/interact-outside': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/interact-outside': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/dom-query@1.34.0':
+  '@zag-js/dom-query@1.34.1':
     dependencies:
-      '@zag-js/types': 1.34.0
+      '@zag-js/types': 1.34.1
 
-  '@zag-js/editable@1.34.0':
+  '@zag-js/editable@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/interact-outside': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/interact-outside': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/floating-panel@1.34.0':
+  '@zag-js/floating-panel@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/popper': 1.34.0
-      '@zag-js/rect-utils': 1.34.0
-      '@zag-js/store': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/popper': 1.34.1
+      '@zag-js/rect-utils': 1.34.1
+      '@zag-js/store': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/focus-trap@1.34.0':
+  '@zag-js/focus-trap@1.34.1':
     dependencies:
-      '@zag-js/dom-query': 1.34.0
+      '@zag-js/dom-query': 1.34.1
 
-  '@zag-js/focus-visible@1.34.0':
+  '@zag-js/focus-visible@1.34.1':
     dependencies:
-      '@zag-js/dom-query': 1.34.0
+      '@zag-js/dom-query': 1.34.1
 
-  '@zag-js/interact-outside@1.34.0':
+  '@zag-js/interact-outside@1.34.1':
     dependencies:
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/listbox@1.34.0':
+  '@zag-js/listbox@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/collection': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/focus-visible': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/collection': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/focus-visible': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/live-region@1.34.0': {}
+  '@zag-js/live-region@1.34.1': {}
 
-  '@zag-js/menu@1.34.0':
+  '@zag-js/menu@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dismissable': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/focus-visible': 1.34.0
-      '@zag-js/popper': 1.34.0
-      '@zag-js/rect-utils': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dismissable': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/focus-visible': 1.34.1
+      '@zag-js/popper': 1.34.1
+      '@zag-js/rect-utils': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/number-input@1.34.0':
+  '@zag-js/number-input@1.34.1':
     dependencies:
       '@internationalized/number': 3.6.5
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/password-input@1.34.0':
+  '@zag-js/password-input@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/pin-input@1.34.0':
+  '@zag-js/pin-input@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/popper@1.34.0':
+  '@zag-js/popper@1.34.1':
     dependencies:
       '@floating-ui/dom': 1.7.5
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/radio-group@1.34.0':
+  '@zag-js/radio-group@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/focus-visible': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/focus-visible': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/rect-utils@1.34.0': {}
+  '@zag-js/rect-utils@1.34.1': {}
 
-  '@zag-js/remove-scroll@1.34.0':
+  '@zag-js/remove-scroll@1.34.1':
     dependencies:
-      '@zag-js/dom-query': 1.34.0
+      '@zag-js/dom-query': 1.34.1
 
-  '@zag-js/scroll-snap@1.34.0':
+  '@zag-js/scroll-snap@1.34.1':
     dependencies:
-      '@zag-js/dom-query': 1.34.0
+      '@zag-js/dom-query': 1.34.1
 
-  '@zag-js/select@1.34.0':
+  '@zag-js/select@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/collection': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dismissable': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/focus-visible': 1.34.0
-      '@zag-js/popper': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/collection': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dismissable': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/focus-visible': 1.34.1
+      '@zag-js/popper': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/signature-pad@1.34.0':
+  '@zag-js/signature-pad@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
       perfect-freehand: 1.2.3
 
-  '@zag-js/store@1.34.0':
+  '@zag-js/store@1.34.1':
     dependencies:
       proxy-compare: 3.0.1
 
-  '@zag-js/switch@1.34.0':
+  '@zag-js/switch@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/focus-visible': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/focus-visible': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/tabs@1.34.0':
+  '@zag-js/tabs@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/timer@1.34.0':
+  '@zag-js/timer@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/toast@1.34.0':
+  '@zag-js/toast@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dismissable': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dismissable': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/toggle-group@1.34.0':
+  '@zag-js/toggle-group@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/tree-view@1.34.0':
+  '@zag-js/tree-view@1.34.1':
     dependencies:
-      '@zag-js/anatomy': 1.34.0
-      '@zag-js/collection': 1.34.0
-      '@zag-js/core': 1.34.0
-      '@zag-js/dom-query': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/anatomy': 1.34.1
+      '@zag-js/collection': 1.34.1
+      '@zag-js/core': 1.34.1
+      '@zag-js/dom-query': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
-  '@zag-js/types@1.34.0':
+  '@zag-js/types@1.34.1':
     dependencies:
       csstype: 3.2.3
 
-  '@zag-js/utils@1.34.0': {}
+  '@zag-js/utils@1.34.1': {}
 
-  '@zag-js/vanilla@1.34.0':
+  '@zag-js/vanilla@1.34.1':
     dependencies:
-      '@zag-js/core': 1.34.0
-      '@zag-js/store': 1.34.0
-      '@zag-js/types': 1.34.0
-      '@zag-js/utils': 1.34.0
+      '@zag-js/core': 1.34.1
+      '@zag-js/store': 1.34.1
+      '@zag-js/types': 1.34.1
+      '@zag-js/utils': 1.34.1
 
   acorn-jsx@5.3.2(acorn@8.15.0):
     dependencies:
diff --git a/priv/design/components/clipboard.css b/priv/design/components/clipboard.css
index eba8c2f..0407fb4 100644
--- a/priv/design/components/clipboard.css
+++ b/priv/design/components/clipboard.css
@@ -61,3 +61,29 @@
     display: inline-block !important;
   }
 }
+
+@utility clipboard--* {
+  [data-scope="clipboard"][data-part="root"] {
+    max-width: --value(--container-ui-*, [length]);
+    gap: --value(--spacing-ui-gap-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="control"] {
+    gap: --value(--spacing-ui-gap-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="trigger"] {
+    font-size: --value(--text-ui-*, [length]);
+    line-height: --value(--text-ui-* --line-height, [length]);
+    min-height: --value(--spacing-ui-*, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="label"] {
+    font-size: --value(--text-ui-*, [length]);
+    line-height: --value(--text-ui-* --line-height, [length]);
+  }
+
+  [data-scope="clipboard"][data-part="input"] {
+    max-width: --value(--container-ui-*, [length]);
+  }
+}
diff --git a/priv/design/components/code.css b/priv/design/components/code.css
new file mode 100644
index 0000000..f6dec12
--- /dev/null
+++ b/priv/design/components/code.css
@@ -0,0 +1,126 @@
+@import "../main.css";
+
+@layer components {
+  .code[data-scope="code"][data-part="root"] {
+    @apply ui-root;
+  }
+
+  .code [data-scope="code"][data-part="content"] .highlight {
+    @apply ui-content scrollbar scrollbar--sm;
+    font-family: var(--font-code);
+    font-size: var(--text-ui-sm);
+    line-height: var(--text-ui-sm--line-height);
+    padding: var(--spacing-ui-padding);
+    background-color: var(--color-ui);
+    color: var(--color-ui--text);
+    border: 1px solid var(--color-ui--border);
+    overflow: auto;
+    background-image: linear-gradient(
+      var(--color-root) 50%,
+      var(--color-layer) 50%
+    );
+    background-size: 100% calc(var(--text-ui) * var(--text-ui--line-height));
+    background-origin: content-box;
+    background-attachment: local;
+    background-position: 0 calc(var(--spacing-ui-padding) / 2);;
+    
+
+    & code {
+      width: fit-content;
+      padding-inline-end: var(--spacing-ui);
+    }
+  }
+
+
+  .code .highlight .unselectable {
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+  }
+
+
+  [data-mode="light"] .code .highlight .hll { background-color: #fff9c4; }
+  [data-mode="light"] .code .highlight .bp { color: #0070c1; }
+  [data-mode="light"] .code .highlight .c, [data-mode="light"] .code .highlight .c1, [data-mode="light"] .code .highlight .ch, [data-mode="light"] .code .highlight .cm, [data-mode="light"] .code .highlight .cs { color: #008000; font-style: italic; }
+  [data-mode="light"] .code .highlight .cp, [data-mode="light"] .code .highlight .cpf { color: #0000ff; font-style: normal; }
+  [data-mode="light"] .code .highlight .dl { color: #a31515; }
+  [data-mode="light"] .code .highlight .err { border-color: #cd3131; color: #cd3131; }
+  [data-mode="light"] .code .highlight .fm { color: #795e26; }
+  [data-mode="light"] .code .highlight .gd { color: #a31515; }
+  [data-mode="light"] .code .highlight .ge { font-style: italic; }
+  [data-mode="light"] .code .highlight .gh { color: #000080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .gi { color: #098658; }
+  [data-mode="light"] .code .highlight .go { color: #6e7681; }
+  [data-mode="light"] .code .highlight .gp { color: #000080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .gr { color: #cd3131; }
+  [data-mode="light"] .code .highlight .gs { font-weight: bold; }
+  [data-mode="light"] .code .highlight .gt { color: #0451a5; }
+  [data-mode="light"] .code .highlight .gu { color: #800080; font-weight: bold; }
+  [data-mode="light"] .code .highlight .il { color: #098658; }
+  [data-mode="light"] .code .highlight .k, [data-mode="light"] .code .highlight .kd, [data-mode="light"] .code .highlight .kr, [data-mode="light"] .code .highlight .kc, [data-mode="light"] .code .highlight .kn, [data-mode="light"] .code .highlight .kp { color: #0000ff; font-weight: bold; }
+  [data-mode="light"] .code .highlight .kt { color: #267f99; }
+  [data-mode="light"] .code .highlight .m, [data-mode="light"] .code .highlight .mb, [data-mode="light"] .code .highlight .mf, [data-mode="light"] .code .highlight .mh, [data-mode="light"] .code .highlight .mi, [data-mode="light"] .code .highlight .mo { color: #098658; }
+  [data-mode="light"] .code .highlight .na { color: #e50000; }
+  [data-mode="light"] .code .highlight .nb { color: #267f99; }
+  [data-mode="light"] .code .highlight .nc, [data-mode="light"] .code .highlight .nn { color: #267f99; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nd { color: #af00db; }
+  [data-mode="light"] .code .highlight .ne { color: #cd3131; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nf { color: #795e26; }
+  [data-mode="light"] .code .highlight .ni { color: #6e7681; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nl { color: #000000; }
+  [data-mode="light"] .code .highlight .no { color: #0070c1; }
+  [data-mode="light"] .code .highlight .nt { color: #800000; font-weight: bold; }
+  [data-mode="light"] .code .highlight .nv, [data-mode="light"] .code .highlight .vc, [data-mode="light"] .code .highlight .vg, [data-mode="light"] .code .highlight .vi, [data-mode="light"] .code .highlight .vm { color: #001080; }
+  [data-mode="light"] .code .highlight .o { color: #000000; }
+  [data-mode="light"] .code .highlight .ow { color: #0000ff; font-weight: bold; }
+  [data-mode="light"] .code .highlight .s, [data-mode="light"] .code .highlight .s1, [data-mode="light"] .code .highlight .s2, [data-mode="light"] .code .highlight .sa, [data-mode="light"] .code .highlight .sb, [data-mode="light"] .code .highlight .sc, [data-mode="light"] .code .highlight .sh, [data-mode="light"] .code .highlight .sx { color: #a31515; }
+  [data-mode="light"] .code .highlight .sd { color: #a31515; font-style: italic; }
+  [data-mode="light"] .code .highlight .se { color: #ee0000; font-weight: bold; }
+  [data-mode="light"] .code .highlight .si { color: #811f3f; font-weight: bold; }
+  [data-mode="light"] .code .highlight .sr { color: #811f3f; }
+  [data-mode="light"] .code .highlight .ss { color: #001080; }
+
+  [data-mode="dark"] .code .highlight .hll { background-color: #264f78; }
+  [data-mode="dark"] .code .highlight .bp { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .c, [data-mode="dark"] .code .highlight .c1, [data-mode="dark"] .code .highlight .ch, [data-mode="dark"] .code .highlight .cm, [data-mode="dark"] .code .highlight .cs { color: #6a9955; font-style: italic; }
+  [data-mode="dark"] .code .highlight .cp, [data-mode="dark"] .code .highlight .cpf { color: #569cd6; font-style: normal; }
+  [data-mode="dark"] .code .highlight .dl { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .err { border-color: #f44747; color: #f44747; }
+  [data-mode="dark"] .code .highlight .fm { color: #dcdcaa; }
+  [data-mode="dark"] .code .highlight .gd { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .ge { font-style: italic; }
+  [data-mode="dark"] .code .highlight .gh { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gi { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .go { color: #808080; }
+  [data-mode="dark"] .code .highlight .gp { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gr { color: #f44747; }
+  [data-mode="dark"] .code .highlight .gs { font-weight: bold; }
+  [data-mode="dark"] .code .highlight .gt { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .gu { color: #c586c0; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .il { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .k, [data-mode="dark"] .code .highlight .kd, [data-mode="dark"] .code .highlight .kr, [data-mode="dark"] .code .highlight .kc, [data-mode="dark"] .code .highlight .kn, [data-mode="dark"] .code .highlight .kp { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .kt { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .m, [data-mode="dark"] .code .highlight .mb, [data-mode="dark"] .code .highlight .mf, [data-mode="dark"] .code .highlight .mh, [data-mode="dark"] .code .highlight .mi, [data-mode="dark"] .code .highlight .mo { color: #b5cea8; }
+  [data-mode="dark"] .code .highlight .na { color: #9cdcfe; }
+  [data-mode="dark"] .code .highlight .nb { color: #4ec9b0; }
+  [data-mode="dark"] .code .highlight .nc, [data-mode="dark"] .code .highlight .nn { color: #4ec9b0; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nd { color: #c586c0; }
+  [data-mode="dark"] .code .highlight .ne { color: #f44747; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nf { color: #dcdcaa; }
+  [data-mode="dark"] .code .highlight .ni { color: #808080; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nl { color: #c8c8c8; }
+  [data-mode="dark"] .code .highlight .no { color: #4fc1ff; }
+  [data-mode="dark"] .code .highlight .nt { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .nv, [data-mode="dark"] .code .highlight .vc, [data-mode="dark"] .code .highlight .vg, [data-mode="dark"] .code .highlight .vi, [data-mode="dark"] .code .highlight .vm { color: #9cdcfe; }
+  [data-mode="dark"] .code .highlight .o { color: #d4d4d4; }
+  [data-mode="dark"] .code .highlight .ow { color: #569cd6; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .s, [data-mode="dark"] .code .highlight .s1, [data-mode="dark"] .code .highlight .s2, [data-mode="dark"] .code .highlight .sa, [data-mode="dark"] .code .highlight .sb, [data-mode="dark"] .code .highlight .sc, [data-mode="dark"] .code .highlight .sh, [data-mode="dark"] .code .highlight .sx { color: #ce9178; }
+  [data-mode="dark"] .code .highlight .sd { color: #ce9178; font-style: italic; }
+  [data-mode="dark"] .code .highlight .se { color: #d7ba7d; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .si { color: #d7ba7d; font-weight: bold; }
+  [data-mode="dark"] .code .highlight .sr { color: #d16969; }
+  [data-mode="dark"] .code .highlight .ss { color: #9cdcfe; }
+}
diff --git a/priv/design/components/typo.css b/priv/design/components/typo.css
index 2729c4b..947ee9d 100644
--- a/priv/design/components/typo.css
+++ b/priv/design/components/typo.css
@@ -285,17 +285,4 @@
     flex-direction: column;
     gap: var(--spacing-ui-gap-lg);
   }
-
-  .typo pre {
-    @apply scrollbar scrollbar--sm;
-
-    font-family: var(--font-code);
-    font-size: var(--text-ui-sm);
-    line-height: var(--text-ui-sm--line-height);
-    padding: var(--spacing-ui-padding-sm);
-    background-color: var(--color-ui);
-    color: var(--color-ui--text);
-    border: 1px solid var(--color-ui--border);
-    overflow: auto;
-  }
 }
diff --git a/priv/static/accordion.mjs b/priv/static/accordion.mjs
index 2c6373d..939c673 100644
--- a/priv/static/accordion.mjs
+++ b/priv/static/accordion.mjs
@@ -22,9 +22,9 @@ import {
   queryAll,
   remove,
   warn
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+accordion@1.34.0/node_modules/@zag-js/accordion/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+accordion@1.34.1/node_modules/@zag-js/accordion/dist/index.mjs
 var anatomy = createAnatomy("accordion").parts("root", "item", "itemTrigger", "itemContent", "itemIndicator");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `accordion:${ctx.id}`;
diff --git a/priv/static/angle-slider.mjs b/priv/static/angle-slider.mjs
index 5a38f0b..7bcb190 100644
--- a/priv/static/angle-slider.mjs
+++ b/priv/static/angle-slider.mjs
@@ -1,7 +1,7 @@
 import {
   createRect,
   getPointAngle
-} from "./chunk-FEZIYMNT.mjs";
+} from "./chunk-QHOSSHQC.mjs";
 import {
   Component,
   VanillaMachine,
@@ -11,6 +11,7 @@ import {
   createSplitProps,
   dataAttr,
   getBoolean,
+  getEventKey,
   getEventPoint,
   getEventStep,
   getNativeEvent,
@@ -22,9 +23,9 @@ import {
   setElementValue,
   snapValueToStep,
   trackPointerMove
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+angle-slider@1.34.0/node_modules/@zag-js/angle-slider/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+angle-slider@1.34.1/node_modules/@zag-js/angle-slider/dist/index.mjs
 var anatomy = createAnatomy("angle-slider").parts(
   "root",
   "label",
@@ -47,14 +48,31 @@ var getControlEl = (ctx) => ctx.getById(getControlId(ctx));
 var getThumbEl = (ctx) => ctx.getById(getThumbId(ctx));
 var MIN_VALUE = 0;
 var MAX_VALUE = 359;
-function getAngle(controlEl, point, angularOffset) {
+function mirrorAngle(angle) {
+  return (360 - angle) % 360;
+}
+function getAngle(controlEl, point, angularOffset, dir) {
   const rect = createRect(controlEl.getBoundingClientRect());
-  const angle = getPointAngle(rect, point);
+  let angle = getPointAngle(rect, point);
   if (angularOffset != null) {
     return angle - angularOffset;
   }
+  if (dir === "rtl") {
+    angle = mirrorAngle(angle);
+  }
   return angle;
 }
+function getPointerValue(controlEl, point, angularOffset, value, dir) {
+  if (angularOffset == null) {
+    return getAngle(controlEl, point, null, dir);
+  }
+  const angle = getAngle(controlEl, point);
+  const clickAngle = value + angularOffset;
+  return dir === "rtl" ? value + clickAngle - angle : angle - angularOffset;
+}
+function getDisplayAngle(value, dir) {
+  return dir === "rtl" ? mirrorAngle(value) : value;
+}
 function clampAngle(degree) {
   return Math.min(Math.max(degree, MIN_VALUE), MAX_VALUE);
 }
@@ -72,6 +90,8 @@ function connect(service, normalize) {
   const dragging = state.matches("dragging");
   const value = context.get("value");
   const valueAsDegree = computed("valueAsDegree");
+  const dir = prop("dir");
+  const displayAngle = getDisplayAngle(value, dir);
   const disabled = prop("disabled");
   const invalid = prop("invalid");
   const readOnly = prop("readOnly");
@@ -89,12 +109,13 @@ function connect(service, normalize) {
       return normalize.element({
         ...parts.root.attrs,
         id: getRootId(scope),
+        dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-invalid": dataAttr(invalid),
         "data-readonly": dataAttr(readOnly),
         style: {
           "--value": value,
-          "--angle": valueAsDegree
+          "--angle": `${displayAngle}deg`
         }
       });
     },
@@ -103,6 +124,7 @@ function connect(service, normalize) {
         ...parts.label.attrs,
         id: getLabelId(scope),
         htmlFor: getHiddenInputId(scope),
+        dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-invalid": dataAttr(invalid),
         "data-readonly": dataAttr(readOnly),
@@ -118,7 +140,8 @@ function connect(service, normalize) {
         type: "hidden",
         value,
         name: prop("name"),
-        id: getHiddenInputId(scope)
+        id: getHiddenInputId(scope),
+        dir: prop("dir")
       });
     },
     getControlProps() {
@@ -126,6 +149,7 @@ function connect(service, normalize) {
         ...parts.control.attrs,
         role: "presentation",
         id: getControlId(scope),
+        dir: prop("dir"),
         "data-disabled": dataAttr(disabled),
         "data-invalid": dataAttr(invalid),
         "data-readonly": dataAttr(readOnly),
@@ -157,6 +181,7 @@ function connect(service, normalize) {
         ...parts.thumb.attrs,
         id: getThumbId(scope),
         role: "slider",
+        dir: prop("dir"),
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy ?? getLabelId(scope),
         "aria-valuemax": 360,
@@ -175,25 +200,34 @@ function connect(service, normalize) {
         onKeyDown(event) {
           if (!interactive) return;
           const step = getEventStep(event) * prop("step");
-          switch (event.key) {
-            case "ArrowLeft":
-            case "ArrowUp":
-              event.preventDefault();
+          const keyMap = {
+            ArrowLeft() {
+              send({ type: "THUMB.ARROW_DEC", step });
+            },
+            ArrowUp() {
               send({ type: "THUMB.ARROW_DEC", step });
-              break;
-            case "ArrowRight":
-            case "ArrowDown":
-              event.preventDefault();
+            },
+            ArrowRight() {
               send({ type: "THUMB.ARROW_INC", step });
-              break;
-            case "Home":
-              event.preventDefault();
+            },
+            ArrowDown() {
+              send({ type: "THUMB.ARROW_INC", step });
+            },
+            Home() {
               send({ type: "THUMB.HOME" });
-              break;
-            case "End":
-              event.preventDefault();
+            },
+            End() {
               send({ type: "THUMB.END" });
-              break;
+            }
+          };
+          const key = getEventKey(event, {
+            dir: prop("dir"),
+            orientation: "horizontal"
+          });
+          const exec = keyMap[key];
+          if (exec) {
+            exec(event);
+            event.preventDefault();
           }
         },
         style: {
@@ -204,12 +238,14 @@ function connect(service, normalize) {
     getValueTextProps() {
       return normalize.element({
         ...parts.valueText.attrs,
-        id: getValueTextId(scope)
+        id: getValueTextId(scope),
+        dir: prop("dir")
       });
     },
     getMarkerGroupProps() {
       return normalize.element({
-        ...parts.markerGroup.attrs
+        ...parts.markerGroup.attrs,
+        dir: prop("dir")
       });
     },
     getMarkerProps(props2) {
@@ -221,14 +257,17 @@ function connect(service, normalize) {
       } else {
         markerState = "at-value";
       }
+      const markerDisplayAngle = getDisplayAngle(props2.value, dir);
       return normalize.element({
         ...parts.marker.attrs,
+        dir: prop("dir"),
         "data-value": props2.value,
         "data-state": markerState,
         "data-disabled": dataAttr(disabled),
         style: {
           "--marker-value": props2.value,
-          rotate: `calc(var(--marker-value) * 1deg)`
+          "--marker-display-value": markerDisplayAngle,
+          rotate: `calc(var(--marker-display-value) * 1deg)`
         }
       });
     }
@@ -352,7 +391,8 @@ var machine = createMachine({
         const controlEl = getControlEl(scope);
         if (!controlEl) return;
         const angularOffset = refs.get("thumbDragOffset");
-        const deg = getAngle(controlEl, event.point, angularOffset);
+        const value = context.get("value");
+        const deg = getPointerValue(controlEl, event.point, angularOffset, value, prop("dir"));
         context.set("value", constrainAngle(deg, prop("step")));
       },
       setValueToMin({ context }) {
diff --git a/priv/static/avatar.mjs b/priv/static/avatar.mjs
index f90feee..68a9bf9 100644
--- a/priv/static/avatar.mjs
+++ b/priv/static/avatar.mjs
@@ -9,9 +9,9 @@ import {
   normalizeProps,
   observeAttributes,
   observeChildren
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+avatar@1.34.0/node_modules/@zag-js/avatar/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+avatar@1.34.1/node_modules/@zag-js/avatar/dist/index.mjs
 var anatomy = createAnatomy("avatar").parts("root", "image", "fallback");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `avatar:${ctx.id}`;
diff --git a/priv/static/carousel.mjs b/priv/static/carousel.mjs
index 3a8e2b9..940ea44 100644
--- a/priv/static/carousel.mjs
+++ b/priv/static/carousel.mjs
@@ -34,9 +34,9 @@ import {
   throttle,
   trackPointerMove,
   uniq
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+scroll-snap@1.34.0/node_modules/@zag-js/scroll-snap/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+scroll-snap@1.34.1/node_modules/@zag-js/scroll-snap/dist/index.mjs
 var getDirection = (element) => getComputedStyle2(element).direction;
 function getScrollPadding(element) {
   const style = getComputedStyle2(element);
@@ -198,7 +198,7 @@ function findSnapPoint(parent, axis, predicate) {
 var uniq2 = (arr) => [...new Set(arr)];
 var clamp = (min, max) => (value) => Math.max(min, Math.min(max, value));
 
-// ../node_modules/.pnpm/@zag-js+carousel@1.34.0/node_modules/@zag-js/carousel/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+carousel@1.34.1/node_modules/@zag-js/carousel/dist/index.mjs
 var anatomy = createAnatomy("carousel").parts(
   "root",
   "itemGroup",
diff --git a/priv/static/checkbox.mjs b/priv/static/checkbox.mjs
index 90a7341..015541c 100644
--- a/priv/static/checkbox.mjs
+++ b/priv/static/checkbox.mjs
@@ -1,7 +1,7 @@
 import {
   isFocusVisible,
   trackFocusVisible
-} from "./chunk-GXGJDSCU.mjs";
+} from "./chunk-2QLEEEGG.mjs";
 import {
   Component,
   VanillaMachine,
@@ -21,9 +21,9 @@ import {
   trackFormControl,
   trackPress,
   visuallyHiddenStyle
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+checkbox@1.34.0/node_modules/@zag-js/checkbox/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+checkbox@1.34.1/node_modules/@zag-js/checkbox/dist/index.mjs
 var anatomy = createAnatomy("checkbox").parts("root", "label", "control", "indicator");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `checkbox:${ctx.id}`;
diff --git a/priv/static/chunk-2QLEEEGG.mjs b/priv/static/chunk-2QLEEEGG.mjs
new file mode 100644
index 0000000..e99849d
--- /dev/null
+++ b/priv/static/chunk-2QLEEEGG.mjs
@@ -0,0 +1,174 @@
+import {
+  getActiveElement,
+  getDocument,
+  getEventTarget,
+  getWindow,
+  isMac,
+  isVirtualClick
+} from "./chunk-RUWIVFVB.mjs";
+
+// ../node_modules/.pnpm/@zag-js+focus-visible@1.34.1/node_modules/@zag-js/focus-visible/dist/index.mjs
+function isValidKey(e) {
+  return !(e.metaKey || !isMac() && e.altKey || e.ctrlKey || e.key === "Control" || e.key === "Shift" || e.key === "Meta");
+}
+var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
+function isKeyboardFocusEvent(isTextInput, modality, e) {
+  const eventTarget = e ? getEventTarget(e) : null;
+  const doc = getDocument(eventTarget);
+  const win = getWindow(eventTarget);
+  const activeElement = getActiveElement(doc);
+  isTextInput = isTextInput || activeElement instanceof win.HTMLInputElement && !nonTextInputTypes.has(activeElement?.type) || activeElement instanceof win.HTMLTextAreaElement || activeElement instanceof win.HTMLElement && activeElement.isContentEditable;
+  return !(isTextInput && modality === "keyboard" && e instanceof win.KeyboardEvent && !Reflect.has(FOCUS_VISIBLE_INPUT_KEYS, e.key));
+}
+var currentModality = null;
+var changeHandlers = /* @__PURE__ */ new Set();
+var listenerMap = /* @__PURE__ */ new Map();
+var hasEventBeforeFocus = false;
+var hasBlurredWindowRecently = false;
+var ignoreFocusEvent = false;
+var FOCUS_VISIBLE_INPUT_KEYS = {
+  Tab: true,
+  Escape: true
+};
+function triggerChangeHandlers(modality, e) {
+  for (let handler of changeHandlers) {
+    handler(modality, e);
+  }
+}
+function handleKeyboardEvent(e) {
+  hasEventBeforeFocus = true;
+  if (isValidKey(e)) {
+    currentModality = "keyboard";
+    triggerChangeHandlers("keyboard", e);
+  }
+}
+function handlePointerEvent(e) {
+  currentModality = "pointer";
+  if (e.type === "mousedown" || e.type === "pointerdown") {
+    hasEventBeforeFocus = true;
+    triggerChangeHandlers("pointer", e);
+  }
+}
+function handleClickEvent(e) {
+  if (isVirtualClick(e)) {
+    hasEventBeforeFocus = true;
+    currentModality = "virtual";
+  }
+}
+function handleFocusEvent(e) {
+  const target = getEventTarget(e);
+  if (target === getWindow(target) || target === getDocument(target) || ignoreFocusEvent || !e.isTrusted) {
+    return;
+  }
+  if (!hasEventBeforeFocus && !hasBlurredWindowRecently) {
+    currentModality = "virtual";
+    triggerChangeHandlers("virtual", e);
+  }
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = false;
+}
+function handleWindowBlur() {
+  hasEventBeforeFocus = false;
+  hasBlurredWindowRecently = true;
+}
+function setupGlobalFocusEvents(root) {
+  if (typeof window === "undefined" || listenerMap.get(getWindow(root))) {
+    return;
+  }
+  const win = getWindow(root);
+  const doc = getDocument(root);
+  let focus = win.HTMLElement.prototype.focus;
+  function patchedFocus() {
+    hasEventBeforeFocus = true;
+    focus.apply(this, arguments);
+  }
+  try {
+    Object.defineProperty(win.HTMLElement.prototype, "focus", {
+      configurable: true,
+      value: patchedFocus
+    });
+  } catch {
+  }
+  doc.addEventListener("keydown", handleKeyboardEvent, true);
+  doc.addEventListener("keyup", handleKeyboardEvent, true);
+  doc.addEventListener("click", handleClickEvent, true);
+  win.addEventListener("focus", handleFocusEvent, true);
+  win.addEventListener("blur", handleWindowBlur, false);
+  if (typeof win.PointerEvent !== "undefined") {
+    doc.addEventListener("pointerdown", handlePointerEvent, true);
+    doc.addEventListener("pointermove", handlePointerEvent, true);
+    doc.addEventListener("pointerup", handlePointerEvent, true);
+  } else {
+    doc.addEventListener("mousedown", handlePointerEvent, true);
+    doc.addEventListener("mousemove", handlePointerEvent, true);
+    doc.addEventListener("mouseup", handlePointerEvent, true);
+  }
+  win.addEventListener(
+    "beforeunload",
+    () => {
+      tearDownWindowFocusTracking(root);
+    },
+    { once: true }
+  );
+  listenerMap.set(win, { focus });
+}
+var tearDownWindowFocusTracking = (root, loadListener) => {
+  const win = getWindow(root);
+  const doc = getDocument(root);
+  const listenerData = listenerMap.get(win);
+  if (!listenerData) {
+    return;
+  }
+  try {
+    Object.defineProperty(win.HTMLElement.prototype, "focus", {
+      configurable: true,
+      value: listenerData.focus
+    });
+  } catch {
+  }
+  doc.removeEventListener("keydown", handleKeyboardEvent, true);
+  doc.removeEventListener("keyup", handleKeyboardEvent, true);
+  doc.removeEventListener("click", handleClickEvent, true);
+  win.removeEventListener("focus", handleFocusEvent, true);
+  win.removeEventListener("blur", handleWindowBlur, false);
+  if (typeof win.PointerEvent !== "undefined") {
+    doc.removeEventListener("pointerdown", handlePointerEvent, true);
+    doc.removeEventListener("pointermove", handlePointerEvent, true);
+    doc.removeEventListener("pointerup", handlePointerEvent, true);
+  } else {
+    doc.removeEventListener("mousedown", handlePointerEvent, true);
+    doc.removeEventListener("mousemove", handlePointerEvent, true);
+    doc.removeEventListener("mouseup", handlePointerEvent, true);
+  }
+  listenerMap.delete(win);
+};
+function getInteractionModality() {
+  return currentModality;
+}
+function setInteractionModality(modality) {
+  currentModality = modality;
+  triggerChangeHandlers(modality, null);
+}
+function isFocusVisible() {
+  return currentModality === "keyboard" || currentModality === "virtual";
+}
+function trackFocusVisible(props = {}) {
+  const { isTextInput, autoFocus, onChange, root } = props;
+  setupGlobalFocusEvents(root);
+  onChange?.({ isFocusVisible: autoFocus || isFocusVisible(), modality: currentModality });
+  const handler = (modality, e) => {
+    if (!isKeyboardFocusEvent(!!isTextInput, modality, e)) return;
+    onChange?.({ isFocusVisible: isFocusVisible(), modality });
+  };
+  changeHandlers.add(handler);
+  return () => {
+    changeHandlers.delete(handler);
+  };
+}
+
+export {
+  getInteractionModality,
+  setInteractionModality,
+  isFocusVisible,
+  trackFocusVisible
+};
diff --git a/priv/static/chunk-EBQGC3XC.mjs b/priv/static/chunk-EBQGC3XC.mjs
new file mode 100644
index 0000000..ee7255b
--- /dev/null
+++ b/priv/static/chunk-EBQGC3XC.mjs
@@ -0,0 +1,237 @@
+import {
+  addDomEvent,
+  callAll,
+  contains,
+  getDocument,
+  getEventTarget,
+  getNearestOverflowAncestor,
+  getWindow,
+  isContextMenuEvent,
+  isControlledElement,
+  isFocusable,
+  isHTMLElement,
+  isShadowRoot,
+  isTouchDevice,
+  raf
+} from "./chunk-RUWIVFVB.mjs";
+
+// ../node_modules/.pnpm/@zag-js+interact-outside@1.34.1/node_modules/@zag-js/interact-outside/dist/index.mjs
+function getWindowFrames(win) {
+  const frames = {
+    each(cb) {
+      for (let i = 0; i < win.frames?.length; i += 1) {
+        const frame = win.frames[i];
+        if (frame) cb(frame);
+      }
+    },
+    addEventListener(event, listener, options) {
+      frames.each((frame) => {
+        try {
+          frame.document.addEventListener(event, listener, options);
+        } catch {
+        }
+      });
+      return () => {
+        try {
+          frames.removeEventListener(event, listener, options);
+        } catch {
+        }
+      };
+    },
+    removeEventListener(event, listener, options) {
+      frames.each((frame) => {
+        try {
+          frame.document.removeEventListener(event, listener, options);
+        } catch {
+        }
+      });
+    }
+  };
+  return frames;
+}
+function getParentWindow(win) {
+  const parent = win.frameElement != null ? win.parent : null;
+  return {
+    addEventListener: (event, listener, options) => {
+      try {
+        parent?.addEventListener(event, listener, options);
+      } catch {
+      }
+      return () => {
+        try {
+          parent?.removeEventListener(event, listener, options);
+        } catch {
+        }
+      };
+    },
+    removeEventListener: (event, listener, options) => {
+      try {
+        parent?.removeEventListener(event, listener, options);
+      } catch {
+      }
+    }
+  };
+}
+var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
+var FOCUS_OUTSIDE_EVENT = "focus.outside";
+function isComposedPathFocusable(composedPath) {
+  for (const node of composedPath) {
+    if (isHTMLElement(node) && isFocusable(node)) return true;
+  }
+  return false;
+}
+var isPointerEvent = (event) => "clientY" in event;
+function isEventPointWithin(node, event) {
+  if (!isPointerEvent(event) || !node) return false;
+  const rect = node.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return false;
+  return rect.top <= event.clientY && event.clientY <= rect.top + rect.height && rect.left <= event.clientX && event.clientX <= rect.left + rect.width;
+}
+function isPointInRect(rect, point) {
+  return rect.y <= point.y && point.y <= rect.y + rect.height && rect.x <= point.x && point.x <= rect.x + rect.width;
+}
+function isEventWithinScrollbar(event, ancestor) {
+  if (!ancestor || !isPointerEvent(event)) return false;
+  const isScrollableY = ancestor.scrollHeight > ancestor.clientHeight;
+  const onScrollbarY = isScrollableY && event.clientX > ancestor.offsetLeft + ancestor.clientWidth;
+  const isScrollableX = ancestor.scrollWidth > ancestor.clientWidth;
+  const onScrollbarX = isScrollableX && event.clientY > ancestor.offsetTop + ancestor.clientHeight;
+  const rect = {
+    x: ancestor.offsetLeft,
+    y: ancestor.offsetTop,
+    width: ancestor.clientWidth + (isScrollableY ? 16 : 0),
+    height: ancestor.clientHeight + (isScrollableX ? 16 : 0)
+  };
+  const point = {
+    x: event.clientX,
+    y: event.clientY
+  };
+  if (!isPointInRect(rect, point)) return false;
+  return onScrollbarY || onScrollbarX;
+}
+function trackInteractOutsideImpl(node, options) {
+  const {
+    exclude,
+    onFocusOutside,
+    onPointerDownOutside,
+    onInteractOutside,
+    defer,
+    followControlledElements = true
+  } = options;
+  if (!node) return;
+  const doc = getDocument(node);
+  const win = getWindow(node);
+  const frames = getWindowFrames(win);
+  const parentWin = getParentWindow(win);
+  function isEventOutside(event, target) {
+    if (!isHTMLElement(target)) return false;
+    if (!target.isConnected) return false;
+    if (contains(node, target)) return false;
+    if (isEventPointWithin(node, event)) return false;
+    if (followControlledElements && isControlledElement(node, target)) return false;
+    const triggerEl = doc.querySelector(`[aria-controls="${node.id}"]`);
+    if (triggerEl) {
+      const triggerAncestor = getNearestOverflowAncestor(triggerEl);
+      if (isEventWithinScrollbar(event, triggerAncestor)) return false;
+    }
+    const nodeAncestor = getNearestOverflowAncestor(node);
+    if (isEventWithinScrollbar(event, nodeAncestor)) return false;
+    return !exclude?.(target);
+  }
+  const pointerdownCleanups = /* @__PURE__ */ new Set();
+  const isInShadowRoot = isShadowRoot(node?.getRootNode());
+  function onPointerDown(event) {
+    function handler(clickEvent) {
+      const func = defer && !isTouchDevice() ? raf : (v) => v();
+      const evt = clickEvent ?? event;
+      const composedPath = evt?.composedPath?.() ?? [evt?.target];
+      func(() => {
+        const target = isInShadowRoot ? composedPath[0] : getEventTarget(event);
+        if (!node || !isEventOutside(event, target)) return;
+        if (onPointerDownOutside || onInteractOutside) {
+          const handler2 = callAll(onPointerDownOutside, onInteractOutside);
+          node.addEventListener(POINTER_OUTSIDE_EVENT, handler2, { once: true });
+        }
+        fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
+          bubbles: false,
+          cancelable: true,
+          detail: {
+            originalEvent: evt,
+            contextmenu: isContextMenuEvent(evt),
+            focusable: isComposedPathFocusable(composedPath),
+            target
+          }
+        });
+      });
+    }
+    if (event.pointerType === "touch") {
+      pointerdownCleanups.forEach((fn) => fn());
+      pointerdownCleanups.add(addDomEvent(doc, "click", handler, { once: true }));
+      pointerdownCleanups.add(parentWin.addEventListener("click", handler, { once: true }));
+      pointerdownCleanups.add(frames.addEventListener("click", handler, { once: true }));
+    } else {
+      handler();
+    }
+  }
+  const cleanups = /* @__PURE__ */ new Set();
+  const timer = setTimeout(() => {
+    cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true));
+    cleanups.add(parentWin.addEventListener("pointerdown", onPointerDown, true));
+    cleanups.add(frames.addEventListener("pointerdown", onPointerDown, true));
+  }, 0);
+  function onFocusin(event) {
+    const func = defer ? raf : (v) => v();
+    func(() => {
+      const composedPath = event?.composedPath?.() ?? [event?.target];
+      const target = isInShadowRoot ? composedPath[0] : getEventTarget(event);
+      if (!node || !isEventOutside(event, target)) return;
+      if (onFocusOutside || onInteractOutside) {
+        const handler = callAll(onFocusOutside, onInteractOutside);
+        node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
+      }
+      fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
+        bubbles: false,
+        cancelable: true,
+        detail: {
+          originalEvent: event,
+          contextmenu: false,
+          focusable: isFocusable(target),
+          target
+        }
+      });
+    });
+  }
+  if (!isTouchDevice()) {
+    cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
+    cleanups.add(parentWin.addEventListener("focusin", onFocusin, true));
+    cleanups.add(frames.addEventListener("focusin", onFocusin, true));
+  }
+  return () => {
+    clearTimeout(timer);
+    pointerdownCleanups.forEach((fn) => fn());
+    cleanups.forEach((fn) => fn());
+  };
+}
+function trackInteractOutside(nodeOrFn, options) {
+  const { defer } = options;
+  const func = defer ? raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
+      cleanups.push(trackInteractOutsideImpl(node, options));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+function fireCustomEvent(el, type, init) {
+  const win = el.ownerDocument.defaultView || window;
+  const event = new win.CustomEvent(type, init);
+  return el.dispatchEvent(event);
+}
+
+export {
+  trackInteractOutside
+};
diff --git a/priv/static/chunk-GN3NEUUU.mjs b/priv/static/chunk-GN3NEUUU.mjs
new file mode 100644
index 0000000..f7ec740
--- /dev/null
+++ b/priv/static/chunk-GN3NEUUU.mjs
@@ -0,0 +1,1988 @@
+import {
+  compact,
+  getComputedStyle as getComputedStyle2,
+  getWindow,
+  isHTMLElement,
+  isNull,
+  noop,
+  raf
+} from "./chunk-RUWIVFVB.mjs";
+
+// ../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+var sides = ["top", "right", "bottom", "left"];
+var min = Math.min;
+var max = Math.max;
+var round = Math.round;
+var floor = Math.floor;
+var createCoords = (v) => ({
+  x: v,
+  y: v
+});
+var oppositeSideMap = {
+  left: "right",
+  right: "left",
+  bottom: "top",
+  top: "bottom"
+};
+var oppositeAlignmentMap = {
+  start: "end",
+  end: "start"
+};
+function clamp(start, value, end) {
+  return max(start, min(value, end));
+}
+function evaluate(value, param) {
+  return typeof value === "function" ? value(param) : value;
+}
+function getSide(placement) {
+  return placement.split("-")[0];
+}
+function getAlignment(placement) {
+  return placement.split("-")[1];
+}
+function getOppositeAxis(axis) {
+  return axis === "x" ? "y" : "x";
+}
+function getAxisLength(axis) {
+  return axis === "y" ? "height" : "width";
+}
+var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
+function getSideAxis(placement) {
+  return yAxisSides.has(getSide(placement)) ? "y" : "x";
+}
+function getAlignmentAxis(placement) {
+  return getOppositeAxis(getSideAxis(placement));
+}
+function getAlignmentSides(placement, rects, rtl) {
+  if (rtl === void 0) {
+    rtl = false;
+  }
+  const alignment = getAlignment(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const length = getAxisLength(alignmentAxis);
+  let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+  if (rects.reference[length] > rects.floating[length]) {
+    mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+  }
+  return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+}
+function getExpandedPlacements(placement) {
+  const oppositePlacement = getOppositePlacement(placement);
+  return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+}
+function getOppositeAlignmentPlacement(placement) {
+  return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+}
+var lrPlacement = ["left", "right"];
+var rlPlacement = ["right", "left"];
+var tbPlacement = ["top", "bottom"];
+var btPlacement = ["bottom", "top"];
+function getSideList(side, isStart, rtl) {
+  switch (side) {
+    case "top":
+    case "bottom":
+      if (rtl) return isStart ? rlPlacement : lrPlacement;
+      return isStart ? lrPlacement : rlPlacement;
+    case "left":
+    case "right":
+      return isStart ? tbPlacement : btPlacement;
+    default:
+      return [];
+  }
+}
+function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+  const alignment = getAlignment(placement);
+  let list = getSideList(getSide(placement), direction === "start", rtl);
+  if (alignment) {
+    list = list.map((side) => side + "-" + alignment);
+    if (flipAlignment) {
+      list = list.concat(list.map(getOppositeAlignmentPlacement));
+    }
+  }
+  return list;
+}
+function getOppositePlacement(placement) {
+  return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+}
+function expandPaddingObject(padding) {
+  return {
+    top: 0,
+    right: 0,
+    bottom: 0,
+    left: 0,
+    ...padding
+  };
+}
+function getPaddingObject(padding) {
+  return typeof padding !== "number" ? expandPaddingObject(padding) : {
+    top: padding,
+    right: padding,
+    bottom: padding,
+    left: padding
+  };
+}
+function rectToClientRect(rect) {
+  const {
+    x,
+    y,
+    width,
+    height
+  } = rect;
+  return {
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+    x,
+    y
+  };
+}
+
+// ../node_modules/.pnpm/@floating-ui+core@1.7.4/node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+function computeCoordsFromPlacement(_ref, placement, rtl) {
+  let {
+    reference,
+    floating
+  } = _ref;
+  const sideAxis = getSideAxis(placement);
+  const alignmentAxis = getAlignmentAxis(placement);
+  const alignLength = getAxisLength(alignmentAxis);
+  const side = getSide(placement);
+  const isVertical = sideAxis === "y";
+  const commonX = reference.x + reference.width / 2 - floating.width / 2;
+  const commonY = reference.y + reference.height / 2 - floating.height / 2;
+  const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+  let coords;
+  switch (side) {
+    case "top":
+      coords = {
+        x: commonX,
+        y: reference.y - floating.height
+      };
+      break;
+    case "bottom":
+      coords = {
+        x: commonX,
+        y: reference.y + reference.height
+      };
+      break;
+    case "right":
+      coords = {
+        x: reference.x + reference.width,
+        y: commonY
+      };
+      break;
+    case "left":
+      coords = {
+        x: reference.x - floating.width,
+        y: commonY
+      };
+      break;
+    default:
+      coords = {
+        x: reference.x,
+        y: reference.y
+      };
+  }
+  switch (getAlignment(placement)) {
+    case "start":
+      coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+    case "end":
+      coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+      break;
+  }
+  return coords;
+}
+async function detectOverflow(state, options) {
+  var _await$platform$isEle;
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    x,
+    y,
+    platform: platform2,
+    rects,
+    elements,
+    strategy
+  } = state;
+  const {
+    boundary = "clippingAncestors",
+    rootBoundary = "viewport",
+    elementContext = "floating",
+    altBoundary = false,
+    padding = 0
+  } = evaluate(options, state);
+  const paddingObject = getPaddingObject(padding);
+  const altContext = elementContext === "floating" ? "reference" : "floating";
+  const element = elements[altBoundary ? altContext : elementContext];
+  const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+    element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+    boundary,
+    rootBoundary,
+    strategy
+  }));
+  const rect = elementContext === "floating" ? {
+    x,
+    y,
+    width: rects.floating.width,
+    height: rects.floating.height
+  } : rects.reference;
+  const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+  const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+    x: 1,
+    y: 1
+  } : {
+    x: 1,
+    y: 1
+  };
+  const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  }) : rect);
+  return {
+    top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+    bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+    left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+    right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+  };
+}
+var computePosition = async (reference, floating, config) => {
+  const {
+    placement = "bottom",
+    strategy = "absolute",
+    middleware = [],
+    platform: platform2
+  } = config;
+  const validMiddleware = middleware.filter(Boolean);
+  const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
+  let rects = await platform2.getElementRects({
+    reference,
+    floating,
+    strategy
+  });
+  let {
+    x,
+    y
+  } = computeCoordsFromPlacement(rects, placement, rtl);
+  let statefulPlacement = placement;
+  let middlewareData = {};
+  let resetCount = 0;
+  for (let i = 0; i < validMiddleware.length; i++) {
+    var _platform$detectOverf;
+    const {
+      name,
+      fn
+    } = validMiddleware[i];
+    const {
+      x: nextX,
+      y: nextY,
+      data,
+      reset
+    } = await fn({
+      x,
+      y,
+      initialPlacement: placement,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData,
+      rects,
+      platform: {
+        ...platform2,
+        detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+      },
+      elements: {
+        reference,
+        floating
+      }
+    });
+    x = nextX != null ? nextX : x;
+    y = nextY != null ? nextY : y;
+    middlewareData = {
+      ...middlewareData,
+      [name]: {
+        ...middlewareData[name],
+        ...data
+      }
+    };
+    if (reset && resetCount <= 50) {
+      resetCount++;
+      if (typeof reset === "object") {
+        if (reset.placement) {
+          statefulPlacement = reset.placement;
+        }
+        if (reset.rects) {
+          rects = reset.rects === true ? await platform2.getElementRects({
+            reference,
+            floating,
+            strategy
+          }) : reset.rects;
+        }
+        ({
+          x,
+          y
+        } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+      }
+      i = -1;
+    }
+  }
+  return {
+    x,
+    y,
+    placement: statefulPlacement,
+    strategy,
+    middlewareData
+  };
+};
+var arrow = (options) => ({
+  name: "arrow",
+  options,
+  async fn(state) {
+    const {
+      x,
+      y,
+      placement,
+      rects,
+      platform: platform2,
+      elements,
+      middlewareData
+    } = state;
+    const {
+      element,
+      padding = 0
+    } = evaluate(options, state) || {};
+    if (element == null) {
+      return {};
+    }
+    const paddingObject = getPaddingObject(padding);
+    const coords = {
+      x,
+      y
+    };
+    const axis = getAlignmentAxis(placement);
+    const length = getAxisLength(axis);
+    const arrowDimensions = await platform2.getDimensions(element);
+    const isYAxis = axis === "y";
+    const minProp = isYAxis ? "top" : "left";
+    const maxProp = isYAxis ? "bottom" : "right";
+    const clientProp = isYAxis ? "clientHeight" : "clientWidth";
+    const endDiff = rects.reference[length] + rects.reference[axis] - coords[axis] - rects.floating[length];
+    const startDiff = coords[axis] - rects.reference[axis];
+    const arrowOffsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(element));
+    let clientSize = arrowOffsetParent ? arrowOffsetParent[clientProp] : 0;
+    if (!clientSize || !await (platform2.isElement == null ? void 0 : platform2.isElement(arrowOffsetParent))) {
+      clientSize = elements.floating[clientProp] || rects.floating[length];
+    }
+    const centerToReference = endDiff / 2 - startDiff / 2;
+    const largestPossiblePadding = clientSize / 2 - arrowDimensions[length] / 2 - 1;
+    const minPadding = min(paddingObject[minProp], largestPossiblePadding);
+    const maxPadding = min(paddingObject[maxProp], largestPossiblePadding);
+    const min$1 = minPadding;
+    const max2 = clientSize - arrowDimensions[length] - maxPadding;
+    const center = clientSize / 2 - arrowDimensions[length] / 2 + centerToReference;
+    const offset3 = clamp(min$1, center, max2);
+    const shouldAddOffset = !middlewareData.arrow && getAlignment(placement) != null && center !== offset3 && rects.reference[length] / 2 - (center < min$1 ? minPadding : maxPadding) - arrowDimensions[length] / 2 < 0;
+    const alignmentOffset = shouldAddOffset ? center < min$1 ? center - min$1 : center - max2 : 0;
+    return {
+      [axis]: coords[axis] + alignmentOffset,
+      data: {
+        [axis]: offset3,
+        centerOffset: center - offset3 - alignmentOffset,
+        ...shouldAddOffset && {
+          alignmentOffset
+        }
+      },
+      reset: shouldAddOffset
+    };
+  }
+});
+var flip = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "flip",
+    options,
+    async fn(state) {
+      var _middlewareData$arrow, _middlewareData$flip;
+      const {
+        placement,
+        middlewareData,
+        rects,
+        initialPlacement,
+        platform: platform2,
+        elements
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true,
+        fallbackPlacements: specifiedFallbackPlacements,
+        fallbackStrategy = "bestFit",
+        fallbackAxisSideDirection = "none",
+        flipAlignment = true,
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      const side = getSide(placement);
+      const initialSideAxis = getSideAxis(initialPlacement);
+      const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+      const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+      const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+      const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
+      if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+        fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+      }
+      const placements2 = [initialPlacement, ...fallbackPlacements];
+      const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
+      const overflows = [];
+      let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+      if (checkMainAxis) {
+        overflows.push(overflow[side]);
+      }
+      if (checkCrossAxis) {
+        const sides2 = getAlignmentSides(placement, rects, rtl);
+        overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
+      }
+      overflowsData = [...overflowsData, {
+        placement,
+        overflows
+      }];
+      if (!overflows.every((side2) => side2 <= 0)) {
+        var _middlewareData$flip2, _overflowsData$filter;
+        const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+        const nextPlacement = placements2[nextIndex];
+        if (nextPlacement) {
+          const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+          if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
+          // overflows the main axis.
+          overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
+            return {
+              data: {
+                index: nextIndex,
+                overflows: overflowsData
+              },
+              reset: {
+                placement: nextPlacement
+              }
+            };
+          }
+        }
+        let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+        if (!resetPlacement) {
+          switch (fallbackStrategy) {
+            case "bestFit": {
+              var _overflowsData$filter2;
+              const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
+                if (hasFallbackAxisSideDirection) {
+                  const currentSideAxis = getSideAxis(d.placement);
+                  return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
+                  // reading directions favoring greater width.
+                  currentSideAxis === "y";
+                }
+                return true;
+              }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+              if (placement2) {
+                resetPlacement = placement2;
+              }
+              break;
+            }
+            case "initialPlacement":
+              resetPlacement = initialPlacement;
+              break;
+          }
+        }
+        if (placement !== resetPlacement) {
+          return {
+            reset: {
+              placement: resetPlacement
+            }
+          };
+        }
+      }
+      return {};
+    }
+  };
+};
+function getSideOffsets(overflow, rect) {
+  return {
+    top: overflow.top - rect.height,
+    right: overflow.right - rect.width,
+    bottom: overflow.bottom - rect.height,
+    left: overflow.left - rect.width
+  };
+}
+function isAnySideFullyClipped(overflow) {
+  return sides.some((side) => overflow[side] >= 0);
+}
+var hide = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "hide",
+    options,
+    async fn(state) {
+      const {
+        rects,
+        platform: platform2
+      } = state;
+      const {
+        strategy = "referenceHidden",
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      switch (strategy) {
+        case "referenceHidden": {
+          const overflow = await platform2.detectOverflow(state, {
+            ...detectOverflowOptions,
+            elementContext: "reference"
+          });
+          const offsets = getSideOffsets(overflow, rects.reference);
+          return {
+            data: {
+              referenceHiddenOffsets: offsets,
+              referenceHidden: isAnySideFullyClipped(offsets)
+            }
+          };
+        }
+        case "escaped": {
+          const overflow = await platform2.detectOverflow(state, {
+            ...detectOverflowOptions,
+            altBoundary: true
+          });
+          const offsets = getSideOffsets(overflow, rects.floating);
+          return {
+            data: {
+              escapedOffsets: offsets,
+              escaped: isAnySideFullyClipped(offsets)
+            }
+          };
+        }
+        default: {
+          return {};
+        }
+      }
+    }
+  };
+};
+var originSides = /* @__PURE__ */ new Set(["left", "top"]);
+async function convertValueToCoords(state, options) {
+  const {
+    placement,
+    platform: platform2,
+    elements
+  } = state;
+  const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+  const side = getSide(placement);
+  const alignment = getAlignment(placement);
+  const isVertical = getSideAxis(placement) === "y";
+  const mainAxisMulti = originSides.has(side) ? -1 : 1;
+  const crossAxisMulti = rtl && isVertical ? -1 : 1;
+  const rawValue = evaluate(options, state);
+  let {
+    mainAxis,
+    crossAxis,
+    alignmentAxis
+  } = typeof rawValue === "number" ? {
+    mainAxis: rawValue,
+    crossAxis: 0,
+    alignmentAxis: null
+  } : {
+    mainAxis: rawValue.mainAxis || 0,
+    crossAxis: rawValue.crossAxis || 0,
+    alignmentAxis: rawValue.alignmentAxis
+  };
+  if (alignment && typeof alignmentAxis === "number") {
+    crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
+  }
+  return isVertical ? {
+    x: crossAxis * crossAxisMulti,
+    y: mainAxis * mainAxisMulti
+  } : {
+    x: mainAxis * mainAxisMulti,
+    y: crossAxis * crossAxisMulti
+  };
+}
+var offset = function(options) {
+  if (options === void 0) {
+    options = 0;
+  }
+  return {
+    name: "offset",
+    options,
+    async fn(state) {
+      var _middlewareData$offse, _middlewareData$arrow;
+      const {
+        x,
+        y,
+        placement,
+        middlewareData
+      } = state;
+      const diffCoords = await convertValueToCoords(state, options);
+      if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+        return {};
+      }
+      return {
+        x: x + diffCoords.x,
+        y: y + diffCoords.y,
+        data: {
+          ...diffCoords,
+          placement
+        }
+      };
+    }
+  };
+};
+var shift = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "shift",
+    options,
+    async fn(state) {
+      const {
+        x,
+        y,
+        placement,
+        platform: platform2
+      } = state;
+      const {
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = false,
+        limiter = {
+          fn: (_ref) => {
+            let {
+              x: x2,
+              y: y2
+            } = _ref;
+            return {
+              x: x2,
+              y: y2
+            };
+          }
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
+      const crossAxis = getSideAxis(getSide(placement));
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      if (checkMainAxis) {
+        const minSide = mainAxis === "y" ? "top" : "left";
+        const maxSide = mainAxis === "y" ? "bottom" : "right";
+        const min2 = mainAxisCoord + overflow[minSide];
+        const max2 = mainAxisCoord - overflow[maxSide];
+        mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+      }
+      if (checkCrossAxis) {
+        const minSide = crossAxis === "y" ? "top" : "left";
+        const maxSide = crossAxis === "y" ? "bottom" : "right";
+        const min2 = crossAxisCoord + overflow[minSide];
+        const max2 = crossAxisCoord - overflow[maxSide];
+        crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+      }
+      const limitedCoords = limiter.fn({
+        ...state,
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      });
+      return {
+        ...limitedCoords,
+        data: {
+          x: limitedCoords.x - x,
+          y: limitedCoords.y - y,
+          enabled: {
+            [mainAxis]: checkMainAxis,
+            [crossAxis]: checkCrossAxis
+          }
+        }
+      };
+    }
+  };
+};
+var limitShift = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    options,
+    fn(state) {
+      const {
+        x,
+        y,
+        placement,
+        rects,
+        middlewareData
+      } = state;
+      const {
+        offset: offset3 = 0,
+        mainAxis: checkMainAxis = true,
+        crossAxis: checkCrossAxis = true
+      } = evaluate(options, state);
+      const coords = {
+        x,
+        y
+      };
+      const crossAxis = getSideAxis(placement);
+      const mainAxis = getOppositeAxis(crossAxis);
+      let mainAxisCoord = coords[mainAxis];
+      let crossAxisCoord = coords[crossAxis];
+      const rawOffset = evaluate(offset3, state);
+      const computedOffset = typeof rawOffset === "number" ? {
+        mainAxis: rawOffset,
+        crossAxis: 0
+      } : {
+        mainAxis: 0,
+        crossAxis: 0,
+        ...rawOffset
+      };
+      if (checkMainAxis) {
+        const len = mainAxis === "y" ? "height" : "width";
+        const limitMin = rects.reference[mainAxis] - rects.floating[len] + computedOffset.mainAxis;
+        const limitMax = rects.reference[mainAxis] + rects.reference[len] - computedOffset.mainAxis;
+        if (mainAxisCoord < limitMin) {
+          mainAxisCoord = limitMin;
+        } else if (mainAxisCoord > limitMax) {
+          mainAxisCoord = limitMax;
+        }
+      }
+      if (checkCrossAxis) {
+        var _middlewareData$offse, _middlewareData$offse2;
+        const len = mainAxis === "y" ? "width" : "height";
+        const isOriginSide = originSides.has(getSide(placement));
+        const limitMin = rects.reference[crossAxis] - rects.floating[len] + (isOriginSide ? ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse[crossAxis]) || 0 : 0) + (isOriginSide ? 0 : computedOffset.crossAxis);
+        const limitMax = rects.reference[crossAxis] + rects.reference[len] + (isOriginSide ? 0 : ((_middlewareData$offse2 = middlewareData.offset) == null ? void 0 : _middlewareData$offse2[crossAxis]) || 0) - (isOriginSide ? computedOffset.crossAxis : 0);
+        if (crossAxisCoord < limitMin) {
+          crossAxisCoord = limitMin;
+        } else if (crossAxisCoord > limitMax) {
+          crossAxisCoord = limitMax;
+        }
+      }
+      return {
+        [mainAxis]: mainAxisCoord,
+        [crossAxis]: crossAxisCoord
+      };
+    }
+  };
+};
+var size = function(options) {
+  if (options === void 0) {
+    options = {};
+  }
+  return {
+    name: "size",
+    options,
+    async fn(state) {
+      var _state$middlewareData, _state$middlewareData2;
+      const {
+        placement,
+        rects,
+        platform: platform2,
+        elements
+      } = state;
+      const {
+        apply = () => {
+        },
+        ...detectOverflowOptions
+      } = evaluate(options, state);
+      const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
+      const side = getSide(placement);
+      const alignment = getAlignment(placement);
+      const isYAxis = getSideAxis(placement) === "y";
+      const {
+        width,
+        height
+      } = rects.floating;
+      let heightSide;
+      let widthSide;
+      if (side === "top" || side === "bottom") {
+        heightSide = side;
+        widthSide = alignment === (await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating)) ? "start" : "end") ? "left" : "right";
+      } else {
+        widthSide = side;
+        heightSide = alignment === "end" ? "top" : "bottom";
+      }
+      const maximumClippingHeight = height - overflow.top - overflow.bottom;
+      const maximumClippingWidth = width - overflow.left - overflow.right;
+      const overflowAvailableHeight = min(height - overflow[heightSide], maximumClippingHeight);
+      const overflowAvailableWidth = min(width - overflow[widthSide], maximumClippingWidth);
+      const noShift = !state.middlewareData.shift;
+      let availableHeight = overflowAvailableHeight;
+      let availableWidth = overflowAvailableWidth;
+      if ((_state$middlewareData = state.middlewareData.shift) != null && _state$middlewareData.enabled.x) {
+        availableWidth = maximumClippingWidth;
+      }
+      if ((_state$middlewareData2 = state.middlewareData.shift) != null && _state$middlewareData2.enabled.y) {
+        availableHeight = maximumClippingHeight;
+      }
+      if (noShift && !alignment) {
+        const xMin = max(overflow.left, 0);
+        const xMax = max(overflow.right, 0);
+        const yMin = max(overflow.top, 0);
+        const yMax = max(overflow.bottom, 0);
+        if (isYAxis) {
+          availableWidth = width - 2 * (xMin !== 0 || xMax !== 0 ? xMin + xMax : max(overflow.left, overflow.right));
+        } else {
+          availableHeight = height - 2 * (yMin !== 0 || yMax !== 0 ? yMin + yMax : max(overflow.top, overflow.bottom));
+        }
+      }
+      await apply({
+        ...state,
+        availableWidth,
+        availableHeight
+      });
+      const nextDimensions = await platform2.getDimensions(elements.floating);
+      if (width !== nextDimensions.width || height !== nextDimensions.height) {
+        return {
+          reset: {
+            rects: true
+          }
+        };
+      }
+      return {};
+    }
+  };
+};
+
+// ../node_modules/.pnpm/@floating-ui+utils@0.2.10/node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+function hasWindow() {
+  return typeof window !== "undefined";
+}
+function getNodeName(node) {
+  if (isNode(node)) {
+    return (node.nodeName || "").toLowerCase();
+  }
+  return "#document";
+}
+function getWindow2(node) {
+  var _node$ownerDocument;
+  return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+}
+function getDocumentElement(node) {
+  var _ref;
+  return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+}
+function isNode(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Node || value instanceof getWindow2(value).Node;
+}
+function isElement(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof Element || value instanceof getWindow2(value).Element;
+}
+function isHTMLElement2(value) {
+  if (!hasWindow()) {
+    return false;
+  }
+  return value instanceof HTMLElement || value instanceof getWindow2(value).HTMLElement;
+}
+function isShadowRoot(value) {
+  if (!hasWindow() || typeof ShadowRoot === "undefined") {
+    return false;
+  }
+  return value instanceof ShadowRoot || value instanceof getWindow2(value).ShadowRoot;
+}
+var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
+function isOverflowElement(element) {
+  const {
+    overflow,
+    overflowX,
+    overflowY,
+    display
+  } = getComputedStyle3(element);
+  return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+}
+var tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
+function isTableElement(element) {
+  return tableElements.has(getNodeName(element));
+}
+var topLayerSelectors = [":popover-open", ":modal"];
+function isTopLayer(element) {
+  return topLayerSelectors.some((selector) => {
+    try {
+      return element.matches(selector);
+    } catch (_e) {
+      return false;
+    }
+  });
+}
+var transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
+var willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
+var containValues = ["paint", "layout", "strict", "content"];
+function isContainingBlock(elementOrCss) {
+  const webkit = isWebKit();
+  const css = isElement(elementOrCss) ? getComputedStyle3(elementOrCss) : elementOrCss;
+  return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
+}
+function getContainingBlock(element) {
+  let currentNode = getParentNode(element);
+  while (isHTMLElement2(currentNode) && !isLastTraversableNode(currentNode)) {
+    if (isContainingBlock(currentNode)) {
+      return currentNode;
+    } else if (isTopLayer(currentNode)) {
+      return null;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  return null;
+}
+function isWebKit() {
+  if (typeof CSS === "undefined" || !CSS.supports) return false;
+  return CSS.supports("-webkit-backdrop-filter", "none");
+}
+var lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
+function isLastTraversableNode(node) {
+  return lastTraversableNodeNames.has(getNodeName(node));
+}
+function getComputedStyle3(element) {
+  return getWindow2(element).getComputedStyle(element);
+}
+function getNodeScroll(element) {
+  if (isElement(element)) {
+    return {
+      scrollLeft: element.scrollLeft,
+      scrollTop: element.scrollTop
+    };
+  }
+  return {
+    scrollLeft: element.scrollX,
+    scrollTop: element.scrollY
+  };
+}
+function getParentNode(node) {
+  if (getNodeName(node) === "html") {
+    return node;
+  }
+  const result = (
+    // Step into the shadow DOM of the parent of a slotted node.
+    node.assignedSlot || // DOM Element detected.
+    node.parentNode || // ShadowRoot detected.
+    isShadowRoot(node) && node.host || // Fallback.
+    getDocumentElement(node)
+  );
+  return isShadowRoot(result) ? result.host : result;
+}
+function getNearestOverflowAncestor(node) {
+  const parentNode = getParentNode(node);
+  if (isLastTraversableNode(parentNode)) {
+    return node.ownerDocument ? node.ownerDocument.body : node.body;
+  }
+  if (isHTMLElement2(parentNode) && isOverflowElement(parentNode)) {
+    return parentNode;
+  }
+  return getNearestOverflowAncestor(parentNode);
+}
+function getOverflowAncestors(node, list, traverseIframes) {
+  var _node$ownerDocument2;
+  if (list === void 0) {
+    list = [];
+  }
+  if (traverseIframes === void 0) {
+    traverseIframes = true;
+  }
+  const scrollableAncestor = getNearestOverflowAncestor(node);
+  const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+  const win = getWindow2(scrollableAncestor);
+  if (isBody) {
+    const frameElement = getFrameElement(win);
+    return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+  }
+  return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+}
+function getFrameElement(win) {
+  return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+}
+
+// ../node_modules/.pnpm/@floating-ui+dom@1.7.5/node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+function getCssDimensions(element) {
+  const css = getComputedStyle3(element);
+  let width = parseFloat(css.width) || 0;
+  let height = parseFloat(css.height) || 0;
+  const hasOffset = isHTMLElement2(element);
+  const offsetWidth = hasOffset ? element.offsetWidth : width;
+  const offsetHeight = hasOffset ? element.offsetHeight : height;
+  const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+  if (shouldFallback) {
+    width = offsetWidth;
+    height = offsetHeight;
+  }
+  return {
+    width,
+    height,
+    $: shouldFallback
+  };
+}
+function unwrapElement(element) {
+  return !isElement(element) ? element.contextElement : element;
+}
+function getScale(element) {
+  const domElement = unwrapElement(element);
+  if (!isHTMLElement2(domElement)) {
+    return createCoords(1);
+  }
+  const rect = domElement.getBoundingClientRect();
+  const {
+    width,
+    height,
+    $
+  } = getCssDimensions(domElement);
+  let x = ($ ? round(rect.width) : rect.width) / width;
+  let y = ($ ? round(rect.height) : rect.height) / height;
+  if (!x || !Number.isFinite(x)) {
+    x = 1;
+  }
+  if (!y || !Number.isFinite(y)) {
+    y = 1;
+  }
+  return {
+    x,
+    y
+  };
+}
+var noOffsets = /* @__PURE__ */ createCoords(0);
+function getVisualOffsets(element) {
+  const win = getWindow2(element);
+  if (!isWebKit() || !win.visualViewport) {
+    return noOffsets;
+  }
+  return {
+    x: win.visualViewport.offsetLeft,
+    y: win.visualViewport.offsetTop
+  };
+}
+function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+  if (isFixed === void 0) {
+    isFixed = false;
+  }
+  if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow2(element)) {
+    return false;
+  }
+  return isFixed;
+}
+function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+  if (includeScale === void 0) {
+    includeScale = false;
+  }
+  if (isFixedStrategy === void 0) {
+    isFixedStrategy = false;
+  }
+  const clientRect = element.getBoundingClientRect();
+  const domElement = unwrapElement(element);
+  let scale = createCoords(1);
+  if (includeScale) {
+    if (offsetParent) {
+      if (isElement(offsetParent)) {
+        scale = getScale(offsetParent);
+      }
+    } else {
+      scale = getScale(element);
+    }
+  }
+  const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+  let x = (clientRect.left + visualOffsets.x) / scale.x;
+  let y = (clientRect.top + visualOffsets.y) / scale.y;
+  let width = clientRect.width / scale.x;
+  let height = clientRect.height / scale.y;
+  if (domElement) {
+    const win = getWindow2(domElement);
+    const offsetWin = offsetParent && isElement(offsetParent) ? getWindow2(offsetParent) : offsetParent;
+    let currentWin = win;
+    let currentIFrame = getFrameElement(currentWin);
+    while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+      const iframeScale = getScale(currentIFrame);
+      const iframeRect = currentIFrame.getBoundingClientRect();
+      const css = getComputedStyle3(currentIFrame);
+      const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+      const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+      x *= iframeScale.x;
+      y *= iframeScale.y;
+      width *= iframeScale.x;
+      height *= iframeScale.y;
+      x += left;
+      y += top;
+      currentWin = getWindow2(currentIFrame);
+      currentIFrame = getFrameElement(currentWin);
+    }
+  }
+  return rectToClientRect({
+    width,
+    height,
+    x,
+    y
+  });
+}
+function getWindowScrollBarX(element, rect) {
+  const leftScroll = getNodeScroll(element).scrollLeft;
+  if (!rect) {
+    return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+  }
+  return rect.left + leftScroll;
+}
+function getHTMLOffset(documentElement, scroll) {
+  const htmlRect = documentElement.getBoundingClientRect();
+  const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+  const y = htmlRect.top + scroll.scrollTop;
+  return {
+    x,
+    y
+  };
+}
+function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+  let {
+    elements,
+    rect,
+    offsetParent,
+    strategy
+  } = _ref;
+  const isFixed = strategy === "fixed";
+  const documentElement = getDocumentElement(offsetParent);
+  const topLayer = elements ? isTopLayer(elements.floating) : false;
+  if (offsetParent === documentElement || topLayer && isFixed) {
+    return rect;
+  }
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  let scale = createCoords(1);
+  const offsets = createCoords(0);
+  const isOffsetParentAnElement = isHTMLElement2(offsetParent);
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isHTMLElement2(offsetParent)) {
+      const offsetRect = getBoundingClientRect(offsetParent);
+      scale = getScale(offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    }
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  return {
+    width: rect.width * scale.x,
+    height: rect.height * scale.y,
+    x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+    y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+  };
+}
+function getClientRects(element) {
+  return Array.from(element.getClientRects());
+}
+function getDocumentRect(element) {
+  const html = getDocumentElement(element);
+  const scroll = getNodeScroll(element);
+  const body = element.ownerDocument.body;
+  const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+  const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+  let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+  const y = -scroll.scrollTop;
+  if (getComputedStyle3(body).direction === "rtl") {
+    x += max(html.clientWidth, body.clientWidth) - width;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+var SCROLLBAR_MAX = 25;
+function getViewportRect(element, strategy) {
+  const win = getWindow2(element);
+  const html = getDocumentElement(element);
+  const visualViewport = win.visualViewport;
+  let width = html.clientWidth;
+  let height = html.clientHeight;
+  let x = 0;
+  let y = 0;
+  if (visualViewport) {
+    width = visualViewport.width;
+    height = visualViewport.height;
+    const visualViewportBased = isWebKit();
+    if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
+      x = visualViewport.offsetLeft;
+      y = visualViewport.offsetTop;
+    }
+  }
+  const windowScrollbarX = getWindowScrollBarX(html);
+  if (windowScrollbarX <= 0) {
+    const doc = html.ownerDocument;
+    const body = doc.body;
+    const bodyStyles = getComputedStyle(body);
+    const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+    const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+    if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+      width -= clippingStableScrollbarWidth;
+    }
+  } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+    width += windowScrollbarX;
+  }
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
+function getInnerBoundingClientRect(element, strategy) {
+  const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
+  const top = clientRect.top + element.clientTop;
+  const left = clientRect.left + element.clientLeft;
+  const scale = isHTMLElement2(element) ? getScale(element) : createCoords(1);
+  const width = element.clientWidth * scale.x;
+  const height = element.clientHeight * scale.y;
+  const x = left * scale.x;
+  const y = top * scale.y;
+  return {
+    width,
+    height,
+    x,
+    y
+  };
+}
+function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+  let rect;
+  if (clippingAncestor === "viewport") {
+    rect = getViewportRect(element, strategy);
+  } else if (clippingAncestor === "document") {
+    rect = getDocumentRect(getDocumentElement(element));
+  } else if (isElement(clippingAncestor)) {
+    rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+  } else {
+    const visualOffsets = getVisualOffsets(element);
+    rect = {
+      x: clippingAncestor.x - visualOffsets.x,
+      y: clippingAncestor.y - visualOffsets.y,
+      width: clippingAncestor.width,
+      height: clippingAncestor.height
+    };
+  }
+  return rectToClientRect(rect);
+}
+function hasFixedPositionAncestor(element, stopNode) {
+  const parentNode = getParentNode(element);
+  if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+    return false;
+  }
+  return getComputedStyle3(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+}
+function getClippingElementAncestors(element, cache) {
+  const cachedResult = cache.get(element);
+  if (cachedResult) {
+    return cachedResult;
+  }
+  let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
+  let currentContainingBlockComputedStyle = null;
+  const elementIsFixed = getComputedStyle3(element).position === "fixed";
+  let currentNode = elementIsFixed ? getParentNode(element) : element;
+  while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+    const computedStyle = getComputedStyle3(currentNode);
+    const currentNodeIsContaining = isContainingBlock(currentNode);
+    if (!currentNodeIsContaining && computedStyle.position === "fixed") {
+      currentContainingBlockComputedStyle = null;
+    }
+    const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+    if (shouldDropCurrentNode) {
+      result = result.filter((ancestor) => ancestor !== currentNode);
+    } else {
+      currentContainingBlockComputedStyle = computedStyle;
+    }
+    currentNode = getParentNode(currentNode);
+  }
+  cache.set(element, result);
+  return result;
+}
+function getClippingRect(_ref) {
+  let {
+    element,
+    boundary,
+    rootBoundary,
+    strategy
+  } = _ref;
+  const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+  const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+  const firstClippingAncestor = clippingAncestors[0];
+  const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+    const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+    accRect.top = max(rect.top, accRect.top);
+    accRect.right = min(rect.right, accRect.right);
+    accRect.bottom = min(rect.bottom, accRect.bottom);
+    accRect.left = max(rect.left, accRect.left);
+    return accRect;
+  }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+  return {
+    width: clippingRect.right - clippingRect.left,
+    height: clippingRect.bottom - clippingRect.top,
+    x: clippingRect.left,
+    y: clippingRect.top
+  };
+}
+function getDimensions(element) {
+  const {
+    width,
+    height
+  } = getCssDimensions(element);
+  return {
+    width,
+    height
+  };
+}
+function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+  const isOffsetParentAnElement = isHTMLElement2(offsetParent);
+  const documentElement = getDocumentElement(offsetParent);
+  const isFixed = strategy === "fixed";
+  const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+  let scroll = {
+    scrollLeft: 0,
+    scrollTop: 0
+  };
+  const offsets = createCoords(0);
+  function setLeftRTLScrollbarOffset() {
+    offsets.x = getWindowScrollBarX(documentElement);
+  }
+  if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+    if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+      scroll = getNodeScroll(offsetParent);
+    }
+    if (isOffsetParentAnElement) {
+      const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+      offsets.x = offsetRect.x + offsetParent.clientLeft;
+      offsets.y = offsetRect.y + offsetParent.clientTop;
+    } else if (documentElement) {
+      setLeftRTLScrollbarOffset();
+    }
+  }
+  if (isFixed && !isOffsetParentAnElement && documentElement) {
+    setLeftRTLScrollbarOffset();
+  }
+  const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+  const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+  const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
+  return {
+    x,
+    y,
+    width: rect.width,
+    height: rect.height
+  };
+}
+function isStaticPositioned(element) {
+  return getComputedStyle3(element).position === "static";
+}
+function getTrueOffsetParent(element, polyfill) {
+  if (!isHTMLElement2(element) || getComputedStyle3(element).position === "fixed") {
+    return null;
+  }
+  if (polyfill) {
+    return polyfill(element);
+  }
+  let rawOffsetParent = element.offsetParent;
+  if (getDocumentElement(element) === rawOffsetParent) {
+    rawOffsetParent = rawOffsetParent.ownerDocument.body;
+  }
+  return rawOffsetParent;
+}
+function getOffsetParent(element, polyfill) {
+  const win = getWindow2(element);
+  if (isTopLayer(element)) {
+    return win;
+  }
+  if (!isHTMLElement2(element)) {
+    let svgOffsetParent = getParentNode(element);
+    while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+      if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+        return svgOffsetParent;
+      }
+      svgOffsetParent = getParentNode(svgOffsetParent);
+    }
+    return win;
+  }
+  let offsetParent = getTrueOffsetParent(element, polyfill);
+  while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+    offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+  }
+  if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+    return win;
+  }
+  return offsetParent || getContainingBlock(element) || win;
+}
+var getElementRects = async function(data) {
+  const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+  const getDimensionsFn = this.getDimensions;
+  const floatingDimensions = await getDimensionsFn(data.floating);
+  return {
+    reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+    floating: {
+      x: 0,
+      y: 0,
+      width: floatingDimensions.width,
+      height: floatingDimensions.height
+    }
+  };
+};
+function isRTL(element) {
+  return getComputedStyle3(element).direction === "rtl";
+}
+var platform = {
+  convertOffsetParentRelativeRectToViewportRelativeRect,
+  getDocumentElement,
+  getClippingRect,
+  getOffsetParent,
+  getElementRects,
+  getClientRects,
+  getDimensions,
+  getScale,
+  isElement,
+  isRTL
+};
+function rectsAreEqual(a, b) {
+  return a.x === b.x && a.y === b.y && a.width === b.width && a.height === b.height;
+}
+function observeMove(element, onMove) {
+  let io = null;
+  let timeoutId;
+  const root = getDocumentElement(element);
+  function cleanup() {
+    var _io;
+    clearTimeout(timeoutId);
+    (_io = io) == null || _io.disconnect();
+    io = null;
+  }
+  function refresh(skip, threshold) {
+    if (skip === void 0) {
+      skip = false;
+    }
+    if (threshold === void 0) {
+      threshold = 1;
+    }
+    cleanup();
+    const elementRectForRootMargin = element.getBoundingClientRect();
+    const {
+      left,
+      top,
+      width,
+      height
+    } = elementRectForRootMargin;
+    if (!skip) {
+      onMove();
+    }
+    if (!width || !height) {
+      return;
+    }
+    const insetTop = floor(top);
+    const insetRight = floor(root.clientWidth - (left + width));
+    const insetBottom = floor(root.clientHeight - (top + height));
+    const insetLeft = floor(left);
+    const rootMargin = -insetTop + "px " + -insetRight + "px " + -insetBottom + "px " + -insetLeft + "px";
+    const options = {
+      rootMargin,
+      threshold: max(0, min(1, threshold)) || 1
+    };
+    let isFirstUpdate = true;
+    function handleObserve(entries) {
+      const ratio = entries[0].intersectionRatio;
+      if (ratio !== threshold) {
+        if (!isFirstUpdate) {
+          return refresh();
+        }
+        if (!ratio) {
+          timeoutId = setTimeout(() => {
+            refresh(false, 1e-7);
+          }, 1e3);
+        } else {
+          refresh(false, ratio);
+        }
+      }
+      if (ratio === 1 && !rectsAreEqual(elementRectForRootMargin, element.getBoundingClientRect())) {
+        refresh();
+      }
+      isFirstUpdate = false;
+    }
+    try {
+      io = new IntersectionObserver(handleObserve, {
+        ...options,
+        // Handle <iframe>s
+        root: root.ownerDocument
+      });
+    } catch (_e) {
+      io = new IntersectionObserver(handleObserve, options);
+    }
+    io.observe(element);
+  }
+  refresh(true);
+  return cleanup;
+}
+function autoUpdate(reference, floating, update, options) {
+  if (options === void 0) {
+    options = {};
+  }
+  const {
+    ancestorScroll = true,
+    ancestorResize = true,
+    elementResize = typeof ResizeObserver === "function",
+    layoutShift = typeof IntersectionObserver === "function",
+    animationFrame = false
+  } = options;
+  const referenceEl = unwrapElement(reference);
+  const ancestors = ancestorScroll || ancestorResize ? [...referenceEl ? getOverflowAncestors(referenceEl) : [], ...getOverflowAncestors(floating)] : [];
+  ancestors.forEach((ancestor) => {
+    ancestorScroll && ancestor.addEventListener("scroll", update, {
+      passive: true
+    });
+    ancestorResize && ancestor.addEventListener("resize", update);
+  });
+  const cleanupIo = referenceEl && layoutShift ? observeMove(referenceEl, update) : null;
+  let reobserveFrame = -1;
+  let resizeObserver = null;
+  if (elementResize) {
+    resizeObserver = new ResizeObserver((_ref) => {
+      let [firstEntry] = _ref;
+      if (firstEntry && firstEntry.target === referenceEl && resizeObserver) {
+        resizeObserver.unobserve(floating);
+        cancelAnimationFrame(reobserveFrame);
+        reobserveFrame = requestAnimationFrame(() => {
+          var _resizeObserver;
+          (_resizeObserver = resizeObserver) == null || _resizeObserver.observe(floating);
+        });
+      }
+      update();
+    });
+    if (referenceEl && !animationFrame) {
+      resizeObserver.observe(referenceEl);
+    }
+    resizeObserver.observe(floating);
+  }
+  let frameId;
+  let prevRefRect = animationFrame ? getBoundingClientRect(reference) : null;
+  if (animationFrame) {
+    frameLoop();
+  }
+  function frameLoop() {
+    const nextRefRect = getBoundingClientRect(reference);
+    if (prevRefRect && !rectsAreEqual(prevRefRect, nextRefRect)) {
+      update();
+    }
+    prevRefRect = nextRefRect;
+    frameId = requestAnimationFrame(frameLoop);
+  }
+  update();
+  return () => {
+    var _resizeObserver2;
+    ancestors.forEach((ancestor) => {
+      ancestorScroll && ancestor.removeEventListener("scroll", update);
+      ancestorResize && ancestor.removeEventListener("resize", update);
+    });
+    cleanupIo == null || cleanupIo();
+    (_resizeObserver2 = resizeObserver) == null || _resizeObserver2.disconnect();
+    resizeObserver = null;
+    if (animationFrame) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+}
+var offset2 = offset;
+var shift2 = shift;
+var flip2 = flip;
+var size2 = size;
+var hide2 = hide;
+var arrow2 = arrow;
+var limitShift2 = limitShift;
+var computePosition2 = (reference, floating, options) => {
+  const cache = /* @__PURE__ */ new Map();
+  const mergedOptions = {
+    platform,
+    ...options
+  };
+  const platformWithCache = {
+    ...mergedOptions.platform,
+    _c: cache
+  };
+  return computePosition(reference, floating, {
+    ...mergedOptions,
+    platform: platformWithCache
+  });
+};
+
+// ../node_modules/.pnpm/@zag-js+popper@1.34.1/node_modules/@zag-js/popper/dist/index.mjs
+function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
+  if (typeof DOMRect === "function") {
+    return new DOMRect(x, y, width, height);
+  }
+  const rect = {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    right: x + width,
+    bottom: y + height,
+    left: x
+  };
+  return { ...rect, toJSON: () => rect };
+}
+function getDOMRect(anchorRect) {
+  if (!anchorRect) return createDOMRect();
+  const { x, y, width, height } = anchorRect;
+  return createDOMRect(x, y, width, height);
+}
+function getAnchorElement(anchorElement, getAnchorRect) {
+  return {
+    contextElement: isHTMLElement(anchorElement) ? anchorElement : anchorElement?.contextElement,
+    getBoundingClientRect: () => {
+      const anchor = anchorElement;
+      const anchorRect = getAnchorRect?.(anchor);
+      if (anchorRect || !anchor) {
+        return getDOMRect(anchorRect);
+      }
+      return anchor.getBoundingClientRect();
+    }
+  };
+}
+var toVar = (value) => ({ variable: value, reference: `var(${value})` });
+var cssVars = {
+  arrowSize: toVar("--arrow-size"),
+  arrowSizeHalf: toVar("--arrow-size-half"),
+  arrowBg: toVar("--arrow-background"),
+  transformOrigin: toVar("--transform-origin"),
+  arrowOffset: toVar("--arrow-offset")
+};
+var getSideAxis2 = (side) => side === "top" || side === "bottom" ? "y" : "x";
+function createTransformOriginMiddleware(opts, arrowEl) {
+  return {
+    name: "transformOrigin",
+    fn(state) {
+      const { elements, middlewareData, placement, rects, y } = state;
+      const side = placement.split("-")[0];
+      const axis = getSideAxis2(side);
+      const arrowX = middlewareData.arrow?.x || 0;
+      const arrowY = middlewareData.arrow?.y || 0;
+      const arrowWidth = arrowEl?.clientWidth || 0;
+      const arrowHeight = arrowEl?.clientHeight || 0;
+      const transformX = arrowX + arrowWidth / 2;
+      const transformY = arrowY + arrowHeight / 2;
+      const shiftY = Math.abs(middlewareData.shift?.y || 0);
+      const halfAnchorHeight = rects.reference.height / 2;
+      const arrowOffset = arrowHeight / 2;
+      const gutter = opts.offset?.mainAxis ?? opts.gutter;
+      const sideOffsetValue = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+      const isOverlappingAnchor = shiftY > sideOffsetValue;
+      const adjacentTransformOrigin = {
+        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+        bottom: `${transformX}px ${-sideOffsetValue}px`,
+        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+        right: `${-sideOffsetValue}px ${transformY}px`
+      }[side];
+      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
+      const useOverlap = Boolean(opts.overlap) && axis === "y" && isOverlappingAnchor;
+      elements.floating.style.setProperty(
+        cssVars.transformOrigin.variable,
+        useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+      );
+      return {
+        data: {
+          transformOrigin: useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+        }
+      };
+    }
+  };
+}
+var rectMiddleware = {
+  name: "rects",
+  fn({ rects }) {
+    return {
+      data: rects
+    };
+  }
+};
+var shiftArrowMiddleware = (arrowEl) => {
+  if (!arrowEl) return;
+  return {
+    name: "shiftArrow",
+    fn({ placement, middlewareData }) {
+      if (!middlewareData.arrow) return {};
+      const { x, y } = middlewareData.arrow;
+      const dir = placement.split("-")[0];
+      Object.assign(arrowEl.style, {
+        left: x != null ? `${x}px` : "",
+        top: y != null ? `${y}px` : "",
+        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
+      });
+      return {};
+    }
+  };
+};
+function getPlacementDetails(placement) {
+  const [side, align] = placement.split("-");
+  return { side, align, hasAlign: align != null };
+}
+function getPlacementSide(placement) {
+  return placement.split("-")[0];
+}
+var defaultOptions = {
+  strategy: "absolute",
+  placement: "bottom",
+  listeners: true,
+  gutter: 8,
+  flip: true,
+  slide: true,
+  overlap: false,
+  sameWidth: false,
+  fitViewport: false,
+  overflowPadding: 8,
+  arrowPadding: 4
+};
+function roundByDpr(win, value) {
+  const dpr = win.devicePixelRatio || 1;
+  return Math.round(value * dpr) / dpr;
+}
+function isApproximatelyEqual(a, b) {
+  return a != null && Math.abs(a - b) < 0.5;
+}
+function resolveBoundaryOption(boundary) {
+  if (typeof boundary === "function") return boundary();
+  if (boundary === "clipping-ancestors") return "clippingAncestors";
+  return boundary;
+}
+function getArrowMiddleware(arrowElement, doc, opts) {
+  const element = arrowElement || doc.createElement("div");
+  return arrow2({ element, padding: opts.arrowPadding });
+}
+function getOffsetMiddleware(arrowElement, opts) {
+  if (isNull(opts.offset ?? opts.gutter)) return;
+  return offset2(({ placement }) => {
+    const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
+    const gutter = opts.offset?.mainAxis ?? opts.gutter;
+    const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+    const { hasAlign } = getPlacementDetails(placement);
+    const shift22 = !hasAlign ? opts.shift : void 0;
+    const crossAxis = opts.offset?.crossAxis ?? shift22;
+    return compact({
+      crossAxis,
+      mainAxis,
+      alignmentAxis: opts.shift
+    });
+  });
+}
+function getFlipMiddleware(opts) {
+  if (!opts.flip) return;
+  const boundary = resolveBoundaryOption(opts.boundary);
+  return flip2({
+    ...boundary ? { boundary } : void 0,
+    padding: opts.overflowPadding,
+    fallbackPlacements: opts.flip === true ? void 0 : opts.flip
+  });
+}
+function getShiftMiddleware(opts) {
+  if (!opts.slide && !opts.overlap) return;
+  const boundary = resolveBoundaryOption(opts.boundary);
+  return shift2({
+    ...boundary ? { boundary } : void 0,
+    mainAxis: opts.slide,
+    crossAxis: opts.overlap,
+    padding: opts.overflowPadding,
+    limiter: limitShift2()
+  });
+}
+function getSizeMiddleware(opts) {
+  if (opts.sizeMiddleware === false && !opts.sameWidth && !opts.fitViewport) return;
+  let lastReferenceWidth;
+  let lastReferenceHeight;
+  let lastAvailableWidth;
+  let lastAvailableHeight;
+  return size2({
+    padding: opts.overflowPadding,
+    apply({ elements, rects, availableHeight, availableWidth }) {
+      const floating = elements.floating;
+      const referenceWidth = Math.round(rects.reference.width);
+      const referenceHeight = Math.round(rects.reference.height);
+      availableWidth = Math.floor(availableWidth);
+      availableHeight = Math.floor(availableHeight);
+      if (!isApproximatelyEqual(lastReferenceWidth, referenceWidth)) {
+        floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+        lastReferenceWidth = referenceWidth;
+      }
+      if (!isApproximatelyEqual(lastReferenceHeight, referenceHeight)) {
+        floating.style.setProperty("--reference-height", `${referenceHeight}px`);
+        lastReferenceHeight = referenceHeight;
+      }
+      if (!isApproximatelyEqual(lastAvailableWidth, availableWidth)) {
+        floating.style.setProperty("--available-width", `${availableWidth}px`);
+        lastAvailableWidth = availableWidth;
+      }
+      if (!isApproximatelyEqual(lastAvailableHeight, availableHeight)) {
+        floating.style.setProperty("--available-height", `${availableHeight}px`);
+        lastAvailableHeight = availableHeight;
+      }
+    }
+  });
+}
+function hideWhenDetachedMiddleware(opts) {
+  if (!opts.hideWhenDetached) return;
+  return hide2({ strategy: "referenceHidden", boundary: resolveBoundaryOption(opts.boundary) ?? "clippingAncestors" });
+}
+function getAutoUpdateOptions(opts) {
+  if (!opts) return {};
+  if (opts === true) {
+    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true };
+  }
+  return opts;
+}
+function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
+  const anchor = opts.getAnchorElement?.() ?? referenceOrVirtual;
+  const reference = getAnchorElement(anchor, opts.getAnchorRect);
+  if (!floating || !reference) return;
+  const options = Object.assign({}, defaultOptions, opts);
+  const arrowEl = floating.querySelector("[data-part=arrow]");
+  const middleware = [
+    getOffsetMiddleware(arrowEl, options),
+    getFlipMiddleware(options),
+    getShiftMiddleware(options),
+    getArrowMiddleware(arrowEl, floating.ownerDocument, options),
+    shiftArrowMiddleware(arrowEl),
+    createTransformOriginMiddleware(
+      { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
+      arrowEl
+    ),
+    getSizeMiddleware(options),
+    hideWhenDetachedMiddleware(options),
+    rectMiddleware
+  ];
+  const { placement, strategy, onComplete, onPositioned } = options;
+  let lastX;
+  let lastY;
+  let zIndexComputed = false;
+  const updatePosition = async () => {
+    if (!reference || !floating) return;
+    const pos = await computePosition2(reference, floating, {
+      placement,
+      middleware,
+      strategy
+    });
+    onComplete?.(pos);
+    const win = getWindow(floating);
+    const x = roundByDpr(win, pos.x);
+    const y = roundByDpr(win, pos.y);
+    floating.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    if (!isApproximatelyEqual(lastX, x)) {
+      floating.style.setProperty("--x", `${x}px`);
+      lastX = x;
+    }
+    if (!isApproximatelyEqual(lastY, y)) {
+      floating.style.setProperty("--y", `${y}px`);
+      lastY = y;
+    }
+    if (options.hideWhenDetached) {
+      const isHidden = pos.middlewareData.hide?.referenceHidden;
+      if (isHidden) {
+        floating.style.setProperty("visibility", "hidden");
+        floating.style.setProperty("pointer-events", "none");
+      } else {
+        floating.style.removeProperty("visibility");
+        floating.style.removeProperty("pointer-events");
+      }
+    }
+    if (!zIndexComputed) {
+      const contentEl = floating.firstElementChild;
+      if (contentEl) {
+        floating.style.setProperty("--z-index", getComputedStyle2(contentEl).zIndex);
+        zIndexComputed = true;
+      }
+    }
+  };
+  const update = async () => {
+    if (opts.updatePosition) {
+      await opts.updatePosition({ updatePosition, floatingElement: floating });
+      onPositioned?.({ placed: true });
+    } else {
+      await updatePosition();
+    }
+  };
+  const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
+  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop;
+  update();
+  return () => {
+    cancelAutoUpdate?.();
+    onPositioned?.({ placed: false });
+  };
+}
+function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
+  const { defer, ...options } = opts;
+  const func = defer ? raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
+      const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
+      cleanups.push(getPlacementImpl(reference, floating, options));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+var ARROW_FLOATING_STYLE = {
+  bottom: "rotate(45deg)",
+  left: "rotate(135deg)",
+  top: "rotate(225deg)",
+  right: "rotate(315deg)"
+};
+function getPlacementStyles(options = {}) {
+  const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
+  return {
+    arrow: {
+      position: "absolute",
+      width: cssVars.arrowSize.reference,
+      height: cssVars.arrowSize.reference,
+      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
+      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
+    },
+    arrowTip: {
+      // @ts-expect-error - Fix this
+      transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
+      background: cssVars.arrowBg.reference,
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      zIndex: "inherit"
+    },
+    floating: {
+      position: strategy,
+      isolation: "isolate",
+      minWidth: sameWidth ? void 0 : "max-content",
+      width: sameWidth ? "var(--reference-width)" : void 0,
+      maxWidth: fitViewport ? "var(--available-width)" : void 0,
+      maxHeight: fitViewport ? "var(--available-height)" : void 0,
+      pointerEvents: !placement ? "none" : void 0,
+      top: "0px",
+      left: "0px",
+      // move off-screen if placement is not defined
+      transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
+      zIndex: "var(--z-index)"
+    }
+  };
+}
+
+export {
+  getPlacementSide,
+  getPlacement,
+  getPlacementStyles
+};
diff --git a/priv/static/chunk-KCOQB3RU.mjs b/priv/static/chunk-KCOQB3RU.mjs
new file mode 100644
index 0000000..e2e5083
--- /dev/null
+++ b/priv/static/chunk-KCOQB3RU.mjs
@@ -0,0 +1,1339 @@
+import {
+  chunk,
+  hasProp,
+  isEqual,
+  isObject,
+  nextIndex,
+  prevIndex
+} from "./chunk-RUWIVFVB.mjs";
+
+// ../node_modules/.pnpm/@zag-js+collection@1.34.1/node_modules/@zag-js/collection/dist/index.mjs
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var fallback = {
+  itemToValue(item) {
+    if (typeof item === "string") return item;
+    if (isObject(item) && hasProp(item, "value")) return item.value;
+    return "";
+  },
+  itemToString(item) {
+    if (typeof item === "string") return item;
+    if (isObject(item) && hasProp(item, "label")) return item.label;
+    return fallback.itemToValue(item);
+  },
+  isItemDisabled(item) {
+    if (isObject(item) && hasProp(item, "disabled")) return !!item.disabled;
+    return false;
+  }
+};
+var ListCollection = class _ListCollection {
+  constructor(options) {
+    this.options = options;
+    __publicField(this, "items");
+    __publicField(this, "indexMap", null);
+    __publicField(this, "copy", (items) => {
+      return new _ListCollection({ ...this.options, items: items ?? [...this.items] });
+    });
+    __publicField(this, "isEqual", (other) => {
+      return isEqual(this.items, other.items);
+    });
+    __publicField(this, "setItems", (items) => {
+      return this.copy(items);
+    });
+    __publicField(this, "getValues", (items = this.items) => {
+      const values = [];
+      for (const item of items) {
+        const value = this.getItemValue(item);
+        if (value != null) values.push(value);
+      }
+      return values;
+    });
+    __publicField(this, "find", (value) => {
+      if (value == null) return null;
+      const index = this.indexOf(value);
+      return index !== -1 ? this.at(index) : null;
+    });
+    __publicField(this, "findMany", (values) => {
+      const result = [];
+      for (const value of values) {
+        const item = this.find(value);
+        if (item != null) result.push(item);
+      }
+      return result;
+    });
+    __publicField(this, "at", (index) => {
+      if (!this.options.groupBy && !this.options.groupSort) {
+        return this.items[index] ?? null;
+      }
+      let idx = 0;
+      const groups = this.group();
+      for (const [, items] of groups) {
+        for (const item of items) {
+          if (idx === index) return item;
+          idx++;
+        }
+      }
+      return null;
+    });
+    __publicField(this, "sortFn", (valueA, valueB) => {
+      const indexA = this.indexOf(valueA);
+      const indexB = this.indexOf(valueB);
+      return (indexA ?? 0) - (indexB ?? 0);
+    });
+    __publicField(this, "sort", (values) => {
+      return [...values].sort(this.sortFn.bind(this));
+    });
+    __publicField(this, "getItemValue", (item) => {
+      if (item == null) return null;
+      return this.options.itemToValue?.(item) ?? fallback.itemToValue(item);
+    });
+    __publicField(this, "getItemDisabled", (item) => {
+      if (item == null) return false;
+      return this.options.isItemDisabled?.(item) ?? fallback.isItemDisabled(item);
+    });
+    __publicField(this, "stringifyItem", (item) => {
+      if (item == null) return null;
+      return this.options.itemToString?.(item) ?? fallback.itemToString(item);
+    });
+    __publicField(this, "stringify", (value) => {
+      if (value == null) return null;
+      return this.stringifyItem(this.find(value));
+    });
+    __publicField(this, "stringifyItems", (items, separator = ", ") => {
+      const strs = [];
+      for (const item of items) {
+        const str = this.stringifyItem(item);
+        if (str != null) strs.push(str);
+      }
+      return strs.join(separator);
+    });
+    __publicField(this, "stringifyMany", (value, separator) => {
+      return this.stringifyItems(this.findMany(value), separator);
+    });
+    __publicField(this, "has", (value) => {
+      return this.indexOf(value) !== -1;
+    });
+    __publicField(this, "hasItem", (item) => {
+      if (item == null) return false;
+      return this.has(this.getItemValue(item));
+    });
+    __publicField(this, "group", () => {
+      const { groupBy, groupSort } = this.options;
+      if (!groupBy) return [["", [...this.items]]];
+      const groups = /* @__PURE__ */ new Map();
+      this.items.forEach((item, index) => {
+        const groupKey = groupBy(item, index);
+        if (!groups.has(groupKey)) {
+          groups.set(groupKey, []);
+        }
+        groups.get(groupKey).push(item);
+      });
+      let entries = Array.from(groups.entries());
+      if (groupSort) {
+        entries.sort(([a], [b]) => {
+          if (typeof groupSort === "function") return groupSort(a, b);
+          if (Array.isArray(groupSort)) {
+            const indexA = groupSort.indexOf(a);
+            const indexB = groupSort.indexOf(b);
+            if (indexA === -1) return 1;
+            if (indexB === -1) return -1;
+            return indexA - indexB;
+          }
+          if (groupSort === "asc") return a.localeCompare(b);
+          if (groupSort === "desc") return b.localeCompare(a);
+          return 0;
+        });
+      }
+      return entries;
+    });
+    __publicField(this, "getNextValue", (value, step = 1, clamp = false) => {
+      let index = this.indexOf(value);
+      if (index === -1) return null;
+      index = clamp ? Math.min(index + step, this.size - 1) : index + step;
+      while (index <= this.size && this.getItemDisabled(this.at(index))) index++;
+      return this.getItemValue(this.at(index));
+    });
+    __publicField(this, "getPreviousValue", (value, step = 1, clamp = false) => {
+      let index = this.indexOf(value);
+      if (index === -1) return null;
+      index = clamp ? Math.max(index - step, 0) : index - step;
+      while (index >= 0 && this.getItemDisabled(this.at(index))) index--;
+      return this.getItemValue(this.at(index));
+    });
+    __publicField(this, "indexOf", (value) => {
+      if (value == null) return -1;
+      if (!this.options.groupBy && !this.options.groupSort) {
+        return this.items.findIndex((item) => this.getItemValue(item) === value);
+      }
+      if (!this.indexMap) {
+        this.indexMap = /* @__PURE__ */ new Map();
+        let idx = 0;
+        const groups = this.group();
+        for (const [, items] of groups) {
+          for (const item of items) {
+            const itemValue = this.getItemValue(item);
+            if (itemValue != null) {
+              this.indexMap.set(itemValue, idx);
+            }
+            idx++;
+          }
+        }
+      }
+      return this.indexMap.get(value) ?? -1;
+    });
+    __publicField(this, "getByText", (text, current) => {
+      const currentIndex = current != null ? this.indexOf(current) : -1;
+      const isSingleKey = text.length === 1;
+      for (let i = 0; i < this.items.length; i++) {
+        const item = this.items[(currentIndex + i + 1) % this.items.length];
+        if (isSingleKey && this.getItemValue(item) === current) continue;
+        if (this.getItemDisabled(item)) continue;
+        if (match(this.stringifyItem(item), text)) return item;
+      }
+      return void 0;
+    });
+    __publicField(this, "search", (queryString, options2) => {
+      const { state, currentValue, timeout = 350 } = options2;
+      const search = state.keysSoFar + queryString;
+      const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+      const query = isRepeated ? search[0] : search;
+      const item = this.getByText(query, currentValue);
+      const value = this.getItemValue(item);
+      function cleanup() {
+        clearTimeout(state.timer);
+        state.timer = -1;
+      }
+      function update(value2) {
+        state.keysSoFar = value2;
+        cleanup();
+        if (value2 !== "") {
+          state.timer = +setTimeout(() => {
+            update("");
+            cleanup();
+          }, timeout);
+        }
+      }
+      update(search);
+      return value;
+    });
+    __publicField(this, "update", (value, item) => {
+      let index = this.indexOf(value);
+      if (index === -1) return this;
+      return this.copy([...this.items.slice(0, index), item, ...this.items.slice(index + 1)]);
+    });
+    __publicField(this, "upsert", (value, item, mode = "append") => {
+      let index = this.indexOf(value);
+      if (index === -1) {
+        const fn = mode === "append" ? this.append : this.prepend;
+        return fn(item);
+      }
+      return this.copy([...this.items.slice(0, index), item, ...this.items.slice(index + 1)]);
+    });
+    __publicField(this, "insert", (index, ...items) => {
+      return this.copy(insert(this.items, index, ...items));
+    });
+    __publicField(this, "insertBefore", (value, ...items) => {
+      let toIndex = this.indexOf(value);
+      if (toIndex === -1) {
+        if (this.items.length === 0) toIndex = 0;
+        else return this;
+      }
+      return this.copy(insert(this.items, toIndex, ...items));
+    });
+    __publicField(this, "insertAfter", (value, ...items) => {
+      let toIndex = this.indexOf(value);
+      if (toIndex === -1) {
+        if (this.items.length === 0) toIndex = 0;
+        else return this;
+      }
+      return this.copy(insert(this.items, toIndex + 1, ...items));
+    });
+    __publicField(this, "prepend", (...items) => {
+      return this.copy(insert(this.items, 0, ...items));
+    });
+    __publicField(this, "append", (...items) => {
+      return this.copy(insert(this.items, this.items.length, ...items));
+    });
+    __publicField(this, "filter", (fn) => {
+      const filteredItems = this.items.filter((item, index) => fn(this.stringifyItem(item), index, item));
+      return this.copy(filteredItems);
+    });
+    __publicField(this, "remove", (...itemsOrValues) => {
+      const values = itemsOrValues.map(
+        (itemOrValue) => typeof itemOrValue === "string" ? itemOrValue : this.getItemValue(itemOrValue)
+      );
+      return this.copy(
+        this.items.filter((item) => {
+          const value = this.getItemValue(item);
+          if (value == null) return false;
+          return !values.includes(value);
+        })
+      );
+    });
+    __publicField(this, "move", (value, toIndex) => {
+      const fromIndex = this.indexOf(value);
+      if (fromIndex === -1) return this;
+      return this.copy(move(this.items, [fromIndex], toIndex));
+    });
+    __publicField(this, "moveBefore", (value, ...values) => {
+      let toIndex = this.items.findIndex((item) => this.getItemValue(item) === value);
+      if (toIndex === -1) return this;
+      let indices = values.map((value2) => this.items.findIndex((item) => this.getItemValue(item) === value2)).sort((a, b) => a - b);
+      return this.copy(move(this.items, indices, toIndex));
+    });
+    __publicField(this, "moveAfter", (value, ...values) => {
+      let toIndex = this.items.findIndex((item) => this.getItemValue(item) === value);
+      if (toIndex === -1) return this;
+      let indices = values.map((value2) => this.items.findIndex((item) => this.getItemValue(item) === value2)).sort((a, b) => a - b);
+      return this.copy(move(this.items, indices, toIndex + 1));
+    });
+    __publicField(this, "reorder", (fromIndex, toIndex) => {
+      return this.copy(move(this.items, [fromIndex], toIndex));
+    });
+    __publicField(this, "compareValue", (a, b) => {
+      const indexA = this.indexOf(a);
+      const indexB = this.indexOf(b);
+      if (indexA < indexB) return -1;
+      if (indexA > indexB) return 1;
+      return 0;
+    });
+    __publicField(this, "range", (from, to) => {
+      let keys = [];
+      let key = from;
+      while (key != null) {
+        let item = this.find(key);
+        if (item) keys.push(key);
+        if (key === to) return keys;
+        key = this.getNextValue(key);
+      }
+      return [];
+    });
+    __publicField(this, "getValueRange", (from, to) => {
+      if (from && to) {
+        if (this.compareValue(from, to) <= 0) {
+          return this.range(from, to);
+        }
+        return this.range(to, from);
+      }
+      return [];
+    });
+    __publicField(this, "toString", () => {
+      let result = "";
+      for (const item of this.items) {
+        const value = this.getItemValue(item);
+        const label = this.stringifyItem(item);
+        const disabled = this.getItemDisabled(item);
+        const itemString = [value, label, disabled].filter(Boolean).join(":");
+        result += itemString + ",";
+      }
+      return result;
+    });
+    __publicField(this, "toJSON", () => {
+      return {
+        size: this.size,
+        first: this.firstValue,
+        last: this.lastValue
+      };
+    });
+    this.items = [...options.items];
+  }
+  /**
+   * Returns the number of items in the collection
+   */
+  get size() {
+    return this.items.length;
+  }
+  /**
+   * Returns the first value in the collection
+   */
+  get firstValue() {
+    let index = 0;
+    while (this.getItemDisabled(this.at(index))) index++;
+    return this.getItemValue(this.at(index));
+  }
+  /**
+   * Returns the last value in the collection
+   */
+  get lastValue() {
+    let index = this.size - 1;
+    while (this.getItemDisabled(this.at(index))) index--;
+    return this.getItemValue(this.at(index));
+  }
+  *[Symbol.iterator]() {
+    yield* this.items;
+  }
+};
+var match = (label, query) => {
+  return !!label?.toLowerCase().startsWith(query.toLowerCase());
+};
+function insert(items, index, ...values) {
+  return [...items.slice(0, index), ...values, ...items.slice(index)];
+}
+function move(items, indices, toIndex) {
+  indices = [...indices].sort((a, b) => a - b);
+  const itemsToMove = indices.map((i) => items[i]);
+  for (let i = indices.length - 1; i >= 0; i--) {
+    items = [...items.slice(0, indices[i]), ...items.slice(indices[i] + 1)];
+  }
+  toIndex = Math.max(0, toIndex - indices.filter((i) => i < toIndex).length);
+  return [...items.slice(0, toIndex), ...itemsToMove, ...items.slice(toIndex)];
+}
+var GridCollection = class extends ListCollection {
+  constructor(options) {
+    const { columnCount } = options;
+    super(options);
+    __publicField(this, "columnCount");
+    __publicField(this, "rows", null);
+    __publicField(this, "getRows", () => {
+      if (!this.rows) {
+        this.rows = chunk([...this.items], this.columnCount);
+      }
+      return this.rows;
+    });
+    __publicField(this, "getRowCount", () => {
+      return Math.ceil(this.items.length / this.columnCount);
+    });
+    __publicField(this, "getCellIndex", (row, column) => {
+      return row * this.columnCount + column;
+    });
+    __publicField(this, "getCell", (row, column) => {
+      return this.at(this.getCellIndex(row, column));
+    });
+    __publicField(this, "getValueCell", (value) => {
+      const index = this.indexOf(value);
+      if (index === -1) return null;
+      const row = Math.floor(index / this.columnCount);
+      const column = index % this.columnCount;
+      return { row, column };
+    });
+    __publicField(this, "getLastEnabledColumnIndex", (row) => {
+      for (let col = this.columnCount - 1; col >= 0; col--) {
+        const cell = this.getCell(row, col);
+        if (cell && !this.getItemDisabled(cell)) {
+          return col;
+        }
+      }
+      return null;
+    });
+    __publicField(this, "getFirstEnabledColumnIndex", (row) => {
+      for (let col = 0; col < this.columnCount; col++) {
+        const cell = this.getCell(row, col);
+        if (cell && !this.getItemDisabled(cell)) {
+          return col;
+        }
+      }
+      return null;
+    });
+    __publicField(this, "getPreviousRowValue", (value, loop = false) => {
+      const currentCell = this.getValueCell(value);
+      if (currentCell === null) return null;
+      const rows = this.getRows();
+      const rowCount = rows.length;
+      let prevRowIndex = currentCell.row;
+      let prevColumnIndex = currentCell.column;
+      for (let i = 1; i <= rowCount; i++) {
+        prevRowIndex = prevIndex(rows, prevRowIndex, { loop });
+        const prevRow = rows[prevRowIndex];
+        if (!prevRow) continue;
+        const prevCell = prevRow[prevColumnIndex];
+        if (!prevCell) {
+          const lastColumnIndex = this.getLastEnabledColumnIndex(prevRowIndex);
+          if (lastColumnIndex != null) {
+            prevColumnIndex = lastColumnIndex;
+          }
+        }
+        const cell = this.getCell(prevRowIndex, prevColumnIndex);
+        if (!this.getItemDisabled(cell)) {
+          return this.getItemValue(cell);
+        }
+      }
+      return this.firstValue;
+    });
+    __publicField(this, "getNextRowValue", (value, loop = false) => {
+      const currentCell = this.getValueCell(value);
+      if (currentCell === null) return null;
+      const rows = this.getRows();
+      const rowCount = rows.length;
+      let nextRowIndex = currentCell.row;
+      let nextColumnIndex = currentCell.column;
+      for (let i = 1; i <= rowCount; i++) {
+        nextRowIndex = nextIndex(rows, nextRowIndex, { loop });
+        const nextRow = rows[nextRowIndex];
+        if (!nextRow) continue;
+        const nextCell = nextRow[nextColumnIndex];
+        if (!nextCell) {
+          const lastColumnIndex = this.getLastEnabledColumnIndex(nextRowIndex);
+          if (lastColumnIndex != null) {
+            nextColumnIndex = lastColumnIndex;
+          }
+        }
+        const cell = this.getCell(nextRowIndex, nextColumnIndex);
+        if (!this.getItemDisabled(cell)) {
+          return this.getItemValue(cell);
+        }
+      }
+      return this.lastValue;
+    });
+    this.columnCount = columnCount;
+  }
+};
+function isGridCollection(v) {
+  return hasProp(v, "columnCount") && hasProp(v, "getRows");
+}
+var Selection = class _Selection extends Set {
+  constructor(values = []) {
+    super(values);
+    __publicField(this, "selectionMode", "single");
+    __publicField(this, "deselectable", true);
+    __publicField(this, "copy", () => {
+      const clone = new _Selection([...this]);
+      return this.sync(clone);
+    });
+    __publicField(this, "sync", (other) => {
+      other.selectionMode = this.selectionMode;
+      other.deselectable = this.deselectable;
+      return other;
+    });
+    __publicField(this, "isEmpty", () => {
+      return this.size === 0;
+    });
+    __publicField(this, "isSelected", (value) => {
+      if (this.selectionMode === "none" || value == null) {
+        return false;
+      }
+      return this.has(value);
+    });
+    __publicField(this, "canSelect", (collection, value) => {
+      return this.selectionMode !== "none" || !collection.getItemDisabled(collection.find(value));
+    });
+    __publicField(this, "firstSelectedValue", (collection) => {
+      let firstValue = null;
+      for (let value of this) {
+        if (!firstValue || collection.compareValue(value, firstValue) < 0) {
+          firstValue = value;
+        }
+      }
+      return firstValue;
+    });
+    __publicField(this, "lastSelectedValue", (collection) => {
+      let lastValue = null;
+      for (let value of this) {
+        if (!lastValue || collection.compareValue(value, lastValue) > 0) {
+          lastValue = value;
+        }
+      }
+      return lastValue;
+    });
+    __publicField(this, "extendSelection", (collection, anchorValue, targetValue) => {
+      if (this.selectionMode === "none") {
+        return this;
+      }
+      if (this.selectionMode === "single") {
+        return this.replaceSelection(collection, targetValue);
+      }
+      const selection = this.copy();
+      const lastSelected = Array.from(this).pop();
+      for (let key of collection.getValueRange(anchorValue, lastSelected ?? targetValue)) {
+        selection.delete(key);
+      }
+      for (let key of collection.getValueRange(targetValue, anchorValue)) {
+        if (this.canSelect(collection, key)) {
+          selection.add(key);
+        }
+      }
+      return selection;
+    });
+    __publicField(this, "toggleSelection", (collection, value) => {
+      if (this.selectionMode === "none") {
+        return this;
+      }
+      if (this.selectionMode === "single" && !this.isSelected(value)) {
+        return this.replaceSelection(collection, value);
+      }
+      const selection = this.copy();
+      if (selection.has(value)) {
+        selection.delete(value);
+      } else if (selection.canSelect(collection, value)) {
+        selection.add(value);
+      }
+      return selection;
+    });
+    __publicField(this, "replaceSelection", (collection, value) => {
+      if (this.selectionMode === "none") {
+        return this;
+      }
+      if (value == null) {
+        return this;
+      }
+      if (!this.canSelect(collection, value)) {
+        return this;
+      }
+      const selection = new _Selection([value]);
+      return this.sync(selection);
+    });
+    __publicField(this, "setSelection", (values2) => {
+      if (this.selectionMode === "none") {
+        return this;
+      }
+      let selection = new _Selection();
+      for (let value of values2) {
+        if (value != null) {
+          selection.add(value);
+          if (this.selectionMode === "single") {
+            break;
+          }
+        }
+      }
+      return this.sync(selection);
+    });
+    __publicField(this, "clearSelection", () => {
+      const selection = this.copy();
+      if (selection.deselectable && selection.size > 0) {
+        selection.clear();
+      }
+      return selection;
+    });
+    __publicField(this, "select", (collection, value, forceToggle) => {
+      if (this.selectionMode === "none") {
+        return this;
+      }
+      if (this.selectionMode === "single") {
+        if (this.isSelected(value) && this.deselectable) {
+          return this.toggleSelection(collection, value);
+        } else {
+          return this.replaceSelection(collection, value);
+        }
+      } else if (this.selectionMode === "multiple" || forceToggle) {
+        return this.toggleSelection(collection, value);
+      } else {
+        return this.replaceSelection(collection, value);
+      }
+    });
+    __publicField(this, "deselect", (value) => {
+      const selection = this.copy();
+      selection.delete(value);
+      return selection;
+    });
+    __publicField(this, "isEqual", (other) => {
+      return isEqual(Array.from(this), Array.from(other));
+    });
+  }
+};
+function access(node, indexPath, options) {
+  for (let i = 0; i < indexPath.length; i++) node = options.getChildren(node, indexPath.slice(i + 1))[indexPath[i]];
+  return node;
+}
+function ancestorIndexPaths(indexPaths) {
+  const sortedPaths = sortIndexPaths(indexPaths);
+  const result = [];
+  const seen = /* @__PURE__ */ new Set();
+  for (const indexPath of sortedPaths) {
+    const key = indexPath.join();
+    if (!seen.has(key)) {
+      seen.add(key);
+      result.push(indexPath);
+    }
+  }
+  return result;
+}
+function compareIndexPaths(a, b) {
+  for (let i = 0; i < Math.min(a.length, b.length); i++) {
+    if (a[i] < b[i]) return -1;
+    if (a[i] > b[i]) return 1;
+  }
+  return a.length - b.length;
+}
+function sortIndexPaths(indexPaths) {
+  return indexPaths.sort(compareIndexPaths);
+}
+function find(node, options) {
+  let found;
+  visit(node, {
+    ...options,
+    onEnter: (child, indexPath) => {
+      if (options.predicate(child, indexPath)) {
+        found = child;
+        return "stop";
+      }
+    }
+  });
+  return found;
+}
+function findAll(node, options) {
+  const found = [];
+  visit(node, {
+    onEnter: (child, indexPath) => {
+      if (options.predicate(child, indexPath)) found.push(child);
+    },
+    getChildren: options.getChildren
+  });
+  return found;
+}
+function findIndexPath(node, options) {
+  let found;
+  visit(node, {
+    onEnter: (child, indexPath) => {
+      if (options.predicate(child, indexPath)) {
+        found = [...indexPath];
+        return "stop";
+      }
+    },
+    getChildren: options.getChildren
+  });
+  return found;
+}
+function reduce(node, options) {
+  let result = options.initialResult;
+  visit(node, {
+    ...options,
+    onEnter: (child, indexPath) => {
+      result = options.nextResult(result, child, indexPath);
+    }
+  });
+  return result;
+}
+function flatMap(node, options) {
+  return reduce(node, {
+    ...options,
+    initialResult: [],
+    nextResult: (result, child, indexPath) => {
+      result.push(...options.transform(child, indexPath));
+      return result;
+    }
+  });
+}
+function filter(node, options) {
+  const { predicate, create, getChildren } = options;
+  const filterRecursive = (node2, indexPath) => {
+    const children = getChildren(node2, indexPath);
+    const filteredChildren = [];
+    children.forEach((child, index) => {
+      const childIndexPath = [...indexPath, index];
+      const filteredChild = filterRecursive(child, childIndexPath);
+      if (filteredChild) filteredChildren.push(filteredChild);
+    });
+    const isRoot = indexPath.length === 0;
+    const nodeMatches = predicate(node2, indexPath);
+    const hasFilteredChildren = filteredChildren.length > 0;
+    if (isRoot || nodeMatches || hasFilteredChildren) {
+      return create(node2, filteredChildren, indexPath);
+    }
+    return null;
+  };
+  return filterRecursive(node, []) || create(node, [], []);
+}
+function flatten(rootNode, options) {
+  const nodes = [];
+  let idx = 0;
+  const idxMap = /* @__PURE__ */ new Map();
+  const parentMap = /* @__PURE__ */ new Map();
+  visit(rootNode, {
+    getChildren: options.getChildren,
+    onEnter: (node, indexPath) => {
+      if (!idxMap.has(node)) {
+        idxMap.set(node, idx++);
+      }
+      const children = options.getChildren(node, indexPath);
+      children.forEach((child) => {
+        if (!parentMap.has(child)) {
+          parentMap.set(child, node);
+        }
+        if (!idxMap.has(child)) {
+          idxMap.set(child, idx++);
+        }
+      });
+      const _children = children.length > 0 ? children.map((child) => idxMap.get(child)) : void 0;
+      const parent = parentMap.get(node);
+      const _parent = parent ? idxMap.get(parent) : void 0;
+      const _index = idxMap.get(node);
+      nodes.push({ ...node, _children, _parent, _index });
+    }
+  });
+  return nodes;
+}
+function insertOperation(index, nodes) {
+  return { type: "insert", index, nodes };
+}
+function removeOperation(indexes) {
+  return { type: "remove", indexes };
+}
+function replaceOperation() {
+  return { type: "replace" };
+}
+function splitIndexPath(indexPath) {
+  return [indexPath.slice(0, -1), indexPath[indexPath.length - 1]];
+}
+function getInsertionOperations(indexPath, nodes, operations = /* @__PURE__ */ new Map()) {
+  const [parentIndexPath, index] = splitIndexPath(indexPath);
+  for (let i = parentIndexPath.length - 1; i >= 0; i--) {
+    const parentKey = parentIndexPath.slice(0, i).join();
+    switch (operations.get(parentKey)?.type) {
+      case "remove":
+        continue;
+    }
+    operations.set(parentKey, replaceOperation());
+  }
+  const operation = operations.get(parentIndexPath.join());
+  switch (operation?.type) {
+    case "remove":
+      operations.set(parentIndexPath.join(), {
+        type: "removeThenInsert",
+        removeIndexes: operation.indexes,
+        insertIndex: index,
+        insertNodes: nodes
+      });
+      break;
+    default:
+      operations.set(parentIndexPath.join(), insertOperation(index, nodes));
+  }
+  return operations;
+}
+function getRemovalOperations(indexPaths) {
+  const operations = /* @__PURE__ */ new Map();
+  const indexesToRemove = /* @__PURE__ */ new Map();
+  for (const indexPath of indexPaths) {
+    const parentKey = indexPath.slice(0, -1).join();
+    const value = indexesToRemove.get(parentKey) ?? [];
+    value.push(indexPath[indexPath.length - 1]);
+    indexesToRemove.set(
+      parentKey,
+      value.sort((a, b) => a - b)
+    );
+  }
+  for (const indexPath of indexPaths) {
+    for (let i = indexPath.length - 2; i >= 0; i--) {
+      const parentKey = indexPath.slice(0, i).join();
+      if (!operations.has(parentKey)) {
+        operations.set(parentKey, replaceOperation());
+      }
+    }
+  }
+  for (const [parentKey, indexes] of indexesToRemove) {
+    operations.set(parentKey, removeOperation(indexes));
+  }
+  return operations;
+}
+function getReplaceOperations(indexPath, node) {
+  const operations = /* @__PURE__ */ new Map();
+  const [parentIndexPath, index] = splitIndexPath(indexPath);
+  for (let i = parentIndexPath.length - 1; i >= 0; i--) {
+    const parentKey = parentIndexPath.slice(0, i).join();
+    operations.set(parentKey, replaceOperation());
+  }
+  operations.set(parentIndexPath.join(), {
+    type: "removeThenInsert",
+    removeIndexes: [index],
+    insertIndex: index,
+    insertNodes: [node]
+  });
+  return operations;
+}
+function mutate(node, operations, options) {
+  return map(node, {
+    ...options,
+    getChildren: (node2, indexPath) => {
+      const key = indexPath.join();
+      const operation = operations.get(key);
+      switch (operation?.type) {
+        case "replace":
+        case "remove":
+        case "removeThenInsert":
+        case "insert":
+          return options.getChildren(node2, indexPath);
+        default:
+          return [];
+      }
+    },
+    transform: (node2, children, indexPath) => {
+      const key = indexPath.join();
+      const operation = operations.get(key);
+      switch (operation?.type) {
+        case "remove":
+          return options.create(
+            node2,
+            children.filter((_, index) => !operation.indexes.includes(index)),
+            indexPath
+          );
+        case "removeThenInsert":
+          const updatedChildren = children.filter((_, index) => !operation.removeIndexes.includes(index));
+          const adjustedIndex = operation.removeIndexes.reduce(
+            (index, removedIndex) => removedIndex < index ? index - 1 : index,
+            operation.insertIndex
+          );
+          return options.create(node2, splice(updatedChildren, adjustedIndex, 0, ...operation.insertNodes), indexPath);
+        case "insert":
+          return options.create(node2, splice(children, operation.index, 0, ...operation.nodes), indexPath);
+        case "replace":
+          return options.create(node2, children, indexPath);
+        default:
+          return node2;
+      }
+    }
+  });
+}
+function splice(array, start, deleteCount, ...items) {
+  return [...array.slice(0, start), ...items, ...array.slice(start + deleteCount)];
+}
+function map(node, options) {
+  const childrenMap = {};
+  visit(node, {
+    ...options,
+    onLeave: (child, indexPath) => {
+      const keyIndexPath = [0, ...indexPath];
+      const key = keyIndexPath.join();
+      const transformed = options.transform(child, childrenMap[key] ?? [], indexPath);
+      const parentKey = keyIndexPath.slice(0, -1).join();
+      const parentChildren = childrenMap[parentKey] ?? [];
+      parentChildren.push(transformed);
+      childrenMap[parentKey] = parentChildren;
+    }
+  });
+  return childrenMap[""][0];
+}
+function insert2(node, options) {
+  const { nodes, at } = options;
+  if (at.length === 0) throw new Error(`Can't insert nodes at the root`);
+  const state = getInsertionOperations(at, nodes);
+  return mutate(node, state, options);
+}
+function replace(node, options) {
+  if (options.at.length === 0) return options.node;
+  const operations = getReplaceOperations(options.at, options.node);
+  return mutate(node, operations, options);
+}
+function remove(node, options) {
+  if (options.indexPaths.length === 0) return node;
+  for (const indexPath of options.indexPaths) {
+    if (indexPath.length === 0) throw new Error(`Can't remove the root node`);
+  }
+  const operations = getRemovalOperations(options.indexPaths);
+  return mutate(node, operations, options);
+}
+function move2(node, options) {
+  if (options.indexPaths.length === 0) return node;
+  for (const indexPath of options.indexPaths) {
+    if (indexPath.length === 0) throw new Error(`Can't move the root node`);
+  }
+  if (options.to.length === 0) throw new Error(`Can't move nodes to the root`);
+  const _ancestorIndexPaths = ancestorIndexPaths(options.indexPaths);
+  const nodesToInsert = _ancestorIndexPaths.map((indexPath) => access(node, indexPath, options));
+  const operations = getInsertionOperations(options.to, nodesToInsert, getRemovalOperations(_ancestorIndexPaths));
+  return mutate(node, operations, options);
+}
+function visit(node, options) {
+  const { onEnter, onLeave, getChildren } = options;
+  let indexPath = [];
+  let stack = [{ node }];
+  const getIndexPath = options.reuseIndexPath ? () => indexPath : () => indexPath.slice();
+  while (stack.length > 0) {
+    let wrapper = stack[stack.length - 1];
+    if (wrapper.state === void 0) {
+      const enterResult = onEnter?.(wrapper.node, getIndexPath());
+      if (enterResult === "stop") return;
+      wrapper.state = enterResult === "skip" ? -1 : 0;
+    }
+    const children = wrapper.children || getChildren(wrapper.node, getIndexPath());
+    wrapper.children || (wrapper.children = children);
+    if (wrapper.state !== -1) {
+      if (wrapper.state < children.length) {
+        let currentIndex = wrapper.state;
+        indexPath.push(currentIndex);
+        stack.push({ node: children[currentIndex] });
+        wrapper.state = currentIndex + 1;
+        continue;
+      }
+      const leaveResult = onLeave?.(wrapper.node, getIndexPath());
+      if (leaveResult === "stop") return;
+    }
+    indexPath.pop();
+    stack.pop();
+  }
+}
+var TreeCollection = class _TreeCollection {
+  constructor(options) {
+    this.options = options;
+    __publicField(this, "rootNode");
+    __publicField(this, "isEqual", (other) => {
+      return isEqual(this.rootNode, other.rootNode);
+    });
+    __publicField(this, "getNodeChildren", (node) => {
+      return this.options.nodeToChildren?.(node) ?? fallbackMethods.nodeToChildren(node) ?? [];
+    });
+    __publicField(this, "resolveIndexPath", (valueOrIndexPath) => {
+      return typeof valueOrIndexPath === "string" ? this.getIndexPath(valueOrIndexPath) : valueOrIndexPath;
+    });
+    __publicField(this, "resolveNode", (valueOrIndexPath) => {
+      const indexPath = this.resolveIndexPath(valueOrIndexPath);
+      return indexPath ? this.at(indexPath) : void 0;
+    });
+    __publicField(this, "getNodeChildrenCount", (node) => {
+      return this.options.nodeToChildrenCount?.(node) ?? fallbackMethods.nodeToChildrenCount(node);
+    });
+    __publicField(this, "getNodeValue", (node) => {
+      return this.options.nodeToValue?.(node) ?? fallbackMethods.nodeToValue(node);
+    });
+    __publicField(this, "getNodeDisabled", (node) => {
+      return this.options.isNodeDisabled?.(node) ?? fallbackMethods.isNodeDisabled(node);
+    });
+    __publicField(this, "stringify", (value) => {
+      const node = this.findNode(value);
+      if (!node) return null;
+      return this.stringifyNode(node);
+    });
+    __publicField(this, "stringifyNode", (node) => {
+      return this.options.nodeToString?.(node) ?? fallbackMethods.nodeToString(node);
+    });
+    __publicField(this, "getFirstNode", (rootNode = this.rootNode, opts = {}) => {
+      let firstChild;
+      visit(rootNode, {
+        getChildren: this.getNodeChildren,
+        onEnter: (node, indexPath) => {
+          if (this.isSameNode(node, rootNode)) return;
+          if (opts.skip?.({ value: this.getNodeValue(node), node, indexPath })) return "skip";
+          if (!firstChild && indexPath.length > 0 && !this.getNodeDisabled(node)) {
+            firstChild = node;
+            return "stop";
+          }
+        }
+      });
+      return firstChild;
+    });
+    __publicField(this, "getLastNode", (rootNode = this.rootNode, opts = {}) => {
+      let lastChild;
+      visit(rootNode, {
+        getChildren: this.getNodeChildren,
+        onEnter: (node, indexPath) => {
+          if (this.isSameNode(node, rootNode)) return;
+          if (opts.skip?.({ value: this.getNodeValue(node), node, indexPath })) return "skip";
+          if (indexPath.length > 0 && !this.getNodeDisabled(node)) {
+            lastChild = node;
+          }
+        }
+      });
+      return lastChild;
+    });
+    __publicField(this, "at", (indexPath) => {
+      return access(this.rootNode, indexPath, {
+        getChildren: this.getNodeChildren
+      });
+    });
+    __publicField(this, "findNode", (value, rootNode = this.rootNode) => {
+      return find(rootNode, {
+        getChildren: this.getNodeChildren,
+        predicate: (node) => this.getNodeValue(node) === value
+      });
+    });
+    __publicField(this, "findNodes", (values, rootNode = this.rootNode) => {
+      const v = new Set(values.filter((v2) => v2 != null));
+      return findAll(rootNode, {
+        getChildren: this.getNodeChildren,
+        predicate: (node) => v.has(this.getNodeValue(node))
+      });
+    });
+    __publicField(this, "sort", (values) => {
+      return values.reduce((acc, value) => {
+        const indexPath = this.getIndexPath(value);
+        if (indexPath) acc.push({ value, indexPath });
+        return acc;
+      }, []).sort((a, b) => compareIndexPaths(a.indexPath, b.indexPath)).map(({ value }) => value);
+    });
+    __publicField(this, "getValue", (indexPath) => {
+      const node = this.at(indexPath);
+      return node ? this.getNodeValue(node) : void 0;
+    });
+    __publicField(this, "getValuePath", (indexPath) => {
+      if (!indexPath) return [];
+      const valuePath = [];
+      let currentPath = [...indexPath];
+      while (currentPath.length > 0) {
+        const node = this.at(currentPath);
+        if (node) valuePath.unshift(this.getNodeValue(node));
+        currentPath.pop();
+      }
+      return valuePath;
+    });
+    __publicField(this, "getDepth", (value) => {
+      const indexPath = findIndexPath(this.rootNode, {
+        getChildren: this.getNodeChildren,
+        predicate: (node) => this.getNodeValue(node) === value
+      });
+      return indexPath?.length ?? 0;
+    });
+    __publicField(this, "isSameNode", (node, other) => {
+      return this.getNodeValue(node) === this.getNodeValue(other);
+    });
+    __publicField(this, "isRootNode", (node) => {
+      return this.isSameNode(node, this.rootNode);
+    });
+    __publicField(this, "contains", (parentIndexPath, valueIndexPath) => {
+      if (!parentIndexPath || !valueIndexPath) return false;
+      return valueIndexPath.slice(0, parentIndexPath.length).every((_, i) => parentIndexPath[i] === valueIndexPath[i]);
+    });
+    __publicField(this, "getNextNode", (value, opts = {}) => {
+      let found = false;
+      let nextNode;
+      visit(this.rootNode, {
+        getChildren: this.getNodeChildren,
+        onEnter: (node, indexPath) => {
+          if (this.isRootNode(node)) return;
+          const nodeValue = this.getNodeValue(node);
+          if (opts.skip?.({ value: nodeValue, node, indexPath })) {
+            if (nodeValue === value) {
+              found = true;
+            }
+            return "skip";
+          }
+          if (found && !this.getNodeDisabled(node)) {
+            nextNode = node;
+            return "stop";
+          }
+          if (nodeValue === value) {
+            found = true;
+          }
+        }
+      });
+      return nextNode;
+    });
+    __publicField(this, "getPreviousNode", (value, opts = {}) => {
+      let previousNode;
+      let found = false;
+      visit(this.rootNode, {
+        getChildren: this.getNodeChildren,
+        onEnter: (node, indexPath) => {
+          if (this.isRootNode(node)) return;
+          const nodeValue = this.getNodeValue(node);
+          if (opts.skip?.({ value: nodeValue, node, indexPath })) {
+            return "skip";
+          }
+          if (nodeValue === value) {
+            found = true;
+            return "stop";
+          }
+          if (!this.getNodeDisabled(node)) {
+            previousNode = node;
+          }
+        }
+      });
+      return found ? previousNode : void 0;
+    });
+    __publicField(this, "getParentNodes", (valueOrIndexPath) => {
+      const indexPath = this.resolveIndexPath(valueOrIndexPath)?.slice();
+      if (!indexPath) return [];
+      const result = [];
+      while (indexPath.length > 0) {
+        indexPath.pop();
+        const parentNode = this.at(indexPath);
+        if (parentNode && !this.isRootNode(parentNode)) {
+          result.unshift(parentNode);
+        }
+      }
+      return result;
+    });
+    __publicField(this, "getDescendantNodes", (valueOrIndexPath, options2) => {
+      const parentNode = this.resolveNode(valueOrIndexPath);
+      if (!parentNode) return [];
+      const result = [];
+      visit(parentNode, {
+        getChildren: this.getNodeChildren,
+        onEnter: (node, nodeIndexPath) => {
+          if (nodeIndexPath.length === 0) return;
+          if (!options2?.withBranch && this.isBranchNode(node)) return;
+          result.push(node);
+        }
+      });
+      return result;
+    });
+    __publicField(this, "getDescendantValues", (valueOrIndexPath, options2) => {
+      const children = this.getDescendantNodes(valueOrIndexPath, options2);
+      return children.map((child) => this.getNodeValue(child));
+    });
+    __publicField(this, "getParentIndexPath", (indexPath) => {
+      return indexPath.slice(0, -1);
+    });
+    __publicField(this, "getParentNode", (valueOrIndexPath) => {
+      const indexPath = this.resolveIndexPath(valueOrIndexPath);
+      return indexPath ? this.at(this.getParentIndexPath(indexPath)) : void 0;
+    });
+    __publicField(this, "visit", (opts) => {
+      const { skip, ...rest } = opts;
+      visit(this.rootNode, {
+        ...rest,
+        getChildren: this.getNodeChildren,
+        onEnter: (node, indexPath) => {
+          if (this.isRootNode(node)) return;
+          if (skip?.({ value: this.getNodeValue(node), node, indexPath })) return "skip";
+          return rest.onEnter?.(node, indexPath);
+        }
+      });
+    });
+    __publicField(this, "getPreviousSibling", (indexPath) => {
+      const parentNode = this.getParentNode(indexPath);
+      if (!parentNode) return;
+      const siblings = this.getNodeChildren(parentNode);
+      let idx = indexPath[indexPath.length - 1];
+      while (--idx >= 0) {
+        const sibling = siblings[idx];
+        if (!this.getNodeDisabled(sibling)) return sibling;
+      }
+      return;
+    });
+    __publicField(this, "getNextSibling", (indexPath) => {
+      const parentNode = this.getParentNode(indexPath);
+      if (!parentNode) return;
+      const siblings = this.getNodeChildren(parentNode);
+      let idx = indexPath[indexPath.length - 1];
+      while (++idx < siblings.length) {
+        const sibling = siblings[idx];
+        if (!this.getNodeDisabled(sibling)) return sibling;
+      }
+      return;
+    });
+    __publicField(this, "getSiblingNodes", (indexPath) => {
+      const parentNode = this.getParentNode(indexPath);
+      return parentNode ? this.getNodeChildren(parentNode) : [];
+    });
+    __publicField(this, "getValues", (rootNode = this.rootNode) => {
+      const values = flatMap(rootNode, {
+        getChildren: this.getNodeChildren,
+        transform: (node) => [this.getNodeValue(node)]
+      });
+      return values.slice(1);
+    });
+    __publicField(this, "isValidDepth", (indexPath, depth) => {
+      if (depth == null) return true;
+      if (typeof depth === "function") return depth(indexPath.length);
+      return indexPath.length === depth;
+    });
+    __publicField(this, "isBranchNode", (node) => {
+      return this.getNodeChildren(node).length > 0 || this.getNodeChildrenCount(node) != null;
+    });
+    __publicField(this, "getBranchValues", (rootNode = this.rootNode, opts = {}) => {
+      let values = [];
+      visit(rootNode, {
+        getChildren: this.getNodeChildren,
+        onEnter: (node, indexPath) => {
+          if (indexPath.length === 0) return;
+          const nodeValue = this.getNodeValue(node);
+          if (opts.skip?.({ value: nodeValue, node, indexPath })) return "skip";
+          if (this.isBranchNode(node) && this.isValidDepth(indexPath, opts.depth)) {
+            values.push(this.getNodeValue(node));
+          }
+        }
+      });
+      return values;
+    });
+    __publicField(this, "flatten", (rootNode = this.rootNode) => {
+      return flatten(rootNode, { getChildren: this.getNodeChildren });
+    });
+    __publicField(this, "_create", (node, children) => {
+      if (this.getNodeChildren(node).length > 0 || children.length > 0) {
+        return { ...node, children };
+      }
+      return { ...node };
+    });
+    __publicField(this, "_insert", (rootNode, indexPath, nodes) => {
+      return this.copy(
+        insert2(rootNode, { at: indexPath, nodes, getChildren: this.getNodeChildren, create: this._create })
+      );
+    });
+    __publicField(this, "copy", (rootNode) => {
+      return new _TreeCollection({ ...this.options, rootNode });
+    });
+    __publicField(this, "_replace", (rootNode, indexPath, node) => {
+      return this.copy(
+        replace(rootNode, { at: indexPath, node, getChildren: this.getNodeChildren, create: this._create })
+      );
+    });
+    __publicField(this, "_move", (rootNode, indexPaths, to) => {
+      return this.copy(move2(rootNode, { indexPaths, to, getChildren: this.getNodeChildren, create: this._create }));
+    });
+    __publicField(this, "_remove", (rootNode, indexPaths) => {
+      return this.copy(remove(rootNode, { indexPaths, getChildren: this.getNodeChildren, create: this._create }));
+    });
+    __publicField(this, "replace", (indexPath, node) => {
+      return this._replace(this.rootNode, indexPath, node);
+    });
+    __publicField(this, "remove", (indexPaths) => {
+      return this._remove(this.rootNode, indexPaths);
+    });
+    __publicField(this, "insertBefore", (indexPath, nodes) => {
+      const parentNode = this.getParentNode(indexPath);
+      return parentNode ? this._insert(this.rootNode, indexPath, nodes) : void 0;
+    });
+    __publicField(this, "insertAfter", (indexPath, nodes) => {
+      const parentNode = this.getParentNode(indexPath);
+      if (!parentNode) return;
+      const nextIndex2 = [...indexPath.slice(0, -1), indexPath[indexPath.length - 1] + 1];
+      return this._insert(this.rootNode, nextIndex2, nodes);
+    });
+    __publicField(this, "move", (fromIndexPaths, toIndexPath) => {
+      return this._move(this.rootNode, fromIndexPaths, toIndexPath);
+    });
+    __publicField(this, "filter", (predicate) => {
+      const filteredRoot = filter(this.rootNode, {
+        predicate,
+        getChildren: this.getNodeChildren,
+        create: this._create
+      });
+      return this.copy(filteredRoot);
+    });
+    __publicField(this, "toJSON", () => {
+      return this.getValues(this.rootNode);
+    });
+    this.rootNode = options.rootNode;
+  }
+  getIndexPath(valueOrValuePath) {
+    if (Array.isArray(valueOrValuePath)) {
+      if (valueOrValuePath.length === 0) return [];
+      const indexPath = [];
+      let currentChildren = this.getNodeChildren(this.rootNode);
+      for (let i = 0; i < valueOrValuePath.length; i++) {
+        const currentValue = valueOrValuePath[i];
+        const matchingChildIndex = currentChildren.findIndex((child) => this.getNodeValue(child) === currentValue);
+        if (matchingChildIndex === -1) break;
+        indexPath.push(matchingChildIndex);
+        if (i < valueOrValuePath.length - 1) {
+          const currentNode = currentChildren[matchingChildIndex];
+          currentChildren = this.getNodeChildren(currentNode);
+        }
+      }
+      return indexPath;
+    } else {
+      return findIndexPath(this.rootNode, {
+        getChildren: this.getNodeChildren,
+        predicate: (node) => this.getNodeValue(node) === valueOrValuePath
+      });
+    }
+  }
+};
+var fallbackMethods = {
+  nodeToValue(node) {
+    if (typeof node === "string") return node;
+    if (isObject(node) && hasProp(node, "value")) return node.value;
+    return "";
+  },
+  nodeToString(node) {
+    if (typeof node === "string") return node;
+    if (isObject(node) && hasProp(node, "label")) return node.label;
+    return fallbackMethods.nodeToValue(node);
+  },
+  isNodeDisabled(node) {
+    if (isObject(node) && hasProp(node, "disabled")) return !!node.disabled;
+    return false;
+  },
+  nodeToChildren(node) {
+    return node.children;
+  },
+  nodeToChildrenCount(node) {
+    if (isObject(node) && hasProp(node, "childrenCount")) return node.childrenCount;
+  }
+};
+
+export {
+  ListCollection,
+  GridCollection,
+  isGridCollection,
+  Selection,
+  TreeCollection
+};
diff --git a/priv/static/chunk-OA4F3YDQ.mjs b/priv/static/chunk-OA4F3YDQ.mjs
new file mode 100644
index 0000000..4d59382
--- /dev/null
+++ b/priv/static/chunk-OA4F3YDQ.mjs
@@ -0,0 +1,295 @@
+import {
+  trackInteractOutside
+} from "./chunk-EBQGC3XC.mjs";
+import {
+  addDomEvent,
+  contains,
+  getDocument,
+  getEventTarget,
+  isFunction,
+  isHTMLElement,
+  nextTick,
+  raf,
+  setStyle,
+  waitForElement,
+  warn
+} from "./chunk-RUWIVFVB.mjs";
+
+// ../node_modules/.pnpm/@zag-js+dismissable@1.34.1/node_modules/@zag-js/dismissable/dist/index.mjs
+function trackEscapeKeydown(node, fn) {
+  const handleKeyDown = (event) => {
+    if (event.key !== "Escape") return;
+    if (event.isComposing) return;
+    fn?.(event);
+  };
+  return addDomEvent(getDocument(node), "keydown", handleKeyDown, { capture: true });
+}
+var LAYER_REQUEST_DISMISS_EVENT = "layer:request-dismiss";
+var layerStack = {
+  layers: [],
+  branches: [],
+  recentlyRemoved: /* @__PURE__ */ new Set(),
+  count() {
+    return this.layers.length;
+  },
+  pointerBlockingLayers() {
+    return this.layers.filter((layer) => layer.pointerBlocking);
+  },
+  topMostPointerBlockingLayer() {
+    return [...this.pointerBlockingLayers()].slice(-1)[0];
+  },
+  hasPointerBlockingLayer() {
+    return this.pointerBlockingLayers().length > 0;
+  },
+  isBelowPointerBlockingLayer(node) {
+    const index = this.indexOf(node);
+    const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
+    return index < highestBlockingIndex;
+  },
+  isTopMost(node) {
+    const layer = this.layers[this.count() - 1];
+    return layer?.node === node;
+  },
+  getNestedLayers(node) {
+    return Array.from(this.layers).slice(this.indexOf(node) + 1);
+  },
+  getLayersByType(type) {
+    return this.layers.filter((layer) => layer.type === type);
+  },
+  getNestedLayersByType(node, type) {
+    const index = this.indexOf(node);
+    if (index === -1) return [];
+    return this.layers.slice(index + 1).filter((layer) => layer.type === type);
+  },
+  getParentLayerOfType(node, type) {
+    const index = this.indexOf(node);
+    if (index <= 0) return void 0;
+    return this.layers.slice(0, index).reverse().find((layer) => layer.type === type);
+  },
+  countNestedLayersOfType(node, type) {
+    return this.getNestedLayersByType(node, type).length;
+  },
+  isInNestedLayer(node, target) {
+    const inNested = this.getNestedLayers(node).some((layer) => contains(layer.node, target));
+    if (inNested) return true;
+    if (this.recentlyRemoved.size > 0) return true;
+    return false;
+  },
+  isInBranch(target) {
+    return Array.from(this.branches).some((branch) => contains(branch, target));
+  },
+  add(layer) {
+    this.layers.push(layer);
+    this.syncLayers();
+  },
+  addBranch(node) {
+    this.branches.push(node);
+  },
+  remove(node) {
+    const index = this.indexOf(node);
+    if (index < 0) return;
+    this.recentlyRemoved.add(node);
+    nextTick(() => this.recentlyRemoved.delete(node));
+    if (index < this.count() - 1) {
+      const _layers = this.getNestedLayers(node);
+      _layers.forEach((layer) => layerStack.dismiss(layer.node, node));
+    }
+    this.layers.splice(index, 1);
+    this.syncLayers();
+  },
+  removeBranch(node) {
+    const index = this.branches.indexOf(node);
+    if (index >= 0) this.branches.splice(index, 1);
+  },
+  syncLayers() {
+    this.layers.forEach((layer, index) => {
+      layer.node.style.setProperty("--layer-index", `${index}`);
+      layer.node.removeAttribute("data-nested");
+      layer.node.removeAttribute("data-has-nested");
+      const parentOfSameType = this.getParentLayerOfType(layer.node, layer.type);
+      if (parentOfSameType) {
+        layer.node.setAttribute("data-nested", layer.type);
+      }
+      const nestedCount = this.countNestedLayersOfType(layer.node, layer.type);
+      if (nestedCount > 0) {
+        layer.node.setAttribute("data-has-nested", layer.type);
+      }
+      layer.node.style.setProperty("--nested-layer-count", `${nestedCount}`);
+    });
+  },
+  indexOf(node) {
+    return this.layers.findIndex((layer) => layer.node === node);
+  },
+  dismiss(node, parent) {
+    const index = this.indexOf(node);
+    if (index === -1) return;
+    const layer = this.layers[index];
+    addListenerOnce(node, LAYER_REQUEST_DISMISS_EVENT, (event) => {
+      layer.requestDismiss?.(event);
+      if (!event.defaultPrevented) {
+        layer?.dismiss();
+      }
+    });
+    fireCustomEvent(node, LAYER_REQUEST_DISMISS_EVENT, {
+      originalLayer: node,
+      targetLayer: parent,
+      originalIndex: index,
+      targetIndex: parent ? this.indexOf(parent) : -1
+    });
+    this.syncLayers();
+  },
+  clear() {
+    this.remove(this.layers[0].node);
+  }
+};
+function fireCustomEvent(el, type, detail) {
+  const win = el.ownerDocument.defaultView || window;
+  const event = new win.CustomEvent(type, { cancelable: true, bubbles: true, detail });
+  return el.dispatchEvent(event);
+}
+function addListenerOnce(el, type, callback) {
+  el.addEventListener(type, callback, { once: true });
+}
+var originalBodyPointerEvents;
+function assignPointerEventToLayers() {
+  layerStack.layers.forEach(({ node }) => {
+    node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
+  });
+}
+function clearPointerEvent(node) {
+  node.style.pointerEvents = "";
+}
+function disablePointerEventsOutside(node, persistentElements) {
+  const doc = getDocument(node);
+  const cleanups = [];
+  if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute("data-inert")) {
+    originalBodyPointerEvents = document.body.style.pointerEvents;
+    queueMicrotask(() => {
+      doc.body.style.pointerEvents = "none";
+      doc.body.setAttribute("data-inert", "");
+    });
+  }
+  persistentElements?.forEach((el) => {
+    const [promise, abort] = waitForElement(
+      () => {
+        const node2 = el();
+        return isHTMLElement(node2) ? node2 : null;
+      },
+      { timeout: 1e3 }
+    );
+    promise.then((el2) => cleanups.push(setStyle(el2, { pointerEvents: "auto" })));
+    cleanups.push(abort);
+  });
+  return () => {
+    if (layerStack.hasPointerBlockingLayer()) return;
+    queueMicrotask(() => {
+      doc.body.style.pointerEvents = originalBodyPointerEvents;
+      doc.body.removeAttribute("data-inert");
+      if (doc.body.style.length === 0) doc.body.removeAttribute("style");
+    });
+    cleanups.forEach((fn) => fn());
+  };
+}
+function trackDismissableElementImpl(node, options) {
+  const { warnOnMissingNode = true } = options;
+  if (warnOnMissingNode && !node) {
+    warn("[@zag-js/dismissable] node is `null` or `undefined`");
+    return;
+  }
+  if (!node) {
+    return;
+  }
+  const { onDismiss, onRequestDismiss, pointerBlocking, exclude: excludeContainers, debug, type = "dialog" } = options;
+  const layer = { dismiss: onDismiss, node, type, pointerBlocking, requestDismiss: onRequestDismiss };
+  layerStack.add(layer);
+  assignPointerEventToLayers();
+  function onPointerDownOutside(event) {
+    const target = getEventTarget(event.detail.originalEvent);
+    if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target)) return;
+    options.onPointerDownOutside?.(event);
+    options.onInteractOutside?.(event);
+    if (event.defaultPrevented) return;
+    if (debug) {
+      console.log("onPointerDownOutside:", event.detail.originalEvent);
+    }
+    onDismiss?.();
+  }
+  function onFocusOutside(event) {
+    const target = getEventTarget(event.detail.originalEvent);
+    if (layerStack.isInBranch(target)) return;
+    options.onFocusOutside?.(event);
+    options.onInteractOutside?.(event);
+    if (event.defaultPrevented) return;
+    if (debug) {
+      console.log("onFocusOutside:", event.detail.originalEvent);
+    }
+    onDismiss?.();
+  }
+  function onEscapeKeyDown(event) {
+    if (!layerStack.isTopMost(node)) return;
+    options.onEscapeKeyDown?.(event);
+    if (!event.defaultPrevented && onDismiss) {
+      event.preventDefault();
+      onDismiss();
+    }
+  }
+  function exclude(target) {
+    if (!node) return false;
+    const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
+    const _containers = Array.isArray(containers) ? containers : [containers];
+    const persistentElements = options.persistentElements?.map((fn) => fn()).filter(isHTMLElement);
+    if (persistentElements) _containers.push(...persistentElements);
+    return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
+  }
+  const cleanups = [
+    pointerBlocking ? disablePointerEventsOutside(node, options.persistentElements) : void 0,
+    trackEscapeKeydown(node, onEscapeKeyDown),
+    trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside, defer: options.defer })
+  ];
+  return () => {
+    layerStack.remove(node);
+    assignPointerEventToLayers();
+    clearPointerEvent(node);
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+function trackDismissableElement(nodeOrFn, options) {
+  const { defer } = options;
+  const func = defer ? raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
+      cleanups.push(trackDismissableElementImpl(node, options));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+function trackDismissableBranch(nodeOrFn, options = {}) {
+  const { defer } = options;
+  const func = defer ? raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = isFunction(nodeOrFn) ? nodeOrFn() : nodeOrFn;
+      if (!node) {
+        warn("[@zag-js/dismissable] branch node is `null` or `undefined`");
+        return;
+      }
+      layerStack.addBranch(node);
+      cleanups.push(() => {
+        layerStack.removeBranch(node);
+      });
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+
+export {
+  trackDismissableElement,
+  trackDismissableBranch
+};
diff --git a/priv/static/chunk-QHOSSHQC.mjs b/priv/static/chunk-QHOSSHQC.mjs
new file mode 100644
index 0000000..046880c
--- /dev/null
+++ b/priv/static/chunk-QHOSSHQC.mjs
@@ -0,0 +1,432 @@
+// ../node_modules/.pnpm/@zag-js+rect-utils@1.34.1/node_modules/@zag-js/rect-utils/dist/index.mjs
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+var AffineTransform = class _AffineTransform {
+  constructor([m00, m01, m02, m10, m11, m12] = [0, 0, 0, 0, 0, 0]) {
+    __publicField(this, "m00");
+    __publicField(this, "m01");
+    __publicField(this, "m02");
+    __publicField(this, "m10");
+    __publicField(this, "m11");
+    __publicField(this, "m12");
+    __publicField(this, "rotate", (...args) => {
+      return this.prepend(_AffineTransform.rotate(...args));
+    });
+    __publicField(this, "scale", (...args) => {
+      return this.prepend(_AffineTransform.scale(...args));
+    });
+    __publicField(this, "translate", (...args) => {
+      return this.prepend(_AffineTransform.translate(...args));
+    });
+    this.m00 = m00;
+    this.m01 = m01;
+    this.m02 = m02;
+    this.m10 = m10;
+    this.m11 = m11;
+    this.m12 = m12;
+  }
+  applyTo(point) {
+    const { x, y } = point;
+    const { m00, m01, m02, m10, m11, m12 } = this;
+    return {
+      x: m00 * x + m01 * y + m02,
+      y: m10 * x + m11 * y + m12
+    };
+  }
+  prepend(other) {
+    return new _AffineTransform([
+      this.m00 * other.m00 + this.m01 * other.m10,
+      // m00
+      this.m00 * other.m01 + this.m01 * other.m11,
+      // m01
+      this.m00 * other.m02 + this.m01 * other.m12 + this.m02,
+      // m02
+      this.m10 * other.m00 + this.m11 * other.m10,
+      // m10
+      this.m10 * other.m01 + this.m11 * other.m11,
+      // m11
+      this.m10 * other.m02 + this.m11 * other.m12 + this.m12
+      // m12
+    ]);
+  }
+  append(other) {
+    return new _AffineTransform([
+      other.m00 * this.m00 + other.m01 * this.m10,
+      // m00
+      other.m00 * this.m01 + other.m01 * this.m11,
+      // m01
+      other.m00 * this.m02 + other.m01 * this.m12 + other.m02,
+      // m02
+      other.m10 * this.m00 + other.m11 * this.m10,
+      // m10
+      other.m10 * this.m01 + other.m11 * this.m11,
+      // m11
+      other.m10 * this.m02 + other.m11 * this.m12 + other.m12
+      // m12
+    ]);
+  }
+  get determinant() {
+    return this.m00 * this.m11 - this.m01 * this.m10;
+  }
+  get isInvertible() {
+    const det = this.determinant;
+    return isFinite(det) && isFinite(this.m02) && isFinite(this.m12) && det !== 0;
+  }
+  invert() {
+    const det = this.determinant;
+    return new _AffineTransform([
+      this.m11 / det,
+      // m00
+      -this.m01 / det,
+      // m01
+      (this.m01 * this.m12 - this.m11 * this.m02) / det,
+      // m02
+      -this.m10 / det,
+      // m10
+      this.m00 / det,
+      // m11
+      (this.m10 * this.m02 - this.m00 * this.m12) / det
+      // m12
+    ]);
+  }
+  get array() {
+    return [this.m00, this.m01, this.m02, this.m10, this.m11, this.m12, 0, 0, 1];
+  }
+  get float32Array() {
+    return new Float32Array(this.array);
+  }
+  // Static
+  static get identity() {
+    return new _AffineTransform([1, 0, 0, 0, 1, 0]);
+  }
+  static rotate(theta, origin) {
+    const rotation = new _AffineTransform([Math.cos(theta), -Math.sin(theta), 0, Math.sin(theta), Math.cos(theta), 0]);
+    if (origin && (origin.x !== 0 || origin.y !== 0)) {
+      return _AffineTransform.multiply(
+        _AffineTransform.translate(origin.x, origin.y),
+        rotation,
+        _AffineTransform.translate(-origin.x, -origin.y)
+      );
+    }
+    return rotation;
+  }
+  static scale(sx, sy = sx, origin = { x: 0, y: 0 }) {
+    const scale = new _AffineTransform([sx, 0, 0, 0, sy, 0]);
+    if (origin.x !== 0 || origin.y !== 0) {
+      return _AffineTransform.multiply(
+        _AffineTransform.translate(origin.x, origin.y),
+        scale,
+        _AffineTransform.translate(-origin.x, -origin.y)
+      );
+    }
+    return scale;
+  }
+  static translate(tx, ty) {
+    return new _AffineTransform([1, 0, tx, 0, 1, ty]);
+  }
+  static multiply(...[first, ...rest]) {
+    if (!first) return _AffineTransform.identity;
+    return rest.reduce((result, item) => result.prepend(item), first);
+  }
+  get a() {
+    return this.m00;
+  }
+  get b() {
+    return this.m10;
+  }
+  get c() {
+    return this.m01;
+  }
+  get d() {
+    return this.m11;
+  }
+  get tx() {
+    return this.m02;
+  }
+  get ty() {
+    return this.m12;
+  }
+  get scaleComponents() {
+    return { x: this.a, y: this.d };
+  }
+  get translationComponents() {
+    return { x: this.tx, y: this.ty };
+  }
+  get skewComponents() {
+    return { x: this.c, y: this.b };
+  }
+  toString() {
+    return `matrix(${this.a}, ${this.b}, ${this.c}, ${this.d}, ${this.tx}, ${this.ty})`;
+  }
+};
+function getPointAngle(rect, point, reference = rect.center) {
+  const x = point.x - reference.x;
+  const y = point.y - reference.y;
+  const deg = Math.atan2(x, y) * (180 / Math.PI) + 180;
+  return 360 - deg;
+}
+var clamp = (value, min3, max2) => Math.min(Math.max(value, min3), max2);
+var clampPoint = (position, size, boundaryRect) => {
+  const x = clamp(position.x, boundaryRect.x, boundaryRect.x + boundaryRect.width - size.width);
+  const y = clamp(position.y, boundaryRect.y, boundaryRect.y + boundaryRect.height - size.height);
+  return { x, y };
+};
+var defaultMinSize = {
+  width: 0,
+  height: 0
+};
+var defaultMaxSize = {
+  width: Infinity,
+  height: Infinity
+};
+var clampSize = (size, minSize = defaultMinSize, maxSize = defaultMaxSize) => {
+  return {
+    width: Math.min(Math.max(size.width, minSize.width), maxSize.width),
+    height: Math.min(Math.max(size.height, minSize.height), maxSize.height)
+  };
+};
+var createPoint = (x, y) => ({ x, y });
+var subtractPoints = (a, b) => {
+  if (!b) return a;
+  return createPoint(a.x - b.x, a.y - b.y);
+};
+var addPoints = (a, b) => createPoint(a.x + b.x, a.y + b.y);
+function createRect(r) {
+  const { x, y, width, height } = r;
+  const midX = x + width / 2;
+  const midY = y + height / 2;
+  return {
+    x,
+    y,
+    width,
+    height,
+    minX: x,
+    minY: y,
+    maxX: x + width,
+    maxY: y + height,
+    midX,
+    midY,
+    center: createPoint(midX, midY)
+  };
+}
+function getRectCorners(v) {
+  const top = createPoint(v.minX, v.minY);
+  const right = createPoint(v.maxX, v.minY);
+  const bottom = createPoint(v.maxX, v.maxY);
+  const left = createPoint(v.minX, v.maxY);
+  return { top, right, bottom, left };
+}
+var constrainRect = (rect, boundary) => {
+  const left = Math.max(boundary.x, Math.min(rect.x, boundary.x + boundary.width - rect.width));
+  const top = Math.max(boundary.y, Math.min(rect.y, boundary.y + boundary.height - rect.height));
+  return {
+    x: left,
+    y: top,
+    width: Math.min(rect.width, boundary.width),
+    height: Math.min(rect.height, boundary.height)
+  };
+};
+var isSizeEqual = (a, b) => {
+  return a.width === b?.width && a.height === b?.height;
+};
+var isPointEqual = (a, b) => {
+  return a.x === b?.x && a.y === b?.y;
+};
+var styleCache = /* @__PURE__ */ new WeakMap();
+function getCacheComputedStyle(el) {
+  if (!styleCache.has(el)) {
+    const win = el.ownerDocument.defaultView || window;
+    styleCache.set(el, win.getComputedStyle(el));
+  }
+  return styleCache.get(el);
+}
+function getElementRect(el, opts = {}) {
+  return createRect(getClientRect(el, opts));
+}
+function getClientRect(el, opts = {}) {
+  const { excludeScrollbar = false, excludeBorders = false } = opts;
+  const { x, y, width, height } = el.getBoundingClientRect();
+  const r = { x, y, width, height };
+  const style = getCacheComputedStyle(el);
+  const { borderLeftWidth, borderTopWidth, borderRightWidth, borderBottomWidth } = style;
+  const borderXWidth = sum(borderLeftWidth, borderRightWidth);
+  const borderYWidth = sum(borderTopWidth, borderBottomWidth);
+  if (excludeBorders) {
+    r.width -= borderXWidth;
+    r.height -= borderYWidth;
+    r.x += px(borderLeftWidth);
+    r.y += px(borderTopWidth);
+  }
+  if (excludeScrollbar) {
+    const scrollbarWidth = el.offsetWidth - el.clientWidth - borderXWidth;
+    const scrollbarHeight = el.offsetHeight - el.clientHeight - borderYWidth;
+    r.width -= scrollbarWidth;
+    r.height -= scrollbarHeight;
+  }
+  return r;
+}
+var px = (v) => parseFloat(v.replace("px", ""));
+var sum = (...vals) => vals.reduce((sum2, v) => sum2 + (v ? px(v) : 0), 0);
+var { min, max } = Math;
+function getWindowRect(win, opts = {}) {
+  return createRect(getViewportRect(win, opts));
+}
+function getViewportRect(win, opts) {
+  const { excludeScrollbar = false } = opts;
+  const { innerWidth, innerHeight, document: doc, visualViewport } = win;
+  const width = visualViewport?.width || innerWidth;
+  const height = visualViewport?.height || innerHeight;
+  const rect = { x: 0, y: 0, width, height };
+  if (excludeScrollbar) {
+    const scrollbarWidth = innerWidth - doc.documentElement.clientWidth;
+    const scrollbarHeight = innerHeight - doc.documentElement.clientHeight;
+    rect.width -= scrollbarWidth;
+    rect.height -= scrollbarHeight;
+  }
+  return rect;
+}
+function getElementPolygon(rectValue, placement) {
+  const rect = createRect(rectValue);
+  const { top, right, left, bottom } = getRectCorners(rect);
+  const [base] = placement.split("-");
+  return {
+    top: [left, top, right, bottom],
+    right: [top, right, bottom, left],
+    bottom: [top, left, bottom, right],
+    left: [right, top, left, bottom]
+  }[base];
+}
+function isPointInPolygon(polygon, point) {
+  const { x, y } = point;
+  let c = false;
+  for (let i = 0, j = polygon.length - 1; i < polygon.length; j = i++) {
+    const xi = polygon[i].x;
+    const yi = polygon[i].y;
+    const xj = polygon[j].x;
+    const yj = polygon[j].y;
+    if (yi > y !== yj > y && x < (xj - xi) * (y - yi) / (yj - yi) + xi) {
+      c = !c;
+    }
+  }
+  return c;
+}
+var compassDirectionMap = {
+  n: { x: 0.5, y: 0 },
+  ne: { x: 1, y: 0 },
+  e: { x: 1, y: 0.5 },
+  se: { x: 1, y: 1 },
+  s: { x: 0.5, y: 1 },
+  sw: { x: 0, y: 1 },
+  w: { x: 0, y: 0.5 },
+  nw: { x: 0, y: 0 }
+};
+var oppositeDirectionMap = {
+  n: "s",
+  ne: "sw",
+  e: "w",
+  se: "nw",
+  s: "n",
+  sw: "ne",
+  w: "e",
+  nw: "se"
+};
+var { sign, abs, min: min2 } = Math;
+function getRectExtentPoint(rect, direction) {
+  const { minX, minY, maxX, maxY, midX, midY } = rect;
+  const x = direction.includes("w") ? minX : direction.includes("e") ? maxX : midX;
+  const y = direction.includes("n") ? minY : direction.includes("s") ? maxY : midY;
+  return { x, y };
+}
+function getOppositeDirection(direction) {
+  return oppositeDirectionMap[direction];
+}
+function resizeRect(rect, offset, direction, opts) {
+  const { scalingOriginMode, lockAspectRatio } = opts;
+  const extent = getRectExtentPoint(rect, direction);
+  const oppositeDirection = getOppositeDirection(direction);
+  const oppositeExtent = getRectExtentPoint(rect, oppositeDirection);
+  if (scalingOriginMode === "center") {
+    offset = { x: offset.x * 2, y: offset.y * 2 };
+  }
+  const newExtent = {
+    x: extent.x + offset.x,
+    y: extent.y + offset.y
+  };
+  const multiplier = {
+    x: compassDirectionMap[direction].x * 2 - 1,
+    y: compassDirectionMap[direction].y * 2 - 1
+  };
+  const newSize = {
+    width: newExtent.x - oppositeExtent.x,
+    height: newExtent.y - oppositeExtent.y
+  };
+  const scaleX = multiplier.x * newSize.width / rect.width;
+  const scaleY = multiplier.y * newSize.height / rect.height;
+  const largestMagnitude = abs(scaleX) > abs(scaleY) ? scaleX : scaleY;
+  const scale = lockAspectRatio ? { x: largestMagnitude, y: largestMagnitude } : {
+    x: extent.x === oppositeExtent.x ? 1 : scaleX,
+    y: extent.y === oppositeExtent.y ? 1 : scaleY
+  };
+  if (extent.y === oppositeExtent.y) {
+    scale.y = abs(scale.y);
+  } else if (sign(scale.y) !== sign(scaleY)) {
+    scale.y *= -1;
+  }
+  if (extent.x === oppositeExtent.x) {
+    scale.x = abs(scale.x);
+  } else if (sign(scale.x) !== sign(scaleX)) {
+    scale.x *= -1;
+  }
+  switch (scalingOriginMode) {
+    case "extent":
+      return transformRect(rect, AffineTransform.scale(scale.x, scale.y, oppositeExtent), false);
+    case "center":
+      return transformRect(
+        rect,
+        AffineTransform.scale(scale.x, scale.y, {
+          x: rect.midX,
+          y: rect.midY
+        }),
+        false
+      );
+  }
+}
+function createRectFromPoints(initialPoint, finalPoint, normalized = true) {
+  if (normalized) {
+    return {
+      x: min2(finalPoint.x, initialPoint.x),
+      y: min2(finalPoint.y, initialPoint.y),
+      width: abs(finalPoint.x - initialPoint.x),
+      height: abs(finalPoint.y - initialPoint.y)
+    };
+  }
+  return {
+    x: initialPoint.x,
+    y: initialPoint.y,
+    width: finalPoint.x - initialPoint.x,
+    height: finalPoint.y - initialPoint.y
+  };
+}
+function transformRect(rect, transform, normalized = true) {
+  const p1 = transform.applyTo({ x: rect.minX, y: rect.minY });
+  const p2 = transform.applyTo({ x: rect.maxX, y: rect.maxY });
+  return createRectFromPoints(p1, p2, normalized);
+}
+
+export {
+  getPointAngle,
+  clampPoint,
+  clampSize,
+  subtractPoints,
+  addPoints,
+  createRect,
+  constrainRect,
+  isSizeEqual,
+  isPointEqual,
+  getElementRect,
+  getWindowRect,
+  getElementPolygon,
+  isPointInPolygon,
+  resizeRect
+};
diff --git a/priv/static/chunk-RUWIVFVB.mjs b/priv/static/chunk-RUWIVFVB.mjs
new file mode 100644
index 0000000..e3ce6b6
--- /dev/null
+++ b/priv/static/chunk-RUWIVFVB.mjs
@@ -0,0 +1,2674 @@
+// lib/util.ts
+var DIR_VALUES = ["ltr", "rtl"];
+function getDir(element) {
+  const fromEl = element.dataset.dir;
+  if (fromEl !== void 0 && DIR_VALUES.includes(fromEl)) {
+    return fromEl;
+  }
+  const fromDoc = document.documentElement.getAttribute("dir");
+  if (fromDoc === "ltr" || fromDoc === "rtl") return fromDoc;
+  return "ltr";
+}
+var getString = (element, attrName, validValues) => {
+  const value = element.dataset[attrName];
+  if (value !== void 0 && (!validValues || validValues.includes(value))) {
+    return value;
+  }
+  return void 0;
+};
+var getStringList = (element, attrName) => {
+  const value = element.dataset[attrName];
+  if (typeof value === "string") {
+    return value.split(",").map((v) => v.trim()).filter((v) => v.length > 0);
+  }
+  return void 0;
+};
+var getNumber = (element, attrName, validValues) => {
+  const raw = element.dataset[attrName];
+  if (raw === void 0) return void 0;
+  const parsed = Number(raw);
+  if (Number.isNaN(parsed)) return void 0;
+  if (validValues && !validValues.includes(parsed)) return 0;
+  return parsed;
+};
+var getBoolean = (element, attrName) => {
+  const dashName = attrName.replace(/([A-Z])/g, "-$1").toLowerCase();
+  return element.hasAttribute(`data-${dashName}`);
+};
+var generateId = (element, fallbackId = "element") => {
+  if (element?.id) return element.id;
+  return `${fallbackId}-${Math.random().toString(36).substring(2, 9)}`;
+};
+
+// ../node_modules/.pnpm/@zag-js+anatomy@1.34.1/node_modules/@zag-js/anatomy/dist/index.mjs
+var createAnatomy = (name, parts = []) => ({
+  parts: (...values) => {
+    if (isEmpty(parts)) {
+      return createAnatomy(name, values);
+    }
+    throw new Error("createAnatomy().parts(...) should only be called once. Did you mean to use .extendWith(...) ?");
+  },
+  extendWith: (...values) => createAnatomy(name, [...parts, ...values]),
+  omit: (...values) => createAnatomy(name, parts.filter((part) => !values.includes(part))),
+  rename: (newName) => createAnatomy(newName, parts),
+  keys: () => parts,
+  build: () => [...new Set(parts)].reduce(
+    (prev2, part) => Object.assign(prev2, {
+      [part]: {
+        selector: [
+          `&[data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`,
+          `& [data-scope="${toKebabCase(name)}"][data-part="${toKebabCase(part)}"]`
+        ].join(", "),
+        attrs: { "data-scope": toKebabCase(name), "data-part": toKebabCase(part) }
+      }
+    }),
+    {}
+  )
+});
+var toKebabCase = (value) => value.replace(/([A-Z])([A-Z])/g, "$1-$2").replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+var isEmpty = (v) => v.length === 0;
+
+// ../node_modules/.pnpm/@zag-js+dom-query@1.34.1/node_modules/@zag-js/dom-query/dist/index.mjs
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+function setCaretToEnd(input) {
+  if (!input) return;
+  try {
+    if (input.ownerDocument.activeElement !== input) return;
+    const len = input.value.length;
+    input.setSelectionRange(len, len);
+  } catch {
+  }
+}
+var clamp = (value) => Math.max(0, Math.min(1, value));
+var wrap = (v, idx) => {
+  return v.map((_, index) => v[(Math.max(idx, 0) + index) % v.length]);
+};
+var pipe = (...fns) => (arg) => fns.reduce((acc, fn) => fn(acc), arg);
+var noop = () => void 0;
+var isObject = (v) => typeof v === "object" && v !== null;
+var MAX_Z_INDEX = 2147483647;
+var dataAttr = (guard) => guard ? "" : void 0;
+var ariaAttr = (guard) => guard ? "true" : void 0;
+var ELEMENT_NODE = 1;
+var DOCUMENT_NODE = 9;
+var DOCUMENT_FRAGMENT_NODE = 11;
+var isHTMLElement = (el) => isObject(el) && el.nodeType === ELEMENT_NODE && typeof el.nodeName === "string";
+var isDocument = (el) => isObject(el) && el.nodeType === DOCUMENT_NODE;
+var isWindow = (el) => isObject(el) && el === el.window;
+var getNodeName = (node) => {
+  if (isHTMLElement(node)) return node.localName || "";
+  return "#document";
+};
+function isRootElement(node) {
+  return ["html", "body", "#document"].includes(getNodeName(node));
+}
+var isNode = (el) => isObject(el) && el.nodeType !== void 0;
+var isShadowRoot = (el) => isNode(el) && el.nodeType === DOCUMENT_FRAGMENT_NODE && "host" in el;
+var isInputElement = (el) => isHTMLElement(el) && el.localName === "input";
+var isAnchorElement = (el) => !!el?.matches("a[href]");
+var isElementVisible = (el) => {
+  if (!isHTMLElement(el)) return false;
+  return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
+};
+function isActiveElement(element) {
+  if (!element) return false;
+  const rootNode = element.getRootNode();
+  return getActiveElement(rootNode) === element;
+}
+var TEXTAREA_SELECT_REGEX = /(textarea|select)/;
+function isEditableElement(el) {
+  if (el == null || !isHTMLElement(el)) return false;
+  try {
+    return isInputElement(el) && el.selectionStart != null || TEXTAREA_SELECT_REGEX.test(el.localName) || el.isContentEditable || el.getAttribute("contenteditable") === "true" || el.getAttribute("contenteditable") === "";
+  } catch {
+    return false;
+  }
+}
+function contains(parent, child) {
+  if (!parent || !child) return false;
+  if (!isHTMLElement(parent) || !isHTMLElement(child)) return false;
+  const rootNode = child.getRootNode?.();
+  if (parent === child) return true;
+  if (parent.contains(child)) return true;
+  if (rootNode && isShadowRoot(rootNode)) {
+    let next2 = child;
+    while (next2) {
+      if (parent === next2) return true;
+      next2 = next2.parentNode || next2.host;
+    }
+  }
+  return false;
+}
+function getDocument(el) {
+  if (isDocument(el)) return el;
+  if (isWindow(el)) return el.document;
+  return el?.ownerDocument ?? document;
+}
+function getDocumentElement(el) {
+  return getDocument(el).documentElement;
+}
+function getWindow(el) {
+  if (isShadowRoot(el)) return getWindow(el.host);
+  if (isDocument(el)) return el.defaultView ?? window;
+  if (isHTMLElement(el)) return el.ownerDocument?.defaultView ?? window;
+  return window;
+}
+function getActiveElement(rootNode) {
+  let activeElement = rootNode.activeElement;
+  while (activeElement?.shadowRoot) {
+    const el = activeElement.shadowRoot.activeElement;
+    if (!el || el === activeElement) break;
+    else activeElement = el;
+  }
+  return activeElement;
+}
+function getParentNode(node) {
+  if (getNodeName(node) === "html") return node;
+  const result = node.assignedSlot || node.parentNode || isShadowRoot(node) && node.host || getDocumentElement(node);
+  return isShadowRoot(result) ? result.host : result;
+}
+function getRootNode(node) {
+  let result;
+  try {
+    result = node.getRootNode({ composed: true });
+    if (isDocument(result) || isShadowRoot(result)) return result;
+  } catch {
+  }
+  return node.ownerDocument ?? document;
+}
+var styleCache = /* @__PURE__ */ new WeakMap();
+function getComputedStyle(el) {
+  if (!styleCache.has(el)) {
+    styleCache.set(el, getWindow(el).getComputedStyle(el));
+  }
+  return styleCache.get(el);
+}
+var INTERACTIVE_CONTAINER_ROLE = /* @__PURE__ */ new Set(["menu", "listbox", "dialog", "grid", "tree", "region"]);
+var isInteractiveContainerRole = (role) => INTERACTIVE_CONTAINER_ROLE.has(role);
+var getAriaControls = (element) => element.getAttribute("aria-controls")?.split(" ") || [];
+function isControlledElement(container, element) {
+  const visitedIds = /* @__PURE__ */ new Set();
+  const rootNode = getRootNode(container);
+  const checkElement = (searchRoot) => {
+    const controllingElements = searchRoot.querySelectorAll("[aria-controls]");
+    for (const controller of controllingElements) {
+      if (controller.getAttribute("aria-expanded") !== "true") continue;
+      const controlledIds = getAriaControls(controller);
+      for (const id of controlledIds) {
+        if (!id || visitedIds.has(id)) continue;
+        visitedIds.add(id);
+        const controlledElement = rootNode.getElementById(id);
+        if (controlledElement) {
+          const role = controlledElement.getAttribute("role");
+          const modal = controlledElement.getAttribute("aria-modal") === "true";
+          if (role && isInteractiveContainerRole(role) && !modal) {
+            if (controlledElement === element || controlledElement.contains(element)) {
+              return true;
+            }
+            if (checkElement(controlledElement)) {
+              return true;
+            }
+          }
+        }
+      }
+    }
+    return false;
+  };
+  return checkElement(container);
+}
+function findControlledElements(searchRoot, callback) {
+  const rootNode = getRootNode(searchRoot);
+  const visitedIds = /* @__PURE__ */ new Set();
+  const findRecursive = (root) => {
+    const controllingElements = root.querySelectorAll("[aria-controls]");
+    for (const controller of controllingElements) {
+      if (controller.getAttribute("aria-expanded") !== "true") continue;
+      const controlledIds = getAriaControls(controller);
+      for (const id of controlledIds) {
+        if (!id || visitedIds.has(id)) continue;
+        visitedIds.add(id);
+        const controlledElement = rootNode.getElementById(id);
+        if (controlledElement) {
+          const role = controlledElement.getAttribute("role");
+          const modal = controlledElement.getAttribute("aria-modal") === "true";
+          if (role && INTERACTIVE_CONTAINER_ROLE.has(role) && !modal) {
+            callback(controlledElement);
+            findRecursive(controlledElement);
+          }
+        }
+      }
+    }
+  };
+  findRecursive(searchRoot);
+}
+function getControlledElements(container) {
+  const controlledElements = /* @__PURE__ */ new Set();
+  findControlledElements(container, (controlledElement) => {
+    if (!container.contains(controlledElement)) {
+      controlledElements.add(controlledElement);
+    }
+  });
+  return Array.from(controlledElements);
+}
+function isInteractiveContainerElement(element) {
+  const role = element.getAttribute("role");
+  return Boolean(role && INTERACTIVE_CONTAINER_ROLE.has(role));
+}
+function isControllerElement(element) {
+  return element.hasAttribute("aria-controls") && element.getAttribute("aria-expanded") === "true";
+}
+function hasControllerElements(element) {
+  if (isControllerElement(element)) return true;
+  return Boolean(element.querySelector?.('[aria-controls][aria-expanded="true"]'));
+}
+function isControlledByExpandedController(element) {
+  if (!element.id) return false;
+  const rootNode = getRootNode(element);
+  const escapedId = CSS.escape(element.id);
+  const selector = `[aria-controls~="${escapedId}"][aria-expanded="true"], [aria-controls="${escapedId}"][aria-expanded="true"]`;
+  const controller = rootNode.querySelector(selector);
+  return Boolean(controller && isInteractiveContainerElement(element));
+}
+function getDataUrl(svg, opts) {
+  const { type, quality = 0.92, background } = opts;
+  if (!svg) throw new Error("[zag-js > getDataUrl]: Could not find the svg element");
+  const win = getWindow(svg);
+  const doc = win.document;
+  const svgBounds = svg.getBoundingClientRect();
+  const svgClone = svg.cloneNode(true);
+  if (!svgClone.hasAttribute("viewBox")) {
+    svgClone.setAttribute("viewBox", `0 0 ${svgBounds.width} ${svgBounds.height}`);
+  }
+  const serializer = new win.XMLSerializer();
+  const source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(svgClone);
+  const svgString = "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);
+  if (type === "image/svg+xml") {
+    return Promise.resolve(svgString).then((str) => {
+      svgClone.remove();
+      return str;
+    });
+  }
+  const dpr = win.devicePixelRatio || 1;
+  const canvas = doc.createElement("canvas");
+  const image = new win.Image();
+  image.src = svgString;
+  canvas.width = svgBounds.width * dpr;
+  canvas.height = svgBounds.height * dpr;
+  const context = canvas.getContext("2d");
+  if (type === "image/jpeg" || background) {
+    context.fillStyle = background || "white";
+    context.fillRect(0, 0, canvas.width, canvas.height);
+  }
+  return new Promise((resolve) => {
+    image.onload = () => {
+      context?.drawImage(image, 0, 0, canvas.width, canvas.height);
+      resolve(canvas.toDataURL(type, quality));
+      svgClone.remove();
+    };
+  });
+}
+var isDom = () => typeof document !== "undefined";
+function getPlatform() {
+  const agent = navigator.userAgentData;
+  return agent?.platform ?? navigator.platform;
+}
+function getUserAgent() {
+  const ua2 = navigator.userAgentData;
+  if (ua2 && Array.isArray(ua2.brands)) {
+    return ua2.brands.map(({ brand, version }) => `${brand}/${version}`).join(" ");
+  }
+  return navigator.userAgent;
+}
+var pt = (v) => isDom() && v.test(getPlatform());
+var ua = (v) => isDom() && v.test(getUserAgent());
+var vn = (v) => isDom() && v.test(navigator.vendor);
+var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
+var isIPhone = () => pt(/^iPhone/i);
+var isIPad = () => pt(/^iPad/i) || isMac() && navigator.maxTouchPoints > 1;
+var isIos = () => isIPhone() || isIPad();
+var isApple = () => isMac() || isIos();
+var isMac = () => pt(/^Mac/i);
+var isSafari = () => isApple() && vn(/apple/i);
+var isFirefox = () => ua(/Firefox/i);
+var isAndroid = () => ua(/Android/i);
+function getBeforeInputValue(event) {
+  const { selectionStart, selectionEnd, value } = event.currentTarget;
+  const data = event.data;
+  return value.slice(0, selectionStart) + (data ?? "") + value.slice(selectionEnd);
+}
+function getComposedPath(event) {
+  return event.composedPath?.() ?? event.nativeEvent?.composedPath?.();
+}
+function getEventTarget(event) {
+  const composedPath = getComposedPath(event);
+  return composedPath?.[0] ?? event.target;
+}
+function isOpeningInNewTab(event) {
+  const element = event.currentTarget;
+  if (!element) return false;
+  const validElement = element.matches("a[href], button[type='submit'], input[type='submit']");
+  if (!validElement) return false;
+  const isMiddleClick = event.button === 1;
+  const isModKeyClick = isCtrlOrMetaKey(event);
+  return isMiddleClick || isModKeyClick;
+}
+function isDownloadingEvent(event) {
+  const element = event.currentTarget;
+  if (!element) return false;
+  const localName = element.localName;
+  if (!event.altKey) return false;
+  if (localName === "a") return true;
+  if (localName === "button" && element.type === "submit") return true;
+  if (localName === "input" && element.type === "submit") return true;
+  return false;
+}
+function isComposingEvent(event) {
+  return getNativeEvent(event).isComposing || event.keyCode === 229;
+}
+function isCtrlOrMetaKey(e) {
+  if (isMac()) return e.metaKey;
+  return e.ctrlKey;
+}
+function isPrintableKey(e) {
+  return e.key.length === 1 && !e.ctrlKey && !e.metaKey;
+}
+function isVirtualClick(e) {
+  if (e.pointerType === "" && e.isTrusted) return true;
+  if (isAndroid() && e.pointerType) {
+    return e.type === "click" && e.buttons === 1;
+  }
+  return e.detail === 0 && !e.pointerType;
+}
+var isLeftClick = (e) => e.button === 0;
+var isContextMenuEvent = (e) => {
+  return e.button === 2 || isMac() && e.ctrlKey && e.button === 0;
+};
+var isModifierKey = (e) => e.ctrlKey || e.altKey || e.metaKey;
+var isTouchEvent = (event) => "touches" in event && event.touches.length > 0;
+var keyMap = {
+  Up: "ArrowUp",
+  Down: "ArrowDown",
+  Esc: "Escape",
+  " ": "Space",
+  ",": "Comma",
+  Left: "ArrowLeft",
+  Right: "ArrowRight"
+};
+var rtlKeyMap = {
+  ArrowLeft: "ArrowRight",
+  ArrowRight: "ArrowLeft"
+};
+function getEventKey(event, options = {}) {
+  const { dir = "ltr", orientation = "horizontal" } = options;
+  let key = event.key;
+  key = keyMap[key] ?? key;
+  const isRtl = dir === "rtl" && orientation === "horizontal";
+  if (isRtl && key in rtlKeyMap) key = rtlKeyMap[key];
+  return key;
+}
+function getNativeEvent(event) {
+  return event.nativeEvent ?? event;
+}
+var pageKeys = /* @__PURE__ */ new Set(["PageUp", "PageDown"]);
+var arrowKeys = /* @__PURE__ */ new Set(["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"]);
+function getEventStep(event) {
+  if (event.ctrlKey || event.metaKey) {
+    return 0.1;
+  } else {
+    const isPageKey = pageKeys.has(event.key);
+    const isSkipKey = isPageKey || event.shiftKey && arrowKeys.has(event.key);
+    return isSkipKey ? 10 : 1;
+  }
+}
+function getEventPoint(event, type = "client") {
+  const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] : event;
+  return { x: point[`${type}X`], y: point[`${type}Y`] };
+}
+var addDomEvent = (target, eventName, handler, options) => {
+  const node = typeof target === "function" ? target() : target;
+  node?.addEventListener(eventName, handler, options);
+  return () => {
+    node?.removeEventListener(eventName, handler, options);
+  };
+};
+function getDescriptor(el, options) {
+  const { type = "HTMLInputElement", property = "value" } = options;
+  const proto = getWindow(el)[type].prototype;
+  return Object.getOwnPropertyDescriptor(proto, property) ?? {};
+}
+function getElementType(el) {
+  if (el.localName === "input") return "HTMLInputElement";
+  if (el.localName === "textarea") return "HTMLTextAreaElement";
+  if (el.localName === "select") return "HTMLSelectElement";
+}
+function setElementValue(el, value, property = "value") {
+  if (!el) return;
+  const type = getElementType(el);
+  if (type) {
+    const descriptor = getDescriptor(el, { type, property });
+    descriptor.set?.call(el, value);
+  }
+  el.setAttribute(property, value);
+}
+function setElementChecked(el, checked) {
+  if (!el) return;
+  const descriptor = getDescriptor(el, { type: "HTMLInputElement", property: "checked" });
+  descriptor.set?.call(el, checked);
+  if (checked) el.setAttribute("checked", "");
+  else el.removeAttribute("checked");
+}
+function dispatchInputValueEvent(el, options) {
+  const { value, bubbles = true } = options;
+  if (!el) return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement)) return;
+  setElementValue(el, `${value}`);
+  const event = new win.Event("input", { bubbles });
+  el.dispatchEvent(markAsInternalChangeEvent(event));
+}
+function dispatchInputCheckedEvent(el, options) {
+  const { checked, bubbles = true } = options;
+  if (!el) return;
+  const win = getWindow(el);
+  if (!(el instanceof win.HTMLInputElement)) return;
+  setElementChecked(el, checked);
+  const event = new win.Event("click", { bubbles });
+  el.dispatchEvent(markAsInternalChangeEvent(event));
+}
+function isFormElement(el) {
+  return el.matches("textarea, input, select, button");
+}
+function trackFormReset(el, callback) {
+  if (!el) return;
+  const form = isFormElement(el) ? el.form : el.closest("form");
+  const onReset = (e) => {
+    if (e.defaultPrevented) return;
+    callback();
+  };
+  form?.addEventListener("reset", onReset, { passive: true });
+  return () => form?.removeEventListener("reset", onReset);
+}
+function trackFieldsetDisabled(el, callback) {
+  const fieldset = el?.closest("fieldset");
+  if (!fieldset) return;
+  callback(fieldset.disabled);
+  const win = getWindow(fieldset);
+  const obs = new win.MutationObserver(() => callback(fieldset.disabled));
+  obs.observe(fieldset, {
+    attributes: true,
+    attributeFilter: ["disabled"]
+  });
+  return () => obs.disconnect();
+}
+function trackFormControl(el, options) {
+  if (!el) return;
+  const { onFieldsetDisabledChange, onFormReset } = options;
+  const cleanups = [trackFormReset(el, onFormReset), trackFieldsetDisabled(el, onFieldsetDisabledChange)];
+  return () => cleanups.forEach((cleanup) => cleanup?.());
+}
+var INTERNAL_CHANGE_EVENT = /* @__PURE__ */ Symbol.for("zag.changeEvent");
+function isInternalChangeEvent(e) {
+  return Object.prototype.hasOwnProperty.call(e, INTERNAL_CHANGE_EVENT);
+}
+function markAsInternalChangeEvent(event) {
+  if (isInternalChangeEvent(event)) return event;
+  Object.defineProperty(event, INTERNAL_CHANGE_EVENT, { value: true });
+  return event;
+}
+var isFrame = (el) => isHTMLElement(el) && el.tagName === "IFRAME";
+var NATURALLY_TABBABLE_REGEX = /^(audio|video|details)$/;
+function parseTabIndex(el) {
+  const attr = el.getAttribute("tabindex");
+  if (!attr) return NaN;
+  return parseInt(attr, 10);
+}
+var hasTabIndex = (el) => !Number.isNaN(parseTabIndex(el));
+var hasNegativeTabIndex = (el) => parseTabIndex(el) < 0;
+function getShadowRootForNode(element, getShadowRoot) {
+  if (!getShadowRoot) return null;
+  if (getShadowRoot === true) {
+    return element.shadowRoot || null;
+  }
+  const result = getShadowRoot(element);
+  return (result === true ? element.shadowRoot : result) || null;
+}
+function collectElementsWithShadowDOM(elements, getShadowRoot, filterFn) {
+  const allElements = [...elements];
+  const toProcess = [...elements];
+  const processed = /* @__PURE__ */ new Set();
+  const positionMap = /* @__PURE__ */ new Map();
+  elements.forEach((el, i) => positionMap.set(el, i));
+  let processIndex = 0;
+  while (processIndex < toProcess.length) {
+    const element = toProcess[processIndex++];
+    if (!element || processed.has(element)) continue;
+    processed.add(element);
+    const shadowRoot = getShadowRootForNode(element, getShadowRoot);
+    if (shadowRoot) {
+      const shadowElements = Array.from(shadowRoot.querySelectorAll(focusableSelector)).filter(filterFn);
+      const hostIndex = positionMap.get(element);
+      if (hostIndex !== void 0) {
+        const insertPosition = hostIndex + 1;
+        allElements.splice(insertPosition, 0, ...shadowElements);
+        shadowElements.forEach((el, i) => {
+          positionMap.set(el, insertPosition + i);
+        });
+        for (let i = insertPosition + shadowElements.length; i < allElements.length; i++) {
+          positionMap.set(allElements[i], i);
+        }
+      } else {
+        const insertPosition = allElements.length;
+        allElements.push(...shadowElements);
+        shadowElements.forEach((el, i) => {
+          positionMap.set(el, insertPosition + i);
+        });
+      }
+      toProcess.push(...shadowElements);
+    }
+  }
+  return allElements;
+}
+var focusableSelector = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
+var getFocusables = (container, options = {}) => {
+  if (!container) return [];
+  const { includeContainer = false, getShadowRoot } = options;
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  const include = includeContainer == true || includeContainer == "if-empty" && elements.length === 0;
+  if (include && isHTMLElement(container) && isFocusable(container)) {
+    elements.unshift(container);
+  }
+  const focusableElements = [];
+  for (const element of elements) {
+    if (!isFocusable(element)) continue;
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      focusableElements.push(...getFocusables(frameBody, { getShadowRoot }));
+      continue;
+    }
+    focusableElements.push(element);
+  }
+  if (getShadowRoot) {
+    return collectElementsWithShadowDOM(focusableElements, getShadowRoot, isFocusable);
+  }
+  return focusableElements;
+};
+function isFocusable(element) {
+  if (!isHTMLElement(element) || element.closest("[inert]")) return false;
+  return element.matches(focusableSelector) && isElementVisible(element);
+}
+function getTabbables(container, options = {}) {
+  if (!container) return [];
+  const { includeContainer, getShadowRoot } = options;
+  const elements = Array.from(container.querySelectorAll(focusableSelector));
+  if (includeContainer && isTabbable(container)) {
+    elements.unshift(container);
+  }
+  const tabbableElements = [];
+  for (const element of elements) {
+    if (!isTabbable(element)) continue;
+    if (isFrame(element) && element.contentDocument) {
+      const frameBody = element.contentDocument.body;
+      tabbableElements.push(...getTabbables(frameBody, { getShadowRoot }));
+      continue;
+    }
+    tabbableElements.push(element);
+  }
+  if (getShadowRoot) {
+    const allElements = collectElementsWithShadowDOM(tabbableElements, getShadowRoot, isTabbable);
+    if (!allElements.length && includeContainer) {
+      return elements;
+    }
+    return allElements;
+  }
+  if (!tabbableElements.length && includeContainer) {
+    return elements;
+  }
+  return tabbableElements;
+}
+function isTabbable(el) {
+  if (isHTMLElement(el) && el.tabIndex > 0) return true;
+  return isFocusable(el) && !hasNegativeTabIndex(el);
+}
+function getTabbableEdges(container, options = {}) {
+  const elements = getTabbables(container, options);
+  const first2 = elements[0] || null;
+  const last2 = elements[elements.length - 1] || null;
+  return [first2, last2];
+}
+function getTabIndex(node) {
+  if (node.tabIndex < 0) {
+    if ((NATURALLY_TABBABLE_REGEX.test(node.localName) || isEditableElement(node)) && !hasTabIndex(node)) {
+      return 0;
+    }
+  }
+  return node.tabIndex;
+}
+function getInitialFocus(options) {
+  const { root, getInitialEl, filter, enabled = true } = options;
+  if (!enabled) return;
+  let node = null;
+  node || (node = typeof getInitialEl === "function" ? getInitialEl() : getInitialEl);
+  node || (node = root?.querySelector("[data-autofocus],[autofocus]"));
+  if (!node) {
+    const tabbables = getTabbables(root);
+    node = filter ? tabbables.filter(filter)[0] : tabbables[0];
+  }
+  return node || root || void 0;
+}
+function isValidTabEvent(event) {
+  const container = event.currentTarget;
+  if (!container) return false;
+  const [firstTabbable, lastTabbable] = getTabbableEdges(container);
+  if (isActiveElement(firstTabbable) && event.shiftKey) return false;
+  if (isActiveElement(lastTabbable) && !event.shiftKey) return false;
+  if (!firstTabbable && !lastTabbable) return false;
+  return true;
+}
+var AnimationFrame = class _AnimationFrame {
+  constructor() {
+    __publicField(this, "id", null);
+    __publicField(this, "fn_cleanup");
+    __publicField(this, "cleanup", () => {
+      this.cancel();
+    });
+  }
+  static create() {
+    return new _AnimationFrame();
+  }
+  request(fn) {
+    this.cancel();
+    this.id = globalThis.requestAnimationFrame(() => {
+      this.id = null;
+      this.fn_cleanup = fn?.();
+    });
+  }
+  cancel() {
+    if (this.id !== null) {
+      globalThis.cancelAnimationFrame(this.id);
+      this.id = null;
+    }
+    this.fn_cleanup?.();
+    this.fn_cleanup = void 0;
+  }
+  isActive() {
+    return this.id !== null;
+  }
+};
+function raf(fn) {
+  const frame = AnimationFrame.create();
+  frame.request(fn);
+  return frame.cleanup;
+}
+function nextTick(fn) {
+  const set = /* @__PURE__ */ new Set();
+  function raf2(fn2) {
+    const id = globalThis.requestAnimationFrame(fn2);
+    set.add(() => globalThis.cancelAnimationFrame(id));
+  }
+  raf2(() => raf2(fn));
+  return function cleanup() {
+    set.forEach((fn2) => fn2());
+  };
+}
+function queueBeforeEvent(el, type, cb) {
+  const cancelTimer = raf(() => {
+    el.removeEventListener(type, exec, true);
+    cb();
+  });
+  const exec = () => {
+    cancelTimer();
+    cb();
+  };
+  el.addEventListener(type, exec, { once: true, capture: true });
+  return cancelTimer;
+}
+function observeAttributesImpl(node, options) {
+  if (!node) return;
+  const { attributes, callback: fn } = options;
+  const win = node.ownerDocument.defaultView || window;
+  const obs = new win.MutationObserver((changes) => {
+    for (const change of changes) {
+      if (change.type === "attributes" && change.attributeName && attributes.includes(change.attributeName)) {
+        fn(change);
+      }
+    }
+  });
+  obs.observe(node, { attributes: true, attributeFilter: attributes });
+  return () => obs.disconnect();
+}
+function observeAttributes(nodeOrFn, options) {
+  const { defer } = options;
+  const func = defer ? raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
+      cleanups.push(observeAttributesImpl(node, options));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+function observeChildrenImpl(node, options) {
+  const { callback: fn } = options;
+  if (!node) return;
+  const win = node.ownerDocument.defaultView || window;
+  const obs = new win.MutationObserver(fn);
+  obs.observe(node, { childList: true, subtree: true });
+  return () => obs.disconnect();
+}
+function observeChildren(nodeOrFn, options) {
+  const { defer } = options;
+  const func = defer ? raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = typeof nodeOrFn === "function" ? nodeOrFn() : nodeOrFn;
+      cleanups.push(observeChildrenImpl(node, options));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+function clickIfLink(el) {
+  const click = () => {
+    const win = getWindow(el);
+    el.dispatchEvent(new win.MouseEvent("click"));
+  };
+  if (isFirefox()) {
+    queueBeforeEvent(el, "keyup", click);
+  } else {
+    queueMicrotask(click);
+  }
+}
+function getNearestOverflowAncestor(el) {
+  const parentNode = getParentNode(el);
+  if (isRootElement(parentNode)) return getDocument(parentNode).body;
+  if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) return parentNode;
+  return getNearestOverflowAncestor(parentNode);
+}
+var OVERFLOW_RE = /auto|scroll|overlay|hidden|clip/;
+var nonOverflowValues = /* @__PURE__ */ new Set(["inline", "contents"]);
+function isOverflowElement(el) {
+  const win = getWindow(el);
+  const { overflow, overflowX, overflowY, display } = win.getComputedStyle(el);
+  return OVERFLOW_RE.test(overflow + overflowY + overflowX) && !nonOverflowValues.has(display);
+}
+function isScrollable(el) {
+  return el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth;
+}
+function scrollIntoView(el, options) {
+  const { rootEl, ...scrollOptions } = options || {};
+  if (!el || !rootEl) return;
+  if (!isOverflowElement(rootEl) || !isScrollable(rootEl)) return;
+  el.scrollIntoView(scrollOptions);
+}
+function getRelativePoint(point, element) {
+  const { left, top, width, height } = element.getBoundingClientRect();
+  const offset = { x: point.x - left, y: point.y - top };
+  const percent = { x: clamp(offset.x / width), y: clamp(offset.y / height) };
+  function getPercentValue(options = {}) {
+    const { dir = "ltr", orientation = "horizontal", inverted } = options;
+    const invertX = typeof inverted === "object" ? inverted.x : inverted;
+    const invertY = typeof inverted === "object" ? inverted.y : inverted;
+    if (orientation === "horizontal") {
+      return dir === "rtl" || invertX ? 1 - percent.x : percent.x;
+    }
+    return invertY ? 1 - percent.y : percent.y;
+  }
+  return { offset, percent, getPercentValue };
+}
+function requestPointerLock(doc, fn) {
+  const body = doc.body;
+  const supported = "pointerLockElement" in doc || "mozPointerLockElement" in doc;
+  const isLocked = () => !!doc.pointerLockElement;
+  function onPointerChange() {
+    fn?.(isLocked());
+  }
+  function onPointerError(event) {
+    if (isLocked()) fn?.(false);
+    console.error("PointerLock error occurred:", event);
+    doc.exitPointerLock();
+  }
+  if (!supported) return;
+  try {
+    body.requestPointerLock();
+  } catch {
+  }
+  const cleanup = [
+    addDomEvent(doc, "pointerlockchange", onPointerChange, false),
+    addDomEvent(doc, "pointerlockerror", onPointerError, false)
+  ];
+  return () => {
+    cleanup.forEach((cleanup2) => cleanup2());
+    doc.exitPointerLock();
+  };
+}
+var state = "default";
+var userSelect = "";
+var elementMap = /* @__PURE__ */ new WeakMap();
+function disableTextSelectionImpl(options = {}) {
+  const { target, doc } = options;
+  const docNode = doc ?? document;
+  const rootEl = docNode.documentElement;
+  if (isIos()) {
+    if (state === "default") {
+      userSelect = rootEl.style.webkitUserSelect;
+      rootEl.style.webkitUserSelect = "none";
+    }
+    state = "disabled";
+  } else if (target) {
+    elementMap.set(target, target.style.userSelect);
+    target.style.userSelect = "none";
+  }
+  return () => restoreTextSelection({ target, doc: docNode });
+}
+function restoreTextSelection(options = {}) {
+  const { target, doc } = options;
+  const docNode = doc ?? document;
+  const rootEl = docNode.documentElement;
+  if (isIos()) {
+    if (state !== "disabled") return;
+    state = "restoring";
+    setTimeout(() => {
+      nextTick(() => {
+        if (state === "restoring") {
+          if (rootEl.style.webkitUserSelect === "none") {
+            rootEl.style.webkitUserSelect = userSelect || "";
+          }
+          userSelect = "";
+          state = "default";
+        }
+      });
+    }, 300);
+  } else {
+    if (target && elementMap.has(target)) {
+      const prevUserSelect = elementMap.get(target);
+      if (target.style.userSelect === "none") {
+        target.style.userSelect = prevUserSelect ?? "";
+      }
+      if (target.getAttribute("style") === "") {
+        target.removeAttribute("style");
+      }
+      elementMap.delete(target);
+    }
+  }
+}
+function disableTextSelection(options = {}) {
+  const { defer, target, ...restOptions } = options;
+  const func = defer ? raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const node = typeof target === "function" ? target() : target;
+      cleanups.push(disableTextSelectionImpl({ ...restOptions, target: node }));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
+function trackPointerMove(doc, handlers) {
+  const { onPointerMove, onPointerUp } = handlers;
+  const handleMove = (event) => {
+    const point = getEventPoint(event);
+    const distance = Math.sqrt(point.x ** 2 + point.y ** 2);
+    const moveBuffer = event.pointerType === "touch" ? 10 : 5;
+    if (distance < moveBuffer) return;
+    if (event.pointerType === "mouse" && event.buttons === 0) {
+      handleUp(event);
+      return;
+    }
+    onPointerMove({ point, event });
+  };
+  const handleUp = (event) => {
+    const point = getEventPoint(event);
+    onPointerUp({ point, event });
+  };
+  const cleanups = [
+    addDomEvent(doc, "pointermove", handleMove, false),
+    addDomEvent(doc, "pointerup", handleUp, false),
+    addDomEvent(doc, "pointercancel", handleUp, false),
+    addDomEvent(doc, "contextmenu", handleUp, false),
+    disableTextSelection({ doc })
+  ];
+  return () => {
+    cleanups.forEach((cleanup) => cleanup());
+  };
+}
+function trackPress(options) {
+  const {
+    pointerNode,
+    keyboardNode = pointerNode,
+    onPress,
+    onPressStart,
+    onPressEnd,
+    isValidKey = (e) => e.key === "Enter"
+  } = options;
+  if (!pointerNode) return noop;
+  const win = getWindow(pointerNode);
+  let removeStartListeners = noop;
+  let removeEndListeners = noop;
+  let removeAccessibleListeners = noop;
+  const getInfo = (event) => ({
+    point: getEventPoint(event),
+    event
+  });
+  function startPress(event) {
+    onPressStart?.(getInfo(event));
+  }
+  function cancelPress(event) {
+    onPressEnd?.(getInfo(event));
+  }
+  const startPointerPress = (startEvent) => {
+    removeEndListeners();
+    const endPointerPress = (endEvent) => {
+      const target = getEventTarget(endEvent);
+      if (contains(pointerNode, target)) {
+        onPress?.(getInfo(endEvent));
+      } else {
+        onPressEnd?.(getInfo(endEvent));
+      }
+    };
+    const removePointerUpListener = addDomEvent(win, "pointerup", endPointerPress, { passive: !onPress, once: true });
+    const removePointerCancelListener = addDomEvent(win, "pointercancel", cancelPress, {
+      passive: !onPressEnd,
+      once: true
+    });
+    removeEndListeners = pipe(removePointerUpListener, removePointerCancelListener);
+    if (isActiveElement(keyboardNode) && startEvent.pointerType === "mouse") {
+      startEvent.preventDefault();
+    }
+    startPress(startEvent);
+  };
+  const removePointerListener = addDomEvent(pointerNode, "pointerdown", startPointerPress, { passive: !onPressStart });
+  const removeFocusListener = addDomEvent(keyboardNode, "focus", startAccessiblePress);
+  removeStartListeners = pipe(removePointerListener, removeFocusListener);
+  function startAccessiblePress() {
+    const handleKeydown = (keydownEvent) => {
+      if (!isValidKey(keydownEvent)) return;
+      const handleKeyup = (keyupEvent) => {
+        if (!isValidKey(keyupEvent)) return;
+        const evt2 = new win.PointerEvent("pointerup");
+        const info = getInfo(evt2);
+        onPress?.(info);
+        onPressEnd?.(info);
+      };
+      removeEndListeners();
+      removeEndListeners = addDomEvent(keyboardNode, "keyup", handleKeyup);
+      const evt = new win.PointerEvent("pointerdown");
+      startPress(evt);
+    };
+    const handleBlur = () => {
+      const evt = new win.PointerEvent("pointercancel");
+      cancelPress(evt);
+    };
+    const removeKeydownListener = addDomEvent(keyboardNode, "keydown", handleKeydown);
+    const removeBlurListener = addDomEvent(keyboardNode, "blur", handleBlur);
+    removeAccessibleListeners = pipe(removeKeydownListener, removeBlurListener);
+  }
+  return () => {
+    removeStartListeners();
+    removeEndListeners();
+    removeAccessibleListeners();
+  };
+}
+function queryAll(root, selector) {
+  return Array.from(root?.querySelectorAll(selector) ?? []);
+}
+function query(root, selector) {
+  return root?.querySelector(selector) ?? null;
+}
+var defaultItemToId = (v) => v.id;
+function itemById(v, id, itemToId = defaultItemToId) {
+  return v.find((item) => itemToId(item) === id);
+}
+function indexOfId(v, id, itemToId = defaultItemToId) {
+  const item = itemById(v, id, itemToId);
+  return item ? v.indexOf(item) : -1;
+}
+function nextById(v, id, loop = true) {
+  let idx = indexOfId(v, id);
+  idx = loop ? (idx + 1) % v.length : Math.min(idx + 1, v.length - 1);
+  return v[idx];
+}
+function prevById(v, id, loop = true) {
+  let idx = indexOfId(v, id);
+  if (idx === -1) return loop ? v[v.length - 1] : null;
+  idx = loop ? (idx - 1 + v.length) % v.length : Math.max(0, idx - 1);
+  return v[idx];
+}
+function createSharedResizeObserver(options) {
+  const listeners = /* @__PURE__ */ new WeakMap();
+  let observer;
+  const entries = /* @__PURE__ */ new WeakMap();
+  const getObserver = (win) => {
+    if (observer) return observer;
+    observer = new win.ResizeObserver((observedEntries) => {
+      for (const entry of observedEntries) {
+        entries.set(entry.target, entry);
+        const elementListeners = listeners.get(entry.target);
+        if (elementListeners) {
+          for (const listener of elementListeners) {
+            listener(entry);
+          }
+        }
+      }
+    });
+    return observer;
+  };
+  const observe = (element, listener) => {
+    let elementListeners = listeners.get(element) || /* @__PURE__ */ new Set();
+    elementListeners.add(listener);
+    listeners.set(element, elementListeners);
+    const win = getWindow(element);
+    getObserver(win).observe(element, options);
+    return () => {
+      const elementListeners2 = listeners.get(element);
+      if (!elementListeners2) return;
+      elementListeners2.delete(listener);
+      if (elementListeners2.size === 0) {
+        listeners.delete(element);
+        getObserver(win).unobserve(element);
+      }
+    };
+  };
+  const unobserve = (element) => {
+    listeners.delete(element);
+    observer?.unobserve(element);
+  };
+  return {
+    observe,
+    unobserve
+  };
+}
+var resizeObserverBorderBox = /* @__PURE__ */ createSharedResizeObserver({
+  box: "border-box"
+});
+var sanitize = (str) => str.split("").map((char) => {
+  const code = char.charCodeAt(0);
+  if (code > 0 && code < 128) return char;
+  if (code >= 128 && code <= 255) return `/x${code.toString(16)}`.replace("/", "\\");
+  return "";
+}).join("").trim();
+var getValueText = (el) => {
+  return sanitize(el.dataset?.valuetext ?? el.textContent ?? "");
+};
+var match = (valueText, query2) => {
+  return valueText.trim().toLowerCase().startsWith(query2.toLowerCase());
+};
+function getByText(v, text, currentId, itemToId = defaultItemToId) {
+  const index = currentId ? indexOfId(v, currentId, itemToId) : -1;
+  let items = currentId ? wrap(v, index) : v;
+  const isSingleKey = text.length === 1;
+  if (isSingleKey) {
+    items = items.filter((item) => itemToId(item) !== currentId);
+  }
+  return items.find((item) => match(getValueText(item), text));
+}
+function setAttribute(el, attr, v) {
+  const prev2 = el.getAttribute(attr);
+  const exists = prev2 != null;
+  if (prev2 === v) return noop;
+  el.setAttribute(attr, v);
+  return () => {
+    if (!exists) {
+      el.removeAttribute(attr);
+    } else {
+      el.setAttribute(attr, prev2);
+    }
+  };
+}
+function setStyle(el, style) {
+  if (!el) return noop;
+  const prev2 = Object.keys(style).reduce((acc, key) => {
+    acc[key] = el.style.getPropertyValue(key);
+    return acc;
+  }, {});
+  if (isEqual(prev2, style)) return noop;
+  Object.assign(el.style, style);
+  return () => {
+    Object.assign(el.style, prev2);
+    if (el.style.length === 0) {
+      el.removeAttribute("style");
+    }
+  };
+}
+function setStyleProperty(el, prop, value) {
+  if (!el) return noop;
+  const prev2 = el.style.getPropertyValue(prop);
+  if (prev2 === value) return noop;
+  el.style.setProperty(prop, value);
+  return () => {
+    el.style.setProperty(prop, prev2);
+    if (el.style.length === 0) {
+      el.removeAttribute("style");
+    }
+  };
+}
+function isEqual(a, b) {
+  return Object.keys(a).every((key) => a[key] === b[key]);
+}
+function getByTypeaheadImpl(baseItems, options) {
+  const { state: state2, activeId, key, timeout = 350, itemToId } = options;
+  const search = state2.keysSoFar + key;
+  const isRepeated = search.length > 1 && Array.from(search).every((char) => char === search[0]);
+  const query2 = isRepeated ? search[0] : search;
+  let items = baseItems.slice();
+  const next2 = getByText(items, query2, activeId, itemToId);
+  function cleanup() {
+    clearTimeout(state2.timer);
+    state2.timer = -1;
+  }
+  function update(value) {
+    state2.keysSoFar = value;
+    cleanup();
+    if (value !== "") {
+      state2.timer = +setTimeout(() => {
+        update("");
+        cleanup();
+      }, timeout);
+    }
+  }
+  update(search);
+  return next2;
+}
+var getByTypeahead = /* @__PURE__ */ Object.assign(getByTypeaheadImpl, {
+  defaultOptions: { keysSoFar: "", timer: -1 },
+  isValidEvent: isValidTypeaheadEvent
+});
+function isValidTypeaheadEvent(event) {
+  return event.key.length === 1 && !event.ctrlKey && !event.metaKey;
+}
+var visuallyHiddenStyle = {
+  border: "0",
+  clip: "rect(0 0 0 0)",
+  height: "1px",
+  margin: "-1px",
+  overflow: "hidden",
+  padding: "0",
+  position: "absolute",
+  width: "1px",
+  whiteSpace: "nowrap",
+  wordWrap: "normal"
+};
+function waitForPromise(promise, controller, timeout) {
+  const { signal } = controller;
+  const wrappedPromise = new Promise((resolve, reject) => {
+    const timeoutId = setTimeout(() => {
+      reject(new Error(`Timeout of ${timeout}ms exceeded`));
+    }, timeout);
+    signal.addEventListener("abort", () => {
+      clearTimeout(timeoutId);
+      reject(new Error("Promise aborted"));
+    });
+    promise.then((result) => {
+      if (!signal.aborted) {
+        clearTimeout(timeoutId);
+        resolve(result);
+      }
+    }).catch((error) => {
+      if (!signal.aborted) {
+        clearTimeout(timeoutId);
+        reject(error);
+      }
+    });
+  });
+  const abort = () => controller.abort();
+  return [wrappedPromise, abort];
+}
+function waitForElement(target, options) {
+  const { timeout, rootNode } = options;
+  const win = getWindow(rootNode);
+  const doc = getDocument(rootNode);
+  const controller = new win.AbortController();
+  return waitForPromise(
+    new Promise((resolve) => {
+      const el = target();
+      if (el) {
+        resolve(el);
+        return;
+      }
+      const observer = new win.MutationObserver(() => {
+        const el2 = target();
+        if (el2 && el2.isConnected) {
+          observer.disconnect();
+          resolve(el2);
+        }
+      });
+      observer.observe(doc.body, {
+        childList: true,
+        subtree: true
+      });
+    }),
+    controller,
+    timeout
+  );
+}
+
+// ../node_modules/.pnpm/@zag-js+utils@1.34.1/node_modules/@zag-js/utils/dist/index.mjs
+var __defProp2 = Object.defineProperty;
+var __typeError = (msg) => {
+  throw TypeError(msg);
+};
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField2 = (obj, key, value) => __defNormalProp2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot " + msg);
+var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), member.get(obj));
+var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
+function toArray(v) {
+  if (v == null) return [];
+  return Array.isArray(v) ? v : [v];
+}
+var first = (v) => v[0];
+var last = (v) => v[v.length - 1];
+var has = (v, t) => v.indexOf(t) !== -1;
+var add = (v, ...items) => v.concat(items);
+var remove = (v, ...items) => v.filter((t) => !items.includes(t));
+var uniq = (v) => Array.from(new Set(v));
+var diff = (a, b) => {
+  const set = new Set(b);
+  return a.filter((t) => !set.has(t));
+};
+var addOrRemove = (v, item) => has(v, item) ? remove(v, item) : add(v, item);
+function nextIndex(v, idx, opts = {}) {
+  const { step = 1, loop = true } = opts;
+  const next2 = idx + step;
+  const len = v.length;
+  const last2 = len - 1;
+  if (idx === -1) return step > 0 ? 0 : last2;
+  if (next2 < 0) return loop ? last2 : 0;
+  if (next2 >= len) return loop ? 0 : idx > len ? len : idx;
+  return next2;
+}
+function next(v, idx, opts = {}) {
+  return v[nextIndex(v, idx, opts)];
+}
+function prevIndex(v, idx, opts = {}) {
+  const { step = 1, loop = true } = opts;
+  return nextIndex(v, idx, { step: -step, loop });
+}
+function prev(v, index, opts = {}) {
+  return v[prevIndex(v, index, opts)];
+}
+function chunk(v, size) {
+  return v.reduce((rows, value, index) => {
+    if (index % size === 0) rows.push([value]);
+    else last(rows)?.push(value);
+    return rows;
+  }, []);
+}
+function partition(arr, fn) {
+  return arr.reduce(
+    ([pass, fail], value) => {
+      if (fn(value)) pass.push(value);
+      else fail.push(value);
+      return [pass, fail];
+    },
+    [[], []]
+  );
+}
+var isArrayLike = (value) => value?.constructor.name === "Array";
+var isArrayEqual = (a, b) => {
+  if (a.length !== b.length) return false;
+  for (let i = 0; i < a.length; i++) {
+    if (!isEqual2(a[i], b[i])) return false;
+  }
+  return true;
+};
+var isEqual2 = (a, b) => {
+  if (Object.is(a, b)) return true;
+  if (a == null && b != null || a != null && b == null) return false;
+  if (typeof a?.isEqual === "function" && typeof b?.isEqual === "function") {
+    return a.isEqual(b);
+  }
+  if (typeof a === "function" && typeof b === "function") {
+    return a.toString() === b.toString();
+  }
+  if (isArrayLike(a) && isArrayLike(b)) {
+    return isArrayEqual(Array.from(a), Array.from(b));
+  }
+  if (!(typeof a === "object") || !(typeof b === "object")) return false;
+  const keys = Object.keys(b ?? /* @__PURE__ */ Object.create(null));
+  const length = keys.length;
+  for (let i = 0; i < length; i++) {
+    const hasKey = Reflect.has(a, keys[i]);
+    if (!hasKey) return false;
+  }
+  for (let i = 0; i < length; i++) {
+    const key = keys[i];
+    if (!isEqual2(a[key], b[key])) return false;
+  }
+  return true;
+};
+var isArray = (v) => Array.isArray(v);
+var isBoolean = (v) => v === true || v === false;
+var isObjectLike = (v) => v != null && typeof v === "object";
+var isObject2 = (v) => isObjectLike(v) && !isArray(v);
+var isString = (v) => typeof v === "string";
+var isFunction = (v) => typeof v === "function";
+var isNull = (v) => v == null;
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var baseGetTag = (v) => Object.prototype.toString.call(v);
+var fnToString = Function.prototype.toString;
+var objectCtorString = fnToString.call(Object);
+var isPlainObject = (v) => {
+  if (!isObjectLike(v) || baseGetTag(v) != "[object Object]" || isFrameworkElement(v)) return false;
+  const proto = Object.getPrototypeOf(v);
+  if (proto === null) return true;
+  const Ctor = hasProp(proto, "constructor") && proto.constructor;
+  return typeof Ctor == "function" && Ctor instanceof Ctor && fnToString.call(Ctor) == objectCtorString;
+};
+var isReactElement = (x) => typeof x === "object" && x !== null && "$$typeof" in x && "props" in x;
+var isVueElement = (x) => typeof x === "object" && x !== null && "__v_isVNode" in x;
+var isFrameworkElement = (x) => isReactElement(x) || isVueElement(x);
+var runIfFn = (v, ...a) => {
+  const res = typeof v === "function" ? v(...a) : v;
+  return res ?? void 0;
+};
+var cast = (v) => v;
+var identity = (v) => v();
+var noop2 = () => {
+};
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn?.(...a);
+  });
+};
+var uuid = /* @__PURE__ */ (() => {
+  let id = 0;
+  return () => {
+    id++;
+    return id.toString(36);
+  };
+})();
+function match2(key, record, ...args) {
+  if (key in record) {
+    const fn = record[key];
+    return isFunction(fn) ? fn(...args) : fn;
+  }
+  const error = new Error(`No matching key: ${JSON.stringify(key)} in ${JSON.stringify(Object.keys(record))}`);
+  Error.captureStackTrace?.(error, match2);
+  throw error;
+}
+function throttle(fn, wait = 0) {
+  let lastCall = 0;
+  let timeout = null;
+  return (...args) => {
+    const now = Date.now();
+    const timeSinceLastCall = now - lastCall;
+    if (timeSinceLastCall >= wait) {
+      if (timeout) {
+        clearTimeout(timeout);
+        timeout = null;
+      }
+      fn(...args);
+      lastCall = now;
+    } else if (!timeout) {
+      timeout = setTimeout(() => {
+        fn(...args);
+        lastCall = Date.now();
+        timeout = null;
+      }, wait - timeSinceLastCall);
+    }
+  };
+}
+var { floor, abs, round, min, max, pow, sign } = Math;
+var isNaN = (v) => Number.isNaN(v);
+var nan = (v) => isNaN(v) ? 0 : v;
+var wrap2 = (v, vmax) => (v % vmax + vmax) % vmax;
+var isValueAtMax = (v, vmax) => nan(v) >= vmax;
+var isValueAtMin = (v, vmin) => nan(v) <= vmin;
+var isValueWithinRange = (v, vmin, vmax) => {
+  const value = nan(v);
+  const minCheck = vmin == null || value >= vmin;
+  const maxCheck = vmax == null || value <= vmax;
+  return minCheck && maxCheck;
+};
+var clampValue = (v, vmin, vmax) => min(max(nan(v), vmin), vmax);
+var roundToStepPrecision = (v, step) => {
+  let rv = v;
+  let ss = step.toString();
+  let pi = ss.indexOf(".");
+  let p = pi >= 0 ? ss.length - pi : 0;
+  if (p > 0) {
+    let pw = pow(10, p);
+    rv = round(rv * pw) / pw;
+  }
+  return rv;
+};
+var roundToDpr = (v, dpr) => typeof dpr === "number" ? floor(v * dpr + 0.5) / dpr : round(v);
+var snapValueToStep = (v, vmin, vmax, step) => {
+  const min2 = vmin != null ? Number(vmin) : 0;
+  const max2 = Number(vmax);
+  const remainder = (v - min2) % step;
+  let snapped = abs(remainder) * 2 >= step ? v + sign(remainder) * (step - abs(remainder)) : v - remainder;
+  snapped = roundToStepPrecision(snapped, step);
+  if (!isNaN(min2) && snapped < min2) {
+    snapped = min2;
+  } else if (!isNaN(max2) && snapped > max2) {
+    const stepsInRange = floor((max2 - min2) / step);
+    const largestValidStep = min2 + stepsInRange * step;
+    snapped = stepsInRange <= 0 || largestValidStep < min2 ? max2 : largestValidStep;
+  }
+  return roundToStepPrecision(snapped, step);
+};
+var setValueAtIndex = (vs, i, v) => {
+  if (vs[i] === v) return vs;
+  return [...vs.slice(0, i), v, ...vs.slice(i + 1)];
+};
+var countDecimals = (value) => {
+  if (!Number.isFinite(value)) return 0;
+  let e = 1, p = 0;
+  while (Math.round(value * e) / e !== value) {
+    e *= 10;
+    p += 1;
+  }
+  return p;
+};
+var decimalOp = (a, op, b) => {
+  let result = op === "+" ? a + b : a - b;
+  if (a % 1 !== 0 || b % 1 !== 0) {
+    const multiplier = 10 ** Math.max(countDecimals(a), countDecimals(b));
+    a = Math.round(a * multiplier);
+    b = Math.round(b * multiplier);
+    result = op === "+" ? a + b : a - b;
+    result /= multiplier;
+  }
+  return result;
+};
+var incrementValue = (v, s) => decimalOp(nan(v), "+", s);
+var decrementValue = (v, s) => decimalOp(nan(v), "-", s);
+var toPx = (v) => typeof v === "number" ? `${v}px` : v;
+function compact(obj) {
+  if (!isPlainObject(obj) || obj === void 0) return obj;
+  const keys = Reflect.ownKeys(obj).filter((key) => typeof key === "string");
+  const filtered = {};
+  for (const key of keys) {
+    const value = obj[key];
+    if (value !== void 0) {
+      filtered[key] = compact(value);
+    }
+  }
+  return filtered;
+}
+function pick(obj, keys) {
+  const filtered = {};
+  for (const key of keys) {
+    const value = obj[key];
+    if (value !== void 0) {
+      filtered[key] = value;
+    }
+  }
+  return filtered;
+}
+function splitProps(props, keys) {
+  const rest = {};
+  const result = {};
+  const keySet = new Set(keys);
+  const ownKeys = Reflect.ownKeys(props);
+  for (const key of ownKeys) {
+    if (keySet.has(key)) {
+      result[key] = props[key];
+    } else {
+      rest[key] = props[key];
+    }
+  }
+  return [result, rest];
+}
+var createSplitProps = (keys) => {
+  return function split(props) {
+    return splitProps(props, keys);
+  };
+};
+var currentTime = () => performance.now();
+var _tick;
+var Timer = class {
+  constructor(onTick) {
+    this.onTick = onTick;
+    __publicField2(this, "frameId", null);
+    __publicField2(this, "pausedAtMs", null);
+    __publicField2(this, "context");
+    __publicField2(this, "cancelFrame", () => {
+      if (this.frameId === null) return;
+      cancelAnimationFrame(this.frameId);
+      this.frameId = null;
+    });
+    __publicField2(this, "setStartMs", (startMs) => {
+      this.context.startMs = startMs;
+    });
+    __publicField2(this, "start", () => {
+      if (this.frameId !== null) return;
+      const now = currentTime();
+      if (this.pausedAtMs !== null) {
+        this.context.startMs += now - this.pausedAtMs;
+        this.pausedAtMs = null;
+      } else {
+        this.context.startMs = now;
+      }
+      this.frameId = requestAnimationFrame(__privateGet(this, _tick));
+    });
+    __publicField2(this, "pause", () => {
+      if (this.frameId === null) return;
+      this.cancelFrame();
+      this.pausedAtMs = currentTime();
+    });
+    __publicField2(this, "stop", () => {
+      if (this.frameId === null) return;
+      this.cancelFrame();
+      this.pausedAtMs = null;
+    });
+    __privateAdd(this, _tick, (now) => {
+      this.context.now = now;
+      this.context.deltaMs = now - this.context.startMs;
+      const shouldContinue = this.onTick(this.context);
+      if (shouldContinue === false) {
+        this.stop();
+        return;
+      }
+      this.frameId = requestAnimationFrame(__privateGet(this, _tick));
+    });
+    this.context = { now: 0, startMs: currentTime(), deltaMs: 0 };
+  }
+  get elapsedMs() {
+    if (this.pausedAtMs !== null) {
+      return this.pausedAtMs - this.context.startMs;
+    }
+    return currentTime() - this.context.startMs;
+  }
+};
+_tick = /* @__PURE__ */ new WeakMap();
+function setRafInterval(fn, intervalMs) {
+  const timer = new Timer(({ now, deltaMs }) => {
+    if (deltaMs >= intervalMs) {
+      const startMs = intervalMs > 0 ? now - deltaMs % intervalMs : now;
+      timer.setStartMs(startMs);
+      fn({ startMs, deltaMs });
+    }
+  });
+  timer.start();
+  return () => timer.stop();
+}
+function setRafTimeout(fn, delayMs) {
+  const timer = new Timer(({ deltaMs }) => {
+    if (deltaMs >= delayMs) {
+      fn();
+      return false;
+    }
+  });
+  timer.start();
+  return () => timer.stop();
+}
+function warn(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && true) {
+    console.warn(m);
+  }
+}
+function invariant(...a) {
+  const m = a.length === 1 ? a[0] : a[1];
+  const c = a.length === 2 ? a[0] : true;
+  if (c && true) {
+    throw new Error(m);
+  }
+}
+function ensure(c, m) {
+  if (c == null) throw new Error(m());
+}
+function ensureProps(props, keys, scope) {
+  let missingKeys = [];
+  for (const key of keys) {
+    if (props[key] == null) missingKeys.push(key);
+  }
+  if (missingKeys.length > 0)
+    throw new Error(`[zag-js${scope ? ` > ${scope}` : ""}] missing required props: ${missingKeys.join(", ")}`);
+}
+
+// ../node_modules/.pnpm/@zag-js+core@1.34.1/node_modules/@zag-js/core/dist/index.mjs
+var clsx = (...args) => args.map((str) => str?.trim?.()).filter(Boolean).join(" ");
+var CSS_REGEX = /((?:--)?(?:\w+-?)+)\s*:\s*([^;]*)/g;
+var serialize = (style) => {
+  const res = {};
+  let match3;
+  while (match3 = CSS_REGEX.exec(style)) {
+    res[match3[1]] = match3[2];
+  }
+  return res;
+};
+var css = (a, b) => {
+  if (isString(a)) {
+    if (isString(b)) return `${a};${b}`;
+    a = serialize(a);
+  } else if (isString(b)) {
+    b = serialize(b);
+  }
+  return Object.assign({}, a ?? {}, b ?? {});
+};
+function mergeProps(...args) {
+  let result = {};
+  for (let props of args) {
+    if (!props) continue;
+    for (let key in result) {
+      if (key.startsWith("on") && typeof result[key] === "function" && typeof props[key] === "function") {
+        result[key] = callAll(props[key], result[key]);
+        continue;
+      }
+      if (key === "className" || key === "class") {
+        result[key] = clsx(result[key], props[key]);
+        continue;
+      }
+      if (key === "style") {
+        result[key] = css(result[key], props[key]);
+        continue;
+      }
+      result[key] = props[key] !== void 0 ? props[key] : result[key];
+    }
+    for (let key in props) {
+      if (result[key] === void 0) {
+        result[key] = props[key];
+      }
+    }
+    const symbols = Object.getOwnPropertySymbols(props);
+    for (let symbol of symbols) {
+      result[symbol] = props[symbol];
+    }
+  }
+  return result;
+}
+function memo(getDeps, fn, opts) {
+  let deps = [];
+  let result;
+  return (depArgs) => {
+    const newDeps = getDeps(depArgs);
+    const depsChanged = newDeps.length !== deps.length || newDeps.some((dep, index) => !isEqual2(deps[index], dep));
+    if (!depsChanged) return result;
+    deps = newDeps;
+    result = fn(newDeps, depArgs);
+    opts?.onChange?.(result);
+    return result;
+  };
+}
+function createGuards() {
+  return {
+    and: (...guards) => {
+      return function andGuard(params) {
+        return guards.every((str) => params.guard(str));
+      };
+    },
+    or: (...guards) => {
+      return function orGuard(params) {
+        return guards.some((str) => params.guard(str));
+      };
+    },
+    not: (guard) => {
+      return function notGuard(params) {
+        return !params.guard(guard);
+      };
+    }
+  };
+}
+function createMachine(config) {
+  return config;
+}
+function setup() {
+  return {
+    guards: createGuards(),
+    createMachine: (config) => {
+      return createMachine(config);
+    },
+    choose: (transitions) => {
+      return function chooseFn({ choose }) {
+        return choose(transitions)?.actions;
+      };
+    }
+  };
+}
+var MachineStatus = /* @__PURE__ */ ((MachineStatus2) => {
+  MachineStatus2["NotStarted"] = "Not Started";
+  MachineStatus2["Started"] = "Started";
+  MachineStatus2["Stopped"] = "Stopped";
+  return MachineStatus2;
+})(MachineStatus || {});
+var INIT_STATE = "__init__";
+function createScope(props) {
+  const getRootNode2 = () => props.getRootNode?.() ?? document;
+  const getDoc = () => getDocument(getRootNode2());
+  const getWin = () => getDoc().defaultView ?? window;
+  const getActiveElementFn = () => getActiveElement(getRootNode2());
+  const getById = (id) => getRootNode2().getElementById(id);
+  return {
+    ...props,
+    getRootNode: getRootNode2,
+    getDoc,
+    getWin,
+    getActiveElement: getActiveElementFn,
+    isActiveElement,
+    getById
+  };
+}
+
+// ../node_modules/.pnpm/@zag-js+types@1.34.1/node_modules/@zag-js/types/dist/index.mjs
+function createNormalizer(fn) {
+  return new Proxy({}, {
+    get(_target, key) {
+      if (key === "style")
+        return (props) => {
+          return fn({ style: props }).style;
+        };
+      return fn;
+    }
+  });
+}
+var createProps = () => (props) => Array.from(new Set(props));
+
+// ../node_modules/.pnpm/proxy-compare@3.0.1/node_modules/proxy-compare/dist/index.js
+var TRACK_MEMO_SYMBOL = Symbol();
+var GET_ORIGINAL_SYMBOL = Symbol();
+var getProto = Object.getPrototypeOf;
+var objectsToTrack = /* @__PURE__ */ new WeakMap();
+var isObjectToTrack = (obj) => obj && (objectsToTrack.has(obj) ? objectsToTrack.get(obj) : getProto(obj) === Object.prototype || getProto(obj) === Array.prototype);
+var getUntracked = (obj) => {
+  if (isObjectToTrack(obj)) {
+    return obj[GET_ORIGINAL_SYMBOL] || null;
+  }
+  return null;
+};
+var markToTrack = (obj, mark = true) => {
+  objectsToTrack.set(obj, mark);
+};
+
+// ../node_modules/.pnpm/@zag-js+store@1.34.1/node_modules/@zag-js/store/dist/index.mjs
+function glob() {
+  if (typeof globalThis !== "undefined") return globalThis;
+  if (typeof self !== "undefined") return self;
+  if (typeof window !== "undefined") return window;
+  if (typeof global !== "undefined") return global;
+}
+function globalRef(key, value) {
+  const g = glob();
+  if (!g) return value();
+  g[key] || (g[key] = value());
+  return g[key];
+}
+var refSet = globalRef("__zag__refSet", () => /* @__PURE__ */ new WeakSet());
+var isReactElement2 = (x) => typeof x === "object" && x !== null && "$$typeof" in x && "props" in x;
+var isVueElement2 = (x) => typeof x === "object" && x !== null && "__v_isVNode" in x;
+var isDOMElement = (x) => typeof x === "object" && x !== null && "nodeType" in x && typeof x.nodeName === "string";
+var isElement = (x) => isReactElement2(x) || isVueElement2(x) || isDOMElement(x);
+var isObject3 = (x) => x !== null && typeof x === "object";
+var canProxy = (x) => isObject3(x) && !refSet.has(x) && (Array.isArray(x) || !(Symbol.iterator in x)) && !isElement(x) && !(x instanceof WeakMap) && !(x instanceof WeakSet) && !(x instanceof Error) && !(x instanceof Number) && !(x instanceof Date) && !(x instanceof String) && !(x instanceof RegExp) && !(x instanceof ArrayBuffer) && !(x instanceof Promise) && !(x instanceof File) && !(x instanceof Blob) && !(x instanceof AbortController);
+var isDev = () => true;
+var proxyStateMap = globalRef("__zag__proxyStateMap", () => /* @__PURE__ */ new WeakMap());
+var buildProxyFunction = (objectIs = Object.is, newProxy = (target, handler) => new Proxy(target, handler), snapCache = /* @__PURE__ */ new WeakMap(), createSnapshot = (target, version) => {
+  const cache = snapCache.get(target);
+  if (cache?.[0] === version) {
+    return cache[1];
+  }
+  const snap = Array.isArray(target) ? [] : Object.create(Object.getPrototypeOf(target));
+  markToTrack(snap, true);
+  snapCache.set(target, [version, snap]);
+  Reflect.ownKeys(target).forEach((key) => {
+    const value = Reflect.get(target, key);
+    if (refSet.has(value)) {
+      markToTrack(value, false);
+      snap[key] = value;
+    } else if (proxyStateMap.has(value)) {
+      snap[key] = snapshot(value);
+    } else {
+      snap[key] = value;
+    }
+  });
+  return Object.freeze(snap);
+}, proxyCache = /* @__PURE__ */ new WeakMap(), versionHolder = [1, 1], proxyFunction2 = (initialObject) => {
+  if (!isObject3(initialObject)) {
+    throw new Error("object required");
+  }
+  const found = proxyCache.get(initialObject);
+  if (found) {
+    return found;
+  }
+  let version = versionHolder[0];
+  const listeners = /* @__PURE__ */ new Set();
+  const notifyUpdate = (op, nextVersion = ++versionHolder[0]) => {
+    if (version !== nextVersion) {
+      version = nextVersion;
+      listeners.forEach((listener) => listener(op, nextVersion));
+    }
+  };
+  let checkVersion = versionHolder[1];
+  const ensureVersion = (nextCheckVersion = ++versionHolder[1]) => {
+    if (checkVersion !== nextCheckVersion && !listeners.size) {
+      checkVersion = nextCheckVersion;
+      propProxyStates.forEach(([propProxyState]) => {
+        const propVersion = propProxyState[1](nextCheckVersion);
+        if (propVersion > version) {
+          version = propVersion;
+        }
+      });
+    }
+    return version;
+  };
+  const createPropListener = (prop) => (op, nextVersion) => {
+    const newOp = [...op];
+    newOp[1] = [prop, ...newOp[1]];
+    notifyUpdate(newOp, nextVersion);
+  };
+  const propProxyStates = /* @__PURE__ */ new Map();
+  const addPropListener = (prop, propProxyState) => {
+    if (isDev() && propProxyStates.has(prop)) {
+      throw new Error("prop listener already exists");
+    }
+    if (listeners.size) {
+      const remove2 = propProxyState[3](createPropListener(prop));
+      propProxyStates.set(prop, [propProxyState, remove2]);
+    } else {
+      propProxyStates.set(prop, [propProxyState]);
+    }
+  };
+  const removePropListener = (prop) => {
+    const entry = propProxyStates.get(prop);
+    if (entry) {
+      propProxyStates.delete(prop);
+      entry[1]?.();
+    }
+  };
+  const addListener = (listener) => {
+    listeners.add(listener);
+    if (listeners.size === 1) {
+      propProxyStates.forEach(([propProxyState, prevRemove], prop) => {
+        if (isDev() && prevRemove) {
+          throw new Error("remove already exists");
+        }
+        const remove2 = propProxyState[3](createPropListener(prop));
+        propProxyStates.set(prop, [propProxyState, remove2]);
+      });
+    }
+    const removeListener = () => {
+      listeners.delete(listener);
+      if (listeners.size === 0) {
+        propProxyStates.forEach(([propProxyState, remove2], prop) => {
+          if (remove2) {
+            remove2();
+            propProxyStates.set(prop, [propProxyState]);
+          }
+        });
+      }
+    };
+    return removeListener;
+  };
+  const baseObject = Array.isArray(initialObject) ? [] : Object.create(Object.getPrototypeOf(initialObject));
+  const handler = {
+    deleteProperty(target, prop) {
+      const prevValue = Reflect.get(target, prop);
+      removePropListener(prop);
+      const deleted = Reflect.deleteProperty(target, prop);
+      if (deleted) {
+        notifyUpdate(["delete", [prop], prevValue]);
+      }
+      return deleted;
+    },
+    set(target, prop, value, receiver) {
+      const hasPrevValue = Reflect.has(target, prop);
+      const prevValue = Reflect.get(target, prop, receiver);
+      if (hasPrevValue && (objectIs(prevValue, value) || proxyCache.has(value) && objectIs(prevValue, proxyCache.get(value)))) {
+        return true;
+      }
+      removePropListener(prop);
+      if (isObject3(value)) {
+        value = getUntracked(value) || value;
+      }
+      let nextValue = value;
+      if (Object.getOwnPropertyDescriptor(target, prop)?.set) ;
+      else {
+        if (!proxyStateMap.has(value) && canProxy(value)) {
+          nextValue = proxy(value);
+        }
+        const childProxyState = !refSet.has(nextValue) && proxyStateMap.get(nextValue);
+        if (childProxyState) {
+          addPropListener(prop, childProxyState);
+        }
+      }
+      Reflect.set(target, prop, nextValue, receiver);
+      notifyUpdate(["set", [prop], value, prevValue]);
+      return true;
+    }
+  };
+  const proxyObject = newProxy(baseObject, handler);
+  proxyCache.set(initialObject, proxyObject);
+  const proxyState = [baseObject, ensureVersion, createSnapshot, addListener];
+  proxyStateMap.set(proxyObject, proxyState);
+  Reflect.ownKeys(initialObject).forEach((key) => {
+    const desc = Object.getOwnPropertyDescriptor(initialObject, key);
+    if (desc.get || desc.set) {
+      Object.defineProperty(baseObject, key, desc);
+    } else {
+      proxyObject[key] = initialObject[key];
+    }
+  });
+  return proxyObject;
+}) => [
+  // public functions
+  proxyFunction2,
+  // shared state
+  proxyStateMap,
+  refSet,
+  // internal things
+  objectIs,
+  newProxy,
+  canProxy,
+  snapCache,
+  createSnapshot,
+  proxyCache,
+  versionHolder
+];
+var [proxyFunction] = buildProxyFunction();
+function proxy(initialObject = {}) {
+  return proxyFunction(initialObject);
+}
+function subscribe(proxyObject, callback, notifyInSync) {
+  const proxyState = proxyStateMap.get(proxyObject);
+  if (isDev() && !proxyState) {
+    console.warn("Please use proxy object");
+  }
+  let promise;
+  const ops = [];
+  const addListener = proxyState[3];
+  let isListenerActive = false;
+  const listener = (op) => {
+    ops.push(op);
+    if (notifyInSync) {
+      callback(ops.splice(0));
+      return;
+    }
+    if (!promise) {
+      promise = Promise.resolve().then(() => {
+        promise = void 0;
+        if (isListenerActive) {
+          callback(ops.splice(0));
+        }
+      });
+    }
+  };
+  const removeListener = addListener(listener);
+  isListenerActive = true;
+  return () => {
+    isListenerActive = false;
+    removeListener();
+  };
+}
+function snapshot(proxyObject) {
+  const proxyState = proxyStateMap.get(proxyObject);
+  if (isDev() && !proxyState) {
+    console.warn("Please use proxy object");
+  }
+  const [target, ensureVersion, createSnapshot] = proxyState;
+  return createSnapshot(target, ensureVersion());
+}
+
+// ../node_modules/.pnpm/@zag-js+vanilla@1.34.1/node_modules/@zag-js/vanilla/dist/index.mjs
+var __defProp3 = Object.defineProperty;
+var __defNormalProp3 = (obj, key, value) => key in obj ? __defProp3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField3 = (obj, key, value) => __defNormalProp3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var propMap = {
+  onFocus: "onFocusin",
+  onBlur: "onFocusout",
+  onChange: "onInput",
+  onDoubleClick: "onDblclick",
+  htmlFor: "for",
+  className: "class",
+  defaultValue: "value",
+  defaultChecked: "checked"
+};
+var caseSensitiveSvgAttrs = /* @__PURE__ */ new Set(["viewBox", "preserveAspectRatio"]);
+var toStyleString = (style) => {
+  let string = "";
+  for (let key in style) {
+    const value = style[key];
+    if (value === null || value === void 0) continue;
+    if (!key.startsWith("--")) key = key.replace(/[A-Z]/g, (match3) => `-${match3.toLowerCase()}`);
+    string += `${key}:${value};`;
+  }
+  return string;
+};
+var normalizeProps = createNormalizer((props) => {
+  return Object.entries(props).reduce((acc, [key, value]) => {
+    if (value === void 0) return acc;
+    if (key in propMap) {
+      key = propMap[key];
+    }
+    if (key === "style" && typeof value === "object") {
+      acc.style = toStyleString(value);
+      return acc;
+    }
+    const normalizedKey = caseSensitiveSvgAttrs.has(key) ? key : key.toLowerCase();
+    acc[normalizedKey] = value;
+    return acc;
+  }, {});
+});
+var prevAttrsMap = /* @__PURE__ */ new WeakMap();
+var assignableProps = /* @__PURE__ */ new Set(["value", "checked", "selected"]);
+var caseSensitiveSvgAttrs2 = /* @__PURE__ */ new Set([
+  "viewBox",
+  "preserveAspectRatio",
+  "clipPath",
+  "clipRule",
+  "fillRule",
+  "strokeWidth",
+  "strokeLinecap",
+  "strokeLinejoin",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit"
+]);
+var isSvgElement = (node) => {
+  return node.tagName === "svg" || node.namespaceURI === "http://www.w3.org/2000/svg";
+};
+var getAttributeName = (node, attrName) => {
+  const shouldPreserveCase = isSvgElement(node) && caseSensitiveSvgAttrs2.has(attrName);
+  return shouldPreserveCase ? attrName : attrName.toLowerCase();
+};
+function spreadProps(node, attrs, machineId) {
+  const scopeKey = machineId || "default";
+  let machineMap = prevAttrsMap.get(node);
+  if (!machineMap) {
+    machineMap = /* @__PURE__ */ new Map();
+    prevAttrsMap.set(node, machineMap);
+  }
+  const oldAttrs = machineMap.get(scopeKey) || {};
+  const attrKeys = Object.keys(attrs);
+  const addEvt = (e, f) => {
+    node.addEventListener(e.toLowerCase(), f);
+  };
+  const remEvt = (e, f) => {
+    node.removeEventListener(e.toLowerCase(), f);
+  };
+  const onEvents = (attr) => attr.startsWith("on");
+  const others = (attr) => !attr.startsWith("on");
+  const setup2 = (attr) => addEvt(attr.substring(2), attrs[attr]);
+  const teardown = (attr) => remEvt(attr.substring(2), attrs[attr]);
+  const apply = (attrName) => {
+    const value = attrs[attrName];
+    const oldValue = oldAttrs[attrName];
+    if (value === oldValue) return;
+    if (attrName === "class") {
+      node.className = value ?? "";
+      return;
+    }
+    if (assignableProps.has(attrName)) {
+      node[attrName] = value ?? "";
+      return;
+    }
+    if (typeof value === "boolean" && !attrName.includes("aria-")) {
+      node.toggleAttribute(getAttributeName(node, attrName), value);
+      return;
+    }
+    if (attrName === "children") {
+      node.innerHTML = value;
+      return;
+    }
+    if (value != null) {
+      node.setAttribute(getAttributeName(node, attrName), value);
+      return;
+    }
+    node.removeAttribute(getAttributeName(node, attrName));
+  };
+  for (const key in oldAttrs) {
+    if (attrs[key] == null) {
+      if (key === "class") {
+        node.className = "";
+      } else if (assignableProps.has(key)) {
+        node[key] = "";
+      } else {
+        node.removeAttribute(getAttributeName(node, key));
+      }
+    }
+  }
+  const oldEvents = Object.keys(oldAttrs).filter(onEvents);
+  oldEvents.forEach((evt) => {
+    remEvt(evt.substring(2), oldAttrs[evt]);
+  });
+  attrKeys.filter(onEvents).forEach(setup2);
+  attrKeys.filter(others).forEach(apply);
+  machineMap.set(scopeKey, attrs);
+  return function cleanup() {
+    attrKeys.filter(onEvents).forEach(teardown);
+    const currentMachineMap = prevAttrsMap.get(node);
+    if (currentMachineMap) {
+      currentMachineMap.delete(scopeKey);
+      if (currentMachineMap.size === 0) {
+        prevAttrsMap.delete(node);
+      }
+    }
+  };
+}
+function bindable(props) {
+  const initial = props().value ?? props().defaultValue;
+  if (props().debug) {
+    console.log(`[bindable > ${props().debug}] initial`, initial);
+  }
+  const eq = props().isEqual ?? Object.is;
+  const store = proxy({ value: initial });
+  const controlled = () => props().value !== void 0;
+  return {
+    initial,
+    ref: store,
+    get() {
+      return controlled() ? props().value : store.value;
+    },
+    set(nextValue) {
+      const prev2 = store.value;
+      const next2 = isFunction(nextValue) ? nextValue(prev2) : nextValue;
+      if (props().debug) {
+        console.log(`[bindable > ${props().debug}] setValue`, { next: next2, prev: prev2 });
+      }
+      if (!controlled()) store.value = next2;
+      if (!eq(next2, prev2)) {
+        props().onChange?.(next2, prev2);
+      }
+    },
+    invoke(nextValue, prevValue) {
+      props().onChange?.(nextValue, prevValue);
+    },
+    hash(value) {
+      return props().hash?.(value) ?? String(value);
+    }
+  };
+}
+bindable.cleanup = (_fn) => {
+};
+bindable.ref = (defaultValue) => {
+  let value = defaultValue;
+  return {
+    get: () => value,
+    set: (next2) => {
+      value = next2;
+    }
+  };
+};
+function createRefs(refs) {
+  const ref = { current: refs };
+  return {
+    get(key) {
+      return ref.current[key];
+    },
+    set(key, value) {
+      ref.current[key] = value;
+    }
+  };
+}
+function mergeMachineProps(prev2, next2) {
+  if (!isPlainObject(prev2) || !isPlainObject(next2)) {
+    return next2 === void 0 ? prev2 : next2;
+  }
+  const result = { ...prev2 };
+  for (const key of Object.keys(next2)) {
+    const nextValue = next2[key];
+    const prevValue = prev2[key];
+    if (nextValue === void 0) {
+      continue;
+    }
+    if (isPlainObject(prevValue) && isPlainObject(nextValue)) {
+      result[key] = mergeMachineProps(prevValue, nextValue);
+    } else {
+      result[key] = nextValue;
+    }
+  }
+  return result;
+}
+var VanillaMachine = class {
+  constructor(machine, userProps = {}) {
+    this.machine = machine;
+    __publicField3(this, "scope");
+    __publicField3(this, "context");
+    __publicField3(this, "prop");
+    __publicField3(this, "state");
+    __publicField3(this, "refs");
+    __publicField3(this, "computed");
+    __publicField3(this, "event", { type: "" });
+    __publicField3(this, "previousEvent", { type: "" });
+    __publicField3(this, "effects", /* @__PURE__ */ new Map());
+    __publicField3(this, "transition", null);
+    __publicField3(this, "cleanups", []);
+    __publicField3(this, "subscriptions", []);
+    __publicField3(this, "userPropsRef");
+    __publicField3(this, "getEvent", () => ({
+      ...this.event,
+      current: () => this.event,
+      previous: () => this.previousEvent
+    }));
+    __publicField3(this, "getStateConfig", (state3) => {
+      return this.machine.states[state3];
+    });
+    __publicField3(this, "getState", () => ({
+      ...this.state,
+      matches: (...values) => values.includes(this.state.get()),
+      hasTag: (tag) => !!this.getStateConfig(this.state.get())?.tags?.includes(tag)
+    }));
+    __publicField3(this, "debug", (...args) => {
+      if (this.machine.debug) console.log(...args);
+    });
+    __publicField3(this, "notify", () => {
+      this.publish();
+    });
+    __publicField3(this, "send", (event) => {
+      if (this.status !== MachineStatus.Started) return;
+      queueMicrotask(() => {
+        if (!event) return;
+        this.previousEvent = this.event;
+        this.event = event;
+        this.debug("send", event);
+        let currentState = this.state.get();
+        const eventType = event.type;
+        const transitions = this.getStateConfig(currentState)?.on?.[eventType] ?? this.machine.on?.[eventType];
+        const transition = this.choose(transitions);
+        if (!transition) return;
+        this.transition = transition;
+        const target = transition.target ?? currentState;
+        this.debug("transition", transition);
+        const changed = target !== currentState;
+        if (changed) {
+          this.state.set(target);
+        } else if (transition.reenter && !changed) {
+          this.state.invoke(currentState, currentState);
+        } else {
+          this.action(transition.actions);
+        }
+      });
+    });
+    __publicField3(this, "action", (keys) => {
+      const strs = isFunction(keys) ? keys(this.getParams()) : keys;
+      if (!strs) return;
+      const fns = strs.map((s) => {
+        const fn = this.machine.implementations?.actions?.[s];
+        if (!fn) warn(`[zag-js] No implementation found for action "${JSON.stringify(s)}"`);
+        return fn;
+      });
+      for (const fn of fns) {
+        fn?.(this.getParams());
+      }
+    });
+    __publicField3(this, "guard", (str) => {
+      if (isFunction(str)) return str(this.getParams());
+      return this.machine.implementations?.guards?.[str](this.getParams());
+    });
+    __publicField3(this, "effect", (keys) => {
+      const strs = isFunction(keys) ? keys(this.getParams()) : keys;
+      if (!strs) return;
+      const fns = strs.map((s) => {
+        const fn = this.machine.implementations?.effects?.[s];
+        if (!fn) warn(`[zag-js] No implementation found for effect "${JSON.stringify(s)}"`);
+        return fn;
+      });
+      const cleanups = [];
+      for (const fn of fns) {
+        const cleanup = fn?.(this.getParams());
+        if (cleanup) cleanups.push(cleanup);
+      }
+      return () => cleanups.forEach((fn) => fn?.());
+    });
+    __publicField3(this, "choose", (transitions) => {
+      return toArray(transitions).find((t) => {
+        let result = !t.guard;
+        if (isString(t.guard)) result = !!this.guard(t.guard);
+        else if (isFunction(t.guard)) result = t.guard(this.getParams());
+        return result;
+      });
+    });
+    __publicField3(this, "subscribe", (fn) => {
+      this.subscriptions.push(fn);
+      return () => {
+        const index = this.subscriptions.indexOf(fn);
+        if (index > -1) this.subscriptions.splice(index, 1);
+      };
+    });
+    __publicField3(this, "status", MachineStatus.NotStarted);
+    __publicField3(this, "publish", () => {
+      this.callTrackers();
+      this.subscriptions.forEach((fn) => fn(this.service));
+    });
+    __publicField3(this, "trackers", []);
+    __publicField3(this, "setupTrackers", () => {
+      this.machine.watch?.(this.getParams());
+    });
+    __publicField3(this, "callTrackers", () => {
+      this.trackers.forEach(({ deps, fn }) => {
+        const next2 = deps.map((dep) => dep());
+        if (!isEqual2(fn.prev, next2)) {
+          fn();
+          fn.prev = next2;
+        }
+      });
+    });
+    __publicField3(this, "getParams", () => ({
+      state: this.getState(),
+      context: this.context,
+      event: this.getEvent(),
+      prop: this.prop,
+      send: this.send,
+      action: this.action,
+      guard: this.guard,
+      track: (deps, fn) => {
+        fn.prev = deps.map((dep) => dep());
+        this.trackers.push({ deps, fn });
+      },
+      refs: this.refs,
+      computed: this.computed,
+      flush: identity,
+      scope: this.scope,
+      choose: this.choose
+    }));
+    this.userPropsRef = { current: userProps };
+    const { id, ids, getRootNode: getRootNode2 } = runIfFn(userProps);
+    this.scope = createScope({ id, ids, getRootNode: getRootNode2 });
+    const prop = (key) => {
+      const __props = runIfFn(this.userPropsRef.current);
+      const props = machine.props?.({ props: compact(__props), scope: this.scope }) ?? __props;
+      return props[key];
+    };
+    this.prop = prop;
+    const context = machine.context?.({
+      prop,
+      bindable,
+      scope: this.scope,
+      flush(fn) {
+        queueMicrotask(fn);
+      },
+      getContext() {
+        return ctx;
+      },
+      getComputed() {
+        return computed;
+      },
+      getRefs() {
+        return refs;
+      },
+      getEvent: this.getEvent.bind(this)
+    });
+    if (context) {
+      Object.values(context).forEach((item) => {
+        const unsub = subscribe(item.ref, () => this.notify());
+        this.cleanups.push(unsub);
+      });
+    }
+    const ctx = {
+      get(key) {
+        return context?.[key].get();
+      },
+      set(key, value) {
+        context?.[key].set(value);
+      },
+      initial(key) {
+        return context?.[key].initial;
+      },
+      hash(key) {
+        const current = context?.[key].get();
+        return context?.[key].hash(current);
+      }
+    };
+    this.context = ctx;
+    const computed = (key) => {
+      return machine.computed?.[key]({
+        context: ctx,
+        event: this.getEvent(),
+        prop,
+        refs: this.refs,
+        scope: this.scope,
+        computed
+      }) ?? {};
+    };
+    this.computed = computed;
+    const refs = createRefs(machine.refs?.({ prop, context: ctx }) ?? {});
+    this.refs = refs;
+    const state2 = bindable(() => ({
+      defaultValue: machine.initialState({ prop }),
+      onChange: (nextState, prevState) => {
+        if (prevState) {
+          const exitEffects = this.effects.get(prevState);
+          exitEffects?.();
+          this.effects.delete(prevState);
+        }
+        if (prevState) {
+          this.action(this.getStateConfig(prevState)?.exit);
+        }
+        this.action(this.transition?.actions);
+        const cleanup = this.effect(this.getStateConfig(nextState)?.effects);
+        if (cleanup) this.effects.set(nextState, cleanup);
+        if (prevState === INIT_STATE) {
+          this.action(machine.entry);
+          const cleanup2 = this.effect(machine.effects);
+          if (cleanup2) this.effects.set(INIT_STATE, cleanup2);
+        }
+        this.action(this.getStateConfig(nextState)?.entry);
+      }
+    }));
+    this.state = state2;
+    this.cleanups.push(subscribe(this.state.ref, () => this.notify()));
+  }
+  updateProps(newProps) {
+    const prevSource = this.userPropsRef.current;
+    this.userPropsRef.current = () => {
+      const prev2 = runIfFn(prevSource);
+      const next2 = runIfFn(newProps);
+      return mergeMachineProps(prev2, next2);
+    };
+    this.notify();
+  }
+  start() {
+    this.status = MachineStatus.Started;
+    this.debug("initializing...");
+    this.state.invoke(this.state.initial, INIT_STATE);
+    this.setupTrackers();
+  }
+  stop() {
+    this.effects.forEach((fn) => fn?.());
+    this.effects.clear();
+    this.transition = null;
+    this.action(this.machine.exit);
+    this.cleanups.forEach((unsub) => unsub());
+    this.cleanups = [];
+    this.subscriptions = [];
+    this.status = MachineStatus.Stopped;
+    this.debug("unmounting...");
+  }
+  get service() {
+    return {
+      state: this.getState(),
+      send: this.send,
+      context: this.context,
+      prop: this.prop,
+      scope: this.scope,
+      refs: this.refs,
+      computed: this.computed,
+      event: this.getEvent(),
+      getStatus: () => this.status
+    };
+  }
+};
+
+// lib/core.ts
+var Component = class {
+  el;
+  doc;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  machine;
+  api;
+  constructor(el, props) {
+    if (!el) throw new Error("Root element not found");
+    this.el = el;
+    this.doc = document;
+    this.machine = this.initMachine(props);
+    this.api = this.initApi();
+  }
+  init = () => {
+    this.render();
+    this.machine.subscribe(() => {
+      this.api = this.initApi();
+      this.render();
+    });
+    this.machine.start();
+  };
+  destroy = () => {
+    this.machine.stop();
+  };
+  spreadProps = (el, props) => {
+    spreadProps(el, props, this.machine.scope.id);
+  };
+  updateProps = (props) => {
+    this.machine.updateProps(props);
+  };
+};
+
+export {
+  createAnatomy,
+  setCaretToEnd,
+  MAX_Z_INDEX,
+  dataAttr,
+  ariaAttr,
+  isHTMLElement,
+  isDocument,
+  isShadowRoot,
+  isAnchorElement,
+  isEditableElement,
+  contains,
+  getDocument,
+  getWindow,
+  getActiveElement,
+  getComputedStyle,
+  isControlledElement,
+  findControlledElements,
+  getControlledElements,
+  hasControllerElements,
+  isControlledByExpandedController,
+  getDataUrl,
+  isTouchDevice,
+  isIos,
+  isApple,
+  isMac,
+  isSafari,
+  getBeforeInputValue,
+  getEventTarget,
+  isOpeningInNewTab,
+  isDownloadingEvent,
+  isComposingEvent,
+  isCtrlOrMetaKey,
+  isPrintableKey,
+  isVirtualClick,
+  isLeftClick,
+  isContextMenuEvent,
+  isModifierKey,
+  getEventKey,
+  getNativeEvent,
+  getEventStep,
+  getEventPoint,
+  addDomEvent,
+  setElementValue,
+  setElementChecked,
+  dispatchInputValueEvent,
+  dispatchInputCheckedEvent,
+  trackFormControl,
+  isInternalChangeEvent,
+  markAsInternalChangeEvent,
+  getFocusables,
+  isFocusable,
+  getTabbables,
+  isTabbable,
+  getTabIndex,
+  getInitialFocus,
+  isValidTabEvent,
+  AnimationFrame,
+  raf,
+  nextTick,
+  observeAttributes,
+  observeChildren,
+  clickIfLink,
+  getNearestOverflowAncestor,
+  scrollIntoView,
+  getRelativePoint,
+  requestPointerLock,
+  restoreTextSelection,
+  disableTextSelection,
+  trackPointerMove,
+  trackPress,
+  queryAll,
+  query,
+  itemById,
+  nextById,
+  prevById,
+  resizeObserverBorderBox,
+  setAttribute,
+  setStyle,
+  setStyleProperty,
+  getByTypeahead,
+  visuallyHiddenStyle,
+  waitForElement,
+  toArray,
+  first,
+  last,
+  add,
+  remove,
+  uniq,
+  diff,
+  addOrRemove,
+  nextIndex,
+  next,
+  prevIndex,
+  prev,
+  chunk,
+  partition,
+  isEqual2 as isEqual,
+  isArray,
+  isBoolean,
+  isObject2 as isObject,
+  isFunction,
+  isNull,
+  hasProp,
+  runIfFn,
+  cast,
+  noop2 as noop,
+  callAll,
+  uuid,
+  match2 as match,
+  throttle,
+  wrap2 as wrap,
+  isValueAtMax,
+  isValueAtMin,
+  isValueWithinRange,
+  clampValue,
+  roundToDpr,
+  snapValueToStep,
+  setValueAtIndex,
+  incrementValue,
+  decrementValue,
+  toPx,
+  compact,
+  pick,
+  createSplitProps,
+  setRafInterval,
+  setRafTimeout,
+  warn,
+  invariant,
+  ensure,
+  ensureProps,
+  mergeProps,
+  memo,
+  createGuards,
+  createMachine,
+  setup,
+  createProps,
+  proxy,
+  subscribe,
+  normalizeProps,
+  VanillaMachine,
+  Component,
+  getDir,
+  getString,
+  getStringList,
+  getNumber,
+  getBoolean,
+  generateId
+};
diff --git a/priv/static/clipboard.mjs b/priv/static/clipboard.mjs
index 02d5a4f..fbb6c54 100644
--- a/priv/static/clipboard.mjs
+++ b/priv/static/clipboard.mjs
@@ -13,9 +13,9 @@ import {
   normalizeProps,
   setElementValue,
   setRafTimeout
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+clipboard@1.34.0/node_modules/@zag-js/clipboard/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+clipboard@1.34.1/node_modules/@zag-js/clipboard/dist/index.mjs
 var anatomy = createAnatomy("clipboard").parts("root", "control", "trigger", "indicator", "input", "label");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `clip:${ctx.id}`;
diff --git a/priv/static/collapsible.mjs b/priv/static/collapsible.mjs
index 1a72a5b..0fd8368 100644
--- a/priv/static/collapsible.mjs
+++ b/priv/static/collapsible.mjs
@@ -18,9 +18,9 @@ import {
   setAttribute,
   setStyle,
   toPx
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+collapsible@1.34.0/node_modules/@zag-js/collapsible/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+collapsible@1.34.1/node_modules/@zag-js/collapsible/dist/index.mjs
 var anatomy = createAnatomy("collapsible").parts("root", "trigger", "content", "indicator");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `collapsible:${ctx.id}`;
diff --git a/priv/static/combobox.mjs b/priv/static/combobox.mjs
index ec22328..4afafdb 100644
--- a/priv/static/combobox.mjs
+++ b/priv/static/combobox.mjs
@@ -1,19 +1,19 @@
 import {
   ListCollection
-} from "./chunk-4RWUEBEQ.mjs";
+} from "./chunk-KCOQB3RU.mjs";
 import {
   getPlacement,
   getPlacementStyles
-} from "./chunk-LOW5KGCT.mjs";
+} from "./chunk-GN3NEUUU.mjs";
 import {
   trackDismissableElement
-} from "./chunk-NF3CDGDL.mjs";
-import "./chunk-OSSFSUET.mjs";
+} from "./chunk-OA4F3YDQ.mjs";
+import "./chunk-EBQGC3XC.mjs";
 import {
   getInteractionModality,
   setInteractionModality,
   trackFocusVisible
-} from "./chunk-GXGJDSCU.mjs";
+} from "./chunk-2QLEEEGG.mjs";
 import {
   Component,
   VanillaMachine,
@@ -47,9 +47,9 @@ import {
   scrollIntoView,
   setCaretToEnd,
   setup
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+combobox@1.34.0/node_modules/@zag-js/combobox/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+combobox@1.34.1/node_modules/@zag-js/combobox/dist/index.mjs
 var anatomy = createAnatomy("combobox").parts(
   "root",
   "clearTrigger",
diff --git a/priv/static/date-picker.mjs b/priv/static/date-picker.mjs
index 52ae109..7acb6f5 100644
--- a/priv/static/date-picker.mjs
+++ b/priv/static/date-picker.mjs
@@ -1,11 +1,11 @@
 import {
   getPlacement,
   getPlacementStyles
-} from "./chunk-LOW5KGCT.mjs";
+} from "./chunk-GN3NEUUU.mjs";
 import {
   trackDismissableElement
-} from "./chunk-NF3CDGDL.mjs";
-import "./chunk-OSSFSUET.mjs";
+} from "./chunk-OA4F3YDQ.mjs";
+import "./chunk-EBQGC3XC.mjs";
 import {
   Component,
   VanillaMachine,
@@ -35,7 +35,7 @@ import {
   raf,
   restoreTextSelection,
   setElementValue
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
 // ../node_modules/.pnpm/@internationalized+date@3.11.0/node_modules/@internationalized/date/dist/utils.mjs
 function $2b4dce13dd5a17fa$export$842a2cf37af977e1(amount, numerator) {
@@ -1344,7 +1344,7 @@ function $fb18d541ea1ad717$var$getResolvedHourCycle(locale, options) {
   throw new Error("Unexpected hour cycle result");
 }
 
-// ../node_modules/.pnpm/@zag-js+date-utils@1.34.0_@internationalized+date@3.11.0/node_modules/@zag-js/date-utils/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+date-utils@1.34.1_@internationalized+date@3.11.0/node_modules/@zag-js/date-utils/dist/index.mjs
 function alignCenter(date, duration, locale, min, max) {
   const halfDuration = {};
   for (let prop in duration) {
@@ -1804,7 +1804,7 @@ function getDateRangePreset(preset, locale, timeZone) {
   }
 }
 
-// ../node_modules/.pnpm/@zag-js+live-region@1.34.0/node_modules/@zag-js/live-region/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+live-region@1.34.1/node_modules/@zag-js/live-region/dist/index.mjs
 var ID = "__live-region__";
 function createLiveRegion(opts = {}) {
   const { level = "polite", document: doc = document, root, delay: _delay = 0 } = opts;
@@ -1850,7 +1850,7 @@ function createLiveRegion(opts = {}) {
   };
 }
 
-// ../node_modules/.pnpm/@zag-js+date-picker@1.34.0_@internationalized+date@3.11.0/node_modules/@zag-js/date-picker/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+date-picker@1.34.1_@internationalized+date@3.11.0/node_modules/@zag-js/date-picker/dist/index.mjs
 var anatomy = createAnatomy("date-picker").parts(
   "clearTrigger",
   "content",
diff --git a/priv/static/dialog.mjs b/priv/static/dialog.mjs
index 0581f2e..520ba62 100644
--- a/priv/static/dialog.mjs
+++ b/priv/static/dialog.mjs
@@ -1,7 +1,7 @@
 import {
   trackDismissableElement
-} from "./chunk-NF3CDGDL.mjs";
-import "./chunk-OSSFSUET.mjs";
+} from "./chunk-OA4F3YDQ.mjs";
+import "./chunk-EBQGC3XC.mjs";
 import {
   Component,
   VanillaMachine,
@@ -33,9 +33,9 @@ import {
   raf,
   setStyle,
   setStyleProperty
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+aria-hidden@1.34.0/node_modules/@zag-js/aria-hidden/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+aria-hidden@1.34.1/node_modules/@zag-js/aria-hidden/dist/index.mjs
 var counterMap = /* @__PURE__ */ new WeakMap();
 var uncontrolledNodes = /* @__PURE__ */ new WeakMap();
 var markerMap = {};
@@ -172,7 +172,7 @@ function ariaHidden(targetsOrFn, options = {}) {
   };
 }
 
-// ../node_modules/.pnpm/@zag-js+focus-trap@1.34.0/node_modules/@zag-js/focus-trap/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+focus-trap@1.34.1/node_modules/@zag-js/focus-trap/dist/index.mjs
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
@@ -772,7 +772,7 @@ function trapFocus(el, options = {}) {
   };
 }
 
-// ../node_modules/.pnpm/@zag-js+remove-scroll@1.34.0/node_modules/@zag-js/remove-scroll/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+remove-scroll@1.34.1/node_modules/@zag-js/remove-scroll/dist/index.mjs
 var LOCK_CLASSNAME = "data-scroll-lock";
 function getPaddingProperty(documentElement) {
   const documentLeft = documentElement.getBoundingClientRect().left;
@@ -831,7 +831,7 @@ function preventBodyScroll(_document) {
   };
 }
 
-// ../node_modules/.pnpm/@zag-js+dialog@1.34.0/node_modules/@zag-js/dialog/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+dialog@1.34.1/node_modules/@zag-js/dialog/dist/index.mjs
 var anatomy = createAnatomy("dialog").parts(
   "trigger",
   "backdrop",
diff --git a/priv/static/editable.mjs b/priv/static/editable.mjs
index 87a9422..4a42bb8 100644
--- a/priv/static/editable.mjs
+++ b/priv/static/editable.mjs
@@ -1,6 +1,6 @@
 import {
   trackInteractOutside
-} from "./chunk-OSSFSUET.mjs";
+} from "./chunk-EBQGC3XC.mjs";
 import {
   Component,
   VanillaMachine,
@@ -19,9 +19,9 @@ import {
   normalizeProps,
   raf,
   setElementValue
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+editable@1.34.0/node_modules/@zag-js/editable/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+editable@1.34.1/node_modules/@zag-js/editable/dist/index.mjs
 var anatomy = createAnatomy("editable").parts(
   "root",
   "area",
diff --git a/priv/static/floating-panel.mjs b/priv/static/floating-panel.mjs
index 75bd8b4..92ff140 100644
--- a/priv/static/floating-panel.mjs
+++ b/priv/static/floating-panel.mjs
@@ -10,7 +10,7 @@ import {
   isSizeEqual,
   resizeRect,
   subtractPoints
-} from "./chunk-FEZIYMNT.mjs";
+} from "./chunk-QHOSSHQC.mjs";
 import {
   Component,
   VanillaMachine,
@@ -41,9 +41,9 @@ import {
   subscribe,
   toPx,
   trackPointerMove
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+floating-panel@1.34.0/node_modules/@zag-js/floating-panel/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+floating-panel@1.34.1/node_modules/@zag-js/floating-panel/dist/index.mjs
 var anatomy = createAnatomy("floating-panel").parts(
   "trigger",
   "positioner",
diff --git a/priv/static/listbox.mjs b/priv/static/listbox.mjs
index e8c1d44..5b53198 100644
--- a/priv/static/listbox.mjs
+++ b/priv/static/listbox.mjs
@@ -3,12 +3,12 @@ import {
   ListCollection,
   Selection,
   isGridCollection
-} from "./chunk-4RWUEBEQ.mjs";
+} from "./chunk-KCOQB3RU.mjs";
 import {
   getInteractionModality,
   setInteractionModality,
   trackFocusVisible
-} from "./chunk-GXGJDSCU.mjs";
+} from "./chunk-2QLEEEGG.mjs";
 import {
   Component,
   VanillaMachine,
@@ -35,9 +35,9 @@ import {
   raf,
   scrollIntoView,
   setup
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+listbox@1.34.0/node_modules/@zag-js/listbox/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+listbox@1.34.1/node_modules/@zag-js/listbox/dist/index.mjs
 var anatomy = createAnatomy("listbox").parts(
   "label",
   "input",
diff --git a/priv/static/menu.mjs b/priv/static/menu.mjs
index 1925358..64738e3 100644
--- a/priv/static/menu.mjs
+++ b/priv/static/menu.mjs
@@ -1,21 +1,21 @@
 import {
   getElementPolygon,
   isPointInPolygon
-} from "./chunk-FEZIYMNT.mjs";
+} from "./chunk-QHOSSHQC.mjs";
 import {
   getPlacement,
   getPlacementSide,
   getPlacementStyles
-} from "./chunk-LOW5KGCT.mjs";
+} from "./chunk-GN3NEUUU.mjs";
 import {
   trackDismissableElement
-} from "./chunk-NF3CDGDL.mjs";
-import "./chunk-OSSFSUET.mjs";
+} from "./chunk-OA4F3YDQ.mjs";
+import "./chunk-EBQGC3XC.mjs";
 import {
   getInteractionModality,
   setInteractionModality,
   trackFocusVisible
-} from "./chunk-GXGJDSCU.mjs";
+} from "./chunk-2QLEEEGG.mjs";
 import {
   Component,
   VanillaMachine,
@@ -59,9 +59,9 @@ import {
   queryAll,
   raf,
   scrollIntoView
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+menu@1.34.0/node_modules/@zag-js/menu/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+menu@1.34.1/node_modules/@zag-js/menu/dist/index.mjs
 var anatomy = createAnatomy("menu").parts(
   "arrow",
   "arrowTip",
diff --git a/priv/static/number-input.mjs b/priv/static/number-input.mjs
index 037c8fe..0a49f2a 100644
--- a/priv/static/number-input.mjs
+++ b/priv/static/number-input.mjs
@@ -36,7 +36,7 @@ import {
   setup,
   trackFormControl,
   wrap
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
 // ../node_modules/.pnpm/@internationalized+number@3.6.5/node_modules/@internationalized/number/dist/NumberFormatter.mjs
 var $488c6ddbf4ef74c2$var$formatterCache = /* @__PURE__ */ new Map();
@@ -400,7 +400,7 @@ function $6c7bd7858deea686$var$escapeRegex(string) {
   return string.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
 }
 
-// ../node_modules/.pnpm/@zag-js+number-input@1.34.0/node_modules/@zag-js/number-input/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+number-input@1.34.1/node_modules/@zag-js/number-input/dist/index.mjs
 var anatomy = createAnatomy("numberInput").parts(
   "root",
   "label",
diff --git a/priv/static/password-input.mjs b/priv/static/password-input.mjs
index 79fdf92..4336a95 100644
--- a/priv/static/password-input.mjs
+++ b/priv/static/password-input.mjs
@@ -13,9 +13,9 @@ import {
   isLeftClick,
   normalizeProps,
   uuid
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+password-input@1.34.0/node_modules/@zag-js/password-input/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+password-input@1.34.1/node_modules/@zag-js/password-input/dist/index.mjs
 var anatomy = createAnatomy("password-input").parts(
   "root",
   "input",
diff --git a/priv/static/pin-input.mjs b/priv/static/pin-input.mjs
index 2dcd06c..acc9eb6 100644
--- a/priv/static/pin-input.mjs
+++ b/priv/static/pin-input.mjs
@@ -25,9 +25,9 @@ import {
   setValueAtIndex,
   setup,
   visuallyHiddenStyle
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+pin-input@1.34.0/node_modules/@zag-js/pin-input/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+pin-input@1.34.1/node_modules/@zag-js/pin-input/dist/index.mjs
 var anatomy = createAnatomy("pinInput").parts("root", "label", "input", "control");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `pin-input:${ctx.id}`;
diff --git a/priv/static/radio-group.mjs b/priv/static/radio-group.mjs
index f7e9bbe..de66d50 100644
--- a/priv/static/radio-group.mjs
+++ b/priv/static/radio-group.mjs
@@ -1,7 +1,7 @@
 import {
   isFocusVisible,
   trackFocusVisible
-} from "./chunk-GXGJDSCU.mjs";
+} from "./chunk-2QLEEEGG.mjs";
 import {
   Component,
   VanillaMachine,
@@ -22,9 +22,9 @@ import {
   toPx,
   trackFormControl,
   visuallyHiddenStyle
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+radio-group@1.34.0/node_modules/@zag-js/radio-group/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+radio-group@1.34.1/node_modules/@zag-js/radio-group/dist/index.mjs
 var anatomy = createAnatomy("radio-group").parts(
   "root",
   "label",
diff --git a/priv/static/select.mjs b/priv/static/select.mjs
index 159bab2..5d7ebe6 100644
--- a/priv/static/select.mjs
+++ b/priv/static/select.mjs
@@ -1,19 +1,19 @@
 import {
   ListCollection
-} from "./chunk-4RWUEBEQ.mjs";
+} from "./chunk-KCOQB3RU.mjs";
 import {
   getPlacement,
   getPlacementStyles
-} from "./chunk-LOW5KGCT.mjs";
+} from "./chunk-GN3NEUUU.mjs";
 import {
   trackDismissableElement
-} from "./chunk-NF3CDGDL.mjs";
-import "./chunk-OSSFSUET.mjs";
+} from "./chunk-OA4F3YDQ.mjs";
+import "./chunk-EBQGC3XC.mjs";
 import {
   getInteractionModality,
   setInteractionModality,
   trackFocusVisible
-} from "./chunk-GXGJDSCU.mjs";
+} from "./chunk-2QLEEEGG.mjs";
 import {
   Component,
   VanillaMachine,
@@ -46,9 +46,9 @@ import {
   scrollIntoView,
   trackFormControl,
   visuallyHiddenStyle
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+select@1.34.0/node_modules/@zag-js/select/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+select@1.34.1/node_modules/@zag-js/select/dist/index.mjs
 var anatomy = createAnatomy("select").parts(
   "label",
   "positioner",
diff --git a/priv/static/signature-pad.mjs b/priv/static/signature-pad.mjs
index b270b19..9b87d22 100644
--- a/priv/static/signature-pad.mjs
+++ b/priv/static/signature-pad.mjs
@@ -17,7 +17,7 @@ import {
   normalizeProps,
   query,
   trackPointerMove
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
 // ../node_modules/.pnpm/perfect-freehand@1.2.3/node_modules/perfect-freehand/dist/esm/index.mjs
 var { PI: e } = Math;
@@ -199,7 +199,7 @@ function R(e2, t2 = {}) {
 }
 var z = R;
 
-// ../node_modules/.pnpm/@zag-js+signature-pad@1.34.0/node_modules/@zag-js/signature-pad/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+signature-pad@1.34.1/node_modules/@zag-js/signature-pad/dist/index.mjs
 var anatomy = createAnatomy("signature-pad").parts(
   "root",
   "control",
diff --git a/priv/static/switch.mjs b/priv/static/switch.mjs
index 9609cfb..926ab79 100644
--- a/priv/static/switch.mjs
+++ b/priv/static/switch.mjs
@@ -1,7 +1,7 @@
 import {
   isFocusVisible,
   trackFocusVisible
-} from "./chunk-GXGJDSCU.mjs";
+} from "./chunk-2QLEEEGG.mjs";
 import {
   Component,
   VanillaMachine,
@@ -21,9 +21,9 @@ import {
   trackFormControl,
   trackPress,
   visuallyHiddenStyle
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+switch@1.34.0/node_modules/@zag-js/switch/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+switch@1.34.1/node_modules/@zag-js/switch/dist/index.mjs
 var anatomy = createAnatomy("switch").parts("root", "label", "control", "thumb");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `switch:${ctx.id}`;
diff --git a/priv/static/tabs.mjs b/priv/static/tabs.mjs
index 5757477..2bfa317 100644
--- a/priv/static/tabs.mjs
+++ b/priv/static/tabs.mjs
@@ -29,9 +29,9 @@ import {
   resizeObserverBorderBox,
   setup,
   toPx
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+tabs@1.34.0/node_modules/@zag-js/tabs/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+tabs@1.34.1/node_modules/@zag-js/tabs/dist/index.mjs
 var anatomy = createAnatomy("tabs").parts("root", "list", "trigger", "content", "indicator");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `tabs:${ctx.id}`;
diff --git a/priv/static/timer.mjs b/priv/static/timer.mjs
index 299a6c8..50b9079 100644
--- a/priv/static/timer.mjs
+++ b/priv/static/timer.mjs
@@ -14,9 +14,9 @@ import {
   normalizeProps,
   setRafInterval,
   setRafTimeout
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+timer@1.34.0/node_modules/@zag-js/timer/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+timer@1.34.1/node_modules/@zag-js/timer/dist/index.mjs
 var anatomy = createAnatomy("timer").parts(
   "root",
   "area",
diff --git a/priv/static/toast.mjs b/priv/static/toast.mjs
index c6b21bb..47ba94c 100644
--- a/priv/static/toast.mjs
+++ b/priv/static/toast.mjs
@@ -1,7 +1,7 @@
 import {
   trackDismissableBranch
-} from "./chunk-NF3CDGDL.mjs";
-import "./chunk-OSSFSUET.mjs";
+} from "./chunk-OA4F3YDQ.mjs";
+import "./chunk-EBQGC3XC.mjs";
 import {
   AnimationFrame,
   Component,
@@ -26,9 +26,9 @@ import {
   setup,
   uuid,
   warn
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+toast@1.34.0/node_modules/@zag-js/toast/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+toast@1.34.1/node_modules/@zag-js/toast/dist/index.mjs
 var anatomy = createAnatomy("toast").parts(
   "group",
   "root",
diff --git a/priv/static/toggle-group.mjs b/priv/static/toggle-group.mjs
index 8b3006b..c9bbc23 100644
--- a/priv/static/toggle-group.mjs
+++ b/priv/static/toggle-group.mjs
@@ -25,9 +25,9 @@ import {
   prevById,
   queryAll,
   raf
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+toggle-group@1.34.0/node_modules/@zag-js/toggle-group/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+toggle-group@1.34.1/node_modules/@zag-js/toggle-group/dist/index.mjs
 var anatomy = createAnatomy("toggle-group").parts("root", "item");
 var parts = anatomy.build();
 var getRootId = (ctx) => ctx.ids?.root ?? `toggle-group:${ctx.id}`;
diff --git a/priv/static/tree-view.mjs b/priv/static/tree-view.mjs
index d1a37bb..efa626c 100644
--- a/priv/static/tree-view.mjs
+++ b/priv/static/tree-view.mjs
@@ -1,6 +1,6 @@
 import {
   TreeCollection
-} from "./chunk-4RWUEBEQ.mjs";
+} from "./chunk-KCOQB3RU.mjs";
 import {
   Component,
   VanillaMachine,
@@ -38,9 +38,9 @@ import {
   setElementValue,
   toArray,
   uniq
-} from "./chunk-TZXIWZZ7.mjs";
+} from "./chunk-RUWIVFVB.mjs";
 
-// ../node_modules/.pnpm/@zag-js+tree-view@1.34.0/node_modules/@zag-js/tree-view/dist/index.mjs
+// ../node_modules/.pnpm/@zag-js+tree-view@1.34.1/node_modules/@zag-js/tree-view/dist/index.mjs
 var anatomy = createAnatomy("tree-view").parts(
   "branch",
   "branchContent",