aristid-ds 12.0.0-e651b01 → 12.0.0-fe240df

package/CHANGELOG.md

@@ -1,6 +1,10 @@
 # Changelog
 
-## [X.X.X0](https://www.npmjs.com/package/aristid-ds/v/X.X.X) (202X-XX-XX)
+## [X.X.X](https://www.npmjs.com/package/aristid-ds/v/X.X.X) (202X-XX-XX)
+
+### ✨ CI
+
+-   Add a pre-commit hook. Now, `eslint` and `tscheck` are run before each commit (@evoiron)
 
 ### 📦 Upgrade
 
@@ -56,8 +60,24 @@ The following points are the impact of this version upgrade:
 
 ### ✨ Features
 
+-   **Snackbar**:
+    -   Add `snackbarId` property to allow to update a snackbar (@evoiron)
+-   **⚠️ Breaking change - Tree**:
+    -   Remove `showLine` and `switcherIcon` properties (@philippechevieux)
+    -   Update component render (@philippechevieux)
 -   **Tabs**:
     -   Add controlled state to handle navigation within tabs (@renaudamsellem)
+-   **SidePanel**:
+    -   Add `headerExtra` prop to display extra content above header title (@philippechevieux)
+
+### 🐛 Bug Fixes
+
+-   **ColorPicker**
+    -   Fix `onFormatChange` behavior (@philippechevieux)
+-   **Modal**
+    -   Allow to pass className as props just like other components (@renaudamsellem)
+-   **Button**
+    -   Fix hover and focus state color when redirect button is inside a typography text (@renaudamsellem)
 
 ## [12.0.0](https://www.npmjs.com/package/aristid-ds/v/12.0.0) (2024-01-09)
 

package/dist/Kit/App/index.js

@@ -1,4 +1,4 @@
-import "../../assets/index28.css";
+import "../../assets/index29.css";
 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 P } from "react";
 import { ConfigProvider as C } from "antd";

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

@@ -1,4 +1,4 @@
-import "../../../assets/index37.css";
+import "../../../assets/index38.css";
 import { jsx as t, jsxs as f } from "react/jsx-runtime";
 import { cloneElement as C, useState as N } from "react";
 import { Collapse as E } from "antd";

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

@@ -1,4 +1,4 @@
-import "../../../assets/index50.css";
+import "../../../assets/index51.css";
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { Empty as p } from "antd";
 import { u as m } from "../../../chunks/useKitTheme.KSAU-Pdv.js";

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

@@ -1,4 +1,4 @@
-import "../../../assets/index49.css";
+import "../../../assets/index50.css";
 import { jsxs as r, jsx as c } from "react/jsx-runtime";
 import { Suspense as v } from "react";
 import { Empty as d } from "antd";

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

@@ -1,4 +1,4 @@
-import "../../../assets/index29.css";
+import "../../../assets/index30.css";
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { useState as B, useEffect as V, forwardRef as X } from "react";
 import Y from "classnames";

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

@@ -1,4 +1,4 @@
-import "../../../assets/index25.css";
+import "../../../assets/index26.css";
 import { jsx as i, jsxs as d, Fragment as x } from "react/jsx-runtime";
 import T from "classnames";
 import { forwardRef as _ } from "react";
@@ -8,19 +8,13 @@ import { faEllipsis as g, faArrowRight as P } from "@fortawesome/free-solid-svg-
 import { KitIcon as C } from "../../General/Icon/index.js";
 import { KitTypography as K } from "../../General/Typography/index.js";
 import { KitDivider as F } from "../../Layout/Divider/index.js";
-import "../../Layout/Space/index.js";
-import "color-convert";
-import "color-string";
-import "lodash/isEmpty";
-import "../../../chunks/styles.module.4eW8VunD.js";
-import "../../Layout/PageLayout/index.js";
 import { KitButton as k } from "../../General/Button/index.js";
 import { KitTooltip as L } from "../Tooltip/index.js";
 import { KitDropDown as A } from "../../Navigation/DropDown/index.js";
 import { u as j } from "../../../chunks/useKitLocale.96CdK3og.js";
 const G = {
   "kit-redirect-card": "_kit-redirect-card_poxps_2"
-}, w = ({ actions: r, actionsInDropdown: m = !1, disabled: t = !1 }) => {
+}, w = ({ actions: r, actionsInDropdown: m = !1, disabled: e = !1 }) => {
   var n, s;
   const { locale: l } = j();
   if (!r)
@@ -28,23 +22,23 @@ const G = {
   const o = r.length < 4;
   let c;
   if (m && r.length > 1)
-    c = i(A, { disabled: t, menu: { items: r }, children: i(k, { title: (n = l.General) === null || n === void 0 ? void 0 : n.more, type: "secondary", icon: i(f, { icon: g }), disableSecureClick: !0, onClick: (e) => e.stopPropagation() }) });
+    c = i(A, { disabled: e, menu: { items: r }, children: i(k, { title: (n = l.General) === null || n === void 0 ? void 0 : n.more, type: "secondary", icon: i(f, { icon: g }), disableSecureClick: !0, onClick: (t) => t.stopPropagation() }) });
   else if (o)
-    c = r.map((e) => i(N, { action: e, disabled: t }, e.key));
+    c = r.map((t) => i(N, { action: t, disabled: e }, t.key));
   else {
-    const [e, p, ...h] = r;
-    c = d(x, { children: [[e, p].map((a) => i(N, { action: a, disabled: t }, a.key)), i(A, { disabled: t, menu: { items: h }, children: i(k, { title: (s = l.General) === null || s === void 0 ? void 0 : s.more, type: "secondary", icon: i(f, { icon: g }), disableSecureClick: !0, onClick: (a) => a.stopPropagation() }) })] });
+    const [t, p, ...h] = r;
+    c = d(x, { children: [[t, p].map((a) => i(N, { action: a, disabled: e }, a.key)), i(A, { disabled: e, menu: { items: h }, children: i(k, { title: (s = l.General) === null || s === void 0 ? void 0 : s.more, type: "secondary", icon: i(f, { icon: g }), disableSecureClick: !0, onClick: (a) => a.stopPropagation() }) })] });
   }
   return i("div", { className: "kit-redirect-card-actions", children: c });
-}, N = ({ action: r, disabled: m }) => i(L, { title: r.label, children: i(k, { type: "secondary", icon: r.icon, onClick: (t) => {
-  t.stopPropagation(), r.onClick(t);
-}, disabled: r.disabled || m, disableSecureClick: !0 }) }), M = _(({ className: r, style: m, title: t, description: n, icon: s, coverSrc: l, disabled: o, actions: c, actionsInDropdown: e, onClick: p, coverAlt: h = "" }, a) => {
+}, N = ({ action: r, disabled: m }) => i(L, { title: r.label, children: i(k, { type: "secondary", icon: r.icon, onClick: (e) => {
+  e.stopPropagation(), r.onClick(e);
+}, disabled: r.disabled || m, disableSecureClick: !0 }) }), M = _(({ className: r, style: m, title: e, description: n, icon: s, coverSrc: l, disabled: o, actions: c, actionsInDropdown: t, onClick: p, coverAlt: h = "" }, a) => {
   const v = s !== void 0 && l === void 0, y = l !== void 0, u = c !== void 0, D = 2, { appId: I } = B(), R = T(G["kit-redirect-card"], r, I, {
     "kit-redirect-card-disabled": o,
     "kit-redirect-card-with-cover": y,
     "kit-redirect-card-with-actions": u
   });
-  return d("div", { className: R, tabIndex: o ? -1 : 0, style: m, onClick: p, ref: a, children: [u && v && i(w, { actions: c, disabled: o, actionsInDropdown: !!e }), v && i(C, { className: "kit-redirect-card-icon", icon: s }), y && d(x, { children: [d("div", { className: "kit-redirect-card-cover", children: [i("img", { alt: h, src: l }), i("div", { className: "kit-redirect-card-actions-mask" }), u && i(w, { actions: c, actionsInDropdown: !!e, disabled: o })] }), i(F, { noMargin: !0 })] }), d("div", { className: "kit-redirect-card-content", children: [d("section", { children: [i(K.Title, { ellipsis: { tooltip: !0 }, level: "h3", disabled: o, children: t }), n && i(K.Paragraph, { ellipsis: { rows: D, tooltip: n }, disabled: o, children: n })] }), i(C, { className: "kit-redirect-card-redirect-icon", icon: i(f, { icon: P }) })] })] });
+  return d("div", { className: R, tabIndex: o ? -1 : 0, style: m, onClick: p, ref: a, children: [u && v && i(w, { actions: c, disabled: o, actionsInDropdown: !!t }), v && i(C, { className: "kit-redirect-card-icon", icon: s }), y && d(x, { children: [d("div", { className: "kit-redirect-card-cover", children: [i("img", { alt: h, src: l }), i("div", { className: "kit-redirect-card-actions-mask" }), u && i(w, { actions: c, actionsInDropdown: !!t, disabled: o })] }), i(F, { noMargin: !0 })] }), d("div", { className: "kit-redirect-card-content", children: [d("section", { children: [i(K.Title, { ellipsis: { tooltip: !0 }, level: "h3", disabled: o, children: e }), n && i(K.Paragraph, { ellipsis: { rows: D, tooltip: n }, disabled: o, children: n })] }), i(C, { className: "kit-redirect-card-redirect-icon", icon: i(f, { icon: P }) })] })] });
 });
 M.displayName = "KitRedirectCard";
 export {

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

@@ -1,16 +1,16 @@
-import "../../../assets/index45.css";
+import "../../../assets/index46.css";
 import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as z, useMemo as _ } from "react";
+import { forwardRef as z, useMemo as k } from "react";
 import { Table as w } from "antd";
 import g from "classnames";
 import { u as O } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import { KitIcon as U } from "../../General/Icon/index.js";
-import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
+import { FontAwesomeIcon as _ } from "@fortawesome/react-fontawesome";
 import { faUpDown as W, faArrowDown as M, faArrowUp as B, faGripLines as F, faCaretDown as G, faCaretRight as $ } from "@fortawesome/free-solid-svg-icons";
 import { KitButton as I } from "../../General/Button/index.js";
 const y = {
-  "kit-table": "_kit-table_1ks06_2",
-  "expand-button": "_expand-button_1ks06_649"
+  "kit-table": "_kit-table_bvvfm_2",
+  "expand-button": "_expand-button_bvvfm_661"
 }, x = (i) => {
   const l = i == null ? void 0 : i.split(" "), t = l == null ? void 0 : l.filter((a) => a !== "ant-table-cell").join(" "), r = l == null ? void 0 : l.filter((a) => ["ant-table-cell", "ant-table-cell-ellipsis", "ant-table-selection-column"].includes(a)).join(" ");
   return {
@@ -19,17 +19,17 @@ const y = {
   };
 }, q = (i) => ({
   header: {
-    cell: ({ children: l, className: t, style: r, title: a, rowSpan: f, colSpan: v, ...b }) => {
+    cell: ({ children: l, className: t, style: r, title: a, rowSpan: f, colSpan: u, ...b }) => {
       const s = x(t);
-      return o("th", { className: s.antCell, style: r, title: a, rowSpan: f, colSpan: v, ...b, children: o("div", { className: s.internalCell, children: l }) });
+      return o("th", { className: s.antCell, style: r, title: a, rowSpan: f, colSpan: u, ...b, children: o("div", { className: s.internalCell, children: l }) });
     }
   },
   body: {
-    cell: ({ children: l, className: t, style: r, title: a, rowSpan: f, colSpan: v, ...b }) => {
+    cell: ({ children: l, className: t, style: r, title: a, rowSpan: f, colSpan: u, ...b }) => {
       var s, c;
       const h = (s = i == null ? void 0 : i.body) === null || s === void 0 ? void 0 : s.cell, n = x(t);
       let C = "";
-      return !((c = n.antCell) === null || c === void 0) && c.includes("ant-table-cell-ellipsis") && (C = a), o("td", { className: n.antCell, style: r, title: C, rowSpan: f, colSpan: v, children: o("div", { className: n.internalCell, children: h ? o(h, { title: a, ...b, children: l }) : l }) });
+      return !((c = n.antCell) === null || c === void 0) && c.includes("ant-table-cell-ellipsis") && (C = a), o("td", { className: n.antCell, style: r, title: C, rowSpan: f, colSpan: u, children: o("div", { className: n.internalCell, children: h ? o(h, { title: a, ...b, children: l }) : l }) });
     },
     row: ({ children: l, ...t }) => {
       var r;
@@ -50,31 +50,31 @@ const y = {
       l = W;
       break;
   }
-  return o(U, { color: t, icon: o(p, { icon: l }) });
+  return o(U, { color: t, icon: o(_, { icon: l }) });
 }, N = z(({ className: i, isDragging: l, ...t }, r) => {
   const a = g("kit-table-drag-handle", i, { "kit-table-drag-handle--dragging": l });
-  return o(I, { ...t, iconSize: "l", type: "tertiary", className: a, icon: o(p, { icon: F }), ref: r });
-}), J = ({ className: i, style: l, cellsBackgroundColor: t, backgroundColor: r, borderedRows: a, columns: f, onChange: v, components: b, showDragHandle: s, dragHandleElement: c, lineSize: h = "l", ...n }) => {
+  return o(I, { ...t, iconSize: "l", type: "tertiary", className: a, icon: o(_, { icon: F }), ref: r });
+}), J = ({ className: i, style: l, cellsBackgroundColor: t, backgroundColor: r, borderedRows: a, columns: f, onChange: u, components: b, showDragHandle: s, dragHandleElement: c, lineSize: h = "l", ...n }) => {
   const { appId: C, theme: T } = O(), A = g(C, y["kit-table"], i, {
     "kit-table-line-size-m": h === "m",
     "kit-table-bordered-rows": a
-  }), k = _(() => n != null && n.rowSelection ? { ...n == null ? void 0 : n.rowSelection, columnWidth: "var(--kit-table-checkbox-width)" } : n == null ? void 0 : n.rowSelection, [n == null ? void 0 : n.rowSelection]), K = _(() => {
-    const e = [...f].map((u) => s ? {
-      ...u,
+  }), p = k(() => n != null && n.rowSelection ? { ...n == null ? void 0 : n.rowSelection, columnWidth: "var(--kit-table-checkbox-width)" } : n == null ? void 0 : n.rowSelection, [n == null ? void 0 : n.rowSelection]), K = k(() => {
+    const e = [...f].map((v) => s ? {
+      ...v,
       sorter: void 0
-    } : (u.sorter && (u.sortIcon = ({ sortOrder: m }) => o(E, { sortOrder: m })), u));
-    return s && (k && e.unshift(w.SELECTION_COLUMN), e.unshift({
+    } : (v.sorter && (v.sortIcon = ({ sortOrder: m }) => o(E, { sortOrder: m })), v));
+    return s && (p && e.unshift(w.SELECTION_COLUMN), e.unshift({
       key: "drag-handle",
       align: "center",
       render: () => c ?? o(N, {})
     })), e;
-  }, [f, k, s, c]), R = (e, u, m, d) => {
-    v == null || v(e, m, d);
-  }, D = ({ record: e, expanded: u, onExpand: m }) => {
+  }, [f, p, s, c]), R = (e, v, m, d) => {
+    u == null || u(e, m, d);
+  }, D = ({ record: e, expanded: v, onExpand: m }) => {
     var d;
     if (!(!Array.isArray(e == null ? void 0 : e.children) || !(!((d = e == null ? void 0 : e.children) === null || d === void 0) && d.length)))
-      return o(I, { className: y["expand-button"], type: "tertiary", onClick: (j) => m(e, j), children: o(p, { icon: u ? G : $ }) });
-  }, L = (e, u, m) => {
+      return o(I, { className: y["expand-button"], type: "tertiary", onClick: (j) => m(e, j), children: o(_, { icon: v ? G : $ }) });
+  }, L = (e, v, m) => {
     var d;
     return m > 0 && (!Array.isArray(e == null ? void 0 : e.children) || !(!((d = e == null ? void 0 : e.children) === null || d === void 0) && d.length)) ? "last-expandable-level" : "";
   };
@@ -96,7 +96,7 @@ const y = {
       indentSize: T.spacing.m
     },
     ...n,
-    rowSelection: k
+    rowSelection: p
   });
 }, S = J;
 S.displayName = "KitTable";

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

@@ -1,41 +1,27 @@
 import "../../../assets/index5.css";
-import { jsxs as c, Fragment as j, jsx as r } from "react/jsx-runtime";
+import { jsxs as n, Fragment as j, jsx as l } from "react/jsx-runtime";
 import { useState as B } from "react";
 import { u as D } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import h from "classnames";
 import { KitButton as F } from "../../General/Button/index.js";
 import { KitTypography as z } from "../../General/Typography/index.js";
-import "../Avatar/index.js";
 import { KitBadge as C } from "../Badge/index.js";
-import "../ItemCard/index.js";
-import "../Collapse/index.js";
-import "../Empty/index.js";
-import "../Error/index.js";
-import "../IdCard/index.js";
-import "../Image/index.js";
-import "../ItemList/index.js";
-import "../Table/index.js";
-import "../Tag/index.js";
-import "../Tree/index.js";
-import "../Tooltip/index.js";
-import "antd";
-import "../RedirectCard/index.js";
 import { FontAwesomeIcon as E } from "@fortawesome/react-fontawesome";
 import { faPlus as O } from "@fortawesome/free-solid-svg-icons";
 const P = {
   "kit-tabs": "_kit-tabs_1i9lf_2"
-}, U = ({ addTab: v, centered: w, className: x, activeKey: e, defaultKey: n, items: o, onChange: i, fullwidthTab: u, size: b = "small", variant: l = "classic" }) => {
-  var a, p;
-  const { appId: y } = D(), [_, f] = B(n ?? ((a = o[0]) === null || a === void 0 ? void 0 : a.key)), k = e ?? _, N = (p = o.find((t) => t.key === k)) === null || p === void 0 ? void 0 : p.tabContent, T = h(y, x, P["kit-tabs"], w ? "centered" : "", b === "small" ? "small" : "medium", l, u ? "fullwidth" : "", N && l === "pill" ? "tabs-bottom-spacing" : ""), A = (t) => {
+}, U = ({ addTab: v, centered: w, className: x, activeKey: r, defaultKey: a, items: o, onChange: i, fullwidthTab: u, size: b = "small", variant: s = "classic" }) => {
+  var m, d;
+  const { appId: y } = D(), [_, f] = B(a ?? ((m = o[0]) === null || m === void 0 ? void 0 : m.key)), k = r ?? _, N = (d = o.find((t) => t.key === k)) === null || d === void 0 ? void 0 : d.tabContent, T = h(y, x, P["kit-tabs"], w ? "centered" : "", b === "small" ? "small" : "medium", s, u ? "fullwidth" : "", N && s === "pill" ? "tabs-bottom-spacing" : ""), A = (t) => {
     f(t), i == null || i(t);
-  }, I = (t, s) => {
-    t.code === "Enter" && (f(s), i == null || i(s));
+  }, I = (t, c) => {
+    t.code === "Enter" && (f(c), i == null || i(c));
   };
-  return c(j, { children: [c("div", { className: T, role: "tablist", children: [o == null ? void 0 : o.map(({ icon: t, label: s, badgeCount: K, key: m, disabled: d }) => c("div", { className: h("kit-tab", l, {
-    disabled: d,
-    active: k === m,
+  return n(j, { children: [n("div", { className: T, role: "tablist", children: [o == null ? void 0 : o.map(({ icon: t, label: c, badgeCount: K, key: e, disabled: p }) => n("div", { className: h("kit-tab", s, {
+    disabled: p,
+    active: k === e,
     fullwidth: u
-  }), role: "tab", tabIndex: 0, onClick: d ? void 0 : () => A(m), onKeyDown: d ? void 0 : (S) => I(S, m), children: [t && r("div", { className: "kit-tab-icon", children: t }), c("div", { className: "kit-tab-label-wrapper", children: [r(z.Text, { className: "kit-tab-label", size: b === "medium" ? "fontSize4" : void 0, children: s }), !!K && r(C, { className: "kit-tab-count", count: K })] })] }, m)), v && l === "classic" && r(F, { disableSecureClick: !0, type: "tertiary", icon: r(E, { icon: O }), onClick: v })] }), N] });
+  }), role: "tab", tabIndex: 0, onClick: p ? void 0 : () => A(e), onKeyDown: p ? void 0 : (S) => I(S, e), children: [t && l("div", { className: "kit-tab-icon", children: t }), n("div", { className: "kit-tab-label-wrapper", children: [l(z.Text, { className: "kit-tab-label", size: b === "medium" ? "fontSize4" : void 0, children: c }), !!K && l(C, { className: "kit-tab-count", count: K })] })] }, e)), v && s === "classic" && l(F, { disableSecureClick: !0, type: "tertiary", icon: l(E, { icon: O }), onClick: v })] }), N] });
 };
 U.displayName = "KitTabs";
 export {

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

@@ -1,4 +1,4 @@
-import "../../../assets/index38.css";
+import "../../../assets/index39.css";
 import { jsx as i, Fragment as C, jsxs as x } from "react/jsx-runtime";
 import { forwardRef as D, useState as W, useRef as N, useLayoutEffect as E } from "react";
 import O from "classnames";

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

@@ -1,17 +1,17 @@
 import "../../../assets/index6.css";
 import { jsx as r } from "react/jsx-runtime";
-import { Tree as n } from "antd";
-import { u as a } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import s from "classnames";
-import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
-import { faCircleNotch as d } from "@fortawesome/free-solid-svg-icons";
-const c = {
-  "kit-tree": "_kit-tree_8rr59_2"
-}, l = ({ className: e, switcherLoadingIcon: o, ...t }) => {
-  const { appId: i } = a(), m = s(i, c["kit-tree"], e);
-  return r(n, { ...t, switcherLoadingIcon: o ?? r(p, { icon: d, spin: !0 }), className: m, blockNode: !0, draggable: !1, onDragEnd: void 0, onDragEnter: void 0, onDragLeave: void 0, onDragOver: void 0, onDragStart: void 0, onDrop: void 0 });
+import { Tree as p } from "antd";
+import { u as s } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import d from "classnames";
+import { FontAwesomeIcon as e } from "@fortawesome/react-fontawesome";
+import { faCircleNotch as c, faCaretRight as l } from "@fortawesome/free-solid-svg-icons";
+const v = {
+  "kit-tree": "_kit-tree_1dpps_2"
+}, f = ({ className: t, switcherLoadingIcon: o, ...i }) => {
+  const { appId: n } = s(), a = d(n, v["kit-tree"], t);
+  return r(p, { ...i, switcherLoadingIcon: o ?? r(e, { icon: c, spin: !0 }), switcherIcon: (m) => r(e, { icon: l, rotation: m.expanded ? 90 : void 0 }), className: a, blockNode: !0, draggable: !1, onDragEnd: void 0, onDragEnter: void 0, onDragLeave: void 0, onDragOver: void 0, onDragStart: void 0, onDrop: void 0 });
 };
-l.displayName = "KitTree";
+f.displayName = "KitTree";
 export {
-  l as KitTree
+  f as KitTree
 };

package/dist/Kit/DataDisplay/Tree/types.d.ts

@@ -12,7 +12,9 @@ type AntdTreeTypesToOmit =
     | 'onDragOver'
     | 'onDragStart'
     | 'onDrop'
-    | 'filterTreeNode';
+    | 'filterTreeNode'
+    | 'showLine'
+    | 'switcherIcon';
 
 export interface IKitTree
     extends Omit<TreeProps<BasicDataNode | DataNode>, AntdTreeTypesToOmit>,

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

@@ -3,7 +3,7 @@ import { jsx as t } from "react/jsx-runtime";
 import { forwardRef as x, useState as y } from "react";
 import { AutoComplete as F } from "antd";
 import { KitInput as O } from "../Input/index.js";
-import { K as P } from "../../../chunks/InputWrapper._05UBJgS.js";
+import { K as P } from "../../../chunks/InputWrapper.DPygx2dQ.js";
 import { FontAwesomeIcon as j } from "@fortawesome/react-fontawesome";
 import { faMagnifyingGlass as B } from "@fortawesome/free-solid-svg-icons";
 import G from "classnames";

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

@@ -1,4 +1,4 @@
-import "../../../assets/index30.css";
+import "../../../assets/index31.css";
 import { jsx as s } from "react/jsx-runtime";
 import { createContext as P, memo as p, forwardRef as O, useContext as R, useState as w, useEffect as I, useRef as ee } from "react";
 import $ from "classnames";
@@ -7,7 +7,7 @@ import { u as ae } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import ne from "rc-util/es/omit";
 import { ConfigContext as ie } from "antd/es/config-provider/";
 import ce from "antd/es/checkbox/style";
-import { K as ue } from "../../../chunks/InputWrapper._05UBJgS.js";
+import { K as ue } from "../../../chunks/InputWrapper.DPygx2dQ.js";
 const j = P(null), te = ({ defaultValue: b, children: v, options: a = [], prefixCls: f, className: e, wrapperClassName: x, status: g, rootClassName: t, style: i, onChange: d, label: h, helper: o, required: r, actions: B, extra: k, ...n }, D) => {
   const { getPrefixCls: E, direction: T } = R(ie), [m, K] = w(n.value || b || []), [W, S] = w([]);
   I(() => {
@@ -16,7 +16,7 @@ const j = P(null), te = ({ defaultValue: b, children: v, options: a = [], prefix
   const _ = () => a.map((l) => typeof l == "string" || typeof l == "number" ? {
     label: l,
     value: l
-  } : l), z = (l) => {
+  } : l), q = (l) => {
     S((c) => c.filter((u) => u !== l));
   }, F = (l) => {
     S((c) => [...c, l]);
@@ -29,7 +29,7 @@ const j = P(null), te = ({ defaultValue: b, children: v, options: a = [], prefix
       return Y - Z;
     }));
   }, C = E("checkbox", f), V = `${C}-group`, [J, L] = ce(C), M = ne(n, ["value", "disabled", "bordered"]);
-  a && a.length > 0 && (v = _().map((l) => s(q, { prefixCls: C, danger: "danger" in l ? l.danger : n.danger, disabled: "disabled" in l ? l.disabled : n.disabled, value: l.value, checked: m.includes(l.value), onChange: l.onChange, className: `${V}-item`, style: l.style, children: l.label }, l.value.toString())));
+  a && a.length > 0 && (v = _().map((l) => s(z, { prefixCls: C, danger: "danger" in l ? l.danger : n.danger, disabled: "disabled" in l ? l.disabled : n.disabled, value: l.value, checked: m.includes(l.value), onChange: l.onChange, className: `${V}-item`, style: l.style, children: l.label }, l.value.toString())));
   const Q = {
     toggleOption: H,
     value: m,
@@ -37,14 +37,14 @@ const j = P(null), te = ({ defaultValue: b, children: v, options: a = [], prefix
     name: n.name,
     // https://github.com/ant-design/ant-design/issues/16376
     registerValue: F,
-    cancelValue: z
+    cancelValue: q
   }, U = $(V, {
     [`${V}-rtl`]: T === "rtl"
   }, e, t, L);
   return J(s("div", { className: U, style: i, ...M, ref: D, children: s(j.Provider, { value: Q, children: s(ue, { label: h, helper: o, disabled: n.disabled, bordered: n.bordered, status: g, className: x, required: r, extra: k ?? B, children: v }) }) }));
 }, de = p(O(te)), oe = de, re = {
-  "kit-checkbox": "_kit-checkbox_1qkle_2"
-}, q = O(({ danger: b, className: v, ...a }, f) => {
+  "kit-checkbox": "_kit-checkbox_ohoez_2"
+}, z = O(({ danger: b, className: v, ...a }, f) => {
   const e = R(j), { appId: x } = ae(), g = (e == null ? void 0 : e.disabled) || a.disabled, t = ee(a.value);
   I(() => {
     e == null || e.registerValue(a.value);
@@ -61,7 +61,7 @@ const j = P(null), te = ({ defaultValue: b, children: v, options: a = [], prefix
     "ant-checkbox-wrapper-danger": b
   });
   return s(le, { ...i, ref: f, disabled: g, className: d });
-}), A = q;
+}), A = z;
 A.displayName = "KitCheckbox";
 A.Group = oe;
 export {

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

@@ -1,82 +1,84 @@
-import "../../../assets/index26.css";
-import { forwardRef as G, useRef as U, useState as m, useEffect as H, useImperativeHandle as Y, createElement as q } from "react";
-import { jsxs as z, jsx as s } from "react/jsx-runtime";
-import { K as J } from "../../../chunks/InputWrapper._05UBJgS.js";
-import { u as Q } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { ColorPicker as Z } from "antd";
-import T from "classnames";
-import { FontAwesomeIcon as V } from "@fortawesome/react-fontawesome";
-import { faCircleXmark as oo } from "@fortawesome/free-solid-svg-icons";
-import { u as to } from "../../../chunks/useKitLocale.96CdK3og.js";
+import "../../../assets/index27.css";
+import { forwardRef as Y, useRef as q, useState as m, useEffect as b, useImperativeHandle as z, createElement as J } from "react";
+import { jsxs as Q, jsx as s } from "react/jsx-runtime";
+import { K as Z } from "../../../chunks/InputWrapper.DPygx2dQ.js";
+import { u as V } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { ColorPicker as oo } from "antd";
+import E from "classnames";
+import { FontAwesomeIcon as to } from "@fortawesome/react-fontawesome";
+import { faCircleXmark as eo } from "@fortawesome/free-solid-svg-icons";
+import { u as ro } from "../../../chunks/useKitLocale.96CdK3og.js";
 const h = {
   "kit-colorpicker": "_kit-colorpicker_1dih2_2",
   "kit-color-picker-clear": "_kit-color-picker-clear_1dih2_37",
   "kit-color-picker-placeholder": "_kit-color-picker-placeholder_1dih2_41",
   "kit-color-picker-text": "_kit-color-picker-text_1dih2_45"
-}, ro = 9, eo = 16, io = 255, co = (o) => {
-  if (o.length === ro) {
-    const r = o.slice(-2), t = Math.round(parseInt(r, eo) / io * 100);
-    return `${o.slice(0, 7)},${t}%`;
+}, io = 9, co = 16, no = 255, lo = (o) => {
+  if (o.length === io) {
+    const r = o.slice(-2), e = Math.round(parseInt(r, co) / no * 100);
+    return `${o.slice(0, 7)},${e}%`;
   }
   return o;
-}, no = (o, r) => {
+}, so = (o, r) => {
   switch (r) {
     case "hex":
-      return co(o.toHexString());
+      return lo(o.toHexString());
     case "rgb":
       return o.toRgbString();
     case "hsb":
       return o.toHsbString();
   }
-}, lo = (o, r, t, c) => c ? s("span", { className: h["kit-color-picker-placeholder"], children: t }) : s("span", { children: no(o, r) }), so = ({ color: o, format: r, showText: t, placeholder: c, isColorPickerValueEmpty: f, allowClear: _, onClear: p }) => {
+}, ao = (o, r, e, c) => c ? s("span", { className: h["kit-color-picker-placeholder"], children: e }) : s("span", { children: so(o, r) }), po = ({ color: o, format: r, showText: e, placeholder: c, isColorPickerValueEmpty: _, allowClear: f, onClear: p }) => {
   var n;
-  const { locale: l } = to(), a = t === !0, v = typeof t == "function" && t !== void 0, e = _ === !0, d = c ?? ((n = l.ColorPicker) === null || n === void 0 ? void 0 : n.selectAColor);
-  return z("div", { className: h["kit-color-picker-text"], children: [a && lo(o, r, d, f), v && s("span", { children: t(o) }), e && s(V, { className: h["kit-color-picker-clear"], "aria-label": "clear", icon: oo, onClick: (k) => {
+  const { locale: l } = ro(), a = e === !0, v = typeof e == "function" && e !== void 0, i = f === !0, d = c ?? ((n = l.ColorPicker) === null || n === void 0 ? void 0 : n.selectAColor);
+  return Q("div", { className: h["kit-color-picker-text"], children: [a && ao(o, r, d, _), v && s("span", { children: e(o) }), i && s(to, { className: h["kit-color-picker-clear"], "aria-label": "clear", icon: eo, onClick: (k) => {
     k.stopPropagation(), p();
   } })] });
-}, ao = G(({ label: o, className: r, helper: t, rootClassName: c, required: f, actions: _, extra: p, showText: n, allowClear: l, open: a = !1, placeholder: v, defaultValue: e, value: d, onChange: k, onClear: C, onOpenChange: x, format: E = "hex", ...P }, K) => {
-  const { appId: b } = Q(), N = U(null), [O, u] = m(a), [I, y] = m(e ?? d), [A, g] = m(l), [S, R] = m(E), [L, X] = m(0), w = n || A, D = T(b, "kit-colorpicker-panel", c), F = T(b, h["kit-colorpicker"], { "kit-colorpicker-with-text": !!n }, r);
-  H(() => {
-    g(l);
-  }, [l]), H(() => {
+}, ko = Y(({ label: o, className: r, helper: e, rootClassName: c, required: _, actions: f, extra: p, showText: n, allowClear: l, open: a = !1, placeholder: v, defaultValue: i, value: d, onChange: k, onClear: C, onOpenChange: x, onFormatChange: I, format: K = "hex", ...g }, N) => {
+  const { appId: S } = V(), O = q(null), [R, u] = m(a), [y, A] = m(i ?? d), [H, P] = m(l), [T, L] = m(K), [X, w] = m(0), D = n || H, j = E(S, "kit-colorpicker-panel", c), F = E(S, h["kit-colorpicker"], { "kit-colorpicker-with-text": !!n }, r);
+  b(() => {
+    P(l);
+  }, [l]), b(() => {
     u(a);
-  }, [a]), H(() => {
-    y(e ?? d);
-  }, [e, d]), Y(K, () => ({
+  }, [a]), b(() => {
+    A(i ?? d);
+  }, [i, d]), z(N, () => ({
     focus: () => {
       u(!0);
     },
     blur: () => {
       u(!1);
     },
-    value: I
+    value: y
   }));
-  const j = () => {
-    l && g(!1), y(void 0), X((i) => i + 1), C == null || C();
-  }, M = (i, B) => {
-    l && !A && g(!0), y(i), k == null || k(i, B);
-  }, W = (i) => {
-    a || u(i), x == null || x(i);
-  }, $ = I === void 0;
-  return s(J, { label: o, helper: t, disabled: P.disabled, required: f, extra: p ?? _, children: s("div", { ref: N, children: q(Z, {
-    ...P,
+  const M = () => {
+    l && P(!1), A(void 0), w((t) => t + 1), C == null || C();
+  }, W = (t, U) => {
+    l && !H && P(!0), A(t), k == null || k(t, U);
+  }, $ = (t) => {
+    a || u(t), x == null || x(t);
+  }, B = (t) => {
+    L(t), I == null || I(t);
+  }, G = y === void 0;
+  return s(Z, { label: o, helper: e, disabled: g.disabled, required: _, extra: p ?? f, children: s("div", { ref: O, children: J(oo, {
+    ...g,
     // This is a hack to force the color picker to re-render and display a clear value
     // https://react.dev/learn/preserving-and-resetting-state#option-2-resetting-state-with-a-key
-    key: L,
-    rootClassName: D,
+    key: X,
+    rootClassName: j,
     className: F,
-    format: S,
-    value: I,
-    ...w && {
-      showText: (i) => s(so, { color: i, format: S, showText: n, placeholder: v, isColorPickerValueEmpty: $, allowClear: A, onClear: j })
+    format: T,
+    value: y,
+    ...D && {
+      showText: (t) => s(po, { color: t, format: T, showText: n, placeholder: v, isColorPickerValueEmpty: G, allowClear: H, onClear: M })
     },
-    open: O,
-    onOpenChange: W,
-    onFormatChange: R,
-    onChange: M
+    open: R,
+    onOpenChange: $,
+    onFormatChange: B,
+    onChange: W
   }) }) });
 });
-ao.displayName = "KitColorPicker";
+ko.displayName = "KitColorPicker";
 export {
-  ao as KitColorPicker
+  ko as KitColorPicker
 };

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

@@ -1,11 +1,11 @@
-import "../../../assets/index46.css";
+import "../../../assets/index47.css";
 import { jsxs as R, jsx as e } from "react/jsx-runtime";
 import { forwardRef as C } from "react";
 import { DatePicker as K } from "antd";
 import D from "classnames";
 import { FontAwesomeIcon as o } from "@fortawesome/react-fontawesome";
 import { faChevronLeft as p, faChevronRight as h, faClock as j, faCalendar as g, faCircleXmark as w, faArrowRight as z } from "@fortawesome/free-solid-svg-icons";
-import { K as A } from "../../../chunks/InputWrapper._05UBJgS.js";
+import { K as A } from "../../../chunks/InputWrapper.DPygx2dQ.js";
 import { u as L } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 const W = {
   "kit-datepicker": "_kit-datepicker_1nfj8_2",

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

@@ -1,10 +1,10 @@
-import "../../../assets/index39.css";
+import "../../../assets/index40.css";
 import { jsx as l } from "react/jsx-runtime";
 import { forwardRef as p } from "react";
 import { Input as w } from "antd";
 import { faCircleXmark as k, faEye as z, faEyeSlash as C } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
-import { K as h } from "../../../chunks/InputWrapper._05UBJgS.js";
+import { K as h } from "../../../chunks/InputWrapper.DPygx2dQ.js";
 import { u as K } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import x from "classnames";
 import { KitTypography as y } from "../../General/Typography/index.js";

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

@@ -2,7 +2,7 @@ import "../../../assets/index7.css";
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as k, useState as x } from "react";
 import { InputNumber as _ } from "antd";
-import { K as N } from "../../../chunks/InputWrapper._05UBJgS.js";
+import { K as N } from "../../../chunks/InputWrapper.DPygx2dQ.js";
 import { u as h } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import w from "classnames";
 const y = {

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

@@ -1,4 +1,4 @@
-import { K as t } from "../../../chunks/InputWrapper._05UBJgS.js";
+import { K as t } from "../../../chunks/InputWrapper.DPygx2dQ.js";
 export {
   t as KitInputWrapper
 };

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

@@ -1,4 +1,4 @@
-import "../../../assets/index40.css";
+import "../../../assets/index41.css";
 import { jsx as i } from "react/jsx-runtime";
 import k from "classnames";
 import J from "rc-util/es/hooks/useMergedState";
@@ -8,7 +8,7 @@ import X from "antd/es/config-provider/SizeContext";
 import Y from "rc-util/es/pickAttrs";
 import { Radio as Z } from "antd";
 import { u as ee } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { K as ae } from "../../../chunks/InputWrapper._05UBJgS.js";
+import { K as ae } from "../../../chunks/InputWrapper.DPygx2dQ.js";
 import te from "antd/es/radio/style";
 const K = O(null), re = K.Provider, oe = {
   "kit-radio": "_kit-radio_lmqef_2"