@payfit/unity-components 2.31.0 → 2.31.2

package/dist/esm/components/nav/parts/NavGroup.js

@@ -1,5 +1,5 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import o, { useState as j, useCallback as B, useMemo as D } from "react";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
+import s, { useState as j, useCallback as B, useMemo as D } from "react";
 import { uyTv as S } from "@payfit/unity-themes";
 import { Button as _ } from "react-aria-components/Button";
 import $ from "../../../hooks/use-id.js";
@@ -8,6 +8,7 @@ import { navItemBase as z } from "./RawNavItem.js";
 const H = S({
   extend: z,
   slots: {
+    base: "uy:theme-rebrand:border-1 uy:theme-rebrand:border-solid",
     caret: "uy:transition-transform uy:duration-150 uy:delay-25 uy:ease-linear motion-reduce:transition-none",
     contentWrapper: "uy:transition-[max-height] uy:duration-200 uy:ease-linear motion-reduce:transition-none",
     content: "uy:list-none uy:flex uy:flex-col uy:gap-50 uy:transition-opacity uy:duration-150 uy:delay-25 uy:ease-linear"
@@ -15,6 +16,14 @@ const H = S({
   variants: {
     expanded: {
       true: {
+        base: [
+          "uy:theme-legacy:bg-surface-neutral-low-active",
+          "uy:theme-rebrand:bg-surface-neutral uy:theme-rebrand:border-border-neutral uy:theme-rebrand:shadow-100"
+        ],
+        prefix: [
+          "uy:theme-legacy:text-content-neutral",
+          "uy:theme-rebrand:text-content-primary"
+        ],
         caret: "uy:rotate-180",
         contentWrapper: "uy:max-h-[1000px] uy:overflow-visible",
         label: "uy:typography-body-strong",
@@ -24,30 +33,31 @@ const H = S({
         caret: "uy:rotate-0",
         contentWrapper: "uy:max-h-0 uy:overflow-hidden",
         content: "uy:opacity-0 uy:invisible uy:pointer-events-none",
-        label: "uy:typography-body"
+        label: "uy:typography-body",
+        base: "uy:theme-rebrand:border-transparent"
       }
     }
   }
 });
 function M({
-  children: d,
-  label: p,
-  prefix: l,
-  suffix: y,
-  defaultExpanded: f = !1,
-  isExpanded: r,
+  children: m,
+  label: y,
+  prefix: o,
+  suffix: p,
+  defaultExpanded: b = !1,
+  isExpanded: l,
   onToggle: i,
-  ...N
+  ...f
 }) {
-  const u = $(), [x, b] = j(f), n = r !== void 0, a = n ? r : x, C = B(() => {
-    n || b((e) => !e), i?.(!a);
-  }, [n, a, i]), h = o.Children.map(d, (e) => o.isValidElement(e) ? o.cloneElement(e, { isDisabled: !a, level: 1 }) : e), c = `${u}-toggle`, m = `${u}-content`, {
+  const u = $(), [x, h] = j(b), n = l !== void 0, a = n ? l : x, N = B(() => {
+    n || h((e) => !e), i?.(!a);
+  }, [n, a, i]), C = s.Children.map(m, (e) => s.isValidElement(e) ? s.cloneElement(e, { isDisabled: !a, level: 1 }) : e), c = `${u}-toggle`, d = `${u}-content`, {
     baseClassName: v,
     prefixClassName: g,
-    labelClassName: I,
-    suffixClassName: W,
-    contentClassName: E,
-    contentWrapperClassName: w,
+    labelClassName: w,
+    suffixClassName: I,
+    contentClassName: W,
+    contentWrapperClassName: E,
     caretClassName: G
   } = D(() => {
     const e = H({ level: 0, expanded: a });
@@ -61,21 +71,21 @@ function M({
       caretClassName: e.caret()
     };
   }, [a]);
-  return /* @__PURE__ */ s("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
-    /* @__PURE__ */ s(
+  return /* @__PURE__ */ r("li", { className: "uy:flex uy:flex-col uy:gap-50", children: [
+    /* @__PURE__ */ r(
       _,
       {
         id: c,
         className: v,
-        onPress: C,
+        onPress: N,
         "aria-expanded": a,
-        "aria-controls": m,
-        ...N,
+        "aria-controls": d,
+        ...f,
         children: [
-          l && /* @__PURE__ */ t("span", { className: g, children: l({ isExpanded: a }) }),
-          /* @__PURE__ */ t("span", { className: I, children: p }),
-          /* @__PURE__ */ s("span", { className: W, role: "presentation", children: [
-            y,
+          o && /* @__PURE__ */ t("span", { className: g, children: o({ isExpanded: a }) }),
+          /* @__PURE__ */ t("span", { className: w, children: y }),
+          /* @__PURE__ */ r("span", { className: I, role: "presentation", children: [
+            p,
             /* @__PURE__ */ t(
               k,
               {
@@ -93,16 +103,16 @@ function M({
     /* @__PURE__ */ t(
       "div",
       {
-        className: w,
+        className: E,
         style: { maxHeight: a ? 1e3 : 0 },
         children: /* @__PURE__ */ t(
           "ul",
           {
-            id: m,
-            className: E,
+            id: d,
+            className: W,
             "aria-labelledby": c,
             "aria-hidden": !a,
-            children: h
+            children: C
           }
         )
       }

package/dist/esm/components/nav/parts/RawNavItem.d.ts

@@ -57,8 +57,8 @@ export declare const navItemBase: import('tailwind-variants').TVReturnType<{
 declare const navItem: import('tailwind-variants').TVReturnType<{
     isActive: {
         true: {
-            base: string;
-            prefix: string;
+            base: string[];
+            prefix: string[];
             label: string;
         };
         false: {
@@ -160,8 +160,8 @@ export type NavItemProps = Pick<VariantProps<typeof navItem>, 'level'> & PropsWi
 export declare const RawNavItem: import('react').ForwardRefExoticComponent<Pick<VariantProps<import('tailwind-variants').TVReturnType<{
     isActive: {
         true: {
-            base: string;
-            prefix: string;
+            base: string[];
+            prefix: string[];
             label: string;
         };
         false: {

package/dist/esm/components/nav/parts/RawNavItem.js

@@ -1,17 +1,21 @@
-import { jsx as u, jsxs as h } from "react/jsx-runtime";
+import { jsx as u, jsxs as N } from "react/jsx-runtime";
 import { forwardRef as C, useMemo as I } from "react";
-import { uyTv as i, uyMerge as j } from "@payfit/unity-themes";
+import { uyTv as y, uyMerge as j } from "@payfit/unity-themes";
 import { Button as R } from "react-aria-components/Button";
 import { Link as A } from "react-aria-components/Link";
 import { useRouter as k } from "../../../providers/router/RouterProvider.js";
-const B = i({
+const B = y({
   slots: {
     base: [
-      "uy:group uy:cursor-pointer uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:rounded-75 uy:outline-0 uy:transition-all",
-      "uy:hover:bg-surface-neutral-low-hover uy:active:bg-surface-neutral-low-active uy:data-[pressed]:bg-surface-neutral-low-pressed",
+      "uy:group uy:cursor-pointer uy:grid uy:w-full uy:grid-cols-[auto_1fr_auto] uy:items-center uy:py-100 uy:px-150 uy:gap-100 uy:theme-legacy:rounded-75 uy:theme-rebrand:rounded-100 uy:outline-0 uy:transition-all uy:min-h-5.5 uy:md:min-h-auto",
+      "uy:bg-transparent uy:theme-rebrand:border-1 uy:theme-rebrand:border-solid uy:theme-rebrand:border-transparent",
+      "uy:theme-legacy:data-[hovered]:bg-surface-neutral-low-hover",
+      "uy:theme-rebrand:data-[hovered]:bg-surface-neutral-lowest-hover uy:theme-rebrand:data-[hovered]:border-border-neutral-lowest-hover",
+      "uy:theme-legacy:active:bg-surface-neutral-low-active uy:theme-legacy:data-[pressed]:bg-surface-neutral-low-pressed",
+      "uy:theme-rebrand:active:bg-surface-neutral-lowest-active uy:theme-rebrand:active:border-border-neutral-lowest-pressed uy:theme-rebrand:data-[pressed]:bg-surface-neutral-lowest-pressed uy:theme-rebrand:data-[pressed]:border-border-neutral-lowest-pressed",
       "uy:focus:outline-0 uy:data-[focus-visible]:outline-none uy:data-[focus-visible]:ring-2 uy:data-[focus-visible]:ring-utility-focus-ring uy:data-[focus-visible]:ring-offset-2"
     ],
-    prefix: "uy:p-25 uy:empty:hidden uy:text-content-neutral-low",
+    prefix: "uy:theme-legacy:p-25 uy:theme-rebrand:px-25 uy:empty:hidden uy:text-content-neutral-low",
     suffix: "uy:flex uy:gap-100 uy:items-center uy:text-content-neutral-low uy:justify-self-end uy:text-right uy:empty:hidden",
     label: [
       "uy:flex-1 uy:basis-full uy:text-left uy:truncate uy:overflow-hidden uy:whitespace-break-spaces uy:typography-body uy:text-content-neutral"
@@ -30,13 +34,19 @@ const B = i({
       false: ""
     }
   }
-}), M = i({
+}), M = y({
   extend: B,
   variants: {
     isActive: {
       true: {
-        base: "uy:bg-surface-neutral-low-active",
-        prefix: "uy:text-content-neutral",
+        base: [
+          "uy:theme-legacy:bg-surface-neutral-low-active uy:theme-rebrand:data-[level=1]:bg-surface-neutral-lowest-active",
+          "uy:theme-rebrand:data-[level=0]:bg-surface-neutral uy:theme-rebrand:data-[level=0]:border-1 uy:theme-rebrand:data-[level=0]:border-solid uy:theme-rebrand:data-[level=0]:border-border-neutral uy:theme-rebrand:data-[level=0]:shadow-100"
+        ],
+        prefix: [
+          "uy:theme-legacy:text-content-neutral",
+          "uy:theme-rebrand:text-content-primary"
+        ],
         label: "uy:typography-body-strong"
       },
       false: {
@@ -48,53 +58,54 @@ const B = i({
   }
 }), _ = C(
   ({
-    children: y,
-    level: r = 0,
+    children: d,
+    level: s = 0,
     prefix: l,
     suffix: n,
-    onPress: c,
+    onPress: i,
     href: t,
-    isCurrent: f,
-    isDisabled: s = !1,
-    isExact: p = !1,
-    ...m
-  }, d) => {
-    const o = k(), b = t ? A : R, e = o && t ? o.isActive(t, p) : f, {
-      rawNavItemClassName: v,
-      labelClassName: x,
+    isCurrent: c,
+    isDisabled: r = !1,
+    isExact: m = !1,
+    ...b
+  }, p) => {
+    const o = k(), f = t ? A : R, e = o && t ? o.isActive(t, m) : c, {
+      rawNavItemClassName: h,
+      labelClassName: v,
       prefixClassName: g,
-      suffixClassName: N
+      suffixClassName: x
     } = I(() => {
-      const a = M({ level: r, isActive: e, isDisabled: s });
+      const a = M({ level: s, isActive: e, isDisabled: r });
       return {
         rawNavItemClassName: j(a.base(), a.label()),
         prefixClassName: a.prefix(),
         suffixClassName: a.suffix(),
         labelClassName: a.label()
       };
-    }, [e, s, r]), w = Object.assign(
+    }, [e, r, s]), w = Object.assign(
       {},
       e !== void 0 && {
         "data-current": e,
         "aria-current": e ? "page" : void 0
       },
-      !t && { tabIndex: s ? -1 : void 0 }
+      !t && { tabIndex: r ? -1 : void 0 }
     );
-    return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ h(
-      b,
+    return /* @__PURE__ */ u("li", { children: /* @__PURE__ */ N(
+      f,
       {
         ...w,
-        ...m,
-        ref: d,
-        className: v,
+        ...b,
+        ref: p,
+        className: h,
         href: t,
-        onPress: c,
-        isDisabled: s,
-        "data-level": r,
+        onPress: i,
+        isDisabled: r,
+        "data-level": s,
+        "data-selected": e,
         children: [
           l && /* @__PURE__ */ u("span", { className: g, children: l({ isCurrent: e ?? !1 }) }),
-          /* @__PURE__ */ u("span", { className: x, children: y }),
-          n && /* @__PURE__ */ u("span", { className: N, children: n })
+          /* @__PURE__ */ u("span", { className: v, children: d }),
+          n && /* @__PURE__ */ u("span", { className: x, children: n })
         ]
       }
     ) });

package/dist/esm/components/radio-button-group/parts/RadioButton.d.ts

@@ -1,6 +1,8 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { RadioProps } from 'react-aria-components/RadioGroup';
+export { RadioIndicator } from './RadioIndicator.js';
+export type { RadioIndicatorProps, RadioState } from './RadioIndicator.js';
 export declare const radioButton: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -1,13 +1,12 @@
-import { jsxs as u, jsx as o, Fragment as x } from "react/jsx-runtime";
-import { forwardRef as g, useContext as v, useMemo as l } from "react";
-import { uyTv as R } from "@payfit/unity-themes";
-import { RadioGroupStateContext as S, Radio as h } from "react-aria-components/RadioGroup";
-import { Flex as w } from "../../flex/Flex.js";
-import { Text as N } from "../../text/Text.js";
-import B from "./radio-input-selected.svg.js";
-import O from "./radio-input-unselected.svg.js";
-import { RadioButtonHelper as F } from "./RadioButtonHelper.js";
-const j = R({
+import { jsxs as a, jsx as t, Fragment as f } from "react/jsx-runtime";
+import { forwardRef as x, useContext as g } from "react";
+import { uyTv as h, useUnityTheme as R } from "@payfit/unity-themes";
+import { RadioGroupStateContext as w, Radio as N } from "react-aria-components/RadioGroup";
+import { Flex as v } from "../../flex/Flex.js";
+import { Text as B } from "../../text/Text.js";
+import { RadioButtonHelper as S } from "./RadioButtonHelper.js";
+import { RadioIndicator as j } from "./RadioIndicator.js";
+const C = h({
   slots: {
     container: [
       "uy:group uy:inline-flex uy:flex-col uy:gap-50",
@@ -30,52 +29,39 @@ const j = R({
       "uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
     ]
   }
-}), C = g(
-  ({ children: i, value: n, isDisabled: e, helperText: t, ...s }, y) => {
-    const { base: c, label: m, container: b, radio: a } = j(), r = v(S), p = l(() => r?.isReadOnly ? {
-      "--radio-fill-color": "var(--uy-color-border-form-read-only)",
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    } : {
-      "--radio-fill-color": "var(--uy-color-surface-primary-active)",
-      "--radio-border-color": "var(--uy-color-border-form-active)"
-    }, [r?.isReadOnly]), f = l(() => r?.isReadOnly || r?.isDisabled || e ? {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    } : {
-      "--radio-border-color": "var(--uy-color-border-form-enabled)"
-    }, [e, r?.isDisabled, r?.isReadOnly]);
-    return /* @__PURE__ */ u(w, { direction: "col", gap: "50", className: b(), children: [
-      /* @__PURE__ */ o(
-        h,
+}), F = x(
+  ({ children: u, value: d, isDisabled: o, helperText: r, ...n }, i) => {
+    const { base: l, label: s, container: y, radio: m } = C(), e = g(w), { theme: c } = R(), p = e?.isReadOnly ? "readonly" : e?.isDisabled || o ? "disabled" : e?.isInvalid ? "invalid" : "enabled";
+    return /* @__PURE__ */ a(v, { direction: "col", gap: "50", className: y(), children: [
+      /* @__PURE__ */ t(
+        N,
         {
-          ...s,
-          value: n,
-          isDisabled: e,
-          className: ({ isFocusVisible: d }) => c(),
-          ref: y,
-          children: ({ isSelected: d }) => /* @__PURE__ */ u(x, { children: [
-            d ? /* @__PURE__ */ o(
-              B,
+          ...n,
+          value: d,
+          isDisabled: o,
+          className: () => l(),
+          ref: i,
+          children: ({ isSelected: b }) => /* @__PURE__ */ a(f, { children: [
+            /* @__PURE__ */ t(
+              j,
               {
-                style: p,
-                className: a()
-              }
-            ) : /* @__PURE__ */ o(
-              O,
-              {
-                style: f,
-                className: a()
+                isSelected: b,
+                state: p,
+                theme: c,
+                className: m()
               }
             ),
-            /* @__PURE__ */ o(N, { variant: "body", className: m(), children: i })
+            /* @__PURE__ */ t(B, { variant: "body", className: s(), children: u })
           ] })
         }
       ),
-      t ? /* @__PURE__ */ o(F, { children: t }) : null
+      r ? /* @__PURE__ */ t(S, { children: r }) : null
     ] });
   }
 );
-C.displayName = "RadioButton";
+F.displayName = "RadioButton";
 export {
-  C as RadioButton,
-  j as radioButton
+  F as RadioButton,
+  j as RadioIndicator,
+  C as radioButton
 };

package/dist/esm/components/radio-button-group/parts/RadioIndicator.d.ts

@@ -0,0 +1,11 @@
+type EnabledState = 'enabled' | 'disabled' | 'readonly';
+type ValidationState = 'valid' | 'invalid';
+export type RadioState = EnabledState | ValidationState;
+export interface RadioIndicatorProps {
+    isSelected: boolean;
+    state: RadioState;
+    theme: string;
+    className?: string;
+}
+export declare const RadioIndicator: ({ isSelected, state, theme, className, }: RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/radio-button-group/parts/RadioIndicator.js

@@ -0,0 +1,131 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+const c = {
+  unselected: {
+    enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+    valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+    invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
+    disabled: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    },
+    readonly: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    }
+  },
+  selected: {
+    enabled: {
+      "--radio-bg-color": "var(--uy-color-surface-form-active)",
+      "--radio-border-color": "var(--uy-color-surface-form-active)",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-content-inverted)"
+    },
+    valid: {
+      "--radio-bg-color": "var(--uy-color-surface-form-active)",
+      "--radio-border-color": "var(--uy-color-surface-form-active)",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-content-inverted)"
+    },
+    invalid: {
+      "--radio-bg-color": "var(--uy-color-surface-danger)",
+      "--radio-border-color": "transparent",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-content-inverted)"
+    },
+    disabled: {
+      "--radio-bg-color": "var(--uy-color-surface-form-disabled)",
+      "--radio-border-color": "var(--uy-color-border-form-disabled)",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-content-form-disabled)"
+    },
+    readonly: {
+      "--radio-bg-color": "var(--uy-color-surface-form-read-only)",
+      "--radio-border-color": "transparent",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-surface-neutral-disabled)"
+    }
+  }
+}, i = {
+  unselected: {
+    enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+    valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+    invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
+    disabled: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    },
+    readonly: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    }
+  },
+  selected: {
+    enabled: {
+      "--radio-border-color": "var(--uy-color-border-form-active)",
+      "--radio-dot-color": "var(--uy-color-surface-primary-active)"
+    },
+    valid: {
+      "--radio-border-color": "var(--uy-color-border-form-active)",
+      "--radio-dot-color": "var(--uy-color-surface-primary-active)"
+    },
+    invalid: {
+      "--radio-border-color": "var(--uy-color-border-form-error)",
+      "--radio-dot-color": "var(--uy-color-content-form-invalid)"
+    },
+    disabled: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)",
+      "--radio-dot-color": "var(--uy-color-border-form-disabled)"
+    },
+    readonly: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)",
+      "--radio-dot-color": "var(--uy-color-border-form-read-only)"
+    }
+  }
+};
+function t({
+  isSelected: r,
+  state: o,
+  theme: d
+}) {
+  return (d === "rebrand" ? c : i)[r ? "selected" : "unselected"][o];
+}
+const n = ({
+  isSelected: r,
+  state: o,
+  theme: d,
+  className: a
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: t({ isSelected: r, state: o, theme: d }),
+    className: a,
+    children: /* @__PURE__ */ l("g", { id: "Radio input", children: [
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          id: "Background",
+          cx: "10",
+          cy: "10",
+          r: "7",
+          fill: "var(--radio-bg-color, white)",
+          stroke: "var(--radio-border-color, #0157B2)",
+          strokeWidth: "1.25"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          id: "Dot",
+          cx: "10",
+          cy: "10",
+          style: { r: "var(--radio-dot-size, 5px)" },
+          fill: "var(--radio-dot-color, transparent)"
+        }
+      )
+    ] })
+  }
+);
+export {
+  n as RadioIndicator
+};

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.d.ts

@@ -44,7 +44,7 @@ export interface SelectableCardRadioProps extends Omit<RadioProps, 'children'>,
  * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardradiogroup-selectablecardradio--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
  */
 declare const SelectableCardRadio: {
-    ({ title, description, illustration, ...props }: SelectableCardRadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, description, illustration, isDisabled, ...props }: SelectableCardRadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { SelectableCardRadio };

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js

@@ -1,38 +1,48 @@
-import { jsx as r, jsxs as a, Fragment as n } from "react/jsx-runtime";
-import { useId as s } from "react";
-import { Radio as p } from "react-aria-components/RadioGroup";
-import { Text as f } from "../../../text/Text.js";
-import { Content as b } from "../../internals/Content.js";
-import { Description as h } from "../../internals/Description.js";
-import { Illustration as I } from "../../internals/Illustration.js";
-import { SelectedIndicator as x } from "../../internals/SelectedIndicator.js";
-import { selectableCard as C } from "../../selectableCard.variant.js";
-import R from "./RadioIndicator.js";
-const S = ({
-  title: d,
+import { jsx as e, jsxs as n, Fragment as b } from "react/jsx-runtime";
+import { useId as h, useContext as S } from "react";
+import { useUnityTheme as u } from "@payfit/unity-themes";
+import { RadioGroupStateContext as x, Radio as y } from "react-aria-components/RadioGroup";
+import { RadioIndicator as C } from "../../../radio-button-group/parts/RadioIndicator.js";
+import { Text as I } from "../../../text/Text.js";
+import { Content as R } from "../../internals/Content.js";
+import { Description as g } from "../../internals/Description.js";
+import { Illustration as v } from "../../internals/Illustration.js";
+import { SelectedIndicator as j } from "../../internals/SelectedIndicator.js";
+import { selectableCard as N } from "../../selectableCard.variant.js";
+const T = ({
+  title: l,
   description: o,
-  illustration: t,
-  ...l
+  illustration: a,
+  isDisabled: i,
+  ...m
 }) => {
-  const m = s(), { base: c } = C(), i = `selectable-card-radio-${m}__title`;
-  return /* @__PURE__ */ r(
-    p,
+  const s = h(), { theme: c } = u(), { base: p } = N(), t = S(x), f = t?.isReadOnly ? "readonly" : t?.isDisabled || i ? "disabled" : t?.isInvalid ? "invalid" : "enabled", d = `selectable-card-radio-${s}__title`;
+  return /* @__PURE__ */ e(
+    y,
     {
-      className: ({ isFocusVisible: e }) => c({ isFocusVisible: e }),
-      "aria-labelledby": i,
-      ...l,
-      children: ({ isSelected: e }) => /* @__PURE__ */ a(n, { children: [
-        /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(R, { isSelected: e }) }),
-        /* @__PURE__ */ a(b, { children: [
-          t && /* @__PURE__ */ r(I, { children: t }),
-          /* @__PURE__ */ r(f, { asElement: "h3", variant: "bodyLargeStrong", id: i, children: d }),
-          o && /* @__PURE__ */ r(h, { children: o })
+      className: ({ isFocusVisible: r }) => p({ isFocusVisible: r }),
+      "aria-labelledby": d,
+      isDisabled: i,
+      ...m,
+      children: ({ isSelected: r }) => /* @__PURE__ */ n(b, { children: [
+        /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(
+          C,
+          {
+            isSelected: r,
+            state: f,
+            theme: c
+          }
+        ) }),
+        /* @__PURE__ */ n(R, { children: [
+          a && /* @__PURE__ */ e(v, { children: a }),
+          /* @__PURE__ */ e(I, { asElement: "h3", variant: "bodyLargeStrong", id: d, children: l }),
+          o && /* @__PURE__ */ e(g, { children: o })
         ] })
       ] })
     }
   );
 };
-S.displayName = "SelectableCardRadio";
+T.displayName = "SelectableCardRadio";
 export {
-  S as SelectableCardRadio
+  T as SelectableCardRadio
 };

package/dist/esm/components/selectable-card/selectableCard.variant.js

@@ -8,7 +8,7 @@ const u = e({
       "uy:text-content-form-enabled",
       "uy:bg-surface-form-enabled",
       "uy:hover:border-border-form-hover",
-      "uy:data-[selected=true]:border-border-form-active uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
+      "uy:data-[selected=true]:border-border-form-selected uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
       "uy:data-[invalid]:border-border-form-error uy:data-[invalid]:bg-surface-form-error",
       "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
     ]