@cloudvoyant/helix-react 0.13.0 → 0.14.0

package/dist/index.js

@@ -170,10 +170,11 @@ import {
   scrollCornerBase,
   cn as cn17
 } from "@cloudvoyant/helix";
-import { jsx as jsx17, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx17, jsxs } from "react/jsx-runtime";
 function Scroll({
   className,
   orientation = "vertical",
+  variant = "default",
   contentClassName,
   thumbClassName,
   viewportClassName,
@@ -182,12 +183,72 @@ function Scroll({
 }) {
   return /* @__PURE__ */ jsxs(ArkRoot, { className: cn17(scrollRootBase, className), ...props, children: [
     /* @__PURE__ */ jsx17(ArkViewport, { className: cn17(scrollViewportBase, viewportClassName), children: /* @__PURE__ */ jsx17(ArkContent, { className: cn17(scrollContentBase, contentClassName), children }) }),
-    (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx17(ArkScrollbar, { orientation: "vertical", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx17(ArkThumb, { className: cn17(scrollThumbBase, thumbClassName) }) }),
-    (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx17(ArkScrollbar, { orientation: "horizontal", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx17(ArkThumb, { className: cn17(scrollThumbBase, thumbClassName) }) }),
-    orientation === "both" && /* @__PURE__ */ jsx17(ArkCorner, { className: scrollCornerBase })
+    variant === "hidden" ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
+      (orientation === "vertical" || orientation === "both") && /* @__PURE__ */ jsx17(ArkScrollbar, { orientation: "vertical", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx17(ArkThumb, { className: cn17(scrollThumbBase, thumbClassName) }) }),
+      (orientation === "horizontal" || orientation === "both") && /* @__PURE__ */ jsx17(ArkScrollbar, { orientation: "horizontal", className: scrollScrollbarBase, children: /* @__PURE__ */ jsx17(ArkThumb, { className: cn17(scrollThumbBase, thumbClassName) }) }),
+      orientation === "both" && /* @__PURE__ */ jsx17(ArkCorner, { className: scrollCornerBase })
+    ] })
   ] });
 }
 
+// src/page.tsx
+import { ark as ark16 } from "@ark-ui/react/factory";
+import {
+  pageVariants,
+  pageGutterAreaBase,
+  pageGutterVariants,
+  pageGutterContentVariants,
+  pageContentBase,
+  pageFooterBase,
+  pageSectionBase,
+  cn as cn18
+} from "@cloudvoyant/helix";
+import { jsx as jsx18 } from "react/jsx-runtime";
+function Page({ variant = "default", className, children, ...props }) {
+  return /* @__PURE__ */ jsx18(ark16.div, { "data-slot": "page", className: cn18(pageVariants({ variant }), className), ...props, children });
+}
+function PageGutter({
+  side = "left",
+  align = "start",
+  contentClassName,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx18(
+    ark16.div,
+    {
+      "data-slot": "page-gutter-area",
+      className: cn18(pageGutterAreaBase, side === "right" && "[grid-area:right]"),
+      children: /* @__PURE__ */ jsx18(
+        ark16.div,
+        {
+          "data-slot": "page-gutter",
+          className: cn18(pageGutterVariants({ side }), className),
+          ...props,
+          children: /* @__PURE__ */ jsx18(
+            ark16.div,
+            {
+              "data-slot": "page-gutter-content",
+              className: cn18(pageGutterContentVariants({ align }), contentClassName),
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}
+function PageContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx18(ark16.main, { "data-slot": "page-content", className: cn18(pageContentBase, className), ...props, children });
+}
+function PageFooter({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx18(ark16.footer, { "data-slot": "page-footer", className: cn18(pageFooterBase, className), ...props, children });
+}
+function PageSection({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx18(ark16.section, { "data-slot": "page-section", className: cn18(pageSectionBase, className), ...props, children });
+}
+
 // src/splitter.tsx
 import {
   SplitterRoot as ArkSplitterRoot,
@@ -201,18 +262,18 @@ import {
   splitterResizeTriggerBase,
   splitterResizeTriggerSeparatorBase,
   splitterResizeTriggerIndicatorBase,
-  cn as cn18
+  cn as cn19
 } from "@cloudvoyant/helix";
-import { jsx as jsx18, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs2 } from "react/jsx-runtime";
 function Splitter({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(ArkSplitterRoot, { className: cn18(splitterRootBase, className), ...props });
+  return /* @__PURE__ */ jsx19(ArkSplitterRoot, { className: cn19(splitterRootBase, className), ...props });
 }
 function SplitterPanel({ className, ...props }) {
-  return /* @__PURE__ */ jsx18(ArkSplitterPanel, { className: cn18(splitterPanelBase, className), ...props });
+  return /* @__PURE__ */ jsx19(ArkSplitterPanel, { className: cn19(splitterPanelBase, className), ...props });
 }
 function SplitterResizeTrigger({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs2(ArkSplitterResizeTrigger, { className: cn18(splitterResizeTriggerBase, className), ...props, children: [
-    /* @__PURE__ */ jsx18("span", { "aria-hidden": true, "data-part": "separator", className: splitterResizeTriggerSeparatorBase }),
+  return /* @__PURE__ */ jsxs2(ArkSplitterResizeTrigger, { className: cn19(splitterResizeTriggerBase, className), ...props, children: [
+    /* @__PURE__ */ jsx19("span", { "aria-hidden": true, "data-part": "separator", className: splitterResizeTriggerSeparatorBase }),
     children
   ] });
 }
@@ -220,10 +281,10 @@ function SplitterResizeTriggerIndicator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     ArkSplitterResizeTriggerIndicator,
     {
-      className: cn18(splitterResizeTriggerIndicatorBase, className),
+      className: cn19(splitterResizeTriggerIndicatorBase, className),
       ...props
     }
   );
@@ -231,7 +292,7 @@ function SplitterResizeTriggerIndicator({
 
 // src/sidebar/Provider.tsx
 import * as React2 from "react";
-import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_KEYBOARD_SHORTCUT, sidebarStyles, cn as cn19 } from "@cloudvoyant/helix";
+import { SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON, SIDEBAR_KEYBOARD_SHORTCUT, sidebarStyles, cn as cn20 } from "@cloudvoyant/helix";
 
 // src/sidebar/context.ts
 import * as React from "react";
@@ -245,7 +306,7 @@ function useSidebar() {
 }
 
 // src/sidebar/Provider.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 function useIsMobile() {
@@ -324,7 +385,7 @@ function Provider({
     }),
     [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
   );
-  return /* @__PURE__ */ jsx19(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx20(
     Row,
     {
       "data-slot": "sidebar-wrapper",
@@ -333,7 +394,7 @@ function Provider({
         "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
         ...style
       },
-      className: cn19(sidebarStyles.wrapperClass, className),
+      className: cn20(sidebarStyles.wrapperClass, className),
       ...props,
       children
     }
@@ -350,8 +411,8 @@ import {
   DrawerDescription,
   DrawerCloseTrigger
 } from "@ark-ui/react/drawer";
-import { SIDEBAR_WIDTH_MOBILE, sidebarStyles as sidebarStyles2, cn as cn20 } from "@cloudvoyant/helix";
-import { jsx as jsx20, jsxs as jsxs3 } from "react/jsx-runtime";
+import { SIDEBAR_WIDTH_MOBILE, sidebarStyles as sidebarStyles2, cn as cn21 } from "@cloudvoyant/helix";
+import { jsx as jsx21, jsxs as jsxs3 } from "react/jsx-runtime";
 function Root({
   side = "left",
   variant = "sidebar",
@@ -362,12 +423,12 @@ function Root({
 }) {
   const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
   if (collapsible === "none") {
-    return /* @__PURE__ */ jsx20(
+    return /* @__PURE__ */ jsx21(
       Col,
       {
         "data-slot": "sidebar",
         "data-sidebar": "sidebar",
-        className: cn20("h-full w-(--sidebar-width) bg-sidebar text-sidebar-foreground", className),
+        className: cn21("h-full w-(--sidebar-width) bg-sidebar text-sidebar-foreground", className),
         ...props,
         children
       }
@@ -381,20 +442,20 @@ function Root({
         onOpenChange: (details) => setOpenMobile(details.open),
         ...props,
         children: [
-          /* @__PURE__ */ jsx20(DrawerBackdrop, {}),
-          /* @__PURE__ */ jsx20(DrawerPositioner, { className: "w-(--sidebar-width)", children: /* @__PURE__ */ jsxs3(
+          /* @__PURE__ */ jsx21(DrawerBackdrop, {}),
+          /* @__PURE__ */ jsx21(DrawerPositioner, { className: "w-(--sidebar-width)", children: /* @__PURE__ */ jsxs3(
             DrawerContent,
             {
               "data-sidebar": "sidebar",
               "data-slot": "sidebar",
               "data-mobile": "true",
-              className: cn20("w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", className),
+              className: cn21("w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground", className),
               style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
               children: [
-                /* @__PURE__ */ jsx20(DrawerTitle, { className: "sr-only", children: "Sidebar" }),
-                /* @__PURE__ */ jsx20(DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
-                /* @__PURE__ */ jsx20(DrawerCloseTrigger, { className: "hidden" }),
-                /* @__PURE__ */ jsx20(Col, { className: "h-full w-full", children })
+                /* @__PURE__ */ jsx21(DrawerTitle, { className: "sr-only", children: "Sidebar" }),
+                /* @__PURE__ */ jsx21(DrawerDescription, { className: "sr-only", children: "Displays the mobile sidebar." }),
+                /* @__PURE__ */ jsx21(DrawerCloseTrigger, { className: "hidden" }),
+                /* @__PURE__ */ jsx21(Col, { className: "h-full w-full", children })
               ]
             }
           ) })
@@ -412,35 +473,35 @@ function Root({
       "data-side": side,
       "data-slot": "sidebar",
       children: [
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "div",
           {
             "data-slot": "sidebar-gap",
-            className: cn20(
+            className: cn21(
               sidebarStyles2.gapClass,
               side === "right" && "rotate-180",
               variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
             )
           }
         ),
-        /* @__PURE__ */ jsx20(
+        /* @__PURE__ */ jsx21(
           "div",
           {
             "data-slot": "sidebar-container",
-            className: cn20(
+            className: cn21(
               sidebarStyles2.containerClass,
               side === "left" ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]" : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
               variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
               className
             ),
             ...props,
-            children: /* @__PURE__ */ jsx20(
+            children: /* @__PURE__ */ jsx21(
               "div",
               {
                 "data-sidebar": "sidebar",
                 "data-slot": "sidebar-inner",
                 "data-variant": variant,
-                className: cn20(sidebarStyles2.innerClass),
+                className: cn21(sidebarStyles2.innerClass),
                 children
               }
             )
@@ -452,137 +513,137 @@ function Root({
 }
 
 // src/sidebar/Header.tsx
-import { sidebarStyles as sidebarStyles3, cn as cn21 } from "@cloudvoyant/helix";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { sidebarStyles as sidebarStyles3, cn as cn22 } from "@cloudvoyant/helix";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function Header({ className, ...props }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Col,
     {
       "data-slot": "sidebar-header",
       "data-sidebar": "header",
-      className: cn21(sidebarStyles3.headerClass, className),
+      className: cn22(sidebarStyles3.headerClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/Footer.tsx
-import { sidebarStyles as sidebarStyles4, cn as cn22 } from "@cloudvoyant/helix";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { sidebarStyles as sidebarStyles4, cn as cn23 } from "@cloudvoyant/helix";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function Footer({ className, ...props }) {
-  return /* @__PURE__ */ jsx22(
+  return /* @__PURE__ */ jsx23(
     Col,
     {
       "data-slot": "sidebar-footer",
       "data-sidebar": "footer",
-      className: cn22(sidebarStyles4.footerClass, className),
+      className: cn23(sidebarStyles4.footerClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/Separator.tsx
-import { ark as ark16 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles5, cn as cn23 } from "@cloudvoyant/helix";
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { ark as ark17 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles5, cn as cn24 } from "@cloudvoyant/helix";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Separator({ className, ...props }) {
-  return /* @__PURE__ */ jsx23(
-    ark16.div,
+  return /* @__PURE__ */ jsx24(
+    ark17.div,
     {
       "data-slot": "sidebar-separator",
       "data-sidebar": "separator",
       role: "separator",
-      className: cn23(sidebarStyles5.separatorClass, className),
+      className: cn24(sidebarStyles5.separatorClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/Content.tsx
-import { sidebarStyles as sidebarStyles6, cn as cn24 } from "@cloudvoyant/helix";
-import { jsx as jsx24 } from "react/jsx-runtime";
+import { sidebarStyles as sidebarStyles6, cn as cn25 } from "@cloudvoyant/helix";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function Content({ className, ...props }) {
-  return /* @__PURE__ */ jsx24(
+  return /* @__PURE__ */ jsx25(
     Col,
     {
       "data-slot": "sidebar-content",
       "data-sidebar": "content",
-      className: cn24(sidebarStyles6.contentClass, className),
+      className: cn25(sidebarStyles6.contentClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/Group.tsx
-import { sidebarStyles as sidebarStyles7, cn as cn25 } from "@cloudvoyant/helix";
-import { jsx as jsx25, jsxs as jsxs4 } from "react/jsx-runtime";
+import { sidebarStyles as sidebarStyles7, cn as cn26 } from "@cloudvoyant/helix";
+import { jsx as jsx26, jsxs as jsxs4 } from "react/jsx-runtime";
 function Group({ label, className, children, ...props }) {
-  return /* @__PURE__ */ jsxs4(Col, { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn25(sidebarStyles7.groupClass, className), ...props, children: [
-    label && /* @__PURE__ */ jsx25("div", { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn25(sidebarStyles7.groupLabelClass), children: label }),
-    /* @__PURE__ */ jsx25("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn25(sidebarStyles7.groupContentClass), children })
+  return /* @__PURE__ */ jsxs4(Col, { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn26(sidebarStyles7.groupClass, className), ...props, children: [
+    label && /* @__PURE__ */ jsx26("div", { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", className: cn26(sidebarStyles7.groupLabelClass), children: label }),
+    /* @__PURE__ */ jsx26("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn26(sidebarStyles7.groupContentClass), children })
   ] });
 }
 
 // src/sidebar/GroupAction.tsx
-import { ark as ark17 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles8, cn as cn26 } from "@cloudvoyant/helix";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { ark as ark18 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles8, cn as cn27 } from "@cloudvoyant/helix";
+import { jsx as jsx27 } from "react/jsx-runtime";
 function GroupAction({ className, asChild = false, ...props }) {
-  return /* @__PURE__ */ jsx26(
-    ark17.button,
+  return /* @__PURE__ */ jsx27(
+    ark18.button,
     {
       "data-slot": "sidebar-group-action",
       "data-sidebar": "group-action",
       asChild,
       type: "button",
-      className: cn26(sidebarStyles8.groupActionClass, className),
+      className: cn27(sidebarStyles8.groupActionClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/Menu.tsx
-import { ark as ark18 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles9, cn as cn27 } from "@cloudvoyant/helix";
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { ark as ark19 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles9, cn as cn28 } from "@cloudvoyant/helix";
+import { jsx as jsx28 } from "react/jsx-runtime";
 function Menu({ className, ...props }) {
-  return /* @__PURE__ */ jsx27(
-    ark18.ul,
+  return /* @__PURE__ */ jsx28(
+    ark19.ul,
     {
       "data-slot": "sidebar-menu",
       "data-sidebar": "menu",
-      className: cn27(sidebarStyles9.menuClass, className),
+      className: cn28(sidebarStyles9.menuClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/MenuItem.tsx
-import { ark as ark19 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles10, cn as cn28 } from "@cloudvoyant/helix";
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { ark as ark20 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles10, cn as cn29 } from "@cloudvoyant/helix";
+import { jsx as jsx29 } from "react/jsx-runtime";
 function MenuItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx28(
-    ark19.li,
+  return /* @__PURE__ */ jsx29(
+    ark20.li,
     {
       "data-slot": "sidebar-menu-item",
       "data-sidebar": "menu-item",
-      className: cn28(sidebarStyles10.menuItemClass, className),
+      className: cn29(sidebarStyles10.menuItemClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/MenuButton.tsx
-import { ark as ark20 } from "@ark-ui/react/factory";
+import { ark as ark21 } from "@ark-ui/react/factory";
 import {
   TooltipRoot,
   TooltipTrigger,
   TooltipPositioner,
   TooltipContent as ArkTooltipContent
 } from "@ark-ui/react/tooltip";
-import { sidebarMenuButtonVariants, sidebarStyles as sidebarStyles11, cn as cn29 } from "@cloudvoyant/helix";
-import { jsx as jsx29, jsxs as jsxs5 } from "react/jsx-runtime";
+import { sidebarMenuButtonVariants, sidebarStyles as sidebarStyles11, cn as cn30 } from "@cloudvoyant/helix";
+import { jsx as jsx30, jsxs as jsxs5 } from "react/jsx-runtime";
 function MenuButton({
   asChild = false,
   isActive = false,
@@ -594,8 +655,8 @@ function MenuButton({
   ...props
 }) {
   const { isMobile, state } = useSidebar();
-  const button = /* @__PURE__ */ jsx29(
-    ark20.button,
+  const button = /* @__PURE__ */ jsx30(
+    ark21.button,
     {
       "data-slot": "sidebar-menu-button",
       "data-sidebar": "menu-button",
@@ -603,7 +664,7 @@ function MenuButton({
       "data-active": isActive,
       asChild,
       type: "button",
-      className: cn29(sidebarMenuButtonVariants({ variant, size }), className),
+      className: cn30(sidebarMenuButtonVariants({ variant, size }), className),
       ...props,
       children
     }
@@ -613,40 +674,40 @@ function MenuButton({
   }
   const tooltipContent = typeof tooltip === "string" ? { children: tooltip } : tooltip;
   return /* @__PURE__ */ jsxs5(TooltipRoot, { openDelay: 0, positioning: { placement: "right", gutter: 8 }, children: [
-    /* @__PURE__ */ jsx29(TooltipTrigger, { asChild: true, children: button }),
-    /* @__PURE__ */ jsx29(TooltipPositioner, { children: /* @__PURE__ */ jsx29(ArkTooltipContent, { className: cn29(sidebarStyles11.tooltipContentClass), ...tooltipContent }) })
+    /* @__PURE__ */ jsx30(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx30(TooltipPositioner, { children: /* @__PURE__ */ jsx30(ArkTooltipContent, { className: cn30(sidebarStyles11.tooltipContentClass), ...tooltipContent }) })
   ] });
 }
 
 // src/sidebar/MenuLink.tsx
-import { sidebarStyles as sidebarStyles12, cn as cn30 } from "@cloudvoyant/helix";
-import { Fragment, jsx as jsx30, jsxs as jsxs6 } from "react/jsx-runtime";
+import { sidebarStyles as sidebarStyles12, cn as cn31 } from "@cloudvoyant/helix";
+import { Fragment as Fragment2, jsx as jsx31, jsxs as jsxs6 } from "react/jsx-runtime";
 function MenuLink({ icon, href, onClick, isActive, variant, size, tooltip, className, children }) {
-  const content = /* @__PURE__ */ jsxs6(Fragment, { children: [
+  const content = /* @__PURE__ */ jsxs6(Fragment2, { children: [
     icon,
-    children != null && /* @__PURE__ */ jsx30("span", { children })
+    children != null && /* @__PURE__ */ jsx31("span", { children })
   ] });
-  return /* @__PURE__ */ jsx30("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn30(sidebarStyles12.menuItemClass), children: href != null ? /* @__PURE__ */ jsx30(MenuButton, { asChild: true, isActive, variant, size, tooltip, className, children: /* @__PURE__ */ jsx30("a", { href, onClick, children: content }) }) : /* @__PURE__ */ jsx30(MenuButton, { isActive, variant, size, tooltip, className, onClick, children: content }) });
+  return /* @__PURE__ */ jsx31("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn31(sidebarStyles12.menuItemClass), children: href != null ? /* @__PURE__ */ jsx31(MenuButton, { asChild: true, isActive, variant, size, tooltip, className, children: /* @__PURE__ */ jsx31("a", { href, onClick, children: content }) }) : /* @__PURE__ */ jsx31(MenuButton, { isActive, variant, size, tooltip, className, onClick, children: content }) });
 }
 
 // src/sidebar/MenuAction.tsx
-import { ark as ark21 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles13, cn as cn31 } from "@cloudvoyant/helix";
-import { jsx as jsx31 } from "react/jsx-runtime";
+import { ark as ark22 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles13, cn as cn32 } from "@cloudvoyant/helix";
+import { jsx as jsx32 } from "react/jsx-runtime";
 function MenuAction({
   className,
   asChild = false,
   showOnHover = false,
   ...props
 }) {
-  return /* @__PURE__ */ jsx31(
-    ark21.button,
+  return /* @__PURE__ */ jsx32(
+    ark22.button,
     {
       "data-slot": "sidebar-menu-action",
       "data-sidebar": "menu-action",
       asChild,
       type: "button",
-      className: cn31(
+      className: cn32(
         sidebarStyles13.menuActionClass,
         showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0",
         className
@@ -657,16 +718,16 @@ function MenuAction({
 }
 
 // src/sidebar/MenuBadge.tsx
-import { ark as ark22 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles14, cn as cn32 } from "@cloudvoyant/helix";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { ark as ark23 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles14, cn as cn33 } from "@cloudvoyant/helix";
+import { jsx as jsx33 } from "react/jsx-runtime";
 function MenuBadge({ className, ...props }) {
-  return /* @__PURE__ */ jsx32(
-    ark22.div,
+  return /* @__PURE__ */ jsx33(
+    ark23.div,
     {
       "data-slot": "sidebar-menu-badge",
       "data-sidebar": "menu-badge",
-      className: cn32(sidebarStyles14.menuBadgeClass, className),
+      className: cn33(sidebarStyles14.menuBadgeClass, className),
       ...props
     }
   );
@@ -674,28 +735,28 @@ function MenuBadge({ className, ...props }) {
 
 // src/sidebar/MenuSkeleton.tsx
 import * as React3 from "react";
-import { ark as ark23 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles15, cn as cn33 } from "@cloudvoyant/helix";
-import { jsx as jsx33, jsxs as jsxs7 } from "react/jsx-runtime";
+import { ark as ark24 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles15, cn as cn34 } from "@cloudvoyant/helix";
+import { jsx as jsx34, jsxs as jsxs7 } from "react/jsx-runtime";
 function MenuSkeleton({ className, showIcon = false, ...props }) {
   const width = React3.useMemo(() => `${Math.floor(Math.random() * 40) + 50}%`, []);
   return /* @__PURE__ */ jsxs7(
-    ark23.div,
+    ark24.div,
     {
       "data-slot": "sidebar-menu-skeleton",
       "data-sidebar": "menu-skeleton",
-      className: cn33(sidebarStyles15.menuSkeletonClass, className),
+      className: cn34(sidebarStyles15.menuSkeletonClass, className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx33(
-          ark23.div,
+        showIcon && /* @__PURE__ */ jsx34(
+          ark24.div,
           {
             className: "size-4 shrink-0 animate-pulse rounded-md bg-sidebar-accent",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ jsx33(
-          ark23.div,
+        /* @__PURE__ */ jsx34(
+          ark24.div,
           {
             className: "h-4 max-w-(--skeleton-width) flex-1 animate-pulse rounded-md bg-sidebar-accent",
             "data-sidebar": "menu-skeleton-text",
@@ -708,41 +769,41 @@ function MenuSkeleton({ className, showIcon = false, ...props }) {
 }
 
 // src/sidebar/MenuSub.tsx
-import { ark as ark24 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles16, cn as cn34 } from "@cloudvoyant/helix";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { ark as ark25 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles16, cn as cn35 } from "@cloudvoyant/helix";
+import { jsx as jsx35 } from "react/jsx-runtime";
 function MenuSub({ className, ...props }) {
-  return /* @__PURE__ */ jsx34(
-    ark24.ul,
+  return /* @__PURE__ */ jsx35(
+    ark25.ul,
     {
       "data-slot": "sidebar-menu-sub",
       "data-sidebar": "menu-sub",
-      className: cn34(sidebarStyles16.menuSubClass, className),
+      className: cn35(sidebarStyles16.menuSubClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/MenuSubItem.tsx
-import { ark as ark25 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles17, cn as cn35 } from "@cloudvoyant/helix";
-import { jsx as jsx35 } from "react/jsx-runtime";
+import { ark as ark26 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles17, cn as cn36 } from "@cloudvoyant/helix";
+import { jsx as jsx36 } from "react/jsx-runtime";
 function MenuSubItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx35(
-    ark25.li,
+  return /* @__PURE__ */ jsx36(
+    ark26.li,
     {
       "data-slot": "sidebar-menu-sub-item",
       "data-sidebar": "menu-sub-item",
-      className: cn35(sidebarStyles17.menuSubItemClass, className),
+      className: cn36(sidebarStyles17.menuSubItemClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/MenuSubButton.tsx
-import { ark as ark26 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles18, cn as cn36 } from "@cloudvoyant/helix";
-import { jsx as jsx36 } from "react/jsx-runtime";
+import { ark as ark27 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles18, cn as cn37 } from "@cloudvoyant/helix";
+import { jsx as jsx37 } from "react/jsx-runtime";
 function MenuSubButton({
   asChild = false,
   size = "md",
@@ -750,34 +811,34 @@ function MenuSubButton({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx36(
-    ark26.a,
+  return /* @__PURE__ */ jsx37(
+    ark27.a,
     {
       "data-slot": "sidebar-menu-sub-button",
       "data-sidebar": "menu-sub-button",
       "data-size": size,
       "data-active": isActive,
       asChild,
-      className: cn36(sidebarStyles18.menuSubButtonClass, className),
+      className: cn37(sidebarStyles18.menuSubButtonClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/Trigger.tsx
-import { ark as ark27 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles19, cn as cn37 } from "@cloudvoyant/helix";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { ark as ark28 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles19, cn as cn38 } from "@cloudvoyant/helix";
+import { jsx as jsx38 } from "react/jsx-runtime";
 function Trigger({ className, onClick, children, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx37(
-    ark27.button,
+  return /* @__PURE__ */ jsx38(
+    ark28.button,
     {
       "data-sidebar": "trigger",
       "data-slot": "sidebar-trigger",
       type: "button",
       "aria-label": "Toggle Sidebar",
-      className: cn37(sidebarStyles19.triggerClass, className),
+      className: cn38(sidebarStyles19.triggerClass, className),
       onClick: (event) => {
         onClick?.(event);
         toggleSidebar();
@@ -789,13 +850,13 @@ function Trigger({ className, onClick, children, ...props }) {
 }
 
 // src/sidebar/Rail.tsx
-import { ark as ark28 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles20, cn as cn38 } from "@cloudvoyant/helix";
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { ark as ark29 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles20, cn as cn39 } from "@cloudvoyant/helix";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function Rail({ className, ...props }) {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx38(
-    ark28.button,
+  return /* @__PURE__ */ jsx39(
+    ark29.button,
     {
       "data-sidebar": "rail",
       "data-slot": "sidebar-rail",
@@ -804,31 +865,31 @@ function Rail({ className, ...props }) {
       tabIndex: -1,
       onClick: toggleSidebar,
       title: "Toggle Sidebar",
-      className: cn38(sidebarStyles20.railClass, className),
+      className: cn39(sidebarStyles20.railClass, className),
       ...props
     }
   );
 }
 
 // src/sidebar/Inset.tsx
-import { ark as ark29 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles21, cn as cn39 } from "@cloudvoyant/helix";
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { ark as ark30 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles21, cn as cn40 } from "@cloudvoyant/helix";
+import { jsx as jsx40 } from "react/jsx-runtime";
 function Inset({ className, ...props }) {
-  return /* @__PURE__ */ jsx39(ark29.main, { "data-slot": "sidebar-inset", className: cn39(sidebarStyles21.insetClass, className), ...props });
+  return /* @__PURE__ */ jsx40(ark30.main, { "data-slot": "sidebar-inset", className: cn40(sidebarStyles21.insetClass, className), ...props });
 }
 
 // src/sidebar/Input.tsx
-import { ark as ark30 } from "@ark-ui/react/factory";
-import { sidebarStyles as sidebarStyles22, cn as cn40 } from "@cloudvoyant/helix";
-import { jsx as jsx40 } from "react/jsx-runtime";
+import { ark as ark31 } from "@ark-ui/react/factory";
+import { sidebarStyles as sidebarStyles22, cn as cn41 } from "@cloudvoyant/helix";
+import { jsx as jsx41 } from "react/jsx-runtime";
 function Input({ className, ...props }) {
-  return /* @__PURE__ */ jsx40(
-    ark30.input,
+  return /* @__PURE__ */ jsx41(
+    ark31.input,
     {
       "data-slot": "sidebar-input",
       "data-sidebar": "input",
-      className: cn40(sidebarStyles22.inputClass, className),
+      className: cn41(sidebarStyles22.inputClass, className),
       ...props
     }
   );
@@ -851,31 +912,31 @@ import {
   tabsIndicatorVariants,
   tabsTriggerBase,
   tabsContentBase,
-  cn as cn41
+  cn as cn42
 } from "@cloudvoyant/helix";
-import { jsx as jsx41, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs8 } from "react/jsx-runtime";
 function Tabs({ className, lazyMount = true, unmountOnExit = true, ...props }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     TabsRoot,
     {
       lazyMount,
       unmountOnExit,
-      className: cn41(tabsRootBase, className),
+      className: cn42(tabsRootBase, className),
       ...props
     }
   );
 }
 function TabsList({ variant = "default", className, children, ...props }) {
-  return /* @__PURE__ */ jsxs8(TabList, { className: cn41(tabsListBase, tabsListVariants({ variant }), className), ...props, children: [
+  return /* @__PURE__ */ jsxs8(TabList, { className: cn42(tabsListBase, tabsListVariants({ variant }), className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx41(TabIndicator, { className: cn41(tabsIndicatorBase, tabsIndicatorVariants({ variant })) })
+    /* @__PURE__ */ jsx42(TabIndicator, { className: cn42(tabsIndicatorBase, tabsIndicatorVariants({ variant })) })
   ] });
 }
 function TabsTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx41(TabTrigger, { className: cn41(tabsTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx42(TabTrigger, { className: cn42(tabsTriggerBase, className), ...props });
 }
 function TabsContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx41(TabContent, { className: cn41(tabsContentBase, className), ...props });
+  return /* @__PURE__ */ jsx42(TabContent, { className: cn42(tabsContentBase, className), ...props });
 }
 var useTabs = useTabsContext;
 
@@ -888,15 +949,15 @@ import {
   PaginationNextTrigger,
   PaginationEllipsis as ArkPaginationEllipsis
 } from "@ark-ui/react/pagination";
-import { ark as ark31 } from "@ark-ui/react/factory";
-import { paginationRootBase, paginationTriggerBase, paginationItemBase, paginationEllipsisBase, cn as cn42 } from "@cloudvoyant/helix";
-import { jsx as jsx42, jsxs as jsxs9 } from "react/jsx-runtime";
+import { ark as ark32 } from "@ark-ui/react/factory";
+import { paginationRootBase, paginationTriggerBase, paginationItemBase, paginationEllipsisBase, cn as cn43 } from "@cloudvoyant/helix";
+import { jsx as jsx43, jsxs as jsxs9 } from "react/jsx-runtime";
 function Pagination({ className, ...props }) {
-  return /* @__PURE__ */ jsx42(ArkPaginationRoot, { className: cn42(paginationRootBase, className), ...props });
+  return /* @__PURE__ */ jsx43(ArkPaginationRoot, { className: cn43(paginationRootBase, className), ...props });
 }
 function PaginationPrevious(props) {
-  return /* @__PURE__ */ jsx42(PaginationPrevTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs9(ark31.button, { className: cn42(paginationTriggerBase), children: [
-    /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(PaginationPrevTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs9(ark32.button, { className: cn43(paginationTriggerBase), children: [
+    /* @__PURE__ */ jsx43(
       "svg",
       {
         viewBox: "0 0 24 24",
@@ -906,16 +967,16 @@ function PaginationPrevious(props) {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx42("path", { d: "m15 18-6-6 6-6" })
+        children: /* @__PURE__ */ jsx43("path", { d: "m15 18-6-6 6-6" })
       }
     ),
     "Previous"
   ] }) });
 }
 function PaginationNext(props) {
-  return /* @__PURE__ */ jsx42(PaginationNextTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs9(ark31.button, { className: cn42(paginationTriggerBase), children: [
+  return /* @__PURE__ */ jsx43(PaginationNextTrigger, { asChild: true, ...props, children: /* @__PURE__ */ jsxs9(ark32.button, { className: cn43(paginationTriggerBase), children: [
     "Next",
-    /* @__PURE__ */ jsx42(
+    /* @__PURE__ */ jsx43(
       "svg",
       {
         viewBox: "0 0 24 24",
@@ -925,21 +986,21 @@ function PaginationNext(props) {
         strokeLinecap: "round",
         strokeLinejoin: "round",
         "aria-hidden": "true",
-        children: /* @__PURE__ */ jsx42("path", { d: "m9 18 6-6-6-6" })
+        children: /* @__PURE__ */ jsx43("path", { d: "m9 18 6-6-6-6" })
       }
     )
   ] }) });
 }
 function PaginationItem({ className, children, ...rest }) {
-  return /* @__PURE__ */ jsx42(ArkPaginationItem, { asChild: true, ...rest, children: /* @__PURE__ */ jsx42(ark31.button, { className: cn42(paginationItemBase, className), children }) });
+  return /* @__PURE__ */ jsx43(ArkPaginationItem, { asChild: true, ...rest, children: /* @__PURE__ */ jsx43(ark32.button, { className: cn43(paginationItemBase, className), children }) });
 }
 function PaginationItems() {
-  return /* @__PURE__ */ jsx42(ArkPaginationContext, { children: ({ pages }) => pages.map(
-    (page, index) => page.type === "page" ? /* @__PURE__ */ jsx42(PaginationItem, { type: "page", value: page.value, children: page.value }, page.value) : /* @__PURE__ */ jsx42(PaginationEllipsis, { index }, `ellipsis-${index}`)
+  return /* @__PURE__ */ jsx43(ArkPaginationContext, { children: ({ pages }) => pages.map(
+    (page, index) => page.type === "page" ? /* @__PURE__ */ jsx43(PaginationItem, { type: "page", value: page.value, children: page.value }, page.value) : /* @__PURE__ */ jsx43(PaginationEllipsis, { index }, `ellipsis-${index}`)
   ) });
 }
 function PaginationEllipsis({ className, ...rest }) {
-  return /* @__PURE__ */ jsx42(ArkPaginationEllipsis, { className: cn42(paginationEllipsisBase, className), ...rest, children: /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsx43(ArkPaginationEllipsis, { className: cn43(paginationEllipsisBase, className), ...rest, children: /* @__PURE__ */ jsxs9(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -950,9 +1011,9 @@ function PaginationEllipsis({ className, ...rest }) {
       strokeLinejoin: "round",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx42("circle", { cx: "12", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx42("circle", { cx: "19", cy: "12", r: "1" }),
-        /* @__PURE__ */ jsx42("circle", { cx: "5", cy: "12", r: "1" })
+        /* @__PURE__ */ jsx43("circle", { cx: "12", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx43("circle", { cx: "19", cy: "12", r: "1" }),
+        /* @__PURE__ */ jsx43("circle", { cx: "5", cy: "12", r: "1" })
       ]
     }
   ) });
@@ -960,7 +1021,7 @@ function PaginationEllipsis({ className, ...rest }) {
 
 // src/navbar.tsx
 import * as React4 from "react";
-import { ark as ark32 } from "@ark-ui/react/factory";
+import { ark as ark33 } from "@ark-ui/react/factory";
 import { Portal } from "@ark-ui/react/portal";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "@ark-ui/react/collapsible";
 import {
@@ -1009,10 +1070,10 @@ import {
   navbarMenuViewportPositionerBase,
   navbarMenuViewportBase,
   navbarMenuIndicatorBase,
-  cn as cn43
+  cn as cn44
 } from "@cloudvoyant/helix";
 import { navbarMenuTriggerStyle as navbarMenuTriggerStyle2 } from "@cloudvoyant/helix";
-import { Fragment as Fragment2, jsx as jsx43, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx44, jsxs as jsxs10 } from "react/jsx-runtime";
 var SCROLL_THRESHOLD = 24;
 function resolveScrollContainer(el) {
   for (let n = el; n; n = n.parentElement) {
@@ -1075,7 +1136,7 @@ function NavbarProvider({
     }),
     [id, open, scrolled, hovered, slots, setSlot]
   );
-  return /* @__PURE__ */ jsx43(NavbarContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx44(NavbarContext.Provider, { value: contextValue, children });
 }
 function Navbar({
   variant = "sticky",
@@ -1114,7 +1175,7 @@ function Navbar({
       el.style.overflow = prev;
     };
   }, [base.open]);
-  return /* @__PURE__ */ jsx43(NavbarContext.Provider, { value, children: /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(NavbarContext.Provider, { value, children: /* @__PURE__ */ jsx44(
     "header",
     {
       ref: headerRef,
@@ -1122,7 +1183,7 @@ function Navbar({
       "data-scrolled": base.scrolled || void 0,
       "data-hidden": hidden || void 0,
       "data-shrunk": shrunk || void 0,
-      className: cn43(
+      className: cn44(
         navbarVariants({ variant, floating }),
         navbarContainerBase,
         navbarDensityVariants({ density }),
@@ -1138,11 +1199,11 @@ function Navbar({
 }
 function NavbarActivationArea({ className, children, ...props }) {
   const { setHovered } = useNavbar();
-  return /* @__PURE__ */ jsx43(
-    ark32.div,
+  return /* @__PURE__ */ jsx44(
+    ark33.div,
     {
       "data-slot": "navbar-activation-area",
-      className: cn43(navbarActivationAreaBase, className),
+      className: cn44(navbarActivationAreaBase, className),
       onMouseEnter: () => setHovered(true),
       onMouseLeave: () => setHovered(false),
       ...props,
@@ -1152,7 +1213,7 @@ function NavbarActivationArea({ className, children, ...props }) {
 }
 function NavbarBrand({ className, children, ...props }) {
   useNavbarSlot("brand", children);
-  return /* @__PURE__ */ jsx43(ark32.div, { "data-slot": "navbar-brand", className: cn43(navbarBrandBase, className), ...props, children });
+  return /* @__PURE__ */ jsx44(ark33.div, { "data-slot": "navbar-brand", className: cn44(navbarBrandBase, className), ...props, children });
 }
 function NavbarMenu({
   placement = "center",
@@ -1162,21 +1223,21 @@ function NavbarMenu({
 }) {
   const { scrolled, density, variant } = useNavbar();
   const menuDensity = density === "compact" || variant === "shrink" && scrolled ? "compact" : "relaxed";
-  return /* @__PURE__ */ jsx43(NavbarMenuStyleContext.Provider, { value: { density: menuDensity, variant: "default", inContent: false }, children: /* @__PURE__ */ jsx43(
-    ark32.div,
+  return /* @__PURE__ */ jsx44(NavbarMenuStyleContext.Provider, { value: { density: menuDensity, variant: "default", inContent: false }, children: /* @__PURE__ */ jsx44(
+    ark33.div,
     {
       "data-slot": "navbar-menu",
       "data-placement": placement,
-      className: cn43(navbarMenuBase, navbarMenuPlacementVariants({ placement }), className),
-      children: /* @__PURE__ */ jsxs10(ArkNavMenuRoot, { "data-density": menuDensity, className: cn43(navbarMenuRootBase), ...props, children: [
+      className: cn44(navbarMenuBase, navbarMenuPlacementVariants({ placement }), className),
+      children: /* @__PURE__ */ jsxs10(ArkNavMenuRoot, { "data-density": menuDensity, className: cn44(navbarMenuRootBase), ...props, children: [
         children,
-        /* @__PURE__ */ jsx43(ArkNavMenuViewportPositioner, { className: cn43(navbarMenuViewportPositionerBase), children: /* @__PURE__ */ jsx43(ArkNavMenuViewport, { className: cn43(navbarMenuViewportBase) }) })
+        /* @__PURE__ */ jsx44(ArkNavMenuViewportPositioner, { className: cn44(navbarMenuViewportPositionerBase), children: /* @__PURE__ */ jsx44(ArkNavMenuViewport, { className: cn44(navbarMenuViewportBase) }) })
       ] })
     }
   ) });
 }
 function NavbarMenuList({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx43(ArkNavMenuList, { className: cn43(navbarMenuListBase, className), ...props, children });
+  return /* @__PURE__ */ jsx44(ArkNavMenuList, { className: cn44(navbarMenuListBase, className), ...props, children });
 }
 function NavbarMenuItem({
   variant = "default",
@@ -1184,11 +1245,11 @@ function NavbarMenuItem({
   ...props
 }) {
   const { density } = React4.useContext(NavbarMenuStyleContext);
-  return /* @__PURE__ */ jsx43(NavbarMenuStyleContext.Provider, { value: { density, variant, inContent: false }, children: /* @__PURE__ */ jsx43(ArkNavMenuItem, { "data-variant": variant, className: cn43(navbarMenuItemBase, className), ...props }) });
+  return /* @__PURE__ */ jsx44(NavbarMenuStyleContext.Provider, { value: { density, variant, inContent: false }, children: /* @__PURE__ */ jsx44(ArkNavMenuItem, { "data-variant": variant, className: cn44(navbarMenuItemBase, className), ...props }) });
 }
 function NavbarMenuTrigger({ asChild, className, children, ...props }) {
   const { density, variant } = React4.useContext(NavbarMenuStyleContext);
-  const chevron = /* @__PURE__ */ jsx43(
+  const chevron = /* @__PURE__ */ jsx44(
     "svg",
     {
       className: "relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180",
@@ -1199,36 +1260,36 @@ function NavbarMenuTrigger({ asChild, className, children, ...props }) {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      children: /* @__PURE__ */ jsx43("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx44("path", { d: "m6 9 6 6 6-6" })
     }
   );
-  return /* @__PURE__ */ jsx43(ArkNavMenuTrigger, { asChild, className: cn43(navbarMenuTriggerStyle({ density, variant }), className), ...props, children: asChild ? children : /* @__PURE__ */ jsxs10(Fragment2, { children: [
+  return /* @__PURE__ */ jsx44(ArkNavMenuTrigger, { asChild, className: cn44(navbarMenuTriggerStyle({ density, variant }), className), ...props, children: asChild ? children : /* @__PURE__ */ jsxs10(Fragment3, { children: [
     children,
     chevron
   ] }) });
 }
 function NavbarMenuContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx43(NavbarMenuStyleContext.Provider, { value: { density: "relaxed", variant: "default", inContent: true }, children: /* @__PURE__ */ jsx43(ArkNavMenuContent, { className: cn43(navbarMenuContentBase, className), ...props, children }) });
+  return /* @__PURE__ */ jsx44(NavbarMenuStyleContext.Provider, { value: { density: "relaxed", variant: "default", inContent: true }, children: /* @__PURE__ */ jsx44(ArkNavMenuContent, { className: cn44(navbarMenuContentBase, className), ...props, children }) });
 }
 function NavbarMenuLink({ className, children, ...props }) {
   const { density, variant, inContent } = React4.useContext(NavbarMenuStyleContext);
-  const classes = inContent ? cn43(navbarMenuLinkBase, className) : cn43(navbarMenuTriggerStyle({ density, variant }), className);
-  return /* @__PURE__ */ jsx43(ArkNavMenuLink, { className: classes, ...props, children });
+  const classes = inContent ? cn44(navbarMenuLinkBase, className) : cn44(navbarMenuTriggerStyle({ density, variant }), className);
+  return /* @__PURE__ */ jsx44(ArkNavMenuLink, { className: classes, ...props, children });
 }
 function NavbarMobileMenu({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx43(CollapsibleRoot, { "data-slot": "navbar-mobile-menu", className: cn43("group", className), ...props, children });
+  return /* @__PURE__ */ jsx44(CollapsibleRoot, { "data-slot": "navbar-mobile-menu", className: cn44("group", className), ...props, children });
 }
 function NavbarMobileMenuTrigger({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx43(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsx44(CollapsibleTrigger, { asChild: true, children: /* @__PURE__ */ jsxs10(
     "button",
     {
       type: "button",
       "data-slot": "navbar-mobile-menu-trigger",
-      className: cn43(navbarMobileMenuTriggerBase, className),
+      className: cn44(navbarMobileMenuTriggerBase, className),
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "svg",
           {
             className: "size-4 transition-transform duration-200 group-data-[state=open]:rotate-180",
@@ -1239,7 +1300,7 @@ function NavbarMobileMenuTrigger({ className, children, ...props }) {
             strokeWidth: "2",
             strokeLinecap: "round",
             strokeLinejoin: "round",
-            children: /* @__PURE__ */ jsx43("path", { d: "m6 9 6 6 6-6" })
+            children: /* @__PURE__ */ jsx44("path", { d: "m6 9 6 6 6-6" })
           }
         )
       ]
@@ -1247,17 +1308,17 @@ function NavbarMobileMenuTrigger({ className, children, ...props }) {
   ) });
 }
 function NavbarMobileMenuContent({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx43(CollapsibleContent, { children: /* @__PURE__ */ jsx43("div", { "data-slot": "navbar-mobile-menu-content", className: cn43(navbarMobileMenuContentBase, className), ...props, children }) });
+  return /* @__PURE__ */ jsx44(CollapsibleContent, { children: /* @__PURE__ */ jsx44("div", { "data-slot": "navbar-mobile-menu-content", className: cn44(navbarMobileMenuContentBase, className), ...props, children }) });
 }
 function NavbarMenuViewport({ className, ...props }) {
-  return /* @__PURE__ */ jsx43(ArkNavMenuViewport, { className: cn43(navbarMenuViewportBase, className), ...props });
+  return /* @__PURE__ */ jsx44(ArkNavMenuViewport, { className: cn44(navbarMenuViewportBase, className), ...props });
 }
 function NavbarMenuIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx43(ArkNavMenuIndicator, { className: cn43(navbarMenuIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx44(ArkNavMenuIndicator, { className: cn44(navbarMenuIndicatorBase, className), ...props });
 }
 function NavbarActions({ className, children, ...props }) {
   useNavbarSlot("actions", children);
-  return /* @__PURE__ */ jsx43(ark32.div, { "data-slot": "navbar-actions", className: cn43(navbarActionsBase, className), ...props, children });
+  return /* @__PURE__ */ jsx44(ark33.div, { "data-slot": "navbar-actions", className: cn44(navbarActionsBase, className), ...props, children });
 }
 function NavbarTrigger({
   className,
@@ -1266,7 +1327,7 @@ function NavbarTrigger({
   ...props
 }) {
   const { id, open, setOpen, floating } = useNavbar();
-  return /* @__PURE__ */ jsx43(
+  return /* @__PURE__ */ jsx44(
     "button",
     {
       type: "button",
@@ -1274,7 +1335,7 @@ function NavbarTrigger({
       "aria-expanded": open,
       "aria-controls": id,
       "aria-label": ariaLabel ?? "Toggle navigation menu",
-      className: cn43(navbarTriggerVariants({ floating }), "md:hidden", className),
+      className: cn44(navbarTriggerVariants({ floating }), "md:hidden", className),
       onClick: () => setOpen(!open),
       ...props,
       children: children ?? /* @__PURE__ */ jsxs10(
@@ -1289,9 +1350,9 @@ function NavbarTrigger({
           strokeLinejoin: "round",
           "aria-hidden": "true",
           children: [
-            /* @__PURE__ */ jsx43("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
-            /* @__PURE__ */ jsx43("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
-            /* @__PURE__ */ jsx43("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
+            /* @__PURE__ */ jsx44("line", { x1: "4", x2: "20", y1: "6", y2: "6" }),
+            /* @__PURE__ */ jsx44("line", { x1: "4", x2: "20", y1: "12", y2: "12" }),
+            /* @__PURE__ */ jsx44("line", { x1: "4", x2: "20", y1: "18", y2: "18" })
           ]
         }
       )
@@ -1308,14 +1369,14 @@ function NavbarMobileOverlay({ className, children, ...props }) {
     document.addEventListener("keydown", onKeydown);
     return () => document.removeEventListener("keydown", onKeydown);
   }, [open, setOpen]);
-  return /* @__PURE__ */ jsx43(Portal, { container: portalRef, children: /* @__PURE__ */ jsxs10(DialogRoot, { open, lazyMount: true, unmountOnExit: true, onOpenChange: ({ open: open2 }) => setOpen(open2), preventScroll: false, children: [
-    /* @__PURE__ */ jsx43(DialogBackdrop, { className: "absolute inset-0 z-[100] bg-background/60 backdrop-blur-sm" }),
-    /* @__PURE__ */ jsx43(DialogPositioner, { className: "absolute inset-0 z-[100]", children: /* @__PURE__ */ jsxs10(DialogContent, { id, "data-slot": "navbar-mobile-overlay", className: cn43(navbarMobileContentBase, className), ...props, children: [
-      /* @__PURE__ */ jsx43(DialogTitle, { className: "sr-only", children: "Navigation menu" }),
-      /* @__PURE__ */ jsx43(DialogDescription, { className: "sr-only", children: "Mobile navigation menu" }),
+  return /* @__PURE__ */ jsx44(Portal, { container: portalRef, children: /* @__PURE__ */ jsxs10(DialogRoot, { open, lazyMount: true, unmountOnExit: true, onOpenChange: ({ open: open2 }) => setOpen(open2), preventScroll: false, children: [
+    /* @__PURE__ */ jsx44(DialogBackdrop, { className: "absolute inset-0 z-[100] bg-background/60 backdrop-blur-sm" }),
+    /* @__PURE__ */ jsx44(DialogPositioner, { className: "absolute inset-0 z-[100]", children: /* @__PURE__ */ jsxs10(DialogContent, { id, "data-slot": "navbar-mobile-overlay", className: cn44(navbarMobileContentBase, className), ...props, children: [
+      /* @__PURE__ */ jsx44(DialogTitle, { className: "sr-only", children: "Navigation menu" }),
+      /* @__PURE__ */ jsx44(DialogDescription, { className: "sr-only", children: "Mobile navigation menu" }),
       /* @__PURE__ */ jsxs10("div", { className: navbarMobileHeaderBase, children: [
         slots.brand,
-        /* @__PURE__ */ jsx43(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx43("button", { type: "button", "aria-label": "Close navigation menu", className: cn43(navbarTriggerVariants({ floating })), children: /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(DialogCloseTrigger, { asChild: true, children: /* @__PURE__ */ jsx44("button", { type: "button", "aria-label": "Close navigation menu", className: cn44(navbarTriggerVariants({ floating })), children: /* @__PURE__ */ jsx44(
           "svg",
           {
             className: "size-4",
@@ -1326,12 +1387,12 @@ function NavbarMobileOverlay({ className, children, ...props }) {
             strokeLinecap: "round",
             strokeLinejoin: "round",
             "aria-hidden": "true",
-            children: /* @__PURE__ */ jsx43("path", { d: "M18 6 6 18M6 6l12 12" })
+            children: /* @__PURE__ */ jsx44("path", { d: "M18 6 6 18M6 6l12 12" })
           }
         ) }) })
       ] }),
-      /* @__PURE__ */ jsx43("div", { className: navbarMobileMenuBase, children }),
-      slots.actions ? /* @__PURE__ */ jsx43("div", { className: navbarMobileActionsBase, children: slots.actions }) : null
+      /* @__PURE__ */ jsx44("div", { className: navbarMobileMenuBase, children }),
+      slots.actions ? /* @__PURE__ */ jsx44("div", { className: navbarMobileActionsBase, children: slots.actions }) : null
     ] }) })
   ] }) });
 }
@@ -1361,52 +1422,52 @@ import {
   fieldsetLegendBase,
   fieldsetHelperBase,
   fieldsetErrorBase,
-  cn as cn44
+  cn as cn45
 } from "@cloudvoyant/helix";
-import { jsx as jsx44 } from "react/jsx-runtime";
+import { jsx as jsx45 } from "react/jsx-runtime";
 function Field({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldRoot, { className: cn44(fieldRootBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldRoot, { className: cn45(fieldRootBase, className), ...props });
 }
 function FieldLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldLabel, { className: cn44(fieldLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldLabel, { className: cn45(fieldLabelBase, className), ...props });
 }
 function FieldHelper({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldHelperText, { className: cn44(fieldHelperBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldHelperText, { className: cn45(fieldHelperBase, className), ...props });
 }
 function FieldError({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldErrorText, { className: cn44(fieldErrorBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldErrorText, { className: cn45(fieldErrorBase, className), ...props });
 }
 function FieldRequiredIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldRequiredIndicator, { className: cn44(fieldRequiredIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldRequiredIndicator, { className: cn45(fieldRequiredIndicatorBase, className), ...props });
 }
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldsetRoot, { className: cn44(fieldsetRootBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldsetRoot, { className: cn45(fieldsetRootBase, className), ...props });
 }
 function FieldSetLegend({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldsetLegend, { className: cn44(fieldsetLegendBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldsetLegend, { className: cn45(fieldsetLegendBase, className), ...props });
 }
 function FieldSetHelper({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldsetHelperText, { className: cn44(fieldsetHelperBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldsetHelperText, { className: cn45(fieldsetHelperBase, className), ...props });
 }
 function FieldSetError({ className, ...props }) {
-  return /* @__PURE__ */ jsx44(ArkFieldsetErrorText, { className: cn44(fieldsetErrorBase, className), ...props });
+  return /* @__PURE__ */ jsx45(ArkFieldsetErrorText, { className: cn45(fieldsetErrorBase, className), ...props });
 }
 var useField = useFieldContext;
 
 // src/input.tsx
 import { FieldInput } from "@ark-ui/react/field";
-import { inputVariants, cn as cn45 } from "@cloudvoyant/helix";
-import { jsx as jsx45 } from "react/jsx-runtime";
+import { inputVariants, cn as cn46 } from "@cloudvoyant/helix";
+import { jsx as jsx46 } from "react/jsx-runtime";
 function Input2({ className, size, ...props }) {
-  return /* @__PURE__ */ jsx45(FieldInput, { className: cn45(inputVariants({ size }), className), ...props });
+  return /* @__PURE__ */ jsx46(FieldInput, { className: cn46(inputVariants({ size }), className), ...props });
 }
 
 // src/textarea.tsx
 import { FieldTextarea } from "@ark-ui/react/field";
-import { textareaBase, cn as cn46 } from "@cloudvoyant/helix";
-import { jsx as jsx46 } from "react/jsx-runtime";
+import { textareaBase, cn as cn47 } from "@cloudvoyant/helix";
+import { jsx as jsx47 } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
-  return /* @__PURE__ */ jsx46(FieldTextarea, { className: cn46(textareaBase, className), ...props });
+  return /* @__PURE__ */ jsx47(FieldTextarea, { className: cn47(textareaBase, className), ...props });
 }
 
 // src/number-input.tsx
@@ -1423,23 +1484,23 @@ import {
   numberInputControlBase,
   numberInputInputBase,
   numberInputTriggerBase,
-  cn as cn47
+  cn as cn48
 } from "@cloudvoyant/helix";
-import { jsx as jsx47 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 function NumberInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(ArkNumberInputRoot, { className: cn47(numberInputRootBase, className), ...props });
+  return /* @__PURE__ */ jsx48(ArkNumberInputRoot, { className: cn48(numberInputRootBase, className), ...props });
 }
 function NumberInputControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(ArkNumberInputControl, { className: cn47(numberInputControlBase, className), ...props });
+  return /* @__PURE__ */ jsx48(ArkNumberInputControl, { className: cn48(numberInputControlBase, className), ...props });
 }
 function NumberInputInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(ArkNumberInputInput, { className: cn47(numberInputInputBase, className), ...props });
+  return /* @__PURE__ */ jsx48(ArkNumberInputInput, { className: cn48(numberInputInputBase, className), ...props });
 }
 function NumberInputDecrement({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(ArkNumberInputDecrementTrigger, { "aria-label": "Decrement", className: cn47(numberInputTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx48(ArkNumberInputDecrementTrigger, { "aria-label": "Decrement", className: cn48(numberInputTriggerBase, className), ...props });
 }
 function NumberInputIncrement({ className, ...props }) {
-  return /* @__PURE__ */ jsx47(ArkNumberInputIncrementTrigger, { "aria-label": "Increment", className: cn47(numberInputTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx48(ArkNumberInputIncrementTrigger, { "aria-label": "Increment", className: cn48(numberInputTriggerBase, className), ...props });
 }
 var useNumberInput = useNumberInputContext;
 
@@ -1454,27 +1515,27 @@ import {
   CheckboxHiddenInput as ArkCheckboxHiddenInput,
   useCheckboxContext
 } from "@ark-ui/react/checkbox";
-import { checkboxVariants, checkboxIndicatorBase, checkboxLabelBase, checkboxGroupBase, cn as cn48 } from "@cloudvoyant/helix";
-import { jsx as jsx48, jsxs as jsxs11 } from "react/jsx-runtime";
+import { checkboxVariants, checkboxIndicatorBase, checkboxLabelBase, checkboxGroupBase, cn as cn49 } from "@cloudvoyant/helix";
+import { jsx as jsx49, jsxs as jsxs11 } from "react/jsx-runtime";
 var CheckboxSizeContext = createContext4("md");
 function Checkbox({ className, size = "md", children, ...props }) {
-  return /* @__PURE__ */ jsx48(CheckboxSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs11(ArkCheckboxRoot, { className: cn48("flex items-center gap-2", className), ...props, children: [
+  return /* @__PURE__ */ jsx49(CheckboxSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs11(ArkCheckboxRoot, { className: cn49("flex items-center gap-2", className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx48(ArkCheckboxHiddenInput, {})
+    /* @__PURE__ */ jsx49(ArkCheckboxHiddenInput, {})
   ] }) });
 }
 function CheckboxControl({ className, ...props }) {
   const size = useContext4(CheckboxSizeContext);
-  return /* @__PURE__ */ jsx48(ArkCheckboxControl, { className: cn48(checkboxVariants({ size }), className), ...props });
+  return /* @__PURE__ */ jsx49(ArkCheckboxControl, { className: cn49(checkboxVariants({ size }), className), ...props });
 }
 function CheckboxIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx48(ArkCheckboxIndicator, { className: cn48(checkboxIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx49(ArkCheckboxIndicator, { className: cn49(checkboxIndicatorBase, className), ...props });
 }
 function CheckboxLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx48(ArkCheckboxLabel, { className: cn48(checkboxLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx49(ArkCheckboxLabel, { className: cn49(checkboxLabelBase, className), ...props });
 }
 function CheckboxGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx48(ArkCheckboxGroup, { className: cn48(checkboxGroupBase, className), ...props });
+  return /* @__PURE__ */ jsx49(ArkCheckboxGroup, { className: cn49(checkboxGroupBase, className), ...props });
 }
 var useCheckbox = useCheckboxContext;
 
@@ -1488,29 +1549,29 @@ import {
   SwitchHiddenInput as ArkSwitchHiddenInput,
   useSwitchContext
 } from "@ark-ui/react/switch";
-import { switchVariants, switchControlBase, switchThumbBase, switchLabelBase, cn as cn49 } from "@cloudvoyant/helix";
-import { jsx as jsx49, jsxs as jsxs12 } from "react/jsx-runtime";
+import { switchVariants, switchControlBase, switchThumbBase, switchLabelBase, cn as cn50 } from "@cloudvoyant/helix";
+import { jsx as jsx50, jsxs as jsxs12 } from "react/jsx-runtime";
 var SwitchSizeContext = createContext5("md");
 function Switch({ className, size = "md", children, ...props }) {
-  return /* @__PURE__ */ jsx49(SwitchSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs12(ArkSwitchRoot, { className: cn49("flex items-center gap-2", className), ...props, children: [
+  return /* @__PURE__ */ jsx50(SwitchSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsxs12(ArkSwitchRoot, { className: cn50("flex items-center gap-2", className), ...props, children: [
     children,
-    /* @__PURE__ */ jsx49(ArkSwitchHiddenInput, {})
+    /* @__PURE__ */ jsx50(ArkSwitchHiddenInput, {})
   ] }) });
 }
 function SwitchControl({ className, ...props }) {
   const size = useContext5(SwitchSizeContext);
-  return /* @__PURE__ */ jsx49(ArkSwitchControl, { className: cn49(switchVariants({ size }), switchControlBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkSwitchControl, { className: cn50(switchVariants({ size }), switchControlBase, className), ...props });
 }
 function SwitchThumb({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkSwitchThumb, { className: cn49(switchThumbBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkSwitchThumb, { className: cn50(switchThumbBase, className), ...props });
 }
 function SwitchLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx49(ArkSwitchLabel, { className: cn49(switchLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx50(ArkSwitchLabel, { className: cn50(switchLabelBase, className), ...props });
 }
 var useSwitch = useSwitchContext;
 
 // src/select.tsx
-import { ark as ark33 } from "@ark-ui/react/factory";
+import { ark as ark34 } from "@ark-ui/react/factory";
 import { Portal as Portal2 } from "@ark-ui/react/portal";
 import { useMemo as useMemo4 } from "react";
 import {
@@ -1545,7 +1606,7 @@ import {
   nativeSelectVariants,
   nativeSelectWrapperBase,
   nativeSelectIconBase,
-  cn as cn50
+  cn as cn51
 } from "@cloudvoyant/helix";
 
 // src/use-media-query.ts
@@ -1563,7 +1624,7 @@ function useMediaQuery(query) {
 }
 
 // src/select.tsx
-import { jsx as jsx50, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs13 } from "react/jsx-runtime";
 function Select({ items, collection, size, children, ...props }) {
   const isCoarse = useMediaQuery("(pointer: coarse)");
   const resolvedCollection = useMemo4(
@@ -1571,7 +1632,7 @@ function Select({ items, collection, size, children, ...props }) {
     [collection, items]
   );
   if (isCoarse && items) {
-    return /* @__PURE__ */ jsx50(
+    return /* @__PURE__ */ jsx51(
       SelectNative,
       {
         items,
@@ -1589,42 +1650,42 @@ function Select({ items, collection, size, children, ...props }) {
   }
   return /* @__PURE__ */ jsxs13(ArkSelectRoot, { collection: resolvedCollection, ...props, children: [
     children,
-    /* @__PURE__ */ jsx50(ArkSelectHiddenSelect, {})
+    /* @__PURE__ */ jsx51(ArkSelectHiddenSelect, {})
   ] });
 }
 function SelectTrigger({ size = "md", className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectTrigger, { className: cn50(inputVariants2({ size }), selectTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectTrigger, { className: cn51(inputVariants2({ size }), selectTriggerBase, className), ...props });
 }
 function SelectValue({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectValueText, { className: cn50(selectValueBase, className), ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectValueText, { className: cn51(selectValueBase, className), ...props });
 }
 function SelectIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectIndicator, { className: cn50(selectIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectIndicator, { className: cn51(selectIndicatorBase, className), ...props });
 }
 function SelectClearTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectClearTrigger, { "aria-label": "Clear selection", className: cn50(selectClearTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectClearTrigger, { "aria-label": "Clear selection", className: cn51(selectClearTriggerBase, className), ...props });
 }
 function SelectContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(Portal2, { children: /* @__PURE__ */ jsx50(ArkSelectPositioner, { className: selectPositionerBase, children: /* @__PURE__ */ jsx50(ArkSelectContent, { className: cn50(selectContentBase, className), ...props }) }) });
+  return /* @__PURE__ */ jsx51(Portal2, { children: /* @__PURE__ */ jsx51(ArkSelectPositioner, { className: selectPositionerBase, children: /* @__PURE__ */ jsx51(ArkSelectContent, { className: cn51(selectContentBase, className), ...props }) }) });
 }
 function SelectItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectItemGroup, { className, ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectItemGroup, { className, ...props });
 }
 function SelectItemGroupLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectItemGroupLabel, { className: cn50(selectItemGroupLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectItemGroupLabel, { className: cn51(selectItemGroupLabelBase, className), ...props });
 }
 function SelectItem({ item, className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectItem, { item, className: cn50(selectItemBase, className), ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectItem, { item, className: cn51(selectItemBase, className), ...props });
 }
 function SelectItemText({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectItemText, { className: cn50(selectItemTextBase, className), ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectItemText, { className: cn51(selectItemTextBase, className), ...props });
 }
 function SelectItemIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx50(ArkSelectItemIndicator, { className: cn50(selectItemIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx51(ArkSelectItemIndicator, { className: cn51(selectItemIndicatorBase, className), ...props });
 }
 var useSelect = useSelectContext;
 function ChevronDownIcon() {
-  return /* @__PURE__ */ jsx50(
+  return /* @__PURE__ */ jsx51(
     "svg",
     {
       viewBox: "0 0 24 24",
@@ -1634,7 +1695,7 @@ function ChevronDownIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       "aria-hidden": true,
-      children: /* @__PURE__ */ jsx50("path", { d: "m6 9 6 6 6-6" })
+      children: /* @__PURE__ */ jsx51("path", { d: "m6 9 6 6 6-6" })
     }
   );
 }
@@ -1649,9 +1710,9 @@ function SelectNative({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs13(ark33.div, { className: cn50(nativeSelectWrapperBase, className), children: [
-    /* @__PURE__ */ jsx50(
-      ark33.select,
+  return /* @__PURE__ */ jsxs13(ark34.div, { className: cn51(nativeSelectWrapperBase, className), children: [
+    /* @__PURE__ */ jsx51(
+      ark34.select,
       {
         className: nativeSelectVariants({ size }),
         value,
@@ -1659,10 +1720,10 @@ function SelectNative({
         onChange: (event) => onValueChange?.(event.currentTarget.value),
         "aria-invalid": invalid,
         ...props,
-        children: items.map((item) => /* @__PURE__ */ jsx50(ark33.option, { value: item.value, disabled: item.disabled, children: item.label }, item.value))
+        children: items.map((item) => /* @__PURE__ */ jsx51(ark34.option, { value: item.value, disabled: item.disabled, children: item.label }, item.value))
       }
     ),
-    /* @__PURE__ */ jsx50(ark33.span, { className: nativeSelectIconBase, "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx50(ChevronDownIcon, {}) })
+    /* @__PURE__ */ jsx51(ark34.span, { className: nativeSelectIconBase, "aria-hidden": true, children: icon ?? /* @__PURE__ */ jsx51(ChevronDownIcon, {}) })
   ] });
 }
 
@@ -1700,9 +1761,9 @@ import {
   comboboxItemIndicatorBase,
   comboboxListBase,
   comboboxEmptyBase,
-  cn as cn51
+  cn as cn52
 } from "@cloudvoyant/helix";
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx52 } from "react/jsx-runtime";
 function Combobox({
   items,
   collection,
@@ -1715,7 +1776,7 @@ function Combobox({
     () => collection ?? createListCollection2({ items: items ?? [] }),
     [collection, items]
   );
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     ArkComboboxRoot,
     {
       collection: resolvedCollection,
@@ -1727,40 +1788,40 @@ function Combobox({
   );
 }
 function ComboboxControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxControl, { className: cn51(comboboxControlBase, className), ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxControl, { className: cn52(comboboxControlBase, className), ...props });
 }
 function ComboboxInput({ size = "md", className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxInput, { className: cn51(inputVariants3({ size }), comboboxInputBase, className), ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxInput, { className: cn52(inputVariants3({ size }), comboboxInputBase, className), ...props });
 }
 function ComboboxTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxTrigger, { className: cn51(comboboxTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxTrigger, { className: cn52(comboboxTriggerBase, className), ...props });
 }
 function ComboboxClear({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxClearTrigger, { "aria-label": "Clear", className: cn51(comboboxClearTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxClearTrigger, { "aria-label": "Clear", className: cn52(comboboxClearTriggerBase, className), ...props });
 }
 function ComboboxContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(Portal3, { children: /* @__PURE__ */ jsx51(ArkComboboxPositioner, { className: comboboxPositionerBase, children: /* @__PURE__ */ jsx51(ArkComboboxContent, { className: cn51(comboboxContentBase, className), ...props }) }) });
+  return /* @__PURE__ */ jsx52(Portal3, { children: /* @__PURE__ */ jsx52(ArkComboboxPositioner, { className: comboboxPositionerBase, children: /* @__PURE__ */ jsx52(ArkComboboxContent, { className: cn52(comboboxContentBase, className), ...props }) }) });
 }
 function ComboboxItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxItemGroup, { className, ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxItemGroup, { className, ...props });
 }
 function ComboboxItemGroupLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxItemGroupLabel, { className: cn51(comboboxItemGroupLabelBase, className), ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxItemGroupLabel, { className: cn52(comboboxItemGroupLabelBase, className), ...props });
 }
 function ComboboxItem({ item, showIndicator = true, className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxItem, { item, persistFocus: true, className: cn51(comboboxItemVariants({ showIndicator }), className), ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxItem, { item, persistFocus: true, className: cn52(comboboxItemVariants({ showIndicator }), className), ...props });
 }
 function ComboboxItemText({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxItemText, { className, ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxItemText, { className, ...props });
 }
 function ComboboxItemIndicator({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxItemIndicator, { className: cn51(comboboxItemIndicatorBase, className), ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxItemIndicator, { className: cn52(comboboxItemIndicatorBase, className), ...props });
 }
 function ComboboxList({ className, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxList, { className: cn51(comboboxListBase, className), ...props });
+  return /* @__PURE__ */ jsx52(ArkComboboxList, { className: cn52(comboboxListBase, className), ...props });
 }
 function ComboboxEmpty({ className, children, ...props }) {
-  return /* @__PURE__ */ jsx51(ArkComboboxEmpty, { className: cn51(comboboxEmptyBase, className), ...props, children: children ?? "No results found." });
+  return /* @__PURE__ */ jsx52(ArkComboboxEmpty, { className: cn52(comboboxEmptyBase, className), ...props, children: children ?? "No results found." });
 }
 var useCombobox = useComboboxContext;
 
@@ -1788,38 +1849,38 @@ import {
   tagsInputItemInputBase,
   tagsInputItemDeleteTriggerBase,
   tagsInputClearTriggerBase,
-  cn as cn52
+  cn as cn53
 } from "@cloudvoyant/helix";
-import { jsx as jsx52, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs14 } from "react/jsx-runtime";
 function TagInput({ className, editable = false, children, ...props }) {
-  return /* @__PURE__ */ jsxs14(ArkTagsInputRoot, { className: cn52(tagsInputRootBase, className), editable, ...props, children: [
+  return /* @__PURE__ */ jsxs14(ArkTagsInputRoot, { className: cn53(tagsInputRootBase, className), editable, ...props, children: [
     children,
-    /* @__PURE__ */ jsx52(ArkTagsInputHiddenInput, {})
+    /* @__PURE__ */ jsx53(ArkTagsInputHiddenInput, {})
   ] });
 }
 function TagInputControl({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkTagsInputControl, { className: cn52(tagsInputControlBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkTagsInputControl, { className: cn53(tagsInputControlBase, className), ...props });
 }
 function TagInputInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkTagsInputInput, { className: cn52(tagsInputInputBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkTagsInputInput, { className: cn53(tagsInputInputBase, className), ...props });
 }
 function TagInputItem({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkTagsInputItem, { className: cn52(tagsInputItemBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkTagsInputItem, { className: cn53(tagsInputItemBase, className), ...props });
 }
 function TagInputItemPreview({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkTagsInputItemPreview, { className, ...props });
+  return /* @__PURE__ */ jsx53(ArkTagsInputItemPreview, { className, ...props });
 }
 function TagInputItemText({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkTagsInputItemText, { className: cn52(tagsInputItemTextBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkTagsInputItemText, { className: cn53(tagsInputItemTextBase, className), ...props });
 }
 function TagInputItemInput({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkTagsInputItemInput, { className: cn52(tagsInputItemInputBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkTagsInputItemInput, { className: cn53(tagsInputItemInputBase, className), ...props });
 }
 function TagInputItemDeleteTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkTagsInputItemDeleteTrigger, { "aria-label": "Remove tag", className: cn52(tagsInputItemDeleteTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkTagsInputItemDeleteTrigger, { "aria-label": "Remove tag", className: cn53(tagsInputItemDeleteTriggerBase, className), ...props });
 }
 function TagInputClearTrigger({ className, ...props }) {
-  return /* @__PURE__ */ jsx52(ArkTagsInputClearTrigger, { "aria-label": "Clear all tags", className: cn52(tagsInputClearTriggerBase, className), ...props });
+  return /* @__PURE__ */ jsx53(ArkTagsInputClearTrigger, { "aria-label": "Clear all tags", className: cn53(tagsInputClearTriggerBase, className), ...props });
 }
 var TagInputContext = ArkTagsInputContext;
 var useTagInput = useTagsInputContext;
@@ -1890,6 +1951,11 @@ export {
   NumberInputDecrement,
   NumberInputIncrement,
   NumberInputInput,
+  Page,
+  PageContent,
+  PageFooter,
+  PageGutter,
+  PageSection,
   Pagination,
   PaginationEllipsis,
   PaginationItem,