@preply/ds-docs 3.3.0 → 3.4.1

package/dist/assets/{Dialog.stories-BPe1wKjQ.js → Dialog.stories-Cii2x2YO.js}

@@ -1,28 +1,26 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{a as I}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as ke,u as y,a as h,e as p}from"./index-DDyIDR-R.js";import{R as Be,P as Te,O as Ie,C as Pe,T as He,D as Ee,a as Fe}from"./index-wFyje0se.js";import{B as l}from"./Button-DhJ1EYrN.js";import{I as Ae}from"./IconButton-Do29z7Px.js";import{H as Re}from"./Heading-sy1TMpjs.js";import{g as Ve}from"./shared-strings-CcWGHelY.js";import{u as Ne}from"./index-BfBdt3zW.js";import{g as We}from"./PortalElementProvider-D4ltrA8j.js";import{g as Le}from"./index-DdzHuZ-Y.js";import{w as P}from"./componentNames-CVVyamkx.js";import{m as qe,s as Me}from"./classNames-BUL1Zq7e.js";import{S as u}from"./Steps-D9_n9bWW.js";import{I as Ue}from"./Icon-C3PbN7-O.js";import{A as Je}from"./Avatar-BkCAqOuF.js";import{F as Ze}from"./TokyoUIInfo-nHX2jpp7.js";import{L as Ke}from"./LayoutFlex-oRwI31fW.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./index-DRKYGVyc.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-CFf1N6e3.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./ProgressSteps-CuGX9_Fy.js";import"./message-BraTJ16C.js";import"./constants--ewUoBsO.js";import"./layout-relative.module-ed9bC4H4.js";const Ye=({title:s,titleId:o,...t},n)=>a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:n,"aria-labelledby":o,...t},s?a.createElement("title",{id:o},s):null,a.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),Xe=a.forwardRef(Ye),Ge="overlay__NM-kk",Qe="overlayShow__SQuh9",$e="overlayHide__UA0Uh",et="Dialog__GqDxV",tt="mobileContentShow__1akQp",ot="mobileContentHide__GXooF",st="contentShow__RpFHp",nt="contentHide__Y-gr5",at="header__2EPvy",it="description__0f9xh",rt="actions__hIL-J",m={overlay:Ge,overlayShow:Qe,overlayHide:$e,Dialog:et,mobileContentShow:tt,mobileContentHide:ot,"Dialog--size-xs":"Dialog--size-xs__W0yGm","Dialog--narrow-l--size-xs":"Dialog--narrow-l--size-xs__ljCvr","Dialog--medium-s--size-xs":"Dialog--medium-s--size-xs__t-4Ow","Dialog--medium-l--size-xs":"Dialog--medium-l--size-xs__yc1ae","Dialog--wide-s--size-xs":"Dialog--wide-s--size-xs__Id0f5","Dialog--wide-l--size-xs":"Dialog--wide-l--size-xs__Pnlyp","Dialog--size-sm":"Dialog--size-sm__rE3Y-","Dialog--narrow-l--size-sm":"Dialog--narrow-l--size-sm__M8-BH","Dialog--medium-s--size-sm":"Dialog--medium-s--size-sm__UPlli","Dialog--medium-l--size-sm":"Dialog--medium-l--size-sm__nAW8A","Dialog--wide-s--size-sm":"Dialog--wide-s--size-sm__i0pbj","Dialog--wide-l--size-sm":"Dialog--wide-l--size-sm__PghJ-","Dialog--size-md":"Dialog--size-md__HWxI4","Dialog--narrow-l--size-md":"Dialog--narrow-l--size-md__8jZY3","Dialog--medium-s--size-md":"Dialog--medium-s--size-md__dQ1TZ","Dialog--medium-l--size-md":"Dialog--medium-l--size-md__kcNF8","Dialog--wide-s--size-md":"Dialog--wide-s--size-md__KDVax","Dialog--wide-l--size-md":"Dialog--wide-l--size-md__mV57k","Dialog--size-lg":"Dialog--size-lg__Lis4-","Dialog--narrow-l--size-lg":"Dialog--narrow-l--size-lg__h5Tdx","Dialog--medium-s--size-lg":"Dialog--medium-s--size-lg__qci5k","Dialog--medium-l--size-lg":"Dialog--medium-l--size-lg__JCkaM","Dialog--wide-s--size-lg":"Dialog--wide-s--size-lg__eJlxf","Dialog--wide-l--size-lg":"Dialog--wide-l--size-lg__mo796",contentShow:st,contentHide:nt,header:at,description:it,actions:rt},lt=({open:s,title:o,description:t,children:n,size:d="md",hideHeader:g,onClose:f,dataset:Se})=>{const{formatMessage:we}=Ne(),ze=We(),be=Le(Se,{preplyDsComponent:P.Dialog}),Oe=qe(m,P.Dialog,[Me("size",d)]).join(" "),je=a.useCallback(_e=>{_e||f==null||f()},[f]);return e.jsx(Be,{open:s,onOpenChange:je,children:e.jsxs(Te,{container:ze,children:[e.jsx(Ie,{className:m.overlay,"data-testid":"dialog-overlay"}),e.jsxs(Pe,{...be,className:Oe,children:[e.jsxs("header",{className:m.header,children:[e.jsxs("hgroup",{hidden:g,children:[e.jsx(He,{asChild:!0,children:e.jsx(Re,{tag:"h3",variant:"medium",children:o})}),t&&e.jsx(Ee,{asChild:!0,children:e.jsx("p",{className:m.description,children:t})})]}),e.jsx(Fe,{asChild:!0,children:e.jsx(Ae,{variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:we(Ve.close),svg:Xe})})]}),n]})]})})},dt=({primaryLabel:s,secondaryLabel:o,onPrimaryClick:t,onSecondaryClick:n})=>e.jsxs("div",{className:m.actions,children:[e.jsx(l,{variant:"secondary",onClick:n,children:o}),e.jsx(l,{variant:"primary",onClick:t,children:s})]}),i=Object.assign(lt,{Actions:dt});try{i.displayName="Dialog",i.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{a as H}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as He,u as f,a as v,e as g}from"./index-DDyIDR-R.js";import{R as Ee,P as Fe,O as Re,C as Ae,T as Le,D as We,a as Ne}from"./index-wFyje0se.js";import{B as d}from"./Button-BSyqsKC5.js";import{I as Ve}from"./IconButton-BqwVuKH2.js";import{H as qe}from"./Heading-B0rTmnad.js";import{g as Me}from"./shared-strings-CcWGHelY.js";import{u as Ue}from"./index-BfBdt3zW.js";import{g as Je}from"./PortalElementProvider-D4ltrA8j.js";import{g as Ze}from"./index-DdzHuZ-Y.js";import{w as F}from"./componentNames-CpCJzpB9.js";import{m as Ke,s as Ye}from"./classNames-BUL1Zq7e.js";import{S as m}from"./Steps-BIsSinlU.js";import{I as Xe}from"./Icon-BLj2hNSU.js";import{A as Ge}from"./Avatar-B2H0W8KL.js";import{F as Qe}from"./TokyoUIInfo-nHX2jpp7.js";import{L as $e}from"./LayoutFlex-BPtL2qZR.js";import{N as et}from"./NumberField-5gideZr4.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.js";import"./index-DRKYGVyc.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-Bdtn25V2.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./ProgressSteps-BBrWCYks.js";import"./message-BraTJ16C.js";import"./constants--ewUoBsO.js";import"./layout-relative.module-ed9bC4H4.js";import"./FormControl-CeIJk4_Z.js";import"./Input-GBJ_wz6j.js";import"./InputContainer-Bk0tgFnW.js";const tt=({title:o,titleId:s,...t},n)=>a.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 24 24",ref:n,"aria-labelledby":s,...t},o?a.createElement("title",{id:s},o):null,a.createElement("path",{fillRule:"evenodd",d:"M7.207 5.793a1 1 0 0 0-1.414 1.414L10.586 12l-4.793 4.793a1 1 0 1 0 1.414 1.414L12 13.414l4.793 4.793a1 1 0 0 0 1.414-1.414L13.414 12l4.793-4.793a1 1 0 0 0-1.414-1.414L12 10.586 7.207 5.793Z",clipRule:"evenodd"})),st=a.forwardRef(tt),ot="overlay__NM-kk",nt="overlayShow__SQuh9",at="overlayHide__UA0Uh",it="Dialog__GqDxV",rt="fullscreen__mOBaF",lt="mobileContentShow__1akQp",dt="mobileContentHide__GXooF",ct="contentShow__RpFHp",pt="contentHide__Y-gr5",ut="header__2EPvy",gt="description__0f9xh",mt="actions__hIL-J",y={overlay:ot,overlayShow:nt,overlayHide:at,Dialog:it,fullscreen:rt,mobileContentShow:lt,mobileContentHide:dt,"Dialog--size-xs":"Dialog--size-xs__W0yGm","Dialog--size-sm":"Dialog--size-sm__rE3Y-","Dialog--size-md":"Dialog--size-md__HWxI4","Dialog--size-lg":"Dialog--size-lg__Lis4-",contentShow:ct,contentHide:pt,"Dialog--narrow-l--size-xs":"Dialog--narrow-l--size-xs__ljCvr","Dialog--medium-s--size-xs":"Dialog--medium-s--size-xs__t-4Ow","Dialog--medium-l--size-xs":"Dialog--medium-l--size-xs__yc1ae","Dialog--wide-s--size-xs":"Dialog--wide-s--size-xs__Id0f5","Dialog--wide-l--size-xs":"Dialog--wide-l--size-xs__Pnlyp","Dialog--narrow-l--size-sm":"Dialog--narrow-l--size-sm__M8-BH","Dialog--medium-s--size-sm":"Dialog--medium-s--size-sm__UPlli","Dialog--medium-l--size-sm":"Dialog--medium-l--size-sm__nAW8A","Dialog--wide-s--size-sm":"Dialog--wide-s--size-sm__i0pbj","Dialog--wide-l--size-sm":"Dialog--wide-l--size-sm__PghJ-","Dialog--narrow-l--size-md":"Dialog--narrow-l--size-md__8jZY3","Dialog--medium-s--size-md":"Dialog--medium-s--size-md__dQ1TZ","Dialog--medium-l--size-md":"Dialog--medium-l--size-md__kcNF8","Dialog--wide-s--size-md":"Dialog--wide-s--size-md__KDVax","Dialog--wide-l--size-md":"Dialog--wide-l--size-md__mV57k","Dialog--narrow-l--size-lg":"Dialog--narrow-l--size-lg__h5Tdx","Dialog--medium-s--size-lg":"Dialog--medium-s--size-lg__qci5k","Dialog--medium-l--size-lg":"Dialog--medium-l--size-lg__JCkaM","Dialog--wide-s--size-lg":"Dialog--wide-s--size-lg__eJlxf","Dialog--wide-l--size-lg":"Dialog--wide-l--size-lg__mo796",header:ut,description:gt,actions:mt},yt=({open:o,title:s,description:t,children:n,size:i="md",hideHeader:u,onClose:p,dataset:h})=>{const{formatMessage:E}=Ue(),ke=Je(),_e=ft(o),Be=Ze(h,{preplyDsComponent:F.Dialog}),Te=Ke(y,F.Dialog,[Ye("size",i)]).join(" "),Ie=a.useCallback(Pe=>{Pe||p==null||p()},[p]);return e.jsx(Ee,{open:o,onOpenChange:Ie,children:e.jsxs(Fe,{container:ke,children:[e.jsx(Re,{className:y.overlay,"data-testid":"dialog-overlay"}),e.jsxs(Ae,{...Be,ref:_e,className:Te,children:[e.jsxs("header",{className:y.header,children:[e.jsxs("hgroup",{hidden:u,children:[e.jsx(Le,{asChild:!0,children:e.jsx(qe,{tag:"h3",variant:"medium",children:s})}),t&&e.jsx(We,{asChild:!0,children:e.jsx("p",{className:y.description,children:t})})]}),e.jsx(Ne,{asChild:!0,children:e.jsx(Ve,{variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:E(Me.close),svg:st})})]}),n]})]})})},ht=({primaryLabel:o,secondaryLabel:s,onPrimaryClick:t,onSecondaryClick:n})=>e.jsxs("div",{className:y.actions,children:[e.jsx(d,{variant:"secondary",onClick:n,children:s}),e.jsx(d,{variant:"primary",onClick:t,children:o})]}),r=Object.assign(yt,{Actions:ht});function ft(o){const[s,t]=a.useState(null),n=a.useCallback(i=>t(i),[]);return a.useEffect(()=>{if(!o||!s)return;const i=async()=>{const p=s.getAnimations().map(E=>E.finished);await Promise.allSettled(p);const{y:h}=s.getBoundingClientRect();s.classList.toggle(y.fullscreen,h===0)};i(),window.addEventListener("resize",i);const u=new ResizeObserver(i);return u.observe(s),()=>{window.removeEventListener("resize",i),u.disconnect()}},[o,s]),n}try{r.displayName="Dialog",r.__docgenInfo={description:`A modal dialog component that can be used to show content in an overlay.
 
 Composed of:
 - Dialog: The main component
-- Dialog.Actions: Footer actions with primary and secondary buttons`,displayName:"Dialog",props:{open:{defaultValue:null,description:"Controls the visibility of the dialog",name:"open",required:!0,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},title:{defaultValue:null,description:"Title displayed in the dialog header",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:"Optional description displayed below the title",name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},children:{defaultValue:null,description:"Content to be rendered inside the dialog",name:"children",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},size:{defaultValue:{value:"md"},description:"Controls the width of the dialog on desktop and height on mobile",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"md"'},{value:'"sm"'},{value:'"lg"'},{value:'ResponsiveProp<"xs" | "md" | "sm" | "lg">'}]}},hideHeader:{defaultValue:{value:"false"},description:`When true, visually hides the header (title and description) while
+- Dialog.Actions: Footer actions with primary and secondary buttons`,displayName:"Dialog",props:{open:{defaultValue:null,description:"Controls the visibility of the dialog",name:"open",required:!0,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},title:{defaultValue:null,description:"Title displayed in the dialog header",name:"title",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:"Optional description displayed below the title",name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},children:{defaultValue:null,description:"Content to be rendered inside the dialog",name:"children",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},size:{defaultValue:{value:"md"},description:"Controls the width of the dialog on desktop and height on mobile",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"sm"'},{value:'"md"'},{value:'"lg"'},{value:'ResponsiveProp<"xs" | "sm" | "md" | "lg">'}]}},hideHeader:{defaultValue:{value:"false"},description:`When true, visually hides the header (title and description) while
 keeping it accessible to screen readers`,name:"hideHeader",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:`Callback fired when the user tries to close the dialog (via escape
-key, overlay click, or close button).`,name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const Gt={title:"Components/Dialog",component:i,parameters:{docs:{story:{inline:!1,height:600}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{onClose:ke()}},r=e.jsx("div",{style:{width:"100%",height:"200px",backgroundColor:"#e0e0e0"}}),c=async({canvas:s,step:o})=>{let t;return await o("Open dialog",async()=>{const n=s.getByTestId("trigger");return await y.click(n),h(()=>(t=s.getByTestId("dialog"),p(t).toBeVisible()))}),t},v={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"xs",title:"Extra Small Dialog",dataset:{testid:"dialog"},children:r})]})},play:c},x={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"sm",title:"Small Dialog",dataset:{testid:"dialog"},children:r})]})},play:c},C={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:"Medium Dialog",dataset:{testid:"dialog"},children:r})]})},play:c},D={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"lg",title:"Large Dialog",dataset:{testid:"dialog"},children:r})]})},play:c},S={parameters:{docs:{description:{story:`
+key, overlay click, or close button).`,name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const ds={title:"Components/Dialog",component:r,parameters:{docs:{story:{inline:!1,height:600}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{onClose:He()}},l=e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),c=async({canvas:o,step:s})=>{let t;return await s("Open dialog",async()=>{const n=o.getByTestId("trigger");return await f.click(n),v(()=>(t=o.getByTestId("dialog"),g(t).toBeVisible()))}),t},C={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"xs",title:"Extra Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},x={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"sm",title:"Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},D={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:"Medium Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},S={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"lg",title:"Large Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},w={parameters:{docs:{description:{story:`
 The Dialog component adapts to different screen sizes through responsive size props.
 Use an object with breakpoints as keys to specify different sizes at different viewport widths:
 
 \`\`\`tsx
 <Dialog
   size={{
-    _: 'lg',         // Default size (mobile)
-    'narrow-l': 'xs' // Size at 400px and above
+    _: 'xs',
+    'medium-l': 'lg'
   }}
 />
 \`\`\`
-
-This example uses a full-width dialog on mobile and a compact dialog on larger screens.
-                `}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:{_:"lg","narrow-l":"xs"},title:"Responsive Dialog",description:"This dialog changes size based on the viewport width: `lg` on mobile, `xs` on larger screens",dataset:{testid:"dialog"},children:r})]})},play:c},w={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:"Visually Hidden Title",description:"This header is hidden visually but still accessible to screen readers",hideHeader:!0,dataset:{testid:"dialog"},children:r})]})},play:c},z={render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsxs(i,{open:o,onClose:()=>t(!1),size:"md",title:"Dialog Title",description:"This is the dialog description.",dataset:{testid:"dialog"},children:[r,e.jsx(i.Actions,{primaryLabel:"Primary",secondaryLabel:"Secondary",onPrimaryClick:I("Primary button clicked"),onSecondaryClick:I("Secondary button clicked")})]})]})},play:c},b={parameters:{docs:{description:{story:`
+                `}}},render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:{_:"xs","medium-l":"lg"},title:"Width Responsivness",description:"Change the window width to see the Dialog width respond to it",dataset:{testid:"dialog"},children:l})]})},play:c},b={render:function(s){const[t,n]=a.useState(!1),[i,u]=a.useState(1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsxs(r,{open:t,onClose:()=>{var p;n(!1),(p=s.onClose)==null||p.call(s)},size:"md",title:"Height Responsiveness",description:"Change the number of children to see the Dialog style respond to the height change",dataset:{testid:"dialog"},children:[e.jsx(et,{label:"Child count",value:i,onChange:p=>u(parseInt(p.target.value)),required:!0}),e.jsx("br",{}),Array.from({length:i},(p,h)=>e.jsx(a.Fragment,{children:l},h)),e.jsx(r.Actions,{primaryLabel:"Primary",secondaryLabel:"Secondary",onPrimaryClick:H("Primary button clicked"),onSecondaryClick:H("Secondary button clicked")})]})]})},play:c},z={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:"Visually Hidden Title",description:"This header is hidden visually but still accessible to screen readers",hideHeader:!0,dataset:{testid:"dialog"},children:l})]})},play:c},O={render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsxs(r,{open:s,onClose:()=>t(!1),size:"md",title:"Dialog Title",description:"This is the dialog description.",dataset:{testid:"dialog"},children:[l,e.jsx(r.Actions,{primaryLabel:"Primary",secondaryLabel:"Secondary",onPrimaryClick:H("Primary button clicked"),onSecondaryClick:H("Secondary button clicked")})]})]})},play:c},j={parameters:{docs:{description:{story:`
 The Dialog component can be used with the Steps component to create multi-step flows.
 You can hide the Dialog's header using \`hideHeader\` and add your own headers to each step,
 like in this story.
-                `}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:"Hidden Dialog Title",hideHeader:!0,dataset:{testid:"dialog"},children:e.jsxs(u,{"aria-label":"Onboarding Steps",children:[e.jsx(u.Step,{title:"Profile",description:"Tell us more about yourself",children:r}),e.jsx(u.Step,{title:"Subject",description:"What do you want to learn?",children:r}),e.jsx(u.Step,{title:"Availability",description:"When are you available?",children:r}),e.jsx("br",{}),e.jsxs(Ke,{justifyContent:"space-between",children:[e.jsx(u.Previous,{}),e.jsx(u.Next,{})]})]})})]})},play:c},O={parameters:{docs:{description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title."}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx(Ue,{svg:Ze}),e.jsx("span",{children:"Information Dialog"})]}),description:"This dialog title includes an icon component",dataset:{testid:"dialog"},children:r})]})},play:c},j={parameters:{docs:{description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title."}}},render:function(){const[o,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(Je,{size:"s",alt:"User"}),e.jsx("span",{children:"User Profile"})]}),description:"This dialog shows a user profile with an avatar in the title",dataset:{testid:"dialog"},children:r})]})},play:c},_={parameters:{docs:{description:{story:`
+                `}}},render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:"Hidden Dialog Title",hideHeader:!0,dataset:{testid:"dialog"},children:e.jsxs(m,{"aria-label":"Onboarding Steps",children:[e.jsx(m.Step,{title:"Profile",description:"Tell us more about yourself",children:l}),e.jsx(m.Step,{title:"Subject",description:"What do you want to learn?",children:l}),e.jsx(m.Step,{title:"Availability",description:"When are you available?",children:l}),e.jsx("br",{}),e.jsxs($e,{justifyContent:"space-between",children:[e.jsx(m.Previous,{}),e.jsx(m.Next,{})]})]})})]})},play:c},k={parameters:{docs:{description:{story:"A dialog with an Icon component in the title. This demonstrates how to use React elements in the title."}}},render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx(Xe,{svg:Qe}),e.jsx("span",{children:"Information Dialog"})]}),description:"This dialog title includes an icon component",dataset:{testid:"dialog"},children:l})]})},play:c},_={parameters:{docs:{description:{story:"A dialog with an Avatar component in the title. This demonstrates how to use compound components in the title."}}},render:function(){const[s,t]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(Ge,{size:"s",alt:"User"}),e.jsx("span",{children:"User Profile"})]}),description:"This dialog shows a user profile with an avatar in the title",dataset:{testid:"dialog"},children:l})]})},play:c},B={parameters:{docs:{description:{story:`
 The Dialog component provides CSS property escape hatches for controlling the z-index of both the overlay and content:
 
 - \`--ds-dialog-overlay-z-index-override\`: Controls the overlay's z-index
@@ -34,7 +32,7 @@ In the following example, the stacking order of the dialog trigger, overlay, and
 reveresed using the above CSS properties.
 
 Note: This is done using a \`useEffect\` just for the sake of the story. In a real-world scenario, this should ideally be done in a global stylesheet or a theme provider.
-                `}}},render:function(){const[o,t]=a.useState(!1);return a.useEffect(()=>(document.body.style.setProperty("--ds-dialog-overlay-z-index-override","88"),document.body.style.setProperty("--ds-dialog-content-z-index-override","77"),()=>{document.body.style.removeProperty("--ds-dialog-overlay-z-index-override"),document.body.style.removeProperty("--ds-dialog-content-z-index-override")}),[]),e.jsxs("div",{style:{position:"relative",zIndex:99},children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(i,{open:o,title:"ZIndex Override",size:"md",onClose:()=>t(!1),dataset:{testid:"dialog"},children:r})]})},play:async({canvas:s,step:o})=>{await o("Open alert",async()=>(await y.click(s.getByTestId("trigger")),h(()=>{const t=s.getByTestId("dialog");p(t).toBeVisible()}))),await o("Check content's computed z-index",async()=>{const t=s.getByTestId("dialog"),n=getComputedStyle(t);p(n.zIndex).toBe("77")}),await o("Check overlay's computed z-index",async()=>{const t=s.getByTestId("dialog").previousElementSibling;if(!t)throw new Error("The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.");const n=getComputedStyle(t);p(n.zIndex).toBe("88")})}},k={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(i,{open:t,onClose:()=>{var d;n(!1),(d=o.onClose)==null||d.call(o)},size:"md",title:"Test Close Button",dataset:{testid:"dialog"},children:r})]})},play:async s=>{const o=await c(s),{canvas:t,step:n,args:d}=s;await n("Close dialog using close button",async()=>{const g=t.getByTestId("dialog-close");return await y.click(g),h(async()=>(await p(o).not.toBeVisible(),p(d.onClose).toHaveBeenCalledOnce()))})}},B={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(i,{open:t,onClose:()=>{var d;n(!1),(d=o.onClose)==null||d.call(o)},size:"md",title:"Test Close Overlay",dataset:{testid:"dialog"},children:r})]})},play:async s=>{const o=await c(s),{canvas:t,step:n,args:d}=s;await n("Close dialog by clicking overlay",async()=>{const g=t.getByTestId("dialog-overlay");return await y.click(g),h(async()=>(await p(o).not.toBeVisible(),p(d.onClose).toHaveBeenCalledOnce()))})}},T={tags:["!autodocs"],render:function(o){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(l,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(i,{open:t,onClose:()=>{var d;n(!1),(d=o.onClose)==null||d.call(o)},size:"md",title:"Test Close Keyboard",dataset:{testid:"dialog"},children:r})]})},play:async s=>{const o=await c(s),{step:t,args:n}=s;await t("Close dialog using escape key",async()=>(await y.keyboard("{Escape}"),h(async()=>(await p(o).not.toBeVisible(),p(n.onClose).toHaveBeenCalledOnce()))))}};var H,E,F;v.parameters={...v.parameters,docs:{...(H=v.parameters)==null?void 0:H.docs,source:{originalSource:`{
+                `}}},render:function(){const[s,t]=a.useState(!1);return a.useEffect(()=>(document.body.style.setProperty("--ds-dialog-overlay-z-index-override","88"),document.body.style.setProperty("--ds-dialog-content-z-index-override","77"),()=>{document.body.style.removeProperty("--ds-dialog-overlay-z-index-override"),document.body.style.removeProperty("--ds-dialog-content-z-index-override")}),[]),e.jsxs("div",{style:{position:"relative",zIndex:99},children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:s,title:"ZIndex Override",size:"md",onClose:()=>t(!1),dataset:{testid:"dialog"},children:l})]})},play:async({canvas:o,step:s})=>{await s("Open alert",async()=>(await f.click(o.getByTestId("trigger")),v(()=>{const t=o.getByTestId("dialog");g(t).toBeVisible()}))),await s("Check content's computed z-index",async()=>{const t=o.getByTestId("dialog"),n=getComputedStyle(t);g(n.zIndex).toBe("77")}),await s("Check overlay's computed z-index",async()=>{const t=o.getByTestId("dialog").previousElementSibling;if(!t)throw new Error("The overlay happened to be the previous sibling of the dialog content, but it isn't anymore. Please update the test.");const n=getComputedStyle(t);g(n.zIndex).toBe("88")})}},T={tags:["!autodocs"],render:function(s){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=s.onClose)==null||i.call(s)},size:"md",title:"Test Close Button",dataset:{testid:"dialog"},children:l})]})},play:async o=>{const s=await c(o),{canvas:t,step:n,args:i}=o;await n("Close dialog using close button",async()=>{const u=t.getByTestId("dialog-close");return await f.click(u),v(async()=>(await g(s).not.toBeVisible(),g(i.onClose).toHaveBeenCalledOnce()))})}},I={tags:["!autodocs"],render:function(s){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=s.onClose)==null||i.call(s)},size:"md",title:"Test Close Overlay",dataset:{testid:"dialog"},children:l})]})},play:async o=>{const s=await c(o),{canvas:t,step:n,args:i}=o;await n("Close dialog by clicking overlay",async()=>{const u=t.getByTestId("dialog-overlay");return await f.click(u),v(async()=>(await g(s).not.toBeVisible(),g(i.onClose).toHaveBeenCalledOnce()))})}},P={tags:["!autodocs"],render:function(s){const[t,n]=a.useState(!1);return e.jsxs(e.Fragment,{children:[e.jsx(d,{dataset:{testid:"trigger"},onClick:()=>n(!0),children:"Open"}),e.jsx(r,{open:t,onClose:()=>{var i;n(!1),(i=s.onClose)==null||i.call(s)},size:"md",title:"Test Close Keyboard",dataset:{testid:"dialog"},children:l})]})},play:async o=>{const s=await c(o),{step:t,args:n}=o;await t("Close dialog using escape key",async()=>(await f.keyboard("{Escape}"),v(async()=>(await g(s).not.toBeVisible(),g(n.onClose).toHaveBeenCalledOnce()))))}};var R,A,L;C.parameters={...C.parameters,docs:{...(R=C.parameters)==null?void 0:R.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -51,7 +49,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
             </>;
   },
   play: openDialogPlay
-}`,...(F=(E=v.parameters)==null?void 0:E.docs)==null?void 0:F.source}}};var A,R,V;x.parameters={...x.parameters,docs:{...(A=x.parameters)==null?void 0:A.docs,source:{originalSource:`{
+}`,...(L=(A=C.parameters)==null?void 0:A.docs)==null?void 0:L.source}}};var W,N,V;x.parameters={...x.parameters,docs:{...(W=x.parameters)==null?void 0:W.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -68,7 +66,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
             </>;
   },
   play: openDialogPlay
-}`,...(V=(R=x.parameters)==null?void 0:R.docs)==null?void 0:V.source}}};var N,W,L;C.parameters={...C.parameters,docs:{...(N=C.parameters)==null?void 0:N.docs,source:{originalSource:`{
+}`,...(V=(N=x.parameters)==null?void 0:N.docs)==null?void 0:V.source}}};var q,M,U;D.parameters={...D.parameters,docs:{...(q=D.parameters)==null?void 0:q.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -85,7 +83,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
             </>;
   },
   play: openDialogPlay
-}`,...(L=(W=C.parameters)==null?void 0:W.docs)==null?void 0:L.source}}};var q,M,U;D.parameters={...D.parameters,docs:{...(q=D.parameters)==null?void 0:q.docs,source:{originalSource:`{
+}`,...(U=(M=D.parameters)==null?void 0:M.docs)==null?void 0:U.source}}};var J,Z,K;S.parameters={...S.parameters,docs:{...(J=S.parameters)==null?void 0:J.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -102,7 +100,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
             </>;
   },
   play: openDialogPlay
-}`,...(U=(M=D.parameters)==null?void 0:M.docs)==null?void 0:U.source}}};var J,Z,K;S.parameters={...S.parameters,docs:{...(J=S.parameters)==null?void 0:J.docs,source:{originalSource:`{
+}`,...(K=(Z=S.parameters)==null?void 0:Z.docs)==null?void 0:K.source}}};var Y,X,G;w.parameters={...w.parameters,docs:{...(Y=w.parameters)==null?void 0:Y.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -113,13 +111,11 @@ Use an object with breakpoints as keys to specify different sizes at different v
 \\\`\\\`\\\`tsx
 <Dialog
   size={{
-    _: 'lg',         // Default size (mobile)
-    'narrow-l': 'xs' // Size at 400px and above
+    _: 'xs',
+    'medium-l': 'lg'
   }}
 />
 \\\`\\\`\\\`
-
-This example uses a full-width dialog on mobile and a compact dialog on larger screens.
                 \`
       }
     }
@@ -133,9 +129,9 @@ This example uses a full-width dialog on mobile and a compact dialog on larger s
                     Open
                 </Button>
                 <Dialog open={open} onClose={() => setOpen(false)} size={{
-        _: 'lg',
-        'narrow-l': 'xs'
-      }} title="Responsive Dialog" description="This dialog changes size based on the viewport width: \`lg\` on mobile, \`xs\` on larger screens" dataset={{
+        _: 'xs',
+        'medium-l': 'lg'
+      }} title="Width Responsivness" description="Change the window width to see the Dialog width respond to it" dataset={{
         testid: 'dialog'
       }}>
                     {DummyContent}
@@ -143,7 +139,33 @@ This example uses a full-width dialog on mobile and a compact dialog on larger s
             </>;
   },
   play: openDialogPlay
-}`,...(K=(Z=S.parameters)==null?void 0:Z.docs)==null?void 0:K.source}}};var Y,X,G;w.parameters={...w.parameters,docs:{...(Y=w.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+}`,...(G=(X=w.parameters)==null?void 0:X.docs)==null?void 0:G.source}}};var Q,$,ee;b.parameters={...b.parameters,docs:{...(Q=b.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+  render: function Story(args) {
+    const [open, setOpen] = useState(false);
+    const [count, setCount] = useState(1);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <Dialog open={open} onClose={() => {
+        setOpen(false);
+        args.onClose?.();
+      }} size="md" title="Height Responsiveness" description="Change the number of children to see the Dialog style respond to the height change" dataset={{
+        testid: 'dialog'
+      }}>
+                    <NumberField label="Child count" value={count} onChange={e => setCount(parseInt(e.target.value))} required />
+                    <br />
+                    {Array.from({
+          length: count
+        }, (_v, i) => <Fragment key={i}>{DummyContent}</Fragment>)}
+                    <Dialog.Actions primaryLabel="Primary" secondaryLabel="Secondary" onPrimaryClick={action('Primary button clicked')} onSecondaryClick={action('Secondary button clicked')} />
+                </Dialog>
+            </>;
+  },
+  play: openDialogPlay
+}`,...(ee=($=b.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var te,se,oe;z.parameters={...z.parameters,docs:{...(te=z.parameters)==null?void 0:te.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -160,7 +182,7 @@ This example uses a full-width dialog on mobile and a compact dialog on larger s
             </>;
   },
   play: openDialogPlay
-}`,...(G=(X=w.parameters)==null?void 0:X.docs)==null?void 0:G.source}}};var Q,$,ee;z.parameters={...z.parameters,docs:{...(Q=z.parameters)==null?void 0:Q.docs,source:{originalSource:`{
+}`,...(oe=(se=z.parameters)==null?void 0:se.docs)==null?void 0:oe.source}}};var ne,ae,ie;O.parameters={...O.parameters,docs:{...(ne=O.parameters)==null?void 0:ne.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -178,7 +200,7 @@ This example uses a full-width dialog on mobile and a compact dialog on larger s
             </>;
   },
   play: openDialogPlay
-}`,...(ee=($=z.parameters)==null?void 0:$.docs)==null?void 0:ee.source}}};var te,oe,se;b.parameters={...b.parameters,docs:{...(te=b.parameters)==null?void 0:te.docs,source:{originalSource:`{
+}`,...(ie=(ae=O.parameters)==null?void 0:ae.docs)==null?void 0:ie.source}}};var re,le,de;j.parameters={...j.parameters,docs:{...(re=j.parameters)==null?void 0:re.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -221,7 +243,7 @@ like in this story.
             </>;
   },
   play: openDialogPlay
-}`,...(se=(oe=b.parameters)==null?void 0:oe.docs)==null?void 0:se.source}}};var ne,ae,ie;O.parameters={...O.parameters,docs:{...(ne=O.parameters)==null?void 0:ne.docs,source:{originalSource:`{
+}`,...(de=(le=j.parameters)==null?void 0:le.docs)==null?void 0:de.source}}};var ce,pe,ue;k.parameters={...k.parameters,docs:{...(ce=k.parameters)==null?void 0:ce.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -252,7 +274,7 @@ like in this story.
             </>;
   },
   play: openDialogPlay
-}`,...(ie=(ae=O.parameters)==null?void 0:ae.docs)==null?void 0:ie.source}}};var re,le,de;j.parameters={...j.parameters,docs:{...(re=j.parameters)==null?void 0:re.docs,source:{originalSource:`{
+}`,...(ue=(pe=k.parameters)==null?void 0:pe.docs)==null?void 0:ue.source}}};var ge,me,ye;_.parameters={..._.parameters,docs:{...(ge=_.parameters)==null?void 0:ge.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -283,7 +305,7 @@ like in this story.
             </>;
   },
   play: openDialogPlay
-}`,...(de=(le=j.parameters)==null?void 0:le.docs)==null?void 0:de.source}}};var ce,pe,ue;_.parameters={..._.parameters,docs:{...(ce=_.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+}`,...(ye=(me=_.parameters)==null?void 0:me.docs)==null?void 0:ye.source}}};var he,fe,ve;B.parameters={...B.parameters,docs:{...(he=B.parameters)==null?void 0:he.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -352,7 +374,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       expect(styles.zIndex).toBe('88');
     });
   }
-}`,...(ue=(pe=_.parameters)==null?void 0:pe.docs)==null?void 0:ue.source}}};var ge,me,ye;k.parameters={...k.parameters,docs:{...(ge=k.parameters)==null?void 0:ge.docs,source:{originalSource:`{
+}`,...(ve=(fe=B.parameters)==null?void 0:fe.docs)==null?void 0:ve.source}}};var Ce,xe,De;T.parameters={...T.parameters,docs:{...(Ce=T.parameters)==null?void 0:Ce.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   render: function Story(args) {
     const [open, setOpen] = useState(false);
@@ -388,7 +410,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       });
     });
   }
-}`,...(ye=(me=k.parameters)==null?void 0:me.docs)==null?void 0:ye.source}}};var he,fe,ve;B.parameters={...B.parameters,docs:{...(he=B.parameters)==null?void 0:he.docs,source:{originalSource:`{
+}`,...(De=(xe=T.parameters)==null?void 0:xe.docs)==null?void 0:De.source}}};var Se,we,be;I.parameters={...I.parameters,docs:{...(Se=I.parameters)==null?void 0:Se.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   render: function Story(args) {
     const [open, setOpen] = useState(false);
@@ -424,7 +446,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       });
     });
   }
-}`,...(ve=(fe=B.parameters)==null?void 0:fe.docs)==null?void 0:ve.source}}};var xe,Ce,De;T.parameters={...T.parameters,docs:{...(xe=T.parameters)==null?void 0:xe.docs,source:{originalSource:`{
+}`,...(be=(we=I.parameters)==null?void 0:we.docs)==null?void 0:be.source}}};var ze,Oe,je;P.parameters={...P.parameters,docs:{...(ze=P.parameters)==null?void 0:ze.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   render: function Story(args) {
     const [open, setOpen] = useState(false);
@@ -458,4 +480,4 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       });
     });
   }
-}`,...(De=(Ce=T.parameters)==null?void 0:Ce.docs)==null?void 0:De.source}}};const Qt=["ExtraSmall","Small","Medium","Large","Responsive","WithHiddenHeader","WithActions","WithSteps","WithIconInTitle","WithAvatarInTitle","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{v as ExtraSmall,D as Large,C as Medium,S as Responsive,x as Small,k as TestCloseButton,T as TestCloseKeyboard,B as TestCloseOverlay,z as WithActions,j as WithAvatarInTitle,w as WithHiddenHeader,O as WithIconInTitle,b as WithSteps,_ as WithZIndexOverride,Qt as __namedExportsOrder,Gt as default};
+}`,...(je=(Oe=P.parameters)==null?void 0:Oe.docs)==null?void 0:je.source}}};const cs=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","HeightResponsiveness","WithHiddenHeader","WithActions","WithSteps","WithIconInTitle","WithAvatarInTitle","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{C as ExtraSmall,b as HeightResponsiveness,S as Large,D as Medium,x as Small,T as TestCloseButton,P as TestCloseKeyboard,I as TestCloseOverlay,w as WidthResponsiveness,O as WithActions,_ as WithAvatarInTitle,z as WithHiddenHeader,k as WithIconInTitle,j as WithSteps,B as WithZIndexOverride,cs as __namedExportsOrder,ds as default};

package/dist/assets/{DocsRenderer-CFRXHY34-D8Enzmed.js → DocsRenderer-CFRXHY34-DyeBV0z3.js}

@@ -1,2 +1,2 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./index-uOP2uDdf.js","./index-B3evPFBL.js","./_commonjsHelpers-Cpj98o6Y.js"])))=>i.map(i=>d[i]);
-import{_ as l}from"./iframe-HKl8oQjn.js";import{r as s,e as n}from"./index-B3evPFBL.js";import{H as p,A as h,C as E,c as d}from"./index-D7MP9XPf.js";import{c as v}from"./client-DXF5tT0h.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./jsx-runtime-BYouaCF_.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";var i=new Map;function R(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f=({callback:e,children:t})=>{let r=s.useRef();return s.useLayoutEffect(()=>{r.current!==e&&(r.current=e,e())},[e]),t};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((r,o)=>{e=r,t=o}),resolve:e,reject:t}});var w=async(e,t,r)=>{let o=await x(t,r);if(R()){o.render(e);return}let{promise:a,resolve:m}=Promise.withResolvers();return o.render(s.createElement(f,{callback:m},e)),a},_=(e,t)=>{let r=i.get(e);r&&(r.unmount(),i.delete(e))},x=async(e,t)=>{let r=i.get(e);return r||(r=v.createRoot(e,t),i.set(e,r)),r},g={code:E,a:h,...p},y=class extends s.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:n.createElement(n.Fragment,null,t)}},H=class{constructor(){this.render=async(e,t,r)=>{let o={...g,...t==null?void 0:t.components},a=d;return new Promise((m,c)=>{l(async()=>{const{MDXProvider:u}=await import("./index-uOP2uDdf.js");return{MDXProvider:u}},__vite__mapDeps([0,1,2]),import.meta.url).then(({MDXProvider:u})=>w(n.createElement(y,{showException:c,key:Math.random()},n.createElement(u,{components:o},n.createElement(a,{context:e,docsParameter:t}))),r)).then(()=>m())})},this.unmount=e=>{_(e)}}};export{H as DocsRenderer,g as defaultComponents};
+import{_ as l}from"./iframe-D3RLzFNO.js";import{r as s,e as n}from"./index-B3evPFBL.js";import{H as p,A as h,C as E,c as d}from"./index-Dbtw7LqJ.js";import{c as v}from"./client-DXF5tT0h.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./jsx-runtime-BYouaCF_.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";var i=new Map;function R(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f=({callback:e,children:t})=>{let r=s.useRef();return s.useLayoutEffect(()=>{r.current!==e&&(r.current=e,e())},[e]),t};typeof Promise.withResolvers>"u"&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((r,o)=>{e=r,t=o}),resolve:e,reject:t}});var w=async(e,t,r)=>{let o=await x(t,r);if(R()){o.render(e);return}let{promise:a,resolve:m}=Promise.withResolvers();return o.render(s.createElement(f,{callback:m},e)),a},_=(e,t)=>{let r=i.get(e);r&&(r.unmount(),i.delete(e))},x=async(e,t)=>{let r=i.get(e);return r||(r=v.createRoot(e,t),i.set(e,r)),r},g={code:E,a:h,...p},y=class extends s.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:n.createElement(n.Fragment,null,t)}},H=class{constructor(){this.render=async(e,t,r)=>{let o={...g,...t==null?void 0:t.components},a=d;return new Promise((m,c)=>{l(async()=>{const{MDXProvider:u}=await import("./index-uOP2uDdf.js");return{MDXProvider:u}},__vite__mapDeps([0,1,2]),import.meta.url).then(({MDXProvider:u})=>w(n.createElement(y,{showException:c,key:Math.random()},n.createElement(u,{components:o},n.createElement(a,{context:e,docsParameter:t}))),r)).then(()=>m())})},this.unmount=e=>{_(e)}}};export{H as DocsRenderer,g as defaultComponents};

package/dist/assets/{FieldButton-xxvyfVcj.js → FieldButton-Bsa9_rJB.js}

@@ -1 +1 @@
-import{j as n}from"./jsx-runtime-BYouaCF_.js";import{r as f}from"./index-B3evPFBL.js";import{f as v}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as y}from"./classNames-BUL1Zq7e.js";import{g}from"./index-DdzHuZ-Y.js";import{w as a}from"./componentNames-CVVyamkx.js";const B="FieldButton__ZIYKf",b={FieldButton:B},l=f.forwardRef(function({svg:o,assistiveText:r,onClick:e,dataset:u,...i},m){const d=y(b,a.FieldButton),p=t=>{t.stopPropagation(),e==null||e(t)},c={...v(i),...g(u,{preplyDsComponent:a.FieldButton}),className:d.join(" "),title:r,onClick:p,ref:m};return n.jsx("button",{...c,type:"button",children:n.jsx(o,{"aria-hidden":"true",focusable:"false"})})});try{l.displayName="FieldButton",l.__docgenInfo={description:"",displayName:"FieldButton",props:{svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"MouseEventHandler<Element>"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{l as F};
+import{j as n}from"./jsx-runtime-BYouaCF_.js";import{r as f}from"./index-B3evPFBL.js";import{f as v}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as y}from"./classNames-BUL1Zq7e.js";import{g}from"./index-DdzHuZ-Y.js";import{w as a}from"./componentNames-CpCJzpB9.js";const B="FieldButton__ZIYKf",b={FieldButton:B},l=f.forwardRef(function({svg:o,assistiveText:r,onClick:e,dataset:u,...i},m){const d=y(b,a.FieldButton),p=t=>{t.stopPropagation(),e==null||e(t)},c={...v(i),...g(u,{preplyDsComponent:a.FieldButton}),className:d.join(" "),title:r,onClick:p,ref:m};return n.jsx("button",{...c,type:"button",children:n.jsx(o,{"aria-hidden":"true",focusable:"false"})})});try{l.displayName="FieldButton",l.__docgenInfo={description:"",displayName:"FieldButton",props:{svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"MouseEventHandler<Element>"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{l as F};

package/dist/assets/{FieldButton.stories-1kY40W8X.js → FieldButton.stories-DN08cc4N.js}

@@ -1 +1 @@
-import{j as i}from"./jsx-runtime-BYouaCF_.js";import{F as m}from"./LibraryExplore-C8GqDRwc.js";import{F as s}from"./FieldButton-xxvyfVcj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-BUL1Zq7e.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";const f={title:"components/FieldButton",component:s},o=()=>i.jsx(s,{svg:m,assistiveText:"Lorem Ipsum",onClick:()=>{}});o.storyName="FieldButton";var t,e,r;o.parameters={...o.parameters,docs:{...(t=o.parameters)==null?void 0:t.docs,source:{originalSource:'() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />',...(r=(e=o.parameters)==null?void 0:e.docs)==null?void 0:r.source}}};const v=["Base"];export{o as Base,v as __namedExportsOrder,f as default};
+import{j as i}from"./jsx-runtime-BYouaCF_.js";import{F as m}from"./LibraryExplore-C8GqDRwc.js";import{F as s}from"./FieldButton-Bsa9_rJB.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-BUL1Zq7e.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";const f={title:"components/FieldButton",component:s},o=()=>i.jsx(s,{svg:m,assistiveText:"Lorem Ipsum",onClick:()=>{}});o.storyName="FieldButton";var t,e,r;o.parameters={...o.parameters,docs:{...(t=o.parameters)==null?void 0:t.docs,source:{originalSource:'() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />',...(r=(e=o.parameters)==null?void 0:e.docs)==null?void 0:r.source}}};const v=["Base"];export{o as Base,v as __namedExportsOrder,f as default};

package/dist/assets/{Flag.stories-BcePwnUL.js → Flag.stories-CuHMLwKy.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as u}from"./index-B3evPFBL.js";import{e as m}from"./index-DDyIDR-R.js";import{c as n,C as o}from"./CountryFlag--G6mQ0wX.js";import{L as F}from"./LayoutFlex-oRwI31fW.js";import{L as y,a as r}from"./LayoutGridItem-COV2Exf8.js";import{T as a}from"./Text-CH4wZQv6.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./breakpoints-BfMlrtxE.js";import"./align-self-BM6l9H5Z.js";import"./constants-DYYVurUY.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";const J={title:"components/CountryFlag",component:o,args:{code:"ua",alt:n.ua}},s={render:function(){return e.jsxs("div",{style:{maxWidth:"1000px"},children:[e.jsx(a,{variant:"default-semibold",children:"For some countries, simplified flags are automatically used (unless `simplified` is set to `false`)"}),e.jsxs(y,{columns:4,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3 (with `simplified=false`)"})}),["es","mx"].map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large",simplified:!1})})]},t))]}),e.jsx("br",{}),e.jsx(a,{variant:"default-semibold",children:"All countries"}),e.jsxs(y,{columns:3,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),Object.keys(n).map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})})]},t))]})]})}},d={render:i=>e.jsxs(F,{gap:"16",children:[e.jsx(o,{...i,size:"small"}),e.jsx(o,{...i,size:"medium"}),e.jsx(o,{...i,size:"large"})]})},l={render:function(){return e.jsxs(e.Fragment,{children:[e.jsx(a,{variant:"default-regular-italic",children:"Invalid country code"}),e.jsx(o,{code:"invalidCountryCode",alt:"Invalid country code"}),e.jsx(a,{variant:"default-regular-italic",children:"`undefined` country code"}),e.jsx(o,{code:void 0,alt:"Undefined country code"})]})},play:async({canvas:i})=>{const t=i.getByAltText("Invalid country code");m(t).toBeVisible();const b=i.getByAltText("Undefined country code");m(b).toBeVisible()}},c={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var x,p,f;s.parameters={...s.parameters,docs:{...(x=s.parameters)==null?void 0:x.docs,source:{originalSource:`{
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as u}from"./index-B3evPFBL.js";import{e as m}from"./index-DDyIDR-R.js";import{c as n,C as o}from"./CountryFlag-B5buLFPp.js";import{L as F}from"./LayoutFlex-BPtL2qZR.js";import{L as y,a as r}from"./LayoutGridItem-BtAwiDLY.js";import{T as a}from"./Text-BmdJVr9v.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./breakpoints-BfMlrtxE.js";import"./align-self-BM6l9H5Z.js";import"./constants-DYYVurUY.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";const J={title:"components/CountryFlag",component:o,args:{code:"ua",alt:n.ua}},s={render:function(){return e.jsxs("div",{style:{maxWidth:"1000px"},children:[e.jsx(a,{variant:"default-semibold",children:"For some countries, simplified flags are automatically used (unless `simplified` is set to `false`)"}),e.jsxs(y,{columns:4,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3 (with `simplified=false`)"})}),["es","mx"].map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large",simplified:!1})})]},t))]}),e.jsx("br",{}),e.jsx(a,{variant:"default-semibold",children:"All countries"}),e.jsxs(y,{columns:3,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),Object.keys(n).map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})})]},t))]})]})}},d={render:i=>e.jsxs(F,{gap:"16",children:[e.jsx(o,{...i,size:"small"}),e.jsx(o,{...i,size:"medium"}),e.jsx(o,{...i,size:"large"})]})},l={render:function(){return e.jsxs(e.Fragment,{children:[e.jsx(a,{variant:"default-regular-italic",children:"Invalid country code"}),e.jsx(o,{code:"invalidCountryCode",alt:"Invalid country code"}),e.jsx(a,{variant:"default-regular-italic",children:"`undefined` country code"}),e.jsx(o,{code:void 0,alt:"Undefined country code"})]})},play:async({canvas:i})=>{const t=i.getByAltText("Invalid country code");m(t).toBeVisible();const b=i.getByAltText("Undefined country code");m(b).toBeVisible()}},c={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var x,p,f;s.parameters={...s.parameters,docs:{...(x=s.parameters)==null?void 0:x.docs,source:{originalSource:`{
   render: function Story() {
     return <div style={{
       maxWidth: '1000px'

package/dist/assets/{Flag.test.stories-hYgxXstG.js → Flag.test.stories-Da1de2sS.js}

@@ -1,4 +1,4 @@
-import{j as d}from"./jsx-runtime-BYouaCF_.js";import{e as o}from"./index-DDyIDR-R.js";import{C as s}from"./CountryFlag--G6mQ0wX.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CVVyamkx.js";const v={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",dataset:{foo:1,bar:"2",baz:!1}})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("data-foo","1"),o(e).toHaveAttribute("data-bar","2"),o(e).toHaveAttribute("data-baz","false")}},r={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",loading:"lazy"})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("loading","lazy")}};var n,c,l;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
+import{j as d}from"./jsx-runtime-BYouaCF_.js";import{e as o}from"./index-DDyIDR-R.js";import{C as s}from"./CountryFlag-B5buLFPp.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";const v={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",dataset:{foo:1,bar:"2",baz:!1}})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("data-foo","1"),o(e).toHaveAttribute("data-bar","2"),o(e).toHaveAttribute("data-baz","false")}},r={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",loading:"lazy"})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("loading","lazy")}};var n,c,l;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
   render: function Story() {
     return <CountryFlag code="ua" alt="Ukraine" dataset={{
       foo: 1,

package/dist/assets/{FormControl-DWCH9Hh-.js → FormControl-CeIJk4_Z.js}

@@ -1,4 +1,4 @@
-import{j as a}from"./jsx-runtime-BYouaCF_.js";import{S as q}from"./index-DRKYGVyc.js";import{r as x}from"./index-B3evPFBL.js";import"./index-BfBdt3zW.js";import{g as C}from"./index-DdzHuZ-Y.js";import{M as u}from"./message-BraTJ16C.js";import{w as _}from"./componentNames-CVVyamkx.js";const w="container__g46MP",E="label__dGrlk",F="required__w9EwB",N="description__AST5n",R="error__uRqiU",r={container:w,label:E,required:F,description:N,error:R};function j({id:t,error:n,description:o,hasError:l}){const e={};return l&&(e["aria-invalid"]=!0),n&&(e["aria-invalid"]=!0,e["aria-errormessage"]=`${t}-error`),o&&(e["aria-describedby"]=`${t}-description`),e}const p=({id:t,label:n,hideLabel:o,description:l,error:e,hasError:c,children:m,required:s,dataset:f,onClick:v,preplyDsComponent:h=_.FormControl,useLegacyRequiredLabel:d=!1})=>{const b=x.useId(),i=t||b,y=j({id:i,error:e,description:l,hasError:c}),g=C(f,{preplyDsComponent:h});return a.jsxs("div",{className:r.container,...g,onClick:v,children:[a.jsxs("label",{htmlFor:i,className:r.label,"data-hidden":o||!n,"data-testid":"label",children:[n,!!d&&s&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.required",defaultMessage:"Required",description:"Form field required label"})]}),!d&&!s&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.optional",defaultMessage:"Optional",description:"Form field optional label"})]})]}),a.jsx(q,{id:i,required:s,...y,children:m}),e?a.jsx("p",{className:r.error,role:"alert",id:`${i}-error`,"data-testid":"error",children:e}):l?a.jsx("p",{className:r.description,id:`${i}-description`,"data-testid":"description",children:l}):null]})};try{p.displayName="FormControl",p.__docgenInfo={description:"FormControl component provides a consistent layout and accessibility\nfor the form fields. You can use it to create custom fields not supported\nby the DS yet.\n\nNote that FormControl will implicitly provide some props to the child component:\n\n- `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;\n- `aria-invalid` and `aria-errormessage` when `error` is provided;\n- `aria-describedby` when `description` is provided;\n- `required` when FormControl's `required` is true;",displayName:"FormControl",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
+import{j as a}from"./jsx-runtime-BYouaCF_.js";import{S as q}from"./index-DRKYGVyc.js";import{r as x}from"./index-B3evPFBL.js";import"./index-BfBdt3zW.js";import{g as C}from"./index-DdzHuZ-Y.js";import{M as u}from"./message-BraTJ16C.js";import{w as _}from"./componentNames-CpCJzpB9.js";const w="container__g46MP",E="label__dGrlk",F="required__w9EwB",N="description__AST5n",R="error__uRqiU",r={container:w,label:E,required:F,description:N,error:R};function j({id:t,error:n,description:o,hasError:l}){const e={};return l&&(e["aria-invalid"]=!0),n&&(e["aria-invalid"]=!0,e["aria-errormessage"]=`${t}-error`),o&&(e["aria-describedby"]=`${t}-description`),e}const p=({id:t,label:n,hideLabel:o,description:l,error:e,hasError:c,children:m,required:s,dataset:f,onClick:v,preplyDsComponent:h=_.FormControl,useLegacyRequiredLabel:d=!1})=>{const b=x.useId(),i=t||b,y=j({id:i,error:e,description:l,hasError:c}),g=C(f,{preplyDsComponent:h});return a.jsxs("div",{className:r.container,...g,onClick:v,children:[a.jsxs("label",{htmlFor:i,className:r.label,"data-hidden":o||!n,"data-testid":"label",children:[n,!!d&&s&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.required",defaultMessage:"Required",description:"Form field required label"})]}),!d&&!s&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.optional",defaultMessage:"Optional",description:"Form field optional label"})]})]}),a.jsx(q,{id:i,required:s,...y,children:m}),e?a.jsx("p",{className:r.error,role:"alert",id:`${i}-error`,"data-testid":"error",children:e}):l?a.jsx("p",{className:r.description,id:`${i}-description`,"data-testid":"description",children:l}):null]})};try{p.displayName="FormControl",p.__docgenInfo={description:"FormControl component provides a consistent layout and accessibility\nfor the form fields. You can use it to create custom fields not supported\nby the DS yet.\n\nNote that FormControl will implicitly provide some props to the child component:\n\n- `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;\n- `aria-invalid` and `aria-errormessage` when `error` is provided;\n- `aria-describedby` when `description` is provided;\n- `required` when FormControl's `required` is true;",displayName:"FormControl",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
 If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
 to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
 indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement>"}]}},preplyDsComponent:{defaultValue:{value:"webComponentNames.FormControl"},description:`@deprecated The attribute is meant for internal usage only

package/dist/assets/{FormControl.stories-5bbiEJoQ.js → FormControl.stories-BaSJbnE1.js}

@@ -1,4 +1,4 @@
-import{j as t}from"./jsx-runtime-BYouaCF_.js";import{F as x}from"./FormControl-DWCH9Hh-.js";import{d as r}from"./styled-components.browser.esm-CwsnEFnS.js";import{r as j}from"./index-B3evPFBL.js";import{I as k}from"./Icon-C3PbN7-O.js";import{F as $}from"./TokyoUIUpload-Bi3CuQzX.js";import{T as L}from"./Text-CH4wZQv6.js";import{g as e}from"./getTokenVar-DU_DEzTd.js";import{c as d,s as p,r as S}from"./tokens-ZvFzTwDp.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./message-BraTJ16C.js";import"./componentNames-CVVyamkx.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";import"./text-centered-CznToR0o.js";import"./constants-BgBLeZzp.js";const tt={title:"Components/FormControl",component:x,parameters:{layout:"padded"}},o=()=>{const b=r.input.attrs({type:"file"})`
+import{j as t}from"./jsx-runtime-BYouaCF_.js";import{F as x}from"./FormControl-CeIJk4_Z.js";import{d as r}from"./styled-components.browser.esm-CwsnEFnS.js";import{r as j}from"./index-B3evPFBL.js";import{I as k}from"./Icon-BLj2hNSU.js";import{F as $}from"./TokyoUIUpload-Bi3CuQzX.js";import{T as L}from"./Text-BmdJVr9v.js";import{g as e}from"./getTokenVar-DU_DEzTd.js";import{c as d,s as p,r as S}from"./tokens-ZvFzTwDp.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./message-BraTJ16C.js";import"./componentNames-CpCJzpB9.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";import"./text-centered-CznToR0o.js";import"./constants-BgBLeZzp.js";const tt={title:"Components/FormControl",component:x,parameters:{layout:"padded"}},o=()=>{const b=r.input.attrs({type:"file"})`
         visibility: hidden;
         position: absolute;
         width: 0;

package/dist/assets/{Heading-sy1TMpjs.js → Heading-B0rTmnad.js}

@@ -1,2 +1,2 @@
-import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as N}from"./index-B3evPFBL.js";import{g as b,a as C}from"./text-accent-DZDDtpIt.js";import{g as L}from"./text-centered-CznToR0o.js";import{f as T}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as k,s as q,b as E}from"./classNames-BUL1Zq7e.js";import{w as i}from"./componentNames-CVVyamkx.js";import{g as U}from"./index-DdzHuZ-Y.js";const V="Heading__Erkb1",I={Heading:V,"Heading--level-h1-normal":"Heading--level-h1-normal__t2Kqc","Heading--level-h1-large":"Heading--level-h1-large__2-ENi","Heading--level-h2-normal":"Heading--level-h2-normal__VzetR","Heading--level-h2-large":"Heading--level-h2-large__NxpiQ","Heading--level-h3-normal":"Heading--level-h3-normal__vCnMS","Heading--level-h3-large":"Heading--level-h3-large__Vs-gN","Heading--level-h4-normal":"Heading--level-h4-normal__O6PPx","Heading--level-h4-large":"Heading--level-h4-large__fNZXP","Heading--level-h5-normal":"Heading--level-h5-normal__IMKhU","Heading--level-h5-large":"Heading--level-h5-large__G40j-","Heading--narrow-l--level-h1-normal":"Heading--narrow-l--level-h1-normal__1qZxP","Heading--narrow-l--level-h1-large":"Heading--narrow-l--level-h1-large__vhit5","Heading--narrow-l--level-h2-normal":"Heading--narrow-l--level-h2-normal__a2FJF","Heading--narrow-l--level-h2-large":"Heading--narrow-l--level-h2-large__qFLdx","Heading--narrow-l--level-h3-normal":"Heading--narrow-l--level-h3-normal__D2GNa","Heading--narrow-l--level-h3-large":"Heading--narrow-l--level-h3-large__xeciI","Heading--narrow-l--level-h4-normal":"Heading--narrow-l--level-h4-normal__G7nUl","Heading--narrow-l--level-h4-large":"Heading--narrow-l--level-h4-large__cL6he","Heading--narrow-l--level-h5-normal":"Heading--narrow-l--level-h5-normal__UNw3s","Heading--narrow-l--level-h5-large":"Heading--narrow-l--level-h5-large__o76Fo","Heading--medium-s--level-h1-normal":"Heading--medium-s--level-h1-normal__IGwXF","Heading--medium-s--level-h1-large":"Heading--medium-s--level-h1-large__y2QjY","Heading--medium-s--level-h2-normal":"Heading--medium-s--level-h2-normal__T5nXA","Heading--medium-s--level-h2-large":"Heading--medium-s--level-h2-large__FbGid","Heading--medium-s--level-h3-normal":"Heading--medium-s--level-h3-normal__dcenB","Heading--medium-s--level-h3-large":"Heading--medium-s--level-h3-large__AR-Fa","Heading--medium-s--level-h4-normal":"Heading--medium-s--level-h4-normal__-NI8n","Heading--medium-s--level-h4-large":"Heading--medium-s--level-h4-large__AE93N","Heading--medium-s--level-h5-normal":"Heading--medium-s--level-h5-normal__ZJEJ-","Heading--medium-s--level-h5-large":"Heading--medium-s--level-h5-large__GJ8sd","Heading--medium-l--level-h1-normal":"Heading--medium-l--level-h1-normal__UG7oa","Heading--medium-l--level-h1-large":"Heading--medium-l--level-h1-large__hJgJ9","Heading--medium-l--level-h2-normal":"Heading--medium-l--level-h2-normal__sf7Py","Heading--medium-l--level-h2-large":"Heading--medium-l--level-h2-large__iYIZ9","Heading--medium-l--level-h3-normal":"Heading--medium-l--level-h3-normal__32eny","Heading--medium-l--level-h3-large":"Heading--medium-l--level-h3-large__kuCwB","Heading--medium-l--level-h4-normal":"Heading--medium-l--level-h4-normal__TE1Eh","Heading--medium-l--level-h4-large":"Heading--medium-l--level-h4-large__zZfdz","Heading--medium-l--level-h5-normal":"Heading--medium-l--level-h5-normal__7HYFE","Heading--medium-l--level-h5-large":"Heading--medium-l--level-h5-large__NkY03","Heading--wide-s--level-h1-normal":"Heading--wide-s--level-h1-normal__kqRcj","Heading--wide-s--level-h1-large":"Heading--wide-s--level-h1-large__yzHzL","Heading--wide-s--level-h2-normal":"Heading--wide-s--level-h2-normal__b9MXd","Heading--wide-s--level-h2-large":"Heading--wide-s--level-h2-large__q0kXc","Heading--wide-s--level-h3-normal":"Heading--wide-s--level-h3-normal__Ziuj8","Heading--wide-s--level-h3-large":"Heading--wide-s--level-h3-large__Q4111","Heading--wide-s--level-h4-normal":"Heading--wide-s--level-h4-normal__TxCtT","Heading--wide-s--level-h4-large":"Heading--wide-s--level-h4-large__cQQZf","Heading--wide-s--level-h5-normal":"Heading--wide-s--level-h5-normal__ZSrD7","Heading--wide-s--level-h5-large":"Heading--wide-s--level-h5-large__ZuCIn","Heading--wide-l--level-h1-normal":"Heading--wide-l--level-h1-normal__MavHI","Heading--wide-l--level-h1-large":"Heading--wide-l--level-h1-large__rE1tu","Heading--wide-l--level-h2-normal":"Heading--wide-l--level-h2-normal__YUYcX","Heading--wide-l--level-h2-large":"Heading--wide-l--level-h2-large__v5ssH","Heading--wide-l--level-h3-normal":"Heading--wide-l--level-h3-normal__kQBs2","Heading--wide-l--level-h3-large":"Heading--wide-l--level-h3-large__pU-wX","Heading--wide-l--level-h4-normal":"Heading--wide-l--level-h4-normal__WvWGX","Heading--wide-l--level-h4-large":"Heading--wide-l--level-h4-large__TeFQp","Heading--wide-l--level-h5-normal":"Heading--wide-l--level-h5-normal__1yKda","Heading--wide-l--level-h5-large":"Heading--wide-l--level-h5-large__Uadr4","Heading--variant-massive":"Heading--variant-massive__JFGji","Heading--variant-huge":"Heading--variant-huge__47FQz","Heading--variant-extraLarge":"Heading--variant-extraLarge__xRrqx","Heading--variant-large":"Heading--variant-large__wNK6S","Heading--variant-medium":"Heading--variant-medium__bCNZ-","Heading--variant-small":"Heading--variant-small__308Nb","Heading--narrow-l--variant-massive":"Heading--narrow-l--variant-massive__yg4AJ","Heading--narrow-l--variant-huge":"Heading--narrow-l--variant-huge__y9b4N","Heading--narrow-l--variant-extraLarge":"Heading--narrow-l--variant-extraLarge__XgyJu","Heading--narrow-l--variant-large":"Heading--narrow-l--variant-large__tzTo6","Heading--narrow-l--variant-medium":"Heading--narrow-l--variant-medium__iP3sG","Heading--narrow-l--variant-small":"Heading--narrow-l--variant-small__KeKjn","Heading--medium-s--variant-massive":"Heading--medium-s--variant-massive__L-b4J","Heading--medium-s--variant-huge":"Heading--medium-s--variant-huge__2o5EA","Heading--medium-s--variant-extraLarge":"Heading--medium-s--variant-extraLarge__eHmYu","Heading--medium-s--variant-large":"Heading--medium-s--variant-large__AI3KL","Heading--medium-s--variant-medium":"Heading--medium-s--variant-medium__t5dUK","Heading--medium-s--variant-small":"Heading--medium-s--variant-small__fCdNa","Heading--medium-l--variant-massive":"Heading--medium-l--variant-massive__jI3FW","Heading--medium-l--variant-huge":"Heading--medium-l--variant-huge__k0UpW","Heading--medium-l--variant-extraLarge":"Heading--medium-l--variant-extraLarge__yfai7","Heading--medium-l--variant-large":"Heading--medium-l--variant-large__65QTG","Heading--medium-l--variant-medium":"Heading--medium-l--variant-medium__UvxHB","Heading--medium-l--variant-small":"Heading--medium-l--variant-small__QI2p2","Heading--wide-s--variant-massive":"Heading--wide-s--variant-massive__B1S84","Heading--wide-s--variant-huge":"Heading--wide-s--variant-huge__KvYrn","Heading--wide-s--variant-extraLarge":"Heading--wide-s--variant-extraLarge__TJs8l","Heading--wide-s--variant-large":"Heading--wide-s--variant-large__Wcc0E","Heading--wide-s--variant-medium":"Heading--wide-s--variant-medium__mONpk","Heading--wide-s--variant-small":"Heading--wide-s--variant-small__oRKSN","Heading--wide-l--variant-massive":"Heading--wide-l--variant-massive__twgw-","Heading--wide-l--variant-huge":"Heading--wide-l--variant-huge__DBuNF","Heading--wide-l--variant-extraLarge":"Heading--wide-l--variant-extraLarge__H9nEI","Heading--wide-l--variant-large":"Heading--wide-l--variant-large__kJarT","Heading--wide-l--variant-medium":"Heading--wide-l--variant-medium__VN27E","Heading--wide-l--variant-small":"Heading--wide-l--variant-small__Skmxk"},r=N.forwardRef(function({children:g,variant:a,accent:l,level:e,large:v=!1,tag:m,color:n,centered:u,dataset:t,id:s,...o},H){const _=m||e||"h1",h=k(I,i.Heading,a?q("variant",a):E(`level-${e}-large`,`level-${e}-normal`,v)),w=L(u),c=b(!(l?void 0:n),l),p=C(n),f=["preply-ds-heading",...h,...w,...c,...p],y={...T(o),className:f.join(" "),...U(t,{preplyDsComponent:i.Heading}),id:s,ref:H};return x.jsx(_,{...y,children:g})});try{r.displayName="Heading",r.__docgenInfo={description:"",displayName:"Heading",props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:"strong",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"accent"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"accentDark"'},{value:'"placeholder"'},{value:'"inverted"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"critical"'},{value:'"disabled"'},{value:'"branded"'},{value:'"selected"'},{value:'"error"'}]}},color:{defaultValue:null,description:"@deprecated Use `accent` instead.",name:"color",required:!1,type:{name:"enum",value:[{value:'"white"'},{value:'"gray-100"'},{value:'"gray-200"'},{value:'"gray-300"'},{value:'"gray-400"'},{value:'"gray-500"'},{value:'"gray-600"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"green-100"'},{value:'"green-200"'},{value:'"green-300"'},{value:'"green-400"'},{value:'"green-500"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"magenta-100"'},{value:'"magenta-200"'},{value:'"magenta-300"'},{value:'"magenta-400"'},{value:'"magenta-500"'}]}},centered:{defaultValue:null,description:"",name:"centered",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},level:{defaultValue:null,description:"@deprecated Use `variant` instead\n@deprecated Use `variant` instead",name:"level",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},large:{defaultValue:{value:"false"},description:`@deprecated There is no large version in Tokyo UI.
-@deprecated There is no large version in Tokyo UI.`,name:"large",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'},{value:'"p"'},{value:'"div"'},{value:'"span"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"massive"'},{value:'"huge"'},{value:'"extraLarge"'},{value:'"medium"'},{value:'"small"'},{value:"ResponsiveProp<HeadingVariant>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLHeadingElement | null) => void"},{value:"RefObject<HTMLHeadingElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{r as H};
+import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as N}from"./index-B3evPFBL.js";import{g as b,a as C}from"./text-accent-DZDDtpIt.js";import{g as L}from"./text-centered-CznToR0o.js";import{f as T}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as k,s as q,b as E}from"./classNames-BUL1Zq7e.js";import{w as i}from"./componentNames-CpCJzpB9.js";import{g as U}from"./index-DdzHuZ-Y.js";const V="Heading__Erkb1",I={Heading:V,"Heading--level-h1-normal":"Heading--level-h1-normal__t2Kqc","Heading--level-h1-large":"Heading--level-h1-large__2-ENi","Heading--level-h2-normal":"Heading--level-h2-normal__VzetR","Heading--level-h2-large":"Heading--level-h2-large__NxpiQ","Heading--level-h3-normal":"Heading--level-h3-normal__vCnMS","Heading--level-h3-large":"Heading--level-h3-large__Vs-gN","Heading--level-h4-normal":"Heading--level-h4-normal__O6PPx","Heading--level-h4-large":"Heading--level-h4-large__fNZXP","Heading--level-h5-normal":"Heading--level-h5-normal__IMKhU","Heading--level-h5-large":"Heading--level-h5-large__G40j-","Heading--narrow-l--level-h1-normal":"Heading--narrow-l--level-h1-normal__1qZxP","Heading--narrow-l--level-h1-large":"Heading--narrow-l--level-h1-large__vhit5","Heading--narrow-l--level-h2-normal":"Heading--narrow-l--level-h2-normal__a2FJF","Heading--narrow-l--level-h2-large":"Heading--narrow-l--level-h2-large__qFLdx","Heading--narrow-l--level-h3-normal":"Heading--narrow-l--level-h3-normal__D2GNa","Heading--narrow-l--level-h3-large":"Heading--narrow-l--level-h3-large__xeciI","Heading--narrow-l--level-h4-normal":"Heading--narrow-l--level-h4-normal__G7nUl","Heading--narrow-l--level-h4-large":"Heading--narrow-l--level-h4-large__cL6he","Heading--narrow-l--level-h5-normal":"Heading--narrow-l--level-h5-normal__UNw3s","Heading--narrow-l--level-h5-large":"Heading--narrow-l--level-h5-large__o76Fo","Heading--medium-s--level-h1-normal":"Heading--medium-s--level-h1-normal__IGwXF","Heading--medium-s--level-h1-large":"Heading--medium-s--level-h1-large__y2QjY","Heading--medium-s--level-h2-normal":"Heading--medium-s--level-h2-normal__T5nXA","Heading--medium-s--level-h2-large":"Heading--medium-s--level-h2-large__FbGid","Heading--medium-s--level-h3-normal":"Heading--medium-s--level-h3-normal__dcenB","Heading--medium-s--level-h3-large":"Heading--medium-s--level-h3-large__AR-Fa","Heading--medium-s--level-h4-normal":"Heading--medium-s--level-h4-normal__-NI8n","Heading--medium-s--level-h4-large":"Heading--medium-s--level-h4-large__AE93N","Heading--medium-s--level-h5-normal":"Heading--medium-s--level-h5-normal__ZJEJ-","Heading--medium-s--level-h5-large":"Heading--medium-s--level-h5-large__GJ8sd","Heading--medium-l--level-h1-normal":"Heading--medium-l--level-h1-normal__UG7oa","Heading--medium-l--level-h1-large":"Heading--medium-l--level-h1-large__hJgJ9","Heading--medium-l--level-h2-normal":"Heading--medium-l--level-h2-normal__sf7Py","Heading--medium-l--level-h2-large":"Heading--medium-l--level-h2-large__iYIZ9","Heading--medium-l--level-h3-normal":"Heading--medium-l--level-h3-normal__32eny","Heading--medium-l--level-h3-large":"Heading--medium-l--level-h3-large__kuCwB","Heading--medium-l--level-h4-normal":"Heading--medium-l--level-h4-normal__TE1Eh","Heading--medium-l--level-h4-large":"Heading--medium-l--level-h4-large__zZfdz","Heading--medium-l--level-h5-normal":"Heading--medium-l--level-h5-normal__7HYFE","Heading--medium-l--level-h5-large":"Heading--medium-l--level-h5-large__NkY03","Heading--wide-s--level-h1-normal":"Heading--wide-s--level-h1-normal__kqRcj","Heading--wide-s--level-h1-large":"Heading--wide-s--level-h1-large__yzHzL","Heading--wide-s--level-h2-normal":"Heading--wide-s--level-h2-normal__b9MXd","Heading--wide-s--level-h2-large":"Heading--wide-s--level-h2-large__q0kXc","Heading--wide-s--level-h3-normal":"Heading--wide-s--level-h3-normal__Ziuj8","Heading--wide-s--level-h3-large":"Heading--wide-s--level-h3-large__Q4111","Heading--wide-s--level-h4-normal":"Heading--wide-s--level-h4-normal__TxCtT","Heading--wide-s--level-h4-large":"Heading--wide-s--level-h4-large__cQQZf","Heading--wide-s--level-h5-normal":"Heading--wide-s--level-h5-normal__ZSrD7","Heading--wide-s--level-h5-large":"Heading--wide-s--level-h5-large__ZuCIn","Heading--wide-l--level-h1-normal":"Heading--wide-l--level-h1-normal__MavHI","Heading--wide-l--level-h1-large":"Heading--wide-l--level-h1-large__rE1tu","Heading--wide-l--level-h2-normal":"Heading--wide-l--level-h2-normal__YUYcX","Heading--wide-l--level-h2-large":"Heading--wide-l--level-h2-large__v5ssH","Heading--wide-l--level-h3-normal":"Heading--wide-l--level-h3-normal__kQBs2","Heading--wide-l--level-h3-large":"Heading--wide-l--level-h3-large__pU-wX","Heading--wide-l--level-h4-normal":"Heading--wide-l--level-h4-normal__WvWGX","Heading--wide-l--level-h4-large":"Heading--wide-l--level-h4-large__TeFQp","Heading--wide-l--level-h5-normal":"Heading--wide-l--level-h5-normal__1yKda","Heading--wide-l--level-h5-large":"Heading--wide-l--level-h5-large__Uadr4","Heading--variant-massive":"Heading--variant-massive__JFGji","Heading--variant-huge":"Heading--variant-huge__47FQz","Heading--variant-extraLarge":"Heading--variant-extraLarge__xRrqx","Heading--variant-large":"Heading--variant-large__wNK6S","Heading--variant-medium":"Heading--variant-medium__bCNZ-","Heading--variant-small":"Heading--variant-small__308Nb","Heading--narrow-l--variant-massive":"Heading--narrow-l--variant-massive__yg4AJ","Heading--narrow-l--variant-huge":"Heading--narrow-l--variant-huge__y9b4N","Heading--narrow-l--variant-extraLarge":"Heading--narrow-l--variant-extraLarge__XgyJu","Heading--narrow-l--variant-large":"Heading--narrow-l--variant-large__tzTo6","Heading--narrow-l--variant-medium":"Heading--narrow-l--variant-medium__iP3sG","Heading--narrow-l--variant-small":"Heading--narrow-l--variant-small__KeKjn","Heading--medium-s--variant-massive":"Heading--medium-s--variant-massive__L-b4J","Heading--medium-s--variant-huge":"Heading--medium-s--variant-huge__2o5EA","Heading--medium-s--variant-extraLarge":"Heading--medium-s--variant-extraLarge__eHmYu","Heading--medium-s--variant-large":"Heading--medium-s--variant-large__AI3KL","Heading--medium-s--variant-medium":"Heading--medium-s--variant-medium__t5dUK","Heading--medium-s--variant-small":"Heading--medium-s--variant-small__fCdNa","Heading--medium-l--variant-massive":"Heading--medium-l--variant-massive__jI3FW","Heading--medium-l--variant-huge":"Heading--medium-l--variant-huge__k0UpW","Heading--medium-l--variant-extraLarge":"Heading--medium-l--variant-extraLarge__yfai7","Heading--medium-l--variant-large":"Heading--medium-l--variant-large__65QTG","Heading--medium-l--variant-medium":"Heading--medium-l--variant-medium__UvxHB","Heading--medium-l--variant-small":"Heading--medium-l--variant-small__QI2p2","Heading--wide-s--variant-massive":"Heading--wide-s--variant-massive__B1S84","Heading--wide-s--variant-huge":"Heading--wide-s--variant-huge__KvYrn","Heading--wide-s--variant-extraLarge":"Heading--wide-s--variant-extraLarge__TJs8l","Heading--wide-s--variant-large":"Heading--wide-s--variant-large__Wcc0E","Heading--wide-s--variant-medium":"Heading--wide-s--variant-medium__mONpk","Heading--wide-s--variant-small":"Heading--wide-s--variant-small__oRKSN","Heading--wide-l--variant-massive":"Heading--wide-l--variant-massive__twgw-","Heading--wide-l--variant-huge":"Heading--wide-l--variant-huge__DBuNF","Heading--wide-l--variant-extraLarge":"Heading--wide-l--variant-extraLarge__H9nEI","Heading--wide-l--variant-large":"Heading--wide-l--variant-large__kJarT","Heading--wide-l--variant-medium":"Heading--wide-l--variant-medium__VN27E","Heading--wide-l--variant-small":"Heading--wide-l--variant-small__Skmxk"},r=N.forwardRef(function({children:g,variant:a,accent:l,level:e,large:v=!1,tag:m,color:n,centered:u,dataset:t,id:s,...o},H){const _=m||e||"h1",h=k(I,i.Heading,a?q("variant",a):E(`level-${e}-large`,`level-${e}-normal`,v)),w=L(u),c=b(!(l?void 0:n),l),p=C(n),f=["preply-ds-heading",...h,...w,...c,...p],y={...T(o),className:f.join(" "),...U(t,{preplyDsComponent:i.Heading}),id:s,ref:H};return x.jsx(_,{...y,children:g})});try{r.displayName="Heading",r.__docgenInfo={description:"",displayName:"Heading",props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:"strong",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"accent"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"accentDark"'},{value:'"placeholder"'},{value:'"inverted"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"critical"'},{value:'"disabled"'},{value:'"branded"'},{value:'"selected"'},{value:'"error"'}]}},color:{defaultValue:null,description:"@deprecated Use `accent` instead.",name:"color",required:!1,type:{name:"enum",value:[{value:'"white"'},{value:'"gray-100"'},{value:'"gray-200"'},{value:'"gray-300"'},{value:'"gray-400"'},{value:'"gray-500"'},{value:'"gray-600"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"green-100"'},{value:'"green-200"'},{value:'"green-300"'},{value:'"green-400"'},{value:'"green-500"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"magenta-100"'},{value:'"magenta-200"'},{value:'"magenta-300"'},{value:'"magenta-400"'},{value:'"magenta-500"'}]}},centered:{defaultValue:null,description:"",name:"centered",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},level:{defaultValue:null,description:"@deprecated Use `variant` instead\n@deprecated Use `variant` instead",name:"level",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},large:{defaultValue:{value:"false"},description:`@deprecated There is no large version in Tokyo UI.
+@deprecated There is no large version in Tokyo UI.`,name:"large",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"massive"'},{value:'"huge"'},{value:'"extraLarge"'},{value:'"medium"'},{value:'"small"'},{value:"ResponsiveProp<HeadingVariant>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLHeadingElement | null) => void"},{value:"RefObject<HTMLHeadingElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{r as H};

package/dist/assets/{Heading.stories-mFaQtYkx.js → Heading.stories-Cs64JgS0.js}

@@ -1,4 +1,4 @@
-import{j as a}from"./jsx-runtime-BYouaCF_.js";import{H as e}from"./Heading-sy1TMpjs.js";import{S as s}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./text-centered-CznToR0o.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-CVVyamkx.js";import"./index-DdzHuZ-Y.js";const T={title:"components/Heading",component:e,argTypes:{centered:{description:s},variant:{description:s}}},r=()=>a.jsxs("div",{style:{padding:"16px",display:"grid",gridTemplateColumns:"auto 3fr",alignItems:"center",gap:"16px"},children:[a.jsx("span",{children:"h1 / massive"}),a.jsx(e,{tag:"h1",variant:"massive",children:"Lorem ipsum"}),a.jsx("span",{children:"h2 / huge"}),a.jsx(e,{tag:"h2",variant:"huge",children:"Lorem ipsum"}),a.jsx("span",{children:"h3 / extraLarge"}),a.jsx(e,{tag:"h3",variant:"extraLarge",children:"Lorem ipsum"}),a.jsx("span",{children:"h4 / large"}),a.jsx(e,{tag:"h4",variant:"large",children:"Lorem ipsum"}),a.jsx("span",{children:"h5 / medium"}),a.jsx(e,{tag:"h5",variant:"medium",children:"Lorem ipsum"}),a.jsx("span",{children:"p / small"}),a.jsx(e,{tag:"p",variant:"small",children:"Lorem ipsum"})]}),n={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(m,{args:g})=>a.jsx("div",{style:{backgroundColor:g.accent==="inverted"?"black":void 0},children:m()})],args:{tag:"h1",variant:"massive",children:"Lorem ipsum",dataset:{qaid:"heading"}},argTypes:{centered:{control:"boolean"},dataset:{control:"object"},strong:{table:{disable:!0}},level:{table:{disable:!0}},color:{table:{disable:!0}},large:{table:{disable:!0}}}};var t,i,o;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`() => <div style={{
+import{j as a}from"./jsx-runtime-BYouaCF_.js";import{H as e}from"./Heading-B0rTmnad.js";import{S as s}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./text-centered-CznToR0o.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";const T={title:"components/Heading",component:e,argTypes:{centered:{description:s},variant:{description:s}}},r=()=>a.jsxs("div",{style:{padding:"16px",display:"grid",gridTemplateColumns:"auto 3fr",alignItems:"center",gap:"16px"},children:[a.jsx("span",{children:"h1 / massive"}),a.jsx(e,{tag:"h1",variant:"massive",children:"Lorem ipsum"}),a.jsx("span",{children:"h2 / huge"}),a.jsx(e,{tag:"h2",variant:"huge",children:"Lorem ipsum"}),a.jsx("span",{children:"h3 / extraLarge"}),a.jsx(e,{tag:"h3",variant:"extraLarge",children:"Lorem ipsum"}),a.jsx("span",{children:"h4 / large"}),a.jsx(e,{tag:"h4",variant:"large",children:"Lorem ipsum"}),a.jsx("span",{children:"h5 / medium"}),a.jsx(e,{tag:"h5",variant:"medium",children:"Lorem ipsum"}),a.jsx("span",{children:"p / small"}),a.jsx(e,{tag:"p",variant:"small",children:"Lorem ipsum"})]}),n={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(m,{args:g})=>a.jsx("div",{style:{backgroundColor:g.accent==="inverted"?"black":void 0},children:m()})],args:{tag:"h1",variant:"massive",children:"Lorem ipsum",dataset:{qaid:"heading"}},argTypes:{centered:{control:"boolean"},dataset:{control:"object"},strong:{table:{disable:!0}},level:{table:{disable:!0}},color:{table:{disable:!0}},large:{table:{disable:!0}}}};var t,i,o;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`() => <div style={{
   padding: '16px',
   display: 'grid',
   gridTemplateColumns: 'auto 3fr',