mainbase-ui 3.36.0 → 3.37.1

package/README.md

@@ -1,9 +1,5 @@
-# @mainbase-ui/react
+# mainbase-ui
 
-[![npm version](https://npmx.dev/api/registry/badge/version/@mainbase-ui/react)](https://npmx.dev/package/@mainbase-ui/react)
-[![npm downloads](https://npmx.dev/api/registry/badge/downloads/@mainbase-ui/react)](https://npmx.dev/package/@mainbase-ui/react)
-[![types](https://npmx.dev/api/registry/badge/types/@mainbase-ui/react)](https://npmx.dev/package/@mainbase-ui/react)
-[![license](https://npmx.dev/api/registry/badge/license/@mainbase-ui/react)](https://github.com/mainbase-ui/mainbase-ui/blob/main/LICENSE)
 
 Mainbase UI is a component system for building products with speed. Accessible
 React components for building high-quality web apps and design systems. Works
@@ -20,28 +16,26 @@ with Next.js RSC.
 
 ## Documentation
 
-https://mainbase-ui.com
+https://mainbase.pitchpit.ru
 
-- Latest: https://mainbase-ui.com
-- v2: https://v2.mainbase-ui.com
-- v1: https://v1.mainbase-ui.com
+- Latest: https://mainbase.pitchpit.ru
 
 ## Installation
 
-Install the `@mainbase-ui/react` package and its peer dependency:
+Install the `mainbase-ui` package and its peer dependency:
 
 ```sh
 # with npm
-npm i @mainbase-ui/react @emotion/react
+npm i mainbase-ui @emotion/react
 
 # with yarn
-yarn add @mainbase-ui/react @emotion/react
+yarn add mainbase-ui @emotion/react
 
 # with pnpm
-pnpm add @mainbase-ui/react @emotion/react
+pnpm add mainbase-ui @emotion/react
 
 # with bun
-bun add @mainbase-ui/react @emotion/react
+bun add mainbase-ui @emotion/react
 ```
 
 ## Getting started
@@ -49,7 +43,7 @@ bun add @mainbase-ui/react @emotion/react
 1. Wrap your application with the `MainbaseProvider` component:
 
 ```tsx
-import { MainbaseProvider, defaultSystem } from "@mainbase-ui/react"
+import { MainbaseProvider, defaultSystem } from "mainbase-ui"
 
 export const App = ({ children }) => (
   <MainbaseProvider value={defaultSystem}>{children}</MainbaseProvider>
@@ -59,20 +53,15 @@ export const App = ({ children }) => (
 2. Start using components:
 
 ```tsx
-import { Button } from "@mainbase-ui/react"
+import { Button } from "mainbase-ui"
 
 const Demo = () => <Button>I just consumed some ⚡️Mainbase!</Button>
 ```
 
-For framework-specific setup (Next.js, Vite, etc.), see the
-[installation guide](https://mainbase-ui.com/docs/get-started/installation).
 
-## Contributing
 
-Feel like contributing? That's awesome! Read the
-[contribution guide](https://mainbase-ui.com/docs/get-started/contributing) to get
-started.
+
 
 ## License
 
-MIT © [Segun Adebayo](https://github.com/segunadebayo)
+MIT

package/dist/cjs/components/accordion/accordion.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var accordion = require('@ark-ui/react/accordion');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var icons = require('../icons.cjs');
@@ -29,7 +30,7 @@ const AccordionItemTrigger = withContext(accordion.Accordion.ItemTrigger, "itemT
 const AccordionItemIndicator = withContext(accordion.Accordion.ItemIndicator, "itemIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.ChevronDownIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronDownIcon, {})
   }
 });
 const AccordionContext = accordion.Accordion.Context;

package/dist/cjs/components/alert/alert.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 createContext = require('../../create-context.cjs');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
@@ -26,7 +27,7 @@ const AlertRoot = withProvider(
     wrapElement(element, props) {
       return (
         // @ts-ignore fix later
-        /* @__PURE__ */ React.createElement(AlertStatusProvider, { value: { status: props.status || "info" } }, element)
+        /* @__PURE__ */ jsxRuntime.jsx(AlertStatusProvider, { value: { status: props.status || "info" }, children: element })
       );
     }
   }
@@ -48,13 +49,13 @@ const iconMap = {
   error: icons.WarningIcon,
   neutral: icons.InfoIcon
 };
-const AlertIndicator = React$1.forwardRef(
+const AlertIndicator = React.forwardRef(
   function AlertIndicator2(props, ref) {
     const api = useAlertStatusContext();
     const styles = useAlertStyles();
-    const Icon = typeof api.status === "string" ? iconMap[api.status] : React$1.Fragment;
-    const { children = /* @__PURE__ */ React.createElement(Icon, null), ...rest } = props;
-    return /* @__PURE__ */ React.createElement(factory.mainbase.span, { ref, ...rest, css: [styles.indicator, props.css] }, children);
+    const Icon = typeof api.status === "string" ? iconMap[api.status] : React.Fragment;
+    const { children = /* @__PURE__ */ jsxRuntime.jsx(Icon, {}), ...rest } = props;
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.mainbase.span, { ref, ...rest, css: [styles.indicator, props.css], children });
   }
 );
 

package/dist/cjs/components/aspect-ratio/aspect-ratio.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 config = require('../../styled-system/config.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var cx = require('../../utils/cx.cjs');
 var walkObject = require('../../utils/walk-object.cjs');
-require('../../utils/unit.cjs');
 
 const baseStyle = config.defineStyle({
   "& > *:not(style)": {
@@ -26,11 +26,11 @@ const baseStyle = config.defineStyle({
     objectFit: "cover"
   }
 });
-const AspectRatio = React$1.forwardRef(
+const AspectRatio = React.forwardRef(
   function AspectRatio2(props, ref) {
     const { ratio = 4 / 3, children, className, ...rest } = props;
-    const child = React$1.Children.only(children);
-    return /* @__PURE__ */ React.createElement(
+    const child = React.Children.only(children);
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ref,
@@ -43,9 +43,9 @@ const AspectRatio = React$1.forwardRef(
           paddingBottom: walkObject.mapObject(ratio, (r) => `${1 / r * 100}%`)
         },
         ...rest,
-        css: [baseStyle, props.css]
-      },
-      child
+        css: [baseStyle, props.css],
+        children: child
+      }
     );
   }
 );

package/dist/cjs/components/avatar/avatar.cjs

@@ -1,13 +1,13 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var avatar = require('@ark-ui/react/avatar');
-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 useSlotRecipe = require('../../styled-system/use-slot-recipe.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 var group = require('../group/group.cjs');
 
 const {
@@ -28,7 +28,7 @@ const StyledFallback = factory.mainbase(avatar.Avatar.Fallback, {}, { forwardAsC
 function getFallbackChildren(props) {
   if (props.children || props.asChild) return props.children;
   if (props.name) return getInitials(props.name);
-  return /* @__PURE__ */ React.createElement(AvatarIcon, null);
+  return /* @__PURE__ */ jsxRuntime.jsx(AvatarIcon, {});
 }
 function getInitials(name) {
   const names = name.trim().split(" ");
@@ -36,20 +36,20 @@ function getInitials(name) {
   const lastName = names.length > 1 ? names[names.length - 1] : "";
   return firstName && lastName ? `${firstName.charAt(0)}${lastName.charAt(0)}` : firstName.charAt(0);
 }
-const AvatarFallback = React$1.forwardRef(
+const AvatarFallback = React.forwardRef(
   function AvatarFallback2(props, ref) {
     const styles = useAvatarStyles();
     const classNames = useClassNames();
     const { name: _, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       StyledFallback,
       {
         ref,
         ...rest,
         className: cx.cx(props.className, classNames.fallback),
-        css: [styles.fallback, props.css]
-      },
-      getFallbackChildren(props)
+        css: [styles.fallback, props.css],
+        children: getFallbackChildren(props)
+      }
     );
   }
 );
@@ -64,9 +64,9 @@ const AvatarImage = withContext(
     }
   }
 );
-const AvatarIcon = React$1.forwardRef(
+const AvatarIcon = React.forwardRef(
   function AvatarIcon2(props, ref) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.svg,
       {
         stroke: "currentColor",
@@ -76,21 +76,21 @@ const AvatarIcon = React$1.forwardRef(
         height: "1.2em",
         width: "1.2em",
         ref,
-        ...props
-      },
-      /* @__PURE__ */ React.createElement("path", { d: "M20 22H18V20C18 18.3431 16.6569 17 15 17H9C7.34315 17 6 18.3431 6 20V22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13ZM12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" })
+        ...props,
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M20 22H18V20C18 18.3431 16.6569 17 15 17H9C7.34315 17 6 18.3431 6 20V22H4V20C4 17.2386 6.23858 15 9 15H15C17.7614 15 20 17.2386 20 20V22ZM12 13C8.68629 13 6 10.3137 6 7C6 3.68629 8.68629 1 12 1C15.3137 1 18 3.68629 18 7C18 10.3137 15.3137 13 12 13ZM12 11C14.2091 11 16 9.20914 16 7C16 4.79086 14.2091 3 12 3C9.79086 3 8 4.79086 8 7C8 9.20914 9.79086 11 12 11Z" })
+      }
     );
   }
 );
 const AvatarContext = avatar.Avatar.Context;
-const AvatarGroup = React$1.forwardRef(
+const AvatarGroup = React.forwardRef(
   function AvatarGroup2(props, ref) {
     const recipe = useSlotRecipe.useSlotRecipe({ key: "avatar" });
-    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(group.Group, { gap: "0", spaceX: "-3", ref, ...localProps }));
+    return /* @__PURE__ */ jsxRuntime.jsx(PropsProvider, { value: variantProps, children: /* @__PURE__ */ jsxRuntime.jsx(group.Group, { gap: "0", spaceX: "-3", ref, ...localProps }) });
   }
 );
 

package/dist/cjs/components/bleed/bleed.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 is = require('../../utils/is.cjs');
-var walkObject = require('../../utils/walk-object.cjs');
 var unit = require('../../utils/unit.cjs');
+var walkObject = require('../../utils/walk-object.cjs');
 
 const valueFn = (v) => unit.isCssUnit(v) || is.isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
-const Bleed = React$1.forwardRef(
+const Bleed = React.forwardRef(
   function Bleed2(props, ref) {
     const {
       inline,
@@ -20,7 +21,7 @@ const Bleed = React$1.forwardRef(
       css: cssProp,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ref,

package/dist/cjs/components/breadcrumb/breadcrumb.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');
 
@@ -36,14 +37,14 @@ const BreadcrumbCurrentLink = withContext("span", "currentLink", {
 const BreadcrumbSeparator = withContext("li", "separator", {
   defaultProps: {
     "aria-hidden": true,
-    children: /* @__PURE__ */ React.createElement(icons.ChevronRightIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {})
   }
 });
 const BreadcrumbEllipsis = withContext("li", "ellipsis", {
   defaultProps: {
     role: "presentation",
     "aria-hidden": true,
-    children: /* @__PURE__ */ React.createElement(icons.EllpsisIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.EllpsisIcon, {})
   }
 });
 

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

@@ -1,19 +1,20 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var useRecipe = require('../../styled-system/use-recipe.cjs');
 var group = require('../group/group.cjs');
 var button = require('./button.cjs');
 
-const ButtonGroup = React$1.forwardRef(
+const ButtonGroup = React.forwardRef(
   function ButtonGroup2(props, ref) {
     const recipe = useRecipe.useRecipe({ key: "button" });
-    const [variantProps, otherProps] = React$1.useMemo(
+    const [variantProps, otherProps] = React.useMemo(
       () => recipe.splitVariantProps(props),
       [props, recipe]
     );
-    return /* @__PURE__ */ React.createElement(button.ButtonPropsProvider, { value: variantProps }, /* @__PURE__ */ React.createElement(group.Group, { ref, ...otherProps }));
+    return /* @__PURE__ */ jsxRuntime.jsx(button.ButtonPropsProvider, { value: variantProps, children: /* @__PURE__ */ jsxRuntime.jsx(group.Group, { ref, ...otherProps }) });
   }
 );
 ButtonGroup.displayName = "ButtonGroup";

package/dist/cjs/components/button/button.cjs

@@ -1,23 +1,23 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var mergeProps = require('../../merge-props.cjs');
 var createRecipeContext = require('../../styled-system/create-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var attr = require('../../utils/attr.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 var loader = require('../loader/loader.cjs');
 require('../loader/loader-overlay.cjs');
 
 const { useRecipeResult, PropsProvider, usePropsContext } = createRecipeContext.createRecipeContext(
   { key: "button" }
 );
-const Button = React$1.forwardRef(
+const Button = React.forwardRef(
   function Button2(inProps, ref) {
     const propsContext = usePropsContext();
-    const props = React$1.useMemo(
+    const props = React.useMemo(
       () => mergeProps.mergeProps(propsContext, inProps),
       [propsContext, inProps]
     );
@@ -30,7 +30,7 @@ const Button = React$1.forwardRef(
       spinnerPlacement,
       ...rest
     } = result.props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.button,
       {
         type: "button",
@@ -39,17 +39,17 @@ const Button = React$1.forwardRef(
         "data-loading": attr.dataAttr(loading),
         disabled: loading || rest.disabled,
         className: cx.cx(result.className, props.className),
-        css: [result.styles, props.css]
-      },
-      !props.asChild && loading ? /* @__PURE__ */ React.createElement(
-        loader.Loader,
-        {
-          spinner,
-          text: loadingText,
-          spinnerPlacement
-        },
-        children
-      ) : children
+        css: [result.styles, props.css],
+        children: !props.asChild && loading ? /* @__PURE__ */ jsxRuntime.jsx(
+          loader.Loader,
+          {
+            spinner,
+            text: loadingText,
+            spinnerPlacement,
+            children
+          }
+        ) : children
+      }
     );
   }
 );

package/dist/cjs/components/button/close-button.cjs

@@ -1,5 +1,6 @@
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var icons = require('../icons.cjs');
 var iconButton = require('./icon-button.cjs');
@@ -24,7 +25,7 @@ function _interopNamespaceDefault(e) {
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
 const CloseButton = React__namespace.forwardRef(function CloseButton2(props, ref) {
-  return /* @__PURE__ */ React__namespace.createElement(iconButton.IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props }, props.children ?? /* @__PURE__ */ React__namespace.createElement(icons.CloseIcon, null));
+  return /* @__PURE__ */ jsxRuntime.jsx(iconButton.IconButton, { variant: "ghost", "aria-label": "Close", ref, ...props, children: props.children ?? /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {}) });
 });
 CloseButton.displayName = "CloseButton";
 

package/dist/cjs/components/button/icon-button.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 button = require('./button.cjs');
 
-const IconButton = React$1.forwardRef(
+const IconButton = React.forwardRef(
   function IconButton2(props, ref) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       button.Button,
       {
         px: "0",

package/dist/cjs/components/carousel/carousel.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var carousel = require('@ark-ui/react/carousel');
-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');
 var icons = require('../icons.cjs');
@@ -37,26 +38,30 @@ const CarouselItem = withContext(
 const CarouselControl = withContext(carousel.Carousel.Control, "control", { forwardAsChild: true });
 const CarouselPrevTrigger = withContext(carousel.Carousel.PrevTrigger, "prevTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(icons.ChevronLeftIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronLeftIcon, {}) }
 });
 const CarouselNextTrigger = withContext(carousel.Carousel.NextTrigger, "nextTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(icons.ChevronRightIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(icons.ChevronRightIcon, {}) }
 });
-const CarouselIndicators = React$1.forwardRef(function CarouselIndicators2(props, ref) {
+const CarouselIndicators = React.forwardRef(function CarouselIndicators2(props, ref) {
   const api = carousel.useCarouselContext();
-  return /* @__PURE__ */ React.createElement(CarouselIndicatorGroup, { ref }, api.pageSnapPoints.map((_, index) => /* @__PURE__ */ React.createElement(CarouselIndicator, { key: index, index, ...props })));
+  return /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicatorGroup, { ref, children: api.pageSnapPoints.map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(CarouselIndicator, { index, ...props }, index)) });
 });
 const CarouselAutoplayIndicator = ({
   play,
   paused
 }) => {
   const api = carousel.useCarouselContext();
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, api.isPlaying ? paused : play);
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: api.isPlaying ? paused : play });
 };
-const CarouselProgressText = React$1.forwardRef(function CarouselProgressText2(props, ref) {
+const CarouselProgressText = React.forwardRef(function CarouselProgressText2(props, ref) {
   const api = carousel.useCarouselContext();
-  return /* @__PURE__ */ React.createElement(index.Box, { ref, ...props }, api.page + 1, " / ", api.pageSnapPoints.length);
+  return /* @__PURE__ */ jsxRuntime.jsxs(index.Box, { ref, ...props, children: [
+    api.page + 1,
+    " / ",
+    api.pageSnapPoints.length
+  ] });
 });
 const CarouselAutoplayTrigger = withContext(carousel.Carousel.AutoplayTrigger, "autoplayTrigger", { forwardAsChild: true });
 const CarouselIndicatorGroup = withContext(carousel.Carousel.IndicatorGroup, "indicatorGroup", { forwardAsChild: true });

package/dist/cjs/components/checkbox/checkbox.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var checkbox = require('@ark-ui/react/checkbox');
-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 checkmark = require('../checkmark/checkmark.cjs');
@@ -25,35 +26,35 @@ const CheckboxLabel = withContext(
   "label",
   { forwardAsChild: true }
 );
-const CheckboxIndicator = React$1.forwardRef(function CheckboxIndicator2(props, ref) {
+const CheckboxIndicator = React.forwardRef(function CheckboxIndicator2(props, ref) {
   const { checked, indeterminate, ...rest } = props;
   const api = checkbox.useCheckboxContext();
   const styles = useCheckboxStyles();
   if (checked && api.checked) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.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__ */ jsxRuntime.jsx(
       factory.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__ */ jsxRuntime.jsx(
     checkmark.Checkmark,
     {
       ref,
@@ -71,7 +72,7 @@ const CheckboxControl = withContext(
   "control",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(CheckboxIndicator, null) }
+    defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(CheckboxIndicator, {}) }
   }
 );
 const CheckboxGroup = factory.mainbase(

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

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var checkbox = require('@ark-ui/react/checkbox');
-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 checkmark = require('../checkmark/checkmark.cjs');
@@ -17,10 +18,10 @@ const CheckboxCardRootProvider = withProvider(checkbox.Checkbox.RootProvider, "r
 const CheckboxCardRoot = withProvider(checkbox.Checkbox.Root, "root", { forwardAsChild: true });
 const CheckboxCardRootPropsProvider = PropsProvider;
 const CheckboxCardLabel = withContext(checkbox.Checkbox.Label, "label", { forwardAsChild: true });
-const CheckboxCardDescription = React$1.forwardRef(function CheckboxCardDescription2(props, ref) {
+const CheckboxCardDescription = React.forwardRef(function CheckboxCardDescription2(props, ref) {
   const styles = useCheckboxCardStyles();
   const api = checkbox.useCheckboxContext();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     factory.mainbase.div,
     {
       ref,
@@ -35,10 +36,10 @@ const CheckboxCardDescription = React$1.forwardRef(function CheckboxCardDescript
 });
 const CheckboxCardControl = withContext(checkbox.Checkbox.Control, "control", { forwardAsChild: true });
 const CheckboxCardContent = withContext("div", "content");
-const CheckboxCardIndicator = React$1.forwardRef(function CheckboxCardIndicator2(props, ref) {
+const CheckboxCardIndicator = React.forwardRef(function CheckboxCardIndicator2(props, ref) {
   const api = checkbox.useCheckboxContext();
   const styles = useCheckboxCardStyles();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     checkmark.Checkmark,
     {
       ref,

package/dist/cjs/components/checkmark/checkmark.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 Checkmark = React$1.forwardRef(
+const Checkmark = React.forwardRef(
   function Checkmark2(props, ref) {
     const recipe = useRecipe.useRecipe({ key: "checkmark", recipe: props.recipe });
     const [variantProps, restProps] = recipe.splitVariantProps(props);
@@ -22,7 +22,7 @@ const Checkmark = React$1.forwardRef(
       ...rest
     } = restProps;
     const styles = unstyled ? empty.EMPTY_STYLES : recipe(variantProps);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.svg,
       {
         ref,
@@ -35,9 +35,9 @@ const Checkmark = React$1.forwardRef(
         "data-state": indeterminate ? "indeterminate" : checked ? "checked" : "unchecked",
         "data-disabled": attr.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__ */ jsxRuntime.jsx("path", { d: "M5 12h14" }) : checked ? /* @__PURE__ */ jsxRuntime.jsx("polyline", { points: "20 6 9 17 4 12" }) : null
+      }
     );
   }
 );