@refinn/core-ui 0.1.0 → 0.1.2

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,19 +46,467 @@ 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
 var index_exports = {};
 __export(index_exports, {
+  Accordion: () => Accordion,
+  AlertBanner: () => AlertBanner,
+  Avatar: () => Avatar,
+  Badge: () => Badge,
+  BottomSheet: () => BottomSheet,
   Button: () => Button,
-  Checkbox: () => Checkbox
+  Checkbox: () => Checkbox,
+  Dialog: () => Dialog,
+  Icon: () => Icon,
+  Radio: () => Radio,
+  Slider: () => Slider,
+  Toast: () => Toast
 });
 module.exports = __toCommonJS(index_exports);
 
-// src/components/Button/Button.tsx
+// src/components/Accordion/Accordion.tsx
 var import_react = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+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",
+    {
+      d: "M5 7.5L10 12.5L15 7.5",
+      stroke: "currentColor",
+      strokeWidth: "1.67",
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    }
+  ) });
+}
+function AccordionItem({ item, isOpen, onToggle, generatedId }) {
+  const triggerId = `${generatedId}-trigger`;
+  const panelId = `${generatedId}-panel`;
+  const iconClasses = [
+    "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-static-icon-disabled" : "text-static-icon-primary"
+  ].join(" ");
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        id: triggerId,
+        type: "button",
+        "aria-expanded": isOpen,
+        "aria-controls": panelId,
+        disabled: item.disabled,
+        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",
+              {
+                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: [
+              "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",
+      {
+        id: panelId,
+        role: "region",
+        "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: `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 }) })
+      }
+    )
+  ] });
+}
+var Accordion = (0, import_react.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      items,
+      multiple = false,
+      loading = false,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "items",
+      "multiple",
+      "loading",
+      "className"
+    ]);
+    const baseId = (0, import_react.useId)();
+    const defaultOpen = () => {
+      const set = /* @__PURE__ */ new Set();
+      items.forEach((item, i) => {
+        var _a2;
+        if (item.defaultOpen) set.add((_a2 = item.id) != null ? _a2 : String(i));
+      });
+      return set;
+    };
+    const [openItems, setOpenItems] = (0, import_react.useState)(defaultOpen);
+    const handleToggle = (0, import_react.useCallback)(
+      (itemId) => {
+        setOpenItems((prev) => {
+          const next = new Set(multiple ? prev : []);
+          if (prev.has(itemId)) {
+            next.delete(itemId);
+          } else {
+            next.add(itemId);
+          }
+          return next;
+        });
+      },
+      [multiple]
+    );
+    const containerClasses = [
+      "rounded-lg border border-accordion-border bg-accordion-bg font-sans",
+      "divide-y divide-accordion-border",
+      className
+    ].filter(Boolean).join(" ");
+    if (loading) {
+      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) => {
+      var _a2;
+      const itemId = (_a2 = item.id) != null ? _a2 : String(i);
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        AccordionItem,
+        {
+          item,
+          isOpen: openItems.has(itemId),
+          onToggle: () => handleToggle(itemId),
+          generatedId: `${baseId}-${itemId}`
+        },
+        itemId
+      );
+    }) }));
+  }
+);
+Accordion.displayName = "Accordion";
+
+// src/components/AlertBanner/AlertBanner.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+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",
+  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",
+  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" }) });
+}
+function SuccessIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("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 16Z", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function WarningIcon({ 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: "M8.57 3.22 1.53 15.5a1.67 1.67 0 0 0 1.43 2.5h14.08a1.67 1.67 0 0 0 1.43-2.5L11.43 3.22a1.67 1.67 0 0 0-2.86 0ZM10 7.5v3.33M10 14.17h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+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 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" }) });
+}
+var defaultIcons = {
+  info: InfoIcon,
+  success: SuccessIcon,
+  warning: WarningIcon,
+  danger: DangerIcon,
+  none: NoneIcon
+};
+var AlertBanner = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "info",
+      mode = "inline",
+      title,
+      description,
+      action,
+      icon,
+      onClose,
+      className = "",
+      children
+    } = _b, rest = __objRest(_b, [
+      "variant",
+      "mode",
+      "title",
+      "description",
+      "action",
+      "icon",
+      "onClose",
+      "className",
+      "children"
+    ]);
+    const isPage = mode === "page";
+    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-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.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
+        ] })
+      ] }),
+      /* @__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" })
+          }
+        )
+      ] })
+    ] }));
+  }
+);
+AlertBanner.displayName = "AlertBanner";
+
+// src/components/Avatar/Avatar.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+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",
+  "": ""
+};
+function getInitials(name) {
+  const parts = name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0][0].toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+}
+function PersonIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { className, viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M10 10a3.75 3.75 0 1 0 0-7.5 3.75 3.75 0 0 0 0 7.5ZM3.75 17.5a6.25 6.25 0 0 1 12.5 0" }) });
+}
+var Avatar = (0, import_react3.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "md",
+      src,
+      alt = "",
+      name,
+      icon,
+      status,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "size",
+      "src",
+      "alt",
+      "name",
+      "icon",
+      "status",
+      "className"
+    ]);
+    const sz = sizeClasses[size];
+    const containerClasses = [
+      "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,
+      className
+    ].filter(Boolean).join(" ");
+    let content;
+    if (src) {
+      content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "img",
+        {
+          src,
+          alt: alt || name || "",
+          className: "h-full w-full object-cover rounded-full"
+        }
+      );
+    } else if (icon) {
+      content = icon;
+    } else if (name) {
+      content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: sz.text, children: getInitials(name) });
+    } else {
+      content = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PersonIcon, { className: `${sz.text} h-[60%] w-[60%]` });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", __spreadProps(__spreadValues({ ref, className: containerClasses }, rest), { children: [
+      content,
+      status && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+        "span",
+        {
+          className: [
+            "absolute bottom-0 right-0 block rounded-full",
+            "ring-avatar-status-border",
+            sz.status,
+            sz.statusRing,
+            statusColorClasses[status]
+          ].join(" ")
+        }
+      )
+    ] }));
+  }
+);
+Avatar.displayName = "Avatar";
+
+// src/components/Badge/Badge.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+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-16 w-16",
+  md: "h-20 w-20",
+  lg: "h-24 w-24"
+};
+var minimalClasses = {
+  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-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-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 Badge = (0, import_react4.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      status = "common",
+      badgeStyle = "subtle",
+      size = "md",
+      shape = "round",
+      icon,
+      children,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "status",
+      "badgeStyle",
+      "size",
+      "shape",
+      "icon",
+      "children",
+      "className"
+    ]);
+    const classes = [
+      "inline-flex items-center justify-center font-medium font-sans",
+      "whitespace-nowrap select-none",
+      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: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: `shrink-0 ${iconSizeClasses[size]}`, children: icon }),
+      children
+    ] }));
+  }
+);
+Badge.displayName = "Badge";
+
+// src/components/Button/Button.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var variantClasses = {
   primary: [
     "bg-btn-primary text-btn-primary-text",
@@ -94,14 +544,14 @@ var variantClasses = {
     "disabled:bg-btn-transparent-disabled disabled:text-btn-transparent-text-disabled"
   ].join(" ")
 };
-var sizeClasses = {
-  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 = {
+  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"
 };
 function Spinner({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "svg",
     {
       className,
@@ -109,7 +559,7 @@ function Spinner({ className }) {
       height: "1em",
       viewBox: "0 0 20 20",
       fill: "none",
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         "path",
         {
           d: "M10 2.5a7.5 7.5 0 1 0 7.5 7.5",
@@ -121,7 +571,7 @@ function Spinner({ className }) {
     }
   );
 }
-var Button = (0, import_react.forwardRef)(
+var Button = (0, import_react5.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       variant = "primary",
@@ -150,12 +600,12 @@ var Button = (0, import_react.forwardRef)(
       "transition-colors duration-150",
       "outline-none",
       "disabled:cursor-not-allowed",
-      sizeClasses[size],
+      sizeClasses3[size],
       variantClasses[variant],
       rounded ? "rounded-full" : "rounded-lg",
       className
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
       "button",
       __spreadProps(__spreadValues({
         ref,
@@ -163,7 +613,7 @@ var Button = (0, import_react.forwardRef)(
         className: classes
       }, rest), {
         children: [
-          loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, { className: "animate-spin" }) : startIcon,
+          loading ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { className: "animate-spin" }) : startIcon,
           children,
           !loading && endIcon
         ]
@@ -173,55 +623,460 @@ var Button = (0, import_react.forwardRef)(
 );
 Button.displayName = "Button";
 
+// src/components/BottomSheet/BottomSheet.tsx
+var import_react6 = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var BottomSheet = (0, import_react6.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_react6.useState)(false);
+    const [shouldRender, setShouldRender] = (0, import_react6.useState)(false);
+    const [animate, setAnimate] = (0, import_react6.useState)(false);
+    (0, import_react6.useEffect)(() => {
+      if (isOpen) {
+        setShouldRender(true);
+        setTimeout(() => setAnimate(true), 10);
+      } else {
+        setAnimate(false);
+        const timer = setTimeout(() => setShouldRender(false), 300);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+    (0, import_react6.useEffect)(() => {
+      if (isForceOpen) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    }, [isForceOpen]);
+    const handleStartClick = (0, import_react6.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_react6.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_runtime6.jsxs)("span", { ref, style: { display: "contents" }, children: [
+      startModalBtn && import_react6.default.cloneElement(startModalBtn, {
+        onClick: handleStartClick
+      }),
+      shouldRender && (0, import_react_dom.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+          "div",
+          {
+            className: `fixed inset-0 z-50 flex items-end justify-center transition-opacity duration-300 ${animate ? "opacity-100" : "opacity-0"}`,
+            "aria-modal": "true",
+            role: "dialog",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 bg-black/40",
+                  onClick: () => isClosedAble ? handleCloseClick() : null,
+                  "aria-label": "Close modal"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                "div",
+                {
+                  className: `flex flex-col z-10 w-full rounded-t-xl bg-white pt-8 pb-16 px-16 shadow-lg transform transition-all duration-300 
+                ${size === "sm" ? "h-auto max-h-auto" : size === "md" ? "h-full max-h-[85vh]" : "h-full max-h-screen rounded-t-none!"}
+                ${animate ? "scale-100 translate-y-0" : "scale-95 translate-y-full"}`,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full flex flex-row relative items-center pt-8 pb-16", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex flex-col px-8 max-w-225", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-heading-3 text-button-sheet-text-primary", children: modalTitle }),
+                        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "text-body-small text-button-sheet-text-secondary", children: modalDesc })
+                      ] }),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "i",
+                        {
+                          className: "fi fi-br-cross-small flex text-xl text-gray-600 w-44 h-44 absolute top-0 right-0 p-12",
+                          onClick: () => handleCloseClick()
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+                        "div",
+                        {
+                          className: "text-gray-600 text-xl absolute top-0 right-0 p-12",
+                          onClick: () => handleCloseClick(),
+                          children: "x"
+                        }
+                      )
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "w-full h-full grow overflow-y-auto overflow-x-visible", children: [
+                      children,
+                      stopModalBtn && import_react6.default.cloneElement(stopModalBtn, {
+                        onClick: handleStopClick
+                      }),
+                      afterStopBtn && afterStopBtn
+                    ] })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+BottomSheet.displayName = "BottomSheet";
+
 // src/components/Checkbox/Checkbox.tsx
-var import_react2 = require("react");
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var sizeClasses2 = {
+var import_react7 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function CheckIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.jsx)(
+    "svg",
+    {
+      className,
+      viewBox: "0 0 16 16",
+      fill: "none",
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+        "path",
+        {
+          d: "M3.333 8h9.334",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    }
+  );
+}
+var Checkbox = (0, import_react7.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      label,
+      description,
+      error = false,
+      contrast = false,
+      indeterminate = false,
+      disabled = false,
+      className = "",
+      id,
+      defaultChecked
+    } = _b, rest = __objRest(_b, [
+      "label",
+      "description",
+      "error",
+      "contrast",
+      "indeterminate",
+      "disabled",
+      "className",
+      "id",
+      "defaultChecked"
+    ]);
+    const reactId = (0, import_react7.useId)();
+    const inputId = id != null ? id : reactId;
+    const [isChecked, setIsChecked] = (0, import_react7.useState)(defaultChecked != null ? defaultChecked : false);
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "label",
+      {
+        htmlFor: inputId,
+        className: `flex select-none font-sans ${disabled ? "cursor-not-allowed" : "cursor-pointer"} ${className}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative mr-16", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "input",
+              __spreadValues({
+                ref,
+                id: inputId,
+                type: "checkbox",
+                defaultChecked,
+                onChange: (e) => {
+                  var _a2;
+                  setIsChecked(e.target.checked);
+                  (_a2 = rest.onChange) == null ? void 0 : _a2.call(rest, e);
+                },
+                disabled,
+                "aria-checked": indeterminate ? "mixed" : isChecked,
+                className: "sr-only"
+              }, rest)
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "div",
+              {
+                className: `box m-6 flex h-20 w-20 rounded-md items-center justify-center border ${contrast ? isChecked || indeterminate ? "border-white bg-white" : "border-white" : isChecked || indeterminate ? "bg-static-icon-brand border-static-icon-brand" : "border-static-icon-primary"}`,
+                children: isChecked ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  CheckIcon,
+                  {
+                    className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
+                  }
+                ) : indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                  IndeterminateIcon,
+                  {
+                    className: `h-20 ${contrast ? "text-static-icon-brand" : "text-white"}`
+                  }
+                ) : null
+              }
+            )
+          ] }),
+          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "span",
+              {
+                className: `text-label-large ${disabled ? "text-checkbox-text-disabled" : contrast ? "text-checkbox-text-primary-inverse" : "text-checkbox-text-primary"}`,
+                children: label
+              }
+            ),
+            description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "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
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/components/Dialog/Dialog.tsx
+var import_react8 = __toESM(require("react"));
+var import_react_dom2 = require("react-dom");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Dialog = (0, import_react8.forwardRef)(
+  ({
+    isForceOpen = false,
+    setIsForceOpen,
+    isClosedAble = true,
+    children,
+    startModalBtn,
+    stopModalBtn,
+    afterStopBtn,
+    p = "20"
+  }, ref) => {
+    const [isOpen, setIsOpen] = (0, import_react8.useState)(false);
+    const [shouldRender, setShouldRender] = (0, import_react8.useState)(false);
+    const [animate, setAnimate] = (0, import_react8.useState)(false);
+    (0, import_react8.useEffect)(() => {
+      if (isOpen) {
+        setShouldRender(true);
+        setTimeout(() => setAnimate(true), 10);
+      } else {
+        setAnimate(false);
+        const timer = setTimeout(() => setShouldRender(false), 300);
+        return () => clearTimeout(timer);
+      }
+    }, [isOpen]);
+    (0, import_react8.useEffect)(() => {
+      if (isForceOpen) {
+        setIsOpen(true);
+      } else {
+        setIsOpen(false);
+      }
+    }, [isForceOpen]);
+    const handleStartClick = (0, import_react8.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_react8.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_runtime8.jsxs)("span", { ref, style: { display: "contents" }, children: [
+      startModalBtn && import_react8.default.cloneElement(startModalBtn, {
+        onClick: handleStartClick
+      }),
+      shouldRender && (0, import_react_dom2.createPortal)(
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "div",
+          {
+            className: `fixed inset-0 z-50 flex items-center justify-center transition-opacity duration-300 ${animate ? "opacity-100" : "opacity-0"}`,
+            "aria-modal": "true",
+            role: "dialog",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 bg-black/40",
+                  onClick: () => isClosedAble ? handleCloseClick() : null,
+                  "aria-label": "Close modal"
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime8.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: [
+                    children,
+                    stopModalBtn && import_react8.default.cloneElement(stopModalBtn, {
+                      onClick: handleStopClick
+                    }),
+                    afterStopBtn && afterStopBtn
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        document.body
+      )
+    ] });
+  }
+);
+Dialog.displayName = "Dialog";
+
+// src/components/Icon/Icon.tsx
+var import_react9 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var Icon = (0, import_react9.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      name,
+      size = 20,
+      weight = 300,
+      fill = false,
+      grade = 0,
+      opticalSize,
+      className = "",
+      style,
+      "aria-label": ariaLabel
+    } = _b, rest = __objRest(_b, [
+      "name",
+      "size",
+      "weight",
+      "fill",
+      "grade",
+      "opticalSize",
+      "className",
+      "style",
+      "aria-label"
+    ]);
+    const opsz = opticalSize != null ? opticalSize : size === 16 ? 20 : size === 20 ? 20 : 24;
+    const classes = [
+      "material-symbols-outlined select-none shrink-0 inline-block leading-none",
+      className
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "span",
+      __spreadProps(__spreadValues({
+        ref,
+        className: classes,
+        "aria-hidden": ariaLabel ? void 0 : true,
+        "aria-label": ariaLabel,
+        role: ariaLabel ? "img" : void 0,
+        style: __spreadValues({
+          fontSize: `${size}px`,
+          width: `${size}px`,
+          height: `${size}px`,
+          fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'opsz' ${opsz}`
+        }, style)
+      }, rest), {
+        children: name
+      })
+    );
+  }
+);
+Icon.displayName = "Icon";
+
+// src/components/Radio/Radio.tsx
+var import_react10 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var sizeClasses4 = {
   small: {
     box: "h-4 w-4",
-    icon: "h-3 w-3",
+    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",
-    icon: "h-3.5 w-3.5",
+    dot: "h-2 w-2",
     label: "text-base leading-6",
     description: "text-sm leading-5",
     gap: "gap-2.5"
   }
 };
-function CheckIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("svg", { className, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("svg", { className, viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    "path",
-    {
-      d: "M3.333 8h9.334",
-      stroke: "currentColor",
-      strokeWidth: "2",
-      strokeLinecap: "round"
-    }
-  ) });
-}
-var Checkbox = (0, import_react2.forwardRef)(
+var Radio = (0, import_react10.forwardRef)(
   (_a, ref) => {
     var _b = _a, {
       size = "medium",
       label,
       description,
-      indeterminate = false,
       error = false,
       contrast = false,
       checked,
@@ -233,7 +1088,6 @@ var Checkbox = (0, import_react2.forwardRef)(
       "size",
       "label",
       "description",
-      "indeterminate",
       "error",
       "contrast",
       "checked",
@@ -242,34 +1096,41 @@ var Checkbox = (0, import_react2.forwardRef)(
       "className",
       "id"
     ]);
-    const reactId = (0, import_react2.useId)();
+    const reactId = (0, import_react10.useId)();
     const inputId = id != null ? id : reactId;
-    const sz = sizeClasses2[size];
-    const isActive = checked || indeterminate;
-    const boxBase = [
+    const sz = sizeClasses4[size];
+    const circleBase = [
       "relative inline-flex items-center justify-center shrink-0",
-      "rounded",
+      "rounded-full",
       "border",
       "transition-colors duration-150",
       sz.box
     ].join(" ");
-    let boxState;
+    let circleState;
     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";
+      circleState = checked ? "bg-radio-disabled-selected-bg border-radio-disabled-border" : "bg-radio-disabled-bg border-radio-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";
+      circleState = checked ? "bg-radio-contrast-selected-bg border-radio-contrast-selected-bg" : "bg-radio-contrast-bg border-radio-contrast-border";
     } 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";
+      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 {
-      boxState = "bg-checkbox-bg border-checkbox-border text-transparent hover:border-checkbox-hover-border";
+      circleState = "bg-radio-bg border-radio-border hover:border-radio-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 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}`;
-    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_runtime2.jsxs)(
+    let dotColor;
+    if (disabled) {
+      dotColor = "bg-radio-disabled-dot";
+    } else if (contrast) {
+      dotColor = "bg-radio-contrast-selected-dot";
+    } else {
+      dotColor = "bg-radio-selected-dot";
+    }
+    const labelColor = disabled ? "text-radio-label-disabled" : contrast ? "text-radio-contrast-label" : error ? "text-radio-label-error" : "text-radio-label";
+    const descriptionColor = disabled ? "text-radio-label-disabled" : contrast ? "text-radio-contrast-description" : "text-radio-description";
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
       "label",
       {
         htmlFor: inputId,
@@ -280,34 +1141,375 @@ var Checkbox = (0, import_react2.forwardRef)(
           className
         ].filter(Boolean).join(" "),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "relative inline-flex", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "relative inline-flex", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
               "input",
               __spreadValues({
                 ref,
                 id: inputId,
-                type: "checkbox",
+                type: "radio",
                 checked,
                 defaultChecked,
                 disabled,
-                "aria-checked": indeterminate ? "mixed" : checked,
                 className: "peer absolute inset-0 h-full w-full cursor-[inherit] opacity-0"
               }, rest)
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: [boxBase, boxState, ringClasses].join(" "), children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(IndeterminateIcon, { className: sz.icon }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CheckIcon, { className: sz.icon }) : null })
+            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: [circleBase, circleState, ringClasses].join(" "), children: checked && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `rounded-full ${sz.dot} ${dotColor}` }) })
           ] }),
-          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "flex flex-col", children: [
-            label && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${sz.label} font-medium ${labelColor}`, children: label }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: `${sz.description} ${descriptionColor}`, children: description })
+          (label || description) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex flex-col", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${sz.label} font-medium ${labelColor}`, children: label }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: `${sz.description} ${descriptionColor}`, children: description })
           ] })
         ]
       }
     );
   }
 );
-Checkbox.displayName = "Checkbox";
+Radio.displayName = "Radio";
+
+// src/components/Slider/Slider.tsx
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var sizeConfig = {
+  small: {
+    trackH: "h-4",
+    thumbPx: 24,
+    thumbClass: "h-24 w-24",
+    iconPx: 12,
+    containerH: "h-24",
+    label: "text-sm leading-20",
+    description: "text-xs leading-16"
+  },
+  medium: {
+    trackH: "h-6",
+    thumbPx: 28,
+    thumbClass: "h-28 w-28",
+    iconPx: 14,
+    containerH: "h-28",
+    label: "text-base leading-24",
+    description: "text-sm leading-20"
+  },
+  large: {
+    trackH: "h-8",
+    thumbPx: 32,
+    thumbClass: "h-32 w-32",
+    iconPx: 16,
+    containerH: "h-32",
+    label: "text-base leading-24",
+    description: "text-sm leading-20"
+  }
+};
+function ChevronGlyphs({ size, color }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 12 12",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "path",
+          {
+            d: "M4.75 3.25L2.25 6L4.75 8.75",
+            stroke: color,
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          "path",
+          {
+            d: "M7.25 3.25L9.75 6L7.25 8.75",
+            stroke: color,
+            strokeWidth: "1.25",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+var Slider = (0, import_react11.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      size = "medium",
+      label,
+      description,
+      error = false,
+      showValue = false,
+      min = 0,
+      max = 100,
+      step = 1,
+      value: controlledValue,
+      defaultValue,
+      disabled = false,
+      className = "",
+      id,
+      onChange,
+      "aria-label": ariaLabelProp
+    } = _b, rest = __objRest(_b, [
+      "size",
+      "label",
+      "description",
+      "error",
+      "showValue",
+      "min",
+      "max",
+      "step",
+      "value",
+      "defaultValue",
+      "disabled",
+      "className",
+      "id",
+      "onChange",
+      "aria-label"
+    ]);
+    const reactId = (0, import_react11.useId)();
+    const inputId = id != null ? id : reactId;
+    const sz = sizeConfig[size];
+    const ariaLabel = ariaLabelProp != null ? ariaLabelProp : typeof label === "string" ? void 0 : "Slider";
+    const ariaDescriptionId = description ? `${inputId}-description` : void 0;
+    const isControlled = controlledValue !== void 0;
+    const [internalValue, setInternalValue] = (0, import_react11.useState)(defaultValue != null ? defaultValue : min);
+    const currentValue = isControlled ? controlledValue : internalValue;
+    const handleChange = (0, import_react11.useCallback)(
+      (e) => {
+        const val = Number(e.target.value);
+        if (!isControlled) {
+          setInternalValue(val);
+        }
+        onChange == null ? void 0 : onChange(val, e);
+      },
+      [isControlled, onChange]
+    );
+    const percent = (currentValue - min) / (max - min) * 100;
+    const trackBg = disabled ? "bg-slider-track-disabled" : "bg-slider-track";
+    const fillBg = disabled ? "bg-slider-fill-disabled" : error ? "bg-slider-fill-error" : "bg-slider-fill";
+    const thumbBorder = disabled ? "border-slider-thumb-border-disabled" : error ? "border-slider-thumb-border-error" : "border-gray-200";
+    const thumbBg = disabled ? "bg-slider-thumb-disabled" : "bg-slider-thumb";
+    const iconColor = disabled ? "var(--color-gray-400)" : "var(--color-gray-500)";
+    const labelColor = disabled ? "text-slider-label-disabled" : error ? "text-slider-label-error" : "text-slider-label";
+    const descriptionColor = disabled ? "text-slider-label-disabled" : "text-slider-description";
+    const thumbOffset = percent * sz.thumbPx / 100;
+    const fillOffset = sz.thumbPx / 2 - thumbOffset;
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+      "div",
+      {
+        className: ["flex w-full flex-col gap-8 font-sans", className].filter(Boolean).join(" "),
+        children: [
+          (label || showValue && !disabled) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex items-center justify-between", children: [
+            label && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "label",
+              {
+                htmlFor: inputId,
+                className: [
+                  sz.label,
+                  "font-medium",
+                  labelColor,
+                  disabled ? "cursor-not-allowed" : "cursor-default"
+                ].join(" "),
+                children: label
+              }
+            ),
+            showValue && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+              "span",
+              {
+                className: [sz.description, "tabular-nums", labelColor].join(" "),
+                children: currentValue
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "div",
+            {
+              className: [
+                "relative flex items-center",
+                sz.containerH,
+                disabled ? "cursor-not-allowed" : "cursor-pointer"
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "div",
+                  {
+                    className: [
+                      "absolute inset-x-0 rounded-full",
+                      sz.trackH,
+                      trackBg
+                    ].join(" ")
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "div",
+                  {
+                    className: ["absolute left-0 rounded-full", sz.trackH, fillBg].join(" "),
+                    style: { width: `calc(${percent}% + ${fillOffset}px)` }
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "input",
+                  __spreadValues({
+                    ref,
+                    id: inputId,
+                    type: "range",
+                    min,
+                    max,
+                    step,
+                    value: currentValue,
+                    disabled,
+                    onChange: handleChange,
+                    "aria-label": ariaLabel,
+                    "aria-describedby": ariaDescriptionId,
+                    className: [
+                      "peer absolute inset-0 z-20 w-full appearance-none bg-transparent opacity-0",
+                      disabled ? "cursor-not-allowed" : "cursor-pointer",
+                      "focus:outline-none"
+                    ].join(" ")
+                  }, rest)
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  "div",
+                  {
+                    className: [
+                      "pointer-events-none absolute z-10 flex items-center justify-center rounded-full border",
+                      sz.thumbClass,
+                      thumbBg,
+                      thumbBorder,
+                      disabled ? "" : "shadow-base transition-shadow duration-150",
+                      !disabled && (error ? "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-slider-ring-error" : "peer-focus-visible:ring-2 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-slider-ring"),
+                      !disabled && "peer-hover:shadow-medium"
+                    ].filter(Boolean).join(" "),
+                    style: { left: `calc(${percent}% - ${thumbOffset}px)` },
+                    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronGlyphs, { size: sz.iconPx, color: iconColor })
+                  }
+                )
+              ]
+            }
+          ),
+          description && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+            "span",
+            {
+              id: ariaDescriptionId,
+              className: [sz.description, descriptionColor].join(" "),
+              children: description
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Slider.displayName = "Slider";
+
+// src/components/Toast/Toast.tsx
+var import_react12 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function CheckCircleIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m7 10 2 2 4-4", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function ProgressIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5", opacity: "0.3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 2a8 8 0 0 1 8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("animateTransform", { attributeName: "transform", type: "rotate", from: "0 10 10", to: "360 10 10", dur: "1s", repeatCount: "indefinite" }) })
+  ] });
+}
+function ErrorIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("svg", { className, width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "10", cy: "10", r: "8", stroke: "currentColor", strokeWidth: "1.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M10 6.5v4M10 13.5h.01", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round" })
+  ] });
+}
+function CloseIcon2({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { className, width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 4 4 12M4 4l8 8", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+var defaultIcons2 = {
+  default: CheckCircleIcon,
+  progress: ProgressIcon,
+  error: ErrorIcon
+};
+var typeClasses = {
+  default: "bg-toast-default-bg text-toast-default-text",
+  progress: "bg-toast-progress-bg text-toast-progress-text",
+  error: "bg-toast-error-bg text-toast-error-text"
+};
+var iconColorClasses = {
+  default: "text-toast-default-icon",
+  progress: "text-toast-progress-icon",
+  error: "text-toast-error-icon"
+};
+var Toast = (0, import_react12.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, {
+      type = "default",
+      icon = true,
+      actionLabel,
+      onAction,
+      onDismiss,
+      children,
+      className = ""
+    } = _b, rest = __objRest(_b, [
+      "type",
+      "icon",
+      "actionLabel",
+      "onAction",
+      "onDismiss",
+      "children",
+      "className"
+    ]);
+    const DefaultIcon = defaultIcons2[type];
+    const classes = [
+      "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_runtime12.jsxs)("div", __spreadProps(__spreadValues({ ref, role: "alert", className: classes }, rest), { children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: `shrink-0 ${iconColorClasses[type]}`, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DefaultIcon, { className: "h-20 w-20" }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "flex-1 text-sm font-medium leading-20 truncate", children }),
+      actionLabel && onAction && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "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-8 py-4 transition-colors",
+          children: actionLabel
+        }
+      ),
+      onDismiss && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          onClick: onDismiss,
+          className: "shrink-0 p-4 rounded-md text-toast-dismiss hover:text-toast-dismiss-hover transition-colors",
+          "aria-label": "Dismiss",
+          children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CloseIcon2, { className: "h-16 w-16" })
+        }
+      )
+    ] }));
+  }
+);
+Toast.displayName = "Toast";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Accordion,
+  AlertBanner,
+  Avatar,
+  Badge,
+  BottomSheet,
   Button,
-  Checkbox
+  Checkbox,
+  Dialog,
+  Icon,
+  Radio,
+  Slider,
+  Toast
 });