@bigtablet/design-system 1.24.1 → 1.25.0

package/dist/index.js

@@ -1,12 +1,12 @@
 "use client";
 import './index.css';
-import * as React9 from 'react';
+import * as React4 from 'react';
 import { createContext, useContext, useState, useCallback } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { ChevronDown, Check, X, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
 
-// src/styles/ts/a11y.ts
+// src/styles/a11y/index.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)",
@@ -14,7 +14,7 @@ var a11y = {
   tapMinSize: "44px"
 };
 
-// src/styles/ts/border-width.ts
+// src/styles/border-width/index.ts
 var baseBorderWidth = {
   "0": "0px",
   "1": "1px",
@@ -26,7 +26,7 @@ var borderWidth = {
   indicator: baseBorderWidth["2"]
 };
 
-// src/styles/ts/breakpoints.ts
+// src/styles/breakpoints/index.ts
 var breakpoints = {
   compact: 0,
   // mobile
@@ -38,7 +38,7 @@ var breakpoints = {
   // desktop
 };
 
-// src/styles/ts/colors.ts
+// src/styles/colors/index.ts
 var baseColors = {
   brandPrimary: "#121212",
   blue600: "#1A73E8",
@@ -48,6 +48,7 @@ var baseColors = {
   neutral300: "#999999",
   neutral400: "#B3B3B3",
   neutral500: "#888888",
+  neutral600: "#6B6B6B",
   neutral700: "#666666",
   neutral900: "#121212",
   statusError: "#EF4444",
@@ -104,7 +105,7 @@ var colors = {
   }
 };
 
-// src/styles/ts/motion.ts
+// src/styles/motion/index.ts
 var motion = {
   transition: {
     fast: "0.1s ease-in-out",
@@ -119,7 +120,7 @@ var motion = {
   }
 };
 
-// src/styles/ts/opacity.ts
+// src/styles/opacity/index.ts
 var opacity = {
   "0": 0,
   "5": 0.05,
@@ -133,7 +134,7 @@ var opacity = {
   "100": 1
 };
 
-// src/styles/ts/radius.ts
+// src/styles/radius/index.ts
 var radius = {
   none: "0px",
   xs: "4px",
@@ -144,8 +145,8 @@ var radius = {
   full: "9999px"
 };
 
-// src/styles/ts/shadows.ts
-var shadows = {
+// src/styles/elevation/index.ts
+var elevation = {
   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)",
@@ -153,7 +154,7 @@ var shadows = {
   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
+// src/styles/spacing/index.ts
 var spacing = {
   "0": "0px",
   "1": "1px",
@@ -171,7 +172,7 @@ var spacing = {
   "48": "48px"
 };
 
-// src/styles/ts/skeleton.ts
+// src/styles/skeleton/index.ts
 var skeleton = {
   color: {
     base: baseColors.neutral50,
@@ -197,7 +198,7 @@ var skeleton = {
   }
 };
 
-// src/styles/ts/typography.ts
+// src/styles/typography/index.ts
 var baseTypography = {
   fontFamily: {
     primary: "Pretendard"
@@ -217,8 +218,15 @@ var baseTypography = {
     "48": "48px"
   },
   fontWeight: {
+    thin: "Thin",
+    extraLight: "ExtraLight",
+    light: "Light",
     regular: "Regular",
-    medium: "Medium"
+    medium: "Medium",
+    semiBold: "SemiBold",
+    bold: "Bold",
+    extraBold: "ExtraBold",
+    black: "Black"
   },
   lineHeight: {
     "16": "16px",
@@ -434,7 +442,7 @@ var typography = {
   }
 };
 
-// src/styles/ts/z-index.ts
+// src/styles/z-index/index.ts
 var zIndex = {
   level0: 0,
   level1: 10,
@@ -475,8 +483,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React9.useRef(null);
-  React9.useEffect(() => {
+  const previousActiveElement = React4.useRef(null);
+  React4.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -524,28 +532,6 @@ function useFocusTrap(containerRef, isActive) {
     };
   }, [isActive, containerRef]);
 }
-var Card = ({
-  heading,
-  headingAs: HeadingTag = "h3",
-  shadow = "sm",
-  padding = "md",
-  bordered = false,
-  className,
-  children,
-  ...props
-}) => {
-  const cardClassName = cn(
-    "card",
-    `card_shadow_${shadow}`,
-    `card_p_${padding}`,
-    { card_bordered: bordered },
-    className
-  );
-  return /* @__PURE__ */ jsxs("div", { className: cardClassName, ...props, children: [
-    heading ? /* @__PURE__ */ jsx(HeadingTag, { className: "card_title", children: heading }) : null,
-    /* @__PURE__ */ jsx("div", { className: "card_body", children })
-  ] });
-};
 var AlertContext = createContext(null);
 var useAlert = () => {
   const context = useContext(AlertContext);
@@ -603,10 +589,12 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React9.useRef(null);
+  const panelRef = React4.useRef(null);
+  const titleId = React4.useId();
+  const messageId = React4.useId();
   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 = cn("alert_modal", `alert_variant_${variant}`);
+  const actionsClassName = cn("alert_actions", `alert_actions_${actionsAlign}`);
   return /* @__PURE__ */ jsx(
     "div",
     {
@@ -625,11 +613,11 @@ var AlertModal = ({
           },
           role: "alertdialog",
           "aria-modal": "true",
-          "aria-labelledby": "alert_title",
-          "aria-describedby": "alert_message",
+          "aria-labelledby": titleId,
+          "aria-describedby": messageId,
           children: [
-            title && /* @__PURE__ */ jsx("div", { className: "alert_title", id: "alert_title", children: title }),
-            message && /* @__PURE__ */ jsx("div", { className: "alert_message", id: "alert_message", children: message }),
+            title && /* @__PURE__ */ jsx("div", { className: "alert_title", id: titleId, children: title }),
+            message && /* @__PURE__ */ jsx("div", { className: "alert_message", id: messageId, 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 })
@@ -640,178 +628,156 @@ var AlertModal = ({
     }
   );
 };
-var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
-  return /* @__PURE__ */ jsx(
-    "span",
-    {
-      className: "spinner",
-      style: { width: size, height: size },
-      role: "status",
-      "aria-label": ariaLabel
-    }
-  );
-};
-var ToastContext = React9.createContext(null);
-var VARIANT_ICONS = {
-  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
-  error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
-  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 18 }),
-  info: /* @__PURE__ */ jsx(Info, { size: 18 }),
-  default: /* @__PURE__ */ jsx(Bell, { size: 18 })
-};
-var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  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"
-      }
-    )
-  ] });
-};
-var ToastProvider = ({
+var Button = ({
+  variant = "filled",
+  size = "md",
+  leadingIcon,
+  trailingIcon,
+  fullWidth = false,
+  radius: radius2,
+  className,
   children,
-  maxCount = 5,
-  closeAriaLabel = "Close"
+  ...props
 }) => {
-  const [toasts, setToasts] = React9.useState([]);
-  const [isMounted, setIsMounted] = React9.useState(false);
-  React9.useEffect(() => {
-    setIsMounted(true);
-  }, []);
-  const addToast = React9.useCallback(
-    (message, variant, duration = 3e3) => {
-      const id = crypto.randomUUID();
-      setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
-    },
-    [maxCount]
+  const buttonClassName = cn(
+    "button",
+    `button_variant_${variant}`,
+    `button_size_${size}`,
+    fullWidth && "button_full_width",
+    radius2 && `button_radius_${radius2}`,
+    className
   );
-  const removeToast = React9.useCallback((id) => {
-    setToasts((prev) => prev.filter((t) => t.id !== id));
-  }, []);
-  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
-    children,
-    isMounted && createPortal(
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "toast_container",
-          role: "region",
-          "aria-live": "polite",
-          "aria-atomic": "false",
-          "aria-label": "Notifications",
-          children: toasts.map((item) => /* @__PURE__ */ jsx(
-            ToastItemComponent,
-            {
-              item,
-              onRemove: removeToast,
-              closeAriaLabel
-            },
-            item.id
-          ))
-        }
-      ),
-      document.body
-    )
+  return /* @__PURE__ */ jsxs("button", { className: buttonClassName, ...props, children: [
+    leadingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: leadingIcon }),
+    children && /* @__PURE__ */ jsx("span", { className: "button_label", children }),
+    trailingIcon && /* @__PURE__ */ jsx("span", { className: "button_icon", "aria-hidden": "true", children: trailingIcon })
   ] });
 };
-var useToast = () => {
-  const ctx = useContext(ToastContext);
-  if (!ctx) {
-    throw new Error("useToast must be used within ToastProvider");
-  }
-  return {
-    /** 성공 메시지를 표시한다 */
-    success: (message, duration) => ctx.addToast(message, "success", duration),
-    /** 오류 메시지를 표시한다 */
-    error: (message, duration) => ctx.addToast(message, "error", duration),
-    /** 경고 메시지를 표시한다 */
-    warning: (message, duration) => ctx.addToast(message, "warning", duration),
-    /** 정보 메시지를 표시한다 */
-    info: (message, duration) => ctx.addToast(message, "info", duration),
-    /** 기본 메시지를 표시한다 */
-    message: (message, duration) => ctx.addToast(message, "default", duration)
-  };
-};
-var TopLoading = ({
-  progress,
-  color,
-  height = 3,
-  isLoading = true,
-  ariaLabel = "Page loading"
+var Card = ({
+  heading,
+  headingAs: HeadingTag = "h3",
+  shadow = "sm",
+  padding = "md",
+  bordered = false,
+  className,
+  children,
+  ...props
 }) => {
-  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
-          }
-        }
-      )
-    }
+  const cardClassName = cn(
+    "card",
+    `card_shadow_${shadow}`,
+    `card_p_${padding}`,
+    { card_bordered: bordered },
+    className
   );
+  return /* @__PURE__ */ jsxs("div", { className: cardClassName, ...props, children: [
+    heading ? /* @__PURE__ */ jsx(HeadingTag, { className: "card_title", children: heading }) : null,
+    /* @__PURE__ */ jsx("div", { className: "card_body", children })
+  ] });
 };
 var Checkbox = ({
   label,
-  size = "md",
   indeterminate,
+  error,
   className,
   ref,
   ...props
 }) => {
-  const inputRef = React9.useRef(null);
-  React9.useImperativeHandle(ref, () => inputRef.current);
-  React9.useEffect(() => {
+  const inputRef = React4.useRef(null);
+  React4.useImperativeHandle(
+    ref,
+    () => inputRef.current
+  );
+  React4.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
-  const rootClassName = cn("checkbox", `checkbox_size_${size}`, className);
+  const rootClassName = cn(
+    "checkbox",
+    error && "checkbox_error",
+    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" }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        className: "checkbox_input",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "checkbox_state_layer", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "checkbox_icon" }) }),
     label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
   ] });
 };
 Checkbox.displayName = "Checkbox";
+var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "4 10 8 14 16 6" }) });
+var CloseIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "14", y2: "14" }),
+  /* @__PURE__ */ jsx("line", { x1: "14", y1: "6", x2: "6", y2: "14" })
+] });
+var ChevronDownIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "5 8 10 13 15 8" }) });
+var Chip = ({
+  type = "basic",
+  label,
+  selected,
+  removable,
+  disabled,
+  onClick,
+  onRemove,
+  className,
+  ...props
+}) => {
+  const hasLeading = selected;
+  const hasTrailing = type === "input" && removable || type === "filter";
+  const chipClassName = cn(
+    "chip",
+    `chip_type_${type}`,
+    selected && "chip_selected",
+    hasLeading && "chip_has_leading",
+    hasTrailing && "chip_has_trailing",
+    disabled && "chip_disabled",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: chipClassName, ...props, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: "chip_content",
+        disabled,
+        onClick,
+        children: [
+          hasLeading && /* @__PURE__ */ jsx("span", { className: "chip_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(CheckIcon, {}) }),
+          /* @__PURE__ */ jsx("span", { className: "chip_label", children: label })
+        ]
+      }
+    ),
+    hasTrailing && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "chip_trailing",
+        disabled,
+        onClick: type === "input" && removable ? onRemove : onClick,
+        "aria-label": type === "input" && removable ? "Remove" : "Toggle dropdown",
+        children: /* @__PURE__ */ jsx("span", { className: "chip_icon", "aria-hidden": "true", children: type === "input" && removable ? /* @__PURE__ */ jsx(CloseIcon, {}) : /* @__PURE__ */ jsx(ChevronDownIcon, {}) })
+      }
+    )
+  ] });
+};
 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 range = (start, end) => Array.from({ length: end - start + 1 }, (_, i) => start + i);
 var DatePicker = ({
   label,
   value,
   onChange,
   mode = "year-month-day",
   startYear = 1950,
-  endYear = (/* @__PURE__ */ new Date()).getFullYear() + 10,
+  endYear: endYearProp,
   minDate,
   selectableRange = "all",
   disabled,
@@ -823,37 +789,108 @@ var DatePicker = ({
   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 groupId = React4.useId();
+  const constraintId = React4.useId();
+  const { todayYear, todayMonth, todayDay } = React4.useMemo(() => {
+    const now = /* @__PURE__ */ new Date();
+    return {
+      todayYear: now.getFullYear(),
+      todayMonth: now.getMonth() + 1,
+      todayDay: now.getDate()
+    };
+  }, []);
+  const endYear = endYearProp ?? todayYear + 10;
+  const parsed = React4.useMemo(() => {
+    if (!value) return { year: 0, month: 0, day: 0 };
+    const [y, m, d] = value.split("-").map(Number);
+    return {
+      year: y || 0,
+      month: m || 0,
+      day: d || 0
+    };
+  }, [value]);
+  const min = React4.useMemo(() => {
+    if (!minDate) return { year: 0, month: 0, day: 0 };
+    const [y, m, d] = minDate.split("-").map(Number);
+    return {
+      year: y || 0,
+      month: m || 0,
+      day: d || 0
+    };
+  }, [minDate]);
+  const { year, month, day } = parsed;
   const maxYear = selectableRange === "until-today" ? todayYear : endYear;
-  const minMonth = minY && year === minY ? minM : 1;
+  const minMonth = min.year > 0 && year === min.year ? min.month : 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 minDay = min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1;
+  const maxDay = React4.useMemo(() => {
+    if (!year || !month) return 31;
+    const daysInMonth = getDaysInMonth(year, month);
+    if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
+      return Math.min(daysInMonth, todayDay);
     }
-    const safeDay = clampDay(yy, mm, dd ?? 1);
-    onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
-  };
+    return daysInMonth;
+  }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
+  const yearOptions = React4.useMemo(
+    () => range(startYear, maxYear),
+    [startYear, maxYear]
+  );
+  const monthOptions = React4.useMemo(
+    () => range(minMonth, Math.max(minMonth, maxMonth)),
+    [minMonth, maxMonth]
+  );
+  const dayOptions = React4.useMemo(
+    () => range(minDay, Math.max(minDay, maxDay)),
+    [minDay, maxDay]
+  );
+  const emit = React4.useCallback(
+    (yy, mm, dd) => {
+      if (mode === "year-month") {
+        onChange(`${yy}-${pad(mm)}`);
+        return;
+      }
+      const safeDay = Math.min(dd ?? 1, getDaysInMonth(yy, mm));
+      onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
+    },
+    [mode, onChange]
+  );
+  const handleYearChange = React4.useCallback(
+    (newYear) => {
+      let newMonth = month;
+      const newMinMonth = min.year > 0 && newYear === min.year ? min.month : 1;
+      const newMaxMonth = selectableRange === "until-today" && newYear === todayYear ? todayMonth : 12;
+      if (newMonth > 0 && newMonth < newMinMonth) newMonth = newMinMonth;
+      if (newMonth > newMaxMonth) newMonth = newMaxMonth;
+      if (newMonth > 0) {
+        emit(newYear, newMonth, day || void 0);
+      } else {
+        emit(newYear, newMinMonth, day || void 0);
+      }
+    },
+    [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
+  );
+  const handleMonthChange = React4.useCallback(
+    (newMonth) => {
+      if (!year) return;
+      emit(year, newMonth, day || void 0);
+    },
+    [year, day, emit]
+  );
+  const handleDayChange = React4.useCallback(
+    (newDay) => {
+      if (!year || !month) return;
+      emit(year, month, newDay);
+    },
+    [year, month, emit]
+  );
   const containerStyle = width ? { width: normalizeWidth(width) } : void 0;
-  const rootClassName = cn("date_picker", { date_picker_full_width: fullWidth && !width });
+  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);
+  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 }),
@@ -870,12 +907,12 @@ var DatePicker = ({
             "select",
             {
               "aria-label": yearLabel,
-              value: year,
+              value: year || "",
               disabled,
-              onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
+              onChange: (e) => handleYearChange(Number(e.target.value)),
               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))
+                yearOptions.map((y) => /* @__PURE__ */ jsx("option", { value: y, children: y }, y))
               ]
             }
           ),
@@ -883,12 +920,12 @@ var DatePicker = ({
             "select",
             {
               "aria-label": monthLabel,
-              value: month,
+              value: month || "",
               disabled: disabled || !year,
-              onChange: (e) => emit(year, Number(e.target.value), day || minDay),
+              onChange: (e) => handleMonthChange(Number(e.target.value)),
               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))
+                monthOptions.map((m) => /* @__PURE__ */ jsx("option", { value: m, children: pad(m) }, m))
               ]
             }
           ),
@@ -896,12 +933,12 @@ var DatePicker = ({
             "select",
             {
               "aria-label": dayLabel,
-              value: day,
+              value: day || "",
               disabled: disabled || !month,
-              onChange: (e) => emit(year, month, Number(e.target.value)),
+              onChange: (e) => handleDayChange(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))
+                dayOptions.map((d) => /* @__PURE__ */ jsx("option", { value: d, children: pad(d) }, d))
               ]
             }
           )
@@ -910,17 +947,66 @@ var DatePicker = ({
     )
   ] });
 };
+var Divider = ({
+  weight = "standard",
+  className,
+  ...props
+}) => {
+  const dividerClassName = cn(
+    "divider",
+    `divider_weight_${weight}`,
+    className
+  );
+  return /* @__PURE__ */ jsx("hr", { className: dividerClassName, ...props });
+};
+var FAB = ({
+  variant = "primary",
+  icon,
+  className,
+  ...props
+}) => {
+  const fabClassName = cn(
+    "fab",
+    `fab_variant_${variant}`,
+    className
+  );
+  return /* @__PURE__ */ jsx("button", { className: fabClassName, ...props, children: /* @__PURE__ */ jsx("span", { className: "fab_icon", "aria-hidden": "true", children: icon }) });
+};
 var FileInput = ({
   label = "Choose file",
   onFiles,
-  helperText,
+  supportingText,
+  preview = false,
   className,
   disabled,
   ...props
 }) => {
-  const inputId = React9.useId();
-  const helperId = React9.useId();
-  const rootClassName = ["file_input", disabled && "file_input_disabled", className ?? ""].filter(Boolean).join(" ");
+  const inputId = React4.useId();
+  const helperId = React4.useId();
+  const [previewUrls, setPreviewUrls] = React4.useState([]);
+  const handleChange = (e) => {
+    const files = e.currentTarget.files;
+    onFiles?.(files);
+    if (preview && files) {
+      previewUrls.forEach((url) => URL.revokeObjectURL(url));
+      const urls = [];
+      for (let i = 0; i < files.length; i++) {
+        if (files[i].type.startsWith("image/")) {
+          urls.push(URL.createObjectURL(files[i]));
+        }
+      }
+      setPreviewUrls(urls);
+    } else {
+      previewUrls.forEach((url) => URL.revokeObjectURL(url));
+      setPreviewUrls([]);
+    }
+  };
+  React4.useEffect(() => {
+    return () => {
+      previewUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, [previewUrls]);
+  const rootClassName = cn("file_input", disabled && "file_input_disabled", className);
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     /* @__PURE__ */ jsx(
       "input",
@@ -929,259 +1015,357 @@ var FileInput = ({
         type: "file",
         className: "file_input_control",
         disabled,
-        "aria-describedby": helperText ? helperId : void 0,
-        onChange: (e) => onFiles?.(e.currentTarget.files),
+        "aria-describedby": supportingText ? helperId : void 0,
+        onChange: handleChange,
         ...props
       }
     ),
     /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label }),
-    helperText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: helperText })
+    supportingText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: supportingText }),
+    previewUrls.length > 0 && /* @__PURE__ */ jsx("div", { className: "file_input_preview", children: previewUrls.map((url) => /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "file_input_preview_img" }, url)) })
   ] });
 };
-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,
+var IconButton = ({
+  variant = "standard",
   size = "md",
-  disabled,
+  icon,
   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 },
+  const buttonClassName = cn(
+    "icon_button",
+    `icon_button_variant_${variant}`,
+    `icon_button_size_${size}`,
     className
   );
+  return /* @__PURE__ */ jsx("button", { className: buttonClassName, ...props, children: /* @__PURE__ */ jsx("span", { className: "icon_button_icon", "aria-hidden": "true", children: icon }) });
+};
+var LinearProgress = ({
+  totalSteps,
+  currentStep,
+  className,
+  ...props
+}) => {
+  const percent = totalSteps > 0 ? Math.min(Math.max(currentStep / totalSteps, 0), 1) * 100 : 0;
   return /* @__PURE__ */ jsx(
-    "button",
+    "div",
     {
-      ref,
-      type: "button",
-      role: "switch",
-      "aria-checked": isOn,
-      "aria-label": ariaLabel,
-      disabled,
-      onClick: handleToggle,
-      className: rootClassName,
+      className: cn("linear_progress", className),
+      role: "progressbar",
+      "aria-valuenow": currentStep,
+      "aria-valuemin": 0,
+      "aria-valuemax": totalSteps,
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "linear_progress_indicator",
+          style: { width: `${percent}%` }
+        }
+      )
     }
   );
 };
-Switch.displayName = "Switch";
-var TextField = ({
-  id,
+var ListItem = ({
+  overline,
   label,
-  helperText,
-  error,
-  success,
-  variant = "outline",
-  size = "md",
-  leftIcon,
-  rightIcon,
-  fullWidth,
+  supportingText,
+  metadata,
+  leadingElement,
+  trailingElement,
+  alignment = "top",
+  disabled,
+  onClick,
   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 rootClassName = cn(
+    "list_item",
+    `list_item_align_${alignment}`,
+    disabled && "list_item_disabled",
+    onClick && "list_item_interactive",
+    className
   );
-  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}`,
+  return /* @__PURE__ */ jsx(
+    "div",
     {
-      text_field_with_left: !!leftIcon,
-      text_field_with_right: !!rightIcon,
-      text_field_error: !!error,
-      text_field_success: !!success
+      className: rootClassName,
+      onClick: disabled ? void 0 : onClick,
+      onKeyDown: (e) => {
+        if (disabled || !onClick) return;
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick(e);
+        }
+      },
+      role: onClick ? "button" : void 0,
+      tabIndex: onClick && !disabled ? 0 : void 0,
+      "aria-disabled": disabled || void 0,
+      ...props,
+      children: /* @__PURE__ */ jsxs("div", { className: "list_item_state_layer", children: [
+        leadingElement && /* @__PURE__ */ jsx("div", { className: "list_item_leading", children: leadingElement }),
+        /* @__PURE__ */ jsxs("div", { className: "list_item_content", children: [
+          overline && /* @__PURE__ */ jsx("span", { className: "list_item_overline", children: overline }),
+          /* @__PURE__ */ jsx("span", { className: "list_item_label", children: label }),
+          supportingText && /* @__PURE__ */ jsx("span", { className: "list_item_supporting", children: supportingText }),
+          metadata && /* @__PURE__ */ jsx("span", { className: "list_item_metadata", children: metadata })
+        ] }),
+        trailingElement && /* @__PURE__ */ jsx("div", { className: "list_item_trailing", children: trailingElement })
+      ] })
     }
   );
-  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,
+var Modal = ({
+  open,
+  onClose,
+  closeOnOverlay = true,
+  width = 520,
+  title,
+  children,
   className,
-  style,
+  ariaLabel,
   ...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,
-  placeholder = "Select\u2026",
-  options,
-  value,
-  onChange,
-  defaultValue = null,
-  disabled,
-  size = "md",
-  variant = "outline",
-  fullWidth,
-  className,
-  textAlign = "left"
-}) => {
-  const internalId = React9.useId();
-  const selectId = id ?? internalId;
-  const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React9.useState(defaultValue);
-  const currentValue = isControlled ? value ?? null : internalValue;
-  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 = React9.useCallback(
-    (next) => {
-      const option = options.find((o) => o.value === next) ?? null;
-      if (!isControlled) setInternalValue(next);
-      onChange?.(next, option);
-    },
-    [isControlled, onChange, options]
-  );
-  const handleOutsideClick = React9.useEffectEvent((e) => {
-    if (!wrapperRef.current?.contains(e.target)) {
-      setIsOpen(false);
-    }
+  const panelRef = React4.useRef(null);
+  const titleId = React4.useId();
+  useFocusTrap(panelRef, open);
+  const handleEscape = React4.useEffectEvent((e) => {
+    if (e.key === "Escape") onClose?.();
   });
-  React9.useEffect(() => {
-    document.addEventListener("mousedown", handleOutsideClick);
-    return () => document.removeEventListener("mousedown", handleOutsideClick);
-  }, []);
-  const moveActive = (dir) => {
-    if (!isOpen) {
-      setIsOpen(true);
-      return;
+  React4.useEffect(() => {
+    if (!open) return;
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open]);
+  React4.useEffect(() => {
+    if (!open) return;
+    const body = document.body;
+    const openModals = parseInt(body.dataset.openModals || "0", 10);
+    if (openModals === 0) {
+      body.dataset.originalOverflow = window.getComputedStyle(body).overflow;
+      body.style.overflow = "hidden";
     }
-    let i = activeIndex;
-    const len = options.length;
-    for (let step = 0; step < len; step++) {
-      i = (i + dir + len) % len;
-      if (!options[i].disabled) {
-        setActiveIndex(i);
-        break;
+    body.dataset.openModals = String(openModals + 1);
+    return () => {
+      const currentOpenModals = parseInt(body.dataset.openModals || "1", 10);
+      const nextOpenModals = currentOpenModals - 1;
+      if (nextOpenModals === 0) {
+        body.style.overflow = body.dataset.originalOverflow || "";
+        delete body.dataset.openModals;
+        delete body.dataset.originalOverflow;
+      } else {
+        body.dataset.openModals = String(nextOpenModals);
       }
+    };
+  }, [open]);
+  if (!open) return null;
+  const panelClassName = cn("modal_panel", className);
+  const hasTitle = !!title;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "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 }),
+            /* @__PURE__ */ jsx("div", { className: "modal_body", children })
+          ]
+        }
+      )
     }
-  };
-  const commitActive = () => {
-    if (activeIndex < 0 || activeIndex >= options.length) return;
-    const opt = options[activeIndex];
-    if (!opt.disabled) {
-      setValue(opt.value);
-      setIsOpen(false);
-    }
-  };
-  const onKeyDown = (e) => {
-    if (disabled) return;
-    switch (e.key) {
-      case " ":
-      case "Enter":
-        e.preventDefault();
-        if (!isOpen) setIsOpen(true);
-        else commitActive();
-        break;
-      case "ArrowDown":
-        e.preventDefault();
-        moveActive(1);
-        break;
+  );
+};
+var range2 = (start, end) => {
+  const out = [];
+  for (let i = start; i <= end; i += 1) out.push(i);
+  return out;
+};
+var getPaginationItems = (page, totalPages) => {
+  if (totalPages <= 7) return range2(1, totalPages);
+  const items = [];
+  const last = totalPages;
+  const sibling = 2;
+  if (page <= sibling + 2) {
+    for (const p of range2(1, sibling + 3)) items.push(p);
+    items.push("ellipsis");
+    items.push(last);
+    return items;
+  }
+  if (page >= last - sibling - 1) {
+    items.push(1);
+    items.push("ellipsis");
+    for (const p of range2(last - sibling - 2, last)) items.push(p);
+    return items;
+  }
+  items.push(1);
+  items.push("ellipsis");
+  for (const p of range2(page - sibling, page + sibling)) items.push(p);
+  items.push("ellipsis");
+  items.push(last);
+  return items;
+};
+var Pagination = ({
+  page,
+  totalPages,
+  onChange,
+  prevLabel = "Previous page",
+  nextLabel = "Next page"
+}) => {
+  const prevDisabled = page <= 1;
+  const nextDisabled = page >= totalPages;
+  const items = React4.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "pagination_item",
+        onClick: () => onChange(page - 1),
+        disabled: prevDisabled,
+        "aria-label": prevLabel,
+        children: "\u2039"
+      }
+    ),
+    /* @__PURE__ */ jsx("ul", { className: "pagination_pages", children: items.map((it, idx) => {
+      if (it === "ellipsis") {
+        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("li", { children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: buttonClassName,
+          onClick: () => onChange(it),
+          "aria-current": isActive ? "page" : void 0,
+          children: it
+        }
+      ) }, it);
+    }) }),
+    /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: "pagination_item",
+        onClick: () => onChange(page + 1),
+        disabled: nextDisabled,
+        "aria-label": nextLabel,
+        children: "\u203A"
+      }
+    )
+  ] });
+};
+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_state_layer", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "radio_dot" }) }),
+    label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
+  ] });
+};
+Radio.displayName = "Radio";
+var Select = ({
+  id,
+  label,
+  placeholder = "Select\u2026",
+  options,
+  value,
+  onChange,
+  defaultValue = null,
+  disabled,
+  size = "md",
+  variant = "outline",
+  fullWidth,
+  className,
+  textAlign = "left"
+}) => {
+  const internalId = React4.useId();
+  const selectId = id ?? internalId;
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = React4.useState(defaultValue);
+  const currentValue = isControlled ? value ?? null : internalValue;
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [activeIndex, setActiveIndex] = React4.useState(-1);
+  const [dropUp, setDropUp] = React4.useState(false);
+  const wrapperRef = React4.useRef(null);
+  const controlRef = React4.useRef(null);
+  const currentOption = React4.useMemo(
+    () => options.find((o) => o.value === currentValue) ?? null,
+    [options, currentValue]
+  );
+  const setValue = React4.useCallback(
+    (next) => {
+      const option = options.find((o) => o.value === next) ?? null;
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next, option);
+    },
+    [isControlled, onChange, options]
+  );
+  const handleOutsideClick = React4.useEffectEvent((e) => {
+    if (!wrapperRef.current?.contains(e.target)) {
+      setIsOpen(false);
+    }
+  });
+  React4.useEffect(() => {
+    document.addEventListener("mousedown", handleOutsideClick);
+    return () => document.removeEventListener("mousedown", handleOutsideClick);
+  }, []);
+  const moveActive = (dir) => {
+    if (!isOpen) {
+      setIsOpen(true);
+      return;
+    }
+    let i = activeIndex;
+    const len = options.length;
+    for (let step = 0; step < len; step++) {
+      i = (i + dir + len) % len;
+      if (!options[i].disabled) {
+        setActiveIndex(i);
+        break;
+      }
+    }
+  };
+  const commitActive = () => {
+    if (activeIndex < 0 || activeIndex >= options.length) return;
+    const opt = options[activeIndex];
+    if (!opt.disabled) {
+      setValue(opt.value);
+      setIsOpen(false);
+    }
+  };
+  const onKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case " ":
+      case "Enter":
+        e.preventDefault();
+        if (!isOpen) setIsOpen(true);
+        else commitActive();
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        moveActive(1);
+        break;
       case "ArrowUp":
         e.preventDefault();
         moveActive(-1);
@@ -1207,7 +1391,7 @@ var Select = ({
         break;
     }
   };
-  React9.useEffect(() => {
+  React4.useEffect(() => {
     if (!isOpen) return;
     const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
     setActiveIndex(
@@ -1217,7 +1401,7 @@ var Select = ({
       )
     );
   }, [isOpen, options, currentValue]);
-  React9.useLayoutEffect(() => {
+  React4.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 40, 288);
@@ -1309,165 +1493,269 @@ var Select = ({
     }
   );
 };
-var range = (start, end) => {
-  const out = [];
-  for (let i = start; i <= end; i += 1) out.push(i);
-  return out;
-};
-var getPaginationItems = (page, totalPages) => {
-  if (totalPages <= 7) return range(1, totalPages);
-  const items = [];
-  const last = totalPages;
-  const sibling = 2;
-  if (page <= sibling + 2) {
-    for (const p of range(1, sibling + 3)) items.push(p);
-    items.push("ellipsis");
-    items.push(last);
-    return items;
-  }
-  if (page >= last - sibling - 1) {
-    items.push(1);
-    items.push("ellipsis");
-    for (const p of range(last - sibling - 2, last)) items.push(p);
-    return items;
-  }
-  items.push(1);
-  items.push("ellipsis");
-  for (const p of range(page - sibling, page + sibling)) items.push(p);
-  items.push("ellipsis");
-  items.push(last);
-  return items;
+var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: "spinner",
+      style: { width: size, height: size },
+      role: "status",
+      "aria-label": ariaLabel
+    }
+  );
 };
-var Pagination = ({
-  page,
-  totalPages,
+var Switch = ({
+  checked,
+  defaultChecked,
   onChange,
-  prevLabel = "Previous page",
-  nextLabel = "Next page"
+  size = "md",
+  disabled,
+  className,
+  ariaLabel,
+  ref,
+  ...props
 }) => {
-  const prevDisabled = page <= 1;
-  const nextDisabled = page >= totalPages;
-  const items = React9.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
-  return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
-    /* @__PURE__ */ jsx(
-      "button",
-      {
-        type: "button",
-        className: "pagination_item",
-        onClick: () => onChange(page - 1),
-        disabled: prevDisabled,
-        "aria-label": prevLabel,
-        children: "\u2039"
-      }
-    ),
-    /* @__PURE__ */ jsx("ul", { className: "pagination_pages", children: items.map((it, idx) => {
-      if (it === "ellipsis") {
-        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("li", { children: /* @__PURE__ */ jsx(
-        "button",
+  const isControlled = checked !== void 0;
+  const [innerChecked, setInnerChecked] = React4.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,
+  showLabel = true,
+  supportingText,
+  error,
+  leadingIcon,
+  trailingIcon,
+  fullWidth,
+  className,
+  onChangeAction,
+  value,
+  defaultValue,
+  transformValue,
+  ref,
+  ...props
+}) => {
+  const generatedId = React4.useId();
+  const inputId = id ?? generatedId;
+  const helperId = supportingText ? `${inputId}-help` : void 0;
+  const isControlled = value !== void 0;
+  const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
+  const [innerValue, setInnerValue] = React4.useState(
+    () => applyTransform(value ?? defaultValue ?? "")
+  );
+  const isComposingRef = React4.useRef(false);
+  React4.useEffect(() => {
+    if (!isControlled) return;
+    const nextValue = value ?? "";
+    setInnerValue(transformValue ? transformValue(nextValue) : nextValue);
+  }, [isControlled, value, transformValue]);
+  const rootClassName = cn(
+    "text_field",
+    fullWidth && "text_field_full_width",
+    error && "text_field_error",
+    props.disabled && "text_field_disabled",
+    className
+  );
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
+    /* @__PURE__ */ jsxs("div", { className: "text_field_container", children: [
+      leadingIcon && /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }),
+      /* @__PURE__ */ jsx("div", { className: "text_field_input_wrap", children: /* @__PURE__ */ jsx(
+        "input",
         {
-          type: "button",
-          className: buttonClassName,
-          onClick: () => onChange(it),
-          "aria-current": isActive ? "page" : void 0,
-          children: it
+          id: inputId,
+          ref,
+          className: "text_field_input",
+          "aria-invalid": !!error,
+          "aria-describedby": helperId,
+          "aria-label": !showLabel ? label : void 0,
+          ...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);
+          }
         }
-      ) }, it);
-    }) }),
+      ) }),
+      trailingIcon && /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }),
+      label && showLabel && /* @__PURE__ */ jsx("label", { className: "text_field_label", htmlFor: inputId, children: label })
+    ] }),
+    supportingText && /* @__PURE__ */ jsx("div", { id: helperId, className: "text_field_helper", children: supportingText })
+  ] });
+};
+TextField.displayName = "TextField";
+var ToastContext = React4.createContext(null);
+var VARIANT_ICONS = {
+  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
+  error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 18 }),
+  info: /* @__PURE__ */ jsx(Info, { size: 18 }),
+  default: /* @__PURE__ */ jsx(Bell, { size: 18 })
+};
+var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
+  const [exiting, setExiting] = React4.useState(false);
+  const closingRef = React4.useRef(false);
+  const close = React4.useCallback(() => {
+    if (closingRef.current) return;
+    closingRef.current = true;
+    setExiting(true);
+    setTimeout(() => onRemove(item.id), 260);
+  }, [item.id, onRemove]);
+  const itemClassName = cn("toast_item", exiting && "toast_item_exiting");
+  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(
-      "button",
+      "div",
       {
-        type: "button",
-        className: "pagination_item",
-        onClick: () => onChange(page + 1),
-        disabled: nextDisabled,
-        "aria-label": nextLabel,
-        children: "\u203A"
+        className: `toast_progress toast_progress_${item.variant}`,
+        style: { "--toast-duration": `${item.duration}ms` },
+        onAnimationEnd: close,
+        "aria-hidden": "true"
       }
     )
   ] });
 };
-var Modal = ({
-  open,
-  onClose,
-  closeOnOverlay = true,
-  width = 520,
-  title,
+var ToastProvider = ({
   children,
-  className,
-  ariaLabel,
-  ...props
+  maxCount = 5,
+  closeAriaLabel = "Close"
 }) => {
-  const panelRef = React9.useRef(null);
-  const titleId = React9.useId();
-  useFocusTrap(panelRef, open);
-  const handleEscape = React9.useEffectEvent((e) => {
-    if (e.key === "Escape") onClose?.();
-  });
-  React9.useEffect(() => {
-    if (!open) return;
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [open]);
-  React9.useEffect(() => {
-    if (!open) return;
-    const body = document.body;
-    const openModals = parseInt(body.dataset.openModals || "0", 10);
-    if (openModals === 0) {
-      body.dataset.originalOverflow = window.getComputedStyle(body).overflow;
-      body.style.overflow = "hidden";
-    }
-    body.dataset.openModals = String(openModals + 1);
-    return () => {
-      const currentOpenModals = parseInt(body.dataset.openModals || "1", 10);
-      const nextOpenModals = currentOpenModals - 1;
-      if (nextOpenModals === 0) {
-        body.style.overflow = body.dataset.originalOverflow || "";
-        delete body.dataset.openModals;
-        delete body.dataset.originalOverflow;
-      } else {
-        body.dataset.openModals = String(nextOpenModals);
-      }
-    };
-  }, [open]);
-  if (!open) return null;
-  const panelClassName = cn("modal_panel", className);
-  const hasTitle = !!title;
+  const [toasts, setToasts] = React4.useState([]);
+  const [isMounted, setIsMounted] = React4.useState(false);
+  React4.useEffect(() => {
+    setIsMounted(true);
+  }, []);
+  const addToast = React4.useCallback(
+    (message, variant, duration = 3e3) => {
+      const id = crypto.randomUUID();
+      setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
+    },
+    [maxCount]
+  );
+  const removeToast = React4.useCallback((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
+    children,
+    isMounted && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "toast_container",
+          role: "region",
+          "aria-live": "polite",
+          "aria-atomic": "false",
+          "aria-label": "Notifications",
+          children: toasts.map((item) => /* @__PURE__ */ jsx(
+            ToastItemComponent,
+            {
+              item,
+              onRemove: removeToast,
+              closeAriaLabel
+            },
+            item.id
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+};
+var useToast = () => {
+  const ctx = useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within ToastProvider");
+  }
+  return {
+    /** 성공 메시지를 표시한다 */
+    success: (message, duration) => ctx.addToast(message, "success", duration),
+    /** 오류 메시지를 표시한다 */
+    error: (message, duration) => ctx.addToast(message, "error", duration),
+    /** 경고 메시지를 표시한다 */
+    warning: (message, duration) => ctx.addToast(message, "warning", duration),
+    /** 정보 메시지를 표시한다 */
+    info: (message, duration) => ctx.addToast(message, "info", duration),
+    /** 기본 메시지를 표시한다 */
+    message: (message, duration) => ctx.addToast(message, "default", duration)
+  };
+};
+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: "modal",
-      role: "dialog",
-      "aria-modal": "true",
-      "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(
+      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: 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 }),
-            /* @__PURE__ */ jsx("div", { className: "modal_body", children })
-          ]
+          className: cn("top_loading_bar", isIndeterminate && "top_loading_indeterminate"),
+          style: {
+            width: isIndeterminate ? void 0 : `${progress}%`,
+            backgroundColor: color
+          }
         }
       )
     }
   );
 };
 
-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 };
+export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, FAB, FileInput, IconButton, LinearProgress, ListItem, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };