aristid-ds 15.1.0 → 15.2.0-26e842e

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # Changelog
 
+## [X.Y.Z](https://www.npmjs.com/package/aristid-ds/v/X.Y.Z) (2026-MM-DD)
+
+### ✨ Features
+
+-   **Modal:**
+    -   Add `useChildrenOnly` property to display the modal panel as a container for other components or not. Also export two new components `KitModalHeader` and `KitModalContent` for layout purpose (@renaudamsellem)
+    -   Add `shouldCloseOnOverlayClick` property close the modal on click outside. (@renaudamsellem)
+    -   Add `showFooterButtons` prop to display / hide the footer buttons in confirm modal (@renaudamsellem)
+-   **⚠️ Breaking change - SideMenu:**
+    -   Rename `autoCompleteOptions` prop to `searchOptions` and update its type to `IKitInput` as `AutoComplete` component has been replaced by `SearchInput` component (@philippechevieux)
+    -   Add `tooltip` prop to SideMenuItem component (@philippechevieux)
+    -   Add `group` type to SideMenuItem component (@philippechevieux)
+    -   Add padding bottom to group items (@philippechevieux)
+
+### 🐛 Bug Fixes
+
+-   **IdCard:**
+    -   Fix avatar color from `avatarProps` being overwritten when `color` prop is not set on IdCard (@philippechevieux)
+-   **SideMenu:**
+    -   Fix scrolling so that only the menu items list scrolls while keeping the header fixed (@philippechevieux)
+-   **Select:**
+    -   Fix search feature (@evoiron)
+    -   Fix wrong height for select/TreeSelect with multiple attribute (@alechapelain)
+    -   Fix wrong tag size not matching select size (@alechapelain)
+
+## [15.2.0](https://www.npmjs.com/package/aristid-ds/v/15.2.0) (2026-0226)
+
+### ✨ Features
+
+-   **Locales:**
+    -   Add `portuguese` locale (@evoiron)
+    -   Update locale context to simplify the process of adding a locale (@evoiron)
+
+### 🐛 Bug Fixes
+
+-   **Tabs:**
+    -   Fix alignment issue causing Pill Tabs not to be centered within their parent element (@YanDevDz)
+
 ## [15.1.0](https://www.npmjs.com/package/aristid-ds/v/15.1.0) (2026-02-24)
 
 ### ✨ Features

package/README.md

@@ -22,6 +22,7 @@ ARiSTiD Design System Readme.
         -   [Component code](#component-code)
     -   [Component theming](#component-theming)
         -   [Component documentation](#component-documentation)
+    -   [Adding a locale](#add-a-locale)
 -   [Nightly build](#nightly-build)
 -   [Important](#important)
 -   [Contributing](#contributing)
@@ -456,6 +457,19 @@ Every components **style** of the design system can be **override** by tokens.
 
     After the script run, section `Design Tokens` documentation is up to date with all design tokens.
 
+#### Add a new locale
+
+1. **create a new directory for the new locale in `src/translation`**
+
+    You can duplicate src/translations/enUS and name it according to the locale code you're adding (ptPT for ortuguese, enUS for english, etc.). Then update your tranlsations in each fileinside his new directory.
+
+2. **Add the locale code to the list of known languages**
+
+    - Edit the file `src/translation/utils/localesByLang.ts`, and your locale datas. import the translations from `antd` and the translations from the directory you created in previous step. Then Update `localesByLang` and `antdLocalesByLang` objects . Be careful of the naming, it must match the locale. Refer to the existing locales in this file.
+    - Edit `src/translation/types/index.d.ts`, and add your locale code to `LanguageSupported``
+
+    That's it. The locale is now available. It is also available in th locale selector in storybook.
+
 ## Nightly build
 
 A nightly version of the package is published on daily basis on branch develop (assuming new commits have been pushed on develop branch). To use it just install the more recent next version :

package/dist/Kit/App/index.js

@@ -1,66 +1,60 @@
-import { jsx as n, jsxs as f, Fragment as h } from "react/jsx-runtime";
-import { useState as u, useLayoutEffect as L, useRef as S, useEffect as C } from "react";
-import { ConfigProvider as P } from "antd";
-import { K as b } from "../../chunks/SnackBarProvider.D44OffUd.js";
-import { toCssVariables as g, uuid as y } from "../../utils/functions/index.js";
-import a from "lodash/merge";
-import { Style as m } from "react-style-tag";
-import { K as E } from "../../chunks/useKitTheme.BdeSOGoj.js";
-import { KitAristidThemeGeneral as l } from "../../theme/aristid/general/index.js";
-import { antdThemeConfig as T } from "../../theme/utils/tokens-mapper/index.js";
-import { frFR as d } from "../../translation/fr-FR/index.js";
-import { enUS as $ } from "../../translation/en-US/index.js";
-import { K as j, u as k } from "../../chunks/useKitLocale.C5F-tmnC.js";
-import { mapKitLocaleToAntdLocale as x } from "../../translation/utils/index.js";
-import { KitEmpty as p } from "../DataDisplay/Empty/index.js";
-import '../../assets/index28.css';const A = "aristid-ds-global", F = (t, e) => {
-  const o = g(t);
+import { jsx as a, jsxs as g, Fragment as h } from "react/jsx-runtime";
+import { useState as K, useLayoutEffect as S, useRef as b, useEffect as y } from "react";
+import { ConfigProvider as C } from "antd";
+import { K as P } from "../../chunks/SnackBarProvider.D44OffUd.js";
+import { toCssVariables as L, uuid as T } from "../../utils/functions/index.js";
+import p from "lodash/merge";
+import { Style as u } from "react-style-tag";
+import { K as $ } from "../../chunks/useKitTheme.BdeSOGoj.js";
+import { KitAristidThemeGeneral as c } from "../../theme/aristid/general/index.js";
+import { antdThemeConfig as j } from "../../theme/utils/tokens-mapper/index.js";
+import { K as k, u as E } from "../../chunks/useKitLocale.C5F-tmnC.js";
+import { l as m, f, m as x } from "../../chunks/index.CKC2Gl0d.js";
+import { KitEmpty as v } from "../DataDisplay/Empty/index.js";
+import '../../assets/index28.css';const A = "aristid-ds-global", I = (o, e) => {
+  const r = L(o);
   return `
         .${e} {
-            ${Object.keys(o).map((r) => `${r}: ${o[r]}`).join(";")}
+            ${Object.keys(r).map((t) => `${t}: ${r[t]}`).join(";")}
         }
     `;
-}, I = ({ children: t, customTheme: e, id: o }) => {
-  const [r, i] = u(null), { theme: v, appId: c, spacing: K } = R(o, e);
-  return L(() => {
-    const s = g(l, "--general");
-    i(s);
-  }, []), n(E.Provider, { value: { theme: v, appId: c, spacing: K }, children: r !== null && f(h, { children: [n(m, { id: A, hasSourceMap: !1, children: `
+}, _ = ({ children: o, customTheme: e, id: r }) => {
+  const [t, i] = K(null), { theme: n, appId: s, spacing: d } = B(r, e);
+  return S(() => {
+    const l = L(c, "--general");
+    i(l);
+  }, []), a($.Provider, { value: { theme: n, appId: s, spacing: d }, children: t !== null && g(h, { children: [a(u, { id: A, hasSourceMap: !1, children: `
                             :root {
-                                ${Object.keys(r).map((s) => `${s}: ${r[s]}`).join(";")}
+                                ${Object.keys(t).map((l) => `${l}: ${t[l]}`).join(";")}
                             }
-                        ` }), e && n(m, { hasSourceMap: !1, children: F(a({ general: { utilities: l.utilities } }, e), c) }), t] }) });
-}, R = (t, e) => {
-  var o;
-  const r = S(t || "ds-" + y().substring(0, 8)), i = a(l.spacing, (o = e?.general) === null || o === void 0 ? void 0 : o.spacing);
+                        ` }), e && a(u, { hasSourceMap: !1, children: I(p({ general: { utilities: c.utilities } }, e), s) }), o] }) });
+}, B = (o, e) => {
+  var r;
+  const t = b(o || "ds-" + T().substring(0, 8)), i = p(c.spacing, (r = e?.general) === null || r === void 0 ? void 0 : r.spacing);
   return {
-    theme: l,
-    appId: r.current,
+    theme: c,
+    appId: t.current,
     spacing: i
   };
-}, _ = ({ children: t }) => {
-  const e = M();
-  return n(j.Provider, { value: e, children: t });
-}, M = () => {
-  const [t, e] = u(d);
-  return { locale: t, setKitLocale: (r) => {
-    if (r.locale === "frFR") {
-      const i = a(d, r);
-      e(i);
-    } else {
-      const i = a($, r);
-      e(i);
-    }
+}, D = ({ children: o }) => {
+  const e = F();
+  return a(k.Provider, { value: e, children: o });
+}, F = () => {
+  const [o, e] = K(m.frFR);
+  return { locale: o, setKitLocale: (t) => {
+    var i, n;
+    const s = (n = m[(i = t.locale) !== null && i !== void 0 ? i : f]) !== null && n !== void 0 ? n : m[f], d = p(s, t);
+    e(d);
   } };
-}, Z = ({ children: t, locale: e, customTheme: o, id: r }) => n(I, { customTheme: o, id: r, children: n(_, { children: n(O, { locale: e, children: t }) }) }), O = ({ children: t, locale: e }) => {
-  const { locale: o, setKitLocale: r } = k();
-  return C(() => {
-    e !== void 0 && r(e);
-  }, [e, r]), f(P, { theme: T, locale: x(e), renderEmpty: () => {
+}, X = ({ children: o, locale: e, customTheme: r, id: t }) => a(_, { customTheme: r, id: t, children: a(D, { children: a(M, { locale: e, children: o }) }) }), M = ({ children: o, locale: e }) => {
+  const { locale: r, setKitLocale: t } = E();
+  return y(() => {
+    e !== void 0 && t(e);
+  }, [e, t]), g(C, { theme: j, locale: x(e), renderEmpty: () => {
     var i;
-    return n(p, { className: "default-render", image: p.ASSET_LIST, description: (i = o.Empty) === null || i === void 0 ? void 0 : i.noData });
-  }, children: [n(b, {}), t] });
+    return a(v, { className: "default-render", image: v.ASSET_LIST, description: (i = r.Empty) === null || i === void 0 ? void 0 : i.noData });
+  }, children: [a(P, {}), o] });
 };
 export {
-  Z as KitApp
+  X as KitApp
 };

package/dist/Kit/DataDisplay/Comment/index.js

@@ -1,4 +1,4 @@
-import { K as e, a as m } from "../../../chunks/Thread.DHhk0Z5U.js";
+import { K as e, a as m } from "../../../chunks/Thread.DfvaoSxN.js";
 export {
   e as KitComment,
   m as KitThread

package/dist/Kit/DataDisplay/IdCard/index.js

@@ -1,19 +1,19 @@
-import { jsxs as m, jsx as s } from "react/jsx-runtime";
-import l from "classnames";
-import { t as v } from "../../../chunks/styles.module.BiErj37W.js";
-import { u as z } from "../../../chunks/useKitTheme.BdeSOGoj.js";
-import { K as N } from "../../../chunks/Avatar.B2Q0k3WU.js";
-import { KitTooltip as h } from "../Tooltip/index.js";
-import { T as u } from "../../../chunks/constants.CctH0M4n.js";
-import '../../../assets/index2.css';const _ = {
+import { jsxs as h, jsx as i } from "react/jsx-runtime";
+import p from "classnames";
+import { t as z } from "../../../chunks/styles.module.BiErj37W.js";
+import { u as N } from "../../../chunks/useKitTheme.BdeSOGoj.js";
+import { K as _ } from "../../../chunks/Avatar.B2Q0k3WU.js";
+import { KitTooltip as u } from "../Tooltip/index.js";
+import { T as g } from "../../../chunks/constants.CctH0M4n.js";
+import '../../../assets/index2.css';const E = {
   "kit-id-card": "_kit-id-card_1m63u_2"
-}, g = [
-  v["kit-typography-text"],
+}, f = [
+  z["kit-typography-text"],
   "ant-typography",
   "ant-typography-text",
   "ant-typography-ellipsis",
   "ant-typography-ellipsis-single-line"
-], E = (t) => {
+], K = (t) => {
   switch (t) {
     case "xl":
       return "kit-typography-fontSize5";
@@ -22,7 +22,7 @@ import '../../../assets/index2.css';const _ = {
     default:
       return "kit-typography-fontSize7";
   }
-}, K = (t) => {
+}, C = (t) => {
   switch (t) {
     case "xl":
       return "kit-typography-fontSize1";
@@ -37,7 +37,7 @@ import '../../../assets/index2.css';const _ = {
     case "xxs-medium":
       return "kit-typography-fontSize5";
   }
-}, C = (t) => {
+}, I = (t) => {
   switch (t) {
     case "xl":
     case "l":
@@ -50,22 +50,23 @@ import '../../../assets/index2.css';const _ = {
     default:
       return "m";
   }
-}, I = (t, e, r, i) => {
-  const a = l("kit-id-card-title", ...g, K(e), {
+}, A = (t, e, r, s) => {
+  const o = p("kit-id-card-title", ...f, C(e), {
     "ant-typography-bold": e !== "xs-medium",
     "ant-typography-disabled": r
   });
-  return s("span", { className: a, children: s(h, { title: i ? "" : t, mouseEnterDelay: u, children: s("span", { children: t }) }) });
-}, A = (t, e, r, i) => {
-  const a = l("kit-id-card-description", ...g, "ant-typography-regular", E(e), {
+  return i("span", { className: o, children: i(u, { title: s ? "" : t, mouseEnterDelay: g, children: i("span", { children: t }) }) });
+}, b = (t, e, r, s) => {
+  const o = p("kit-id-card-description", ...f, "ant-typography-regular", K(e), {
     "ant-typography-disabled": r
   });
-  return s("span", { className: a, children: s(h, { title: i ? "" : t, mouseEnterDelay: u, children: s("span", { children: t }) }) });
-}, b = ({ className: t, title: e, description: r, avatarProps: i, avatar: a, color: o, size: n = "xs-bold", disabled: c = !1, disableTooltip: p = !1, ...f }) => {
-  const { appId: x } = z(), k = l(x, _["kit-id-card"], t), S = i !== void 0 || a !== void 0, d = e !== void 0, D = o !== void 0, y = r !== void 0, T = d || y;
-  return m("div", { className: `${k} id-card-grid`, ...f, children: [D && s("div", { className: "card-color", style: { backgroundColor: o } }), S && s("div", { className: "card-avatar", children: a ?? s(N, { size: C(n), ...i, color: o, disabled: c }) }), T && m("div", { className: "card-info", children: [d && typeof e == "string" ? I(e, n, c, p) : e, y && typeof r == "string" ? A(r, n, c, p) : r] })] });
+  return i("span", { className: o, children: i(u, { title: s ? "" : t, mouseEnterDelay: g, children: i("span", { children: t }) }) });
+}, w = ({ className: t, title: e, description: r, avatarProps: s, avatar: o, color: a, size: n = "xs-bold", disabled: l = !1, disableTooltip: d = !1, ...x }) => {
+  var c;
+  const { appId: k } = N(), S = p(k, E["kit-id-card"], t), v = s !== void 0 || o !== void 0, y = e !== void 0, D = a !== void 0, m = r !== void 0, T = y || m;
+  return h("div", { className: `${S} id-card-grid`, ...x, children: [D && i("div", { className: "card-color", style: { backgroundColor: a } }), v && i("div", { className: "card-avatar", children: o ?? i(_, { size: I(n), ...s, color: (c = s?.color) !== null && c !== void 0 ? c : a, disabled: l }) }), T && h("div", { className: "card-info", children: [y && typeof e == "string" ? A(e, n, l, d) : e, m && typeof r == "string" ? b(r, n, l, d) : r] })] });
 };
-b.displayName = "KitIdCard";
+w.displayName = "KitIdCard";
 export {
-  b as KitIdCard
+  w as KitIdCard
 };

package/dist/Kit/DataDisplay/Table/index.js

@@ -8,7 +8,7 @@ import { KitIcon as R } from "../../General/Icon/index.js";
 import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
 import { faUpDown as W, faArrowDown as $, faArrowUp as E, faGripLines as M, faCaretDown as G, faCaretRight as X } from "@fortawesome/free-solid-svg-icons";
 import { KitButton as T } from "../../General/Button/index.js";
-import '../../../assets/index45.css';const p = {
+import '../../../assets/index44.css';const p = {
   "kit-table": "_kit-table_1gybl_22",
   "expand-button": "_expand-button_1gybl_816"
 }, I = (l) => {

package/dist/Kit/DataDisplay/Tabs/index.js

@@ -1,41 +1,42 @@
-import { jsxs as O, Fragment as j, jsx as r } from "react/jsx-runtime";
-import { useRef as F, useState as _, useLayoutEffect as $ } from "react";
-import { u as q } from "../../../chunks/useKitTheme.BdeSOGoj.js";
-import R from "classnames";
+import { jsxs as _, Fragment as A, jsx as l } from "react/jsx-runtime";
+import { useRef as F, useState as R, useLayoutEffect as G } from "react";
+import { u as H } from "../../../chunks/useKitTheme.BdeSOGoj.js";
+import O from "classnames";
 import { KitButton as B } from "../../General/Button/index.js";
 import { FontAwesomeIcon as D } from "@fortawesome/react-fontawesome";
-import { faPlus as G, faEllipsisVertical as H } from "@fortawesome/free-solid-svg-icons";
-import { F as J } from "../../../chunks/constants.CctH0M4n.js";
-import { KitDropDown as M } from "../../Navigation/DropDown/index.js";
-import { u as Q } from "../../../chunks/useKitLocale.C5F-tmnC.js";
-import { KitTypography as Y } from "../../General/Typography/index.js";
-import { KitBadge as Z } from "../Badge/index.js";
-import '../../../assets/index30.css';const ee = {
-  "kit-tabs": "_kit-tabs_thif5_2"
+import { faPlus as J, faEllipsisVertical as M } from "@fortawesome/free-solid-svg-icons";
+import { F as Q } from "../../../chunks/constants.CctH0M4n.js";
+import { KitDropDown as Y } from "../../Navigation/DropDown/index.js";
+import { u as Z } from "../../../chunks/useKitLocale.C5F-tmnC.js";
+import { KitTypography as tt } from "../../General/Typography/index.js";
+import { KitBadge as et } from "../Badge/index.js";
+import '../../../assets/index30.css';const I = {
+  "kit-tabs-wrapper": "_kit-tabs-wrapper_htrca_2",
+  "kit-tabs": "_kit-tabs_htrca_2"
 };
-function te({ items: t, addTab: n, disableOverflow: i }) {
-  const o = F(null), s = F({}), u = F(null), c = 16, w = 40, l = n ? 56 : 0, [d, h] = _([]), [y, f] = _(!1);
-  return $(() => {
+function ot({ items: e, addTab: n, disableOverflow: i }) {
+  const o = F(null), s = F({}), u = F(null), a = 16, v = 40, r = n ? 56 : 0, [d, w] = R([]), [h, f] = R(!1);
+  return G(() => {
     const p = () => {
       if (i) {
         f(!0);
         return;
       }
-      const g = o.current;
-      if (!g)
+      const k = o.current;
+      if (!k)
         return;
-      const m = oe(g);
-      let k = l;
-      const C = [];
-      for (let a = 0; a < t.length; a++) {
-        const K = t[a], v = s.current[K.key];
-        if (!v)
+      const m = nt(k);
+      let y = r;
+      const g = [];
+      for (let c = 0; c < e.length; c++) {
+        const K = e[c], T = s.current[K.key];
+        if (!T)
           return;
-        k += v.offsetWidth + c;
-        const E = a === t.length - 1 ? 0 : w;
-        k > m - E + c && C.push(K.key);
+        y += T.offsetWidth + a;
+        const C = c === e.length - 1 ? 0 : v;
+        y > m - C + a && g.push(K.key);
       }
-      h((a) => a.join() === C.join() ? a : C), f(!0);
+      w((c) => c.join() === g.join() ? c : g), f(!0);
     };
     let S;
     const x = () => {
@@ -44,16 +45,16 @@ function te({ items: t, addTab: n, disableOverflow: i }) {
     return p(), window.addEventListener("resize", x), () => {
       window.removeEventListener("resize", x);
     };
-  }, [t, l, o, u, i]), {
+  }, [e, r, o, u, i]), {
     containerRef: o,
     tabRefs: s,
     overflowedKeys: d,
-    overflowedItems: t.filter((p) => d.includes(p.key)),
-    overflowCalculated: y
+    overflowedItems: e.filter((p) => d.includes(p.key)),
+    overflowCalculated: h
   };
 }
-function oe(t) {
-  let n = t.parentElement;
+function nt(e) {
+  let n = e.parentElement;
   for (; n; ) {
     const i = window.getComputedStyle(n), o = i.width;
     if (o !== "auto" && o !== "fit-content" && o !== "min-content" && o !== "max-content" && n.clientWidth > 0)
@@ -65,9 +66,9 @@ function oe(t) {
   }
   return window.innerWidth;
 }
-const I = ({ icon: t, label: n, size: i, badgeCount: o, badgeOverflowCount: s }) => O(j, { children: [t && r("div", { className: "kit-tab-icon", children: t }), O("div", { className: "kit-tab-label-wrapper", children: [r(Y.Text, { className: "kit-tab-label", size: ne(i), children: n }), !!o && r(Z, { className: "kit-tab-count", count: o, overflowCount: s })] })] });
-function ne(t) {
-  switch (t) {
+const j = ({ icon: e, label: n, size: i, badgeCount: o, badgeOverflowCount: s }) => _(A, { children: [e && l("div", { className: "kit-tab-icon", children: e }), _("div", { className: "kit-tab-label-wrapper", children: [l(tt.Text, { className: "kit-tab-label", size: it(i), children: n }), !!o && l(et, { className: "kit-tab-count", count: o, overflowCount: s })] })] });
+function it(e) {
+  switch (e) {
     case "xsmall":
       return "fontSize7";
     case "small":
@@ -78,38 +79,40 @@ function ne(t) {
       return "fontSize4";
   }
 }
-const ie = ({ addTab: t, centered: n, className: i, activeKey: o, defaultKey: s, items: u, onChange: c, fullwidthTab: w, size: l = "small", variant: d = "classic" }) => {
-  var h, y, f;
-  const { appId: p } = q(), { locale: S } = Q(), [x, g] = _(s ?? ((h = u[0]) === null || h === void 0 ? void 0 : h.key)), m = o ?? x, k = (y = u.find((e) => e.key === m)) === null || y === void 0 ? void 0 : y.tabContent, C = R(p, i, ee["kit-tabs"], n ? "centered" : "", l ?? "medium", d, w ? "fullwidth" : "", k && d === "pill" ? "tabs-bottom-spacing" : ""), { containerRef: a, tabRefs: K, overflowedKeys: v, overflowedItems: E, overflowCalculated: A } = te({
+const lt = ({ addTab: e, centered: n, className: i, activeKey: o, defaultKey: s, items: u, onChange: a, fullwidthTab: v, size: r = "small", variant: d = "classic" }) => {
+  var w, h, f;
+  const { appId: p } = H(), { locale: S } = Z(), [x, k] = R(s ?? ((w = u[0]) === null || w === void 0 ? void 0 : w.key)), m = o ?? x, y = (h = u.find((t) => t.key === m)) === null || h === void 0 ? void 0 : h.tabContent, g = O(p, i, I["kit-tabs"], r ?? "medium", d, v ? "fullwidth" : "", y && d === "pill" ? "tabs-bottom-spacing" : ""), c = O(I["kit-tabs-wrapper"], {
+    centered: n
+  }), { containerRef: K, tabRefs: T, overflowedKeys: C, overflowedItems: z, overflowCalculated: U } = ot({
     items: u,
-    addTab: !!t,
-    disableOverflow: !!w
-  }), L = (e) => {
-    g(e), c?.(e);
-  }, z = (e, T) => {
-    e.code === "Enter" && (g(T), c?.(T));
+    addTab: !!e,
+    disableOverflow: !!v
+  }), L = (t) => {
+    k(t), a?.(t);
+  }, P = (t, N) => {
+    t.code === "Enter" && (k(N), a?.(N));
   };
-  return O(j, { children: [O("div", { className: C, role: "tablist", ref: a, children: [u.map(({ icon: e, label: T, badgeCount: U, badgeOverflowCount: P, key: b, disabled: N }) => {
-    const V = v.includes(b), X = m === b;
-    return r("div", { ref: (W) => K.current[b] = W, className: R("kit-tab", "kit-tab-" + l, d, {
-      visible: A && !V,
+  return _(A, { children: [l("div", { className: c, ref: K, children: _("div", { className: g, role: "tablist", children: [u.map(({ icon: t, label: N, badgeCount: V, badgeOverflowCount: X, key: b, disabled: E }) => {
+    const $ = C.includes(b), q = m === b;
+    return l("div", { ref: (W) => T.current[b] = W, className: O("kit-tab", "kit-tab-" + r, d, {
+      visible: U && !$,
       // hide tabs until overflow is calculated to avoid layout shift
-      disabled: N,
-      active: X,
-      fullwidth: w
-    }), role: "tab", tabIndex: J, onClick: N ? void 0 : () => L(b), onKeyDown: N ? void 0 : (W) => z(W, b), children: r(I, { icon: e, label: T, size: l, badgeCount: U, badgeOverflowCount: P }) }, b);
-  }), t && d === "classic" && r(B, { disableSecureClick: !0, type: "tertiary", icon: r(D, { icon: G }), onClick: t, size: l === "xsmall" ? "s" : "m" }), v.length > 0 && r(M, { menu: {
-    items: E.map((e) => ({
-      label: r("div", { className: R("kit-tab-dropdown", `kit-tab-dropdown-${l}`), children: r(I, { icon: e.icon, label: e.label, size: l, badgeCount: e.badgeCount, badgeOverflowCount: e.badgeOverflowCount }) }),
+      disabled: E,
+      active: q,
+      fullwidth: v
+    }), role: "tab", tabIndex: Q, onClick: E ? void 0 : () => L(b), onKeyDown: E ? void 0 : (W) => P(W, b), children: l(j, { icon: t, label: N, size: r, badgeCount: V, badgeOverflowCount: X }) }, b);
+  }), e && d === "classic" && l(B, { disableSecureClick: !0, type: "tertiary", icon: l(D, { icon: J }), onClick: e, size: r === "xsmall" ? "s" : "m" }), C.length > 0 && l(Y, { menu: {
+    items: z.map((t) => ({
+      label: l("div", { className: O("kit-tab-dropdown", `kit-tab-dropdown-${r}`), children: l(j, { icon: t.icon, label: t.label, size: r, badgeCount: t.badgeCount, badgeOverflowCount: t.badgeOverflowCount }) }),
       type: "item",
-      key: e.key,
-      disabled: e.disabled,
-      onClick: () => !e.disabled && L(e.key)
+      key: t.key,
+      disabled: t.disabled,
+      onClick: () => !t.disabled && L(t.key)
     })),
     selectedKeys: [m]
-  }, trigger: ["click"], children: r(B, { icon: r(D, { icon: H }), type: v.includes(m) ? "primary" : "tertiary", "aria-label": (f = S.Tabs) === null || f === void 0 ? void 0 : f.moreOptions, size: l === "xsmall" ? "s" : "m" }) })] }), k] });
+  }, trigger: ["click"], children: l(B, { icon: l(D, { icon: M }), type: C.includes(m) ? "primary" : "tertiary", "aria-label": (f = S.Tabs) === null || f === void 0 ? void 0 : f.moreOptions, size: r === "xsmall" ? "s" : "m" }) })] }) }), y] });
 };
-ie.displayName = "KitTabs";
+lt.displayName = "KitTabs";
 export {
-  ie as KitTabs
+  lt as KitTabs
 };

package/dist/Kit/DataEntry/DatePicker/index.js

@@ -3,30 +3,30 @@ import { forwardRef as g, useRef as T } from "react";
 import { DatePicker as X } from "antd";
 import $ from "classnames";
 import { FontAwesomeIcon as n } from "@fortawesome/react-fontawesome";
-import { faChevronLeft as N, faChevronRight as _, faClock as z, faCalendar as B, faCircleXmark as E, faArrowRight as Y } from "@fortawesome/free-solid-svg-icons";
-import { K as H } from "../../../chunks/InputWrapper.D7QArlvo.js";
-import { u as J } from "../../../chunks/useKitTheme.BdeSOGoj.js";
-import { u as M } from "../../../chunks/useGetPopupContainer.bCZKSUsz.js";
-import '../../../assets/index46.css';const O = {
-  "kit-datepicker": "_kit-datepicker_1b3ee_2",
-  "kit-rangepicker": "_kit-rangepicker_1b3ee_210"
-}, Q = () => W("div", { className: "double-chevron", children: [e(n, { className: "chevron-icon double-chevron-left-icon", icon: N }), e(n, { className: "chevron-icon", icon: N })] }), S = () => W("div", { className: "double-chevron", children: [e(n, { className: "chevron-icon", icon: _ }), e(n, { className: "chevron-icon double-chevron-right-icon", icon: _ })] }), Z = g(({ label: C, helper: R, htmlFor: m, suffixIcon: f, className: x, wrapperClassName: b, prefix: t, required: u, actions: h, extra: v, disabled: s, placeholder: K, getPopupContainer: l, picker: r = "date", size: D = "large", allowClear: I = !0, readonlyLight: o = !1, readonly: i = !1, ...a }, c) => {
+import { faChevronLeft as N, faChevronRight as _, faClock as q, faCalendar as z, faCircleXmark as B, faArrowRight as V } from "@fortawesome/free-solid-svg-icons";
+import { K as E } from "../../../chunks/InputWrapper.D7QArlvo.js";
+import { u as H } from "../../../chunks/useKitTheme.BdeSOGoj.js";
+import { u as J } from "../../../chunks/useGetPopupContainer.bCZKSUsz.js";
+import '../../../assets/index45.css';const M = {
+  "kit-datepicker": "_kit-datepicker_1tqav_2",
+  "kit-rangepicker": "_kit-rangepicker_1tqav_210"
+}, O = () => W("div", { className: "double-chevron", children: [e(n, { className: "chevron-icon double-chevron-left-icon", icon: N }), e(n, { className: "chevron-icon", icon: N })] }), Q = () => W("div", { className: "double-chevron", children: [e(n, { className: "chevron-icon", icon: _ }), e(n, { className: "chevron-icon double-chevron-right-icon", icon: _ })] }), Y = g(({ label: C, helper: R, htmlFor: m, suffixIcon: f, className: x, wrapperClassName: b, prefix: t, required: v, actions: h, extra: u, disabled: s, placeholder: K, getPopupContainer: l, picker: r = "date", size: D = "large", allowClear: I = !0, readonlyLight: o = !1, readonly: i = !1, ...a }, c) => {
   var p, d;
-  const { appId: w } = J(), k = T(null), G = (p = c) !== null && p !== void 0 ? p : k, j = M(G, l), A = $(w, O["kit-datepicker"], x, {
+  const { appId: w } = H(), k = T(null), G = (p = c) !== null && p !== void 0 ? p : k, j = J(G, l), A = $(w, M["kit-datepicker"], x, {
     "kit-picker-readonly-light": o,
     "kit-picker-readonly": i
-  }), V = t ?? (r === "time" ? e(n, { icon: z }) : e(n, { icon: B }));
-  return e(H, { label: C, helper: R, htmlFor: m, disabled: s, status: a.status, className: b, required: u, extra: v ?? h, children: e(X, { ...a, id: (d = a.id) !== null && d !== void 0 ? d : m, required: u, picker: r, disabled: o || i || s, variant: o ? "borderless" : void 0, ref: c ?? k, size: D, getPopupContainer: j, placeholder: !o && !i ? K : void 0, allowClear: !o && !i && I && { clearIcon: e(n, { "aria-label": "clear", icon: E }) }, prefix: V, suffixIcon: I ? void 0 : f, className: A, prevIcon: e(n, { className: "chevron-icon", icon: N }), nextIcon: e(n, { className: "chevron-icon", icon: _ }), superPrevIcon: e(Q, {}), superNextIcon: e(S, {}) }) });
-}), F = g(({ label: C, className: R, helper: m, htmlFor: f, suffixIcon: x, picker: b, prefix: t, allowClear: u = !0, required: h, actions: v, extra: s, placeholder: K, readonlyLight: l = !1, readonly: r = !1, getPopupContainer: D, size: I = "large", ...o }, i) => {
+  }), U = t ?? (r === "time" ? e(n, { icon: q }) : e(n, { icon: z }));
+  return e(E, { label: C, helper: R, htmlFor: m, disabled: s, status: a.status, className: b, required: v, extra: u ?? h, children: e(X, { ...a, id: (d = a.id) !== null && d !== void 0 ? d : m, required: v, picker: r, disabled: o || i || s, variant: o ? "borderless" : void 0, ref: c ?? k, size: D, getPopupContainer: j, placeholder: !o && !i ? K : void 0, allowClear: !o && !i && I && { clearIcon: e(n, { "aria-label": "clear", icon: B }) }, prefix: U, suffixIcon: I ? void 0 : f, className: A, prevIcon: e(n, { className: "chevron-icon", icon: N }), nextIcon: e(n, { className: "chevron-icon", icon: _ }), superPrevIcon: e(O, {}), superNextIcon: e(Q, {}) }) });
+}), Z = g(({ label: C, className: R, helper: m, htmlFor: f, suffixIcon: x, picker: b, prefix: t, allowClear: v = !0, required: h, actions: u, extra: s, placeholder: K, readonlyLight: l = !1, readonly: r = !1, getPopupContainer: D, size: I = "large", ...o }, i) => {
   var a, c;
-  const { appId: p } = J(), d = T(null), w = (a = i) !== null && a !== void 0 ? a : d, k = M(w, D), G = () => o.disabled === void 0 ? !1 : typeof o.disabled == "boolean" ? o.disabled : o.disabled[0] && o.disabled[1], j = $(p, O["kit-rangepicker"], R, {
+  const { appId: p } = H(), d = T(null), w = (a = i) !== null && a !== void 0 ? a : d, k = J(w, D), G = () => o.disabled === void 0 ? !1 : typeof o.disabled == "boolean" ? o.disabled : o.disabled[0] && o.disabled[1], j = $(p, M["kit-rangepicker"], R, {
     "kit-picker-readonly-light": l,
     "kit-picker-readonly": r
-  }), A = t ?? (b === "time" ? e(n, { icon: z }) : e(n, { icon: B }));
-  return e(H, { label: C, helper: m, htmlFor: f, disabled: G(), status: o.status, required: h, extra: s ?? v, children: e(X.RangePicker, { ...o, id: (c = o.id) !== null && c !== void 0 ? c : f, picker: b, ref: i ?? d, getPopupContainer: k, required: h, size: I, disabled: l || r || o.disabled, variant: l ? "borderless" : void 0, placeholder: !l && !r ? K : void 0, suffixIcon: u ? void 0 : x, allowClear: u && { clearIcon: e(n, { "aria-label": "clear", icon: E }) }, className: j, prefix: A, separator: e(n, { icon: Y }), prevIcon: e(n, { className: "chevron-icon", icon: N }), nextIcon: e(n, { className: "chevron-icon", icon: _ }), superPrevIcon: e(Q, {}), superNextIcon: e(S, {}) }) });
-}), U = Z;
-U.displayName = "KitDatePicker";
-U.RangePicker = F;
+  }), A = t ?? (b === "time" ? e(n, { icon: q }) : e(n, { icon: z }));
+  return e(E, { label: C, helper: m, htmlFor: f, disabled: G(), status: o.status, required: h, extra: s ?? u, children: e(X.RangePicker, { ...o, id: (c = o.id) !== null && c !== void 0 ? c : f, picker: b, ref: i ?? d, getPopupContainer: k, required: h, size: I, disabled: l || r || o.disabled, variant: l ? "borderless" : void 0, placeholder: !l && !r ? K : void 0, suffixIcon: v ? void 0 : x, allowClear: v && { clearIcon: e(n, { "aria-label": "clear", icon: B }) }, className: j, prefix: A, separator: e(n, { icon: V }), prevIcon: e(n, { className: "chevron-icon", icon: N }), nextIcon: e(n, { className: "chevron-icon", icon: _ }), superPrevIcon: e(O, {}), superNextIcon: e(Q, {}) }) });
+}), S = Y;
+S.displayName = "KitDatePicker";
+S.RangePicker = Z;
 export {
-  U as KitDatePicker
+  S as KitDatePicker
 };

package/dist/Kit/DataEntry/Input/index.js

@@ -8,27 +8,27 @@ import { u as b } from "../../../chunks/useKitTheme.BdeSOGoj.js";
 import g from "classnames";
 import { KitTypography as S } from "../../General/Typography/index.js";
 import '../../../assets/index39.css';const z = {
-  "kit-input": "_kit-input_1p5la_2",
-  "kit-password": "_kit-password_1p5la_206",
-  "kit-textarea": "_kit-textarea_1p5la_353"
-}, W = h(({ label: u, className: m, helper: p, htmlFor: o, wrapperClassName: s, allowClear: f = !0, required: c, actions: d, extra: l, disabled: r, placeholder: v, readonly: i = !1, readonlyLight: n = !1, size: k = "large", ...a }, I) => {
-  var e;
+  "kit-input": "_kit-input_10dra_2",
+  "kit-password": "_kit-password_10dra_206",
+  "kit-textarea": "_kit-textarea_10dra_353"
+}, W = h(({ label: u, className: m, helper: f, htmlFor: o, wrapperClassName: s, allowClear: p = !0, required: c, actions: d, extra: i, disabled: r, placeholder: v, readonly: e = !1, readonlyLight: n = !1, size: k = "large", ...a }, I) => {
+  var l;
   const { appId: _ } = b(), w = g(_, z["kit-input"], m, {
-    "kit-input-readonly": i
+    "kit-input-readonly": e
   });
-  return t(T, { label: u, helper: p, htmlFor: o, disabled: r, status: a.status, className: s, required: c, extra: l ?? d, children: n ? t(S.Text, { weight: "bold", size: "fontSize5", color: a.status === "error" ? "error" : void 0, children: a.value }) : t(x, { ...a, ref: I, id: (e = a.id) !== null && e !== void 0 ? e : o, className: w, disabled: r || i, required: c, size: k, placeholder: !i && !n ? v : void 0, allowClear: f ? { clearIcon: t(K, { "aria-label": "clear", icon: N }) } : void 0 }) });
-}), X = h(({ label: u, className: m, helper: p, htmlFor: o, wrapperClassName: s, allowClear: f = !0, required: c, actions: d, extra: l, disabled: r, placeholder: v, readonly: i = !1, readonlyLight: n = !1, size: k = "large", ...a }, I) => {
-  var e;
+  return t(T, { label: u, helper: f, htmlFor: o, disabled: r, status: a.status, className: s, required: c, extra: i ?? d, children: n ? t(S.Text, { weight: "bold", size: "fontSize5", color: a.status === "error" ? "error" : void 0, children: a.value }) : t(x, { ...a, ref: I, id: (l = a.id) !== null && l !== void 0 ? l : o, className: w, disabled: r || e, required: c, size: k, placeholder: !e && !n ? v : void 0, allowClear: p ? { clearIcon: t(K, { "aria-label": "clear", icon: N }) } : void 0 }) });
+}), X = h(({ label: u, className: m, helper: f, htmlFor: o, wrapperClassName: s, allowClear: p = !0, required: c, actions: d, extra: i, disabled: r, placeholder: v, readonly: e = !1, readonlyLight: n = !1, size: k = "large", ...a }, I) => {
+  var l;
   const { appId: _ } = b(), w = g(_, z["kit-textarea"], m, {
-    "kit-textarea-readonly": i
+    "kit-textarea-readonly": e
   });
-  return t(T, { label: u, helper: p, htmlFor: o, disabled: r, status: a.status, className: s, required: c, extra: l ?? d, children: n ? t(S.Text, { weight: "bold", size: "fontSize5", color: a.status === "error" ? "error" : void 0, children: a.value }) : t(x.TextArea, { ...a, ref: I, id: (e = a.id) !== null && e !== void 0 ? e : o, className: w, disabled: r || i, required: c, size: k, placeholder: !i && !n ? v : void 0, allowClear: f ? { clearIcon: t(K, { "aria-label": "clear", icon: N }) } : void 0 }) });
-}), $ = h(({ label: u, className: m, helper: p, htmlFor: o, iconRender: s, wrapperClassName: f, allowClear: c = !0, disabled: d, readonly: l = !1, required: r, actions: v, extra: i, placeholder: n, size: k = "large", ...a }, I) => {
-  var e;
+  return t(T, { label: u, helper: f, htmlFor: o, disabled: r, status: a.status, className: s, required: c, extra: i ?? d, children: n ? t(S.Text, { weight: "bold", size: "fontSize5", color: a.status === "error" ? "error" : void 0, children: a.value }) : t(x.TextArea, { ...a, ref: I, id: (l = a.id) !== null && l !== void 0 ? l : o, className: w, disabled: r || e, required: c, size: k, placeholder: !e && !n ? v : void 0, allowClear: p ? { clearIcon: t(K, { "aria-label": "clear", icon: N }) } : void 0 }) });
+}), $ = h(({ label: u, className: m, helper: f, htmlFor: o, iconRender: s, wrapperClassName: p, allowClear: c = !0, disabled: d, readonly: i = !1, required: r, actions: v, extra: e, placeholder: n, size: k = "large", ...a }, I) => {
+  var l;
   const { appId: _ } = b(), w = g(_, z["kit-password"], m, {
-    "kit-password-readonly": l
+    "kit-password-readonly": i
   }), E = (j) => j ? t(K, { icon: y }) : t(K, { icon: R });
-  return t(T, { label: u, helper: p, htmlFor: o, disabled: d, status: a.status, className: f, required: r, extra: i ?? v, children: t(x.Password, { ...a, className: w, placeholder: l ? void 0 : n, disabled: d || l, required: r, id: (e = a.id) !== null && e !== void 0 ? e : o, ref: I, size: k, allowClear: c ? { clearIcon: t(K, { "aria-label": "clear", icon: N }) } : void 0, iconRender: s ?? E }) });
+  return t(T, { label: u, helper: f, htmlFor: o, disabled: d, status: a.status, className: p, required: r, extra: e ?? v, children: t(x.Password, { ...a, className: w, placeholder: i ? void 0 : n, disabled: d || i, required: r, id: (l = a.id) !== null && l !== void 0 ? l : o, ref: I, size: k, allowClear: c ? { clearIcon: t(K, { "aria-label": "clear", icon: N }) } : void 0, iconRender: s ?? E }) });
 }), C = W;
 C.displayName = "KitInput";
 C.TextArea = X;