mainbase-ui 3.36.0 → 3.37.1

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { DatePicker, useDatePickerContext } from '@ark-ui/react/date-picker';
 import { forwardRef, Fragment } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -24,7 +25,7 @@ const DatePickerPropsProvider = PropsProvider;
 const DatePickerClearTrigger = withContext(DatePicker.ClearTrigger, "clearTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(CloseIcon, null)
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
   }
 });
 const DatePickerContent = withContext(DatePicker.Content, "content", { forwardAsChild: true });
@@ -35,7 +36,7 @@ const DatePickerMonthSelect = withContext(DatePicker.MonthSelect, "monthSelect",
 const DatePickerNextTrigger = withContext(DatePicker.NextTrigger, "nextTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ChevronRightIcon, null)
+    children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
   }
 });
 const DatePickerPositioner = withContext(DatePicker.Positioner, "positioner", { forwardAsChild: true });
@@ -43,7 +44,7 @@ const DatePickerPresetTrigger = withContext(DatePicker.PresetTrigger, "presetTri
 const DatePickerPrevTrigger = withContext(DatePicker.PrevTrigger, "prevTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(ChevronLeftIcon, null)
+    children: /* @__PURE__ */ jsx(ChevronLeftIcon, {})
   }
 });
 const DatePickerRangeText = withContext(DatePicker.RangeText, "rangeText", { forwardAsChild: true });
@@ -82,62 +83,75 @@ const DatePickerWeekNumberCellText = withContext("span", "tableCellTrigger", {
   forwardAsChild: true
 });
 const DatePickerHeader = (props) => {
-  return /* @__PURE__ */ React.createElement(DatePickerViewControl, { ...props }, /* @__PURE__ */ React.createElement(DatePickerPrevTrigger, null), /* @__PURE__ */ React.createElement(DatePickerViewTrigger, null, /* @__PURE__ */ React.createElement(DatePickerRangeText, null)), /* @__PURE__ */ React.createElement(DatePickerNextTrigger, null));
+  return /* @__PURE__ */ jsxs(DatePickerViewControl, { ...props, children: [
+    /* @__PURE__ */ jsx(DatePickerPrevTrigger, {}),
+    /* @__PURE__ */ jsx(DatePickerViewTrigger, { children: /* @__PURE__ */ jsx(DatePickerRangeText, {}) }),
+    /* @__PURE__ */ jsx(DatePickerNextTrigger, {})
+  ] });
 };
 const DatePickerDayTable = (props) => {
   const { offset, weekNumberLabel = "#", ...rest } = props;
   const ctx = useDatePickerContext();
   const offsetDays = offset ? ctx.getOffset({ months: offset }) : void 0;
   const weeks = offsetDays ? offsetDays.weeks : ctx.weeks;
-  return /* @__PURE__ */ React.createElement(DatePickerTable, { ...rest }, /* @__PURE__ */ React.createElement(DatePickerTableHead, null, /* @__PURE__ */ React.createElement(DatePickerTableRow, null, ctx.showWeekNumbers && /* @__PURE__ */ React.createElement(DatePickerWeekNumberHeaderCell, null, weekNumberLabel), ctx.weekDays.map((weekDay, id) => /* @__PURE__ */ React.createElement(DatePickerTableHeader, { key: id }, weekDay.narrow)))), /* @__PURE__ */ React.createElement(DatePickerTableBody, null, weeks.map((week, weekIndex) => /* @__PURE__ */ React.createElement(DatePickerTableRow, { key: weekIndex }, ctx.showWeekNumbers && /* @__PURE__ */ React.createElement(DatePickerWeekNumberCell, { weekIndex, week }, /* @__PURE__ */ React.createElement(DatePickerWeekNumberCellText, null, ctx.getWeekNumber(week))), week.map((day, id) => /* @__PURE__ */ React.createElement(
-    DatePickerTableCell,
-    {
-      key: id,
-      value: day,
-      visibleRange: offsetDays?.visibleRange
-    },
-    /* @__PURE__ */ React.createElement(DatePickerTableCellTrigger, null, day.day)
-  ))))));
+  return /* @__PURE__ */ jsxs(DatePickerTable, { ...rest, children: [
+    /* @__PURE__ */ jsx(DatePickerTableHead, { children: /* @__PURE__ */ jsxs(DatePickerTableRow, { children: [
+      ctx.showWeekNumbers && /* @__PURE__ */ jsx(DatePickerWeekNumberHeaderCell, { children: weekNumberLabel }),
+      ctx.weekDays.map((weekDay, id) => /* @__PURE__ */ jsx(DatePickerTableHeader, { children: weekDay.narrow }, id))
+    ] }) }),
+    /* @__PURE__ */ jsx(DatePickerTableBody, { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsxs(DatePickerTableRow, { children: [
+      ctx.showWeekNumbers && /* @__PURE__ */ jsx(DatePickerWeekNumberCell, { weekIndex, week, children: /* @__PURE__ */ jsx(DatePickerWeekNumberCellText, { children: ctx.getWeekNumber(week) }) }),
+      week.map((day, id) => /* @__PURE__ */ jsx(
+        DatePickerTableCell,
+        {
+          value: day,
+          visibleRange: offsetDays?.visibleRange,
+          children: /* @__PURE__ */ jsx(DatePickerTableCellTrigger, { children: day.day })
+        },
+        id
+      ))
+    ] }, weekIndex)) })
+  ] });
 };
 const DatePickerMonthTable = (props) => {
   const datePicker = useDatePickerContext();
   const { columns = 4, format = "short", ...rest } = props;
-  return /* @__PURE__ */ React.createElement(DatePickerTable, { ...rest }, /* @__PURE__ */ React.createElement(DatePickerTableBody, null, datePicker.getMonthsGrid({ columns, format }).map((months, id) => /* @__PURE__ */ React.createElement(DatePickerTableRow, { key: id }, months.map((month, id2) => /* @__PURE__ */ React.createElement(DatePickerTableCell, { key: id2, value: month.value }, /* @__PURE__ */ React.createElement(DatePickerTableCellTrigger, null, month.label)))))));
+  return /* @__PURE__ */ jsx(DatePickerTable, { ...rest, children: /* @__PURE__ */ jsx(DatePickerTableBody, { children: datePicker.getMonthsGrid({ columns, format }).map((months, id) => /* @__PURE__ */ jsx(DatePickerTableRow, { children: months.map((month, id2) => /* @__PURE__ */ jsx(DatePickerTableCell, { value: month.value, children: /* @__PURE__ */ jsx(DatePickerTableCellTrigger, { children: month.label }) }, id2)) }, id)) }) });
 };
 const DatePickerYearTable = (props) => {
   const datePicker = useDatePickerContext();
   const { columns = 4, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(DatePickerTable, { ...rest }, /* @__PURE__ */ React.createElement(DatePickerTableBody, null, datePicker.getYearsGrid({ columns }).map((years, id) => /* @__PURE__ */ React.createElement(DatePickerTableRow, { key: id }, years.map((year, id2) => /* @__PURE__ */ React.createElement(DatePickerTableCell, { key: id2, value: year.value }, /* @__PURE__ */ React.createElement(DatePickerTableCellTrigger, null, year.label)))))));
+  return /* @__PURE__ */ jsx(DatePickerTable, { ...rest, children: /* @__PURE__ */ jsx(DatePickerTableBody, { children: datePicker.getYearsGrid({ columns }).map((years, id) => /* @__PURE__ */ jsx(DatePickerTableRow, { children: years.map((year, id2) => /* @__PURE__ */ jsx(DatePickerTableCell, { value: year.value, children: /* @__PURE__ */ jsx(DatePickerTableCellTrigger, { children: year.label }) }, id2)) }, id)) }) });
 };
 const DatePickerValue = (props) => {
   const { placeholder, value, ...rest } = props;
   const ctx = useDatePickerContext();
-  return /* @__PURE__ */ React.createElement(DatePickerTrigger, { asChild: true, unstyled: true, ...rest }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(DatePickerTrigger, { asChild: true, unstyled: true, ...rest, children: /* @__PURE__ */ jsx(
     Button,
     {
       variant: "outline",
       width: "full",
       justifyContent: "flex-start",
-      textAlign: "start"
-    },
-    ctx.value.length ? ctx.value[0].toDate("UTC").toLocaleDateString() : placeholder ?? "Select date"
-  ));
+      textAlign: "start",
+      children: ctx.value.length ? ctx.value[0].toDate("UTC").toLocaleDateString() : placeholder ?? "Select date"
+    }
+  ) });
 };
 const DatePickerValueText = forwardRef((props, ref) => {
   const { children, placeholder, separator = ", ", ...localProps } = props;
   const ctx = useDatePickerContext();
   const hasValue = ctx.value.length > 0;
   if (typeof children === "function") {
-    return /* @__PURE__ */ React.createElement(Fragment, null, hasValue ? ctx.value.map((value, index) => /* @__PURE__ */ React.createElement(Fragment, { key: index }, children({
+    return /* @__PURE__ */ jsx(Fragment, { children: hasValue ? ctx.value.map((value, index) => /* @__PURE__ */ jsx(Fragment, { children: children({
       value,
       index,
       valueAsString: ctx.valueAsString[index],
       remove: () => {
         ctx.setValue(ctx.value.filter((_, i) => i !== index));
       }
-    }))) : placeholder);
+    }) }, index)) : placeholder });
   }
-  return /* @__PURE__ */ React.createElement(mainbase.span, { ...localProps, ref }, hasValue ? ctx.valueAsString.join(separator) : placeholder);
+  return /* @__PURE__ */ jsx(mainbase.span, { ...localProps, ref, children: hasValue ? ctx.valueAsString.join(separator) : placeholder });
 });
 DatePickerValueText.displayName = "DatePickerValueText";
 

package/dist/esm/components/dialog/dialog.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Dialog, useDialogContext } from '@ark-ui/react/dialog';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -40,7 +41,7 @@ const DialogTitle = withContext(
 const DialogCloseTrigger = withContext(Dialog.CloseTrigger, "closeTrigger", { forwardAsChild: true });
 const DialogActionTrigger = forwardRef(function DialogActionTrigger2(props, ref) {
   const dialog = useDialogContext();
-  return /* @__PURE__ */ React.createElement(mainbase.button, { ...props, ref, onClick: () => dialog.setOpen(false) });
+  return /* @__PURE__ */ jsx(mainbase.button, { ...props, ref, onClick: () => dialog.setOpen(false) });
 });
 const DialogBackdrop = withContext(
   Dialog.Backdrop,

package/dist/esm/components/drawer/drawer.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Dialog, useDialogContext } from '@ark-ui/react/dialog';
 import { forwardRef } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -40,7 +41,7 @@ const DrawerTitle = withContext(
 const DrawerCloseTrigger = withContext(Dialog.CloseTrigger, "closeTrigger", { forwardAsChild: true });
 const DrawerActionTrigger = forwardRef(function DrawerActionTrigger2(props, ref) {
   const drawer = useDialogContext();
-  return /* @__PURE__ */ React.createElement(mainbase.button, { ...props, ref, onClick: () => drawer.setOpen(false) });
+  return /* @__PURE__ */ jsx(mainbase.button, { ...props, ref, onClick: () => drawer.setOpen(false) });
 });
 const DrawerBackdrop = withContext(
   Dialog.Backdrop,

package/dist/esm/components/editable/editable.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Editable, useEditableContext } from '@ark-ui/react/editable';
 import { ark } from '@ark-ui/react/factory';
 import { forwardRef } from 'react';
@@ -32,7 +33,7 @@ const EditableInput = withContext(
 const ArkEditableTextarea = forwardRef(function EditableTextarea2(props, ref) {
   const editable = useEditableContext();
   const mergedProps = mergeProps(editable.getInputProps(), props);
-  return /* @__PURE__ */ React.createElement(ark.textarea, { ref, ...mergedProps });
+  return /* @__PURE__ */ jsx(ark.textarea, { ref, ...mergedProps });
 });
 const EditableTextarea = withContext(ArkEditableTextarea, "input", { forwardAsChild: true });
 const EditableControl = withContext(Editable.Control, "control", { forwardAsChild: true });

package/dist/esm/components/field/field.js

@@ -1,10 +1,10 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Field, useFieldContext } from '@ark-ui/react/field';
 import { forwardRef } 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';
 import '../icon/icon.js';
 import { createIcon } from '../icon/create-icon.js';
 
@@ -44,16 +44,16 @@ const FieldRequiredIndicator = forwardRef(function RequiredIndicator(props, ref)
   if (!field?.required) {
     return fallback;
   }
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     mainbase.span,
     {
       ref,
       "aria-hidden": "true",
       ...restProps,
       className: cx(classNames.requiredIndicator, props.className),
-      css: [styles.requiredIndicator, props.css]
-    },
-    children
+      css: [styles.requiredIndicator, props.css],
+      children
+    }
   );
 });
 

package/dist/esm/components/file-upload/file-upload.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { FileUpload, useFileUploadContext } from '@ark-ui/react/file-upload';
 import { forwardRef, useMemo } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -31,7 +32,7 @@ const FileUploadItemContent = withContext("div", "itemContent");
 const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, "itemDeleteTrigger", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(CloseIcon, null)
+    children: /* @__PURE__ */ jsx(CloseIcon, {})
   }
 });
 const FileUploadItemGroup = withContext(FileUpload.ItemGroup, "itemGroup", { forwardAsChild: true });
@@ -39,7 +40,7 @@ const FileUploadItemName = withContext(FileUpload.ItemName, "itemName", { forwar
 const FileUploadItemPreview = withContext(FileUpload.ItemPreview, "itemPreview", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(FileIcon, null)
+    children: /* @__PURE__ */ jsx(FileIcon, {})
   }
 });
 const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, "itemPreviewImage", { forwardAsChild: true });
@@ -50,19 +51,26 @@ const FileUploadItems = (props) => {
   const { showSize, clearable, files, ...rest } = props;
   const fileUpload = useFileUploadContext();
   const acceptedFiles = files ?? fileUpload.acceptedFiles;
-  return /* @__PURE__ */ React.createElement(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__ */ jsx(For, { each: acceptedFiles, children: (file) => /* @__PURE__ */ jsxs(FileUploadItem, { file, ...rest, children: [
+    /* @__PURE__ */ jsx(FileUploadItemPreview, {}),
+    showSize ? /* @__PURE__ */ jsxs(FileUploadItemContent, { children: [
+      /* @__PURE__ */ jsx(FileUploadItemName, {}),
+      /* @__PURE__ */ jsx(FileUploadItemSizeText, {})
+    ] }) : /* @__PURE__ */ jsx(FileUploadItemName, { flex: "1" }),
+    clearable && /* @__PURE__ */ jsx(FileUploadItemDeleteTrigger, {})
+  ] }, file.name) });
 };
 const FileUploadList = forwardRef(
   function FileUploadList2(props, ref) {
     const { showSize, clearable, files, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(FileUploadItemGroup, { ref, ...rest }, /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(FileUploadItemGroup, { ref, ...rest, children: /* @__PURE__ */ jsx(
       FileUploadItems,
       {
         showSize,
         clearable,
         files
       }
-    ));
+    ) });
   }
 );
 const FileUploadFileText = forwardRef(function FileUploadFileText2(props, ref) {
@@ -79,7 +87,7 @@ const FileUploadFileText = forwardRef(function FileUploadFileText2(props, ref) {
     }
     return fallback;
   }, [acceptedFiles, fallback]);
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     Span,
     {
       ref,
@@ -87,9 +95,9 @@ const FileUploadFileText = forwardRef(function FileUploadFileText2(props, ref) {
       "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.Context;

package/dist/esm/components/flex/flex.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 
@@ -15,7 +16,7 @@ const Flex = forwardRef(
       inline,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,

package/dist/esm/components/float/float.js

@@ -1,8 +1,8 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 import { mapObject } from '../../utils/walk-object.js';
-import '../../utils/unit.js';
 
 const Float = forwardRef(
   function Float2(props, ref) {
@@ -65,7 +65,7 @@ const Float = forwardRef(
       }),
       [offset, offsetX, offsetY, placement]
     );
-    return /* @__PURE__ */ React.createElement(mainbase.div, { ref, css: [styles, cssProp], ...rest });
+    return /* @__PURE__ */ jsx(mainbase.div, { ref, css: [styles, cssProp], ...rest });
   }
 );
 Float.displayName = "Float";

package/dist/esm/components/floating-panel/floating-panel.js

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

package/dist/esm/components/grid/grid-item.js

@@ -1,9 +1,9 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef, useMemo } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 import { compact } from '../../utils/compact.js';
 import { mapObject } from '../../utils/walk-object.js';
-import '../../utils/unit.js';
 
 function spanFn(span) {
   return mapObject(
@@ -36,7 +36,7 @@ const GridItem = forwardRef(
       }),
       [area, colSpan, colStart, colEnd, rowEnd, rowSpan, rowStart]
     );
-    return /* @__PURE__ */ React.createElement(mainbase.div, { ref, css: [styles, css], ...rest });
+    return /* @__PURE__ */ jsx(mainbase.div, { ref, css: [styles, css], ...rest });
   }
 );
 GridItem.displayName = "GridItem";

package/dist/esm/components/grid/grid.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 
@@ -16,7 +17,7 @@ const Grid = forwardRef(
       inline,
       ...rest
     } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ...rest,

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

@@ -1,9 +1,9 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { memo, forwardRef, useMemo, Children, isValidElement, cloneElement } from 'react';
 import { mainbase } from '../../styled-system/factory.js';
 import { dataAttr } from '../../utils/attr.js';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
 
 const StyledGroup = mainbase("div", {
   base: {
@@ -126,7 +126,7 @@ const Group = memo(
         });
       });
     }, [children, skip]);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       StyledGroup,
       {
         ref,
@@ -134,9 +134,9 @@ const Group = memo(
         justifyContent: justify,
         flexWrap: wrap,
         ...rest,
-        className: cx("mainbase-group", props.className)
-      },
-      _children
+        className: cx("mainbase-group", props.className),
+        children: _children
+      }
     );
   })
 );

package/dist/esm/components/highlight/highlight.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { useHighlight } from '@ark-ui/react/highlight';
 import { Fragment } from 'react';
 import { For } from '../for/for.js';
@@ -15,9 +16,9 @@ function Highlight(props) {
     matchAll,
     ignoreCase
   });
-  return /* @__PURE__ */ React.createElement(For, { each: chunks }, (chunk, index) => {
-    return chunk.match ? /* @__PURE__ */ React.createElement(Mark, { key: index, css: styles }, chunk.text) : /* @__PURE__ */ React.createElement(Fragment, { key: index }, chunk.text);
-  });
+  return /* @__PURE__ */ jsx(For, { each: chunks, children: (chunk, index) => {
+    return chunk.match ? /* @__PURE__ */ jsx(Mark, { css: styles, children: chunk.text }, index) : /* @__PURE__ */ jsx(Fragment, { children: chunk.text }, index);
+  } });
 }
 
 export { Highlight };

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { HoverCard } from '@ark-ui/react/hover-card';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 
@@ -22,7 +23,7 @@ const HoverCardArrow = withContext(
   "arrow",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(HoverCardArrowTip, null) }
+    defaultProps: { children: /* @__PURE__ */ jsx(HoverCardArrowTip, {}) }
   }
 );
 const HoverCardContext = HoverCard.Context;

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Children, forwardRef } from 'react';
 import { Icon } from './icon.js';
 
@@ -10,16 +11,16 @@ function createIcon(options) {
     defaultProps = {}
   } = options;
   const path = Children.toArray(options.path);
-  const Comp = forwardRef((props, ref) => /* @__PURE__ */ React.createElement(
+  const Comp = forwardRef((props, ref) => /* @__PURE__ */ jsx(
     Icon,
     {
       ref,
       asChild: false,
       viewBox,
       ...defaultProps,
-      ...props
-    },
-    path.length ? path : /* @__PURE__ */ React.createElement("path", { fill: "currentColor", d: pathDefinition })
+      ...props,
+      children: path.length ? path : /* @__PURE__ */ jsx("path", { fill: "currentColor", d: pathDefinition })
+    }
   ));
   Comp.displayName = displayName;
   return Comp;

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

@@ -1,9 +1,9 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import * as React from 'react';
 import { createRecipeContext } from '../../styled-system/create-recipe-context.js';
 import { mainbase } from '../../styled-system/factory.js';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
 
 const { useRecipeResult, PropsProvider } = createRecipeContext({ key: "icon" });
 const Icon = React.forwardRef(
@@ -13,7 +13,7 @@ const Icon = React.forwardRef(
       className,
       props: otherProps
     } = useRecipeResult({ asChild: !props.as, ...props });
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.svg,
       {
         ref,