@preply/ds-docs 3.5.1 → 3.6.0

package/dist/assets/Flag.stories-hPDFXFLs.js

@@ -1,114 +0,0 @@
-import{j as e}from"./jsx-runtime-BYouaCF_.js";import{r as u}from"./index-B3evPFBL.js";import{e as m}from"./index-DDyIDR-R.js";import{c as n,C as o}from"./CountryFlag-ClC7kEHn.js";import{L as F}from"./LayoutFlex-BBGvSVMb.js";import{L as y,a as r}from"./LayoutGridItem-CZ6SKl8g.js";import{T as a}from"./Text-BmdJVr9v.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./breakpoints-BfMlrtxE.js";import"./align-self-BM6l9H5Z.js";import"./constants-DYYVurUY.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";const J={title:"components/CountryFlag",component:o,args:{code:"ua",alt:n.ua}},s={render:function(){return e.jsxs("div",{style:{maxWidth:"1000px"},children:[e.jsx(a,{variant:"default-semibold",children:"For some countries, simplified flags are automatically used (unless `simplified` is set to `false`)"}),e.jsxs(y,{columns:4,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3 (with `simplified=false`)"})}),["es","mx"].map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large",simplified:!1})})]},t))]}),e.jsx("br",{}),e.jsx(a,{variant:"default-semibold",children:"All countries"}),e.jsxs(y,{columns:3,children:[e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Code"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"Country name"})}),e.jsx(r,{children:e.jsx(a,{variant:"default-semibold",children:"4x3"})}),Object.keys(n).map(t=>e.jsxs(u.Fragment,{children:[e.jsx(r,{children:t}),e.jsx(r,{children:n[t]}),e.jsx(r,{children:e.jsx(o,{code:t,alt:n[t],size:"large"})})]},t))]})]})}},d={render:i=>e.jsxs(F,{gap:"16",children:[e.jsx(o,{...i,size:"small"}),e.jsx(o,{...i,size:"medium"}),e.jsx(o,{...i,size:"large"})]})},l={render:function(){return e.jsxs(e.Fragment,{children:[e.jsx(a,{variant:"default-regular-italic",children:"Invalid country code"}),e.jsx(o,{code:"invalidCountryCode",alt:"Invalid country code"}),e.jsx(a,{variant:"default-regular-italic",children:"`undefined` country code"}),e.jsx(o,{code:void 0,alt:"Undefined country code"})]})},play:async({canvas:i})=>{const t=i.getByAltText("Invalid country code");m(t).toBeVisible();const b=i.getByAltText("Undefined country code");m(b).toBeVisible()}},c={parameters:{chromatic:{disableSnapshot:!0}},args:{dataset:{qaid:"flag"}},argTypes:{dataset:{control:"object"}}};var x,p,f;s.parameters={...s.parameters,docs:{...(x=s.parameters)==null?void 0:x.docs,source:{originalSource:`{
-  render: function Story() {
-    return <div style={{
-      maxWidth: '1000px'
-    }}>
-                <Text variant="default-semibold">
-                    For some countries, simplified flags are automatically used (unless \`simplified\`
-                    is set to \`false\`)
-                </Text>
-                <LayoutGrid columns={4}>
-                    <LayoutGridItem>
-                        <Text variant="default-semibold">Code</Text>
-                    </LayoutGridItem>
-                    <LayoutGridItem>
-                        <Text variant="default-semibold">Country name</Text>
-                    </LayoutGridItem>
-                    <LayoutGridItem>
-                        <Text variant="default-semibold">4x3</Text>
-                    </LayoutGridItem>
-                    <LayoutGridItem>
-                        <Text variant="default-semibold">4x3 (with \`simplified=false\`)</Text>
-                    </LayoutGridItem>
-
-                    {['es', 'mx'].map(code => {
-          return <Fragment key={code}>
-                                <LayoutGridItem>{code}</LayoutGridItem>
-                                <LayoutGridItem>{countryNames[code]}</LayoutGridItem>
-                                <LayoutGridItem>
-                                    <CountryFlag
-              // @ts-expect-error TS doesn't infer .map's type correctly
-              code={code} alt={countryNames[code]} size="large" />
-                                </LayoutGridItem>
-                                <LayoutGridItem>
-                                    <CountryFlag
-              // @ts-expect-error TS doesn't infer .map's type correctly
-              code={code} alt={countryNames[code]} size="large" simplified={false} />
-                                </LayoutGridItem>
-                            </Fragment>;
-        })}
-                </LayoutGrid>
-                <br />
-                <Text variant="default-semibold">All countries</Text>
-
-                <LayoutGrid columns={3}>
-                    <LayoutGridItem>
-                        <Text variant="default-semibold">Code</Text>
-                    </LayoutGridItem>
-                    <LayoutGridItem>
-                        <Text variant="default-semibold">Country name</Text>
-                    </LayoutGridItem>
-                    <LayoutGridItem>
-                        <Text variant="default-semibold">4x3</Text>
-                    </LayoutGridItem>
-                    {Object.keys(countryNames).map(code => {
-          return <Fragment key={code}>
-                                <LayoutGridItem>{code}</LayoutGridItem>
-                                <LayoutGridItem>{countryNames[code]}</LayoutGridItem>
-                                <LayoutGridItem>
-                                    <CountryFlag
-              // @ts-expect-error TS doesn't infer .map's type correctly
-              code={code} alt={countryNames[code]} size="large" />
-                                </LayoutGridItem>
-                            </Fragment>;
-        })}
-                </LayoutGrid>
-            </div>;
-  }
-}`,...(f=(p=s.parameters)==null?void 0:p.docs)==null?void 0:f.source}}};var h,g,j;d.parameters={...d.parameters,docs:{...(h=d.parameters)==null?void 0:h.docs,source:{originalSource:`{
-  render: args => <LayoutFlex gap="16">
-            <CountryFlag {...args} size="small" />
-            <CountryFlag {...args} size="medium" />
-            <CountryFlag {...args} size="large" />
-        </LayoutFlex>
-}`,...(j=(g=d.parameters)==null?void 0:g.docs)==null?void 0:j.source}}};var v,L,I;l.parameters={...l.parameters,docs:{...(v=l.parameters)==null?void 0:v.docs,source:{originalSource:`{
-  render: function Story() {
-    return <>
-                <Text variant="default-regular-italic">Invalid country code</Text>
-                <CountryFlag
-      // GraphQL types countries as \`string\`, so the Product doesn't have real type safety over the Country
-      // code. If new countries are added and we miss it, the CountryFlag shouldn't throw an error.
-      // @ts-expect-error the wrong country code is intentional for this test
-      code="invalidCountryCode" alt="Invalid country code" />
-                <Text variant="default-regular-italic">\`undefined\` country code</Text>
-                <CountryFlag
-      // GraphQL types could be nullable, and the developer could miss that the
-      // @ts-expect-error the wrong country code is intentional for this test
-      code={undefined} alt="Undefined country code" />
-            </>;
-  },
-  play: async ({
-    canvas
-  }) => {
-    const invalidCountry = canvas.getByAltText('Invalid country code');
-    expect(invalidCountry).toBeVisible();
-    const undefinedCountry = canvas.getByAltText('Undefined country code');
-    expect(undefinedCountry).toBeVisible();
-  }
-}`,...(I=(L=l.parameters)==null?void 0:L.docs)==null?void 0:I.source}}};var G,C,T;c.parameters={...c.parameters,docs:{...(G=c.parameters)==null?void 0:G.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  args: {
-    dataset: {
-      qaid: 'flag'
-    }
-  },
-  argTypes: {
-    dataset: {
-      control: 'object'
-    }
-  }
-}`,...(T=(C=c.parameters)==null?void 0:C.docs)==null?void 0:T.source}}};const K=["Countries","Sizes","ShowPlaceholderOnInvalidCode","Playground"];export{s as Countries,c as Playground,l as ShowPlaceholderOnInvalidCode,d as Sizes,K as __namedExportsOrder,J as default};

package/dist/assets/Flag.test.stories-Dn7xe9kp.js

@@ -1,27 +0,0 @@
-import{j as d}from"./jsx-runtime-BYouaCF_.js";import{e as o}from"./index-DDyIDR-R.js";import{C as s}from"./CountryFlag-ClC7kEHn.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";const v={title:"components/CountryFlag/Tests",component:s,args:{},tags:["!autodocs","!a11y-test","test"]},a={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",dataset:{foo:1,bar:"2",baz:!1}})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("data-foo","1"),o(e).toHaveAttribute("data-bar","2"),o(e).toHaveAttribute("data-baz","false")}},r={render:function(){return d.jsx(s,{code:"ua",alt:"Ukraine",loading:"lazy"})},play:async({canvas:t})=>{const e=t.getByAltText("Ukraine");o(e).toHaveAttribute("loading","lazy")}};var n,c,l;a.parameters={...a.parameters,docs:{...(n=a.parameters)==null?void 0:n.docs,source:{originalSource:`{
-  render: function Story() {
-    return <CountryFlag code="ua" alt="Ukraine" dataset={{
-      foo: 1,
-      bar: '2',
-      baz: false
-    }} />;
-  },
-  play: async ({
-    canvas
-  }) => {
-    const element = canvas.getByAltText('Ukraine');
-    expect(element).toHaveAttribute('data-foo', '1');
-    expect(element).toHaveAttribute('data-bar', '2');
-    expect(element).toHaveAttribute('data-baz', 'false');
-  }
-}`,...(l=(c=a.parameters)==null?void 0:c.docs)==null?void 0:l.source}}};var i,m,u;r.parameters={...r.parameters,docs:{...(i=r.parameters)==null?void 0:i.docs,source:{originalSource:`{
-  render: function Story() {
-    return <CountryFlag code="ua" alt="Ukraine" loading="lazy" />;
-  },
-  play: async ({
-    canvas
-  }) => {
-    const element = canvas.getByAltText('Ukraine');
-    expect(element).toHaveAttribute('loading', 'lazy');
-  }
-}`,...(u=(m=r.parameters)==null?void 0:m.docs)==null?void 0:u.source}}};const T=["TestDataset","ImgAttributesArePassedToImg"];export{r as ImgAttributesArePassedToImg,a as TestDataset,T as __namedExportsOrder,v as default};

package/dist/assets/Heading.stories-Pcuq78-p.js

@@ -1,82 +0,0 @@
-import{j as a}from"./jsx-runtime-BYouaCF_.js";import{H as e}from"./Heading-ese4_5Hg.js";import{S as s}from"./consts-KAYct7Gj.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./text-centered-CznToR0o.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";const T={title:"components/Heading",component:e,argTypes:{centered:{description:s},variant:{description:s}}},r=()=>a.jsxs("div",{style:{padding:"16px",display:"grid",gridTemplateColumns:"auto 3fr",alignItems:"center",gap:"16px"},children:[a.jsx("span",{children:"h1 / massive"}),a.jsx(e,{tag:"h1",variant:"massive",children:"Lorem ipsum"}),a.jsx("span",{children:"h2 / huge"}),a.jsx(e,{tag:"h2",variant:"huge",children:"Lorem ipsum"}),a.jsx("span",{children:"h3 / extraLarge"}),a.jsx(e,{tag:"h3",variant:"extraLarge",children:"Lorem ipsum"}),a.jsx("span",{children:"h4 / large"}),a.jsx(e,{tag:"h4",variant:"large",children:"Lorem ipsum"}),a.jsx("span",{children:"h5 / medium"}),a.jsx(e,{tag:"h5",variant:"medium",children:"Lorem ipsum"}),a.jsx("span",{children:"p / small"}),a.jsx(e,{tag:"p",variant:"small",children:"Lorem ipsum"})]}),n={parameters:{chromatic:{disableSnapshot:!0}},decorators:[(m,{args:g})=>a.jsx("div",{style:{backgroundColor:g.accent==="inverted"?"black":void 0},children:m()})],args:{tag:"h1",variant:"massive",children:"Lorem ipsum",dataset:{qaid:"heading"}},argTypes:{centered:{control:"boolean"},dataset:{control:"object"},strong:{table:{disable:!0}},level:{table:{disable:!0}},color:{table:{disable:!0}},large:{table:{disable:!0}}}};var t,i,o;r.parameters={...r.parameters,docs:{...(t=r.parameters)==null?void 0:t.docs,source:{originalSource:`() => <div style={{
-  padding: '16px',
-  display: 'grid',
-  gridTemplateColumns: 'auto 3fr',
-  alignItems: 'center',
-  gap: '16px'
-}}>
-        <span>h1 / massive</span>
-        <Heading tag="h1" variant="massive">
-            Lorem ipsum
-        </Heading>
-        <span>h2 / huge</span>
-        <Heading tag="h2" variant="huge">
-            Lorem ipsum
-        </Heading>
-        <span>h3 / extraLarge</span>
-        <Heading tag="h3" variant="extraLarge">
-            Lorem ipsum
-        </Heading>
-        <span>h4 / large</span>
-        <Heading tag="h4" variant="large">
-            Lorem ipsum
-        </Heading>
-        <span>h5 / medium</span>
-        <Heading tag="h5" variant="medium">
-            Lorem ipsum
-        </Heading>
-        <span>p / small</span>
-        <Heading tag="p" variant="small">
-            Lorem ipsum
-        </Heading>
-    </div>`,...(o=(i=r.parameters)==null?void 0:i.docs)==null?void 0:o.source}}};var d,p,l;n.parameters={...n.parameters,docs:{...(d=n.parameters)==null?void 0:d.docs,source:{originalSource:`{
-  parameters: {
-    chromatic: {
-      disableSnapshot: true
-    }
-  },
-  decorators: [(story, {
-    args
-  }) => <div style={{
-    backgroundColor: args.accent === 'inverted' ? 'black' : undefined
-  }}>
-                {story()}
-            </div>],
-  args: {
-    tag: 'h1',
-    variant: 'massive',
-    children: 'Lorem ipsum',
-    dataset: {
-      qaid: 'heading'
-    }
-  },
-  argTypes: {
-    centered: {
-      control: 'boolean'
-    },
-    dataset: {
-      control: 'object'
-    },
-    // Disable deprecated props
-    strong: {
-      table: {
-        disable: true
-      }
-    },
-    level: {
-      table: {
-        disable: true
-      }
-    },
-    color: {
-      table: {
-        disable: true
-      }
-    },
-    large: {
-      table: {
-        disable: true
-      }
-    }
-  }
-}`,...(l=(p=n.parameters)==null?void 0:p.docs)==null?void 0:l.source}}};const f=["Typeset","Playground"];export{n as Playground,r as Typeset,f as __namedExportsOrder,T as default};

package/dist/assets/Icon-RSC-DHJisRIw.js

@@ -1,6 +0,0 @@
-import{j as o}from"./jsx-runtime-BYouaCF_.js";import{useMDXComponents as n}from"./index-uOP2uDdf.js";import{M as m,S as s}from"./index-CjMmneJr.js";import{ServerComponent as i}from"./Icon.stories-Cv6aq9BI.js";import"./index-B3evPFBL.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-BE13K_u-.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./index-Cu4lwwaE.js";import"./index-CXQShRbs.js";import"./index-DrFu-skq.js";import"./TokyoUINotesWithPad-Bqcca_-M.js";import"./Icon-ZIxauYsE.js";import"./text-accent-DZDDtpIt.js";import"./classNames-BUL1Zq7e.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./render-icon-CVTdrNe-.js";import"./componentNames-CpCJzpB9.js";import"./index-DdzHuZ-Y.js";import"./defaults-B1rzzf6M.js";import"./options-Dn0Ts6qK.js";function r(t){const e={code:"code",h1:"h1",p:"p",pre:"pre",...n(),...t.components};return o.jsxs(o.Fragment,{children:[o.jsx(m,{title:"components/Icon/Server Component"}),`
-`,o.jsx(e.h1,{id:"use-icon-as-react-server-component",children:"Use Icon as react server component"}),`
-`,o.jsxs(e.p,{children:["To use Icon as react server component, provide ",o.jsx(e.code,{children:"svg"})," as element:"]}),`
-`,o.jsx(s,{of:i}),`
-`,o.jsx(e.pre,{children:o.jsx(e.code,{className:"language-jsx",children:`<Icon svg={<TokyoUINotesWithPad />} />
-`})})]})}function _(t={}){const{wrapper:e}={...n(),...t.components};return e?o.jsx(e,{...t,children:o.jsx(r,{...t})}):r(t)}export{_ as default};

package/dist/assets/IconButton-BqwVuKH2.js

@@ -1,8 +0,0 @@
-import{j as o}from"./jsx-runtime-BYouaCF_.js";import{r as m}from"./index-B3evPFBL.js";import{r as d}from"./render-icon-CVTdrNe-.js";import{B as v}from"./ButtonBase-Bdtn25V2.js";import{w as p}from"./componentNames-CpCJzpB9.js";import{B as c,a as f}from"./defaults-B1rzzf6M.js";const e=m.forwardRef(function({variant:l=f,size:n=c,url:t,a11yLabel:u,svg:r,...s},i){return o.jsx(v,{...s,ref:i,isIconButton:!0,variant:l,size:n,url:t,a11yLabel:u,preplyDsComponent:p.IconButton,children:d(r,{"aria-hidden":"true",focusable:"false"})})});try{e.displayName="IconButton",e.__docgenInfo={description:"",displayName:"IconButton",props:{id:{defaultValue:null,description:"",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<Element>"}]}},variant:{defaultValue:{value:"primary"},description:"",name:"variant",required:!1,type:{name:"enum",value:[{value:'"primary"'},{value:'"secondary"'},{value:'"tertiary"'},{value:'"inverted"'},{value:'"critical"'},{value:'"quaternary"'},{value:'"ghost"'},{value:'"plain"'},{value:'"dangerous"'},{value:'"onColor"'},{value:'"classroom"'},{value:'"primaryB2b"'},{value:'"primaryTutor"'},{value:'"newFeature"'},{value:'"ai"'}]}},size:{defaultValue:{value:"s"},description:"",name:"size",required:!1,type:{name:"enum",value:[{value:'"xs"'},{value:'"s"'},{value:'"m"'},{value:'"l"'},{value:'"xl"'},{value:'"large"'},{value:'"medium"'},{value:'"small"'},{value:"ResponsiveProp<ButtonSize>"}]}},disabled:{defaultValue:null,description:"",name:"disabled",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},href:{defaultValue:null,description:"",name:"href",required:!1,type:{name:"enum",value:[{value:"string"}]}},download:{defaultValue:null,description:"",name:"download",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},opensInNewTab:{defaultValue:null,description:"",name:"opensInNewTab",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},nofollow:{defaultValue:null,description:"",name:"nofollow",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},submitsForm:{defaultValue:null,description:"",name:"submitsForm",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},assistiveText:{defaultValue:null,description:"",name:"assistiveText",required:!1,type:{name:"string"}},busy:{defaultValue:null,description:"Replaces the content with a loading indicator.",name:"busy",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}},as:{defaultValue:null,description:`Custom element to render the button.
-
-Allows rendering the button using a different React element or component.
-This is particularly useful for integrating with router libraries like \`react-router\` or \`next/router\`.
-@example // Render as a react router link component
-import { Link } from 'react-router-dom';
-
-<ButtonBase as={<Link to="/home" />} />`,name:"as",required:!1,type:{name:"enum",value:[{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},url:{defaultValue:null,description:"@deprecated Use `href` instead",name:"url",required:!1,type:{name:"enum",value:[{value:"string"}]}},a11yLabel:{defaultValue:null,description:"@deprecated Use `assistiveText` instead",name:"a11yLabel",required:!1,type:{name:"enum",value:[{value:"string"}]}},svg:{defaultValue:null,description:"",name:"svg",required:!0,type:{name:"enum",value:[{value:"ComponentClass<SVGAttributes<SVGElement>, any>"},{value:"FunctionComponent<SVGAttributes<SVGElement>>"},{value:"ReactElement<any, string | JSXElementConstructor<any>>"}]}},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: HTMLAnchorElement | HTMLButtonElement | null) => void"},{value:"RefObject<HTMLAnchorElement | HTMLButtonElement>"}]}},key:{defaultValue:null,description:"",name:"key",required:!1,type:{name:"enum",value:[{value:"null"},{value:"string"},{value:"number"},{value:"bigint"}]}},selected:{defaultValue:null,description:"",name:"selected",required:!1,type:{name:"enum",value:[{value:"false"},{value:"true"}]}}}}}catch{}export{e as I};

package/dist/assets/IntegrationWithReactHookForm.stories-DjhZzsb9.js

@@ -1,274 +0,0 @@
-import{j as w}from"./jsx-runtime-BYouaCF_.js";import{e as A}from"./index-B3evPFBL.js";import{f as qt,w as Nt,u as U,a as Qe,e as $}from"./index-DDyIDR-R.js";import{L as Xe}from"./LayoutFlex-BBGvSVMb.js";import{H as Ut}from"./Heading-ese4_5Hg.js";import{T as et}from"./TextField-CMgzC3bX.js";import{N as Ht}from"./NumberField-D6cbX2hK.js";import{S as It,a as Z}from"./SelectField-CuzFFPz0.js";import{P as tt}from"./PasswordField-C_KRyf9k.js";import{T as Wt}from"./TextareaField-CCM1C6lK.js";import{F as ke}from"./FormControl-CeIJk4_Z.js";import{S as $t}from"./Slider-6E9fmd7P.js";import{R as Jt}from"./RangeSlider-dSZs_gtw.js";import{C as zt}from"./Checkbox-Bq_sNuXJ.js";import{B as rt}from"./Button-BSyqsKC5.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./layout-relative.module-ed9bC4H4.js";import"./classNames-BUL1Zq7e.js";import"./defaults-B1rzzf6M.js";import"./index-DdzHuZ-Y.js";import"./componentNames-CpCJzpB9.js";import"./text-accent-DZDDtpIt.js";import"./text-centered-CznToR0o.js";import"./Input-C1hZX5_o.js";import"./InputContainer-Bk0tgFnW.js";import"./TokyoUIExpand-DThzqohx.js";import"./Icon-ZIxauYsE.js";import"./render-icon-CVTdrNe-.js";import"./TokyoUIEye-BsOt8ZdC.js";import"./FieldButton-Bsa9_rJB.js";import"./index-BfBdt3zW.js";import"./tslib.es6-BntfKcQG.js";import"./hoist-non-react-statics.cjs-C-Qo8PK8.js";import"./useMergeRefs-BKVZOB6R.js";import"./index-DRKYGVyc.js";import"./message-BraTJ16C.js";import"./index--DZ0VX4g.js";import"./index-jEDObK_5.js";import"./index-C66nt8TK.js";import"./useMergeRefs-CeyIhNgY.js";import"./ButtonBase-Bdtn25V2.js";import"./Spinner-BCTJunNM.js";import"./useHostname-CH18gHFj.js";import"./index-CC6DAVyL.js";var be=e=>e.type==="checkbox",oe=e=>e instanceof Date,N=e=>e==null;const bt=e=>typeof e=="object";var B=e=>!N(e)&&!Array.isArray(e)&&bt(e)&&!oe(e),pt=e=>B(e)&&e.target?be(e.target)?e.target.checked:e.target.value:e,Yt=e=>e.substring(0,e.search(/\.\d+(\.|$)/))||e,xt=(e,s)=>e.has(Yt(s)),Gt=e=>{const s=e.constructor&&e.constructor.prototype;return B(s)&&s.hasOwnProperty("isPrototypeOf")},Oe=typeof window<"u"&&typeof window.HTMLElement<"u"&&typeof document<"u";function H(e){let s;const t=Array.isArray(e),a=typeof FileList<"u"?e instanceof FileList:!1;if(e instanceof Date)s=new Date(e);else if(e instanceof Set)s=new Set(e);else if(!(Oe&&(e instanceof Blob||a))&&(t||B(e)))if(s=t?[]:{},!t&&!Gt(e))s=e;else for(const o in e)e.hasOwnProperty(o)&&(s[o]=H(e[o]));else return e;return s}var Se=e=>Array.isArray(e)?e.filter(Boolean):[],P=e=>e===void 0,f=(e,s,t)=>{if(!s||!B(e))return t;const a=Se(s.split(/[,[\].]+?/)).reduce((o,n)=>N(o)?o:o[n],e);return P(a)||a===e?P(e[s])?t:e[s]:a},Y=e=>typeof e=="boolean",je=e=>/^\w*$/.test(e),wt=e=>Se(e.replace(/["|']|\]/g,"").split(/\.|\[/)),S=(e,s,t)=>{let a=-1;const o=je(s)?[s]:wt(s),n=o.length,c=n-1;for(;++a<n;){const y=o[a];let p=t;if(a!==c){const R=e[y];p=B(R)||Array.isArray(R)?R:isNaN(+o[a+1])?{}:[]}if(y==="__proto__"||y==="constructor"||y==="prototype")return;e[y]=p,e=e[y]}return e};const Fe={BLUR:"blur",FOCUS_OUT:"focusout",CHANGE:"change"},K={onBlur:"onBlur",onChange:"onChange",onSubmit:"onSubmit",onTouched:"onTouched",all:"all"},re={max:"max",min:"min",maxLength:"maxLength",minLength:"minLength",pattern:"pattern",required:"required",validate:"validate"},Kt=A.createContext(null),Me=()=>A.useContext(Kt);var Ft=(e,s,t,a=!0)=>{const o={defaultValues:s._defaultValues};for(const n in e)Object.defineProperty(o,n,{get:()=>{const c=n;return s._proxyFormState[c]!==K.all&&(s._proxyFormState[c]=!a||K.all),t&&(t[c]=!0),e[c]}});return o},I=e=>B(e)&&!Object.keys(e).length,_t=(e,s,t,a)=>{t(e);const{name:o,...n}=e;return I(n)||Object.keys(n).length>=Object.keys(s).length||Object.keys(n).find(c=>s[c]===(!a||K.all))},ve=e=>Array.isArray(e)?e:[e],At=(e,s,t)=>!e||!s||e===s||ve(e).some(a=>a&&(t?a===s:a.startsWith(s)||s.startsWith(a)));function qe(e){const s=A.useRef(e);s.current=e,A.useEffect(()=>{const t=!e.disabled&&s.current.subject&&s.current.subject.subscribe({next:s.current.next});return()=>{t&&t.unsubscribe()}},[e.disabled])}function Zt(e){const s=Me(),{control:t=s.control,disabled:a,name:o,exact:n}=e||{},[c,y]=A.useState(t._formState),p=A.useRef(!0),R=A.useRef({isDirty:!1,isLoading:!1,dirtyFields:!1,touchedFields:!1,validatingFields:!1,isValidating:!1,isValid:!1,errors:!1}),x=A.useRef(o);return x.current=o,qe({disabled:a,next:v=>p.current&&At(x.current,v.name,n)&&_t(v,R.current,t._updateFormState)&&y({...t._formState,...v}),subject:t._subjects.state}),A.useEffect(()=>(p.current=!0,R.current.isValid&&t._updateValid(!0),()=>{p.current=!1}),[t]),A.useMemo(()=>Ft(c,t,R.current,!1),[c,t])}var X=e=>typeof e=="string",Vt=(e,s,t,a,o)=>X(e)?(a&&s.watch.add(e),f(t,e,o)):Array.isArray(e)?e.map(n=>(a&&s.watch.add(n),f(t,n))):(a&&(s.watchAll=!0),t);function Qt(e){const s=Me(),{control:t=s.control,name:a,defaultValue:o,disabled:n,exact:c}=e||{},y=A.useRef(a);y.current=a,qe({disabled:n,subject:t._subjects.values,next:x=>{At(y.current,x.name,c)&&R(H(Vt(y.current,t._names,x.values||t._formValues,!1,o)))}});const[p,R]=A.useState(t._getWatch(a,o));return A.useEffect(()=>t._removeUnmounted()),p}function Xt(e){const s=Me(),{name:t,disabled:a,control:o=s.control,shouldUnregister:n}=e,c=xt(o._names.array,t),y=Qt({control:o,name:t,defaultValue:f(o._formValues,t,f(o._defaultValues,t,e.defaultValue)),exact:!0}),p=Zt({control:o,name:t,exact:!0}),R=A.useRef(o.register(t,{...e.rules,value:y,...Y(e.disabled)?{disabled:e.disabled}:{}})),x=A.useMemo(()=>Object.defineProperties({},{invalid:{enumerable:!0,get:()=>!!f(p.errors,t)},isDirty:{enumerable:!0,get:()=>!!f(p.dirtyFields,t)},isTouched:{enumerable:!0,get:()=>!!f(p.touchedFields,t)},isValidating:{enumerable:!0,get:()=>!!f(p.validatingFields,t)},error:{enumerable:!0,get:()=>f(p.errors,t)}}),[p,t]),v=A.useMemo(()=>({name:t,value:y,...Y(a)||p.disabled?{disabled:p.disabled||a}:{},onChange:E=>R.current.onChange({target:{value:pt(E),name:t},type:Fe.CHANGE}),onBlur:()=>R.current.onBlur({target:{value:f(o._formValues,t),name:t},type:Fe.BLUR}),ref:E=>{const W=f(o._fields,t);W&&E&&(W._f.ref={focus:()=>E.focus(),select:()=>E.select(),setCustomValidity:k=>E.setCustomValidity(k),reportValidity:()=>E.reportValidity()})}}),[t,o._formValues,a,p.disabled,y,o._fields]);return A.useEffect(()=>{const E=o._options.shouldUnregister||n,W=(k,T)=>{const V=f(o._fields,k);V&&V._f&&(V._f.mount=T)};if(W(t,!0),E){const k=H(f(o._options.defaultValues,t));S(o._defaultValues,t,k),P(f(o._formValues,t))&&S(o._formValues,t,k)}return!c&&o.register(t),()=>{(c?E&&!o._state.action:E)?o.unregister(t):W(t,!1)}},[t,o,c,n]),A.useEffect(()=>{o._updateDisabledField({disabled:a,fields:o._fields,name:t})},[a,t,o]),A.useMemo(()=>({field:v,formState:p,fieldState:x}),[v,p,x])}const st=e=>e.render(Xt(e));var er=(e,s,t,a,o)=>s?{...t[e],types:{...t[e]&&t[e].types?t[e].types:{},[a]:o||!0}}:{},at=e=>({isOnSubmit:!e||e===K.onSubmit,isOnBlur:e===K.onBlur,isOnChange:e===K.onChange,isOnAll:e===K.all,isOnTouch:e===K.onTouched}),it=(e,s,t)=>!t&&(s.watchAll||s.watch.has(e)||[...s.watch].some(a=>e.startsWith(a)&&/^\.\w+/.test(e.slice(a.length))));const he=(e,s,t,a)=>{for(const o of t||Object.keys(e)){const n=f(e,o);if(n){const{_f:c,...y}=n;if(c){if(c.refs&&c.refs[0]&&s(c.refs[0],o)&&!a)return!0;if(c.ref&&s(c.ref,c.name)&&!a)return!0;if(he(y,s))break}else if(B(y)&&he(y,s))break}}};var tr=(e,s,t)=>{const a=ve(f(e,t));return S(a,"root",s[t]),S(e,t,a),e},Ne=e=>e.type==="file",Q=e=>typeof e=="function",_e=e=>{if(!Oe)return!1;const s=e?e.ownerDocument:0;return e instanceof(s&&s.defaultView?s.defaultView.HTMLElement:HTMLElement)},we=e=>X(e),Ue=e=>e.type==="radio",Ae=e=>e instanceof RegExp;const ot={value:!1,isValid:!1},nt={value:!0,isValid:!0};var St=e=>{if(Array.isArray(e)){if(e.length>1){const s=e.filter(t=>t&&t.checked&&!t.disabled).map(t=>t.value);return{value:s,isValid:!!s.length}}return e[0].checked&&!e[0].disabled?e[0].attributes&&!P(e[0].attributes.value)?P(e[0].value)||e[0].value===""?nt:{value:e[0].value,isValid:!0}:nt:ot}return ot};const lt={isValid:!1,value:null};var Rt=e=>Array.isArray(e)?e.reduce((s,t)=>t&&t.checked&&!t.disabled?{isValid:!0,value:t.value}:s,lt):lt;function ut(e,s,t="validate"){if(we(e)||Array.isArray(e)&&e.every(we)||Y(e)&&!e)return{type:t,message:we(e)?e:"",ref:s}}var ue=e=>B(e)&&!Ae(e)?e:{value:e,message:""},ct=async(e,s,t,a,o,n)=>{const{ref:c,refs:y,required:p,maxLength:R,minLength:x,min:v,max:E,pattern:W,validate:k,name:T,valueAsNumber:V,mount:M}=e._f,F=f(t,T);if(!M||s.has(T))return{};const ee=y?y[0]:c,te=b=>{o&&ee.reportValidity&&(ee.setCustomValidity(Y(b)?"":b||""),ee.reportValidity())},C={},ne=Ue(c),pe=be(c),ie=ne||pe,le=(V||Ne(c))&&P(c.value)&&P(F)||_e(c)&&c.value===""||F===""||Array.isArray(F)&&!F.length,J=er.bind(null,T,a,C),xe=(b,_,L,q=re.maxLength,G=re.minLength)=>{const z=b?_:L;C[T]={type:b?q:G,message:z,ref:c,...J(b?q:G,z)}};if(n?!Array.isArray(F)||!F.length:p&&(!ie&&(le||N(F))||Y(F)&&!F||pe&&!St(y).isValid||ne&&!Rt(y).isValid)){const{value:b,message:_}=we(p)?{value:!!p,message:p}:ue(p);if(b&&(C[T]={type:re.required,message:_,ref:ee,...J(re.required,_)},!a))return te(_),C}if(!le&&(!N(v)||!N(E))){let b,_;const L=ue(E),q=ue(v);if(!N(F)&&!isNaN(F)){const G=c.valueAsNumber||F&&+F;N(L.value)||(b=G>L.value),N(q.value)||(_=G<q.value)}else{const G=c.valueAsDate||new Date(F),z=fe=>new Date(new Date().toDateString()+" "+fe),ce=c.type=="time",de=c.type=="week";X(L.value)&&F&&(b=ce?z(F)>z(L.value):de?F>L.value:G>new Date(L.value)),X(q.value)&&F&&(_=ce?z(F)<z(q.value):de?F<q.value:G<new Date(q.value))}if((b||_)&&(xe(!!b,L.message,q.message,re.max,re.min),!a))return te(C[T].message),C}if((R||x)&&!le&&(X(F)||n&&Array.isArray(F))){const b=ue(R),_=ue(x),L=!N(b.value)&&F.length>+b.value,q=!N(_.value)&&F.length<+_.value;if((L||q)&&(xe(L,b.message,_.message),!a))return te(C[T].message),C}if(W&&!le&&X(F)){const{value:b,message:_}=ue(W);if(Ae(b)&&!F.match(b)&&(C[T]={type:re.pattern,message:_,ref:c,...J(re.pattern,_)},!a))return te(_),C}if(k){if(Q(k)){const b=await k(F,t),_=ut(b,ee);if(_&&(C[T]={..._,...J(re.validate,_.message)},!a))return te(_.message),C}else if(B(k)){let b={};for(const _ in k){if(!I(b)&&!a)break;const L=ut(await k[_](F,t),ee,_);L&&(b={...L,...J(_,L.message)},te(L.message),a&&(C[T]=b))}if(!I(b)&&(C[T]={ref:ee,...b},!a))return C}}return te(!0),C};function rr(e,s){const t=s.slice(0,-1).length;let a=0;for(;a<t;)e=P(e)?a++:e[s[a++]];return e}function sr(e){for(const s in e)if(e.hasOwnProperty(s)&&!P(e[s]))return!1;return!0}function D(e,s){const t=Array.isArray(s)?s:je(s)?[s]:wt(s),a=t.length===1?e:rr(e,t),o=t.length-1,n=t[o];return a&&delete a[n],o!==0&&(B(a)&&I(a)||Array.isArray(a)&&sr(a))&&D(e,t.slice(0,-1)),e}var Ce=()=>{let e=[];return{get observers(){return e},next:o=>{for(const n of e)n.next&&n.next(o)},subscribe:o=>(e.push(o),{unsubscribe:()=>{e=e.filter(n=>n!==o)}}),unsubscribe:()=>{e=[]}}},Te=e=>N(e)||!bt(e);function ae(e,s){if(Te(e)||Te(s))return e===s;if(oe(e)&&oe(s))return e.getTime()===s.getTime();const t=Object.keys(e),a=Object.keys(s);if(t.length!==a.length)return!1;for(const o of t){const n=e[o];if(!a.includes(o))return!1;if(o!=="ref"){const c=s[o];if(oe(n)&&oe(c)||B(n)&&B(c)||Array.isArray(n)&&Array.isArray(c)?!ae(n,c):n!==c)return!1}}return!0}var Pt=e=>e.type==="select-multiple",ar=e=>Ue(e)||be(e),Le=e=>_e(e)&&e.isConnected,Bt=e=>{for(const s in e)if(Q(e[s]))return!0;return!1};function Ve(e,s={}){const t=Array.isArray(e);if(B(e)||t)for(const a in e)Array.isArray(e[a])||B(e[a])&&!Bt(e[a])?(s[a]=Array.isArray(e[a])?[]:{},Ve(e[a],s[a])):N(e[a])||(s[a]=!0);return s}function Et(e,s,t){const a=Array.isArray(e);if(B(e)||a)for(const o in e)Array.isArray(e[o])||B(e[o])&&!Bt(e[o])?P(s)||Te(t[o])?t[o]=Array.isArray(e[o])?Ve(e[o],[]):{...Ve(e[o])}:Et(e[o],N(s)?{}:s[o],t[o]):t[o]=!ae(e[o],s[o]);return t}var me=(e,s)=>Et(e,s,Ve(s)),kt=(e,{valueAsNumber:s,valueAsDate:t,setValueAs:a})=>P(e)?e:s?e===""?NaN:e&&+e:t&&X(e)?new Date(e):a?a(e):e;function De(e){const s=e.ref;return Ne(s)?s.files:Ue(s)?Rt(e.refs).value:Pt(s)?[...s.selectedOptions].map(({value:t})=>t):be(s)?St(e.refs).value:kt(P(s.value)?e.ref.value:s.value,e)}var ir=(e,s,t,a)=>{const o={};for(const n of e){const c=f(s,n);c&&S(o,n,c._f)}return{criteriaMode:t,names:[...e],fields:o,shouldUseNativeValidation:a}},ye=e=>P(e)?e:Ae(e)?e.source:B(e)?Ae(e.value)?e.value.source:e.value:e;const dt="AsyncFunction";var or=e=>!!e&&!!e.validate&&!!(Q(e.validate)&&e.validate.constructor.name===dt||B(e.validate)&&Object.values(e.validate).find(s=>s.constructor.name===dt)),nr=e=>e.mount&&(e.required||e.min||e.max||e.maxLength||e.minLength||e.pattern||e.validate);function ft(e,s,t){const a=f(e,t);if(a||je(t))return{error:a,name:t};const o=t.split(".");for(;o.length;){const n=o.join("."),c=f(s,n),y=f(e,n);if(c&&!Array.isArray(c)&&t!==n)return{name:t};if(y&&y.type)return{name:n,error:y};o.pop()}return{name:t}}var lr=(e,s,t,a,o)=>o.isOnAll?!1:!t&&o.isOnTouch?!(s||e):(t?a.isOnBlur:o.isOnBlur)?!e:(t?a.isOnChange:o.isOnChange)?e:!0,ur=(e,s)=>!Se(f(e,s)).length&&D(e,s);const cr={mode:K.onSubmit,reValidateMode:K.onChange,shouldFocusError:!0};function dr(e={}){let s={...cr,...e},t={submitCount:0,isDirty:!1,isLoading:Q(s.defaultValues),isValidating:!1,isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,touchedFields:{},dirtyFields:{},validatingFields:{},errors:s.errors||{},disabled:s.disabled||!1},a={},o=B(s.defaultValues)||B(s.values)?H(s.defaultValues||s.values)||{}:{},n=s.shouldUnregister?{}:H(o),c={action:!1,mount:!1,watch:!1},y={mount:new Set,disabled:new Set,unMount:new Set,array:new Set,watch:new Set},p,R=0;const x={isDirty:!1,dirtyFields:!1,validatingFields:!1,touchedFields:!1,isValidating:!1,isValid:!1,errors:!1},v={values:Ce(),array:Ce(),state:Ce()},E=at(s.mode),W=at(s.reValidateMode),k=s.criteriaMode===K.all,T=r=>i=>{clearTimeout(R),R=setTimeout(r,i)},V=async r=>{if(!s.disabled&&(x.isValid||r)){const i=s.resolver?I((await ie()).errors):await J(a,!0);i!==t.isValid&&v.state.next({isValid:i})}},M=(r,i)=>{!s.disabled&&(x.isValidating||x.validatingFields)&&((r||Array.from(y.mount)).forEach(l=>{l&&(i?S(t.validatingFields,l,i):D(t.validatingFields,l))}),v.state.next({validatingFields:t.validatingFields,isValidating:!I(t.validatingFields)}))},F=(r,i=[],l,m,d=!0,u=!0)=>{if(m&&l&&!s.disabled){if(c.action=!0,u&&Array.isArray(f(a,r))){const g=l(f(a,r),m.argA,m.argB);d&&S(a,r,g)}if(u&&Array.isArray(f(t.errors,r))){const g=l(f(t.errors,r),m.argA,m.argB);d&&S(t.errors,r,g),ur(t.errors,r)}if(x.touchedFields&&u&&Array.isArray(f(t.touchedFields,r))){const g=l(f(t.touchedFields,r),m.argA,m.argB);d&&S(t.touchedFields,r,g)}x.dirtyFields&&(t.dirtyFields=me(o,n)),v.state.next({name:r,isDirty:b(r,i),dirtyFields:t.dirtyFields,errors:t.errors,isValid:t.isValid})}else S(n,r,i)},ee=(r,i)=>{S(t.errors,r,i),v.state.next({errors:t.errors})},te=r=>{t.errors=r,v.state.next({errors:t.errors,isValid:!1})},C=(r,i,l,m)=>{const d=f(a,r);if(d){const u=f(n,r,P(l)?f(o,r):l);P(u)||m&&m.defaultChecked||i?S(n,r,i?u:De(d._f)):q(r,u),c.mount&&V()}},ne=(r,i,l,m,d)=>{let u=!1,g=!1;const h={name:r};if(!s.disabled){const O=!!(f(a,r)&&f(a,r)._f&&f(a,r)._f.disabled);if(!l||m){x.isDirty&&(g=t.isDirty,t.isDirty=h.isDirty=b(),u=g!==h.isDirty);const j=O||ae(f(o,r),i);g=!!(!O&&f(t.dirtyFields,r)),j||O?D(t.dirtyFields,r):S(t.dirtyFields,r,!0),h.dirtyFields=t.dirtyFields,u=u||x.dirtyFields&&g!==!j}if(l){const j=f(t.touchedFields,r);j||(S(t.touchedFields,r,l),h.touchedFields=t.touchedFields,u=u||x.touchedFields&&j!==l)}u&&d&&v.state.next(h)}return u?h:{}},pe=(r,i,l,m)=>{const d=f(t.errors,r),u=x.isValid&&Y(i)&&t.isValid!==i;if(s.delayError&&l?(p=T(()=>ee(r,l)),p(s.delayError)):(clearTimeout(R),p=null,l?S(t.errors,r,l):D(t.errors,r)),(l?!ae(d,l):d)||!I(m)||u){const g={...m,...u&&Y(i)?{isValid:i}:{},errors:t.errors,name:r};t={...t,...g},v.state.next(g)}},ie=async r=>{M(r,!0);const i=await s.resolver(n,s.context,ir(r||y.mount,a,s.criteriaMode,s.shouldUseNativeValidation));return M(r),i},le=async r=>{const{errors:i}=await ie(r);if(r)for(const l of r){const m=f(i,l);m?S(t.errors,l,m):D(t.errors,l)}else t.errors=i;return i},J=async(r,i,l={valid:!0})=>{for(const m in r){const d=r[m];if(d){const{_f:u,...g}=d;if(u){const h=y.array.has(u.name),O=d._f&&or(d._f);O&&x.validatingFields&&M([m],!0);const j=await ct(d,y.disabled,n,k,s.shouldUseNativeValidation&&!i,h);if(O&&x.validatingFields&&M([m]),j[u.name]&&(l.valid=!1,i))break;!i&&(f(j,u.name)?h?tr(t.errors,j,u.name):S(t.errors,u.name,j[u.name]):D(t.errors,u.name))}!I(g)&&await J(g,i,l)}}return l.valid},xe=()=>{for(const r of y.unMount){const i=f(a,r);i&&(i._f.refs?i._f.refs.every(l=>!Le(l)):!Le(i._f.ref))&&Re(r)}y.unMount=new Set},b=(r,i)=>!s.disabled&&(r&&i&&S(n,r,i),!ae(He(),o)),_=(r,i,l)=>Vt(r,y,{...c.mount?n:P(i)?o:X(r)?{[r]:i}:i},l,i),L=r=>Se(f(c.mount?n:o,r,s.shouldUnregister?f(o,r,[]):[])),q=(r,i,l={})=>{const m=f(a,r);let d=i;if(m){const u=m._f;u&&(!u.disabled&&S(n,r,kt(i,u)),d=_e(u.ref)&&N(i)?"":i,Pt(u.ref)?[...u.ref.options].forEach(g=>g.selected=d.includes(g.value)):u.refs?be(u.ref)?u.refs.length>1?u.refs.forEach(g=>(!g.defaultChecked||!g.disabled)&&(g.checked=Array.isArray(d)?!!d.find(h=>h===g.value):d===g.value)):u.refs[0]&&(u.refs[0].checked=!!d):u.refs.forEach(g=>g.checked=g.value===d):Ne(u.ref)?u.ref.value="":(u.ref.value=d,u.ref.type||v.values.next({name:r,values:{...n}})))}(l.shouldDirty||l.shouldTouch)&&ne(r,d,l.shouldTouch,l.shouldDirty,!0),l.shouldValidate&&fe(r)},G=(r,i,l)=>{for(const m in i){const d=i[m],u=`${r}.${m}`,g=f(a,u);(y.array.has(r)||B(d)||g&&!g._f)&&!oe(d)?G(u,d,l):q(u,d,l)}},z=(r,i,l={})=>{const m=f(a,r),d=y.array.has(r),u=H(i);S(n,r,u),d?(v.array.next({name:r,values:{...n}}),(x.isDirty||x.dirtyFields)&&l.shouldDirty&&v.state.next({name:r,dirtyFields:me(o,n),isDirty:b(r,u)})):m&&!m._f&&!N(u)?G(r,u,l):q(r,u,l),it(r,y)&&v.state.next({...t}),v.values.next({name:c.mount?r:void 0,values:{...n}})},ce=async r=>{c.mount=!0;const i=r.target;let l=i.name,m=!0;const d=f(a,l),u=()=>i.type?De(d._f):pt(r),g=h=>{m=Number.isNaN(h)||oe(h)&&isNaN(h.getTime())||ae(h,f(n,l,h))};if(d){let h,O;const j=u(),se=r.type===Fe.BLUR||r.type===Fe.FOCUS_OUT,Ot=!nr(d._f)&&!s.resolver&&!f(t.errors,l)&&!d._f.deps||lr(se,f(t.touchedFields,l),t.isSubmitted,W,E),Be=it(l,y,se);S(n,l,j),se?(d._f.onBlur&&d._f.onBlur(r),p&&p(0)):d._f.onChange&&d._f.onChange(r);const Ee=ne(l,j,se,!1),jt=!I(Ee)||Be;if(!se&&v.values.next({name:l,type:r.type,values:{...n}}),Ot)return x.isValid&&(s.mode==="onBlur"&&se?V():se||V()),jt&&v.state.next({name:l,...Be?{}:Ee});if(!se&&Be&&v.state.next({...t}),s.resolver){const{errors:Ke}=await ie([l]);if(g(j),m){const Mt=ft(t.errors,a,l),Ze=ft(Ke,a,Mt.name||l);h=Ze.error,l=Ze.name,O=I(Ke)}}else M([l],!0),h=(await ct(d,y.disabled,n,k,s.shouldUseNativeValidation))[l],M([l]),g(j),m&&(h?O=!1:x.isValid&&(O=await J(a,!0)));m&&(d._f.deps&&fe(d._f.deps),pe(l,O,h,Ee))}},de=(r,i)=>{if(f(t.errors,i)&&r.focus)return r.focus(),1},fe=async(r,i={})=>{let l,m;const d=ve(r);if(s.resolver){const u=await le(P(r)?r:d);l=I(u),m=r?!d.some(g=>f(u,g)):l}else r?(m=(await Promise.all(d.map(async u=>{const g=f(a,u);return await J(g&&g._f?{[u]:g}:g)}))).every(Boolean),!(!m&&!t.isValid)&&V()):m=l=await J(a);return v.state.next({...!X(r)||x.isValid&&l!==t.isValid?{}:{name:r},...s.resolver||!r?{isValid:l}:{},errors:t.errors}),i.shouldFocus&&!m&&he(a,de,r?d:y.mount),m},He=r=>{const i={...c.mount?n:o};return P(r)?i:X(r)?f(i,r):r.map(l=>f(i,l))},Ie=(r,i)=>({invalid:!!f((i||t).errors,r),isDirty:!!f((i||t).dirtyFields,r),error:f((i||t).errors,r),isValidating:!!f(t.validatingFields,r),isTouched:!!f((i||t).touchedFields,r)}),Ct=r=>{r&&ve(r).forEach(i=>D(t.errors,i)),v.state.next({errors:r?t.errors:{}})},We=(r,i,l)=>{const m=(f(a,r,{_f:{}})._f||{}).ref,d=f(t.errors,r)||{},{ref:u,message:g,type:h,...O}=d;S(t.errors,r,{...O,...i,ref:m}),v.state.next({name:r,errors:t.errors,isValid:!1}),l&&l.shouldFocus&&m&&m.focus&&m.focus()},Lt=(r,i)=>Q(r)?v.values.subscribe({next:l=>r(_(void 0,i),l)}):_(r,i,!0),Re=(r,i={})=>{for(const l of r?ve(r):y.mount)y.mount.delete(l),y.array.delete(l),i.keepValue||(D(a,l),D(n,l)),!i.keepError&&D(t.errors,l),!i.keepDirty&&D(t.dirtyFields,l),!i.keepTouched&&D(t.touchedFields,l),!i.keepIsValidating&&D(t.validatingFields,l),!s.shouldUnregister&&!i.keepDefaultValue&&D(o,l);v.values.next({values:{...n}}),v.state.next({...t,...i.keepDirty?{isDirty:b()}:{}}),!i.keepIsValid&&V()},$e=({disabled:r,name:i,field:l,fields:m})=>{(Y(r)&&c.mount||r||y.disabled.has(i))&&(r?y.disabled.add(i):y.disabled.delete(i),ne(i,De(l?l._f:f(m,i)._f),!1,!1,!0))},Pe=(r,i={})=>{let l=f(a,r);const m=Y(i.disabled)||Y(s.disabled);return S(a,r,{...l||{},_f:{...l&&l._f?l._f:{ref:{name:r}},name:r,mount:!0,...i}}),y.mount.add(r),l?$e({field:l,disabled:Y(i.disabled)?i.disabled:s.disabled,name:r}):C(r,!0,i.value),{...m?{disabled:i.disabled||s.disabled}:{},...s.progressive?{required:!!i.required,min:ye(i.min),max:ye(i.max),minLength:ye(i.minLength),maxLength:ye(i.maxLength),pattern:ye(i.pattern)}:{},name:r,onChange:ce,onBlur:ce,ref:d=>{if(d){Pe(r,i),l=f(a,r);const u=P(d.value)&&d.querySelectorAll&&d.querySelectorAll("input,select,textarea")[0]||d,g=ar(u),h=l._f.refs||[];if(g?h.find(O=>O===u):u===l._f.ref)return;S(a,r,{_f:{...l._f,...g?{refs:[...h.filter(Le),u,...Array.isArray(f(o,r))?[{}]:[]],ref:{type:u.type,name:r}}:{ref:u}}}),C(r,!1,void 0,u)}else l=f(a,r,{}),l._f&&(l._f.mount=!1),(s.shouldUnregister||i.shouldUnregister)&&!(xt(y.array,r)&&c.action)&&y.unMount.add(r)}}},Je=()=>s.shouldFocusError&&he(a,de,y.mount),Dt=r=>{Y(r)&&(v.state.next({disabled:r}),he(a,(i,l)=>{const m=f(a,l);m&&(i.disabled=m._f.disabled||r,Array.isArray(m._f.refs)&&m._f.refs.forEach(d=>{d.disabled=m._f.disabled||r}))},0,!1))},ze=(r,i)=>async l=>{let m;l&&(l.preventDefault&&l.preventDefault(),l.persist&&l.persist());let d=H(n);if(y.disabled.size)for(const u of y.disabled)S(d,u,void 0);if(v.state.next({isSubmitting:!0}),s.resolver){const{errors:u,values:g}=await ie();t.errors=u,d=g}else await J(a);if(D(t.errors,"root"),I(t.errors)){v.state.next({errors:{}});try{await r(d,l)}catch(u){m=u}}else i&&await i({...t.errors},l),Je(),setTimeout(Je);if(v.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:I(t.errors)&&!m,submitCount:t.submitCount+1,errors:t.errors}),m)throw m},Tt=(r,i={})=>{f(a,r)&&(P(i.defaultValue)?z(r,H(f(o,r))):(z(r,i.defaultValue),S(o,r,H(i.defaultValue))),i.keepTouched||D(t.touchedFields,r),i.keepDirty||(D(t.dirtyFields,r),t.isDirty=i.defaultValue?b(r,H(f(o,r))):b()),i.keepError||(D(t.errors,r),x.isValid&&V()),v.state.next({...t}))},Ye=(r,i={})=>{const l=r?H(r):o,m=H(l),d=I(r),u=d?o:m;if(i.keepDefaultValues||(o=l),!i.keepValues){if(i.keepDirtyValues){const g=new Set([...y.mount,...Object.keys(me(o,n))]);for(const h of Array.from(g))f(t.dirtyFields,h)?S(u,h,f(n,h)):z(h,f(u,h))}else{if(Oe&&P(r))for(const g of y.mount){const h=f(a,g);if(h&&h._f){const O=Array.isArray(h._f.refs)?h._f.refs[0]:h._f.ref;if(_e(O)){const j=O.closest("form");if(j){j.reset();break}}}}a={}}n=s.shouldUnregister?i.keepDefaultValues?H(o):{}:H(u),v.array.next({values:{...u}}),v.values.next({values:{...u}})}y={mount:i.keepDirtyValues?y.mount:new Set,unMount:new Set,array:new Set,disabled:new Set,watch:new Set,watchAll:!1,focus:""},c.mount=!x.isValid||!!i.keepIsValid||!!i.keepDirtyValues,c.watch=!!s.shouldUnregister,v.state.next({submitCount:i.keepSubmitCount?t.submitCount:0,isDirty:d?!1:i.keepDirty?t.isDirty:!!(i.keepDefaultValues&&!ae(r,o)),isSubmitted:i.keepIsSubmitted?t.isSubmitted:!1,dirtyFields:d?{}:i.keepDirtyValues?i.keepDefaultValues&&n?me(o,n):t.dirtyFields:i.keepDefaultValues&&r?me(o,r):i.keepDirty?t.dirtyFields:{},touchedFields:i.keepTouched?t.touchedFields:{},errors:i.keepErrors?t.errors:{},isSubmitSuccessful:i.keepIsSubmitSuccessful?t.isSubmitSuccessful:!1,isSubmitting:!1})},Ge=(r,i)=>Ye(Q(r)?r(n):r,i);return{control:{register:Pe,unregister:Re,getFieldState:Ie,handleSubmit:ze,setError:We,_executeSchema:ie,_getWatch:_,_getDirty:b,_updateValid:V,_removeUnmounted:xe,_updateFieldArray:F,_updateDisabledField:$e,_getFieldArray:L,_reset:Ye,_resetDefaultValues:()=>Q(s.defaultValues)&&s.defaultValues().then(r=>{Ge(r,s.resetOptions),v.state.next({isLoading:!1})}),_updateFormState:r=>{t={...t,...r}},_disableForm:Dt,_subjects:v,_proxyFormState:x,_setErrors:te,get _fields(){return a},get _formValues(){return n},get _state(){return c},set _state(r){c=r},get _defaultValues(){return o},get _names(){return y},set _names(r){y=r},get _formState(){return t},set _formState(r){t=r},get _options(){return s},set _options(r){s={...s,...r}}},trigger:fe,register:Pe,handleSubmit:ze,watch:Lt,setValue:z,getValues:He,reset:Ge,resetField:Tt,clearErrors:Ct,unregister:Re,setError:We,setFocus:(r,i={})=>{const l=f(a,r),m=l&&l._f;if(m){const d=m.refs?m.refs[0]:m.ref;d.focus&&(d.focus(),i.shouldSelect&&Q(d.select)&&d.select())}},getFieldState:Ie}}function fr(e={}){const s=A.useRef(void 0),t=A.useRef(void 0),[a,o]=A.useState({isDirty:!1,isValidating:!1,isLoading:Q(e.defaultValues),isSubmitted:!1,isSubmitting:!1,isSubmitSuccessful:!1,isValid:!1,submitCount:0,dirtyFields:{},touchedFields:{},validatingFields:{},errors:e.errors||{},disabled:e.disabled||!1,defaultValues:Q(e.defaultValues)?void 0:e.defaultValues});s.current||(s.current={...dr(e),formState:a});const n=s.current.control;return n._options=e,qe({subject:n._subjects.state,next:c=>{_t(c,n._proxyFormState,n._updateFormState,!0)&&o({...n._formState})}}),A.useEffect(()=>n._disableForm(e.disabled),[n,e.disabled]),A.useEffect(()=>{if(n._proxyFormState.isDirty){const c=n._getDirty();c!==a.isDirty&&n._subjects.state.next({isDirty:c})}},[n,a.isDirty]),A.useEffect(()=>{e.values&&!ae(e.values,t.current)?(n._reset(e.values,n._options.resetOptions),t.current=e.values,o(c=>({...c}))):n._resetDefaultValues()},[e.values,n]),A.useEffect(()=>{e.errors&&n._setErrors(e.errors)},[e.errors,n]),A.useEffect(()=>{n._state.mount||(n._updateValid(),n._state.mount=!0),n._state.watch&&(n._state.watch=!1,n._subjects.state.next({...n._formState})),n._removeUnmounted()}),A.useEffect(()=>{e.shouldUnregister&&n._subjects.values.next({values:n._getWatch()})},[e.shouldUnregister,n]),s.current.formState=Ft(a,n),s.current}const ns={title:"Guides/Integration with React Hook Form",args:{onSubmit:qt(e=>{console.log("Form submitted:",e)})}},ge={render:function(s){const t=()=>{var p,R,x,v,E,W,k,T;const{register:a,handleSubmit:o,formState:{errors:n},reset:c,control:y}=fr({defaultValues:{fullName:"",email:"",age:void 0,country:"",password:"",confirmPassword:"",bio:"",privacyPolicyAccepted:!1,experienceLevel:50,priceRange:[25,75]}});return w.jsx("div",{style:{maxWidth:"600px",margin:"0 auto",padding:"20px"},children:w.jsxs(Xe,{direction:"column",gap:"16",children:[w.jsx(Ut,{variant:"extraLarge",tag:"h1",children:"User Registration Form"}),w.jsxs("form",{onSubmit:o(s.onSubmit),style:{display:"contents"},noValidate:!0,children:[w.jsx(et,{label:"Full Name",...a("fullName",{required:"Full name is required"}),error:(p=n.fullName)==null?void 0:p.message,required:!0}),w.jsx(et,{label:"Email",type:"email",...a("email",{required:"Email is required"}),error:(R=n.email)==null?void 0:R.message,required:!0}),w.jsx(Ht,{label:"Age",...a("age",{valueAsNumber:!0,required:"Age is required",min:{value:18,message:"You must be at least 18 years old"}}),min:18,max:120,error:(x=n.age)==null?void 0:x.message,required:!0}),w.jsxs(It,{label:"Country",placeholder:"",...a("country",{required:"Country is required"}),error:(v=n.country)==null?void 0:v.message,required:!0,children:[w.jsx(Z,{value:"us",children:"United States"}),w.jsx(Z,{value:"ca",children:"Canada"}),w.jsx(Z,{value:"uk",children:"United Kingdom"}),w.jsx(Z,{value:"de",children:"Germany"}),w.jsx(Z,{value:"fr",children:"France"}),w.jsx(Z,{value:"it",children:"Italy"}),w.jsx(Z,{value:"es",children:"Spain"}),w.jsx(Z,{value:"au",children:"Australia"}),w.jsx(Z,{value:"jp",children:"Japan"}),w.jsx(Z,{value:"other",children:"Other"})]}),w.jsx(tt,{label:"Password",...a("password",{required:"Password is required",minLength:{value:8,message:"Password must be at least 8 characters"},pattern:{value:/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]/,message:"Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character"}}),error:(E=n.password)==null?void 0:E.message,required:!0}),w.jsx(tt,{label:"Confirm Password",...a("confirmPassword",{required:"Please confirm your password",validate:(V,M)=>V===M.password||"Passwords do not match"}),error:(W=n.confirmPassword)==null?void 0:W.message,required:!0}),w.jsx(Wt,{label:"Bio",...a("bio",{maxLength:{value:500,message:"Bio must be less than 500 characters"}}),error:(k=n.bio)==null?void 0:k.message}),w.jsx(st,{name:"experienceLevel",control:y,rules:{validate:{minValue:V=>V<50?"Must be above 50":!0}},render:({field:V})=>{var M;return w.jsx(ke,{label:"Experience Level",error:(M=n.experienceLevel)==null?void 0:M.message,children:w.jsx($t,{value:V.value,onValueChange:V.onChange,min:0,max:100,"aria-label":"Experience Level"})})}}),w.jsx(st,{name:"priceRange",control:y,rules:{validate:{minValue:([V])=>V<=25?"Minimum must be above 25":!0,maxValue:([,V])=>V>=75?"Maximum must be below 75":!0}},render:({field:V})=>{var M;return w.jsx(ke,{label:"Price",error:(M=n.priceRange)==null?void 0:M.message,children:w.jsx(Jt,{value:V.value,onValueChange:V.onChange,min:0,max:100,"aria-label":"Price Range"})})}}),w.jsx(ke,{label:"Accept Privacy Policy",description:"I accept the Privacy Policy",error:(T=n.privacyPolicyAccepted)==null?void 0:T.message,hideLabel:!0,children:w.jsx(zt,{...a("privacyPolicyAccepted",{required:"You must accept the Privacy Policy"})})}),w.jsxs(Xe,{gap:"12",padding:["20","0","0"],justifyContent:"end",children:[w.jsx(rt,{onClick:()=>c(),variant:"secondary",children:"Reset"}),w.jsx(rt,{submitsForm:!0,children:"Submit"})]})]})]})})};return w.jsx(t,{})},play:async({args:e,canvasElement:s,step:t})=>{const a=Nt(s);await t("Fill all form fields",async()=>{console.log(await a.findAllByRole("textbox")),await U.type(a.getByRole("textbox",{name:"Full Name"}),"John Doe"),await U.type(a.getByRole("textbox",{name:"Email"}),"john.doe@example.com"),await U.clear(a.getByRole("spinbutton",{name:"Age"})),await U.type(a.getByRole("spinbutton",{name:"Age"}),"25"),await U.selectOptions(a.getByRole("combobox",{name:"Country"}),"us"),await U.type(a.getByLabelText(/^Password/),"TestPassword123!"),await U.type(a.getByLabelText(/^Confirm Password/),"TestPassword123!"),await U.type(a.getByRole("textbox",{name:"Bio"}),"I am a software engineer with 5 years of experience."),a.getByRole("slider",{name:"Experience Level"}).focus(),await U.keyboard("{ArrowRight}".repeat(5));const n=a.getByRole("slider",{name:"Minimum Price Range"}),c=a.getByRole("slider",{name:"Maximum Price Range"});n.focus(),await U.keyboard("{ArrowRight}".repeat(2)),c.focus(),await U.keyboard("{ArrowLeft}".repeat(2)),await U.click(a.getByRole("checkbox",{name:"Accept Privacy Policy"}))}),await t("Submit the form",async()=>{await U.click(a.getByRole("button",{name:"Submit"}))}),await t("Assert that onSubmit was called with correct data",async()=>{await Qe(()=>{$(e.onSubmit).toHaveBeenCalledWith({fullName:"John Doe",email:"john.doe@example.com",age:25,country:"us",password:"TestPassword123!",confirmPassword:"TestPassword123!",bio:"I am a software engineer with 5 years of experience.",privacyPolicyAccepted:!0,experienceLevel:55,priceRange:[27,73]},$.anything())})}),await t("Reset the form",async()=>{await U.click(a.getByRole("button",{name:"Reset"}))}),await t("Assert all fields are cleared",async()=>{await Qe(()=>{$(a.getByRole("textbox",{name:"Full Name"})).not.toHaveValue(),$(a.getByRole("textbox",{name:"Email"})).not.toHaveValue(),$(a.getByRole("spinbutton",{name:"Age"})).not.toHaveValue(),$(a.getByRole("combobox",{name:"Country"})).not.toHaveValue(),$(a.getByLabelText(/^Password/)).not.toHaveValue(),$(a.getByLabelText(/^Confirm Password/)).not.toHaveValue(),$(a.getByRole("textbox",{name:"Bio"})).not.toHaveValue(),$(a.getByRole("checkbox",{name:"Accept Privacy Policy"})).not.toBeChecked(),$(a.getByRole("slider",{name:"Experience Level"})).toHaveAttribute("aria-valuenow","50"),$(a.getByRole("slider",{name:"Minimum Price Range"})).toHaveAttribute("aria-valuenow","25"),$(a.getByRole("slider",{name:"Maximum Price Range"})).toHaveAttribute("aria-valuenow","75")})})}};var mt,yt,gt,vt,ht;ge.parameters={...ge.parameters,docs:{...(mt=ge.parameters)==null?void 0:mt.docs,source:{originalSource:`{
-  render: function Story(args) {
-    /**
-     * This \`Story\` component is a hacky workaround; without it, the
-     * react-hook-form \`Controller\` component causes a memory leak (and
-     * subsequent crash) on submit.
-     *
-     * We're not sure why yet, but it may have to do with the fact that the
-     * Storybook \`render\` function isn't actually a component, and so some
-     * code inside \`Controller\` runs in an unexpected context.
-     */
-    const Story = () => {
-      const {
-        register,
-        handleSubmit,
-        formState: {
-          errors
-        },
-        reset,
-        control
-      } = useForm<FormData>({
-        defaultValues: {
-          fullName: '',
-          email: '',
-          age: undefined,
-          country: '',
-          password: '',
-          confirmPassword: '',
-          bio: '',
-          privacyPolicyAccepted: false,
-          experienceLevel: 50,
-          priceRange: [25, 75]
-        }
-      });
-      return <div style={{
-        maxWidth: '600px',
-        margin: '0 auto',
-        padding: '20px'
-      }}>
-                    <LayoutFlex direction="column" gap="16">
-                        <Heading variant="extraLarge" tag="h1">
-                            User Registration Form
-                        </Heading>
-
-                        <form onSubmit={handleSubmit(args.onSubmit)} style={{
-            display: 'contents'
-          }}
-          // Since we're using react-hook-form, we can disable the default HTML5 validation
-          // to keep error messages visually consistent
-          noValidate>
-                            <TextField label="Full Name" {...register('fullName', {
-              required: 'Full name is required'
-            })} error={errors.fullName?.message} required />
-
-                            <TextField label="Email" type="email" {...register('email', {
-              required: 'Email is required'
-            })} error={errors.email?.message} required />
-
-                            <NumberField label="Age" {...register('age', {
-              valueAsNumber: true,
-              required: 'Age is required',
-              min: {
-                value: 18,
-                message: 'You must be at least 18 years old'
-              }
-            })} min={18} max={120} error={errors.age?.message} required />
-
-                            <SelectField label="Country" placeholder="" {...register('country', {
-              required: 'Country is required'
-            })} error={errors.country?.message} required>
-                                <SelectFieldOption value="us">United States</SelectFieldOption>
-                                <SelectFieldOption value="ca">Canada</SelectFieldOption>
-                                <SelectFieldOption value="uk">United Kingdom</SelectFieldOption>
-                                <SelectFieldOption value="de">Germany</SelectFieldOption>
-                                <SelectFieldOption value="fr">France</SelectFieldOption>
-                                <SelectFieldOption value="it">Italy</SelectFieldOption>
-                                <SelectFieldOption value="es">Spain</SelectFieldOption>
-                                <SelectFieldOption value="au">Australia</SelectFieldOption>
-                                <SelectFieldOption value="jp">Japan</SelectFieldOption>
-                                <SelectFieldOption value="other">Other</SelectFieldOption>
-                            </SelectField>
-
-                            <PasswordField label="Password" {...register('password', {
-              required: 'Password is required',
-              minLength: {
-                value: 8,
-                message: 'Password must be at least 8 characters'
-              },
-              pattern: {
-                value: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\\d)(?=.*[@$!%*?&])[A-Za-z\\d@$!%*?&]/,
-                message: 'Password must contain at least one uppercase letter, one lowercase letter, one number, and one special character'
-              }
-            })} error={errors.password?.message} required />
-
-                            <PasswordField label="Confirm Password" {...register('confirmPassword', {
-              required: 'Please confirm your password',
-              validate: (value, formValues) => value === formValues.password || 'Passwords do not match'
-            })} error={errors.confirmPassword?.message} required />
-
-                            <TextareaField label="Bio" {...register('bio', {
-              maxLength: {
-                value: 500,
-                message: 'Bio must be less than 500 characters'
-              }
-            })} error={errors.bio?.message} />
-
-                            <Controller name="experienceLevel" control={control} rules={{
-              validate: {
-                minValue: value => {
-                  if (value < 50) {
-                    return 'Must be above 50';
-                  }
-                  return true;
-                }
-              }
-            }} render={({
-              field
-            }) => <FormControl label="Experience Level" error={errors.experienceLevel?.message}>
-                                        <Slider value={field.value} onValueChange={field.onChange} min={0} max={100} aria-label="Experience Level" />
-                                    </FormControl>} />
-
-                            <Controller name="priceRange" control={control} rules={{
-              validate: {
-                minValue: ([min]) => {
-                  if (min <= 25) {
-                    return 'Minimum must be above 25';
-                  }
-                  return true;
-                },
-                maxValue: ([, max]) => {
-                  if (max >= 75) {
-                    return 'Maximum must be below 75';
-                  }
-                  return true;
-                }
-              }
-            }} render={({
-              field
-            }) => <FormControl label="Price" error={errors.priceRange?.message}>
-                                        <RangeSlider value={field.value} onValueChange={field.onChange} min={0} max={100} aria-label="Price Range" />
-                                    </FormControl>} />
-
-                            <FormControl label="Accept Privacy Policy" description="I accept the Privacy Policy" error={errors.privacyPolicyAccepted?.message} hideLabel>
-                                <Checkbox {...register('privacyPolicyAccepted', {
-                required: 'You must accept the Privacy Policy'
-              })} />
-                            </FormControl>
-
-                            <LayoutFlex gap="12" padding={['20', '0', '0']} justifyContent="end">
-                                <Button onClick={() => reset()} variant="secondary">
-                                    Reset
-                                </Button>
-                                <Button submitsForm>Submit</Button>
-                            </LayoutFlex>
-                        </form>
-                    </LayoutFlex>
-                </div>;
-    };
-    return <Story />;
-  },
-  play: async ({
-    args,
-    canvasElement,
-    step
-  }) => {
-    const canvas = within(canvasElement);
-    await step('Fill all form fields', async () => {
-      console.log(await canvas.findAllByRole('textbox'));
-      await userEvent.type(canvas.getByRole('textbox', {
-        name: 'Full Name'
-      }), 'John Doe');
-      await userEvent.type(canvas.getByRole('textbox', {
-        name: 'Email'
-      }), 'john.doe@example.com');
-      await userEvent.clear(canvas.getByRole('spinbutton', {
-        name: 'Age'
-      }));
-      await userEvent.type(canvas.getByRole('spinbutton', {
-        name: 'Age'
-      }), '25');
-      await userEvent.selectOptions(canvas.getByRole('combobox', {
-        name: 'Country'
-      }), 'us');
-
-      // Password fields doesn't have implicit role, so we need to use getByLabelText
-      await userEvent.type(canvas.getByLabelText(/^Password/), 'TestPassword123!');
-      await userEvent.type(canvas.getByLabelText(/^Confirm Password/), 'TestPassword123!');
-      await userEvent.type(canvas.getByRole('textbox', {
-        name: 'Bio'
-      }), 'I am a software engineer with 5 years of experience.');
-      const experienceSlider = canvas.getByRole('slider', {
-        name: 'Experience Level'
-      });
-      experienceSlider.focus();
-      await userEvent.keyboard('{ArrowRight}'.repeat(5));
-      const priceRangeMin = canvas.getByRole('slider', {
-        name: 'Minimum Price Range'
-      });
-      const priceRangeMax = canvas.getByRole('slider', {
-        name: 'Maximum Price Range'
-      });
-      priceRangeMin.focus();
-      await userEvent.keyboard('{ArrowRight}'.repeat(2));
-      priceRangeMax.focus();
-      await userEvent.keyboard('{ArrowLeft}'.repeat(2));
-      await userEvent.click(canvas.getByRole('checkbox', {
-        name: 'Accept Privacy Policy'
-      }));
-    });
-    await step('Submit the form', async () => {
-      await userEvent.click(canvas.getByRole('button', {
-        name: 'Submit'
-      }));
-    });
-    await step('Assert that onSubmit was called with correct data', async () => {
-      await waitFor(() => {
-        expect(args.onSubmit).toHaveBeenCalledWith({
-          fullName: 'John Doe',
-          email: 'john.doe@example.com',
-          age: 25,
-          country: 'us',
-          password: 'TestPassword123!',
-          confirmPassword: 'TestPassword123!',
-          bio: 'I am a software engineer with 5 years of experience.',
-          privacyPolicyAccepted: true,
-          experienceLevel: 55,
-          priceRange: [27, 73]
-        }, expect.anything());
-      });
-    });
-    await step('Reset the form', async () => {
-      await userEvent.click(canvas.getByRole('button', {
-        name: 'Reset'
-      }));
-    });
-    await step('Assert all fields are cleared', async () => {
-      await waitFor(() => {
-        expect(canvas.getByRole('textbox', {
-          name: 'Full Name'
-        })).not.toHaveValue();
-        expect(canvas.getByRole('textbox', {
-          name: 'Email'
-        })).not.toHaveValue();
-        expect(canvas.getByRole('spinbutton', {
-          name: 'Age'
-        })).not.toHaveValue();
-        expect(canvas.getByRole('combobox', {
-          name: 'Country'
-        })).not.toHaveValue();
-
-        // Password fields doesn't have implicit role, so we need to use getByLabelText
-        expect(canvas.getByLabelText(/^Password/)).not.toHaveValue();
-        expect(canvas.getByLabelText(/^Confirm Password/)).not.toHaveValue();
-        expect(canvas.getByRole('textbox', {
-          name: 'Bio'
-        })).not.toHaveValue();
-        expect(canvas.getByRole('checkbox', {
-          name: 'Accept Privacy Policy'
-        })).not.toBeChecked();
-        expect(canvas.getByRole('slider', {
-          name: 'Experience Level'
-        })).toHaveAttribute('aria-valuenow', '50');
-        expect(canvas.getByRole('slider', {
-          name: 'Minimum Price Range'
-        })).toHaveAttribute('aria-valuenow', '25');
-        expect(canvas.getByRole('slider', {
-          name: 'Maximum Price Range'
-        })).toHaveAttribute('aria-valuenow', '75');
-      });
-    });
-  }
-}`,...(gt=(yt=ge.parameters)==null?void 0:yt.docs)==null?void 0:gt.source},description:{story:`This example demonstrates how to integrate design system fields with react-hook-form.
-
-See [react-hook-form docs](https://react-hook-form.com/docs) for more information.`,...(ht=(vt=ge.parameters)==null?void 0:vt.docs)==null?void 0:ht.description}}};const ls=["IntegrationWithReactHookForm"];export{ge as IntegrationWithReactHookForm,ls as __namedExportsOrder,ns as default};