@preply/ds-docs 11.2.0 → 11.3.0

package/dist/assets/{DismissibleChips.stories-vx1F9ELx.js → DismissibleChips.stories-BbLkTYXP.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-B288uCKD.js";import{n as o,t as s}from"./Heading-Bmekm9VQ.js";import{n as c,t as l}from"./Button-a57MCiDO.js";import{r as ee,t as te}from"./lib-8ue2PVWI.js";import{n as u,r as ne,t as d}from"./DismissibleChips-Dc4tbb9S.js";import{n as re,t as f}from"./LayoutFlex-CEr_Bd5T.js";import{n as p,t as m}from"./Link-D75aReRI.js";import{n as ie,t as h}from"./Tooltip-DGa6B2Md.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as ae}from"./TokyoUIAvailability7LateNight-BKvXBfeB.js";import{n as oe,t as se}from"./TokyoUIEmojiFrowning-CyL90GhY.js";import{r as ce,t as le}from"./styled-components.browser.esm-48-sXnz9.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),ne(),_(),b(),v(),y(),oe(),ee(),re(),i(),p(),o(),ce(),c(),ie(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/DismissibleChips`,component:d,subcomponents:{DismissibleChipsItem:u},parameters:{layout:`padded`,remountable:!0},args:{"aria-label":`Selected skills`,defaultValue:[`vocabulary`,`speaking`,`listening`,`reading`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},decorators:[function(e,{parameters:t}){let[n,r]=(0,C.useState)(0);return t.remountable?(0,w.jsxs)(f,{gap:`12`,justifyContent:`space-between`,children:[(0,w.jsx)(e,{},n),(0,w.jsx)(l,{variant:`ghost`,size:`small`,onClick:()=>r(e=>e+1),dataset:{testid:`reset`},children:`Reset story`})]}):(0,w.jsx)(e,{})}],beforeEach:()=>()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`button`,{name:/Remove Vocabulary/}),a=r.getByRole(`button`,{name:/Remove Speaking/}),o=r.getByRole(`button`,{name:/Remove Listening/}),s=r.getByRole(`button`,{name:/Remove Reading/});await t(`Render chips with default values`,async()=>{T(i).toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Chip should have accessible name`,async()=>{T(i).toHaveAccessibleName(`Remove Vocabulary`)}),await t(`Dismiss chip by clicking dismiss button`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`,`listening`,`reading`]),T(i).not.toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Dismiss another chip`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`listening`,`reading`]),T(i).not.toBeVisible(),T(a).not.toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await O.click(r.getByTestId(`reset`)),await O.click(e)}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(d,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`button`,{name:/Remove Vocabulary/}),a=r.getByRole(`button`,{name:/Remove Speaking/}),o=r.getByRole(`button`,{name:/Remove Listening/}),s=r.getByRole(`button`,{name:/Remove Reading/});await t(`Render chips with default values`,async()=>{T(i).toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Dismiss chip by clicking dismiss button`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`,`listening`,`reading`]),T(i).not.toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Change the value externally`,async()=>{k(),N([`listening`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).not.toBeVisible(),T(a).not.toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()})}),await O.click(r.getByTestId(`reset`)),await O.click(e)}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e).getByRole(`button`,{name:/Remove Speaking/});await t(`Disabled chip must have disabled attribute`,async()=>{T(r).toBeDisabled()}),await t(`Disabled chip must not be clickable`,async()=>{await O.click(r),T(n.onValueChange).not.toHaveBeenCalled(),T(r).toBeVisible()})}},I={args:{"aria-label":`Selected availabilities`,defaultValue:[`morning`,`afternoon`,`evening`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove Morning/})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Selected languages`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Selected countries`,defaultValue:[`ua`,`gb`,`it`,`es`,`au`,`br`,`eg`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove Ukraine/})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,defaultValue:[`counter+icon`,`counter+flag`,`icon+flag`],items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`button`,{name:`Remove Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Selected time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(te,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByTestId(B[0]),i=n.getByTestId(B[1]),a=n.getByTestId(B[2]);await t(`Focus first chip`,async()=>{r.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(r).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(a).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(f,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(ae,{})}],K={render:function(e){return(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(d,{"aria-label":`Selected skills`,defaultValue:[`vocabulary`,`speaking`,`listening`],items:U})]}),(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(d,{"aria-label":`Selected days`,defaultValue:[`monday`,`wednesday`,`friday`],items:W})]}),(0,w.jsxs)(f,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(d,{"aria-label":`Selected times`,defaultValue:[`morning`,`afternoon`],items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`button`,{name:/Remove Vocabulary/}),i=n.getByRole(`button`,{name:/Remove Speaking/}),a=n.getByRole(`button`,{name:/Remove Listening/}),o=n.getByRole(`button`,{name:/Remove Monday/});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(r).toHaveFocus()}),await t(`Next tab should focus second chips group`,async()=>{await O.tab(),T(o).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(r).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(i).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(r).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(r).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()})}},q=le.ul`
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Text-Bj49UVGS.js";import{n as o,t as s}from"./Heading-Xmy4HTvU.js";import{n as c,t as l}from"./Button-DagS5hxP.js";import{r as ee,t as te}from"./lib-8ue2PVWI.js";import{r as ne,t as re}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as u,r as ie,t as d}from"./DismissibleChips-QUmF1DlO.js";import{n as f,t as p}from"./LayoutFlex-CpktYRVX.js";import{n as ae,t as oe}from"./Link-DLL8OonN.js";import{n as m,t as h}from"./Tooltip-DCzQmBi_.js";import{a as g,c as _,i as v,n as y,o as b,r as x,s as S,t as se}from"./TokyoUIAvailability7LateNight-Bho17X1G.js";import{n as ce,t as le}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";var C,w,T,E,D,O,k,A,j,M,N,P,F,I,L,R,z,B,V,H,U,W,G,K,q,J,Y,X,Z,Q,$;t((()=>{C=e(n(),1),ie(),_(),b(),v(),y(),ce(),ee(),f(),i(),ae(),o(),ne(),c(),m(),w=r(),{expect:T,within:E,fn:D,userEvent:O,resetAllMocks:k,waitFor:A}=__STORYBOOK_MODULE_TEST__,j={title:`components/Chips/DismissibleChips`,component:d,subcomponents:{DismissibleChipsItem:u},parameters:{layout:`padded`,remountable:!0},args:{"aria-label":`Selected skills`,defaultValue:[`vocabulary`,`speaking`,`listening`,`reading`],onValueChange:D(),items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`}]},decorators:[function(e,{parameters:t}){let[n,r]=(0,C.useState)(0);return t.remountable?(0,w.jsxs)(p,{gap:`12`,justifyContent:`space-between`,children:[(0,w.jsx)(e,{},n),(0,w.jsx)(l,{variant:`ghost`,size:`small`,onClick:()=>r(e=>e+1),dataset:{testid:`reset`},children:`Reset story`})]}):(0,w.jsx)(e,{})}],beforeEach:()=>()=>{k()}},M={play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`button`,{name:/Remove Vocabulary/}),a=r.getByRole(`button`,{name:/Remove Speaking/}),o=r.getByRole(`button`,{name:/Remove Listening/}),s=r.getByRole(`button`,{name:/Remove Reading/});await t(`Render chips with default values`,async()=>{T(i).toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Chip should have accessible name`,async()=>{T(i).toHaveAccessibleName(`Remove Vocabulary`)}),await t(`Dismiss chip by clicking dismiss button`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`,`listening`,`reading`]),T(i).not.toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Dismiss another chip`,async()=>{await O.click(a),T(n.onValueChange).toHaveBeenCalledWith([`listening`,`reading`]),T(i).not.toBeVisible(),T(a).not.toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await O.click(r.getByTestId(`reset`)),await O.click(e)}},P={render:function({defaultValue:e,...t}){let[n,r]=(0,C.useState)(e);N=r;let i=e=>{r(e),t.onValueChange?.(e)};return(0,w.jsx)(d,{...t,value:n,onValueChange:i})},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e),i=r.getByRole(`button`,{name:/Remove Vocabulary/}),a=r.getByRole(`button`,{name:/Remove Speaking/}),o=r.getByRole(`button`,{name:/Remove Listening/}),s=r.getByRole(`button`,{name:/Remove Reading/});await t(`Render chips with default values`,async()=>{T(i).toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Dismiss chip by clicking dismiss button`,async()=>{await O.click(i),T(n.onValueChange).toHaveBeenCalledWith([`speaking`,`listening`,`reading`]),T(i).not.toBeVisible(),T(a).toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()}),await t(`Change the value externally`,async()=>{k(),N([`listening`,`reading`]),await A(()=>{T(n.onValueChange).not.toHaveBeenCalled(),T(i).not.toBeVisible(),T(a).not.toBeVisible(),T(o).toBeVisible(),T(s).toBeVisible()})}),await O.click(r.getByTestId(`reset`)),await O.click(e)}},F={args:{items:[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`,disabled:!0},{value:`listening`,label:`Listening`,disabled:!0},{value:`reading`,label:`Reading`}]},play:async({canvasElement:e,step:t,args:n})=>{let r=E(e).getByRole(`button`,{name:/Remove Speaking/});await t(`Disabled chip must have disabled attribute`,async()=>{T(r).toBeDisabled()}),await t(`Disabled chip must not be clickable`,async()=>{await O.click(r),T(n.onValueChange).not.toHaveBeenCalled(),T(r).toBeVisible()})}},I={args:{"aria-label":`Selected availabilities`,defaultValue:[`morning`,`afternoon`,`evening`],items:[{value:`morning`,label:`Morning`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening`,icon:(0,w.jsx)(x,{})}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove Morning/})).getByTestId(`chip-icon`);await t("Chip should render an icon when `icon` prop is passed",async()=>{T(n).toBeVisible()})}},L={args:{"aria-label":`Selected languages`,defaultValue:[`english`],items:[{value:`english`,label:`English`,counter:1247},{value:`spanish`,label:`Spanish`,counter:892},{value:`french`,label:`French`,counter:534},{value:`german`,label:`German`,counter:421},{value:`italian`,label:`Italian`,counter:287},{value:`portuguese`,label:`Portuguese`,counter:156}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove English/})).getByTestId(`chip-counter`);await t("Chip should render a counter when `counter` prop is passed",async()=>{T(n).toBeVisible(),T(n).toHaveTextContent(`1247`)})}},R={args:{"aria-label":`Selected countries`,defaultValue:[`ua`,`gb`,`it`,`es`,`au`,`br`,`eg`],items:[{value:`ua`,label:`Ukraine`,countryFlagCode:`ua`},{value:`gb`,label:`United Kingdom`,countryFlagCode:`gb`},{value:`it`,label:`Italy`,countryFlagCode:`it`},{value:`es`,label:`Spain`,countryFlagCode:`es`},{value:`au`,label:`Australia`,countryFlagCode:`au`},{value:`br`,label:`Brazil`,countryFlagCode:`br`},{value:`eg`,label:`Egypt`,countryFlagCode:`eg`}]},play:async({canvasElement:e,step:t})=>{let n=E(E(e).getByRole(`button`,{name:/Remove Ukraine/})).getByTestId(`chip-country-flag`);await t("Chip should render a flag when `flagCountryCode` prop is passed",async()=>{T(n).toBeVisible()})}},z={args:{"aria-label":`Fancy chips`,defaultValue:[`counter+icon`,`counter+flag`,`icon+flag`],items:[{value:`counter+icon`,label:`Icon + Counter`,icon:(0,w.jsx)(S,{}),counter:1247},{value:`counter+flag`,label:`Flag + Counter`,countryFlagCode:`ua`,counter:1247},{value:`icon+flag`,label:`Icon + Flag`,icon:(0,w.jsx)(S,{}),countryFlagCode:`ua`}]},play:async({canvasElement:e})=>{let t=E(E(e).getByRole(`button`,{name:`Remove Icon + Flag`}));T(t.getByTestId(`chip-icon`)).toBeVisible(),T(t.queryByTestId(`chip-country-flag`)).not.toBeInTheDocument()}},B=[`2025-08-15T10:00Z`,`2025-08-16T12:00Z`,`2025-08-17T14:00Z`],V={args:{orientation:`vertical`,"aria-label":`Selected time slots`,defaultValue:B,items:B.map(e=>({value:e,label:(0,w.jsx)(te,{weekday:`short`,day:`numeric`,month:`short`,hour:`2-digit`,minute:`2-digit`,value:e}),dataset:{testid:e}}))},decorators:[e=>(0,w.jsx)(`div`,{style:{width:300,margin:`0 auto`},children:(0,w.jsx)(e,{})})],play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByTestId(B[0]),i=n.getByTestId(B[1]),a=n.getByTestId(B[2]);await t(`Focus first chip`,async()=>{r.focus()}),await t(`Arrow down should focus second chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(i).toHaveFocus()}),await t(`Arrow down should focus third chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(a).toHaveFocus()}),await t(`Arrow down should focus first chip`,async()=>{await O.keyboard(`{ArrowDown}`),T(r).toHaveFocus()}),await t(`Arrow up should focus third chip`,async()=>{await O.keyboard(`{ArrowUp}`),T(a).toHaveFocus()})}},H={render:e=>(0,w.jsxs)(p,{gap:`12`,children:[(0,w.jsx)(d,{...e}),(0,w.jsx)(l,{variant:`tertiary`,size:`small`,onClick:()=>alert(`Show all`),children:`Show all`})]})},U=[{value:`vocabulary`,label:`Vocabulary`},{value:`speaking`,label:`Speaking`},{value:`listening`,label:`Listening`},{value:`reading`,label:`Reading`},{value:`writing`,label:`Writing`},{value:`grammar`,label:`Grammar`}],W=[{value:`monday`,label:`Monday`},{value:`tuesday`,label:`Tuesday`},{value:`wednesday`,label:`Wednesday`},{value:`thursday`,label:`Thursday`},{value:`friday`,label:`Friday`},{value:`saturday`,label:`Saturday`},{value:`sunday`,label:`Sunday`}],G=[{value:`morning`,label:`Morning (6-12)`,icon:(0,w.jsx)(S,{})},{value:`afternoon`,label:`Afternoon (12-18)`,icon:(0,w.jsx)(g,{})},{value:`evening`,label:`Evening (18-0)`,icon:(0,w.jsx)(x,{})},{value:`night`,label:`Night (0-6)`,icon:(0,w.jsx)(se,{})}],K={render:function(e){return(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`64`,children:[(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What skills do you want to focus on?`}),(0,w.jsx)(d,{"aria-label":`Selected skills`,defaultValue:[`vocabulary`,`speaking`,`listening`],items:U})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`Which days work best for you?`}),(0,w.jsx)(d,{"aria-label":`Selected days`,defaultValue:[`monday`,`wednesday`,`friday`],items:W})]}),(0,w.jsxs)(p,{direction:`column`,alignItems:`stretch`,gap:`16`,children:[(0,w.jsx)(a,{variant:`large-semibold`,children:`What times of day work for you?`}),(0,w.jsx)(d,{"aria-label":`Selected times`,defaultValue:[`morning`,`afternoon`],items:G})]})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`button`,{name:/Remove Vocabulary/}),i=n.getByRole(`button`,{name:/Remove Speaking/}),a=n.getByRole(`button`,{name:/Remove Listening/}),o=n.getByRole(`button`,{name:/Remove Monday/});await t(`Tab once to enter the component`,async()=>{await O.tab(),T(r).toHaveFocus()}),await t(`Next tab should focus second chips group`,async()=>{await O.tab(),T(o).toHaveFocus()}),await t(`Shift+Tab should focus first chips group again`,async()=>{await O.tab({shift:!0}),T(r).toHaveFocus()}),await t(`Right arrow should focus next chip in the group`,async()=>{await O.keyboard(`{ArrowRight}`),T(i).toHaveFocus()}),await t(`Left arrow should focus previous chip in the group`,async()=>{await O.keyboard(`{ArrowLeft}`),T(r).toHaveFocus()}),await t(`Left arrow should focus last chip if first chip is focused`,async()=>{await O.keyboard(`{ArrowLeft}`),T(a).toHaveFocus()}),await t(`Right arrow should focus first chip if last chip is focused`,async()=>{await O.keyboard(`{ArrowRight}`),T(r).toHaveFocus()}),await t(`Focus last chip`,async()=>{await O.keyboard(`{ArrowLeft}`)}),await t(`Tab to the next group`,async()=>{await O.tab()}),await t(`Shift+Tab to return to the first group, the last focused chip should be focused`,async()=>{await O.tab({shift:!0}),T(a).toHaveFocus()})}},q=re.ul`
     all: unset;
     list-style: none;
     display: flex;
@@ -8,7 +8,7 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
     > li {
         display: contents;
     }
-`,J=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],Y={render:function(e){let t=[`vocabulary`,`speaking`,`listening`,`reading`,`grammar`],[n,r]=(0,C.useState)(t),i=n.length>0?J.filter(e=>n.some(t=>e.skills.includes(t))):J;return(0,w.jsxs)(f,{direction:`column`,gap:`24`,children:[(0,w.jsxs)(f,{direction:`column`,gap:`8`,children:[(0,w.jsx)(s,{tag:`h2`,variant:`large`,children:`Articles`}),(0,w.jsxs)(f,{gap:`16`,children:[(0,w.jsx)(d,{"aria-label":`Applied skill filters`,"aria-controls":`results`,value:n,onValueChange:r,items:U}),(0,w.jsx)(`div`,{children:(0,w.jsx)(l,{variant:`ghost`,onClick:()=>r(t),children:`Reset filters`})})]})]}),(0,w.jsx)(`section`,{id:`results`,"aria-label":`Filtered articles`,children:(0,w.jsx)(q,{children:i.map(e=>(0,w.jsx)(`li`,{children:(0,w.jsx)(m,{href:`#`,children:e.title})},e.id))})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`list`,{name:`Applied skill filters`}),i=n.getByRole(`button`,{name:/Remove Vocabulary/}),a=n.getByRole(`button`,{name:/Remove Speaking/}),o=n.getByRole(`button`,{name:/Remove Listening/}),s=n.getByRole(`button`,{name:/Remove Reading/}),c=n.getByRole(`button`,{name:/Remove Grammar/});await t(`Chips element should have aria attributes forwarded`,async()=>{T(r).toHaveAttribute(`aria-label`,`Applied skill filters`),T(i).toHaveAttribute(`aria-controls`,`results`),T(a).toHaveAttribute(`aria-controls`,`results`),T(o).toHaveAttribute(`aria-controls`,`results`),T(s).toHaveAttribute(`aria-controls`,`results`),T(c).toHaveAttribute(`aria-controls`,`results`)})}},X={args:{"aria-label":`Selected skills`,value:[`vocabulary`,`speaking`,`listening`,`reading`],items:void 0,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(h,{content:`I want to learn vocabulary`,dataset:{testid:`vocabulary-tooltip`},children:(0,w.jsx)(u,{value:`vocabulary`,children:`Vocabulary`})}),(0,w.jsx)(h,{content:`I want to improve my speaking skills`,dataset:{testid:`speaking-tooltip`},children:(0,w.jsx)(u,{value:`speaking`,children:`Speaking`})}),(0,w.jsx)(h,{content:`I want to improve my listening skills`,dataset:{testid:`listening-tooltip`},children:(0,w.jsx)(u,{value:`listening`,children:`Listening`})}),(0,w.jsx)(h,{content:`I want to improve my reading skills`,dataset:{testid:`reading-tooltip`},children:(0,w.jsx)(u,{value:`reading`,children:`Reading`})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e);await t(`Tab to the first chip`,async()=>{await O.tab(),await A(()=>{T(n.getByTestId(`vocabulary-tooltip`)).toBeVisible()})}),await t(`Arrow right to focus next chip`,async()=>{await O.keyboard(`{ArrowRight}`),await A(()=>{T(n.getByTestId(`speaking-tooltip`)).toBeVisible()})}),await t(`Hover third chip`,async()=>{await O.hover(n.getByRole(`button`,{name:/Remove Listening/})),await A(()=>{T(n.getByTestId(`listening-tooltip`)).toBeVisible()})})}},Z={tags:[`!autodocs`],parameters:{remountable:!1},args:{"aria-label":`Chips states`,value:[`rest`,`hover`,`focus`,`active`,`disabled`],items:void 0,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(u,{value:`rest`,children:`Rest`}),(0,w.jsx)(u,{value:`focus`,dsInternalSimulation:`focus`,children:`Focus`}),(0,w.jsx)(u,{value:`hover`,dsInternalSimulation:`hover`,children:`Hover`}),(0,w.jsx)(u,{value:`active`,dsInternalSimulation:`active`,children:`Active`}),(0,w.jsx)(u,{value:`disabled`,disabled:!0,children:`Disabled`})]})}},Q={parameters:{remountable:!1},decorators:[e=>(0,w.jsx)(`div`,{style:{maxWidth:150,margin:`0 auto`},children:(0,w.jsx)(e,{})})],args:{"aria-label":`Long label`,value:[`long`],items:[{value:`long`,icon:se,label:`I'm way too long to be a chip label, I don't know what to do with myself`}]}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
+`,J=[{id:1,title:`Building Your First Vocabulary List`,skills:[`vocabulary`]},{id:2,title:`Effective Speaking Practice Techniques`,skills:[`speaking`]},{id:3,title:`Active Listening Strategies`,skills:[`listening`]},{id:4,title:`Speed Reading Methods`,skills:[`reading`]},{id:5,title:`Grammar Rules Made Simple`,skills:[`grammar`]},{id:6,title:`Combining Speaking and Vocabulary`,skills:[`speaking`,`vocabulary`]},{id:7,title:`Reading Comprehension and Vocabulary Building`,skills:[`reading`,`vocabulary`]},{id:8,title:`Listening and Speaking Integration`,skills:[`listening`,`speaking`]}],Y={render:function(e){let t=[`vocabulary`,`speaking`,`listening`,`reading`,`grammar`],[n,r]=(0,C.useState)(t),i=n.length>0?J.filter(e=>n.some(t=>e.skills.includes(t))):J;return(0,w.jsxs)(p,{direction:`column`,gap:`24`,children:[(0,w.jsxs)(p,{direction:`column`,gap:`8`,children:[(0,w.jsx)(s,{tag:`h2`,variant:`large`,children:`Articles`}),(0,w.jsxs)(p,{gap:`16`,children:[(0,w.jsx)(d,{"aria-label":`Applied skill filters`,"aria-controls":`results`,value:n,onValueChange:r,items:U}),(0,w.jsx)(`div`,{children:(0,w.jsx)(l,{variant:`ghost`,onClick:()=>r(t),children:`Reset filters`})})]})]}),(0,w.jsx)(`section`,{id:`results`,"aria-label":`Filtered articles`,children:(0,w.jsx)(q,{children:i.map(e=>(0,w.jsx)(`li`,{children:(0,w.jsx)(oe,{href:`#`,children:e.title})},e.id))})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e),r=n.getByRole(`list`,{name:`Applied skill filters`}),i=n.getByRole(`button`,{name:/Remove Vocabulary/}),a=n.getByRole(`button`,{name:/Remove Speaking/}),o=n.getByRole(`button`,{name:/Remove Listening/}),s=n.getByRole(`button`,{name:/Remove Reading/}),c=n.getByRole(`button`,{name:/Remove Grammar/});await t(`Chips element should have aria attributes forwarded`,async()=>{T(r).toHaveAttribute(`aria-label`,`Applied skill filters`),T(i).toHaveAttribute(`aria-controls`,`results`),T(a).toHaveAttribute(`aria-controls`,`results`),T(o).toHaveAttribute(`aria-controls`,`results`),T(s).toHaveAttribute(`aria-controls`,`results`),T(c).toHaveAttribute(`aria-controls`,`results`)})}},X={args:{"aria-label":`Selected skills`,value:[`vocabulary`,`speaking`,`listening`,`reading`],items:void 0,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(h,{content:`I want to learn vocabulary`,dataset:{testid:`vocabulary-tooltip`},children:(0,w.jsx)(u,{value:`vocabulary`,children:`Vocabulary`})}),(0,w.jsx)(h,{content:`I want to improve my speaking skills`,dataset:{testid:`speaking-tooltip`},children:(0,w.jsx)(u,{value:`speaking`,children:`Speaking`})}),(0,w.jsx)(h,{content:`I want to improve my listening skills`,dataset:{testid:`listening-tooltip`},children:(0,w.jsx)(u,{value:`listening`,children:`Listening`})}),(0,w.jsx)(h,{content:`I want to improve my reading skills`,dataset:{testid:`reading-tooltip`},children:(0,w.jsx)(u,{value:`reading`,children:`Reading`})})]})},play:async({canvasElement:e,step:t})=>{let n=E(e);await t(`Tab to the first chip`,async()=>{await O.tab(),await A(()=>{T(n.getByTestId(`vocabulary-tooltip`)).toBeVisible()})}),await t(`Arrow right to focus next chip`,async()=>{await O.keyboard(`{ArrowRight}`),await A(()=>{T(n.getByTestId(`speaking-tooltip`)).toBeVisible()})}),await t(`Hover third chip`,async()=>{await O.hover(n.getByRole(`button`,{name:/Remove Listening/})),await A(()=>{T(n.getByTestId(`listening-tooltip`)).toBeVisible()})})}},Z={tags:[`!autodocs`],parameters:{remountable:!1,pseudo:{focusVisible:`[data-focus="true"]`,hover:`[data-hover="true"]`,active:`[data-active="true"]`}},args:{"aria-label":`Chips states`,value:[`rest`,`hover`,`focus`,`active`,`disabled`],items:void 0,children:(0,w.jsxs)(w.Fragment,{children:[(0,w.jsx)(u,{value:`rest`,children:`Rest`}),(0,w.jsx)(u,{value:`focus`,dataset:{focus:!0},children:`Focus`}),(0,w.jsx)(u,{value:`hover`,dataset:{hover:!0},children:`Hover`}),(0,w.jsx)(u,{value:`active`,dataset:{active:!0},children:`Active`}),(0,w.jsx)(u,{value:`disabled`,disabled:!0,children:`Disabled`})]})}},Q={parameters:{remountable:!1},decorators:[e=>(0,w.jsx)(`div`,{style:{maxWidth:150,margin:`0 auto`},children:(0,w.jsx)(e,{})})],args:{"aria-label":`Long label`,value:[`long`],items:[{value:`long`,icon:le,label:`I'm way too long to be a chip label, I don't know what to do with myself`}]}},M.parameters={...M.parameters,docs:{...M.parameters?.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,
@@ -581,7 +581,12 @@ This creates a smooth, efficient navigation experience - especially useful for c
 }`,...X.parameters?.docs?.source},description:{story:"If you need to wrap individual chips in a component like [\\<Tooltip/>](/docs/components-tooltip--docs),\nyou can use render `<SingleSelectChipsItem/>` as children.",...X.parameters?.docs?.description}}},Z.parameters={...Z.parameters,docs:{...Z.parameters?.docs,source:{originalSource:`{
   tags: ['!autodocs'],
   parameters: {
-    remountable: false
+    remountable: false,
+    pseudo: {
+      focusVisible: '[data-focus="true"]',
+      hover: '[data-hover="true"]',
+      active: '[data-active="true"]'
+    }
   },
   args: {
     'aria-label': 'Chips states',
@@ -589,13 +594,19 @@ This creates a smooth, efficient navigation experience - especially useful for c
     items: undefined,
     children: <>
                 <DismissibleChipsItem value="rest">Rest</DismissibleChipsItem>
-                <DismissibleChipsItem value="focus" dsInternalSimulation="focus">
+                <DismissibleChipsItem value="focus" dataset={{
+        focus: true
+      }}>
                     Focus
                 </DismissibleChipsItem>
-                <DismissibleChipsItem value="hover" dsInternalSimulation="hover">
+                <DismissibleChipsItem value="hover" dataset={{
+        hover: true
+      }}>
                     Hover
                 </DismissibleChipsItem>
-                <DismissibleChipsItem value="active" dsInternalSimulation="active">
+                <DismissibleChipsItem value="active" dataset={{
+        active: true
+      }}>
                     Active
                 </DismissibleChipsItem>
                 <DismissibleChipsItem value="disabled" disabled>

package/dist/assets/{Divider.stories-CMbQ5L3q.js → Divider.stories-r49aSANX.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Divider-By80O4iG.js";var o,s,c,l,u;t((()=>{e(n(),1),i(),o=r(),s={title:`Components/Divider`,component:a,decorators:[e=>(0,o.jsx)(`div`,{style:{padding:`24px 12px 48px`},children:(0,o.jsx)(e,{})})],argTypes:{size:{control:{type:`select`,labels:[`small`,`large`]}}}},c={args:{size:`small`}},l={args:{size:`large`}},c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Divider-Nv1279vj.js";var o,s,c,l,u;t((()=>{e(n(),1),i(),o=r(),s={title:`Components/Divider`,component:a,decorators:[e=>(0,o.jsx)(`div`,{style:{padding:`24px 12px 48px`},children:(0,o.jsx)(e,{})})],argTypes:{size:{control:{type:`select`,labels:[`small`,`large`]}}}},c={args:{size:`small`}},l={args:{size:`large`}},c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
   args: {
     size: 'small'
   }

package/dist/assets/{DocsRenderer-LL677BLK-D6wCD5Bw.js → DocsRenderer-LL677BLK-D55zMWRu.js}

@@ -1,2 +1,2 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["./react-C6B6irz5.js","./react-B8jdHdWa.js","./chunk-BneVvdWh.js","./react-C7IZe2D1.js"])))=>i.map(i=>d[i]);
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{n,t as r}from"./preload-helper-nVtPd9zc.js";import{t as i}from"./react-C7IZe2D1.js";import{i as a,l as o,n as s,r as c,t as l}from"./iframe-Ddp8AsMq.js";import{t as u}from"./client-o3HipSzo.js";function d(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f,p,m,h,g,_,v,y=t((()=>{f=e(i(),1),p=e(u(),1),m=new Map,h=({callback:e,children:t})=>{let n=f.useRef();return f.useLayoutEffect(()=>{n.current!==e&&(n.current=e,e())},[e]),t},typeof Promise.withResolvers>`u`&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}}),g=async(e,t,n)=>{let r=await v(t,n);if(d()){r.render(e);return}let{promise:i,resolve:a}=Promise.withResolvers();return r.render(f.createElement(h,{callback:a},e)),i},_=(e,t)=>{let n=m.get(e);n&&(n.unmount(),m.delete(e))},v=async(e,t)=>{let n=m.get(e);return n||(n=p.createRoot(e,t),m.set(e,n)),n}})),b,x,S,C,w=t((()=>{b=e(i(),1),y(),o(),n(),x={code:s,a:l,...a},S=class extends b.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:b.createElement(b.Fragment,null,t)}},C=class{constructor(){this.render=async(e,t,n)=>{let i={...x,...t?.components},a=c;return new Promise((o,s)=>{r(async()=>{let{MDXProvider:e}=await import(`./react-C6B6irz5.js`);return{MDXProvider:e}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:r})=>g(b.createElement(S,{showException:s,key:Math.random()},b.createElement(r,{components:i},b.createElement(a,{context:e,docsParameter:t}))),n)).then(()=>o())})},this.unmount=e=>{_(e)}}}}));t((()=>{w()}))();export{C as DocsRenderer};
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{n,t as r}from"./preload-helper-nVtPd9zc.js";import{t as i}from"./react-C7IZe2D1.js";import{i as a,l as o,n as s,r as c,t as l}from"./iframe-kBDSpxRI.js";import{t as u}from"./client-o3HipSzo.js";function d(){return globalThis.IS_REACT_ACT_ENVIRONMENT}var f,p,m,h,g,_,v,y=t((()=>{f=e(i(),1),p=e(u(),1),m=new Map,h=({callback:e,children:t})=>{let n=f.useRef();return f.useLayoutEffect(()=>{n.current!==e&&(n.current=e,e())},[e]),t},typeof Promise.withResolvers>`u`&&(Promise.withResolvers=()=>{let e=null,t=null;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}}),g=async(e,t,n)=>{let r=await v(t,n);if(d()){r.render(e);return}let{promise:i,resolve:a}=Promise.withResolvers();return r.render(f.createElement(h,{callback:a},e)),i},_=(e,t)=>{let n=m.get(e);n&&(n.unmount(),m.delete(e))},v=async(e,t)=>{let n=m.get(e);return n||(n=p.createRoot(e,t),m.set(e,n)),n}})),b,x,S,C,w=t((()=>{b=e(i(),1),y(),o(),n(),x={code:s,a:l,...a},S=class extends b.Component{constructor(){super(...arguments),this.state={hasError:!1}}static getDerivedStateFromError(){return{hasError:!0}}componentDidCatch(e){let{showException:t}=this.props;t(e)}render(){let{hasError:e}=this.state,{children:t}=this.props;return e?null:b.createElement(b.Fragment,null,t)}},C=class{constructor(){this.render=async(e,t,n)=>{let i={...x,...t?.components},a=c;return new Promise((o,s)=>{r(async()=>{let{MDXProvider:e}=await import(`./react-C6B6irz5.js`);return{MDXProvider:e}},__vite__mapDeps([0,1,2,3]),import.meta.url).then(({MDXProvider:r})=>g(b.createElement(S,{showException:s,key:Math.random()},b.createElement(r,{components:i},b.createElement(a,{context:e,docsParameter:t}))),n)).then(()=>o())})},this.unmount=e=>{_(e)}}}}));t((()=>{w()}))();export{C as DocsRenderer};

package/dist/assets/DropdownMenu-CEFQwkft.js

@@ -0,0 +1,142 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./react-dom-CLuuWI32.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{g as s,m as c}from"./iframe-kBDSpxRI.js";import{n as l,t as u}from"./dist-Cc1j9Pjk.js";import{n as d,t as f}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as ee,t as p}from"./Icon-C-oDFSRH.js";import{i as te,r as ne}from"./lib-8ue2PVWI.js";import{C as re,S as ie,T as ae,_ as oe,b as se,d as ce,f as le,g as ue,h as de,m as fe,n as pe,p as me,t as he,u as ge,v as _e,w as ve,x as ye,y as be}from"./esm-BYGpffIq.js";import{n as xe,t as Se}from"./TokyoUICheck-BxTDosuA.js";import{n as Ce,t as we}from"./VisuallyHidden-CpMYtDeS.js";import{n as Te,t as Ee}from"./useControllableState-B6dCOM10.js";import{n as De,t as Oe}from"./useBreakpointMatch-CmOkxQJ1.js";import{n as ke,t as Ae}from"./TokyoUIChevronRight-C__gngF1.js";var je,Me,Ne,Pe,Fe,Ie,Le,Re,ze,Be,Ve,He,Ue,We,m,Ge=t((()=>{je=`positioner__j1hZk`,Me=`fixedPositioner__hEvlQ`,Ne=`popup__7jGd6`,Pe=`backdrop__Z9EqO`,Fe=`item__VtEQE`,Ie=`itemLabel__QlNhp`,Le=`itemDescription__31RAx`,Re=`itemValue__GPXfq`,ze=`itemLeadingElements__NYg2u`,Be=`itemTrailingElements__yu769`,Ve=`group__BwQDL`,He=`groupLabel__-irDb`,Ue=`radioGroup__PBXnN`,We=`checkboxItemIndicator__T0zcG`,m={positioner:je,fixedPositioner:Me,popup:Ne,backdrop:Pe,"slide-in":`slide-in__6oMtr`,"slide-out":`slide-out__d8WOj`,"opacity-in":`opacity-in__E4Bk5`,"opacity-out":`opacity-out__sTrTm`,item:Fe,itemLabel:Ie,itemDescription:Le,itemValue:Re,itemLeadingElements:ze,itemTrailingElements:Be,group:Ve,groupLabel:He,radioGroup:Ue,checkboxItemIndicator:We}}));function h(e){let t=s();return(0,A.jsx)(_e,{container:t,...e})}function g(e){let t=(0,k.useContext)(N);return(0,A.jsx)(ae,{className:m.backdrop,"data-backdrop":t?`submenu`:`root`,...e})}function _(e){let t=!De(`medium-s`),n=(0,k.useContext)(N);return(0,A.jsx)(oe,{render:t?(0,A.jsx)(Ye,{}):(0,A.jsx)(`div`,{className:m.positioner}),collisionAvoidance:{side:`shift`,align:`shift`},collisionPadding:24,sideOffset:n?12:void 0,...e})}function v({dataset:e,preplyDsComponent:t,...n}){return(0,A.jsx)(be,{className:m.popup,tabIndex:0,...r(e,{preplyDsComponent:t}),...n})}function Ke({children:e,...t}){return(0,A.jsx)(se,{render:e,...t})}function y(e){return(0,A.jsx)(`div`,{className:m.itemLeadingElements,...e})}function b(e){return(0,A.jsx)(`div`,{className:m.itemTrailingElements,...e})}function x(e){return(0,A.jsx)(`span`,{className:m.itemLabel,...e})}function S(e){let t=(0,k.useContext)(Xe);return(0,A.jsx)(`span`,{className:m.itemDescription,id:t,"aria-hidden":!0,...e})}function C(e){return(0,A.jsx)(p,{svg:Ae,size:`16`,accent:`tertiary`,...e})}function w(e){return(0,A.jsx)(ye,{className:m.groupLabel,...e})}function T(e){let t=!De(`medium-s`);return(0,A.jsx)(N.Provider,{value:!0,children:(0,A.jsx)(le,{openOnHover:!t,...e})})}function E({children:e,...t}){return(0,A.jsx)(ge,{render:e,...t})}function D({children:e,...t}){return(0,A.jsx)(de,{render:e,...t})}function O(e){return(0,A.jsx)(fe,{render:(0,A.jsx)(p,{svg:Se,size:`24`}),...e})}function qe({children:e,...t}){return(0,A.jsx)(ve,{render:e,...t})}function Je(e){return(0,A.jsx)(re,{className:m.checkboxItemIndicator,keepMounted:!0,...e})}var k,A,j,M,N,Ye,Xe,P,F,I,L,Ze=t((()=>{k=e(n(),1),he(),Ge(),ke(),xe(),ee(),c(),i(),Oe(),A=o(),j=me,M=(0,k.forwardRef)(function({children:e,...t},n){return(0,A.jsx)(ce,{render:e,ref:n,...t})}),N=(0,k.createContext)(!1),Ye=(0,k.forwardRef)(function(e,t){return(0,A.jsx)(`div`,{ref:t,className:m.fixedPositioner,...e,style:void 0})}),Xe=(0,k.createContext)(``),P=(0,k.forwardRef)(function({dataset:e,render:t,...n},i){let a=(0,k.useId)(),o=pe({render:t,ref:i,defaultTagName:`div`,props:{className:m.item,"aria-describedby":a,...r(e),...n}});return(0,A.jsx)(Xe.Provider,{value:a,children:o})}),F=(0,k.forwardRef)(function(e,t){return(0,A.jsx)(`span`,{className:m.itemValue,...e,ref:t})}),I=(0,k.forwardRef)(function({dataset:e,...t},n){return(0,A.jsx)(ie,{className:m.group,...r(e),ref:n,...t})}),L=(0,k.forwardRef)(function(e,t){return(0,A.jsx)(ue,{className:m.radioGroup,ref:t,...e})});try{h.displayName=`Portal`,h.__docgenInfo={description:`Extends base-ui Menu.Portal component to use our portals slot.`,displayName:`Portal`,props:{}}}catch{}try{g.displayName=`Backdrop`,g.__docgenInfo={description:`Styled base-ui Menu.Backdrop`,displayName:`Backdrop`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{_.displayName=`Positioner`,_.__docgenInfo={description:`Extends base-ui Menu.Positioner component to use bottom sheet on mobile.`,displayName:`Positioner`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{v.displayName=`Popup`,v.__docgenInfo={description:`Styled base-ui Menu.Popup`,displayName:`Popup`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},preplyDsComponent:{defaultValue:null,description:``,name:`preplyDsComponent`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}try{Ke.displayName=`Item`,Ke.__docgenInfo={description:`Extends base-ui Menu.Item component to use children as the item element by default.`,displayName:`Item`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{y.displayName=`ItemLeadingElements`,y.__docgenInfo={description:`Container for leading elements, such as an icon, image or avatar.`,displayName:`ItemLeadingElements`,props:{}}}catch{}try{b.displayName=`ItemTrailingElements`,b.__docgenInfo={description:`Container for trailing elements, such as a value or a submenu icon.`,displayName:`ItemTrailingElements`,props:{}}}catch{}try{x.displayName=`ItemLabel`,x.__docgenInfo={description:`Item label`,displayName:`ItemLabel`,props:{}}}catch{}try{S.displayName=`ItemDescription`,S.__docgenInfo={description:`Item description`,displayName:`ItemDescription`,props:{}}}catch{}try{C.displayName=`ItemSubmenuIcon`,C.__docgenInfo={description:`Item submenu icon`,displayName:`ItemSubmenuIcon`,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:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"16"`},{value:`"24"`},{value:`"32"`},{value:`"48"`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"accentDark"`},{value:`"placeholder"`}]}},expColor:{defaultValue:null,description:"If passed along with `accent`, `accent` takes precedence.",name:`expColor`,required:!1,type:{name:`enum`,value:[{value:`"grey-0"`},{value:`"grey-50"`},{value:`"grey-100"`},{value:`"grey-200"`},{value:`"grey-300"`},{value:`"grey-400"`},{value:`"grey-500"`},{value:`"grey-600"`},{value:`"grey-700"`},{value:`"grey-800"`},{value:`"grey-900"`},{value:`"pink-50"`},{value:`"pink-100"`},{value:`"pink-200"`},{value:`"pink-300"`},{value:`"pink-400"`},{value:`"pink-500"`},{value:`"pink-600"`},{value:`"pink-700"`},{value:`"pink-800"`},{value:`"yellow-50"`},{value:`"yellow-100"`},{value:`"yellow-200"`},{value:`"yellow-300"`},{value:`"yellow-400"`},{value:`"yellow-500"`},{value:`"yellow-600"`},{value:`"yellow-700"`},{value:`"yellow-800"`},{value:`"blue-50"`},{value:`"blue-100"`},{value:`"blue-200"`},{value:`"blue-300"`},{value:`"blue-400"`},{value:`"blue-500"`},{value:`"blue-600"`},{value:`"blue-700"`},{value:`"blue-800"`},{value:`"teal-50"`},{value:`"teal-100"`},{value:`"teal-200"`},{value:`"teal-300"`},{value:`"teal-400"`},{value:`"teal-500"`},{value:`"teal-600"`},{value:`"teal-700"`},{value:`"teal-800"`},{value:`"red-50"`},{value:`"red-100"`},{value:`"red-200"`},{value:`"red-300"`},{value:`"red-400"`},{value:`"red-500"`},{value:`"red-600"`},{value:`"red-700"`},{value:`"red-800"`}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:`label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{w.displayName=`GroupLabel`,w.__docgenInfo={description:`Styled base-ui Menu.GroupLabel`,displayName:`GroupLabel`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{T.displayName=`SubmenuRoot`,T.__docgenInfo={description:`Extends base-ui Menu.SubmenuRoot to not open on hover on mobile.`,displayName:`SubmenuRoot`,props:{}}}catch{}try{E.displayName=`SubmenuTrigger`,E.__docgenInfo={description:`Extends base-ui Menu.SubmenuTrigger to use children as the trigger element by default.`,displayName:`SubmenuTrigger`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{D.displayName=`RadioItem`,D.__docgenInfo={description:``,displayName:`RadioItem`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{O.displayName=`RadioItemIndicator`,O.__docgenInfo={description:``,displayName:`RadioItemIndicator`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{qe.displayName=`CheckboxItem`,qe.__docgenInfo={description:``,displayName:`CheckboxItem`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{Je.displayName=`CheckboxItemIndicator`,Je.__docgenInfo={description:``,displayName:`CheckboxItemIndicator`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{j.displayName=`Root`,j.__docgenInfo={description:`Anatomy:
+
+<Root>
+  <Trigger />
+
+  <Portal>
+    <Backdrop />
+
+    <Positioner>
+      <Popup>
+        <Item>
+          <ItemContainer>
+            <ItemLeadingElements />
+            <ItemLabel />
+            <ItemDescription />
+            <ItemTrailingElements>
+              <ItemValue />
+              <ItemSubmenuIcon />
+            </ItemTrailingElements>
+          </ItemContainer>
+        </Item>
+
+        <Group>
+          <GroupLabel />
+          <Item />
+        </Group>
+
+        <SubmenuRoot>
+          <SubmenuTrigger>
+            <ItemContainer />
+          </SubmenuTrigger>
+          <Portal>
+            <Backdrop />
+            <Positioner>
+              <Popup />
+            </Positioner>
+          </Portal>
+        </SubmenuRoot>
+      </Popup>
+    </Positioner>
+  </Portal>
+</Root>`,displayName:`Root`,props:{}}}catch{}try{M.displayName=`Trigger`,M.__docgenInfo={description:`Extends base-ui Menu.Trigger component to use children as the trigger element by default.`,displayName:`Trigger`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{P.displayName=`ItemContainer`,P.__docgenInfo={description:`Item container.
+By default will render a div, but can be modified via \`render\` prop,
+see https://base-ui.com/react/utils/use-render`,displayName:`ItemContainer`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps, {}>`}]}}}}}catch{}try{F.displayName=`ItemValue`,F.__docgenInfo={description:`Item value`,displayName:`ItemValue`,props:{}}}catch{}try{I.displayName=`Group`,I.__docgenInfo={description:`Styled base-ui Menu.Group`,displayName:`Group`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{L.displayName=`RadioGroup`,L.__docgenInfo={description:``,displayName:`RadioGroup`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}}));function Qe({children:e,open:t,onOpenChange:n,defaultOpen:r,...i}){let[a,o]=(0,R.useState)(null),[s,c]=Te({value:t,onValueChange:n,defaultValue:r});return(0,z.jsx)(it.Provider,{value:a,children:(0,z.jsx)(at.Provider,{value:o,children:(0,z.jsx)(B.Provider,{value:c,children:(0,z.jsx)(T,{...i,open:!!s,onOpenChange:c,children:e})})})})}function $e(e){let t=(0,R.useContext)(at);return(0,z.jsx)(F,{...e,ref:t})}function et({value:e,children:t,onClick:n,...r}){let i=(0,R.useContext)(B);return(0,z.jsx)(D,{value:e,onClick:e=>{n?.(e),i(!1)},...r,children:t})}function tt({children:e}){return(0,z.jsxs)(z.Fragment,{children:[e,(0,z.jsx)(fe,{render:(t,{checked:n})=>(0,z.jsxs)(nt,{active:n,children:[(0,z.jsx)(we,{children:(0,z.jsx)(te,{id:`preply-ds.dropdown-menu.select-option-label-text`,defaultMessage:`Selected:`,description:`Hints screen reader users that following text is currently selected value`})}),` `,e]})})]})}function nt({children:e,active:t}){let n=(0,R.useContext)(it);return!t||!n?null:(0,rt.createPortal)(e,n)}var R,rt,z,it,at,B,V,H,ot=t((()=>{R=e(n(),1),he(),Ze(),rt=e(a(),1),Ce(),ne(),Ee(),z=o(),it=(0,R.createContext)(null),at=(0,R.createContext)(()=>{}),B=(0,R.createContext)(()=>{}),V=E,H=L;try{Qe.displayName=`SelectRoot`,Qe.__docgenInfo={description:`Groups parts of select menu item`,displayName:`SelectRoot`,props:{onOpenChange:{defaultValue:null,description:``,name:`onOpenChange`,required:!1,type:{name:`enum`,value:[{value:`(open: boolean) => void`}]}}}}}catch{}try{$e.displayName=`SelectValue`,$e.__docgenInfo={description:`Displays currently selected option label`,displayName:`SelectValue`,props:{}}}catch{}try{et.displayName=`SelectOptionItem`,et.__docgenInfo={description:`Select option item. Wraps RadioItem.`,displayName:`SelectOptionItem`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{tt.displayName=`SelectOptionLabelText`,tt.__docgenInfo={description:`Children of this component will be portalled into select trigger to display selected value.
+Basically, it implements same pattern as radix-ui or base-ui select's ItemText`,displayName:`SelectOptionLabelText`,props:{}}}catch{}try{V.displayName=`SelectTrigger`,V.__docgenInfo={description:``,displayName:`SelectTrigger`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}try{H.displayName=`SelectRadioGroup`,H.__docgenInfo={description:`RadioGroup for select. Manages select state.`,displayName:`SelectRadioGroup`,props:{className:{defaultValue:null,description:`CSS class applied to the element, or a function that
+returns a class based on the component’s state.`,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`},{value:`(state: State) => string`}]}},render:{defaultValue:null,description:`Allows you to replace the component’s HTML element
+with a different tag, or compose it with another component.
+
+Accepts a \`ReactElement\` or a function that returns the element to render.`,name:`render`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<Record<string, unknown>, string | JSXElementConstructor<any>>`},{value:`ComponentRenderFn<HTMLProps<any>, State>`}]}}}}}catch{}})),U,W,G,K,q,J,Y,X,Z,Q,$,st=t((()=>{U=e(n(),1),u(),Ze(),d(),ot(),W=o(),G=(0,U.forwardRef)(function({children:e,trigger:t,defaultOpen:n,dataset:r,keepMounted:i,open:a,onOpenChange:o,side:s,align:c,...u},d){return(0,W.jsxs)(j,{defaultOpen:n,open:a,onOpenChange:o,children:[(0,W.jsx)(M,{...f(u),ref:d,children:t}),(0,W.jsxs)(h,{keepMounted:i,children:[(0,W.jsx)(g,{}),(0,W.jsx)(_,{sideOffset:4,side:s,align:c,children:(0,W.jsx)(v,{dataset:r,preplyDsComponent:l.DropdownMenu,children:e})})]})]})}),K=(0,U.forwardRef)(function({label:e,description:t,leadingElement:n,disabled:r,dataset:i,onClick:a,as:o,...s},c){return(0,W.jsx)(Ke,{disabled:r,onClick:a,children:(0,W.jsxs)(P,{...f(s),dataset:i,ref:c,render:o,children:[(0,W.jsx)(y,{children:n}),(0,W.jsx)(x,{children:e}),(0,W.jsx)(S,{children:t})]})})}),q=(0,U.forwardRef)(function({children:e,label:t,description:n,leadingElement:r,dataset:i,triggerDataset:a,keepMounted:o,disabled:s,defaultOpen:c,open:u,onOpenChange:d,side:ee,align:p,...te},ne){return(0,W.jsxs)(T,{disabled:s,defaultOpen:c,open:u,onOpenChange:d,children:[(0,W.jsx)(E,{children:(0,W.jsxs)(P,{...f(te),dataset:a,ref:ne,children:[(0,W.jsx)(y,{children:r}),(0,W.jsx)(x,{children:t}),(0,W.jsx)(S,{children:n}),(0,W.jsx)(b,{children:(0,W.jsx)(C,{})})]})}),(0,W.jsxs)(h,{keepMounted:o,children:[(0,W.jsx)(g,{}),(0,W.jsx)(_,{side:ee,align:p,children:(0,W.jsx)(v,{dataset:i,preplyDsComponent:l.DropdownMenu,children:e})})]})]})}),J=(0,U.forwardRef)(function({label:e,children:t,dataset:n,...r},i){return(0,W.jsxs)(I,{...f(r),dataset:n,ref:i,children:[(0,W.jsx)(w,{children:e}),t]})}),Y=(0,U.forwardRef)(function({defaultValue:e,value:t,onValueChange:n,disabled:r,children:i,items:a,...o},s){let c=a?a.map(({value:e,...t})=>(0,W.jsx)(X,{value:e,...t},e)):i;return(0,W.jsx)(L,{defaultValue:e,value:t,onValueChange:e=>n?.(e),disabled:r,ref:s,...f(o),children:c})}),X=(0,U.forwardRef)(function({value:e,disabled:t,onClick:n,dataset:r,leadingElement:i,label:a,description:o,...s},c){return(0,W.jsx)(D,{value:e,disabled:t,onClick:n,children:(0,W.jsxs)(P,{dataset:r,ref:c,...f(s),children:[(0,W.jsx)(y,{children:i}),(0,W.jsx)(x,{children:a}),(0,W.jsx)(S,{children:o}),(0,W.jsx)(b,{children:(0,W.jsx)(O,{})})]})})}),Z=(0,U.forwardRef)(function({label:e,description:t,leadingElement:n,dataset:r,disabled:i,defaultChecked:a,checked:o,onCheckedChange:s,...c},l){return(0,W.jsx)(qe,{defaultChecked:a,checked:o,onCheckedChange:s,disabled:i,children:(0,W.jsxs)(P,{dataset:r,ref:l,...f(c),children:[(0,W.jsx)(y,{children:n}),(0,W.jsx)(x,{children:e}),(0,W.jsx)(S,{children:t}),(0,W.jsx)(b,{children:(0,W.jsx)(Je,{})})]})})}),Q=(0,U.forwardRef)(function({label:e,description:t,leadingElement:n,dataset:r,disabled:i,value:a,onClick:o,...s},c){return(0,W.jsx)(et,{value:a,disabled:i,onClick:o,children:(0,W.jsxs)(P,{dataset:r,ref:c,...f(s),children:[(0,W.jsx)(y,{children:n}),(0,W.jsx)(x,{children:(0,W.jsx)(tt,{children:e})}),(0,W.jsx)(S,{children:t}),(0,W.jsx)(b,{children:(0,W.jsx)(O,{})})]})})}),$=(0,U.forwardRef)(function({label:e,description:t,leadingElement:n,dataset:r,triggerDataset:i,value:a,defaultValue:o,onValueChange:s,disabled:c,children:u,items:d,open:ee,defaultOpen:p,onOpenChange:te,side:ne,align:re,...ie},ae){let oe=d?d.map(({value:e,...t})=>(0,W.jsx)(Q,{value:e,...t},e)):u;return(0,W.jsxs)(Qe,{disabled:c,open:ee,defaultOpen:p,onOpenChange:te,children:[(0,W.jsx)(V,{children:(0,W.jsxs)(P,{dataset:i,ref:ae,...f(ie),children:[(0,W.jsx)(y,{children:n}),(0,W.jsx)(x,{children:e}),(0,W.jsx)(S,{children:t}),(0,W.jsxs)(b,{children:[(0,W.jsx)($e,{}),(0,W.jsx)(C,{})]})]})}),(0,W.jsxs)(h,{keepMounted:!0,children:[(0,W.jsx)(g,{}),(0,W.jsx)(_,{sideOffset:12,side:ne,align:re,children:(0,W.jsx)(v,{dataset:r,preplyDsComponent:l.DropdownMenu,children:(0,W.jsx)(H,{value:a,defaultValue:o,onValueChange:s,disabled:c,children:oe})})})]})]})});try{G.displayName=`DropdownMenu`,G.__docgenInfo={description:`Dropdown menu that can be opened by clicking on the trigger element`,displayName:`DropdownMenu`,props:{defaultOpen:{defaultValue:null,description:`Whether the menu is open by default if not controlled.`,name:`defaultOpen`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},open:{defaultValue:null,description:`Whether the menu is open.`,name:`open`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onOpenChange:{defaultValue:null,description:`Callback function that is called when the menu is opened or closed.
+See https://base-ui.com/react/handbook/customization#base-ui-events`,name:`onOpenChange`,required:!1,type:{name:`enum`,value:[{value:`(open: boolean, eventDetails: ChangeEventDetails) => void`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},keepMounted:{defaultValue:null,description:`Keeps the menu content mounted even when the menu is closed.`,name:`keepMounted`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},trigger:{defaultValue:null,description:`Trigger element.`,name:`trigger`,required:!0,type:{name:`ReactElement<any, string | JSXElementConstructor<any>>`}},children:{defaultValue:null,description:`Menu content.`,name:`children`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`},{value:`ReactNode[]`}]}},side:{defaultValue:{value:`'bottom'`},description:`Which side of the anchor element to align the popup against.
+May automatically change to avoid collisions.`,name:`side`,required:!1,type:{name:`enum`,value:[{value:`"top"`},{value:`"right"`},{value:`"bottom"`},{value:`"left"`},{value:`"inline-end"`},{value:`"inline-start"`}]}},align:{defaultValue:{value:`'center'`},description:`How to align the popup relative to the specified side.`,name:`align`,required:!1,type:{name:`enum`,value:[{value:`"center"`},{value:`"start"`},{value:`"end"`}]}}}}}catch{}try{K.displayName=`DropdownMenuItem`,K.__docgenInfo={description:`Dropdown menu item`,displayName:`DropdownMenuItem`,props:{label:{defaultValue:null,description:`Menu label`,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`}]}},description:{defaultValue:null,description:`Menu description`,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`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+@example <DropdownMenuItem leadingElement={<Icon size="24" name="home" />} />
+@example <DropdownMenuItem leadingElement={<CountryFlag size="medium" code="US" />} />
+@example <DropdownMenuItem leadingElement={<Avatar size="24" />} />`,name:`leadingElement`,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`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,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>`}]}},as:{defaultValue:null,description:``,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}try{q.displayName=`DropdownSubmenu`,q.__docgenInfo={description:`Dropdown sub-menu`,displayName:`DropdownSubmenu`,props:{disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},label:{defaultValue:null,description:`Menu label`,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`}]}},description:{defaultValue:null,description:`Menu description`,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`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+@example <DropdownMenuItem leadingElement={<Icon size="24" name="home" />} />
+@example <DropdownMenuItem leadingElement={<CountryFlag size="medium" code="US" />} />
+@example <DropdownMenuItem leadingElement={<Avatar size="24" />} />`,name:`leadingElement`,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`}]}},side:{defaultValue:{value:`'bottom'`},description:`Which side of the anchor element to align the popup against.
+May automatically change to avoid collisions.`,name:`side`,required:!1,type:{name:`enum`,value:[{value:`"top"`},{value:`"right"`},{value:`"bottom"`},{value:`"left"`},{value:`"inline-end"`},{value:`"inline-start"`}]}},align:{defaultValue:{value:`'center'`},description:`How to align the popup relative to the specified side.`,name:`align`,required:!1,type:{name:`enum`,value:[{value:`"center"`},{value:`"start"`},{value:`"end"`}]}},defaultOpen:{defaultValue:null,description:`Whether the submenu is open by default if not controlled.`,name:`defaultOpen`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},open:{defaultValue:null,description:`Whether the submenu is open.`,name:`open`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onOpenChange:{defaultValue:null,description:`Callback function that is called when the submenu is opened or closed.
+See https://base-ui.com/react/handbook/customization#base-ui-events`,name:`onOpenChange`,required:!1,type:{name:`enum`,value:[{value:`(open: boolean, eventDetails: ChangeEventDetails) => void`}]}},children:{defaultValue:null,description:`Submenu content.`,name:`children`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`},{value:`ReactNode[]`}]}},triggerDataset:{defaultValue:null,description:`Dataset passed to the trigger opening the submenu.`,name:`triggerDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},keepMounted:{defaultValue:null,description:`Keeps the submenu content mounted even when the submenu is closed.`,name:`keepMounted`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}}}}}catch{}try{J.displayName=`DropdownMenuGroup`,J.__docgenInfo={description:`Dropdown menu group`,displayName:`DropdownMenuGroup`,props:{label:{defaultValue:null,description:`Group label`,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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{Y.displayName=`DropdownMenuRadioGroup`,Y.__docgenInfo={description:`Dropdown menu radio group`,displayName:`DropdownMenuRadioGroup`,props:{disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T) => void`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`DropdownMenuRadioItemProps<T>[]`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLDivElement | null) => void`},{value:`RefObject<HTMLDivElement>`}]}}}}}catch{}try{X.displayName=`DropdownMenuRadioItem`,X.__docgenInfo={description:`Dropdown menu radio item`,displayName:`DropdownMenuRadioItem`,props:{onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement>`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},label:{defaultValue:null,description:`Menu label`,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`}]}},description:{defaultValue:null,description:`Menu description`,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`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+@example <DropdownMenuItem leadingElement={<Icon size="24" name="home" />} />
+@example <DropdownMenuItem leadingElement={<CountryFlag size="medium" code="US" />} />
+@example <DropdownMenuItem leadingElement={<Avatar size="24" />} />`,name:`leadingElement`,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`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLDivElement | null) => void`},{value:`RefObject<HTMLDivElement>`}]}}}}}catch{}try{Z.displayName=`DropdownMenuCheckboxItem`,Z.__docgenInfo={description:`Dropdown menu checkbox item`,displayName:`DropdownMenuCheckboxItem`,props:{disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},label:{defaultValue:null,description:`Menu label`,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`}]}},description:{defaultValue:null,description:`Menu description`,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`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+@example <DropdownMenuItem leadingElement={<Icon size="24" name="home" />} />
+@example <DropdownMenuItem leadingElement={<CountryFlag size="medium" code="US" />} />
+@example <DropdownMenuItem leadingElement={<Avatar size="24" />} />`,name:`leadingElement`,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`}]}},defaultChecked:{defaultValue:null,description:``,name:`defaultChecked`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},checked:{defaultValue:null,description:``,name:`checked`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onCheckedChange:{defaultValue:null,description:``,name:`onCheckedChange`,required:!1,type:{name:`enum`,value:[{value:`(checked: boolean) => void`}]}}}}}catch{}try{Q.displayName=`DropdownMenuSelectOption`,Q.__docgenInfo={description:``,displayName:`DropdownMenuSelectOption`,props:{onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler<HTMLDivElement>`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},label:{defaultValue:null,description:`Menu label`,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`}]}},description:{defaultValue:null,description:`Menu description`,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`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+@example <DropdownMenuItem leadingElement={<Icon size="24" name="home" />} />
+@example <DropdownMenuItem leadingElement={<CountryFlag size="medium" code="US" />} />
+@example <DropdownMenuItem leadingElement={<Avatar size="24" />} />`,name:`leadingElement`,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`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLDivElement | null) => void`},{value:`RefObject<HTMLDivElement>`}]}}}}}catch{}try{$.displayName=`DropdownMenuSelect`,$.__docgenInfo={description:``,displayName:`DropdownMenuSelect`,props:{disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},side:{defaultValue:{value:`'bottom'`},description:`Which side of the anchor element to align the popup against.
+May automatically change to avoid collisions.`,name:`side`,required:!1,type:{name:`enum`,value:[{value:`"top"`},{value:`"right"`},{value:`"bottom"`},{value:`"left"`},{value:`"inline-end"`},{value:`"inline-start"`}]}},open:{defaultValue:null,description:`Whether the submenu is open.`,name:`open`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onOpenChange:{defaultValue:null,description:``,name:`onOpenChange`,required:!1,type:{name:`enum`,value:[{value:`(open: boolean) => void`}]}},value:{defaultValue:null,description:``,name:`value`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},defaultValue:{defaultValue:null,description:``,name:`defaultValue`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T) => void`}]}},label:{defaultValue:null,description:`Menu label`,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`}]}},description:{defaultValue:null,description:`Menu description`,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`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`DropdownMenuSelectOptionProps<T>[]`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+@example <DropdownMenuItem leadingElement={<Icon size="24" name="home" />} />
+@example <DropdownMenuItem leadingElement={<CountryFlag size="medium" code="US" />} />
+@example <DropdownMenuItem leadingElement={<Avatar size="24" />} />`,name:`leadingElement`,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`}]}},align:{defaultValue:{value:`'center'`},description:`How to align the popup relative to the specified side.`,name:`align`,required:!1,type:{name:`enum`,value:[{value:`"center"`},{value:`"start"`},{value:`"end"`}]}},defaultOpen:{defaultValue:null,description:`Whether the submenu is open by default if not controlled.`,name:`defaultOpen`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},triggerDataset:{defaultValue:null,description:`Dataset passed to the trigger opening the submenu.`,name:`triggerDataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},ref:{defaultValue:null,description:``,name:`ref`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`(instance: HTMLDivElement | null) => void`},{value:`RefObject<HTMLDivElement>`}]}}}}}catch{}}));export{Y as a,Q as c,K as i,q as l,Z as n,X as o,J as r,$ as s,G as t,st as u};

package/dist/assets/{DropdownMenu.stories-DC585dGe.js → DropdownMenu.stories-Bwd2yU64.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-DwVTLcDP.js";import{n as ee,t as o}from"./Button-a57MCiDO.js";import{n as te,t as ne}from"./OnboardingTour-CGa-836f.js";import{n as re,t as ie}from"./Avatar-C37O_UDH.js";import{n as ae,t as oe}from"./IconButton-D218WESp.js";import{n as se,t as ce}from"./CountryFlag-Coh5YEUl.js";import{n as le,t as ue}from"./Dialog-CGhOTWSt.js";import{n as de,t as fe}from"./Divider-By80O4iG.js";import{a as pe,c as s,i as c,l,n as me,o as he,r as u,s as d,t as f,u as ge}from"./DropdownMenu-C_t43Tvd.js";import{n as _e,t as ve}from"./TokyoUIMessages-DiuUQ-OO.js";import{n as ye,t as p}from"./TokyoUIEmojiFrowning-CyL90GhY.js";import{i as be,n as xe,r as Se,t as Ce}from"./TokyoUISettings-DV55jskb.js";var m,h,g,_,v,y,we,b,Te,Ee,x,S,De,Oe,C,ke,w,Ae,je,Me,Ne,Pe,Fe,Ie,T,E,D,O,k,Le,A,j,M,N,P,F,I,L,R,z,Re,ze,Be,Ve,He,Ue,B,V,We,Ge,Ke,qe,Je,Ye,Xe,Ze,H,U,Qe,W,G,K,$e,q,J,Y,X,Z,et,Q,$,tt;t((()=>{m=e(n(),1),ge(),ee(),i(),be(),_e(),se(),re(),ye(),xe(),le(),de(),ae(),te(),h=r(),{fn:g,expect:_,userEvent:v,waitFor:y,within:we}=__STORYBOOK_MODULE_TEST__,b={onOpenChange:g(),items:{transferBalance:g(),addExtraHours:g(),currency:g(),language:g()}},Te={title:`Components/DropdownMenu`,component:f,subcomponents:{DropdownMenuItem:c,DropdownMenuGroup:u,DropdownSubmenu:l,DropdownMenuRadioGroup:pe,DropdownMenuRadioItem:he,DropdownMenuCheckboxItem:me,DropdownMenuSelect:d,DropdownMenuSelectOption:s},parameters:{preventIframeFromScrollingParent:!0,layout:`fullscreen`,docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[(e,t)=>(0,h.jsx)(`div`,{style:{height:t.parameters.containerHeight||`100%`,padding:24,display:`flex`,justifyContent:`center`,alignItems:`center`},children:(0,h.jsx)(e,{})})],args:{onOpenChange:b.onOpenChange,trigger:(0,h.jsx)(o,{children:`Settings`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours})]})}},Ee={tags:[`!autodocs`,`!dev`],args:{defaultOpen:!0}},x=_.anything(),S={play:async({canvas:e,step:t,args:n})=>{await t(`Initially closed`,async()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!0,x)}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)}),await t(`Open dropdown again`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Transfer balance"`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Transfer balance`})),_(b.items.transferBalance).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(b.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},De={tags:[`!autodocs`],args:{defaultOpen:!0},play:async({canvas:e,step:t})=>{await t(`Initially open`,async()=>{await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(b.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},C={decorators:[(e,t)=>{let[n,r]=(0,m.useState)(!!t.args.open);Oe=r;let i=(e,n)=>{r(e),t.args.onOpenChange?.(e,n)};return(0,h.jsx)(e,{args:{...t.args,open:n,onOpenChange:i}})}],args:{open:!1},play:async({canvas:e,step:t,args:n})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!0,x)}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)}),await t(`Open dropdown via open prop`,async()=>{b.onOpenChange.mockClear(),Oe(!0),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).not.toHaveBeenCalled()}),await t(`Close dropdown via open prop`,async()=>{b.onOpenChange.mockClear(),Oe(!1),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).not.toHaveBeenCalled()})}},ke={...C,tags:[`!autodocs`],args:{...C.args,open:!0},play:async({canvas:e,step:t,args:n})=>{await t(`Initially open`,async()=>{await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},w={parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`,defaultOpen:!0}},Ae={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`,defaultOpen:!0}},je={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},Me={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},Ne={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Pe={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},Fe={tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Ie={tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},T={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Add extra hours"`,async()=>{b.onOpenChange.mockClear();let t=e.getByRole(`menuitem`,{name:`Add extra hours`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t),_(b.items.addExtraHours).not.toHaveBeenCalled(),_(b.onOpenChange).not.toHaveBeenCalled(),_(e.queryByRole(`menu`)).toBeVisible()})}},E={args:{trigger:(0,h.jsx)(o,{children:`Language`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Español`,description:`Spanish`}),(0,h.jsx)(c,{label:`Українська`,description:`Ukrainian`})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Language`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Verify items a11y names and descriptions`,async()=>{let t=e.getByRole(`menuitem`,{name:`Español`});_(t).toHaveAccessibleName(`Español`),_(t).toHaveAccessibleDescription(`Spanish`);let n=e.getByRole(`menuitem`,{name:`Українська`});_(n).toHaveAccessibleName(`Українська`),_(n).toHaveAccessibleDescription(`Ukrainian`)})}},D={args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(u,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]}),(0,h.jsxs)(u,{label:`Subscription`,children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`})]})]})}},O={args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`User profile`}),(0,h.jsx)(c,{label:`Payments & subscriptions`}),(0,h.jsx)(fe,{}),(0,h.jsx)(c,{label:`Logout`})]})}},k={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(u,{label:`Icons`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{svg:Se,size:`24`}),label:`Reschedule`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{svg:ve,size:`24`}),label:`Message tutor`})]}),(0,h.jsxs)(u,{label:`Flags`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ce,{code:`es`,alt:``,size:`medium`}),label:`Spain`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ce,{code:`ua`,alt:``,size:`medium`}),label:`Ukraine`})]}),(0,h.jsxs)(u,{label:`Avatars`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ie,{size:`24`}),label:`Kobe B.`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ie,{size:`24`}),label:`Jenny R.`})]})]})}},Le=(0,m.forwardRef)(function({to:e,...t},n){return(0,h.jsx)(`a`,{href:e,...t,ref:n})}),Le.displayName=`Link`,A={findATutor:g(e=>{e.preventDefault()}),becomeATutor:g(e=>{e.preventDefault()}),myLessons:g(e=>{e.preventDefault()}),referAFriend:g(e=>{e.preventDefault()})},j={args:{trigger:(0,h.jsx)(o,{children:`Links`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Find a Tutor`,onClick:A.findATutor,as:(0,h.jsx)(`a`,{href:`/en/online/english-tutors`})}),(0,h.jsx)(c,{label:`Become a Tutor`,onClick:A.becomeATutor,as:(0,h.jsx)(`a`,{href:`/en/teach`}),disabled:!0}),(0,h.jsx)(c,{label:`My Lessons`,onClick:A.myLessons,as:(0,h.jsx)(Le,{to:`/en/lessons`})}),(0,h.jsx)(c,{label:`Refer a Friend`,onClick:A.referAFriend,as:(0,h.jsx)(Le,{to:`/en/referral`}),disabled:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Assert links are rendered correctly`,async()=>{let t=e.getByRole(`menuitem`,{name:`Find a Tutor`});_(t.tagName).toBe(`A`),_(t).toHaveAttribute(`href`,`/en/online/english-tutors`);let n=e.getByRole(`menuitem`,{name:`Become a Tutor`});_(n.tagName).toBe(`A`),_(n).toHaveAttribute(`href`,`/en/teach`),_(n).toHaveAttribute(`aria-disabled`,`true`);let r=e.getByRole(`menuitem`,{name:`My Lessons`});_(r.tagName).toBe(`A`),_(r).toHaveAttribute(`href`,`/en/lessons`);let i=e.getByRole(`menuitem`,{name:`Refer a Friend`});_(i.tagName).toBe(`A`),_(i).toHaveAttribute(`href`,`/en/referral`),_(i).toHaveAttribute(`aria-disabled`,`true`)}),await t(`Click on "Find a Tutor"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Find a Tutor`});await v.click(t),_(A.findATutor).toHaveBeenCalled()}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Become a Tutor"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Become a Tutor`});await y(()=>v.click(t)),_(A.becomeATutor).not.toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "My Lessons"`,async()=>{let t=e.getByRole(`menuitem`,{name:`My Lessons`});await v.click(t),_(A.myLessons).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()})}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Refer a Friend"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Refer a Friend`});await v.click(t),_(A.referAFriend).not.toHaveBeenCalled()})}},M={dayOfTheWeek:g(),timeOfTheDay:g(),frequency:g()},N={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(u,{label:`Day of the week`,children:(0,h.jsx)(pe,{defaultValue:`mon`,onValueChange:M.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}]})}),(0,h.jsx)(u,{label:`Time of the day`,children:(0,h.jsxs)(pe,{onValueChange:M.timeOfTheDay,children:[(0,h.jsx)(he,{label:`Morning`,value:`morning`}),(0,h.jsx)(he,{label:`Afternoon`,value:`afternoon`})]})}),(0,h.jsx)(u,{label:`Frequency`,children:(0,h.jsxs)(pe,{value:`once`,onValueChange:M.frequency,disabled:!0,children:[(0,h.jsx)(he,{label:`Once`,value:`once`}),(0,h.jsx)(he,{label:`Weekly`,value:`weekly`})]})})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitemradio`,{name:`Monday`}),r=e.getByRole(`menuitemradio`,{name:`Tuesday`}),i=e.getByRole(`menuitemradio`,{name:`Saturday`});await t(`Day of the week: default value is selected`,async()=>{_(n).toHaveAttribute(`aria-checked`,`true`)}),await t(`Click on "Tuesday"`,async()=>{await v.click(r),_(M.dayOfTheWeek).toHaveBeenCalledWith(`tue`),await y(()=>{_(n).toHaveAttribute(`aria-checked`,`false`),_(r).toHaveAttribute(`aria-checked`,`true`)})}),await t(`Click on "Saturday"`,async()=>{M.dayOfTheWeek.mockClear(),await v.click(i),_(M.dayOfTheWeek).not.toHaveBeenCalled(),await y(()=>{_(r).toHaveAttribute(`aria-checked`,`true`)})});let a=e.getByRole(`menuitemradio`,{name:`Morning`}),ee=e.getByRole(`menuitemradio`,{name:`Afternoon`});await t(`Time of the day: none is selected`,async()=>{_(a).toHaveAttribute(`aria-checked`,`false`),_(ee).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Morning"`,async()=>{await v.click(a),_(M.timeOfTheDay).toHaveBeenCalledWith(`morning`),await y(()=>{_(a).toHaveAttribute(`aria-checked`,`true`)})});let o=e.getByRole(`menuitemradio`,{name:`Once`}),te=e.getByRole(`menuitemradio`,{name:`Weekly`});await t(`Frequency: everything is disabled, once is selected`,async()=>{_(o).toHaveAttribute(`aria-disabled`,`true`),_(te).toHaveAttribute(`aria-disabled`,`true`),_(o).toHaveAttribute(`aria-checked`,`true`),_(te).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Weekly"`,async()=>{await v.click(te),_(M.frequency).not.toHaveBeenCalled(),await y(()=>{_(o).toHaveAttribute(`aria-checked`,`true`)})})}},P={email:g(),sms:g(),push:g(),alerts:g()},F={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(me,{label:`Email notifications`,onCheckedChange:P.email,defaultChecked:!0}),(0,h.jsx)(me,{label:`SMS notifications`,onCheckedChange:P.sms}),(0,h.jsx)(me,{label:`Push notifications`,onCheckedChange:P.push,disabled:!0}),(0,h.jsx)(me,{label:`System alerts (required)`,onCheckedChange:P.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitemcheckbox`,{name:`Email notifications`}),r=e.getByRole(`menuitemcheckbox`,{name:`SMS notifications`}),i=e.getByRole(`menuitemcheckbox`,{name:`Push notifications`}),a=e.getByRole(`menuitemcheckbox`,{name:`System alerts (required)`});await t(`Email notifications is checked by default`,async()=>{_(n).toHaveAttribute(`aria-checked`,`true`)}),await t(`Uncheck "Email notifications"`,async()=>{await v.click(n),_(P.email).toHaveBeenCalledWith(!1,x),await y(()=>{_(n).toHaveAttribute(`aria-checked`,`false`)})}),await t(`"SMS notifications" is not checked`,async()=>{_(r).toHaveAttribute(`aria-checked`,`false`)}),await t(`Check "SMS notifications"`,async()=>{await v.click(r),_(P.sms).toHaveBeenCalledWith(!0,x),await y(()=>{_(r).toHaveAttribute(`aria-checked`,`true`)})}),await t(`"Push notifications" is disabled and not checked`,async()=>{_(i).toHaveAttribute(`aria-disabled`,`true`),_(i).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Push notifications"`,async()=>{await v.click(i),_(P.push).not.toHaveBeenCalled(),await y(()=>{_(i).toHaveAttribute(`aria-checked`,`false`)})}),await t(`"System alerts (required)" is disabled and checked`,async()=>{_(a).toHaveAttribute(`aria-disabled`,`true`),_(a).toHaveAttribute(`aria-checked`,`true`)}),await t(`Click on "System alerts (required)"`,async()=>{await v.click(a),_(P.alerts).not.toHaveBeenCalled(),await y(()=>{_(a).toHaveAttribute(`aria-checked`,`true`)})})}},I={dayOfTheWeek:g(),timeOfTheDay:g(),frequency:g()},L=e=>{let[t,n]=(0,m.useState)(`mon`),[r,i]=(0,m.useState)(),a=e=>{n(e),I.dayOfTheWeek(e)},ee=e=>{i(e),I.timeOfTheDay(e)};return(0,h.jsxs)(f,{...e,children:[(0,h.jsx)(d,{label:`Day of the week`,value:t,onValueChange:a,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}]}),(0,h.jsxs)(d,{label:`Time of the day`,defaultValue:r,onValueChange:ee,children:[(0,h.jsx)(s,{value:`morning`,label:`Morning`}),(0,h.jsx)(s,{value:`afternoon`,label:`Afternoon`})]}),(0,h.jsxs)(d,{label:`Frequency`,onValueChange:I.frequency,disabled:!0,children:[(0,h.jsx)(s,{label:`Once`,value:`once`}),(0,h.jsx)(s,{label:`Weekly`,value:`weekly`})]})]})},L.play=async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitem`,{name:/^Day of the week/});await t(`Day of the week: default value is selected`,async()=>{_(n).toHaveAccessibleName(/Selected: Monday$/)}),await t(`Open day of the week submenu`,async()=>{await v.hover(n),await y(()=>{_(e.queryByRole(`menu`,{name:/^Day of the week/})).toBeVisible()})}),await t(`Click on "Tuesday"`,async()=>{await v.click(e.getByRole(`menuitemradio`,{name:`Tuesday`})),_(I.dayOfTheWeek).toHaveBeenCalledWith(`tue`),await y(()=>{_(e.queryByRole(`menu`,{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),_(n).toHaveAccessibleName(/Selected: Tuesday$/)})});let r=e.getByRole(`menuitem`,{name:/^Time of the day/});await t(`Time of the day: nothing is selected`,async()=>{_(r).toHaveAccessibleName(`Time of the day`)}),await t(`Open time of the day submenu`,async()=>{r.focus(),await v.keyboard(` `),await y(()=>{_(e.queryByRole(`menu`,{name:/^Time of the day/})).toBeVisible()})}),await t(`Click on "Morning"`,async()=>{await v.click(e.getByRole(`menuitemradio`,{name:`Morning`})),_(I.timeOfTheDay).toHaveBeenCalledWith(`morning`),await y(()=>{_(e.queryByRole(`menu`,{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),_(r).toHaveAccessibleName(/Selected: Morning$/)})}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Frequency is disabled`,async()=>{let t=e.getByRole(`menuitem`,{name:`Frequency`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t,{pointerEventsCheck:0}),_(I.frequency).not.toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`,{name:`Frequency`,hidden:!0})).not.toBeVisible()})})},R={render:function({align:e,side:t,...n}){return(0,h.jsx)(f,{...n,defaultOpen:!0,children:(0,h.jsxs)(d,{label:`Time of the day`,side:t,align:e,defaultOpen:!0,children:[(0,h.jsx)(s,{value:`morning`,label:`Morning`}),(0,h.jsx)(s,{value:`afternoon`,label:`Afternoon`})]})})},parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`}},z={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`}},Re={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},ze={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},Be={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Ve={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},He={render:R.render,tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Ue={render:R.render,tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},B={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(l,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]}),(0,h.jsxs)(l,{label:`Subscription`,children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`})]}),(0,h.jsxs)(l,{label:`Integrations`,disabled:!0,children:[(0,h.jsx)(c,{label:`Connect calendar`}),(0,h.jsx)(c,{label:`Slack integration`}),(0,h.jsx)(c,{label:`Email sync`})]})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitem`,{name:`Region`});await t(`Region submenu opens on hover`,async()=>{await v.hover(n),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Region submenu closes on hover out`,async()=>{await v.unhover(n),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).not.toBeInTheDocument()})}),await t(`Integrations submenu is disabled`,async()=>{let t=e.getByRole(`menuitem`,{name:`Integrations`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t),await y(()=>{_(e.queryByRole(`menu`,{name:`Integrations`})).not.toBeInTheDocument()})})}},V={render:function({align:e,side:t,...n}){return(0,h.jsx)(f,{...n,defaultOpen:!0,children:(0,h.jsxs)(l,{label:`Region`,side:t,align:e,defaultOpen:!0,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]})})},parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`}},We={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`}},Ge={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},Ke={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},qe={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Je={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},Ye={render:V.render,tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Xe={render:V.render,tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},{Provider:Ze,Step:H}=ne(),Ze.displayName=`Tour.Provider`,H.displayName=`Tour.Step`,U={parameters:{docs:{source:{type:`dynamic`}}},decorators:[e=>{let[t,n]=(0,m.useState)(0);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(e,{},t),(0,h.jsx)(`div`,{style:{position:`fixed`,left:0,bottom:0,margin:8},children:(0,h.jsx)(o,{variant:`ghost`,size:`small`,onClick:()=>n(t+1),children:`Reset story`})})]})}],render:function(){let[e,t]=(0,m.useState)(!1),[n,r]=(0,m.useState)(!1),[i,a]=(0,m.useState)(!1),ee=e=>{switch(e){case 1:t(!0);return;case 3:r(!0);return;case 5:a(!0);return}},o=()=>{t(!1),r(!1),a(!1)};return(0,h.jsx)(Ze,{totalSteps:6,onStepChange:ee,onComplete:o,onClose:o,children:(0,h.jsx)(H,{step:0,title:`New settings menu`,text:`All settings are now in one place.`,children:(0,h.jsxs)(f,{open:e,onOpenChange:t,trigger:(0,h.jsx)(oe,{svg:Ce,variant:`ghost`,assistiveText:`Settings`}),children:[(0,h.jsx)(H,{step:1,title:`Transfer balance`,text:`You can now transfer your balance to another tutor.`,side:`right`,children:(0,h.jsx)(c,{label:`Transfer balance`})}),(0,h.jsx)(c,{label:`Add extra hours`}),(0,h.jsx)(H,{step:2,title:`Region`,text:`Region settings are grouped together.`,side:`top`,children:(0,h.jsxs)(l,{label:`Region`,keepMounted:!0,open:n,onOpenChange:r,children:[(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(H,{step:3,title:`Time zone`,text:`You can now select your time zone.`,side:`right`,children:(0,h.jsx)(c,{label:`Time zone`})})]})}),(0,h.jsx)(H,{step:4,title:`Currency`,text:`Currency settings moved here.`,side:`right`,children:(0,h.jsxs)(d,{open:i,onOpenChange:a,defaultValue:`USD`,label:`Currency`,children:[(0,h.jsx)(s,{value:`USD`,label:`US Dollar`}),(0,h.jsx)(s,{value:`EUR`,label:`Euro`}),(0,h.jsx)(H,{step:5,title:`New currency!`,text:`Pay and receive payments in british pounds.`,children:(0,h.jsx)(s,{value:`GBP`,label:`British Pound`})})]})})]})})})},play:async({canvas:e,step:t})=>{await t(`Tour tooltip should be visible`,async()=>{await y(()=>{_(e.getByRole(`dialog`,{name:`New settings menu`})).toBeVisible()})}),await t(`Click Next to advance to second step`,async()=>{await v.click(e.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Transfer balance`})).toBeVisible(),_(e.getByRole(`menu`)).toBeVisible()})}),await t(`Click Next to advance to third step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Transfer balance`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Region`})).toBeVisible()})}),await t(`Click Next to advance to fourth step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Region`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Time zone`})).toBeVisible(),_(e.getByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Click Next to advance to fifth step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Time zone`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Currency`})).toBeVisible()})}),await t(`Click Next to advance to the last step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Currency`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`New currency!`})).toBeVisible(),_(e.getByRole(`menu`,{name:/Currency/})).toBeVisible()})}),await v.click(e.getByRole(`button`,{name:`Reset story`}))}},Qe=e=>{if(!e)return!1;let{top:t,left:n,bottom:r,right:i}=e.getBoundingClientRect();return!(t>=window.innerHeight||r<=0||n>=window.innerWidth||i<=0)},W={args:{keepMounted:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`}),(0,h.jsxs)(l,{label:`Region`,keepMounted:!0,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]})]})},play:async({canvas:e,step:t})=>{let n=await e.findByRole(`menu`,{name:`Settings`,hidden:!0}),r=await e.findByRole(`menu`,{name:`Region`,hidden:!0});await t(`Menus are mounted, but not visible`,async()=>{_(n).toBeInTheDocument(),_(n).not.toBeVisible(),_(r).toBeInTheDocument(),_(r).not.toBeVisible()}),await t(`Open the menu`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(n).toBeVisible()})}),await t(`Submenu is visible`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(()=>{_(r).toBeVisible()})}),await t(`Close the submenu.`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(r).not.toBeVisible()}),_(r).toBeInTheDocument()}),await t(`Close the menu.`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(n).not.toBeVisible()}),_(n).toBeInTheDocument()})}},G={args:B.args,globals:{viewport:{value:`narrow-l`,isRotated:!1}},parameters:{layout:`centered`},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Region"`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(async()=>{_(Qe(e.queryByRole(`menu`,{name:`Settings`})),`Main menu should be hidden`).toBe(!1),_(Qe(e.queryByRole(`menu`,{name:`Region`})),`Submenu should be visible`).toBe(!0)})}),await t(`Tap away to return to main menu`,async()=>{let t=e.getByRole(`menu`,{name:`Region`}).closest(`[data-base-ui-portal]`).querySelector(`[data-backdrop]`);await v.click(t),await y(async()=>{_(Qe(e.queryByRole(`menu`,{name:`Region`})),`Submenu should be hidden`).toBe(!1),_(Qe(e.queryByRole(`menu`,{name:`Settings`})),`Main menu should be visible`).toBe(!0)})}),await t(`Tap away to close menu`,async()=>{await v.click(document.querySelector(`[data-backdrop]`)),await y(async()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()})})}},K={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours,disabled:!0}),(0,h.jsxs)(l,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`,onClick:b.items.currency}),(0,h.jsx)(c,{label:`Language`,onClick:b.items.language}),(0,h.jsx)(c,{label:`Time zone`})]})]})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`button`,{name:`Settings`});await t(`Focus on the trigger element`,async()=>{n.focus()}),await t(`Open the menu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Close the menu via Escape key. Trigger should be focused`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})}),await t(`Open the menu via Space key. First item should be focused`,async()=>{await v.keyboard(` `),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Select the first item via Enter key. Menu should be closed and trigger should be focused`,async()=>{await v.keyboard(`{Enter}`),_(b.items.transferBalance).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})}),await t(`Open the menu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Navigate through the menu using Arrow keys`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Add extra hours`})).toHaveFocus()}),await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()}),await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()}),await v.keyboard(`{ArrowUp}`),await v.keyboard(`{ArrowUp}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Add extra hours`})).toHaveFocus()})}),await t(`Enter key does nothing for disabled item`,async()=>{await v.keyboard(`{Enter}`),_(b.items.addExtraHours).not.toHaveBeenCalled()}),await t(`Space key does nothing for disabled item`,async()=>{await v.keyboard(` `),_(b.items.addExtraHours).not.toHaveBeenCalled()}),await t(`Navigate to submenu trigger using Arrow down key`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open the submenu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate back to main menu using Arrow left key. Submenu trigger should be focused`,async()=>{await v.keyboard(`{ArrowLeft}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open submenu using Arrow right key. First item should be focused`,async()=>{await v.keyboard(`{ArrowRight}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate back to main menu using Escape key. Submenu trigger should be focused`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open submenu using Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Close the menu via Tab key. Trigger should be focused`,async()=>{await v.keyboard(`{Tab}`),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})})}},$e={...K,globals:G.globals,parameters:G.parameters,tags:[`!autodocs`]},q={args:{defaultOpen:!0,children:(0,h.jsx)(h.Fragment,{children:Array.from({length:100}).map((e,t)=>(0,h.jsx)(c,{label:`Item ${t+1}`},t))})}},J=Array.from({length:5}).map(()=>`I won't use long labels for menu items.`).join(` `),Y={args:{defaultOpen:!0,children:(0,h.jsxs)(u,{label:J,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J}),(0,h.jsx)(l,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,children:(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J})}),(0,h.jsx)(d,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,defaultValue:`1`,children:(0,h.jsx)(s,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,value:`1`})}),(0,h.jsx)(me,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J}),(0,h.jsx)(pe,{defaultValue:`1`,children:(0,h.jsx)(he,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,value:`1`})})]})}},X={args:B.args,render:function(e){let[t,n]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(o,{onClick:()=>n(!0),children:`Open dialog`}),(0,h.jsx)(ue,{open:t,onClose:()=>n(!1),title:`Dialog`,description:void 0,children:(0,h.jsx)(f,{...e})})]})},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{await v.click(e.getByRole(`button`,{name:`Open dialog`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Dialog`})).toBeVisible()})}),await t(`Open dropdown with mouse`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).toBeVisible()})}),await t(`Open Region submenu with mouse`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Click on Currency item`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Currency`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).not.toBeInTheDocument()})}),await t(`Open dropdown with keyboard`,async()=>{e.getByRole(`button`,{name:`Settings`}).focus(),await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open Region submenu with keyboard`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate to Language item with keyboard`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Language`})).toHaveFocus()})}),await t(`Select Language item with keyboard`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).not.toBeInTheDocument()})}),await t(`Close dialog`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.queryByRole(`dialog`,{name:`Dialog`})).not.toBeInTheDocument()})})}},Z={render:function(e){let[t,n]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(f,{...e,children:(0,h.jsx)(c,{label:`Open dialog`,onClick:()=>n(!0)})}),(0,h.jsx)(ue,{title:`Dialog`,description:void 0,open:t,onClose:()=>n(!1),children:`Dialog content`})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.getByRole(`menu`)).toBeVisible()})}),await t(`Open dialog`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Open dialog`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Dialog`})).toBeVisible()})}),await t(`Close dialog`,async()=>{await v.keyboard(`{Escape}`)})}},et=()=>{let[e,t]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Open dialog`,onClick:()=>t(!0)}),(0,h.jsx)(ue,{title:`Dialog`,description:void 0,open:e,onClose:()=>t(!1),children:`Dialog content`})]})},Q={args:{keepMounted:!0,children:(0,h.jsx)(et,{})},play:Z.play},$={render:()=>(0,h.jsx)(f,{open:!0,trigger:(0,h.jsx)((0,m.forwardRef)((e,t)=>(0,h.jsx)(`button`,{...e,ref:t,children:`Button`})),{}),children:(0,h.jsxs)(pe,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours})]})})},Ee.parameters={...Ee.parameters,docs:{...Ee.parameters?.docs,source:{originalSource:`{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./Icon-C-oDFSRH.js";import{n as ee,t as o}from"./Button-DagS5hxP.js";import{n as te,t as ne}from"./OnboardingTour-RWyquFZd.js";import{n as re,t as ie}from"./Avatar-D6oXWjq1.js";import{n as ae,t as oe}from"./IconButton-Qo4r7KAR.js";import{n as se,t as ce}from"./CountryFlag-DXTijnBa.js";import{n as le,t as ue}from"./Dialog-a74MpEoC.js";import{n as de,t as fe}from"./Divider-Nv1279vj.js";import{a as pe,c as s,i as c,l,n as me,o as he,r as u,s as d,t as f,u as ge}from"./DropdownMenu-CEFQwkft.js";import{n as _e,t as ve}from"./TokyoUIMessages-BO3EETWj.js";import{n as ye,t as p}from"./TokyoUIEmojiFrowning-rSnD4TX2.js";import{i as be,n as xe,r as Se,t as Ce}from"./TokyoUISettings-DV55jskb.js";var m,h,g,_,v,y,we,b,Te,Ee,x,S,De,Oe,C,ke,w,Ae,je,Me,Ne,Pe,Fe,Ie,T,E,D,O,k,Le,A,j,M,N,P,F,I,L,R,z,Re,ze,Be,Ve,He,Ue,B,V,We,Ge,Ke,qe,Je,Ye,Xe,Ze,H,U,Qe,W,G,K,$e,q,J,Y,X,Z,et,Q,$,tt;t((()=>{m=e(n(),1),ge(),ee(),i(),be(),_e(),se(),re(),ye(),xe(),le(),de(),ae(),te(),h=r(),{fn:g,expect:_,userEvent:v,waitFor:y,within:we}=__STORYBOOK_MODULE_TEST__,b={onOpenChange:g(),items:{transferBalance:g(),addExtraHours:g(),currency:g(),language:g()}},Te={title:`Components/DropdownMenu`,component:f,subcomponents:{DropdownMenuItem:c,DropdownMenuGroup:u,DropdownSubmenu:l,DropdownMenuRadioGroup:pe,DropdownMenuRadioItem:he,DropdownMenuCheckboxItem:me,DropdownMenuSelect:d,DropdownMenuSelectOption:s},parameters:{preventIframeFromScrollingParent:!0,layout:`fullscreen`,docs:{story:{inline:!1,height:400,autoplay:!1}}},decorators:[(e,t)=>(0,h.jsx)(`div`,{style:{height:t.parameters.containerHeight||`100%`,padding:24,display:`flex`,justifyContent:`center`,alignItems:`center`},children:(0,h.jsx)(e,{})})],args:{onOpenChange:b.onOpenChange,trigger:(0,h.jsx)(o,{children:`Settings`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours})]})}},Ee={tags:[`!autodocs`,`!dev`],args:{defaultOpen:!0}},x=_.anything(),S={play:async({canvas:e,step:t,args:n})=>{await t(`Initially closed`,async()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!0,x)}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)}),await t(`Open dropdown again`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Transfer balance"`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Transfer balance`})),_(b.items.transferBalance).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(b.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},De={tags:[`!autodocs`],args:{defaultOpen:!0},play:async({canvas:e,step:t})=>{await t(`Initially open`,async()=>{await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(b.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},C={decorators:[(e,t)=>{let[n,r]=(0,m.useState)(!!t.args.open);Oe=r;let i=(e,n)=>{r(e),t.args.onOpenChange?.(e,n)};return(0,h.jsx)(e,{args:{...t.args,open:n,onOpenChange:i}})}],args:{open:!1},play:async({canvas:e,step:t,args:n})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!0,x)}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)}),await t(`Open dropdown via open prop`,async()=>{b.onOpenChange.mockClear(),Oe(!0),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()}),_(n.onOpenChange).not.toHaveBeenCalled()}),await t(`Close dropdown via open prop`,async()=>{b.onOpenChange.mockClear(),Oe(!1),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).not.toHaveBeenCalled()})}},ke={...C,tags:[`!autodocs`],args:{...C.args,open:!0},play:async({canvas:e,step:t,args:n})=>{await t(`Initially open`,async()=>{await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click outside to close the menu`,async()=>{await v.click(document.body),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()}),_(n.onOpenChange).toHaveBeenLastCalledWith(!1,x)})}},w={parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`,defaultOpen:!0}},Ae={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`,defaultOpen:!0}},je={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},Me={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},Ne={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Pe={parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},Fe={tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Ie={tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},T={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours,disabled:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Add extra hours"`,async()=>{b.onOpenChange.mockClear();let t=e.getByRole(`menuitem`,{name:`Add extra hours`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t),_(b.items.addExtraHours).not.toHaveBeenCalled(),_(b.onOpenChange).not.toHaveBeenCalled(),_(e.queryByRole(`menu`)).toBeVisible()})}},E={args:{trigger:(0,h.jsx)(o,{children:`Language`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Español`,description:`Spanish`}),(0,h.jsx)(c,{label:`Українська`,description:`Ukrainian`})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Language`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Verify items a11y names and descriptions`,async()=>{let t=e.getByRole(`menuitem`,{name:`Español`});_(t).toHaveAccessibleName(`Español`),_(t).toHaveAccessibleDescription(`Spanish`);let n=e.getByRole(`menuitem`,{name:`Українська`});_(n).toHaveAccessibleName(`Українська`),_(n).toHaveAccessibleDescription(`Ukrainian`)})}},D={args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(u,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]}),(0,h.jsxs)(u,{label:`Subscription`,children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`})]})]})}},O={args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`User profile`}),(0,h.jsx)(c,{label:`Payments & subscriptions`}),(0,h.jsx)(fe,{}),(0,h.jsx)(c,{label:`Logout`})]})}},k={parameters:{docs:{story:{height:600}}},args:{defaultOpen:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(u,{label:`Icons`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{svg:Se,size:`24`}),label:`Reschedule`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{svg:ve,size:`24`}),label:`Message tutor`})]}),(0,h.jsxs)(u,{label:`Flags`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ce,{code:`es`,alt:``,size:`medium`}),label:`Spain`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ce,{code:`ua`,alt:``,size:`medium`}),label:`Ukraine`})]}),(0,h.jsxs)(u,{label:`Avatars`,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ie,{size:`24`}),label:`Kobe B.`}),(0,h.jsx)(c,{leadingElement:(0,h.jsx)(ie,{size:`24`}),label:`Jenny R.`})]})]})}},Le=(0,m.forwardRef)(function({to:e,...t},n){return(0,h.jsx)(`a`,{href:e,...t,ref:n})}),Le.displayName=`Link`,A={findATutor:g(e=>{e.preventDefault()}),becomeATutor:g(e=>{e.preventDefault()}),myLessons:g(e=>{e.preventDefault()}),referAFriend:g(e=>{e.preventDefault()})},j={args:{trigger:(0,h.jsx)(o,{children:`Links`}),children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Find a Tutor`,onClick:A.findATutor,as:(0,h.jsx)(`a`,{href:`/en/online/english-tutors`})}),(0,h.jsx)(c,{label:`Become a Tutor`,onClick:A.becomeATutor,as:(0,h.jsx)(`a`,{href:`/en/teach`}),disabled:!0}),(0,h.jsx)(c,{label:`My Lessons`,onClick:A.myLessons,as:(0,h.jsx)(Le,{to:`/en/lessons`})}),(0,h.jsx)(c,{label:`Refer a Friend`,onClick:A.referAFriend,as:(0,h.jsx)(Le,{to:`/en/referral`}),disabled:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Assert links are rendered correctly`,async()=>{let t=e.getByRole(`menuitem`,{name:`Find a Tutor`});_(t.tagName).toBe(`A`),_(t).toHaveAttribute(`href`,`/en/online/english-tutors`);let n=e.getByRole(`menuitem`,{name:`Become a Tutor`});_(n.tagName).toBe(`A`),_(n).toHaveAttribute(`href`,`/en/teach`),_(n).toHaveAttribute(`aria-disabled`,`true`);let r=e.getByRole(`menuitem`,{name:`My Lessons`});_(r.tagName).toBe(`A`),_(r).toHaveAttribute(`href`,`/en/lessons`);let i=e.getByRole(`menuitem`,{name:`Refer a Friend`});_(i.tagName).toBe(`A`),_(i).toHaveAttribute(`href`,`/en/referral`),_(i).toHaveAttribute(`aria-disabled`,`true`)}),await t(`Click on "Find a Tutor"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Find a Tutor`});await v.click(t),_(A.findATutor).toHaveBeenCalled()}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Become a Tutor"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Become a Tutor`});await y(()=>v.click(t)),_(A.becomeATutor).not.toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "My Lessons"`,async()=>{let t=e.getByRole(`menuitem`,{name:`My Lessons`});await v.click(t),_(A.myLessons).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()})}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Links`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Refer a Friend"`,async()=>{let t=e.getByRole(`menuitem`,{name:`Refer a Friend`});await v.click(t),_(A.referAFriend).not.toHaveBeenCalled()})}},M={dayOfTheWeek:g(),timeOfTheDay:g(),frequency:g()},N={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(u,{label:`Day of the week`,children:(0,h.jsx)(pe,{defaultValue:`mon`,onValueChange:M.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}]})}),(0,h.jsx)(u,{label:`Time of the day`,children:(0,h.jsxs)(pe,{onValueChange:M.timeOfTheDay,children:[(0,h.jsx)(he,{label:`Morning`,value:`morning`}),(0,h.jsx)(he,{label:`Afternoon`,value:`afternoon`})]})}),(0,h.jsx)(u,{label:`Frequency`,children:(0,h.jsxs)(pe,{value:`once`,onValueChange:M.frequency,disabled:!0,children:[(0,h.jsx)(he,{label:`Once`,value:`once`}),(0,h.jsx)(he,{label:`Weekly`,value:`weekly`})]})})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitemradio`,{name:`Monday`}),r=e.getByRole(`menuitemradio`,{name:`Tuesday`}),i=e.getByRole(`menuitemradio`,{name:`Saturday`});await t(`Day of the week: default value is selected`,async()=>{_(n).toHaveAttribute(`aria-checked`,`true`)}),await t(`Click on "Tuesday"`,async()=>{await v.click(r),_(M.dayOfTheWeek).toHaveBeenCalledWith(`tue`),await y(()=>{_(n).toHaveAttribute(`aria-checked`,`false`),_(r).toHaveAttribute(`aria-checked`,`true`)})}),await t(`Click on "Saturday"`,async()=>{M.dayOfTheWeek.mockClear(),await v.click(i),_(M.dayOfTheWeek).not.toHaveBeenCalled(),await y(()=>{_(r).toHaveAttribute(`aria-checked`,`true`)})});let a=e.getByRole(`menuitemradio`,{name:`Morning`}),ee=e.getByRole(`menuitemradio`,{name:`Afternoon`});await t(`Time of the day: none is selected`,async()=>{_(a).toHaveAttribute(`aria-checked`,`false`),_(ee).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Morning"`,async()=>{await v.click(a),_(M.timeOfTheDay).toHaveBeenCalledWith(`morning`),await y(()=>{_(a).toHaveAttribute(`aria-checked`,`true`)})});let o=e.getByRole(`menuitemradio`,{name:`Once`}),te=e.getByRole(`menuitemradio`,{name:`Weekly`});await t(`Frequency: everything is disabled, once is selected`,async()=>{_(o).toHaveAttribute(`aria-disabled`,`true`),_(te).toHaveAttribute(`aria-disabled`,`true`),_(o).toHaveAttribute(`aria-checked`,`true`),_(te).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Weekly"`,async()=>{await v.click(te),_(M.frequency).not.toHaveBeenCalled(),await y(()=>{_(o).toHaveAttribute(`aria-checked`,`true`)})})}},P={email:g(),sms:g(),push:g(),alerts:g()},F={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(me,{label:`Email notifications`,onCheckedChange:P.email,defaultChecked:!0}),(0,h.jsx)(me,{label:`SMS notifications`,onCheckedChange:P.sms}),(0,h.jsx)(me,{label:`Push notifications`,onCheckedChange:P.push,disabled:!0}),(0,h.jsx)(me,{label:`System alerts (required)`,onCheckedChange:P.alerts,disabled:!0,checked:!0})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitemcheckbox`,{name:`Email notifications`}),r=e.getByRole(`menuitemcheckbox`,{name:`SMS notifications`}),i=e.getByRole(`menuitemcheckbox`,{name:`Push notifications`}),a=e.getByRole(`menuitemcheckbox`,{name:`System alerts (required)`});await t(`Email notifications is checked by default`,async()=>{_(n).toHaveAttribute(`aria-checked`,`true`)}),await t(`Uncheck "Email notifications"`,async()=>{await v.click(n),_(P.email).toHaveBeenCalledWith(!1,x),await y(()=>{_(n).toHaveAttribute(`aria-checked`,`false`)})}),await t(`"SMS notifications" is not checked`,async()=>{_(r).toHaveAttribute(`aria-checked`,`false`)}),await t(`Check "SMS notifications"`,async()=>{await v.click(r),_(P.sms).toHaveBeenCalledWith(!0,x),await y(()=>{_(r).toHaveAttribute(`aria-checked`,`true`)})}),await t(`"Push notifications" is disabled and not checked`,async()=>{_(i).toHaveAttribute(`aria-disabled`,`true`),_(i).toHaveAttribute(`aria-checked`,`false`)}),await t(`Click on "Push notifications"`,async()=>{await v.click(i),_(P.push).not.toHaveBeenCalled(),await y(()=>{_(i).toHaveAttribute(`aria-checked`,`false`)})}),await t(`"System alerts (required)" is disabled and checked`,async()=>{_(a).toHaveAttribute(`aria-disabled`,`true`),_(a).toHaveAttribute(`aria-checked`,`true`)}),await t(`Click on "System alerts (required)"`,async()=>{await v.click(a),_(P.alerts).not.toHaveBeenCalled(),await y(()=>{_(a).toHaveAttribute(`aria-checked`,`true`)})})}},I={dayOfTheWeek:g(),timeOfTheDay:g(),frequency:g()},L=e=>{let[t,n]=(0,m.useState)(`mon`),[r,i]=(0,m.useState)(),a=e=>{n(e),I.dayOfTheWeek(e)},ee=e=>{i(e),I.timeOfTheDay(e)};return(0,h.jsxs)(f,{...e,children:[(0,h.jsx)(d,{label:`Day of the week`,value:t,onValueChange:a,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}]}),(0,h.jsxs)(d,{label:`Time of the day`,defaultValue:r,onValueChange:ee,children:[(0,h.jsx)(s,{value:`morning`,label:`Morning`}),(0,h.jsx)(s,{value:`afternoon`,label:`Afternoon`})]}),(0,h.jsxs)(d,{label:`Frequency`,onValueChange:I.frequency,disabled:!0,children:[(0,h.jsx)(s,{label:`Once`,value:`once`}),(0,h.jsx)(s,{label:`Weekly`,value:`weekly`})]})]})},L.play=async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitem`,{name:/^Day of the week/});await t(`Day of the week: default value is selected`,async()=>{_(n).toHaveAccessibleName(/Selected: Monday$/)}),await t(`Open day of the week submenu`,async()=>{await v.hover(n),await y(()=>{_(e.queryByRole(`menu`,{name:/^Day of the week/})).toBeVisible()})}),await t(`Click on "Tuesday"`,async()=>{await v.click(e.getByRole(`menuitemradio`,{name:`Tuesday`})),_(I.dayOfTheWeek).toHaveBeenCalledWith(`tue`),await y(()=>{_(e.queryByRole(`menu`,{name:/^Day of the week/,hidden:!0})).not.toBeVisible(),_(n).toHaveAccessibleName(/Selected: Tuesday$/)})});let r=e.getByRole(`menuitem`,{name:/^Time of the day/});await t(`Time of the day: nothing is selected`,async()=>{_(r).toHaveAccessibleName(`Time of the day`)}),await t(`Open time of the day submenu`,async()=>{r.focus(),await v.keyboard(` `),await y(()=>{_(e.queryByRole(`menu`,{name:/^Time of the day/})).toBeVisible()})}),await t(`Click on "Morning"`,async()=>{await v.click(e.getByRole(`menuitemradio`,{name:`Morning`})),_(I.timeOfTheDay).toHaveBeenCalledWith(`morning`),await y(()=>{_(e.queryByRole(`menu`,{name:/^Time of the day/,hidden:!0})).not.toBeVisible(),_(r).toHaveAccessibleName(/Selected: Morning$/)})}),await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Frequency is disabled`,async()=>{let t=e.getByRole(`menuitem`,{name:`Frequency`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t,{pointerEventsCheck:0}),_(I.frequency).not.toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`,{name:`Frequency`,hidden:!0})).not.toBeVisible()})})},R={render:function({align:e,side:t,...n}){return(0,h.jsx)(f,{...n,defaultOpen:!0,children:(0,h.jsxs)(d,{label:`Time of the day`,side:t,align:e,defaultOpen:!0,children:[(0,h.jsx)(s,{value:`morning`,label:`Morning`}),(0,h.jsx)(s,{value:`afternoon`,label:`Afternoon`})]})})},parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`}},z={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`}},Re={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},ze={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},Be={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Ve={render:R.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},He={render:R.render,tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Ue={render:R.render,tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},B={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsxs)(l,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]}),(0,h.jsxs)(l,{label:`Subscription`,children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`})]}),(0,h.jsxs)(l,{label:`Integrations`,disabled:!0,children:[(0,h.jsx)(c,{label:`Connect calendar`}),(0,h.jsx)(c,{label:`Slack integration`}),(0,h.jsx)(c,{label:`Email sync`})]})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})});let n=e.getByRole(`menuitem`,{name:`Region`});await t(`Region submenu opens on hover`,async()=>{await v.hover(n),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Region submenu closes on hover out`,async()=>{await v.unhover(n),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).not.toBeInTheDocument()})}),await t(`Integrations submenu is disabled`,async()=>{let t=e.getByRole(`menuitem`,{name:`Integrations`});_(t).toHaveAttribute(`aria-disabled`,`true`),await v.click(t),await y(()=>{_(e.queryByRole(`menu`,{name:`Integrations`})).not.toBeInTheDocument()})})}},V={render:function({align:e,side:t,...n}){return(0,h.jsx)(f,{...n,defaultOpen:!0,children:(0,h.jsxs)(l,{label:`Region`,side:t,align:e,defaultOpen:!0,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]})})},parameters:{containerHeight:`500px`},args:{side:`top`,align:`start`}},We={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-end`}},Ge={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`inline-start`,defaultOpen:!0}},Ke={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`left`,defaultOpen:!0}},qe={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`right`,defaultOpen:!0}},Je={render:V.render,parameters:{containerHeight:`500px`},tags:[`!autodocs`],args:{side:`top`,defaultOpen:!0}},Ye={render:V.render,tags:[`!autodocs`],args:{align:`start`,defaultOpen:!0}},Xe={render:V.render,tags:[`!autodocs`],args:{align:`end`,defaultOpen:!0}},{Provider:Ze,Step:H}=ne(),Ze.displayName=`Tour.Provider`,H.displayName=`Tour.Step`,U={parameters:{docs:{source:{type:`dynamic`}}},decorators:[e=>{let[t,n]=(0,m.useState)(0);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(e,{},t),(0,h.jsx)(`div`,{style:{position:`fixed`,left:0,bottom:0,margin:8},children:(0,h.jsx)(o,{variant:`ghost`,size:`small`,onClick:()=>n(t+1),children:`Reset story`})})]})}],render:function(){let[e,t]=(0,m.useState)(!1),[n,r]=(0,m.useState)(!1),[i,a]=(0,m.useState)(!1),ee=e=>{switch(e){case 1:t(!0);return;case 3:r(!0);return;case 5:a(!0);return}},o=()=>{t(!1),r(!1),a(!1)};return(0,h.jsx)(Ze,{totalSteps:6,onStepChange:ee,onComplete:o,onClose:o,children:(0,h.jsx)(H,{step:0,title:`New settings menu`,text:`All settings are now in one place.`,children:(0,h.jsxs)(f,{open:e,onOpenChange:t,trigger:(0,h.jsx)(oe,{svg:Ce,variant:`ghost`,assistiveText:`Settings`}),children:[(0,h.jsx)(H,{step:1,title:`Transfer balance`,text:`You can now transfer your balance to another tutor.`,side:`right`,children:(0,h.jsx)(c,{label:`Transfer balance`})}),(0,h.jsx)(c,{label:`Add extra hours`}),(0,h.jsx)(H,{step:2,title:`Region`,text:`Region settings are grouped together.`,side:`top`,children:(0,h.jsxs)(l,{label:`Region`,keepMounted:!0,open:n,onOpenChange:r,children:[(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(H,{step:3,title:`Time zone`,text:`You can now select your time zone.`,side:`right`,children:(0,h.jsx)(c,{label:`Time zone`})})]})}),(0,h.jsx)(H,{step:4,title:`Currency`,text:`Currency settings moved here.`,side:`right`,children:(0,h.jsxs)(d,{open:i,onOpenChange:a,defaultValue:`USD`,label:`Currency`,children:[(0,h.jsx)(s,{value:`USD`,label:`US Dollar`}),(0,h.jsx)(s,{value:`EUR`,label:`Euro`}),(0,h.jsx)(H,{step:5,title:`New currency!`,text:`Pay and receive payments in british pounds.`,children:(0,h.jsx)(s,{value:`GBP`,label:`British Pound`})})]})})]})})})},play:async({canvas:e,step:t})=>{await t(`Tour tooltip should be visible`,async()=>{await y(()=>{_(e.getByRole(`dialog`,{name:`New settings menu`})).toBeVisible()})}),await t(`Click Next to advance to second step`,async()=>{await v.click(e.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Transfer balance`})).toBeVisible(),_(e.getByRole(`menu`)).toBeVisible()})}),await t(`Click Next to advance to third step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Transfer balance`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Region`})).toBeVisible()})}),await t(`Click Next to advance to fourth step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Region`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Time zone`})).toBeVisible(),_(e.getByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Click Next to advance to fifth step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Time zone`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Currency`})).toBeVisible()})}),await t(`Click Next to advance to the last step`,async()=>{let t=we(e.getByRole(`dialog`,{name:`Currency`}));await v.click(t.getByRole(`button`,{name:`Next`})),await y(()=>{_(e.getByRole(`dialog`,{name:`New currency!`})).toBeVisible(),_(e.getByRole(`menu`,{name:/Currency/})).toBeVisible()})}),await v.click(e.getByRole(`button`,{name:`Reset story`}))}},Qe=e=>{if(!e)return!1;let{top:t,left:n,bottom:r,right:i}=e.getBoundingClientRect();return!(t>=window.innerHeight||r<=0||n>=window.innerWidth||i<=0)},W={args:{keepMounted:!0,children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`}),(0,h.jsx)(c,{label:`Add extra hours`}),(0,h.jsxs)(l,{label:`Region`,keepMounted:!0,children:[(0,h.jsx)(c,{label:`Currency`}),(0,h.jsx)(c,{label:`Language`}),(0,h.jsx)(c,{label:`Time zone`})]})]})},play:async({canvas:e,step:t})=>{let n=await e.findByRole(`menu`,{name:`Settings`,hidden:!0}),r=await e.findByRole(`menu`,{name:`Region`,hidden:!0});await t(`Menus are mounted, but not visible`,async()=>{_(n).toBeInTheDocument(),_(n).not.toBeVisible(),_(r).toBeInTheDocument(),_(r).not.toBeVisible()}),await t(`Open the menu`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(n).toBeVisible()})}),await t(`Submenu is visible`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(()=>{_(r).toBeVisible()})}),await t(`Close the submenu.`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(r).not.toBeVisible()}),_(r).toBeInTheDocument()}),await t(`Close the menu.`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(n).not.toBeVisible()}),_(n).toBeInTheDocument()})}},G={args:B.args,globals:{viewport:{value:`narrow-l`,isRotated:!1}},parameters:{layout:`centered`},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible()})}),await t(`Click on "Region"`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(async()=>{_(Qe(e.queryByRole(`menu`,{name:`Settings`})),`Main menu should be hidden`).toBe(!1),_(Qe(e.queryByRole(`menu`,{name:`Region`})),`Submenu should be visible`).toBe(!0)})}),await t(`Tap away to return to main menu`,async()=>{let t=e.getByRole(`menu`,{name:`Region`}).closest(`[data-base-ui-portal]`).querySelector(`[data-backdrop]`);await v.click(t),await y(async()=>{_(Qe(e.queryByRole(`menu`,{name:`Region`})),`Submenu should be hidden`).toBe(!1),_(Qe(e.queryByRole(`menu`,{name:`Settings`})),`Main menu should be visible`).toBe(!0)})}),await t(`Tap away to close menu`,async()=>{await v.click(document.querySelector(`[data-backdrop]`)),await y(async()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument()})})}},K={args:{children:(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours,disabled:!0}),(0,h.jsxs)(l,{label:`Region`,children:[(0,h.jsx)(c,{label:`Currency`,onClick:b.items.currency}),(0,h.jsx)(c,{label:`Language`,onClick:b.items.language}),(0,h.jsx)(c,{label:`Time zone`})]})]})},play:async({canvas:e,step:t})=>{let n=e.getByRole(`button`,{name:`Settings`});await t(`Focus on the trigger element`,async()=>{n.focus()}),await t(`Open the menu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Close the menu via Escape key. Trigger should be focused`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})}),await t(`Open the menu via Space key. First item should be focused`,async()=>{await v.keyboard(` `),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Select the first item via Enter key. Menu should be closed and trigger should be focused`,async()=>{await v.keyboard(`{Enter}`),_(b.items.transferBalance).toHaveBeenCalled(),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})}),await t(`Open the menu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`)).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()})}),await t(`Navigate through the menu using Arrow keys`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Add extra hours`})).toHaveFocus()}),await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()}),await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Transfer balance`})).toHaveFocus()}),await v.keyboard(`{ArrowUp}`),await v.keyboard(`{ArrowUp}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Add extra hours`})).toHaveFocus()})}),await t(`Enter key does nothing for disabled item`,async()=>{await v.keyboard(`{Enter}`),_(b.items.addExtraHours).not.toHaveBeenCalled()}),await t(`Space key does nothing for disabled item`,async()=>{await v.keyboard(` `),_(b.items.addExtraHours).not.toHaveBeenCalled()}),await t(`Navigate to submenu trigger using Arrow down key`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open the submenu via Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate back to main menu using Arrow left key. Submenu trigger should be focused`,async()=>{await v.keyboard(`{ArrowLeft}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open submenu using Arrow right key. First item should be focused`,async()=>{await v.keyboard(`{ArrowRight}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate back to main menu using Escape key. Submenu trigger should be focused`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open submenu using Enter key. First item should be focused`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Close the menu via Tab key. Trigger should be focused`,async()=>{await v.keyboard(`{Tab}`),await y(()=>{_(e.queryByRole(`menu`)).not.toBeInTheDocument(),_(n).toHaveFocus()})})}},$e={...K,globals:G.globals,parameters:G.parameters,tags:[`!autodocs`]},q={args:{defaultOpen:!0,children:(0,h.jsx)(h.Fragment,{children:Array.from({length:100}).map((e,t)=>(0,h.jsx)(c,{label:`Item ${t+1}`},t))})}},J=Array.from({length:5}).map(()=>`I won't use long labels for menu items.`).join(` `),Y={args:{defaultOpen:!0,children:(0,h.jsxs)(u,{label:J,children:[(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J}),(0,h.jsx)(l,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,children:(0,h.jsx)(c,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J})}),(0,h.jsx)(d,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,defaultValue:`1`,children:(0,h.jsx)(s,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,value:`1`})}),(0,h.jsx)(me,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J}),(0,h.jsx)(pe,{defaultValue:`1`,children:(0,h.jsx)(he,{leadingElement:(0,h.jsx)(a,{size:`24`,svg:p}),label:J,description:J,value:`1`})})]})}},X={args:B.args,render:function(e){let[t,n]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(o,{onClick:()=>n(!0),children:`Open dialog`}),(0,h.jsx)(ue,{open:t,onClose:()=>n(!1),title:`Dialog`,description:void 0,children:(0,h.jsx)(f,{...e})})]})},play:async({canvas:e,step:t})=>{await t(`Open dialog`,async()=>{await v.click(e.getByRole(`button`,{name:`Open dialog`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Dialog`})).toBeVisible()})}),await t(`Open dropdown with mouse`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).toBeVisible()})}),await t(`Open Region submenu with mouse`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Region`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible()})}),await t(`Click on Currency item`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Currency`})),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).not.toBeInTheDocument()})}),await t(`Open dropdown with keyboard`,async()=>{e.getByRole(`button`,{name:`Settings`}).focus(),await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Region`})).toHaveFocus()})}),await t(`Open Region submenu with keyboard`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Region`})).toBeVisible(),_(e.getByRole(`menuitem`,{name:`Currency`})).toHaveFocus()})}),await t(`Navigate to Language item with keyboard`,async()=>{await v.keyboard(`{ArrowDown}`),await y(()=>{_(e.getByRole(`menuitem`,{name:`Language`})).toHaveFocus()})}),await t(`Select Language item with keyboard`,async()=>{await v.keyboard(`{Enter}`),await y(()=>{_(e.queryByRole(`menu`,{name:`Settings`})).not.toBeInTheDocument()})}),await t(`Close dialog`,async()=>{await v.keyboard(`{Escape}`),await y(()=>{_(e.queryByRole(`dialog`,{name:`Dialog`})).not.toBeInTheDocument()})})}},Z={render:function(e){let[t,n]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(f,{...e,children:(0,h.jsx)(c,{label:`Open dialog`,onClick:()=>n(!0)})}),(0,h.jsx)(ue,{title:`Dialog`,description:void 0,open:t,onClose:()=>n(!1),children:`Dialog content`})]})},play:async({canvas:e,step:t})=>{await t(`Open dropdown`,async()=>{await v.click(e.getByRole(`button`,{name:`Settings`})),await y(()=>{_(e.getByRole(`menu`)).toBeVisible()})}),await t(`Open dialog`,async()=>{await v.click(e.getByRole(`menuitem`,{name:`Open dialog`})),await y(()=>{_(e.getByRole(`dialog`,{name:`Dialog`})).toBeVisible()})}),await t(`Close dialog`,async()=>{await v.keyboard(`{Escape}`)})}},et=()=>{let[e,t]=(0,m.useState)(!1);return(0,h.jsxs)(h.Fragment,{children:[(0,h.jsx)(c,{label:`Open dialog`,onClick:()=>t(!0)}),(0,h.jsx)(ue,{title:`Dialog`,description:void 0,open:e,onClose:()=>t(!1),children:`Dialog content`})]})},Q={args:{keepMounted:!0,children:(0,h.jsx)(et,{})},play:Z.play},$={render:()=>(0,h.jsx)(f,{open:!0,trigger:(0,h.jsx)((0,m.forwardRef)((e,t)=>(0,h.jsx)(`button`,{...e,ref:t,children:`Button`})),{}),children:(0,h.jsxs)(pe,{children:[(0,h.jsx)(c,{label:`Transfer balance`,onClick:b.items.transferBalance}),(0,h.jsx)(c,{label:`Add extra hours`,onClick:b.items.addExtraHours})]})})},Ee.parameters={...Ee.parameters,docs:{...Ee.parameters?.docs,source:{originalSource:`{
   tags: ['!autodocs', '!dev'],
   args: {
     defaultOpen: true

package/dist/assets/{FieldButton-DjbyU7Ud.js → FieldButton-SkKd22gq.js}

@@ -1 +1 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,y as a}from"./dist-DtfJeYQK.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{n as s,t as c}from"./dist-Cc1j9Pjk.js";import{n as l,t as u}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var d,f,p=t((()=>{d=`FieldButton__ZIYKf`,f={FieldButton:d}})),m,h,g,_=t((()=>{c(),i(),m=e(n(),1),l(),p(),h=o(),g=(0,m.forwardRef)(function({svg:e,assistiveText:t,onClick:n,dataset:i,...o},c){let l=a(f,s.FieldButton),d=e=>{e.stopPropagation(),n?.(e)};return(0,h.jsx)(`button`,{...u(o),...r(i,{preplyDsComponent:s.FieldButton}),className:l.join(` `),title:t,onClick:d,ref:c,type:`button`,children:(0,h.jsx)(e,{"aria-hidden":`true`,focusable:`false`})})});try{g.displayName=`FieldButton`,g.__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{_ as n,g as t};
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,y as a}from"./dist-DtfJeYQK.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{n as s,t as c}from"./dist-Cc1j9Pjk.js";import{n as l,t as u}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";var d,f,p=t((()=>{d=`FieldButton__ZIYKf`,f={FieldButton:d}})),m,h,g,_=t((()=>{c(),i(),m=e(n(),1),l(),p(),h=o(),g=(0,m.forwardRef)(function({svg:e,assistiveText:t,onClick:n,dataset:i,...o},c){let l=a(f,s.FieldButton),d=e=>{e.stopPropagation(),n?.(e)};return(0,h.jsx)(`button`,{...u(o),...r(i,{preplyDsComponent:s.FieldButton}),className:l.join(` `),title:t,onClick:d,ref:c,type:`button`,children:(0,h.jsx)(e,{"aria-hidden":`true`,focusable:`false`})})});try{g.displayName=`FieldButton`,g.__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`}]}}}}}catch{}}));export{_ as n,g as t};

package/dist/assets/{FieldButton.stories-mgMXy6g8.js → FieldButton.stories-CeUnTuE8.js}

@@ -1 +1 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./FieldButton-DjbyU7Ud.js";import{n as o,t as s}from"./TokyoUILibraryExplore-BOp6jA4z.js";var c,l,u,d;t((()=>{o(),e(n(),1),i(),c=r(),l={title:`components/FieldButton`,component:a},u=()=>(0,c.jsx)(a,{svg:s,assistiveText:`Lorem Ipsum`,onClick:()=>void 0}),u.storyName=`FieldButton`,u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />`,...u.parameters?.docs?.source}}},d=[`Base`]}))();export{u as Base,d as __namedExportsOrder,l as default};
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{n as i,t as a}from"./FieldButton-SkKd22gq.js";import{n as o,t as s}from"./TokyoUILibraryExplore-BOp6jA4z.js";var c,l,u,d;t((()=>{o(),e(n(),1),i(),c=r(),l={title:`components/FieldButton`,component:a},u=()=>(0,c.jsx)(a,{svg:s,assistiveText:`Lorem Ipsum`,onClick:()=>void 0}),u.storyName=`FieldButton`,u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <FieldButton svg={LibSvg} assistiveText="Lorem Ipsum" onClick={() => undefined} />`,...u.parameters?.docs?.source}}},d=[`Base`]}))();export{u as Base,d as __namedExportsOrder,l as default};

package/dist/assets/{FormControl-N0zmQNS2.js → FormControl-C_Mh5dfi.js}

@@ -1,4 +1,4 @@
-import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{St as o,_ as s}from"./iframe-Ddp8AsMq.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{i as u,r as d}from"./lib-8ue2PVWI.js";var f,p,m,h,g,_,v=t((()=>{f=`container__g46MP`,p=`label__dGrlk`,m=`required__w9EwB`,h=`description__AST5n`,g=`error__uRqiU`,_={container:f,label:p,required:m,description:h,error:g}}));function y({id:e,error:t,description:n,hasError:r}){let i={};return r&&(i[`aria-invalid`]=!0),t&&(i[`aria-invalid`]=!0,i[`aria-errormessage`]=`${e}-error`),n&&(i[`aria-describedby`]=`${e}-description`),i}var b,x,S,C=t((()=>{s(),b=e(n(),1),v(),d(),i(),l(),x=a(),S=({id:e,label:t,hideLabel:n,description:i,error:a,hasError:s,children:l,required:d,dataset:f,onClick:p,preplyDsComponent:m=c.FormControl,useLegacyRequiredLabel:h=!1})=>{let g=(0,b.useId)(),v=e||g,S=y({id:v,error:a,description:i,hasError:s}),C=r(f,{preplyDsComponent:m});return(0,x.jsxs)(`div`,{className:_.container,...C,onClick:p,children:[(0,x.jsxs)(`label`,{htmlFor:v,className:_.label,"data-hidden":n||!t,"data-testid":`label`,children:[t,!!h&&d&&(0,x.jsxs)(`span`,{"aria-hidden":!0,className:_.required,children:[` • `,(0,x.jsx)(u,{id:`preply-ds.fieldLabel.required`,defaultMessage:`Required`,description:`Form field required label`})]}),!h&&!d&&(0,x.jsxs)(`span`,{"aria-hidden":!0,className:_.required,children:[` • `,(0,x.jsx)(u,{id:`preply-ds.fieldLabel.optional`,defaultMessage:`Optional`,description:`Form field optional label`})]})]}),(0,x.jsx)(o,{id:v,required:d,...S,children:l}),a?(0,x.jsx)(`p`,{className:_.error,role:`alert`,id:`${v}-error`,"data-testid":`error`,children:a}):i?(0,x.jsx)(`p`,{className:_.description,id:`${v}-description`,"data-testid":`description`,children:i}):null]})};try{S.displayName=`FormControl`,S.__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{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{St as o,_ as s}from"./iframe-kBDSpxRI.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{i as u,r as d}from"./lib-8ue2PVWI.js";var f,p,m,h,g,_,v=t((()=>{f=`container__g46MP`,p=`label__dGrlk`,m=`required__w9EwB`,h=`description__AST5n`,g=`error__uRqiU`,_={container:f,label:p,required:m,description:h,error:g}}));function y({id:e,error:t,description:n,hasError:r}){let i={};return r&&(i[`aria-invalid`]=!0),t&&(i[`aria-invalid`]=!0,i[`aria-errormessage`]=`${e}-error`),n&&(i[`aria-describedby`]=`${e}-description`),i}var b,x,S,C=t((()=>{s(),b=e(n(),1),v(),d(),i(),l(),x=a(),S=({id:e,label:t,hideLabel:n,description:i,error:a,hasError:s,children:l,required:d,dataset:f,onClick:p,preplyDsComponent:m=c.FormControl,useLegacyRequiredLabel:h=!1})=>{let g=(0,b.useId)(),v=e||g,S=y({id:v,error:a,description:i,hasError:s}),C=r(f,{preplyDsComponent:m});return(0,x.jsxs)(`div`,{className:_.container,...C,onClick:p,children:[(0,x.jsxs)(`label`,{htmlFor:v,className:_.label,"data-hidden":n||!t,"data-testid":`label`,children:[t,!!h&&d&&(0,x.jsxs)(`span`,{"aria-hidden":!0,className:_.required,children:[` • `,(0,x.jsx)(u,{id:`preply-ds.fieldLabel.required`,defaultMessage:`Required`,description:`Form field required label`})]}),!h&&!d&&(0,x.jsxs)(`span`,{"aria-hidden":!0,className:_.required,children:[` • `,(0,x.jsx)(u,{id:`preply-ds.fieldLabel.optional`,defaultMessage:`Optional`,description:`Form field optional label`})]})]}),(0,x.jsx)(o,{id:v,required:d,...S,children:l}),a?(0,x.jsx)(`p`,{className:_.error,role:`alert`,id:`${v}-error`,"data-testid":`error`,children:a}):i?(0,x.jsx)(`p`,{className:_.description,id:`${v}-description`,"data-testid":`description`,children:i}):null]})};try{S.displayName=`FormControl`,S.__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