@bigtablet/design-system 1.23.0 → 1.24.1

package/dist/index.js

@@ -1,117 +1,109 @@
 "use client";
 import './index.css';
-import * as React7 from 'react';
+import * as React9 from 'react';
 import { createContext, useContext, useState, useCallback } from 'react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { ChevronDown, Check, X, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
 
-// src/styles/ts/colors.ts
-var colors = {
-  primary: "#000000",
-  primaryHover: "#333333",
-  background: "#ffffff",
-  backgroundSecondary: "#fafafa",
-  backgroundNeutral: "#f3f3f3",
-  backgroundMuted: "#f0f0f0",
-  textPrimary: "#1a1a1a",
-  textSecondary: "#666666",
-  textTertiary: "#999999",
-  border: "#e5e5e5",
-  borderLight: "rgba(0, 0, 0, 0.08)",
-  success: "#10b981",
-  error: "#ef4444",
-  warning: "#f59e0b",
-  info: "#3b82f6",
-  overlay: "rgba(0, 0, 0, 0.5)",
-  hoverSubtle: "rgba(0, 0, 0, 0.03)",
-  hoverLight: "rgba(0, 0, 0, 0.05)",
-  textStrong: "#1F2937",
-  textNormal: "#3B3B3B",
-  textSubtle: "#6B7280",
-  textDisabled: "#9CA3AF",
-  textInverse: "#FFFFFF"
+// src/styles/ts/a11y.ts
+var a11y = {
+  focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)",
+  focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)",
+  focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)",
+  tapMinSize: "44px"
 };
 
-// src/styles/ts/spacing.ts
-var spacing = {
-  xs: "0.25rem",
-  // 4px
-  sm: "0.5rem",
-  // 8px
-  md: "0.75rem",
-  // 12px
-  lg: "1rem",
-  // 16px
-  xl: "1.25rem",
-  // 20px
-  "2xl": "1.5rem",
-  // 24px
-  "3xl": "2rem",
-  // 32px
-  "4xl": "2.5rem",
-  // 40px
-  "5xl": "3rem"
-  // 48px
+// src/styles/ts/border-width.ts
+var baseBorderWidth = {
+  "0": "0px",
+  "1": "1px",
+  "2": "2px"
+};
+var borderWidth = {
+  none: baseBorderWidth["0"],
+  standard: baseBorderWidth["1"],
+  indicator: baseBorderWidth["2"]
 };
 
-// src/styles/ts/typography.ts
-var typography = {
-  fontFamily: {
-    primary: "'Pretendard', sans-serif"
+// src/styles/ts/breakpoints.ts
+var breakpoints = {
+  compact: 0,
+  // mobile
+  medium: 600,
+  // tablet
+  expanded: 840,
+  // small desktop
+  large: 1200
+  // desktop
+};
+
+// src/styles/ts/colors.ts
+var baseColors = {
+  brandPrimary: "#121212",
+  blue600: "#1A73E8",
+  neutral0: "#FFFFFF",
+  neutral50: "#F4F4F4",
+  neutral200: "#E5E5E5",
+  neutral300: "#999999",
+  neutral400: "#B3B3B3",
+  neutral500: "#888888",
+  neutral700: "#666666",
+  neutral900: "#121212",
+  statusError: "#EF4444",
+  statusSuccess: "#10B981",
+  statusWarning: "#F59E0B",
+  statusInfo: "#3B82F6",
+  alphaBlack5: "rgba(0, 0, 0, 0.05)",
+  alphaBlack8: "rgba(0, 0, 0, 0.08)",
+  alphaBlack12: "rgba(26, 26, 26, 0.12)",
+  alphaBlack38: "rgba(26, 26, 26, 0.38)",
+  alphaBlack50: "rgba(0, 0, 0, 0.50)",
+  alphaWhite5: "rgba(255, 255, 255, 0.05)",
+  alphaWhite8: "rgba(255, 255, 255, 0.08)",
+  alphaWhite12: "rgba(255, 255, 255, 0.12)"
+};
+var colors = {
+  brand: {
+    primary: baseColors.brandPrimary,
+    onPrimary: baseColors.neutral0
   },
-  fontSize: {
-    xs: "0.75rem",
-    sm: "0.875rem",
-    base: "0.9375rem",
-    md: "1rem",
-    lg: "1.125rem",
-    xl: "1.25rem",
-    "2xl": "1.5rem",
-    "3xl": "2rem",
-    "4xl": "2.5rem"
+  text: {
+    heading: baseColors.neutral900,
+    body: baseColors.neutral700,
+    caption: baseColors.neutral500,
+    brand: baseColors.brandPrimary,
+    inverse: baseColors.neutral0,
+    disabled: baseColors.alphaBlack38
   },
-  fontWeight: {
-    thin: 100,
-    extralight: 200,
-    light: 300,
-    regular: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-    black: 900
+  bg: {
+    solid: baseColors.neutral0,
+    solidDim: baseColors.neutral50,
+    additive: baseColors.alphaBlack5,
+    disabled: baseColors.alphaBlack12,
+    overlay: baseColors.alphaBlack50
   },
-  lineHeight: {
-    tight: 1.25,
-    snug: 1.3,
-    normal: 1.5,
-    relaxed: 1.75
+  state: {
+    hoverOnLight: baseColors.alphaBlack5,
+    pressedOnLight: baseColors.alphaBlack12,
+    hoverOnDark: baseColors.alphaWhite5,
+    pressedOnDark: baseColors.alphaWhite12
   },
-  letterSpacing: {
-    tight: "-0.02em",
-    normal: "0",
-    wide: "0.02em"
+  border: {
+    default: baseColors.neutral200,
+    hover: baseColors.neutral400,
+    subtle: baseColors.alphaBlack8,
+    focus: baseColors.neutral900,
+    disabled: "#F2F2F2"
+  },
+  status: {
+    error: baseColors.statusError,
+    success: baseColors.statusSuccess,
+    warning: baseColors.statusWarning,
+    info: baseColors.statusInfo
   }
 };
 
-// src/styles/ts/radius.ts
-var radius = {
-  sm: "6px",
-  md: "8px",
-  lg: "12px",
-  xl: "16px",
-  full: "9999px"
-};
-
-// src/styles/ts/shadows.ts
-var shadows = {
-  sm: "0 2px 4px rgba(0, 0, 0, 0.04)",
-  md: "0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04)",
-  lg: "0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06)",
-  xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)"
-};
-
 // src/styles/ts/motion.ts
 var motion = {
   transition: {
@@ -127,25 +119,77 @@ var motion = {
   }
 };
 
+// src/styles/ts/opacity.ts
+var opacity = {
+  "0": 0,
+  "5": 0.05,
+  "8": 0.08,
+  "12": 0.12,
+  "16": 0.16,
+  "38": 0.38,
+  "50": 0.5,
+  "80": 0.8,
+  "90": 0.9,
+  "100": 1
+};
+
+// src/styles/ts/radius.ts
+var radius = {
+  none: "0px",
+  xs: "4px",
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  full: "9999px"
+};
+
+// src/styles/ts/shadows.ts
+var shadows = {
+  level1: "0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12)",
+  level2: "0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12)",
+  level3: "0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12)",
+  level4: "0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12)",
+  level5: "0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)"
+};
+
+// src/styles/ts/spacing.ts
+var spacing = {
+  "0": "0px",
+  "1": "1px",
+  "2": "2px",
+  "3": "3px",
+  "4": "4px",
+  "6": "6px",
+  "8": "8px",
+  "12": "12px",
+  "16": "16px",
+  "20": "20px",
+  "24": "24px",
+  "32": "32px",
+  "40": "40px",
+  "48": "48px"
+};
+
 // src/styles/ts/skeleton.ts
 var skeleton = {
   color: {
-    base: colors.backgroundNeutral,
-    wave: colors.backgroundMuted,
-    highlight: colors.backgroundSecondary
+    base: baseColors.neutral50,
+    wave: baseColors.neutral200,
+    highlight: baseColors.neutral0
   },
-  gradient: `linear-gradient(90deg, ${colors.backgroundNeutral} 25%, ${colors.backgroundSecondary} 37%, ${colors.backgroundMuted} 63%)`,
+  gradient: `linear-gradient(90deg, ${baseColors.neutral50} 25%, ${baseColors.neutral0} 37%, ${baseColors.neutral200} 63%)`,
   radius: {
     sm: radius.sm,
     md: radius.md,
     lg: radius.lg
   },
   height: {
-    xs: spacing.xs,
-    sm: spacing.sm,
-    md: spacing.md,
-    lg: spacing.lg,
-    xl: spacing.xl
+    xs: spacing["4"],
+    sm: spacing["8"],
+    md: spacing["12"],
+    lg: spacing["16"],
+    xl: spacing["20"]
   },
   animation: {
     duration: "1.4s",
@@ -153,31 +197,251 @@ var skeleton = {
   }
 };
 
-// src/styles/ts/breakpoints.ts
-var breakpoints = {
-  mobile: 0,
-  // ~767
-  tablet: 768,
-  // 768 ~ 1023
-  laptop: 1024,
-  // 1024 ~ 1439
-  desktop: 1440
-  // 1440+
+// src/styles/ts/typography.ts
+var baseTypography = {
+  fontFamily: {
+    primary: "Pretendard"
+  },
+  fontSize: {
+    "12": "12px",
+    "13": "13px",
+    "14": "14px",
+    "15": "15px",
+    "16": "16px",
+    "18": "18px",
+    "20": "20px",
+    "24": "24px",
+    "28": "28px",
+    "32": "32px",
+    "40": "40px",
+    "48": "48px"
+  },
+  fontWeight: {
+    regular: "Regular",
+    medium: "Medium"
+  },
+  lineHeight: {
+    "16": "16px",
+    "18": "18px",
+    "20": "20px",
+    "22-5": "22.5px",
+    "24": "24px",
+    "28": "28px",
+    "32": "32px",
+    "36": "36px",
+    "40": "40px",
+    "50": "50px",
+    "60": "60px"
+  },
+  letterSpacing: {
+    normal: "0px"
+  }
+};
+var { fontSize: fs, fontWeight: fw, lineHeight: lh, letterSpacing: ls } = baseTypography;
+var typography = {
+  fontFamily: {
+    primary: `'${baseTypography.fontFamily.primary}', sans-serif`
+  },
+  display: {
+    large: {
+      fontSize: fs["48"],
+      fontWeight: fw.regular,
+      lineHeight: lh["60"],
+      letterSpacing: ls.normal
+    },
+    largeMedium: {
+      fontSize: fs["48"],
+      fontWeight: fw.medium,
+      lineHeight: lh["60"],
+      letterSpacing: ls.normal
+    },
+    medium: {
+      fontSize: fs["40"],
+      fontWeight: fw.regular,
+      lineHeight: lh["50"],
+      letterSpacing: ls.normal
+    },
+    mediumMedium: {
+      fontSize: fs["40"],
+      fontWeight: fw.medium,
+      lineHeight: lh["50"],
+      letterSpacing: ls.normal
+    },
+    small: {
+      fontSize: fs["32"],
+      fontWeight: fw.regular,
+      lineHeight: lh["40"],
+      letterSpacing: ls.normal
+    },
+    smallMedium: {
+      fontSize: fs["32"],
+      fontWeight: fw.medium,
+      lineHeight: lh["40"],
+      letterSpacing: ls.normal
+    }
+  },
+  heading: {
+    large: {
+      fontSize: fs["28"],
+      fontWeight: fw.regular,
+      lineHeight: lh["36"],
+      letterSpacing: ls.normal
+    },
+    largeMedium: {
+      fontSize: fs["28"],
+      fontWeight: fw.medium,
+      lineHeight: lh["36"],
+      letterSpacing: ls.normal
+    },
+    medium: {
+      fontSize: fs["24"],
+      fontWeight: fw.regular,
+      lineHeight: lh["32"],
+      letterSpacing: ls.normal
+    },
+    mediumMedium: {
+      fontSize: fs["24"],
+      fontWeight: fw.medium,
+      lineHeight: lh["32"],
+      letterSpacing: ls.normal
+    },
+    small: {
+      fontSize: fs["20"],
+      fontWeight: fw.regular,
+      lineHeight: lh["28"],
+      letterSpacing: ls.normal
+    },
+    smallMedium: {
+      fontSize: fs["20"],
+      fontWeight: fw.medium,
+      lineHeight: lh["28"],
+      letterSpacing: ls.normal
+    }
+  },
+  title: {
+    large: {
+      fontSize: fs["18"],
+      fontWeight: fw.regular,
+      lineHeight: lh["24"],
+      letterSpacing: ls.normal
+    },
+    largeMedium: {
+      fontSize: fs["18"],
+      fontWeight: fw.medium,
+      lineHeight: lh["24"],
+      letterSpacing: ls.normal
+    },
+    medium: {
+      fontSize: fs["16"],
+      fontWeight: fw.regular,
+      lineHeight: lh["24"],
+      letterSpacing: ls.normal
+    },
+    mediumMedium: {
+      fontSize: fs["16"],
+      fontWeight: fw.medium,
+      lineHeight: lh["24"],
+      letterSpacing: ls.normal
+    },
+    small: {
+      fontSize: fs["14"],
+      fontWeight: fw.regular,
+      lineHeight: lh["20"],
+      letterSpacing: ls.normal
+    },
+    smallMedium: {
+      fontSize: fs["14"],
+      fontWeight: fw.medium,
+      lineHeight: lh["20"],
+      letterSpacing: ls.normal
+    }
+  },
+  body: {
+    large: {
+      fontSize: fs["16"],
+      fontWeight: fw.regular,
+      lineHeight: lh["24"],
+      letterSpacing: ls.normal
+    },
+    largeMedium: {
+      fontSize: fs["16"],
+      fontWeight: fw.medium,
+      lineHeight: lh["24"],
+      letterSpacing: ls.normal
+    },
+    medium: {
+      fontSize: fs["15"],
+      fontWeight: fw.regular,
+      lineHeight: lh["22-5"],
+      letterSpacing: ls.normal
+    },
+    mediumMedium: {
+      fontSize: fs["15"],
+      fontWeight: fw.medium,
+      lineHeight: lh["22-5"],
+      letterSpacing: ls.normal
+    },
+    small: {
+      fontSize: fs["14"],
+      fontWeight: fw.regular,
+      lineHeight: lh["20"],
+      letterSpacing: ls.normal
+    },
+    smallMedium: {
+      fontSize: fs["14"],
+      fontWeight: fw.medium,
+      lineHeight: lh["20"],
+      letterSpacing: ls.normal
+    }
+  },
+  label: {
+    large: {
+      fontSize: fs["14"],
+      fontWeight: fw.regular,
+      lineHeight: lh["20"],
+      letterSpacing: ls.normal
+    },
+    largeMedium: {
+      fontSize: fs["14"],
+      fontWeight: fw.medium,
+      lineHeight: lh["20"],
+      letterSpacing: ls.normal
+    },
+    medium: {
+      fontSize: fs["13"],
+      fontWeight: fw.regular,
+      lineHeight: lh["18"],
+      letterSpacing: ls.normal
+    },
+    mediumMedium: {
+      fontSize: fs["13"],
+      fontWeight: fw.medium,
+      lineHeight: lh["18"],
+      letterSpacing: ls.normal
+    },
+    small: {
+      fontSize: fs["12"],
+      fontWeight: fw.regular,
+      lineHeight: lh["16"],
+      letterSpacing: ls.normal
+    },
+    smallMedium: {
+      fontSize: fs["12"],
+      fontWeight: fw.medium,
+      lineHeight: lh["16"],
+      letterSpacing: ls.normal
+    }
+  }
 };
 
 // src/styles/ts/z-index.ts
 var zIndex = {
-  loading: 9999,
-  modal: 1e4,
-  toast: 10001
-};
-
-// src/styles/ts/a11y.ts
-var a11y = {
-  focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)",
-  focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)",
-  focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)",
-  tapMinSize: "44px"
+  level0: 0,
+  level1: 10,
+  level2: 100,
+  level3: 200,
+  level4: 500,
+  level5: 1e3
 };
 
 // src/utils/cn.ts
@@ -194,7 +458,7 @@ var cn = (...classes) => {
       }
     } else if (typeof item === "object") {
       for (const key in item) {
-        if (Object.prototype.hasOwnProperty.call(item, key) && item[key]) {
+        if (Object.hasOwn(item, key) && item[key]) {
           classNames.push(key);
         }
       }
@@ -211,8 +475,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React7.useRef(null);
-  React7.useEffect(() => {
+  const previousActiveElement = React9.useRef(null);
+  React9.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -256,9 +520,7 @@ function useFocusTrap(containerRef, isActive) {
       if (wasTabIndexAdded) {
         container.removeAttribute("tabindex");
       }
-      if (previousActiveElement.current && previousActiveElement.current.focus) {
-        previousActiveElement.current.focus();
-      }
+      previousActiveElement.current?.focus();
     };
   }, [isActive, containerRef]);
 }
@@ -292,9 +554,7 @@ var useAlert = () => {
   }
   return context;
 };
-var AlertProvider = ({
-  children
-}) => {
+var AlertProvider = ({ children }) => {
   const [alertState, setAlertState] = useState({
     isOpen: false
   });
@@ -343,20 +603,15 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React7.useRef(null);
+  const panelRef = React9.useRef(null);
   useFocusTrap(panelRef, true);
-  const modalClassName = [
-    "alert_modal",
-    `alert_variant_${variant}`
-  ].filter(Boolean).join(" ");
-  const actionsClassName = [
-    "alert_actions",
-    `alert_actions_${actionsAlign}`
-  ].filter(Boolean).join(" ");
+  const modalClassName = ["alert_modal", `alert_variant_${variant}`].filter(Boolean).join(" ");
+  const actionsClassName = ["alert_actions", `alert_actions_${actionsAlign}`].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "div",
     {
       className: "alert_overlay",
+      role: "presentation",
       onClick: onClose,
       onKeyDown: (e) => e.key === "Escape" && onClose(),
       children: /* @__PURE__ */ jsxs(
@@ -365,6 +620,9 @@ var AlertModal = ({
           ref: panelRef,
           className: modalClassName,
           onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => {
+            if (e.key !== "Escape") e.stopPropagation();
+          },
           role: "alertdialog",
           "aria-modal": "true",
           "aria-labelledby": "alert_title",
@@ -373,24 +631,8 @@ var AlertModal = ({
             title && /* @__PURE__ */ jsx("div", { className: "alert_title", id: "alert_title", children: title }),
             message && /* @__PURE__ */ jsx("div", { className: "alert_message", id: "alert_message", children: message }),
             /* @__PURE__ */ jsxs("div", { className: actionsClassName, children: [
-              showCancel && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "alert_button alert_button_cancel",
-                  onClick: onCancel,
-                  children: cancelText
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  className: "alert_button alert_button_confirm",
-                  onClick: onConfirm,
-                  children: confirmText
-                }
-              )
+              showCancel && /* @__PURE__ */ jsx("button", { type: "button", className: "alert_button alert_button_cancel", onClick: onCancel, children: cancelText }),
+              /* @__PURE__ */ jsx("button", { type: "button", className: "alert_button alert_button_confirm", onClick: onConfirm, children: confirmText })
             ] })
           ]
         }
@@ -409,42 +651,7 @@ var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
     }
   );
 };
-var TopLoading = ({
-  progress,
-  color,
-  height = 3,
-  isLoading = true,
-  ariaLabel = "Page loading"
-}) => {
-  if (!isLoading) return null;
-  const isIndeterminate = progress === void 0;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "top_loading",
-      style: { height },
-      role: "progressbar",
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-valuenow": isIndeterminate ? void 0 : progress,
-      "aria-label": ariaLabel,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: [
-            "top_loading_bar",
-            isIndeterminate && "top_loading_indeterminate"
-          ].filter(Boolean).join(" "),
-          style: {
-            width: isIndeterminate ? void 0 : `${progress}%`,
-            backgroundColor: color
-          }
-        }
-      )
-    }
-  );
-};
-var ToastContext = React7.createContext(null);
+var ToastContext = React9.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -453,63 +660,48 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [exiting, setExiting] = React7.useState(false);
-  const closingRef = React7.useRef(false);
-  const close = React7.useCallback(() => {
+  const [exiting, setExiting] = React9.useState(false);
+  const closingRef = React9.useRef(false);
+  const close = React9.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setExiting(true);
     setTimeout(() => onRemove(item.id), 260);
   }, [item.id, onRemove]);
-  const itemClassName = [
-    "toast_item",
-    exiting && "toast_item_exiting"
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: itemClassName,
-      role: item.variant === "error" ? "alert" : "status",
-      children: [
-        /* @__PURE__ */ jsx("span", { className: `toast_icon toast_icon_${item.variant}`, "aria-hidden": "true", children: VARIANT_ICONS[item.variant] }),
-        /* @__PURE__ */ jsx("span", { className: "toast_message", children: item.message }),
-        /* @__PURE__ */ jsx(
-          "button",
-          {
-            type: "button",
-            className: "toast_close",
-            onClick: close,
-            "aria-label": closeAriaLabel,
-            children: /* @__PURE__ */ jsx(X, { size: 14 })
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            className: `toast_progress toast_progress_${item.variant}`,
-            style: { "--toast-duration": `${item.duration}ms` },
-            onAnimationEnd: close,
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
-  );
+  const itemClassName = ["toast_item", exiting && "toast_item_exiting"].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: itemClassName, role: item.variant === "error" ? "alert" : "status", children: [
+    /* @__PURE__ */ jsx("span", { className: `toast_icon toast_icon_${item.variant}`, "aria-hidden": "true", children: VARIANT_ICONS[item.variant] }),
+    /* @__PURE__ */ jsx("span", { className: "toast_message", children: item.message }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "toast_close", onClick: close, "aria-label": closeAriaLabel, children: /* @__PURE__ */ jsx(X, { size: 14 }) }),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: `toast_progress toast_progress_${item.variant}`,
+        style: { "--toast-duration": `${item.duration}ms` },
+        onAnimationEnd: close,
+        "aria-hidden": "true"
+      }
+    )
+  ] });
 };
-var ToastProvider = ({ children, maxCount = 5, closeAriaLabel = "Close" }) => {
-  const [toasts, setToasts] = React7.useState([]);
-  const [isMounted, setIsMounted] = React7.useState(false);
-  React7.useEffect(() => {
+var ToastProvider = ({
+  children,
+  maxCount = 5,
+  closeAriaLabel = "Close"
+}) => {
+  const [toasts, setToasts] = React9.useState([]);
+  const [isMounted, setIsMounted] = React9.useState(false);
+  React9.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React7.useCallback(
+  const addToast = React9.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React7.useCallback((id) => {
+  const removeToast = React9.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
@@ -519,6 +711,7 @@ var ToastProvider = ({ children, maxCount = 5, closeAriaLabel = "Close" }) => {
         "div",
         {
           className: "toast_container",
+          role: "region",
           "aria-live": "polite",
           "aria-atomic": "false",
           "aria-label": "Notifications",
@@ -555,101 +748,358 @@ var useToast = () => {
     message: (message, duration) => ctx.addToast(message, "default", duration)
   };
 };
-var Button = ({
-  variant = "primary",
-  size = "md",
-  fullWidth = true,
-  width,
-  className,
-  style,
-  ...props
+var TopLoading = ({
+  progress,
+  color,
+  height = 3,
+  isLoading = true,
+  ariaLabel = "Page loading"
 }) => {
-  const buttonClassName = cn(
-    "button",
-    `button_variant_${variant}`,
-    `button_size_${size}`,
-    fullWidth && !width && "button_full_width",
-    className
-  );
-  const buttonStyle = width ? { ...style, width } : style;
-  return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: buttonStyle, ...props });
-};
-var Checkbox = React7.forwardRef(
-  ({ label, size = "md", indeterminate, className, ...props }, ref) => {
-    const inputRef = React7.useRef(null);
-    React7.useImperativeHandle(ref, () => inputRef.current);
-    React7.useEffect(() => {
-      if (!inputRef.current) return;
-      inputRef.current.indeterminate = Boolean(indeterminate);
-    }, [indeterminate]);
-    const rootClassName = cn(
-      "checkbox",
-      `checkbox_size_${size}`,
-      className
-    );
-    return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-      /* @__PURE__ */ jsx(
-        "input",
+  if (!isLoading) return null;
+  const isIndeterminate = progress === void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "top_loading",
+      style: { height },
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": isIndeterminate ? void 0 : progress,
+      "aria-label": ariaLabel,
+      children: /* @__PURE__ */ jsx(
+        "div",
         {
-          ref: inputRef,
-          type: "checkbox",
-          className: "checkbox_input",
-          ...props
+          className: ["top_loading_bar", isIndeterminate && "top_loading_indeterminate"].filter(Boolean).join(" "),
+          style: {
+            width: isIndeterminate ? void 0 : `${progress}%`,
+            backgroundColor: color
+          }
         }
-      ),
-      /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
-      label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
-    ] });
-  }
-);
-Checkbox.displayName = "Checkbox";
-var FileInput = ({
-  label = "Choose file",
-  onFiles,
-  helperText,
+      )
+    }
+  );
+};
+var Checkbox = ({
+  label,
+  size = "md",
+  indeterminate,
   className,
-  disabled,
+  ref,
   ...props
 }) => {
-  const inputId = React7.useId();
-  const helperId = React7.useId();
-  const rootClassName = [
-    "file_input",
-    disabled && "file_input_disabled",
-    className ?? ""
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        id: inputId,
-        type: "file",
-        className: "file_input_control",
-        disabled,
-        "aria-describedby": helperText ? helperId : void 0,
-        onChange: (e) => onFiles?.(e.currentTarget.files),
-        ...props
-      }
-    ),
-    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label }),
-    helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: helperText })
+  const inputRef = React9.useRef(null);
+  React9.useImperativeHandle(ref, () => inputRef.current);
+  React9.useEffect(() => {
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = Boolean(indeterminate);
+  }, [indeterminate]);
+  const rootClassName = cn("checkbox", `checkbox_size_${size}`, className);
+  return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
+    /* @__PURE__ */ jsx("input", { ref: inputRef, type: "checkbox", className: "checkbox_input", ...props }),
+    /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
+    label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
   ] });
 };
-var Radio = React7.forwardRef(
-  ({ label, size = "md", className, ...props }, ref) => {
-    const rootClassName = cn(
-      "radio",
-      `radio_size_${size}`,
-      className
-    );
-    return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-      /* @__PURE__ */ jsx("input", { ref, type: "radio", className: "radio_input", ...props }),
-      /* @__PURE__ */ jsx("span", { className: "radio_dot", "aria-hidden": "true" }),
-      label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
-    ] });
-  }
-);
-Radio.displayName = "Radio";
+Checkbox.displayName = "Checkbox";
+var pad = (n) => String(n).padStart(2, "0");
+var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
+var normalizeWidth = (v) => typeof v === "number" ? `${v}px` : v;
+var DatePicker = ({
+  label,
+  value,
+  onChange,
+  mode = "year-month-day",
+  startYear = 1950,
+  endYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
+  minDate,
+  selectableRange = "all",
+  disabled,
+  fullWidth = true,
+  width,
+  yearLabel = "Year",
+  monthLabel = "Month",
+  dayLabel = "Day",
+  minDateSrFormat = "Minimum date: {date}",
+  selectableRangeUntilTodaySrText = "Selectable up to today"
+}) => {
+  const groupId = React9.useId();
+  const constraintId = React9.useId();
+  const today = /* @__PURE__ */ new Date();
+  const todayYear = today.getFullYear();
+  const todayMonth = today.getMonth() + 1;
+  const todayDay = today.getDate();
+  const [y, m, d] = value?.split("-").map(Number) ?? [];
+  const [minY, minM, minD] = minDate?.split("-").map(Number) ?? [];
+  const year = y ?? "";
+  const month = m ?? "";
+  const day = d ?? "";
+  const maxYear = selectableRange === "until-today" ? todayYear : endYear;
+  const minMonth = minY && year === minY ? minM : 1;
+  const maxMonth = selectableRange === "until-today" && year === todayYear ? todayMonth : 12;
+  const minDay = minY && minM && year === minY && month === minM ? minD : 1;
+  const maxDay = selectableRange === "until-today" && year === todayYear && month === todayMonth ? todayDay : getDaysInMonth(year || todayYear, month || 1);
+  const days = year && month ? Math.min(getDaysInMonth(year, month), maxDay) : 31;
+  const clampDay = (year2, month2, day2) => Math.min(day2, getDaysInMonth(year2, month2));
+  const emit = (yy, mm, dd) => {
+    if (mode === "year-month") {
+      onChange(`${yy}-${pad(mm)}`);
+      return;
+    }
+    const safeDay = clampDay(yy, mm, dd ?? 1);
+    onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
+  };
+  const containerStyle = width ? { width: normalizeWidth(width) } : void 0;
+  const rootClassName = cn("date_picker", { date_picker_full_width: fullWidth && !width });
+  const constraintParts = [];
+  if (minDate) constraintParts.push(minDateSrFormat.replace("{date}", minDate));
+  if (selectableRange === "until-today") constraintParts.push(selectableRangeUntilTodaySrText);
+  const constraintDesc = constraintParts.join(". ");
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: containerStyle, children: [
+    label && /* @__PURE__ */ jsx("span", { className: "date_picker_label", id: groupId, children: label }),
+    constraintDesc && /* @__PURE__ */ jsx("span", { id: constraintId, className: "date_picker_sr_only", children: constraintDesc }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: "date_picker_fields",
+        role: "group",
+        "aria-labelledby": label ? groupId : void 0,
+        "aria-describedby": constraintDesc ? constraintId : void 0,
+        children: [
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "aria-label": yearLabel,
+              value: year,
+              disabled,
+              onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: yearLabel }),
+                Array.from({ length: maxYear - startYear + 1 }, (_, i) => startYear + i).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "aria-label": monthLabel,
+              value: month,
+              disabled: disabled || !year,
+              onChange: (e) => emit(year, Number(e.target.value), day || minDay),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: monthLabel }),
+                Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map((m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2))
+              ]
+            }
+          ),
+          mode === "year-month-day" && /* @__PURE__ */ jsxs(
+            "select",
+            {
+              "aria-label": dayLabel,
+              value: day,
+              disabled: disabled || !month,
+              onChange: (e) => emit(year, month, Number(e.target.value)),
+              children: [
+                /* @__PURE__ */ jsx("option", { value: "", children: dayLabel }),
+                Array.from({ length: days - minDay + 1 }, (_, i) => minDay + i).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
+              ]
+            }
+          )
+        ]
+      }
+    )
+  ] });
+};
+var FileInput = ({
+  label = "Choose file",
+  onFiles,
+  helperText,
+  className,
+  disabled,
+  ...props
+}) => {
+  const inputId = React9.useId();
+  const helperId = React9.useId();
+  const rootClassName = ["file_input", disabled && "file_input_disabled", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        id: inputId,
+        type: "file",
+        className: "file_input_control",
+        disabled,
+        "aria-describedby": helperText ? helperId : void 0,
+        onChange: (e) => onFiles?.(e.currentTarget.files),
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label }),
+    helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: helperText })
+  ] });
+};
+var Radio = ({ label, size = "md", className, ref, ...props }) => {
+  const rootClassName = cn("radio", `radio_size_${size}`, className);
+  return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
+    /* @__PURE__ */ jsx("input", { ref, type: "radio", className: "radio_input", ...props }),
+    /* @__PURE__ */ jsx("span", { className: "radio_dot", "aria-hidden": "true" }),
+    label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
+  ] });
+};
+Radio.displayName = "Radio";
+var Switch = ({
+  checked,
+  defaultChecked,
+  onChange,
+  size = "md",
+  disabled,
+  className,
+  ariaLabel,
+  ref,
+  ...props
+}) => {
+  const isControlled = checked !== void 0;
+  const [innerChecked, setInnerChecked] = React9.useState(!!defaultChecked);
+  const isOn = isControlled ? !!checked : innerChecked;
+  const handleToggle = () => {
+    if (disabled) return;
+    const next = !isOn;
+    if (!isControlled) setInnerChecked(next);
+    onChange?.(next);
+  };
+  const rootClassName = cn(
+    "switch",
+    `switch_size_${size}`,
+    { switch_on: isOn, switch_disabled: disabled },
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": isOn,
+      "aria-label": ariaLabel,
+      disabled,
+      onClick: handleToggle,
+      className: rootClassName,
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
+    }
+  );
+};
+Switch.displayName = "Switch";
+var TextField = ({
+  id,
+  label,
+  helperText,
+  error,
+  success,
+  variant = "outline",
+  size = "md",
+  leftIcon,
+  rightIcon,
+  fullWidth,
+  className,
+  onChangeAction,
+  value,
+  defaultValue,
+  transformValue,
+  ref,
+  ...props
+}) => {
+  const generatedId = React9.useId();
+  const inputId = id ?? generatedId;
+  const helperId = helperText ? `${inputId}-help` : void 0;
+  const isControlled = value !== void 0;
+  const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
+  const [innerValue, setInnerValue] = React9.useState(
+    () => applyTransform(value ?? defaultValue ?? "")
+  );
+  const isComposingRef = React9.useRef(false);
+  React9.useEffect(() => {
+    if (!isControlled) return;
+    const nextValue = value ?? "";
+    setInnerValue(transformValue ? transformValue(nextValue) : nextValue);
+  }, [isControlled, value, transformValue]);
+  const rootClassName = cn("text_field", { text_field_full_width: fullWidth }, className);
+  const inputClassName = cn(
+    "text_field_input",
+    `text_field_variant_${variant}`,
+    `text_field_size_${size}`,
+    {
+      text_field_with_left: !!leftIcon,
+      text_field_with_right: !!rightIcon,
+      text_field_error: !!error,
+      text_field_success: !!success
+    }
+  );
+  const helperClassName = cn("text_field_helper", {
+    text_field_helper_error: error,
+    text_field_helper_success: success
+  });
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+    label ? /* @__PURE__ */ jsx("label", { className: "text_field_label", htmlFor: inputId, children: label }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "text_field_wrap", children: [
+      leftIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_left", "aria-hidden": "true", children: leftIcon }) : null,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          id: inputId,
+          ref,
+          className: inputClassName,
+          "aria-invalid": !!error,
+          "aria-describedby": helperId,
+          ...props,
+          value: innerValue,
+          onCompositionStart: () => {
+            isComposingRef.current = true;
+          },
+          onCompositionEnd: (event) => {
+            isComposingRef.current = false;
+            const rawValue = event.currentTarget.value;
+            const nextValue = applyTransform(rawValue);
+            setInnerValue(nextValue);
+            onChangeAction?.(nextValue);
+          },
+          onChange: (event) => {
+            const rawValue = event.target.value;
+            if (isComposingRef.current) {
+              setInnerValue(rawValue);
+              return;
+            }
+            const nextValue = applyTransform(rawValue);
+            setInnerValue(nextValue);
+            onChangeAction?.(nextValue);
+          }
+        }
+      ),
+      rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", "aria-hidden": "true", children: rightIcon }) : null
+    ] }),
+    helperText ? /* @__PURE__ */ jsx("div", { id: helperId, className: helperClassName, children: helperText }) : null
+  ] });
+};
+TextField.displayName = "TextField";
+var Button = ({
+  variant = "primary",
+  size = "md",
+  fullWidth = true,
+  width,
+  className,
+  style,
+  ...props
+}) => {
+  const buttonClassName = cn(
+    "button",
+    `button_variant_${variant}`,
+    `button_size_${size}`,
+    fullWidth && !width && "button_full_width",
+    className
+  );
+  const buttonStyle = width ? { ...style, width } : style;
+  return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: buttonStyle, ...props });
+};
 var Select = ({
   id,
   label,
@@ -665,21 +1115,21 @@ var Select = ({
   className,
   textAlign = "left"
 }) => {
-  const internalId = React7.useId();
+  const internalId = React9.useId();
   const selectId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React7.useState(defaultValue);
+  const [internalValue, setInternalValue] = React9.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internalValue;
-  const [isOpen, setIsOpen] = React7.useState(false);
-  const [activeIndex, setActiveIndex] = React7.useState(-1);
-  const [dropUp, setDropUp] = React7.useState(false);
-  const wrapperRef = React7.useRef(null);
-  const controlRef = React7.useRef(null);
-  const currentOption = React7.useMemo(
+  const [isOpen, setIsOpen] = React9.useState(false);
+  const [activeIndex, setActiveIndex] = React9.useState(-1);
+  const [dropUp, setDropUp] = React9.useState(false);
+  const wrapperRef = React9.useRef(null);
+  const controlRef = React9.useRef(null);
+  const currentOption = React9.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
-  const setValue = React7.useCallback(
+  const setValue = React9.useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
@@ -687,12 +1137,12 @@ var Select = ({
     },
     [isControlled, onChange, options]
   );
-  const handleOutsideClick = React7.useEffectEvent((e) => {
+  const handleOutsideClick = React9.useEffectEvent((e) => {
     if (!wrapperRef.current?.contains(e.target)) {
       setIsOpen(false);
     }
   });
-  React7.useEffect(() => {
+  React9.useEffect(() => {
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
@@ -757,12 +1207,17 @@ var Select = ({
         break;
     }
   };
-  React7.useEffect(() => {
+  React9.useEffect(() => {
     if (!isOpen) return;
     const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
-    setActiveIndex(idx >= 0 ? idx : Math.max(0, options.findIndex((o) => !o.disabled)));
+    setActiveIndex(
+      idx >= 0 ? idx : Math.max(
+        0,
+        options.findIndex((o) => !o.disabled)
+      )
+    );
   }, [isOpen, options, currentValue]);
-  React7.useLayoutEffect(() => {
+  React9.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
@@ -778,51 +1233,53 @@ var Select = ({
     { is_open: isOpen, is_disabled: disabled }
   );
   const listClassName = cn("select_list", { select_list_up: dropUp });
-  return /* @__PURE__ */ jsxs("div", { ref: wrapperRef, className: rootClassName, style: fullWidth ? { width: "100%" } : void 0, children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select_label", children: label }),
-    /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref: controlRef,
-        id: selectId,
-        type: "button",
-        className: controlClassName,
-        "aria-haspopup": "listbox",
-        "aria-expanded": isOpen,
-        "aria-controls": `${selectId}_listbox`,
-        onClick: () => !disabled && setIsOpen((o) => !o),
-        onKeyDown,
-        disabled,
-        children: [
-          /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: currentOption ? "select_value" : "select_placeholder",
-              style: textAlign === "left" ? { textAlign: "start" } : void 0,
-              children: currentOption ? currentOption.label : placeholder
-            }
-          ),
-          /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
-        ]
-      }
-    ),
-    isOpen && /* @__PURE__ */ jsx(
-      "ul",
-      {
-        id: `${selectId}_listbox`,
-        role: "listbox",
-        className: listClassName,
-        children: options.map((opt, i) => {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className: rootClassName,
+      style: fullWidth ? { width: "100%" } : void 0,
+      children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select_label", children: label }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            ref: controlRef,
+            id: selectId,
+            type: "button",
+            className: controlClassName,
+            "aria-haspopup": "listbox",
+            "aria-expanded": isOpen,
+            "aria-controls": `${selectId}_listbox`,
+            onClick: () => !disabled && setIsOpen((o) => !o),
+            onKeyDown,
+            disabled,
+            children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: currentOption ? "select_value" : "select_placeholder",
+                  style: textAlign === "left" ? { textAlign: "start" } : void 0,
+                  children: currentOption ? currentOption.label : placeholder
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+            ]
+          }
+        ),
+        isOpen && /* @__PURE__ */ jsx("div", { id: `${selectId}_listbox`, role: "listbox", className: listClassName, children: options.map((opt, i) => {
           const selected = currentValue === opt.value;
           const active = i === activeIndex;
-          const optionClassName = cn(
-            "select_option",
-            { is_selected: selected, is_active: active, is_disabled: opt.disabled }
-          );
+          const optionClassName = cn("select_option", {
+            is_selected: selected,
+            is_active: active,
+            is_disabled: opt.disabled
+          });
           return /* @__PURE__ */ jsxs(
-            "li",
+            "div",
             {
               role: "option",
+              tabIndex: -1,
               "aria-selected": selected,
               "aria-disabled": opt.disabled ? true : void 0,
               className: optionClassName,
@@ -832,6 +1289,14 @@ var Select = ({
                 setValue(opt.value);
                 setIsOpen(false);
               },
+              onKeyDown: (e) => {
+                if (opt.disabled) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  setValue(opt.value);
+                  setIsOpen(false);
+                }
+              },
               children: [
                 /* @__PURE__ */ jsx("span", { children: opt.label }),
                 selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" })
@@ -839,267 +1304,10 @@ var Select = ({
             },
             opt.value
           );
-        })
-      }
-    )
-  ] });
-};
-var Switch = React7.forwardRef(
-  ({
-    checked,
-    defaultChecked,
-    onChange,
-    size = "md",
-    disabled,
-    className,
-    ariaLabel,
-    ...props
-  }, ref) => {
-    const isControlled = checked !== void 0;
-    const [innerChecked, setInnerChecked] = React7.useState(!!defaultChecked);
-    const isOn = isControlled ? !!checked : innerChecked;
-    const handleToggle = () => {
-      if (disabled) return;
-      const next = !isOn;
-      if (!isControlled) setInnerChecked(next);
-      onChange?.(next);
-    };
-    const rootClassName = cn(
-      "switch",
-      `switch_size_${size}`,
-      { switch_on: isOn, switch_disabled: disabled },
-      className
-    );
-    return /* @__PURE__ */ jsx(
-      "button",
-      {
-        ref,
-        type: "button",
-        role: "switch",
-        "aria-checked": isOn,
-        "aria-label": ariaLabel,
-        disabled,
-        onClick: handleToggle,
-        className: rootClassName,
-        ...props,
-        children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
-      }
-    );
-  }
-);
-Switch.displayName = "Switch";
-var TextField = React7.forwardRef(
-  ({
-    id,
-    label,
-    helperText,
-    error,
-    success,
-    variant = "outline",
-    size = "md",
-    leftIcon,
-    rightIcon,
-    fullWidth,
-    className,
-    onChangeAction,
-    value,
-    defaultValue,
-    transformValue,
-    ...props
-  }, ref) => {
-    const inputId = id ?? React7.useId();
-    const helperId = helperText ? `${inputId}-help` : void 0;
-    const isControlled = value !== void 0;
-    const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-    const [innerValue, setInnerValue] = React7.useState(
-      () => applyTransform(value ?? defaultValue ?? "")
-    );
-    const isComposingRef = React7.useRef(false);
-    React7.useEffect(() => {
-      if (!isControlled) return;
-      setInnerValue(applyTransform(value ?? ""));
-    }, [isControlled, value, transformValue]);
-    const rootClassName = cn(
-      "text_field",
-      { text_field_full_width: fullWidth },
-      className
-    );
-    const inputClassName = cn(
-      "text_field_input",
-      `text_field_variant_${variant}`,
-      `text_field_size_${size}`,
-      {
-        text_field_with_left: !!leftIcon,
-        text_field_with_right: !!rightIcon,
-        text_field_error: !!error,
-        text_field_success: !!success
-      }
-    );
-    const helperClassName = cn(
-      "text_field_helper",
-      {
-        text_field_helper_error: error,
-        text_field_helper_success: success
-      }
-    );
-    return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
-      label ? /* @__PURE__ */ jsx("label", { className: "text_field_label", htmlFor: inputId, children: label }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "text_field_wrap", children: [
-        leftIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_left", "aria-hidden": "true", children: leftIcon }) : null,
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            id: inputId,
-            ref,
-            className: inputClassName,
-            "aria-invalid": !!error,
-            "aria-describedby": helperId,
-            ...props,
-            value: innerValue,
-            onCompositionStart: () => {
-              isComposingRef.current = true;
-            },
-            onCompositionEnd: (event) => {
-              isComposingRef.current = false;
-              const rawValue = event.currentTarget.value;
-              const nextValue = applyTransform(rawValue);
-              setInnerValue(nextValue);
-              onChangeAction?.(nextValue);
-            },
-            onChange: (event) => {
-              const rawValue = event.target.value;
-              if (isComposingRef.current) {
-                setInnerValue(rawValue);
-                return;
-              }
-              const nextValue = applyTransform(rawValue);
-              setInnerValue(nextValue);
-              onChangeAction?.(nextValue);
-            }
-          }
-        ),
-        rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", "aria-hidden": "true", children: rightIcon }) : null
-      ] }),
-      helperText ? /* @__PURE__ */ jsx("div", { id: helperId, className: helperClassName, children: helperText }) : null
-    ] });
-  }
-);
-TextField.displayName = "TextField";
-var pad = (n) => String(n).padStart(2, "0");
-var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
-var normalizeWidth = (v) => typeof v === "number" ? `${v}px` : v;
-var DatePicker = ({
-  label,
-  value,
-  onChange,
-  mode = "year-month-day",
-  startYear = 1950,
-  endYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
-  minDate,
-  selectableRange = "all",
-  disabled,
-  fullWidth = true,
-  width,
-  yearLabel = "Year",
-  monthLabel = "Month",
-  dayLabel = "Day",
-  minDateSrFormat = "Minimum date: {date}",
-  selectableRangeUntilTodaySrText = "Selectable up to today"
-}) => {
-  const groupId = React7.useId();
-  const constraintId = React7.useId();
-  const today = /* @__PURE__ */ new Date();
-  const todayYear = today.getFullYear();
-  const todayMonth = today.getMonth() + 1;
-  const todayDay = today.getDate();
-  const [y, m, d] = value?.split("-").map(Number) ?? [];
-  const [minY, minM, minD] = minDate?.split("-").map(Number) ?? [];
-  const year = y ?? "";
-  const month = m ?? "";
-  const day = d ?? "";
-  const maxYear = selectableRange === "until-today" ? todayYear : endYear;
-  const minMonth = minY && year === minY ? minM : 1;
-  const maxMonth = selectableRange === "until-today" && year === todayYear ? todayMonth : 12;
-  const minDay = minY && minM && year === minY && month === minM ? minD : 1;
-  const maxDay = selectableRange === "until-today" && year === todayYear && month === todayMonth ? todayDay : getDaysInMonth(year || todayYear, month || 1);
-  const days = year && month ? Math.min(getDaysInMonth(year, month), maxDay) : 31;
-  const clampDay = (year2, month2, day2) => Math.min(day2, getDaysInMonth(year2, month2));
-  const emit = (yy, mm, dd) => {
-    if (mode === "year-month") {
-      onChange(`${yy}-${pad(mm)}`);
-      return;
+        }) })
+      ]
     }
-    const safeDay = clampDay(yy, mm, dd ?? 1);
-    onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
-  };
-  const containerStyle = width ? { width: normalizeWidth(width) } : void 0;
-  const rootClassName = cn("date_picker", { date_picker_full_width: fullWidth && !width });
-  const constraintParts = [];
-  if (minDate) constraintParts.push(minDateSrFormat.replace("{date}", minDate));
-  if (selectableRange === "until-today") constraintParts.push(selectableRangeUntilTodaySrText);
-  const constraintDesc = constraintParts.join(". ");
-  return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: containerStyle, children: [
-    label && /* @__PURE__ */ jsx("label", { className: "date_picker_label", id: groupId, children: label }),
-    constraintDesc && /* @__PURE__ */ jsx("span", { id: constraintId, className: "date_picker_sr_only", children: constraintDesc }),
-    /* @__PURE__ */ jsxs(
-      "div",
-      {
-        className: "date_picker_fields",
-        role: "group",
-        "aria-labelledby": label ? groupId : void 0,
-        "aria-describedby": constraintDesc ? constraintId : void 0,
-        children: [
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              "aria-label": yearLabel,
-              value: year,
-              disabled,
-              onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: yearLabel }),
-                Array.from(
-                  { length: maxYear - startYear + 1 },
-                  (_, i) => startYear + i
-                ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsxs(
-            "select",
-            {
-              "aria-label": monthLabel,
-              value: month,
-              disabled: disabled || !year,
-              onChange: (e) => emit(year, Number(e.target.value), day || minDay),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: monthLabel }),
-                Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map(
-                  (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
-                )
-              ]
-            }
-          ),
-          mode === "year-month-day" && /* @__PURE__ */ jsxs(
-            "select",
-            {
-              "aria-label": dayLabel,
-              value: day,
-              disabled: disabled || !month,
-              onChange: (e) => emit(year, month, Number(e.target.value)),
-              children: [
-                /* @__PURE__ */ jsx("option", { value: "", children: dayLabel }),
-                Array.from(
-                  { length: days - minDay + 1 },
-                  (_, i) => minDay + i
-                ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
-              ]
-            }
-          )
-        ]
-      }
-    )
-  ] });
+  );
 };
 var range = (start, end) => {
   const out = [];
@@ -1130,13 +1338,16 @@ var getPaginationItems = (page, totalPages) => {
   items.push(last);
   return items;
 };
-var Pagination = ({ page, totalPages, onChange, prevLabel = "Previous page", nextLabel = "Next page" }) => {
+var Pagination = ({
+  page,
+  totalPages,
+  onChange,
+  prevLabel = "Previous page",
+  nextLabel = "Next page"
+}) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React7.useMemo(
-    () => getPaginationItems(page, totalPages),
-    [page, totalPages]
-  );
+  const items = React9.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -1149,16 +1360,13 @@ var Pagination = ({ page, totalPages, onChange, prevLabel = "Previous page", nex
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "pagination_pages", role: "list", children: items.map((it, idx) => {
+    /* @__PURE__ */ jsx("ul", { className: "pagination_pages", children: items.map((it, idx) => {
       if (it === "ellipsis") {
-        return /* @__PURE__ */ jsx("span", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${idx}`);
+        return /* @__PURE__ */ jsx("li", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${idx}`);
       }
       const isActive = it === page;
-      const buttonClassName = cn(
-        "pagination_page_button",
-        { pagination_active: isActive }
-      );
-      return /* @__PURE__ */ jsx("span", { role: "listitem", children: /* @__PURE__ */ jsx(
+      const buttonClassName = cn("pagination_page_button", { pagination_active: isActive });
+      return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
@@ -1193,18 +1401,18 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React7.useRef(null);
-  const titleId = React7.useId();
+  const panelRef = React9.useRef(null);
+  const titleId = React9.useId();
   useFocusTrap(panelRef, open);
-  const handleEscape = React7.useEffectEvent((e) => {
+  const handleEscape = React9.useEffectEvent((e) => {
     if (e.key === "Escape") onClose?.();
   });
-  React7.useEffect(() => {
+  React9.useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open]);
-  React7.useEffect(() => {
+  React9.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -1237,13 +1445,20 @@ var Modal = ({
       "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
       "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
       onClick: () => closeOnOverlay && onClose?.(),
+      onKeyDown: (e) => {
+        if (e.key === "Escape") onClose?.();
+      },
       children: /* @__PURE__ */ jsxs(
         "div",
         {
           ref: panelRef,
           className: panelClassName,
           style: { width },
+          role: "document",
           onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => {
+            if (e.key !== "Escape") e.stopPropagation();
+          },
           ...props,
           children: [
             title && /* @__PURE__ */ jsx("div", { id: titleId, className: "modal_header", children: title }),
@@ -1255,4 +1470,4 @@ var Modal = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, breakpoints, colors, motion, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, motion, opacity, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };