aristid-ds 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Changelog
 
+## [0.12.0](https://www.npmjs.com/package/aristid-ds/v/0.12.0) (2024-02-02)
+
+### ✨ Features
+* **Modal:**
+    * Add `fullscreen`option (@evoiron)
+
+* **⚠️ Breaking change - ItemList**
+    * Add `selected` props to display a colored border (@Delmotte-Vincent)
+    * Rename `onSelectChange` by `onSelect` (@Delmotte-Vincent)
+
+### 🐛 Bug Fixes
+* A build option was removed by error
+* **Select**
+    * Remove unused props `suffixIcon` and adapt the documentation (@Delmotte-Vincent)
+    * Add focus state on select dropdown (@Delmotte-Vincent)
+    * Fix Ellipsed tag on select (@Delmotte-Vincent)
+* **Storybook**
+  * fix a visual bug on storybook caused by an addon (@evoiron)
+
+### 📚 Documentation
+* New documentation page to list available design tokens (@evoiron)
+* Display each design token corresponding css variable (@evoiron)
+* Display package version number on the top right corner of Storybook (@philippechevieux)
+
+## [0.11.0](https://www.npmjs.com/package/aristid-ds/v/0.11.0) (2024-01-24)
+### ✨ Features
+  * **Notification:**
+      * Add `KitNotification` component usable without using `useKitNotification` hook (@evoiron)
+
+### 🐛 Bug Fixes
+
+* Fix warning at build time about potential cycling dependencies (@evoiron)
+* Remove deprecated package `react-uuid` (@evoiron)
+* Enable 3 Select options, to allow dynamic filtering of options (@evoiron)
+
 ## [0.10.0](https://www.npmjs.com/package/aristid-ds/v/0.10.0) (2024-01-19)
 
 ### ✨ Features

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

@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode } from 'react';
-import { IKitCustomTheme } from '../../theme/types';
-import { IKitLocale } from '../../translation/types';
+import { IKitCustomTheme } from '@theme/types';
+import { IKitLocale } from '@translation/types';
 export declare const KitApp: FunctionComponent<{
     customTheme?: IKitCustomTheme;
     locale?: IKitLocale;

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

@@ -16,9 +16,9 @@ const A = u(d)`
             var(${l.neutral.typography.white})
         );
     }
-`, h = (o, r) => o && y(o) ? { [a.colors.background.default]: f(o, r), [a.colors.typography.default]: g(o) ? C(o, r) : k(o) } : null, s = ({ color: o, className: r, style: t, secondaryColorInvert: e = !1, ...m }) => {
-  var n = v().appId, i = p(() => ({ ...t, ...h(o, e) }), [o, e, t]);
-  return c.createElement(A, { style: i, className: n + " " + (r ?? ""), ...m });
+`, h = (r, o) => r && y(r) ? { [a.colors.background.default]: f(r, o), [a.colors.typography.default]: g(r) ? C(r, o) : k(r) } : null, s = ({ color: r, className: o, style: t, secondaryColorInvert: e = !1, ...m }) => {
+  var n = v().appId, i = p(() => ({ ...t, ...h(r, e) }), [r, e, t]);
+  return c.createElement(A, { style: i, className: n + " " + (o ?? ""), ...m });
 }, w = (s.displayName = "KitAvatar", s);
 export {
   w as default

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

@@ -1,10 +1,10 @@
-import l from "react";
+import s from "react";
 import { Avatar as i } from "antd";
 import { useKitTheme as m } from "../../../theme/useKitTheme.js";
 import p, { css as u } from "styled-components";
 import { kitAvatarGroupCssTokens as a } from "../../../theme/aristid/components/DataDisplay/Avatar/index.js";
 import { kitColorsPaletteCssTokens as e } from "../../../theme/aristid/general/colors/index.js";
-const v = p(i.Group)`
+const n = p(i.Group)`
     ${({ $shouldOverrideLastAvatarStyle: r }) => r ? u`
                   &.ant-avatar-group > span:last-child {
                       background: var(
@@ -20,10 +20,10 @@ const v = p(i.Group)`
                       );
                   }
               ` : void 0}
-`, c = ({ className: r, maxCount: o, ...t }) => {
-  var s = m().appId;
-  return l.createElement(v, { ...t, maxCount: o, $shouldOverrideLastAvatarStyle: !!o, className: s + " " + (r ?? ""), maxStyle: { cursor: t.maxPopoverTrigger === "click" ? "pointer" : "initial" } });
-}, $ = c;
+`, v = ({ className: r, maxCount: o, ...t }) => {
+  var l = m().appId;
+  return s.createElement(n, { ...t, maxCount: o, $shouldOverrideLastAvatarStyle: !!o, className: l + " " + (r ?? ""), maxStyle: { cursor: t.maxPopoverTrigger === "click" ? "pointer" : "initial" } });
+}, $ = v;
 export {
   $ as default
 };

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

@@ -1,18 +1,27 @@
-import s, { useMemo as i } from "react";
+import l, { useMemo as m } from "react";
 import { Badge as d } from "antd";
-import { styled as g } from "styled-components";
-import { useKitTheme as c } from "../../../theme/useKitTheme.js";
-import { isValidColor as m, getColor as p, getLighterColor as u } from "../../../utils/functions/index.js";
-import { kitBadgeCssTokens as r } from "../../../theme/aristid/components/DataDisplay/Badge/index.js";
-const y = g(d)`
+import { styled as p } from "styled-components";
+import { useKitTheme as g } from "../../../theme/useKitTheme.js";
+import { isValidColor as c, getColor as u, getLighterColor as f } from "../../../utils/functions/index.js";
+import { kitBadgeCssTokens as e } from "../../../theme/aristid/components/DataDisplay/Badge/index.js";
+import { kitColorsPaletteCssTokens as n } from "../../../theme/aristid/general/colors/index.js";
+import { typographyCssTokens as y } from "../../../theme/aristid/general/typography/index.js";
+import { convertToPixel as h } from "../../../theme/utils/convert.js";
+const C = p(d)`
     height: 16px;
     min-width: 16px;
     line-height: 16px;
-    font-size: calc(var(--general-typography-fontSize7) * 1px);
+    font-size: ${h(y.fontSize7)};
 
     .ant-badge-count {
-        background: var(--components-Badge-colors-background-default, var(--general-colors-secondary-red-red400));
-        color: var(--components-Badge-colors-typography-default, var(--general-colors-neutral-typography-white));
+        background: var(
+            ${e.colors.background.default},
+            var(${n.secondary.red.red400})
+        );
+        color: var(
+            ${e.colors.typography.default},
+            var(${n.neutral.typography.white})
+        );
     }
 
     &.ant-badge {
@@ -34,11 +43,11 @@ const y = g(d)`
             }
         }
     }
-`, f = (o, e) => o && m(o) ? { [r.colors.background.default]: p(o, e), [r.colors.typography.default]: u(o, e) } : null, h = ({ color: o, style: e, secondaryColorInvert: t = !1, ...a }) => {
-  var n = c().appId, l = i(() => ({ ...e, ...f(o, t) }), [o, t, e]);
-  return s.createElement(y, { style: l, className: a.className + " " + n, ...a });
+`, b = (o, t) => o && c(o) ? { [e.colors.background.default]: u(o, t), [e.colors.typography.default]: f(o, t) } : null, k = ({ color: o, style: t, secondaryColorInvert: r = !1, ...a }) => {
+  var i = g().appId, s = m(() => ({ ...t, ...b(o, r) }), [o, r, t]);
+  return l.createElement(C, { style: s, className: a.className + " " + i, ...a });
 };
-h.displayName = "KitBadge";
+k.displayName = "KitBadge";
 export {
-  h as KitBadge
+  k as KitBadge
 };

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

@@ -1,19 +1,19 @@
-import e from "react";
+import r from "react";
 import { styled as G } from "styled-components";
 import N from "classnames";
 import { kitColorsPaletteCssTokens as t } from "../../../theme/aristid/general/colors/index.js";
 import { typographyCssTokens as i } from "../../../theme/aristid/general/typography/index.js";
-import { spacingCssTokens as b } from "../../../theme/aristid/general/spacing/index.js";
+import { spacingCssTokens as h } from "../../../theme/aristid/general/spacing/index.js";
 import { FontAwesomeIcon as T } from "@fortawesome/react-fontawesome";
 import { faEllipsis as S } from "@fortawesome/free-solid-svg-icons";
-import { kitCardCssTokens as r } from "../../../theme/aristid/components/DataDisplay/Card/index.js";
+import { kitCardCssTokens as e } from "../../../theme/aristid/components/DataDisplay/Card/index.js";
 import { useKitTheme as z } from "../../../theme/useKitTheme.js";
+import { KitTag as K } from "../Tag/index.js";
 import { convertToPixel as d } from "../../../theme/utils/convert.js";
-import { KitCheckbox as K } from "../../DataEntry/Checkbox/index.js";
-import { KitSwitch as F } from "../../DataEntry/Switch/index.js";
+import { KitCheckbox as F } from "../../DataEntry/Checkbox/index.js";
+import { KitSwitch as W } from "../../DataEntry/Switch/index.js";
 import { KitButton as c } from "../../General/Button/index.js";
-import { KitDropDown as W } from "../../Navigation/DropDown/index.js";
-import { KitTag as B } from "../Tag/index.js";
+import { KitDropDown as B } from "../../Navigation/DropDown/index.js";
 import { KitTypography as n } from "../../General/Typography/index.js";
 const I = G.div`
     display: flex;
@@ -21,12 +21,12 @@ const I = G.div`
     border-radius: 10px;
     overflow: hidden;
     background-color: var(
-        ${r.colors.background.default},
+        ${e.colors.background.default},
         var(${t.neutral.white})
     );
     border: 1px solid
         var(
-            ${r.colors.border.default},
+            ${e.colors.border.default},
             var(${t.secondary.mediumGrey.mediumGrey200})
         );
     margin: 2px;
@@ -35,12 +35,12 @@ const I = G.div`
 
     &.kit-card-disabled {
         background-color: var(
-            ${r.colors.background.disabled},
+            ${e.colors.background.disabled},
             var(${t.secondary.mediumGrey.mediumGrey100})
         );
         .kit-card-picture {
             border-color: var(
-                ${r.colors.separator.disabled},
+                ${e.colors.separator.disabled},
                 var(${t.secondary.mediumGrey.mediumGrey400})
             );
         }
@@ -48,19 +48,19 @@ const I = G.div`
         .kit-card-content {
             .kit-card-title {
                 color: var(
-                    ${r.colors.typography.title.disabled},
+                    ${e.colors.typography.title.disabled},
                     var(${t.secondary.mediumGrey.mediumGrey400})
                 );
             }
             .kit-card-description {
                 color: var(
-                    ${r.colors.typography.description.disabled},
+                    ${e.colors.typography.description.disabled},
                     var(${t.secondary.mediumGrey.mediumGrey400})
                 );
             }
             .kit-card-extra {
                 color: var(
-                    ${r.colors.typography.extra.disabled},
+                    ${e.colors.typography.extra.disabled},
                     var(${t.secondary.mediumGrey.mediumGrey400})
                 );
             }
@@ -70,48 +70,48 @@ const I = G.div`
     &.kit-card-selected {
         margin: 0;
         border: 3px solid
-            var(${r.colors.border.selected}, var(${t.primary.primary400}));
+            var(${e.colors.border.selected}, var(${t.primary.primary400}));
     }
 
     .kit-card-content {
         grid-area: content;
         display: flex;
         flex-direction: column;
-        gap: ${d(b.xs)};
-        padding: ${d(b.s)};
+        gap: ${d(h.xs)};
+        padding: ${d(h.s)};
 
         .kit-card-title {
-            font-size: ${d(r.typography.title.fontSize, i.fontSize3)};
+            font-size: ${d(e.typography.title.fontSize, i.fontSize3)};
             font-weight: var(
-                ${r.typography.title.fontWeight},
+                ${e.typography.title.fontWeight},
                 var(${i.boldFontWeight})
             );
             color: var(
-                ${r.colors.typography.title.default},
+                ${e.colors.typography.title.default},
                 var(${t.primary.primary400})
             );
         }
 
         .kit-card-description {
-            font-size: ${d(r.typography.description.fontSize, i.fontSize5)};
+            font-size: ${d(e.typography.description.fontSize, i.fontSize5)};
             font-weight: var(
-                ${r.typography.description.fontWeight},
+                ${e.typography.description.fontWeight},
                 var(${i.regularFontWeight})
             );
             color: var(
-                ${r.colors.typography.description.default},
+                ${e.colors.typography.description.default},
                 var(${t.secondary.mediumGrey.mediumGrey600})
             );
         }
 
         .kit-card-extra {
-            font-size: ${d(r.typography.extra.fontSize, i.fontSize4)};
+            font-size: ${d(e.typography.extra.fontSize, i.fontSize4)};
             font-weight: var(
-                ${r.typography.extra.fontWeight},
+                ${e.typography.extra.fontWeight},
                 var(${i.boldFontWeight})
             );
             color: var(
-                ${r.colors.typography.extra.default},
+                ${e.colors.typography.extra.default},
                 var(${t.primary.primary400})
             );
         }
@@ -125,7 +125,7 @@ const I = G.div`
         overflow: hidden;
         position: relative;
         border-bottom: 4px solid
-            ${({ $brandingBar: o }) => o ? `var(${r.colors.separator.default}, var(${t.primary.primary400}))` : "transparent"};
+            ${({ $brandingBar: o }) => o ? `var(${e.colors.separator.default}, var(${t.primary.primary400}))` : "transparent"};
 
         img {
             height: 100%;
@@ -160,14 +160,14 @@ const I = G.div`
     &:focus-within:not(.kit-card-disabled) {
         margin: 0;
         border: 3px solid
-            var(${r.colors.border.focus}, var(${t.primary.primary200}));
+            var(${e.colors.border.focus}, var(${t.primary.primary200}));
         outline: none;
     }
 
     &:hover:not(.kit-card-disabled) {
         margin: 0;
         border: 3px solid
-            var(${r.colors.border.hover}, var(${t.primary.primary400}));
+            var(${e.colors.border.hover}, var(${t.primary.primary400}));
 
         .kit-card-picture {
             border-color: transparent;
@@ -177,10 +177,10 @@ const I = G.div`
             }
         }
     }
-`, A = ({ actions: o, description: s, className: h, style: v, title: l, extra: m, previewSrc: x, tags: p, onActivate: y, onSelect: g, brandingBar: k = !1, selected: f = !1, activated: $ = !1, disabled: a = !1 }) => {
+`, A = ({ actions: o, description: l, className: v, style: x, title: s, extra: m, previewSrc: p, tags: y, onActivate: g, onSelect: f, brandingBar: k = !1, selected: u = !1, activated: $ = !1, disabled: a = !1 }) => {
   const E = z().appId;
   var C = o && 2 < o.length, w = o && o.length <= 2;
-  return e.createElement(I, { tabIndex: a ? -1 : 0, className: N(h, E, { "kit-card-selected": f, "kit-card-disabled": a }), style: v, $brandingBar: k }, e.createElement("div", { className: "kit-card-picture" }, e.createElement("img", { src: x ?? "public/images/no-preview.png" }), g && e.createElement(K, { className: "kit-card-checkbox", onChange: g, checked: f, disabled: a }), y && e.createElement(F, { className: "kit-card-switch", onChange: y, checked: $, disabled: a }), e.createElement("div", { className: "kit-card-buttons" }, w && e.createElement(e.Fragment, null, o.map((u) => e.createElement(c, { type: "segmented", icon: u.icon, onClick: u.onClick, disabled: a }))), C && e.createElement(e.Fragment, null, e.createElement(c, { type: "segmented", icon: o[0].icon, onClick: o[0].onClick, disabled: a }), e.createElement(W, { menu: { items: o.slice(1) }, disabled: a }, e.createElement(c, { type: "segmented", icon: e.createElement(T, { icon: S }) }))))), e.createElement("div", { className: "kit-card-content" }, p && e.createElement(B.Group, { tags: p }), l && e.createElement(n.Text, { className: "kit-card-title" }, l), s && e.createElement(n.Text, { className: "kit-card-description" }, s), m && e.createElement(n.Text, { className: "kit-card-extra", ellipsis: { tooltip: !0 } }, m)));
+  return r.createElement(I, { tabIndex: a ? -1 : 0, className: N(v, E, { "kit-card-selected": u, "kit-card-disabled": a }), style: x, $brandingBar: k }, r.createElement("div", { className: "kit-card-picture" }, r.createElement("img", { src: p ?? "public/images/no-preview.png" }), f && r.createElement(F, { className: "kit-card-checkbox", onChange: f, checked: u, disabled: a }), g && r.createElement(W, { className: "kit-card-switch", onChange: g, checked: $, disabled: a }), r.createElement("div", { className: "kit-card-buttons" }, w && r.createElement(r.Fragment, null, o.map((b) => r.createElement(c, { type: "segmented", icon: b.icon, onClick: b.onClick, disabled: a }))), C && r.createElement(r.Fragment, null, r.createElement(c, { type: "segmented", icon: o[0].icon, onClick: o[0].onClick, disabled: a }), r.createElement(B, { menu: { items: o.slice(1) }, disabled: a }, r.createElement(c, { type: "segmented", icon: r.createElement(T, { icon: S }) }))))), r.createElement("div", { className: "kit-card-content" }, y && r.createElement(K.Group, { tags: y }), s && r.createElement(n.Text, { className: "kit-card-title" }, s), l && r.createElement(n.Text, { className: "kit-card-description" }, l), m && r.createElement(n.Text, { className: "kit-card-extra", ellipsis: { tooltip: !0 } }, m)));
 };
 A.displayName = "KitCard";
 export {

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

@@ -1,15 +1,15 @@
-import v, { cloneElement as m } from "react";
-import { Collapse as $ } from "antd";
-import x from "styled-components";
+import v, { cloneElement as b } from "react";
+import { Collapse as h } from "antd";
+import $ from "styled-components";
 import { kitCollapseCssTokens as e } from "../../../theme/aristid/components/DataDisplay/Collapse/index.js";
 import { borderCssTokens as d } from "../../../theme/aristid/general/border/index.js";
 import { kitColorsPaletteCssTokens as o } from "../../../theme/aristid/general/colors/index.js";
 import { spacingCssTokens as t } from "../../../theme/aristid/general/spacing/index.js";
-import { useKitTheme as g } from "../../../theme/useKitTheme.js";
-import { FontAwesomeIcon as C } from "@fortawesome/react-fontawesome";
-import { faChevronDown as k } from "@fortawesome/free-solid-svg-icons";
+import { useKitTheme as x } from "../../../theme/useKitTheme.js";
+import { FontAwesomeIcon as g } from "@fortawesome/react-fontawesome";
+import { faChevronDown as C } from "@fortawesome/free-solid-svg-icons";
 import { convertToPixel as a } from "../../../theme/utils/convert.js";
-const I = x($)`
+const k = $(h)`
     border: none;
 
     &&& > .ant-collapse-item {
@@ -108,7 +108,7 @@ const I = x($)`
             }
         }
 
-        &.ant-collapse-item-active .ant-collapse-header .ant-collapse-expand-icon svg {
+        &.ant-collapse-item-active > .ant-collapse-header > .ant-collapse-expand-icon svg {
             transition: transform 0.3s ease-in-out;
             transform: rotate(180deg);
         }
@@ -142,15 +142,14 @@ const I = x($)`
             }
         }
     }
-`, T = () => v.createElement(C, { icon: k }), b = ({ className: u, expandIcon: f, items: l, collapsible: n, ...y }) => {
-  var h = g().appId;
-  return n === "disabled" && (l == null || l.forEach((r) => {
-    var p, c;
-    var s, i;
-    r.label !== void 0 && (s = r.label, i = r.extra, s !== void 0 && ((p = s.type) == null ? void 0 : p.displayName) === "KitHeader" && (r.label = m(s, { disabled: !0 })), i !== void 0) && ((c = i.type) == null ? void 0 : c.displayName) === "KitHeaderExtra" && (r.extra = m(i, { disabled: !0 }));
-  })), v.createElement(I, { ...y, className: h + " " + (u ?? ""), expandIcon: f ?? T, expandIconPosition: "end", collapsible: n, items: l });
-}, R = (b.displayName = "KitCollapse", b);
+`, I = () => v.createElement(g, { icon: C }), u = ({ className: p, expandIcon: c, items: n, collapsible: m, ...f }) => {
+  var y = x().appId;
+  return m === "disabled" && n != null && n.forEach((r) => {
+    var l, s, i;
+    r.label !== void 0 && (s = r.label, i = r.extra, s !== void 0 && ((l = s.type) == null ? void 0 : l.displayName) === "KitHeader" && (r.label = b(s, { disabled: !0 })), i !== void 0) && ((l = i.type) == null ? void 0 : l.displayName) === "KitHeaderExtra" && (r.extra = b(i, { disabled: !0 }));
+  }), v.createElement(k, { ...f, className: y + " " + (p ?? ""), expandIcon: c ?? I, expandIconPosition: "end", collapsible: m, items: n });
+}, F = (u.displayName = "KitCollapse", u);
 export {
-  b as KitCollapse,
-  R as default
+  u as KitCollapse,
+  F as default
 };

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

@@ -1,15 +1,15 @@
 import e from "react";
 import m from "styled-components";
-import { FontAwesomeIcon as p } from "@fortawesome/react-fontawesome";
-import { faEye as g } from "@fortawesome/free-regular-svg-icons";
+import { KitTag as p } from "../Tag/index.js";
+import { KitImage as g } from "../Image/index.js";
+import { FontAwesomeIcon as h } from "@fortawesome/react-fontawesome";
+import { faEye as k } from "@fortawesome/free-regular-svg-icons";
 import { convertToPixel as l } from "../../../theme/utils/convert.js";
 import { spacingCssTokens as n } from "../../../theme/aristid/general/spacing/index.js";
-import { typographyCssTokens as h } from "../../../theme/aristid/general/typography/index.js";
-import { KitSwitch as k } from "../../DataEntry/Switch/index.js";
-import { KitImage as w } from "../Image/index.js";
-import { KitTag as f } from "../Tag/index.js";
+import { typographyCssTokens as w } from "../../../theme/aristid/general/typography/index.js";
+import { KitSwitch as v } from "../../DataEntry/Switch/index.js";
 import { KitTypography as c } from "../../General/Typography/index.js";
-const v = m.div`
+const f = m.div`
     display: grid;
     grid-template: 'switch image content';
     grid-template-columns: min-content min-content min-content;
@@ -42,20 +42,20 @@ const v = m.div`
 
         .kit-collapse-header-content-title {
             grid-area: title;
-            font-size: ${l(h.fontSize3)};
+            font-size: ${l(w.fontSize3)};
         }
 
         .kit-collapse-header-content-description {
             grid-area: description;
         }
     }
-`, E = ({ onSwitchChange: t, disabled: i }) => e.createElement("div", { className: "kit-collapse-header-switch", onClick: (a) => a.stopPropagation() }, e.createElement(k, { onChange: (a, r) => {
-  var o;
-  (o = r.target.closest(".ant-collapse-item")) == null || o.setAttribute("data-item-selected", a.toString()), t(a, r);
-}, disabled: i })), x = ({ imageSrc: t }) => e.createElement("div", { className: "kit-collapse-header-image", onClick: (i) => i.stopPropagation() }, e.createElement(w, { src: t, style: { height: "auto", width: "auto", maxHeight: "90px", maxWidth: "50px" }, preview: { mask: e.createElement(p, { icon: g }) } })), C = ({ title: t, description: i, tagContent: a, disabled: r }) => {
+`, E = ({ onSwitchChange: t, disabled: i }) => e.createElement("div", { className: "kit-collapse-header-switch", onClick: (a) => a.stopPropagation() }, e.createElement(v, { onChange: (a, r) => {
+  var o = r.target.closest(".ant-collapse-item");
+  o != null && o.setAttribute("data-item-selected", a.toString()), t(a, r);
+}, disabled: i })), x = ({ imageSrc: t }) => e.createElement("div", { className: "kit-collapse-header-image", onClick: (i) => i.stopPropagation() }, e.createElement(g, { src: t, style: { height: "auto", width: "auto", maxHeight: "90px", maxWidth: "50px" }, preview: { mask: e.createElement(h, { icon: k }) } })), C = ({ title: t, description: i, tagContent: a, disabled: r }) => {
   var o = "kit-collapse-header-content";
-  return e.createElement("div", { className: o += t !== void 0 && i !== void 0 ? " kit-collapse-header-content-rows" : "" }, a !== void 0 && e.createElement("div", { className: "kit-collapse-header-tag" }, e.createElement(f, null, a)), t !== void 0 && e.createElement(c.Text, { className: "kit-collapse-header-content-title", size: "large", weight: "bold", ellipsis: { tooltip: !0 }, disabled: r }, t), i !== void 0 && e.createElement(c.Text, { className: "kit-collapse-header-content-description", size: "large", weight: "regular", ellipsis: { tooltip: !0 }, disabled: r }, i));
-}, d = ({ onSwitchChange: t, imageSrc: i, title: a, description: r, tagContent: o, disabled: s = !1 }) => e.createElement(v, null, t !== void 0 && e.createElement(E, { onSwitchChange: t, disabled: s }), i !== void 0 && e.createElement(x, { imageSrc: i }), e.createElement(C, { title: a, description: r, tagContent: o, disabled: s })), P = (d.displayName = "KitHeader", d);
+  return e.createElement("div", { className: o += t !== void 0 && i !== void 0 ? " kit-collapse-header-content-rows" : "" }, a !== void 0 && e.createElement("div", { className: "kit-collapse-header-tag" }, e.createElement(p, null, a)), t !== void 0 && e.createElement(c.Text, { className: "kit-collapse-header-content-title", size: "large", weight: "bold", ellipsis: { tooltip: !0 }, disabled: r }, t), i !== void 0 && e.createElement(c.Text, { className: "kit-collapse-header-content-description", size: "large", weight: "regular", ellipsis: { tooltip: !0 }, disabled: r }, i));
+}, d = ({ onSwitchChange: t, imageSrc: i, title: a, description: r, tagContent: o, disabled: s = !1 }) => e.createElement(f, null, t !== void 0 && e.createElement(E, { onSwitchChange: t, disabled: s }), i !== void 0 && e.createElement(x, { imageSrc: i }), e.createElement(C, { title: a, description: r, tagContent: o, disabled: s })), P = (d.displayName = "KitHeader", d);
 export {
   d as KitHeader,
   P as default

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

@@ -1,14 +1,14 @@
-import o, { useState as E } from "react";
-import f from "styled-components";
-import { FontAwesomeIcon as C } from "@fortawesome/react-fontawesome";
-import { faEllipsisVertical as b } from "@fortawesome/free-solid-svg-icons";
+import o, { useState as k } from "react";
+import E from "styled-components";
+import { FontAwesomeIcon as f } from "@fortawesome/react-fontawesome";
+import { faEllipsisVertical as u } from "@fortawesome/free-solid-svg-icons";
 import { convertToPixel as d } from "../../../theme/utils/convert.js";
-import { spacingCssTokens as p } from "../../../theme/aristid/general/spacing/index.js";
-import { useKitLocale as u } from "../../../translation/useKitLocale.js";
+import { spacingCssTokens as m } from "../../../theme/aristid/general/spacing/index.js";
+import { useKitLocale as C } from "../../../translation/useKitLocale.js";
 import { KitTooltip as c } from "../Tooltip/index.js";
 import { KitButton as s } from "../../General/Button/index.js";
-import { KitDropDown as x } from "../../Navigation/DropDown/index.js";
-const h = f.div`
+import { KitDropDown as b } from "../../Navigation/DropDown/index.js";
+const x = E.div`
     display: grid;
     grid-template: 'checkbox actions';
 
@@ -18,19 +18,18 @@ const h = f.div`
     }
 
     .kit-collapse-header-extra-actions {
-        padding-left: ${d(p.s)};
+        padding-left: ${d(m.s)};
         grid-area: actions;
         display: grid;
         grid-template-columns: auto auto;
 
         > div:nth-child(2) {
-            margin-left: ${d(p.s)};
+            margin-left: ${d(m.s)};
         }
     }
-`, v = ({ actions: e, disabled: t }) => {
-  var m;
-  const [r, n] = E(!1);
-  var k = u().locale;
+`, h = ({ actions: e, disabled: t }) => {
+  const [r, n] = k(!1);
+  var g = C().locale;
   const a = e[0] || null, l = e.length <= 2 && e[1] ? e[1] : null;
   return o.createElement("div", { className: "kit-collapse-header-extra-actions" }, a && o.createElement(c, { title: a.label, open: !t && void 0 }, o.createElement(s, { icon: a.icon, disabled: t, onClick: (i) => {
     i.stopPropagation(), a.onClick && a.onClick(i);
@@ -38,9 +37,9 @@ const h = f.div`
     i.stopPropagation(), l.onClick !== void 0 && l.onClick(i);
   } })), 2 < e.length && o.createElement("div", { onClick: (i) => {
     i.stopPropagation();
-  } }, o.createElement(x, { menu: { items: y({ actions: e }) }, trigger: ["click"], onOpenChange: () => n(!1) }, o.createElement(c, { title: (m = k.Collapse) == null ? void 0 : m.more, open: !t && r, onOpenChange: n }, o.createElement(s, { icon: o.createElement(C, { icon: b }), disabled: t })))));
-}, y = ({ actions: e }) => (e = [...e], e.splice(0, 1), e = e.map((t, r) => ({ key: r, icon: t.icon, label: t.label, onClick: (n) => t.onClick && t.onClick(n) })), e), g = ({ actions: e, disabled: t = !1 }) => o.createElement(h, null, e !== void 0 && o.createElement(v, { actions: e, disabled: t })), S = (g.displayName = "KitHeaderExtra", g);
+  } }, o.createElement(b, { menu: { items: v({ actions: e }) }, trigger: ["click"], onOpenChange: () => n(!1) }, o.createElement(c, { title: (e = g.Collapse) == null ? void 0 : e.more, open: !t && r, onOpenChange: n }, o.createElement(s, { icon: o.createElement(f, { icon: u }), disabled: t })))));
+}, v = ({ actions: e }) => (e = [...e], e.splice(0, 1), e = e.map((t, r) => ({ key: r, icon: t.icon, label: t.label, onClick: (n) => t.onClick && t.onClick(n) })), e), p = ({ actions: e, disabled: t = !1 }) => o.createElement(x, null, e !== void 0 && o.createElement(h, { actions: e, disabled: t })), O = (p.displayName = "KitHeaderExtra", p);
 export {
-  g as KitHeaderExtra,
-  S as default
+  p as KitHeaderExtra,
+  O as default
 };

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

@@ -1,31 +1,31 @@
-import d from "react";
-import { Image as l } from "antd";
-import n from "styled-components";
-import { FontAwesomeIcon as b } from "@fortawesome/react-fontawesome";
-import { faEye as f } from "@fortawesome/free-solid-svg-icons";
+import t from "react";
+import { Image as u } from "antd";
+import p from "styled-components";
+import { FontAwesomeIcon as $ } from "@fortawesome/react-fontawesome";
+import { faEye as v } from "@fortawesome/free-solid-svg-icons";
 import { useKitLocale as k } from "../../../translation/useKitLocale.js";
 import { kitImageCssTokens as e } from "../../../theme/aristid/components/DataDisplay/Image/index.js";
 import { borderCssTokens as a } from "../../../theme/aristid/general/border/index.js";
-import { kitColorsPaletteCssTokens as i } from "../../../theme/aristid/general/colors/index.js";
+import { kitColorsPaletteCssTokens as l } from "../../../theme/aristid/general/colors/index.js";
 import { useKitTheme as g } from "../../../theme/useKitTheme.js";
-const I = n(l)`
-    border-radius: ${({ $rounded: r }) => r ? `calc(var(${e.border.radius.rounded}, var(${a.radius.s})) * 1px)` : `calc(var(${e.border.radius.default}, var(${a.radius.square})) * 1px)`};
-    border: ${({ $bordered: r }) => r ? `1px solid var(${e.colors.border.default}, var(${i.neutral.black60}))` : `var(${e.colors.border.none}, none))`};
+import { convertToPixel as d } from "../../../theme/utils/convert.js";
+const I = p(u)`
+    border-radius: ${({ $rounded: r }) => r ? d(e.border.radius.rounded, a.radius.s) : d(e.border.radius.default, a.radius.square)};
+    border: ${({ $bordered: r }) => r ? `1px solid var(${e.colors.border.default}, var(${l.neutral.black60}))` : `var(${e.colors.border.none}, none))`};
 
     + .ant-image-mask {
-        border-radius: ${({ $rounded: r }) => r ? `calc(var(${e.border.radius.rounded}, var(${a.radius.s})) * 1px)` : `calc(var(${e.border.radius.default}, var(${a.radius.square})) * 1px)`};
-        border: ${({ $bordered: r }) => r ? `1px solid var(${e.colors.border.default}, var(${i.neutral.black60}))` : `var(${e.colors.border.none}, none))`};
+        border-radius: ${({ $rounded: r }) => r ? d(e.border.radius.rounded, a.radius.s) : d(e.border.radius.default, a.radius.square)};
+        border: ${({ $bordered: r }) => r ? `1px solid var(${e.colors.border.default}, var(${l.neutral.black60}))` : `var(${e.colors.border.none}, none))`};
     }
-`, x = n.div`
+`, w = p.div`
     display: flex;
     gap: 6px;
-`, w = ({ rounded: r, bordered: u, preview: o, className: p, ...c }) => {
-  var t;
-  var $ = k().locale, v = g().appId;
-  const s = d.createElement(x, null, d.createElement(b, { icon: f }), (t = $.Image) == null ? void 0 : t.preview);
-  return d.createElement(I, { className: v + " " + (p ?? ""), $rounded: r, $bordered: u, preview: typeof o == "object" ? { mask: s, ...o } : o === void 0 ? { mask: s } : o, ...c });
-}, m = w;
-m.PreviewGroup = l.PreviewGroup, m.displayName = "KitImage";
+`, x = ({ rounded: r, bordered: b, preview: o, className: i, ...c }) => {
+  var s = k().locale, f = g().appId;
+  const m = t.createElement(w, null, t.createElement($, { icon: v }), (s = s.Image) == null ? void 0 : s.preview);
+  return t.createElement(I, { className: f + " " + (i ?? ""), $rounded: r, $bordered: b, preview: typeof o == "object" ? { mask: m, ...o } : o === void 0 ? { mask: m } : o, ...c });
+}, n = x;
+n.PreviewGroup = u.PreviewGroup, n.displayName = "KitImage";
 export {
-  m as KitImage
+  n as KitImage
 };

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

@@ -1,19 +1,14 @@
-import e from "react";
-import i from "styled-components";
-import { KitTooltip as m } from "../Tooltip/index.js";
+import l from "react";
+import m from "styled-components";
+import { KitTooltip as c } from "../Tooltip/index.js";
 import { useKitTheme as s } from "../../../theme/useKitTheme.js";
-import { kitItemCardCssTokens as t } from "../../../theme/aristid/components/DataDisplay/ItemCard/index.js";
-import { borderCssTokens as n } from "../../../theme/aristid/general/border/index.js";
-const d = i.div`
-    width: ${({ $column: r }) => r ? `calc(var(
-                ${t.colorBar.thickness},
-                8
-            )* 1px)` : "auto"};
-    height: ${({ $column: r }) => r ? "auto" : `calc(var(
-                ${t.colorBar.thickness},
-                8
-            )* 1px)`};
-    border-radius: calc(var(${t.colorBar.border.radius}, var(${n.radius.s})) * 1px);
+import { kitItemCardCssTokens as a } from "../../../theme/aristid/components/DataDisplay/ItemCard/index.js";
+import { borderCssTokens as u } from "../../../theme/aristid/general/border/index.js";
+import { convertToPixel as i } from "../../../theme/utils/convert.js";
+const d = m.div`
+    width: ${({ $column: r }) => r ? i(a.colorBar.thickness, 8) : "auto"};
+    height: ${({ $column: r }) => r ? "auto" : i(a.colorBar.thickness, 8)};
+    border-radius: ${i(a.colorBar.border.radius, u.radius.s)};
     display: flex;
     flex-direction: ${({ $column: r }) => r ? "column" : "row"};
     overflow: hidden;
@@ -21,11 +16,10 @@ const d = i.div`
     > div {
         flex: 1 1 auto;
     }
-`, p = (r) => ({ background: r.color ?? "transparent" }), u = (r) => {
-  var a;
-  var l = s().appId;
-  return e.createElement(d, { $column: r.vertical ?? !1, className: l + " " + r.className }, (a = r.colors) == null ? void 0 : a.map((o, c) => e.createElement(m, { key: o.label + "_" + c, title: o.label, placement: r.vertical ? "right" : "top" }, e.createElement("div", { style: p(o) }))));
-}, x = u;
+`, p = (r) => ({ background: (r = r.color) != null ? r : "transparent" }), f = (r) => {
+  var o, n = s().appId;
+  return l.createElement(d, { $column: (o = r.vertical) != null && o, className: n + " " + r.className }, (o = r.colors) == null ? void 0 : o.map((e, t) => l.createElement(c, { key: e.label + "_" + t, title: e.label, placement: (t = r.vertical) != null && t ? "right" : "top" }, l.createElement("div", { style: p(e) }))));
+}, y = f;
 export {
-  x as default
+  y as default
 };