@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.12

package/dist/cjs/components/checkbox/Checkbox.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),S=require("react-aria"),I=require("react-aria-components"),b=require("../text/Text.cjs"),w=require("./Checkbox.variants.cjs"),R=require("./parts/CheckboxIndicator.cjs"),x=r.forwardRef(({children:y,helperText:i,feedbackText:s,...t},m)=>{const a=S.useId(),{isDisabled:u,isReadOnly:h,isInvalid:n,isRequired:l,requiredVariant:o="required"}=t,{base:j,wrapper:p,asterisk:v,optionalTag:g,descriptionsContainer:q,helperText:N,feedbackText:f}=w.checkbox({isDisabled:u,isReadOnly:h,isInvalid:n}),c=[t["aria-labelledby"],`${a}-label`].filter(Boolean),d=[t["aria-describedby"],typeof i=="string"?`${a}-helper-text`:void 0,typeof s=="string"?`${a}-feedback-text`:void 0].filter(Boolean),k=c.length>0?c.join(" "):void 0,C=d.length>0?d.join(" "):void 0;return e.jsxs("div",{className:j(),children:[e.jsx(I.Checkbox,{...t,ref:m,className:p(),"aria-labelledby":k,"aria-describedby":C,children:$=>e.jsxs(e.Fragment,{children:[e.jsx(R.CheckboxIndicator,{...$,className:"uy-mr-[6px]"}),e.jsx("span",{id:`${a}-label`,className:"uy-leading-100","data-dd-privacy":"allow",children:y}),o==="required"&&l&&e.jsxs("span",{className:v(),children:["*",e.jsx("span",{className:"uy-sr-only",children:"required"})]}),o==="optional"&&!l&&e.jsx("span",{className:g(),children:"(optional)"})]})}),(i||s)&&e.jsxs("div",{className:q(),"data-dd-privacy":"allow",children:[typeof i=="string"?e.jsx(b.Text,{variant:"bodySmall",color:"content.neutral.low",id:`${a}-helper-text`,children:i}):r.isValidElement(i)&&r.cloneElement(i,{"data-id":`${a}-helper-text`,className:N()}),n&&(typeof s=="string"?e.jsx(b.Text,{variant:"bodySmallStrong",color:"content.form.invalid",id:`${a}-feedback-text`,children:s}):r.isValidElement(s)&&r.cloneElement(s,{"data-id":`${a}-feedback-text`,className:f()}))]})]})});x.displayName="Checkbox";exports.Checkbox=x;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),r=require("react"),S=require("react-aria"),I=require("react-aria-components"),b=require("../text/Text.cjs"),w=require("./Checkbox.variants.cjs"),R=require("./parts/CheckboxIndicator.cjs"),x=r.forwardRef(({children:y,helperText:i,feedbackText:s,...t},m)=>{const a=S.useId(),{isDisabled:u,isReadOnly:h,isInvalid:n,isRequired:l,requiredVariant:o="required"}=t,{base:j,wrapper:p,asterisk:v,optionalTag:q,descriptionsContainer:g,helperText:f,feedbackText:N}=w.checkbox({isDisabled:u,isReadOnly:h,isInvalid:n}),c=[t["aria-labelledby"],`${a}-label`].filter(Boolean),d=[t["aria-describedby"],typeof i=="string"?`${a}-helper-text`:void 0,typeof s=="string"?`${a}-feedback-text`:void 0].filter(Boolean),k=c.length>0?c.join(" "):void 0,C=d.length>0?d.join(" "):void 0;return e.jsxs("div",{className:j(),children:[e.jsx(I.Checkbox,{...t,ref:m,className:p(),"aria-labelledby":k,"aria-describedby":C,children:$=>e.jsxs(e.Fragment,{children:[e.jsx(R.CheckboxIndicator,{...$,className:"uy-mr-[6px]"}),e.jsx("span",{id:`${a}-label`,"data-dd-privacy":"allow",children:y}),o==="required"&&l&&e.jsxs("span",{className:v(),children:["*",e.jsx("span",{className:"uy-sr-only",children:"required"})]}),o==="optional"&&!l&&e.jsx("span",{className:q(),children:"(optional)"})]})}),(i||s)&&e.jsxs("div",{className:g(),"data-dd-privacy":"allow",children:[typeof i=="string"?e.jsx(b.Text,{variant:"bodySmall",color:"content.neutral.low",id:`${a}-helper-text`,children:i}):r.isValidElement(i)&&r.cloneElement(i,{"data-id":`${a}-helper-text`,className:f()}),n&&(typeof s=="string"?e.jsx(b.Text,{variant:"bodySmallStrong",color:"content.form.invalid",id:`${a}-feedback-text`,children:s}):r.isValidElement(s)&&r.cloneElement(s,{"data-id":`${a}-feedback-text`,className:N()}))]})]})});x.displayName="Checkbox";exports.Checkbox=x;

package/dist/cjs/components/checkbox/Checkbox.variants.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),a=e.tv({slots:{base:"uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",wrapper:"uy-inline-flex uy-items-center uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",asterisk:"uy-text-content-danger",optionalTag:"uy-typography-body",descriptionsContainer:"uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",helperText:"uy-typography-body-small uy-text-content-neutral-low",feedbackText:"uy-typography-body-small-strong uy-text-content-form-invalid"},variants:{isDisabled:{true:{base:"!uy-text-content-form-disabled"}},isInvalid:{true:{}},isReadOnly:{true:{base:"uy-cursor-not-allowed"}}},defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isDisabled:!1,isReadOnly:!1,className:{wrapper:"uy-cursor-pointer"}},{isDisabled:!0,isReadOnly:!1,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!1,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!0,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}}]});exports.checkbox=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("tailwind-variants"),a=e.tv({slots:{base:"uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",wrapper:"uy-inline-flex uy-items-start uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",asterisk:"uy-text-content-danger",optionalTag:"uy-typography-body",descriptionsContainer:"uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",helperText:"uy-typography-body-small uy-text-content-neutral-low",feedbackText:"uy-typography-body-small-strong uy-text-content-form-invalid"},variants:{isDisabled:{true:{base:"!uy-text-content-form-disabled"}},isInvalid:{true:{}},isReadOnly:{true:{base:"uy-cursor-not-allowed"}}},defaultVariants:{isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isDisabled:!1,isReadOnly:!1,className:{wrapper:"uy-cursor-pointer"}},{isDisabled:!0,isReadOnly:!1,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!1,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}},{isDisabled:!0,isReadOnly:!0,className:{wrapper:"uy-cursor-not-allowed"}}]});exports.checkbox=a;

package/dist/cjs/components/checkbox/parts/CheckboxIndicator.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("tailwind-variants"),c=n.tv({slots:{base:["uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-border-solid uy-transition-all uy-duration-100"],checkmark:["uy-w-[16px] uy-fill-none uy-stroke-[2px] uy-stroke-content-inverted uy-transition-all uy-duration-500"]},variants:{isSelected:{true:{base:"uy-border-border-form-active uy-bg-surface-form-active"}},isDisabled:{true:""},isReadOnly:{true:""},isInvalid:{true:""}},defaultVariants:{isSelected:!1,isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isSelected:!1,isDisabled:!1,isInvalid:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled"}},{isSelected:!1,isDisabled:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isDisabled:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-border-form-disabled"}},{isSelected:!1,isInvalid:!0,className:{base:"uy-border-border-form-error uy-bg-surface-form-enabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isInvalid:!0,className:{base:"!uy-border-border-danger !uy-bg-surface-danger",checkmark:"uy-text-content-inverted"}},{isSelected:!1,isReadOnly:!0,className:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isReadOnly:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-border-form-read-only"}}]});function s({isSelected:r,isDisabled:t,isIndeterminate:a,isInvalid:d,isReadOnly:i,className:o}){const{base:l,checkmark:u}=c({isSelected:r||a,isDisabled:t,isInvalid:d,isReadOnly:i});return e.jsx("div",{className:l({className:o}),"data-dd-privacy":"mask",children:e.jsx("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 16 16","aria-hidden":"true",className:u(),style:{strokeDashoffset:r?44:66},children:a?e.jsx("rect",{x:"3",y:"7",width:"10",height:"2",rx:"0.5",stroke:"none",fill:"currentColor"}):e.jsx("polyline",{points:"3.5,8 6.5,11 12.5,5",stroke:"currentColor",strokeDasharray:"22",strokeLinecap:"butt",strokeLinejoin:"bevel"})})})}s.displayName="CheckboxIndicator";exports.CheckboxIndicator=s;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n=require("tailwind-variants"),c=n.tv({slots:{base:["uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-m-25 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-border-solid uy-transition-all uy-duration-100"],checkmark:["uy-w-[16px] uy-fill-none uy-stroke-[2px] uy-stroke-content-inverted uy-transition-all uy-duration-500"]},variants:{isSelected:{true:{base:"uy-border-border-form-active uy-bg-surface-form-active"}},isDisabled:{true:""},isReadOnly:{true:""},isInvalid:{true:""}},defaultVariants:{isSelected:!1,isDisabled:!1,isInvalid:!1,isReadOnly:!1},compoundVariants:[{isSelected:!1,isDisabled:!1,isInvalid:!1,isReadOnly:!1,className:{base:"uy-border-border-form-enabled uy-bg-surface-form-enabled"}},{isSelected:!1,isDisabled:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isDisabled:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-border-form-disabled"}},{isSelected:!1,isInvalid:!0,className:{base:"uy-border-border-form-error uy-bg-surface-form-enabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isInvalid:!0,className:{base:"!uy-border-border-danger !uy-bg-surface-danger",checkmark:"uy-text-content-inverted"}},{isSelected:!1,isReadOnly:!0,className:{base:"uy-border-border-form-disabled uy-bg-surface-form-disabled",checkmark:"uy-text-transparent"}},{isSelected:!0,isReadOnly:!0,className:{base:"!uy-bg-surface-form-disabled uy-border-border-form-disabled",checkmark:"uy-text-border-form-read-only"}}]});function s({isSelected:r,isDisabled:t,isIndeterminate:a,isInvalid:d,isReadOnly:i,className:o}){const{base:l,checkmark:u}=c({isSelected:r||a,isDisabled:t,isInvalid:d,isReadOnly:i});return e.jsx("div",{className:l({className:o}),"data-dd-privacy":"mask",children:e.jsx("svg",{fill:"none",stroke:"currentColor",viewBox:"0 0 16 16","aria-hidden":"true",className:u(),style:{strokeDashoffset:r?44:66},children:a?e.jsx("rect",{x:"3",y:"7",width:"10",height:"2",rx:"0.5",stroke:"none",fill:"currentColor"}):e.jsx("polyline",{points:"3.5,8 6.5,11 12.5,5",stroke:"currentColor",strokeDasharray:"22",strokeLinecap:"butt",strokeLinejoin:"bevel"})})})}s.displayName="CheckboxIndicator";exports.CheckboxIndicator=s;

package/dist/cjs/components/date-picker-field/test-utils.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("storybook/test"),s=r=>({fillCalendarDate:async({labelText:a,calendarDate:n})=>{await r.step(`Fill date picker ${a}`,async()=>{const e=i.within(r.canvasElement).getAllByLabelText(a,{exact:!1,selector:"span"});if(e.length!==3)throw new Error(`Date field for ${a} not found`);await i.userEvent.type(e.find(t=>t.getAttribute("data-type")==="day"),String(n.day)),await i.userEvent.type(e.find(t=>t.getAttribute("data-type")==="month"),String(n.month)),await i.userEvent.type(e.find(t=>t.getAttribute("data-type")==="year"),String(n.year))})}});exports.getTestingUtilsDatePicker=s;

package/dist/cjs/components/date-picker-field/test-utils.d.cts

@@ -0,0 +1,12 @@
+import { CalendarDate } from '@internationalized/date';
+import { PlayCtx } from '../../types/testing.cjs';
+/**
+ * Factory to get date picker testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsDatePicker: (context: PlayCtx) => {
+    fillCalendarDate: ({ labelText, calendarDate, }: {
+        labelText: string;
+        calendarDate: CalendarDate;
+    }) => Promise<void>;
+};

package/dist/cjs/components/select-field/test-utils.d.cts

@@ -0,0 +1,11 @@
+import { PlayCtx } from '../../types/testing.cjs';
+/**
+ * Factory to get select testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsSelect: (context: PlayCtx) => {
+    selectOption: ({ labelText, optionName, }: {
+        labelText: string;
+        optionName: string;
+    }) => Promise<void>;
+};

package/dist/cjs/components/toggle-switch/ToggleSwitch.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),f=require("react-aria-components"),m=require("tailwind-variants"),a=m.tv({slots:{container:["uy-flex uy-gap-100 uy-group"],textWrapper:["uy-flex uy-flex-col uy-gap-50"],label:["uy-typography-body uy-text-content-form-enabled"],hintText:["uy-typography-body-small uy-text-content-neutral-low"],indicator:["uy-p-50 uy-w-500 uy-h-300 uy-flex uy-items-center","uy-rounded-pill","uy-border uy-border-solid uy-border-border-form-disabled uy-bg-surface-form-disabled","uy-cursor-pointer uy-transition-colors uy-duration-200 uy-ease-in-out","group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed",'group-data-[selected="true"]:uy-bg-surface-form-active group-data-[selected="true"]:uy-border-border-form-active group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-active group-data-[selected="true"]:group-data-[pressed]:uy-border-border-form-active',"group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled group-data-[disabled]:uy-cursor-not-allowed","group-data-[focus-visible]:uy-outline-2 group-data-[focus-visible]:uy-outline group-data-[focus-visible]:uy-outline-offset-2 group-data-[focus-visible]:uy-outline-utility-focus-ring"],knob:["uy-w-200 uy-h-200 uy-rounded-circle","uy-border uy-border-solid uy-border-border-form-enabled uy-bg-surface-form-enabled","uy-transition-all uy-duration-200 uy-ease-in-out","group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed",'group-data-[selected="true"]:uy-translate-x-[90%] group-data-[selected="true"]:uy-border-border-inverted-enabled group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-pressed group-data-[selected="true"]:group-data-[pressed]:uy-border-border-inverted-pressed',"group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled"]}}),o=g.forwardRef(({label:d,helperText:r,isLabelSrOnly:u=!1,...t},s)=>{const{container:l,indicator:i,knob:c,textWrapper:y,label:n,hintText:b}=a(),p={...t,role:"switch"};return e.jsxs(f.Switch,{...p,ref:s,className:l(),children:[e.jsx("div",{className:i(),"data-dd-privacy":"mask",children:e.jsx("div",{className:c()})}),e.jsxs("div",{className:y({className:u?"uy-sr-only":""}),"data-dd-privacy":"allow",children:[e.jsx("span",{className:n(),children:d}),r&&e.jsx("span",{className:b(),children:r})]})]})});o.displayName="ToggleSwitch";exports.ToggleSwitch=o;exports.toggleSwitch=a;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),f=require("react"),m=require("react-aria-components"),h=require("tailwind-variants"),o=h.tv({slots:{container:["uy-flex uy-gap-100 uy-group"],textWrapper:["uy-flex uy-flex-col uy-gap-50"],label:["uy-typography-body uy-text-content-form-enabled"],hintText:["uy-typography-body-small uy-text-content-neutral-low"],indicator:["uy-p-50 uy-w-500 uy-h-300 uy-flex uy-items-center","uy-rounded-pill","uy-border uy-border-solid uy-border-border-form-disabled uy-bg-surface-form-disabled","uy-cursor-pointer uy-transition-colors uy-duration-200 uy-ease-in-out","group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed","group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled group-data-[disabled]:uy-cursor-not-allowed","group-data-[focus-visible]:uy-outline-2 group-data-[focus-visible]:uy-outline group-data-[focus-visible]:uy-outline-offset-2 group-data-[focus-visible]:uy-outline-utility-focus-ring"],knob:["uy-w-200 uy-h-200 uy-rounded-circle","uy-border uy-border-solid uy-border-border-form-enabled uy-bg-surface-form-enabled","uy-transition-all uy-duration-200 uy-ease-in-out",'group-data-[selected="true"]:uy-translate-x-[90%]',"group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed","group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled"]},variants:{isDisabled:{false:{indicator:'group-data-[selected="true"]:uy-bg-surface-form-active group-data-[selected="true"]:uy-border-border-form-active group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-active group-data-[selected="true"]:group-data-[pressed]:uy-border-border-form-active',knob:'group-data-[selected="true"]:uy-border-border-inverted-enabled group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-pressed group-data-[selected="true"]:group-data-[pressed]:uy-border-border-inverted-pressed'},true:{indicator:"",knob:""}}}}),d=f.forwardRef(({label:t,helperText:r,isLabelSrOnly:u=!1,isDisabled:a,...s},i)=>{const{container:l,indicator:c,knob:y,textWrapper:n,label:b,hintText:p}=o({isDisabled:a}),g={...s,role:"switch"};return e.jsxs(m.Switch,{...g,ref:i,className:l(),isDisabled:a,children:[e.jsx("div",{className:c(),"data-dd-privacy":"mask",children:e.jsx("div",{className:y()})}),e.jsxs("div",{className:n({className:u?"uy-sr-only":""}),"data-dd-privacy":"allow",children:[e.jsx("span",{className:b(),children:t}),r&&e.jsx("span",{className:p(),children:r})]})]})});d.displayName="ToggleSwitch";exports.ToggleSwitch=d;exports.toggleSwitch=o;

package/dist/cjs/components/toggle-switch/ToggleSwitch.d.cts

@@ -1,82 +1,104 @@
 import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
 import { VariantProps } from 'tailwind-variants';
 export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}, {
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}>, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}, {
+}>, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}>, unknown, unknown, undefined>>;
+}>, unknown, unknown, undefined>>;
 interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
     /** The label for the toggle switch. */
     label: string;

package/dist/cjs/components/toggle-switch-field/ToggleSwitchField.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),p=require("react-hook-form"),f=require("../form-field/FormField.cjs"),y=require("../form-field/parts/FormControl.cjs"),b=require("../form-field/parts/FormFeedbackText.cjs"),k=require("../form-field/parts/FormHelperText.cjs"),C=require("../form-field/parts/FormLabel.cjs"),H=require("../toggle-switch/ToggleSwitch.cjs");function R({name:r,label:o,defaultSelected:t,helperText:i,switchHelperText:l,contextualLink:n,isRequired:s,isInvalid:u,isLoading:F,isDisabled:d,isReadOnly:m,requiredVariant:g,isLabelSrOnly:x,...a},h){const{control:T,watch:S}=p.useFormContext(),q=S(r),w={isRequired:s,isInvalid:u,isLoading:F,isDisabled:d,isReadOnly:m};return e.jsxs(f.FormField,{control:T,name:r,className:"uy-flex uy-flex-col uy-gap-100",...w,children:[e.jsx(C.FormLabel,{requiredVariant:g,children:o}),e.jsx(k.FormHelperText,{children:i}),e.jsx(y.FormControl,{children:e.jsx(H.ToggleSwitch,{ref:h,defaultSelected:t,isSelected:q,label:o,isLabelSrOnly:x,helperText:l,...a})}),e.jsx(b.FormFeedbackText,{}),n]})}const c=j.forwardRef(function(o,t){return R(o,t)});c.displayName="ToggleSwitchField";exports.ToggleSwitchField=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),w=require("react"),T=require("react-hook-form"),x=require("../form-field/FormField.cjs"),f=require("../form-field/parts/FormControl.cjs"),y=require("../toggle-switch/ToggleSwitch.cjs");function p({name:e,label:o,defaultSelected:t,switchHelperText:i,isInvalid:l,isLoading:n,isDisabled:s,isReadOnly:u,isLabelSrOnly:g,...d},F){const{control:m,watch:a}=T.useFormContext(),h=a(e),S={isInvalid:l,isLoading:n,isDisabled:s,isReadOnly:u};return r.jsx(x.FormField,{control:m,name:e,className:"uy-flex uy-flex-col uy-gap-100",...S,children:r.jsx(f.FormControl,{children:r.jsx(y.ToggleSwitch,{ref:F,defaultSelected:t,isSelected:h,label:o,isLabelSrOnly:g,helperText:i,...d})})})}const c=w.forwardRef(function(o,t){return p(o,t)});c.displayName="ToggleSwitchField";exports.ToggleSwitchField=c;

package/dist/cjs/components/toggle-switch-field/ToggleSwitchField.d.cts

@@ -1,19 +1,14 @@
-import { ForwardedRef, JSX, ReactNode } from 'react';
+import { ForwardedRef, JSX } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
 import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.cjs';
-import { LabelProps } from '../label/Label.cjs';
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
     /** The name of the field, which should match the form schema. */
     name: TName;
     /** The label for the toggle switch. */
     label: string;
-    /** Helper text to display below form field. */
-    helperText?: ReactNode;
     /** Helper text to display below the toggle switch. */
     switchHelperText?: string;
-    /** A contextual link to display below the toggle switch. */
-    contextualLink?: ReactNode;
     /** The default selected value of the toggle switch. */
     defaultSelected?: boolean;
     /** Whether the toggle switch is disabled. */

package/dist/cjs/index.storybook-testing.d.cts

@@ -0,0 +1 @@
+export { getTestingUtilsDatePicker } from './components/date-picker-field/test-utils.cjs';

package/dist/cjs/storybook-testing.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./components/date-picker-field/test-utils.cjs");exports.getTestingUtilsDatePicker=e.getTestingUtilsDatePicker;

package/dist/cjs/storybook-utilities/breadcrumbs/transform.d.cts

@@ -0,0 +1,2 @@
+export declare const transformDynamic: (code: string) => string;
+export declare const transformStatic: (code: string) => string;

package/dist/cjs/storybook-utilities/previewTransform.d.cts

@@ -0,0 +1 @@
+export declare const previewTransform: (code: string) => Promise<string>;

package/dist/cjs/types/testing.d.cts

@@ -0,0 +1,2 @@
+import { StoryContext } from '@storybook/react-vite';
+export type PlayCtx = StoryContext<any>;

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

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

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

@@ -2,7 +2,7 @@ import { tv as e } from "tailwind-variants";
 const s = e({
   slots: {
     base: "uy-group uy-inline-flex uy-flex-col uy-gap-50 uy-py-[1px]",
-    wrapper: "uy-inline-flex uy-items-center uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",
+    wrapper: "uy-inline-flex uy-items-start uy-gap-[2px] uy-typography-body uy-text-content-form-enabled data-[focus-visible]:uy-outline data-[focus-visible]:uy-outline-[2px] data-[focus-visible]:uy-outline-utility-focus-ring data-[focus-visible]:uy-outline-offset-2 uy-rounded-25",
     asterisk: "uy-text-content-danger",
     optionalTag: "uy-typography-body",
     descriptionsContainer: "uy-ml-300 uy-leading-0 uy-inline-flex uy-flex-col uy-gap-50",

package/dist/esm/components/checkbox/parts/CheckboxIndicator.js

@@ -3,7 +3,7 @@ import { tv as u } from "tailwind-variants";
 const c = u({
   slots: {
     base: [
-      "uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-border-solid uy-transition-all uy-duration-100"
+      "uy-flex uy-items-center uy-justify-center uy-rounded-50 uy-m-25 uy-w-200 uy-h-200 uy-text-content-inverted uy-border uy-border-solid uy-transition-all uy-duration-100"
     ],
     checkmark: [
       "uy-w-[16px] uy-fill-none uy-stroke-[2px] uy-stroke-content-inverted uy-transition-all uy-duration-500"

package/dist/esm/components/date-picker-field/test-utils.d.ts

@@ -0,0 +1,12 @@
+import { CalendarDate } from '@internationalized/date';
+import { PlayCtx } from '../../types/testing.js';
+/**
+ * Factory to get date picker testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsDatePicker: (context: PlayCtx) => {
+    fillCalendarDate: ({ labelText, calendarDate, }: {
+        labelText: string;
+        calendarDate: CalendarDate;
+    }) => Promise<void>;
+};

package/dist/esm/components/date-picker-field/test-utils.js

@@ -0,0 +1,35 @@
+import { within as s, userEvent as n } from "storybook/test";
+const y = (r) => ({
+  fillCalendarDate: async ({
+    labelText: a,
+    calendarDate: i
+  }) => {
+    await r.step(`Fill date picker ${a}`, async () => {
+      const e = s(r.canvasElement).getAllByLabelText(
+        a,
+        {
+          exact: !1,
+          selector: "span"
+        }
+      );
+      if (e.length !== 3)
+        throw new Error(`Date field for ${a} not found`);
+      await n.type(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        e.find((t) => t.getAttribute("data-type") === "day"),
+        String(i.day)
+      ), await n.type(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        e.find((t) => t.getAttribute("data-type") === "month"),
+        String(i.month)
+      ), await n.type(
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        e.find((t) => t.getAttribute("data-type") === "year"),
+        String(i.year)
+      );
+    });
+  }
+});
+export {
+  y as getTestingUtilsDatePicker
+};

package/dist/esm/components/select-field/test-utils.d.ts

@@ -0,0 +1,11 @@
+import { PlayCtx } from '../../types/testing.js';
+/**
+ * Factory to get select testing utils
+ * @param context the story context
+ */
+export declare const getTestingUtilsSelect: (context: PlayCtx) => {
+    selectOption: ({ labelText, optionName, }: {
+        labelText: string;
+        optionName: string;
+    }) => Promise<void>;
+};

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

@@ -1,82 +1,104 @@
 import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
 import { VariantProps } from 'tailwind-variants';
 export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}, {
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}>, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}, {
+}>, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}>, unknown, unknown, undefined>>;
+}>, unknown, unknown, undefined>>;
 interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
     /** The label for the toggle switch. */
     label: string;

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

@@ -1,8 +1,8 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
 import { Switch as g } from "react-aria-components";
-import { tv as f } from "tailwind-variants";
-const m = f({
+import { tv as m } from "tailwind-variants";
+const v = m({
   slots: {
     container: ["uy-flex uy-gap-100 uy-group"],
     textWrapper: ["uy-flex uy-flex-col uy-gap-50"],
@@ -14,7 +14,6 @@ const m = f({
       "uy-border uy-border-solid uy-border-border-form-disabled uy-bg-surface-form-disabled",
       "uy-cursor-pointer uy-transition-colors uy-duration-200 uy-ease-in-out",
       "group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed",
-      'group-data-[selected="true"]:uy-bg-surface-form-active group-data-[selected="true"]:uy-border-border-form-active group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-active group-data-[selected="true"]:group-data-[pressed]:uy-border-border-form-active',
       "group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled group-data-[disabled]:uy-cursor-not-allowed",
       "group-data-[focus-visible]:uy-outline-2 group-data-[focus-visible]:uy-outline group-data-[focus-visible]:uy-outline-offset-2 group-data-[focus-visible]:uy-outline-utility-focus-ring"
     ],
@@ -22,39 +21,61 @@ const m = f({
       "uy-w-200 uy-h-200 uy-rounded-circle",
       "uy-border uy-border-solid uy-border-border-form-enabled uy-bg-surface-form-enabled",
       "uy-transition-all uy-duration-200 uy-ease-in-out",
+      'group-data-[selected="true"]:uy-translate-x-[90%]',
       "group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed",
-      'group-data-[selected="true"]:uy-translate-x-[90%] group-data-[selected="true"]:uy-border-border-inverted-enabled group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-pressed group-data-[selected="true"]:group-data-[pressed]:uy-border-border-inverted-pressed',
       "group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled"
     ]
+  },
+  variants: {
+    isDisabled: {
+      false: {
+        indicator: 'group-data-[selected="true"]:uy-bg-surface-form-active group-data-[selected="true"]:uy-border-border-form-active group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-active group-data-[selected="true"]:group-data-[pressed]:uy-border-border-form-active',
+        knob: 'group-data-[selected="true"]:uy-border-border-inverted-enabled group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-pressed group-data-[selected="true"]:group-data-[pressed]:uy-border-border-inverted-pressed'
+      },
+      true: {
+        indicator: "",
+        knob: ""
+      }
+    }
   }
-}), h = n(
+}), h = f(
   ({
-    label: o,
+    label: d,
     helperText: r,
-    isLabelSrOnly: d = !1,
-    ...u
-  }, t) => {
-    const { container: s, indicator: l, knob: i, textWrapper: y, label: p, hintText: c } = m(), b = { ...u, role: "switch" };
-    return /* @__PURE__ */ a(g, { ...b, ref: t, className: s(), children: [
-      /* @__PURE__ */ e("div", { className: l(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: i() }) }),
-      /* @__PURE__ */ a(
-        "div",
-        {
-          className: y({
-            className: d ? "uy-sr-only" : ""
-          }),
-          "data-dd-privacy": "allow",
-          children: [
-            /* @__PURE__ */ e("span", { className: p(), children: o }),
-            r && /* @__PURE__ */ e("span", { className: c(), children: r })
-          ]
-        }
-      )
-    ] });
+    isLabelSrOnly: u = !1,
+    isDisabled: a,
+    ...t
+  }, s) => {
+    const { container: l, indicator: i, knob: y, textWrapper: c, label: p, hintText: b } = v({ isDisabled: a }), n = { ...t, role: "switch" };
+    return /* @__PURE__ */ o(
+      g,
+      {
+        ...n,
+        ref: s,
+        className: l(),
+        isDisabled: a,
+        children: [
+          /* @__PURE__ */ e("div", { className: i(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: y() }) }),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: c({
+                className: u ? "uy-sr-only" : ""
+              }),
+              "data-dd-privacy": "allow",
+              children: [
+                /* @__PURE__ */ e("span", { className: p(), children: d }),
+                r && /* @__PURE__ */ e("span", { className: b(), children: r })
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
 h.displayName = "ToggleSwitch";
 export {
   h as ToggleSwitch,
-  m as toggleSwitch
+  v as toggleSwitch
 };

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.d.ts

@@ -1,19 +1,14 @@
-import { ForwardedRef, JSX, ReactNode } from 'react';
+import { ForwardedRef, JSX } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
 import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
-import { LabelProps } from '../label/Label.js';
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
     /** The name of the field, which should match the form schema. */
     name: TName;
     /** The label for the toggle switch. */
     label: string;
-    /** Helper text to display below form field. */
-    helperText?: ReactNode;
     /** Helper text to display below the toggle switch. */
     switchHelperText?: string;
-    /** A contextual link to display below the toggle switch. */
-    contextualLink?: ReactNode;
     /** The default selected value of the toggle switch. */
     defaultSelected?: boolean;
     /** Whether the toggle switch is disabled. */

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.js

@@ -1,67 +1,53 @@
-import { jsxs as T, jsx as o } from "react/jsx-runtime";
-import { forwardRef as w } from "react";
-import { useFormContext as S } from "react-hook-form";
-import { FormField as y } from "../form-field/FormField.js";
-import { FormControl as j } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as C } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as N } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as P } from "../form-field/parts/FormLabel.js";
-import { ToggleSwitch as b } from "../toggle-switch/ToggleSwitch.js";
-function k({
-  name: e,
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { useFormContext as F } from "react-hook-form";
+import { FormField as a } from "../form-field/FormField.js";
+import { FormControl as w } from "../form-field/parts/FormControl.js";
+import { ToggleSwitch as x } from "../toggle-switch/ToggleSwitch.js";
+function S({
+  name: o,
   label: r,
-  defaultSelected: t,
-  helperText: m,
+  defaultSelected: e,
   switchHelperText: i,
-  contextualLink: l,
-  isRequired: c,
-  isInvalid: n,
-  isLoading: p,
-  isDisabled: f,
-  isReadOnly: s,
-  requiredVariant: d,
-  isLabelSrOnly: F,
-  ...g
-}, h) {
-  const { control: u, watch: x } = S(), a = x(e);
-  return /* @__PURE__ */ T(
-    y,
+  isInvalid: l,
+  isLoading: m,
+  isDisabled: c,
+  isReadOnly: n,
+  isLabelSrOnly: p,
+  ...f
+}, s) {
+  const { control: g, watch: d } = F(), h = d(o);
+  return /* @__PURE__ */ t(
+    a,
     {
-      control: u,
-      name: e,
+      control: g,
+      name: o,
       className: "uy-flex uy-flex-col uy-gap-100",
       ...{
-        isRequired: c,
-        isInvalid: n,
-        isLoading: p,
-        isDisabled: f,
-        isReadOnly: s
+        isInvalid: l,
+        isLoading: m,
+        isDisabled: c,
+        isReadOnly: n
       },
-      children: [
-        /* @__PURE__ */ o(P, { requiredVariant: d, children: r }),
-        /* @__PURE__ */ o(N, { children: m }),
-        /* @__PURE__ */ o(j, { children: /* @__PURE__ */ o(
-          b,
-          {
-            ref: h,
-            defaultSelected: t,
-            isSelected: a,
-            label: r,
-            isLabelSrOnly: F,
-            helperText: i,
-            ...g
-          }
-        ) }),
-        /* @__PURE__ */ o(C, {}),
-        l
-      ]
+      children: /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
+        x,
+        {
+          ref: s,
+          defaultSelected: e,
+          isSelected: h,
+          label: r,
+          isLabelSrOnly: p,
+          helperText: i,
+          ...f
+        }
+      ) })
     }
   );
 }
-const v = w(function(r, t) {
-  return k(r, t);
+const T = u(function(r, e) {
+  return S(r, e);
 });
-v.displayName = "ToggleSwitchField";
+T.displayName = "ToggleSwitchField";
 export {
-  v as ToggleSwitchField
+  T as ToggleSwitchField
 };

package/dist/esm/index.storybook-testing.d.ts

@@ -0,0 +1 @@
+export { getTestingUtilsDatePicker } from './components/date-picker-field/test-utils.js';

package/dist/esm/storybook-testing.js

@@ -0,0 +1,4 @@
+import { getTestingUtilsDatePicker as i } from "./components/date-picker-field/test-utils.js";
+export {
+  i as getTestingUtilsDatePicker
+};

package/dist/esm/storybook-utilities/breadcrumbs/transform.d.ts

@@ -0,0 +1,2 @@
+export declare const transformDynamic: (code: string) => string;
+export declare const transformStatic: (code: string) => string;

package/dist/esm/storybook-utilities/previewTransform.d.ts

@@ -0,0 +1 @@
+export declare const previewTransform: (code: string) => Promise<string>;

package/dist/esm/types/testing.d.ts

@@ -0,0 +1,2 @@
+import { StoryContext } from '@storybook/react-vite';
+export type PlayCtx = StoryContext<any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "0.0.0-alpha.11",
+  "version": "0.0.0-alpha.12",
   "main": "./dist/cjs/index.cjs",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.cts",
@@ -10,14 +10,29 @@
     ".": {
       "import": {
         "types": "./dist/esm/index.d.ts",
+        "hrAppsLocalDev": "./src/index.ts",
         "default": "./dist/esm/index.js"
       },
       "require": {
         "types": "./dist/cjs/index.d.cts",
+        "hrAppsLocalDev": "./src/index.ts",
         "default": "./dist/cjs/index.cjs"
       }
     },
-    "./i18n/*.json": "./i18n/*.json"
+    "./testing-utils/storybook": {
+      "import": {
+        "types": "./dist/esm/index.storybook-testing.d.ts",
+        "hrAppsLocalDev": "./src/index.storybook-testing.ts",
+        "default": "./dist/esm/storybook-testing.js"
+      },
+      "require": {
+        "types": "./dist/cjs/index.storybook-testing.d.cts",
+        "hrAppsLocalDev": "./src/index.storybook-testing.ts",
+        "default": "./dist/cjs/storybook-testing.cjs"
+      }
+    },
+    "./i18n/*.json": "./i18n/*.json",
+    "./package.json": "./package.json"
   },
   "files": [
     "dist",
@@ -33,42 +48,45 @@
     "@react-types/shared": "3.26.0",
     "@use-gesture/react": "10.3.1",
     "react": "18.3.1",
-    "react-aria": "3.41.0",
-    "react-aria-components": "1.10.0",
+    "react-aria": "3.41.1",
+    "react-aria-components": "1.10.1",
     "react-dom": "18.3.1",
     "react-hook-form": "7.50.1",
     "react-hot-toast": "2.5.1",
-    "react-intl": "6.5.0",
+    "react-intl": "7.1.3",
     "react-stately": "3.36.1",
     "tailwind-merge": "2.5.2",
     "tailwind-variants": "0.2.1",
     "usehooks-ts": "3.1.0",
-    "zod": "3.25.57"
+    "zod": "3.25.67"
   },
   "peerDependencies": {
     "@hookform/devtools": "4.3.3",
-    "@payfit/unity-icons": "0.0.0-alpha.11",
-    "@payfit/unity-themes": "0.0.0-alpha.11",
+    "@payfit/unity-icons": "0.0.0-alpha.12",
+    "@payfit/unity-themes": "0.0.0-alpha.12",
+    "@storybook/react-vite": "^9",
     "@tanstack/react-table": "8.21.3",
     "history": "4.10.1",
-    "react": "17.0.2",
-    "react-dom": "17.0.2",
-    "react-hook-form": "7.50.1",
+    "prettier": "^3",
+    "react-hook-form": "^7",
     "react-router-dom": "5.3.4",
-    "zod": "3.25.57"
+    "storybook": "^9",
+    "zod": "3.25.67"
   },
   "devDependencies": {
     "@fontsource/inter": "5.0.19",
     "@fontsource/source-serif-4": "5.0.19",
     "@hookform/devtools": "4.3.3",
     "@internationalized/date": "3.8.2",
-    "@payfit/unity-icons": "0.0.0-alpha.11",
-    "@payfit/unity-themes": "0.0.0-alpha.11",
-    "@storybook/addon-a11y": "9.0.6",
-    "@storybook/addon-docs": "9.0.6",
-    "@storybook/addon-links": "9.0.6",
-    "@storybook/addon-vitest": "9.0.6",
-    "@storybook/react-vite": "9.0.6",
+    "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
+    "@payfit/unity-icons": "0.0.0-alpha.12",
+    "@payfit/unity-illustrations": "0.0.0-alpha.12",
+    "@payfit/unity-themes": "0.0.0-alpha.12",
+    "@storybook/addon-a11y": "9.0.11",
+    "@storybook/addon-docs": "9.0.11",
+    "@storybook/addon-links": "9.0.11",
+    "@storybook/addon-vitest": "9.0.11",
+    "@storybook/react-vite": "9.0.11",
     "@testing-library/dom": "10.4.0",
     "@testing-library/react": "16.2.0",
     "@types/react": "18.3.18",
@@ -81,11 +99,13 @@
     "msw": "2.8.4",
     "msw-storybook-addon": "2.0.4",
     "playwright": "1.49.1",
+    "prettier": "3.1.0",
     "react-docgen-typescript": "2.2.2",
     "react-hot-toast": "2.5.1",
-    "storybook": "9.0.6",
+    "storybook": "9.0.11",
     "storybook-addon-pseudo-states": "9.0.6",
     "storybook-addon-tag-badges": "2.0.0",
+    "storybook-mock-date-decorator": "3.0.0",
     "tailwindcss": "3.4.10",
     "typescript": "5.7.3",
     "vite": "6.3.5",
@@ -102,6 +122,9 @@
     "history": {
       "optional": true
     },
+    "prettier": {
+      "optional": true
+    },
     "react-router-dom": {
       "optional": true
     },