npm - smartsell-ui-kit - Versions diffs - 0.1.13 → 0.1.15 - Mend

smartsell-ui-kit 0.1.13 → 0.1.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/README.md +2 -0
package/dist/index.cjs +361 -146
package/dist/index.cjs.map +1 -1
package/dist/index.d.cts +18 -388
package/dist/index.d.ts +18 -388
package/dist/index.js +360 -146
package/dist/index.js.map +1 -1
package/dist/types-ENHTzCG6.d.cts +392 -0
package/dist/types-ENHTzCG6.d.ts +392 -0
package/dist/types.d.cts +1 -1
package/dist/types.d.ts +1 -1
package/package.json +3 -3

package/dist/index.cjs CHANGED Viewed

@@ -27,6 +27,7 @@ __export(src_exports, {
   ComposableModal: () => ComposableModal,
   DatePicker: () => DatePicker,
   Input: () => Input,
+  Loading: () => Loading,
   Modal: () => Modal,
   Select: () => Select,
   SelectAsync: () => SelectAsync,
@@ -2328,8 +2329,221 @@ function DatePicker({
   );
 }
-// src/components/Separator.tsx
+// src/components/Loading.tsx
 var import_jsx_runtime9 = require("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__ */ (0, import_jsx_runtime9.jsxs)(
+    "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__ */ (0, import_jsx_runtime9.jsxs)(
+          "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__ */ (0, import_jsx_runtime9.jsx)("style", { children: LOADING_KEYFRAMES }),
+              /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                "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__ */ (0, import_jsx_runtime9.jsx)(
+                      "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__ */ (0, import_jsx_runtime9.jsx)(
+                      "circle",
+                      {
+                        className: "ss-loading-item",
+                        cx: 27.5,
+                        cy: 20,
+                        r: 3.6,
+                        fill: "currentColor",
+                        fillOpacity: ITEM_FILL_OPACITIES[1],
+                        style: itemAnimation(1)
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                      "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__ */ (0, import_jsx_runtime9.jsxs)("g", { stroke: "currentColor", strokeWidth: 2.6, strokeLinecap: "round", strokeLinejoin: "round", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M3.5 7.5h4.6l1.6 5" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M9.7 12.5H43l-4.4 13.5H14.1z" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M18 26v3.4" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M35 26v3.4" })
+                    ] }),
+                    WHEELS.map((wheel) => /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+                      "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__ */ (0, import_jsx_runtime9.jsx)(
+                            "circle",
+                            {
+                              cx: wheel.cx,
+                              cy: wheel.cy,
+                              r: 3.2,
+                              stroke: "currentColor",
+                              strokeWidth: 2.2,
+                              fill: "none"
+                            }
+                          ),
+                          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+                            "path",
+                            {
+                              d: `M${wheel.cx} ${wheel.cy}V${wheel.cy - 3.2}`,
+                              stroke: "currentColor",
+                              strokeWidth: 2.2,
+                              strokeLinecap: "round"
+                            }
+                          )
+                        ]
+                      },
+                      wheel.cx
+                    ))
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        label ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "span",
+          {
+            style: {
+              color: "var(--theme-textLight)",
+              fontSize: Math.max(12, Math.round(pixelSize * 0.3)),
+              lineHeight: 1.4
+            },
+            children: label
+          }
+        ) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "ui-kit-sr-only", children: accessibleLabel })
+      ]
+    }
+  );
+}
+// src/components/Separator.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function Separator({
   orientation = "vertical",
   color,
@@ -2346,7 +2560,7 @@ function Separator({
     height: orientation === "vertical" ? usesVerticalStretch ? "auto" : size : 3,
     ...style
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "div",
     {
       ...rest,
@@ -2413,13 +2627,13 @@ function filterSelectGroups(groups, query) {
 }
 // src/componentsBase/select/SelectBase.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 var MENU_OFFSET = 8;
 var MENU_MAX_HEIGHT = 280;
 var emptySubscribe = () => () => {
 };
 function SearchIcon({ size }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "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",
@@ -2800,7 +3014,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__ */ (0, import_jsx_runtime10.jsx)(
+  const bulkToggleControl = isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     "button",
     {
       type: "button",
@@ -2820,7 +3034,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__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         CheckboxIndicator,
         {
           checked: hasAllVisibleSelected,
@@ -2977,7 +3191,7 @@ function SelectBase({
     }
   };
   const emptyState = isLoading ? loadingMessage : emptyMessage;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
     ControlFrame,
     {
       label,
@@ -2988,8 +3202,8 @@ function SelectBase({
       size,
       hasValue: hasSelection || isOpen,
       floatingPlaceholder,
-      children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { ref: shellRef, className: "relative w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { ref: shellRef, className: "relative w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "button",
           {
             ...buttonPassthroughProps,
@@ -3018,12 +3232,12 @@ function SelectBase({
               ...isTriggerDisabled ? { opacity: DISABLED_FIELD_OPACITY } : {}
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "span",
                 {
                   className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap",
                   style: controlTextNudgeStyle,
-                  children: hasSelection ? displayContent : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  children: hasSelection ? displayContent : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "span",
                     {
                       className: floatingPlaceholder ? "" : "text-[var(--theme-textLight)]",
@@ -3032,7 +3246,7 @@ function SelectBase({
                   )
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                 "span",
                 {
                   "aria-hidden": "true",
@@ -3045,7 +3259,7 @@ function SelectBase({
                     right: indicatorOffset,
                     transform: `translateY(-50%) rotate(${isOpen ? 180 : 0}deg)`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "path",
                     {
                       d: "M5.75 7.75L10 12l4.25-4.25",
@@ -3060,7 +3274,7 @@ function SelectBase({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "select",
           {
             ...rest,
@@ -3078,8 +3292,8 @@ function SelectBase({
           }
         ),
         isMounted && isOpen ? (0, import_react_dom.createPortal)(
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("style", { children: `
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: `
                 #${listboxId} {
                   scrollbar-width: thin;
                   scrollbar-color: ${scrollbarThumbColor} transparent;
@@ -3110,7 +3324,7 @@ function SelectBase({
                   opacity: 1;
                 }
               ` }),
-            /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
               "div",
               {
                 ref: menuRef,
@@ -3133,7 +3347,7 @@ function SelectBase({
                   visibility: isPlacementResolved ? "visible" : "hidden"
                 },
                 children: [
-                  hasFilter ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                  hasFilter ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                     "div",
                     {
                       className: cx(
@@ -3141,20 +3355,20 @@ function SelectBase({
                       ),
                       children: [
                         bulkToggleControl,
-                        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                           "div",
                           {
                             className: "flex-1",
                             onClick: (event) => event.stopPropagation(),
                             onMouseDown: (event) => event.stopPropagation(),
                             onPointerDown: (event) => event.stopPropagation(),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                               Input,
                               {
                                 id: searchInputId,
                                 ref: searchInputRef,
                                 type: "text",
-                                icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SearchIcon, { size: 16 }),
+                                icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SearchIcon, { size: 16 }),
                                 disableFloatingLabel: true,
                                 value: currentSearchQuery,
                                 onChange: (event) => {
@@ -3174,7 +3388,7 @@ function SelectBase({
                         )
                       ]
                     }
-                  ) : isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  ) : isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "div",
                     {
                       className: cx(
@@ -3183,8 +3397,8 @@ function SelectBase({
                       children: bulkToggleControl
                     }
                   ) : null,
-                  hasFilter && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Separator, {}),
-                  /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                  hasFilter && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Separator, {}),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                     "div",
                     {
                       id: listboxId,
@@ -3193,7 +3407,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__ */ (0, import_jsx_runtime10.jsx)("div", { className: "px-3 py-[14px] text-center text-[13px] text-[var(--theme-textLight)]", children: emptyState }) : visibleGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                      children: visibleGroups.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "px-3 py-[14px] text-center text-[13px] text-[var(--theme-textLight)]", children: emptyState }) : visibleGroups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                         "div",
                         {
                           className: cx(
@@ -3201,7 +3415,7 @@ function SelectBase({
                             group.label ? "mt-1" : "mt-0"
                           ),
                           children: [
-                            group.label ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                            group.label ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                               "span",
                               {
                                 className: cx(
@@ -3219,7 +3433,7 @@ function SelectBase({
                               );
                               const isHighlighted = option.value === highlightedValue;
                               const isActive = isSelected || isHighlighted;
-                              return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                              return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                 "div",
                                 {
                                   role: "option",
@@ -3246,10 +3460,10 @@ function SelectBase({
                                   className: cx(
                                     "w-full min-w-0 box-border py-0.5 leading-5",
                                     option.disabled ? "cursor-not-allowed text-[var(--theme-secondary)]" : "cursor-pointer",
-                                    !option.disabled && isActive ? "text-[var(--theme-text)]" : null,
+                                    !option.disabled && isActive ? "text-[var(--theme-onPrimary)]" : null,
                                     !option.disabled && !isActive ? "text-[var(--theme-text)]" : null
                                   ),
-                                  children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+                                  children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
                                     "div",
                                     {
                                       className: cx(
@@ -3262,8 +3476,8 @@ function SelectBase({
                                         !isSelected && !isHighlighted ? "bg-[var(--theme-surface)] font-medium" : null
                                       ),
                                       children: [
-                                        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
-                                          isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+                                          isMultiSelect ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                             CheckboxIndicator,
                                             {
                                               checked: isSelected,
@@ -3275,21 +3489,21 @@ function SelectBase({
                                               uncheckedBackgroundColor: "transparent"
                                             }
                                           ) : null,
-                                          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: option.label })
+                                          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "block min-w-0 flex-1 overflow-hidden text-ellipsis whitespace-nowrap", children: option.label })
                                         ] }),
-                                        !isMultiSelect && isSelected ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                        !isMultiSelect && isSelected ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                           "span",
                                           {
                                             "aria-hidden": "true",
-                                            className: "flex shrink-0 items-center justify-center text-[var(--theme-primary)]",
-                                            children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                            className: "flex shrink-0 items-center justify-center text-[var(--theme-onPrimary)]",
+                                            children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                               "svg",
                                               {
                                                 width: "16",
                                                 height: "16",
                                                 viewBox: "0 0 20 20",
                                                 fill: "none",
-                                                children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+                                                children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
                                                   "path",
                                                   {
                                                     d: "M5.75 10.25L8.5 13l5.75-6",
@@ -3316,9 +3530,9 @@ function SelectBase({
                       ))
                     }
                   ),
-                  menuFooter ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Separator, {}),
-                    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "shrink-0 px-2 pb-1 pt-2.5", children: menuFooter })
+                  menuFooter ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Separator, {}),
+                    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "shrink-0 px-2 pb-1 pt-2.5", children: menuFooter })
                   ] }) : null
                 ]
               }
@@ -3402,17 +3616,17 @@ function parseSelectChildren(children) {
 }
 // src/components/Select.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function Select({ children, options, ...props }) {
-  const actualChildren = options ? options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("option", { value: option.value, children: option.label }, option.value)) : children;
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SelectBase, { ...props, groups: parseSelectChildren(actualChildren), nativeOptions: actualChildren });
+  const actualChildren = options ? options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: option.value, children: option.label }, option.value)) : children;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(SelectBase, { ...props, groups: parseSelectChildren(actualChildren), nativeOptions: actualChildren });
 }
 // src/components/SelectAsync.tsx
 var import_react9 = require("react");
 // src/componentsBase/select/objectOptionsAdapter.tsx
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var getOptionKey = (option) => {
   return String(option.value);
 };
@@ -3468,13 +3682,13 @@ var buildNativeOptionsFromObjectOptions = (options) => {
   return options.map((option) => {
     const optionValue = getOptionKey(option);
     const optionText = getTextContent(option.label).trim() || optionValue;
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("option", { value: optionValue, disabled: option.disabled, children: optionText }, `native-${optionValue}`);
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("option", { value: optionValue, disabled: option.disabled, children: optionText }, `native-${optionValue}`);
   });
 };
 var getSelectObjectOptionKey = getOptionKey;
 // src/components/SelectAsync.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 var DEFAULT_LOAD_MORE_THRESHOLD = 24;
 var normalizeAsyncValue = (value, isMulti) => {
   if (value == null) {
@@ -3667,15 +3881,15 @@ function SelectAsync({
     }
     onChange == null ? void 0 : onChange(nextValue);
   };
-  const menuFooter = isLoadingMore || hasMore ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  const menuFooter = isLoadingMore || hasMore ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     "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__ */ (0, import_jsx_runtime13.jsx)("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
-        isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: isLoadingMore ? loadingMoreMessage : hasMore ? loadMoreHintMessage : null }),
+        isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           "span",
           {
             "aria-hidden": "true",
@@ -3687,7 +3901,7 @@ function SelectAsync({
   ) : null;
   const resolvedEmptyMessage = loadError && remoteOptions.length === 0 ? loadError : emptyMessage;
   const resolvedValue = selectedOptions.map((option) => getSelectObjectOptionKey(option));
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     SelectBase,
     {
       ...props,
@@ -4100,10 +4314,10 @@ var downloadTableAsPdf = (matrix, fileBaseName, title, page, totalPages) => {
 };
 // src/componentsBase/table/TableBase.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 var OVERFLOW_MENU_WIDTH = 220;
 function SettingsIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "svg",
     {
       width: "16",
@@ -4112,7 +4326,7 @@ function SettingsIcon() {
       fill: "none",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: "M12 15.2a3.2 3.2 0 1 0 0-6.4 3.2 3.2 0 0 0 0 6.4Z",
@@ -4120,7 +4334,7 @@ function SettingsIcon() {
             strokeWidth: "2"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "path",
           {
             d: `
@@ -4144,7 +4358,7 @@ function SettingsIcon() {
   );
 }
 function MoreActionsIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "svg",
     {
       width: "16",
@@ -4153,16 +4367,16 @@ function MoreActionsIcon() {
       fill: "currentColor",
       "aria-hidden": "true",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "5", cy: "12", r: "1.8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "12", cy: "12", r: "1.8" }),
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("circle", { cx: "19", cy: "12", r: "1.8" })
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "5", cy: "12", r: "1.8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "12", cy: "12", r: "1.8" }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("circle", { cx: "19", cy: "12", r: "1.8" })
       ]
     }
   );
 }
 function ChevronIcon({ direction }) {
   const isLeft = direction === "left";
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "svg",
     {
       width: "14",
@@ -4170,7 +4384,7 @@ function ChevronIcon({ direction }) {
       viewBox: "0 0 24 24",
       fill: "none",
       "aria-hidden": "true",
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "path",
         {
           d: isLeft ? "M15 6 9 12l6 6" : "m9 6 6 6-6 6",
@@ -4230,8 +4444,8 @@ function OverflowMenu({ label, children }) {
       window.removeEventListener("scroll", updateMenuPosition, true);
     };
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: containerRef, className: "relative", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { ref: containerRef, className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "button",
       {
         type: "button",
@@ -4250,11 +4464,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__ */ (0, import_jsx_runtime14.jsx)(MoreActionsIcon, {})
+        children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(MoreActionsIcon, {})
       }
     ),
     isOpen && menuPosition && typeof document !== "undefined" ? (0, import_react_dom2.createPortal)(
-      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
         "div",
         {
           ref: menuRef,
@@ -4443,7 +4657,7 @@ function TableBase({
     const tone = (_a = action.tone) != null ? _a : "default";
     const iconOnly = appearance === "inline" && action.icon != null;
     const isMenuAction = appearance === "menu";
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "button",
       {
         type: "button",
@@ -4468,7 +4682,7 @@ function TableBase({
         ),
         children: [
           action.icon,
-          appearance === "menu" || !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: action.label }) : null
+          appearance === "menu" || !iconOnly ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: action.label }) : null
         ]
       },
       (_b = action.id) != null ? _b : `${action.label}-${rowIndex}`
@@ -4481,7 +4695,7 @@ function TableBase({
     }
     const inlineActions = resolvedActions.slice(0, visibleInlineActions);
     const overflowActions = resolvedActions.slice(visibleInlineActions);
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: cx(
@@ -4494,7 +4708,7 @@ function TableBase({
           inlineActions.map(
             (action) => renderActionButton(action, item, rowIndex, "inline")
           ),
-          overflowActions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(OverflowMenu, { label: resolvedLabels.actionsMenuLabel, children: overflowActions.map(
+          overflowActions.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(OverflowMenu, { label: resolvedLabels.actionsMenuLabel, children: overflowActions.map(
             (action) => renderActionButton(action, item, rowIndex, "menu")
           ) }) : null
         ]
@@ -4505,7 +4719,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__ */ (0, import_jsx_runtime14.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "td",
       {
         colSpan: column.colSpan,
@@ -4518,29 +4732,29 @@ function TableBase({
           width: column.width,
           minWidth: column.minWidth
         },
-        children: hasRenderableContent(content) ? content : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[var(--theme-textLight)]", children: "-" })
+        children: hasRenderableContent(content) ? content : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         className: [
           "flex min-h-[220px] flex-col items-center justify-center gap-3 rounded-[20px]",
-          "border border-dashed border-[var(--theme-textLight)] bg-[var(--theme-surface)]",
+          "border border-dashed border-[var(--theme-background)] bg-[var(--theme-surface)]",
           "p-6 text-center text-[var(--theme-text)] shadow-none"
         ].join(" "),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-base", children: message }),
-          error && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "secondary", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "text-base", children: message }),
+          error && onRetry ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "secondary", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
         ]
       }
     );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -4552,8 +4766,8 @@ function TableBase({
       ),
       style,
       children: [
-        shouldRenderToolbar ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-3", children: [
-          shouldRenderToolbarPrimaryGroup ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        shouldRenderToolbar ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center justify-between gap-3", children: [
+          shouldRenderToolbarPrimaryGroup ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "div",
             {
               className: cx(
@@ -4566,7 +4780,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__ */ (0, import_jsx_runtime14.jsx)("div", { className: "min-w-0 max-w-[360px] flex-[1_1_260px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "min-w-0 max-w-[360px] flex-[1_1_260px]", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Input,
                     {
                       type: "search",
@@ -4577,7 +4791,7 @@ function TableBase({
                     }
                   ) })
                 ) : null,
-                showSettingsButton && !loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                showSettingsButton && !loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   Button,
                   {
                     variant: "secondary",
@@ -4585,13 +4799,13 @@ function TableBase({
                     title: resolvedLabels.settingsButtonLabel,
                     onClick: () => setIsSettingsModalOpen(true),
                     className: "shrink-0",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SettingsIcon, {})
+                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SettingsIcon, {})
                   }
                 ) : null
               ]
             }
           ) : null,
-          shouldShowToolbarStatus ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          shouldShowToolbarStatus ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
             "div",
             {
               className: cx(
@@ -4599,17 +4813,17 @@ function TableBase({
                 shouldRenderToolbarPrimaryGroup ? "ml-auto" : ""
               ),
               children: [
-                loading ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[13px] font-semibold text-[var(--theme-textLight)]", children: resolvedLabels.loadingMessage }) : null,
-                !loading && error && hasRows ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "inline-flex items-center gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
-                  onRetry ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Button, { variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
+                loading ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[13px] font-semibold text-[var(--theme-textLight)]", children: resolvedLabels.loadingMessage }) : null,
+                !loading && error && hasRows ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "inline-flex items-center gap-2.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[13px] font-semibold text-[var(--theme-negative)]", children: resolvedLabels.errorMessage }),
+                  onRetry ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Button, { variant: "ghost", onClick: onRetry, children: resolvedLabels.retryLabel }) : null
                 ] }) : null
               ]
             }
           ) : null
         ] }) : null,
         !hasRows && (!loading || error) ? renderEmptyState() : null,
-        hasRows ? isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        hasRows ? isCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           "div",
           {
             role: "list",
@@ -4617,7 +4831,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__ */ (0, import_jsx_runtime14.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                 "article",
                 {
                   role: "listitem",
@@ -4628,7 +4842,7 @@ function TableBase({
                     "px-3.5 py-3 shadow-none"
                   ].join(" "),
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       "div",
                       {
                         className: cx(
@@ -4647,7 +4861,7 @@ function TableBase({
                             1,
                             Math.min((_b = column.colSpan) != null ? _b : 1, mobileGridColumnCount)
                           );
-                          return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+                          return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                             "div",
                             {
                               className: cx(
@@ -4655,7 +4869,7 @@ function TableBase({
                                 span === 2 ? "col-span-2" : "col-span-1"
                               ),
                               children: [
-                                !column.hideLabel && column.label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                !column.hideLabel && column.label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                                   "span",
                                   {
                                     className: [
@@ -4667,14 +4881,14 @@ function TableBase({
                                     children: column.label
                                   }
                                 ) : null,
-                                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                                   "div",
                                   {
                                     className: cx(
                                       "min-w-0 max-w-full",
                                       mobileGridColumnCount === 2 ? "" : "flex-1"
                                     ),
-                                    children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                                    children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                                       "div",
                                       {
                                         className: cx(
@@ -4682,7 +4896,7 @@ function TableBase({
                                           "text-[var(--theme-text)] [overflow-wrap:anywhere]",
                                           getAlignClassName(align)
                                         ),
-                                        children: hasRenderableContent(content) ? content : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-[var(--theme-textLight)]", children: "-" })
+                                        children: hasRenderableContent(content) ? content : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-[var(--theme-textLight)]", children: "-" })
                                       }
                                     )
                                   }
@@ -4694,15 +4908,15 @@ function TableBase({
                         })
                       }
                     ),
-                    rowActions ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex justify-end pt-1", children: rowActions }) : null
+                    rowActions ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex justify-end pt-1", children: rowActions }) : null
                   ]
                 },
                 getRowId(item, rowIndex, getCustomRowId)
               );
             })
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("style", { children: `
+        ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("style", { children: `
                 #${scrollRegionId} {
                   scrollbar-width: thin;
                   scrollbar-color: var(--theme-secondary) transparent;
@@ -4729,7 +4943,7 @@ function TableBase({
                   background-clip: padding-box;
                 }
               ` }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               id: scrollRegionId,
@@ -4740,12 +4954,12 @@ function TableBase({
                 "rounded-[20px] border-2 border-solid border-[var(--theme-background)]",
                 "bg-[var(--theme-surface)] shadow-none"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("table", { className: "w-max min-w-full max-w-none border-separate border-spacing-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("tr", { children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("table", { className: "w-max min-w-full max-w-none border-separate border-spacing-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("tr", { children: [
                   desktopColumns.map((column, columnIndex) => {
                     var _a, _b;
                     const align = (_a = column.align) != null ? _a : column.type === "actions" ? "right" : "left";
-                    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                       "th",
                       {
                         colSpan: (_b = column.headerColSpan) != null ? _b : column.colSpan,
@@ -4765,7 +4979,7 @@ function TableBase({
                       getColumnKey(column, columnIndex)
                     );
                   }),
-                  actions ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  actions ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     "th",
                     {
                       scope: "col",
@@ -4786,11 +5000,11 @@ function TableBase({
                     }
                   ) : null
                 ] }) }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("tbody", { children: items.map((item, rowIndex) => {
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("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__ */ (0, import_jsx_runtime14.jsxs)(
+                  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                     "tr",
                     {
                       className: isAlternateRow ? "bg-[var(--theme-background)]" : "bg-[var(--theme-surface)]",
@@ -4803,7 +5017,7 @@ function TableBase({
                             columnIndex
                           );
                         }),
-                        actions ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                        actions ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                           "td",
                           {
                             className: cx(
@@ -4829,9 +5043,9 @@ function TableBase({
             }
           )
         ] }) : null,
-        hasRows && shouldRenderFooter ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "-mt-2 flex flex-wrap items-center justify-between gap-3", children: [
-          shouldShowPaginationControls ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        hasRows && shouldRenderFooter ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "-mt-2 flex flex-wrap items-center justify-between gap-3", children: [
+          shouldShowPaginationControls ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Button,
               {
                 variant: "secondary",
@@ -4842,7 +5056,7 @@ function TableBase({
                 children: 1
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Button,
               {
                 variant: "secondary",
@@ -4850,10 +5064,10 @@ function TableBase({
                 disabled: !canGoToPreviousPage,
                 "aria-label": resolvedLabels.previousPageLabel,
                 style: paginationButtonStyle,
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronIcon, { direction: "left" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronIcon, { direction: "left" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Button,
               {
                 variant: "secondary",
@@ -4863,7 +5077,7 @@ function TableBase({
                 children: normalizedPage
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Button,
               {
                 variant: "secondary",
@@ -4871,10 +5085,10 @@ function TableBase({
                 disabled: !canGoToNextPage,
                 "aria-label": resolvedLabels.nextPageLabel,
                 style: paginationButtonStyle,
-                children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronIcon, { direction: "right" })
+                children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ChevronIcon, { direction: "right" })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
               Button,
               {
                 variant: "secondary",
@@ -4886,16 +5100,16 @@ function TableBase({
               }
             )
           ] }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "div",
             {
               className: cx(
                 "flex items-center gap-2.5 text-[13px] text-[var(--theme-textLight)]",
                 shouldShowRowsPerPageControl ? "ml-auto" : ""
               ),
-              children: shouldShowRowsPerPageControl ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
-                resolvedLabels.rowsPerPageLabel ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { children: resolvedLabels.rowsPerPageLabel }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "w-[72px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              children: shouldShowRowsPerPageControl ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+                resolvedLabels.rowsPerPageLabel ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: resolvedLabels.rowsPerPageLabel }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "w-[72px]", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                   Select,
                   {
                     value: String(pageSize),
@@ -4914,7 +5128,7 @@ function TableBase({
             }
           )
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
           Modal,
           {
             isOpen: isSettingsModalOpen,
@@ -4931,9 +5145,9 @@ function TableBase({
               paddingTop: 8
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { className: "grid gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "grid gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.tableInfoSectionTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
                   "div",
                   {
                     className: cx(
@@ -4941,31 +5155,31 @@ function TableBase({
                       "border-2 border-[var(--theme-background)] bg-[var(--theme-surface)]"
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid gap-1", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.totalItemsInfoLabel }),
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "font-medium text-[var(--theme-text)]", children: totalItemCount })
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid gap-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.totalItemsInfoLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "font-medium text-[var(--theme-text)]", children: totalItemCount })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid gap-1", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.totalPagesInfoLabel }),
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "font-medium text-[var(--theme-text)]", children: totalPages })
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid gap-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.totalPagesInfoLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "font-medium text-[var(--theme-text)]", children: totalPages })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid gap-1", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.currentPageItemsInfoLabel }),
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "font-medium text-[var(--theme-text)]", children: currentPageItemCount })
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid gap-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.currentPageItemsInfoLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "font-medium text-[var(--theme-text)]", children: currentPageItemCount })
                       ] }),
-                      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "grid gap-1", children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.currentPageInfoLabel }),
-                        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "font-medium text-[var(--theme-text)]", children: normalizedPage })
+                      /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "grid gap-1", children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "text-xs text-[var(--theme-textLight)]", children: resolvedLabels.currentPageInfoLabel }),
+                        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "font-medium text-[var(--theme-text)]", children: normalizedPage })
                       ] })
                     ]
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "py-[18px]", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Separator, {}) }),
-              /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { className: "grid gap-3", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
-                /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-wrap gap-2.5", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "py-[18px]", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Separator, {}) }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("section", { className: "grid gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("strong", { className: "text-sm text-[var(--theme-text)]", children: resolvedLabels.downloadSectionTitle }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-wrap gap-2.5", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Button,
                     {
                       variant: "secondary",
@@ -4974,7 +5188,7 @@ function TableBase({
                       children: resolvedLabels.downloadCsvLabel
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Button,
                     {
                       variant: "secondary",
@@ -4983,7 +5197,7 @@ function TableBase({
                       children: resolvedLabels.downloadXlsLabel
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
                     Button,
                     {
                       variant: "secondary",
@@ -5003,7 +5217,7 @@ function TableBase({
 }
 // src/components/Table.tsx
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Table({
   items,
   desktopColumns,
@@ -5062,7 +5276,7 @@ function Table({
     const startIndex = (normalizedPage - 1) * pageSize;
     return filteredItems.slice(startIndex, startIndex + pageSize);
   }, [filteredItems, normalizedPage, pageSize]);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     TableBase,
     {
       ...props,
@@ -5099,7 +5313,7 @@ function Table({
 // src/components/TableAsync.tsx
 var import_react13 = require("react");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var areUnknownArraysEqual2 = (left, right) => {
   if (left.length !== right.length) {
     return false;
@@ -5218,7 +5432,7 @@ function TableAsync({
     setPage(normalizedPage);
     onPageChange == null ? void 0 : onPageChange(normalizedPage);
   }, [normalizedPage, onPageChange, page]);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     TableBase,
     {
       ...props,
@@ -5257,7 +5471,7 @@ function TableAsync({
 }
 // src/components/Textarea.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function Textarea({
   label,
   hint,
@@ -5274,7 +5488,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__ */ (0, import_jsx_runtime17.jsx)(
+  const textarea = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "textarea",
     {
       ...rest,
@@ -5299,7 +5513,7 @@ function Textarea({
       }
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     ControlFrame,
     {
       label,
@@ -5327,6 +5541,7 @@ injectUiKitFonts();
   ComposableModal,
   DatePicker,
   Input,
+  Loading,
   Modal,
   Select,
   SelectAsync,