@preply/ds-docs 5.2.0 → 5.2.1

package/dist/assets/{DropdownMenu.stories-DDZTqgtd.js → DropdownMenu.stories-DQ9Anz0c.js}

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

package/dist/assets/{FormControl.stories-By_j4CEK.js → FormControl.stories-BuYWW2sc.js}

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

package/dist/assets/{Heading-D-ou4j7h.js → Heading-CTiQg0ko.js}

@@ -1,2 +1,2 @@
-import{j as x}from"./jsx-runtime-BTJTZTIL.js";import{r as N}from"./index-Cb9e4tly.js";import{g as b,a as C}from"./text-accent-DvyJpEME.js";import{g as L}from"./text-centered-BFb64PJw.js";import{f as T}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as k,s as q,b as E}from"./classNames-9hsFPPZv.js";import{w as i}from"./componentNames-k0j3gHgH.js";import{g as U}from"./index-qlqSh81O.js";const V="Heading__Erkb1",I={Heading:V,"Heading--level-h1-normal":"Heading--level-h1-normal__t2Kqc","Heading--level-h1-large":"Heading--level-h1-large__2-ENi","Heading--level-h2-normal":"Heading--level-h2-normal__VzetR","Heading--level-h2-large":"Heading--level-h2-large__NxpiQ","Heading--level-h3-normal":"Heading--level-h3-normal__vCnMS","Heading--level-h3-large":"Heading--level-h3-large__Vs-gN","Heading--level-h4-normal":"Heading--level-h4-normal__O6PPx","Heading--level-h4-large":"Heading--level-h4-large__fNZXP","Heading--level-h5-normal":"Heading--level-h5-normal__IMKhU","Heading--level-h5-large":"Heading--level-h5-large__G40j-","Heading--narrow-l--level-h1-normal":"Heading--narrow-l--level-h1-normal__1qZxP","Heading--narrow-l--level-h1-large":"Heading--narrow-l--level-h1-large__vhit5","Heading--narrow-l--level-h2-normal":"Heading--narrow-l--level-h2-normal__a2FJF","Heading--narrow-l--level-h2-large":"Heading--narrow-l--level-h2-large__qFLdx","Heading--narrow-l--level-h3-normal":"Heading--narrow-l--level-h3-normal__D2GNa","Heading--narrow-l--level-h3-large":"Heading--narrow-l--level-h3-large__xeciI","Heading--narrow-l--level-h4-normal":"Heading--narrow-l--level-h4-normal__G7nUl","Heading--narrow-l--level-h4-large":"Heading--narrow-l--level-h4-large__cL6he","Heading--narrow-l--level-h5-normal":"Heading--narrow-l--level-h5-normal__UNw3s","Heading--narrow-l--level-h5-large":"Heading--narrow-l--level-h5-large__o76Fo","Heading--medium-s--level-h1-normal":"Heading--medium-s--level-h1-normal__IGwXF","Heading--medium-s--level-h1-large":"Heading--medium-s--level-h1-large__y2QjY","Heading--medium-s--level-h2-normal":"Heading--medium-s--level-h2-normal__T5nXA","Heading--medium-s--level-h2-large":"Heading--medium-s--level-h2-large__FbGid","Heading--medium-s--level-h3-normal":"Heading--medium-s--level-h3-normal__dcenB","Heading--medium-s--level-h3-large":"Heading--medium-s--level-h3-large__AR-Fa","Heading--medium-s--level-h4-normal":"Heading--medium-s--level-h4-normal__-NI8n","Heading--medium-s--level-h4-large":"Heading--medium-s--level-h4-large__AE93N","Heading--medium-s--level-h5-normal":"Heading--medium-s--level-h5-normal__ZJEJ-","Heading--medium-s--level-h5-large":"Heading--medium-s--level-h5-large__GJ8sd","Heading--medium-l--level-h1-normal":"Heading--medium-l--level-h1-normal__UG7oa","Heading--medium-l--level-h1-large":"Heading--medium-l--level-h1-large__hJgJ9","Heading--medium-l--level-h2-normal":"Heading--medium-l--level-h2-normal__sf7Py","Heading--medium-l--level-h2-large":"Heading--medium-l--level-h2-large__iYIZ9","Heading--medium-l--level-h3-normal":"Heading--medium-l--level-h3-normal__32eny","Heading--medium-l--level-h3-large":"Heading--medium-l--level-h3-large__kuCwB","Heading--medium-l--level-h4-normal":"Heading--medium-l--level-h4-normal__TE1Eh","Heading--medium-l--level-h4-large":"Heading--medium-l--level-h4-large__zZfdz","Heading--medium-l--level-h5-normal":"Heading--medium-l--level-h5-normal__7HYFE","Heading--medium-l--level-h5-large":"Heading--medium-l--level-h5-large__NkY03","Heading--wide-s--level-h1-normal":"Heading--wide-s--level-h1-normal__kqRcj","Heading--wide-s--level-h1-large":"Heading--wide-s--level-h1-large__yzHzL","Heading--wide-s--level-h2-normal":"Heading--wide-s--level-h2-normal__b9MXd","Heading--wide-s--level-h2-large":"Heading--wide-s--level-h2-large__q0kXc","Heading--wide-s--level-h3-normal":"Heading--wide-s--level-h3-normal__Ziuj8","Heading--wide-s--level-h3-large":"Heading--wide-s--level-h3-large__Q4111","Heading--wide-s--level-h4-normal":"Heading--wide-s--level-h4-normal__TxCtT","Heading--wide-s--level-h4-large":"Heading--wide-s--level-h4-large__cQQZf","Heading--wide-s--level-h5-normal":"Heading--wide-s--level-h5-normal__ZSrD7","Heading--wide-s--level-h5-large":"Heading--wide-s--level-h5-large__ZuCIn","Heading--wide-l--level-h1-normal":"Heading--wide-l--level-h1-normal__MavHI","Heading--wide-l--level-h1-large":"Heading--wide-l--level-h1-large__rE1tu","Heading--wide-l--level-h2-normal":"Heading--wide-l--level-h2-normal__YUYcX","Heading--wide-l--level-h2-large":"Heading--wide-l--level-h2-large__v5ssH","Heading--wide-l--level-h3-normal":"Heading--wide-l--level-h3-normal__kQBs2","Heading--wide-l--level-h3-large":"Heading--wide-l--level-h3-large__pU-wX","Heading--wide-l--level-h4-normal":"Heading--wide-l--level-h4-normal__WvWGX","Heading--wide-l--level-h4-large":"Heading--wide-l--level-h4-large__TeFQp","Heading--wide-l--level-h5-normal":"Heading--wide-l--level-h5-normal__1yKda","Heading--wide-l--level-h5-large":"Heading--wide-l--level-h5-large__Uadr4","Heading--variant-massive":"Heading--variant-massive__JFGji","Heading--variant-huge":"Heading--variant-huge__47FQz","Heading--variant-extraLarge":"Heading--variant-extraLarge__xRrqx","Heading--variant-large":"Heading--variant-large__wNK6S","Heading--variant-medium":"Heading--variant-medium__bCNZ-","Heading--variant-small":"Heading--variant-small__308Nb","Heading--narrow-l--variant-massive":"Heading--narrow-l--variant-massive__yg4AJ","Heading--narrow-l--variant-huge":"Heading--narrow-l--variant-huge__y9b4N","Heading--narrow-l--variant-extraLarge":"Heading--narrow-l--variant-extraLarge__XgyJu","Heading--narrow-l--variant-large":"Heading--narrow-l--variant-large__tzTo6","Heading--narrow-l--variant-medium":"Heading--narrow-l--variant-medium__iP3sG","Heading--narrow-l--variant-small":"Heading--narrow-l--variant-small__KeKjn","Heading--medium-s--variant-massive":"Heading--medium-s--variant-massive__L-b4J","Heading--medium-s--variant-huge":"Heading--medium-s--variant-huge__2o5EA","Heading--medium-s--variant-extraLarge":"Heading--medium-s--variant-extraLarge__eHmYu","Heading--medium-s--variant-large":"Heading--medium-s--variant-large__AI3KL","Heading--medium-s--variant-medium":"Heading--medium-s--variant-medium__t5dUK","Heading--medium-s--variant-small":"Heading--medium-s--variant-small__fCdNa","Heading--medium-l--variant-massive":"Heading--medium-l--variant-massive__jI3FW","Heading--medium-l--variant-huge":"Heading--medium-l--variant-huge__k0UpW","Heading--medium-l--variant-extraLarge":"Heading--medium-l--variant-extraLarge__yfai7","Heading--medium-l--variant-large":"Heading--medium-l--variant-large__65QTG","Heading--medium-l--variant-medium":"Heading--medium-l--variant-medium__UvxHB","Heading--medium-l--variant-small":"Heading--medium-l--variant-small__QI2p2","Heading--wide-s--variant-massive":"Heading--wide-s--variant-massive__B1S84","Heading--wide-s--variant-huge":"Heading--wide-s--variant-huge__KvYrn","Heading--wide-s--variant-extraLarge":"Heading--wide-s--variant-extraLarge__TJs8l","Heading--wide-s--variant-large":"Heading--wide-s--variant-large__Wcc0E","Heading--wide-s--variant-medium":"Heading--wide-s--variant-medium__mONpk","Heading--wide-s--variant-small":"Heading--wide-s--variant-small__oRKSN","Heading--wide-l--variant-massive":"Heading--wide-l--variant-massive__twgw-","Heading--wide-l--variant-huge":"Heading--wide-l--variant-huge__DBuNF","Heading--wide-l--variant-extraLarge":"Heading--wide-l--variant-extraLarge__H9nEI","Heading--wide-l--variant-large":"Heading--wide-l--variant-large__kJarT","Heading--wide-l--variant-medium":"Heading--wide-l--variant-medium__VN27E","Heading--wide-l--variant-small":"Heading--wide-l--variant-small__Skmxk"},r=N.forwardRef(function({children:g,variant:a,accent:l,level:e,large:v=!1,tag:m,color:n,centered:u,dataset:t,id:s,...o},H){const _=m||e||"h1",h=k(I,i.Heading,a?q("variant",a):E(`level-${e}-large`,`level-${e}-normal`,v)),w=L(u),c=b(!(l?void 0:n),l),p=C(n),f=["preply-ds-heading",...h,...w,...c,...p],y={...T(o),className:f.join(" "),...U(t,{preplyDsComponent:i.Heading}),id:s,ref:H};return x.jsx(_,{...y,children:g})});try{r.displayName="Heading",r.__docgenInfo={description:"",displayName:"Heading",props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:"strong",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"disabled"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"critical"'},{value:'"inverted"'},{value:'"selected"'},{value:'"accent"'},{value:'"accentDark"'},{value:'"placeholder"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"branded"'},{value:'"error"'}]}},color:{defaultValue:null,description:"@deprecated Use `accent` instead.",name:"color",required:!1,type:{name:"enum",value:[{value:'"white"'},{value:'"gray-100"'},{value:'"gray-200"'},{value:'"gray-300"'},{value:'"gray-400"'},{value:'"gray-500"'},{value:'"gray-600"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"green-100"'},{value:'"green-200"'},{value:'"green-300"'},{value:'"green-400"'},{value:'"green-500"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"magenta-100"'},{value:'"magenta-200"'},{value:'"magenta-300"'},{value:'"magenta-400"'},{value:'"magenta-500"'}]}},centered:{defaultValue:null,description:"",name:"centered",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},level:{defaultValue:null,description:"@deprecated Use `variant` instead\n@deprecated Use `variant` instead",name:"level",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},large:{defaultValue:{value:"false"},description:`@deprecated There is no large version in Tokyo UI.
-@deprecated There is no large version in Tokyo UI.`,name:"large",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"div"'},{value:'"p"'},{value:'"span"'},{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:'"massive"'},{value:'"huge"'},{value:'"extraLarge"'},{value:"ResponsiveProp<HeadingVariant>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLHeadingElement | null) => void"},{value:"RefObject<HTMLHeadingElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{r as H};
+import{j as x}from"./jsx-runtime-BTJTZTIL.js";import{r as N}from"./index-Cb9e4tly.js";import{g as b,a as C}from"./text-accent-DvyJpEME.js";import{g as L}from"./text-centered-BFb64PJw.js";import{f as T}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{m as k,s as q,b as E}from"./classNames-9hsFPPZv.js";import{w as i}from"./componentNames-k0j3gHgH.js";import{g as U}from"./index-qlqSh81O.js";const V="Heading__Erkb1",I={Heading:V,"Heading--level-h1-normal":"Heading--level-h1-normal__t2Kqc","Heading--level-h1-large":"Heading--level-h1-large__2-ENi","Heading--level-h2-normal":"Heading--level-h2-normal__VzetR","Heading--level-h2-large":"Heading--level-h2-large__NxpiQ","Heading--level-h3-normal":"Heading--level-h3-normal__vCnMS","Heading--level-h3-large":"Heading--level-h3-large__Vs-gN","Heading--level-h4-normal":"Heading--level-h4-normal__O6PPx","Heading--level-h4-large":"Heading--level-h4-large__fNZXP","Heading--level-h5-normal":"Heading--level-h5-normal__IMKhU","Heading--level-h5-large":"Heading--level-h5-large__G40j-","Heading--narrow-l--level-h1-normal":"Heading--narrow-l--level-h1-normal__1qZxP","Heading--narrow-l--level-h1-large":"Heading--narrow-l--level-h1-large__vhit5","Heading--narrow-l--level-h2-normal":"Heading--narrow-l--level-h2-normal__a2FJF","Heading--narrow-l--level-h2-large":"Heading--narrow-l--level-h2-large__qFLdx","Heading--narrow-l--level-h3-normal":"Heading--narrow-l--level-h3-normal__D2GNa","Heading--narrow-l--level-h3-large":"Heading--narrow-l--level-h3-large__xeciI","Heading--narrow-l--level-h4-normal":"Heading--narrow-l--level-h4-normal__G7nUl","Heading--narrow-l--level-h4-large":"Heading--narrow-l--level-h4-large__cL6he","Heading--narrow-l--level-h5-normal":"Heading--narrow-l--level-h5-normal__UNw3s","Heading--narrow-l--level-h5-large":"Heading--narrow-l--level-h5-large__o76Fo","Heading--medium-s--level-h1-normal":"Heading--medium-s--level-h1-normal__IGwXF","Heading--medium-s--level-h1-large":"Heading--medium-s--level-h1-large__y2QjY","Heading--medium-s--level-h2-normal":"Heading--medium-s--level-h2-normal__T5nXA","Heading--medium-s--level-h2-large":"Heading--medium-s--level-h2-large__FbGid","Heading--medium-s--level-h3-normal":"Heading--medium-s--level-h3-normal__dcenB","Heading--medium-s--level-h3-large":"Heading--medium-s--level-h3-large__AR-Fa","Heading--medium-s--level-h4-normal":"Heading--medium-s--level-h4-normal__-NI8n","Heading--medium-s--level-h4-large":"Heading--medium-s--level-h4-large__AE93N","Heading--medium-s--level-h5-normal":"Heading--medium-s--level-h5-normal__ZJEJ-","Heading--medium-s--level-h5-large":"Heading--medium-s--level-h5-large__GJ8sd","Heading--medium-l--level-h1-normal":"Heading--medium-l--level-h1-normal__UG7oa","Heading--medium-l--level-h1-large":"Heading--medium-l--level-h1-large__hJgJ9","Heading--medium-l--level-h2-normal":"Heading--medium-l--level-h2-normal__sf7Py","Heading--medium-l--level-h2-large":"Heading--medium-l--level-h2-large__iYIZ9","Heading--medium-l--level-h3-normal":"Heading--medium-l--level-h3-normal__32eny","Heading--medium-l--level-h3-large":"Heading--medium-l--level-h3-large__kuCwB","Heading--medium-l--level-h4-normal":"Heading--medium-l--level-h4-normal__TE1Eh","Heading--medium-l--level-h4-large":"Heading--medium-l--level-h4-large__zZfdz","Heading--medium-l--level-h5-normal":"Heading--medium-l--level-h5-normal__7HYFE","Heading--medium-l--level-h5-large":"Heading--medium-l--level-h5-large__NkY03","Heading--wide-s--level-h1-normal":"Heading--wide-s--level-h1-normal__kqRcj","Heading--wide-s--level-h1-large":"Heading--wide-s--level-h1-large__yzHzL","Heading--wide-s--level-h2-normal":"Heading--wide-s--level-h2-normal__b9MXd","Heading--wide-s--level-h2-large":"Heading--wide-s--level-h2-large__q0kXc","Heading--wide-s--level-h3-normal":"Heading--wide-s--level-h3-normal__Ziuj8","Heading--wide-s--level-h3-large":"Heading--wide-s--level-h3-large__Q4111","Heading--wide-s--level-h4-normal":"Heading--wide-s--level-h4-normal__TxCtT","Heading--wide-s--level-h4-large":"Heading--wide-s--level-h4-large__cQQZf","Heading--wide-s--level-h5-normal":"Heading--wide-s--level-h5-normal__ZSrD7","Heading--wide-s--level-h5-large":"Heading--wide-s--level-h5-large__ZuCIn","Heading--wide-l--level-h1-normal":"Heading--wide-l--level-h1-normal__MavHI","Heading--wide-l--level-h1-large":"Heading--wide-l--level-h1-large__rE1tu","Heading--wide-l--level-h2-normal":"Heading--wide-l--level-h2-normal__YUYcX","Heading--wide-l--level-h2-large":"Heading--wide-l--level-h2-large__v5ssH","Heading--wide-l--level-h3-normal":"Heading--wide-l--level-h3-normal__kQBs2","Heading--wide-l--level-h3-large":"Heading--wide-l--level-h3-large__pU-wX","Heading--wide-l--level-h4-normal":"Heading--wide-l--level-h4-normal__WvWGX","Heading--wide-l--level-h4-large":"Heading--wide-l--level-h4-large__TeFQp","Heading--wide-l--level-h5-normal":"Heading--wide-l--level-h5-normal__1yKda","Heading--wide-l--level-h5-large":"Heading--wide-l--level-h5-large__Uadr4","Heading--variant-massive":"Heading--variant-massive__JFGji","Heading--variant-huge":"Heading--variant-huge__47FQz","Heading--variant-extraLarge":"Heading--variant-extraLarge__xRrqx","Heading--variant-large":"Heading--variant-large__wNK6S","Heading--variant-medium":"Heading--variant-medium__bCNZ-","Heading--variant-small":"Heading--variant-small__308Nb","Heading--narrow-l--variant-massive":"Heading--narrow-l--variant-massive__yg4AJ","Heading--narrow-l--variant-huge":"Heading--narrow-l--variant-huge__y9b4N","Heading--narrow-l--variant-extraLarge":"Heading--narrow-l--variant-extraLarge__XgyJu","Heading--narrow-l--variant-large":"Heading--narrow-l--variant-large__tzTo6","Heading--narrow-l--variant-medium":"Heading--narrow-l--variant-medium__iP3sG","Heading--narrow-l--variant-small":"Heading--narrow-l--variant-small__KeKjn","Heading--medium-s--variant-massive":"Heading--medium-s--variant-massive__L-b4J","Heading--medium-s--variant-huge":"Heading--medium-s--variant-huge__2o5EA","Heading--medium-s--variant-extraLarge":"Heading--medium-s--variant-extraLarge__eHmYu","Heading--medium-s--variant-large":"Heading--medium-s--variant-large__AI3KL","Heading--medium-s--variant-medium":"Heading--medium-s--variant-medium__t5dUK","Heading--medium-s--variant-small":"Heading--medium-s--variant-small__fCdNa","Heading--medium-l--variant-massive":"Heading--medium-l--variant-massive__jI3FW","Heading--medium-l--variant-huge":"Heading--medium-l--variant-huge__k0UpW","Heading--medium-l--variant-extraLarge":"Heading--medium-l--variant-extraLarge__yfai7","Heading--medium-l--variant-large":"Heading--medium-l--variant-large__65QTG","Heading--medium-l--variant-medium":"Heading--medium-l--variant-medium__UvxHB","Heading--medium-l--variant-small":"Heading--medium-l--variant-small__QI2p2","Heading--wide-s--variant-massive":"Heading--wide-s--variant-massive__B1S84","Heading--wide-s--variant-huge":"Heading--wide-s--variant-huge__KvYrn","Heading--wide-s--variant-extraLarge":"Heading--wide-s--variant-extraLarge__TJs8l","Heading--wide-s--variant-large":"Heading--wide-s--variant-large__Wcc0E","Heading--wide-s--variant-medium":"Heading--wide-s--variant-medium__mONpk","Heading--wide-s--variant-small":"Heading--wide-s--variant-small__oRKSN","Heading--wide-l--variant-massive":"Heading--wide-l--variant-massive__twgw-","Heading--wide-l--variant-huge":"Heading--wide-l--variant-huge__DBuNF","Heading--wide-l--variant-extraLarge":"Heading--wide-l--variant-extraLarge__H9nEI","Heading--wide-l--variant-large":"Heading--wide-l--variant-large__kJarT","Heading--wide-l--variant-medium":"Heading--wide-l--variant-medium__VN27E","Heading--wide-l--variant-small":"Heading--wide-l--variant-small__Skmxk"},r=N.forwardRef(function({children:g,variant:a,accent:l,level:e,large:v=!1,tag:m,color:n,centered:u,dataset:t,id:s,...o},H){const _=m||e||"h1",h=k(I,i.Heading,a?q("variant",a):E(`level-${e}-large`,`level-${e}-normal`,v)),w=L(u),c=b(!(l?void 0:n),l),p=C(n),f=["preply-ds-heading",...h,...w,...c,...p],y={...T(o),className:f.join(" "),...U(t,{preplyDsComponent:i.Heading}),id:s,ref:H};return x.jsx(_,{...y,children:g})});try{r.displayName="Heading",r.__docgenInfo={description:"",displayName:"Heading",props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:"strong",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"disabled"'},{value:'"error"'},{value:'"placeholder"'},{value:'"accent"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"accentDark"'},{value:'"inverted"'},{value:'"positive"'},{value:'"info"'},{value:'"warning"'},{value:'"critical"'},{value:'"branded"'},{value:'"selected"'}]}},color:{defaultValue:null,description:"@deprecated Use `accent` instead.",name:"color",required:!1,type:{name:"enum",value:[{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"white"'},{value:'"gray-100"'},{value:'"gray-200"'},{value:'"gray-300"'},{value:'"gray-400"'},{value:'"gray-500"'},{value:'"gray-600"'},{value:'"green-100"'},{value:'"green-200"'},{value:'"green-300"'},{value:'"green-400"'},{value:'"green-500"'},{value:'"magenta-100"'},{value:'"magenta-200"'},{value:'"magenta-300"'},{value:'"magenta-400"'},{value:'"magenta-500"'}]}},centered:{defaultValue:null,description:"",name:"centered",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},level:{defaultValue:null,description:"@deprecated Use `variant` instead\n@deprecated Use `variant` instead",name:"level",required:!1,type:{name:"enum",value:[{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},large:{defaultValue:{value:"false"},description:`@deprecated There is no large version in Tokyo UI.
+@deprecated There is no large version in Tokyo UI.`,name:"large",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:"ResponsiveProp<boolean>"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"div"'},{value:'"p"'},{value:'"span"'},{value:'"h1"'},{value:'"h2"'},{value:'"h3"'},{value:'"h4"'},{value:'"h5"'}]}},variant:{defaultValue:null,description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:'"massive"'},{value:'"huge"'},{value:'"extraLarge"'},{value:"ResponsiveProp<HeadingVariant>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLHeadingElement | null) => void"},{value:"RefObject<HTMLHeadingElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{r as H};

package/dist/assets/{Heading.stories-DBQ5k_Gi.js → Heading.stories-CdaUOFTO.js}

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

package/dist/assets/{Icon-C9LCNP6i.js → Icon-5QESEDp5.js}

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

package/dist/assets/{Icon-RSC-CV1ghZyJ.js → Icon-RSC-CY2tw9Wa.js}

@@ -1,4 +1,4 @@
-import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as n}from"./index-BN6VMYqa.js";import{M as m,S as s}from"./index-xzr6a2UN.js";import{ServerComponent as i}from"./Icon.stories-BY7I3NYo.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-DQObBSoc.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-B-o4vu0Y.js";import"./Icon-C9LCNP6i.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./options-BDxO9WUW.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
+import{j as o}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as n}from"./index-BN6VMYqa.js";import{M as m,S as s}from"./index-GU-yTW76.js";import{ServerComponent as i}from"./Icon.stories-BDsCeC5v.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-DD8HN-R1.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-B-o4vu0Y.js";import"./Icon-5QESEDp5.js";import"./text-accent-DvyJpEME.js";import"./classNames-9hsFPPZv.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-BT0Aq7PA.js";import"./componentNames-k0j3gHgH.js";import"./index-qlqSh81O.js";import"./defaults-czRWsFkX.js";import"./options-BDxO9WUW.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
 `,o.jsx(e.h1,{id:"use-icon-as-react-server-component",children:"Use Icon as react server component"}),`
 `,o.jsxs(e.p,{children:["To use Icon as react server component, provide ",o.jsx(e.code,{children:"svg"})," as element:"]}),`
 `,o.jsx(s,{of:i}),`

package/dist/assets/{Icon.stories-BY7I3NYo.js → Icon.stories-BDsCeC5v.js}

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

package/dist/assets/IconButton-DSKTwXgX.js

@@ -0,0 +1,8 @@
+import{j as i}from"./jsx-runtime-BTJTZTIL.js";import{r as m}from"./index-Cb9e4tly.js";import{r as d}from"./render-icon-BT0Aq7PA.js";import{B as v}from"./ButtonBase-BpIWpxNP.js";import{w as p}from"./componentNames-k0j3gHgH.js";import{B as c,b as f}from"./defaults-czRWsFkX.js";const y="bubbleCounter__IIv-p",b="childTargetOverlay__7xCVK",V="cutout__ooHoK",g={bubbleCounter:y,"size-small":"size-small__eLF8T","size-medium":"size-medium__UY-G5","size-large":"size-large__qs1m8","variant-dark":"variant-dark__OzCSP","variant-light":"variant-light__vwrDe",childTargetOverlay:b,cutout:V},e=m.forwardRef(function({variant:n=f,size:l=c,url:u,a11yLabel:t,svg:r,...o},s){return i.jsx(v,{...o,ref:s,className:g.cutout,isIconButton:!0,variant:n,size:l,url:u,a11yLabel:t,preplyDsComponent:p.IconButton,children:d(r,{"aria-hidden":"true",focusable:"false"})})});try{e.displayName="IconButton",e.__docgenInfo={description:"",displayName:"IconButton",props:{disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},as:{defaultValue:null,description:`Custom element to render the button.
+
+Allows rendering the button using a different React element or component.
+This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
+@example // Render as a react router link component
+import { Link } from 'react-router-dom';
+
+<ButtonBase as={<Link to="/home" />} />`,name:"as",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},size:{defaultValue:{value:"s"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:"ResponsiveProp<ButtonSize>"}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"enum",value:[{value:"string"}]}},variant:{defaultValue:{value:"primary"},description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"critical"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"plain"'},{value:'"dangerous"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | HTMLAnchorElement | null) => void"},{value:"RefObject<HTMLButtonElement | HTMLAnchorElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}},selected:{defaultValue:null,description:"",name:"selected",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}}}}}catch{}export{e as I,g as b};