@preply/ds-docs 9.0.0 → 9.1.0

package/dist/assets/{30.storybook-DIp10jfK.js → 30.storybook-fiICi3pf.js}

@@ -1,4 +1,4 @@
-import{j as o,M as s}from"./iframe-C8q8wjEm.js";import{useMDXComponents as t}from"./index-BPdSA514.js";import"./preload-helper-Dp1pzeXC.js";function n(r){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...t(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(s,{title:"Guides/Installation/Storybook"}),`
+import{j as o,M as s}from"./iframe-CpMEswOF.js";import{useMDXComponents as t}from"./index-Cc28ZUNU.js";import"./preload-helper-Dp1pzeXC.js";function n(r){const e={a:"a",code:"code",h1:"h1",h2:"h2",p:"p",pre:"pre",...t(),...r.components};return o.jsxs(o.Fragment,{children:[o.jsx(s,{title:"Guides/Installation/Storybook"}),`
 `,o.jsx(e.h1,{id:"installation-storybook",children:"Installation: Storybook"}),`
 `,o.jsxs(e.p,{children:["This guide applies to Storybook setups that document Preply components libraries, and assumes you have read and followed the steps outlined in the ",o.jsx(e.a,{href:"/story/guides-installation-libraries--page",children:"Installation: Libaries"})," guide."]}),`
 `,o.jsx(e.h2,{id:"packages",children:"Packages"}),`

package/dist/assets/{40.illustrations.explorer-D23bTPy_.js → 40.illustrations.explorer-BAusB8PF.js}

@@ -1,4 +1,4 @@
-import{j as t,M as a}from"./iframe-C8q8wjEm.js";import{useMDXComponents as r}from"./index-BPdSA514.js";import{L as c}from"./LayoutGrid-DxGs2sRc.js";import{d as e}from"./styled-components.browser.esm-BYN4S5sO.js";import{g as i}from"./getTokenVar-B4d49odp.js";import{s as u,c as l}from"./tokens-CQefoo5n.js";import"./preload-helper-Dp1pzeXC.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-1z75aSwo-DgGwh4VK.js";import"./constants-DYYVurUY.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./componentNames-Dts5uwdK.js";import"./emotion-unitless.esm-BZwEwAnk.js";const n=["https://static.preply.com/ds/illustrations/tokyo-ui/airplain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/arrow.svg","https://static.preply.com/ds/illustrations/tokyo-ui/arrows-multiple.svg","https://static.preply.com/ds/illustrations/tokyo-ui/arrows-upwards.svg","https://static.preply.com/ds/illustrations/tokyo-ui/artist.svg","https://static.preply.com/ds/illustrations/tokyo-ui/awesome.svg","https://static.preply.com/ds/illustrations/tokyo-ui/back-to-school.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bar-graph.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bell.svg","https://static.preply.com/ds/illustrations/tokyo-ui/booking-a-lesson.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books-3.svg","https://static.preply.com/ds/illustrations/tokyo-ui/brain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-chromium.svg","https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-safari.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bubbles.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/checkmark.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clock.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clock-yellow.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clocks.svg","https://static.preply.com/ds/illustrations/tokyo-ui/coins.svg","https://static.preply.com/ds/illustrations/tokyo-ui/committed.svg","https://static.preply.com/ds/illustrations/tokyo-ui/confetti.svg","https://static.preply.com/ds/illustrations/tokyo-ui/cosmopolite.svg","https://static.preply.com/ds/illustrations/tokyo-ui/desk.svg","https://static.preply.com/ds/illustrations/tokyo-ui/desk-supplies.svg","https://static.preply.com/ds/illustrations/tokyo-ui/discount-badge.svg","https://static.preply.com/ds/illustrations/tokyo-ui/disco-ball.svg","https://static.preply.com/ds/illustrations/tokyo-ui/dog.svg","https://static.preply.com/ds/illustrations/tokyo-ui/first-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/game-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started-down.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started.svg","https://static.preply.com/ds/illustrations/tokyo-ui/globe-spot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/great-homework.svg","https://static.preply.com/ds/illustrations/tokyo-ui/growth.svg","https://static.preply.com/ds/illustrations/tokyo-ui/guitar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-1.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/heart.svg","https://static.preply.com/ds/illustrations/tokyo-ui/it-guru.svg","https://static.preply.com/ds/illustrations/tokyo-ui/lamp-and-books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/language-flash-cards.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/magnifying-glass.svg","https://static.preply.com/ds/illustrations/tokyo-ui/making-progress.svg","https://static.preply.com/ds/illustrations/tokyo-ui/map.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messages.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messaging.svg","https://static.preply.com/ds/illustrations/tokyo-ui/mobile-app.svg","https://static.preply.com/ds/illustrations/tokyo-ui/notes.svg","https://static.preply.com/ds/illustrations/tokyo-ui/open-book.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pause-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pig.svg","https://static.preply.com/ds/illustrations/tokyo-ui/play-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-pink.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/present.svg","https://static.preply.com/ds/illustrations/tokyo-ui/professional.svg","https://static.preply.com/ds/illustrations/tokyo-ui/progress-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/quote.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rising-arrows.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rock-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/routine-master.svg","https://static.preply.com/ds/illustrations/tokyo-ui/serious-learner.svg","https://static.preply.com/ds/illustrations/tokyo-ui/sheet.svg","https://static.preply.com/ds/illustrations/tokyo-ui/smiley.svg","https://static.preply.com/ds/illustrations/tokyo-ui/speech-bubble.svg","https://static.preply.com/ds/illustrations/tokyo-ui/star_coin.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stop-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stopwatch.svg","https://static.preply.com/ds/illustrations/tokyo-ui/system-permissions.svg","https://static.preply.com/ds/illustrations/tokyo-ui/testing-the-water.svg","https://static.preply.com/ds/illustrations/tokyo-ui/three-arrows.svg","https://static.preply.com/ds/illustrations/tokyo-ui/thumbs-up.svg","https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg","https://static.preply.com/ds/illustrations/tokyo-ui/warning.svg","https://static.preply.com/ds/illustrations/tokyo-ui/flashcards.svg"],y=e.div`
+import{j as t,M as a}from"./iframe-CpMEswOF.js";import{useMDXComponents as r}from"./index-Cc28ZUNU.js";import{L as c}from"./LayoutGrid-DfyCnoOo.js";import{d as e}from"./styled-components.browser.esm-Cm3dhVk9.js";import{g as i}from"./getTokenVar-DntuTYid.js";import{s as u,c as l}from"./tokens-DTCyqZ0W.js";import"./preload-helper-Dp1pzeXC.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-1z75aSwo-B4ha7m6U.js";import"./constants-DYYVurUY.js";import"./filterAttributesPassedByRadixUIAtRuntime-Bye2JkZ0.js";import"./componentNames-hc9KR2nX.js";import"./emotion-unitless.esm-BZwEwAnk.js";const n=["https://static.preply.com/ds/illustrations/tokyo-ui/airplain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/arrow.svg","https://static.preply.com/ds/illustrations/tokyo-ui/arrows-multiple.svg","https://static.preply.com/ds/illustrations/tokyo-ui/arrows-upwards.svg","https://static.preply.com/ds/illustrations/tokyo-ui/artist.svg","https://static.preply.com/ds/illustrations/tokyo-ui/awesome.svg","https://static.preply.com/ds/illustrations/tokyo-ui/back-to-school.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bar-graph.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bell.svg","https://static.preply.com/ds/illustrations/tokyo-ui/booking-a-lesson.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/books-3.svg","https://static.preply.com/ds/illustrations/tokyo-ui/brain.svg","https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-chromium.svg","https://static.preply.com/ds/illustrations/tokyo-ui/browser-permissions-safari.svg","https://static.preply.com/ds/illustrations/tokyo-ui/bubbles.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/calendar-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/checkmark.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clock.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clock-yellow.svg","https://static.preply.com/ds/illustrations/tokyo-ui/clocks.svg","https://static.preply.com/ds/illustrations/tokyo-ui/coins.svg","https://static.preply.com/ds/illustrations/tokyo-ui/committed.svg","https://static.preply.com/ds/illustrations/tokyo-ui/confetti.svg","https://static.preply.com/ds/illustrations/tokyo-ui/cosmopolite.svg","https://static.preply.com/ds/illustrations/tokyo-ui/desk.svg","https://static.preply.com/ds/illustrations/tokyo-ui/desk-supplies.svg","https://static.preply.com/ds/illustrations/tokyo-ui/discount-badge.svg","https://static.preply.com/ds/illustrations/tokyo-ui/disco-ball.svg","https://static.preply.com/ds/illustrations/tokyo-ui/dog.svg","https://static.preply.com/ds/illustrations/tokyo-ui/first-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/game-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started-down.svg","https://static.preply.com/ds/illustrations/tokyo-ui/getting-started.svg","https://static.preply.com/ds/illustrations/tokyo-ui/globe-spot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/great-homework.svg","https://static.preply.com/ds/illustrations/tokyo-ui/growth.svg","https://static.preply.com/ds/illustrations/tokyo-ui/guitar.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-1.svg","https://static.preply.com/ds/illustrations/tokyo-ui/hard-work-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/heart.svg","https://static.preply.com/ds/illustrations/tokyo-ui/it-guru.svg","https://static.preply.com/ds/illustrations/tokyo-ui/lamp-and-books.svg","https://static.preply.com/ds/illustrations/tokyo-ui/language-flash-cards.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop.svg","https://static.preply.com/ds/illustrations/tokyo-ui/laptop-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/magnifying-glass.svg","https://static.preply.com/ds/illustrations/tokyo-ui/making-progress.svg","https://static.preply.com/ds/illustrations/tokyo-ui/map.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/meeting-with-tutor.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messages.svg","https://static.preply.com/ds/illustrations/tokyo-ui/messaging.svg","https://static.preply.com/ds/illustrations/tokyo-ui/mobile-app.svg","https://static.preply.com/ds/illustrations/tokyo-ui/notes.svg","https://static.preply.com/ds/illustrations/tokyo-ui/open-book.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pause-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pencil-and-pen.svg","https://static.preply.com/ds/illustrations/tokyo-ui/pig.svg","https://static.preply.com/ds/illustrations/tokyo-ui/play-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-2.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot-pink.svg","https://static.preply.com/ds/illustrations/tokyo-ui/polyglot.svg","https://static.preply.com/ds/illustrations/tokyo-ui/present.svg","https://static.preply.com/ds/illustrations/tokyo-ui/professional.svg","https://static.preply.com/ds/illustrations/tokyo-ui/progress-steps.svg","https://static.preply.com/ds/illustrations/tokyo-ui/quote.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rising-arrows.svg","https://static.preply.com/ds/illustrations/tokyo-ui/rock-on.svg","https://static.preply.com/ds/illustrations/tokyo-ui/routine-master.svg","https://static.preply.com/ds/illustrations/tokyo-ui/serious-learner.svg","https://static.preply.com/ds/illustrations/tokyo-ui/sheet.svg","https://static.preply.com/ds/illustrations/tokyo-ui/smiley.svg","https://static.preply.com/ds/illustrations/tokyo-ui/speech-bubble.svg","https://static.preply.com/ds/illustrations/tokyo-ui/star_coin.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stop-button.svg","https://static.preply.com/ds/illustrations/tokyo-ui/stopwatch.svg","https://static.preply.com/ds/illustrations/tokyo-ui/system-permissions.svg","https://static.preply.com/ds/illustrations/tokyo-ui/testing-the-water.svg","https://static.preply.com/ds/illustrations/tokyo-ui/three-arrows.svg","https://static.preply.com/ds/illustrations/tokyo-ui/thumbs-up.svg","https://static.preply.com/ds/illustrations/tokyo-ui/you-did-great-today.svg","https://static.preply.com/ds/illustrations/tokyo-ui/warning.svg","https://static.preply.com/ds/illustrations/tokyo-ui/flashcards.svg","https://static.preply.com/ds/illustrations/tokyo-ui/abc-dice.svg"],y=e.div`
     padding: ${i(u[12])};
     -webkit-background-size: 50px 50px;
     -moz-background-size: 50px 50px;

package/dist/assets/{90.advanced-DqmrsXoy.js → 90.advanced-DcSeiSZJ.js}

@@ -1,4 +1,4 @@
-import{j as e,M as i}from"./iframe-C8q8wjEm.js";import{useMDXComponents as t}from"./index-BPdSA514.js";import"./preload-helper-Dp1pzeXC.js";function r(n){const o={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...t(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Installation/Advanced"}),`
+import{j as e,M as i}from"./iframe-CpMEswOF.js";import{useMDXComponents as t}from"./index-Cc28ZUNU.js";import"./preload-helper-Dp1pzeXC.js";function r(n){const o={a:"a",code:"code",h1:"h1",p:"p",pre:"pre",...t(),...n.components};return e.jsxs(e.Fragment,{children:[e.jsx(i,{title:"Guides/Installation/Advanced"}),`
 `,e.jsx(o.h1,{id:"installation-advanced",children:"Installation: Advanced"}),`
 `,e.jsxs(o.p,{children:["This page is about rolling out your own alternative to ",e.jsx(o.code,{children:"<RootProvider/>"})," (advanced usage)."]}),`
 `,e.jsxs(o.p,{children:["If you are looking for how to install, refer to the ",e.jsx(o.a,{href:"/story/guides-installation-applications--page",children:"installation guides"})," instead."]}),`

package/dist/assets/{Accordion-DxNzeFBJ.js → Accordion-BEPo4ld1.js}

@@ -1,9 +1,9 @@
-import{r as o,j as r,g as s}from"./iframe-C8q8wjEm.js";import{F as y}from"./TokyoUIChevronDown-Bqnin0me.js";import{I as A}from"./Icon-CeynEPoQ.js";import{T as f}from"./Text-CPACpRkz.js";import{u as g}from"./useMergeRefs-DkFVQgA0.js";import{w as _}from"./componentNames-Dts5uwdK.js";const w="accordion__OKb-C",p={accordion:w,"--dsInternalSimulation-focus":"_--dsInternalSimulation-focus__7V0NR","--dsInternalSimulation-noAnimation":"_--dsInternalSimulation-noAnimation__nuNUW"};function I({ref:n,onOpenChange:e}){const a=o.useRef(null),l=g(a,n);return o.useEffect(()=>{if(!a.current)return;const t=a.current,i=()=>{e==null||e(t.open)};return t&&t.addEventListener("toggle",i),()=>{t&&t.removeEventListener("toggle",i)}},[e]),{mergedRef:e||n?l:null}}const c=({dataset:n,children:e,"aria-label":a})=>r.jsx("div",{className:p.accordion,"aria-label":a,...s(n),"data-preply-ds-component":_.Accordion,children:e}),u=o.forwardRef(function({open:e,name:a,dataset:l,children:t,onOpenChange:i,dsInternalSimulation:v},b){const{mergedRef:h}=I({ref:b,onOpenChange:i});return r.jsx("details",{ref:h,name:a,open:e,...s(l),className:p[`--dsInternalSimulation-${v}`],children:t})}),d=o.forwardRef(function({dataset:e,children:a,onClick:l},t){return r.jsxs("summary",{ref:t,...s(e),onClick:l,children:[r.jsx(f,{variant:"default-semibold",children:a}),r.jsx(A,{svg:y})]})}),m=o.forwardRef(function({dataset:e,children:a},l){return r.jsx(f,{tag:"div",variant:"small-regular",ref:l,...s(e),children:a})});try{c.displayName="Accordion",c.__docgenInfo={description:"An Accordion container.\n\nAdd `AccordionItem` children to render a list of disclosable contents.",displayName:"Accordion",props:{dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
+import{r as o,j as r,g as s}from"./iframe-CpMEswOF.js";import{F as y}from"./TokyoUIChevronDown-D9z1Bocr.js";import{I as A}from"./Icon-BX3I9JNh.js";import{T as f}from"./Text-cq49jjad.js";import{u as g}from"./useMergeRefs-DkQLsYW4.js";import{w as _}from"./componentNames-hc9KR2nX.js";const w="accordion__OKb-C",p={accordion:w,"--dsInternalSimulation-focus":"_--dsInternalSimulation-focus__7V0NR","--dsInternalSimulation-noAnimation":"_--dsInternalSimulation-noAnimation__nuNUW"};function I({ref:n,onOpenChange:e}){const a=o.useRef(null),l=g(a,n);return o.useEffect(()=>{if(!a.current)return;const t=a.current,i=()=>{e==null||e(t.open)};return t&&t.addEventListener("toggle",i),()=>{t&&t.removeEventListener("toggle",i)}},[e]),{mergedRef:e||n?l:null}}const c=({dataset:n,children:e,"aria-label":a})=>r.jsx("div",{className:p.accordion,"aria-label":a,...s(n),"data-preply-ds-component":_.Accordion,children:e}),u=o.forwardRef(function({open:e,name:a,dataset:l,children:t,onOpenChange:i,dsInternalSimulation:v},b){const{mergedRef:h}=I({ref:b,onOpenChange:i});return r.jsx("details",{ref:h,name:a,open:e,...s(l),className:p[`--dsInternalSimulation-${v}`],children:t})}),d=o.forwardRef(function({dataset:e,children:a,onClick:l},t){return r.jsxs("summary",{ref:t,...s(e),onClick:l,children:[r.jsx(f,{variant:"default-semibold",children:a}),r.jsx(A,{svg:y})]})}),m=o.forwardRef(function({dataset:e,children:a},l){return r.jsx(f,{tag:"div",variant:"small-regular",ref:l,...s(e),children:a})});try{c.displayName="Accordion",c.__docgenInfo={description:"An Accordion container.\n\nAdd `AccordionItem` children to render a list of disclosable contents.",displayName:"Accordion",props:{dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
 @example <Accordion dataset={{ 'qa-id': 'benefits' }} /> // will add data-qa-id="benefits" to the HTML element.`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-label":{defaultValue:null,description:`Defines a string value that labels the current element.
-@see aria-labelledby.`,name:"aria-label",required:!1,type:{name:"enum",value:[{value:"string"}]}}}}}catch{}try{u.displayName="AccordionItem",u.__docgenInfo={description:"A single `Accordion` item, the wrapper of AccordionHeader and AccordionContent.",displayName:"AccordionItem",props:{"aria-label":{defaultValue:null,description:`Defines a string value that labels the current element.
+@see aria-labelledby.`,name:"aria-label",required:!1,type:{name:"enum",value:[{value:"string"}]}}}}}catch{}try{u.displayName="AccordionItem",u.__docgenInfo={description:"A single `Accordion` item, the wrapper of AccordionHeader and AccordionContent.",displayName:"AccordionItem",props:{"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
+@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-label":{defaultValue:null,description:`Defines a string value that labels the current element.
 @see aria-labelledby.`,name:"aria-label",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-labelledby":{defaultValue:null,description:`Identifies the element (or elements) that labels the current element.
-@see aria-describedby.`,name:"aria-labelledby",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
-@see aria-labelledby`,name:"aria-describedby",required:!1,type:{name:"enum",value:[{value:"string"}]}},open:{defaultValue:null,description:"",name:"open",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onOpenChange:{defaultValue:null,description:"Called whenever the users open/close the Accordion item (mapped to the internal HTML Details's\n`toggle` event).",name:"onOpenChange",required:!1,type:{name:"enum",value:[{value:"(open: boolean) => void"}]}},name:{defaultValue:null,description:`Allows to create exclusive Accordions. Just pass the same \`name\` to all the AccordionItem
+@see aria-describedby.`,name:"aria-labelledby",required:!1,type:{name:"enum",value:[{value:"string"}]}},open:{defaultValue:null,description:"",name:"open",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onOpenChange:{defaultValue:null,description:"Called whenever the users open/close the Accordion item (mapped to the internal HTML Details's\n`toggle` event).",name:"onOpenChange",required:!1,type:{name:"enum",value:[{value:"(open: boolean) => void"}]}},name:{defaultValue:null,description:`Allows to create exclusive Accordions. Just pass the same \`name\` to all the AccordionItem
 instances to make the whole Accordion exclusive.
 @example <Accordion>
     <AccordionItem name="choose-subscription-duration">

package/dist/assets/{Accordion.stories-anse7uf1.js → Accordion.stories-BQqvv6_w.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./iframe-C8q8wjEm.js";import{A as r,a as n,b as t,c as o}from"./Accordion-DxNzeFBJ.js";import{T as p}from"./Text-CPACpRkz.js";import{H as T}from"./Heading-IAeZxORQ.js";import{B as W}from"./Button-8TyghF-W.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUIChevronDown-Bqnin0me.js";import"./Icon-CeynEPoQ.js";import"./text-accent-Bbx7l_cl.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-rjyGnIsi.js";import"./componentNames-Dts5uwdK.js";import"./useMergeRefs-DkFVQgA0.js";import"./text-centered-Cg_ddFhQ.js";import"./ButtonBase-D85CySUD.js";import"./Spinner-VeUQXU7V.js";import"./useHostname-MecFXBKz.js";import"./index-CC6DAVyL.js";const X={title:"components/Accordion",component:r,args:{}},s={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsx(o,{children:"Of course it is!"})]}),e.jsxs(n,{children:[e.jsx(t,{children:"Why?"}),e.jsx(o,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})}},a={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsx(o,{children:"Of course it is!"})]}),e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Why?"}),e.jsx(o,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})}},c={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(t,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e.jsx(o,{children:"Lorem ipsum"})]}),e.jsxs(n,{children:[e.jsx(t,{children:"Lorem ipsum"}),e.jsx(o,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]}),e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e.jsx(o,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]})]})}},d={render:function(){return e.jsx(r,{children:e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsxs(o,{children:[e.jsx(T,{variant:"large",tag:"div",children:"Yes!"}),e.jsx(p,{variant:"large-regular-italic",children:"What are you waiting for?"}),e.jsx(W,{children:"Book a lesson now!"})]})]})})}},l={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{name:"choose-subscription-duration",children:[e.jsx(t,{children:"Two-week subscription"}),e.jsx(o,{children:"We will charge you every two weeks."})]}),e.jsxs(n,{name:"choose-subscription-duration",children:[e.jsx(t,{children:"Four-week subscription"}),e.jsx(o,{children:"We will charge you every four weeks."})]})]})}},u={render:function(){return e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(p,{variant:"default-regular-italic",children:"closed"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(p,{variant:"default-regular-italic",children:"open"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(p,{variant:"default-regular-italic",children:"focus"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{dsInternalSimulation:"focus",children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]})]})}};var m,h,y;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{
+import{j as e}from"./iframe-CpMEswOF.js";import{A as r,a as n,b as t,c as o}from"./Accordion-BEPo4ld1.js";import{T as p}from"./Text-cq49jjad.js";import{H as T}from"./Heading-Bie8QWaf.js";import{B as W}from"./Button-KCBOR544.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUIChevronDown-D9z1Bocr.js";import"./Icon-BX3I9JNh.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";import"./componentNames-hc9KR2nX.js";import"./useMergeRefs-DkQLsYW4.js";import"./text-centered-DiwR-QSx.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";const X={title:"components/Accordion",component:r,args:{}},s={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsx(o,{children:"Of course it is!"})]}),e.jsxs(n,{children:[e.jsx(t,{children:"Why?"}),e.jsx(o,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})}},a={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsx(o,{children:"Of course it is!"})]}),e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Why?"}),e.jsx(o,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})}},c={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{children:[e.jsx(t,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e.jsx(o,{children:"Lorem ipsum"})]}),e.jsxs(n,{children:[e.jsx(t,{children:"Lorem ipsum"}),e.jsx(o,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]}),e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."}),e.jsx(o,{children:"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."})]})]})}},d={render:function(){return e.jsx(r,{children:e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Is Preply the best platform for learning a language?"}),e.jsxs(o,{children:[e.jsx(T,{variant:"large",tag:"div",children:"Yes!"}),e.jsx(p,{variant:"large-regular-italic",children:"What are you waiting for?"}),e.jsx(W,{children:"Book a lesson now!"})]})]})})}},l={render:function(){return e.jsxs(r,{children:[e.jsxs(n,{name:"choose-subscription-duration",children:[e.jsx(t,{children:"Two-week subscription"}),e.jsx(o,{children:"We will charge you every two weeks."})]}),e.jsxs(n,{name:"choose-subscription-duration",children:[e.jsx(t,{children:"Four-week subscription"}),e.jsx(o,{children:"We will charge you every four weeks."})]})]})}},u={render:function(){return e.jsxs(e.Fragment,{children:[e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(p,{variant:"default-regular-italic",children:"closed"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(p,{variant:"default-regular-italic",children:"open"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{open:!0,children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]}),e.jsxs("div",{style:{display:"flex",gap:"16px",flexDirection:"column"},children:[e.jsx(p,{variant:"default-regular-italic",children:"focus"}),e.jsx("div",{style:{display:"flex",gap:"16px"},children:e.jsx(r,{children:e.jsxs(n,{dsInternalSimulation:"focus",children:[e.jsx(t,{children:"Header"}),e.jsx(o,{children:"Content"})]})})})]})]})}};var m,h,y;s.parameters={...s.parameters,docs:{...(m=s.parameters)==null?void 0:m.docs,source:{originalSource:`{
   render: function Story() {
     return <Accordion>
                 <AccordionItem>

package/dist/assets/{Accordion.tests.stories-DoGc7az7.js → Accordion.tests.stories-CbPTut9X.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./iframe-C8q8wjEm.js";import{A as d,a as c,b as s,c as l}from"./Accordion-DxNzeFBJ.js";import{c as G}from"./OnboardingTour-DjRE-J8f.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUIChevronDown-Bqnin0me.js";import"./Icon-CeynEPoQ.js";import"./text-accent-Bbx7l_cl.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-rjyGnIsi.js";import"./componentNames-Dts5uwdK.js";import"./Text-CPACpRkz.js";import"./text-centered-Cg_ddFhQ.js";import"./useMergeRefs-DkFVQgA0.js";import"./OnboardingTooltip-h7CPBh1u.js";import"./TokyoUIClose-DpSNWwxX.js";import"./Button-8TyghF-W.js";import"./ButtonBase-D85CySUD.js";import"./Spinner-VeUQXU7V.js";import"./useHostname-MecFXBKz.js";import"./index-CC6DAVyL.js";import"./Heading-IAeZxORQ.js";import"./index-B2swU3YW.js";import"./shared-strings-CDaZX-3B.js";import"./message-C3RuDR6M.js";import"./index-DYYdejgZ.js";const{userEvent:i,expect:o,within:U,waitFor:f,fn:z}=__STORYBOOK_MODULE_TEST__,Ce={title:"Components/Accordion/Tests",component:d,parameters:{controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"]},y={render:function(){return e.jsx(d,{"aria-label":"accordionLabel",children:e.jsxs(c,{children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})})},play:async({canvasElement:n})=>{const r=U(n).getByLabelText("accordionLabel");o(r).toBeVisible()}},m={args:{},render:function(){return e.jsxs(d,{children:[e.jsxs(c,{children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]}),e.jsxs(c,{children:[e.jsx(s,{children:"Why?"}),e.jsx(l,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})},play:async({canvas:n,step:t})=>{const r=n.getByText("Is Preply the best platform for learning a language?"),a=n.getByText("Of course it is!"),u=n.getByText("Why?"),p=n.getByText("If you are wondering, it means you have not tried it out yet!");await t("Contents are hidden",async()=>{o(a).not.toBeVisible(),o(p).not.toBeVisible()}),await t("Content 1 is revelable",async()=>{await i.click(r),o(a).toBeVisible()}),await t("Content 2 is revelable",async()=>{await i.click(u),o(p).toBeVisible()}),await t("Both contents are visible (non-exclusivity check)",async()=>{o(a).toBeVisible(),o(p).toBeVisible()}),await t("Item 1 is hidable",async()=>{await i.click(r),o(a).not.toBeVisible()}),await t("Item 2 is hidable",async()=>{await i.click(u),o(p).not.toBeVisible()})}},h={args:{},render:function(){return e.jsx(d,{children:e.jsxs(c,{dsInternalSimulation:"noAnimation",children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})})},play:async({canvas:n,step:t})=>{const r=n.getByText("Is Preply the best platform for learning a language?"),a=n.getByText("Of course it is!");await t("Contents are hidden",async()=>{o(a).not.toBeVisible()}),await t("Content is revelable",async()=>{await i.click(r),o(a).toBeVisible()}),await t("Content is hidable",async()=>{await i.click(r),o(a).not.toBeVisible()})}},g={args:{},render:function(){return e.jsxs(d,{children:[e.jsxs(c,{name:"choose-subscription-duration",children:[e.jsx(s,{children:"Two-week subscription"}),e.jsx(l,{children:"We will charge you every two weeks."})]}),e.jsxs(c,{name:"choose-subscription-duration",children:[e.jsx(s,{children:"Four-week subscription"}),e.jsx(l,{children:"We will charge you every four weeks."})]})]})},play:async({canvas:n,step:t})=>{const r=n.getByText("Two-week subscription"),a=n.getByText("We will charge you every two weeks."),u=n.getByText("Four-week subscription"),p=n.getByText("We will charge you every four weeks.");await t("Contents are hidden",async()=>{o(a).not.toBeVisible(),o(p).not.toBeVisible()}),await t("Content 1 is revelable",async()=>{await i.click(r),o(a).toBeVisible()}),await t("Content 2 is revelable",async()=>{await i.click(u),o(p).toBeVisible()}),await t("Item 1 is hidden",async()=>{o(a).not.toBeVisible()})}},b={args:{onOpenChange:z()},render:function(t){return e.jsx(d,{children:e.jsxs(c,{onOpenChange:t.onOpenChange,children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})})},play:async({canvas:n,args:t,step:r})=>{const a=n.getByText("Is Preply the best platform for learning a language?");await r("onOpenChange is not called",async()=>{o(t.onOpenChange).not.toBeCalled()}),await r("onOpenChange is called with true",async()=>{await i.click(a),o(t.onOpenChange).toBeCalledWith(!0)}),await r("onOpenChange is called with false",async()=>{await i.click(a),o(t.onOpenChange).toBeCalledWith(!1)})}},w={args:{onClick:z()},render:function(t){return e.jsx(d,{children:e.jsxs(c,{children:[e.jsx(s,{onClick:t.onClick,children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})})},play:async({canvas:n,args:t,step:r})=>{const a=n.getByText("Is Preply the best platform for learning a language?");await r("onClick is not called",async()=>{o(t.onClick).not.toBeCalled()}),await r("onClick is called",async()=>{await i.click(a),o(t.onClick).toBeCalled()})}},x={render:function(){return e.jsx(d,{"aria-label":"accordion",dataset:{foo:1},children:e.jsxs(c,{dataset:{"qa-id":"firstItem"},children:[e.jsx(s,{dataset:{"qa-id":"firstItemHeader"},children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{dataset:{"qa-id":"firstItemContent"},children:"Yes!"})]})})},play:async({canvas:n})=>{const t=n.getByLabelText("accordion");o(t).toHaveAttribute("data-foo","1")}},C={render:function(){const t=G();return e.jsx(t.Provider,{totalSteps:2,children:e.jsxs(d,{children:[e.jsx(t.Step,{step:0,title:"Step 1",text:"Ensure you can answer this question",children:e.jsxs(c,{children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})}),e.jsx(t.Step,{step:1,title:"Step 2",text:"Push them to try Preply out!",children:e.jsxs(c,{children:[e.jsx(s,{children:"Why?"}),e.jsx(l,{children:"If you are wondering, it means you have not tried it out yet!"})]})})]})})},play:async({canvasElement:n,step:t})=>{const r=U(n);await t("Step 1 should be visible",async()=>{await f(()=>{const a=r.getByText("Ensure you can answer this question");o(a).toBeVisible()})}),await t("Click Next",async()=>{const a=r.getByRole("button",{name:"Next"});await i.click(a)}),await t("Step 2 should be visible",async()=>{await f(()=>{const a=r.getByText("Push them to try Preply out!");o(a).toBeVisible()})})}};var A,B,v;y.parameters={...y.parameters,docs:{...(A=y.parameters)==null?void 0:A.docs,source:{originalSource:`{
+import{j as e}from"./iframe-CpMEswOF.js";import{A as d,a as c,b as s,c as l}from"./Accordion-BEPo4ld1.js";import{c as G}from"./OnboardingTour-Dsl4caiq.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUIChevronDown-D9z1Bocr.js";import"./Icon-BX3I9JNh.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";import"./componentNames-hc9KR2nX.js";import"./Text-cq49jjad.js";import"./text-centered-DiwR-QSx.js";import"./useMergeRefs-DkQLsYW4.js";import"./OnboardingTooltip-CsTure6K.js";import"./TokyoUIClose-C1pVTvLz.js";import"./Button-KCBOR544.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";import"./Heading-Bie8QWaf.js";import"./index-DT-MbRPK.js";import"./shared-strings-BChji30Y.js";import"./message-CTdBLxyt.js";import"./index-dUCHvwfu.js";const{userEvent:i,expect:o,within:U,waitFor:f,fn:z}=__STORYBOOK_MODULE_TEST__,Ce={title:"Components/Accordion/Tests",component:d,parameters:{controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"]},y={render:function(){return e.jsx(d,{"aria-label":"accordionLabel",children:e.jsxs(c,{children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})})},play:async({canvasElement:n})=>{const r=U(n).getByLabelText("accordionLabel");o(r).toBeVisible()}},m={args:{},render:function(){return e.jsxs(d,{children:[e.jsxs(c,{children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]}),e.jsxs(c,{children:[e.jsx(s,{children:"Why?"}),e.jsx(l,{children:"If you are wondering, it means you have not tried it out yet!"})]})]})},play:async({canvas:n,step:t})=>{const r=n.getByText("Is Preply the best platform for learning a language?"),a=n.getByText("Of course it is!"),u=n.getByText("Why?"),p=n.getByText("If you are wondering, it means you have not tried it out yet!");await t("Contents are hidden",async()=>{o(a).not.toBeVisible(),o(p).not.toBeVisible()}),await t("Content 1 is revelable",async()=>{await i.click(r),o(a).toBeVisible()}),await t("Content 2 is revelable",async()=>{await i.click(u),o(p).toBeVisible()}),await t("Both contents are visible (non-exclusivity check)",async()=>{o(a).toBeVisible(),o(p).toBeVisible()}),await t("Item 1 is hidable",async()=>{await i.click(r),o(a).not.toBeVisible()}),await t("Item 2 is hidable",async()=>{await i.click(u),o(p).not.toBeVisible()})}},h={args:{},render:function(){return e.jsx(d,{children:e.jsxs(c,{dsInternalSimulation:"noAnimation",children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})})},play:async({canvas:n,step:t})=>{const r=n.getByText("Is Preply the best platform for learning a language?"),a=n.getByText("Of course it is!");await t("Contents are hidden",async()=>{o(a).not.toBeVisible()}),await t("Content is revelable",async()=>{await i.click(r),o(a).toBeVisible()}),await t("Content is hidable",async()=>{await i.click(r),o(a).not.toBeVisible()})}},g={args:{},render:function(){return e.jsxs(d,{children:[e.jsxs(c,{name:"choose-subscription-duration",children:[e.jsx(s,{children:"Two-week subscription"}),e.jsx(l,{children:"We will charge you every two weeks."})]}),e.jsxs(c,{name:"choose-subscription-duration",children:[e.jsx(s,{children:"Four-week subscription"}),e.jsx(l,{children:"We will charge you every four weeks."})]})]})},play:async({canvas:n,step:t})=>{const r=n.getByText("Two-week subscription"),a=n.getByText("We will charge you every two weeks."),u=n.getByText("Four-week subscription"),p=n.getByText("We will charge you every four weeks.");await t("Contents are hidden",async()=>{o(a).not.toBeVisible(),o(p).not.toBeVisible()}),await t("Content 1 is revelable",async()=>{await i.click(r),o(a).toBeVisible()}),await t("Content 2 is revelable",async()=>{await i.click(u),o(p).toBeVisible()}),await t("Item 1 is hidden",async()=>{o(a).not.toBeVisible()})}},b={args:{onOpenChange:z()},render:function(t){return e.jsx(d,{children:e.jsxs(c,{onOpenChange:t.onOpenChange,children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})})},play:async({canvas:n,args:t,step:r})=>{const a=n.getByText("Is Preply the best platform for learning a language?");await r("onOpenChange is not called",async()=>{o(t.onOpenChange).not.toBeCalled()}),await r("onOpenChange is called with true",async()=>{await i.click(a),o(t.onOpenChange).toBeCalledWith(!0)}),await r("onOpenChange is called with false",async()=>{await i.click(a),o(t.onOpenChange).toBeCalledWith(!1)})}},w={args:{onClick:z()},render:function(t){return e.jsx(d,{children:e.jsxs(c,{children:[e.jsx(s,{onClick:t.onClick,children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})})},play:async({canvas:n,args:t,step:r})=>{const a=n.getByText("Is Preply the best platform for learning a language?");await r("onClick is not called",async()=>{o(t.onClick).not.toBeCalled()}),await r("onClick is called",async()=>{await i.click(a),o(t.onClick).toBeCalled()})}},x={render:function(){return e.jsx(d,{"aria-label":"accordion",dataset:{foo:1},children:e.jsxs(c,{dataset:{"qa-id":"firstItem"},children:[e.jsx(s,{dataset:{"qa-id":"firstItemHeader"},children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{dataset:{"qa-id":"firstItemContent"},children:"Yes!"})]})})},play:async({canvas:n})=>{const t=n.getByLabelText("accordion");o(t).toHaveAttribute("data-foo","1")}},C={render:function(){const t=G();return e.jsx(t.Provider,{totalSteps:2,children:e.jsxs(d,{children:[e.jsx(t.Step,{step:0,title:"Step 1",text:"Ensure you can answer this question",children:e.jsxs(c,{children:[e.jsx(s,{children:"Is Preply the best platform for learning a language?"}),e.jsx(l,{children:"Of course it is!"})]})}),e.jsx(t.Step,{step:1,title:"Step 2",text:"Push them to try Preply out!",children:e.jsxs(c,{children:[e.jsx(s,{children:"Why?"}),e.jsx(l,{children:"If you are wondering, it means you have not tried it out yet!"})]})})]})})},play:async({canvasElement:n,step:t})=>{const r=U(n);await t("Step 1 should be visible",async()=>{await f(()=>{const a=r.getByText("Ensure you can answer this question");o(a).toBeVisible()})}),await t("Click Next",async()=>{const a=r.getByRole("button",{name:"Next"});await i.click(a)}),await t("Step 2 should be visible",async()=>{await f(()=>{const a=r.getByText("Push them to try Preply out!");o(a).toBeVisible()})})}};var A,B,v;y.parameters={...y.parameters,docs:{...(A=y.parameters)==null?void 0:A.docs,source:{originalSource:`{
   render: function Story() {
     return <Accordion aria-label="accordionLabel">
                 <AccordionItem>

package/dist/assets/{AlertBanner.primitives.stories-f7g-qsm5.js → AlertBanner.primitives.stories-B8wM25gx.js}

@@ -1,4 +1,4 @@
-import{j as r}from"./iframe-C8q8wjEm.js";import{F as l}from"./TokyoUISparkle-Rlb1iC0a.js";import{A as s,a as m,b as e,c,d as p}from"./AlertBannerText-CVGRB8DE.js";import{B as u}from"./Button-8TyghF-W.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUICheck-DyeJxS4m.js";import"./TokyoUIErrorWarning-BoJjXvv2.js";import"./Icon-CeynEPoQ.js";import"./text-accent-Bbx7l_cl.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-rjyGnIsi.js";import"./componentNames-Dts5uwdK.js";import"./IconButton-CT1U16hq.js";import"./ButtonBase-D85CySUD.js";import"./Spinner-VeUQXU7V.js";import"./useMergeRefs-DkFVQgA0.js";import"./useHostname-MecFXBKz.js";import"./index-CC6DAVyL.js";import"./index-B2swU3YW.js";import"./VisuallyHidden-oCB6vAK-.js";import"./Text-CPACpRkz.js";import"./text-centered-Cg_ddFhQ.js";import"./message-C3RuDR6M.js";const B="customBanner__WPfsi",d={customBanner:B},U={title:"Components/AlertBanner/Primitives",component:e,subcomponents:{AlertBannerIcon:c,AlertBannerRoot:e,AlertBannerAction:m,AlertBannerText:s},parameters:{layout:"padded",docs:{source:{type:"dynamic"}}},decorators:[o=>r.jsx("div",{style:{width:"500px"},children:r.jsx(o,{})})]},t=()=>r.jsx(p,{children:r.jsxs(e,{variant:"critical",className:d.customBanner,children:[r.jsx(c,{svg:l}),r.jsx(s,{children:"Custom banner built with primitives."}),r.jsx(m,{children:r.jsx(u,{variant:"onColor",size:"large",children:"Custom action"})})]})});var n,i,a;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:`() => {
+import{j as r}from"./iframe-CpMEswOF.js";import{F as l}from"./TokyoUISparkle-C5euAhof.js";import{A as s,a as m,b as e,c,d as p}from"./AlertBannerText-CmhnTe_E.js";import{B as u}from"./Button-KCBOR544.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUICheck-DfGyg7qp.js";import"./TokyoUIErrorWarning-CDZ53m2_.js";import"./Icon-BX3I9JNh.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";import"./componentNames-hc9KR2nX.js";import"./IconButton-DVKNd7ZK.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useMergeRefs-DkQLsYW4.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";import"./index-DT-MbRPK.js";import"./VisuallyHidden-lSSiGvdb.js";import"./Text-cq49jjad.js";import"./text-centered-DiwR-QSx.js";import"./message-CTdBLxyt.js";const B="customBanner__WPfsi",d={customBanner:B},U={title:"Components/AlertBanner/Primitives",component:e,subcomponents:{AlertBannerIcon:c,AlertBannerRoot:e,AlertBannerAction:m,AlertBannerText:s},parameters:{layout:"padded",docs:{source:{type:"dynamic"}}},decorators:[o=>r.jsx("div",{style:{width:"500px"},children:r.jsx(o,{})})]},t=()=>r.jsx(p,{children:r.jsxs(e,{variant:"critical",className:d.customBanner,children:[r.jsx(c,{svg:l}),r.jsx(s,{children:"Custom banner built with primitives."}),r.jsx(m,{children:r.jsx(u,{variant:"onColor",size:"large",children:"Custom action"})})]})});var n,i,a;t.parameters={...t.parameters,docs:{...(n=t.parameters)==null?void 0:n.docs,source:{originalSource:`() => {
   const variant: AlertBannerVariant = 'critical';
   return <AlertBannerProvider>
             <AlertBannerRoot variant={variant} className={customStyles.customBanner}>

package/dist/assets/{AlertBanner.stories-DDbmK3Yc.js → AlertBanner.stories-CMG9DJ2x.js}

@@ -1,4 +1,4 @@
-import{g as W,j as e}from"./iframe-C8q8wjEm.js";import{b as H,c as E,A as L,a as M,d}from"./AlertBannerText-CVGRB8DE.js";import{w as U}from"./componentNames-Dts5uwdK.js";import{B as s}from"./Button-8TyghF-W.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUICheck-DyeJxS4m.js";import"./TokyoUIErrorWarning-BoJjXvv2.js";import"./Icon-CeynEPoQ.js";import"./text-accent-Bbx7l_cl.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-rjyGnIsi.js";import"./IconButton-CT1U16hq.js";import"./ButtonBase-D85CySUD.js";import"./Spinner-VeUQXU7V.js";import"./useMergeRefs-DkFVQgA0.js";import"./useHostname-MecFXBKz.js";import"./index-CC6DAVyL.js";import"./index-B2swU3YW.js";import"./VisuallyHidden-oCB6vAK-.js";import"./Text-CPACpRkz.js";import"./text-centered-Cg_ddFhQ.js";import"./message-C3RuDR6M.js";const a=t=>{const{variant:r,description:n,action:j,dataset:R}=t,P=W(R,{preplyDsComponent:U.AlertBanner});return e.jsxs(H,{variant:r,...P,children:[e.jsx(E,{}),e.jsx(L,{children:n}),e.jsx(M,{children:j})]})};try{a.displayName="AlertBanner",a.__docgenInfo={description:`The Alert Banner communicates important and time-sensitive messages that require user attention.
+import{g as R,j as e}from"./iframe-CpMEswOF.js";import{b as E,c as H,A as L,a as N,d}from"./AlertBannerText-CmhnTe_E.js";import{w as M}from"./componentNames-hc9KR2nX.js";import{B as s}from"./Button-KCBOR544.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUICheck-DfGyg7qp.js";import"./TokyoUIErrorWarning-CDZ53m2_.js";import"./Icon-BX3I9JNh.js";import"./text-accent-DZ_ihUdH.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-c7okze1K.js";import"./IconButton-DVKNd7ZK.js";import"./ButtonBase-D1x6yeKi.js";import"./Spinner-lj2QA4al.js";import"./useMergeRefs-DkQLsYW4.js";import"./useHostname-BVhrcDgi.js";import"./index-CC6DAVyL.js";import"./index-DT-MbRPK.js";import"./VisuallyHidden-lSSiGvdb.js";import"./Text-cq49jjad.js";import"./text-centered-DiwR-QSx.js";import"./message-CTdBLxyt.js";const a=t=>{const{variant:r,description:n,action:u,dataset:g}=t,y=R(g,{preplyDsComponent:M.AlertBanner});return e.jsxs(E,{variant:r,...y,children:[e.jsx(H,{}),e.jsx(L,{children:n}),e.jsx(N,{children:u})]})};try{a.displayName="AlertBanner",a.__docgenInfo={description:`The Alert Banner communicates important and time-sensitive messages that require user attention.
 
 From an accessibility perspective, the description is prefixed to announce the importance of the
 banner.`,displayName:"AlertBanner",props:{variant:{defaultValue:null,description:"Impact the visualized icon, the background color, and how the banner is announced by screen\nreaders.\n\nSemantic icons are also exported for the following variants:\n- `warning` -> `<AlertBannerWarningIcon />`\n- `critical` -> `<AlertBannerCriticalIcon />`\n- `positive` -> `<AlertBannerPositiveIcon />`",name:"variant",required:!0,type:{name:"enum",value:[{value:'"positive"'},{value:'"warning"'},{value:'"critical"'}]}},description:{defaultValue:null,description:"The banner's message content.",name:"description",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"}]}},action:{defaultValue:null,description:`The banner' action.
@@ -12,7 +12,7 @@ Alternatively, to diverge from the DS, you're able to:
 - Add your own custom content to break away from the inner content
   styling and structure.
 - Use the \`CalloutBannerRoot\` primitive to customize the banner
-  container (e.g. colour).`,name:"action",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{}const{action:Y}=__STORYBOOK_MODULE_ACTIONS__,{userEvent:q,expect:o,fn:N}=__STORYBOOK_MODULE_TEST__,ue={title:"components/AlertBanner",component:a,subcomponents:{AlertBannerProvider:d},args:{}},i={actionOnClick:N(Y("onCLicked"))},u={args:{},parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-l":{viewport:"medium-l"}}}},render:function(){return e.jsxs(d,{children:[e.jsx(a,{variant:"critical",description:"We can't renew your subscription.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Try again"})}),e.jsx(a,{variant:"warning",description:"Your credit card is about to expire.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Change payment method"})}),e.jsx(a,{variant:"positive",description:"Your subscription has been renewed successfully.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Book the next lesson"})})]})},play:async({canvas:t,step:r})=>{const n=await t.findByRole("button",{name:/Try again/});await r("actionOnClick is not called",async()=>{o(i.actionOnClick).not.toBeCalled()}),await r("actionOnClick is called",async()=>{await q.click(n),o(i.actionOnClick).toBeCalled()})}},c={render:function(){return e.jsxs(d,{children:[e.jsx(a,{variant:"critical",description:"We can't renew your subscription.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Try again"}),dataset:{testId:"subscriptionAlert"}}),e.jsx(a,{variant:"warning",description:"Your credit card is about to expire.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Change payment method"}),dataset:{testid:"paymentWarning"}}),e.jsx(a,{variant:"positive",description:"Your subscription has been renewed successfully.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Book the next lesson"}),dataset:{testid:"subscriptionRenewed"}})]})},play:async({canvas:t,step:r})=>{await r('Alerts banners are prefixed with "Alert:" to allow screen reader users to recall the alerts region',async()=>{const n=await t.findByTestId("subscriptionAlert");await o(n).toHaveTextContent("Alert: We can't renew your subscription.Try again")}),await r('Warning banners are prefixed with "Warning:" to allow screen reader users to recall the alerts region',async()=>{const n=await t.findByTestId("paymentWarning");await o(n).toHaveTextContent("Warning: Your credit card is about to expire.Change payment method")}),await r('Positive banners are prefixed with "Update:" to allow screen reader users to recall the updates region',async()=>{const n=await t.findByTestId("subscriptionRenewed");await o(n).toHaveTextContent("Update: Your subscription has been renewed successfully.Book the next lesson")})}},l={render:function(){return e.jsx(d,{"data-testid":"alertBannerHostId"})},play:async({canvas:t,step:r})=>{const n=t.getByTestId("alertBannerHostId");await r('The host is announced as "Alerts, warnings, and updates"',async()=>{await o(n).toHaveAccessibleName("Alerts, warnings, and updates")}),await r("The host renders an aria-live region",async()=>{await o(n).toHaveAttribute("aria-live"),await o(n).toHaveAttribute("aria-atomic","false"),await o(n).toHaveRole("region")})}},m="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",y="Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt.",p={render:function(){return e.jsxs(d,{children:[e.jsx(a,{variant:"warning",description:m,action:e.jsx(s,{onClick:i.actionOnClick,children:"Try again"})}),e.jsx(a,{variant:"warning",description:"We can't renew your subscription.",action:e.jsx(s,{onClick:i.actionOnClick,children:y})}),e.jsx(a,{variant:"warning",description:m,action:e.jsx(s,{onClick:i.actionOnClick,children:y})})]})}};var v,w,h;u.parameters={...u.parameters,docs:{...(v=u.parameters)==null?void 0:v.docs,source:{originalSource:`{
+  container (e.g. colour).`,name:"action",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{}const{action:U}=__STORYBOOK_MODULE_ACTIONS__,{userEvent:D,expect:o,fn:Y}=__STORYBOOK_MODULE_TEST__,ue={title:"components/AlertBanner",component:a,subcomponents:{AlertBannerProvider:d},args:{}},i={actionOnClick:Y(U("onCLicked"))},p={args:{},parameters:{chromatic:{modes:{"narrow-l":{viewport:"narrow-l"},"medium-l":{viewport:"medium-l"}}}},render:function(){return e.jsxs(d,{children:[e.jsx(a,{variant:"critical",description:"We can't renew your subscription.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Try again"})}),e.jsx(a,{variant:"warning",description:"Your credit card is about to expire.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Change payment method"})}),e.jsx(a,{variant:"positive",description:"Your subscription has been renewed successfully.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Book the next lesson"})})]})},play:async({canvas:t,step:r})=>{const n=await t.findByRole("button",{name:/Try again/});await r("actionOnClick is not called",async()=>{o(i.actionOnClick).not.toBeCalled()}),await r("actionOnClick is called",async()=>{await D.click(n),o(i.actionOnClick).toBeCalled()})}},c={render:function(){return e.jsxs(d,{children:[e.jsx(a,{variant:"critical",description:"We can't renew your subscription.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Try again"}),dataset:{testId:"subscriptionAlert"}}),e.jsx(a,{variant:"warning",description:"Your credit card is about to expire.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Change payment method"}),dataset:{testid:"paymentWarning"}}),e.jsx(a,{variant:"positive",description:"Your subscription has been renewed successfully.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Book the next lesson"}),dataset:{testid:"subscriptionRenewed"}})]})},play:async({canvas:t,step:r})=>{await r('Alert banners are prefixed with "Alert:" to allow screen reader users to recall the alerts region',async()=>{const n=await t.findByTestId("subscriptionAlert");await o(n).toHaveTextContent("Alert: We can't renew your subscription.Try again")}),await r('Warning banners are prefixed with "Warning:" to allow screen reader users to recall the alerts region',async()=>{const n=await t.findByTestId("paymentWarning");await o(n).toHaveTextContent("Warning: Your credit card is about to expire.Change payment method")}),await r('Positive banners are prefixed with "Update:" to allow screen reader users to recall the updates region',async()=>{const n=await t.findByTestId("subscriptionRenewed");await o(n).toHaveTextContent("Update: Your subscription has been renewed successfully.Book the next lesson")})}},l={render:function(){return e.jsxs(d,{"data-testid":"alertBannerHostId",children:[e.jsx("div",{id:"pageContents",children:"Page contents"}),e.jsx(a,{variant:"critical",description:"We can't renew your subscription.",action:e.jsx(s,{onClick:i.actionOnClick,children:"Try again"}),dataset:{testId:"subscriptionAlert"}})]})},play:async({canvas:t,step:r})=>{const n=t.getByTestId("alertBannerHostId");await r('The host is announced as "Alerts, warnings, and updates"',async()=>{await o(n).toHaveAccessibleName("Alerts, warnings, and updates")}),await r("The host renders an aria-live region",async()=>{await o(n).toHaveAttribute("aria-live"),await o(n).toHaveAttribute("aria-atomic","false"),await o(n).toHaveRole("region")}),await r("Alert banners are rendered at the top of the page",async()=>{const u=document.getElementById("pageContents");if(!u)throw new Error("Page contents element not found");const y=!!((await t.findByTestId("subscriptionAlert")).compareDocumentPosition(u)&Node.DOCUMENT_POSITION_FOLLOWING);o(y).toBe(!0)})}},v="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",w="Lorem ipsum dolor sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt.",m={render:function(){return e.jsxs(d,{children:[e.jsx(a,{variant:"warning",description:v,action:e.jsx(s,{onClick:i.actionOnClick,children:"Try again"})}),e.jsx(a,{variant:"warning",description:"We can't renew your subscription.",action:e.jsx(s,{onClick:i.actionOnClick,children:w})}),e.jsx(a,{variant:"warning",description:v,action:e.jsx(s,{onClick:i.actionOnClick,children:w})})]})}};var h,b,B;p.parameters={...p.parameters,docs:{...(h=p.parameters)==null?void 0:h.docs,source:{originalSource:`{
   args: {},
   parameters: {
     chromatic: {
@@ -48,7 +48,7 @@ Alternatively, to diverge from the DS, you're able to:
       expect(callback.actionOnClick).toBeCalled();
     });
   }
-}`,...(h=(w=u.parameters)==null?void 0:w.docs)==null?void 0:h.source}}};var g,b,B,C,x;c.parameters={...c.parameters,docs:{...(g=c.parameters)==null?void 0:g.docs,source:{originalSource:`{
+}`,...(B=(b=p.parameters)==null?void 0:b.docs)==null?void 0:B.source}}};var C,A,x,k,f;c.parameters={...c.parameters,docs:{...(C=c.parameters)==null?void 0:C.docs,source:{originalSource:`{
   render: function Story() {
     return <AlertBannerProvider>
                 <AlertBanner variant="critical" description="We can't renew your subscription." action={<Button onClick={callback.actionOnClick}>Try again</Button>} dataset={{
@@ -66,7 +66,7 @@ Alternatively, to diverge from the DS, you're able to:
     canvas,
     step
   }) => {
-    await step('Alerts banners are prefixed with "Alert:" to allow screen reader users to recall the alerts region', async () => {
+    await step('Alert banners are prefixed with "Alert:" to allow screen reader users to recall the alerts region', async () => {
       const subscriptionAlert = await canvas.findByTestId('subscriptionAlert');
       await expect(subscriptionAlert).toHaveTextContent("Alert: We can't renew your subscription.Try again");
     });
@@ -79,13 +79,18 @@ Alternatively, to diverge from the DS, you're able to:
       await expect(paymentWarning).toHaveTextContent('Update: Your subscription has been renewed successfully.Book the next lesson');
     });
   }
-}`,...(B=(b=c.parameters)==null?void 0:b.docs)==null?void 0:B.source},description:{story:`The alert banners are announced to screen readers with a prefix depending on their type. This
+}`,...(x=(A=c.parameters)==null?void 0:A.docs)==null?void 0:x.source},description:{story:`The alert banners are announced to screen readers with a prefix depending on their type. This
 allows to quickly recall the alerts region (rendered by \`AlertBannerProvider\`) that is put at the top
 of the page.
 
-@see AlertBannerProvider`,...(x=(C=c.parameters)==null?void 0:C.docs)==null?void 0:x.description}}};var A,k,f,O,T;l.parameters={...l.parameters,docs:{...(A=l.parameters)==null?void 0:A.docs,source:{originalSource:`{
+@see AlertBannerProvider`,...(f=(k=c.parameters)==null?void 0:k.docs)==null?void 0:f.description}}};var O,T,I,_,P;l.parameters={...l.parameters,docs:{...(O=l.parameters)==null?void 0:O.docs,source:{originalSource:`{
   render: function Story() {
-    return <AlertBannerProvider data-testid="alertBannerHostId" />;
+    return <AlertBannerProvider data-testid="alertBannerHostId">
+                <div id="pageContents">Page contents</div>
+                <AlertBanner variant="critical" description="We can't renew your subscription." action={<Button onClick={callback.actionOnClick}>Try again</Button>} dataset={{
+        testId: 'subscriptionAlert'
+      }} />
+            </AlertBannerProvider>;
   },
   play: async ({
     canvas,
@@ -100,8 +105,15 @@ of the page.
       await expect(host).toHaveAttribute('aria-atomic', 'false');
       await expect(host).toHaveRole('region');
     });
+    await step('Alert banners are rendered at the top of the page', async () => {
+      const pageContents = document.getElementById('pageContents');
+      if (!pageContents) throw new Error('Page contents element not found');
+      const subscriptionAlert = await canvas.findByTestId('subscriptionAlert');
+      const pageContentsComesAfterAlertBanner = Boolean(subscriptionAlert.compareDocumentPosition(pageContents) & Node.DOCUMENT_POSITION_FOLLOWING);
+      expect(pageContentsComesAfterAlertBanner).toBe(true);
+    });
   }
-}`,...(f=(k=l.parameters)==null?void 0:k.docs)==null?void 0:f.source},description:{story:'`AlertBannerProvider` should wrap the whole app so its DOM element is put at the top of the page,\nand renders an aria-live region that will be announced as "Alerts, warnings, and updates".\nScreen readers users will remind (and can navigate to) the region when alerts will be announced.',...(T=(O=l.parameters)==null?void 0:O.docs)==null?void 0:T.description}}};var _,S,I;p.parameters={...p.parameters,docs:{...(_=p.parameters)==null?void 0:_.docs,source:{originalSource:`{
+}`,...(I=(T=l.parameters)==null?void 0:T.docs)==null?void 0:I.source},description:{story:'`AlertBannerProvider` should wrap the whole app so its DOM element is put at the top of the page,\nand renders an aria-live region that will be announced as "Alerts, warnings, and updates".\nScreen readers users will remind (and can navigate to) the region when alerts will be announced.',...(P=(_=l.parameters)==null?void 0:_.docs)==null?void 0:P.description}}};var S,j,W;m.parameters={...m.parameters,docs:{...(S=m.parameters)==null?void 0:S.docs,source:{originalSource:`{
   render: function Story() {
     return <AlertBannerProvider>
                 <AlertBanner variant="warning" description={LOREM_IPSUM_LONG} action={<Button onClick={callback.actionOnClick}>Try again</Button>} />
@@ -109,4 +121,4 @@ of the page.
                 <AlertBanner variant="warning" description={LOREM_IPSUM_LONG} action={<Button onClick={callback.actionOnClick}>{LOREM_IPSUM_SHORT}</Button>} />
             </AlertBannerProvider>;
   }
-}`,...(I=(S=p.parameters)==null?void 0:S.docs)==null?void 0:I.source}}};const pe=["Variants","Accessibility","AlertBannerProviderAccessibility","LongContents"];export{c as Accessibility,l as AlertBannerProviderAccessibility,p as LongContents,u as Variants,pe as __namedExportsOrder,ue as default};
+}`,...(W=(j=m.parameters)==null?void 0:j.docs)==null?void 0:W.source}}};const pe=["Variants","Accessibility","AlertBannerProviderAccessibility","LongContents"];export{c as Accessibility,l as AlertBannerProviderAccessibility,m as LongContents,p as Variants,pe as __namedExportsOrder,ue as default};