@payfit/unity-components 2.29.9 → 2.29.11

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/package.json

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