@bigtablet/design-system 1.24.0 → 1.24.2

package/dist/index.js

@@ -1,11 +1,43 @@
 "use client";
 import './index.css';
-import * as React6 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/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/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/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",
@@ -72,6 +104,55 @@ var colors = {
   }
 };
 
+// src/styles/ts/motion.ts
+var motion = {
+  transition: {
+    fast: "0.1s ease-in-out",
+    base: "0.2s ease-in-out",
+    slow: "0.3s ease-in-out",
+    emphasized: "0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+    bounce: "0.3s cubic-bezier(0.16, 1, 0.3, 1)",
+    fade: "0.15s ease-in-out",
+    slide: "0.25s ease-in-out",
+    scale: "0.2s cubic-bezier(0.2, 0.8, 0.2, 1)",
+    state: "0.18s ease-in-out"
+  }
+};
+
+// 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",
@@ -90,6 +171,32 @@ var spacing = {
   "48": "48px"
 };
 
+// src/styles/ts/skeleton.ts
+var skeleton = {
+  color: {
+    base: baseColors.neutral50,
+    wave: baseColors.neutral200,
+    highlight: baseColors.neutral0
+  },
+  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["4"],
+    sm: spacing["8"],
+    md: spacing["12"],
+    lg: spacing["16"],
+    xl: spacing["20"]
+  },
+  animation: {
+    duration: "1.4s",
+    timing: "ease-in-out"
+  }
+};
+
 // src/styles/ts/typography.ts
 var baseTypography = {
   fontFamily: {
@@ -136,146 +243,197 @@ var typography = {
     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 }
+    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 }
+    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 }
+    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 }
+    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/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/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/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/motion.ts
-var motion = {
-  transition: {
-    fast: "0.1s ease-in-out",
-    base: "0.2s ease-in-out",
-    slow: "0.3s ease-in-out",
-    emphasized: "0.25s cubic-bezier(0.4, 0, 0.2, 1)",
-    bounce: "0.3s cubic-bezier(0.16, 1, 0.3, 1)",
-    fade: "0.15s ease-in-out",
-    slide: "0.25s ease-in-out",
-    scale: "0.2s cubic-bezier(0.2, 0.8, 0.2, 1)",
-    state: "0.18s ease-in-out"
-  }
-};
-
-// src/styles/ts/skeleton.ts
-var skeleton = {
-  color: {
-    base: baseColors.neutral50,
-    wave: baseColors.neutral200,
-    highlight: baseColors.neutral0
-  },
-  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["4"],
-    sm: spacing["8"],
-    md: spacing["12"],
-    lg: spacing["16"],
-    xl: spacing["20"]
-  },
-  animation: {
-    duration: "1.4s",
-    timing: "ease-in-out"
+    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/breakpoints.ts
-var breakpoints = {
-  compact: 0,
-  // mobile
-  medium: 600,
-  // tablet
-  expanded: 840,
-  // small desktop
-  large: 1200
-  // desktop
-};
-
 // src/styles/ts/z-index.ts
 var zIndex = {
   level0: 0,
@@ -286,14 +444,6 @@ var zIndex = {
   level5: 1e3
 };
 
-// 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/utils/cn.ts
 var cn = (...classes) => {
   const classNames = [];
@@ -308,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);
         }
       }
@@ -325,8 +475,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React6.useRef(null);
-  React6.useEffect(() => {
+  const previousActiveElement = React9.useRef(null);
+  React9.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -370,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]);
 }
@@ -406,9 +554,7 @@ var useAlert = () => {
   }
   return context;
 };
-var AlertProvider = ({
-  children
-}) => {
+var AlertProvider = ({ children }) => {
   const [alertState, setAlertState] = useState({
     isOpen: false
   });
@@ -457,20 +603,15 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React6.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(
@@ -479,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",
@@ -487,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 })
             ] })
           ]
         }
@@ -523,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 = React6.createContext(null);
+var ToastContext = React9.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -567,63 +660,48 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [exiting, setExiting] = React6.useState(false);
-  const closingRef = React6.useRef(false);
-  const close = React6.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] = React6.useState([]);
-  const [isMounted, setIsMounted] = React6.useState(false);
-  React6.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 = React6.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 = React6.useCallback((id) => {
+  const removeToast = React9.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
@@ -633,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",
@@ -669,52 +748,168 @@ var useToast = () => {
     message: (message, duration) => ctx.addToast(message, "default", duration)
   };
 };
-var Button = ({
-  variant = "primary",
+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 Checkbox = ({
+  label,
   size = "md",
-  fullWidth = true,
-  width,
+  indeterminate,
   className,
-  style,
+  ref,
   ...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 Checkbox = ({ label, size = "md", indeterminate, className, ref, ...props }) => {
-  const inputRef = React6.useRef(null);
-  React6.useImperativeHandle(ref, () => inputRef.current);
-  React6.useEffect(() => {
+  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
-  );
+  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("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
   ] });
 };
 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,
@@ -723,13 +918,9 @@ var FileInput = ({
   disabled,
   ...props
 }) => {
-  const inputId = React6.useId();
-  const helperId = React6.useId();
-  const rootClassName = [
-    "file_input",
-    disabled && "file_input_disabled",
-    className ?? ""
-  ].filter(Boolean).join(" ");
+  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",
@@ -748,11 +939,7 @@ var FileInput = ({
   ] });
 };
 var Radio = ({ label, size = "md", className, ref, ...props }) => {
-  const rootClassName = cn(
-    "radio",
-    `radio_size_${size}`,
-    className
-  );
+  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" }),
@@ -760,6 +947,159 @@ var Radio = ({ label, size = "md", className, ref, ...props }) => {
   ] });
 };
 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,
@@ -775,21 +1115,21 @@ var Select = ({
   className,
   textAlign = "left"
 }) => {
-  const internalId = React6.useId();
+  const internalId = React9.useId();
   const selectId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React6.useState(defaultValue);
+  const [internalValue, setInternalValue] = React9.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internalValue;
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [activeIndex, setActiveIndex] = React6.useState(-1);
-  const [dropUp, setDropUp] = React6.useState(false);
-  const wrapperRef = React6.useRef(null);
-  const controlRef = React6.useRef(null);
-  const currentOption = React6.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 = React6.useCallback(
+  const setValue = React9.useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
@@ -797,12 +1137,12 @@ var Select = ({
     },
     [isControlled, onChange, options]
   );
-  const handleOutsideClick = React6.useEffectEvent((e) => {
+  const handleOutsideClick = React9.useEffectEvent((e) => {
     if (!wrapperRef.current?.contains(e.target)) {
       setIsOpen(false);
     }
   });
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     document.addEventListener("mousedown", handleOutsideClick);
     return () => document.removeEventListener("mousedown", handleOutsideClick);
   }, []);
@@ -867,12 +1207,17 @@ var Select = ({
         break;
     }
   };
-  React6.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]);
-  React6.useLayoutEffect(() => {
+  React9.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
@@ -885,54 +1230,56 @@ var Select = ({
     "select_control",
     `select_variant_${variant}`,
     `select_size_${size}`,
-    { 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) => {
+    { 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("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,
@@ -942,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" })
@@ -949,265 +1304,10 @@ var Select = ({
             },
             opt.value
           );
-        })
-      }
-    )
-  ] });
-};
-var Switch = ({
-  checked,
-  defaultChecked,
-  onChange,
-  size = "md",
-  disabled,
-  className,
-  ariaLabel,
-  ref,
-  ...props
-}) => {
-  const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React6.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 inputId = id ?? React6.useId();
-  const helperId = helperText ? `${inputId}-help` : void 0;
-  const isControlled = value !== void 0;
-  const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-  const [innerValue, setInnerValue] = React6.useState(
-    () => applyTransform(value ?? defaultValue ?? "")
-  );
-  const isComposingRef = React6.useRef(false);
-  React6.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 = React6.useId();
-  const constraintId = React6.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 = [];
@@ -1238,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 = React6.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",
@@ -1257,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",
@@ -1301,18 +1401,18 @@ var Modal = ({
   ariaLabel,
   ...props
 }) => {
-  const panelRef = React6.useRef(null);
-  const titleId = React6.useId();
+  const panelRef = React9.useRef(null);
+  const titleId = React9.useId();
   useFocusTrap(panelRef, open);
-  const handleEscape = React6.useEffectEvent((e) => {
+  const handleEscape = React9.useEffectEvent((e) => {
     if (e.key === "Escape") onClose?.();
   });
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!open) return;
     document.addEventListener("keydown", handleEscape);
     return () => document.removeEventListener("keydown", handleEscape);
   }, [open]);
-  React6.useEffect(() => {
+  React9.useEffect(() => {
     if (!open) return;
     const body = document.body;
     const openModals = parseInt(body.dataset.openModals || "0", 10);
@@ -1345,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 }),