aristid-ds 13.0.0 → 14.0.0-127ba2b

package/CHANGELOG.md

@@ -1,5 +1,134 @@
 # Changelog
 
+## [X.Y.Z](https://www.npmjs.com/package/aristid-ds/v/X.Y.Z) (2025-MM-DD)
+
+### ✨ 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)
+-   **⚠️ 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)
+-   **⚠️ 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)
+-   **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)
+    -   Add `readonly` property whith a render similar to disabled state (@philippechevieux)
+-   **SidePanel**:
+    -   Add opening and closing animations (@philippechevieux)
+    -   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)
+-   **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
+
+-   **Modal:**
+    -   Fix double execution of close function when clicking the close button due to duplicate onClick handlers on button and icon (@philippechevieux)
+-   **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)
+
+### 🔐 Security
+
+-   Update `color-string` to `2.1.2`(@philippechevieux)
+
+## [14.0.0](https://www.npmjs.com/package/aristid-ds/v/14.0.0) (2025-05-20)
+
+### ✨ Features
+
+-   **Typography**:
+    -   Original `Text`, `Link`, `Title` and `Paragraph` have been renamed to `AdvancedText`, `AdvancedLink`, `AdvancedTitle` and `AdvancedParagraph`. (@evoiron)
+    -   `Text`, `Link`, `Title` and `Paragraph` components are now lightweight versions of original ones providing only basic features. (@evoiron)
+    -   Added `withTooltip` prop for non Advanced versions to add a tooltip which is now not displayed by deefault when content is ellipsed. (@evoiron)
+-   **IdCard**:
+    -   Remove use of `Typography.Text` component (@evoiron)
+    -   Add `disableTooltip` property to disable tooltip on title and description (@evoiron)
+-   **⚠️ Breaking change - Upload**:
+    -   Remove the following properties: (@philippechevieux)
+        -   `listType`
+        -   `itemRender`
+        -   `openFileDialogOnClick`
+        -   `loading`
+        -   `isImageUrl`
+        -   `imageUrl`
+        -   `progress`
+        -   `previewFile`
+        -   `showUploadList`
+    -   Update component render (@philippechevieux)
+-   **RichText**:
+    -   Add `mini` property to display a minified version of the component (@renaudamsellem)
+-   **SidePanel**:
+    -   Add opening and closing animations (@philippechevieux)
+
+### 🐛 Bug Fixes
+
+-   **Modal:**
+    -   KitModal.setAppElement was defined in typescript but not implemented (@evoiron)
+-   **Tag:**
+    -   Hide `closeIcon` for tags in a group if handleCloseTag is not provided (@philippechevieux)
+    -   Remove tooltip for other tags in TagGroup (@NicoSourimant)
+-   **DatePicker/RangePicker**
+    -   Fix color of prefix icon when component is `disabled`, in `warning` or `error` status (@philippechevieux)
+
+### 📚 Documentation
+
+-   **Tree**:
+    -   Add exemple of a long title with ellipsis (@philippechevieux)
+
 ## [13.0.0](https://www.npmjs.com/package/aristid-ds/v/13.0.0) (2025-02-17)
 
 ### ✨ CI
@@ -60,10 +189,6 @@ The following points are the impact of this version upgrade:
 
 ### ✨ Features
 
--   **Snackbar**:
-    -   Add `snackbarId` property to allow to update a snackbar (@evoiron)
--   **Button**:
-    -   Add `action` type button (@evoiron)
 -   **⚠️ Breaking change - Tree**:
     -   Remove `showLine` and `switcherIcon` properties (@philippechevieux)
     -   Update component render (@philippechevieux)
@@ -72,12 +197,17 @@ The following points are the impact of this version upgrade:
     -   Complete rewriting of the `Progress` component without Ant (@philippechevieux)
     -   Remove all Ant props (@philippechevieux)
     -   `circle` and `dashboard` type are no longer available (@philippechevieux)
+-   **Snackbar**:
+    -   Add `snackbarId` property to allow to update a snackbar (@evoiron)
+-   **Button**:
+    -   Add `action` type button (@evoiron)
 -   **Tabs**:
     -   Add controlled state to handle navigation within tabs (@renaudamsellem)
 -   **SidePanel**:
     -   Add `headerExtra` prop to display extra content above header title (@philippechevieux)
 
 ### 🐛 Bug Fixes
+
 -   **SidePanel**
     -   Fix `closeOnOutsideClick` behavior to listen to `click` event instead on `mousedeown` (@evoiron)
 -   **ColorPicker**

package/README.md

@@ -122,6 +122,15 @@ import {KitButton, Kitcheckbox} from 'aristid-ds';
 
 <br/>
 
+### Usage via Docker
+
+We provide a containerized way to develop on the project. You need to have [Docker](https://www.docker.com/) installed
+on your computer. The docker stack allows you to add stories to storybook and change in live the changes.
+
+```shell
+docker compose up -d
+```
+
 ## Development
 
 ### Code structure
@@ -459,6 +468,18 @@ A nightly version of the package is published on daily basis on branch develop (
 
 ## Tests
 
+### Accessing Chromatic tests locally
+
+To access the test files used by Chromatic locally, replace `docs` with `chromatic-test` in the Storybook URL. For example:
+
+```
+http://localhost:6006/?path=/chromatic-test/design-system-datadisplay-idcard--chromatic-test
+```
+
+This will allow you to view and test components in the same context that Chromatic uses for automated testing.
+
+### Performance issue
+
 Tests can be slow when using the Design system. It is caused by jsdom which heavily use Window.GetComputedStyle. To workaround this performance issue, you shoud update the version of jsdom used by you test library (typically jest) to 21.1.0 or even 24.0.0. To achieve this, update your projects package.json and add these lines:
 
 if using yarn:

package/dist/Kit/Ant/index.d.ts

@@ -66,3 +66,4 @@ export { TreeSelect as AntTreeSelect } from 'antd';
 export { Typography as AntTypography } from 'antd';
 export { Upload as AntUpload } from 'antd';
 export { Watermark as AntWatermark } from 'antd';
+export type { UploadFile } from 'antd/lib';

package/dist/Kit/App/index.js

@@ -1,21 +1,21 @@
-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";
-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

@@ -4,10 +4,10 @@ import { cloneElement as C, useState as N } from "react";
 import { Collapse as E } from "antd";
 import { u as y } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
-import { faChevronDown as _, faEye as A, faEllipsisVertical as I } from "@fortawesome/free-solid-svg-icons";
-import D from "classnames";
+import { faChevronDown as _, faEye as T, faEllipsisVertical as A } from "@fortawesome/free-solid-svg-icons";
+import I from "classnames";
 import { KitTypography as g } from "../../General/Typography/index.js";
-import { KitTag as T } from "../Tag/index.js";
+import { KitTag as D } from "../Tag/index.js";
 import { KitImage as z } from "../Image/index.js";
 import { KitSwitch as S } from "../../DataEntry/Switch/index.js";
 import { KitTooltip as h } from "../Tooltip/index.js";
@@ -18,9 +18,9 @@ const u = {
   "kit-collapse": "_kit-collapse_h05zd_2",
   "kit-collapse-header": "_kit-collapse-header_h05zd_78",
   "kit-collapse-header-extra": "_kit-collapse-header-extra_h05zd_113"
-}, M = () => t(k, { icon: _ }), K = ({ className: o, expandIcon: e, items: l, collapsible: i, ...a }) => {
+}, M = () => t(k, { icon: _ }), w = ({ className: o, expandIcon: e, items: i, collapsible: l, ...a }) => {
   const { appId: n } = y();
-  i === "disabled" && (l == null || l.forEach((r) => {
+  l === "disabled" && (i == null || i.forEach((r) => {
     var s, d;
     if (r.label !== void 0) {
       const p = r.label, m = r.extra;
@@ -31,29 +31,29 @@ const u = {
       }));
     }
   }));
-  const c = D(n, u["kit-collapse"], o);
-  return t(E, { ...a, className: c, expandIcon: e ?? M, expandIconPosition: "end", collapsible: i, items: l });
+  const c = I(n, u["kit-collapse"], o);
+  return t(E, { ...a, className: c, expandIcon: e ?? M, expandIconPosition: "end", collapsible: l, items: i });
 };
-K.displayName = "KitCollapse";
+w.displayName = "KitCollapse";
 const $ = ({ onSwitchChange: o, disabled: e }) => t("div", { className: "kit-collapse-header-switch", onClick: (
   // We don't want to collapse/extand item when clicking
-  (l) => l.stopPropagation()
-), children: t(S, { onChange: (l, i) => {
-  const n = i.target.closest(".ant-collapse-item");
-  n == null || n.setAttribute("data-item-selected", l.toString()), o(l, i);
+  (i) => i.stopPropagation()
+), children: t(S, { onChange: (i, l) => {
+  const n = l.target.closest(".ant-collapse-item");
+  n == null || n.setAttribute("data-item-selected", i.toString()), o(i, l);
 }, disabled: e }) }), j = ({ imageSrc: o }) => t("div", { className: "kit-collapse-header-image", onClick: (
   // We don't want to collapse/extand item when clicking
   (e) => e.stopPropagation()
 ), children: t(z, { src: o, style: { height: "auto", width: "auto", maxHeight: "90px", maxWidth: "50px" }, preview: {
-  mask: t(k, { icon: A })
-} }) }), O = ({ title: o, description: e, tagProps: l, disabled: i }) => {
+  mask: t(k, { icon: T })
+} }) }), O = ({ title: o, description: e, tagProps: i, disabled: l }) => {
   let a = "kit-collapse-header-content";
-  return a += o !== void 0 && e !== void 0 ? " kit-collapse-header-content-rows" : "", f("div", { className: a, children: [l !== void 0 && t("div", { className: "kit-collapse-header-tag", children: t(T, { ...l, disabled: i ?? l.disabled }) }), o !== void 0 && t(g.Text, { className: "kit-collapse-header-content-title", size: "fontSize5", weight: "bold", ellipsis: { tooltip: !0 }, disabled: i, children: o }), e !== void 0 && t(g.Text, { className: "kit-collapse-header-content-description", size: "fontSize5", ellipsis: { tooltip: !0 }, disabled: i, children: e })] });
-}, w = ({ onSwitchChange: o, imageSrc: e, title: l, description: i, tagProps: a, disabled: n = !1 }) => f("div", { className: `${u["kit-collapse-header"]}`, children: [o !== void 0 && t($, { onSwitchChange: o, disabled: n }), e !== void 0 && t(j, { imageSrc: e }), t(O, { title: l, description: i, tagProps: a, disabled: n })] });
-w.displayName = "KitHeader";
-const B = w, F = ({ actions: o, disabled: e }) => {
-  var l;
-  const [i, a] = N(!1), { locale: n } = P(), c = o[0] ? o[0] : null, r = o.length <= 2 && o[1] ? o[1] : null;
+  return a += o !== void 0 && e !== void 0 ? " kit-collapse-header-content-rows" : "", f("div", { className: a, children: [i !== void 0 && t("div", { className: "kit-collapse-header-tag", children: t(D, { ...i, disabled: l ?? i.disabled }) }), o !== void 0 && t(g.Text, { className: "kit-collapse-header-content-title", size: "fontSize5", weight: "bold", ellipsis: !0, withTooltip: !0, disabled: l, children: o }), e !== void 0 && t(g.Text, { className: "kit-collapse-header-content-description", size: "fontSize5", ellipsis: !0, withTooltip: !0, disabled: l, children: e })] });
+}, K = ({ onSwitchChange: o, imageSrc: e, title: i, description: l, tagProps: a, disabled: n = !1 }) => f("div", { className: `${u["kit-collapse-header"]}`, children: [o !== void 0 && t($, { onSwitchChange: o, disabled: n }), e !== void 0 && t(j, { imageSrc: e }), t(O, { title: i, description: l, tagProps: a, disabled: n })] });
+K.displayName = "KitHeader";
+const B = K, F = ({ actions: o, disabled: e }) => {
+  var i;
+  const [l, a] = N(!1), { locale: n } = P(), c = o[0] ? o[0] : null, r = o.length <= 2 && o[1] ? o[1] : null;
   return f("div", { className: "kit-collapse-header-extra-actions", children: [c && t(h, { title: c.label, open: e ? !1 : void 0, children: t(v, { icon: c.icon, disabled: e, onClick: (s) => {
     s.stopPropagation(), c.onClick && c.onClick(s);
   } }) }), r && t(h, { title: r.label, open: e ? !1 : void 0, children: t(v, { icon: r.icon, disabled: e, onClick: (s) => {
@@ -62,18 +62,18 @@ const B = w, F = ({ actions: o, disabled: e }) => {
     s.stopPropagation();
   }, children: t(b, { menu: {
     items: L({ actions: o })
-  }, trigger: ["click"], onOpenChange: () => a(!1), children: t(h, { title: (l = n.Collapse) === null || l === void 0 ? void 0 : l.more, open: e ? !1 : i, onOpenChange: a, children: t(v, { icon: t(k, { icon: I }), disabled: e }) }) }) })] });
+  }, trigger: ["click"], onOpenChange: () => a(!1), children: t(h, { title: (i = n.Collapse) === null || i === void 0 ? void 0 : i.more, open: e ? !1 : l, onOpenChange: a, children: t(v, { icon: t(k, { icon: A }), disabled: e }) }) }) })] });
 }, L = ({ actions: o }) => {
   const e = [...o];
-  return e.splice(0, 1), e.map((i, a) => ({
+  return e.splice(0, 1), e.map((l, a) => ({
     key: a,
-    icon: i.icon,
-    label: i.label,
-    onClick: (n) => i.onClick && i.onClick(n)
+    icon: l.icon,
+    label: l.label,
+    onClick: (n) => l.onClick && l.onClick(n)
   }));
 }, H = ({ actions: o, disabled: e = !1 }) => t("div", { className: `${u["kit-collapse-header-extra"]}`, children: o !== void 0 && t(F, { actions: o, disabled: e }) });
 H.displayName = "KitHeaderExtra";
-const V = H, x = K;
+const V = H, x = w;
 x.displayName = "KitCollapse";
 x.Header = B;
 x.HeaderExtra = V;

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

@@ -1,4 +1,4 @@
-import "../../../assets/index51.css";
+import "../../../assets/index49.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/index50.css";
+import "../../../assets/index48.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,24 +1,72 @@
 import "../../../assets/index2.css";
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { jsxs as y, jsx as a } from "react/jsx-runtime";
 import n from "classnames";
-import { u as x } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { KitTypography as m } from "../../General/Typography/index.js";
-import { K as y } from "../../../chunks/Avatar.N2w2jq_C.js";
-const g = {
-  "kit-id-card": "_kit-id-card_mmcks_2"
-}, k = (o, i, t) => {
-  const s = n("kit-id-card-title", {
-    "kit-id-card-title-large": i === "large"
+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 D = {
+  "kit-id-card": "_kit-id-card_1vabr_2"
+}, h = [
+  S["kit-typography-text"],
+  "ant-typography",
+  "ant-typography-text",
+  "ant-typography-ellipsis",
+  "ant-typography-ellipsis-single-line"
+], 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 r(m.Text, { className: s, size: "fontSize5", weight: "bold", ellipsis: { tooltip: !0 }, disabled: t, children: o });
-}, D = (o, i, t) => {
-  const s = i === "medium" ? "fontSize7" : "fontSize5";
-  return r(m.Text, { size: s, ellipsis: { tooltip: !0 }, disabled: t, className: "kit-id-card-decription", children: o });
-}, K = ({ className: o, title: i, description: t, avatarProps: s, size: c = "medium", disabled: e = !1, ...p }) => {
-  const { appId: u } = x(), h = n(u, g["kit-id-card"], o), f = s !== void 0, d = i !== void 0, a = t !== void 0, v = d || a;
-  return l("div", { className: `${h} id-card-grid`, ...p, children: [f && r("div", { className: "card-avatar", children: r(y, { ...s, disabled: e }) }), v && l("div", { className: "card-info", children: [d && k(i, c, e), a && D(t, c, e)] })] });
+  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 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

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

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

@@ -1,6 +1,6 @@
-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 { useState as b, useEffect as Q, forwardRef as V } from "react";
 import Y from "classnames";
 import { KitTypography as w } from "../../General/Typography/index.js";
 import { KitCheckbox as Z } from "../../DataEntry/Checkbox/index.js";
@@ -8,40 +8,41 @@ import { KitSwitch as G } from "../../DataEntry/Switch/index.js";
 import { KitBreadcrumb as ii } from "../../Navigation/Breadcrumb/index.js";
 import { u as ti } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
 import { KitTag as ei } from "../Tag/index.js";
-import { KitButton as A } from "../../General/Button/index.js";
-import { KitTooltip as oi } from "../Tooltip/index.js";
-import { FontAwesomeIcon as _ } from "@fortawesome/react-fontawesome";
-import { faEllipsis as si, faImage as ri } from "@fortawesome/free-solid-svg-icons";
+import { KitButton as B } from "../../General/Button/index.js";
+import { KitTooltip as si } from "../Tooltip/index.js";
+import { FontAwesomeIcon as O } from "@fortawesome/react-fontawesome";
+import { faEllipsis as oi, faImage as ri } from "@fortawesome/free-solid-svg-icons";
 import { KitDropDown as ai } from "../../Navigation/DropDown/index.js";
 import { u as di } from "../../../chunks/useKitLocale.96CdK3og.js";
 import { useDebouncedCallback as ci } from "use-debounce";
-const ni = {
+import { N as ni, F as li } from "../../../chunks/constants.DINGxt3I.js";
+const mi = {
   "kit-item-card": "_kit-item-card_308fs_2"
-}, z = () => {
-  const [d, a] = B(window.innerWidth), [o, r] = B(window.innerHeight), t = ci(() => {
+}, L = () => {
+  const [d, a] = b(window.innerWidth), [s, r] = b(window.innerHeight), t = ci(() => {
     a(window.innerWidth), r(window.innerHeight);
   }, 100);
-  return V(() => (t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t)), [t]), { width: d, height: o };
-}, li = 1300, E = ({ display: d = "card", disabled: a = !1, actions: o }) => {
+  return Q(() => (t(), window.addEventListener("resize", t), () => window.removeEventListener("resize", t)), [t]), { width: d, height: s };
+}, hi = 1300, _ = ({ display: d = "card", disabled: a = !1, actions: s }) => {
   var r;
-  const { locale: t } = di(), { width: c } = z();
-  return i("div", { className: "kit-item-card-actions", children: d === "list" && c < li ? i(ai, { disabled: a, menu: { items: o }, children: i(A, { title: (r = t.General) === null || r === void 0 ? void 0 : r.more, icon: i(_, { icon: si }) }) }) : o == null ? void 0 : o.map((s) => i(oi, { title: s.label, children: i(A, { icon: s.icon, onClick: s.onClick, disabled: s.disabled || a }) }, s.key)) });
-}, R = 900, mi = X(({ className: d, style: a, imageSrc: o, icon: r, tagGroup: t, breadcrumbItems: c, title: s, description: m, draggableHandler: u, selected: D, onSelect: g, activateLabel: H, activated: L, onActivate: y, extra: C, actions: h, display: n = "card", disabled: e = !1, imageAlt: O = "", imageCover: W = !1 }, j) => {
-  const { appId: S } = ti(), { width: T } = z(), N = g !== void 0, x = u !== void 0, F = o !== void 0, P = r !== void 0, p = t !== void 0, K = c !== void 0, $ = s !== void 0 || m !== void 0, b = C !== void 0, q = y !== void 0, k = h !== void 0, I = [p, K, b].filter(Boolean).length, f = n === "list" && T > R, v = n === "card" || T <= R, J = Y(ni["kit-item-card"], d, S, {
+  const { locale: t } = di(), { width: c } = L();
+  return i("div", { className: "kit-item-card-actions", children: d === "list" && c < hi ? i(ai, { disabled: a, menu: { items: s }, children: i(B, { title: (r = t.General) === null || r === void 0 ? void 0 : r.more, icon: i(O, { icon: oi }) }) }) : s == null ? void 0 : s.map((o) => i(si, { title: o.label, children: i(B, { icon: o.icon, onClick: o.onClick, disabled: o.disabled || a }) }, o.key)) });
+}, E = 900, pi = V(({ className: d, style: a, imageSrc: s, icon: r, tagGroup: t, breadcrumbItems: c, title: o, description: m, draggableHandler: u, selected: D, onSelect: g, activateLabel: R, activated: z, onActivate: y, extra: C, actions: h, display: n = "card", disabled: e = !1, imageAlt: F = "", imageCover: H = !1 }, S) => {
+  const { appId: W } = ti(), { width: N } = L(), T = g !== void 0, x = u !== void 0, j = s !== void 0, U = r !== void 0, p = t !== void 0, I = c !== void 0, X = o !== void 0 || m !== void 0, K = C !== void 0, P = y !== void 0, k = h !== void 0, A = [p, I, K].filter(Boolean).length, f = n === "list" && N > E, v = n === "card" || N <= E, $ = Y(mi["kit-item-card"], d, W, {
     "kit-item-card-display-list": f,
     "kit-item-card-display-card": v,
-    [`kit-item-card-display-list-with-${I}-rows`]: f && I > 0,
-    "kit-item-card-display-card-checkbox-or-draggable-handler": v && (N || x),
+    [`kit-item-card-display-list-with-${A}-rows`]: f && A > 0,
+    "kit-item-card-display-card-checkbox-or-draggable-handler": v && (T || x),
     "kit-item-card-disabled": e,
     "kit-item-card-selected": D,
     "kit-item-card-with-actions": k,
-    "kit-item-card-image-cover": W
+    "kit-item-card-image-cover": H
   });
-  e && p && (t.tags = t.tags.map((U) => ({ ...U, disabled: e })), t.othersTagDisabled = !0);
-  const M = i("div", { className: "kit-item-card-checkbox", children: i(Z, { onChange: g, checked: D, disabled: e }) }), Q = i("div", { className: "kit-item-card-draggable-handler", children: u });
-  return l("div", { tabIndex: e ? -1 : 0, className: J, style: a, ref: j, children: [N && M, x && Q, l("div", { className: "kit-item-card-image", children: [F ? i("img", { src: o, alt: O }) : i("div", { className: "kit-item-card-image-placeholder", children: P ? r : i(_, { icon: ri }) }), i("div", { className: "kit-item-card-actions-mask" }), k && v && i(E, { actions: h, disabled: e, display: "card" })] }), p && i("div", { className: "kit-item-card-tags", style: { width: n === "card" ? "inherit" : "auto" }, children: i(ei.Group, { tags: t.tags, othersTagType: t.othersTagType, othersTagDisabled: t.othersTagDisabled }) }), K && i("div", { className: "kit-item-card-breadcrumb", children: i(ii, { items: c }) }), $ && l("div", { className: "kit-item-card-content", children: [s && i(w.Title, { level: "h3", ellipsis: { tooltip: !0, rows: 2 }, disabled: e, children: s }), m && i(w.Paragraph, { ellipsis: { tooltip: !0, rows: 2 }, disabled: e, children: m })] }), b && i("div", { className: "kit-item-card-extra", children: C }), k && f && i(E, { actions: h, disabled: e, display: n }), q && l("div", { className: "kit-item-card-switch", children: [i(G, { onChange: y, checked: L, disabled: e }), i(w.Text, { disabled: e, ellipsis: { tooltip: !0 }, children: H })] })] });
+  e && p && (t.tags = t.tags.map((M) => ({ ...M, disabled: e })), t.othersTagDisabled = !0);
+  const q = i("div", { className: "kit-item-card-checkbox", children: i(Z, { onChange: g, checked: D, disabled: e }) }), J = i("div", { className: "kit-item-card-draggable-handler", children: u });
+  return l("div", { tabIndex: e ? ni : li, className: $, style: a, ref: S, children: [T && q, x && J, l("div", { className: "kit-item-card-image", children: [j ? i("img", { src: s, alt: F }) : i("div", { className: "kit-item-card-image-placeholder", children: U ? r : i(O, { icon: ri }) }), i("div", { className: "kit-item-card-actions-mask" }), k && v && i(_, { actions: h, disabled: e, display: "card" })] }), p && i("div", { className: "kit-item-card-tags", style: { width: n === "card" ? "inherit" : "auto" }, children: i(ei.Group, { tags: t.tags, othersTagType: t.othersTagType, othersTagDisabled: t.othersTagDisabled }) }), I && i("div", { className: "kit-item-card-breadcrumb", children: i(ii, { items: c }) }), X && l("div", { className: "kit-item-card-content", children: [o && i(w.AdvancedTitle, { level: "h3", ellipsis: { tooltip: !0, rows: 2 }, disabled: e, children: o }), m && i(w.AdvancedParagraph, { ellipsis: { tooltip: !0, rows: 2 }, disabled: e, children: m })] }), K && i("div", { className: "kit-item-card-extra", children: C }), k && f && i(_, { actions: h, disabled: e, display: n }), P && l("div", { className: "kit-item-card-switch", children: [i(G, { onChange: y, checked: z, disabled: e }), i(w.Text, { disabled: e, ellipsis: !0, children: R })] })] });
 });
-mi.displayName = "KitItemCard";
+pi.displayName = "KitItemCard";
 export {
-  mi as KitItemCard
+  pi as KitItemCard
 };