@preply/ds-docs 9.0.0 → 9.1.0

package/dist/assets/{DropdownMenu.stories-BpEhFeX_.js → DropdownMenu.stories-CEAGHTed.js}

@@ -1,4 +1,4 @@
-import{j as a,r as b}from"./iframe-C8q8wjEm.js";import{D as h,a as A,b as V,c as L,d as ne,e as x,f,g as s,h as F}from"./DropdownMenu-RBToMXkL.js";import{B as oe}from"./Button-8TyghF-W.js";import{I as v}from"./Icon-CeynEPoQ.js";import{F as ko,a as Bo}from"./TokyoUISettings-AUPAZo6H.js";import{F as vo}from"./TokyoUIMessages-wIafFsU2.js";import{C as Ie}from"./CountryFlag-BfP2Z-xa.js";import{A as je}from"./Avatar-BysKY9Is.js";import{F as O}from"./TokyoUIEmojiFrowning-Cns9Y9eQ.js";import{D as Fe}from"./index-BZjlzf6m.js";import{D as xo}from"./Divider-UpivNe1W.js";import{I as Ro}from"./IconButton-CT1U16hq.js";import{c as So}from"./OnboardingTour-DjRE-J8f.js";import"./preload-helper-Dp1pzeXC.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-Dts5uwdK.js";import"./TokyoUIChevronRight-BUlmcwhk.js";import"./TokyoUICheck-DyeJxS4m.js";import"./breakpoints-BfMlrtxE.js";import"./useOpenInteractionType-C_sBEUHJ.js";import"./VisuallyHidden-oCB6vAK-.js";import"./index-B2swU3YW.js";import"./useControllableState-POsCn5P8.js";import"./useStableCallback-BE4-kfmF.js";import"./message-C3RuDR6M.js";import"./render-icon-rjyGnIsi.js";import"./ButtonBase-D85CySUD.js";import"./Spinner-VeUQXU7V.js";import"./useMergeRefs-DkFVQgA0.js";import"./useHostname-MecFXBKz.js";import"./index-CC6DAVyL.js";import"./text-accent-Bbx7l_cl.js";import"./constants-5om8Ptru.js";import"./Steps-BxR2mZ1_.js";import"./Heading-IAeZxORQ.js";import"./text-centered-Cg_ddFhQ.js";import"./ProgressSteps-B2XQcdLG.js";import"./Text-CPACpRkz.js";import"./DialogTitle-Cwjppmjv.js";import"./TokyoUIClose-DpSNWwxX.js";import"./shared-strings-CDaZX-3B.js";import"./DialogActions-DqsdBLDH.js";import"./Dialog-CbS23AlC.js";import"./OnboardingTooltip-h7CPBh1u.js";import"./index-DYYdejgZ.js";const{fn:m,expect:t,userEvent:i,waitFor:r,within:ie}=__STORYBOOK_MODULE_TEST__,u={onOpenChange:m(),items:{transferBalance:m(),addExtraHours:m(),currency:m(),language:m()}},hi={title:"Components/DropdownMenu",component:F,subcomponents:{DropdownMenuItem:s,DropdownMenuGroup:f,DropdownSubmenu:x,DropdownMenuRadioGroup:ne,DropdownMenuRadioItem:L,DropdownMenuCheckboxItem:V,DropdownMenuSelect:A,DropdownMenuSelectOption:h},parameters:{preventIframeFromScrollingParent:!0,layout:"fullscreen",docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[(e,n)=>a.jsx("div",{style:{height:n.parameters.containerHeight||"100%",padding:24,display:"flex",justifyContent:"center",alignItems:"center"},children:a.jsx(e,{})})],args:{onOpenChange:u.onOpenChange,trigger:a.jsx(oe,{children:"Settings"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours})]})}},re={tags:["!autodocs","!dev"],args:{defaultOpen:!0}},R=t.anything(),W={play:async({canvas:e,step:n,args:o})=>{await n("Initially closed",async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!0,R)}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)}),await n("Open dropdown again",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Transfer balance"',async()=>{await i.click(e.getByRole("menuitem",{name:"Transfer balance"})),t(u.items.transferBalance).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}},se={tags:["!autodocs"],args:{defaultOpen:!0},play:async({canvas:e,step:n})=>{await n("Initially open",async()=>{await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}};let Me;const E={decorators:[(e,n)=>{const[o,l]=b.useState(!!n.args.open);Me=l;const c=(d,k)=>{var g,B;l(d),(B=(g=n.args).onOpenChange)==null||B.call(g,d,k)};return a.jsx(e,{args:{...n.args,open:o,onOpenChange:c}})}],args:{open:!1},play:async({canvas:e,step:n,args:o})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!0,R)}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)}),await n("Open dropdown via open prop",async()=>{u.onOpenChange.mockClear(),Me(!0),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).not.toHaveBeenCalled()}),await n("Close dropdown via open prop",async()=>{u.onOpenChange.mockClear(),Me(!1),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).not.toHaveBeenCalled()})}},le={...E,tags:["!autodocs"],args:{...E.args,open:!0},play:async({canvas:e,step:n,args:o})=>{await n("Initially open",async()=>{await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}},U={parameters:{containerHeight:"500px"},args:{side:"top",align:"start",defaultOpen:!0}},ce={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end",defaultOpen:!0}},ue={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},de={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},me={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},pe={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},ge={tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},ye={tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},z={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Add extra hours"',async()=>{u.onOpenChange.mockClear();const o=e.getByRole("menuitem",{name:"Add extra hours"});t(o).toHaveAttribute("aria-disabled","true"),await i.click(o),t(u.items.addExtraHours).not.toHaveBeenCalled(),t(u.onOpenChange).not.toHaveBeenCalled(),t(e.queryByRole("menu")).toBeVisible()})}},P={args:{trigger:a.jsx(oe,{children:"Language"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Español",description:"Spanish"}),a.jsx(s,{label:"Українська",description:"Ukrainian"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Language"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Verify items a11y names and descriptions",async()=>{const o=e.getByRole("menuitem",{name:"Español"});t(o).toHaveAccessibleName("Español"),t(o).toHaveAccessibleDescription("Spanish");const l=e.getByRole("menuitem",{name:"Українська"});t(l).toHaveAccessibleName("Українська"),t(l).toHaveAccessibleDescription("Ukrainian")})}},G={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(f,{label:"Region",children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]}),a.jsxs(f,{label:"Subscription",children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"})]})]})}},K={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"User profile"}),a.jsx(s,{label:"Payments & subscriptions"}),a.jsx(xo,{}),a.jsx(s,{label:"Logout"})]})}},Y={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(f,{label:"Icons",children:[a.jsx(s,{leadingElement:a.jsx(v,{svg:ko,size:"24"}),label:"Reschedule"}),a.jsx(s,{leadingElement:a.jsx(v,{svg:vo,size:"24"}),label:"Message tutor"})]}),a.jsxs(f,{label:"Flags",children:[a.jsx(s,{leadingElement:a.jsx(Ie,{code:"es",alt:"",size:"medium"}),label:"Spain"}),a.jsx(s,{leadingElement:a.jsx(Ie,{code:"ua",alt:"",size:"medium"}),label:"Ukraine"})]}),a.jsxs(f,{label:"Avatars",children:[a.jsx(s,{leadingElement:a.jsx(je,{size:"24"}),label:"Kobe B."}),a.jsx(s,{leadingElement:a.jsx(je,{size:"24"}),label:"Jenny R."})]})]})}},Ae=b.forwardRef(function({to:n,...o},l){return a.jsx("a",{href:n,...o,ref:l})});Ae.displayName="Link";const S={findATutor:m(e=>{e.preventDefault()}),becomeATutor:m(e=>{e.preventDefault()}),myLessons:m(e=>{e.preventDefault()}),referAFriend:m(e=>{e.preventDefault()})},_={args:{trigger:a.jsx(oe,{children:"Links"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Find a Tutor",onClick:S.findATutor,as:a.jsx("a",{href:"/en/online/english-tutors"})}),a.jsx(s,{label:"Become a Tutor",onClick:S.becomeATutor,as:a.jsx("a",{href:"/en/teach"}),disabled:!0}),a.jsx(s,{label:"My Lessons",onClick:S.myLessons,as:a.jsx(Ae,{to:"/en/lessons"})}),a.jsx(s,{label:"Refer a Friend",onClick:S.referAFriend,as:a.jsx(Ae,{to:"/en/referral"}),disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Assert links are rendered correctly",async()=>{const o=e.getByRole("menuitem",{name:"Find a Tutor"});t(o.tagName).toBe("A"),t(o).toHaveAttribute("href","/en/online/english-tutors");const l=e.getByRole("menuitem",{name:"Become a Tutor"});t(l.tagName).toBe("A"),t(l).toHaveAttribute("href","/en/teach"),t(l).toHaveAttribute("aria-disabled","true");const c=e.getByRole("menuitem",{name:"My Lessons"});t(c.tagName).toBe("A"),t(c).toHaveAttribute("href","/en/lessons");const d=e.getByRole("menuitem",{name:"Refer a Friend"});t(d.tagName).toBe("A"),t(d).toHaveAttribute("href","/en/referral"),t(d).toHaveAttribute("aria-disabled","true")}),await n('Click on "Find a Tutor"',async()=>{const o=e.getByRole("menuitem",{name:"Find a Tutor"});await i.click(o),t(S.findATutor).toHaveBeenCalled()}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Become a Tutor"',async()=>{const o=e.getByRole("menuitem",{name:"Become a Tutor"});await i.click(o),t(S.becomeATutor).not.toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "My Lessons"',async()=>{const o=e.getByRole("menuitem",{name:"My Lessons"});await i.click(o),t(S.myLessons).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Refer a Friend"',async()=>{const o=e.getByRole("menuitem",{name:"Refer a Friend"});await i.click(o),t(S.referAFriend).not.toHaveBeenCalled()})}},C={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},$={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(f,{label:"Day of the week",children:a.jsx(ne,{defaultValue:"mon",onValueChange:C.dayOfTheWeek,items:[{label:"Monday",value:"mon"},{label:"Tuesday",value:"tue"},{label:"Wednesday",value:"wed"},{label:"Thursday",value:"thu"},{label:"Friday",value:"fri"},{label:"Saturday",value:"sat",disabled:!0},{label:"Sunday",value:"sun",disabled:!0}]})}),a.jsx(f,{label:"Time of the day",children:a.jsxs(ne,{onValueChange:C.timeOfTheDay,children:[a.jsx(L,{label:"Morning",value:"morning"}),a.jsx(L,{label:"Afternoon",value:"afternoon"})]})}),a.jsx(f,{label:"Frequency",children:a.jsxs(ne,{value:"once",onValueChange:C.frequency,disabled:!0,children:[a.jsx(L,{label:"Once",value:"once"}),a.jsx(L,{label:"Weekly",value:"weekly"})]})})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitemradio",{name:"Monday"}),l=e.getByRole("menuitemradio",{name:"Tuesday"}),c=e.getByRole("menuitemradio",{name:"Saturday"});await n("Day of the week: default value is selected",async()=>{t(o).toHaveAttribute("aria-checked","true")}),await n('Click on "Tuesday"',async()=>{await i.click(l),t(C.dayOfTheWeek).toHaveBeenCalledWith("tue"),await r(()=>{t(o).toHaveAttribute("aria-checked","false"),t(l).toHaveAttribute("aria-checked","true")})}),await n('Click on "Saturday"',async()=>{C.dayOfTheWeek.mockClear(),await i.click(c),t(C.dayOfTheWeek).not.toHaveBeenCalled(),await r(()=>{t(l).toHaveAttribute("aria-checked","true")})});const d=e.getByRole("menuitemradio",{name:"Morning"}),k=e.getByRole("menuitemradio",{name:"Afternoon"});await n("Time of the day: none is selected",async()=>{t(d).toHaveAttribute("aria-checked","false"),t(k).toHaveAttribute("aria-checked","false")}),await n('Click on "Morning"',async()=>{await i.click(d),t(C.timeOfTheDay).toHaveBeenCalledWith("morning"),await r(()=>{t(d).toHaveAttribute("aria-checked","true")})});const g=e.getByRole("menuitemradio",{name:"Once"}),B=e.getByRole("menuitemradio",{name:"Weekly"});await n("Frequency: everything is disabled, once is selected",async()=>{t(g).toHaveAttribute("aria-disabled","true"),t(B).toHaveAttribute("aria-disabled","true"),t(g).toHaveAttribute("aria-checked","true"),t(B).toHaveAttribute("aria-checked","false")}),await n('Click on "Weekly"',async()=>{await i.click(B),t(C.frequency).not.toHaveBeenCalled(),await r(()=>{t(g).toHaveAttribute("aria-checked","true")})})}},D={email:m(),sms:m(),push:m(),alerts:m()},J={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(V,{label:"Email notifications",onCheckedChange:D.email,defaultChecked:!0}),a.jsx(V,{label:"SMS notifications",onCheckedChange:D.sms}),a.jsx(V,{label:"Push notifications",onCheckedChange:D.push,disabled:!0}),a.jsx(V,{label:"System alerts (required)",onCheckedChange:D.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitemcheckbox",{name:"Email notifications"}),l=e.getByRole("menuitemcheckbox",{name:"SMS notifications"}),c=e.getByRole("menuitemcheckbox",{name:"Push notifications"}),d=e.getByRole("menuitemcheckbox",{name:"System alerts (required)"});await n("Email notifications is checked by default",async()=>{t(o).toHaveAttribute("aria-checked","true")}),await n('Uncheck "Email notifications"',async()=>{await i.click(o),t(D.email).toHaveBeenCalledWith(!1,R),await r(()=>{t(o).toHaveAttribute("aria-checked","false")})}),await n('"SMS notifications" is not checked',async()=>{t(l).toHaveAttribute("aria-checked","false")}),await n('Check "SMS notifications"',async()=>{await i.click(l),t(D.sms).toHaveBeenCalledWith(!0,R),await r(()=>{t(l).toHaveAttribute("aria-checked","true")})}),await n('"Push notifications" is disabled and not checked',async()=>{t(c).toHaveAttribute("aria-disabled","true"),t(c).toHaveAttribute("aria-checked","false")}),await n('Click on "Push notifications"',async()=>{await i.click(c),t(D.push).not.toHaveBeenCalled(),await r(()=>{t(c).toHaveAttribute("aria-checked","false")})}),await n('"System alerts (required)" is disabled and checked',async()=>{t(d).toHaveAttribute("aria-disabled","true"),t(d).toHaveAttribute("aria-checked","true")}),await n('Click on "System alerts (required)"',async()=>{await i.click(d),t(D.alerts).not.toHaveBeenCalled(),await r(()=>{t(d).toHaveAttribute("aria-checked","true")})})}},N={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},I=e=>{const[n,o]=b.useState("mon"),[l,c]=b.useState(),d=g=>{o(g),N.dayOfTheWeek(g)},k=g=>{c(g),N.timeOfTheDay(g)};return a.jsxs(F,{...e,children:[a.jsx(A,{label:"Day of the week",value:n,onValueChange:d,items:[{label:"Monday",value:"mon"},{label:"Tuesday",value:"tue"},{label:"Wednesday",value:"wed"},{label:"Thursday",value:"thu"},{label:"Friday",value:"fri"},{label:"Saturday",value:"sat",disabled:!0},{label:"Sunday",value:"sun",disabled:!0}]}),a.jsxs(A,{label:"Time of the day",defaultValue:l,onValueChange:k,children:[a.jsx(h,{value:"morning",label:"Morning"}),a.jsx(h,{value:"afternoon",label:"Afternoon"})]}),a.jsxs(A,{label:"Frequency",onValueChange:N.frequency,disabled:!0,children:[a.jsx(h,{label:"Once",value:"once"}),a.jsx(h,{label:"Weekly",value:"weekly"})]})]})};I.play=async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitem",{name:/^Day of the week/});await n("Day of the week: default value is selected",async()=>{t(o).toHaveAccessibleName(/Selected: Monday$/)}),await n("Open day of the week submenu",async()=>{await i.hover(o),await r(()=>{t(e.queryByRole("menu",{name:/^Day of the week/})).toBeVisible()})}),await n('Click on "Tuesday"',async()=>{await i.click(e.getByRole("menuitemradio",{name:"Tuesday"})),t(N.dayOfTheWeek).toHaveBeenCalledWith("tue"),await r(()=>{t(e.queryByRole("menu",{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),t(o).toHaveAccessibleName(/Selected: Tuesday$/)})});const l=e.getByRole("menuitem",{name:/^Time of the day/});await n("Time of the day: nothing is selected",async()=>{t(l).toHaveAccessibleName("Time of the day")}),await n("Open time of the day submenu",async()=>{l.focus(),await i.keyboard(" "),await r(()=>{t(e.queryByRole("menu",{name:/^Time of the day/})).toBeVisible()})}),await n('Click on "Morning"',async()=>{await i.click(e.getByRole("menuitemradio",{name:"Morning"})),t(N.timeOfTheDay).toHaveBeenCalledWith("morning"),await r(()=>{t(e.queryByRole("menu",{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),t(l).toHaveAccessibleName(/Selected: Morning$/)})}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Frequency is disabled",async()=>{const c=e.getByRole("menuitem",{name:"Frequency"});t(c).toHaveAttribute("aria-disabled","true"),await i.click(c,{pointerEventsCheck:0}),t(N.frequency).not.toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu",{name:"Frequency",hidden:!0})).not.toBeVisible()})})};const y={render:function({align:n,side:o,...l}){return a.jsx(F,{...l,defaultOpen:!0,children:a.jsxs(A,{label:"Time of the day",side:o,align:n,defaultOpen:!0,children:[a.jsx(h,{value:"morning",label:"Morning"}),a.jsx(h,{value:"afternoon",label:"Afternoon"})]})})},parameters:{containerHeight:"500px"},args:{side:"top",align:"start"}},we={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end"}},be={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},he={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},fe={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},ke={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},Be={render:y.render,tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},ve={render:y.render,tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},H={args:{children:a.jsxs(a.Fragment,{children:[a.jsxs(x,{label:"Region",children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]}),a.jsxs(x,{label:"Subscription",children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"})]}),a.jsxs(x,{label:"Integrations",disabled:!0,children:[a.jsx(s,{label:"Connect calendar"}),a.jsx(s,{label:"Slack integration"}),a.jsx(s,{label:"Email sync"})]})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitem",{name:"Region"});await n("Region submenu opens on hover",async()=>{await i.hover(o),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Region submenu closes on hover out",async()=>{await i.unhover(o),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).not.toBeInTheDocument()})}),await n("Integrations submenu is disabled",async()=>{const l=e.getByRole("menuitem",{name:"Integrations"});t(l).toHaveAttribute("aria-disabled","true"),await i.click(l),await r(()=>{t(e.queryByRole("menu",{name:"Integrations"})).not.toBeInTheDocument()})})}},w={render:function({align:n,side:o,...l}){return a.jsx(F,{...l,defaultOpen:!0,children:a.jsxs(x,{label:"Region",side:o,align:n,defaultOpen:!0,children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]})})},parameters:{containerHeight:"500px"},args:{side:"top",align:"start"}},xe={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end"}},Re={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},Se={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},Ce={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},De={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},Oe={render:w.render,tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},Te={render:w.render,tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},{Provider:ho,Step:T}=So();ho.displayName="Tour.Provider";T.displayName="Tour.Step";const Q={parameters:{docs:{source:{type:"dynamic"}}},decorators:[e=>{const[n,o]=b.useState(0),l=()=>o(n+1);return a.jsxs(a.Fragment,{children:[a.jsx(e,{},n),a.jsx("div",{style:{position:"fixed",left:0,bottom:0,margin:8},children:a.jsx(oe,{variant:"ghost",size:"small",onClick:l,children:"Reset story"})})]})}],render:function(){const[n,o]=b.useState(!1),[l,c]=b.useState(!1),[d,k]=b.useState(!1),g=fo=>{switch(fo){case 1:o(!0);return;case 3:c(!0);return;case 5:k(!0);return}},B=()=>{o(!1),c(!1),k(!1)};return a.jsx(ho,{totalSteps:6,onStepChange:g,onComplete:B,onClose:B,children:a.jsx(T,{step:0,title:"New settings menu",text:"All settings are now in one place.",children:a.jsxs(F,{open:n,onOpenChange:o,trigger:a.jsx(Ro,{svg:Bo,variant:"ghost",assistiveText:"Settings"}),children:[a.jsx(T,{step:1,title:"Transfer balance",text:"You can now transfer your balance to another tutor.",side:"right",children:a.jsx(s,{label:"Transfer balance"})}),a.jsx(s,{label:"Add extra hours"}),a.jsx(T,{step:2,title:"Region",text:"Region settings are grouped together.",side:"top",children:a.jsxs(x,{label:"Region",keepMounted:!0,open:l,onOpenChange:c,children:[a.jsx(s,{label:"Language"}),a.jsx(T,{step:3,title:"Time zone",text:"You can now select your time zone.",side:"right",children:a.jsx(s,{label:"Time zone"})})]})}),a.jsx(T,{step:4,title:"Currency",text:"Currency settings moved here.",side:"right",children:a.jsxs(A,{open:d,onOpenChange:k,defaultValue:"USD",label:"Currency",children:[a.jsx(h,{value:"USD",label:"US Dollar"}),a.jsx(h,{value:"EUR",label:"Euro"}),a.jsx(T,{step:5,title:"New currency!",text:"Pay and receive payments in british pounds.",children:a.jsx(h,{value:"GBP",label:"British Pound"})})]})})]})})})},play:async({canvas:e,step:n})=>{await n("Tour tooltip should be visible",async()=>{await r(()=>{t(e.getByRole("dialog",{name:"New settings menu"})).toBeVisible()})}),await n("Click Next to advance to second step",async()=>{await i.click(e.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Transfer balance"})).toBeVisible(),t(e.getByRole("menu")).toBeVisible()})}),await n("Click Next to advance to third step",async()=>{const o=ie(e.getByRole("dialog",{name:"Transfer balance"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fourth step",async()=>{const o=ie(e.getByRole("dialog",{name:"Region"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Time zone"})).toBeVisible(),t(e.getByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fifth step",async()=>{const o=ie(e.getByRole("dialog",{name:"Time zone"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Currency"})).toBeVisible()})}),await n("Click Next to advance to the last step",async()=>{const o=ie(e.getByRole("dialog",{name:"Currency"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"New currency!"})).toBeVisible(),t(e.getByRole("menu",{name:/Currency/})).toBeVisible()})}),await i.click(e.getByRole("button",{name:"Reset story"}))}},Ee=e=>{if(!e)return!1;const{top:n,left:o,bottom:l,right:c}=e.getBoundingClientRect();return!(n>=window.innerHeight||l<=0||o>=window.innerWidth||c<=0)},X={args:{keepMounted:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"}),a.jsxs(x,{label:"Region",keepMounted:!0,children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const o=await e.findByRole("menu",{name:"Settings",hidden:!0}),l=await e.findByRole("menu",{name:"Region",hidden:!0});await n("Menus are mounted, but not visible",async()=>{t(o).toBeInTheDocument(),t(o).not.toBeVisible(),t(l).toBeInTheDocument(),t(l).not.toBeVisible()}),await n("Open the menu",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(o).toBeVisible()})}),await n("Submenu is visible",async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(()=>{t(l).toBeVisible()})}),await n("Close the submenu.",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(l).not.toBeVisible()}),t(l).toBeInTheDocument()}),await n("Close the menu.",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(o).not.toBeVisible()}),t(o).toBeInTheDocument()})}},M={args:H.args,globals:{viewport:{value:"narrow-l",isRotated:!1}},parameters:{layout:"centered"},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Region"',async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(async()=>{t(Ee(e.queryByRole("menu",{name:"Settings"})),"Main menu should be hidden").toBe(!1),t(Ee(e.queryByRole("menu",{name:"Region"})),"Submenu should be visible").toBe(!0)})}),await n("Tap away to return to main menu",async()=>{const o=e.getByRole("menu",{name:"Region"}).closest("[data-base-ui-portal]").querySelector("[data-backdrop]");await i.click(o),await r(async()=>{t(Ee(e.queryByRole("menu",{name:"Region"})),"Submenu should be hidden").toBe(!1),t(Ee(e.queryByRole("menu",{name:"Settings"})),"Main menu should be visible").toBe(!0)})}),await n("Tap away to close menu",async()=>{await i.click(document.querySelector("[data-backdrop]")),await r(async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})})}},j={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0}),a.jsxs(x,{label:"Region",children:[a.jsx(s,{label:"Currency",onClick:u.items.currency}),a.jsx(s,{label:"Language",onClick:u.items.language}),a.jsx(s,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const o=e.getByRole("button",{name:"Settings"});await n("Focus on the trigger element",async()=>{o.focus()}),await n("Open the menu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Close the menu via Escape key. Trigger should be focused",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})}),await n("Open the menu via Space key. First item should be focused",async()=>{await i.keyboard(" "),await r(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Select the first item via Enter key. Menu should be closed and trigger should be focused",async()=>{await i.keyboard("{Enter}"),t(u.items.transferBalance).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})}),await n("Open the menu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Navigate through the menu using Arrow keys",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()}),await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()}),await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()}),await i.keyboard("{ArrowUp}"),await i.keyboard("{ArrowUp}"),await r(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()})}),await n("Enter key does nothing for disabled item",async()=>{await i.keyboard("{Enter}"),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Space key does nothing for disabled item",async()=>{await i.keyboard(" "),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Navigate to submenu trigger using Arrow down key",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open the submenu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Arrow left key. Submenu trigger should be focused",async()=>{await i.keyboard("{ArrowLeft}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Arrow right key. First item should be focused",async()=>{await i.keyboard("{ArrowRight}"),await r(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Escape key. Submenu trigger should be focused",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Close the menu via Tab key. Trigger should be focused",async()=>{await i.keyboard("{Tab}"),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})})}},He={...j,globals:M.globals,parameters:M.parameters,tags:["!autodocs"]},Z={args:{defaultOpen:!0,children:a.jsx(a.Fragment,{children:Array.from({length:100}).map((e,n)=>a.jsx(s,{label:`Item ${n+1}`},n))})}},p=Array.from({length:5}).map(()=>"I won't use long labels for menu items.").join(" "),ee={args:{defaultOpen:!0,children:a.jsxs(f,{label:p,children:[a.jsx(s,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p}),a.jsx(x,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,children:a.jsx(s,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p})}),a.jsx(A,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,defaultValue:"1",children:a.jsx(h,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,value:"1"})}),a.jsx(V,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p}),a.jsx(ne,{defaultValue:"1",children:a.jsx(L,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,value:"1"})})]})}},ae={args:H.args,render:function(n){const[o,l]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(oe,{onClick:()=>l(!0),children:"Open dialog"}),a.jsx(Fe,{open:o,onClose:()=>l(!1),title:"Dialog",description:void 0,children:a.jsx(F,{...n})})]})},play:async({canvas:e,step:n})=>{await n("Open dialog",async()=>{await i.click(e.getByRole("button",{name:"Open dialog"})),await r(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Open dropdown with mouse",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible()})}),await n("Open Region submenu with mouse",async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click on Currency item",async()=>{await i.click(e.getByRole("menuitem",{name:"Currency"})),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Open dropdown with keyboard",async()=>{e.getByRole("button",{name:"Settings"}).focus(),await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open Region submenu with keyboard",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate to Language item with keyboard",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Language"})).toHaveFocus()})}),await n("Select Language item with keyboard",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Close dialog",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(e.queryByRole("dialog",{name:"Dialog"})).not.toBeInTheDocument()})})}},q={render:function(n){const[o,l]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(F,{...n,children:a.jsx(s,{label:"Open dialog",onClick:()=>l(!0)})}),a.jsx(Fe,{title:"Dialog",description:void 0,open:o,onClose:()=>l(!1),children:"Dialog content"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.getByRole("menu")).toBeVisible()})}),await n("Open dialog",async()=>{await i.click(e.getByRole("menuitem",{name:"Open dialog"})),await r(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Close dialog",async()=>{await i.keyboard("{Escape}")})}},Co=()=>{const[e,n]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Open dialog",onClick:()=>n(!0)}),a.jsx(Fe,{title:"Dialog",description:void 0,open:e,onClose:()=>n(!1),children:"Dialog content"})]})},te={args:{keepMounted:!0,children:a.jsx(Co,{})},play:q.play};var qe,Ve,Le;re.parameters={...re.parameters,docs:{...(qe=re.parameters)==null?void 0:qe.docs,source:{originalSource:`{
+import{j as a,r as b}from"./iframe-CpMEswOF.js";import{D as h,a as A,b as V,c as L,d as ne,e as x,f,g as s,h as F}from"./DropdownMenu-N9_otewg.js";import{B as oe}from"./Button-KCBOR544.js";import{I as v}from"./Icon-BX3I9JNh.js";import{F as ko,a as Bo}from"./TokyoUISettings-BlCV0s5R.js";import{F as vo}from"./TokyoUIMessages-B0IlDk1q.js";import{C as Ie}from"./CountryFlag-CSGb4nau.js";import{A as je}from"./Avatar-DooDODLU.js";import{F as O}from"./TokyoUIEmojiFrowning-D-sR3DAq.js";import{D as Fe}from"./index-9rU-ZrVj.js";import{D as xo}from"./Divider-CPpmQZmq.js";import{I as Ro}from"./IconButton-DVKNd7ZK.js";import{c as So}from"./OnboardingTour-Dsl4caiq.js";import"./preload-helper-Dp1pzeXC.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-hc9KR2nX.js";import"./TokyoUIChevronRight-DQBrjC0F.js";import"./TokyoUICheck-DfGyg7qp.js";import"./breakpoints-BfMlrtxE.js";import"./useOpenInteractionType-BBP_TXgz.js";import"./VisuallyHidden-lSSiGvdb.js";import"./index-DT-MbRPK.js";import"./useControllableState-ouxkeS_b.js";import"./useStableCallback-DHq1eG2Q.js";import"./message-CTdBLxyt.js";import"./render-icon-c7okze1K.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useMergeRefs-DkQLsYW4.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";import"./text-accent-DZ_ihUdH.js";import"./constants-5om8Ptru.js";import"./Steps-GOg1wsKY.js";import"./Heading-Bie8QWaf.js";import"./text-centered-DiwR-QSx.js";import"./ProgressSteps-Dq6mpMpu.js";import"./Text-cq49jjad.js";import"./DialogTitle-DJPc1ITB.js";import"./TokyoUIClose-C1pVTvLz.js";import"./shared-strings-BChji30Y.js";import"./DialogActions-DTUDyqFX.js";import"./Dialog-Bmg2gpCM.js";import"./OnboardingTooltip-CsTure6K.js";import"./index-dUCHvwfu.js";const{fn:m,expect:t,userEvent:i,waitFor:r,within:ie}=__STORYBOOK_MODULE_TEST__,u={onOpenChange:m(),items:{transferBalance:m(),addExtraHours:m(),currency:m(),language:m()}},hi={title:"Components/DropdownMenu",component:F,subcomponents:{DropdownMenuItem:s,DropdownMenuGroup:f,DropdownSubmenu:x,DropdownMenuRadioGroup:ne,DropdownMenuRadioItem:L,DropdownMenuCheckboxItem:V,DropdownMenuSelect:A,DropdownMenuSelectOption:h},parameters:{preventIframeFromScrollingParent:!0,layout:"fullscreen",docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[(e,n)=>a.jsx("div",{style:{height:n.parameters.containerHeight||"100%",padding:24,display:"flex",justifyContent:"center",alignItems:"center"},children:a.jsx(e,{})})],args:{onOpenChange:u.onOpenChange,trigger:a.jsx(oe,{children:"Settings"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours})]})}},re={tags:["!autodocs","!dev"],args:{defaultOpen:!0}},R=t.anything(),W={play:async({canvas:e,step:n,args:o})=>{await n("Initially closed",async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!0,R)}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)}),await n("Open dropdown again",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Transfer balance"',async()=>{await i.click(e.getByRole("menuitem",{name:"Transfer balance"})),t(u.items.transferBalance).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}},se={tags:["!autodocs"],args:{defaultOpen:!0},play:async({canvas:e,step:n})=>{await n("Initially open",async()=>{await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(u.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}};let Me;const E={decorators:[(e,n)=>{const[o,l]=b.useState(!!n.args.open);Me=l;const c=(d,k)=>{var g,B;l(d),(B=(g=n.args).onOpenChange)==null||B.call(g,d,k)};return a.jsx(e,{args:{...n.args,open:o,onOpenChange:c}})}],args:{open:!1},play:async({canvas:e,step:n,args:o})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!0,R)}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)}),await n("Open dropdown via open prop",async()=>{u.onOpenChange.mockClear(),Me(!0),await r(()=>{t(e.queryByRole("menu")).toBeVisible()}),t(o.onOpenChange).not.toHaveBeenCalled()}),await n("Close dropdown via open prop",async()=>{u.onOpenChange.mockClear(),Me(!1),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).not.toHaveBeenCalled()})}},le={...E,tags:["!autodocs"],args:{...E.args,open:!0},play:async({canvas:e,step:n,args:o})=>{await n("Initially open",async()=>{await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Click outside to close the menu",async()=>{await i.click(document.body),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()}),t(o.onOpenChange).toHaveBeenLastCalledWith(!1,R)})}},U={parameters:{containerHeight:"500px"},args:{side:"top",align:"start",defaultOpen:!0}},ce={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end",defaultOpen:!0}},ue={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},de={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},me={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},pe={parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},ge={tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},ye={tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},z={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Add extra hours"',async()=>{u.onOpenChange.mockClear();const o=e.getByRole("menuitem",{name:"Add extra hours"});t(o).toHaveAttribute("aria-disabled","true"),await i.click(o),t(u.items.addExtraHours).not.toHaveBeenCalled(),t(u.onOpenChange).not.toHaveBeenCalled(),t(e.queryByRole("menu")).toBeVisible()})}},P={args:{trigger:a.jsx(oe,{children:"Language"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Español",description:"Spanish"}),a.jsx(s,{label:"Українська",description:"Ukrainian"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Language"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Verify items a11y names and descriptions",async()=>{const o=e.getByRole("menuitem",{name:"Español"});t(o).toHaveAccessibleName("Español"),t(o).toHaveAccessibleDescription("Spanish");const l=e.getByRole("menuitem",{name:"Українська"});t(l).toHaveAccessibleName("Українська"),t(l).toHaveAccessibleDescription("Ukrainian")})}},G={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(f,{label:"Region",children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]}),a.jsxs(f,{label:"Subscription",children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"})]})]})}},K={args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"User profile"}),a.jsx(s,{label:"Payments & subscriptions"}),a.jsx(xo,{}),a.jsx(s,{label:"Logout"})]})}},Y={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:a.jsxs(a.Fragment,{children:[a.jsxs(f,{label:"Icons",children:[a.jsx(s,{leadingElement:a.jsx(v,{svg:ko,size:"24"}),label:"Reschedule"}),a.jsx(s,{leadingElement:a.jsx(v,{svg:vo,size:"24"}),label:"Message tutor"})]}),a.jsxs(f,{label:"Flags",children:[a.jsx(s,{leadingElement:a.jsx(Ie,{code:"es",alt:"",size:"medium"}),label:"Spain"}),a.jsx(s,{leadingElement:a.jsx(Ie,{code:"ua",alt:"",size:"medium"}),label:"Ukraine"})]}),a.jsxs(f,{label:"Avatars",children:[a.jsx(s,{leadingElement:a.jsx(je,{size:"24"}),label:"Kobe B."}),a.jsx(s,{leadingElement:a.jsx(je,{size:"24"}),label:"Jenny R."})]})]})}},Ae=b.forwardRef(function({to:n,...o},l){return a.jsx("a",{href:n,...o,ref:l})});Ae.displayName="Link";const S={findATutor:m(e=>{e.preventDefault()}),becomeATutor:m(e=>{e.preventDefault()}),myLessons:m(e=>{e.preventDefault()}),referAFriend:m(e=>{e.preventDefault()})},_={args:{trigger:a.jsx(oe,{children:"Links"}),children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Find a Tutor",onClick:S.findATutor,as:a.jsx("a",{href:"/en/online/english-tutors"})}),a.jsx(s,{label:"Become a Tutor",onClick:S.becomeATutor,as:a.jsx("a",{href:"/en/teach"}),disabled:!0}),a.jsx(s,{label:"My Lessons",onClick:S.myLessons,as:a.jsx(Ae,{to:"/en/lessons"})}),a.jsx(s,{label:"Refer a Friend",onClick:S.referAFriend,as:a.jsx(Ae,{to:"/en/referral"}),disabled:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Assert links are rendered correctly",async()=>{const o=e.getByRole("menuitem",{name:"Find a Tutor"});t(o.tagName).toBe("A"),t(o).toHaveAttribute("href","/en/online/english-tutors");const l=e.getByRole("menuitem",{name:"Become a Tutor"});t(l.tagName).toBe("A"),t(l).toHaveAttribute("href","/en/teach"),t(l).toHaveAttribute("aria-disabled","true");const c=e.getByRole("menuitem",{name:"My Lessons"});t(c.tagName).toBe("A"),t(c).toHaveAttribute("href","/en/lessons");const d=e.getByRole("menuitem",{name:"Refer a Friend"});t(d.tagName).toBe("A"),t(d).toHaveAttribute("href","/en/referral"),t(d).toHaveAttribute("aria-disabled","true")}),await n('Click on "Find a Tutor"',async()=>{const o=e.getByRole("menuitem",{name:"Find a Tutor"});await i.click(o),t(S.findATutor).toHaveBeenCalled()}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Become a Tutor"',async()=>{const o=e.getByRole("menuitem",{name:"Become a Tutor"});await i.click(o),t(S.becomeATutor).not.toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "My Lessons"',async()=>{const o=e.getByRole("menuitem",{name:"My Lessons"});await i.click(o),t(S.myLessons).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Links"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Refer a Friend"',async()=>{const o=e.getByRole("menuitem",{name:"Refer a Friend"});await i.click(o),t(S.referAFriend).not.toHaveBeenCalled()})}},C={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},$={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(f,{label:"Day of the week",children:a.jsx(ne,{defaultValue:"mon",onValueChange:C.dayOfTheWeek,items:[{label:"Monday",value:"mon"},{label:"Tuesday",value:"tue"},{label:"Wednesday",value:"wed"},{label:"Thursday",value:"thu"},{label:"Friday",value:"fri"},{label:"Saturday",value:"sat",disabled:!0},{label:"Sunday",value:"sun",disabled:!0}]})}),a.jsx(f,{label:"Time of the day",children:a.jsxs(ne,{onValueChange:C.timeOfTheDay,children:[a.jsx(L,{label:"Morning",value:"morning"}),a.jsx(L,{label:"Afternoon",value:"afternoon"})]})}),a.jsx(f,{label:"Frequency",children:a.jsxs(ne,{value:"once",onValueChange:C.frequency,disabled:!0,children:[a.jsx(L,{label:"Once",value:"once"}),a.jsx(L,{label:"Weekly",value:"weekly"})]})})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitemradio",{name:"Monday"}),l=e.getByRole("menuitemradio",{name:"Tuesday"}),c=e.getByRole("menuitemradio",{name:"Saturday"});await n("Day of the week: default value is selected",async()=>{t(o).toHaveAttribute("aria-checked","true")}),await n('Click on "Tuesday"',async()=>{await i.click(l),t(C.dayOfTheWeek).toHaveBeenCalledWith("tue"),await r(()=>{t(o).toHaveAttribute("aria-checked","false"),t(l).toHaveAttribute("aria-checked","true")})}),await n('Click on "Saturday"',async()=>{C.dayOfTheWeek.mockClear(),await i.click(c),t(C.dayOfTheWeek).not.toHaveBeenCalled(),await r(()=>{t(l).toHaveAttribute("aria-checked","true")})});const d=e.getByRole("menuitemradio",{name:"Morning"}),k=e.getByRole("menuitemradio",{name:"Afternoon"});await n("Time of the day: none is selected",async()=>{t(d).toHaveAttribute("aria-checked","false"),t(k).toHaveAttribute("aria-checked","false")}),await n('Click on "Morning"',async()=>{await i.click(d),t(C.timeOfTheDay).toHaveBeenCalledWith("morning"),await r(()=>{t(d).toHaveAttribute("aria-checked","true")})});const g=e.getByRole("menuitemradio",{name:"Once"}),B=e.getByRole("menuitemradio",{name:"Weekly"});await n("Frequency: everything is disabled, once is selected",async()=>{t(g).toHaveAttribute("aria-disabled","true"),t(B).toHaveAttribute("aria-disabled","true"),t(g).toHaveAttribute("aria-checked","true"),t(B).toHaveAttribute("aria-checked","false")}),await n('Click on "Weekly"',async()=>{await i.click(B),t(C.frequency).not.toHaveBeenCalled(),await r(()=>{t(g).toHaveAttribute("aria-checked","true")})})}},D={email:m(),sms:m(),push:m(),alerts:m()},J={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(V,{label:"Email notifications",onCheckedChange:D.email,defaultChecked:!0}),a.jsx(V,{label:"SMS notifications",onCheckedChange:D.sms}),a.jsx(V,{label:"Push notifications",onCheckedChange:D.push,disabled:!0}),a.jsx(V,{label:"System alerts (required)",onCheckedChange:D.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitemcheckbox",{name:"Email notifications"}),l=e.getByRole("menuitemcheckbox",{name:"SMS notifications"}),c=e.getByRole("menuitemcheckbox",{name:"Push notifications"}),d=e.getByRole("menuitemcheckbox",{name:"System alerts (required)"});await n("Email notifications is checked by default",async()=>{t(o).toHaveAttribute("aria-checked","true")}),await n('Uncheck "Email notifications"',async()=>{await i.click(o),t(D.email).toHaveBeenCalledWith(!1,R),await r(()=>{t(o).toHaveAttribute("aria-checked","false")})}),await n('"SMS notifications" is not checked',async()=>{t(l).toHaveAttribute("aria-checked","false")}),await n('Check "SMS notifications"',async()=>{await i.click(l),t(D.sms).toHaveBeenCalledWith(!0,R),await r(()=>{t(l).toHaveAttribute("aria-checked","true")})}),await n('"Push notifications" is disabled and not checked',async()=>{t(c).toHaveAttribute("aria-disabled","true"),t(c).toHaveAttribute("aria-checked","false")}),await n('Click on "Push notifications"',async()=>{await i.click(c),t(D.push).not.toHaveBeenCalled(),await r(()=>{t(c).toHaveAttribute("aria-checked","false")})}),await n('"System alerts (required)" is disabled and checked',async()=>{t(d).toHaveAttribute("aria-disabled","true"),t(d).toHaveAttribute("aria-checked","true")}),await n('Click on "System alerts (required)"',async()=>{await i.click(d),t(D.alerts).not.toHaveBeenCalled(),await r(()=>{t(d).toHaveAttribute("aria-checked","true")})})}},N={dayOfTheWeek:m(),timeOfTheDay:m(),frequency:m()},I=e=>{const[n,o]=b.useState("mon"),[l,c]=b.useState(),d=g=>{o(g),N.dayOfTheWeek(g)},k=g=>{c(g),N.timeOfTheDay(g)};return a.jsxs(F,{...e,children:[a.jsx(A,{label:"Day of the week",value:n,onValueChange:d,items:[{label:"Monday",value:"mon"},{label:"Tuesday",value:"tue"},{label:"Wednesday",value:"wed"},{label:"Thursday",value:"thu"},{label:"Friday",value:"fri"},{label:"Saturday",value:"sat",disabled:!0},{label:"Sunday",value:"sun",disabled:!0}]}),a.jsxs(A,{label:"Time of the day",defaultValue:l,onValueChange:k,children:[a.jsx(h,{value:"morning",label:"Morning"}),a.jsx(h,{value:"afternoon",label:"Afternoon"})]}),a.jsxs(A,{label:"Frequency",onValueChange:N.frequency,disabled:!0,children:[a.jsx(h,{label:"Once",value:"once"}),a.jsx(h,{label:"Weekly",value:"weekly"})]})]})};I.play=async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitem",{name:/^Day of the week/});await n("Day of the week: default value is selected",async()=>{t(o).toHaveAccessibleName(/Selected: Monday$/)}),await n("Open day of the week submenu",async()=>{await i.hover(o),await r(()=>{t(e.queryByRole("menu",{name:/^Day of the week/})).toBeVisible()})}),await n('Click on "Tuesday"',async()=>{await i.click(e.getByRole("menuitemradio",{name:"Tuesday"})),t(N.dayOfTheWeek).toHaveBeenCalledWith("tue"),await r(()=>{t(e.queryByRole("menu",{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),t(o).toHaveAccessibleName(/Selected: Tuesday$/)})});const l=e.getByRole("menuitem",{name:/^Time of the day/});await n("Time of the day: nothing is selected",async()=>{t(l).toHaveAccessibleName("Time of the day")}),await n("Open time of the day submenu",async()=>{l.focus(),await i.keyboard(" "),await r(()=>{t(e.queryByRole("menu",{name:/^Time of the day/})).toBeVisible()})}),await n('Click on "Morning"',async()=>{await i.click(e.getByRole("menuitemradio",{name:"Morning"})),t(N.timeOfTheDay).toHaveBeenCalledWith("morning"),await r(()=>{t(e.queryByRole("menu",{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),t(l).toHaveAccessibleName(/Selected: Morning$/)})}),await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n("Frequency is disabled",async()=>{const c=e.getByRole("menuitem",{name:"Frequency"});t(c).toHaveAttribute("aria-disabled","true"),await i.click(c,{pointerEventsCheck:0}),t(N.frequency).not.toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu",{name:"Frequency",hidden:!0})).not.toBeVisible()})})};const y={render:function({align:n,side:o,...l}){return a.jsx(F,{...l,defaultOpen:!0,children:a.jsxs(A,{label:"Time of the day",side:o,align:n,defaultOpen:!0,children:[a.jsx(h,{value:"morning",label:"Morning"}),a.jsx(h,{value:"afternoon",label:"Afternoon"})]})})},parameters:{containerHeight:"500px"},args:{side:"top",align:"start"}},we={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end"}},be={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},he={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},fe={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},ke={render:y.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},Be={render:y.render,tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},ve={render:y.render,tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},H={args:{children:a.jsxs(a.Fragment,{children:[a.jsxs(x,{label:"Region",children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]}),a.jsxs(x,{label:"Subscription",children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"})]}),a.jsxs(x,{label:"Integrations",disabled:!0,children:[a.jsx(s,{label:"Connect calendar"}),a.jsx(s,{label:"Slack integration"}),a.jsx(s,{label:"Email sync"})]})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})});const o=e.getByRole("menuitem",{name:"Region"});await n("Region submenu opens on hover",async()=>{await i.hover(o),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Region submenu closes on hover out",async()=>{await i.unhover(o),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).not.toBeInTheDocument()})}),await n("Integrations submenu is disabled",async()=>{const l=e.getByRole("menuitem",{name:"Integrations"});t(l).toHaveAttribute("aria-disabled","true"),await i.click(l),await r(()=>{t(e.queryByRole("menu",{name:"Integrations"})).not.toBeInTheDocument()})})}},w={render:function({align:n,side:o,...l}){return a.jsx(F,{...l,defaultOpen:!0,children:a.jsxs(x,{label:"Region",side:o,align:n,defaultOpen:!0,children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]})})},parameters:{containerHeight:"500px"},args:{side:"top",align:"start"}},xe={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-end"}},Re={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"inline-start",defaultOpen:!0}},Se={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"left",defaultOpen:!0}},Ce={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"right",defaultOpen:!0}},De={render:w.render,parameters:{containerHeight:"500px"},tags:["!autodocs"],args:{side:"top",defaultOpen:!0}},Oe={render:w.render,tags:["!autodocs"],args:{align:"start",defaultOpen:!0}},Te={render:w.render,tags:["!autodocs"],args:{align:"end",defaultOpen:!0}},{Provider:ho,Step:T}=So();ho.displayName="Tour.Provider";T.displayName="Tour.Step";const Q={parameters:{docs:{source:{type:"dynamic"}}},decorators:[e=>{const[n,o]=b.useState(0),l=()=>o(n+1);return a.jsxs(a.Fragment,{children:[a.jsx(e,{},n),a.jsx("div",{style:{position:"fixed",left:0,bottom:0,margin:8},children:a.jsx(oe,{variant:"ghost",size:"small",onClick:l,children:"Reset story"})})]})}],render:function(){const[n,o]=b.useState(!1),[l,c]=b.useState(!1),[d,k]=b.useState(!1),g=fo=>{switch(fo){case 1:o(!0);return;case 3:c(!0);return;case 5:k(!0);return}},B=()=>{o(!1),c(!1),k(!1)};return a.jsx(ho,{totalSteps:6,onStepChange:g,onComplete:B,onClose:B,children:a.jsx(T,{step:0,title:"New settings menu",text:"All settings are now in one place.",children:a.jsxs(F,{open:n,onOpenChange:o,trigger:a.jsx(Ro,{svg:Bo,variant:"ghost",assistiveText:"Settings"}),children:[a.jsx(T,{step:1,title:"Transfer balance",text:"You can now transfer your balance to another tutor.",side:"right",children:a.jsx(s,{label:"Transfer balance"})}),a.jsx(s,{label:"Add extra hours"}),a.jsx(T,{step:2,title:"Region",text:"Region settings are grouped together.",side:"top",children:a.jsxs(x,{label:"Region",keepMounted:!0,open:l,onOpenChange:c,children:[a.jsx(s,{label:"Language"}),a.jsx(T,{step:3,title:"Time zone",text:"You can now select your time zone.",side:"right",children:a.jsx(s,{label:"Time zone"})})]})}),a.jsx(T,{step:4,title:"Currency",text:"Currency settings moved here.",side:"right",children:a.jsxs(A,{open:d,onOpenChange:k,defaultValue:"USD",label:"Currency",children:[a.jsx(h,{value:"USD",label:"US Dollar"}),a.jsx(h,{value:"EUR",label:"Euro"}),a.jsx(T,{step:5,title:"New currency!",text:"Pay and receive payments in british pounds.",children:a.jsx(h,{value:"GBP",label:"British Pound"})})]})})]})})})},play:async({canvas:e,step:n})=>{await n("Tour tooltip should be visible",async()=>{await r(()=>{t(e.getByRole("dialog",{name:"New settings menu"})).toBeVisible()})}),await n("Click Next to advance to second step",async()=>{await i.click(e.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Transfer balance"})).toBeVisible(),t(e.getByRole("menu")).toBeVisible()})}),await n("Click Next to advance to third step",async()=>{const o=ie(e.getByRole("dialog",{name:"Transfer balance"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fourth step",async()=>{const o=ie(e.getByRole("dialog",{name:"Region"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Time zone"})).toBeVisible(),t(e.getByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click Next to advance to fifth step",async()=>{const o=ie(e.getByRole("dialog",{name:"Time zone"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"Currency"})).toBeVisible()})}),await n("Click Next to advance to the last step",async()=>{const o=ie(e.getByRole("dialog",{name:"Currency"}));await i.click(o.getByRole("button",{name:"Next"})),await r(()=>{t(e.getByRole("dialog",{name:"New currency!"})).toBeVisible(),t(e.getByRole("menu",{name:/Currency/})).toBeVisible()})}),await i.click(e.getByRole("button",{name:"Reset story"}))}},Ee=e=>{if(!e)return!1;const{top:n,left:o,bottom:l,right:c}=e.getBoundingClientRect();return!(n>=window.innerHeight||l<=0||o>=window.innerWidth||c<=0)},X={args:{keepMounted:!0,children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance"}),a.jsx(s,{label:"Add extra hours"}),a.jsxs(x,{label:"Region",keepMounted:!0,children:[a.jsx(s,{label:"Currency"}),a.jsx(s,{label:"Language"}),a.jsx(s,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const o=await e.findByRole("menu",{name:"Settings",hidden:!0}),l=await e.findByRole("menu",{name:"Region",hidden:!0});await n("Menus are mounted, but not visible",async()=>{t(o).toBeInTheDocument(),t(o).not.toBeVisible(),t(l).toBeInTheDocument(),t(l).not.toBeVisible()}),await n("Open the menu",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(o).toBeVisible()})}),await n("Submenu is visible",async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(()=>{t(l).toBeVisible()})}),await n("Close the submenu.",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(l).not.toBeVisible()}),t(l).toBeInTheDocument()}),await n("Close the menu.",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(o).not.toBeVisible()}),t(o).toBeInTheDocument()})}},M={args:H.args,globals:{viewport:{value:"narrow-l",isRotated:!1}},parameters:{layout:"centered"},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu")).toBeVisible()})}),await n('Click on "Region"',async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(async()=>{t(Ee(e.queryByRole("menu",{name:"Settings"})),"Main menu should be hidden").toBe(!1),t(Ee(e.queryByRole("menu",{name:"Region"})),"Submenu should be visible").toBe(!0)})}),await n("Tap away to return to main menu",async()=>{const o=e.getByRole("menu",{name:"Region"}).closest("[data-base-ui-portal]").querySelector("[data-backdrop]");await i.click(o),await r(async()=>{t(Ee(e.queryByRole("menu",{name:"Region"})),"Submenu should be hidden").toBe(!1),t(Ee(e.queryByRole("menu",{name:"Settings"})),"Main menu should be visible").toBe(!0)})}),await n("Tap away to close menu",async()=>{await i.click(document.querySelector("[data-backdrop]")),await r(async()=>{t(e.queryByRole("menu")).not.toBeInTheDocument()})})}},j={args:{children:a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Transfer balance",onClick:u.items.transferBalance}),a.jsx(s,{label:"Add extra hours",onClick:u.items.addExtraHours,disabled:!0}),a.jsxs(x,{label:"Region",children:[a.jsx(s,{label:"Currency",onClick:u.items.currency}),a.jsx(s,{label:"Language",onClick:u.items.language}),a.jsx(s,{label:"Time zone"})]})]})},play:async({canvas:e,step:n})=>{const o=e.getByRole("button",{name:"Settings"});await n("Focus on the trigger element",async()=>{o.focus()}),await n("Open the menu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Close the menu via Escape key. Trigger should be focused",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})}),await n("Open the menu via Space key. First item should be focused",async()=>{await i.keyboard(" "),await r(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Select the first item via Enter key. Menu should be closed and trigger should be focused",async()=>{await i.keyboard("{Enter}"),t(u.items.transferBalance).toHaveBeenCalled(),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})}),await n("Open the menu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu")).toBeVisible(),t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()})}),await n("Navigate through the menu using Arrow keys",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()}),await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()}),await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Transfer balance"})).toHaveFocus()}),await i.keyboard("{ArrowUp}"),await i.keyboard("{ArrowUp}"),await r(()=>{t(e.getByRole("menuitem",{name:"Add extra hours"})).toHaveFocus()})}),await n("Enter key does nothing for disabled item",async()=>{await i.keyboard("{Enter}"),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Space key does nothing for disabled item",async()=>{await i.keyboard(" "),t(u.items.addExtraHours).not.toHaveBeenCalled()}),await n("Navigate to submenu trigger using Arrow down key",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open the submenu via Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Arrow left key. Submenu trigger should be focused",async()=>{await i.keyboard("{ArrowLeft}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Arrow right key. First item should be focused",async()=>{await i.keyboard("{ArrowRight}"),await r(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate back to main menu using Escape key. Submenu trigger should be focused",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open submenu using Enter key. First item should be focused",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Close the menu via Tab key. Trigger should be focused",async()=>{await i.keyboard("{Tab}"),await r(()=>{t(e.queryByRole("menu")).not.toBeInTheDocument(),t(o).toHaveFocus()})})}},He={...j,globals:M.globals,parameters:M.parameters,tags:["!autodocs"]},Z={args:{defaultOpen:!0,children:a.jsx(a.Fragment,{children:Array.from({length:100}).map((e,n)=>a.jsx(s,{label:`Item ${n+1}`},n))})}},p=Array.from({length:5}).map(()=>"I won't use long labels for menu items.").join(" "),ee={args:{defaultOpen:!0,children:a.jsxs(f,{label:p,children:[a.jsx(s,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p}),a.jsx(x,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,children:a.jsx(s,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p})}),a.jsx(A,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,defaultValue:"1",children:a.jsx(h,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,value:"1"})}),a.jsx(V,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p}),a.jsx(ne,{defaultValue:"1",children:a.jsx(L,{leadingElement:a.jsx(v,{size:"24",svg:O}),label:p,description:p,value:"1"})})]})}},ae={args:H.args,render:function(n){const[o,l]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(oe,{onClick:()=>l(!0),children:"Open dialog"}),a.jsx(Fe,{open:o,onClose:()=>l(!1),title:"Dialog",description:void 0,children:a.jsx(F,{...n})})]})},play:async({canvas:e,step:n})=>{await n("Open dialog",async()=>{await i.click(e.getByRole("button",{name:"Open dialog"})),await r(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Open dropdown with mouse",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible()})}),await n("Open Region submenu with mouse",async()=>{await i.click(e.getByRole("menuitem",{name:"Region"})),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible()})}),await n("Click on Currency item",async()=>{await i.click(e.getByRole("menuitem",{name:"Currency"})),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Open dropdown with keyboard",async()=>{e.getByRole("button",{name:"Settings"}).focus(),await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Region"})).toHaveFocus()})}),await n("Open Region submenu with keyboard",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Region"})).toBeVisible(),t(e.getByRole("menuitem",{name:"Currency"})).toHaveFocus()})}),await n("Navigate to Language item with keyboard",async()=>{await i.keyboard("{ArrowDown}"),await r(()=>{t(e.getByRole("menuitem",{name:"Language"})).toHaveFocus()})}),await n("Select Language item with keyboard",async()=>{await i.keyboard("{Enter}"),await r(()=>{t(e.queryByRole("menu",{name:"Settings"})).not.toBeInTheDocument()})}),await n("Close dialog",async()=>{await i.keyboard("{Escape}"),await r(()=>{t(e.queryByRole("dialog",{name:"Dialog"})).not.toBeInTheDocument()})})}},q={render:function(n){const[o,l]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(F,{...n,children:a.jsx(s,{label:"Open dialog",onClick:()=>l(!0)})}),a.jsx(Fe,{title:"Dialog",description:void 0,open:o,onClose:()=>l(!1),children:"Dialog content"})]})},play:async({canvas:e,step:n})=>{await n("Open dropdown",async()=>{await i.click(e.getByRole("button",{name:"Settings"})),await r(()=>{t(e.getByRole("menu")).toBeVisible()})}),await n("Open dialog",async()=>{await i.click(e.getByRole("menuitem",{name:"Open dialog"})),await r(()=>{t(e.getByRole("dialog",{name:"Dialog"})).toBeVisible()})}),await n("Close dialog",async()=>{await i.keyboard("{Escape}")})}},Co=()=>{const[e,n]=b.useState(!1);return a.jsxs(a.Fragment,{children:[a.jsx(s,{label:"Open dialog",onClick:()=>n(!0)}),a.jsx(Fe,{title:"Dialog",description:void 0,open:e,onClose:()=>n(!1),children:"Dialog content"})]})},te={args:{keepMounted:!0,children:a.jsx(Co,{})},play:q.play};var qe,Ve,Le;re.parameters={...re.parameters,docs:{...(qe=re.parameters)==null?void 0:qe.docs,source:{originalSource:`{
   tags: ['!autodocs', '!dev'],
   args: {
     defaultOpen: true

package/dist/assets/{FieldButton-D-3o-lMh.js → FieldButton-CCXniKhy.js}

@@ -1 +1 @@
-import{r as f,u as v,g as y,j as n}from"./iframe-C8q8wjEm.js";import{f as g}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{w as a}from"./componentNames-Dts5uwdK.js";const B="FieldButton__ZIYKf",b={FieldButton:B},l=f.forwardRef(function({svg:u,assistiveText:o,onClick:e,dataset:r,...i},d){const m=v(b,a.FieldButton),c=t=>{t.stopPropagation(),e==null||e(t)},p={...g(i),...y(r,{preplyDsComponent:a.FieldButton}),className:m.join(" "),title:o,onClick:c,ref:d};return n.jsx("button",{...p,type:"button",children:n.jsx(u,{"aria-hidden":"true",focusable:"false"})})});try{l.displayName="FieldButton",l.__docgenInfo={description:"",displayName:"FieldButton",props:{svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"MouseEventHandler"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{l as F};
+import{r as f,u as v,g as y,j as n}from"./iframe-CpMEswOF.js";import{f as g}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{w as a}from"./componentNames-hc9KR2nX.js";const B="FieldButton__ZIYKf",b={FieldButton:B},l=f.forwardRef(function({svg:u,assistiveText:o,onClick:e,dataset:r,...i},d){const m=v(b,a.FieldButton),c=t=>{t.stopPropagation(),e==null||e(t)},p={...g(i),...y(r,{preplyDsComponent:a.FieldButton}),className:m.join(" "),title:o,onClick:c,ref:d};return n.jsx("button",{...p,type:"button",children:n.jsx(u,{"aria-hidden":"true",focusable:"false"})})});try{l.displayName="FieldButton",l.__docgenInfo={description:"",displayName:"FieldButton",props:{svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!0,type:{name:"string"}},onClick:{defaultValue:null,description:"",name:"onClick",required:!0,type:{name:"MouseEventHandler"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLButtonElement | null) => void"},{value:"RefObject<HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{l as F};

package/dist/assets/{FieldButton.stories-Cc6AvbxX.js → FieldButton.stories-CJM_6H-S.js}

@@ -1 +1 @@
-import{j as i}from"./iframe-C8q8wjEm.js";import{F as m}from"./TokyoUILibraryExplore-DpTmvI5A.js";import{F as r}from"./FieldButton-D-3o-lMh.js";import"./preload-helper-Dp1pzeXC.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-Dts5uwdK.js";const l={title:"components/FieldButton",component:r},o=()=>i.jsx(r,{svg:m,assistiveText:"Lorem Ipsum",onClick:()=>{}});o.storyName="FieldButton";var e,t,s;o.parameters={...o.parameters,docs:{...(e=o.parameters)==null?void 0:e.docs,source:{originalSource:'() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />',...(s=(t=o.parameters)==null?void 0:t.docs)==null?void 0:s.source}}};const x=["Base"];export{o as Base,x as __namedExportsOrder,l as default};
+import{j as i}from"./iframe-CpMEswOF.js";import{F as m}from"./TokyoUILibraryExplore-D3Zqdc29.js";import{F as r}from"./FieldButton-CCXniKhy.js";import"./preload-helper-Dp1pzeXC.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-hc9KR2nX.js";const l={title:"components/FieldButton",component:r},o=()=>i.jsx(r,{svg:m,assistiveText:"Lorem Ipsum",onClick:()=>{}});o.storyName="FieldButton";var e,t,s;o.parameters={...o.parameters,docs:{...(e=o.parameters)==null?void 0:e.docs,source:{originalSource:'() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />',...(s=(t=o.parameters)==null?void 0:t.docs)==null?void 0:s.source}}};const x=["Base"];export{o as Base,x as __namedExportsOrder,l as default};

package/dist/assets/{FormControl-BwXDY9-m.js → FormControl-CygcWV_h.js}

@@ -1,4 +1,4 @@
-import{r as q,g as x,j as a,K as C}from"./iframe-C8q8wjEm.js";import"./index-B2swU3YW.js";import{M as u}from"./message-C3RuDR6M.js";import{w as _}from"./componentNames-Dts5uwdK.js";const w="container__g46MP",E="label__dGrlk",F="required__w9EwB",N="description__AST5n",R="error__uRqiU",r={container:w,label:E,required:F,description:N,error:R};function j({id:t,error:n,description:s,hasError:l}){const e={};return l&&(e["aria-invalid"]=!0),n&&(e["aria-invalid"]=!0,e["aria-errormessage"]=`${t}-error`),s&&(e["aria-describedby"]=`${t}-description`),e}const p=({id:t,label:n,hideLabel:s,description:l,error:e,hasError:c,children:m,required:o,dataset:f,onClick:v,preplyDsComponent:h=_.FormControl,useLegacyRequiredLabel:d=!1})=>{const b=q.useId(),i=t||b,y=j({id:i,error:e,description:l,hasError:c}),g=x(f,{preplyDsComponent:h});return a.jsxs("div",{className:r.container,...g,onClick:v,children:[a.jsxs("label",{htmlFor:i,className:r.label,"data-hidden":s||!n,"data-testid":"label",children:[n,!!d&&o&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.required",defaultMessage:"Required",description:"Form field required label"})]}),!d&&!o&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.optional",defaultMessage:"Optional",description:"Form field optional label"})]})]}),a.jsx(C,{id:i,required:o,...y,children:m}),e?a.jsx("p",{className:r.error,role:"alert",id:`${i}-error`,"data-testid":"error",children:e}):l?a.jsx("p",{className:r.description,id:`${i}-description`,"data-testid":"description",children:l}):null]})};try{p.displayName="FormControl",p.__docgenInfo={description:"FormControl component provides a consistent layout and accessibility\nfor the form fields. You can use it to create custom fields not supported\nby the DS yet.\n\nNote that FormControl will implicitly provide some props to the child component:\n\n- `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;\n- `aria-invalid` and `aria-errormessage` when `error` is provided;\n- `aria-describedby` when `description` is provided;\n- `required` when FormControl's `required` is true;",displayName:"FormControl",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
+import{r as q,g as x,j as a,K as C}from"./iframe-CpMEswOF.js";import"./index-DT-MbRPK.js";import{M as u}from"./message-CTdBLxyt.js";import{w as _}from"./componentNames-hc9KR2nX.js";const w="container__g46MP",E="label__dGrlk",F="required__w9EwB",N="description__AST5n",R="error__uRqiU",r={container:w,label:E,required:F,description:N,error:R};function j({id:t,error:n,description:s,hasError:l}){const e={};return l&&(e["aria-invalid"]=!0),n&&(e["aria-invalid"]=!0,e["aria-errormessage"]=`${t}-error`),s&&(e["aria-describedby"]=`${t}-description`),e}const p=({id:t,label:n,hideLabel:s,description:l,error:e,hasError:c,children:m,required:o,dataset:f,onClick:v,preplyDsComponent:h=_.FormControl,useLegacyRequiredLabel:d=!1})=>{const b=q.useId(),i=t||b,y=j({id:i,error:e,description:l,hasError:c}),g=x(f,{preplyDsComponent:h});return a.jsxs("div",{className:r.container,...g,onClick:v,children:[a.jsxs("label",{htmlFor:i,className:r.label,"data-hidden":s||!n,"data-testid":"label",children:[n,!!d&&o&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.required",defaultMessage:"Required",description:"Form field required label"})]}),!d&&!o&&a.jsxs("span",{"aria-hidden":!0,className:r.required,children:[" • ",a.jsx(u,{id:"preply-ds.fieldLabel.optional",defaultMessage:"Optional",description:"Form field optional label"})]})]}),a.jsx(C,{id:i,required:o,...y,children:m}),e?a.jsx("p",{className:r.error,role:"alert",id:`${i}-error`,"data-testid":"error",children:e}):l?a.jsx("p",{className:r.description,id:`${i}-description`,"data-testid":"description",children:l}):null]})};try{p.displayName="FormControl",p.__docgenInfo={description:"FormControl component provides a consistent layout and accessibility\nfor the form fields. You can use it to create custom fields not supported\nby the DS yet.\n\nNote that FormControl will implicitly provide some props to the child component:\n\n- `id` forwarded from FormControl props or will be generated automatically for accessibility purposes;\n- `aria-invalid` and `aria-errormessage` when `error` is provided;\n- `aria-describedby` when `description` is provided;\n- `required` when FormControl's `required` is true;",displayName:"FormControl",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
 If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
 to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to explicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
 indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement>"}]}},preplyDsComponent:{defaultValue:{value:"webComponentNames.FormControl"},description:`@deprecated The attribute is meant for internal usage only

package/dist/assets/{FormControl.stories-CI2bBHKa.js → FormControl.stories-C5u8y2E-.js}

@@ -1,4 +1,4 @@
-import{j as t,r as I}from"./iframe-C8q8wjEm.js";import{F as x}from"./FormControl-BwXDY9-m.js";import{d as a}from"./styled-components.browser.esm-Dlze6hxw.js";import{I as T}from"./Icon-CeynEPoQ.js";import{F as j}from"./TokyoUIUpload-B4cXgnHx.js";import{T as v}from"./Text-CPACpRkz.js";import{g as o}from"./getTokenVar-B4d49odp.js";import{c as p,s as d,r as L}from"./tokens-CQefoo5n.js";import"./preload-helper-Dp1pzeXC.js";import"./index-B2swU3YW.js";import"./message-C3RuDR6M.js";import"./componentNames-Dts5uwdK.js";import"./emotion-unitless.esm-BZwEwAnk.js";import"./text-accent-Bbx7l_cl.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-rjyGnIsi.js";import"./text-centered-Cg_ddFhQ.js";const K={title:"Components/FormControl",component:x,parameters:{layout:"padded"}},S=a.input.attrs({type:"file"})`
+import{j as t,r as I}from"./iframe-CpMEswOF.js";import{F as x}from"./FormControl-CygcWV_h.js";import{d as a}from"./styled-components.browser.esm-DsMoKq9m.js";import{I as T}from"./Icon-BX3I9JNh.js";import{F as j}from"./TokyoUIUpload-C50QSO0I.js";import{T as v}from"./Text-cq49jjad.js";import{g as o}from"./getTokenVar-DntuTYid.js";import{c as p,s as d,r as L}from"./tokens-DTCyqZ0W.js";import"./preload-helper-Dp1pzeXC.js";import"./index-DT-MbRPK.js";import"./message-CTdBLxyt.js";import"./componentNames-hc9KR2nX.js";import"./emotion-unitless.esm-BZwEwAnk.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";import"./text-centered-DiwR-QSx.js";const K={title:"Components/FormControl",component:x,parameters:{layout:"padded"}},S=a.input.attrs({type:"file"})`
     visibility: hidden;
     position: absolute;
     width: 0;

package/dist/assets/{Heading-IAeZxORQ.js → Heading-Bie8QWaf.js}

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

package/dist/assets/{Heading.stories-B8NU4XH8.js → Heading.stories-D0fztdY8.js}

@@ -1,4 +1,4 @@
-import{j as a}from"./iframe-C8q8wjEm.js";import{H as e}from"./Heading-IAeZxORQ.js";import{S as s}from"./consts-KAYct7Gj.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-Bbx7l_cl.js";import"./text-centered-Cg_ddFhQ.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-Dts5uwdK.js";const y={title:"components/Heading",component:e,argTypes:{centered:{description:s},variant:{description:s}}},r=()=>a.jsxs("div",{style:{padding:"16px",display:"grid",gridTemplateColumns:"auto 3fr",alignItems:"center",gap:"16px"},children:[a.jsx("span",{children:"h1 / massive"}),a.jsx(e,{tag:"h1",variant:"massive",children:"Lorem ipsum"}),a.jsx("span",{children:"h2 / huge"}),a.jsx(e,{tag:"h2",variant:"huge",children:"Lorem ipsum"}),a.jsx("span",{children:"h3 / extraLarge"}),a.jsx(e,{tag:"h3",variant:"extraLarge",children:"Lorem ipsum"}),a.jsx("span",{children:"h4 / large"}),a.jsx(e,{tag:"h4",variant:"large",children:"Lorem ipsum"}),a.jsx("span",{children:"h5 / medium"}),a.jsx(e,{tag:"h5",variant:"medium",children:"Lorem ipsum"}),a.jsx("span",{children:"p / small"}),a.jsx(e,{tag:"p",variant:"small",children:"Lorem ipsum"})]}),n={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(g,{args:l})=>a.jsx("div",{style:{backgroundColor:l.accent==="inverted"?"black":void 0},children:g()})],args:{tag:"h1",variant:"massive",children:"Lorem ipsum",dataset:{qaid:"heading"}},argTypes:{centered:{control:"boolean"},dataset:{control:"object"},strong:{table:{disable:!0}}}};var t,i,o;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`() => <div style={{
+import{j as a}from"./iframe-CpMEswOF.js";import{H as e}from"./Heading-Bie8QWaf.js";import{S as s}from"./consts-KAYct7Gj.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-DZ_ihUdH.js";import"./text-centered-DiwR-QSx.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-hc9KR2nX.js";const y={title:"components/Heading",component:e,argTypes:{centered:{description:s},variant:{description:s}}},r=()=>a.jsxs("div",{style:{padding:"16px",display:"grid",gridTemplateColumns:"auto 3fr",alignItems:"center",gap:"16px"},children:[a.jsx("span",{children:"h1 / massive"}),a.jsx(e,{tag:"h1",variant:"massive",children:"Lorem ipsum"}),a.jsx("span",{children:"h2 / huge"}),a.jsx(e,{tag:"h2",variant:"huge",children:"Lorem ipsum"}),a.jsx("span",{children:"h3 / extraLarge"}),a.jsx(e,{tag:"h3",variant:"extraLarge",children:"Lorem ipsum"}),a.jsx("span",{children:"h4 / large"}),a.jsx(e,{tag:"h4",variant:"large",children:"Lorem ipsum"}),a.jsx("span",{children:"h5 / medium"}),a.jsx(e,{tag:"h5",variant:"medium",children:"Lorem ipsum"}),a.jsx("span",{children:"p / small"}),a.jsx(e,{tag:"p",variant:"small",children:"Lorem ipsum"})]}),n={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(g,{args:l})=>a.jsx("div",{style:{backgroundColor:l.accent==="inverted"?"black":void 0},children:g()})],args:{tag:"h1",variant:"massive",children:"Lorem ipsum",dataset:{qaid:"heading"}},argTypes:{centered:{control:"boolean"},dataset:{control:"object"},strong:{table:{disable:!0}}}};var t,i,o;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`() => <div style={{
   padding: '16px',
   display: 'grid',
   gridTemplateColumns: 'auto 3fr',

package/dist/assets/{Icon-CeynEPoQ.js → Icon-BX3I9JNh.js}

@@ -1,8 +1,8 @@
-import{u as x,v as d,r as y,g as m,j as g,av as f}from"./iframe-C8q8wjEm.js";import{g as w}from"./text-accent-Bbx7l_cl.js";import{f as k}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{r as b}from"./render-icon-rjyGnIsi.js";import{w as p}from"./componentNames-Dts5uwdK.js";const I="Icon__EP3Vh",h={Icon:I,"Icon--size-16":"Icon--size-16__P716Z","Icon--size-24":"Icon--size-24__uOdtd","Icon--size-32":"Icon--size-32__zP8We","Icon--size-48":"Icon--size-48__-KHYK"},N="ExpColor__fSHBe",V={ExpColor:N,"ExpColor--exp-color-grey-0":"ExpColor--exp-color-grey-0__IQ8rz","ExpColor--exp-color-grey-50":"ExpColor--exp-color-grey-50__4wU8k","ExpColor--exp-color-grey-100":"ExpColor--exp-color-grey-100__idyQR","ExpColor--exp-color-grey-200":"ExpColor--exp-color-grey-200__bSfXM","ExpColor--exp-color-grey-300":"ExpColor--exp-color-grey-300__TAgB4","ExpColor--exp-color-grey-400":"ExpColor--exp-color-grey-400__8AFVk","ExpColor--exp-color-grey-500":"ExpColor--exp-color-grey-500__fFByn","ExpColor--exp-color-grey-600":"ExpColor--exp-color-grey-600__gRj6N","ExpColor--exp-color-grey-700":"ExpColor--exp-color-grey-700__3iGwa","ExpColor--exp-color-grey-800":"ExpColor--exp-color-grey-800__on7RX","ExpColor--exp-color-grey-900":"ExpColor--exp-color-grey-900__9T1OC","ExpColor--exp-color-pink-50":"ExpColor--exp-color-pink-50__3o0cC","ExpColor--exp-color-pink-100":"ExpColor--exp-color-pink-100__yBJxi","ExpColor--exp-color-pink-200":"ExpColor--exp-color-pink-200__Zff-J","ExpColor--exp-color-pink-300":"ExpColor--exp-color-pink-300__wWr90","ExpColor--exp-color-pink-400":"ExpColor--exp-color-pink-400__-C3Dw","ExpColor--exp-color-pink-500":"ExpColor--exp-color-pink-500__Kpw6U","ExpColor--exp-color-pink-600":"ExpColor--exp-color-pink-600__g4tqI","ExpColor--exp-color-pink-700":"ExpColor--exp-color-pink-700__5lL8W","ExpColor--exp-color-pink-800":"ExpColor--exp-color-pink-800__JdCoO","ExpColor--exp-color-yellow-50":"ExpColor--exp-color-yellow-50__x4D1V","ExpColor--exp-color-yellow-100":"ExpColor--exp-color-yellow-100__Mp3-h","ExpColor--exp-color-yellow-200":"ExpColor--exp-color-yellow-200__dr309","ExpColor--exp-color-yellow-300":"ExpColor--exp-color-yellow-300__4eqgg","ExpColor--exp-color-yellow-400":"ExpColor--exp-color-yellow-400__7KEax","ExpColor--exp-color-yellow-500":"ExpColor--exp-color-yellow-500__YFTaH","ExpColor--exp-color-yellow-600":"ExpColor--exp-color-yellow-600__uioue","ExpColor--exp-color-yellow-700":"ExpColor--exp-color-yellow-700__APgN0","ExpColor--exp-color-yellow-800":"ExpColor--exp-color-yellow-800__iqZ5l","ExpColor--exp-color-blue-50":"ExpColor--exp-color-blue-50__9YSjB","ExpColor--exp-color-blue-100":"ExpColor--exp-color-blue-100__msV5Z","ExpColor--exp-color-blue-200":"ExpColor--exp-color-blue-200__0-B47","ExpColor--exp-color-blue-300":"ExpColor--exp-color-blue-300__kBuCR","ExpColor--exp-color-blue-400":"ExpColor--exp-color-blue-400__rug3Y","ExpColor--exp-color-blue-500":"ExpColor--exp-color-blue-500__1zhad","ExpColor--exp-color-blue-600":"ExpColor--exp-color-blue-600__INDau","ExpColor--exp-color-blue-700":"ExpColor--exp-color-blue-700__nKtQ-","ExpColor--exp-color-blue-800":"ExpColor--exp-color-blue-800__AWAr2","ExpColor--exp-color-teal-50":"ExpColor--exp-color-teal-50__7QmhW","ExpColor--exp-color-teal-100":"ExpColor--exp-color-teal-100__YLRdY","ExpColor--exp-color-teal-200":"ExpColor--exp-color-teal-200__aUMwT","ExpColor--exp-color-teal-300":"ExpColor--exp-color-teal-300__wI000","ExpColor--exp-color-teal-400":"ExpColor--exp-color-teal-400__uVmEI","ExpColor--exp-color-teal-500":"ExpColor--exp-color-teal-500__HM2LK","ExpColor--exp-color-teal-600":"ExpColor--exp-color-teal-600__0PlFD","ExpColor--exp-color-teal-700":"ExpColor--exp-color-teal-700__FVY4B","ExpColor--exp-color-teal-800":"ExpColor--exp-color-teal-800__2dQ3c","ExpColor--exp-color-red-50":"ExpColor--exp-color-red-50__k0fHb","ExpColor--exp-color-red-100":"ExpColor--exp-color-red-100__PuJbY","ExpColor--exp-color-red-200":"ExpColor--exp-color-red-200__cumh2","ExpColor--exp-color-red-300":"ExpColor--exp-color-red-300__dUiEM","ExpColor--exp-color-red-400":"ExpColor--exp-color-red-400__DBCU8","ExpColor--exp-color-red-500":"ExpColor--exp-color-red-500__lIF6t","ExpColor--exp-color-red-600":"ExpColor--exp-color-red-600__NNabI","ExpColor--exp-color-red-700":"ExpColor--exp-color-red-700__9Tz3v","ExpColor--exp-color-red-800":"ExpColor--exp-color-red-800__HCek3"},T="ExpColor",z=o=>x(V,T,[d("exp-color",o)]),a=y.forwardRef(function({svg:e,size:c=f,accent:l,expColor:n,label:r,dataset:t,...u},s){const i=x(h,p.Icon,[`size-${c}`]),C=w(!1,l),_=l?[]:z(n),E=[...i,...C,..._],v={...k(u),className:E.join(" "),...m(t,{preplyDsComponent:p.Icon}),ref:s};if(!e)throw new Error("Icon prop svg is mandatory");return g.jsx("span",{...v,role:"img","aria-hidden":!r,"aria-label":r,children:b(e,{"aria-hidden":"true",focusable:"false"})})});try{a.displayName="Icon",a.__docgenInfo={description:"",displayName:"Icon",props:{svg:{defaultValue:null,description:`The SVG icon to render.
+import{u as x,v as d,r as y,g as m,j as g,av as f}from"./iframe-CpMEswOF.js";import{g as w}from"./text-accent-DZ_ihUdH.js";import{f as k}from"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import{r as b}from"./render-icon-c7okze1K.js";import{w as p}from"./componentNames-hc9KR2nX.js";const I="Icon__EP3Vh",h={Icon:I,"Icon--size-16":"Icon--size-16__P716Z","Icon--size-24":"Icon--size-24__uOdtd","Icon--size-32":"Icon--size-32__zP8We","Icon--size-48":"Icon--size-48__-KHYK"},N="ExpColor__fSHBe",V={ExpColor:N,"ExpColor--exp-color-grey-0":"ExpColor--exp-color-grey-0__IQ8rz","ExpColor--exp-color-grey-50":"ExpColor--exp-color-grey-50__4wU8k","ExpColor--exp-color-grey-100":"ExpColor--exp-color-grey-100__idyQR","ExpColor--exp-color-grey-200":"ExpColor--exp-color-grey-200__bSfXM","ExpColor--exp-color-grey-300":"ExpColor--exp-color-grey-300__TAgB4","ExpColor--exp-color-grey-400":"ExpColor--exp-color-grey-400__8AFVk","ExpColor--exp-color-grey-500":"ExpColor--exp-color-grey-500__fFByn","ExpColor--exp-color-grey-600":"ExpColor--exp-color-grey-600__gRj6N","ExpColor--exp-color-grey-700":"ExpColor--exp-color-grey-700__3iGwa","ExpColor--exp-color-grey-800":"ExpColor--exp-color-grey-800__on7RX","ExpColor--exp-color-grey-900":"ExpColor--exp-color-grey-900__9T1OC","ExpColor--exp-color-pink-50":"ExpColor--exp-color-pink-50__3o0cC","ExpColor--exp-color-pink-100":"ExpColor--exp-color-pink-100__yBJxi","ExpColor--exp-color-pink-200":"ExpColor--exp-color-pink-200__Zff-J","ExpColor--exp-color-pink-300":"ExpColor--exp-color-pink-300__wWr90","ExpColor--exp-color-pink-400":"ExpColor--exp-color-pink-400__-C3Dw","ExpColor--exp-color-pink-500":"ExpColor--exp-color-pink-500__Kpw6U","ExpColor--exp-color-pink-600":"ExpColor--exp-color-pink-600__g4tqI","ExpColor--exp-color-pink-700":"ExpColor--exp-color-pink-700__5lL8W","ExpColor--exp-color-pink-800":"ExpColor--exp-color-pink-800__JdCoO","ExpColor--exp-color-yellow-50":"ExpColor--exp-color-yellow-50__x4D1V","ExpColor--exp-color-yellow-100":"ExpColor--exp-color-yellow-100__Mp3-h","ExpColor--exp-color-yellow-200":"ExpColor--exp-color-yellow-200__dr309","ExpColor--exp-color-yellow-300":"ExpColor--exp-color-yellow-300__4eqgg","ExpColor--exp-color-yellow-400":"ExpColor--exp-color-yellow-400__7KEax","ExpColor--exp-color-yellow-500":"ExpColor--exp-color-yellow-500__YFTaH","ExpColor--exp-color-yellow-600":"ExpColor--exp-color-yellow-600__uioue","ExpColor--exp-color-yellow-700":"ExpColor--exp-color-yellow-700__APgN0","ExpColor--exp-color-yellow-800":"ExpColor--exp-color-yellow-800__iqZ5l","ExpColor--exp-color-blue-50":"ExpColor--exp-color-blue-50__9YSjB","ExpColor--exp-color-blue-100":"ExpColor--exp-color-blue-100__msV5Z","ExpColor--exp-color-blue-200":"ExpColor--exp-color-blue-200__0-B47","ExpColor--exp-color-blue-300":"ExpColor--exp-color-blue-300__kBuCR","ExpColor--exp-color-blue-400":"ExpColor--exp-color-blue-400__rug3Y","ExpColor--exp-color-blue-500":"ExpColor--exp-color-blue-500__1zhad","ExpColor--exp-color-blue-600":"ExpColor--exp-color-blue-600__INDau","ExpColor--exp-color-blue-700":"ExpColor--exp-color-blue-700__nKtQ-","ExpColor--exp-color-blue-800":"ExpColor--exp-color-blue-800__AWAr2","ExpColor--exp-color-teal-50":"ExpColor--exp-color-teal-50__7QmhW","ExpColor--exp-color-teal-100":"ExpColor--exp-color-teal-100__YLRdY","ExpColor--exp-color-teal-200":"ExpColor--exp-color-teal-200__aUMwT","ExpColor--exp-color-teal-300":"ExpColor--exp-color-teal-300__wI000","ExpColor--exp-color-teal-400":"ExpColor--exp-color-teal-400__uVmEI","ExpColor--exp-color-teal-500":"ExpColor--exp-color-teal-500__HM2LK","ExpColor--exp-color-teal-600":"ExpColor--exp-color-teal-600__0PlFD","ExpColor--exp-color-teal-700":"ExpColor--exp-color-teal-700__FVY4B","ExpColor--exp-color-teal-800":"ExpColor--exp-color-teal-800__2dQ3c","ExpColor--exp-color-red-50":"ExpColor--exp-color-red-50__k0fHb","ExpColor--exp-color-red-100":"ExpColor--exp-color-red-100__PuJbY","ExpColor--exp-color-red-200":"ExpColor--exp-color-red-200__cumh2","ExpColor--exp-color-red-300":"ExpColor--exp-color-red-300__dUiEM","ExpColor--exp-color-red-400":"ExpColor--exp-color-red-400__DBCU8","ExpColor--exp-color-red-500":"ExpColor--exp-color-red-500__lIF6t","ExpColor--exp-color-red-600":"ExpColor--exp-color-red-600__NNabI","ExpColor--exp-color-red-700":"ExpColor--exp-color-red-700__9Tz3v","ExpColor--exp-color-red-800":"ExpColor--exp-color-red-800__HCek3"},T="ExpColor",z=o=>x(V,T,[d("exp-color",o)]),a=y.forwardRef(function({svg:e,size:c=f,accent:l,expColor:n,label:r,dataset:t,...u},s){const i=x(h,p.Icon,[`size-${c}`]),C=w(!1,l),_=l?[]:z(n),E=[...i,...C,..._],v={...k(u),className:E.join(" "),...m(t,{preplyDsComponent:p.Icon}),ref:s};if(!e)throw new Error("Icon prop svg is mandatory");return g.jsx("span",{...v,role:"img","aria-hidden":!r,"aria-label":r,children:b(e,{"aria-hidden":"true",focusable:"false"})})});try{a.displayName="Icon",a.__docgenInfo={description:"",displayName:"Icon",props:{svg:{defaultValue:null,description:`The SVG icon to render.
 @example import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
 
 <Icon svg={TokyoUINotesWithPad} />
 @example <caption>Using as react server component</caption>
 import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
 
-<Icon svg={<TokyoUINotesWithPad />} />`,name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"16"'},{value:'"24"'},{value:'"32"'},{value:'"48"'}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"inverted"'},{value:'"info"'},{value:'"positive"'},{value:'"warning"'},{value:'"critical"'},{value:'"tertiary"'},{value:'"primary"'},{value:'"secondary"'},{value:'"accentDark"'},{value:'"placeholder"'}]}},expColor:{defaultValue:null,description:"If passed along with `accent`, `accent` takes precedence.",name:"expColor",required:!1,type:{name:"enum",value:[{value:'"grey-0"'},{value:'"grey-50"'},{value:'"grey-100"'},{value:'"grey-200"'},{value:'"grey-300"'},{value:'"grey-400"'},{value:'"grey-500"'},{value:'"grey-600"'},{value:'"grey-700"'},{value:'"grey-800"'},{value:'"grey-900"'},{value:'"pink-50"'},{value:'"pink-100"'},{value:'"pink-200"'},{value:'"pink-300"'},{value:'"pink-400"'},{value:'"pink-500"'},{value:'"pink-600"'},{value:'"pink-700"'},{value:'"pink-800"'},{value:'"yellow-50"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"yellow-600"'},{value:'"yellow-700"'},{value:'"yellow-800"'},{value:'"blue-50"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"blue-600"'},{value:'"blue-700"'},{value:'"blue-800"'},{value:'"teal-50"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"teal-600"'},{value:'"teal-700"'},{value:'"teal-800"'},{value:'"red-50"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"red-600"'},{value:'"red-700"'},{value:'"red-800"'}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:"label",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{a as I};
+<Icon svg={<TokyoUINotesWithPad />} />`,name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},size:{defaultValue:{value:"24"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"24"'},{value:'"32"'},{value:'"48"'},{value:'"16"'}]}},accent:{defaultValue:null,description:"",name:"accent",required:!1,type:{name:"enum",value:[{value:'"inverted"'},{value:'"info"'},{value:'"positive"'},{value:'"warning"'},{value:'"critical"'},{value:'"tertiary"'},{value:'"primary"'},{value:'"secondary"'},{value:'"accentDark"'},{value:'"placeholder"'}]}},expColor:{defaultValue:null,description:"If passed along with `accent`, `accent` takes precedence.",name:"expColor",required:!1,type:{name:"enum",value:[{value:'"grey-0"'},{value:'"grey-50"'},{value:'"grey-100"'},{value:'"grey-200"'},{value:'"grey-300"'},{value:'"grey-400"'},{value:'"grey-500"'},{value:'"grey-600"'},{value:'"grey-700"'},{value:'"grey-800"'},{value:'"grey-900"'},{value:'"pink-50"'},{value:'"pink-100"'},{value:'"pink-200"'},{value:'"pink-300"'},{value:'"pink-400"'},{value:'"pink-500"'},{value:'"pink-600"'},{value:'"pink-700"'},{value:'"pink-800"'},{value:'"yellow-50"'},{value:'"yellow-100"'},{value:'"yellow-200"'},{value:'"yellow-300"'},{value:'"yellow-400"'},{value:'"yellow-500"'},{value:'"yellow-600"'},{value:'"yellow-700"'},{value:'"yellow-800"'},{value:'"blue-50"'},{value:'"blue-100"'},{value:'"blue-200"'},{value:'"blue-300"'},{value:'"blue-400"'},{value:'"blue-500"'},{value:'"blue-600"'},{value:'"blue-700"'},{value:'"blue-800"'},{value:'"teal-50"'},{value:'"teal-100"'},{value:'"teal-200"'},{value:'"teal-300"'},{value:'"teal-400"'},{value:'"teal-500"'},{value:'"teal-600"'},{value:'"teal-700"'},{value:'"teal-800"'},{value:'"red-50"'},{value:'"red-100"'},{value:'"red-200"'},{value:'"red-300"'},{value:'"red-400"'},{value:'"red-500"'},{value:'"red-600"'},{value:'"red-700"'},{value:'"red-800"'}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:"label",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLSpanElement | null) => void"},{value:"RefObject<HTMLSpanElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{a as I};

package/dist/assets/{Icon-RSC-DFJrR2oE.js → Icon-RSC-D3qlB5DK.js}

@@ -1,4 +1,4 @@
-import{j as e,M as s,S as c}from"./iframe-C8q8wjEm.js";import{useMDXComponents as r}from"./index-BPdSA514.js";import{ServerComponent as m}from"./Icon.stories-BuiwbRD-.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUINotesWithPad-yqIw3i8c.js";import"./Icon-CeynEPoQ.js";import"./text-accent-Bbx7l_cl.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-rjyGnIsi.js";import"./componentNames-Dts5uwdK.js";import"./options-jUub4JL1.js";function t(n){const o={code:"code",h1:"h1",p:"p",pre:"pre",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"components/Icon/Server Component"}),`
+import{j as e,M as s,S as c}from"./iframe-CpMEswOF.js";import{useMDXComponents as r}from"./index-Cc28ZUNU.js";import{ServerComponent as m}from"./Icon.stories-By891-S7.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUINotesWithPad-Bi4bu_3q.js";import"./Icon-BX3I9JNh.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";import"./componentNames-hc9KR2nX.js";import"./options-jUub4JL1.js";function t(n){const o={code:"code",h1:"h1",p:"p",pre:"pre",...r(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(s,{title:"components/Icon/Server Component"}),`
 `,e.jsx(o.h1,{id:"use-icon-as-react-server-component",children:"Use Icon as react server component"}),`
 `,e.jsxs(o.p,{children:["To use Icon as react server component, provide ",e.jsx(o.code,{children:"svg"})," as element:"]}),`
 `,e.jsx(c,{of:m}),`

package/dist/assets/{Icon.stories-BuiwbRD-.js → Icon.stories-By891-S7.js}

@@ -1,4 +1,4 @@
-import{j as s}from"./iframe-C8q8wjEm.js";import{F as e}from"./TokyoUINotesWithPad-yqIw3i8c.js";import{I as o}from"./Icon-CeynEPoQ.js";import{E as h}from"./options-jUub4JL1.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-Bbx7l_cl.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-rjyGnIsi.js";import"./componentNames-Dts5uwdK.js";const O={title:"components/Icon",component:o,parameters:{docs:{description:{component:"To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page)."}}}},t=()=>s.jsxs("div",{style:{display:"flex",alignItems:"end",gap:"4px"},children:[s.jsx(o,{svg:e,size:"16"}),s.jsx(o,{svg:e,size:"24"}),s.jsx(o,{svg:e,size:"32"}),s.jsx(o,{svg:e,size:"48"})]}),n=()=>s.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:h.map(a=>s.jsxs("div",{style:{display:"flex",gap:16},children:[s.jsx(o,{svg:e,expColor:a.id},a.id),s.jsx("span",{children:a.id})]},a.id))}),r=()=>s.jsx(o,{svg:s.jsx(e,{})});r.tags=["!dev","!autodocs"];const i={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:e,dataset:{qaid:"icon"}},argTypes:{svg:{control:!1},dataset:{control:"object"},label:{control:"text"}}};var p,c,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`() => <div style={{
+import{j as s}from"./iframe-CpMEswOF.js";import{F as e}from"./TokyoUINotesWithPad-Bi4bu_3q.js";import{I as o}from"./Icon-BX3I9JNh.js";import{E as h}from"./options-jUub4JL1.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";import"./componentNames-hc9KR2nX.js";const O={title:"components/Icon",component:o,parameters:{docs:{description:{component:"To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page)."}}}},t=()=>s.jsxs("div",{style:{display:"flex",alignItems:"end",gap:"4px"},children:[s.jsx(o,{svg:e,size:"16"}),s.jsx(o,{svg:e,size:"24"}),s.jsx(o,{svg:e,size:"32"}),s.jsx(o,{svg:e,size:"48"})]}),n=()=>s.jsx("div",{style:{display:"flex",flexDirection:"column",gap:"4px"},children:h.map(a=>s.jsxs("div",{style:{display:"flex",gap:16},children:[s.jsx(o,{svg:e,expColor:a.id},a.id),s.jsx("span",{children:a.id})]},a.id))}),r=()=>s.jsx(o,{svg:s.jsx(e,{})});r.tags=["!dev","!autodocs"];const i={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:e,dataset:{qaid:"icon"}},argTypes:{svg:{control:!1},dataset:{control:"object"},label:{control:"text"}}};var p,c,d;t.parameters={...t.parameters,docs:{...(p=t.parameters)==null?void 0:p.docs,source:{originalSource:`() => <div style={{
   display: 'flex',
   alignItems: 'end',
   gap: '4px'

package/dist/assets/IconButton-DVKNd7ZK.js

@@ -0,0 +1,8 @@
+import{r as d,j as m,z as v,D as c}from"./iframe-CpMEswOF.js";import{r as p}from"./render-icon-c7okze1K.js";import{B as f}from"./ButtonBase-D1x6yeKi.js";import{w as y}from"./componentNames-hc9KR2nX.js";const b="bubbleCounter__IIv-p",V="childTargetOverlay__7xCVK",g="cutout__ooHoK",q={bubbleCounter:b,"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:V,cutout:g},_="IconButton__sj2x5",h={IconButton:_},e=d.forwardRef(function({variant:n=c,size:l=v,url:u,a11yLabel:t,svg:r,...o},s){const i=[h.IconButton,q.cutout].join(" ");return m.jsx(f,{...o,ref:s,className:i,isIconButton:!0,variant:n,size:l,url:u,a11yLabel:t,preplyDsComponent:y.IconButton,children:p(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:"small"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:"ResponsiveProp<ButtonSize>"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},variant:{defaultValue:{value:"primary"},description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"inverted"'},{value:'"critical"'},{value:'"tertiary"'},{value:'"primary"'},{value:'"secondary"'},{value:'"quaternary"'},{value:'"ghost"'},{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"}]}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"enum",value:[{value:"string"}]}},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,q as b};

package/dist/assets/{IconTile.stories-D1hs9-qb.js → IconTile.stories-Dns_iBHK.js}

@@ -1,4 +1,4 @@
-import{r as y,u as _,j as e,g as z}from"./iframe-C8q8wjEm.js";import{F as n}from"./TokyoUINotesWithPad-yqIw3i8c.js";import{I as w}from"./Icon-CeynEPoQ.js";import{w as r}from"./componentNames-Dts5uwdK.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-Bbx7l_cl.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-rjyGnIsi.js";const S="IconTile__XlzW3",N={IconTile:S,"IconTile--size-small":"IconTile--size-small__brJck","IconTile--size-base":"IconTile--size-base__gPIDE","IconTile--size-medium":"IconTile--size-medium__gAwOs","IconTile--size-large":"IconTile--size-large__M35fc","IconTile--tone-neutral":"IconTile--tone-neutral__IVJ2Y","IconTile--tone-info":"IconTile--tone-info__o2x-M","IconTile--tone-ai":"IconTile--tone-ai__dJp9n","IconTile--tone-positive":"IconTile--tone-positive__yJsa9","IconTile--tone-warning":"IconTile--tone-warning__q8yaj","IconTile--tone-critical":"IconTile--tone-critical__iAjl0"};function k(l){switch(l){case"small":return"16";case"medium":return"32";case"large":return"48"}return"24"}const t=y.forwardRef(function({size:i="base",tone:x="neutral",dataset:T,...j},b){const f=_(N,r.IconTile,[`size-${i}`,`tone-${x}`]);return e.jsx("span",{className:f.join(" "),...z(T,{preplyDsComponent:r.IconTile}),children:e.jsx(w,{...j,accent:"primary",size:k(i),ref:b})})});try{t.displayName="IconTile",t.__docgenInfo={description:"",displayName:"IconTile",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},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"}]}},svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"}]}},size:{defaultValue:{value:"base"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:'"base"'}]}},tone:{defaultValue:{value:"neutral"},description:"",name:"tone",required:!1,type:{name:"enum",value:[{value:'"neutral"'},{value:'"info"'},{value:'"positive"'},{value:'"warning"'},{value:'"critical"'},{value:'"ai"'}]}},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{}const A={title:"components/IconTile",component:t,parameters:{docs:{description:{component:"To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page)."}}}},a=()=>e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"small"}),e.jsx("th",{children:"base"}),e.jsx("th",{children:"medium"}),e.jsx("th",{children:"large"})]})}),e.jsx("tbody",{children:e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx(t,{svg:n,size:"small"})}),e.jsx("td",{children:e.jsx(t,{svg:n,size:"base"})}),e.jsx("td",{children:e.jsx(t,{svg:n,size:"medium"})}),e.jsx("td",{children:e.jsx(t,{svg:n,size:"large"})})]})})]}),s=()=>e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"neutral"}),e.jsx("th",{children:"info"}),e.jsx("th",{children:"ai"}),e.jsx("th",{children:"positive"}),e.jsx("th",{children:"warning"}),e.jsx("th",{children:"critical"})]})}),e.jsx("tbody",{children:e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx(t,{svg:n,tone:"neutral"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"info"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"ai"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"positive"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"warning"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"critical"})})]})})]}),o={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:n,dataset:{qaid:"icon"}},argTypes:{svg:{control:!1},dataset:{control:"object"},label:{control:"text"}}};var c,d,u;a.parameters={...a.parameters,docs:{...(c=a.parameters)==null?void 0:c.docs,source:{originalSource:`() => <table style={{
+import{r as y,u as _,j as e,g as z}from"./iframe-CpMEswOF.js";import{F as n}from"./TokyoUINotesWithPad-Bi4bu_3q.js";import{I as w}from"./Icon-BX3I9JNh.js";import{w as r}from"./componentNames-hc9KR2nX.js";import"./preload-helper-Dp1pzeXC.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";const S="IconTile__XlzW3",N={IconTile:S,"IconTile--size-small":"IconTile--size-small__brJck","IconTile--size-base":"IconTile--size-base__gPIDE","IconTile--size-medium":"IconTile--size-medium__gAwOs","IconTile--size-large":"IconTile--size-large__M35fc","IconTile--tone-neutral":"IconTile--tone-neutral__IVJ2Y","IconTile--tone-info":"IconTile--tone-info__o2x-M","IconTile--tone-ai":"IconTile--tone-ai__dJp9n","IconTile--tone-positive":"IconTile--tone-positive__yJsa9","IconTile--tone-warning":"IconTile--tone-warning__q8yaj","IconTile--tone-critical":"IconTile--tone-critical__iAjl0"};function k(l){switch(l){case"small":return"16";case"medium":return"32";case"large":return"48"}return"24"}const t=y.forwardRef(function({size:i="base",tone:x="neutral",dataset:T,...j},b){const f=_(N,r.IconTile,[`size-${i}`,`tone-${x}`]);return e.jsx("span",{className:f.join(" "),...z(T,{preplyDsComponent:r.IconTile}),children:e.jsx(w,{...j,accent:"primary",size:k(i),ref:b})})});try{t.displayName="IconTile",t.__docgenInfo={description:"",displayName:"IconTile",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"}]}},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"}]}},size:{defaultValue:{value:"base"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"small"'},{value:'"medium"'},{value:'"large"'},{value:'"base"'}]}},tone:{defaultValue:{value:"neutral"},description:"",name:"tone",required:!1,type:{name:"enum",value:[{value:'"ai"'},{value:'"neutral"'},{value:'"info"'},{value:'"positive"'},{value:'"warning"'},{value:'"critical"'}]}},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{}const A={title:"components/IconTile",component:t,parameters:{docs:{description:{component:"To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page)."}}}},a=()=>e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"small"}),e.jsx("th",{children:"base"}),e.jsx("th",{children:"medium"}),e.jsx("th",{children:"large"})]})}),e.jsx("tbody",{children:e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx(t,{svg:n,size:"small"})}),e.jsx("td",{children:e.jsx(t,{svg:n,size:"base"})}),e.jsx("td",{children:e.jsx(t,{svg:n,size:"medium"})}),e.jsx("td",{children:e.jsx(t,{svg:n,size:"large"})})]})})]}),s=()=>e.jsxs("table",{style:{borderCollapse:"separate",borderSpacing:"16px"},children:[e.jsx("thead",{children:e.jsxs("tr",{children:[e.jsx("th",{children:"neutral"}),e.jsx("th",{children:"info"}),e.jsx("th",{children:"ai"}),e.jsx("th",{children:"positive"}),e.jsx("th",{children:"warning"}),e.jsx("th",{children:"critical"})]})}),e.jsx("tbody",{children:e.jsxs("tr",{children:[e.jsx("td",{children:e.jsx(t,{svg:n,tone:"neutral"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"info"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"ai"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"positive"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"warning"})}),e.jsx("td",{children:e.jsx(t,{svg:n,tone:"critical"})})]})})]}),o={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:n,dataset:{qaid:"icon"}},argTypes:{svg:{control:!1},dataset:{control:"object"},label:{control:"text"}}};var c,d,u;a.parameters={...a.parameters,docs:{...(c=a.parameters)==null?void 0:c.docs,source:{originalSource:`() => <table style={{
   borderCollapse: 'separate',
   borderSpacing: '16px'
 }}>