elements-select-stories.545c3f34.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[8901],{"../../node_modules/@headlessui/react/dist/components/listbox/listbox.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{W:()=>Mt});var n,o,react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-disposables.js"),_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-id.js"),_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js"),_hooks_use_computed_js__WEBPACK_IMPORTED_MODULE_17__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-computed.js"),_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-sync-refs.js"),_utils_render_js__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/render.js"),_utils_match_js__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/match.js"),_utils_disposables_js__WEBPACK_IMPORTED_MODULE_20__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/disposables.js"),_keyboard_js__WEBPACK_IMPORTED_MODULE_15__=__webpack_require__("../../node_modules/@headlessui/react/dist/components/keyboard.js"),_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/calculate-active-index.js"),_utils_bugs_js__WEBPACK_IMPORTED_MODULE_16__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/bugs.js"),_utils_focus_management_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/focus-management.js"),_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__=__webpack_require__("../../node_modules/@headlessui/react/dist/internal/open-closed.js"),_hooks_use_resolve_button_type_js__WEBPACK_IMPORTED_MODULE_18__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-resolve-button-type.js"),_hooks_use_outside_click_js__WEBPACK_IMPORTED_MODULE_9__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-outside-click.js"),_internal_hidden_js__WEBPACK_IMPORTED_MODULE_13__=__webpack_require__("../../node_modules/@headlessui/react/dist/internal/hidden.js"),_utils_form_js__WEBPACK_IMPORTED_MODULE_12__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/form.js"),_utils_owner_js__WEBPACK_IMPORTED_MODULE_19__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/owner.js"),_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-event.js"),_hooks_use_controllable_js__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-controllable.js"),_hooks_use_latest_value_js__WEBPACK_IMPORTED_MODULE_21__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-latest-value.js"),_hooks_use_tracked_pointer_js__WEBPACK_IMPORTED_MODULE_22__=__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,_utils_focus_management_js__WEBPACK_IMPORTED_MODULE_1__.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,_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.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__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);function B(e){let r=(0,react__WEBPACK_IMPORTED_MODULE_0__.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__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);function H(e){let r=(0,react__WEBPACK_IMPORTED_MODULE_0__.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,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(r.type,je,e,r)}J.displayName="ListboxDataContext";let Ve=react__WEBPACK_IMPORTED_MODULE_0__.Fragment,Ne=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.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,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(o),[y=(g?[]:void 0),S]=(0,_hooks_use_controllable_js__WEBPACK_IMPORTED_MODULE_6__.P)(p,t,i),[h,s]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useReducer)(Ke,{dataRef:(0,react__WEBPACK_IMPORTED_MODULE_0__.createRef)(),listboxState:1,options:[],searchQuery:"",labelId:null,activeOptionIndex:null,activationTrigger:1}),a=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)({static:!1,hold:!1}),x=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),D=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),Q=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),M=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)("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__WEBPACK_IMPORTED_MODULE_0__.useCallback)((l=>(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(d.mode,{1:()=>y.some((f=>M(f,l))),0:()=>M(y,l)})),[y]),d=(0,react__WEBPACK_IMPORTED_MODULE_0__.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,_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__.s)((()=>{h.dataRef.current=d}),[d]),(0,_hooks_use_outside_click_js__WEBPACK_IMPORTED_MODULE_9__.j)([d.buttonRef,d.optionsRef],((l,f)=>{var v;s({type:1}),(0,_utils_focus_management_js__WEBPACK_IMPORTED_MODULE_1__.Bm)(f,_utils_focus_management_js__WEBPACK_IMPORTED_MODULE_1__.MZ.Loose)||(l.preventDefault(),null==(v=d.buttonRef.current)||v.focus())}),0===d.listboxState);let G=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({open:0===d.listboxState,disabled:n,value:y})),[d,n,y]),ie=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((l=>{let f=d.options.find((v=>v.id===l));!f||k(f.dataRef.current.value)})),re=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>{if(null!==d.activeOptionIndex){let{dataRef:l,id:f}=d.options[d.activeOptionIndex];k(l.current.value),s({type:2,focus:_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific,id:f})}})),ae=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>s({type:0}))),le=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>s({type:1}))),se=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)(((l,f,v)=>l===_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific?s({type:2,focus:_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific,id:f,trigger:v}):s({type:2,focus:l,trigger:v}))),ue=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)(((l,f)=>(s({type:5,id:l,dataRef:f}),()=>s({type:6,id:l})))),pe=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((l=>(s({type:7,id:l}),()=>s({type:7,id:null})))),k=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((l=>(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.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,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((l=>s({type:3,value:l}))),ce=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>s({type:4}))),fe=(0,react__WEBPACK_IMPORTED_MODULE_0__.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__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),Te=(0,_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__.L)();return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{!j.current||void 0!==i&&Te.addEventListener(j.current,"reset",(()=>{k(i)}))}),[j,k]),react__WEBPACK_IMPORTED_MODULE_0__.createElement(X.Provider,{value:fe},react__WEBPACK_IMPORTED_MODULE_0__.createElement(J.Provider,{value:d},react__WEBPACK_IMPORTED_MODULE_0__.createElement(_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.El,{value:(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(d.listboxState,{0:_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.Uw.Open,1:_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.Uw.Closed})},null!=c&&null!=y&&(0,_utils_form_js__WEBPACK_IMPORTED_MODULE_12__.h)({[c]:y}).map((([l,f],v)=>react__WEBPACK_IMPORTED_MODULE_0__.createElement(_internal_hidden_js__WEBPACK_IMPORTED_MODULE_13__.j,{features:_internal_hidden_js__WEBPACK_IMPORTED_MODULE_13__.O.Hidden,ref:0===v?w=>{var Y;j.current=null!=(Y=null==w?void 0:w.closest("form"))?Y:null}:void 0,...(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.oE)({key:l,as:"input",type:"hidden",hidden:!0,readOnly:!0,name:l,value:f})}))),(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:be,theirProps:A,slot:G,defaultTag:Ve,name:"Listbox"}))))})),Qe=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){var h;let p=(0,_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__.B)(),{id:i=`headlessui-listbox-button-${p}`,...c}=r,t=H("Listbox.Button"),u=B("Listbox.Button"),n=(0,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(t.buttonRef,o),T=(0,_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__.L)(),g=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((s=>{switch(s.key){case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Space:case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Enter:case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowDown:s.preventDefault(),u.openListbox(),T.nextFrame((()=>{t.value||u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.First)}));break;case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowUp:s.preventDefault(),u.openListbox(),T.nextFrame((()=>{t.value||u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Last)}))}})),A=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((s=>{if(s.key===_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Space)s.preventDefault()})),m=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((s=>{if((0,_utils_bugs_js__WEBPACK_IMPORTED_MODULE_16__.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,_hooks_use_computed_js__WEBPACK_IMPORTED_MODULE_17__.H)((()=>{if(t.labelId)return[t.labelId,i].join(" ")}),[t.labelId,i]),y=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({open:0===t.listboxState,disabled:t.disabled,value:t.value})),[t]),S={ref:n,id:i,type:(0,_hooks_use_resolve_button_type_js__WEBPACK_IMPORTED_MODULE_18__.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,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:S,theirProps:c,slot:y,defaultTag:"button",name:"Listbox.Button"})})),ze=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){let p=(0,_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__.B)(),{id:i=`headlessui-listbox-label-${p}`,...c}=r,t=H("Listbox.Label"),u=B("Listbox.Label"),n=(0,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(t.labelRef,o);(0,_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__.s)((()=>u.registerLabel(i)),[i]);let T=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>{var m;return null==(m=t.buttonRef.current)?void 0:m.focus({preventScroll:!0})})),g=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({open:0===t.listboxState,disabled:t.disabled})),[t]);return(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:{ref:n,id:i,onClick:T},theirProps:c,slot:g,defaultTag:"label",name:"Listbox.Label"})})),Xe=_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.O5.RenderStrategy|_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.O5.Static,Je=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){var s;let p=(0,_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__.B)(),{id:i=`headlessui-listbox-options-${p}`,...c}=r,t=H("Listbox.Options"),u=B("Listbox.Options"),n=(0,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(t.optionsRef,o),T=(0,_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__.L)(),g=(0,_hooks_use_disposables_js__WEBPACK_IMPORTED_MODULE_10__.L)(),A=(0,_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.O_)(),m=null!==A?A===_internal_open_closed_js__WEBPACK_IMPORTED_MODULE_11__.Uw.Open:0===t.listboxState;(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{var x;let a=t.optionsRef.current;!a||0===t.listboxState&&a!==(null==(x=(0,_utils_owner_js__WEBPACK_IMPORTED_MODULE_19__.T)(a))?void 0:x.activeElement)&&a.focus({preventScroll:!0})}),[t.listboxState,t.optionsRef]);let P=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((a=>{switch(g.dispose(),a.key){case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Space:if(""!==t.searchQuery)return a.preventDefault(),a.stopPropagation(),u.search(a.key);case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.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,_utils_disposables_js__WEBPACK_IMPORTED_MODULE_20__.e)().nextFrame((()=>{var x;return null==(x=t.buttonRef.current)?void 0:x.focus({preventScroll:!0})})));break;case(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(t.orientation,{vertical:_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowDown,horizontal:_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowRight}):return a.preventDefault(),a.stopPropagation(),u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Next);case(0,_utils_match_js__WEBPACK_IMPORTED_MODULE_3__.Y)(t.orientation,{vertical:_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowUp,horizontal:_keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.ArrowLeft}):return a.preventDefault(),a.stopPropagation(),u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Previous);case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.Home:case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.PageUp:return a.preventDefault(),a.stopPropagation(),u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.First);case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.End:case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.D.PageDown:return a.preventDefault(),a.stopPropagation(),u.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Last);case _keyboard_js__WEBPACK_IMPORTED_MODULE_15__.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_js__WEBPACK_IMPORTED_MODULE_15__.D.Tab:a.preventDefault(),a.stopPropagation();break;default:1===a.key.length&&(u.search(a.key),g.setTimeout((()=>u.clearSearch()),350))}})),y=(0,_hooks_use_computed_js__WEBPACK_IMPORTED_MODULE_17__.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__WEBPACK_IMPORTED_MODULE_0__.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,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.XX)({ourProps:h,theirProps:c,slot:S,defaultTag:"ul",features:Xe,visible:m,name:"Listbox.Options"})})),Ze=(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.FX)((function(r,o){let p=(0,_hooks_use_id_js__WEBPACK_IMPORTED_MODULE_14__.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__WEBPACK_IMPORTED_MODULE_0__.useRef)(null),P=(0,_hooks_use_latest_value_js__WEBPACK_IMPORTED_MODULE_21__.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,_hooks_use_sync_refs_js__WEBPACK_IMPORTED_MODULE_5__.P)(o,m);(0,_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__.s)((()=>{if(0!==n.listboxState||!g||0===n.activationTrigger)return;let L=(0,_utils_disposables_js__WEBPACK_IMPORTED_MODULE_20__.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,_hooks_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_8__.s)((()=>T.registerOption(i,P)),[P,i]);let S=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((L=>{if(c)return L.preventDefault();T.onChange(t),0===n.mode&&(T.closeListbox(),(0,_utils_disposables_js__WEBPACK_IMPORTED_MODULE_20__.e)().nextFrame((()=>{var d;return null==(d=n.buttonRef.current)?void 0:d.focus({preventScroll:!0})})))})),h=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((()=>{if(c)return T.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Nothing);T.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific,i)})),s=(0,_hooks_use_tracked_pointer_js__WEBPACK_IMPORTED_MODULE_22__.J)(),a=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((L=>s.update(L))),x=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((L=>{!s.wasMoved(L)||c||g||T.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Specific,i,0)})),D=(0,_hooks_use_event_js__WEBPACK_IMPORTED_MODULE_7__._)((L=>{!s.wasMoved(L)||c||!g||T.goToOption(_utils_calculate_active_index_js__WEBPACK_IMPORTED_MODULE_2__.B.Nothing)})),Q=(0,react__WEBPACK_IMPORTED_MODULE_0__.useMemo)((()=>({active:g,selected:A,disabled:c})),[g,A,c]);return(0,_utils_render_js__WEBPACK_IMPORTED_MODULE_4__.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})},"./.storybook/interactive-docs-page.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{f:()=>InteractiveDocsPage});var _storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@storybook/addon-docs/dist/index.mjs"),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_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=(__webpack_require__("../../node_modules/react/index.js"),__webpack_require__("../../node_modules/react/jsx-runtime.js"));const InteractiveDocsPage=({stories})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.hE,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Pd,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"meta"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.VY,{of:"story"}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.Tn,{}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.H2,{}),stories.map(((story,index)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_storybook_addon_docs__WEBPACK_IMPORTED_MODULE_0__.fy,{of:story},(null==story?void 0:story.name)||`story-${index}`)))]});InteractiveDocsPage.propTypes={stories:prop_types__WEBPACK_IMPORTED_MODULE_3___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().object,prop_types__WEBPACK_IMPORTED_MODULE_3___default().func]))},InteractiveDocsPage.defaultProps={stories:[]},InteractiveDocsPage.__docgenInfo={description:"An alternative version of the Storybook DocsPage component.\n\nReplacing the Stories component with individual DocsStory components.\nThis prevents Stories from passing `__forceInitialArgs` to the DocsStory components.\nWhich makes the stories are interactive on the docs page, making the `args` more like initial values.\n\n@param {(Object|function)[]} [stories] The stories to display.\n@returns {JSX.Element} The DocsPage component without stories.",methods:[],displayName:"InteractiveDocsPage",props:{stories:{defaultValue:{value:"[]",computed:!1},description:"",type:{name:"arrayOf",value:{name:"union",value:[{name:"object"},{name:"func"}]}},required:!1}}}},"./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:()=>__WEBPACK_DEFAULT_EXPORT__});var _headlessui_react__WEBPACK_IMPORTED_MODULE_5__=__webpack_require__("../../node_modules/@headlessui/react/dist/components/listbox/listbox.js"),_headlessui_react__WEBPACK_IMPORTED_MODULE_10__=__webpack_require__("../../node_modules/@headlessui/react/dist/components/transitions/transition.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_6__=__webpack_require__("../../node_modules/@heroicons/react/solid/esm/CheckIcon.js"),_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_9__=__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__),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"),_hooks__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/hooks/use-svg-aria.js"),_label__WEBPACK_IMPORTED_MODULE_7__=__webpack_require__("./src/elements/label/index.js"),_validation__WEBPACK_IMPORTED_MODULE_8__=__webpack_require__("./src/elements/validation/validation-input.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const optionPropType={value:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,prop_types__WEBPACK_IMPORTED_MODULE_3___default().number,prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool]).isRequired,label:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string.isRequired},Option=({value,label})=>{const svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_4__.A)(),getClassName=(0,react__WEBPACK_IMPORTED_MODULE_1__.useCallback)((({active,selected})=>classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-select__option",active&&"yst-select__option--active",selected&&"yst-select__option--selected")),[]);return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_5__.W.Option,{value,className:getClassName,children:({selected})=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.Fragment,{children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-select__option-label",selected&&"yst-font-semibold"),children:label}),selected&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_6__.A,{className:"yst-select__option-check",...svgAriaProps})]})})};Option.displayName="Option",Option.propTypes=optionPropType;const Select=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({id,value,options,children,selectedLabel,label,labelProps,labelSuffix,onChange,disabled,validation,className,buttonProps,...props},ref)=>{const selectedOption=(0,react__WEBPACK_IMPORTED_MODULE_1__.useMemo)((()=>options.find((option=>value===(null==option?void 0:option.value)))||options[0]),[value,options]),svgAriaProps=(0,_hooks__WEBPACK_IMPORTED_MODULE_4__.A)();return(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_headlessui_react__WEBPACK_IMPORTED_MODULE_5__.W,{ref,as:"div",value,onChange,disabled,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-select",disabled&&"yst-select--disabled",className),...props,children:[label&&(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)(_headlessui_react__WEBPACK_IMPORTED_MODULE_5__.W.Label,{as:_label__WEBPACK_IMPORTED_MODULE_7__.A,...labelProps,children:label}),labelSuffix]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsxs)(_validation__WEBPACK_IMPORTED_MODULE_8__.A,{as:_headlessui_react__WEBPACK_IMPORTED_MODULE_5__.W.Button,"data-id":id,className:"yst-select__button",validation,...buttonProps,children:[(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("span",{className:"yst-select__button-label",children:selectedLabel||(null==selectedOption?void 0:selectedOption.label)||""}),!(null!=validation&&validation.message)&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_heroicons_react_solid__WEBPACK_IMPORTED_MODULE_9__.A,{className:"yst-select__button-icon",...svgAriaProps})]}),(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_10__.e,{as:react__WEBPACK_IMPORTED_MODULE_1__.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_2__.jsx)(_headlessui_react__WEBPACK_IMPORTED_MODULE_5__.W.Options,{className:"yst-select__options",children:children||options.map((option=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)(Option,{...option},option.value)))})})]})}));Select.displayName="Select",Select.propTypes={id:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string.isRequired,value:prop_types__WEBPACK_IMPORTED_MODULE_3___default().oneOfType([prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,prop_types__WEBPACK_IMPORTED_MODULE_3___default().number,prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool]).isRequired,options:prop_types__WEBPACK_IMPORTED_MODULE_3___default().arrayOf(prop_types__WEBPACK_IMPORTED_MODULE_3___default().shape(optionPropType)),children:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node,selectedLabel:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,label:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,labelProps:prop_types__WEBPACK_IMPORTED_MODULE_3___default().object,labelSuffix:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node,onChange:prop_types__WEBPACK_IMPORTED_MODULE_3___default().func.isRequired,disabled:prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool,validation:prop_types__WEBPACK_IMPORTED_MODULE_3___default().shape({variant:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,message:prop_types__WEBPACK_IMPORTED_MODULE_3___default().node}),className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,buttonProps:prop_types__WEBPACK_IMPORTED_MODULE_3___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 __WEBPACK_DEFAULT_EXPORT__=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/select/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ChildrenProp:()=>ChildrenProp,Factory:()=>Factory,OptionsProp:()=>OptionsProp,Validation:()=>Validation,default:()=>stories});var external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api"),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),react=__webpack_require__("../../node_modules/react/index.js"),elements_select=__webpack_require__("./src/elements/select/index.js"),interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js"),constants=__webpack_require__("./src/elements/validation/constants.js");var jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Template=args=>{const[,updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),handleChange=(0,react.useCallback)((value=>{const newArgs={value};var _find,_find$props;args.children&&(newArgs.selectedLabel=(null===(_find=(0,lodash.find)(args.children,["props.value",value]))||void 0===_find||null===(_find$props=_find.props)||void 0===_find$props?void 0:_find$props.label)||"");updateArgs(newArgs)}),[updateArgs,args.options,args.children]);return(0,jsx_runtime.jsx)(elements_select.A,{...args,onChange:handleChange})};Template.displayName="Template";const Factory={render:Template.bind({}),parameters:{controls:{disable:!1}},args:{id:"select",value:"1",options:[{value:"1",label:"Option 1"},{value:"2",label:"Option 2"},{value:"3",label:"Option 3"},{value:"4",label:"Option 4"}]}},OptionsProp={render:Template.bind({}),name:"Options prop",parameters:{controls:{disable:!1},docs:{description:{story:"Add options as an array of objects with `options` prop. Each object must contain `value` and `label` parameters. The displayed selected label will be updated automatically on change.\n"}}},args:{id:"select-field-4",value:"3",label:"Select field with a options as array",options:Factory.args.options}},ChildrenProp={render:Template.bind({}),name:"Children prop",parameters:{controls:{disable:!1},docs:{description:{story:"Add options as an array of React components with `children` prop, using the exposed option component `Select.Option`. In this case changing the `selectedLabel` should be updated in the handleChange function. See the value updating in the code.\n"}}},args:{id:"select-field-5",value:"3",label:"Select field with options as exposed React components",selectedLabel:Factory.args.options[2].label,children:Factory.args.options.map((option=>(0,jsx_runtime.jsx)(elements_select.A.Option,{...option},option.value)))}},Validation={render:()=>(0,jsx_runtime.jsx)("div",{className:"yst-space-y-8",children:(0,lodash.map)(constants.U,(variant=>(0,jsx_runtime.jsx)(elements_select.A,{id:`validation-${variant}`,label:`With validation of variant ${variant}`,options:Factory.args.options,value:Factory.args.options[0].value,onChange:lodash.noop,validation:{variant,message:{success:"Looks like you are nailing it!",warning:"Looks like you could do better!",info:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:["Looks like you could use some ",(0,jsx_runtime.jsx)("a",{href:"https://yoast.com",target:"_blank",rel:"noreferrer",children:"more info"}),"!"]}),error:"Looks like you are doing it wrong!"}[variant]}},variant)))}),parameters:{docs:{description:{story:"We distinguish four different validation variants for the select:\n\n1. **Success**<br>\nConfirms that the selected option is valid and meets the required criteria, providing positive feedback to users.\n\n2. **Warning**<br>\nHighlights potential issues or considerations related to the selected option, allowing users to proceed with caution.\n\n3. **Info**<br>\nProvides additional contextual information or guidance related to the selected option, enhancing user understanding.\n\n4. **Error**<br>\nIndicates that the selected option is invalid or not allowed, helping users identify and correct the issue.\n"}}}},stories={title:"1) Elements/Select",component:elements_select.A,argTypes:{children:{control:"text"},labelSuffix:{control:"text"},value:{control:"text"}},parameters:{docs:{description:{component:"Selects present users with a list of options from which they can choose a single selection."},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[OptionsProp,ChildrenProp,Validation]})}},decorators:[Story=>(0,jsx_runtime.jsx)("div",{style:{minHeight:200},children:(0,jsx_runtime.jsx)(Story,{})})]}},"./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}}]);