@preply/ds-docs 10.0.0 → 11.0.0

package/dist/assets/{DropdownMenu.stories-E-6mIs-U.js → DropdownMenu.stories-DpmKDI1Q.js}

@@ -1,9 +1,9 @@
-import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as L,d as ne,e as x,f,g as s,h as F}from"./DropdownMenu-CB6xg9YD.js";import{B as oe}from"./Button-DS2bg8PO.js";import{I as v}from"./Icon-kphbe0CE.js";import{F as ko,a as Bo}from"./TokyoUISettings-DhHyIlWv.js";import{F as vo}from"./TokyoUIMessages-0is9ybHR.js";import{C as Ie}from"./CountryFlag-BKEpYyWK.js";import{A as je}from"./Avatar-Dlo9b83e.js";import{F as O}from"./TokyoUIEmojiFrowning-Bztw_WuD.js";import{D as Fe}from"./Dialog-DaLOtRn0.js";import{D as xo}from"./Divider-WS0wDfQZ.js";import{I as Ro}from"./IconButton-D4lbFOKH.js";import{c as So}from"./OnboardingTour-m4V6QT-X.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUIChevronRight-UHMBQAxX.js";import"./TokyoUICheck-Cg3ZJnmD.js";import"./breakpoints-BfMlrtxE.js";import"./useOpenInteractionType-B976GY1b.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./VisuallyHidden-GZBFKPVs.js";import"./index-CUvrBGJo.js";import"./useControllableState-DQg81cp5.js";import"./useStableCallback-662ysKf2.js";import"./message-DiUVdAQd.js";import"./componentNames-hc9KR2nX.js";import"./render-icon-DZ6hllTG.js";import"./ButtonBase-sV1YoG7h.js";import"./Spinner-BG27lVzS.js";import"./useMergeRefs-CL5DIjXV.js";import"./useHostname-By9vNKnQ.js";import"./index-CC6DAVyL.js";import"./text-accent-C5-m5mrW.js";import"./constants-5om8Ptru.js";import"./DialogCloseButton-CDDeMFIL.js";import"./TokyoUIClose-DoJfpCh8.js";import"./shared-strings-ZccoNgto.js";import"./OnboardingTooltip-DdKwzkB-.js";import"./Text-C8DrHLQF.js";import"./text-centered-D70wah8Y.js";import"./Heading-BPJGe0Bg.js";import"./index-DOwxXd3L.js";const{fn:m,expect:t,userEvent:i,waitFor:r,within:ie}=__STORYBOOK_MODULE_TEST__,u={onOpenChange:m(),items:{transferBalance:m(),addExtraHours:m(),currency:m(),language:m()}},gi={title:"Components/DropdownMenu",component:F,subcomponents:{DropdownMenuItem:s,DropdownMenuGroup:f,DropdownSubmenu:x,DropdownMenuRadioGroup:ne,DropdownMenuRadioItem:L,DropdownMenuCheckboxItem:V,DropdownMenuSelect:A,DropdownMenuSelectOption:h},parameters:{preventIframeFromScrollingParent:!0,layout:"fullscreen",docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[(e,n)=>a.jsx("div",{style:{height:n.parameters.containerHeight||"100%",padding:24,display:"flex",justifyContent:"center",alignItems:"center"},children:a.jsx(e,{})})],args:{onOpenChange:u.onOpenChange,trigger:a.jsx(oe,{children:"Settings"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours})]})}},re={tags:["!autodocs","!dev"],args:{defaultOpen:!0}},R=t.anything(),W={play:async({canvas:e,step:n,args:o})=>{await n("Initially closed",async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!0,R)}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)}),await n("Open dropdown again",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Transfer balance"',async()=>{await i.click(e.getByRole("menuitem",{name:"Transfer balance"})),t(u.items.transferBalance).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}},se={tags:["!autodocs"],args:{defaultOpen:!0},play:async({canvas:e,step:n})=>{await n("Initially open",async()=>{await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}};let Me;const E={decorators:[(e,n)=>{const[o,l]=b.useState(!!n.args.open);Me=l;const c=(d,k)=>{var g,B;l(d),(B=(g=n.args).onOpenChange)==null||B.call(g,d,k)};return a.jsx(e,{args:{...n.args,open:o,onOpenChange:c}})}],args:{open:!1},play:async({canvas:e,step:n,args:o})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!0,R)}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)}),await n("Open dropdown via open prop",async()=>{u.onOpenChange.mockClear(),Me(!0),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).not.toHaveBeenCalled()}),await n("Close dropdown via open prop",async()=>{u.onOpenChange.mockClear(),Me(!1),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).not.toHaveBeenCalled()})}},le={...E,tags:["!autodocs"],args:{...E.args,open:!0},play:async({canvas:e,step:n,args:o})=>{await n("Initially open",async()=>{await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}},U={parameters:{containerHeight:"500px"},args:{side:"top",align:"start",defaultOpen:!0}},ce={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end",defaultOpen:!0}},ue={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},de={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},me={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},pe={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},ge={tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},ye={tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},z={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Add extra hours"',async()=>{u.onOpenChange.mockClear();const o=e.getByRole("menuitem",{name:"Add extra hours"});t(o).toHaveAttribute("aria-disabled","true"),await i.click(o),t(u.items.addExtraHours).not.toHaveBeenCalled(),t(u.onOpenChange).not.toHaveBeenCalled(),t(e.queryByRole("menu")).toBeVisible()})}},P={args:{trigger:a.jsx(oe,{children:"Language"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Español",description:"Spanish"}),a.jsx(s,{label:"Українська",description:"Ukrainian"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Language"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Verify items a11y names and descriptions",async()=>{const o=e.getByRole("menuitem",{name:"Español"});t(o).toHaveAccessibleName("Español"),t(o).toHaveAccessibleDescription("Spanish");const l=e.getByRole("menuitem",{name:"Українська"});t(l).toHaveAccessibleName("Українська"),t(l).toHaveAccessibleDescription("Ukrainian")})}},G={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(f,{label:"Region",children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]}),a.jsxs(f,{label:"Subscription",children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"})]})]})}},K={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"User profile"}),a.jsx(s,{label:"Payments & subscriptions"}),a.jsx(xo,{}),a.jsx(s,{label:"Logout"})]})}},Y={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(f,{label:"Icons",children:[a.jsx(s,{leadingElement:a.jsx(v,{svg:ko,size:"24"}),label:"Reschedule"}),a.jsx(s,{leadingElement:a.jsx(v,{svg:vo,size:"24"}),label:"Message tutor"})]}),a.jsxs(f,{label:"Flags",children:[a.jsx(s,{leadingElement:a.jsx(Ie,{code:"es",alt:"",size:"medium"}),label:"Spain"}),a.jsx(s,{leadingElement:a.jsx(Ie,{code:"ua",alt:"",size:"medium"}),label:"Ukraine"})]}),a.jsxs(f,{label:"Avatars",children:[a.jsx(s,{leadingElement:a.jsx(je,{size:"24"}),label:"Kobe B."}),a.jsx(s,{leadingElement:a.jsx(je,{size:"24"}),label:"Jenny R."})]})]})}},Ae=b.forwardRef(function({to:n,...o},l){return a.jsx("a",{href:n,...o,ref:l})});Ae.displayName="Link";const S={findATutor:m(e=>{e.preventDefault()}),becomeATutor:m(e=>{e.preventDefault()}),myLessons:m(e=>{e.preventDefault()}),referAFriend:m(e=>{e.preventDefault()})},_={args:{trigger:a.jsx(oe,{children:"Links"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Find a Tutor",onClick:S.findATutor,as:a.jsx("a",{href:"/en/online/english-tutors"})}),a.jsx(s,{label:"Become a Tutor",onClick:S.becomeATutor,as:a.jsx("a",{href:"/en/teach"}),disabled:!0}),a.jsx(s,{label:"My Lessons",onClick:S.myLessons,as:a.jsx(Ae,{to:"/en/lessons"})}),a.jsx(s,{label:"Refer a Friend",onClick:S.referAFriend,as:a.jsx(Ae,{to:"/en/referral"}),disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Assert links are rendered correctly",async()=>{const o=e.getByRole("menuitem",{name:"Find a Tutor"});t(o.tagName).toBe("A"),t(o).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 o=e.getByRole("menuitem",{name:"Find a Tutor"});await i.click(o),t(S.findATutor).toHaveBeenCalled()}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Become a Tutor"',async()=>{const o=e.getByRole("menuitem",{name:"Become a Tutor"});await i.click(o),t(S.becomeATutor).not.toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "My Lessons"',async()=>{const o=e.getByRole("menuitem",{name:"My Lessons"});await i.click(o),t(S.myLessons).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Refer a Friend"',async()=>{const o=e.getByRole("menuitem",{name:"Refer a Friend"});await i.click(o),t(S.referAFriend).not.toHaveBeenCalled()})}},C={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},$={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(f,{label:"Day of the week",children:a.jsx(ne,{defaultValue:"mon",onValueChange:C.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(f,{label:"Time of the day",children:a.jsxs(ne,{onValueChange:C.timeOfTheDay,children:[a.jsx(L,{label:"Morning",value:"morning"}),a.jsx(L,{label:"Afternoon",value:"afternoon"})]})}),a.jsx(f,{label:"Frequency",children:a.jsxs(ne,{value:"once",onValueChange:C.frequency,disabled:!0,children:[a.jsx(L,{label:"Once",value:"once"}),a.jsx(L,{label:"Weekly",value:"weekly"})]})})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=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(o).toHaveAttribute("aria-checked","true")}),await n('Click on "Tuesday"',async()=>{await i.click(l),t(C.dayOfTheWeek).toHaveBeenCalledWith("tue"),await r(()=>{t(o).toHaveAttribute("aria-checked","false"),t(l).toHaveAttribute("aria-checked","true")})}),await n('Click on "Saturday"',async()=>{C.dayOfTheWeek.mockClear(),await i.click(c),t(C.dayOfTheWeek).not.toHaveBeenCalled(),await r(()=>{t(l).toHaveAttribute("aria-checked","true")})});const d=e.getByRole("menuitemradio",{name:"Morning"}),k=e.getByRole("menuitemradio",{name:"Afternoon"});await n("Time of the day: none is selected",async()=>{t(d).toHaveAttribute("aria-checked","false"),t(k).toHaveAttribute("aria-checked","false")}),await n('Click on "Morning"',async()=>{await i.click(d),t(C.timeOfTheDay).toHaveBeenCalledWith("morning"),await r(()=>{t(d).toHaveAttribute("aria-checked","true")})});const g=e.getByRole("menuitemradio",{name:"Once"}),B=e.getByRole("menuitemradio",{name:"Weekly"});await n("Frequency: everything is disabled, once is selected",async()=>{t(g).toHaveAttribute("aria-disabled","true"),t(B).toHaveAttribute("aria-disabled","true"),t(g).toHaveAttribute("aria-checked","true"),t(B).toHaveAttribute("aria-checked","false")}),await n('Click on "Weekly"',async()=>{await i.click(B),t(C.frequency).not.toHaveBeenCalled(),await r(()=>{t(g).toHaveAttribute("aria-checked","true")})})}},D={email:m(),sms:m(),push:m(),alerts:m()},J={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(V,{label:"Email notifications",onCheckedChange:D.email,defaultChecked:!0}),a.jsx(V,{label:"SMS notifications",onCheckedChange:D.sms}),a.jsx(V,{label:"Push notifications",onCheckedChange:D.push,disabled:!0}),a.jsx(V,{label:"System alerts (required)",onCheckedChange:D.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=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(o).toHaveAttribute("aria-checked","true")}),await n('Uncheck "Email notifications"',async()=>{await i.click(o),t(D.email).toHaveBeenCalledWith(!1,R),await r(()=>{t(o).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 i.click(l),t(D.sms).toHaveBeenCalledWith(!0,R),await r(()=>{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 i.click(c),t(D.push).not.toHaveBeenCalled(),await r(()=>{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 i.click(d),t(D.alerts).not.toHaveBeenCalled(),await r(()=>{t(d).toHaveAttribute("aria-checked","true")})})}},N={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},I=e=>{const[n,o]=b.useState("mon"),[l,c]=b.useState(),d=g=>{o(g),N.dayOfTheWeek(g)},k=g=>{c(g),N.timeOfTheDay(g)};return a.jsxs(F,{...e,children:[a.jsx(A,{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(A,{label:"Time of the day",defaultValue:l,onValueChange:k,children:[a.jsx(h,{value:"morning",label:"Morning"}),a.jsx(h,{value:"afternoon",label:"Afternoon"})]}),a.jsxs(A,{label:"Frequency",onValueChange:N.frequency,disabled:!0,children:[a.jsx(h,{label:"Once",value:"once"}),a.jsx(h,{label:"Weekly",value:"weekly"})]})]})};I.play=async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitem",{name:/^Day of the week/});await n("Day of the week: default value is selected",async()=>{t(o).toHaveAccessibleName(/Selected: Monday$/)}),await n("Open day of the week submenu",async()=>{await i.hover(o),await r(()=>{t(e.queryByRole("menu",{name:/^Day of the week/})).toBeVisible()})}),await n('Click on "Tuesday"',async()=>{await i.click(e.getByRole("menuitemradio",{name:"Tuesday"})),t(N.dayOfTheWeek).toHaveBeenCalledWith("tue"),await r(()=>{t(e.queryByRole("menu",{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),t(o).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 i.keyboard(" "),await r(()=>{t(e.queryByRole("menu",{name:/^Time of the day/})).toBeVisible()})}),await n('Click on "Morning"',async()=>{await i.click(e.getByRole("menuitemradio",{name:"Morning"})),t(N.timeOfTheDay).toHaveBeenCalledWith("morning"),await r(()=>{t(e.queryByRole("menu",{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),t(l).toHaveAccessibleName(/Selected: Morning$/)})}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{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 i.click(c,{pointerEventsCheck:0}),t(N.frequency).not.toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu",{name:"Frequency",hidden:!0})).not.toBeVisible()})})};const y={render:function({align:n,side:o,...l}){return a.jsx(F,{...l,defaultOpen:!0,children:a.jsxs(A,{label:"Time of the day",side:o,align:n,defaultOpen:!0,children:[a.jsx(h,{value:"morning",label:"Morning"}),a.jsx(h,{value:"afternoon",label:"Afternoon"})]})})},parameters:{containerHeight:"500px"},args:{side:"top",align:"start"}},we={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end"}},be={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},he={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},fe={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},ke={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},Be={render:y.render,tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},ve={render:y.render,tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},H={args:{children:a.jsxs(a.Fragment,{children:[a.jsxs(x,{label:"Region",children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]}),a.jsxs(x,{label:"Subscription",children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"})]}),a.jsxs(x,{label:"Integrations",disabled:!0,children:[a.jsx(s,{label:"Connect calendar"}),a.jsx(s,{label:"Slack integration"}),a.jsx(s,{label:"Email sync"})]})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitem",{name:"Region"});await n("Region submenu opens on hover",async()=>{await i.hover(o),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Region submenu closes on hover out",async()=>{await i.unhover(o),await r(()=>{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 i.click(l),await r(()=>{t(e.queryByRole("menu",{name:"Integrations"})).not.toBeInTheDocument()})})}},w={render:function({align:n,side:o,...l}){return a.jsx(F,{...l,defaultOpen:!0,children:a.jsxs(x,{label:"Region",side:o,align:n,defaultOpen:!0,children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]})})},parameters:{containerHeight:"500px"},args:{side:"top",align:"start"}},xe={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end"}},Re={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},Se={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},Ce={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},De={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},Oe={render:w.render,tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},Te={render:w.render,tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},{Provider:ho,Step:T}=So();ho.displayName="Tour.Provider";T.displayName="Tour.Step";const Q={parameters:{docs:{source:{type:"dynamic"}}},decorators:[e=>{const[n,o]=b.useState(0),l=()=>o(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(oe,{variant:"ghost",size:"small",onClick:l,children:"Reset story"})})]})}],render:function(){const[n,o]=b.useState(!1),[l,c]=b.useState(!1),[d,k]=b.useState(!1),g=fo=>{switch(fo){case 1:o(!0);return;case 3:c(!0);return;case 5:k(!0);return}},B=()=>{o(!1),c(!1),k(!1)};return a.jsx(ho,{totalSteps:6,onStepChange:g,onComplete:B,onClose:B,children:a.jsx(T,{step:0,title:"New settings menu",text:"All settings are now in one place.",children:a.jsxs(F,{open:n,onOpenChange:o,trigger:a.jsx(Ro,{svg:Bo,variant:"ghost",assistiveText:"Settings"}),children:[a.jsx(T,{step:1,title:"Transfer balance",text:"You can now transfer your balance to another tutor.",side:"right",children:a.jsx(s,{label:"Transfer balance"})}),a.jsx(s,{label:"Add extra hours"}),a.jsx(T,{step:2,title:"Region",text:"Region settings are grouped together.",side:"top",children:a.jsxs(x,{label:"Region",keepMounted:!0,open:l,onOpenChange:c,children:[a.jsx(s,{label:"Language"}),a.jsx(T,{step:3,title:"Time zone",text:"You can now select your time zone.",side:"right",children:a.jsx(s,{label:"Time zone"})})]})}),a.jsx(T,{step:4,title:"Currency",text:"Currency settings moved here.",side:"right",children:a.jsxs(A,{open:d,onOpenChange:k,defaultValue:"USD",label:"Currency",children:[a.jsx(h,{value:"USD",label:"US Dollar"}),a.jsx(h,{value:"EUR",label:"Euro"}),a.jsx(T,{step:5,title:"New currency!",text:"Pay and receive payments in british pounds.",children:a.jsx(h,{value:"GBP",label:"British Pound"})})]})})]})})})},play:async({canvas:e,step:n})=>{await n("Tour tooltip should be visible",async()=>{await r(()=>{t(e.getByRole("dialog",{name:"New settings menu"})).toBeVisible()})}),await n("Click Next to advance to second step",async()=>{await i.click(e.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Transfer balance"})).toBeVisible(),t(e.getByRole("menu")).toBeVisible()})}),await n("Click Next to advance to third step",async()=>{const o=ie(e.getByRole("dialog",{name:"Transfer balance"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fourth step",async()=>{const o=ie(e.getByRole("dialog",{name:"Region"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{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 o=ie(e.getByRole("dialog",{name:"Time zone"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Currency"})).toBeVisible()})}),await n("Click Next to advance to the last step",async()=>{const o=ie(e.getByRole("dialog",{name:"Currency"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"New currency!"})).toBeVisible(),t(e.getByRole("menu",{name:/Currency/})).toBeVisible()})}),await i.click(e.getByRole("button",{name:"Reset story"}))}},Ee=e=>{if(!e)return!1;const{top:n,left:o,bottom:l,right:c}=e.getBoundingClientRect();return!(n>=window.innerHeight||l<=0||o>=window.innerWidth||c<=0)},X={args:{keepMounted:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"}),a.jsxs(x,{label:"Region",keepMounted:!0,children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const o=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(o).toBeInTheDocument(),t(o).not.toBeVisible(),t(l).toBeInTheDocument(),t(l).not.toBeVisible()}),await n("Open the menu",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(o).toBeVisible()})}),await n("Submenu is visible",async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(()=>{t(l).toBeVisible()})}),await n("Close the submenu.",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(l).not.toBeVisible()}),t(l).toBeInTheDocument()}),await n("Close the menu.",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(o).not.toBeVisible()}),t(o).toBeInTheDocument()})}},M={args:H.args,globals:{viewport:{value:"narrow-l",isRotated:!1}},parameters:{layout:"centered"},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Region"',async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(async()=>{t(Ee(e.queryByRole("menu",{name:"Settings"})),"Main menu should be hidden").toBe(!1),t(Ee(e.queryByRole("menu",{name:"Region"})),"Submenu should be visible").toBe(!0)})}),await n("Tap away to return to main menu",async()=>{const o=e.getByRole("menu",{name:"Region"}).closest("[data-base-ui-portal]").querySelector("[data-backdrop]");await i.click(o),await r(async()=>{t(Ee(e.queryByRole("menu",{name:"Region"})),"Submenu should be hidden").toBe(!1),t(Ee(e.queryByRole("menu",{name:"Settings"})),"Main menu should be visible").toBe(!0)})}),await n("Tap away to close menu",async()=>{await i.click(document.querySelector("[data-backdrop]")),await r(async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})})}},j={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0}),a.jsxs(x,{label:"Region",children:[a.jsx(s,{label:"Currency",onClick:u.items.currency}),a.jsx(s,{label:"Language",onClick:u.items.language}),a.jsx(s,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const o=e.getByRole("button",{name:"Settings"});await n("Focus on the trigger element",async()=>{o.focus()}),await n("Open the menu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{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 i.keyboard("{Escape}"),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})}),await n("Open the menu via Space key. First item should be focused",async()=>{await i.keyboard(" "),await r(()=>{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 i.keyboard("{Enter}"),t(u.items.transferBalance).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})}),await n("Open the menu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Navigate through the menu using Arrow keys",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()}),await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()}),await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()}),await i.keyboard("{ArrowUp}"),await i.keyboard("{ArrowUp}"),await r(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()})}),await n("Enter key does nothing for disabled item",async()=>{await i.keyboard("{Enter}"),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Space key does nothing for disabled item",async()=>{await i.keyboard(" "),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Navigate to submenu trigger using Arrow down key",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open the submenu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{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 i.keyboard("{ArrowLeft}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Arrow right key. First item should be focused",async()=>{await i.keyboard("{ArrowRight}"),await r(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Escape key. Submenu trigger should be focused",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Close the menu via Tab key. Trigger should be focused",async()=>{await i.keyboard("{Tab}"),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})})}},He={...j,globals:M.globals,parameters:M.parameters,tags:["!autodocs"]},Z={args:{defaultOpen:!0,children:a.jsx(a.Fragment,{children:Array.from({length:100}).map((e,n)=>a.jsx(s,{label:`Item ${n+1}`},n))})}},p=Array.from({length:5}).map(()=>"I won't use long labels for menu items.").join(" "),ee={args:{defaultOpen:!0,children:a.jsxs(f,{label:p,children:[a.jsx(s,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p}),a.jsx(x,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,children:a.jsx(s,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p})}),a.jsx(A,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,defaultValue:"1",children:a.jsx(h,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,value:"1"})}),a.jsx(V,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p}),a.jsx(ne,{defaultValue:"1",children:a.jsx(L,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,value:"1"})})]})}},ae={args:H.args,render:function(n){const[o,l]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(oe,{onClick:()=>l(!0),children:"Open dialog"}),a.jsx(Fe,{open:o,onClose:()=>l(!1),title:"Dialog",description:void 0,children:a.jsx(F,{...n})})]})},play:async({canvas:e,step:n})=>{await n("Open dialog",async()=>{await i.click(e.getByRole("button",{name:"Open dialog"})),await r(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Open dropdown with mouse",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible()})}),await n("Open Region submenu with mouse",async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click on Currency item",async()=>{await i.click(e.getByRole("menuitem",{name:"Currency"})),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Open dropdown with keyboard",async()=>{e.getByRole("button",{name:"Settings"}).focus(),await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open Region submenu with keyboard",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate to Language item with keyboard",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Language"})).toHaveFocus()})}),await n("Select Language item with keyboard",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Close dialog",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(e.queryByRole("dialog",{name:"Dialog"})).not.toBeInTheDocument()})})}},q={render:function(n){const[o,l]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(F,{...n,children:a.jsx(s,{label:"Open dialog",onClick:()=>l(!0)})}),a.jsx(Fe,{title:"Dialog",description:void 0,open:o,onClose:()=>l(!1),children:"Dialog content"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.getByRole("menu")).toBeVisible()})}),await n("Open dialog",async()=>{await i.click(e.getByRole("menuitem",{name:"Open dialog"})),await r(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Close dialog",async()=>{await i.keyboard("{Escape}")})}},Co=()=>{const[e,n]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Open dialog",onClick:()=>n(!0)}),a.jsx(Fe,{title:"Dialog",description:void 0,open:e,onClose:()=>n(!1),children:"Dialog content"})]})},te={args:{keepMounted:!0,children:a.jsx(Co,{})},play:q.play};var qe,Ve,Le;re.parameters={...re.parameters,docs:{...(qe=re.parameters)==null?void 0:qe.docs,source:{originalSource:`{
+import{j as t,r as b}from"./iframe-B_74HtSc.js";import{D as h,a as F,b as V,c as L,d as N,e as x,f,g as s,h as O}from"./DropdownMenu-CgNvtJ2F.js";import{B as re}from"./Button-C0Um_QuO.js";import{I as v}from"./Icon-CC0yjdx9.js";import{F as Co,a as Do}from"./TokyoUISettings-BbgnUEy1.js";import{F as Oo}from"./TokyoUIMessages-hZLnK87p.js";import{C as je}from"./CountryFlag-D40CtNEa.js";import{A as qe}from"./Avatar-Die_4zu0.js";import{F as T}from"./TokyoUIEmojiFrowning-DkxcBN-M.js";import{D as Ie}from"./Dialog-CJQmu6iz.js";import{D as To}from"./Divider-j3vJV734.js";import{I as Eo}from"./IconButton-BpjNyYgD.js";import{c as Mo}from"./OnboardingTour-B5gEod5H.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUIChevronRight-DRhJYmWB.js";import"./TokyoUICheck-DQLX_x10.js";import"./breakpoints-BfMlrtxE.js";import"./useOpenInteractionType-D3sASQWj.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./VisuallyHidden-fvo3PSUE.js";import"./index-DIqvfT2b.js";import"./useControllableState-BB4EHwEp.js";import"./useStableCallback-D5P5kDx5.js";import"./message-DJT5rp5J.js";import"./componentNames-hc9KR2nX.js";import"./render-icon-MT6RlyNs.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.js";import"./text-accent-BQ9POoE5.js";import"./constants-5om8Ptru.js";import"./DialogCloseButton-D5YliaRd.js";import"./store-B0wM9Zg8.js";import"./TokyoUIClose-BfMyMrDa.js";import"./shared-strings-ThL9KyH0.js";import"./OnboardingTooltip-DzQhJzWc.js";import"./Text-DvShrljd.js";import"./text-centered-BEaaxMgl.js";import"./Heading-Cj8Si45g.js";import"./index-W3BB_3go.js";const{fn:m,expect:a,userEvent:r,waitFor:i,within:ie}=__STORYBOOK_MODULE_TEST__,u={onOpenChange:m(),items:{transferBalance:m(),addExtraHours:m(),currency:m(),language:m()}},Br={title:"Components/DropdownMenu",component:O,subcomponents:{DropdownMenuItem:s,DropdownMenuGroup:f,DropdownSubmenu:x,DropdownMenuRadioGroup:N,DropdownMenuRadioItem:L,DropdownMenuCheckboxItem:V,DropdownMenuSelect:F,DropdownMenuSelectOption:h},parameters:{preventIframeFromScrollingParent:!0,layout:"fullscreen",docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[(e,n)=>t.jsx("div",{style:{height:n.parameters.containerHeight||"100%",padding:24,display:"flex",justifyContent:"center",alignItems:"center"},children:t.jsx(e,{})})],args:{onOpenChange:u.onOpenChange,trigger:t.jsx(re,{children:"Settings"}),children:t.jsxs(t.Fragment,{children:[t.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),t.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours})]})}},se={tags:["!autodocs","!dev"],args:{defaultOpen:!0}},R=a.anything(),U={play:async({canvas:e,step:n,args:o})=>{await n("Initially closed",async()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()}),await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()}),a(o.onOpenChange).toHaveBeenLastCalledWith(!0,R)}),await n("Click outside to close the menu",async()=>{await r.click(document.body),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()}),a(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)}),await n("Open dropdown again",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Transfer balance"',async()=>{await r.click(e.getByRole("menuitem",{name:"Transfer balance"})),a(u.items.transferBalance).toHaveBeenCalled(),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()}),a(u.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}},le={tags:["!autodocs"],args:{defaultOpen:!0},play:async({canvas:e,step:n})=>{await n("Initially open",async()=>{await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await r.click(document.body),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()}),a(u.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}};let Ae;const M={decorators:[(e,n)=>{const[o,l]=b.useState(!!n.args.open);Ae=l;const c=(d,k)=>{var g,B;l(d),(B=(g=n.args).onOpenChange)==null||B.call(g,d,k)};return t.jsx(e,{args:{...n.args,open:o,onOpenChange:c}})}],args:{open:!1},play:async({canvas:e,step:n,args:o})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()}),a(o.onOpenChange).toHaveBeenLastCalledWith(!0,R)}),await n("Click outside to close the menu",async()=>{await r.click(document.body),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()}),a(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)}),await n("Open dropdown via open prop",async()=>{u.onOpenChange.mockClear(),Ae(!0),await i(()=>{a(e.queryByRole("menu")).toBeVisible()}),a(o.onOpenChange).not.toHaveBeenCalled()}),await n("Close dropdown via open prop",async()=>{u.onOpenChange.mockClear(),Ae(!1),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()}),a(o.onOpenChange).not.toHaveBeenCalled()})}},ce={...M,tags:["!autodocs"],args:{...M.args,open:!0},play:async({canvas:e,step:n,args:o})=>{await n("Initially open",async()=>{await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await r.click(document.body),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()}),a(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}},z={parameters:{containerHeight:"500px"},args:{side:"top",align:"start",defaultOpen:!0}},ue={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end",defaultOpen:!0}},de={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},me={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},pe={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},ge={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},ye={tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},we={tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},P={args:{children:t.jsxs(t.Fragment,{children:[t.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),t.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Add extra hours"',async()=>{u.onOpenChange.mockClear();const o=e.getByRole("menuitem",{name:"Add extra hours"});a(o).toHaveAttribute("aria-disabled","true"),await r.click(o),a(u.items.addExtraHours).not.toHaveBeenCalled(),a(u.onOpenChange).not.toHaveBeenCalled(),a(e.queryByRole("menu")).toBeVisible()})}},G={args:{trigger:t.jsx(re,{children:"Language"}),children:t.jsxs(t.Fragment,{children:[t.jsx(s,{label:"Español",description:"Spanish"}),t.jsx(s,{label:"Українська",description:"Ukrainian"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Language"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n("Verify items a11y names and descriptions",async()=>{const o=e.getByRole("menuitem",{name:"Español"});a(o).toHaveAccessibleName("Español"),a(o).toHaveAccessibleDescription("Spanish");const l=e.getByRole("menuitem",{name:"Українська"});a(l).toHaveAccessibleName("Українська"),a(l).toHaveAccessibleDescription("Ukrainian")})}},K={args:{defaultOpen:!0,children:t.jsxs(t.Fragment,{children:[t.jsxs(f,{label:"Region",children:[t.jsx(s,{label:"Currency"}),t.jsx(s,{label:"Language"}),t.jsx(s,{label:"Time zone"})]}),t.jsxs(f,{label:"Subscription",children:[t.jsx(s,{label:"Transfer balance"}),t.jsx(s,{label:"Add extra hours"})]})]})}},Y={args:{defaultOpen:!0,children:t.jsxs(t.Fragment,{children:[t.jsx(s,{label:"User profile"}),t.jsx(s,{label:"Payments & subscriptions"}),t.jsx(To,{}),t.jsx(s,{label:"Logout"})]})}},_={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:t.jsxs(t.Fragment,{children:[t.jsxs(f,{label:"Icons",children:[t.jsx(s,{leadingElement:t.jsx(v,{svg:Co,size:"24"}),label:"Reschedule"}),t.jsx(s,{leadingElement:t.jsx(v,{svg:Oo,size:"24"}),label:"Message tutor"})]}),t.jsxs(f,{label:"Flags",children:[t.jsx(s,{leadingElement:t.jsx(je,{code:"es",alt:"",size:"medium"}),label:"Spain"}),t.jsx(s,{leadingElement:t.jsx(je,{code:"ua",alt:"",size:"medium"}),label:"Ukraine"})]}),t.jsxs(f,{label:"Avatars",children:[t.jsx(s,{leadingElement:t.jsx(qe,{size:"24"}),label:"Kobe B."}),t.jsx(s,{leadingElement:t.jsx(qe,{size:"24"}),label:"Jenny R."})]})]})}},Fe=b.forwardRef(function({to:n,...o},l){return t.jsx("a",{href:n,...o,ref:l})});Fe.displayName="Link";const S={findATutor:m(e=>{e.preventDefault()}),becomeATutor:m(e=>{e.preventDefault()}),myLessons:m(e=>{e.preventDefault()}),referAFriend:m(e=>{e.preventDefault()})},$={args:{trigger:t.jsx(re,{children:"Links"}),children:t.jsxs(t.Fragment,{children:[t.jsx(s,{label:"Find a Tutor",onClick:S.findATutor,as:t.jsx("a",{href:"/en/online/english-tutors"})}),t.jsx(s,{label:"Become a Tutor",onClick:S.becomeATutor,as:t.jsx("a",{href:"/en/teach"}),disabled:!0}),t.jsx(s,{label:"My Lessons",onClick:S.myLessons,as:t.jsx(Fe,{to:"/en/lessons"})}),t.jsx(s,{label:"Refer a Friend",onClick:S.referAFriend,as:t.jsx(Fe,{to:"/en/referral"}),disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Links"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n("Assert links are rendered correctly",async()=>{const o=e.getByRole("menuitem",{name:"Find a Tutor"});a(o.tagName).toBe("A"),a(o).toHaveAttribute("href","/en/online/english-tutors");const l=e.getByRole("menuitem",{name:"Become a Tutor"});a(l.tagName).toBe("A"),a(l).toHaveAttribute("href","/en/teach"),a(l).toHaveAttribute("aria-disabled","true");const c=e.getByRole("menuitem",{name:"My Lessons"});a(c.tagName).toBe("A"),a(c).toHaveAttribute("href","/en/lessons");const d=e.getByRole("menuitem",{name:"Refer a Friend"});a(d.tagName).toBe("A"),a(d).toHaveAttribute("href","/en/referral"),a(d).toHaveAttribute("aria-disabled","true")}),await n('Click on "Find a Tutor"',async()=>{const o=e.getByRole("menuitem",{name:"Find a Tutor"});await r.click(o),a(S.findATutor).toHaveBeenCalled()}),await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Links"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Become a Tutor"',async()=>{const o=e.getByRole("menuitem",{name:"Become a Tutor"});await r.click(o),a(S.becomeATutor).not.toHaveBeenCalled(),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "My Lessons"',async()=>{const o=e.getByRole("menuitem",{name:"My Lessons"});await r.click(o),a(S.myLessons).toHaveBeenCalled(),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()})}),await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Links"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Refer a Friend"',async()=>{const o=e.getByRole("menuitem",{name:"Refer a Friend"});await r.click(o),a(S.referAFriend).not.toHaveBeenCalled()})}},C={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},J={args:{children:t.jsxs(t.Fragment,{children:[t.jsx(f,{label:"Day of the week",children:t.jsx(N,{defaultValue:"mon",onValueChange:C.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}]})}),t.jsx(f,{label:"Time of the day",children:t.jsxs(N,{onValueChange:C.timeOfTheDay,children:[t.jsx(L,{label:"Morning",value:"morning"}),t.jsx(L,{label:"Afternoon",value:"afternoon"})]})}),t.jsx(f,{label:"Frequency",children:t.jsxs(N,{value:"once",onValueChange:C.frequency,disabled:!0,children:[t.jsx(L,{label:"Once",value:"once"}),t.jsx(L,{label:"Weekly",value:"weekly"})]})})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})});const o=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()=>{a(o).toHaveAttribute("aria-checked","true")}),await n('Click on "Tuesday"',async()=>{await r.click(l),a(C.dayOfTheWeek).toHaveBeenCalledWith("tue"),await i(()=>{a(o).toHaveAttribute("aria-checked","false"),a(l).toHaveAttribute("aria-checked","true")})}),await n('Click on "Saturday"',async()=>{C.dayOfTheWeek.mockClear(),await r.click(c),a(C.dayOfTheWeek).not.toHaveBeenCalled(),await i(()=>{a(l).toHaveAttribute("aria-checked","true")})});const d=e.getByRole("menuitemradio",{name:"Morning"}),k=e.getByRole("menuitemradio",{name:"Afternoon"});await n("Time of the day: none is selected",async()=>{a(d).toHaveAttribute("aria-checked","false"),a(k).toHaveAttribute("aria-checked","false")}),await n('Click on "Morning"',async()=>{await r.click(d),a(C.timeOfTheDay).toHaveBeenCalledWith("morning"),await i(()=>{a(d).toHaveAttribute("aria-checked","true")})});const g=e.getByRole("menuitemradio",{name:"Once"}),B=e.getByRole("menuitemradio",{name:"Weekly"});await n("Frequency: everything is disabled, once is selected",async()=>{a(g).toHaveAttribute("aria-disabled","true"),a(B).toHaveAttribute("aria-disabled","true"),a(g).toHaveAttribute("aria-checked","true"),a(B).toHaveAttribute("aria-checked","false")}),await n('Click on "Weekly"',async()=>{await r.click(B),a(C.frequency).not.toHaveBeenCalled(),await i(()=>{a(g).toHaveAttribute("aria-checked","true")})})}},D={email:m(),sms:m(),push:m(),alerts:m()},Q={args:{children:t.jsxs(t.Fragment,{children:[t.jsx(V,{label:"Email notifications",onCheckedChange:D.email,defaultChecked:!0}),t.jsx(V,{label:"SMS notifications",onCheckedChange:D.sms}),t.jsx(V,{label:"Push notifications",onCheckedChange:D.push,disabled:!0}),t.jsx(V,{label:"System alerts (required)",onCheckedChange:D.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})});const o=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()=>{a(o).toHaveAttribute("aria-checked","true")}),await n('Uncheck "Email notifications"',async()=>{await r.click(o),a(D.email).toHaveBeenCalledWith(!1,R),await i(()=>{a(o).toHaveAttribute("aria-checked","false")})}),await n('"SMS notifications" is not checked',async()=>{a(l).toHaveAttribute("aria-checked","false")}),await n('Check "SMS notifications"',async()=>{await r.click(l),a(D.sms).toHaveBeenCalledWith(!0,R),await i(()=>{a(l).toHaveAttribute("aria-checked","true")})}),await n('"Push notifications" is disabled and not checked',async()=>{a(c).toHaveAttribute("aria-disabled","true"),a(c).toHaveAttribute("aria-checked","false")}),await n('Click on "Push notifications"',async()=>{await r.click(c),a(D.push).not.toHaveBeenCalled(),await i(()=>{a(c).toHaveAttribute("aria-checked","false")})}),await n('"System alerts (required)" is disabled and checked',async()=>{a(d).toHaveAttribute("aria-disabled","true"),a(d).toHaveAttribute("aria-checked","true")}),await n('Click on "System alerts (required)"',async()=>{await r.click(d),a(D.alerts).not.toHaveBeenCalled(),await i(()=>{a(d).toHaveAttribute("aria-checked","true")})})}},W={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},I=e=>{const[n,o]=b.useState("mon"),[l,c]=b.useState(),d=g=>{o(g),W.dayOfTheWeek(g)},k=g=>{c(g),W.timeOfTheDay(g)};return t.jsxs(O,{...e,children:[t.jsx(F,{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}]}),t.jsxs(F,{label:"Time of the day",defaultValue:l,onValueChange:k,children:[t.jsx(h,{value:"morning",label:"Morning"}),t.jsx(h,{value:"afternoon",label:"Afternoon"})]}),t.jsxs(F,{label:"Frequency",onValueChange:W.frequency,disabled:!0,children:[t.jsx(h,{label:"Once",value:"once"}),t.jsx(h,{label:"Weekly",value:"weekly"})]})]})};I.play=async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitem",{name:/^Day of the week/});await n("Day of the week: default value is selected",async()=>{a(o).toHaveAccessibleName(/Selected: Monday$/)}),await n("Open day of the week submenu",async()=>{await r.hover(o),await i(()=>{a(e.queryByRole("menu",{name:/^Day of the week/})).toBeVisible()})}),await n('Click on "Tuesday"',async()=>{await r.click(e.getByRole("menuitemradio",{name:"Tuesday"})),a(W.dayOfTheWeek).toHaveBeenCalledWith("tue"),await i(()=>{a(e.queryByRole("menu",{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),a(o).toHaveAccessibleName(/Selected: Tuesday$/)})});const l=e.getByRole("menuitem",{name:/^Time of the day/});await n("Time of the day: nothing is selected",async()=>{a(l).toHaveAccessibleName("Time of the day")}),await n("Open time of the day submenu",async()=>{l.focus(),await r.keyboard(" "),await i(()=>{a(e.queryByRole("menu",{name:/^Time of the day/})).toBeVisible()})}),await n('Click on "Morning"',async()=>{await r.click(e.getByRole("menuitemradio",{name:"Morning"})),a(W.timeOfTheDay).toHaveBeenCalledWith("morning"),await i(()=>{a(e.queryByRole("menu",{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),a(l).toHaveAccessibleName(/Selected: Morning$/)})}),await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n("Frequency is disabled",async()=>{const c=e.getByRole("menuitem",{name:"Frequency"});a(c).toHaveAttribute("aria-disabled","true"),await r.click(c,{pointerEventsCheck:0}),a(W.frequency).not.toHaveBeenCalled(),await i(()=>{a(e.queryByRole("menu",{name:"Frequency",hidden:!0})).not.toBeVisible()})})};const y={render:function({align:n,side:o,...l}){return t.jsx(O,{...l,defaultOpen:!0,children:t.jsxs(F,{label:"Time of the day",side:o,align:n,defaultOpen:!0,children:[t.jsx(h,{value:"morning",label:"Morning"}),t.jsx(h,{value:"afternoon",label:"Afternoon"})]})})},parameters:{containerHeight:"500px"},args:{side:"top",align:"start"}},be={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end"}},he={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},fe={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},ke={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},Be={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},ve={render:y.render,tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},xe={render:y.render,tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},H={args:{children:t.jsxs(t.Fragment,{children:[t.jsxs(x,{label:"Region",children:[t.jsx(s,{label:"Currency"}),t.jsx(s,{label:"Language"}),t.jsx(s,{label:"Time zone"})]}),t.jsxs(x,{label:"Subscription",children:[t.jsx(s,{label:"Transfer balance"}),t.jsx(s,{label:"Add extra hours"})]}),t.jsxs(x,{label:"Integrations",disabled:!0,children:[t.jsx(s,{label:"Connect calendar"}),t.jsx(s,{label:"Slack integration"}),t.jsx(s,{label:"Email sync"})]})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitem",{name:"Region"});await n("Region submenu opens on hover",async()=>{await r.hover(o),await i(()=>{a(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Region submenu closes on hover out",async()=>{await r.unhover(o),await i(()=>{a(e.queryByRole("menu",{name:"Region"})).not.toBeInTheDocument()})}),await n("Integrations submenu is disabled",async()=>{const l=e.getByRole("menuitem",{name:"Integrations"});a(l).toHaveAttribute("aria-disabled","true"),await r.click(l),await i(()=>{a(e.queryByRole("menu",{name:"Integrations"})).not.toBeInTheDocument()})})}},w={render:function({align:n,side:o,...l}){return t.jsx(O,{...l,defaultOpen:!0,children:t.jsxs(x,{label:"Region",side:o,align:n,defaultOpen:!0,children:[t.jsx(s,{label:"Currency"}),t.jsx(s,{label:"Language"}),t.jsx(s,{label:"Time zone"})]})})},parameters:{containerHeight:"500px"},args:{side:"top",align:"start"}},Re={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end"}},Se={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},Ce={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},De={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},Oe={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},Te={render:w.render,tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},Ee={render:w.render,tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},{Provider:Ro,Step:E}=Mo();Ro.displayName="Tour.Provider";E.displayName="Tour.Step";const X={parameters:{docs:{source:{type:"dynamic"}}},decorators:[e=>{const[n,o]=b.useState(0),l=()=>o(n+1);return t.jsxs(t.Fragment,{children:[t.jsx(e,{},n),t.jsx("div",{style:{position:"fixed",left:0,bottom:0,margin:8},children:t.jsx(re,{variant:"ghost",size:"small",onClick:l,children:"Reset story"})})]})}],render:function(){const[n,o]=b.useState(!1),[l,c]=b.useState(!1),[d,k]=b.useState(!1),g=So=>{switch(So){case 1:o(!0);return;case 3:c(!0);return;case 5:k(!0);return}},B=()=>{o(!1),c(!1),k(!1)};return t.jsx(Ro,{totalSteps:6,onStepChange:g,onComplete:B,onClose:B,children:t.jsx(E,{step:0,title:"New settings menu",text:"All settings are now in one place.",children:t.jsxs(O,{open:n,onOpenChange:o,trigger:t.jsx(Eo,{svg:Do,variant:"ghost",assistiveText:"Settings"}),children:[t.jsx(E,{step:1,title:"Transfer balance",text:"You can now transfer your balance to another tutor.",side:"right",children:t.jsx(s,{label:"Transfer balance"})}),t.jsx(s,{label:"Add extra hours"}),t.jsx(E,{step:2,title:"Region",text:"Region settings are grouped together.",side:"top",children:t.jsxs(x,{label:"Region",keepMounted:!0,open:l,onOpenChange:c,children:[t.jsx(s,{label:"Language"}),t.jsx(E,{step:3,title:"Time zone",text:"You can now select your time zone.",side:"right",children:t.jsx(s,{label:"Time zone"})})]})}),t.jsx(E,{step:4,title:"Currency",text:"Currency settings moved here.",side:"right",children:t.jsxs(F,{open:d,onOpenChange:k,defaultValue:"USD",label:"Currency",children:[t.jsx(h,{value:"USD",label:"US Dollar"}),t.jsx(h,{value:"EUR",label:"Euro"}),t.jsx(E,{step:5,title:"New currency!",text:"Pay and receive payments in british pounds.",children:t.jsx(h,{value:"GBP",label:"British Pound"})})]})})]})})})},play:async({canvas:e,step:n})=>{await n("Tour tooltip should be visible",async()=>{await i(()=>{a(e.getByRole("dialog",{name:"New settings menu"})).toBeVisible()})}),await n("Click Next to advance to second step",async()=>{await r.click(e.getByRole("button",{name:"Next"})),await i(()=>{a(e.getByRole("dialog",{name:"Transfer balance"})).toBeVisible(),a(e.getByRole("menu")).toBeVisible()})}),await n("Click Next to advance to third step",async()=>{const o=ie(e.getByRole("dialog",{name:"Transfer balance"}));await r.click(o.getByRole("button",{name:"Next"})),await i(()=>{a(e.getByRole("dialog",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fourth step",async()=>{const o=ie(e.getByRole("dialog",{name:"Region"}));await r.click(o.getByRole("button",{name:"Next"})),await i(()=>{a(e.getByRole("dialog",{name:"Time zone"})).toBeVisible(),a(e.getByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fifth step",async()=>{const o=ie(e.getByRole("dialog",{name:"Time zone"}));await r.click(o.getByRole("button",{name:"Next"})),await i(()=>{a(e.getByRole("dialog",{name:"Currency"})).toBeVisible()})}),await n("Click Next to advance to the last step",async()=>{const o=ie(e.getByRole("dialog",{name:"Currency"}));await r.click(o.getByRole("button",{name:"Next"})),await i(()=>{a(e.getByRole("dialog",{name:"New currency!"})).toBeVisible(),a(e.getByRole("menu",{name:/Currency/})).toBeVisible()})}),await r.click(e.getByRole("button",{name:"Reset story"}))}},Me=e=>{if(!e)return!1;const{top:n,left:o,bottom:l,right:c}=e.getBoundingClientRect();return!(n>=window.innerHeight||l<=0||o>=window.innerWidth||c<=0)},Z={args:{keepMounted:!0,children:t.jsxs(t.Fragment,{children:[t.jsx(s,{label:"Transfer balance"}),t.jsx(s,{label:"Add extra hours"}),t.jsxs(x,{label:"Region",keepMounted:!0,children:[t.jsx(s,{label:"Currency"}),t.jsx(s,{label:"Language"}),t.jsx(s,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const o=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()=>{a(o).toBeInTheDocument(),a(o).not.toBeVisible(),a(l).toBeInTheDocument(),a(l).not.toBeVisible()}),await n("Open the menu",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(o).toBeVisible()})}),await n("Submenu is visible",async()=>{await r.click(e.getByRole("menuitem",{name:"Region"})),await i(()=>{a(l).toBeVisible()})}),await n("Close the submenu.",async()=>{await r.keyboard("{Escape}"),await i(()=>{a(l).not.toBeVisible()}),a(l).toBeInTheDocument()}),await n("Close the menu.",async()=>{await r.keyboard("{Escape}"),await i(()=>{a(o).not.toBeVisible()}),a(o).toBeInTheDocument()})}},A={args:H.args,globals:{viewport:{value:"narrow-l",isRotated:!1}},parameters:{layout:"centered"},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Region"',async()=>{await r.click(e.getByRole("menuitem",{name:"Region"})),await i(async()=>{a(Me(e.queryByRole("menu",{name:"Settings"})),"Main menu should be hidden").toBe(!1),a(Me(e.queryByRole("menu",{name:"Region"})),"Submenu should be visible").toBe(!0)})}),await n("Tap away to return to main menu",async()=>{const o=e.getByRole("menu",{name:"Region"}).closest("[data-base-ui-portal]").querySelector("[data-backdrop]");await r.click(o),await i(async()=>{a(Me(e.queryByRole("menu",{name:"Region"})),"Submenu should be hidden").toBe(!1),a(Me(e.queryByRole("menu",{name:"Settings"})),"Main menu should be visible").toBe(!0)})}),await n("Tap away to close menu",async()=>{await r.click(document.querySelector("[data-backdrop]")),await i(async()=>{a(e.queryByRole("menu")).not.toBeInTheDocument()})})}},j={args:{children:t.jsxs(t.Fragment,{children:[t.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),t.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0}),t.jsxs(x,{label:"Region",children:[t.jsx(s,{label:"Currency",onClick:u.items.currency}),t.jsx(s,{label:"Language",onClick:u.items.language}),t.jsx(s,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const o=e.getByRole("button",{name:"Settings"});await n("Focus on the trigger element",async()=>{o.focus()}),await n("Open the menu via Enter key. First item should be focused",async()=>{await r.keyboard("{Enter}"),await i(()=>{a(e.queryByRole("menu")).toBeVisible(),a(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Close the menu via Escape key. Trigger should be focused",async()=>{await r.keyboard("{Escape}"),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument(),a(o).toHaveFocus()})}),await n("Open the menu via Space key. First item should be focused",async()=>{await r.keyboard(" "),await i(()=>{a(e.queryByRole("menu")).toBeVisible(),a(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 r.keyboard("{Enter}"),a(u.items.transferBalance).toHaveBeenCalled(),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument(),a(o).toHaveFocus()})}),await n("Open the menu via Enter key. First item should be focused",async()=>{await r.keyboard("{Enter}"),await i(()=>{a(e.queryByRole("menu")).toBeVisible(),a(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Navigate through the menu using Arrow keys",async()=>{await r.keyboard("{ArrowDown}"),await i(()=>{a(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()}),await r.keyboard("{ArrowDown}"),await i(()=>{a(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()}),await r.keyboard("{ArrowDown}"),await i(()=>{a(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()}),await r.keyboard("{ArrowUp}"),await r.keyboard("{ArrowUp}"),await i(()=>{a(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()})}),await n("Enter key does nothing for disabled item",async()=>{await r.keyboard("{Enter}"),a(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Space key does nothing for disabled item",async()=>{await r.keyboard(" "),a(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Navigate to submenu trigger using Arrow down key",async()=>{await r.keyboard("{ArrowDown}"),await i(()=>{a(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open the submenu via Enter key. First item should be focused",async()=>{await r.keyboard("{Enter}"),await i(()=>{a(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Arrow left key. Submenu trigger should be focused",async()=>{await r.keyboard("{ArrowLeft}"),await i(()=>{a(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Arrow right key. First item should be focused",async()=>{await r.keyboard("{ArrowRight}"),await i(()=>{a(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Escape key. Submenu trigger should be focused",async()=>{await r.keyboard("{Escape}"),await i(()=>{a(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Enter key. First item should be focused",async()=>{await r.keyboard("{Enter}"),await i(()=>{a(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Close the menu via Tab key. Trigger should be focused",async()=>{await r.keyboard("{Tab}"),await i(()=>{a(e.queryByRole("menu")).not.toBeInTheDocument(),a(o).toHaveFocus()})})}},He={...j,globals:A.globals,parameters:A.parameters,tags:["!autodocs"]},ee={args:{defaultOpen:!0,children:t.jsx(t.Fragment,{children:Array.from({length:100}).map((e,n)=>t.jsx(s,{label:`Item ${n+1}`},n))})}},p=Array.from({length:5}).map(()=>"I won't use long labels for menu items.").join(" "),te={args:{defaultOpen:!0,children:t.jsxs(f,{label:p,children:[t.jsx(s,{leadingElement:t.jsx(v,{size:"24",svg:T}),label:p,description:p}),t.jsx(x,{leadingElement:t.jsx(v,{size:"24",svg:T}),label:p,description:p,children:t.jsx(s,{leadingElement:t.jsx(v,{size:"24",svg:T}),label:p,description:p})}),t.jsx(F,{leadingElement:t.jsx(v,{size:"24",svg:T}),label:p,description:p,defaultValue:"1",children:t.jsx(h,{leadingElement:t.jsx(v,{size:"24",svg:T}),label:p,description:p,value:"1"})}),t.jsx(V,{leadingElement:t.jsx(v,{size:"24",svg:T}),label:p,description:p}),t.jsx(N,{defaultValue:"1",children:t.jsx(L,{leadingElement:t.jsx(v,{size:"24",svg:T}),label:p,description:p,value:"1"})})]})}},ae={args:H.args,render:function(n){const[o,l]=b.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(re,{onClick:()=>l(!0),children:"Open dialog"}),t.jsx(Ie,{open:o,onClose:()=>l(!1),title:"Dialog",description:void 0,children:t.jsx(O,{...n})})]})},play:async({canvas:e,step:n})=>{await n("Open dialog",async()=>{await r.click(e.getByRole("button",{name:"Open dialog"})),await i(()=>{a(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Open dropdown with mouse",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.queryByRole("menu",{name:"Settings"})).toBeVisible()})}),await n("Open Region submenu with mouse",async()=>{await r.click(e.getByRole("menuitem",{name:"Region"})),await i(()=>{a(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click on Currency item",async()=>{await r.click(e.getByRole("menuitem",{name:"Currency"})),await i(()=>{a(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Open dropdown with keyboard",async()=>{e.getByRole("button",{name:"Settings"}).focus(),await r.keyboard("{Enter}"),await i(()=>{a(e.queryByRole("menu",{name:"Settings"})).toBeVisible(),a(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open Region submenu with keyboard",async()=>{await r.keyboard("{Enter}"),await i(()=>{a(e.queryByRole("menu",{name:"Region"})).toBeVisible(),a(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate to Language item with keyboard",async()=>{await r.keyboard("{ArrowDown}"),await i(()=>{a(e.getByRole("menuitem",{name:"Language"})).toHaveFocus()})}),await n("Select Language item with keyboard",async()=>{await r.keyboard("{Enter}"),await i(()=>{a(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Close dialog",async()=>{await r.keyboard("{Escape}"),await i(()=>{a(e.queryByRole("dialog",{name:"Dialog"})).not.toBeInTheDocument()})})}},q={render:function(n){const[o,l]=b.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(O,{...n,children:t.jsx(s,{label:"Open dialog",onClick:()=>l(!0)})}),t.jsx(Ie,{title:"Dialog",description:void 0,open:o,onClose:()=>l(!1),children:"Dialog content"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await r.click(e.getByRole("button",{name:"Settings"})),await i(()=>{a(e.getByRole("menu")).toBeVisible()})}),await n("Open dialog",async()=>{await r.click(e.getByRole("menuitem",{name:"Open dialog"})),await i(()=>{a(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Close dialog",async()=>{await r.keyboard("{Escape}")})}},Ho=()=>{const[e,n]=b.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx(s,{label:"Open dialog",onClick:()=>n(!0)}),t.jsx(Ie,{title:"Dialog",description:void 0,open:e,onClose:()=>n(!1),children:"Dialog content"})]})},ne={args:{keepMounted:!0,children:t.jsx(Ho,{})},play:q.play},oe={render:()=>{const e=b.forwardRef((n,o)=>t.jsx("button",{...n,ref:o,children:"Button"}));return t.jsx(O,{open:!0,trigger:t.jsx(e,{}),children:t.jsxs(N,{children:[t.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),t.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours})]})})}};var Ve,Le,Ne;se.parameters={...se.parameters,docs:{...(Ve=se.parameters)==null?void 0:Ve.docs,source:{originalSource:`{
   tags: ['!autodocs', '!dev'],
   args: {
     defaultOpen: true
   }
-}`,...(Le=(Ve=re.parameters)==null?void 0:Ve.docs)==null?void 0:Le.source}}};var Ne,We,Ue,ze,Pe;W.parameters={...W.parameters,docs:{...(Ne=W.parameters)==null?void 0:Ne.docs,source:{originalSource:`{
+}`,...(Ne=(Le=se.parameters)==null?void 0:Le.docs)==null?void 0:Ne.source}}};var We,Ue,ze,Pe,Ge;U.parameters={...U.parameters,docs:{...(We=U.parameters)==null?void 0:We.docs,source:{originalSource:`{
   play: async ({
     canvas,
     step,
@@ -47,7 +47,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
       expect(callbacks.onOpenChange).toHaveBeenLastCalledWith(false, BaseUiEventDetails);
     });
   }
-}`,...(Ue=(We=W.parameters)==null?void 0:We.docs)==null?void 0:Ue.source},description:{story:"Dropdown menu is uncontrolled by default, managing its own open/closed state internally.\nUse the `defaultOpen` prop to set the initial open state.",...(Pe=(ze=W.parameters)==null?void 0:ze.docs)==null?void 0:Pe.description}}};var Ge,Ke,Ye;se.parameters={...se.parameters,docs:{...(Ge=se.parameters)==null?void 0:Ge.docs,source:{originalSource:`{
+}`,...(ze=(Ue=U.parameters)==null?void 0:Ue.docs)==null?void 0:ze.source},description:{story:"Dropdown menu is uncontrolled by default, managing its own open/closed state internally.\nUse the `defaultOpen` prop to set the initial open state.",...(Ge=(Pe=U.parameters)==null?void 0:Pe.docs)==null?void 0:Ge.description}}};var Ke,Ye,_e;le.parameters={...le.parameters,docs:{...(Ke=le.parameters)==null?void 0:Ke.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     defaultOpen: true
@@ -69,7 +69,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
       expect(callbacks.onOpenChange).toHaveBeenLastCalledWith(false, BaseUiEventDetails);
     });
   }
-}`,...(Ye=(Ke=se.parameters)==null?void 0:Ke.docs)==null?void 0:Ye.source}}};var _e,$e,Je,Qe,Xe;E.parameters={...E.parameters,docs:{...(_e=E.parameters)==null?void 0:_e.docs,source:{originalSource:`{
+}`,...(_e=(Ye=le.parameters)==null?void 0:Ye.docs)==null?void 0:_e.source}}};var $e,Je,Qe,Xe,Ze;M.parameters={...M.parameters,docs:{...($e=M.parameters)==null?void 0:$e.docs,source:{originalSource:`{
   decorators: [(Story, ctx) => {
     const [open, setOpen] = useState(!!ctx.args.open);
     setOpenFromPlayFunction = setOpen;
@@ -124,7 +124,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
       expect(args.onOpenChange).not.toHaveBeenCalled();
     });
   }
-}`,...(Je=($e=E.parameters)==null?void 0:$e.docs)==null?void 0:Je.source},description:{story:"Use the `open` prop along with `onOpenChange` to make the dropdown menu controlled.\nThis gives you full control over the menu's open/closed state, useful for complex\ninteractions or when you need to coordinate the menu state with other UI elements.",...(Xe=(Qe=E.parameters)==null?void 0:Qe.docs)==null?void 0:Xe.description}}};var Ze,ea,aa;le.parameters={...le.parameters,docs:{...(Ze=le.parameters)==null?void 0:Ze.docs,source:{originalSource:`{
+}`,...(Qe=(Je=M.parameters)==null?void 0:Je.docs)==null?void 0:Qe.source},description:{story:"Use the `open` prop along with `onOpenChange` to make the dropdown menu controlled.\nThis gives you full control over the menu's open/closed state, useful for complex\ninteractions or when you need to coordinate the menu state with other UI elements.",...(Ze=(Xe=M.parameters)==null?void 0:Xe.docs)==null?void 0:Ze.description}}};var et,tt,at;ce.parameters={...ce.parameters,docs:{...(et=ce.parameters)==null?void 0:et.docs,source:{originalSource:`{
   ...Controlled,
   tags: ['!autodocs'],
   args: {
@@ -149,7 +149,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
       expect(args.onOpenChange).toHaveBeenLastCalledWith(false, BaseUiEventDetails);
     });
   }
-}`,...(aa=(ea=le.parameters)==null?void 0:ea.docs)==null?void 0:aa.source}}};var ta,na,oa,ia,ra;U.parameters={...U.parameters,docs:{...(ta=U.parameters)==null?void 0:ta.docs,source:{originalSource:`{
+}`,...(at=(tt=ce.parameters)==null?void 0:tt.docs)==null?void 0:at.source}}};var nt,ot,rt,it,st;z.parameters={...z.parameters,docs:{...(nt=z.parameters)==null?void 0:nt.docs,source:{originalSource:`{
   parameters: {
     containerHeight: '500px'
   },
@@ -158,7 +158,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
     align: 'start',
     defaultOpen: true
   }
-}`,...(oa=(na=U.parameters)==null?void 0:na.docs)==null?void 0:oa.source},description:{story:"Use the `side` and `align` props to control where the menu appears relative to the trigger.\nThe `side` prop determines which side of the trigger the menu opens on,\nwhile `align` controls alignment along that side.\nThe menu might automatically reposition to avoid viewport collisions.",...(ra=(ia=U.parameters)==null?void 0:ia.docs)==null?void 0:ra.description}}};var sa,la,ca;ce.parameters={...ce.parameters,docs:{...(sa=ce.parameters)==null?void 0:sa.docs,source:{originalSource:`{
+}`,...(rt=(ot=z.parameters)==null?void 0:ot.docs)==null?void 0:rt.source},description:{story:"Use the `side` and `align` props to control where the menu appears relative to the trigger.\nThe `side` prop determines which side of the trigger the menu opens on,\nwhile `align` controls alignment along that side.\nThe menu might automatically reposition to avoid viewport collisions.",...(st=(it=z.parameters)==null?void 0:it.docs)==null?void 0:st.description}}};var lt,ct,ut;ue.parameters={...ue.parameters,docs:{...(lt=ue.parameters)==null?void 0:lt.docs,source:{originalSource:`{
   parameters: {
     containerHeight: '500px'
   },
@@ -167,7 +167,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
     side: 'inline-end',
     defaultOpen: true
   }
-}`,...(ca=(la=ce.parameters)==null?void 0:la.docs)==null?void 0:ca.source}}};var ua,da,ma;ue.parameters={...ue.parameters,docs:{...(ua=ue.parameters)==null?void 0:ua.docs,source:{originalSource:`{
+}`,...(ut=(ct=ue.parameters)==null?void 0:ct.docs)==null?void 0:ut.source}}};var dt,mt,pt;de.parameters={...de.parameters,docs:{...(dt=de.parameters)==null?void 0:dt.docs,source:{originalSource:`{
   parameters: {
     containerHeight: '500px'
   },
@@ -176,7 +176,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
     side: 'inline-start',
     defaultOpen: true
   }
-}`,...(ma=(da=ue.parameters)==null?void 0:da.docs)==null?void 0:ma.source}}};var pa,ga,ya;de.parameters={...de.parameters,docs:{...(pa=de.parameters)==null?void 0:pa.docs,source:{originalSource:`{
+}`,...(pt=(mt=de.parameters)==null?void 0:mt.docs)==null?void 0:pt.source}}};var gt,yt,wt;me.parameters={...me.parameters,docs:{...(gt=me.parameters)==null?void 0:gt.docs,source:{originalSource:`{
   parameters: {
     containerHeight: '500px'
   },
@@ -185,7 +185,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
     side: 'left',
     defaultOpen: true
   }
-}`,...(ya=(ga=de.parameters)==null?void 0:ga.docs)==null?void 0:ya.source}}};var wa,ba,ha;me.parameters={...me.parameters,docs:{...(wa=me.parameters)==null?void 0:wa.docs,source:{originalSource:`{
+}`,...(wt=(yt=me.parameters)==null?void 0:yt.docs)==null?void 0:wt.source}}};var bt,ht,ft;pe.parameters={...pe.parameters,docs:{...(bt=pe.parameters)==null?void 0:bt.docs,source:{originalSource:`{
   parameters: {
     containerHeight: '500px'
   },
@@ -194,7 +194,7 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
     side: 'right',
     defaultOpen: true
   }
-}`,...(ha=(ba=me.parameters)==null?void 0:ba.docs)==null?void 0:ha.source}}};var fa,ka,Ba;pe.parameters={...pe.parameters,docs:{...(fa=pe.parameters)==null?void 0:fa.docs,source:{originalSource:`{
+}`,...(ft=(ht=pe.parameters)==null?void 0:ht.docs)==null?void 0:ft.source}}};var kt,Bt,vt;ge.parameters={...ge.parameters,docs:{...(kt=ge.parameters)==null?void 0:kt.docs,source:{originalSource:`{
   parameters: {
     containerHeight: '500px'
   },
@@ -203,19 +203,19 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
     side: 'top',
     defaultOpen: true
   }
-}`,...(Ba=(ka=pe.parameters)==null?void 0:ka.docs)==null?void 0:Ba.source}}};var va,xa,Ra;ge.parameters={...ge.parameters,docs:{...(va=ge.parameters)==null?void 0:va.docs,source:{originalSource:`{
+}`,...(vt=(Bt=ge.parameters)==null?void 0:Bt.docs)==null?void 0:vt.source}}};var xt,Rt,St;ye.parameters={...ye.parameters,docs:{...(xt=ye.parameters)==null?void 0:xt.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     align: 'start',
     defaultOpen: true
   }
-}`,...(Ra=(xa=ge.parameters)==null?void 0:xa.docs)==null?void 0:Ra.source}}};var Sa,Ca,Da;ye.parameters={...ye.parameters,docs:{...(Sa=ye.parameters)==null?void 0:Sa.docs,source:{originalSource:`{
+}`,...(St=(Rt=ye.parameters)==null?void 0:Rt.docs)==null?void 0:St.source}}};var Ct,Dt,Ot;we.parameters={...we.parameters,docs:{...(Ct=we.parameters)==null?void 0:Ct.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   args: {
     align: 'end',
     defaultOpen: true
   }
-}`,...(Da=(Ca=ye.parameters)==null?void 0:Ca.docs)==null?void 0:Da.source}}};var Oa,Ta,Ea,Ha,Ma;z.parameters={...z.parameters,docs:{...(Oa=z.parameters)==null?void 0:Oa.docs,source:{originalSource:`{
+}`,...(Ot=(Dt=we.parameters)==null?void 0:Dt.docs)==null?void 0:Ot.source}}};var Tt,Et,Mt,Ht,At;P.parameters={...P.parameters,docs:{...(Tt=P.parameters)==null?void 0:Tt.docs,source:{originalSource:`{
   args: {
     children: <>
                 <DropdownMenuItem label="Transfer balance" onClick={callbacks.items.transferBalance} />
@@ -246,9 +246,9 @@ import{j as a,r as b}from"./iframe-DjYTJz7A.js";import{D as h,a as A,b as V,c as
       expect(canvas.queryByRole('menu')).toBeVisible();
     });
   }
-}`,...(Ea=(Ta=z.parameters)==null?void 0:Ta.docs)==null?void 0:Ea.source},description:{story:`Menu items can be disabled to prevent user interaction. Disabled items are visually
+}`,...(Mt=(Et=P.parameters)==null?void 0:Et.docs)==null?void 0:Mt.source},description:{story:`Menu items can be disabled to prevent user interaction. Disabled items are visually
 distinguished and cannot be clicked or selected, useful for showing unavailable options
-or actions that require certain conditions to be met.`,...(Ma=(Ha=z.parameters)==null?void 0:Ha.docs)==null?void 0:Ma.description}}};var Aa,Fa,Ia,ja,qa;P.parameters={...P.parameters,docs:{...(Aa=P.parameters)==null?void 0:Aa.docs,source:{originalSource:`{
+or actions that require certain conditions to be met.`,...(At=(Ht=P.parameters)==null?void 0:Ht.docs)==null?void 0:At.description}}};var Ft,It,jt,qt,Vt;G.parameters={...G.parameters,docs:{...(Ft=G.parameters)==null?void 0:Ft.docs,source:{originalSource:`{
   args: {
     trigger: <Button>Language</Button>,
     children: <>
@@ -281,7 +281,7 @@ or actions that require certain conditions to be met.`,...(Ma=(Ha=z.parameters)=
       expect(ukrainianItem).toHaveAccessibleDescription('Ukrainian');
     });
   }
-}`,...(Ia=(Fa=P.parameters)==null?void 0:Fa.docs)==null?void 0:Ia.source},description:{story:"Menu items can display additional context below the label using the `description` prop.\nThis is particularly useful for language selectors, settings options, or any scenario\nwhere extra information helps users make informed choices.",...(qa=(ja=P.parameters)==null?void 0:ja.docs)==null?void 0:qa.description}}};var Va,La,Na,Wa,Ua;G.parameters={...G.parameters,docs:{...(Va=G.parameters)==null?void 0:Va.docs,source:{originalSource:`{
+}`,...(jt=(It=G.parameters)==null?void 0:It.docs)==null?void 0:jt.source},description:{story:"Menu items can display additional context below the label using the `description` prop.\nThis is particularly useful for language selectors, settings options, or any scenario\nwhere extra information helps users make informed choices.",...(Vt=(qt=G.parameters)==null?void 0:qt.docs)==null?void 0:Vt.description}}};var Lt,Nt,Wt,Ut,zt;K.parameters={...K.parameters,docs:{...(Lt=K.parameters)==null?void 0:Lt.docs,source:{originalSource:`{
   args: {
     defaultOpen: true,
     children: <>
@@ -296,7 +296,7 @@ or actions that require certain conditions to be met.`,...(Ma=(Ha=z.parameters)=
                 </DropdownMenuGroup>
             </>
   }
-}`,...(Na=(La=G.parameters)==null?void 0:La.docs)==null?void 0:Na.source},description:{story:"Organize related menu items into logical sections using `DropdownMenuGroup`. Groups have\na label and visually separate different categories of actions or options. This improves\nscannability and helps users quickly find what they're looking for in longer menus.",...(Ua=(Wa=G.parameters)==null?void 0:Wa.docs)==null?void 0:Ua.description}}};var za,Pa,Ga,Ka,Ya;K.parameters={...K.parameters,docs:{...(za=K.parameters)==null?void 0:za.docs,source:{originalSource:`{
+}`,...(Wt=(Nt=K.parameters)==null?void 0:Nt.docs)==null?void 0:Wt.source},description:{story:"Organize related menu items into logical sections using `DropdownMenuGroup`. Groups have\na label and visually separate different categories of actions or options. This improves\nscannability and helps users quickly find what they're looking for in longer menus.",...(zt=(Ut=K.parameters)==null?void 0:Ut.docs)==null?void 0:zt.description}}};var Pt,Gt,Kt,Yt,_t;Y.parameters={...Y.parameters,docs:{...(Pt=Y.parameters)==null?void 0:Pt.docs,source:{originalSource:`{
   args: {
     defaultOpen: true,
     children: <>
@@ -306,10 +306,10 @@ or actions that require certain conditions to be met.`,...(Ma=(Ha=z.parameters)=
                 <DropdownMenuItem label="Logout" />
             </>
   }
-}`,...(Ga=(Pa=K.parameters)==null?void 0:Pa.docs)==null?void 0:Ga.source},description:{story:`In some cases, you might want to separate outstanding items without creating a labeled group.
+}`,...(Kt=(Gt=Y.parameters)==null?void 0:Gt.docs)==null?void 0:Kt.source},description:{story:`In some cases, you might want to separate outstanding items without creating a labeled group.
 Use dividers to create subtle visual separation, particularly useful for isolating destructive
 or important actions (like logout or delete) from regular options. Dividers provide a lightweight
-way to organize menus when explicit group labels would be unnecessary or too verbose.`,...(Ya=(Ka=K.parameters)==null?void 0:Ka.docs)==null?void 0:Ya.description}}};var _a,$a,Ja,Qa,Xa;Y.parameters={...Y.parameters,docs:{...(_a=Y.parameters)==null?void 0:_a.docs,source:{originalSource:`{
+way to organize menus when explicit group labels would be unnecessary or too verbose.`,...(_t=(Yt=Y.parameters)==null?void 0:Yt.docs)==null?void 0:_t.description}}};var $t,Jt,Qt,Xt,Zt;_.parameters={..._.parameters,docs:{...($t=_.parameters)==null?void 0:$t.docs,source:{originalSource:`{
   parameters: {
     docs: {
       story: {
@@ -334,7 +334,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
                 </DropdownMenuGroup>
             </>
   }
-}`,...(Ja=($a=Y.parameters)==null?void 0:$a.docs)==null?void 0:Ja.source},description:{story:"Enhance menu items with visual context using the `leadingElement` prop. You can add icons\nto indicate actions, flags to represent countries or languages, or avatars to show users.\nLeading elements help users quickly identify and distinguish between different menu options.",...(Xa=(Qa=Y.parameters)==null?void 0:Qa.docs)==null?void 0:Xa.description}}};var Za,et,at,tt,nt;_.parameters={..._.parameters,docs:{...(Za=_.parameters)==null?void 0:Za.docs,source:{originalSource:`{
+}`,...(Qt=(Jt=_.parameters)==null?void 0:Jt.docs)==null?void 0:Qt.source},description:{story:"Enhance menu items with visual context using the `leadingElement` prop. You can add icons\nto indicate actions, flags to represent countries or languages, or avatars to show users.\nLeading elements help users quickly identify and distinguish between different menu options.",...(Zt=(Xt=_.parameters)==null?void 0:Xt.docs)==null?void 0:Zt.description}}};var ea,ta,aa,na,oa;$.parameters={...$.parameters,docs:{...(ea=$.parameters)==null?void 0:ea.docs,source:{originalSource:`{
   args: {
     trigger: <Button>Links</Button>,
     children: <>
@@ -431,7 +431,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
       expect(linksCallbacks.referAFriend).not.toHaveBeenCalled();
     });
   }
-}`,...(at=(et=_.parameters)==null?void 0:et.docs)==null?void 0:at.source},description:{story:"You can use the `as` prop to render a custom element for the menu item.\nYou can use that to render anchors or custom link components (e.g. Next.js or React Router Link)",...(nt=(tt=_.parameters)==null?void 0:tt.docs)==null?void 0:nt.description}}};var ot,it,rt,st,lt;$.parameters={...$.parameters,docs:{...(ot=$.parameters)==null?void 0:ot.docs,source:{originalSource:`{
+}`,...(aa=(ta=$.parameters)==null?void 0:ta.docs)==null?void 0:aa.source},description:{story:"You can use the `as` prop to render a custom element for the menu item.\nYou can use that to render anchors or custom link components (e.g. Next.js or React Router Link)",...(oa=(na=$.parameters)==null?void 0:na.docs)==null?void 0:oa.description}}};var ra,ia,sa,la,ca;J.parameters={...J.parameters,docs:{...(ra=J.parameters)==null?void 0:ra.docs,source:{originalSource:`{
   args: {
     children: <>
                 <DropdownMenuGroup label="Day of the week">
@@ -551,7 +551,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
       });
     });
   }
-}`,...(rt=(it=$.parameters)==null?void 0:it.docs)==null?void 0:rt.source},description:{story:"Radio groups allow users to select a single option from a list of mutually exclusive options.\nUse `DropdownMenuRadioGroup` with `DropdownMenuRadioItem` components to create radio groups.\nMultiple independent radio groups can coexist in the same dropdown menu.\n\nYou can define radio group options either with type-safe `items` prop or by\npassing `DropdownMenuRadioItem` as children if you need more flexibility.",...(lt=(st=$.parameters)==null?void 0:st.docs)==null?void 0:lt.description}}};var ct,ut,dt,mt,pt;J.parameters={...J.parameters,docs:{...(ct=J.parameters)==null?void 0:ct.docs,source:{originalSource:`{
+}`,...(sa=(ia=J.parameters)==null?void 0:ia.docs)==null?void 0:sa.source},description:{story:"Radio groups allow users to select a single option from a list of mutually exclusive options.\nUse `DropdownMenuRadioGroup` with `DropdownMenuRadioItem` components to create radio groups.\nMultiple independent radio groups can coexist in the same dropdown menu.\n\nYou can define radio group options either with type-safe `items` prop or by\npassing `DropdownMenuRadioItem` as children if you need more flexibility.",...(ca=(la=J.parameters)==null?void 0:la.docs)==null?void 0:ca.description}}};var ua,da,ma,pa,ga;Q.parameters={...Q.parameters,docs:{...(ua=Q.parameters)==null?void 0:ua.docs,source:{originalSource:`{
   args: {
     children: <>
                 <DropdownMenuCheckboxItem label="Email notifications" onCheckedChange={checkboxCallbacks.email} defaultChecked />
@@ -627,7 +627,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
       });
     });
   }
-}`,...(dt=(ut=J.parameters)==null?void 0:ut.docs)==null?void 0:dt.source},description:{story:"Checkbox items allow users to select multiple independent options from a list.\nUse `DropdownMenuCheckboxItem` to add checkboxes to the menu. Each checkbox maintains\nits own state and can be checked or unchecked independently of others.",...(pt=(mt=J.parameters)==null?void 0:mt.docs)==null?void 0:pt.description}}};var gt,yt,wt,bt,ht;I.parameters={...I.parameters,docs:{...(gt=I.parameters)==null?void 0:gt.docs,source:{originalSource:`args => {
+}`,...(ma=(da=Q.parameters)==null?void 0:da.docs)==null?void 0:ma.source},description:{story:"Checkbox items allow users to select multiple independent options from a list.\nUse `DropdownMenuCheckboxItem` to add checkboxes to the menu. Each checkbox maintains\nits own state and can be checked or unchecked independently of others.",...(ga=(pa=Q.parameters)==null?void 0:pa.docs)==null?void 0:ga.description}}};var ya,wa,ba,ha,fa;I.parameters={...I.parameters,docs:{...(ya=I.parameters)==null?void 0:ya.docs,source:{originalSource:`args => {
   const [dayOfTheWeek, setDayOfTheWeek] = useState('mon');
   const [timeOfTheDay, setTimeOfTheDay] = useState<string | undefined>();
   const handleDayOfTheWeekChange = (value: string) => {
@@ -672,7 +672,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
                 <DropdownMenuSelectOption label="Weekly" value="weekly" />
             </DropdownMenuSelect>
         </DropdownMenu>;
-}`,...(wt=(yt=I.parameters)==null?void 0:yt.docs)==null?void 0:wt.source},description:{story:"Select items provide a nested menu for choosing from a list of options, similar to a dropdown within a dropdown.\nUse `DropdownMenuSelect` with `DropdownMenuSelectOption` components to create select menus.\nThe selected value is displayed in the trigger label, and hovering over it opens a submenu with all available options.\n\nYou can define select options either with type-safe `items` prop or by\npassing `DropdownMenuSelectOption` as children if you need more flexibility.",...(ht=(bt=I.parameters)==null?void 0:bt.docs)==null?void 0:ht.description}}};var ft,kt,Bt,vt,xt;y.parameters={...y.parameters,docs:{...(ft=y.parameters)==null?void 0:ft.docs,source:{originalSource:`{
+}`,...(ba=(wa=I.parameters)==null?void 0:wa.docs)==null?void 0:ba.source},description:{story:"Select items provide a nested menu for choosing from a list of options, similar to a dropdown within a dropdown.\nUse `DropdownMenuSelect` with `DropdownMenuSelectOption` components to create select menus.\nThe selected value is displayed in the trigger label, and hovering over it opens a submenu with all available options.\n\nYou can define select options either with type-safe `items` prop or by\npassing `DropdownMenuSelectOption` as children if you need more flexibility.",...(fa=(ha=I.parameters)==null?void 0:ha.docs)==null?void 0:fa.description}}};var ka,Ba,va,xa,Ra;y.parameters={...y.parameters,docs:{...(ka=y.parameters)==null?void 0:ka.docs,source:{originalSource:`{
   render: function Render({
     align,
     side,
@@ -692,7 +692,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
     side: 'top',
     align: 'start'
   }
-}`,...(Bt=(kt=y.parameters)==null?void 0:kt.docs)==null?void 0:Bt.source},description:{story:"Similar to DropdownMenu, DropdownMenuSelect position can be controlled with `side` and `align` props.",...(xt=(vt=y.parameters)==null?void 0:vt.docs)==null?void 0:xt.description}}};var Rt,St,Ct;we.parameters={...we.parameters,docs:{...(Rt=we.parameters)==null?void 0:Rt.docs,source:{originalSource:`{
+}`,...(va=(Ba=y.parameters)==null?void 0:Ba.docs)==null?void 0:va.source},description:{story:"Similar to DropdownMenu, DropdownMenuSelect position can be controlled with `side` and `align` props.",...(Ra=(xa=y.parameters)==null?void 0:xa.docs)==null?void 0:Ra.description}}};var Sa,Ca,Da;be.parameters={...be.parameters,docs:{...(Sa=be.parameters)==null?void 0:Sa.docs,source:{originalSource:`{
   render: ControllingSelectPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -701,7 +701,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
   args: {
     side: 'inline-end'
   }
-}`,...(Ct=(St=we.parameters)==null?void 0:St.docs)==null?void 0:Ct.source}}};var Dt,Ot,Tt;be.parameters={...be.parameters,docs:{...(Dt=be.parameters)==null?void 0:Dt.docs,source:{originalSource:`{
+}`,...(Da=(Ca=be.parameters)==null?void 0:Ca.docs)==null?void 0:Da.source}}};var Oa,Ta,Ea;he.parameters={...he.parameters,docs:{...(Oa=he.parameters)==null?void 0:Oa.docs,source:{originalSource:`{
   render: ControllingSelectPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -711,7 +711,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
     side: 'inline-start',
     defaultOpen: true
   }
-}`,...(Tt=(Ot=be.parameters)==null?void 0:Ot.docs)==null?void 0:Tt.source}}};var Et,Ht,Mt;he.parameters={...he.parameters,docs:{...(Et=he.parameters)==null?void 0:Et.docs,source:{originalSource:`{
+}`,...(Ea=(Ta=he.parameters)==null?void 0:Ta.docs)==null?void 0:Ea.source}}};var Ma,Ha,Aa;fe.parameters={...fe.parameters,docs:{...(Ma=fe.parameters)==null?void 0:Ma.docs,source:{originalSource:`{
   render: ControllingSelectPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -721,7 +721,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
     side: 'left',
     defaultOpen: true
   }
-}`,...(Mt=(Ht=he.parameters)==null?void 0:Ht.docs)==null?void 0:Mt.source}}};var At,Ft,It;fe.parameters={...fe.parameters,docs:{...(At=fe.parameters)==null?void 0:At.docs,source:{originalSource:`{
+}`,...(Aa=(Ha=fe.parameters)==null?void 0:Ha.docs)==null?void 0:Aa.source}}};var Fa,Ia,ja;ke.parameters={...ke.parameters,docs:{...(Fa=ke.parameters)==null?void 0:Fa.docs,source:{originalSource:`{
   render: ControllingSelectPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -731,7 +731,7 @@ way to organize menus when explicit group labels would be unnecessary or too ver
     side: 'right',
     defaultOpen: true
   }
-}`,...(It=(Ft=fe.parameters)==null?void 0:Ft.docs)==null?void 0:It.source}}};var jt,qt,Vt;ke.parameters={...ke.parameters,docs:{...(jt=ke.parameters)==null?void 0:jt.docs,source:{originalSource:`{
+}`,...(ja=(Ia=ke.parameters)==null?void 0:Ia.docs)==null?void 0:ja.source}}};var qa,Va,La;Be.parameters={...Be.parameters,docs:{...(qa=Be.parameters)==null?void 0:qa.docs,source:{originalSource:`{
   render: ControllingSelectPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -741,21 +741,21 @@ way to organize menus when explicit group labels would be unnecessary or too ver
     side: 'top',
     defaultOpen: true
   }
-}`,...(Vt=(qt=ke.parameters)==null?void 0:qt.docs)==null?void 0:Vt.source}}};var Lt,Nt,Wt;Be.parameters={...Be.parameters,docs:{...(Lt=Be.parameters)==null?void 0:Lt.docs,source:{originalSource:`{
+}`,...(La=(Va=Be.parameters)==null?void 0:Va.docs)==null?void 0:La.source}}};var Na,Wa,Ua;ve.parameters={...ve.parameters,docs:{...(Na=ve.parameters)==null?void 0:Na.docs,source:{originalSource:`{
   render: ControllingSelectPosition.render,
   tags: ['!autodocs'],
   args: {
     align: 'start',
     defaultOpen: true
   }
-}`,...(Wt=(Nt=Be.parameters)==null?void 0:Nt.docs)==null?void 0:Wt.source}}};var Ut,zt,Pt;ve.parameters={...ve.parameters,docs:{...(Ut=ve.parameters)==null?void 0:Ut.docs,source:{originalSource:`{
+}`,...(Ua=(Wa=ve.parameters)==null?void 0:Wa.docs)==null?void 0:Ua.source}}};var za,Pa,Ga;xe.parameters={...xe.parameters,docs:{...(za=xe.parameters)==null?void 0:za.docs,source:{originalSource:`{
   render: ControllingSelectPosition.render,
   tags: ['!autodocs'],
   args: {
     align: 'end',
     defaultOpen: true
   }
-}`,...(Pt=(zt=ve.parameters)==null?void 0:zt.docs)==null?void 0:Pt.source}}};var Gt,Kt,Yt,_t,$t;H.parameters={...H.parameters,docs:{...(Gt=H.parameters)==null?void 0:Gt.docs,source:{originalSource:`{
+}`,...(Ga=(Pa=xe.parameters)==null?void 0:Pa.docs)==null?void 0:Ga.source}}};var Ka,Ya,_a,$a,Ja;H.parameters={...H.parameters,docs:{...(Ka=H.parameters)==null?void 0:Ka.docs,source:{originalSource:`{
   args: {
     children: <>
                 <DropdownSubmenu label="Region">
@@ -818,10 +818,10 @@ way to organize menus when explicit group labels would be unnecessary or too ver
       });
     });
   }
-}`,...(Yt=(Kt=H.parameters)==null?void 0:Kt.docs)==null?void 0:Yt.source},description:{story:`Create nested menu structures using \`DropdownSubmenu\` to organize complex navigation hierarchies.
+}`,...(_a=(Ya=H.parameters)==null?void 0:Ya.docs)==null?void 0:_a.source},description:{story:`Create nested menu structures using \`DropdownSubmenu\` to organize complex navigation hierarchies.
 Submenus appear when hovering over or clicking their parent item, and can contain any menu items,
 including additional submenus for deeper nesting. This pattern is ideal for settings menus or
-complex action lists where options naturally group into categories.`,...($t=(_t=H.parameters)==null?void 0:_t.docs)==null?void 0:$t.description}}};var Jt,Qt,Xt,Zt,en;w.parameters={...w.parameters,docs:{...(Jt=w.parameters)==null?void 0:Jt.docs,source:{originalSource:`{
+complex action lists where options naturally group into categories.`,...(Ja=($a=H.parameters)==null?void 0:$a.docs)==null?void 0:Ja.description}}};var Qa,Xa,Za,en,tn;w.parameters={...w.parameters,docs:{...(Qa=w.parameters)==null?void 0:Qa.docs,source:{originalSource:`{
   render: function Render({
     align,
     side,
@@ -842,7 +842,7 @@ complex action lists where options naturally group into categories.`,...($t=(_t=
     side: 'top',
     align: 'start'
   }
-}`,...(Xt=(Qt=w.parameters)==null?void 0:Qt.docs)==null?void 0:Xt.source},description:{story:"Similar to DropdownMenu, DropdownSubmenu position can be controlled with `side` and `align` props.",...(en=(Zt=w.parameters)==null?void 0:Zt.docs)==null?void 0:en.description}}};var an,tn,nn;xe.parameters={...xe.parameters,docs:{...(an=xe.parameters)==null?void 0:an.docs,source:{originalSource:`{
+}`,...(Za=(Xa=w.parameters)==null?void 0:Xa.docs)==null?void 0:Za.source},description:{story:"Similar to DropdownMenu, DropdownSubmenu position can be controlled with `side` and `align` props.",...(tn=(en=w.parameters)==null?void 0:en.docs)==null?void 0:tn.description}}};var an,nn,on;Re.parameters={...Re.parameters,docs:{...(an=Re.parameters)==null?void 0:an.docs,source:{originalSource:`{
   render: ControllingSubmenuPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -851,7 +851,7 @@ complex action lists where options naturally group into categories.`,...($t=(_t=
   args: {
     side: 'inline-end'
   }
-}`,...(nn=(tn=xe.parameters)==null?void 0:tn.docs)==null?void 0:nn.source}}};var on,rn,sn;Re.parameters={...Re.parameters,docs:{...(on=Re.parameters)==null?void 0:on.docs,source:{originalSource:`{
+}`,...(on=(nn=Re.parameters)==null?void 0:nn.docs)==null?void 0:on.source}}};var rn,sn,ln;Se.parameters={...Se.parameters,docs:{...(rn=Se.parameters)==null?void 0:rn.docs,source:{originalSource:`{
   render: ControllingSubmenuPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -861,7 +861,7 @@ complex action lists where options naturally group into categories.`,...($t=(_t=
     side: 'inline-start',
     defaultOpen: true
   }
-}`,...(sn=(rn=Re.parameters)==null?void 0:rn.docs)==null?void 0:sn.source}}};var ln,cn,un;Se.parameters={...Se.parameters,docs:{...(ln=Se.parameters)==null?void 0:ln.docs,source:{originalSource:`{
+}`,...(ln=(sn=Se.parameters)==null?void 0:sn.docs)==null?void 0:ln.source}}};var cn,un,dn;Ce.parameters={...Ce.parameters,docs:{...(cn=Ce.parameters)==null?void 0:cn.docs,source:{originalSource:`{
   render: ControllingSubmenuPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -871,7 +871,7 @@ complex action lists where options naturally group into categories.`,...($t=(_t=
     side: 'left',
     defaultOpen: true
   }
-}`,...(un=(cn=Se.parameters)==null?void 0:cn.docs)==null?void 0:un.source}}};var dn,mn,pn;Ce.parameters={...Ce.parameters,docs:{...(dn=Ce.parameters)==null?void 0:dn.docs,source:{originalSource:`{
+}`,...(dn=(un=Ce.parameters)==null?void 0:un.docs)==null?void 0:dn.source}}};var mn,pn,gn;De.parameters={...De.parameters,docs:{...(mn=De.parameters)==null?void 0:mn.docs,source:{originalSource:`{
   render: ControllingSubmenuPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -881,7 +881,7 @@ complex action lists where options naturally group into categories.`,...($t=(_t=
     side: 'right',
     defaultOpen: true
   }
-}`,...(pn=(mn=Ce.parameters)==null?void 0:mn.docs)==null?void 0:pn.source}}};var gn,yn,wn;De.parameters={...De.parameters,docs:{...(gn=De.parameters)==null?void 0:gn.docs,source:{originalSource:`{
+}`,...(gn=(pn=De.parameters)==null?void 0:pn.docs)==null?void 0:gn.source}}};var yn,wn,bn;Oe.parameters={...Oe.parameters,docs:{...(yn=Oe.parameters)==null?void 0:yn.docs,source:{originalSource:`{
   render: ControllingSubmenuPosition.render,
   parameters: {
     containerHeight: '500px'
@@ -891,21 +891,21 @@ complex action lists where options naturally group into categories.`,...($t=(_t=
     side: 'top',
     defaultOpen: true
   }
-}`,...(wn=(yn=De.parameters)==null?void 0:yn.docs)==null?void 0:wn.source}}};var bn,hn,fn;Oe.parameters={...Oe.parameters,docs:{...(bn=Oe.parameters)==null?void 0:bn.docs,source:{originalSource:`{
+}`,...(bn=(wn=Oe.parameters)==null?void 0:wn.docs)==null?void 0:bn.source}}};var hn,fn,kn;Te.parameters={...Te.parameters,docs:{...(hn=Te.parameters)==null?void 0:hn.docs,source:{originalSource:`{
   render: ControllingSubmenuPosition.render,
   tags: ['!autodocs'],
   args: {
     align: 'start',
     defaultOpen: true
   }
-}`,...(fn=(hn=Oe.parameters)==null?void 0:hn.docs)==null?void 0:fn.source}}};var kn,Bn,vn;Te.parameters={...Te.parameters,docs:{...(kn=Te.parameters)==null?void 0:kn.docs,source:{originalSource:`{
+}`,...(kn=(fn=Te.parameters)==null?void 0:fn.docs)==null?void 0:kn.source}}};var Bn,vn,xn;Ee.parameters={...Ee.parameters,docs:{...(Bn=Ee.parameters)==null?void 0:Bn.docs,source:{originalSource:`{
   render: ControllingSubmenuPosition.render,
   tags: ['!autodocs'],
   args: {
     align: 'end',
     defaultOpen: true
   }
-}`,...(vn=(Bn=Te.parameters)==null?void 0:Bn.docs)==null?void 0:vn.source}}};var xn,Rn,Sn,Cn,Dn;Q.parameters={...Q.parameters,docs:{...(xn=Q.parameters)==null?void 0:xn.docs,source:{originalSource:`{
+}`,...(xn=(vn=Ee.parameters)==null?void 0:vn.docs)==null?void 0:xn.source}}};var Rn,Sn,Cn,Dn,On;X.parameters={...X.parameters,docs:{...(Rn=X.parameters)==null?void 0:Rn.docs,source:{originalSource:`{
   parameters: {
     docs: {
       source: {
@@ -1066,8 +1066,8 @@ complex action lists where options naturally group into categories.`,...($t=(_t=
       name: 'Reset story'
     }));
   }
-}`,...(Sn=(Rn=Q.parameters)==null?void 0:Rn.docs)==null?void 0:Sn.source},description:{story:`Submenu and select open state also can be controlled.
-This is useful for creating coordinated onboarding tours.`,...(Dn=(Cn=Q.parameters)==null?void 0:Cn.docs)==null?void 0:Dn.description}}};var On,Tn,En,Hn,Mn;X.parameters={...X.parameters,docs:{...(On=X.parameters)==null?void 0:On.docs,source:{originalSource:`{
+}`,...(Cn=(Sn=X.parameters)==null?void 0:Sn.docs)==null?void 0:Cn.source},description:{story:`Submenu and select open state also can be controlled.
+This is useful for creating coordinated onboarding tours.`,...(On=(Dn=X.parameters)==null?void 0:Dn.docs)==null?void 0:On.description}}};var Tn,En,Mn,Hn,An;Z.parameters={...Z.parameters,docs:{...(Tn=Z.parameters)==null?void 0:Tn.docs,source:{originalSource:`{
   args: {
     keepMounted: true,
     children: <>
@@ -1129,7 +1129,7 @@ This is useful for creating coordinated onboarding tours.`,...(Dn=(Cn=Q.paramete
       expect(menu).toBeInTheDocument();
     });
   }
-}`,...(En=(Tn=X.parameters)==null?void 0:Tn.docs)==null?void 0:En.source},description:{story:"Use the `keepMounted` prop to keep the menu in the DOM when closed, hidden with CSS instead of\nunmounted. This is useful for preserving state, enabling exit animations, or improving performance\nwhen the menu opens and closes frequently. Both the main menu and submenus can be kept mounted independently.",...(Mn=(Hn=X.parameters)==null?void 0:Hn.docs)==null?void 0:Mn.description}}};var An,Fn,In,jn,qn;M.parameters={...M.parameters,docs:{...(An=M.parameters)==null?void 0:An.docs,source:{originalSource:`{
+}`,...(Mn=(En=Z.parameters)==null?void 0:En.docs)==null?void 0:Mn.source},description:{story:"Use the `keepMounted` prop to keep the menu in the DOM when closed, hidden with CSS instead of\nunmounted. This is useful for preserving state, enabling exit animations, or improving performance\nwhen the menu opens and closes frequently. Both the main menu and submenus can be kept mounted independently.",...(An=(Hn=Z.parameters)==null?void 0:Hn.docs)==null?void 0:An.description}}};var Fn,In,jn,qn,Vn;A.parameters={...A.parameters,docs:{...(Fn=A.parameters)==null?void 0:Fn.docs,source:{originalSource:`{
   args: Submenus.args,
   globals: {
     viewport: {
@@ -1196,7 +1196,7 @@ This is useful for creating coordinated onboarding tours.`,...(Dn=(Cn=Q.paramete
       });
     });
   }
-}`,...(In=(Fn=M.parameters)==null?void 0:Fn.docs)==null?void 0:In.source},description:{story:"On mobile devices, the menu will be rendered as a bottom sheet instead of a dropdown.",...(qn=(jn=M.parameters)==null?void 0:jn.docs)==null?void 0:qn.description}}};var Vn,Ln,Nn,Wn,Un;j.parameters={...j.parameters,docs:{...(Vn=j.parameters)==null?void 0:Vn.docs,source:{originalSource:`{
+}`,...(jn=(In=A.parameters)==null?void 0:In.docs)==null?void 0:jn.source},description:{story:"On mobile devices, the menu will be rendered as a bottom sheet instead of a dropdown.",...(Vn=(qn=A.parameters)==null?void 0:qn.docs)==null?void 0:Vn.description}}};var Ln,Nn,Wn,Un,zn;j.parameters={...j.parameters,docs:{...(Ln=j.parameters)==null?void 0:Ln.docs,source:{originalSource:`{
   args: {
     children: <>
                 <DropdownMenuItem label="Transfer balance" onClick={callbacks.items.transferBalance} />
@@ -1351,7 +1351,7 @@ This is useful for creating coordinated onboarding tours.`,...(Dn=(Cn=Q.paramete
       });
     });
   }
-}`,...(Nn=(Ln=j.parameters)==null?void 0:Ln.docs)==null?void 0:Nn.source},description:{story:`The DropdownMenu component implements comprehensive keyboard navigation following the
+}`,...(Wn=(Nn=j.parameters)==null?void 0:Nn.docs)==null?void 0:Wn.source},description:{story:`The DropdownMenu component implements comprehensive keyboard navigation following the
 [WAI-ARIA Menu pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/) and accessibility
 best practices. This ensures users who rely on keyboard navigation or assistive technologies
 can efficiently interact with menus.
@@ -1377,12 +1377,12 @@ can efficiently interact with menus.
 
 - **Enter** or **Arrow Right**: Opens a submenu and moves focus to its first item
 - **Arrow Left** or **Escape**: Closes the submenu and returns focus to the submenu trigger
-- Submenus maintain the same navigation patterns as the main menu`,...(Un=(Wn=j.parameters)==null?void 0:Wn.docs)==null?void 0:Un.description}}};var zn,Pn,Gn;He.parameters={...He.parameters,docs:{...(zn=He.parameters)==null?void 0:zn.docs,source:{originalSource:`{
+- Submenus maintain the same navigation patterns as the main menu`,...(zn=(Un=j.parameters)==null?void 0:Un.docs)==null?void 0:zn.description}}};var Pn,Gn,Kn;He.parameters={...He.parameters,docs:{...(Pn=He.parameters)==null?void 0:Pn.docs,source:{originalSource:`{
   ...KeyboardNavigation,
   globals: OnMobile.globals,
   parameters: OnMobile.parameters,
   tags: ['!autodocs']
-}`,...(Gn=(Pn=He.parameters)==null?void 0:Pn.docs)==null?void 0:Gn.source}}};var Kn,Yn,_n,$n,Jn;Z.parameters={...Z.parameters,docs:{...(Kn=Z.parameters)==null?void 0:Kn.docs,source:{originalSource:`{
+}`,...(Kn=(Gn=He.parameters)==null?void 0:Gn.docs)==null?void 0:Kn.source}}};var Yn,_n,$n,Jn,Qn;ee.parameters={...ee.parameters,docs:{...(Yn=ee.parameters)==null?void 0:Yn.docs,source:{originalSource:`{
   args: {
     defaultOpen: true,
     children: <>
@@ -1391,7 +1391,7 @@ can efficiently interact with menus.
       }).map((_, index) => <DropdownMenuItem key={index} label={\`Item \${index + 1}\`} />)}
             </>
   }
-}`,...(_n=(Yn=Z.parameters)==null?void 0:Yn.docs)==null?void 0:_n.source},description:{story:"When the menu has a lot of items, it will be rendered as a scrollable container.",...(Jn=($n=Z.parameters)==null?void 0:$n.docs)==null?void 0:Jn.description}}};var Qn,Xn,Zn,eo,ao;ee.parameters={...ee.parameters,docs:{...(Qn=ee.parameters)==null?void 0:Qn.docs,source:{originalSource:`{
+}`,...($n=(_n=ee.parameters)==null?void 0:_n.docs)==null?void 0:$n.source},description:{story:"When the menu has a lot of items, it will be rendered as a scrollable container.",...(Qn=(Jn=ee.parameters)==null?void 0:Jn.docs)==null?void 0:Qn.description}}};var Xn,Zn,eo,to,ao;te.parameters={...te.parameters,docs:{...(Xn=te.parameters)==null?void 0:Xn.docs,source:{originalSource:`{
   args: {
     defaultOpen: true,
     children: <DropdownMenuGroup label={longText}>
@@ -1408,7 +1408,7 @@ can efficiently interact with menus.
                 </DropdownMenuRadioGroup>
             </DropdownMenuGroup>
   }
-}`,...(Zn=(Xn=ee.parameters)==null?void 0:Xn.docs)==null?void 0:Zn.source},description:{story:"Please don't use long labels and descriptions for menu items.",...(ao=(eo=ee.parameters)==null?void 0:eo.docs)==null?void 0:ao.description}}};var to,no,oo,io,ro;ae.parameters={...ae.parameters,docs:{...(to=ae.parameters)==null?void 0:to.docs,source:{originalSource:`{
+}`,...(eo=(Zn=te.parameters)==null?void 0:Zn.docs)==null?void 0:eo.source},description:{story:"Please don't use long labels and descriptions for menu items.",...(ao=(to=te.parameters)==null?void 0:to.docs)==null?void 0:ao.description}}};var no,oo,ro,io,so;ae.parameters={...ae.parameters,docs:{...(no=ae.parameters)==null?void 0:no.docs,source:{originalSource:`{
   args: Submenus.args,
   render: function StoryRender(args) {
     const [dialogOpen, setDialogOpen] = useState(false);
@@ -1514,7 +1514,7 @@ can efficiently interact with menus.
       });
     });
   }
-}`,...(oo=(no=ae.parameters)==null?void 0:no.docs)==null?void 0:oo.source},description:{story:"Dropdown menu can be used inside a dialog or other popups.",...(ro=(io=ae.parameters)==null?void 0:io.docs)==null?void 0:ro.description}}};var so,lo,co,uo,mo;q.parameters={...q.parameters,docs:{...(so=q.parameters)==null?void 0:so.docs,source:{originalSource:`{
+}`,...(ro=(oo=ae.parameters)==null?void 0:oo.docs)==null?void 0:ro.source},description:{story:"Dropdown menu can be used inside a dialog or other popups.",...(so=(io=ae.parameters)==null?void 0:io.docs)==null?void 0:so.description}}};var lo,co,uo,mo,po;q.parameters={...q.parameters,docs:{...(lo=q.parameters)==null?void 0:lo.docs,source:{originalSource:`{
   render: function WithItemOpeningDialog(args) {
     const [open, setOpen] = useState(false);
     return <>
@@ -1552,13 +1552,13 @@ can efficiently interact with menus.
       await userEvent.keyboard('{Escape}');
     });
   }
-}`,...(co=(lo=q.parameters)==null?void 0:lo.docs)==null?void 0:co.source},description:{story:"Dropdown menu items can also open external dialogs.",...(mo=(uo=q.parameters)==null?void 0:uo.docs)==null?void 0:mo.description}}};var po,go,yo,wo,bo;te.parameters={...te.parameters,docs:{...(po=te.parameters)==null?void 0:po.docs,source:{originalSource:`{
+}`,...(uo=(co=q.parameters)==null?void 0:co.docs)==null?void 0:uo.source},description:{story:"Dropdown menu items can also open external dialogs.",...(po=(mo=q.parameters)==null?void 0:mo.docs)==null?void 0:po.description}}};var go,yo,wo,bo,ho;ne.parameters={...ne.parameters,docs:{...(go=ne.parameters)==null?void 0:go.docs,source:{originalSource:`{
   args: {
     keepMounted: true,
     children: <CustomDropdownMenuItemWithDialog />
   },
   play: ItemOpeningDialog.play
-}`,...(yo=(go=te.parameters)==null?void 0:go.docs)==null?void 0:yo.source},description:{story:`In some cases you might want to wrap DropdownMenuItem with a custom component, which might have a dialog inside:
+}`,...(wo=(yo=ne.parameters)==null?void 0:yo.docs)==null?void 0:wo.source},description:{story:`In some cases you might want to wrap DropdownMenuItem with a custom component, which might have a dialog inside:
 
 \`\`\`tsx
 const CustomDropdownMenuItemWithDialog = () => {
@@ -1574,4 +1574,30 @@ const CustomDropdownMenuItemWithDialog = () => {
 };
 \`\`\`
 
-In this case you need to use the \`keepMounted\` prop to prevent dialog from closing when menu unmounts.`,...(bo=(wo=te.parameters)==null?void 0:wo.docs)==null?void 0:bo.description}}};const yi=["Default","Uncontrolled","UncontrolledDefaultOpen","Controlled","ControlledDefaultOpen","ControllingPosition","SideInlineEnd","SideInlineStart","SideLeft","SideRight","SideTop","AlignStart","AlignEnd","DisabledItems","Description","Groups","Dividers","LeadingElements","Links","RadioGroups","CheckboxItems","SelectItems","ControllingSelectPosition","SelectSideInlineEnd","SelectSideInlineStart","SelectSideLeft","SelectSideRight","SelectSideTop","SelectAlignStart","SelectAlignEnd","Submenus","ControllingSubmenuPosition","SubmenuSideInlineEnd","SubmenuSideInlineStart","SubmenuSideLeft","SubmenuSideRight","SubmenuSideTop","SubmenuAlignStart","SubmenuAlignEnd","ControlledSubmenusAndSelects","KeepMounted","OnMobile","KeyboardNavigation","KeyboardNavigationOnMobile","Scroll","LongLabels","InsideDialog","ItemOpeningDialog","DialogInsideCustomItemComponent"];export{ye as AlignEnd,ge as AlignStart,J as CheckboxItems,E as Controlled,le as ControlledDefaultOpen,Q as ControlledSubmenusAndSelects,U as ControllingPosition,y as ControllingSelectPosition,w as ControllingSubmenuPosition,re as Default,P as Description,te as DialogInsideCustomItemComponent,z as DisabledItems,K as Dividers,G as Groups,ae as InsideDialog,q as ItemOpeningDialog,X as KeepMounted,j as KeyboardNavigation,He as KeyboardNavigationOnMobile,Y as LeadingElements,_ as Links,ee as LongLabels,M as OnMobile,$ as RadioGroups,Z as Scroll,ve as SelectAlignEnd,Be as SelectAlignStart,I as SelectItems,we as SelectSideInlineEnd,be as SelectSideInlineStart,he as SelectSideLeft,fe as SelectSideRight,ke as SelectSideTop,ce as SideInlineEnd,ue as SideInlineStart,de as SideLeft,me as SideRight,pe as SideTop,Te as SubmenuAlignEnd,Oe as SubmenuAlignStart,xe as SubmenuSideInlineEnd,Re as SubmenuSideInlineStart,Se as SubmenuSideLeft,Ce as SubmenuSideRight,De as SubmenuSideTop,H as Submenus,W as Uncontrolled,se as UncontrolledDefaultOpen,yi as __namedExportsOrder,gi as default};
+In this case you need to use the \`keepMounted\` prop to prevent dialog from closing when menu unmounts.`,...(ho=(bo=ne.parameters)==null?void 0:bo.docs)==null?void 0:ho.description}}};var fo,ko,Bo,vo,xo;oe.parameters={...oe.parameters,docs:{...(fo=oe.parameters)==null?void 0:fo.docs,source:{originalSource:`{
+  render: () => {
+    const CustomButton = forwardRef<HTMLButtonElement, Record<string, unknown>>((props, ref) => {
+      return <button {...props} ref={ref}>
+                        Button
+                    </button>;
+    });
+    return <DropdownMenu open={true} trigger={<CustomButton />}>
+                <DropdownMenuRadioGroup>
+                    <DropdownMenuItem label="Transfer balance" onClick={callbacks.items.transferBalance} />
+                    <DropdownMenuItem label="Add extra hours" onClick={callbacks.items.addExtraHours} />
+                </DropdownMenuRadioGroup>
+            </DropdownMenu>;
+  }
+}`,...(Bo=(ko=oe.parameters)==null?void 0:ko.docs)==null?void 0:Bo.source},description:{story:`Custom DropDownMenu triggers must forward the ref and props to the underlying DOM node to ensure proper dropdown positioning.
+
+\`\`\`tsx
+const CustomButton = forwardRef<HTMLButtonElement, {}>(
+    (props, ref) => {
+        return <button {...props} ref={ref} />;
+    },
+);
+
+<DropdownMenu open={true} trigger={<CustomButton />}>
+  ...
+</DropdownMenu>
+\`\`\``,...(xo=(vo=oe.parameters)==null?void 0:vo.docs)==null?void 0:xo.description}}};const vr=["Default","Uncontrolled","UncontrolledDefaultOpen","Controlled","ControlledDefaultOpen","ControllingPosition","SideInlineEnd","SideInlineStart","SideLeft","SideRight","SideTop","AlignStart","AlignEnd","DisabledItems","Description","Groups","Dividers","LeadingElements","Links","RadioGroups","CheckboxItems","SelectItems","ControllingSelectPosition","SelectSideInlineEnd","SelectSideInlineStart","SelectSideLeft","SelectSideRight","SelectSideTop","SelectAlignStart","SelectAlignEnd","Submenus","ControllingSubmenuPosition","SubmenuSideInlineEnd","SubmenuSideInlineStart","SubmenuSideLeft","SubmenuSideRight","SubmenuSideTop","SubmenuAlignStart","SubmenuAlignEnd","ControlledSubmenusAndSelects","KeepMounted","OnMobile","KeyboardNavigation","KeyboardNavigationOnMobile","Scroll","LongLabels","InsideDialog","ItemOpeningDialog","DialogInsideCustomItemComponent","CustomChildComponent"];export{we as AlignEnd,ye as AlignStart,Q as CheckboxItems,M as Controlled,ce as ControlledDefaultOpen,X as ControlledSubmenusAndSelects,z as ControllingPosition,y as ControllingSelectPosition,w as ControllingSubmenuPosition,oe as CustomChildComponent,se as Default,G as Description,ne as DialogInsideCustomItemComponent,P as DisabledItems,Y as Dividers,K as Groups,ae as InsideDialog,q as ItemOpeningDialog,Z as KeepMounted,j as KeyboardNavigation,He as KeyboardNavigationOnMobile,_ as LeadingElements,$ as Links,te as LongLabels,A as OnMobile,J as RadioGroups,ee as Scroll,xe as SelectAlignEnd,ve as SelectAlignStart,I as SelectItems,be as SelectSideInlineEnd,he as SelectSideInlineStart,fe as SelectSideLeft,ke as SelectSideRight,Be as SelectSideTop,ue as SideInlineEnd,de as SideInlineStart,me as SideLeft,pe as SideRight,ge as SideTop,Ee as SubmenuAlignEnd,Te as SubmenuAlignStart,Re as SubmenuSideInlineEnd,Se as SubmenuSideInlineStart,Ce as SubmenuSideLeft,De as SubmenuSideRight,Oe as SubmenuSideTop,H as Submenus,U as Uncontrolled,le as UncontrolledDefaultOpen,vr as __namedExportsOrder,Br as default};