mainbase-ui 3.36.0 → 3.37.1

package/dist/cjs/components/pagination/pagination.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var pagination = require('@ark-ui/react/pagination');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var index = require('../box/index.cjs');
 require('../button/button.cjs');
@@ -33,10 +34,10 @@ const PaginationItem = withContext(pagination.Pagination.Item, "item", { forward
 const PaginationNextTrigger = withContext(pagination.Pagination.NextTrigger, "nextTrigger", { forwardAsChild: true });
 const PaginationPrevTrigger = withContext(pagination.Pagination.PrevTrigger, "prevTrigger", { forwardAsChild: true });
 const PaginationContext = pagination.Pagination.Context;
-const PaginationPageText = React$1.forwardRef(function PaginationPageText2(props, ref) {
+const PaginationPageText = React.forwardRef(function PaginationPageText2(props, ref) {
   const { format = "compact", ...rest } = props;
   const { page, totalPages, pageRange, count } = pagination.usePaginationContext();
-  const content = React$1.useMemo(() => {
+  const content = React.useMemo(() => {
     if (typeof format === "function") {
       return format({ page, totalPages, pageRange, count });
     }
@@ -44,27 +45,27 @@ const PaginationPageText = React$1.forwardRef(function PaginationPageText2(props
     if (format === "compact") return `${page} of ${totalPages}`;
     return `${pageRange.start + 1} - ${Math.min(pageRange.end, count)} of ${count}`;
   }, [format, page, totalPages, pageRange, count]);
-  return /* @__PURE__ */ React.createElement(index.Box, { fontWeight: "medium", ref, ...rest }, content);
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Box, { fontWeight: "medium", ref, ...rest, children: content });
 });
 const PaginationItems = (props) => {
   const { pages } = pagination.usePaginationContext();
   const { render, ellipsis, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(_for.For, { each: pages }, (page, index) => {
+  return /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: pages, children: (page, index) => {
     if (page.type === "ellipsis") {
-      return /* @__PURE__ */ React.createElement(PaginationEllipsis, { asChild: true, key: index, index, ...rest }, ellipsis || /* @__PURE__ */ React.createElement(iconButton.IconButton, { as: "span" }, /* @__PURE__ */ React.createElement(icons.EllipsisIcon, null)));
+      return /* @__PURE__ */ jsxRuntime.jsx(PaginationEllipsis, { asChild: true, index, ...rest, children: ellipsis || /* @__PURE__ */ jsxRuntime.jsx(iconButton.IconButton, { as: "span", children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllipsisIcon, {}) }) }, index);
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       PaginationItem,
       {
         asChild: true,
-        key: index,
         type: "page",
         value: page.value,
-        ...rest
+        ...rest,
+        children: render(page)
       },
-      render(page)
+      index
     );
-  });
+  } });
 };
 
 exports.PaginationContext = PaginationContext;

package/dist/cjs/components/popover/popover.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var popover = require('@ark-ui/react/popover');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 
@@ -28,7 +29,7 @@ const PopoverArrow = withContext(
   "arrow",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(PopoverArrowTip, null) }
+    defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(PopoverArrowTip, {}) }
   }
 );
 const PopoverCloseTrigger = withContext(popover.Popover.CloseTrigger, "closeTrigger", { forwardAsChild: true });

package/dist/cjs/components/qr-code/qr-code.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var qrCode = require('@ark-ui/react/qr-code');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 
@@ -27,7 +28,7 @@ const QrCodeFrame = withContext(
   "frame",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(QrCodePattern, null) }
+    defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(QrCodePattern, {}) }
   }
 );
 const QrCodeOverlay = withContext(

package/dist/cjs/components/radio-card/radio-card.cjs

@@ -1,12 +1,12 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var radioGroup = require('@ark-ui/react/radio-group');
-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');
 var radiomark = require('../radiomark/radiomark.cjs');
 
 const {
@@ -34,10 +34,10 @@ const RadioCardItem = withContext(
 );
 const RadioCardItemText = withContext(radioGroup.RadioGroup.ItemText, "itemText", { forwardAsChild: true });
 const RadioCardItemDescription = withContext("div", "itemDescription", { forwardAsChild: true });
-const RadioCardItemControl = React$1.forwardRef(function RadioCardItemControl2(props, ref) {
+const RadioCardItemControl = React.forwardRef(function RadioCardItemControl2(props, ref) {
   const api = radioGroup.useRadioGroupItemContext();
   const styles = useRadioCardStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     factory.mainbase.div,
     {
       ref,
@@ -54,24 +54,24 @@ const RadioCardItemControl = React$1.forwardRef(function RadioCardItemControl2(p
 });
 const RadioCardItemContent = withContext("div", "itemContent");
 const RadioCardItemAddon = withContext("div", "itemAddon");
-const RadioCardItemIndicator = React$1.forwardRef(function RadioGroupItemIndicator(props, ref) {
+const RadioCardItemIndicator = React.forwardRef(function RadioGroupItemIndicator(props, ref) {
   const { checked, ...rest } = props;
   const styles = useRadioCardStyles();
   const itemContext = radioGroup.useRadioGroupItemContext();
   if (checked && itemContext.checked) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.span,
       {
         ref,
         asChild: true,
         ...rest,
         "aria-hidden": "true",
-        css: [styles["itemIndicator"], props.css]
-      },
-      checked
+        css: [styles["itemIndicator"], props.css],
+        children: checked
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     radiomark.Radiomark,
     {
       ref,

package/dist/cjs/components/radio-group/radio-group.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var radioGroup = require('@ark-ui/react/radio-group');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var radiomark = require('../radiomark/radiomark.cjs');
 
@@ -27,9 +28,9 @@ const RadioGroupItem = withContext(
 );
 const RadioGroupItemText = withContext(radioGroup.RadioGroup.ItemText, "itemText", { forwardAsChild: true });
 const RadioGroupItemControl = withContext(radioGroup.RadioGroup.ItemControl, "itemControl", { forwardAsChild: true });
-const RadioGroupItemIndicator = React$1.forwardRef(function RadioGroupItemIndicator2(props, ref) {
+const RadioGroupItemIndicator = React.forwardRef(function RadioGroupItemIndicator2(props, ref) {
   const styles = useRadioGroupStyles();
-  return /* @__PURE__ */ React.createElement(radioGroup.RadioGroup.ItemContext, null, (itemState) => /* @__PURE__ */ React.createElement(radioGroup.RadioGroup.ItemControl, { asChild: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroup.ItemContext, { children: (itemState) => /* @__PURE__ */ jsxRuntime.jsx(radioGroup.RadioGroup.ItemControl, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
     radiomark.Radiomark,
     {
       ref,
@@ -39,7 +40,7 @@ const RadioGroupItemIndicator = React$1.forwardRef(function RadioGroupItemIndica
       disabled: itemState.disabled,
       css: [styles["itemControl"], props.css]
     }
-  )));
+  ) }) });
 });
 const RadioGroupContext = radioGroup.RadioGroup.Context;
 const RadioGroupItemContext = radioGroup.RadioGroup.ItemContext;

package/dist/cjs/components/radiomark/radiomark.cjs

@@ -1,14 +1,14 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var empty = require('../../styled-system/empty.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var useRecipe = require('../../styled-system/use-recipe.cjs');
 var attr = require('../../utils/attr.cjs');
-require('../../utils/unit.cjs');
 
-const Radiomark = React$1.forwardRef(
+const Radiomark = React.forwardRef(
   function Radiomark2(props, ref) {
     const recipe = useRecipe.useRecipe({ key: "radiomark", recipe: props.recipe });
     const [variantProps, restProps] = recipe.splitVariantProps(props);
@@ -21,7 +21,7 @@ const Radiomark = React$1.forwardRef(
       ...rest,
       css: [styles, props.css]
     };
-    return /* @__PURE__ */ React.createElement(factory.mainbase.span, { ...sharedProps }, checked && /* @__PURE__ */ React.createElement("span", { className: "dot" }));
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.mainbase.span, { ...sharedProps, children: checked && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "dot" }) });
   }
 );
 Radiomark.displayName = "Radiomark";

package/dist/cjs/components/rating-group/rating-group.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var ratingGroup = require('@ark-ui/react/rating-group');
-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 _for = require('../for/for.cjs');
@@ -20,15 +21,15 @@ const RatingGroupPropsProvider = PropsProvider;
 const RatingGroupLabel = withContext(ratingGroup.RatingGroup.Label, "label", { forwardAsChild: true });
 const RatingGroupItem = withContext(ratingGroup.RatingGroup.Item, "item", { forwardAsChild: true });
 function cloneIcon(icon, type) {
-  if (!React$1.isValidElement(icon)) return null;
+  if (!React.isValidElement(icon)) return null;
   const props = { [`data-${type}`]: "", "aria-hidden": "" };
-  return React$1.cloneElement(icon, props);
+  return React.cloneElement(icon, props);
 }
-const RatingGroupItemIndicator = React$1.forwardRef(function RatingGroupItemIndicator2(props, ref) {
-  const { icon = /* @__PURE__ */ React.createElement(icons.StarIcon, null), ...rest } = props;
+const RatingGroupItemIndicator = React.forwardRef(function RatingGroupItemIndicator2(props, ref) {
+  const { icon = /* @__PURE__ */ jsxRuntime.jsx(icons.StarIcon, {}), ...rest } = props;
   const styles = useRatingGroupStyles();
   const itemState = ratingGroup.useRatingGroupItemContext();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     factory.mainbase.span,
     {
       ...rest,
@@ -36,19 +37,21 @@ const RatingGroupItemIndicator = React$1.forwardRef(function RatingGroupItemIndi
       "data-checked": itemState.checked ? "" : void 0,
       "data-half": itemState.half ? "" : void 0,
       css: [styles.itemIndicator, props.css],
-      ref
-    },
-    cloneIcon(icon, "bg"),
-    cloneIcon(icon, "fg")
+      ref,
+      children: [
+        cloneIcon(icon, "bg"),
+        cloneIcon(icon, "fg")
+      ]
+    }
   );
 });
 const RatingGroupItems = (props) => {
   const api = ratingGroup.useRatingGroupContext();
-  return /* @__PURE__ */ React.createElement(_for.For, { each: api.items }, (index) => /* @__PURE__ */ React.createElement(RatingGroupItem, { key: index, index, ...props }, /* @__PURE__ */ React.createElement(RatingGroupItemIndicator, null)));
+  return /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: api.items, children: (index) => /* @__PURE__ */ jsxRuntime.jsx(RatingGroupItem, { index, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(RatingGroupItemIndicator, {}) }, index) });
 };
 const RatingGroupControl = withContext(ratingGroup.RatingGroup.Control, "control", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(RatingGroupItems, null) }
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(RatingGroupItems, {}) }
 });
 const RatingGroupContext = ratingGroup.RatingGroup.Context;
 const RatingGroupItemContext = ratingGroup.RatingGroup.ItemContext;

package/dist/cjs/components/scroll-area/scroll-area.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var scrollArea = require('@ark-ui/react/scroll-area');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 
@@ -23,7 +24,7 @@ const ScrollAreaThumb = withContext(scrollArea.ScrollArea.Thumb, "thumb", { forw
 const ScrollAreaScrollbar = withContext(scrollArea.ScrollArea.Scrollbar, "scrollbar", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ScrollAreaThumb, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(ScrollAreaThumb, {})
   }
 });
 const ScrollAreaCorner = withContext(scrollArea.ScrollArea.Corner, "corner", { forwardAsChild: true });

package/dist/cjs/components/segment-group/segment-group.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var segmentGroup = require('@ark-ui/react/segment-group');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var _for = require('../for/for.cjs');
 
@@ -32,18 +33,20 @@ function normalize(items) {
 }
 const SegmentGroupItems = (props) => {
   const { items, ...rest } = props;
-  const data = React$1.useMemo(() => normalize(items), [items]);
-  return /* @__PURE__ */ React.createElement(_for.For, { each: data }, (item) => /* @__PURE__ */ React.createElement(
+  const data = React.useMemo(() => normalize(items), [items]);
+  return /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: data, children: (item) => /* @__PURE__ */ jsxRuntime.jsxs(
     SegmentGroupItem,
     {
-      key: item.value,
       value: item.value,
       disabled: item.disabled,
-      ...rest
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SegmentGroupItemText, { children: item.label }),
+        /* @__PURE__ */ jsxRuntime.jsx(SegmentGroupItemHiddenInput, {})
+      ]
     },
-    /* @__PURE__ */ React.createElement(SegmentGroupItemText, null, item.label),
-    /* @__PURE__ */ React.createElement(SegmentGroupItemHiddenInput, null)
-  ));
+    item.value
+  ) });
 };
 const SegmentGroupItemHiddenInput = segmentGroup.SegmentGroup.ItemHiddenInput;
 const SegmentGroupContext = segmentGroup.SegmentGroup.Context;

package/dist/cjs/components/select/select.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var select = require('@ark-ui/react/select');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var icons = require('../icons.cjs');
@@ -42,7 +43,7 @@ const SelectList = withContext(
 const SelectValueText = withContext(select.Select.ValueText, "valueText", { forwardAsChild: true });
 const SelectClearTrigger = withContext(select.Select.ClearTrigger, "clearTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(icons.CloseIcon, { boxSize: "1em" }) }
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, { boxSize: "1em" }) }
 });
 const SelectItemGroup = withContext(select.Select.ItemGroup, "itemGroup", { forwardAsChild: true });
 const SelectItemGroupLabel = withContext(select.Select.ItemGroupLabel, "itemGroupLabel", { forwardAsChild: true });
@@ -59,14 +60,14 @@ const SelectItemText = withContext(
 const SelectItemIndicator = withContext(select.Select.ItemIndicator, "itemIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.CheckIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CheckIcon, {})
   }
 });
 const SelectIndicatorGroup = withContext("div", "indicatorGroup");
 const SelectIndicator = withContext(select.Select.Indicator, "indicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.ChevronDownIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {})
   }
 });
 const SelectControl = withContext(

package/dist/cjs/components/separator/separator.cjs

@@ -1,22 +1,22 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var createRecipeContext = require('../../styled-system/create-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var cx = require('../../utils/cx.cjs');
 var is = require('../../utils/is.cjs');
 var omit = require('../../utils/omit.cjs');
-require('../../utils/unit.cjs');
 
 const { useRecipeResult, PropsProvider } = createRecipeContext.createRecipeContext({
   key: "separator"
 });
-const Separator = React$1.forwardRef(
+const Separator = React.forwardRef(
   function Separator2(props, ref) {
     const { styles, className, props: otherProps } = useRecipeResult(props);
     const orientation = props.orientation || "horizontal";
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.span,
       {
         ref,

package/dist/cjs/components/show/show.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 
 function Show(props) {
   const { when, fallback, children } = props;
@@ -10,7 +11,7 @@ function Show(props) {
   } else {
     result = typeof children === "function" ? children(when) : children;
   }
-  return React$1.isValidElement(result) ? result : /* @__PURE__ */ React.createElement(React.Fragment, null, result);
+  return React.isValidElement(result) ? result : /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: result });
 }
 
 exports.Show = Show;

package/dist/cjs/components/simple-grid/simple-grid.cjs

@@ -1,19 +1,19 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var provider = require('../../styled-system/provider.cjs');
 var walkObject = require('../../utils/walk-object.cjs');
-require('../../utils/unit.cjs');
 var grid = require('../grid/grid.cjs');
 require('../grid/grid-item.cjs');
 
-const SimpleGrid = React$1.forwardRef(
+const SimpleGrid = React.forwardRef(
   function SimpleGrid2(props, ref) {
     const { columns, minChildWidth, ...rest } = props;
     const sys = provider.useMainbaseContext();
     const templateColumns = minChildWidth ? widthToColumns(minChildWidth, sys) : countToColumns(columns);
-    return /* @__PURE__ */ React.createElement(grid.Grid, { ref, templateColumns, ...rest });
+    return /* @__PURE__ */ jsxRuntime.jsx(grid.Grid, { ref, templateColumns, ...rest });
   }
 );
 SimpleGrid.displayName = "SimpleGrid";

package/dist/cjs/components/skeleton/skeleton.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var createRecipeContext = require('../../styled-system/create-recipe-context.cjs');
 var index = require('../circle/index.cjs');
@@ -35,22 +36,22 @@ const Skeleton = withContext("div");
 const SkeletonPropsProvider = PropsProvider;
 const SkeletonCircle = React__namespace.forwardRef(function SkeletonCircle2(props, ref) {
   const { size, ...rest } = props;
-  return /* @__PURE__ */ React__namespace.createElement(index.Circle, { size, asChild: true, ref }, /* @__PURE__ */ React__namespace.createElement(Skeleton, { ...rest }));
+  return /* @__PURE__ */ jsxRuntime.jsx(index.Circle, { size, asChild: true, ref, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { ...rest }) });
 });
 SkeletonCircle.displayName = "SkeletonCircle";
 const SkeletonText = React__namespace.forwardRef(
   function SkeletonText2(props, ref) {
     const { loading = true, noOfLines = 3, gap, rootProps, ...rest } = props;
-    return /* @__PURE__ */ React__namespace.createElement(stack.Stack, { gap, width: "full", ref, ...rootProps }, Array.from({ length: loading ? noOfLines : 1 }).map((_, index) => /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(stack.Stack, { gap, width: "full", ref, ...rootProps, children: Array.from({ length: loading ? noOfLines : 1 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
       Skeleton,
       {
-        key: index,
         loading,
         height: loading ? "4" : void 0,
         maxW: loading ? index === noOfLines - 1 && noOfLines > 1 ? "80%" : "100%" : void 0,
         ...rest
-      }
-    )));
+      },
+      index
+    )) });
   }
 );
 SkeletonText.displayName = "SkeletonText";

package/dist/cjs/components/skip-nav/skip-nav-content.cjs

@@ -1,14 +1,15 @@
 "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 skipNavLink = require('./skip-nav-link.cjs');
 
-const SkipNavContent = React$1.forwardRef(
+const SkipNavContent = React.forwardRef(
   function SkipNavContent2(props, ref) {
     const { id = skipNavLink.fallbackId, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ref,

package/dist/cjs/components/skip-nav/skip-nav-link.cjs

@@ -1,18 +1,19 @@
 "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 useRecipe = require('../../styled-system/use-recipe.cjs');
 
 const fallbackId = "mainbase-skip-nav";
-const SkipNavLink = React$1.forwardRef(
+const SkipNavLink = React.forwardRef(
   function SkipNavLink2(props, ref) {
     const recipe = useRecipe.useRecipe({ key: "skipNavLink", recipe: props.recipe });
     const [variantProps, { id, ...localProps }] = recipe.splitVariantProps(props);
     const styles = recipe(variantProps);
     const targetId = id ?? fallbackId;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.a,
       {
         ...localProps,

package/dist/cjs/components/slider/slider.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var slider = require('@ark-ui/react/slider');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var _for = require('../for/for.cjs');
 
@@ -51,17 +52,20 @@ const SliderMarkerLabel = withContext("span", "markerLabel");
 const SliderDraggingIndicator = withContext(slider.Slider.DraggingIndicator, "draggingIndicator", { forwardAsChild: true });
 const SliderThumbs = (props) => {
   const api = slider.useSliderContext();
-  return /* @__PURE__ */ React.createElement(_for.For, { each: api.value }, (_, index) => /* @__PURE__ */ React.createElement(SliderThumb, { key: index, index, ...props }, /* @__PURE__ */ React.createElement(SliderHiddenInput, null)));
+  return /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: api.value, children: (_, index) => /* @__PURE__ */ jsxRuntime.jsx(SliderThumb, { index, ...props, children: /* @__PURE__ */ jsxRuntime.jsx(SliderHiddenInput, {}) }, index) });
 };
-const SliderMarks = React$1.forwardRef(
+const SliderMarks = React.forwardRef(
   function SliderMarks2(props, ref) {
     const { marks, ...rest } = props;
     if (!marks?.length) return null;
-    return /* @__PURE__ */ React.createElement(SliderMarkerGroup, { ref, ...rest }, marks.map((mark, index) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(SliderMarkerGroup, { ref, ...rest, children: marks.map((mark, index) => {
       const value = typeof mark === "number" ? mark : mark.value;
       const label = typeof mark === "number" ? void 0 : mark.label;
-      return /* @__PURE__ */ React.createElement(SliderMarker, { key: index, value }, /* @__PURE__ */ React.createElement(SliderMarkerIndicator, null), label != null && /* @__PURE__ */ React.createElement(SliderMarkerLabel, null, label));
-    }));
+      return /* @__PURE__ */ jsxRuntime.jsxs(SliderMarker, { value, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SliderMarkerIndicator, {}),
+        label != null && /* @__PURE__ */ jsxRuntime.jsx(SliderMarkerLabel, { children: label })
+      ] }, index);
+    }) });
   }
 );
 const SliderControl = withContext(

package/dist/cjs/components/splitter/splitter.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var splitter = require('@ark-ui/react/splitter');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 
@@ -30,7 +31,10 @@ const SplitterResizeTrigger = withContext(splitter.Splitter.ResizeTrigger, "resi
   forwardAsChild: true,
   defaultProps: {
     "aria-label": "Resize",
-    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SplitterResizeTriggerSeparator, null), /* @__PURE__ */ React.createElement(SplitterResizeTriggerIndicator, null))
+    children: /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SplitterResizeTriggerSeparator, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(SplitterResizeTriggerIndicator, {})
+    ] })
   }
 });
 const SplitterContext = splitter.Splitter.Context;

package/dist/cjs/components/square/index.cjs

@@ -1,13 +1,14 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var index = require('../box/index.cjs');
 
-const Square = React$1.forwardRef(
+const Square = React.forwardRef(
   function Square2(props, ref) {
     const { size, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       index.Box,
       {
         ...rest,

package/dist/cjs/components/stack/get-separator-style.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
 var walkObject = require('../../utils/walk-object.cjs');
-require('react');
-require('../../utils/unit.cjs');
 
 function getSeparatorStyles(options) {
   const { gap, direction } = options;

package/dist/cjs/components/stack/h-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 HStack = React$1.forwardRef(
+const HStack = React.forwardRef(
   function HStack2(props, ref) {
-    return /* @__PURE__ */ React.createElement(stack.Stack, { align: "center", ...props, direction: "row", ref });
+    return /* @__PURE__ */ jsxRuntime.jsx(stack.Stack, { align: "center", ...props, direction: "row", ref });
   }
 );
 HStack.displayName = "HStack";