@ubloimmo/uikit 0.27.1 → 0.29.0

package/dist/_virtual/jsx-runtime.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/_virtual/react-jsx-runtime.development.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/_virtual/react-jsx-runtime.production.min.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Action/Action.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -21,6 +21,7 @@ import "../../layouts/Popover/Popover.layout.js";
 import { isEmptyString as L } from "../../utils/string.utils.js";
 import { useLogger as M } from "../../utils/log.utils.js";
 import { useMergedProps as S, useStyleProps as k, useTestId as w } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 const A = {
   default: "s",
   large: "m"

package/dist/components/Action/Action.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -10,6 +10,7 @@ import { css as t } from "styled-components";
 import "@ubloimmo/front-util";
 import { cssVarUsage as s } from "../../utils/css.utils.js";
 import "react";
+import "../../utils/translation/translation.provider.js";
 const n = {
   default: "s-2",
   large: "s-6"
@@ -19,7 +20,7 @@ const n = {
 }, c = {
   default: "s-1",
   large: "s-3"
-}, w = ({
+}, g = ({
   $size: a,
   $disabled: e
 }) => {
@@ -84,5 +85,5 @@ const n = {
   `;
 };
 export {
-  w as actionContainerStyles
+  g as actionContainerStyles
 };

package/dist/components/ActionIcon/ActionIcon.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -7,13 +7,14 @@
 
 
 import { j as s } from "../../node_modules/react/jsx-runtime.js";
-import { isFunction as b } from "@ubloimmo/front-util";
-import { useMemo as p, useCallback as g } from "react";
+import { isFunction as p } from "@ubloimmo/front-util";
+import { useMemo as b, useCallback as g } from "react";
 import C from "styled-components";
 import { actionIconContainerStyles as I } from "./ActionIcon.styles.js";
 import { Icon as y } from "../Icon/Icon.component.js";
 import { useLogger as P } from "../../utils/log.utils.js";
 import { useMergedProps as k, useStyleProps as x, useTestId as A, useClassName as j } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 const i = {
   icon: "Square",
   size: "m",
@@ -32,7 +33,7 @@ const i = {
   ), t.title || n(
     `Missing required title, defaulting to ${i.title}`
   );
-  const a = p(() => {
+  const a = b(() => {
     const e = o.size === "s", u = o.disabled ? "gray-600" : e ? `${o.color}-base` : "gray-800", f = e ? "s-3" : "s-5";
     return {
       name: o.icon,
@@ -40,7 +41,7 @@ const i = {
       color: u
     };
   }, [o]), d = g(() => {
-    o.disabled || b(o.onClick) && o.onClick();
+    o.disabled || p(o.onClick) && o.onClick();
   }, [o]), m = j(o);
   return /* @__PURE__ */ s.jsx(
     S,

package/dist/components/ActionIcon/ActionIcon.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -10,7 +10,8 @@ import { css as b } from "styled-components";
 import "@ubloimmo/front-util";
 import { cssVarUsage as o } from "../../utils/css.utils.js";
 import "react";
-const p = ({
+import "../../utils/translation/translation.provider.js";
+const w = ({
   $color: s,
   $size: e
 }) => {
@@ -51,5 +52,5 @@ const p = ({
   `;
 };
 export {
-  p as actionIconContainerStyles
+  w as actionIconContainerStyles
 };

package/dist/components/Avatar/Avatar.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -16,6 +16,7 @@ import { Text as g } from "../Text/Text.component.js";
 import "@ubloimmo/front-util";
 import { useLogger as P } from "../../utils/log.utils.js";
 import { useMergedProps as C, useStyleProps as U, useTestId as j } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 const m = {
   size: "m",
   firstName: "",

package/dist/components/Avatar/Avatar.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -12,11 +12,12 @@ import "@ubloimmo/front-util";
 import { cssPxToCssRem as m, cssVarUsage as i } from "../../utils/css.utils.js";
 import "react";
 import { fromStyleProps as c } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 const p = {
   m: "28px",
   xl: "120px"
-}, $ = (e) => {
-  const r = c(e), o = p[r.size], t = m(o), a = n(r);
+}, u = (o) => {
+  const r = c(o), e = p[r.size], t = m(e), a = n(r);
   return s`
     border-radius: 50%;
     overflow: hidden;
@@ -40,5 +41,5 @@ const p = {
   `;
 };
 export {
-  $ as avatarStyles
+  u as avatarStyles
 };

package/dist/components/Avatar/Avatar.utils.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -10,10 +10,11 @@ import { isNumber as a } from "@ubloimmo/front-util";
 import { isPositive as o } from "../../utils/number.utils.js";
 import { isNonEmptyString as i } from "../../utils/string.utils.js";
 import "react";
-const s = (t) => "name" in t && i(t.name), u = (t) => "firstName" in t && i(t.firstName) && "lastName" in t && i(t.lastName), C = (t, n) => "count" in t && a(t.count) ? o(t.count) ? !0 : (n && n("Count should be a positive number"), !1) : !1, m = (t) => (s(t) || u(t)) && "avatarUrl" in t && i(t == null ? void 0 : t.avatarUrl);
+import "../../utils/translation/translation.provider.js";
+const s = (t) => "name" in t && i(t.name), u = (t) => "firstName" in t && i(t.firstName) && "lastName" in t && i(t.lastName), C = (t, n) => "count" in t && a(t.count) ? o(t.count) ? !0 : (n && n("Count should be a positive number"), !1) : !1, A = (t) => (s(t) || u(t)) && "avatarUrl" in t && i(t == null ? void 0 : t.avatarUrl);
 export {
   C as isAvatarPropsCount,
   u as isAvatarPropsFirstLastName,
   s as isAvatarPropsFullName,
-  m as isAvatarPropsWithUrl
+  A as isAvatarPropsWithUrl
 };

package/dist/components/Badge/Badge.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -13,20 +13,21 @@ import { badgeStyle as C, grayBadgeShadeStyleMap as b, badgeShadeStyleMap as B }
 import { Icon as P } from "../Icon/Icon.component.js";
 import { Text as j } from "../Text/Text.component.js";
 import "@ubloimmo/front-util";
-import { isEmptyString as a } from "../../utils/string.utils.js";
+import { isEmptyString as n } from "../../utils/string.utils.js";
 import { useLogger as $ } from "../../utils/log.utils.js";
 import { useMergedProps as M, useStyleProps as I, useTestId as v } from "../../utils/props.utils.js";
-const i = {
+import "../../utils/translation/translation.provider.js";
+const a = {
   label: null,
   icon: null,
   color: "primary",
   shade: "light"
 }, w = (l) => {
-  const { warn: d } = $("Badge"), n = M(i, l), m = I(n), c = v("badge", l), { color: e, shade: t, label: o, icon: r } = n, { iconColorStyle: p, textColorStyle: g } = x(() => {
-    const { iconColor: u, textColor: y } = e === "gray" ? b[t] : B[t], S = `${e}-${u}`, f = `${e}-${y}`;
+  const { warn: d } = $("Badge"), i = M(a, l), m = I(i), c = v("badge", l), { color: t, shade: e, label: o, icon: r } = i, { iconColorStyle: p, textColorStyle: g } = x(() => {
+    const { iconColor: u, textColor: y } = t === "gray" ? b[e] : B[e], S = `${t}-${u}`, f = `${t}-${y}`;
     return { iconColorStyle: S, textColorStyle: f };
-  }, [e, t]);
-  return (!o || a(o)) && !r ? (d("Both label and icon are missing, please provide at least one"), null) : /* @__PURE__ */ s.jsxs(z, { "data-testid": c, ...m, role: "status", children: [
+  }, [t, e]);
+  return (!o || n(o)) && !r ? (d("Both label and icon are missing, please provide at least one"), null) : /* @__PURE__ */ s.jsxs(z, { "data-testid": c, ...m, role: "status", children: [
     r && /* @__PURE__ */ s.jsx(
       P,
       {
@@ -36,10 +37,10 @@ const i = {
         size: "s-3"
       }
     ),
-    o && !a(o) && /* @__PURE__ */ s.jsx(j, { size: "s", color: g, weight: "medium", children: o })
+    o && !n(o) && /* @__PURE__ */ s.jsx(j, { size: "s", color: g, weight: "medium", children: o })
   ] });
 };
-w.defaultProps = i;
+w.defaultProps = a;
 const z = h.div`
   ${C}
 `;

package/dist/components/Badge/Badge.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -11,6 +11,7 @@ import { isGrayColor as e } from "../../utils/color.utils.js";
 import "@ubloimmo/front-util";
 import "react";
 import { fromStyleProps as s } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 const c = {
   light: {
     textColor: "dark",
@@ -22,7 +23,7 @@ const c = {
     backgroundColor: "dark",
     iconColor: "medium"
   }
-}, g = {
+}, m = {
   light: {
     textColor: "800",
     backgroundColor: "50",
@@ -33,14 +34,14 @@ const c = {
     backgroundColor: "700",
     iconColor: "100"
   }
-}, x = (a) => {
-  const { color: o, shade: r } = s(a), { backgroundColor: l } = e(o) ? g[r] : c[r], d = e(o) ? "300" : "medium", n = `${o}-${d}`, i = `${o}-${l}`;
+}, k = (a) => {
+  const { color: o, shade: r } = s(a), { backgroundColor: l } = e(o) ? m[r] : c[r], d = e(o) ? "300" : "medium", n = `${o}-${d}`, i = `${o}-${l}`;
   return t`
     border: 1px solid var(--${n});
     background-color: var(--${i});
-    ${m}
+    ${g}
   `;
-}, m = () => t`
+}, g = () => t`
     padding: 0 var(--s-2);
     border-radius: var(--s-3);
     gap: var(--s-1);
@@ -62,7 +63,7 @@ const c = {
   `;
 export {
   c as badgeShadeStyleMap,
-  x as badgeStyle,
-  m as commonBadgeStyles,
-  g as grayBadgeShadeStyleMap
+  k as badgeStyle,
+  g as commonBadgeStyles,
+  m as grayBadgeShadeStyleMap
 };

package/dist/components/Button/Button.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -16,6 +16,7 @@ import { Loading as z } from "../Loading/Loading.component.js";
 import { Text as H } from "../Text/Text.component.js";
 import { useLogger as I } from "../../utils/log.utils.js";
 import { useMergedProps as O, useStyleProps as T, useTestId as W, useClassName as w } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 const g = {
   type: "button",
   color: "primary",

package/dist/components/Button/Button.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -13,6 +13,7 @@ import { isValidRgbaStr as l } from "../../utils/color.utils.js";
 import { cssVarUsage as s } from "../../utils/css.utils.js";
 import "react";
 import { fromStyleProps as h } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 import { cssDimensions as p } from "../../utils/styles.utils.js";
 const f = {
   primary: {
@@ -298,7 +299,7 @@ const f = {
         }
       }
     }
-  `, P = (t) => {
+  `, X = (t) => {
   const r = h(t);
   return a`
     ${x(r)}
@@ -306,7 +307,7 @@ const f = {
     ${S(r)}
     ${B(r)}
   `;
-}, X = ({
+}, F = ({
   $loading: t
 }) => a`
     position: absolute;
@@ -319,6 +320,6 @@ const f = {
     justify-content: center;
   `;
 export {
-  X as buildButtonLoadingContainerStyles,
-  P as buildButtonStyles
+  F as buildButtonLoadingContainerStyles,
+  X as buildButtonStyles
 };

package/dist/components/Calendar/Calendar.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -20,6 +20,7 @@ import { CalendarNav as L } from "./components/CalendarNav.component.js";
 import { clamp as V } from "../../utils/number.utils.js";
 import { useLogger as $ } from "../../utils/log.utils.js";
 import { useMergedProps as S, useTestId as z, useHtmlAttribute as B } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 import { compareAsc as G } from "../../node_modules/date-fns/compareAsc.js";
 import { fr as J } from "../../node_modules/date-fns/locale/fr.js";
 const O = {

package/dist/components/Calendar/Calendar.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -14,6 +14,7 @@ import { getDefaultClassNames as g } from "../../node_modules/react-day-picker/d
 import "../../node_modules/react-day-picker/dist/esm/useDayPicker.js";
 import { css as o } from "styled-components";
 import { breakpointsPx as b } from "../../sizes/breakpoints.js";
+import "../../utils/translation/translation.provider.js";
 const v = g(), {
   today: n,
   day_button: a,
@@ -523,7 +524,7 @@ const v = g(), {
       max-width: 100%;
     }
   }
-`, E = o`
+`, H = o`
   background: white;
   padding: var(--s-2) var(--s-1);
   box-shadow: var(--shadow-card-elevation-low);
@@ -541,5 +542,5 @@ const v = g(), {
   ${U}
 `;
 export {
-  E as calendarWrapperStyles
+  H as calendarWrapperStyles
 };

package/dist/components/Calendar/Calendar.utils.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Calendar/components/CalendarFooter.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Calendar/components/CalendarNav.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Callout/Callout.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -16,14 +16,15 @@ import { Icon as P } from "../Icon/Icon.component.js";
 import { Text as y } from "../Text/Text.component.js";
 import { useLogger as I } from "../../utils/log.utils.js";
 import { useMergedProps as v, useTestId as w, useStyleProps as M } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 const i = {
   children: "[label]",
   color: "primary",
   icon: "auto",
   title: null
 }, N = (l) => {
-  const { warn: c } = I("Callout"), m = v(i, l), { icon: o, children: u, color: r, title: s } = m, a = w("callout", l), d = n(() => f(o) ? null : o === "auto" ? g[r] : o, [o, r]), e = n(() => C(r), [r]), p = M(e);
-  return l.children || c(
+  const { warn: m } = I("Callout"), c = v(i, l), { icon: o, children: u, color: r, title: s } = c, a = w("callout", l), d = n(() => f(o) ? null : o === "auto" ? g[r] : o, [o, r]), e = n(() => C(r), [r]), p = M(e);
+  return l.children || m(
     `Missing required children, defaulting to ${i.children}`
   ), /* @__PURE__ */ t.jsxs(z, { ...p, "data-testid": a, children: [
     o && /* @__PURE__ */ t.jsx(

package/dist/components/Callout/Callout.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Checkbox/Checkbox.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -13,6 +13,7 @@ import { buildCheckboxContainerStyles as k, buildActiveIconContainerStyles as g
 import { Icon as i } from "../Icon/Icon.component.js";
 import "@ubloimmo/front-util";
 import { useMergedProps as y, useStyleProps as j, useTestId as P } from "../../utils/props.utils.js";
+import "../../utils/translation/translation.provider.js";
 const m = {
   active: !1,
   disabled: !1,

package/dist/components/Checkbox/Checkbox.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo

package/dist/components/Chip/Chip.component.d.ts

@@ -4,7 +4,7 @@ import { TestIdProps } from '../../types';
 /**
  * An interactive `Badge` with a remove button, can be used as a filter tag.
  *
- * @version 0.0.4
+ * @version 0.0.5
  * @param {ChipProps} props - the props for the Chip component
  * @returns {JSX.Element} - the Chip component
  */

package/dist/components/Chip/Chip.component.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -7,63 +7,65 @@
 
 
 import { j as t } from "../../node_modules/react/jsx-runtime.js";
-import { isNull as x } from "@ubloimmo/front-util";
-import { useCallback as y, useMemo as g } from "react";
-import p from "styled-components";
-import { buildChipContainerStyles as S, buildChipButtonStyles as j } from "./Chip.styles.js";
-import { Icon as d } from "../Icon/Icon.component.js";
-import { Text as P } from "../Text/Text.component.js";
-import { FlexRowLayout as B } from "../../layouts/Flex/Flex.layout.js";
+import { isNull as S } from "@ubloimmo/front-util";
+import { useMemo as f, useCallback as j } from "react";
+import h from "styled-components";
+import { buildChipContainerStyles as P, buildChipButtonStyles as D } from "./Chip.styles.js";
+import { Icon as C } from "../Icon/Icon.component.js";
+import { Text as T } from "../Text/Text.component.js";
+import { FlexRowLayout as $ } from "../../layouts/Flex/Flex.layout.js";
 import "../../layouts/Grid/Grid.layout.js";
 import "../../layouts/GridItem/GridItem.layout.js";
 import "../../layouts/Popover/Popover.layout.js";
-import { isEmptyString as T } from "../../utils/string.utils.js";
-import { useLogger as $ } from "../../utils/log.utils.js";
-import { useMergedProps as D, useStyleProps as M, useTestId as w } from "../../utils/props.utils.js";
-const l = {
+import { isEmptyString as k } from "../../utils/string.utils.js";
+import { useLogger as w } from "../../utils/log.utils.js";
+import { useMergedProps as B, useStyleProps as M, useTestId as z } from "../../utils/props.utils.js";
+import { useUikitTranslation as I } from "../../utils/translation/translation.provider.js";
+const n = {
   label: "[Chip]",
   icon: null,
   color: "primary",
   iconPlacement: "left",
   onDelete: null,
   deleteButtonTitle: null
-}, k = (e) => {
-  const o = D(l, e), n = M(o), f = w("chip", e), { label: C, icon: s, color: i, deleteButtonTitle: u } = o, { warn: c } = $("Chip"), m = y(
-    (r) => {
-      x(o.onDelete) || (r.stopPropagation(), o.onDelete());
+}, L = (e) => {
+  const o = B(n, e), s = M(o), b = z("chip", e), { label: l, icon: c, color: r, deleteButtonTitle: m } = o, { warn: x } = w("Chip"), a = I(), p = f(
+    () => m ?? a.action.delete(l),
+    [m, l, a]
+  ), u = j(
+    (i) => {
+      S(o.onDelete) || (i.stopPropagation(), o.onDelete());
     },
     [o]
-  ), { iconColorStyle: a, textColorStyle: h } = g(() => {
-    const r = `${i}-base`, b = `${i}-dark`;
-    return { iconColorStyle: r, textColorStyle: b };
-  }, [i]);
-  return (!e.label || T(e.label)) && c(`Missing required label, defaulting to ${l.label}`), e.deleteButtonTitle || c(
-    `Missing required title for delete button, defaulting to ${l.deleteButtonTitle}`
-  ), /* @__PURE__ */ t.jsxs(B, { align: "center", testId: f, role: "status", children: [
-    /* @__PURE__ */ t.jsxs(v, { ...n, children: [
-      s && /* @__PURE__ */ t.jsx(d, { name: s, size: "s-3", color: a }),
-      /* @__PURE__ */ t.jsx(P, { size: "s", weight: "medium", color: h, ellipsis: !0, children: C })
+  ), { iconColorStyle: d, textColorStyle: y } = f(() => {
+    const i = `${r}-base`, g = `${r}-dark`;
+    return { iconColorStyle: i, textColorStyle: g };
+  }, [r]);
+  return (!e.label || k(e.label)) && x(`Missing required label, defaulting to ${n.label}`), /* @__PURE__ */ t.jsxs($, { align: "center", testId: b, role: "status", children: [
+    /* @__PURE__ */ t.jsxs(E, { ...s, children: [
+      c && /* @__PURE__ */ t.jsx(C, { name: c, size: "s-3", color: d }),
+      /* @__PURE__ */ t.jsx(T, { size: "s", weight: "medium", color: y, ellipsis: !0, children: l })
     ] }),
     /* @__PURE__ */ t.jsx(
-      z,
+      R,
       {
-        ...n,
-        onClick: m,
-        onMouseDown: m,
+        ...s,
+        onClick: u,
+        onMouseDown: u,
         "data-testid": "chip-button",
-        title: u ?? void 0,
-        "aria-label": u ?? void 0,
-        children: /* @__PURE__ */ t.jsx(d, { name: "X", size: "s-4", color: a })
+        title: p,
+        "aria-label": p,
+        children: /* @__PURE__ */ t.jsx(C, { name: "X", size: "s-4", color: d })
       }
     )
   ] });
 };
-k.defaultProps = l;
-const v = p.div`
-  ${S}
-`, z = p.button`
-  ${j}
+L.defaultProps = n;
+const E = h.div`
+  ${P}
+`, R = h.button`
+  ${D}
 `;
 export {
-  k as Chip
+  L as Chip
 };

package/dist/components/Chip/Chip.styles.js

@@ -1,5 +1,5 @@
 /**
-* @ubloimmo/uikit version 0.27.1
+* @ubloimmo/uikit version 0.29.0
 *
 * Copyright © Ublo 2024
 * https://ublo.immo
@@ -12,7 +12,8 @@ import { isGrayColor as o } from "../../utils/color.utils.js";
 import "@ubloimmo/front-util";
 import "react";
 import { fromStyleProps as l } from "../../utils/props.utils.js";
-const b = (r) => {
+import "../../utils/translation/translation.provider.js";
+const f = (r) => {
   const { iconPlacement: a, color: t } = l(r), n = o(t) ? "300" : "medium", e = `${t}-${n}`, s = o(t) ? "50" : "light", d = `${t}-${s}`;
   return i`
     ${m}
@@ -21,7 +22,7 @@ const b = (r) => {
     background-color: var(--${d});
     border-radius: var(--s-1) 0 0 var(--s-1);
   `;
-}, f = ({
+}, $ = ({
   $color: r
 }) => i`
   display: flex;
@@ -53,6 +54,6 @@ const b = (r) => {
   }
 `;
 export {
-  f as buildChipButtonStyles,
-  b as buildChipContainerStyles
+  $ as buildChipButtonStyles,
+  f as buildChipContainerStyles
 };