@preply/ds-docs 3.4.1 → 3.5.0

package/dist/assets/{OnboardingTour.stories-CCcZk5b2.js → OnboardingTour.stories-BZLufj9V.js}

@@ -1,8 +1,8 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as b}from"./index-B3evPFBL.js";import{c as x}from"./OnboardingTour-Bim14xn7.js";import{T as n}from"./Text-BmdJVr9v.js";import{L as y}from"./LayoutFlex-BPtL2qZR.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-B7DJFxqL.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-BLj2hNSU.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Button-BSyqsKC5.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./Heading-B0rTmnad.js";import"./text-centered-CznToR0o.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./layout-relative.module-ed9bC4H4.js";const l=t=>null,s=t=>null;try{l.displayName="OnboardingTourProvider",l.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as b}from"./index-B3evPFBL.js";import{c as x}from"./OnboardingTour-BEArI5YV.js";import{T as n}from"./Text-BO29RJXG.js";import{L as y}from"./LayoutFlex-8uO9g6rd.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DL0b2snx.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-w2ilcPHL.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Button-w2cr0Ds_.js";import"./ButtonBase-BagNt7Ga.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./Heading-DLWgmTU5.js";import"./text-centered-CznToR0o.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./layout-relative.module-ed9bC4H4.js";const l=t=>null,s=t=>null;try{l.displayName="OnboardingTourProvider",l.__docgenInfo={description:`For some reason, storybook fails to render arg tables for the components
 when they're created with the \`createOnboardingTour\` function.
 
 As a workaround, we're manually defining fake components with the same
-props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:"OnboardingTourProvider",props:{totalSteps:{defaultValue:null,description:"Total number of steps in the tour",name:"totalSteps",required:!0,type:{name:"number"}},nextActionLabel:{defaultValue:{value:'"Next"'},description:'Label for the "Next" action button',name:"nextActionLabel",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"}]}},completeActionLabel:{defaultValue:{value:'"Got it"'},description:'Label for the "Complete" action button',name:"completeActionLabel",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Whether the tour is disabled",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tour is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onComplete:{defaultValue:null,description:"Called when the tour is completed",name:"onComplete",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onStepChange:{defaultValue:null,description:"Called when the current step index changes",name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(step: number) => void"}]}}}}}catch{}try{s.displayName="OnboardingTourStep",s.__docgenInfo={description:"",displayName:"OnboardingTourStep",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},title:{defaultValue:null,description:"",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"}]}},side:{defaultValue:null,description:"Preferred side of the tooltip to appear from. Use if default side might block important content.",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"bottom"'},{value:'"left"'}]}},text:{defaultValue:null,description:"",name:"text",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"}]}},actionOnClick:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionOnClick` to also perform other action.",name:"actionOnClick",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},autoScroll:{defaultValue:{value:"true"},description:"If true, the tooltip will automatically scroll into view when it is opened.",name:"autoScroll",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},step:{defaultValue:null,description:"Zero-based step index",name:"step",required:!0,type:{name:"number"}}}}}catch{}const o=x(),se={title:"Components/OnboardingTour",component:l,subcomponents:{OnboardingTourStep:s},parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a tooltip to highlight single element? Check out [OnboardingTooltip](/docs/components-onboardingtooltip--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},C=t=>[!1,!1],j=t=>i=>{},r=()=>{const[t,i]=C(),T=j();return e.jsxs(o.Provider,{totalSteps:3,disabled:i||t,onComplete:()=>T(!0),children:[e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:0,title:"Step 1",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:1,title:"Step 2",text:"This is the second step of the onboarding tour.",children:e.jsx(n,{children:"Step 2"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:2,title:"Step 3",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3"})})})]})};r.storyName="OnboardingTour";const a=()=>{const[t,i]=b.useState(!0);return e.jsx(o.Provider,{totalSteps:3,children:e.jsxs(y,{gap:"12",children:[e.jsx(o.Step,{step:0,title:"First step",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})}),e.jsx(o.Step,{step:1,title:"Second step",text:"This is the second step of the onboarding tour.",actionOnClick:()=>i(!1),children:e.jsx(n,{children:"Step 2"})}),!t&&e.jsx(o.Step,{step:2,title:"Final step",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3 (I was hidden)"})})]})})};var u,p,d,c,m;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
+props as originals just for props parsing ¯\\_(ツ)_/¯`,displayName:"OnboardingTourProvider",props:{totalSteps:{defaultValue:null,description:"Total number of steps in the tour",name:"totalSteps",required:!0,type:{name:"number"}},nextActionLabel:{defaultValue:{value:'"Next"'},description:'Label for the "Next" action button',name:"nextActionLabel",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"}]}},completeActionLabel:{defaultValue:{value:'"Got it"'},description:'Label for the "Complete" action button',name:"completeActionLabel",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},disabled:{defaultValue:null,description:"Whether the tour is disabled",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},onClose:{defaultValue:null,description:"Called when the tour is closed",name:"onClose",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onComplete:{defaultValue:null,description:"Called when the tour is completed",name:"onComplete",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},onStepChange:{defaultValue:null,description:"Called when the current step index changes",name:"onStepChange",required:!1,type:{name:"enum",value:[{value:"(step: number) => void"}]}}}}}catch{}try{s.displayName="OnboardingTourStep",s.__docgenInfo={description:"",displayName:"OnboardingTourStep",props:{dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},title:{defaultValue:null,description:"",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"}]}},text:{defaultValue:null,description:"",name:"text",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"}]}},side:{defaultValue:null,description:"Preferred side of the tooltip to appear from. Use if default side might block important content.",name:"side",required:!1,type:{name:"enum",value:[{value:'"top"'},{value:'"right"'},{value:'"bottom"'},{value:'"left"'}]}},actionOnClick:{defaultValue:null,description:"By default, the action button closes the tooltip.\n\nProvide `actionOnClick` to also perform other action.",name:"actionOnClick",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},autoScroll:{defaultValue:{value:"true"},description:"If true, the tooltip will automatically scroll into view when it is opened.",name:"autoScroll",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},step:{defaultValue:null,description:"Zero-based step index",name:"step",required:!0,type:{name:"number"}}}}}catch{}const o=x(),se={title:"Components/OnboardingTour",component:l,subcomponents:{OnboardingTourStep:s},parameters:{docs:{story:{inline:!1,height:250},description:{component:"Are you looking for a tooltip to highlight single element? Check out [OnboardingTooltip](/docs/components-onboardingtooltip--docs)"}},a11y:{config:{rules:[{id:"color-contrast",enabled:!1}]}}},decorators:[t=>e.jsx("div",{style:{margin:"auto",width:"max-content"},children:t()})]},C=t=>[!1,!1],j=t=>i=>{},r=()=>{const[t,i]=C(),T=j();return e.jsxs(o.Provider,{totalSteps:3,disabled:i||t,onComplete:()=>T(!0),children:[e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:0,title:"Step 1",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:1,title:"Step 2",text:"This is the second step of the onboarding tour.",children:e.jsx(n,{children:"Step 2"})})}),e.jsx("div",{style:{height:250},children:e.jsx(o.Step,{step:2,title:"Step 3",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3"})})})]})};r.storyName="OnboardingTour";const a=()=>{const[t,i]=b.useState(!0);return e.jsx(o.Provider,{totalSteps:3,children:e.jsxs(y,{gap:"12",children:[e.jsx(o.Step,{step:0,title:"First step",text:"This is the first step of the onboarding tour.",children:e.jsx(n,{children:"Step 1"})}),e.jsx(o.Step,{step:1,title:"Second step",text:"This is the second step of the onboarding tour.",actionOnClick:()=>i(!1),children:e.jsx(n,{children:"Step 2"})}),!t&&e.jsx(o.Step,{step:2,title:"Final step",text:"This is the final step of the onboarding tour.",children:e.jsx(n,{children:"Step 3 (I was hidden)"})})]})})};var u,p,d,c,m;r.parameters={...r.parameters,docs:{...(u=r.parameters)==null?void 0:u.docs,source:{originalSource:`() => {
   const [wasTourCompleted, loading] = useIsFeatureActive('my-tour');
   const setTourCompleted = useToggleFeature('my-tour');
   return <Tour.Provider totalSteps={3} disabled={loading || wasTourCompleted} onComplete={() => setTourCompleted(true)}>

package/dist/assets/{OnboardingTour.tests.stories-BYe9rU93.js → OnboardingTour.tests.stories-CxlMyj8d.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{c as I}from"./OnboardingTour-Bim14xn7.js";import{T as u}from"./Text-BmdJVr9v.js";import{B as m}from"./Button-BSyqsKC5.js";import{f as v,w as p,a as c,e as n,u as l}from"./index-DDyIDR-R.js";import{L as C}from"./LayoutFlex-BPtL2qZR.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-B7DJFxqL.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-BLj2hNSU.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Heading-B0rTmnad.js";import"./text-centered-CznToR0o.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const d=I(),kt={title:"Components/OnboardingTour/Tests",parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[i=>e.jsx("div",{style:{margin:"100px 0"},children:i()})],args:{onComplete:v(),onClose:v(),onStepChange:v()}},y={render:({onComplete:i,onStepChange:s})=>e.jsx(d.Provider,{totalSteps:3,nextActionLabel:"Next",completeActionLabel:"Got it",onComplete:i,onStepChange:s,children:e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})}),e.jsx(d.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"step-2"},children:e.jsx(u,{children:"Step 2 Content"})}),e.jsx(d.Step,{step:2,title:"Title",text:"Text",dataset:{testid:"step-3"},children:e.jsx(u,{children:"Step 3 Content"})})]})}),play:async({canvasElement:i,step:s,args:t})=>{const a=p(i);await s("First step should be visible initially",async()=>{await c(()=>{const o=a.getByTestId("step-1");n(o).toBeVisible()})}),await s("Click Next to advance to second step",async()=>{const r=p(a.getByTestId("step-1")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-2");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(1)})}),await s("Click Next to advance to final step",async()=>{const r=p(a.getByTestId("step-2")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-3");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(2)})}),await s("Complete tour",async()=>{const r=p(a.getByTestId("step-3")).getByTestId("action");await l.click(r),await c(()=>{const T=a.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(t.onComplete).toHaveBeenCalled()})})}},x={render:({onClose:i})=>e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",onClose:i,children:e.jsx(d.Step,{step:0,title:"First step",text:"Try closing this step",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click close button to close tour",async({args:a})=>{const r=p(t.getByTestId("step-1")).getByTestId("close");await l.click(r),await c(()=>{const T=t.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(a.onClose).toHaveBeenCalled()})})}},B={render:function(){const[s,t]=h.useState(!0);return e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{onClick:()=>t(!s),dataset:{testid:"toggle-button"},children:s?"Enable Tour":"Disable Tour"}),e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",disabled:s,children:e.jsx(d.Step,{step:0,title:"First step",text:"This step should be hidden when disabled",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Tour should be initially disabled",async()=>{const a=t.queryByTestId("step-1");n(a).toBeNull()}),await s("Click enable button to show tour",async()=>{const a=t.getByTestId("toggle-button");await l.click(a),await c(()=>{const o=t.getByTestId("step-1");n(o).toBeVisible()})})}},g=I(),S=I(),w={render:function(){const[s,t]=h.useState(!1),[a,o]=h.useState(!1);return e.jsxs(g.Provider,{totalSteps:2,disabled:!s,nextActionLabel:"Next",completeActionLabel:"Got it",children:[e.jsx(g.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"outer-step-1"},children:e.jsx(m,{onClick:()=>t(!0),dataset:{testid:"start-outer-tour"},children:"Start outer tour"})}),e.jsxs(S.Provider,{totalSteps:2,disabled:!a,nextActionLabel:"Next",completeActionLabel:"Done",children:[e.jsx(g.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"outer-step-2"},children:e.jsx(u,{children:"Outer Tour Step"})}),e.jsx(S.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"inner-step-1"},children:e.jsx(m,{onClick:()=>o(!0),dataset:{testid:"start-inner-tour"},children:"Start inner tour"})}),e.jsx(S.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"inner-step-2"},children:e.jsx(u,{children:"Inner Tour Step"})})]})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Start inner tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-inner-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("inner-step-1");n(o).toBeVisible()})}),await s("Advance inner tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("inner-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-2");n(r).toBeVisible()})}),await s("Complete inner tour",async()=>{const o=p(t.getByTestId("inner-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-1",{exact:!1});n(r).toBeNull()})}),await s("Start outer tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-outer-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("outer-step-1");n(o).toBeVisible()})}),await s("Advance outer tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("outer-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("outer-step-2");n(r).toBeVisible()})}),await s("Complete outer tour",async()=>{const o=p(t.getByTestId("outer-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("-step-",{exact:!1});n(r).toBeNull()})})}};function W(i){return new Promise(s=>setTimeout(s,i))}const b={render:()=>e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{children:"Click outside the tooltip"}),e.jsx(d.Provider,{totalSteps:1,nextActionLabel:"Next",completeActionLabel:"Got it",children:e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click outside the tooltip",()=>{const a=t.getByText("Click outside the tooltip");return l.click(a)}),await s("Wait for tooltip to be hidden",async()=>{await W(1e3);const a=t.getByTestId("step-1");n(a).toBeVisible()})}};var k,j,L;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{c as I}from"./OnboardingTour-BEArI5YV.js";import{T as u}from"./Text-BO29RJXG.js";import{B as m}from"./Button-w2cr0Ds_.js";import{f as v,w as p,a as c,e as n,u as l}from"./index-DDyIDR-R.js";import{L as C}from"./LayoutFlex-8uO9g6rd.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./OnboardingTooltip-DL0b2snx.js";import"./index-jPlWeKki.js";import"./PortalElementProvider-D4ltrA8j.js";import"./index-DRKYGVyc.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./Combination-CCYtWL8C.js";import"./tslib.es6-BntfKcQG.js";import"./index-DbgDZDus.js";import"./TokyoUIClose-DFIfVIfy.js";import"./Icon-w2ilcPHL.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./Heading-DLWgmTU5.js";import"./text-centered-CznToR0o.js";import"./index-BfBdt3zW.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./shared-strings-CcWGHelY.js";import"./message-BraTJ16C.js";import"./ButtonBase-BagNt7Ga.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const d=I(),kt={title:"Components/OnboardingTour/Tests",parameters:{layout:"centered",controls:{disable:!0},chromatic:{disableSnapshot:!0}},tags:["!autodocs","!a11y-test","test"],decorators:[i=>e.jsx("div",{style:{margin:"100px 0"},children:i()})],args:{onComplete:v(),onClose:v(),onStepChange:v()}},y={render:({onComplete:i,onStepChange:s})=>e.jsx(d.Provider,{totalSteps:3,nextActionLabel:"Next",completeActionLabel:"Got it",onComplete:i,onStepChange:s,children:e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})}),e.jsx(d.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"step-2"},children:e.jsx(u,{children:"Step 2 Content"})}),e.jsx(d.Step,{step:2,title:"Title",text:"Text",dataset:{testid:"step-3"},children:e.jsx(u,{children:"Step 3 Content"})})]})}),play:async({canvasElement:i,step:s,args:t})=>{const a=p(i);await s("First step should be visible initially",async()=>{await c(()=>{const o=a.getByTestId("step-1");n(o).toBeVisible()})}),await s("Click Next to advance to second step",async()=>{const r=p(a.getByTestId("step-1")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-2");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(1)})}),await s("Click Next to advance to final step",async()=>{const r=p(a.getByTestId("step-2")).getByTestId("action");await l.click(r),await c(()=>{const T=a.getByTestId("step-3");n(T).toBeVisible(),n(t.onStepChange).toHaveBeenCalledWith(2)})}),await s("Complete tour",async()=>{const r=p(a.getByTestId("step-3")).getByTestId("action");await l.click(r),await c(()=>{const T=a.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(t.onComplete).toHaveBeenCalled()})})}},x={render:({onClose:i})=>e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",onClose:i,children:e.jsx(d.Step,{step:0,title:"First step",text:"Try closing this step",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click close button to close tour",async({args:a})=>{const r=p(t.getByTestId("step-1")).getByTestId("close");await l.click(r),await c(()=>{const T=t.queryByTestId("step",{exact:!1});n(T).toBeNull(),n(a.onClose).toHaveBeenCalled()})})}},B={render:function(){const[s,t]=h.useState(!0);return e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{onClick:()=>t(!s),dataset:{testid:"toggle-button"},children:s?"Enable Tour":"Disable Tour"}),e.jsx(d.Provider,{totalSteps:2,nextActionLabel:"Next",completeActionLabel:"Got it",disabled:s,children:e.jsx(d.Step,{step:0,title:"First step",text:"This step should be hidden when disabled",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Tour should be initially disabled",async()=>{const a=t.queryByTestId("step-1");n(a).toBeNull()}),await s("Click enable button to show tour",async()=>{const a=t.getByTestId("toggle-button");await l.click(a),await c(()=>{const o=t.getByTestId("step-1");n(o).toBeVisible()})})}},g=I(),S=I(),w={render:function(){const[s,t]=h.useState(!1),[a,o]=h.useState(!1);return e.jsxs(g.Provider,{totalSteps:2,disabled:!s,nextActionLabel:"Next",completeActionLabel:"Got it",children:[e.jsx(g.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"outer-step-1"},children:e.jsx(m,{onClick:()=>t(!0),dataset:{testid:"start-outer-tour"},children:"Start outer tour"})}),e.jsxs(S.Provider,{totalSteps:2,disabled:!a,nextActionLabel:"Next",completeActionLabel:"Done",children:[e.jsx(g.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"outer-step-2"},children:e.jsx(u,{children:"Outer Tour Step"})}),e.jsx(S.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"inner-step-1"},children:e.jsx(m,{onClick:()=>o(!0),dataset:{testid:"start-inner-tour"},children:"Start inner tour"})}),e.jsx(S.Step,{step:1,title:"Title",text:"Text",dataset:{testid:"inner-step-2"},children:e.jsx(u,{children:"Inner Tour Step"})})]})]})},play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Start inner tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-inner-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("inner-step-1");n(o).toBeVisible()})}),await s("Advance inner tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("inner-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-2");n(r).toBeVisible()})}),await s("Complete inner tour",async()=>{const o=p(t.getByTestId("inner-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("inner-step-1",{exact:!1});n(r).toBeNull()})}),await s("Start outer tour, step 1 should be visible",async()=>{const a=t.getByTestId("start-outer-tour");await l.click(a),await c(async()=>{const o=t.queryByTestId("outer-step-1");n(o).toBeVisible()})}),await s("Advance outer tour, step 2 should be visible",async()=>{const o=p(t.getByTestId("outer-step-1")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("outer-step-2");n(r).toBeVisible()})}),await s("Complete outer tour",async()=>{const o=p(t.getByTestId("outer-step-2")).getByTestId("action");await l.click(o),await c(async()=>{const r=t.queryByTestId("-step-",{exact:!1});n(r).toBeNull()})})}};function W(i){return new Promise(s=>setTimeout(s,i))}const b={render:()=>e.jsxs(C,{gap:"24",direction:"column",children:[e.jsx(m,{children:"Click outside the tooltip"}),e.jsx(d.Provider,{totalSteps:1,nextActionLabel:"Next",completeActionLabel:"Got it",children:e.jsx(d.Step,{step:0,title:"Title",text:"Text",dataset:{testid:"step-1"},children:e.jsx(u,{children:"Step 1 Content"})})})]}),play:async({canvasElement:i,step:s})=>{const t=p(i);await s("Step should be initially visible",async()=>{await c(()=>{const a=t.getByTestId("step-1");n(a).toBeVisible()})}),await s("Click outside the tooltip",()=>{const a=t.getByText("Click outside the tooltip");return l.click(a)}),await s("Wait for tooltip to be hidden",async()=>{await W(1e3);const a=t.getByTestId("step-1");n(a).toBeVisible()})}};var k,j,L;y.parameters={...y.parameters,docs:{...(k=y.parameters)==null?void 0:k.docs,source:{originalSource:`{
   render: ({
     onComplete,
     onStepChange

package/dist/assets/{PasswordField-Bzl_2mAR.js → PasswordField-DaMmlpIr.js}

@@ -1,6 +1,6 @@
-import{j as a}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{F as H}from"./FormControl-CeIJk4_Z.js";import{F as L,a as I}from"./TokyoUIEye-BsOt8ZdC.js";import{F as M}from"./FieldButton-Bsa9_rJB.js";import{u as x,d as T}from"./index-BfBdt3zW.js";import{u as F}from"./useMergeRefs-BKVZOB6R.js";import{w as P}from"./componentNames-CpCJzpB9.js";import{I as k}from"./Input-GBJ_wz6j.js";const r=T({reveal:{id:"preply-ds.password-field.reveal.button",defaultMessage:"Reveal password",description:'A11y label for the "reveal password" button. Will be announced by screen reader.'},conceal:{id:"preply-ds.password-field.conceal.button",defaultMessage:"Conceal password",description:'A11y label for the "conceal password" button. Will be announced by screen reader.'}}),s=l.forwardRef(function({id:o,label:d,description:m,error:p,required:c,inputDataset:f,dataset:v,hideLabel:y,onClick:h,hasError:b,useLegacyRequiredLabel:g,className:D,style:_,...q},E){const{formatMessage:n}=x(),[e,V]=l.useState(!1),t=l.useRef(null),w=F(t,E),C=e?"text":"password",R=()=>{var u;V(!e),(u=t.current)==null||u.focus()};return a.jsx(H,{id:o,label:d,description:m,error:p,hasError:b,required:c,dataset:v,hideLabel:y,onClick:h,useLegacyRequiredLabel:g,preplyDsComponent:P.PasswordField,children:a.jsx(k,{...q,type:C,ref:w,dataset:f,button:a.jsx(M,{onClick:R,svg:e?L:I,assistiveText:n(e?r.conceal:r.reveal),dataset:{testid:"toggle-password-button"}})})})});try{s.displayName="PasswordField",s.__docgenInfo={description:"",displayName:"PasswordField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
-If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
-to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
-indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+import{j as a}from"./jsx-runtime-BYouaCF_.js";import{r as l}from"./index-B3evPFBL.js";import{F as H}from"./FormControl-CeIJk4_Z.js";import{F as L,a as I}from"./TokyoUIEye-BsOt8ZdC.js";import{F as M}from"./FieldButton-Bsa9_rJB.js";import{u as x,d as T}from"./index-BfBdt3zW.js";import{u as F}from"./useMergeRefs-BKVZOB6R.js";import{w as P}from"./componentNames-CpCJzpB9.js";import{I as k}from"./Input-nsKLdjO3.js";const r=T({reveal:{id:"preply-ds.password-field.reveal.button",defaultMessage:"Reveal password",description:'A11y label for the "reveal password" button. Will be announced by screen reader.'},conceal:{id:"preply-ds.password-field.conceal.button",defaultMessage:"Conceal password",description:'A11y label for the "conceal password" button. Will be announced by screen reader.'}}),s=l.forwardRef(function({id:o,label:d,description:m,error:p,required:c,inputDataset:f,dataset:v,hideLabel:y,onClick:h,hasError:b,useLegacyRequiredLabel:g,className:D,style:_,...q},E){const{formatMessage:n}=x(),[e,V]=l.useState(!1),t=l.useRef(null),w=F(t,E),C=e?"text":"password",R=()=>{var u;V(!e),(u=t.current)==null||u.focus()};return a.jsx(H,{id:o,label:d,description:m,error:p,hasError:b,required:c,dataset:v,hideLabel:y,onClick:h,useLegacyRequiredLabel:g,preplyDsComponent:P.PasswordField,children:a.jsx(k,{...q,type:C,ref:w,dataset:f,button:a.jsx(M,{onClick:R,svg:e?L:I,assistiveText:n(e?r.conceal:r.reveal),dataset:{testid:"toggle-password-button"}})})})});try{s.displayName="PasswordField",s.__docgenInfo={description:"",displayName:"PasswordField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
+If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLInputElement>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
+to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
+indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
 When false, adds a "Optional" indicator next to the label for the optional fields instead.
-@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"new-password"'},{value:'"current-password"'}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",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: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{s as P};
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLInputElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLInputElement>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLInputElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLInputElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"new-password"'},{value:'"current-password"'}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",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: HTMLInputElement | null) => void"},{value:"RefObject<HTMLInputElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{s as P};

package/dist/assets/{PasswordField.stories-hLk1hfiF.js → PasswordField.stories-tM9nknm7.js}

@@ -1,4 +1,4 @@
-import{j as X}from"./jsx-runtime-BYouaCF_.js";import{r as $}from"./index-B3evPFBL.js";import{P as Y}from"./PasswordField-Bzl_2mAR.js";import{f as o,w,e as n,u as v}from"./index-DDyIDR-R.js";import{F as ee}from"./TokyoUILock-C_glX9Ec.js";import{I as te}from"./Icon-BLj2hNSU.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./FormControl-CeIJk4_Z.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./message-BraTJ16C.js";import"./componentNames-CpCJzpB9.js";import"./TokyoUIEye-BsOt8ZdC.js";import"./FieldButton-Bsa9_rJB.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-BUL1Zq7e.js";import"./useMergeRefs-BKVZOB6R.js";import"./Input-GBJ_wz6j.js";import"./InputContainer-Bk0tgFnW.js";import"./text-accent-DZDDtpIt.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";const Ae={title:"components/PasswordField",component:Y,args:{name:"password",label:"Password",placeholder:"Enter a password",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:o(),onValueChange:o(),onBlur:o(),onFocus:o(),onClick:o(),onCopy:o(),onKeyDown:o(),onKeyUp:o(),onPaste:o()}},c={play:async({canvasElement:a,step:e,args:t})=>{const s=w(a),i=s.getByTestId("field"),r=s.getByTestId("input");await e("it should render correct label",async()=>{const Z=w(i).getByTestId("label");n(Z).toHaveTextContent("Password • Optional"),n(r).toHaveAccessibleName("Password")}),await e("it should call onFocus when the input is focused",async()=>{r.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await v.type(r,"secret123"),n(t.onValueChange).toHaveBeenCalledWith("secret123"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await v.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(r).toHaveAttribute("data-testid","input"),n(r).toHaveAttribute("data-foo","bar")}),await e("it should have password type by default",async()=>{n(r).toHaveAttribute("type","password")})}},l={render:function(e){const[t,s]=$.useState(e.value);return X.jsx(Y,{...e,value:t,onChange:i=>{var r;s(i.target.value),(r=e.onChange)==null||r.call(e,i)}})},args:{label:"Controlled PasswordField",placeholder:"Enter your password...",value:"secret123"},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue("secret123")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await v.clear(t),await v.type(t,"newpassword"),n(t).toHaveValue("newpassword")})}},d={args:{description:"Include letters, numbers and symbols"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Include letters, numbers and symbols"),n(s).toHaveTextContent("Include letters, numbers and symbols")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Password"),n(s).toHaveTextContent("Password")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},u={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Password")})}},y={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(s).toHaveTextContent("This is an error message")})}},b={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},m={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},h={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Password",placeholder:"e.g.: abc123%pt0!",description:"Include letters, numbers and symbols"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"text"},defaultValue:{control:"text"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},maxLength:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":X.jsx(te,{svg:ee})},control:"select"},autoComplete:{control:"select"},hasError:{table:{disable:!0}}}};var g,x,H,T,I;c.parameters={...c.parameters,docs:{...(g=c.parameters)==null?void 0:g.docs,source:{originalSource:`{
+import{j as X}from"./jsx-runtime-BYouaCF_.js";import{r as $}from"./index-B3evPFBL.js";import{P as Y}from"./PasswordField-DaMmlpIr.js";import{f as o,w,e as n,u as v}from"./index-DDyIDR-R.js";import{F as ee}from"./TokyoUILock-C_glX9Ec.js";import{I as te}from"./Icon-w2ilcPHL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./FormControl-CeIJk4_Z.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./message-BraTJ16C.js";import"./componentNames-CpCJzpB9.js";import"./TokyoUIEye-BsOt8ZdC.js";import"./FieldButton-Bsa9_rJB.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./classNames-BUL1Zq7e.js";import"./useMergeRefs-BKVZOB6R.js";import"./Input-nsKLdjO3.js";import"./InputContainer-Bk0tgFnW.js";import"./text-accent-DZDDtpIt.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";const Ae={title:"components/PasswordField",component:Y,args:{name:"password",label:"Password",placeholder:"Enter a password",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:o(),onValueChange:o(),onBlur:o(),onFocus:o(),onClick:o(),onCopy:o(),onKeyDown:o(),onKeyUp:o(),onPaste:o()}},c={play:async({canvasElement:a,step:e,args:t})=>{const s=w(a),i=s.getByTestId("field"),r=s.getByTestId("input");await e("it should render correct label",async()=>{const Z=w(i).getByTestId("label");n(Z).toHaveTextContent("Password • Optional"),n(r).toHaveAccessibleName("Password")}),await e("it should call onFocus when the input is focused",async()=>{r.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await v.type(r,"secret123"),n(t.onValueChange).toHaveBeenCalledWith("secret123"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await v.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(i).toHaveAttribute("data-testid","field"),n(i).toHaveAttribute("data-foo","bar"),n(r).toHaveAttribute("data-testid","input"),n(r).toHaveAttribute("data-foo","bar")}),await e("it should have password type by default",async()=>{n(r).toHaveAttribute("type","password")})}},l={render:function(e){const[t,s]=$.useState(e.value);return X.jsx(Y,{...e,value:t,onChange:i=>{var r;s(i.target.value),(r=e.onChange)==null||r.call(e,i)}})},args:{label:"Controlled PasswordField",placeholder:"Enter your password...",value:"secret123"},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const t=a.getByTestId("input");await n(t).toHaveValue("secret123")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await v.clear(t),await v.type(t,"newpassword"),n(t).toHaveValue("newpassword")})}},d={args:{description:"Include letters, numbers and symbols"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Include letters, numbers and symbols"),n(s).toHaveTextContent("Include letters, numbers and symbols")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Password"),n(s).toHaveTextContent("Password")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},u={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const t=a.getByTestId("input");n(t).toHaveAccessibleName("Password")})}},y={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),s=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(s).toHaveTextContent("This is an error message")})}},b={args:{disabled:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the disabled input",async()=>{n(t).toHaveAttribute("disabled")})}},m={args:{readOnly:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input");await e("it should render the read only input",async()=>{n(t).toHaveAttribute("readonly")})}},h={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Password",placeholder:"e.g.: abc123%pt0!",description:"Include letters, numbers and symbols"},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"text"},defaultValue:{control:"text"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},readOnly:{control:"boolean"},maxLength:{control:"number"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":X.jsx(te,{svg:ee})},control:"select"},autoComplete:{control:"select"},hasError:{table:{disable:!0}}}};var g,x,H,T,I;c.parameters={...c.parameters,docs:{...(g=c.parameters)==null?void 0:g.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,

package/dist/assets/{ProgressBar.stories-CU05tsA8.js → ProgressBar.stories-CL5ifoDb.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as C}from"./index-B3evPFBL.js";import{g as I}from"./index-DdzHuZ-Y.js";import{w}from"./componentNames-CpCJzpB9.js";import{I as g}from"./IconButton-BqwVuKH2.js";import{L as F}from"./LayoutFlex-BPtL2qZR.js";import{F as M,a as T}from"./TokyoUIMinus-B9ja89W6.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-Bdtn25V2.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const k="ProgressBar__-Ss9D",q={ProgressBar:k},l=({min:a=0,max:s=100,value:t,"aria-label":r,dataset:o})=>{const p=I(o,{preplyDsComponent:w.ProgressBar}),c=(t-a)/(s-a)*100,d=`${Math.max(0,Math.min(100,c))}%`;return e.jsx("div",{...p,className:q.ProgressBar,role:"progressbar","aria-label":r,"aria-valuetext":d,"aria-valuenow":t,"aria-valuemin":a,"aria-valuemax":s,style:{"--progress-percentage":d}})};try{l.displayName="ProgressBar",l.__docgenInfo={description:"A component that visually displays continuous progress.\n\nFor a series of discrete progress steps, use the `ProgressSteps` component instead.",displayName:"ProgressBar",props:{min:{defaultValue:{value:"0"},description:"The minimum value of the progress bar.",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:{value:"100"},description:"The maximum value of the progress bar.",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"The current value of the progress bar.",name:"value",required:!0,type:{name:"number"}},"aria-label":{defaultValue:null,description:`A description of the progress bar for screen readers.
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as C}from"./index-B3evPFBL.js";import{g as I}from"./index-DdzHuZ-Y.js";import{w}from"./componentNames-CpCJzpB9.js";import{I as g}from"./IconButton-05fPCnaC.js";import{L as F}from"./LayoutFlex-8uO9g6rd.js";import{F as M,a as T}from"./TokyoUIMinus-B9ja89W6.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-BagNt7Ga.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";import"./layout-relative.module-ed9bC4H4.js";const k="ProgressBar__-Ss9D",q={ProgressBar:k},l=({min:a=0,max:s=100,value:t,"aria-label":r,dataset:o})=>{const p=I(o,{preplyDsComponent:w.ProgressBar}),c=(t-a)/(s-a)*100,d=`${Math.max(0,Math.min(100,c))}%`;return e.jsx("div",{...p,className:q.ProgressBar,role:"progressbar","aria-label":r,"aria-valuetext":d,"aria-valuenow":t,"aria-valuemin":a,"aria-valuemax":s,style:{"--progress-percentage":d}})};try{l.displayName="ProgressBar",l.__docgenInfo={description:"A component that visually displays continuous progress.\n\nFor a series of discrete progress steps, use the `ProgressSteps` component instead.",displayName:"ProgressBar",props:{min:{defaultValue:{value:"0"},description:"The minimum value of the progress bar.",name:"min",required:!1,type:{name:"enum",value:[{value:"number"}]}},max:{defaultValue:{value:"100"},description:"The maximum value of the progress bar.",name:"max",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"The current value of the progress bar.",name:"value",required:!0,type:{name:"number"}},"aria-label":{defaultValue:null,description:`A description of the progress bar for screen readers.
 @example 'Onboarding', 'Checkout', 'Survey', etc.`,name:"aria-label",required:!0,type:{name:"string"}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const ee={title:"Components/ProgressBar",component:l,parameters:{docs:{description:{component:"A component that visually indicates progress through a range of values."}}},decorators:[a=>e.jsx("div",{style:{padding:"32px",width:"500px"},children:e.jsx(a,{})})],args:{"aria-label":"Story"}},n={tags:["!test"],args:{value:10,min:0,max:100},render:function({value:s,...t}){const[r,o]=C.useState(s),p=()=>o(Math.min(r+10,100)),c=()=>o(Math.max(r-10,0));return e.jsxs(F,{alignItems:"center",gap:"12",children:[e.jsx(g,{svg:M,assistiveText:"Subtract",onClick:c}),e.jsx("div",{style:{width:150},children:e.jsx(l,{...t,value:r})}),e.jsx(g,{svg:T,assistiveText:"Add",onClick:p})]})}},i={args:{value:0,min:0,max:100}},u={args:{value:100,min:0,max:100}},m={args:{value:2,min:1,max:5}};var v,x,f;n.parameters={...n.parameters,docs:{...(v=n.parameters)==null?void 0:v.docs,source:{originalSource:`{
   tags: ['!test'],
   args: {

package/dist/assets/{ProgressSteps.stories-DwNpdgEm.js → ProgressSteps.stories-DbZpoKtc.js}

@@ -1,4 +1,4 @@
-import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{P as v}from"./ProgressSteps-BBrWCYks.js";import{L as y}from"./LayoutFlex-BPtL2qZR.js";import{I as c}from"./IconButton-BqwVuKH2.js";import{F as b,a as L}from"./TokyoUIMinus-B9ja89W6.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";const U={title:"Components/ProgressSteps",component:v,decorators:[a=>t.jsx("div",{style:{padding:"32px",width:"500px"},children:t.jsx(a,{})})],args:{"aria-label":"Story"}},r={tags:["!test"],args:{currentStep:6,totalSteps:6},render:function({currentStep:C,totalSteps:p,...j}){const[o,n]=h.useState(C),F=()=>n(Math.min(o+1,p)),I=()=>n(Math.max(o-1,1));return t.jsxs(y,{alignItems:"center",gap:"12",children:[t.jsx(c,{svg:b,assistiveText:"Subtract",onClick:I}),t.jsx(v,{...j,currentStep:o,totalSteps:p}),t.jsx(c,{svg:L,assistiveText:"Add",onClick:F})]})}},e={args:{currentStep:1,totalSteps:6}},s={args:{currentStep:6,totalSteps:6}};var i,m,u;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
+import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{P as v}from"./ProgressSteps-BBrWCYks.js";import{L as y}from"./LayoutFlex-8uO9g6rd.js";import{I as c}from"./IconButton-05fPCnaC.js";import{F as b,a as L}from"./TokyoUIMinus-B9ja89W6.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-BagNt7Ga.js";import"./Spinner-BCTJunNM.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";const U={title:"Components/ProgressSteps",component:v,decorators:[a=>t.jsx("div",{style:{padding:"32px",width:"500px"},children:t.jsx(a,{})})],args:{"aria-label":"Story"}},r={tags:["!test"],args:{currentStep:6,totalSteps:6},render:function({currentStep:C,totalSteps:p,...j}){const[o,n]=h.useState(C),F=()=>n(Math.min(o+1,p)),I=()=>n(Math.max(o-1,1));return t.jsxs(y,{alignItems:"center",gap:"12",children:[t.jsx(c,{svg:b,assistiveText:"Subtract",onClick:I}),t.jsx(v,{...j,currentStep:o,totalSteps:p}),t.jsx(c,{svg:L,assistiveText:"Add",onClick:F})]})}},e={args:{currentStep:1,totalSteps:6}},s={args:{currentStep:6,totalSteps:6}};var i,m,u;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
   tags: ['!test'],
   args: {
     currentStep: 6,

package/dist/assets/{SelectField-De3TaFOp.js → SelectField-CNhQrH2n.js}

@@ -1,8 +1,8 @@
-import{j as a}from"./jsx-runtime-BYouaCF_.js";import{r as f}from"./index-B3evPFBL.js";import{F as S}from"./FormControl-CeIJk4_Z.js";import{w as q}from"./componentNames-CpCJzpB9.js";import{I as b,s as T}from"./InputContainer-Bk0tgFnW.js";import{F as L}from"./TokyoUIExpand-DThzqohx.js";import{I as w}from"./Icon-BLj2hNSU.js";import{g as V}from"./index-DdzHuZ-Y.js";const y=f.forwardRef(function({dataset:i,onChange:n,onValueChange:t,icon:d,children:o,placeholder:u,...e},s){const[m,v]=f.useState(!e.value&&!e.defaultValue),p=V(i),c=e.value===void 0?{defaultValue:e.defaultValue||""}:{value:e.value},H=r=>{n==null||n(r),t==null||t(r.target.value),v(!r.target.value)};return a.jsx(b,{icon:d,trailingIcon:a.jsx(w,{svg:L}),children:a.jsxs("select",{...p,...e,...c,onChange:H,ref:s,className:T.input,"data-empty":m,children:[typeof u=="string"&&a.jsx("option",{value:"",disabled:e.required,children:u}),o]})})});try{y.displayName="Select",y.__docgenInfo={description:`A component to render a select with optional icon.
-For internal use only.`,displayName:"Select",props:{autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},form:{defaultValue:null,description:"",name:"form",required:!1,type:{name:"enum",value:[{value:"string"}]}},multiple:{defaultValue:null,description:"",name:"multiple",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"},{value:"number"},{value:"readonly string[]"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLSelectElement>"}]}},defaultChecked:{defaultValue:null,description:"",name:"defaultChecked",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"},{value:"number"},{value:"readonly string[]"}]}},suppressContentEditableWarning:{defaultValue:null,description:"",name:"suppressContentEditableWarning",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},suppressHydrationWarning:{defaultValue:null,description:"",name:"suppressHydrationWarning",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accessKey:{defaultValue:null,description:"",name:"accessKey",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"off"'},{value:'"on"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'},{value:"string & {}"}]}},autoFocus:{defaultValue:null,description:"",name:"autoFocus",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"enum",value:[{value:"string"}]}},contentEditable:{defaultValue:null,description:"",name:"contentEditable",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"inherit"'},{value:'"plaintext-only"'}]}},contextMenu:{defaultValue:null,description:"",name:"contextMenu",required:!1,type:{name:"enum",value:[{value:"string"}]}},dir:{defaultValue:null,description:"",name:"dir",required:!1,type:{name:"enum",value:[{value:"string"}]}},draggable:{defaultValue:null,description:"",name:"draggable",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},enterKeyHint:{defaultValue:null,description:"",name:"enterKeyHint",required:!1,type:{name:"enum",value:[{value:'"enter"'},{value:'"done"'},{value:'"go"'},{value:'"next"'},{value:'"previous"'},{value:'"search"'},{value:'"send"'}]}},hidden:{defaultValue:null,description:"",name:"hidden",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},lang:{defaultValue:null,description:"",name:"lang",required:!1,type:{name:"enum",value:[{value:"string"}]}},nonce:{defaultValue:null,description:"",name:"nonce",required:!1,type:{name:"enum",value:[{value:"string"}]}},slot:{defaultValue:null,description:"",name:"slot",required:!1,type:{name:"enum",value:[{value:"string"}]}},spellCheck:{defaultValue:null,description:"",name:"spellCheck",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"enum",value:[{value:"CSSProperties"}]}},tabIndex:{defaultValue:null,description:"",name:"tabIndex",required:!1,type:{name:"enum",value:[{value:"number"}]}},title:{defaultValue:null,description:"",name:"title",required:!1,type:{name:"enum",value:[{value:"string"}]}},translate:{defaultValue:null,description:"",name:"translate",required:!1,type:{name:"enum",value:[{value:'"no"'},{value:'"yes"'}]}},radioGroup:{defaultValue:null,description:"",name:"radioGroup",required:!1,type:{name:"enum",value:[{value:"string"}]}},role:{defaultValue:null,description:"",name:"role",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"row"'},{value:'"main"'},{value:'"article"'},{value:'"table"'},{value:'"figure"'},{value:'"button"'},{value:"string & {}"},{value:'"search"'},{value:'"alert"'},{value:'"alertdialog"'},{value:'"application"'},{value:'"banner"'},{value:'"cell"'},{value:'"checkbox"'},{value:'"columnheader"'},{value:'"combobox"'},{value:'"complementary"'},{value:'"contentinfo"'},{value:'"definition"'},{value:'"dialog"'},{value:'"directory"'},{value:'"document"'},{value:'"feed"'},{value:'"form"'},{value:'"grid"'},{value:'"gridcell"'},{value:'"group"'},{value:'"heading"'},{value:'"img"'},{value:'"link"'},{value:'"list"'},{value:'"listbox"'},{value:'"listitem"'},{value:'"log"'},{value:'"marquee"'},{value:'"math"'},{value:'"menu"'},{value:'"menubar"'},{value:'"menuitem"'},{value:'"menuitemcheckbox"'},{value:'"menuitemradio"'},{value:'"navigation"'},{value:'"note"'},{value:'"option"'},{value:'"presentation"'},{value:'"progressbar"'},{value:'"radio"'},{value:'"radiogroup"'},{value:'"region"'},{value:'"rowgroup"'},{value:'"rowheader"'},{value:'"scrollbar"'},{value:'"searchbox"'},{value:'"separator"'},{value:'"slider"'},{value:'"spinbutton"'},{value:'"status"'},{value:'"switch"'},{value:'"tab"'},{value:'"tablist"'},{value:'"tabpanel"'},{value:'"term"'},{value:'"textbox"'},{value:'"timer"'},{value:'"toolbar"'},{value:'"tooltip"'},{value:'"tree"'},{value:'"treegrid"'},{value:'"treeitem"'}]}},about:{defaultValue:null,description:"",name:"about",required:!1,type:{name:"enum",value:[{value:"string"}]}},content:{defaultValue:null,description:"",name:"content",required:!1,type:{name:"enum",value:[{value:"string"}]}},datatype:{defaultValue:null,description:"",name:"datatype",required:!1,type:{name:"enum",value:[{value:"string"}]}},inlist:{defaultValue:null,description:"",name:"inlist",required:!1,type:{name:"any"}},prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"enum",value:[{value:"string"}]}},property:{defaultValue:null,description:"",name:"property",required:!1,type:{name:"enum",value:[{value:"string"}]}},rel:{defaultValue:null,description:"",name:"rel",required:!1,type:{name:"enum",value:[{value:"string"}]}},resource:{defaultValue:null,description:"",name:"resource",required:!1,type:{name:"enum",value:[{value:"string"}]}},rev:{defaultValue:null,description:"",name:"rev",required:!1,type:{name:"enum",value:[{value:"string"}]}},typeof:{defaultValue:null,description:"",name:"typeof",required:!1,type:{name:"enum",value:[{value:"string"}]}},vocab:{defaultValue:null,description:"",name:"vocab",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoCorrect:{defaultValue:null,description:"",name:"autoCorrect",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoSave:{defaultValue:null,description:"",name:"autoSave",required:!1,type:{name:"enum",value:[{value:"string"}]}},color:{defaultValue:null,description:"",name:"color",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemProp:{defaultValue:null,description:"",name:"itemProp",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemScope:{defaultValue:null,description:"",name:"itemScope",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},itemType:{defaultValue:null,description:"",name:"itemType",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemID:{defaultValue:null,description:"",name:"itemID",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemRef:{defaultValue:null,description:"",name:"itemRef",required:!1,type:{name:"enum",value:[{value:"string"}]}},results:{defaultValue:null,description:"",name:"results",required:!1,type:{name:"enum",value:[{value:"number"}]}},security:{defaultValue:null,description:"",name:"security",required:!1,type:{name:"enum",value:[{value:"string"}]}},unselectable:{defaultValue:null,description:"",name:"unselectable",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},inputMode:{defaultValue:null,description:`Hints at the type of data that might be entered by the user while editing the element or its contents
+import{j as a}from"./jsx-runtime-BYouaCF_.js";import{r as f}from"./index-B3evPFBL.js";import{F as S}from"./FormControl-CeIJk4_Z.js";import{w as q}from"./componentNames-CpCJzpB9.js";import{I as b,s as T}from"./InputContainer-Bk0tgFnW.js";import{F as L}from"./TokyoUIExpand-DThzqohx.js";import{I as w}from"./Icon-w2ilcPHL.js";import{g as V}from"./index-DdzHuZ-Y.js";const y=f.forwardRef(function({dataset:i,onChange:n,onValueChange:t,icon:d,children:o,placeholder:u,...e},s){const[m,v]=f.useState(!e.value&&!e.defaultValue),p=V(i),c=e.value===void 0?{defaultValue:e.defaultValue||""}:{value:e.value},H=r=>{n==null||n(r),t==null||t(r.target.value),v(!r.target.value)};return a.jsx(b,{icon:d,trailingIcon:a.jsx(w,{svg:L}),children:a.jsxs("select",{...p,...e,...c,onChange:H,ref:s,className:T.input,"data-empty":m,children:[typeof u=="string"&&a.jsx("option",{value:"",disabled:e.required,children:u}),o]})})});try{y.displayName="Select",y.__docgenInfo={description:`A component to render a select with optional icon.
+For internal use only.`,displayName:"Select",props:{autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},form:{defaultValue:null,description:"",name:"form",required:!1,type:{name:"enum",value:[{value:"string"}]}},multiple:{defaultValue:null,description:"",name:"multiple",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},size:{defaultValue:null,description:"",name:"size",required:!1,type:{name:"enum",value:[{value:"number"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"},{value:"number"},{value:"readonly string[]"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLSelectElement>"}]}},defaultChecked:{defaultValue:null,description:"",name:"defaultChecked",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"},{value:"number"},{value:"readonly string[]"}]}},suppressContentEditableWarning:{defaultValue:null,description:"",name:"suppressContentEditableWarning",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},suppressHydrationWarning:{defaultValue:null,description:"",name:"suppressHydrationWarning",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},accessKey:{defaultValue:null,description:"",name:"accessKey",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoCapitalize:{defaultValue:null,description:"",name:"autoCapitalize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"off"'},{value:'"on"'},{value:'"sentences"'},{value:'"words"'},{value:'"characters"'},{value:"string & {}"}]}},autoFocus:{defaultValue:null,description:"",name:"autoFocus",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},className:{defaultValue:null,description:"",name:"className",required:!1,type:{name:"enum",value:[{value:"string"}]}},contentEditable:{defaultValue:null,description:"",name:"contentEditable",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"inherit"'},{value:'"plaintext-only"'}]}},contextMenu:{defaultValue:null,description:"",name:"contextMenu",required:!1,type:{name:"enum",value:[{value:"string"}]}},dir:{defaultValue:null,description:"",name:"dir",required:!1,type:{name:"enum",value:[{value:"string"}]}},draggable:{defaultValue:null,description:"",name:"draggable",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},enterKeyHint:{defaultValue:null,description:"",name:"enterKeyHint",required:!1,type:{name:"enum",value:[{value:'"search"'},{value:'"enter"'},{value:'"done"'},{value:'"go"'},{value:'"next"'},{value:'"previous"'},{value:'"send"'}]}},hidden:{defaultValue:null,description:"",name:"hidden",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},id:{defaultValue:null,description:"",name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},lang:{defaultValue:null,description:"",name:"lang",required:!1,type:{name:"enum",value:[{value:"string"}]}},nonce:{defaultValue:null,description:"",name:"nonce",required:!1,type:{name:"enum",value:[{value:"string"}]}},slot:{defaultValue:null,description:"",name:"slot",required:!1,type:{name:"enum",value:[{value:"string"}]}},spellCheck:{defaultValue:null,description:"",name:"spellCheck",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},style:{defaultValue:null,description:"",name:"style",required:!1,type:{name:"enum",value:[{value:"CSSProperties"}]}},tabIndex:{defaultValue:null,description:"",name:"tabIndex",required:!1,type:{name:"enum",value:[{value:"number"}]}},title:{defaultValue:null,description:"",name:"title",required:!1,type:{name:"enum",value:[{value:"string"}]}},translate:{defaultValue:null,description:"",name:"translate",required:!1,type:{name:"enum",value:[{value:'"no"'},{value:'"yes"'}]}},radioGroup:{defaultValue:null,description:"",name:"radioGroup",required:!1,type:{name:"enum",value:[{value:"string"}]}},role:{defaultValue:null,description:"",name:"role",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"main"'},{value:'"article"'},{value:'"table"'},{value:'"figure"'},{value:'"row"'},{value:'"button"'},{value:'"dialog"'},{value:'"form"'},{value:'"img"'},{value:'"link"'},{value:'"menu"'},{value:'"menuitem"'},{value:'"option"'},{value:'"search"'},{value:"string & {}"},{value:'"alert"'},{value:'"alertdialog"'},{value:'"application"'},{value:'"banner"'},{value:'"cell"'},{value:'"checkbox"'},{value:'"columnheader"'},{value:'"combobox"'},{value:'"complementary"'},{value:'"contentinfo"'},{value:'"definition"'},{value:'"directory"'},{value:'"document"'},{value:'"feed"'},{value:'"grid"'},{value:'"gridcell"'},{value:'"group"'},{value:'"heading"'},{value:'"list"'},{value:'"listbox"'},{value:'"listitem"'},{value:'"log"'},{value:'"marquee"'},{value:'"math"'},{value:'"menubar"'},{value:'"menuitemcheckbox"'},{value:'"menuitemradio"'},{value:'"navigation"'},{value:'"note"'},{value:'"presentation"'},{value:'"progressbar"'},{value:'"radio"'},{value:'"radiogroup"'},{value:'"region"'},{value:'"rowgroup"'},{value:'"rowheader"'},{value:'"scrollbar"'},{value:'"searchbox"'},{value:'"separator"'},{value:'"slider"'},{value:'"spinbutton"'},{value:'"status"'},{value:'"switch"'},{value:'"tab"'},{value:'"tablist"'},{value:'"tabpanel"'},{value:'"term"'},{value:'"textbox"'},{value:'"timer"'},{value:'"toolbar"'},{value:'"tooltip"'},{value:'"tree"'},{value:'"treegrid"'},{value:'"treeitem"'}]}},about:{defaultValue:null,description:"",name:"about",required:!1,type:{name:"enum",value:[{value:"string"}]}},content:{defaultValue:null,description:"",name:"content",required:!1,type:{name:"enum",value:[{value:"string"}]}},datatype:{defaultValue:null,description:"",name:"datatype",required:!1,type:{name:"enum",value:[{value:"string"}]}},inlist:{defaultValue:null,description:"",name:"inlist",required:!1,type:{name:"any"}},prefix:{defaultValue:null,description:"",name:"prefix",required:!1,type:{name:"enum",value:[{value:"string"}]}},property:{defaultValue:null,description:"",name:"property",required:!1,type:{name:"enum",value:[{value:"string"}]}},rel:{defaultValue:null,description:"",name:"rel",required:!1,type:{name:"enum",value:[{value:"string"}]}},resource:{defaultValue:null,description:"",name:"resource",required:!1,type:{name:"enum",value:[{value:"string"}]}},rev:{defaultValue:null,description:"",name:"rev",required:!1,type:{name:"enum",value:[{value:"string"}]}},typeof:{defaultValue:null,description:"",name:"typeof",required:!1,type:{name:"enum",value:[{value:"string"}]}},vocab:{defaultValue:null,description:"",name:"vocab",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoCorrect:{defaultValue:null,description:"",name:"autoCorrect",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoSave:{defaultValue:null,description:"",name:"autoSave",required:!1,type:{name:"enum",value:[{value:"string"}]}},color:{defaultValue:null,description:"",name:"color",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemProp:{defaultValue:null,description:"",name:"itemProp",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemScope:{defaultValue:null,description:"",name:"itemScope",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},itemType:{defaultValue:null,description:"",name:"itemType",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemID:{defaultValue:null,description:"",name:"itemID",required:!1,type:{name:"enum",value:[{value:"string"}]}},itemRef:{defaultValue:null,description:"",name:"itemRef",required:!1,type:{name:"enum",value:[{value:"string"}]}},results:{defaultValue:null,description:"",name:"results",required:!1,type:{name:"enum",value:[{value:"number"}]}},security:{defaultValue:null,description:"",name:"security",required:!1,type:{name:"enum",value:[{value:"string"}]}},unselectable:{defaultValue:null,description:"",name:"unselectable",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},inputMode:{defaultValue:null,description:`Hints at the type of data that might be entered by the user while editing the element or its contents
 @see {@link https://html.spec.whatwg.org/multipage/interaction.html#input-modalities:-the-inputmode-attribute}`,name:"inputMode",required:!1,type:{name:"enum",value:[{value:'"url"'},{value:'"none"'},{value:'"search"'},{value:'"text"'},{value:'"tel"'},{value:'"email"'},{value:'"numeric"'},{value:'"decimal"'}]}},is:{defaultValue:null,description:`Specify that a standard HTML element should behave like a defined custom built-in element
 @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#attr-is}`,name:"is",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-activedescendant":{defaultValue:null,description:"Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.",name:"aria-activedescendant",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-atomic":{defaultValue:null,description:"Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute.",name:"aria-atomic",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-autocomplete":{defaultValue:null,description:`Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be
-presented if they are made.`,name:"aria-autocomplete",required:!1,type:{name:"enum",value:[{value:'"inline"'},{value:'"none"'},{value:'"list"'},{value:'"both"'}]}},"aria-braillelabel":{defaultValue:null,description:`Defines a string value that labels the current element, which is intended to be converted into Braille.
+presented if they are made.`,name:"aria-autocomplete",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"inline"'},{value:'"list"'},{value:'"both"'}]}},"aria-braillelabel":{defaultValue:null,description:`Defines a string value that labels the current element, which is intended to be converted into Braille.
 @see aria-label.`,name:"aria-braillelabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-brailleroledescription":{defaultValue:null,description:`Defines a human-readable, author-localized abbreviated description for the role of an element, which is intended to be converted into Braille.
 @see aria-roledescription.`,name:"aria-brailleroledescription",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-busy":{defaultValue:null,description:"",name:"aria-busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-checked":{defaultValue:null,description:`Indicates the current "checked" state of checkboxes, radio buttons, and other widgets.
 @see aria-pressed
@@ -13,7 +13,7 @@ presented if they are made.`,name:"aria-autocomplete",required:!1,type:{name:"en
 @see aria-rowindextext.`,name:"aria-colindextext",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-colspan":{defaultValue:null,description:`Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid.
 @see aria-colindex
 @see aria-rowspan.`,name:"aria-colspan",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-controls":{defaultValue:null,description:`Identifies the element (or elements) whose contents or presence are controlled by the current element.
-@see aria-owns.`,name:"aria-controls",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-current":{defaultValue:null,description:"Indicates the element that represents the current item within a container or set of related elements.",name:"aria-current",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"step"'},{value:'"true"'},{value:'"false"'},{value:'"page"'},{value:'"location"'},{value:'"date"'},{value:'"time"'}]}},"aria-describedby":{defaultValue:null,description:`Identifies the element (or elements) that describes the object.
+@see aria-owns.`,name:"aria-controls",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-current":{defaultValue:null,description:"Indicates the element that represents the current item within a container or set of related elements.",name:"aria-current",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"time"'},{value:'"true"'},{value:'"false"'},{value:'"page"'},{value:'"step"'},{value:'"location"'},{value:'"date"'}]}},"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-description":{defaultValue:null,description:`Defines a string value that describes or annotates the current element.
 @see related aria-describedby.`,name:"aria-description",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-details":{defaultValue:null,description:`Identifies the element that provides a detailed, extended description for the object.
 @see aria-describedby.`,name:"aria-details",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-disabled":{defaultValue:null,description:`Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable.
@@ -23,7 +23,7 @@ presented if they are made.`,name:"aria-autocomplete",required:!1,type:{name:"en
 @see aria-invalid
 @see aria-describedby.`,name:"aria-errormessage",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-expanded":{defaultValue:null,description:"Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed.",name:"aria-expanded",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-flowto":{defaultValue:null,description:`Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,
 allows assistive technology to override the general default of reading in document source order.`,name:"aria-flowto",required:!1,type:{name:"enum",value:[{value:"string"}]}},"aria-grabbed":{defaultValue:null,description:`Indicates an element's "grabbed" state in a drag-and-drop operation.
-@deprecated in ARIA 1.1`,name:"aria-grabbed",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-haspopup":{defaultValue:null,description:"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",name:"aria-haspopup",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"dialog"'},{value:'"grid"'},{value:'"listbox"'},{value:'"menu"'},{value:'"tree"'}]}},"aria-hidden":{defaultValue:null,description:`Indicates whether the element is exposed to an accessibility API.
+@deprecated in ARIA 1.1`,name:"aria-grabbed",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-haspopup":{defaultValue:null,description:"Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.",name:"aria-haspopup",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"dialog"'},{value:'"menu"'},{value:'"true"'},{value:'"false"'},{value:'"grid"'},{value:'"listbox"'},{value:'"tree"'}]}},"aria-hidden":{defaultValue:null,description:`Indicates whether the element is exposed to an accessibility API.
 @see aria-disabled.`,name:"aria-hidden",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-invalid":{defaultValue:null,description:`Indicates the entered value does not conform to the format expected by the application.
 @see aria-errormessage.`,name:"aria-invalid",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'},{value:'"grammar"'},{value:'"spelling"'}]}},"aria-keyshortcuts":{defaultValue:null,description:"Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element.",name:"aria-keyshortcuts",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.
@@ -46,8 +46,8 @@ A hint could be a sample value or a brief description of the expected format.`,n
 @see aria-pressed.`,name:"aria-selected",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-setsize":{defaultValue:null,description:`Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM.
 @see aria-posinset.`,name:"aria-setsize",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-sort":{defaultValue:null,description:"Indicates if items in a table or grid are sorted in ascending or descending order.",name:"aria-sort",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"ascending"'},{value:'"descending"'},{value:'"other"'}]}},"aria-valuemax":{defaultValue:null,description:"Defines the maximum allowed value for a range widget.",name:"aria-valuemax",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-valuemin":{defaultValue:null,description:"Defines the minimum allowed value for a range widget.",name:"aria-valuemin",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-valuenow":{defaultValue:null,description:`Defines the current value for a range widget.
 @see aria-valuetext.`,name:"aria-valuenow",required:!1,type:{name:"enum",value:[{value:"number"}]}},"aria-valuetext":{defaultValue:null,description:"Defines the human readable text alternative of aria-valuenow for a range widget.",name:"aria-valuetext",required:!1,type:{name:"enum",value:[{value:"string"}]}},dangerouslySetInnerHTML:{defaultValue:null,description:"",name:"dangerouslySetInnerHTML",required:!1,type:{name:"enum",value:[{value:"{ __html: string | TrustedHTML; }"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCopyCapture:{defaultValue:null,description:"",name:"onCopyCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCutCapture:{defaultValue:null,description:"",name:"onCutCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onPasteCapture:{defaultValue:null,description:"",name:"onPasteCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionEndCapture:{defaultValue:null,description:"",name:"onCompositionEndCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionStartCapture:{defaultValue:null,description:"",name:"onCompositionStartCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onCompositionUpdateCapture:{defaultValue:null,description:"",name:"onCompositionUpdateCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLSelectElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onFocusCapture:{defaultValue:null,description:"",name:"onFocusCapture",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onBlurCapture:{defaultValue:null,description:"",name:"onBlurCapture",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onChangeCapture:{defaultValue:null,description:"",name:"onChangeCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onBeforeInputCapture:{defaultValue:null,description:"",name:"onBeforeInputCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onInputCapture:{defaultValue:null,description:"",name:"onInputCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onReset:{defaultValue:null,description:"",name:"onReset",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onResetCapture:{defaultValue:null,description:"",name:"onResetCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onSubmit:{defaultValue:null,description:"",name:"onSubmit",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onSubmitCapture:{defaultValue:null,description:"",name:"onSubmitCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onInvalid:{defaultValue:null,description:"",name:"onInvalid",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onInvalidCapture:{defaultValue:null,description:"",name:"onInvalidCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLSelectElement>"}]}},onLoad:{defaultValue:null,description:"",name:"onLoad",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadCapture:{defaultValue:null,description:"",name:"onLoadCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onError:{defaultValue:null,description:"",name:"onError",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onErrorCapture:{defaultValue:null,description:"",name:"onErrorCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyDownCapture:{defaultValue:null,description:"",name:"onKeyDownCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyPress:{defaultValue:null,description:"@deprecated Use `onKeyUp` or `onKeyDown` instead",name:"onKeyPress",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyPressCapture:{defaultValue:null,description:"@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead",name:"onKeyPressCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyUpCapture:{defaultValue:null,description:"",name:"onKeyUpCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onAbort:{defaultValue:null,description:"",name:"onAbort",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onAbortCapture:{defaultValue:null,description:"",name:"onAbortCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onCanPlay:{defaultValue:null,description:"",name:"onCanPlay",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onCanPlayCapture:{defaultValue:null,description:"",name:"onCanPlayCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onCanPlayThrough:{defaultValue:null,description:"",name:"onCanPlayThrough",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onCanPlayThroughCapture:{defaultValue:null,description:"",name:"onCanPlayThroughCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onDurationChange:{defaultValue:null,description:"",name:"onDurationChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onDurationChangeCapture:{defaultValue:null,description:"",name:"onDurationChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEmptied:{defaultValue:null,description:"",name:"onEmptied",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEmptiedCapture:{defaultValue:null,description:"",name:"onEmptiedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEncrypted:{defaultValue:null,description:"",name:"onEncrypted",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEncryptedCapture:{defaultValue:null,description:"",name:"onEncryptedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEnded:{defaultValue:null,description:"",name:"onEnded",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onEndedCapture:{defaultValue:null,description:"",name:"onEndedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadedData:{defaultValue:null,description:"",name:"onLoadedData",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadedDataCapture:{defaultValue:null,description:"",name:"onLoadedDataCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadedMetadata:{defaultValue:null,description:"",name:"onLoadedMetadata",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadedMetadataCapture:{defaultValue:null,description:"",name:"onLoadedMetadataCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadStart:{defaultValue:null,description:"",name:"onLoadStart",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onLoadStartCapture:{defaultValue:null,description:"",name:"onLoadStartCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPause:{defaultValue:null,description:"",name:"onPause",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPauseCapture:{defaultValue:null,description:"",name:"onPauseCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPlay:{defaultValue:null,description:"",name:"onPlay",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPlayCapture:{defaultValue:null,description:"",name:"onPlayCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPlaying:{defaultValue:null,description:"",name:"onPlaying",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onPlayingCapture:{defaultValue:null,description:"",name:"onPlayingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onProgress:{defaultValue:null,description:"",name:"onProgress",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onProgressCapture:{defaultValue:null,description:"",name:"onProgressCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onRateChange:{defaultValue:null,description:"",name:"onRateChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onRateChangeCapture:{defaultValue:null,description:"",name:"onRateChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onResize:{defaultValue:null,description:"",name:"onResize",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onResizeCapture:{defaultValue:null,description:"",name:"onResizeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSeeked:{defaultValue:null,description:"",name:"onSeeked",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSeekedCapture:{defaultValue:null,description:"",name:"onSeekedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSeeking:{defaultValue:null,description:"",name:"onSeeking",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSeekingCapture:{defaultValue:null,description:"",name:"onSeekingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onStalled:{defaultValue:null,description:"",name:"onStalled",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onStalledCapture:{defaultValue:null,description:"",name:"onStalledCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSuspend:{defaultValue:null,description:"",name:"onSuspend",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSuspendCapture:{defaultValue:null,description:"",name:"onSuspendCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onTimeUpdate:{defaultValue:null,description:"",name:"onTimeUpdate",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onTimeUpdateCapture:{defaultValue:null,description:"",name:"onTimeUpdateCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onVolumeChange:{defaultValue:null,description:"",name:"onVolumeChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onVolumeChangeCapture:{defaultValue:null,description:"",name:"onVolumeChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onWaiting:{defaultValue:null,description:"",name:"onWaiting",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onWaitingCapture:{defaultValue:null,description:"",name:"onWaitingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onAuxClick:{defaultValue:null,description:"",name:"onAuxClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onAuxClickCapture:{defaultValue:null,description:"",name:"onAuxClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onClickCapture:{defaultValue:null,description:"",name:"onClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onContextMenu:{defaultValue:null,description:"",name:"onContextMenu",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onContextMenuCapture:{defaultValue:null,description:"",name:"onContextMenuCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onDoubleClick:{defaultValue:null,description:"",name:"onDoubleClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onDoubleClickCapture:{defaultValue:null,description:"",name:"onDoubleClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onDrag:{defaultValue:null,description:"",name:"onDrag",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragCapture:{defaultValue:null,description:"",name:"onDragCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragEnd:{defaultValue:null,description:"",name:"onDragEnd",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragEndCapture:{defaultValue:null,description:"",name:"onDragEndCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragEnter:{defaultValue:null,description:"",name:"onDragEnter",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragEnterCapture:{defaultValue:null,description:"",name:"onDragEnterCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragExit:{defaultValue:null,description:"",name:"onDragExit",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragExitCapture:{defaultValue:null,description:"",name:"onDragExitCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragLeave:{defaultValue:null,description:"",name:"onDragLeave",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragLeaveCapture:{defaultValue:null,description:"",name:"onDragLeaveCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragOver:{defaultValue:null,description:"",name:"onDragOver",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragOverCapture:{defaultValue:null,description:"",name:"onDragOverCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragStart:{defaultValue:null,description:"",name:"onDragStart",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDragStartCapture:{defaultValue:null,description:"",name:"onDragStartCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDrop:{defaultValue:null,description:"",name:"onDrop",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onDropCapture:{defaultValue:null,description:"",name:"onDropCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLSelectElement>"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseDownCapture:{defaultValue:null,description:"",name:"onMouseDownCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseLeave:{defaultValue:null,description:"",name:"onMouseLeave",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseMoveCapture:{defaultValue:null,description:"",name:"onMouseMoveCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseOut:{defaultValue:null,description:"",name:"onMouseOut",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseOutCapture:{defaultValue:null,description:"",name:"onMouseOutCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseOver:{defaultValue:null,description:"",name:"onMouseOver",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseOverCapture:{defaultValue:null,description:"",name:"onMouseOverCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onMouseUpCapture:{defaultValue:null,description:"",name:"onMouseUpCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLSelectElement>"}]}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onSelectCapture:{defaultValue:null,description:"",name:"onSelectCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLSelectElement>"}]}},onTouchCancel:{defaultValue:null,description:"",name:"onTouchCancel",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchCancelCapture:{defaultValue:null,description:"",name:"onTouchCancelCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchEnd:{defaultValue:null,description:"",name:"onTouchEnd",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchEndCapture:{defaultValue:null,description:"",name:"onTouchEndCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchMove:{defaultValue:null,description:"",name:"onTouchMove",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchMoveCapture:{defaultValue:null,description:"",name:"onTouchMoveCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchStart:{defaultValue:null,description:"",name:"onTouchStart",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onTouchStartCapture:{defaultValue:null,description:"",name:"onTouchStartCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLSelectElement>"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerDownCapture:{defaultValue:null,description:"",name:"onPointerDownCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerMove:{defaultValue:null,description:"",name:"onPointerMove",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerMoveCapture:{defaultValue:null,description:"",name:"onPointerMoveCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerUp:{defaultValue:null,description:"",name:"onPointerUp",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerUpCapture:{defaultValue:null,description:"",name:"onPointerUpCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerCancel:{defaultValue:null,description:"",name:"onPointerCancel",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerCancelCapture:{defaultValue:null,description:"",name:"onPointerCancelCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerLeave:{defaultValue:null,description:"",name:"onPointerLeave",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerOver:{defaultValue:null,description:"",name:"onPointerOver",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerOverCapture:{defaultValue:null,description:"",name:"onPointerOverCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerOut:{defaultValue:null,description:"",name:"onPointerOut",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onPointerOutCapture:{defaultValue:null,description:"",name:"onPointerOutCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onGotPointerCapture:{defaultValue:null,description:"",name:"onGotPointerCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onGotPointerCaptureCapture:{defaultValue:null,description:"",name:"onGotPointerCaptureCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onLostPointerCapture:{defaultValue:null,description:"",name:"onLostPointerCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onLostPointerCaptureCapture:{defaultValue:null,description:"",name:"onLostPointerCaptureCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLSelectElement>"}]}},onScroll:{defaultValue:null,description:"",name:"onScroll",required:!1,type:{name:"enum",value:[{value:"UIEventHandler<HTMLSelectElement>"}]}},onScrollCapture:{defaultValue:null,description:"",name:"onScrollCapture",required:!1,type:{name:"enum",value:[{value:"UIEventHandler<HTMLSelectElement>"}]}},onWheel:{defaultValue:null,description:"",name:"onWheel",required:!1,type:{name:"enum",value:[{value:"WheelEventHandler<HTMLSelectElement>"}]}},onWheelCapture:{defaultValue:null,description:"",name:"onWheelCapture",required:!1,type:{name:"enum",value:[{value:"WheelEventHandler<HTMLSelectElement>"}]}},onAnimationStart:{defaultValue:null,description:"",name:"onAnimationStart",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationStartCapture:{defaultValue:null,description:"",name:"onAnimationStartCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationEnd:{defaultValue:null,description:"",name:"onAnimationEnd",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationEndCapture:{defaultValue:null,description:"",name:"onAnimationEndCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationIteration:{defaultValue:null,description:"",name:"onAnimationIteration",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onAnimationIterationCapture:{defaultValue:null,description:"",name:"onAnimationIterationCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLSelectElement>"}]}},onTransitionEnd:{defaultValue:null,description:"",name:"onTransitionEnd",required:!1,type:{name:"enum",value:[{value:"TransitionEventHandler<HTMLSelectElement>"}]}},onTransitionEndCapture:{defaultValue:null,description:"",name:"onTransitionEndCapture",required:!1,type:{name:"enum",value:[{value:"TransitionEventHandler<HTMLSelectElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},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: HTMLSelectElement | null) => void"},{value:"RefObject<HTMLSelectElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const g=f.forwardRef(function({id:i,label:n,description:t,error:d,required:o,inputDataset:u,dataset:e,hideLabel:s,onClick:m,children:v,hasError:p,useLegacyRequiredLabel:c,className:H,style:r,...C},M){return a.jsx(S,{id:i,label:n,description:t,error:d,hasError:p,required:o,dataset:e,hideLabel:s,onClick:m,useLegacyRequiredLabel:c,preplyDsComponent:q.SelectField,children:a.jsx(y,{...C,ref:M,dataset:u,children:v})})});g.Option=E;const h=g;function E(l){return a.jsx("option",{...l,...V(void 0,{preplyDsComponent:q.SelectFieldOption})})}try{E.displayName="SelectFieldOption",E.__docgenInfo={description:"",displayName:"SelectFieldOption",props:{value:{defaultValue:null,description:"",name:"value",required:!0,type:{name:"string"}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}}}}}catch{}try{h.displayName="SelectField",h.__docgenInfo={description:"",displayName:"SelectField",props:{id:{defaultValue:null,description:`The id to be passed to the input element.
-If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLSelectElement>"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
-to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
-indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
+If not provided, will be generated for accessibility purposes.`,name:"id",required:!1,type:{name:"enum",value:[{value:"string"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLDivElement> & MouseEventHandler<HTMLSelectElement>"}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}},error:{defaultValue:null,description:"Error message to display when the field has an invalid value.",name:"error",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},label:{defaultValue:null,description:"The field label. This is needed for accessibility purposes, but can be\nhidden using the `hideLabel` prop.",name:"label",required:!0,type:{name:"enum",value:[{value:"undefined"},{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},description:{defaultValue:null,description:`Additional descriptive text that appears below the input field
+to provide more context or instructions to the user.`,name:"description",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"false"},{value:"true"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"},{value:"Iterable<ReactNode>"},{value:"ReactPortal"}]}},required:{defaultValue:null,description:`Indicates if the field is required. When false, adds a "Optional"
+indicator next to the label.`,name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hasError:{defaultValue:null,description:"Whether the field has an error.\n@deprecated Use `error` prop to exlicitly describe the error to users",name:"hasError",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},hideLabel:{defaultValue:null,description:"Use this to hide the `label` visually, but keep it in the accessibility\ntree.",name:"hideLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},useLegacyRequiredLabel:{defaultValue:null,description:`When true, adds a "Required" indicator next to the label for the required fields.
 When false, adds a "Optional" indicator next to the label for the optional fields instead.
-@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLSelectElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",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: HTMLSelectElement | null) => void"},{value:"RefObject<HTMLSelectElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{h as S,E as a};
+@deprecated This is a temporary solution for gradual migration to the "Optional" label.`,name:"useLegacyRequiredLabel",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},name:{defaultValue:null,description:"",name:"name",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLSelectElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLSelectElement>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLSelectElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLSelectElement>"}]}},icon:{defaultValue:null,description:"",name:"icon",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},placeholder:{defaultValue:null,description:"",name:"placeholder",required:!1,type:{name:"enum",value:[{value:"string"}]}},inputDataset:{defaultValue:null,description:"",name:"inputDataset",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: HTMLSelectElement | null) => void"},{value:"RefObject<HTMLSelectElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{h as S,E as a};

package/dist/assets/{SelectField.stories-BaiubhSn.js → SelectField.stories-B4CMJsMc.js}

@@ -1,4 +1,4 @@
-import{j as o}from"./jsx-runtime-BYouaCF_.js";import{r as ae}from"./index-B3evPFBL.js";import{f as r,w as f,e as t,u as w}from"./index-DDyIDR-R.js";import{F as $}from"./TokyoUILanguage-BNq9ng3F.js";import{I as ee}from"./Icon-BLj2hNSU.js";import{S as i}from"./SelectField-De3TaFOp.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./FormControl-CeIJk4_Z.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BraTJ16C.js";import"./InputContainer-Bk0tgFnW.js";import"./TokyoUIExpand-DThzqohx.js";const He={title:"components/SelectField",component:i,subcomponents:{SelectFieldOption:i.Option},args:{name:"language",label:"Language",placeholder:"Select a language",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r(),children:o.jsxs(o.Fragment,{children:[o.jsx(i.Option,{value:"english",children:"English"}),o.jsx(i.Option,{value:"spanish",children:"Spanish"}),o.jsx(i.Option,{value:"french",children:"French"})]})}},p={play:async({canvasElement:a,step:e,args:n})=>{const s=f(a),l=s.getByTestId("field"),c=s.getByTestId("input");await e("it should render correct label",async()=>{const x=f(l).getByTestId("label");t(x).toHaveTextContent("Language • Optional"),t(c).toHaveAccessibleName("Language")}),await e("it should call onFocus when the input is focused",async()=>{c.focus(),t(n.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.selectOptions(c,"spanish"),t(n.onValueChange).toHaveBeenCalledWith("spanish"),t(n.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),t(n.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{t(l).toHaveAttribute("data-testid","field"),t(l).toHaveAttribute("data-foo","bar"),t(c).toHaveAttribute("data-testid","input"),t(c).toHaveAttribute("data-foo","bar")}),await e("it should render all options",async()=>{const x=s.getByRole("option",{name:"English"}),te=s.getByRole("option",{name:"Spanish"}),ne=s.getByRole("option",{name:"French"});t(x).toBeInTheDocument(),t(te).toBeInTheDocument(),t(ne).toBeInTheDocument()})}},d={render:function(e){const[n,s]=ae.useState(e.value);return o.jsxs(i,{...e,value:n,onChange:l=>{var c;s(l.target.value),(c=e.onChange)==null||c.call(e,l)},children:[o.jsx(i.Option,{value:"english",children:"English"}),o.jsx(i.Option,{value:"spanish",children:"Spanish"}),o.jsx(i.Option,{value:"french",children:"French"})]})},args:{label:"Controlled SelectField",placeholder:"Select a language...",value:"spanish"},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const n=a.getByTestId("input");await t(n).toHaveValue("spanish")}),await e("it should update the value when the user selects",async()=>{const n=a.getByTestId("input");await w.selectOptions(n,"french"),t(n).toHaveValue("french")})}},u={args:{icon:o.jsx(ee,{svg:$,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const n=a.getByTestId("icon");t(n).toBeInTheDocument()})}},h={args:{description:"We will use this to get a personalized choice of tutors"},play:async({canvas:a,step:e})=>{const n=a.getByTestId("input"),s=a.getByTestId("description");await e("it should render the description",async()=>{t(n).toHaveAccessibleDescription("We will use this to get a personalized choice of tutors"),t(s).toHaveTextContent("We will use this to get a personalized choice of tutors")})}},g={args:{required:!0},play:async({canvas:a,step:e})=>{const n=a.getByTestId("input"),s=a.getByTestId("label");await e("it should render correct label",async()=>{t(n).toHaveAccessibleName("Language"),t(s).toHaveTextContent("Language")}),await e("it should render required attribute",async()=>{t(n).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const n=a.getByTestId("input");t(n).toHaveAccessibleName("Language")})}},y={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const n=a.getByTestId("input"),s=a.getByTestId("error");await e("it should render the error message",async()=>{t(n).toHaveAccessibleErrorMessage("This is an error message"),t(s).toHaveTextContent("This is an error message")})}},v={args:{disabled:!0},play:async({canvas:a,step:e})=>{const n=a.getByTestId("input");await e("it should render the disabled input",async()=>{t(n).toHaveAttribute("disabled")})}},b={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Language",placeholder:"Select a subject",description:"We will use this to get a personalized choice of tutors",children:o.jsxs(o.Fragment,{children:[o.jsx(i.Option,{value:"english",children:"English"}),o.jsx(i.Option,{value:"spanish",children:"Spanish"}),o.jsx(i.Option,{value:"french",children:"French"})]})},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"text"},defaultValue:{control:"text"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":o.jsx(ee,{svg:$,label:"Student with a hat"})},control:"select"},children:{control:!1},hasError:{table:{disable:!0}}}};var B,T,S,I,H;p.parameters={...p.parameters,docs:{...(B=p.parameters)==null?void 0:B.docs,source:{originalSource:`{
+import{j as o}from"./jsx-runtime-BYouaCF_.js";import{r as ae}from"./index-B3evPFBL.js";import{f as r,w as f,e as t,u as w}from"./index-DDyIDR-R.js";import{F as $}from"./TokyoUILanguage-BNq9ng3F.js";import{I as ee}from"./Icon-w2ilcPHL.js";import{S as i}from"./SelectField-CNhQrH2n.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./FormControl-CeIJk4_Z.js";import"./index-DRKYGVyc.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./message-BraTJ16C.js";import"./InputContainer-Bk0tgFnW.js";import"./TokyoUIExpand-DThzqohx.js";const He={title:"components/SelectField",component:i,subcomponents:{SelectFieldOption:i.Option},args:{name:"language",label:"Language",placeholder:"Select a language",defaultValue:"",dataset:{testid:"field",foo:"bar"},inputDataset:{testid:"input",foo:"bar"},onChange:r(),onValueChange:r(),onBlur:r(),onFocus:r(),onClick:r(),onCopy:r(),onKeyDown:r(),onKeyUp:r(),onPaste:r(),children:o.jsxs(o.Fragment,{children:[o.jsx(i.Option,{value:"english",children:"English"}),o.jsx(i.Option,{value:"spanish",children:"Spanish"}),o.jsx(i.Option,{value:"french",children:"French"})]})}},p={play:async({canvasElement:a,step:e,args:n})=>{const s=f(a),l=s.getByTestId("field"),c=s.getByTestId("input");await e("it should render correct label",async()=>{const x=f(l).getByTestId("label");t(x).toHaveTextContent("Language • Optional"),t(c).toHaveAccessibleName("Language")}),await e("it should call onFocus when the input is focused",async()=>{c.focus(),t(n.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await w.selectOptions(c,"spanish"),t(n.onValueChange).toHaveBeenCalledWith("spanish"),t(n.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),t(n.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{t(l).toHaveAttribute("data-testid","field"),t(l).toHaveAttribute("data-foo","bar"),t(c).toHaveAttribute("data-testid","input"),t(c).toHaveAttribute("data-foo","bar")}),await e("it should render all options",async()=>{const x=s.getByRole("option",{name:"English"}),te=s.getByRole("option",{name:"Spanish"}),ne=s.getByRole("option",{name:"French"});t(x).toBeInTheDocument(),t(te).toBeInTheDocument(),t(ne).toBeInTheDocument()})}},d={render:function(e){const[n,s]=ae.useState(e.value);return o.jsxs(i,{...e,value:n,onChange:l=>{var c;s(l.target.value),(c=e.onChange)==null||c.call(e,l)},children:[o.jsx(i.Option,{value:"english",children:"English"}),o.jsx(i.Option,{value:"spanish",children:"Spanish"}),o.jsx(i.Option,{value:"french",children:"French"})]})},args:{label:"Controlled SelectField",placeholder:"Select a language...",value:"spanish"},play:async({canvas:a,step:e})=>{await e("it should render the correct initial value",async()=>{const n=a.getByTestId("input");await t(n).toHaveValue("spanish")}),await e("it should update the value when the user selects",async()=>{const n=a.getByTestId("input");await w.selectOptions(n,"french"),t(n).toHaveValue("french")})}},u={args:{icon:o.jsx(ee,{svg:$,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const n=a.getByTestId("icon");t(n).toBeInTheDocument()})}},h={args:{description:"We will use this to get a personalized choice of tutors"},play:async({canvas:a,step:e})=>{const n=a.getByTestId("input"),s=a.getByTestId("description");await e("it should render the description",async()=>{t(n).toHaveAccessibleDescription("We will use this to get a personalized choice of tutors"),t(s).toHaveTextContent("We will use this to get a personalized choice of tutors")})}},g={args:{required:!0},play:async({canvas:a,step:e})=>{const n=a.getByTestId("input"),s=a.getByTestId("label");await e("it should render correct label",async()=>{t(n).toHaveAccessibleName("Language"),t(s).toHaveTextContent("Language")}),await e("it should render required attribute",async()=>{t(n).toHaveAttribute("required")})}},m={args:{hideLabel:!0},play:async({canvas:a,step:e})=>{await e("it should render correct a11y label",async()=>{const n=a.getByTestId("input");t(n).toHaveAccessibleName("Language")})}},y={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const n=a.getByTestId("input"),s=a.getByTestId("error");await e("it should render the error message",async()=>{t(n).toHaveAccessibleErrorMessage("This is an error message"),t(s).toHaveTextContent("This is an error message")})}},v={args:{disabled:!0},play:async({canvas:a,step:e})=>{const n=a.getByTestId("input");await e("it should render the disabled input",async()=>{t(n).toHaveAttribute("disabled")})}},b={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Language",placeholder:"Select a subject",description:"We will use this to get a personalized choice of tutors",children:o.jsxs(o.Fragment,{children:[o.jsx(i.Option,{value:"english",children:"English"}),o.jsx(i.Option,{value:"spanish",children:"Spanish"}),o.jsx(i.Option,{value:"french",children:"French"})]})},argTypes:{label:{control:"text"},placeholder:{control:"text"},description:{control:"text"},error:{control:"text"},value:{control:"text"},defaultValue:{control:"text"},inputDataset:{control:"object"},dataset:{control:"object"},id:{control:"text"},required:{control:"boolean"},hideLabel:{control:"boolean"},name:{control:"text"},disabled:{control:"boolean"},icon:{options:["None","With Icon"],mapping:{None:void 0,"With Icon":o.jsx(ee,{svg:$,label:"Student with a hat"})},control:"select"},children:{control:!1},hasError:{table:{disable:!0}}}};var B,T,S,I,H;p.parameters={...p.parameters,docs:{...(B=p.parameters)==null?void 0:B.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,

package/dist/assets/{Steps-BIsSinlU.js → Steps-BdyOSLSR.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as i}from"./index-B3evPFBL.js";import{B as y}from"./Button-BSyqsKC5.js";import"./index-BfBdt3zW.js";import{H as C}from"./Heading-B0rTmnad.js";import{P as I}from"./ProgressSteps-BBrWCYks.js";import{g as M}from"./index-DdzHuZ-Y.js";import{w as V}from"./componentNames-CpCJzpB9.js";import{M as b}from"./message-BraTJ16C.js";const E="steps__6mN2m",q="content__t3rlv",A="header__hCorO",B="description__j42sQ",g={steps:E,content:q,header:A,description:B},N=i.createContext(void 0),P=()=>{const n=i.useContext(N);if(n===void 0)throw new Error("Steps navigation components must be used within a Steps component");return n||{}},O=i.forwardRef(function({onClick:t,disabled:p,variant:o="tertiary",...c},d){const{goToPreviousStep:s,currentStep:u,isNavigating:l,contentId:m}=P();return e.jsx(y,{...c,ref:d,variant:o,onClick:r=>{t==null||t(r),!r.defaultPrevented&&s()},disabled:u===1||l||p,"aria-controls":m,children:c.children||e.jsx(b,{id:"preply-ds.steps.previous",defaultMessage:"Previous",description:"Button used to navigate to the previous step"})})}),D=i.forwardRef(function({onClick:t,disabled:p,variant:o="primary",...c},d){const{goToNextStep:s,currentStep:u,totalSteps:l,isNavigating:m,contentId:r}=P();return e.jsx(y,{...c,ref:d,variant:o,onClick:S=>{t==null||t(S),!S.defaultPrevented&&s()},disabled:u===l||m||p,"aria-controls":r,children:c.children||e.jsx(b,{id:"preply-ds.steps.next",defaultMessage:"Next",description:"Button used to navigate to the next step"})})}),R=({children:n,"aria-label":t,initialStep:p=1,onStepChange:o,dataset:c})=>{const d=i.useId(),[s,u]=i.useState(p),[l,m]=i.useState(!1),r=[],S=[];n==null||n.forEach(a=>{i.isValidElement(a)&&a.type===T?r.push(a):S.push(a)});const h=r.length,w=M(c,{preplyDsComponent:V.Steps}),f=async a=>{const v=Math.min(Math.max(a,1),h);if(!o){u(v);return}m(!0);try{const _=await o(s,v);u(_??v)}finally{m(!1)}},j={goToPreviousStep:()=>f(s-1),goToNextStep:()=>f(s+1),goToStep:a=>f(a),currentStep:s,totalSteps:h,isNavigating:l,contentId:d};return e.jsxs("div",{...w,className:g.steps,id:d,"aria-live":"polite","aria-busy":l,children:[e.jsx(I,{currentStep:s,totalSteps:h,"aria-label":t}),e.jsx("div",{className:g.content,children:e.jsxs(N.Provider,{value:j,children:[r[s-1],S]})})]})},T=({title:n,description:t,children:p,hideHeader:o})=>e.jsxs(e.Fragment,{children:[!o&&e.jsxs("hgroup",{className:g.header,children:[e.jsx(C,{tag:"h3",variant:"medium",children:n}),t&&e.jsx("p",{className:g.description,children:t})]}),p]}),x=Object.assign(R,{Step:T,Previous:O,Next:D});try{x.displayName="Steps",x.__docgenInfo={description:"This component allows users to navigate through a series of steps, providing\na structured way to complete tasks or forms. It will also handle screen reader\nannouncements and progress indicators.\n\nTo create a step, wrap the content of each step in a `Steps.Step` component.\nAny non-`Steps.Step` children will be rendered outside of the steps flow,\nright after the currently active step.\n\nTo navigate between steps, use the `Steps.Previous` and `Steps.Next` components.\nAlternatively, you can use the `StepsContext` directly to call\n`goToPreviousStep`, `goToNextStep`, or `goToStep`.",displayName:"Steps",props:{"aria-label":{defaultValue:null,description:`A description of the step flow and its content for screen readers.
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as i}from"./index-B3evPFBL.js";import{B as y}from"./Button-w2cr0Ds_.js";import"./index-BfBdt3zW.js";import{H as C}from"./Heading-DLWgmTU5.js";import{P as I}from"./ProgressSteps-BBrWCYks.js";import{g as M}from"./index-DdzHuZ-Y.js";import{w as V}from"./componentNames-CpCJzpB9.js";import{M as b}from"./message-BraTJ16C.js";const E="steps__6mN2m",q="content__t3rlv",A="header__hCorO",B="description__j42sQ",g={steps:E,content:q,header:A,description:B},N=i.createContext(void 0),P=()=>{const n=i.useContext(N);if(n===void 0)throw new Error("Steps navigation components must be used within a Steps component");return n||{}},O=i.forwardRef(function({onClick:t,disabled:p,variant:o="tertiary",...c},d){const{goToPreviousStep:s,currentStep:u,isNavigating:l,contentId:m}=P();return e.jsx(y,{...c,ref:d,variant:o,onClick:r=>{t==null||t(r),!r.defaultPrevented&&s()},disabled:u===1||l||p,"aria-controls":m,children:c.children||e.jsx(b,{id:"preply-ds.steps.previous",defaultMessage:"Previous",description:"Button used to navigate to the previous step"})})}),D=i.forwardRef(function({onClick:t,disabled:p,variant:o="primary",...c},d){const{goToNextStep:s,currentStep:u,totalSteps:l,isNavigating:m,contentId:r}=P();return e.jsx(y,{...c,ref:d,variant:o,onClick:S=>{t==null||t(S),!S.defaultPrevented&&s()},disabled:u===l||m||p,"aria-controls":r,children:c.children||e.jsx(b,{id:"preply-ds.steps.next",defaultMessage:"Next",description:"Button used to navigate to the next step"})})}),R=({children:n,"aria-label":t,initialStep:p=1,onStepChange:o,dataset:c})=>{const d=i.useId(),[s,u]=i.useState(p),[l,m]=i.useState(!1),r=[],S=[];n==null||n.forEach(a=>{i.isValidElement(a)&&a.type===T?r.push(a):S.push(a)});const h=r.length,w=M(c,{preplyDsComponent:V.Steps}),f=async a=>{const v=Math.min(Math.max(a,1),h);if(!o){u(v);return}m(!0);try{const _=await o(s,v);u(_??v)}finally{m(!1)}},j={goToPreviousStep:()=>f(s-1),goToNextStep:()=>f(s+1),goToStep:a=>f(a),currentStep:s,totalSteps:h,isNavigating:l,contentId:d};return e.jsxs("div",{...w,className:g.steps,id:d,"aria-live":"polite","aria-busy":l,children:[e.jsx(I,{currentStep:s,totalSteps:h,"aria-label":t}),e.jsx("div",{className:g.content,children:e.jsxs(N.Provider,{value:j,children:[r[s-1],S]})})]})},T=({title:n,description:t,children:p,hideHeader:o})=>e.jsxs(e.Fragment,{children:[!o&&e.jsxs("hgroup",{className:g.header,children:[e.jsx(C,{tag:"h3",variant:"medium",children:n}),t&&e.jsx("p",{className:g.description,children:t})]}),p]}),x=Object.assign(R,{Step:T,Previous:O,Next:D});try{x.displayName="Steps",x.__docgenInfo={description:"This component allows users to navigate through a series of steps, providing\na structured way to complete tasks or forms. It will also handle screen reader\nannouncements and progress indicators.\n\nTo create a step, wrap the content of each step in a `Steps.Step` component.\nAny non-`Steps.Step` children will be rendered outside of the steps flow,\nright after the currently active step.\n\nTo navigate between steps, use the `Steps.Previous` and `Steps.Next` components.\nAlternatively, you can use the `StepsContext` directly to call\n`goToPreviousStep`, `goToNextStep`, or `goToStep`.",displayName:"Steps",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\`

package/dist/assets/{Steps.stories-DE0eTWot.js → Steps.stories-Dz8bq-Yg.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as G}from"./index-B3evPFBL.js";import{e as r,u as a,a as o}from"./index-DDyIDR-R.js";import{S as t,u as X}from"./Steps-BIsSinlU.js";import{L as h}from"./LayoutFlex-BPtL2qZR.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./Button-BSyqsKC5.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-Bdtn25V2.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-DdzHuZ-Y.js";import"./index-CC6DAVyL.js";import"./componentNames-CpCJzpB9.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./Heading-B0rTmnad.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./ProgressSteps-BBrWCYks.js";import"./message-BraTJ16C.js";import"./layout-relative.module-ed9bC4H4.js";const je={title:"Components/Steps",component:t,decorators:[s=>e.jsx("div",{style:{padding:"32px"},children:e.jsx(s,{})})]},i=e.jsx("div",{style:{width:"100%",height:"300px",backgroundColor:"#e0e0e0",marginBottom:"16px"}}),c={parameters:{docs:{description:{story:"Basic usage with header, controls, and content per step."}}},render:()=>e.jsxs(t,{dataset:{testid:"steps"},"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",description:"This is the description for step 1.",children:i}),e.jsx(t.Step,{title:"Step 2",description:"This is the description for step 2.",children:i}),e.jsx(t.Step,{title:"Step 3",description:"This is the description for step 3.",children:i}),e.jsxs(h,{justifyContent:"space-between",children:[e.jsx(t.Previous,{}),e.jsx(t.Next,{})]})]}),play:async({canvas:s})=>{r(s.getByText("Step 1")).toBeVisible(),await a.click(s.getByText("Next")),await o(()=>{r(s.getByText("Step 2")).toBeVisible()}),await a.click(s.getByText("Previous")),await o(()=>{r(s.getByText("Step 1")).toBeVisible()})}},d={parameters:{docs:{description:{story:"Example with hidden headers and only content per step."}}},render:()=>e.jsxs(t,{"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",hideHeader:!0,children:i}),e.jsx(t.Step,{title:"Step 2",hideHeader:!0,children:i}),e.jsx(t.Step,{title:"Step 3",hideHeader:!0,children:i}),e.jsxs(h,{justifyContent:"space-between",children:[e.jsx(t.Previous,{}),e.jsx(t.Next,{})]})]})},l={parameters:{docs:{description:{story:"Example demonstrating the use of a custom `initialStep`."}}},render:()=>e.jsxs(t,{initialStep:2,"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",description:"Step 1 is skipped.",children:i}),e.jsx(t.Step,{title:"Step 2",description:"Starting at step 2.",children:i}),e.jsx(t.Step,{title:"Step 3",description:"This is the third step.",children:i})]})},S={parameters:{docs:{description:{story:"Example with only navigation controls, no headers or content."}}},render:()=>e.jsxs(t,{"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",children:i}),e.jsx(t.Step,{title:"Step 2",children:i}),e.jsx(t.Step,{title:"Step 3",children:i}),e.jsxs(h,{justifyContent:"space-between",children:[e.jsx(t.Previous,{}),e.jsx(t.Next,{})]})]})},u={parameters:{docs:{description:{story:`Example with a 1-second async delay between steps.
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as G}from"./index-B3evPFBL.js";import{e as r,u as a,a as o}from"./index-DDyIDR-R.js";import{S as t,u as X}from"./Steps-BdyOSLSR.js";import{L as h}from"./LayoutFlex-8uO9g6rd.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./Button-w2cr0Ds_.js";import"./render-icon-CVTdrNe-.js";import"./ButtonBase-BagNt7Ga.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./Spinner-BCTJunNM.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./useMergeRefs-CeyIhNgY.js";import"./useHostname-CH18gHFj.js";import"./index-DdzHuZ-Y.js";import"./index-CC6DAVyL.js";import"./componentNames-CpCJzpB9.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./Heading-DLWgmTU5.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./ProgressSteps-BBrWCYks.js";import"./message-BraTJ16C.js";import"./layout-relative.module-ed9bC4H4.js";const je={title:"Components/Steps",component:t,decorators:[s=>e.jsx("div",{style:{padding:"32px"},children:e.jsx(s,{})})]},i=e.jsx("div",{style:{width:"100%",height:"300px",backgroundColor:"#e0e0e0",marginBottom:"16px"}}),c={parameters:{docs:{description:{story:"Basic usage with header, controls, and content per step."}}},render:()=>e.jsxs(t,{dataset:{testid:"steps"},"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",description:"This is the description for step 1.",children:i}),e.jsx(t.Step,{title:"Step 2",description:"This is the description for step 2.",children:i}),e.jsx(t.Step,{title:"Step 3",description:"This is the description for step 3.",children:i}),e.jsxs(h,{justifyContent:"space-between",children:[e.jsx(t.Previous,{}),e.jsx(t.Next,{})]})]}),play:async({canvas:s})=>{r(s.getByText("Step 1")).toBeVisible(),await a.click(s.getByText("Next")),await o(()=>{r(s.getByText("Step 2")).toBeVisible()}),await a.click(s.getByText("Previous")),await o(()=>{r(s.getByText("Step 1")).toBeVisible()})}},d={parameters:{docs:{description:{story:"Example with hidden headers and only content per step."}}},render:()=>e.jsxs(t,{"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",hideHeader:!0,children:i}),e.jsx(t.Step,{title:"Step 2",hideHeader:!0,children:i}),e.jsx(t.Step,{title:"Step 3",hideHeader:!0,children:i}),e.jsxs(h,{justifyContent:"space-between",children:[e.jsx(t.Previous,{}),e.jsx(t.Next,{})]})]})},l={parameters:{docs:{description:{story:"Example demonstrating the use of a custom `initialStep`."}}},render:()=>e.jsxs(t,{initialStep:2,"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",description:"Step 1 is skipped.",children:i}),e.jsx(t.Step,{title:"Step 2",description:"Starting at step 2.",children:i}),e.jsx(t.Step,{title:"Step 3",description:"This is the third step.",children:i})]})},S={parameters:{docs:{description:{story:"Example with only navigation controls, no headers or content."}}},render:()=>e.jsxs(t,{"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",children:i}),e.jsx(t.Step,{title:"Step 2",children:i}),e.jsx(t.Step,{title:"Step 3",children:i}),e.jsxs(h,{justifyContent:"space-between",children:[e.jsx(t.Previous,{}),e.jsx(t.Next,{})]})]})},u={parameters:{docs:{description:{story:`Example with a 1-second async delay between steps.
 
 Navigation controls are disabled during transitions, with a cursor loading indicator.`}}},render:()=>{const s=async(p,n)=>(await new Promise(g=>setTimeout(g,1e3)),n);return e.jsxs(t,{onStepChange:s,dataset:{testid:"steps"},"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",description:"Navigation has a 1s delay",children:i}),e.jsx(t.Step,{title:"Step 2",description:"Each navigation has async validation",children:i}),e.jsx(t.Step,{title:"Step 3",description:"Buttons are disabled during validation",children:i}),e.jsx(t.Step,{title:"Step 4",description:"Final step",children:i}),e.jsxs("div",{style:{display:"flex",justifyContent:"space-between"},children:[e.jsx(t.Previous,{}),e.jsx(t.Next,{})]})]})},play:async({canvas:s})=>{const p=s.getByTestId("steps");r(s.getByText("Step 1")).toBeVisible(),await a.click(s.getByText("Next")),r(p).toContainHTML('aria-busy="true"'),await o(()=>{r(p).toContainHTML('aria-busy="false"'),r(s.getByText("Step 2")).toBeVisible()})}},y={parameters:{docs:{description:{story:"You can override the navigation flow using `onStepChange`.\n\nThe following example skips step 3 and goes directly to step 4."}}},render:()=>{const s=async(p,n)=>n===3?p<3?4:2:n;return e.jsxs(t,{onStepChange:s,dataset:{testid:"steps"},"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Step 1",description:"Next goes to step 2",children:i}),e.jsx(t.Step,{title:"Step 2",description:"Step 3 will always be skipped",children:i}),e.jsx(t.Step,{title:"Step 3",description:"This step is not accessible",children:i}),e.jsx(t.Step,{title:"Step 4",description:"Previous goes to step 2",children:i}),e.jsxs(h,{justifyContent:"space-between",children:[e.jsx(t.Previous,{}),e.jsx(t.Next,{})]})]})},play:async({canvas:s})=>{r(s.getByText("Step 1")).toBeVisible(),await a.click(s.getByText("Next")),await o(()=>{r(s.getByText("Step 2")).toBeVisible()}),await a.click(s.getByText("Next")),await o(()=>{r(s.getByText("Step 4")).toBeVisible()}),await a.click(s.getByText("Previous")),await o(()=>{r(s.getByText("Step 2")).toBeVisible()})}},x={parameters:{docs:{description:{story:"Although not a great UX, you can customize the placement of the navigation buttons."}}},render:()=>e.jsxs(t,{"aria-label":"Story Steps",children:[e.jsx(t.Step,{title:"Custom Buttons Location",description:"Navigation buttons can be placed anywhere",children:e.jsxs("div",{style:{display:"flex",flexDirection:"column",gap:"16px"},children:[e.jsxs("div",{style:{display:"flex",gap:"8px"},children:[e.jsx(t.Previous,{variant:"secondary"}),e.jsx(t.Next,{})]}),i]})}),e.jsxs(t.Step,{title:"Customized Navigation",description:"Buttons can have custom text and styles",children:[i,e.jsxs("div",{style:{display:"flex",flexDirection:"column",alignItems:"center",gap:"8px"},children:[e.jsx(t.Next,{variant:"secondary",children:"Continue"}),e.jsx(t.Previous,{variant:"tertiary",children:"Go Back"})]})]}),e.jsxs(t.Step,{title:"Final Step",description:"Only previous button is needed here",children:[i,e.jsx("div",{children:e.jsx(t.Previous,{children:"Return to previous step"})})]})]})},Y=()=>{const{goToPreviousStep:s,goToNextStep:p,goToStep:n,totalSteps:g,isNavigating:v}=X();return G.useEffect(()=>{const b=O=>{if(!v)switch(O.key){case"ArrowLeft":s();break;case"ArrowRight":p();break;case"1":n(1);break;case"2":n(2);break;case"3":n(3);break}};return window.addEventListener("keydown",b),()=>window.removeEventListener("keydown",b)},[s,p,n,g,v]),e.jsxs("div",{style:{padding:"16px",backgroundColor:"#f5f5f5",borderRadius:"4px"},children:[e.jsxs("p",{children:[e.jsx("strong",{children:"Keyboard Navigation:"})," Click here to focus, then use:"]}),e.jsxs("ul",{children:[e.jsxs("li",{children:[e.jsx("kbd",{children:"←"})," Previous step"]}),e.jsxs("li",{children:[e.jsx("kbd",{children:"→"})," Next step"]}),e.jsxs("li",{children:[e.jsx("kbd",{children:"1"})," - ",e.jsx("kbd",{children:"3"})," Jump to step"]})]})]})},m={parameters:{docs:{description:{story:`This example demonstrates controlled navigation using the Steps context.