@payfit/unity-components 2.29.11 → 2.31.0

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/dist/esm/components/toggle-switch/ToggleSwitch.d.ts

@@ -3,8 +3,8 @@ import { SwitchProps as AriaSwitchProps } from 'react-aria-components/Switch';
 export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
     isDisabled: {
         false: {
-            indicator: string;
-            knob: string;
+            indicator: string[];
+            knob: string[];
         };
         true: {
             indicator: string;
@@ -22,8 +22,8 @@ export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
 }, undefined, {
     isDisabled: {
         false: {
-            indicator: string;
-            knob: string;
+            indicator: string[];
+            knob: string[];
         };
         true: {
             indicator: string;
@@ -41,8 +41,8 @@ export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
 }, import('tailwind-variants').TVReturnType<{
     isDisabled: {
         false: {
-            indicator: string;
-            knob: string;
+            indicator: string[];
+            knob: string[];
         };
         true: {
             indicator: string;

package/dist/esm/components/toggle-switch/ToggleSwitch.js

@@ -1,7 +1,7 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
 import { forwardRef as h } from "react";
 import { uyTv as v } from "@payfit/unity-themes";
-import { Switch as b } from "react-aria-components/Switch";
+import { Switch as m } from "react-aria-components/Switch";
 import { useBreakpointListener as w } from "../../hooks/use-breakpoint-listener.js";
 const x = v({
   slots: {
@@ -35,8 +35,19 @@ const x = v({
   variants: {
     isDisabled: {
       false: {
-        indicator: 'uy:group-data-[selected="true"]:bg-surface-form-active uy:group-data-[selected="true"]:border-border-form-active uy:group-data-[selected="true"]:group-data-[pressed]:bg-surface-form-active uy:group-data-[selected="true"]:group-data-[pressed]:border-border-form-active',
-        knob: 'uy:group-data-[selected="true"]:border-border-inverted-enabled uy:group-data-[selected="true"]:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[selected="true"]:group-data-[pressed]:border-border-inverted-pressed'
+        indicator: [
+          'uy:theme-legacy:group-data-[selected="true"]:bg-surface-form-active uy:theme-legacy:group-data-[selected="true"]:border-border-form-active',
+          'uy:theme-rebrand:group-data-[selected="true"]:bg-surface-form-active uy:theme-rebrand:group-data-[selected="true"]:border-surface-form-active',
+          'uy:theme-legacy:group-data-[selected="true"]:group-data-[pressed]:bg-surface-form-active',
+          'uy:theme-legacy:group-data-[selected="true"]:group-data-[pressed]:border-border-form-active',
+          'uy:theme-rebrand:group-data-[selected="true"]:group-data-[pressed]:bg-surface-primary-active',
+          'uy:theme-rebrand:group-data-[selected="true"]:group-data-[pressed]:border-border-primary-active'
+        ],
+        knob: [
+          "uy:theme-legacy:group-data-[selected=true]:border-border-inverted-enabled uy:theme-rebrand:group-data-[selected=true]:border-transparent",
+          "uy:group-data-[selected=true]:group-data-[pressed]:bg-surface-form-pressed",
+          "uy:group-data-[selected=true]:group-data-[pressed]:border-border-inverted-pressed"
+        ]
       },
       true: {
         indicator: "",
@@ -46,39 +57,39 @@ const x = v({
   }
 }), N = h(
   ({
-    label: o,
+    label: u,
     helperText: r,
-    isLabelSrOnly: s = !1,
+    isLabelSrOnly: o = !1,
     isDisabled: d,
-    ...m
-  }, u) => {
+    ...b
+  }, s) => {
     const {
       container: t,
       indicator: i,
       knob: l,
       textWrapper: y,
       label: c,
-      hintText: n,
-      mobileContainer: f
-    } = x({ isDisabled: d }), g = w() === "xs", p = { ...m, role: "switch" };
-    return g ? /* @__PURE__ */ e(
-      b,
+      hintText: p,
+      mobileContainer: g
+    } = x({ isDisabled: d }), f = w() === "xs", n = { ...b, role: "switch" };
+    return f ? /* @__PURE__ */ e(
+      m,
       {
-        ...p,
-        ref: u,
+        ...n,
+        ref: s,
         className: t(),
         isDisabled: d,
-        children: /* @__PURE__ */ a("div", { className: f(), children: [
+        children: /* @__PURE__ */ a("div", { className: g(), children: [
           /* @__PURE__ */ a(
             "div",
             {
               className: y({
-                className: s ? "uy:sr-only" : ""
+                className: o ? "uy:sr-only" : ""
               }),
               "data-dd-privacy": "allow",
               children: [
-                /* @__PURE__ */ e("span", { className: c(), children: o }),
-                r && /* @__PURE__ */ e("span", { className: n(), children: r })
+                /* @__PURE__ */ e("span", { className: c(), children: u }),
+                r && /* @__PURE__ */ e("span", { className: p(), children: r })
               ]
             }
           ),
@@ -86,10 +97,10 @@ const x = v({
         ] })
       }
     ) : /* @__PURE__ */ a(
-      b,
+      m,
       {
-        ...p,
-        ref: u,
+        ...n,
+        ref: s,
         className: t(),
         isDisabled: d,
         children: [
@@ -98,12 +109,12 @@ const x = v({
             "div",
             {
               className: y({
-                className: s ? "uy:sr-only" : ""
+                className: o ? "uy:sr-only" : ""
               }),
               "data-dd-privacy": "allow",
               children: [
-                /* @__PURE__ */ e("span", { className: c(), children: o }),
-                r && /* @__PURE__ */ e("span", { className: n(), children: r })
+                /* @__PURE__ */ e("span", { className: c(), children: u }),
+                r && /* @__PURE__ */ e("span", { className: p(), children: r })
               ]
             }
           )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.29.11",
+  "version": "2.31.0",
   "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.11",
+    "@payfit/unity-illustrations": "2.31.0",
     "@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.11",
-    "@payfit/unity-themes": "2.29.11",
+    "@payfit/unity-icons": "2.31.0",
+    "@payfit/unity-themes": "2.31.0",
     "@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.11",
-    "@payfit/unity-illustrations": "2.29.11",
-    "@payfit/unity-themes": "2.29.11",
+    "@payfit/unity-icons": "2.31.0",
+    "@payfit/unity-illustrations": "2.31.0",
+    "@payfit/unity-themes": "2.31.0",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "11.1.3",
     "@storybook/addon-docs": "10.3.5",