components-modal-stories.eee5f7f0.iframe.bundle.js

(globalThis.webpackChunk_yoast_ui_library=globalThis.webpackChunk_yoast_ui_library||[]).push([[2331],{"../../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})},"./.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/components/modal/stories.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"use strict";__webpack_require__.r(__webpack_exports__),__webpack_require__.d(__webpack_exports__,{Factory:()=>Factory,InitialFocus:()=>InitialFocus,WithContainer:()=>WithContainer,WithPanel:()=>WithPanel,WithTitleAndDescription:()=>WithTitleAndDescription,default:()=>stories});var 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"),dialog=__webpack_require__("../../node_modules/@headlessui/react/dist/components/dialog/dialog.js"),transition=__webpack_require__("../../node_modules/@headlessui/react/dist/components/transitions/transition.js"),XIcon=__webpack_require__("../../node_modules/@heroicons/react/outline/esm/XIcon.js"),classnames=__webpack_require__("./node_modules/classnames/index.js"),classnames_default=__webpack_require__.n(classnames),title=__webpack_require__("./src/elements/title/index.js"),use_svg_aria=__webpack_require__("./src/hooks/use-svg-aria.js"),jsx_runtime=__webpack_require__("../../node_modules/react/jsx-runtime.js");const Header=(0,react.forwardRef)((({children,className},ref)=>(0,jsx_runtime.jsx)("div",{ref,className:classnames_default()("yst-modal__container-header",className),children})));Header.displayName="Modal.Container.Header",Header.propTypes={children:prop_types_default().node.isRequired,className:prop_types_default().string},Header.defaultProps={className:""};const Content=(0,react.forwardRef)((({children,className},ref)=>(0,jsx_runtime.jsx)("div",{ref,className:classnames_default()("yst-modal__container-content",className),children})));Content.displayName="Modal.Container.Content",Content.propTypes={children:prop_types_default().node.isRequired,className:prop_types_default().string},Content.defaultProps={className:""};const Footer=(0,react.forwardRef)((({children,className},ref)=>(0,jsx_runtime.jsx)("div",{ref,className:classnames_default()("yst-modal__container-footer",className),children})));Footer.displayName="Modal.Container.Footer",Footer.propTypes={children:prop_types_default().node.isRequired,className:prop_types_default().string},Footer.defaultProps={className:""};const Container=(0,react.forwardRef)((({children,className},ref)=>(0,jsx_runtime.jsx)("div",{ref,className:classnames_default()("yst-modal__container",className),children})));Container.displayName="Modal.Container",Container.propTypes={children:prop_types_default().node.isRequired,className:prop_types_default().string},Container.defaultProps={className:""},Container.Header=Header,Container.Content=Content,Container.Footer=Footer,Container.__docgenInfo={description:"@param {JSX.node} children The content.\n@param {string} [className] Extra class.\n@returns {JSX.Element} The element.",methods:[],displayName:"Modal.Container",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}};const ModalContext=(0,react.createContext)({isOpen:!1,onClose:lodash.noop}),Title=(0,react.forwardRef)((({children,size,className,as,...props},ref)=>(0,jsx_runtime.jsx)(dialog.l.Title,{as,ref,className:classnames_default()("yst-title",size?title._.size[size]:"",className),...props,children})));Title.displayName="Modal.Title",Title.propTypes={size:prop_types_default().oneOf(Object.keys(title._.size)),className:prop_types_default().string,children:prop_types_default().node.isRequired,as:prop_types_default().elementType},Title.defaultProps={size:void 0,className:"",as:"h1"};const Panel=(0,react.forwardRef)((({children,className="",hasCloseButton=!0,closeButtonScreenReaderText="Close",...props},ref)=>{const{onClose}=(0,react.useContext)(ModalContext),svgAriaProps=(0,use_svg_aria.A)();return(0,jsx_runtime.jsxs)(dialog.l.Panel,{ref,className:classnames_default()("yst-modal__panel",className),...props,children:[hasCloseButton&&(0,jsx_runtime.jsx)("div",{className:"yst-modal__close",children:(0,jsx_runtime.jsxs)("button",{type:"button",onClick:onClose,className:"yst-modal__close-button",children:[(0,jsx_runtime.jsx)("span",{className:"yst-sr-only",children:closeButtonScreenReaderText}),(0,jsx_runtime.jsx)(XIcon.A,{className:"yst-h-6 yst-w-6",...svgAriaProps})]})}),children]})}));Panel.displayName="Modal.Panel",Panel.propTypes={children:prop_types_default().node.isRequired,className:prop_types_default().string,hasCloseButton:prop_types_default().bool,closeButtonScreenReaderText:prop_types_default().string},Panel.defaultProps={className:"",hasCloseButton:!0,closeButtonScreenReaderText:"Close"};const classNameMap={position:{center:"yst-modal--center","top-center":"yst-modal--top-center"}},Modal=(0,react.forwardRef)((({isOpen,onClose,children,className="",position="center",initialFocus=null,...props},ref)=>(0,jsx_runtime.jsx)(ModalContext.Provider,{value:{isOpen,onClose,initialFocus},children:(0,jsx_runtime.jsx)(transition.e.Root,{show:isOpen,as:react.Fragment,children:(0,jsx_runtime.jsx)(dialog.l,{as:"div",ref,className:"yst-root",open:isOpen,onClose,initialFocus,...props,children:(0,jsx_runtime.jsxs)("div",{className:classnames_default()("yst-modal",classNameMap.position[position],className),children:[(0,jsx_runtime.jsx)(transition.e.Child,{as:react.Fragment,enter:"yst-ease-out yst-duration-300",enterFrom:"yst-opacity-0",enterTo:"yst-opacity-100",leave:"yst-ease-in yst-duration-200",leaveFrom:"yst-opacity-100",leaveTo:"yst-opacity-0",children:(0,jsx_runtime.jsx)("div",{className:"yst-modal__overlay"})}),(0,jsx_runtime.jsx)("div",{className:"yst-modal__layout",children:(0,jsx_runtime.jsx)(transition.e.Child,{as:react.Fragment,enter:"yst-ease-out yst-duration-300",enterFrom:"yst-opacity-0 yst-translate-y-4 sm:yst-translate-y-0 sm:yst-scale-95",enterTo:"yst-opacity-100 yst-translate-y-0 sm:yst-scale-100",leave:"yst-ease-in yst-duration-200",leaveFrom:"yst-opacity-100 yst-translate-y-0 sm:yst-scale-100",leaveTo:"yst-opacity-0 yst-translate-y-4 sm:yst-translate-y-0 sm:yst-scale-95",children})})]})})})})));Modal.displayName="Modal",Modal.propTypes={isOpen:prop_types_default().bool.isRequired,onClose:prop_types_default().func.isRequired,children:prop_types_default().node.isRequired,className:prop_types_default().string,position:prop_types_default().oneOf(Object.keys(classNameMap.position)),initialFocus:prop_types_default().oneOfType([prop_types_default().func,prop_types_default().object])},Modal.defaultProps={className:"",position:"center",initialFocus:null},Modal.Panel=Panel,Modal.Title=Title,Modal.Description=dialog.l.Description,Modal.Description.displayName="Modal.Description",Modal.Container=Container;const modal=Modal;Modal.__docgenInfo={description:"@param {boolean} isOpen Whether the modal is open.\n@param {function} onClose Function that is called when the user wants to close the modal.\n@param {JSX.node} children Contents of the modal.\n@param {string} [className] Additional class names.\n@param {string} [position] Modal screen position. See `classNameMap.position` for the options.\n@param {function|Object|null} [initialFocus] The ref of the element to focus initially.\n@param {Object} [props] Additional Dialog props.\n@returns {JSX.Element} The modal.",methods:[],displayName:"Modal",props:{className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},position:{defaultValue:{value:'"center"',computed:!1},description:"",type:{name:"enum",value:[{value:'"center"',computed:!1},{value:'"top-center"',computed:!1}]},required:!1},initialFocus:{defaultValue:{value:"null",computed:!1},description:"",type:{name:"union",value:[{name:"func"},{name:"object"}]},required:!1},isOpen:{description:"",type:{name:"bool"},required:!0},onClose:{description:"",type:{name:"func"},required:!0},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"),text_input=__webpack_require__("./src/elements/text-input/index.js");const Template=({isOpen:initialIsOpen,onClose:_,children,...props})=>{const[isOpen,setIsOpen]=(0,react.useState)(initialIsOpen),openModal=(0,react.useCallback)((()=>setIsOpen(!0)),[]),closeModal=(0,react.useCallback)((()=>setIsOpen(!1)),[]);return(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(elements_button.A,{onClick:openModal,children:"Open modal"}),(0,jsx_runtime.jsx)(modal,{...props,isOpen,onClose:closeModal,children:(0,jsx_runtime.jsx)(modal.Panel,{children})})]})};Template.displayName="Modal",Template.propTypes={isOpen:prop_types_default().bool,onClose:prop_types_default().func,children:prop_types_default().node.isRequired};const Factory={component:Template,parameters:{controls:{disable:!1}}},WithPanel={name:"With panel",parameters:{controls:{disable:!1},docs:{description:{story:"Using the `Modal.Panel` component. The panel:\n- makes it so the modal closes when clicking outside of it\n- provides props to show a close button and the text inside\n- provides styling via the `.yst-modal__panel` class"}}},args:{children:"Text inside a panel."}},WithTitleAndDescription={name:"With title and description",parameters:{controls:{disable:!1},docs:{description:{story:"Using the `Modal.Title` and `Modal.Description` components will add `aria-labelledby` and `aria-describedby` to the Modal with matching IDs."}}},args:{children:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(modal.Title,{as:"h2",children:"Title"}),(0,jsx_runtime.jsx)(modal.Description,{className:"yst-mt-3 yst-text-sm yst-text-slate-600",children:"Description"})]})}},WithContainer={name:"With scrolling container",parameters:{controls:{disable:!1},docs:{description:{story:"Using the `Modal.Container`, which includes a `Header`, `Content` and `Footer`. The content will then be vertically scrollable if it takes up more space than the screen height."}}},args:{children:(0,jsx_runtime.jsxs)(modal.Container,{children:[(0,jsx_runtime.jsx)(modal.Container.Header,{className:"yst-w-full yst-text-center yst-mb-3",children:(0,jsx_runtime.jsx)(modal.Title,{as:"h3",children:"Lorem ipsum"})}),(0,jsx_runtime.jsx)(modal.Container.Content,{className:"yst-text-center yst-space-y-3",children:(0,lodash.times)(16).map((i=>(0,jsx_runtime.jsx)("p",{children:"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eget convallis nulla. Nullam et justo semper, volutpat mauris ac, sodales augue. Vestibulum vitae hendrerit tortor, vel fringilla ipsum. Ut id purus at urna tincidunt tincidunt. Vestibulum molestie ipsum quam, sit amet consectetur lorem auctor at. Cras laoreet arcu ac arcu rutrum, vitae dapibus felis lobortis. Aenean tincidunt varius lorem at ultrices. Ut dignissim eget leo at tristique. Donec interdum tempor eros, vulputate tincidunt erat venenatis ut."},`paragraph-${i}`)))}),(0,jsx_runtime.jsx)(modal.Container.Footer,{className:"yst-mt-3",children:(0,jsx_runtime.jsx)(elements_button.A,{variant:"primary",className:"yst-w-full",children:"Lorem ipsum"})})]})}},centerElementRef=(0,react.createRef)(),InitialFocus={name:"Initial focus",parameters:{controls:{disable:!1},docs:{description:{story:"The `initialFocus` prop accepts ref object and once the modal is open, the focus will be applied to the element with the ref. <br>By default, the focus will go to the first focusable element in the modal."}}},args:{initialFocus:centerElementRef,children:(0,jsx_runtime.jsxs)(jsx_runtime.Fragment,{children:[(0,jsx_runtime.jsx)(modal.Title,{children:"Title"}),(0,jsx_runtime.jsx)(modal.Description,{children:"Description area."}),(0,jsx_runtime.jsx)(text_input.A,{placeholder:"This is where the focus should be.",ref:centerElementRef})]})}},stories={title:"2) Components/Modal",component:Template,argTypes:{children:{control:"text",type:{required:!0},table:{type:{summary:"node"}}},isOpen:{control:{disable:!0},type:{required:!0},table:{type:{summary:"bool"}}},onClose:{control:{disable:!0},type:{required:!0},table:{type:{summary:"func"}}},className:{control:"text",table:{type:{summary:"string"},defaultValue:{summary:""}}},position:{control:"radio",table:{type:{summary:Object.keys(classNameMap.position).map((position=>`"${position}"`)).join(" ")},defaultValue:{summary:"center"}},options:Object.keys(classNameMap.position)},initialFocus:{control:{disable:!0},table:{type:{summary:"ref"},defaultValue:{summary:null}}}},parameters:{docs:{description:{component:"An uncontrolled modal component. For the purpose of this story, the `children`, `isOpen` and `onClose` are wrapped. So be aware that in the `Show code`, these are not reflected!"},page:()=>(0,jsx_runtime.jsx)(interactive_docs_page.f,{stories:[WithPanel,WithTitleAndDescription,WithContainer,InitialFocus]})}},args:{isOpen:!1,onClose:lodash.noop,children:"Hello everyone!",position:"center"}}},"./src/elements/button/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"),_spinner__WEBPACK_IMPORTED_MODULE_4__=__webpack_require__("./src/elements/spinner/index.js"),react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__=__webpack_require__("../../node_modules/react/jsx-runtime.js");const classNameMap={variant:{primary:"yst-button--primary",secondary:"yst-button--secondary",tertiary:"yst-button--tertiary",error:"yst-button--error",upsell:"yst-button--upsell"},size:{default:"",small:"yst-button--small",large:"yst-button--large","extra-large":"yst-button--extra-large"}},Button=(0,react__WEBPACK_IMPORTED_MODULE_2__.forwardRef)((({children,as:Component,type,variant,size,isLoading,disabled,className,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsxs)(Component,{type:type||"button"===Component&&"button"||void 0,disabled,ref,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-button",classNameMap.variant[variant],classNameMap.size[size],isLoading&&"yst-cursor-wait",disabled&&"yst-button--disabled",className),...props,children:[isLoading&&(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_3__.jsx)(_spinner__WEBPACK_IMPORTED_MODULE_4__.A,{size:"small"===size?"3":"4",className:"yst--ml-1 yst-mr-2"}),children]})));Button.displayName="Button",Button.propTypes={children:prop_types__WEBPACK_IMPORTED_MODULE_5___default().node.isRequired,as:prop_types__WEBPACK_IMPORTED_MODULE_5___default().elementType,type:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf(["button","submit","reset"]),variant:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.variant)),size:prop_types__WEBPACK_IMPORTED_MODULE_5___default().oneOf((0,lodash__WEBPACK_IMPORTED_MODULE_1__.keys)(classNameMap.size)),isLoading:prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool,disabled:prop_types__WEBPACK_IMPORTED_MODULE_5___default().bool,className:prop_types__WEBPACK_IMPORTED_MODULE_5___default().string},Button.defaultProps={as:"button",type:void 0,variant:"primary",size:"default",isLoading:!1,disabled:!1,className:""};const __WEBPACK_DEFAULT_EXPORT__=Button;Button.__docgenInfo={description:'@param {JSX.node} children Content of the button.\n@param {string|JSX.Element} [as="button"] Base component.\n@param {string} [type] Type attribute. Used when `as` is a `button`.\n@param {string} [variant="primary"] Button variant. See `classNameMap` for the options.\n@param {string} [size="default"] Button size. See `classNameMap` for the options.\n@param {boolean} [isLoading=false] Whether to show a spinner.\n@param {boolean} [disabled=false] Whether the button is disabled.\n@param {string} [className] CSS class.\n@returns {JSX.Element} Button component.',methods:[],displayName:"Button",props:{as:{defaultValue:{value:'"button"',computed:!1},description:"",type:{name:"elementType"},required:!1},type:{defaultValue:{value:"undefined",computed:!0},description:"",type:{name:"enum",value:[{value:'"button"',computed:!1},{value:'"submit"',computed:!1},{value:'"reset"',computed:!1}]},required:!1},variant:{defaultValue:{value:'"primary"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.variant )"},required:!1},size:{defaultValue:{value:'"default"',computed:!1},description:"",type:{name:"enum",computed:!0,value:"keys( classNameMap.size )"},required:!1},isLoading:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},children:{description:"",type:{name:"node"},required:!0}}}},"./src/elements/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/text-input/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 TextInput=(0,react__WEBPACK_IMPORTED_MODULE_1__.forwardRef)((({type,className,disabled,readOnly,...props},ref)=>(0,react_jsx_runtime__WEBPACK_IMPORTED_MODULE_2__.jsx)("input",{ref,type,className:classnames__WEBPACK_IMPORTED_MODULE_0___default()("yst-text-input",disabled&&"yst-text-input--disabled",readOnly&&"yst-text-input--read-only",className),disabled,readOnly,...props})));TextInput.displayName="TextInput",TextInput.propTypes={type:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,className:prop_types__WEBPACK_IMPORTED_MODULE_3___default().string,disabled:prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool,readOnly:prop_types__WEBPACK_IMPORTED_MODULE_3___default().bool},TextInput.defaultProps={type:"text",className:"",disabled:!1,readOnly:!1};const __WEBPACK_DEFAULT_EXPORT__=TextInput;TextInput.__docgenInfo={description:'@param {string} [type="text"] The type of input.\n@param {string} [className=""] CSS class.\n@param {boolean} [disabled=false] Whether the input is disabled.\n@param {boolean} [readOnly=false] Whether the input is read-only.\n@param {object} [props] Optional extra properties.\n@returns {JSX.Element} TextInput component.',methods:[],displayName:"TextInput",props:{type:{defaultValue:{value:'"text"',computed:!1},description:"",type:{name:"string"},required:!1},className:{defaultValue:{value:'""',computed:!1},description:"",type:{name:"string"},required:!1},disabled:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1},readOnly:{defaultValue:{value:"false",computed:!1},description:"",type:{name:"bool"},required:!1}}}},"./src/elements/title/index.js":(__unused_webpack_module,__webpack_exports__,__webpack_require__)=>{"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/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}}]);