mainbase-ui 3.36.0 → 3.37.0

package/dist/esm/components/icons.js

@@ -1,8 +1,9 @@
 "use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { mainbase } from '../styled-system/factory.js';
 
 const CheckIcon = (props) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     mainbase.svg,
     {
       viewBox: "0 0 24 24",
@@ -11,12 +12,12 @@ const CheckIcon = (props) => {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      ...props
-    },
-    /* @__PURE__ */ React.createElement("path", { d: "M20 6 9 17l-5-5" })
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" })
+    }
   );
 };
-const ChevronLeftIcon = (props) => /* @__PURE__ */ React.createElement(
+const ChevronLeftIcon = (props) => /* @__PURE__ */ jsx(
   mainbase.svg,
   {
     viewBox: "0 0 24 24",
@@ -25,11 +26,11 @@ const ChevronLeftIcon = (props) => /* @__PURE__ */ React.createElement(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "m15 18-6-6 6-6" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "m15 18-6-6 6-6" })
+  }
 );
-const ChevronUpIcon = (props) => /* @__PURE__ */ React.createElement(
+const ChevronUpIcon = (props) => /* @__PURE__ */ jsx(
   mainbase.svg,
   {
     viewBox: "0 0 24 24",
@@ -38,12 +39,12 @@ const ChevronUpIcon = (props) => /* @__PURE__ */ React.createElement(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "m18 15-6-6-6 6" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "m18 15-6-6-6 6" })
+  }
 );
 const ChevronDownIcon = (props) => {
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     mainbase.svg,
     {
       viewBox: "0 0 24 24",
@@ -52,12 +53,12 @@ const ChevronDownIcon = (props) => {
       strokeWidth: "2",
       strokeLinecap: "round",
       strokeLinejoin: "round",
-      ...props
-    },
-    /* @__PURE__ */ React.createElement("path", { d: "m6 9 6 6 6-6" })
+      ...props,
+      children: /* @__PURE__ */ jsx("path", { d: "m6 9 6 6 6-6" })
+    }
   );
 };
-const ChevronRightIcon = (props) => /* @__PURE__ */ React.createElement(
+const ChevronRightIcon = (props) => /* @__PURE__ */ jsx(
   mainbase.svg,
   {
     viewBox: "0 0 24 24",
@@ -66,11 +67,11 @@ const ChevronRightIcon = (props) => /* @__PURE__ */ React.createElement(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "m9 18 6-6-6-6" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" })
+  }
 );
-const EllpsisIcon = (props) => /* @__PURE__ */ React.createElement(
+const EllpsisIcon = (props) => /* @__PURE__ */ jsxs(
   mainbase.svg,
   {
     viewBox: "0 0 24 24",
@@ -79,13 +80,15 @@ const EllpsisIcon = (props) => /* @__PURE__ */ React.createElement(
     strokeWidth: "2",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "1" }),
-  /* @__PURE__ */ React.createElement("circle", { cx: "19", cy: "12", r: "1" }),
-  /* @__PURE__ */ React.createElement("circle", { cx: "5", cy: "12", r: "1" })
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+    ]
+  }
 );
-const ArrowUpIcon = (props) => /* @__PURE__ */ React.createElement(
+const ArrowUpIcon = (props) => /* @__PURE__ */ jsxs(
   mainbase.svg,
   {
     viewBox: "0 0 24 24",
@@ -94,12 +97,14 @@ const ArrowUpIcon = (props) => /* @__PURE__ */ React.createElement(
     strokeWidth: "3",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "m5 12 7-7 7 7" }),
-  /* @__PURE__ */ React.createElement("path", { d: "M12 19V5" })
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "m5 12 7-7 7 7" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 19V5" })
+    ]
+  }
 );
-const ArrowDownIcon = (props) => /* @__PURE__ */ React.createElement(
+const ArrowDownIcon = (props) => /* @__PURE__ */ jsxs(
   mainbase.svg,
   {
     viewBox: "0 0 24 24",
@@ -108,56 +113,58 @@ const ArrowDownIcon = (props) => /* @__PURE__ */ React.createElement(
     strokeWidth: "3",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "M12 5v14" }),
-  /* @__PURE__ */ React.createElement("path", { d: "m19 12-7 7-7-7" })
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 5v14" }),
+      /* @__PURE__ */ jsx("path", { d: "m19 12-7 7-7-7" })
+    ]
+  }
 );
-const CheckCircleIcon = (props) => /* @__PURE__ */ React.createElement(
+const CheckCircleIcon = (props) => /* @__PURE__ */ jsx(
   mainbase.svg,
   {
     stroke: "currentColor",
     fill: "currentColor",
     strokeWidth: "0",
     viewBox: "0 0 24 24",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11.0026 16L6.75999 11.7574L8.17421 10.3431L11.0026 13.1716L16.6595 7.51472L18.0737 8.92893L11.0026 16Z" })
+  }
 );
-const WarningIcon = (props) => /* @__PURE__ */ React.createElement(
+const WarningIcon = (props) => /* @__PURE__ */ jsx(
   mainbase.svg,
   {
     stroke: "currentColor",
     fill: "currentColor",
     strokeWidth: "0",
     viewBox: "0 0 24 24",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z" })
+  }
 );
-const InfoIcon = (props) => /* @__PURE__ */ React.createElement(
+const InfoIcon = (props) => /* @__PURE__ */ jsx(
   mainbase.svg,
   {
     viewBox: "0 0 24 24",
     fill: "currentColor",
     stroke: "currentColor",
     strokeWidth: "0",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" })
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" })
+  }
 );
-const QuoteIcon = (props) => /* @__PURE__ */ React.createElement(mainbase.svg, { viewBox: "0 0 24 24", fill: "currentColor", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.318.142-.686.238-1.028.466-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.945-.33.358-.656.734-.909 1.162-.293.408-.492.856-.702 1.299-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539l.025.168.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162-.293.408-.492.856-.702 1.299-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539l.025.168.026-.006A4.5 4.5 0 1 0 17.5 10z" }));
-const StarIcon = (props) => /* @__PURE__ */ React.createElement(mainbase.svg, { viewBox: "0 0 24 24", fill: "currentColor", ...props }, /* @__PURE__ */ React.createElement("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" }));
-const ErrorIcon = (props) => /* @__PURE__ */ React.createElement(mainbase.svg, { viewBox: "0 0 24 24", fill: "currentColor", ...props }, /* @__PURE__ */ React.createElement("path", { 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" }));
-const CloseIcon = (props) => /* @__PURE__ */ React.createElement(mainbase.svg, { viewBox: "0 0 24 24", fill: "currentColor", ...props }, /* @__PURE__ */ React.createElement(
+const QuoteIcon = (props) => /* @__PURE__ */ jsx(mainbase.svg, { viewBox: "0 0 24 24", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6.5 10c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.318.142-.686.238-1.028.466-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.945-.33.358-.656.734-.909 1.162-.293.408-.492.856-.702 1.299-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539l.025.168.026-.006A4.5 4.5 0 1 0 6.5 10zm11 0c-.223 0-.437.034-.65.065.069-.232.14-.468.254-.68.114-.308.292-.575.469-.844.148-.291.409-.488.601-.737.201-.242.475-.403.692-.604.213-.21.492-.315.714-.463.232-.133.434-.28.65-.35l.539-.222.474-.197-.485-1.938-.597.144c-.191.048-.424.104-.689.171-.271.05-.56.187-.882.312-.317.143-.686.238-1.028.467-.344.218-.741.4-1.091.692-.339.301-.748.562-1.05.944-.33.358-.656.734-.909 1.162-.293.408-.492.856-.702 1.299-.19.443-.343.896-.468 1.336-.237.882-.343 1.72-.384 2.437-.034.718-.014 1.315.028 1.747.015.204.043.402.063.539l.025.168.026-.006A4.5 4.5 0 1 0 17.5 10z" }) });
+const StarIcon = (props) => /* @__PURE__ */ jsx(mainbase.svg, { viewBox: "0 0 24 24", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z" }) });
+const ErrorIcon = (props) => /* @__PURE__ */ jsx(mainbase.svg, { viewBox: "0 0 24 24", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { 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" }) });
+const CloseIcon = (props) => /* @__PURE__ */ jsx(mainbase.svg, { viewBox: "0 0 24 24", fill: "currentColor", ...props, children: /* @__PURE__ */ jsx(
   "path",
   {
     fillRule: "evenodd",
     clipRule: "evenodd",
     d: "M18.7071 6.70711C19.0976 6.31658 19.0976 5.68342 18.7071 5.29289C18.3166 4.90237 17.6834 4.90237 17.2929 5.29289L12 10.5858L6.70711 5.29289C6.31658 4.90237 5.68342 4.90237 5.29289 5.29289C4.90237 5.68342 4.90237 6.31658 5.29289 6.70711L10.5858 12L5.29289 17.2929C4.90237 17.6834 4.90237 18.3166 5.29289 18.7071C5.68342 19.0976 6.31658 19.0976 6.70711 18.7071L12 13.4142L17.2929 18.7071C17.6834 19.0976 18.3166 19.0976 18.7071 18.7071C19.0976 18.3166 19.0976 17.6834 18.7071 17.2929L13.4142 12L18.7071 6.70711Z"
   }
-));
-const FileIcon = (props) => /* @__PURE__ */ React.createElement(
+) });
+const FileIcon = (props) => /* @__PURE__ */ jsxs(
   mainbase.svg,
   {
     stroke: "currentColor",
@@ -166,12 +173,14 @@ const FileIcon = (props) => /* @__PURE__ */ React.createElement(
     viewBox: "0 0 24 24",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-  /* @__PURE__ */ React.createElement("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+      /* @__PURE__ */ jsx("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+    ]
+  }
 );
-const CopyIcon = (props) => /* @__PURE__ */ React.createElement(
+const CopyIcon = (props) => /* @__PURE__ */ jsxs(
   mainbase.svg,
   {
     stroke: "currentColor",
@@ -180,12 +189,14 @@ const CopyIcon = (props) => /* @__PURE__ */ React.createElement(
     viewBox: "0 0 24 24",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
-  /* @__PURE__ */ React.createElement("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+      /* @__PURE__ */ jsx("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+    ]
+  }
 );
-const PipetteIcon = (props) => /* @__PURE__ */ React.createElement(
+const PipetteIcon = (props) => /* @__PURE__ */ jsxs(
   mainbase.svg,
   {
     stroke: "currentColor",
@@ -194,13 +205,15 @@ const PipetteIcon = (props) => /* @__PURE__ */ React.createElement(
     viewBox: "0 0 24 24",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("path", { d: "m2 22 1-1h3l9-9" }),
-  /* @__PURE__ */ React.createElement("path", { d: "M3 21v-3l9-9" }),
-  /* @__PURE__ */ React.createElement("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("path", { d: "m2 22 1-1h3l9-9" }),
+      /* @__PURE__ */ jsx("path", { d: "M3 21v-3l9-9" }),
+      /* @__PURE__ */ jsx("path", { d: "m15 6 3.4-3.4a2.1 2.1 0 1 1 3 3L18 9l.4.4a2.1 2.1 0 1 1-3 3l-3.8-3.8a2.1 2.1 0 1 1 3-3l.4.4Z" })
+    ]
+  }
 );
-const EllipsisIcon = (props) => /* @__PURE__ */ React.createElement(
+const EllipsisIcon = (props) => /* @__PURE__ */ jsxs(
   mainbase.svg,
   {
     stroke: "currentColor",
@@ -209,11 +222,13 @@ const EllipsisIcon = (props) => /* @__PURE__ */ React.createElement(
     viewBox: "0 0 24 24",
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    ...props
-  },
-  /* @__PURE__ */ React.createElement("circle", { cx: "12", cy: "12", r: "1" }),
-  /* @__PURE__ */ React.createElement("circle", { cx: "19", cy: "12", r: "1" }),
-  /* @__PURE__ */ React.createElement("circle", { cx: "5", cy: "12", r: "1" })
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "1" }),
+      /* @__PURE__ */ jsx("circle", { cx: "19", cy: "12", r: "1" }),
+      /* @__PURE__ */ jsx("circle", { cx: "5", cy: "12", r: "1" })
+    ]
+  }
 );
 
 export { ArrowDownIcon, ArrowUpIcon, CheckCircleIcon, CheckIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, CloseIcon, CopyIcon, EllipsisIcon, EllpsisIcon, ErrorIcon, FileIcon, InfoIcon, PipetteIcon, QuoteIcon, StarIcon, WarningIcon };

package/dist/esm/components/image/image.js

@@ -1,13 +1,13 @@
 "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 Image = forwardRef(
   function Image2(props, ref) {
     const { align, fit = "cover", ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.img,
       {
         ref,

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { EMPTY_SLOT_STYLES } from '../../styled-system/empty.js';
 import { mainbase } from '../../styled-system/factory.js';
@@ -9,7 +10,7 @@ const InputAddon = forwardRef(
     const recipe = useRecipe({ key: "inputAddon", recipe: props.recipe });
     const [variantProps, localProps] = recipe.splitVariantProps(props);
     const styles = unstyled ? EMPTY_SLOT_STYLES : recipe(variantProps);
-    return /* @__PURE__ */ React.createElement(mainbase.div, { ref, ...localProps, css: [styles, props.css] });
+    return /* @__PURE__ */ jsx(mainbase.div, { ref, ...localProps, css: [styles, props.css] });
   }
 );
 

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, Children, cloneElement } from 'react';
 import { Group } from '../group/group.js';
 import { InputAddon } from '../input-addon/input-addon.js';
@@ -22,26 +23,28 @@ const InputGroup = forwardRef(
     } = props;
     const child = Children.only(children);
     const attached = Boolean(startAddon || endAddon);
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsxs(
       Group,
       {
         width: "full",
         ref,
         attached,
         skip: (el) => el.type === InputElement,
-        ...rest
-      },
-      startAddon && /* @__PURE__ */ React.createElement(InputAddon, { ...startAddonProps }, startAddon),
-      startElement && /* @__PURE__ */ React.createElement(InputElement, { pointerEvents: "none", ...startElementProps }, startElement),
-      cloneElement(child, {
-        ...startElement && {
-          ps: `calc(var(--input-height) - ${startOffset})`
-        },
-        ...endElement && { pe: `calc(var(--input-height) - ${endOffset})` },
-        ...children.props
-      }),
-      endElement && /* @__PURE__ */ React.createElement(InputElement, { placement: "end", ...endElementProps }, endElement),
-      endAddon && /* @__PURE__ */ React.createElement(InputAddon, { ...endAddonProps }, endAddon)
+        ...rest,
+        children: [
+          startAddon && /* @__PURE__ */ jsx(InputAddon, { ...startAddonProps, children: startAddon }),
+          startElement && /* @__PURE__ */ jsx(InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
+          cloneElement(child, {
+            ...startElement && {
+              ps: `calc(var(--input-height) - ${startOffset})`
+            },
+            ...endElement && { pe: `calc(var(--input-height) - ${endOffset})` },
+            ...children.props
+          }),
+          endElement && /* @__PURE__ */ jsx(InputElement, { placement: "end", ...endElementProps, children: endElement }),
+          endAddon && /* @__PURE__ */ jsx(InputAddon, { ...endAddonProps, children: endAddon })
+        ]
+      }
     );
   }
 );

package/dist/esm/components/link/link-box.js

@@ -1,13 +1,13 @@
 "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 LinkOverlay = forwardRef(
   function LinkOverlay2(props, ref) {
     const { className, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.a,
       {
         ...rest,
@@ -37,7 +37,7 @@ const LinkOverlay = forwardRef(
 const LinkBox = forwardRef(
   function LinkBox2(props, ref) {
     const { className, ...rest } = props;
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       mainbase.div,
       {
         ref,

package/dist/esm/components/listbox/listbox.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Listbox } from '@ark-ui/react/listbox';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { CheckIcon } from '../icons.js';
@@ -42,7 +43,7 @@ const ListboxItemText = withContext(Listbox.ItemText, "itemText", { forwardAsChi
 const ListboxItemIndicator = withContext(Listbox.ItemIndicator, "itemIndicator", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(CheckIcon, null)
+    children: /* @__PURE__ */ jsx(CheckIcon, {})
   }
 });
 const ListboxLabel = withContext(

package/dist/esm/components/loader/loader.js

@@ -1,3 +1,4 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
 import * as React from 'react';
 import { AbsoluteCenter } from '../absolute-center/absolute-center.js';
 import { Span } from '../span/index.js';
@@ -6,7 +7,7 @@ import { Spinner } from '../spinner/spinner.js';
 const Loader = React.forwardRef(
   function Loader2(props, ref) {
     const {
-      spinner = /* @__PURE__ */ React.createElement(Spinner, { size: "inherit", borderWidth: "0.125em", color: "inherit" }),
+      spinner = /* @__PURE__ */ jsx(Spinner, { size: "inherit", borderWidth: "0.125em", color: "inherit" }),
       spinnerPlacement = "start",
       children,
       text,
@@ -15,12 +16,19 @@ const Loader = React.forwardRef(
     } = props;
     if (!visible) return children;
     if (text) {
-      return /* @__PURE__ */ React.createElement(Span, { ref, display: "contents", ...rest }, spinnerPlacement === "start" && spinner, text, spinnerPlacement === "end" && spinner);
+      return /* @__PURE__ */ jsxs(Span, { ref, display: "contents", ...rest, children: [
+        spinnerPlacement === "start" && spinner,
+        text,
+        spinnerPlacement === "end" && spinner
+      ] });
     }
     if (spinner) {
-      return /* @__PURE__ */ React.createElement(Span, { ref, display: "contents", ...rest }, /* @__PURE__ */ React.createElement(AbsoluteCenter, { display: "inline-flex" }, spinner), /* @__PURE__ */ React.createElement(Span, { visibility: "hidden", display: "contents" }, children));
+      return /* @__PURE__ */ jsxs(Span, { ref, display: "contents", ...rest, children: [
+        /* @__PURE__ */ jsx(AbsoluteCenter, { display: "inline-flex", children: spinner }),
+        /* @__PURE__ */ jsx(Span, { visibility: "hidden", display: "contents", children })
+      ] });
     }
-    return /* @__PURE__ */ React.createElement(Span, { ref, display: "contents", ...rest }, children);
+    return /* @__PURE__ */ jsx(Span, { ref, display: "contents", ...rest, children });
   }
 );
 Loader.displayName = "Loader";

package/dist/esm/components/menu/menu.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Menu } from '@ark-ui/react/menu';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { CheckIcon } from '../icons.js';
@@ -45,7 +46,7 @@ const MenuArrowTip = withContext(
 const MenuArrow = withContext(
   Menu.Arrow,
   "arrow",
-  { forwardAsChild: true, defaultProps: { children: /* @__PURE__ */ React.createElement(MenuArrowTip, null) } }
+  { forwardAsChild: true, defaultProps: { children: /* @__PURE__ */ jsx(MenuArrowTip, {}) } }
 );
 const MenuIndicator = withContext(
   Menu.Indicator,
@@ -75,7 +76,7 @@ const MenuItemCommand = withContext(
 );
 const MenuItemIndicator = withContext(Menu.ItemIndicator, "itemIndicator", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(CheckIcon, { boxSize: "4" }) }
+  defaultProps: { children: /* @__PURE__ */ jsx(CheckIcon, { boxSize: "4" }) }
 });
 const MenuCheckboxItem = withContext(Menu.CheckboxItem, "item", { forwardAsChild: true });
 const MenuRadioItemGroup = withContext(Menu.RadioItemGroup, "itemGroup", { forwardAsChild: true });

package/dist/esm/components/native-select/native-select.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { useFieldContext, Field } from '@ark-ui/react/field';
 import { forwardRef } from 'react';
 import { createContext } from '../../create-context.js';
@@ -6,7 +7,6 @@ import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-
 import { mainbase } from '../../styled-system/factory.js';
 import { dataAttr } from '../../utils/attr.js';
 import { cx } from '../../utils/cx.js';
-import '../../utils/unit.js';
 import { ChevronDownIcon } from '../icons.js';
 
 const [NativeSelectBasePropsProvider, useNativeSelectBaseProps] = createContext({
@@ -26,7 +26,7 @@ const NativeSelectRoot = withProvider("div", "root", {
     const field = useFieldContext();
     const disabled = Boolean(field?.disabled ?? props.disabled);
     const invalid = Boolean(field?.invalid ?? props.invalid);
-    return /* @__PURE__ */ React.createElement(NativeSelectBasePropsProvider, { value: { disabled, invalid } }, element);
+    return /* @__PURE__ */ jsx(NativeSelectBasePropsProvider, { value: { disabled, invalid }, children: element });
   }
 });
 const NativeSelectPropsProvider = PropsProvider;
@@ -36,7 +36,7 @@ const NativeSelectField = forwardRef(function NativeSelectField2(props, ref) {
   const { disabled, invalid } = useNativeSelectBaseProps();
   const styles = useNativeSelectStyles();
   const classNames = useClassNames();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsxs(
     StyledSelect,
     {
       disabled,
@@ -44,10 +44,12 @@ const NativeSelectField = forwardRef(function NativeSelectField2(props, ref) {
       ...restProps,
       ref,
       className: cx(classNames.field, props.className),
-      css: [!unstyled ? styles.field : void 0, props.css]
-    },
-    placeholder && /* @__PURE__ */ React.createElement("option", { value: "" }, placeholder),
-    children
+      css: [!unstyled ? styles.field : void 0, props.css],
+      children: [
+        placeholder && /* @__PURE__ */ jsx("option", { value: "", children: placeholder }),
+        children
+      ]
+    }
   );
 });
 function NativeSelectIndicator(props) {
@@ -55,16 +57,16 @@ function NativeSelectIndicator(props) {
   const styles = useNativeSelectStyles();
   const { disabled, invalid } = useNativeSelectBaseProps();
   const classNames = useClassNames();
-  return /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ jsx(
     mainbase.div,
     {
       ...restProps,
       "data-disabled": dataAttr(disabled),
       "data-invalid": dataAttr(invalid),
       className: cx(classNames.indicator, props.className),
-      css: [!unstyled ? styles.indicator : void 0, props.css]
-    },
-    props.children ?? /* @__PURE__ */ React.createElement(ChevronDownIcon, null)
+      css: [!unstyled ? styles.indicator : void 0, props.css],
+      children: props.children ?? /* @__PURE__ */ jsx(ChevronDownIcon, {})
+    }
   );
 }
 

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

@@ -1,4 +1,5 @@
 "use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { NumberInput } from '@ark-ui/react/number-input';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 import { ChevronUpIcon, ChevronDownIcon } from '../icons.js';
@@ -16,16 +17,19 @@ const NumberInputLabel = withContext(NumberInput.Label, "label", { forwardAsChil
 const NumberInputInput = withContext(NumberInput.Input, "input", { forwardAsChild: true });
 const NumberInputIncrementTrigger = withContext(NumberInput.IncrementTrigger, "incrementTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(ChevronUpIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsx(ChevronUpIcon, {}) }
 });
 const NumberInputDecrementTrigger = withContext(NumberInput.DecrementTrigger, "decrementTrigger", {
   forwardAsChild: true,
-  defaultProps: { children: /* @__PURE__ */ React.createElement(ChevronDownIcon, null) }
+  defaultProps: { children: /* @__PURE__ */ jsx(ChevronDownIcon, {}) }
 });
 const NumberInputControl = withContext(NumberInput.Control, "control", {
   forwardAsChild: true,
   defaultProps: {
-    children: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(NumberInputIncrementTrigger, null), /* @__PURE__ */ React.createElement(NumberInputDecrementTrigger, null))
+    children: /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(NumberInputIncrementTrigger, {}),
+      /* @__PURE__ */ jsx(NumberInputDecrementTrigger, {})
+    ] })
   }
 });
 const NumberInputScrubber = withContext(NumberInput.Scrubber, "scrubber", { forwardAsChild: true });

package/dist/esm/components/pagination/pagination.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Pagination, usePaginationContext } from '@ark-ui/react/pagination';
 import { forwardRef, useMemo } from 'react';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
@@ -42,27 +43,27 @@ const PaginationPageText = forwardRef(function PaginationPageText2(props, ref) {
     if (format === "compact") return `${page} of ${totalPages}`;
     return `${pageRange.start + 1} - ${Math.min(pageRange.end, count)} of ${count}`;
   }, [format, page, totalPages, pageRange, count]);
-  return /* @__PURE__ */ React.createElement(Box, { fontWeight: "medium", ref, ...rest }, content);
+  return /* @__PURE__ */ jsx(Box, { fontWeight: "medium", ref, ...rest, children: content });
 });
 const PaginationItems = (props) => {
   const { pages } = usePaginationContext();
   const { render, ellipsis, ...rest } = props;
-  return /* @__PURE__ */ React.createElement(For, { each: pages }, (page, index) => {
+  return /* @__PURE__ */ jsx(For, { each: pages, children: (page, index) => {
     if (page.type === "ellipsis") {
-      return /* @__PURE__ */ React.createElement(PaginationEllipsis, { asChild: true, key: index, index, ...rest }, ellipsis || /* @__PURE__ */ React.createElement(IconButton, { as: "span" }, /* @__PURE__ */ React.createElement(EllipsisIcon, null)));
+      return /* @__PURE__ */ jsx(PaginationEllipsis, { asChild: true, index, ...rest, children: ellipsis || /* @__PURE__ */ jsx(IconButton, { as: "span", children: /* @__PURE__ */ jsx(EllipsisIcon, {}) }) }, index);
     }
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ jsx(
       PaginationItem,
       {
         asChild: true,
-        key: index,
         type: "page",
         value: page.value,
-        ...rest
+        ...rest,
+        children: render(page)
       },
-      render(page)
+      index
     );
-  });
+  } });
 };
 
 export { PaginationContext, PaginationEllipsis, PaginationItem, PaginationItems, PaginationNextTrigger, PaginationPageText, PaginationPrevTrigger, PaginationPropsProvider, PaginationRoot, PaginationRootProvider, usePaginationStyles };

package/dist/esm/components/popover/popover.js

@@ -1,4 +1,5 @@
 "use client";
+import { jsx } from 'react/jsx-runtime';
 import { Popover } from '@ark-ui/react/popover';
 import { createSlotRecipeContext } from '../../styled-system/create-slot-recipe-context.js';
 
@@ -26,7 +27,7 @@ const PopoverArrow = withContext(
   "arrow",
   {
     forwardAsChild: true,
-    defaultProps: { children: /* @__PURE__ */ React.createElement(PopoverArrowTip, null) }
+    defaultProps: { children: /* @__PURE__ */ jsx(PopoverArrowTip, {}) }
   }
 );
 const PopoverCloseTrigger = withContext(Popover.CloseTrigger, "closeTrigger", { forwardAsChild: true });