@refinn/core-ui 0.1.2 → 0.1.3

package/dist/index.mjs

@@ -466,77 +466,119 @@ var Badge = forwardRef4(
 Badge.displayName = "Badge";
 
 // src/components/Button/Button.tsx
+import { forwardRef as forwardRef6 } from "react";
+
+// src/components/Loading/Loading.tsx
 import { forwardRef as forwardRef5 } from "react";
 import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var Loading = forwardRef5(
+  (_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__ */ jsx5("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: /* @__PURE__ */ jsxs5(
+      "svg",
+      {
+        className: "animate-spin",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "18",
+        height: "18",
+        viewBox: "0 0 18 18",
+        fill: "none",
+        children: [
+          /* @__PURE__ */ jsx5(
+            "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__ */ jsx5(
+            "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__ */ jsx5("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: /* @__PURE__ */ jsx5(
+      "svg",
+      {
+        className: "animate-spin",
+        width: size === "sm" ? 18 : 88,
+        height: size === "sm" ? 18 : 88,
+        viewBox: "0 0 20 20",
+        fill: "none",
+        children: /* @__PURE__ */ jsx5(
+          "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
+import { jsx as jsx6, jsxs as jsxs6 } from "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__ */ jsx5(
-    "svg",
-    {
-      className,
-      width: "1em",
-      height: "1em",
-      viewBox: "0 0 20 20",
-      fill: "none",
-      children: /* @__PURE__ */ jsx5(
-        "path",
-        {
-          d: "M10 2.5a7.5 7.5 0 1 0 7.5 7.5",
-          stroke: "currentColor",
-          strokeWidth: "2",
-          strokeLinecap: "round"
-        }
-      )
-    }
-  );
-}
-var Button = forwardRef5(
+var Button = forwardRef6(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
-      size = "medium",
+      size = "md",
       rounded = false,
       loading = false,
       disabled = false,
@@ -555,40 +597,32 @@ var Button = forwardRef5(
       "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__ */ jsxs5(
-      "button",
-      __spreadProps(__spreadValues({
-        ref,
-        disabled: isDisabled,
-        className: classes
-      }, rest), {
-        children: [
-          loading ? /* @__PURE__ */ jsx5(Spinner, { className: "animate-spin" }) : startIcon,
-          children,
-          !loading && endIcon
-        ]
-      })
-    );
+    return /* @__PURE__ */ jsxs6("button", __spreadProps(__spreadValues({ ref, disabled: isDisabled, className: classes }, rest), { children: [
+      loading ? /* @__PURE__ */ jsx6(Loading, { size: "sm", isDark: variant === "primary" || variant === "transparent" }) : startIcon,
+      children,
+      !loading && endIcon
+    ] }));
   }
 );
 Button.displayName = "Button";
 
 // src/components/BottomSheet/BottomSheet.tsx
-import React, { useEffect, useState as useState2, useCallback as useCallback2, forwardRef as forwardRef6 } from "react";
+import React, { useEffect, useState as useState2, useCallback as useCallback2, forwardRef as forwardRef7 } from "react";
 import { createPortal } from "react-dom";
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
-var BottomSheet = forwardRef6(
+import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+var BottomSheet = forwardRef7(
   (_a, ref) => {
     var _b = _a, {
       isForceOpen = false,
@@ -657,19 +691,19 @@ var BottomSheet = forwardRef6(
       setIsForceOpen == null ? void 0 : setIsForceOpen(false);
       setIsOpen(false);
     };
-    return /* @__PURE__ */ jsxs6("span", { ref, style: { display: "contents" }, children: [
+    return /* @__PURE__ */ jsxs7("span", { ref, style: { display: "contents" }, children: [
       startModalBtn && React.cloneElement(startModalBtn, {
         onClick: handleStartClick
       }),
       shouldRender && createPortal(
-        /* @__PURE__ */ jsxs6(
+        /* @__PURE__ */ jsxs7(
           "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__ */ jsx6(
+              /* @__PURE__ */ jsx7(
                 "div",
                 {
                   className: "absolute inset-0 bg-black/40",
@@ -677,26 +711,26 @@ var BottomSheet = forwardRef6(
                   "aria-label": "Close modal"
                 }
               ),
-              /* @__PURE__ */ jsxs6(
+              /* @__PURE__ */ jsxs7(
                 "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__ */ jsxs6("div", { className: "w-full flex flex-row relative items-center pt-8 pb-16", children: [
-                      /* @__PURE__ */ jsxs6("div", { className: "flex flex-col px-8 max-w-225", children: [
-                        /* @__PURE__ */ jsx6("p", { className: "text-heading-3 text-button-sheet-text-primary", children: modalTitle }),
-                        /* @__PURE__ */ jsx6("p", { className: "text-body-small text-button-sheet-text-secondary", children: modalDesc })
+                    /* @__PURE__ */ jsxs7("div", { className: "w-full flex flex-row relative items-center pt-8 pb-16", children: [
+                      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col px-8 max-w-225", children: [
+                        /* @__PURE__ */ jsx7("p", { className: "text-heading-3 text-button-sheet-text-primary", children: modalTitle }),
+                        /* @__PURE__ */ jsx7("p", { className: "text-body-small text-button-sheet-text-secondary", children: modalDesc })
                       ] }),
-                      /* @__PURE__ */ jsx6(
+                      /* @__PURE__ */ jsx7(
                         "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__ */ jsx6(
+                      /* @__PURE__ */ jsx7(
                         "div",
                         {
                           className: "text-gray-600 text-xl absolute top-0 right-0 p-12",
@@ -705,7 +739,7 @@ var BottomSheet = forwardRef6(
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsxs6("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
+                    /* @__PURE__ */ jsxs7("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
                       children,
                       stopModalBtn && React.cloneElement(stopModalBtn, {
                         onClick: handleStopClick
@@ -727,20 +761,20 @@ BottomSheet.displayName = "BottomSheet";
 
 // src/components/Checkbox/Checkbox.tsx
 import {
-  forwardRef as forwardRef7,
+  forwardRef as forwardRef8,
   useId as useId2,
   useState as useState3
 } from "react";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
 function CheckIcon({ className }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       className,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M13.333 4.667 6 12l-3.333-3.333",
@@ -754,14 +788,14 @@ function CheckIcon({ className }) {
   );
 }
 function IndeterminateIcon({ className }) {
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     "svg",
     {
       className,
       viewBox: "0 0 16 16",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx7(
+      children: /* @__PURE__ */ jsx8(
         "path",
         {
           d: "M3.333 8h9.334",
@@ -773,7 +807,7 @@ function IndeterminateIcon({ className }) {
     }
   );
 }
-var Checkbox = forwardRef7(
+var Checkbox = forwardRef8(
   (_a, ref) => {
     var _b = _a, {
       label,
@@ -799,14 +833,14 @@ var Checkbox = forwardRef7(
     const reactId = useId2();
     const inputId = id != null ? id : reactId;
     const [isChecked, setIsChecked] = useState3(defaultChecked != null ? defaultChecked : false);
-    return /* @__PURE__ */ jsxs7(
+    return /* @__PURE__ */ jsxs8(
       "label",
       {
         htmlFor: inputId,
         className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
         children: [
-          /* @__PURE__ */ jsxs7("div", { className: "relative mr-16", children: [
-            /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsxs8("div", { className: "relative mr-16", children: [
+            /* @__PURE__ */ jsx8(
               "input",
               __spreadValues({
                 ref,
@@ -823,16 +857,16 @@ var Checkbox = forwardRef7(
                 className: "sr-only"
               }, rest)
             ),
-            /* @__PURE__ */ jsx7(
+            /* @__PURE__ */ jsx8(
               "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__ */ jsx7(
+                children: isChecked ? /* @__PURE__ */ jsx8(
                   CheckIcon,
                   {
                     className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
                   }
-                ) : indeterminate ? /* @__PURE__ */ jsx7(
+                ) : indeterminate ? /* @__PURE__ */ jsx8(
                   IndeterminateIcon,
                   {
                     className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
@@ -841,15 +875,15 @@ var Checkbox = forwardRef7(
               }
             )
           ] }),
-          (label || description) && /* @__PURE__ */ jsxs7("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ jsx7(
+          (label || description) && /* @__PURE__ */ jsxs8("span", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ jsx8(
               "span",
               {
                 className: `text-label-large ${disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-primary"}`,
                 children: label
               }
             ),
-            description && /* @__PURE__ */ jsx7(
+            description && /* @__PURE__ */ jsx8(
               "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"}`,
@@ -869,15 +903,16 @@ import React2, {
   useEffect as useEffect2,
   useState as useState4,
   useCallback as useCallback3,
-  forwardRef as forwardRef8
+  forwardRef as forwardRef9
 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
-import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
-var Dialog = forwardRef8(
+import { jsx as jsx9, jsxs as jsxs9 } from "react/jsx-runtime";
+var Dialog = forwardRef9(
   ({
     isForceOpen = false,
     setIsForceOpen,
     isClosedAble = true,
+    isCloseIcon = true,
     children,
     startModalBtn,
     stopModalBtn,
@@ -885,15 +920,15 @@ var Dialog = forwardRef8(
     p = "20"
   }, ref) => {
     const [isOpen, setIsOpen] = useState4(false);
-    const [shouldRender, setShouldRender] = useState4(false);
+    const [isRender, setIsRender] = useState4(false);
     const [animate, setAnimate] = useState4(false);
     useEffect2(() => {
       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]);
@@ -926,19 +961,19 @@ var Dialog = forwardRef8(
       setIsForceOpen == null ? void 0 : setIsForceOpen(false);
       setIsOpen(false);
     };
-    return /* @__PURE__ */ jsxs8("span", { ref, style: { display: "contents" }, children: [
+    return /* @__PURE__ */ jsxs9("span", { ref, style: { display: "contents" }, children: [
       startModalBtn && React2.cloneElement(startModalBtn, {
         onClick: handleStartClick
       }),
-      shouldRender && createPortal2(
-        /* @__PURE__ */ jsxs8(
+      isRender && createPortal2(
+        /* @__PURE__ */ jsxs9(
           "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__ */ jsx8(
+              /* @__PURE__ */ jsx9(
                 "div",
                 {
                   className: "absolute inset-0 bg-black/40",
@@ -946,11 +981,33 @@ var Dialog = forwardRef8(
                   "aria-label": "Close modal"
                 }
               ),
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "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__ */ jsx9(
+                      "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__ */ jsx9(
+                          "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 && React2.cloneElement(stopModalBtn, {
                       onClick: handleStopClick
@@ -970,9 +1027,9 @@ var Dialog = forwardRef8(
 Dialog.displayName = "Dialog";
 
 // src/components/Icon/Icon.tsx
-import { forwardRef as forwardRef9 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
-var Icon = forwardRef9(
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Icon = forwardRef10(
   (_a, ref) => {
     var _b = _a, {
       name,
@@ -1000,7 +1057,7 @@ var Icon = forwardRef9(
       "material-symbols-outlined select-none shrink-0 inline-block leading-none",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       "span",
       __spreadProps(__spreadValues({
         ref,
@@ -1024,116 +1081,107 @@ Icon.displayName = "Icon";
 
 // src/components/Radio/Radio.tsx
 import {
-  forwardRef as forwardRef10,
+  forwardRef as forwardRef11,
   useId as useId3
 } from "react";
-import { jsx as jsx10, jsxs as jsxs9 } from "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 = forwardRef10(
+import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+var Radio = forwardRef11(
   (_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 = useId3();
     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__ */ jsxs9(
-      "label",
+    return /* @__PURE__ */ jsx11(
+      "div",
       {
-        htmlFor: inputId,
-        className: [
-          "inline-flex items-start font-sans",
-          sz.gap,
-          disabled ? "cursor-not-allowed" : "cursor-pointer",
-          className
-        ].filter(Boolean).join(" "),
-        children: [
-          /* @__PURE__ */ jsxs9("span", { className: "relative inline-flex", children: [
-            /* @__PURE__ */ jsx10(
-              "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__ */ jsx10("span", { className: [circleBase, circleState, ringClasses].join(" "), children: checked && /* @__PURE__ */ jsx10("span", { className: `rounded-full ${sz.dot} ${dotColor}` }) })
-          ] }),
-          (label || description) && /* @__PURE__ */ jsxs9("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ jsx10("span", { className: `${sz.label} font-medium ${labelColor}`, children: label }),
-            description && /* @__PURE__ */ jsx10("span", { className: `${sz.description} ${descriptionColor}`, children: description })
-          ] })
-        ]
+        className: `${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
+        children: /* @__PURE__ */ jsxs10(
+          "label",
+          {
+            htmlFor: inputId,
+            className: `flex gap-4 ${disabled ? "pointer-events-none text-gray-400" : "text-gray-900 cursor-pointer"}`,
+            children: [
+              /* @__PURE__ */ jsxs10("div", { children: [
+                /* @__PURE__ */ jsx11(
+                  "input",
+                  __spreadValues({
+                    ref,
+                    id: inputId,
+                    type: "radio",
+                    className: "sr-only peer",
+                    checked,
+                    defaultChecked,
+                    disabled,
+                    name
+                  }, rest)
+                ),
+                /* @__PURE__ */ jsx11(
+                  "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__ */ jsx11(
+                      "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__ */ jsxs10(
+                "div",
+                {
+                  className: `flex flex-col gap-1 ${size === "sm" ? "mt-2" : "mt-4"}`,
+                  children: [
+                    /* @__PURE__ */ jsx11(
+                      "p",
+                      {
+                        className: `
+                ${size === "sm" ? "text-label-medium" : "text-label-large"} 
+                ${disabled ? "text-gray-400" : "text-gray-900"}
+              `,
+                        children: label
+                      }
+                    ),
+                    /* @__PURE__ */ jsx11(
+                      "p",
+                      {
+                        className: `text-caption-caption ${disabled ? "text-gray-400" : error ? "text-red-600" : "text-gray-600"}`,
+                        children: description
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }
@@ -1142,12 +1190,12 @@ Radio.displayName = "Radio";
 
 // src/components/Slider/Slider.tsx
 import {
-  forwardRef as forwardRef11,
+  forwardRef as forwardRef12,
   useCallback as useCallback4,
   useId as useId4,
   useState as useState5
 } from "react";
-import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 var sizeConfig = {
   small: {
     trackH: "h-4",
@@ -1178,7 +1226,7 @@ var sizeConfig = {
   }
 };
 function ChevronGlyphs({ size, color }) {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "svg",
     {
       width: size,
@@ -1188,7 +1236,7 @@ function ChevronGlyphs({ size, color }) {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "path",
           {
             d: "M4.75 3.25L2.25 6L4.75 8.75",
@@ -1198,7 +1246,7 @@ function ChevronGlyphs({ size, color }) {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           "path",
           {
             d: "M7.25 3.25L9.75 6L7.25 8.75",
@@ -1212,7 +1260,7 @@ function ChevronGlyphs({ size, color }) {
     }
   );
 }
-var Slider = forwardRef11(
+var Slider = forwardRef12(
   (_a, ref) => {
     var _b = _a, {
       size = "medium",
@@ -1275,13 +1323,13 @@ var Slider = forwardRef11(
     const descriptionColor = disabled ? "text-slider-label-disabled" : "text-slider-description";
     const thumbOffset = percent * sz.thumbPx / 100;
     const fillOffset = sz.thumbPx / 2 - thumbOffset;
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: ["flex w-full flex-col gap-8 font-sans", className].filter(Boolean).join(" "),
         children: [
-          (label || showValue && !disabled) && /* @__PURE__ */ jsxs10("div", { className: "flex items-center justify-between", children: [
-            label && /* @__PURE__ */ jsx11(
+          (label || showValue && !disabled) && /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between", children: [
+            label && /* @__PURE__ */ jsx12(
               "label",
               {
                 htmlFor: inputId,
@@ -1294,7 +1342,7 @@ var Slider = forwardRef11(
                 children: label
               }
             ),
-            showValue && /* @__PURE__ */ jsx11(
+            showValue && /* @__PURE__ */ jsx12(
               "span",
               {
                 className: [sz.description, "tabular-nums", labelColor].join(" "),
@@ -1302,7 +1350,7 @@ var Slider = forwardRef11(
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs10(
+          /* @__PURE__ */ jsxs11(
             "div",
             {
               className: [
@@ -1311,7 +1359,7 @@ var Slider = forwardRef11(
                 disabled ? "cursor-not-allowed" : "cursor-pointer"
               ].join(" "),
               children: [
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     className: [
@@ -1321,14 +1369,14 @@ var Slider = forwardRef11(
                     ].join(" ")
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     className: ["absolute left-0 rounded-full", sz.trackH, fillBg].join(" "),
                     style: { width: `calc(${percent}% + ${fillOffset}px)` }
                   }
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "input",
                   __spreadValues({
                     ref,
@@ -1349,7 +1397,7 @@ var Slider = forwardRef11(
                     ].join(" ")
                   }, rest)
                 ),
-                /* @__PURE__ */ jsx11(
+                /* @__PURE__ */ jsx12(
                   "div",
                   {
                     className: [
@@ -1362,13 +1410,13 @@ var Slider = forwardRef11(
                       !disabled && "peer-hover:shadow-medium"
                     ].filter(Boolean).join(" "),
                     style: { left: `calc(${percent}% - ${thumbOffset}px)` },
-                    children: /* @__PURE__ */ jsx11(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
+                    children: /* @__PURE__ */ jsx12(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
                   }
                 )
               ]
             }
           ),
-          description && /* @__PURE__ */ jsx11(
+          description && /* @__PURE__ */ jsx12(
             "span",
             {
               id: ariaDescriptionId,
@@ -1384,28 +1432,28 @@ var Slider = forwardRef11(
 Slider.displayName = "Slider";
 
 // src/components/Toast/Toast.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 function CheckCircleIcon({ className }) {
-  return /* @__PURE__ */ jsxs11("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx12("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx12("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  return /* @__PURE__ */ jsxs12("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx13("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx13("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
   ] });
 }
 function ProgressIcon({ className }) {
-  return /* @__PURE__ */ jsxs11("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx12("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
-    /* @__PURE__ */ jsx12("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx12("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
+  return /* @__PURE__ */ jsxs12("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx13("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
+    /* @__PURE__ */ jsx13("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ jsx13("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
   ] });
 }
 function ErrorIcon({ className }) {
-  return /* @__PURE__ */ jsxs11("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsx12("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ jsx12("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  return /* @__PURE__ */ jsxs12("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx13("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ jsx13("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
   ] });
 }
 function CloseIcon2({ className }) {
-  return /* @__PURE__ */ jsx12("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx12("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+  return /* @__PURE__ */ jsx13("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx13("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
 var defaultIcons2 = {
   default: CheckCircleIcon,
@@ -1422,7 +1470,7 @@ var iconColorClasses = {
   progress: "text-toast-progress-icon",
   error: "text-toast-error-icon"
 };
-var Toast = forwardRef12(
+var Toast = forwardRef13(
   (_a, ref) => {
     var _b = _a, {
       type = "default",
@@ -1450,10 +1498,10 @@ var Toast = forwardRef12(
       typeClasses[type],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs11("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
-      icon && /* @__PURE__ */ jsx12("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ jsx12(DefaultIcon, { className: "h-20 w-20" }) }),
-      /* @__PURE__ */ jsx12("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
-      actionLabel && onAction && /* @__PURE__ */ jsx12(
+    return /* @__PURE__ */ jsxs12("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
+      icon && /* @__PURE__ */ jsx13("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ jsx13(DefaultIcon, { className: "h-20 w-20" }) }),
+      /* @__PURE__ */ jsx13("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
+      actionLabel && onAction && /* @__PURE__ */ jsx13(
         "button",
         {
           type: "button",
@@ -1462,14 +1510,14 @@ var Toast = forwardRef12(
           children: actionLabel
         }
       ),
-      onDismiss && /* @__PURE__ */ jsx12(
+      onDismiss && /* @__PURE__ */ jsx13(
         "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__ */ jsx12(CloseIcon2, { className: "h-16 w-16" })
+          children: /* @__PURE__ */ jsx13(CloseIcon2, { className: "h-16 w-16" })
         }
       )
     ] }));