@payfit/unity-components 2.46.20 → 2.46.22

package/dist/esm/components/checkbox/Checkbox.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components/Checkbox';
-export interface CheckboxProps extends Omit<AriaCheckboxProps, 'className'> {
+import { CheckboxFieldProps as AriaCheckboxFieldProps } from 'react-aria-components/Checkbox';
+export interface CheckboxProps extends Omit<AriaCheckboxFieldProps, 'className'> {
     /**
      * The content to display as the checkbox label.
      * This is required for accessibility.

package/dist/esm/components/checkbox/Checkbox.js

@@ -1,17 +1,17 @@
-import { jsxs as r, jsx as e, Fragment as B } from "react/jsx-runtime";
+import { jsxs as r, jsx as a, Fragment as B } from "react/jsx-runtime";
 import { forwardRef as R, isValidElement as h, cloneElement as f } from "react";
-import { Checkbox as D } from "react-aria-components/Checkbox";
-import { useId as E } from "react-aria/useId";
+import { CheckboxField as D, CheckboxButton as E } from "react-aria-components/Checkbox";
+import { useId as F } from "react-aria/useId";
 import { Text as N } from "../text/Text.js";
 import { checkbox as V } from "./Checkbox.variants.js";
-import { CheckboxIndicator as F } from "./parts/CheckboxIndicator.js";
-const L = R(
-  ({ children: v, helperText: i, feedbackText: l, ...o }, u) => {
-    const a = E(), {
-      isDisabled: t,
-      isReadOnly: d,
-      isInvalid: s,
-      isRequired: n,
+import { CheckboxIndicator as L } from "./parts/CheckboxIndicator.js";
+const O = R(
+  ({ children: u, helperText: i, feedbackText: l, ...o }, v) => {
+    const e = F(), {
+      isDisabled: s,
+      isReadOnly: n,
+      isInvalid: t,
+      isRequired: d,
       requiredVariant: c = "required",
       ...x
     } = o, {
@@ -24,83 +24,82 @@ const L = R(
       helperText: m,
       feedbackText: b
     } = V({
-      isDisabled: t,
-      isReadOnly: d,
-      isInvalid: s
-    }), p = [o["aria-labelledby"], `${a}-label`].filter(Boolean), y = [
+      isDisabled: s,
+      isReadOnly: n,
+      isInvalid: t
+    }), y = [o["aria-labelledby"], `${e}-label`].filter(Boolean), p = [
       o["aria-describedby"],
-      typeof i == "string" ? `${a}-helper-text` : void 0,
-      typeof l == "string" ? `${a}-feedback-text` : void 0
-    ].filter(Boolean), I = p.length > 0 ? p.join(" ") : void 0, S = y.length > 0 ? y.join(" ") : void 0;
+      typeof i == "string" ? `${e}-helper-text` : void 0,
+      typeof l == "string" ? `${e}-feedback-text` : void 0
+    ].filter(Boolean), I = y.length > 0 ? y.join(" ") : void 0, S = p.length > 0 ? p.join(" ") : void 0;
     return /* @__PURE__ */ r("div", { className: g(), children: [
-      /* @__PURE__ */ e(
+      /* @__PURE__ */ a(
         D,
         {
           ...x,
-          isInvalid: s,
-          ref: u,
-          className: $(),
+          isInvalid: t,
+          className: "uy:contents",
           "aria-labelledby": I,
           "aria-describedby": S,
-          isDisabled: t,
-          isReadOnly: d,
-          children: (j) => /* @__PURE__ */ r(B, { children: [
-            /* @__PURE__ */ e(
-              F,
+          isDisabled: s,
+          isReadOnly: n,
+          children: /* @__PURE__ */ a(E, { ref: v, className: $(), children: (j) => /* @__PURE__ */ r(B, { children: [
+            /* @__PURE__ */ a(
+              L,
               {
                 ...j,
                 className: "uy:mt-25 uy:ml-0"
               }
             ),
-            /* @__PURE__ */ e(
+            /* @__PURE__ */ a(
               "span",
               {
-                id: `${a}-label`,
+                id: `${e}-label`,
                 className: k(),
                 "data-dd-privacy": "allow",
-                children: v
+                children: u
               }
             ),
-            c === "required" && n && /* @__PURE__ */ r("span", { className: C(), children: [
+            c === "required" && d && /* @__PURE__ */ r("span", { className: C(), children: [
               "*",
-              /* @__PURE__ */ e("span", { className: "uy:sr-only", children: "required" })
+              /* @__PURE__ */ a("span", { className: "uy:sr-only", children: "required" })
             ] }),
-            c === "optional" && !n && /* @__PURE__ */ e("span", { className: q(), children: "(optional)" })
-          ] })
+            c === "optional" && !d && /* @__PURE__ */ a("span", { className: q(), children: "(optional)" })
+          ] }) })
         }
       ),
       (i || l) && /* @__PURE__ */ r("div", { className: w(), "data-dd-privacy": "allow", children: [
-        typeof i == "string" ? /* @__PURE__ */ e(
+        typeof i == "string" ? /* @__PURE__ */ a(
           N,
           {
             variant: "bodySmall",
             color: "content.neutral.low",
-            id: `${a}-helper-text`,
+            id: `${e}-helper-text`,
             className: m(),
             children: i
           }
         ) : h(i) && f(i, {
-          "data-id": `${a}-helper-text`,
+          "data-id": `${e}-helper-text`,
           className: m()
         }),
-        s && (typeof l == "string" ? /* @__PURE__ */ e(
+        t && (typeof l == "string" ? /* @__PURE__ */ a(
           N,
           {
             variant: "bodySmallStrong",
             color: "content.form.invalid",
-            id: `${a}-feedback-text`,
+            id: `${e}-feedback-text`,
             className: b(),
             children: l
           }
         ) : h(l) && f(l, {
-          "data-id": `${a}-feedback-text`,
+          "data-id": `${e}-feedback-text`,
           className: b()
         }))
       ] })
     ] });
   }
 );
-L.displayName = "Checkbox";
+O.displayName = "Checkbox";
 export {
-  L as Checkbox
+  O as Checkbox
 };

package/dist/esm/components/checkbox/CheckboxStandalone.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components/Checkbox';
-export interface CheckboxStandaloneProps extends AriaCheckboxProps {
+import { CheckboxFieldProps as AriaCheckboxFieldProps } from 'react-aria-components/Checkbox';
+export interface CheckboxStandaloneProps extends AriaCheckboxFieldProps {
     /**
      * The content to display as the checkbox label.
      * This is required for accessibility.

package/dist/esm/components/checkbox/CheckboxStandalone.js

@@ -1,30 +1,29 @@
-import { jsx as e, jsxs as f, Fragment as h } from "react/jsx-runtime";
+import { jsx as e, jsxs as h, Fragment as f } from "react/jsx-runtime";
 import { forwardRef as x } from "react";
-import { Checkbox as p } from "react-aria-components/Checkbox";
-import { useId as y } from "react-aria/useId";
-import { checkbox as k } from "./Checkbox.variants.js";
+import { CheckboxField as y, CheckboxButton as p } from "react-aria-components/Checkbox";
+import { useId as k } from "react-aria/useId";
+import { checkbox as u } from "./Checkbox.variants.js";
 import { CheckboxIndicator as C } from "./parts/CheckboxIndicator.js";
-const I = x(({ children: r, ...a }, i) => {
-  const o = y(), { isDisabled: n, isReadOnly: s, isInvalid: d } = a, { base: t, wrapper: c } = k({
+const N = x(({ children: r, ...a }, i) => {
+  const o = k(), { isDisabled: n, isReadOnly: s, isInvalid: t } = a, { base: c, wrapper: d } = u({
     isDisabled: n,
     isReadOnly: s,
-    isInvalid: d
+    isInvalid: t
   }), l = [a["aria-labelledby"], `${o}-label`].filter(Boolean), m = l.length > 0 ? l.join(" ") : void 0;
-  return /* @__PURE__ */ e("div", { className: t(), children: /* @__PURE__ */ e(
-    p,
+  return /* @__PURE__ */ e("div", { className: c(), children: /* @__PURE__ */ e(
+    y,
     {
       ...a,
-      ref: i,
-      className: c(),
+      className: "uy:contents",
       "aria-labelledby": m,
-      children: (b) => /* @__PURE__ */ f(h, { children: [
+      children: /* @__PURE__ */ e(p, { ref: i, className: d(), children: (b) => /* @__PURE__ */ h(f, { children: [
         /* @__PURE__ */ e(C, { ...b }),
         /* @__PURE__ */ e("span", { id: `${o}-label`, className: "uy:sr-only", children: r })
-      ] })
+      ] }) })
     }
   ) });
 });
-I.displayName = "CheckboxStandalone";
+N.displayName = "CheckboxStandalone";
 export {
-  I as CheckboxStandalone
+  N as CheckboxStandalone
 };

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

@@ -1,6 +1,6 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
-import { RadioProps } from 'react-aria-components/RadioGroup';
+import { RadioFieldProps } 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<{
@@ -64,7 +64,7 @@ export declare const radioButton: import('tailwind-variants').TVReturnType<{
  * @see {@link RadioButtonGroup} for the parent component
  */
 declare const RadioButton: import('react').ForwardRefExoticComponent<RadioButtonProps & import('react').RefAttributes<HTMLLabelElement>>;
-export interface RadioButtonProps extends Omit<RadioProps, 'children'>, VariantProps<typeof radioButton> {
+export interface RadioButtonProps extends Omit<RadioFieldProps, 'children'>, VariantProps<typeof radioButton> {
     /**
      * The content to display as the radio button's label.
      */

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

@@ -1,12 +1,12 @@
-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 { jsxs as a, jsx as t } from "react/jsx-runtime";
+import { forwardRef as f, useContext as x } from "react";
+import { uyTv as g, useUnityTheme as h } from "@payfit/unity-themes";
+import { RadioGroupStateContext as R, RadioField as w, RadioButton as B } from "react-aria-components/RadioGroup";
+import { Flex as N } from "../../flex/Flex.js";
+import { Text as v } from "../../text/Text.js";
 import { RadioButtonHelper as S } from "./RadioButtonHelper.js";
 import { RadioIndicator as j } from "./RadioIndicator.js";
-const C = h({
+const C = g({
   slots: {
     container: [
       "uy:group uy:inline-flex uy:flex-col uy:gap-50",
@@ -29,29 +29,28 @@ const C = h({
       "uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
     ]
   }
-}), 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: [
+}), F = f(
+  ({ children: u, value: d, isDisabled: e, helperText: r, ...n }, i) => {
+    const { base: l, label: s, container: y, radio: c } = C(), o = x(R), { theme: m } = h(), p = o?.isReadOnly ? "readonly" : o?.isDisabled || e ? "disabled" : o?.isInvalid ? "invalid" : "enabled";
+    return /* @__PURE__ */ a(N, { direction: "col", gap: "50", className: y(), children: [
       /* @__PURE__ */ t(
-        N,
+        w,
         {
           ...n,
           value: d,
-          isDisabled: o,
-          className: () => l(),
-          ref: i,
-          children: ({ isSelected: b }) => /* @__PURE__ */ a(f, { children: [
+          isDisabled: e,
+          className: "uy:contents",
+          children: ({ isSelected: b }) => /* @__PURE__ */ a(B, { ref: i, className: () => l(), children: [
             /* @__PURE__ */ t(
               j,
               {
                 isSelected: b,
                 state: p,
-                theme: c,
-                className: m()
+                theme: m,
+                className: c()
               }
             ),
-            /* @__PURE__ */ t(B, { variant: "body", className: s(), children: u })
+            /* @__PURE__ */ t(v, { variant: "body", className: s(), children: u })
           ] })
         }
       ),

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

@@ -1,8 +1,8 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
-import { CheckboxProps as AriaCheckboxProps } from 'react-aria-components/Checkbox';
+import { CheckboxFieldProps as AriaCheckboxFieldProps } from 'react-aria-components/Checkbox';
 import { selectableCard } from '../../selectableCard.variant.js';
-export interface SelectableCardCheckboxProps extends Omit<AriaCheckboxProps, 'children'>, VariantProps<typeof selectableCard> {
+export interface SelectableCardCheckboxProps extends Omit<AriaCheckboxFieldProps, 'children'>, VariantProps<typeof selectableCard> {
     /**
      * The title of the selectable card.
      */

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

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

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

@@ -1,8 +1,8 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren, ReactNode } from 'react';
-import { RadioProps } from 'react-aria-components/RadioGroup';
+import { RadioFieldProps } from 'react-aria-components/RadioGroup';
 import { selectableCard } from '../../selectableCard.variant.js';
-export interface SelectableCardRadioProps extends Omit<RadioProps, 'children'>, PropsWithChildren<VariantProps<typeof selectableCard>> {
+export interface SelectableCardRadioProps extends Omit<RadioFieldProps, 'children'>, PropsWithChildren<VariantProps<typeof selectableCard>> {
     /**
      * The title of the selectable card.
      */

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

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

package/dist/esm/components/toggle-switch/ToggleSwitch.d.ts

@@ -1,5 +1,5 @@
 import { VariantProps } from '@payfit/unity-themes';
-import { SwitchProps as AriaSwitchProps } from 'react-aria-components/Switch';
+import { SwitchFieldProps as AriaSwitchFieldProps } from 'react-aria-components/Switch';
 export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
     isDisabled: {
         false: {
@@ -58,7 +58,7 @@ export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
     indicator: string[];
     knob: string[];
 }, undefined, unknown, unknown, undefined>>;
-export interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
+export interface ToggleSwitchProps extends Omit<AriaSwitchFieldProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
     /** The label for the toggle switch. */
     label: string;
     /** Whether the label is visually hidden and accessible only to screen readers. */

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

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { uyTv as v } from "@payfit/unity-themes";
-import { Switch as m } from "react-aria-components/Switch";
-import { useBreakpointListener as w } from "../../hooks/use-breakpoint-listener.js";
-const x = v({
+import { forwardRef as v } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+import { SwitchField as m, SwitchButton as b } from "react-aria-components/Switch";
+import { useBreakpointListener as N } from "../../hooks/use-breakpoint-listener.js";
+const x = w({
   slots: {
     container: ["uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:group"],
     mobileContainer: [
@@ -55,76 +55,58 @@ const x = v({
       }
     }
   }
-}), N = h(
+}), k = v(
   ({
-    label: u,
+    label: s,
     helperText: r,
-    isLabelSrOnly: o = !1,
+    isLabelSrOnly: u = !1,
     isDisabled: d,
-    ...b
-  }, s) => {
+    ...g
+  }, o) => {
     const {
       container: t,
-      indicator: i,
-      knob: l,
+      indicator: l,
+      knob: i,
       textWrapper: y,
       label: c,
-      hintText: p,
-      mobileContainer: g
-    } = x({ isDisabled: d }), f = w() === "xs", n = { ...b, role: "switch" };
-    return f ? /* @__PURE__ */ e(
-      m,
-      {
-        ...n,
-        ref: s,
-        className: t(),
-        isDisabled: d,
-        children: /* @__PURE__ */ a("div", { className: g(), children: [
-          /* @__PURE__ */ a(
-            "div",
-            {
-              className: y({
-                className: o ? "uy:sr-only" : ""
-              }),
-              "data-dd-privacy": "allow",
-              children: [
-                /* @__PURE__ */ e("span", { className: c(), children: u }),
-                r && /* @__PURE__ */ e("span", { className: p(), children: r })
-              ]
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: i(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: l() }) })
-        ] })
-      }
-    ) : /* @__PURE__ */ a(
-      m,
-      {
-        ...n,
-        ref: s,
-        className: t(),
-        isDisabled: d,
-        children: [
-          /* @__PURE__ */ e("div", { className: i(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: l() }) }),
-          /* @__PURE__ */ a(
-            "div",
-            {
-              className: y({
-                className: o ? "uy:sr-only" : ""
-              }),
-              "data-dd-privacy": "allow",
-              children: [
-                /* @__PURE__ */ e("span", { className: c(), children: u }),
-                r && /* @__PURE__ */ e("span", { className: p(), children: r })
-              ]
-            }
-          )
-        ]
-      }
-    );
+      hintText: n,
+      mobileContainer: f
+    } = x({ isDisabled: d }), h = N() === "xs", p = { ...g, role: "switch" };
+    return h ? /* @__PURE__ */ e(m, { ...p, className: "uy:contents", isDisabled: d, children: /* @__PURE__ */ e(b, { ref: o, className: t(), children: /* @__PURE__ */ a("div", { className: f(), children: [
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: y({
+            className: u ? "uy:sr-only" : ""
+          }),
+          "data-dd-privacy": "allow",
+          children: [
+            /* @__PURE__ */ e("span", { className: c(), children: s }),
+            r && /* @__PURE__ */ e("span", { className: n(), children: r })
+          ]
+        }
+      ),
+      /* @__PURE__ */ e("div", { className: l(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: i() }) })
+    ] }) }) }) : /* @__PURE__ */ e(m, { ...p, className: "uy:contents", isDisabled: d, children: /* @__PURE__ */ a(b, { className: t(), ref: o, children: [
+      /* @__PURE__ */ e("div", { className: l(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: i() }) }),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: y({
+            className: u ? "uy:sr-only" : ""
+          }),
+          "data-dd-privacy": "allow",
+          children: [
+            /* @__PURE__ */ e("span", { className: c(), children: s }),
+            r && /* @__PURE__ */ e("span", { className: n(), children: r })
+          ]
+        }
+      )
+    ] }) });
   }
 );
-N.displayName = "ToggleSwitch";
+k.displayName = "ToggleSwitch";
 export {
-  N as ToggleSwitch,
+  k as ToggleSwitch,
   x as toggleSwitch
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.46.20",
+  "version": "2.46.22",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -62,11 +62,11 @@
     "@formatjs/intl": "4.1.12",
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
-    "@internationalized/date": "3.12.1",
+    "@internationalized/date": "3.12.2",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
-    "@react-aria/interactions": "3.28.0",
-    "@react-aria/utils": "3.34.0",
+    "@react-aria/interactions": "3.28.1",
+    "@react-aria/utils": "3.34.1",
     "@react-types/shared": "3.26.0",
     "@standard-schema/spec": "1.1.0",
     "@tanstack/form-core": "1.33.0",
@@ -79,20 +79,20 @@
     "embla-carousel-react": "9.0.0-rc02",
     "prettier": "3.8.3",
     "react": "18.3.1",
-    "react-aria": "3.48.0",
-    "react-aria-components": "1.17.0",
+    "react-aria": "3.49.0",
+    "react-aria-components": "1.18.0",
     "react-dom": "18.3.1",
     "react-hook-form": "7.62.0",
     "react-hot-toast": "2.5.1",
     "react-hotkeys-hook": "5.1.0",
     "react-international-phone": "4.5.0",
     "react-intl": "7.1.14",
-    "react-stately": "3.46.0",
+    "react-stately": "3.47.0",
     "storybook": "10.4.1",
     "tailwind-variants": "3.2.2",
     "usehooks-ts": "3.1.1",
     "zod": "4.4.3",
-    "@payfit/unity-illustrations": "2.46.20"
+    "@payfit/unity-illustrations": "2.46.22"
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
@@ -104,14 +104,14 @@
     "react-hook-form": "^7",
     "react-router-dom": "^5",
     "zod": "^3 || ^4",
-    "@payfit/unity-icons": "2.46.20",
-    "@payfit/unity-themes": "2.46.20"
+    "@payfit/unity-icons": "2.46.22",
+    "@payfit/unity-themes": "2.46.22"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.3",
     "@github-ui/storybook-addon-performance-panel": "1.1.4",
     "@hookform/devtools": "4.4.0",
-    "@internationalized/date": "3.12.1",
+    "@internationalized/date": "3.12.2",
     "@storybook/addon-a11y": "10.4.1",
     "@storybook/addon-designs": "11.1.3",
     "@storybook/addon-docs": "10.4.1",
@@ -123,7 +123,7 @@
     "@tanstack/intent": "0.0.40",
     "@tanstack/react-devtools": "0.10.5",
     "@tanstack/react-form-devtools": "0.2.29",
-    "@tanstack/react-query": "5.100.14",
+    "@tanstack/react-query": "5.101.0",
     "@tanstack/react-router": "1.170.10",
     "@tanstack/react-router-devtools": "1.167.0",
     "@testing-library/dom": "10.4.0",
@@ -154,9 +154,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.46.20",
-    "@payfit/unity-illustrations": "2.46.20",
-    "@payfit/unity-themes": "2.46.20",
+    "@payfit/unity-icons": "2.46.22",
+    "@payfit/unity-illustrations": "2.46.22",
+    "@payfit/unity-themes": "2.46.22",
     "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependenciesMeta": {