@ztwoint/z-ui 0.1.129 → 0.1.131

package/dist/components/tab/tab.js

@@ -1,12 +1,12 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-tabs";
-import { cn as s } from "../../lib/utils.js";
-function o({ className: a, ...t }) {
+import { jsx as e, jsxs as o } from "react/jsx-runtime";
+import * as s from "@radix-ui/react-tabs";
+import { cn as r } from "../../lib/utils.js";
+function m({ className: a, ...t }) {
   return /* @__PURE__ */ e(
-    r.Root,
+    s.Root,
     {
       "data-slot": "tabs",
-      className: s(a),
+      className: r(a),
       orientation: "horizontal",
       ...t
     }
@@ -14,67 +14,97 @@ function o({ className: a, ...t }) {
 }
 function c({ className: a, ...t }) {
   return /* @__PURE__ */ e(
-    r.List,
+    s.List,
     {
       "data-slot": "tabs-list",
-      className: s(
+      className: r(
         "inline-flex items-center bg-transparent relative",
         "w-full h-11",
         "max-lg:w-full max-lg:max-w-[full] max-lg:overflow-x-auto max-lg:overflow-y-hidden",
         "max-sm:w-full max-sm:px-2",
-        // 'after:absolute after:bottom-0 after:left-0 after:w-full after:h-0.5 after:bg-neutral-150',
         a
       ),
       ...t
     }
   );
 }
-function p({
+function f({
   className: a,
   icon: t,
-  label: i,
-  ...n
+  label: n,
+  ...i
 }) {
-  return /* @__PURE__ */ l(
-    r.Trigger,
+  return /* @__PURE__ */ o(
+    s.Trigger,
     {
       "data-slot": "tabs-trigger",
-      className: s(
+      className: r(
+        // Base positioning and layout
         "flex h-11 p-2.5 justify-center items-center gap-1 relative cursor-pointer",
         "max-lg:min-w-fit max-lg:flex-shrink-0",
         "max-sm:px-1.5 max-sm:py-2 max-sm:gap-0.5",
         "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50",
         "group",
+        // Underline pseudo-element using Tailwind's after: utilities
+        'after:content-[""] after:absolute after:left-1/2 after:bottom-0 after:-translate-x-1/2',
+        "after:w-[calc(100%-24px)] after:border-b after:border-stroke-solid-attention",
+        "after:opacity-0 after:transition-opacity after:duration-200 after:ease-linear after:z-10",
+        // Active state - show underline
+        "data-[state=active]:after:opacity-100",
         a
       ),
-      ...n,
+      ...i,
       children: [
-        t && /* @__PURE__ */ e("div", { className: "w-[14px] h-[14px] flex-shrink-0 flex items-center justify-center tab-icon", children: /* @__PURE__ */ e("div", { className: "w-[14px] h-[14px] [&>*]:!w-[14px] [&>*]:!h-[14px]", children: t }) }),
-        i && /* @__PURE__ */ e("div", { className: "flex px-0.5 justify-center items-center gap-1.5 max-sm:px-0.25 max-sm:gap-1", children: /* @__PURE__ */ e(
+        t && /* @__PURE__ */ e(
+          "div",
+          {
+            className: r(
+              "w-[14px] h-[14px] flex-shrink-0 flex items-center justify-center transition-colors duration-200",
+              // Icon colors based on state
+              "text-text-neutral-secondary",
+              // Default inactive color
+              "group-data-[state=active]:text-text-neutral-primary",
+              // Active color
+              "group-hover:text-text-neutral-primary",
+              // Hover color
+              // Force icon size
+              "[&>*]:!w-[14px] [&>*]:!h-[14px]"
+            ),
+            children: t
+          }
+        ),
+        n && /* @__PURE__ */ e("div", { className: "flex px-0.5 justify-center items-center gap-1.5 max-sm:px-0.25 max-sm:gap-1", children: /* @__PURE__ */ e(
           "div",
           {
-            className: s(
-              "text-center font-[450] transition-colors duration-200 tab-label",
+            className: r(
+              "text-center font-[450] transition-colors duration-200",
               "text-sm leading-none tracking-[-0.2px]",
               "max-lg:text-[13px]",
-              "max-sm:text-xs"
+              "max-sm:text-xs",
+              // Label colors based on state
+              "text-text-neutral-secondary",
+              // Default inactive color
+              "group-data-[state=active]:text-text-neutral-primary",
+              // Active color
+              "group-hover:text-text-neutral-primary"
+              // Hover color
             ),
-            children: i
+            children: n
           }
         ) })
       ]
     }
   );
 }
-function d({
+function p({
   className: a,
   ...t
 }) {
-  return /* @__PURE__ */ e(r.Content, { "data-slot": "tabs-content", className: s(a), ...t });
+  return /* @__PURE__ */ e(s.Content, { "data-slot": "tabs-content", className: r(a), ...t });
 }
 export {
-  o as Z2Tabs,
-  d as Z2TabsContent,
+  m as Z2Tabs,
+  p as Z2TabsContent,
   c as Z2TabsList,
-  p as Z2TabsTrigger
+  f as Z2TabsTrigger
 };

package/dist/components/table/components/cell/avatar-cell.js

@@ -17,6 +17,7 @@ import "../../../collapsible-side-nav-bar/popover/popover.js";
 import "react-country-flag";
 import "classnames";
 import "@radix-ui/react-checkbox";
+import "../../../checkbox-filter/index.js";
 import "@radix-ui/react-dialog";
 import "../../../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
@@ -25,6 +26,7 @@ import "../../../input/input.js";
 import "../../../nav-header/nav-header.js";
 import "../../../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
+import "@radix-ui/react-popover";
 import "../../../stepper/stepper.js";
 import "../../../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
@@ -41,7 +43,6 @@ import "../../../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledg
 import "@radix-ui/react-slot";
 import "../../../radio/z2-radio.js";
 import "../../../segmented-control/item.js";
-import "@radix-ui/react-popover";
 import "../../../primitives/popconfirm/popconfirm.js";
 import "../../../dynamic-table/z2-table.js";
 import "../../../dynamic-table/z2-table-context.js";
@@ -55,7 +56,7 @@ import "../../../z2map/components/map-pin-content.js";
 import "../../../z2map/components/map-controls.js";
 import "../../../z2map/components/map-zoom-control.js";
 import "../../../z2map/components/map-style-control.js";
-const ft = ({
+const ut = ({
   avatar: m,
   value: a,
   rightIcon: o,
@@ -66,7 +67,7 @@ const ft = ({
   "div",
   {
     className: r(
-      "flex flex-col gap-2.5  items-center hover:bg-background-neutral-light h-full min-w-full  leading-none-medium-sm p-3",
+      "flex flex-col gap-2.5  items-center h-full min-w-full  leading-none-medium-sm p-3",
       s
     ),
     children: [
@@ -93,5 +94,5 @@ const ft = ({
   }
 );
 export {
-  ft as AvatarCell
+  ut as AvatarCell
 };

package/dist/components/table/components/cell/description-cell.js

@@ -1,10 +1,10 @@
 import { jsx as r } from "react/jsx-runtime";
 import { cn as l } from "../../../../lib/utils.js";
-const i = ({ value: e, className: t }) => /* @__PURE__ */ r(
+const o = ({ value: e, className: t }) => /* @__PURE__ */ r(
   "div",
   {
     className: l(
-      "text-text-neutral-secondary p-3 w-full h-full items-center flex hover:bg-background-neutral-light",
+      "text-text-neutral-secondary p-3 w-full h-full items-center flex",
       "leading-[24px] text-[14px]",
       t
     ),
@@ -12,5 +12,5 @@ const i = ({ value: e, className: t }) => /* @__PURE__ */ r(
   }
 );
 export {
-  i as DescriptionCell
+  o as DescriptionCell
 };

package/dist/components/table/components/cell/label-cell.js

@@ -2,19 +2,19 @@ import { jsxs as e, jsx as l } from "react/jsx-runtime";
 import "react";
 import { cn as a } from "../../../../lib/utils.js";
 const u = ({
-  value: i,
+  value: r,
   leftIcon: n,
-  rightIcon: t,
+  rightIcon: m,
   className: c,
-  helperText: m,
+  helperText: t,
   description: s
 }) => {
-  const r = "min-h-max min-w-max";
+  const i = "min-h-max min-w-max";
   return /* @__PURE__ */ e(
     "div",
     {
       className: a(
-        "flex flex-row gap-2.5  items-center hover:bg-background-neutral-light h-full min-w-full  leading-none-medium-sm p-3",
+        "flex flex-row gap-2.5  items-center h-full min-w-full  leading-none-medium-sm p-3",
         s && "flex-col",
         c
       ),
@@ -27,12 +27,12 @@ const u = ({
             ),
             children: [
               /* @__PURE__ */ e("div", { className: "flex items-center gap-2.5 h-full", children: [
-                n && /* @__PURE__ */ l("span", { className: a(r), children: n }),
-                i
+                n && /* @__PURE__ */ l("span", { className: a(i), children: n }),
+                r
               ] }),
               /* @__PURE__ */ e("div", { className: "flex items-center gap-2.5", children: [
-                m && /* @__PURE__ */ l("span", { className: "text-text-neutral-secondary", children: m }),
-                t && /* @__PURE__ */ l("span", { className: a(r), children: t })
+                t && /* @__PURE__ */ l("span", { className: "text-text-neutral-secondary", children: t }),
+                m && /* @__PURE__ */ l("span", { className: a(i), children: m })
               ] })
             ]
           }

package/dist/components/table/components/cell/link-cell.js

@@ -1,36 +1,36 @@
-import { jsxs as s, jsx as a } from "react/jsx-runtime";
+import { jsxs as r, jsx as m } from "react/jsx-runtime";
 import "react";
 import { cn as e } from "../../../../lib/utils.js";
-const x = ({
-  value: i,
-  href: m,
+const d = ({
+  value: a,
+  href: i,
   target: t = "_self",
   leftIcon: n,
-  rightIcon: r,
-  className: o,
-  LinkComponent: c = "a"
+  rightIcon: s,
+  className: c,
+  LinkComponent: o = "a"
 }) => {
   const l = "min-h-max min-w-max";
-  return /* @__PURE__ */ s(
-    c,
+  return /* @__PURE__ */ r(
+    o,
     {
-      href: m,
+      href: i,
       target: t,
       rel: "noopener noreferrer",
       className: e(
-        "text-text-brand-secondary p-3 leading-none-medium-sm flex flex-row justify-between  hover:bg-background-neutral-light gap-2.5 min-w-full min-h-full items-center",
-        o
+        "text-text-brand-secondary p-3 leading-none-medium-sm flex flex-row justify-between gap-2.5 min-w-full min-h-full items-center",
+        c
       ),
       children: [
-        /* @__PURE__ */ s("div", { className: "flex items-center gap-2.5 h-full", children: [
-          n && /* @__PURE__ */ a("span", { className: e(l), children: n }),
-          i
+        /* @__PURE__ */ r("div", { className: "flex items-center gap-2.5 h-full", children: [
+          n && /* @__PURE__ */ m("span", { className: e(l), children: n }),
+          a
         ] }),
-        r && /* @__PURE__ */ a("span", { className: e(l), children: r })
+        s && /* @__PURE__ */ m("span", { className: e(l), children: s })
       ]
     }
   );
 };
 export {
-  x as LinkCell
+  d as LinkCell
 };

package/dist/components/table/components/cell/number-cell.js

@@ -1,35 +1,35 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
 import "react";
-import { cn as l } from "../../../../lib/utils.js";
-const u = ({
-  value: r,
-  leftIcon: s,
+import { cn as s } from "../../../../lib/utils.js";
+const x = ({
+  value: t,
+  leftIcon: a,
   rightIcon: n,
-  className: t,
+  className: r,
   helperText: i
 }) => {
   const m = "min-h-max min-w-max";
   return /* @__PURE__ */ e(
     "div",
     {
-      className: l(
-        "flex  gap-2.5 items-center hover:bg-background-neutral-light h-full min-w-full   leading-none-medium-sm p-3",
-        t
+      className: s(
+        "flex  gap-2.5 items-center h-full min-w-full   leading-none-medium-sm p-3",
+        r
       ),
-      children: /* @__PURE__ */ a(
+      children: /* @__PURE__ */ l(
         "div",
         {
-          className: l(
+          className: s(
             "text-text-neutral-primary flex justify-between  gap-2.5 min-w-full items-center"
           ),
           children: [
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-2.5 h-full", children: [
-              s && /* @__PURE__ */ e("span", { className: l(m), children: s }),
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-2.5 h-full", children: [
+              a && /* @__PURE__ */ e("span", { className: s(m), children: a }),
               i && /* @__PURE__ */ e("span", { className: "text-text-neutral-secondary", children: i })
             ] }),
-            /* @__PURE__ */ a("div", { className: "flex items-center gap-2.5", children: [
-              r,
-              n && /* @__PURE__ */ e("span", { className: l(m), children: n })
+            /* @__PURE__ */ l("div", { className: "flex items-center gap-2.5", children: [
+              t,
+              n && /* @__PURE__ */ e("span", { className: s(m), children: n })
             ] })
           ]
         }
@@ -38,5 +38,5 @@ const u = ({
   );
 };
 export {
-  u as NumberCell
+  x as NumberCell
 };

package/dist/components/table/table-provider.js

@@ -24,6 +24,7 @@ import "../collapsible-side-nav-bar/popover/popover.js";
 import "react-country-flag";
 import "classnames";
 import "@radix-ui/react-checkbox";
+import "../checkbox-filter/index.js";
 import "@radix-ui/react-dialog";
 import "../dropdown/z2-dropdown.js";
 import "@radix-ui/react-dropdown-menu";
@@ -32,6 +33,7 @@ import "../input/input.js";
 import "../nav-header/nav-header.js";
 import "../nav-header/nav-item/nav-item.js";
 import "@radix-ui/react-select";
+import "@radix-ui/react-popover";
 import "../stepper/stepper.js";
 import "../stepper-item/stepper-item.js";
 import "@radix-ui/react-tabs";
@@ -46,7 +48,6 @@ import "../../node_modules/@atlaskit/pragmatic-drag-and-drop/dist/esm/ledger/dis
 import "@radix-ui/react-slot";
 import "../radio/z2-radio.js";
 import "../segmented-control/item.js";
-import "@radix-ui/react-popover";
 import "../primitives/popconfirm/popconfirm.js";
 import "../dynamic-table/z2-table.js";
 import "../dynamic-table/z2-table-context.js";

package/dist/components/table/table.const.d.ts

@@ -24,7 +24,7 @@ export declare const TABLE_CSS_CLASSES: {
     readonly headerCellContent: "flex items-center justify-between";
     readonly sortIcon: "ml-2 w-4 h-4 text-gray-400";
     readonly sortIconActive: "ml-2 w-4 h-4 text-gray-600";
-    readonly row: " transition-colors duration-200 text-text-neutral-primary";
+    readonly row: " transition-colors duration-200 text-text-neutral-primary hover:bg-background-neutral-light";
     readonly emptyState: "px-4 py-8 text-center text-gray-500";
     readonly dataErrorState: "px-4 py-8 text-center text-text-danger-primary";
     readonly loading: "px-4 py-8 text-center text-gray-500";

package/dist/components/table/table.const.js

@@ -23,7 +23,7 @@ const t = "No data available", e = {
   headerCellContent: "flex items-center justify-between",
   sortIcon: "ml-2 w-4 h-4 text-gray-400",
   sortIconActive: "ml-2 w-4 h-4 text-gray-600",
-  row: " transition-colors duration-200 text-text-neutral-primary",
+  row: " transition-colors duration-200 text-text-neutral-primary hover:bg-background-neutral-light",
   emptyState: "px-4 py-8 text-center text-gray-500",
   dataErrorState: "px-4 py-8 text-center text-text-danger-primary",
   loading: "px-4 py-8 text-center text-gray-500"

package/dist/components/table-filter/filters/index.d.ts

@@ -1,4 +1,3 @@
 export * from './text';
 export * from './boolean';
 export * from './number';
-export * from './checkbox';

package/dist/components/table-filter/table-filter-button.js

@@ -1,43 +1,44 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
 import * as b from "react";
-import * as f from "@radix-ui/react-popover";
+import * as p from "@radix-ui/react-popover";
 import { Button as y } from "../button/button.js";
 import { useTableFilterContext as q } from "./table-filter.context.js";
 import E from "./filters/text.js";
 import G from "./filters/boolean.js";
 import J from "./filters/number/number.js";
-import M from "./filters/checkbox.js";
+import { CheckboxFilter as M } from "../checkbox-filter/index.js";
 import Q from "../assets/icons/circle-check-filled.js";
 import { SelectedFiltersDisplay as W } from "./selected-filters-display/selected-filters-display.js";
 import { FilterConfirmationDialog as X } from "./close-filter-confirm/filter-confirmation-dialog.js";
 import { hasUnsavedFilterChanges as S } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
-const ie = () => {
-  var k, A;
-  const [K, i] = b.useState(!1), n = b.useRef(null), [C, c] = b.useState(!1), {
-    selectedColumn: a,
+import { NumberBadge as Y } from "../number-badge/number-badge.js";
+const de = () => {
+  var w, A;
+  const [K, c] = b.useState(!1), n = b.useRef(null), [C, d] = b.useState(!1), {
+    selectedColumn: o,
     setSelectedColumn: O,
     getFilterForColumn: P,
     hasFilterForColumn: T,
     updateColumnFilter: D,
     clearAllFilters: R,
-    resetToAppliedFilters: $,
-    applyFilters: z,
-    hasActiveFilters: h,
+    resetToAppliedFilters: B,
+    applyFilters: $,
+    hasActiveFilters: f,
     tempFilters: u,
-    filterSchema: d,
-    filter: m,
+    filterSchema: m,
+    filter: h,
     filterComponents: x = {}
-  } = q(), B = (e) => {
-    !e && C ? S(u, m.value) ? i(!0) : c(!1) : c(e);
+  } = q(), z = (e) => {
+    !e && C ? S(u, h.value) ? c(!0) : d(!1) : d(e);
   }, N = () => {
-    z(), i(!1), c(!1);
+    $(), c(!1), d(!1);
   }, L = () => {
-    $(), i(!1), c(!1);
+    B(), c(!1), d(!1);
   }, I = () => {
-    i(!1);
-  }, F = S(u, m.value), l = P(a || ""), V = () => {
-    if (!a) return null;
-    const e = d.find((o) => o.filterKey === a), s = {
+    c(!1);
+  }, F = S(u, h.value), r = P(o || ""), V = () => {
+    if (!o) return null;
+    const e = m.find((a) => a.filterKey === o), s = {
       boolean: G,
       string: E,
       number: J,
@@ -48,66 +49,66 @@ const ie = () => {
         `No filter component found for column "${e == null ? void 0 : e.filterKey}" with type "${e == null ? void 0 : e.type}". Provide a custom filter component or use supported types: "string", "number", "boolean", "checkbox".`
       ), null;
     const U = {
-      condition: (l == null ? void 0 : l.condition) || "",
-      value: (l == null ? void 0 : l.value) || ""
+      condition: (r == null ? void 0 : r.condition) || "",
+      value: (r == null ? void 0 : r.value) || ""
     };
     return /* @__PURE__ */ t("div", { className: "flex-1 h-full", children: /* @__PURE__ */ t("div", { className: "mb-4 h-full", children: /* @__PURE__ */ t(
       j,
       {
         value: U,
-        onChange: ({ condition: o, value: v }) => D(a, o, v),
-        filterOptions: e != null && e.options ? Object.entries(e.options).map(([o, v]) => ({
-          label: o,
-          value: o,
+        onChange: ({ condition: a, value: v }) => D(o, a, v),
+        filterOptions: e != null && e.options ? Object.entries(e.options).map(([a, v]) => ({
+          label: a,
+          value: a,
           total: v
         })) : void 0
       },
-      a
+      o
     ) }) });
-  }, H = m.loading || !1;
-  l && (Array.isArray(l.value) && l.value.length > 0 || (l == null ? void 0 : l.value) !== "") && (n.current = l);
-  const g = d.find(
+  }, H = h.loading || !1;
+  r && (Array.isArray(r.value) && r.value.length > 0 || (r == null ? void 0 : r.value) !== "") && (n.current = r);
+  const g = m.find(
     (e) => {
       var s;
       return e.filterKey == ((s = n.current) == null ? void 0 : s.field);
     }
-  ), w = Array.isArray((k = n.current) == null ? void 0 : k.value) ? (A = n.current) == null ? void 0 : A.value.map(
+  ), k = Array.isArray((w = n.current) == null ? void 0 : w.value) ? (A = n.current) == null ? void 0 : A.value.map(
     (e) => {
       var s;
       return ((s = g == null ? void 0 : g.options) == null ? void 0 : s[e]) || 1;
     }
-  ) : [], p = w.reduce((e, s) => e + s, 0);
-  return /* @__PURE__ */ r(f.Root, { open: C, onOpenChange: B, children: [
-    /* @__PURE__ */ t(f.Trigger, { asChild: !0, children: /* @__PURE__ */ r(
+  ) : [], i = k.reduce((e, s) => e + s, 0);
+  return /* @__PURE__ */ l(p.Root, { open: C, onOpenChange: z, children: [
+    /* @__PURE__ */ t(p.Trigger, { asChild: !0, children: /* @__PURE__ */ l(
       y,
       {
-        variant: h ? "filled" : "stroke",
-        shade: h ? "brand" : "neutral",
+        variant: f ? "colored-stroke" : "stroke",
+        shade: f ? "brand" : "neutral",
         size: "small",
         children: [
           "Filters ",
-          h && `(${m.value.length})`
+          f && /* @__PURE__ */ t(Y, { number: i, textColor: "brand" })
         ]
       }
     ) }),
-    /* @__PURE__ */ t(f.Portal, { children: /* @__PURE__ */ r(
-      f.Content,
+    /* @__PURE__ */ t(p.Portal, { children: /* @__PURE__ */ l(
+      p.Content,
       {
         className: "w-[512px] bg-surface-neutral-default border border-stroke-solid-light rounded-2xl overflow-hidden shadow-lg",
         sideOffset: 8,
         align: "start",
         children: [
-          /* @__PURE__ */ r("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
-            /* @__PURE__ */ r("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
+          /* @__PURE__ */ l("div", { className: "flex h-[422px]", style: { maxHeight: "calc(100vh - 8rem)" }, children: [
+            /* @__PURE__ */ l("div", { className: "w-48 border-r border-stroke-solid-light p-2 flex flex-col gap-1.5 overflow-y-auto", children: [
               /* @__PURE__ */ t("div", { className: "p-2 pb-1", children: /* @__PURE__ */ t("h3", { className: "leading-none-medium-sm text-text-neutral-secondary", children: "Filters" }) }),
-              d.map((e) => /* @__PURE__ */ r(
+              m.map((e) => /* @__PURE__ */ l(
                 "button",
                 {
                   onClick: () => O(e.filterKey),
-                  className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${a === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
+                  className: `w-full text-left p-2 text-sm flex items-center justify-between hover:bg-surface-neutral-hover transition-colors rounded-lg ${o === e.filterKey ? "bg-surface-neutral-focused text-text-brand-primary" : "text-text-neutral-primary"}`,
                   children: [
-                    /* @__PURE__ */ r("span", { className: "flex items-center gap-1", children: [
-                      e.helperText && /* @__PURE__ */ r("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
+                    /* @__PURE__ */ l("span", { className: "flex items-center gap-1", children: [
+                      e.helperText && /* @__PURE__ */ l("span", { className: "leading-normal-regular-xs text-neutral-muted", children: [
                         e.helperText,
                         ": "
                       ] }),
@@ -119,24 +120,24 @@ const ie = () => {
                 e.filterKey
               ))
             ] }),
-            /* @__PURE__ */ r("div", { className: "flex-1 flex flex-col relative", children: [
-              a ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
-              H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ r("div", { className: "flex flex-col items-center gap-3", children: [
+            /* @__PURE__ */ l("div", { className: "flex-1 flex flex-col relative", children: [
+              o ? V() : /* @__PURE__ */ t("div", { className: "flex-1 flex items-center justify-center text-text-neutral-muted", children: "Select a column to configure its filter" }),
+              H && /* @__PURE__ */ t("div", { className: "flex items-center justify-center p-8 absolute top-0 left-0 right-0 bottom-0 bg-background-neutral-default/80", children: /* @__PURE__ */ l("div", { className: "flex flex-col items-center gap-3", children: [
                 /* @__PURE__ */ t("div", { className: "w-8 h-8 border-2 border-stroke-solid-medium border-t-transparent rounded-full animate-spin" }),
                 /* @__PURE__ */ t("span", { className: "text-text-body-primary text-sm", children: "Loading options..." })
               ] }) })
             ] })
           ] }),
-          (!!p || F) && /* @__PURE__ */ r("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
-            w.length > 0 ? /* @__PURE__ */ t(
+          (!!i || F) && /* @__PURE__ */ l("div", { className: "flex justify-between items-end p-4 border-t border-stroke-solid-medium min-h-[73px]", children: [
+            k.length > 0 ? /* @__PURE__ */ t(
               W,
               {
                 tempFilters: u,
-                filterSchema: d,
-                totalCount: p
+                filterSchema: m,
+                totalCount: i
               }
             ) : /* @__PURE__ */ t("div", { className: "w-full" }),
-            /* @__PURE__ */ r("div", { className: "flex justify-end gap-2", children: [
+            /* @__PURE__ */ l("div", { className: "flex justify-end gap-2", children: [
               /* @__PURE__ */ t(
                 y,
                 {
@@ -158,7 +159,7 @@ const ie = () => {
                   size: "small",
                   className: "min-w-20",
                   disabled: !F,
-                  children: `Apply ${p ? p.toLocaleString() : ""}`
+                  children: `Apply ${i ? i.toLocaleString() : ""}`
                 }
               )
             ] })
@@ -177,5 +178,5 @@ const ie = () => {
   ] });
 };
 export {
-  ie as TableFilterButton
+  de as TableFilterButton
 };