@preply/ds-docs 11.5.0 → 11.5.1

package/dist/assets/{Link.stories-DlsXh361.js → Link.stories-CbQnXOIu.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Text-BiCO96_r.js";import{n as u,t as d}from"./Link-DLL8OonN.js";var f,p,m,h,g,_,v,y,b,x,S;t((()=>{o(),a(),f=e(n(),1),c(),u(),p=s(),m={title:`components/Link`,component:d},h=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,children:`unsetColors`})]})},g=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,p.jsx)(l,{variant:`default-regular-italic`,children:"(use the `unsetColors` variant)"}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`primary`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`primary`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`primary`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{style:{backgroundColor:e},children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,accent:`inverted`,children:`inverted`}),(0,p.jsx)(l,{variant:`default-regular-italic`,accent:`inverted`,children:`normal`}),(0,p.jsxs)(l,{accent:`inverted`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,accent:`inverted`,children:`active`}),(0,p.jsxs)(l,{accent:`inverted`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`positive`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`positive`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`positive`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`critical`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`critical`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`critical`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]})]})},g.parameters={pseudo:{active:`[data-active="true"]`}},_=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,children:`unsetColors`})]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`hover`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,dataset:{hover:!0},children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,dataset:{hover:!0},children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,dataset:{hover:!0},children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,dataset:{hover:!0},children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,dataset:{hover:!0},children:`unsetColors`})]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,dataset:{active:!0},children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,dataset:{active:!0},children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,dataset:{active:!0},children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,dataset:{active:!0},children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,dataset:{active:!0},children:`unsetColors`})]})]})},_.parameters={pseudo:{active:`[data-active="true"]`,hover:`[data-hover="true"]`}},v=()=>(0,p.jsxs)(`p`,{style:{width:`12ch`},children:[`Unlock your potential;`,` `,(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,inline:!0,children:`visit Preply`}),`.`]}),y=(0,f.forwardRef)(function({to:e,...t},n){return(0,p.jsx)(`a`,{...t,href:e,ref:n})}),y.displayName=`Link`,b={parameters:{docs:{source:{type:`dynamic`}}},decorators:[e=>(0,p.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,width:`max-content`,gap:`8px`},children:(0,p.jsx)(e,{})})],render:()=>(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(d,{as:(0,p.jsx)(y,{to:`/`}),variant:`neutral`,children:`Next.js Link`}),(0,p.jsx)(d,{as:(0,p.jsx)(`button`,{}),variant:`neutral`,children:`Button`})]})},x={parameters:{chromatic:{disableSnapshot:!0}},args:{children:`Click me`,href:`https://preply.com`,variant:`neutral`,dataset:{qaid:`link`}},argTypes:{dataset:{control:`object`},inline:{control:`boolean`},noUnderline:{control:`boolean`},opensInNewTab:{control:`boolean`},nofollow:{control:`boolean`},download:{control:`boolean`},assistiveText:{control:`text`},href:{control:`text`},url:{table:{disable:!0}}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./Text-at08VF1d.js";import{n as u,t as d}from"./Link-DLL8OonN.js";var f,p,m,h,g,_,v,y,b,x,S;t((()=>{o(),a(),f=e(n(),1),c(),u(),p=s(),m={title:`components/Link`,component:d},h=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,children:`unsetColors`})]})},g=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,p.jsx)(l,{variant:`default-regular-italic`,children:"(use the `unsetColors` variant)"}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`primary`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`primary`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`primary`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{style:{backgroundColor:e},children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,accent:`inverted`,children:`inverted`}),(0,p.jsx)(l,{variant:`default-regular-italic`,accent:`inverted`,children:`normal`}),(0,p.jsxs)(l,{accent:`inverted`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,accent:`inverted`,children:`active`}),(0,p.jsxs)(l,{accent:`inverted`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`positive`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`positive`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`positive`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]}),(0,p.jsxs)(`div`,{children:[(0,p.jsx)(l,{variant:`large-semibold-italic`,children:`critical`}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(l,{accent:`critical`,children:[`Lorem ipsum `,(0,p.jsx)(d,{variant:`unsetColors`,children:`dolor sit amet`}),` amet.`]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(l,{accent:`critical`,children:[`Lorem ipsum`,` `,(0,p.jsx)(d,{variant:`unsetColors`,dataset:{active:!0},children:`dolor sit amet`}),` `,`amet.`]})]})]})},g.parameters={pseudo:{active:`[data-active="true"]`}},_=()=>{let e=r(i.background.primaryInverted);return(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`,flexDirection:`column`},children:[(0,p.jsx)(l,{variant:`default-regular-italic`,children:`normal`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,children:`unsetColors`})]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`hover`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,dataset:{hover:!0},children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,dataset:{hover:!0},children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,dataset:{hover:!0},children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,dataset:{hover:!0},children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,dataset:{hover:!0},children:`unsetColors`})]}),(0,p.jsx)(l,{variant:`default-regular-italic`,children:`active`}),(0,p.jsxs)(`div`,{style:{display:`flex`,gap:`16px`},children:[(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutral`,dataset:{active:!0},children:`neutral`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`neutralInverted`,dataset:{active:!0},children:`neutralInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDark`,dataset:{active:!0},children:`accentDark`}),(0,p.jsx)(`span`,{style:{backgroundColor:e},children:(0,p.jsx)(d,{href:`https://preply.com`,variant:`accentDarkInverted`,dataset:{active:!0},children:`accentDarkInverted`})}),(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,dataset:{active:!0},children:`unsetColors`})]})]})},_.parameters={pseudo:{active:`[data-active="true"]`,hover:`[data-hover="true"]`}},v=()=>(0,p.jsxs)(`p`,{style:{width:`12ch`},children:[`Unlock your potential;`,` `,(0,p.jsx)(d,{href:`https://preply.com`,variant:`unsetColors`,inline:!0,children:`visit Preply`}),`.`]}),y=(0,f.forwardRef)(function({to:e,...t},n){return(0,p.jsx)(`a`,{...t,href:e,ref:n})}),y.displayName=`Link`,b={parameters:{docs:{source:{type:`dynamic`}}},decorators:[e=>(0,p.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,width:`max-content`,gap:`8px`},children:(0,p.jsx)(e,{})})],render:()=>(0,p.jsxs)(p.Fragment,{children:[(0,p.jsx)(d,{as:(0,p.jsx)(y,{to:`/`}),variant:`neutral`,children:`Next.js Link`}),(0,p.jsx)(d,{as:(0,p.jsx)(`button`,{}),variant:`neutral`,children:`Button`})]})},x={parameters:{chromatic:{disableSnapshot:!0}},args:{children:`Click me`,href:`https://preply.com`,variant:`neutral`,dataset:{qaid:`link`}},argTypes:{dataset:{control:`object`},inline:{control:`boolean`},noUnderline:{control:`boolean`},opensInNewTab:{control:`boolean`},nofollow:{control:`boolean`},download:{control:`boolean`},assistiveText:{control:`text`},href:{control:`text`},url:{table:{disable:!0}}}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
   const grey = getTokenVar(color.background.primaryInverted);
   return <div style={{
     display: 'flex',

package/dist/assets/{MultiSelectChips-BvRx5YLq.js → MultiSelectChips-BzhRi2EC.js}

@@ -1,2 +1,2 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./useControllableState-B6dCOM10.js";import{a as f,c as p,i as m,l as h,n as g,o as _,r as v,s as y,t as b}from"./createRequiredContext-9tmtQKcI.js";var x,S,C,w,T,E,D=t((()=>{x=e(n(),1),d(),h(),i(),s(),c(),g(),S=a(),[C,w]=b(`MultiSelectChips`),T=(0,x.forwardRef)(function({items:e,children:t,orientation:n=p,"aria-label":i,"aria-controls":a,value:s,onValueChange:c,defaultValue:d,dataset:f,...m},h){let[g,v]=u({value:s,onValueChange:c,defaultValue:d??[]}),b=(e,t)=>{v(t?g.filter(t=>t!==e):[...g,e])},x=e?e.map(({label:e,value:t,...n})=>(0,S.jsx)(E,{value:t,...n,children:e},t)):t;return(0,S.jsx)(C,{value:{values:g,onToggle:b},children:(0,S.jsx)(y,{orientation:n,children:(0,S.jsx)(_,{...l(m),ref:h,orientation:n,"aria-orientation":n,"aria-label":i,"aria-controls":a,role:`listbox`,"aria-multiselectable":`true`,...r(f,{preplyDsComponent:o.MultiSelectChips}),children:x})})})}),E=(0,x.forwardRef)(function({value:e,children:t,icon:n,countryFlagCode:i,disabled:a,counter:s,dataset:c,...u},d){let{values:p,onToggle:h}=w(),g=p.includes(e);return(0,S.jsx)(f,{role:`presentation`,children:(0,S.jsx)(v,{...l(u),ref:d,role:`option`,"aria-selected":g,onClick:()=>h(e,g),icon:n,countryFlagCode:i,disabled:a,...r(c,{preplyDsComponent:o.MultiSelectChipsItem}),children:(0,S.jsx)(m,{counter:s,children:t})})})});try{T.displayName=`MultiSelectChips`,T.__docgenInfo={description:`A chips component that allows selection of multiple options from a group.
-Users can select multiple chips, and clicking a selected chip will deselect it.`,displayName:`MultiSelectChips`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},value:{defaultValue:null,description:`Current value of the chips. When provided, the component operates in controlled mode`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`T[]`}]}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`T[]`}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:`aria-controls`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the chips group. Required for screen reader users`,name:`aria-label`,required:!0,type:{name:`string`}},onValueChange:{defaultValue:null,description:`Callback fired when the value changes. Receives the new value as an argument`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T[]) => void`}]}},orientation:{defaultValue:{value:`'horizontal'`},description:`Layout orientation of the chips group.`,name:`orientation`,required:!1,type:{name:`enum`,value:[{value:`"horizontal"`},{value:`"vertical"`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`(Omit<ChipsItemProps, "children" | "value"> & { value: NonNullable<T>; label: ReactNode; })[]`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLUListElement | null) => void`},{value:`RefObject<HTMLUListElement>`}]}}}}}catch{}try{E.displayName=`MultiSelectChipsItem`,E.__docgenInfo={description:`Individual chip item for use within MultiSelectChips.`,displayName:`MultiSelectChipsItem`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},countryFlagCode:{defaultValue:null,description:``,name:`countryFlagCode`,required:!1,type:{name:`enum`,value:[{value:`"id"`},{value:`"at"`},{value:`"is"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"as"`},{value:`"ad"`},{value:`"ao"`},{value:`"ai"`},{value:`"aq"`},{value:`"ag"`},{value:`"ar"`},{value:`"am"`},{value:`"aw"`},{value:`"sh-ac"`},{value:`"asean"`},{value:`"au"`},{value:`"az"`},{value:`"bs"`},{value:`"bh"`},{value:`"bd"`},{value:`"bb"`},{value:`"es-pv"`},{value:`"by"`},{value:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{value:`"br"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"td"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"hr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"li"`},{value:`"lt"`},{value:`"lu"`},{value:`"mo"`},{value:`"mg"`},{value:`"mw"`},{value:`"my"`},{value:`"mv"`},{value:`"ml"`},{value:`"mt"`},{value:`"mh"`},{value:`"mq"`},{value:`"mr"`},{value:`"mu"`},{value:`"yt"`},{value:`"mx"`},{value:`"md"`},{value:`"mc"`},{value:`"mn"`},{value:`"me"`},{value:`"ms"`},{value:`"ma"`},{value:`"mz"`},{value:`"mm"`},{value:`"na"`},{value:`"nr"`},{value:`"np"`},{value:`"nl"`},{value:`"nc"`},{value:`"nz"`},{value:`"ni"`},{value:`"ne"`},{value:`"ng"`},{value:`"nu"`},{value:`"nf"`},{value:`"kp"`},{value:`"mk"`},{value:`"gb-nir"`},{value:`"mp"`},{value:`"no"`},{value:`"om"`},{value:`"pc"`},{value:`"pk"`},{value:`"pw"`},{value:`"pa"`},{value:`"pg"`},{value:`"py"`},{value:`"pe"`},{value:`"ph"`},{value:`"pn"`},{value:`"pl"`},{value:`"pt"`},{value:`"pr"`},{value:`"qa"`},{value:`"cg"`},{value:`"ro"`},{value:`"ru"`},{value:`"rw"`},{value:`"re"`},{value:`"bl"`},{value:`"sh-hl"`},{value:`"sh"`},{value:`"kn"`},{value:`"lc"`},{value:`"mf"`},{value:`"pm"`},{value:`"vc"`},{value:`"ws"`},{value:`"sm"`},{value:`"st"`},{value:`"sa"`},{value:`"gb-sct"`},{value:`"sn"`},{value:`"rs"`},{value:`"sc"`},{value:`"sl"`},{value:`"sg"`},{value:`"sx"`},{value:`"sk"`},{value:`"si"`},{value:`"sb"`},{value:`"so"`},{value:`"za"`},{value:`"gs"`},{value:`"kr"`},{value:`"ss"`},{value:`"es"`},{value:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tw"`},{value:`"tj"`},{value:`"tz"`},{value:`"th"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"tr"`},{value:`"ug"`},{value:`"ua"`},{value:`"ae"`},{value:`"gb"`},{value:`"un"`},{value:`"um"`},{value:`"us"`},{value:`"uy"`},{value:`"uz"`},{value:`"vu"`},{value:`"ve"`},{value:`"vn"`},{value:`"vg"`},{value:`"vi"`},{value:`"gb-wls"`},{value:`"wf"`},{value:`"eh"`},{value:`"ye"`},{value:`"zm"`},{value:`"zw"`}]}},value:{defaultValue:null,description:`Unique identifier for this chip. Used for selection tracking`,name:`value`,required:!0,type:{name:`string`}},children:{defaultValue:null,description:`Content to display inside the chip`,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`}]}},counter:{defaultValue:null,description:`Optional numeric counter to display alongside the chip label`,name:`counter`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{E as n,D as r,T as t};
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,t as l}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as u,t as d}from"./useControllableState-B6dCOM10.js";import{a as f,c as p,i as m,l as h,n as g,o as _,r as v,s as y,t as b}from"./createRequiredContext-B8FlkWgj.js";var x,S,C,w,T,E,D=t((()=>{x=e(n(),1),d(),h(),i(),s(),c(),g(),S=a(),[C,w]=b(`MultiSelectChips`),T=(0,x.forwardRef)(function({items:e,children:t,orientation:n=p,"aria-label":i,"aria-controls":a,value:s,onValueChange:c,defaultValue:d,dataset:f,...m},h){let[g,v]=u({value:s,onValueChange:c,defaultValue:d??[]}),b=(e,t)=>{v(t?g.filter(t=>t!==e):[...g,e])},x=e?e.map(({label:e,value:t,...n})=>(0,S.jsx)(E,{value:t,...n,children:e},t)):t;return(0,S.jsx)(C,{value:{values:g,onToggle:b},children:(0,S.jsx)(y,{orientation:n,children:(0,S.jsx)(_,{...l(m),ref:h,orientation:n,"aria-orientation":n,"aria-label":i,"aria-controls":a,role:`listbox`,"aria-multiselectable":`true`,...r(f,{preplyDsComponent:o.MultiSelectChips}),children:x})})})}),E=(0,x.forwardRef)(function({value:e,children:t,icon:n,countryFlagCode:i,disabled:a,counter:s,dataset:c,...u},d){let{values:p,onToggle:h}=w(),g=p.includes(e);return(0,S.jsx)(f,{role:`presentation`,children:(0,S.jsx)(v,{...l(u),ref:d,role:`option`,"aria-selected":g,onClick:()=>h(e,g),icon:n,countryFlagCode:i,disabled:a,...r(c,{preplyDsComponent:o.MultiSelectChipsItem}),children:(0,S.jsx)(m,{counter:s,children:t})})})});try{T.displayName=`MultiSelectChips`,T.__docgenInfo={description:`A chips component that allows selection of multiple options from a group.
+Users can select multiple chips, and clicking a selected chip will deselect it.`,displayName:`MultiSelectChips`,props:{value:{defaultValue:null,description:`Current value of the chips. When provided, the component operates in controlled mode`,name:`value`,required:!1,type:{name:`enum`,value:[{value:`T[]`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the chips group. Required for screen reader users`,name:`aria-label`,required:!0,type:{name:`string`}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},defaultValue:{defaultValue:null,description:"Default value for uncontrolled usage. Will be ignored if `value` is provided",name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`T[]`}]}},"aria-controls":{defaultValue:null,description:"If the chips control other elements on the page, use `aria-controls` with the target element's ID.",name:`aria-controls`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},orientation:{defaultValue:{value:`'horizontal'`},description:`Layout orientation of the chips group.`,name:`orientation`,required:!1,type:{name:`enum`,value:[{value:`"horizontal"`},{value:`"vertical"`}]}},onValueChange:{defaultValue:null,description:`Callback fired when the value changes. Receives the new value as an argument`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T[]) => void`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`(Omit<ChipsItemProps, "value" | "children"> & { value: NonNullable<T>; label: ReactNode; })[]`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLUListElement | null) => void`},{value:`RefObject<HTMLUListElement>`}]}}}}}catch{}try{E.displayName=`MultiSelectChipsItem`,E.__docgenInfo={description:`Individual chip item for use within MultiSelectChips.`,displayName:`MultiSelectChipsItem`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},countryFlagCode:{defaultValue:null,description:``,name:`countryFlagCode`,required:!1,type:{name:`enum`,value:[{value:`"id"`},{value:`"is"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"as"`},{value:`"ad"`},{value:`"ao"`},{value:`"ai"`},{value:`"aq"`},{value:`"ag"`},{value:`"ar"`},{value:`"am"`},{value:`"aw"`},{value:`"sh-ac"`},{value:`"asean"`},{value:`"au"`},{value:`"at"`},{value:`"az"`},{value:`"bs"`},{value:`"bh"`},{value:`"bd"`},{value:`"bb"`},{value:`"es-pv"`},{value:`"by"`},{value:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{value:`"br"`},{value:`"io"`},{value:`"bn"`},{value:`"bg"`},{value:`"bf"`},{value:`"bi"`},{value:`"cv"`},{value:`"kh"`},{value:`"cm"`},{value:`"ca"`},{value:`"ic"`},{value:`"es-ct"`},{value:`"ky"`},{value:`"cf"`},{value:`"cefta"`},{value:`"td"`},{value:`"cl"`},{value:`"cn"`},{value:`"cx"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"hr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cy"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{value:`"sv"`},{value:`"gb-eng"`},{value:`"gq"`},{value:`"er"`},{value:`"ee"`},{value:`"sz"`},{value:`"et"`},{value:`"eu"`},{value:`"fk"`},{value:`"fo"`},{value:`"fm"`},{value:`"fj"`},{value:`"fi"`},{value:`"fr"`},{value:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{value:`"de"`},{value:`"gh"`},{value:`"gi"`},{value:`"gr"`},{value:`"gl"`},{value:`"gd"`},{value:`"gp"`},{value:`"gu"`},{value:`"gt"`},{value:`"gg"`},{value:`"gn"`},{value:`"gw"`},{value:`"gy"`},{value:`"ht"`},{value:`"hm"`},{value:`"va"`},{value:`"hn"`},{value:`"hk"`},{value:`"hu"`},{value:`"in"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{value:`"it"`},{value:`"jm"`},{value:`"jp"`},{value:`"je"`},{value:`"jo"`},{value:`"kz"`},{value:`"ke"`},{value:`"ki"`},{value:`"xk"`},{value:`"kw"`},{value:`"kg"`},{value:`"la"`},{value:`"lv"`},{value:`"arab"`},{value:`"lb"`},{value:`"ls"`},{value:`"lr"`},{value:`"ly"`},{value:`"li"`},{value:`"lt"`},{value:`"lu"`},{value:`"mo"`},{value:`"mg"`},{value:`"mw"`},{value:`"my"`},{value:`"mv"`},{value:`"ml"`},{value:`"mt"`},{value:`"mh"`},{value:`"mq"`},{value:`"mr"`},{value:`"mu"`},{value:`"yt"`},{value:`"mx"`},{value:`"md"`},{value:`"mc"`},{value:`"mn"`},{value:`"me"`},{value:`"ms"`},{value:`"ma"`},{value:`"mz"`},{value:`"mm"`},{value:`"na"`},{value:`"nr"`},{value:`"np"`},{value:`"nl"`},{value:`"nc"`},{value:`"nz"`},{value:`"ni"`},{value:`"ne"`},{value:`"ng"`},{value:`"nu"`},{value:`"nf"`},{value:`"kp"`},{value:`"mk"`},{value:`"gb-nir"`},{value:`"mp"`},{value:`"no"`},{value:`"om"`},{value:`"pc"`},{value:`"pk"`},{value:`"pw"`},{value:`"pa"`},{value:`"pg"`},{value:`"py"`},{value:`"pe"`},{value:`"ph"`},{value:`"pn"`},{value:`"pl"`},{value:`"pt"`},{value:`"pr"`},{value:`"qa"`},{value:`"cg"`},{value:`"ro"`},{value:`"ru"`},{value:`"rw"`},{value:`"re"`},{value:`"bl"`},{value:`"sh-hl"`},{value:`"sh"`},{value:`"kn"`},{value:`"lc"`},{value:`"mf"`},{value:`"pm"`},{value:`"vc"`},{value:`"ws"`},{value:`"sm"`},{value:`"st"`},{value:`"sa"`},{value:`"gb-sct"`},{value:`"sn"`},{value:`"rs"`},{value:`"sc"`},{value:`"sl"`},{value:`"sg"`},{value:`"sx"`},{value:`"sk"`},{value:`"si"`},{value:`"sb"`},{value:`"so"`},{value:`"za"`},{value:`"gs"`},{value:`"kr"`},{value:`"ss"`},{value:`"es"`},{value:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tw"`},{value:`"tj"`},{value:`"tz"`},{value:`"th"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"to"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"tr"`},{value:`"ug"`},{value:`"ua"`},{value:`"ae"`},{value:`"gb"`},{value:`"un"`},{value:`"um"`},{value:`"us"`},{value:`"uy"`},{value:`"uz"`},{value:`"vu"`},{value:`"ve"`},{value:`"vn"`},{value:`"vg"`},{value:`"vi"`},{value:`"gb-wls"`},{value:`"wf"`},{value:`"eh"`},{value:`"ye"`},{value:`"zm"`},{value:`"zw"`}]}},value:{defaultValue:null,description:`Unique identifier for this chip. Used for selection tracking`,name:`value`,required:!0,type:{name:`string`}},children:{defaultValue:null,description:`Content to display inside the chip`,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`}]}},counter:{defaultValue:null,description:`Optional numeric counter to display alongside the chip label`,name:`counter`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{E as n,D as r,T as t};

package/dist/assets/{MultiSelectChips.stories-2TW7F44B.js → MultiSelectChips.stories-D5VPTFyB.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-BiCO96_r.js";import{n as o,t as s}from"./Heading-DX-HCDkx.js";import{n as c,t as l}from"./Button-_0pS2khJ.js";import{r as u,t as d}from"./lib-8ue2PVWI.js";import{r as f,t as p}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as m,r as h,t as g}from"./MultiSelectChips-BvRx5YLq.js";import{n as ee,t as _}from"./LayoutFlex-CEOcocT6.js";import{n as v,t as te}from"./Link-DLL8OonN.js";import{n as ne,t as y}from"./Tooltip-CX8T37NP.js";import{a as b,c as re,i as ie,n as ae,o as oe,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),h(),re(),oe(),ie(),ae(),ce(),u(),ee(),i(),v(),f(),o(),ne(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/MultiSelectChips`,component:g,subcomponents:{MultiSelectChipsItem:m},parameters:{layout:`padded`},args:{"aria-label":`Select skills`,defaultValue:[`vocabulary`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},beforeEach:()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(g,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N([`vocabulary`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`true`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Speaking`}),a=r.getByRole(`option`,{name:`Vocabulary`});await t(`Disabled chip must have disabled attribute`,async()=>{T(i).toBeDisabled()}),await t(`Disabled chip must not be selectable`,async()=>{await O.click(i),T(n.onValueChange).not.toHaveBeenCalled(),T(a).toHaveAttribute(`aria-selected`,`true`)})}},I={args:{"aria-label":`Select availabilities`,defaultValue:[`morning`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Morning`})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Select languages to learn`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:/^English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Select countries`,defaultValue:[`ua`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Ukraine`})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`option`,{name:`Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Select time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(d,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`listbox`,{name:`Select time slots`}),i=n.getByTestId(B[0]),a=n.getByTestId(B[1]),o=n.getByTestId(B[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{T(r).toHaveAttribute(`aria-orientation`,`vertical`)}),await t(`Focus first chip`,async()=>{i.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(o).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(o).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(_,{gap:`12`,children:[(0,w.jsx)(g,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})}],K={render:function(e){return(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(g,{"aria-label":`Selected skills`,items:U})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(g,{"aria-label":`Selected days of the week`,items:W})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(g,{"aria-label":`Selected times of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected skills`})),i=E(n.getByRole(`listbox`,{name:`Selected days of the week`})),a=r.getByRole(`option`,{name:`Vocabulary`}),o=r.getByRole(`option`,{name:`Speaking`}),s=r.getByRole(`option`,{name:`Grammar`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chip`,async()=>{await O.tab(),T(c).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(o).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(s).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(a).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(s).toHaveFocus()})}},q=p.ul`
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-at08VF1d.js";import{n as o,t as s}from"./Heading-vZk25JM-.js";import{n as c,t as l}from"./Button-BUsGqnKd.js";import{r as u,t as d}from"./lib-8ue2PVWI.js";import{r as f,t as p}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as m,r as h,t as g}from"./MultiSelectChips-BzhRi2EC.js";import{n as ee,t as _}from"./LayoutFlex-Ca74XcC1.js";import{n as v,t as te}from"./Link-DLL8OonN.js";import{n as ne,t as y}from"./Tooltip-Bu-_YyPH.js";import{a as b,c as re,i as ie,n as ae,o as oe,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),h(),re(),oe(),ie(),ae(),ce(),u(),ee(),i(),v(),f(),o(),ne(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/MultiSelectChips`,component:g,subcomponents:{MultiSelectChipsItem:m},parameters:{layout:`padded`},args:{"aria-label":`Select skills`,defaultValue:[`vocabulary`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},beforeEach:()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)})}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(g,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Vocabulary`}),a=r.getByRole(`option`,{name:`Speaking`}),o=r.getByRole(`option`,{name:`Listening`}),s=r.getByRole(`option`,{name:`Reading`});await t(`Render chips with default value`,async()=>{T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to select it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`vocabulary`,`speaking`]),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Click on the chip to deselect it`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`]),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`true`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N([`vocabulary`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).toHaveAttribute(`aria-selected`,`true`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`true`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`option`,{name:`Speaking`}),a=r.getByRole(`option`,{name:`Vocabulary`});await t(`Disabled chip must have disabled attribute`,async()=>{T(i).toBeDisabled()}),await t(`Disabled chip must not be selectable`,async()=>{await O.click(i),T(n.onValueChange).not.toHaveBeenCalled(),T(a).toHaveAttribute(`aria-selected`,`true`)})}},I={args:{"aria-label":`Select availabilities`,defaultValue:[`morning`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Morning`})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Select languages to learn`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:/^English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Select countries`,defaultValue:[`ua`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`option`,{name:`Ukraine`})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`option`,{name:`Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Select time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(d,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`listbox`,{name:`Select time slots`}),i=n.getByTestId(B[0]),a=n.getByTestId(B[1]),o=n.getByTestId(B[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{T(r).toHaveAttribute(`aria-orientation`,`vertical`)}),await t(`Focus first chip`,async()=>{i.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(o).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(o).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(_,{gap:`12`,children:[(0,w.jsx)(g,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(b,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})}],K={render:function(e){return(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(g,{"aria-label":`Selected skills`,items:U})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(g,{"aria-label":`Selected days of the week`,items:W})]}),(0,w.jsxs)(_,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(g,{"aria-label":`Selected times of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected skills`})),i=E(n.getByRole(`listbox`,{name:`Selected days of the week`})),a=r.getByRole(`option`,{name:`Vocabulary`}),o=r.getByRole(`option`,{name:`Speaking`}),s=r.getByRole(`option`,{name:`Grammar`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chip`,async()=>{await O.tab(),T(c).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(o).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(s).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(a).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(s).toHaveFocus()})}},q=p.ul`
     all: unset;
     list-style: none;
     display: flex;

package/dist/assets/{NativeSelectField.stories-DmBdDAYW.js → NativeSelectField.stories-BNW09yKI.js}

@@ -1,10 +1,10 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./TokyoUIChevronDown-CS0lTt7n.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./Icon-BItN7xKl.js";import{n as f,t as p}from"./FormControl-B3jdXz5i.js";import{i as m,n as h,r as g,t as _}from"./InputContainer-xfDpQQNl.js";import{n as v,t as y}from"./TokyoUILanguage-DxmG-CNh.js";var b,x,S,C=t((()=>{b=e(n(),1),i(),o(),m(),h(),u(),x=a(),S=(0,b.forwardRef)(function({dataset:e,onChange:t,onValueChange:n,icon:i,children:a,placeholder:o,...c},l){let[u,f]=(0,b.useState)(!c.value&&!c.defaultValue),p=r(e),m=c.value===void 0?{defaultValue:c.defaultValue||``}:{value:c.value},h=e=>{t?.(e),n?.(e.target.value),f(!e.target.value)};return(0,x.jsx)(_,{icon:i,trailingIcon:(0,x.jsx)(d,{svg:s}),children:(0,x.jsxs)(`select`,{...p,...c,...m,onChange:h,ref:l,className:g.input,"data-empty":u,children:[typeof o==`string`&&(0,x.jsx)(`option`,{value:``,disabled:c.required,children:o}),a]})})});try{S.displayName=`NativeSelect`,S.__docgenInfo={description:`A component to render a select with optional icon.
-For internal use only.`,displayName:`NativeSelect`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},placeholder:{defaultValue:null,description:``,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}}}}}catch{}}));function w(e){return(0,E.jsx)(`option`,{...e,...r(void 0,{preplyDsComponent:c.SelectFieldOption})})}var T,E,D,O,k=t((()=>{T=e(n(),1),i(),l(),f(),C(),E=a(),D=(0,T.forwardRef)(function({id:e,label:t,description:n,error:r,required:i,inputDataset:a,dataset:o,hideLabel:s,onClick:l,children:u,hasError:d,useLegacyRequiredLabel:f,className:m,style:h,...g},_){return(0,E.jsx)(p,{id:e,label:t,description:n,error:r,hasError:d,required:i,dataset:o,hideLabel:s,onClick:l,useLegacyRequiredLabel:f,preplyDsComponent:c.SelectField,children:(0,E.jsx)(S,{...g,ref:_,dataset:a,children:u})})}),D.Option=w,O=D;try{w.displayName=`NativeSelectFieldOption`,w.__docgenInfo={description:``,displayName:`NativeSelectFieldOption`,props:{value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}try{O.displayName=`NativeSelectField`,O.__docgenInfo={description:``,displayName:`NativeSelectField`,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 explicitly 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> & MouseEventHandler<HTMLSelectElement>`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./TokyoUIChevronDown-CS0lTt7n.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./Icon-0niTGk4t.js";import{n as f,t as p}from"./FormControl-DG7egvWs.js";import{i as m,n as h,r as g,t as _}from"./InputContainer-xfDpQQNl.js";import{n as v,t as y}from"./TokyoUILanguage-DxmG-CNh.js";var b,x,S,C=t((()=>{b=e(n(),1),i(),o(),m(),h(),u(),x=a(),S=(0,b.forwardRef)(function({dataset:e,onChange:t,onValueChange:n,icon:i,children:a,placeholder:o,...c},l){let[u,f]=(0,b.useState)(!c.value&&!c.defaultValue),p=r(e),m=c.value===void 0?{defaultValue:c.defaultValue||``}:{value:c.value},h=e=>{t?.(e),n?.(e.target.value),f(!e.target.value)};return(0,x.jsx)(_,{icon:i,trailingIcon:(0,x.jsx)(d,{svg:s}),children:(0,x.jsxs)(`select`,{...p,...c,...m,onChange:h,ref:l,className:g.input,"data-empty":u,children:[typeof o==`string`&&(0,x.jsx)(`option`,{value:``,disabled:c.required,children:o}),a]})})});try{S.displayName=`NativeSelect`,S.__docgenInfo={description:`A component to render a select with optional icon.
+For internal use only.`,displayName:`NativeSelect`,props:{icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},placeholder:{defaultValue:null,description:``,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}}}}}catch{}}));function w(e){return(0,E.jsx)(`option`,{...e,...r(void 0,{preplyDsComponent:c.SelectFieldOption})})}var T,E,D,O,k=t((()=>{T=e(n(),1),i(),l(),f(),C(),E=a(),D=(0,T.forwardRef)(function({id:e,label:t,description:n,error:r,required:i,inputDataset:a,dataset:o,hideLabel:s,onClick:l,children:u,hasError:d,useLegacyRequiredLabel:f,className:m,style:h,...g},_){return(0,E.jsx)(p,{id:e,label:t,description:n,error:r,hasError:d,required:i,dataset:o,hideLabel:s,onClick:l,useLegacyRequiredLabel:f,preplyDsComponent:c.SelectField,children:(0,E.jsx)(S,{...g,ref:_,dataset:a,children:u})})}),D.Option=w,O=D;try{w.displayName=`NativeSelectFieldOption`,w.__docgenInfo={description:``,displayName:`NativeSelectFieldOption`,props:{value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}try{O.displayName=`NativeSelectField`,O.__docgenInfo={description:``,displayName:`NativeSelectField`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},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`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLSelectElement>`}]}},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`}]}},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`}]}},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`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
 When false, adds a "Optional" indicator next to the label for the optional fields instead.
-@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},placeholder:{defaultValue:null,description:``,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K;t((()=>{A=e(n(),1),v(),u(),k(),j=a(),{expect:M,userEvent:N,within:P,fn:F}=__STORYBOOK_MODULE_TEST__,I={title:`components/SelectField/NativeSelectField (deprecated)`,component:O,subcomponents:{NativeSelectFieldOption:O.Option},args:{name:`language`,label:`Language`,placeholder:`Select a language`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:F(),onValueChange:F(),onBlur:F(),onFocus:F(),onClick:F(),onCopy:F(),onKeyDown:F(),onKeyUp:F(),onPaste:F(),children:(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})}},L={play:async({canvasElement:e,step:t,args:n})=>{let r=P(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{M(P(i).getByTestId(`label`)).toHaveTextContent(`Language • Optional`),M(a).toHaveAccessibleName(`Language`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),M(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await N.selectOptions(a,`spanish`),M(n.onValueChange).toHaveBeenCalledWith(`spanish`),M(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await N.keyboard(`{tab}`),M(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{M(i).toHaveAttribute(`data-testid`,`field`),M(i).toHaveAttribute(`data-foo`,`bar`),M(a).toHaveAttribute(`data-testid`,`input`),M(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should render all options`,async()=>{let e=r.getByRole(`option`,{name:`English`}),t=r.getByRole(`option`,{name:`Spanish`}),n=r.getByRole(`option`,{name:`French`});M(e).toBeInTheDocument(),M(t).toBeInTheDocument(),M(n).toBeInTheDocument()})}},R={render:function(e){let[t,n]=(0,A.useState)(e.value);return(0,j.jsxs)(O,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)},children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})},args:{label:`Controlled SelectField`,placeholder:`Select a language...`,value:`spanish`},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await M(e.getByTestId(`input`)).toHaveValue(`spanish`)}),await t(`it should update the value when the user selects`,async()=>{let t=e.getByTestId(`input`);await N.selectOptions(t,`french`),M(t).toHaveValue(`french`)})}},z={args:{icon:(0,j.jsx)(d,{svg:y,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{M(e.getByTestId(`icon`)).toBeInTheDocument()})}},B={args:{description:`We will use this to get a personalized choice of tutors`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{M(n).toHaveAccessibleDescription(`We will use this to get a personalized choice of tutors`),M(r).toHaveTextContent(`We will use this to get a personalized choice of tutors`)})}},V={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{M(n).toHaveAccessibleName(`Language`),M(r).toHaveTextContent(`Language`)}),await t(`it should render required attribute`,async()=>{M(n).toHaveAttribute(`required`)})}},H={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{M(e.getByTestId(`input`)).toHaveAccessibleName(`Language`)})}},U={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{M(n).toHaveAccessibleErrorMessage(`This is an error message`),M(r).toHaveTextContent(`This is an error message`)})}},W={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{M(n).toHaveAttribute(`disabled`)})}},G={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Language`,placeholder:`Select a subject`,description:`We will use this to get a personalized choice of tutors`,children:(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,j.jsx)(d,{svg:y,label:`Student with a hat`})},control:`select`},children:{control:!1},hasError:{table:{disable:!0}}}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},placeholder:{defaultValue:null,description:``,name:`placeholder`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}})),A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K;t((()=>{A=e(n(),1),v(),u(),k(),j=a(),{expect:M,userEvent:N,within:P,fn:F}=__STORYBOOK_MODULE_TEST__,I={title:`components/SelectField/NativeSelectField (deprecated)`,component:O,subcomponents:{NativeSelectFieldOption:O.Option},args:{name:`language`,label:`Language`,placeholder:`Select a language`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:F(),onValueChange:F(),onBlur:F(),onFocus:F(),onClick:F(),onCopy:F(),onKeyDown:F(),onKeyUp:F(),onPaste:F(),children:(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})}},L={play:async({canvasElement:e,step:t,args:n})=>{let r=P(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{M(P(i).getByTestId(`label`)).toHaveTextContent(`Language • Optional`),M(a).toHaveAccessibleName(`Language`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),M(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await N.selectOptions(a,`spanish`),M(n.onValueChange).toHaveBeenCalledWith(`spanish`),M(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await N.keyboard(`{tab}`),M(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{M(i).toHaveAttribute(`data-testid`,`field`),M(i).toHaveAttribute(`data-foo`,`bar`),M(a).toHaveAttribute(`data-testid`,`input`),M(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should render all options`,async()=>{let e=r.getByRole(`option`,{name:`English`}),t=r.getByRole(`option`,{name:`Spanish`}),n=r.getByRole(`option`,{name:`French`});M(e).toBeInTheDocument(),M(t).toBeInTheDocument(),M(n).toBeInTheDocument()})}},R={render:function(e){let[t,n]=(0,A.useState)(e.value);return(0,j.jsxs)(O,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)},children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})},args:{label:`Controlled SelectField`,placeholder:`Select a language...`,value:`spanish`},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await M(e.getByTestId(`input`)).toHaveValue(`spanish`)}),await t(`it should update the value when the user selects`,async()=>{let t=e.getByTestId(`input`);await N.selectOptions(t,`french`),M(t).toHaveValue(`french`)})}},z={args:{icon:(0,j.jsx)(d,{svg:y,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{M(e.getByTestId(`icon`)).toBeInTheDocument()})}},B={args:{description:`We will use this to get a personalized choice of tutors`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{M(n).toHaveAccessibleDescription(`We will use this to get a personalized choice of tutors`),M(r).toHaveTextContent(`We will use this to get a personalized choice of tutors`)})}},V={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{M(n).toHaveAccessibleName(`Language`),M(r).toHaveTextContent(`Language`)}),await t(`it should render required attribute`,async()=>{M(n).toHaveAttribute(`required`)})}},H={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{M(e.getByTestId(`input`)).toHaveAccessibleName(`Language`)})}},U={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{M(n).toHaveAccessibleErrorMessage(`This is an error message`),M(r).toHaveTextContent(`This is an error message`)})}},W={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{M(n).toHaveAttribute(`disabled`)})}},G={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Language`,placeholder:`Select a subject`,description:`We will use this to get a personalized choice of tutors`,children:(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(O.Option,{value:`english`,children:`English`}),(0,j.jsx)(O.Option,{value:`spanish`,children:`Spanish`}),(0,j.jsx)(O.Option,{value:`french`,children:`French`})]})},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,j.jsx)(d,{svg:y,label:`Student with a hat`})},control:`select`},children:{control:!1},hasError:{table:{disable:!0}}}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,

package/dist/assets/NumberField-BME7mYxn.js

@@ -0,0 +1,6 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./dist-Cc1j9Pjk.js";import{n as o,t as s}from"./FormControl-DG7egvWs.js";import{r as c,t as l}from"./Input-D5QJivuW.js";var u,d,f,p=t((()=>{u=e(n(),1),o(),l(),a(),d=r(),f=(0,u.forwardRef)(function({id:e,label:t,description:n,error:r,required:a,inputDataset:o,dataset:l,hideLabel:u,onClick:f,onValueChange:p,onChange:m,hasError:h,useLegacyRequiredLabel:g,className:_,style:v,...y},b){let x=e=>{m?.(e);let t=e.target.value;p?.(t?Number(t):void 0)};return(0,d.jsx)(s,{id:e,label:t,description:n,error:r,hasError:h,required:a,dataset:l,hideLabel:u,onClick:f,useLegacyRequiredLabel:g,preplyDsComponent:i.NumberField,children:(0,d.jsx)(c,{...y,type:`number`,ref:b,dataset:o,onChange:x})})});try{f.displayName=`NumberField`,f.__docgenInfo={description:``,displayName:`NumberField`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},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`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>`}]}},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`}]}},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`}]}},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`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+When false, adds a "Optional" indicator next to the label for the optional fields instead.
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},button:{defaultValue:null,description:``,name:`button`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: number | undefined) => void`}]}},min:{defaultValue:null,description:``,name:`min`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},max:{defaultValue:null,description:``,name:`max`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},step:{defaultValue:null,description:``,name:`step`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{p as n,f as t};

package/dist/assets/{NumberField.stories-oR8Gegez.js → NumberField.stories-rBipFrXc.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-BItN7xKl.js";import{n as o,t as s}from"./FieldButton-SkKd22gq.js";import{n as c,t as l}from"./NumberField-DW7lG9mg.js";import{n as u,t as d}from"./TokyoUIPhone-DgmsXXbh.js";import{n as f,t as p}from"./TokyoUIAttach-jKVaxnL7.js";var m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M;t((()=>{m=e(n(),1),u(),f(),i(),c(),o(),h=r(),{action:g}=__STORYBOOK_MODULE_ACTIONS__,{expect:_,userEvent:v,within:y,fn:b}=__STORYBOOK_MODULE_TEST__,x={title:`components/NumberField`,component:l,args:{name:`number`,label:`Number`,defaultValue:void 0,placeholder:`Enter a number`,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:b(),onValueChange:b(),onBlur:b(),onFocus:b(),onClick:b(),onCopy:b(),onKeyDown:b(),onKeyUp:b(),onPaste:b()}},S={play:async({canvasElement:e,step:t,args:n})=>{let r=y(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{_(y(i).getByTestId(`label`)).toHaveTextContent(`Number • Optional`),_(a).toHaveAccessibleName(`Number`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),_(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await v.type(a,`42`),_(n.onValueChange).toHaveBeenCalledWith(42),_(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await v.keyboard(`{tab}`),_(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{_(i).toHaveAttribute(`data-testid`,`field`),_(i).toHaveAttribute(`data-foo`,`bar`),_(a).toHaveAttribute(`data-testid`,`input`),_(a).toHaveAttribute(`data-foo`,`bar`)})}},C={render:function(e){let[t,n]=(0,m.useState)(e.value);return(0,h.jsx)(l,{...e,value:t,onChange:t=>{n(Number(t.target.value)),e.onChange?.(t)}})},args:{label:`Controlled NumberField`,placeholder:`Enter a number...`,value:42},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await _(e.getByTestId(`input`)).toHaveValue(42)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await v.clear(t),await v.type(t,`100`),_(t).toHaveValue(100)})}},w={args:{icon:(0,h.jsx)(a,{svg:d,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{_(e.getByTestId(`icon`)).toBeInTheDocument()})}},T={args:{description:`Enter a valid number`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{_(n).toHaveAccessibleDescription(`Enter a valid number`),_(r).toHaveTextContent(`Enter a valid number`)})}},E={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{_(n).toHaveAccessibleName(`Number`),_(r).toHaveTextContent(`Number`)}),await t(`it should render required attribute`,async()=>{_(n).toHaveAttribute(`required`)})}},D={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{_(e.getByTestId(`input`)).toHaveAccessibleName(`Number`)})}},O={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{_(n).toHaveAccessibleErrorMessage(`This is an error message`),_(r).toHaveTextContent(`This is an error message`)})}},k={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{_(n).toHaveAttribute(`disabled`)})}},A={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{_(n).toHaveAttribute(`readonly`)})}},j={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Number of lessons`,placeholder:`How about 3?`,description:`These lessons will be scheduled automatically`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`number`},defaultValue:{control:`number`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},readOnly:{control:`boolean`},min:{control:`number`},max:{control:`number`},step:{control:`number`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,h.jsx)(a,{svg:d})},control:`select`},button:{options:[`None`,`With Button`],mapping:{None:void 0,"With Button":(0,h.jsx)(s,{svg:p,assistiveText:`Do the thing`,onClick:g(`field button clicked`)})},control:`select`},maxLength:{control:`number`},hasError:{table:{disable:!0}}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-0niTGk4t.js";import{n as o,t as s}from"./FieldButton-SkKd22gq.js";import{n as c,t as l}from"./NumberField-BME7mYxn.js";import{n as u,t as d}from"./TokyoUIPhone-DgmsXXbh.js";import{n as f,t as p}from"./TokyoUIAttach-jKVaxnL7.js";var m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k,A,j,M;t((()=>{m=e(n(),1),u(),f(),i(),c(),o(),h=r(),{action:g}=__STORYBOOK_MODULE_ACTIONS__,{expect:_,userEvent:v,within:y,fn:b}=__STORYBOOK_MODULE_TEST__,x={title:`components/NumberField`,component:l,args:{name:`number`,label:`Number`,defaultValue:void 0,placeholder:`Enter a number`,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:b(),onValueChange:b(),onBlur:b(),onFocus:b(),onClick:b(),onCopy:b(),onKeyDown:b(),onKeyUp:b(),onPaste:b()}},S={play:async({canvasElement:e,step:t,args:n})=>{let r=y(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{_(y(i).getByTestId(`label`)).toHaveTextContent(`Number • Optional`),_(a).toHaveAccessibleName(`Number`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),_(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await v.type(a,`42`),_(n.onValueChange).toHaveBeenCalledWith(42),_(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await v.keyboard(`{tab}`),_(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{_(i).toHaveAttribute(`data-testid`,`field`),_(i).toHaveAttribute(`data-foo`,`bar`),_(a).toHaveAttribute(`data-testid`,`input`),_(a).toHaveAttribute(`data-foo`,`bar`)})}},C={render:function(e){let[t,n]=(0,m.useState)(e.value);return(0,h.jsx)(l,{...e,value:t,onChange:t=>{n(Number(t.target.value)),e.onChange?.(t)}})},args:{label:`Controlled NumberField`,placeholder:`Enter a number...`,value:42},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await _(e.getByTestId(`input`)).toHaveValue(42)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await v.clear(t),await v.type(t,`100`),_(t).toHaveValue(100)})}},w={args:{icon:(0,h.jsx)(a,{svg:d,dataset:{testid:`icon`}})},play:async({canvas:e,step:t})=>{await t(`it should render the icon`,async()=>{_(e.getByTestId(`icon`)).toBeInTheDocument()})}},T={args:{description:`Enter a valid number`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{_(n).toHaveAccessibleDescription(`Enter a valid number`),_(r).toHaveTextContent(`Enter a valid number`)})}},E={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{_(n).toHaveAccessibleName(`Number`),_(r).toHaveTextContent(`Number`)}),await t(`it should render required attribute`,async()=>{_(n).toHaveAttribute(`required`)})}},D={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{_(e.getByTestId(`input`)).toHaveAccessibleName(`Number`)})}},O={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{_(n).toHaveAccessibleErrorMessage(`This is an error message`),_(r).toHaveTextContent(`This is an error message`)})}},k={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{_(n).toHaveAttribute(`disabled`)})}},A={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{_(n).toHaveAttribute(`readonly`)})}},j={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Number of lessons`,placeholder:`How about 3?`,description:`These lessons will be scheduled automatically`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`number`},defaultValue:{control:`number`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},readOnly:{control:`boolean`},min:{control:`number`},max:{control:`number`},step:{control:`number`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,h.jsx)(a,{svg:d})},control:`select`},button:{options:[`None`,`With Button`],mapping:{None:void 0,"With Button":(0,h.jsx)(s,{svg:p,assistiveText:`Do the thing`,onClick:g(`field button clicked`)})},control:`select`},maxLength:{control:`number`},hasError:{table:{disable:!0}}}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,

package/dist/assets/{ObserveIntersection-Jf71_G5v.js → ObserveIntersection-B1ciJ546.js}

@@ -5,4 +5,4 @@ Triggers a callback when the wrapped component intersects with the viewport.
 This can be useful in several use cases. Examples:
 
 - Track an experiment, once a certain component scrolls into view.
-- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:`ObserveIntersection`,props:{onIntersect:{defaultValue:null,description:``,name:`onIntersect`,required:!0,type:{name:`() => void`}},once:{defaultValue:null,description:``,name:`once`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},threshold:{defaultValue:null,description:``,name:`threshold`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"td"`},{value:`"li"`},{value:`"th"`},{value:`"tr"`},{value:`"article"`},{value:`"figure"`},{value:`"main"`},{value:`"table"`},{value:`"div"`},{value:`"caption"`},{value:`"fieldset"`},{value:`"figcaption"`},{value:`"footer"`},{value:`"header"`},{value:`"ol"`},{value:`"p"`},{value:`"section"`},{value:`"span"`},{value:`"tbody"`},{value:`"tfoot"`},{value:`"thead"`},{value:`"ul"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{f as n,d as t};
+- Trigger an animation, or a feature (e.g.: onboarding instructions).`,displayName:`ObserveIntersection`,props:{onIntersect:{defaultValue:null,description:``,name:`onIntersect`,required:!0,type:{name:`() => void`}},once:{defaultValue:null,description:``,name:`once`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},threshold:{defaultValue:null,description:``,name:`threshold`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"td"`},{value:`"li"`},{value:`"th"`},{value:`"tr"`},{value:`"article"`},{value:`"figure"`},{value:`"main"`},{value:`"table"`},{value:`"div"`},{value:`"header"`},{value:`"footer"`},{value:`"section"`},{value:`"ul"`},{value:`"ol"`},{value:`"p"`},{value:`"span"`},{value:`"fieldset"`},{value:`"thead"`},{value:`"tfoot"`},{value:`"tbody"`},{value:`"caption"`},{value:`"figcaption"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{f as n,d as t};

package/dist/assets/{ObserveIntersection.stories-C3o8aTAg.js → ObserveIntersection.stories-CfdIzzpg.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./ObserveIntersection-Jf71_G5v.js";var o,s,c,l,u;t((()=>{o=e(n(),1),i(),s=r(),c={title:`components/ObserveIntersection`,component:a,parameters:{tags:[`!test`],chromatic:{disableSnapshot:!0}}},l=()=>{let[e,t]=(0,o.useState)(!1);return(0,s.jsxs)(`div`,{tabIndex:0,style:{height:`200px`,overflowY:`scroll`,position:`relative`},children:[(0,s.jsx)(`div`,{style:{position:`sticky`,top:`2px`},children:e?`Intersected`:`Scroll down to intersect`}),(0,s.jsx)(`div`,{style:{height:`400px`,display:`flex`,alignItems:`end`},children:(0,s.jsx)(a,{onIntersect:()=>t(!0),children:`Observer`})})]})},l.storyName=`ObserveIntersection`,l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`() => {
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./ObserveIntersection-B1ciJ546.js";var o,s,c,l,u;t((()=>{o=e(n(),1),i(),s=r(),c={title:`components/ObserveIntersection`,component:a,parameters:{tags:[`!test`],chromatic:{disableSnapshot:!0}}},l=()=>{let[e,t]=(0,o.useState)(!1);return(0,s.jsxs)(`div`,{tabIndex:0,style:{height:`200px`,overflowY:`scroll`,position:`relative`},children:[(0,s.jsx)(`div`,{style:{position:`sticky`,top:`2px`},children:e?`Intersected`:`Scroll down to intersect`}),(0,s.jsx)(`div`,{style:{height:`400px`,display:`flex`,alignItems:`end`},children:(0,s.jsx)(a,{onIntersect:()=>t(!0),children:`Observer`})})]})},l.storyName=`ObserveIntersection`,l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`() => {
   const [isIntersecting, setIsIntersecting] = useState(false);
   return (
     // eslint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- This element is interactive; it's scrollable.

package/dist/assets/{OnboardingTooltip-ANaVB8Qh.js → OnboardingTooltip-IddlUs6s.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{B as o,H as s,St as c,U as l,V as u,W as d,_ as f,g as p,m,z as h}from"./iframe-Czcvpvgg.js";import{n as g,t as _}from"./dist-Cc1j9Pjk.js";import{n as v,t as y}from"./Icon-BItN7xKl.js";import{n as b,t as x}from"./Text-BiCO96_r.js";import{n as S,t as C}from"./Heading-DX-HCDkx.js";import{n as w,t as T}from"./Button-_0pS2khJ.js";import{n as E,t as D}from"./TokyoUIClose-BsMsQk2w.js";import{i as O,o as k,r as A}from"./lib-8ue2PVWI.js";import{n as j,t as M}from"./shared-strings-BFfhcoGp.js";var N,P,F,I,L,R,z,B,V=t((()=>{N=`content__KHgp9`,P=`appear__G8agi`,F=`disappear__OWVSJ`,I=`header__CaLti`,L=`close__3s-VD`,R=`footer__X5qXF`,z=`arrow__0pg-s`,B={content:N,appear:P,disappear:F,header:I,close:L,footer:R,arrow:z}})),H,U,W,G,K,q=t((()=>{H=e(n(),1),f(),E(),V(),m(),v(),b(),w(),S(),i(),_(),A(),j(),U=a(),W=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:`auto`,block:`nearest`,inline:`nearest`})},G=(0,H.forwardRef)(function({open:e,onOpenChange:t,disabled:n,title:i,text:a,children:f,side:m,dataset:_,actionLabel:v=(0,U.jsx)(O,{id:`preply-ds.onboardingTooltip.actionLabel`,defaultMessage:`Got it`,description:`Default onboarding tooltip action label. Used to acknowledge and close the tooltip.`}),actionOnClick:b,actionHref:S,counter:w,autoScroll:E=!0,...A},j){let{formatMessage:N}=k(),P=p(),F=(0,H.useId)(),I=(0,H.useId)(),L=(0,H.useId)(),R=(0,H.useRef)(null);return(0,H.useEffect)(()=>{e&&R.current&&E&&W(R.current)},[E,e]),n?f:(0,U.jsxs)(d,{open:e,onOpenChange:t,children:[(0,U.jsx)(c,{ref:j,...A,children:(0,U.jsx)(h,{ref:R,id:L,asChild:!0,children:f})}),(0,U.jsx)(l,{container:P,children:(0,U.jsxs)(s,{onInteractOutside:e=>{e.preventDefault()},side:m,className:B.content,"aria-labelledby":F,"aria-describedby":`${L} ${I}`,...r(_,{preplyDsComponent:g.OnboardingTooltip}),children:[(0,U.jsxs)(`div`,{className:B.header,children:[(0,U.jsx)(u,{className:B.close,"aria-label":N(M.close),"data-testid":`close`,children:(0,U.jsx)(y,{accent:`inverted`,svg:D})}),(0,U.jsx)(C,{tag:`h1`,variant:`small`,accent:`inverted`,id:F,"aria-describedby":L,children:i})]}),(0,U.jsx)(x,{variant:`default-regular`,accent:`inverted`,className:B.text,children:a}),(0,U.jsxs)(`div`,{className:B.footer,children:[w,(0,U.jsx)(T,{variant:`inverted`,size:`small`,onClick:b,href:S,dataset:{testid:`action`},wrap:!0,children:v})]}),(0,U.jsx)(o,{"aria-hidden":!0,className:B.arrow,width:18,height:11})]})})]})}),K=(0,H.forwardRef)(function(e,t){let[n,r]=(0,H.useState)(!0),i=t=>{t||e.onClose?.(),r(t)},a=()=>{e.actionOnClick?.(),r(!1),e.onClose?.()};return(0,U.jsx)(G,{...e,open:n,onOpenChange:i,actionOnClick:a,ref:t})});try{G.displayName=`InternalOnboardingTooltip`,G.__docgenInfo={description:``,displayName:`InternalOnboardingTooltip`,props:{title:{defaultValue:null,description:``,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`}]}},text:{defaultValue:null,description:``,name:`text`,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`}]}},disabled:{defaultValue:null,description:`Disables tooltip completely`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onClose:{defaultValue:null,description:`Called when the tooltip is closed`,name:`onClose`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},actionLabel:{defaultValue:{value:`(
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{B as o,H as s,St as c,U as l,V as u,W as d,_ as f,g as p,m,z as h}from"./iframe-dOU5q7Ak.js";import{n as g,t as _}from"./dist-Cc1j9Pjk.js";import{n as v,t as y}from"./Icon-0niTGk4t.js";import{n as b,t as x}from"./Text-at08VF1d.js";import{n as S,t as C}from"./Heading-vZk25JM-.js";import{n as w,t as T}from"./Button-BUsGqnKd.js";import{n as E,t as D}from"./TokyoUIClose-BsMsQk2w.js";import{i as O,o as k,r as A}from"./lib-8ue2PVWI.js";import{n as j,t as M}from"./shared-strings-BFfhcoGp.js";var N,P,F,I,L,R,z,B,V=t((()=>{N=`content__KHgp9`,P=`appear__G8agi`,F=`disappear__OWVSJ`,I=`header__CaLti`,L=`close__3s-VD`,R=`footer__X5qXF`,z=`arrow__0pg-s`,B={content:N,appear:P,disappear:F,header:I,close:L,footer:R,arrow:z}})),H,U,W,G,K,q=t((()=>{H=e(n(),1),f(),E(),V(),m(),v(),b(),w(),S(),i(),_(),A(),j(),U=a(),W=e=>{e.scrollIntoViewIfNeeded?e.scrollIntoViewIfNeeded(!1):e.scrollIntoView({behavior:`auto`,block:`nearest`,inline:`nearest`})},G=(0,H.forwardRef)(function({open:e,onOpenChange:t,disabled:n,title:i,text:a,children:f,side:m,dataset:_,actionLabel:v=(0,U.jsx)(O,{id:`preply-ds.onboardingTooltip.actionLabel`,defaultMessage:`Got it`,description:`Default onboarding tooltip action label. Used to acknowledge and close the tooltip.`}),actionOnClick:b,actionHref:S,counter:w,autoScroll:E=!0,...A},j){let{formatMessage:N}=k(),P=p(),F=(0,H.useId)(),I=(0,H.useId)(),L=(0,H.useId)(),R=(0,H.useRef)(null);return(0,H.useEffect)(()=>{e&&R.current&&E&&W(R.current)},[E,e]),n?f:(0,U.jsxs)(d,{open:e,onOpenChange:t,children:[(0,U.jsx)(c,{ref:j,...A,children:(0,U.jsx)(h,{ref:R,id:L,asChild:!0,children:f})}),(0,U.jsx)(l,{container:P,children:(0,U.jsxs)(s,{onInteractOutside:e=>{e.preventDefault()},side:m,className:B.content,"aria-labelledby":F,"aria-describedby":`${L} ${I}`,...r(_,{preplyDsComponent:g.OnboardingTooltip}),children:[(0,U.jsxs)(`div`,{className:B.header,children:[(0,U.jsx)(u,{className:B.close,"aria-label":N(M.close),"data-testid":`close`,children:(0,U.jsx)(y,{accent:`inverted`,svg:D})}),(0,U.jsx)(C,{tag:`h1`,variant:`small`,accent:`inverted`,id:F,"aria-describedby":L,children:i})]}),(0,U.jsx)(x,{variant:`default-regular`,accent:`inverted`,className:B.text,children:a}),(0,U.jsxs)(`div`,{className:B.footer,children:[w,(0,U.jsx)(T,{variant:`inverted`,size:`small`,onClick:b,href:S,dataset:{testid:`action`},wrap:!0,children:v})]}),(0,U.jsx)(o,{"aria-hidden":!0,className:B.arrow,width:18,height:11})]})})]})}),K=(0,H.forwardRef)(function(e,t){let[n,r]=(0,H.useState)(!0),i=t=>{t||e.onClose?.(),r(t)},a=()=>{e.actionOnClick?.(),r(!1),e.onClose?.()};return(0,U.jsx)(G,{...e,open:n,onOpenChange:i,actionOnClick:a,ref:t})});try{G.displayName=`InternalOnboardingTooltip`,G.__docgenInfo={description:``,displayName:`InternalOnboardingTooltip`,props:{title:{defaultValue:null,description:``,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`}]}},text:{defaultValue:null,description:``,name:`text`,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`}]}},disabled:{defaultValue:null,description:`Disables tooltip completely`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onClose:{defaultValue:null,description:`Called when the tooltip is closed`,name:`onClose`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},actionLabel:{defaultValue:{value:`(
             <FormattedMessage
                 id="preply-ds.onboardingTooltip.actionLabel"
                 defaultMessage="Got it"

package/dist/assets/{OnboardingTooltip.stories-B2P2loQ_.js → OnboardingTooltip.stories-DyL-qxZr.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a}from"./OnboardingTooltip-ANaVB8Qh.js";import{n as o,t as s}from"./IconButton-sZZtNos_.js";import{n as c,t as l}from"./TokyoUIFav-B1g1wYYK.js";var u,d,f,p,m,h,g,_,v;t((()=>{u=e(n(),1),a(),o(),c(),d=r(),f={title:`Components/OnboardingTooltip`,component:i,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs).
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,r as a}from"./OnboardingTooltip-IddlUs6s.js";import{n as o,t as s}from"./IconButton-69CfWgKz.js";import{n as c,t as l}from"./TokyoUIFav-B1g1wYYK.js";var u,d,f,p,m,h,g,_,v;t((()=>{u=e(n(),1),a(),o(),c(),d=r(),f={title:`Components/OnboardingTooltip`,component:i,parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a step-by-step tour? Check out [OnboardingTour](/docs/components-onboardingtour--docs).
 
 Also see [Composing Popovers](/docs/guides-composing-popovers--docs) for usage with other popovers.`}}},decorators:[e=>(0,d.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})]},p=e=>[!1,!1],m=e=>e=>{},h=()=>{let[e,t]=p(`new-feature`),n=m(`new-feature`);return(0,d.jsx)(i,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,disabled:t||e,onClose:()=>n(!0),children:(0,d.jsx)(s,{variant:`ghost`,svg:(0,d.jsx)(l,{}),assistiveText:`Favorite`})})},h.storyName=`OnboardingTooltip`,g={parameters:{chromatic:{disableSnapshot:!0},docs:{source:{type:`dynamic`}}},render:()=>(0,d.jsx)(i,{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,children:(0,d.jsx)((0,u.forwardRef)(function(e,t){return(0,d.jsx)(`button`,{...e,ref:t})}),{children:`Custom child`})})},_={tags:[`!autodocs`],args:{title:`New Feature Available!`,text:`We've added an exciting new feature to enhance your experience.`,disabled:!1,onClose:()=>{},children:(0,d.jsx)(s,{variant:`ghost`,svg:(0,d.jsx)(l,{}),assistiveText:`Favorite`})},argTypes:{title:{control:`text`},text:{control:`text`},actionLabel:{control:`text`},actionOnClick:{control:!1},actionHref:{control:`text`},disabled:{control:`boolean`},dataset:{control:`object`},onClose:{control:!1},children:{control:!1}},parameters:{docs:{story:{height:450}},chromatic:{disableSnapshot:!0}},decorators:[e=>(0,d.jsx)(`div`,{style:{minHeight:`100vh`,display:`flex`},children:(0,d.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})})]},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`() => {
   const [wasTooltipSeen, loading] = useIsFeatureActive('new-feature');

package/dist/assets/{OnboardingTooltip.tests.stories-zXUt0NJE.js → OnboardingTooltip.tests.stories-Bo02UP2_.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-_0pS2khJ.js";import{n as o,r as s}from"./OnboardingTooltip-ANaVB8Qh.js";import{n as c,t as l}from"./IconButton-sZZtNos_.js";import{n as u,t as d}from"./LayoutFlex-CEOcocT6.js";import{n as f,t as p}from"./TokyoUIFav-B1g1wYYK.js";function m(e){return new Promise(t=>setTimeout(t,e))}var h,g,_,v,y,b,x,S,C,w;t((()=>{e(n(),1),s(),c(),f(),i(),u(),h=r(),{within:g,userEvent:_,waitFor:v,expect:y}=__STORYBOOK_MODULE_TEST__,b={title:`Components/OnboardingTooltip/Tests`,component:o,parameters:{layout:`centered`,controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`],decorators:[e=>(0,h.jsx)(`div`,{style:{margin:`100px 0`},children:e()})],args:{title:`Title`,text:`Body text`,actionLabel:`Action label`,disabled:!1,onClose:()=>{},dataset:{testid:`tooltip`},children:(0,h.jsx)(l,{svg:(0,h.jsx)(p,{}),assistiveText:`Favorite`})}},x={play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`close the tooltip`,()=>{let e=g(n.getByTestId(`tooltip`)).getByTestId(`close`);return _.click(e)}),await t(`wait for tooltip to be hidden`,async()=>{await v(()=>y(n.queryByTestId(`tooltip`)).toBeNull())})}},S={play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`close the tooltip`,()=>{let e=g(n.getByTestId(`tooltip`)).getByTestId(`action`);return _.click(e)}),await t(`wait for tooltip to be hidden`,async()=>{await v(()=>y(n.queryByTestId(`tooltip`)).toBeNull())})}},C={render:e=>(0,h.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,h.jsx)(a,{children:`Click outside the tooltip`}),(0,h.jsx)(o,{...e,children:(0,h.jsx)(l,{svg:(0,h.jsx)(p,{}),assistiveText:`Favorite`})})]}),play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`click outside the tooltip`,()=>{let e=n.getByText(`Click outside the tooltip`);return _.click(e)}),await t(`check the tooltip remain open`,async()=>{await m(1e3),await y(n.getByTestId(`tooltip`)).toBeVisible()})}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Button-BUsGqnKd.js";import{n as o,r as s}from"./OnboardingTooltip-IddlUs6s.js";import{n as c,t as l}from"./IconButton-69CfWgKz.js";import{n as u,t as d}from"./LayoutFlex-Ca74XcC1.js";import{n as f,t as p}from"./TokyoUIFav-B1g1wYYK.js";function m(e){return new Promise(t=>setTimeout(t,e))}var h,g,_,v,y,b,x,S,C,w;t((()=>{e(n(),1),s(),c(),f(),i(),u(),h=r(),{within:g,userEvent:_,waitFor:v,expect:y}=__STORYBOOK_MODULE_TEST__,b={title:`Components/OnboardingTooltip/Tests`,component:o,parameters:{layout:`centered`,controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`],decorators:[e=>(0,h.jsx)(`div`,{style:{margin:`100px 0`},children:e()})],args:{title:`Title`,text:`Body text`,actionLabel:`Action label`,disabled:!1,onClose:()=>{},dataset:{testid:`tooltip`},children:(0,h.jsx)(l,{svg:(0,h.jsx)(p,{}),assistiveText:`Favorite`})}},x={play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`close the tooltip`,()=>{let e=g(n.getByTestId(`tooltip`)).getByTestId(`close`);return _.click(e)}),await t(`wait for tooltip to be hidden`,async()=>{await v(()=>y(n.queryByTestId(`tooltip`)).toBeNull())})}},S={play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`close the tooltip`,()=>{let e=g(n.getByTestId(`tooltip`)).getByTestId(`action`);return _.click(e)}),await t(`wait for tooltip to be hidden`,async()=>{await v(()=>y(n.queryByTestId(`tooltip`)).toBeNull())})}},C={render:e=>(0,h.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,h.jsx)(a,{children:`Click outside the tooltip`}),(0,h.jsx)(o,{...e,children:(0,h.jsx)(l,{svg:(0,h.jsx)(p,{}),assistiveText:`Favorite`})})]}),play:async({canvasElement:e,step:t})=>{let n=g(e);await t(`wait for tooltip to be visible`,async()=>{await v(()=>y(n.getByTestId(`tooltip`)).toBeVisible())}),await t(`click outside the tooltip`,()=>{let e=n.getByText(`Click outside the tooltip`);return _.click(e)}),await t(`check the tooltip remain open`,async()=>{await m(1e3),await y(n.getByTestId(`tooltip`)).toBeVisible()})}},x.parameters={...x.parameters,docs:{...x.parameters?.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step

package/dist/assets/{OnboardingTour-ChdI2m_S.js → OnboardingTour-DXTaYFSg.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{r as i,t as a}from"./OnboardingTooltip-ANaVB8Qh.js";import{i as o,r as s}from"./lib-8ue2PVWI.js";var c,l,u=t((()=>{c=`counter__ArBS-`,l={counter:c}})),d,f,p,m,h,g=t((()=>{d=e(n(),1),i(),u(),s(),f=r(),p=({totalSteps:e,nextActionLabel:t=(0,f.jsx)(o,{id:`preply-ds.onboardingTour.nextActionLabel`,defaultMessage:`Next`,description:`Onboarding tour next action label`}),completeActionLabel:n=(0,f.jsx)(o,{id:`preply-ds.onboardingTour.completeActionLabel`,defaultMessage:`Got it`,description:`Onboarding tour complete action label`}),onClose:r,onComplete:i,onStepChange:a,disabled:s,children:c,ctx:l})=>{let[u,p]=(0,d.useState)(!0),[m,h]=(0,d.useState)(0),g={totalSteps:e,nextActionLabel:t,completeActionLabel:n,onClose:()=>{p(!1),r?.()},active:!s&&u,currentStep:m,onActionClick:()=>{if(m===e-1)i?.(),p(!1);else{let e=m+1;h(e),a?.(e)}}};return(0,f.jsx)(l.Provider,{value:g,children:c})},m=(0,d.forwardRef)(function({ctx:e,...t},n){let r=(0,d.useContext)(e);if(!r)throw Error(`OnboardingTourContext not found`);let{currentStep:i,totalSteps:s,onActionClick:c,onClose:u,active:p,nextActionLabel:m,completeActionLabel:h}=r,g=t.step===s-1,_=t.step===i,v=g?h:m,y=()=>{t.actionOnClick?.(),c()},b=e=>{e||u?.()};return(0,f.jsx)(a,{...t,counter:(0,f.jsx)(`p`,{className:l.counter,children:(0,f.jsx)(o,{id:`preply-ds.onboardingTour.counter`,defaultMessage:`{currentStep} of {totalSteps}`,description:`Onboarding tour step counter, e.g. '1 of 3'`,values:{currentStep:i+1,totalSteps:s}})}),open:p&&_,onOpenChange:b,actionLabel:v,actionOnClick:y,ref:n})}),h=()=>{let e=(0,d.createContext)(null);return{Provider:t=>(0,f.jsx)(p,{...t,ctx:e}),Step:(0,d.forwardRef)(function(t,n){return(0,f.jsx)(m,{...t,ctx:e,ref:n})})}};try{h.displayName=`createOnboardingTour`,h.__docgenInfo={description:`Creates a new onboarding tour.
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{r as i,t as a}from"./OnboardingTooltip-IddlUs6s.js";import{i as o,r as s}from"./lib-8ue2PVWI.js";var c,l,u=t((()=>{c=`counter__ArBS-`,l={counter:c}})),d,f,p,m,h,g=t((()=>{d=e(n(),1),i(),u(),s(),f=r(),p=({totalSteps:e,nextActionLabel:t=(0,f.jsx)(o,{id:`preply-ds.onboardingTour.nextActionLabel`,defaultMessage:`Next`,description:`Onboarding tour next action label`}),completeActionLabel:n=(0,f.jsx)(o,{id:`preply-ds.onboardingTour.completeActionLabel`,defaultMessage:`Got it`,description:`Onboarding tour complete action label`}),onClose:r,onComplete:i,onStepChange:a,disabled:s,children:c,ctx:l})=>{let[u,p]=(0,d.useState)(!0),[m,h]=(0,d.useState)(0),g={totalSteps:e,nextActionLabel:t,completeActionLabel:n,onClose:()=>{p(!1),r?.()},active:!s&&u,currentStep:m,onActionClick:()=>{if(m===e-1)i?.(),p(!1);else{let e=m+1;h(e),a?.(e)}}};return(0,f.jsx)(l.Provider,{value:g,children:c})},m=(0,d.forwardRef)(function({ctx:e,...t},n){let r=(0,d.useContext)(e);if(!r)throw Error(`OnboardingTourContext not found`);let{currentStep:i,totalSteps:s,onActionClick:c,onClose:u,active:p,nextActionLabel:m,completeActionLabel:h}=r,g=t.step===s-1,_=t.step===i,v=g?h:m,y=()=>{t.actionOnClick?.(),c()},b=e=>{e||u?.()};return(0,f.jsx)(a,{...t,counter:(0,f.jsx)(`p`,{className:l.counter,children:(0,f.jsx)(o,{id:`preply-ds.onboardingTour.counter`,defaultMessage:`{currentStep} of {totalSteps}`,description:`Onboarding tour step counter, e.g. '1 of 3'`,values:{currentStep:i+1,totalSteps:s}})}),open:p&&_,onOpenChange:b,actionLabel:v,actionOnClick:y,ref:n})}),h=()=>{let e=(0,d.createContext)(null);return{Provider:t=>(0,f.jsx)(p,{...t,ctx:e}),Step:(0,d.forwardRef)(function(t,n){return(0,f.jsx)(m,{...t,ctx:e,ref:n})})}};try{h.displayName=`createOnboardingTour`,h.__docgenInfo={description:`Creates a new onboarding tour.
 
 This factory pattern allows multiple independent tours to be nested within each other
 without context conflicts, as each tour maintains its own separate context and state.`,displayName:`createOnboardingTour`,props:{}}}catch{}}));export{g as n,h as t};

package/dist/assets/{OnboardingTour.stories-Bs8xxSkO.js → OnboardingTour.stories-BAq9wAlT.js}

@@ -1,8 +1,8 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-BiCO96_r.js";import{n as o,t as s}from"./OnboardingTour-ChdI2m_S.js";import{n as c,t as l}from"./LayoutFlex-CEOcocT6.js";var u,d,f=t((()=>{u=e=>null,d=e=>null;try{u.displayName=`OnboardingTourProvider`,u.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-at08VF1d.js";import{n as o,t as s}from"./OnboardingTour-DXTaYFSg.js";import{n as c,t as l}from"./LayoutFlex-Ca74XcC1.js";var u,d,f=t((()=>{u=e=>null,d=e=>null;try{u.displayName=`OnboardingTourProvider`,u.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
 when they're created with the \`createOnboardingTour\` function.
 
 As a workaround, we're manually defining fake components with the same
-props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:`OnboardingTourProvider`,props:{totalSteps:{defaultValue:null,description:`Total number of steps in the tour`,name:`totalSteps`,required:!0,type:{name:`number`}},nextActionLabel:{defaultValue:{value:`"Next"`},description:`Label for the "Next" action button`,name:`nextActionLabel`,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`}]}},completeActionLabel:{defaultValue:{value:`"Got it"`},description:`Label for the "Complete" action button`,name:`completeActionLabel`,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`}]}},disabled:{defaultValue:null,description:`Whether the tour is disabled`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onClose:{defaultValue:null,description:`Called when the tour is closed`,name:`onClose`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},onComplete:{defaultValue:null,description:`Called when the tour is completed`,name:`onComplete`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},onStepChange:{defaultValue:null,description:`Called when the current step index changes`,name:`onStepChange`,required:!1,type:{name:`enum`,value:[{value:`(step: number) => void`}]}}}}}catch{}try{d.displayName=`OnboardingTourStep`,d.__docgenInfo={description:``,displayName:`OnboardingTourStep`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},side:{defaultValue:null,description:`Preferred side of the tooltip to appear from. Use if default side might block important content.`,name:`side`,required:!1,type:{name:`enum`,value:[{value:`"top"`},{value:`"right"`},{value:`"bottom"`},{value:`"left"`}]}},title:{defaultValue:null,description:``,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`}]}},text:{defaultValue:null,description:``,name:`text`,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`}]}},actionOnClick:{defaultValue:null,description:`By default, the action button closes the tooltip.
+props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:`OnboardingTourProvider`,props:{totalSteps:{defaultValue:null,description:`Total number of steps in the tour`,name:`totalSteps`,required:!0,type:{name:`number`}},nextActionLabel:{defaultValue:{value:`"Next"`},description:`Label for the "Next" action button`,name:`nextActionLabel`,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`}]}},completeActionLabel:{defaultValue:{value:`"Got it"`},description:`Label for the "Complete" action button`,name:`completeActionLabel`,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`}]}},disabled:{defaultValue:null,description:`Whether the tour is disabled`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onClose:{defaultValue:null,description:`Called when the tour is closed`,name:`onClose`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},onComplete:{defaultValue:null,description:`Called when the tour is completed`,name:`onComplete`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},onStepChange:{defaultValue:null,description:`Called when the current step index changes`,name:`onStepChange`,required:!1,type:{name:`enum`,value:[{value:`(step: number) => void`}]}}}}}catch{}try{d.displayName=`OnboardingTourStep`,d.__docgenInfo={description:``,displayName:`OnboardingTourStep`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},title:{defaultValue:null,description:``,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`}]}},text:{defaultValue:null,description:``,name:`text`,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`}]}},side:{defaultValue:null,description:`Preferred side of the tooltip to appear from. Use if default side might block important content.`,name:`side`,required:!1,type:{name:`enum`,value:[{value:`"top"`},{value:`"right"`},{value:`"bottom"`},{value:`"left"`}]}},actionOnClick:{defaultValue:null,description:`By default, the action button closes the tooltip.
 
 Provide \`actionOnClick\` to also perform other action.`,name:`actionOnClick`,required:!1,type:{name:`enum`,value:[{value:`() => void`}]}},autoScroll:{defaultValue:{value:`true`},description:`If true, the tooltip will automatically scroll into view when it is opened.`,name:`autoScroll`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},step:{defaultValue:null,description:`Zero-based step index`,name:`step`,required:!0,type:{name:`number`}}}}}catch{}})),p,m,h,g,_,v,y,b,x;t((()=>{p=e(n(),1),o(),i(),f(),c(),m=r(),h=s(),g={title:`Components/OnboardingTour`,component:u,subcomponents:{OnboardingTourStep:d},parameters:{preventIframeFromScrollingParent:!0,docs:{story:{inline:!1,height:250},description:{component:`Are you looking for a tooltip to highlight single element? Check out [OnboardingTooltip](/docs/components-onboardingtooltip--docs)`}}},decorators:[e=>(0,m.jsx)(`div`,{style:{margin:`auto`,width:`max-content`},children:e()})]},_=e=>[!1,!1],v=e=>e=>{},y=()=>{let[e,t]=_(`my-tour`),n=v(`my-tour`);return(0,m.jsxs)(h.Provider,{totalSteps:3,disabled:t||e,onComplete:()=>n(!0),children:[(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:0,title:`Step 1`,text:`This is the first step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 1`})})}),(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:1,title:`Step 2`,text:`This is the second step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 2`})})}),(0,m.jsx)(`div`,{style:{height:250},children:(0,m.jsx)(h.Step,{step:2,title:`Step 3`,text:`This is the final step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 3`})})})]})},y.storyName=`OnboardingTour`,b=()=>{let[e,t]=(0,p.useState)(!0);return(0,m.jsx)(h.Provider,{totalSteps:3,children:(0,m.jsxs)(l,{gap:`12`,children:[(0,m.jsx)(h.Step,{step:0,title:`First step`,text:`This is the first step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 1`})}),(0,m.jsx)(h.Step,{step:1,title:`Second step`,text:`This is the second step of the onboarding tour.`,actionOnClick:()=>t(!1),children:(0,m.jsx)(a,{children:`Step 2`})}),!e&&(0,m.jsx)(h.Step,{step:2,title:`Final step`,text:`This is the final step of the onboarding tour.`,children:(0,m.jsx)(a,{children:`Step 3 (I was hidden)`})})]})})},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`() => {
   const [wasTourCompleted, loading] = useIsFeatureActive('my-tour');

package/dist/assets/{OnboardingTour.tests.stories-9KaTQw8J.js → OnboardingTour.tests.stories-DJeStnzI.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-BiCO96_r.js";import{n as o,t as s}from"./Button-_0pS2khJ.js";import{n as c,t as l}from"./OnboardingTour-ChdI2m_S.js";import{n as u,t as d}from"./LayoutFlex-CEOcocT6.js";function f(e){return new Promise(t=>setTimeout(t,e))}var p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k;t((()=>{p=e(n(),1),c(),i(),o(),u(),m=r(),{within:h,userEvent:g,waitFor:_,expect:v,fn:y}=__STORYBOOK_MODULE_TEST__,b=l(),x={title:`Components/OnboardingTour/Tests`,parameters:{layout:`centered`,controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`],decorators:[e=>(0,m.jsx)(`div`,{style:{margin:`100px 0`},children:e()})],args:{onComplete:y(),onClose:y(),onStepChange:y()}},S={render:({onComplete:e,onStepChange:t})=>(0,m.jsx)(b.Provider,{totalSteps:3,nextActionLabel:`Next`,completeActionLabel:`Got it`,onComplete:e,onStepChange:t,children:(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(b.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})}),(0,m.jsx)(b.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`step-2`},children:(0,m.jsx)(a,{children:`Step 2 Content`})}),(0,m.jsx)(b.Step,{step:2,title:`Title`,text:`Text`,dataset:{testid:`step-3`},children:(0,m.jsx)(a,{children:`Step 3 Content`})})]})}),play:async({canvasElement:e,step:t,args:n})=>{let r=h(e);await t(`First step should be visible initially`,async()=>{await _(()=>{v(r.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click Next to advance to second step`,async()=>{let e=h(r.getByTestId(`step-1`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.getByTestId(`step-2`)).toBeVisible(),v(n.onStepChange).toHaveBeenCalledWith(1)})}),await t(`Click Next to advance to final step`,async()=>{let e=h(r.getByTestId(`step-2`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.getByTestId(`step-3`)).toBeVisible(),v(n.onStepChange).toHaveBeenCalledWith(2)})}),await t(`Complete tour`,async()=>{let e=h(r.getByTestId(`step-3`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.queryByTestId(`step`,{exact:!1})).toBeNull(),v(n.onComplete).toHaveBeenCalled()})})}},C={render:({onClose:e})=>(0,m.jsx)(b.Provider,{totalSteps:2,nextActionLabel:`Next`,completeActionLabel:`Got it`,onClose:e,children:(0,m.jsx)(b.Step,{step:0,title:`First step`,text:`Try closing this step`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})}),play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Step should be initially visible`,async()=>{await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click close button to close tour`,async({args:e})=>{let t=h(n.getByTestId(`step-1`)).getByTestId(`close`);await g.click(t),await _(()=>{v(n.queryByTestId(`step`,{exact:!1})).toBeNull(),v(e.onClose).toHaveBeenCalled()})})}},w={render:function(){let[e,t]=(0,p.useState)(!0);return(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(s,{onClick:()=>t(!e),dataset:{testid:`toggle-button`},children:e?`Enable Tour`:`Disable Tour`}),(0,m.jsx)(b.Provider,{totalSteps:2,nextActionLabel:`Next`,completeActionLabel:`Got it`,disabled:e,children:(0,m.jsx)(b.Step,{step:0,title:`First step`,text:`This step should be hidden when disabled`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})})]})},play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Tour should be initially disabled`,async()=>{v(n.queryByTestId(`step-1`)).toBeNull()}),await t(`Click enable button to show tour`,async()=>{let e=n.getByTestId(`toggle-button`);await g.click(e),await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})})}},T=l(),E=l(),D={render:function(){let[e,t]=(0,p.useState)(!1),[n,r]=(0,p.useState)(!1);return(0,m.jsxs)(T.Provider,{totalSteps:2,disabled:!e,nextActionLabel:`Next`,completeActionLabel:`Got it`,children:[(0,m.jsx)(T.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`outer-step-1`},children:(0,m.jsx)(s,{onClick:()=>t(!0),dataset:{testid:`start-outer-tour`},children:`Start outer tour`})}),(0,m.jsxs)(E.Provider,{totalSteps:2,disabled:!n,nextActionLabel:`Next`,completeActionLabel:`Done`,children:[(0,m.jsx)(T.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`outer-step-2`},children:(0,m.jsx)(a,{children:`Outer Tour Step`})}),(0,m.jsx)(E.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`inner-step-1`},children:(0,m.jsx)(s,{onClick:()=>r(!0),dataset:{testid:`start-inner-tour`},children:`Start inner tour`})}),(0,m.jsx)(E.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`inner-step-2`},children:(0,m.jsx)(a,{children:`Inner Tour Step`})})]})]})},play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Start inner tour, step 1 should be visible`,async()=>{let e=n.getByTestId(`start-inner-tour`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-1`)).toBeVisible()})}),await t(`Advance inner tour, step 2 should be visible`,async()=>{let e=h(n.getByTestId(`inner-step-1`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-2`)).toBeVisible()})}),await t(`Complete inner tour`,async()=>{let e=h(n.getByTestId(`inner-step-2`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-1`,{exact:!1})).toBeNull()})}),await t(`Start outer tour, step 1 should be visible`,async()=>{let e=n.getByTestId(`start-outer-tour`);await g.click(e),await _(async()=>{v(n.queryByTestId(`outer-step-1`)).toBeVisible()})}),await t(`Advance outer tour, step 2 should be visible`,async()=>{let e=h(n.getByTestId(`outer-step-1`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`outer-step-2`)).toBeVisible()})}),await t(`Complete outer tour`,async()=>{let e=h(n.getByTestId(`outer-step-2`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`-step-`,{exact:!1})).toBeNull()})})}},O={render:()=>(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(s,{children:`Click outside the tooltip`}),(0,m.jsx)(b.Provider,{totalSteps:1,nextActionLabel:`Next`,completeActionLabel:`Got it`,children:(0,m.jsx)(b.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})})]}),play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Step should be initially visible`,async()=>{await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click outside the tooltip`,()=>{let e=n.getByText(`Click outside the tooltip`);return g.click(e)}),await t(`Wait for tooltip to be hidden`,async()=>{await f(1e3),v(n.getByTestId(`step-1`)).toBeVisible()})}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-at08VF1d.js";import{n as o,t as s}from"./Button-BUsGqnKd.js";import{n as c,t as l}from"./OnboardingTour-DXTaYFSg.js";import{n as u,t as d}from"./LayoutFlex-Ca74XcC1.js";function f(e){return new Promise(t=>setTimeout(t,e))}var p,m,h,g,_,v,y,b,x,S,C,w,T,E,D,O,k;t((()=>{p=e(n(),1),c(),i(),o(),u(),m=r(),{within:h,userEvent:g,waitFor:_,expect:v,fn:y}=__STORYBOOK_MODULE_TEST__,b=l(),x={title:`Components/OnboardingTour/Tests`,parameters:{layout:`centered`,controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:[`!autodocs`,`!a11y-test`,`test`],decorators:[e=>(0,m.jsx)(`div`,{style:{margin:`100px 0`},children:e()})],args:{onComplete:y(),onClose:y(),onStepChange:y()}},S={render:({onComplete:e,onStepChange:t})=>(0,m.jsx)(b.Provider,{totalSteps:3,nextActionLabel:`Next`,completeActionLabel:`Got it`,onComplete:e,onStepChange:t,children:(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(b.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})}),(0,m.jsx)(b.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`step-2`},children:(0,m.jsx)(a,{children:`Step 2 Content`})}),(0,m.jsx)(b.Step,{step:2,title:`Title`,text:`Text`,dataset:{testid:`step-3`},children:(0,m.jsx)(a,{children:`Step 3 Content`})})]})}),play:async({canvasElement:e,step:t,args:n})=>{let r=h(e);await t(`First step should be visible initially`,async()=>{await _(()=>{v(r.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click Next to advance to second step`,async()=>{let e=h(r.getByTestId(`step-1`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.getByTestId(`step-2`)).toBeVisible(),v(n.onStepChange).toHaveBeenCalledWith(1)})}),await t(`Click Next to advance to final step`,async()=>{let e=h(r.getByTestId(`step-2`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.getByTestId(`step-3`)).toBeVisible(),v(n.onStepChange).toHaveBeenCalledWith(2)})}),await t(`Complete tour`,async()=>{let e=h(r.getByTestId(`step-3`)).getByTestId(`action`);await g.click(e),await _(()=>{v(r.queryByTestId(`step`,{exact:!1})).toBeNull(),v(n.onComplete).toHaveBeenCalled()})})}},C={render:({onClose:e})=>(0,m.jsx)(b.Provider,{totalSteps:2,nextActionLabel:`Next`,completeActionLabel:`Got it`,onClose:e,children:(0,m.jsx)(b.Step,{step:0,title:`First step`,text:`Try closing this step`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})}),play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Step should be initially visible`,async()=>{await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click close button to close tour`,async({args:e})=>{let t=h(n.getByTestId(`step-1`)).getByTestId(`close`);await g.click(t),await _(()=>{v(n.queryByTestId(`step`,{exact:!1})).toBeNull(),v(e.onClose).toHaveBeenCalled()})})}},w={render:function(){let[e,t]=(0,p.useState)(!0);return(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(s,{onClick:()=>t(!e),dataset:{testid:`toggle-button`},children:e?`Enable Tour`:`Disable Tour`}),(0,m.jsx)(b.Provider,{totalSteps:2,nextActionLabel:`Next`,completeActionLabel:`Got it`,disabled:e,children:(0,m.jsx)(b.Step,{step:0,title:`First step`,text:`This step should be hidden when disabled`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})})]})},play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Tour should be initially disabled`,async()=>{v(n.queryByTestId(`step-1`)).toBeNull()}),await t(`Click enable button to show tour`,async()=>{let e=n.getByTestId(`toggle-button`);await g.click(e),await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})})}},T=l(),E=l(),D={render:function(){let[e,t]=(0,p.useState)(!1),[n,r]=(0,p.useState)(!1);return(0,m.jsxs)(T.Provider,{totalSteps:2,disabled:!e,nextActionLabel:`Next`,completeActionLabel:`Got it`,children:[(0,m.jsx)(T.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`outer-step-1`},children:(0,m.jsx)(s,{onClick:()=>t(!0),dataset:{testid:`start-outer-tour`},children:`Start outer tour`})}),(0,m.jsxs)(E.Provider,{totalSteps:2,disabled:!n,nextActionLabel:`Next`,completeActionLabel:`Done`,children:[(0,m.jsx)(T.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`outer-step-2`},children:(0,m.jsx)(a,{children:`Outer Tour Step`})}),(0,m.jsx)(E.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`inner-step-1`},children:(0,m.jsx)(s,{onClick:()=>r(!0),dataset:{testid:`start-inner-tour`},children:`Start inner tour`})}),(0,m.jsx)(E.Step,{step:1,title:`Title`,text:`Text`,dataset:{testid:`inner-step-2`},children:(0,m.jsx)(a,{children:`Inner Tour Step`})})]})]})},play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Start inner tour, step 1 should be visible`,async()=>{let e=n.getByTestId(`start-inner-tour`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-1`)).toBeVisible()})}),await t(`Advance inner tour, step 2 should be visible`,async()=>{let e=h(n.getByTestId(`inner-step-1`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-2`)).toBeVisible()})}),await t(`Complete inner tour`,async()=>{let e=h(n.getByTestId(`inner-step-2`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`inner-step-1`,{exact:!1})).toBeNull()})}),await t(`Start outer tour, step 1 should be visible`,async()=>{let e=n.getByTestId(`start-outer-tour`);await g.click(e),await _(async()=>{v(n.queryByTestId(`outer-step-1`)).toBeVisible()})}),await t(`Advance outer tour, step 2 should be visible`,async()=>{let e=h(n.getByTestId(`outer-step-1`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`outer-step-2`)).toBeVisible()})}),await t(`Complete outer tour`,async()=>{let e=h(n.getByTestId(`outer-step-2`)).getByTestId(`action`);await g.click(e),await _(async()=>{v(n.queryByTestId(`-step-`,{exact:!1})).toBeNull()})})}},O={render:()=>(0,m.jsxs)(d,{gap:`24`,direction:`column`,children:[(0,m.jsx)(s,{children:`Click outside the tooltip`}),(0,m.jsx)(b.Provider,{totalSteps:1,nextActionLabel:`Next`,completeActionLabel:`Got it`,children:(0,m.jsx)(b.Step,{step:0,title:`Title`,text:`Text`,dataset:{testid:`step-1`},children:(0,m.jsx)(a,{children:`Step 1 Content`})})})]}),play:async({canvasElement:e,step:t})=>{let n=h(e);await t(`Step should be initially visible`,async()=>{await _(()=>{v(n.getByTestId(`step-1`)).toBeVisible()})}),await t(`Click outside the tooltip`,()=>{let e=n.getByText(`Click outside the tooltip`);return g.click(e)}),await t(`Wait for tooltip to be hidden`,async()=>{await f(1e3),v(n.getByTestId(`step-1`)).toBeVisible()})}},S.parameters={...S.parameters,docs:{...S.parameters?.docs,source:{originalSource:`{
   render: ({
     onComplete,
     onStepChange

package/dist/assets/{PasswordField-CneYVFFH.js → PasswordField-BN7Fk1JN.js}

@@ -1,6 +1,6 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{T as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,o as l,r as u}from"./lib-8ue2PVWI.js";import{n as d,t as f}from"./FieldButton-SkKd22gq.js";import{n as p,t as m}from"./FormControl-B3jdXz5i.js";import{r as h,t as g}from"./Input-D6_jI5Uh.js";import{i as _,n as v,r as y,t as b}from"./TokyoUIEye-B3okJSKv.js";var x,S,C,w,T=t((()=>{x=e(n(),1),p(),g(),i(),s(),_(),v(),d(),u(),S=a(),C=c({reveal:{id:`preply-ds.password-field.reveal.button`,defaultMessage:`Reveal password`,description:`A11y label for the "reveal password" button. Will be announced by screen reader.`},conceal:{id:`preply-ds.password-field.conceal.button`,defaultMessage:`Conceal password`,description:`A11y label for the "conceal password" button. Will be announced by screen reader.`}}),w=(0,x.forwardRef)(function({id:e,label:t,description:n,error:i,required:a,inputDataset:s,dataset:c,hideLabel:u,onClick:d,hasError:p,useLegacyRequiredLabel:g,className:_,style:v,...w},T){let{formatMessage:E}=l(),[D,O]=(0,x.useState)(!1),k=(0,x.useRef)(null),A=r(k,T),j=D?`text`:`password`,M=()=>{O(!D),k.current?.focus()};return(0,S.jsx)(m,{id:e,label:t,description:n,error:i,hasError:p,required:a,dataset:c,hideLabel:u,onClick:d,useLegacyRequiredLabel:g,preplyDsComponent:o.PasswordField,children:(0,S.jsx)(h,{...w,type:j,ref:A,dataset:s,button:(0,S.jsx)(f,{onClick:M,svg:D?y:b,assistiveText:E(D?C.conceal:C.reveal),dataset:{testid:`toggle-password-button`}})})})});try{w.displayName=`PasswordField`,w.__docgenInfo={description:``,displayName:`PasswordField`,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 explicitly 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> & MouseEventHandler<HTMLInputElement>`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{T as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./dist-Cc1j9Pjk.js";import{n as c,o as l,r as u}from"./lib-8ue2PVWI.js";import{n as d,t as f}from"./FieldButton-SkKd22gq.js";import{n as p,t as m}from"./FormControl-DG7egvWs.js";import{r as h,t as g}from"./Input-D5QJivuW.js";import{i as _,n as v,r as y,t as b}from"./TokyoUIEye-B3okJSKv.js";var x,S,C,w,T=t((()=>{x=e(n(),1),p(),g(),i(),s(),_(),v(),d(),u(),S=a(),C=c({reveal:{id:`preply-ds.password-field.reveal.button`,defaultMessage:`Reveal password`,description:`A11y label for the "reveal password" button. Will be announced by screen reader.`},conceal:{id:`preply-ds.password-field.conceal.button`,defaultMessage:`Conceal password`,description:`A11y label for the "conceal password" button. Will be announced by screen reader.`}}),w=(0,x.forwardRef)(function({id:e,label:t,description:n,error:i,required:a,inputDataset:s,dataset:c,hideLabel:u,onClick:d,hasError:p,useLegacyRequiredLabel:g,className:_,style:v,...w},T){let{formatMessage:E}=l(),[D,O]=(0,x.useState)(!1),k=(0,x.useRef)(null),A=r(k,T),j=D?`text`:`password`,M=()=>{O(!D),k.current?.focus()};return(0,S.jsx)(m,{id:e,label:t,description:n,error:i,hasError:p,required:a,dataset:c,hideLabel:u,onClick:d,useLegacyRequiredLabel:g,preplyDsComponent:o.PasswordField,children:(0,S.jsx)(h,{...w,type:j,ref:A,dataset:s,button:(0,S.jsx)(f,{onClick:M,svg:D?y:b,assistiveText:E(D?C.conceal:C.reveal),dataset:{testid:`toggle-password-button`}})})})});try{w.displayName=`PasswordField`,w.__docgenInfo={description:``,displayName:`PasswordField`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},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`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>`}]}},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`}]}},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`}]}},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`}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:`hasError`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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`}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
 When false, adds a "Optional" indicator next to the label for the optional fields instead.
-@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},autoComplete:{defaultValue:null,description:``,name:`autoComplete`,required:!1,type:{name:`enum`,value:[{value:`"off"`},{value:`"new-password"`},{value:`"current-password"`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{T as n,w as t};
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:`useLegacyRequiredLabel`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: string) => void`}]}},icon:{defaultValue:null,description:``,name:`icon`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},autoComplete:{defaultValue:null,description:``,name:`autoComplete`,required:!1,type:{name:`enum`,value:[{value:`"off"`},{value:`"new-password"`},{value:`"current-password"`}]}},inputDataset:{defaultValue:null,description:``,name:`inputDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{T as n,w as t};

package/dist/assets/{PasswordField.stories-COup04RY.js → PasswordField.stories-ByfF9RQU.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-BItN7xKl.js";import{n as o,t as s}from"./PasswordField-CneYVFFH.js";import{n as c,t as l}from"./TokyoUILock-BHcTJZZm.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E;t((()=>{u=e(n(),1),o(),c(),i(),d=r(),{expect:f,userEvent:p,within:m,fn:h}=__STORYBOOK_MODULE_TEST__,g={title:`components/PasswordField`,component:s,args:{name:`password`,label:`Password`,placeholder:`Enter a password`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:h(),onValueChange:h(),onBlur:h(),onFocus:h(),onClick:h(),onCopy:h(),onKeyDown:h(),onKeyUp:h(),onPaste:h()}},_={play:async({canvasElement:e,step:t,args:n})=>{let r=m(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{f(m(i).getByTestId(`label`)).toHaveTextContent(`Password • Optional`),f(a).toHaveAccessibleName(`Password`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),f(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await p.type(a,`secret123`),f(n.onValueChange).toHaveBeenCalledWith(`secret123`),f(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await p.keyboard(`{tab}`),f(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{f(i).toHaveAttribute(`data-testid`,`field`),f(i).toHaveAttribute(`data-foo`,`bar`),f(a).toHaveAttribute(`data-testid`,`input`),f(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should have password type by default`,async()=>{f(a).toHaveAttribute(`type`,`password`)})}},v={render:function(e){let[t,n]=(0,u.useState)(e.value);return(0,d.jsx)(s,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)}})},args:{label:`Controlled PasswordField`,placeholder:`Enter your password...`,value:`secret123`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await f(e.getByTestId(`input`)).toHaveValue(`secret123`)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await p.clear(t),await p.type(t,`newpassword`),f(t).toHaveValue(`newpassword`)})}},y={args:{description:`Include letters, numbers and symbols`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{f(n).toHaveAccessibleDescription(`Include letters, numbers and symbols`),f(r).toHaveTextContent(`Include letters, numbers and symbols`)})}},b={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{f(n).toHaveAccessibleName(`Password`),f(r).toHaveTextContent(`Password`)}),await t(`it should render required attribute`,async()=>{f(n).toHaveAttribute(`required`)})}},x={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{f(e.getByTestId(`input`)).toHaveAccessibleName(`Password`)})}},S={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{f(n).toHaveAccessibleErrorMessage(`This is an error message`),f(r).toHaveTextContent(`This is an error message`)})}},C={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{f(n).toHaveAttribute(`disabled`)})}},w={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{f(n).toHaveAttribute(`readonly`)})}},T={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Password`,placeholder:`e.g.: abc123%pt0!`,description:`Include letters, numbers and symbols`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},readOnly:{control:`boolean`},maxLength:{control:`number`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,d.jsx)(a,{svg:l})},control:`select`},autoComplete:{control:`select`},hasError:{table:{disable:!0}}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-0niTGk4t.js";import{n as o,t as s}from"./PasswordField-BN7Fk1JN.js";import{n as c,t as l}from"./TokyoUILock-BHcTJZZm.js";var u,d,f,p,m,h,g,_,v,y,b,x,S,C,w,T,E;t((()=>{u=e(n(),1),o(),c(),i(),d=r(),{expect:f,userEvent:p,within:m,fn:h}=__STORYBOOK_MODULE_TEST__,g={title:`components/PasswordField`,component:s,args:{name:`password`,label:`Password`,placeholder:`Enter a password`,defaultValue:``,dataset:{testid:`field`,foo:`bar`},inputDataset:{testid:`input`,foo:`bar`},onChange:h(),onValueChange:h(),onBlur:h(),onFocus:h(),onClick:h(),onCopy:h(),onKeyDown:h(),onKeyUp:h(),onPaste:h()}},_={play:async({canvasElement:e,step:t,args:n})=>{let r=m(e),i=r.getByTestId(`field`),a=r.getByTestId(`input`);await t(`it should render correct label`,async()=>{f(m(i).getByTestId(`label`)).toHaveTextContent(`Password • Optional`),f(a).toHaveAccessibleName(`Password`)}),await t(`it should call onFocus when the input is focused`,async()=>{a.focus(),f(n.onFocus).toHaveBeenCalled()}),await t(`it should call callback when the value changes`,async()=>{await p.type(a,`secret123`),f(n.onValueChange).toHaveBeenCalledWith(`secret123`),f(n.onChange).toHaveBeenCalled()}),await t(`it should call onBlur when the input is blurred`,async()=>{await p.keyboard(`{tab}`),f(n.onBlur).toHaveBeenCalled()}),await t(`it should render the dataset props`,async()=>{f(i).toHaveAttribute(`data-testid`,`field`),f(i).toHaveAttribute(`data-foo`,`bar`),f(a).toHaveAttribute(`data-testid`,`input`),f(a).toHaveAttribute(`data-foo`,`bar`)}),await t(`it should have password type by default`,async()=>{f(a).toHaveAttribute(`type`,`password`)})}},v={render:function(e){let[t,n]=(0,u.useState)(e.value);return(0,d.jsx)(s,{...e,value:t,onChange:t=>{n(t.target.value),e.onChange?.(t)}})},args:{label:`Controlled PasswordField`,placeholder:`Enter your password...`,value:`secret123`,defaultValue:void 0},play:async({canvas:e,step:t})=>{await t(`it should render the correct initial value`,async()=>{await f(e.getByTestId(`input`)).toHaveValue(`secret123`)}),await t(`it should update the value when the user types`,async()=>{let t=e.getByTestId(`input`);await p.clear(t),await p.type(t,`newpassword`),f(t).toHaveValue(`newpassword`)})}},y={args:{description:`Include letters, numbers and symbols`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`description`);await t(`it should render the description`,async()=>{f(n).toHaveAccessibleDescription(`Include letters, numbers and symbols`),f(r).toHaveTextContent(`Include letters, numbers and symbols`)})}},b={args:{required:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`label`);await t(`it should render correct label`,async()=>{f(n).toHaveAccessibleName(`Password`),f(r).toHaveTextContent(`Password`)}),await t(`it should render required attribute`,async()=>{f(n).toHaveAttribute(`required`)})}},x={args:{hideLabel:!0},play:async({canvas:e,step:t})=>{await t(`it should render correct a11y label`,async()=>{f(e.getByTestId(`input`)).toHaveAccessibleName(`Password`)})}},S={args:{error:`This is an error message`},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`),r=e.getByTestId(`error`);await t(`it should render the error message`,async()=>{f(n).toHaveAccessibleErrorMessage(`This is an error message`),f(r).toHaveTextContent(`This is an error message`)})}},C={args:{disabled:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the disabled input`,async()=>{f(n).toHaveAttribute(`disabled`)})}},w={args:{readOnly:!0},play:async({canvas:e,step:t})=>{let n=e.getByTestId(`input`);await t(`it should render the read only input`,async()=>{f(n).toHaveAttribute(`readonly`)})}},T={parameters:{chromatic:{disableSnapshot:!0}},args:{label:`Password`,placeholder:`e.g.: abc123%pt0!`,description:`Include letters, numbers and symbols`},argTypes:{label:{control:`text`},placeholder:{control:`text`},description:{control:`text`},error:{control:`text`},value:{control:`text`},defaultValue:{control:`text`},inputDataset:{control:`object`},dataset:{control:`object`},id:{control:`text`},required:{control:`boolean`},hideLabel:{control:`boolean`},name:{control:`text`},disabled:{control:`boolean`},readOnly:{control:`boolean`},maxLength:{control:`number`},icon:{options:[`None`,`With Icon`],mapping:{None:void 0,"With Icon":(0,d.jsx)(a,{svg:l})},control:`select`},autoComplete:{control:`select`},hasError:{table:{disable:!0}}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,

package/dist/assets/{ProgressBar.stories-Bib8wp9b.js → ProgressBar.stories-BExsN1vA.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./IconButton-sZZtNos_.js";import{n as o,t as s}from"./LayoutFlex-CEOcocT6.js";import{n as c,t as l}from"./ProgressBar-CRitEeQk.js";import{i as u,n as d,r as f,t as p}from"./TokyoUIMinus-D-ZU-zJ8.js";var m,h,g,_,v,y,b,x;t((()=>{m=e(n(),1),c(),i(),o(),u(),d(),h=r(),g={title:`Components/ProgressBar`,component:l,parameters:{docs:{description:{component:`A component that visually indicates progress through a range of values.`}}},decorators:[e=>(0,h.jsx)(`div`,{style:{padding:`32px`,width:`500px`},children:(0,h.jsx)(e,{})})],args:{"aria-label":`Story`}},_={tags:[`!test`],args:{value:10,min:0,max:100},render:function({value:e,...t}){let[n,r]=(0,m.useState)(e),i=()=>r(Math.min(n+10,100));return(0,h.jsxs)(s,{alignItems:`center`,gap:`12`,children:[(0,h.jsx)(a,{svg:p,assistiveText:`Subtract`,onClick:()=>r(Math.max(n-10,0))}),(0,h.jsx)(`div`,{style:{width:150},children:(0,h.jsx)(l,{...t,value:n})}),(0,h.jsx)(a,{svg:f,assistiveText:`Add`,onClick:i})]})}},v={args:{value:0,min:0,max:100}},y={args:{value:100,min:0,max:100}},b={args:{value:2,min:1,max:5}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./IconButton-69CfWgKz.js";import{n as o,t as s}from"./LayoutFlex-Ca74XcC1.js";import{n as c,t as l}from"./ProgressBar-CRitEeQk.js";import{i as u,n as d,r as f,t as p}from"./TokyoUIMinus-D-ZU-zJ8.js";var m,h,g,_,v,y,b,x;t((()=>{m=e(n(),1),c(),i(),o(),u(),d(),h=r(),g={title:`Components/ProgressBar`,component:l,parameters:{docs:{description:{component:`A component that visually indicates progress through a range of values.`}}},decorators:[e=>(0,h.jsx)(`div`,{style:{padding:`32px`,width:`500px`},children:(0,h.jsx)(e,{})})],args:{"aria-label":`Story`}},_={tags:[`!test`],args:{value:10,min:0,max:100},render:function({value:e,...t}){let[n,r]=(0,m.useState)(e),i=()=>r(Math.min(n+10,100));return(0,h.jsxs)(s,{alignItems:`center`,gap:`12`,children:[(0,h.jsx)(a,{svg:p,assistiveText:`Subtract`,onClick:()=>r(Math.max(n-10,0))}),(0,h.jsx)(`div`,{style:{width:150},children:(0,h.jsx)(l,{...t,value:n})}),(0,h.jsx)(a,{svg:f,assistiveText:`Add`,onClick:i})]})}},v={args:{value:0,min:0,max:100}},y={args:{value:100,min:0,max:100}},b={args:{value:2,min:1,max:5}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
   tags: ['!test'],
   args: {
     value: 10,

package/dist/assets/{ProgressSteps.stories-D8soXV_p.js → ProgressSteps.stories-CpofAtnD.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./IconButton-sZZtNos_.js";import{n as o,t as s}from"./ProgressSteps-B2AXEKFJ.js";import{n as c,t as l}from"./LayoutFlex-CEOcocT6.js";import{i as u,n as d,r as f,t as p}from"./TokyoUIMinus-D-ZU-zJ8.js";var m,h,g,_,v,y,b;t((()=>{m=e(n(),1),o(),c(),i(),u(),d(),h=r(),g={title:`Components/ProgressSteps`,component:s,decorators:[e=>(0,h.jsx)(`div`,{style:{padding:`32px`,width:`500px`},children:(0,h.jsx)(e,{})})],args:{"aria-label":`Story`}},_={tags:[`!test`],args:{currentStep:6,totalSteps:6},render:function({currentStep:e,totalSteps:t,...n}){let[r,i]=(0,m.useState)(e),o=()=>i(Math.min(r+1,t));return(0,h.jsxs)(l,{alignItems:`center`,gap:`12`,children:[(0,h.jsx)(a,{svg:p,assistiveText:`Subtract`,onClick:()=>i(Math.max(r-1,1))}),(0,h.jsx)(s,{...n,currentStep:r,totalSteps:t}),(0,h.jsx)(a,{svg:f,assistiveText:`Add`,onClick:o})]})}},v={args:{currentStep:1,totalSteps:6}},y={args:{currentStep:6,totalSteps:6}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./IconButton-69CfWgKz.js";import{n as o,t as s}from"./ProgressSteps-B2AXEKFJ.js";import{n as c,t as l}from"./LayoutFlex-Ca74XcC1.js";import{i as u,n as d,r as f,t as p}from"./TokyoUIMinus-D-ZU-zJ8.js";var m,h,g,_,v,y,b;t((()=>{m=e(n(),1),o(),c(),i(),u(),d(),h=r(),g={title:`Components/ProgressSteps`,component:s,decorators:[e=>(0,h.jsx)(`div`,{style:{padding:`32px`,width:`500px`},children:(0,h.jsx)(e,{})})],args:{"aria-label":`Story`}},_={tags:[`!test`],args:{currentStep:6,totalSteps:6},render:function({currentStep:e,totalSteps:t,...n}){let[r,i]=(0,m.useState)(e),o=()=>i(Math.min(r+1,t));return(0,h.jsxs)(l,{alignItems:`center`,gap:`12`,children:[(0,h.jsx)(a,{svg:p,assistiveText:`Subtract`,onClick:()=>i(Math.max(r-1,1))}),(0,h.jsx)(s,{...n,currentStep:r,totalSteps:t}),(0,h.jsx)(a,{svg:f,assistiveText:`Add`,onClick:o})]})}},v={args:{currentStep:1,totalSteps:6}},y={args:{currentStep:6,totalSteps:6}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
   tags: ['!test'],
   args: {
     currentStep: 6,

package/dist/assets/{PromoDialog-De2gYvXV.js → PromoDialog-0Z8NWpvb.js}

@@ -1,3 +1,3 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-Czcvpvgg.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,p:`p`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Components/Dialog/PromoDialog`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r}from"./iframe-dOU5q7Ak.js";import{r as i}from"./react-B8jdHdWa.js";import{t as a}from"./mdx-react-shim-BUTq3l7l.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,p:`p`,...i(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(r,{title:`Components/Dialog/PromoDialog`}),`
 `,(0,c.jsx)(t.h1,{id:`promodialog`,children:`PromoDialog`}),`
 `,(0,c.jsxs)(t.p,{children:[`PromoDialog component is temporarily located in `,(0,c.jsx)(t.code,{children:`@preply/shared`}),`, check its stories in the `,(0,c.jsx)(t.a,{href:`https://apollo-storybook.preply.org/?path=/docs/design-system-promodialog--docs`,rel:`nofollow`,children:`apollo storybook`})]})]})}function s(e={}){let{wrapper:t}={...i(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;e((()=>{c=t(),a(),n()}))();export{s as default};

package/dist/assets/{RangeSlider-BczA6Et9.js → RangeSlider-CgR6JzNj.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{C as o,E as s,T as c,_ as l,w as u}from"./iframe-Czcvpvgg.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{o as p,r as m}from"./lib-8ue2PVWI.js";import{a as h,i as g,n as _,r as v}from"./Slider-DZQBnl2S.js";var y,b,x,S=t((()=>{y=e(n(),1),l(),h(),i(),f(),m(),v(),b=a(),x=(0,y.forwardRef)(function({value:e,defaultValue:t=[0,100],onValueChange:n,onValueCommit:i,min:a=0,max:l=100,step:f=1,minStepsBetweenThumbs:m=0,dataset:h,"aria-label":v,...y},x){let{formatMessage:S}=p(),C=r(h,{preplyDsComponent:d.Slider}),w=n?e=>n([e[0],e[1]]):void 0,T=i?e=>i([e[0],e[1]]):void 0;return(0,b.jsxs)(u,{ref:x,...C,className:g.root,value:e,defaultValue:t,onValueChange:w,onValueCommit:T,min:a,max:l,step:f,minStepsBetweenThumbs:m,children:[(0,b.jsx)(s,{className:g.track,children:(0,b.jsx)(o,{className:g.range})}),(0,b.jsx)(c,{..._(y),className:g.thumb,"aria-label":S({id:`preply-ds.slider-field.accessibility-label.minimum`,defaultMessage:`Minimum {label}`,description:`A label for a slider input's minimum value.
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{C as o,E as s,T as c,_ as l,w as u}from"./iframe-dOU5q7Ak.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";import{o as p,r as m}from"./lib-8ue2PVWI.js";import{a as h,i as g,n as _,r as v}from"./Slider-CV6iUw0B.js";var y,b,x,S=t((()=>{y=e(n(),1),l(),h(),i(),f(),m(),v(),b=a(),x=(0,y.forwardRef)(function({value:e,defaultValue:t=[0,100],onValueChange:n,onValueCommit:i,min:a=0,max:l=100,step:f=1,minStepsBetweenThumbs:m=0,dataset:h,"aria-label":v,...y},x){let{formatMessage:S}=p(),C=r(h,{preplyDsComponent:d.Slider}),w=n?e=>n([e[0],e[1]]):void 0,T=i?e=>i([e[0],e[1]]):void 0;return(0,b.jsxs)(u,{ref:x,...C,className:g.root,value:e,defaultValue:t,onValueChange:w,onValueCommit:T,min:a,max:l,step:f,minStepsBetweenThumbs:m,children:[(0,b.jsx)(s,{className:g.track,children:(0,b.jsx)(o,{className:g.range})}),(0,b.jsx)(c,{..._(y),className:g.thumb,"aria-label":S({id:`preply-ds.slider-field.accessibility-label.minimum`,defaultMessage:`Minimum {label}`,description:`A label for a slider input's minimum value.
                             For example: 'Minimum Price'.`},{label:v})}),(0,b.jsx)(c,{..._(y),className:g.thumb,"aria-label":S({id:`preply-ds.slider-field.accessibility-label.maximum`,defaultMessage:`Maximum {label}`,description:`A label for a slider input's maximum value.
                             For example: 'Maximum Price'.`},{label:v})})]})});try{x.displayName=`RangeSlider`,x.__docgenInfo={description:`A slider input that allows users to select a range between two values.`,displayName:`RangeSlider`,props:{id:{defaultValue:null,description:`The unique identifier for the range slider element.`,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-label":{defaultValue:null,description:`Accessible label for the range slider.`,name:`aria-label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-labelledby":{defaultValue:null,description:`ID of the element that labels the range slider.`,name:`aria-labelledby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-describedby":{defaultValue:null,description:`ID of the element that describes the range slider.`,name:`aria-describedby`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},"aria-invalid":{defaultValue:null,description:`Indicates whether the range slider value is invalid.`,name:`aria-invalid`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},"aria-errormessage":{defaultValue:null,description:`ID of the element that describes the error, if any.`,name:`aria-errormessage`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},value:{defaultValue:null,description:"The controlled value of the range slider.\nMust be used in conjunction with `onValueChange`.",name:`value`,required:!1,type:{name:`enum`,value:[{value:`RangeSliderValue`}]}},defaultValue:{defaultValue:{value:`[0, 100]`},description:`The value of the range slider when initially rendered.
 Use when you do not need to control the state of the range slider.`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`RangeSliderValue`}]}},onValueChange:{defaultValue:null,description:`Event handler called when the value changes.`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: RangeSliderValue) => void`}]}},onValueCommit:{defaultValue:null,description:`Event handler called when the value is committed (e.g. on pointer up or Enter key).`,name:`onValueCommit`,required:!1,type:{name:`enum`,value:[{value:`(value: RangeSliderValue) => void`}]}},name:{defaultValue:null,description:`The name of the range slider. Submitted with its owning form as part of a name/value pair.`,name:`name`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},min:{defaultValue:{value:`0`},description:`The minimum value for the range slider.`,name:`min`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},max:{defaultValue:{value:`100`},description:`The maximum value for the range slider.`,name:`max`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},step:{defaultValue:{value:`1`},description:`The slider stepping interval.`,name:`step`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},minStepsBetweenThumbs:{defaultValue:{value:`0`},description:`The minimum permitted steps between thumbs.`,name:`minStepsBetweenThumbs`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{S as n,x as t};