mainbase-ui 3.36.0 → 3.37.1

package/dist/esm/components/qr-code/qr-code.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { QrCode } from '@ark-ui/react/qr-code';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 
@@ -25,7 +26,7 @@ const QrCodeFrame = withContext(
   "frame",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(QrCodePattern, null) }
+    defaultProps: { children: /* @__PURE__ */ jsx(QrCodePattern, {}) }
   }
 );
 const QrCodeOverlay = withContext(

package/dist/esm/components/radio-card/radio-card.js

@@ -1,10 +1,10 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { RadioGroup, useRadioGroupItemContext } from '@ark-ui/react/radio-group';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { mainbase } from '../../styled-system/factory.js';
 import { dataAttr } from '../../utils/attr.js';
-import '../../utils/unit.js';
 import { Radiomark } from '../radiomark/radiomark.js';
 
 const {
@@ -35,7 +35,7 @@ const RadioCardItemDescription = withContext("div", "itemDescription", { forward
 const RadioCardItemControl = forwardRef(function RadioCardItemControl2(props, ref) {
   const api = useRadioGroupItemContext();
   const styles = useRadioCardStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     mainbase.div,
     {
       ref,
@@ -57,19 +57,19 @@ const RadioCardItemIndicator = forwardRef(function RadioGroupItemIndicator(props
   const styles = useRadioCardStyles();
   const itemContext = useRadioGroupItemContext();
   if (checked && itemContext.checked) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       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__ */ jsx(
     Radiomark,
     {
       ref,

package/dist/esm/components/radio-group/radio-group.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { RadioGroup } from '@ark-ui/react/radio-group';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -27,7 +28,7 @@ const RadioGroupItemText = withContext(RadioGroup.ItemText, "itemText", { forwar
 const RadioGroupItemControl = withContext(RadioGroup.ItemControl, "itemControl", { forwardAsChild: true });
 const RadioGroupItemIndicator = forwardRef(function RadioGroupItemIndicator2(props, ref) {
   const styles = useRadioGroupStyles();
-  return /* @__PURE__ */ React.createElement(RadioGroup.ItemContext, null, (itemState) => /* @__PURE__ */ React.createElement(RadioGroup.ItemControl, { asChild: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(RadioGroup.ItemContext, { children: (itemState) => /* @__PURE__ */ jsx(RadioGroup.ItemControl, { asChild: true, children: /* @__PURE__ */ jsx(
     Radiomark,
     {
       ref,
@@ -37,7 +38,7 @@ const RadioGroupItemIndicator = forwardRef(function RadioGroupItemIndicator2(pro
       disabled: itemState.disabled,
       css: [styles["itemControl"], props.css]
     }
-  )));
+  ) }) });
 });
 const RadioGroupContext = RadioGroup.Context;
 const RadioGroupItemContext = RadioGroup.ItemContext;

package/dist/esm/components/radiomark/radiomark.js

@@ -1,10 +1,10 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { EMPTY_STYLES } from '../../styled-system/empty.js';
 import { mainbase } from '../../styled-system/factory.js';
 import { useRecipe } from '../../styled-system/use-recipe.js';
 import { dataAttr } from '../../utils/attr.js';
-import '../../utils/unit.js';
 
 const Radiomark = forwardRef(
   function Radiomark2(props, ref) {
@@ -19,7 +19,7 @@ const Radiomark = forwardRef(
       ...rest,
       css: [styles, props.css]
     };
-    return /* @__PURE__ */ React.createElement(mainbase.span, { ...sharedProps }, checked && /* @__PURE__ */ React.createElement("span", { className: "dot" }));
+    return /* @__PURE__ */ jsx(mainbase.span, { ...sharedProps, children: checked && /* @__PURE__ */ jsx("span", { className: "dot" }) });
   }
 );
 Radiomark.displayName = "Radiomark";

package/dist/esm/components/rating-group/rating-group.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { RatingGroup, useRatingGroupItemContext, useRatingGroupContext } from '@ark-ui/react/rating-group';
 import { forwardRef, isValidElement, cloneElement } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -23,10 +24,10 @@ function cloneIcon(icon, type) {
   return cloneElement(icon, props);
 }
 const RatingGroupItemIndicator = forwardRef(function RatingGroupItemIndicator2(props, ref) {
-  const { icon = /* @__PURE__ */ React.createElement(StarIcon, null), ...rest } = props;
+  const { icon = /* @__PURE__ */ jsx(StarIcon, {}), ...rest } = props;
   const styles = useRatingGroupStyles();
   const itemState = useRatingGroupItemContext();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     mainbase.span,
     {
       ...rest,
@@ -34,19 +35,21 @@ const RatingGroupItemIndicator = forwardRef(function RatingGroupItemIndicator2(p
       "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 = useRatingGroupContext();
-  return /* @__PURE__ */ React.createElement(For, { each: api.items }, (index) => /* @__PURE__ */ React.createElement(RatingGroupItem, { key: index, index, ...props }, /* @__PURE__ */ React.createElement(RatingGroupItemIndicator, null)));
+  return /* @__PURE__ */ jsx(For, { each: api.items, children: (index) => /* @__PURE__ */ jsx(RatingGroupItem, { index, ...props, children: /* @__PURE__ */ jsx(RatingGroupItemIndicator, {}) }, index) });
 };
 const RatingGroupControl = withContext(RatingGroup.Control, "control", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(RatingGroupItems, null) }
+  defaultProps: { children: /* @__PURE__ */ jsx(RatingGroupItems, {}) }
 });
 const RatingGroupContext = RatingGroup.Context;
 const RatingGroupItemContext = RatingGroup.ItemContext;

package/dist/esm/components/scroll-area/scroll-area.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { ScrollArea } from '@ark-ui/react/scroll-area';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 
@@ -21,7 +22,7 @@ const ScrollAreaThumb = withContext(ScrollArea.Thumb, "thumb", { forwardAsChild:
 const ScrollAreaScrollbar = withContext(ScrollArea.Scrollbar, "scrollbar", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ScrollAreaThumb, null)
+    children: /* @__PURE__ */ jsx(ScrollAreaThumb, {})
   }
 });
 const ScrollAreaCorner = withContext(ScrollArea.Corner, "corner", { forwardAsChild: true });

package/dist/esm/components/segment-group/segment-group.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { SegmentGroup } from '@ark-ui/react/segment-group';
 import { useMemo } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -31,17 +32,19 @@ function normalize(items) {
 const SegmentGroupItems = (props) => {
   const { items, ...rest } = props;
   const data = useMemo(() => normalize(items), [items]);
-  return /* @__PURE__ */ React.createElement(For, { each: data }, (item) => /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(For, { each: data, children: (item) => /* @__PURE__ */ jsxs(
     SegmentGroupItem,
     {
-      key: item.value,
       value: item.value,
       disabled: item.disabled,
-      ...rest
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx(SegmentGroupItemText, { children: item.label }),
+        /* @__PURE__ */ jsx(SegmentGroupItemHiddenInput, {})
+      ]
     },
-    /* @__PURE__ */ React.createElement(SegmentGroupItemText, null, item.label),
-    /* @__PURE__ */ React.createElement(SegmentGroupItemHiddenInput, null)
-  ));
+    item.value
+  ) });
 };
 const SegmentGroupItemHiddenInput = SegmentGroup.ItemHiddenInput;
 const SegmentGroupContext = SegmentGroup.Context;

package/dist/esm/components/select/select.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Select } from '@ark-ui/react/select';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { CloseIcon, CheckIcon, ChevronDownIcon } from '../icons.js';
@@ -40,7 +41,7 @@ const SelectList = withContext(
 const SelectValueText = withContext(Select.ValueText, "valueText", { forwardAsChild: true });
 const SelectClearTrigger = withContext(Select.ClearTrigger, "clearTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(CloseIcon, { boxSize: "1em" }) }
+  defaultProps: { children: /* @__PURE__ */ jsx(CloseIcon, { boxSize: "1em" }) }
 });
 const SelectItemGroup = withContext(Select.ItemGroup, "itemGroup", { forwardAsChild: true });
 const SelectItemGroupLabel = withContext(Select.ItemGroupLabel, "itemGroupLabel", { forwardAsChild: true });
@@ -57,14 +58,14 @@ const SelectItemText = withContext(
 const SelectItemIndicator = withContext(Select.ItemIndicator, "itemIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(CheckIcon, null)
+    children: /* @__PURE__ */ jsx(CheckIcon, {})
   }
 });
 const SelectIndicatorGroup = withContext("div", "indicatorGroup");
 const SelectIndicator = withContext(Select.Indicator, "indicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ChevronDownIcon, null)
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
   }
 });
 const SelectControl = withContext(

package/dist/esm/components/separator/separator.js

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

package/dist/esm/components/show/show.js

@@ -1,3 +1,4 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { isValidElement } from 'react';
 
 function Show(props) {
@@ -8,7 +9,7 @@ function Show(props) {
   } else {
     result = typeof children === "function" ? children(when) : children;
   }
-  return isValidElement(result) ? result : /* @__PURE__ */ React.createElement(React.Fragment, null, result);
+  return isValidElement(result) ? result : /* @__PURE__ */ jsx(Fragment, { children: result });
 }
 
 export { Show };

package/dist/esm/components/simple-grid/simple-grid.js

@@ -1,8 +1,8 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useMainbaseContext } from '../../styled-system/provider.js';
 import { mapObject } from '../../utils/walk-object.js';
-import '../../utils/unit.js';
 import { Grid } from '../grid/grid.js';
 import '../grid/grid-item.js';
 
@@ -11,7 +11,7 @@ const SimpleGrid = forwardRef(
     const { columns, minChildWidth, ...rest } = props;
     const sys = useMainbaseContext();
     const templateColumns = minChildWidth ? widthToColumns(minChildWidth, sys) : countToColumns(columns);
-    return /* @__PURE__ */ React.createElement(Grid, { ref, templateColumns, ...rest });
+    return /* @__PURE__ */ jsx(Grid, { ref, templateColumns, ...rest });
   }
 );
 SimpleGrid.displayName = "SimpleGrid";

package/dist/esm/components/skeleton/skeleton.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { createRecipeContext } from '../../styled-system/create-recipe-context.js';
 import { Circle } from '../circle/index.js';
@@ -14,22 +15,22 @@ const Skeleton = withContext("div");
 const SkeletonPropsProvider = PropsProvider;
 const SkeletonCircle = React.forwardRef(function SkeletonCircle2(props, ref) {
   const { size, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(Circle, { size, asChild: true, ref }, /* @__PURE__ */ React.createElement(Skeleton, { ...rest }));
+  return /* @__PURE__ */ jsx(Circle, { size, asChild: true, ref, children: /* @__PURE__ */ jsx(Skeleton, { ...rest }) });
 });
 SkeletonCircle.displayName = "SkeletonCircle";
 const SkeletonText = React.forwardRef(
   function SkeletonText2(props, ref) {
     const { loading = true, noOfLines = 3, gap, rootProps, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(Stack, { gap, width: "full", ref, ...rootProps }, Array.from({ length: loading ? noOfLines : 1 }).map((_, index) => /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(Stack, { gap, width: "full", ref, ...rootProps, children: Array.from({ length: loading ? noOfLines : 1 }).map((_, index) => /* @__PURE__ */ 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/esm/components/skip-nav/skip-nav-content.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 import { fallbackId } from './skip-nav-link.js';
@@ -6,7 +7,7 @@ import { fallbackId } from './skip-nav-link.js';
 const SkipNavContent = forwardRef(
   function SkipNavContent2(props, ref) {
     const { id = fallbackId, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,

package/dist/esm/components/skip-nav/skip-nav-link.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 import { useRecipe } from '../../styled-system/use-recipe.js';
@@ -10,7 +11,7 @@ const SkipNavLink = forwardRef(
     const [variantProps, { id, ...localProps }] = recipe.splitVariantProps(props);
     const styles = recipe(variantProps);
     const targetId = id ?? fallbackId;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.a,
       {
         ...localProps,

package/dist/esm/components/slider/slider.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { Slider, useSliderContext } from '@ark-ui/react/slider';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -49,17 +50,20 @@ const SliderMarkerLabel = withContext("span", "markerLabel");
 const SliderDraggingIndicator = withContext(Slider.DraggingIndicator, "draggingIndicator", { forwardAsChild: true });
 const SliderThumbs = (props) => {
   const api = useSliderContext();
-  return /* @__PURE__ */ React.createElement(For, { each: api.value }, (_, index) => /* @__PURE__ */ React.createElement(SliderThumb, { key: index, index, ...props }, /* @__PURE__ */ React.createElement(SliderHiddenInput, null)));
+  return /* @__PURE__ */ jsx(For, { each: api.value, children: (_, index) => /* @__PURE__ */ jsx(SliderThumb, { index, ...props, children: /* @__PURE__ */ jsx(SliderHiddenInput, {}) }, index) });
 };
 const SliderMarks = 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__ */ 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__ */ jsxs(SliderMarker, { value, children: [
+        /* @__PURE__ */ jsx(SliderMarkerIndicator, {}),
+        label != null && /* @__PURE__ */ jsx(SliderMarkerLabel, { children: label })
+      ] }, index);
+    }) });
   }
 );
 const SliderControl = withContext(

package/dist/esm/components/splitter/splitter.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Splitter } from '@ark-ui/react/splitter';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 
@@ -28,7 +29,10 @@ const SplitterResizeTrigger = withContext(Splitter.ResizeTrigger, "resizeTrigger
   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__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(SplitterResizeTriggerSeparator, {}),
+      /* @__PURE__ */ jsx(SplitterResizeTriggerIndicator, {})
+    ] })
   }
 });
 const SplitterContext = Splitter.Context;

package/dist/esm/components/square/index.js

@@ -1,11 +1,12 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Box } from '../box/index.js';
 
 const Square = forwardRef(
   function Square2(props, ref) {
     const { size, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Box,
       {
         ...rest,

package/dist/esm/components/stack/get-separator-style.js

@@ -1,6 +1,4 @@
 import { mapObject } from '../../utils/walk-object.js';
-import 'react';
-import '../../utils/unit.js';
 
 function getSeparatorStyles(options) {
   const { gap, direction } = options;

package/dist/esm/components/stack/h-stack.js

@@ -1,10 +1,11 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Stack } from './stack.js';
 
 const HStack = forwardRef(
   function HStack2(props, ref) {
-    return /* @__PURE__ */ React.createElement(Stack, { align: "center", ...props, direction: "row", ref });
+    return /* @__PURE__ */ jsx(Stack, { align: "center", ...props, direction: "row", ref });
   }
 );
 HStack.displayName = "HStack";

package/dist/esm/components/stack/stack.js

@@ -1,8 +1,8 @@
 "use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo, isValidElement, cloneElement, Fragment, Children } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
 import { getSeparatorStyles } from './get-separator-style.js';
 
 function getValidChildren(children) {
@@ -35,10 +35,13 @@ const Stack = forwardRef(
         const sep = cloneElement(typedSep, {
           css: [separatorStyle, typedSep.props.css]
         });
-        return /* @__PURE__ */ React.createElement(Fragment, { key }, child, index === arr.length - 1 ? null : sep);
+        return /* @__PURE__ */ jsxs(Fragment, { children: [
+          child,
+          index === arr.length - 1 ? null : sep
+        ] }, key);
       });
     }, [children, separator, separatorStyle]);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,
@@ -49,9 +52,9 @@ const Stack = forwardRef(
         flexWrap: wrap,
         gap: separator ? void 0 : gap,
         className: cx("mainbase-stack", className),
-        ...rest
-      },
-      clones
+        ...rest,
+        children: clones
+      }
     );
   }
 );

package/dist/esm/components/stack/v-stack.js

@@ -1,10 +1,11 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Stack } from './stack.js';
 
 const VStack = forwardRef(
   function VStack2(props, ref) {
-    return /* @__PURE__ */ React.createElement(Stack, { align: "center", ...props, direction: "column", ref });
+    return /* @__PURE__ */ jsx(Stack, { align: "center", ...props, direction: "column", ref });
   }
 );
 VStack.displayName = "VStack";

package/dist/esm/components/stat/stat.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { mainbase } from '../../styled-system/factory.js';
@@ -35,14 +36,14 @@ const StatUpIndicator = withContext(
   {
     defaultProps: {
       "data-type": "up",
-      children: /* @__PURE__ */ React.createElement(ArrowUpIcon, null)
+      children: /* @__PURE__ */ jsx(ArrowUpIcon, {})
     }
   }
 );
 const StatDownIndicator = withContext("span", "indicator", {
   defaultProps: {
     "data-type": "down",
-    children: /* @__PURE__ */ React.createElement(ArrowDownIcon, null)
+    children: /* @__PURE__ */ jsx(ArrowDownIcon, {})
   }
 });
 const StatGroup = forwardRef(
@@ -52,7 +53,7 @@ const StatGroup = forwardRef(
       () => recipe.splitVariantProps(props),
       [props, recipe]
     );
-    return /* @__PURE__ */ React.createElement(PropsProvider, { value: variantProps }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(PropsProvider, { value: variantProps, children: /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,
@@ -63,7 +64,7 @@ const StatGroup = forwardRef(
         alignItems: "flex-start",
         ...localProps
       }
-    ));
+    ) });
   }
 );
 

package/dist/esm/components/steps/steps.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, Fragment } from 'react/jsx-runtime';
 import { Steps } from '@ark-ui/react/steps';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -41,7 +42,7 @@ const StepsContent = withContext(
 const StepsCompletedContent = withContext(Steps.CompletedContent, "content");
 const StepsNumber = forwardRef(
   function StepsNumber2(props, ref) {
-    return /* @__PURE__ */ React.createElement(Steps.ItemContext, null, (api) => /* @__PURE__ */ React.createElement(mainbase.div, { ref, ...props }, api.index + 1));
+    return /* @__PURE__ */ jsx(Steps.ItemContext, { children: (api) => /* @__PURE__ */ jsx(mainbase.div, { ref, ...props, children: api.index + 1 }) });
   }
 );
 const StepsTitle = withContext(
@@ -55,11 +56,11 @@ const StepsSeparator = withContext(
   { forwardAsChild: true }
 );
 const StepsStatus = (props) => {
-  return /* @__PURE__ */ React.createElement(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__ */ jsx(Steps.ItemContext, { children: (api) => {
+    if (api.current) return /* @__PURE__ */ jsx(Fragment, { children: props.current ?? props.incomplete });
+    if (api.completed) return /* @__PURE__ */ jsx(Fragment, { children: props.complete });
+    return /* @__PURE__ */ jsx(Fragment, { children: props.incomplete ?? props.current });
+  } });
 };
 const StepsIndicator = withContext(
   Steps.Indicator,
@@ -67,7 +68,7 @@ const StepsIndicator = withContext(
   {
     forwardAsChild: true,
     defaultProps: {
-      children: /* @__PURE__ */ React.createElement(StepsStatus, { complete: /* @__PURE__ */ React.createElement(CheckIcon, null), incomplete: /* @__PURE__ */ React.createElement(StepsNumber, null) })
+      children: /* @__PURE__ */ jsx(StepsStatus, { complete: /* @__PURE__ */ jsx(CheckIcon, {}), incomplete: /* @__PURE__ */ jsx(StepsNumber, {}) })
     }
   }
 );

package/dist/esm/components/switch/switch.js

@@ -1,10 +1,10 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Switch, useSwitchContext } from '@ark-ui/react/switch';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { mainbase } from '../../styled-system/factory.js';
 import { dataAttr } from '../../utils/attr.js';
-import '../../utils/unit.js';
 
 const {
   withProvider,
@@ -34,28 +34,28 @@ const SwitchControl = withContext(
   "control",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(SwitchThumb, null) }
+    defaultProps: { children: /* @__PURE__ */ jsx(SwitchThumb, {}) }
   }
 );
 const SwitchIndicator = forwardRef(function SwitchIndicator2(props, ref) {
   const api = useSwitchContext();
   const styles = useSwitchStyles();
   const { fallback, children, unstyled, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     mainbase.span,
     {
       ref,
       "data-checked": 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 = forwardRef(function SwitchThumbIndicator2(props, ref) {
   const api = useSwitchContext();
   const { fallback, children, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(mainbase.span, { ref, "data-checked": dataAttr(api.checked), ...rest }, api.checked ? children : fallback);
+  return /* @__PURE__ */ jsx(mainbase.span, { ref, "data-checked": dataAttr(api.checked), ...rest, children: api.checked ? children : fallback });
 });
 const SwitchContext = Switch.Context;
 const SwitchHiddenInput = Switch.HiddenInput;