@tracktor/design-system 4.8.1 → 4.8.2

package/dist/main.js

@@ -97,7 +97,7 @@ function L1() {
           return "StrictMode";
         case l:
           return "Suspense";
-        case k:
+        case S:
           return "SuspenseList";
         case L:
           return "Activity";
@@ -158,7 +158,7 @@ function L1() {
       }
     }
     function o() {
-      var g = S.A;
+      var g = k.A;
       return g === null ? null : g.getOwner();
     }
     function i() {
@@ -274,7 +274,7 @@ React keys must be passed directly to JSX without using spread:
     function f(g) {
       typeof g == "object" && g !== null && g.$$typeof === y && g._store && (g._store.validated = 1);
     }
-    var v = k1, y = Symbol.for("react.transitional.element"), C = Symbol.for("react.portal"), u = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), h = Symbol.for("react.context"), w = Symbol.for("react.forward_ref"), l = Symbol.for("react.suspense"), k = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), H = Symbol.for("react.lazy"), L = Symbol.for("react.activity"), $ = Symbol.for("react.client.reference"), S = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, U = Array.isArray, Y = console.createTask ? console.createTask : function() {
+    var v = k1, y = Symbol.for("react.transitional.element"), C = Symbol.for("react.portal"), u = Symbol.for("react.fragment"), m = Symbol.for("react.strict_mode"), I = Symbol.for("react.profiler"), B = Symbol.for("react.consumer"), h = Symbol.for("react.context"), w = Symbol.for("react.forward_ref"), l = Symbol.for("react.suspense"), S = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), H = Symbol.for("react.lazy"), L = Symbol.for("react.activity"), $ = Symbol.for("react.client.reference"), k = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, P = Object.prototype.hasOwnProperty, U = Array.isArray, Y = console.createTask ? console.createTask : function() {
       return null;
     };
     v = {
@@ -287,7 +287,7 @@ React keys must be passed directly to JSX without using spread:
       i
     )(), G = Y(n(i)), Ae = {};
     Ve.Fragment = u, Ve.jsx = function(g, b, M, O, D) {
-      var te = 1e4 > S.recentlyCreatedOwnerStacks++;
+      var te = 1e4 > k.recentlyCreatedOwnerStacks++;
       return p(
         g,
         b,
@@ -299,7 +299,7 @@ React keys must be passed directly to JSX without using spread:
         te ? Y(n(g)) : G
       );
     }, Ve.jsxs = function(g, b, M, O, D) {
-      var te = 1e4 > S.recentlyCreatedOwnerStacks++;
+      var te = 1e4 > k.recentlyCreatedOwnerStacks++;
       return p(
         g,
         b,
@@ -511,7 +511,7 @@ function $1(e) {
   return Jr(iA("", null, null, null, [""], e = zr(e), 0, [0], e));
 }
 function iA(e, A, r, n, o, i, s, a, d) {
-  for (var c = 0, p = 0, f = s, v = 0, y = 0, C = 0, u = 1, m = 1, I = 1, B = 0, h = "", w = o, l = i, k = n, E = h; m; )
+  for (var c = 0, p = 0, f = s, v = 0, y = 0, C = 0, u = 1, m = 1, I = 1, B = 0, h = "", w = o, l = i, S = n, E = h; m; )
     switch (C = B, B = de()) {
       // (
       case 40:
@@ -568,9 +568,9 @@ function iA(e, A, r, n, o, i, s, a, d) {
             E += ";";
           // { rule/at-rule
           default:
-            if (rA(k = lr(E, A, r, c, p, o, a, h, w = [], l = [], f), i), B === 123)
+            if (rA(S = lr(E, A, r, c, p, o, a, h, w = [], l = [], f), i), B === 123)
               if (p === 0)
-                iA(E, A, k, k, w, i, f, a, l);
+                iA(E, A, S, S, w, i, f, a, l);
               else
                 switch (v === 99 && re(E, 3) === 110 ? 100 : v) {
                   // d l m s
@@ -578,10 +578,10 @@ function iA(e, A, r, n, o, i, s, a, d) {
                   case 108:
                   case 109:
                   case 115:
-                    iA(e, k, k, n && rA(lr(e, k, k, 0, 0, o, a, h, o, w = [], f), l), o, l, f, a, n ? w : l);
+                    iA(e, S, S, n && rA(lr(e, S, S, 0, 0, o, a, h, o, w = [], f), l), o, l, f, a, n ? w : l);
                     break;
                   default:
-                    iA(E, k, k, k, [""], l, 0, a, l);
+                    iA(E, S, S, S, [""], l, 0, a, l);
                 }
         }
         c = p = y = 0, u = I = 1, h = E = "", f = s;
@@ -952,8 +952,8 @@ function dt() {
   var e = typeof Symbol == "function" && Symbol.for, A = e ? Symbol.for("react.element") : 60103, r = e ? Symbol.for("react.portal") : 60106, n = e ? Symbol.for("react.fragment") : 60107, o = e ? Symbol.for("react.strict_mode") : 60108, i = e ? Symbol.for("react.profiler") : 60114, s = e ? Symbol.for("react.provider") : 60109, a = e ? Symbol.for("react.context") : 60110, d = e ? Symbol.for("react.async_mode") : 60111, c = e ? Symbol.for("react.concurrent_mode") : 60111, p = e ? Symbol.for("react.forward_ref") : 60112, f = e ? Symbol.for("react.suspense") : 60113, v = e ? Symbol.for("react.suspense_list") : 60120, y = e ? Symbol.for("react.memo") : 60115, C = e ? Symbol.for("react.lazy") : 60116, u = e ? Symbol.for("react.block") : 60121, m = e ? Symbol.for("react.fundamental") : 60117, I = e ? Symbol.for("react.responder") : 60118, B = e ? Symbol.for("react.scope") : 60119;
   function h(l) {
     if (typeof l == "object" && l !== null) {
-      var k = l.$$typeof;
-      switch (k) {
+      var S = l.$$typeof;
+      switch (S) {
         case A:
           switch (l = l.type, l) {
             case d:
@@ -972,11 +972,11 @@ function dt() {
                 case s:
                   return l;
                 default:
-                  return k;
+                  return S;
               }
           }
         case r:
-          return k;
+          return S;
       }
     }
   }
@@ -1060,7 +1060,7 @@ function pt() {
         }
       }
     }
-    var l = d, k = c, E = a, H = s, L = A, $ = p, S = n, P = C, U = y, Y = r, K = i, N = o, _ = f, G = !1;
+    var l = d, S = c, E = a, H = s, L = A, $ = p, k = n, P = C, U = y, Y = r, K = i, N = o, _ = f, G = !1;
     function Ae(R) {
       return G || (G = !0, console.warn("The ReactIs.isAsyncMode() alias has been deprecated, and will be removed in React 17+. Update your code to use ReactIs.isConcurrentMode() instead. It has the exact same API.")), g(R) || w(R) === d;
     }
@@ -1100,7 +1100,7 @@ function pt() {
     function yA(R) {
       return w(R) === f;
     }
-    j.AsyncMode = l, j.ConcurrentMode = k, j.ContextConsumer = E, j.ContextProvider = H, j.Element = L, j.ForwardRef = $, j.Fragment = S, j.Lazy = P, j.Memo = U, j.Portal = Y, j.Profiler = K, j.StrictMode = N, j.Suspense = _, j.isAsyncMode = Ae, j.isConcurrentMode = g, j.isContextConsumer = b, j.isContextProvider = M, j.isElement = O, j.isForwardRef = D, j.isFragment = te, j.isLazy = ae, j.isMemo = be, j.isPortal = q, j.isProfiler = ve, j.isStrictMode = Oe, j.isSuspense = yA, j.isValidElementType = h, j.typeOf = w;
+    j.AsyncMode = l, j.ConcurrentMode = S, j.ContextConsumer = E, j.ContextProvider = H, j.Element = L, j.ForwardRef = $, j.Fragment = k, j.Lazy = P, j.Memo = U, j.Portal = Y, j.Profiler = K, j.StrictMode = N, j.Suspense = _, j.isAsyncMode = Ae, j.isConcurrentMode = g, j.isContextConsumer = b, j.isContextProvider = M, j.isElement = O, j.isForwardRef = D, j.isFragment = te, j.isLazy = ae, j.isMemo = be, j.isPortal = q, j.isProfiler = ve, j.isStrictMode = Oe, j.isSuspense = yA, j.isValidElementType = h, j.typeOf = w;
   }()), j;
 }
 var fr;
@@ -1159,11 +1159,11 @@ function ft() {
       var B = d(u);
       c && (B = B.concat(c(u)));
       for (var h = s(C), w = s(u), l = 0; l < B.length; ++l) {
-        var k = B[l];
-        if (!r[k] && !(m && m[k]) && !(w && w[k]) && !(h && h[k])) {
-          var E = p(u, k);
+        var S = B[l];
+        if (!r[S] && !(m && m[S]) && !(w && w[S]) && !(h && h[S])) {
+          var E = p(u, S);
           try {
-            a(C, k, E);
+            a(C, S, E);
           } catch {
           }
         }
@@ -1491,7 +1491,7 @@ const mr = 32, Pt = 24, Tt = 105, Lt = 24, Dt = 195, Ht = 44, Ot = 147, Qt = ()
     getTextColor: A
   };
 }, Vt = ({ colorShape: e, shapeBackgroundColor: A, color: r, height: n, width: o, withoutText: i, mode: s, sx: a, variant: d = "default", component: c = "img" }, p) => {
-  const [f, v] = W(""), { palette: y } = fe(), { getTextColor: C, getImageModule: u, getSize: m, getShapeColor: I, getShapeBackgroundColor: B } = Qt(), { height: h, width: w } = m({ height: n, variant: d, width: o, withoutText: i }), l = C(r), k = I(e), E = B(A);
+  const [f, v] = W(""), { palette: y } = fe(), { getTextColor: C, getImageModule: u, getSize: m, getShapeColor: I, getShapeBackgroundColor: B } = Qt(), { height: h, width: w } = m({ height: n, variant: d, width: o, withoutText: i }), l = C(r), S = I(e), E = B(A);
   if (qA(() => {
     c !== "svg" && (async () => {
       const H = await u(d, s || y.mode, i);
@@ -1651,20 +1651,20 @@ const mr = 32, Pt = 24, Tt = 105, Lt = 24, Dt = 195, Ht = 44, Ot = 147, Qt = ()
           }
         ),
         /* @__PURE__ */ x("g", { clipPath: "url(#clip0_14141_226706)", children: [
-          /* @__PURE__ */ t("path", { d: "M12.3637 4C12.3629 4 12.3622 4 12.3615 4V11.6381H20C19.9993 7.41966 16.5811 4 12.3637 4Z", fill: k }),
-          /* @__PURE__ */ t("path", { d: "M4.0022 4C4.00147 4 4.00073 4 4 4V11.6381H11.6386C11.6378 7.41966 8.2196 4 4.0022 4Z", fill: k }),
+          /* @__PURE__ */ t("path", { d: "M12.3637 4C12.3629 4 12.3622 4 12.3615 4V11.6381H20C19.9993 7.41966 16.5811 4 12.3637 4Z", fill: S }),
+          /* @__PURE__ */ t("path", { d: "M4.0022 4C4.00147 4 4.00073 4 4 4V11.6381H11.6386C11.6378 7.41966 8.2196 4 4.0022 4Z", fill: S }),
           /* @__PURE__ */ t(
             "path",
             {
               d: "M11.6364 12.3619C11.6371 12.3619 11.6378 12.3619 11.6386 12.3619V20H4C4.00073 15.7816 7.41898 12.3619 11.6364 12.3619Z",
-              fill: k
+              fill: S
             }
           ),
           /* @__PURE__ */ t(
             "path",
             {
               d: "M19.9978 12.3619C19.9986 12.3619 19.9993 12.3619 20 12.3619V20H12.3615C12.3622 15.7816 15.7804 12.3619 19.9978 12.3619Z",
-              fill: k
+              fill: S
             }
           )
         ] }),
@@ -1765,20 +1765,20 @@ const mr = 32, Pt = 24, Tt = 105, Lt = 24, Dt = 195, Ht = 44, Ot = 147, Qt = ()
           }
         ),
         /* @__PURE__ */ x("g", { clipPath: "url(#clip0_14141_226601)", children: [
-          /* @__PURE__ */ t("path", { d: "M12.3637 4C12.3629 4 12.3622 4 12.3615 4V11.6381H20C19.9993 7.41966 16.5811 4 12.3637 4Z", fill: k }),
-          /* @__PURE__ */ t("path", { d: "M4.0022 4C4.00147 4 4.00073 4 4 4V11.6381H11.6386C11.6378 7.41966 8.2196 4 4.0022 4Z", fill: k }),
+          /* @__PURE__ */ t("path", { d: "M12.3637 4C12.3629 4 12.3622 4 12.3615 4V11.6381H20C19.9993 7.41966 16.5811 4 12.3637 4Z", fill: S }),
+          /* @__PURE__ */ t("path", { d: "M4.0022 4C4.00147 4 4.00073 4 4 4V11.6381H11.6386C11.6378 7.41966 8.2196 4 4.0022 4Z", fill: S }),
           /* @__PURE__ */ t(
             "path",
             {
               d: "M11.6364 12.3619C11.6371 12.3619 11.6378 12.3619 11.6386 12.3619V20H4C4.00073 15.7816 7.41898 12.3619 11.6364 12.3619Z",
-              fill: k
+              fill: S
             }
           ),
           /* @__PURE__ */ t(
             "path",
             {
               d: "M19.9978 12.3619C19.9986 12.3619 19.9993 12.3619 20 12.3619V20H12.3615C12.3622 15.7816 15.7804 12.3619 19.9978 12.3619Z",
-              fill: k
+              fill: S
             }
           )
         ] }),
@@ -2142,8 +2142,8 @@ const mr = 32, Pt = 24, Tt = 105, Lt = 24, Dt = 195, Ht = 44, Ot = 147, Qt = ()
         y && h && /* @__PURE__ */ t(T, { p: 2, children: y }),
         /* @__PURE__ */ t(T, { flex: 1, children: e }),
         p && /* @__PURE__ */ t(Q, { sx: ke.bottomLinkWrapper, spacing: 1, whiteSpace: "nowrap", children: Array.isArray(p) ? p.map((w, l) => {
-          const k = typeof w == "object" && "url" in w ? `$${w.url}-${l}` : l;
-          return /* @__PURE__ */ t(br, { link: w, NavLink: f, isCollapsed: a, sx: ke }, k);
+          const S = typeof w == "object" && "url" in w ? `$${w.url}-${l}` : l;
+          return /* @__PURE__ */ t(br, { link: w, NavLink: f, isCollapsed: a, sx: ke }, S);
         }) : /* @__PURE__ */ t(br, { link: p, NavLink: f, isCollapsed: a, sx: ke }) }),
         /* @__PURE__ */ t(JA, {}),
         /* @__PURE__ */ t(T, { display: "flex", justifyContent: "flex-end", children: /* @__PURE__ */ t(
@@ -2278,7 +2278,7 @@ const mr = 32, Pt = 24, Tt = 105, Lt = 24, Dt = 195, Ht = 44, Ot = 147, Qt = ()
   }, []), h = oe(() => {
     u(!0);
   }, []), w = oe(() => {
-    I((k) => !k);
+    I((S) => !S);
   }, []), l = We(
     () => ({
       AppBar: e,
@@ -2802,7 +2802,7 @@ const an = (e, A) => {
   height: C = 152,
   width: u = 220
 }) => {
-  const [m, I] = W(!1), [B, h] = W(!1), [w, l] = W(!0), k = e?.toLowerCase(), E = !k?.endsWith(".pdf") && !k?.startsWith("blob:") && !k?.endsWith(".eml"), H = k?.endsWith(".pdf"), L = d ? 1 : 0.8, $ = c ? !0 : !w, S = NA(e) || NA(A), P = (E || H) && !S && $ && !B && !d && e, U = e?.split(".").pop()?.toLowerCase(), Y = r || e?.split("/").pop()?.split("?")[0] || "", K = () => S ? e1 : B ? ln : A || e || void 0, N = () => {
+  const [m, I] = W(!1), [B, h] = W(!1), [w, l] = W(!0), S = e?.toLowerCase(), E = !S?.endsWith(".pdf") && !S?.startsWith("blob:") && !S?.endsWith(".eml"), H = S?.endsWith(".pdf"), L = d ? 1 : 0.8, $ = c ? !0 : !w, k = NA(e) || NA(A), P = (E || H) && !k && $ && !B && !d && e, U = e?.split(".").pop()?.toLowerCase(), Y = r || e?.split("/").pop()?.split("?")[0] || "", K = () => k ? e1 : B ? ln : A || e || void 0, N = () => {
     I((b) => !b);
   }, _ = () => {
     I(!1), f?.();
@@ -2812,14 +2812,14 @@ const an = (e, A) => {
     l(!1);
   };
   return /* @__PURE__ */ x(he, { children: [
-    !c && !n && /* @__PURE__ */ t(MA, { title: S ? Y : "", children: /* @__PURE__ */ x(
+    !c && !n && /* @__PURE__ */ t(MA, { title: k ? Y : "", children: /* @__PURE__ */ x(
       T,
       {
         "data-test": "fileViewer",
         width: u,
         height: C,
         onClick: async () => {
-          if (S && e) {
+          if (k && e) {
             const M = await (await fetch(e)).blob(), O = window.URL.createObjectURL(M), D = document.createElement("a");
             D.href = O, D.download = Y, D.target = "_blank", document.body.appendChild(D), D.click(), setTimeout(() => {
               document.body.removeChild(D), window.URL.revokeObjectURL(O);
@@ -2848,13 +2848,13 @@ const an = (e, A) => {
               onLoad: Ae,
               sx: {
                 ...Ne.thumb,
-                objectFit: S ? "contain" : "cover",
-                padding: S ? "15%" : 0
+                objectFit: k ? "contain" : "cover",
+                padding: k ? "15%" : 0
               }
             },
             K()
           ),
-          S && /* @__PURE__ */ t(J, { sx: Ne.extension, variant: "body3", color: "black", children: U })
+          k && /* @__PURE__ */ t(J, { sx: Ne.extension, variant: "body3", color: "black", children: U })
         ]
       }
     ) }),
@@ -3132,7 +3132,7 @@ const an = (e, A) => {
   ] }) }) : !e?.length && !A ? /* @__PURE__ */ t(SA, { sx: n, children: /* @__PURE__ */ t(YA, { severity: "info", children: r }) }) : /* @__PURE__ */ x(he, { children: [
     /* @__PURE__ */ t(SA, { sx: n, "data-test": i, "data-testid": s, children: e?.map(
       ({ Action: c, Collapse: p, collapseItems: f, collapseDefaultOpen: v, subtitle: y, key: C, active: u, Footer: m, Icon: I, onClick: B, tag: h, title: w }, l) => {
-        const k = `${C}-${l}-${w}`, E = l === e.length - 1;
+        const S = `${C}-${l}-${w}`, E = l === e.length - 1;
         return /* @__PURE__ */ t(
           dn,
           {
@@ -3150,7 +3150,7 @@ const an = (e, A) => {
             tag: h,
             variant: o
           },
-          k
+          S
         );
       }
     ) }),
@@ -3547,7 +3547,7 @@ const an = (e, A) => {
   position: v = "static",
   elevation: y = 0
 }) => {
-  const { breakpoints: C } = fe(), { closeMenu: u, isMenuOpen: m, anchorMenu: I, openMenu: B } = A1(), { menuItems: h, ...w } = i || {}, l = Je(C.down("sm")), k = Je(C.between("sm", "md")), E = l || k, H = {
+  const { breakpoints: C } = fe(), { closeMenu: u, isMenuOpen: m, anchorMenu: I, openMenu: B } = A1(), { menuItems: h, ...w } = i || {}, l = Je(C.down("sm")), S = Je(C.between("sm", "md")), E = l || S, H = {
     logoContainer: {
       a: {
         display: "flex"
@@ -3624,12 +3624,12 @@ const an = (e, A) => {
           if (Ye(L)) {
             if (L.key)
               return L;
-            const S = `${h}-${$}`;
-            return XA(L, { key: S });
+            const k = `${h}-${$}`;
+            return XA(L, { key: k });
           }
           if (L && typeof L == "object" && "url" in L) {
-            const { url: S, label: P, icon: U, active: Y, end: K, state: N } = L, _ = `${S}-${P}-${$}`;
-            return /* @__PURE__ */ t(Dr, { sx: H.menuItem, onClick: u, children: /* @__PURE__ */ x(er, { url: S, component: o, active: Y, end: K, state: N, children: [
+            const { url: k, label: P, icon: U, active: Y, end: K, state: N } = L, _ = `${k}-${P}-${$}`;
+            return /* @__PURE__ */ t(Dr, { sx: H.menuItem, onClick: u, children: /* @__PURE__ */ x(er, { url: k, component: o, active: Y, end: K, state: N, children: [
               U && /* @__PURE__ */ t(Hr, { children: U }),
               P && /* @__PURE__ */ t(Ee, { children: P })
             ] }, _) }, _);
@@ -4791,7 +4791,7 @@ const an = (e, A) => {
     value: m,
     variant: I = "vertical"
   }, B) => {
-    const [h, w] = W(null), { t: l } = tr(), { palette: k } = fe(), E = I === "vertical", H = a || A, L = LA(null), $ = LA(null), S = m !== void 0 ? m : h, P = Rn(S);
+    const [h, w] = W(null), { t: l } = tr(), { palette: S } = fe(), E = I === "vertical", H = a || A, L = LA(null), $ = LA(null), k = m !== void 0 ? m : h, P = Rn(k);
     B1(B, () => {
       const N = $.current;
       return N.reset = () => {
@@ -4819,9 +4819,9 @@ const an = (e, A) => {
         },
         sx: {
           "&:hover, &:focus": {
-            borderColor: k.primary.main
+            borderColor: S.primary.main
           },
-          border: `1px dashed ${o ? k.error.main : k.divider}`,
+          border: `1px dashed ${o ? S.error.main : S.divider}`,
           borderRadius: 1,
           cursor: "pointer",
           height: Bn(d, I),
@@ -4845,7 +4845,7 @@ const an = (e, A) => {
                 f || /* @__PURE__ */ t(mn, { sx: { height: 40, width: 40 } }),
                 P ? /* @__PURE__ */ x(he, { children: [
                   /* @__PURE__ */ x(J, { variant: "body2", color: "textSecondary", children: [
-                    S?.length,
+                    k?.length,
                     " ",
                     i?.files || l("files")
                   ] }),
@@ -4958,8 +4958,8 @@ const an = (e, A) => {
       },
       children: [
         r?.map(
-          ({ id: f, title: v, subtitle: y, image: C, thumbnail: u, secondaryAction: m, chipLabel: I, chipColor: B, onClick: h, icon: w, Avatar: l }, k) => {
-            const E = `key-${k}-${v}-${f}`, H = !!C?.toLowerCase()?.endsWith(".pdf"), L = Mr(C), $ = Mr(u), S = NA(C), P = h ? "none" : void 0, U = a || !!w || !L || S, Y = !!h || !!(!h && !a && (u || C)), K = c === E, G = ($ ? u : "") || (L ? C : "") || "";
+          ({ id: f, title: v, subtitle: y, image: C, thumbnail: u, secondaryAction: m, chipLabel: I, chipColor: B, onClick: h, icon: w, Avatar: l }, S) => {
+            const E = `key-${S}-${v}-${f}`, H = !!C?.toLowerCase()?.endsWith(".pdf"), L = Mr(C), $ = Mr(u), k = NA(C), P = h ? "none" : void 0, U = a || !!w || !L || k, Y = !!h || !!(!h && !a && (u || C)), K = c === E, G = ($ ? u : "") || (L ? C : "") || "";
             return /* @__PURE__ */ x(
               Ie,
               {
@@ -4972,7 +4972,7 @@ const an = (e, A) => {
                     ...y && { subtitle: y },
                     ...u && { thumbnail: u },
                     ...v && { thumbnail: u },
-                    isFile: S,
+                    isFile: k,
                     isPdf: H
                   }), Y && !K && !h && p(E);
                 },
@@ -5022,17 +5022,17 @@ const an = (e, A) => {
                       children: /* @__PURE__ */ t(
                         Se,
                         {
-                          src: S ? e1 : G,
+                          src: k ? e1 : G,
                           variant: "rounded",
                           sx: { marginRight: Ze },
                           slotProps: {
                             img: {
                               sx: {
-                                ...S && { padding: "15%" }
+                                ...k && { padding: "15%" }
                               }
                             }
                           },
-                          children: !S && (w || typeof v == "string" && (v || "")?.charAt(0).toUpperCase())
+                          children: !k && (w || typeof v == "string" && (v || "")?.charAt(0).toUpperCase())
                         }
                       )
                     }
@@ -5226,12 +5226,12 @@ const an = (e, A) => {
   width: h,
   sx: w,
   size: l = "small",
-  disableCloseOnSelect: k = !0,
+  disableCloseOnSelect: S = !0,
   multiple: E = !0,
   options: H = [],
   slotProps: L,
   ...$
-}, S) => {
+}, k) => {
   const [P, U] = W(!1), [Y, K] = W(""), N = y || Y, _ = e === "chip", G = Array.isArray(a) ? !!a.length : a != null, Ae = Pn(a, E);
   return /* @__PURE__ */ t(
     h1,
@@ -5242,15 +5242,15 @@ const an = (e, A) => {
       value: Ae,
       options: H,
       loading: u,
-      ref: S,
+      ref: k,
       size: l,
-      disableCloseOnSelect: k,
+      disableCloseOnSelect: S,
       onChange: (b, M, O, D) => {
         if (M === null) {
           A?.(b, E ? [] : null, O, D);
           return;
         }
-        A?.(b, M, O, D), (!k || !E) && U(!1);
+        A?.(b, M, O, D), (!S || !E) && U(!1);
       },
       getLimitTagsText: Tn(e),
       inputValue: N,
@@ -5666,7 +5666,8 @@ const an = (e, A) => {
       ] })
     ]
   }
-), uo = ({
+);
+function uo({
   label: e,
   value: A,
   onChange: r,
@@ -5678,32 +5679,32 @@ const an = (e, A) => {
   separatorBetweenLabelAndOptionSelected: d = ":",
   multiple: c = !1,
   size: p = "medium"
-}) => {
-  const [f, v] = W(() => c ? A || [] : A), y = c ? A?.length > 0 : !!A, { anchorMenu: C, openMenu: u, isMenuOpen: m, closeMenu: I } = A1(), { t: B } = tr(), h = Array.isArray(n), w = () => {
+}) {
+  const [f, v] = W(() => c ? A || [] : A), y = c ? A?.length > 0 : A != null, { anchorMenu: C, openMenu: u, isMenuOpen: m, closeMenu: I } = A1(), { t: B } = tr(), h = Array.isArray(n), w = () => {
     (c || f !== void 0) && r?.(f), I();
   }, l = () => {
     if (c) {
-      const S = [];
-      v(S), r?.(S);
+      const k = [];
+      v(k), r?.(k);
     } else
       v(void 0), r?.(void 0);
     I();
-  }, k = (S) => {
+  }, S = (k) => {
     if (h) {
-      u(S);
+      u(k);
       return;
     }
     if (!h) {
-      const P = A ? void 0 : n?.value;
-      r?.(c ? P ? [P] : [] : P);
+      const P = A != null ? void 0 : n?.value;
+      r?.(c ? P !== void 0 ? [P] : [] : P);
     }
-  }, E = (S) => {
+  }, E = (k) => {
     if (c) {
-      const P = f || [], U = P.includes(S) ? P.filter((Y) => Y !== S) : [...P, S];
+      const P = f || [], U = P.includes(k) ? P.filter((Y) => Y !== k) : [...P, k];
       v(U);
     } else
-      v(S);
-  }, H = (S) => c ? f?.includes(S) || !1 : f === S, L = (S) => h ? `${s ? `${s} ${d} ` : ""}${n.find((P) => P.value === S)?.label || ""}` : n?.label;
+      v(k);
+  }, H = (k) => c ? f?.includes(k) || !1 : f === k, L = (k) => h ? `${s ? `${s} ${d} ` : ""}${n.find((P) => P.value === k)?.label || ""}` : n?.label;
   return /* @__PURE__ */ x(he, { children: [
     /* @__PURE__ */ t(
       Te,
@@ -5712,19 +5713,19 @@ const an = (e, A) => {
         size: p,
         label: (() => {
           if (a && y) {
-            const P = (A || []).length;
+            const k = A || [], P = Array.isArray(k) ? k.length : 1;
             return `${e || s}${c && P > 1 ? ` (${P})` : ""}`;
           }
           if (c && y) {
-            const S = A || [], P = S.length;
+            const k = A || [], P = k.length;
             if (P === 1)
-              return L(S[0]) || e;
+              return L(k[0]) || e;
             if (P > 1) {
-              const U = L(S[0]), Y = P - 1;
-              return `${U || S[0]}... (+${Y})`;
+              const U = L(k[0]), Y = P - 1;
+              return `${U || String(k[0])}... (+${Y})`;
             }
           }
-          return !c && A && h && L(A) || e;
+          return !c && A !== void 0 && A !== null && h && L(A) || e;
         })(),
         variant: o,
         deleteIcon: h ? /* @__PURE__ */ t(
@@ -5738,7 +5739,7 @@ const an = (e, A) => {
             }
           }
         ) : void 0,
-        onClick: k,
+        onClick: S,
         onDelete: h ? () => {
         } : void 0,
         color: y ? "active" : "default"
@@ -5762,11 +5763,11 @@ const an = (e, A) => {
             /* @__PURE__ */ t(Ee, { children: s }),
             /* @__PURE__ */ t(ue, { onClick: I, children: /* @__PURE__ */ t(_e, { fontSize: "small" }) })
           ] }),
-          n.map((S, P) => {
-            const U = `${S.id || S.value}-${P}`, Y = H(S.value);
-            return /* @__PURE__ */ x(Dr, { onClick: () => E(S.value), children: [
+          n.map((k, P) => {
+            const U = `${k.id || k.value}-${P}`, Y = H(k.value);
+            return /* @__PURE__ */ x(Dr, { onClick: () => E(k.value), children: [
               /* @__PURE__ */ t(Hr, { children: c ? /* @__PURE__ */ t(cA, { disableRipple: !0, checked: Y, sx: { padding: 0 } }) : /* @__PURE__ */ t(E1, { disableRipple: !0, checked: Y, sx: { padding: 0 } }) }),
-              /* @__PURE__ */ t(Ee, { sx: { color: "text.secondary" }, children: S.label })
+              /* @__PURE__ */ t(Ee, { sx: { color: "text.secondary" }, children: k.label })
             ] }, U);
           }),
           /* @__PURE__ */ x(Q, { component: "li", direction: "row", justifyContent: "flex-end", spacing: 1, marginTop: 1, children: [
@@ -5777,7 +5778,8 @@ const an = (e, A) => {
       }
     )
   ] });
-}, fo = ({ children: e, permissions: A, disabledPermissions: r }) => {
+}
+const fo = ({ children: e, permissions: A, disabledPermissions: r }) => {
   const [n, o] = W(), i = We(
     () => ({
       disabledPermissions: r,

package/dist/src/components/Inputs/ChipFilter/ChipFilter.d.ts

@@ -1,10 +1,12 @@
 import { ChipProps } from '@mui/material';
-type Option = {
+import { ReactNode } from 'react';
+export type OptionValue = string | number;
+type Option<T = OptionValue> = {
     id?: string | number;
     label: string;
-    value: string;
+    value: T;
 };
-interface ChipFilterBaseProps {
+interface ChipFilterBaseProps<T = OptionValue> {
     /**
      * The label of the chip filter.
      */
@@ -29,7 +31,7 @@ interface ChipFilterBaseProps {
      * The options available for selection in the chip filter.
      * If "options" is not an array, it is considered a single option (toggle behavior).
      */
-    options?: Option | Option[];
+    options?: Option<T> | Option<T>[];
     /**
      * Indicates if there should be a separator between the label menu and the options selected in the menu.
      * Defaults to ":"
@@ -40,7 +42,7 @@ interface ChipFilterBaseProps {
      */
     labelOnlyAfterSelection?: boolean;
 }
-export interface ChipFilterSingleProps extends ChipFilterBaseProps {
+export interface ChipFilterSingleProps<T = OptionValue> extends ChipFilterBaseProps<T> {
     /**
      * Indicates if the chip filter allows multiple selections.
      */
@@ -48,14 +50,14 @@ export interface ChipFilterSingleProps extends ChipFilterBaseProps {
     /**
      * The value of the chip filter.
      */
-    value?: string;
+    value?: T;
     /**
      * Callback function triggered when the value of the chip filter changes.
      * @param value
      */
-    onChange?: (value?: string) => void;
+    onChange?: (value?: T) => void;
 }
-export interface ChipFilterMultipleProps extends ChipFilterBaseProps {
+export interface ChipFilterMultipleProps<T = OptionValue> extends ChipFilterBaseProps<T> {
     /**
      * Indicates if the chip filter allows multiple selections.
      */
@@ -63,13 +65,14 @@ export interface ChipFilterMultipleProps extends ChipFilterBaseProps {
     /**
      * The value of the chip filter.
      */
-    value?: string[];
+    value?: T[];
     /**
      * Callback function triggered when the value of the chip filter changes.
      * @param value
      */
-    onChange?: (value: string[]) => void;
+    onChange?: (value: T[]) => void;
 }
-export type ChipFilterProps = ChipFilterSingleProps | ChipFilterMultipleProps;
-declare const ChipFilter: ({ label, value, onChange, options, variant, disabled, labelMenu, labelOnlyAfterSelection, separatorBetweenLabelAndOptionSelected, multiple, size, }: ChipFilterProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type ChipFilterProps<T = OptionValue> = ChipFilterSingleProps<T> | ChipFilterMultipleProps<T>;
+declare function ChipFilter<T = OptionValue>(props: ChipFilterSingleProps<T>): ReactNode;
+declare function ChipFilter<T = OptionValue>(props: ChipFilterMultipleProps<T>): ReactNode;
 export default ChipFilter;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@tracktor/design-system",
   "description": "Tracktor Design System",
   "sideEffects": false,
-  "version": "4.8.1",
+  "version": "4.8.2",
   "license": "ISC",
   "type": "module",
   "types": "./dist/src/main.d.ts",