@lifesg/react-design-system 1.0.0-alpha.7 → 1.0.0-alpha.9

package/overlay/index.js

@@ -36,5 +36,5 @@ import{jsx as t}from"react/jsx-runtime";import e,{useState as n,useRef as i,useE
             `,t.$disableTransition&&(e+=s`
                 transition: none;
             `),e}}
-`,c=({show:d=!1,rootId:s,onOverlayClick:c,children:b,backgroundOpacity:y,backgroundBlur:h=!0,disableTransition:p=!1,enableOverlayClick:v=!1,zIndex:$,id:f})=>{const[g,w]=n(null),[k,x]=n(),T=i(),C=i(null),I=b&&e.cloneElement(b,{ref:C}),O=f?`lifesg-ds-overlay-root-${f}`:"lifesg-ds-overlay-root";o((()=>{if(d){const t=L();if(B(t),!t){const t=setTimeout((()=>{W("add")}),200);return()=>clearTimeout(t)}}else if(!T.current){const t=setTimeout((()=>{W("add")}),200);return()=>clearTimeout(t)}}),[d]),o((()=>{w(E());const t=L();return B(t),t||z(),()=>{W("remove")}}),[]);const B=t=>{T.current=t,x(t)},E=()=>document&&s?document.getElementById(s):document?document.body:null,L=()=>document.body.classList.contains(m),z=()=>{if(!document.getElementById(u)){const t=document.createElement("style");t.id=u;const e=document.documentElement.clientWidth,n=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${m} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${m}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},W=t=>{const e=document.body.classList.contains(m);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(m):document.body.classList.add(m)},j=t=>{t.preventDefault();const e=C.current?.firstChild;e&&e.contains(t.target)||c&&v&&c()};return g?r.createPortal(t(l,{id:O,"data-testid":O,$show:d,zIndex:$,$stacked:k,children:b&&t(a,{"data-testid":"overlay-wrapper",$show:d,$backgroundOpacity:y||(k?.5:.8),$backgroundBlur:h,$disableTransition:p,$enableOverlayClick:v,onClick:j,children:I})}),g):null},u="lifesg-ds-overlay-stylesheet",m="lifesg-ds-overlay-open";export{c as Overlay};
+`,c=({show:d=!1,rootId:s,onOverlayClick:c,children:b,backgroundOpacity:y,backgroundBlur:h=!0,disableTransition:p=!1,enableOverlayClick:v=!1,zIndex:$,id:f})=>{const[g,w]=n(null),[k,x]=n(),T=i(),C=i(null),I=b&&e.cloneElement(b,{ref:C}),O=f?`lifesg-ds-overlay-root-${f}`:"lifesg-ds-overlay-root";o((()=>{if(d){const t=L();if(B(t),!t){const t=setTimeout((()=>{W("add")}),200);return()=>clearTimeout(t)}}else if(!T.current){const t=setTimeout((()=>{W("remove")}),200);return()=>clearTimeout(t)}}),[d]),o((()=>{w(E());const t=L();return B(t),t||z(),()=>{W("remove")}}),[]);const B=t=>{T.current=t,x(t)},E=()=>document&&s?document.getElementById(s):document?document.body:null,L=()=>document.body.classList.contains(m),z=()=>{if(!document.getElementById(u)){const t=document.createElement("style");t.id=u;const e=document.documentElement.clientWidth,n=window.innerWidth-e;t.innerHTML=`\n\t\t\t\t.${m} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${m}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(t)}},W=t=>{const e=document.body.classList.contains(m);"add"!==t||e?"remove"===t&&e&&document.body.classList.remove(m):document.body.classList.add(m)},j=t=>{t.preventDefault();const e=C.current?.firstChild;e&&e.contains(t.target)||c&&v&&c()};return g?r.createPortal(t(l,{id:O,"data-testid":O,$show:d,zIndex:$,$stacked:k,children:b&&t(a,{"data-testid":"overlay-wrapper",$show:d,$backgroundOpacity:y||(k?.5:.8),$backgroundBlur:h,$disableTransition:p,$enableOverlayClick:v,onClick:j,children:I})}),g):null},u="lifesg-ds-overlay-stylesheet",m="lifesg-ds-overlay-open";export{c as Overlay};
 //# sourceMappingURL=index.js.map

package/overlay/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/overlay/overlay.styles.tsx","../../src/overlay/overlay.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { StyleProps } from \"./types\";\n\nconst getBackdropFilter = (blur: boolean) => {\n    let styleString = \"\";\n\n    if (blur) {\n        styleString += \"blur(10px)\";\n    }\n\n    return styleString.length > 0 ? styleString : \"none\";\n};\n\nexport const Root = styled.div<StyleProps>`\n    position: fixed;\n    left: 0;\n    top: 0;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n    z-index: ${(props) => {\n        return props.zIndex || (props.$stacked ? 99999 : 99998);\n    }};\n\n    ${(props) => {\n        if (props.$show) {\n            return css`\n                height: 100%;\n                width: 100vw;\n                visibility: visible;\n            `;\n        }\n    }}\n`;\n\nexport const Wrapper = styled.div<StyleProps>`\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: rgba(5, 1, 1, ${(props) => props.$backgroundOpacity});\n    backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)};\n    transition: opacity 200ms ease;\n\n    ${(props) => {\n        let customStyles = \"\";\n        if (props.$show) {\n            customStyles += css`\n                visibility: visible;\n                opacity: 1;\n                pointer-events: auto;\n                height: 100%;\n                width: 100vw;\n            `;\n        } else {\n            customStyles += css`\n                visibility: hidden;\n                opacity: 0;\n                transition-delay: ${props.$disableTransition ? \"0ms\" : \"400ms\"};\n                pointer-events: none;\n                height: 0;\n                width: 0;\n            `;\n        }\n        if (props.$disableTransition) {\n            customStyles += css`\n                transition: none;\n            `;\n        }\n\n        return customStyles;\n    }}\n`;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { OverlayProps } from \"./types\";\nimport { Root, Wrapper } from \"./overlay.styles\";\n\nexport const Overlay = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex,\n    id,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n\n    const stacked = useRef<boolean>();\n\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            if (!isStacked) {\n                const timerId = setTimeout(() => {\n                    applyBodyStyleClass(\"add\");\n                }, 200); // Allow overlay animations to complete\n                return () => clearTimeout(timerId);\n            }\n        } else {\n            /**\n             * Here we have to used the ref value to know if it is stacked\n             * rather than checking for the presence of the overlay class\n             * on <body>\n             */\n            if (!stacked.current) {\n                const timerId = setTimeout(() => {\n                    applyBodyStyleClass(\"add\");\n                }, 200); // Allow overlay animations to complete\n                return () => clearTimeout(timerId);\n            }\n        }\n    }, [show]);\n\n    useEffect(() => {\n        setRootElement(getRootElement());\n\n        /**\n         * Only add stylesheet for a non-stacked overlay\n         */\n        const isStacked = checkIfStacked();\n        setStacked(isStacked);\n        if (!isStacked) addStylesheetForDocumentBody();\n\n        return () => {\n            applyBodyStyleClass(\"remove\");\n        };\n    }, []);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        /**\n         * Check if the body style was altered before. If it was, then this is\n         * a stacked overlay\n         */\n        return document.body.classList.contains(OVERLAY_OPEN_CLASSNAME);\n    };\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            OVERLAY_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(OVERLAY_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(OVERLAY_OPEN_CLASSNAME);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n\n        const modal = childRef.current?.firstChild;\n        if (modal && (modal as any).contains(event.target)) {\n            return;\n        } else if (onOverlayClick && enableOverlayClick) {\n            onOverlayClick();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <Wrapper\n            data-testid={\"overlay-wrapper\"}\n            $show={show}\n            $backgroundOpacity={backgroundOpacity || (isStacked ? 0.5 : 0.8)}\n            $backgroundBlur={backgroundBlur}\n            $disableTransition={disableTransition}\n            $enableOverlayClick={enableOverlayClick}\n            onClick={handleWrapperClick}\n        >\n            {childWithRef}\n        </Wrapper>\n    );\n\n    const renderComponent = () => (\n        <Root\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            $show={show}\n            zIndex={zIndex}\n            $stacked={isStacked}\n        >\n            {children && renderWrapper()}\n        </Root>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-overlay-stylesheet\";\nconst OVERLAY_OPEN_CLASSNAME = \"lifesg-ds-overlay-open\";\n"],"names":["Root","styled","div","props","zIndex","$stacked","$show","css","Wrapper","$backgroundOpacity","blur","styleString","length","getBackdropFilter","$backgroundBlur","customStyles","$disableTransition","Overlay","show","rootId","onOverlayClick","children","backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","id","rootElement","setRootElement","useState","isStacked","_setIsStacked","stacked","useRef","childRef","childWithRef","React","cloneElement","ref","overlayRootId","useEffect","checkIfStacked","setStacked","timerId","setTimeout","applyBodyStyleClass","clearTimeout","current","getRootElement","addStylesheetForDocumentBody","data","document","getElementById","body","classList","contains","OVERLAY_OPEN_CLASSNAME","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","innerHTML","appendChild","action","isOverlayStyleClassApplied","remove","add","handleWrapperClick","event","preventDefault","modal","firstChild","target","ReactDOM","createPortal","_jsx","$enableOverlayClick","onClick"],"mappings":"2KAGA,MAUaA,EAAOC,EAAOC,GAAe;;;;;;;eAO1BC,GACDA,EAAMC,SAAWD,EAAME,SAAW,MAAQ;;MAGlDF,IACC,GAAIA,EAAMG,MACN,OAAOC,CAAG;;;;;EASTC,EAAUP,EAAOC,GAAe;;;;sCAINC,GAAUA,EAAMM;uBAC/BN,GArCE,CAACO,IACvB,IAAIC,EAAc,GAMlB,OAJID,IACAC,GAAe,cAGZA,EAAYC,OAAS,EAAID,EAAc,QA8BhBE,CAAkBV,EAAMW;;;MAGnDX,IACC,IAAIY,EAAe,GAyBnB,OAxBIZ,EAAMG,MACNS,GAAgBR,CAAG;;;;;;cAQnBQ,GAAgBR,CAAG;;;oCAGKJ,EAAMa,mBAAqB,MAAQ;;;;cAM3Db,EAAMa,qBACND,GAAgBR,CAAG;;eAKhBQ;EChEFE,EAAU,EACnBC,QAAO,EACPC,SACAC,iBACAC,WACAC,oBACAC,kBAAiB,EACjBC,qBAAoB,EACpBC,sBAAqB,EACrBrB,SACAsB,SAKA,MAAOC,EAAaC,GAAkBC,EAA6B,OAC5DC,EAAWC,GAAiBF,IAE7BG,EAAUC,IAEVC,EAAWD,EAAuB,MAClCE,EACFd,GAAYe,EAAMC,aAAahB,EAAU,CAAEiB,IAAKJ,IAE9CK,EAAgBb,EAChB,0BAA0BA,IAC1B,yBAKNc,GAAU,KACN,GAAItB,EAAM,CACN,MAAMY,EAAYW,IAGlB,GAFAC,EAAWZ,IAENA,EAAW,CACZ,MAAMa,EAAUC,YAAW,KACvBC,EAAoB,SACrB,KACH,MAAO,IAAMC,aAAaH,SAQ9B,IAAKX,EAAQe,QAAS,CAClB,MAAMJ,EAAUC,YAAW,KACvBC,EAAoB,SACrB,KACH,MAAO,IAAMC,aAAaH,MAGnC,CAACzB,IAEJsB,GAAU,KACNZ,EAAeoB,KAKf,MAAMlB,EAAYW,IAIlB,OAHAC,EAAWZ,GACNA,GAAWmB,IAET,KACHJ,EAAoB,aAEzB,IAKH,MAAMH,EAAcQ,IAChBlB,EAAQe,QAAUG,EAClBnB,EAAcmB,IAMZF,EAAiB,IACfG,UAAYhC,EACLgC,SAASC,eAAejC,GACxBgC,SAEAA,SAASE,KAET,KAITZ,EAAiB,IAKZU,SAASE,KAAKC,UAAUC,SAASC,GAGtCP,EAA+B,KAIjC,IAAKE,SAASC,eAAeK,GAAgB,CACzC,MAAMC,EAAoBP,SAASQ,cAAc,SACjDD,EAAkBhC,GAAK+B,EAEvB,MAAMG,EAAgBT,SAASU,gBAAgBC,YAEzCC,EADcC,OAAOC,WACUL,EAErCF,EAAkBQ,UAAY,cACnCV,8DAEeO,iHAKfP,sEAKKL,SAASE,KAAKc,YAAYT,KAO5Bb,EAAuBuB,IACzB,MAAMC,EAA6BlB,SAASE,KAAKC,UAAUC,SACvDC,GAGW,QAAXY,GAAqBC,EAEH,WAAXD,GAAuBC,GAC9BlB,SAASE,KAAKC,UAAUgB,OAAOd,GAF/BL,SAASE,KAAKC,UAAUiB,IAAIf,IAS9BgB,EAAsBC,IACxBA,EAAMC,iBAEN,MAAMC,EAAQzC,EAASa,SAAS6B,WAC5BD,GAAUA,EAAcpB,SAASkB,EAAMI,SAEhCzD,GAAkBK,GACzBL,KAiCR,OAAOO,EACDmD,EAASC,aAZXC,EAAChF,EACG,CAAA0B,GAAIa,EACS,cAAAA,EACNjC,MAAAY,EACPd,OAAQA,EACEC,SAAAyB,EAETT,SAAAA,GArBL2D,EAACxE,EAAO,CAAA,cACS,kBAAiBF,MACvBY,EACaT,mBAAAa,IAAsBQ,EAAY,GAAM,IAC3ChB,gBAAAS,qBACGC,EAAiByD,oBAChBxD,EACrByD,QAASV,WAERrC,MAiBsCR,GACzC,MAMJ8B,EAAgB,+BAChBD,EAAyB"}
+{"version":3,"file":"index.js","sources":["../../src/overlay/overlay.styles.tsx","../../src/overlay/overlay.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { StyleProps } from \"./types\";\n\nconst getBackdropFilter = (blur: boolean) => {\n    let styleString = \"\";\n\n    if (blur) {\n        styleString += \"blur(10px)\";\n    }\n\n    return styleString.length > 0 ? styleString : \"none\";\n};\n\nexport const Root = styled.div<StyleProps>`\n    position: fixed;\n    left: 0;\n    top: 0;\n    height: 0;\n    width: 0;\n    visibility: hidden;\n    z-index: ${(props) => {\n        return props.zIndex || (props.$stacked ? 99999 : 99998);\n    }};\n\n    ${(props) => {\n        if (props.$show) {\n            return css`\n                height: 100%;\n                width: 100vw;\n                visibility: visible;\n            `;\n        }\n    }}\n`;\n\nexport const Wrapper = styled.div<StyleProps>`\n    position: absolute;\n    left: 0;\n    top: 0;\n    background-color: rgba(5, 1, 1, ${(props) => props.$backgroundOpacity});\n    backdrop-filter: ${(props) => getBackdropFilter(props.$backgroundBlur)};\n    transition: opacity 200ms ease;\n\n    ${(props) => {\n        let customStyles = \"\";\n        if (props.$show) {\n            customStyles += css`\n                visibility: visible;\n                opacity: 1;\n                pointer-events: auto;\n                height: 100%;\n                width: 100vw;\n            `;\n        } else {\n            customStyles += css`\n                visibility: hidden;\n                opacity: 0;\n                transition-delay: ${props.$disableTransition ? \"0ms\" : \"400ms\"};\n                pointer-events: none;\n                height: 0;\n                width: 0;\n            `;\n        }\n        if (props.$disableTransition) {\n            customStyles += css`\n                transition: none;\n            `;\n        }\n\n        return customStyles;\n    }}\n`;\n","import React, { useEffect, useRef, useState } from \"react\";\nimport ReactDOM from \"react-dom\";\nimport { OverlayProps } from \"./types\";\nimport { Root, Wrapper } from \"./overlay.styles\";\n\nexport const Overlay = ({\n    show = false,\n    rootId,\n    onOverlayClick,\n    children,\n    backgroundOpacity,\n    backgroundBlur = true,\n    disableTransition = false,\n    enableOverlayClick = false,\n    zIndex,\n    id,\n}: OverlayProps): JSX.Element | null => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [rootElement, setRootElement] = useState<HTMLElement | null>(null);\n    const [isStacked, _setIsStacked] = useState<boolean>();\n\n    const stacked = useRef<boolean>();\n\n    const childRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    const overlayRootId = id\n        ? `lifesg-ds-overlay-root-${id}`\n        : \"lifesg-ds-overlay-root\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (show) {\n            const isStacked = checkIfStacked();\n            setStacked(isStacked);\n\n            if (!isStacked) {\n                const timerId = setTimeout(() => {\n                    applyBodyStyleClass(\"add\");\n                }, 200); // Allow overlay animations to complete\n                return () => clearTimeout(timerId);\n            }\n        } else {\n            /**\n             * Here we have to used the ref value to know if it is stacked\n             * rather than checking for the presence of the overlay class\n             * on <body>\n             */\n            if (!stacked.current) {\n                const timerId = setTimeout(() => {\n                    applyBodyStyleClass(\"remove\");\n                }, 200); // Allow overlay animations to complete\n                return () => clearTimeout(timerId);\n            }\n        }\n    }, [show]);\n\n    useEffect(() => {\n        setRootElement(getRootElement());\n\n        /**\n         * Only add stylesheet for a non-stacked overlay\n         */\n        const isStacked = checkIfStacked();\n        setStacked(isStacked);\n        if (!isStacked) addStylesheetForDocumentBody();\n\n        return () => {\n            applyBodyStyleClass(\"remove\");\n        };\n    }, []);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setStacked = (data: boolean) => {\n        stacked.current = data;\n        _setIsStacked(data);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getRootElement = (): HTMLElement | null => {\n        if (document && rootId) {\n            return document.getElementById(rootId);\n        } else if (document) {\n            // If rootId not specified, we'll use body\n            return document.body;\n        } else {\n            return null;\n        }\n    };\n\n    const checkIfStacked = () => {\n        /**\n         * Check if the body style was altered before. If it was, then this is\n         * a stacked overlay\n         */\n        return document.body.classList.contains(OVERLAY_OPEN_CLASSNAME);\n    };\n\n    const addStylesheetForDocumentBody = () => {\n        /**\n         * This stylesheet is to manipulate the <body>. We only add once\n         */\n        if (!document.getElementById(STYLESHEET_ID)) {\n            const overlayStyleSheet = document.createElement(\"style\");\n            overlayStyleSheet.id = STYLESHEET_ID;\n\n            const documentWidth = document.documentElement.clientWidth;\n            const windowWidth = window.innerWidth;\n            const scrollBarWidth = windowWidth - documentWidth;\n\n            overlayStyleSheet.innerHTML = `\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${scrollBarWidth}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${OVERLAY_OPEN_CLASSNAME}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`;\n\n            document.body.appendChild(overlayStyleSheet);\n        }\n    };\n\n    /**\n     * This sets the style of <body> to hide the scrollbar\n     */\n    const applyBodyStyleClass = (action: \"add\" | \"remove\") => {\n        const isOverlayStyleClassApplied = document.body.classList.contains(\n            OVERLAY_OPEN_CLASSNAME\n        );\n\n        if (action === \"add\" && !isOverlayStyleClassApplied) {\n            document.body.classList.add(OVERLAY_OPEN_CLASSNAME);\n        } else if (action === \"remove\" && isOverlayStyleClassApplied) {\n            document.body.classList.remove(OVERLAY_OPEN_CLASSNAME);\n        }\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWrapperClick = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n\n        const modal = childRef.current?.firstChild;\n        if (modal && (modal as any).contains(event.target)) {\n            return;\n        } else if (onOverlayClick && enableOverlayClick) {\n            onOverlayClick();\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderWrapper = () => (\n        <Wrapper\n            data-testid={\"overlay-wrapper\"}\n            $show={show}\n            $backgroundOpacity={backgroundOpacity || (isStacked ? 0.5 : 0.8)}\n            $backgroundBlur={backgroundBlur}\n            $disableTransition={disableTransition}\n            $enableOverlayClick={enableOverlayClick}\n            onClick={handleWrapperClick}\n        >\n            {childWithRef}\n        </Wrapper>\n    );\n\n    const renderComponent = () => (\n        <Root\n            id={overlayRootId}\n            data-testid={overlayRootId}\n            $show={show}\n            zIndex={zIndex}\n            $stacked={isStacked}\n        >\n            {children && renderWrapper()}\n        </Root>\n    );\n\n    return rootElement\n        ? ReactDOM.createPortal(renderComponent(), rootElement)\n        : null;\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst STYLESHEET_ID = \"lifesg-ds-overlay-stylesheet\";\nconst OVERLAY_OPEN_CLASSNAME = \"lifesg-ds-overlay-open\";\n"],"names":["Root","styled","div","props","zIndex","$stacked","$show","css","Wrapper","$backgroundOpacity","blur","styleString","length","getBackdropFilter","$backgroundBlur","customStyles","$disableTransition","Overlay","show","rootId","onOverlayClick","children","backgroundOpacity","backgroundBlur","disableTransition","enableOverlayClick","id","rootElement","setRootElement","useState","isStacked","_setIsStacked","stacked","useRef","childRef","childWithRef","React","cloneElement","ref","overlayRootId","useEffect","checkIfStacked","setStacked","timerId","setTimeout","applyBodyStyleClass","clearTimeout","current","getRootElement","addStylesheetForDocumentBody","data","document","getElementById","body","classList","contains","OVERLAY_OPEN_CLASSNAME","STYLESHEET_ID","overlayStyleSheet","createElement","documentWidth","documentElement","clientWidth","scrollBarWidth","window","innerWidth","innerHTML","appendChild","action","isOverlayStyleClassApplied","remove","add","handleWrapperClick","event","preventDefault","modal","firstChild","target","ReactDOM","createPortal","_jsx","$enableOverlayClick","onClick"],"mappings":"2KAGA,MAUaA,EAAOC,EAAOC,GAAe;;;;;;;eAO1BC,GACDA,EAAMC,SAAWD,EAAME,SAAW,MAAQ;;MAGlDF,IACC,GAAIA,EAAMG,MACN,OAAOC,CAAG;;;;;EASTC,EAAUP,EAAOC,GAAe;;;;sCAINC,GAAUA,EAAMM;uBAC/BN,GArCE,CAACO,IACvB,IAAIC,EAAc,GAMlB,OAJID,IACAC,GAAe,cAGZA,EAAYC,OAAS,EAAID,EAAc,QA8BhBE,CAAkBV,EAAMW;;;MAGnDX,IACC,IAAIY,EAAe,GAyBnB,OAxBIZ,EAAMG,MACNS,GAAgBR,CAAG;;;;;;cAQnBQ,GAAgBR,CAAG;;;oCAGKJ,EAAMa,mBAAqB,MAAQ;;;;cAM3Db,EAAMa,qBACND,GAAgBR,CAAG;;eAKhBQ;EChEFE,EAAU,EACnBC,QAAO,EACPC,SACAC,iBACAC,WACAC,oBACAC,kBAAiB,EACjBC,qBAAoB,EACpBC,sBAAqB,EACrBrB,SACAsB,SAKA,MAAOC,EAAaC,GAAkBC,EAA6B,OAC5DC,EAAWC,GAAiBF,IAE7BG,EAAUC,IAEVC,EAAWD,EAAuB,MAClCE,EACFd,GAAYe,EAAMC,aAAahB,EAAU,CAAEiB,IAAKJ,IAE9CK,EAAgBb,EAChB,0BAA0BA,IAC1B,yBAKNc,GAAU,KACN,GAAItB,EAAM,CACN,MAAMY,EAAYW,IAGlB,GAFAC,EAAWZ,IAENA,EAAW,CACZ,MAAMa,EAAUC,YAAW,KACvBC,EAAoB,SACrB,KACH,MAAO,IAAMC,aAAaH,SAQ9B,IAAKX,EAAQe,QAAS,CAClB,MAAMJ,EAAUC,YAAW,KACvBC,EAAoB,YACrB,KACH,MAAO,IAAMC,aAAaH,MAGnC,CAACzB,IAEJsB,GAAU,KACNZ,EAAeoB,KAKf,MAAMlB,EAAYW,IAIlB,OAHAC,EAAWZ,GACNA,GAAWmB,IAET,KACHJ,EAAoB,aAEzB,IAKH,MAAMH,EAAcQ,IAChBlB,EAAQe,QAAUG,EAClBnB,EAAcmB,IAMZF,EAAiB,IACfG,UAAYhC,EACLgC,SAASC,eAAejC,GACxBgC,SAEAA,SAASE,KAET,KAITZ,EAAiB,IAKZU,SAASE,KAAKC,UAAUC,SAASC,GAGtCP,EAA+B,KAIjC,IAAKE,SAASC,eAAeK,GAAgB,CACzC,MAAMC,EAAoBP,SAASQ,cAAc,SACjDD,EAAkBhC,GAAK+B,EAEvB,MAAMG,EAAgBT,SAASU,gBAAgBC,YAEzCC,EADcC,OAAOC,WACUL,EAErCF,EAAkBQ,UAAY,cACnCV,8DAEeO,iHAKfP,sEAKKL,SAASE,KAAKc,YAAYT,KAO5Bb,EAAuBuB,IACzB,MAAMC,EAA6BlB,SAASE,KAAKC,UAAUC,SACvDC,GAGW,QAAXY,GAAqBC,EAEH,WAAXD,GAAuBC,GAC9BlB,SAASE,KAAKC,UAAUgB,OAAOd,GAF/BL,SAASE,KAAKC,UAAUiB,IAAIf,IAS9BgB,EAAsBC,IACxBA,EAAMC,iBAEN,MAAMC,EAAQzC,EAASa,SAAS6B,WAC5BD,GAAUA,EAAcpB,SAASkB,EAAMI,SAEhCzD,GAAkBK,GACzBL,KAiCR,OAAOO,EACDmD,EAASC,aAZXC,EAAChF,EACG,CAAA0B,GAAIa,EACS,cAAAA,EACNjC,MAAAY,EACPd,OAAQA,EACEC,SAAAyB,EAETT,SAAAA,GArBL2D,EAACxE,EAAO,CAAA,cACS,kBAAiBF,MACvBY,EACaT,mBAAAa,IAAsBQ,EAAY,GAAM,IAC3ChB,gBAAAS,qBACGC,EAAiByD,oBAChBxD,EACrByD,QAASV,WAERrC,MAiBsCR,GACzC,MAMJ8B,EAAgB,+BAChBD,EAAyB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lifesg/react-design-system",
-  "version": "1.0.0-alpha.7",
+  "version": "1.0.0-alpha.9",
   "description": "A component design system for LifeSG web apps",
   "main": "./cjs/index.js",
   "module": "./index.js",

package/popover/index.js

@@ -99,7 +99,7 @@ var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.pr
             `,e.$disableTransition&&(t+=c`
                 transition: none;
             `),t}}
-`,ee=({show:t=!1,rootId:n,onOverlayClick:C,children:c,backgroundOpacity:u,backgroundBlur:d=!0,disableTransition:s=!1,enableOverlayClick:f=!1,zIndex:p,id:h})=>{const[L,y]=o(null),[m,v]=o(),g=i(),H=i(null),b=c&&r.cloneElement(c,{ref:H}),V=h?`lifesg-ds-overlay-root-${h}`:"lifesg-ds-overlay-root";a((()=>{if(t){const e=x();if(w(e),!e){const e=setTimeout((()=>{Z("add")}),200);return()=>clearTimeout(e)}}else if(!g.current){const e=setTimeout((()=>{Z("add")}),200);return()=>clearTimeout(e)}}),[t]),a((()=>{y(M());const e=x();return w(e),e||S(),()=>{Z("remove")}}),[]);const w=e=>{g.current=e,v(e)},M=()=>document&&n?document.getElementById(n):document?document.body:null,x=()=>document.body.classList.contains(ne),S=()=>{if(!document.getElementById(te)){const e=document.createElement("style");e.id=te;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${ne} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${ne}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},Z=e=>{const t=document.body.classList.contains(ne);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(ne):document.body.classList.add(ne)},$=e=>{e.preventDefault();const t=H.current?.firstChild;t&&t.contains(e.target)||C&&f&&C()};return L?l.createPortal(e(J,{id:V,"data-testid":V,$show:t,zIndex:p,$stacked:m,children:c&&e(K,{"data-testid":"overlay-wrapper",$show:t,$backgroundOpacity:u||(m?.5:.8),$backgroundBlur:d,$disableTransition:s,$enableOverlayClick:f,onClick:$,children:b})}),L):null},te="lifesg-ds-overlay-stylesheet",ne="lifesg-ds-overlay-open",re=e=>Object.keys(f).reduce(((t,n)=>{const r=f[n];return t[n]=`@media screen and (${e}: ${r}px)`,t}),{}),oe=re("max-width"),ie=(re("min-width"),C.div`
+`,ee=({show:t=!1,rootId:n,onOverlayClick:C,children:c,backgroundOpacity:u,backgroundBlur:d=!0,disableTransition:s=!1,enableOverlayClick:f=!1,zIndex:p,id:h})=>{const[L,y]=o(null),[m,v]=o(),g=i(),H=i(null),b=c&&r.cloneElement(c,{ref:H}),V=h?`lifesg-ds-overlay-root-${h}`:"lifesg-ds-overlay-root";a((()=>{if(t){const e=x();if(w(e),!e){const e=setTimeout((()=>{Z("add")}),200);return()=>clearTimeout(e)}}else if(!g.current){const e=setTimeout((()=>{Z("remove")}),200);return()=>clearTimeout(e)}}),[t]),a((()=>{y(M());const e=x();return w(e),e||S(),()=>{Z("remove")}}),[]);const w=e=>{g.current=e,v(e)},M=()=>document&&n?document.getElementById(n):document?document.body:null,x=()=>document.body.classList.contains(ne),S=()=>{if(!document.getElementById(te)){const e=document.createElement("style");e.id=te;const t=document.documentElement.clientWidth,n=window.innerWidth-t;e.innerHTML=`\n\t\t\t\t.${ne} {\n\t\t\t\t\toverflow: hidden;\n\t\t\t\t\tpadding-right: ${n}px !important;\n\t\t\t\t\t-ms-overflow-style: none;\n\t\t\t\t\tscrollbar-width: none;\n\t\t\t\t}\n\n\t\t\t\t.${ne}::-webkit-scrollbar {\n\t\t\t\t\tdisplay: none;\n\t\t\t\t}\n\t\t\t`,document.body.appendChild(e)}},Z=e=>{const t=document.body.classList.contains(ne);"add"!==e||t?"remove"===e&&t&&document.body.classList.remove(ne):document.body.classList.add(ne)},$=e=>{e.preventDefault();const t=H.current?.firstChild;t&&t.contains(e.target)||C&&f&&C()};return L?l.createPortal(e(J,{id:V,"data-testid":V,$show:t,zIndex:p,$stacked:m,children:c&&e(K,{"data-testid":"overlay-wrapper",$show:t,$backgroundOpacity:u||(m?.5:.8),$backgroundBlur:d,$disableTransition:s,$enableOverlayClick:f,onClick:$,children:b})}),L):null},te="lifesg-ds-overlay-stylesheet",ne="lifesg-ds-overlay-open",re=e=>Object.keys(f).reduce(((t,n)=>{const r=f[n];return t[n]=`@media screen and (${e}: ${r}px)`,t}),{}),oe=re("max-width"),ie=(re("min-width"),C.div`
     position: relative;
     display: flex;
     justify-content: center;
@@ -109,16 +109,14 @@ var t=Object.getOwnPropertySymbols,n=Object.prototype.hasOwnProperty,r=Object.pr
     overflow: hidden;
     ${e=>{return t=e.show,n=e.animationFrom||"bottom",t?`\n\t\t\t${n}: 0;\n\t\t\topacity: 1;\n\t\t\ttransition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n\t\t\ttransition-delay: 200ms;\n\t\t`:`\n\t\t${n}: -3%;\n\t\topacity: 0;\n\t\ttransition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n\t`;var t,n}}
 
-    ${e=>e.verticalHeight?c`
-                ${oe.mobileL} {
-                    height: calc(${e.verticalHeight}px * 100);
-                }
-            `:c`
-                ${oe.mobileL} {
-                    height: calc(1vh * 100);
-                }
-            `}
-`),ae=({id:t="modal",show:n,animationFrom:r="bottom",children:i,enableOverlayClick:l=!0,rootComponentId:C,zIndex:c,onOverlayClick:u,...d})=>{const[s,f]=o();a((()=>(f(.01*window.innerHeight),window.addEventListener("resize",p),()=>{window.removeEventListener("resize",p)})),[]);const p=()=>{const e=.01*window.innerHeight;f(e)};return e(ee,{"data-testid":`${t}-overlay`,show:n,enableOverlayClick:l,onOverlayClick:u,id:t,rootId:C,zIndex:c,children:e(ie,{show:n,animationFrom:r,"data-testid":t,verticalHeight:s,...d,children:i})})};var le=Array.isArray,Ce=le,ce=E,ue=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,de=/^\w*$/;var se=function(e,t){if(Ce(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!ce(e))||(de.test(e)||!ue.test(e)||null!=t&&e in Object(t))},fe=k,pe=p;var he,Le=function(e){if(!pe(e))return!1;var t=fe(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t},ye=y["__core-js_shared__"],me=(he=/[^.]+$/.exec(ye&&ye.keys&&ye.keys.IE_PROTO||""))?"Symbol(src)_1."+he:"";var ve=function(e){return!!me&&me in e},ge=Function.prototype.toString;var He=Le,be=ve,Ve=p,we=function(e){if(null!=e){try{return ge.call(e)}catch(e){}try{return e+""}catch(e){}}return""},Me=/^\[object .+?Constructor\]$/,xe=Function.prototype,Se=Object.prototype,Ze=xe.toString,$e=Se.hasOwnProperty,_e=RegExp("^"+Ze.call($e).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var Fe=function(e){return!(!Ve(e)||be(e))&&(He(e)?_e:Me).test(we(e))},Oe=function(e,t){return null==e?void 0:e[t]};var Re=function(e,t){var n=Oe(e,t);return Fe(n)?n:void 0},je=Re(Object,"create"),ke=je;var Be=function(){this.__data__=ke?ke(null):{},this.size=0};var De=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},Ee=je,ze=Object.prototype.hasOwnProperty;var Te=function(e){var t=this.__data__;if(Ee){var n=t[e];return"__lodash_hash_undefined__"===n?void 0:n}return ze.call(t,e)?t[e]:void 0},Pe=je,Ae=Object.prototype.hasOwnProperty;var We=je;var Ie=Be,Ne=De,qe=Te,Qe=function(e){var t=this.__data__;return Pe?void 0!==t[e]:Ae.call(t,e)},Xe=function(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=We&&void 0===t?"__lodash_hash_undefined__":t,this};function Ue(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}Ue.prototype.clear=Ie,Ue.prototype.delete=Ne,Ue.prototype.get=qe,Ue.prototype.has=Qe,Ue.prototype.set=Xe;var Ge=Ue;var Ye=function(){this.__data__=[],this.size=0};var Je=function(e,t){return e===t||e!=e&&t!=t};var Ke=function(e,t){for(var n=e.length;n--;)if(Je(e[n][0],t))return n;return-1},et=Ke,tt=Array.prototype.splice;var nt=Ke;var rt=Ke;var ot=Ke;var it=Ye,at=function(e){var t=this.__data__,n=et(t,e);return!(n<0)&&(n==t.length-1?t.pop():tt.call(t,n,1),--this.size,!0)},lt=function(e){var t=this.__data__,n=nt(t,e);return n<0?void 0:t[n][1]},Ct=function(e){return rt(this.__data__,e)>-1},ct=function(e,t){var n=this.__data__,r=ot(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this};function ut(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}ut.prototype.clear=it,ut.prototype.delete=at,ut.prototype.get=lt,ut.prototype.has=Ct,ut.prototype.set=ct;var dt=ut,st=Re(y,"Map"),ft=Ge,pt=dt,ht=st;var Lt=function(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e};var yt=function(e,t){var n=e.__data__;return Lt(t)?n["string"==typeof t?"string":"hash"]:n.map},mt=yt;var vt=yt;var gt=yt;var Ht=yt;var bt=function(){this.size=0,this.__data__={hash:new ft,map:new(ht||pt),string:new ft}},Vt=function(e){var t=mt(this,e).delete(e);return this.size-=t?1:0,t},wt=function(e){return vt(this,e).get(e)},Mt=function(e){return gt(this,e).has(e)},xt=function(e,t){var n=Ht(this,e),r=n.size;return n.set(e,t),this.size+=n.size==r?0:1,this};function St(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}St.prototype.clear=bt,St.prototype.delete=Vt,St.prototype.get=wt,St.prototype.has=Mt,St.prototype.set=xt;var Zt=St;function $t(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var r=arguments,o=t?t.apply(this,r):r[0],i=n.cache;if(i.has(o))return i.get(o);var a=e.apply(this,r);return n.cache=i.set(o,a)||i,a};return n.cache=new($t.Cache||Zt),n}$t.Cache=Zt;var _t=$t;var Ft=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,Ot=/\\(\\)?/g,Rt=function(e){var t=_t(e,(function(e){return 500===n.size&&n.clear(),e})),n=t.cache;return t}((function(e){var t=[];return 46===e.charCodeAt(0)&&t.push(""),e.replace(Ft,(function(e,n,r,o){t.push(r?o.replace(Ot,"$1"):n||e)})),t}));var jt=function(e,t){for(var n=-1,r=null==e?0:e.length,o=Array(r);++n<r;)o[n]=t(e[n],n,e);return o},kt=le,Bt=E,Dt=w?w.prototype:void 0,Et=Dt?Dt.toString:void 0;var zt=function e(t){if("string"==typeof t)return t;if(kt(t))return jt(t,e)+"";if(Bt(t))return Et?Et.call(t):"";var n=t+"";return"0"==n&&1/t==-Infinity?"-0":n},Tt=zt;var Pt=le,At=se,Wt=Rt,It=function(e){return null==e?"":Tt(e)};var Nt=E;var qt=function(e,t){return Pt(e)?e:At(e,t)?[e]:Wt(It(e))},Qt=function(e){if("string"==typeof e||Nt(e))return e;var t=e+"";return"0"==t&&1/e==-Infinity?"-0":t};var Xt=function(e,t){for(var n=0,r=(t=qt(t,e)).length;null!=e&&n<r;)e=e[Qt(t[n++])];return n&&n==r?e:void 0};var Ut=function(e,t,n){var r=null==e?void 0:Xt(e,t);return void 0===r?n:r};const Gt=(e,t,n)=>t?Ut(n,t)||Ut(e,t):n||e,Yt=(e,t)=>{const n=t||e.defaultValue;return Ut(e.collections,n)};var Jt;!function(e){e.colorScheme="colorScheme",e.layout="layout",e.textStyleScheme="textStyleScheme"}(Jt||(Jt={}));const Kt={collections:{base:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#1C76D5",PrimaryDark:"#1869BF",Secondary:"#0056b3",Accent:{Dark:{1:"#465A88",2:"#556D99",3:"#8D8DBF"},Light:{1:"#57A9FF",2:"#81BFFF",3:"#BED7FF",4:"#E2ECFD",5:"#F6F8FF",6:"#FBFCFE"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}}},bookingsg:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#6F4AB8",PrimaryDark:"#6443A6",Secondary:"#6443A6",Accent:{Dark:{1:"#355985",2:"#68819D",3:"#9AABBE"},Light:{1:"#9F82D9",2:"#B5A5D7",3:"#CEC3E4 ",4:"#E2DBEF",5:"#F2EFF8",6:"#F7F6FB"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}}}},defaultValue:"base"},en=e=>t=>{const n=t.theme,r=Yt(Kt,n[Jt.colorScheme]);return n.options&&n.options.color?Gt(r,e,n.options.color):Gt(r,e)},tn=(en("Brand.1"),en("Brand.2"),en("Brand.3"),en("Brand.4"),en("Brand.5"),en("Brand.6"),en("Primary")),nn=(en("PrimaryDark"),en("Secondary")),rn={Light:{1:en("Accent.Light.1"),2:en("Accent.Light.2"),3:en("Accent.Light.3"),4:en("Accent.Light.4"),5:en("Accent.Light.5"),6:en("Accent.Light.6")},Dark:{1:en("Accent.Dark.1"),2:en("Accent.Dark.2"),3:en("Accent.Dark.3")}},on={1:en("Neutral.1"),2:en("Neutral.2"),3:en("Neutral.3"),4:en("Neutral.4"),5:en("Neutral.5"),6:en("Neutral.6"),7:en("Neutral.7"),8:en("Neutral.8")},an=(en("Validation.Green.Text"),en("Validation.Green.Icon"),en("Validation.Green.Border"),en("Validation.Green.Background"),en("Validation.Orange.Text"),en("Validation.Orange.Icon"),en("Validation.Orange.Border"),en("Validation.Orange.Background"),en("Validation.Orange.Badge"),en("Validation.Red.Text"),en("Validation.Red.Icon"),en("Validation.Red.Border"),en("Validation.Red.Background"),C.svg`
+    ${oe.mobileL} {
+        height: calc(
+            ${e=>e.verticalHeight?`${e.verticalHeight}px`:"1vh"} * 100
+        );
+
+        top: ${e=>e.offsetTop||0}px;
+    }
+`),ae=({id:t="modal",show:n,animationFrom:r="bottom",children:i,enableOverlayClick:l=!0,rootComponentId:C,zIndex:c,onOverlayClick:u,dismissKeyboardOnShow:d=!0,...s})=>{const[f,p]=o(),[h,L]=o();a((()=>window.visualViewport?(m(),window.visualViewport.addEventListener("resize",m),()=>{window.visualViewport.removeEventListener("resize",m)}):(y(),window.addEventListener("resize",y),()=>{window.removeEventListener("resize",y)})),[]),a((()=>{n&&d&&document.activeElement?.blur?.()}),[n]);const y=()=>{const e=.01*window.innerHeight;p(e)},m=()=>{const e=.01*window.visualViewport.height;p(e),L(window.visualViewport.offsetTop)};return e(ee,{"data-testid":`${t}-overlay`,show:n,enableOverlayClick:l,onOverlayClick:u,id:t,rootId:C,zIndex:c,children:e(ie,{show:n,animationFrom:r,"data-testid":t,verticalHeight:f,offsetTop:h,...s,children:i})})};var le=Array.isArray,Ce=le,ce=E,ue=/\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,de=/^\w*$/;var se=function(e,t){if(Ce(e))return!1;var n=typeof e;return!("number"!=n&&"symbol"!=n&&"boolean"!=n&&null!=e&&!ce(e))||(de.test(e)||!ue.test(e)||null!=t&&e in Object(t))},fe=k,pe=p;var he,Le=function(e){if(!pe(e))return!1;var t=fe(e);return"[object Function]"==t||"[object GeneratorFunction]"==t||"[object AsyncFunction]"==t||"[object Proxy]"==t},ye=y["__core-js_shared__"],me=(he=/[^.]+$/.exec(ye&&ye.keys&&ye.keys.IE_PROTO||""))?"Symbol(src)_1."+he:"";var ve=function(e){return!!me&&me in e},ge=Function.prototype.toString;var He=Le,be=ve,Ve=p,we=function(e){if(null!=e){try{return ge.call(e)}catch(e){}try{return e+""}catch(e){}}return""},Me=/^\[object .+?Constructor\]$/,xe=Function.prototype,Se=Object.prototype,Ze=xe.toString,$e=Se.hasOwnProperty,_e=RegExp("^"+Ze.call($e).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$");var Fe=function(e){return!(!Ve(e)||be(e))&&(He(e)?_e:Me).test(we(e))},Oe=function(e,t){return null==e?void 0:e[t]};var Re=function(e,t){var n=Oe(e,t);return Fe(n)?n:void 0},je=Re(Object,"create"),ke=je;var Be=function(){this.__data__=ke?ke(null):{},this.size=0};var De=function(e){var t=this.has(e)&&delete this.__data__[e];return this.size-=t?1:0,t},Ee=je,ze=Object.prototype.hasOwnProperty;var Te=function(e){var t=this.__data__;if(Ee){var n=t[e];return"__lodash_hash_undefined__"===n?void 0:n}return ze.call(t,e)?t[e]:void 0},Pe=je,Ae=Object.prototype.hasOwnProperty;var We=je;var Ie=Be,Ne=De,qe=Te,Qe=function(e){var t=this.__data__;return Pe?void 0!==t[e]:Ae.call(t,e)},Xe=function(e,t){var n=this.__data__;return this.size+=this.has(e)?0:1,n[e]=We&&void 0===t?"__lodash_hash_undefined__":t,this};function Ue(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}Ue.prototype.clear=Ie,Ue.prototype.delete=Ne,Ue.prototype.get=qe,Ue.prototype.has=Qe,Ue.prototype.set=Xe;var Ge=Ue;var Ye=function(){this.__data__=[],this.size=0};var Je=function(e,t){return e===t||e!=e&&t!=t};var Ke=function(e,t){for(var n=e.length;n--;)if(Je(e[n][0],t))return n;return-1},et=Ke,tt=Array.prototype.splice;var nt=Ke;var rt=Ke;var ot=Ke;var it=Ye,at=function(e){var t=this.__data__,n=et(t,e);return!(n<0)&&(n==t.length-1?t.pop():tt.call(t,n,1),--this.size,!0)},lt=function(e){var t=this.__data__,n=nt(t,e);return n<0?void 0:t[n][1]},Ct=function(e){return rt(this.__data__,e)>-1},ct=function(e,t){var n=this.__data__,r=ot(n,e);return r<0?(++this.size,n.push([e,t])):n[r][1]=t,this};function ut(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}ut.prototype.clear=it,ut.prototype.delete=at,ut.prototype.get=lt,ut.prototype.has=Ct,ut.prototype.set=ct;var dt=ut,st=Re(y,"Map"),ft=Ge,pt=dt,ht=st;var Lt=function(e){var t=typeof e;return"string"==t||"number"==t||"symbol"==t||"boolean"==t?"__proto__"!==e:null===e};var yt=function(e,t){var n=e.__data__;return Lt(t)?n["string"==typeof t?"string":"hash"]:n.map},mt=yt;var vt=yt;var gt=yt;var Ht=yt;var bt=function(){this.size=0,this.__data__={hash:new ft,map:new(ht||pt),string:new ft}},Vt=function(e){var t=mt(this,e).delete(e);return this.size-=t?1:0,t},wt=function(e){return vt(this,e).get(e)},Mt=function(e){return gt(this,e).has(e)},xt=function(e,t){var n=Ht(this,e),r=n.size;return n.set(e,t),this.size+=n.size==r?0:1,this};function St(e){var t=-1,n=null==e?0:e.length;for(this.clear();++t<n;){var r=e[t];this.set(r[0],r[1])}}St.prototype.clear=bt,St.prototype.delete=Vt,St.prototype.get=wt,St.prototype.has=Mt,St.prototype.set=xt;var Zt=St;function $t(e,t){if("function"!=typeof e||null!=t&&"function"!=typeof t)throw new TypeError("Expected a function");var n=function(){var r=arguments,o=t?t.apply(this,r):r[0],i=n.cache;if(i.has(o))return i.get(o);var a=e.apply(this,r);return n.cache=i.set(o,a)||i,a};return n.cache=new($t.Cache||Zt),n}$t.Cache=Zt;var _t=$t;var Ft=/[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g,Ot=/\\(\\)?/g,Rt=function(e){var t=_t(e,(function(e){return 500===n.size&&n.clear(),e})),n=t.cache;return t}((function(e){var t=[];return 46===e.charCodeAt(0)&&t.push(""),e.replace(Ft,(function(e,n,r,o){t.push(r?o.replace(Ot,"$1"):n||e)})),t}));var jt=function(e,t){for(var n=-1,r=null==e?0:e.length,o=Array(r);++n<r;)o[n]=t(e[n],n,e);return o},kt=le,Bt=E,Dt=w?w.prototype:void 0,Et=Dt?Dt.toString:void 0;var zt=function e(t){if("string"==typeof t)return t;if(kt(t))return jt(t,e)+"";if(Bt(t))return Et?Et.call(t):"";var n=t+"";return"0"==n&&1/t==-Infinity?"-0":n},Tt=zt;var Pt=le,At=se,Wt=Rt,It=function(e){return null==e?"":Tt(e)};var Nt=E;var qt=function(e,t){return Pt(e)?e:At(e,t)?[e]:Wt(It(e))},Qt=function(e){if("string"==typeof e||Nt(e))return e;var t=e+"";return"0"==t&&1/e==-Infinity?"-0":t};var Xt=function(e,t){for(var n=0,r=(t=qt(t,e)).length;null!=e&&n<r;)e=e[Qt(t[n++])];return n&&n==r?e:void 0};var Ut=function(e,t,n){var r=null==e?void 0:Xt(e,t);return void 0===r?n:r};const Gt=(e,t,n)=>t?Ut(n,t)||Ut(e,t):n||e,Yt=(e,t)=>{const n=t||e.defaultValue;return Ut(e.collections,n)};var Jt;!function(e){e.colorScheme="colorScheme",e.layout="layout",e.textStyleScheme="textStyleScheme"}(Jt||(Jt={}));const Kt={collections:{base:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#1C76D5",PrimaryDark:"#1869BF",Secondary:"#0056b3",Accent:{Dark:{1:"#465A88",2:"#556D99",3:"#8D8DBF"},Light:{1:"#57A9FF",2:"#81BFFF",3:"#BED7FF",4:"#E2ECFD",5:"#F6F8FF",6:"#FBFCFE"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}}},bookingsg:{Brand:{1:"#EF413D",2:"#F26664",3:"#F58E8B",4:"#F9B5B2",5:"#FDDDD7",6:"#FFEEEA"},Primary:"#6F4AB8",PrimaryDark:"#6443A6",Secondary:"#6443A6",Accent:{Dark:{1:"#355985",2:"#68819D",3:"#9AABBE"},Light:{1:"#9F82D9",2:"#B5A5D7",3:"#CEC3E4 ",4:"#E2DBEF",5:"#F2EFF8",6:"#F7F6FB"}},Neutral:{1:"#282828",2:"#424242",3:"#686868",4:"#A4A4A4",5:"#E0E4E5",6:"#ECEFEF",7:"#F8F8F8",8:"#FFFFFF"},Validation:{Green:{Text:"#097123",Icon:"#4FC029",Border:"#95D97F",Background:"#F9FDF8"},Orange:{Text:"#B34E00",Icon:"#FEAB10",Border:"#F9CB77",Background:"#FFFCF7",Badge:"#F57F17"},Red:{Text:"#C60000",Icon:"#C60000",Border:"#DD6666",Background:"#FDF7F7"}}}},defaultValue:"base"},en=e=>t=>{const n=t.theme,r=Yt(Kt,n[Jt.colorScheme]);return n.options&&n.options.color?Gt(r,e,n.options.color):Gt(r,e)},tn=(en("Brand.1"),en("Brand.2"),en("Brand.3"),en("Brand.4"),en("Brand.5"),en("Brand.6"),en("Primary")),nn=(en("PrimaryDark"),en("Secondary")),rn={Light:{1:en("Accent.Light.1"),2:en("Accent.Light.2"),3:en("Accent.Light.3"),4:en("Accent.Light.4"),5:en("Accent.Light.5"),6:en("Accent.Light.6")},Dark:{1:en("Accent.Dark.1"),2:en("Accent.Dark.2"),3:en("Accent.Dark.3")}},on={1:en("Neutral.1"),2:en("Neutral.2"),3:en("Neutral.3"),4:en("Neutral.4"),5:en("Neutral.5"),6:en("Neutral.6"),7:en("Neutral.7"),8:en("Neutral.8")},an=(en("Validation.Green.Text"),en("Validation.Green.Icon"),en("Validation.Green.Border"),en("Validation.Green.Background"),en("Validation.Orange.Text"),en("Validation.Orange.Icon"),en("Validation.Orange.Border"),en("Validation.Orange.Background"),en("Validation.Orange.Badge"),en("Validation.Red.Text"),en("Validation.Red.Icon"),en("Validation.Red.Border"),en("Validation.Red.Background"),C.svg`
     height: 1rem;
     width: 1rem;
     color: ${tn};