import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{ht as r,t as i,y as a}from"./dist-DtfJeYQK.js";import{t as o}from"./react-dom-CLuuWI32.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{n as c,t as l}from"./dist-Cc1j9Pjk.js";import{n as ee,t as u}from"./Icon-0Ag8a3l4.js";import{n as te,t as ne}from"./Text-DO3xXyuu.js";import{n as re}from"./Heading-BfSBs5r6.js";import{n as ie,t as ae}from"./Button-DqcfuOFN.js";import{r as oe}from"./OnboardingTooltip-CFzGjB8g.js";import{i as d,o as se,r as ce}from"./lib-8ue2PVWI.js";import{n as le}from"./AlertDialog-Ch0EK-Yl.js";import{n as ue,t as de}from"./TokyoUICheck-BxTDosuA.js";import{i as fe,n as pe,r as me,t as he}from"./TokyoUIErrorWarning-BH93ehx8.js";import{n as ge,t as _e}from"./VisuallyHidden-CpMYtDeS.js";import{n as ve,t as ye}from"./IconButton-DZfzVk_P.js";import{n as be}from"./Checkbox-BV4Be-fH.js";import{r as xe}from"./SingleSelectChips-LWIrPL__.js";import{r as Se}from"./MultiSelectChips-BYVsjk5i.js";import{r as Ce}from"./DismissibleChips-DQoX2eU1.js";import{l as f,u as we}from"./DialogCloseButton-DhTvKFyC.js";import{n as Te}from"./Dialog-B7WqtEle.js";import{a as Ee,o as De}from"./DialogActions-CBrYxadt.js";import{n as Oe,r as ke,t as p}from"./Steps-DqxHd6g-.js";import{u as Ae}from"./DropdownMenu-DkqSxc9y.js";import{n as je}from"./FormControl-De3NG2dC.js";import{n as Me}from"./LayoutFlex-BKX2c6Gj.js";import{n as Ne}from"./NumberField-DabUVK50.js";import{n as Pe}from"./PasswordField-BxtwGoHI.js";import{i as Fe}from"./SelectField-CNiWMCCv.js";import{r as Ie}from"./Slider-C-KoI6Ss.js";import{n as Le}from"./RangeSlider-BUc61tOj.js";import{n as Re}from"./Switch-jl9s03cr.js";import{n as ze}from"./TextareaField-TjUyuIta.js";import{n as Be}from"./TextField-pYky-xw8.js";import{n as Ve}from"./Tooltip-F-35Ygr4.js";var m,h,He,Ue,g,_,v=t((()=>{m=`alertBannerHost__NKFyB`,h=`alertBanner__Dje2u`,He=`icon__xEAyT`,Ue=`description__4PDHP`,g=`action__0gYZG`,_={alertBannerHost:m,alertBanner:h,icon:He,description:Ue,action:g}}));function y(){let e=(0,x.useContext)(C);if(!e)throw Error(`useAlertBannerHost must be used within AlertBannerHostContext`);return e.hostEl}function b({children:e,...t}){let[n,r]=(0,x.useState)(null),{formatMessage:i}=se();return(0,S.jsxs)(C.Provider,{value:{hostEl:n},children:[(0,S.jsx)(`div`,{className:_.alertBannerHost,role:`region`,"aria-live":`polite`,"aria-atomic":`false`,"aria-label":i({id:`preply-ds.alert-banner.host-region`,defaultMessage:`Alerts, warnings, and updates`,description:`It's announced by screen readers when they scan the content of the page, and they find the alert banners container.`}),ref:r,...t}),e]})}var x,S,C,w=t((()=>{x=e(n(),1),v(),ce(),S=s(),C=(0,x.createContext)({hostEl:null});try{y.displayName=`useAlertBannerHost`,y.__docgenInfo={description:"If you have issues with AlertBannerHostContext, ensures `AlertBannerProvider` is put at the top of\nyour app component tree",displayName:`useAlertBannerHost`,props:{}}}catch{}try{b.displayName=`AlertBannerProvider`,b.__docgenInfo={description:`A region where all the \`AlertBanner\`s will be rendered into, and announced accordingly. It should
be the first element of the page.

From an affordance perspective:
1. Sighted users can see the page-wide banner with their eyes. The visual prominence ensures the
alerts are noticed.
2. Screen readers announce the banners when they are added, and the text content of the banner
help the users to understand the level of importance.

For blind users readers, it's important that AlertBannerProvider wraps the whole app so its DOM
element is put at the top of the page, because:
1. Screen readers announce the banner contents, but don't allow users to navigate to them and
interact with them.
2. So, if this element is put on the top of the page, screen readers wil read the label ("Alerts,
warnings, and updates") as the first element, so the users are aware since the beginning that
there is a dedicated region for alerts.
3. When an alert appears, it's announced with something like "Alert: we can't renew your
subscription", and they can connect the initially announced region with the newly appeared alert.
4. They can then navigate to the alerts region, and interact with the alert actions.`,displayName:`AlertBannerProvider`,props:{}}}catch{}})),T,We,E,D,O,Ge,k=t((()=>{T=e(n(),1),v(),We=e(o(),1),w(),E=s(),D=(0,T.createContext)({variant:`positive`}),O=(0,T.forwardRef)(function(e,t){let n=y();return n?(0,We.createPortal)((0,E.jsx)(Ge,{ref:t,...e}),n):null}),Ge=(0,T.forwardRef)(function({className:e,variant:t,...n},r){let i=[_.alertBanner,e].filter(Boolean).join(` `);return(0,E.jsx)(D.Provider,{value:{variant:t},children:(0,E.jsx)(`div`,{ref:r,className:i,"data-preply-ds-component":`AlertBannerRoot`,"data-variant":t,...n})})});try{O.displayName=`AlertBannerRoot`,O.__docgenInfo={description:``,displayName:`AlertBannerRoot`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!0,type:{name:`enum`,value:[{value:`"positive"`},{value:`"warning"`},{value:`"critical"`}]}},dataset:{defaultValue:null,description:"@deprecated Pass data attributes as regular props instead (`data-testid` for instance)",name:`dataset`,required:!1,type:{name:`undefined`}}}}}catch{}})),A,j,M,N,P,F,I,Ke=t((()=>{A=e(n(),1),ue(),fe(),pe(),ee(),v(),k(),j=s(),M=()=>(0,j.jsx)(u,{svg:de,size:`24`}),N=()=>(0,j.jsx)(u,{svg:he,size:`24`}),P=()=>(0,j.jsx)(u,{svg:me,size:`24`}),F={positive:M,warning:N,critical:P},I=(0,A.forwardRef)(function({svg:e,children:t,className:n=``},r){let{variant:i}=(0,A.useContext)(D),a=[_.icon,n].join(` `),o=null;return t?o=t:e?o=(0,j.jsx)(u,{svg:e,size:`24`}):i&&i in F&&(o=F[i]()),o?(0,j.jsx)(`div`,{ref:r,className:a,children:o}):null});try{M.displayName=`AlertBannerPositiveIcon`,M.__docgenInfo={description:`Positive icon for the AlertBanner.`,displayName:`AlertBannerPositiveIcon`,props:{}}}catch{}try{N.displayName=`AlertBannerWarningIcon`,N.__docgenInfo={description:`Warning icon for the AlertBanner.`,displayName:`AlertBannerWarningIcon`,props:{}}}catch{}try{P.displayName=`AlertBannerCriticalIcon`,P.__docgenInfo={description:`Critical icon for the AlertBanner.`,displayName:`AlertBannerCriticalIcon`,props:{}}}catch{}try{I.displayName=`AlertBannerIcon`,I.__docgenInfo={description:"An icon for the alert banner.\n\nThis component will render the appropriate icon based on the parent\n`AlertBannerRoot` component's `variant` prop — these semantic icons are also\nexported for the following variants:\n- `positive` -> `<AlertBannerPositiveIcon />`\n- `warning` -> `<AlertBannerWarningIcon />`\n- `critical` -> `<AlertBannerCriticalIcon />`\n\nThe icon can be overridden by passing a custom SVG icon via the `svg` prop.\n\nIf you want to place any leading element inside of the `AlertBanner`,\nwith the same spacing as the icon, you can pass it as a child element.\n\nNote: The root of this component is a `div` element. You can use the\n`className` prop to override the default styles for the **container**.",displayName:`AlertBannerIcon`,props:{svg:{defaultValue:null,description:``,name:`svg`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},className:{defaultValue:{value:``},description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),L,R,qe,z,Je=t((()=>{L=e(n(),1),ce(),X(),ge(),v(),k(),R=s(),qe={critical:(0,R.jsx)(d,{id:`preply-ds.alert-banner.critical-prefix`,defaultMessage:`Alert:`,description:`Prefix every alert banner shown to the user. It's announced by screen readers as 'Alert: 'the alert message (for instance: 'Alert: We can't renew your subscription.').`}),warning:(0,R.jsx)(d,{id:`preply-ds.alert-banner.warning-prefix`,defaultMessage:`Warning:`,description:`Prefix every warning banner shown to the user. It's announced by screen readers as 'Warning: 'the alert message (for instance: 'Warning: Your credit card is about to expire.').`}),positive:(0,R.jsx)(d,{id:`preply-ds.alert-banner.positive-prefix`,defaultMessage:`Update:`,description:`Prefix every positive banner shown to the user. It's announced by screen readers as 'Warning: 'the alert message (for instance: 'Warning: Your subscription has been renewed successfully.').`})},z=(0,L.forwardRef)(function({className:e,children:t,...n},r){let{variant:i}=(0,L.useContext)(D);return(0,R.jsxs)(ne,{ref:r,variant:`default-regular`,accent:`primary`,className:[_.description,e].filter(Boolean).join(` `),...n,children:[(0,R.jsx)(_e,{children:qe[i]}),` `,t]})});try{z.displayName=`AlertBannerText`,z.__docgenInfo={description:"The AlertBannerText is a container which defaults to displaying a `Text` child with a\n`default-regular` variant, which can be overridden with the `children` prop. The passed text is\nalso prefixed with a visually hidden text to allow screen reader user to remind of the existence\nof the region rendered by `AlertBannerProvider`.",displayName:`AlertBannerText`,props:{variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"caption-regular"`},{value:`"caption-semibold"`},{value:`"small-regular"`},{value:`"small-regular-italic"`},{value:`"small-semibold"`},{value:`"small-semibold-italic"`},{value:`"default-regular"`},{value:`"default-regular-italic"`},{value:`"default-semibold"`},{value:`"default-semibold-italic"`},{value:`"large-regular"`},{value:`"large-regular-italic"`},{value:`"large-semibold"`},{value:`"large-semibold-italic"`},{value:`ResponsiveProp<TextVariant>`}]}},accent:{defaultValue:null,description:``,name:`accent`,required:!1,type:{name:`enum`,value:[{value:`"placeholder"`},{value:`"info"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`},{value:`"accentDark"`},{value:`"inverted"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`}]}},strong:{defaultValue:null,description:``,name:`strong`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},ellipsed:{defaultValue:null,description:``,name:`ellipsed`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},centered:{defaultValue:null,description:``,name:`centered`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},tag:{defaultValue:null,description:``,name:`tag`,required:!1,type:{name:`enum`,value:[{value:`"div"`},{value:`"p"`},{value:`"span"`}]}},dataset:{defaultValue:null,description:"@deprecated Pass data attributes as regular props instead (`data-testid` for instance)",name:`dataset`,required:!1,type:{name:`undefined`}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}}}}}catch{}})),B,V,Ye=t((()=>{e(n(),1),i(),l(),k(),Ke(),Je(),$(),B=s(),V=e=>{let{variant:t,description:n,action:i,dataset:a}=e;return(0,B.jsxs)(O,{variant:t,...r(a,{preplyDsComponent:c.AlertBanner}),children:[(0,B.jsx)(I,{}),(0,B.jsx)(z,{children:n}),(0,B.jsx)(Q,{children:i})]})};try{V.displayName=`AlertBanner`,V.__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{}}));function H({primaryButton:e,nextButton:t=(0,U.jsx)(K,{}),previousButton:n=(0,U.jsx)(q,{})}){let{currentStep:r,totalSteps:i}=ke(),a=r===1,o=r===i;return(0,U.jsx)(Ee,{children:(0,U.jsxs)(`div`,{className:f.stepControls,"data-preply-ds-component":c.DialogSteps,children:[!a&&(0,U.jsx)(`div`,{className:f.previous,"data-preply-ds-component":c.DialogStepsPreviousContainer,children:n}),(0,U.jsx)(`div`,{className:f.next,"data-preply-ds-component":c.DialogStepsNextContainer,children:o?e:t})]})})}var U,W,G,K,q,Xe=t((()=>{e(n(),1),Oe(),we(),De(),l(),U=s(),W=p,G=p.Step,K=p.Next,q=p.Previous;try{H.displayName=`DialogStepsActions`,H.__docgenInfo={description:`Wrapper around the Steps actions for usage in Dialog.`,displayName:`DialogStepsActions`,props:{primaryButton:{defaultValue:null,description:`Primary action button.

This button will be displayed on the last step.
@example <DialogStepsActions
 primaryButton={<Button size="medium" variant="primary" onClick={() => {}}>Finish</Button>}
/>`,name:`primaryButton`,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`}]}},nextButton:{defaultValue:{value:`<DialogStepsNext />`},description:`Next step button.

This button will be used on all steps except the last one. When not provided, a default button will be used.
@example <DialogStepsActions
 nextButton={<DialogStepsNext onClick={() => {}}>Next</DialogStepsNext>}
/>`,name:`nextButton`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},previousButton:{defaultValue:{value:`<DialogStepsPrevious />`},description:`Previous step button.

This button will be used on all steps except the first one. When not provided, a default button will be used.
@example <DialogStepsActions
 previousButton={<DialogStepsPrevious onClick={() => {}}>Previous</DialogStepsPrevious>}
/>`,name:`previousButton`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}}}}}catch{}try{W.displayName=`DialogSteps`,W.__docgenInfo={description:``,displayName:`DialogSteps`,props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
@example 'Onboarding Steps', 'Checkout Steps', 'Survey Steps', etc.`,name:`aria-label`,required:!0,type:{name:`string`}},initialStep:{defaultValue:{value:`1`},description:"The initial step to start at (from `1` to `children.length`).",name:`initialStep`,required:!1,type:{name:`enum`,value:[{value:`number`}]}},onStepChange:{defaultValue:null,description:`Optional callback to control navigation between steps.

This is triggered either by using the \`Steps.Previous\` and \`Steps.Next\`
components, or by calling \`goToPreviousStep\`, \`goToNextStep\`, or
\`goToStep\` from the \`StepsContext\`.

Can be used to:
- Skip/redirect steps conditionally
- Perform async process (e.g. validation) on step changes, marking the
  element as busy/loading
@param currentStep The current step (1-based)
@param nextStep The next, incoming step
@returns Promise that resolves to:
- \`undefined\`: proceed with default navigation
- \`number\`: override the destination step
@example Add async validation
const handleStepChange = async (current, next) => {
await validateStep(current);
return next;
};
@example Skip a step
const handleStepChange = async (current, next) => {
if (next === 2) return 3; // Skip step 2
return next;
};`,name:`onStepChange`,required:!1,type:{name:`enum`,value:[{value:`(currentStep: number, nextStep: number) => number | Promise<number | undefined> | undefined`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}}}}}catch{}try{G.displayName=`DialogStep`,G.__docgenInfo={description:``,displayName:`DialogStep`,props:{title:{defaultValue:null,description:`Main heading for the step.`,name:`title`,required:!0,type:{name:`enum`,value:[{value:`undefined`},{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},description:{defaultValue:null,description:`Optional description text displayed below the title.`,name:`description`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}},hideHeader:{defaultValue:null,description:`If true, hides the step title and description.`,name:`hideHeader`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},children:{defaultValue:null,description:`Step content.`,name:`children`,required:!1,type:{name:`enum`,value:[{value:`null`},{value:`string`},{value:`number`},{value:`false`},{value:`true`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`},{value:`Iterable<ReactNode>`},{value:`ReactPortal`}]}}}}}catch{}try{K.displayName=`DialogStepsNext`,K.__docgenInfo={description:``,displayName:`DialogStepsNext`,props:{size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"critical"`},{value:`"inverted"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},as:{defaultValue:null,description:`Custom element to render the button.

Allows rendering the button using a different React element or component.
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
@example // Render as a react router link component
import { Link } from 'react-router-dom';

<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';

<Button leadingSvgIcon={TokyoUITag}>Button</Button>
or
<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`leadingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';

<Button trailingSvgIcon={TokyoUITag}>Button</Button>
or
<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`trailingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}try{q.displayName=`DialogStepsPrevious`,q.__docgenInfo={description:``,displayName:`DialogStepsPrevious`,props:{size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"critical"`},{value:`"inverted"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},as:{defaultValue:null,description:`Custom element to render the button.

Allows rendering the button using a different React element or component.
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
@example // Render as a react router link component
import { Link } from 'react-router-dom';

<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';

<Button leadingSvgIcon={TokyoUITag}>Button</Button>
or
<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`leadingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';

<Button trailingSvgIcon={TokyoUITag}>Button</Button>
or
<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`trailingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}})),Ze,Qe,$e=t((()=>{Ze=`IconTile__XlzW3`,Qe={IconTile:Ze,"IconTile--size-small":`IconTile--size-small__brJck`,"IconTile--size-base":`IconTile--size-base__gPIDE`,"IconTile--size-medium":`IconTile--size-medium__gAwOs`,"IconTile--size-large":`IconTile--size-large__M35fc`,"IconTile--tone-neutral":`IconTile--tone-neutral__IVJ2Y`,"IconTile--tone-info":`IconTile--tone-info__o2x-M`,"IconTile--tone-ai":`IconTile--tone-ai__dJp9n`,"IconTile--tone-positive":`IconTile--tone-positive__yJsa9`,"IconTile--tone-warning":`IconTile--tone-warning__q8yaj`,"IconTile--tone-critical":`IconTile--tone-critical__iAjl0`}}));function et(e){switch(e){case`small`:return`16`;case`medium`:return`32`;case`large`:return`48`}return`24`}var tt,J,Y,nt=t((()=>{i(),tt=e(n(),1),$e(),l(),X(),J=s(),Y=(0,tt.forwardRef)(function({size:e=`base`,tone:t=`neutral`,dataset:n,...i},o){return(0,J.jsx)(`span`,{className:a(Qe,c.IconTile,[`size-${e}`,`tone-${t}`]).join(` `),...r(n,{preplyDsComponent:c.IconTile}),children:(0,J.jsx)(u,{...i,accent:`primary`,size:et(e),ref:o})})});try{Y.displayName=`IconTile`,Y.__docgenInfo={description:``,displayName:`IconTile`,props:{dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},label:{defaultValue:null,description:"If using the icon without any adjacent descriptive text, use this prop to\nprovide an `aria-label` for assistive technologies.",name:`label`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},svg:{defaultValue:null,description:``,name:`svg`,required:!0,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`}]}},size:{defaultValue:{value:`base`},description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`"base"`}]}},tone:{defaultValue:{value:`neutral`},description:``,name:`tone`,required:!1,type:{name:`enum`,value:[{value:`"neutral"`},{value:`"info"`},{value:`"ai"`},{value:`"positive"`},{value:`"warning"`},{value:`"critical"`}]}}}}}catch{}})),X=t((()=>{le(),w(),ie(),be(),xe(),Se(),Ce(),Te(),Ae(),je(),re(),ee(),nt(),ve(),Me(),Ne(),oe(),Pe(),Fe(),Ie(),Le(),Re(),te(),ze(),Be(),Ve()}));function rt(e){return(0,Z.isValidElement)(e)?e.type===ae||e.type===ye:!1}var Z,it,at,Q,$=t((()=>{Z=e(n(),1),X(),v(),l(),it=s(),at={variant:`secondary`,size:`small`,wrap:!0,fullWidth:{_:!0,"medium-l":!1}},Q=(0,Z.forwardRef)(function({className:e,children:t,...n},r){let i=[_.action,e].filter(Boolean).join(` `),a=Z.Children.map(t,e=>rt(e)?(0,Z.cloneElement)(e,{...at,...e.props,ref:r,...n}):e);return(0,it.jsx)(`div`,{className:i,"data-preply-ds-component":c.AlertBannerAction,children:a})});try{Q.displayName=`AlertBannerAction`,Q.__docgenInfo={description:`The AlertBannerAction is a container that sets defaults when Button or IconButton are passed.`,displayName:`AlertBannerAction`,props:{size:{defaultValue:null,description:``,name:`size`,required:!1,type:{name:`enum`,value:[{value:`"small"`},{value:`"medium"`},{value:`"large"`},{value:`ResponsiveProp<ButtonSize>`}]}},variant:{defaultValue:null,description:``,name:`variant`,required:!1,type:{name:`enum`,value:[{value:`"ai"`},{value:`"critical"`},{value:`"inverted"`},{value:`"primary"`},{value:`"secondary"`},{value:`"tertiary"`},{value:`"quaternary"`},{value:`"ghost"`},{value:`"onColor"`},{value:`"classroom"`},{value:`"primaryB2b"`},{value:`"primaryTutor"`},{value:`"newFeature"`}]}},dataset:{defaultValue:null,description:``,name:`dataset`,required:!1,type:{name:`enum`,value:[{value:`Dataset`}]}},id:{defaultValue:null,description:``,name:`id`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onClick:{defaultValue:null,description:``,name:`onClick`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},disabled:{defaultValue:null,description:``,name:`disabled`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},onKeyDown:{defaultValue:null,description:``,name:`onKeyDown`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},onKeyUp:{defaultValue:null,description:``,name:`onKeyUp`,required:!1,type:{name:`enum`,value:[{value:`KeyboardEventHandler`}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:`url`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},className:{defaultValue:null,description:``,name:`className`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},leadingSvgIcon:{defaultValue:null,description:`The leading SVG icon.
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';

<Button leadingSvgIcon={TokyoUITag}>Button</Button>
or
<Button leadingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`leadingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},download:{defaultValue:null,description:``,name:`download`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},href:{defaultValue:null,description:``,name:`href`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},onMouseDown:{defaultValue:null,description:``,name:`onMouseDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseEnter:{defaultValue:null,description:``,name:`onMouseEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseMove:{defaultValue:null,description:``,name:`onMouseMove`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onMouseUp:{defaultValue:null,description:``,name:`onMouseUp`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerDown:{defaultValue:null,description:``,name:`onPointerDown`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},onPointerEnter:{defaultValue:null,description:``,name:`onPointerEnter`,required:!1,type:{name:`enum`,value:[{value:`MouseEventHandler`}]}},opensInNewTab:{defaultValue:null,description:``,name:`opensInNewTab`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},nofollow:{defaultValue:null,description:``,name:`nofollow`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},assistiveText:{defaultValue:null,description:``,name:`assistiveText`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},as:{defaultValue:null,description:`Custom element to render the button.

Allows rendering the button using a different React element or component.
This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
@example // Render as a react router link component
import { Link } from 'react-router-dom';

<ButtonBase as={<Link to="/home" />} />`,name:`as`,required:!1,type:{name:`enum`,value:[{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}},fullWidth:{defaultValue:null,description:``,name:`fullWidth`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`},{value:`ResponsiveProp<boolean>`}]}},wrap:{defaultValue:null,description:``,name:`wrap`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},submitsForm:{defaultValue:null,description:``,name:`submitsForm`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},busy:{defaultValue:null,description:`Replaces the content with a loading indicator.`,name:`busy`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},selected:{defaultValue:null,description:`Used only for classroom and ghost variants`,name:`selected`,required:!1,type:{name:`enum`,value:[{value:`false`},{value:`true`}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:`a11yLabel`,required:!1,type:{name:`enum`,value:[{value:`string`}]}},dsInternalSimulation:{defaultValue:null,description:`@deprecated This is meant for internal DS usage only. Do not use it in your code.
@ignore`,name:`dsInternalSimulation`,required:!1,type:{name:`enum`,value:[{value:`"hover"`},{value:`"focus"`},{value:`"active"`}]}},trailingSvgIcon:{defaultValue:null,description:`The trailing SVG icon.
@example import TokyoUITag from '@preply/ds-media-icons/dist/24/TokyoUITag.svg';

<Button trailingSvgIcon={TokyoUITag}>Button</Button>
or
<Button trailingSvgIcon={<TokyoUITag />}>Button</Button>`,name:`trailingSvgIcon`,required:!1,type:{name:`enum`,value:[{value:`ComponentClass<SVGAttributes<SVGElement>, any>`},{value:`FunctionComponent<SVGAttributes<SVGElement>>`},{value:`ReactElement<any, string | JSXElementConstructor<any>>`}]}}}}}catch{}}));export{k as _,nt as a,H as c,Ye as d,z as f,O as g,Ke as h,Y as i,Xe as l,I as m,$ as n,G as o,Je as p,X as r,W as s,Q as t,V as u,b as v,w as y};