aristid-ds 13.0.0 → 14.0.0-08d7904

package/CHANGELOG.md

@@ -1,5 +1,155 @@
 # 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 (Input,TextArea,Password)**:
+    -   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)
+-   **Comment**:
+    -   Add components Commment and Thread (@baloche)
+-   **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)
+-   **SearchInput**:
+    -   Add component SearchInput (@baloche)
+-   **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)
+    -   Add support for prop `avatar` as a ReactNode as an alternative for `avatarProps` (@baloche)
+-   **Tabs:**
+    -   Add `xsmall` size (@florianSimonAristid)
+-   **Tag:**
+    -   Add `small` size (@florianSimonAristid)
+-   **Table:**
+    -   Add `expandable` props to config custom expandable content (@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)
+-   **KitPagination:**
+    -   Reduce size (@florianSimonAristid)
+-   **KitTreeSelect:**
+    -   New TreeSelect component (@evoiron)
+
+### 🐛 Bug Fixes
+
+-   **Modal:**
+    -   Fix double execution of close function when clicking the close button due to duplicate onClick handlers on button and icon (@philippechevieux)
+    -   Fix event propagation on close Modal (@evoiron)
+    -   Fix title display. If `title` props is a ReactNode, it's now not encapsulated in a `KitTypography` Element (@evoiron)
+    -   Fix padding of modal header, content and footer (@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)
+-   **TagGroup:**
+    -   Fix event Propagation on click to sidplay hidden tags (@evoiron)
+-   **ColorPicker:**
+    -   Fix clear button displaying when component is disabled or readonly (@philippechevieux)
+-   **Breadcrumb:**
+    -   Fix `KitBreadcrumb` css is broken when displayed a `KitTypography` (@evoiron)
+    -   Fix `KitBreadcrumb` css is broken when displayed a `KitModal` header (@evoiron)
+-   **Table**:
+    -   Fix header and row borders issue when using `KitTable` with only one column (@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)
+
+### ✨ 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 +210,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 +218,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
@@ -244,8 +253,8 @@ Every components **style** of the design system can be **override** by tokens.
     mkdir DESIGN-SYSTEM/src/theme/type/components/DataDisplay/tooltip
     ```
 
-      <br/>
-      In this file, you have all the tokens type definition. The tokens follow some rules you can find here [TODO]
+       <br/>
+       In this file, you have all the tokens type definition. The tokens follow some rules you can find here [TODO]
 
 2. **Create a token file**
    The token file is the definition of all tokens with their value. It exports a function that create the theme for the cmponent. You define this file in the `aristid` that is the default theme of the design system.
@@ -263,8 +272,8 @@ Every components **style** of the design system can be **override** by tokens.
 5. **Component Antd mapper**
    As we use both `antd` and `design system` tokens, we normalize all token to follow a same model. If your component uses antd tokens, you have to add a mapper in the `src/theme/utils/tokens-mapper` folder. This folder as the same folder structure as the rest of the application.
 
-      <br/>
-      Example of component mapper :
+       <br/>
+       Example of component mapper :
 
     ```tsx
     // utils/tokens-mapper/DataDisplay/Tag
@@ -277,7 +286,7 @@ Every components **style** of the design system can be **override** by tokens.
         return {
             defaultBg: colors.default.background.default,
             defaultColor: colors.default.typography.default,
-            borderRadiusSM: border.radius
+            borderRadiusSM: border.radius,
         };
     };
     ```
@@ -288,7 +297,7 @@ Every components **style** of the design system can be **override** by tokens.
 7. **Theme consumption**
    You can use the theme in your styled component by calling the hook `useKitTheme`. You can get the component theme by calling `theme.components.Tooltip`.
 
-      </br>
+       </br>
 
     ```tsx
     const {theme} = useKitTheme();
@@ -340,10 +349,10 @@ Every components **style** of the design system can be **override** by tokens.
     import BasicSource from './basic?raw';
 
     export const Sources = {
-        Basic: BasicSource
+        Basic: BasicSource,
     };
     export default {
-        Basic
+        Basic,
     };
     ```
 
@@ -409,14 +418,14 @@ Every components **style** of the design system can be **override** by tokens.
     const meta: Meta<typeof KitTooltip> = {
         component: KitTooltip,
         title: 'Design System/DataDisplay/Tooltip',
-        argTypes: argTypes
+        argTypes: argTypes,
     };
 
     export default meta;
     type Story = StoryObj<typeof KitTooltip>;
 
     export const Api: Story = {
-        render: Template
+        render: Template,
     };
     ```
 
@@ -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,20 @@
-import "../../assets/index28.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.D44OffUd.js";
 import { toCssVariables as g, uuid as y } from "../../utils/functions/index.js";
 import a from "lodash/merge";
 import { Style as m } from "react-style-tag";
-import { K as E } from "../../chunks/useKitTheme.KSAU-Pdv.js";
+import { K as E } from "../../chunks/useKitTheme.C7yw6CDw.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.DD7mnAZn.js";
+import { mapKitLocaleToAntdLocale as x } from "../../translation/utils/index.js";
+import { d as A } from "../../chunks/notification-provider.BBuCJ6Vn.js";
 import { KitEmpty as p } from "../DataDisplay/Empty/index.js";
-const A = "aristid-ds-global", F = (t, e) => {
+import '../../assets/index30.css';const F = "aristid-ds-global", I = (t, e) => {
   const o = g(t);
   return `
         .${e} {
@@ -27,14 +26,14 @@ 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);
+  const r = S(t || "ds-" + y().substring(0, 8)), i = a(l.spacing, (o = e?.general) === null || o === void 0 ? void 0 : o.spacing);
   return {
     theme: l,
     appId: r.current,
@@ -42,7 +41,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,19 +49,19 @@ 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();
+}, re = ({ 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 } = 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
+  re as KitApp
 };

package/dist/Kit/App/types.d.ts

@@ -1,6 +1,5 @@
-import {KitHTMLAttributes} from '../../types';
-import {ReactNode} from 'react';
-
+import { KitHTMLAttributes } from '../../types';
+import { ReactNode } from 'react';
 export interface KitAppProps extends KitHTMLAttributes {
     children?: ReactNode;
 }

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

@@ -1,22 +1,22 @@
-import { s as t, K as n } from "../../../chunks/Avatar.N2w2jq_C.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";
-import A from "classnames";
-const K = ({ className: a, disabled: s, max: r, ...v }) => {
-  var o;
-  const { appId: l } = d(), p = A(l, t["kit-avatar-group"], a, {
-    "override-last": !!(r != null && r.count),
+import { s as t, K as u } from "../../../chunks/Avatar.D0il2_w4.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Avatar as d } from "antd";
+import { u as c } from "../../../chunks/useKitTheme.C7yw6CDw.js";
+import K from "classnames";
+const f = ({ className: a, disabled: s, max: o, ...v }) => {
+  var r;
+  const { appId: l } = c(), p = K(l, t["kit-avatar-group"], a, {
+    "override-last": !!o?.count,
     [t["kit-avatar-group-disabled"]]: s
   }), e = {
-    ...r,
+    ...o,
     style: {
-      ...r == null ? void 0 : r.style,
-      cursor: ((o = r == null ? void 0 : r.popover) === null || o === void 0 ? void 0 : o.trigger) === "click" ? "pointer" : "initial"
+      ...o?.style,
+      cursor: ((r = o?.popover) === null || r === void 0 ? void 0 : r.trigger) === "click" ? "pointer" : "initial"
     }
   };
-  return u(c.Group, { ...v, max: e, className: p });
-}, f = K, i = n;
+  return n(d.Group, { ...v, max: e, className: p });
+}, i = u;
 i.displayName = "KitAvatar";
 i.Group = f;
 export {

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

@@ -1,9 +1,8 @@
-import {AvatarProps} from 'antd';
-import {GroupProps} from 'antd/es/avatar';
-import {KitHTMLAttributes} from '../../../types';
-import {FunctionComponent} from 'react';
-import {KitColorProp} from '../../../utils/functions/types';
-
+import { AvatarProps } from 'antd';
+import { GroupProps } from 'antd/es/avatar';
+import { KitHTMLAttributes } from '../../../types';
+import { FunctionComponent } from 'react';
+import { KitColorProp } from '../../../utils/functions/types';
 type AntdAvatarTypesToOmit = '';
 type AntdAvatarGroupTypesToOmit = '';
 
@@ -16,6 +15,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/Badge/index.js

@@ -1,19 +1,18 @@
-import "../../../assets/index.css";
-import { jsx as g } from "react/jsx-runtime";
+import { jsx as p } from "react/jsx-runtime";
 import { useMemo as l } from "react";
 import { Badge as u } from "antd";
-import { u as d } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { isValidColor as f, getColor as n, getLighterColor as c } from "../../../utils/functions/index.js";
+import { u as d } from "../../../chunks/useKitTheme.C7yw6CDw.js";
+import { isValidColor as f, getLighterColor as n, getColor as c } from "../../../utils/functions/index.js";
 import { kitBadgeCssTokens as s } from "../../../theme/aristid/components/DataDisplay/Badge/index.js";
 import k from "classnames";
-const b = {
+import '../../../assets/index.css';const b = {
   "kit-badge": "_kit-badge_8zlso_2"
 }, B = (t, o) => !t || !f(t) ? null : {
-  [s.colors.background.default]: n(t, o),
-  [s.colors.typography.default]: c(t, o)
+  [s.colors.background.default]: c(t, o),
+  [s.colors.typography.default]: n(t, o)
 }, C = ({ color: t, style: o, secondaryColorInvert: e = !1, className: m, ...r }) => {
-  const { appId: i } = d(), a = l(() => ({ ...o, ...B(t, e) }), [t, e, o]), p = k(i, b["kit-badge"], m);
-  return g(u, { style: a, ...r, className: p });
+  const { appId: i } = d(), a = l(() => ({ ...o, ...B(t, e) }), [t, e, o]), g = k(i, b["kit-badge"], m);
+  return p(u, { style: a, ...r, className: g });
 };
 C.displayName = "KitBadge";
 export {

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

@@ -1,7 +1,6 @@
-import {BadgeProps} from 'antd';
-import {KitHTMLAttributes} from '../../../types';
-import {KitColorProp} from '../../../utils/functions/types';
-
+import { BadgeProps } from 'antd';
+import { KitHTMLAttributes } from '../../../types';
+import { KitColorProp } from '../../../utils/functions/types';
 type AntdBadgeTypesToOmit = 'color' | 'size' | 'offset' | 'text';
 
 export interface IKitBadge extends KitHTMLAttributes<HTMLDivElement>, Omit<BadgeProps, AntdBadgeTypesToOmit> {

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

@@ -1,26 +1,25 @@
-import "../../../assets/index37.css";
 import { jsx as t, jsxs as f } from "react/jsx-runtime";
-import { cloneElement as C, useState as N } from "react";
+import { cloneElement as C, useState as y } from "react";
 import { Collapse as E } from "antd";
-import { u as y } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { u as H } from "../../../chunks/useKitTheme.C7yw6CDw.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 { faChevronDown as _, faEye as T, faEllipsisVertical as A } from "@fortawesome/free-solid-svg-icons";
 import D from "classnames";
 import { KitTypography as g } from "../../General/Typography/index.js";
-import { KitTag as T } from "../Tag/index.js";
-import { KitImage as z } from "../Image/index.js";
+import { KitTag as z } from "../Tag/index.js";
+import { KitImage as I } from "../Image/index.js";
 import { KitSwitch as S } from "../../DataEntry/Switch/index.js";
 import { KitTooltip as h } from "../Tooltip/index.js";
 import { KitButton as v } from "../../General/Button/index.js";
 import { KitDropDown as b } from "../../Navigation/DropDown/index.js";
-import { u as P } from "../../../chunks/useKitLocale.96CdK3og.js";
-const u = {
+import { u as P } from "../../../chunks/useKitLocale.DD7mnAZn.js";
+import '../../../assets/index38.css';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 }) => {
-  const { appId: n } = y();
-  i === "disabled" && (l == null || l.forEach((r) => {
+}, M = () => t(k, { icon: _ }), w = ({ className: o, expandIcon: e, items: i, collapsible: l, ...a }) => {
+  const { appId: n } = H();
+  l === "disabled" && i?.forEach((r) => {
     var s, d;
     if (r.label !== void 0) {
       const p = r.label, m = r.extra;
@@ -30,30 +29,30 @@ const u = {
         disabled: !0
       }));
     }
-  }));
+  });
   const c = D(n, u["kit-collapse"], o);
-  return t(E, { ...a, className: c, expandIcon: e ?? M, expandIconPosition: "end", collapsible: i, items: l });
+  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?.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 }) => {
+  ((e) => e.stopPropagation())
+), children: t(I, { src: o, style: { height: "auto", width: "auto", maxHeight: "90px", maxWidth: "50px" }, preview: {
+  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(z, { ...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 = ({ actions: o, disabled: e }) => {
+  var i;
+  const [l, a] = y(!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) => {
@@ -61,22 +60,22 @@ const B = w, F = ({ actions: o, disabled: e }) => {
   } }) }), o.length > 2 && t("div", { onClick: (s) => {
     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 }) }) }) })] });
-}, L = ({ actions: o }) => {
+    items: F({ actions: o })
+  }, 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 }) }) }) })] });
+}, F = ({ 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;
+}, N = ({ actions: o, disabled: e = !1 }) => t("div", { className: `${u["kit-collapse-header-extra"]}`, children: o !== void 0 && t(B, { actions: o, disabled: e }) });
+N.displayName = "KitHeaderExtra";
+const x = w;
 x.displayName = "KitCollapse";
-x.Header = B;
-x.HeaderExtra = V;
+x.Header = K;
+x.HeaderExtra = N;
 export {
   x as KitCollapse
 };

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

@@ -1,9 +1,8 @@
-import {CollapseProps} from 'antd';
-import {ReactNode, MouseEvent, ReactInstance, KeyboardEvent, FunctionComponent} from 'react';
-import {KitHTMLAttributes} from '../../../types';
-import {SwitchChangeEventHandler} from 'antd/es/switch';
-import {IKitTag} from '../Tag/types';
-
+import { CollapseProps } from 'antd';
+import { ReactNode, MouseEvent, ReactInstance, KeyboardEvent, FunctionComponent } from 'react';
+import { KitHTMLAttributes } from '../../../types';
+import { SwitchChangeEventHandler } from 'antd/es/switch';
+import { IKitTag } from '../Tag/types';
 type AntdCollapseTypesToOmit = 'bordered' | 'expandIconPosition' | 'ghost';
 
 export interface IKitCollapse extends Omit<CollapseProps, AntdCollapseTypesToOmit>, KitHTMLAttributes<HTMLDivElement> {}

package/dist/Kit/DataDisplay/Comment/Comment.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { IKitComment } from './types';
+export declare const KitComment: FunctionComponent<IKitComment>;

package/dist/Kit/DataDisplay/Comment/Thread.d.ts

@@ -0,0 +1,3 @@
+import { FunctionComponent } from 'react';
+import { IKitThread } from './types';
+export declare const KitThread: FunctionComponent<IKitThread>;

package/dist/Kit/DataDisplay/Comment/index.d.ts

@@ -0,0 +1,2 @@
+export { KitComment } from './Comment';
+export { KitThread } from './Thread';