@preply/ds-docs 3.4.1 → 3.5.1

package/dist/assets/{ShowOnIntersection.stories-CQ4u9OFv.js → ShowOnIntersection.stories-ipu84fct.js}

@@ -1,4 +1,4 @@
-import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as o}from"./index-B3evPFBL.js";import{O as f}from"./ObserveIntersection-DIzoqV0M.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./componentNames-CpCJzpB9.js";const a=({onIntersect:e,once:u,threshold:c,tag:d,dataset:p,children:m})=>{const[l,v]=o.useState(!1),h=o.useCallback(()=>{l||v(!0),e==null||e()},[l,e]);return t.jsx(f,{onIntersect:h,once:e?u:!0,threshold:c,tag:d,dataset:p,children:l&&m})};try{a.displayName="ShowOnIntersection",a.__docgenInfo={description:"Only renders the wrapped components once it intersects with the viewport.\n\nNote that elements will not be detached from the DOM if the component is\nscrolled out of view again.\n\nYou can use `React.lazy` to lazy-load the wrapped components.\n\nAdditionally, an `onIntersect` callback can be provided. As with\n`ObserveIntersection`, this callback will be called every time the component\nintersects with the viewport, or only the first time if `once` is set to\n`true`.",displayName:"ShowOnIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"main"'},{value:'"header"'},{value:'"footer"'},{value:'"article"'},{value:'"section"'},{value:'"ul"'},{value:'"ol"'},{value:'"li"'},{value:'"fieldset"'},{value:'"table"'},{value:'"th"'},{value:'"tr"'},{value:'"td"'},{value:'"thead"'},{value:'"tfoot"'},{value:'"tbody"'},{value:'"caption"'},{value:'"figure"'},{value:'"figcaption"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const I={title:"components/ShowOnIntersection",component:a,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},n=()=>t.jsx("div",{style:{height:"200px",overflowY:"scroll",position:"relative"},children:t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(a,{children:t.jsx("p",{children:"Intersected"})})})});n.storyName="ShowOnIntersection";var r,s,i;n.parameters={...n.parameters,docs:{...(r=n.parameters)==null?void 0:r.docs,source:{originalSource:`() => {
+import{j as t}from"./jsx-runtime-BYouaCF_.js";import{r as o}from"./index-B3evPFBL.js";import{O as f}from"./ObserveIntersection-DsqqXq5n.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./componentNames-CpCJzpB9.js";const a=({onIntersect:e,once:u,threshold:c,tag:d,dataset:p,children:m})=>{const[l,v]=o.useState(!1),h=o.useCallback(()=>{l||v(!0),e==null||e()},[l,e]);return t.jsx(f,{onIntersect:h,once:e?u:!0,threshold:c,tag:d,dataset:p,children:l&&m})};try{a.displayName="ShowOnIntersection",a.__docgenInfo={description:"Only renders the wrapped components once it intersects with the viewport.\n\nNote that elements will not be detached from the DOM if the component is\nscrolled out of view again.\n\nYou can use `React.lazy` to lazy-load the wrapped components.\n\nAdditionally, an `onIntersect` callback can be provided. As with\n`ObserveIntersection`, this callback will be called every time the component\nintersects with the viewport, or only the first time if `once` is set to\n`true`.",displayName:"ShowOnIntersection",props:{onIntersect:{defaultValue:null,description:"",name:"onIntersect",required:!1,type:{name:"enum",value:[{value:"() => void"}]}},once:{defaultValue:null,description:"",name:"once",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},threshold:{defaultValue:null,description:"",name:"threshold",required:!1,type:{name:"enum",value:[{value:"number"}]}},tag:{defaultValue:null,description:"",name:"tag",required:!1,type:{name:"enum",value:[{value:'"p"'},{value:'"div"'},{value:'"span"'},{value:'"article"'},{value:'"caption"'},{value:'"fieldset"'},{value:'"figcaption"'},{value:'"figure"'},{value:'"footer"'},{value:'"header"'},{value:'"li"'},{value:'"main"'},{value:'"ol"'},{value:'"section"'},{value:'"table"'},{value:'"tbody"'},{value:'"td"'},{value:'"tfoot"'},{value:'"th"'},{value:'"thead"'},{value:'"tr"'},{value:'"ul"'}]}},dataset:{defaultValue:null,description:"",name:"dataset",required:!1,type:{name:"enum",value:[{value:"Dataset"}]}}}}}catch{}const I={title:"components/ShowOnIntersection",component:a,parameters:{tags:["!test"],chromatic:{disableSnapshot:!0}}},n=()=>t.jsx("div",{style:{height:"200px",overflowY:"scroll",position:"relative"},children:t.jsx("div",{style:{height:"400px",display:"flex",alignItems:"end"},children:t.jsx(a,{children:t.jsx("p",{children:"Intersected"})})})});n.storyName="ShowOnIntersection";var r,s,i;n.parameters={...n.parameters,docs:{...(r=n.parameters)==null?void 0:r.docs,source:{originalSource:`() => {
   return <div style={{
     height: '200px',
     overflowY: 'scroll',

package/dist/assets/{Steps-BIsSinlU.js → Steps-CCm9vCgl.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-BSyqsKC5.js";import"./index-BfBdt3zW.js";import{H as C}from"./Heading-ese4_5Hg.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-BLFM3WRM.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-CCm9vCgl.js";import{L as h}from"./LayoutFlex-BBGvSVMb.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-ese4_5Hg.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.
 

package/dist/assets/{TextField-BXps0nA6.js → TextField-CMgzC3bX.js}

@@ -1,6 +1,6 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{F as b}from"./FormControl-CeIJk4_Z.js";import{w as q}from"./componentNames-CpCJzpB9.js";import{I as g}from"./Input-GBJ_wz6j.js";const a=h.forwardRef(function({id:n,label:u,description:t,error:r,required:i,type:d="text",inputDataset:s,dataset:o,hideLabel:m,onClick:p,hasError:v,useLegacyRequiredLabel:f,className:E,style:V,...c},y){return e.jsx(b,{id:n,label:u,description:t,error:r,hasError:v,required:i,dataset:o,hideLabel:m,onClick:p,useLegacyRequiredLabel:f,preplyDsComponent:q.TextField,children:e.jsx(g,{...c,type:d,ref:y,dataset:s})})});try{a.displayName="TextField",a.__docgenInfo={description:"",displayName:"TextField",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"
+import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as h}from"./index-B3evPFBL.js";import{F as b}from"./FormControl-CeIJk4_Z.js";import{w as q}from"./componentNames-CpCJzpB9.js";import{I as g}from"./Input-C1hZX5_o.js";const a=h.forwardRef(function({id:n,label:u,description:t,error:r,required:i,type:d="text",inputDataset:s,dataset:o,hideLabel:m,onClick:p,hasError:v,useLegacyRequiredLabel:f,className:E,style:V,...c},y){return e.jsx(b,{id:n,label:u,description:t,error:r,hasError:v,required:i,dataset:o,hideLabel:m,onClick:p,useLegacyRequiredLabel:f,preplyDsComponent:q.TextField,children:e.jsx(g,{...c,type:d,ref:y,dataset:s})})});try{a.displayName="TextField",a.__docgenInfo={description:"",displayName:"TextField",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"}]}},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"}]}},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.
 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>>"}]}},button:{defaultValue:null,description:"",name:"button",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"}]}},type:{defaultValue:{value:"text"},description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"url"'},{value:'"search"'},{value:'"text"'},{value:'"tel"'},{value:'"email"'}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"name"'},{value:'"url"'},{value:'"off"'},{value:'"on"'},{value:'"tel"'},{value:'"email"'},{value:'"username"'},{value:'"language"'}]}},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{a as T};
+@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"}]}},button:{defaultValue:null,description:"",name:"button",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},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>"}]}},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>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<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"}]}},type:{defaultValue:{value:"text"},description:"",name:"type",required:!1,type:{name:"enum",value:[{value:'"url"'},{value:'"search"'},{value:'"text"'},{value:'"tel"'},{value:'"email"'}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"name"'},{value:'"url"'},{value:'"off"'},{value:'"on"'},{value:'"tel"'},{value:'"email"'},{value:'"username"'},{value:'"language"'}]}},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{a as T};

package/dist/assets/{TextField.stories-yhzbx_LG.js → TextField.stories-CAcPkm_s.js}

@@ -1,4 +1,4 @@
-import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as oe}from"./index-B3evPFBL.js";import{a as re}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{T as te}from"./TextField-BXps0nA6.js";import{F as ne}from"./TokyoUIUser-CEt_udNR.js";import{F as se}from"./TokyoUIAttach-BvBvQVx_.js";import{I as ie}from"./Icon-BLj2hNSU.js";import{F as le}from"./FieldButton-Bsa9_rJB.js";import{f as r,w,e as n,u as b}from"./index-DDyIDR-R.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.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"./Input-GBJ_wz6j.js";import"./InputContainer-Bk0tgFnW.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";const ke={title:"components/TextField",component:te,args:{name:"fullName",label:"Full name",defaultValue:"",placeholder:"John Doe",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()}},l={play:async({canvasElement:a,step:e,args:t})=>{const o=w(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const ae=w(i).getByTestId("label");n(ae).toHaveTextContent("Full name • Optional"),n(s).toHaveAccessibleName("Full name")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await b.type(s,"John Doe"),n(t.onValueChange).toHaveBeenCalledWith("John Doe"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await b.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(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},c={render:function(e){const[t,o]=oe.useState(e.value);return x.jsx(te,{...e,value:t,onChange:i=>{var s;o(i.target.value),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled TextField",placeholder:"Type something...",value:"Initial value"},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("Initial value")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await b.type(t," - New controlled value"),n(t).toHaveValue("Initial value - New controlled value")})}},d={args:{icon:x.jsx(ie,{svg:ne,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},u={args:{description:"Enter your full legal name"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter your full legal name"),n(o).toHaveTextContent("Enter your full legal name")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Full name"),n(o).toHaveTextContent("Full name")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},h={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("Full name")})}},m={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},y={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")})}},g={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")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Full name",placeholder:"John Doe",description:"Enter your full legal name"},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":ne},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":x.jsx(le,{svg:se,assistiveText:"Do the thing",onClick:re("field button clicked")})},control:"select"},readOnly:{control:"boolean"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var T,f,B,I,H;l.parameters={...l.parameters,docs:{...(T=l.parameters)==null?void 0:T.docs,source:{originalSource:`{
+import{j as x}from"./jsx-runtime-BYouaCF_.js";import{r as oe}from"./index-B3evPFBL.js";import{a as re}from"./chunk-D5ZWXAHU-BhFjjRSl.js";import{T as te}from"./TextField-CMgzC3bX.js";import{F as ne}from"./TokyoUIUser-DG6LLnJu.js";import{F as se}from"./TokyoUIAttach-BvBvQVx_.js";import{I as ie}from"./Icon-ZIxauYsE.js";import{F as le}from"./FieldButton-Bsa9_rJB.js";import{f as r,w,e as n,u as b}from"./index-DDyIDR-R.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./v4-CtRu48qb.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"./Input-C1hZX5_o.js";import"./InputContainer-Bk0tgFnW.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./defaults-B1rzzf6M.js";const ke={title:"components/TextField",component:te,args:{name:"fullName",label:"Full name",defaultValue:"",placeholder:"John Doe",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()}},l={play:async({canvasElement:a,step:e,args:t})=>{const o=w(a),i=o.getByTestId("field"),s=o.getByTestId("input");await e("it should render correct label",async()=>{const ae=w(i).getByTestId("label");n(ae).toHaveTextContent("Full name • Optional"),n(s).toHaveAccessibleName("Full name")}),await e("it should call onFocus when the input is focused",async()=>{s.focus(),n(t.onFocus).toHaveBeenCalled()}),await e("it should call callback when the value changes",async()=>{await b.type(s,"John Doe"),n(t.onValueChange).toHaveBeenCalledWith("John Doe"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await b.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(s).toHaveAttribute("data-testid","input"),n(s).toHaveAttribute("data-foo","bar")})}},c={render:function(e){const[t,o]=oe.useState(e.value);return x.jsx(te,{...e,value:t,onChange:i=>{var s;o(i.target.value),(s=e.onChange)==null||s.call(e,i)}})},args:{label:"Controlled TextField",placeholder:"Type something...",value:"Initial value"},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("Initial value")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await b.type(t," - New controlled value"),n(t).toHaveValue("Initial value - New controlled value")})}},d={args:{icon:x.jsx(ie,{svg:ne,dataset:{testid:"icon"}})},play:async({canvas:a,step:e})=>{await e("it should render the icon",async()=>{const t=a.getByTestId("icon");n(t).toBeInTheDocument()})}},u={args:{description:"Enter your full legal name"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("description");await e("it should render the description",async()=>{n(t).toHaveAccessibleDescription("Enter your full legal name"),n(o).toHaveTextContent("Enter your full legal name")})}},p={args:{required:!0},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("label");await e("it should render correct label",async()=>{n(t).toHaveAccessibleName("Full name"),n(o).toHaveTextContent("Full name")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},h={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("Full name")})}},m={args:{error:"This is an error message"},play:async({canvas:a,step:e})=>{const t=a.getByTestId("input"),o=a.getByTestId("error");await e("it should render the error message",async()=>{n(t).toHaveAccessibleErrorMessage("This is an error message"),n(o).toHaveTextContent("This is an error message")})}},y={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")})}},g={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")})}},v={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Full name",placeholder:"John Doe",description:"Enter your full legal name"},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":ne},control:"select"},button:{options:["None","With Button"],mapping:{None:void 0,"With Button":x.jsx(le,{svg:se,assistiveText:"Do the thing",onClick:re("field button clicked")})},control:"select"},readOnly:{control:"boolean"},maxLength:{control:"number"},hasError:{table:{disable:!0}}}};var T,f,B,I,H;l.parameters={...l.parameters,docs:{...(T=l.parameters)==null?void 0:T.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,

package/dist/assets/{TextareaField-BO9wkLtB.js → TextareaField-CCM1C6lK.js}

@@ -1,6 +1,6 @@
 import{j as l}from"./jsx-runtime-BYouaCF_.js";import{r as p}from"./index-B3evPFBL.js";import{F as T}from"./FormControl-CeIJk4_Z.js";import{w as H}from"./componentNames-CpCJzpB9.js";import{I as h,s as q}from"./InputContainer-Bk0tgFnW.js";import{g as V}from"./index-DdzHuZ-Y.js";const m=p.forwardRef(function({dataset:t,onChange:e,onValueChange:a,resize:r="vertical",...i},d){const o=V(t),s=n=>{e==null||e(n),a==null||a(n.target.value)};return l.jsx(h,{children:l.jsx("textarea",{...o,...i,onChange:s,ref:d,className:q.input,style:{resize:r}})})});try{m.displayName="Textarea",m.__docgenInfo={description:`A component to render a textarea.
-For internal use only.`,displayName:"Textarea",props:{autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:"string"}]}},cols:{defaultValue:null,description:"",name:"cols",required:!1,type:{name:"enum",value:[{value:"number"}]}},dirName:{defaultValue:null,description:"",name:"dirName",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"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},minLength:{defaultValue:null,description:"",name:"minLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},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"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},rows:{defaultValue:null,description:"",name:"rows",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[]"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLTextAreaElement>"}]}},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
-@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
+For internal use only.`,displayName:"Textarea",props:{autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:"string"}]}},cols:{defaultValue:null,description:"",name:"cols",required:!1,type:{name:"enum",value:[{value:"number"}]}},dirName:{defaultValue:null,description:"",name:"dirName",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"}]}},maxLength:{defaultValue:null,description:"",name:"maxLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},minLength:{defaultValue:null,description:"",name:"minLength",required:!1,type:{name:"enum",value:[{value:"number"}]}},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"}]}},readOnly:{defaultValue:null,description:"",name:"readOnly",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},required:{defaultValue:null,description:"",name:"required",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},rows:{defaultValue:null,description:"",name:"rows",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[]"}]}},wrap:{defaultValue:null,description:"",name:"wrap",required:!1,type:{name:"enum",value:[{value:"string"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLTextAreaElement>"}]}},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:'"off"'},{value:'"none"'},{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:'"article"'},{value:'"button"'},{value:'"dialog"'},{value:'"figure"'},{value:'"form"'},{value:'"img"'},{value:'"link"'},{value:'"main"'},{value:'"menu"'},{value:'"menuitem"'},{value:'"option"'},{value:'"search"'},{value:'"table"'},{value:'"none"'},{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:'"row"'},{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:'"search"'},{value:'"none"'},{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.
 @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.
@@ -13,17 +13,17 @@ 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.
 @see aria-hidden
 @see aria-readonly.`,name:"aria-disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"},{value:'"true"'},{value:'"false"'}]}},"aria-dropeffect":{defaultValue:null,description:`Indicates what functions can be performed when a dragged object is released on the drop target.
-@deprecated in ARIA 1.1`,name:"aria-dropeffect",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"link"'},{value:'"copy"'},{value:'"execute"'},{value:'"move"'},{value:'"popup"'}]}},"aria-errormessage":{defaultValue:null,description:`Identifies the element that provides an error message for the object.
+@deprecated in ARIA 1.1`,name:"aria-dropeffect",required:!1,type:{name:"enum",value:[{value:'"link"'},{value:'"none"'},{value:'"copy"'},{value:'"execute"'},{value:'"move"'},{value:'"popup"'}]}},"aria-errormessage":{defaultValue:null,description:`Identifies the element that provides an error message for the object.
 @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<HTMLTextAreaElement>"}]}},onCopyCapture:{defaultValue:null,description:"",name:"onCopyCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onCutCapture:{defaultValue:null,description:"",name:"onCutCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onPasteCapture:{defaultValue:null,description:"",name:"onPasteCapture",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onCompositionEnd:{defaultValue:null,description:"",name:"onCompositionEnd",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLTextAreaElement>"}]}},onCompositionEndCapture:{defaultValue:null,description:"",name:"onCompositionEndCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLTextAreaElement>"}]}},onCompositionStart:{defaultValue:null,description:"",name:"onCompositionStart",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLTextAreaElement>"}]}},onCompositionStartCapture:{defaultValue:null,description:"",name:"onCompositionStartCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLTextAreaElement>"}]}},onCompositionUpdate:{defaultValue:null,description:"",name:"onCompositionUpdate",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLTextAreaElement>"}]}},onCompositionUpdateCapture:{defaultValue:null,description:"",name:"onCompositionUpdateCapture",required:!1,type:{name:"enum",value:[{value:"CompositionEventHandler<HTMLTextAreaElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLTextAreaElement>"}]}},onFocusCapture:{defaultValue:null,description:"",name:"onFocusCapture",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLTextAreaElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLTextAreaElement>"}]}},onBlurCapture:{defaultValue:null,description:"",name:"onBlurCapture",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLTextAreaElement>"}]}},onChangeCapture:{defaultValue:null,description:"",name:"onChangeCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onBeforeInput:{defaultValue:null,description:"",name:"onBeforeInput",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onBeforeInputCapture:{defaultValue:null,description:"",name:"onBeforeInputCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onInput:{defaultValue:null,description:"",name:"onInput",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onInputCapture:{defaultValue:null,description:"",name:"onInputCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onReset:{defaultValue:null,description:"",name:"onReset",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onResetCapture:{defaultValue:null,description:"",name:"onResetCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onSubmit:{defaultValue:null,description:"",name:"onSubmit",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onSubmitCapture:{defaultValue:null,description:"",name:"onSubmitCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onInvalid:{defaultValue:null,description:"",name:"onInvalid",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onInvalidCapture:{defaultValue:null,description:"",name:"onInvalidCapture",required:!1,type:{name:"enum",value:[{value:"FormEventHandler<HTMLTextAreaElement>"}]}},onLoad:{defaultValue:null,description:"",name:"onLoad",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onLoadCapture:{defaultValue:null,description:"",name:"onLoadCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onError:{defaultValue:null,description:"",name:"onError",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onErrorCapture:{defaultValue:null,description:"",name:"onErrorCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onKeyDownCapture:{defaultValue:null,description:"",name:"onKeyDownCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onKeyPress:{defaultValue:null,description:"@deprecated Use `onKeyUp` or `onKeyDown` instead",name:"onKeyPress",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onKeyPressCapture:{defaultValue:null,description:"@deprecated Use `onKeyUpCapture` or `onKeyDownCapture` instead",name:"onKeyPressCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onKeyUpCapture:{defaultValue:null,description:"",name:"onKeyUpCapture",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onAbort:{defaultValue:null,description:"",name:"onAbort",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onAbortCapture:{defaultValue:null,description:"",name:"onAbortCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onCanPlay:{defaultValue:null,description:"",name:"onCanPlay",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onCanPlayCapture:{defaultValue:null,description:"",name:"onCanPlayCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onCanPlayThrough:{defaultValue:null,description:"",name:"onCanPlayThrough",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onCanPlayThroughCapture:{defaultValue:null,description:"",name:"onCanPlayThroughCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onDurationChange:{defaultValue:null,description:"",name:"onDurationChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onDurationChangeCapture:{defaultValue:null,description:"",name:"onDurationChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onEmptied:{defaultValue:null,description:"",name:"onEmptied",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onEmptiedCapture:{defaultValue:null,description:"",name:"onEmptiedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onEncrypted:{defaultValue:null,description:"",name:"onEncrypted",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onEncryptedCapture:{defaultValue:null,description:"",name:"onEncryptedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onEnded:{defaultValue:null,description:"",name:"onEnded",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onEndedCapture:{defaultValue:null,description:"",name:"onEndedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onLoadedData:{defaultValue:null,description:"",name:"onLoadedData",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onLoadedDataCapture:{defaultValue:null,description:"",name:"onLoadedDataCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onLoadedMetadata:{defaultValue:null,description:"",name:"onLoadedMetadata",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onLoadedMetadataCapture:{defaultValue:null,description:"",name:"onLoadedMetadataCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onLoadStart:{defaultValue:null,description:"",name:"onLoadStart",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onLoadStartCapture:{defaultValue:null,description:"",name:"onLoadStartCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onPause:{defaultValue:null,description:"",name:"onPause",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onPauseCapture:{defaultValue:null,description:"",name:"onPauseCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onPlay:{defaultValue:null,description:"",name:"onPlay",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onPlayCapture:{defaultValue:null,description:"",name:"onPlayCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onPlaying:{defaultValue:null,description:"",name:"onPlaying",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onPlayingCapture:{defaultValue:null,description:"",name:"onPlayingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onProgress:{defaultValue:null,description:"",name:"onProgress",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onProgressCapture:{defaultValue:null,description:"",name:"onProgressCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onRateChange:{defaultValue:null,description:"",name:"onRateChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onRateChangeCapture:{defaultValue:null,description:"",name:"onRateChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onResize:{defaultValue:null,description:"",name:"onResize",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onResizeCapture:{defaultValue:null,description:"",name:"onResizeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onSeeked:{defaultValue:null,description:"",name:"onSeeked",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onSeekedCapture:{defaultValue:null,description:"",name:"onSeekedCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onSeeking:{defaultValue:null,description:"",name:"onSeeking",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onSeekingCapture:{defaultValue:null,description:"",name:"onSeekingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onStalled:{defaultValue:null,description:"",name:"onStalled",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onStalledCapture:{defaultValue:null,description:"",name:"onStalledCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onSuspend:{defaultValue:null,description:"",name:"onSuspend",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onSuspendCapture:{defaultValue:null,description:"",name:"onSuspendCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onTimeUpdate:{defaultValue:null,description:"",name:"onTimeUpdate",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onTimeUpdateCapture:{defaultValue:null,description:"",name:"onTimeUpdateCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onVolumeChange:{defaultValue:null,description:"",name:"onVolumeChange",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onVolumeChangeCapture:{defaultValue:null,description:"",name:"onVolumeChangeCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onWaiting:{defaultValue:null,description:"",name:"onWaiting",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onWaitingCapture:{defaultValue:null,description:"",name:"onWaitingCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onAuxClick:{defaultValue:null,description:"",name:"onAuxClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onAuxClickCapture:{defaultValue:null,description:"",name:"onAuxClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onClick:{defaultValue:null,description:"",name:"onClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onClickCapture:{defaultValue:null,description:"",name:"onClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onContextMenu:{defaultValue:null,description:"",name:"onContextMenu",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onContextMenuCapture:{defaultValue:null,description:"",name:"onContextMenuCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onDoubleClick:{defaultValue:null,description:"",name:"onDoubleClick",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onDoubleClickCapture:{defaultValue:null,description:"",name:"onDoubleClickCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onDrag:{defaultValue:null,description:"",name:"onDrag",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragCapture:{defaultValue:null,description:"",name:"onDragCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragEnd:{defaultValue:null,description:"",name:"onDragEnd",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragEndCapture:{defaultValue:null,description:"",name:"onDragEndCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragEnter:{defaultValue:null,description:"",name:"onDragEnter",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragEnterCapture:{defaultValue:null,description:"",name:"onDragEnterCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragExit:{defaultValue:null,description:"",name:"onDragExit",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragExitCapture:{defaultValue:null,description:"",name:"onDragExitCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragLeave:{defaultValue:null,description:"",name:"onDragLeave",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragLeaveCapture:{defaultValue:null,description:"",name:"onDragLeaveCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragOver:{defaultValue:null,description:"",name:"onDragOver",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragOverCapture:{defaultValue:null,description:"",name:"onDragOverCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragStart:{defaultValue:null,description:"",name:"onDragStart",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDragStartCapture:{defaultValue:null,description:"",name:"onDragStartCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDrop:{defaultValue:null,description:"",name:"onDrop",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onDropCapture:{defaultValue:null,description:"",name:"onDropCapture",required:!1,type:{name:"enum",value:[{value:"DragEventHandler<HTMLTextAreaElement>"}]}},onMouseDown:{defaultValue:null,description:"",name:"onMouseDown",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseDownCapture:{defaultValue:null,description:"",name:"onMouseDownCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseEnter:{defaultValue:null,description:"",name:"onMouseEnter",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseLeave:{defaultValue:null,description:"",name:"onMouseLeave",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseMove:{defaultValue:null,description:"",name:"onMouseMove",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseMoveCapture:{defaultValue:null,description:"",name:"onMouseMoveCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseOut:{defaultValue:null,description:"",name:"onMouseOut",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseOutCapture:{defaultValue:null,description:"",name:"onMouseOutCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseOver:{defaultValue:null,description:"",name:"onMouseOver",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseOverCapture:{defaultValue:null,description:"",name:"onMouseOverCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseUp:{defaultValue:null,description:"",name:"onMouseUp",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onMouseUpCapture:{defaultValue:null,description:"",name:"onMouseUpCapture",required:!1,type:{name:"enum",value:[{value:"MouseEventHandler<HTMLTextAreaElement>"}]}},onSelect:{defaultValue:null,description:"",name:"onSelect",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onSelectCapture:{defaultValue:null,description:"",name:"onSelectCapture",required:!1,type:{name:"enum",value:[{value:"ReactEventHandler<HTMLTextAreaElement>"}]}},onTouchCancel:{defaultValue:null,description:"",name:"onTouchCancel",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLTextAreaElement>"}]}},onTouchCancelCapture:{defaultValue:null,description:"",name:"onTouchCancelCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLTextAreaElement>"}]}},onTouchEnd:{defaultValue:null,description:"",name:"onTouchEnd",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLTextAreaElement>"}]}},onTouchEndCapture:{defaultValue:null,description:"",name:"onTouchEndCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLTextAreaElement>"}]}},onTouchMove:{defaultValue:null,description:"",name:"onTouchMove",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLTextAreaElement>"}]}},onTouchMoveCapture:{defaultValue:null,description:"",name:"onTouchMoveCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLTextAreaElement>"}]}},onTouchStart:{defaultValue:null,description:"",name:"onTouchStart",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLTextAreaElement>"}]}},onTouchStartCapture:{defaultValue:null,description:"",name:"onTouchStartCapture",required:!1,type:{name:"enum",value:[{value:"TouchEventHandler<HTMLTextAreaElement>"}]}},onPointerDown:{defaultValue:null,description:"",name:"onPointerDown",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerDownCapture:{defaultValue:null,description:"",name:"onPointerDownCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerMove:{defaultValue:null,description:"",name:"onPointerMove",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerMoveCapture:{defaultValue:null,description:"",name:"onPointerMoveCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerUp:{defaultValue:null,description:"",name:"onPointerUp",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerUpCapture:{defaultValue:null,description:"",name:"onPointerUpCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerCancel:{defaultValue:null,description:"",name:"onPointerCancel",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerCancelCapture:{defaultValue:null,description:"",name:"onPointerCancelCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerEnter:{defaultValue:null,description:"",name:"onPointerEnter",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerLeave:{defaultValue:null,description:"",name:"onPointerLeave",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerOver:{defaultValue:null,description:"",name:"onPointerOver",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerOverCapture:{defaultValue:null,description:"",name:"onPointerOverCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerOut:{defaultValue:null,description:"",name:"onPointerOut",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onPointerOutCapture:{defaultValue:null,description:"",name:"onPointerOutCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onGotPointerCapture:{defaultValue:null,description:"",name:"onGotPointerCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onGotPointerCaptureCapture:{defaultValue:null,description:"",name:"onGotPointerCaptureCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onLostPointerCapture:{defaultValue:null,description:"",name:"onLostPointerCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onLostPointerCaptureCapture:{defaultValue:null,description:"",name:"onLostPointerCaptureCapture",required:!1,type:{name:"enum",value:[{value:"PointerEventHandler<HTMLTextAreaElement>"}]}},onScroll:{defaultValue:null,description:"",name:"onScroll",required:!1,type:{name:"enum",value:[{value:"UIEventHandler<HTMLTextAreaElement>"}]}},onScrollCapture:{defaultValue:null,description:"",name:"onScrollCapture",required:!1,type:{name:"enum",value:[{value:"UIEventHandler<HTMLTextAreaElement>"}]}},onWheel:{defaultValue:null,description:"",name:"onWheel",required:!1,type:{name:"enum",value:[{value:"WheelEventHandler<HTMLTextAreaElement>"}]}},onWheelCapture:{defaultValue:null,description:"",name:"onWheelCapture",required:!1,type:{name:"enum",value:[{value:"WheelEventHandler<HTMLTextAreaElement>"}]}},onAnimationStart:{defaultValue:null,description:"",name:"onAnimationStart",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLTextAreaElement>"}]}},onAnimationStartCapture:{defaultValue:null,description:"",name:"onAnimationStartCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLTextAreaElement>"}]}},onAnimationEnd:{defaultValue:null,description:"",name:"onAnimationEnd",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLTextAreaElement>"}]}},onAnimationEndCapture:{defaultValue:null,description:"",name:"onAnimationEndCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLTextAreaElement>"}]}},onAnimationIteration:{defaultValue:null,description:"",name:"onAnimationIteration",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLTextAreaElement>"}]}},onAnimationIterationCapture:{defaultValue:null,description:"",name:"onAnimationIterationCapture",required:!1,type:{name:"enum",value:[{value:"AnimationEventHandler<HTMLTextAreaElement>"}]}},onTransitionEnd:{defaultValue:null,description:"",name:"onTransitionEnd",required:!1,type:{name:"enum",value:[{value:"TransitionEventHandler<HTMLTextAreaElement>"}]}},onTransitionEndCapture:{defaultValue:null,description:"",name:"onTransitionEndCapture",required:!1,type:{name:"enum",value:[{value:"TransitionEventHandler<HTMLTextAreaElement>"}]}},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"}]}},resize:{defaultValue:{value:"vertical"},description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"both"'},{value:'"horizontal"'},{value:'"vertical"'}]}},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: HTMLTextAreaElement | null) => void"},{value:"RefObject<HTMLTextAreaElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}const v=p.forwardRef(function({id:t,label:e,description:a,error:r,required:i,inputDataset:d,dataset:o,hideLabel:s,onClick:n,hasError:f,useLegacyRequiredLabel:c,className:g,style:x,...y},E){return l.jsx(T,{id:t,label:e,description:a,error:r,hasError:f,required:i,dataset:o,hideLabel:s,onClick:n,useLegacyRequiredLabel:c,preplyDsComponent:H.TextareaField,children:l.jsx(m,{...y,ref:E,dataset:d})})});try{v.displayName="TextareaField",v.__docgenInfo={description:"",displayName:"TextareaField",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<HTMLTextAreaElement>"}]}},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"
+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<HTMLTextAreaElement>"}]}},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"}]}},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.
 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"}]}},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<HTMLTextAreaElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLTextAreaElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLTextAreaElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onValueChange:{defaultValue:null,description:"",name:"onValueChange",required:!1,type:{name:"enum",value:[{value:"(value: string) => void"}]}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"both"'},{value:'"horizontal"'},{value:'"vertical"'}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},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: HTMLTextAreaElement | null) => void"},{value:"RefObject<HTMLTextAreaElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{v as T};
+@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"}]}},onCopy:{defaultValue:null,description:"",name:"onCopy",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onCut:{defaultValue:null,description:"",name:"onCut",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onPaste:{defaultValue:null,description:"",name:"onPaste",required:!1,type:{name:"enum",value:[{value:"ClipboardEventHandler<HTMLTextAreaElement>"}]}},onFocus:{defaultValue:null,description:"",name:"onFocus",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLTextAreaElement>"}]}},onBlur:{defaultValue:null,description:"",name:"onBlur",required:!1,type:{name:"enum",value:[{value:"FocusEventHandler<HTMLTextAreaElement>"}]}},onChange:{defaultValue:null,description:"",name:"onChange",required:!1,type:{name:"enum",value:[{value:"ChangeEventHandler<HTMLTextAreaElement>"}]}},onKeyDown:{defaultValue:null,description:"",name:"onKeyDown",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},onKeyUp:{defaultValue:null,description:"",name:"onKeyUp",required:!1,type:{name:"enum",value:[{value:"KeyboardEventHandler<HTMLTextAreaElement>"}]}},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"}]}},resize:{defaultValue:null,description:"",name:"resize",required:!1,type:{name:"enum",value:[{value:'"none"'},{value:'"both"'},{value:'"horizontal"'},{value:'"vertical"'}]}},rows:{defaultValue:null,description:"",name:"rows",required:!1,type:{name:"enum",value:[{value:"number"}]}},defaultValue:{defaultValue:null,description:"",name:"defaultValue",required:!1,type:{name:"enum",value:[{value:"string"}]}},value:{defaultValue:null,description:"",name:"value",required:!1,type:{name:"enum",value:[{value:"string"}]}},autoComplete:{defaultValue:null,description:"",name:"autoComplete",required:!1,type:{name:"enum",value:[{value:'"off"'},{value:'"on"'}]}},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: HTMLTextAreaElement | null) => void"},{value:"RefObject<HTMLTextAreaElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}}}}}catch{}export{v as T};

package/dist/assets/{TextareaField.stories-BAgexHv3.js → TextareaField.stories-DKNFN3f4.js}

@@ -1,4 +1,4 @@
-import{j as de}from"./jsx-runtime-BYouaCF_.js";import{e as pe}from"./index-B3evPFBL.js";import{f as o,w as T,e as n,u as w}from"./index-DDyIDR-R.js";import{T as ie}from"./TextareaField-BO9wkLtB.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"./InputContainer-Bk0tgFnW.js";const Ce={title:"components/TextareaField",component:ie,args:{name:"message",label:"Textarea",defaultValue:"",placeholder:"Enter text here",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()}},i={play:async({canvasElement:a,step:e,args:t})=>{const s=T(a),l=s.getByTestId("field"),r=s.getByTestId("input");await e("it should render correct label",async()=>{const ce=T(l).getByTestId("label");n(ce).toHaveTextContent("Textarea • Optional"),n(r).toHaveAccessibleName("Textarea")}),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 w.type(r,"Hello world"),n(t.onValueChange).toHaveBeenCalledWith("Hello world"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(l).toHaveAttribute("data-testid","field"),n(l).toHaveAttribute("data-foo","bar"),n(r).toHaveAttribute("data-testid","input"),n(r).toHaveAttribute("data-foo","bar")})}},c={render:function(e){const[t,s]=pe.useState(e.value);return de.jsx(ie,{...e,value:t,onChange:l=>{var r;s(l.target.value),(r=e.onChange)==null||r.call(e,l)}})},args:{label:"Controlled TextareaField",placeholder:"Type your message...",value:"Initial textarea content"},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("Initial textarea content")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"New controlled content"),n(t).toHaveValue("New controlled content")})}},d={args:{defaultValue:"Hey, you!",resize:"both"},play:async({canvas:a,step:e})=>{await e("it should apply the resize style",async()=>{const t=a.getByTestId("input");n(t).toHaveStyle({resize:"both"})})}},p={args:{defaultValue:"Hey, you!",resize:"vertical"},play:async({canvas:a,step:e})=>{await e("it should apply the resize style",async()=>{const t=a.getByTestId("input");n(t).toHaveStyle({resize:"vertical"})})}},u={args:{defaultValue:"Hey, you!",resize:"horizontal"},play:async({canvas:a,step:e})=>{await e("it should apply the resize style",async()=>{const t=a.getByTestId("input");n(t).toHaveStyle({resize:"horizontal"})})}},y={args:{description:"We will get back to you as soon as possible"},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("We will get back to you as soon as possible"),n(s).toHaveTextContent("We will get back to you as soon as possible")})}},h={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("Textarea"),n(s).toHaveTextContent("Textarea")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},b={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("Textarea")})}},g={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")})}},m={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")})}},v={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")})}},x={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Your message",placeholder:"I have a question about ...",description:"We will get back to you as soon as possible"},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"},resize:{control:"select"},rows:{control:"number"},maxLength:{control:"number"},autoComplete:{control:"select"},hasError:{table:{disable:!0}}}};var H,B,I,f,C;i.parameters={...i.parameters,docs:{...(H=i.parameters)==null?void 0:H.docs,source:{originalSource:`{
+import{j as de}from"./jsx-runtime-BYouaCF_.js";import{e as pe}from"./index-B3evPFBL.js";import{f as o,w as T,e as n,u as w}from"./index-DDyIDR-R.js";import{T as ie}from"./TextareaField-CCM1C6lK.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"./InputContainer-Bk0tgFnW.js";const Ce={title:"components/TextareaField",component:ie,args:{name:"message",label:"Textarea",defaultValue:"",placeholder:"Enter text here",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()}},i={play:async({canvasElement:a,step:e,args:t})=>{const s=T(a),l=s.getByTestId("field"),r=s.getByTestId("input");await e("it should render correct label",async()=>{const ce=T(l).getByTestId("label");n(ce).toHaveTextContent("Textarea • Optional"),n(r).toHaveAccessibleName("Textarea")}),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 w.type(r,"Hello world"),n(t.onValueChange).toHaveBeenCalledWith("Hello world"),n(t.onChange).toHaveBeenCalled()}),await e("it should call onBlur when the input is blurred",async()=>{await w.keyboard("{tab}"),n(t.onBlur).toHaveBeenCalled()}),await e("it should render the dataset props",async()=>{n(l).toHaveAttribute("data-testid","field"),n(l).toHaveAttribute("data-foo","bar"),n(r).toHaveAttribute("data-testid","input"),n(r).toHaveAttribute("data-foo","bar")})}},c={render:function(e){const[t,s]=pe.useState(e.value);return de.jsx(ie,{...e,value:t,onChange:l=>{var r;s(l.target.value),(r=e.onChange)==null||r.call(e,l)}})},args:{label:"Controlled TextareaField",placeholder:"Type your message...",value:"Initial textarea content"},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("Initial textarea content")}),await e("it should update the value when the user types",async()=>{const t=a.getByTestId("input");await w.clear(t),await w.type(t,"New controlled content"),n(t).toHaveValue("New controlled content")})}},d={args:{defaultValue:"Hey, you!",resize:"both"},play:async({canvas:a,step:e})=>{await e("it should apply the resize style",async()=>{const t=a.getByTestId("input");n(t).toHaveStyle({resize:"both"})})}},p={args:{defaultValue:"Hey, you!",resize:"vertical"},play:async({canvas:a,step:e})=>{await e("it should apply the resize style",async()=>{const t=a.getByTestId("input");n(t).toHaveStyle({resize:"vertical"})})}},u={args:{defaultValue:"Hey, you!",resize:"horizontal"},play:async({canvas:a,step:e})=>{await e("it should apply the resize style",async()=>{const t=a.getByTestId("input");n(t).toHaveStyle({resize:"horizontal"})})}},y={args:{description:"We will get back to you as soon as possible"},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("We will get back to you as soon as possible"),n(s).toHaveTextContent("We will get back to you as soon as possible")})}},h={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("Textarea"),n(s).toHaveTextContent("Textarea")}),await e("it should render required attribute",async()=>{n(t).toHaveAttribute("required")})}},b={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("Textarea")})}},g={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")})}},m={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")})}},v={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")})}},x={parameters:{chromatic:{disableSnapshot:!0}},args:{label:"Your message",placeholder:"I have a question about ...",description:"We will get back to you as soon as possible"},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"},resize:{control:"select"},rows:{control:"number"},maxLength:{control:"number"},autoComplete:{control:"select"},hasError:{table:{disable:!0}}}};var H,B,I,f,C;i.parameters={...i.parameters,docs:{...(H=i.parameters)==null?void 0:H.docs,source:{originalSource:`{
   play: async ({
     canvasElement,
     step,