@bigtablet/design-system 2.0.6 → 2.1.0

package/README.md

@@ -211,7 +211,7 @@ For non-React environments (Thymeleaf, JSP, PHP, etc.), use directly via CDN.
 | Category | Components |
 |----------|------------|
 | **General** | `Button`, `Select`, `Chip`, `FAB`, `IconButton` |
-| **Form** | `TextField`, `Checkbox`, `Radio`, `Switch`, `DatePicker`, `FileInput` |
+| **Form** | `TextField`, `Checkbox`, `Radio`, `Toggle`, `DatePicker`, `FileInput` |
 | **Feedback** | `Alert`, `Toast`, `Spinner`, `TopLoading`, `LinearProgress` |
 | **Navigation** | `Pagination` |
 | **Overlay** | `Modal` |

package/dist/index.css

@@ -1205,6 +1205,70 @@
   pointer-events: none;
 }
 
+/* src/ui/otp-input/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+.otp_input {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+.otp_input_boxes {
+  display: flex;
+  gap: 6px;
+}
+.otp_input_box {
+  width: 48px;
+  min-height: 56px;
+  padding: 4px;
+  border: 1px solid #E5E5E5;
+  border-radius: 12px;
+  background: none;
+  font-family: "Pretendard", sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  color: #121212;
+  text-align: center;
+  outline: none;
+  transition: border-color 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
+}
+.otp_input_box:hover:not(:disabled):not(:focus) {
+  border-color: #B3B3B3;
+}
+.otp_input_box:focus {
+  border-color: #121212;
+  border-width: 2px;
+  padding: calc(4px - 1px);
+}
+.otp_input_box_disabled {
+  cursor: not-allowed;
+  color: #666666;
+}
+.otp_input_box_error {
+  border-color: #EF4444;
+}
+.otp_input_box_error:focus {
+  border-color: #EF4444;
+}
+.otp_input_supporting {
+  padding-top: 4px;
+  font-family: "Pretendard", sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 16px;
+  color: #666666;
+}
+.otp_input_supporting_error {
+  color: #EF4444;
+}
+
 /* src/ui/modal/style.scss */
 @keyframes skeleton_loading {
   0% {
@@ -1663,7 +1727,7 @@
   animation: spinner_spin 0.8s linear infinite;
 }
 
-/* src/ui/switch/style.scss */
+/* src/ui/toggle/style.scss */
 @keyframes skeleton_loading {
   0% {
     background-position: 100% 0;
@@ -1672,7 +1736,7 @@
     background-position: 0 0;
   }
 }
-.switch {
+.toggle {
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -1680,17 +1744,17 @@
   width: 40px;
   height: 24px;
   padding: 2px;
-  border: 2px solid #E5E5E5;
+  border: 2px solid transparent;
   border-radius: 9999px;
-  background: #F4F4F4;
+  background: #B3B3B3;
   transition: background 0.2s ease-in-out, border-color 0.2s ease-in-out;
   cursor: pointer;
 }
-.switch_thumb {
+.toggle_thumb {
   position: relative;
-  width: 16px;
-  height: 16px;
-  background: #888888;
+  width: 12px;
+  height: 12px;
+  background: #FFFFFF;
   border-radius: 9999px;
   transition:
     transform 0.2s ease-in-out,
@@ -1699,79 +1763,68 @@
     background 0.2s ease-in-out;
   transform: translateX(0);
 }
-.switch_on {
+.toggle_on {
   background: #121212;
-  border-color: #121212;
 }
-.switch_on .switch_thumb {
+.toggle_on .toggle_thumb {
   width: 20px;
   height: 20px;
   background: #FFFFFF;
   transform: translateX(14px);
 }
-.switch:not(:disabled):hover {
+.toggle_on.toggle_disabled {
+  background: #B3B3B3;
+  border-color: transparent;
+}
+.toggle_on.toggle_disabled .toggle_thumb {
+  background: #FFFFFF;
+}
+.toggle:not(:disabled):hover {
   opacity: 0.88;
 }
-.switch:focus-visible {
+.toggle:focus-visible {
   outline: none;
   box-shadow: 0 0 0 3px rgba(18, 18, 18, 0.15);
 }
-.switch:not(:disabled):active .switch_thumb {
+.toggle:not(:disabled):active .toggle_thumb {
   width: 20px;
   height: 20px;
 }
-.switch_on:not(:disabled):active .switch_thumb {
-  transform: translateX(12px);
-}
-.switch_size_sm {
-  width: 34px;
-  height: 20px;
-  padding: 2px;
-}
-.switch_size_sm .switch_thumb {
-  width: 12px;
-  height: 12px;
-}
-.switch_size_sm.switch_on .switch_thumb {
-  width: 16px;
-  height: 16px;
+.toggle_on:not(:disabled):active .toggle_thumb {
   transform: translateX(12px);
 }
-.switch_size_sm:not(:disabled):active .switch_thumb {
-  width: 16px;
-  height: 16px;
-}
-.switch_size_sm.switch_on:not(:disabled):active .switch_thumb {
-  transform: translateX(10px);
-}
-.switch_size_md {
+.toggle_size_sm {
   width: 40px;
   height: 24px;
 }
-.switch_size_lg {
+.toggle_size_md {
   width: 48px;
   height: 28px;
   padding: 2px;
 }
-.switch_size_lg .switch_thumb {
-  width: 20px;
-  height: 20px;
+.toggle_size_md .toggle_thumb {
+  width: 16px;
+  height: 16px;
 }
-.switch_size_lg.switch_on .switch_thumb {
+.toggle_size_md.toggle_on .toggle_thumb {
   width: 24px;
   height: 24px;
   transform: translateX(18px);
 }
-.switch_size_lg:not(:disabled):active .switch_thumb {
+.toggle_size_md:not(:disabled):active .toggle_thumb {
   width: 24px;
   height: 24px;
 }
-.switch_size_lg.switch_on:not(:disabled):active .switch_thumb {
+.toggle_size_md.toggle_on:not(:disabled):active .toggle_thumb {
   transform: translateX(16px);
 }
-.switch_disabled {
-  opacity: 0.38;
+.toggle_disabled {
   cursor: not-allowed;
+  border-color: transparent;
+  background: #B3B3B3;
+}
+.toggle_disabled .toggle_thumb {
+  background: #FFFFFF;
 }
 
 /* src/ui/textfield/style.scss */

package/dist/index.d.ts

@@ -748,6 +748,37 @@ interface ListItemProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "on
  */
 declare const ListItem: ({ overline, label, supportingText, metadata, leadingElement, trailingElement, alignment, disabled, onClick, className, ...props }: ListItemProps) => react_jsx_runtime.JSX.Element;
 
+interface OtpInputProps {
+    /** OTP 자릿수 (기본값: 6) */
+    length?: 4 | 6;
+    /** 제어형 값 */
+    value?: string;
+    /** 값 변경 콜백 */
+    onChange?: (value: string) => void;
+    /** 에러 상태 */
+    error?: boolean;
+    /** 비활성화 */
+    disabled?: boolean;
+    /** 하단 도움말 텍스트 */
+    supportingText?: string;
+    /** 첫 번째 입력에 자동 포커스 */
+    autoFocus?: boolean;
+    /** 접근성 레이블 */
+    ariaLabel?: string;
+    /** 추가 className */
+    className?: string;
+}
+/**
+ * OTP 입력 컴포넌트를 렌더링한다.
+ * 각 자리를 개별 입력으로 분리하고, 자동 포커스 이동·붙여넣기를 지원한다.
+ * @param props OTP 입력 속성
+ * @returns 렌더링된 OTP 입력 요소
+ */
+declare const OtpInput: {
+    ({ length, value, onChange, error, disabled, supportingText, autoFocus, ariaLabel, className, }: OtpInputProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface ModalProps extends Omit<React$1.HTMLAttributes<HTMLDivElement>, "title"> {
     /** 모달 열림 여부 */
     open: boolean;
@@ -866,30 +897,30 @@ interface SpinnerProps {
  */
 declare const Spinner: ({ size, ariaLabel }: SpinnerProps) => react_jsx_runtime.JSX.Element;
 
-interface SwitchProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
-    /** 제어형 스위치 상태 */
+interface ToggleProps extends Omit<React$1.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> {
+    /** 제어형 토글 상태 */
     checked?: boolean;
-    /** 비제어형 초기 스위치 상태 */
+    /** 비제어형 초기 토글 상태 */
     defaultChecked?: boolean;
     /** 상태 변경 시 호출되는 콜백 */
     onChange?: (checked: boolean) => void;
-    /** 스위치 크기 (기본값: "md") */
-    size?: "sm" | "md" | "lg";
+    /** 토글 크기 (기본값: "sm") */
+    size?: "sm" | "md";
     /** 비활성화 여부 */
     disabled?: boolean;
-    /** 스위치 접근성 레이블(스크린 리더용) */
+    /** 토글 접근성 레이블(스크린 리더용) */
     ariaLabel: string;
     /** 버튼 요소 참조 */
     ref?: React$1.Ref<HTMLButtonElement>;
 }
 /**
- * 스위치를 렌더링한다.
- * 제어형/비제어형 상태를 판별해 토글 로직을 수행하고 버튼 형태의 스위치 UI를 반환한다.
- * @param props 스위치 속성
- * @returns 렌더링된 스위치 요소
+ * 토글을 렌더링한다.
+ * 제어형/비제어형 상태를 판별해 토글 로직을 수행하고 버튼 형태의 토글 UI를 반환한다.
+ * @param props 토글 속성
+ * @returns 렌더링된 토글 요소
  */
-declare const Switch: {
-    ({ checked, defaultChecked, onChange, size, disabled, className, ariaLabel, ref, ...props }: SwitchProps): react_jsx_runtime.JSX.Element;
+declare const Toggle: {
+    ({ checked, defaultChecked, onChange, size, disabled, className, ariaLabel, ref, ...props }: ToggleProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 
@@ -986,4 +1017,4 @@ interface TopLoadingProps {
  */
 declare const TopLoading: ({ progress, color, height, isLoading, ariaLabel, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, Switch, type SwitchProps, TextField, type TextFieldProps, ToastProvider, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };
+export { AlertProvider, Button, type ButtonProps, Card, type CardProps, Checkbox, type CheckboxProps, Chip, type ChipProps, type ChipType, DatePicker, type DatePickerProps, Divider, type DividerProps, FAB, type FABProps, type FABVariant, FileInput, type FileInputProps, Icon, IconButton, type IconButtonProps, type IconButtonSize, type IconButtonVariant, type IconName, type IconProps, type IconWeight, LinearProgress, type LinearProgressProps, ListItem, type ListItemProps, Modal, type ModalProps, OtpInput, type OtpInputProps, Pagination, type PaginationProps, Radio, type RadioProps, Select, type SelectOption, type SelectProps, Spinner, type SpinnerProps, TextField, type TextFieldProps, ToastProvider, Toggle, type ToggleProps, TopLoading, type TopLoadingProps, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/dist/index.js

@@ -1756,6 +1756,105 @@ var ListItem = ({
     }
   );
 };
+var OtpInput = ({
+  length = 6,
+  value = "",
+  onChange,
+  error = false,
+  disabled = false,
+  supportingText,
+  autoFocus = false,
+  ariaLabel = "OTP \uC785\uB825",
+  className
+}) => {
+  const inputsRef = React5.useRef([]);
+  const digits = React5.useMemo(() => {
+    const arr = value.split("").slice(0, length);
+    while (arr.length < length) arr.push("");
+    return arr;
+  }, [value, length]);
+  const focusInput = (index) => {
+    inputsRef.current[index]?.focus();
+  };
+  const updateValue = (newDigits) => {
+    onChange?.(newDigits.join(""));
+  };
+  const handleChange = (index, e) => {
+    const val = e.target.value;
+    if (val && !/^\d$/.test(val)) return;
+    const newDigits = [...digits];
+    newDigits[index] = val;
+    updateValue(newDigits);
+    if (val && index < length - 1) {
+      focusInput(index + 1);
+    }
+  };
+  const handleKeyDown = (index, e) => {
+    if (e.key === "Backspace") {
+      if (digits[index]) {
+        const newDigits = [...digits];
+        newDigits[index] = "";
+        updateValue(newDigits);
+      } else if (index > 0) {
+        focusInput(index - 1);
+        const newDigits = [...digits];
+        newDigits[index - 1] = "";
+        updateValue(newDigits);
+      }
+      e.preventDefault();
+    }
+    if (e.key === "ArrowLeft" && index > 0) {
+      focusInput(index - 1);
+      e.preventDefault();
+    }
+    if (e.key === "ArrowRight" && index < length - 1) {
+      focusInput(index + 1);
+      e.preventDefault();
+    }
+  };
+  const handlePaste = (e) => {
+    e.preventDefault();
+    const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
+    if (!pasted) return;
+    const newDigits = [...digits];
+    for (let i = 0; i < pasted.length; i++) {
+      newDigits[i] = pasted[i];
+    }
+    updateValue(newDigits);
+    const nextIndex = Math.min(pasted.length, length - 1);
+    focusInput(nextIndex);
+  };
+  const rootClassName = cn("otp_input", className);
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
+    /* @__PURE__ */ jsx("div", { className: "otp_input_boxes", children: digits.map((digit, i) => /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => {
+          inputsRef.current[i] = el;
+        },
+        type: "text",
+        inputMode: "numeric",
+        pattern: "\\d*",
+        maxLength: 1,
+        value: digit,
+        onChange: (e) => handleChange(i, e),
+        onKeyDown: (e) => handleKeyDown(i, e),
+        onPaste: i === 0 ? handlePaste : void 0,
+        disabled,
+        autoFocus: autoFocus && i === 0,
+        "aria-label": `${i + 1}\uBC88\uC9F8 \uC790\uB9AC`,
+        className: cn(
+          "otp_input_box",
+          error && "otp_input_box_error",
+          disabled && "otp_input_box_disabled"
+        )
+      },
+      i
+    )) }),
+    supportingText && /* @__PURE__ */ jsx("span", { className: cn("otp_input_supporting", error && "otp_input_supporting_error"), children: supportingText })
+  ] });
+};
+OtpInput.displayName = "OtpInput";
 var Modal = ({
   open,
   onClose,
@@ -2145,11 +2244,11 @@ var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
     }
   );
 };
-var Switch = ({
+var Toggle = ({
   checked,
   defaultChecked,
   onChange,
-  size = "md",
+  size = "sm",
   disabled,
   className,
   ariaLabel,
@@ -2166,9 +2265,9 @@ var Switch = ({
     onChange?.(next);
   };
   const rootClassName = cn(
-    "switch",
-    `switch_size_${size}`,
-    { switch_on: isOn, switch_disabled: disabled },
+    "toggle",
+    `toggle_size_${size}`,
+    { toggle_on: isOn, toggle_disabled: disabled },
     className
   );
   return /* @__PURE__ */ jsx(
@@ -2183,11 +2282,11 @@ var Switch = ({
       onClick: handleToggle,
       className: rootClassName,
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
+      children: /* @__PURE__ */ jsx("span", { className: "toggle_thumb" })
     }
   );
 };
-Switch.displayName = "Switch";
+Toggle.displayName = "Toggle";
 var ClearIcon = () => /* @__PURE__ */ jsx(Icon, { name: "close", size: 20 });
 var TextField = ({
   id,
@@ -2415,4 +2514,4 @@ var TopLoading = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, FAB, FileInput, Icon, 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 };
+export { AlertProvider, Button, Card, Checkbox, Chip, DatePicker, Divider, FAB, FileInput, Icon, IconButton, LinearProgress, ListItem, Modal, OtpInput, Pagination, Radio, Select, Spinner, TextField, ToastProvider, Toggle, TopLoading, a11y, baseBorderWidth, baseColors, baseTypography, borderWidth, breakpoints, colors, elevation, motion, opacity, radius, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/dist/vanilla/bigtablet.min.css

@@ -1 +1 @@
-@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-primary: #121212;--bt-color-on-primary: #FFFFFF;--bt-color-background: #FFFFFF;--bt-color-background-dim: #F4F4F4;--bt-color-background-overlay: rgba(0, 0, 0, 0.5);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #888888;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-border: #E5E5E5;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-text-primary: var(--bt-color-text-heading);--bt-color-text-secondary: var(--bt-color-text-body);--bt-color-text-tertiary: var(--bt-color-text-caption);--bt-color-background-secondary: var(--bt-color-background-dim);--bt-color-border-light: #B3B3B3;--bt-color-hover: rgba(0, 0, 0, 0.05);--bt-color-pressed: rgba(26, 26, 26, 0.12);--bt-color-primary-hover: rgb(56.25, 56.25, 56.25);--bt-color-overlay: rgba(0, 0, 0, 0.5);--bt-color-success: #10B981;--bt-color-error: #EF4444;--bt-color-warning: #F59E0B;--bt-color-info: #3B82F6;--bt-spacing-4: 4px;--bt-spacing-8: 8px;--bt-spacing-12: 12px;--bt-spacing-16: 16px;--bt-spacing-20: 20px;--bt-spacing-24: 24px;--bt-spacing-32: 32px;--bt-spacing-40: 40px;--bt-spacing-48: 48px;--bt-spacing-xs: var(--bt-spacing-4);--bt-spacing-sm: var(--bt-spacing-8);--bt-spacing-md: var(--bt-spacing-12);--bt-spacing-lg: var(--bt-spacing-16);--bt-spacing-xl: var(--bt-spacing-20);--bt-spacing-2xl: var(--bt-spacing-24);--bt-spacing-3xl: var(--bt-spacing-32);--bt-font-family: Pretendard, sans-serif;--bt-font-size-12: 12px;--bt-font-size-14: 14px;--bt-font-size-15: 15px;--bt-font-size-16: 16px;--bt-font-size-18: 18px;--bt-font-size-20: 20px;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-line-height-20: 20px;--bt-line-height-24: 24px;--bt-font-size-sm: var(--bt-font-size-14);--bt-font-size-base: var(--bt-font-size-15);--bt-font-size-md: var(--bt-font-size-16);--bt-font-size-lg: var(--bt-font-size-18);--bt-font-size-xl: var(--bt-font-size-20);--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-elevation-1: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-elevation-2: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-elevation-3: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-elevation-4: 0 5px 5px -5px rgba(0, 0, 0, 0.2), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-elevation-5: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 20px 20px 0px rgba(0, 0, 0, 0.12);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:rgba(0,0,0,.05)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:rgb(235.7842364532, 30.4157635468, 30.4157635468)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-primary);background:var(--bt-color-background);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-primary);border-color:var(--bt-color-primary)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-background);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-primary);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-switch{position:relative;display:inline-flex;align-items:center;width:40px;height:22px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-switch__thumb{width:18px;height:18px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base);transform:translateX(0)}.bt-switch--on{background:var(--bt-color-primary)}.bt-switch--on .bt-switch__thumb{transform:translateX(18px)}.bt-switch--sm{width:34px;height:18px}.bt-switch--sm .bt-switch__thumb{width:14px;height:14px}.bt-switch--sm.bt-switch--on .bt-switch__thumb{transform:translateX(16px)}.bt-switch--lg{width:48px;height:26px}.bt-switch--lg .bt-switch__thumb{width:22px;height:22px}.bt-switch--lg.bt-switch--on .bt-switch__thumb{transform:translateX(22px)}.bt-switch--disabled{opacity:.6;cursor:not-allowed}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-2);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-elevation-3);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-elevation-4);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--elevation-1{box-shadow:var(--bt-elevation-1)}.bt-card--elevation-2{box-shadow:var(--bt-elevation-2)}.bt-card--elevation-3{box-shadow:var(--bt-elevation-3)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-primary);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-primary);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-color-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-3)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}
+@keyframes skeleton_loading{0%{background-position:100% 0}100%{background-position:0 0}}:root{--bt-color-primary: #121212;--bt-color-on-primary: #FFFFFF;--bt-color-background: #FFFFFF;--bt-color-background-dim: #F4F4F4;--bt-color-background-overlay: rgba(0, 0, 0, 0.5);--bt-color-text-heading: #121212;--bt-color-text-body: #666666;--bt-color-text-caption: #888888;--bt-color-text-inverse: #FFFFFF;--bt-color-text-disabled: rgba(26, 26, 26, 0.38);--bt-color-border: #E5E5E5;--bt-color-border-subtle: rgba(0, 0, 0, 0.08);--bt-color-border-focus: #121212;--bt-color-text-primary: var(--bt-color-text-heading);--bt-color-text-secondary: var(--bt-color-text-body);--bt-color-text-tertiary: var(--bt-color-text-caption);--bt-color-background-secondary: var(--bt-color-background-dim);--bt-color-border-light: #B3B3B3;--bt-color-hover: rgba(0, 0, 0, 0.05);--bt-color-pressed: rgba(26, 26, 26, 0.12);--bt-color-primary-hover: rgb(56.25, 56.25, 56.25);--bt-color-overlay: rgba(0, 0, 0, 0.5);--bt-color-success: #10B981;--bt-color-error: #EF4444;--bt-color-warning: #F59E0B;--bt-color-info: #3B82F6;--bt-spacing-4: 4px;--bt-spacing-8: 8px;--bt-spacing-12: 12px;--bt-spacing-16: 16px;--bt-spacing-20: 20px;--bt-spacing-24: 24px;--bt-spacing-32: 32px;--bt-spacing-40: 40px;--bt-spacing-48: 48px;--bt-spacing-xs: var(--bt-spacing-4);--bt-spacing-sm: var(--bt-spacing-8);--bt-spacing-md: var(--bt-spacing-12);--bt-spacing-lg: var(--bt-spacing-16);--bt-spacing-xl: var(--bt-spacing-20);--bt-spacing-2xl: var(--bt-spacing-24);--bt-spacing-3xl: var(--bt-spacing-32);--bt-font-family: Pretendard, sans-serif;--bt-font-size-12: 12px;--bt-font-size-14: 14px;--bt-font-size-15: 15px;--bt-font-size-16: 16px;--bt-font-size-18: 18px;--bt-font-size-20: 20px;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-line-height-20: 20px;--bt-line-height-24: 24px;--bt-font-size-sm: var(--bt-font-size-14);--bt-font-size-base: var(--bt-font-size-15);--bt-font-size-md: var(--bt-font-size-16);--bt-font-size-lg: var(--bt-font-size-18);--bt-font-size-xl: var(--bt-font-size-20);--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-elevation-1: 0 1px 1px -1px rgba(0, 0, 0, 0.2), 0 3px 3px 0px rgba(0, 0, 0, 0.12);--bt-elevation-2: 0 2px 2px -2px rgba(0, 0, 0, 0.2), 0 6px 6px 0px rgba(0, 0, 0, 0.12);--bt-elevation-3: 0 3px 3px -3px rgba(0, 0, 0, 0.2), 0 9px 9px 0px rgba(0, 0, 0, 0.12);--bt-elevation-4: 0 5px 5px -5px rgba(0, 0, 0, 0.2), 0 15px 15px 0px rgba(0, 0, 0, 0.12);--bt-elevation-5: 0 8px 10px -5px rgba(0, 0, 0, 0.2), 0 20px 20px 0px rgba(0, 0, 0, 0.12);--bt-transition-fast: 0.1s ease-in-out;--bt-transition-base: 0.2s ease-in-out;--bt-transition-slow: 0.3s ease-in-out;--bt-z-modal: 1000;--bt-z-toast: 1000}.bt-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);border-radius:var(--bt-radius-md);border:none;cursor:pointer;font-family:var(--bt-font-family);font-weight:var(--bt-font-weight-medium);transition:background var(--bt-transition-base),color var(--bt-transition-base),box-shadow var(--bt-transition-base),transform var(--bt-transition-base)}.bt-button:disabled{cursor:not-allowed;opacity:.6}.bt-button--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-button--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-button--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-button--primary{background:var(--bt-color-primary);color:var(--bt-color-background)}.bt-button--primary:hover:not(:disabled){background:var(--bt-color-primary-hover)}.bt-button--primary:active:not(:disabled){transform:scale(0.98)}.bt-button--secondary{background:rgba(0,0,0,0);border:1px solid var(--bt-color-border);color:var(--bt-color-text-primary)}.bt-button--secondary:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-button--secondary:active:not(:disabled){transform:scale(0.98)}.bt-button--ghost{background:rgba(0,0,0,0);color:var(--bt-color-text-primary)}.bt-button--ghost:hover:not(:disabled){background:rgba(0,0,0,.05)}.bt-button--ghost:active:not(:disabled){transform:scale(0.96)}.bt-button--danger{background:var(--bt-color-error);color:var(--bt-color-background)}.bt-button--danger:hover:not(:disabled){background:rgb(235.7842364532, 30.4157635468, 30.4157635468)}.bt-button--danger:active:not(:disabled){transform:scale(0.98)}.bt-button--full-width{width:100%}.bt-text-field{display:flex;flex-direction:column}.bt-text-field--full-width{width:100%}.bt-text-field__label{margin-bottom:var(--bt-spacing-xs);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal)}.bt-text-field__wrap{position:relative;display:inline-flex;width:100%;align-items:center}.bt-text-field__input{width:100%;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary);background:var(--bt-color-background);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base)}.bt-text-field__input::placeholder{color:var(--bt-color-text-tertiary)}.bt-text-field__input:disabled{cursor:not-allowed;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary);opacity:.7}.bt-text-field__input--outline{border:1px solid var(--bt-color-border)}.bt-text-field__input--outline:hover:not(:disabled){border-color:var(--bt-color-border-light)}.bt-text-field__input--outline:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-text-field__input--filled:focus-visible{outline:none;border-color:var(--bt-color-primary);background:var(--bt-color-background);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-text-field__input--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-text-field__input--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-text-field__input--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-text-field__input--error{border-color:var(--bt-color-error) !important;box-shadow:0 0 0 3px rgba(239,68,68,.15) !important}.bt-text-field__input--success{border-color:var(--bt-color-success) !important;box-shadow:0 0 0 3px rgba(16,185,129,.15) !important}.bt-text-field__helper{margin-top:var(--bt-spacing-xs);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary)}.bt-text-field__helper--error{color:var(--bt-color-error)}.bt-text-field__helper--success{color:var(--bt-color-success)}.bt-text-field__icon{position:absolute;display:inline-flex;align-items:center;justify-content:center;width:1.25rem;height:1.25rem;color:var(--bt-color-text-secondary)}.bt-text-field__icon--left{left:var(--bt-spacing-md)}.bt-text-field__icon--right{right:var(--bt-spacing-md)}.bt-checkbox{display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none;position:relative}.bt-checkbox__input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}.bt-checkbox__box{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);display:inline-block;position:relative}.bt-checkbox__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-checkbox--sm .bt-checkbox__box{width:1rem;height:1rem}.bt-checkbox--sm .bt-checkbox__label{font-size:var(--bt-font-size-sm)}.bt-checkbox--lg .bt-checkbox__box{width:1.25rem;height:1.25rem}.bt-checkbox--lg .bt-checkbox__label{font-size:var(--bt-font-size-md)}.bt-checkbox__input:focus-visible+.bt-checkbox__box{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-checkbox__input:disabled+.bt-checkbox__box,.bt-checkbox__input:disabled~.bt-checkbox__label{opacity:.6;cursor:not-allowed}.bt-checkbox__input:checked+.bt-checkbox__box{background:var(--bt-color-primary);border-color:var(--bt-color-primary)}.bt-checkbox__input:checked+.bt-checkbox__box::after{content:"";position:absolute;left:50%;top:50%;width:.28rem;height:.55rem;border:2px solid var(--bt-color-background);border-top:0;border-left:0;transform:translate(-50%, -58%) rotate(45deg)}.bt-radio{position:relative;display:inline-flex;align-items:center;gap:var(--bt-spacing-sm);cursor:pointer;user-select:none}.bt-radio__input{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer;margin:0}.bt-radio__dot{width:1.125rem;height:1.125rem;box-sizing:border-box;border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-full);background:var(--bt-color-background);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base);position:relative;display:inline-block}.bt-radio__label{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-radio--sm .bt-radio__dot{width:1rem;height:1rem}.bt-radio--sm .bt-radio__label{font-size:var(--bt-font-size-sm)}.bt-radio--lg .bt-radio__dot{width:1.25rem;height:1.25rem}.bt-radio--lg .bt-radio__label{font-size:var(--bt-font-size-md)}.bt-radio__input:focus-visible+.bt-radio__dot{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot{border-color:var(--bt-color-primary)}.bt-radio__input:checked+.bt-radio__dot::after{content:"";position:absolute;left:50%;top:50%;width:60%;height:60%;transform:translate(-50%, -50%);background:var(--bt-color-primary);border-radius:9999px}.bt-radio__input:disabled+.bt-radio__dot,.bt-radio__input:disabled~.bt-radio__label{opacity:.6;cursor:not-allowed}.bt-toggle{position:relative;display:inline-flex;align-items:center;width:40px;height:24px;padding:2px;border-radius:var(--bt-radius-full);background:var(--bt-color-border-light);transition:background var(--bt-transition-base);cursor:pointer;border:none}.bt-toggle__thumb{width:12px;height:12px;background:var(--bt-color-background);border-radius:var(--bt-radius-full);transition:transform var(--bt-transition-base),width var(--bt-transition-base),height var(--bt-transition-base);transform:translateX(0)}.bt-toggle--on{background:var(--bt-color-primary)}.bt-toggle--on .bt-toggle__thumb{width:20px;height:20px;transform:translateX(16px)}.bt-toggle--md{width:48px;height:28px}.bt-toggle--md .bt-toggle__thumb{width:16px;height:16px}.bt-toggle--md.bt-toggle--on .bt-toggle__thumb{width:24px;height:24px;transform:translateX(20px)}.bt-toggle--disabled{cursor:not-allowed;background:var(--bt-color-border-light)}.bt-toggle--disabled .bt-toggle__thumb{background:#fff}.bt-select{position:relative;display:inline-flex;flex-direction:column;width:100%;gap:var(--bt-spacing-xs);font-family:var(--bt-font-family)}.bt-select__label{font-size:var(--bt-font-size-sm);font-weight:var(--bt-font-weight-medium);line-height:var(--bt-line-height-normal);color:var(--bt-color-text-primary)}.bt-select__control{width:100%;display:inline-flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);cursor:pointer;color:var(--bt-color-text-primary);background:var(--bt-color-background);border-radius:var(--bt-radius-md);transition:border-color var(--bt-transition-base),box-shadow var(--bt-transition-base),background var(--bt-transition-base);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal);border:none;text-align:left}.bt-select__control:disabled,.bt-select__control.is-disabled{cursor:not-allowed;opacity:.7;background:var(--bt-color-background-secondary);color:var(--bt-color-text-tertiary)}.bt-select__control--outline{border:1px solid var(--bt-color-border)}.bt-select__control--outline:hover:not(.is-disabled){border-color:var(--bt-color-border-light)}.bt-select__control--outline.is-open{border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--filled{background:var(--bt-color-background-secondary);border:1px solid rgba(0,0,0,0)}.bt-select__control--filled.is-open{background:var(--bt-color-background);border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-select__control--sm{padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-size:var(--bt-font-size-sm)}.bt-select__control--md{padding:var(--bt-spacing-md) var(--bt-spacing-xl);font-size:var(--bt-font-size-base)}.bt-select__control--lg{padding:var(--bt-spacing-lg) var(--bt-spacing-2xl);font-size:var(--bt-font-size-md)}.bt-select__value{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bt-select__placeholder{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--bt-color-text-tertiary)}.bt-select__icon{display:inline-flex;align-items:center;justify-content:center;color:var(--bt-color-text-secondary);transition:transform var(--bt-transition-base)}.bt-select__icon.is-open{transform:rotate(180deg)}.bt-select__list{position:absolute;z-index:var(--bt-z-modal);top:100%;left:0;width:100%;min-width:100%;box-sizing:border-box;margin-top:var(--bt-spacing-xs);background:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-2);max-height:18rem;overflow-y:auto;overflow-x:hidden;padding:var(--bt-spacing-xs) 0;list-style:none;margin:var(--bt-spacing-xs) 0 0 0}.bt-select__list--up{top:auto;bottom:100%;margin-top:0;margin-bottom:var(--bt-spacing-xs)}.bt-select__option{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--bt-spacing-sm);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);cursor:pointer;color:var(--bt-color-text-primary);background:rgba(0,0,0,0);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);line-height:var(--bt-line-height-normal)}.bt-select__option:hover,.bt-select__option.is-active{background:var(--bt-color-background-secondary)}.bt-select__option.is-selected{font-weight:var(--bt-font-weight-medium)}.bt-select__option.is-disabled{cursor:not-allowed;color:var(--bt-color-text-tertiary)}.bt-modal{position:fixed;top:0;right:0;bottom:0;left:0;display:none;place-items:center;background:var(--bt-color-overlay);z-index:var(--bt-z-modal)}.bt-modal.is-open{display:grid}.bt-modal__panel{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);box-shadow:var(--bt-elevation-3);max-width:calc(100% - 32px);overflow:hidden}.bt-modal__header{padding:var(--bt-spacing-lg);border-bottom:1px solid var(--bt-color-border);color:var(--bt-color-text-primary);font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3}.bt-modal__body{padding:var(--bt-spacing-lg)}.bt-modal__footer{padding:var(--bt-spacing-lg);border-top:1px solid var(--bt-color-border);display:flex;justify-content:flex-end;gap:var(--bt-spacing-sm)}@keyframes bt-alert-fade-in{from{opacity:0}to{opacity:1}}@keyframes bt-alert-slide-up{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.bt-alert__overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:var(--bt-color-overlay);display:none;align-items:center;justify-content:center;z-index:var(--bt-z-modal);animation:bt-alert-fade-in var(--bt-transition-base)}.bt-alert__overlay.is-open{display:flex}.bt-alert__modal{background:var(--bt-color-background);border-radius:var(--bt-radius-lg);min-width:320px;max-width:480px;box-shadow:var(--bt-elevation-4);animation:bt-alert-slide-up var(--bt-transition-slow);overflow:hidden}.bt-alert__title{font-size:var(--bt-font-size-lg);font-weight:var(--bt-font-weight-semibold);line-height:var(--bt-line-height-normal);color:var(--bt-color-info);padding:var(--bt-spacing-md) var(--bt-spacing-xl) var(--bt-spacing-xs)}.bt-alert__message{font-size:var(--bt-font-size-base);color:var(--bt-color-text-secondary);padding:var(--bt-spacing-xl);line-height:1.75}.bt-alert__actions{display:flex;gap:var(--bt-spacing-sm);align-items:center;padding:0 var(--bt-spacing-xl) var(--bt-spacing-xl);justify-content:flex-end}.bt-alert--info .bt-alert__title{color:var(--bt-color-info)}.bt-alert--success .bt-alert__title{color:var(--bt-color-success)}.bt-alert--warning .bt-alert__title{color:var(--bt-color-warning)}.bt-alert--error .bt-alert__title{color:var(--bt-color-error)}.bt-card{background:var(--bt-color-background);border-radius:var(--bt-radius-lg)}.bt-card--bordered{border:1px solid var(--bt-color-border)}.bt-card--elevation-1{box-shadow:var(--bt-elevation-1)}.bt-card--elevation-2{box-shadow:var(--bt-elevation-2)}.bt-card--elevation-3{box-shadow:var(--bt-elevation-3)}.bt-card--p-sm{padding:var(--bt-spacing-sm)}.bt-card--p-md{padding:var(--bt-spacing-lg)}.bt-card--p-lg{padding:var(--bt-spacing-2xl)}.bt-card__title{font-size:var(--bt-font-size-xl);font-weight:var(--bt-font-weight-semibold);line-height:1.3;margin-bottom:var(--bt-spacing-md);color:var(--bt-color-text-primary)}@keyframes bt-spinner-spin{to{transform:rotate(360deg)}}.bt-spinner{display:inline-block;box-sizing:border-box;border-radius:50%;border:2px solid var(--bt-color-border);border-top-color:var(--bt-color-primary);animation:bt-spinner-spin .8s linear infinite}.bt-spinner--sm{width:16px;height:16px}.bt-spinner--md{width:24px;height:24px}.bt-spinner--lg{width:32px;height:32px}.bt-spinner--xl{width:48px;height:48px}.bt-pagination{display:flex;align-items:center;justify-content:center;gap:var(--bt-spacing-sm);margin-top:var(--bt-spacing-3xl)}.bt-pagination__item{border:1px solid var(--bt-color-border);background:var(--bt-color-background);border-radius:var(--bt-radius-md);padding:6px 10px;min-width:36px;font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-primary);cursor:pointer;transition:background var(--bt-transition-base),border-color var(--bt-transition-base)}.bt-pagination__item:hover:not(:disabled){background:var(--bt-color-background-secondary)}.bt-pagination__item:disabled{opacity:.5;cursor:not-allowed}.bt-pagination__pages{display:flex;align-items:center;gap:6px}.bt-pagination__page{border:0;background:rgba(0,0,0,0);min-width:36px;height:36px;border-radius:var(--bt-radius-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-sm);color:var(--bt-color-text-secondary);cursor:pointer;transition:background var(--bt-transition-base),color var(--bt-transition-base)}.bt-pagination__page:hover{background:var(--bt-color-background-secondary);color:var(--bt-color-text-primary)}.bt-pagination__page--active{color:var(--bt-color-text-primary);font-weight:var(--bt-font-weight-semibold)}.bt-pagination__ellipsis{min-width:20px;text-align:center;font-size:var(--bt-font-size-sm);color:var(--bt-color-text-tertiary)}.bt-date-picker{display:flex;flex-direction:column;gap:var(--bt-spacing-xs)}.bt-date-picker__label{color:var(--bt-color-text-primary);margin-bottom:var(--bt-spacing-xs);font-weight:var(--bt-font-weight-medium);font-size:var(--bt-font-size-sm);line-height:var(--bt-line-height-normal)}.bt-date-picker__label-required{margin-left:var(--bt-spacing-xs);color:var(--bt-color-error)}.bt-date-picker__fields{display:flex;gap:var(--bt-spacing-sm)}.bt-date-picker__select{min-width:88px;height:44px;padding:0 var(--bt-spacing-md);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);background-color:var(--bt-color-background);border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-sm);cursor:pointer;transition:border-color var(--bt-transition-fast),box-shadow var(--bt-transition-fast),background-color var(--bt-transition-fast);appearance:none;background-image:linear-gradient(45deg, transparent 50%, var(--bt-color-text-secondary) 50%),linear-gradient(135deg, var(--bt-color-text-secondary) 50%, transparent 50%);background-position:calc(100% - 16px) calc(50% - 3px),calc(100% - 11px) calc(50% - 3px);background-size:5px 5px;background-repeat:no-repeat}.bt-date-picker__select:hover:not(:disabled){border-color:var(--bt-color-primary);background-color:var(--bt-color-background-secondary)}.bt-date-picker__select:focus-visible{outline:none;border-color:var(--bt-color-primary);box-shadow:0 0 0 3px rgba(0,0,0,.15)}.bt-date-picker__select:disabled{cursor:not-allowed;color:var(--bt-color-text-disabled);background-color:var(--bt-color-background-secondary);border-color:var(--bt-color-border-light)}.bt-date-picker--full-width{width:100%}.bt-date-picker--full-width .bt-date-picker__fields{width:100%}.bt-date-picker--full-width .bt-date-picker__select{flex:1;min-width:0}.bt-file-input{position:relative;display:inline-flex;align-items:center}.bt-file-input:hover .bt-file-input__label{border-color:var(--bt-color-border-light)}.bt-file-input__control{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.bt-file-input__label{border:1px solid var(--bt-color-border);border-radius:var(--bt-radius-md);background:var(--bt-color-background);padding:var(--bt-spacing-sm) var(--bt-spacing-lg);font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);color:var(--bt-color-text-primary);transition:background var(--bt-transition-base),border-color var(--bt-transition-base),box-shadow var(--bt-transition-base)}.bt-file-input__control:focus-visible+.bt-file-input__label{box-shadow:0 0 0 3px var(--bt-color-border-light);border-color:var(--bt-color-primary)}.bt-file-input--disabled{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__control{cursor:not-allowed}.bt-file-input--disabled .bt-file-input__label{opacity:.6;cursor:not-allowed}.bt-file-input--disabled:hover .bt-file-input__label{border-color:var(--bt-color-border)}.bt-toast{font-family:var(--bt-font-family);font-size:var(--bt-font-size-base);border-radius:var(--bt-radius-md);box-shadow:var(--bt-elevation-3)}.bt-hidden{display:none !important}.bt-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}

package/dist/vanilla/bigtablet.min.js

@@ -1,4 +1,4 @@
-(function(){'use strict';((C,m)=>{typeof exports=="object"&&typeof module<"u"?module.exports=m():typeof define=="function"&&define.amd?define(m):(C=C||self,C.Bigtablet=m());})(void 0,()=>{function C(t="bt"){return `${t}_${Math.random().toString(36).substring(2,9)}`}function m(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function y(t,a,o,e){return t.addEventListener(a,o,e),()=>t.removeEventListener(a,o,e)}function E(t,a=document){return a.querySelector(t)}function h(t,a=document){return Array.from(a.querySelectorAll(t))}function S(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={placeholder:"Select...",disabled:false,onChange:null,...a},n={isOpen:false,value:e.defaultValue||null,activeIndex:-1,options:[]},_=o.dataset.options?JSON.parse(o.dataset.options):e.options||[];n.options=_;`${o.id||C("select")}_listbox`;let r=o.querySelector(".bt-select__control"),c=o.querySelector(".bt-select__list");if(!r||!c)return console.warn("Select: Missing required elements (.bt-select__control, .bt-select__list)"),null;function f(s){n.value=s;let l=n.options.find(k=>k.value===s),u=r.querySelector(".bt-select__value, .bt-select__placeholder");u&&(l?(u.textContent=l.label,u.classList.remove("bt-select__placeholder"),u.classList.add("bt-select__value")):(u.textContent=e.placeholder,u.classList.remove("bt-select__value"),u.classList.add("bt-select__placeholder"))),h(".bt-select__option",c).forEach((k,w)=>{k.classList.toggle("is-selected",n.options[w]?.value===s);}),e.onChange&&e.onChange(s,l);}function i(){if(e.disabled)return;n.isOpen=true,r.classList.add("is-open"),c.style.display="block";let s=r.getBoundingClientRect(),l=Math.min(n.options.length*40,288),u=window.innerHeight-s.bottom,k=s.top;u<l&&k>u?c.classList.add("bt-select__list--up"):c.classList.remove("bt-select__list--up");let w=n.options.findIndex(N=>N.value===n.value);n.activeIndex=w>=0?w:0,v();let q=r.querySelector(".bt-select__icon");q&&q.classList.add("is-open");}function d(){n.isOpen=false,r.classList.remove("is-open"),c.style.display="none";let s=r.querySelector(".bt-select__icon");s&&s.classList.remove("is-open");}function b(){n.isOpen?d():i();}function v(){h(".bt-select__option",c).forEach((s,l)=>{s.classList.toggle("is-active",l===n.activeIndex);});}function L(s){let l=n.options.length,u=n.activeIndex;for(let k=0;k<l;k++)if(u=(u+s+l)%l,!n.options[u].disabled){n.activeIndex=u,v();break}}function M(){let s=n.options[n.activeIndex];s&&!s.disabled&&(f(s.value),d());}function P(s){s.preventDefault(),b();}function T(s){if(!e.disabled)switch(s.key){case " ":case "Enter":s.preventDefault(),n.isOpen?M():i();break;case "ArrowDown":s.preventDefault(),n.isOpen?L(1):i();break;case "ArrowUp":s.preventDefault(),n.isOpen?L(-1):i();break;case "Home":s.preventDefault(),i(),n.activeIndex=n.options.findIndex(l=>!l.disabled),v();break;case "End":s.preventDefault(),i();for(let l=n.options.length-1;l>=0;l--)if(!n.options[l].disabled){n.activeIndex=l,v();break}break;case "Escape":s.preventDefault(),d();break}}function B(s){o.contains(s.target)||d();}function H(s){return l=>{l.preventDefault();let u=n.options[s];u&&!u.disabled&&(f(u.value),d());}}function K(s){return ()=>{n.options[s].disabled||(n.activeIndex=s,v());}}let x=[y(r,"click",P),y(r,"keydown",T),y(document,"mousedown",B)];return h(".bt-select__option",c).forEach((s,l)=>{x.push(y(s,"click",H(l))),x.push(y(s,"mouseenter",K(l)));}),c.style.display="none",e.defaultValue&&f(e.defaultValue),{getValue:()=>n.value,setValue:f,open:i,close:d,toggle:b,setDisabled:s=>{e.disabled=s,r.classList.toggle("is-disabled",s);},destroy:()=>{x.forEach(s=>{s();});}}}function I(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={closeOnOverlay:true,closeOnEscape:true,onOpen:null,onClose:null,...a},n={isOpen:false};o.querySelector(".bt-modal__panel");function g(){n.isOpen=true,o.classList.add("is-open"),document.body.style.overflow="hidden",e.onOpen&&e.onOpen();}function p(){n.isOpen=false,o.classList.remove("is-open"),document.body.style.overflow="",e.onClose&&e.onClose();}function r(i){e.closeOnOverlay&&i.target===o&&p();}function c(i){e.closeOnEscape&&i.key==="Escape"&&n.isOpen&&p();}let f=[y(o,"click",r),y(document,"keydown",c)];return h("[data-modal-close]",o).forEach(i=>{f.push(y(i,"click",p));}),{isOpen:()=>n.isOpen,open:g,close:p,toggle:()=>n.isOpen?p():g(),destroy:()=>{f.forEach(i=>{i();}),document.body.style.overflow="";}}}function A(t={}){let a={title:"",message:"",variant:"info",confirmText:"\uD655\uC778",cancelText:"\uCDE8\uC18C",showCancel:false,actionsAlign:"right",onConfirm:null,onCancel:null,...t},o=document.createElement("div");o.className=`bt-alert__overlay bt-alert--${a.variant} is-open`,o.innerHTML=`
+(function(){'use strict';((C,m)=>{typeof exports=="object"&&typeof module<"u"?module.exports=m():typeof define=="function"&&define.amd?define(m):(C=C||self,C.Bigtablet=m());})(void 0,()=>{function C(t="bt"){return `${t}_${Math.random().toString(36).substring(2,9)}`}function m(t){return String(t).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function y(t,a,o,e){return t.addEventListener(a,o,e),()=>t.removeEventListener(a,o,e)}function E(t,a=document){return a.querySelector(t)}function _(t,a=document){return Array.from(a.querySelectorAll(t))}function I(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={placeholder:"Select...",disabled:false,onChange:null,...a},n={isOpen:false,value:e.defaultValue||null,activeIndex:-1,options:[]},h=o.dataset.options?JSON.parse(o.dataset.options):e.options||[];n.options=h;`${o.id||C("select")}_listbox`;let r=o.querySelector(".bt-select__control"),l=o.querySelector(".bt-select__list");if(!r||!l)return console.warn("Select: Missing required elements (.bt-select__control, .bt-select__list)"),null;function f(s){n.value=s;let c=n.options.find(k=>k.value===s),u=r.querySelector(".bt-select__value, .bt-select__placeholder");u&&(c?(u.textContent=c.label,u.classList.remove("bt-select__placeholder"),u.classList.add("bt-select__value")):(u.textContent=e.placeholder,u.classList.remove("bt-select__value"),u.classList.add("bt-select__placeholder"))),_(".bt-select__option",l).forEach((k,O)=>{k.classList.toggle("is-selected",n.options[O]?.value===s);}),e.onChange&&e.onChange(s,c);}function i(){if(e.disabled)return;n.isOpen=true,r.classList.add("is-open"),l.style.display="block";let s=r.getBoundingClientRect(),c=Math.min(n.options.length*40,288),u=window.innerHeight-s.bottom,k=s.top;u<c&&k>u?l.classList.add("bt-select__list--up"):l.classList.remove("bt-select__list--up");let O=n.options.findIndex(N=>N.value===n.value);n.activeIndex=O>=0?O:0,v();let q=r.querySelector(".bt-select__icon");q&&q.classList.add("is-open");}function d(){n.isOpen=false,r.classList.remove("is-open"),l.style.display="none";let s=r.querySelector(".bt-select__icon");s&&s.classList.remove("is-open");}function g(){n.isOpen?d():i();}function v(){_(".bt-select__option",l).forEach((s,c)=>{s.classList.toggle("is-active",c===n.activeIndex);});}function L(s){let c=n.options.length,u=n.activeIndex;for(let k=0;k<c;k++)if(u=(u+s+c)%c,!n.options[u].disabled){n.activeIndex=u,v();break}}function M(){let s=n.options[n.activeIndex];s&&!s.disabled&&(f(s.value),d());}function P(s){s.preventDefault(),g();}function T(s){if(!e.disabled)switch(s.key){case " ":case "Enter":s.preventDefault(),n.isOpen?M():i();break;case "ArrowDown":s.preventDefault(),n.isOpen?L(1):i();break;case "ArrowUp":s.preventDefault(),n.isOpen?L(-1):i();break;case "Home":s.preventDefault(),i(),n.activeIndex=n.options.findIndex(c=>!c.disabled),v();break;case "End":s.preventDefault(),i();for(let c=n.options.length-1;c>=0;c--)if(!n.options[c].disabled){n.activeIndex=c,v();break}break;case "Escape":s.preventDefault(),d();break}}function B(s){o.contains(s.target)||d();}function H(s){return c=>{c.preventDefault();let u=n.options[s];u&&!u.disabled&&(f(u.value),d());}}function K(s){return ()=>{n.options[s].disabled||(n.activeIndex=s,v());}}let w=[y(r,"click",P),y(r,"keydown",T),y(document,"mousedown",B)];return _(".bt-select__option",l).forEach((s,c)=>{w.push(y(s,"click",H(c))),w.push(y(s,"mouseenter",K(c)));}),l.style.display="none",e.defaultValue&&f(e.defaultValue),{getValue:()=>n.value,setValue:f,open:i,close:d,toggle:g,setDisabled:s=>{e.disabled=s,r.classList.toggle("is-disabled",s);},destroy:()=>{w.forEach(s=>{s();});}}}function S(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={closeOnOverlay:true,closeOnEscape:true,onOpen:null,onClose:null,...a},n={isOpen:false};o.querySelector(".bt-modal__panel");function b(){n.isOpen=true,o.classList.add("is-open"),document.body.style.overflow="hidden",e.onOpen&&e.onOpen();}function p(){n.isOpen=false,o.classList.remove("is-open"),document.body.style.overflow="",e.onClose&&e.onClose();}function r(i){e.closeOnOverlay&&i.target===o&&p();}function l(i){e.closeOnEscape&&i.key==="Escape"&&n.isOpen&&p();}let f=[y(o,"click",r),y(document,"keydown",l)];return _("[data-modal-close]",o).forEach(i=>{f.push(y(i,"click",p));}),{isOpen:()=>n.isOpen,open:b,close:p,toggle:()=>n.isOpen?p():b(),destroy:()=>{f.forEach(i=>{i();}),document.body.style.overflow="";}}}function A(t={}){let a={title:"",message:"",variant:"info",confirmText:"\uD655\uC778",cancelText:"\uCDE8\uC18C",showCancel:false,actionsAlign:"right",onConfirm:null,onCancel:null,...t},o=document.createElement("div");o.className=`bt-alert__overlay bt-alert--${a.variant} is-open`,o.innerHTML=`
       <div class="bt-alert__modal">
         ${a.title?`<div class="bt-alert__title">${m(a.title)}</div>`:""}
         <div class="bt-alert__message">${m(a.message)}</div>
@@ -7,25 +7,25 @@
           <button class="bt-button bt-button--md bt-button--primary" data-alert-confirm>${m(a.confirmText)}</button>
         </div>
       </div>
-    `,document.body.appendChild(o),document.body.style.overflow="hidden";function e(){o.classList.remove("is-open"),setTimeout(()=>{o.remove(),document.body.style.overflow="";},200);}let n=o.querySelector("[data-alert-confirm]"),_=o.querySelector("[data-alert-cancel]");n&&n.addEventListener("click",()=>{a.onConfirm&&a.onConfirm(),e();}),_&&_.addEventListener("click",()=>{a.onCancel&&a.onCancel(),e();}),o.addEventListener("click",p=>{p.target===o&&e();});let g=p=>{p.key==="Escape"&&(e(),document.removeEventListener("keydown",g));};return document.addEventListener("keydown",g),{close:e}}function $(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={defaultChecked:false,disabled:false,onChange:null,...a},n={checked:e.defaultChecked||o.classList.contains("bt-switch--on")};function _(r){n.checked=r,o.classList.toggle("bt-switch--on",r),e.onChange&&e.onChange(r);}function g(){!e.disabled&&!o.classList.contains("bt-switch--disabled")&&_(!n.checked);}let p=y(o,"click",g);return e.defaultChecked&&_(true),{isChecked:()=>n.checked,setChecked:_,toggle:g,setDisabled:r=>{e.disabled=r,o.classList.toggle("bt-switch--disabled",r);},destroy:()=>p()}}function D(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={page:1,totalPages:1,sibling:2,onChange:null,...a};function n(c,f){let i=[];for(let d=c;d<=f;d++)i.push(d);return i}function _(c,f){if(f<=7)return n(1,f);let i=[],d=f,b=e.sibling;if(c<=b+2){for(let v of n(1,b+3))i.push(v);return i.push("ellipsis"),i.push(d),i}if(c>=d-b-1){i.push(1),i.push("ellipsis");for(let v of n(d-b-2,d))i.push(v);return i}i.push(1),i.push("ellipsis");for(let v of n(c-b,c+b))i.push(v);return i.push("ellipsis"),i.push(d),i}function g(){let c=_(e.page,e.totalPages),f=`
+    `,document.body.appendChild(o),document.body.style.overflow="hidden";function e(){o.classList.remove("is-open"),setTimeout(()=>{o.remove(),document.body.style.overflow="";},200);}let n=o.querySelector("[data-alert-confirm]"),h=o.querySelector("[data-alert-cancel]");n&&n.addEventListener("click",()=>{a.onConfirm&&a.onConfirm(),e();}),h&&h.addEventListener("click",()=>{a.onCancel&&a.onCancel(),e();}),o.addEventListener("click",p=>{p.target===o&&e();});let b=p=>{p.key==="Escape"&&(e(),document.removeEventListener("keydown",b));};return document.addEventListener("keydown",b),{close:e}}function $(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={defaultChecked:false,disabled:false,onChange:null,...a},n={checked:e.defaultChecked||o.classList.contains("bt-toggle--on")};function h(r){n.checked=r,o.classList.toggle("bt-toggle--on",r),e.onChange&&e.onChange(r);}function b(){!e.disabled&&!o.classList.contains("bt-toggle--disabled")&&h(!n.checked);}let p=y(o,"click",b);return e.defaultChecked&&h(true),{isChecked:()=>n.checked,setChecked:h,toggle:b,setDisabled:r=>{e.disabled=r,o.classList.toggle("bt-toggle--disabled",r);},destroy:()=>p()}}function D(t,a={}){let o=typeof t=="string"?E(t):t;if(!o)return null;let e={page:1,totalPages:1,sibling:2,onChange:null,...a};function n(l,f){let i=[];for(let d=l;d<=f;d++)i.push(d);return i}function h(l,f){if(f<=7)return n(1,f);let i=[],d=f,g=e.sibling;if(l<=g+2){for(let v of n(1,g+3))i.push(v);return i.push("ellipsis"),i.push(d),i}if(l>=d-g-1){i.push(1),i.push("ellipsis");for(let v of n(d-g-2,d))i.push(v);return i}i.push(1),i.push("ellipsis");for(let v of n(l-g,l+g))i.push(v);return i.push("ellipsis"),i.push(d),i}function b(){let l=h(e.page,e.totalPages),f=`
         <button class="bt-pagination__item" ${e.page<=1?"disabled":""} data-action="prev" aria-label="Previous page">
           \u2039
         </button>
         <div class="bt-pagination__pages">
-      `;c.forEach((b,v)=>{if(b==="ellipsis")f+='<span class="bt-pagination__ellipsis" aria-hidden="true">\u2026</span>';else {let L=b===e.page;f+=`
+      `;l.forEach((g,v)=>{if(g==="ellipsis")f+='<span class="bt-pagination__ellipsis" aria-hidden="true">\u2026</span>';else {let L=g===e.page;f+=`
             <button
               class="bt-pagination__page${L?" bt-pagination__page--active":""}"
-              data-page="${m(b)}"
+              data-page="${m(g)}"
               ${L?'aria-current="page"':""}
             >
-              ${m(b)}
+              ${m(g)}
             </button>
           `;}}),f+=`
         </div>
         <button class="bt-pagination__item" ${e.page>=e.totalPages?"disabled":""} data-action="next" aria-label="Next page">
           \u203A
         </button>
-      `,o.innerHTML=f,h("[data-page]",o).forEach(b=>{b.addEventListener("click",()=>{let v=parseInt(b.dataset.page,10);p(v);});});let i=o.querySelector('[data-action="prev"]'),d=o.querySelector('[data-action="next"]');i&&i.addEventListener("click",()=>p(e.page-1)),d&&d.addEventListener("click",()=>p(e.page+1));}function p(c){c<1||c>e.totalPages||c===e.page||(e.page=c,g(),e.onChange&&e.onChange(c));}function r(c){e.totalPages=c,e.page>c&&(e.page=c),g();}return g(),{getPage:()=>e.page,setPage:p,setTotalPages:r,render:g}}function O(){h("[data-bt-select]").forEach(t=>{t._btSelect||(t._btSelect=S(t));}),h("[data-bt-modal]").forEach(t=>{t._btModal||(t._btModal=I(t));}),h("[data-bt-modal-open]").forEach(t=>{let a=t.dataset.btModalOpen,o=E(`#${a}`);o?._btModal&&t.addEventListener("click",()=>o._btModal.open());}),h("[data-bt-switch]").forEach(t=>{t._btSwitch||(t._btSwitch=$(t));}),h("[data-bt-pagination]").forEach(t=>{if(!t._btPagination){let a=parseInt(t.dataset.page,10)||1,o=parseInt(t.dataset.totalPages,10)||1;t._btPagination=D(t,{page:a,totalPages:o});}});}return typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",O):O()),{Select:S,Modal:I,Alert:A,Switch:$,Pagination:D,init:O,generateId:C,$:E,$$:h,on:y,version:"1.0.0"}});
+      `,o.innerHTML=f,_("[data-page]",o).forEach(g=>{g.addEventListener("click",()=>{let v=parseInt(g.dataset.page,10);p(v);});});let i=o.querySelector('[data-action="prev"]'),d=o.querySelector('[data-action="next"]');i&&i.addEventListener("click",()=>p(e.page-1)),d&&d.addEventListener("click",()=>p(e.page+1));}function p(l){l<1||l>e.totalPages||l===e.page||(e.page=l,b(),e.onChange&&e.onChange(l));}function r(l){e.totalPages=l,e.page>l&&(e.page=l),b();}return b(),{getPage:()=>e.page,setPage:p,setTotalPages:r,render:b}}function x(){_("[data-bt-select]").forEach(t=>{t._btSelect||(t._btSelect=I(t));}),_("[data-bt-modal]").forEach(t=>{t._btModal||(t._btModal=S(t));}),_("[data-bt-modal-open]").forEach(t=>{let a=t.dataset.btModalOpen,o=E(`#${a}`);o?._btModal&&t.addEventListener("click",()=>o._btModal.open());}),_("[data-bt-toggle]").forEach(t=>{t._btToggle||(t._btToggle=$(t));}),_("[data-bt-pagination]").forEach(t=>{if(!t._btPagination){let a=parseInt(t.dataset.page,10)||1,o=parseInt(t.dataset.totalPages,10)||1;t._btPagination=D(t,{page:a,totalPages:o});}});}return typeof document<"u"&&(document.readyState==="loading"?document.addEventListener("DOMContentLoaded",x):x()),{Select:I,Modal:S,Alert:A,Toggle:$,Pagination:D,init:x,generateId:C,$:E,$$:_,on:y,version:"1.0.0"}});
 /**
  * Bigtablet Design System - Vanilla JavaScript
  * For use with plain HTML/CSS/JS, Thymeleaf, JSP, etc.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@bigtablet/design-system",
-	"version": "2.0.6",
+	"version": "2.1.0",
 	"description": "Bigtablet Design System UI Components",
 	"type": "module",
 	"types": "dist/index.d.ts",