mainbase-ui 3.36.0 → 3.37.0

package/dist/esm/components/table/table.js

@@ -1,9 +1,9 @@
 "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';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
 
 const {
   StylesProvider,
@@ -29,7 +29,7 @@ const TableRoot = forwardRef(
         "& caption": styles.caption
       };
     }, [styles, native]);
-    return /* @__PURE__ */ React.createElement(ClassNamesProvider, { value: classNames }, /* @__PURE__ */ React.createElement(StylesProvider, { value: styles }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(
       mainbase.table,
       {
         ref,
@@ -37,7 +37,7 @@ const TableRoot = forwardRef(
         css: [rootCss, props.css],
         className: cx(classNames?.["root"], props.className)
       }
-    )));
+    ) }) });
   }
 );
 const TableRootPropsProvider = PropsProvider;

package/dist/esm/components/tag/tag.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { CloseIcon } from '../icons.js';
 
@@ -17,7 +18,7 @@ const TagLabel = withContext(
   "span",
   "label"
 );
-const TagCloseTrigger = withContext("button", "closeTrigger", { defaultProps: { children: /* @__PURE__ */ React.createElement(CloseIcon, null) } });
+const TagCloseTrigger = withContext("button", "closeTrigger", { defaultProps: { children: /* @__PURE__ */ jsx(CloseIcon, {}) } });
 const TagStartElement = withContext("span", "startElement");
 const TagEndElement = withContext(
   "span",

package/dist/esm/components/tags-input/tags-input.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { TagsInput, useTagsInputContext } from '@ark-ui/react/tags-input';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { For } from '../for/for.js';
@@ -28,17 +29,23 @@ const TagsInputItem = withContext(
 const TagsInputItemText = withContext(TagsInput.ItemText, "itemText", { forwardAsChild: true });
 const TagsInputItemDeleteTrigger = withContext(TagsInput.ItemDeleteTrigger, "itemDeleteTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(CloseIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsx(CloseIcon, {}) }
 });
 const TagsInputItemPreview = withContext(TagsInput.ItemPreview, "itemPreview", { forwardAsChild: true });
 const TagsInputItemInput = withContext(TagsInput.ItemInput, "itemInput", { forwardAsChild: true });
 const TagsInputClearTrigger = withContext(TagsInput.ClearTrigger, "clearTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(CloseIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsx(CloseIcon, {}) }
 });
 const TagsInputItems = (props) => {
   const api = useTagsInputContext();
-  return /* @__PURE__ */ React.createElement(For, { each: api.value }, (item, index) => /* @__PURE__ */ React.createElement(TagsInputItem, { key: index, index, value: item, ...props }, /* @__PURE__ */ React.createElement(TagsInputItemPreview, null, /* @__PURE__ */ React.createElement(TagsInputItemText, null, item), /* @__PURE__ */ React.createElement(TagsInputItemDeleteTrigger, null)), /* @__PURE__ */ React.createElement(TagsInputItemInput, null)));
+  return /* @__PURE__ */ jsx(For, { each: api.value, children: (item, index) => /* @__PURE__ */ jsxs(TagsInputItem, { index, value: item, ...props, children: [
+    /* @__PURE__ */ jsxs(TagsInputItemPreview, { children: [
+      /* @__PURE__ */ jsx(TagsInputItemText, { children: item }),
+      /* @__PURE__ */ jsx(TagsInputItemDeleteTrigger, {})
+    ] }),
+    /* @__PURE__ */ jsx(TagsInputItemInput, {})
+  ] }, index) });
 };
 const TagsInputContext = TagsInput.Context;
 const TagsInputHiddenInput = TagsInput.HiddenInput;

package/dist/esm/components/theme.js

@@ -1,8 +1,8 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { mainbase } from '../styled-system/factory.js';
 import { cx } from '../utils/cx.js';
-import '../utils/unit.js';
 
 const Theme = forwardRef(
   function Theme2(props, ref) {
@@ -13,7 +13,7 @@ const Theme = forwardRef(
       hasBackground = true,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         color: "fg",

package/dist/esm/components/toast/toast.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Toaster as Toaster$1, Toast, useToastContext } from '@ark-ui/react/toast';
 export { createToaster } from '@ark-ui/react/toast';
 import { forwardRef } from 'react';
@@ -24,7 +25,7 @@ const ToastRoot = withProvider(
 const ToastCloseTrigger = withContext(Toast.CloseTrigger, "closeTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(CloseIcon, null)
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
   }
 });
 const ToastTitle = withContext(
@@ -46,7 +47,7 @@ const ToastIndicator = forwardRef(
     const styles = useToastStyles();
     const Component = iconMap[api.type];
     if (!Component) return null;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       Component,
       {
         ref,

package/dist/esm/components/tooltip/tooltip.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Tooltip } from '@ark-ui/react/tooltip';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 
@@ -26,7 +27,7 @@ const TooltipArrowTip = withContext(Tooltip.ArrowTip, "arrowTip", { forwardAsChi
 const TooltipArrow = withContext(
   Tooltip.Arrow,
   "arrow",
-  { forwardAsChild: true, defaultProps: { children: /* @__PURE__ */ React.createElement(TooltipArrowTip, null) } }
+  { forwardAsChild: true, defaultProps: { children: /* @__PURE__ */ jsx(TooltipArrowTip, {}) } }
 );
 const TooltipContext = Tooltip.Context;
 

package/dist/esm/components/tree-view/tree-view.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, Fragment, jsxs } from 'react/jsx-runtime';
 import { TreeView, useTreeViewContext } from '@ark-ui/react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 
@@ -47,24 +48,30 @@ const TreeViewNodeCheckbox = withContext(TreeView.NodeCheckbox, "nodeCheckbox",
 function TreeViewNode(props) {
   const { render, indentGuide, branchProps, branchContentProps } = props;
   const tree = useTreeViewContext();
-  const renderNode = (node, indexPath) => /* @__PURE__ */ React.createElement(
+  const renderNode = (node, indexPath) => /* @__PURE__ */ jsx(
     TreeView.NodeProvider,
     {
-      key: indexPath.join("."),
       node,
-      indexPath
+      indexPath,
+      children: /* @__PURE__ */ jsx(TreeView.NodeContext, { children: (nodeState) => {
+        if (nodeState.isBranch) {
+          return /* @__PURE__ */ jsxs(TreeViewBranch, { ...branchProps, children: [
+            render({ node, indexPath, nodeState }),
+            /* @__PURE__ */ jsxs(TreeViewBranchContent, { ...branchContentProps, children: [
+              indentGuide,
+              tree.collection.getNodeChildren(node).map(
+                (child, index) => renderNode(child, [...indexPath, index])
+              )
+            ] })
+          ] });
+        } else {
+          return render({ node, indexPath, nodeState });
+        }
+      } })
     },
-    /* @__PURE__ */ React.createElement(TreeView.NodeContext, null, (nodeState) => {
-      if (nodeState.isBranch) {
-        return /* @__PURE__ */ React.createElement(TreeViewBranch, { ...branchProps }, render({ node, indexPath, nodeState }), /* @__PURE__ */ React.createElement(TreeViewBranchContent, { ...branchContentProps }, indentGuide, tree.collection.getNodeChildren(node).map(
-          (child, index) => renderNode(child, [...indexPath, index])
-        )));
-      } else {
-        return render({ node, indexPath, nodeState });
-      }
-    })
+    indexPath.join(".")
   );
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index])));
+  return /* @__PURE__ */ jsx(Fragment, { children: tree.collection.getNodeChildren(tree.collection.rootNode).map((node, index) => renderNode(node, [index])) });
 }
 
 export { TreeViewBranch, TreeViewBranchContent, TreeViewBranchControl, TreeViewBranchIndentGuide, TreeViewBranchIndicator, TreeViewBranchText, TreeViewBranchTrigger, TreeViewItem, TreeViewItemIndicator, TreeViewItemText, TreeViewLabel, TreeViewNode, TreeViewNodeCheckbox, TreeViewPropsProvider, TreeViewRoot, TreeViewRootProvider, TreeViewTree, useTreeViewStyles };

package/dist/esm/components/wrap/wrap.js

@@ -1,14 +1,14 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { defineStyle } from '../../styled-system/config.js';
 import { mainbase } from '../../styled-system/factory.js';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
 
 const Wrap = forwardRef(
   function Wrap2(props, ref) {
     const { gap = "0.5rem", justify, direction, align, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,
@@ -32,7 +32,7 @@ const itemStyle = defineStyle({
 const WrapItem = forwardRef(
   function WrapItem2(props, ref) {
     const { css, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,

package/dist/esm/hooks/index.js

@@ -5,10 +5,10 @@ export { useControllableProp, useControllableState } from './use-controllable-st
 export { useDisclosure } from './use-disclosure.js';
 export { useElementRect } from './use-element-rect.js';
 export { useForceUpdate } from './use-force-update.js';
-export { useListCollection } from '@ark-ui/react/collection';
 export { useLiveRef } from './use-live-ref.js';
 export { useMediaQuery } from './use-media-query.js';
 export { createOverlay } from './use-overlay.js';
 export { usePrevious } from './use-previous.js';
 export { useSafeLayoutEffect } from './use-safe-layout-effect.js';
 export { useUpdateEffect } from './use-update-effect.js';
+export { useListCollection } from '@ark-ui/react/collection';

package/dist/esm/hooks/use-overlay.js

@@ -1,6 +1,6 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
 import { omit } from '../utils/omit.js';
-import '../utils/unit.js';
 
 const shallowEqualEntries = (a, b) => {
   if (a.length !== b.length) return false;
@@ -129,7 +129,7 @@ function createOverlay(Component, options) {
       setMounted(true);
     }, []);
     const open2 = mounted ? props.open ?? false : false;
-    return /* @__PURE__ */ React.createElement(Component, { ...props, open: open2 });
+    return /* @__PURE__ */ jsx(Component, { ...props, open: open2 });
   }
   function Viewport() {
     const overlays = React.useSyncExternalStore(
@@ -137,7 +137,7 @@ function createOverlay(Component, options) {
       getSnapshotForStore,
       getSnapshotForStore
     );
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, overlays.map(({ id, props }) => /* @__PURE__ */ React.createElement(OverlayViewportItem, { key: id, ...props })));
+    return /* @__PURE__ */ jsx(Fragment, { children: overlays.map(({ id, props }) => /* @__PURE__ */ jsx(OverlayViewportItem, { ...props }, id)) });
   }
   return {
     Viewport,

package/dist/esm/index.js

@@ -293,7 +293,6 @@ export { useControllableProp, useControllableState } from './hooks/use-controlla
 export { useDisclosure } from './hooks/use-disclosure.js';
 export { useElementRect } from './hooks/use-element-rect.js';
 export { useForceUpdate } from './hooks/use-force-update.js';
-export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useListCollection } from '@ark-ui/react/collection';
 export { useLiveRef } from './hooks/use-live-ref.js';
 export { useMediaQuery } from './hooks/use-media-query.js';
 export { createOverlay } from './hooks/use-overlay.js';
@@ -315,6 +314,7 @@ export { createSystem, isValidSystem } from './styled-system/system.js';
 export { useRecipe } from './styled-system/use-recipe.js';
 export { useSlotRecipe } from './styled-system/use-slot-recipe.js';
 export { useToken } from './styled-system/use-token.js';
+export { createFileTreeCollection, createGridCollection, createListCollection, createTreeCollection, useListCollection } from '@ark-ui/react/collection';
 export { createToaster } from '@ark-ui/react/toast';
 export { mergeConfigs } from './styled-system/merge-config.js';
 export { useDownload } from '@ark-ui/react/download-trigger';

package/dist/esm/merge-props.js

@@ -1,6 +1,4 @@
 import { callAll } from './utils/call-all.js';
-import 'react';
-import './utils/unit.js';
 
 const clsx = (...args) => args.map((str) => str?.trim?.()).filter(Boolean).join(" ");
 const eventRegex = /^on[A-Z]/;

package/dist/esm/styled-system/breakpoints.js

@@ -1,6 +1,4 @@
-import 'react';
 import { uniq } from '../utils/uniq.js';
-import '../utils/unit.js';
 import { toRem, toPx } from './unit-conversion.js';
 
 const capitalize = (str) => str.charAt(0).toUpperCase() + str.slice(1);

package/dist/esm/styled-system/calc.js

@@ -1,6 +1,4 @@
 import { isObject } from '../utils/is.js';
-import 'react';
-import '../utils/unit.js';
 
 const CALC_REGEX = /calc/g;
 function resolveReference(operand) {

package/dist/esm/styled-system/conditions.js

@@ -1,7 +1,5 @@
 import { mapEntries } from '../utils/entries.js';
 import { memo } from '../utils/memo.js';
-import 'react';
-import '../utils/unit.js';
 
 const SPECIAL_KEY_REGEX = /^@|&|&$/;
 const createConditions = (options) => {

package/dist/esm/styled-system/create-recipe-context.js

@@ -1,9 +1,9 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { useMemo, forwardRef } from 'react';
 import { createContext } from '../create-context.js';
 import { mergeProps } from '../merge-props.js';
 import { cx } from '../utils/cx.js';
-import '../utils/unit.js';
 import { upperFirst, getElementTypeDisplayName } from './display-name.js';
 import { EMPTY_STYLES } from './empty.js';
 import { mainbase } from './factory.js';
@@ -46,7 +46,7 @@ function createRecipeContext(options) {
         [inProps, propsContext]
       );
       const { styles, className, props: localProps } = useRecipeResult(props);
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         SuperComponent,
         {
           ...localProps,

package/dist/esm/styled-system/create-slot-recipe-context.js

@@ -1,9 +1,9 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { createContext } from '../create-context.js';
 import { mergeProps } from '../merge-props.js';
 import { cx } from '../utils/cx.js';
-import '../utils/unit.js';
 import { upperFirst, getElementTypeDisplayName, inferRootProviderDisplayName, inferSlotRecipeComponentDisplayName } from './display-name.js';
 import { EMPTY_SLOT_STYLES } from './empty.js';
 import { mainbase } from './factory.js';
@@ -63,7 +63,7 @@ const createSlotRecipeContext = (options) => {
         [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__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(Component, { ...rootProps }) }) });
     };
     StyledComponent.displayName = displayNameOverride ?? inferredDisplayName ?? innerName;
     return StyledComponent;
@@ -88,7 +88,7 @@ const createSlotRecipeContext = (options) => {
       );
       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__ */ jsx(StylesProvider, { value: styles, children: /* @__PURE__ */ jsx(ClassNamesProvider, { value: classNames, children: /* @__PURE__ */ jsx(
         SuperComponent,
         {
           ref,
@@ -96,7 +96,7 @@ const createSlotRecipeContext = (options) => {
           css: [styles[slot], props.css],
           className: cx(props.className, className)
         }
-      )));
+      ) }) });
       return wrapElement?.(element, props) ?? element;
     });
     StyledComponent.displayName = displayNameOverride ?? inferredDisplayName ?? getElementTypeDisplayName(Component);
@@ -111,7 +111,7 @@ const createSlotRecipeContext = (options) => {
       const styles = useStyles();
       const classNames = useClassNames();
       const className = classNames?.[slot];
-      return /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsx(
         SuperComponent,
         {
           ...restProps,

package/dist/esm/styled-system/css.js

@@ -1,10 +1,8 @@
 import { compact } from '../utils/compact.js';
 import { isString, isObject } from '../utils/is.js';
-import { walkObject } from '../utils/walk-object.js';
 import { memo } from '../utils/memo.js';
 import { mergeWith } from '../utils/merge.js';
-import 'react';
-import '../utils/unit.js';
+import { walkObject } from '../utils/walk-object.js';
 import { EMPTY_OBJECT, createEmptyObject } from './singleton.js';
 import { sortAtRules } from './sort-at-rules.js';
 

package/dist/esm/styled-system/cva.js

@@ -4,10 +4,8 @@ import { mapEntries } from '../utils/entries.js';
 import { memo } from '../utils/memo.js';
 import { mergeWith } from '../utils/merge.js';
 import { omit } from '../utils/omit.js';
-import 'react';
 import { splitProps } from '../utils/split-props.js';
 import { uniq } from '../utils/uniq.js';
-import '../utils/unit.js';
 import { createCssFn } from './css.js';
 import { EMPTY_OBJECT } from './singleton.js';
 

package/dist/esm/styled-system/factory.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import emotionIsPropValid from '@emotion/is-prop-valid';
 import { withEmotionCache, ThemeContext } from '@emotion/react';
 import { serializeStyles } from '@emotion/serialize';
@@ -12,7 +13,6 @@ import { cx } from '../utils/cx.js';
 import { interopDefault } from '../utils/interop.js';
 import { getElementRef } from '../utils/ref.js';
 import { uniq } from '../utils/uniq.js';
-import '../utils/unit.js';
 import { useMainbaseContext } from './provider.js';
 import { useResolvedProps, isHtmlProp } from './use-resolved-props.js';
 
@@ -43,7 +43,7 @@ const Insertion = ({ cache: cache2, serialized, isStringTag }) => {
       serializedNames = cx(serializedNames, next.name);
       next = next.next;
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       "style",
       {
         ...{
@@ -184,23 +184,29 @@ const createStyled = (tag, configOrCva = {}, options = {}) => {
     }
     if (finalProps.as && forwardAsChild) {
       finalProps.as = void 0;
-      return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          Insertion,
+          {
+            cache: cache2,
+            serialized,
+            isStringTag: typeof FinalTag === "string"
+          }
+        ),
+        /* @__PURE__ */ jsx(FinalTag, { asChild: true, ...finalProps, children: /* @__PURE__ */ jsx(props.as, { children: finalProps.children }) })
+      ] });
+    }
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      /* @__PURE__ */ jsx(
         Insertion,
         {
           cache: cache2,
           serialized,
           isStringTag: typeof FinalTag === "string"
         }
-      ), /* @__PURE__ */ React.createElement(FinalTag, { asChild: true, ...finalProps }, /* @__PURE__ */ React.createElement(props.as, null, finalProps.children)));
-    }
-    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
-      Insertion,
-      {
-        cache: cache2,
-        serialized,
-        isStringTag: typeof FinalTag === "string"
-      }
-    ), /* @__PURE__ */ React.createElement(FinalTag, { ...finalProps }));
+      ),
+      /* @__PURE__ */ 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/esm/styled-system/merge-config.js

@@ -1,8 +1,6 @@
 import { clone } from '../utils/clone.js';
-import { walkObject } from '../utils/walk-object.js';
 import { mergeWith } from '../utils/merge.js';
-import 'react';
-import '../utils/unit.js';
+import { walkObject } from '../utils/walk-object.js';
 
 const tokenKeys = ["value", "type", "description"];
 const isValidToken = (token) => {

package/dist/esm/styled-system/normalize.js

@@ -1,6 +1,4 @@
 import { walkObject } from '../utils/walk-object.js';
-import 'react';
-import '../utils/unit.js';
 
 function createNormalizeFn(context) {
   const { utility, normalize } = context;

package/dist/esm/styled-system/preflight.js

@@ -1,6 +1,4 @@
 import { isObject } from '../utils/is.js';
-import 'react';
-import '../utils/unit.js';
 
 function createPreflight(options) {
   const { preflight } = options;

package/dist/esm/styled-system/provider.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Global } from '@emotion/react';
 import { createContext } from '../create-context.js';
 
@@ -9,7 +10,11 @@ const [MainbaseContextProvider, useMainbaseContext] = createContext({
 });
 function MainbaseProvider(props) {
   const { value: sys, children } = props;
-  return /* @__PURE__ */ React.createElement(MainbaseContextProvider, { value: sys }, !sys._config.disableLayers && /* @__PURE__ */ React.createElement(Global, { styles: sys.layers.atRule }), /* @__PURE__ */ React.createElement(Global, { styles: sys._global }), children);
+  return /* @__PURE__ */ jsxs(MainbaseContextProvider, { value: sys, children: [
+    !sys._config.disableLayers && /* @__PURE__ */ jsx(Global, { styles: sys.layers.atRule }),
+    /* @__PURE__ */ jsx(Global, { styles: sys._global }),
+    children
+  ] });
 }
 
 export { MainbaseProvider, useMainbaseContext };

package/dist/esm/styled-system/recipe-props.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { createContext } from '../create-context.js';
 
 const [RecipePropsContextProvider, useParentRecipeProps] = createContext({
@@ -6,7 +7,7 @@ const [RecipePropsContextProvider, useParentRecipeProps] = createContext({
   strict: false
 });
 function RecipePropsProvider(props) {
-  return /* @__PURE__ */ React.createElement(RecipePropsContextProvider, { value: props.value }, props.children);
+  return /* @__PURE__ */ jsx(RecipePropsContextProvider, { value: props.value, children: props.children });
 }
 
 export { RecipePropsProvider, useParentRecipeProps };

package/dist/esm/styled-system/references.js

@@ -1,6 +1,4 @@
 import { isString } from '../utils/is.js';
-import 'react';
-import '../utils/unit.js';
 
 const REFERENCE_REGEX = /({([^}]*)})/g;
 const CURLY_REGEX = /[{}]/g;

package/dist/esm/styled-system/serialize.js

@@ -1,8 +1,6 @@
 import { isObject } from '../utils/is.js';
-import { walkObject } from '../utils/walk-object.js';
 import { memo } from '../utils/memo.js';
-import 'react';
-import '../utils/unit.js';
+import { walkObject } from '../utils/walk-object.js';
 
 function createSerializeFn(options) {
   const { conditions, isValidProperty } = options;

package/dist/esm/styled-system/sort-at-rules.js

@@ -1,6 +1,4 @@
 import { isObject } from '../utils/is.js';
-import 'react';
-import '../utils/unit.js';
 import { sortAtParams } from './sort-at-params.js';
 
 function sortQueries(queries) {

package/dist/esm/styled-system/sva.js

@@ -1,9 +1,7 @@
 import { mapEntries } from '../utils/entries.js';
 import { memo } from '../utils/memo.js';
 import { omit } from '../utils/omit.js';
-import 'react';
 import { splitProps } from '../utils/split-props.js';
-import '../utils/unit.js';
 import { EMPTY_OBJECT, EMPTY_ARRAY, createEmptyObject } from './singleton.js';
 
 const getSlotRecipes = (config = EMPTY_OBJECT) => {

package/dist/esm/styled-system/system.js

@@ -1,13 +1,11 @@
 import { isCssProperty } from '@pandacss/is-valid-prop';
 import { compact } from '../utils/compact.js';
-import { isObject } from '../utils/is.js';
 import { mapEntries } from '../utils/entries.js';
 import { flatten } from '../utils/flatten.js';
+import { isObject } from '../utils/is.js';
 import { memo } from '../utils/memo.js';
 import { mergeWith } from '../utils/merge.js';
-import 'react';
 import { splitProps } from '../utils/split-props.js';
-import '../utils/unit.js';
 import { createBreakpoints } from './breakpoints.js';
 import { createConditions } from './conditions.js';
 import { mergeConfigs } from './merge-config.js';

package/dist/esm/styled-system/token-dictionary.js

@@ -1,11 +1,9 @@
 import { compact } from '../utils/compact.js';
 import { createProps } from '../utils/create-props.js';
-import { isString, isObject, isFunction } from '../utils/is.js';
 import { mapEntries } from '../utils/entries.js';
-import { mapObject, walkObject } from '../utils/walk-object.js';
+import { isString, isObject, isFunction } from '../utils/is.js';
 import { memo } from '../utils/memo.js';
-import 'react';
-import '../utils/unit.js';
+import { mapObject, walkObject } from '../utils/walk-object.js';
 import { cssVar } from './css-var.js';
 import { esc } from './esc.js';
 import { expandTokenReferences } from './expand-reference.js';

package/dist/esm/styled-system/token-middleware.js

@@ -1,6 +1,4 @@
 import { isString } from '../utils/is.js';
-import 'react';
-import '../utils/unit.js';
 import { calc } from './calc.js';
 import { toPx } from './unit-conversion.js';
 

package/dist/esm/styled-system/use-resolved-props.js

@@ -1,6 +1,5 @@
 import { useMemo } from 'react';
 import { splitProps } from '../utils/split-props.js';
-import '../utils/unit.js';
 import { useMainbaseContext } from './provider.js';
 
 const htmlProps = /* @__PURE__ */ new Set([

package/dist/esm/styled-system/utility.js

@@ -1,8 +1,6 @@
-import { isString, isFunction } from '../utils/is.js';
 import { mapEntries } from '../utils/entries.js';
+import { isString, isFunction } from '../utils/is.js';
 import { memo } from '../utils/memo.js';
-import 'react';
-import '../utils/unit.js';
 import { colorMix } from './color-mix.js';
 import { mapToJson } from './map-to-json.js';
 import { EMPTY_OBJECT } from './singleton.js';

package/dist/esm/theme/recipes/number-input.js

@@ -1,7 +1,5 @@
 import { defineSlotRecipe, defineStyle } from '../../styled-system/config.js';
 import { mapEntries } from '../../utils/entries.js';
-import 'react';
-import '../../utils/unit.js';
 import { inputRecipe } from './input.js';
 import { numberInputAnatomy } from '@ark-ui/react/number-input';
 

package/dist/esm/theme/recipes/pin-input.js

@@ -1,7 +1,5 @@
 import { defineSlotRecipe } from '../../styled-system/config.js';
 import { mapEntries } from '../../utils/entries.js';
-import 'react';
-import '../../utils/unit.js';
 import { inputRecipe } from './input.js';
 import { pinInputAnatomy } from '@ark-ui/react/pin-input';