aristid-ds 14.0.0-d129b0e → 14.0.0-e1a6d31

package/CHANGELOG.md

@@ -2,40 +2,62 @@
 
 ## [X.Y.Z](https://www.npmjs.com/package/aristid-ds/v/X.Y.Z) (2025-MM-DD)
 
-### ✨ Features 
--   **AutoComplete**:
+### ✨ Features
+
+-   **⚠️ Breaking change - Button**:
+    -   Remove `checked` prop from segmented button (@evoiron)
+-   **⚠️ Breaking change - IdCard**:
+    -   Replacing `size` options (@fatb38)
+        -   removing `medium` and `large`
+        -   adding `xxs-medium`, `xs-medium`, `xs-bold`, `s`, `m`, `l`, `xl`
+-   **⚠️ Breaking change - Input**:
+    -   Rename `readonly` property to `readonlyLight` (@philippechevieux)
+    -   Add `readonly` property whith a render similar to disabled state (@philippechevieux)
+-   **⚠️ Breaking change - DatePicker/RangePicker**:
+    -   Rename `readonly` property to `readonlyLight` (@philippechevieux)
+    -   Add `readonly` property whith a render similar to disabled state (@philippechevieux)
     -   Add `size` property to enable `small`, `middle` and `large` sizes (@fatb38)
-    
--   **ColorPicker**:
+-   **⚠️ Breaking change - RichText**:
+    -   Rename `readonly` property to `readonlyLight` (@philippechevieux)
+    -   Add `readonly` property whith a render similar to disabled state (@philippechevieux)
+-   **⚠️ Breaking change - Select**:
+    -   Rename `readonly` property to `readonlyLight` (@philippechevieux)
+    -   Add `readonly` property whith a render similar to disabled state (@philippechevieux)
     -   Add `size` property to enable `small`, `middle` and `large` sizes (@fatb38)
-
--   **DatePicker/RangePicker**:
+-   **⚠️ Breaking change - Avatar**:
+    -   Replace `size` option by : `xs`, `s`, `m`, `l`, `xl` (@fatb38)
+-   **Header**:
+    -   Change 'height' to 48px instead of 64px
+-   **SideMenu**:
+    -   Change 'width' to 48px instead of 64px
+-   **AutoComplete**:
     -   Add `size` property to enable `small`, `middle` and `large` sizes (@fatb38)
-
--   **Input**:
+-   **ColorPicker**:
     -   Add `size` property to enable `small`, `middle` and `large` sizes (@fatb38)
-
+    -   Add `readonly` property whith a render similar to disabled state (@philippechevieux)
 -   **InputNumber**:
     -   Add `size` property to enable `small`, `middle` and `large` sizes (@fatb38)
-    
--   **Select**:
-    -   Add `size` property to enable `small`, `middle` and `large` sizes (@fatb38)
-    
+    -   Add `readonly` property whith a render similar to disabled state (@philippechevieux)
 -   **SidePanel**:
     -   Add opening and closing animations (@philippechevieux)
-    
--   **SidePanel:**
+    -   Add `l` size (@7Remy)
     -   Add `useChildrenOnly` property to display the side panel as a container for other components or not. Also export two new components `KitSidePanelHeader` and `KitSidePanelContent` for layout purpose (@philippechevieux)
     -   Add `headerExtraButtons` property to display buttons or any components on the right side of the header next to the close button (@philippechevieux)
     -   Add `showSeparator` property to display a separator between header and content (@philippechevieux)
     -   Allow user to use `size` property when using `idCardProps` (@philippechevieux)
     -   Reduce internal paddings to save space (@philippechevieux)
-
 -   **IdCard:**
     -   Add support for ReactNode in `title` and `descriptions` props to allow custom rendering (@philippechevieux)
-    
+-   **Tabs:**
+    -   Add `xsmall` size (@florianSimonAristid)
 -   **All components with a DropDown:**
     -   All components using a dropdown inside a `SidePanel` component, will render the dropdown inside the `SidePanel`, to avoid issues with the `closeOnOutsideClick` property of `SidePanel` (@evoiron)
+-   **Snackbar**
+    -   Allow multiple snackbar areas (@evoiron)
+-   **Button**
+    -   Add size `m`and `s` to segmented button (@evoiron)
+-   **InputWrapper**:
+    -   Add forwardRef support to enable ref forwarding to the wrapper element (@philippechevieux)
 
 ### 🐛 Bug Fixes
 
@@ -44,6 +66,16 @@
 -   **DropDown:**
     -   Clicking outside the `DropDown` now closes it even when inside an iframe (@philippechevieux)
     -   Keep the `DropDown` open when selecting items (@philippechevieux)
+    -   Fix double toggle issue when clicking the trigger after closing via blur (@philippechevieux)
+-   **Upload:**
+    -   Fix upload dragger height unexpectedly growing in some cases (@evoiron)
+
+### 📚 Documentation
+
+-   **Table**:
+    -   Add `onRow` usage (@philippechevieux)
+-   **Filter**:
+    -   Update `With custom Action` exemple implementation (@philippechevieux)
 
 ## [14.0.0](https://www.npmjs.com/package/aristid-ds/v/14.0.0) (2025-05-20)
 

package/dist/Kit/App/index.js

@@ -2,7 +2,7 @@ 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";
-import { I as b } from "../../chunks/SnackBarProvider.nqDzpFo3.js";
+import { I as b } from "../../chunks/SnackBarProvider.hc5vyNRJ.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";

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

@@ -1,4 +1,4 @@
-import { s as t, K as n } from "../../../chunks/Avatar.N2w2jq_C.js";
+import { s as t, K as n } from "../../../chunks/Avatar.BvI60jet.js";
 import { jsx as u } from "react/jsx-runtime";
 import { Avatar as c } from "antd";
 import { u as d } from "../../../chunks/useKitTheme.KSAU-Pdv.js";

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

@@ -16,6 +16,7 @@ export interface IKitAvatar extends Omit<AvatarProps, AntdAvatarTypesToOmit>, Ki
     secondaryColorInvert?: boolean;
     imageFit?: KitImageFit;
     disabled?: boolean;
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
 }
 
 export interface IKitAvatarGroup

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

@@ -1,37 +1,72 @@
 import "../../../assets/index2.css";
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
 import n from "classnames";
-import { t as D } from "../../../chunks/styles.module.shsViPAW.js";
-import { u as v } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { K as N } from "../../../chunks/Avatar.N2w2jq_C.js";
-import { KitTooltip as y } from "../Tooltip/index.js";
+import { t as S } from "../../../chunks/styles.module.shsViPAW.js";
+import { u as T } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { K as v } from "../../../chunks/Avatar.BvI60jet.js";
+import { KitTooltip as d } from "../Tooltip/index.js";
 import { T as m } from "../../../chunks/constants.DINGxt3I.js";
-const T = {
-  "kit-id-card": "_kit-id-card_1go5o_2"
+const D = {
+  "kit-id-card": "_kit-id-card_1vabr_2"
 }, h = [
-  D["kit-typography-text"],
+  S["kit-typography-text"],
   "ant-typography",
   "ant-typography-text",
   "ant-typography-ellipsis",
   "ant-typography-ellipsis-single-line"
-], _ = (r, t, a, o) => {
-  const s = n("kit-id-card-title", ...h, "kit-typography-fontSize5", "ant-typography-bold", {
-    "kit-id-card-title-large": t === "large",
-    "ant-typography-disabled": a
+], z = (t) => {
+  switch (t) {
+    case "xl":
+      return "kit-typography-fontSize5";
+    case "l":
+      return "kit-typography-fontSize6";
+    default:
+      return "kit-typography-fontSize7";
+  }
+}, N = (t) => {
+  switch (t) {
+    case "xl":
+      return "kit-typography-fontSize1";
+    case "l":
+      return "kit-typography-fontSize2";
+    case "m":
+      return "kit-typography-fontSize3";
+    case "s":
+      return "kit-typography-fontSize4";
+    case "xs-bold":
+    case "xs-medium":
+    case "xxs-medium":
+      return "kit-typography-fontSize5";
+  }
+}, _ = (t) => {
+  switch (t) {
+    case "xl":
+    case "l":
+      return "xl";
+    case "m":
+    case "s":
+      return "l";
+    case "xxs-medium":
+      return "s";
+    default:
+      return "m";
+  }
+}, E = (t, e, r, i) => {
+  const s = n("kit-id-card-title", ...h, N(e), {
+    "ant-typography-bold": e !== "xs-medium",
+    "ant-typography-disabled": r
   });
-  return i("span", { className: s, children: i(y, { title: o ? "" : r, mouseEnterDelay: m, children: i("span", { children: r }) }) });
-}, E = (r, t, a, o) => {
-  const s = n("kit-id-card-description", ...h, "ant-typography-regular", {
-    "kit-typography-fontSize5": t !== "medium",
-    "kit-typography-fontSize7": t === "medium",
-    "ant-typography-disabled": a
+  return a("span", { className: s, children: a(d, { title: i ? "" : t, mouseEnterDelay: m, children: a("span", { children: t }) }) });
+}, K = (t, e, r, i) => {
+  const s = n("kit-id-card-description", ...h, "ant-typography-regular", z(e), {
+    "ant-typography-disabled": r
   });
-  return i("span", { className: s, children: i(y, { title: o ? "" : r, mouseEnterDelay: m, children: i("span", { children: r }) }) });
-}, K = ({ className: r, title: t, description: a, avatarProps: o, size: s = "medium", disabled: e = !1, disableTooltip: p = !1, ...g }) => {
-  const { appId: f } = v(), u = n(f, T["kit-id-card"], r), k = o !== void 0, l = t !== void 0, d = a !== void 0, x = l || d;
-  return c("div", { className: `${u} id-card-grid`, ...g, children: [k && i("div", { className: "card-avatar", children: i(N, { ...o, disabled: e }) }), x && c("div", { className: "card-info", children: [l && typeof t == "string" ? _(t, s, e, p) : t, d && typeof a == "string" ? E(a, s, e, p) : a] })] });
+  return a("span", { className: s, children: a(d, { title: i ? "" : t, mouseEnterDelay: m, children: a("span", { children: t }) }) });
+}, I = ({ className: t, title: e, description: r, avatarProps: i, size: s = "xs-bold", disabled: o = !1, disableTooltip: c = !1, ...u }) => {
+  const { appId: g } = T(), f = n(g, D["kit-id-card"], t), x = i !== void 0, p = e !== void 0, l = r !== void 0, k = p || l;
+  return y("div", { className: `${f} id-card-grid`, ...u, children: [x && a("div", { className: "card-avatar", children: a(v, { size: _(s), ...i, disabled: o }) }), k && y("div", { className: "card-info", children: [p && typeof e == "string" ? E(e, s, o, c) : e, l && typeof r == "string" ? K(r, s, o, c) : r] })] });
 };
-K.displayName = "KitIdCard";
+I.displayName = "KitIdCard";
 export {
-  K as KitIdCard
+  I as KitIdCard
 };

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

@@ -4,7 +4,7 @@ import {IKitAvatar} from '../Avatar/types';
 
 export interface IKitIdCard extends KitHTMLAttributes<HTMLDivElement> {
     avatarProps?: IKitAvatar;
-    size?: 'medium' | 'large';
+    size?: 'xxs-medium' | 'xs-medium' | 'xs-bold' | 's' | 'm' | 'l' | 'xl';
     title?: ReactNode;
     description?: ReactNode;
     disabled?: boolean;

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

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

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

@@ -8,7 +8,7 @@ type IKitTabs = {
     activeKey?: string;
     defaultKey?: string;
     onChange?: (tabKey: string) => void;
-    size?: 'small' | 'medium';
+    size?: 'xsmall' | 'small' | 'medium';
     fullwidthTab?: boolean;
     variant?: 'classic' | 'pill';
 };

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

@@ -1,9 +1,9 @@
 import "../../../assets/index38.css";
-import { jsx as t, Fragment as E, jsxs as W } from "react/jsx-runtime";
+import { jsx as t, Fragment as A, jsxs as W } from "react/jsx-runtime";
 import { forwardRef as D, useState as G, useRef as O, useLayoutEffect as L } from "react";
-import $ from "classnames";
+import E from "classnames";
 import { Tag as z } from "antd";
-import { u as x } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { u as $ } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import { FontAwesomeIcon as P } from "@fortawesome/react-fontawesome";
 import { faXmark as X } from "@fortawesome/free-solid-svg-icons";
 import { KitIdCard as j } from "../IdCard/index.js";
@@ -16,31 +16,31 @@ const I = {
   "kit-tag-group": "_kit-tag-group_6ocqb_111",
   "kit-tag-group-measure": "_kit-tag-group-measure_6ocqb_117",
   "kit-tag-group-container": "_kit-tag-group-container_6ocqb_124"
-}, h = D(({ className: r, closeIcon: s, type: a = "neutral", disabled: i, disableTooltip: c = !1, onClick: p, idCardProps: o, ...d }, u) => {
-  const { appId: b } = x(), _ = $(b, I["kit-tag"], r, {
-    [`kit-tag-${a}`]: a,
+}, h = D(({ className: r, closeIcon: s, type: c = "neutral", disabled: i, disableTooltip: a = !1, onClick: p, idCardProps: o, ...d }, u) => {
+  const { appId: b } = $(), _ = E(b, I["kit-tag"], r, {
+    [`kit-tag-${c}`]: c,
     "kit-tag-disabled": i,
     "kit-tag-clickable": p
   });
-  return t(z, { tabIndex: i ? M : R, ref: u, ...d, className: _, closeIcon: s ?? t(P, { icon: X }), onClick: p, closable: !!d.onClose, children: t(j, { disabled: i, disableTooltip: c, avatarProps: o != null && o.avatarProps ? { ...o == null ? void 0 : o.avatarProps, size: "small" } : void 0, description: o == null ? void 0 : o.description }) });
-}), H = ({ tags: r, containerRef: s, measureRef: a, handleCloseTag: i }) => {
-  var c;
-  const [p, o] = G([]), [d, u] = G(0), [b, _] = G(t(E, {})), v = O(null), { locale: T } = F();
+  return t(z, { tabIndex: i ? M : R, ref: u, ...d, className: _, closeIcon: s ?? t(P, { icon: X }), onClick: p, closable: !!d.onClose, children: t(j, { disabled: i, disableTooltip: a, avatarProps: o != null && o.avatarProps ? { ...o == null ? void 0 : o.avatarProps, size: "xs" } : void 0, description: o == null ? void 0 : o.description }) });
+}), H = ({ tags: r, containerRef: s, measureRef: c, handleCloseTag: i }) => {
+  var a;
+  const [p, o] = G([]), [d, u] = G(0), [b, _] = G(t(A, {})), v = O(null), { locale: T } = F();
   return L(() => {
     const K = () => {
       var k, g, e;
-      const l = s.current, f = a.current;
+      const l = s.current, f = c.current;
       if (!l || !f)
         return;
-      _(W(E, { children: [r.map((n, y) => t(h, { type: n == null ? void 0 : n.type, disabled: n == null ? void 0 : n.disabled, idCardProps: n.idCardProps, onClose: () => {
+      _(W(A, { children: [r.map((n, y) => t(h, { type: n == null ? void 0 : n.type, disabled: n == null ? void 0 : n.disabled, idCardProps: n.idCardProps, onClose: () => {
         i == null || i(y);
       } }, y)), t(h, { idCardProps: { description: `+${d} ${(k = T.General) === null || k === void 0 ? void 0 : k.others}` } })] }));
       const q = l == null ? void 0 : l.clientWidth, w = Array.from(f.children), B = (g = w[w.length - 1]) === null || g === void 0 ? void 0 : g.clientWidth;
-      let A = 0, C = 0;
+      let x = 0, C = 0;
       for (let n = 0; n < w.length - 1; n++) {
         const y = ((e = w[n]) === null || e === void 0 ? void 0 : e.clientWidth) + 8;
-        if (A + y + 8 + (n < r.length - 1 ? B : 0) <= q)
-          A += y, C++;
+        if (x + y + 8 + (n < r.length - 1 ? B : 0) <= q)
+          x += y, C++;
         else
           break;
       }
@@ -53,20 +53,20 @@ const I = {
     return K(), v.current = new ResizeObserver(N), s.current && v.current.observe(s.current), () => {
       v.current && v.current.disconnect(), clearTimeout(m);
     };
-  }, [s, i, d, (c = T.General) === null || c === void 0 ? void 0 : c.others, a, r]), {
+  }, [s, i, d, (a = T.General) === null || a === void 0 ? void 0 : a.others, c, r]), {
     measureTags: b,
     visibleTags: p,
     hiddenCount: d
   };
-}, J = ({ tags: r, style: s, className: a, handleCloseTag: i, othersTagType: c = "neutral", othersTagDisabled: p }) => {
+}, J = ({ tags: r, style: s, className: c, handleCloseTag: i, othersTagType: a = "neutral", othersTagDisabled: p }) => {
   var o;
-  const d = O(null), u = O(null), { locale: b } = F(), { appId: _ } = x(), [v, T] = G(!1), { measureTags: K, visibleTags: m, hiddenCount: N } = H({ tags: r, containerRef: d, measureRef: u, handleCloseTag: i }), k = () => r.slice(m.length).map((e, l) => {
+  const d = O(null), u = O(null), { locale: b } = F(), { appId: _ } = $(), [v, T] = G(!1), { measureTags: K, visibleTags: m, hiddenCount: N } = H({ tags: r, containerRef: d, measureRef: u, handleCloseTag: i }), k = () => r.slice(m.length).map((e, l) => {
     var f;
     return t("div", { children: (f = e.idCardProps) === null || f === void 0 ? void 0 : f.description }, l);
-  }), g = $(_, I["kit-tag-group"], a);
+  }), g = E(_, I["kit-tag-group"], c);
   return W("div", { className: I["kit-tag-group-container"], children: [W("div", { ref: d, style: s, className: g, children: [m.map((e, l) => t(h, { type: e == null ? void 0 : e.type, disabled: e == null ? void 0 : e.disabled, idCardProps: e.idCardProps, onClose: i ? () => {
     i(l);
-  } : void 0 }, l)), N > 0 && t(V, { overlay: k(), children: t(h, { type: c, disabled: p, disableTooltip: !0, idCardProps: { description: `+${N} ${(o = b.General) === null || o === void 0 ? void 0 : o.others}` }, onClick: () => T(!0) }) }), t(U, { isOpen: v, close: () => T(!1), showCloseIcon: !0, title: "Tags", appElement: document.body, children: t("div", { style: { display: "flex", flexWrap: "wrap", rowGap: "8px" }, children: r.map((e, l) => t(h, { id: `tag-${l}`, type: e == null ? void 0 : e.type, disabled: e == null ? void 0 : e.disabled, idCardProps: e.idCardProps, onClose: i ? () => {
+  } : void 0 }, l)), N > 0 && t(V, { overlay: k(), children: t(h, { type: a, disabled: p, disableTooltip: !0, idCardProps: { description: `+${N} ${(o = b.General) === null || o === void 0 ? void 0 : o.others}` }, onClick: () => T(!0) }) }), t(U, { isOpen: v, close: () => T(!1), showCloseIcon: !0, title: "Tags", appElement: document.body, children: t("div", { style: { display: "flex", flexWrap: "wrap", rowGap: "8px" }, children: r.map((e, l) => t(h, { id: `tag-${l}`, type: e == null ? void 0 : e.type, disabled: e == null ? void 0 : e.disabled, idCardProps: e.idCardProps, onClose: i ? () => {
     i(l);
   } : void 0 }, l)) }) })] }), t("div", { ref: u, className: I["kit-tag-group-measure"], "aria-hidden": "true", children: K })] });
 }, Q = J, S = h;

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

@@ -3,11 +3,11 @@ import { jsx as e } from "react/jsx-runtime";
 import { forwardRef as O, useState as b, useRef as j } from "react";
 import { AutoComplete as B } from "antd";
 import { KitInput as M } from "../Input/index.js";
-import { K as S } from "../../../chunks/InputWrapper.XK7lKnUm.js";
+import { K as S } from "../../../chunks/InputWrapper.hIFFr5AB.js";
 import { FontAwesomeIcon as W } from "@fortawesome/react-fontawesome";
 import { faMagnifyingGlass as q } from "@fortawesome/free-solid-svg-icons";
 import z from "classnames";
-import { u as D } from "../../../chunks/useGetPopupContainer.1ha3p9Qd.js";
+import { u as D } from "../../../chunks/useGetPopupContainer.efPkxYe1.js";
 const E = {
   "kit-autocomplete": "_kit-autocomplete_kox09_2"
 }, H = (t, r, o) => z(t, "ant-select-dropdown", "kit-select-dropdown-bottom", {

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

@@ -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.XK7lKnUm.js";
+import { K as ue } from "../../../chunks/InputWrapper.hIFFr5AB.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(() => {

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

@@ -1,87 +1,91 @@
 import "../../../assets/index26.css";
-import { forwardRef as J, useRef as Q, useState as d, useEffect as b, useImperativeHandle as Z, createElement as V } from "react";
-import { jsxs as oo, jsx as s } from "react/jsx-runtime";
-import { K as to } from "../../../chunks/InputWrapper.XK7lKnUm.js";
-import { u as eo } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { ColorPicker as ro } from "antd";
-import N from "classnames";
-import { FontAwesomeIcon as io } from "@fortawesome/react-fontawesome";
-import { faCircleXmark as no } from "@fortawesome/free-solid-svg-icons";
-import { u as co } from "../../../chunks/useKitLocale.96CdK3og.js";
-import { u as lo } from "../../../chunks/useGetPopupContainer.1ha3p9Qd.js";
-const u = {
-  "kit-colorpicker": "_kit-colorpicker_7zhkg_2",
-  "kit-color-picker-clear": "_kit-color-picker-clear_7zhkg_37",
-  "kit-color-picker-placeholder": "_kit-color-picker-placeholder_7zhkg_41",
-  "kit-color-picker-text": "_kit-color-picker-text_7zhkg_45"
-}, so = 9, ao = 16, po = 255, ko = (o) => {
-  if (o.length === so) {
-    const r = o.slice(-2), e = Math.round(parseInt(r, ao) / po * 100);
-    return `${o.slice(0, 7)},${e}%`;
+import { forwardRef as Z, useRef as V, useState as d, useEffect as T, useImperativeHandle as oo, createElement as to } from "react";
+import { jsxs as ro, jsx as l } from "react/jsx-runtime";
+import { K as eo } from "../../../chunks/InputWrapper.hIFFr5AB.js";
+import { u as io } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { ColorPicker as no } from "antd";
+import O from "classnames";
+import { FontAwesomeIcon as co } from "@fortawesome/react-fontawesome";
+import { faCircleXmark as lo } from "@fortawesome/free-solid-svg-icons";
+import { u as so } from "../../../chunks/useKitLocale.96CdK3og.js";
+import { u as ao } from "../../../chunks/useGetPopupContainer.efPkxYe1.js";
+const f = {
+  "kit-colorpicker": "_kit-colorpicker_19hvp_2",
+  "kit-color-picker-clear": "_kit-color-picker-clear_19hvp_40",
+  "kit-color-picker-placeholder": "_kit-color-picker-placeholder_19hvp_44",
+  "kit-color-picker-text": "_kit-color-picker-text_19hvp_48"
+}, po = 9, ko = 16, uo = 255, mo = (o) => {
+  if (o.length === po) {
+    const e = o.slice(-2), r = Math.round(parseInt(e, ko) / uo * 100);
+    return `${o.slice(0, 7)},${r}%`;
   }
   return o;
-}, mo = (o, r) => {
-  switch (r) {
+}, ho = (o, e) => {
+  switch (e) {
     case "hex":
-      return ko(o.toHexString());
+      return mo(o.toHexString());
     case "rgb":
       return o.toRgbString();
     case "hsb":
       return o.toHsbString();
   }
-}, uo = (o, r, e, n) => n ? s("span", { className: u["kit-color-picker-placeholder"], children: e }) : s("span", { children: mo(o, r) }), ho = ({ color: o, format: r, showText: e, placeholder: n, isColorPickerValueEmpty: h, allowClear: f, onClear: p }) => {
-  var c;
-  const { locale: l } = co(), a = e === !0, _ = typeof e == "function" && e !== void 0, i = f === !0, k = n ?? ((c = l.ColorPicker) === null || c === void 0 ? void 0 : c.selectAColor);
-  return oo("div", { className: u["kit-color-picker-text"], children: [a && uo(o, r, k, h), _ && s("span", { children: e(o) }), i && s(io, { className: u["kit-color-picker-clear"], "aria-label": "clear", icon: no, onClick: (v) => {
-    v.stopPropagation(), p();
+}, fo = (o, e, r, c, a) => {
+  if (!(a && c))
+    return c ? l("span", { className: f["kit-color-picker-placeholder"], children: r }) : l("span", { children: ho(o, e) });
+}, vo = ({ color: o, format: e, showText: r, placeholder: c, isColorPickerValueEmpty: a, allowClear: v, readonly: p, onClear: k }) => {
+  var i;
+  const { locale: s } = so(), _ = r === !0, n = typeof r == "function" && r !== void 0, u = v === !0, C = c ?? ((i = s.ColorPicker) === null || i === void 0 ? void 0 : i.selectAColor);
+  return ro("div", { className: f["kit-color-picker-text"], children: [_ && fo(o, e, C, a, p), n && l("span", { children: r(o) }), u && l(co, { className: f["kit-color-picker-clear"], "aria-label": "clear", icon: lo, onClick: (m) => {
+    m.stopPropagation(), k();
   } })] });
-}, fo = J(({ label: o, className: r, helper: e, rootClassName: n, required: h, actions: f, extra: p, showText: c, allowClear: l, open: a = !1, placeholder: _, defaultValue: i, value: k, getPopupContainer: v, onChange: C, onClear: x, onOpenChange: g, onFormatChange: I, format: O = "hex", size: R = "large", ...S }, z) => {
-  const { appId: T } = eo(), E = Q(null), [L, m] = d(a), [P, y] = d(i ?? k), [A, H] = d(l), [K, X] = d(O), [w, D] = d(0), G = lo(E, v), j = c || A, F = N(T, "kit-colorpicker-panel", n), M = N(T, u["kit-colorpicker"], { "kit-colorpicker-with-text": !!c }, r);
-  b(() => {
-    H(l);
-  }, [l]), b(() => {
-    m(a);
-  }, [a]), b(() => {
-    y(i ?? k);
-  }, [i, k]), Z(z, () => ({
+}, _o = Z(({ label: o, className: e, helper: r, rootClassName: c, required: a, actions: v, extra: p, showText: k, allowClear: i, open: s = !1, placeholder: _, defaultValue: n, value: u, getPopupContainer: C, onChange: m, onClear: x, onOpenChange: I, onFormatChange: P, disabled: K, readonly: g = !1, format: R = "hex", size: L = "large", ...X }, w) => {
+  const { appId: N } = io(), b = V(null), [D, h] = d(s), [A, y] = d(n ?? u), [H, S] = d(i), [E, G] = d(R), [j, F] = d(0), M = ao(b, C), W = k || H, $ = O(N, "kit-colorpicker-panel", c), B = O(N, f["kit-colorpicker"], { "kit-colorpicker-with-text": !!k, "kit-colorpicker-readonly": g }, e);
+  T(() => {
+    S(i);
+  }, [i]), T(() => {
+    h(s);
+  }, [s]), T(() => {
+    y(n ?? u);
+  }, [n, u]), oo(w, () => ({
     focus: () => {
-      m(!0);
+      h(!0);
     },
     blur: () => {
-      m(!1);
+      h(!1);
     },
-    value: P
+    value: A
   }));
-  const W = () => {
-    l && H(!1), y(void 0), D((t) => t + 1), x == null || x();
-  }, $ = (t, q) => {
-    l && !A && H(!0), y(t), C == null || C(t, q);
-  }, B = (t) => {
-    a || m(t), g == null || g(t);
-  }, U = (t) => {
-    X(t), I == null || I(t);
-  }, Y = P === void 0;
-  return s(to, { label: o, helper: e, disabled: S.disabled, required: h, extra: p ?? f, children: s("div", { ref: E, children: V(ro, {
-    ...S,
+  const U = () => {
+    i && S(!1), y(void 0), F((t) => t + 1), x == null || x();
+  }, Y = (t, Q) => {
+    i && !H && S(!0), y(t), m == null || m(t, Q);
+  }, q = (t) => {
+    s || h(t), I == null || I(t);
+  }, z = (t) => {
+    G(t), P == null || P(t);
+  }, J = A === void 0;
+  return l(eo, { label: o, helper: r, disabled: K, required: a, extra: p ?? v, children: l("div", { ref: b, children: to(no, {
+    ...X,
     // 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: w,
-    getPopupContainer: G,
-    rootClassName: F,
-    className: M,
-    format: K,
-    size: R,
-    value: P,
-    ...j && {
-      showText: (t) => s(ho, { color: t, format: K, showText: c, placeholder: _, isColorPickerValueEmpty: Y, allowClear: A, onClear: W })
+    key: j,
+    getPopupContainer: M,
+    rootClassName: $,
+    className: B,
+    format: E,
+    size: L,
+    value: A,
+    disabled: K || g,
+    ...W && {
+      showText: (t) => l(vo, { color: t, format: E, showText: k, placeholder: _, readonly: g, isColorPickerValueEmpty: J, allowClear: H, onClear: U })
     },
-    open: L,
-    onOpenChange: B,
-    onFormatChange: U,
-    onChange: $
+    open: D,
+    onOpenChange: q,
+    onFormatChange: z,
+    onChange: Y
   }) }) });
 });
-fo.displayName = "KitColorPicker";
+_o.displayName = "KitColorPicker";
 export {
-  fo as KitColorPicker
+  _o as KitColorPicker
 };

package/dist/Kit/DataEntry/ColorPicker/types.d.ts

@@ -3,7 +3,7 @@ import {KitHTMLAttributes} from '../../../types';
 import type {Color} from 'antd/es/color-picker';
 import {IKitInputWrapperBase} from '../InputWrapper/types';
 
-type AntdColorPickerTypesInherited = Omit<ColorPickerProps, 'mode'>;
+type AntdColorPickerTypesInherited = Omit<ColorPickerProps, 'mode' | 'readOnly'>;
 
 export interface KitColorPickerProps
     extends AntdColorPickerTypesInherited,
@@ -11,6 +11,7 @@ export interface KitColorPickerProps
         IKitInputWrapperBase {
     required?: boolean;
     placeholder?: string;
+    readonly?: boolean;
 }
 
 export type KitColor = Color;
@@ -22,6 +23,7 @@ export type KitColorPickerInternalTextProps = {
     placeholder: KitColorPickerProps['placeholder'];
     isColorPickerValueEmpty: boolean;
     allowClear: KitColorPickerProps['allowClear'];
+    readonly: KitColorPickerProps['readonly'];
     onClear: () => void;
 };