@preply/ds-docs 11.0.0 → 11.1.0

package/dist/assets/30.storybook-B_OtmSNE.js

@@ -1,42 +0,0 @@
-import{j as o,M as s}from"./iframe-B_74HtSc.js";import{useMDXComponents as t}from"./index-DWFFXgf1.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"}),`
-`,o.jsxs(e.p,{children:["You need to install ",o.jsx(e.code,{children:"@preply/ds-web-root"})," which provides a single entry point to instantiate all the necessary resources in Storybook docs. Additionally, we need to add ",o.jsx(e.code,{children:"@preply/ds-web-lib"})," to ",o.jsx(e.code,{children:"devDependencies"})," as well."]}),`
-`,o.jsx(e.pre,{children:o.jsx(e.code,{children:`yarn add --dev @preply/ds-web-root @preply/ds-web/lib
-`})}),`
-`,o.jsx(e.h2,{id:"configure-storybook",children:"Configure Storybook"}),`
-`,o.jsxs(e.p,{children:["We need to add ",o.jsx(e.code,{children:"<RootProvider/>"})," to Storybook's decorators."]}),`
-`,o.jsx(e.p,{children:"How to achieve this will depend on your Storybook is configured."}),`
-`,o.jsxs(e.p,{children:["In case your Storybook uses a ",o.jsx(e.code,{children:"config.js"})," file to do so, add a decorater with ",o.jsx(e.code,{children:"RootProvider"}),"."]}),`
-`,o.jsx(e.pre,{children:o.jsx(e.code,{className:"language-javascript",children:`import { RootProvider } from '@preply/ds-web-root';
-
-function withDSProvider(storyFn) {
-    return (
-        <RootProvider target={window.document.body} theme="tokyo-ui">
-            {storyFn()}
-        </RootProvider>
-    );
-}
-
-addDecorator(withDSProvider);
-`})}),`
-`,o.jsxs(e.p,{children:["In case you are using a ",o.jsx(e.code,{children:"preview.ts"})," file, you will need to export ",o.jsx(e.code,{children:"decorators"})," from there. You can define your decorators in a separator ",o.jsx(e.code,{children:"tsx"})," file, such as ",o.jsx(e.code,{children:"decorators.tsx"}),"."]}),`
-`,o.jsx(e.pre,{children:o.jsx(e.code,{className:"language-tsx",children:`// decorators.ts
-import { RootProvider } from '@preply/ds-web-root';
-
-export const withProviders = Story => (
-    ...
-    <RootProvider target={document.body} theme="tokyo-ui">
-        ...
-        <Story />
-    </RootProviderBeta>
-    ...
-);
-
-// preview.ts
-import { withProviders } from './decorators';
-
-export const decorators = [withProviders];
-`})}),`
-`,o.jsxs(e.p,{children:["See also: ",o.jsx(e.a,{href:"https://storybook.js.org/docs/react/writing-stories/decorators",rel:"nofollow",children:"Storybook's official docs"}),"."]})]})}function a(r={}){const{wrapper:e}={...t(),...r.components};return e?o.jsx(e,{...r,children:o.jsx(n,{...r})}):n(r)}export{a as default};

package/dist/assets/40.illustrations.explorer-Pi9iaQwM.js

@@ -1,21 +0,0 @@
-import{j as t,M as a}from"./iframe-B_74HtSc.js";import{useMDXComponents as r}from"./index-DWFFXgf1.js";import{L as c}from"./LayoutGrid-CUGRXgEO.js";import{d as e}from"./styled-components.browser.esm-rrOBirU4.js";import{g as i}from"./getTokenVar-CVkrm5Qs.js";import{s as u,c as l}from"./tokens-im-qJUCZ.js";import"./preload-helper-Dp1pzeXC.js";import"./breakpoints-BfMlrtxE.js";import"./layout-relative.module-1z75aSwo-Dcy7i8oK.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;
-    background-size: 50px 50px;
-    background-color: ${i(l.background.tertiary)};
-    background-image: linear-gradient(
-        45deg,
-        ${i(l.background.secondary)} 25%,
-        transparent 25%,
-        transparent 50%,
-        ${i(l.background.secondary)} 50%,
-        ${i(l.background.secondary)} 75%,
-        transparent 75%,
-        transparent
-    );
-`,d=({svgUrl:s})=>t.jsx("div",{style:{width:"80%"},children:t.jsxs("a",{href:s,target:"_blank",rel:"noreferrer",children:[s.replace("https://static.preply.com/ds/illustrations/tokyo-ui/",""),t.jsx("img",{src:s,alt:"TODO:"})]})}),g=()=>t.jsx(y,{children:t.jsx(c,{columns:["25% 25% 25% 25%"],gap:"16",children:n.map(s=>t.jsx(d,{svgUrl:s},s))})});function p(s){const o={a:"a",h1:"h1",p:"p",...r(),...s.components};return t.jsxs(t.Fragment,{children:[t.jsx(a,{title:"Guides/Assets/Illustration Explorer"}),`
-`,t.jsx(o.h1,{id:"illustration-explorer",children:"Illustration Explorer"}),`
-`,t.jsxs(o.p,{children:["Don't see the illustration you're looking for? You can follow ",t.jsx(o.a,{href:"https://preply.atlassian.net/wiki/spaces/PDS/pages/4332584962/Hosting+new+illustration",rel:"nofollow",children:"this guide"}),` to upload it yourself, it's super easy! Or reach out to us in
-`,t.jsx(o.a,{href:"https://preply.slack.com/archives/C024EAEHP6V",rel:"nofollow",children:"#design-system-public"}),"."]}),`
-`,t.jsx(g,{})]})}function z(s={}){const{wrapper:o}={...r(),...s.components};return o?t.jsx(o,{...s,children:t.jsx(p,{...s})}):p(s)}export{z as default};

package/dist/assets/90.advanced-tEkbHxcl.js

@@ -1,32 +0,0 @@
-import{j as e,M as i}from"./iframe-B_74HtSc.js";import{useMDXComponents as t}from"./index-DWFFXgf1.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."]}),`
-`,e.jsx(o.p,{children:"Plans exist to allow injecting a local theme during instantation."}),`
-`,e.jsx(o.p,{children:"Meanwhile, if you want to experiment with this, you can roll your own implementation in a few lines of code."}),`
-`,e.jsx(o.pre,{children:e.jsx(o.code,{className:"language-tsx",children:`import type { ThemeName } from '@preply/ds-core';
-import { COLOR_SCHEME_DEFAULT } from '@preply/ds-core';
-import {
-    ColorSchemeProvider,
-    ThemeProvider,
-    ThemesProvider,
-    colorSchemes,
-} from '@preply/ds-web-core';
-import React, { FC } from 'react';
-
-import type { RootTarget } from '@preply/ds-web-root';
-import { Root, themes } from '@preply/ds-web-root';
-
-const MY_THEME: ThemeName = 'my-theme';
-themes[MY_THEME] = new Theme(...);
-
-export const RootProvider: FC = ({ children }) => (
-    <ThemesProvider themes={Object.values(themes)} colorSchemes={colorSchemes}>
-        <ThemeProvider theme={MY_THEME}>
-            <ColorSchemeProvider colorScheme={COLOR_SCHEME_DEFAULT}>
-                <Root target={document.body}>{children}</Root>
-            </ColorSchemeProvider>
-        </ThemeProvider>
-    </ThemesProvider>
-);
-`})})]})}function c(n={}){const{wrapper:o}={...t(),...n.components};return o?e.jsx(o,{...n,children:e.jsx(r,{...n})}):r(n)}export{c as default};

package/dist/assets/Accordion-2avWtqXz.js

@@ -1,23 +0,0 @@
-import{r as o,j as r,g as s}from"./iframe-B_74HtSc.js";import{F as y}from"./TokyoUIChevronDown-DiBNbDdz.js";import{I as A}from"./Icon-CC0yjdx9.js";import{T as f}from"./Text-DvShrljd.js";import{u as g}from"./useMergeRefs-Caz9hOck.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"}]}},"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
-instances to make the whole Accordion exclusive.
-@example <Accordion>
-    <AccordionItem name="choose-subscription-duration">
-        <AccordionHeader>
-            Two-week subscription
-        </AccordionHeader>
-        <AccordionContent>We will charge you every two weeks.</AccordionContent>
-    </AccordionItem>
-    <AccordionItem name="choose-subscription-duration">
-        <AccordionHeader>
-            Four-week subscription
-        </AccordionHeader>
-        <AccordionContent>We will charge you every four weeks.</AccordionContent>
-    </AccordionItem>
-</Accordion>`,name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
-@example <AccordionItem dataset={{ 'qa-id': 'best-tutor-platform' }} /> // will add data-qa-id="best-tutor-platform" to the HTML element.`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLDetailsElement | null) => void"},{value:"RefObject<HTMLDetailsElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}try{d.displayName="AccordionHeader",d.__docgenInfo={description:"The header of a single `Accordion` item, to be used in conjunction with AccordionItem and wrapped inside AccordionContent.",displayName:"AccordionHeader",props:{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<HTMLElement>"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLDetailsElement | null) => void"},{value:"RefObject<HTMLDetailsElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}try{m.displayName="AccordionContent",m.__docgenInfo={description:"The content of a single `Accordion` item, to be used in conjunction with AccordionHeader wrapped inside AccordionContent.",displayName:"AccordionContent",props:{dataset:{defaultValue:null,description:`Sets data attributes on the DOM element.
-@example <AccordionItem dataset={{ 'qa-id': 'best-tutor-platform' }} /> // will add data-qa-id="best-tutor-platform" to the HTML element.`,name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},ref:{defaultValue:null,description:"Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null`\n(or call the ref with `null` if you passed a callback ref).\n@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}",name:"ref",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"(instance: HTMLDetailsElement | null) => void"},{value:"RefObject<HTMLDetailsElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{c as A,u as a,d as b,m as c};

package/dist/assets/Accordion-DBIXJNVb.css

@@ -1 +0,0 @@
-.accordion__OKb-C{box-sizing:border-box;min-width:100%}.accordion__OKb-C details{border-bottom:solid 1px var(--c03289)}.accordion__OKb-C details>summary{list-style:none;padding-top:var(--558c4c);padding-bottom:var(--558c4c);padding-right:var(--66b80b)}.accordion__OKb-C details summary::-webkit-details-marker{display:none}.accordion__OKb-C details :focus-visible{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.accordion__OKb-C details._--dsInternalSimulation-focus__7V0NR>summary{outline-style:solid;outline-color:var(--603ec6);outline-width:var(--99d31f);outline-offset:var(--c0b12c)}.accordion__OKb-C summary{cursor:pointer;display:flex;gap:var(--66b80b)}.accordion__OKb-C summary>[data-preply-ds-component=Text]{flex:1}.accordion__OKb-C summary>[data-preply-ds-component=Icon]{-webkit-user-select:none;user-select:none}.accordion__OKb-C summary>[data-preply-ds-component=Icon]{transition:transform var(--018058);transform:rotate(0)}.accordion__OKb-C details[open] summary>[data-preply-ds-component=Icon]{transform:rotate(180deg)}.accordion__OKb-C details::details-content{block-size:0;overflow:hidden;transition-property:block-size,content-visibility,opacity;transition-duration:var(--970975);transition-timing-function:var(--1f4492);transition-behavior:allow-discrete;opacity:0}.accordion__OKb-C details[open]::details-content{padding-bottom:var(--813599);block-size:auto;opacity:1}.accordion__OKb-C details[open]:not(._--dsInternalSimulation-noAnimation__nuNUW)::details-content{block-size:calc-size(auto,size)}

package/dist/assets/AlertBanner.primitives.stories-DpA-of6O.js

@@ -1,14 +0,0 @@
-import{j as r}from"./iframe-B_74HtSc.js";import{F as l}from"./TokyoUISparkle-DPOw7W2T.js";import{A as s,a as m,b as e,c,d as p}from"./AlertBannerAction-D14MnnIA.js";import{B as u}from"./Button-C0Um_QuO.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUICheck-DQLX_x10.js";import"./TokyoUIErrorWarning-GuwQvo24.js";import"./Icon-CC0yjdx9.js";import"./text-accent-BQ9POoE5.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-MT6RlyNs.js";import"./componentNames-hc9KR2nX.js";import"./index-DIqvfT2b.js";import"./VisuallyHidden-fvo3PSUE.js";import"./Text-DvShrljd.js";import"./text-centered-BEaaxMgl.js";import"./message-DJT5rp5J.js";import"./IconButton-BpjNyYgD.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.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}>
-                <AlertBannerIcon svg={TokyoUISparkle} />
-                <AlertBannerText>Custom banner built with primitives.</AlertBannerText>
-                <AlertBannerAction>
-                    <Button variant="onColor" size={'large'}>
-                        Custom action
-                    </Button>
-                </AlertBannerAction>
-            </AlertBannerRoot>
-        </AlertBannerProvider>;
-}`,...(a=(i=t.parameters)==null?void 0:i.docs)==null?void 0:a.source}}};const V=["Primitives"];export{t as Primitives,V as __namedExportsOrder,U as default};

package/dist/assets/AlertBanner.stories-B7xxyCn2.js

@@ -1,124 +0,0 @@
-import{g as R,j as e}from"./iframe-B_74HtSc.js";import{b as E,c as H,A as L,a as N,d}from"./AlertBannerAction-D14MnnIA.js";import{w as M}from"./componentNames-hc9KR2nX.js";import{B as s}from"./Button-C0Um_QuO.js";import"./preload-helper-Dp1pzeXC.js";import"./TokyoUICheck-DQLX_x10.js";import"./TokyoUIErrorWarning-GuwQvo24.js";import"./Icon-CC0yjdx9.js";import"./text-accent-BQ9POoE5.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-MT6RlyNs.js";import"./index-DIqvfT2b.js";import"./VisuallyHidden-fvo3PSUE.js";import"./Text-DvShrljd.js";import"./text-centered-BEaaxMgl.js";import"./message-DJT5rp5J.js";import"./IconButton-BpjNyYgD.js";import"./ButtonBase-HkSfLFbE.js";import"./Spinner-8-RB4YZR.js";import"./useMergeRefs-Caz9hOck.js";import"./useHostname-CbpnzdHv.js";import"./index-CC6DAVyL.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.
-
-To build a DS compliant banner, use:
-- \`CalloutBannerIcon\` to add an icon to the banner
-- \`CalloutBannerText\` to add a text to the banner
-- \`CalloutBannerDismissButton\` to add a dismiss button to the banner
-
-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: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: {
-      modes: {
-        'narrow-l': {
-          viewport: 'narrow-l'
-        },
-        'medium-l': {
-          viewport: 'medium-l'
-        }
-      }
-    }
-  },
-  render: function Story() {
-    return <AlertBannerProvider>
-                <AlertBanner variant="critical" description="We can't renew your subscription." action={<Button onClick={callback.actionOnClick}>Try again</Button>} />
-                <AlertBanner variant="warning" description="Your credit card is about to expire." action={<Button onClick={callback.actionOnClick}>Change payment method</Button>} />
-                <AlertBanner variant="positive" description="Your subscription has been renewed successfully." action={<Button onClick={callback.actionOnClick}>Book the next lesson</Button>} />
-            </AlertBannerProvider>;
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    const tryAgain = await canvas.findByRole('button', {
-      name: /Try again/
-    });
-    await step('actionOnClick is not called', async () => {
-      expect(callback.actionOnClick).not.toBeCalled();
-    });
-    await step('actionOnClick is called', async () => {
-      await userEvent.click(tryAgain);
-      expect(callback.actionOnClick).toBeCalled();
-    });
-  }
-}`,...(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={{
-        testId: 'subscriptionAlert'
-      }} />
-                <AlertBanner variant="warning" description="Your credit card is about to expire." action={<Button onClick={callback.actionOnClick}>Change payment method</Button>} dataset={{
-        testid: 'paymentWarning'
-      }} />
-                <AlertBanner variant="positive" description="Your subscription has been renewed successfully." action={<Button onClick={callback.actionOnClick}>Book the next lesson</Button>} dataset={{
-        testid: 'subscriptionRenewed'
-      }} />
-            </AlertBannerProvider>;
-  },
-  play: async ({
-    canvas,
-    step
-  }) => {
-    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");
-    });
-    await step('Warning banners are prefixed with "Warning:" to allow screen reader users to recall the alerts region', async () => {
-      const paymentWarning = await canvas.findByTestId('paymentWarning');
-      await expect(paymentWarning).toHaveTextContent('Warning: Your credit card is about to expire.Change payment method');
-    });
-    await step('Positive banners are prefixed with "Update:" to allow screen reader users to recall the updates region', async () => {
-      const paymentWarning = await canvas.findByTestId('subscriptionRenewed');
-      await expect(paymentWarning).toHaveTextContent('Update: Your subscription has been renewed successfully.Book the next lesson');
-    });
-  }
-}`,...(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`,...(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">
-                <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,
-    step
-  }) => {
-    const host = canvas.getByTestId('alertBannerHostId');
-    await step('The host is announced as "Alerts, warnings, and updates"', async () => {
-      await expect(host).toHaveAccessibleName('Alerts, warnings, and updates');
-    });
-    await step('The host renders an aria-live region', async () => {
-      await expect(host).toHaveAttribute('aria-live');
-      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);
-    });
-  }
-}`,...(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>} />
-                <AlertBanner variant="warning" description={"We can't renew your subscription."} action={<Button onClick={callback.actionOnClick}>{LOREM_IPSUM_SHORT}</Button>} />
-                <AlertBanner variant="warning" description={LOREM_IPSUM_LONG} action={<Button onClick={callback.actionOnClick}>{LOREM_IPSUM_SHORT}</Button>} />
-            </AlertBannerProvider>;
-  }
-}`,...(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};