@payfit/unity-components 2.29.10 → 2.29.12

package/dist/esm/components/avatar/parts/AvatarFallback.d.ts

@@ -21,106 +21,44 @@ declare const avatarPlaceholder: import('tailwind-variants').TVReturnType<{
     background: string;
     foreground: string;
 }, undefined, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-    color: {
-        teal: string;
-        plum: string;
-        purple: string;
-        orange: string;
-        neutral: string;
-        warning: string;
-        success: string;
-        info: string;
-        danger: string;
-        promo: string;
-        primary: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
     color: {
-        teal: string;
-        plum: string;
-        purple: string;
-        orange: string;
-        neutral: string;
-        warning: string;
-        success: string;
-        info: string;
-        danger: string;
-        promo: string;
-        primary: string;
-    };
-}, undefined, undefined, {
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
-    };
-    color: {
-        teal: string;
-        plum: string;
-        purple: string;
-        orange: string;
-        neutral: string;
-        warning: string;
-        success: string;
-        info: string;
-        danger: string;
-        promo: string;
-        primary: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    size: {
-        xs: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-    };
-    variant: {
-        circle: string;
-        square: string;
+        blue: {
+            background: string;
+            foreground: string;
+        };
+        yellow: {
+            background: string;
+            foreground: string;
+        };
+        purple: {
+            background: string;
+            foreground: string;
+        };
     };
+}, {
+    base: string;
+    background: string;
+    foreground: string;
+}, import('tailwind-variants').TVReturnType<{
     color: {
-        teal: string;
-        plum: string;
-        purple: string;
-        orange: string;
-        neutral: string;
-        warning: string;
-        success: string;
-        info: string;
-        danger: string;
-        promo: string;
-        primary: string;
+        blue: {
+            background: string;
+            foreground: string;
+        };
+        yellow: {
+            background: string;
+            foreground: string;
+        };
+        purple: {
+            background: string;
+            foreground: string;
+        };
     };
-}, undefined, undefined, unknown, unknown, undefined>>>;
+}, {
+    base: string;
+    background: string;
+    foreground: string;
+}, undefined, unknown, unknown, undefined>>;
 type AvatarFallbackBaseProps = Pick<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>, 'delayMs'>;
 type AvatarFallbackInitialsProps = AvatarFallbackBaseProps & {
     /** The fallback's variant. It can be one of: `initials`, `placeholder` */

package/dist/esm/components/avatar/parts/AvatarFallback.js

@@ -1,12 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-import * as m from "react";
-import { uyTv as n, uyMerge as b } from "@payfit/unity-themes";
-import * as e from "@radix-ui/react-avatar";
+import { jsx as e } from "react/jsx-runtime";
+import * as b from "react";
+import { uyTv as y, uyMerge as h } from "@payfit/unity-themes";
+import * as l from "@radix-ui/react-avatar";
 import { useAvatarContext as f } from "../Avatar.context.js";
-import { avatarBase as u } from "../Avatar.variants.js";
+import { avatarBase as i } from "../Avatar.variants.js";
 import { getInitials as v } from "../utils.js";
-const h = n({
-  extend: u,
+const w = y({
   slots: {
     base: "uy:absolute uy:overflow-hidden",
     background: "",
@@ -15,21 +14,21 @@ const h = n({
   variants: {
     color: {
       blue: {
-        background: "uy:bg-blue-l4",
-        foreground: "uy:fill-blue-l3"
+        background: "uy:theme-legacy:bg-blue-l4 uy:theme-rebrand:bg-blue-l3",
+        foreground: "uy:theme-legacy:fill-blue-l3 uy:theme-rebrand:fill-blue-l4"
       },
       yellow: {
-        background: "uy:bg-yellow-l4",
-        foreground: "uy:fill-yellow-l3"
+        background: "uy:theme-legacy:bg-yellow-l4 uy:theme-rebrand:bg-yellow-l3",
+        foreground: "uy:theme-legacy:fill-yellow-l3 uy:theme-rebrand:fill-yellow-l4"
       },
       purple: {
-        background: "uy:bg-purple-l4",
-        foreground: "uy:fill-purple-l3"
+        background: "uy:theme-legacy:bg-purple-l4 uy:theme-rebrand:bg-purple-l3",
+        foreground: "uy:theme-legacy:fill-purple-l3 uy:theme-rebrand:fill-purple-l4"
       }
     }
   }
-}), w = n({
-  extend: u,
+}), x = y({
+  extend: i,
   base: "uy:absolute uy:flex uy:h-full uy:w-full uy:items-center uy:justify-center uy:text-content-neutral uy:bg-surface-neutral-lowest",
   variants: {
     size: {
@@ -40,26 +39,24 @@ const h = n({
       xl: "uy:typography-h2"
     }
   }
-}), x = m.forwardRef(({ variant: s, color: i, children: y, ...r }, l) => {
+}), k = b.forwardRef(({ variant: c, color: g, children: m, ...a }, r) => {
   const d = f(), { size: o, variant: t } = d;
-  if (s === "placeholder") {
-    const { base: c, background: p, foreground: g } = h({
-      color: i,
-      size: o,
-      variant: t
+  if (c === "placeholder") {
+    const p = i({ size: o, variant: t }), { base: n, background: u, foreground: s } = w({
+      color: g
     });
-    return /* @__PURE__ */ a(e.Fallback, { ref: l, role: "presentation", ...r, children: /* @__PURE__ */ a(
+    return console.log("BASE", n()), console.log("FG", s()), console.log("BG", u()), /* @__PURE__ */ e(l.Fallback, { ref: r, role: "presentation", ...a, children: /* @__PURE__ */ e(
       "svg",
       {
         role: "img",
         "aria-hidden": !0,
         xmlns: "http://www.w3.org/2000/svg",
         viewBox: "0 0 16 16",
-        className: b(c(), p()),
-        children: /* @__PURE__ */ a(
+        className: h(p, n(), u()),
+        children: /* @__PURE__ */ e(
           "path",
           {
-            className: g(),
+            className: s(),
             fillRule: "evenodd",
             d: "M0 8.322c.245.06.49.117.732.17 2.113.455 3.727.487 4.79.12.478-.166.824-.405 1.09-.732.276-.336.567-.888.737-1.82.4-2.19.02-3.485-.47-4.283C6.407 1.012 5.665.432 4.732 0h6.861c.904 1.906 1.173 4.227.674 6.959-.29 1.587-.871 2.97-1.784 4.086-.921 1.126-2.08 1.86-3.328 2.292-2.283.789-4.872.574-7.156.11V8.322Z",
             clipRule: "evenodd"
@@ -68,18 +65,18 @@ const h = n({
       }
     ) });
   }
-  return /* @__PURE__ */ a(
-    e.Fallback,
+  return /* @__PURE__ */ e(
+    l.Fallback,
     {
-      ref: l,
+      ref: r,
       role: "presentation",
-      className: w({ size: o, variant: t }),
-      ...r,
-      children: v(y)
+      className: x({ size: o, variant: t }),
+      ...a,
+      children: v(m)
     }
   );
 });
-x.displayName = e.Fallback.displayName;
+k.displayName = l.Fallback.displayName;
 export {
-  x as AvatarFallback
+  k as AvatarFallback
 };

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

@@ -1,97 +1,106 @@
-import { jsxs as l, jsx as a, Fragment as j } from "react/jsx-runtime";
-import { forwardRef as B, isValidElement as h, cloneElement as f } from "react";
-import { Checkbox as R } from "react-aria-components/Checkbox";
-import { useId as D } from "react-aria/useId";
-import { Text as u } from "../text/Text.js";
-import { checkbox as E } from "./Checkbox.variants.js";
-import { CheckboxIndicator as V } from "./parts/CheckboxIndicator.js";
-const F = B(
-  ({ children: v, helperText: i, feedbackText: r, ...o }, N) => {
-    const e = D(), {
-      isDisabled: s,
+import { jsxs as r, jsx as e, Fragment as B } from "react/jsx-runtime";
+import { forwardRef as R, isValidElement as h, cloneElement as f } from "react";
+import { Checkbox as D } from "react-aria-components/Checkbox";
+import { useId as E } from "react-aria/useId";
+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) => {
+    const a = E(), {
+      isDisabled: t,
       isReadOnly: d,
-      isInvalid: t,
+      isInvalid: s,
       isRequired: n,
       requiredVariant: c = "required",
       ...x
     } = o, {
       base: g,
       wrapper: $,
-      asterisk: k,
-      optionalTag: C,
-      descriptionsContainer: q,
+      label: k,
+      asterisk: C,
+      optionalTag: q,
+      descriptionsContainer: w,
       helperText: m,
       feedbackText: b
-    } = E({
-      isDisabled: s,
+    } = V({
+      isDisabled: t,
       isReadOnly: d,
-      isInvalid: t
-    }), y = [o["aria-labelledby"], `${e}-label`].filter(Boolean), p = [
+      isInvalid: s
+    }), y = [o["aria-labelledby"], `${a}-label`].filter(Boolean), p = [
       o["aria-describedby"],
-      typeof i == "string" ? `${e}-helper-text` : void 0,
-      typeof r == "string" ? `${e}-feedback-text` : void 0
-    ].filter(Boolean), w = y.length > 0 ? y.join(" ") : void 0, I = p.length > 0 ? p.join(" ") : void 0;
-    return /* @__PURE__ */ l("div", { className: g(), children: [
-      /* @__PURE__ */ a(
-        R,
+      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;
+    return /* @__PURE__ */ r("div", { className: g(), children: [
+      /* @__PURE__ */ e(
+        D,
         {
           ...x,
-          isInvalid: t,
-          ref: N,
+          isInvalid: s,
+          ref: v,
           className: $(),
-          "aria-labelledby": w,
-          "aria-describedby": I,
-          isDisabled: s,
+          "aria-labelledby": I,
+          "aria-describedby": S,
+          isDisabled: t,
           isReadOnly: d,
-          children: (S) => /* @__PURE__ */ l(j, { children: [
-            /* @__PURE__ */ a(
-              V,
+          children: (j) => /* @__PURE__ */ r(B, { children: [
+            /* @__PURE__ */ e(
+              F,
               {
-                ...S,
+                ...j,
                 className: "uy:mt-50 uy:sm:mt-25 uy:ml-0"
               }
             ),
-            /* @__PURE__ */ a("span", { id: `${e}-label`, "data-dd-privacy": "allow", children: v }),
-            c === "required" && n && /* @__PURE__ */ l("span", { className: k(), children: [
+            /* @__PURE__ */ e(
+              "span",
+              {
+                id: `${a}-label`,
+                className: k(),
+                "data-dd-privacy": "allow",
+                children: u
+              }
+            ),
+            c === "required" && n && /* @__PURE__ */ r("span", { className: C(), children: [
               "*",
-              /* @__PURE__ */ a("span", { className: "uy:sr-only", children: "required" })
+              /* @__PURE__ */ e("span", { className: "uy:sr-only", children: "required" })
             ] }),
-            c === "optional" && !n && /* @__PURE__ */ a("span", { className: C(), children: "(optional)" })
+            c === "optional" && !n && /* @__PURE__ */ e("span", { className: q(), children: "(optional)" })
           ] })
         }
       ),
-      (i || r) && /* @__PURE__ */ l("div", { className: q(), "data-dd-privacy": "allow", children: [
-        typeof i == "string" ? /* @__PURE__ */ a(
-          u,
+      (i || l) && /* @__PURE__ */ r("div", { className: w(), "data-dd-privacy": "allow", children: [
+        typeof i == "string" ? /* @__PURE__ */ e(
+          N,
           {
             variant: "bodySmall",
             color: "content.neutral.low",
-            id: `${e}-helper-text`,
+            id: `${a}-helper-text`,
             className: m(),
             children: i
           }
         ) : h(i) && f(i, {
-          "data-id": `${e}-helper-text`,
+          "data-id": `${a}-helper-text`,
           className: m()
         }),
-        t && (typeof r == "string" ? /* @__PURE__ */ a(
-          u,
+        s && (typeof l == "string" ? /* @__PURE__ */ e(
+          N,
           {
             variant: "bodySmallStrong",
             color: "content.form.invalid",
-            id: `${e}-feedback-text`,
+            id: `${a}-feedback-text`,
             className: b(),
-            children: r
+            children: l
           }
-        ) : h(r) && f(r, {
-          "data-id": `${e}-feedback-text`,
+        ) : h(l) && f(l, {
+          "data-id": `${a}-feedback-text`,
           className: b()
         }))
       ] })
     ] });
   }
 );
-F.displayName = "Checkbox";
+L.displayName = "Checkbox";
 export {
-  F as Checkbox
+  L as Checkbox
 };

package/dist/esm/components/checkbox/Checkbox.variants.d.ts

@@ -15,6 +15,7 @@ export declare const checkbox: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     wrapper: string[];
+    label: string;
     asterisk: string;
     optionalTag: string;
     descriptionsContainer: string;
@@ -37,6 +38,7 @@ export declare const checkbox: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     wrapper: string[];
+    label: string;
     asterisk: string;
     optionalTag: string;
     descriptionsContainer: string;
@@ -59,6 +61,7 @@ export declare const checkbox: import('tailwind-variants').TVReturnType<{
 }, {
     base: string[];
     wrapper: string[];
+    label: string;
     asterisk: string;
     optionalTag: string;
     descriptionsContainer: string;

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

@@ -11,14 +11,15 @@ const r = e({
       "uy:has-data-[readonly=true]:border-border-neutral-disabled"
     ],
     wrapper: [
-      "uy:sm:rounded-25 uy:leading-none uy:sm:leading-[1lh]",
-      "uy:inline-flex uy:items-start uy:gap-75",
+      "uy:group uy:sm:rounded-25 uy:leading-none uy:sm:leading-[1lh]",
+      "uy:inline-flex uy:items-start",
       "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:data-[readonly=true]:cursor-not-allowed uy:theme-rebrand:data-[readonly=true]:text-content-form-read-only"
     ],
-    asterisk: "uy:text-content-danger",
-    optionalTag: "uy:typography-body uy:leading-1",
+    label: "uy:ml-75",
+    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",
     helperText: [
       "uy:block uy:typography-body-small uy:text-content-neutral-low uy:mt-50"

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 c = u({
+const n = 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"
@@ -11,9 +11,7 @@ const c = u({
   },
   variants: {
     isSelected: {
-      true: {
-        base: "uy:border-border-form-selected uy:bg-surface-form-active uy:hover:border-border-form-active"
-      }
+      true: ""
     },
     isDisabled: {
       true: ""
@@ -38,7 +36,20 @@ const c = u({
       isInvalid: !1,
       isReadOnly: !1,
       className: {
-        base: "uy:border-border-form-enabled uy:bg-surface-form-enabled"
+        base: "uy:border-border-form-enabled uy:group-data-[focus-visible=true]:border-border-form-focus uy:bg-surface-form-enabled"
+      }
+    },
+    {
+      isSelected: !0,
+      isDisabled: !1,
+      isInvalid: !1,
+      isReadOnly: !1,
+      className: {
+        base: [
+          "uy:bg-surface-form-active",
+          "uy:theme-legacy:border-border-form-selected uy:theme-legacy:hover:border-border-form-active",
+          "uy:theme-rebrand:border-transparent uy:theme-rebrand:hover:border-transparent"
+        ]
       }
     },
     {
@@ -53,7 +64,7 @@ const c = u({
       isSelected: !0,
       isDisabled: !0,
       className: {
-        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled",
+        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled!",
         checkmark: "uy:text-border-form-disabled"
       }
     },
@@ -67,9 +78,15 @@ const c = u({
     },
     {
       isSelected: !0,
+      isDisabled: !1,
       isInvalid: !0,
+      isReadOnly: !1,
       className: {
-        base: "uy:border-border-form-error! uy:bg-surface-danger!",
+        base: [
+          "uy:bg-surface-danger!",
+          "uy:theme-legacy:border-border-form-error!",
+          "uy:theme-rebrand:border-transparent!"
+        ],
         checkmark: "uy:text-content-inverted"
       }
     },
@@ -91,28 +108,28 @@ const c = u({
     }
   ]
 });
-function n({
+function c({
   isSelected: r,
   isDisabled: s,
   isIndeterminate: a,
   isInvalid: t,
-  isReadOnly: o,
-  className: d
+  isReadOnly: d,
+  className: o
 }) {
-  const { base: i, checkmark: l } = c({
+  const { base: l, checkmark: i } = n({
     isSelected: r || a,
     isDisabled: s,
     isInvalid: t,
-    isReadOnly: o
+    isReadOnly: d
   });
-  return /* @__PURE__ */ e("div", { className: i({ className: d }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
+  return /* @__PURE__ */ e("div", { className: l({ className: o }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
     "svg",
     {
       fill: "none",
       stroke: "currentColor",
       viewBox: "0 0 16 16",
       "aria-hidden": "true",
-      className: l(),
+      className: i(),
       style: {
         strokeDashoffset: r ? 44 : 66
       },
@@ -140,7 +157,7 @@ function n({
     }
   ) });
 }
-n.displayName = "CheckboxIndicator";
+c.displayName = "CheckboxIndicator";
 export {
-  n as CheckboxIndicator
+  c as CheckboxIndicator
 };

package/dist/esm/components/form-field/parts/TanstackFormHelperText.js

@@ -1,20 +1,21 @@
-import { jsx as a } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { forwardRef as l } from "react";
-import { Text as m } from "../../text/Text.js";
-import { useFieldA11yContext as n } from "../TanstackFormField.context.js";
-const d = l(({ children: e, ...t }, r) => {
-  const o = n();
-  return /* @__PURE__ */ a(
-    m,
+import { Text as n } from "../../text/Text.js";
+import { useFieldA11yContext as m } from "../TanstackFormField.context.js";
+const d = l(({ children: e, ...t }, a) => {
+  const r = m();
+  return /* @__PURE__ */ o(
+    n,
     {
       "data-dd-privacy": "allow",
       ...t,
-      id: o.helperTextId || t.id,
+      id: r.helperTextId || t.id,
       "data-unity-slot": "form-field-helper-text",
       variant: "bodySmall",
       asElement: "span",
       color: "content.neutral.low",
-      ref: r,
+      className: "uy:[&>a]:text-content-neutral-enabled",
+      ref: a,
       children: e
     }
   );

package/dist/esm/components/form-field/parts/TanstackRawFormContextualLink.js

@@ -1,45 +1,46 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import { Button as s } from "react-aria-components/Button";
-import { RawLink as m } from "../../link/RawLink.js";
-import { useFieldA11yContext as c } from "../TanstackFormField.context.js";
-const u = e((t, a) => {
-  const { children: o, href: n, onPress: d, ...i } = t, r = c();
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useUnityTheme as c } from "@payfit/unity-themes";
+import { Button as u } from "react-aria-components/Button";
+import { RawLink as y } from "../../link/RawLink.js";
+import { useFieldA11yContext as f } from "../TanstackFormField.context.js";
+const k = s((t, a) => {
+  const { children: o, href: n, onPress: l, ...r } = t, i = f(), { theme: d } = c(), m = d === "rebrand" ? "primary" : "secondary";
   return n ? (
     // @ts-expect-error - it's okay in this case
-    /* @__PURE__ */ l(
-      m,
+    /* @__PURE__ */ e(
+      y,
       {
-        id: r.contextualLinkId || t.id,
+        id: i.contextualLinkId || t.id,
         size: "small",
-        color: "secondary",
+        color: m,
         variant: "standalone",
         "data-unity-slot": "form-field-contextual-link",
         href: n,
         ref: a,
         "data-dd-privacy": "allow",
-        ...i,
+        ...r,
         children: o
       }
     )
   ) : (
     // @ts-expect-error - it's okay in this case
-    /* @__PURE__ */ l(
-      s,
+    /* @__PURE__ */ e(
+      u,
       {
-        id: r.contextualLinkId || t.id,
-        onPress: d,
+        id: i.contextualLinkId || t.id,
+        onPress: l,
         "data-unity-slot": "contextual-link",
         className: "uy:typography-body-small uy:w-fit",
         ref: a,
         "data-dd-privacy": "allow",
-        ...i,
+        ...r,
         children: o
       }
     )
   );
 });
-u.displayName = "TanstackRawFormContextualLink";
+k.displayName = "TanstackRawFormContextualLink";
 export {
-  u as TanstackRawFormContextualLink
+  k as TanstackRawFormContextualLink
 };

package/dist/esm/components/input/Input.js

@@ -9,11 +9,11 @@ import { Spinner as C } from "../spinner/Spinner.js";
 const O = h({
   slots: {
     base: "uy:flex uy:h-5.5 uy:sm:h-500 uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active",
-    prefix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75 uy:active:border-border-form-active",
+    prefix: "uy:flex-grow-0 uy:text-content-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-r uy:border-solid uy:rounded-l-100 uy:sm:rounded-l-75 uy:active:border-border-form-active",
     inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:flex-nowrap uy:py-125 uy:sm:py-100 uy:px-150 uy:rounded-100 uy:sm:rounded-75 uy:max-w-full uy:justify-between",
     input: "uy:w-full uy:flex-1 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:min-w-0 uy:max-w-full",
     state: "uy:flex uy:gap-50 uy:items-center uy:shrink-0",
-    suffix: "uy:flex-grow-0 uy:text-content-neutral-low uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:active:border-border-form-active"
+    suffix: "uy:flex-grow-0 uy:text-content-form-enabled uy:content-center uy:py-125 uy:sm:py-100 uy:px-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:sm:rounded-r-75 uy:active:border-border-form-active"
   },
   variants: {
     isInvalid: {

package/dist/esm/components/label/Label.js

@@ -8,7 +8,7 @@ import { mergeProps as N } from "react-aria/mergeProps";
 import { useIntl as q } from "react-intl";
 const x = b({
   slots: {
-    base: "uy:typography-body-strong uy:text-content-form-enabled uy:leading-[1lh]",
+    base: "uy:typography-body-strong uy:text-content-neutral-enabled uy:leading-[1lh]",
     asterisk: "uy:text-content-danger uy:inline-block uy:ml-25",
     optionalTag: "uy:typography-body uy:inline-block uy:ml-25"
   },

package/dist/esm/components/link/RawLink.js

@@ -1,11 +1,11 @@
 import { jsxs as g, jsx as w } from "react/jsx-runtime";
 import { forwardRef as k } from "react";
-import { IconSprite as D } from "@payfit/unity-icons";
-import { uyTv as z } from "@payfit/unity-themes";
+import { IconSprite as z } from "@payfit/unity-icons";
+import { uyTv as D } from "@payfit/unity-themes";
 import { Link as A } from "react-aria-components/Link";
 import { useRouter as E } from "../../providers/router/RouterProvider.js";
 import { isExternalUrl as L } from "./utils.js";
-const N = z({
+const N = D({
   slots: {
     base: [
       "uy:rounded-50 uy:underline uy:transition-colors uy:underline-offset-3",
@@ -18,11 +18,11 @@ const N = z({
     variant: {
       inline: {
         base: "uy:inline uy:text-(length:inherit) uy:font-medium uy:leading-inherit",
-        icon: "uy:align-top"
+        icon: "uy:align-text-top uy:w-[0.95em] uy:h-[1.2em]"
       },
       standalone: {
         base: "uy:typography-action uy:flex uy:gap-x-25 uy:items-end uy:py-50 uy:sm:p-0",
-        icon: "uy:self-center"
+        icon: "uy:self-center uy:size-[1.1em]"
       }
     },
     size: {
@@ -145,12 +145,10 @@ const N = z({
         children: [
           l,
           r && /* @__PURE__ */ w(
-            D,
+            z,
             {
               src: "ArrowSquareOutOutlined",
               color: "currentColor",
-              width: "1.25em",
-              height: "1.25em",
               role: "presentation",
               className: h()
             }

package/dist/esm/components/multi-select/parts/MultiSelectButton.js

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { memo as D, forwardRef as k, useContext as A, useMemo as K } from "react";
 import { useSelectContext as R, useStoreState as $, Select as L } from "@ariakit/react";
 import { uyTv as P } from "@payfit/unity-themes";
@@ -14,7 +14,7 @@ const H = P({
     base: "uy:h-5.5 uy:sm:h-500 uy:flex uy:items-center uy:justify-between uy:py-125 uy:sm:py-100 uy:px-150 uy:w-full uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:not([disabled]):border-border-form-active uy:pointer-events-auto!",
     inputValue: "uy:flex-1 uy:typography-body uy:text-left uy:line-clamp-1",
     state: "uy:grow-0 uy:outline-none uy:typography-body uy:placeholder:text-content-neutral-lowest uy:inline-flex uy:gap-50 uy:items-center uy:px-100",
-    suffix: "uy:text-content-neutral-low"
+    suffix: "uy:text-content-neutral-lowest"
   },
   variants: {
     isDisabled: {
@@ -37,8 +37,8 @@ const H = P({
       true: {
         base: "uy:bg-surface-form-error uy:border-border-form-error",
         inputValue: "uy:text-content-form-error",
-        state: "uy:text-content-form-error",
-        suffix: "uy:text-content-form-error"
+        state: "uy:text-content-form-error"
+        // suffix: 'uy:text-content-form-error',
       }
     },
     isEmpty: {
@@ -58,8 +58,7 @@ const H = P({
       className: {
         base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
         inputValue: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
-        state: "uy:text-content-neutral-disabled",
-        suffix: "uy:border-border-form-enabled uy:text-content-form-enabled"
+        state: "uy:text-content-neutral-disabled"
       }
     },
     {
@@ -86,20 +85,20 @@ function J({
   onFocus: h,
   ...S
 }, v) {
-  const m = T(), u = U(), C = R(), I = $(C, "open"), f = A(G), a = f.maxVisibleItems ?? 0, l = f.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(x), { base: M, inputValue: V, state: B, suffix: N } = H({
+  const m = T(), u = U(), C = R(), I = $(C, "open"), y = A(G), a = y.maxVisibleItems ?? 0, i = y.selectedKeys ?? /* @__PURE__ */ new Set(), o = Array.from(x), { base: M, inputValue: V, state: B, suffix: N } = H({
     isDisabled: !!n,
     isReadOnly: !!t,
     isInvalid: !!r,
-    isEmpty: l.size === 0
-  }), y = Math.max(
+    isEmpty: i.size === 0
+  }), f = Math.max(
     o.length - a,
     0
-  ), O = l.size > 0 && !n && !t && !c, z = K(() => {
+  ), O = i.size > 0 && !n && !t && !c, z = K(() => {
     if (o.length === 0) return s;
     const E = o.slice(0, a), j = new Set(E);
     return d(j);
   }, [o, a, d, s]);
-  return /* @__PURE__ */ i(
+  return /* @__PURE__ */ l(
     L,
     {
       ...S,
@@ -113,8 +112,8 @@ function J({
       onBlur: w,
       onFocus: h,
       children: [
-        /* @__PURE__ */ e("span", { id: `${m}-select-button-label`, className: V(), children: l.size > 0 ? z : s }),
-        /* @__PURE__ */ i("div", { className: B(), children: [
+        /* @__PURE__ */ e("span", { id: `${m}-select-button-label`, className: V(), children: i.size > 0 ? z : s }),
+        /* @__PURE__ */ l("div", { className: B(), children: [
           c && /* @__PURE__ */ e(
             F,
             {
@@ -137,9 +136,9 @@ function J({
               })
             }
           ),
-          y > 0 && /* @__PURE__ */ i(W, { variant: "numeric", children: [
+          f > 0 && /* @__PURE__ */ l(W, { variant: "numeric", children: [
             "+",
-            y
+            f
           ] }),
           O && /* @__PURE__ */ e(
             q,
@@ -158,7 +157,6 @@ function J({
         /* @__PURE__ */ e(
           b,
           {
-            color: "content.neutral.low",
             className: N(),
             src: I ? "CaretUpOutlined" : "CaretDownOutlined",
             role: "presentation"

package/dist/esm/components/select/parts/SelectButton.js

@@ -19,7 +19,7 @@ const x = b({
       true: {
         base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
         selectValue: "uy:text-content-form-disabled",
-        icon: "uy:text-content-form-disabled"
+        icon: "uy:text-content-neutral-lowest-disabled"
       }
     },
     isInvalid: {
@@ -31,7 +31,7 @@ const x = b({
       true: {
         base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
         selectValue: "uy:text-content-form-readonly",
-        icon: "uy:text-content-primary-disabled"
+        icon: "uy:text-content-neutral-lowest-disabled"
       }
     }
   },
@@ -42,8 +42,8 @@ const x = b({
       isReadOnly: !1,
       className: {
         base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:bg-surface-form-enabled uy:hover:bg-surface-form-hover uy:active:border-border-form-active",
-        selectValue: "uy:text-content-neutral-enabled uy:hover:text-content-neutral-hover",
-        icon: "uy:text-content-neutral-low uy:hover:text-content-form-hover"
+        selectValue: "uy:text-content-form-enabled uy:hover:text-content-form-hover",
+        icon: "uy:text-content-neutral-lowest uy:hover:text-content-neutral-lowest-hover"
       }
     }
   ],

package/dist/esm/components/text-area/TextArea.js

@@ -47,7 +47,7 @@ const N = h({
         base: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
         inputWrapper: "uy:border-border-form-enabled uy:bg-surface-form-enabled",
         input: "uy:text-content-form-enabled uy:bg-surface-form-enabled",
-        state: "uy:text-content-neutral-disabled"
+        state: "uy:text-content-form-disabled"
       }
     }
   ],
@@ -59,7 +59,7 @@ const N = h({
 }), W = x(
   ({
     isInvalid: o,
-    isLoading: s,
+    isLoading: n,
     isDisabled: r,
     isReadOnly: t,
     isResizable: i = !1,
@@ -81,14 +81,14 @@ const N = h({
             ...d,
             ref: f,
             className: c(),
-            "aria-busy": s,
+            "aria-busy": n,
             "aria-invalid": o,
             readOnly: t,
             disabled: r
           }
         ),
         /* @__PURE__ */ a("div", { className: p(), children: [
-          s && /* @__PURE__ */ e(
+          n && /* @__PURE__ */ e(
             L,
             {
               color: "inherit",
@@ -123,8 +123,8 @@ const N = h({
             id: "unity:component:form-field:textarea:resize-handle:label",
             defaultMessage: "Resize textarea"
           }),
-          onKeyDown: (n) => {
-            (n.key === "Enter" || n.key === " ") && (n.preventDefault(), l.current?.querySelector("textarea")?.focus());
+          onKeyDown: (s) => {
+            (s.key === "Enter" || s.key === " ") && (s.preventDefault(), l.current?.querySelector("textarea")?.focus());
           },
           children: /* @__PURE__ */ a(
             "svg",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.29.10",
+  "version": "2.29.12",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-illustrations": "2.29.10",
+    "@payfit/unity-illustrations": "2.29.12",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.28.0",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.29.10",
-    "@payfit/unity-themes": "2.29.10",
+    "@payfit/unity-icons": "2.29.12",
+    "@payfit/unity-themes": "2.29.12",
     "@storybook/react-vite": "^10.3.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -89,9 +89,9 @@
     "@figma/code-connect": "1.4.3",
     "@hookform/devtools": "4.4.0",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-icons": "2.29.10",
-    "@payfit/unity-illustrations": "2.29.10",
-    "@payfit/unity-themes": "2.29.10",
+    "@payfit/unity-icons": "2.29.12",
+    "@payfit/unity-illustrations": "2.29.12",
+    "@payfit/unity-themes": "2.29.12",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "11.1.3",
     "@storybook/addon-docs": "10.3.5",