@bigtablet/design-system 1.3.2 → 1.5.0

package/dist/index.js

@@ -13,21 +13,21 @@ var Card = ({
   heading,
   shadow = "sm",
   padding = "md",
-  bordered,
+  bordered = false,
   className,
   children,
   ...props
 }) => {
   const cls = [
     "card",
-    `card--shadow-${shadow}`,
-    `card--p-${padding}`,
-    bordered && "card--bordered",
-    className
+    `card_shadow_${shadow}`,
+    `card_p_${padding}`,
+    bordered ? "card_bordered" : "",
+    className ?? ""
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("div", { className: cls, ...props, children: [
-    heading && /* @__PURE__ */ jsx("div", { className: "card__title", children: heading }),
-    /* @__PURE__ */ jsx("div", { className: "card__body", children })
+    heading ? /* @__PURE__ */ jsx("div", { className: "card_title", children: heading }) : null,
+    /* @__PURE__ */ jsx("div", { className: "card_body", children })
   ] });
 };
 var AlertContext = createContext(null);
@@ -89,24 +89,24 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: "alert-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx("div", { className: "alert_overlay", onClick: onClose, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: `alert-modal alert-modal--${variant}`,
+      className: `alert_modal alert_modal_${variant}`,
       onClick: (e) => e.stopPropagation(),
       role: "alertdialog",
       "aria-modal": "true",
-      "aria-labelledby": "alert-title",
-      "aria-describedby": "alert-message",
+      "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: "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: [
           showCancel && /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
-              className: "alert-modal__button alert-modal__button--cancel",
+              className: "alert_modal_button alert_modal_button_cancel",
               onClick: onCancel,
               children: cancelText
             }
@@ -115,7 +115,7 @@ var AlertModal = ({
             "button",
             {
               type: "button",
-              className: "alert-modal__button alert-modal__button--confirm",
+              className: "alert_modal_button alert_modal_button_confirm",
               onClick: onConfirm,
               children: confirmText
             }
@@ -210,44 +210,53 @@ var Loading = ({ size = 24 }) => {
     {
       className: "loading",
       style: { width: size, height: size },
-      "aria-label": "Loading"
+      role: "status",
+      "aria-label": "\uB85C\uB529 \uC911"
     }
   );
 };
-var ToastProvider = () => /* @__PURE__ */ jsx(
-  ToastContainer,
-  {
-    position: "top-right",
-    autoClose: 2e3,
-    hideProgressBar: false,
-    newestOnTop: false,
-    closeOnClick: true,
-    rtl: false,
-    pauseOnFocusLoss: true,
-    draggable: true,
-    pauseOnHover: true,
-    theme: "light",
-    transition: Slide
-  }
-);
-var useToast = () => {
+var ToastProvider = ({ containerId = "default" }) => {
+  return /* @__PURE__ */ jsx(
+    ToastContainer,
+    {
+      containerId,
+      position: "top-right",
+      autoClose: 2e3,
+      hideProgressBar: false,
+      newestOnTop: false,
+      closeOnClick: true,
+      rtl: false,
+      pauseOnFocusLoss: true,
+      draggable: true,
+      pauseOnHover: true,
+      theme: "light",
+      transition: Slide
+    }
+  );
+};
+var useToast = (containerId = "default") => {
+  const base = { containerId };
   return {
-    success: (msg) => toast.success(msg),
-    error: (msg) => toast.error(msg),
-    warning: (msg) => toast.warning(msg),
-    info: (msg) => toast.info(msg),
-    message: (msg) => toast(msg)
+    success: (msg) => toast.success(msg, base),
+    error: (msg) => toast.error(msg, base),
+    warning: (msg) => toast.warning(msg, base),
+    info: (msg) => toast.info(msg, base),
+    message: (msg) => toast(msg, base)
   };
 };
 var Button = ({
   variant = "primary",
   size = "md",
   className,
-  style,
   ...props
 }) => {
-  const classes = ["btn", `btn--${variant}`, `btn--${size}`, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx("button", { className: classes, ...props });
+  const buttonClassName = [
+    "button",
+    `button_variant_${variant}`,
+    `button_size_${size}`,
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("button", { className: buttonClassName, ...props });
 };
 var Checkbox = ({
   label,
@@ -256,62 +265,63 @@ var Checkbox = ({
   className,
   ...props
 }) => {
-  const ref = React3.useRef(null);
+  const inputRef = React3.useRef(null);
   React3.useEffect(() => {
-    if (ref.current) ref.current.indeterminate = !!indeterminate;
+    if (!inputRef.current) return;
+    inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: ["checkbox", `checkbox--${size}`, className].filter(Boolean).join(" "),
-      children: [
-        /* @__PURE__ */ jsx("input", { ref, type: "checkbox", className: "checkbox__input", ...props }),
-        /* @__PURE__ */ jsx("span", { className: "checkbox__box", "aria-hidden": true }),
-        label && /* @__PURE__ */ jsx("span", { className: "checkbox__label", children: label })
-      ]
-    }
-  );
+  const rootClassName = [
+    "checkbox",
+    `checkbox_size_${size}`,
+    className ?? ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "checkbox",
+        className: "checkbox_input",
+        ...props
+      }
+    ),
+    /* @__PURE__ */ jsx("span", { className: "checkbox_box", "aria-hidden": "true" }),
+    label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
+  ] });
 };
 var FileInput = ({
-  label = "Choose file",
+  label = "\uD30C\uC77C \uC120\uD0DD",
   onFiles,
   className,
+  disabled,
   ...props
 }) => {
-  const id = React3.useId();
-  return /* @__PURE__ */ jsxs("div", { className: ["file", className].filter(Boolean).join(" "), children: [
+  const inputId = React3.useId();
+  const rootClassName = ["file_input", disabled ? "file_input_disabled" : "", className ?? ""].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     /* @__PURE__ */ jsx(
       "input",
       {
-        id,
+        id: inputId,
         type: "file",
-        className: "file__input",
+        className: "file_input_control",
+        disabled,
         onChange: (e) => onFiles?.(e.currentTarget.files),
         ...props
       }
     ),
-    /* @__PURE__ */ jsx("label", { htmlFor: id, className: "file__label", children: label })
+    /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label })
   ] });
 };
-var Radio = ({
-  label,
-  size = "md",
-  className,
-  ...props
-}) => {
-  return /* @__PURE__ */ jsxs(
-    "label",
-    {
-      className: ["radio", `radio--${size}`, className].filter(Boolean).join(" "),
-      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 })
-      ]
-    }
-  );
+var Radio = ({ label, size = "md", className, ...props }) => {
+  const rootClassName = ["radio", `radio_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
+  ] });
 };
-function Select({
+var Select = ({
   id,
   label,
   placeholder = "Select\u2026",
@@ -324,39 +334,38 @@ function Select({
   variant = "outline",
   fullWidth,
   className
-}) {
+}) => {
   const internalId = React3.useId();
   const selectId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internal, setInternal] = React3.useState(defaultValue);
-  const currentValue = isControlled ? value ?? null : internal;
-  const [open, setOpen] = React3.useState(false);
+  const [internalValue, setInternalValue] = React3.useState(defaultValue);
+  const currentValue = isControlled ? value ?? null : internalValue;
+  const [isOpen, setIsOpen] = React3.useState(false);
   const [activeIndex, setActiveIndex] = React3.useState(-1);
   const wrapperRef = React3.useRef(null);
-  const listRef = React3.useRef(null);
   const currentOption = React3.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
   const setValue = React3.useCallback(
     (next) => {
-      const opt = options.find((o) => o.value === next) ?? null;
-      if (!isControlled) setInternal(next);
-      onChange?.(next, opt);
+      const option = options.find((o) => o.value === next) ?? null;
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next, option);
     },
     [isControlled, onChange, options]
   );
   React3.useEffect(() => {
     const onDocClick = (e) => {
       if (!wrapperRef.current) return;
-      if (!wrapperRef.current.contains(e.target)) setOpen(false);
+      if (!wrapperRef.current.contains(e.target)) setIsOpen(false);
     };
     document.addEventListener("mousedown", onDocClick);
     return () => document.removeEventListener("mousedown", onDocClick);
   }, []);
   const moveActive = (dir) => {
-    if (!open) {
-      setOpen(true);
+    if (!isOpen) {
+      setIsOpen(true);
       return;
     }
     let i = activeIndex;
@@ -374,7 +383,7 @@ function Select({
     const opt = options[activeIndex];
     if (!opt.disabled) {
       setValue(opt.value);
-      setOpen(false);
+      setIsOpen(false);
     }
   };
   const onKeyDown = (e) => {
@@ -383,7 +392,7 @@ function Select({
       case " ":
       case "Enter":
         e.preventDefault();
-        if (!open) setOpen(true);
+        if (!isOpen) setIsOpen(true);
         else commitActive();
         break;
       case "ArrowDown":
@@ -396,12 +405,12 @@ function Select({
         break;
       case "Home":
         e.preventDefault();
-        setOpen(true);
+        setIsOpen(true);
         setActiveIndex(options.findIndex((o) => !o.disabled));
         break;
       case "End":
         e.preventDefault();
-        setOpen(true);
+        setIsOpen(true);
         for (let i = options.length - 1; i >= 0; i--) {
           if (!options[i].disabled) {
             setActiveIndex(i);
@@ -411,98 +420,90 @@ function Select({
         break;
       case "Escape":
         e.preventDefault();
-        setOpen(false);
+        setIsOpen(false);
         break;
     }
   };
   React3.useEffect(() => {
-    if (open) {
-      const idx = Math.max(
-        0,
-        options.findIndex((o) => o.value === currentValue && !o.disabled)
-      );
-      setActiveIndex(idx === -1 ? 0 : idx);
-    }
-  }, [open, options, currentValue]);
+    if (!isOpen) return;
+    const idx = options.findIndex((o) => o.value === currentValue && !o.disabled);
+    setActiveIndex(idx >= 0 ? idx : Math.max(0, options.findIndex((o) => !o.disabled)));
+  }, [isOpen, options, currentValue]);
+  const rootClassName = ["select", className ?? ""].filter(Boolean).join(" ");
+  const controlClassName = [
+    "select_control",
+    `select_control_variant_${variant}`,
+    `select_control_size_${size}`,
+    isOpen && "is_open",
+    disabled && "is_disabled"
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs(
     "div",
     {
       ref: wrapperRef,
-      className: `select${className ? ` ${className}` : ""}`,
+      className: rootClassName,
       style: fullWidth ? { width: "100%" } : void 0,
       children: [
-        label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select__label", children: label }),
+        label ? /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: "select_label", children: label }) : null,
         /* @__PURE__ */ jsxs(
           "button",
           {
             id: selectId,
             type: "button",
-            className: [
-              "select__control",
-              `select__control--${variant}`,
-              `select__control--${size}`,
-              open && "is-open",
-              disabled && "is-disabled"
-            ].filter(Boolean).join(" "),
+            className: controlClassName,
             "aria-haspopup": "listbox",
-            "aria-expanded": open,
-            "aria-controls": `${selectId}-listbox`,
-            onClick: () => !disabled && setOpen((o) => !o),
+            "aria-expanded": isOpen,
+            "aria-controls": `${selectId}_listbox`,
+            onClick: () => !disabled && setIsOpen((o) => !o),
             onKeyDown,
             disabled,
             children: [
-              /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: currentOption ? "select__value" : "select__placeholder",
-                  children: currentOption ? currentOption.label : placeholder
-                }
-              ),
-              /* @__PURE__ */ jsx("span", { className: "select__icon", "aria-hidden": true, children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
+              /* @__PURE__ */ jsx("span", { className: currentOption ? "select_value" : "select_placeholder", children: currentOption ? currentOption.label : placeholder }),
+              /* @__PURE__ */ jsx("span", { className: "select_icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, { size: 16 }) })
             ]
           }
         ),
-        open && /* @__PURE__ */ jsx(
+        isOpen ? /* @__PURE__ */ jsx(
           "ul",
           {
-            ref: listRef,
-            id: `${selectId}-listbox`,
+            id: `${selectId}_listbox`,
             role: "listbox",
-            className: "select__list",
+            className: "select_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"
+              ].filter(Boolean).join(" ");
               return /* @__PURE__ */ jsxs(
                 "li",
                 {
                   role: "option",
                   "aria-selected": selected,
-                  className: [
-                    "select__option",
-                    selected && "is-selected",
-                    active && "is-active",
-                    opt.disabled && "is-disabled"
-                  ].filter(Boolean).join(" "),
+                  className: optionClassName,
                   onMouseEnter: () => !opt.disabled && setActiveIndex(i),
                   onClick: () => {
                     if (opt.disabled) return;
                     setValue(opt.value);
-                    setOpen(false);
+                    setIsOpen(false);
                   },
                   children: [
                     /* @__PURE__ */ jsx("span", { children: opt.label }),
-                    selected && /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": true })
+                    selected ? /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" }) : null
                   ]
                 },
                 opt.value
               );
             })
           }
-        )
+        ) : null
       ]
     }
   );
-}
+};
 var Switch = ({
   checked,
   defaultChecked,
@@ -512,32 +513,33 @@ var Switch = ({
   className,
   ...props
 }) => {
-  const controlled = checked !== void 0;
-  const [inner, setInner] = React3.useState(!!defaultChecked);
-  const on = controlled ? !!checked : inner;
-  const toggle = () => {
+  const isControlled = checked !== void 0;
+  const [innerChecked, setInnerChecked] = React3.useState(!!defaultChecked);
+  const isOn = isControlled ? !!checked : innerChecked;
+  const handleToggle = () => {
     if (disabled) return;
-    const next = !on;
-    if (!controlled) setInner(next);
+    const next = !isOn;
+    if (!isControlled) setInnerChecked(next);
     onChange?.(next);
   };
+  const rootClassName = [
+    "switch",
+    `switch_size_${size}`,
+    isOn && "switch_on",
+    disabled && "switch_disabled",
+    className ?? ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
       role: "switch",
-      "aria-checked": on,
+      "aria-checked": isOn,
       disabled,
-      onClick: toggle,
-      className: [
-        "switch",
-        `switch--${size}`,
-        on && "is-on",
-        disabled && "is-disabled",
-        className
-      ].filter(Boolean).join(" "),
+      onClick: handleToggle,
+      className: rootClassName,
       ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "switch__thumb" })
+      children: /* @__PURE__ */ jsx("span", { className: "switch_thumb" })
     }
   );
 };
@@ -559,67 +561,109 @@ var TextField = React3.forwardRef(
   }, ref) => {
     const inputId = id ?? React3.useId();
     const helperId = helperText ? `${inputId}-help` : void 0;
-    const classNames = [
-      "tf__input",
-      `tf__input--${variant}`,
-      `tf__input--${size}`,
-      leftIcon && "tf__input--with-left",
-      rightIcon && "tf__input--with-right",
-      error && "tf__input--error",
-      success && "tf__input--success",
-      className
+    const rootClassName = [
+      "text_field",
+      fullWidth && "text_field_full_width",
+      className ?? ""
     ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs("div", { className: "tf", style: fullWidth ? { width: "100%" } : void 0, children: [
-      label && /* @__PURE__ */ jsx("label", { className: "tf__label", htmlFor: inputId, children: label }),
-      /* @__PURE__ */ jsxs("div", { className: "tf__wrapper", children: [
-        leftIcon && /* @__PURE__ */ jsx("span", { className: "tf__icon tf__icon--left", children: leftIcon }),
+    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"
+    ].filter(Boolean).join(" ");
+    const helperClassName = [
+      "text_field_helper",
+      error && "text_field_helper_error",
+      success && "text_field_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,
         /* @__PURE__ */ jsx(
           "input",
           {
             id: inputId,
             ref,
-            className: classNames,
+            className: inputClassName,
             "aria-invalid": !!error,
             "aria-describedby": helperId,
             ...props,
             onChange: onChangeAction
           }
         ),
-        rightIcon && /* @__PURE__ */ jsx("span", { className: "tf__icon tf__icon--right", children: rightIcon })
+        rightIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon text_field_icon_right", children: rightIcon }) : null
       ] }),
-      helperText && /* @__PURE__ */ jsx(
-        "div",
-        {
-          id: helperId,
-          className: `tf__helper ${error ? "tf__helper--error" : ""}`,
-          children: helperText
-        }
-      )
+      helperText ? /* @__PURE__ */ jsx("div", { id: helperId, className: helperClassName, children: helperText }) : null
     ] });
   }
 );
 TextField.displayName = "TextField";
-var Pagination = ({ page, hasNext, onChange }) => {
+var range = (start, end) => {
+  const out = [];
+  for (let i = start; i <= end; i += 1) out.push(i);
+  return out;
+};
+var getPaginationItems = (page, totalPages) => {
+  if (totalPages <= 7) return range(1, totalPages);
+  const items = [];
+  const last = totalPages;
+  const start = Math.max(2, page - 1);
+  const end = Math.min(last - 1, page + 1);
+  items.push(1);
+  if (start > 2) items.push("ellipsis");
+  for (const p of range(start, end)) items.push(p);
+  if (end < last - 1) items.push("ellipsis");
+  items.push(last);
+  return items;
+};
+var Pagination = ({ page, totalPages, onChange }) => {
   const prevDisabled = page <= 1;
-  const nextDisabled = !hasNext;
+  const nextDisabled = page >= totalPages;
+  const items = React3.useMemo(
+    () => getPaginationItems(page, totalPages),
+    [page, totalPages]
+  );
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "pagination__item",
-        onClick: () => !prevDisabled && onChange(page - 1),
+        className: "pagination_item",
+        onClick: () => onChange(page - 1),
         disabled: prevDisabled,
-        children: "Prev"
+        "aria-label": "Previous page",
+        children: "\u2039"
       }
     ),
-    /* @__PURE__ */ jsx("span", { className: "pagination__page", children: page }),
+    /* @__PURE__ */ jsx("div", { className: "pagination_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}`);
+      }
+      const isActive = it === page;
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: `pagination_pageButton ${isActive ? "is-active" : ""}`,
+          onClick: () => onChange(it),
+          "aria-current": isActive ? "page" : void 0,
+          children: it
+        },
+        it
+      );
+    }) }),
     /* @__PURE__ */ jsx(
       "button",
       {
-        className: "pagination__item",
-        onClick: () => !nextDisabled && onChange(page + 1),
+        className: "pagination_item",
+        onClick: () => onChange(page + 1),
         disabled: nextDisabled,
-        children: "Next"
+        "aria-label": "Next page",
+        children: "\u203A"
       }
     )
   ] });
@@ -631,12 +675,16 @@ var Modal = ({
   width = 520,
   title,
   children,
+  className,
   ...props
 }) => {
   React3.useEffect(() => {
-    const onKey = (e) => e.key === "Escape" && onClose?.();
-    if (open) document.addEventListener("keydown", onKey);
-    return () => document.removeEventListener("keydown", onKey);
+    if (!open) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") onClose?.();
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
   }, [open, onClose]);
   if (!open) return null;
   return /* @__PURE__ */ jsx(
@@ -649,37 +697,18 @@ var Modal = ({
       children: /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "modal__panel",
+          className: ["modal_panel", className].filter(Boolean).join(" "),
           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: "modal_header", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "modal_body", children })
           ]
         }
       )
     }
   );
 };
-var SkeletonCard = () => /* @__PURE__ */ jsxs("div", { className: "card-skeleton", children: [
-  /* @__PURE__ */ jsx("div", { className: "card-skeleton__thumb" }),
-  /* @__PURE__ */ jsxs("div", { className: "card-skeleton__text", children: [
-    /* @__PURE__ */ jsx("div", { className: "card-skeleton__line short" }),
-    /* @__PURE__ */ jsx("div", { className: "card-skeleton__line" })
-  ] })
-] });
-var card_default = SkeletonCard;
-var SkeletonList = () => /* @__PURE__ */ jsxs("div", { className: "request-item skeleton", children: [
-  /* @__PURE__ */ jsxs("div", { className: "request-item__left", children: [
-    /* @__PURE__ */ jsx("div", { className: "skeleton__title" }),
-    /* @__PURE__ */ jsxs("div", { className: "request-item__tags", children: [
-      /* @__PURE__ */ jsx("span", { className: "skeleton__tag" }),
-      /* @__PURE__ */ jsx("span", { className: "skeleton__tag" }),
-      /* @__PURE__ */ jsx("span", { className: "skeleton__tag" })
-    ] })
-  ] }),
-  /* @__PURE__ */ jsx("div", { className: "request-item__dday", children: /* @__PURE__ */ jsx("span", { className: "skeleton__dday" }) })
-] });
 
-export { Alert, AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, card_default as SkeletonCard, SkeletonList, Switch, TextField, ToastProvider, useAlert, useToast };
+export { Alert, AlertProvider, Button, Card, Checkbox, FileInput, Loading, Modal, Pagination, Radio, Select, Switch, TextField, ToastProvider, useAlert, useToast };