8913.72939ad8.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[8913],{"./src/elements/label/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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 Label=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({as:Component,className,label,children,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-label",className),...props,children:label||children||null})));Label.displayName="Label",Label.propTypes={label:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,as:prop_types__WEBPACK_IMPORTED_MODULE_3___default().elementType,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string},Label.defaultProps={label:"",children:"",as:"label",className:""};const __WEBPACK_DEFAULT_EXPORT__=Label;Label.__docgenInfo={description:"@param {string} label Content of the Label. Note that this is a string ONLY for a11y reasons.\n@param {string} children Alternative to the label. See label.\n@param {string|JSX.node} [as] Base component.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Label component.",methods:[],displayName:"Label",props:{label:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},as:{defaultValue:{value:'"label"',computed:!1},description:"",type:{name:"elementType"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}}},"./src/elements/select/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>elements_select});var n,o,react=__webpack_require__("../../node_modules/react/index.js"),use_disposables=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-disposables.js"),use_id=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-id.js"),use_iso_morphic_effect=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js"),use_computed=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-computed.js"),use_sync_refs=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-sync-refs.js"),render=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/render.js"),match=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/match.js"),disposables=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/disposables.js"),keyboard=__webpack_require__("../../node_modules/@headlessui/react/dist/components/keyboard.js"),calculate_active_index=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/calculate-active-index.js"),bugs=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/bugs.js"),focus_management=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/focus-management.js"),open_closed=__webpack_require__("../../node_modules/@headlessui/react/dist/internal/open-closed.js"),use_resolve_button_type=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-resolve-button-type.js"),use_outside_click=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-outside-click.js"),internal_hidden=__webpack_require__("../../node_modules/@headlessui/react/dist/internal/hidden.js"),utils_form=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/form.js"),owner=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/owner.js"),use_event=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-event.js"),use_controllable=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-controllable.js"),use_latest_value=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-latest-value.js"),use_tracked_pointer=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-tracked-pointer.js"),Ue=((o=Ue||{})[o.Open=0]="Open",o[o.Closed=1]="Closed",o),Be=(o=>(o[o.Single=0]="Single",o[o.Multi=1]="Multi",o))(Be||{}),He=(o=>(o[o.Pointer=0]="Pointer",o[o.Other=1]="Other",o))(He||{}),Ge=((n=Ge||{})[n.OpenListbox=0]="OpenListbox",n[n.CloseListbox=1]="CloseListbox",n[n.GoToOption=2]="GoToOption",n[n.Search=3]="Search",n[n.ClearSearch=4]="ClearSearch",n[n.RegisterOption=5]="RegisterOption",n[n.UnregisterOption=6]="UnregisterOption",n[n.RegisterLabel=7]="RegisterLabel",n);function q(e,r=(o=>o)){let o=null!==e.activeOptionIndex?e.options[e.activeOptionIndex]:null,p=(0,focus_management.wl)(r(e.options.slice()),(c=>c.dataRef.current.domRef.current)),i=o?p.indexOf(o):null;return-1===i&&(i=null),{options:p,activeOptionIndex:i}}let je={1:e=>e.dataRef.current.disabled||1===e.listboxState?e:{...e,activeOptionIndex:null,listboxState:1},0(e){if(e.dataRef.current.disabled||0===e.listboxState)return e;let r=e.activeOptionIndex,{isSelected:o}=e.dataRef.current,p=e.options.findIndex((i=>o(i.dataRef.current.value)));return-1!==p&&(r=p),{...e,listboxState:0,activeOptionIndex:r}},2(e,r){var i;if(e.dataRef.current.disabled||1===e.listboxState)return e;let o=q(e),p=(0,calculate_active_index.X)(r,{resolveItems:()=>o.options,resolveActiveIndex:()=>o.activeOptionIndex,resolveId:c=>c.id,resolveDisabled:c=>c.dataRef.current.disabled});return{...e,...o,searchQuery:"",activeOptionIndex:p,activationTrigger:null!=(i=r.trigger)?i:1}},3:(e,r)=>{if(e.dataRef.current.disabled||1===e.listboxState)return e;let p=""!==e.searchQuery?0:1,i=e.searchQuery+r.value.toLowerCase(),t=(null!==e.activeOptionIndex?e.options.slice(e.activeOptionIndex+p).concat(e.options.slice(0,e.activeOptionIndex+p)):e.options).find((n=>{var T;return!n.dataRef.current.disabled&&(null==(T=n.dataRef.current.textValue)?void 0:T.startsWith(i))})),u=t?e.options.indexOf(t):-1;return-1===u||u===e.activeOptionIndex?{...e,searchQuery:i}:{...e,searchQuery:i,activeOptionIndex:u,activationTrigger:1}},4:e=>e.dataRef.current.disabled||1===e.listboxState||""===e.searchQuery?e:{...e,searchQuery:""},5:(e,r)=>{let o={id:r.id,dataRef:r.dataRef},p=q(e,(i=>[...i,o]));return null===e.activeOptionIndex&&e.dataRef.current.isSelected(r.dataRef.current.value)&&(p.activeOptionIndex=p.options.indexOf(o)),{...e,...p}},6:(e,r)=>{let o=q(e,(p=>{let i=p.findIndex((c=>c.id===r.id));return-1!==i&&p.splice(i,1),p}));return{...e,...o,activationTrigger:1}},7:(e,r)=>({...e,labelId:r.id})},X=(0,react.createContext)(null);function B(e){let r=(0,react.useContext)(X);if(null===r){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,B),o}return r}X.displayName="ListboxActionsContext";let J=(0,react.createContext)(null);function H(e){let r=(0,react.useContext)(J);if(null===r){let o=new Error(`<${e} /> is missing a parent <Listbox /> component.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,H),o}return r}function Ke(e,r){return(0,match.Y)(r.type,je,e,r)}J.displayName="ListboxDataContext";let Ve=react.Fragment,Ne=(0,render.FX)((function(r,o){let{value:p,defaultValue:i,name:c,onChange:t,by:u=((l,f)=>l===f),disabled:n=!1,horizontal:T=!1,multiple:g=!1,...A}=r;const m=T?"horizontal":"vertical";let P=(0,use_sync_refs.P)(o),[y=(g?[]:void 0),S]=(0,use_controllable.P)(p,t,i),[h,s]=(0,react.useReducer)(Ke,{dataRef:(0,react.createRef)(),listboxState:1,options:[],searchQuery:"",labelId:null,activeOptionIndex:null,activationTrigger:1}),a=(0,react.useRef)({static:!1,hold:!1}),x=(0,react.useRef)(null),D=(0,react.useRef)(null),Q=(0,react.useRef)(null),M=(0,use_event._)("string"==typeof u?(l,f)=>{let v=u;return(null==l?void 0:l[v])===(null==f?void 0:f[v])}:u),L=(0,react.useCallback)((l=>(0,match.Y)(d.mode,{1:()=>y.some((f=>M(f,l))),0:()=>M(y,l)})),[y]),d=(0,react.useMemo)((()=>({...h,value:y,disabled:n,mode:g?1:0,orientation:m,compare:M,isSelected:L,optionsPropsRef:a,labelRef:x,buttonRef:D,optionsRef:Q})),[y,n,g,h]);(0,use_iso_morphic_effect.s)((()=>{h.dataRef.current=d}),[d]),(0,use_outside_click.j)([d.buttonRef,d.optionsRef],((l,f)=>{var v;s({type:1}),(0,focus_management.Bm)(f,focus_management.MZ.Loose)||(l.preventDefault(),null==(v=d.buttonRef.current)||v.focus())}),0===d.listboxState);let G=(0,react.useMemo)((()=>({open:0===d.listboxState,disabled:n,value:y})),[d,n,y]),ie=(0,use_event._)((l=>{let f=d.options.find((v=>v.id===l));!f||k(f.dataRef.current.value)})),re=(0,use_event._)((()=>{if(null!==d.activeOptionIndex){let{dataRef:l,id:f}=d.options[d.activeOptionIndex];k(l.current.value),s({type:2,focus:calculate_active_index.B.Specific,id:f})}})),ae=(0,use_event._)((()=>s({type:0}))),le=(0,use_event._)((()=>s({type:1}))),se=(0,use_event._)(((l,f,v)=>l===calculate_active_index.B.Specific?s({type:2,focus:calculate_active_index.B.Specific,id:f,trigger:v}):s({type:2,focus:l,trigger:v}))),ue=(0,use_event._)(((l,f)=>(s({type:5,id:l,dataRef:f}),()=>s({type:6,id:l})))),pe=(0,use_event._)((l=>(s({type:7,id:l}),()=>s({type:7,id:null})))),k=(0,use_event._)((l=>(0,match.Y)(d.mode,{0:()=>null==S?void 0:S(l),1(){let f=d.value.slice(),v=f.findIndex((w=>M(w,l)));return-1===v?f.push(l):f.splice(v,1),null==S?void 0:S(f)}}))),de=(0,use_event._)((l=>s({type:3,value:l}))),ce=(0,use_event._)((()=>s({type:4}))),fe=(0,react.useMemo)((()=>({onChange:k,registerOption:ue,registerLabel:pe,goToOption:se,closeListbox:le,openListbox:ae,selectActiveOption:re,selectOption:ie,search:de,clearSearch:ce})),[]),be={ref:P},j=(0,react.useRef)(null),Te=(0,use_disposables.L)();return(0,react.useEffect)((()=>{!j.current||void 0!==i&&Te.addEventListener(j.current,"reset",(()=>{k(i)}))}),[j,k]),react.createElement(X.Provider,{value:fe},react.createElement(J.Provider,{value:d},react.createElement(open_closed.El,{value:(0,match.Y)(d.listboxState,{0:open_closed.Uw.Open,1:open_closed.Uw.Closed})},null!=c&&null!=y&&(0,utils_form.h)({[c]:y}).map((([l,f],v)=>react.createElement(internal_hidden.j,{features:internal_hidden.O.Hidden,ref:0===v?w=>{var Y;j.current=null!=(Y=null==w?void 0:w.closest("form"))?Y:null}:void 0,...(0,render.oE)({key:l,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:l,value:f})}))),(0,render.XX)({ourProps:be,theirProps:A,slot:G,defaultTag:Ve,name:"Listbox"}))))})),Qe=(0,render.FX)((function(r,o){var h;let p=(0,use_id.B)(),{id:i=`headlessui-listbox-button-${p}`,...c}=r,t=H("Listbox.Button"),u=B("Listbox.Button"),n=(0,use_sync_refs.P)(t.buttonRef,o),T=(0,use_disposables.L)(),g=(0,use_event._)((s=>{switch(s.key){case keyboard.D.Space:case keyboard.D.Enter:case keyboard.D.ArrowDown:s.preventDefault(),u.openListbox(),T.nextFrame((()=>{t.value||u.goToOption(calculate_active_index.B.First)}));break;case keyboard.D.ArrowUp:s.preventDefault(),u.openListbox(),T.nextFrame((()=>{t.value||u.goToOption(calculate_active_index.B.Last)}))}})),A=(0,use_event._)((s=>{if(s.key===keyboard.D.Space)s.preventDefault()})),m=(0,use_event._)((s=>{if((0,bugs.l)(s.currentTarget))return s.preventDefault();0===t.listboxState?(u.closeListbox(),T.nextFrame((()=>{var a;return null==(a=t.buttonRef.current)?void 0:a.focus({preventScroll:!0})}))):(s.preventDefault(),u.openListbox())})),P=(0,use_computed.H)((()=>{if(t.labelId)return[t.labelId,i].join(" ")}),[t.labelId,i]),y=(0,react.useMemo)((()=>({open:0===t.listboxState,disabled:t.disabled,value:t.value})),[t]),S={ref:n,id:i,type:(0,use_resolve_button_type.c)(r,t.buttonRef),"aria-haspopup":"listbox","aria-controls":null==(h=t.optionsRef.current)?void 0:h.id,"aria-expanded":t.disabled?void 0:0===t.listboxState,"aria-labelledby":P,disabled:t.disabled,onKeyDown:g,onKeyUp:A,onClick:m};return(0,render.XX)({ourProps:S,theirProps:c,slot:y,defaultTag:"button",name:"Listbox.Button"})})),ze=(0,render.FX)((function(r,o){let p=(0,use_id.B)(),{id:i=`headlessui-listbox-label-${p}`,...c}=r,t=H("Listbox.Label"),u=B("Listbox.Label"),n=(0,use_sync_refs.P)(t.labelRef,o);(0,use_iso_morphic_effect.s)((()=>u.registerLabel(i)),[i]);let T=(0,use_event._)((()=>{var m;return null==(m=t.buttonRef.current)?void 0:m.focus({preventScroll:!0})})),g=(0,react.useMemo)((()=>({open:0===t.listboxState,disabled:t.disabled})),[t]);return(0,render.XX)({ourProps:{ref:n,id:i,onClick:T},theirProps:c,slot:g,defaultTag:"label",name:"Listbox.Label"})})),Xe=render.O5.RenderStrategy|render.O5.Static,Je=(0,render.FX)((function(r,o){var s;let p=(0,use_id.B)(),{id:i=`headlessui-listbox-options-${p}`,...c}=r,t=H("Listbox.Options"),u=B("Listbox.Options"),n=(0,use_sync_refs.P)(t.optionsRef,o),T=(0,use_disposables.L)(),g=(0,use_disposables.L)(),A=(0,open_closed.O_)(),m=null!==A?A===open_closed.Uw.Open:0===t.listboxState;(0,react.useEffect)((()=>{var x;let a=t.optionsRef.current;!a||0===t.listboxState&&a!==(null==(x=(0,owner.T)(a))?void 0:x.activeElement)&&a.focus({preventScroll:!0})}),[t.listboxState,t.optionsRef]);let P=(0,use_event._)((a=>{switch(g.dispose(),a.key){case keyboard.D.Space:if(""!==t.searchQuery)return a.preventDefault(),a.stopPropagation(),u.search(a.key);case keyboard.D.Enter:if(a.preventDefault(),a.stopPropagation(),null!==t.activeOptionIndex){let{dataRef:x}=t.options[t.activeOptionIndex];u.onChange(x.current.value)}0===t.mode&&(u.closeListbox(),(0,disposables.e)().nextFrame((()=>{var x;return null==(x=t.buttonRef.current)?void 0:x.focus({preventScroll:!0})})));break;case(0,match.Y)(t.orientation,{vertical:keyboard.D.ArrowDown,horizontal:keyboard.D.ArrowRight}):return a.preventDefault(),a.stopPropagation(),u.goToOption(calculate_active_index.B.Next);case(0,match.Y)(t.orientation,{vertical:keyboard.D.ArrowUp,horizontal:keyboard.D.ArrowLeft}):return a.preventDefault(),a.stopPropagation(),u.goToOption(calculate_active_index.B.Previous);case keyboard.D.Home:case keyboard.D.PageUp:return a.preventDefault(),a.stopPropagation(),u.goToOption(calculate_active_index.B.First);case keyboard.D.End:case keyboard.D.PageDown:return a.preventDefault(),a.stopPropagation(),u.goToOption(calculate_active_index.B.Last);case keyboard.D.Escape:return a.preventDefault(),a.stopPropagation(),u.closeListbox(),T.nextFrame((()=>{var x;return null==(x=t.buttonRef.current)?void 0:x.focus({preventScroll:!0})}));case keyboard.D.Tab:a.preventDefault(),a.stopPropagation();break;default:1===a.key.length&&(u.search(a.key),g.setTimeout((()=>u.clearSearch()),350))}})),y=(0,use_computed.H)((()=>{var a,x,D;return null!=(D=null==(a=t.labelRef.current)?void 0:a.id)?D:null==(x=t.buttonRef.current)?void 0:x.id}),[t.labelRef.current,t.buttonRef.current]),S=(0,react.useMemo)((()=>({open:0===t.listboxState})),[t]),h={"aria-activedescendant":null===t.activeOptionIndex||null==(s=t.options[t.activeOptionIndex])?void 0:s.id,"aria-multiselectable":1===t.mode||void 0,"aria-labelledby":y,"aria-orientation":t.orientation,id:i,onKeyDown:P,role:"listbox",tabIndex:0,ref:n};return(0,render.XX)({ourProps:h,theirProps:c,slot:S,defaultTag:"ul",features:Xe,visible:m,name:"Listbox.Options"})})),Ze=(0,render.FX)((function(r,o){let p=(0,use_id.B)(),{id:i=`headlessui-listbox-option-${p}`,disabled:c=!1,value:t,...u}=r,n=H("Listbox.Option"),T=B("Listbox.Option"),g=null!==n.activeOptionIndex&&n.options[n.activeOptionIndex].id===i,A=n.isSelected(t),m=(0,react.useRef)(null),P=(0,use_latest_value.Y)({disabled:c,value:t,domRef:m,get textValue(){var L,d;return null==(d=null==(L=m.current)?void 0:L.textContent)?void 0:d.toLowerCase()}}),y=(0,use_sync_refs.P)(o,m);(0,use_iso_morphic_effect.s)((()=>{if(0!==n.listboxState||!g||0===n.activationTrigger)return;let L=(0,disposables.e)();return L.requestAnimationFrame((()=>{var d,G;null==(G=null==(d=m.current)?void 0:d.scrollIntoView)||G.call(d,{block:"nearest"})})),L.dispose}),[m,g,n.listboxState,n.activationTrigger,n.activeOptionIndex]),(0,use_iso_morphic_effect.s)((()=>T.registerOption(i,P)),[P,i]);let S=(0,use_event._)((L=>{if(c)return L.preventDefault();T.onChange(t),0===n.mode&&(T.closeListbox(),(0,disposables.e)().nextFrame((()=>{var d;return null==(d=n.buttonRef.current)?void 0:d.focus({preventScroll:!0})})))})),h=(0,use_event._)((()=>{if(c)return T.goToOption(calculate_active_index.B.Nothing);T.goToOption(calculate_active_index.B.Specific,i)})),s=(0,use_tracked_pointer.J)(),a=(0,use_event._)((L=>s.update(L))),x=(0,use_event._)((L=>{!s.wasMoved(L)||c||g||T.goToOption(calculate_active_index.B.Specific,i,0)})),D=(0,use_event._)((L=>{!s.wasMoved(L)||c||!g||T.goToOption(calculate_active_index.B.Nothing)})),Q=(0,react.useMemo)((()=>({active:g,selected:A,disabled:c})),[g,A,c]);return(0,render.XX)({ourProps:{id:i,ref:y,role:"option",tabIndex:!0===c?void 0:-1,"aria-disabled":!0===c||void 0,"aria-selected":A,disabled:void 0,onClick:S,onFocus:h,onPointerEnter:a,onMouseEnter:a,onPointerMove:x,onMouseMove:x,onPointerLeave:D,onMouseLeave:D},theirProps:u,slot:Q,defaultTag:"li",name:"Listbox.Option"})})),Mt=Object.assign(Ne,{Button:Qe,Label:ze,Options:Je,Option:Ze});var transition=__webpack_require__("../../node_modules/@headlessui/react/dist/components/transitions/transition.js"),CheckIcon=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/CheckIcon.js"),SelectorIcon=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/SelectorIcon.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),use_svg_aria=__webpack_require__("./src/hooks/use-svg-aria.js"),elements_label=__webpack_require__("./src/elements/label/index.js"),validation_input=__webpack_require__("./src/elements/validation/validation-input.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const optionPropType={value:prop_types_default().oneOfType([prop_types_default().string,prop_types_default().number,prop_types_default().bool]).isRequired,label:prop_types_default().string.isRequired},Option=({value,label})=>{const svgAriaProps=(0,use_svg_aria.A)(),getClassName=(0,react.useCallback)((({active,selected})=>classnames_default()("yst-select__option",active&&"yst-select__option--active",selected&&"yst-select__option--selected")),[]);return(0,jsx_runtime.jsx)(Mt.Option,{value,className:getClassName,children:({selected})=>(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("span",{className:classnames_default()("yst-select__option-label",selected&&"yst-font-semibold"),children:label}),selected&&(0,jsx_runtime.jsx)(CheckIcon.A,{className:"yst-select__option-check",...svgAriaProps})]})})};Option.displayName="Option",Option.propTypes=optionPropType;const Select=(0,react.forwardRef)((({id,value,options,children,selectedLabel,label,labelProps,labelSuffix,onChange,disabled,validation,className,buttonProps,...props},ref)=>{const selectedOption=(0,react.useMemo)((()=>options.find((option=>value===(null==option?void 0:option.value)))||options[0]),[value,options]),svgAriaProps=(0,use_svg_aria.A)();return(0,jsx_runtime.jsxs)(Mt,{ref,as:"div",value,onChange,disabled,className:classnames_default()("yst-select",disabled&&"yst-select--disabled",className),...props,children:[label&&(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-items-center yst-mb-2",children:[(0,jsx_runtime.jsx)(Mt.Label,{as:elements_label.A,...labelProps,children:label}),labelSuffix]}),(0,jsx_runtime.jsxs)(validation_input.A,{as:Mt.Button,"data-id":id,className:"yst-select__button",validation,...buttonProps,children:[(0,jsx_runtime.jsx)("span",{className:"yst-select__button-label",children:selectedLabel||(null==selectedOption?void 0:selectedOption.label)||""}),!(null!=validation&&validation.message)&&(0,jsx_runtime.jsx)(SelectorIcon.A,{className:"yst-select__button-icon",...svgAriaProps})]}),(0,jsx_runtime.jsx)(transition.e,{as:react.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,jsx_runtime.jsx)(Mt.Options,{className:"yst-select__options",children:children||options.map((option=>(0,jsx_runtime.jsx)(Option,{...option},option.value)))})})]})}));Select.displayName="Select",Select.propTypes={id:prop_types_default().string.isRequired,value:prop_types_default().oneOfType([prop_types_default().string,prop_types_default().number,prop_types_default().bool]).isRequired,options:prop_types_default().arrayOf(prop_types_default().shape(optionPropType)),children:prop_types_default().node,selectedLabel:prop_types_default().string,label:prop_types_default().string,labelProps:prop_types_default().object,labelSuffix:prop_types_default().node,onChange:prop_types_default().func.isRequired,disabled:prop_types_default().bool,validation:prop_types_default().shape({variant:prop_types_default().string,message:prop_types_default().node}),className:prop_types_default().string,buttonProps:prop_types_default().object},Select.defaultProps={options:[],children:null,selectedLabel:"",label:"",labelProps:{},labelSuffix:null,disabled:!1,validation:{},className:"",buttonProps:{}},Select.Option=Option,Select.Option.displayName="Select.Option";const elements_select=Select;Select.__docgenInfo={description:"@param {string} id Identifier.\n@param {string} value Selected value.\n@param {{ value, label }[]} [options] Options to choose from.\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 {boolean} [disabled] Disabled state.\n@param {Object} [validation] The validation state.\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:"{ value, label }",optional:!1,type:null}],returns:null}],displayName:"Select",props:{options:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"shape",value:{value:{name:"union",value:[{name:"string"},{name:"number"},{name:"bool"}],required:!0},label:{name:"string",required:!0}}}},required:!1},children:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"node"},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},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},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},buttonProps:{defaultValue:{value:"{}",computed:!1},description:"",type:{name:"object"},required:!1},id:{description:"",type:{name:"string"},required:!0},value:{description:"",type:{name:"union",value:[{name:"string"},{name:"number"},{name:"bool"}]},required:!0},onChange:{description:"",type:{name:"func"},required:!0}}}},"./src/elements/validation/constants.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{B:()=>VALIDATION_ICON_MAP,U:()=>VALIDATION_VARIANTS});var _heroicons_react_solid__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/CheckCircleIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/ExclamationIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/InformationCircleIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/ExclamationCircleIcon.js");const VALIDATION_VARIANTS={success:"success",warning:"warning",info:"info",error:"error"},VALIDATION_ICON_MAP={success:_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_0__.A,warning:_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_1__.A,info:_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_2__.A,error:_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_3__.A}},"./src/elements/validation/validation-icon.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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__),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"),_hooks__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("./src/hooks/use-svg-aria.js"),_constants__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/validation/constants.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const CLASSNAME_MAP={variant:{success:"yst-validation-icon--success",warning:"yst-validation-icon--warning",info:"yst-validation-icon--info",error:"yst-validation-icon--error"}},ValidationIcon=({variant="info",className="",...props})=>{const Component=(0,react__WEBPACK_IMPORTED_MODULE_2__.useMemo)((()=>_constants__WEBPACK_IMPORTED_MODULE_4__.B[variant]),[variant]),svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_5__.A)();return Component?(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(Component,{...svgAriaProps,...props,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-validation-icon",CLASSNAME_MAP.variant[variant],className)}):null};ValidationIcon.propTypes={variant:prop_types__WEBPACK_IMPORTED_MODULE_6___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.values)(_constants__WEBPACK_IMPORTED_MODULE_4__.U)),className:prop_types__WEBPACK_IMPORTED_MODULE_6___default().string};const __WEBPACK_DEFAULT_EXPORT__=ValidationIcon;ValidationIcon.__docgenInfo={description:"@param {string} variant The variant to render.\n@param {string} className The classname.\n@param {Object} [props] Any extra props.\n@returns {JSX.Element} The ValidationIcon component.",methods:[],displayName:"ValidationIcon",props:{variant:{defaultValue:{value:'"info"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"values( VALIDATION_VARIANTS )"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}}},"./src/elements/validation/validation-input.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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"),_validation_icon__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("./src/elements/validation/validation-icon.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const CLASSNAME_MAP={variant:{success:"yst-validation-input--success",warning:"yst-validation-input--warning",info:"yst-validation-input--info",error:"yst-validation-input--error"}},ValidationInput=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({as:Component,validation={},className="",...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)("div",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-validation-input",(null==validation?void 0:validation.message)&&CLASSNAME_MAP.variant[null==validation?void 0:validation.variant]),children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Component,{ref,...props,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-validation-input__input",className)}),(null==validation?void 0:validation.message)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_validation_icon__WEBPACK_IMPORTED_MODULE_3__.A,{variant:null==validation?void 0:validation.variant,className:"yst-validation-input__icon"})]})));ValidationInput.displayName="ValidationInput",ValidationInput.propTypes={as:prop_types__WEBPACK_IMPORTED_MODULE_4___default().elementType.isRequired,validation:prop_types__WEBPACK_IMPORTED_MODULE_4___default().shape({variant:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string,message:prop_types__WEBPACK_IMPORTED_MODULE_4___default().node}),className:prop_types__WEBPACK_IMPORTED_MODULE_4___default().string},ValidationInput.defaultProps={validation:{},className:""};const __WEBPACK_DEFAULT_EXPORT__=ValidationInput;ValidationInput.__docgenInfo={description:"@param {string} variant The variant to render.\n@param {Object} [validation] The validation state.\n@param {string} [className] The classname.\n@returns {JSX.Element} The ValidationInput component.",methods:[],displayName:"ValidationInput",props:{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},as:{description:"",type:{name:"elementType"},required:!0}}}},"./src/hooks/use-svg-aria.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{A:()=>__WEBPACK_DEFAULT_EXPORT__});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");const __WEBPACK_DEFAULT_EXPORT__=(isFocusable=null)=>(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>{const aria={role:"img","aria-hidden":"true"};return null!==isFocusable&&(aria.focusable=isFocusable?"true":"false"),aria}),[isFocusable])},"../../node_modules/memoizerific sync recursive":module=>{function webpackEmptyContext(req){var e=new Error("Cannot find module '"+req+"'");throw e.code="MODULE_NOT_FOUND",e}webpackEmptyContext.keys=()=>[],webpackEmptyContext.resolve=webpackEmptyContext,webpackEmptyContext.id="../../node_modules/memoizerific sync recursive",module.exports=webpackEmptyContext}}]);