smartsell-ui-kit 0.1.13 → 0.1.14

package/dist/index.js

@@ -2296,8 +2296,221 @@ function DatePicker({
   );
 }
 
+// src/components/Loading.tsx
+import { jsx as jsx8, jsxs as jsxs8 } from "react/jsx-runtime";
+var SIZE_BY_CONTROL_SIZE = {
+  sm: 28,
+  md: 40,
+  lg: 56
+};
+var BASE_DROP_MS = 1500;
+var BASE_WHEEL_MS = 900;
+var BASE_BOB_MS = 1500;
+var ITEM_DELAY_RATIOS = [0, 0.26, 0.52];
+var ITEM_FILL_OPACITIES = [1, 0.72, 0.88];
+var LOADING_KEYFRAMES = `
+@keyframes ss-loading-drop {
+  0% { transform: translateY(-18px) scale(0.55); opacity: 0; }
+  12% { opacity: 1; }
+  45% { transform: translateY(0) scale(1); opacity: 1; }
+  56% { transform: translateY(-2.5px) scale(1); opacity: 1; }
+  66% { transform: translateY(0) scale(1); opacity: 1; }
+  82%, 100% { transform: translateY(0) scale(0.72); opacity: 0; }
+}
+@keyframes ss-loading-bob {
+  0%, 50%, 100% { transform: translateY(0) rotate(0deg); }
+  25% { transform: translateY(-0.9px) rotate(-1.2deg); }
+  75% { transform: translateY(-0.5px) rotate(0.8deg); }
+}
+@keyframes ss-loading-wheel {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+@keyframes ss-loading-pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.45; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .ss-loading-cart,
+  .ss-loading-wheel,
+  .ss-loading-item {
+    animation: none !important;
+    opacity: 1 !important;
+    transform: none !important;
+  }
+  .ss-loading-svg {
+    animation: ss-loading-pulse 1600ms ease-in-out infinite;
+  }
+}
+`;
+var resolveSize = (size) => {
+  return typeof size === "number" ? size : SIZE_BY_CONTROL_SIZE[size];
+};
+var WHEELS = [
+  { cx: 18, cy: 32.6 },
+  { cx: 35, cy: 32.6 }
+];
+function Loading({
+  size = "md",
+  color,
+  label,
+  accessibleLabel = "Loading",
+  speed = 1,
+  className,
+  style,
+  ...rest
+}) {
+  useUiKitTheme();
+  const pixelSize = resolveSize(size);
+  const safeSpeed = Math.max(0.1, speed);
+  const dropDuration = BASE_DROP_MS / safeSpeed;
+  const strokeColor = color != null ? color : "var(--theme-primary)";
+  const itemAnimation = (index) => ({
+    transformBox: "fill-box",
+    transformOrigin: "center",
+    animation: `ss-loading-drop ${dropDuration}ms cubic-bezier(0.45, 0, 0.35, 1) infinite`,
+    animationDelay: `${ITEM_DELAY_RATIOS[index] * dropDuration}ms`
+  });
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      ...rest,
+      role: "status",
+      "aria-live": "polite",
+      "aria-busy": "true",
+      className: cx(UI_KIT_ROOT_CLASSNAME, "inline-flex flex-col items-center justify-center", className),
+      style: {
+        gap: Math.round(pixelSize * 0.2),
+        backgroundColor: "transparent",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxs8(
+          "svg",
+          {
+            className: "ss-loading-svg",
+            width: pixelSize,
+            height: pixelSize,
+            viewBox: "0 0 48 48",
+            fill: "none",
+            "aria-hidden": "true",
+            style: { color: strokeColor, overflow: "hidden" },
+            children: [
+              /* @__PURE__ */ jsx8("style", { children: LOADING_KEYFRAMES }),
+              /* @__PURE__ */ jsxs8(
+                "g",
+                {
+                  className: "ss-loading-cart",
+                  style: {
+                    transformBox: "view-box",
+                    transformOrigin: "26px 32px",
+                    animation: `ss-loading-bob ${BASE_BOB_MS / safeSpeed}ms ease-in-out infinite`
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx8(
+                      "rect",
+                      {
+                        className: "ss-loading-item",
+                        x: 15.5,
+                        y: 16.5,
+                        width: 7.5,
+                        height: 7,
+                        rx: 1.8,
+                        fill: "currentColor",
+                        fillOpacity: ITEM_FILL_OPACITIES[0],
+                        style: itemAnimation(0)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      "circle",
+                      {
+                        className: "ss-loading-item",
+                        cx: 27.5,
+                        cy: 20,
+                        r: 3.6,
+                        fill: "currentColor",
+                        fillOpacity: ITEM_FILL_OPACITIES[1],
+                        style: itemAnimation(1)
+                      }
+                    ),
+                    /* @__PURE__ */ jsx8(
+                      "rect",
+                      {
+                        className: "ss-loading-item",
+                        x: 32,
+                        y: 16.5,
+                        width: 6.6,
+                        height: 7,
+                        rx: 1.8,
+                        fill: "currentColor",
+                        fillOpacity: ITEM_FILL_OPACITIES[2],
+                        style: itemAnimation(2)
+                      }
+                    ),
+                    /* @__PURE__ */ jsxs8("g", { stroke: "currentColor", strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ jsx8("path", { d: "M3.5 7.5h4.6l1.6 5" }),
+                      /* @__PURE__ */ jsx8("path", { d: "M9.7 12.5H43l-4.4 13.5H14.1z" }),
+                      /* @__PURE__ */ jsx8("path", { d: "M18 26v3.4" }),
+                      /* @__PURE__ */ jsx8("path", { d: "M35 26v3.4" })
+                    ] }),
+                    WHEELS.map((wheel) => /* @__PURE__ */ jsxs8(
+                      "g",
+                      {
+                        className: "ss-loading-wheel",
+                        style: {
+                          transformBox: "view-box",
+                          transformOrigin: `${wheel.cx}px ${wheel.cy}px`,
+                          animation: `ss-loading-wheel ${BASE_WHEEL_MS / safeSpeed}ms linear infinite`
+                        },
+                        children: [
+                          /* @__PURE__ */ jsx8(
+                            "circle",
+                            {
+                              cx: wheel.cx,
+                              cy: wheel.cy,
+                              r: 3.2,
+                              stroke: "currentColor",
+                              strokeWidth: 2.2,
+                              fill: "none"
+                            }
+                          ),
+                          /* @__PURE__ */ jsx8(
+                            "path",
+                            {
+                              d: `M${wheel.cx} ${wheel.cy}V${wheel.cy - 3.2}`,
+                              stroke: "currentColor",
+                              strokeWidth: 2.2,
+                              strokeLinecap: "round"
+                            }
+                          )
+                        ]
+                      },
+                      wheel.cx
+                    ))
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        label ? /* @__PURE__ */ jsx8(
+          "span",
+          {
+            style: {
+              color: "var(--theme-textLight)",
+              fontSize: Math.max(12, Math.round(pixelSize * 0.3)),
+              lineHeight: 1.4
+            },
+            children: label
+          }
+        ) : /* @__PURE__ */ jsx8("span", { className: "ui-kit-sr-only", children: accessibleLabel })
+      ]
+    }
+  );
+}
+
 // src/components/Separator.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function Separator({
   orientation = "vertical",
   color,
@@ -2314,7 +2527,7 @@ function Separator({
     height: orientation === "vertical" ? usesVerticalStretch ? "auto" : size : 3,
     ...style
   };
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     "div",
     {
       ...rest,
@@ -2387,13 +2600,13 @@ function filterSelectGroups(groups, query) {
 }
 
 // src/componentsBase/select/SelectBase.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 var MENU_OFFSET = 8;
 var MENU_MAX_HEIGHT = 280;
 var emptySubscribe = () => () => {
 };
 function SearchIcon({ size }) {
-  return /* @__PURE__ */ jsx9("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ jsx10(
     "path",
     {
       d: "m21 21-4.35-4.35M10.5 18a7.5 7.5 0 1 1 0-15 7.5 7.5 0 0 1 0 15Z",
@@ -2774,7 +2987,7 @@ function SelectBase({
   const hasSomeVisibleSelected = visibleSelectedCount > 0 && visibleSelectedCount < visibleEnabledValues.length;
   const hasAllVisibleSelected = visibleEnabledValues.length > 0 && visibleSelectedCount === visibleEnabledValues.length;
   const canToggleVisibleSelection = !disabled && visibleEnabledValues.length > 0;
-  const bulkToggleControl = isMultiSelect ? /* @__PURE__ */ jsx9(
+  const bulkToggleControl = isMultiSelect ? /* @__PURE__ */ jsx10(
     "button",
     {
       type: "button",
@@ -2794,7 +3007,7 @@ function SelectBase({
         "m-0 inline-flex h-5 w-5 shrink-0 items-center justify-center border-0 bg-transparent p-0",
         canToggleVisibleSelection ? "cursor-pointer opacity-100" : "cursor-not-allowed opacity-45"
       ),
-      children: /* @__PURE__ */ jsx9(
+      children: /* @__PURE__ */ jsx10(
         CheckboxIndicator,
         {
           checked: hasAllVisibleSelected,
@@ -2951,7 +3164,7 @@ function SelectBase({
     }
   };
   const emptyState = isLoading ? loadingMessage : emptyMessage;
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     ControlFrame,
     {
       label,
@@ -2962,8 +3175,8 @@ function SelectBase({
       size,
       hasValue: hasSelection || isOpen,
       floatingPlaceholder,
-      children: /* @__PURE__ */ jsxs8("div", { ref: shellRef, className: "relative w-full", children: [
-        /* @__PURE__ */ jsxs8(
+      children: /* @__PURE__ */ jsxs9("div", { ref: shellRef, className: "relative w-full", children: [
+        /* @__PURE__ */ jsxs9(
           "button",
           {
             ...buttonPassthroughProps,
@@ -2992,12 +3205,12 @@ function SelectBase({
               ...isTriggerDisabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
             },
             children: [
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "span",
                 {
                   className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
                   style: controlTextNudgeStyle,
-                  children: hasSelection ? displayContent : /* @__PURE__ */ jsx9(
+                  children: hasSelection ? displayContent : /* @__PURE__ */ jsx10(
                     "span",
                     {
                       className: floatingPlaceholder ? "" : "text-[var(--theme-textLight)]",
@@ -3006,7 +3219,7 @@ function SelectBase({
                   )
                 }
               ),
-              /* @__PURE__ */ jsx9(
+              /* @__PURE__ */ jsx10(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -3019,7 +3232,7 @@ function SelectBase({
                     right: indicatorOffset,
                     transform: `translateY(-50%) rotate(${isOpen ? 180 : 0}deg)`
                   },
-                  children: /* @__PURE__ */ jsx9("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx9(
+                  children: /* @__PURE__ */ jsx10("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ jsx10(
                     "path",
                     {
                       d: "M5.75 7.75L10 12l4.25-4.25",
@@ -3034,7 +3247,7 @@ function SelectBase({
             ]
           }
         ),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "select",
           {
             ...rest,
@@ -3052,8 +3265,8 @@ function SelectBase({
           }
         ),
         isMounted && isOpen ? createPortal(
-          /* @__PURE__ */ jsxs8(Fragment3, { children: [
-            /* @__PURE__ */ jsx9("style", { children: `
+          /* @__PURE__ */ jsxs9(Fragment3, { children: [
+            /* @__PURE__ */ jsx10("style", { children: `
                 #${listboxId} {
                   scrollbar-width: thin;
                   scrollbar-color: ${scrollbarThumbColor} transparent;
@@ -3084,7 +3297,7 @@ function SelectBase({
                   opacity: 1;
                 }
               ` }),
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs9(
               "div",
               {
                 ref: menuRef,
@@ -3107,7 +3320,7 @@ function SelectBase({
                   visibility: isPlacementResolved ? "visible" : "hidden"
                 },
                 children: [
-                  hasFilter ? /* @__PURE__ */ jsxs8(
+                  hasFilter ? /* @__PURE__ */ jsxs9(
                     "div",
                     {
                       className: cx(
@@ -3115,20 +3328,20 @@ function SelectBase({
                       ),
                       children: [
                         bulkToggleControl,
-                        /* @__PURE__ */ jsx9(
+                        /* @__PURE__ */ jsx10(
                           "div",
                           {
                             className: "flex-1",
                             onClick: (event) => event.stopPropagation(),
                             onMouseDown: (event) => event.stopPropagation(),
                             onPointerDown: (event) => event.stopPropagation(),
-                            children: /* @__PURE__ */ jsx9(
+                            children: /* @__PURE__ */ jsx10(
                               Input,
                               {
                                 id: searchInputId,
                                 ref: searchInputRef,
                                 type: "text",
-                                icon: /* @__PURE__ */ jsx9(SearchIcon, { size: 16 }),
+                                icon: /* @__PURE__ */ jsx10(SearchIcon, { size: 16 }),
                                 disableFloatingLabel: true,
                                 value: currentSearchQuery,
                                 onChange: (event) => {
@@ -3148,7 +3361,7 @@ function SelectBase({
                         )
                       ]
                     }
-                  ) : isMultiSelect ? /* @__PURE__ */ jsx9(
+                  ) : isMultiSelect ? /* @__PURE__ */ jsx10(
                     "div",
                     {
                       className: cx(
@@ -3157,8 +3370,8 @@ function SelectBase({
                       children: bulkToggleControl
                     }
                   ) : null,
-                  hasFilter && /* @__PURE__ */ jsx9(Separator, {}),
-                  /* @__PURE__ */ jsx9(
+                  hasFilter && /* @__PURE__ */ jsx10(Separator, {}),
+                  /* @__PURE__ */ jsx10(
                     "div",
                     {
                       id: listboxId,
@@ -3167,7 +3380,7 @@ function SelectBase({
                       "aria-multiselectable": isMultiSelect || void 0,
                       onScroll: onListboxScroll,
                       className: "min-h-0 flex-1 overflow-y-auto overflow-x-hidden py-1",
-                      children: visibleGroups.length === 0 ? /* @__PURE__ */ jsx9("div", { className: "px-3 py-[14px] text-center text-[13px] text-[var(--theme-textLight)]", children: emptyState }) : visibleGroups.map((group) => /* @__PURE__ */ jsxs8(
+                      children: visibleGroups.length === 0 ? /* @__PURE__ */ jsx10("div", { className: "px-3 py-[14px] text-center text-[13px] text-[var(--theme-textLight)]", children: emptyState }) : visibleGroups.map((group) => /* @__PURE__ */ jsxs9(
                         "div",
                         {
                           className: cx(
@@ -3175,7 +3388,7 @@ function SelectBase({
                             group.label ? "mt-1" : "mt-0"
                           ),
                           children: [
-                            group.label ? /* @__PURE__ */ jsx9(
+                            group.label ? /* @__PURE__ */ jsx10(
                               "span",
                               {
                                 className: cx(
@@ -3193,7 +3406,7 @@ function SelectBase({
                               );
                               const isHighlighted = option.value === highlightedValue;
                               const isActive = isSelected || isHighlighted;
-                              return /* @__PURE__ */ jsx9(
+                              return /* @__PURE__ */ jsx10(
                                 "div",
                                 {
                                   role: "option",
@@ -3223,7 +3436,7 @@ function SelectBase({
                                     !option.disabled && isActive ? "text-[var(--theme-text)]" : null,
                                     !option.disabled && !isActive ? "text-[var(--theme-text)]" : null
                                   ),
-                                  children: /* @__PURE__ */ jsxs8(
+                                  children: /* @__PURE__ */ jsxs9(
                                     "div",
                                     {
                                       className: cx(
@@ -3236,8 +3449,8 @@ function SelectBase({
                                         !isSelected && !isHighlighted ? "bg-[var(--theme-surface)] font-medium" : null
                                       ),
                                       children: [
-                                        /* @__PURE__ */ jsxs8("span", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
-                                          isMultiSelect ? /* @__PURE__ */ jsx9(
+                                        /* @__PURE__ */ jsxs9("span", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+                                          isMultiSelect ? /* @__PURE__ */ jsx10(
                                             CheckboxIndicator,
                                             {
                                               checked: isSelected,
@@ -3249,21 +3462,21 @@ function SelectBase({
                                               uncheckedBackgroundColor: "transparent"
                                             }
                                           ) : null,
-                                          /* @__PURE__ */ jsx9("span", { className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: option.label })
+                                          /* @__PURE__ */ jsx10("span", { className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: option.label })
                                         ] }),
-                                        !isMultiSelect && isSelected ? /* @__PURE__ */ jsx9(
+                                        !isMultiSelect && isSelected ? /* @__PURE__ */ jsx10(
                                           "span",
                                           {
                                             "aria-hidden": "true",
                                             className: "flex shrink-0 items-center justify-center text-[var(--theme-primary)]",
-                                            children: /* @__PURE__ */ jsx9(
+                                            children: /* @__PURE__ */ jsx10(
                                               "svg",
                                               {
                                                 width: "16",
                                                 height: "16",
                                                 viewBox: "0 0 20 20",
                                                 fill: "none",
-                                                children: /* @__PURE__ */ jsx9(
+                                                children: /* @__PURE__ */ jsx10(
                                                   "path",
                                                   {
                                                     d: "M5.75 10.25L8.5 13l5.75-6",
@@ -3290,9 +3503,9 @@ function SelectBase({
                       ))
                     }
                   ),
-                  menuFooter ? /* @__PURE__ */ jsxs8(Fragment3, { children: [
-                    /* @__PURE__ */ jsx9(Separator, {}),
-                    /* @__PURE__ */ jsx9("div", { className: "shrink-0 px-2 pb-1 pt-2.5", children: menuFooter })
+                  menuFooter ? /* @__PURE__ */ jsxs9(Fragment3, { children: [
+                    /* @__PURE__ */ jsx10(Separator, {}),
+                    /* @__PURE__ */ jsx10("div", { className: "shrink-0 px-2 pb-1 pt-2.5", children: menuFooter })
                   ] }) : null
                 ]
               }
@@ -3376,17 +3589,17 @@ function parseSelectChildren(children) {
 }
 
 // src/components/Select.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Select({ children, options, ...props }) {
-  const actualChildren = options ? options.map((option) => /* @__PURE__ */ jsx10("option", { value: option.value, children: option.label }, option.value)) : children;
-  return /* @__PURE__ */ jsx10(SelectBase, { ...props, groups: parseSelectChildren(actualChildren), nativeOptions: actualChildren });
+  const actualChildren = options ? options.map((option) => /* @__PURE__ */ jsx11("option", { value: option.value, children: option.label }, option.value)) : children;
+  return /* @__PURE__ */ jsx11(SelectBase, { ...props, groups: parseSelectChildren(actualChildren), nativeOptions: actualChildren });
 }
 
 // src/components/SelectAsync.tsx
 import { useEffect as useEffect6, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react";
 
 // src/componentsBase/select/objectOptionsAdapter.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 var getOptionKey = (option) => {
   return String(option.value);
 };
@@ -3442,13 +3655,13 @@ var buildNativeOptionsFromObjectOptions = (options) => {
   return options.map((option) => {
     const optionValue = getOptionKey(option);
     const optionText = getTextContent(option.label).trim() || optionValue;
-    return /* @__PURE__ */ jsx11("option", { value: optionValue, disabled: option.disabled, children: optionText }, `native-${optionValue}`);
+    return /* @__PURE__ */ jsx12("option", { value: optionValue, disabled: option.disabled, children: optionText }, `native-${optionValue}`);
   });
 };
 var getSelectObjectOptionKey = getOptionKey;
 
 // src/components/SelectAsync.tsx
-import { jsx as jsx12, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
 var DEFAULT_LOAD_MORE_THRESHOLD = 24;
 var normalizeAsyncValue = (value, isMulti) => {
   if (value == null) {
@@ -3641,15 +3854,15 @@ function SelectAsync({
     }
     onChange == null ? void 0 : onChange(nextValue);
   };
-  const menuFooter = isLoadingMore || hasMore ? /* @__PURE__ */ jsxs9(
+  const menuFooter = isLoadingMore || hasMore ? /* @__PURE__ */ jsxs10(
     "div",
     {
       "aria-live": "polite",
       className: "flex items-center gap-3 text-xs leading-[1.4] text-[var(--theme-textLight)]",
       style: { justifyContent: hasMore ? "space-between" : "center" },
       children: [
-        /* @__PURE__ */ jsx12("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
-        isLoadingMore ? /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
+        isLoadingMore ? /* @__PURE__ */ jsx13(
           "span",
           {
             "aria-hidden": "true",
@@ -3661,7 +3874,7 @@ function SelectAsync({
   ) : null;
   const resolvedEmptyMessage = loadError && remoteOptions.length === 0 ? loadError : emptyMessage;
   const resolvedValue = selectedOptions.map((option) => getSelectObjectOptionKey(option));
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     SelectBase,
     {
       ...props,
@@ -4079,10 +4292,10 @@ var downloadTableAsPdf = (matrix, fileBaseName, title, page, totalPages) => {
 };
 
 // src/componentsBase/table/TableBase.tsx
-import { Fragment as Fragment4, jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
 var OVERFLOW_MENU_WIDTH = 220;
 function SettingsIcon() {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "svg",
     {
       width: "16",
@@ -4091,7 +4304,7 @@ function SettingsIcon() {
       fill: "none",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "path",
           {
             d: "M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z",
@@ -4099,7 +4312,7 @@ function SettingsIcon() {
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(
           "path",
           {
             d: `
@@ -4123,7 +4336,7 @@ function SettingsIcon() {
   );
 }
 function MoreActionsIcon() {
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "svg",
     {
       width: "16",
@@ -4132,16 +4345,16 @@ function MoreActionsIcon() {
       fill: "currentColor",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ jsx13("circle", { cx: "5", cy: "12", r: "1.8" }),
-        /* @__PURE__ */ jsx13("circle", { cx: "12", cy: "12", r: "1.8" }),
-        /* @__PURE__ */ jsx13("circle", { cx: "19", cy: "12", r: "1.8" })
+        /* @__PURE__ */ jsx14("circle", { cx: "5", cy: "12", r: "1.8" }),
+        /* @__PURE__ */ jsx14("circle", { cx: "12", cy: "12", r: "1.8" }),
+        /* @__PURE__ */ jsx14("circle", { cx: "19", cy: "12", r: "1.8" })
       ]
     }
   );
 }
 function ChevronIcon({ direction }) {
   const isLeft = direction === "left";
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "svg",
     {
       width: "14",
@@ -4149,7 +4362,7 @@ function ChevronIcon({ direction }) {
       viewBox: "0 0 24 24",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ jsx13(
+      children: /* @__PURE__ */ jsx14(
         "path",
         {
           d: isLeft ? "M15 6 9 12l6 6" : "m9 6 6 6-6 6",
@@ -4209,8 +4422,8 @@ function OverflowMenu({ label, children }) {
       window.removeEventListener("scroll", updateMenuPosition, true);
     };
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs10("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsxs11("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ jsx14(
       "button",
       {
         type: "button",
@@ -4229,11 +4442,11 @@ function OverflowMenu({ label, children }) {
           "cursor-pointer border-0 bg-transparent text-[var(--theme-text)]",
           "transition-colors hover:text-[var(--theme-primary)]"
         ].join(" "),
-        children: /* @__PURE__ */ jsx13(MoreActionsIcon, {})
+        children: /* @__PURE__ */ jsx14(MoreActionsIcon, {})
       }
     ),
     isOpen && menuPosition && typeof document !== "undefined" ? createPortal2(
-      /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx14(
         "div",
         {
           ref: menuRef,
@@ -4422,7 +4635,7 @@ function TableBase({
     const tone = (_a = action.tone) != null ? _a : "default";
     const iconOnly = appearance === "inline" && action.icon != null;
     const isMenuAction = appearance === "menu";
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "button",
       {
         type: "button",
@@ -4447,7 +4660,7 @@ function TableBase({
         ),
         children: [
           action.icon,
-          appearance === "menu" || !iconOnly ? /* @__PURE__ */ jsx13("span", { children: action.label }) : null
+          appearance === "menu" || !iconOnly ? /* @__PURE__ */ jsx14("span", { children: action.label }) : null
         ]
       },
       (_b = action.id) != null ? _b : `${action.label}-${rowIndex}`
@@ -4460,7 +4673,7 @@ function TableBase({
     }
     const inlineActions = resolvedActions.slice(0, visibleInlineActions);
     const overflowActions = resolvedActions.slice(visibleInlineActions);
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: cx(
@@ -4473,7 +4686,7 @@ function TableBase({
           inlineActions.map(
             (action) => renderActionButton(action, item, rowIndex, "inline")
           ),
-          overflowActions.length > 0 ? /* @__PURE__ */ jsx13(OverflowMenu, { label: resolvedLabels.actionsMenuLabel, children: overflowActions.map(
+          overflowActions.length > 0 ? /* @__PURE__ */ jsx14(OverflowMenu, { label: resolvedLabels.actionsMenuLabel, children: overflowActions.map(
             (action) => renderActionButton(action, item, rowIndex, "menu")
           ) }) : null
         ]
@@ -4484,7 +4697,7 @@ function TableBase({
     var _a;
     const content = resolveColumnContent(column, item, rowIndex);
     const align = (_a = column.align) != null ? _a : column.type === "actions" ? "right" : "left";
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "td",
       {
         colSpan: column.colSpan,
@@ -4497,14 +4710,14 @@ function TableBase({
           width: column.width,
           minWidth: column.minWidth
         },
-        children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { className: "text-[var(--theme-textLight)]", children: "-" })
+        children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx14("span", { className: "text-[var(--theme-textLight)]", children: "-" })
       },
       `${getColumnKey(column, columnIndex)}-${rowIndex}`
     );
   };
   const renderEmptyState = () => {
     const message = error ? error : loading ? resolvedLabels.loadingMessage : hasSearchValue ? resolvedLabels.noResultsMessage : resolvedLabels.emptyMessage;
-    return /* @__PURE__ */ jsxs10(
+    return /* @__PURE__ */ jsxs11(
       "div",
       {
         className: [
@@ -4513,13 +4726,13 @@ function TableBase({
           "p-6 text-center text-[var(--theme-text)] shadow-none"
         ].join(" "),
         children: [
-          /* @__PURE__ */ jsx13("strong", { className: "text-base", children: message }),
-          error && onRetry ? /* @__PURE__ */ jsx13(Button, { variant: "secondary", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
+          /* @__PURE__ */ jsx14("strong", { className: "text-base", children: message }),
+          error && onRetry ? /* @__PURE__ */ jsx14(Button, { variant: "secondary", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
         ]
       }
     );
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     "div",
     {
       ref: containerRef,
@@ -4531,8 +4744,8 @@ function TableBase({
       ),
       style,
       children: [
-        shouldRenderToolbar ? /* @__PURE__ */ jsxs10("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-3", children: [
-          shouldRenderToolbarPrimaryGroup ? /* @__PURE__ */ jsxs10(
+        shouldRenderToolbar ? /* @__PURE__ */ jsxs11("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-3", children: [
+          shouldRenderToolbarPrimaryGroup ? /* @__PURE__ */ jsxs11(
             "div",
             {
               className: cx(
@@ -4545,7 +4758,7 @@ function TableBase({
                   // to the Input would land on the inner <input>, which lives inside a
                   // flex-column ControlFrame — there flex-basis becomes height and the
                   // field grows absurdly tall.
-                  /* @__PURE__ */ jsx13("div", { className: "min-w-0 max-w-[360px] flex-[1_1_260px]", children: /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14("div", { className: "min-w-0 max-w-[360px] flex-[1_1_260px]", children: /* @__PURE__ */ jsx14(
                     Input,
                     {
                       type: "search",
@@ -4556,7 +4769,7 @@ function TableBase({
                     }
                   ) })
                 ) : null,
-                showSettingsButton && !loading ? /* @__PURE__ */ jsx13(
+                showSettingsButton && !loading ? /* @__PURE__ */ jsx14(
                   Button,
                   {
                     variant: "secondary",
@@ -4564,13 +4777,13 @@ function TableBase({
                     title: resolvedLabels.settingsButtonLabel,
                     onClick: () => setIsSettingsModalOpen(true),
                     className: "shrink-0",
-                    children: /* @__PURE__ */ jsx13(SettingsIcon, {})
+                    children: /* @__PURE__ */ jsx14(SettingsIcon, {})
                   }
                 ) : null
               ]
             }
           ) : null,
-          shouldShowToolbarStatus ? /* @__PURE__ */ jsxs10(
+          shouldShowToolbarStatus ? /* @__PURE__ */ jsxs11(
             "div",
             {
               className: cx(
@@ -4578,17 +4791,17 @@ function TableBase({
                 shouldRenderToolbarPrimaryGroup ? "ml-auto" : ""
               ),
               children: [
-                loading ? /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--theme-textLight)]", children: resolvedLabels.loadingMessage }) : null,
-                !loading && error && hasRows ? /* @__PURE__ */ jsxs10("div", { className: "inline-flex items-center gap-2.5", children: [
-                  /* @__PURE__ */ jsx13("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
-                  onRetry ? /* @__PURE__ */ jsx13(Button, { variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
+                loading ? /* @__PURE__ */ jsx14("span", { className: "text-[13px] font-semibold text-[var(--theme-textLight)]", children: resolvedLabels.loadingMessage }) : null,
+                !loading && error && hasRows ? /* @__PURE__ */ jsxs11("div", { className: "inline-flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ jsx14("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
+                  onRetry ? /* @__PURE__ */ jsx14(Button, { variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
                 ] }) : null
               ]
             }
           ) : null
         ] }) : null,
         !hasRows && (!loading || error) ? renderEmptyState() : null,
-        hasRows ? isCollapsed ? /* @__PURE__ */ jsx13(
+        hasRows ? isCollapsed ? /* @__PURE__ */ jsx14(
           "div",
           {
             role: "list",
@@ -4596,7 +4809,7 @@ function TableBase({
             className: "flex min-w-0 flex-col gap-3.5",
             children: items.map((item, rowIndex) => {
               const rowActions = renderActions(item, rowIndex);
-              return /* @__PURE__ */ jsxs10(
+              return /* @__PURE__ */ jsxs11(
                 "article",
                 {
                   role: "listitem",
@@ -4607,7 +4820,7 @@ function TableBase({
                     "px-3.5 py-3 shadow-none"
                   ].join(" "),
                   children: [
-                    /* @__PURE__ */ jsx13(
+                    /* @__PURE__ */ jsx14(
                       "div",
                       {
                         className: cx(
@@ -4626,7 +4839,7 @@ function TableBase({
                             1,
                             Math.min((_b = column.colSpan) != null ? _b : 1, mobileGridColumnCount)
                           );
-                          return /* @__PURE__ */ jsxs10(
+                          return /* @__PURE__ */ jsxs11(
                             "div",
                             {
                               className: cx(
@@ -4634,7 +4847,7 @@ function TableBase({
                                 span === 2 ? "col-span-2" : "col-span-1"
                               ),
                               children: [
-                                !column.hideLabel && column.label ? /* @__PURE__ */ jsx13(
+                                !column.hideLabel && column.label ? /* @__PURE__ */ jsx14(
                                   "span",
                                   {
                                     className: [
@@ -4646,14 +4859,14 @@ function TableBase({
                                     children: column.label
                                   }
                                 ) : null,
-                                /* @__PURE__ */ jsx13(
+                                /* @__PURE__ */ jsx14(
                                   "div",
                                   {
                                     className: cx(
                                       "min-w-0 max-w-full",
                                       mobileGridColumnCount === 2 ? "" : "flex-1"
                                     ),
-                                    children: /* @__PURE__ */ jsx13(
+                                    children: /* @__PURE__ */ jsx14(
                                       "div",
                                       {
                                         className: cx(
@@ -4661,7 +4874,7 @@ function TableBase({
                                           "text-[var(--theme-text)] [overflow-wrap:anywhere]",
                                           getAlignClassName(align)
                                         ),
-                                        children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx13("span", { className: "text-[var(--theme-textLight)]", children: "-" })
+                                        children: hasRenderableContent(content) ? content : /* @__PURE__ */ jsx14("span", { className: "text-[var(--theme-textLight)]", children: "-" })
                                       }
                                     )
                                   }
@@ -4673,15 +4886,15 @@ function TableBase({
                         })
                       }
                     ),
-                    rowActions ? /* @__PURE__ */ jsx13("div", { className: "flex justify-end pt-1", children: rowActions }) : null
+                    rowActions ? /* @__PURE__ */ jsx14("div", { className: "flex justify-end pt-1", children: rowActions }) : null
                   ]
                 },
                 getRowId(item, rowIndex, getCustomRowId)
               );
             })
           }
-        ) : /* @__PURE__ */ jsxs10(Fragment4, { children: [
-          /* @__PURE__ */ jsx13("style", { children: `
+        ) : /* @__PURE__ */ jsxs11(Fragment4, { children: [
+          /* @__PURE__ */ jsx14("style", { children: `
                 #${scrollRegionId} {
                   scrollbar-width: thin;
                   scrollbar-color: var(--theme-secondary) transparent;
@@ -4708,7 +4921,7 @@ function TableBase({
                   background-clip: padding-box;
                 }
               ` }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "div",
             {
               id: scrollRegionId,
@@ -4719,12 +4932,12 @@ function TableBase({
                 "rounded-[20px] border-2 border-solid border-[var(--theme-background)]",
                 "bg-[var(--theme-surface)] shadow-none"
               ),
-              children: /* @__PURE__ */ jsxs10("table", { className: "w-max min-w-full max-w-none border-separate border-spacing-0", children: [
-                /* @__PURE__ */ jsx13("thead", { children: /* @__PURE__ */ jsxs10("tr", { children: [
+              children: /* @__PURE__ */ jsxs11("table", { className: "w-max min-w-full max-w-none border-separate border-spacing-0", children: [
+                /* @__PURE__ */ jsx14("thead", { children: /* @__PURE__ */ jsxs11("tr", { children: [
                   desktopColumns.map((column, columnIndex) => {
                     var _a, _b;
                     const align = (_a = column.align) != null ? _a : column.type === "actions" ? "right" : "left";
-                    return /* @__PURE__ */ jsx13(
+                    return /* @__PURE__ */ jsx14(
                       "th",
                       {
                         colSpan: (_b = column.headerColSpan) != null ? _b : column.colSpan,
@@ -4744,7 +4957,7 @@ function TableBase({
                       getColumnKey(column, columnIndex)
                     );
                   }),
-                  actions ? /* @__PURE__ */ jsx13(
+                  actions ? /* @__PURE__ */ jsx14(
                     "th",
                     {
                       scope: "col",
@@ -4765,11 +4978,11 @@ function TableBase({
                     }
                   ) : null
                 ] }) }),
-                /* @__PURE__ */ jsx13("tbody", { children: items.map((item, rowIndex) => {
+                /* @__PURE__ */ jsx14("tbody", { children: items.map((item, rowIndex) => {
                   const rowActions = renderActions(item, rowIndex);
                   const isAlternateRow = rowIndex % 2 !== 0;
                   const stickyRowBackgroundImage = rowIndex % 2 === 0 ? void 0 : "linear-gradient(var(--theme-background), var(--theme-background))";
-                  return /* @__PURE__ */ jsxs10(
+                  return /* @__PURE__ */ jsxs11(
                     "tr",
                     {
                       className: isAlternateRow ? "bg-[var(--theme-background)]" : "bg-[var(--theme-surface)]",
@@ -4782,7 +4995,7 @@ function TableBase({
                             columnIndex
                           );
                         }),
-                        actions ? /* @__PURE__ */ jsx13(
+                        actions ? /* @__PURE__ */ jsx14(
                           "td",
                           {
                             className: cx(
@@ -4808,9 +5021,9 @@ function TableBase({
             }
           )
         ] }) : null,
-        hasRows && shouldRenderFooter ? /* @__PURE__ */ jsxs10("div", { className: "-mt-2 flex flex-wrap items-center justify-between gap-3", children: [
-          shouldShowPaginationControls ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ jsx13(
+        hasRows && shouldRenderFooter ? /* @__PURE__ */ jsxs11("div", { className: "-mt-2 flex flex-wrap items-center justify-between gap-3", children: [
+          shouldShowPaginationControls ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx14(
               Button,
               {
                 variant: "secondary",
@@ -4821,7 +5034,7 @@ function TableBase({
                 children: 1
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               Button,
               {
                 variant: "secondary",
@@ -4829,10 +5042,10 @@ function TableBase({
                 disabled: !canGoToPreviousPage,
                 "aria-label": resolvedLabels.previousPageLabel,
                 style: paginationButtonStyle,
-                children: /* @__PURE__ */ jsx13(ChevronIcon, { direction: "left" })
+                children: /* @__PURE__ */ jsx14(ChevronIcon, { direction: "left" })
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               Button,
               {
                 variant: "secondary",
@@ -4842,7 +5055,7 @@ function TableBase({
                 children: normalizedPage
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               Button,
               {
                 variant: "secondary",
@@ -4850,10 +5063,10 @@ function TableBase({
                 disabled: !canGoToNextPage,
                 "aria-label": resolvedLabels.nextPageLabel,
                 style: paginationButtonStyle,
-                children: /* @__PURE__ */ jsx13(ChevronIcon, { direction: "right" })
+                children: /* @__PURE__ */ jsx14(ChevronIcon, { direction: "right" })
               }
             ),
-            /* @__PURE__ */ jsx13(
+            /* @__PURE__ */ jsx14(
               Button,
               {
                 variant: "secondary",
@@ -4865,16 +5078,16 @@ function TableBase({
               }
             )
           ] }) : null,
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "div",
             {
               className: cx(
                 "flex items-center gap-2.5 text-[13px] text-[var(--theme-textLight)]",
                 shouldShowRowsPerPageControl ? "ml-auto" : ""
               ),
-              children: shouldShowRowsPerPageControl ? /* @__PURE__ */ jsxs10(Fragment4, { children: [
-                resolvedLabels.rowsPerPageLabel ? /* @__PURE__ */ jsx13("span", { children: resolvedLabels.rowsPerPageLabel }) : null,
-                /* @__PURE__ */ jsx13("div", { className: "w-[72px]", children: /* @__PURE__ */ jsx13(
+              children: shouldShowRowsPerPageControl ? /* @__PURE__ */ jsxs11(Fragment4, { children: [
+                resolvedLabels.rowsPerPageLabel ? /* @__PURE__ */ jsx14("span", { children: resolvedLabels.rowsPerPageLabel }) : null,
+                /* @__PURE__ */ jsx14("div", { className: "w-[72px]", children: /* @__PURE__ */ jsx14(
                   Select,
                   {
                     value: String(pageSize),
@@ -4893,7 +5106,7 @@ function TableBase({
             }
           )
         ] }) : null,
-        /* @__PURE__ */ jsxs10(
+        /* @__PURE__ */ jsxs11(
           Modal,
           {
             isOpen: isSettingsModalOpen,
@@ -4910,9 +5123,9 @@ function TableBase({
               paddingTop: 8
             },
             children: [
-              /* @__PURE__ */ jsxs10("section", { className: "grid gap-3", children: [
-                /* @__PURE__ */ jsx13("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
-                /* @__PURE__ */ jsxs10(
+              /* @__PURE__ */ jsxs11("section", { className: "grid gap-3", children: [
+                /* @__PURE__ */ jsx14("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
+                /* @__PURE__ */ jsxs11(
                   "div",
                   {
                     className: cx(
@@ -4920,31 +5133,31 @@ function TableBase({
                       "border-2 border-[var(--theme-background)] bg-[var(--theme-surface)]"
                     ),
                     children: [
-                      /* @__PURE__ */ jsxs10("div", { className: "grid gap-1", children: [
-                        /* @__PURE__ */ jsx13("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.totalItemsInfoLabel }),
-                        /* @__PURE__ */ jsx13("strong", { className: "font-medium text-[var(--theme-text)]", children: totalItemCount })
+                      /* @__PURE__ */ jsxs11("div", { className: "grid gap-1", children: [
+                        /* @__PURE__ */ jsx14("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.totalItemsInfoLabel }),
+                        /* @__PURE__ */ jsx14("strong", { className: "font-medium text-[var(--theme-text)]", children: totalItemCount })
                       ] }),
-                      /* @__PURE__ */ jsxs10("div", { className: "grid gap-1", children: [
-                        /* @__PURE__ */ jsx13("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.totalPagesInfoLabel }),
-                        /* @__PURE__ */ jsx13("strong", { className: "font-medium text-[var(--theme-text)]", children: totalPages })
+                      /* @__PURE__ */ jsxs11("div", { className: "grid gap-1", children: [
+                        /* @__PURE__ */ jsx14("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.totalPagesInfoLabel }),
+                        /* @__PURE__ */ jsx14("strong", { className: "font-medium text-[var(--theme-text)]", children: totalPages })
                       ] }),
-                      /* @__PURE__ */ jsxs10("div", { className: "grid gap-1", children: [
-                        /* @__PURE__ */ jsx13("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.currentPageItemsInfoLabel }),
-                        /* @__PURE__ */ jsx13("strong", { className: "font-medium text-[var(--theme-text)]", children: currentPageItemCount })
+                      /* @__PURE__ */ jsxs11("div", { className: "grid gap-1", children: [
+                        /* @__PURE__ */ jsx14("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.currentPageItemsInfoLabel }),
+                        /* @__PURE__ */ jsx14("strong", { className: "font-medium text-[var(--theme-text)]", children: currentPageItemCount })
                       ] }),
-                      /* @__PURE__ */ jsxs10("div", { className: "grid gap-1", children: [
-                        /* @__PURE__ */ jsx13("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.currentPageInfoLabel }),
-                        /* @__PURE__ */ jsx13("strong", { className: "font-medium text-[var(--theme-text)]", children: normalizedPage })
+                      /* @__PURE__ */ jsxs11("div", { className: "grid gap-1", children: [
+                        /* @__PURE__ */ jsx14("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.currentPageInfoLabel }),
+                        /* @__PURE__ */ jsx14("strong", { className: "font-medium text-[var(--theme-text)]", children: normalizedPage })
                       ] })
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx13("div", { className: "py-[18px]", children: /* @__PURE__ */ jsx13(Separator, {}) }),
-              /* @__PURE__ */ jsxs10("section", { className: "grid gap-3", children: [
-                /* @__PURE__ */ jsx13("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
-                /* @__PURE__ */ jsxs10("div", { className: "flex flex-wrap gap-2.5", children: [
-                  /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx14("div", { className: "py-[18px]", children: /* @__PURE__ */ jsx14(Separator, {}) }),
+              /* @__PURE__ */ jsxs11("section", { className: "grid gap-3", children: [
+                /* @__PURE__ */ jsx14("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
+                /* @__PURE__ */ jsxs11("div", { className: "flex flex-wrap gap-2.5", children: [
+                  /* @__PURE__ */ jsx14(
                     Button,
                     {
                       variant: "secondary",
@@ -4953,7 +5166,7 @@ function TableBase({
                       children: resolvedLabels.downloadCsvLabel
                     }
                   ),
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     Button,
                     {
                       variant: "secondary",
@@ -4962,7 +5175,7 @@ function TableBase({
                       children: resolvedLabels.downloadXlsLabel
                     }
                   ),
-                  /* @__PURE__ */ jsx13(
+                  /* @__PURE__ */ jsx14(
                     Button,
                     {
                       variant: "secondary",
@@ -4982,7 +5195,7 @@ function TableBase({
 }
 
 // src/components/Table.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Table({
   items,
   desktopColumns,
@@ -5041,7 +5254,7 @@ function Table({
     const startIndex = (normalizedPage - 1) * pageSize;
     return filteredItems.slice(startIndex, startIndex + pageSize);
   }, [filteredItems, normalizedPage, pageSize]);
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     TableBase,
     {
       ...props,
@@ -5078,7 +5291,7 @@ function Table({
 
 // src/components/TableAsync.tsx
 import { useEffect as useEffect9, useMemo as useMemo6, useRef as useRef6, useState as useState8 } from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var areUnknownArraysEqual2 = (left, right) => {
   if (left.length !== right.length) {
     return false;
@@ -5197,7 +5410,7 @@ function TableAsync({
     setPage(normalizedPage);
     onPageChange == null ? void 0 : onPageChange(normalizedPage);
   }, [normalizedPage, onPageChange, page]);
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     TableBase,
     {
       ...props,
@@ -5236,7 +5449,7 @@ function TableAsync({
 }
 
 // src/components/Textarea.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Textarea({
   label,
   hint,
@@ -5253,7 +5466,7 @@ function Textarea({
   const resolvedPlaceholder = placeholder != null ? placeholder : " ";
   const placeholderClass = floatingPlaceholder ? "placeholder-transparent" : "placeholder-[var(--theme-textLight)]";
   const isPopulated = rest.value !== void 0 && rest.value !== "" && rest.value !== null;
-  const textarea = /* @__PURE__ */ jsx16(
+  const textarea = /* @__PURE__ */ jsx17(
     "textarea",
     {
       ...rest,
@@ -5278,7 +5491,7 @@ function Textarea({
       }
     }
   );
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     ControlFrame,
     {
       label,
@@ -5305,6 +5518,7 @@ export {
   ComposableModal,
   DatePicker,
   Input,
+  Loading,
   Modal,
   Select,
   SelectAsync,