aristid-ds 14.0.0-cdba7e7 → 14.0.0-e6e2929

package/CHANGELOG.md

@@ -6,6 +6,9 @@
 -   **AutoComplete**:
     -   Add `size` property to enable `small`, `middle` and `large` sizes (@fatb38)
     
+-   **Avatar**:
+    -   Add new `size` options : `xs`, `s`, `m`, `l`, `xl` (@fatb38)
+    
 -   **ColorPicker**:
     -   Add `size` property to enable `small`, `middle` and `large` sizes (@fatb38)
 
@@ -38,6 +41,11 @@
 -   **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`
+
 ### 🐛 Bug Fixes
 
 -   **Modal:**

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

@@ -1,4 +1,4 @@
-import { s as t, K as n } from "../../../chunks/Avatar.N2w2jq_C.js";
+import { s as t, K as n } from "../../../chunks/Avatar.BvI60jet.js";
 import { jsx as u } from "react/jsx-runtime";
 import { Avatar as c } from "antd";
 import { u as d } from "../../../chunks/useKitTheme.KSAU-Pdv.js";

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

@@ -16,6 +16,7 @@ export interface IKitAvatar extends Omit<AvatarProps, AntdAvatarTypesToOmit>, Ki
     secondaryColorInvert?: boolean;
     imageFit?: KitImageFit;
     disabled?: boolean;
+    size?: 'xs' | 's' | 'm' | 'l' | 'xl';
 }
 
 export interface IKitAvatarGroup

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

@@ -1,37 +1,69 @@
 import "../../../assets/index2.css";
-import { jsxs as c, jsx as i } from "react/jsx-runtime";
+import { jsxs as y, jsx as e } from "react/jsx-runtime";
 import n from "classnames";
-import { t as D } from "../../../chunks/styles.module.shsViPAW.js";
-import { u as v } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import { K as N } from "../../../chunks/Avatar.N2w2jq_C.js";
-import { KitTooltip as y } from "../Tooltip/index.js";
-import { T as m } from "../../../chunks/constants.DINGxt3I.js";
-const T = {
-  "kit-id-card": "_kit-id-card_1go5o_2"
-}, h = [
-  D["kit-typography-text"],
+import { t as S } from "../../../chunks/styles.module.shsViPAW.js";
+import { u as T } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
+import { K as v } from "../../../chunks/Avatar.BvI60jet.js";
+import { KitTooltip as d } from "../Tooltip/index.js";
+import { T as h } from "../../../chunks/constants.DINGxt3I.js";
+const D = {
+  "kit-id-card": "_kit-id-card_1vabr_2"
+}, m = [
+  S["kit-typography-text"],
   "ant-typography",
   "ant-typography-text",
   "ant-typography-ellipsis",
   "ant-typography-ellipsis-single-line"
-], _ = (r, t, a, o) => {
-  const s = n("kit-id-card-title", ...h, "kit-typography-fontSize5", "ant-typography-bold", {
-    "kit-id-card-title-large": t === "large",
+], z = (t) => {
+  switch (t) {
+    case "xl":
+      return "kit-typography-fontSize5";
+    case "l":
+      return "kit-typography-fontSize6";
+    default:
+      return "kit-typography-fontSize7";
+  }
+}, N = (t) => {
+  switch (t) {
+    case "xl":
+      return "kit-typography-fontSize1";
+    case "l":
+      return "kit-typography-fontSize2";
+    case "m":
+      return "kit-typography-fontSize3";
+    case "s":
+      return "kit-typography-fontSize4";
+    case "xs-bold":
+    case "xs-medium":
+      return "kit-typography-fontSize5";
+  }
+}, _ = (t) => {
+  switch (t) {
+    case "xl":
+    case "l":
+      return "xl";
+    case "m":
+    case "s":
+      return "l";
+    default:
+      return "m";
+  }
+}, E = (t, r, a, i) => {
+  const s = n("kit-id-card-title", ...m, N(r), {
+    "ant-typography-bold": r !== "xs-medium",
     "ant-typography-disabled": a
   });
-  return i("span", { className: s, children: i(y, { title: o ? "" : r, mouseEnterDelay: m, children: i("span", { children: r }) }) });
-}, E = (r, t, a, o) => {
-  const s = n("kit-id-card-description", ...h, "ant-typography-regular", {
-    "kit-typography-fontSize5": t !== "medium",
-    "kit-typography-fontSize7": t === "medium",
+  return e("span", { className: s, children: e(d, { title: i ? "" : t, mouseEnterDelay: h, children: e("span", { children: t }) }) });
+}, K = (t, r, a, i) => {
+  const s = n("kit-id-card-description", ...m, "ant-typography-regular", z(r), {
     "ant-typography-disabled": a
   });
-  return i("span", { className: s, children: i(y, { title: o ? "" : r, mouseEnterDelay: m, children: i("span", { children: r }) }) });
-}, K = ({ className: r, title: t, description: a, avatarProps: o, size: s = "medium", disabled: e = !1, disableTooltip: p = !1, ...g }) => {
-  const { appId: f } = v(), u = n(f, T["kit-id-card"], r), k = o !== void 0, l = t !== void 0, d = a !== void 0, x = l || d;
-  return c("div", { className: `${u} id-card-grid`, ...g, children: [k && i("div", { className: "card-avatar", children: i(N, { ...o, disabled: e }) }), x && c("div", { className: "card-info", children: [l && typeof t == "string" ? _(t, s, e, p) : t, d && typeof a == "string" ? E(a, s, e, p) : a] })] });
+  return e("span", { className: s, children: e(d, { title: i ? "" : t, mouseEnterDelay: h, children: e("span", { children: t }) }) });
+}, I = ({ className: t, title: r, description: a, avatarProps: i, size: s = "xs-bold", disabled: o = !1, disableTooltip: p = !1, ...g }) => {
+  const { appId: u } = T(), f = n(u, D["kit-id-card"], t), x = i !== void 0, c = r !== void 0, l = a !== void 0, k = c || l;
+  return y("div", { className: `${f} id-card-grid`, ...g, children: [x && e("div", { className: "card-avatar", children: e(v, { ...i, size: _(s), disabled: o }) }), k && y("div", { className: "card-info", children: [c && typeof r == "string" ? E(r, s, o, p) : r, l && typeof a == "string" ? K(a, s, o, p) : a] })] });
 };
-K.displayName = "KitIdCard";
+I.displayName = "KitIdCard";
 export {
-  K as KitIdCard
+  I as KitIdCard
 };

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

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

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

@@ -16,20 +16,20 @@ const I = {
   "kit-tag-group": "_kit-tag-group_6ocqb_111",
   "kit-tag-group-measure": "_kit-tag-group-measure_6ocqb_117",
   "kit-tag-group-container": "_kit-tag-group-container_6ocqb_124"
-}, h = D(({ className: r, closeIcon: s, type: a = "neutral", disabled: i, disableTooltip: c = !1, onClick: p, idCardProps: o, ...d }, u) => {
+}, h = D(({ className: r, closeIcon: s, type: c = "neutral", disabled: i, disableTooltip: a = !1, onClick: p, idCardProps: o, ...d }, u) => {
   const { appId: b } = x(), _ = $(b, I["kit-tag"], r, {
-    [`kit-tag-${a}`]: a,
+    [`kit-tag-${c}`]: c,
     "kit-tag-disabled": i,
     "kit-tag-clickable": p
   });
-  return t(z, { tabIndex: i ? M : R, ref: u, ...d, className: _, closeIcon: s ?? t(P, { icon: X }), onClick: p, closable: !!d.onClose, children: t(j, { disabled: i, disableTooltip: c, avatarProps: o != null && o.avatarProps ? { ...o == null ? void 0 : o.avatarProps, size: "small" } : void 0, description: o == null ? void 0 : o.description }) });
-}), H = ({ tags: r, containerRef: s, measureRef: a, handleCloseTag: i }) => {
-  var c;
+  return t(z, { tabIndex: i ? M : R, ref: u, ...d, className: _, closeIcon: s ?? t(P, { icon: X }), onClick: p, closable: !!d.onClose, children: t(j, { disabled: i, disableTooltip: a, avatarProps: o != null && o.avatarProps ? { ...o == null ? void 0 : o.avatarProps, size: "s" } : void 0, description: o == null ? void 0 : o.description }) });
+}), H = ({ tags: r, containerRef: s, measureRef: c, handleCloseTag: i }) => {
+  var a;
   const [p, o] = G([]), [d, u] = G(0), [b, _] = G(t(E, {})), v = O(null), { locale: T } = F();
   return L(() => {
     const K = () => {
       var k, g, e;
-      const l = s.current, f = a.current;
+      const l = s.current, f = c.current;
       if (!l || !f)
         return;
       _(W(E, { children: [r.map((n, y) => t(h, { type: n == null ? void 0 : n.type, disabled: n == null ? void 0 : n.disabled, idCardProps: n.idCardProps, onClose: () => {
@@ -53,20 +53,20 @@ const I = {
     return K(), v.current = new ResizeObserver(N), s.current && v.current.observe(s.current), () => {
       v.current && v.current.disconnect(), clearTimeout(m);
     };
-  }, [s, i, d, (c = T.General) === null || c === void 0 ? void 0 : c.others, a, r]), {
+  }, [s, i, d, (a = T.General) === null || a === void 0 ? void 0 : a.others, c, r]), {
     measureTags: b,
     visibleTags: p,
     hiddenCount: d
   };
-}, J = ({ tags: r, style: s, className: a, handleCloseTag: i, othersTagType: c = "neutral", othersTagDisabled: p }) => {
+}, J = ({ tags: r, style: s, className: c, handleCloseTag: i, othersTagType: a = "neutral", othersTagDisabled: p }) => {
   var o;
   const d = O(null), u = O(null), { locale: b } = F(), { appId: _ } = x(), [v, T] = G(!1), { measureTags: K, visibleTags: m, hiddenCount: N } = H({ tags: r, containerRef: d, measureRef: u, handleCloseTag: i }), k = () => r.slice(m.length).map((e, l) => {
     var f;
     return t("div", { children: (f = e.idCardProps) === null || f === void 0 ? void 0 : f.description }, l);
-  }), g = $(_, I["kit-tag-group"], a);
+  }), g = $(_, I["kit-tag-group"], c);
   return W("div", { className: I["kit-tag-group-container"], children: [W("div", { ref: d, style: s, className: g, children: [m.map((e, l) => t(h, { type: e == null ? void 0 : e.type, disabled: e == null ? void 0 : e.disabled, idCardProps: e.idCardProps, onClose: i ? () => {
     i(l);
-  } : void 0 }, l)), N > 0 && t(V, { overlay: k(), children: t(h, { type: c, disabled: p, disableTooltip: !0, idCardProps: { description: `+${N} ${(o = b.General) === null || o === void 0 ? void 0 : o.others}` }, onClick: () => T(!0) }) }), t(U, { isOpen: v, close: () => T(!1), showCloseIcon: !0, title: "Tags", appElement: document.body, children: t("div", { style: { display: "flex", flexWrap: "wrap", rowGap: "8px" }, children: r.map((e, l) => t(h, { id: `tag-${l}`, type: e == null ? void 0 : e.type, disabled: e == null ? void 0 : e.disabled, idCardProps: e.idCardProps, onClose: i ? () => {
+  } : void 0 }, l)), N > 0 && t(V, { overlay: k(), children: t(h, { type: a, disabled: p, disableTooltip: !0, idCardProps: { description: `+${N} ${(o = b.General) === null || o === void 0 ? void 0 : o.others}` }, onClick: () => T(!0) }) }), t(U, { isOpen: v, close: () => T(!1), showCloseIcon: !0, title: "Tags", appElement: document.body, children: t("div", { style: { display: "flex", flexWrap: "wrap", rowGap: "8px" }, children: r.map((e, l) => t(h, { id: `tag-${l}`, type: e == null ? void 0 : e.type, disabled: e == null ? void 0 : e.disabled, idCardProps: e.idCardProps, onClose: i ? () => {
     i(l);
   } : void 0 }, l)) }) })] }), t("div", { ref: u, className: I["kit-tag-group-measure"], "aria-hidden": "true", children: K })] });
 }, Q = J, S = h;

package/dist/Kit/Navigation/Header/index.js

@@ -1,7 +1,7 @@
 import "../../../assets/index34.css";
 import { jsxs as h, jsx as t } from "react/jsx-runtime";
 import { u } from "../../../chunks/useKitTheme.KSAU-Pdv.js";
-import g from "classnames";
+import _ from "classnames";
 import { KitDropDown as x } from "../DropDown/index.js";
 import { FontAwesomeIcon as O } from "@fortawesome/react-fontawesome";
 import { faGrip as q } from "@fortawesome/free-solid-svg-icons";
@@ -9,13 +9,13 @@ import { getContrastColor as F } from "../../../utils/functions/index.js";
 import { F as I } from "../../../chunks/constants.DINGxt3I.js";
 import { useState as H } from "react";
 import { KitTag as P } from "../../DataDisplay/Tag/index.js";
-import { KitIdCard as _ } from "../../DataDisplay/IdCard/index.js";
+import { KitIdCard as g } from "../../DataDisplay/IdCard/index.js";
 const R = {
   "kit-header": "_kit-header_4hqaz_2"
 }, T = (a) => ({
   "--kit-header-invert-color": F(a)
 }), j = ({ className: a, children: l, menu: s, logo: e, langSwitcher: o, profile: m, ...i }) => {
-  const { appId: p, theme: v } = u(), d = g(p, R["kit-header"], {
+  const { appId: p, theme: v } = u(), d = _(p, R["kit-header"], {
     "with-menu": s,
     "with-logo": e,
     "with-profile": m,
@@ -24,10 +24,10 @@ const R = {
   return h("div", { style: k, ...i, className: d, children: [s && t(x, { dropdownRender: f, children: t("div", { className: "kit-header-menu", tabIndex: I, children: t(O, { icon: q }) }) }), e && t("div", { className: "kit-header-logo", children: e }), t("div", { className: "kit-header-content", children: l }), h("div", { className: "kit-header-right-items", children: [m, o && t("div", { className: "kit-header-lang", children: o })] })] });
 }, z = ({ logo: a, tagProps: l, profileCardProps: s, profileMenuCardProps: e, complement: o, className: m, menu: i = null, alt: p = "", ...v }) => {
   var d;
-  const { appId: f } = u(), [k, K] = H(!1), b = g(f, "kit-header-profile", {
+  const { appId: f } = u(), [k, K] = H(!1), b = _(f, "kit-header-profile", {
     "with-menu": i,
     open: k
-  }, m), y = g("kit-header-profile-menu-card", {
+  }, m), y = _("kit-header-profile-menu-card", {
     clickable: e == null ? void 0 : e.onClick
   }, e == null ? void 0 : e.className), n = s;
   n && n.avatarProps && (n.avatarProps.shape = "square");
@@ -35,8 +35,8 @@ const R = {
     ...e,
     className: y
   };
-  c && c.avatarProps && (c.avatarProps.shape = "square", c.avatarProps.size = "large");
-  const N = i && i.items, A = (r) => h("div", { className: "kit-header-menu-wrapper", children: [e && t(_, { ...c }), i && !N && t("div", { role: "separator", className: "ant-dropdown-menu-item-divider" }), N ? r : i] }), w = {
+  c && c.avatarProps && (c.avatarProps.shape = "square", c.avatarProps.size = "l");
+  const N = i && i.items, A = (r) => h("div", { className: "kit-header-menu-wrapper", children: [e && t(g, { ...c }), i && !N && t("div", { role: "separator", className: "ant-dropdown-menu-item-divider" }), N ? r : i] }), w = {
     disabled: !i,
     placement: "bottomRight",
     onOpenChange: (r) => {
@@ -52,7 +52,7 @@ const R = {
       ...(d = r.items) !== null && d !== void 0 ? d : []
     ]), w.menu = r;
   }
-  return t(x, { ...w, children: h("div", { className: b, tabIndex: I, ...v, children: [a && t("img", { className: "kit-header-profile-logo", src: a, alt: p }), l && t(P, { className: "kit-header-profile-tag", ...l }), n && t(_, { ...n }), o && t("div", { className: "kit-header-profile-complement", children: o })] }) });
+  return t(x, { ...w, children: h("div", { className: b, tabIndex: I, ...v, children: [a && t("img", { className: "kit-header-profile-logo", src: a, alt: p }), l && t(P, { className: "kit-header-profile-tag", ...l }), n && t(g, { ...n }), o && t("div", { className: "kit-header-profile-complement", children: o })] }) });
 }, B = z, D = j;
 D.Profile = B;
 D.displayName = "KitHeader";

package/dist/assets/Avatar.css

@@ -1 +1 @@
-/*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license */._kit-avatar_1c262_2{background:var(--general-utilities-main-light)}._kit-avatar_1c262_2:not(.ant-avatar-image){background:var(--components-Avatar-colors-background-default, var(--general-utilities-main-light));color:var(--components-Avatar-colors-typography-default, var(--general-utilities-main-medium))}._kit-avatar_1c262_2.kit-avatar-image-fit-cover img{object-fit:cover}._kit-avatar_1c262_2.kit-avatar-image-fit-contain img{object-fit:contain}._kit-avatar_1c262_2.kit-avatar-image-fit-fill img{object-fit:fill}._kit-avatar_1c262_2.ant-avatar-square{border-radius:calc(var(--general-border-radius-s) * 1px)}._kit-avatar-disabled_1c262_22{--mask-color: #8db1c880}._kit-avatar-disabled_1c262_22.ant-avatar-icon,._kit-avatar-disabled_1c262_22.kit-avatar-image-fit-cover,._kit-avatar-disabled_1c262_22{color:var(--general-utilities-disabled);background-color:var(--general-utilities-neutral-medium)}._kit-avatar-disabled_1c262_22.ant-avatar-image:after{content:"";z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background:var(--mask-color)}._kit-avatar-group_1c262_44.override-last>span:last-child{background:var(--components-AvatarGroup-colors-background-default, var(--general-utilities-main-light));color:var(--components-AvatarGroup-colors-typography-default, var(--components-AvatarGroup-colors-background-default, var(--general-utilities-main-medium)))}._kit-avatar-group_1c262_44 .ant-avatar{box-shadow:var(--general-utilities-shadow-light)}._kit-avatar-group-disabled_1c262_52.override-last>span:last-child{color:var(--general-utilities-disabled);background-color:var(--general-utilities-neutral-medium)}
+/*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license */._kit-avatar_22tfj_2{background:var(--general-utilities-main-light)}._kit-avatar_22tfj_2:not(.ant-avatar-image){background:var(--components-Avatar-colors-background-default, var(--general-utilities-main-light));color:var(--components-Avatar-colors-typography-default, var(--general-utilities-main-medium))}._kit-avatar_22tfj_2.kit-avatar-image-fit-cover img{object-fit:cover}._kit-avatar_22tfj_2.kit-avatar-image-fit-contain img{object-fit:contain}._kit-avatar_22tfj_2.kit-avatar-image-fit-fill img{object-fit:fill}._kit-avatar_22tfj_2.ant-avatar-square:not(.kit-avatar-size-xs){border-radius:calc(var(--general-border-radius-s) * 1px)}._kit-avatar-disabled_22tfj_22{--mask-color: #8db1c880}._kit-avatar-disabled_22tfj_22.ant-avatar-icon,._kit-avatar-disabled_22tfj_22.kit-avatar-image-fit-cover,._kit-avatar-disabled_22tfj_22{color:var(--general-utilities-disabled);background-color:var(--general-utilities-neutral-medium)}._kit-avatar-disabled_22tfj_22.ant-avatar-image:after{content:"";z-index:0;position:absolute;top:0;right:0;bottom:0;left:0;background:var(--mask-color)}._kit-avatar-group_22tfj_44.override-last>span:last-child{background:var(--components-AvatarGroup-colors-background-default, var(--general-utilities-main-light));color:var(--components-AvatarGroup-colors-typography-default, var(--components-AvatarGroup-colors-background-default, var(--general-utilities-main-medium)))}._kit-avatar-group_22tfj_44 .ant-avatar{box-shadow:var(--general-utilities-shadow-light)}._kit-avatar-group-disabled_22tfj_52.override-last>span:last-child{color:var(--general-utilities-disabled);background-color:var(--general-utilities-neutral-medium)}

package/dist/assets/index2.css

@@ -1 +1 @@
-/*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license */._kit-id-card_1go5o_2.id-card-grid{display:grid;grid-template-columns:min-content auto;grid-template-areas:"avatar info"}._kit-id-card_1go5o_2.id-card-grid:has(.card-avatar):has(.card-info){column-gap:calc(var(--general-spacing-xs) * 1px)}._kit-id-card_1go5o_2.id-card-grid .card-avatar{grid-area:avatar;align-self:center}._kit-id-card_1go5o_2.id-card-grid .card-info{grid-area:info;gap:2px;display:flex;flex-direction:column;align-self:center;overflow:hidden}._kit-id-card_1go5o_2.id-card-grid .card-info .kit-id-card-title,._kit-id-card_1go5o_2.id-card-grid .card-info .kit-id-card-description,._kit-id-card_1go5o_2.id-card-grid .card-info .kit-id-card-title span,._kit-id-card_1go5o_2.id-card-grid .card-info .kit-id-card-description span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}._kit-id-card_1go5o_2.id-card-grid .card-info .kit-id-card-title-large{font-size:calc(var(--general-typography-fontSize1) * 1px)}
+/*! Sass Fairy v1 | (c) roydukkey | https://sass-fairy.com/license */._kit-id-card_1vabr_2.id-card-grid{display:grid;grid-template-columns:min-content auto;grid-template-areas:"avatar info"}._kit-id-card_1vabr_2.id-card-grid:has(.card-avatar):has(.card-info){column-gap:calc(var(--general-spacing-xs) * 1px)}._kit-id-card_1vabr_2.id-card-grid .card-avatar{grid-area:avatar;align-self:center}._kit-id-card_1vabr_2.id-card-grid .card-info{grid-area:info;gap:2px;display:flex;flex-direction:column;align-self:center;overflow:hidden}._kit-id-card_1vabr_2.id-card-grid .card-info .kit-id-card-title,._kit-id-card_1vabr_2.id-card-grid .card-info .kit-id-card-description,._kit-id-card_1vabr_2.id-card-grid .card-info .kit-id-card-title span,._kit-id-card_1vabr_2.id-card-grid .card-info .kit-id-card-description span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/dist/chunks/Avatar.BvI60jet.js

@@ -0,0 +1,47 @@
+import "../assets/Avatar.css";
+import { jsx as g } from "react/jsx-runtime";
+import { useMemo as _ } from "react";
+import { Avatar as C } from "antd";
+import { u as x } from "./useKitTheme.KSAU-Pdv.js";
+import { getInitials as y, isValidColor as b, getColor as h, isPrimaryColor as j, isSecondaryColor as A, isTertiaryColor as K, getLighterColor as S, getContrastColor as T } from "../utils/functions/index.js";
+import { kitAvatarCssTokens as n } from "../theme/aristid/components/DataDisplay/Avatar/index.js";
+import z from "classnames";
+const m = {
+  "kit-avatar": "_kit-avatar_22tfj_2",
+  "kit-avatar-disabled": "_kit-avatar-disabled_22tfj_22",
+  "kit-avatar-group": "_kit-avatar-group_22tfj_44",
+  "kit-avatar-group-disabled": "_kit-avatar-group-disabled_22tfj_52"
+}, N = (t, a) => !t || !b(t) ? null : {
+  [n.colors.background.default]: h(t, a),
+  [n.colors.typography.default]: j(t) || A(t) || K(t) ? S(t, a) : T(t)
+}, w = (t) => {
+  switch (t) {
+    case "xl":
+      return 48;
+    case "l":
+      return 40;
+    case "m":
+    case void 0:
+      return 32;
+    case "s":
+      return 24;
+    case "xs":
+      return 16;
+    default:
+      return t;
+  }
+}, L = ({ label: t, initialsMaxChars: a, color: i, className: l, style: s, secondaryColorInvert: e = !1, children: u, disabled: v, imageFit: r = "cover", size: o, ...f }) => {
+  const { appId: c } = x(), d = w(o), p = _(() => ({ ...s, ...N(i, e) }), [i, e, s]), k = z(c, m["kit-avatar"], l, {
+    "kit-avatar-size-xs": o === "xs",
+    "kit-avatar-image-fit-cover": r === "cover",
+    "kit-avatar-image-fit-contain": r === "contain",
+    "kit-avatar-image-fit-fill": r === "fill",
+    [m["kit-avatar-disabled"]]: v
+  });
+  return g(C, { style: p, className: k, ...f, size: d, children: t !== void 0 ? y(t, a) : u });
+};
+L.displayName = "KitAvatar";
+export {
+  L as K,
+  m as s
+};