@bigtablet/design-system 1.13.0 → 1.14.0

package/dist/index.d.ts

@@ -2,7 +2,6 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React from 'react';
 import * as react_toastify from 'react-toastify';
 
-/** Card UI */
 interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     heading?: React.ReactNode;
     shadow?: "none" | "sm" | "md" | "lg";
@@ -32,10 +31,22 @@ declare const AlertProvider: React.FC<{
     children: React.ReactNode;
 }>;
 
-interface LoadingProps {
+interface SpinnerProps {
     size?: number;
 }
-declare const Loading: ({ size }: LoadingProps) => react_jsx_runtime.JSX.Element;
+declare const Spinner: ({ size }: SpinnerProps) => react_jsx_runtime.JSX.Element;
+
+interface TopLoadingProps {
+    /** 진행률 (0-100). undefined면 indeterminate 모드 */
+    progress?: number;
+    /** 로딩바 색상 (기본: primary) */
+    color?: string;
+    /** 로딩바 높이 (기본: 3px) */
+    height?: number;
+    /** 표시 여부 */
+    isLoading?: boolean;
+}
+declare const TopLoading: ({ progress, color, height, isLoading, }: TopLoadingProps) => react_jsx_runtime.JSX.Element | null;
 
 interface ToastProviderProps {
     containerId?: string;
@@ -165,4 +176,4 @@ interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title">
 }
 declare const Modal: ({ open, onClose, closeOnOverlay, width, title, children, className, ...props }: ModalProps) => react_jsx_runtime.JSX.Element | null;
 
-export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Loading, Modal, Pagination, Radio, Select, type SelectOption, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, type SelectOption, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };

package/dist/index.js

@@ -8,7 +8,8 @@ import { ToastContainer, Slide, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import { ChevronDown, Check } from 'lucide-react';
 
-// src/ui/display/card/index.tsx
+// src/ui/display/card/style.module.scss
+var style_module_default = {};
 var Card = ({
   heading,
   shadow = "sm",
@@ -19,17 +20,20 @@ var Card = ({
   ...props
 }) => {
   const cls = [
-    "card",
-    `card_shadow_${shadow}`,
-    `card_p_${padding}`,
-    bordered ? "card_bordered" : "",
+    style_module_default.card,
+    style_module_default[`shadow_${shadow}`],
+    style_module_default[`p_${padding}`],
+    bordered && style_module_default.bordered,
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: cls, ...props, children: [
-    heading ? /* @__PURE__ */ jsx("div", { className: "card_title", children: heading }) : null,
-    /* @__PURE__ */ jsx("div", { className: "card_body", children })
+    heading ? /* @__PURE__ */ jsx("div", { className: style_module_default.title, children: heading }) : null,
+    /* @__PURE__ */ jsx("div", { className: style_module_default.body, children })
   ] });
 };
+
+// src/ui/feedback/alert/style.module.scss
+var style_module_default2 = {};
 var AlertContext = createContext(null);
 var useAlert = () => {
   const context = useContext(AlertContext);
@@ -89,24 +93,32 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: "alert_overlay", onClick: onClose, children: /* @__PURE__ */ jsxs(
+  const modalClassName = [
+    style_module_default2.modal,
+    style_module_default2[`variant_${variant}`]
+  ].filter(Boolean).join(" ");
+  const actionsClassName = [
+    style_module_default2.actions,
+    style_module_default2[`actions_${actionsAlign}`]
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: style_module_default2.overlay, onClick: onClose, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `alert_modal alert_modal_${variant}`,
+      className: modalClassName,
       onClick: (e) => e.stopPropagation(),
       role: "alertdialog",
       "aria-modal": "true",
       "aria-labelledby": "alert_title",
       "aria-describedby": "alert_message",
       children: [
-        title && /* @__PURE__ */ jsx("div", { className: "alert_modal_title", id: "alert_title", children: title }),
-        message && /* @__PURE__ */ jsx("div", { className: "alert_modal_message", id: "alert_message", children: message }),
-        /* @__PURE__ */ jsxs("div", { className: `alert_modal_actions alert_modal_actions_${actionsAlign}`, children: [
+        title && /* @__PURE__ */ jsx("div", { className: style_module_default2.title, id: "alert_title", children: title }),
+        message && /* @__PURE__ */ jsx("div", { className: style_module_default2.message, id: "alert_message", children: message }),
+        /* @__PURE__ */ jsxs("div", { className: actionsClassName, children: [
           showCancel && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "alert_modal_button alert_modal_button_cancel",
+              className: `${style_module_default2.button} ${style_module_default2.button_cancel}`,
               onClick: onCancel,
               children: cancelText
             }
@@ -115,7 +127,7 @@ var AlertModal = ({
             "button",
             {
               type: "button",
-              className: "alert_modal_button alert_modal_button_confirm",
+              className: `${style_module_default2.button} ${style_module_default2.button_confirm}`,
               onClick: onConfirm,
               children: confirmText
             }
@@ -125,17 +137,57 @@ var AlertModal = ({
     }
   ) });
 };
-var Loading = ({ size = 24 }) => {
+
+// src/ui/feedback/spinner/style.module.scss
+var style_module_default3 = {};
+var Spinner = ({ size = 24 }) => {
   return /* @__PURE__ */ jsx(
     "span",
     {
-      className: "loading",
+      className: style_module_default3.spinner,
       style: { width: size, height: size },
       role: "status",
       "aria-label": "\uB85C\uB529 \uC911"
     }
   );
 };
+
+// src/ui/feedback/top-loading/style.module.scss
+var style_module_default4 = {};
+var TopLoading = ({
+  progress,
+  color,
+  height = 3,
+  isLoading = true
+}) => {
+  if (!isLoading) return null;
+  const isIndeterminate = progress === void 0;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: style_module_default4.top_loading,
+      style: { height },
+      role: "progressbar",
+      "aria-valuemin": 0,
+      "aria-valuemax": 100,
+      "aria-valuenow": isIndeterminate ? void 0 : progress,
+      "aria-label": "\uD398\uC774\uC9C0 \uB85C\uB529 \uC911",
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: [
+            style_module_default4.bar,
+            isIndeterminate && style_module_default4.indeterminate
+          ].filter(Boolean).join(" "),
+          style: {
+            width: isIndeterminate ? void 0 : `${progress}%`,
+            backgroundColor: color
+          }
+        }
+      )
+    }
+  );
+};
 var ToastProvider = ({ containerId = "default" }) => {
   return /* @__PURE__ */ jsx(
     ToastContainer,
@@ -165,6 +217,9 @@ var useToast = (containerId = "default") => {
     message: (msg) => toast(msg, base)
   };
 };
+
+// src/ui/general/button/style.module.scss
+var style_module_default5 = {};
 var Button = ({
   variant = "primary",
   size = "md",
@@ -173,13 +228,16 @@ var Button = ({
   ...props
 }) => {
   const buttonClassName = [
-    "button",
-    `button_variant_${variant}`,
-    `button_size_${size}`,
+    style_module_default5.button,
+    style_module_default5[`size_${size}`],
+    style_module_default5[`variant_${variant}`],
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx("button", { className: buttonClassName, style: { width }, ...props });
 };
+
+// src/ui/form/checkbox/style.module.scss
+var style_module_default6 = {};
 var Checkbox = ({
   label,
   size = "md",
@@ -193,8 +251,8 @@ var Checkbox = ({
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
   const rootClassName = [
-    "checkbox",
-    `checkbox_size_${size}`,
+    style_module_default6.checkbox,
+    style_module_default6[`size_${size}`],
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
@@ -203,14 +261,17 @@ var Checkbox = ({
       {
         ref: inputRef,
         type: "checkbox",
-        className: "checkbox_input",
+        className: style_module_default6.input,
         ...props
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
-    label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
+    /* @__PURE__ */ jsx("span", { className: style_module_default6.box, "aria-hidden": "true" }),
+    label ? /* @__PURE__ */ jsx("span", { className: style_module_default6.label, children: label }) : null
   ] });
 };
+
+// src/ui/form/file/style.module.scss
+var style_module_default7 = {};
 var FileInput = ({
   label = "\uD30C\uC77C \uC120\uD0DD",
   onFiles,
@@ -219,30 +280,44 @@ var FileInput = ({
   ...props
 }) => {
   const inputId = React3.useId();
-  const rootClassName = ["file_input", disabled ? "file_input_disabled" : "", className ?? ""].filter(Boolean).join(" ");
+  const rootClassName = [
+    style_module_default7.file_input,
+    disabled && style_module_default7.disabled,
+    className ?? ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
         id: inputId,
         type: "file",
-        className: "file_input_control",
+        className: style_module_default7.control,
         disabled,
         onChange: (e) => onFiles?.(e.currentTarget.files),
         ...props
       }
     ),
-    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label })
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: style_module_default7.label, children: label })
   ] });
 };
+
+// src/ui/form/radio/style.module.scss
+var style_module_default8 = {};
 var Radio = ({ label, size = "md", className, ...props }) => {
-  const rootClassName = ["radio", `radio_size_${size}`, className ?? ""].filter(Boolean).join(" ");
+  const rootClassName = [
+    style_module_default8.radio,
+    style_module_default8[`size_${size}`],
+    className ?? ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-    /* @__PURE__ */ jsx("input", { type: "radio", className: "radio_input", ...props }),
-    /* @__PURE__ */ jsx("span", { className: "radio_dot", "aria-hidden": "true" }),
-    label ? /* @__PURE__ */ jsx("span", { className: "radio_label", children: label }) : null
+    /* @__PURE__ */ jsx("input", { type: "radio", className: style_module_default8.input, ...props }),
+    /* @__PURE__ */ jsx("span", { className: style_module_default8.dot, "aria-hidden": "true" }),
+    label ? /* @__PURE__ */ jsx("span", { className: style_module_default8.label, children: label }) : null
   ] });
 };
+
+// src/ui/general/select/style.module.scss
+var style_module_default9 = {};
 var Select = ({
   id,
   label,
@@ -363,13 +438,13 @@ var Select = ({
       )
     );
   }, [isOpen, options, currentValue]);
-  const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
+  const rootClassName = [style_module_default9.select, className ?? ""].filter(Boolean).join(" ");
   const controlClassName = [
-    "select_control",
-    `select_control_variant_${variant}`,
-    `select_control_size_${size}`,
-    isOpen && "is_open",
-    disabled && "is_disabled"
+    style_module_default9.control,
+    style_module_default9[`variant_${variant}`],
+    style_module_default9[`size_${size}`],
+    isOpen && style_module_default9.is_open,
+    disabled && style_module_default9.is_disabled
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
@@ -382,7 +457,7 @@ var Select = ({
           "label",
           {
             htmlFor: selectId,
-            className: "select_label",
+            className: style_module_default9.label,
             children: label
           }
         ),
@@ -402,12 +477,12 @@ var Select = ({
               /* @__PURE__ */ jsx(
                 "span",
                 {
-                  className: currentOption ? "select_value" : "select_placeholder",
+                  className: currentOption ? style_module_default9.value : style_module_default9.placeholder,
                   style: textAlign === "left" ? { textAlign: "start" } : void 0,
                   children: currentOption ? currentOption.label : placeholder
                 }
               ),
-              /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+              /* @__PURE__ */ jsx("span", { className: style_module_default9.icon, "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
             ]
           }
         ),
@@ -416,15 +491,15 @@ var Select = ({
           {
             id: `${selectId}_listbox`,
             role: "listbox",
-            className: "select_list",
+            className: style_module_default9.list,
             children: options.map((opt, i) => {
               const selected = currentValue === opt.value;
               const active = i === activeIndex;
               const optionClassName = [
-                "select_option",
-                selected && "is_selected",
-                active && "is_active",
-                opt.disabled && "is_disabled"
+                style_module_default9.option,
+                selected && style_module_default9.is_selected,
+                active && style_module_default9.is_active,
+                opt.disabled && style_module_default9.is_disabled
               ].filter(Boolean).join(" ");
               return /* @__PURE__ */ jsxs(
                 "li",
@@ -458,6 +533,9 @@ var Select = ({
     }
   );
 };
+
+// src/ui/form/switch/style.module.scss
+var style_module_default10 = {};
 var Switch = ({
   checked,
   defaultChecked,
@@ -477,10 +555,10 @@ var Switch = ({
     onChange?.(next);
   };
   const rootClassName = [
-    "switch",
-    `switch_size_${size}`,
-    isOn && "switch_on",
-    disabled && "switch_disabled",
+    style_module_default10.switch,
+    style_module_default10[`size_${size}`],
+    isOn && style_module_default10.on,
+    disabled && style_module_default10.disabled,
     className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
@@ -493,10 +571,13 @@ var Switch = ({
       onClick: handleToggle,
       className: rootClassName,
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
+      children: /* @__PURE__ */ jsx("span", { className: style_module_default10.thumb })
     }
   );
 };
+
+// src/ui/form/textfield/style.module.scss
+var style_module_default11 = {};
 var TextField = React3.forwardRef(
   ({
     id,
@@ -529,28 +610,28 @@ var TextField = React3.forwardRef(
       setInnerValue(applyTransform(value ?? ""));
     }, [isControlled, value, transformValue]);
     const rootClassName = [
-      "text_field",
-      fullWidth && "text_field_full_width",
+      style_module_default11.text_field,
+      fullWidth && style_module_default11.full_width,
       className ?? ""
     ].filter(Boolean).join(" ");
     const inputClassName = [
-      "text_field_input",
-      `text_field_variant_${variant}`,
-      `text_field_size_${size}`,
-      leftIcon && "text_field_with_left",
-      rightIcon && "text_field_with_right",
-      error && "text_field_error",
-      success && "text_field_success"
+      style_module_default11.input,
+      style_module_default11[`variant_${variant}`],
+      style_module_default11[`size_${size}`],
+      leftIcon && style_module_default11.with_left,
+      rightIcon && style_module_default11.with_right,
+      error && style_module_default11.error,
+      success && style_module_default11.success
     ].filter(Boolean).join(" ");
     const helperClassName = [
-      "text_field_helper",
-      error && "text_field_helper_error",
-      success && "text_field_helper_success"
+      style_module_default11.helper,
+      error && style_module_default11.helper_error,
+      success && style_module_default11.helper_success
     ].filter(Boolean).join(" ");
     return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
-      label ? /* @__PURE__ */ jsx("label", { className: "text_field_label", htmlFor: inputId, children: label }) : null,
-      /* @__PURE__ */ jsxs("div", { className: "text_field_wrap", children: [
-        leftIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_left", children: leftIcon }) : null,
+      label ? /* @__PURE__ */ jsx("label", { className: style_module_default11.label, htmlFor: inputId, children: label }) : null,
+      /* @__PURE__ */ jsxs("div", { className: style_module_default11.wrap, children: [
+        leftIcon ? /* @__PURE__ */ jsx("span", { className: `${style_module_default11.icon} ${style_module_default11.icon_left}`, children: leftIcon }) : null,
         /* @__PURE__ */ jsx(
           "input",
           {
@@ -583,13 +664,16 @@ var TextField = React3.forwardRef(
             }
           }
         ),
-        rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", children: rightIcon }) : null
+        rightIcon ? /* @__PURE__ */ jsx("span", { className: `${style_module_default11.icon} ${style_module_default11.icon_right}`, children: rightIcon }) : null
       ] }),
       helperText ? /* @__PURE__ */ jsx("div", { id: helperId, className: helperClassName, children: helperText }) : null
     ] });
   }
 );
 TextField.displayName = "TextField";
+
+// src/ui/form/date-picker/style.module.scss
+var style_module_default12 = {};
 var pad = (n) => String(n).padStart(2, "0");
 var getDaysInMonth = (year, month) => new Date(year, month, 0).getDate();
 var normalizeWidth = (v) => typeof v === "number" ? `${v}px` : v;
@@ -629,57 +713,62 @@ var DatePicker = ({
     const safeDay = clampDay(yy, mm, dd ?? 1);
     onChange(`${yy}-${pad(mm)}-${pad(safeDay)}`);
   };
-  return /* @__PURE__ */ jsxs("div", { className: "date_picker", style: { width: normalizeWidth(width?.container) }, children: [
-    label && /* @__PURE__ */ jsx("label", { className: "date_picker_label", children: label }),
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        style: { width: normalizeWidth(width?.year) },
-        value: year,
-        disabled,
-        onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-          Array.from(
-            { length: maxYear - startYear + 1 },
-            (_, i) => startYear + i
-          ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
-        ]
-      }
-    ),
-    /* @__PURE__ */ jsxs(
-      "select",
-      {
-        style: { width: normalizeWidth(width?.month) },
-        value: month,
-        disabled: disabled || !year,
-        onChange: (e) => emit(year, Number(e.target.value), day || minDay),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-          Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map(
-            (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
-          )
-        ]
-      }
-    ),
-    mode === "year-month-day" && /* @__PURE__ */ jsxs(
-      "select",
-      {
-        style: { width: normalizeWidth(width?.day) },
-        value: day,
-        disabled: disabled || !month,
-        onChange: (e) => emit(year, month, Number(e.target.value)),
-        children: [
-          /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
-          Array.from(
-            { length: days - minDay + 1 },
-            (_, i) => minDay + i
-          ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
-        ]
-      }
-    )
+  return /* @__PURE__ */ jsxs("div", { className: style_module_default12.date_picker, style: { width: normalizeWidth(width?.container) }, children: [
+    label && /* @__PURE__ */ jsx("label", { className: style_module_default12.label, children: label }),
+    /* @__PURE__ */ jsxs("div", { className: style_module_default12.fields, children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          style: { width: normalizeWidth(width?.year) },
+          value: year,
+          disabled,
+          onChange: (e) => emit(Number(e.target.value), month || minMonth, day || minDay),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+            Array.from(
+              { length: maxYear - startYear + 1 },
+              (_, i) => startYear + i
+            ).map((y2) => /* @__PURE__ */ jsx("option", { value: y2, children: y2 }, y2))
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          style: { width: normalizeWidth(width?.month) },
+          value: month,
+          disabled: disabled || !year,
+          onChange: (e) => emit(year, Number(e.target.value), day || minDay),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+            Array.from({ length: maxMonth - minMonth + 1 }, (_, i) => minMonth + i).map(
+              (m2) => /* @__PURE__ */ jsx("option", { value: m2, children: pad(m2) }, m2)
+            )
+          ]
+        }
+      ),
+      mode === "year-month-day" && /* @__PURE__ */ jsxs(
+        "select",
+        {
+          style: { width: normalizeWidth(width?.day) },
+          value: day,
+          disabled: disabled || !month,
+          onChange: (e) => emit(year, month, Number(e.target.value)),
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "", disabled: true }),
+            Array.from(
+              { length: days - minDay + 1 },
+              (_, i) => minDay + i
+            ).map((d2) => /* @__PURE__ */ jsx("option", { value: d2, children: pad(d2) }, d2))
+          ]
+        }
+      )
+    ] })
   ] });
 };
+
+// src/ui/navigation/pagination/style.module.scss
+var style_module_default13 = {};
 var range = (start, end) => {
   const out = [];
   for (let i = start; i <= end; i += 1) out.push(i);
@@ -705,27 +794,31 @@ var Pagination = ({ page, totalPages, onChange }) => {
     () => getPaginationItems(page, totalPages),
     [page, totalPages]
   );
-  return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
+  return /* @__PURE__ */ jsxs("nav", { className: style_module_default13.pagination, "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "pagination_item",
+        className: style_module_default13.item,
         onClick: () => onChange(page - 1),
         disabled: prevDisabled,
         "aria-label": "Previous page",
         children: "\u2039"
       }
     ),
-    /* @__PURE__ */ jsx("div", { className: "pagination_pages", role: "list", children: items.map((it, idx) => {
+    /* @__PURE__ */ jsx("div", { className: style_module_default13.pages, role: "list", children: items.map((it, idx) => {
       if (it === "ellipsis") {
-        return /* @__PURE__ */ jsx("span", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${idx}`);
+        return /* @__PURE__ */ jsx("span", { className: style_module_default13.ellipsis, "aria-hidden": "true", children: "\u2026" }, `e-${idx}`);
       }
       const isActive = it === page;
+      const buttonClassName = [
+        style_module_default13.pageButton,
+        isActive && style_module_default13.active
+      ].filter(Boolean).join(" ");
       return /* @__PURE__ */ jsx(
         "button",
         {
           type: "button",
-          className: `pagination_pageButton ${isActive ? "is-active" : ""}`,
+          className: buttonClassName,
           onClick: () => onChange(it),
           "aria-current": isActive ? "page" : void 0,
           children: it
@@ -736,7 +829,7 @@ var Pagination = ({ page, totalPages, onChange }) => {
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "pagination_item",
+        className: style_module_default13.item,
         onClick: () => onChange(page + 1),
         disabled: nextDisabled,
         "aria-label": "Next page",
@@ -745,6 +838,9 @@ var Pagination = ({ page, totalPages, onChange }) => {
     )
   ] });
 };
+
+// src/ui/overlay/modal/style.module.scss
+var style_module_default14 = {};
 var Modal = ({
   open,
   onClose,
@@ -764,23 +860,24 @@ var Modal = ({
     return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
+  const panelClassName = [style_module_default14.panel, className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: "modal",
+      className: style_module_default14.modal,
       role: "dialog",
       "aria-modal": "true",
       onClick: () => closeOnOverlay && onClose?.(),
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: ["modal_panel", className].filter(Boolean).join(" "),
+          className: panelClassName,
           style: { width },
           onClick: (e) => e.stopPropagation(),
           ...props,
           children: [
-            title && /* @__PURE__ */ jsx("div", { className: "modal_header", children: title }),
-            /* @__PURE__ */ jsx("div", { className: "modal_body", children })
+            title && /* @__PURE__ */ jsx("div", { className: style_module_default14.header, children: title }),
+            /* @__PURE__ */ jsx("div", { className: style_module_default14.body, children })
           ]
         }
       )
@@ -788,4 +885,4 @@ var Modal = ({
   );
 };
 
-export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Loading, Modal, Pagination, Radio, Select, Switch, TextField, ToastProvider, useAlert, useToast };
+export { AlertProvider, Button, Card, Checkbox, DatePicker, FileInput, Modal, Pagination, Radio, Select, Spinner, Switch, TextField, ToastProvider, TopLoading, useAlert, useToast };