mainbase-ui 3.36.0 → 3.37.1

package/dist/cjs/components/stack/stack.cjs

@@ -1,18 +1,18 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var factory = require('../../styled-system/factory.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 var getSeparatorStyle = require('./get-separator-style.cjs');
 
 function getValidChildren(children) {
-  return React$1.Children.toArray(children).filter(
-    (child) => React$1.isValidElement(child)
+  return React.Children.toArray(children).filter(
+    (child) => React.isValidElement(child)
   );
 }
-const Stack = React$1.forwardRef(
+const Stack = React.forwardRef(
   function Stack2(props, ref) {
     const {
       direction = "column",
@@ -25,22 +25,25 @@ const Stack = React$1.forwardRef(
       className,
       ...rest
     } = props;
-    const separatorStyle = React$1.useMemo(
+    const separatorStyle = React.useMemo(
       () => getSeparatorStyle.getSeparatorStyles({ gap, direction }),
       [gap, direction]
     );
-    const clones = React$1.useMemo(() => {
-      if (!React$1.isValidElement(separator)) return children;
+    const clones = React.useMemo(() => {
+      if (!React.isValidElement(separator)) return children;
       return getValidChildren(children).map((child, index, arr) => {
         const key = typeof child.key !== "undefined" ? child.key : index;
         const typedSep = separator;
-        const sep = React$1.cloneElement(typedSep, {
+        const sep = React.cloneElement(typedSep, {
           css: [separatorStyle, typedSep.props.css]
         });
-        return /* @__PURE__ */ React.createElement(React$1.Fragment, { key }, child, index === arr.length - 1 ? null : sep);
+        return /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+          child,
+          index === arr.length - 1 ? null : sep
+        ] }, key);
       });
     }, [children, separator, separatorStyle]);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ref,
@@ -51,9 +54,9 @@ const Stack = React$1.forwardRef(
         flexWrap: wrap,
         gap: separator ? void 0 : gap,
         className: cx.cx("mainbase-stack", className),
-        ...rest
-      },
-      clones
+        ...rest,
+        children: clones
+      }
     );
   }
 );

package/dist/cjs/components/stack/v-stack.cjs

@@ -1,12 +1,13 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var stack = require('./stack.cjs');
 
-const VStack = React$1.forwardRef(
+const VStack = React.forwardRef(
   function VStack2(props, ref) {
-    return /* @__PURE__ */ React.createElement(stack.Stack, { align: "center", ...props, direction: "column", ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(stack.Stack, { align: "center", ...props, direction: "column", ref });
   }
 );
 VStack.displayName = "VStack";

package/dist/cjs/components/stat/stat.cjs

@@ -1,7 +1,8 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var useSlotRecipe = require('../../styled-system/use-slot-recipe.cjs');
@@ -37,24 +38,24 @@ const StatUpIndicator = withContext(
   {
     defaultProps: {
       "data-type": "up",
-      children: /* @__PURE__ */ React.createElement(icons.ArrowUpIcon, null)
+      children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowUpIcon, {})
     }
   }
 );
 const StatDownIndicator = withContext("span", "indicator", {
   defaultProps: {
     "data-type": "down",
-    children: /* @__PURE__ */ React.createElement(icons.ArrowDownIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.ArrowDownIcon, {})
   }
 });
-const StatGroup = React$1.forwardRef(
+const StatGroup = React.forwardRef(
   function StatGroup2(props, ref) {
     const recipe = useSlotRecipe.useSlotRecipe({ key: "stat" });
-    const [variantProps, localProps] = React$1.useMemo(
+    const [variantProps, localProps] = React.useMemo(
       () => recipe.splitVariantProps(props),
       [props, recipe]
     );
-    return /* @__PURE__ */ React.createElement(PropsProvider, { value: variantProps }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: variantProps, children: /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ref,
@@ -65,7 +66,7 @@ const StatGroup = React$1.forwardRef(
         alignItems: "flex-start",
         ...localProps
       }
-    ));
+    ) });
   }
 );
 

package/dist/cjs/components/steps/steps.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var steps = require('@ark-ui/react/steps');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var icons = require('../icons.cjs');
@@ -41,9 +42,9 @@ const StepsContent = withContext(
   { forwardAsChild: true }
 );
 const StepsCompletedContent = withContext(steps.Steps.CompletedContent, "content");
-const StepsNumber = React$1.forwardRef(
+const StepsNumber = React.forwardRef(
   function StepsNumber2(props, ref) {
-    return /* @__PURE__ */ React.createElement(steps.Steps.ItemContext, null, (api) => /* @__PURE__ */ React.createElement(factory.mainbase.div, { ref, ...props }, api.index + 1));
+    return /* @__PURE__ */ jsxRuntime.jsx(steps.Steps.ItemContext, { children: (api) => /* @__PURE__ */ jsxRuntime.jsx(factory.mainbase.div, { ref, ...props, children: api.index + 1 }) });
   }
 );
 const StepsTitle = withContext(
@@ -57,11 +58,11 @@ const StepsSeparator = withContext(
   { forwardAsChild: true }
 );
 const StepsStatus = (props) => {
-  return /* @__PURE__ */ React.createElement(steps.Steps.ItemContext, null, (api) => {
-    if (api.current) return /* @__PURE__ */ React.createElement(React.Fragment, null, props.current ?? props.incomplete);
-    if (api.completed) return /* @__PURE__ */ React.createElement(React.Fragment, null, props.complete);
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, props.incomplete ?? props.current);
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(steps.Steps.ItemContext, { children: (api) => {
+    if (api.current) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.current ?? props.incomplete });
+    if (api.completed) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.complete });
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.incomplete ?? props.current });
+  } });
 };
 const StepsIndicator = withContext(
   steps.Steps.Indicator,
@@ -69,7 +70,7 @@ const StepsIndicator = withContext(
   {
     forwardAsChild: true,
     defaultProps: {
-      children: /* @__PURE__ */ React.createElement(StepsStatus, { complete: /* @__PURE__ */ React.createElement(icons.CheckIcon, null), incomplete: /* @__PURE__ */ React.createElement(StepsNumber, null) })
+      children: /* @__PURE__ */ jsxRuntime.jsx(StepsStatus, { complete: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckIcon, {}), incomplete: /* @__PURE__ */ jsxRuntime.jsx(StepsNumber, {}) })
     }
   }
 );

package/dist/cjs/components/switch/switch.cjs

@@ -1,12 +1,12 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var _switch = require('@ark-ui/react/switch');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var attr = require('../../utils/attr.cjs');
-require('../../utils/unit.cjs');
 
 const {
   withProvider,
@@ -36,28 +36,28 @@ const SwitchControl = withContext(
   "control",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(SwitchThumb, null) }
+    defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(SwitchThumb, {}) }
   }
 );
-const SwitchIndicator = React$1.forwardRef(function SwitchIndicator2(props, ref) {
+const SwitchIndicator = React.forwardRef(function SwitchIndicator2(props, ref) {
   const api = _switch.useSwitchContext();
   const styles = useSwitchStyles();
   const { fallback, children, unstyled, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     factory.mainbase.span,
     {
       ref,
       "data-checked": attr.dataAttr(api.checked),
       ...rest,
-      css: [!unstyled ? styles.indicator : void 0, props.css]
-    },
-    api.checked ? children : fallback
+      css: [!unstyled ? styles.indicator : void 0, props.css],
+      children: api.checked ? children : fallback
+    }
   );
 });
-const SwitchThumbIndicator = React$1.forwardRef(function SwitchThumbIndicator2(props, ref) {
+const SwitchThumbIndicator = React.forwardRef(function SwitchThumbIndicator2(props, ref) {
   const api = _switch.useSwitchContext();
   const { fallback, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(factory.mainbase.span, { ref, "data-checked": attr.dataAttr(api.checked), ...rest }, api.checked ? children : fallback);
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.mainbase.span, { ref, "data-checked": attr.dataAttr(api.checked), ...rest, children: api.checked ? children : fallback });
 });
 const SwitchContext = _switch.Switch.Context;
 const SwitchHiddenInput = _switch.Switch.HiddenInput;

package/dist/cjs/components/table/table.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 
 const {
   StylesProvider,
@@ -15,10 +15,10 @@ const {
   useStyles: useTableStyles,
   PropsProvider
 } = createSlotRecipeContext.createSlotRecipeContext({ key: "table" });
-const TableRoot = React$1.forwardRef(
+const TableRoot = React.forwardRef(
   function TableRoot2({ native, ...props }, ref) {
     const { styles, props: rootProps, classNames } = useRecipeResult(props);
-    const rootCss = React$1.useMemo(() => {
+    const rootCss = React.useMemo(() => {
       if (!native) return styles.root;
       return {
         ...styles.root,
@@ -31,7 +31,7 @@ const TableRoot = React$1.forwardRef(
         "& caption": styles.caption
       };
     }, [styles, native]);
-    return /* @__PURE__ */ React.createElement(ClassNamesProvider, { value: classNames }, /* @__PURE__ */ React.createElement(StylesProvider, { value: styles }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.table,
       {
         ref,
@@ -39,7 +39,7 @@ const TableRoot = React$1.forwardRef(
         css: [rootCss, props.css],
         className: cx.cx(classNames?.["root"], props.className)
       }
-    )));
+    ) }) });
   }
 );
 const TableRootPropsProvider = PropsProvider;

package/dist/cjs/components/tag/tag.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var icons = require('../icons.cjs');
 
@@ -19,7 +20,7 @@ const TagLabel = withContext(
   "span",
   "label"
 );
-const TagCloseTrigger = withContext("button", "closeTrigger", { defaultProps: { children: /* @__PURE__ */ React.createElement(icons.CloseIcon, null) } });
+const TagCloseTrigger = withContext("button", "closeTrigger", { defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) } });
 const TagStartElement = withContext("span", "startElement");
 const TagEndElement = withContext(
   "span",

package/dist/cjs/components/tags-input/tags-input.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var tagsInput = require('@ark-ui/react/tags-input');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var _for = require('../for/for.cjs');
@@ -30,17 +31,23 @@ const TagsInputItem = withContext(
 const TagsInputItemText = withContext(tagsInput.TagsInput.ItemText, "itemText", { forwardAsChild: true });
 const TagsInputItemDeleteTrigger = withContext(tagsInput.TagsInput.ItemDeleteTrigger, "itemDeleteTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(icons.CloseIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) }
 });
 const TagsInputItemPreview = withContext(tagsInput.TagsInput.ItemPreview, "itemPreview", { forwardAsChild: true });
 const TagsInputItemInput = withContext(tagsInput.TagsInput.ItemInput, "itemInput", { forwardAsChild: true });
 const TagsInputClearTrigger = withContext(tagsInput.TagsInput.ClearTrigger, "clearTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(icons.CloseIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) }
 });
 const TagsInputItems = (props) => {
   const api = tagsInput.useTagsInputContext();
-  return /* @__PURE__ */ React.createElement(_for.For, { each: api.value }, (item, index) => /* @__PURE__ */ React.createElement(TagsInputItem, { key: index, index, value: item, ...props }, /* @__PURE__ */ React.createElement(TagsInputItemPreview, null, /* @__PURE__ */ React.createElement(TagsInputItemText, null, item), /* @__PURE__ */ React.createElement(TagsInputItemDeleteTrigger, null)), /* @__PURE__ */ React.createElement(TagsInputItemInput, null)));
+  return /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: api.value, children: (item, index) => /* @__PURE__ */ jsxRuntime.jsxs(TagsInputItem, { index, value: item, ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(TagsInputItemPreview, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(TagsInputItemText, { children: item }),
+      /* @__PURE__ */ jsxRuntime.jsx(TagsInputItemDeleteTrigger, {})
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(TagsInputItemInput, {})
+  ] }, index) });
 };
 const TagsInputContext = tagsInput.TagsInput.Context;
 const TagsInputHiddenInput = tagsInput.TagsInput.HiddenInput;

package/dist/cjs/components/theme.cjs

@@ -1,12 +1,12 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var factory = require('../styled-system/factory.cjs');
 var cx = require('../utils/cx.cjs');
-require('../utils/unit.cjs');
 
-const Theme = React$1.forwardRef(
+const Theme = React.forwardRef(
   function Theme2(props, ref) {
     const {
       appearance,
@@ -15,7 +15,7 @@ const Theme = React$1.forwardRef(
       hasBackground = true,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         color: "fg",

package/dist/cjs/components/toast/toast.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var toast = require('@ark-ui/react/toast');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var icons = require('../icons.cjs');
@@ -25,7 +26,7 @@ const ToastRoot = withProvider(
 const ToastCloseTrigger = withContext(toast.Toast.CloseTrigger, "closeTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.CloseIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
   }
 });
 const ToastTitle = withContext(
@@ -40,14 +41,14 @@ const iconMap = {
   success: icons.CheckCircleIcon,
   error: icons.WarningIcon
 };
-const ToastIndicator = React$1.forwardRef(
+const ToastIndicator = React.forwardRef(
   function ToastIndicator2(props, ref) {
     const { unstyled, ...restProps } = props;
     const api = toast.useToastContext();
     const styles = useToastStyles();
     const Component = iconMap[api.type];
     if (!Component) return null;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       Component,
       {
         ref,

package/dist/cjs/components/tooltip/tooltip.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var tooltip = require('@ark-ui/react/tooltip');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 
@@ -28,7 +29,7 @@ const TooltipArrowTip = withContext(tooltip.Tooltip.ArrowTip, "arrowTip", { forw
 const TooltipArrow = withContext(
   tooltip.Tooltip.Arrow,
   "arrow",
-  { forwardAsChild: true, defaultProps: { children: /* @__PURE__ */ React.createElement(TooltipArrowTip, null) } }
+  { forwardAsChild: true, defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipArrowTip, {}) } }
 );
 const TooltipContext = tooltip.Tooltip.Context;
 

package/dist/cjs/components/tree-view/tree-view.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var react = require('@ark-ui/react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 
@@ -49,24 +50,30 @@ const TreeViewNodeCheckbox = withContext(react.TreeView.NodeCheckbox, "nodeCheck
 function TreeViewNode(props) {
   const { render, indentGuide, branchProps, branchContentProps } = props;
   const tree = react.useTreeViewContext();
-  const renderNode = (node, indexPath) => /* @__PURE__ */ React.createElement(
+  const renderNode = (node, indexPath) => /* @__PURE__ */ jsxRuntime.jsx(
     react.TreeView.NodeProvider,
     {
-      key: indexPath.join("."),
       node,
-      indexPath
+      indexPath,
+      children: /* @__PURE__ */ jsxRuntime.jsx(react.TreeView.NodeContext, { children: (nodeState) => {
+        if (nodeState.isBranch) {
+          return /* @__PURE__ */ jsxRuntime.jsxs(TreeViewBranch, { ...branchProps, children: [
+            render({ node, indexPath, nodeState }),
+            /* @__PURE__ */ jsxRuntime.jsxs(TreeViewBranchContent, { ...branchContentProps, children: [
+              indentGuide,
+              tree.collection.getNodeChildren(node).map(
+                (child, index) => renderNode(child, [...indexPath, index])
+              )
+            ] })
+          ] });
+        } else {
+          return render({ node, indexPath, nodeState });
+        }
+      } })
     },
-    /* @__PURE__ */ React.createElement(react.TreeView.NodeContext, null, (nodeState) => {
-      if (nodeState.isBranch) {
-        return /* @__PURE__ */ React.createElement(TreeViewBranch, { ...branchProps }, render({ node, indexPath, nodeState }), /* @__PURE__ */ React.createElement(TreeViewBranchContent, { ...branchContentProps }, indentGuide, tree.collection.getNodeChildren(node).map(
-          (child, index) => renderNode(child, [...indexPath, index])
-        )));
-      } else {
-        return render({ node, indexPath, nodeState });
-      }
-    })
+    indexPath.join(".")
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index])));
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index])) });
 }
 
 exports.TreeViewBranch = TreeViewBranch;

package/dist/cjs/components/wrap/wrap.cjs

@@ -1,16 +1,16 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var config = require('../../styled-system/config.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 
-const Wrap = React$1.forwardRef(
+const Wrap = React.forwardRef(
   function Wrap2(props, ref) {
     const { gap = "0.5rem", justify, direction, align, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ref,
@@ -31,10 +31,10 @@ const itemStyle = config.defineStyle({
   display: "flex",
   alignItems: "flex-start"
 });
-const WrapItem = React$1.forwardRef(
+const WrapItem = React.forwardRef(
   function WrapItem2(props, ref) {
     const { css, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ref,

package/dist/cjs/hooks/index.cjs

@@ -7,13 +7,13 @@ var useControllableState = require('./use-controllable-state.cjs');
 var useDisclosure = require('./use-disclosure.cjs');
 var useElementRect = require('./use-element-rect.cjs');
 var useForceUpdate = require('./use-force-update.cjs');
-var collection = require('@ark-ui/react/collection');
 var useLiveRef = require('./use-live-ref.cjs');
 var useMediaQuery = require('./use-media-query.cjs');
 var useOverlay = require('./use-overlay.cjs');
 var usePrevious = require('./use-previous.cjs');
 var useSafeLayoutEffect = require('./use-safe-layout-effect.cjs');
 var useUpdateEffect = require('./use-update-effect.cjs');
+var collection = require('@ark-ui/react/collection');
 
 
 
@@ -26,13 +26,13 @@ exports.useControllableState = useControllableState.useControllableState;
 exports.useDisclosure = useDisclosure.useDisclosure;
 exports.useElementRect = useElementRect.useElementRect;
 exports.useForceUpdate = useForceUpdate.useForceUpdate;
-Object.defineProperty(exports, "useListCollection", {
-	enumerable: true,
-	get: function () { return collection.useListCollection; }
-});
 exports.useLiveRef = useLiveRef.useLiveRef;
 exports.useMediaQuery = useMediaQuery.useMediaQuery;
 exports.createOverlay = useOverlay.createOverlay;
 exports.usePrevious = usePrevious.usePrevious;
 exports.useSafeLayoutEffect = useSafeLayoutEffect.useSafeLayoutEffect;
 exports.useUpdateEffect = useUpdateEffect.useUpdateEffect;
+Object.defineProperty(exports, "useListCollection", {
+	enumerable: true,
+	get: function () { return collection.useListCollection; }
+});

package/dist/cjs/hooks/use-overlay.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var omit = require('../utils/omit.cjs');
-require('../utils/unit.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -150,7 +150,7 @@ function createOverlay(Component, options) {
       setMounted(true);
     }, []);
     const open2 = mounted ? props.open ?? false : false;
-    return /* @__PURE__ */ React__namespace.createElement(Component, { ...props, open: open2 });
+    return /* @__PURE__ */ jsxRuntime.jsx(Component, { ...props, open: open2 });
   }
   function Viewport() {
     const overlays = React__namespace.useSyncExternalStore(
@@ -158,7 +158,7 @@ function createOverlay(Component, options) {
       getSnapshotForStore,
       getSnapshotForStore
     );
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, overlays.map(({ id, props }) => /* @__PURE__ */ React__namespace.createElement(OverlayViewportItem, { key: id, ...props })));
+    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: overlays.map(({ id, props }) => /* @__PURE__ */ jsxRuntime.jsx(OverlayViewportItem, { ...props }, id)) });
   }
   return {
     Viewport,

package/dist/cjs/index.cjs

@@ -236,7 +236,6 @@ var useControllableState = require('./hooks/use-controllable-state.cjs');
 var useDisclosure = require('./hooks/use-disclosure.cjs');
 var useElementRect = require('./hooks/use-element-rect.cjs');
 var useForceUpdate = require('./hooks/use-force-update.cjs');
-var collection = require('@ark-ui/react/collection');
 var useLiveRef = require('./hooks/use-live-ref.cjs');
 var useMediaQuery = require('./hooks/use-media-query.cjs');
 var useOverlay = require('./hooks/use-overlay.cjs');
@@ -258,6 +257,7 @@ var system = require('./styled-system/system.cjs');
 var useRecipe = require('./styled-system/use-recipe.cjs');
 var useSlotRecipe = require('./styled-system/use-slot-recipe.cjs');
 var useToken = require('./styled-system/use-token.cjs');
+var collection = require('@ark-ui/react/collection');
 var toast$1 = require('@ark-ui/react/toast');
 var mergeConfig = require('./styled-system/merge-config.cjs');
 var downloadTrigger = require('@ark-ui/react/download-trigger');
@@ -1619,26 +1619,6 @@ exports.useControllableState = useControllableState.useControllableState;
 exports.useDisclosure = useDisclosure.useDisclosure;
 exports.useElementRect = useElementRect.useElementRect;
 exports.useForceUpdate = useForceUpdate.useForceUpdate;
-Object.defineProperty(exports, "createFileTreeCollection", {
-	enumerable: true,
-	get: function () { return collection.createFileTreeCollection; }
-});
-Object.defineProperty(exports, "createGridCollection", {
-	enumerable: true,
-	get: function () { return collection.createGridCollection; }
-});
-Object.defineProperty(exports, "createListCollection", {
-	enumerable: true,
-	get: function () { return collection.createListCollection; }
-});
-Object.defineProperty(exports, "createTreeCollection", {
-	enumerable: true,
-	get: function () { return collection.createTreeCollection; }
-});
-Object.defineProperty(exports, "useListCollection", {
-	enumerable: true,
-	get: function () { return collection.useListCollection; }
-});
 exports.useLiveRef = useLiveRef.useLiveRef;
 exports.useMediaQuery = useMediaQuery.useMediaQuery;
 exports.createOverlay = useOverlay.createOverlay;
@@ -1676,6 +1656,26 @@ exports.isValidSystem = system.isValidSystem;
 exports.useRecipe = useRecipe.useRecipe;
 exports.useSlotRecipe = useSlotRecipe.useSlotRecipe;
 exports.useToken = useToken.useToken;
+Object.defineProperty(exports, "createFileTreeCollection", {
+	enumerable: true,
+	get: function () { return collection.createFileTreeCollection; }
+});
+Object.defineProperty(exports, "createGridCollection", {
+	enumerable: true,
+	get: function () { return collection.createGridCollection; }
+});
+Object.defineProperty(exports, "createListCollection", {
+	enumerable: true,
+	get: function () { return collection.createListCollection; }
+});
+Object.defineProperty(exports, "createTreeCollection", {
+	enumerable: true,
+	get: function () { return collection.createTreeCollection; }
+});
+Object.defineProperty(exports, "useListCollection", {
+	enumerable: true,
+	get: function () { return collection.useListCollection; }
+});
 Object.defineProperty(exports, "createToaster", {
 	enumerable: true,
 	get: function () { return toast$1.createToaster; }

package/dist/cjs/merge-props.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
 var callAll = require('./utils/call-all.cjs');
-require('react');
-require('./utils/unit.cjs');
 
 const clsx = (...args) => args.map((str) => str?.trim?.()).filter(Boolean).join(" ");
 const eventRegex = /^on[A-Z]/;

package/dist/cjs/styled-system/breakpoints.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
-require('react');
 var uniq = require('../utils/uniq.cjs');
-require('../utils/unit.cjs');
 var unitConversion = require('./unit-conversion.cjs');
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);