@preply/ds-docs 3.4.1 → 3.5.1

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

@@ -1,10 +1,10 @@
-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.
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as a}from"./index-B3evPFBL.js";import{a as F}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{f as Le,u as f,a as v,e as g}from"./index-DDyIDR-R.js";import{R as We,P as Ne,O as Ve,C as Me,T as qe,D as Ue,a as Je}from"./index-wFyje0se.js";import{B as d}from"./Button-BSyqsKC5.js";import{I as Ze}from"./IconButton-BqwVuKH2.js";import{H as Ke}from"./Heading-ese4_5Hg.js";import{g as Ye}from"./shared-strings-CcWGHelY.js";import{u as Ge}from"./index-BfBdt3zW.js";import{g as Xe}from"./PortalElementProvider-D4ltrA8j.js";import{g as Qe}from"./index-DdzHuZ-Y.js";import{w as R}from"./componentNames-CpCJzpB9.js";import{m as $e,s as et,b as tt}from"./classNames-BUL1Zq7e.js";import{S as m}from"./Steps-CCm9vCgl.js";import{I as ot}from"./Icon-ZIxauYsE.js";import{A as st}from"./Avatar-B2H0W8KL.js";import{F as nt}from"./TokyoUIInfo-nHX2jpp7.js";import{L as at}from"./LayoutFlex-BBGvSVMb.js";import{N as it}from"./NumberField-D6cbX2hK.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-C1hZX5_o.js";import"./InputContainer-Bk0tgFnW.js";const rt=({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"})),lt=a.forwardRef(rt),dt="overlay__NM-kk",ct="overlayShow__SQuh9",pt="overlayHide__UA0Uh",ut="Dialog__GqDxV",gt="mobileContentShow__1akQp",mt="mobileContentHide__GXooF",yt="contentShow__RpFHp",ht="contentHide__Y-gr5",ft="header__2EPvy",vt="description__0f9xh",Ct="actions__hIL-J",y={overlay:dt,overlayShow:ct,overlayHide:pt,Dialog:ut,"Dialog--fullheight":"Dialog--fullheight__2W7sp","no-border-radius":"no-border-radius__G2Oo3",mobileContentShow:gt,mobileContentHide:mt,"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:yt,contentHide:ht,"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:ft,description:vt,actions:Ct},xt=({open:s,title:o,description:t,children:n,size:i="md",hideHeader:u,onClose:p,mobileFullHeight:h,dataset:E})=>{const{formatMessage:Ie}=Ge(),Pe=Xe(),He=St(s),Fe=Qe(E,{preplyDsComponent:R.Dialog}),Ee=$e(y,R.Dialog,[et("size",i),tt("fullheight",void 0,h)]).join(" "),Re=a.useCallback(Ae=>{Ae||p==null||p()},[p]);return e.jsx(We,{open:s,onOpenChange:Re,children:e.jsxs(Ne,{container:Pe,children:[e.jsx(Ve,{className:y.overlay,"data-testid":"dialog-overlay"}),e.jsxs(Me,{...Fe,ref:He,className:Ee,children:[e.jsxs("header",{className:y.header,children:[e.jsxs("hgroup",{hidden:u,children:[e.jsx(qe,{asChild:!0,children:e.jsx(Ke,{tag:"h3",variant:"medium",children:o})}),t&&e.jsx(Ue,{asChild:!0,children:e.jsx("p",{className:y.description,children:t})})]}),e.jsx(Je,{asChild:!0,children:e.jsx(Ze,{variant:"ghost",dataset:{testid:"dialog-close"},assistiveText:Ie(Ye.close),svg:lt})})]}),n]})]})})},Dt=({primaryLabel:s,secondaryLabel:o,onPrimaryClick:t,onSecondaryClick:n})=>e.jsxs("div",{className:y.actions,children:[e.jsx(d,{variant:"secondary",onClick:n,children:o}),e.jsx(d,{variant:"primary",onClick:t,children:s})]}),r=Object.assign(xt,{Actions:Dt});function St(s){const[o,t]=a.useState(null),n=a.useCallback(i=>t(i),[]);return a.useEffect(()=>{if(!s||!o)return;const i=async()=>{const p=o.getAnimations().map(E=>E.finished);await Promise.allSettled(p);const{y:h}=o.getBoundingClientRect();o.classList.toggle(y["no-border-radius"],h===0)};i(),window.addEventListener("resize",i);const u=new ResizeObserver(i);return u.observe(o),()=>{window.removeEventListener("resize",i),u.disconnect()}},[s,o]),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:'"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
+- 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
 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 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:`
+key, overlay click, or close button).`,name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},mobileFullHeight:{defaultValue:null,description:"Makes the Dialog take up the full screen height on mobile screens, i.e.\nscreens under the `medium-l` breakpoint.",name:"mobileFullHeight",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const yo={title:"Components/Dialog",component:r,parameters:{docs:{story:{inline:!1,height:600}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},args:{onClose:Le()}},l=e.jsx("div",{style:{width:"100%",height:"200px",background:"linear-gradient(to bottom, color-mix(in srgb, #e0e0e0, transparent), #e0e0e0)"}}),c=async({canvas:s,step:o})=>{let t;return await o("Open dialog",async()=>{const n=s.getByTestId("trigger");return await f.click(n),v(()=>(t=s.getByTestId("dialog"),g(t).toBeVisible()))}),t},C={render:function(){const[o,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:o,onClose:()=>t(!1),size:"xs",title:"Extra Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},x={render:function(){const[o,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:o,onClose:()=>t(!1),size:"sm",title:"Small Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},D={render:function(){const[o,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:o,onClose:()=>t(!1),size:"md",title:"Medium Dialog",dataset:{testid:"dialog"},children:l})]})},play:c},S={render:function(){const[o,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:o,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:
 
@@ -16,11 +16,11 @@ Use an object with breakpoints as keys to specify different sizes at different v
   }}
 />
 \`\`\`
-                `}}},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:`
+                `}}},render:function(){const[o,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:o,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(o){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=o.onClose)==null||p.call(o)},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(it,{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:F("Primary button clicked"),onSecondaryClick:F("Secondary button clicked")})]})]})},play:c},z={parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-s":{viewport:"medium-s"},"medium-l":{viewport:"medium-l"}}}},render:function(){const[o,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:o,onClose:()=>t(!1),size:"md",title:"Mobile Full Height",dataset:{testid:"dialog"},mobileFullHeight:!0,children:l})]})},play:c},O={render:function(){const[o,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: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:l})]})},play:c},j={render:function(){const[o,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:o,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:F("Primary button clicked"),onSecondaryClick:F("Secondary button clicked")})]})]})},play:c},k={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[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:`
+                `}}},render:function(){const[o,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:o,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(at,{justifyContent:"space-between",children:[e.jsx(m.Previous,{}),e.jsx(m.Next,{})]})]})})]})},play:c},_={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(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"8px"},children:[e.jsx(ot,{svg:nt}),e.jsx("span",{children:"Information Dialog"})]}),description:"This dialog title includes an icon component",dataset:{testid:"dialog"},children:l})]})},play:c},B={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(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,onClose:()=>t(!1),size:"md",title:e.jsxs("div",{style:{display:"flex",alignItems:"center",gap:"12px"},children:[e.jsx(st,{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},T={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
@@ -32,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[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(){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(d,{dataset:{testid:"trigger"},onClick:()=>t(!0),children:"Open"}),e.jsx(r,{open:o,title:"ZIndex Override",size:"md",onClose:()=>t(!1),dataset:{testid:"dialog"},children:l})]})},play:async({canvas:s,step:o})=>{await o("Open alert",async()=>(await f.click(s.getByTestId("trigger")),v(()=>{const t=s.getByTestId("dialog");g(t).toBeVisible()}))),await o("Check content's computed z-index",async()=>{const t=s.getByTestId("dialog"),n=getComputedStyle(t);g(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);g(n.zIndex).toBe("88")})}},I={tags:["!autodocs"],render:function(o){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=o.onClose)==null||i.call(o)},size:"md",title:"Test Close Button",dataset:{testid:"dialog"},children:l})]})},play:async s=>{const o=await c(s),{canvas:t,step:n,args:i}=s;await n("Close dialog using close button",async()=>{const u=t.getByTestId("dialog-close");return await f.click(u),v(async()=>(await g(o).not.toBeVisible(),g(i.onClose).toHaveBeenCalledOnce()))})}},P={tags:["!autodocs"],render:function(o){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=o.onClose)==null||i.call(o)},size:"md",title:"Test Close Overlay",dataset:{testid:"dialog"},children:l})]})},play:async s=>{const o=await c(s),{canvas:t,step:n,args:i}=s;await n("Close dialog by clicking overlay",async()=>{const u=t.getByTestId("dialog-overlay");return await f.click(u),v(async()=>(await g(o).not.toBeVisible(),g(i.onClose).toHaveBeenCalledOnce()))})}},H={tags:["!autodocs"],render:function(o){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=o.onClose)==null||i.call(o)},size:"md",title:"Test Close Keyboard",dataset:{testid:"dialog"},children:l})]})},play:async s=>{const o=await c(s),{step:t,args:n}=s;await t("Close dialog using escape key",async()=>(await f.keyboard("{Escape}"),v(async()=>(await g(o).not.toBeVisible(),g(n.onClose).toHaveBeenCalledOnce()))))}};var A,L,W;C.parameters={...C.parameters,docs:{...(A=C.parameters)==null?void 0:A.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -49,7 +49,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
             </>;
   },
   play: openDialogPlay
-}`,...(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:`{
+}`,...(W=(L=C.parameters)==null?void 0:L.docs)==null?void 0:W.source}}};var N,V,M;x.parameters={...x.parameters,docs:{...(N=x.parameters)==null?void 0:N.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -66,7 +66,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
             </>;
   },
   play: openDialogPlay
-}`,...(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:`{
+}`,...(M=(V=x.parameters)==null?void 0:V.docs)==null?void 0:M.source}}};var q,U,J;D.parameters={...D.parameters,docs:{...(q=D.parameters)==null?void 0:q.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -83,7 +83,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:`{
+}`,...(J=(U=D.parameters)==null?void 0:U.docs)==null?void 0:J.source}}};var Z,K,Y;S.parameters={...S.parameters,docs:{...(Z=S.parameters)==null?void 0:Z.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -100,7 +100,7 @@ Note: This is done using a \`useEffect\` just for the sake of the story. In a re
             </>;
   },
   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:`{
+}`,...(Y=(K=S.parameters)==null?void 0:K.docs)==null?void 0:Y.source}}};var G,X,Q;w.parameters={...w.parameters,docs:{...(G=w.parameters)==null?void 0:G.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -139,7 +139,7 @@ Use an object with breakpoints as keys to specify different sizes at different v
             </>;
   },
   play: openDialogPlay
-}`,...(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:`{
+}`,...(Q=(X=w.parameters)==null?void 0:X.docs)==null?void 0:Q.source}}};var $,ee,te;b.parameters={...b.parameters,docs:{...($=b.parameters)==null?void 0:$.docs,source:{originalSource:`{
   render: function Story(args) {
     const [open, setOpen] = useState(false);
     const [count, setCount] = useState(1);
@@ -165,7 +165,39 @@ Use an object with breakpoints as keys to specify different sizes at different v
             </>;
   },
   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:`{
+}`,...(te=(ee=b.parameters)==null?void 0:ee.docs)==null?void 0:te.source}}};var oe,se,ne;z.parameters={...z.parameters,docs:{...(oe=z.parameters)==null?void 0:oe.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      modes: {
+        'narrow-l': {
+          viewport: 'narrow-l'
+        },
+        'medium-s': {
+          viewport: 'medium-s'
+        },
+        'medium-l': {
+          viewport: 'medium-l'
+        }
+      }
+    }
+  },
+  render: function Story() {
+    const [open, setOpen] = useState(false);
+    return <>
+                <Button dataset={{
+        testid: 'trigger'
+      }} onClick={() => setOpen(true)}>
+                    Open
+                </Button>
+                <Dialog open={open} onClose={() => setOpen(false)} size="md" title="Mobile Full Height" dataset={{
+        testid: 'dialog'
+      }} mobileFullHeight>
+                    {DummyContent}
+                </Dialog>
+            </>;
+  },
+  play: openDialogPlay
+}`,...(ne=(se=z.parameters)==null?void 0:se.docs)==null?void 0:ne.source}}};var ae,ie,re;O.parameters={...O.parameters,docs:{...(ae=O.parameters)==null?void 0:ae.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -182,7 +214,7 @@ Use an object with breakpoints as keys to specify different sizes at different v
             </>;
   },
   play: openDialogPlay
-}`,...(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:`{
+}`,...(re=(ie=O.parameters)==null?void 0:ie.docs)==null?void 0:re.source}}};var le,de,ce;j.parameters={...j.parameters,docs:{...(le=j.parameters)==null?void 0:le.docs,source:{originalSource:`{
   render: function Story() {
     const [open, setOpen] = useState(false);
     return <>
@@ -200,7 +232,7 @@ Use an object with breakpoints as keys to specify different sizes at different v
             </>;
   },
   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:`{
+}`,...(ce=(de=j.parameters)==null?void 0:de.docs)==null?void 0:ce.source}}};var pe,ue,ge;k.parameters={...k.parameters,docs:{...(pe=k.parameters)==null?void 0:pe.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -243,7 +275,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;k.parameters={...k.parameters,docs:{...(ce=k.parameters)==null?void 0:ce.docs,source:{originalSource:`{
+}`,...(ge=(ue=k.parameters)==null?void 0:ue.docs)==null?void 0:ge.source}}};var me,ye,he;_.parameters={..._.parameters,docs:{...(me=_.parameters)==null?void 0:me.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -274,7 +306,7 @@ like in this story.
             </>;
   },
   play: openDialogPlay
-}`,...(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:`{
+}`,...(he=(ye=_.parameters)==null?void 0:ye.docs)==null?void 0:he.source}}};var fe,ve,Ce;B.parameters={...B.parameters,docs:{...(fe=B.parameters)==null?void 0:fe.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -305,7 +337,7 @@ like in this story.
             </>;
   },
   play: openDialogPlay
-}`,...(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:`{
+}`,...(Ce=(ve=B.parameters)==null?void 0:ve.docs)==null?void 0:Ce.source}}};var xe,De,Se;T.parameters={...T.parameters,docs:{...(xe=T.parameters)==null?void 0:xe.docs,source:{originalSource:`{
   parameters: {
     docs: {
       description: {
@@ -374,7 +406,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       expect(styles.zIndex).toBe('88');
     });
   }
-}`,...(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:`{
+}`,...(Se=(De=T.parameters)==null?void 0:De.docs)==null?void 0:Se.source}}};var we,be,ze;I.parameters={...I.parameters,docs:{...(we=I.parameters)==null?void 0:we.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   render: function Story(args) {
     const [open, setOpen] = useState(false);
@@ -410,7 +442,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       });
     });
   }
-}`,...(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:`{
+}`,...(ze=(be=I.parameters)==null?void 0:be.docs)==null?void 0:ze.source}}};var Oe,je,ke;P.parameters={...P.parameters,docs:{...(Oe=P.parameters)==null?void 0:Oe.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   render: function Story(args) {
     const [open, setOpen] = useState(false);
@@ -446,7 +478,7 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       });
     });
   }
-}`,...(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:`{
+}`,...(ke=(je=P.parameters)==null?void 0:je.docs)==null?void 0:ke.source}}};var _e,Be,Te;H.parameters={...H.parameters,docs:{...(_e=H.parameters)==null?void 0:_e.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   render: function Story(args) {
     const [open, setOpen] = useState(false);
@@ -480,4 +512,4 @@ Note: This is done using a \\\`useEffect\\\` just for the sake of the story. In
       });
     });
   }
-}`,...(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};
+}`,...(Te=(Be=H.parameters)==null?void 0:Be.docs)==null?void 0:Te.source}}};const ho=["ExtraSmall","Small","Medium","Large","WidthResponsiveness","HeightResponsiveness","MobileFullHeight","WithHiddenHeader","WithActions","WithSteps","WithIconInTitle","WithAvatarInTitle","WithZIndexOverride","TestCloseButton","TestCloseOverlay","TestCloseKeyboard"];export{C as ExtraSmall,b as HeightResponsiveness,S as Large,D as Medium,z as MobileFullHeight,x as Small,I as TestCloseButton,H as TestCloseKeyboard,P as TestCloseOverlay,w as WidthResponsiveness,j as WithActions,B as WithAvatarInTitle,O as WithHiddenHeader,_ as WithIconInTitle,k as WithSteps,T as WithZIndexOverride,ho as __namedExportsOrder,yo as default};

package/dist/assets/{DocsRenderer-CFRXHY34-DyeBV0z3.js → DocsRenderer-CFRXHY34-Drp94F88.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-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};
+import{_ as l}from"./iframe-BE13K_u-.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-CjMmneJr.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/{Flag.stories-CuHMLwKy.js → Flag.stories-hPDFXFLs.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-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:`{
+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-ClC7kEHn.js";import{L as F}from"./LayoutFlex-BBGvSVMb.js";import{L as y,a as r}from"./LayoutGridItem-CZ6SKl8g.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-Da1de2sS.js → Flag.test.stories-Dn7xe9kp.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-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:`{
+import{j as d}from"./jsx-runtime-BYouaCF_.js";import{e as o}from"./index-DDyIDR-R.js";import{C as s}from"./CountryFlag-ClC7kEHn.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.stories-BaSJbnE1.js → FormControl.stories-DekxQG9a.js}

@@ -1,4 +1,4 @@
-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"})`
+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-ZIxauYsE.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-B0rTmnad.js → Heading-ese4_5Hg.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-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};
+@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:'"medium"'},{value:'"small"'},{value:'"massive"'},{value:'"huge"'},{value:'"extraLarge"'},{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-Cs64JgS0.js → Heading.stories-Pcuq78-p.js}

@@ -1,4 +1,4 @@
-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={{
+import{j as a}from"./jsx-runtime-BYouaCF_.js";import{H as e}from"./Heading-ese4_5Hg.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',

package/dist/assets/{Icon-RSC-B7Up3SXG.js → Icon-RSC-DHJisRIw.js}

@@ -1,4 +1,4 @@
-import{j as o}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as n}from"./index-uOP2uDdf.js";import{M as m,S as s}from"./index-Dbtw7LqJ.js";import{ServerComponent as i}from"./Icon.stories-BJZek2zN.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-D3RLzFNO.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-Bqcca_-M.js";import"./Icon-BLj2hNSU.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./options-Dn0Ts6qK.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
+import{j as o}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as n}from"./index-uOP2uDdf.js";import{M as m,S as s}from"./index-CjMmneJr.js";import{ServerComponent as i}from"./Icon.stories-Cv6aq9BI.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BE13K_u-.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-Bqcca_-M.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./options-Dn0Ts6qK.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
 `,o.jsx(e.h1,{id:"use-icon-as-react-server-component",children:"Use Icon as react server component"}),`
 `,o.jsxs(e.p,{children:["To use Icon as react server component, provide ",o.jsx(e.code,{children:"svg"})," as element:"]}),`
 `,o.jsx(s,{of:i}),`

package/dist/assets/{Icon-BLj2hNSU.js → Icon-ZIxauYsE.js}

@@ -5,4 +5,4 @@ import{j as b}from"./jsx-runtime-BYouaCF_.js";import{r as w}from"./index-B3evPFB
 @example <caption>Using as react server component</caption>
 import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
 
-<Icon svg={<TokyoUINotesWithPad />} />`,name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},size:{defaultValue:{value:"s"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"2xs"'},{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"16"'}]}},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"'}]}},expColor:{defaultValue:null,description:"If passed along with `accent`, `accent` takes precedence.",name:"expColor",required:!1,type:{name:"enum",value:[{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-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:'"grey-0"'},{value:'"grey-50"'},{value:'"grey-100"'},{value:'"grey-200"'},{value:'"grey-300"'},{value:'"grey-400"'},{value:'"grey-500"'},{value:'"grey-600"'},{value:'"grey-700"'},{value:'"grey-800"'},{value:'"grey-900"'},{value:'"pink-50"'},{value:'"pink-100"'},{value:'"pink-200"'},{value:'"pink-300"'},{value:'"pink-400"'},{value:'"pink-500"'},{value:'"pink-600"'},{value:'"pink-700"'},{value:'"pink-800"'},{value:'"yellow-50"'},{value:'"yellow-600"'},{value:'"yellow-700"'},{value:'"yellow-800"'},{value:'"blue-50"'},{value:'"blue-600"'},{value:'"blue-700"'},{value:'"blue-800"'},{value:'"teal-50"'},{value:'"teal-600"'},{value:'"teal-700"'},{value:'"teal-800"'},{value:'"red-50"'},{value:'"red-600"'},{value:'"red-700"'},{value:'"red-800"'}]}},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"'}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:"label",required:!1,type:{name:"enum",value:[{value:"string"}]}},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: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{x as I};
+<Icon svg={<TokyoUINotesWithPad />} />`,name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},size:{defaultValue:{value:"s"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"2xs"'},{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'}]}},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"'}]}},expColor:{defaultValue:null,description:"If passed along with `accent`, `accent` takes precedence.",name:"expColor",required:!1,type:{name:"enum",value:[{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-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:'"grey-0"'},{value:'"grey-50"'},{value:'"grey-100"'},{value:'"grey-200"'},{value:'"grey-300"'},{value:'"grey-400"'},{value:'"grey-500"'},{value:'"grey-600"'},{value:'"grey-700"'},{value:'"grey-800"'},{value:'"grey-900"'},{value:'"pink-50"'},{value:'"pink-100"'},{value:'"pink-200"'},{value:'"pink-300"'},{value:'"pink-400"'},{value:'"pink-500"'},{value:'"pink-600"'},{value:'"pink-700"'},{value:'"pink-800"'},{value:'"yellow-50"'},{value:'"yellow-600"'},{value:'"yellow-700"'},{value:'"yellow-800"'},{value:'"blue-50"'},{value:'"blue-600"'},{value:'"blue-700"'},{value:'"blue-800"'},{value:'"teal-50"'},{value:'"teal-600"'},{value:'"teal-700"'},{value:'"teal-800"'},{value:'"red-50"'},{value:'"red-600"'},{value:'"red-700"'},{value:'"red-800"'}]}},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"'}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:"label",required:!1,type:{name:"enum",value:[{value:"string"}]}},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: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{x as I};

package/dist/assets/{Icon.stories-BJZek2zN.js → Icon.stories-Cv6aq9BI.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{F as o}from"./TokyoUINotesWithPad-Bqcca_-M.js";import{I as s}from"./Icon-BLj2hNSU.js";import{E as h}from"./options-Dn0Ts6qK.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";const W={title:"components/Icon",component:s,parameters:{docs:{description:{component:"To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page)."}}}},t=()=>e.jsxs("div",{style:{display:"flex",alignItems:"end",gap:"4px"},children:[e.jsx(s,{svg:o,size:"16"}),e.jsx(s,{svg:o,size:"24"}),e.jsx(s,{svg:o,size:"32"}),e.jsx(s,{svg:o,size:"48"})]}),n=()=>e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:h.map(a=>e.jsxs("div",{style:{display:"flex",gap:16},children:[e.jsx(s,{svg:o,expColor:a.id},a.id),e.jsx("span",{children:a.id})]},a.id))}),r=()=>e.jsx(s,{svg:e.jsx(o,{})});r.tags=["!dev","!autodocs"];const i={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:o,dataset:{qaid:"icon"}},argTypes:{svg:{control:!1},dataset:{control:"object"},label:{control:"text"},color:{table:{disable:!0}}}};var p,c,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`() => <div style={{
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{F as o}from"./TokyoUINotesWithPad-Bqcca_-M.js";import{I as s}from"./Icon-ZIxauYsE.js";import{E as h}from"./options-Dn0Ts6qK.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";const W={title:"components/Icon",component:s,parameters:{docs:{description:{component:"To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page)."}}}},t=()=>e.jsxs("div",{style:{display:"flex",alignItems:"end",gap:"4px"},children:[e.jsx(s,{svg:o,size:"16"}),e.jsx(s,{svg:o,size:"24"}),e.jsx(s,{svg:o,size:"32"}),e.jsx(s,{svg:o,size:"48"})]}),n=()=>e.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:h.map(a=>e.jsxs("div",{style:{display:"flex",gap:16},children:[e.jsx(s,{svg:o,expColor:a.id},a.id),e.jsx("span",{children:a.id})]},a.id))}),r=()=>e.jsx(s,{svg:e.jsx(o,{})});r.tags=["!dev","!autodocs"];const i={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:o,dataset:{qaid:"icon"}},argTypes:{svg:{control:!1},dataset:{control:"object"},label:{control:"text"},color:{table:{disable:!0}}}};var p,c,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`() => <div style={{
   display: 'flex',
   alignItems: 'end',
   gap: '4px'