@payfit/unity-components 2.36.1 → 2.36.3

package/dist/esm/components/icon-button/IconButton.d.ts

@@ -1,30 +1,44 @@
 import { UnityIcon } from '@payfit/unity-icons';
 import { AriaRole, ButtonHTMLAttributes } from 'react';
 import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
-import { IconButtonGhost, IconButtonPrimary, IconButtonSecondary } from './IconButton.variants.js';
-interface IconButtonBaseProps {
+import { IconButtonBase, IconButtonFilled, IconButtonGhost, IconButtonOutlined } from './IconButton.variants.js';
+type IconButtonBaseProps = AriaButtonProps & IconButtonBase & {
     /** Label used to describe the action of the button */
     label: string;
     /** The icon to display inside the button */
     icon: UnityIcon;
-    /** The function to trigger when the button is clicked */
-    onClick?: () => void;
-    /** The function to trigger when the button is clicked or pressed in touch devices */
+    /**
+     * Press handler. Fires for mouse, touch, and keyboard activation.
+     * Prefer this over `onClick` for consistency with `Button`.
+     */
     onPress?: AriaButtonProps['onPress'];
+    /**
+     * The function to trigger when the button is clicked.
+     * Kept for backward compatibility — `onPress` takes precedence when both are provided.
+     */
+    onClick?: () => void;
     /** Override the icon role */
     iconRole?: AriaRole;
-    /** className to add to the button */
-    className?: string;
+    /** The button's appearance. */
+    variant: 'primary' | 'secondary' | 'ghost' | 'outlined';
+    /** The button's color. */
+    color?: IconButtonFilled['color'] | IconButtonOutlined['color'] | IconButtonGhost['color'];
+    /** The loading state of the button. */
+    isLoading?: boolean;
     /** The button type */
     type?: ButtonHTMLAttributes<HTMLButtonElement>['type'];
     id?: ButtonHTMLAttributes<HTMLButtonElement>['id'];
-}
-interface IconButtonVariantsPrimaryProps extends IconButtonBaseProps, Omit<IconButtonPrimary, 'variant' | 'color'>, Required<Pick<IconButtonPrimary, 'variant' | 'color'>> {
-}
-interface IconButtonVariantsSecondaryProps extends IconButtonBaseProps, Omit<IconButtonSecondary, 'variant' | 'color'>, Required<Pick<IconButtonSecondary, 'variant' | 'color'>> {
-}
-interface IconButtonVariantsGhostProps extends IconButtonBaseProps, Omit<IconButtonGhost, 'variant' | 'color'>, Required<Pick<IconButtonGhost, 'variant' | 'color'>> {
-}
-export type IconButtonProps = IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps;
-export declare const IconButton: import('react').ForwardRefExoticComponent<(IconButtonVariantsPrimaryProps | IconButtonVariantsSecondaryProps | IconButtonVariantsGhostProps) & import('react').RefAttributes<HTMLButtonElement>>;
+    className?: string;
+};
+type IconButtonUnionProps = (IconButtonBaseProps & {
+    variant: 'primary';
+} & IconButtonFilled) | (IconButtonBaseProps & {
+    variant: 'secondary';
+} & IconButtonOutlined) | (IconButtonBaseProps & {
+    variant: 'ghost';
+} & IconButtonGhost) | (IconButtonBaseProps & {
+    variant: 'outlined';
+} & IconButtonOutlined);
+export type IconButtonProps = Omit<IconButtonUnionProps, 'style'>;
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -1,71 +1,93 @@
-import { jsx as e, jsxs as y } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { Button as B } from "react-aria-components/Button";
-import h from "../../hooks/use-id.js";
-import { Icon as I } from "../icon/Icon.js";
-import { Spinner as N } from "../spinner/Spinner.js";
-import { Tooltip as x } from "../tooltip/Tooltip.js";
-import { iconButtonPrimary as P, iconButtonSecondary as j, iconButtonGhost as w } from "./IconButton.variants.js";
-const C = ({
-  variant: o,
-  color: r,
-  isLoading: n,
-  isDisabled: t
-}) => o === "primary" ? P({
-  variant: o,
-  color: r,
-  isDisabled: t,
-  isLoading: n
-}) : o === "secondary" ? j({
-  variant: o,
-  color: r,
-  isDisabled: t,
-  isLoading: n
-}) : w({
-  variant: o,
-  color: r,
-  isDisabled: t,
-  isLoading: n
-}), R = b(
-  (o, r) => {
-    const n = h(), { button: t, icon: s } = C(o), {
-      onClick: a,
-      onPress: m,
-      icon: d,
-      isLoading: l,
-      label: i,
-      isDisabled: u,
-      iconRole: f,
-      ...p
-    } = o, c = `icon-button-label-${n}`;
-    return /* @__PURE__ */ e(x, { title: i, children: /* @__PURE__ */ y(
-      B,
+import { jsx as n, jsxs as N } from "react/jsx-runtime";
+import { forwardRef as j, useMemo as v } from "react";
+import { useUnityTheme as z, uyMerge as o, cn as C } from "@payfit/unity-themes";
+import { Button as M } from "react-aria-components/Button";
+import P from "../../hooks/use-id.js";
+import { Icon as T } from "../icon/Icon.js";
+import { Spinner as A } from "../spinner/Spinner.js";
+import { Tooltip as F } from "../tooltip/Tooltip.js";
+import { iconButtonOutlined as c, iconButtonGhost as G, iconButtonFilled as p } from "./IconButton.variants.js";
+const O = j(
+  ({
+    variant: i,
+    color: t = "primary",
+    icon: u,
+    iconRole: d,
+    label: s,
+    isDisabled: a = !1,
+    isLoading: r = !1,
+    onClick: f,
+    onPress: h,
+    className: y,
+    ...b
+  }, B) => {
+    const I = P(), { theme: l } = z(), m = `icon-button-label-${I}`, w = v(() => {
+      const e = { isDisabled: a, isLoading: r };
+      switch (i) {
+        case "primary":
+          return o(
+            p({
+              ...e,
+              color: t
+            })
+          );
+        case "secondary":
+          return l === "rebrand" ? o(
+            p({ ...e, color: t === "inverted" ? "inverted.low" : "neutral" })
+          ) : o(
+            c({
+              ...e,
+              color: t
+            })
+          );
+        case "ghost":
+          return o(
+            G({
+              ...e,
+              color: t
+            })
+          );
+        case "outlined":
+          return o(
+            c({
+              ...e,
+              color: t
+            })
+          );
+      }
+    }, [i, t, a, r, l]), x = {
+      ...r && { "data-loading": r }
+    };
+    return /* @__PURE__ */ n(F, { title: s, children: /* @__PURE__ */ N(
+      M,
       {
-        ref: r,
+        ref: B,
         "data-dd-privacy": "allow",
-        ...p,
-        className: t({ class: o.className }),
-        onPress: m ?? a,
-        isDisabled: u || l,
-        "aria-label": i,
+        ...b,
+        className: C(w, y),
+        onPress: h ?? f,
+        isDisabled: a || r,
+        isPending: r,
+        "aria-label": s,
+        ...x,
         children: [
-          l ? /* @__PURE__ */ e(N, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ e(
-            I,
+          r ? /* @__PURE__ */ n(A, { size: "small", label: "Loading", color: "inherit" }) : /* @__PURE__ */ n(
+            T,
             {
-              role: f,
-              src: d,
-              className: s(),
-              "aria-labelledby": c,
-              color: "inherit"
+              role: d,
+              src: u,
+              size: 20,
+              color: "inherit",
+              "aria-labelledby": m
             }
           ),
-          /* @__PURE__ */ e("span", { id: c, className: "uy:sr-only", children: i })
+          /* @__PURE__ */ n("span", { id: m, className: "uy:sr-only", children: s })
         ]
       }
     ) });
   }
 );
-R.displayName = "IconButton";
+O.displayName = "IconButton";
 export {
-  R as IconButton
+  O as IconButton
 };

package/dist/esm/components/icon-button/IconButton.variants.d.ts

@@ -1,291 +1,191 @@
 import { VariantProps } from '@payfit/unity-themes';
-export declare const iconButtonPrimary: import('tailwind-variants').TVReturnType<{
-    variant: {
-        primary: string;
+declare const iconButtonBase: import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
     };
+    isLoading: {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>;
+export declare const iconButtonFilled: import('tailwind-variants').TVReturnType<{
     color: {
-        primary: string;
-        danger: string;
-        warning: string;
-        inverted: string;
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+        inverted: string[];
+        'inverted.low': string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
     };
 }, undefined, undefined, {
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, import('tailwind-variants').TVReturnType<{
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, undefined, {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, import('tailwind-variants').TVReturnType<{
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, undefined, unknown, unknown, undefined>>>;
-export declare const iconButtonSecondary: import('tailwind-variants').TVReturnType<{
-    variant: {
-        secondary: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export declare const iconButtonOutlined: import('tailwind-variants').TVReturnType<{
     color: {
-        primary: string;
-        inverted: string;
+        primary: string[];
+        inverted: string[];
     };
-}, undefined, undefined, {
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, import('tailwind-variants').TVReturnType<{
+        true: string;
+    };
+}, undefined, "uy:border uy:border-solid uy:bg-transparent", {
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, undefined, {
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, import('tailwind-variants').TVReturnType<{
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, undefined, unknown, unknown, undefined>>>;
-export declare const iconButtonGhost: import('tailwind-variants').TVReturnType<{
-    variant: {
-        ghost: string;
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
     };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export declare const iconButtonGhost: import('tailwind-variants').TVReturnType<{
     color: {
-        neutral: string;
-        'neutral.lowest': string;
-        primary: string;
-        danger: string;
-        warning: string;
-        inverted: string;
+        primary: string[];
+        warning: string[];
+        danger: string[];
+        neutral: string[];
+        'neutral.lowest': string[];
+        inverted: string[];
+    };
+    isDisabled: {
+        true: string;
+        false: string;
+    };
+    isLoading: {
+        true: string;
+        false: string;
     };
 }, undefined, undefined, {
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, import('tailwind-variants').TVReturnType<{
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, undefined, {
+        true: string;
+        false: string;
+    };
+}, undefined, string[], {
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, import('tailwind-variants').TVReturnType<{
+        true: string;
+        false: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
     isDisabled: {
-        true: {
-            button: string;
-        };
-        false: {
-            button: string;
-        };
+        true: string;
+        false: string;
     };
     isLoading: {
-        true: {
-            button: string;
-            icon: string;
-        };
-        false: {
-            button: string;
-        };
-    };
-}, {
-    button: string[];
-    icon: string;
-}, undefined, unknown, unknown, undefined>>>;
-export type IconButtonPrimary = VariantProps<typeof iconButtonPrimary>;
-export type IconButtonSecondary = VariantProps<typeof iconButtonSecondary>;
+        true: string;
+        false: string;
+    };
+}, undefined, string[], unknown, unknown, undefined>>>;
+export type IconButtonBase = VariantProps<typeof iconButtonBase>;
+export type IconButtonFilled = VariantProps<typeof iconButtonFilled>;
+export type IconButtonOutlined = VariantProps<typeof iconButtonOutlined>;
 export type IconButtonGhost = VariantProps<typeof iconButtonGhost>;
+export {};

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

@@ -1,395 +1,177 @@
 import { uyTv as e } from "@payfit/unity-themes";
 const t = e({
-  slots: {
-    button: [
-      "uy:group",
-      "uy:w-5.5 uy:min-w-5.5 uy:h-5.5 uy:sm:w-500 uy:sm:min-w-500 uy:sm:h-500 uy:min-h-500 uy:flex uy:justify-center uy:items-center uy:rounded-100 uy:sm:rounded-75 uy:cursor-pointer",
-      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring",
-      "uy:transition-colors"
-    ],
-    icon: "uy:w-250 uy:h-250"
-  },
+  base: [
+    "uy:group",
+    "uy:w-5.5 uy:min-w-5.5 uy:h-5.5 uy:sm:w-500 uy:sm:min-w-500 uy:sm:h-500 uy:min-h-500",
+    "uy:inline-flex uy:justify-center uy:items-center",
+    "uy:rounded-100 uy:sm:rounded-75 uy:cursor-pointer",
+    "uy:transition-colors",
+    'uy:data-[focus-visible="true"]:outline-2 uy:data-[focus-visible="true"]:outline-solid uy:data-[focus-visible="true"]:outline-offset-2 uy:data-[focus-visible="true"]:outline-utility-focus-ring'
+  ],
   variants: {
     isDisabled: {
-      true: {
-        button: "uy:cursor-not-allowed"
-      },
-      false: {
-        button: ""
-      }
+      true: "uy:disabled:cursor-not-allowed",
+      false: ""
     },
     isLoading: {
-      true: {
-        button: "uy:cursor-progress uy:text-content-neutral-disabled",
-        icon: ""
-      },
-      false: {
-        button: ""
-      }
+      true: "uy:data-[loading]:cursor-progress uy:data-[loading]:text-content-neutral-disabled",
+      false: ""
     }
   },
   defaultVariants: {
     isDisabled: !1,
     isLoading: !1
   }
-}), a = e({
+}), r = e({
   extend: t,
   variants: {
-    variant: {
-      primary: ""
-    },
     color: {
-      primary: "",
-      danger: "",
-      warning: "",
-      inverted: "uy:focus-visible:outline-utility-inverted-focus-ring"
-    }
-  },
-  compoundVariants: [
-    {
-      variant: "primary",
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy:bg-surface-primary-enabled",
-          'uy:data-[hovered="true"]:bg-surface-primary-hover',
-          "uy:active:bg-surface-primary-active",
-          "uy:focus-visible:bg-surface-primary-focus",
-          "uy:data-[pressed]:bg-surface-primary-pressed"
-        ],
-        icon: [
-          "uy:text-content-inverted-enabled",
-          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
-          "uy:active:text-content-inverted-active",
-          "uy:focus-visible:text-content-inverted-focus",
-          "uy:data-[pressed]:text-content-inverted-pressed"
-        ]
-      }
-    },
-    {
-      variant: "primary",
-      color: "danger",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy:bg-surface-danger-enabled",
-          'uy:data-[hovered="true"]:bg-surface-danger-hover',
-          "uy:active:bg-surface-danger-active",
-          "uy:focus:bg-surface-danger-focus",
-          "uy:data-[pressed]:bg-surface-danger-pressed"
-        ],
-        icon: [
-          "uy:text-content-inverted-enabled",
-          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
-          "uy:active:text-content-inverted-active",
-          "uy:focus:text-content-inverted-focus",
-          "uy:data-[pressed]:text-content-inverted-pressed"
-        ]
-      }
+      primary: [
+        "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"
+      ],
+      warning: [
+        "uy:bg-surface-warning-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-warning-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-warning-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-warning-pressed uy:data-[pressed]:text-content-neutral-pressed"
+      ],
+      danger: [
+        "uy:bg-surface-danger-enabled uy:theme-legacy:text-content-inverted-enabled uy:theme-rebrand:text-content-inverted",
+        'uy:data-[hovered="true"]:bg-surface-danger-hover uy:theme-legacy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-danger-active uy:theme-legacy:active:text-content-inverted",
+        "uy:data-[pressed]:bg-surface-danger-pressed uy:theme-legacy:data-[pressed]:text-content-inverted"
+      ],
+      neutral: [
+        "uy:bg-surface-neutral-low-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-low-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-low-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-neutral-low-pressed uy:data-[pressed]:text-content-neutral-pressed"
+      ],
+      inverted: [
+        "uy:bg-surface-neutral-enabled uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed]:bg-surface-neutral-active uy:data-[pressed]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:text-content-neutral-focus uy:data-[focus-visible]:bg-surface-neutral-focus"
+      ],
+      "inverted.low": [
+        "uy:bg-surface-inverted-low-enabled uy:text-content-inverted-enabled",
+        'uy:data-[hovered="true"]:bg-surface-inverted-low-hover uy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-inverted-low-active uy:active:text-content-inverted-active",
+        'uy:data-[pressed="true"]:bg-surface-inverted-low-pressed uy:data-[pressed="true"]:text-content-inverted-pressed',
+        'uy:data-[focus-visible="true"]:outline-utility-inverted-focus-ring uy:data-[focus-visible="true"]:text-content-inverted-focus uy:data-[focus-visible="true"]:bg-surface-inverted-low-focus'
+      ]
     },
-    {
-      variant: "primary",
-      color: "warning",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy:bg-surface-warning-enabled",
-          'uy:data-[hovered="true"]:bg-surface-warning-hover',
-          "uy:active:bg-surface-warning-pressed",
-          "uy:focus-visible:bg-surface-warning-focus",
-          "uy:data-[pressed]:bg-surface-warning-pressed"
-        ],
-        icon: [
-          "uy:text-content-neutral-enabled",
-          'uy:group-data-[hovered="true"]:text-content-neutral-hover',
-          "uy:active:text-content-neutral-pressed",
-          "uy:focus-visible:text-content-neutral-focus",
-          "uy:data-[pressed]:text-content-neutral-pressed"
-        ]
-      }
-    },
-    {
-      variant: "primary",
-      color: "inverted",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy:bg-surface-neutral-enabled",
-          'uy:data-[hovered="true"]:bg-surface-neutral-hover',
-          "uy:active:bg-surface-neutral-pressed",
-          "uy:focus-visible:bg-surface-neutral-focus",
-          "uy:data-[pressed]:bg-surface-neutral-pressed"
-        ],
-        icon: [
-          "uy:text-content-neutral-enabled",
-          'uy:group-data-[hovered="true"]:text-content-neutral-hover',
-          "uy:active:text-content-neutral-pressed",
-          "uy:focus-visible:text-content-neutral-focus",
-          "uy:data-[pressed]:text-content-neutral-pressed"
-        ]
-      }
-    },
-    {
-      variant: "primary",
-      color: "primary",
-      isDisabled: !0,
-      isLoading: !1,
-      class: {
-        button: "uy:bg-surface-neutral-disabled",
-        icon: "uy:text-content-neutral-disabled"
-      }
+    isDisabled: {
+      true: "uy:disabled:bg-surface-neutral-disabled uy:disabled:text-content-neutral-disabled",
+      false: ""
     },
-    {
-      variant: "primary",
-      color: ["primary", "danger", "warning", "inverted"],
-      isLoading: !0,
-      isDisabled: !1,
-      class: {
-        button: "uy:bg-surface-neutral-disabled",
-        icon: "uy:text-content-neutral-disabled"
-      }
+    isLoading: {
+      true: "uy:data-[loading]:bg-surface-neutral-disabled uy:data-[loading]:text-content-neutral-disabled",
+      false: ""
     }
-  ]
-}), n = e({
+  }
+}), u = e({
   extend: t,
+  base: "uy:border uy:border-solid uy:bg-transparent",
   variants: {
-    variant: {
-      secondary: { button: "uy:focus-visible:outline-offset-4" }
-    },
     color: {
-      primary: "",
-      inverted: "uy:focus-visible:outline-utility-inverted-focus-ring"
-    }
-  },
-  compoundVariants: [
-    {
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy:border uy:border-solid uy:border-border-neutral-high-enabled",
-          'uy:data-[hovered="true"]:border-border-neutral-high-hover',
-          "uy:active:border-border-neutral-high-active",
-          "uy:data-[pressed]:border-border-neutral-high-pressed"
-        ],
-        icon: [
-          "uy:text-content-neutral-low-enabled",
-          'uy:group-data-[hovered="true"]:text-content-low-neutral-hover',
-          "uy:active:text-content-neutral-low-active",
-          "uy:data-[pressed]:text-content-neutral-low-pressed",
-          "uy:focus-visible:text-content-neutral-low-focus"
-        ]
-      }
-    },
-    {
-      color: "primary",
-      isLoading: !0,
-      isDisabled: !1,
-      class: {
-        button: [
-          "uy:border uy:border-solid uy:border-border-neutral-disabled",
-          "uy:focus-visible:border-border-primary-focus"
-        ],
-        icon: ["uy:text-content-neutral-disabled"]
-      }
+      primary: [
+        "uy:text-content-neutral-enabled uy:border-border-neutral-high-enabled",
+        'uy:data-[hovered="true"]:text-content-neutral-hover uy:data-[hovered="true"]:border-border-neutral-high-hover',
+        'uy:theme-legacy:data-[pressed="true"]:text-content-neutral-high-pressed uy:theme-legacy:data-[pressed="true"]:border-border-neutral-high-pressed',
+        'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
+        'uy:data-[focus-visible="true"]:border-border-neutral-high-focus uy:data-[focus-visible="true"]:text-content-neutral-focus'
+      ],
+      inverted: [
+        "uy:text-content-inverted-enabled uy:border-border-inverted-enabled",
+        'uy:theme-legacy:data-[pressed="true"]:text-content-inverted-pressed uy:theme-legacy:data-[pressed="true"]:border-border-inverted-pressed',
+        'uy:theme-rebrand:data-[pressed="true"]:text-content-neutral-pressed uy:theme-rebrand:data-[pressed="true"]:bg-surface-neutral-low-pressed uy:theme-rebrand:data-[pressed="true"]:border-surface-neutral-low-pressed',
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring"
+      ]
     },
-    {
-      color: "primary",
-      isLoading: !1,
-      isDisabled: !0,
-      class: {
-        button: [
-          "uy:border uy:border-solid uy:border-border-neutral-disabled",
-          "uy:focus-visible:border-border-primary-focus"
-        ],
-        icon: ["uy:text-content-neutral-disabled"]
-      }
-    },
-    {
-      color: "inverted",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy:border uy:border-solid uy:border-border-inverted",
-          'uy:data-[hovered="true"]:border-border-inverted-hover',
-          "uy:data-[pressed]:border-border-inverted-pressed",
-          "uy:active:border-border-inverted-active",
-          "uy:focus-visible:border-border-inverted-focus uy:focus-visible:outline-utility-inverted-focus-ring"
-        ],
-        icon: [
-          "uy:text-content-inverted",
-          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
-          "uy:data-[pressed]:text-content-inverted-pressed",
-          "uy:active:text-content-inverted-active",
-          "uy:focus-visible:text-content-inverted-focus"
-        ]
-      }
+    isDisabled: {
+      true: "uy:disabled:text-content-neutral-disabled uy:disabled:border-border-neutral-disabled uy:data-[disabled]:border-border-neutral-disabled",
+      false: ""
     },
-    {
-      color: "inverted",
-      isLoading: !1,
-      isDisabled: !0,
-      class: {
-        button: [
-          "uy:border uy:border-solid uy:border-border-inverted-disabled",
-          "uy:focus-visible:border-border-primary-focus"
-        ],
-        icon: ["uy:text-content-inverted-disabled"]
-      }
+    isLoading: {
+      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:border-border-neutral-disabled"
     }
-  ]
-}), s = e({
+  }
+}), n = e({
   extend: t,
   variants: {
-    variant: {
-      ghost: ""
-    },
     color: {
-      neutral: "",
-      "neutral.lowest": "",
-      primary: "",
-      danger: "",
-      warning: "",
-      inverted: ""
+      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"
+      ],
+      warning: [
+        "uy:bg-transparent uy:text-content-warning-enabled",
+        'uy:data-[hovered="true"]:bg-surface-warning-lowest-hover uy:data-[hovered="true"]:text-content-warning-hover',
+        "uy:active:bg-surface-warning-lowest-active uy:active:text-content-warning-active",
+        "uy:data-[pressed=true]:bg-surface-warning-lowest-pressed uy:data-[pressed=true]:text-content-warning-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      danger: [
+        "uy:bg-transparent uy:text-content-danger-enabled",
+        'uy:data-[hovered="true"]:bg-surface-danger-lowest-hover uy:data-[hovered="true"]:text-content-danger-hover',
+        "uy:active:bg-surface-danger-lowest-active uy:active:text-content-danger-active",
+        "uy:data-[pressed=true]:bg-surface-danger-lowest-pressed uy:data-[pressed=true]:text-content-danger-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      neutral: [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      "neutral.lowest": [
+        "uy:bg-transparent uy:text-content-neutral-enabled",
+        'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover uy:data-[hovered="true"]:text-content-neutral-hover',
+        "uy:active:bg-surface-neutral-lowest-active uy:active:text-content-neutral-active",
+        "uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed uy:data-[pressed=true]:text-content-neutral-pressed",
+        "uy:data-[focus-visible]:bg-transparent"
+      ],
+      inverted: [
+        "uy:bg-transparent uy:text-content-inverted-enabled",
+        'uy:data-[hovered="true"]:bg-surface-inverted-hover uy:data-[hovered="true"]:text-content-inverted-hover',
+        "uy:active:bg-surface-inverted-active uy:active:text-content-inverted-active",
+        "uy:data-[pressed=true]:bg-surface-inverted-pressed uy:data-[pressed=true]:text-content-inverted-pressed",
+        "uy:data-[focus-visible]:outline-utility-inverted-focus-ring uy:data-[focus-visible]:bg-transparent"
+      ]
+    },
+    isDisabled: {
+      true: "uy:disabled:text-content-neutral-disabled uy:disabled:bg-transparent",
+      false: ""
+    },
+    isLoading: {
+      true: "uy:data-[loading]:text-content-neutral-disabled uy:data-[loading]:bg-transparent",
+      false: ""
     }
   },
   compoundVariants: [
     {
-      color: "inverted",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy:bg-transparent",
-          'uy:data-[hovered="true"]:bg-surface-inverted-hover',
-          "uy:active:bg-surface-inverted-active",
-          "uy:data-[pressed=true]:bg-surface-inverted-pressed",
-          "uy:focus-visible:outline-utility-inverted-focus-ring",
-          "uy:focus-visible:bg-transparent"
-        ],
-        icon: [
-          "uy:text-content-inverted",
-          'uy:group-data-[hovered="true"]:text-content-inverted-hover',
-          "uy:data-[pressed]:text-content-inverted-pressed",
-          "uy:active:text-content-inverted-active",
-          "uy:focus-visible:text-content-inverted-focus"
-        ]
-      }
-    },
-    {
-      color: "neutral",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          'uy:data-[hovered="true"]:bg-surface-neutral-hover',
-          "uy:data-[pressed]:bg-surface-neutral-pressed",
-          "uy:active:bg-surface-neutral-active",
-          "uy:data-[pressed=true]:bg-surface-neutral-pressed"
-        ],
-        icon: ["uy:text-content-neutral-low"]
-      }
-    },
-    {
-      color: "neutral.lowest",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          'uy:data-[hovered="true"]:bg-surface-neutral-lowest-hover',
-          "uy:active:bg-surface-neutral-lowest-active",
-          "uy:data-[pressed=true]:bg-surface-neutral-lowest-pressed"
-        ],
-        icon: ["uy:text-content-neutral-low"]
-      }
-    },
-    {
-      color: "primary",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          "uy:text-content-primary-enabled",
-          'uy:data-[hovered="true"]:bg-surface-primary-lowest-hover',
-          "uy:data-[pressed]:bg-surface-primary-lowest-pressed",
-          "uy:active:bg-surface-primary-lowest-active"
-        ],
-        icon: [
-          "uy:text-content-primary",
-          'uy:group-data-[hovered="true"]:text-content-primary',
-          "uy:data-[pressed]:text-content-primary",
-          "uy:focus-visible:text-content-primary",
-          "uy:active:text-content-primary"
-        ]
-      }
-    },
-    {
-      color: "danger",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          'uy:data-[hovered="true"]:bg-surface-danger-lowest-hover',
-          "uy:data-[pressed]:bg-surface-danger-lowest-pressed",
-          "uy:active:bg-surface-danger-lowest-active"
-        ],
-        icon: [
-          "uy:text-content-danger",
-          'uy:group-data-[hovered="true"]:text-content-danger',
-          "uy:data-[pressed]:text-content-danger",
-          "uy:focus-visible:text-content-danger",
-          "uy:active:text-content-danger"
-        ]
-      }
-    },
-    {
-      color: "warning",
-      isDisabled: !1,
-      isLoading: !1,
-      class: {
-        button: [
-          'uy:data-[hovered="true"]:bg-surface-warning-lowest-hover',
-          "uy:data-[pressed]:bg-surface-warning-lowest-pressed",
-          "uy:active:bg-surface-warning-lowest-active"
-        ],
-        icon: [
-          "uy:text-content-warning-high",
-          'uy:group-data-[hovered="true"]:text-content-warning-high',
-          "uy:data-[pressed]:text-content-warning-high",
-          "uy:focus-visible:text-content-warning-high",
-          "uy:active:text-content-warning-high"
-        ]
-      }
-    },
-    {
-      color: ["primary", "neutral", "danger", "warning", "inverted"],
       isDisabled: !0,
-      isLoading: !1,
-      class: {
-        button: "",
-        icon: "uy:text-content-neutral-disabled"
-      }
+      color: "inverted",
+      className: ["uy:disabled:text-content-inverted-disabled"]
     },
     {
-      color: ["primary", "neutral", "danger", "warning", "inverted"],
-      isDisabled: !1,
       isLoading: !0,
-      class: {
-        button: "",
-        icon: "uy:text-content-neutral-disabled"
-      }
+      color: "inverted",
+      className: ["uy:data-[loading]:text-content-inverted-disabled"]
     }
   ]
 });
 export {
-  s as iconButtonGhost,
-  a as iconButtonPrimary,
-  n as iconButtonSecondary
+  r as iconButtonFilled,
+  n as iconButtonGhost,
+  u as iconButtonOutlined
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.36.1",
+  "version": "2.36.3",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -43,7 +43,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-illustrations": "2.36.1",
+    "@payfit/unity-illustrations": "2.36.3",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.28.0",
@@ -75,8 +75,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.36.1",
-    "@payfit/unity-themes": "2.36.1",
+    "@payfit/unity-icons": "2.36.3",
+    "@payfit/unity-themes": "2.36.3",
     "@storybook/react-vite": "^10.3.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -90,9 +90,9 @@
     "@figma/code-connect": "1.4.3",
     "@hookform/devtools": "4.4.0",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-icons": "2.36.1",
-    "@payfit/unity-illustrations": "2.36.1",
-    "@payfit/unity-themes": "2.36.1",
+    "@payfit/unity-icons": "2.36.3",
+    "@payfit/unity-illustrations": "2.36.3",
+    "@payfit/unity-themes": "2.36.3",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "11.1.3",
     "@storybook/addon-docs": "10.3.5",
@@ -104,7 +104,7 @@
     "@tanstack/intent": "0.0.40",
     "@tanstack/react-devtools": "0.10.1",
     "@tanstack/react-form-devtools": "0.2.22",
-    "@tanstack/react-query": "5.99.0",
+    "@tanstack/react-query": "5.100.10",
     "@tanstack/react-router": "1.168.23",
     "@tanstack/react-router-devtools": "1.166.13",
     "@testing-library/dom": "10.4.0",