@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/SingleSelectChips-BuIHP3oW.js

@@ -0,0 +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-BBsZ9A2n.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-CgxIAZIj.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(`SingleSelectChips`),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??null}),b=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:{value:g,onValueChange:v},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":`false`,...r(f,{preplyDsComponent:o.SingleSelectChips}),children:b})})})}),E=(0,x.forwardRef)(function({value:e,children:t,icon:n,countryFlagCode:i,disabled:a,counter:s,dataset:c,dsInternalSimulation:u,...d},p){let{value:h,onValueChange:g}=w(),_=h===e;return(0,S.jsx)(f,{role:`presentation`,children:(0,S.jsx)(v,{...l(d),ref:p,role:`option`,"aria-selected":_,onClick:()=>g(_?null:e),icon:n,countryFlagCode:i,disabled:a,dsInternalSimulation:u,...r(c,{preplyDsComponent:o.SingleSelectChipsItem}),children:(0,S.jsx)(m,{counter:s,children:t})})})});try{T.displayName=`SingleSelectChips`,T.__docgenInfo={description:`A chips component that allows selection of a single option from a group.
+Users can select one chip at a time, and clicking a selected chip will deselect it.`,displayName:`SingleSelectChips`,props:{key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}},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:`null`},{value:`string`}]}},"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`}},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:`null`},{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"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},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 | null) => void`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`(Omit<ChipsItemProps, "children" | "value" | "dsInternalSimulation"> & { value: T extends unknown[] ? NonNullable<T[number]> : 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=`SingleSelectChipsItem`,E.__docgenInfo={description:`Individual chip item for use within SingleSelectChips.`,displayName:`SingleSelectChipsItem`,props:{disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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:`"th"`},{value:`"td"`},{value:`"id"`},{value:`"is"`},{value:`"as"`},{value:`"br"`},{value:`"hr"`},{value:`"li"`},{value:`"tr"`},{value:`"at"`},{value:`"by"`},{value:`"cx"`},{value:`"cy"`},{value:`"fr"`},{value:`"in"`},{value:`"to"`},{value:`"ua"`},{value:`"ar"`},{value:`"de"`},{value:`"es"`},{value:`"it"`},{value:`"pl"`},{value:`"pt"`},{value:`"ru"`},{value:`"nl"`},{value:`"ro"`},{value:`"sv"`},{value:`"tw"`},{value:`"hk"`},{value:`"ai"`},{value:`"af"`},{value:`"ax"`},{value:`"al"`},{value:`"dz"`},{value:`"ad"`},{value:`"ao"`},{value:`"aq"`},{value:`"ag"`},{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:`"be"`},{value:`"bz"`},{value:`"bj"`},{value:`"bm"`},{value:`"bt"`},{value:`"bo"`},{value:`"bq"`},{value:`"ba"`},{value:`"bw"`},{value:`"bv"`},{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:`"cl"`},{value:`"cn"`},{value:`"cp"`},{value:`"cc"`},{value:`"co"`},{value:`"km"`},{value:`"ck"`},{value:`"cr"`},{value:`"cu"`},{value:`"cw"`},{value:`"cz"`},{value:`"ci"`},{value:`"cd"`},{value:`"dk"`},{value:`"dg"`},{value:`"dj"`},{value:`"dm"`},{value:`"do"`},{value:`"eac"`},{value:`"ec"`},{value:`"eg"`},{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:`"gf"`},{value:`"pf"`},{value:`"tf"`},{value:`"ga"`},{value:`"es-ga"`},{value:`"gm"`},{value:`"ge"`},{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:`"hu"`},{value:`"ir"`},{value:`"iq"`},{value:`"ie"`},{value:`"im"`},{value:`"il"`},{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:`"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:`"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:`"pr"`},{value:`"qa"`},{value:`"cg"`},{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:`"lk"`},{value:`"ps"`},{value:`"sd"`},{value:`"sr"`},{value:`"sj"`},{value:`"se"`},{value:`"ch"`},{value:`"sy"`},{value:`"tj"`},{value:`"tz"`},{value:`"tl"`},{value:`"tg"`},{value:`"tk"`},{value:`"tt"`},{value:`"sh-ta"`},{value:`"tn"`},{value:`"tm"`},{value:`"tc"`},{value:`"tv"`},{value:`"ug"`},{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`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLButtonElement | null) => void`},{value:`RefObject<HTMLButtonElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{E as n,D as r,T as t};

package/dist/assets/{SingleSelectChips.stories-CTAvW0Y9.js → SingleSelectChips.stories-z43WCX3L.js}

@@ -1,4 +1,4 @@
-import{j as a,r as Ze}from"./iframe-B_74HtSc.js";import{S as p,a as g}from"./SingleSelectChips-CDtny-H7.js";import{F as L,a as Ye,b as Qe,c as aa}from"./TokyoUIAvailability7LateNight-BUCnoHXS.js";import{F as ta}from"./TokyoUIEmojiFrowning-DkxcBN-M.js";import{F as na}from"./index-DIqvfT2b.js";import{L as h}from"./LayoutFlex-DXRMJ9FH.js";import{T as V}from"./Text-DvShrljd.js";import{d as ia}from"./styled-components.browser.esm-BHxIJD2_.js";import{L as sa}from"./Link-BAFCJR3T.js";import{H as oa}from"./Heading-Cj8Si45g.js";import{T as H}from"./Tooltip-BiqKWYpo.js";import{B as la}from"./Button-C0Um_QuO.js";import"./preload-helper-Dp1pzeXC.js";import"./useControllableState-BB4EHwEp.js";import"./useStableCallback-D5P5kDx5.js";import"./createRequiredContext-B3Arn9-D.js";import"./Icon-CC0yjdx9.js";import"./text-accent-BQ9POoE5.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-MT6RlyNs.js";import"./componentNames-hc9KR2nX.js";import"./CountryFlag-D40CtNEa.js";import"./useMergeRefs-CFhXCqbA.js";import"./layout-relative.module-BIZVul8q.js";import"./text-centered-BEaaxMgl.js";import"./emotion-unitless.esm-BZwEwAnk.js";import"./useHostname-CbpnzdHv.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./index-CC6DAVyL.js";const{expect:e,within:c,fn:ra,userEvent:r,resetAllMocks:Xe,waitFor:T}=__STORYBOOK_MODULE_TEST__,Pa={title:"components/Chips/SingleSelectChips",component:g,subcomponents:{SingleSelectChipsItem:p},parameters:{layout:"padded"},args:{"aria-label":"Choose a skill",defaultValue:"vocabulary",onValueChange:ra(),items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"}]},beforeEach:()=>{Xe()}},v={play:async({canvasElement:i,step:t,args:n})=>{const s=c(i),o=s.getByRole("option",{name:"Vocabulary"}),l=s.getByRole("option",{name:"Speaking"}),u=s.getByRole("option",{name:"Listening"}),d=s.getByRole("option",{name:"Reading"});await t("Render chips with default value",async()=>{e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to select it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith("speaking"),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","true"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to deselect it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith(null),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","false"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")})}};let E;const y={render:function({defaultValue:t,...n}){const[s,o]=Ze.useState(t);E=o;const l=u=>{var d;o(u),(d=n.onValueChange)==null||d.call(n,u)};return a.jsx(g,{...n,value:s,onValueChange:l})},play:async({canvasElement:i,step:t,args:n})=>{const s=c(i),o=s.getByRole("option",{name:"Vocabulary"}),l=s.getByRole("option",{name:"Speaking"}),u=s.getByRole("option",{name:"Listening"}),d=s.getByRole("option",{name:"Reading"});await t("Render chips with default value",async()=>{e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to select it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith("speaking"),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","true"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Click on the chip to deselect it",async()=>{await r.click(l),e(n.onValueChange).toHaveBeenCalledWith(null),e(o).toHaveAttribute("aria-selected","false"),e(l).toHaveAttribute("aria-selected","false"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")}),await t("Change the value externally",async()=>{Xe(),E("vocabulary"),await T(()=>{e(n.onValueChange).not.toHaveBeenCalled(),e(o).toHaveAttribute("aria-selected","true"),e(l).toHaveAttribute("aria-selected","false"),e(u).toHaveAttribute("aria-selected","false"),e(d).toHaveAttribute("aria-selected","false")})})}},b={args:{items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking",disabled:!0},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"}]},play:async({canvasElement:i,step:t,args:n})=>{const s=c(i),o=s.getByRole("option",{name:"Speaking"}),l=s.getByRole("option",{name:"Vocabulary"});await t("Disabled chip must have disabled attribute",async()=>{e(o).toBeDisabled()}),await t("Disabled chip must not be selectable",async()=>{await r.click(o),e(n.onValueChange).not.toHaveBeenCalled(),e(l).toHaveAttribute("aria-selected","true"),e(o).toHaveAttribute("aria-selected","false")})}},m={args:{"aria-label":"Choose an availability",defaultValue:"morning",items:[{value:"morning",label:"Morning",icon:a.jsx(L,{})},{value:"afternoon",label:"Afternoon",icon:a.jsx(Ye,{})},{value:"evening",label:"Evening",icon:a.jsx(Qe,{})}]},play:async({canvasElement:i,step:t})=>{const s=c(i).getByRole("option",{name:"Morning"}),o=c(s).getByTestId("chip-icon");await t("Chip should render an icon when `icon` prop is passed",async()=>{e(o).toBeVisible()})}},w={args:{"aria-label":"Choose a language 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:i,step:t})=>{const s=c(i).getByRole("option",{name:/^English/}),o=c(s).getByTestId("chip-counter");await t("Chip should render a counter when `counter` prop is passed",async()=>{e(o).toBeVisible(),e(o).toHaveTextContent("1247")})}},f={args:{"aria-label":"Choose a country",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:i,step:t})=>{const s=c(i).getByRole("option",{name:"Ukraine"}),o=c(s).getByTestId("chip-country-flag");await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{e(o).toBeVisible()})}},S={args:{"aria-label":"Fancy chips",items:[{value:"counter+icon",label:"Icon + Counter",icon:a.jsx(L,{}),counter:1247},{value:"counter+flag",label:"Flag + Counter",countryFlagCode:"ua",counter:1247},{value:"icon+flag",label:"Icon + Flag",icon:a.jsx(L,{}),countryFlagCode:"ua"}]},play:async({canvasElement:i})=>{const t=c(i),n=c(t.getByRole("option",{name:"Icon + Flag"}));e(n.getByTestId("chip-icon")).toBeVisible(),e(n.queryByTestId("chip-country-flag")).not.toBeInTheDocument()}},C=["2025-08-15T10:00Z","2025-08-16T12:00Z","2025-08-17T14:00Z"],x={args:{orientation:"vertical","aria-label":"Choose a time slot",defaultValue:C[0],items:C.map(i=>({value:`${i}`,label:a.jsx(na,{weekday:"short",day:"numeric",month:"short",hour:"2-digit",minute:"2-digit",value:i}),dataset:{testid:i}}))},decorators:[i=>a.jsx("div",{style:{width:300,margin:"0 auto"},children:a.jsx(i,{})})],play:async({canvasElement:i,step:t})=>{const n=c(i),s=n.getByRole("listbox",{name:"Choose a time slot"}),o=n.getByTestId(C[0]),l=n.getByTestId(C[1]),u=n.getByTestId(C[2]);await t('Vertical chips should have `aria-orientation="vertical"`',async()=>{e(s).toHaveAttribute("aria-orientation","vertical")}),await t("Focus first chip",async()=>{o.focus()}),await t("Arrow down should focus second chip",async()=>{await r.keyboard("{ArrowDown}"),e(l).toHaveFocus()}),await t("Arrow down should focus third chip",async()=>{await r.keyboard("{ArrowDown}"),e(u).toHaveFocus()}),await t("Arrow down should focus first chip",async()=>{await r.keyboard("{ArrowDown}"),e(o).toHaveFocus()}),await t("Arrow up should focus third chip",async()=>{await r.keyboard("{ArrowUp}"),e(u).toHaveFocus()})}},k={render:i=>a.jsxs(h,{gap:"12",children:[a.jsx(g,{...i}),a.jsx(la,{variant:"tertiary",size:"small",onClick:()=>alert("Show all"),children:"Show all"})]})},ca=[{value:"just-starting",label:"I’m just starting"},{value:"basics",label:"I know the basics"},{value:"dont-know",label:"I don’t know"}],ua=[{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"},{value:"dont-know",label:"I don’t know"}],da=[{value:"morning",label:"Morning (6-12)",icon:a.jsx(L,{})},{value:"afternoon",label:"Afternoon (12-18)",icon:a.jsx(Ye,{})},{value:"evening",label:"Evening (18-0)",icon:a.jsx(Qe,{})},{value:"night",label:"Night (0-6)",icon:a.jsx(aa,{})},{value:"dont-know",label:"I don’t know"}],I={render:function(t){return a.jsxs(h,{direction:"column",alignItems:"stretch",gap:"64",children:[a.jsxs(h,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(V,{variant:"large-semibold",children:"What’s your current English level?"}),a.jsx(g,{"aria-label":"Selected English level",items:ca})]}),a.jsxs(h,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(V,{variant:"large-semibold",children:"When can you take lessons?"}),a.jsx(g,{"aria-label":"Selected day of the week",items:ua})]}),a.jsxs(h,{direction:"column",alignItems:"stretch",gap:"16",children:[a.jsx(V,{variant:"large-semibold",children:"What time of day works for you?"}),a.jsx(g,{"aria-label":"Selected time of day",items:da})]})]})},play:async({canvasElement:i,step:t})=>{const n=c(i),s=c(n.getByRole("listbox",{name:"Selected English level"})),o=c(n.getByRole("listbox",{name:"Selected day of the week"})),l=s.getByRole("option",{name:"I’m just starting"}),u=s.getByRole("option",{name:"I know the basics"}),d=s.getByRole("option",{name:"I don’t know"}),ea=o.getByRole("option",{name:"Monday"});await t("Tab once to enter first chips group",async()=>{await r.tab(),e(l).toHaveFocus()}),await t("Next tab should focus second chips group",async()=>{await r.tab(),e(ea).toHaveFocus()}),await t("Shift+Tab should focus first chips group again",async()=>{await r.tab({shift:!0}),e(l).toHaveFocus()}),await t("Right arrow should focus next chip in the group",async()=>{await r.keyboard("{ArrowRight}"),e(u).toHaveFocus()}),await t("Left arrow should focus previous chip in the group",async()=>{await r.keyboard("{ArrowLeft}"),e(l).toHaveFocus()}),await t("Left arrow should focus last chip if first chip is focused",async()=>{await r.keyboard("{ArrowLeft}"),e(d).toHaveFocus()}),await t("Right arrow should focus first chip if last chip is focused",async()=>{await r.keyboard("{ArrowRight}"),e(l).toHaveFocus()}),await t("Focus last chip",async()=>{await r.keyboard("{ArrowLeft}")}),await t("Tab to the next group",async()=>{await r.tab()}),await t("Shift+Tab to return to the first group, the last focused chip should be focused",async()=>{await r.tab({shift:!0}),e(d).toHaveFocus()})}},j=[{id:1,title:"Building Your First Vocabulary List",skills:["vocabulary"]},{id:2,title:"Effective Speaking Practice Techniques",skills:["speaking"]},{id:3,title:"Active Listening Strategies",skills:["listening"]},{id:4,title:"Speed Reading Methods",skills:["reading"]},{id:5,title:"Grammar Rules Made Simple",skills:["grammar"]},{id:6,title:"Combining Speaking and Vocabulary",skills:["speaking","vocabulary"]},{id:7,title:"Reading Comprehension and Vocabulary Building",skills:["reading","vocabulary"]},{id:8,title:"Listening and Speaking Integration",skills:["listening","speaking"]}],pa=ia.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-bm2vnOS2.js";import{n as o,t as s}from"./Heading-CEZfMm-F.js";import{n as c,t as l}from"./Button-DnVrHohm.js";import{r as ee,t as te}from"./lib-CXCPi5ID.js";import{n as u,r as ne,t as d}from"./SingleSelectChips-BuIHP3oW.js";import{n as re,t as f}from"./LayoutFlex-DdWp4cl3.js";import{n as p,t as ie}from"./Link-J-HUcV5T.js";import{n as m,t as h}from"./Tooltip-IQdlsINh.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as ae}from"./TokyoUIAvailability7LateNight-DffduFvP.js";import{n as oe,t as se}from"./TokyoUIEmojiFrowning-DEhH_o6k.js";import{r as ce,t as le}from"./styled-components.browser.esm-BqKZXl6d.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),ne(),_(),b(),v(),y(),oe(),ee(),re(),i(),ce(),p(),o(),m(),c(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/SingleSelectChips`,component:d,subcomponents:{SingleSelectChipsItem:u},parameters:{layout:`padded`},args:{"aria-label":`Choose a skill`,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(`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(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),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)(d,{...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(`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(`Click on the chip to deselect it`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith(null),T(i).toHaveAttribute(`aria-selected`,`false`),T(a).toHaveAttribute(`aria-selected`,`false`),T(o).toHaveAttribute(`aria-selected`,`false`),T(s).toHaveAttribute(`aria-selected`,`false`)}),await t(`Change the value externally`,async()=>{k(),N(`vocabulary`),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`,`false`)})})}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`},{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`),T(i).toHaveAttribute(`aria-selected`,`false`)})}},I={args:{"aria-label":`Choose an availability`,defaultValue:`morning`,items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{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":`Choose a language 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":`Choose a country`,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":`Choose a time slot`,defaultValue:B[0],items:B.map(e=>({value:`${e}`,label:(0,w.jsx)(te,{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:`Choose a time slot`}),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)(f,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`just-starting`,label:`I’m just starting`},{value:`basics`,label:`I know the basics`},{value:`dont-know`,label:`I don’t know`}],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`},{value:`dont-know`,label:`I don’t know`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(ae,{})},{value:`dont-know`,label:`I don’t know`}],K={render:function(e){return(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What’s your current English level?`}),(0,w.jsx)(d,{"aria-label":`Selected English level`,items:U})]}),(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`When can you take lessons?`}),(0,w.jsx)(d,{"aria-label":`Selected day of the week`,items:W})]}),(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What time of day works for you?`}),(0,w.jsx)(d,{"aria-label":`Selected time of day`,items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=E(n.getByRole(`listbox`,{name:`Selected English level`})),i=E(n.getByRole(`listbox`,{name:`Selected day of the week`})),a=r.getByRole(`option`,{name:`I’m just starting`}),o=r.getByRole(`option`,{name:`I know the basics`}),s=r.getByRole(`option`,{name:`I don’t know`}),c=i.getByRole(`option`,{name:`Monday`});await t(`Tab once to enter first chips group`,async()=>{await O.tab(),T(a).toHaveFocus()}),await t(`Next tab should focus second chips group`,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=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],J=le.ul`
     all: unset;
     list-style: none;
     display: flex;
@@ -8,7 +8,7 @@ import{j as a,r as Ze}from"./iframe-B_74HtSc.js";import{S as p,a as g}from"./Sin
     > li {
         display: contents;
     }
-`,A={render:function(t){const[n,s]=Ze.useState(null),o=n?j.filter(l=>l.skills.includes(n)):j;return a.jsxs(h,{direction:"column",gap:"24",children:[a.jsxs(h,{direction:"column",gap:"8",children:[a.jsx(oa,{tag:"h2",variant:"large",children:"Articles"}),a.jsx(g,{"aria-label":"Filter by skill","aria-controls":"results",value:n,onValueChange:s,items:[{value:"vocabulary",label:"Vocabulary"},{value:"speaking",label:"Speaking"},{value:"listening",label:"Listening"},{value:"reading",label:"Reading"},{value:"grammar",label:"Grammar"}]})]}),a.jsx("section",{id:"results","aria-label":"Filtered articles",children:a.jsx(pa,{children:o.map(l=>a.jsx("li",{children:a.jsx(sa,{href:"#",children:l.title})},l.id))})})]})},play:async({canvasElement:i,step:t})=>{const s=c(i).getByRole("listbox",{name:"Filter by skill"});await t("Chips element should have aria attributes forwarded",async()=>{e(s).toHaveAttribute("aria-label","Filter by skill"),e(s).toHaveAttribute("aria-controls","results")})}},F={args:{"aria-label":"Select a skill",children:a.jsxs(a.Fragment,{children:[a.jsx(H,{content:"I want to learn vocabulary",dataset:{testid:"vocabulary-tooltip"},children:a.jsx(p,{value:"vocabulary",children:"Vocabulary"})}),a.jsx(H,{content:"I want to improve my speaking skills",dataset:{testid:"speaking-tooltip"},children:a.jsx(p,{value:"speaking",children:"Speaking"})}),a.jsx(H,{content:"I want to improve my listening skills",dataset:{testid:"listening-tooltip"},children:a.jsx(p,{value:"listening",children:"Listening"})}),a.jsx(H,{content:"I want to improve my reading skills",dataset:{testid:"reading-tooltip"},children:a.jsx(p,{value:"reading",children:"Reading"})})]}),items:void 0},play:async({canvasElement:i,step:t})=>{const n=c(i);await t("Tab to the first chip",async()=>{await r.tab(),await T(()=>{e(n.getByTestId("vocabulary-tooltip")).toBeVisible()})}),await t("Arrow right to focus next chip",async()=>{await r.keyboard("{ArrowRight}"),await T(()=>{e(n.getByTestId("speaking-tooltip")).toBeVisible()})}),await t("Hover third chip",async()=>{await r.hover(n.getByRole("option",{name:"Listening"})),await T(()=>{e(n.getByTestId("listening-tooltip")).toBeVisible()})})}},R={tags:["!autodocs"],render:function(){return a.jsxs(h,{gap:"12",children:[a.jsxs(g,{"aria-label":"Chips states",value:"selected",children:[a.jsx(p,{value:"rest",children:"Rest"}),a.jsx(p,{value:"focus",dsInternalSimulation:"focus",children:"Focus"}),a.jsx(p,{value:"hover",dsInternalSimulation:"hover",children:"Hover"}),a.jsx(p,{value:"active",dsInternalSimulation:"active",children:"Active"}),a.jsx(p,{value:"disabled",disabled:!0,children:"Disabled"}),a.jsx(p,{value:"selected",children:"Selected"})]}),a.jsx(g,{"aria-label":"Chips states",value:"selected",children:a.jsx(p,{value:"selected",dsInternalSimulation:"focus",children:"Selected focus"})}),a.jsx(g,{"aria-label":"Chips states",value:"selected",children:a.jsx(p,{value:"selected",dsInternalSimulation:"hover",children:"Selected hover"})}),a.jsx(g,{"aria-label":"Chips states",value:"selected",children:a.jsx(p,{value:"selected",dsInternalSimulation:"active",children:"Selected active"})})]})}},B={decorators:[i=>a.jsx("div",{style:{maxWidth:150,margin:"0 auto"},children:a.jsx(i,{})})],args:{"aria-label":"Long label",items:[{value:"long",icon:ta,label:"I'm way too long to be a chip label, I don't know what to do with myself"}]}};var W,D,M,U,O;v.parameters={...v.parameters,docs:{...(W=v.parameters)==null?void 0:W.docs,source:{originalSource:`{
+`,Y={render:function(e){let[t,n]=(0,C.useState)(null),r=t?q.filter(e=>e.skills.includes(t)):q;return(0,w.jsxs)(f,{direction:`column`,gap:`24`,children:[(0,w.jsxs)(f,{direction:`column`,gap:`8`,children:[(0,w.jsx)(s,{tag:`h2`,variant:`large`,children:`Articles`}),(0,w.jsx)(d,{"aria-label":`Filter by skill`,"aria-controls":`results`,value:t,onValueChange:n,items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`grammar`,label:`Grammar`}]})]}),(0,w.jsx)(`section`,{id:`results`,"aria-label":`Filtered articles`,children:(0,w.jsx)(J,{children:r.map(e=>(0,w.jsx)(`li`,{children:(0,w.jsx)(ie,{href:`#`,children:e.title})},e.id))})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e).getByRole(`listbox`,{name:`Filter by skill`});await t(`Chips element should have aria attributes forwarded`,async()=>{T(n).toHaveAttribute(`aria-label`,`Filter by skill`),T(n).toHaveAttribute(`aria-controls`,`results`)})}},X={args:{"aria-label":`Select a skill`,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(h,{content:`I want to learn vocabulary`,dataset:{testid:`vocabulary-tooltip`},children:(0,w.jsx)(u,{value:`vocabulary`,children:`Vocabulary`})}),(0,w.jsx)(h,{content:`I want to improve my speaking skills`,dataset:{testid:`speaking-tooltip`},children:(0,w.jsx)(u,{value:`speaking`,children:`Speaking`})}),(0,w.jsx)(h,{content:`I want to improve my listening skills`,dataset:{testid:`listening-tooltip`},children:(0,w.jsx)(u,{value:`listening`,children:`Listening`})}),(0,w.jsx)(h,{content:`I want to improve my reading skills`,dataset:{testid:`reading-tooltip`},children:(0,w.jsx)(u,{value:`reading`,children:`Reading`})})]}),items:void 0},play:async({canvasElement:e,step:t})=>{let n=E(e);await t(`Tab to the first chip`,async()=>{await O.tab(),await A(()=>{T(n.getByTestId(`vocabulary-tooltip`)).toBeVisible()})}),await t(`Arrow right to focus next chip`,async()=>{await O.keyboard(`{ArrowRight}`),await A(()=>{T(n.getByTestId(`speaking-tooltip`)).toBeVisible()})}),await t(`Hover third chip`,async()=>{await O.hover(n.getByRole(`option`,{name:`Listening`})),await A(()=>{T(n.getByTestId(`listening-tooltip`)).toBeVisible()})})}},Z={tags:[`!autodocs`],render:function(){return(0,w.jsxs)(f,{gap:`12`,children:[(0,w.jsxs)(d,{"aria-label":`Chips states`,value:`selected`,children:[(0,w.jsx)(u,{value:`rest`,children:`Rest`}),(0,w.jsx)(u,{value:`focus`,dsInternalSimulation:`focus`,children:`Focus`}),(0,w.jsx)(u,{value:`hover`,dsInternalSimulation:`hover`,children:`Hover`}),(0,w.jsx)(u,{value:`active`,dsInternalSimulation:`active`,children:`Active`}),(0,w.jsx)(u,{value:`disabled`,disabled:!0,children:`Disabled`}),(0,w.jsx)(u,{value:`selected`,children:`Selected`})]}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dsInternalSimulation:`focus`,children:`Selected focus`})}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dsInternalSimulation:`hover`,children:`Selected hover`})}),(0,w.jsx)(d,{"aria-label":`Chips states`,value:`selected`,children:(0,w.jsx)(u,{value:`selected`,dsInternalSimulation:`active`,children:`Selected active`})})]})}},Q={decorators:[e=>(0,w.jsx)(`div`,{style:{maxWidth:150,margin:`0 auto`},children:(0,w.jsx)(e,{})})],args:{"aria-label":`Long label`,items:[{value:`long`,icon:se,label:`I'm way too long to be a chip label, I don't know what to do with myself`}]}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,
@@ -50,7 +50,7 @@ import{j as a,r as Ze}from"./iframe-B_74HtSc.js";import{S as p,a as g}from"./Sin
       expect(reading).toHaveAttribute('aria-selected', 'false');
     });
   }
-}`,...(M=(D=v.parameters)==null?void 0:D.docs)==null?void 0:M.source},description:{story:"Basic usage with default value. The component manages its own state internally.",...(O=(U=v.parameters)==null?void 0:U.docs)==null?void 0:O.description}}};var _,q,K,P,z;y.parameters={...y.parameters,docs:{...(_=y.parameters)==null?void 0:_.docs,source:{originalSource:`{
+}`,...M.parameters?.docs?.source},description:{story:`Basic usage with default value. The component manages its own state internally.`,...M.parameters?.docs?.description}}},P.parameters={...P.parameters,docs:{...P.parameters?.docs,source:{originalSource:`{
   render: function StoryRender({
     defaultValue,
     ...args
@@ -115,7 +115,7 @@ import{j as a,r as Ze}from"./iframe-B_74HtSc.js";import{S as p,a as g}from"./Sin
       });
     });
   }
-}`,...(K=(q=y.parameters)==null?void 0:q.docs)==null?void 0:K.source},description:{story:"Controlled usage where you manage the state externally.",...(z=(P=y.parameters)==null?void 0:P.docs)==null?void 0:z.description}}};var J,$,G,N,Z;b.parameters={...b.parameters,docs:{...(J=b.parameters)==null?void 0:J.docs,source:{originalSource:`{
+}`,...P.parameters?.docs?.source},description:{story:`Controlled usage where you manage the state externally.`,...P.parameters?.docs?.description}}},F.parameters={...F.parameters,docs:{...F.parameters?.docs,source:{originalSource:`{
   args: {
     items: [{
       value: 'vocabulary',
@@ -154,7 +154,7 @@ import{j as a,r as Ze}from"./iframe-B_74HtSc.js";import{S as p,a as g}from"./Sin
       expect(speaking).toHaveAttribute('aria-selected', 'false');
     });
   }
-}`,...(G=($=b.parameters)==null?void 0:$.docs)==null?void 0:G.source},description:{story:"Some chips can be disabled to prevent user interaction.",...(Z=(N=b.parameters)==null?void 0:N.docs)==null?void 0:Z.description}}};var Y,Q,X,ee,ae;m.parameters={...m.parameters,docs:{...(Y=m.parameters)==null?void 0:Y.docs,source:{originalSource:`{
+}`,...F.parameters?.docs?.source},description:{story:`Some chips can be disabled to prevent user interaction.`,...F.parameters?.docs?.description}}},I.parameters={...I.parameters,docs:{...I.parameters?.docs,source:{originalSource:`{
   args: {
     'aria-label': 'Choose an availability',
     defaultValue: 'morning',
@@ -185,8 +185,8 @@ import{j as a,r as Ze}from"./iframe-B_74HtSc.js";import{S as p,a as g}from"./Sin
       expect(morningIcon).toBeVisible();
     });
   }
-}`,...(X=(Q=m.parameters)==null?void 0:Q.docs)==null?void 0:X.source},description:{story:`Chips can include icons to provide visual context and improve scannability.
-Icons appear on the left side of the chip label and help users quickly identify options.`,...(ae=(ee=m.parameters)==null?void 0:ee.docs)==null?void 0:ae.description}}};var te,ne,ie,se,oe;w.parameters={...w.parameters,docs:{...(te=w.parameters)==null?void 0:te.docs,source:{originalSource:`{
+}`,...I.parameters?.docs?.source},description:{story:`Chips can include icons to provide visual context and improve scannability.
+Icons appear on the left side of the chip label and help users quickly identify options.`,...I.parameters?.docs?.description}}},L.parameters={...L.parameters,docs:{...L.parameters?.docs,source:{originalSource:`{
   args: {
     'aria-label': 'Choose a language to learn',
     defaultValue: 'english',
@@ -230,9 +230,9 @@ Icons appear on the left side of the chip label and help users quickly identify
       expect(englishCounter).toHaveTextContent('1247');
     });
   }
-}`,...(ie=(ne=w.parameters)==null?void 0:ne.docs)==null?void 0:ie.source},description:{story:`Chips can display numeric counters to show quantities, popularity, or other metrics.
+}`,...L.parameters?.docs?.source},description:{story:`Chips can display numeric counters to show quantities, popularity, or other metrics.
 Counters appear on the right side of the chip label and are useful for
-showing search results count, available tutors, or similar quantitative data.`,...(oe=(se=w.parameters)==null?void 0:se.docs)==null?void 0:oe.description}}};var le,re,ce,ue,de;f.parameters={...f.parameters,docs:{...(le=f.parameters)==null?void 0:le.docs,source:{originalSource:`{
+showing search results count, available tutors, or similar quantitative data.`,...L.parameters?.docs?.description}}},R.parameters={...R.parameters,docs:{...R.parameters?.docs,source:{originalSource:`{
   args: {
     'aria-label': 'Choose a country',
     defaultValue: 'ua',
@@ -279,9 +279,9 @@ showing search results count, available tutors, or similar quantitative data.`,.
       expect(uaFlag).toBeVisible();
     });
   }
-}`,...(ce=(re=f.parameters)==null?void 0:re.docs)==null?void 0:ce.source},description:{story:`Chips can display country flags using ISO country codes.
+}`,...R.parameters?.docs?.source},description:{story:`Chips can display country flags using ISO country codes.
 Flags appear on the left side and provide instant visual recognition
-for country or language selection interfaces.`,...(de=(ue=f.parameters)==null?void 0:ue.docs)==null?void 0:de.description}}};var pe,ge,he,ve,ye;S.parameters={...S.parameters,docs:{...(pe=S.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+for country or language selection interfaces.`,...R.parameters?.docs?.description}}},z.parameters={...z.parameters,docs:{...z.parameters?.docs,source:{originalSource:`{
   args: {
     'aria-label': 'Fancy chips',
     items: [{
@@ -311,8 +311,8 @@ for country or language selection interfaces.`,...(de=(ue=f.parameters)==null?vo
     expect(chip.getByTestId('chip-icon')).toBeVisible();
     expect(chip.queryByTestId('chip-country-flag')).not.toBeInTheDocument();
   }
-}`,...(he=(ge=S.parameters)==null?void 0:ge.docs)==null?void 0:he.source},description:{story:`Counter can be combined with icon or flag.
-However, if you pass icon and flag together, only icon will be displayed.`,...(ye=(ve=S.parameters)==null?void 0:ve.docs)==null?void 0:ye.description}}};var be,me,we,fe,Se;x.parameters={...x.parameters,docs:{...(be=x.parameters)==null?void 0:be.docs,source:{originalSource:`{
+}`,...z.parameters?.docs?.source},description:{story:`Counter can be combined with icon or flag.
+However, if you pass icon and flag together, only icon will be displayed.`,...z.parameters?.docs?.description}}},V.parameters={...V.parameters,docs:{...V.parameters?.docs,source:{originalSource:`{
   args: {
     orientation: 'vertical',
     'aria-label': 'Choose a time slot',
@@ -365,16 +365,16 @@ However, if you pass icon and flag together, only icon will be displayed.`,...(y
       expect(thirdChip).toHaveFocus();
     });
   }
-}`,...(we=(me=x.parameters)==null?void 0:me.docs)==null?void 0:we.source},description:{story:`Chips can be arranged vertically instead of horizontally.
+}`,...V.parameters?.docs?.source},description:{story:`Chips can be arranged vertically instead of horizontally.
 This layout works well in narrow containers or when you want
-to emphasize a vertical flow in your design.`,...(Se=(fe=x.parameters)==null?void 0:fe.docs)==null?void 0:Se.description}}};var Ce,xe,ke,Ie,Ae;k.parameters={...k.parameters,docs:{...(Ce=k.parameters)==null?void 0:Ce.docs,source:{originalSource:`{
+to emphasize a vertical flow in your design.`,...V.parameters?.docs?.description}}},H.parameters={...H.parameters,docs:{...H.parameters?.docs,source:{originalSource:`{
   render: args => <LayoutFlex gap="12">
             <SingleSelectChips {...args} />
             <Button variant="tertiary" size="small" onClick={() => alert('Show all')}>
                 Show all
             </Button>
         </LayoutFlex>
-}`,...(ke=(xe=k.parameters)==null?void 0:xe.docs)==null?void 0:ke.source},description:{story:"Chips are intended only for selection. To assign secondary actions, combine chips with a button.",...(Ae=(Ie=k.parameters)==null?void 0:Ie.docs)==null?void 0:Ae.description}}};var Fe,Be,He,Re,Te;I.parameters={...I.parameters,docs:{...(Fe=I.parameters)==null?void 0:Fe.docs,source:{originalSource:`{
+}`,...H.parameters?.docs?.source},description:{story:`Chips are intended only for selection. To assign secondary actions, combine chips with a button.`,...H.parameters?.docs?.description}}},K.parameters={...K.parameters,docs:{...K.parameters?.docs,source:{originalSource:`{
   // unused \`args\` makes story source code readable 🤷‍♂️
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: function StoryRender(_args) {
@@ -461,7 +461,7 @@ to emphasize a vertical flow in your design.`,...(Se=(fe=x.parameters)==null?voi
       expect(levelDontKnow).toHaveFocus();
     });
   }
-}`,...(He=(Be=I.parameters)==null?void 0:Be.docs)==null?void 0:He.source},description:{story:`The **roving tabindex pattern** is a keyboard navigation technique for grouped interactive elements. Instead of tabbing through each item individually, users:
+}`,...K.parameters?.docs?.source},description:{story:`The **roving tabindex pattern** is a keyboard navigation technique for grouped interactive elements. Instead of tabbing through each item individually, users:
 
 - **Tab once** to enter the component
 - **Use arrow keys** to navigate between items within the group
@@ -469,7 +469,7 @@ to emphasize a vertical flow in your design.`,...(Se=(fe=x.parameters)==null?voi
 
 This creates a smooth, efficient navigation experience - especially useful for components like chip groups where you want to browse options quickly without getting stuck in a "tab trap."
 
-{@link https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex Learn more about roving tabindex pattern}`,...(Te=(Re=I.parameters)==null?void 0:Re.docs)==null?void 0:Te.description}}};var Le,Ve,Ee,je,We;A.parameters={...A.parameters,docs:{...(Le=A.parameters)==null?void 0:Le.docs,source:{originalSource:`{
+{@link https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex Learn more about roving tabindex pattern}`,...K.parameters?.docs?.description}}},Y.parameters={...Y.parameters,docs:{...Y.parameters?.docs,source:{originalSource:`{
   // unused \`args\` makes story source code readable 🤷‍♂️
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   render: function StoryRender(_args) {
@@ -519,7 +519,7 @@ This creates a smooth, efficient navigation experience - especially useful for c
       expect(chipsList).toHaveAttribute('aria-controls', 'results');
     });
   }
-}`,...(Ee=(Ve=A.parameters)==null?void 0:Ve.docs)==null?void 0:Ee.source},description:{story:"For accessibility, always provide an `aria-label` to describe the chip group's purpose.\nIf the chips control other elements on the page, use `aria-controls` with the target element's ID.",...(We=(je=A.parameters)==null?void 0:je.docs)==null?void 0:We.description}}};var De,Me,Ue,Oe,_e;F.parameters={...F.parameters,docs:{...(De=F.parameters)==null?void 0:De.docs,source:{originalSource:`{
+}`,...Y.parameters?.docs?.source},description:{story:"For accessibility, always provide an `aria-label` to describe the chip group's purpose.\nIf the chips control other elements on the page, use `aria-controls` with the target element's ID.",...Y.parameters?.docs?.description}}},X.parameters={...X.parameters,docs:{...X.parameters?.docs,source:{originalSource:`{
   args: {
     'aria-label': 'Select a skill',
     children: <>
@@ -572,7 +572,7 @@ This creates a smooth, efficient navigation experience - especially useful for c
       });
     });
   }
-}`,...(Ue=(Me=F.parameters)==null?void 0:Me.docs)==null?void 0:Ue.source},description:{story:"If you need to wrap individual chips in a component like [\\<Tooltip/>](/docs/components-tooltip--docs),\nyou can use render `<SingleSelectChipsItem/>` as children.",...(_e=(Oe=F.parameters)==null?void 0:Oe.docs)==null?void 0:_e.description}}};var qe,Ke,Pe;R.parameters={...R.parameters,docs:{...(qe=R.parameters)==null?void 0:qe.docs,source:{originalSource:`{
+}`,...X.parameters?.docs?.source},description:{story:"If you need to wrap individual chips in a component like [\\<Tooltip/>](/docs/components-tooltip--docs),\nyou can use render `<SingleSelectChipsItem/>` as children.",...X.parameters?.docs?.description}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   render: function StoryRender() {
     return <LayoutFlex gap="12">
@@ -609,7 +609,7 @@ This creates a smooth, efficient navigation experience - especially useful for c
                 </SingleSelectChips>
             </LayoutFlex>;
   }
-}`,...(Pe=(Ke=R.parameters)==null?void 0:Ke.docs)==null?void 0:Pe.source}}};var ze,Je,$e,Ge,Ne;B.parameters={...B.parameters,docs:{...(ze=B.parameters)==null?void 0:ze.docs,source:{originalSource:`{
+}`,...Z.parameters?.docs?.source}}},Q.parameters={...Q.parameters,docs:{...Q.parameters?.docs,source:{originalSource:`{
   decorators: [Story => <div style={{
     maxWidth: 150,
     margin: '0 auto'
@@ -624,4 +624,4 @@ This creates a smooth, efficient navigation experience - especially useful for c
       label: "I'm way too long to be a chip label, I don't know what to do with myself"
     }]
   }
-}`,...($e=(Je=B.parameters)==null?void 0:Je.docs)==null?void 0:$e.source},description:{story:"Please, don't use long labels for chips.",...(Ne=(Ge=B.parameters)==null?void 0:Ge.docs)==null?void 0:Ne.description}}};const za=["Uncontrolled","Controlled","Disabled","WithIcons","WithCounter","WithFlags","CombiningCounterWithIconOrFlag","Vertical","CombinationWithButton","RovingTabindex","Accessibility","WithTooltips","States","LongLabel"];export{A as Accessibility,k as CombinationWithButton,S as CombiningCounterWithIconOrFlag,y as Controlled,b as Disabled,B as LongLabel,I as RovingTabindex,R as States,v as Uncontrolled,x as Vertical,w as WithCounter,f as WithFlags,m as WithIcons,F as WithTooltips,za as __namedExportsOrder,Pa as default};
+}`,...Q.parameters?.docs?.source},description:{story:`Please, don't use long labels for chips.`,...Q.parameters?.docs?.description}}},$=[`Uncontrolled`,`Controlled`,`Disabled`,`WithIcons`,`WithCounter`,`WithFlags`,`CombiningCounterWithIconOrFlag`,`Vertical`,`CombinationWithButton`,`RovingTabindex`,`Accessibility`,`WithTooltips`,`States`,`LongLabel`]}))();export{Y as Accessibility,H as CombinationWithButton,z as CombiningCounterWithIconOrFlag,P as Controlled,F as Disabled,Q as LongLabel,K as RovingTabindex,Z as States,M as Uncontrolled,V as Vertical,L as WithCounter,R as WithFlags,I as WithIcons,X as WithTooltips,$ as __namedExportsOrder,j as default};

package/dist/assets/Slider-BJ8Eqvyw.css

@@ -0,0 +1 @@
+.root__Eki38{height:var(--7789ee);-webkit-user-select:none;user-select:none;touch-action:none;cursor:grab;align-items:center;display:flex;position:relative}.track__zosW2{background-color:var(--c03289);height:var(--53860b);flex-grow:1;position:relative}.range__Awc-3{background-color:var(--95b129);height:var(--53860b);position:absolute}.thumb__IV11l{width:var(--7789ee);height:var(--7789ee);background-color:var(--3546c3);border:var(--05dd73) solid var(--95b129);border-radius:var(--fa4b1a);display:block}.thumb__IV11l:active{cursor:grabbing;cursor:-moz-grabbing;cursor:-webkit-grabbing}.thumb__IV11l:focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}

package/dist/assets/Slider-BjEfhJ_o.js

@@ -0,0 +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{C as o,E as s,T as c,_ as l,w as u}from"./iframe-f34VuKy-.js";import{n as d,t as f}from"./dist-Cc1j9Pjk.js";var p,m,h,g,_,v=t((()=>{p=`root__Eki38`,m=`track__zosW2`,h=`range__Awc-3`,g=`thumb__IV11l`,_={root:p,track:m,range:h,thumb:g}}));function y(e){let t={};return Object.entries(e).forEach(([e,n])=>{switch(e){case`id`:case`aria-label`:case`aria-labelledby`:case`aria-describedby`:case`aria-invalid`:case`aria-errormessage`:t[e]=n}}),t}var b,x,S,C=t((()=>{b=e(n(),1),l(),v(),i(),f(),x=a(),S=(0,b.forwardRef)(function({value:e,defaultValue:t=0,onValueChange:n,min:i=0,max:a=100,step:l=1,dataset:f,...p},m){let h=r(f,{preplyDsComponent:d.Slider}),g=n?e=>n(e[0]):void 0;return(0,x.jsxs)(u,{ref:m,...h,className:_.root,value:e===void 0?void 0:[e],defaultValue:t===void 0?void 0:[t],onValueChange:g,min:i,max:a,step:l,children:[(0,x.jsx)(s,{className:_.track,children:(0,x.jsx)(o,{className:_.range})}),(0,x.jsx)(c,{...y(p),className:_.thumb})]})});try{y.displayName=`filterThumbProps`,y.__docgenInfo={description:``,displayName:`filterThumbProps`,props:{}}}catch{}try{S.displayName=`Slider`,S.__docgenInfo={description:`A slider input that allows users to select a single value from a range.`,displayName:`Slider`,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 slider.\nMust be used in conjunction with `onValueChange`.",name:`value`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},defaultValue:{defaultValue:{value:`0`},description:`The value of the slider when initially rendered.
+Use when you do not need to control the state of the slider.`,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onValueChange:{defaultValue:null,description:`Event handler called when the value changes.`,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: number) => void`}]}},name:{defaultValue:null,description:`The name of the 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 slider.`,name:`min`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},max:{defaultValue:{value:`100`},description:`The maximum value for the 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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`(instance: HTMLSpanElement | null) => void`},{value:`RefObject<HTMLSpanElement>`}]}},key:{defaultValue:null,description:``,name:`key`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`bigint`}]}}}}}catch{}}));export{v as a,_ as i,y as n,C as r,S as t};

package/dist/assets/Slider.stories-OZrQotEf.js

@@ -0,0 +1,69 @@
+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"./Slider-BjEfhJ_o.js";var o,s,c,l,u,d,f,p,m,h,g,_,v;t((()=>{o=e(n(),1),i(),s=r(),{action:c}=__STORYBOOK_MODULE_ACTIONS__,{expect:l,fn:u,userEvent:d,within:f}=__STORYBOOK_MODULE_TEST__,p=u(c(`change`)),m={title:`Components/Slider`,component:a,decorators:[e=>(0,s.jsx)(`div`,{style:{padding:`32px`,maxWidth:`400px`},children:(0,s.jsx)(e,{})})],args:{"aria-label":`Sample`,onValueChange:p}},h={play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuemin`,`0`),l(n).toHaveAttribute(`aria-valuemax`,`100`),l(n).toHaveAttribute(`aria-valuenow`,`0`)}),await t(`Move thumb via keyboard interactions`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`1`),l(p).toBeCalledWith(1)})}},g={args:{defaultValue:50},play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuemin`,`0`),l(n).toHaveAttribute(`aria-valuemax`,`100`),l(n).toHaveAttribute(`aria-valuenow`,`50`)}),await t(`Move thumb via keyboard interactions`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`51`),l(p).toBeCalledWith(51)})}},_={render:function(e){let[t,n]=(0,o.useState)(50);return(0,s.jsx)(a,{...e,value:t,onValueChange:t=>{n(t),e.onValueChange?.(t)}})},play:async({canvasElement:e,step:t})=>{let n=f(e).getByRole(`slider`);await t(`Initial controlled state`,async()=>{l(n).toBeInTheDocument(),l(n).toHaveAttribute(`aria-valuenow`,`50`)}),await t(`Move thumb and verify value updates`,async()=>{n.focus(),await d.keyboard(`{ArrowRight}`),l(n).toHaveAttribute(`aria-valuenow`,`51`),l(p).toBeCalledWith(51)})}},h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const slider = canvas.getByRole('slider');
+    await step('Initial state', async () => {
+      expect(slider).toBeInTheDocument();
+      expect(slider).toHaveAttribute('aria-valuemin', '0');
+      expect(slider).toHaveAttribute('aria-valuemax', '100');
+      expect(slider).toHaveAttribute('aria-valuenow', '0');
+    });
+    await step('Move thumb via keyboard interactions', async () => {
+      slider.focus();
+      await userEvent.keyboard('{ArrowRight}');
+      expect(slider).toHaveAttribute('aria-valuenow', '1');
+      expect(onValueChange).toBeCalledWith(1);
+    });
+  }
+}`,...h.parameters?.docs?.source}}},g.parameters={...g.parameters,docs:{...g.parameters?.docs,source:{originalSource:`{
+  args: {
+    defaultValue: 50
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const slider = canvas.getByRole('slider');
+    await step('Initial state', async () => {
+      expect(slider).toBeInTheDocument();
+      expect(slider).toHaveAttribute('aria-valuemin', '0');
+      expect(slider).toHaveAttribute('aria-valuemax', '100');
+      expect(slider).toHaveAttribute('aria-valuenow', '50');
+    });
+    await step('Move thumb via keyboard interactions', async () => {
+      slider.focus();
+      await userEvent.keyboard('{ArrowRight}');
+      expect(slider).toHaveAttribute('aria-valuenow', '51');
+      expect(onValueChange).toBeCalledWith(51);
+    });
+  }
+}`,...g.parameters?.docs?.source}}},_.parameters={..._.parameters,docs:{..._.parameters?.docs,source:{originalSource:`{
+  render: function Render(args) {
+    const [value, setValue] = useState(50);
+    return <Slider {...args} value={value} onValueChange={value => {
+      setValue(value);
+      args.onValueChange?.(value);
+    }} />;
+  },
+  play: async ({
+    canvasElement,
+    step
+  }) => {
+    const canvas = within(canvasElement);
+    const slider = canvas.getByRole('slider');
+    await step('Initial controlled state', async () => {
+      expect(slider).toBeInTheDocument();
+      expect(slider).toHaveAttribute('aria-valuenow', '50');
+    });
+    await step('Move thumb and verify value updates', async () => {
+      slider.focus();
+      await userEvent.keyboard('{ArrowRight}');
+      expect(slider).toHaveAttribute('aria-valuenow', '51');
+      expect(onValueChange).toBeCalledWith(51);
+    });
+  }
+}`,..._.parameters?.docs?.source}}},v=[`Uncontrolled`,`UncontrolledWithDefault`,`Controlled`]}))();export{_ as Controlled,h as Uncontrolled,g as UncontrolledWithDefault,v as __namedExportsOrder,m as default};

package/dist/assets/Spinner-9IaQuPm2.js

@@ -0,0 +1 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{b as r,ct as i,t as a,w as o,x as s,y as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";var u,d,f,p=t((()=>{u=`Spinner__XvUpd`,d=`spin__iEg7N`,f={Spinner:u,"Spinner--size-default":`Spinner--size-default__mYug6`,"Spinner--size-large":`Spinner--size-large__w-57e`,"Spinner--narrow-l--size-default":`Spinner--narrow-l--size-default__Y1CEQ`,"Spinner--narrow-l--size-large":`Spinner--narrow-l--size-large__10-GA`,"Spinner--medium-s--size-default":`Spinner--medium-s--size-default__sGEJB`,"Spinner--medium-s--size-large":`Spinner--medium-s--size-large__z3YD6`,"Spinner--medium-l--size-default":`Spinner--medium-l--size-default__Gc7Yo`,"Spinner--medium-l--size-large":`Spinner--medium-l--size-large__a1mSJ`,"Spinner--wide-s--size-default":`Spinner--wide-s--size-default__n3cXu`,"Spinner--wide-s--size-large":`Spinner--wide-s--size-large__kdEFZ`,"Spinner--wide-l--size-default":`Spinner--wide-l--size-default__44Cv-`,"Spinner--wide-l--size-large":`Spinner--wide-l--size-large__uxzU7`,"Spinner--static":`Spinner--static__Jjv6L`,"Spinner--animated":`Spinner--animated__gi5FM`,spin:d}})),m,h,g,_,v=t((()=>{m=e(n()),h=e(n()),g=({title:e,titleId:t,...n},r)=>m.createElement(`svg`,{viewBox:`0 0 24 24`,xmlns:`http://www.w3.org/2000/svg`,ref:r,"aria-labelledby":t,...n},e?m.createElement(`title`,{id:t},e):null,m.createElement(`path`,{fillRule:`evenodd`,clipRule:`evenodd`,d:`M3 12a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm7 0a2 2 0 1 1 4 0 2 2 0 0 1-4 0Zm9-2a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z`})),_=(0,h.forwardRef)(g)})),y,b,x,S,C=t((()=>{y=e(n()),b=e(n()),x=({title:e,titleId:t,...n},r)=>y.createElement(`svg`,{xmlns:`http://www.w3.org/2000/svg`,viewBox:`0 0 32 32`,fill:`none`,ref:r,"aria-labelledby":t,...n},e?y.createElement(`title`,{id:t},e):null,y.createElement(`g`,{clipPath:`url(#clip0_1785_4234)`},y.createElement(`path`,{d:`M30 15.9996C30.0002 18.5815 29.2863 21.1132 27.9373 23.3148C26.5884 25.5163 24.6569 27.302 22.3564 28.4743C20.0559 29.6465 17.476 30.1598 14.902 29.9573C12.328 29.7548 9.86014 28.8444 7.77126 27.3269C5.68238 25.8093 4.05386 23.7436 3.06576 21.3582C2.07765 18.9728 1.76846 16.3606 2.17236 13.8104C2.57627 11.2602 3.67753 8.8714 5.35439 6.90808C7.03126 4.94475 9.2184 3.48339 11.674 2.68557`,strokeWidth:3,strokeLinecap:`round`,strokeLinejoin:`round`}),y.createElement(`path`,{opacity:.3,d:`M16 29.9996C23.732 29.9996 30 23.7316 30 15.9996C30 8.26758 23.732 1.99956 16 1.99956C8.26801 1.99956 2 8.26758 2 15.9996C2 23.7316 8.26801 29.9996 16 29.9996Z`,strokeWidth:3,strokeLinejoin:`round`})),y.createElement(`defs`,null,y.createElement(`clipPath`,{id:`clip0_1785_4234`},y.createElement(`rect`,{width:32,height:32,fill:`white`})))),S=(0,b.forwardRef)(x)})),w,T,E,D=t((()=>{o(),a(),e(n(),1),p(),v(),C(),w=l(),T=`Spinner`,E=({size:e=i})=>{let t=c(f,T,[s(`size`,e)]),n=[...r(f,T,[`animated`])],a=[...r(f,T,[`static`])];return(0,w.jsxs)(`span`,{className:t.join(` `),children:[(0,w.jsx)(`span`,{className:n.join(` `),children:(0,w.jsx)(S,{})}),(0,w.jsx)(`span`,{className:a.join(` `),children:(0,w.jsx)(_,{})})]})};try{E.displayName=`Spinner`,E.__docgenInfo={description:``,displayName:`Spinner`,props:{size:{defaultValue:{value:`default`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"default"`},{value:`"large"`},{value:`ResponsiveProp<SpinnerSize>`}]}}}}}catch{}}));export{D as n,E as t};

package/dist/assets/Spinner-CIgevzeA.css

@@ -0,0 +1 @@
+@keyframes spin__iEg7N{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.Spinner__XvUpd{display:inline-flex}.Spinner--size-default__mYug6>*{width:var(--9270b5);height:var(--9270b5)}.Spinner--size-large__w-57e>*{width:var(--77547f);height:var(--77547f)}@media (width>=400px){.Spinner--narrow-l--size-default__Y1CEQ>*{width:var(--9270b5);height:var(--9270b5)}.Spinner--narrow-l--size-large__10-GA>*{width:var(--77547f);height:var(--77547f)}}@media (width>=700px){.Spinner--medium-s--size-default__sGEJB>*{width:var(--9270b5);height:var(--9270b5)}.Spinner--medium-s--size-large__z3YD6>*{width:var(--77547f);height:var(--77547f)}}@media (width>=880px){.Spinner--medium-l--size-default__Gc7Yo>*{width:var(--9270b5);height:var(--9270b5)}.Spinner--medium-l--size-large__a1mSJ>*{width:var(--77547f);height:var(--77547f)}}@media (width>=1200px){.Spinner--wide-s--size-default__n3cXu>*{width:var(--9270b5);height:var(--9270b5)}.Spinner--wide-s--size-large__kdEFZ>*{width:var(--77547f);height:var(--77547f)}}@media (width>=1900px){.Spinner--wide-l--size-default__44Cv->*{width:var(--9270b5);height:var(--9270b5)}.Spinner--wide-l--size-large__uxzU7>*{width:var(--77547f);height:var(--77547f)}}.Spinner--static__Jjv6L{display:none}.Spinner--static__Jjv6L svg{fill:currentColor}.Spinner--animated__gi5FM{display:inline-flex}.Spinner--animated__gi5FM svg{stroke:currentColor;stroke-linecap:round;stroke-width:3px;animation:1s cubic-bezier(.46,.17,.58,.87) infinite spin__iEg7N}@media (prefers-reduced-motion){.Spinner--static__Jjv6L{display:inline-flex}.Spinner--animated__gi5FM{display:none}}

package/dist/assets/Stars-DRmASRCW.css

@@ -0,0 +1 @@
+.rating__r-A71{isolation:isolate;--star-size:var(--f316e1);width:calc(var(--star-size) * 5);height:var(--star-size);position:relative;overflow:hidden}.rating--size-small__wMRnt{--star-size:var(--f316e1)}.rating--size-medium__oVHgE{--star-size:var(--7789ee)}.rating--size-large__sNU-A{--star-size:var(--51a539)}@media (width>=400px){.rating--narrow-l--size-small__GL-Ad{--star-size:var(--f316e1)}.rating--narrow-l--size-medium__DaviF{--star-size:var(--7789ee)}.rating--narrow-l--size-large__JfbP9{--star-size:var(--51a539)}}@media (width>=700px){.rating--medium-s--size-small__s8Ddw{--star-size:var(--f316e1)}.rating--medium-s--size-medium__USqaj{--star-size:var(--7789ee)}.rating--medium-s--size-large__T5Pq-{--star-size:var(--51a539)}}@media (width>=880px){.rating--medium-l--size-small__Gf1HV{--star-size:var(--f316e1)}.rating--medium-l--size-medium__FpwUM{--star-size:var(--7789ee)}.rating--medium-l--size-large__-0tSD{--star-size:var(--51a539)}}@media (width>=1200px){.rating--wide-s--size-small__lolFo{--star-size:var(--f316e1)}.rating--wide-s--size-medium__815IL{--star-size:var(--7789ee)}.rating--wide-s--size-large__47sdo{--star-size:var(--51a539)}}@media (width>=1900px){.rating--wide-l--size-small__QL-Ls{--star-size:var(--f316e1)}.rating--wide-l--size-medium__DnsTd{--star-size:var(--7789ee)}.rating--wide-l--size-large__mpRTc{--star-size:var(--51a539)}}.ratingInput__fyzyf{border-radius:var(--8d5131);--star-size:var(--51a539)}.ratingInput__fyzyf input[type=range]{cursor:pointer;appearance:none;width:120%;height:100%;margin:0}.ratingInput__fyzyf input[type=range i]::-webkit-slider-thumb{appearance:none;width:0}.ratingInput__fyzyf input[type=range]::-moz-range-thumb{appearance:none;width:0}.ratingInput__fyzyf input[type=range]{padding-inline:calc(var(--star-size) / 2);transform:translate(calc(var(--star-size) * -1))}@media (hover:hover) and (pointer:fine){.ratingInput__fyzyf:hover>.stars__qShgt [data-filled]{color:var(--a987e0)}}.ratingInput--dsInternalSimulation-hover__45QqL>.stars__qShgt [data-filled]{color:var(--a987e0)}.ratingInput--dsInternalSimulation-hover__45QqL:has(input[aria-invalid=true])>.stars__qShgt [data-filled]{color:var(--dc4541)}.ratingInput__fyzyf .focus-style__cDthQ{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf .focus-style__cDthQ>input{outline-width:0}.ratingInput--dsInternalSimulation-focus__gUAOt{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput--dsInternalSimulation-focus__gUAOt>input{outline-width:0}@supports selector(:has(input:focus-visible)){.ratingInput__fyzyf:has(input:focus-visible){outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf:has(input:focus-visible)>input{outline-width:0}}@supports not selector(:has(input:focus-visible)){.ratingInput__fyzyf:focus-within{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.ratingInput__fyzyf:focus-within>input{outline-width:0}}.ratingInput__fyzyf:has(input[aria-invalid=true])>.stars__qShgt [data-filled]{color:var(--dc4541)}@media (hover:hover) and (pointer:fine){.ratingInput__fyzyf:has(input[aria-invalid=true]):hover>.stars__qShgt [data-filled]{color:var(--dc4541)}}.stars__qShgt [data-filled]{pointer-events:none;transition:color var(--018058);display:flex;position:absolute;inset:0}.stars__qShgt [data-filled]>svg{min-width:var(--star-size);min-height:var(--star-size);fill:currentColor}.stars__qShgt [data-filled=false]{z-index:1;width:100%}.stars__qShgt [data-filled=true]{z-index:2;flex-wrap:nowrap;overflow:hidden}

package/dist/assets/Stars-DuQupRe3.js

@@ -0,0 +1 @@
+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"./render-icon-Dzkg3KVE.js";import{o,r as s}from"./lib-CXCPi5ID.js";import{i as c,n as l,r as u,t as d}from"./TokyoUIStarFilled-CYq7gSvg.js";var f,p,m,h,g=t((()=>{f=`rating__r-A71`,p=`ratingInput__fyzyf`,m=`stars__qShgt`,h={rating:f,"rating--size-small":`rating--size-small__wMRnt`,"rating--size-medium":`rating--size-medium__oVHgE`,"rating--size-large":`rating--size-large__sNU-A`,"rating--narrow-l--size-small":`rating--narrow-l--size-small__GL-Ad`,"rating--narrow-l--size-medium":`rating--narrow-l--size-medium__DaviF`,"rating--narrow-l--size-large":`rating--narrow-l--size-large__JfbP9`,"rating--medium-s--size-small":`rating--medium-s--size-small__s8Ddw`,"rating--medium-s--size-medium":`rating--medium-s--size-medium__USqaj`,"rating--medium-s--size-large":`rating--medium-s--size-large__T5Pq-`,"rating--medium-l--size-small":`rating--medium-l--size-small__Gf1HV`,"rating--medium-l--size-medium":`rating--medium-l--size-medium__FpwUM`,"rating--medium-l--size-large":`rating--medium-l--size-large__-0tSD`,"rating--wide-s--size-small":`rating--wide-s--size-small__lolFo`,"rating--wide-s--size-medium":`rating--wide-s--size-medium__815IL`,"rating--wide-s--size-large":`rating--wide-s--size-large__47sdo`,"rating--wide-l--size-small":`rating--wide-l--size-small__QL-Ls`,"rating--wide-l--size-medium":`rating--wide-l--size-medium__DnsTd`,"rating--wide-l--size-large":`rating--wide-l--size-large__mpRTc`,ratingInput:p,stars:m,"ratingInput--dsInternalSimulation-hover":`ratingInput--dsInternalSimulation-hover__45QqL`,"focus-style":`focus-style__cDthQ`,"ratingInput--dsInternalSimulation-focus":`ratingInput--dsInternalSimulation-focus__gUAOt`}}));function _(e){return Math.round(e*2)/2}var v=t((()=>{}));function y(e){let{formatMessage:t}=o();return{ariaValueText:t({id:`preply-ds.rating.value-text`,defaultMessage:`{currentValue} out of {maxValue}`,description:`The current rating. Will be announced by screen readers as '4 out of 5'.`},{currentValue:e,maxValue:5})}}var b=t((()=>{s()}));function x({filledPerc:e}){return(0,w.jsxs)(`div`,{"data-filled":`true`,style:{width:`${e*100}%`},children:[i(d),i(d),i(d),i(d),i(d)]})}function S(){return(0,w.jsxs)(`div`,{"data-filled":`false`,children:[i(u),i(u),i(u),i(u),i(u)]})}function C({filledPerc:e}){return(0,w.jsxs)(`div`,{className:h.stars,"aria-hidden":`true`,children:[(0,w.jsx)(x,{filledPerc:e}),(0,w.jsx)(S,{})]})}var w,T=t((()=>{e(n(),1),c(),l(),g(),a(),w=r();try{C.displayName=`Stars`,C.__docgenInfo={description:``,displayName:`Stars`,props:{filledPerc:{defaultValue:null,description:`0-1 value`,name:`filledPerc`,required:!0,type:{name:`number`}}}}}catch{}}));export{v as a,g as c,y as i,T as n,_ as o,b as r,h as s,C as t};

package/dist/assets/Steps-BAxCCGnQ.css

@@ -0,0 +1 @@
+.steps__6mN2m{gap:var(--558c4c);flex-direction:column;display:flex}.steps__6mN2m[aria-busy=true]{cursor:wait}@media (width>=880px){.steps__6mN2m{gap:var(--b53873)}}.header__hCorO{gap:var(--590b8d);margin-top:var(--590b8d);margin-bottom:var(--b53873);flex-direction:column;display:flex}.header__hCorO[hidden]{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}@media (width>=880px){.header__hCorO{gap:var(--66b80b);margin-top:var(--66b80b);margin-bottom:var(--1e685c)}}

package/dist/assets/Steps-Bf2x77zr.js

@@ -0,0 +1,26 @@
+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"./Text-bm2vnOS2.js";import{n as u,t as d}from"./Heading-CEZfMm-F.js";import{n as f,t as p}from"./Button-DnVrHohm.js";import{i as m,r as h}from"./lib-CXCPi5ID.js";import{n as g,t as _}from"./ProgressSteps-CKNbDWn0.js";var v,y,b,x=t((()=>{v=`steps__6mN2m`,y=`header__hCorO`,b={steps:v,header:y}})),S,C,w,T,E,D,O,k,A,j=t((()=>{S=e(n(),1),f(),x(),h(),i(),s(),u(),g(),c(),C=a(),w=(0,S.createContext)(void 0),T=()=>{let e=(0,S.useContext)(w);if(e===void 0)throw Error(`Steps navigation components must be used within a Steps component`);return e||{}},E=(0,S.forwardRef)(function({onClick:e,disabled:t,variant:n=`ghost`,...r},i){let{goToPreviousStep:a,currentStep:o,isNavigating:s,contentId:c}=T();return(0,C.jsx)(p,{...r,ref:i,size:`medium`,variant:n,onClick:t=>{e?.(t),!t.defaultPrevented&&a()},disabled:o===1||s||t,"aria-controls":c,children:r.children||(0,C.jsx)(m,{id:`preply-ds.steps.previous`,defaultMessage:`Previous`,description:`Button used to navigate to the previous step`})})}),D=(0,S.forwardRef)(function({onClick:e,disabled:t,variant:n=`primary`,...r},i){let{goToNextStep:a,currentStep:o,totalSteps:s,isNavigating:c,contentId:l}=T();return(0,C.jsx)(p,{...r,ref:i,size:`medium`,variant:n,onClick:t=>{e?.(t),!t.defaultPrevented&&a()},disabled:o===s||c||t,"aria-controls":l,children:r.children||(0,C.jsx)(m,{id:`preply-ds.steps.next`,defaultMessage:`Next`,description:`Button used to navigate to the next step`})})}),O=({children:e,"aria-label":t,initialStep:n=1,onStepChange:i,dataset:a})=>{let s=(0,S.useId)(),[c,l]=(0,S.useState)(n),[u,d]=(0,S.useState)(!1),f=[],p=[];e?.forEach(e=>{(0,S.isValidElement)(e)&&e.type===k?f.push(e):p.push(e)});let m=f.length,h=r(a,{preplyDsComponent:o.Steps}),g=async e=>{let t=Math.min(Math.max(e,1),m);if(!i){l(t);return}d(!0);try{l(await i(c,t)??t)}finally{d(!1)}},v={goToPreviousStep:()=>g(c-1),goToNextStep:()=>g(c+1),goToStep:e=>g(e),currentStep:c,totalSteps:m,isNavigating:u,contentId:s};return(0,C.jsxs)(`div`,{...h,className:b.steps,id:s,"aria-live":`polite`,"aria-busy":u,children:[(0,C.jsx)(_,{currentStep:c,totalSteps:m,"aria-label":t}),(0,C.jsx)(`div`,{className:b.content,children:(0,C.jsxs)(w.Provider,{value:v,children:[f[c-1],p]})})]})},k=({title:e,description:t,children:n,hideHeader:r})=>(0,C.jsxs)(C.Fragment,{children:[(0,C.jsxs)(`hgroup`,{className:b.header,hidden:r,children:[(0,C.jsx)(d,{tag:`h3`,variant:{_:`medium`,"medium-l":`large`},children:e}),t&&(0,C.jsx)(l,{variant:`default-regular`,accent:`secondary`,children:t})]}),n]}),A=Object.assign(O,{Step:k,Previous:E,Next:D});try{A.displayName=`Steps`,A.__docgenInfo={description:"This component allows users to navigate through a series of steps, providing\na structured way to complete tasks or forms. It will also handle screen reader\nannouncements and progress indicators.\n\nTo create a step, wrap the content of each step in a `Steps.Step` component.\nAny non-`Steps.Step` children will be rendered outside of the steps flow,\nright after the currently active step.\n\nTo navigate between steps, use the `Steps.Previous` and `Steps.Next` components.\nAlternatively, you can use the `StepsContext` directly to call\n`goToPreviousStep`, `goToNextStep`, or `goToStep`.",displayName:`Steps`,props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
+@example 'Onboarding Steps', 'Checkout Steps', 'Survey Steps', etc.`,name:`aria-label`,required:!0,type:{name:`string`}},initialStep:{defaultValue:{value:`1`},description:"The initial step to start at (from `1` to `children.length`).",name:`initialStep`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onStepChange:{defaultValue:null,description:`Optional callback to control navigation between steps.
+
+This is triggered either by using the \`Steps.Previous\` and \`Steps.Next\`
+components, or by calling \`goToPreviousStep\`, \`goToNextStep\`, or
+\`goToStep\` from the \`StepsContext\`.
+
+Can be used to:
+- Skip/redirect steps conditionally
+- Perform async process (e.g. validation) on step changes, marking the
+  element as busy/loading
+@param currentStep The current step (1-based)
+@param nextStep The next, incoming step
+@returns Promise that resolves to:
+- \`undefined\`: proceed with default navigation
+- \`number\`: override the destination step
+@example Add async validation
+const handleStepChange = async (current, next) => {
+await validateStep(current);
+return next;
+};
+@example Skip a step
+const handleStepChange = async (current, next) => {
+if (next === 2) return 3; // Skip step 2
+return next;
+};`,name:`onStepChange`,required:!1,type:{name:`enum`,value:[{value:`(currentStep: number, nextStep: number) => number | Promise<number | undefined> | undefined`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}}));export{j as n,T as r,A as t};