mainbase-ui 3.36.0 → 3.37.1

package/dist/esm/components/button/button.js

@@ -1,11 +1,11 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { mergeProps } from '../../merge-props.js';
 import { createRecipeContext } from '../../styled-system/create-recipe-context.js';
 import { mainbase } from '../../styled-system/factory.js';
 import { dataAttr } from '../../utils/attr.js';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
 import { Loader } from '../loader/loader.js';
 import '../loader/loader-overlay.js';
 
@@ -28,7 +28,7 @@ const Button = forwardRef(
       spinnerPlacement,
       ...rest
     } = result.props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.button,
       {
         type: "button",
@@ -37,17 +37,17 @@ const Button = forwardRef(
         "data-loading": dataAttr(loading),
         disabled: loading || rest.disabled,
         className: cx(result.className, props.className),
-        css: [result.styles, props.css]
-      },
-      !props.asChild && loading ? /* @__PURE__ */ React.createElement(
-        Loader,
-        {
-          spinner,
-          text: loadingText,
-          spinnerPlacement
-        },
-        children
-      ) : children
+        css: [result.styles, props.css],
+        children: !props.asChild && loading ? /* @__PURE__ */ jsx(
+          Loader,
+          {
+            spinner,
+            text: loadingText,
+            spinnerPlacement,
+            children
+          }
+        ) : children
+      }
     );
   }
 );

package/dist/esm/components/button/close-button.js

@@ -1,9 +1,10 @@
+import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { CloseIcon } from '../icons.js';
 import { IconButton } from './icon-button.js';
 
 const CloseButton = React.forwardRef(function CloseButton2(props, ref) {
-  return /* @__PURE__ */ React.createElement(IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props }, props.children ?? /* @__PURE__ */ React.createElement(CloseIcon, null));
+  return /* @__PURE__ */ jsx(IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsx(CloseIcon, {}) });
 });
 CloseButton.displayName = "CloseButton";
 

package/dist/esm/components/button/icon-button.js

@@ -1,10 +1,11 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Button } from './button.js';
 
 const IconButton = forwardRef(
   function IconButton2(props, ref) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Button,
       {
         px: "0",

package/dist/esm/components/carousel/carousel.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { Carousel, useCarouselContext } from '@ark-ui/react/carousel';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -35,26 +36,30 @@ const CarouselItem = withContext(
 const CarouselControl = withContext(Carousel.Control, "control", { forwardAsChild: true });
 const CarouselPrevTrigger = withContext(Carousel.PrevTrigger, "prevTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(ChevronLeftIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsx(ChevronLeftIcon, {}) }
 });
 const CarouselNextTrigger = withContext(Carousel.NextTrigger, "nextTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(ChevronRightIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsx(ChevronRightIcon, {}) }
 });
 const CarouselIndicators = forwardRef(function CarouselIndicators2(props, ref) {
   const api = useCarouselContext();
-  return /* @__PURE__ */ React.createElement(CarouselIndicatorGroup, { ref }, api.pageSnapPoints.map((_, index) => /* @__PURE__ */ React.createElement(CarouselIndicator, { key: index, index, ...props })));
+  return /* @__PURE__ */ jsx(CarouselIndicatorGroup, { ref, children: api.pageSnapPoints.map((_, index) => /* @__PURE__ */ jsx(CarouselIndicator, { index, ...props }, index)) });
 });
 const CarouselAutoplayIndicator = ({
   play,
   paused
 }) => {
   const api = useCarouselContext();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, api.isPlaying ? paused : play);
+  return /* @__PURE__ */ jsx(Fragment, { children: api.isPlaying ? paused : play });
 };
 const CarouselProgressText = forwardRef(function CarouselProgressText2(props, ref) {
   const api = useCarouselContext();
-  return /* @__PURE__ */ React.createElement(Box, { ref, ...props }, api.page + 1, " / ", api.pageSnapPoints.length);
+  return /* @__PURE__ */ jsxs(Box, { ref, ...props, children: [
+    api.page + 1,
+    " / ",
+    api.pageSnapPoints.length
+  ] });
 });
 const CarouselAutoplayTrigger = withContext(Carousel.AutoplayTrigger, "autoplayTrigger", { forwardAsChild: true });
 const CarouselIndicatorGroup = withContext(Carousel.IndicatorGroup, "indicatorGroup", { forwardAsChild: true });

package/dist/esm/components/checkbox/checkbox.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Checkbox, useCheckboxContext } from '@ark-ui/react/checkbox';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -28,30 +29,30 @@ const CheckboxIndicator = forwardRef(function CheckboxIndicator2(props, ref) {
   const api = useCheckboxContext();
   const styles = useCheckboxStyles();
   if (checked && api.checked) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.svg,
       {
         ref,
         asChild: true,
         ...rest,
-        css: [styles.indicator, props.css]
-      },
-      checked
+        css: [styles.indicator, props.css],
+        children: checked
+      }
     );
   }
   if (indeterminate && api.indeterminate) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.svg,
       {
         ref,
         asChild: true,
         ...rest,
-        css: [styles.indicator, props.css]
-      },
-      indeterminate
+        css: [styles.indicator, props.css],
+        children: indeterminate
+      }
     );
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Checkmark,
     {
       ref,
@@ -69,7 +70,7 @@ const CheckboxControl = withContext(
   "control",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(CheckboxIndicator, null) }
+    defaultProps: { children: /* @__PURE__ */ jsx(CheckboxIndicator, {}) }
   }
 );
 const CheckboxGroup = mainbase(

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Checkbox, useCheckboxContext } from '@ark-ui/react/checkbox';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -18,7 +19,7 @@ const CheckboxCardLabel = withContext(Checkbox.Label, "label", { forwardAsChild:
 const CheckboxCardDescription = forwardRef(function CheckboxCardDescription2(props, ref) {
   const styles = useCheckboxCardStyles();
   const api = useCheckboxContext();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     mainbase.div,
     {
       ref,
@@ -36,7 +37,7 @@ const CheckboxCardContent = withContext("div", "content");
 const CheckboxCardIndicator = forwardRef(function CheckboxCardIndicator2(props, ref) {
   const api = useCheckboxContext();
   const styles = useCheckboxCardStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Checkmark,
     {
       ref,

package/dist/esm/components/checkmark/checkmark.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 Checkmark = forwardRef(
   function Checkmark2(props, ref) {
@@ -20,7 +20,7 @@ const Checkmark = forwardRef(
       ...rest
     } = restProps;
     const styles = unstyled ? EMPTY_STYLES : recipe(variantProps);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.svg,
       {
         ref,
@@ -33,9 +33,9 @@ const Checkmark = forwardRef(
         "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
         "data-disabled": dataAttr(disabled),
         css: [styles, css],
-        ...rest
-      },
-      indeterminate ? /* @__PURE__ */ React.createElement("path", { d: "M5 12h14" }) : checked ? /* @__PURE__ */ React.createElement("polyline", { points: "20 6 9 17 4 12" }) : null
+        ...rest,
+        children: indeterminate ? /* @__PURE__ */ jsx("path", { d: "M5 12h14" }) : checked ? /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" }) : null
+      }
     );
   }
 );

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

@@ -1,11 +1,12 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { Square } from '../square/index.js';
 
 const Circle = forwardRef(
   function Circle2(props, ref) {
     const { size, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(Square, { size, ref, borderRadius: "9999px", ...rest });
+    return /* @__PURE__ */ jsx(Square, { size, ref, borderRadius: "9999px", ...rest });
   }
 );
 Circle.displayName = "Circle";

package/dist/esm/components/client-only/client-only.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect } from 'react';
 import { Show } from '../show/show.js';
 
@@ -8,7 +9,7 @@ const ClientOnly = (props) => {
   useEffect(() => {
     setHasMounted(true);
   }, []);
-  return /* @__PURE__ */ React.createElement(Show, { when: hasMounted, fallback }, children);
+  return /* @__PURE__ */ jsx(Show, { when: hasMounted, fallback, children });
 };
 
 export { ClientOnly };

package/dist/esm/components/clipboard/clipboard.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Clipboard } from '@ark-ui/react/clipboard';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -22,8 +23,8 @@ const ClipboardControl = withContext(Clipboard.Control, "control", { forwardAsCh
 const ClipboardIndicator = withContext(Clipboard.Indicator, "indicator", {
   forwardAsChild: true,
   defaultProps: {
-    copied: /* @__PURE__ */ React.createElement(CheckIcon, { boxSize: "1em" }),
-    children: /* @__PURE__ */ React.createElement(CopyIcon, { boxSize: "1em" })
+    copied: /* @__PURE__ */ jsx(CheckIcon, { boxSize: "1em" }),
+    children: /* @__PURE__ */ jsx(CopyIcon, { boxSize: "1em" })
   }
 });
 const ClipboardInput = withContext(Clipboard.Input, "input", { forwardAsChild: true });
@@ -31,7 +32,7 @@ const ClipboardLabel = withContext(Clipboard.Label, "label", { forwardAsChild: t
 const ClipboardContext = Clipboard.Context;
 const ClipboardValueText = withContext(Clipboard.ValueText, "valueText", { forwardAsChild: true });
 const ClipboardCopyText = forwardRef(function ClipboardCopyText2(props, ref) {
-  return /* @__PURE__ */ React.createElement(ClipboardIndicator, { copied: "Copied", ...props, ref }, "Copy");
+  return /* @__PURE__ */ jsx(ClipboardIndicator, { copied: "Copied", ...props, ref, children: "Copy" });
 });
 
 export { ClipboardContext, ClipboardControl, ClipboardCopyText, ClipboardIndicator, ClipboardInput, ClipboardLabel, ClipboardPropsProvider, ClipboardRoot, ClipboardRootProvider, ClipboardTrigger, ClipboardValueText, useClipboardStyles };

package/dist/esm/components/code-block/code-block-adapter-provider.js

@@ -1,11 +1,12 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { CodeBlockAdapterContextProvider } from './code-block-adapter-context.js';
 import { useCodeHighlight } from './use-code-highlight.js';
 
 function CodeBlockAdapterProvider(props) {
   const { children, value } = props;
   const context = useCodeHighlight(value);
-  return /* @__PURE__ */ React.createElement(CodeBlockAdapterContextProvider, { value: context }, children);
+  return /* @__PURE__ */ jsx(CodeBlockAdapterContextProvider, { value: context, children });
 }
 
 export { CodeBlockAdapterProvider };

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

@@ -1,15 +1,13 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { useClipboard } from '@ark-ui/react/clipboard';
 import { ark } from '@ark-ui/react/factory';
 import { forwardRef, useMemo, useId } from 'react';
-import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { useControllableState } from '../../hooks/use-controllable-state.js';
-import '@ark-ui/react';
-import '@ark-ui/react/collection';
+import { mergeProps } from '../../merge-props.js';
+import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { dataAttr } from '../../utils/attr.js';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
-import { mergeProps } from '../../merge-props.js';
 import { CopyIcon, CheckIcon, ChevronUpIcon, ChevronDownIcon } from '../icons.js';
 import { useCodeBlockAdapterContext } from './code-block-adapter-context.js';
 import { CodeBlockContextProvider, useCodeBlockContext } from './code-block-context.js';
@@ -74,7 +72,7 @@ const RootBase = forwardRef(
       }),
       [code, language, clipboard, collapsible, meta]
     );
-    return /* @__PURE__ */ React.createElement(CodeBlockContextProvider, { value: context }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(CodeBlockContextProvider, { value: context, children: /* @__PURE__ */ jsx(
       ark.div,
       {
         ref,
@@ -88,10 +86,10 @@ const RootBase = forwardRef(
         style: {
           ...rest.style,
           ["--code-block-line-length"]: `${String(codeLines).length}ch`
-        }
-      },
-      children
-    ));
+        },
+        children
+      }
+    ) });
   }
 );
 const CodeBlockRoot = withProvider(
@@ -104,16 +102,16 @@ const ContentBase = forwardRef(
   function ContentBase2(props, ref) {
     const { children, ...restProps } = props;
     const { collapsible } = useCodeBlockContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ark.div,
       {
         ref,
         id: collapsible.contentId,
         "data-expanded": dataAttr(!collapsible.collapsed),
         "aria-expanded": !collapsible.collapsed,
-        ...restProps
-      },
-      children
+        ...restProps,
+        children
+      }
     );
   }
 );
@@ -138,7 +136,7 @@ const CodeText = forwardRef(
     const { highlight } = useCodeBlockAdapterContext();
     const highlighted = highlight?.({ code, language, meta });
     const codeContentProps = highlighted?.highlighted ? { dangerouslySetInnerHTML: { __html: highlighted.code } } : { children: code };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ark.code,
       {
         "data-plaintext": dataAttr(!highlighted?.highlighted),
@@ -160,13 +158,13 @@ const BaseCopyTrigger = forwardRef(
   function BaseCopyTrigger2(props, ref) {
     const { children, ...restProps } = props;
     const { clipboard } = useCodeBlockContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ark.button,
       {
         ref,
-        ...mergeProps(clipboard.getTriggerProps(), restProps)
-      },
-      children
+        ...mergeProps(clipboard.getTriggerProps(), restProps),
+        children
+      }
     );
   }
 );
@@ -175,20 +173,20 @@ const BaseCopyIndicator = forwardRef(
   function BaseCopyIndicator2(props, ref) {
     const { children, copied, ...restProps } = props;
     const { clipboard } = useCodeBlockContext();
-    return /* @__PURE__ */ React.createElement(ark.span, { ref, ...restProps }, clipboard.copied ? copied : children);
+    return /* @__PURE__ */ jsx(ark.span, { ref, ...restProps, children: clipboard.copied ? copied : children });
   }
 );
 const CodeBlockCopyIndicator = withContext(BaseCopyIndicator, "copyIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    copied: /* @__PURE__ */ React.createElement(CheckIcon, { boxSize: "1em" }),
-    children: /* @__PURE__ */ React.createElement(CopyIcon, { boxSize: "1em" })
+    copied: /* @__PURE__ */ jsx(CheckIcon, { boxSize: "1em" }),
+    children: /* @__PURE__ */ jsx(CopyIcon, { boxSize: "1em" })
   }
 });
 const BaseCollapseTrigger = forwardRef(function BaseCollapseTrigger2(props, ref) {
   const { children, ...restProps } = props;
   const { collapsible } = useCodeBlockContext();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     ark.button,
     {
       type: "button",
@@ -200,33 +198,33 @@ const BaseCollapseTrigger = forwardRef(function BaseCollapseTrigger2(props, ref)
       onClick: (e) => {
         restProps.onClick?.(e);
         collapsible.toggleCollapsed();
-      }
-    },
-    children
+      },
+      children
+    }
   );
 });
 const CodeBlockCollapseTrigger = withContext(BaseCollapseTrigger, "collapseTrigger", { forwardAsChild: true });
 const BaseCollapseIndicator = forwardRef(function BaseCollapseIndicator2(props, ref) {
   const { children, collapsed, ...restProps } = props;
   const { collapsible } = useCodeBlockContext();
-  return /* @__PURE__ */ React.createElement(ark.span, { ref, ...restProps }, collapsible.collapsed ? collapsed : children);
+  return /* @__PURE__ */ jsx(ark.span, { ref, ...restProps, children: collapsible.collapsed ? collapsed : children });
 });
 const CodeBlockCollapseIndicator = withContext(BaseCollapseIndicator, "collapseIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    collapsed: /* @__PURE__ */ React.createElement(ChevronDownIcon, { boxSize: "1em" }),
-    children: /* @__PURE__ */ React.createElement(ChevronUpIcon, { boxSize: "1em" })
+    collapsed: /* @__PURE__ */ jsx(ChevronDownIcon, { boxSize: "1em" }),
+    children: /* @__PURE__ */ jsx(ChevronUpIcon, { boxSize: "1em" })
   }
 });
 const CodeBlockCollapseText = forwardRef(function CodeBlockCollapseText2(props, ref) {
-  return /* @__PURE__ */ React.createElement(CodeBlockCollapseIndicator, { ref, ...props, collapsed: "Expand code" }, props.children || "Collapse code");
+  return /* @__PURE__ */ jsx(CodeBlockCollapseIndicator, { ref, ...props, collapsed: "Expand code", children: props.children || "Collapse code" });
 });
 const CodeBlockFooter = withContext("footer", "footer");
 const CodeBlockControl = withContext("div", "control");
 const BaseOverlay = forwardRef(
   function BaseOverlay2(props, ref) {
     const { collapsible } = useCodeBlockContext();
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ark.div,
       {
         ref,

package/dist/esm/components/color-picker/color-picker.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { ColorPicker, useColorPickerContext } from '@ark-ui/react/color-picker';
 import { forwardRef } from 'react';
 import { mergeProps } from '../../merge-props.js';
@@ -28,7 +29,7 @@ const ColorPickerValueSwatch = withContext(ColorPicker.ValueSwatch, "swatch", {
 const ColorPickerTrigger = withContext(ColorPicker.Trigger, "trigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ColorPickerValueSwatch, null)
+    children: /* @__PURE__ */ jsx(ColorPickerValueSwatch, {})
   }
 });
 const ColorPickerPositioner = withContext(ColorPicker.Positioner, "positioner", { forwardAsChild: true });
@@ -38,7 +39,10 @@ const ColorPickerAreaThumb = withContext(ColorPicker.AreaThumb, "areaThumb", { f
 const ColorPickerArea = withContext(ColorPicker.Area, "area", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ColorPickerAreaBackground, null), /* @__PURE__ */ React.createElement(ColorPickerAreaThumb, null))
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ColorPickerAreaBackground, {}),
+      /* @__PURE__ */ jsx(ColorPickerAreaThumb, {})
+    ] })
   }
 });
 const ColorPickerChannelSliderTrack = withContext(ColorPicker.ChannelSliderTrack, "channelSliderTrack", {
@@ -51,17 +55,24 @@ const ColorPickerTransparencyGrid = withContext(ColorPicker.TransparencyGrid, "t
 const ColorPickerChannelSlider = withContext(ColorPicker.ChannelSlider, "channelSlider", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(ColorPickerTransparencyGrid, { size: "0.6rem" }), /* @__PURE__ */ React.createElement(ColorPickerChannelSliderTrack, null), /* @__PURE__ */ React.createElement(ColorPickerChannelSliderThumb, null))
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(ColorPickerTransparencyGrid, { size: "0.6rem" }),
+      /* @__PURE__ */ jsx(ColorPickerChannelSliderTrack, {}),
+      /* @__PURE__ */ jsx(ColorPickerChannelSliderThumb, {})
+    ] })
   }
 });
 const ColorPickerSliders = forwardRef(
   function ColorPickerSliders2(props, ref) {
-    return /* @__PURE__ */ React.createElement(Stack, { gap: "1", flex: "1", px: "1", ref, ...props }, /* @__PURE__ */ React.createElement(ColorPickerChannelSlider, { channel: "hue" }), /* @__PURE__ */ React.createElement(ColorPickerChannelSlider, { channel: "alpha" }));
+    return /* @__PURE__ */ jsxs(Stack, { gap: "1", flex: "1", px: "1", ref, ...props, children: [
+      /* @__PURE__ */ jsx(ColorPickerChannelSlider, { channel: "hue" }),
+      /* @__PURE__ */ jsx(ColorPickerChannelSlider, { channel: "alpha" })
+    ] });
   }
 );
 const ColorPickerChannelInput = withContext(ColorPicker.ChannelInput, "channelInput", { forwardAsChild: true });
 const ColorPickerInput = forwardRef(function ColorHexInput(props, ref) {
-  return /* @__PURE__ */ React.createElement(ColorPickerChannelInput, { channel: "hex", ref, ...props });
+  return /* @__PURE__ */ jsx(ColorPickerChannelInput, { channel: "hex", ref, ...props });
 });
 const ColorPickerSwatchGroup = withContext(ColorPicker.SwatchGroup, "swatchGroup", { forwardAsChild: true });
 const ColorPickerSwatchTrigger = withContext(ColorPicker.SwatchTrigger, "swatchTrigger", { forwardAsChild: true });
@@ -75,10 +86,10 @@ const ColorPickerEyeDropperTrigger = withContext(ColorPicker.EyeDropperTrigger,
   forwardAsChild: true
 });
 const ColorPickerEyeDropper = forwardRef(function ColorPickerEyeDropper2(props, ref) {
-  const { children = /* @__PURE__ */ React.createElement(PipetteIcon, null), ...rest } = props;
+  const { children = /* @__PURE__ */ jsx(PipetteIcon, {}), ...rest } = props;
   const picker = useColorPickerContext();
   const localProps = mergeProps(picker.getEyeDropperTriggerProps(), rest);
-  return /* @__PURE__ */ React.createElement(IconButton, { ref, ...localProps }, children);
+  return /* @__PURE__ */ jsx(IconButton, { ref, ...localProps, children });
 });
 const ColorPickerChannelSliderValueText = withContext(ColorPicker.ChannelSliderValueText, "channelSliderValueText", {
   forwardAsChild: true
@@ -87,7 +98,7 @@ const ColorPickerChannelSliderLabel = withContext(ColorPicker.ChannelSliderLabel
   forwardAsChild: true
 });
 const ColorPickerHiddenInput = forwardRef(function ColorPickerHiddenInput2(props, ref) {
-  return /* @__PURE__ */ React.createElement(ColorPicker.HiddenInput, { tabIndex: -1, ref, ...props });
+  return /* @__PURE__ */ jsx(ColorPicker.HiddenInput, { tabIndex: -1, ref, ...props });
 });
 const ColorPickerContext = ColorPicker.Context;
 const ColorPickerChannelText = withContext("span", "channelText", {

package/dist/esm/components/color-swatch/index.js

@@ -1,9 +1,9 @@
 "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 '../../utils/unit.js';
 import { Grid } from '../grid/grid.js';
 import '../grid/grid-item.js';
 
@@ -14,7 +14,7 @@ const ColorSwatch = forwardRef(
   function ColorSwatch2(props, ref) {
     const { value, ...restProps } = props;
     const { styles, className, props: localProps } = useRecipeResult(restProps);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.span,
       {
         ...localProps,
@@ -33,21 +33,21 @@ const ColorSwatchMix = (props) => {
     throw new Error("ColorSwatchMix doesn't support more than 4 colors");
   }
   const isThreeColors = items.length === 3;
-  return /* @__PURE__ */ React.createElement(ColorSwatch, { overflow: "hidden", ...restProps, value: "transparent" }, /* @__PURE__ */ React.createElement(Grid, { templateColumns: "var(--swatch-size) var(--swatch-size)" }, items.map((item, index) => {
+  return /* @__PURE__ */ jsx(ColorSwatch, { overflow: "hidden", ...restProps, value: "transparent", children: /* @__PURE__ */ jsx(Grid, { templateColumns: "var(--swatch-size) var(--swatch-size)", children: items.map((item, index) => {
     const isLast = index === items.length - 1;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       ColorSwatch,
       {
         size: "inherit",
-        key: item,
         rounded: "none",
         value: item,
         boxShadow: "none",
         gridColumn: isThreeColors && isLast ? "span 2 / span 2" : void 0,
         width: isThreeColors && isLast ? "unset" : void 0
-      }
+      },
+      item
     );
-  })));
+  }) }) });
 };
 
 export { ColorSwatch, ColorSwatchMix, ColorSwatchPropsProvider };

package/dist/esm/components/combobox/combobox.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Combobox } from '@ark-ui/react/combobox';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { ChevronDownIcon, CloseIcon, CheckIcon } from '../icons.js';
@@ -22,7 +23,7 @@ const ComboboxTrigger = withContext(Combobox.Trigger, "trigger", {
   forwardAsChild: true,
   forwardProps: ["focusable"],
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ChevronDownIcon, null)
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
   }
 });
 const ComboboxPositioner = withContext(Combobox.Positioner, "positioner", { forwardAsChild: true });
@@ -40,7 +41,7 @@ const ComboboxInput = withContext(
 const ComboboxClearTrigger = withContext(Combobox.ClearTrigger, "clearTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(CloseIcon, null)
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
   }
 });
 const ComboboxIndicatorGroup = withContext("div", "indicatorGroup");
@@ -55,7 +56,7 @@ const ComboboxItemText = withContext(Combobox.ItemText, "itemText", { forwardAsC
 const ComboboxItemIndicator = withContext(Combobox.ItemIndicator, "itemIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(CheckIcon, null)
+    children: /* @__PURE__ */ jsx(CheckIcon, {})
   }
 });
 const ComboboxControl = withContext(Combobox.Control, "control", { forwardAsChild: true });