@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/selectable-button-group/SelectableButtonGroup.js

@@ -1,40 +1,40 @@
 import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as c, useRef as s } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
-import { useToggleButtonGroup as m, mergeProps as f } from "react-aria";
+import { forwardRef as i, useRef as s, useCallback as m } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { useToggleButtonGroup as y } from "react-aria";
 import { useToggleGroupState as g } from "react-stately";
 import { SelectableButtonGroupContext as v } from "./SelectableButtonGroup.context.js";
-const y = d({
-  base: "uy:flex uy:gap-100"
-}), G = c((e, l) => {
-  const t = s(null), o = g({
+const B = f({
+  base: "uy:group uy:flex uy:gap-100 uy:flex-wrap"
+}), b = i((e, t) => {
+  const o = s(null), u = g({
     ...e,
     selectedKeys: e.value,
     defaultSelectedKeys: e.defaultValue,
-    onSelectionChange: (i) => {
-      e.onChange?.(Array.from(i));
+    onSelectionChange: (l) => {
+      e.onChange?.(Array.from(l));
     }
-  }), { groupProps: r } = m(e, o, t), n = y({ className: e.className }), { ref: u } = f({ ref: t }, { ref: l });
+  }), { groupProps: n } = y(e, u, o), r = B({ className: e.className }), c = m(
+    (l) => {
+      o.current = l, typeof t == "function" ? t(l) : t && (t.current = l);
+    },
+    [t]
+  );
   return /* @__PURE__ */ a(
     "div",
     {
-      ...r,
-      className: n,
-      ref: u,
+      ...n,
+      className: r,
+      ref: c,
       "data-dd-privacy": "allow",
       "aria-invalid": e.isInvalid,
-      children: /* @__PURE__ */ a(
-        v.Provider,
-        {
-          value: { state: o, isInvalid: e.isInvalid },
-          children: e.children
-        }
-      )
+      onBlur: e.onBlur,
+      children: /* @__PURE__ */ a(v.Provider, { value: u, children: e.children })
     }
   );
 });
-G.displayName = "SelectableButtonGroup";
+b.displayName = "SelectableButtonGroup";
 export {
-  G as SelectableButtonGroup,
-  y as selectableButtonGroup
+  b as SelectableButtonGroup,
+  B as selectableButtonGroup
 };

package/dist/esm/components/selectable-button-group/TanstackSelectableButtonGroup.d.ts

@@ -0,0 +1,27 @@
+import { SelectableButtonGroupProps } from './SelectableButtonGroup.js';
+export type TanstackSelectableButtonGroupProps = Omit<SelectableButtonGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableButtonGroup` is a selectable button group wired to the TanStack Form field context.
+ * It is based on the Unity `SelectableButtonGroup` component.
+ *
+ * Example:
+ * ```tsx
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm<{ choice: string[] }>({ validators: {} })
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="choice">
+ *         {(field) => (
+ *           <field.SelectableButtonGroup selectionMode="single">
+ *             <SelectableButton value="option1">Option 1</SelectableButton>
+ *             <SelectableButton value="option2">Option 2</SelectableButton>
+ *           </field.SelectableButtonGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableButtonGroup: import('react').ForwardRefExoticComponent<TanstackSelectableButtonGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableButtonGroup };

package/dist/esm/components/selectable-button-group/TanstackSelectableButtonGroup.js

@@ -0,0 +1,34 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as u, useCallback as m } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as p } from "../form-field/TanstackFormField.context.js";
+import { SelectableButtonGroup as b } from "./SelectableButtonGroup.js";
+const T = u(({ onChange: o, ...l }, n) => {
+  const e = f(), a = p(), i = e.state.meta.isTouched && !e.state.meta.isValid, d = m(
+    (t) => {
+      const r = t.relatedTarget, s = t.currentTarget;
+      (!r || !s.contains(r)) && e.handleBlur();
+    },
+    [e]
+  );
+  return /* @__PURE__ */ c(
+    b,
+    {
+      ...l,
+      ref: n,
+      value: e.state.value,
+      onChange: (t) => {
+        e.handleChange(t), o?.(t);
+      },
+      onBlur: d,
+      isInvalid: i,
+      "aria-labelledby": a.labelId,
+      "aria-describedby": [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ") || void 0,
+      "aria-details": a.contextualLinkId
+    }
+  );
+});
+T.displayName = "TanstackSelectableButtonGroup";
+export {
+  T as TanstackSelectableButtonGroup
+};

package/dist/esm/components/selectable-button-group/parts/SelectableButton.d.ts

@@ -1,6 +1,6 @@
 import { AriaToggleButtonProps } from 'react-aria';
-import { UnityIcon } from '@payfit/unity-icons';
 import { ToggleButtonProps } from 'react-aria-components';
+import { UnityIcon } from '@payfit/unity-icons';
 export declare const selectableButton: import('tailwind-variants').TVReturnType<{
     hasIcon: {
         true: {
@@ -10,11 +10,6 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
-    isInvalid: {
-        true: {
-            base: string;
-        };
-    };
 }, {
     base: string[];
     icon: string[];
@@ -28,11 +23,6 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
-    isInvalid: {
-        true: {
-            base: string;
-        };
-    };
 }, {
     base: string[];
     icon: string[];
@@ -46,11 +36,6 @@ export declare const selectableButton: import('tailwind-variants').TVReturnType<
             base: string;
         };
     };
-    isInvalid: {
-        true: {
-            base: string;
-        };
-    };
 }, {
     base: string[];
     icon: string[];

package/dist/esm/components/selectable-button-group/parts/SelectableButton.js

@@ -1,17 +1,17 @@
-import { jsxs as n, jsx as o, Fragment as x } from "react/jsx-runtime";
-import { forwardRef as h, useRef as I, useContext as w } from "react";
-import { uyTv as B } from "@payfit/unity-themes";
-import { useToggleButtonGroupItem as N, mergeProps as S } from "react-aria";
-import { Icon as G } from "../../icon/Icon.js";
-import { Spinner as P } from "../../spinner/Spinner.js";
-import { SelectableButtonGroupContext as R } from "../SelectableButtonGroup.context.js";
-const T = B({
+import { jsxs as c, jsx as a, Fragment as v } from "react/jsx-runtime";
+import { forwardRef as x, useRef as h, useContext as B, useCallback as N } from "react";
+import { uyTv as S } from "@payfit/unity-themes";
+import { useToggleButtonGroupItem as I } from "react-aria";
+import { Icon as w } from "../../icon/Icon.js";
+import { Spinner as C } from "../../spinner/Spinner.js";
+import { SelectableButtonGroupContext as G } from "../SelectableButtonGroup.context.js";
+const j = S({
   // add the component styles
   slots: {
     base: [
-      "uy:group uy:border uy:border-solid uy:rounded-75 uy:py-100 uy:flex uy:gap-50 uy:items-center",
+      "uy:group uy:border uy:border-solid uy:rounded-pill uy:py-125 uy:sm:py-100 uy:flex uy:gap-50 uy:items-center",
       // default background and border
-      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled",
+      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled uy:m-[1px]",
       // pseudo-states
       "uy:hover:bg-surface-form-hover uy:hover:border-border-form-hover",
       "uy:active:bg-surface-form-pressed uy:active:border-border-form-pressed",
@@ -20,24 +20,26 @@ const T = B({
       // Pressed
       "uy:data-[pressed=true]:bg-surface-form-pressed uy:data-[pressed=true]:border-border-form-pressed uy:data-[pressed=true]:text-content-form-pressed",
       // selected
-      "uy:data-[selected=true]:bg-surface-form-selected uy:data-[selected=true]:border-border-form-selected uy:data-[selected=true]:text-content-primary-active",
+      "uy:data-[selected=true]:bg-surface-form-selected uy:data-[selected=true]:border-border-form-selected uy:data-[selected=true]:text-content-form-selected uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
       // Disabled
       "uy:disabled:bg-surface-form-disabled uy:disabled:border-border-form-disabled uy:disabled:text-content-form-disabled uy:disabled:cursor-not-allowed",
       // Loading
-      "uy:data-[loading=true]:bg-surface-form-disabled uy:data-[loading=true]:border-border-form-disabled uy:data-[loading=true]:text-content-form-disabled uy:data-[loading=true]:cursor-wait"
+      "uy:data-[loading=true]:bg-surface-form-disabled uy:data-[loading=true]:border-border-form-disabled uy:data-[loading=true]:text-content-form-disabled uy:data-[loading=true]:cursor-wait",
+      // Invalid
+      "uy:group-aria-[invalid=true]:bg-surface-form-error uy:group-aria-[invalid=true]:border-border-form-error uy:group-aria-[invalid=true]:text-content-form-error"
     ],
     icon: [
-      "uy:p-25 uy:text-content-neutral-low",
+      "uy:p-25 uy:text-content-form-enabled",
       // Pseudo-states
       "uy:group-data-[pressed=true]:text-content-form-pressed",
       // selected
-      "uy:group-data-[selected=true]:text-content-primary-active",
+      "uy:group-data-[selected=true]:text-content-form-selected",
       // disabled
       "uy:group-disabled:text-content-form-disabled",
       // Loading
       "uy:data-[loading=true]:hidden"
     ],
-    label: ["uy:typography-action"]
+    label: ["uy:typography-action uy:whitespace-nowrap"]
   },
   variants: {
     hasIcon: {
@@ -47,71 +49,68 @@ const T = B({
       false: {
         base: "uy:px-200"
       }
-    },
-    isInvalid: {
-      true: {
-        base: "uy:bg-surface-form-error uy:border-border-form-error"
-      }
     }
   },
   defaultVariants: {
-    hasIcon: !1,
-    isInvalid: !1
+    hasIcon: !1
   }
-}), j = h(
-  (r, c) => {
-    const a = I(null), s = w(R);
-    if (!s)
+}), z = x(
+  (t, r) => {
+    const u = h(null), d = B(G);
+    if (!d)
       throw new Error(
-        "SelectableButton must be used within a ToggleButtonGroup component"
+        "SelectableButton must be used within a SelectableButtonGroup component"
       );
-    const { state: b, isInvalid: d } = s, { buttonProps: u, isPressed: f, isSelected: l } = N(
-      { id: r.value, ...r },
-      b,
-      a
-    ), { ref: y } = S({ ref: a }, { ref: c }), {
-      isDisabled: m = !1,
+    const { buttonProps: l, isPressed: b, isSelected: i } = I(
+      { id: t.value, ...t },
+      d,
+      u
+    ), f = N(
+      (s) => {
+        u.current = s, typeof r == "function" ? r(s) : r && (r.current = s);
+      },
+      [r]
+    ), {
+      isDisabled: y = !1,
       isLoading: e = !1,
-      prefixIcon: t,
-      children: i
-    } = r, { base: p, icon: g, label: v } = T({
-      hasIcon: !!t && !e,
-      isInvalid: !!d
+      prefixIcon: o,
+      children: n
+    } = t, { base: m, icon: p, label: g } = j({
+      hasIcon: !!o && !e
     });
-    return /* @__PURE__ */ n(
+    return /* @__PURE__ */ c(
       "button",
       {
         "data-dd-privacy": "allow",
-        ...u,
-        ref: y,
-        className: p({ className: r.className }),
-        disabled: u.disabled || m || e,
+        ...l,
+        ref: f,
+        className: m({ className: t.className }),
+        disabled: l.disabled || y || e,
         "data-loading": e ? !0 : void 0,
-        "data-pressed": f,
-        "data-selected": l,
-        "data-invalid": d,
+        "data-pressed": b,
+        "data-selected": i,
         "aria-busy": e,
         children: [
-          t && !e && /* @__PURE__ */ o(
-            G,
+          o && !e && /* @__PURE__ */ a(
+            w,
             {
-              src: l ? `${t}Filled` : `${t}Outlined`,
+              src: i ? `${o}Filled` : `${o}Outlined`,
               role: "presentation",
-              className: g(),
+              className: p(),
               size: 20
             }
           ),
-          e ? /* @__PURE__ */ n(x, { children: [
-            /* @__PURE__ */ o(P, { label: "Loading", size: "small", color: "inherit" }),
-            /* @__PURE__ */ o("span", { className: "uy:sr-only", children: i })
-          ] }) : /* @__PURE__ */ o("span", { className: v(), children: i })
+          e ? /* @__PURE__ */ c(v, { children: [
+            /* @__PURE__ */ a(C, { label: "Loading", size: "small", color: "inherit" }),
+            /* @__PURE__ */ a("span", { className: "uy:sr-only", children: n })
+          ] }) : /* @__PURE__ */ a("span", { className: g(), children: n })
         ]
       }
     );
   }
 );
-j.displayName = "SelectableButton";
+z.displayName = "SelectableButton";
 export {
-  j as SelectableButton,
-  T as selectableButton
+  z as SelectableButton,
+  j as selectableButton
 };

package/dist/esm/components/selectable-button-group-field/SelectableButtonGroupField.d.ts

@@ -54,6 +54,8 @@ type SelectableButtonGroupFieldComponent = (<TSchema extends Schema>(props: Sele
  * }
  * ```
  * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const SelectableButtonGroupField: SelectableButtonGroupFieldComponent;
 export { SelectableButtonGroupField };

package/dist/esm/components/selectable-button-group-field/TanstackSelectableButtonGroupField.d.ts

@@ -0,0 +1,81 @@
+import { ReactNode } from 'react';
+import { LabelProps } from '../label/Label.js';
+import { TanstackSelectableButtonGroupProps } from '../selectable-button-group/TanstackSelectableButtonGroup.js';
+export type TanstackSelectableButtonGroupFieldProps = TanstackSelectableButtonGroupProps & Pick<LabelProps, 'isRequired' | 'requiredVariant'> & {
+    /** The label for the selectable button group field. */
+    label: string;
+    /** Helper text to display below the selectable button group field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the selectable button group field. */
+    contextualLink?: ReactNode;
+    /** The SelectableButton components to render within the group. */
+    children: ReactNode;
+};
+/**
+ * The `TanstackSelectableButtonGroupField` component renders a full field (label, selectable button group)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Renders `TanstackSelectableButtonGroup` with its children.
+ * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
+ *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
+ *
+ * Accessibility:
+ * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
+ *   `aria-details` using identifiers from the `a11y` context.
+ *
+ * Key props:
+ * - `label: string` — label text.
+ * - `selectionMode?: "single" | "multiple"` — determines how many options can be selected.
+ * - `helperText?: ReactNode` — helper text displayed below the field.
+ * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
+ * - Inherits props from `TanstackSelectableButtonGroup`.
+ * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
+ *
+ * Example:
+ * ```tsx
+ * import { useTanstackUnityForm } from "@payfit/unity-components"
+ * import { SelectableButton } from "@payfit/unity-components"
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     choice: z.array(z.string()).min(1, { message: 'Select at least one option' })
+ *  })
+ *
+ *   const form = useTanstackUnityForm<{ choice: string[] }>({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form.AppForm>
+ *       <form.AppField name="choice">
+ *         {(field) => (
+ *           <field.SelectableButtonGroup
+ *             label="Choose your preferences"
+ *             helperText="Select one or more options"
+ *             selectionMode="multiple"
+ *           >
+ *             <SelectableButton value="option1">Option 1</SelectableButton>
+ *             <SelectableButton value="option2">Option 2</SelectableButton>
+ *           </field.SelectableButtonGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `SelectableButtonGroupField` (non‑TanStack):
+ * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
+ * - `value`, `defaultValue`, and `isInvalid` are derived from the TanStack form context.
+ */
+declare const TanstackSelectableButtonGroupField: import('react').ForwardRefExoticComponent<TanstackSelectableButtonGroupProps & Pick<LabelProps, "isRequired" | "requiredVariant"> & {
+    /** The label for the selectable button group field. */
+    label: string;
+    /** Helper text to display below the selectable button group field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the selectable button group field. */
+    contextualLink?: ReactNode;
+    /** The SelectableButton components to render within the group. */
+    children: ReactNode;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableButtonGroupField };

package/dist/esm/components/selectable-button-group-field/TanstackSelectableButtonGroupField.js

@@ -0,0 +1,47 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { TanstackFormFeedbackText as d } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as f } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as u } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as k } from "../form-field/TanstackFormField.js";
+import { TanstackSelectableButtonGroup as F } from "../selectable-button-group/TanstackSelectableButtonGroup.js";
+function T({
+  label: r,
+  helperText: o,
+  contextualLink: e,
+  isRequired: a,
+  requiredVariant: m,
+  isDisabled: n,
+  children: c,
+  ...l
+}, i) {
+  return /* @__PURE__ */ p(k, { children: [
+    /* @__PURE__ */ t(
+      u,
+      {
+        requiredVariant: m,
+        isRequired: a,
+        children: r
+      }
+    ),
+    o && /* @__PURE__ */ t(f, { children: o }),
+    /* @__PURE__ */ t(
+      F,
+      {
+        ref: i,
+        isDisabled: n,
+        ...l,
+        children: c
+      }
+    ),
+    /* @__PURE__ */ t(d, {}),
+    e
+  ] });
+}
+const b = s(
+  T
+);
+b.displayName = "TanstackSelectableButtonGroupField";
+export {
+  b as TanstackSelectableButtonGroupField
+};

package/dist/esm/components/selectable-card/internals/Description.js

@@ -2,7 +2,7 @@ import { jsx as t } from "react/jsx-runtime";
 import { uyTv as r } from "@payfit/unity-themes";
 import { Text as i } from "../../text/Text.js";
 const m = r({
-  base: ["uy:mt-200", "uy:line-clamp-2"]
+  base: ["uy:mt-50", "uy:line-clamp-2"]
 }), a = ({ children: o }) => /* @__PURE__ */ t(i, { className: m(), variant: "body", children: o });
 export {
   a as Description,

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/SelectableCardCheckboxGroup.js

@@ -4,9 +4,9 @@ import { CheckboxGroup as m } from "react-aria-components";
 const p = l(({ children: o, ...r }, e) => /* @__PURE__ */ a(
   m,
   {
+    ...r,
     ref: e,
     className: "uy:group uy:flex uy:md:flex-row uy:sm:flex-col uy:gap-150",
-    ...r,
     children: o
   }
 ));

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.d.ts

@@ -0,0 +1,26 @@
+import { SelectableCardCheckboxGroupProps } from './SelectableCardCheckboxGroup.js';
+export type TanstackSelectableCardCheckboxGroupProps = Omit<SelectableCardCheckboxGroupProps, 'value' | 'defaultValue' | 'isInvalid'>;
+/**
+ * `TanstackSelectableCardCheckboxGroup` is a controlled checkbox group wired to the TanStack Form field context. It is based on the Unity `SelectableCardCheckboxGroup` component.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@payfit/unity-components'
+ * function ExampleField() {
+ *   const form = useTanstackUnityForm({ validators: {} })
+ *   return (
+ *     <form.Form>
+ *       <form.AppField name="options">
+ *         {(field) => (
+ *           <field.SelectableCardCheckboxGroup>
+ *             <SelectableCardCheckbox value="option1" title="Option 1" />
+ *             <SelectableCardCheckbox value="option2" title="Option 2" />
+ *           </field.SelectableCardCheckboxGroup>
+ *         )}
+ *       </form.AppField>
+ *     </form.Form>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackSelectableCardCheckboxGroup: import('react').ForwardRefExoticComponent<TanstackSelectableCardCheckboxGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TanstackSelectableCardCheckboxGroup };

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/TanstackSelectableCardCheckboxGroup.js

@@ -0,0 +1,32 @@
+import { jsx as b } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { useFieldContext as u } from "../../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as p } from "../../form-field/TanstackFormField.context.js";
+import { SelectableCardCheckboxGroup as f } from "./SelectableCardCheckboxGroup.js";
+const h = m(({ onBlur: o, onChange: l, children: i, ...d }, n) => {
+  const e = u(), a = p(), s = e.state.meta.isTouched && !e.state.meta.isValid, r = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" "), c = Array.isArray(e.state.value) ? e.state.value : [];
+  return /* @__PURE__ */ b(
+    f,
+    {
+      ...d,
+      ref: n,
+      id: a.inputId,
+      value: c,
+      onChange: (t) => {
+        e.handleChange(t), l?.(t);
+      },
+      onBlur: (t) => {
+        e.handleBlur(), o?.(t);
+      },
+      isInvalid: s,
+      "aria-labelledby": a.labelId,
+      "aria-describedby": r.length > 0 ? r : void 0,
+      "aria-details": a.contextualLinkId,
+      children: i
+    }
+  );
+});
+h.displayName = "TanstackSelectableCardCheckboxGroup";
+export {
+  h as TanstackSelectableCardCheckboxGroup
+};

package/dist/esm/components/selectable-card/selectable-card-checkbox-group/parts/SelectableCardCheckbox.js

@@ -1,40 +1,40 @@
-import { jsx as r, jsxs as t, Fragment as n } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { useId as h } from "react-aria";
-import { Checkbox as p } from "react-aria-components";
-import { CheckboxIndicator as s } from "../../../checkbox/parts/CheckboxIndicator.js";
+import { jsx as r, jsxs as m, Fragment as n } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useId as f } from "react-aria";
+import { Checkbox as h } from "react-aria-components";
+import { CheckboxIndicator as p } from "../../../checkbox/parts/CheckboxIndicator.js";
 import { Text as b } from "../../../text/Text.js";
 import { Content as x } from "../../internals/Content.js";
 import { Description as C } from "../../internals/Description.js";
-import { Illustration as k } from "../../internals/Illustration.js";
-import { SelectedIndicator as u } from "../../internals/SelectedIndicator.js";
-import { selectableCard as I } from "../../selectableCard.variant.js";
-const v = f(({ title: i, description: e, illustration: m, ...c }, a) => {
-  const { base: d } = I(), l = h();
+import { Illustration as g } from "../../internals/Illustration.js";
+import { SelectedIndicator as k } from "../../internals/SelectedIndicator.js";
+import { selectableCard as u } from "../../selectableCard.variant.js";
+const I = s(({ title: i, description: o, illustration: t, ...a }, c) => {
+  const { base: d } = u(), l = f();
   return /* @__PURE__ */ r(
-    p,
+    h,
     {
-      ref: a,
-      className: ({ isFocusVisible: o }) => d({ isFocusVisible: o }),
-      ...c,
-      children: (o) => /* @__PURE__ */ t(n, { children: [
-        /* @__PURE__ */ r(u, { children: /* @__PURE__ */ r(
-          s,
+      ref: c,
+      className: ({ isFocusVisible: e }) => d({ isFocusVisible: e }),
+      ...a,
+      children: (e) => /* @__PURE__ */ m(n, { children: [
+        /* @__PURE__ */ r(k, { children: /* @__PURE__ */ r(
+          p,
           {
             className: "uy:group-hover:border-border-form-hover",
-            ...o
+            ...e
           }
         ) }),
-        /* @__PURE__ */ t(x, { children: [
-          m && /* @__PURE__ */ r(k, { children: m }),
-          /* @__PURE__ */ r(b, { variant: "h3", id: `${l}-label`, children: i }),
-          e && /* @__PURE__ */ r(C, { children: e })
+        /* @__PURE__ */ m(x, { children: [
+          t && /* @__PURE__ */ r(g, { children: t }),
+          /* @__PURE__ */ r(b, { variant: "bodyLargeStrong", asElement: "h3", id: `${l}-label`, children: i }),
+          o && /* @__PURE__ */ r(C, { children: o })
         ] })
       ] })
     }
   );
 });
-v.displayName = "SelectableCardCheckbox";
+I.displayName = "SelectableCardCheckbox";
 export {
-  v as SelectableCardCheckbox
+  I as SelectableCardCheckbox
 };

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

@@ -15,6 +15,8 @@ export type SelectableCardRadioGroupProps = Omit<RadioGroupProps, 'className' |
  * ```
  * @see {@link SelectableCardRadioGroupProps} for all available props
  * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardradiogroup-docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
+ *
+ * The SelectableCardRadioGroup component adapts to smaller screen sizes, with cards stacking vertically to maintain usability on mobile devices.
  */
 declare const SelectableCardRadioGroup: import('react').ForwardRefExoticComponent<SelectableCardRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
 export { SelectableCardRadioGroup };