@refinn/core-ui 0.1.1 → 0.1.3

package/dist/index.js

@@ -1,10 +1,12 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
@@ -44,6 +46,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/components/index.ts
@@ -53,8 +63,10 @@ __export(index_exports, {
   AlertBanner: () => AlertBanner,
   Avatar: () => Avatar,
   Badge: () => Badge,
+  BottomSheet: () => BottomSheet,
   Button: () => Button,
   Checkbox: () => Checkbox,
+  Dialog: () => Dialog,
   Icon: () => Icon,
   Radio: () => Radio,
   Slider: () => Slider,
@@ -65,29 +77,6 @@ module.exports = __toCommonJS(index_exports);
 // src/components/Accordion/Accordion.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
-var sizeClasses = {
-  small: {
-    trigger: "px-3 py-2.5",
-    title: "text-sm leading-5",
-    subtitle: "text-xs leading-4",
-    content: "px-3 pb-3 text-sm leading-5",
-    icon: "h-4 w-4"
-  },
-  medium: {
-    trigger: "px-4 py-3",
-    title: "text-base leading-6",
-    subtitle: "text-sm leading-5",
-    content: "px-4 pb-4 text-sm leading-5",
-    icon: "h-5 w-5"
-  },
-  large: {
-    trigger: "px-5 py-4",
-    title: "text-lg leading-7",
-    subtitle: "text-sm leading-5",
-    content: "px-5 pb-5 text-base leading-6",
-    icon: "h-5 w-5"
-  }
-};
 function ChevronIcon({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { className, viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "path",
@@ -100,26 +89,16 @@ function ChevronIcon({ className }) {
     }
   ) });
 }
-function AccordionItem({ item, size, isOpen, onToggle, generatedId }) {
-  const sz = sizeClasses[size];
+function AccordionItem({ item, isOpen, onToggle, generatedId }) {
   const triggerId = `${generatedId}-trigger`;
   const panelId = `${generatedId}-panel`;
-  const triggerClasses = [
-    "flex w-full items-center justify-between gap-2 text-left font-sans font-medium",
-    "transition-colors duration-150",
-    "outline-none",
-    sz.trigger,
-    sz.title,
-    item.disabled ? "cursor-not-allowed text-accordion-text-disabled" : "cursor-pointer text-accordion-text hover:bg-accordion-bg-hover active:bg-accordion-bg-active focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-accordion-border-focus"
-  ].join(" ");
   const iconClasses = [
-    sz.icon,
-    "shrink-0 transition-transform duration-200",
+    "shrink-0 transition-transform duration-200 text-accordion-icon h-28 w-28 p-4 my-8 mx-12 lg:h-40 lg:w-40 lg:p-8 lg:mx-12 lg:my-8",
     isOpen ? "rotate-180" : "",
-    item.disabled ? "text-accordion-icon-disabled" : "text-accordion-icon"
+    item.disabled ? "text-static-icon-disabled" : "text-static-icon-primary"
   ].join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { className: "m-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
       "button",
       {
         id: triggerId,
@@ -127,21 +106,31 @@ function AccordionItem({ item, size, isOpen, onToggle, generatedId }) {
         "aria-expanded": isOpen,
         "aria-controls": panelId,
         disabled: item.disabled,
-        className: triggerClasses,
+        className: "flex flex-row items-center justify-between w-full pl-16 pr-8 py-8 lg:pl-24 lg:py-16 lg:pr-12",
         onClick: onToggle,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: item.title }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: `flex flex-col`, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "span",
+              {
+                className: `
+              text-label-large
+              text-start
+              lg:text-heading-3
+              ${item.disabled ? "text-accordion-text-disabled" : "text-accordion-text-primary"}
+            `,
+                children: item.title
+              }
+            ),
             item.subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: [
-              sz.subtitle,
-              "font-normal",
+              "text-body-small",
               item.disabled ? "text-accordion-text-disabled" : "text-accordion-text-secondary"
             ].join(" "), children: item.subtitle })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronIcon, { className: iconClasses })
         ]
       }
-    ) }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "div",
       {
@@ -150,7 +139,7 @@ function AccordionItem({ item, size, isOpen, onToggle, generatedId }) {
         "aria-labelledby": triggerId,
         className: "overflow-hidden transition-[grid-template-rows] duration-200",
         style: { display: "grid", gridTemplateRows: isOpen ? "1fr" : "0fr" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: [sz.content, "text-accordion-text-secondary"].join(" "), children: item.content }) })
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `text-accordion-text-secondary text-body-small pt-8 pb-16 px-16 lg:text-body-regular lg:pl-24 lg:pr-64 lg:pb-24 lg:pt-12`, children: item.content }) })
       }
     )
   ] });
@@ -159,13 +148,11 @@ var Accordion = (0, import_react.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       items,
-      size = "medium",
       multiple = false,
       loading = false,
       className = ""
     } = _b, rest = __objRest(_b, [
       "items",
-      "size",
       "multiple",
       "loading",
       "className"
@@ -200,10 +187,9 @@ var Accordion = (0, import_react.forwardRef)(
       className
     ].filter(Boolean).join(" ");
     if (loading) {
-      const sz = sizeClasses[size];
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex items-center justify-between gap-2 ${sz.trigger}`, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 flex flex-col gap-1", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-4 w-3/4 rounded bg-gray-200 animate-pulse" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronIcon, { className: `${sz.icon} shrink-0 text-accordion-icon` })
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex items-center justify-between gap-8 pl-16 pr-8 py-8`, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex-1 flex flex-col gap-4", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-16 w-3/4 rounded bg-gray-200 animate-pulse" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronIcon, { className: `shrink-0 text-accordion-icon w-20 h-20 my-8 mx-12` })
       ] }) }));
     }
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: items.map((item, i) => {
@@ -213,7 +199,6 @@ var Accordion = (0, import_react.forwardRef)(
         AccordionItem,
         {
           item,
-          size,
           isOpen: openItems.has(itemId),
           onToggle: () => handleToggle(itemId),
           generatedId: `${baseId}-${itemId}`
@@ -228,26 +213,40 @@ Accordion.displayName = "Accordion";
 // src/components/AlertBanner/AlertBanner.tsx
 var import_react2 = require("react");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var inlineClasses = {
-  info: "bg-alert-inline-info-bg border-alert-inline-info-border text-alert-text-primary",
-  success: "bg-alert-inline-success-bg border-alert-inline-success-border text-alert-text-primary",
-  warning: "bg-alert-inline-warning-bg border-alert-inline-warning-border text-alert-text-primary",
-  danger: "bg-alert-inline-danger-bg border-alert-inline-danger-border text-alert-text-primary",
-  common: "bg-alert-inline-common-bg border-alert-inline-common-border text-alert-text-primary"
-};
 var pageClasses = {
   info: "bg-alert-page-info-bg text-alert-text-primary-inverse",
   success: "bg-alert-page-success-bg text-alert-text-primary-inverse",
   warning: "bg-alert-page-warning-bg text-alert-text-primary-inverse",
   danger: "bg-alert-page-danger-bg text-alert-text-primary-inverse",
-  common: "bg-alert-page-common-bg text-alert-text-primary-inverse"
+  none: "bg-alert-page-common-bg text-alert-text-primary-inverse"
+};
+var SectionClasses = {
+  info: "bg-alert-banner-background-info-subtle text-alert-text-primary",
+  success: "bg-alert-banner-background-success-subtle text-alert-text-primary",
+  warning: "bg-alert-banner-background-warning-subtle text-alert-text-primary",
+  danger: "bg-alert-banner-background-danger-subtle text-alert-text-primary",
+  none: "bg-alert-banner-background-common-subtle text-alert-text-primary"
+};
+var inlineClasses = {
+  info: "bg-alert-banner-background-transparent text-alert-text-primary",
+  success: "bg-alert-banner-background-transparent text-alert-text-primary",
+  warning: "bg-alert-banner-background-transparent text-alert-text-primary",
+  danger: "bg-alert-banner-background-transparent text-alert-text-primary",
+  none: "bg-alert-banner-background-transparent text-alert-text-primary"
+};
+var actionsPageClasses = {
+  info: "text-enabled-inverse",
+  success: "text-enabled-inverse",
+  warning: "text-enabled-dark",
+  danger: "text-enabled-inverse",
+  none: "text-enabled-inverse"
 };
 var inlineIconClasses = {
   info: "text-alert-inline-info-icon",
   success: "text-alert-inline-success-icon",
   warning: "text-alert-inline-warning-icon",
   danger: "text-alert-inline-danger-icon",
-  common: "text-alert-inline-common-icon"
+  none: "text-alert-inline-common-icon"
 };
 function InfoIcon({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM10 6h.01M9 10h1v4h1", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -264,8 +263,8 @@ function WarningIcon({ className }) {
 function DangerIcon({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM12.5 7.5l-5 5M7.5 7.5l5 5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 }
-function CommonIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16ZM10 6v4M10 14h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+function NoneIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, {});
 }
 function CloseIcon({ className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
@@ -275,7 +274,7 @@ var defaultIcons = {
   success: SuccessIcon,
   warning: WarningIcon,
   danger: DangerIcon,
-  common: CommonIcon
+  none: NoneIcon
 };
 var AlertBanner = (0, import_react2.forwardRef)(
   (_a, ref) => {
@@ -284,6 +283,7 @@ var AlertBanner = (0, import_react2.forwardRef)(
       mode = "inline",
       title,
       description,
+      action,
       icon,
       onClose,
       className = "",
@@ -293,40 +293,48 @@ var AlertBanner = (0, import_react2.forwardRef)(
       "mode",
       "title",
       "description",
+      "action",
       "icon",
       "onClose",
       "className",
       "children"
     ]);
     const isPage = mode === "page";
-    const variantClass = isPage ? pageClasses[variant] : inlineClasses[variant];
+    const isSection = mode === "section";
+    const variantClass = isPage ? pageClasses[variant] : isSection ? SectionClasses[variant] : inlineClasses[variant];
+    const actionClass = isPage ? actionsPageClasses[variant] : "text-enabled";
     const DefaultIcon = defaultIcons[variant];
     const iconColorClass = isPage ? "" : inlineIconClasses[variant];
     const descColorClass = isPage ? "text-alert-text-secondary-inverse" : "text-alert-text-secondary";
     const closeColorClass = isPage ? "text-alert-close-inverse hover:text-alert-close-inverse-hover" : "text-alert-close hover:text-alert-close-hover";
     const classes = [
-      "flex items-start gap-3 font-sans",
-      isPage ? "px-4 py-3" : "px-4 py-3 border-l-4 rounded-lg",
+      "flex items-start gap-24 font-sans justify-between",
+      isPage ? "p-12" : isSection ? "p-12 rounded-md" : "p-0",
       variantClass,
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `shrink-0 mt-0.5 ${iconColorClass}`, children: icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultIcon, { className: "h-5 w-5" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 min-w-0", children: [
-        title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-sm font-medium leading-5", children: title }),
-        description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: `text-sm leading-5 ${descColorClass} ${title ? "mt-1" : ""}`, children: description }),
-        children
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-start gap-8", children: [
+        icon != null ? icon : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(DefaultIcon, { className: `h-20 w-20 ${iconColorClass}` }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 min-w-0 flex flex-col", children: [
+          title && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-label-medium", children: title }),
+          description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: `text-body-small ${descColorClass} ${title ? "mt-2" : ""} ${children ? "mb-8" : ""}`, children: description }),
+          children
+        ] })
       ] }),
-      onClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        "button",
-        {
-          type: "button",
-          onClick: onClose,
-          className: `shrink-0 p-0.5 rounded transition-colors ${closeColorClass}`,
-          "aria-label": "Close",
-          children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, { className: "h-4 w-4" })
-        }
-      )
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: `flex ${children ? "items-start" : "self-center"} gap-24`, children: [
+        (action == null ? void 0 : action[0]) && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("a", { className: `${actionClass} underline text-sm font-medium`, href: action[1], children: action[0] }),
+        onClose && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onClose,
+            className: `shrink-0 p-2 rounded transition-colors ${closeColorClass}`,
+            "aria-label": "Close",
+            children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CloseIcon, { className: "h-16 w-16" })
+          }
+        )
+      ] })
     ] }));
   }
 );
@@ -335,18 +343,17 @@ AlertBanner.displayName = "AlertBanner";
 // src/components/Avatar/Avatar.tsx
 var import_react3 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
-var sizeClasses2 = {
-  xs: { container: "h-6 w-6", text: "text-[10px]", status: "h-2 w-2", statusRing: "ring-1" },
-  sm: { container: "h-8 w-8", text: "text-xs", status: "h-2.5 w-2.5", statusRing: "ring-[1.5px]" },
-  md: { container: "h-10 w-10", text: "text-sm", status: "h-3 w-3", statusRing: "ring-2" },
-  lg: { container: "h-12 w-12", text: "text-base", status: "h-3.5 w-3.5", statusRing: "ring-2" },
-  xl: { container: "h-14 w-14", text: "text-lg", status: "h-4 w-4", statusRing: "ring-2" },
-  "2xl": { container: "h-16 w-16", text: "text-xl", status: "h-4 w-4", statusRing: "ring-2" }
+var sizeClasses = {
+  sm: { container: "h-24 w-24", text: "text-sm", status: "h-6 w-6", statusRing: "ring-1" },
+  md: { container: "h-32 w-32", text: "text-base", status: "h-8 w-8", statusRing: "ring-[1.5px]" },
+  lg: { container: "h-40 w-40", text: "text-lg", status: "h-10 w-10", statusRing: "ring-2" },
+  xl: { container: "h-48 w-48", text: "text-xl", status: "h-12 w-12", statusRing: "ring-2" }
 };
 var statusColorClasses = {
   online: "bg-avatar-status-online",
   offline: "bg-avatar-status-offline",
-  busy: "bg-avatar-status-busy"
+  busy: "bg-avatar-status-busy",
+  "": ""
 };
 function getInitials(name) {
   const parts = name.trim().split(/\s+/);
@@ -360,7 +367,6 @@ var Avatar = (0, import_react3.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = "md",
-      shape = "circle",
       src,
       alt = "",
       name,
@@ -369,7 +375,6 @@ var Avatar = (0, import_react3.forwardRef)(
       className = ""
     } = _b, rest = __objRest(_b, [
       "size",
-      "shape",
       "src",
       "alt",
       "name",
@@ -377,15 +382,13 @@ var Avatar = (0, import_react3.forwardRef)(
       "status",
       "className"
     ]);
-    const sz = sizeClasses2[size];
-    const roundedClass = shape === "circle" ? "rounded-full" : "rounded-lg";
+    const sz = sizeClasses[size];
     const containerClasses = [
-      "relative inline-flex items-center justify-center shrink-0",
+      "relative inline-flex items-center justify-center shrink-0 rounded-full",
       "bg-avatar-bg text-avatar-text font-medium font-sans",
       "transition-colors duration-150",
       "select-none",
       sz.container,
-      roundedClass,
       className
     ].filter(Boolean).join(" ");
     let content;
@@ -395,7 +398,7 @@ var Avatar = (0, import_react3.forwardRef)(
         {
           src,
           alt: alt || name || "",
-          className: `h-full w-full object-cover ${roundedClass}`
+          className: "h-full w-full object-cover rounded-full"
         }
       );
     } else if (icon) {
@@ -427,83 +430,45 @@ Avatar.displayName = "Avatar";
 // src/components/Badge/Badge.tsx
 var import_react4 = require("react");
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var sizeClasses3 = {
-  sm: "h-5 px-1.5 text-xs gap-1",
-  md: "h-6 px-2 text-xs gap-1",
-  lg: "h-7 px-2.5 text-sm gap-1.5"
+var sizeClasses2 = {
+  sm: "h-20 px-8 py-2 text-label-small gap-4",
+  md: "h-28 px-10 py-4 text-label-medium gap-4",
+  lg: "h-32 px-14 py-6 text-label-large gap-6"
 };
 var iconSizeClasses = {
-  sm: "h-3 w-3",
-  md: "h-3.5 w-3.5",
-  lg: "h-4 w-4"
-};
-var dotSizeClasses = {
-  sm: "h-1.5 w-1.5",
-  md: "h-1.5 w-1.5",
-  lg: "h-2 w-2"
-};
-var shapeClasses = {
-  round: "rounded-full",
-  square: "rounded"
+  sm: "h-16 w-16",
+  md: "h-20 w-20",
+  lg: "h-24 w-24"
 };
 var minimalClasses = {
-  common: "bg-transparent border border-badge-minimal-common-border text-badge-minimal-common-text",
-  success: "bg-transparent border border-badge-minimal-success-border text-badge-minimal-success-text",
-  warning: "bg-transparent border border-badge-minimal-warning-border text-badge-minimal-warning-text",
-  info: "bg-transparent border border-badge-minimal-info-border text-badge-minimal-info-text",
-  brand: "bg-transparent border border-badge-minimal-brand-border text-badge-minimal-brand-text",
-  danger: "bg-transparent border border-badge-minimal-danger-border text-badge-minimal-danger-text"
-};
-var minimalDotClasses = {
-  common: "bg-badge-minimal-common-dot",
-  success: "bg-badge-minimal-success-dot",
-  warning: "bg-badge-minimal-warning-dot",
-  info: "bg-badge-minimal-info-dot",
-  brand: "bg-badge-minimal-brand-dot",
-  danger: "bg-badge-minimal-danger-dot"
+  common: "bg-transparent border border-badges-border-primary text-badges-text-primary",
+  success: "bg-transparent border border-badges-border-success text-badges-text-success",
+  warning: "bg-transparent border border-badges-border-warning text-badges-text-warning",
+  info: "bg-transparent border border-badges-border-info text-badges-text-info",
+  brand: "bg-transparent border border-badges-border-brand text-badges-text-brand",
+  danger: "bg-transparent border border-badges-border-danger text-badges-text-danger"
 };
 var subtleClasses = {
-  common: "bg-badge-subtle-common-bg text-badge-subtle-common-text",
-  success: "bg-badge-subtle-success-bg text-badge-subtle-success-text",
-  warning: "bg-badge-subtle-warning-bg text-badge-subtle-warning-text",
-  info: "bg-badge-subtle-info-bg text-badge-subtle-info-text",
-  brand: "bg-badge-subtle-brand-bg text-badge-subtle-brand-text",
-  danger: "bg-badge-subtle-danger-bg text-badge-subtle-danger-text"
-};
-var subtleDotClasses = {
-  common: "bg-badge-subtle-common-dot",
-  success: "bg-badge-subtle-success-dot",
-  warning: "bg-badge-subtle-warning-dot",
-  info: "bg-badge-subtle-info-dot",
-  brand: "bg-badge-subtle-brand-dot",
-  danger: "bg-badge-subtle-danger-dot"
+  common: "bg-badges-background-common-subtle text-badges-text-primary",
+  success: "bg-badges-background-success-subtle text-badges-text-success",
+  warning: "bg-badges-background-warning-subtle text-badges-text-warning",
+  info: "bg-badges-background-info-subtle text-badges-text-info",
+  brand: "bg-badges-background-brand-subtle text-badges-text-brand",
+  danger: "bg-badges-background-danger-subtle text-badges-text-danger"
 };
 var boldClasses = {
-  common: "bg-badge-bold-common-bg text-badge-bold-text",
-  success: "bg-badge-bold-success-bg text-badge-bold-text",
-  warning: "bg-badge-bold-warning-bg text-badge-bold-text",
-  info: "bg-badge-bold-info-bg text-badge-bold-text",
-  brand: "bg-badge-bold-brand-bg text-badge-bold-text",
-  danger: "bg-badge-bold-danger-bg text-badge-bold-text"
-};
-var boldDotClasses = {
-  common: "bg-badge-bold-common-dot",
-  success: "bg-badge-bold-success-dot",
-  warning: "bg-badge-bold-warning-dot",
-  info: "bg-badge-bold-info-dot",
-  brand: "bg-badge-bold-brand-dot",
-  danger: "bg-badge-bold-danger-dot"
+  common: "bg-badges-background-common text-badges-text-inverse",
+  success: "bg-badges-background-success text-badges-text-inverse",
+  warning: "bg-badges-background-warning text-badges-text-primary",
+  info: "bg-badges-background-info text-badges-text-inverse",
+  brand: "bg-badges-background-brand text-badges-text-inverse",
+  danger: "bg-badges-background-danger text-badges-text-inverse"
 };
 var styleMap = {
   minimal: minimalClasses,
   subtle: subtleClasses,
   bold: boldClasses
 };
-var dotStyleMap = {
-  minimal: minimalDotClasses,
-  subtle: subtleDotClasses,
-  bold: boldDotClasses
-};
 var Badge = (0, import_react4.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
@@ -512,7 +477,6 @@ var Badge = (0, import_react4.forwardRef)(
       size = "md",
       shape = "round",
       icon,
-      dot = false,
       children,
       className = ""
     } = _b, rest = __objRest(_b, [
@@ -521,21 +485,19 @@ var Badge = (0, import_react4.forwardRef)(
       "size",
       "shape",
       "icon",
-      "dot",
       "children",
       "className"
     ]);
     const classes = [
       "inline-flex items-center justify-center font-medium font-sans",
       "whitespace-nowrap select-none",
-      sizeClasses3[size],
-      shapeClasses[shape],
+      sizeClasses2[size],
+      shape === "round" ? "rounded-full" : `rounded-${size}`,
       styleMap[badgeStyle][status],
       className
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", __spreadProps(__spreadValues({ ref, className: classes }, rest), { children: [
-      dot && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `shrink-0 rounded-full ${dotSizeClasses[size]} ${dotStyleMap[badgeStyle][status]}` }),
-      !dot && icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `shrink-0 ${iconSizeClasses[size]}`, children: icon }),
+      icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `shrink-0 ${iconSizeClasses[size]}`, children: icon }),
       children
     ] }));
   }
@@ -543,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 sizeClasses4 = {
-  small: "h-8 px-3 text-sm gap-1",
-  medium: "h-10 px-4 text-sm gap-1.5",
-  large: "h-12 px-5 text-base gap-2",
-  "extra-large": "h-14 px-6 text-lg gap-2"
+var sizeClasses3 = {
+  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,
@@ -632,161 +636,295 @@ 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",
-      sizeClasses4[size],
+      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/Checkbox/Checkbox.tsx
-var import_react6 = require("react");
-var import_jsx_runtime6 = require("react/jsx-runtime");
-var sizeClasses5 = {
-  small: {
-    box: "h-4 w-4",
-    icon: "h-3 w-3",
-    label: "text-sm leading-5",
-    description: "text-xs leading-4",
-    gap: "gap-2"
-  },
-  medium: {
-    box: "h-5 w-5",
-    icon: "h-3.5 w-3.5",
-    label: "text-base leading-6",
-    description: "text-sm leading-5",
-    gap: "gap-2.5"
+// src/components/BottomSheet/BottomSheet.tsx
+var import_react7 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var BottomSheet = (0, import_react7.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      isForceOpen = false,
+      setIsForceOpen,
+      isClosedAble = true,
+      children,
+      startModalBtn,
+      stopModalBtn,
+      afterStopBtn,
+      size = "md",
+      modalTitle = "\u0E2B\u0E31\u0E27\u0E02\u0E49\u0E2D",
+      modalDesc = "\u0E04\u0E33\u0E2D\u0E18\u0E34\u0E1A\u0E32\u0E22",
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "isForceOpen",
+      "setIsForceOpen",
+      "isClosedAble",
+      "children",
+      "startModalBtn",
+      "stopModalBtn",
+      "afterStopBtn",
+      "size",
+      "modalTitle",
+      "modalDesc",
+      "className"
+    ]);
+    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);
+      } else {
+        setAnimate(false);
+        const timer = setTimeout(() => setShouldRender(false), 300);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+    (0, import_react7.useEffect)(() => {
+      if (isForceOpen) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    }, [isForceOpen]);
+    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);
+        setIsForceOpen == null ? void 0 : setIsForceOpen(true);
+        setIsOpen(true);
+      },
+      [startModalBtn]
+    );
+    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);
+        setIsForceOpen == null ? void 0 : setIsForceOpen(false);
+        setIsOpen(false);
+      },
+      [stopModalBtn]
+    );
+    const handleCloseClick = () => {
+      setIsForceOpen == null ? void 0 : setIsForceOpen(false);
+      setIsOpen(false);
+    };
+    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_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_runtime7.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 bg-black/40",
+                  onClick: () => isClosedAble ? handleCloseClick() : null,
+                  "aria-label": "Close modal"
+                }
+              ),
+              /* @__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_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_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_runtime7.jsx)(
+                        "div",
+                        {
+                          className: "text-gray-600 text-xl absolute top-0 right-0 p-12",
+                          onClick: () => handleCloseClick(),
+                          children: "x"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
+                      children,
+                      stopModalBtn && import_react7.default.cloneElement(stopModalBtn, {
+                        onClick: handleStopClick
+                      }),
+                      afterStopBtn && afterStopBtn
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
   }
-};
+);
+BottomSheet.displayName = "BottomSheet";
+
+// src/components/Checkbox/Checkbox.tsx
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
 function CheckIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "path",
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
     {
-      d: "M13.333 4.667 6 12l-3.333-3.333",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round",
-      strokeLinejoin: "round"
+      className,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          d: "M13.333 4.667 6 12l-3.333-3.333",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }
+      )
     }
-  ) });
+  );
 }
 function IndeterminateIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { className, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
-    "path",
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    "svg",
     {
-      d: "M3.333 8h9.334",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round"
+      className,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+        "path",
+        {
+          d: "M3.333 8h9.334",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
     }
-  ) });
+  );
 }
-var Checkbox = (0, import_react6.forwardRef)(
+var Checkbox = (0, import_react8.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
-      size = "medium",
       label,
       description,
-      indeterminate = false,
       error = false,
       contrast = false,
-      checked,
-      defaultChecked,
+      indeterminate = false,
       disabled = false,
       className = "",
-      id
+      id,
+      defaultChecked
     } = _b, rest = __objRest(_b, [
-      "size",
       "label",
       "description",
-      "indeterminate",
       "error",
       "contrast",
-      "checked",
-      "defaultChecked",
+      "indeterminate",
       "disabled",
       "className",
-      "id"
+      "id",
+      "defaultChecked"
     ]);
-    const reactId = (0, import_react6.useId)();
+    const reactId = (0, import_react8.useId)();
     const inputId = id != null ? id : reactId;
-    const sz = sizeClasses5[size];
-    const isActive = checked || indeterminate;
-    const boxBase = [
-      "relative inline-flex items-center justify-center shrink-0",
-      "rounded",
-      "border",
-      "transition-colors duration-150",
-      sz.box
-    ].join(" ");
-    let boxState;
-    if (disabled) {
-      boxState = isActive ? "bg-checkbox-disabled-checked-bg border-checkbox-disabled-border text-checkbox-disabled-icon" : "bg-checkbox-disabled-bg border-checkbox-disabled-border";
-    } else if (contrast) {
-      boxState = isActive ? "bg-checkbox-contrast-checked-bg border-checkbox-contrast-checked-bg text-checkbox-contrast-checked-icon" : "bg-checkbox-contrast-bg border-checkbox-contrast-border text-transparent";
-    } else if (error) {
-      boxState = isActive ? "bg-checkbox-checked-bg border-checkbox-error-border text-checkbox-checked-icon" : "bg-checkbox-error-bg border-checkbox-error-border text-transparent";
-    } else if (isActive) {
-      boxState = "bg-checkbox-checked-bg border-checkbox-checked-border text-checkbox-checked-icon";
-    } else {
-      boxState = "bg-checkbox-bg border-checkbox-border text-transparent hover:border-checkbox-hover-border";
-    }
-    const ringColor = error ? "peer-focus-visible:ring-checkbox-error-ring" : contrast ? "peer-focus-visible:ring-checkbox-contrast-ring" : "peer-focus-visible:ring-checkbox-ring";
-    const ringClasses = `peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 ${ringColor}`;
-    const labelColor = disabled ? "text-checkbox-label-disabled" : contrast ? "text-checkbox-contrast-label" : error ? "text-checkbox-label-error" : "text-checkbox-label";
-    const descriptionColor = disabled ? "text-checkbox-label-disabled" : contrast ? "text-checkbox-contrast-description" : "text-checkbox-description";
-    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+    const [isChecked, setIsChecked] = (0, import_react8.useState)(defaultChecked != null ? defaultChecked : false);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "label",
       {
         htmlFor: inputId,
-        className: [
-          "inline-flex items-start font-sans",
-          sz.gap,
-          disabled ? "cursor-not-allowed" : "cursor-pointer",
-          className
-        ].filter(Boolean).join(" "),
+        className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "relative inline-flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative mr-16", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
               "input",
               __spreadValues({
                 ref,
                 id: inputId,
                 type: "checkbox",
-                checked,
                 defaultChecked,
+                onChange: (e) => {
+                  var _a2;
+                  setIsChecked(e.target.checked);
+                  (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
+                },
                 disabled,
-                "aria-checked": indeterminate ? "mixed" : checked,
-                className: "peer absolute inset-0 h-full w-full cursor-[inherit] opacity-0"
+                "aria-checked": indeterminate ? "mixed" : isChecked,
+                className: "sr-only"
               }, rest)
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: [boxBase, boxState, ringClasses].join(" "), children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IndeterminateIcon, { className: sz.icon }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(CheckIcon, { className: sz.icon }) : null })
+            /* @__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_runtime8.jsx)(
+                  CheckIcon,
+                  {
+                    className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
+                  }
+                ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  IndeterminateIcon,
+                  {
+                    className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
+                  }
+                ) : null
+              }
+            )
           ] }),
-          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${sz.label} font-medium ${labelColor}`, children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: `${sz.description} ${descriptionColor}`, children: description })
+          (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_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"}`,
+                children: description
+              }
+            )
           ] })
         ]
       }
@@ -795,10 +933,133 @@ var Checkbox = (0, import_react6.forwardRef)(
 );
 Checkbox.displayName = "Checkbox";
 
+// src/components/Dialog/Dialog.tsx
+var import_react9 = __toESM(require("react"));
+var import_react_dom2 = require("react-dom");
+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_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) {
+        setIsRender(true);
+        setTimeout(() => setAnimate(true), 10);
+      } else {
+        setAnimate(false);
+        const timer = setTimeout(() => setIsRender(false), 300);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+    (0, import_react9.useEffect)(() => {
+      if (isForceOpen) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    }, [isForceOpen]);
+    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);
+        setIsForceOpen == null ? void 0 : setIsForceOpen(true);
+        setIsOpen(true);
+      },
+      [startModalBtn]
+    );
+    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);
+        setIsForceOpen == null ? void 0 : setIsForceOpen(false);
+        setIsOpen(false);
+      },
+      [stopModalBtn]
+    );
+    const handleCloseClick = () => {
+      setIsForceOpen == null ? void 0 : setIsForceOpen(false);
+      setIsOpen(false);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("span", { ref, style: { display: "contents" }, children: [
+      startModalBtn && import_react9.default.cloneElement(startModalBtn, {
+        onClick: handleStartClick
+      }),
+      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_runtime9.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 bg-black/40",
+                  onClick: () => isClosedAble ? handleCloseClick() : null,
+                  "aria-label": "Close modal"
+                }
+              ),
+              /* @__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_react9.default.cloneElement(stopModalBtn, {
+                      onClick: handleStopClick
+                    }),
+                    afterStopBtn && afterStopBtn
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+Dialog.displayName = "Dialog";
+
 // src/components/Icon/Icon.tsx
-var import_react7 = require("react");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var Icon = (0, import_react7.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,
@@ -826,7 +1087,7 @@ var Icon = (0, import_react7.forwardRef)(
       "material-symbols-outlined select-none shrink-0 inline-block leading-none",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "span",
       __spreadProps(__spreadValues({
         ref,
@@ -849,114 +1110,105 @@ var Icon = (0, import_react7.forwardRef)(
 Icon.displayName = "Icon";
 
 // src/components/Radio/Radio.tsx
-var import_react8 = require("react");
-var import_jsx_runtime8 = require("react/jsx-runtime");
-var sizeClasses6 = {
-  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_react8.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_react8.useId)();
+    const reactId = (0, import_react11.useId)();
     const inputId = id != null ? id : reactId;
-    const sz = sizeClasses6[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_runtime8.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_runtime8.jsxs)("span", { className: "relative inline-flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.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_runtime8.jsx)("span", { className: [circleBase, circleState, ringClasses].join(" "), children: checked && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `rounded-full ${sz.dot} ${dotColor}` }) })
-          ] }),
-          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: `${sz.label} font-medium ${labelColor}`, children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime8.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
+                      }
+                    )
+                  ]
+                }
+              )
+            ]
+          }
+        )
       }
     );
   }
@@ -964,39 +1216,39 @@ var Radio = (0, import_react8.forwardRef)(
 Radio.displayName = "Radio";
 
 // src/components/Slider/Slider.tsx
-var import_react9 = require("react");
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 var sizeConfig = {
   small: {
-    trackH: "h-1",
+    trackH: "h-4",
     thumbPx: 24,
-    thumbClass: "h-6 w-6",
+    thumbClass: "h-24 w-24",
     iconPx: 12,
-    containerH: "h-6",
-    label: "text-sm leading-5",
-    description: "text-xs leading-4"
+    containerH: "h-24",
+    label: "text-sm leading-20",
+    description: "text-xs leading-16"
   },
   medium: {
-    trackH: "h-1.5",
+    trackH: "h-6",
     thumbPx: 28,
-    thumbClass: "h-7 w-7",
+    thumbClass: "h-28 w-28",
     iconPx: 14,
-    containerH: "h-7",
-    label: "text-base leading-6",
-    description: "text-sm leading-5"
+    containerH: "h-28",
+    label: "text-base leading-24",
+    description: "text-sm leading-20"
   },
   large: {
-    trackH: "h-2",
+    trackH: "h-8",
     thumbPx: 32,
-    thumbClass: "h-8 w-8",
+    thumbClass: "h-32 w-32",
     iconPx: 16,
-    containerH: "h-8",
-    label: "text-base leading-6",
-    description: "text-sm leading-5"
+    containerH: "h-32",
+    label: "text-base leading-24",
+    description: "text-sm leading-20"
   }
 };
 function ChevronGlyphs({ size, color }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
     "svg",
     {
       width: size,
@@ -1006,7 +1258,7 @@ function ChevronGlyphs({ size, color }) {
       xmlns: "http://www.w3.org/2000/svg",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "path",
           {
             d: "M4.75 3.25L2.25 6L4.75 8.75",
@@ -1016,7 +1268,7 @@ function ChevronGlyphs({ size, color }) {
             strokeLinejoin: "round"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
           "path",
           {
             d: "M7.25 3.25L9.75 6L7.25 8.75",
@@ -1030,7 +1282,7 @@ function ChevronGlyphs({ size, color }) {
     }
   );
 }
-var Slider = (0, import_react9.forwardRef)(
+var Slider = (0, import_react12.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = "medium",
@@ -1065,15 +1317,15 @@ var Slider = (0, import_react9.forwardRef)(
       "onChange",
       "aria-label"
     ]);
-    const reactId = (0, import_react9.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_react9.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_react9.useCallback)(
+    const handleChange = (0, import_react12.useCallback)(
       (e) => {
         const val = Number(e.target.value);
         if (!isControlled) {
@@ -1093,13 +1345,13 @@ var Slider = (0, import_react9.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_runtime9.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "div",
       {
-        className: ["flex w-full flex-col gap-2 font-sans", className].filter(Boolean).join(" "),
+        className: ["flex w-full flex-col gap-8 font-sans", className].filter(Boolean).join(" "),
         children: [
-          (label || showValue && !disabled) && /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "flex items-center justify-between", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime9.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,
@@ -1112,7 +1364,7 @@ var Slider = (0, import_react9.forwardRef)(
                 children: label
               }
             ),
-            showValue && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+            showValue && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
               "span",
               {
                 className: [sz.description, "tabular-nums", labelColor].join(" "),
@@ -1120,7 +1372,7 @@ var Slider = (0, import_react9.forwardRef)(
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "div",
             {
               className: [
@@ -1129,7 +1381,7 @@ var Slider = (0, import_react9.forwardRef)(
                 disabled ? "cursor-not-allowed" : "cursor-pointer"
               ].join(" "),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "div",
                   {
                     className: [
@@ -1139,14 +1391,14 @@ var Slider = (0, import_react9.forwardRef)(
                     ].join(" ")
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "input",
                   __spreadValues({
                     ref,
@@ -1167,7 +1419,7 @@ var Slider = (0, import_react9.forwardRef)(
                     ].join(" ")
                   }, rest)
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
                   "div",
                   {
                     className: [
@@ -1180,13 +1432,13 @@ var Slider = (0, import_react9.forwardRef)(
                       !disabled && "peer-hover:shadow-medium"
                     ].filter(Boolean).join(" "),
                     style: { left: `calc(${percent}% - ${thumbOffset}px)` },
-                    children: /* @__PURE__ */ (0, import_jsx_runtime9.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_runtime9.jsx)(
+          description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "span",
             {
               id: ariaDescriptionId,
@@ -1202,28 +1454,28 @@ var Slider = (0, import_react9.forwardRef)(
 Slider.displayName = "Slider";
 
 // src/components/Toast/Toast.tsx
-var import_react10 = require("react");
-var import_jsx_runtime10 = 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_runtime10.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.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_runtime10.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.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,
@@ -1240,7 +1492,7 @@ var iconColorClasses = {
   progress: "text-toast-progress-icon",
   error: "text-toast-error-icon"
 };
-var Toast = (0, import_react10.forwardRef)(
+var Toast = (0, import_react13.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       type = "default",
@@ -1261,33 +1513,33 @@ var Toast = (0, import_react10.forwardRef)(
     ]);
     const DefaultIcon = defaultIcons2[type];
     const classes = [
-      "inline-flex items-center gap-3 font-sans",
-      "rounded-xl px-4 py-3",
+      "inline-flex items-center gap-12 font-sans",
+      "rounded-xl px-16 py-12",
       "min-w-[320px] max-w-[480px]",
       "shadow-large",
       typeClasses[type],
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
-      icon && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DefaultIcon, { className: "h-5 w-5" }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "flex-1 text-sm font-medium leading-5 truncate", children }),
-      actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime10.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",
           onClick: onAction,
-          className: "shrink-0 text-sm font-medium text-toast-action-text hover:bg-toast-action-bg-hover rounded-md px-2 py-1 transition-colors",
+          className: "shrink-0 text-sm font-medium text-toast-action-text hover:bg-toast-action-bg-hover rounded-md px-8 py-4 transition-colors",
           children: actionLabel
         }
       ),
-      onDismiss && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      onDismiss && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
           onClick: onDismiss,
-          className: "shrink-0 p-1 rounded-md text-toast-dismiss hover:text-toast-dismiss-hover transition-colors",
+          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_runtime10.jsx)(CloseIcon2, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(CloseIcon2, { className: "h-16 w-16" })
         }
       )
     ] }));
@@ -1300,8 +1552,10 @@ Toast.displayName = "Toast";
   AlertBanner,
   Avatar,
   Badge,
+  BottomSheet,
   Button,
   Checkbox,
+  Dialog,
   Icon,
   Radio,
   Slider,