mainbase-ui 3.36.0 → 3.37.0

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

@@ -1,8 +1,6 @@
 'use strict';
 
 var is = require('../utils/is.cjs');
-require('react');
-require('../utils/unit.cjs');
 
 const CALC_REGEX = /calc/g;
 function resolveReference(operand) {

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

@@ -2,8 +2,6 @@
 
 var entries = require('../utils/entries.cjs');
 var memo = require('../utils/memo.cjs');
-require('react');
-require('../utils/unit.cjs');
 
 const SPECIAL_KEY_REGEX = /^@|&|&$/;
 const createConditions = (options) => {

package/dist/cjs/styled-system/create-recipe-context.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var createContext = require('../create-context.cjs');
 var mergeProps = require('../merge-props.cjs');
 var cx = require('../utils/cx.cjs');
-require('../utils/unit.cjs');
 var displayName = require('./display-name.cjs');
 var empty = require('./empty.cjs');
 var factory = require('./factory.cjs');
@@ -27,7 +27,7 @@ function createRecipeContext(options) {
       key: recipeKey,
       recipe: restProps.recipe || recipeConfig
     });
-    const [variantProps, otherProps] = React$1.useMemo(
+    const [variantProps, otherProps] = React.useMemo(
       () => recipe.splitVariantProps(restProps),
       [recipe, restProps]
     );
@@ -41,14 +41,14 @@ function createRecipeContext(options) {
   const withContext = (Component, options2) => {
     const { displayName: displayNameOverride, ...mainbaseOptions } = options2 ?? {};
     const SuperComponent = factory.mainbase(Component, {}, mainbaseOptions);
-    const StyledComponent = React$1.forwardRef((inProps, ref) => {
+    const StyledComponent = React.forwardRef((inProps, ref) => {
       const propsContext = usePropsContext();
-      const props = React$1.useMemo(
+      const props = React.useMemo(
         () => mergeProps.mergeProps(propsContext, inProps),
         [inProps, propsContext]
       );
       const { styles, className, props: localProps } = useRecipeResult(props);
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         SuperComponent,
         {
           ...localProps,

package/dist/cjs/styled-system/create-slot-recipe-context.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
-var React$1 = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
 var createContext = require('../create-context.cjs');
 var mergeProps = require('../merge-props.cjs');
 var cx = require('../utils/cx.cjs');
-require('../utils/unit.cjs');
 var displayName = require('./display-name.cjs');
 var empty = require('./empty.cjs');
 var factory = require('./factory.cjs');
@@ -37,11 +37,11 @@ const createSlotRecipeContext = (options) => {
       key: recipeKey,
       recipe: restProps.recipe || recipeConfig
     });
-    const [variantProps, otherProps] = React$1.useMemo(
+    const [variantProps, otherProps] = React.useMemo(
       () => slotRecipe.splitVariantProps(restProps),
       [restProps, slotRecipe]
     );
-    const styles = React$1.useMemo(
+    const styles = React.useMemo(
       () => unstyled ? empty.EMPTY_SLOT_STYLES : slotRecipe(variantProps),
       [unstyled, variantProps, slotRecipe]
     );
@@ -60,12 +60,12 @@ const createSlotRecipeContext = (options) => {
     );
     const StyledComponent = (inProps) => {
       const propsContext = usePropsContext();
-      const props = React$1.useMemo(
+      const props = React.useMemo(
         () => mergeProps.mergeProps(defaultProps, propsContext, inProps),
         [propsContext, inProps]
       );
       const { styles, classNames, props: rootProps } = useRecipeResult(props);
-      return /* @__PURE__ */ React.createElement(StylesProvider, { value: styles }, /* @__PURE__ */ React.createElement(ClassNamesProvider, { value: classNames }, /* @__PURE__ */ React.createElement(Component, { ...rootProps })));
+      return /* @__PURE__ */ jsxRuntime.jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(Component, { ...rootProps }) }) });
     };
     StyledComponent.displayName = displayNameOverride ?? inferredDisplayName ?? innerName;
     return StyledComponent;
@@ -82,15 +82,15 @@ const createSlotRecipeContext = (options) => {
       String(slot)
     );
     const SuperComponent = factory.mainbase(Component, {}, restOptions);
-    const StyledComponent = React$1.forwardRef((inProps, ref) => {
+    const StyledComponent = React.forwardRef((inProps, ref) => {
       const propsContext = usePropsContext();
-      const props = React$1.useMemo(
+      const props = React.useMemo(
         () => mergeProps.mergeProps(defaultProps ?? {}, propsContext, inProps),
         [propsContext, inProps]
       );
       const { styles, props: rootProps, classNames } = useRecipeResult(props);
       const className = classNames[slot];
-      const element = /* @__PURE__ */ React.createElement(StylesProvider, { value: styles }, /* @__PURE__ */ React.createElement(ClassNamesProvider, { value: classNames }, /* @__PURE__ */ React.createElement(
+      const element = /* @__PURE__ */ jsxRuntime.jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsxRuntime.jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsxRuntime.jsx(
         SuperComponent,
         {
           ref,
@@ -98,7 +98,7 @@ const createSlotRecipeContext = (options) => {
           css: [styles[slot], props.css],
           className: cx.cx(props.className, className)
         }
-      )));
+      ) }) });
       return wrapElement?.(element, props) ?? element;
     });
     StyledComponent.displayName = displayNameOverride ?? inferredDisplayName ?? displayName.getElementTypeDisplayName(Component);
@@ -108,12 +108,12 @@ const createSlotRecipeContext = (options) => {
     const { displayName: displayNameOverride, ...mainbaseOptions } = options2 ?? {};
     const inferredDisplayName = slot != null && slot !== "" ? displayName.inferSlotRecipeComponentDisplayName(contextName, String(slot)) : contextName;
     const SuperComponent = factory.mainbase(Component, {}, mainbaseOptions);
-    const StyledComponent = React$1.forwardRef((props, ref) => {
+    const StyledComponent = React.forwardRef((props, ref) => {
       const { unstyled, ...restProps } = props;
       const styles = useStyles();
       const classNames = useClassNames();
       const className = classNames?.[slot];
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsxRuntime.jsx(
         SuperComponent,
         {
           ...restProps,

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

@@ -2,11 +2,9 @@
 
 var compact = require('../utils/compact.cjs');
 var is = require('../utils/is.cjs');
-var walkObject = require('../utils/walk-object.cjs');
 var memo = require('../utils/memo.cjs');
 var merge = require('../utils/merge.cjs');
-require('react');
-require('../utils/unit.cjs');
+var walkObject = require('../utils/walk-object.cjs');
 var singleton = require('./singleton.cjs');
 var sortAtRules = require('./sort-at-rules.cjs');
 

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

@@ -6,10 +6,8 @@ var entries = require('../utils/entries.cjs');
 var memo = require('../utils/memo.cjs');
 var merge = require('../utils/merge.cjs');
 var omit = require('../utils/omit.cjs');
-require('react');
 var splitProps = require('../utils/split-props.cjs');
 var uniq = require('../utils/uniq.cjs');
-require('../utils/unit.cjs');
 var css = require('./css.cjs');
 var singleton = require('./singleton.cjs');
 

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

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var emotionIsPropValid = require('@emotion/is-prop-valid');
 var react = require('@emotion/react');
 var serialize = require('@emotion/serialize');
@@ -14,7 +15,6 @@ var cx = require('../utils/cx.cjs');
 var interop = require('../utils/interop.cjs');
 var ref = require('../utils/ref.cjs');
 var uniq = require('../utils/uniq.cjs');
-require('../utils/unit.cjs');
 var provider = require('./provider.cjs');
 var useResolvedProps = require('./use-resolved-props.cjs');
 
@@ -64,7 +64,7 @@ const Insertion = ({ cache: cache2, serialized, isStringTag }) => {
       serializedNames = cx.cx(serializedNames, next.name);
       next = next.next;
     }
-    return /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       "style",
       {
         ...{
@@ -205,23 +205,29 @@ const createStyled = (tag, configOrCva = {}, options = {}) => {
     }
     if (finalProps.as && forwardAsChild) {
       finalProps.as = void 0;
-      return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
+      return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Insertion,
+          {
+            cache: cache2,
+            serialized,
+            isStringTag: typeof FinalTag === "string"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(FinalTag, { asChild: true, ...finalProps, children: /* @__PURE__ */ jsxRuntime.jsx(props.as, { children: finalProps.children }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(React__namespace.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         Insertion,
         {
           cache: cache2,
           serialized,
           isStringTag: typeof FinalTag === "string"
         }
-      ), /* @__PURE__ */ React__namespace.createElement(FinalTag, { asChild: true, ...finalProps }, /* @__PURE__ */ React__namespace.createElement(props.as, null, finalProps.children)));
-    }
-    return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(
-      Insertion,
-      {
-        cache: cache2,
-        serialized,
-        isStringTag: typeof FinalTag === "string"
-      }
-    ), /* @__PURE__ */ React__namespace.createElement(FinalTag, { ...finalProps }));
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(FinalTag, { ...finalProps })
+    ] });
   });
   Styled.displayName = identifierName !== void 0 ? identifierName : `mainbase(${typeof baseTag === "string" ? baseTag : baseTag.displayName || baseTag.name || "Component"})`;
   Styled.__emotion_real = Styled;

package/dist/cjs/styled-system/merge-config.cjs

@@ -1,10 +1,8 @@
 'use strict';
 
 var clone = require('../utils/clone.cjs');
-var walkObject = require('../utils/walk-object.cjs');
 var merge = require('../utils/merge.cjs');
-require('react');
-require('../utils/unit.cjs');
+var walkObject = require('../utils/walk-object.cjs');
 
 const tokenKeys = ["value", "type", "description"];
 const isValidToken = (token) => {

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

@@ -1,8 +1,6 @@
 'use strict';
 
 var walkObject = require('../utils/walk-object.cjs');
-require('react');
-require('../utils/unit.cjs');
 
 function createNormalizeFn(context) {
   const { utility, normalize } = context;

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

@@ -1,8 +1,6 @@
 'use strict';
 
 var is = require('../utils/is.cjs');
-require('react');
-require('../utils/unit.cjs');
 
 function createPreflight(options) {
   const { preflight } = options;

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

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var react = require('@emotion/react');
 var createContext = require('../create-context.cjs');
 
@@ -11,7 +12,11 @@ const [MainbaseContextProvider, useMainbaseContext] = createContext.createContex
 });
 function MainbaseProvider(props) {
   const { value: sys, children } = props;
-  return /* @__PURE__ */ React.createElement(MainbaseContextProvider, { value: sys }, !sys._config.disableLayers && /* @__PURE__ */ React.createElement(react.Global, { styles: sys.layers.atRule }), /* @__PURE__ */ React.createElement(react.Global, { styles: sys._global }), children);
+  return /* @__PURE__ */ jsxRuntime.jsxs(MainbaseContextProvider, { value: sys, children: [
+    !sys._config.disableLayers && /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: sys.layers.atRule }),
+    /* @__PURE__ */ jsxRuntime.jsx(react.Global, { styles: sys._global }),
+    children
+  ] });
 }
 
 exports.MainbaseProvider = MainbaseProvider;

package/dist/cjs/styled-system/recipe-props.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var createContext = require('../create-context.cjs');
 
 const [RecipePropsContextProvider, useParentRecipeProps] = createContext.createContext({
@@ -8,7 +9,7 @@ const [RecipePropsContextProvider, useParentRecipeProps] = createContext.createC
   strict: false
 });
 function RecipePropsProvider(props) {
-  return /* @__PURE__ */ React.createElement(RecipePropsContextProvider, { value: props.value }, props.children);
+  return /* @__PURE__ */ jsxRuntime.jsx(RecipePropsContextProvider, { value: props.value, children: props.children });
 }
 
 exports.RecipePropsProvider = RecipePropsProvider;

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

@@ -1,8 +1,6 @@
 'use strict';
 
 var is = require('../utils/is.cjs');
-require('react');
-require('../utils/unit.cjs');
 
 const REFERENCE_REGEX = /({([^}]*)})/g;
 const CURLY_REGEX = /[{}]/g;

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

@@ -1,10 +1,8 @@
 'use strict';
 
 var is = require('../utils/is.cjs');
-var walkObject = require('../utils/walk-object.cjs');
 var memo = require('../utils/memo.cjs');
-require('react');
-require('../utils/unit.cjs');
+var walkObject = require('../utils/walk-object.cjs');
 
 function createSerializeFn(options) {
   const { conditions, isValidProperty } = options;

package/dist/cjs/styled-system/sort-at-rules.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
 var is = require('../utils/is.cjs');
-require('react');
-require('../utils/unit.cjs');
 var sortAtParams = require('./sort-at-params.cjs');
 
 function sortQueries(queries) {

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

@@ -3,9 +3,7 @@
 var entries = require('../utils/entries.cjs');
 var memo = require('../utils/memo.cjs');
 var omit = require('../utils/omit.cjs');
-require('react');
 var splitProps = require('../utils/split-props.cjs');
-require('../utils/unit.cjs');
 var singleton = require('./singleton.cjs');
 
 const getSlotRecipes = (config = singleton.EMPTY_OBJECT) => {

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

@@ -2,14 +2,12 @@
 
 var isValidProp = require('@pandacss/is-valid-prop');
 var compact = require('../utils/compact.cjs');
-var is = require('../utils/is.cjs');
 var entries = require('../utils/entries.cjs');
 var flatten = require('../utils/flatten.cjs');
+var is = require('../utils/is.cjs');
 var memo = require('../utils/memo.cjs');
 var merge = require('../utils/merge.cjs');
-require('react');
 var splitProps = require('../utils/split-props.cjs');
-require('../utils/unit.cjs');
 var breakpoints = require('./breakpoints.cjs');
 var conditions = require('./conditions.cjs');
 var mergeConfig = require('./merge-config.cjs');

package/dist/cjs/styled-system/token-dictionary.cjs

@@ -2,12 +2,10 @@
 
 var compact = require('../utils/compact.cjs');
 var createProps = require('../utils/create-props.cjs');
-var is = require('../utils/is.cjs');
 var entries = require('../utils/entries.cjs');
-var walkObject = require('../utils/walk-object.cjs');
+var is = require('../utils/is.cjs');
 var memo = require('../utils/memo.cjs');
-require('react');
-require('../utils/unit.cjs');
+var walkObject = require('../utils/walk-object.cjs');
 var cssVar = require('./css-var.cjs');
 var esc = require('./esc.cjs');
 var expandReference = require('./expand-reference.cjs');

package/dist/cjs/styled-system/token-middleware.cjs

@@ -1,8 +1,6 @@
 'use strict';
 
 var is = require('../utils/is.cjs');
-require('react');
-require('../utils/unit.cjs');
 var calc = require('./calc.cjs');
 var unitConversion = require('./unit-conversion.cjs');
 

package/dist/cjs/styled-system/use-resolved-props.cjs

@@ -2,7 +2,6 @@
 
 var React = require('react');
 var splitProps = require('../utils/split-props.cjs');
-require('../utils/unit.cjs');
 var provider = require('./provider.cjs');
 
 const htmlProps = /* @__PURE__ */ new Set([

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

@@ -1,10 +1,8 @@
 'use strict';
 
-var is = require('../utils/is.cjs');
 var entries = require('../utils/entries.cjs');
+var is = require('../utils/is.cjs');
 var memo = require('../utils/memo.cjs');
-require('react');
-require('../utils/unit.cjs');
 var colorMix = require('./color-mix.cjs');
 var mapToJson = require('./map-to-json.cjs');
 var singleton = require('./singleton.cjs');

package/dist/cjs/theme/recipes/number-input.cjs

@@ -2,8 +2,6 @@
 
 var config = require('../../styled-system/config.cjs');
 var entries = require('../../utils/entries.cjs');
-require('react');
-require('../../utils/unit.cjs');
 var input = require('./input.cjs');
 var numberInput = require('@ark-ui/react/number-input');
 

package/dist/cjs/theme/recipes/pin-input.cjs

@@ -2,8 +2,6 @@
 
 var config = require('../../styled-system/config.cjs');
 var entries = require('../../utils/entries.cjs');
-require('react');
-require('../../utils/unit.cjs');
 var input = require('./input.cjs');
 var pinInput = require('@ark-ui/react/pin-input');
 

package/dist/esm/components/accordion/accordion.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Accordion } from '@ark-ui/react/accordion';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { ChevronDownIcon } from '../icons.js';
@@ -27,7 +28,7 @@ const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", {
 const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ChevronDownIcon, null)
+    children: /* @__PURE__ */ jsx(ChevronDownIcon, {})
   }
 });
 const AccordionContext = Accordion.Context;

package/dist/esm/components/alert/alert.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, Fragment } from 'react';
 import { createContext } from '../../create-context.js';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -24,7 +25,7 @@ const AlertRoot = withProvider(
     wrapElement(element, props) {
       return (
         // @ts-ignore fix later
-        /* @__PURE__ */ React.createElement(AlertStatusProvider, { value: { status: props.status || "info" } }, element)
+        /* @__PURE__ */ jsx(AlertStatusProvider, { value: { status: props.status || "info" }, children: element })
       );
     }
   }
@@ -51,8 +52,8 @@ const AlertIndicator = forwardRef(
     const api = useAlertStatusContext();
     const styles = useAlertStyles();
     const Icon = typeof api.status === "string" ? iconMap[api.status] : Fragment;
-    const { children = /* @__PURE__ */ React.createElement(Icon, null), ...rest } = props;
-    return /* @__PURE__ */ React.createElement(mainbase.span, { ref, ...rest, css: [styles.indicator, props.css] }, children);
+    const { children = /* @__PURE__ */ jsx(Icon, {}), ...rest } = props;
+    return /* @__PURE__ */ jsx(mainbase.span, { ref, ...rest, css: [styles.indicator, props.css], children });
   }
 );
 

package/dist/esm/components/aspect-ratio/aspect-ratio.js

@@ -1,10 +1,10 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, Children } from 'react';
 import { defineStyle } from '../../styled-system/config.js';
 import { mainbase } from '../../styled-system/factory.js';
 import { cx } from '../../utils/cx.js';
 import { mapObject } from '../../utils/walk-object.js';
-import '../../utils/unit.js';
 
 const baseStyle = defineStyle({
   "& > *:not(style)": {
@@ -28,7 +28,7 @@ const AspectRatio = forwardRef(
   function AspectRatio2(props, ref) {
     const { ratio = 4 / 3, children, className, ...rest } = props;
     const child = Children.only(children);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,
@@ -41,9 +41,9 @@ const AspectRatio = forwardRef(
           paddingBottom: mapObject(ratio, (r) => `${1 / r * 100}%`)
         },
         ...rest,
-        css: [baseStyle, props.css]
-      },
-      child
+        css: [baseStyle, props.css],
+        children: child
+      }
     );
   }
 );

package/dist/esm/components/avatar/avatar.js

@@ -1,11 +1,11 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Avatar } from '@ark-ui/react/avatar';
 import { forwardRef, useMemo } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { mainbase } from '../../styled-system/factory.js';
 import { useSlotRecipe } from '../../styled-system/use-slot-recipe.js';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
 import { Group } from '../group/group.js';
 
 const {
@@ -26,7 +26,7 @@ const StyledFallback = mainbase(Avatar.Fallback, {}, { forwardAsChild: true });
 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__ */ jsx(AvatarIcon, {});
 }
 function getInitials(name) {
   const names = name.trim().split(" ");
@@ -39,15 +39,15 @@ const AvatarFallback = forwardRef(
     const styles = useAvatarStyles();
     const classNames = useClassNames();
     const { name: _, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       StyledFallback,
       {
         ref,
         ...rest,
         className: cx(props.className, classNames.fallback),
-        css: [styles.fallback, props.css]
-      },
-      getFallbackChildren(props)
+        css: [styles.fallback, props.css],
+        children: getFallbackChildren(props)
+      }
     );
   }
 );
@@ -64,7 +64,7 @@ const AvatarImage = withContext(
 );
 const AvatarIcon = forwardRef(
   function AvatarIcon2(props, ref) {
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.svg,
       {
         stroke: "currentColor",
@@ -74,9 +74,9 @@ const AvatarIcon = 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__ */ 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" })
+      }
     );
   }
 );
@@ -88,7 +88,7 @@ const AvatarGroup = forwardRef(
       () => recipe.splitVariantProps(props),
       [props, recipe]
     );
-    return /* @__PURE__ */ React.createElement(PropsProvider, { value: variantProps }, /* @__PURE__ */ React.createElement(Group, { gap: "0", spaceX: "-3", ref, ...localProps }));
+    return /* @__PURE__ */ jsx(PropsProvider, { value: variantProps, children: /* @__PURE__ */ jsx(Group, { gap: "0", spaceX: "-3", ref, ...localProps }) });
   }
 );
 

package/dist/esm/components/bleed/bleed.js

@@ -1,9 +1,10 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 import { isCssVar } from '../../utils/is.js';
-import { mapObject } from '../../utils/walk-object.js';
 import { isCssUnit } from '../../utils/unit.js';
+import { mapObject } from '../../utils/walk-object.js';
 
 const valueFn = (v) => isCssUnit(v) || isCssVar(v) ? v : `token(spacing.${v}, ${v})`;
 const Bleed = forwardRef(
@@ -18,7 +19,7 @@ const Bleed = forwardRef(
       css: cssProp,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,

package/dist/esm/components/breadcrumb/breadcrumb.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { ChevronRightIcon, EllpsisIcon } from '../icons.js';
 
@@ -34,14 +35,14 @@ const BreadcrumbCurrentLink = withContext("span", "currentLink", {
 const BreadcrumbSeparator = withContext("li", "separator", {
   defaultProps: {
     "aria-hidden": true,
-    children: /* @__PURE__ */ React.createElement(ChevronRightIcon, null)
+    children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
   }
 });
 const BreadcrumbEllipsis = withContext("li", "ellipsis", {
   defaultProps: {
     role: "presentation",
     "aria-hidden": true,
-    children: /* @__PURE__ */ React.createElement(EllpsisIcon, null)
+    children: /* @__PURE__ */ jsx(EllpsisIcon, {})
   }
 });
 

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { useRecipe } from '../../styled-system/use-recipe.js';
 import { Group } from '../group/group.js';
@@ -11,7 +12,7 @@ const ButtonGroup = forwardRef(
       () => recipe.splitVariantProps(props),
       [props, recipe]
     );
-    return /* @__PURE__ */ React.createElement(ButtonPropsProvider, { value: variantProps }, /* @__PURE__ */ React.createElement(Group, { ref, ...otherProps }));
+    return /* @__PURE__ */ jsx(ButtonPropsProvider, { value: variantProps, children: /* @__PURE__ */ jsx(Group, { ref, ...otherProps }) });
   }
 );
 ButtonGroup.displayName = "ButtonGroup";