patterns-forms-stories-mdx.d1779917.iframe.bundle.js

"use strict";(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[22],{"./src/patterns/forms.stories.mdx":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{__namedExportsOrder:()=>__namedExportsOrder,aligningFields:()=>aligningFields,aligningWithButtons:()=>aligningWithButtons,basicForm:()=>basicForm,default:()=>__WEBPACK_DEFAULT_EXPORT__});__webpack_require__("../../node_modules/react/index.js");var _Users_dennis_Projects_wordpress_seo_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@mdx-js/react/lib/index.js"),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs"),___WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/elements/autocomplete/index.js"),___WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/components/select-field/index.js"),___WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/elements/title/index.js"),___WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/elements/code/index.js"),___WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/components/text-field/index.js"),___WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("./src/elements/checkbox/index.js"),___WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("./src/elements/button/index.js"),___WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("./src/components/autocomplete-field/index.js"),___WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("./src/components/tag-field/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");function _createMdxContent(props){const _components=Object.assign({h1:"h1",p:"p",h2:"h2",h3:"h3",code:"code"},(0,_Users_dennis_Projects_wordpress_seo_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_4__.RP)(),props.components);return ___WEBPACK_IMPORTED_MODULE_5__.A||_missingMdxReference("Autocomplete",!1),___WEBPACK_IMPORTED_MODULE_5__.A.Option||_missingMdxReference("Autocomplete.Option",!0),___WEBPACK_IMPORTED_MODULE_6__.A||_missingMdxReference("SelectField",!1),___WEBPACK_IMPORTED_MODULE_6__.A.Option||_missingMdxReference("SelectField.Option",!0),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.W8,{title:"3) Patterns/Forms"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.h1,{id:"forms",children:"Forms"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.p,{children:"A form is a group of related input controls that enables users to input data. Forms are built from multiple elements\nand can be adapted for various purposes, appearing within a paper or a modal."}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Hl,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.gG,{name:"Basic form",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_7__.A,{className:"yst-mb-3",children:"Basic form"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("p",{children:["A form will usually start with a header + description first, between which we maintain a 12px vertical spacing (",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_8__.A,{children:"yst-mb-3"}),")."]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-space-y-8 yst-mt-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{id:"story1-1",label:"Text field 1",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{id:"story1-2",label:"Text field 2",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_10__.A,{id:"story1-3",label:"I am a checkbox.",name:"name",value:"value"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",children:"Submit"})]})]})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.h2,{id:"form-layouts",children:"Form layouts"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.h3,{id:"spacing",children:"Spacing"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_components.p,{children:["To prevent confusion, it's important to maintain appropriate spacing between form elements. We typically\nmaintain a vertical spacing of 32px (",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.code,{children:"yst-space-y-8"}),") and a horizontal spacing of\n24px (",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.code,{children:"yst-gap-x-6"}),") between different input elements in a form. When placing a button next to a text input\nor select field, and it's related to that field, we typically maintain a horizontal spacing of 8 pixels (",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.code,{children:"yst-gap-x-2"}),").\nWhen placing two (or more) buttons next to each other, we typically maintain a horizontal spacing of 12px\n(",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.code,{children:"yst-gap-x-3"}),") between the buttons."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Hl,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.gG,{name:"Aligning fields",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_7__.A,{size:"2",className:"yst-mb-3",children:"Aligning text fields"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-space-y-8 yst-mt-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-gap-x-6",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story2-1",label:"First name",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story2-2",label:"Last name",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-gap-x-6",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story2-3",label:"Street",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{id:"story2-4",label:"Number",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-mt-2 yst-gap-x-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story3-1",label:"Email address",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Sign up"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-mt-2 yst-gap-x-3",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",children:"Save changes"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",variant:"secondary",children:"Discard changes"})]})]})]})}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.h3,{id:"buttons",children:"Buttons"}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_components.p,{children:["When placing a button next to a form element like a text input, we typically choose the ‘Large’ variant and maintain a spacing\nof 8 pixels (",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_components.code,{children:"yst-gap-x-2"}),"). The ‘Large’ button shares the same height (40px) as other form elements. This ensures\nuniformity in height, aligning seamlessly next to each other."]}),"\n",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.Hl,{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_2__.gG,{name:"Aligning with buttons",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_7__.A,{size:"2",className:"yst-mb-3",children:"Aligning fields with buttons"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-space-y-8 yst-mt-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-mt-2 yst-gap-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story3-1",label:"A text input next to a button",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Submit text"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2 yst-mt-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(___WEBPACK_IMPORTED_MODULE_6__.A,{label:"A select next to a button",id:"story3-2",className:"yst-grow",selectedLabel:"Option 1",value:"1",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_6__.A.Option,{label:"Option 1",value:"1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_6__.A.Option,{label:"Option 2",value:"2"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Submit selected"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2 yst-mt-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(___WEBPACK_IMPORTED_MODULE_12__.A,{id:"story3-3",className:"yst-grow",label:"An autocomplete next to a button",placeholder:"Type to complete",value:"1",onQueryChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_5__.A.Option,{value:"1",children:"Option 1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_5__.A.Option,{value:"2",children:"Option 2"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Submit completed"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2 yst-mt-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_13__.A,{id:"story3-4",className:"yst-grow",label:"A tag input next to a button",onAddTag:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onRemoveTag:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onSetTags:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,tags:["Apple","Banana","Pineapple"]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Submit tags"})]})})]})]})})]})}function _missingMdxReference(id,component){throw new Error("Expected "+(component?"component":"object")+" `"+id+"` to be defined: you likely forgot to import, pass, or provide it.")}const basicForm=()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_7__.A,{className:"yst-mb-3",children:"Basic form"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("p",{children:["A form will usually start with a header + description first, between which we maintain a 12px vertical spacing (",(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_8__.A,{children:"yst-mb-3"}),")."]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-space-y-8 yst-mt-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{id:"story1-1",label:"Text field 1",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{id:"story1-2",label:"Text field 2",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_10__.A,{id:"story1-3",label:"I am a checkbox.",name:"name",value:"value"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",children:"Submit"})]})]});basicForm.storyName="Basic form",basicForm.parameters={storySource:{source:'<Title className="yst-mb-3">{"Basic form"}</Title>\n<p>{"A form will usually start with a header + description first, between which we maintain a 12px vertical spacing ("}<Code>{"yst-mb-3"}</Code>{")."}</p>\n<div className="yst-space-y-8 yst-mt-4"><TextField id="story1-1" label="Text field 1" onChange={noop} /><TextField id="story1-2" label="Text field 2" onChange={noop} /><Checkbox id="story1-3" label="I am a checkbox." name="name" value="value" /><Button type="button">{"Submit"}</Button></div>'}};const aligningFields=()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_7__.A,{size:"2",className:"yst-mb-3",children:"Aligning text fields"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-space-y-8 yst-mt-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-gap-x-6",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story2-1",label:"First name",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story2-2",label:"Last name",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-gap-x-6",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story2-3",label:"Street",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{id:"story2-4",label:"Number",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-mt-2 yst-gap-x-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story3-1",label:"Email address",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Sign up"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-mt-2 yst-gap-x-3",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",children:"Save changes"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",variant:"secondary",children:"Discard changes"})]})]})]});aligningFields.storyName="Aligning fields",aligningFields.parameters={storySource:{source:'<Title size="2" className="yst-mb-3">{"Aligning text fields"}</Title>\n<div className="yst-space-y-8 yst-mt-4"><div className="yst-flex yst-gap-x-6"><TextField className="yst-grow" id="story2-1" label="First name" onChange={noop} /><TextField className="yst-grow" id="story2-2" label="Last name" onChange={noop} /></div><div className="yst-flex yst-gap-x-6"><TextField className="yst-grow" id="story2-3" label="Street" onChange={noop} /><TextField id="story2-4" label="Number" onChange={noop} /></div><div className="yst-flex yst-items-end yst-mt-2 yst-gap-x-2"><TextField className="yst-grow" id="story3-1" label="Email address" onChange={noop} /><Button type="button" size="large">{"Sign up"}</Button></div><div className="yst-flex yst-mt-2 yst-gap-x-3"><Button type="button">{"Save changes"}</Button><Button type="button" variant="secondary">{"Discard changes"}</Button></div></div>'}};const aligningWithButtons=()=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_7__.A,{size:"2",className:"yst-mb-3",children:"Aligning fields with buttons"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-space-y-8 yst-mt-4",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-mt-2 yst-gap-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-grow",id:"story3-1",label:"A text input next to a button",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Submit text"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2 yst-mt-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(___WEBPACK_IMPORTED_MODULE_6__.A,{label:"A select next to a button",id:"story3-2",className:"yst-grow",selectedLabel:"Option 1",value:"1",onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_6__.A.Option,{label:"Option 1",value:"1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_6__.A.Option,{label:"Option 2",value:"2"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Submit selected"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2 yst-mt-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(___WEBPACK_IMPORTED_MODULE_12__.A,{id:"story3-3",className:"yst-grow",label:"An autocomplete next to a button",placeholder:"Type to complete",value:"1",onQueryChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onChange:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_5__.A.Option,{value:"1",children:"Option 1"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_5__.A.Option,{value:"2",children:"Option 2"})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Submit completed"})]})}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-end yst-gap-2 yst-mt-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_13__.A,{id:"story3-4",className:"yst-grow",label:"A tag input next to a button",onAddTag:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onRemoveTag:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onSetTags:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,tags:["Apple","Banana","Pineapple"]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(___WEBPACK_IMPORTED_MODULE_11__.A,{type:"button",size:"large",children:"Submit tags"})]})})]})]});aligningWithButtons.storyName="Aligning with buttons",aligningWithButtons.parameters={storySource:{source:'<Title size="2" className="yst-mb-3">{"Aligning fields with buttons"}</Title>\n<div className="yst-space-y-8 yst-mt-4"><div className="yst-flex yst-items-end yst-mt-2 yst-gap-2"><TextField className="yst-grow" id="story3-1" label="A text input next to a button" onChange={noop} /><Button type="button" size="large">{"Submit text"}</Button></div><div><div className="yst-flex yst-items-end yst-gap-2 yst-mt-2"><SelectField label="A select next to a button" id="story3-2" className="yst-grow" selectedLabel="Option 1" value="1" onChange={noop}><SelectField.Option label="Option 1" value="1" /><SelectField.Option label="Option 2" value="2" /></SelectField><Button type="button" size="large">{"Submit selected"}</Button></div></div><div><div className="yst-flex yst-items-end yst-gap-2 yst-mt-2"><AutocompleteField id="story3-3" className="yst-grow" label="An autocomplete next to a button" placeholder="Type to complete" value="1" onQueryChange={noop} onChange={noop}><Autocomplete.Option value="1">{"Option 1"}</Autocomplete.Option><Autocomplete.Option value="2">{"Option 2"}</Autocomplete.Option></AutocompleteField><Button type="button" size="large">{"Submit completed"}</Button></div></div><div><div className="yst-flex yst-items-end yst-gap-2 yst-mt-2"><TagField id="story3-4" className="yst-grow" label="A tag input next to a button" onAddTag={noop} onRemoveTag={noop} onSetTags={noop} tags={["Apple", "Banana", "Pineapple"]} /><Button type="button" size="large">{"Submit tags"}</Button></div></div></div>'}};const componentMeta={title:"3) Patterns/Forms",tags:["stories-mdx"],includeStories:["basicForm","aligningFields","aligningWithButtons"]};componentMeta.parameters=componentMeta.parameters||{},componentMeta.parameters.docs={...componentMeta.parameters.docs||{},page:function MDXContent(props={}){const{wrapper:MDXLayout}=Object.assign({},(0,_Users_dennis_Projects_wordpress_seo_node_modules_storybook_addon_docs_dist_shims_mdx_react_shim__WEBPACK_IMPORTED_MODULE_4__.RP)(),props.components);return MDXLayout?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(MDXLayout,{...props,children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_createMdxContent,{...props})}):_createMdxContent(props)}};const __WEBPACK_DEFAULT_EXPORT__=componentMeta,__namedExportsOrder=["basicForm","aligningFields","aligningWithButtons"]},"./src/components/autocomplete-field/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_6___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_6__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),_elements_autocomplete__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/autocomplete/index.js"),_elements_validation__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/elements/validation/validation-message.js"),_hooks__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/hooks/use-described-by.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const AutocompleteField=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({id,label,disabled,description,validation,className,...props},ref)=>{const{ids,describedBy}=(0,_hooks__WEBPACK_IMPORTED_MODULE_3__.A)(id,{validation:null==validation?void 0:validation.message,description});return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-autocomplete-field",disabled&&"yst-autocomplete-field--disabled",className),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_elements_autocomplete__WEBPACK_IMPORTED_MODULE_4__.A,{ref,id,label,labelProps:{as:"label",className:"yst-label yst-autocomplete-field__label"},validation,className:"yst-autocomplete-field__select",buttonProps:{"aria-describedby":describedBy},disabled,...props}),(null==validation?void 0:validation.message)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_elements_validation__WEBPACK_IMPORTED_MODULE_5__.A,{variant:null==validation?void 0:validation.variant,id:ids.validation,className:"yst-autocomplete-field__validation",children:validation.message}),description&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("div",{id:ids.description,className:"yst-autocomplete-field__description",children:description})]})}));AutocompleteField.displayName="AutocompleteField",AutocompleteField.propTypes={id:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string.isRequired,label:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string.isRequired,disabled:prop_types__WEBPACK_IMPORTED_MODULE_6___default().bool,description:prop_types__WEBPACK_IMPORTED_MODULE_6___default().node,validation:prop_types__WEBPACK_IMPORTED_MODULE_6___default().shape({variant:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string,message:prop_types__WEBPACK_IMPORTED_MODULE_6___default().node}),className:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string},AutocompleteField.defaultProps={disabled:!1,description:null,validation:{},className:""},AutocompleteField.Option=_elements_autocomplete__WEBPACK_IMPORTED_MODULE_4__.A.Option,AutocompleteField.Option.displayName="AutocompleteField.Option";const __WEBPACK_DEFAULT_EXPORT__=AutocompleteField;AutocompleteField.__docgenInfo={description:"@param {string} id Identifier.\n@param {Object} validation The validation state.\n@param {string} [className] Optional CSS class.\n@param {string} label Label.\n@param {Boolean} [disabled] Disabled state.\n@param {JSX.node} [description] Optional description.\n@param {Object} [props] Any extra props.\n@returns {JSX.Element} AutocompleteField component.",methods:[{name:"Option",docblock:null,modifiers:["static"],params:[{name:"{\n\tchildren,\n\tvalue,\n}",optional:!1,type:null}],returns:null}],displayName:"AutocompleteField",props:{disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},description:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},validation:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"shape",value:{variant:{name:"string",required:!1},message:{name:"node",required:!1}}},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},id:{description:"",type:{name:"string"},required:!0},label:{description:"",type:{name:"string"},required:!0}}}},"./src/components/tag-field/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_8___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_8__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),_elements_label__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/label/index.js"),_elements_tag_input__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/elements/tag-input/index.js"),_elements_validation__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/elements/validation/validation-input.js"),_elements_validation__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/elements/validation/validation-message.js"),_hooks__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/hooks/use-described-by.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const TagField=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({id,label,labelSuffix,disabled,className,description,validation,...props},ref)=>{const{ids,describedBy}=(0,_hooks__WEBPACK_IMPORTED_MODULE_3__.A)(id,{validation:null==validation?void 0:validation.message,description});return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-tag-field",disabled&&"yst-tag-field--disabled",className),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:"yst-flex yst-items-center yst-mb-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_elements_label__WEBPACK_IMPORTED_MODULE_4__.A,{className:"yst-tag-field__label",htmlFor:id,label}),labelSuffix]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_elements_validation__WEBPACK_IMPORTED_MODULE_5__.A,{as:_elements_tag_input__WEBPACK_IMPORTED_MODULE_6__.A,ref,id,disabled,className:"yst-tag-field__input","aria-describedby":describedBy,validation,...props}),(null==validation?void 0:validation.message)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_elements_validation__WEBPACK_IMPORTED_MODULE_7__.A,{variant:null==validation?void 0:validation.variant,id:ids.validation,className:"yst-tag-field__validation",children:validation.message}),description&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p",{id:ids.description,className:"yst-tag-field__description",children:description})]})}));TagField.displayName="TagField",TagField.propTypes={id:prop_types__WEBPACK_IMPORTED_MODULE_8___default().string.isRequired,label:prop_types__WEBPACK_IMPORTED_MODULE_8___default().string.isRequired,labelSuffix:prop_types__WEBPACK_IMPORTED_MODULE_8___default().node,disabled:prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool,className:prop_types__WEBPACK_IMPORTED_MODULE_8___default().string,description:prop_types__WEBPACK_IMPORTED_MODULE_8___default().node,validation:prop_types__WEBPACK_IMPORTED_MODULE_8___default().shape({variant:prop_types__WEBPACK_IMPORTED_MODULE_8___default().string,message:prop_types__WEBPACK_IMPORTED_MODULE_8___default().node})},TagField.defaultProps={labelSuffix:null,disabled:!1,className:"",description:null,validation:{}};const __WEBPACK_DEFAULT_EXPORT__=TagField;TagField.__docgenInfo={description:"@param {string} id The ID of the input.\n@param {string} label The label.\n@param {JSX.node} [labelSuffix] Extra elements after the label.\n@param {string} [className] The HTML class.\n@param {JSX.node} [description] A description.\n@param {boolean} [disabled] The disabled state.\n@param {Object} [validation] The validation state.\n@param {Object} [props] Any extra properties for the TagInput.\n@returns {JSX.Element} The tag field.",methods:[],displayName:"TagField",props:{labelSuffix:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},description:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},validation:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"shape",value:{variant:{name:"string",required:!1},message:{name:"node",required:!1}}},required:!1},id:{description:"",type:{name:"string"},required:!0},label:{description:"",type:{name:"string"},required:!0}}}},"./src/components/text-field/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_8___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_8__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),_elements_label__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/label/index.js"),_elements_text_input__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./src/elements/text-input/index.js"),_elements_validation__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/elements/validation/validation-input.js"),_elements_validation__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/elements/validation/validation-message.js"),_hooks__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/hooks/use-described-by.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const TextField=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({id,onChange,label,labelSuffix,disabled,readOnly,className,description,validation,...props},ref)=>{const{ids,describedBy}=(0,_hooks__WEBPACK_IMPORTED_MODULE_3__.A)(id,{validation:null==validation?void 0:validation.message,description});return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-text-field",disabled&&"yst-text-field--disabled",readOnly&&"yst-text-field--read-only",className),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:"yst-flex yst-items-center yst-mb-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_elements_label__WEBPACK_IMPORTED_MODULE_4__.A,{className:"yst-text-field__label",htmlFor:id,children:label}),labelSuffix]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_elements_validation__WEBPACK_IMPORTED_MODULE_5__.A,{as:_elements_text_input__WEBPACK_IMPORTED_MODULE_6__.A,ref,id,onChange,disabled,readOnly,className:"yst-text-field__input","aria-describedby":describedBy,validation,...props}),(null==validation?void 0:validation.message)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_elements_validation__WEBPACK_IMPORTED_MODULE_7__.A,{variant:null==validation?void 0:validation.variant,id:ids.validation,className:"yst-text-field__validation",children:validation.message}),description&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("p",{id:ids.description,className:"yst-text-field__description",children:description})]})}));TextField.displayName="TextField",TextField.propTypes={id:prop_types__WEBPACK_IMPORTED_MODULE_8___default().string.isRequired,onChange:prop_types__WEBPACK_IMPORTED_MODULE_8___default().func.isRequired,label:prop_types__WEBPACK_IMPORTED_MODULE_8___default().string.isRequired,labelSuffix:prop_types__WEBPACK_IMPORTED_MODULE_8___default().node,disabled:prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool,readOnly:prop_types__WEBPACK_IMPORTED_MODULE_8___default().bool,className:prop_types__WEBPACK_IMPORTED_MODULE_8___default().string,description:prop_types__WEBPACK_IMPORTED_MODULE_8___default().node,validation:prop_types__WEBPACK_IMPORTED_MODULE_8___default().shape({variant:prop_types__WEBPACK_IMPORTED_MODULE_8___default().string,message:prop_types__WEBPACK_IMPORTED_MODULE_8___default().node})},TextField.defaultProps={labelSuffix:null,disabled:!1,readOnly:!1,className:"",description:null,validation:{}};const __WEBPACK_DEFAULT_EXPORT__=TextField;TextField.__docgenInfo={description:"@param {string} id The ID of the input.\n@param {function} onChange The input change handler.\n@param {string} label The label.\n@param {JSX.node} [labelSuffix] Extra elements after the label.\n@param {string} [className] The HTML class.\n@param {JSX.node} [description] A description.\n@param {boolean} [disabled] The disabled state.\n@param {boolean} [readOnly] The read-only state.\n@param {Object} [validation] The validation state.\n@param {Object} [props] Any extra properties for the TextInput.\n@returns {JSX.Element} The input field.",methods:[],displayName:"TextField",props:{labelSuffix:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},readOnly:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},description:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},validation:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"shape",value:{variant:{name:"string",required:!1},message:{name:"node",required:!1}}},required:!1},id:{description:"",type:{name:"string"},required:!0},onChange:{description:"",type:{name:"func"},required:!0},label:{description:"",type:{name:"string"},required:!0}}}},"./src/elements/autocomplete/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _headlessui_react__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@headlessui/react/dist/components/combobox/combobox.js"),_headlessui_react__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("../../node_modules/@headlessui/react/dist/components/transitions/transition.js"),_heroicons_react_outline__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../../node_modules/@heroicons/react/outline/esm/XIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/CheckIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/SelectorIcon.js"),classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_7___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_7__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_hooks__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/hooks/use-svg-aria.js"),_validation__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("./src/elements/validation/validation-input.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const AutocompleteButton=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)(((props,ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_4__.G.Button,{as:"div",ref,...props})));AutocompleteButton.displayName="AutocompleteButton";const Option=({children,value})=>{const svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_5__.A)(),getClassName=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((({active,selected})=>classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-autocomplete__option",selected&&"yst-autocomplete__option--selected",active&&!selected&&"yst-autocomplete__option--active")),[]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_4__.G.Option,{className:getClassName,value,children:({selected})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-autocomplete__option-label",selected&&"yst-font-semibold"),children}),selected&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_6__.A,{className:"yst-autocomplete__option-check",...svgAriaProps})]})})};Option.displayName="Option";const optionPropType={children:prop_types__WEBPACK_IMPORTED_MODULE_7___default().node,value:prop_types__WEBPACK_IMPORTED_MODULE_7___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_7___default().string,prop_types__WEBPACK_IMPORTED_MODULE_7___default().number,prop_types__WEBPACK_IMPORTED_MODULE_7___default().bool]).isRequired};Option.propTypes=optionPropType;const ClearSelection=({onChange,svgAriaProps,screenReaderText})=>{const clear=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((e=>{e.preventDefault(),onChange(null)}),[onChange]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("button",{type:"button",className:"yst-mr-4 yst-flex yst-items-center",onClick:clear,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span",{className:"yst-sr-only",children:screenReaderText}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_heroicons_react_outline__WEBPACK_IMPORTED_MODULE_8__.A,{className:"yst-text-slate-400 yst-w-5 yst-h-5",...svgAriaProps}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("div",{className:"yst-w-2 yst-mr-2 yst-border-r-slate-200 yst-border-r yst-h-7"})]})};ClearSelection.displayName="ClearSelection",ClearSelection.propTypes={onChange:prop_types__WEBPACK_IMPORTED_MODULE_7___default().func.isRequired,svgAriaProps:prop_types__WEBPACK_IMPORTED_MODULE_7___default().object.isRequired,screenReaderText:prop_types__WEBPACK_IMPORTED_MODULE_7___default().string.isRequired};const Autocomplete=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({id,value,children,selectedLabel,label,labelProps,labelSuffix,onChange,onQueryChange,validation,placeholder,className,buttonProps,clearButtonScreenReaderText,disabled,...props},ref)=>{const getDisplayValue=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((0,lodash__WEBPACK_IMPORTED_MODULE_1__.constant)(selectedLabel),[selectedLabel]),svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_5__.A)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_headlessui_react__WEBPACK_IMPORTED_MODULE_4__.G,{ref,as:"div",value,onChange,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-autocomplete",disabled&&"yst-autocomplete--disabled",className),disabled,...props,children:[label&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-flex yst-items-center yst-mb-2",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_4__.G.Label,{...labelProps,children:label}),labelSuffix]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:"yst-relative",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_validation__WEBPACK_IMPORTED_MODULE_9__.A,{as:AutocompleteButton,"data-id":id,validation,className:"yst-autocomplete__button",...buttonProps,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_4__.G.Input,{className:"yst-autocomplete__input",autoComplete:"off",placeholder,displayValue:getDisplayValue,onChange:onQueryChange}),props.nullable&&selectedLabel&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(ClearSelection,{onChange,svgAriaProps,screenReaderText:clearButtonScreenReaderText}),!(null!=validation&&validation.message)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_10__.A,{className:"yst-autocomplete__button-icon",...svgAriaProps})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_11__.e,{as:react__WEBPACK_IMPORTED_MODULE_2__.Fragment,enter:"yst-transition yst-duration-100 yst-ease-out",enterFrom:"yst-transform yst-scale-95 yst-opacity-0",enterTo:"yst-transform yst-scale-100 yst-opacity-100",leave:"yst-transition yst-duration-75 yst-ease-out",leaveFrom:"yst-transform yst-scale-100 yst-opacity-100",leaveTo:"yst-transform yst-scale-95 yst-opacity-0",children:(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_4__.G.Options,{className:"yst-autocomplete__options",children})})]})]})})),propTypes={id:prop_types__WEBPACK_IMPORTED_MODULE_7___default().string.isRequired,value:prop_types__WEBPACK_IMPORTED_MODULE_7___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_7___default().string,prop_types__WEBPACK_IMPORTED_MODULE_7___default().number,prop_types__WEBPACK_IMPORTED_MODULE_7___default().bool]),children:prop_types__WEBPACK_IMPORTED_MODULE_7___default().node,selectedLabel:prop_types__WEBPACK_IMPORTED_MODULE_7___default().string,label:prop_types__WEBPACK_IMPORTED_MODULE_7___default().string,labelProps:prop_types__WEBPACK_IMPORTED_MODULE_7___default().object,labelSuffix:prop_types__WEBPACK_IMPORTED_MODULE_7___default().node,onChange:prop_types__WEBPACK_IMPORTED_MODULE_7___default().func.isRequired,onQueryChange:prop_types__WEBPACK_IMPORTED_MODULE_7___default().func.isRequired,validation:prop_types__WEBPACK_IMPORTED_MODULE_7___default().shape({variant:prop_types__WEBPACK_IMPORTED_MODULE_7___default().string,message:prop_types__WEBPACK_IMPORTED_MODULE_7___default().node}),placeholder:prop_types__WEBPACK_IMPORTED_MODULE_7___default().string,className:prop_types__WEBPACK_IMPORTED_MODULE_7___default().string,buttonProps:prop_types__WEBPACK_IMPORTED_MODULE_7___default().object,clearButtonScreenReaderText:prop_types__WEBPACK_IMPORTED_MODULE_7___default().string,nullable:prop_types__WEBPACK_IMPORTED_MODULE_7___default().bool,disabled:prop_types__WEBPACK_IMPORTED_MODULE_7___default().bool};Autocomplete.displayName="Autocomplete",Autocomplete.propTypes=propTypes,Autocomplete.defaultProps={children:null,value:null,selectedLabel:"",label:"",labelProps:{},labelSuffix:null,validation:{},placeholder:"",className:"",buttonProps:{},clearButtonScreenReaderText:"Clear",nullable:!1,disabled:!1},Autocomplete.Option=Option,Autocomplete.Option.displayName="Autocomplete.Option";const __WEBPACK_DEFAULT_EXPORT__=Autocomplete;Autocomplete.__docgenInfo={description:"@param {string} id Identifier.\n@param {string} value Selected value.\n@param {JSX.node} [children] Defer from the default options rendering.\n@param {string} [selectedLabel] When using children instead of options, pass the label of the selected option.\n@param {string} [label] Label.\n@param {Object} [labelProps] Extra label props.\n@param {JSX.node} [labelSuffix] Optional label suffix.\n@param {Function} onChange Change callback.\n@param {Function} onQueryChange Query change callback.\n@param {Object} [validation] The validation state.\n@param {string} [placeholder] Input placeholder.\n@param {string} [className] CSS class.\n@param {Object} [buttonProps] Any extra props for the button.\n@param {Object} [props] Any extra props.\n@returns {JSX.Element} Select component.",methods:[{name:"Option",docblock:null,modifiers:["static"],params:[{name:"{\n\tchildren,\n\tvalue,\n}",optional:!1,type:null}],returns:null}],displayName:"Autocomplete",props:{children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},value:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"union",value:[{name:"string"},{name:"number"},{name:"bool"}]},required:!1},selectedLabel:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},label:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},labelProps:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"object"},required:!1},labelSuffix:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},validation:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"shape",value:{variant:{name:"string",required:!1},message:{name:"node",required:!1}}},required:!1},placeholder:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},buttonProps:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"object"},required:!1},clearButtonScreenReaderText:{defaultValue:{value:'"Clear"',computed:!1},description:"",type:{name:"string"},required:!1},nullable:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},id:{description:"",type:{name:"string"},required:!0},onChange:{description:"",type:{name:"func"},required:!0},onQueryChange:{description:"",type:{name:"func"},required:!0}}}},"./src/elements/button/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,_:()=>classNameMap});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_spinner__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/spinner/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{primary:"yst-button--primary",secondary:"yst-button--secondary",tertiary:"yst-button--tertiary",error:"yst-button--error",upsell:"yst-button--upsell"},size:{default:"",small:"yst-button--small",large:"yst-button--large","extra-large":"yst-button--extra-large"}},Button=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({children,as:Component,type,variant,size,isLoading,disabled,className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(Component,{type:type||"button"===Component&&"button"||void 0,disabled,ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-button",classNameMap.variant[variant],classNameMap.size[size],isLoading&&"yst-cursor-wait",disabled&&"yst-button--disabled",className),...props,children:[isLoading&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_spinner__WEBPACK_IMPORTED_MODULE_4__.A,{size:"small"===size?"3":"4",className:"yst--ml-1 yst-mr-2"}),children]})));Button.displayName="Button",Button.propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_5___default().node.isRequired,as:prop_types__WEBPACK_IMPORTED_MODULE_5___default().elementType,type:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf(["button","submit","reset"]),variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.size)),isLoading:prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool,disabled:prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool,className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string},Button.defaultProps={as:"button",type:void 0,variant:"primary",size:"default",isLoading:!1,disabled:!1,className:""};const __WEBPACK_DEFAULT_EXPORT__=Button;Button.__docgenInfo={description:'@param {JSX.node} children Content of the button.\n@param {string|JSX.Element} [as="button"] Base component.\n@param {string} [type] Type attribute. Used when `as` is a `button`.\n@param {string} [variant="primary"] Button variant. See `classNameMap` for the options.\n@param {string} [size="default"] Button size. See `classNameMap` for the options.\n@param {boolean} [isLoading=false] Whether to show a spinner.\n@param {boolean} [disabled=false] Whether the button is disabled.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Button component.',methods:[],displayName:"Button",props:{as:{defaultValue:{value:'"button"',computed:!1},description:"",type:{name:"elementType"},required:!1},type:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"enum",value:[{value:'"button"',computed:!1},{value:'"submit"',computed:!1},{value:'"reset"',computed:!1}]},required:!1},variant:{defaultValue:{value:'"primary"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},isLoading:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}},"./src/elements/checkbox/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_4___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_4__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),_label__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/elements/label/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Checkbox=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({id,name,value,label,disabled,className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-checkbox",disabled&&"yst-checkbox--disabled",className),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("input",{ref,type:"checkbox",id,name,value,disabled,className:"yst-checkbox__input",...props}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_label__WEBPACK_IMPORTED_MODULE_3__.A,{htmlFor:id,className:"yst-checkbox__label",label})]})));Checkbox.displayName="Checkbox",Checkbox.propTypes={id:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string.isRequired,name:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string.isRequired,value:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string.isRequired,label:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string.isRequired,className:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string,disabled:prop_types__WEBPACK_IMPORTED_MODULE_4___default().bool},Checkbox.defaultProps={className:"",disabled:!1};const __WEBPACK_DEFAULT_EXPORT__=Checkbox;Checkbox.__docgenInfo={description:"@param {string} id Identifier.\n@param {string} name Name.\n@param {string} value Value.\n@param {string} label Label.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Checkbox component.",methods:[],displayName:"Checkbox",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},id:{description:"",type:{name:"string"},required:!0},name:{description:"",type:{name:"string"},required:!0},value:{description:"",type:{name:"string"},required:!0},label:{description:"",type:{name:"string"},required:!0}}}},"./src/elements/code/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{default:"",block:"yst-code--block"}},Code=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({children,variant="default",className="",...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("code",{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-code",classNameMap.variant[variant],className),...props,children})));Code.displayName="Code",Code.propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node.isRequired,variant:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(Object.keys(classNameMap.variant)),className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},Code.defaultProps={variant:"default",className:""};const __WEBPACK_DEFAULT_EXPORT__=Code;Code.__docgenInfo={description:"@param {JSX.node} children The content.\n@param {string} [variant] Optional variant. See `classNameMap.variant`.\n@param {string} [className] Optional extra className.\n@param {Object} [props] Optional extra props.\n@returns {JSX.Element} The Code element.",methods:[],displayName:"Code",props:{variant:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",value:[{value:'"default"',computed:!1},{value:'"block"',computed:!1}]},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}},"./src/elements/spinner/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,_:()=>classNameMap});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_5___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_5__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_hooks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/hooks/use-svg-aria.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{default:"",primary:"yst-text-primary-500",white:"yst-text-white"},size:{3:"yst-w-3 yst-h-3",4:"yst-w-4 yst-h-4",8:"yst-w-8 yst-h-8"}},Spinner=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({variant,size,className},ref)=>{const svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_4__.A)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("svg",{ref,xmlns:"http://www.w3.org/2000/svg/",fill:"none",viewBox:"0 0 24 24",className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-animate-spin",classNameMap.variant[variant],classNameMap.size[size],className),...svgAriaProps,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("circle",{className:"yst-opacity-25",cx:"12",cy:"12",r:"10",stroke:"currentColor",strokeWidth:"4"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("path",{className:"yst-opacity-75",fill:"currentColor",d:"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"})]})}));Spinner.displayName="Spinner",Spinner.propTypes={variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.size)),className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string},Spinner.defaultProps={variant:"default",size:"4",className:""};const __WEBPACK_DEFAULT_EXPORT__=Spinner;Spinner.__docgenInfo={description:"@param {string} [variant=default] The variant.\n@param {string} [size] The size.\n@param {string} [className] The HTML class.\n@returns {JSX.Element} The spinner.",methods:[],displayName:"Spinner",props:{variant:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"4"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}}},"./src/elements/tag-input/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var _heroicons_react_solid__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/XIcon.js"),classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),lodash__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_6___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_6__),react__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/index.js"),_index__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/badge/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Tag=({tag,index,disabled=!1,onRemoveTag,screenReaderRemoveTag,...props})=>{const handleKeyDown=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event=>{if(!disabled)switch(null==event?void 0:event.key){case"Delete":case"Backspace":return onRemoveTag(index),event.preventDefault(),!0}}),[index,disabled,onRemoveTag]),handleClick=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event=>{if(!disabled)return onRemoveTag(index),event.preventDefault(),!0}),[index,disabled,onRemoveTag]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(_index__WEBPACK_IMPORTED_MODULE_4__.A,{onKeyDown:handleKeyDown,...props,variant:"plain",className:"yst-tag-input__tag",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span",{className:"yst-mb-px",children:tag}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("button",{type:"button",onClick:handleClick,className:"yst-tag-input__remove-tag",children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("span",{className:"yst-sr-only",children:screenReaderRemoveTag}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_5__.A,{className:"yst-h-3 yst-w-3"})]})]})};Tag.displayName="Tag",Tag.propTypes={tag:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string.isRequired,index:prop_types__WEBPACK_IMPORTED_MODULE_6___default().number.isRequired,disabled:prop_types__WEBPACK_IMPORTED_MODULE_6___default().bool,onRemoveTag:prop_types__WEBPACK_IMPORTED_MODULE_6___default().func.isRequired,screenReaderRemoveTag:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string.isRequired};const TagInput=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({tags=[],children,className,disabled,onAddTag,onRemoveTag,onSetTags,onBlur,screenReaderRemoveTag,...props},ref)=>{const[text,setText]=(0,react__WEBPACK_IMPORTED_MODULE_2__.useState)(""),handleChange=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event=>{var _event$target;(0,lodash__WEBPACK_IMPORTED_MODULE_1__.isString)(null==event||null===(_event$target=event.target)||void 0===_event$target?void 0:_event$target.value)&&setText(event.target.value)}),[setText]),handleKeyDown=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event=>{switch(event.key){case",":case"Enter":return text.length>0&&(onAddTag(text),setText("")),event.preventDefault(),!0;case"Backspace":if(0!==text.length||0===tags.length)break;return onRemoveTag(tags.length-1),event.ctrlKey&&onSetTags([]),event.preventDefault(),!0}}),[text,tags,setText,onAddTag]),handleBlur=(0,react__WEBPACK_IMPORTED_MODULE_2__.useCallback)((event=>{text.length>0&&(onAddTag(text),setText("")),onBlur(event)}),[text,onAddTag,setText,onBlur]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-tag-input",disabled&&"yst-tag-input--disabled",className),children:[children||(0,lodash__WEBPACK_IMPORTED_MODULE_1__.map)(tags,((tag,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Tag,{tag,index,disabled,onRemoveTag,screenReaderRemoveTag},`tag-${index}`))),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)("input",{ref,type:"text",disabled,className:"yst-tag-input__input",onKeyDown:handleKeyDown,...props,onChange:handleChange,onBlur:handleBlur,value:text})]})}));TagInput.displayName="TagInput",TagInput.propTypes={tags:prop_types__WEBPACK_IMPORTED_MODULE_6___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_6___default().string),children:prop_types__WEBPACK_IMPORTED_MODULE_6___default().node,className:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string,disabled:prop_types__WEBPACK_IMPORTED_MODULE_6___default().bool,onAddTag:prop_types__WEBPACK_IMPORTED_MODULE_6___default().func,onRemoveTag:prop_types__WEBPACK_IMPORTED_MODULE_6___default().func,onSetTags:prop_types__WEBPACK_IMPORTED_MODULE_6___default().func,onBlur:prop_types__WEBPACK_IMPORTED_MODULE_6___default().func,screenReaderRemoveTag:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string},TagInput.defaultProps={tags:[],children:null,className:"",disabled:!1,onAddTag:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onRemoveTag:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onSetTags:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,onBlur:lodash__WEBPACK_IMPORTED_MODULE_1__.noop,screenReaderRemoveTag:"Remove tag"},TagInput.Tag=Tag,TagInput.Tag.displayName="TagInput.Tag";const __WEBPACK_DEFAULT_EXPORT__=TagInput;Tag.__docgenInfo={description:"@param {string} tag The tag / label.\n@param {number} index The tag index.\n@param {boolean} [disabled] Whether the component is disabled.\n@param {function} onRemoveTag Remove tag handler.\n@param {string} screenReaderRemoveTag Screen reader text for the remove tag button.\n@param {Object} [props] Extra properties.\n@returns {JSX.Element} The element.",methods:[],displayName:"Tag",props:{disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},tag:{description:"",type:{name:"string"},required:!0},index:{description:"",type:{name:"number"},required:!0},onRemoveTag:{description:"",type:{name:"func"},required:!0},screenReaderRemoveTag:{description:"",type:{name:"string"},required:!0}}},TagInput.__docgenInfo={description:"@param {string[]} [tags] The tags.\n@param {JSX.node} [children] Render tags override.\n@param {string} [className] Extra CSS class.\n@param {boolean} [disabled] Whether the input is disabled.\n@param {function} [onAddTag] Add tag handler.\n@param {function} [onRemoveTag] Remove tag handler.\n@param {function} [onSetTags] Set tag handler.\n@param {function} [onBlur] Blur handler.\n@param {string} [screenReaderRemoveTag] Screen reader text for the remove tag button.\n@param {object} [props] Extra properties.\n@returns {JSX.Element} The element.",methods:[{name:"Tag",docblock:null,modifiers:["static"],params:[{name:"{ tag, index, disabled = false, onRemoveTag, screenReaderRemoveTag, ...props }",optional:!1,type:null}],returns:null}],displayName:"TagInput",props:{tags:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"string"}},required:!1},children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},onAddTag:{defaultValue:{value:"noop",computed:!0},description:"",type:{name:"func"},required:!1},onRemoveTag:{defaultValue:{value:"noop",computed:!0},description:"",type:{name:"func"},required:!1},onSetTags:{defaultValue:{value:"noop",computed:!0},description:"",type:{name:"func"},required:!1},onBlur:{defaultValue:{value:"noop",computed:!0},description:"",type:{name:"func"},required:!1},screenReaderRemoveTag:{defaultValue:{value:'"Remove tag"',computed:!1},description:"",type:{name:"string"},required:!1}}}},"./src/elements/text-input/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const TextInput=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({type,className,disabled,readOnly,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("input",{ref,type,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-text-input",disabled&&"yst-text-input--disabled",readOnly&&"yst-text-input--read-only",className),disabled,readOnly,...props})));TextInput.displayName="TextInput",TextInput.propTypes={type:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,disabled:prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool,readOnly:prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool},TextInput.defaultProps={type:"text",className:"",disabled:!1,readOnly:!1};const __WEBPACK_DEFAULT_EXPORT__=TextInput;TextInput.__docgenInfo={description:'@param {string} [type="text"] The type of input.\n@param {string} [className=""] CSS class.\n@param {boolean} [disabled=false] Whether the input is disabled.\n@param {boolean} [readOnly=false] Whether the input is read-only.\n@param {object} [props] Optional extra properties.\n@returns {JSX.Element} TextInput component.',methods:[],displayName:"TextInput",props:{type:{defaultValue:{value:'"text"',computed:!1},description:"",type:{name:"string"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},readOnly:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1}}}},"./src/elements/title/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__,_:()=>classNameMap});var classnames__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("./node_modules/classnames/index.js"),classnames__WEBPACK_IMPORTED_MODULE_0___default=__webpack_require__.n(classnames__WEBPACK_IMPORTED_MODULE_0__),prop_types__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./node_modules/prop-types/index.js"),prop_types__WEBPACK_IMPORTED_MODULE_3___default=__webpack_require__.n(prop_types__WEBPACK_IMPORTED_MODULE_3__),react__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/react/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={size:{1:"yst-title--1",2:"yst-title--2",3:"yst-title--3",4:"yst-title--4",5:"yst-title--5"}},Title=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({children,as:Component,size,className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-title",classNameMap.size[size||Component[1]],className),...props,children})));Title.displayName="Title",Title.propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node.isRequired,as:prop_types__WEBPACK_IMPORTED_MODULE_3___default().elementType,size:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOf(Object.keys(classNameMap.size)),className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},Title.defaultProps={as:"h1",size:void 0,className:""};const __WEBPACK_DEFAULT_EXPORT__=Title;Title.__docgenInfo={description:"@param {Object} props Props object.\n@returns {JSX.Element} Title component.",methods:[],displayName:"Title",props:{as:{defaultValue:{value:'"h1"',computed:!1},description:"",type:{name:"elementType"},required:!1},size:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"enum",value:[{value:'"1"',computed:!1},{value:'"2"',computed:!1},{value:'"3"',computed:!1},{value:'"4"',computed:!1},{value:'"5"',computed:!1}]},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}}}]);