@preply/ds-docs 11.4.0 → 11.5.0

package/dist/assets/{DropdownMenu-DJWxVTCB.js → DropdownMenu-L_qQlJsT.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"./react-dom-CLuuWI32.js";import{t as o}from"./jsx-runtime-C2wGStra.js";import{g as s,m as c}from"./iframe-BuOXI2w6.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-Dqr2b6tP.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-QYJ12Nr4.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
+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-Czcvpvgg.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-BItN7xKl.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-raxNxvJf.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.
 
@@ -21,7 +21,7 @@ Accepts a \`ReactElement\` or a function that returns the element to render.`,na
 @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:`"placeholder"`},{value:`"accentDark"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"inverted"`},{value:`"positive"`},{value:`"warning"`},{value:`"info"`}]}},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
+<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:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"accentDark"`}]}},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.
 
@@ -118,25 +118,25 @@ 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.
+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:`"end"`},{value:`"start"`}]}}}}}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:{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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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:{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`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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:{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`}]}},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>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+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:`"end"`},{value:`"start"`}]}},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:{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`}]}},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>`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},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:{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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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:{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`}]}},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>`}]}},value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+@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:{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`}]}},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>`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},value:{defaultValue:null,description:``,name:`value`,required:!0,type:{name:`string`}},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:{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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},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`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onValueChange:{defaultValue:null,description:``,name:`onValueChange`,required:!1,type:{name:`enum`,value:[{value:`(value: T) => void`}]}},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`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`DropdownMenuSelectOptionProps<T>[]`}]}},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"`}]}},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`}]}},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"`}]}},leadingElement:{defaultValue:null,description:`Menu leading element. Can be an icon, flag or avatar.
+@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:{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`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},disabled:{defaultValue:null,description:`Whether the menu item is disabled.`,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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"`}]}},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`}]}},items:{defaultValue:null,description:``,name:`items`,required:!1,type:{name:`enum`,value:[{value:`DropdownMenuSelectOptionProps<T>[]`}]}},open:{defaultValue:null,description:`Whether the submenu is open.`,name:`open`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},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`}]}},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};
+@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:`"end"`},{value:`"start"`}]}},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-CejSoUQc.js → DropdownMenu.stories-CS1tMRg_.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-Dqr2b6tP.js";import{n as ee,t as o}from"./Button--WTUF97E.js";import{n as te,t as ne}from"./OnboardingTour-Ba_vMjzP.js";import{n as re,t as ie}from"./Avatar-D6oXWjq1.js";import{n as ae,t as oe}from"./IconButton-CQGXuX8O.js";import{n as se,t as ce}from"./CountryFlag-D1d90EPT.js";import{n as le,t as ue}from"./Dialog-BT0Kd0KN.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-DJWxVTCB.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:`{
+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-BItN7xKl.js";import{n as ee,t as o}from"./Button-_0pS2khJ.js";import{n as te,t as ne}from"./OnboardingTour-ChdI2m_S.js";import{n as re,t as ie}from"./Avatar-D6oXWjq1.js";import{n as ae,t as oe}from"./IconButton-sZZtNos_.js";import{n as se,t as ce}from"./CountryFlag-CqhLpgul.js";import{n as le,t as ue}from"./Dialog-DJ_22m-M.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-L_qQlJsT.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/{FormControl-DoNLVcw2.js → FormControl-B3jdXz5i.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-BuOXI2w6.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-Czcvpvgg.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

package/dist/assets/{FormControl.stories-CM0O-z49.js → FormControl.stories-D7X11Qhj.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{C as r,Q as i,Y as a,et as o,t as s,w as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./Icon-Dqr2b6tP.js";import{n as f,t as p}from"./Text-Cy08WP3t.js";import{r as m,t as h}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as g,t as _}from"./FormControl-DoNLVcw2.js";import{n as v,t as y}from"./TokyoUIUpload-C6_mMWjz.js";var b,x,S,C,w,T,E,D;t((()=>{g(),m(),b=e(n(),1),u(),v(),s(),c(),f(),x=l(),S={title:`Components/FormControl`,component:_,parameters:{layout:`padded`}},C=h.input.attrs({type:`file`})`
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{C as r,Q as i,Y as a,et as o,t as s,w as c}from"./dist-DtfJeYQK.js";import{t as l}from"./jsx-runtime-C2wGStra.js";import{n as u,t as d}from"./Icon-BItN7xKl.js";import{n as f,t as p}from"./Text-BiCO96_r.js";import{r as m,t as h}from"./styled-components.browser.esm-BF2I7YPU.js";import{n as g,t as _}from"./FormControl-B3jdXz5i.js";import{n as v,t as y}from"./TokyoUIUpload-C6_mMWjz.js";var b,x,S,C,w,T,E,D;t((()=>{g(),m(),b=e(n(),1),u(),v(),s(),c(),f(),x=l(),S={title:`Components/FormControl`,component:_,parameters:{layout:`padded`}},C=h.input.attrs({type:`file`})`
     visibility: hidden;
     position: absolute;
     width: 0;

package/dist/assets/{Heading-B3jb_-J8.js → Heading-DX-HCDkx.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,x as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./text-accent-CfNKCcRq.js";import{n as f,t as p}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as m,t as h}from"./text-centered-D7Kg4Wt0.js";var g,_,v=t((()=>{g=`Heading__Erkb1`,_={Heading:g,"Heading--variant-massive":`Heading--variant-massive__JFGji`,"Heading--variant-huge":`Heading--variant-huge__47FQz`,"Heading--variant-extraLarge":`Heading--variant-extraLarge__xRrqx`,"Heading--variant-large":`Heading--variant-large__wNK6S`,"Heading--variant-medium":`Heading--variant-medium__bCNZ-`,"Heading--variant-small":`Heading--variant-small__308Nb`,"Heading--narrow-l--variant-massive":`Heading--narrow-l--variant-massive__yg4AJ`,"Heading--narrow-l--variant-huge":`Heading--narrow-l--variant-huge__y9b4N`,"Heading--narrow-l--variant-extraLarge":`Heading--narrow-l--variant-extraLarge__XgyJu`,"Heading--narrow-l--variant-large":`Heading--narrow-l--variant-large__tzTo6`,"Heading--narrow-l--variant-medium":`Heading--narrow-l--variant-medium__iP3sG`,"Heading--narrow-l--variant-small":`Heading--narrow-l--variant-small__KeKjn`,"Heading--medium-s--variant-massive":`Heading--medium-s--variant-massive__L-b4J`,"Heading--medium-s--variant-huge":`Heading--medium-s--variant-huge__2o5EA`,"Heading--medium-s--variant-extraLarge":`Heading--medium-s--variant-extraLarge__eHmYu`,"Heading--medium-s--variant-large":`Heading--medium-s--variant-large__AI3KL`,"Heading--medium-s--variant-medium":`Heading--medium-s--variant-medium__t5dUK`,"Heading--medium-s--variant-small":`Heading--medium-s--variant-small__fCdNa`,"Heading--medium-l--variant-massive":`Heading--medium-l--variant-massive__jI3FW`,"Heading--medium-l--variant-huge":`Heading--medium-l--variant-huge__k0UpW`,"Heading--medium-l--variant-extraLarge":`Heading--medium-l--variant-extraLarge__yfai7`,"Heading--medium-l--variant-large":`Heading--medium-l--variant-large__65QTG`,"Heading--medium-l--variant-medium":`Heading--medium-l--variant-medium__UvxHB`,"Heading--medium-l--variant-small":`Heading--medium-l--variant-small__QI2p2`,"Heading--wide-s--variant-massive":`Heading--wide-s--variant-massive__B1S84`,"Heading--wide-s--variant-huge":`Heading--wide-s--variant-huge__KvYrn`,"Heading--wide-s--variant-extraLarge":`Heading--wide-s--variant-extraLarge__TJs8l`,"Heading--wide-s--variant-large":`Heading--wide-s--variant-large__Wcc0E`,"Heading--wide-s--variant-medium":`Heading--wide-s--variant-medium__mONpk`,"Heading--wide-s--variant-small":`Heading--wide-s--variant-small__oRKSN`,"Heading--wide-l--variant-massive":`Heading--wide-l--variant-massive__twgw-`,"Heading--wide-l--variant-huge":`Heading--wide-l--variant-huge__DBuNF`,"Heading--wide-l--variant-extraLarge":`Heading--wide-l--variant-extraLarge__H9nEI`,"Heading--wide-l--variant-large":`Heading--wide-l--variant-large__kJarT`,"Heading--wide-l--variant-medium":`Heading--wide-l--variant-medium__VN27E`,"Heading--wide-l--variant-small":`Heading--wide-l--variant-small__Skmxk`}})),y,b,x,S=t((()=>{l(),i(),y=e(n(),1),u(),m(),f(),v(),b=s(),x=(0,y.forwardRef)(function({children:e,variant:t,accent:n,tag:i,centered:s,dataset:l,id:u,className:f,...m},g){let v=i||`h1`,y=o(_,c.Heading,a(`variant`,t)),x=h(s),S=d(!n,n),C=[...y,...x,...S,f];return(0,b.jsx)(v,{...p(m),className:C.join(` `),...r(l,{preplyDsComponent:c.Heading}),id:u,ref:g,children:e})});try{x.displayName=`Heading`,x.__docgenInfo={description:``,displayName:`Heading`,props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"accentDark"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"inverted"`},{value:`"positive"`},{value:`"warning"`},{value:`"info"`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!0,type:{name:`enum`,value:[{value:`"small"`},{value:`"large"`},{value:`"medium"`},{value:`"massive"`},{value:`"huge"`},{value:`"extraLarge"`},{value:`ResponsiveProp<HeadingVariant>`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!0,type:{name:`enum`,value:[{value:`"div"`},{value:`"h1"`},{value:`"h2"`},{value:`"h3"`},{value:`"h4"`},{value:`"h5"`},{value:`"p"`},{value:`"span"`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}}));export{S as n,x 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,x as a,y as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as u,t as d}from"./text-accent-CfNKCcRq.js";import{n as f,t as p}from"./filterAttributesPassedByRadixUIAtRuntime-CGiuUnR2.js";import{n as m,t as h}from"./text-centered-D7Kg4Wt0.js";var g,_,v=t((()=>{g=`Heading__Erkb1`,_={Heading:g,"Heading--variant-massive":`Heading--variant-massive__JFGji`,"Heading--variant-huge":`Heading--variant-huge__47FQz`,"Heading--variant-extraLarge":`Heading--variant-extraLarge__xRrqx`,"Heading--variant-large":`Heading--variant-large__wNK6S`,"Heading--variant-medium":`Heading--variant-medium__bCNZ-`,"Heading--variant-small":`Heading--variant-small__308Nb`,"Heading--narrow-l--variant-massive":`Heading--narrow-l--variant-massive__yg4AJ`,"Heading--narrow-l--variant-huge":`Heading--narrow-l--variant-huge__y9b4N`,"Heading--narrow-l--variant-extraLarge":`Heading--narrow-l--variant-extraLarge__XgyJu`,"Heading--narrow-l--variant-large":`Heading--narrow-l--variant-large__tzTo6`,"Heading--narrow-l--variant-medium":`Heading--narrow-l--variant-medium__iP3sG`,"Heading--narrow-l--variant-small":`Heading--narrow-l--variant-small__KeKjn`,"Heading--medium-s--variant-massive":`Heading--medium-s--variant-massive__L-b4J`,"Heading--medium-s--variant-huge":`Heading--medium-s--variant-huge__2o5EA`,"Heading--medium-s--variant-extraLarge":`Heading--medium-s--variant-extraLarge__eHmYu`,"Heading--medium-s--variant-large":`Heading--medium-s--variant-large__AI3KL`,"Heading--medium-s--variant-medium":`Heading--medium-s--variant-medium__t5dUK`,"Heading--medium-s--variant-small":`Heading--medium-s--variant-small__fCdNa`,"Heading--medium-l--variant-massive":`Heading--medium-l--variant-massive__jI3FW`,"Heading--medium-l--variant-huge":`Heading--medium-l--variant-huge__k0UpW`,"Heading--medium-l--variant-extraLarge":`Heading--medium-l--variant-extraLarge__yfai7`,"Heading--medium-l--variant-large":`Heading--medium-l--variant-large__65QTG`,"Heading--medium-l--variant-medium":`Heading--medium-l--variant-medium__UvxHB`,"Heading--medium-l--variant-small":`Heading--medium-l--variant-small__QI2p2`,"Heading--wide-s--variant-massive":`Heading--wide-s--variant-massive__B1S84`,"Heading--wide-s--variant-huge":`Heading--wide-s--variant-huge__KvYrn`,"Heading--wide-s--variant-extraLarge":`Heading--wide-s--variant-extraLarge__TJs8l`,"Heading--wide-s--variant-large":`Heading--wide-s--variant-large__Wcc0E`,"Heading--wide-s--variant-medium":`Heading--wide-s--variant-medium__mONpk`,"Heading--wide-s--variant-small":`Heading--wide-s--variant-small__oRKSN`,"Heading--wide-l--variant-massive":`Heading--wide-l--variant-massive__twgw-`,"Heading--wide-l--variant-huge":`Heading--wide-l--variant-huge__DBuNF`,"Heading--wide-l--variant-extraLarge":`Heading--wide-l--variant-extraLarge__H9nEI`,"Heading--wide-l--variant-large":`Heading--wide-l--variant-large__kJarT`,"Heading--wide-l--variant-medium":`Heading--wide-l--variant-medium__VN27E`,"Heading--wide-l--variant-small":`Heading--wide-l--variant-small__Skmxk`}})),y,b,x,S=t((()=>{l(),i(),y=e(n(),1),u(),m(),f(),v(),b=s(),x=(0,y.forwardRef)(function({children:e,variant:t,accent:n,tag:i,centered:s,dataset:l,id:u,className:f,...m},g){let v=i||`h1`,y=o(_,c.Heading,a(`variant`,t)),x=h(s),S=d(!n,n),C=[...y,...x,...S,f];return(0,b.jsx)(v,{...p(m),className:C.join(` `),...r(l,{preplyDsComponent:c.Heading}),id:u,ref:g,children:e})});try{x.displayName=`Heading`,x.__docgenInfo={description:``,displayName:`Heading`,props:{strong:{defaultValue:null,description:"@deprecated The appropriate `font-weight` is automatically set",name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"accentDark"`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!0,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`"massive"`},{value:`"huge"`},{value:`"extraLarge"`},{value:`ResponsiveProp<HeadingVariant>`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!0,type:{name:`enum`,value:[{value:`"div"`},{value:`"h1"`},{value:`"h2"`},{value:`"h3"`},{value:`"h4"`},{value:`"h5"`},{value:`"p"`},{value:`"span"`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}}));export{S as n,x as t};

package/dist/assets/{Heading.stories-DjrU1PaC.js → Heading.stories-DhvMfSFQ.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"./Heading-B3jb_-J8.js";import{r as o,t as s}from"./storybook-utils-BfrlMSeG.js";var c,l,u,d,f;t((()=>{e(n(),1),i(),s(),c=r(),l={title:`components/Heading`,component:a,argTypes:{centered:{description:o},variant:{description:o}}},u=()=>(0,c.jsxs)(`div`,{style:{padding:`16px`,display:`grid`,gridTemplateColumns:`auto 3fr`,alignItems:`center`,gap:`16px`},children:[(0,c.jsx)(`span`,{children:`h1 / massive`}),(0,c.jsx)(a,{tag:`h1`,variant:`massive`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h2 / huge`}),(0,c.jsx)(a,{tag:`h2`,variant:`huge`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h3 / extraLarge`}),(0,c.jsx)(a,{tag:`h3`,variant:`extraLarge`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h4 / large`}),(0,c.jsx)(a,{tag:`h4`,variant:`large`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h5 / medium`}),(0,c.jsx)(a,{tag:`h5`,variant:`medium`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`p / small`}),(0,c.jsx)(a,{tag:`p`,variant:`small`,children:`Lorem ipsum`})]}),d={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,c.jsx)(`div`,{style:{backgroundColor:t.accent===`inverted`?`black`:void 0},children:e()})],args:{tag:`h1`,variant:`massive`,children:`Lorem ipsum`,dataset:{qaid:`heading`}},argTypes:{centered:{control:`boolean`},dataset:{control:`object`},strong:{table:{disable:!0}}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <div style={{
+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"./Heading-DX-HCDkx.js";import{r as o,t as s}from"./storybook-utils-BfrlMSeG.js";var c,l,u,d,f;t((()=>{e(n(),1),i(),s(),c=r(),l={title:`components/Heading`,component:a,argTypes:{centered:{description:o},variant:{description:o}}},u=()=>(0,c.jsxs)(`div`,{style:{padding:`16px`,display:`grid`,gridTemplateColumns:`auto 3fr`,alignItems:`center`,gap:`16px`},children:[(0,c.jsx)(`span`,{children:`h1 / massive`}),(0,c.jsx)(a,{tag:`h1`,variant:`massive`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h2 / huge`}),(0,c.jsx)(a,{tag:`h2`,variant:`huge`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h3 / extraLarge`}),(0,c.jsx)(a,{tag:`h3`,variant:`extraLarge`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h4 / large`}),(0,c.jsx)(a,{tag:`h4`,variant:`large`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`h5 / medium`}),(0,c.jsx)(a,{tag:`h5`,variant:`medium`,children:`Lorem ipsum`}),(0,c.jsx)(`span`,{children:`p / small`}),(0,c.jsx)(a,{tag:`p`,variant:`small`,children:`Lorem ipsum`})]}),d={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(e,{args:t})=>(0,c.jsx)(`div`,{style:{backgroundColor:t.accent===`inverted`?`black`:void 0},children:e()})],args:{tag:`h1`,variant:`massive`,children:`Lorem ipsum`,dataset:{qaid:`heading`}},argTypes:{centered:{control:`boolean`},dataset:{control:`object`},strong:{table:{disable:!0}}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <div style={{
   padding: '16px',
   display: 'grid',
   gridTemplateColumns: 'auto 3fr',

package/dist/assets/{Icon-Dqr2b6tP.js → Icon-BItN7xKl.js}

@@ -5,4 +5,4 @@ import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2
 @example <caption>Using as react server component</caption>
 import TokyoUINotesWithPad from '@preply/ds-media-icons/dist/24/TokyoUINotesWithPad.svg';
 
-<Icon svg={<TokyoUINotesWithPad />} />`,name:`svg`,required:!0,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},size:{defaultValue:{value:`24`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"16"`},{value:`"24"`},{value:`"32"`},{value:`"48"`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"accentDark"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"critical"`},{value:`"inverted"`},{value:`"positive"`},{value:`"warning"`},{value:`"info"`}]}},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{}}));export{k as n,O as t};
+<Icon svg={<TokyoUINotesWithPad />} />`,name:`svg`,required:!0,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},size:{defaultValue:{value:`24`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"16"`},{value:`"24"`},{value:`"32"`},{value:`"48"`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"inverted"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"placeholder"`},{value:`"primary"`},{value:`"secondary"`},{value:`"accentDark"`}]}},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{}}));export{k as n,O as t};

package/dist/assets/{Icon-RSC-CIkzpnfO.js → Icon-RSC-DjKuVLz1.js}

@@ -1,4 +1,4 @@
-import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r,s as i}from"./iframe-BuOXI2w6.js";import{r as a}from"./react-B8jdHdWa.js";import{t as o}from"./mdx-react-shim-BUTq3l7l.js";import{ServerComponent as s,t as c}from"./Icon.stories-1leYoSZM.js";function l(e){let t={code:`code`,h1:`h1`,p:`p`,pre:`pre`,...a(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(r,{title:`components/Icon/Server Component`}),`
+import{n as e}from"./chunk-BneVvdWh.js";import{t}from"./jsx-runtime-C2wGStra.js";import{l as n,o as r,s as i}from"./iframe-Czcvpvgg.js";import{r as a}from"./react-B8jdHdWa.js";import{t as o}from"./mdx-react-shim-BUTq3l7l.js";import{ServerComponent as s,t as c}from"./Icon.stories-FXAqY7I2.js";function l(e){let t={code:`code`,h1:`h1`,p:`p`,pre:`pre`,...a(),...e.components};return(0,d.jsxs)(d.Fragment,{children:[(0,d.jsx)(r,{title:`components/Icon/Server Component`}),`
 `,(0,d.jsx)(t.h1,{id:`use-icon-as-react-server-component`,children:`Use Icon as react server component`}),`
 `,(0,d.jsxs)(t.p,{children:[`To use Icon as react server component, provide `,(0,d.jsx)(t.code,{children:`svg`}),` as element:`]}),`
 `,(0,d.jsx)(i,{of:s}),`

package/dist/assets/{Icon.stories-1leYoSZM.js → Icon.stories-FXAqY7I2.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{G as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./Icon-Dqr2b6tP.js";import{n as c,t as l}from"./TokyoUINotesWithPad-B6yTiv-C.js";var u,d,f,p,m,h,g,_=t((()=>{i(),c(),e(n(),1),o(),u=a(),d={title:`components/Icon`,component:s,parameters:{docs:{description:{component:`To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page).`}}}},f=()=>(0,u.jsxs)(`div`,{style:{display:`flex`,alignItems:`end`,gap:`4px`},children:[(0,u.jsx)(s,{svg:l,size:`16`}),(0,u.jsx)(s,{svg:l,size:`24`}),(0,u.jsx)(s,{svg:l,size:`32`}),(0,u.jsx)(s,{svg:l,size:`48`})]}),p=()=>(0,u.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`4px`},children:r.map(e=>(0,u.jsxs)(`div`,{style:{display:`flex`,gap:16},children:[(0,u.jsx)(s,{svg:l,expColor:e.id},e.id),(0,u.jsx)(`span`,{children:e.id})]},e.id))}),m=()=>(0,u.jsx)(s,{svg:(0,u.jsx)(l,{})}),m.tags=[`!dev`,`!autodocs`],h={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:l,dataset:{qaid:`icon`}},argTypes:{svg:{control:!1},dataset:{control:`object`},label:{control:`text`}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => <div style={{
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{G as r,w as i}from"./dist-DtfJeYQK.js";import{t as a}from"./jsx-runtime-C2wGStra.js";import{n as o,t as s}from"./Icon-BItN7xKl.js";import{n as c,t as l}from"./TokyoUINotesWithPad-B6yTiv-C.js";var u,d,f,p,m,h,g,_=t((()=>{i(),c(),e(n(),1),o(),u=a(),d={title:`components/Icon`,component:s,parameters:{docs:{description:{component:`To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page).`}}}},f=()=>(0,u.jsxs)(`div`,{style:{display:`flex`,alignItems:`end`,gap:`4px`},children:[(0,u.jsx)(s,{svg:l,size:`16`}),(0,u.jsx)(s,{svg:l,size:`24`}),(0,u.jsx)(s,{svg:l,size:`32`}),(0,u.jsx)(s,{svg:l,size:`48`})]}),p=()=>(0,u.jsx)(`div`,{style:{display:`flex`,flexDirection:`column`,gap:`4px`},children:r.map(e=>(0,u.jsxs)(`div`,{style:{display:`flex`,gap:16},children:[(0,u.jsx)(s,{svg:l,expColor:e.id},e.id),(0,u.jsx)(`span`,{children:e.id})]},e.id))}),m=()=>(0,u.jsx)(s,{svg:(0,u.jsx)(l,{})}),m.tags=[`!dev`,`!autodocs`],h={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:l,dataset:{qaid:`icon`}},argTypes:{svg:{control:!1},dataset:{control:`object`},label:{control:`text`}}},f.parameters={...f.parameters,docs:{...f.parameters?.docs,source:{originalSource:`() => <div style={{
   display: 'flex',
   alignItems: 'end',
   gap: '4px'

package/dist/assets/IconButton-sZZtNos_.js

@@ -0,0 +1,9 @@
+import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{at as r,it as i,w 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"./render-icon-CUp_n6rD.js";import{n as d,t as f}from"./ButtonBase-CMUecywM.js";var p,m,h,g,_=t((()=>{p=`bubbleCounter__IIv-p`,m=`childTargetOverlay__7xCVK`,h=`cutout__ooHoK`,g={bubbleCounter:p,"size-small":`size-small__eLF8T`,"size-medium":`size-medium__UY-G5`,"size-large":`size-large__qs1m8`,"variant-dark":`variant-dark__OzCSP`,"variant-light":`variant-light__vwrDe`,childTargetOverlay:m,cutout:h}})),v,y,b=t((()=>{v=`IconButton__sj2x5`,y={IconButton:v}})),x,S,C,w=t((()=>{a(),c(),x=e(n(),1),u(),d(),_(),b(),S=o(),C=(0,x.forwardRef)(function({variant:e=r,size:t=i,url:n,a11yLabel:a,svg:o,...c},u){let d=[y.IconButton,g.cutout].join(` `);return(0,S.jsx)(f,{...c,ref:u,className:d,isIconButton:!0,variant:e,size:t,url:n,a11yLabel:a,preplyDsComponent:s.IconButton,children:l(o,{"aria-hidden":`true`,focusable:`false`})})});try{C.displayName=`IconButton`,C.__docgenInfo={description:``,displayName:`IconButton`,props:{id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},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`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},as:{defaultValue:null,description:`Custom element to render the button.
+
+Allows rendering the button using a different React element or component.
+This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
+@example // Render as a react router link component
+import { Link } from 'react-router-dom';
+
+<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},size:{defaultValue:{value:`small`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`string`}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},variant:{defaultValue:{value:`primary`},description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"inverted"`},{value:`"critical"`},{value:`"tertiary"`},{value:`"primary"`},{value:`"secondary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
+@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},svg:{defaultValue:null,description:``,name:`svg`,required:!0,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}}));export{_ as i,w as n,g as r,C as t};

package/dist/assets/{IconTile.stories-C3MYzhR1.js → IconTile.stories-IpimMCpQ.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{a as i,i as a}from"./AlertBannerAction-DU-Yr-4k.js";import{n as o,t as s}from"./TokyoUINotesWithPad-B6yTiv-C.js";var c,l,u,d,f,p;t((()=>{o(),e(n(),1),i(),c=r(),l={title:`components/IconTile`,component:a,parameters:{docs:{description:{component:`To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page).`}}}},u=()=>(0,c.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,c.jsx)(`thead`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`th`,{children:`small`}),(0,c.jsx)(`th`,{children:`base`}),(0,c.jsx)(`th`,{children:`medium`}),(0,c.jsx)(`th`,{children:`large`})]})}),(0,c.jsx)(`tbody`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`small`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`base`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`medium`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`large`})})]})})]}),d=()=>(0,c.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,c.jsx)(`thead`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`th`,{children:`neutral`}),(0,c.jsx)(`th`,{children:`info`}),(0,c.jsx)(`th`,{children:`ai`}),(0,c.jsx)(`th`,{children:`positive`}),(0,c.jsx)(`th`,{children:`warning`}),(0,c.jsx)(`th`,{children:`critical`})]})}),(0,c.jsx)(`tbody`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`neutral`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`info`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`ai`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`positive`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`warning`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`critical`})})]})})]}),f={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:s,dataset:{qaid:`icon`}},argTypes:{svg:{control:!1},dataset:{control:`object`},label:{control:`text`}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <table style={{
+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{a as i,i as a}from"./AlertBannerAction-BYa4kXiw.js";import{n as o,t as s}from"./TokyoUINotesWithPad-B6yTiv-C.js";var c,l,u,d,f,p;t((()=>{o(),e(n(),1),i(),c=r(),l={title:`components/IconTile`,component:a,parameters:{docs:{description:{component:`To browse all available icons, visit the [Icon Explorer](/story/guides-assets-icon-explorer--page).`}}}},u=()=>(0,c.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,c.jsx)(`thead`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`th`,{children:`small`}),(0,c.jsx)(`th`,{children:`base`}),(0,c.jsx)(`th`,{children:`medium`}),(0,c.jsx)(`th`,{children:`large`})]})}),(0,c.jsx)(`tbody`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`small`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`base`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`medium`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,size:`large`})})]})})]}),d=()=>(0,c.jsxs)(`table`,{style:{borderCollapse:`separate`,borderSpacing:`16px`},children:[(0,c.jsx)(`thead`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`th`,{children:`neutral`}),(0,c.jsx)(`th`,{children:`info`}),(0,c.jsx)(`th`,{children:`ai`}),(0,c.jsx)(`th`,{children:`positive`}),(0,c.jsx)(`th`,{children:`warning`}),(0,c.jsx)(`th`,{children:`critical`})]})}),(0,c.jsx)(`tbody`,{children:(0,c.jsxs)(`tr`,{children:[(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`neutral`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`info`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`ai`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`positive`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`warning`})}),(0,c.jsx)(`td`,{children:(0,c.jsx)(a,{svg:s,tone:`critical`})})]})})]}),f={parameters:{chromatic:{disableSnapshot:!0}},args:{svg:s,dataset:{qaid:`icon`}},argTypes:{svg:{control:!1},dataset:{control:`object`},label:{control:`text`}}},u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`() => <table style={{
   borderCollapse: 'separate',
   borderSpacing: '16px'
 }}>