aristid-ds 14.0.0-e6e2929 → 14.0.0-e7e4173

package/CHANGELOG.md

@@ -2,57 +2,146 @@
 
 ## [X.Y.Z](https://www.npmjs.com/package/aristid-ds/v/X.Y.Z) (2025-MM-DD)
 
-### ✨ Features 
--   **AutoComplete**:
+### ✨ Features
+
+-   **RichText**:
+    -   Add `autoLayout` RichText adapt layout dynamically (@Lebonnois-Steven)
+-   **⚠️ 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)
-    
--   **Avatar**:
-    -   Add new `size` options : `xs`, `s`, `m`, `l`, `xl` (@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)
+-   **⚠️ Breaking change - Header**:
+    -   Rename `profile` property to `extraRight` to display extra right content (@philippechevieux)
+    -   Add `brandLogo` property to display brand logo (@evoiron)
+    -   Change 'height' to 48px instead of 64px
+-   **Comment**:
+    -   Add components Commment and Thread (@baloche)
+-   **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)
     -   Add `l` size (@7Remy)
-    
--   **SidePanel:**
     -   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)
+    -   Add `color` for left border color (@sberthier)
+-   **Tabs:**
+    -   Add `xsmall` size (@florianSimonAristid)
+    -   Add `badgeOverflowCount` prop to display a badge with an overflow count (@philippechevieux)
+-   **Tag:**
+    -   Add `small` size (@florianSimonAristid)
+-   **Table:**
+    -   Add `expandable` props to config custom expandable content (@florianSimonAristid)
+    -   Add `header` props with `wrapper`, `row` and `cell` variable in `KitTableComponents` type, same props as AntDesign (@florianSimonAristid)
+    -   Add `getRowClassName` function to manage indentation in Table (@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)
-
--   **⚠️ Breaking change - IdCard**:
-    - Replacing `size` options (@fatb38)
-        - removing `medium` and `large`  
-        - adding `xs-medium`, `xs-bold`, `s`, `m`, `l`, `xl`
+-   **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)
+-   **Filter:**
+    -   Add `showSingleValue` to show value, if there is only 1 value selected (@florianSimonAristid)
+    -   Add `readonly` prop to activate readonly state (@renaudamsellem)
+-   **Button:**
+    -   Reduce padding of link button (@philippechevieux)
+    -   Extend active state to `primary`, `secondary`, `tertiary` in addition to `segmented` type (@philippechevieux)
+-   **SidePanel:**
+    -   Display a border left to the side panel when it is not floating (@philippechevieux)
+    -   Display a shadow when the side panel is floating (@philippechevieux)
+-   **Breadcrumb:**
+    -   Fix line height to 1 (@philippechevieux)
+-   **Modal:**
+    -   Change default size of buttons to `m` (@philippechevieux)
+    -   Add tooltip hover on close button (@philippechevieux)
+    -   Add border bottom to modal header in fullscreen mode (@philippechevieux)
+-   **RichText**:
+    -   Add Mentions support (@baloche)
+-   **Empty**:
+    -   Add `no comment` image to the options (@alechapelain)
+-   **⚠️ Breaking change - RichText**:
+    -   Remove `autlayout` prop (@alechapelain)
+    -   Remove `mini` prop (@alechapelain)
+    -   Adapt component to use style attribute on component to override default width and height (@alechapelain)
+    -   Add showMenubar prop option to choose the menubar visibility, either on `focus` or `always` (@alechapelain)
 
 ### 🐛 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)
+-   **Tabs:**
+    -   Fix badge count issue when using `xsmall` size (@philippechevieux)
+-   **Filter:**
+    -   Cursor should be `not-allowed` if filter has props disabled and expandable (@renaudamsellem)
+
+### 📚 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/README.md

@@ -245,35 +245,35 @@ export {KitTooltip};
 
 Every components **style** of the design system can be **override** by tokens.
 
-1. **Create a token file type**
-   The `theme`folder is structure as same as the Kit folder.
-   <br/>
+1.  **Create a token file type**
+    The `theme`folder is structure as same as the Kit folder.
+    <br/>
 
     ```sh dark
     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.
+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.
 
     ```sh dark
     mkdir DESIGN-SYSTEM/src/theme/aristid/components/DataDisplay/tooltip
     ```
 
-3. **Global theme type**
-   After that, go to file `src/theme/type/index.tsx`to add your component type. This files contains all components that can be override.
+3.  **Global theme type**
+    After that, go to file `src/theme/type/index.tsx`to add your component type. This files contains all components that can be override.
 
-4. **Global theme**
-   You can now add your component in the `src/theme/aristid/index.tsx` and you add your component and the function that creates tokens defined in point 2.
+4.  **Global theme**
+    You can now add your component in the `src/theme/aristid/index.tsx` and you add your component and the function that creates tokens defined in point 2.
 
-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.
+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
@@ -286,18 +286,18 @@ 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,
         };
     };
     ```
 
-6. **Global theme mapper**
-   After that, you have to add your component mapper to the global mapper in the file `src/theme/utils/tokens-mapper/index.tsx`.
+6.  **Global theme mapper**
+    After that, you have to add your component mapper to the global mapper in the file `src/theme/utils/tokens-mapper/index.tsx`.
 
-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`.
+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();
@@ -349,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,
     };
     ```
 
@@ -418,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,
     };
     ```
 
@@ -473,7 +473,7 @@ A nightly version of the package is published on daily basis on branch develop (
 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
+http://localhost:6006/?path=/docs/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.

package/dist/Kit/App/index.js

@@ -1,21 +1,20 @@
-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 { K as b } from "../../chunks/SnackBarProvider.T-xLQpTN.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.BdeSOGoj.js";
 import { KitAristidThemeGeneral as l } from "../../theme/aristid/general/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 $ } from "../../translation/en-US/index.js";
-import { K as j, u as k } from "../../chunks/useKitLocale.96CdK3og.js";
+import { K as j, u as k } from "../../chunks/useKitLocale.C5F-tmnC.js";
 import { mapKitLocaleToAntdLocale as x } from "../../translation/utils/index.js";
-import { d as A } from "../../chunks/notification-provider.9msrEKBe.js";
+import { d as A } from "../../chunks/notification-provider.C9v3n-Rg.js";
 import { KitEmpty as p } from "../DataDisplay/Empty/index.js";
-const F = "aristid-ds-global", I = (t, e) => {
+import '../../assets/index29.css';const F = "aristid-ds-global", I = (t, e) => {
   const o = g(t);
   return `
         .${e} {
@@ -34,7 +33,7 @@ const F = "aristid-ds-global", I = (t, e) => {
                         ` }), 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,
@@ -54,7 +53,7 @@ const F = "aristid-ds-global", I = (t, e) => {
       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 }) => {
+}, 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);
@@ -64,5 +63,5 @@ const F = "aristid-ds-global", I = (t, e) => {
   }, 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.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";
-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.B2Q0k3WU.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Avatar as d } from "antd";
+import { u as c } from "../../../chunks/useKitTheme.BdeSOGoj.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 = '';
 

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.BdeSOGoj.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.BdeSOGoj.js";
 import { FontAwesomeIcon as k } from "@fortawesome/react-fontawesome";
 import { faChevronDown as _, faEye as T, faEllipsisVertical as A } from "@fortawesome/free-solid-svg-icons";
-import I from "classnames";
+import D from "classnames";
 import { KitTypography as g } from "../../General/Typography/index.js";
-import { KitTag as D } 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.C5F-tmnC.js";
+import '../../../assets/index36.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: _ }), w = ({ className: o, expandIcon: e, items: i, collapsible: l, ...a }) => {
-  const { appId: n } = y();
-  l === "disabled" && (i == null || i.forEach((r) => {
+  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 = I(n, u["kit-collapse"], o);
+  });
+  const c = D(n, u["kit-collapse"], o);
   return t(E, { ...a, className: c, expandIcon: e ?? M, expandIconPosition: "end", collapsible: l, items: i });
 };
 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
-  (i) => i.stopPropagation()
+  ((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);
+  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: {
+  ((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: [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 })] });
+  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 = K, F = ({ actions: o, disabled: e }) => {
+const B = ({ 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;
+  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,9 +60,9 @@ const B = K, F = ({ actions: o, disabled: e }) => {
   } }) }), o.length > 2 && t("div", { onClick: (s) => {
     s.stopPropagation();
   }, children: t(b, { menu: {
-    items: 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 }) }) }) })] });
-}, L = ({ actions: o }) => {
+}, F = ({ actions: o }) => {
   const e = [...o];
   return e.splice(0, 1), e.map((l, a) => ({
     key: a,
@@ -71,12 +70,12 @@ const B = K, F = ({ actions: o, disabled: e }) => {
     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 = w;
+}, 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';

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

@@ -0,0 +1,5 @@
+import { K as e, a as m } from "../../../chunks/Thread.Cb7BFNKI.js";
+export {
+  e as KitComment,
+  m as KitThread
+};

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

@@ -0,0 +1,10 @@
+import { KitHTMLAttributes } from '../../../types';
+export interface IKitComment extends KitHTMLAttributes<HTMLDivElement> {
+    avatar: React.ReactNode;
+    name: string;
+    date: Date;
+    content: string;
+    isCurrentUser?: boolean;
+}
+
+export interface IKitThread extends KitHTMLAttributes<HTMLDivElement> {}