@bigtablet/design-system 1.21.1 → 1.22.0

package/README.md

@@ -40,21 +40,25 @@ The official design system of Bigtablet — a unified UI library composed of Fou
 
 ## Installation
 
-```bash
-# npm
-npm install @bigtablet/design-system
+### One-line setup (recommended)
 
-# yarn
-yarn add @bigtablet/design-system
+Auto-detects your package manager (npm / yarn / pnpm / bun) and environment (React / Next.js), installs the package + peer deps, and prints CSS/Provider setup instructions.
 
-# pnpm
-pnpm add @bigtablet/design-system
+```bash
+curl -fsSL https://raw.githubusercontent.com/Bigtablet/bigtablet-design-system/main/scripts/setup.sh | sh
 ```
 
-**Peer Dependencies**
+### Manual
 
 ```bash
-npm install react@^19 react-dom@^19 "lucide-react@>=0.552.0"
+# npm
+npm install @bigtablet/design-system react@^19 react-dom@^19 lucide-react
+
+# yarn
+yarn add @bigtablet/design-system react@^19 react-dom@^19 lucide-react
+
+# pnpm
+pnpm add @bigtablet/design-system react@^19 react-dom@^19 lucide-react
 ```
 
 > Requires **React 19** and **lucide-react ≥ 0.552.0**. Compatible with **Next.js 13+**.

package/dist/index.css

@@ -1,4 +1,12 @@
 /* src/ui/display/card/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .card {
   background: #ffffff;
   border-radius: 12px;
@@ -42,6 +50,14 @@
 }
 
 /* src/ui/feedback/alert/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 @keyframes alert_fade_in {
   from {
     opacity: 0;
@@ -192,6 +208,14 @@
 }
 
 /* src/ui/feedback/spinner/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 @keyframes spinner_spin {
   to {
     transform: rotate(360deg);
@@ -207,6 +231,14 @@
 }
 
 /* src/ui/feedback/top-loading/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .top_loading {
   position: fixed;
   top: 0;
@@ -235,6 +267,14 @@
 }
 
 /* src/ui/feedback/toast/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 @keyframes toast_slide_in {
   from {
     opacity: 0;
@@ -370,6 +410,14 @@
 }
 
 /* src/ui/general/button/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .button {
   display: inline-flex;
   align-items: center;
@@ -450,6 +498,14 @@
 }
 
 /* src/ui/form/checkbox/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .checkbox {
   display: inline-flex;
   align-items: center;
@@ -562,6 +618,14 @@
 }
 
 /* src/ui/form/file/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .file_input {
   position: relative;
   display: inline-flex;
@@ -618,6 +682,14 @@
 }
 
 /* src/ui/form/radio/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .radio {
   position: relative;
   display: inline-flex;
@@ -697,6 +769,14 @@
 }
 
 /* src/ui/general/select/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .select {
   position: relative;
   display: inline-flex;
@@ -871,6 +951,14 @@
 }
 
 /* src/ui/form/switch/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .switch {
   position: relative;
   display: inline-flex;
@@ -931,6 +1019,14 @@
 }
 
 /* src/ui/form/textfield/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .text_field {
   display: flex;
   flex-direction: column;
@@ -1067,6 +1163,14 @@
 }
 
 /* src/ui/form/date-picker/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .date_picker {
   display: flex;
   flex-direction: column;
@@ -1173,6 +1277,14 @@
 }
 
 /* src/ui/navigation/pagination/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .pagination {
   display: flex;
   align-items: center;
@@ -1238,6 +1350,14 @@
 }
 
 /* src/ui/overlay/modal/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .modal {
   position: fixed;
   inset: 0;

package/dist/index.d.ts

@@ -1,6 +1,157 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 
+declare const colors: {
+    readonly primary: "#000000";
+    readonly primaryHover: "#333333";
+    readonly background: "#ffffff";
+    readonly backgroundSecondary: "#fafafa";
+    readonly backgroundNeutral: "#f3f3f3";
+    readonly backgroundMuted: "#f0f0f0";
+    readonly textPrimary: "#1a1a1a";
+    readonly textSecondary: "#666666";
+    readonly textTertiary: "#999999";
+    readonly border: "#e5e5e5";
+    readonly borderLight: "rgba(0, 0, 0, 0.08)";
+    readonly success: "#10b981";
+    readonly error: "#ef4444";
+    readonly warning: "#f59e0b";
+    readonly info: "#3b82f6";
+    readonly overlay: "rgba(0, 0, 0, 0.5)";
+    readonly hoverSubtle: "rgba(0, 0, 0, 0.03)";
+    readonly hoverLight: "rgba(0, 0, 0, 0.05)";
+    readonly textStrong: "#1F2937";
+    readonly textNormal: "#3B3B3B";
+    readonly textSubtle: "#6B7280";
+    readonly textDisabled: "#9CA3AF";
+    readonly textInverse: "#FFFFFF";
+};
+
+declare const spacing: {
+    readonly xs: "0.25rem";
+    readonly sm: "0.5rem";
+    readonly md: "0.75rem";
+    readonly lg: "1rem";
+    readonly xl: "1.25rem";
+    readonly "2xl": "1.5rem";
+    readonly "3xl": "2rem";
+    readonly "4xl": "2.5rem";
+    readonly "5xl": "3rem";
+};
+
+declare const typography: {
+    readonly fontFamily: {
+        readonly primary: "'Pretendard', sans-serif";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "0.9375rem";
+        readonly md: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly "2xl": "1.5rem";
+        readonly "3xl": "2rem";
+        readonly "4xl": "2.5rem";
+    };
+    readonly fontWeight: {
+        readonly thin: 100;
+        readonly extralight: 200;
+        readonly light: 300;
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+        readonly extrabold: 800;
+        readonly black: 900;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly snug: 1.3;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+    readonly letterSpacing: {
+        readonly tight: "-0.02em";
+        readonly normal: "0";
+        readonly wide: "0.02em";
+    };
+};
+
+declare const radius: {
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly full: "9999px";
+};
+
+declare const shadows: {
+    readonly sm: "0 2px 4px rgba(0, 0, 0, 0.04)";
+    readonly md: "0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04)";
+    readonly lg: "0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06)";
+    readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)";
+};
+
+declare const motion: {
+    readonly transition: {
+        readonly fast: "0.1s ease-in-out";
+        readonly base: "0.2s ease-in-out";
+        readonly slow: "0.3s ease-in-out";
+        readonly emphasized: "0.25s cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly bounce: "0.3s cubic-bezier(0.16, 1, 0.3, 1)";
+        readonly fade: "0.15s ease-in-out";
+        readonly slide: "0.25s ease-in-out";
+        readonly scale: "0.2s cubic-bezier(0.2, 0.8, 0.2, 1)";
+        readonly state: "0.18s ease-in-out";
+    };
+};
+
+declare const skeleton: {
+    readonly color: {
+        readonly base: "#f3f3f3";
+        readonly wave: "#f0f0f0";
+        readonly highlight: "#fafafa";
+    };
+    readonly gradient: "linear-gradient(90deg, #f3f3f3 25%, #fafafa 37%, #f0f0f0 63%)";
+    readonly radius: {
+        readonly sm: "6px";
+        readonly md: "8px";
+        readonly lg: "12px";
+    };
+    readonly height: {
+        readonly xs: "0.25rem";
+        readonly sm: "0.5rem";
+        readonly md: "0.75rem";
+        readonly lg: "1rem";
+        readonly xl: "1.25rem";
+    };
+    readonly animation: {
+        readonly duration: "1.4s";
+        readonly timing: "ease-in-out";
+    };
+};
+
+declare const breakpoints: {
+    readonly mobile: 0;
+    readonly tablet: 768;
+    readonly laptop: 1024;
+    readonly desktop: 1440;
+};
+
+declare const zIndex: {
+    readonly loading: 9999;
+    readonly modal: 10000;
+    readonly toast: 10001;
+};
+
+declare const a11y: {
+    readonly focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)";
+    readonly focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)";
+    readonly focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)";
+    readonly tapMinSize: "44px";
+};
+
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** 카드 상단에 표시할 제목 */
     heading?: React.ReactNode;
@@ -399,4 +550,4 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
  */
 declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ariaLabel, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, breakpoints, colors, motion, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/dist/index.js

@@ -6,6 +6,180 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import { ChevronDown, Check, X, Bell, Info, AlertTriangle, XCircle, CheckCircle2 } from 'lucide-react';
 
+// src/styles/ts/colors.ts
+var colors = {
+  primary: "#000000",
+  primaryHover: "#333333",
+  background: "#ffffff",
+  backgroundSecondary: "#fafafa",
+  backgroundNeutral: "#f3f3f3",
+  backgroundMuted: "#f0f0f0",
+  textPrimary: "#1a1a1a",
+  textSecondary: "#666666",
+  textTertiary: "#999999",
+  border: "#e5e5e5",
+  borderLight: "rgba(0, 0, 0, 0.08)",
+  success: "#10b981",
+  error: "#ef4444",
+  warning: "#f59e0b",
+  info: "#3b82f6",
+  overlay: "rgba(0, 0, 0, 0.5)",
+  hoverSubtle: "rgba(0, 0, 0, 0.03)",
+  hoverLight: "rgba(0, 0, 0, 0.05)",
+  textStrong: "#1F2937",
+  textNormal: "#3B3B3B",
+  textSubtle: "#6B7280",
+  textDisabled: "#9CA3AF",
+  textInverse: "#FFFFFF"
+};
+
+// src/styles/ts/spacing.ts
+var spacing = {
+  xs: "0.25rem",
+  // 4px
+  sm: "0.5rem",
+  // 8px
+  md: "0.75rem",
+  // 12px
+  lg: "1rem",
+  // 16px
+  xl: "1.25rem",
+  // 20px
+  "2xl": "1.5rem",
+  // 24px
+  "3xl": "2rem",
+  // 32px
+  "4xl": "2.5rem",
+  // 40px
+  "5xl": "3rem"
+  // 48px
+};
+
+// src/styles/ts/typography.ts
+var typography = {
+  fontFamily: {
+    primary: "'Pretendard', sans-serif"
+  },
+  fontSize: {
+    xs: "0.75rem",
+    sm: "0.875rem",
+    base: "0.9375rem",
+    md: "1rem",
+    lg: "1.125rem",
+    xl: "1.25rem",
+    "2xl": "1.5rem",
+    "3xl": "2rem",
+    "4xl": "2.5rem"
+  },
+  fontWeight: {
+    thin: 100,
+    extralight: 200,
+    light: 300,
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+    extrabold: 800,
+    black: 900
+  },
+  lineHeight: {
+    tight: 1.25,
+    snug: 1.3,
+    normal: 1.5,
+    relaxed: 1.75
+  },
+  letterSpacing: {
+    tight: "-0.02em",
+    normal: "0",
+    wide: "0.02em"
+  }
+};
+
+// src/styles/ts/radius.ts
+var radius = {
+  sm: "6px",
+  md: "8px",
+  lg: "12px",
+  xl: "16px",
+  full: "9999px"
+};
+
+// src/styles/ts/shadows.ts
+var shadows = {
+  sm: "0 2px 4px rgba(0, 0, 0, 0.04)",
+  md: "0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04)",
+  lg: "0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06)",
+  xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04)"
+};
+
+// src/styles/ts/motion.ts
+var motion = {
+  transition: {
+    fast: "0.1s ease-in-out",
+    base: "0.2s ease-in-out",
+    slow: "0.3s ease-in-out",
+    emphasized: "0.25s cubic-bezier(0.4, 0, 0.2, 1)",
+    bounce: "0.3s cubic-bezier(0.16, 1, 0.3, 1)",
+    fade: "0.15s ease-in-out",
+    slide: "0.25s ease-in-out",
+    scale: "0.2s cubic-bezier(0.2, 0.8, 0.2, 1)",
+    state: "0.18s ease-in-out"
+  }
+};
+
+// src/styles/ts/skeleton.ts
+var skeleton = {
+  color: {
+    base: colors.backgroundNeutral,
+    wave: colors.backgroundMuted,
+    highlight: colors.backgroundSecondary
+  },
+  gradient: `linear-gradient(90deg, ${colors.backgroundNeutral} 25%, ${colors.backgroundSecondary} 37%, ${colors.backgroundMuted} 63%)`,
+  radius: {
+    sm: radius.sm,
+    md: radius.md,
+    lg: radius.lg
+  },
+  height: {
+    xs: spacing.xs,
+    sm: spacing.sm,
+    md: spacing.md,
+    lg: spacing.lg,
+    xl: spacing.xl
+  },
+  animation: {
+    duration: "1.4s",
+    timing: "ease-in-out"
+  }
+};
+
+// src/styles/ts/breakpoints.ts
+var breakpoints = {
+  mobile: 0,
+  // ~767
+  tablet: 768,
+  // 768 ~ 1023
+  laptop: 1024,
+  // 1024 ~ 1439
+  desktop: 1440
+  // 1440+
+};
+
+// src/styles/ts/z-index.ts
+var zIndex = {
+  loading: 9999,
+  modal: 1e4,
+  toast: 10001
+};
+
+// src/styles/ts/a11y.ts
+var a11y = {
+  focusRing: "0 0 0 3px rgba(0, 0, 0, 0.15)",
+  focusRingError: "0 0 0 3px rgba(239, 68, 68, 0.15)",
+  focusRingSuccess: "0 0 0 3px rgba(16, 185, 129, 0.15)",
+  tapMinSize: "44px"
+};
+
 // src/utils/cn.ts
 var cn = (...classes) => {
   const classNames = [];
@@ -1081,4 +1255,4 @@ var Modal = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, a11y, breakpoints, colors, motion, radius, shadows, skeleton, spacing, typography, useAlert, useToast, zIndex };

package/dist/next.css

@@ -1,4 +1,12 @@
 /* src/ui/navigation/sidebar/style.scss */
+@keyframes skeleton_loading {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
 .sidebar {
   display: flex;
   flex-direction: column;

package/dist/styles/scss/_skeleton.scss

@@ -1,8 +1,9 @@
-@use "src/styles/scss/token" as token;
+// Standalone skeleton tokens — no external @use so consumers can import
+// this file directly without needing the design system's src/ in their loadPaths.
 
-$color_skeleton_base: token.$color_background_neutral;
-$color_skeleton_wave: token.$color_background_muted;
-$color_skeleton_highlight: token.$color_background_secondary;
+$color_skeleton_base: #F3F3F3;
+$color_skeleton_wave: #f0f0f0;
+$color_skeleton_highlight: #fafafa;
 
 $skeleton_gradient: linear-gradient(
                 90deg,
@@ -11,15 +12,15 @@ $skeleton_gradient: linear-gradient(
                 $color_skeleton_wave 63%
 );
 
-$skeleton_radius_sm: token.$radius_sm;
-$skeleton_radius_md: token.$radius_md;
-$skeleton_radius_lg: token.$radius_lg;
+$skeleton_radius_sm: 6px;
+$skeleton_radius_md: 8px;
+$skeleton_radius_lg: 12px;
 
-$skeleton_height_xs: token.$spacing_xs;
-$skeleton_height_sm: token.$spacing_sm;
-$skeleton_height_md: token.$spacing_md;
-$skeleton_height_lg: token.$spacing_lg;
-$skeleton_height_xl: token.$spacing_xl;
+$skeleton_height_xs: 0.25rem;  // 4px
+$skeleton_height_sm: 0.5rem;   // 8px
+$skeleton_height_md: 0.75rem;  // 12px
+$skeleton_height_lg: 1rem;     // 16px
+$skeleton_height_xl: 1.25rem;  // 20px
 
 $skeleton_animation_duration: 1.4s;
 $skeleton_animation_timing: ease-in-out;
@@ -48,13 +49,13 @@ $skeleton_animation_timing: ease-in-out;
   @include skeleton(100%, $skeleton_height_xl);
 }
 
-@mixin skeleton_avatar($size: token.$spacing_6xl) {
+@mixin skeleton_avatar($size: 2.5rem) {
   @include skeleton($size, $size, $skeleton_radius_lg);
 }
 
 @mixin skeleton_rect(
   $width: 100%,
-  $height: token.$spacing_8xl
+  $height: 5rem
 ) {
   @include skeleton($width, $height, $skeleton_radius_md);
 }
@@ -66,4 +67,4 @@ $skeleton_animation_timing: ease-in-out;
   100% {
     background-position: 0 0;
   }
-}
+}

package/dist/styles/scss/token.scss

@@ -5,6 +5,7 @@
 @forward "motion";
 @forward "radius";
 @forward "shadows";
+@forward "skeleton";
 @forward "spacing";
 @forward "typography";
 @forward "z-index";

package/dist/vanilla/bigtablet.min.css

@@ -1 +1 @@
-:root{--bt-color-primary: #000000;--bt-color-primary-hover: #333333;--bt-color-background: #ffffff;--bt-color-background-secondary: #fafafa;--bt-color-background-neutral: #F3F3F3;--bt-color-background-muted: #f0f0f0;--bt-color-text-primary: #1a1a1a;--bt-color-text-secondary: #666666;--bt-color-text-tertiary: #999999;--bt-text-inverse: #ffffff;--bt-text-disabled: #9ca3af;--bt-color-border: #e5e5e5;--bt-color-border-light: rgba(0, 0, 0, 0.08);--bt-color-success: #10b981;--bt-color-error: #ef4444;--bt-color-warning: #f59e0b;--bt-color-info: #3b82f6;--bt-color-overlay: rgba(0, 0, 0, 0.5);--bt-spacing-xs: 0.25rem;--bt-spacing-sm: 0.5rem;--bt-spacing-md: 0.75rem;--bt-spacing-lg: 1rem;--bt-spacing-xl: 1.25rem;--bt-spacing-2xl: 1.5rem;--bt-spacing-3xl: 1.75rem;--bt-font-family: Pretendard, sans-serif;--bt-font-size-xs: 0.75rem;--bt-font-size-sm: 0.875rem;--bt-font-size-base: 0.9375rem;--bt-font-size-md: 1rem;--bt-font-size-lg: 1.125rem;--bt-font-size-xl: 1.25rem;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-font-weight-bold: 700;--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);--bt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);--bt-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);--bt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--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: 10000;--bt-z-toast: 10001}.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;inset: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-shadow-md);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;inset: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-shadow-lg);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;inset: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-shadow-xl);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--shadow-sm{box-shadow:var(--bt-shadow-sm)}.bt-card--shadow-md{box-shadow:var(--bt-shadow-md)}.bt-card--shadow-lg{box-shadow:var(--bt-shadow-lg)}.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-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;inset: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-shadow-lg)}.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: #000000;--bt-color-primary-hover: #333333;--bt-color-background: #ffffff;--bt-color-background-secondary: #fafafa;--bt-color-background-neutral: #F3F3F3;--bt-color-background-muted: #f0f0f0;--bt-color-text-primary: #1a1a1a;--bt-color-text-secondary: #666666;--bt-color-text-tertiary: #999999;--bt-text-inverse: #ffffff;--bt-text-disabled: #9ca3af;--bt-color-border: #e5e5e5;--bt-color-border-light: rgba(0, 0, 0, 0.08);--bt-color-success: #10b981;--bt-color-error: #ef4444;--bt-color-warning: #f59e0b;--bt-color-info: #3b82f6;--bt-color-overlay: rgba(0, 0, 0, 0.5);--bt-spacing-xs: 0.25rem;--bt-spacing-sm: 0.5rem;--bt-spacing-md: 0.75rem;--bt-spacing-lg: 1rem;--bt-spacing-xl: 1.25rem;--bt-spacing-2xl: 1.5rem;--bt-spacing-3xl: 1.75rem;--bt-font-family: Pretendard, sans-serif;--bt-font-size-xs: 0.75rem;--bt-font-size-sm: 0.875rem;--bt-font-size-base: 0.9375rem;--bt-font-size-md: 1rem;--bt-font-size-lg: 1.125rem;--bt-font-size-xl: 1.25rem;--bt-font-weight-regular: 400;--bt-font-weight-medium: 500;--bt-font-weight-semibold: 600;--bt-font-weight-bold: 700;--bt-line-height-normal: 1.5;--bt-radius-sm: 6px;--bt-radius-md: 8px;--bt-radius-lg: 12px;--bt-radius-full: 9999px;--bt-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.04);--bt-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);--bt-shadow-lg: 0 8px 20px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);--bt-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);--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: 10000;--bt-z-toast: 10001}.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;inset: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-shadow-md);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;inset: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-shadow-lg);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;inset: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-shadow-xl);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--shadow-sm{box-shadow:var(--bt-shadow-sm)}.bt-card--shadow-md{box-shadow:var(--bt-shadow-md)}.bt-card--shadow-lg{box-shadow:var(--bt-shadow-lg)}.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-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;inset: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-shadow-lg)}.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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigtablet/design-system",
-  "version": "1.21.1",
+  "version": "1.22.0",
   "description": "Bigtablet Design System UI Components",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -42,8 +42,8 @@
   ],
   "scripts": {
     "build": "tsup && pnpm run copy:scss && pnpm run build:vanilla",
-    "build:vanilla": "node scripts/build-vanilla.mjs",
-    "copy:scss": "node scripts/copy-scss.mjs",
+    "build:vanilla": "sh scripts/build-vanilla.sh",
+    "copy:scss": "sh scripts/copy-scss.sh",
     "dev": "tsup --watch",
     "storybook": "storybook dev -p 6006",
     "build:sb": "storybook build",
@@ -51,10 +51,10 @@
     "test:watch": "vitest --project unit",
     "test:coverage": "vitest run --project unit --coverage",
     "chromatic": "npx chromatic --project-token=$CHROMATIC_TOKEN --build-script-name=build:sb",
-    "figma:test": "node scripts/figma-connect.mjs",
-    "figma:snapshot": "node scripts/figma-snapshot.mjs",
-    "figma:diff": "node scripts/figma-diff.mjs",
-    "figma:apply": "node scripts/figma-apply.mjs",
+    "figma:test": "tsx scripts/figma-connect.ts",
+    "figma:snapshot": "tsx scripts/figma-snapshot.ts",
+    "figma:diff": "tsx scripts/figma-diff.ts",
+    "figma:apply": "tsx scripts/figma-apply.ts",
     "size": "size-limit",
     "prepare": "husky"
   },
@@ -106,7 +106,7 @@
     "esbuild-sass-plugin": "^3",
     "husky": "^9.1.7",
     "jsdom": "^28.0.0",
-    "lucide-react": "^0.552.0",
+    "lucide-react": "^0.577.0",
     "next": "16.1.6",
     "playwright": "^1.57.0",
     "react": "19.2.0",
@@ -114,8 +114,9 @@
     "sass-embedded": "^1.93.3",
     "semantic-release": "^25.0.1",
     "size-limit": "^12.0.1",
-    "storybook": "10.2.17",
+    "storybook": "10.2.19",
     "tsup": "^8.5.0",
+    "tsx": "^4.21.0",
     "typescript": "^5",
     "vite": "^5",
     "vitest": "^4.0.17"