@ztwoint/z-ui 0.1.47 → 0.1.49

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

@@ -1,79 +1,108 @@
-import { jsxs as r, jsx as t } from "react/jsx-runtime";
-import * as C from "react";
-import { Button as d } from "../../../button/button.js";
-import { useTableFilterContext as T } from "./table-filter.context.js";
-import O from "./filters/text.js";
-import $ from "./filters/boolean.js";
-import A from "./filters/number/number.js";
-import z from "./filters/checkbox.js";
-import j from "../../../assets/icons/circle-check-filled.js";
-import { useClickOutside as B } from "../../../../hooks/useClickOutside.js";
-import { getFilterCount as R } from "./selected-filters-display/selected-filters-display.utils.js";
-const J = ({ filterName: o }) => {
-  const [u, n] = C.useState(!1), m = C.useRef(null);
-  B(m, () => n(!1));
-  const {
-    getFilterForColumn: b,
-    hasAppliedFilterForColumn: x,
-    updateColumnFilter: p,
-    applyFilters: f,
-    schema: F,
-    filterComponents: i = {}
-  } = T(), e = F.find((c) => c.key === o);
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import * as m from "react";
+import { Button as u } from "../../../button/button.js";
+import { useTableFilterContext as K } from "./table-filter.context.js";
+import U from "./filters/text.js";
+import I from "./filters/boolean.js";
+import P from "./filters/number/number.js";
+import V from "./filters/checkbox.js";
+import q from "../../../assets/icons/circle-check-filled.js";
+import { useClickOutside as E } from "../../../../hooks/useClickOutside.js";
+import { getFilterCount as G } from "./selected-filters-display/selected-filters-display.utils.js";
+import { FilterConfirmationDialog as H } from "./close-filter-confirm/filter-confirmation-dialog.js";
+import { hasUnsavedFilterChangesForColumn as b } from "./close-filter-confirm/filter-confirmation-dialog.utils.js";
+const oe = ({ filterName: l }) => {
+  const [a, t] = m.useState(!1), [x, s] = m.useState(!1), h = m.useRef(null), {
+    getFilterForColumn: k,
+    hasAppliedFilterForColumn: y,
+    updateColumnFilter: C,
+    applyFilters: c,
+    resetToAppliedFilters: w,
+    schema: T,
+    filterComponents: d = {},
+    tempFilters: F,
+    filter: g
+  } = K();
+  E(h, () => {
+    b(l, F, g.value) && a ? s(!0) : t(!1);
+  });
+  const A = () => {
+    c(), t(!1);
+  }, O = () => {
+    s(!1), t(!1);
+  }, $ = () => {
+    w(), s(!1), t(!1);
+  }, R = () => {
+    s(!1);
+  }, e = T.find((r) => r.key === l);
   if (!e)
-    return console.warn(`Column "${o}" not found in schema`), null;
+    return console.warn(`Column "${l}" not found in schema`), null;
   if (e.filterable === !1)
-    return console.warn(`Column "${o}" is not filterable`), null;
-  const k = {
-    boolean: $,
-    text: O,
-    number: A,
-    checkbox: z
-  }, h = e.cellType && (i == null ? void 0 : i[e.cellType]) || k[e.cellType ?? "text"];
-  if (!h)
+    return console.warn(`Column "${l}" is not filterable`), null;
+  const z = {
+    boolean: I,
+    text: U,
+    number: P,
+    checkbox: V
+  }, v = e.cellType && (d == null ? void 0 : d[e.cellType]) || z[e.cellType ?? "text"];
+  if (!v)
     return console.warn(
       `No filter component found for column "${e.key}" with cellType "${e.cellType}". Provide a custom filter component or use supported types: "text", "number", "boolean", "checkbox".`
     ), null;
-  const l = b(o), s = x(o), a = l ? R(l, e.filterOptions) : void 0, v = {
-    condition: (l == null ? void 0 : l.condition) || "",
-    value: (l == null ? void 0 : l.value) || ""
-  }, y = () => {
-    p(o, "", ""), f(), n(!1);
-  }, w = () => {
-    f(), n(!1);
+  const o = k(l), f = y(l), p = o ? G(o, e.filterOptions) : void 0, D = {
+    condition: (o == null ? void 0 : o.condition) || "",
+    value: (o == null ? void 0 : o.value) || ""
+  }, j = () => {
+    C(l, "", ""), c(), t(!1);
+  }, B = () => {
+    c(), t(!1);
   };
-  return /* @__PURE__ */ r("div", { className: "relative", ref: m, children: [
-    /* @__PURE__ */ t(
-      d,
+  return /* @__PURE__ */ i("div", { className: "relative", ref: h, children: [
+    /* @__PURE__ */ n(
+      u,
       {
         onClick: () => {
-          n(!u);
+          t(!a);
         },
-        variant: s ? "filled" : "stroke",
-        shade: s ? "brand" : "neutral",
+        variant: f ? "filled" : "stroke",
+        shade: f ? "brand" : "neutral",
         size: "small",
-        children: /* @__PURE__ */ r("span", { className: "flex items-center gap-2", children: [
+        children: /* @__PURE__ */ i("span", { className: "flex items-center gap-2", children: [
           e.title,
-          s && /* @__PURE__ */ t(j, { className: "w-4 h-4 text-white flex-shrink-0" })
+          f && /* @__PURE__ */ n(q, { className: "w-4 h-4 text-white flex-shrink-0" })
         ] })
       }
     ),
-    u && /* @__PURE__ */ r("div", { className: "absolute top-full left-0 mt-2 w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
-      /* @__PURE__ */ t(
-        h,
+    a && /* @__PURE__ */ i("div", { className: "absolute top-full left-0 mt-2 w-80 bg-surface-neutral-default border border-stroke-solid-light rounded-2xl z-10 overflow-hidden shadow-lg", children: [
+      /* @__PURE__ */ n(
+        v,
         {
-          value: v,
-          onChange: ({ condition: c, value: g }) => p(o, c, g),
+          value: D,
+          onChange: ({ condition: r, value: S }) => C(l, r, S),
           filterOptions: e.filterOptions
         }
       ),
-      !!a && /* @__PURE__ */ r("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
-        /* @__PURE__ */ t(d, { onClick: y, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
-        /* @__PURE__ */ t(d, { onClick: w, variant: "filled", shade: "neutral", size: "small", children: `Apply${a !== void 0 ? ` ${a}` : ""}` })
+      !!p && /* @__PURE__ */ i("div", { className: "flex justify-between gap-2 p-3 border-t border-stroke-solid-medium", children: [
+        /* @__PURE__ */ n(u, { onClick: j, variant: "stroke", shade: "neutral", size: "small", children: "Clear All" }),
+        /* @__PURE__ */ n(u, { onClick: B, variant: "filled", shade: "neutral", size: "small", children: `Apply${p !== void 0 ? ` ${p}` : ""}` })
       ] })
-    ] })
+    ] }),
+    x && /* @__PURE__ */ n(
+      H,
+      {
+        onClose: R,
+        onKeepChanges: O,
+        onRevertChanges: $,
+        onApplyChanges: A,
+        hasUnsavedChanges: b(
+          l,
+          F,
+          g.value
+        )
+      }
+    )
   ] });
 };
 export {
-  J as TableFilterColumnButton
+  oe as TableFilterColumnButton
 };

package/dist/components/table/components/table-filter/table-filter.context.d.ts

@@ -9,6 +9,7 @@ export interface TableFilterContextValue {
     hasAppliedFilterForColumn: (columnKey: string) => boolean;
     updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
     clearAllFilters: () => void;
+    resetToAppliedFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
     filterableFields: TableSchema;

package/dist/components/table/components/table-filter/table-filter.hook.d.ts

@@ -9,6 +9,7 @@ declare const useTableFilter: ({ filter, schema }: TableFilterProps) => {
     hasAppliedFilterForColumn: (columnKey: string) => boolean;
     updateColumnFilter: (columnKey: string, condition?: string, value?: string | string[]) => void;
     clearAllFilters: () => void;
+    resetToAppliedFilters: () => void;
     applyFilters: () => void;
     hasActiveFilters: boolean;
     tempFilters: FilterRule[];

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

@@ -1,6 +1,6 @@
 import u from "react";
-const S = ({ filter: l, schema: v }) => {
-  const [i, f] = u.useState(null), [r, n] = u.useState(l.value), a = v.filter((t) => t.filterable !== !1);
+const T = ({ filter: l, schema: v }) => {
+  const [i, f] = u.useState(null), [r, s] = u.useState(l.value), a = v.filter((t) => t.filterable !== !1);
   u.useEffect(() => {
     !i && a.length > 0 && f(a[0].key);
   }, [i, a]);
@@ -11,32 +11,34 @@ const S = ({ filter: l, schema: v }) => {
     const e = m(t);
     return e ? Array.isArray(e.value) ? e.value.length > 0 : e.value !== "" : !1;
   }, g = (t, e, o) => {
-    const d = r.findIndex((s) => s.field === t);
+    const d = r.findIndex((n) => n.field === t);
     if (d >= 0) {
-      const s = r.map(
-        (F, x) => x === d ? {
+      const n = r.map(
+        (F, b) => b === d ? {
           ...F,
           ...e !== void 0 ? { condition: e } : {},
           ...o !== void 0 ? { value: o } : {}
         } : F
       );
-      n(s);
+      s(n);
     } else {
-      const s = {
+      const n = {
         field: t,
         ...e ? { condition: e } : {},
         value: o || ""
       };
-      n([...r, s]);
+      s([...r, n]);
     }
   }, h = () => {
-    n([]);
+    s([]);
   }, C = () => {
+    s(l.value);
+  }, y = () => {
     const t = r.filter((e) => Array.isArray(e.value) ? e.value.length > 0 : e.value !== "");
     l.onChange(t);
-  }, y = l.value.length > 0;
+  }, x = l.value.length > 0;
   return u.useEffect(() => {
-    n(l.value);
+    s(l.value);
   }, [l.value]), {
     selectedColumn: i,
     setSelectedColumn: f,
@@ -45,12 +47,13 @@ const S = ({ filter: l, schema: v }) => {
     hasAppliedFilterForColumn: A,
     updateColumnFilter: g,
     clearAllFilters: h,
-    applyFilters: C,
-    hasActiveFilters: y,
+    resetToAppliedFilters: C,
+    applyFilters: y,
+    hasActiveFilters: x,
     tempFilters: r,
     filterableFields: a
   };
 };
 export {
-  S as default
+  T as default
 };

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

@@ -1,17 +1,17 @@
 import { jsx as r } from "react/jsx-runtime";
 import "react";
-import { cn as a } from "../../../lib/utils.js";
-const l = ({ children: e, className: t = "" }) => /* @__PURE__ */ r(
+import { cn as o } from "../../../lib/utils.js";
+const n = ({ children: e, className: t = "" }) => /* @__PURE__ */ r(
   "div",
   {
-    className: a(
-      "flex justify-between items-center bg-neutral-surface-default gap-3 p-2 pl-4",
+    className: o(
+      "flex justify-between items-center bg-background-neutral-default gap-3 p-2 pl-4",
       t
     ),
     children: e
   }
 );
 export {
-  l as TableFooter,
-  l as default
+  n as TableFooter,
+  n as default
 };

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

@@ -1,38 +1,32 @@
-import { jsx as r, jsxs as c } from "react/jsx-runtime";
+import { jsx as r, jsxs as h } from "react/jsx-runtime";
 import { TABLE_CSS_CLASSES as t } from "../../table.const.js";
-import { TableSortIcon as h } from "./table-sort-icon.js";
-import { getCurrentSortDirection as n, isSortActive as p, handleSortClick as C } from "./table-header.utils.js";
+import { TableSortIcon as n } from "./table-sort-icon.js";
+import { getCurrentSortDirection as p, isSortActive as C, handleSortClick as S } from "./table-header.utils.js";
 import "react";
-import { cn as S } from "../../../../lib/utils.js";
-const x = ({
-  schema: i,
+import { cn as i } from "../../../../lib/utils.js";
+const A = ({
+  schema: o,
   sort: a,
-  cell: o,
-  stickyHeader: s = !1
-}) => /* @__PURE__ */ r(
-  "thead",
-  {
-    className: `${t.header} ${s ? "sticky top-[-1.5px] z-1" : ""}`,
-    children: /* @__PURE__ */ r("tr", { children: i.map((e) => {
-      const l = n(e.key, a), d = p(e.key, a);
-      return /* @__PURE__ */ r(
-        "th",
-        {
-          className: S(
-            e.sortable ? t.sortableHeaderCell : t.headerCell.default,
-            t.headerCell.hasBorder[o.hasBorder ? "true" : "false"]
-          ),
-          onClick: e.sortable ? () => C(e.key, a) : void 0,
-          children: /* @__PURE__ */ c("div", { className: t.headerCellContent, children: [
-            /* @__PURE__ */ r("span", { children: e.title }),
-            e.sortable && /* @__PURE__ */ r(h, { direction: l, isActive: d })
-          ] })
-        },
-        e.key
-      );
-    }) })
-  }
-);
+  cell: s,
+  stickyHeader: l = !1
+}) => /* @__PURE__ */ r("thead", { className: i(t.header, l && "sticky top-0 z-1"), children: /* @__PURE__ */ r("tr", { children: o.map((e) => {
+  const d = p(e.key, a), c = C(e.key, a);
+  return /* @__PURE__ */ r(
+    "th",
+    {
+      className: i(
+        e.sortable ? t.sortableHeaderCell : t.headerCell.default,
+        t.headerCell.hasBorder[s.hasBorder ? "true" : "false"]
+      ),
+      onClick: e.sortable ? () => S(e.key, a) : void 0,
+      children: /* @__PURE__ */ h("div", { className: t.headerCellContent, children: [
+        /* @__PURE__ */ r("span", { children: e.title }),
+        e.sortable && /* @__PURE__ */ r(n, { direction: d, isActive: c })
+      ] })
+    },
+    e.key
+  );
+}) }) });
 export {
-  x as TableHeader
+  A as TableHeader
 };

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

@@ -1,19 +1,23 @@
 export declare const DEFAULT_EMPTY_MESSAGE = "No data available";
 export declare const TABLE_CSS_CLASSES: {
     readonly table: "w-full";
-    readonly header: "bg-background-neutral-medium text-text-neutral-secondary";
+    readonly bordered: {
+        readonly true: "[&_td:first-child]:border-l-1 [&_th:first-child]:border-l-1 ";
+        readonly false: "";
+    };
+    readonly header: "bg-background-neutral-medium text-text-neutral-secondary table-fixed";
     readonly cell: {
-        readonly default: "p-0 align-middle relative h-4";
+        readonly default: "p-0 align-middle relative h-4 ";
         readonly hasBorder: {
-            readonly true: "border-r border-b border-stroke-solid-light";
+            readonly true: "border-r border-b border-stroke-solid-light ";
             readonly false: "border-b border-stroke-solid-light";
         };
     };
     readonly headerCell: {
-        readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider";
+        readonly default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider border-stroke-solid-light";
         readonly hasBorder: {
-            readonly true: "border-none [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
-            readonly false: "border-none [box-shadow:inset_0_-1px_0_0_var(--color-stroke-solid-light)]";
+            readonly true: " [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)] border-stroke-solid-light dark:shadow-none dark:border-0";
+            readonly false: "border-stroke-solid-light ";
         };
     };
     readonly sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200";

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

@@ -1,18 +1,22 @@
 const e = "No data available", t = {
   table: "w-full",
-  header: "bg-background-neutral-medium text-text-neutral-secondary",
+  bordered: {
+    true: "[&_td:first-child]:border-l-1 [&_th:first-child]:border-l-1 ",
+    false: ""
+  },
+  header: "bg-background-neutral-medium text-text-neutral-secondary table-fixed",
   cell: {
-    default: "p-0 align-middle relative h-4",
+    default: "p-0 align-middle relative h-4 ",
     hasBorder: {
-      true: "border-r border-b border-stroke-solid-light",
+      true: "border-r border-b border-stroke-solid-light ",
       false: "border-b border-stroke-solid-light"
     }
   },
   headerCell: {
-    default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider",
+    default: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider border-stroke-solid-light",
     hasBorder: {
-      true: "border-none [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)]",
-      false: "border-none [box-shadow:inset_0_-1px_0_0_var(--color-stroke-solid-light)]"
+      true: " [box-shadow:inset_-1px_0_0_0_var(--color-stroke-solid-light),_inset_0_-1px_0_0_var(--color-stroke-solid-light)] border-stroke-solid-light dark:shadow-none dark:border-0",
+      false: "border-stroke-solid-light "
     }
   },
   sortableHeaderCell: "p-3 text-left text-xs font-medium uppercase tracking-wider cursor-pointer transition-colors duration-200",

package/dist/components/table/table.js

@@ -1,35 +1,46 @@
-import { jsx as e, jsxs as b } from "react/jsx-runtime";
-import * as u from "react";
-import { DEFAULT_EMPTY_MESSAGE as T, TABLE_CSS_CLASSES as h } from "./table.const.js";
-import { TableHeader as g } from "./components/table-header/table-header.js";
-import { TableRow as E } from "./components/table-row.js";
-import { TableEmptyState as y } from "./components/table-empty-state.js";
-import { TableLoadingState as x } from "./components/table-loading-state.js";
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import * as T from "react";
+import { DEFAULT_EMPTY_MESSAGE as g, TABLE_CSS_CLASSES as m } from "./table.const.js";
+import { TableHeader as E } from "./components/table-header/table-header.js";
+import { TableRow as y } from "./components/table-row.js";
+import { TableEmptyState as x } from "./components/table-empty-state.js";
+import { TableLoadingState as B } from "./components/table-loading-state.js";
 import { TableContext as C } from "./table.context.js";
-const w = ({ cell: r = { hasBorder: !0 }, sort: l, className: m, stickyHeader: s = !1, ...n }) => {
-  const c = u.useContext(C), {
-    dataSource: o = [],
-    schema: t = [],
-    loading: i = !1,
-    emptyMessage: f = T,
-    customCells: p
-  } = c || n, d = () => i ? /* @__PURE__ */ e(x, { colSpan: t.length }) : !o || o.length === 0 ? /* @__PURE__ */ e(y, { colSpan: t.length, message: f }) : /* @__PURE__ */ e("tbody", { children: o.map((S, a) => /* @__PURE__ */ e(
-    E,
+import { cn as s } from "../../lib/utils.js";
+const R = ({ cell: o = { hasBorder: !0 }, sort: n, className: f, stickyHeader: d = !1, ...i }) => {
+  const c = T.useContext(C), {
+    dataSource: t = [],
+    schema: r = [],
+    loading: a = !1,
+    emptyMessage: p = g,
+    customCells: u
+  } = c || i, S = () => a ? /* @__PURE__ */ e(B, { colSpan: r.length }) : !t || t.length === 0 ? /* @__PURE__ */ e(x, { colSpan: r.length, message: p }) : /* @__PURE__ */ e("tbody", { children: t.map((b, l) => /* @__PURE__ */ e(
+    y,
     {
-      record: S,
-      index: a,
-      schema: t,
-      customCells: p,
-      cell: r
+      record: b,
+      index: l,
+      schema: r,
+      customCells: u,
+      cell: o
     },
-    a
+    l
   )) });
-  return /* @__PURE__ */ e("div", { className: `${m} overflow-y-auto`, children: /* @__PURE__ */ b("table", { className: h.table, children: [
-    /* @__PURE__ */ e(g, { schema: t, sort: l, cell: r, stickyHeader: s }),
-    d()
-  ] }) });
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: s(
+        "overflow-y-auto",
+        m.bordered[o.hasBorder && !a && t.length > 0 ? "true" : "false"],
+        f
+      ),
+      children: /* @__PURE__ */ h("table", { className: s(m.table, "w-full"), children: [
+        /* @__PURE__ */ e(E, { schema: r, sort: n, cell: o, stickyHeader: d }),
+        S()
+      ] })
+    }
+  );
 };
 export {
-  w as TableBody,
-  w as default
+  R as TableBody,
+  R as default
 };

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

@@ -111,7 +111,7 @@ const dt = ({
         sort: r == null ? void 0 : r.sort,
         className: n(
           "flex-1 min-h-0",
-          h && "border-stroke-solid-light border-b-1 border-x-1 border-t-0",
+          h && "border-stroke-solid-light border-1",
           d && !(C && g) && "rounded-t-xl",
           d && !(x && p) && "rounded-b-xl",
           h && "[&_td:first-child]:border-l-0 [&_td:last-child]:border-r-0",
@@ -125,7 +125,7 @@ const dt = ({
       t.Footer,
       {
         className: n(
-          "flex-shrink-0 border-stroke-solid-light border-t-[0.5px]",
+          "flex-shrink-0 border-stroke-solid-light border-t-[0.5px] mt-[-2px]",
           h && "border",
           d && "rounded-b-xl",
           k

package/dist/components/tooltip/tooltip.js

@@ -1,32 +1,34 @@
-import { jsx as o, jsxs as t } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-tooltip";
-import { cn as s } from "../../lib/utils.js";
-const c = ({
-  message: e,
+import { jsx as a, jsxs as t } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-tooltip";
+import { cn as n } from "../../lib/utils.js";
+const p = ({
+  message: d,
   children: i,
-  delayDuration: n = 300,
-  side: a = "top",
-  className: l,
-  ...d
-}) => /* @__PURE__ */ o(r.Provider, { delayDuration: n, children: /* @__PURE__ */ t(r.Root, { children: [
-  /* @__PURE__ */ o(r.Trigger, { asChild: !0, children: i }),
-  /* @__PURE__ */ o(r.Portal, { children: /* @__PURE__ */ t(
-    r.Content,
+  delayDuration: o = 300,
+  side: l = void 0,
+  className: r,
+  ...s
+}) => /* @__PURE__ */ a(e.Provider, { delayDuration: o, children: /* @__PURE__ */ t(e.Root, { children: [
+  /* @__PURE__ */ a(e.Trigger, { asChild: !0, children: i }),
+  /* @__PURE__ */ a(e.Portal, { children: /* @__PURE__ */ t(
+    e.Content,
     {
-      side: a,
-      className: s(
-        "bg-[var(--color-neutral-950)] border-none text-white leading-none-regular-sm z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
-        l
+      side: l,
+      sideOffset: 4,
+      className: n(
+        "bg-tooltip-surface text-white leading-none-regular-sm rounded-md px-2 py-2",
+        "will-change-[transform,opacity] data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade",
+        r
       ),
-      ...d,
+      ...s,
       children: [
-        e,
-        /* @__PURE__ */ o(r.Arrow, { className: "bg-[var(--color-neutral-950)] z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+        d,
+        /* @__PURE__ */ a(e.Arrow, { className: "fill-tooltip-surface" })
       ]
     }
   ) })
 ] }) });
-c.displayName = "Z2Tooltip";
+p.displayName = "Z2Tooltip";
 export {
-  c as Z2Tooltip
+  p as Z2Tooltip
 };

package/dist/css/config/colors/backgrounds.css

@@ -1,32 +1,32 @@
 /* neutral */
 @utility bg-neutral-default {
-  background-color: var(--color-neutral-00);
+  background-color: var(--color-background-neutral-default);
 }
 
 @utility bg-neutral-on-top {
-  background-color: var(--color-neutral-00);
+  background-color: var(--color-background-neutral-on-top);
 }
 
 @utility bg-neutral-light {
-  background-color: var(--color-neutral-25);
+  background-color: var(--color-background-neutral-light);
 }
 
 @utility bg-neutral-high {
-  background-color: var(--color-neutral-100);
+  background-color: var(--color-background-neutral-high);
 }
 
 @utility bg-neutral-medium {
-  background-color: var(--color-neutral-50);
+  background-color: var(--color-background-neutral-medium);
 }
 
 @utility bg-neutral-inverted-elevated {
-  background-color: var(--color-alpha-two-100);
+  background-color: var(--color-surface-inverted-default);
 }
 
 @utility bg-neutral-inverted-attention {
-  background-color: var(--color-alpha-two-200);
+  background-color: var(--color-surface-inverted-hover);
 }
 
 @utility bg-neutral-inverted-brand {
-  background-color: #001534;
+  background-color: var(--color-surface-accent-default);
 }