@preply/ds-docs 7.0.0 → 7.1.0

package/dist/assets/{DropdownMenu.stories-DwDqM2g2.js → DropdownMenu.stories-BMPgkvR1.js}

@@ -1,4 +1,4 @@
-import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as g}from"./index-Cb9e4tly.js";import{D as B,a as j,b as I,c as H,d as Z,e as C,f as w,g as r,h as ee}from"./DropdownMenu-DN8DS6fO.js";import{B as ae}from"./Button-C-6rDSzI.js";import{I as k}from"./Icon-BvqvxBCF.js";import{F as Rt,a as Ct}from"./TokyoUISettings-NNMqOtUc.js";import{F as Dt}from"./TokyoUIMessages-BShhOmUG.js";import{C as de}from"./CountryFlag-B1fjJhKl.js";import{A as me}from"./Avatar-C3aW8Few.js";import{f as m,e as t,u as o,a as s,w as te}from"./index-Dk_MCKuE.js";import{F as D}from"./TokyoUIEmojiFrowning-DwuiVRut.js";import{D as ue}from"./index-fVuid1dE.js";import{D as St}from"./Divider-BPgGsji3.js";import{I as Tt}from"./IconButton-BgdrD9k8.js";import{c as Ot}from"./OnboardingTour-DuSyhLj7.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-k0j3gHgH.js";import"./TokyoUICheck-BMIsD36S.js";import"./breakpoints-BfMlrtxE.js";import"./useOpenInteractionType-BkuUI9ak.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-qlqSh81O.js";import"./PortalElementProvider-BAqvxZzH.js";import"./index-Cc-bXjHe.js";import"./index-BqT8peiM.js";import"./VisuallyHidden-CZd13GOS.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./useControllableState-DKskwY-e.js";import"./message-CSdaKtIj.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-h431KMrY.js";import"./Spinner-qiZily8k.js";import"./classNames-9hsFPPZv.js";import"./defaults-_YAxqn11.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./text-accent-VILyY3zt.js";import"./constants-5om8Ptru.js";import"./Steps-DgjrJwVq.js";import"./Heading-DBysGv9G.js";import"./text-centered-BFb64PJw.js";import"./ProgressSteps-BfCnfM68.js";import"./Text-D8nK9Gef.js";import"./TokyoUIClose-thK8sk63.js";import"./shared-strings-DFzxd8lM.js";import"./OnboardingTooltip-pbmDcWPw.js";import"./index-CUHsGBvM.js";import"./index-2TVOn9du.js";import"./index-DR63UjCN.js";const u={onOpenChange:m(),items:{transferBalance:m(),addExtraHours:m(),currency:m(),language:m()}},An={title:"Components/DropdownMenu",component:ee,subcomponents:{DropdownMenuItem:r,DropdownMenuGroup:w,DropdownSubmenu:C,DropdownMenuRadioGroup:Z,DropdownMenuRadioItem:H,DropdownMenuCheckboxItem:I,DropdownMenuSelect:j,DropdownMenuSelectOption:B},parameters:{preventIframeFromScrollingParent:!0,layout:"fullscreen",docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[e=>a.jsx("div",{style:{height:"100%",padding:24,display:"flex",justifyContent:"center"},children:a.jsx(e,{})})],args:{onOpenChange:u.onOpenChange,trigger:a.jsx(ae,{children:"Settings"}),children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(r,{label:"Add extra hours",onClick:u.items.addExtraHours})]})}},ne={tags:["!autodocs","!dev"],args:{defaultOpen:!0}},v=t.anything(),V={play:async({canvas:e,step:n,args:i})=>{await n("Initially closed",async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!0,v)}),await n("Click outside to close the menu",async()=>{await o.click(document.body),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!1,v)}),await n("Open dropdown again",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Transfer balance"',async()=>{await o.click(e.getByRole("menuitem",{name:"Transfer balance"})),t(u.items.transferBalance).toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,v)})}},oe={tags:["!autodocs"],args:{defaultOpen:!0},play:async({canvas:e,step:n})=>{await n("Initially open",async()=>{await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await o.click(document.body),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,v)})}};let le;const T={decorators:[(e,n)=>{const[i,l]=g.useState(!!n.args.open);le=l;const c=(d,b)=>{var y,h;l(d),(h=(y=n.args).onOpenChange)==null||h.call(y,d,b)};return a.jsx(e,{args:{...n.args,open:i,onOpenChange:c}})}],args:{open:!1},play:async({canvas:e,step:n,args:i})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!0,v)}),await n("Click outside to close the menu",async()=>{await o.click(document.body),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!1,v)}),await n("Open dropdown via open prop",async()=>{u.onOpenChange.mockClear(),le(!0),await s(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(i.onOpenChange).not.toHaveBeenCalled()}),await n("Close dropdown via open prop",async()=>{u.onOpenChange.mockClear(),le(!1),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(i.onOpenChange).not.toHaveBeenCalled()})}},ie={...T,tags:["!autodocs"],args:{...T.args,open:!0},play:async({canvas:e,step:n,args:i})=>{await n("Initially open",async()=>{await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await o.click(document.body),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!1,v)})}},L={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(r,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Add extra hours"',async()=>{u.onOpenChange.mockClear();const i=e.getByRole("menuitem",{name:"Add extra hours"});t(i).toHaveAttribute("aria-disabled","true"),await o.click(i),t(u.items.addExtraHours).not.toHaveBeenCalled(),t(u.onOpenChange).not.toHaveBeenCalled(),t(e.queryByRole("menu")).toBeVisible()})}},N={args:{trigger:a.jsx(ae,{children:"Language"}),children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Español",description:"Spanish"}),a.jsx(r,{label:"Українська",description:"Ukrainian"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Language"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Verify items a11y names and descriptions",async()=>{const i=e.getByRole("menuitem",{name:"Español"});t(i).toHaveAccessibleName("Español"),t(i).toHaveAccessibleDescription("Spanish");const l=e.getByRole("menuitem",{name:"Українська"});t(l).toHaveAccessibleName("Українська"),t(l).toHaveAccessibleDescription("Ukrainian")})}},W={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(w,{label:"Region",children:[a.jsx(r,{label:"Currency"}),a.jsx(r,{label:"Language"}),a.jsx(r,{label:"Time zone"})]}),a.jsxs(w,{label:"Subscription",children:[a.jsx(r,{label:"Transfer balance"}),a.jsx(r,{label:"Add extra hours"})]})]})}},U={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"User profile"}),a.jsx(r,{label:"Payments & subscriptions"}),a.jsx(St,{}),a.jsx(r,{label:"Logout"})]})}},z={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(w,{label:"Icons",children:[a.jsx(r,{leadingElement:a.jsx(k,{svg:Rt,size:"24"}),label:"Reschedule"}),a.jsx(r,{leadingElement:a.jsx(k,{svg:Dt,size:"24"}),label:"Message tutor"})]}),a.jsxs(w,{label:"Flags",children:[a.jsx(r,{leadingElement:a.jsx(de,{code:"es",alt:"",size:"medium"}),label:"Spain"}),a.jsx(r,{leadingElement:a.jsx(de,{code:"ua",alt:"",size:"medium"}),label:"Ukraine"})]}),a.jsxs(w,{label:"Avatars",children:[a.jsx(r,{leadingElement:a.jsx(me,{size:"24"}),label:"Kobe B."}),a.jsx(r,{leadingElement:a.jsx(me,{size:"24"}),label:"Jenny R."})]})]})}},ce=g.forwardRef(function({to:n,...i},l){return a.jsx("a",{href:n,...i,ref:l})});ce.displayName="Link";const f={findATutor:m(e=>{e.preventDefault()}),becomeATutor:m(e=>{e.preventDefault()}),myLessons:m(e=>{e.preventDefault()}),referAFriend:m(e=>{e.preventDefault()})},G={args:{trigger:a.jsx(ae,{children:"Links"}),children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Find a Tutor",onClick:f.findATutor,as:a.jsx("a",{href:"/en/online/english-tutors"})}),a.jsx(r,{label:"Become a Tutor",onClick:f.becomeATutor,as:a.jsx("a",{href:"/en/teach"}),disabled:!0}),a.jsx(r,{label:"My Lessons",onClick:f.myLessons,as:a.jsx(ce,{to:"/en/lessons"})}),a.jsx(r,{label:"Refer a Friend",onClick:f.referAFriend,as:a.jsx(ce,{to:"/en/referral"}),disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Links"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Assert links are rendered correctly",async()=>{const i=e.getByRole("menuitem",{name:"Find a Tutor"});t(i.tagName).toBe("A"),t(i).toHaveAttribute("href","/en/online/english-tutors");const l=e.getByRole("menuitem",{name:"Become a Tutor"});t(l.tagName).toBe("A"),t(l).toHaveAttribute("href","/en/teach"),t(l).toHaveAttribute("aria-disabled","true");const c=e.getByRole("menuitem",{name:"My Lessons"});t(c.tagName).toBe("A"),t(c).toHaveAttribute("href","/en/lessons");const d=e.getByRole("menuitem",{name:"Refer a Friend"});t(d.tagName).toBe("A"),t(d).toHaveAttribute("href","/en/referral"),t(d).toHaveAttribute("aria-disabled","true")}),await n('Click on "Find a Tutor"',async()=>{const i=e.getByRole("menuitem",{name:"Find a Tutor"});await o.click(i),t(f.findATutor).toHaveBeenCalled()}),await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Links"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Become a Tutor"',async()=>{const i=e.getByRole("menuitem",{name:"Become a Tutor"});await o.click(i),t(f.becomeATutor).not.toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "My Lessons"',async()=>{const i=e.getByRole("menuitem",{name:"My Lessons"});await o.click(i),t(f.myLessons).toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})}),await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Links"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Refer a Friend"',async()=>{const i=e.getByRole("menuitem",{name:"Refer a Friend"});await o.click(i),t(f.referAFriend).not.toHaveBeenCalled()})}},x={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},P={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(w,{label:"Day of the week",children:a.jsx(Z,{defaultValue:"mon",onValueChange:x.dayOfTheWeek,items:[{label:"Monday",value:"mon"},{label:"Tuesday",value:"tue"},{label:"Wednesday",value:"wed"},{label:"Thursday",value:"thu"},{label:"Friday",value:"fri"},{label:"Saturday",value:"sat",disabled:!0},{label:"Sunday",value:"sun",disabled:!0}]})}),a.jsx(w,{label:"Time of the day",children:a.jsxs(Z,{onValueChange:x.timeOfTheDay,children:[a.jsx(H,{label:"Morning",value:"morning"}),a.jsx(H,{label:"Afternoon",value:"afternoon"})]})}),a.jsx(w,{label:"Frequency",children:a.jsxs(Z,{value:"once",onValueChange:x.frequency,disabled:!0,children:[a.jsx(H,{label:"Once",value:"once"}),a.jsx(H,{label:"Weekly",value:"weekly"})]})})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})});const i=e.getByRole("menuitemradio",{name:"Monday"}),l=e.getByRole("menuitemradio",{name:"Tuesday"}),c=e.getByRole("menuitemradio",{name:"Saturday"});await n("Day of the week: default value is selected",async()=>{t(i).toHaveAttribute("aria-checked","true")}),await n('Click on "Tuesday"',async()=>{await o.click(l),t(x.dayOfTheWeek).toHaveBeenCalledWith("tue"),await s(()=>{t(i).toHaveAttribute("aria-checked","false"),t(l).toHaveAttribute("aria-checked","true")})}),await n('Click on "Saturday"',async()=>{x.dayOfTheWeek.mockClear(),await o.click(c),t(x.dayOfTheWeek).not.toHaveBeenCalled(),await s(()=>{t(l).toHaveAttribute("aria-checked","true")})});const d=e.getByRole("menuitemradio",{name:"Morning"}),b=e.getByRole("menuitemradio",{name:"Afternoon"});await n("Time of the day: none is selected",async()=>{t(d).toHaveAttribute("aria-checked","false"),t(b).toHaveAttribute("aria-checked","false")}),await n('Click on "Morning"',async()=>{await o.click(d),t(x.timeOfTheDay).toHaveBeenCalledWith("morning"),await s(()=>{t(d).toHaveAttribute("aria-checked","true")})});const y=e.getByRole("menuitemradio",{name:"Once"}),h=e.getByRole("menuitemradio",{name:"Weekly"});await n("Frequency: everything is disabled, once is selected",async()=>{t(y).toHaveAttribute("aria-disabled","true"),t(h).toHaveAttribute("aria-disabled","true"),t(y).toHaveAttribute("aria-checked","true"),t(h).toHaveAttribute("aria-checked","false")}),await n('Click on "Weekly"',async()=>{await o.click(h),t(x.frequency).not.toHaveBeenCalled(),await s(()=>{t(y).toHaveAttribute("aria-checked","true")})})}},R={email:m(),sms:m(),push:m(),alerts:m()},K={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(I,{label:"Email notifications",onCheckedChange:R.email,defaultChecked:!0}),a.jsx(I,{label:"SMS notifications",onCheckedChange:R.sms}),a.jsx(I,{label:"Push notifications",onCheckedChange:R.push,disabled:!0}),a.jsx(I,{label:"System alerts (required)",onCheckedChange:R.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})});const i=e.getByRole("menuitemcheckbox",{name:"Email notifications"}),l=e.getByRole("menuitemcheckbox",{name:"SMS notifications"}),c=e.getByRole("menuitemcheckbox",{name:"Push notifications"}),d=e.getByRole("menuitemcheckbox",{name:"System alerts (required)"});await n("Email notifications is checked by default",async()=>{t(i).toHaveAttribute("aria-checked","true")}),await n('Uncheck "Email notifications"',async()=>{await o.click(i),t(R.email).toHaveBeenCalledWith(!1,v),await s(()=>{t(i).toHaveAttribute("aria-checked","false")})}),await n('"SMS notifications" is not checked',async()=>{t(l).toHaveAttribute("aria-checked","false")}),await n('Check "SMS notifications"',async()=>{await o.click(l),t(R.sms).toHaveBeenCalledWith(!0,v),await s(()=>{t(l).toHaveAttribute("aria-checked","true")})}),await n('"Push notifications" is disabled and not checked',async()=>{t(c).toHaveAttribute("aria-disabled","true"),t(c).toHaveAttribute("aria-checked","false")}),await n('Click on "Push notifications"',async()=>{await o.click(c),t(R.push).not.toHaveBeenCalled(),await s(()=>{t(c).toHaveAttribute("aria-checked","false")})}),await n('"System alerts (required)" is disabled and checked',async()=>{t(d).toHaveAttribute("aria-disabled","true"),t(d).toHaveAttribute("aria-checked","true")}),await n('Click on "System alerts (required)"',async()=>{await o.click(d),t(R.alerts).not.toHaveBeenCalled(),await s(()=>{t(d).toHaveAttribute("aria-checked","true")})})}},q={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},F=e=>{const[n,i]=g.useState("mon"),[l,c]=g.useState(),d=y=>{i(y),q.dayOfTheWeek(y)},b=y=>{c(y),q.timeOfTheDay(y)};return a.jsxs(ee,{...e,children:[a.jsx(j,{label:"Day of the week",value:n,onValueChange:d,items:[{label:"Monday",value:"mon"},{label:"Tuesday",value:"tue"},{label:"Wednesday",value:"wed"},{label:"Thursday",value:"thu"},{label:"Friday",value:"fri"},{label:"Saturday",value:"sat",disabled:!0},{label:"Sunday",value:"sun",disabled:!0}]}),a.jsxs(j,{label:"Time of the day",defaultValue:l,onValueChange:b,children:[a.jsx(B,{value:"morning",label:"Morning"}),a.jsx(B,{value:"afternoon",label:"Afternoon"})]}),a.jsxs(j,{label:"Frequency",onValueChange:q.frequency,disabled:!0,children:[a.jsx(B,{label:"Once",value:"once"}),a.jsx(B,{label:"Weekly",value:"weekly"})]})]})};F.play=async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})});const i=e.getByRole("menuitem",{name:/^Day of the week/});await n("Day of the week: default value is selected",async()=>{t(i).toHaveAccessibleName(/Selected: Monday$/)}),await n("Open day of the week submenu",async()=>{await o.hover(i),await s(()=>{t(e.queryByRole("menu",{name:/^Day of the week/})).toBeVisible()})}),await n('Click on "Tuesday"',async()=>{await o.click(e.getByRole("menuitemradio",{name:"Tuesday"})),t(q.dayOfTheWeek).toHaveBeenCalledWith("tue"),await s(()=>{t(e.queryByRole("menu",{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),t(i).toHaveAccessibleName(/Selected: Tuesday$/)})});const l=e.getByRole("menuitem",{name:/^Time of the day/});await n("Time of the day: nothing is selected",async()=>{t(l).toHaveAccessibleName("Time of the day")}),await n("Open time of the day submenu",async()=>{l.focus(),await o.keyboard(" "),await s(()=>{t(e.queryByRole("menu",{name:/^Time of the day/})).toBeVisible()})}),await n('Click on "Morning"',async()=>{await o.click(e.getByRole("menuitemradio",{name:"Morning"})),t(q.timeOfTheDay).toHaveBeenCalledWith("morning"),await s(()=>{t(e.queryByRole("menu",{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),t(l).toHaveAccessibleName(/Selected: Morning$/)})}),await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Frequency is disabled",async()=>{const c=e.getByRole("menuitem",{name:"Frequency"});t(c).toHaveAttribute("aria-disabled","true"),await o.click(c,{pointerEventsCheck:0}),t(q.frequency).not.toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu",{name:"Frequency",hidden:!0})).not.toBeVisible()})})};const O={args:{children:a.jsxs(a.Fragment,{children:[a.jsxs(C,{label:"Region",children:[a.jsx(r,{label:"Currency"}),a.jsx(r,{label:"Language"}),a.jsx(r,{label:"Time zone"})]}),a.jsxs(C,{label:"Subscription",children:[a.jsx(r,{label:"Transfer balance"}),a.jsx(r,{label:"Add extra hours"})]}),a.jsxs(C,{label:"Integrations",disabled:!0,children:[a.jsx(r,{label:"Connect calendar"}),a.jsx(r,{label:"Slack integration"}),a.jsx(r,{label:"Email sync"})]})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})});const i=e.getByRole("menuitem",{name:"Region"});await n("Region submenu opens on hover",async()=>{await o.hover(i),await s(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Region submenu closes on hover out",async()=>{await o.unhover(i),await s(()=>{t(e.queryByRole("menu",{name:"Region"})).not.toBeInTheDocument()})}),await n("Integrations submenu is disabled",async()=>{const l=e.getByRole("menuitem",{name:"Integrations"});t(l).toHaveAttribute("aria-disabled","true"),await o.click(l),await s(()=>{t(e.queryByRole("menu",{name:"Integrations"})).not.toBeInTheDocument()})})}},{Provider:ft,Step:S}=Ot();ft.displayName="Tour.Provider";S.displayName="Tour.Step";const Y={parameters:{docs:{source:{type:"dynamic"}}},decorators:[e=>{const[n,i]=g.useState(0),l=()=>i(n+1);return a.jsxs(a.Fragment,{children:[a.jsx(e,{},n),a.jsx("div",{style:{position:"fixed",left:0,bottom:0,margin:8},children:a.jsx(ae,{variant:"ghost",size:"small",onClick:l,children:"Reset story"})})]})}],render:function(){const[n,i]=g.useState(!1),[l,c]=g.useState(!1),[d,b]=g.useState(!1),y=xt=>{switch(xt){case 1:i(!0);return;case 3:c(!0);return;case 5:b(!0);return}},h=()=>{i(!1),c(!1),b(!1)};return a.jsx(ft,{totalSteps:6,onStepChange:y,onComplete:h,onClose:h,children:a.jsx(S,{step:0,title:"New settings menu",text:"All settings are now in one place.",children:a.jsxs(ee,{open:n,onOpenChange:i,trigger:a.jsx(Tt,{svg:Ct,variant:"ghost",assistiveText:"Settings"}),children:[a.jsx(S,{step:1,title:"Transfer balance",text:"You can now transfer your balance to another tutor.",side:"right",children:a.jsx(r,{label:"Transfer balance"})}),a.jsx(r,{label:"Add extra hours"}),a.jsx(S,{step:2,title:"Region",text:"Region settings are grouped together.",side:"top",children:a.jsxs(C,{label:"Region",keepMounted:!0,open:l,onOpenChange:c,children:[a.jsx(r,{label:"Language"}),a.jsx(S,{step:3,title:"Time zone",text:"You can now select your time zone.",side:"right",children:a.jsx(r,{label:"Time zone"})})]})}),a.jsx(S,{step:4,title:"Currency",text:"Currency settings moved here.",side:"right",children:a.jsxs(j,{open:d,onOpenChange:b,defaultValue:"USD",label:"Currency",children:[a.jsx(B,{value:"USD",label:"US Dollar"}),a.jsx(B,{value:"EUR",label:"Euro"}),a.jsx(S,{step:5,title:"New currency!",text:"Pay and receive payments in british pounds.",children:a.jsx(B,{value:"GBP",label:"British Pound"})})]})})]})})})},play:async({canvas:e,step:n})=>{await n("Tour tooltip should be visible",async()=>{await s(()=>{t(e.getByRole("dialog",{name:"New settings menu"})).toBeVisible()})}),await n("Click Next to advance to second step",async()=>{await o.click(e.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"Transfer balance"})).toBeVisible(),t(e.getByRole("menu")).toBeVisible()})}),await n("Click Next to advance to third step",async()=>{const i=te(e.getByRole("dialog",{name:"Transfer balance"}));await o.click(i.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fourth step",async()=>{const i=te(e.getByRole("dialog",{name:"Region"}));await o.click(i.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"Time zone"})).toBeVisible(),t(e.getByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fifth step",async()=>{const i=te(e.getByRole("dialog",{name:"Time zone"}));await o.click(i.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"Currency"})).toBeVisible()})}),await n("Click Next to advance to the last step",async()=>{const i=te(e.getByRole("dialog",{name:"Currency"}));await o.click(i.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"New currency!"})).toBeVisible(),t(e.getByRole("menu",{name:/Currency/})).toBeVisible()})}),await o.click(e.getByRole("button",{name:"Reset story"}))}},se=e=>{if(!e)return!1;const{top:n,left:i,bottom:l,right:c}=e.getBoundingClientRect();return!(n>=window.innerHeight||l<=0||i>=window.innerWidth||c<=0)},$={args:{keepMounted:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Transfer balance"}),a.jsx(r,{label:"Add extra hours"}),a.jsxs(C,{label:"Region",keepMounted:!0,children:[a.jsx(r,{label:"Currency"}),a.jsx(r,{label:"Language"}),a.jsx(r,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const i=await e.findByRole("menu",{name:"Settings",hidden:!0}),l=await e.findByRole("menu",{name:"Region",hidden:!0});await n("Menus are mounted, but not visible",async()=>{t(i).toBeInTheDocument(),t(i).not.toBeVisible(),t(l).toBeInTheDocument(),t(l).not.toBeVisible()}),await n("Open the menu",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(i).toBeVisible()})}),await n("Submenu is visible",async()=>{await o.click(e.getByRole("menuitem",{name:"Region"})),await s(()=>{t(l).toBeVisible()})}),await n("Close the menu. Menus should remain mounted",async()=>{await o.keyboard("{Tab}"),await s(()=>{t(i).not.toBeVisible(),t(l).not.toBeVisible()}),t(i).toBeInTheDocument(),t(l).toBeInTheDocument()})}},E={args:O.args,globals:{viewport:{value:"narrow-l",isRotated:!1}},parameters:{layout:"centered"},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Region"',async()=>{await o.click(e.getByRole("menuitem",{name:"Region"})),await s(async()=>{t(se(e.queryByRole("menu",{name:"Settings"})),"Main menu should be hidden").toBe(!1),t(se(e.queryByRole("menu",{name:"Region"})),"Submenu should be visible").toBe(!0)})}),await n("Tap away to return to main menu",async()=>{const i=e.getByRole("menu",{name:"Region"}).closest("[data-base-ui-portal]").querySelector("[data-backdrop]");await o.click(i),await s(async()=>{t(se(e.queryByRole("menu",{name:"Region"})),"Submenu should be hidden").toBe(!1),t(se(e.queryByRole("menu",{name:"Settings"})),"Main menu should be visible").toBe(!0)})}),await n("Tap away to close menu",async()=>{await o.click(document.querySelector("[data-backdrop]")),await s(async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})})}},M={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(r,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0}),a.jsxs(C,{label:"Region",children:[a.jsx(r,{label:"Currency",onClick:u.items.currency}),a.jsx(r,{label:"Language",onClick:u.items.language}),a.jsx(r,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const i=e.getByRole("button",{name:"Settings"});await n("Focus on the trigger element",async()=>{i.focus()}),await n("Open the menu via Enter key. First item should be focused",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Close the menu via Escape key. Trigger should be focused",async()=>{await o.keyboard("{Escape}"),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(i).toHaveFocus()})}),await n("Open the menu via Space key. First item should be focused",async()=>{await o.keyboard(" "),await s(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Select the first item via Enter key. Menu should be closed and trigger should be focused",async()=>{await o.keyboard("{Enter}"),t(u.items.transferBalance).toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(i).toHaveFocus()})}),await n("Open the menu via Enter key. First item should be focused",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Navigate through the menu using Arrow keys",async()=>{await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()}),await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()}),await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()}),await o.keyboard("{ArrowUp}"),await o.keyboard("{ArrowUp}"),await s(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()})}),await n("Enter key does nothing for disabled item",async()=>{await o.keyboard("{Enter}"),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Space key does nothing for disabled item",async()=>{await o.keyboard(" "),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Navigate to submenu trigger using Arrow down key",async()=>{await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open the submenu via Enter key. First item should be focused",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Arrow left key. Submenu trigger should be focused",async()=>{await o.keyboard("{ArrowLeft}"),await s(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Arrow right key. First item should be focused",async()=>{await o.keyboard("{ArrowRight}"),await s(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Escape key. Submenu trigger should be focused",async()=>{await o.keyboard("{Escape}"),await s(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Enter key. First item should be focused",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Close the menu via Tab key. Trigger should be focused",async()=>{await o.keyboard("{Tab}"),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(i).toHaveFocus()})})}},re={...M,globals:E.globals,parameters:E.parameters,tags:["!autodocs"]},_={args:{defaultOpen:!0,children:a.jsx(a.Fragment,{children:Array.from({length:100}).map((e,n)=>a.jsx(r,{label:`Item ${n+1}`},n))})}},p=Array.from({length:5}).map(()=>"I won't use long labels for menu items.").join(" "),J={args:{defaultOpen:!0,children:a.jsxs(w,{label:p,children:[a.jsx(r,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p}),a.jsx(C,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p,children:a.jsx(r,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p})}),a.jsx(j,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p,defaultValue:"1",children:a.jsx(B,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p,value:"1"})}),a.jsx(I,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p}),a.jsx(Z,{defaultValue:"1",children:a.jsx(H,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p,value:"1"})})]})}},Q={args:O.args,render:function(n){const[i,l]=g.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(ae,{onClick:()=>l(!0),children:"Open dialog"}),a.jsx(ue,{open:i,onClose:()=>l(!1),title:"Dialog",children:a.jsx(ee,{...n})})]})},play:async({canvas:e,step:n})=>{await n("Open dialog",async()=>{await o.click(e.getByRole("button",{name:"Open dialog"})),await s(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Open dropdown with mouse",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible()})}),await n("Open Region submenu with mouse",async()=>{await o.click(e.getByRole("menuitem",{name:"Region"})),await s(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click on Currency item",async()=>{await o.click(e.getByRole("menuitem",{name:"Currency"})),await s(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Open dropdown with keyboard",async()=>{e.getByRole("button",{name:"Settings"}).focus(),await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open Region submenu with keyboard",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate to Language item with keyboard",async()=>{await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Language"})).toHaveFocus()})}),await n("Select Language item with keyboard",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Close dialog",async()=>{await o.keyboard("{Escape}"),await s(()=>{t(e.queryByRole("dialog",{name:"Dialog"})).not.toBeInTheDocument()})})}},A={render:function(n){const[i,l]=g.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(ee,{...n,children:a.jsx(r,{label:"Open dialog",onClick:()=>l(!0)})}),a.jsx(ue,{title:"Dialog",open:i,onClose:()=>l(!1),children:"Dialog content"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.getByRole("menu")).toBeVisible()})}),await n("Open dialog",async()=>{await o.click(e.getByRole("menuitem",{name:"Open dialog"})),await s(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Close dialog",async()=>{await o.keyboard("{Escape}")})}},Et=()=>{const[e,n]=g.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Open dialog",onClick:()=>n(!0)}),a.jsx(ue,{title:"Dialog",open:e,onClose:()=>n(!1),children:"Dialog content"})]})},X={args:{keepMounted:!0,children:a.jsx(Et,{})},play:A.play};var pe,ye,ge;ne.parameters={...ne.parameters,docs:{...(pe=ne.parameters)==null?void 0:pe.docs,source:{originalSource:`{
+import{j as a}from"./jsx-runtime-BTJTZTIL.js";import{r as g}from"./index-Cb9e4tly.js";import{D as B,a as j,b as I,c as H,d as Z,e as C,f as w,g as r,h as ee}from"./DropdownMenu-PLTFFi-U.js";import{B as ae}from"./Button-C-6rDSzI.js";import{I as k}from"./Icon-BsfKiFZj.js";import{F as Rt,a as Ct}from"./TokyoUISettings-NNMqOtUc.js";import{F as Dt}from"./TokyoUIMessages-BShhOmUG.js";import{C as de}from"./CountryFlag-DuiC2miK.js";import{A as me}from"./Avatar-NdNFhLYi.js";import{f as m,e as t,u as o,a as s,w as te}from"./index-Dk_MCKuE.js";import{F as D}from"./TokyoUIEmojiFrowning-DwuiVRut.js";import{D as ue}from"./index--TGv0Gnn.js";import{D as St}from"./Divider-BPgGsji3.js";import{I as Tt}from"./IconButton-BgdrD9k8.js";import{c as Ot}from"./OnboardingTour-D3xEUgOf.js";import"./index-ChsGqxH_.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-k0j3gHgH.js";import"./TokyoUICheck-BMIsD36S.js";import"./breakpoints-BfMlrtxE.js";import"./useOpenInteractionType-BkuUI9ak.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-qlqSh81O.js";import"./PortalElementProvider-BAqvxZzH.js";import"./index-Cc-bXjHe.js";import"./index-BqT8peiM.js";import"./VisuallyHidden-CZd13GOS.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./useControllableState-DKskwY-e.js";import"./message-CSdaKtIj.js";import"./render-icon-BT0Aq7PA.js";import"./ButtonBase-h431KMrY.js";import"./Spinner-qiZily8k.js";import"./classNames-9hsFPPZv.js";import"./defaults-_YAxqn11.js";import"./useMergeRefs-SFH7Mw4x.js";import"./useHostname-PsilflFC.js";import"./index-CC6DAVyL.js";import"./text-accent-VILyY3zt.js";import"./constants-5om8Ptru.js";import"./Steps-BnIR8N56.js";import"./Heading-CzIRSKAr.js";import"./text-centered-BFb64PJw.js";import"./ProgressSteps-BfCnfM68.js";import"./Text-DVl1HBkZ.js";import"./TokyoUIClose-thK8sk63.js";import"./shared-strings-DFzxd8lM.js";import"./OnboardingTooltip-DVeLAHtQ.js";import"./index-CUHsGBvM.js";import"./index-2TVOn9du.js";import"./index-DR63UjCN.js";const u={onOpenChange:m(),items:{transferBalance:m(),addExtraHours:m(),currency:m(),language:m()}},An={title:"Components/DropdownMenu",component:ee,subcomponents:{DropdownMenuItem:r,DropdownMenuGroup:w,DropdownSubmenu:C,DropdownMenuRadioGroup:Z,DropdownMenuRadioItem:H,DropdownMenuCheckboxItem:I,DropdownMenuSelect:j,DropdownMenuSelectOption:B},parameters:{preventIframeFromScrollingParent:!0,layout:"fullscreen",docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[e=>a.jsx("div",{style:{height:"100%",padding:24,display:"flex",justifyContent:"center"},children:a.jsx(e,{})})],args:{onOpenChange:u.onOpenChange,trigger:a.jsx(ae,{children:"Settings"}),children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(r,{label:"Add extra hours",onClick:u.items.addExtraHours})]})}},ne={tags:["!autodocs","!dev"],args:{defaultOpen:!0}},v=t.anything(),V={play:async({canvas:e,step:n,args:i})=>{await n("Initially closed",async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!0,v)}),await n("Click outside to close the menu",async()=>{await o.click(document.body),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!1,v)}),await n("Open dropdown again",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Transfer balance"',async()=>{await o.click(e.getByRole("menuitem",{name:"Transfer balance"})),t(u.items.transferBalance).toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,v)})}},oe={tags:["!autodocs"],args:{defaultOpen:!0},play:async({canvas:e,step:n})=>{await n("Initially open",async()=>{await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await o.click(document.body),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,v)})}};let le;const T={decorators:[(e,n)=>{const[i,l]=g.useState(!!n.args.open);le=l;const c=(d,b)=>{var y,h;l(d),(h=(y=n.args).onOpenChange)==null||h.call(y,d,b)};return a.jsx(e,{args:{...n.args,open:i,onOpenChange:c}})}],args:{open:!1},play:async({canvas:e,step:n,args:i})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!0,v)}),await n("Click outside to close the menu",async()=>{await o.click(document.body),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!1,v)}),await n("Open dropdown via open prop",async()=>{u.onOpenChange.mockClear(),le(!0),await s(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(i.onOpenChange).not.toHaveBeenCalled()}),await n("Close dropdown via open prop",async()=>{u.onOpenChange.mockClear(),le(!1),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(i.onOpenChange).not.toHaveBeenCalled()})}},ie={...T,tags:["!autodocs"],args:{...T.args,open:!0},play:async({canvas:e,step:n,args:i})=>{await n("Initially open",async()=>{await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await o.click(document.body),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(i.onOpenChange).toHaveBeenLastCalledWith(!1,v)})}},L={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(r,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Add extra hours"',async()=>{u.onOpenChange.mockClear();const i=e.getByRole("menuitem",{name:"Add extra hours"});t(i).toHaveAttribute("aria-disabled","true"),await o.click(i),t(u.items.addExtraHours).not.toHaveBeenCalled(),t(u.onOpenChange).not.toHaveBeenCalled(),t(e.queryByRole("menu")).toBeVisible()})}},N={args:{trigger:a.jsx(ae,{children:"Language"}),children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Español",description:"Spanish"}),a.jsx(r,{label:"Українська",description:"Ukrainian"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Language"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Verify items a11y names and descriptions",async()=>{const i=e.getByRole("menuitem",{name:"Español"});t(i).toHaveAccessibleName("Español"),t(i).toHaveAccessibleDescription("Spanish");const l=e.getByRole("menuitem",{name:"Українська"});t(l).toHaveAccessibleName("Українська"),t(l).toHaveAccessibleDescription("Ukrainian")})}},W={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(w,{label:"Region",children:[a.jsx(r,{label:"Currency"}),a.jsx(r,{label:"Language"}),a.jsx(r,{label:"Time zone"})]}),a.jsxs(w,{label:"Subscription",children:[a.jsx(r,{label:"Transfer balance"}),a.jsx(r,{label:"Add extra hours"})]})]})}},U={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"User profile"}),a.jsx(r,{label:"Payments & subscriptions"}),a.jsx(St,{}),a.jsx(r,{label:"Logout"})]})}},z={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(w,{label:"Icons",children:[a.jsx(r,{leadingElement:a.jsx(k,{svg:Rt,size:"24"}),label:"Reschedule"}),a.jsx(r,{leadingElement:a.jsx(k,{svg:Dt,size:"24"}),label:"Message tutor"})]}),a.jsxs(w,{label:"Flags",children:[a.jsx(r,{leadingElement:a.jsx(de,{code:"es",alt:"",size:"medium"}),label:"Spain"}),a.jsx(r,{leadingElement:a.jsx(de,{code:"ua",alt:"",size:"medium"}),label:"Ukraine"})]}),a.jsxs(w,{label:"Avatars",children:[a.jsx(r,{leadingElement:a.jsx(me,{size:"24"}),label:"Kobe B."}),a.jsx(r,{leadingElement:a.jsx(me,{size:"24"}),label:"Jenny R."})]})]})}},ce=g.forwardRef(function({to:n,...i},l){return a.jsx("a",{href:n,...i,ref:l})});ce.displayName="Link";const f={findATutor:m(e=>{e.preventDefault()}),becomeATutor:m(e=>{e.preventDefault()}),myLessons:m(e=>{e.preventDefault()}),referAFriend:m(e=>{e.preventDefault()})},G={args:{trigger:a.jsx(ae,{children:"Links"}),children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Find a Tutor",onClick:f.findATutor,as:a.jsx("a",{href:"/en/online/english-tutors"})}),a.jsx(r,{label:"Become a Tutor",onClick:f.becomeATutor,as:a.jsx("a",{href:"/en/teach"}),disabled:!0}),a.jsx(r,{label:"My Lessons",onClick:f.myLessons,as:a.jsx(ce,{to:"/en/lessons"})}),a.jsx(r,{label:"Refer a Friend",onClick:f.referAFriend,as:a.jsx(ce,{to:"/en/referral"}),disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Links"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Assert links are rendered correctly",async()=>{const i=e.getByRole("menuitem",{name:"Find a Tutor"});t(i.tagName).toBe("A"),t(i).toHaveAttribute("href","/en/online/english-tutors");const l=e.getByRole("menuitem",{name:"Become a Tutor"});t(l.tagName).toBe("A"),t(l).toHaveAttribute("href","/en/teach"),t(l).toHaveAttribute("aria-disabled","true");const c=e.getByRole("menuitem",{name:"My Lessons"});t(c.tagName).toBe("A"),t(c).toHaveAttribute("href","/en/lessons");const d=e.getByRole("menuitem",{name:"Refer a Friend"});t(d.tagName).toBe("A"),t(d).toHaveAttribute("href","/en/referral"),t(d).toHaveAttribute("aria-disabled","true")}),await n('Click on "Find a Tutor"',async()=>{const i=e.getByRole("menuitem",{name:"Find a Tutor"});await o.click(i),t(f.findATutor).toHaveBeenCalled()}),await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Links"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Become a Tutor"',async()=>{const i=e.getByRole("menuitem",{name:"Become a Tutor"});await o.click(i),t(f.becomeATutor).not.toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "My Lessons"',async()=>{const i=e.getByRole("menuitem",{name:"My Lessons"});await o.click(i),t(f.myLessons).toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})}),await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Links"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Refer a Friend"',async()=>{const i=e.getByRole("menuitem",{name:"Refer a Friend"});await o.click(i),t(f.referAFriend).not.toHaveBeenCalled()})}},x={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},P={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(w,{label:"Day of the week",children:a.jsx(Z,{defaultValue:"mon",onValueChange:x.dayOfTheWeek,items:[{label:"Monday",value:"mon"},{label:"Tuesday",value:"tue"},{label:"Wednesday",value:"wed"},{label:"Thursday",value:"thu"},{label:"Friday",value:"fri"},{label:"Saturday",value:"sat",disabled:!0},{label:"Sunday",value:"sun",disabled:!0}]})}),a.jsx(w,{label:"Time of the day",children:a.jsxs(Z,{onValueChange:x.timeOfTheDay,children:[a.jsx(H,{label:"Morning",value:"morning"}),a.jsx(H,{label:"Afternoon",value:"afternoon"})]})}),a.jsx(w,{label:"Frequency",children:a.jsxs(Z,{value:"once",onValueChange:x.frequency,disabled:!0,children:[a.jsx(H,{label:"Once",value:"once"}),a.jsx(H,{label:"Weekly",value:"weekly"})]})})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})});const i=e.getByRole("menuitemradio",{name:"Monday"}),l=e.getByRole("menuitemradio",{name:"Tuesday"}),c=e.getByRole("menuitemradio",{name:"Saturday"});await n("Day of the week: default value is selected",async()=>{t(i).toHaveAttribute("aria-checked","true")}),await n('Click on "Tuesday"',async()=>{await o.click(l),t(x.dayOfTheWeek).toHaveBeenCalledWith("tue"),await s(()=>{t(i).toHaveAttribute("aria-checked","false"),t(l).toHaveAttribute("aria-checked","true")})}),await n('Click on "Saturday"',async()=>{x.dayOfTheWeek.mockClear(),await o.click(c),t(x.dayOfTheWeek).not.toHaveBeenCalled(),await s(()=>{t(l).toHaveAttribute("aria-checked","true")})});const d=e.getByRole("menuitemradio",{name:"Morning"}),b=e.getByRole("menuitemradio",{name:"Afternoon"});await n("Time of the day: none is selected",async()=>{t(d).toHaveAttribute("aria-checked","false"),t(b).toHaveAttribute("aria-checked","false")}),await n('Click on "Morning"',async()=>{await o.click(d),t(x.timeOfTheDay).toHaveBeenCalledWith("morning"),await s(()=>{t(d).toHaveAttribute("aria-checked","true")})});const y=e.getByRole("menuitemradio",{name:"Once"}),h=e.getByRole("menuitemradio",{name:"Weekly"});await n("Frequency: everything is disabled, once is selected",async()=>{t(y).toHaveAttribute("aria-disabled","true"),t(h).toHaveAttribute("aria-disabled","true"),t(y).toHaveAttribute("aria-checked","true"),t(h).toHaveAttribute("aria-checked","false")}),await n('Click on "Weekly"',async()=>{await o.click(h),t(x.frequency).not.toHaveBeenCalled(),await s(()=>{t(y).toHaveAttribute("aria-checked","true")})})}},R={email:m(),sms:m(),push:m(),alerts:m()},K={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(I,{label:"Email notifications",onCheckedChange:R.email,defaultChecked:!0}),a.jsx(I,{label:"SMS notifications",onCheckedChange:R.sms}),a.jsx(I,{label:"Push notifications",onCheckedChange:R.push,disabled:!0}),a.jsx(I,{label:"System alerts (required)",onCheckedChange:R.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})});const i=e.getByRole("menuitemcheckbox",{name:"Email notifications"}),l=e.getByRole("menuitemcheckbox",{name:"SMS notifications"}),c=e.getByRole("menuitemcheckbox",{name:"Push notifications"}),d=e.getByRole("menuitemcheckbox",{name:"System alerts (required)"});await n("Email notifications is checked by default",async()=>{t(i).toHaveAttribute("aria-checked","true")}),await n('Uncheck "Email notifications"',async()=>{await o.click(i),t(R.email).toHaveBeenCalledWith(!1,v),await s(()=>{t(i).toHaveAttribute("aria-checked","false")})}),await n('"SMS notifications" is not checked',async()=>{t(l).toHaveAttribute("aria-checked","false")}),await n('Check "SMS notifications"',async()=>{await o.click(l),t(R.sms).toHaveBeenCalledWith(!0,v),await s(()=>{t(l).toHaveAttribute("aria-checked","true")})}),await n('"Push notifications" is disabled and not checked',async()=>{t(c).toHaveAttribute("aria-disabled","true"),t(c).toHaveAttribute("aria-checked","false")}),await n('Click on "Push notifications"',async()=>{await o.click(c),t(R.push).not.toHaveBeenCalled(),await s(()=>{t(c).toHaveAttribute("aria-checked","false")})}),await n('"System alerts (required)" is disabled and checked',async()=>{t(d).toHaveAttribute("aria-disabled","true"),t(d).toHaveAttribute("aria-checked","true")}),await n('Click on "System alerts (required)"',async()=>{await o.click(d),t(R.alerts).not.toHaveBeenCalled(),await s(()=>{t(d).toHaveAttribute("aria-checked","true")})})}},q={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},F=e=>{const[n,i]=g.useState("mon"),[l,c]=g.useState(),d=y=>{i(y),q.dayOfTheWeek(y)},b=y=>{c(y),q.timeOfTheDay(y)};return a.jsxs(ee,{...e,children:[a.jsx(j,{label:"Day of the week",value:n,onValueChange:d,items:[{label:"Monday",value:"mon"},{label:"Tuesday",value:"tue"},{label:"Wednesday",value:"wed"},{label:"Thursday",value:"thu"},{label:"Friday",value:"fri"},{label:"Saturday",value:"sat",disabled:!0},{label:"Sunday",value:"sun",disabled:!0}]}),a.jsxs(j,{label:"Time of the day",defaultValue:l,onValueChange:b,children:[a.jsx(B,{value:"morning",label:"Morning"}),a.jsx(B,{value:"afternoon",label:"Afternoon"})]}),a.jsxs(j,{label:"Frequency",onValueChange:q.frequency,disabled:!0,children:[a.jsx(B,{label:"Once",value:"once"}),a.jsx(B,{label:"Weekly",value:"weekly"})]})]})};F.play=async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})});const i=e.getByRole("menuitem",{name:/^Day of the week/});await n("Day of the week: default value is selected",async()=>{t(i).toHaveAccessibleName(/Selected: Monday$/)}),await n("Open day of the week submenu",async()=>{await o.hover(i),await s(()=>{t(e.queryByRole("menu",{name:/^Day of the week/})).toBeVisible()})}),await n('Click on "Tuesday"',async()=>{await o.click(e.getByRole("menuitemradio",{name:"Tuesday"})),t(q.dayOfTheWeek).toHaveBeenCalledWith("tue"),await s(()=>{t(e.queryByRole("menu",{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),t(i).toHaveAccessibleName(/Selected: Tuesday$/)})});const l=e.getByRole("menuitem",{name:/^Time of the day/});await n("Time of the day: nothing is selected",async()=>{t(l).toHaveAccessibleName("Time of the day")}),await n("Open time of the day submenu",async()=>{l.focus(),await o.keyboard(" "),await s(()=>{t(e.queryByRole("menu",{name:/^Time of the day/})).toBeVisible()})}),await n('Click on "Morning"',async()=>{await o.click(e.getByRole("menuitemradio",{name:"Morning"})),t(q.timeOfTheDay).toHaveBeenCalledWith("morning"),await s(()=>{t(e.queryByRole("menu",{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),t(l).toHaveAccessibleName(/Selected: Morning$/)})}),await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Frequency is disabled",async()=>{const c=e.getByRole("menuitem",{name:"Frequency"});t(c).toHaveAttribute("aria-disabled","true"),await o.click(c,{pointerEventsCheck:0}),t(q.frequency).not.toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu",{name:"Frequency",hidden:!0})).not.toBeVisible()})})};const O={args:{children:a.jsxs(a.Fragment,{children:[a.jsxs(C,{label:"Region",children:[a.jsx(r,{label:"Currency"}),a.jsx(r,{label:"Language"}),a.jsx(r,{label:"Time zone"})]}),a.jsxs(C,{label:"Subscription",children:[a.jsx(r,{label:"Transfer balance"}),a.jsx(r,{label:"Add extra hours"})]}),a.jsxs(C,{label:"Integrations",disabled:!0,children:[a.jsx(r,{label:"Connect calendar"}),a.jsx(r,{label:"Slack integration"}),a.jsx(r,{label:"Email sync"})]})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})});const i=e.getByRole("menuitem",{name:"Region"});await n("Region submenu opens on hover",async()=>{await o.hover(i),await s(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Region submenu closes on hover out",async()=>{await o.unhover(i),await s(()=>{t(e.queryByRole("menu",{name:"Region"})).not.toBeInTheDocument()})}),await n("Integrations submenu is disabled",async()=>{const l=e.getByRole("menuitem",{name:"Integrations"});t(l).toHaveAttribute("aria-disabled","true"),await o.click(l),await s(()=>{t(e.queryByRole("menu",{name:"Integrations"})).not.toBeInTheDocument()})})}},{Provider:ft,Step:S}=Ot();ft.displayName="Tour.Provider";S.displayName="Tour.Step";const Y={parameters:{docs:{source:{type:"dynamic"}}},decorators:[e=>{const[n,i]=g.useState(0),l=()=>i(n+1);return a.jsxs(a.Fragment,{children:[a.jsx(e,{},n),a.jsx("div",{style:{position:"fixed",left:0,bottom:0,margin:8},children:a.jsx(ae,{variant:"ghost",size:"small",onClick:l,children:"Reset story"})})]})}],render:function(){const[n,i]=g.useState(!1),[l,c]=g.useState(!1),[d,b]=g.useState(!1),y=xt=>{switch(xt){case 1:i(!0);return;case 3:c(!0);return;case 5:b(!0);return}},h=()=>{i(!1),c(!1),b(!1)};return a.jsx(ft,{totalSteps:6,onStepChange:y,onComplete:h,onClose:h,children:a.jsx(S,{step:0,title:"New settings menu",text:"All settings are now in one place.",children:a.jsxs(ee,{open:n,onOpenChange:i,trigger:a.jsx(Tt,{svg:Ct,variant:"ghost",assistiveText:"Settings"}),children:[a.jsx(S,{step:1,title:"Transfer balance",text:"You can now transfer your balance to another tutor.",side:"right",children:a.jsx(r,{label:"Transfer balance"})}),a.jsx(r,{label:"Add extra hours"}),a.jsx(S,{step:2,title:"Region",text:"Region settings are grouped together.",side:"top",children:a.jsxs(C,{label:"Region",keepMounted:!0,open:l,onOpenChange:c,children:[a.jsx(r,{label:"Language"}),a.jsx(S,{step:3,title:"Time zone",text:"You can now select your time zone.",side:"right",children:a.jsx(r,{label:"Time zone"})})]})}),a.jsx(S,{step:4,title:"Currency",text:"Currency settings moved here.",side:"right",children:a.jsxs(j,{open:d,onOpenChange:b,defaultValue:"USD",label:"Currency",children:[a.jsx(B,{value:"USD",label:"US Dollar"}),a.jsx(B,{value:"EUR",label:"Euro"}),a.jsx(S,{step:5,title:"New currency!",text:"Pay and receive payments in british pounds.",children:a.jsx(B,{value:"GBP",label:"British Pound"})})]})})]})})})},play:async({canvas:e,step:n})=>{await n("Tour tooltip should be visible",async()=>{await s(()=>{t(e.getByRole("dialog",{name:"New settings menu"})).toBeVisible()})}),await n("Click Next to advance to second step",async()=>{await o.click(e.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"Transfer balance"})).toBeVisible(),t(e.getByRole("menu")).toBeVisible()})}),await n("Click Next to advance to third step",async()=>{const i=te(e.getByRole("dialog",{name:"Transfer balance"}));await o.click(i.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fourth step",async()=>{const i=te(e.getByRole("dialog",{name:"Region"}));await o.click(i.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"Time zone"})).toBeVisible(),t(e.getByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fifth step",async()=>{const i=te(e.getByRole("dialog",{name:"Time zone"}));await o.click(i.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"Currency"})).toBeVisible()})}),await n("Click Next to advance to the last step",async()=>{const i=te(e.getByRole("dialog",{name:"Currency"}));await o.click(i.getByRole("button",{name:"Next"})),await s(()=>{t(e.getByRole("dialog",{name:"New currency!"})).toBeVisible(),t(e.getByRole("menu",{name:/Currency/})).toBeVisible()})}),await o.click(e.getByRole("button",{name:"Reset story"}))}},se=e=>{if(!e)return!1;const{top:n,left:i,bottom:l,right:c}=e.getBoundingClientRect();return!(n>=window.innerHeight||l<=0||i>=window.innerWidth||c<=0)},$={args:{keepMounted:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Transfer balance"}),a.jsx(r,{label:"Add extra hours"}),a.jsxs(C,{label:"Region",keepMounted:!0,children:[a.jsx(r,{label:"Currency"}),a.jsx(r,{label:"Language"}),a.jsx(r,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const i=await e.findByRole("menu",{name:"Settings",hidden:!0}),l=await e.findByRole("menu",{name:"Region",hidden:!0});await n("Menus are mounted, but not visible",async()=>{t(i).toBeInTheDocument(),t(i).not.toBeVisible(),t(l).toBeInTheDocument(),t(l).not.toBeVisible()}),await n("Open the menu",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(i).toBeVisible()})}),await n("Submenu is visible",async()=>{await o.click(e.getByRole("menuitem",{name:"Region"})),await s(()=>{t(l).toBeVisible()})}),await n("Close the menu. Menus should remain mounted",async()=>{await o.keyboard("{Tab}"),await s(()=>{t(i).not.toBeVisible(),t(l).not.toBeVisible()}),t(i).toBeInTheDocument(),t(l).toBeInTheDocument()})}},E={args:O.args,globals:{viewport:{value:"narrow-l",isRotated:!1}},parameters:{layout:"centered"},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Region"',async()=>{await o.click(e.getByRole("menuitem",{name:"Region"})),await s(async()=>{t(se(e.queryByRole("menu",{name:"Settings"})),"Main menu should be hidden").toBe(!1),t(se(e.queryByRole("menu",{name:"Region"})),"Submenu should be visible").toBe(!0)})}),await n("Tap away to return to main menu",async()=>{const i=e.getByRole("menu",{name:"Region"}).closest("[data-base-ui-portal]").querySelector("[data-backdrop]");await o.click(i),await s(async()=>{t(se(e.queryByRole("menu",{name:"Region"})),"Submenu should be hidden").toBe(!1),t(se(e.queryByRole("menu",{name:"Settings"})),"Main menu should be visible").toBe(!0)})}),await n("Tap away to close menu",async()=>{await o.click(document.querySelector("[data-backdrop]")),await s(async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})})}},M={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(r,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0}),a.jsxs(C,{label:"Region",children:[a.jsx(r,{label:"Currency",onClick:u.items.currency}),a.jsx(r,{label:"Language",onClick:u.items.language}),a.jsx(r,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const i=e.getByRole("button",{name:"Settings"});await n("Focus on the trigger element",async()=>{i.focus()}),await n("Open the menu via Enter key. First item should be focused",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Close the menu via Escape key. Trigger should be focused",async()=>{await o.keyboard("{Escape}"),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(i).toHaveFocus()})}),await n("Open the menu via Space key. First item should be focused",async()=>{await o.keyboard(" "),await s(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Select the first item via Enter key. Menu should be closed and trigger should be focused",async()=>{await o.keyboard("{Enter}"),t(u.items.transferBalance).toHaveBeenCalled(),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(i).toHaveFocus()})}),await n("Open the menu via Enter key. First item should be focused",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Navigate through the menu using Arrow keys",async()=>{await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()}),await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()}),await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()}),await o.keyboard("{ArrowUp}"),await o.keyboard("{ArrowUp}"),await s(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()})}),await n("Enter key does nothing for disabled item",async()=>{await o.keyboard("{Enter}"),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Space key does nothing for disabled item",async()=>{await o.keyboard(" "),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Navigate to submenu trigger using Arrow down key",async()=>{await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open the submenu via Enter key. First item should be focused",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Arrow left key. Submenu trigger should be focused",async()=>{await o.keyboard("{ArrowLeft}"),await s(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Arrow right key. First item should be focused",async()=>{await o.keyboard("{ArrowRight}"),await s(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Escape key. Submenu trigger should be focused",async()=>{await o.keyboard("{Escape}"),await s(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Enter key. First item should be focused",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Close the menu via Tab key. Trigger should be focused",async()=>{await o.keyboard("{Tab}"),await s(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(i).toHaveFocus()})})}},re={...M,globals:E.globals,parameters:E.parameters,tags:["!autodocs"]},_={args:{defaultOpen:!0,children:a.jsx(a.Fragment,{children:Array.from({length:100}).map((e,n)=>a.jsx(r,{label:`Item ${n+1}`},n))})}},p=Array.from({length:5}).map(()=>"I won't use long labels for menu items.").join(" "),J={args:{defaultOpen:!0,children:a.jsxs(w,{label:p,children:[a.jsx(r,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p}),a.jsx(C,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p,children:a.jsx(r,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p})}),a.jsx(j,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p,defaultValue:"1",children:a.jsx(B,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p,value:"1"})}),a.jsx(I,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p}),a.jsx(Z,{defaultValue:"1",children:a.jsx(H,{leadingElement:a.jsx(k,{size:"24",svg:D}),label:p,description:p,value:"1"})})]})}},Q={args:O.args,render:function(n){const[i,l]=g.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(ae,{onClick:()=>l(!0),children:"Open dialog"}),a.jsx(ue,{open:i,onClose:()=>l(!1),title:"Dialog",children:a.jsx(ee,{...n})})]})},play:async({canvas:e,step:n})=>{await n("Open dialog",async()=>{await o.click(e.getByRole("button",{name:"Open dialog"})),await s(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Open dropdown with mouse",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible()})}),await n("Open Region submenu with mouse",async()=>{await o.click(e.getByRole("menuitem",{name:"Region"})),await s(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click on Currency item",async()=>{await o.click(e.getByRole("menuitem",{name:"Currency"})),await s(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Open dropdown with keyboard",async()=>{e.getByRole("button",{name:"Settings"}).focus(),await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open Region submenu with keyboard",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate to Language item with keyboard",async()=>{await o.keyboard("{ArrowDown}"),await s(()=>{t(e.getByRole("menuitem",{name:"Language"})).toHaveFocus()})}),await n("Select Language item with keyboard",async()=>{await o.keyboard("{Enter}"),await s(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Close dialog",async()=>{await o.keyboard("{Escape}"),await s(()=>{t(e.queryByRole("dialog",{name:"Dialog"})).not.toBeInTheDocument()})})}},A={render:function(n){const[i,l]=g.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(ee,{...n,children:a.jsx(r,{label:"Open dialog",onClick:()=>l(!0)})}),a.jsx(ue,{title:"Dialog",open:i,onClose:()=>l(!1),children:"Dialog content"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await o.click(e.getByRole("button",{name:"Settings"})),await s(()=>{t(e.getByRole("menu")).toBeVisible()})}),await n("Open dialog",async()=>{await o.click(e.getByRole("menuitem",{name:"Open dialog"})),await s(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Close dialog",async()=>{await o.keyboard("{Escape}")})}},Et=()=>{const[e,n]=g.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(r,{label:"Open dialog",onClick:()=>n(!0)}),a.jsx(ue,{title:"Dialog",open:e,onClose:()=>n(!1),children:"Dialog content"})]})},X={args:{keepMounted:!0,children:a.jsx(Et,{})},play:A.play};var pe,ye,ge;ne.parameters={...ne.parameters,docs:{...(pe=ne.parameters)==null?void 0:pe.docs,source:{originalSource:`{
   tags: ['!autodocs', '!dev'],
   args: {
     defaultOpen: true

package/dist/assets/{FormControl.stories-Buu_5XI0.js → FormControl.stories-Ybw0qxva.js}

@@ -1,4 +1,4 @@
-import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{F as x}from"./FormControl-BIPOTQBb.js";import{d as r}from"./styled-components.browser.esm-COuAnjOv.js";import{r as j}from"./index-Cb9e4tly.js";import{I as k}from"./Icon-BvqvxBCF.js";import{F as $}from"./TokyoUIUpload-Bf0gWv4M.js";import{T as L}from"./Text-D8nK9Gef.js";import{g as e}from"./getTokenVar-4Jlty0xz.js";import{c as d,s as p,r as S}from"./tokens-BYLcI6Lk.js";import"./index-ChsGqxH_.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-qlqSh81O.js";import"./message-CSdaKtIj.js";import"./componentNames-k0j3gHgH.js";import"./index-Cc-bXjHe.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-VILyY3zt.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./defaults-_YAxqn11.js";import"./text-centered-BFb64PJw.js";import"./constants-DTpaCXm6.js";const nt={title:"Components/FormControl",component:x,parameters:{layout:"padded"}},o=()=>{const b=r.input.attrs({type:"file"})`
+import{j as t}from"./jsx-runtime-BTJTZTIL.js";import{F as x}from"./FormControl-BIPOTQBb.js";import{d as r}from"./styled-components.browser.esm-COuAnjOv.js";import{r as j}from"./index-Cb9e4tly.js";import{I as k}from"./Icon-BsfKiFZj.js";import{F as $}from"./TokyoUIUpload-Bf0gWv4M.js";import{T as L}from"./Text-DVl1HBkZ.js";import{g as e}from"./getTokenVar-4Jlty0xz.js";import{c as d,s as p,r as S}from"./tokens-BYLcI6Lk.js";import"./index-ChsGqxH_.js";import"./index-DWSmmBvQ.js";import"./tslib.es6-C7pnyCjR.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-qlqSh81O.js";import"./message-CSdaKtIj.js";import"./componentNames-k0j3gHgH.js";import"./index-Cc-bXjHe.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-VILyY3zt.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./defaults-_YAxqn11.js";import"./text-centered-BFb64PJw.js";import"./constants-DTpaCXm6.js";const nt={title:"Components/FormControl",component:x,parameters:{layout:"padded"}},o=()=>{const b=r.input.attrs({type:"file"})`
         visibility: hidden;
         position: absolute;
         width: 0;

package/dist/assets/{Heading-DBysGv9G.js → Heading-CzIRSKAr.js}

@@ -1 +1 @@
-import{j as f}from"./jsx-runtime-BTJTZTIL.js";import{r as w}from"./index-Cb9e4tly.js";import{g as h}from"./text-accent-VILyY3zt.js";import{g as y}from"./text-centered-BFb64PJw.js";import{f as x}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as N,s as L}from"./classNames-9hsFPPZv.js";import{w as e}from"./componentNames-k0j3gHgH.js";import{g as C}from"./index-qlqSh81O.js";const b="Heading__Erkb1",k={Heading:b,"Heading--variant-massive":"Heading--variant-massive__JFGji","Heading--variant-huge":"Heading--variant-huge__47FQz","Heading--variant-extraLarge":"Heading--variant-extraLarge__xRrqx","Heading--variant-large":"Heading--variant-large__wNK6S","Heading--variant-medium":"Heading--variant-medium__bCNZ-","Heading--variant-small":"Heading--variant-small__308Nb","Heading--narrow-l--variant-massive":"Heading--narrow-l--variant-massive__yg4AJ","Heading--narrow-l--variant-huge":"Heading--narrow-l--variant-huge__y9b4N","Heading--narrow-l--variant-extraLarge":"Heading--narrow-l--variant-extraLarge__XgyJu","Heading--narrow-l--variant-large":"Heading--narrow-l--variant-large__tzTo6","Heading--narrow-l--variant-medium":"Heading--narrow-l--variant-medium__iP3sG","Heading--narrow-l--variant-small":"Heading--narrow-l--variant-small__KeKjn","Heading--medium-s--variant-massive":"Heading--medium-s--variant-massive__L-b4J","Heading--medium-s--variant-huge":"Heading--medium-s--variant-huge__2o5EA","Heading--medium-s--variant-extraLarge":"Heading--medium-s--variant-extraLarge__eHmYu","Heading--medium-s--variant-large":"Heading--medium-s--variant-large__AI3KL","Heading--medium-s--variant-medium":"Heading--medium-s--variant-medium__t5dUK","Heading--medium-s--variant-small":"Heading--medium-s--variant-small__fCdNa","Heading--medium-l--variant-massive":"Heading--medium-l--variant-massive__jI3FW","Heading--medium-l--variant-huge":"Heading--medium-l--variant-huge__k0UpW","Heading--medium-l--variant-extraLarge":"Heading--medium-l--variant-extraLarge__yfai7","Heading--medium-l--variant-large":"Heading--medium-l--variant-large__65QTG","Heading--medium-l--variant-medium":"Heading--medium-l--variant-medium__UvxHB","Heading--medium-l--variant-small":"Heading--medium-l--variant-small__QI2p2","Heading--wide-s--variant-massive":"Heading--wide-s--variant-massive__B1S84","Heading--wide-s--variant-huge":"Heading--wide-s--variant-huge__KvYrn","Heading--wide-s--variant-extraLarge":"Heading--wide-s--variant-extraLarge__TJs8l","Heading--wide-s--variant-large":"Heading--wide-s--variant-large__Wcc0E","Heading--wide-s--variant-medium":"Heading--wide-s--variant-medium__mONpk","Heading--wide-s--variant-small":"Heading--wide-s--variant-small__oRKSN","Heading--wide-l--variant-massive":"Heading--wide-l--variant-massive__twgw-","Heading--wide-l--variant-huge":"Heading--wide-l--variant-huge__DBuNF","Heading--wide-l--variant-extraLarge":"Heading--wide-l--variant-extraLarge__H9nEI","Heading--wide-l--variant-large":"Heading--wide-l--variant-large__kJarT","Heading--wide-l--variant-medium":"Heading--wide-l--variant-medium__VN27E","Heading--wide-l--variant-small":"Heading--wide-l--variant-small__Skmxk"},i=w.forwardRef(function({children:r,variant:t,accent:a,tag:l,centered:d,dataset:s,id:m,...u},g){const v=l||"h1",o=N(k,e.Heading,L("variant",t)),H=y(d),_=h(!a,a),c=[...o,...H,..._],p={...x(u),className:c.join(" "),...C(s,{preplyDsComponent:e.Heading}),id:m,ref:g};return f.jsx(v,{...p,children:r})});try{i.displayName="Heading",i.__docgenInfo={description:"",displayName:"Heading",props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:"strong",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"critical"'},{value:'"inverted"'},{value:'"info"'},{value:'"positive"'},{value:'"warning"'},{value:'"accentDark"'},{value:'"placeholder"'}]}},centered:{defaultValue:null,description:"",name:"centered",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!0,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:'"massive"'},{value:'"huge"'},{value:'"extraLarge"'},{value:"ResponsiveProp<HeadingVariant>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!0,type:{name:"enum",value:[{value:'"div"'},{value:'"p"'},{value:'"span"'},{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLHeadingElement | null) => void"},{value:"RefObject<HTMLHeadingElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{i as H};
+import{j as f}from"./jsx-runtime-BTJTZTIL.js";import{r as w}from"./index-Cb9e4tly.js";import{g as h}from"./text-accent-VILyY3zt.js";import{g as y}from"./text-centered-BFb64PJw.js";import{f as x}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as N,s as L}from"./classNames-9hsFPPZv.js";import{w as e}from"./componentNames-k0j3gHgH.js";import{g as C}from"./index-qlqSh81O.js";const b="Heading__Erkb1",k={Heading:b,"Heading--variant-massive":"Heading--variant-massive__JFGji","Heading--variant-huge":"Heading--variant-huge__47FQz","Heading--variant-extraLarge":"Heading--variant-extraLarge__xRrqx","Heading--variant-large":"Heading--variant-large__wNK6S","Heading--variant-medium":"Heading--variant-medium__bCNZ-","Heading--variant-small":"Heading--variant-small__308Nb","Heading--narrow-l--variant-massive":"Heading--narrow-l--variant-massive__yg4AJ","Heading--narrow-l--variant-huge":"Heading--narrow-l--variant-huge__y9b4N","Heading--narrow-l--variant-extraLarge":"Heading--narrow-l--variant-extraLarge__XgyJu","Heading--narrow-l--variant-large":"Heading--narrow-l--variant-large__tzTo6","Heading--narrow-l--variant-medium":"Heading--narrow-l--variant-medium__iP3sG","Heading--narrow-l--variant-small":"Heading--narrow-l--variant-small__KeKjn","Heading--medium-s--variant-massive":"Heading--medium-s--variant-massive__L-b4J","Heading--medium-s--variant-huge":"Heading--medium-s--variant-huge__2o5EA","Heading--medium-s--variant-extraLarge":"Heading--medium-s--variant-extraLarge__eHmYu","Heading--medium-s--variant-large":"Heading--medium-s--variant-large__AI3KL","Heading--medium-s--variant-medium":"Heading--medium-s--variant-medium__t5dUK","Heading--medium-s--variant-small":"Heading--medium-s--variant-small__fCdNa","Heading--medium-l--variant-massive":"Heading--medium-l--variant-massive__jI3FW","Heading--medium-l--variant-huge":"Heading--medium-l--variant-huge__k0UpW","Heading--medium-l--variant-extraLarge":"Heading--medium-l--variant-extraLarge__yfai7","Heading--medium-l--variant-large":"Heading--medium-l--variant-large__65QTG","Heading--medium-l--variant-medium":"Heading--medium-l--variant-medium__UvxHB","Heading--medium-l--variant-small":"Heading--medium-l--variant-small__QI2p2","Heading--wide-s--variant-massive":"Heading--wide-s--variant-massive__B1S84","Heading--wide-s--variant-huge":"Heading--wide-s--variant-huge__KvYrn","Heading--wide-s--variant-extraLarge":"Heading--wide-s--variant-extraLarge__TJs8l","Heading--wide-s--variant-large":"Heading--wide-s--variant-large__Wcc0E","Heading--wide-s--variant-medium":"Heading--wide-s--variant-medium__mONpk","Heading--wide-s--variant-small":"Heading--wide-s--variant-small__oRKSN","Heading--wide-l--variant-massive":"Heading--wide-l--variant-massive__twgw-","Heading--wide-l--variant-huge":"Heading--wide-l--variant-huge__DBuNF","Heading--wide-l--variant-extraLarge":"Heading--wide-l--variant-extraLarge__H9nEI","Heading--wide-l--variant-large":"Heading--wide-l--variant-large__kJarT","Heading--wide-l--variant-medium":"Heading--wide-l--variant-medium__VN27E","Heading--wide-l--variant-small":"Heading--wide-l--variant-small__Skmxk"},i=w.forwardRef(function({children:r,variant:t,accent:a,tag:l,centered:d,dataset:s,id:m,...u},g){const v=l||"h1",o=N(k,e.Heading,L("variant",t)),H=y(d),_=h(!a,a),c=[...o,...H,..._],p={...x(u),className:c.join(" "),...C(s,{preplyDsComponent:e.Heading}),id:m,ref:g};return f.jsx(v,{...p,children:r})});try{i.displayName="Heading",i.__docgenInfo={description:"",displayName:"Heading",props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:"strong",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"critical"'},{value:'"inverted"'},{value:'"accentDark"'},{value:'"placeholder"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'}]}},centered:{defaultValue:null,description:"",name:"centered",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},variant:{defaultValue:null,description:"",name:"variant",required:!0,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:'"massive"'},{value:'"huge"'},{value:'"extraLarge"'},{value:"ResponsiveProp<HeadingVariant>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!0,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLHeadingElement | null) => void"},{value:"RefObject<HTMLHeadingElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{i as H};

package/dist/assets/{Heading.stories-R56eeA_e.js → Heading.stories-B0-2LbXt.js}

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

package/dist/assets/{Icon-BvqvxBCF.js → Icon-BsfKiFZj.js}

@@ -5,4 +5,4 @@ import{j as m}from"./jsx-runtime-BTJTZTIL.js";import{r as g}from"./index-Cb9e4tl
 @example <caption>Using as react server component</caption>
 import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
 
-<Icon svg={<TokyoUINotesWithPad />} />`,name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"critical"'},{value:'"inverted"'},{value:'"info"'},{value:'"positive"'},{value:'"warning"'},{value:'"accentDark"'},{value:'"placeholder"'}]}},expColor:{defaultValue:null,description:"If passed along with `accent`, `accent` takes precedence.",name:"expColor",required:!1,type:{name:"enum",value:[{value:'"grey-0"'},{value:'"grey-50"'},{value:'"grey-100"'},{value:'"grey-200"'},{value:'"grey-300"'},{value:'"grey-400"'},{value:'"grey-500"'},{value:'"grey-600"'},{value:'"grey-700"'},{value:'"grey-800"'},{value:'"grey-900"'},{value:'"pink-50"'},{value:'"pink-100"'},{value:'"pink-200"'},{value:'"pink-300"'},{value:'"pink-400"'},{value:'"pink-500"'},{value:'"pink-600"'},{value:'"pink-700"'},{value:'"pink-800"'},{value:'"yellow-50"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"yellow-600"'},{value:'"yellow-700"'},{value:'"yellow-800"'},{value:'"blue-50"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"blue-600"'},{value:'"blue-700"'},{value:'"blue-800"'},{value:'"teal-50"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"teal-600"'},{value:'"teal-700"'},{value:'"teal-800"'},{value:'"red-50"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"red-600"'},{value:'"red-700"'},{value:'"red-800"'}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:"label",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{c as I};
+<Icon svg={<TokyoUINotesWithPad />} />`,name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"16"'}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"critical"'},{value:'"inverted"'},{value:'"accentDark"'},{value:'"placeholder"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'}]}},expColor:{defaultValue:null,description:"If passed along with `accent`, `accent` takes precedence.",name:"expColor",required:!1,type:{name:"enum",value:[{value:'"grey-0"'},{value:'"grey-50"'},{value:'"grey-100"'},{value:'"grey-200"'},{value:'"grey-300"'},{value:'"grey-400"'},{value:'"grey-500"'},{value:'"grey-600"'},{value:'"grey-700"'},{value:'"grey-800"'},{value:'"grey-900"'},{value:'"pink-50"'},{value:'"pink-100"'},{value:'"pink-200"'},{value:'"pink-300"'},{value:'"pink-400"'},{value:'"pink-500"'},{value:'"pink-600"'},{value:'"pink-700"'},{value:'"pink-800"'},{value:'"yellow-50"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"yellow-600"'},{value:'"yellow-700"'},{value:'"yellow-800"'},{value:'"blue-50"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"blue-600"'},{value:'"blue-700"'},{value:'"blue-800"'},{value:'"teal-50"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"teal-600"'},{value:'"teal-700"'},{value:'"teal-800"'},{value:'"red-50"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"red-600"'},{value:'"red-700"'},{value:'"red-800"'}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:"label",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{c as I};

package/dist/assets/{Icon-RSC-Ba1UVPLJ.js → Icon-RSC-4fhV_e9B.js}

@@ -1,4 +1,4 @@
-import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as n}from"./index-BN6VMYqa.js";import{M as m,S as s}from"./index-DvPeUp0D.js";import{ServerComponent as i}from"./Icon.stories-DHYosHsQ.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-C2tAe-Qy.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-B-o4vu0Y.js";import"./Icon-BvqvxBCF.js";import"./text-accent-VILyY3zt.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-_YAxqn11.js";import"./options-BM-sJPHZ.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
+import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as n}from"./index-BN6VMYqa.js";import{M as m,S as s}from"./index-CRQycg-8.js";import{ServerComponent as i}from"./Icon.stories-C8lZfyvV.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-C3SpczPa.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-B-o4vu0Y.js";import"./Icon-BsfKiFZj.js";import"./text-accent-VILyY3zt.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-_YAxqn11.js";import"./options-BM-sJPHZ.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
 `,o.jsx(e.h1,{id:"use-icon-as-react-server-component",children:"Use Icon as react server component"}),`
 `,o.jsxs(e.p,{children:["To use Icon as react server component, provide ",o.jsx(e.code,{children:"svg"})," as element:"]}),`
 `,o.jsx(s,{of:i}),`

package/dist/assets/{Icon.stories-DHYosHsQ.js → Icon.stories-C8lZfyvV.js}

@@ -1,4 +1,4 @@
-import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{F as s}from"./TokyoUINotesWithPad-B-o4vu0Y.js";import{I as e}from"./Icon-BvqvxBCF.js";import{E as h}from"./options-BM-sJPHZ.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-VILyY3zt.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-_YAxqn11.js";const R={title:"components/Icon",component:e,parameters:{docs:{description:{component:"To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page)."}}}},t=()=>o.jsxs("div",{style:{display:"flex",alignItems:"end",gap:"4px"},children:[o.jsx(e,{svg:s,size:"16"}),o.jsx(e,{svg:s,size:"24"}),o.jsx(e,{svg:s,size:"32"}),o.jsx(e,{svg:s,size:"48"})]}),n=()=>o.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:h.map(a=>o.jsxs("div",{style:{display:"flex",gap:16},children:[o.jsx(e,{svg:s,expColor:a.id},a.id),o.jsx("span",{children:a.id})]},a.id))}),r=()=>o.jsx(e,{svg:o.jsx(s,{})});r.tags=["!dev","!autodocs"];const i={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:s,dataset:{qaid:"icon"}},argTypes:{svg:{control:!1},dataset:{control:"object"},label:{control:"text"}}};var p,c,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`() => <div style={{
+import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{F as s}from"./TokyoUINotesWithPad-B-o4vu0Y.js";import{I as e}from"./Icon-BsfKiFZj.js";import{E as h}from"./options-BM-sJPHZ.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-VILyY3zt.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-_YAxqn11.js";const R={title:"components/Icon",component:e,parameters:{docs:{description:{component:"To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page)."}}}},t=()=>o.jsxs("div",{style:{display:"flex",alignItems:"end",gap:"4px"},children:[o.jsx(e,{svg:s,size:"16"}),o.jsx(e,{svg:s,size:"24"}),o.jsx(e,{svg:s,size:"32"}),o.jsx(e,{svg:s,size:"48"})]}),n=()=>o.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:h.map(a=>o.jsxs("div",{style:{display:"flex",gap:16},children:[o.jsx(e,{svg:s,expColor:a.id},a.id),o.jsx("span",{children:a.id})]},a.id))}),r=()=>o.jsx(e,{svg:o.jsx(s,{})});r.tags=["!dev","!autodocs"];const i={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:s,dataset:{qaid:"icon"}},argTypes:{svg:{control:!1},dataset:{control:"object"},label:{control:"text"}}};var p,c,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`() => <div style={{
   display: 'flex',
   alignItems: 'end',
   gap: '4px'