aristid-ds 14.0.0 → 15.0.0-7d2bb0b

package/CHANGELOG.md

@@ -1,12 +1,173 @@
 # Changelog
 
+## [15.0.0](https://www.npmjs.com/package/aristid-ds/v/15.0.0) (2026-01-23)
+
+### ✨ Features
+
+-   **⚠️ Breaking change - Notification**:
+    -   Update `Notification` component. We have moved from the Antd notification component to a home-made component using `react-hot-toast`. Please refer to the documentation for use. (@philippechevieux)
+-   **⚠️ 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)
+    -   Remove `mini` prop (@alechapelain)
+    -   Adapt component to use style attribute on component to override default width and height (@alechapelain)
+-   **⚠️ 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)
+-   **⚠️ 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)
+-   **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)
+    -   Add `color` for left border color (@sberthier)
+-   **Tabs:**
+    -   Add `xsmall` size (@florianSimonAristid)
+    -   Add `badgeOverflowCount` prop to display a badge with an overflow count (@philippechevieux)
+    -   Make component responsive by displaying a dropdown with overflowed tabs (@renaudamsellem)
+-   **Tag:**
+    -   Add `small` size (@florianSimonAristid)
+    -   Add close icon tooltip with `closeText` prop to customize the text (@philippechevieux)
+-   **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)
+    -   Add `headerLineSize` property (@baloche)
+-   **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)
+-   **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)
+    -   Add showMenubar prop option to choose the menubar visibility, either on `focus` or `always` (@alechapelain)
+    -   Improve menu display behaviour on resize (@baloche)
+-   **Empty**:
+    -   Add `no comment` image to the options (@alechapelain)
+-   **Collapse, ItemCard, RedirectCard**:
+    -   Change hover border width to 2px and focus 3px (@Earnox)
+-   **Input / Select / DatePicker**:
+    -   Update paddings, gaps and icon sizes for `small`, `middle` and `large` sizes to match new design specs. (@earnox)
+
+### 🐛 Bug Fixes
+
+-   **Progress:**
+    -   Fix height of progress line trail to auto (@philippechevieux)
+-   **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)
+    -   Fix horizontal scroll issue when content is too wide (@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)
+    -   Update title example (@earnox)
+-   **Tabs:**
+    -   Fix badge count issue when using `xsmall` size (@philippechevieux)
+-   **Filter:**
+    -   Cursor should be `not-allowed` if filter has props disabled and expandable (@renaudamsellem)
+    -   Added key to avoid wrong dropdown positioning due to possible content shifting when the dropdown is open (@alechapelain)
+-   **Radio:**
+    -   Fix `danger` state styles (@alechapelain)
+-   **Checkbox:**
+    -   Fix `danger` state styles (@alechapelain)
+-   **Tree:**
+    -   Sets the tree node pseudo-element height to zero to remove unintended vertical spacing. (@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)
+
+-   **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)
@@ -27,83 +188,10 @@
 -   **SidePanel**:
     -   Add opening and closing animations (@philippechevieux)
 
--   Add a pre-commit hook. Now, `eslint` and `tscheck` are run before each commit (@evoiron)
-
-### 📦 Upgrade
-
-> **⚠️ Breaking change:** Upgrade AntDesign version to 5.22.2 (@evoiron, @7Remy, @philippechevieux, @P0ppoff)
-
-The following points are the impact of this version upgrade:
-
--   **Avatar**:
-    -   Add `max` prop to set maximum display related configurations. The following props are now deprecated: (@philippechevieux)
-        -   `maxCount`
-        -   `maxStyle`
-        -   `maxPopoverPlacement`
-        -   `maxPopoverTrigger`
--   **Table**:
-    -   Add `onScroll` prop that will be triggered when table body is scrolled (@philippechevieux)
-    -   Add `showSorterTooltip` prop to manage sorting tooltip (@philippechevieux)
-    -   Add `minWidth` prop to set column min width (@philippechevieux)
--   **Tree**:
-    -   Add `switcherLoadingIcon` prop to customize loading icons for tree nodes (@philippechevieux)
--   **Pagination**:
-    -   Add `showSizeChanger` prop to show or not the pages selector (@7Remy)
-    -   Disallow `simple` and `align` props (@7Remy)
--   **Progress**:
-    -   Add `percentPosition` prop to decide where the percentage is (@7Remy)
--   **Typography**:
-    -   `expandable` prop has new possible value `collapsible`, in addition to exisiting booleans (@7Remy)
--   **Input**:
-    -   Add `onClear` prop that will be triggered when the clear button is clicked (@evoiron)
--   **InputNumber**:
-    -   `focus` method on ref now accepts a `cursor` parameter that controls the cursor behavior on focus. See doc for details (@evoiron)
-    -   `nativeElement` is now exposed by ref to get access to the dom Element (@evoiron)
--   **Slider**:
-    -   Add `editable` prop on the `range` props of `KitSlider` (@evoiron)
-    -   Add `minCount` prop on the `range` props of `KitSlider` (@evoiron)
-    -   Add `maxCount` prop on the `range` props of `KitSlider` (@evoiron)
--   **Upload**:
-    -   Add `extra` option to `showUploadList` prop (@evoiron)
-    -   Options `showPreview`, `showRemoveIcon` and `showDownloadIcon` of `showUploadList` prop now accept a function (@evoiron)
--   **Checkbox**:
-    -   Add focus event listeners `onFocus` and `onBlur` props with documentation (@P0ppoff)
-    -   Update documentation to avoid conflict in API section between `<Checkbox />` and `<Checkbox.Group />` (@P0ppoff)
--   **ColorPicker**
-    -   Disallow `mode` prop from upgrade (@P0ppoff)
-    -   Add `disabledFormat` prop (@P0ppoff)
-    -   Add method to convert CSS to string: `toCssString` (@P0ppoff)
--   **DatePicker**
-    -   Rework `prefix`/`suffixIcon` icon props + new example (Christmas theme) (@P0ppoff)
--   **Select**
-    -   Fix alignment for multiple values (@P0ppoff)
-    -   Fix `oneLineTags` message (@P0ppoff)
-    -   Allow to customize `prefix` and `suffixIcon` icons (@P0ppoff)
-    -   Add `filterSort` prop to replace sort on array of selectable values (@P0ppoff)
-
-### ✨ 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)
-    -   Wrap switcher icon to add `aria-label` to improve accessibility (@philippechevieux)
--   **⚠️ Breaking change - Progress**:
-    -   Complete rewriting of the `Progress` component without Ant (@philippechevieux)
-    -   Remove all Ant props (@philippechevieux)
-    -   `circle` and `dashboard` type are no longer available (@philippechevieux)
--   **Tabs**:
-    -   Add controlled state to handle navigation within tabs (@renaudamsellem)
--   **SidePanel**:
-    -   Add `headerExtra` prop to display extra content above header title (@philippechevieux)
-
 ### 🐛 Bug Fixes
 
 -   **Modal:**
-    - KitModal.setAppElement was defined in typescript but not implemented (@evoiron)
+    -   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)

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
@@ -236,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
@@ -277,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();
@@ -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=/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.
+
+### 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/App/index.js

@@ -1,49 +1,47 @@
-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 { K as b } from "../../chunks/SnackBarProvider.T-xLQpTN.js";
+import { useState as u, useLayoutEffect as L, useRef as S, useEffect as C } from "react";
+import { ConfigProvider as P } from "antd";
+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 { KitEmpty as p } from "../DataDisplay/Empty/index.js";
-const F = "aristid-ds-global", I = (t, e) => {
+import '../../assets/index28.css';const A = "aristid-ds-global", F = (t, e) => {
   const o = g(t);
   return `
         .${e} {
             ${Object.keys(o).map((r) => `${r}: ${o[r]}`).join(";")}
         }
     `;
-}, R = ({ children: t, customTheme: e, id: o }) => {
-  const [r, i] = u(null), { theme: v, appId: c, spacing: K } = _(o, e);
+}, I = ({ children: t, customTheme: e, id: o }) => {
+  const [r, i] = u(null), { theme: v, appId: c, spacing: K } = R(o, 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: F, hasSourceMap: !1, children: `
+  }, []), n(E.Provider, { value: { theme: v, appId: c, spacing: K }, children: r !== null && f(h, { children: [n(m, { id: A, hasSourceMap: !1, children: `
                             :root {
                                 ${Object.keys(r).map((s) => `${s}: ${r[s]}`).join(";")}
                             }
-                        ` }), e && n(m, { hasSourceMap: !1, children: I(a({ general: { utilities: l.utilities } }, e), c) }), t] }) });
-}, _ = (t, e) => {
+                        ` }), e && n(m, { hasSourceMap: !1, children: F(a({ general: { utilities: l.utilities } }, e), c) }), t] }) });
+}, R = (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,
     spacing: i
   };
-}, M = ({ children: t }) => {
-  const e = N();
+}, _ = ({ children: t }) => {
+  const e = M();
   return n(j.Provider, { value: e, children: t });
-}, N = () => {
+}, M = () => {
   const [t, e] = u(d);
   return { locale: t, setKitLocale: (r) => {
     if (r.locale === "frFR") {
@@ -54,15 +52,15 @@ 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 }) => {
+}, Z = ({ children: t, locale: e, customTheme: o, id: r }) => n(I, { customTheme: o, id: r, children: n(_, { children: n(O, { locale: e, children: t }) }) }), O = ({ children: t, locale: e }) => {
   const { locale: o, setKitLocale: r } = k();
-  return P(() => {
+  return C(() => {
     e !== void 0 && r(e);
-  }, [e, r]), n(C, { theme: T, locale: x(e), renderEmpty: () => {
+  }, [e, r]), f(P, { 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(A, { children: [n(b, {}), t] }) });
+  }, children: [n(b, {}), t] });
 };
 export {
-  te as KitApp
+  Z 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.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 = '';
 
@@ -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.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> {