mainbase-ui 3.36.0 → 3.37.0

package/dist/cjs/components/drawer/drawer.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var dialog = require('@ark-ui/react/dialog');
-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');
 
@@ -40,9 +41,9 @@ const DrawerTitle = withContext(
   { forwardAsChild: true }
 );
 const DrawerCloseTrigger = withContext(dialog.Dialog.CloseTrigger, "closeTrigger", { forwardAsChild: true });
-const DrawerActionTrigger = React$1.forwardRef(function DrawerActionTrigger2(props, ref) {
+const DrawerActionTrigger = React.forwardRef(function DrawerActionTrigger2(props, ref) {
   const drawer = dialog.useDialogContext();
-  return /* @__PURE__ */ React.createElement(factory.mainbase.button, { ...props, ref, onClick: () => drawer.setOpen(false) });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.mainbase.button, { ...props, ref, onClick: () => drawer.setOpen(false) });
 });
 const DrawerBackdrop = withContext(
   dialog.Dialog.Backdrop,

package/dist/cjs/components/editable/editable.cjs

@@ -1,9 +1,10 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var editable = require('@ark-ui/react/editable');
 var factory = require('@ark-ui/react/factory');
-var React$1 = require('react');
+var React = require('react');
 var mergeProps = require('../../merge-props.cjs');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 
@@ -31,10 +32,10 @@ const EditableInput = withContext(
   "input",
   { forwardAsChild: true }
 );
-const ArkEditableTextarea = React$1.forwardRef(function EditableTextarea2(props, ref) {
+const ArkEditableTextarea = React.forwardRef(function EditableTextarea2(props, ref) {
   const editable$1 = editable.useEditableContext();
   const mergedProps = mergeProps.mergeProps(editable$1.getInputProps(), props);
-  return /* @__PURE__ */ React.createElement(factory.ark.textarea, { ref, ...mergedProps });
+  return /* @__PURE__ */ jsxRuntime.jsx(factory.ark.textarea, { ref, ...mergedProps });
 });
 const EditableTextarea = withContext(ArkEditableTextarea, "input", { forwardAsChild: true });
 const EditableControl = withContext(editable.Editable.Control, "control", { forwardAsChild: true });

package/dist/cjs/components/field/field.cjs

@@ -1,12 +1,12 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var field = require('@ark-ui/react/field');
-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 cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 require('../icon/icon.cjs');
 var createIcon = require('../icon/create-icon.cjs');
 
@@ -38,7 +38,7 @@ const FieldErrorIcon = createIcon.createIcon({
   d: "M11.983,0a12.206,12.206,0,0,0-8.51,3.653A11.8,11.8,0,0,0,0,12.207,11.779,11.779,0,0,0,11.8,24h.214A12.111,12.111,0,0,0,24,11.791h0A11.766,11.766,0,0,0,11.983,0ZM10.5,16.542a1.476,1.476,0,0,1,1.449-1.53h.027a1.527,1.527,0,0,1,1.523,1.47,1.475,1.475,0,0,1-1.449,1.53h-.027A1.529,1.529,0,0,1,10.5,16.542ZM11,12.5v-6a1,1,0,0,1,2,0v6a1,1,0,1,1-2,0Z",
   defaultProps: { boxSize: "1em" }
 });
-const FieldRequiredIndicator = React$1.forwardRef(function RequiredIndicator(props, ref) {
+const FieldRequiredIndicator = React.forwardRef(function RequiredIndicator(props, ref) {
   const { fallback, children = "*", ...restProps } = props;
   const field$1 = field.useFieldContext();
   const classNames = useClassNames();
@@ -46,16 +46,16 @@ const FieldRequiredIndicator = React$1.forwardRef(function RequiredIndicator(pro
   if (!field$1?.required) {
     return fallback;
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     factory.mainbase.span,
     {
       ref,
       "aria-hidden": "true",
       ...restProps,
       className: cx.cx(classNames.requiredIndicator, props.className),
-      css: [styles.requiredIndicator, props.css]
-    },
-    children
+      css: [styles.requiredIndicator, props.css],
+      children
+    }
   );
 });
 

package/dist/cjs/components/file-upload/file-upload.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var fileUpload = require('@ark-ui/react/file-upload');
-var React$1 = require('react');
+var React = require('react');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var _for = require('../for/for.cjs');
 var icons = require('../icons.cjs');
@@ -33,7 +34,7 @@ const FileUploadItemContent = withContext("div", "itemContent");
 const FileUploadItemDeleteTrigger = withContext(fileUpload.FileUpload.ItemDeleteTrigger, "itemDeleteTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.CloseIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.CloseIcon, {})
   }
 });
 const FileUploadItemGroup = withContext(fileUpload.FileUpload.ItemGroup, "itemGroup", { forwardAsChild: true });
@@ -41,7 +42,7 @@ const FileUploadItemName = withContext(fileUpload.FileUpload.ItemName, "itemName
 const FileUploadItemPreview = withContext(fileUpload.FileUpload.ItemPreview, "itemPreview", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(icons.FileIcon, null)
+    children: /* @__PURE__ */ jsxRuntime.jsx(icons.FileIcon, {})
   }
 });
 const FileUploadItemPreviewImage = withContext(fileUpload.FileUpload.ItemPreviewImage, "itemPreviewImage", { forwardAsChild: true });
@@ -52,27 +53,34 @@ const FileUploadItems = (props) => {
   const { showSize, clearable, files, ...rest } = props;
   const fileUpload$1 = fileUpload.useFileUploadContext();
   const acceptedFiles = files ?? fileUpload$1.acceptedFiles;
-  return /* @__PURE__ */ React.createElement(_for.For, { each: acceptedFiles }, (file) => /* @__PURE__ */ React.createElement(FileUploadItem, { file, key: file.name, ...rest }, /* @__PURE__ */ React.createElement(FileUploadItemPreview, null), showSize ? /* @__PURE__ */ React.createElement(FileUploadItemContent, null, /* @__PURE__ */ React.createElement(FileUploadItemName, null), /* @__PURE__ */ React.createElement(FileUploadItemSizeText, null)) : /* @__PURE__ */ React.createElement(FileUploadItemName, { flex: "1" }), clearable && /* @__PURE__ */ React.createElement(FileUploadItemDeleteTrigger, null)));
+  return /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: acceptedFiles, children: (file) => /* @__PURE__ */ jsxRuntime.jsxs(FileUploadItem, { file, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(FileUploadItemPreview, {}),
+    showSize ? /* @__PURE__ */ jsxRuntime.jsxs(FileUploadItemContent, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(FileUploadItemName, {}),
+      /* @__PURE__ */ jsxRuntime.jsx(FileUploadItemSizeText, {})
+    ] }) : /* @__PURE__ */ jsxRuntime.jsx(FileUploadItemName, { flex: "1" }),
+    clearable && /* @__PURE__ */ jsxRuntime.jsx(FileUploadItemDeleteTrigger, {})
+  ] }, file.name) });
 };
-const FileUploadList = React$1.forwardRef(
+const FileUploadList = React.forwardRef(
   function FileUploadList2(props, ref) {
     const { showSize, clearable, files, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(FileUploadItemGroup, { ref, ...rest }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(FileUploadItemGroup, { ref, ...rest, children: /* @__PURE__ */ jsxRuntime.jsx(
       FileUploadItems,
       {
         showSize,
         clearable,
         files
       }
-    ));
+    ) });
   }
 );
-const FileUploadFileText = React$1.forwardRef(function FileUploadFileText2(props, ref) {
+const FileUploadFileText = React.forwardRef(function FileUploadFileText2(props, ref) {
   const { fallback = "Select file(s)", ...rest } = props;
   const fileUpload$1 = fileUpload.useFileUploadContext();
   const styles = useFileUploadStyles();
   const acceptedFiles = fileUpload$1.acceptedFiles;
-  const fileText = React$1.useMemo(() => {
+  const fileText = React.useMemo(() => {
     if (acceptedFiles.length === 1) {
       return acceptedFiles[0].name;
     }
@@ -81,7 +89,7 @@ const FileUploadFileText = React$1.forwardRef(function FileUploadFileText2(props
     }
     return fallback;
   }, [acceptedFiles, fallback]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxRuntime.jsx(
     index.Span,
     {
       ref,
@@ -89,9 +97,9 @@ const FileUploadFileText = React$1.forwardRef(function FileUploadFileText2(props
       "data-scope": "file-upload",
       "data-part": "file-text",
       ...rest,
-      css: [styles.fileText, props.css]
-    },
-    fileText
+      css: [styles.fileText, props.css],
+      children: fileText
+    }
   );
 });
 const FileUploadContext = fileUpload.FileUpload.Context;

package/dist/cjs/components/flex/flex.cjs

@@ -1,10 +1,11 @@
 "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');
 
-const Flex = React$1.forwardRef(
+const Flex = React.forwardRef(
   function Flex2(props, ref) {
     const {
       direction,
@@ -17,7 +18,7 @@ const Flex = React$1.forwardRef(
       inline,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ref,

package/dist/cjs/components/float/float.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 factory = require('../../styled-system/factory.cjs');
 var walkObject = require('../../utils/walk-object.cjs');
-require('../../utils/unit.cjs');
 
-const Float = React$1.forwardRef(
+const Float = React.forwardRef(
   function Float2(props, ref) {
     const {
       offsetX,
@@ -16,7 +16,7 @@ const Float = React$1.forwardRef(
       css: cssProp,
       ...rest
     } = props;
-    const styles = React$1.useMemo(
+    const styles = React.useMemo(
       () => ({
         display: "inline-flex",
         justifyContent: "center",
@@ -67,7 +67,7 @@ const Float = React$1.forwardRef(
       }),
       [offset, offsetX, offsetY, placement]
     );
-    return /* @__PURE__ */ React.createElement(factory.mainbase.div, { ref, css: [styles, cssProp], ...rest });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.mainbase.div, { ref, css: [styles, cssProp], ...rest });
   }
 );
 Float.displayName = "Float";

package/dist/cjs/components/floating-panel/floating-panel.cjs

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var floatingPanel = require('@ark-ui/react/floating-panel');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 var _for = require('../for/for.cjs');
@@ -34,7 +35,7 @@ const FloatingPanelTitle = withContext(floatingPanel.FloatingPanel.Title, "title
 const FloatingPanelDragTrigger = withContext(floatingPanel.FloatingPanel.DragTrigger, "dragTrigger", { forwardAsChild: true });
 const FloatingPanelResizeTrigger = withContext(floatingPanel.FloatingPanel.ResizeTrigger, "resizeTrigger", { forwardAsChild: true });
 const RESIZE_AXES = ["n", "s", "e", "w", "ne", "nw", "se", "sw"];
-const FloatingPanelResizeTriggers = (props) => /* @__PURE__ */ React.createElement(_for.For, { each: props.axes ?? RESIZE_AXES }, (axis) => /* @__PURE__ */ React.createElement(FloatingPanelResizeTrigger, { key: axis, ...props, axis }));
+const FloatingPanelResizeTriggers = (props) => /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: props.axes ?? RESIZE_AXES, children: (axis) => /* @__PURE__ */ jsxRuntime.jsx(FloatingPanelResizeTrigger, { ...props, axis }, axis) });
 const FloatingPanelStageTrigger = withContext(floatingPanel.FloatingPanel.StageTrigger, "stageTrigger", { forwardAsChild: true });
 const FloatingPanelCloseTrigger = withContext(floatingPanel.FloatingPanel.CloseTrigger, "closeTrigger", { forwardAsChild: true });
 const FloatingPanelControl = withContext(floatingPanel.FloatingPanel.Control, "control", { forwardAsChild: true });

package/dist/cjs/components/grid/grid-item.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 factory = require('../../styled-system/factory.cjs');
 var compact = require('../../utils/compact.cjs');
 var walkObject = require('../../utils/walk-object.cjs');
-require('../../utils/unit.cjs');
 
 function spanFn(span) {
   return walkObject.mapObject(
@@ -13,7 +13,7 @@ function spanFn(span) {
     (value) => value === "auto" ? "auto" : `span ${value}/span ${value}`
   );
 }
-const GridItem = React$1.forwardRef(
+const GridItem = React.forwardRef(
   function GridItem2(props, ref) {
     const {
       area,
@@ -26,7 +26,7 @@ const GridItem = React$1.forwardRef(
       css,
       ...rest
     } = props;
-    const styles = React$1.useMemo(
+    const styles = React.useMemo(
       () => compact.compact({
         gridArea: area,
         gridColumn: spanFn(colSpan),
@@ -38,7 +38,7 @@ const GridItem = React$1.forwardRef(
       }),
       [area, colSpan, colStart, colEnd, rowEnd, rowSpan, rowStart]
     );
-    return /* @__PURE__ */ React.createElement(factory.mainbase.div, { ref, css: [styles, css], ...rest });
+    return /* @__PURE__ */ jsxRuntime.jsx(factory.mainbase.div, { ref, css: [styles, css], ...rest });
   }
 );
 GridItem.displayName = "GridItem";

package/dist/cjs/components/grid/grid.cjs

@@ -1,10 +1,11 @@
 "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');
 
-const Grid = React$1.forwardRef(
+const Grid = React.forwardRef(
   function Grid2(props, ref) {
     const {
       templateAreas,
@@ -18,7 +19,7 @@ const Grid = React$1.forwardRef(
       inline,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.div,
       {
         ...rest,

package/dist/cjs/components/group/group.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 factory = require('../../styled-system/factory.cjs');
 var attr = require('../../utils/attr.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 
 const StyledGroup = factory.mainbase("div", {
   base: {
@@ -94,8 +94,8 @@ const StyledGroup = factory.mainbase("div", {
     orientation: "horizontal"
   }
 });
-const Group = React$1.memo(
-  React$1.forwardRef(function Group2(props, ref) {
+const Group = React.memo(
+  React.forwardRef(function Group2(props, ref) {
     const {
       align = "center",
       justify = "flex-start",
@@ -104,8 +104,8 @@ const Group = React$1.memo(
       skip,
       ...rest
     } = props;
-    const _children = React$1.useMemo(() => {
-      let childArray = React$1.Children.toArray(children).filter(React$1.isValidElement);
+    const _children = React.useMemo(() => {
+      let childArray = React.Children.toArray(children).filter(React.isValidElement);
       if (childArray.length === 1) return childArray;
       const validChildArray = childArray.filter((child) => !skip?.(child));
       const validChildCount = validChildArray.length;
@@ -114,7 +114,7 @@ const Group = React$1.memo(
         const childProps = child.props;
         if (skip?.(child)) return child;
         const index = validChildArray.indexOf(child);
-        return React$1.cloneElement(child, {
+        return React.cloneElement(child, {
           ...childProps,
           "data-group-item": "",
           "data-first": attr.dataAttr(index === 0),
@@ -128,7 +128,7 @@ const Group = React$1.memo(
         });
       });
     }, [children, skip]);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       StyledGroup,
       {
         ref,
@@ -136,9 +136,9 @@ const Group = React$1.memo(
         justifyContent: justify,
         flexWrap: wrap,
         ...rest,
-        className: cx.cx("mainbase-group", props.className)
-      },
-      _children
+        className: cx.cx("mainbase-group", props.className),
+        children: _children
+      }
     );
   })
 );

package/dist/cjs/components/highlight/highlight.cjs

@@ -1,8 +1,9 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var highlight = require('@ark-ui/react/highlight');
-var React$1 = require('react');
+var React = require('react');
 var _for = require('../for/for.cjs');
 var index = require('../mark/index.cjs');
 
@@ -17,9 +18,9 @@ function Highlight(props) {
     matchAll,
     ignoreCase
   });
-  return /* @__PURE__ */ React.createElement(_for.For, { each: chunks }, (chunk, index$1) => {
-    return chunk.match ? /* @__PURE__ */ React.createElement(index.Mark, { key: index$1, css: styles }, chunk.text) : /* @__PURE__ */ React.createElement(React$1.Fragment, { key: index$1 }, chunk.text);
-  });
+  return /* @__PURE__ */ jsxRuntime.jsx(_for.For, { each: chunks, children: (chunk, index$1) => {
+    return chunk.match ? /* @__PURE__ */ jsxRuntime.jsx(index.Mark, { css: styles, children: chunk.text }, index$1) : /* @__PURE__ */ jsxRuntime.jsx(React.Fragment, { children: chunk.text }, index$1);
+  } });
 }
 
 exports.Highlight = Highlight;

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

@@ -1,6 +1,7 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var hoverCard = require('@ark-ui/react/hover-card');
 var createSlotRecipeContext = require('../../styled-system/create-slot-recipe-context.cjs');
 
@@ -24,7 +25,7 @@ const HoverCardArrow = withContext(
   "arrow",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(HoverCardArrowTip, null) }
+    defaultProps: { children: /* @__PURE__ */ jsxRuntime.jsx(HoverCardArrowTip, {}) }
   }
 );
 const HoverCardContext = hoverCard.HoverCard.Context;

package/dist/cjs/components/icon/create-icon.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 icon = require('./icon.cjs');
 
 function createIcon(options) {
@@ -11,17 +12,17 @@ function createIcon(options) {
     displayName,
     defaultProps = {}
   } = options;
-  const path = React$1.Children.toArray(options.path);
-  const Comp = React$1.forwardRef((props, ref) => /* @__PURE__ */ React.createElement(
+  const path = React.Children.toArray(options.path);
+  const Comp = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx(
     icon.Icon,
     {
       ref,
       asChild: false,
       viewBox,
       ...defaultProps,
-      ...props
-    },
-    path.length ? path : /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: pathDefinition })
+      ...props,
+      children: path.length ? path : /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "currentColor", d: pathDefinition })
+    }
   ));
   Comp.displayName = displayName;
   return Comp;

package/dist/cjs/components/icon/icon.cjs

@@ -1,11 +1,11 @@
 "use client";
 'use strict';
 
+var jsxRuntime = require('react/jsx-runtime');
 var React = require('react');
 var createRecipeContext = require('../../styled-system/create-recipe-context.cjs');
 var factory = require('../../styled-system/factory.cjs');
 var cx = require('../../utils/cx.cjs');
-require('../../utils/unit.cjs');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -34,7 +34,7 @@ const Icon = React__namespace.forwardRef(
       className,
       props: otherProps
     } = useRecipeResult({ asChild: !props.as, ...props });
-    return /* @__PURE__ */ React__namespace.createElement(
+    return /* @__PURE__ */ jsxRuntime.jsx(
       factory.mainbase.svg,
       {
         ref,