@payfit/unity-components 2.46.9 → 2.46.11

package/dist/esm/components/breadcrumbs/parts/RawBreadcrumbLink.js

@@ -1,8 +1,8 @@
 import { jsx as a } from "react/jsx-runtime";
 import { forwardRef as w, useState as R, useRef as E, useCallback as d, useLayoutEffect as L, useEffect as i } from "react";
 import { RawLink as b } from "../../link/RawLink.js";
-import { Tooltip as y } from "../../tooltip/Tooltip.js";
-const T = 180, k = w(
+import { Tooltip as T } from "../../tooltip/Tooltip.js";
+const k = 180, y = w(
   ({ children: r, href: l, ...m }, n) => {
     const o = typeof r == "string" ? r : "", [p, c] = R(!1), s = E(null), t = d(() => {
       const e = s.current;
@@ -45,18 +45,18 @@ const T = 180, k = w(
       {
         isExact: !0,
         href: l,
-        color: "secondary",
-        maxWidthTruncation: T,
+        color: "inherit",
+        maxWidthTruncation: k,
         ref: v,
         ...m,
         children: r
       }
     );
-    return p && o ? /* @__PURE__ */ a(y, { title: o, children: u }) : u;
+    return p && o ? /* @__PURE__ */ a(T, { title: o, children: u }) : u;
   }
 );
-k.displayName = "BreadcrumbLink";
+y.displayName = "BreadcrumbLink";
 export {
-  T as BREADCRUMB_ITEM_MAX_WIDTH,
-  k as RawBreadcrumbLink
+  k as BREADCRUMB_ITEM_MAX_WIDTH,
+  y as RawBreadcrumbLink
 };

package/dist/esm/components/button/Button.variants.js

@@ -35,7 +35,7 @@ const t = e({
         "uy:theme-legacy:bg-surface-primary-enabled uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:text-content-inverted-enabled",
         'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-highest-hover uy:data-[hovered="true"]:text-content-inverted-hover',
         "uy:theme-legacy:active:bg-surface-primary-active uy:theme-rebrand:active:bg-surface-neutral-highest-active uy:active:text-content-inverted-hover",
-        "uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:data-[pressed]:text-content-inverted-pressed"
+        "uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:theme-legacy:data-[pressed]:text-content-inverted-pressed uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed"
       ],
       warning: [
         "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
@@ -111,11 +111,11 @@ const t = e({
   variants: {
     color: {
       primary: [
-        "uy:bg-transparent uy:text-content-primary-enabled",
-        'uy:data-[hovered="true"]:bg-surface-primary-lowest-hover uy:data-[hovered="true"]:text-content-primary-hover',
-        "uy:active:bg-surface-primary-lowest-active uy:active:text-content-primary-active",
-        "uy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:data-[pressed=true]:text-content-primary-pressed",
-        "uy:data-[focus-visible]:bg-transparent"
+        "uy:bg-transparent uy:theme-legacy:text-content-primary-enabled uy:theme-rebrand:text-content-neutral-enabled",
+        'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-lowest-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-hover uy:theme-legacy:data-[hovered="true"]:text-content-primary-hover uy:theme-rebrand:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:theme-legacy:active:bg-surface-primary-lowest-active uy:theme-rebrand:active:bg-surface-neutral-active uy:theme-legacy:active:text-content-primary-active uy:theme-rebrand:active:text-content-neutral-active",
+        "uy:theme-legacy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:theme-rebrand:data-[pressed=true]:bg-surface-neutral-pressed uy:theme-legacy:data-[pressed=true]:text-content-primary-pressed uy:theme-rebrand:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent uy:theme-rebrand:data-[focus-visible]:text-content-neutral-focus"
       ],
       warning: [
         "uy:bg-transparent uy:text-content-warning-enabled",

package/dist/esm/components/checkbox/Checkbox.js

@@ -6,7 +6,7 @@ import { Text as N } from "../text/Text.js";
 import { checkbox as V } from "./Checkbox.variants.js";
 import { CheckboxIndicator as F } from "./parts/CheckboxIndicator.js";
 const L = R(
-  ({ children: u, helperText: i, feedbackText: l, ...o }, v) => {
+  ({ children: v, helperText: i, feedbackText: l, ...o }, u) => {
     const a = E(), {
       isDisabled: t,
       isReadOnly: d,
@@ -27,18 +27,18 @@ const L = R(
       isDisabled: t,
       isReadOnly: d,
       isInvalid: s
-    }), y = [o["aria-labelledby"], `${a}-label`].filter(Boolean), p = [
+    }), p = [o["aria-labelledby"], `${a}-label`].filter(Boolean), y = [
       o["aria-describedby"],
       typeof i == "string" ? `${a}-helper-text` : void 0,
       typeof l == "string" ? `${a}-feedback-text` : void 0
-    ].filter(Boolean), I = y.length > 0 ? y.join(" ") : void 0, S = p.length > 0 ? p.join(" ") : void 0;
+    ].filter(Boolean), I = p.length > 0 ? p.join(" ") : void 0, S = y.length > 0 ? y.join(" ") : void 0;
     return /* @__PURE__ */ r("div", { className: g(), children: [
       /* @__PURE__ */ e(
         D,
         {
           ...x,
           isInvalid: s,
-          ref: v,
+          ref: u,
           className: $(),
           "aria-labelledby": I,
           "aria-describedby": S,
@@ -49,7 +49,7 @@ const L = R(
               F,
               {
                 ...j,
-                className: "uy:mt-50 uy:sm:mt-25 uy:ml-0"
+                className: "uy:mt-25 uy:ml-0"
               }
             ),
             /* @__PURE__ */ e(
@@ -58,7 +58,7 @@ const L = R(
                 id: `${a}-label`,
                 className: k(),
                 "data-dd-privacy": "allow",
-                children: u
+                children: v
               }
             ),
             c === "required" && n && /* @__PURE__ */ r("span", { className: C(), children: [

package/dist/esm/components/checkbox/Checkbox.variants.js

@@ -12,12 +12,12 @@ const r = e({
     ],
     wrapper: [
       "uy:group uy:sm:rounded-25 uy:leading-none uy:sm:leading-[1lh]",
-      "uy:inline-flex uy:items-start",
+      "uy:inline-flex uy:items-center",
       "uy:typography-body uy:text-content-form-enabled",
       "uy:data-[disabled=true]:text-content-form-disabled uy:data-[disabled]:cursor-not-allowed",
       "uy:data-[readonly=true]:cursor-not-allowed uy:theme-rebrand:data-[readonly=true]:text-content-form-read-only"
     ],
-    label: "uy:ml-75",
+    label: "uy:ml-75 uy:leading-[1]",
     asterisk: "uy:text-content-danger uy:ml-25",
     optionalTag: "uy:typography-body uy:leading-1 uy:ml-25",
     descriptionsContainer: "uy:ml-300 uy:leading-1 uy:inline-flex uy:flex-col",

package/dist/esm/components/checkbox/parts/CheckboxIndicator.js

@@ -1,6 +1,6 @@
 import { jsx as e } from "react/jsx-runtime";
 import { uyTv as u } from "@payfit/unity-themes";
-const n = u({
+const b = u({
   slots: {
     base: [
       "uy:flex uy:items-center uy:justify-center uy:rounded-50 uy:m-25 uy:w-200 uy:h-200 uy:text-content-inverted uy:border uy:border-solid uy:transition-all uy:duration-100"
@@ -36,7 +36,7 @@ const n = u({
       isInvalid: !1,
       isReadOnly: !1,
       className: {
-        base: "uy:border-border-form-enabled uy:group-data-[focus-visible=true]:border-border-form-focus uy:bg-surface-form-enabled"
+        base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:group-data-[hovered=true]:border-border-form-hover uy:group-hover:border-border-form-hover uy:focus-visible:border-border-form-focus uy:group-data-[focus-visible=true]:border-border-form-focus uy:bg-surface-form-enabled"
       }
     },
     {
@@ -112,17 +112,17 @@ function c({
   isSelected: r,
   isDisabled: s,
   isIndeterminate: a,
-  isInvalid: t,
-  isReadOnly: d,
-  className: o
+  isInvalid: o,
+  isReadOnly: t,
+  className: d
 }) {
-  const { base: l, checkmark: i } = n({
+  const { base: l, checkmark: i } = b({
     isSelected: r || a,
     isDisabled: s,
-    isInvalid: t,
-    isReadOnly: d
+    isInvalid: o,
+    isReadOnly: t
   });
-  return /* @__PURE__ */ e("div", { className: l({ className: o }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: l({ className: d }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
     "svg",
     {
       fill: "none",

package/dist/esm/components/date-calendar/DateCalendar.js

@@ -1,16 +1,16 @@
-import { jsx as a, jsxs as d } from "react/jsx-runtime";
-import { useState as u } from "react";
-import { today as O, getLocalTimeZone as h, isToday as T } from "@internationalized/date";
-import { uyTv as j } from "@payfit/unity-themes";
-import { Calendar as k, Heading as F, CalendarGrid as R, CalendarGridHeader as P, CalendarHeaderCell as W, CalendarGridBody as Z, CalendarCell as $ } from "react-aria-components/Calendar";
-import { useIntl as q } from "react-intl";
-import { IconButton as g } from "../icon-button/IconButton.js";
-import { calendarBase as w } from "./DateCalendar.variants.js";
-import { useMonthsList as z } from "./hooks/useMonthsList.js";
-import { useYearsList as A } from "./hooks/useYearsList.js";
-import { DateSegmentSelect as f } from "./parts/DateSegmentSelect.js";
-const E = j({
-  extend: w,
+import { jsx as a, jsxs as s } from "react/jsx-runtime";
+import { useState as b } from "react";
+import { today as k, getLocalTimeZone as f, isToday as F } from "@internationalized/date";
+import { useUnityTheme as R, uyTv as P } from "@payfit/unity-themes";
+import { Calendar as U, Heading as W, CalendarGrid as Z, CalendarGridHeader as $, CalendarHeaderCell as q, CalendarGridBody as w, CalendarCell as z } from "react-aria-components/Calendar";
+import { useIntl as A } from "react-intl";
+import { IconButton as C } from "../icon-button/IconButton.js";
+import { calendarBase as E } from "./DateCalendar.variants.js";
+import { useMonthsList as J } from "./hooks/useMonthsList.js";
+import { useYearsList as K } from "./hooks/useYearsList.js";
+import { DateSegmentSelect as v } from "./parts/DateSegmentSelect.js";
+const Q = P({
+  extend: E,
   slots: {
     calendarGrid: "uy:border-spacing-25",
     calendarCell: [
@@ -33,121 +33,121 @@ const E = j({
     }
   }
 });
-function J({
+function X({
   value: c,
-  defaultValue: n,
+  defaultValue: d,
   minValue: r,
-  maxValue: s,
-  onChange: b,
-  onFocusChange: C,
+  maxValue: n,
+  onChange: p,
+  onFocusChange: D,
   ...t
 }) {
-  const m = q(), v = O(h()), p = z(), D = A({
+  const m = A(), { theme: y } = R(), N = k(f()), x = J(), G = K({
     startYear: r?.year,
-    endYear: s?.year
-  }), [N, x] = u(c ?? n ?? null), [i, o] = u(() => {
-    const e = c ?? n ?? v;
-    return r && e.compare(r) < 0 ? r : s && e.compare(s) > 0 ? s : e;
-  }), G = (e) => {
-    o(
+    endYear: n?.year
+  }), [H, L] = b(c ?? d ?? null), [o, i] = b(() => {
+    const e = c ?? d ?? N;
+    return r && e.compare(r) < 0 ? r : n && e.compare(n) > 0 ? n : e;
+  }), M = (e) => {
+    i(
       (l) => l.set({ month: parseInt(e, 10) })
     );
-  }, H = (e) => {
-    o(
+  }, S = (e) => {
+    i(
       (l) => l.set({ year: parseInt(e, 10) })
     );
   }, {
-    base: L,
-    calendarWrapper: M,
-    dialogHeader: S,
-    dialogHeaderGroup: y,
-    calendarGrid: I,
-    calendarHeaderCell: Y,
-    calendarCell: B
-  } = E({
+    base: B,
+    calendarWrapper: I,
+    dialogHeader: T,
+    dialogHeaderGroup: u,
+    calendarGrid: Y,
+    calendarHeaderCell: O,
+    calendarCell: j
+  } = Q({
     isDisabled: t.isDisabled,
     isInteractive: !t.isDisabled && !t.isReadOnly
-  });
-  return /* @__PURE__ */ a("div", { className: L(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-    k,
+  }), h = y === "rebrand" ? "outlined" : "ghost", g = y === "rebrand" ? "primary" : "neutral";
+  return /* @__PURE__ */ a("div", { className: B(), "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+    U,
     {
       ...t,
       minValue: r,
-      maxValue: s,
-      value: N,
-      defaultValue: n,
+      maxValue: n,
+      value: H,
+      defaultValue: d,
       onChange: (e) => {
-        x(e), b?.(e);
+        L(e), p?.(e);
       },
-      focusedValue: i,
+      focusedValue: o,
       onFocusChange: (e) => {
-        o(e), C?.(e);
+        i(e), D?.(e);
       },
-      children: /* @__PURE__ */ d("div", { className: M(), children: [
-        /* @__PURE__ */ d("header", { className: S(), children: [
-          /* @__PURE__ */ a(F, { className: "uy:sr-only" }),
-          /* @__PURE__ */ d(
+      children: /* @__PURE__ */ s("div", { className: I(), children: [
+        /* @__PURE__ */ s("header", { className: T(), children: [
+          /* @__PURE__ */ a(W, { className: "uy:sr-only" }),
+          /* @__PURE__ */ s(
             "div",
             {
-              className: y({
+              className: u({
                 className: "uy:pl-100 uy:gap-200"
               }),
               children: [
                 /* @__PURE__ */ a(
-                  f,
+                  v,
                   {
                     type: "month",
-                    items: p,
-                    value: i.month.toString(),
-                    onChange: G,
+                    items: x,
+                    value: o.month.toString(),
+                    onChange: M,
                     isDisabled: t.isDisabled
                   }
                 ),
                 /* @__PURE__ */ a(
-                  f,
+                  v,
                   {
                     type: "year",
-                    items: D,
-                    value: i.year.toString(),
-                    onChange: H,
+                    items: G,
+                    value: o.year.toString(),
+                    onChange: S,
                     isDisabled: t.isDisabled
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ d(
+          /* @__PURE__ */ s(
             "div",
             {
-              className: y({
+              className: u({
                 className: "uy:ml-auto uy:gap-100"
               }),
               children: [
                 /* @__PURE__ */ a(
-                  g,
+                  C,
                   {
                     slot: "previous",
                     icon: "CaretLeftOutlined",
-                    color: "primary",
+                    color: g,
                     label: m.formatMessage({
                       id: "unity:component:common:previous",
                       defaultMessage: "Previous"
                     }),
-                    variant: "secondary",
+                    variant: h,
                     isDisabled: t.isDisabled
                   }
                 ),
                 /* @__PURE__ */ a(
-                  g,
+                  C,
                   {
                     slot: "next",
                     icon: "CaretRightOutlined",
-                    color: "primary",
+                    color: g,
                     label: m.formatMessage({
                       id: "unity:component:common:next",
                       defaultMessage: "Next"
                     }),
-                    variant: "secondary",
+                    variant: h,
                     isDisabled: t.isDisabled
                   }
                 )
@@ -155,14 +155,14 @@ function J({
             }
           )
         ] }),
-        /* @__PURE__ */ d(R, { className: I(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ a(P, { children: (e) => /* @__PURE__ */ a(W, { className: Y(), children: e }) }),
-          /* @__PURE__ */ a(Z, { children: (e) => /* @__PURE__ */ a(
-            $,
+        /* @__PURE__ */ s(Z, { className: Y(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ a($, { children: (e) => /* @__PURE__ */ a(q, { className: O(), children: e }) }),
+          /* @__PURE__ */ a(w, { children: (e) => /* @__PURE__ */ a(
+            z,
             {
               date: e,
-              "data-today": T(e, h()) ? !0 : void 0,
-              className: B()
+              "data-today": F(e, f()) ? !0 : void 0,
+              className: j()
             }
           ) })
         ] })
@@ -170,7 +170,7 @@ function J({
     }
   ) });
 }
-J.displayName = "DateCalendar";
+X.displayName = "DateCalendar";
 export {
-  J as DateCalendar
+  X as DateCalendar
 };

package/dist/esm/components/date-range-calendar/DateRangeCalendar.js

@@ -1,17 +1,17 @@
-import { jsx as t, jsxs as r } from "react/jsx-runtime";
-import { useState as L } from "react";
-import { today as M, getLocalTimeZone as m, isToday as R } from "@internationalized/date";
-import { uyTv as S } from "@payfit/unity-themes";
-import { Heading as Y } from "react-aria-components/Heading";
-import { RangeCalendar as B, CalendarGrid as O, CalendarGridHeader as T, CalendarHeaderCell as j, CalendarGridBody as k, CalendarCell as F } from "react-aria-components/RangeCalendar";
-import { useIntl as P } from "react-intl";
-import { calendarBase as W } from "../date-calendar/DateCalendar.variants.js";
-import { useMonthsList as Z } from "../date-calendar/hooks/useMonthsList.js";
-import { useYearsList as $ } from "../date-calendar/hooks/useYearsList.js";
-import { DateSegmentSelect as h } from "../date-calendar/parts/DateSegmentSelect.js";
-import { IconButton as b } from "../icon-button/IconButton.js";
-const q = S({
-  extend: W,
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import { useState as S } from "react";
+import { today as B, getLocalTimeZone as f, isToday as T } from "@internationalized/date";
+import { useUnityTheme as Y, uyTv as O } from "@payfit/unity-themes";
+import { Heading as j } from "react-aria-components/Heading";
+import { RangeCalendar as k, CalendarGrid as F, CalendarGridHeader as P, CalendarHeaderCell as U, CalendarGridBody as W, CalendarCell as Z } from "react-aria-components/RangeCalendar";
+import { useIntl as $ } from "react-intl";
+import { calendarBase as q } from "../date-calendar/DateCalendar.variants.js";
+import { useMonthsList as z } from "../date-calendar/hooks/useMonthsList.js";
+import { useYearsList as A } from "../date-calendar/hooks/useYearsList.js";
+import { DateSegmentSelect as g } from "../date-calendar/parts/DateSegmentSelect.js";
+import { IconButton as v } from "../icon-button/IconButton.js";
+const E = O({
+  extend: q,
   slots: {
     calendarGrid: [
       //theme:  common
@@ -72,119 +72,119 @@ const q = S({
     }
   }
 });
-function z({
+function J({
   value: c,
   defaultValue: i,
   minValue: n,
-  maxValue: d,
-  onChange: f,
-  onFocusChange: g,
+  maxValue: r,
+  onChange: p,
+  onFocusChange: C,
   ...a
 }) {
-  const u = P(), p = M(m()), v = Z(), C = $({
+  const u = $(), { theme: y } = Y(), _ = B(f()), D = z(), N = A({
     startYear: n?.year,
-    endYear: d?.year
-  }), [s, o] = L(() => {
-    const e = c?.start ?? i?.start ?? p;
-    return n && e.compare(n) < 0 ? n : d && e.compare(d) > 0 ? d : e;
-  }), _ = (e) => {
+    endYear: r?.year
+  }), [s, o] = S(() => {
+    const e = c?.start ?? i?.start ?? _;
+    return n && e.compare(n) < 0 ? n : r && e.compare(r) > 0 ? r : e;
+  }), x = (e) => {
     o(
       (l) => l.set({ month: parseInt(e, 10) })
     );
-  }, D = (e) => {
+  }, w = (e) => {
     o(
       (l) => l.set({ year: parseInt(e, 10) })
     );
   }, {
-    base: N,
-    calendarWrapper: x,
-    dialogHeader: w,
-    dialogHeaderGroup: y,
-    calendarGrid: G,
-    calendarHeaderCell: H,
-    calendarCell: I
-  } = q({
+    base: G,
+    calendarWrapper: H,
+    dialogHeader: I,
+    dialogHeaderGroup: m,
+    calendarGrid: L,
+    calendarHeaderCell: M,
+    calendarCell: R
+  } = E({
     isDisabled: a.isDisabled,
     isInteractive: !a.isDisabled && !a.isReadOnly
-  });
-  return /* @__PURE__ */ t("div", { className: N(), "data-dd-privacy": "mask", children: /* @__PURE__ */ t(
-    B,
+  }), h = y === "rebrand" ? "outlined" : "ghost", b = y === "rebrand" ? "primary" : "neutral";
+  return /* @__PURE__ */ t("div", { className: G(), "data-dd-privacy": "mask", children: /* @__PURE__ */ t(
+    k,
     {
       ...a,
       minValue: n,
-      maxValue: d,
+      maxValue: r,
       value: c,
       defaultValue: i,
-      onChange: f,
+      onChange: p,
       focusedValue: s,
       onFocusChange: (e) => {
-        o(e), g?.(e);
+        o(e), C?.(e);
       },
-      children: /* @__PURE__ */ r("div", { className: x(), children: [
-        /* @__PURE__ */ r("header", { className: w(), children: [
-          /* @__PURE__ */ t(Y, { className: "uy:sr-only" }),
-          /* @__PURE__ */ r(
+      children: /* @__PURE__ */ d("div", { className: H(), children: [
+        /* @__PURE__ */ d("header", { className: I(), children: [
+          /* @__PURE__ */ t(j, { className: "uy:sr-only" }),
+          /* @__PURE__ */ d(
             "div",
             {
-              className: y({
+              className: m({
                 className: "uy:pl-100 uy:gap-200"
               }),
               children: [
                 /* @__PURE__ */ t(
-                  h,
+                  g,
                   {
                     type: "month",
-                    items: v,
+                    items: D,
                     value: s.month.toString(),
-                    onChange: _,
+                    onChange: x,
                     isDisabled: a.isDisabled
                   }
                 ),
                 /* @__PURE__ */ t(
-                  h,
+                  g,
                   {
                     type: "year",
-                    items: C,
+                    items: N,
                     value: s.year.toString(),
-                    onChange: D,
+                    onChange: w,
                     isDisabled: a.isDisabled
                   }
                 )
               ]
             }
           ),
-          /* @__PURE__ */ r(
+          /* @__PURE__ */ d(
             "div",
             {
-              className: y({
+              className: m({
                 className: "uy:ml-auto uy:gap-100"
               }),
               children: [
                 /* @__PURE__ */ t(
-                  b,
+                  v,
                   {
                     slot: "previous",
                     icon: "CaretLeftOutlined",
-                    color: "primary",
+                    color: b,
                     label: u.formatMessage({
                       id: "unity:component:common:previous",
                       defaultMessage: "Previous"
                     }),
-                    variant: "secondary",
+                    variant: h,
                     isDisabled: a.isDisabled
                   }
                 ),
                 /* @__PURE__ */ t(
-                  b,
+                  v,
                   {
                     slot: "next",
                     icon: "CaretRightOutlined",
-                    color: "primary",
+                    color: b,
                     label: u.formatMessage({
                       id: "unity:component:common:next",
                       defaultMessage: "Next"
                     }),
-                    variant: "secondary",
+                    variant: h,
                     isDisabled: a.isDisabled
                   }
                 )
@@ -192,14 +192,14 @@ function z({
             }
           )
         ] }),
-        /* @__PURE__ */ r(O, { className: G(), weekdayStyle: "short", children: [
-          /* @__PURE__ */ t(T, { children: (e) => /* @__PURE__ */ t(j, { className: H(), children: e }) }),
-          /* @__PURE__ */ t(k, { children: (e) => /* @__PURE__ */ t(
-            F,
+        /* @__PURE__ */ d(F, { className: L(), weekdayStyle: "short", children: [
+          /* @__PURE__ */ t(P, { children: (e) => /* @__PURE__ */ t(U, { className: M(), children: e }) }),
+          /* @__PURE__ */ t(W, { children: (e) => /* @__PURE__ */ t(
+            Z,
             {
               date: e,
-              "data-today": R(e, m()) ? !0 : void 0,
-              className: I()
+              "data-today": T(e, f()) ? !0 : void 0,
+              className: R()
             }
           ) })
         ] })
@@ -207,7 +207,7 @@ function z({
     }
   ) });
 }
-z.displayName = "DateRangeCalendar";
+J.displayName = "DateRangeCalendar";
 export {
-  z as DateRangeCalendar
+  J as DateRangeCalendar
 };

package/dist/esm/components/empty-state/parts/EmptyStateContent.js

@@ -1,16 +1,16 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import { Text as n } from "../../text/Text.js";
 const c = m(
-  ({ title: t, description: r, ...o }, a) => !t && !r ? null : /* @__PURE__ */ l(
+  ({ title: t, description: e, ...o }, a) => !t && !e ? null : /* @__PURE__ */ l(
     "div",
     {
       ref: a,
       className: "uy:flex uy:flex-col uy:items-center uy:gap-100 uy:text-center",
       ...o,
       children: [
-        t && /* @__PURE__ */ e(n, { variant: "h4", color: "inherit", children: t }),
-        r && /* @__PURE__ */ e(n, { variant: "body", color: "content.neutral.low", children: r })
+        t && /* @__PURE__ */ r(n, { variant: "h4", color: "content.neutral", children: t }),
+        e && /* @__PURE__ */ r(n, { variant: "body", color: "content.neutral.low", children: e })
       ]
     }
   )

package/dist/esm/components/error-state/ErrorState.js

@@ -70,13 +70,13 @@ const ee = W({
     description: ["uy:hidden uy:@section:block uy:@section:w-full"]
   }
 }), ne = (t, n) => {
-  const i = t.detailDescription ?? n?.detailDescription;
+  const a = t.detailDescription ?? n?.detailDescription;
   return /* @__PURE__ */ u($, { children: [
-    /* @__PURE__ */ e("div", { className: "uy:mb-200", children: i }),
+    /* @__PURE__ */ e("div", { className: "uy:mb-200", children: a }),
     /* @__PURE__ */ e(Y, { children: t.error.message })
   ] });
 }, te = (t, n) => {
-  const i = t.backButtonLabel ?? n?.backButtonLabel;
+  const a = t.backButtonLabel ?? n?.backButtonLabel;
   return /* @__PURE__ */ e("div", { className: "uy:mt-200 uy:@section:block uy:hidden", children: /* @__PURE__ */ e(
     h,
     {
@@ -85,12 +85,12 @@ const ee = W({
       },
       color: "primary",
       variant: "ghost",
-      children: i
+      children: a
     }
   ) });
 }, oe = J((t, n) => {
   const {
-    icon: i,
+    icon: a,
     illustration: b,
     onButtonPress: v,
     buttonLabel: g,
@@ -114,15 +114,15 @@ const ee = W({
     h2: P,
     h3: z,
     h4: Q
-  } = ee(), l = V(), q = _(l), y = K(null), { level: d } = X({ ref: y }), A = O(
-    (c) => {
-      y.current = c, n && (typeof n == "function" ? n(c) : n.current = c);
+  } = ee(), c = V(), q = _(c), y = K(null), { level: d } = X({ ref: y }), A = O(
+    (s) => {
+      y.current = s, n && (typeof n == "function" ? n(s) : n.current = s);
     },
     [n]
   );
-  let a = m === "404" ? "404" : "unknown";
-  m === "generic" && C && (a = "known");
-  const o = q.get(a), p = b ?? o?.illustration, f = i ?? o?.icon, F = g ?? o?.buttonLabel, s = x ?? o?.mainTitle, G = k ?? o?.mainDescription, H = w ?? o?.mainDescriptionComponent;
+  let i = m === "404" ? "404" : "unknown";
+  m === "generic" && C && (i = "known");
+  const o = q.get(i), p = b ?? o?.illustration, f = a ?? o?.icon, F = g ?? o?.buttonLabel, l = x ?? o?.mainTitle, G = k ?? o?.mainDescription, H = w ?? o?.mainDescriptionComponent;
   return /* @__PURE__ */ e(
     "div",
     {
@@ -136,7 +136,7 @@ const ee = W({
           {
             src: p,
             variant: "picture",
-            alt: l.formatMessage({
+            alt: c.formatMessage({
               id: "unity:component:error-state:common:illustration:alt",
               defaultMessage: "Error states"
             }),
@@ -150,7 +150,7 @@ const ee = W({
             src: f,
             size: 24,
             color: "content.neutral.low",
-            alt: l.formatMessage({
+            alt: c.formatMessage({
               id: "unity:component:error-state:common:icon:alt",
               defaultMessage: "Error states"
             }),
@@ -158,16 +158,62 @@ const ee = W({
           }
         ),
         /* @__PURE__ */ u("div", { className: j(), children: [
-          /* @__PURE__ */ e(r, { asElement: "h1", variant: "h1", className: S(), children: s }),
-          /* @__PURE__ */ e(r, { asElement: "h2", variant: "h2", className: P(), children: s }),
-          /* @__PURE__ */ e(r, { asElement: "h3", variant: "h3", className: z(), children: s }),
-          /* @__PURE__ */ e(r, { asElement: "h4", variant: "h4", className: Q(), children: s }),
-          /* @__PURE__ */ e(r, { asElement: "p", variant: "body", className: I(), children: G }),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "h1",
+              variant: "h1",
+              color: "content.neutral",
+              className: S(),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "h2",
+              variant: "h2",
+              color: "content.neutral",
+              className: P(),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "h3",
+              variant: "h3",
+              color: "content.neutral",
+              className: z(),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "h4",
+              variant: "h4",
+              color: "content.neutral",
+              className: Q(),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "p",
+              variant: "body",
+              color: "content.neutral.low",
+              className: I(),
+              children: G
+            }
+          ),
           /* @__PURE__ */ e(
             r,
             {
               asElement: "p",
               variant: "body",
+              color: "content.neutral.low",
               className: T(),
               children: H
             }
@@ -181,8 +227,8 @@ const ee = W({
             children: F
           }
         ),
-        a === "unknown" && te(t, o),
-        a === "known" && /* @__PURE__ */ e("div", { className: R(), children: ne(t, o) })
+        i === "unknown" && te(t, o),
+        i === "known" && /* @__PURE__ */ e("div", { className: R(), children: ne(t, o) })
       ] }) })
     }
   );

package/dist/esm/components/funnel-layout/parts/FunnelPageAction.d.ts

@@ -3,7 +3,7 @@ import { ButtonProps } from '../../button/Button.js';
 export interface FunnelPageActionProps extends PropsWithChildren<Omit<ButtonProps, 'variant' | 'color' | 'size'>> {
     /**
      * The action type determines the default styling and behavior.
-     * - 'previous': Uses secondary variant for navigation back
+     * - 'previous': Uses secondary variant for navigation back, outlined in rebrand
      * - 'next': Uses primary variant for progression forward
      * - 'optional': Uses ghost variant for optional actions like skip
      */
@@ -27,7 +27,7 @@ export interface FunnelPageActionProps extends PropsWithChildren<Omit<ButtonProp
  * ```
  * @remarks
  * - Automatically applies appropriate button variants based on action type
- * - Previous actions use secondary variant, next actions use primary variant
+ * - Previous actions use secondary variant in legacy and outlined in rebrand, next actions use primary variant
  * - Optional actions use ghost variant for less prominent actions
  * - Automatically sets DataDog's session replay privacy to `data-dd-privacy="allow"`
  * @see {@link FunnelPageActionProps} for all available props

package/dist/esm/components/funnel-layout/parts/FunnelPageAction.js

@@ -1,28 +1,31 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as c, useCallback as s } from "react";
-import { Button as l } from "../../button/Button.js";
-const u = c(
-  ({ actionType: t, children: a, ...r }, o) => {
-    const e = s(
-      (n) => {
-        switch (n) {
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as c, useCallback as u } from "react";
+import { useUnityTheme as l } from "@payfit/unity-themes";
+import { Button as p } from "../../button/Button.js";
+const m = c(
+  ({ actionType: t, children: a, ...e }, o) => {
+    const { theme: r } = l(), n = u(
+      (i) => {
+        switch (i) {
           case "previous":
-            return { variant: "secondary" };
+            return {
+              variant: r === "rebrand" ? "outlined" : "secondary"
+            };
           case "next":
             return { variant: "primary", color: "primary" };
           case "optional":
             return { variant: "ghost", color: "neutral" };
         }
       },
-      []
+      [r]
     )(t);
-    return /* @__PURE__ */ i(
-      l,
+    return /* @__PURE__ */ s(
+      p,
       {
         ref: o,
         "data-dd-privacy": "allow",
+        ...n,
         ...e,
-        ...r,
         "data-unity-component": "FunnelPageAction",
         "data-action-type": t,
         children: a
@@ -30,7 +33,7 @@ const u = c(
     );
   }
 );
-u.displayName = "FunnelPageAction";
+m.displayName = "FunnelPageAction";
 export {
-  u as FunnelPageAction
+  m as FunnelPageAction
 };

package/dist/esm/components/icon-button/IconButton.variants.js

@@ -30,7 +30,7 @@ const t = e({
         "uy:theme-legacy:bg-surface-primary-enabled uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:text-content-inverted-enabled",
         'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-highest-hover uy:data-[hovered="true"]:text-content-inverted-hover',
         "uy:theme-legacy:active:bg-surface-primary-active uy:theme-rebrand:active:bg-surface-neutral-highest-active uy:active:text-content-inverted-hover",
-        "uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:data-[pressed]:text-content-inverted-pressed"
+        "uy:theme-legacy:data-[pressed]:bg-surface-primary-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-highest-pressed uy:theme-legacy:data-[pressed]:text-content-inverted-pressed uy:theme-rebrand:data-[pressed]:text-content-neutral-pressed"
       ],
       warning: [
         "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
@@ -106,11 +106,11 @@ const t = e({
   variants: {
     color: {
       primary: [
-        "uy:bg-transparent uy:text-content-primary-enabled",
-        'uy:data-[hovered="true"]:bg-surface-primary-lowest-hover uy:data-[hovered="true"]:text-content-primary-hover',
-        "uy:active:bg-surface-primary-lowest-active uy:active:text-content-primary-active",
-        "uy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:data-[pressed=true]:text-content-primary-pressed",
-        "uy:data-[focus-visible]:bg-transparent"
+        "uy:bg-transparent uy:theme-legacy:text-content-primary-enabled uy:theme-rebrand:text-content-neutral-enabled",
+        'uy:theme-legacy:data-[hovered="true"]:bg-surface-primary-lowest-hover uy:theme-rebrand:data-[hovered="true"]:bg-surface-neutral-hover uy:theme-legacy:data-[hovered="true"]:text-content-primary-hover uy:theme-rebrand:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:theme-legacy:active:bg-surface-primary-lowest-active uy:theme-rebrand:active:bg-surface-neutral-active uy:theme-legacy:active:text-content-primary-active uy:theme-rebrand:active:text-content-neutral-active",
+        "uy:theme-legacy:data-[pressed=true]:bg-surface-primary-lowest-pressed uy:theme-rebrand:data-[pressed=true]:bg-surface-neutral-pressed uy:theme-legacy:data-[pressed=true]:text-content-primary-pressed uy:theme-rebrand:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent uy:theme-rebrand:data-[focus-visible]:text-content-neutral-focus"
       ],
       warning: [
         "uy:bg-transparent uy:text-content-warning-enabled",

package/dist/esm/components/list-view/parts/RawListViewItem.js

@@ -1,4 +1,4 @@
-import { jsx as i, jsxs as l } from "react/jsx-runtime";
+import { jsx as u, jsxs as l } from "react/jsx-runtime";
 import { forwardRef as g, useRef as w, useLayoutEffect as x } from "react";
 import { Icon as v } from "@payfit/unity-icons";
 import { uyTv as h } from "@payfit/unity-themes";
@@ -12,6 +12,7 @@ const L = h({
       "uy:flex uy:gap-150",
       "uy:transition-colors",
       "uy:bg-surface-neutral",
+      "uy:text-content-neutral",
       "uy:border-b uy:border-b-solid uy:border-b-border-neutral",
       // Hover when list is static
       "uy:group-hover:bg-surface-neutral-hover uy:group-hover:cursor-pointer",
@@ -31,7 +32,7 @@ const L = h({
     suffix: ["uy:grow-0 uy:flex uy:gap-100"]
   }
 }), V = (n, r) => {
-  const o = w(), { children: c, prefix: u, suffix: a, hideDisclosureIndicator: s, ...e } = n, {
+  const i = w(), { children: c, prefix: o, suffix: a, hideDisclosureIndicator: s, ...e } = n, {
     root: d,
     wrapper: f,
     prefix: y,
@@ -39,25 +40,25 @@ const L = h({
     content: b
   } = L(), m = !!a || !s;
   return x(() => {
-    const t = o.current;
+    const t = i.current;
     if (!t) return;
     t.querySelector('[data-unity-slot="ListViewItemLabel"]') || !("aria-label" in e) && !("aria-labelledby" in e) && !("textValue" in e) && console.error(
       "ListViewItem: Either a ListViewItemLabel component, an aria-label, aria-labelledby, or textValue prop is required for accessibility. Provide one to ensure screen reader users can identify the item."
     );
-  }, [e, o]), /* @__PURE__ */ i(I, { ...e, className: d(), "data-dd-privacy": "mask", children: /* @__PURE__ */ l(
+  }, [e, i]), /* @__PURE__ */ u(I, { ...e, className: d(), "data-dd-privacy": "mask", children: /* @__PURE__ */ l(
     "div",
     {
       ref: (t) => {
-        o.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
+        i.current = t, typeof r == "function" ? r(t) : r && (r.current = t);
       },
       "data-unity-slot": "ListViewItem",
       className: f(),
       children: [
-        u && /* @__PURE__ */ i("div", { "data-unity-slot": "ListViewItem.prefix", className: y(), children: u }),
-        /* @__PURE__ */ i("div", { "data-unity-slot": "ListViewItem.content", className: b(), children: c }),
+        o && /* @__PURE__ */ u("div", { "data-unity-slot": "ListViewItem.prefix", className: y(), children: o }),
+        /* @__PURE__ */ u("div", { "data-unity-slot": "ListViewItem.content", className: b(), children: c }),
         m && /* @__PURE__ */ l("div", { "data-unity-slot": "ListViewItem.suffix", className: p(), children: [
           a,
-          !s && /* @__PURE__ */ i(
+          !s && /* @__PURE__ */ u(
             v,
             {
               src: "CaretRightOutlined",

package/dist/esm/components/nav/Nav.js

@@ -1,23 +1,23 @@
-import { jsxs as u, jsx as a } from "react/jsx-runtime";
-import n from "../../hooks/use-id.js";
-function o({ children: e, title: y, ...s }) {
-  const l = `nav-title-${n()}`;
-  return /* @__PURE__ */ u(
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import u from "../../hooks/use-id.js";
+function o({ children: a, title: t, ...y }) {
+  const l = `nav-title-${u()}`;
+  return /* @__PURE__ */ n(
     "nav",
     {
-      ...s,
+      ...y,
       className: "uy:flex uy:flex-col uy:gap-50 uy:min-w-[264px]",
       "aria-labelledby": l,
       children: [
-        /* @__PURE__ */ a(
+        /* @__PURE__ */ e(
           "h3",
           {
             id: l,
-            className: "uy:typography-body-strong uy:py-100 uy:px-150",
-            children: y
+            className: "uy:typography-body-strong uy:text-content-neutral uy:py-100 uy:px-150",
+            children: t
           }
         ),
-        /* @__PURE__ */ a("ul", { className: "uy:flex uy:flex-col uy:gap-50 uy:list-none", children: e })
+        /* @__PURE__ */ e("ul", { className: "uy:flex uy:flex-col uy:gap-50 uy:list-none", children: a })
       ]
     }
   );

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.js

@@ -1,40 +1,34 @@
-import { jsx as r, jsxs as m, Fragment as n } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { Checkbox as f } from "react-aria-components/Checkbox";
-import { useId as h } from "react-aria/useId";
-import { CheckboxIndicator as p } from "../../../checkbox/parts/CheckboxIndicator.js";
+import { jsx as r, jsxs as m, Fragment as d } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Checkbox as p } from "react-aria-components/Checkbox";
+import { useId as s } from "react-aria/useId";
+import { CheckboxIndicator as h } from "../../../checkbox/parts/CheckboxIndicator.js";
 import { Text as b } from "../../../text/Text.js";
 import { Content as x } from "../../internals/Content.js";
 import { Description as C } from "../../internals/Description.js";
-import { Illustration as g } from "../../internals/Illustration.js";
-import { SelectedIndicator as k } from "../../internals/SelectedIndicator.js";
-import { selectableCard as u } from "../../selectableCard.variant.js";
-const I = s(({ title: i, description: o, illustration: t, ...a }, c) => {
-  const { base: d } = u(), l = h();
+import { Illustration as k } from "../../internals/Illustration.js";
+import { SelectedIndicator as I } from "../../internals/SelectedIndicator.js";
+import { selectableCard as S } from "../../selectableCard.variant.js";
+const g = f(({ title: i, description: o, illustration: t, ...c }, a) => {
+  const { base: l } = S(), n = s();
   return /* @__PURE__ */ r(
-    f,
+    p,
     {
-      ref: c,
-      className: ({ isFocusVisible: e }) => d({ isFocusVisible: e }),
-      ...a,
-      children: (e) => /* @__PURE__ */ m(n, { children: [
-        /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
-          p,
-          {
-            className: "uy:group-hover:border-border-form-hover",
-            ...e
-          }
-        ) }),
+      ref: a,
+      className: ({ isFocusVisible: e }) => l({ isFocusVisible: e }),
+      ...c,
+      children: (e) => /* @__PURE__ */ m(d, { children: [
+        /* @__PURE__ */ r(I, { children: /* @__PURE__ */ r(h, { ...e }) }),
         /* @__PURE__ */ m(x, { children: [
-          t && /* @__PURE__ */ r(g, { children: t }),
-          /* @__PURE__ */ r(b, { variant: "bodyLargeStrong", asElement: "h3", id: `${l}-label`, children: i }),
+          t && /* @__PURE__ */ r(k, { children: t }),
+          /* @__PURE__ */ r(b, { variant: "bodyLargeStrong", asElement: "h3", id: `${n}-label`, children: i }),
           o && /* @__PURE__ */ r(C, { children: o })
         ] })
       ] })
     }
   );
 });
-I.displayName = "SelectableCardCheckbox";
+g.displayName = "SelectableCardCheckbox";
 export {
-  I as SelectableCardCheckbox
+  g as SelectableCardCheckbox
 };

package/dist/esm/components/toast/parts/ToastAction.js

@@ -1,14 +1,14 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useUnityTheme as e } from "@payfit/unity-themes";
-import { Button as a } from "../../button/Button.js";
-function i({
-  children: t,
+import { jsx as t } from "react/jsx-runtime";
+import { useUnityTheme as a } from "@payfit/unity-themes";
+import { Button as n } from "../../button/Button.js";
+function s({
+  children: e,
   onPress: r
 }) {
-  const { theme: n } = e();
-  return /* @__PURE__ */ o("div", { className: "uy:self-end", children: /* @__PURE__ */ o(a, { variant: n === "rebrand" ? "secondary" : "ghost", color: "primary", onPress: r, children: t }) });
+  const { theme: o } = a();
+  return /* @__PURE__ */ t("div", { className: "uy:theme-legacy:self-end uy:theme-rebrand:self-start", children: /* @__PURE__ */ t(n, { variant: o === "rebrand" ? "secondary" : "ghost", color: "primary", onPress: r, children: e }) });
 }
-i.displayName = "ToastAction";
+s.displayName = "ToastAction";
 export {
-  i as ToastAction
+  s as ToastAction
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.46.9",
+  "version": "2.46.11",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -87,7 +87,7 @@
     "tailwind-variants": "3.2.2",
     "usehooks-ts": "3.1.1",
     "zod": "4.4.3",
-    "@payfit/unity-illustrations": "2.46.9"
+    "@payfit/unity-illustrations": "2.46.11"
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
@@ -99,8 +99,8 @@
     "react-hook-form": "^7",
     "react-router-dom": "^5",
     "zod": "^3 || ^4",
-    "@payfit/unity-icons": "2.46.9",
-    "@payfit/unity-themes": "2.46.9"
+    "@payfit/unity-icons": "2.46.11",
+    "@payfit/unity-themes": "2.46.11"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.3",
@@ -149,9 +149,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.46.9",
-    "@payfit/unity-illustrations": "2.46.9",
-    "@payfit/unity-themes": "2.46.9",
+    "@payfit/unity-icons": "2.46.11",
+    "@payfit/unity-illustrations": "2.46.11",
+    "@payfit/unity-themes": "2.46.11",
     "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependenciesMeta": {