@saas-ui/react 3.0.0-alpha.31 → 3.0.0-alpha.32

package/dist/components/pagination/index.cjs

@@ -40,12 +40,35 @@ __export(pagination_exports, {
   Root: () => Root
 });
 var import_react2 = require("react");
-var import_react3 = require("@chakra-ui/react");
+var import_pagination = require("@chakra-ui/react/pagination");
+var import_typography = require("@chakra-ui/react/typography");
+var import_utils = require("@saas-ui/core/utils");
+
+// src/components/button/index.ts
+var import_button = require("@chakra-ui/react/button");
+
+// src/components/icon-button/icon-button.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var IconButton = (0, import_react.forwardRef)(
+  function IconButton2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.Button,
+      {
+        px: "0",
+        py: "0",
+        _icon: { fontSize: "1.2em" },
+        ref,
+        ...props
+      }
+    );
+  }
+);
 
 // src/components/icons/create-icon.tsx
-var import_react = require("@chakra-ui/react");
+var import_icon = require("@chakra-ui/react/icon");
 var createIcon = (props) => {
-  return (0, import_react.createIcon)({
+  return (0, import_icon.createIcon)({
     viewBox: "0 0 24 24",
     defaultProps: {
       fill: "none",
@@ -59,99 +82,114 @@ var createIcon = (props) => {
 };
 
 // src/components/icons/icons.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var ChevronUpIcon = createIcon({
   displayName: "ChevronUpIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "18 15 12 9 6 15" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "18 15 12 9 6 15" })
 });
 var ChevronDownIcon = createIcon({
   displayName: "ChevronDownIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "6 9 12 15 18 9" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "6 9 12 15 18 9" })
 });
 var ChevronLeftIcon = createIcon({
   displayName: "ChevronLeftIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "15 18 9 12 15 6" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "15 18 9 12 15 6" })
 });
 var ChevronRightIcon = createIcon({
   displayName: "ChevronRightIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "9 18 15 12 9 6" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "9 18 15 12 9 6" })
 });
 var HamburgerIcon = createIcon({
   displayName: "ChevronDownIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { fill: "none", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { fill: "none", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "12", x2: "21", y2: "12" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "6", x2: "21", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "18", x2: "21", y2: "18" })
   ] })
 });
 var CloseIcon = createIcon({
   displayName: "CloseIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
   ] })
 });
 var FilterIcon = createIcon({
   displayName: "FilterIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polygon", { points: "22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3" })
 });
 var CalendarIcon = createIcon({
   displayName: "CalendarIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" })
   ] })
 });
 var PlusIcon = createIcon({
   displayName: "PlusIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" })
   ] })
 });
 var MinusIcon = createIcon({
   displayName: "MinusIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "5", y1: "12", x2: "19", y2: "12" }) })
 });
 var ViewOffIcon = createIcon({
   displayName: "ViewOffIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "1", y1: "1", x2: "23", y2: "23" })
   ] })
 });
 var ViewIcon = createIcon({
   displayName: "ViewOffIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "3" })
   ] })
 });
 var SearchIcon = createIcon({
   displayName: "SearchIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "11", cy: "11", r: "8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("line", { x1: "21", y1: "21", x2: "16.65", y2: "16.65" })
   ] })
 });
 var CheckIcon = createIcon({
   displayName: "CheckIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("g", { children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("polyline", { points: "20 6 9 17 4 12" }) })
 });
 var EllipsisIcon = createIcon({
   displayName: "EllipsisIcon",
-  path: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] })
+});
+var CopyIcon = createIcon({
+  displayName: "CopyIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("rect", { width: "14", height: "14", x: "8", y: "8", rx: "2", ry: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2" })
+  ] })
+});
+var InfoIcon = createIcon({
+  displayName: "InfoIcon",
+  path: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 8h.01" })
   ] })
 });
 
 // src/components/pagination/pagination.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var [RootPropsProvider, useRootProps] = (0, import_react3.createContext)({
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var [RootPropsProvider, useRootProps] = (0, import_utils.createContext)({
   name: "RootPropsProvider"
 });
 var variantMap = {
@@ -162,53 +200,53 @@ var variantMap = {
 var Root = (0, import_react2.forwardRef)(
   function PaginationRoot(props, ref) {
     const { size = "sm", variant = "outline", ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Pagination.Root, { ref, type: "button", ...rest }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(RootPropsProvider, { value: { size, variantMap: variantMap[variant] }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.Root, { ref, type: "button", ...rest }) });
   }
 );
 var Ellipsis = (0, import_react2.forwardRef)(function PaginationEllipsis(props, ref) {
   var _a;
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(EllipsisIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.Ellipsis, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_button.Button, { as: "span", variant: variantMap2.ellipsis, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(EllipsisIcon, {}) }) });
 });
 var Item = (0, import_react2.forwardRef)(
   function PaginationItem(props, ref) {
-    const { page } = (0, import_react3.usePaginationContext)();
+    const { page } = (0, import_pagination.usePaginationContext)();
     const { size, variantMap: variantMap2 } = useRootProps();
     const current = page === props.value;
     const variant = current ? variantMap2.current : variantMap2.default;
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Button, { variant, size, children: props.value }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.Item, { ref, ...props, asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_button.Button, { variant, size, children: props.value }) });
   }
 );
 var PrevButton = (0, import_react2.forwardRef)(function PaginationPrevTrigger(props, ref) {
   var _a;
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronLeftIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.PrevTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronLeftIcon, {}) }) });
 });
 var NextButton = (0, import_react2.forwardRef)(function PaginationNextTrigger(props, ref) {
   var _a;
   const { size, variantMap: variantMap2 } = useRootProps();
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ChevronRightIcon, {}) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.NextTrigger, { ref, asChild: true, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconButton, { variant: variantMap2.default, size, children: (_a = props.children) != null ? _a : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronRightIcon, {}) }) });
 });
 var Items = (props) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
-    return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Item, { type: "page", value: page.value, ...props }, index);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_pagination.Pagination.Context, { children: ({ pages }) => pages.map((page, index) => {
+    return page.type === "ellipsis" ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Ellipsis, { index, ...props }, index) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Item, { type: "page", value: page.value, ...props }, index);
   }) });
 };
 var PageText = (0, import_react2.forwardRef)(
   function PaginationPageText(props, ref) {
     const { format = "compact", ...rest } = props;
-    const { page, pages, pageRange, count } = (0, import_react3.usePaginationContext)();
+    const { page, pages, pageRange, count } = (0, import_pagination.usePaginationContext)();
     const content = (0, import_react2.useMemo)(() => {
       if (format === "short") return `${page} / ${pages.length}`;
       if (format === "compact") return `${page} of ${pages.length}`;
       return `${pageRange.start + 1} - ${pageRange.end} of ${count}`;
     }, [format, page, pages.length, pageRange, count]);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_react3.Text, { fontWeight: "medium", ref, ...rest, children: content });
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_typography.Text, { fontWeight: "medium", ref, ...rest, children: content });
   }
 );
-var PrevTrigger = import_react3.Pagination.PrevTrigger;
-var NextTrigger = import_react3.Pagination.NextTrigger;
-var Context = import_react3.Pagination.Context;
+var PrevTrigger = import_pagination.Pagination.PrevTrigger;
+var NextTrigger = import_pagination.Pagination.NextTrigger;
+var Context = import_pagination.Pagination.Context;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Pagination

package/dist/components/pagination/index.d.cts

@@ -1,7 +1,9 @@
 import * as _ark_ui_react from '@ark-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { Pagination, ButtonProps, TextProps } from '@chakra-ui/react';
+import { Pagination } from '@chakra-ui/react/pagination';
+import { TextProps } from '@chakra-ui/react/typography';
+import { ButtonProps } from '@chakra-ui/react/button';
 
 type PaginationVariant = 'outline' | 'solid' | 'subtle';
 interface RootProps extends Omit<Pagination.RootProps, 'type'> {

package/dist/components/pagination/index.d.ts

@@ -1,7 +1,9 @@
 import * as _ark_ui_react from '@ark-ui/react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { Pagination, ButtonProps, TextProps } from '@chakra-ui/react';
+import { Pagination } from '@chakra-ui/react/pagination';
+import { TextProps } from '@chakra-ui/react/typography';
+import { ButtonProps } from '@chakra-ui/react/button';
 
 type PaginationVariant = 'outline' | 'solid' | 'subtle';
 interface RootProps extends Omit<Pagination.RootProps, 'type'> {

package/dist/components/pagination/index.js

@@ -1,8 +1,10 @@
 'use client'
 import {
   pagination_exports
-} from "../../chunk-MLJN6IOJ.js";
-import "../../chunk-4TPVIHNO.js";
+} from "../../chunk-TWTXZ7PR.js";
+import "../../chunk-OJZPPAT6.js";
+import "../../chunk-5HVAMQYO.js";
+import "../../chunk-4XB7B73X.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   pagination_exports as Pagination

package/dist/components/password-input/index.cjs

@@ -185,11 +185,39 @@ function LuEye(props) {
   return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24", "fill": "none", "stroke": "currentColor", "strokeWidth": "2", "strokeLinecap": "round", "strokeLinejoin": "round" }, "child": [{ "tag": "path", "attr": { "d": "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }, "child": [] }, { "tag": "circle", "attr": { "cx": "12", "cy": "12", "r": "3" }, "child": [] }] })(props);
 }
 
-// src/components/input-group/input-group.tsx
+// src/components/icon-button/icon-button.tsx
 var import_react3 = require("react");
-var import_react4 = require("@chakra-ui/react");
+
+// src/components/button/index.ts
+var import_button = require("@chakra-ui/react/button");
+
+// src/components/icon-button/icon-button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var InputGroup = (0, import_react3.forwardRef)(
+var IconButton = (0, import_react3.forwardRef)(
+  function IconButton2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_button.Button,
+      {
+        px: "0",
+        py: "0",
+        _icon: { fontSize: "1.2em" },
+        ref,
+        ...props
+      }
+    );
+  }
+);
+
+// src/components/input-group/input-group.tsx
+var import_react4 = require("react");
+var import_group = require("@chakra-ui/react/group");
+
+// src/components/input/index.ts
+var import_input = require("@chakra-ui/react/input");
+
+// src/components/input-group/input-group.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var InputGroup = (0, import_react4.forwardRef)(
   function InputGroup2(props, ref) {
     const {
       startElement,
@@ -199,20 +227,20 @@ var InputGroup = (0, import_react3.forwardRef)(
       children,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react4.Group, { ref, display: "flex", ...rest, children: [
-      startElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react4.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
-      (0, import_react3.isValidElement)(children) && (0, import_react3.cloneElement)(children, {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_group.Group, { ref, display: "flex", ...rest, children: [
+      startElement && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_input.InputElement, { pointerEvents: "none", ...startElementProps, children: startElement }),
+      (0, import_react4.isValidElement)(children) && (0, import_react4.cloneElement)(children, {
         ...startElement && { ps: "calc(var(--input-height) - 6px)" },
         ...endElement && { pe: "calc(var(--input-height) - 6px)" },
         ...children.props
       }),
-      endElement && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react4.InputElement, { placement: "end", ...endElementProps, children: endElement })
+      endElement && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_input.InputElement, { placement: "end", ...endElementProps, children: endElement })
     ] });
   }
 );
 
 // src/components/password-input/password-input.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime3 = require("react/jsx-runtime");
 var PasswordInput = (0, import_react5.forwardRef)(
   function PasswordInput2(props, ref) {
     const {
@@ -220,7 +248,7 @@ var PasswordInput = (0, import_react5.forwardRef)(
       defaultVisible,
       visible: visibleProp,
       onVisibleChange,
-      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(LuEyeOff, {}) },
+      visibilityIcon = { on: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LuEye, {}), off: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LuEyeOff, {}) },
       ...rest
     } = props;
     const [visible, setVisible] = (0, import_react6.useControllableState)({
@@ -229,11 +257,11 @@ var PasswordInput = (0, import_react5.forwardRef)(
       onChange: onVisibleChange
     });
     const inputRef = (0, import_react5.useRef)(null);
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       InputGroup,
       {
         width: "full",
-        endElement: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        endElement: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
           VisibilityTrigger,
           {
             disabled: rest.disabled,
@@ -247,8 +275,8 @@ var PasswordInput = (0, import_react5.forwardRef)(
           }
         ),
         ...rootProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          import_react6.Input,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          import_input.Input,
           {
             ...rest,
             ref: (0, import_react6.mergeRefs)(ref, inputRef),
@@ -261,8 +289,8 @@ var PasswordInput = (0, import_react5.forwardRef)(
 );
 var VisibilityTrigger = (0, import_react5.forwardRef)(
   function VisibilityTrigger2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react6.IconButton,
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      IconButton,
       {
         tabIndex: -1,
         ref,

package/dist/components/password-input/index.d.cts

@@ -1,8 +1,10 @@
 import * as react from 'react';
-import { InputProps, GroupProps } from '@chakra-ui/react';
+import { InputGroupProps } from '../input-group/index.cjs';
+import { InputProps } from '@chakra-ui/react/input';
+import '@chakra-ui/react/group';
 
 interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
-    rootProps?: GroupProps;
+    rootProps?: InputGroupProps;
 }
 declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
 interface PasswordVisibilityProps {

package/dist/components/password-input/index.d.ts

@@ -1,8 +1,10 @@
 import * as react from 'react';
-import { InputProps, GroupProps } from '@chakra-ui/react';
+import { InputGroupProps } from '../input-group/index.js';
+import { InputProps } from '@chakra-ui/react/input';
+import '@chakra-ui/react/group';
 
 interface PasswordInputProps extends InputProps, PasswordVisibilityProps {
-    rootProps?: GroupProps;
+    rootProps?: InputGroupProps;
 }
 declare const PasswordInput: react.ForwardRefExoticComponent<PasswordInputProps & react.RefAttributes<HTMLInputElement>>;
 interface PasswordVisibilityProps {

package/dist/components/password-input/index.js

@@ -1,8 +1,11 @@
 'use client'
 import {
   PasswordInput
-} from "../../chunk-K2SPPLAY.js";
-import "../../chunk-PKI6YH2V.js";
+} from "../../chunk-T7XRS654.js";
+import "../../chunk-HKMYYESV.js";
+import "../../chunk-5MTFSSOH.js";
+import "../../chunk-OJZPPAT6.js";
+import "../../chunk-5HVAMQYO.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   PasswordInput

package/dist/components/persona/index.cjs

@@ -41,20 +41,21 @@ module.exports = __toCommonJS(persona_exports);
 var React2 = __toESM(require("react"), 1);
 
 // src/components/persona/persona-primitive.tsx
-var import_react4 = require("react");
-var import_react5 = require("@chakra-ui/react");
+var import_react3 = require("react");
+var import_react4 = require("@chakra-ui/react");
 var import_utils = require("@saas-ui/core/utils");
 
 // src/components/avatar/avatar.tsx
 var import_react = require("react");
-var import_react2 = require("@chakra-ui/react");
+var import_avatar = require("@chakra-ui/react/avatar");
+var import_group = require("@chakra-ui/react/group");
 var import_jsx_runtime = require("react/jsx-runtime");
 var Avatar = (0, import_react.forwardRef)(
   function Avatar2(props, ref) {
     const { name, src, srcSet, loading, icon, fallback, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Avatar.Root, { ref, ...rest, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_avatar.Avatar.Root, { ref, ...rest, children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AvatarFallback, { name, icon, children: fallback }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Avatar.Image, { src, srcSet, loading }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar.Image, { src, srcSet, loading }),
       children
     ] });
   }
@@ -62,10 +63,10 @@ var Avatar = (0, import_react.forwardRef)(
 var AvatarFallback = (0, import_react.forwardRef)(
   function AvatarFallback2(props, ref) {
     const { name, icon, children, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.Avatar.Fallback, { ref, ...rest, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_avatar.Avatar.Fallback, { ref, ...rest, children: [
       children,
       name != null && children == null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: getInitials(name) }),
-      name == null && children == null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Avatar.Icon, { asChild: !!icon, children: icon })
+      name == null && children == null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar.Icon, { asChild: !!icon, children: icon })
     ] });
   }
 );
@@ -78,27 +79,27 @@ function getInitials(name) {
 var AvatarGroup = (0, import_react.forwardRef)(
   function AvatarGroup2(props, ref) {
     const { size, variant, borderless, ...rest } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Avatar.PropsProvider, { value: { size, variant, borderless }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Group, { gap: "0", spaceX: "-3", ref, ...rest }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_avatar.Avatar.PropsProvider, { value: { size, variant, borderless }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_group.Group, { gap: "0", spaceX: "-3", ref, ...rest }) });
   }
 );
 
 // src/components/persona/persona.context.ts
-var import_react3 = require("@chakra-ui/react");
+var import_react2 = require("@chakra-ui/react");
 var {
   useStyles: usePersonaStyles,
   withProvider,
   withContext
-} = (0, import_react3.createSlotRecipeContext)({
+} = (0, import_react2.createSlotRecipeContext)({
   key: "suiPersona"
 });
 
 // src/components/persona/persona-primitive.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var PersonaRoot = withProvider(
-  (0, import_react4.forwardRef)((props, ref) => {
+  (0, import_react3.forwardRef)((props, ref) => {
     const { outOfOffice, presence, ...rest } = props;
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-      import_react5.chakra.div,
+      import_react4.chakra.div,
       {
         ref,
         ...rest,
@@ -115,7 +116,7 @@ var PersonaRoot = withProvider(
   }),
   "root"
 );
-var PersonaAvatar = (0, import_react4.forwardRef)(
+var PersonaAvatar = (0, import_react3.forwardRef)(
   (props, ref) => {
     const {
       name,

package/dist/components/persona/index.d.cts

@@ -1,8 +1,11 @@
 import * as react from 'react';
 import react__default from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { RecipeVariantProps, HTMLChakraProps, SlotRecipeProps, ImageProps } from '@chakra-ui/react';
+import { HTMLChakraProps, SlotRecipeProps, ImageProps } from '@chakra-ui/react';
 import { AvatarProps } from '../avatar/index.cjs';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
+import '@chakra-ui/react/avatar';
+import '@chakra-ui/react/group';
 
 declare const personaSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"presence" | "root" | "label" | "avatar" | "details" | "secondaryLabel" | "tertiaryLabel", {
     size: {

package/dist/components/persona/index.d.ts

@@ -1,8 +1,11 @@
 import * as react from 'react';
 import react__default from 'react';
 import * as _chakra_ui_react from '@chakra-ui/react';
-import { RecipeVariantProps, HTMLChakraProps, SlotRecipeProps, ImageProps } from '@chakra-ui/react';
+import { HTMLChakraProps, SlotRecipeProps, ImageProps } from '@chakra-ui/react';
 import { AvatarProps } from '../avatar/index.js';
+import { RecipeVariantProps } from '@chakra-ui/react/styled-system';
+import '@chakra-ui/react/avatar';
+import '@chakra-ui/react/group';
 
 declare const personaSlotRecipe: _chakra_ui_react.SlotRecipeDefinition<"presence" | "root" | "label" | "avatar" | "details" | "secondaryLabel" | "tertiaryLabel", {
     size: {

package/dist/components/persona/index.js

@@ -3,8 +3,8 @@ import {
   Persona,
   PersonaAvatar,
   defaultPresenceOptions
-} from "../../chunk-GWC5GCMW.js";
-import "../../chunk-JO4WJVYO.js";
+} from "../../chunk-VJ4UOABT.js";
+import "../../chunk-FN7TU5F5.js";
 import "../../chunk-RTMS5TJN.js";
 export {
   Persona,

package/dist/components/pin-input/index.cjs

@@ -27,7 +27,8 @@ module.exports = __toCommonJS(pin_input_exports);
 
 // src/components/pin-input/pin-input.tsx
 var import_react = require("react");
-var import_react2 = require("@chakra-ui/react");
+var import_group = require("@chakra-ui/react/group");
+var import_pin_input = require("@chakra-ui/react/pin-input");
 var import_jsx_runtime = require("react/jsx-runtime");
 var PinInput = (0, import_react.forwardRef)(
   function PinInput2(props, ref) {
@@ -39,9 +40,9 @@ var PinInput = (0, import_react.forwardRef)(
       gap = attached ? 0 : 2,
       ...rest
     } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_react2.PinInput.Root, { ref: rootRef, ...rest, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.PinInput.HiddenInput, { ref, ...inputProps }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react2.PinInput.Input, { index }, index)) }) })
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_pin_input.PinInput.Root, { ref: rootRef, ...rest, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pin_input.PinInput.HiddenInput, { ref, ...inputProps }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pin_input.PinInput.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_group.Group, { attached, gap, children: Array.from({ length: pinLength }).map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_pin_input.PinInput.Input, { index }, index)) }) })
     ] });
   }
 );

package/dist/components/pin-input/index.d.cts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { PinInput as PinInput$1 } from '@chakra-ui/react';
+import { PinInput as PinInput$1 } from '@chakra-ui/react/pin-input';
 
 interface PinInputProps extends PinInput$1.RootProps {
     rootRef?: React.Ref<HTMLDivElement>;

package/dist/components/pin-input/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { PinInput as PinInput$1 } from '@chakra-ui/react';
+import { PinInput as PinInput$1 } from '@chakra-ui/react/pin-input';
 
 interface PinInputProps extends PinInput$1.RootProps {
     rootRef?: React.Ref<HTMLDivElement>;