@refinn/core-ui 0.1.2 → 0.1.3

package/dist/index.js

@@ -505,77 +505,119 @@ var Badge = (0, import_react4.forwardRef)(
 Badge.displayName = "Badge";
 
 // src/components/Button/Button.tsx
+var import_react6 = require("react");
+
+// src/components/Loading/Loading.tsx
 var import_react5 = require("react");
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var Loading = (0, import_react5.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { size = "sm", isDark = false, className = "" } = _b, rest = __objRest(_b, ["size", "isDark", "className"]);
+    const containerClasses = [
+      isDark ? "text-white-100" : "text-blue-600",
+      className
+    ].filter(Boolean).join(" ");
+    return size === "sm" && !isDark ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "svg",
+      {
+        className: "animate-spin",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              d: "M1 9C1 6.87827 1.84286 4.84344 3.34315 3.34315C4.84344 1.84285 6.87827 1 9 1C11.1217 1 13.1566 1.84286 14.6569 3.34315C16.1571 4.84344 17 6.87827 17 9C17 11.1217 16.1571 13.1566 14.6569 14.6569C13.1566 16.1571 11.1217 17 9 17C6.87827 17 4.84344 16.1571 3.34315 14.6569C1.84285 13.1566 1 11.1217 1 9L1 9Z",
+              stroke: "#F3F4F6",
+              "stroke-width": "2"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "path",
+            {
+              d: "M1 9C1 7.31057 1.53484 5.6645 2.52786 4.29772C3.52089 2.93094 4.92112 1.91361 6.52787 1.39155C8.13461 0.869484 9.86539 0.869484 11.4721 1.39155C13.0789 1.91361 14.4791 2.93094 15.4721 4.29772",
+              stroke: "#0193D7",
+              "stroke-width": "2"
+            }
+          )
+        ]
+      }
+    ) })) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "svg",
+      {
+        className: "animate-spin",
+        width: size === "sm" ? 18 : 88,
+        height: size === "sm" ? 18 : 88,
+        viewBox: "0 0 20 20",
+        fill: "none",
+        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          "path",
+          {
+            d: "M10 2.5a7.5 7.5 0 1 0 7.5 7.5",
+            stroke: "currentColor",
+            strokeWidth: size === "sm" ? 2 : 1,
+            strokeLinecap: "round"
+          }
+        )
+      }
+    ) }));
+  }
+);
+Loading.displayName = "Loading";
+
+// src/components/Button/Button.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var variantClasses = {
   primary: [
-    "bg-btn-primary text-btn-primary-text",
-    "hover:bg-btn-primary-hover",
-    "active:bg-btn-primary-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-primary-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-primary-disabled disabled:text-btn-primary-text-disabled"
+    "bg-blue-600 text-white-100",
+    "hover:bg-blue-700",
+    "active:bg-blue-800",
+    "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+    "disabled:bg-gray-100 disabled:text-gray-400"
   ].join(" "),
   secondary: [
-    "bg-btn-secondary text-btn-secondary-text",
-    "hover:bg-btn-secondary-hover",
-    "active:bg-btn-secondary-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-secondary-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-secondary-disabled disabled:text-btn-secondary-text-disabled"
+    "bg-gray-100 text-gray-900",
+    "hover:bg-gray-200",
+    "active:bg-gray-300",
+    "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+    "disabled:bg-gray-100 disabled:text-gray-400"
   ].join(" "),
   tertiary: [
-    "bg-btn-tertiary text-btn-tertiary-text",
-    "hover:bg-btn-tertiary-hover",
-    "active:bg-btn-tertiary-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-tertiary-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-tertiary-disabled disabled:text-btn-tertiary-text-disabled"
+    "bg-black-0 text-gray-900",
+    "hover:bg-gray-200",
+    "active:bg-gray-300",
+    "focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2",
+    "disabled:bg-gray-100 disabled:text-gray-400"
   ].join(" "),
   contrast: [
-    "bg-btn-contrast text-btn-contrast-text",
-    "hover:bg-btn-contrast-hover",
-    "active:bg-btn-contrast-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-contrast-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-contrast-disabled disabled:text-btn-contrast-text-disabled"
+    "bg-white-100 text-blue-600",
+    "hover:bg-white-90",
+    "active:bg-white-80",
+    "focus-visible:ring-2 focus-visible:ring-white-100 focus-visible:ring-offset-2",
+    "disabled:bg-gray-50 disabled:text-gray-400"
   ].join(" "),
   transparent: [
-    "bg-btn-transparent text-btn-transparent-text",
-    "hover:bg-btn-transparent-hover",
-    "active:bg-btn-transparent-active",
-    "focus-visible:ring-2 focus-visible:ring-btn-transparent-ring focus-visible:ring-offset-2",
-    "disabled:bg-btn-transparent-disabled disabled:text-btn-transparent-text-disabled"
+    "bg-black-0 text-white-100",
+    "hover:bg-white-20",
+    "active:bg-white-30",
+    "focus-visible:ring-2 focus-visible:ring-white-100 focus-visible:bg-black-0 focus-visible:ring-offset-2",
+    "disabled:bg-black-0 disabled:text-white-40"
   ].join(" ")
 };
 var sizeClasses3 = {
-  small: "h-32 px-12 text-sm gap-4",
-  medium: "h-40 px-16 text-sm gap-6",
-  large: "h-48 px-20 text-base gap-8",
-  "extra-large": "h-56 px-24 text-lg gap-8"
+  sm: "px-16 py-6 text-label-medium",
+  md: "px-20 py-8 text-label-large",
+  lg: "px-24 py-12 text-label-large",
+  xl: "px-32 py-16 text-label-large"
 };
-function Spinner({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-    "svg",
-    {
-      className,
-      width: "1em",
-      height: "1em",
-      viewBox: "0 0 20 20",
-      fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
-        "path",
-        {
-          d: "M10 2.5a7.5 7.5 0 1 0 7.5 7.5",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      )
-    }
-  );
-}
-var Button = (0, import_react5.forwardRef)(
+var Button = (0, import_react6.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
-      size = "medium",
+      size = "md",
       rounded = false,
       loading = false,
       disabled = false,
@@ -594,40 +636,32 @@ var Button = (0, import_react5.forwardRef)(
       "children",
       "className"
     ]);
-    const isDisabled = disabled || loading;
+    const isDisabled = disabled;
     const classes = [
-      "inline-flex items-center justify-center font-medium font-sans",
+      "inline-flex items-center justify-center gap-8",
       "transition-colors duration-150",
       "outline-none",
       "disabled:cursor-not-allowed",
+      loading ? "pointer-events-none" : "cursor-pointer",
       sizeClasses3[size],
       variantClasses[variant],
-      rounded ? "rounded-full" : "rounded-lg",
+      rounded ? "rounded-full" : size === "sm" ? "rounded-6" : size === "xl" ? "rounded-12" : "rounded-8",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-      "button",
-      __spreadProps(__spreadValues({
-        ref,
-        disabled: isDisabled,
-        className: classes
-      }, rest), {
-        children: [
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { className: "animate-spin" }) : startIcon,
-          children,
-          !loading && endIcon
-        ]
-      })
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", __spreadProps(__spreadValues({ ref, disabled: isDisabled, className: classes }, rest), { children: [
+      loading ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Loading, { size: "sm", isDark: variant === "primary" || variant === "transparent" }) : startIcon,
+      children,
+      !loading && endIcon
+    ] }));
   }
 );
 Button.displayName = "Button";
 
 // src/components/BottomSheet/BottomSheet.tsx
-var import_react6 = __toESM(require("react"));
+var import_react7 = __toESM(require("react"));
 var import_react_dom = require("react-dom");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var BottomSheet = (0, import_react6.forwardRef)(
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var BottomSheet = (0, import_react7.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       isForceOpen = false,
@@ -654,10 +688,10 @@ var BottomSheet = (0, import_react6.forwardRef)(
       "modalDesc",
       "className"
     ]);
-    const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
-    const [shouldRender, setShouldRender] = (0, import_react6.useState)(false);
-    const [animate, setAnimate] = (0, import_react6.useState)(false);
-    (0, import_react6.useEffect)(() => {
+    const [isOpen, setIsOpen] = (0, import_react7.useState)(false);
+    const [shouldRender, setShouldRender] = (0, import_react7.useState)(false);
+    const [animate, setAnimate] = (0, import_react7.useState)(false);
+    (0, import_react7.useEffect)(() => {
       if (isOpen) {
         setShouldRender(true);
         setTimeout(() => setAnimate(true), 10);
@@ -667,14 +701,14 @@ var BottomSheet = (0, import_react6.forwardRef)(
         return () => clearTimeout(timer);
       }
     }, [isOpen]);
-    (0, import_react6.useEffect)(() => {
+    (0, import_react7.useEffect)(() => {
       if (isForceOpen) {
         setIsOpen(true);
       } else {
         setIsOpen(false);
       }
     }, [isForceOpen]);
-    const handleStartClick = (0, import_react6.useCallback)(
+    const handleStartClick = (0, import_react7.useCallback)(
       (e) => {
         var _a2, _b2;
         (_b2 = startModalBtn == null ? void 0 : (_a2 = startModalBtn.props).onClick) == null ? void 0 : _b2.call(_a2, e);
@@ -683,7 +717,7 @@ var BottomSheet = (0, import_react6.forwardRef)(
       },
       [startModalBtn]
     );
-    const handleStopClick = (0, import_react6.useCallback)(
+    const handleStopClick = (0, import_react7.useCallback)(
       (e) => {
         var _a2, _b2;
         (_b2 = stopModalBtn == null ? void 0 : (_a2 = stopModalBtn.props).onClick) == null ? void 0 : _b2.call(_a2, e);
@@ -696,19 +730,19 @@ var BottomSheet = (0, import_react6.forwardRef)(
       setIsForceOpen == null ? void 0 : setIsForceOpen(false);
       setIsOpen(false);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { ref, style: { display: "contents" }, children: [
-      startModalBtn && import_react6.default.cloneElement(startModalBtn, {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { ref, style: { display: "contents" }, children: [
+      startModalBtn && import_react7.default.cloneElement(startModalBtn, {
         onClick: handleStartClick
       }),
       shouldRender && (0, import_react_dom.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
           "div",
           {
             className: `fixed inset-0 z-50 flex items-end justify-center transition-opacity duration-300 ${animate ? "opacity-100" : "opacity-0"}`,
             "aria-modal": "true",
             role: "dialog",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 bg-black/40",
@@ -716,26 +750,26 @@ var BottomSheet = (0, import_react6.forwardRef)(
                   "aria-label": "Close modal"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
                 "div",
                 {
                   className: `flex flex-col z-10 w-full rounded-t-xl bg-white pt-8 pb-16 px-16 shadow-lg transform transition-all duration-300 
                 ${size === "sm" ? "h-auto max-h-auto" : size === "md" ? "h-full max-h-[85vh]" : "h-full max-h-screen rounded-t-none!"}
                 ${animate ? "scale-100 translate-y-0" : "scale-95 translate-y-full"}`,
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full flex flex-row relative items-center pt-8 pb-16", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col px-8 max-w-225", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-heading-3 text-button-sheet-text-primary", children: modalTitle }),
-                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-body-small text-button-sheet-text-secondary", children: modalDesc })
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full flex flex-row relative items-center pt-8 pb-16", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col px-8 max-w-225", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-heading-3 text-button-sheet-text-primary", children: modalTitle }),
+                        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-body-small text-button-sheet-text-secondary", children: modalDesc })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "i",
                         {
                           className: "fi fi-br-cross-small flex text-xl text-gray-600 w-44 h-44 absolute top-0 right-0 p-12",
                           onClick: () => handleCloseClick()
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
                         "div",
                         {
                           className: "text-gray-600 text-xl absolute top-0 right-0 p-12",
@@ -744,9 +778,9 @@ var BottomSheet = (0, import_react6.forwardRef)(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
                       children,
-                      stopModalBtn && import_react6.default.cloneElement(stopModalBtn, {
+                      stopModalBtn && import_react7.default.cloneElement(stopModalBtn, {
                         onClick: handleStopClick
                       }),
                       afterStopBtn && afterStopBtn
@@ -765,17 +799,17 @@ var BottomSheet = (0, import_react6.forwardRef)(
 BottomSheet.displayName = "BottomSheet";
 
 // src/components/Checkbox/Checkbox.tsx
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function CheckIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       className,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           d: "M13.333 4.667 6 12l-3.333-3.333",
@@ -789,14 +823,14 @@ function CheckIcon({ className }) {
   );
 }
 function IndeterminateIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "svg",
     {
       className,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
         "path",
         {
           d: "M3.333 8h9.334",
@@ -808,7 +842,7 @@ function IndeterminateIcon({ className }) {
     }
   );
 }
-var Checkbox = (0, import_react7.forwardRef)(
+var Checkbox = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -831,17 +865,17 @@ var Checkbox = (0, import_react7.forwardRef)(
       "id",
       "defaultChecked"
     ]);
-    const reactId = (0, import_react7.useId)();
+    const reactId = (0, import_react8.useId)();
     const inputId = id != null ? id : reactId;
-    const [isChecked, setIsChecked] = (0, import_react7.useState)(defaultChecked != null ? defaultChecked : false);
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    const [isChecked, setIsChecked] = (0, import_react8.useState)(defaultChecked != null ? defaultChecked : false);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "label",
       {
         htmlFor: inputId,
         className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative mr-16", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative mr-16", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "input",
               __spreadValues({
                 ref,
@@ -858,16 +892,16 @@ var Checkbox = (0, import_react7.forwardRef)(
                 className: "sr-only"
               }, rest)
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "div",
               {
                 className: `box m-6 flex h-20 w-20 rounded-md items-center justify-center border ${contrast ? isChecked || indeterminate ? "border-white bg-white" : "border-white" : isChecked || indeterminate ? "bg-static-icon-brand border-static-icon-brand" : "border-static-icon-primary"}`,
-                children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   CheckIcon,
                   {
                     className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
                   }
-                ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   IndeterminateIcon,
                   {
                     className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
@@ -876,15 +910,15 @@ var Checkbox = (0, import_react7.forwardRef)(
               }
             )
           ] }),
-          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "span",
               {
                 className: `text-label-large ${disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-primary"}`,
                 children: label
               }
             ),
-            description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            description && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "span",
               {
                 className: `text-body-small ${error ? "text-checkbox-text-danger" : disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-secondary"}`,
@@ -900,41 +934,42 @@ var Checkbox = (0, import_react7.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/Dialog/Dialog.tsx
-var import_react8 = __toESM(require("react"));
+var import_react9 = __toESM(require("react"));
 var import_react_dom2 = require("react-dom");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var Dialog = (0, import_react8.forwardRef)(
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Dialog = (0, import_react9.forwardRef)(
   ({
     isForceOpen = false,
     setIsForceOpen,
     isClosedAble = true,
+    isCloseIcon = true,
     children,
     startModalBtn,
     stopModalBtn,
     afterStopBtn,
     p = "20"
   }, ref) => {
-    const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
-    const [shouldRender, setShouldRender] = (0, import_react8.useState)(false);
-    const [animate, setAnimate] = (0, import_react8.useState)(false);
-    (0, import_react8.useEffect)(() => {
+    const [isOpen, setIsOpen] = (0, import_react9.useState)(false);
+    const [isRender, setIsRender] = (0, import_react9.useState)(false);
+    const [animate, setAnimate] = (0, import_react9.useState)(false);
+    (0, import_react9.useEffect)(() => {
       if (isOpen) {
-        setShouldRender(true);
+        setIsRender(true);
         setTimeout(() => setAnimate(true), 10);
       } else {
         setAnimate(false);
-        const timer = setTimeout(() => setShouldRender(false), 300);
+        const timer = setTimeout(() => setIsRender(false), 300);
         return () => clearTimeout(timer);
       }
     }, [isOpen]);
-    (0, import_react8.useEffect)(() => {
+    (0, import_react9.useEffect)(() => {
       if (isForceOpen) {
         setIsOpen(true);
       } else {
         setIsOpen(false);
       }
     }, [isForceOpen]);
-    const handleStartClick = (0, import_react8.useCallback)(
+    const handleStartClick = (0, import_react9.useCallback)(
       (e) => {
         var _a, _b;
         (_b = startModalBtn == null ? void 0 : (_a = startModalBtn.props).onClick) == null ? void 0 : _b.call(_a, e);
@@ -943,7 +978,7 @@ var Dialog = (0, import_react8.forwardRef)(
       },
       [startModalBtn]
     );
-    const handleStopClick = (0, import_react8.useCallback)(
+    const handleStopClick = (0, import_react9.useCallback)(
       (e) => {
         var _a, _b;
         (_b = stopModalBtn == null ? void 0 : (_a = stopModalBtn.props).onClick) == null ? void 0 : _b.call(_a, e);
@@ -956,19 +991,19 @@ var Dialog = (0, import_react8.forwardRef)(
       setIsForceOpen == null ? void 0 : setIsForceOpen(false);
       setIsOpen(false);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { ref, style: { display: "contents" }, children: [
-      startModalBtn && import_react8.default.cloneElement(startModalBtn, {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { ref, style: { display: "contents" }, children: [
+      startModalBtn && import_react9.default.cloneElement(startModalBtn, {
         onClick: handleStartClick
       }),
-      shouldRender && (0, import_react_dom2.createPortal)(
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      isRender && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
           "div",
           {
             className: `fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${animate ? "opacity-100" : "opacity-0"}`,
             "aria-modal": "true",
             role: "dialog",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
                 "div",
                 {
                   className: "absolute inset-0 bg-black/40",
@@ -976,13 +1011,35 @@ var Dialog = (0, import_react8.forwardRef)(
                   "aria-label": "Close modal"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
                 "div",
                 {
                   className: `relative z-10 w-[calc(100%-40px)] max-w-md rounded-xl bg-white p-${p || "20"} shadow-lg transform transition-all duration-300 ${animate ? "scale-100 opacity-100" : "scale-95 opacity-0"}`,
                   children: [
+                    isCloseIcon && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "svg",
+                      {
+                        xmlns: "http://www.w3.org/2000/svg",
+                        width: "20",
+                        height: "20",
+                        viewBox: "0 0 20 20",
+                        fill: "none",
+                        className: "text-gray-900 flex h-20 w-20 items-center justify-center absolute right-16 top-16 cursor-pointer",
+                        onMouseDown: (e) => {
+                          e.preventDefault();
+                          handleCloseClick();
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                          "path",
+                          {
+                            d: "M14.7119 6.0625L10.7744 10L14.7119 13.9375L13.9375 14.7119L10 10.7744L6.0625 14.7119L5.28809 13.9375L9.22559 10L5.28809 6.0625L6.0625 5.28809L10 9.22559L13.9375 5.28809L14.7119 6.0625Z",
+                            fill: "#111827"
+                          }
+                        )
+                      }
+                    ),
                     children,
-                    stopModalBtn && import_react8.default.cloneElement(stopModalBtn, {
+                    stopModalBtn && import_react9.default.cloneElement(stopModalBtn, {
                       onClick: handleStopClick
                     }),
                     afterStopBtn && afterStopBtn
@@ -1000,9 +1057,9 @@ var Dialog = (0, import_react8.forwardRef)(
 Dialog.displayName = "Dialog";
 
 // src/components/Icon/Icon.tsx
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
-var Icon = (0, import_react9.forwardRef)(
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Icon = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1030,7 +1087,7 @@ var Icon = (0, import_react9.forwardRef)(
       "material-symbols-outlined select-none shrink-0 inline-block leading-none",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "span",
       __spreadProps(__spreadValues({
         ref,
@@ -1053,114 +1110,105 @@ var Icon = (0, import_react9.forwardRef)(
 Icon.displayName = "Icon";
 
 // src/components/Radio/Radio.tsx
-var import_react10 = require("react");
-var import_jsx_runtime10 = require("react/jsx-runtime");
-var sizeClasses4 = {
-  small: {
-    box: "h-4 w-4",
-    dot: "h-1.5 w-1.5",
-    label: "text-sm leading-5",
-    description: "text-xs leading-4",
-    gap: "gap-2"
-  },
-  medium: {
-    box: "h-5 w-5",
-    dot: "h-2 w-2",
-    label: "text-base leading-6",
-    description: "text-sm leading-5",
-    gap: "gap-2.5"
-  }
-};
-var Radio = (0, import_react10.forwardRef)(
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Radio = (0, import_react11.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      size = "medium",
+      size = "sm",
       label,
       description,
       error = false,
-      contrast = false,
       checked,
       defaultChecked,
       disabled = false,
       className = "",
-      id
+      id,
+      name
     } = _b, rest = __objRest(_b, [
       "size",
       "label",
       "description",
       "error",
-      "contrast",
       "checked",
       "defaultChecked",
       "disabled",
       "className",
-      "id"
+      "id",
+      "name"
     ]);
-    const reactId = (0, import_react10.useId)();
+    const reactId = (0, import_react11.useId)();
     const inputId = id != null ? id : reactId;
-    const sz = sizeClasses4[size];
-    const circleBase = [
-      "relative inline-flex items-center justify-center shrink-0",
-      "rounded-full",
-      "border",
-      "transition-colors duration-150",
-      sz.box
-    ].join(" ");
-    let circleState;
-    if (disabled) {
-      circleState = checked ? "bg-radio-disabled-selected-bg border-radio-disabled-border" : "bg-radio-disabled-bg border-radio-disabled-border";
-    } else if (contrast) {
-      circleState = checked ? "bg-radio-contrast-selected-bg border-radio-contrast-selected-bg" : "bg-radio-contrast-bg border-radio-contrast-border";
-    } else if (error) {
-      circleState = checked ? "bg-radio-selected-bg border-radio-error-border" : "bg-radio-error-bg border-radio-error-border";
-    } else if (checked) {
-      circleState = "bg-radio-selected-bg border-radio-selected-border";
-    } else {
-      circleState = "bg-radio-bg border-radio-border hover:border-radio-hover-border";
-    }
-    const ringColor = error ? "peer-focus-visible:ring-radio-error-ring" : contrast ? "peer-focus-visible:ring-radio-contrast-ring" : "peer-focus-visible:ring-radio-ring";
-    const ringClasses = `peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 ${ringColor}`;
-    let dotColor;
-    if (disabled) {
-      dotColor = "bg-radio-disabled-dot";
-    } else if (contrast) {
-      dotColor = "bg-radio-contrast-selected-dot";
-    } else {
-      dotColor = "bg-radio-selected-dot";
-    }
-    const labelColor = disabled ? "text-radio-label-disabled" : contrast ? "text-radio-contrast-label" : error ? "text-radio-label-error" : "text-radio-label";
-    const descriptionColor = disabled ? "text-radio-label-disabled" : contrast ? "text-radio-contrast-description" : "text-radio-description";
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      "label",
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
       {
-        htmlFor: inputId,
-        className: [
-          "inline-flex items-start font-sans",
-          sz.gap,
-          disabled ? "cursor-not-allowed" : "cursor-pointer",
-          className
-        ].filter(Boolean).join(" "),
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative inline-flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-              "input",
-              __spreadValues({
-                ref,
-                id: inputId,
-                type: "radio",
-                checked,
-                defaultChecked,
-                disabled,
-                className: "peer absolute inset-0 h-full w-full cursor-[inherit] opacity-0"
-              }, rest)
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: [circleBase, circleState, ringClasses].join(" "), children: checked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `rounded-full ${sz.dot} ${dotColor}` }) })
-          ] }),
-          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${sz.label} font-medium ${labelColor}`, children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${sz.description} ${descriptionColor}`, children: description })
-          ] })
-        ]
+        className: `${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "label",
+          {
+            htmlFor: inputId,
+            className: `flex gap-4 ${disabled ? "pointer-events-none text-gray-400" : "text-gray-900 cursor-pointer"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "input",
+                  __spreadValues({
+                    ref,
+                    id: inputId,
+                    type: "radio",
+                    className: "sr-only peer",
+                    checked,
+                    defaultChecked,
+                    disabled,
+                    name
+                  }, rest)
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "div",
+                  {
+                    className: `relative box flex items-center justify-center rounded-full border-2 group bg-white 
+                ${size === "sm" ? "h-16 w-16 my-4 ml-3 mr-3" : "m-3 h-20 w-20 text-label-large"} 
+                ${error ? "border-red-500" : "border-gray-600 peer-checked:border-blue-600 peer-disabled:border-gray-400!"}
+              `,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      "span",
+                      {
+                        className: `absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 
+                  ${size === "sm" ? "h-8 w-8" : "h-10 w-10"} 
+                  rounded-full bg-white group-peer-checked:bg-blue-600 group-peer-disabled:bg-white`
+                      }
+                    )
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+                "div",
+                {
+                  className: `flex flex-col gap-1 ${size === "sm" ? "mt-2" : "mt-4"}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      "p",
+                      {
+                        className: `
+                ${size === "sm" ? "text-label-medium" : "text-label-large"} 
+                ${disabled ? "text-gray-400" : "text-gray-900"}
+              `,
+                        children: label
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                      "p",
+                      {
+                        className: `text-caption-caption ${disabled ? "text-gray-400" : error ? "text-red-600" : "text-gray-600"}`,
+                        children: description
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }
@@ -1168,8 +1216,8 @@ var Radio = (0, import_react10.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/Slider/Slider.tsx
-var import_react11 = require("react");
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var sizeConfig = {
   small: {
     trackH: "h-4",
@@ -1200,7 +1248,7 @@ var sizeConfig = {
   }
 };
 function ChevronGlyphs({ size, color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "svg",
     {
       width: size,
@@ -1210,7 +1258,7 @@ function ChevronGlyphs({ size, color }) {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "path",
           {
             d: "M4.75 3.25L2.25 6L4.75 8.75",
@@ -1220,7 +1268,7 @@ function ChevronGlyphs({ size, color }) {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "path",
           {
             d: "M7.25 3.25L9.75 6L7.25 8.75",
@@ -1234,7 +1282,7 @@ function ChevronGlyphs({ size, color }) {
     }
   );
 }
-var Slider = (0, import_react11.forwardRef)(
+var Slider = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = "medium",
@@ -1269,15 +1317,15 @@ var Slider = (0, import_react11.forwardRef)(
       "onChange",
       "aria-label"
     ]);
-    const reactId = (0, import_react11.useId)();
+    const reactId = (0, import_react12.useId)();
     const inputId = id != null ? id : reactId;
     const sz = sizeConfig[size];
     const ariaLabel = ariaLabelProp != null ? ariaLabelProp : typeof label === "string" ? void 0 : "Slider";
     const ariaDescriptionId = description ? `${inputId}-description` : void 0;
     const isControlled = controlledValue !== void 0;
-    const [internalValue, setInternalValue] = (0, import_react11.useState)(defaultValue != null ? defaultValue : min);
+    const [internalValue, setInternalValue] = (0, import_react12.useState)(defaultValue != null ? defaultValue : min);
     const currentValue = isControlled ? controlledValue : internalValue;
-    const handleChange = (0, import_react11.useCallback)(
+    const handleChange = (0, import_react12.useCallback)(
       (e) => {
         const val = Number(e.target.value);
         if (!isControlled) {
@@ -1297,13 +1345,13 @@ var Slider = (0, import_react11.forwardRef)(
     const descriptionColor = disabled ? "text-slider-label-disabled" : "text-slider-description";
     const thumbOffset = percent * sz.thumbPx / 100;
     const fillOffset = sz.thumbPx / 2 - thumbOffset;
-    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
         className: ["flex w-full flex-col gap-8 font-sans", className].filter(Boolean).join(" "),
         children: [
-          (label || showValue && !disabled) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          (label || showValue && !disabled) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex items-center justify-between", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "label",
               {
                 htmlFor: inputId,
@@ -1316,7 +1364,7 @@ var Slider = (0, import_react11.forwardRef)(
                 children: label
               }
             ),
-            showValue && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            showValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "span",
               {
                 className: [sz.description, "tabular-nums", labelColor].join(" "),
@@ -1324,7 +1372,7 @@ var Slider = (0, import_react11.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               className: [
@@ -1333,7 +1381,7 @@ var Slider = (0, import_react11.forwardRef)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer"
               ].join(" "),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "div",
                   {
                     className: [
@@ -1343,14 +1391,14 @@ var Slider = (0, import_react11.forwardRef)(
                     ].join(" ")
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "div",
                   {
                     className: ["absolute left-0 rounded-full", sz.trackH, fillBg].join(" "),
                     style: { width: `calc(${percent}% + ${fillOffset}px)` }
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "input",
                   __spreadValues({
                     ref,
@@ -1371,7 +1419,7 @@ var Slider = (0, import_react11.forwardRef)(
                     ].join(" ")
                   }, rest)
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "div",
                   {
                     className: [
@@ -1384,13 +1432,13 @@ var Slider = (0, import_react11.forwardRef)(
                       !disabled && "peer-hover:shadow-medium"
                     ].filter(Boolean).join(" "),
                     style: { left: `calc(${percent}% - ${thumbOffset}px)` },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
                   }
                 )
               ]
             }
           ),
-          description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "span",
             {
               id: ariaDescriptionId,
@@ -1406,28 +1454,28 @@ var Slider = (0, import_react11.forwardRef)(
 Slider.displayName = "Slider";
 
 // src/components/Toast/Toast.tsx
-var import_react12 = require("react");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_react13 = require("react");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function CheckCircleIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
 function ProgressIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
   ] });
 }
 function ErrorIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] });
 }
 function CloseIcon2({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 var defaultIcons2 = {
   default: CheckCircleIcon,
@@ -1444,7 +1492,7 @@ var iconColorClasses = {
   progress: "text-toast-progress-icon",
   error: "text-toast-error-icon"
 };
-var Toast = (0, import_react12.forwardRef)(
+var Toast = (0, import_react13.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       type = "default",
@@ -1472,10 +1520,10 @@ var Toast = (0, import_react12.forwardRef)(
       typeClasses[type],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DefaultIcon, { className: "h-20 w-20" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
-      actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DefaultIcon, { className: "h-20 w-20" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
+      actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
@@ -1484,14 +1532,14 @@ var Toast = (0, import_react12.forwardRef)(
           children: actionLabel
         }
       ),
-      onDismiss && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      onDismiss && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
           onClick: onDismiss,
           className: "shrink-0 p-4 rounded-md text-toast-dismiss hover:text-toast-dismiss-hover transition-colors",
           "aria-label": "Dismiss",
-          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon2, { className: "h-16 w-16" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-16 w-16" })
         }
       )
     ] }));