@bigtablet/design-system 2.4.0 → 2.4.2

package/dist/index.js

@@ -1,6 +1,6 @@
 "use client";
 import './index.css';
-import * as React5 from 'react';
+import * as React4 from 'react';
 import { createContext, useContext, useState, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { jsxs, jsx } from 'react/jsx-runtime';
@@ -107,6 +107,15 @@ var colors = {
   }
 };
 
+// src/styles/elevation/index.ts
+var elevation = {
+  level1: "0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12)",
+  level2: "0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12)",
+  level3: "0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12)",
+  level4: "0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12)",
+  level5: "0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)"
+};
+
 // src/styles/motion/index.ts
 var motion = {
   transition: {
@@ -147,15 +156,6 @@ var radius = {
   full: "9999px"
 };
 
-// src/styles/elevation/index.ts
-var elevation = {
-  level1: "0 1px 1px -1px rgba(0, 0, 0, 0.20), 0 3px 3px 0px rgba(0, 0, 0, 0.12)",
-  level2: "0 2px 2px -2px rgba(0, 0, 0, 0.20), 0 6px 6px 0px rgba(0, 0, 0, 0.12)",
-  level3: "0 3px 3px -3px rgba(0, 0, 0, 0.20), 0 9px 9px 0px rgba(0, 0, 0, 0.12)",
-  level4: "0 5px 5px -5px rgba(0, 0, 0, 0.20), 0 15px 15px 0px rgba(0, 0, 0, 0.12)",
-  level5: "0 8px 10px -5px rgba(0, 0, 0, 0.20), 0 20px 20px 0px rgba(0, 0, 0, 0.12)"
-};
-
 // src/styles/spacing/index.ts
 var spacing = {
   "0": "0px",
@@ -485,8 +485,8 @@ var FOCUSABLE_SELECTORS = [
   '[tabindex]:not([tabindex="-1"])'
 ].join(", ");
 function useFocusTrap(containerRef, isActive) {
-  const previousActiveElement = React5.useRef(null);
-  React5.useEffect(() => {
+  const previousActiveElement = React4.useRef(null);
+  React4.useEffect(() => {
     if (!isActive) return;
     const container = containerRef.current;
     if (!container) return;
@@ -591,43 +591,46 @@ var AlertModal = ({
   onCancel,
   onClose
 }) => {
-  const panelRef = React5.useRef(null);
-  const titleId = React5.useId();
-  const messageId = React5.useId();
+  const panelRef = React4.useRef(null);
+  const titleId = React4.useId();
+  const messageId = React4.useId();
   useFocusTrap(panelRef, true);
   const modalClassName = cn("alert_modal", `alert_variant_${variant}`);
   const actionsClassName = cn("alert_actions", `alert_actions_${actionsAlign}`);
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "alert_overlay",
-      role: "presentation",
-      onClick: onClose,
-      onKeyDown: (e) => e.key === "Escape" && onClose(),
-      children: /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: panelRef,
-          className: modalClassName,
-          onClick: (e) => e.stopPropagation(),
-          onKeyDown: (e) => {
-            if (e.key !== "Escape") e.stopPropagation();
-          },
-          role: "alertdialog",
-          "aria-modal": "true",
-          "aria-labelledby": titleId,
-          "aria-describedby": messageId,
-          children: [
-            title && /* @__PURE__ */ jsx("div", { className: "alert_title", id: titleId, children: title }),
-            message && /* @__PURE__ */ jsx("div", { className: "alert_message", id: messageId, children: message }),
-            /* @__PURE__ */ jsxs("div", { className: actionsClassName, children: [
-              showCancel && /* @__PURE__ */ jsx("button", { type: "button", className: "alert_button alert_button_cancel", onClick: onCancel, children: cancelText }),
-              /* @__PURE__ */ jsx("button", { type: "button", className: "alert_button alert_button_confirm", onClick: onConfirm, children: confirmText })
-            ] })
-          ]
-        }
-      )
-    }
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: modal overlay pattern — clickable backdrop without role=button (focus is trapped on the panel inside)
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "alert_overlay",
+        role: "presentation",
+        onClick: onClose,
+        onKeyDown: (e) => e.key === "Escape" && onClose(),
+        children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: panelRef,
+            className: modalClassName,
+            onClick: (e) => e.stopPropagation(),
+            onKeyDown: (e) => {
+              if (e.key !== "Escape") e.stopPropagation();
+            },
+            role: "alertdialog",
+            "aria-modal": "true",
+            "aria-labelledby": titleId,
+            "aria-describedby": messageId,
+            children: [
+              title && /* @__PURE__ */ jsx("div", { className: "alert_title", id: titleId, children: title }),
+              message && /* @__PURE__ */ jsx("div", { className: "alert_message", id: messageId, children: message }),
+              /* @__PURE__ */ jsxs("div", { className: actionsClassName, children: [
+                showCancel && /* @__PURE__ */ jsx("button", { type: "button", className: "alert_button alert_button_cancel", onClick: onCancel, children: cancelText }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "alert_button alert_button_confirm", onClick: onConfirm, children: confirmText })
+              ] })
+            ]
+          }
+        )
+      }
+    )
   );
 };
 var Button = ({
@@ -685,12 +688,12 @@ var Checkbox = ({
   ref,
   ...props
 }) => {
-  const inputRef = React5.useRef(null);
-  React5.useImperativeHandle(
+  const inputRef = React4.useRef(null);
+  React4.useImperativeHandle(
     ref,
     () => inputRef.current
   );
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     if (!inputRef.current) return;
     inputRef.current.indeterminate = Boolean(indeterminate);
   }, [indeterminate]);
@@ -701,26 +704,57 @@ var Checkbox = ({
     className
   );
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
-    /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: inputRef,
-        type: "checkbox",
-        className: "checkbox_input",
-        ...props
-      }
-    ),
+    /* @__PURE__ */ jsx("input", { ref: inputRef, type: "checkbox", className: "checkbox_input", ...props }),
     /* @__PURE__ */ jsx("span", { className: "checkbox_state_layer", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "checkbox_icon" }) }),
     label ? /* @__PURE__ */ jsx("span", { className: "checkbox_label", children: label }) : null
   ] });
 };
 Checkbox.displayName = "Checkbox";
-var CheckIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "4 10 8 14 16 6" }) });
-var CloseIcon = () => /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: [
-  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "14", y2: "14" }),
-  /* @__PURE__ */ jsx("line", { x1: "14", y1: "6", x2: "6", y2: "14" })
-] });
-var ChevronDownIcon = () => /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("polyline", { points: "5 8 10 13 15 8" }) });
+var CheckIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx("polyline", { points: "4 10 8 14 16 6" })
+  }
+);
+var CloseIcon = () => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: [
+      /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "14", y2: "14" }),
+      /* @__PURE__ */ jsx("line", { x1: "14", y1: "6", x2: "6", y2: "14" })
+    ]
+  }
+);
+var ChevronDownIcon = () => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    viewBox: "0 0 20 20",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    children: /* @__PURE__ */ jsx("polyline", { points: "5 8 10 13 15 8" })
+  }
+);
 var Chip = ({
   type = "basic",
   label,
@@ -818,22 +852,22 @@ var Dropdown = ({
   fullWidth,
   className
 }) => {
-  const internalId = React5.useId();
+  const internalId = React4.useId();
   const dropdownId = id ?? internalId;
   const isControlled = value !== void 0;
-  const [internalValue, setInternalValue] = React5.useState(defaultValue);
+  const [internalValue, setInternalValue] = React4.useState(defaultValue);
   const currentValue = isControlled ? value ?? null : internalValue;
-  const [isOpen, setIsOpen] = React5.useState(false);
-  const [activeIndex, setActiveIndex] = React5.useState(-1);
-  const [dropUp, setDropUp] = React5.useState(false);
-  const wrapperRef = React5.useRef(null);
-  const controlRef = React5.useRef(null);
-  const currentOption = React5.useMemo(
+  const [isOpen, setIsOpen] = React4.useState(false);
+  const [activeIndex, setActiveIndex] = React4.useState(-1);
+  const [dropUp, setDropUp] = React4.useState(false);
+  const wrapperRef = React4.useRef(null);
+  const controlRef = React4.useRef(null);
+  const currentOption = React4.useMemo(
     () => options.find((o) => o.value === currentValue) ?? null,
     [options, currentValue]
   );
   const isLabelVisible = isOpen || !!currentOption;
-  const setValue = React5.useCallback(
+  const setValue = React4.useCallback(
     (next) => {
       const option = options.find((o) => o.value === next) ?? null;
       if (!isControlled) setInternalValue(next);
@@ -841,7 +875,7 @@ var Dropdown = ({
     },
     [isControlled, onChange, options]
   );
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     const handleOutsideClick = (e) => {
       if (!wrapperRef.current?.contains(e.target)) {
         setIsOpen(false);
@@ -912,14 +946,17 @@ var Dropdown = ({
         break;
     }
   };
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     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))
+      idx >= 0 ? idx : Math.max(
+        0,
+        options.findIndex((o) => !o.disabled)
+      )
     );
   }, [isOpen, options, currentValue]);
-  React5.useLayoutEffect(() => {
+  React4.useLayoutEffect(() => {
     if (!isOpen || !controlRef.current) return;
     const rect = controlRef.current.getBoundingClientRect();
     const listHeight = Math.min(options.length * 56, 288);
@@ -938,14 +975,7 @@ var Dropdown = ({
       style: fullWidth ? { width: "100%" } : void 0,
       children: [
         /* @__PURE__ */ jsxs("div", { className: fieldsetClassName, children: [
-          label && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: cn("dropdown_label", { is_visible: isLabelVisible }),
-              "aria-hidden": "true",
-              children: label
-            }
-          ),
+          label && /* @__PURE__ */ jsx("span", { className: cn("dropdown_label", { is_visible: isLabelVisible }), "aria-hidden": "true", children: label }),
           /* @__PURE__ */ jsxs(
             "button",
             {
@@ -967,49 +997,41 @@ var Dropdown = ({
             }
           )
         ] }),
-        isOpen && /* @__PURE__ */ jsx(
-          "div",
-          {
-            id: `${dropdownId}_listbox`,
-            role: "listbox",
-            className: listClassName,
-            children: options.map((opt, i) => {
-              const selected = currentValue === opt.value;
-              const active = i === activeIndex;
-              return /* @__PURE__ */ jsxs(React5.Fragment, { children: [
-                /* @__PURE__ */ jsxs(
-                  "div",
-                  {
-                    role: "option",
-                    tabIndex: -1,
-                    "aria-selected": selected,
-                    "aria-disabled": opt.disabled ? true : void 0,
-                    className: cn("dropdown_option", {
-                      is_selected: selected,
-                      is_active: active,
-                      is_disabled: opt.disabled
-                    }),
-                    onMouseEnter: () => !opt.disabled && setActiveIndex(i),
-                    onClick: () => {
-                      if (opt.disabled) return;
-                      setValue(opt.value);
-                      setIsOpen(false);
-                    },
-                    children: [
-                      opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
-                      /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
-                        /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
-                        opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
-                      ] }),
-                      (selected || opt.trailingIcon) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" }) })
-                    ]
-                  }
-                ),
-                opt.showDivider && /* @__PURE__ */ jsx("div", { className: "dropdown_option_divider", role: "separator" })
-              ] }, opt.value);
-            })
-          }
-        )
+        isOpen && /* @__PURE__ */ jsx("div", { id: `${dropdownId}_listbox`, role: "listbox", className: listClassName, children: options.map((opt, i) => {
+          const selected = currentValue === opt.value;
+          const active = i === activeIndex;
+          return /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+            /* @__PURE__ */ jsxs(
+              "div",
+              {
+                role: "option",
+                tabIndex: -1,
+                "aria-selected": selected,
+                "aria-disabled": opt.disabled ? true : void 0,
+                className: cn("dropdown_option", {
+                  is_selected: selected,
+                  is_active: active,
+                  is_disabled: opt.disabled
+                }),
+                onMouseEnter: () => !opt.disabled && setActiveIndex(i),
+                onClick: () => {
+                  if (opt.disabled) return;
+                  setValue(opt.value);
+                  setIsOpen(false);
+                },
+                children: [
+                  opt.leadingIcon && /* @__PURE__ */ jsx("span", { className: "dropdown_option_icon", children: opt.leadingIcon }),
+                  /* @__PURE__ */ jsxs("span", { className: "dropdown_option_content", children: [
+                    /* @__PURE__ */ jsx("span", { className: "dropdown_option_label", children: opt.label }),
+                    opt.supportingText && /* @__PURE__ */ jsx("span", { className: "dropdown_option_supporting", children: opt.supportingText })
+                  ] }),
+                  (selected || opt.trailingIcon) && /* @__PURE__ */ jsx("span", { className: "dropdown_option_trailing", children: opt.trailingIcon ?? /* @__PURE__ */ jsx(Check, { size: 16, "aria-hidden": "true" }) })
+                ]
+              }
+            ),
+            opt.showDivider && /* @__PURE__ */ jsx("hr", { className: "dropdown_option_divider" })
+          ] }, opt.value);
+        }) })
       ]
     }
   );
@@ -1036,9 +1058,9 @@ var DatePicker = ({
   minDateSrFormat = "Minimum date: {date}",
   selectableRangeUntilTodaySrText = "Selectable up to today"
 }) => {
-  const groupId = React5.useId();
-  const constraintId = React5.useId();
-  const { todayYear, todayMonth, todayDay } = React5.useMemo(() => {
+  const groupId = React4.useId();
+  const constraintId = React4.useId();
+  const { todayYear, todayMonth, todayDay } = React4.useMemo(() => {
     const now = /* @__PURE__ */ new Date();
     return {
       todayYear: now.getFullYear(),
@@ -1047,7 +1069,7 @@ var DatePicker = ({
     };
   }, []);
   const endYear = endYearProp ?? todayYear + 10;
-  const parsed = React5.useMemo(() => {
+  const parsed = React4.useMemo(() => {
     if (!value) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = value.split("-").map(Number);
     return {
@@ -1056,7 +1078,7 @@ var DatePicker = ({
       day: d || 0
     };
   }, [value]);
-  const min = React5.useMemo(() => {
+  const min = React4.useMemo(() => {
     if (!minDate) return { year: 0, month: 0, day: 0 };
     const [y, m, d] = minDate.split("-").map(Number);
     return {
@@ -1069,11 +1091,14 @@ var DatePicker = ({
   const maxYear = selectableRange === "until-today" ? todayYear : endYear;
   const minMonth = min.year > 0 && year === min.year ? Math.min(12, Math.max(1, min.month)) : 1;
   const maxMonth = selectableRange === "until-today" && year === todayYear ? todayMonth : 12;
-  const minDay = Math.min(31, Math.max(
-    1,
-    min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
-  ));
-  const maxDay = React5.useMemo(() => {
+  const minDay = Math.min(
+    31,
+    Math.max(
+      1,
+      min.year > 0 && min.month > 0 && year === min.year && month === min.month ? min.day : 1
+    )
+  );
+  const maxDay = React4.useMemo(() => {
     if (!year || !month) return 31;
     const daysInMonth = getDaysInMonth(year, month);
     if (selectableRange === "until-today" && year === todayYear && month === todayMonth) {
@@ -1081,28 +1106,28 @@ var DatePicker = ({
     }
     return daysInMonth;
   }, [year, month, selectableRange, todayYear, todayMonth, todayDay]);
-  const yearOptions = React5.useMemo(
+  const yearOptions = React4.useMemo(
     () => range(startYear, maxYear).map((y) => ({
       value: String(y),
       label: String(y)
     })),
     [startYear, maxYear]
   );
-  const monthOptions = React5.useMemo(
+  const monthOptions = React4.useMemo(
     () => range(minMonth, Math.max(minMonth, maxMonth)).map((m) => ({
       value: String(m),
       label: pad(m)
     })),
     [minMonth, maxMonth]
   );
-  const dayOptions = React5.useMemo(
+  const dayOptions = React4.useMemo(
     () => range(minDay, Math.max(minDay, maxDay)).map((d) => ({
       value: String(d),
       label: pad(d)
     })),
     [minDay, maxDay]
   );
-  const emit = React5.useCallback(
+  const emit = React4.useCallback(
     (yy, mm, dd) => {
       if (mode === "year-month") {
         onChange(`${yy}-${pad(mm)}`);
@@ -1113,7 +1138,7 @@ var DatePicker = ({
     },
     [mode, onChange]
   );
-  const handleYearChange = React5.useCallback(
+  const handleYearChange = React4.useCallback(
     (raw) => {
       if (!raw) return;
       const newYear = Number(raw);
@@ -1130,14 +1155,14 @@ var DatePicker = ({
     },
     [month, day, min.year, min.month, selectableRange, todayYear, todayMonth, emit]
   );
-  const handleMonthChange = React5.useCallback(
+  const handleMonthChange = React4.useCallback(
     (raw) => {
       if (!raw || !year) return;
       emit(year, Number(raw), day || void 0);
     },
     [year, day, emit]
   );
-  const handleDayChange = React5.useCallback(
+  const handleDayChange = React4.useCallback(
     (raw) => {
       if (!raw || !year || !month) return;
       emit(year, month, Number(raw));
@@ -1151,8 +1176,7 @@ var DatePicker = ({
   });
   const constraintParts = [];
   if (minDate) constraintParts.push(minDateSrFormat.replace("{date}", minDate));
-  if (selectableRange === "until-today")
-    constraintParts.push(selectableRangeUntilTodaySrText);
+  if (selectableRange === "until-today") constraintParts.push(selectableRangeUntilTodaySrText);
   const constraintDesc = constraintParts.join(". ");
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, style: containerStyle, children: [
     label && /* @__PURE__ */ jsx("span", { className: "date_picker_label", id: groupId, children: label }),
@@ -1209,29 +1233,12 @@ var DatePicker = ({
     )
   ] });
 };
-var Divider = ({
-  weight = "standard",
-  className,
-  ...props
-}) => {
-  const dividerClassName = cn(
-    "divider",
-    `divider_weight_${weight}`,
-    className
-  );
+var Divider = ({ weight = "standard", className, ...props }) => {
+  const dividerClassName = cn("divider", `divider_weight_${weight}`, className);
   return /* @__PURE__ */ jsx("hr", { className: dividerClassName, ...props });
 };
-var FAB = ({
-  variant = "primary",
-  icon,
-  className,
-  ...props
-}) => {
-  const fabClassName = cn(
-    "fab",
-    `fab_variant_${variant}`,
-    className
-  );
+var FAB = ({ variant = "primary", icon, className, ...props }) => {
+  const fabClassName = cn("fab", `fab_variant_${variant}`, className);
   return /* @__PURE__ */ jsx("button", { className: fabClassName, ...props, children: /* @__PURE__ */ jsx("span", { className: "fab_icon", "aria-hidden": "true", children: icon }) });
 };
 var FileInput = ({
@@ -1243,14 +1250,16 @@ var FileInput = ({
   disabled,
   ...props
 }) => {
-  const inputId = React5.useId();
-  const helperId = React5.useId();
-  const [previewUrls, setPreviewUrls] = React5.useState([]);
+  const inputId = React4.useId();
+  const helperId = React4.useId();
+  const [previewUrls, setPreviewUrls] = React4.useState([]);
   const handleChange = (e) => {
     const files = e.currentTarget.files;
     onFiles?.(files);
     if (preview && files) {
-      previewUrls.forEach((url) => URL.revokeObjectURL(url));
+      for (const url of previewUrls) {
+        URL.revokeObjectURL(url);
+      }
       const urls = [];
       for (let i = 0; i < files.length; i++) {
         if (files[i].type.startsWith("image/")) {
@@ -1259,13 +1268,17 @@ var FileInput = ({
       }
       setPreviewUrls(urls);
     } else {
-      previewUrls.forEach((url) => URL.revokeObjectURL(url));
+      for (const url of previewUrls) {
+        URL.revokeObjectURL(url);
+      }
       setPreviewUrls([]);
     }
   };
-  React5.useEffect(() => {
+  React4.useEffect(() => {
     return () => {
-      previewUrls.forEach((url) => URL.revokeObjectURL(url));
+      for (const url of previewUrls) {
+        URL.revokeObjectURL(url);
+      }
     };
   }, [previewUrls]);
   const rootClassName = cn("file_input", disabled && "file_input_disabled", className);
@@ -1284,7 +1297,10 @@ var FileInput = ({
     ),
     /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: "file_input_label", children: label }),
     supportingText && /* @__PURE__ */ jsx("span", { id: helperId, className: "file_input_helper", children: supportingText }),
-    previewUrls.length > 0 && /* @__PURE__ */ jsx("div", { className: "file_input_preview", children: previewUrls.map((url) => /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "file_input_preview_img" }, url)) })
+    previewUrls.length > 0 && /* @__PURE__ */ jsx("div", { className: "file_input_preview", children: previewUrls.map((url) => (
+      // biome-ignore lint/performance/noImgElement: framework-agnostic DS — host app should swap with next/image if needed
+      /* @__PURE__ */ jsx("img", { src: url, alt: "", className: "file_input_preview_img" }, url)
+    )) })
   ] });
 };
 
@@ -1923,13 +1939,7 @@ var LinearProgress = ({
       "aria-valuemin": 0,
       "aria-valuemax": totalSteps,
       ...props,
-      children: /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: "linear_progress_indicator",
-          style: { width: `${percent}%` }
-        }
-      )
+      children: /* @__PURE__ */ jsx("div", { className: "linear_progress_indicator", style: { width: `${percent}%` } })
     }
   );
 };
@@ -1953,32 +1963,114 @@ var ListItem = ({
     onClick && "list_item_interactive",
     className
   );
+  return (
+    // biome-ignore lint/a11y/noStaticElementInteractions: optional interactive list item — role=button + tabIndex set conditionally based on onClick
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: rootClassName,
+        onClick: disabled ? void 0 : onClick,
+        onKeyDown: (e) => {
+          if (disabled || !onClick) return;
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onClick(e);
+          }
+        },
+        role: onClick ? "button" : void 0,
+        tabIndex: onClick && !disabled ? 0 : void 0,
+        "aria-disabled": disabled || void 0,
+        ...props,
+        children: /* @__PURE__ */ jsxs("div", { className: "list_item_state_layer", children: [
+          leadingElement && /* @__PURE__ */ jsx("div", { className: "list_item_leading", children: leadingElement }),
+          /* @__PURE__ */ jsxs("div", { className: "list_item_content", children: [
+            overline && /* @__PURE__ */ jsx("span", { className: "list_item_overline", children: overline }),
+            /* @__PURE__ */ jsx("span", { className: "list_item_label", children: label }),
+            supportingText && /* @__PURE__ */ jsx("span", { className: "list_item_supporting", children: supportingText }),
+            metadata && /* @__PURE__ */ jsx("span", { className: "list_item_metadata", children: metadata })
+          ] }),
+          trailingElement && /* @__PURE__ */ jsx("div", { className: "list_item_trailing", children: trailingElement })
+        ] })
+      }
+    )
+  );
+};
+var Modal = ({
+  open,
+  onClose,
+  closeOnOverlay = true,
+  width = 520,
+  title,
+  children,
+  className,
+  ariaLabel,
+  ...props
+}) => {
+  const panelRef = React4.useRef(null);
+  const titleId = React4.useId();
+  useFocusTrap(panelRef, open);
+  const handleEscape = React4.useEffectEvent((e) => {
+    if (e.key === "Escape") onClose?.();
+  });
+  React4.useEffect(() => {
+    if (!open) return;
+    document.addEventListener("keydown", handleEscape);
+    return () => document.removeEventListener("keydown", handleEscape);
+  }, [open]);
+  React4.useEffect(() => {
+    if (!open) return;
+    const body = document.body;
+    const openModals = parseInt(body.dataset.openModals || "0", 10);
+    if (openModals === 0) {
+      body.dataset.originalOverflow = window.getComputedStyle(body).overflow;
+      body.style.overflow = "hidden";
+    }
+    body.dataset.openModals = String(openModals + 1);
+    return () => {
+      const currentOpenModals = parseInt(body.dataset.openModals || "1", 10);
+      const nextOpenModals = currentOpenModals - 1;
+      if (nextOpenModals === 0) {
+        body.style.overflow = body.dataset.originalOverflow || "";
+        delete body.dataset.openModals;
+        delete body.dataset.originalOverflow;
+      } else {
+        body.dataset.openModals = String(nextOpenModals);
+      }
+    };
+  }, [open]);
+  if (!open) return null;
+  const panelClassName = cn("modal_panel", className);
+  const hasTitle = !!title;
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: rootClassName,
-      onClick: disabled ? void 0 : onClick,
+      className: "modal",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
+      "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
+      onClick: () => closeOnOverlay && onClose?.(),
       onKeyDown: (e) => {
-        if (disabled || !onClick) return;
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          onClick(e);
-        }
+        if (e.key === "Escape") onClose?.();
       },
-      role: onClick ? "button" : void 0,
-      tabIndex: onClick && !disabled ? 0 : void 0,
-      "aria-disabled": disabled || void 0,
-      ...props,
-      children: /* @__PURE__ */ jsxs("div", { className: "list_item_state_layer", children: [
-        leadingElement && /* @__PURE__ */ jsx("div", { className: "list_item_leading", children: leadingElement }),
-        /* @__PURE__ */ jsxs("div", { className: "list_item_content", children: [
-          overline && /* @__PURE__ */ jsx("span", { className: "list_item_overline", children: overline }),
-          /* @__PURE__ */ jsx("span", { className: "list_item_label", children: label }),
-          supportingText && /* @__PURE__ */ jsx("span", { className: "list_item_supporting", children: supportingText }),
-          metadata && /* @__PURE__ */ jsx("span", { className: "list_item_metadata", children: metadata })
-        ] }),
-        trailingElement && /* @__PURE__ */ jsx("div", { className: "list_item_trailing", children: trailingElement })
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: panelRef,
+          className: panelClassName,
+          style: { width },
+          role: "document",
+          onClick: (e) => e.stopPropagation(),
+          onKeyDown: (e) => {
+            if (e.key !== "Escape") e.stopPropagation();
+          },
+          ...props,
+          children: [
+            title && /* @__PURE__ */ jsx("div", { id: titleId, className: "modal_header", children: title }),
+            /* @__PURE__ */ jsx("div", { className: "modal_body", children })
+          ]
+        }
+      )
     }
   );
 };
@@ -1993,8 +2085,11 @@ var OtpInput = ({
   ariaLabel = "OTP \uC785\uB825",
   className
 }) => {
-  const inputsRef = React5.useRef([]);
-  const digits = React5.useMemo(() => {
+  const inputsRef = React4.useRef([]);
+  React4.useEffect(() => {
+    if (autoFocus) inputsRef.current[0]?.focus();
+  }, [autoFocus]);
+  const digits = React4.useMemo(() => {
     const arr = value.split("").slice(0, length);
     while (arr.length < length) arr.push("");
     return arr;
@@ -2016,7 +2111,7 @@ var OtpInput = ({
     }
   };
   const handleFocus = (index) => {
-    const firstEmpty = digits.findIndex((d) => d === "");
+    const firstEmpty = digits.indexOf("");
     if (firstEmpty !== -1 && firstEmpty < index) {
       focusInput(firstEmpty);
     }
@@ -2057,116 +2152,39 @@ var OtpInput = ({
     focusInput(nextIndex);
   };
   const rootClassName = cn("otp_input", className);
-  return /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
-    /* @__PURE__ */ jsx("div", { className: "otp_input_boxes", children: digits.map((digit, i) => /* @__PURE__ */ jsx(
-      "input",
-      {
-        ref: (el) => {
-          inputsRef.current[i] = el;
-        },
-        type: "text",
-        inputMode: "numeric",
-        pattern: "\\d*",
-        maxLength: 1,
-        value: digit,
-        onChange: (e) => handleChange(i, e),
-        onFocus: () => handleFocus(i),
-        onKeyDown: (e) => handleKeyDown(i, e),
-        onPaste: handlePaste,
-        disabled,
-        autoFocus: autoFocus && i === 0,
-        "aria-label": `${i + 1}\uBC88\uC9F8 \uC790\uB9AC`,
-        className: cn(
-          "otp_input_box",
-          error && "otp_input_box_error",
-          disabled && "otp_input_box_disabled"
-        )
-      },
-      i
-    )) }),
-    supportingText && /* @__PURE__ */ jsx("span", { className: cn("otp_input_supporting", error && "otp_input_supporting_error"), children: supportingText })
-  ] });
-};
-OtpInput.displayName = "OtpInput";
-var Modal = ({
-  open,
-  onClose,
-  closeOnOverlay = true,
-  width = 520,
-  title,
-  children,
-  className,
-  ariaLabel,
-  ...props
-}) => {
-  const panelRef = React5.useRef(null);
-  const titleId = React5.useId();
-  useFocusTrap(panelRef, open);
-  const handleEscape = React5.useEffectEvent((e) => {
-    if (e.key === "Escape") onClose?.();
-  });
-  React5.useEffect(() => {
-    if (!open) return;
-    document.addEventListener("keydown", handleEscape);
-    return () => document.removeEventListener("keydown", handleEscape);
-  }, [open]);
-  React5.useEffect(() => {
-    if (!open) return;
-    const body = document.body;
-    const openModals = parseInt(body.dataset.openModals || "0", 10);
-    if (openModals === 0) {
-      body.dataset.originalOverflow = window.getComputedStyle(body).overflow;
-      body.style.overflow = "hidden";
-    }
-    body.dataset.openModals = String(openModals + 1);
-    return () => {
-      const currentOpenModals = parseInt(body.dataset.openModals || "1", 10);
-      const nextOpenModals = currentOpenModals - 1;
-      if (nextOpenModals === 0) {
-        body.style.overflow = body.dataset.originalOverflow || "";
-        delete body.dataset.openModals;
-        delete body.dataset.originalOverflow;
-      } else {
-        body.dataset.openModals = String(nextOpenModals);
-      }
-    };
-  }, [open]);
-  if (!open) return null;
-  const panelClassName = cn("modal_panel", className);
-  const hasTitle = !!title;
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: "modal",
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": hasTitle && !ariaLabel ? titleId : void 0,
-      "aria-label": !hasTitle ? ariaLabel ?? "Dialog" : ariaLabel,
-      onClick: () => closeOnOverlay && onClose?.(),
-      onKeyDown: (e) => {
-        if (e.key === "Escape") onClose?.();
-      },
-      children: /* @__PURE__ */ jsxs(
-        "div",
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: <fieldset> would force border/legend styles; role=group is the WAI-ARIA equivalent for OTP grouping
+    /* @__PURE__ */ jsxs("div", { className: rootClassName, role: "group", "aria-label": ariaLabel, children: [
+      /* @__PURE__ */ jsx("div", { className: "otp_input_boxes", children: digits.map((digit, i) => /* @__PURE__ */ jsx(
+        "input",
         {
-          ref: panelRef,
-          className: panelClassName,
-          style: { width },
-          role: "document",
-          onClick: (e) => e.stopPropagation(),
-          onKeyDown: (e) => {
-            if (e.key !== "Escape") e.stopPropagation();
+          ref: (el) => {
+            inputsRef.current[i] = el;
           },
-          ...props,
-          children: [
-            title && /* @__PURE__ */ jsx("div", { id: titleId, className: "modal_header", children: title }),
-            /* @__PURE__ */ jsx("div", { className: "modal_body", children })
-          ]
-        }
-      )
-    }
+          type: "text",
+          inputMode: "numeric",
+          pattern: "\\d*",
+          maxLength: 1,
+          value: digit,
+          onChange: (e) => handleChange(i, e),
+          onFocus: () => handleFocus(i),
+          onKeyDown: (e) => handleKeyDown(i, e),
+          onPaste: handlePaste,
+          disabled,
+          "aria-label": `${i + 1}\uBC88\uC9F8 \uC790\uB9AC`,
+          className: cn(
+            "otp_input_box",
+            error && "otp_input_box_error",
+            disabled && "otp_input_box_disabled"
+          )
+        },
+        i
+      )) }),
+      supportingText && /* @__PURE__ */ jsx("span", { className: cn("otp_input_supporting", error && "otp_input_supporting_error"), children: supportingText })
+    ] })
   );
 };
+OtpInput.displayName = "OtpInput";
 var range2 = (start, end) => {
   const out = [];
   for (let i = start; i <= end; i += 1) out.push(i);
@@ -2205,7 +2223,7 @@ var Pagination = ({
 }) => {
   const prevDisabled = page <= 1;
   const nextDisabled = page >= totalPages;
-  const items = React5.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
+  const items = React4.useMemo(() => getPaginationItems(page, totalPages), [page, totalPages]);
   return /* @__PURE__ */ jsxs("nav", { className: "pagination", "aria-label": "Pagination", children: [
     /* @__PURE__ */ jsx(
       "button",
@@ -2220,7 +2238,9 @@ var Pagination = ({
     ),
     /* @__PURE__ */ jsx("ul", { className: "pagination_pages", children: items.map((it, idx) => {
       if (it === "ellipsis") {
-        return /* @__PURE__ */ jsx("li", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${idx}`);
+        const prev = items[idx - 1];
+        const next = items[idx + 1];
+        return /* @__PURE__ */ jsx("li", { className: "pagination_ellipsis", "aria-hidden": "true", children: "\u2026" }, `e-${prev}-${next}`);
       }
       const isActive = it === page;
       const buttonClassName = cn("pagination_page_button", { pagination_active: isActive });
@@ -2249,7 +2269,12 @@ var Pagination = ({
   ] });
 };
 var Radio = ({ label, size = "md", className, ref, ...props }) => {
-  const rootClassName = cn("radio", `radio_size_${size}`, props.disabled && "radio_disabled", className);
+  const rootClassName = cn(
+    "radio",
+    `radio_size_${size}`,
+    props.disabled && "radio_disabled",
+    className
+  );
   return /* @__PURE__ */ jsxs("label", { className: rootClassName, children: [
     /* @__PURE__ */ jsx("input", { ref, type: "radio", className: "radio_input", ...props }),
     /* @__PURE__ */ jsx("span", { className: "radio_state_layer", "aria-hidden": "true", children: /* @__PURE__ */ jsx("span", { className: "radio_dot" }) }),
@@ -2268,49 +2293,6 @@ var Spinner = ({ size = 24, ariaLabel = "Loading" }) => {
     }
   );
 };
-var Toggle = ({
-  checked,
-  defaultChecked,
-  onChange,
-  size = "sm",
-  disabled,
-  className,
-  ariaLabel,
-  ref,
-  ...props
-}) => {
-  const isControlled = checked !== void 0;
-  const [innerChecked, setInnerChecked] = React5.useState(!!defaultChecked);
-  const isOn = isControlled ? !!checked : innerChecked;
-  const handleToggle = () => {
-    if (disabled) return;
-    const next = !isOn;
-    if (!isControlled) setInnerChecked(next);
-    onChange?.(next);
-  };
-  const rootClassName = cn(
-    "toggle",
-    `toggle_size_${size}`,
-    { toggle_on: isOn, toggle_disabled: disabled },
-    className
-  );
-  return /* @__PURE__ */ jsx(
-    "button",
-    {
-      ref,
-      type: "button",
-      role: "switch",
-      "aria-checked": isOn,
-      "aria-label": ariaLabel,
-      disabled,
-      onClick: handleToggle,
-      className: rootClassName,
-      ...props,
-      children: /* @__PURE__ */ jsx("span", { className: "toggle_thumb" })
-    }
-  );
-};
-Toggle.displayName = "Toggle";
 var ClearIcon = () => /* @__PURE__ */ jsx(Icon, { name: "close", size: 20 });
 var TextField = ({
   id,
@@ -2331,21 +2313,21 @@ var TextField = ({
   ref,
   ...props
 }) => {
-  const generatedId = React5.useId();
+  const generatedId = React4.useId();
   const inputId = id ?? generatedId;
   const helperId = supportingText ? `${inputId}-help` : void 0;
   const isControlled = value !== void 0;
   const applyTransform = (nextValue) => transformValue ? transformValue(nextValue) : nextValue;
-  const [innerValue, setInnerValue] = React5.useState(
+  const [innerValue, setInnerValue] = React4.useState(
     () => applyTransform(value ?? defaultValue ?? "")
   );
-  const isComposingRef = React5.useRef(false);
-  React5.useEffect(() => {
+  const isComposingRef = React4.useRef(false);
+  React4.useEffect(() => {
     if (!isControlled) return;
     const nextValue = value ?? "";
     setInnerValue(transformValue ? transformValue(nextValue) : nextValue);
   }, [isControlled, value, transformValue]);
-  const handleClear = React5.useCallback(() => {
+  const handleClear = React4.useCallback(() => {
     setInnerValue("");
     onChangeAction?.("");
   }, [onChangeAction]);
@@ -2357,54 +2339,54 @@ var TextField = ({
     props.disabled && "text_field_disabled",
     className
   );
-  const resolvedTrailing = clearable && innerValue ? /* @__PURE__ */ jsx(
-    "button",
-    {
-      type: "button",
-      className: "text_field_clear",
-      onClick: handleClear,
-      "aria-label": "Clear",
-      children: /* @__PURE__ */ jsx(ClearIcon, {})
-    }
-  ) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
+  const resolvedTrailing = clearable && innerValue ? /* @__PURE__ */ jsx("button", { type: "button", className: "text_field_clear", onClick: handleClear, "aria-label": "Clear", children: /* @__PURE__ */ jsx(ClearIcon, {}) }) : trailingIcon ? /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: trailingIcon }) : null;
   return /* @__PURE__ */ jsxs("div", { className: rootClassName, children: [
     /* @__PURE__ */ jsxs("fieldset", { className: "text_field_container", children: [
       label && showLabel && /* @__PURE__ */ jsx("legend", { className: "text_field_label", children: /* @__PURE__ */ jsx("label", { htmlFor: inputId, children: label }) }),
       /* @__PURE__ */ jsxs("div", { className: "text_field_inner", children: [
         leadingIcon && /* @__PURE__ */ jsx("span", { className: "text_field_icon", "aria-hidden": "true", children: leadingIcon }),
-        /* @__PURE__ */ jsx("div", { className: cn("text_field_input_wrap", resolvedTrailing && "text_field_input_wrap_no_pad_right"), children: /* @__PURE__ */ jsx(
-          "input",
+        /* @__PURE__ */ jsx(
+          "div",
           {
-            id: inputId,
-            ref,
-            className: "text_field_input",
-            "aria-invalid": !!error,
-            "aria-describedby": helperId,
-            "aria-label": !showLabel ? label : void 0,
-            ...props,
-            value: innerValue,
-            onCompositionStart: () => {
-              isComposingRef.current = true;
-            },
-            onCompositionEnd: (event) => {
-              isComposingRef.current = false;
-              const rawValue = event.currentTarget.value;
-              const nextValue = applyTransform(rawValue);
-              setInnerValue(nextValue);
-              onChangeAction?.(nextValue);
-            },
-            onChange: (event) => {
-              const rawValue = event.target.value;
-              if (isComposingRef.current) {
-                setInnerValue(rawValue);
-                return;
+            className: cn(
+              "text_field_input_wrap",
+              resolvedTrailing && "text_field_input_wrap_no_pad_right"
+            ),
+            children: /* @__PURE__ */ jsx(
+              "input",
+              {
+                id: inputId,
+                ref,
+                className: "text_field_input",
+                "aria-invalid": !!error,
+                "aria-describedby": helperId,
+                "aria-label": !showLabel ? label : void 0,
+                ...props,
+                value: innerValue,
+                onCompositionStart: () => {
+                  isComposingRef.current = true;
+                },
+                onCompositionEnd: (event) => {
+                  isComposingRef.current = false;
+                  const rawValue = event.currentTarget.value;
+                  const nextValue = applyTransform(rawValue);
+                  setInnerValue(nextValue);
+                  onChangeAction?.(nextValue);
+                },
+                onChange: (event) => {
+                  const rawValue = event.target.value;
+                  if (isComposingRef.current) {
+                    setInnerValue(rawValue);
+                    return;
+                  }
+                  const nextValue = applyTransform(rawValue);
+                  setInnerValue(nextValue);
+                  onChangeAction?.(nextValue);
+                }
               }
-              const nextValue = applyTransform(rawValue);
-              setInnerValue(nextValue);
-              onChangeAction?.(nextValue);
-            }
+            )
           }
-        ) }),
+        ),
         resolvedTrailing
       ] })
     ] }),
@@ -2412,7 +2394,7 @@ var TextField = ({
   ] });
 };
 TextField.displayName = "TextField";
-var ToastContext = React5.createContext(null);
+var ToastContext = React4.createContext(null);
 var VARIANT_ICONS = {
   success: /* @__PURE__ */ jsx(CheckCircle2, { size: 18 }),
   error: /* @__PURE__ */ jsx(XCircle, { size: 18 }),
@@ -2421,9 +2403,9 @@ var VARIANT_ICONS = {
   default: /* @__PURE__ */ jsx(Bell, { size: 18 })
 };
 var ToastItemComponent = ({ item, onRemove, closeAriaLabel }) => {
-  const [exiting, setExiting] = React5.useState(false);
-  const closingRef = React5.useRef(false);
-  const close = React5.useCallback(() => {
+  const [exiting, setExiting] = React4.useState(false);
+  const closingRef = React4.useRef(false);
+  const close = React4.useCallback(() => {
     if (closingRef.current) return;
     closingRef.current = true;
     setExiting(true);
@@ -2450,24 +2432,25 @@ var ToastProvider = ({
   maxCount = 5,
   closeAriaLabel = "Close"
 }) => {
-  const [toasts, setToasts] = React5.useState([]);
-  const [isMounted, setIsMounted] = React5.useState(false);
-  React5.useEffect(() => {
+  const [toasts, setToasts] = React4.useState([]);
+  const [isMounted, setIsMounted] = React4.useState(false);
+  React4.useEffect(() => {
     setIsMounted(true);
   }, []);
-  const addToast = React5.useCallback(
+  const addToast = React4.useCallback(
     (message, variant, duration = 3e3) => {
       const id = crypto.randomUUID();
       setToasts((prev) => [{ id, message, variant, duration }, ...prev].slice(0, maxCount));
     },
     [maxCount]
   );
-  const removeToast = React5.useCallback((id) => {
+  const removeToast = React4.useCallback((id) => {
     setToasts((prev) => prev.filter((t) => t.id !== id));
   }, []);
   return /* @__PURE__ */ jsxs(ToastContext.Provider, { value: { addToast }, children: [
     children,
     isMounted && createPortal(
+      // biome-ignore lint/a11y/useSemanticElements: <section> would create unwanted nesting in portal; role=region is the WAI-ARIA equivalent for live announcements
       /* @__PURE__ */ jsx(
         "div",
         {
@@ -2509,6 +2492,49 @@ var useToast = () => {
     message: (message, duration) => ctx.addToast(message, "default", duration)
   };
 };
+var Toggle = ({
+  checked,
+  defaultChecked,
+  onChange,
+  size = "sm",
+  disabled,
+  className,
+  ariaLabel,
+  ref,
+  ...props
+}) => {
+  const isControlled = checked !== void 0;
+  const [innerChecked, setInnerChecked] = React4.useState(!!defaultChecked);
+  const isOn = isControlled ? !!checked : innerChecked;
+  const handleToggle = () => {
+    if (disabled) return;
+    const next = !isOn;
+    if (!isControlled) setInnerChecked(next);
+    onChange?.(next);
+  };
+  const rootClassName = cn(
+    "toggle",
+    `toggle_size_${size}`,
+    { toggle_on: isOn, toggle_disabled: disabled },
+    className
+  );
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      role: "switch",
+      "aria-checked": isOn,
+      "aria-label": ariaLabel,
+      disabled,
+      onClick: handleToggle,
+      className: rootClassName,
+      ...props,
+      children: /* @__PURE__ */ jsx("span", { className: "toggle_thumb" })
+    }
+  );
+};
+Toggle.displayName = "Toggle";
 var TopLoading = ({
   progress,
   color,