components-popover-stories.f38bbe99.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[7239],{"../../node_modules/@headlessui/react/dist/components/transitions/transition.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{e:()=>Ke});var react=__webpack_require__("../../node_modules/react/index.js"),render=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/render.js"),open_closed=__webpack_require__("../../node_modules/@headlessui/react/dist/internal/open-closed.js"),match=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/match.js"),use_is_mounted=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-is-mounted.js"),use_iso_morphic_effect=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js"),use_latest_value=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-latest-value.js"),use_server_handoff_complete=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-server-handoff-complete.js"),use_sync_refs=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-sync-refs.js");var disposables=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/disposables.js");function v(t,...e){t&&e.length>0&&t.classList.add(...e)}function f(t,...e){t&&e.length>0&&t.classList.remove(...e)}function M(t,e,n,a){let i=n?"enter":"leave",m=(0,disposables.e)(),d=void 0!==a?function l(r){let e={called:!1};return(...t)=>{if(!e.called)return e.called=!0,r(...t)}}(a):()=>{};"enter"===i&&(t.removeAttribute("hidden"),t.style.display="");let u=(0,match.Y)(i,{enter:()=>e.enter,leave:()=>e.leave}),o=(0,match.Y)(i,{enter:()=>e.enterTo,leave:()=>e.leaveTo}),r=(0,match.Y)(i,{enter:()=>e.enterFrom,leave:()=>e.leaveFrom});return f(t,...e.enter,...e.enterTo,...e.enterFrom,...e.leave,...e.leaveFrom,...e.leaveTo,...e.entered),v(t,...u,...r),m.nextFrame((()=>{f(t,...r),v(t,...o),function F(t,e){let n=(0,disposables.e)();if(!t)return n.dispose;let{transitionDuration:a,transitionDelay:i}=getComputedStyle(t),[m,d]=[a,i].map((o=>{let[r=0]=o.split(",").filter(Boolean).map((l=>l.includes("ms")?parseFloat(l):1e3*parseFloat(l))).sort(((l,g)=>g-l));return r}));if(m+d!==0){let o=n.addEventListener(t,"transitionend",(r=>{r.target===r.currentTarget&&(e(),o())}))}else e();return n.add((()=>e())),n.dispose}(t,(()=>(f(t,...u),v(t,...e.entered),d())))})),m.dispose}var use_disposables=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-disposables.js");var use_event=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-event.js"),class_names=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/class-names.js"),env=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/env.js");function P(i=""){return i.split(" ").filter((e=>e.trim().length>1))}let A=(0,react.createContext)(null);A.displayName="TransitionContext";var s,ge=((s=ge||{}).Visible="visible",s.Hidden="hidden",s);let transition_M=(0,react.createContext)(null);function I(i){return"children"in i?I(i.children):i.current.filter((({el:e})=>null!==e.current)).filter((({state:e})=>"visible"===e)).length>0}function ne(i,e){let s=(0,use_latest_value.Y)(i),n=(0,react.useRef)([]),m=(0,use_is_mounted.a)(),y=(0,use_disposables.L)(),b=(0,use_event._)(((l,r=render.mK.Hidden)=>{let t=n.current.findIndex((({el:o})=>o===l));-1!==t&&((0,match.Y)(r,{[render.mK.Unmount](){n.current.splice(t,1)},[render.mK.Hidden](){n.current[t].state="hidden"}}),y.microTask((()=>{var o;!I(n)&&m.current&&(null==(o=s.current)||o.call(s))})))})),E=(0,use_event._)((l=>{let r=n.current.find((({el:t})=>t===l));return r?"visible"!==r.state&&(r.state="visible"):n.current.push({el:l,state:"visible"}),()=>b(l,render.mK.Unmount)})),S=(0,react.useRef)([]),u=(0,react.useRef)(Promise.resolve()),p=(0,react.useRef)({enter:[],leave:[],idle:[]}),d=(0,use_event._)(((l,r,t)=>{S.current.splice(0),e&&(e.chains.current[r]=e.chains.current[r].filter((([o])=>o!==l))),null==e||e.chains.current[r].push([l,new Promise((o=>{S.current.push(o)}))]),null==e||e.chains.current[r].push([l,new Promise((o=>{Promise.all(p.current[r].map((([f,a])=>a))).then((()=>o()))}))]),"enter"===r?u.current=u.current.then((()=>null==e?void 0:e.wait.current)).then((()=>t(r))):t(r)})),v=(0,use_event._)(((l,r,t)=>{Promise.all(p.current[r].splice(0).map((([o,f])=>f))).then((()=>{var o;null==(o=S.current.shift())||o()})).then((()=>t(r)))}));return(0,react.useMemo)((()=>({children:n,register:E,unregister:b,onStart:d,onStop:v,wait:u,chains:p})),[E,b,n,d,v,p,u])}function Se(){}transition_M.displayName="NestingContext";let xe=["beforeEnter","afterEnter","beforeLeave","afterLeave"];function re(i){var s;let e={};for(let n of xe)e[n]=null!=(s=i[n])?s:Se;return e}let ie=render.O5.RenderStrategy,oe=(0,render.FX)((function(e,s){let{beforeEnter:n,afterEnter:m,beforeLeave:y,afterLeave:b,enter:E,enterFrom:S,enterTo:u,entered:p,leave:d,leaveFrom:v,leaveTo:l,...r}=e,t=(0,react.useRef)(null),o=(0,use_sync_refs.P)(t,s),f=r.unmount?render.mK.Unmount:render.mK.Hidden,{show:a,appear:x,initial:se}=function be(){let i=(0,react.useContext)(A);if(null===i)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return i}(),[h,_]=(0,react.useState)(a?"visible":"hidden"),K=function Ee(){let i=(0,react.useContext)(transition_M);if(null===i)throw new Error("A <Transition.Child /> is used but it is missing a parent <Transition /> or <Transition.Root />.");return i}(),{register:D,unregister:V}=K,j=(0,react.useRef)(null);(0,react.useEffect)((()=>D(t)),[D,t]),(0,react.useEffect)((()=>{if(f===render.mK.Hidden&&t.current)return a&&"visible"!==h?void _("visible"):(0,match.Y)(h,{hidden:()=>V(t),visible:()=>D(t)})}),[h,t,D,V,a,f]);let U=(0,use_latest_value.Y)({enter:P(E),enterFrom:P(S),enterTo:P(u),entered:P(p),leave:P(d),leaveFrom:P(v),leaveTo:P(l)}),L=function Pe(i){let e=(0,react.useRef)(re(i));return(0,react.useEffect)((()=>{e.current=re(i)}),[i]),e}({beforeEnter:n,afterEnter:m,beforeLeave:y,afterLeave:b}),k=(0,use_server_handoff_complete.g)();(0,react.useEffect)((()=>{if(k&&"visible"===h&&null===t.current)throw new Error("Did you forget to passthrough the `ref` to the actual DOM node?")}),[t,h,k]);let G=se&&!x,le=!k||G||j.current===a?"idle":a?"enter":"leave",ae=(0,use_event._)((C=>(0,match.Y)(C,{enter:()=>L.current.beforeEnter(),leave:()=>L.current.beforeLeave(),idle:()=>{}}))),ue=(0,use_event._)((C=>(0,match.Y)(C,{enter:()=>L.current.afterEnter(),leave:()=>L.current.afterLeave(),idle:()=>{}}))),w=ne((()=>{_("hidden"),V(t)}),K);(function use_transition_D({container:i,direction:t,classes:o,onStart:s,onStop:u}){let a=(0,use_is_mounted.a)(),c=(0,use_disposables.L)(),r=(0,use_latest_value.Y)(t);(0,use_iso_morphic_effect.s)((()=>{let e=(0,disposables.e)();c.add(e.dispose);let n=i.current;if(n&&"idle"!==r.current&&a.current)return e.dispose(),s.current(r.current),e.add(M(n,o.current,"enter"===r.current,(()=>{e.dispose(),u.current(r.current)}))),e.dispose}),[t])})({container:t,classes:U,direction:le,onStart:(0,use_latest_value.Y)((C=>{w.onStart(t,C,ae)})),onStop:(0,use_latest_value.Y)((C=>{w.onStop(t,C,ue),"leave"===C&&!I(w)&&(_("hidden"),V(t))}))}),(0,react.useEffect)((()=>{!G||(f===render.mK.Hidden?j.current=null:j.current=a)}),[a,G,h]);let B=r,de={ref:o};return x&&a&&env._.isServer&&(B={...B,className:(0,class_names.x)(r.className,...U.current.enter,...U.current.enterFrom)}),react.createElement(transition_M.Provider,{value:w},react.createElement(open_closed.El,{value:(0,match.Y)(h,{visible:open_closed.Uw.Open,hidden:open_closed.Uw.Closed})},(0,render.XX)({ourProps:de,theirProps:B,defaultTag:"div",features:ie,visible:"visible"===h,name:"Transition.Child"})))})),J=(0,render.FX)((function(e,s){let{show:n,appear:m=!1,unmount:y,...b}=e,E=(0,react.useRef)(null),S=(0,use_sync_refs.P)(E,s);(0,use_server_handoff_complete.g)();let u=(0,open_closed.O_)();if(void 0===n&&null!==u&&(n=(0,match.Y)(u,{[open_closed.Uw.Open]:!0,[open_closed.Uw.Closed]:!1})),![!0,!1].includes(n))throw new Error("A <Transition /> is used but it is missing a `show={true | false}` prop.");let[p,d]=(0,react.useState)(n?"visible":"hidden"),v=ne((()=>{d("hidden")})),[l,r]=(0,react.useState)(!0),t=(0,react.useRef)([n]);(0,use_iso_morphic_effect.s)((()=>{!1!==l&&t.current[t.current.length-1]!==n&&(t.current.push(n),r(!1))}),[t,n]);let o=(0,react.useMemo)((()=>({show:n,appear:m,initial:l})),[n,m,l]);(0,react.useEffect)((()=>{if(n)d("visible");else if(I(v)){let a=E.current;if(!a)return;let x=a.getBoundingClientRect();0===x.x&&0===x.y&&0===x.width&&0===x.height&&d("hidden")}else d("hidden")}),[n,v]);let f={unmount:y};return react.createElement(transition_M.Provider,{value:v},react.createElement(A.Provider,{value:o},(0,render.XX)({ourProps:{...f,as:react.Fragment,children:react.createElement(oe,{ref:S,...f,...b})},theirProps:{},defaultTag:react.Fragment,features:ie,visible:"visible"===p,name:"Transition"})))})),Ne=(0,render.FX)((function(e,s){let n=null!==(0,react.useContext)(A),m=null!==(0,open_closed.O_)();return react.createElement(react.Fragment,null,!n&&m?react.createElement(J,{ref:s,...e}):react.createElement(oe,{ref:s,...e}))})),Ke=Object.assign(J,{Child:Ne,Root:J})},"../../node_modules/@headlessui/react/dist/hooks/use-disposables.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{L:()=>p});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_utils_disposables_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/disposables.js");function p(){let[e]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(_utils_disposables_js__WEBPACK_IMPORTED_MODULE_1__.e);return(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>()=>e.dispose()),[e]),e}},"../../node_modules/@headlessui/react/dist/hooks/use-event.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{_:()=>o});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_use_latest_value_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-latest-value.js");let o=function(t){let e=(0,_use_latest_value_js__WEBPACK_IMPORTED_MODULE_1__.Y)(t);return react__WEBPACK_IMPORTED_MODULE_0__.useCallback(((...r)=>e.current(...r)),[e])}},"../../node_modules/@headlessui/react/dist/hooks/use-is-mounted.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{a:()=>f});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js");function f(){let e=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(!1);return(0,_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_1__.s)((()=>(e.current=!0,()=>{e.current=!1})),[]),e}},"../../node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{s:()=>l});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_utils_env_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/env.js");let l=(e,f)=>{_utils_env_js__WEBPACK_IMPORTED_MODULE_1__._.isServer?(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)(e,f):(0,react__WEBPACK_IMPORTED_MODULE_0__.useLayoutEffect)(e,f)}},"../../node_modules/@headlessui/react/dist/hooks/use-latest-value.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{Y:()=>s});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-iso-morphic-effect.js");function s(e){let r=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(e);return(0,_use_iso_morphic_effect_js__WEBPACK_IMPORTED_MODULE_1__.s)((()=>{r.current=e}),[e]),r}},"../../node_modules/@headlessui/react/dist/hooks/use-server-handoff-complete.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{g:()=>l});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_utils_env_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/env.js");function l(){let[e,f]=(0,react__WEBPACK_IMPORTED_MODULE_0__.useState)(_utils_env_js__WEBPACK_IMPORTED_MODULE_1__._.isHandoffComplete);return e&&!1===_utils_env_js__WEBPACK_IMPORTED_MODULE_1__._.isHandoffComplete&&f(!1),(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{!0!==e&&f(!0)}),[e]),(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>_utils_env_js__WEBPACK_IMPORTED_MODULE_1__._.handoff()),[]),e}},"../../node_modules/@headlessui/react/dist/hooks/use-sync-refs.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{P:()=>y,a:()=>T});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_use_event_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/hooks/use-event.js");let u=Symbol();function T(t,n=!0){return Object.assign(t,{[u]:n})}function y(...t){let n=(0,react__WEBPACK_IMPORTED_MODULE_0__.useRef)(t);(0,react__WEBPACK_IMPORTED_MODULE_0__.useEffect)((()=>{n.current=t}),[t]);let c=(0,_use_event_js__WEBPACK_IMPORTED_MODULE_1__._)((e=>{for(let o of n.current)null!=o&&("function"==typeof o?o(e):o.current=e)}));return t.every((e=>null==e||(null==e?void 0:e[u])))?void 0:c}},"../../node_modules/@headlessui/react/dist/internal/open-closed.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{El:()=>C,O_:()=>s,Uw:()=>p});var react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js");let o=(0,react__WEBPACK_IMPORTED_MODULE_0__.createContext)(null);o.displayName="OpenClosedContext";var e,p=((e=p||{})[e.Open=0]="Open",e[e.Closed=1]="Closed",e);function s(){return(0,react__WEBPACK_IMPORTED_MODULE_0__.useContext)(o)}function C({value:t,children:n}){return react__WEBPACK_IMPORTED_MODULE_0__.createElement(o.Provider,{value:t},n)}},"../../node_modules/@headlessui/react/dist/utils/class-names.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";function e(...n){return n.filter(Boolean).join(" ")}__webpack_require__.d(__webpack_exports__,{x:()=>e})},"../../node_modules/@headlessui/react/dist/utils/disposables.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{e:()=>m});var _micro_task_js__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/micro-task.js");function m(){let n=[],i=[],r={enqueue(e){i.push(e)},addEventListener:(e,t,a,o)=>(e.addEventListener(t,a,o),r.add((()=>e.removeEventListener(t,a,o)))),requestAnimationFrame(...e){let t=requestAnimationFrame(...e);return r.add((()=>cancelAnimationFrame(t)))},nextFrame:(...e)=>r.requestAnimationFrame((()=>r.requestAnimationFrame(...e))),setTimeout(...e){let t=setTimeout(...e);return r.add((()=>clearTimeout(t)))},microTask(...e){let t={current:!0};return(0,_micro_task_js__WEBPACK_IMPORTED_MODULE_0__._)((()=>{t.current&&e[0]()})),r.add((()=>{t.current=!1}))},add:e=>(n.push(e),()=>{let t=n.indexOf(e);if(t>=0){let[a]=n.splice(t,1);a()}}),dispose(){for(let e of n.splice(0))e()},async workQueue(){for(let e of i.splice(0))await e()}};return r}},"../../node_modules/@headlessui/react/dist/utils/env.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{_:()=>s});var i=Object.defineProperty,r=(t,e,n)=>(((t,e,n)=>{e in t?i(t,e,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[e]=n})(t,"symbol"!=typeof e?e+"":e,n),n);let s=new class o{constructor(){r(this,"current",this.detect()),r(this,"handoffState","pending"),r(this,"currentId",0)}set(e){this.current!==e&&(this.handoffState="pending",this.currentId=0,this.current=e)}reset(){this.set(this.detect())}nextId(){return++this.currentId}get isServer(){return"server"===this.current}get isClient(){return"client"===this.current}detect(){return"undefined"==typeof window||"undefined"==typeof document?"server":"client"}handoff(){"pending"===this.handoffState&&(this.handoffState="complete")}get isHandoffComplete(){return"complete"===this.handoffState}}},"../../node_modules/@headlessui/react/dist/utils/match.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";function u(r,n,...a){if(r in n){let e=n[r];return"function"==typeof e?e(...a):e}let t=new Error(`Tried to handle "${r}" but there is no handler defined. Only defined handlers are: ${Object.keys(n).map((e=>`"${e}"`)).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(t,u),t}__webpack_require__.d(__webpack_exports__,{Y:()=>u})},"../../node_modules/@headlessui/react/dist/utils/micro-task.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";function t(e){"function"==typeof queueMicrotask?queueMicrotask(e):Promise.resolve().then(e).catch((o=>setTimeout((()=>{throw o}))))}__webpack_require__.d(__webpack_exports__,{_:()=>t})},"../../node_modules/@headlessui/react/dist/utils/render.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{FX:()=>V,O5:()=>j,XX:()=>X,mK:()=>w,oE:()=>P});var e,a,react__WEBPACK_IMPORTED_MODULE_0__=__webpack_require__("../../node_modules/react/index.js"),_class_names_js__WEBPACK_IMPORTED_MODULE_2__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/class-names.js"),_match_js__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@headlessui/react/dist/utils/match.js"),j=((a=j||{})[a.None=0]="None",a[a.RenderStrategy=1]="RenderStrategy",a[a.Static=2]="Static",a),w=((e=w||{})[e.Unmount=0]="Unmount",e[e.Hidden=1]="Hidden",e);function X({ourProps:r,theirProps:t,slot:e,defaultTag:a,features:s,visible:n=!0,name:l}){let o=h(t,r);if(n)return m(o,e,a,l);let u=null!=s?s:0;if(2&u){let{static:i=!1,...d}=o;if(i)return m(d,e,a,l)}if(1&u){let{unmount:i=!0,...d}=o;return(0,_match_js__WEBPACK_IMPORTED_MODULE_1__.Y)(i?0:1,{0:()=>null,1:()=>m({...d,hidden:!0,style:{display:"none"}},e,a,l)})}return m(o,e,a,l)}function m(r,t={},e,a){var y;let{as:s=e,children:n,refName:l="ref",...o}=T(r,["unmount","static"]),u=void 0!==r.ref?{[l]:r.ref}:{},i="function"==typeof n?n(t):n;o.className&&"function"==typeof o.className&&(o.className=o.className(t));let d={};if(t){let f=!1,c=[];for(let[p,F]of Object.entries(t))"boolean"==typeof F&&(f=!0),!0===F&&c.push(p);f&&(d["data-headlessui-state"]=c.join(" "))}if(s===react__WEBPACK_IMPORTED_MODULE_0__.Fragment&&Object.keys(P(o)).length>0){if(!(0,react__WEBPACK_IMPORTED_MODULE_0__.isValidElement)(i)||Array.isArray(i)&&i.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${a} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(o).map((p=>`  - ${p}`)).join("\n"),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map((p=>`  - ${p}`)).join("\n")].join("\n"));let f=(0,_class_names_js__WEBPACK_IMPORTED_MODULE_2__.x)(null==(y=i.props)?void 0:y.className,o.className),c=f?{className:f}:{};return(0,react__WEBPACK_IMPORTED_MODULE_0__.cloneElement)(i,Object.assign({},h(i.props,P(T(o,["ref"]))),d,u,function O(...r){return{ref:r.every((t=>null==t))?void 0:t=>{for(let e of r)null!=e&&("function"==typeof e?e(t):e.current=t)}}}(i.ref,u.ref),c))}return(0,react__WEBPACK_IMPORTED_MODULE_0__.createElement)(s,Object.assign({},T(o,["ref"]),s!==react__WEBPACK_IMPORTED_MODULE_0__.Fragment&&u,s!==react__WEBPACK_IMPORTED_MODULE_0__.Fragment&&d),i)}function h(...r){if(0===r.length)return{};if(1===r.length)return r[0];let t={},e={};for(let s of r)for(let n in s)n.startsWith("on")&&"function"==typeof s[n]?(null!=e[n]||(e[n]=[]),e[n].push(s[n])):t[n]=s[n];if(t.disabled||t["aria-disabled"])return Object.assign(t,Object.fromEntries(Object.keys(e).map((s=>[s,void 0]))));for(let s in e)Object.assign(t,{[s](n,...l){let o=e[s];for(let u of o){if((n instanceof Event||(null==n?void 0:n.nativeEvent)instanceof Event)&&n.defaultPrevented)return;u(n,...l)}}});return t}function V(r){var t;return Object.assign((0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(r),{displayName:null!=(t=r.displayName)?t:r.name})}function P(r){let t=Object.assign({},r);for(let e in t)void 0===t[e]&&delete t[e];return t}function T(r,t=[]){let e=Object.assign({},r);for(let a of t)a in e&&delete e[a];return e}},"../../node_modules/@heroicons/react/outline/esm/XIcon.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__=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function XIcon(props,svgRef){return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",fill:"none",viewBox:"0 0 24 24",strokeWidth:2,stroke:"currentColor","aria-hidden":"true",ref:svgRef},props),react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{strokeLinecap:"round",strokeLinejoin:"round",d:"M6 18L18 6M6 6l12 12"}))}))},"../../node_modules/@heroicons/react/solid/esm/CheckCircleIcon.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__=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function CheckCircleIcon(props,svgRef){return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:svgRef},props),react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z",clipRule:"evenodd"}))}))},"../../node_modules/@heroicons/react/solid/esm/ExclamationCircleIcon.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__=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function ExclamationCircleIcon(props,svgRef){return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:svgRef},props),react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))}))},"../../node_modules/@heroicons/react/solid/esm/ExclamationIcon.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__=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function ExclamationIcon(props,svgRef){return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:svgRef},props),react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{fillRule:"evenodd",d:"M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z",clipRule:"evenodd"}))}))},"../../node_modules/@heroicons/react/solid/esm/InformationCircleIcon.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__=react__WEBPACK_IMPORTED_MODULE_0__.forwardRef((function InformationCircleIcon(props,svgRef){return react__WEBPACK_IMPORTED_MODULE_0__.createElement("svg",Object.assign({xmlns:"http://www.w3.org/2000/svg",viewBox:"0 0 20 20",fill:"currentColor","aria-hidden":"true",ref:svgRef},props),react__WEBPACK_IMPORTED_MODULE_0__.createElement("path",{fillRule:"evenodd",d:"M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z",clipRule:"evenodd"}))}))},"../../node_modules/@storybook/addon-docs/dist/index.mjs":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{H2:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.H2,Hl:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Hl,Pd:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Pd,Tn:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.Tn,VY:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.VY,W8:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.W8,fy:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.fy,gG:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.gG,hE:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.hE,oz:()=>_storybook_blocks__WEBPACK_IMPORTED_MODULE_1__.oz});__webpack_require__("../../node_modules/@storybook/addon-docs/dist/chunk-HLWAVYOI.mjs");var _storybook_blocks__WEBPACK_IMPORTED_MODULE_1__=__webpack_require__("../../node_modules/@storybook/addon-docs/node_modules/@storybook/blocks/dist/index.mjs")},"./.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.__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/components/popover/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{ButtonWithAPopover:()=>ButtonWithAPopover,Factory:()=>Factory,WithMoreContent:()=>WithMoreContent,default:()=>stories});var react=__webpack_require__("../../node_modules/react/index.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),XIcon=__webpack_require__("../../node_modules/@heroicons/react/outline/esm/XIcon.js"),transition=__webpack_require__("../../node_modules/@headlessui/react/dist/components/transitions/transition.js"),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),use_svg_aria=__webpack_require__("./src/hooks/use-svg-aria.js"),title=__webpack_require__("./src/elements/title/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const PopoverContext=(0,react.createContext)({handleDismiss:lodash.noop}),positionClassNameMap={"no-arrow":"yst-popover--no-arrow",top:"yst-popover--top","top-left":"yst-popover--top-left","top-right":"yst-popover--top-right",right:"yst-popover--right",bottom:"yst-popover--bottom",left:"yst-popover--left","bottom-left":"yst-popover--bottom-left","bottom-right":"yst-popover--bottom-right"},usePopoverContext=()=>(0,react.useContext)(PopoverContext),CloseButton=(0,react.forwardRef)((({screenReaderLabel="Close",onClick=null,className="",children=null,...props},ref)=>{const{handleDismiss}=usePopoverContext(),svgAriaProps=(0,use_svg_aria.A)();return(0,jsx_runtime.jsx)("div",{className:"yst-popover__close",children:(0,jsx_runtime.jsx)("button",{type:"button",ref,onClick:onClick||handleDismiss,className:classnames_default()("yst-popover__close-button",className),...props,children:children||(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("span",{className:"yst-sr-only",children:screenReaderLabel}),(0,jsx_runtime.jsx)(XIcon.A,{className:"yst-h-5 yst-w-5",...svgAriaProps})]})})})}));CloseButton.displayName="Popover.CloseButton",CloseButton.propTypes={screenReaderLabel:prop_types_default().string,onClick:prop_types_default().func,children:prop_types_default().node,className:prop_types_default().string};const PopoverTitle=({className="",children=null,...props})=>(0,jsx_runtime.jsx)(title.A,{className:classnames_default()("yst-popover__title",className),size:"5",...props,children});PopoverTitle.displayName="PopoverTitle",PopoverTitle.displayName="Popover.Title",PopoverTitle.propTypes={children:prop_types_default().node,className:prop_types_default().string};const Content=({children=null,as:Tag="p",className="",...props})=>(0,jsx_runtime.jsx)(Tag,{className:classnames_default()("yst-popover__content",className),...props,children});Content.displayName="Content",Content.displayName="Popover.Content",Content.propTypes={className:prop_types_default().string,as:prop_types_default().elementType,children:prop_types_default().oneOfType([prop_types_default().node,prop_types_default().arrayOf(prop_types_default().node)])};const Backdrop=({className="",isVisible,...props})=>(0,jsx_runtime.jsx)(transition.e,{as:"div",show:isVisible,appear:!0,unmount:!0,enter:classnames_default()("yst-popover__backdrop yst-transition yst-duration-150 yst-ease-in",className),enterFrom:"yst-bg-opacity-0",enterTo:"yst-bg-opacity-75",entered:classnames_default()("yst-popover__backdrop",className),leave:classnames_default()("yst-popover__backdrop yst-transition yst-duration-150 yst-ease-in",className),leaveFrom:"yst-bg-opacity-75",leaveTo:"yst-bg-opacity-0",...props});Backdrop.displayName="Backdrop",Backdrop.displayName="Popover.Backdrop",Backdrop.propTypes={className:prop_types_default().string,isVisible:prop_types_default().bool.isRequired};const Popover=(0,react.forwardRef)((({children,role="dialog",as:Component="div",className="",isVisible=!1,setIsVisible=lodash.noop,position="no-arrow",hasBackdrop=!1,...props},ref)=>{const handleDismiss=(0,react.useCallback)((()=>{setIsVisible(!1)}),[setIsVisible]);return(0,jsx_runtime.jsxs)(PopoverContext.Provider,{value:{handleDismiss},children:[hasBackdrop&&(0,jsx_runtime.jsx)(Backdrop,{isVisible}),(0,jsx_runtime.jsx)(transition.e,{as:react.Fragment,show:isVisible,appear:!0,enter:"yst-transition yst-ease-in-out yst-duration-50",enterFrom:"yst-bg-opacity-0",enterTo:"yst-bg-opacity-100",leave:"yst-transition yst-ease-in-out yst-duration-50",leaveFrom:"yst-opacity-100",leaveTo:"yst-opacity-0",unmount:!0,children:(0,jsx_runtime.jsx)(Component,{ref,role,"aria-modal":"true",className:classnames_default()("yst-popover",positionClassNameMap[position],className),...props,children})})]})}));Popover.displayName="Popover",Popover.propTypes={as:prop_types_default().elementType,children:prop_types_default().node.isRequired,role:prop_types_default().string,className:prop_types_default().string,isVisible:prop_types_default().bool,setIsVisible:prop_types_default().func,position:prop_types_default().oneOf(Object.keys(positionClassNameMap)),hasBackdrop:prop_types_default().bool},Popover.Title=PopoverTitle,Popover.CloseButton=CloseButton,Popover.Content=Content,Popover.Backdrop=Backdrop;const popover=Popover;Popover.__docgenInfo={description:'@param {React.ReactNode} children The Children of the popover.\n@param {string} [role] The role of the popover.\n@param {string|JSX.Element} [as] Base component.\n@param {string} [className=""] The additional class name.\n@param {string} [position] The position of the popover.\n@param {boolean} [isVisible] Whether the popover is visible.\n@param {Function} [setIsVisible] Function to set the visibility of the element.\n@param { JSX.Element } [hasBackdrop] Whether the popover has a backdrop.\n@param {Object} [props] Additional props.\n@returns {JSX.Element} The popover component.',methods:[{name:"Title",docblock:null,modifiers:["static"],params:[{name:'{\n\tclassName = "",\n\tchildren = null,\n\t...props\n}',optional:!1,type:null}],returns:null},{name:"Content",docblock:null,modifiers:["static"],params:[{name:'{\n\tchildren = null,\n\tas: Tag = "p",\n\tclassName = "",\n\t...props\n}',optional:!1,type:null}],returns:null},{name:"Backdrop",docblock:null,modifiers:["static"],params:[{name:'{\n\tclassName = "", isVisible,\n\t...props\n}',optional:!1,type:null}],returns:null}],displayName:"Popover",props:{role:{defaultValue:{value:'"dialog"',computed:!1},description:"",type:{name:"string"},required:!1},as:{defaultValue:{value:'"div"',computed:!1},description:"",type:{name:"elementType"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},isVisible:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},setIsVisible:{defaultValue:{value:"noop",computed:!0},description:"",type:{name:"func"},required:!1},position:{defaultValue:{value:'"no-arrow"',computed:!1},description:"",type:{name:"enum",value:[{value:'"no-arrow"',computed:!1},{value:'"top"',computed:!1},{value:'"top-left"',computed:!1},{value:'"top-right"',computed:!1},{value:'"right"',computed:!1},{value:'"bottom"',computed:!1},{value:'"left"',computed:!1},{value:'"bottom-left"',computed:!1},{value:'"bottom-right"',computed:!1}]},required:!1},hasBackdrop:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},children:{description:"",type:{name:"node"},required:!0}}};var interactive_docs_page=__webpack_require__("./.storybook/interactive-docs-page.js"),elements_button=__webpack_require__("./src/elements/button/index.js"),validation_icon=__webpack_require__("./src/elements/validation/validation-icon.js"),external_STORYBOOK_MODULE_PREVIEW_API_=__webpack_require__("@storybook/preview-api");const DismissButton=()=>{const{handleDismiss}=usePopoverContext();return(0,jsx_runtime.jsx)(elements_button.A,{type:"button",variant:"primary",onClick:handleDismiss,className:"yst-self-end",children:"Got it!"})};DismissButton.displayName="DismissButton";const Factory={args:{children:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(popover.Title,{children:"The title"}),(0,jsx_runtime.jsx)(popover.Content,{children:"Hey! I am the popover."})]})}},WithMoreContent={args:{children:(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-flex-col yst-gap-4",children:[(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-justify-between",children:[(0,jsx_runtime.jsx)(popover.Title,{children:"The title"}),(0,jsx_runtime.jsx)(popover.CloseButton,{screenReaderLabel:"Dismiss"})]}),(0,jsx_runtime.jsx)("div",{className:"yst-self-start yst-flex-wrap",children:(0,jsx_runtime.jsx)(popover.Content,{children:"The content of the popover. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the standard dummy text ever since the 1500s."})})]})},decorators:[Story=>{const[args,updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),setIsVisible=(0,react.useCallback)((isVisible=>{updateArgs({isVisible})}),[updateArgs]);return(0,react.useEffect)((()=>{updateArgs({setIsVisible})}),[setIsVisible]),(0,jsx_runtime.jsx)(Story,{...args})}]},ButtonWithAPopover={args:{isVisible:!1,hasBackdrop:!0,position:"top-right",children:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsxs)("div",{className:"yst-flex yst-gap-4",children:[(0,jsx_runtime.jsxs)("div",{className:"yst-flex-shrink-0",children:[(0,jsx_runtime.jsx)(validation_icon.A,{className:"yst-w-5 yst-h-5"}),(0,jsx_runtime.jsx)("span",{className:"yst-logo-icon","aria-label":"Yoast Logo",role:"img"})]}),(0,jsx_runtime.jsxs)("div",{className:"yst-flex-1",children:[(0,jsx_runtime.jsx)("div",{className:"yst-mb-5 yst-flex yst-justify-start",children:(0,jsx_runtime.jsx)(popover.Title,{children:"Popover title"})}),(0,jsx_runtime.jsx)(popover.Content,{children:"The content of the popover. Lorem Ipsum is simply dummy text of the printing and typesetting industry."})]}),(0,jsx_runtime.jsx)("div",{children:(0,jsx_runtime.jsx)(popover.CloseButton,{screenReaderLabel:"Dismiss"})})]}),(0,jsx_runtime.jsx)("div",{className:"yst-flex yst-gap-3 yst-justify-end yst-mt-3",children:(0,jsx_runtime.jsx)(DismissButton,{})})]})},decorators:[Story=>{const[args,updateArgs]=(0,external_STORYBOOK_MODULE_PREVIEW_API_.useArgs)(),setIsVisible=(0,react.useCallback)((isVisible=>{updateArgs({isVisible})}),[updateArgs]);(0,react.useEffect)((()=>{updateArgs({setIsVisible})}),[setIsVisible]);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)("button",{onClick:()=>setIsVisible(!args.isVisible),className:"yst-border yst-bg-primary-500 yst-p-2 yst-rounded-lg yst-text-white yst-font-semibold",children:"Toggle popover"}),(0,jsx_runtime.jsx)(Story,{...args})]})}]},stories={title:"2) Components/Popover",component:popover,argTypes:{children:{control:"text"}},args:{isVisible:!0,setIsVisible:lodash.noop,children:"",hasBackdrop:!1,"aria-label":"Popover"},parameters:{controls:{disable:!1},docs:{description:{component:"A popover element is a type of modal interface used to display interactive content or additional information without navigating away from the current page.\nUnlike a tooltip, which typically appears on hover and provides brief, non-interactive information, a popover is usually triggered by clicking an element and can contain\nricher interactive elements such as buttons, links, forms, or detailed explanations. The popover remains visible until the user explicitly dismisses it, offering a more\npersistent and interactive experience than a tooltip.\n"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[WithMoreContent,ButtonWithAPopover]})}},decorators:[Story=>(0,jsx_runtime.jsx)("div",{className:"yst-flex yst-justify-center yst-items-center yst-h-[30rem]",children:(0,jsx_runtime.jsx)("div",{className:"yst-relative",children:(0,jsx_runtime.jsx)(Story,{})})})]}},"./src/elements/button/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.d(__webpack_exports__,{_:()=>classNameMap,A:()=>elements_button});var classnames=__webpack_require__("../../node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),lodash=__webpack_require__("../../node_modules/lodash/lodash.js"),prop_types=__webpack_require__("./node_modules/prop-types/index.js"),prop_types_default=__webpack_require__.n(prop_types),react=__webpack_require__("../../node_modules/react/index.js"),spinner=__webpack_require__("./src/elements/spinner/index.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const SparklesIcon=({pressed=!1,className=""})=>{const gradientId=`gradient-${(0,react.useId)()}`;return(0,jsx_runtime.jsxs)("svg",{width:"16",height:"17",viewBox:"0 0 16 17",fill:"none",xmlns:"http://www.w3.org/2000/svg",className,children:[(0,jsx_runtime.jsx)("path",{d:"M3.33284 2.96991V5.63658M1.99951 4.30324H4.66618M3.99951 12.3032V14.9699M2.66618 13.6366H5.33284M8.66618 2.96991L10.19 7.54134L13.9995 8.96991L10.19 10.3985L8.66618 14.9699L7.14237 10.3985L3.33284 8.96991L7.14237 7.54134L8.66618 2.96991Z",strokeLinecap:"round",strokeLinejoin:"round",stroke:pressed?"white":`url(#${gradientId})`,style:{strokeWidth:"1.33333px"}}),(0,jsx_runtime.jsx)("defs",{children:(0,jsx_runtime.jsxs)("linearGradient",{id:gradientId,x1:"1.99951",y1:"2.96991",x2:"15.3308",y2:"4.69764",gradientUnits:"userSpaceOnUse",children:[(0,jsx_runtime.jsx)("stop",{offset:"0%",stopColor:"#A61E69"}),(0,jsx_runtime.jsx)("stop",{offset:"100%",stopColor:"#6366F1"})]})})]})};SparklesIcon.displayName="SparklesIcon",SparklesIcon.propTypes={pressed:prop_types_default().bool,className:prop_types_default().string},SparklesIcon.__docgenInfo={description:"The AI sparkles icon for buttons.\n\n@param {object} props The component props\n@param {boolean} [props.pressed] Whether the button is pressed.\n@param {string} [props.className] The className for the icon.\n@returns {JSX.Element} The AI sparkles icon for buttons.",methods:[],displayName:"SparklesIcon",props:{pressed:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1}}};var use_svg_aria=__webpack_require__("./src/hooks/use-svg-aria.js");const classNameMap={variant:{primary:"yst-button--primary",secondary:"yst-button--secondary",tertiary:"yst-button--tertiary",error:"yst-button--error",upsell:"yst-button--upsell","ai-primary":"yst-button--ai-primary","ai-secondary":"yst-button--ai-secondary"},size:{default:"",small:"yst-button--small",large:"yst-button--large","extra-large":"yst-button--extra-large"}},Button=(0,react.forwardRef)((({children,as:Component,type,variant,size,isLoading,disabled,className,...props},ref)=>{const svgAriaProps=(0,use_svg_aria.A)();return(0,jsx_runtime.jsxs)(Component,{type:type||"button"===Component&&"button"||void 0,disabled,ref,className:classnames_default()("yst-button",classNameMap.variant[variant],classNameMap.size[size],isLoading&&"yst-cursor-wait",disabled&&"yst-button--disabled",className),...props,children:[isLoading&&(0,jsx_runtime.jsx)(spinner.A,{size:"small"===size?"3":"4",className:"yst-button--loading",...svgAriaProps}),variant.startsWith("ai-")&&(0,jsx_runtime.jsx)(SparklesIcon,{className:"yst-button--sparkles-icon yst-shrink-0",...svgAriaProps}),children]})}));Button.displayName="Button",Button.propTypes={children:prop_types_default().node.isRequired,as:prop_types_default().elementType,type:prop_types_default().oneOf(["button","submit","reset"]),variant:prop_types_default().oneOf((0,lodash.keys)(classNameMap.variant)),size:prop_types_default().oneOf((0,lodash.keys)(classNameMap.size)),isLoading:prop_types_default().bool,disabled:prop_types_default().bool,className:prop_types_default().string},Button.defaultProps={as:"button",type:void 0,variant:"primary",size:"default",isLoading:!1,disabled:!1,className:""};const elements_button=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/spinner/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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/title/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__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}}}},"./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/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}}]);