aristid-ds 14.0.0-d129b0e → 14.0.0-e09fce2

package/CHANGELOG.md

@@ -2,40 +2,68 @@
 
 ## [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)
+-   **SearchInput**:
+    -   Add component SearchInput  (@baloche)
 -   **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)
+    -   Add `onCloseAfterAnimation` callback that triggers after the closing animation completes instead of immediately on close (@philippechevieux)
     -   Allow user to use `size` property when using `idCardProps` (@philippechevieux)
     -   Reduce internal paddings to save space (@philippechevieux)
-
+    -   Improve alignments of `KitSidePanelHeader` (@philippechevieux)
 -   **IdCard:**
     -   Add support for ReactNode in `title` and `descriptions` props to allow custom rendering (@philippechevieux)
-    
+-   **Tabs:**
+    -   Add `xsmall` size (@florianSimonAristid)
+-   **Tag:**
+    -   Add `small` 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 +72,19 @@
 -   **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)
+-   **SidePanel**:
+    -   Export `KitSidePanelHeader` and `KitSidePanelContent` components from the main package entry point (@philippechevieux)
+    -   Fix CSS structure by extracting nested header and content styles into separate classes for proper component isolation (@philippechevieux)
+
+### 📚 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

@@ -1,21 +1,21 @@
-import "../../assets/index29.css";
+import "../../assets/index30.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 { K as b } from "../../chunks/SnackBarProvider.wBpPNyLk.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.KSAU-Pdv.js";
 import { KitAristidThemeGeneral as l } from "../../theme/aristid/general/index.js";
-import { antdThemeConfig as I } from "../../theme/utils/tokens-mapper/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 T } from "../../translation/en-US/index.js";
-import { K as $, u as j } from "../../chunks/useKitLocale.96CdK3og.js";
-import { mapKitLocaleToAntdLocale as k } from "../../translation/utils/index.js";
-import { d as x } from "../../chunks/notification-provider.9msrEKBe.js";
+import { enUS as $ } from "../../translation/en-US/index.js";
+import { K as j, u as k } from "../../chunks/useKitLocale.96CdK3og.js";
+import { mapKitLocaleToAntdLocale as x } from "../../translation/utils/index.js";
+import { d as A } from "../../chunks/notification-provider.9msrEKBe.js";
 import { KitEmpty as p } from "../DataDisplay/Empty/index.js";
-const A = "aristid-ds-global", F = (t, e) => {
+const F = "aristid-ds-global", I = (t, e) => {
   const o = g(t);
   return `
         .${e} {
@@ -27,11 +27,11 @@ const A = "aristid-ds-global", F = (t, 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: `
+  }, []), n(E.Provider, { value: { theme: v, appId: c, spacing: K }, children: r !== null && f(h, { children: [n(m, { id: F, hasSourceMap: !1, children: `
                             :root {
                                 ${Object.keys(r).map((s) => `${s}: ${r[s]}`).join(";")}
                             }
-                        ` }), e && n(m, { hasSourceMap: !1, children: F(a({ general: { utilities: l.utilities } }, e), c) }), t] }) });
+                        ` }), e && n(m, { hasSourceMap: !1, children: I(a({ general: { utilities: l.utilities } }, e), c) }), t] }) });
 }, _ = (t, e) => {
   var o;
   const r = S(t || "ds-" + y().substring(0, 8)), i = a(l.spacing, (o = e == null ? void 0 : e.general) === null || o === void 0 ? void 0 : o.spacing);
@@ -42,7 +42,7 @@ const A = "aristid-ds-global", F = (t, e) => {
   };
 }, M = ({ children: t }) => {
   const e = N();
-  return n($.Provider, { value: e, children: t });
+  return n(j.Provider, { value: e, children: t });
 }, N = () => {
   const [t, e] = u(d);
   return { locale: t, setKitLocale: (r) => {
@@ -50,18 +50,18 @@ const A = "aristid-ds-global", F = (t, e) => {
       const i = a(d, r);
       e(i);
     } else {
-      const i = a(T, r);
+      const i = a($, r);
       e(i);
     }
   } };
 }, te = ({ children: t, locale: e, customTheme: o, id: r }) => n(R, { customTheme: o, id: r, children: n(M, { children: n(O, { locale: e, children: t }) }) }), O = ({ children: t, locale: e }) => {
-  const { locale: o, setKitLocale: r } = j();
+  const { locale: o, setKitLocale: r } = k();
   return P(() => {
     e !== void 0 && r(e);
-  }, [e, r]), n(C, { theme: I, locale: k(e), renderEmpty: () => {
+  }, [e, r]), n(C, { theme: T, 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: f(x, { children: [n(b, {}), t] }) });
+  }, children: f(A, { children: [n(b, {}), t] }) });
 };
 export {
   te as KitApp

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/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/index49.css";
+import "../../../assets/index50.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/index48.css";
+import "../../../assets/index49.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/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/ItemCard/index.js

@@ -1,4 +1,4 @@
-import "../../../assets/index30.css";
+import "../../../assets/index31.css";
 import { jsx as i, jsxs as l } from "react/jsx-runtime";
 import { useState as b, useEffect as Q, forwardRef as V } 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 r, jsxs as d, Fragment as D } from "react/jsx-runtime";
 import T from "classnames";
 import { forwardRef as x } from "react";

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

@@ -1,4 +1,4 @@
-import "../../../assets/index43.css";
+import "../../../assets/index44.css";
 import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as z, useMemo as k } from "react";
 import { Table as y } from "antd";

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,74 +1,75 @@
-import "../../../assets/index38.css";
-import { jsx as t, Fragment as E, 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 { Tag as z } from "antd";
-import { u as x } 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";
-import { N as M, F as R } from "../../../chunks/constants.DINGxt3I.js";
-import { KitModal as U } from "../../Feedback/Modal/index.js";
-import { KitTooltip as V } from "../Tooltip/index.js";
+import "../../../assets/index39.css";
+import { jsx as t, Fragment as A, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as L, useState as C, useRef as W, useLayoutEffect as z } from "react";
+import E from "classnames";
+import { Tag as P } from "antd";
+import { u as $ } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { FontAwesomeIcon as X } from "@fortawesome/react-fontawesome";
+import { faXmark as j } from "@fortawesome/free-solid-svg-icons";
+import { KitIdCard as M } from "../IdCard/index.js";
+import { N as R, F as U } from "../../../chunks/constants.DINGxt3I.js";
+import { KitModal as V } from "../../Feedback/Modal/index.js";
+import { KitTooltip as H } from "../Tooltip/index.js";
 import { u as F } from "../../../chunks/useKitLocale.96CdK3og.js";
-const I = {
-  "kit-tag": "_kit-tag_6ocqb_2",
-  "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,
-    "kit-tag-disabled": i,
-    "kit-tag-clickable": p
+const G = {
+  "kit-tag": "_kit-tag_7uxgn_2",
+  "kit-tag-group": "_kit-tag-group_7uxgn_120",
+  "kit-tag-group-measure": "_kit-tag-group-measure_7uxgn_126",
+  "kit-tag-group-container": "_kit-tag-group-container_7uxgn_133"
+}, h = L(({ className: r, closeIcon: s, type: u = "neutral", disabled: o, disableTooltip: p = !1, onClick: v, idCardProps: i, size: d = "medium", ...a }, _) => {
+  const { appId: b } = $(), c = E(b, G["kit-tag"], r, {
+    [`kit-tag-${u}`]: u,
+    "kit-tag-disabled": o,
+    "kit-tag-clickable": v,
+    "kit-tag-small": d === "small"
   });
-  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 L(() => {
-    const K = () => {
-      var k, g, e;
-      const l = s.current, f = a.current;
+  return t(P, { tabIndex: o ? R : U, ref: _, ...a, className: c, closeIcon: s ?? t(X, { icon: j }), onClick: v, closable: !!a.onClose, children: t(M, { disabled: o, disableTooltip: p, avatarProps: i != null && i.avatarProps ? { ...i == null ? void 0 : i.avatarProps, size: "xs" } : void 0, description: i == null ? void 0 : i.description }) });
+}), q = ({ tags: r, containerRef: s, measureRef: u, handleCloseTag: o }) => {
+  var p;
+  const [v, i] = C([]), [d, a] = C(0), [_, b] = C(t(A, {})), c = W(null), { locale: g } = F();
+  return z(() => {
+    const x = () => {
+      var k, T, e;
+      const l = s.current, f = u.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: () => {
-        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;
-      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++;
+      b(I(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: () => {
+        o == null || o(y);
+      } }, y)), t(h, { idCardProps: { description: `+${d} ${(k = g.General) === null || k === void 0 ? void 0 : k.others}` } })] }));
+      const B = l == null ? void 0 : l.clientWidth, N = Array.from(f.children), D = (T = N[N.length - 1]) === null || T === void 0 ? void 0 : T.clientWidth;
+      let O = 0, w = 0;
+      for (let n = 0; n < N.length - 1; n++) {
+        const y = ((e = N[n]) === null || e === void 0 ? void 0 : e.clientWidth) + 8;
+        if (O + y + 8 + (n < r.length - 1 ? D : 0) <= B)
+          O += y, w++;
         else
           break;
       }
-      C < r.length ? (o(r.slice(0, C)), u(r.length - C)) : (o(r), u(0));
+      w < r.length ? (i(r.slice(0, w)), a(r.length - w)) : (i(r), a(0));
     };
     let m;
-    const N = () => {
-      clearTimeout(m), m = setTimeout(K, 100);
+    const K = () => {
+      clearTimeout(m), m = setTimeout(x, 100);
     };
-    return K(), v.current = new ResizeObserver(N), s.current && v.current.observe(s.current), () => {
-      v.current && v.current.disconnect(), clearTimeout(m);
+    return x(), c.current = new ResizeObserver(K), s.current && c.current.observe(s.current), () => {
+      c.current && c.current.disconnect(), clearTimeout(m);
     };
-  }, [s, i, d, (c = T.General) === null || c === void 0 ? void 0 : c.others, a, r]), {
-    measureTags: b,
-    visibleTags: p,
+  }, [s, o, d, (p = g.General) === null || p === void 0 ? void 0 : p.others, u, r]), {
+    measureTags: _,
+    visibleTags: v,
     hiddenCount: d
   };
-}, J = ({ tags: r, style: s, className: a, handleCloseTag: i, othersTagType: c = "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) => {
+}, J = ({ tags: r, style: s, className: u, handleCloseTag: o, othersTagType: p = "neutral", othersTagDisabled: v }) => {
+  var i;
+  const d = W(null), a = W(null), { locale: _ } = F(), { appId: b } = $(), [c, g] = C(!1), { measureTags: x, visibleTags: m, hiddenCount: K } = q({ tags: r, containerRef: d, measureRef: a, handleCloseTag: o }), 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);
-  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 ? () => {
-    i(l);
-  } : void 0 }, l)) }) })] }), t("div", { ref: u, className: I["kit-tag-group-measure"], "aria-hidden": "true", children: K })] });
+  }), T = E(b, G["kit-tag-group"], u);
+  return I("div", { className: G["kit-tag-group-container"], children: [I("div", { ref: d, style: s, className: T, 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: o ? () => {
+    o(l);
+  } : void 0 }, l)), K > 0 && t(H, { overlay: k(), children: t(h, { type: p, disabled: v, disableTooltip: !0, idCardProps: { description: `+${K} ${(i = _.General) === null || i === void 0 ? void 0 : i.others}` }, onClick: () => g(!0) }) }), t(V, { isOpen: c, close: () => g(!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: o ? () => {
+    o(l);
+  } : void 0 }, l)) }) })] }), t("div", { ref: a, className: G["kit-tag-group-measure"], "aria-hidden": "true", children: x })] });
 }, Q = J, S = h;
 S.displayName = "KitTag";
 S.Group = Q;

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

@@ -19,6 +19,7 @@ export interface IKitTag
         avatarProps?: Omit<IKitAvatar, 'size'>;
     };
     type?: KitTagType;
+    size?: 'small' | 'medium';
     disabled?: boolean;
     disableTooltip?: boolean;
     onClose?: TagProps['onClose'];

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

@@ -1,13 +1,13 @@
-import "../../../assets/index11.css";
+import "../../../assets/index12.css";
 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.IH43I5PS.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

@@ -1,4 +1,4 @@
-import "../../../assets/index31.css";
+import "../../../assets/index32.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.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(() => {