@lifesg/react-design-system 4.0.0-alpha.1 → 4.0.0-alpha.2

package/shared/fade-wrapper/fade-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport {\n    Content,\n    Fade,\n    FadeIndicatorButton,\n    Wrapper,\n} from \"./fade-wrapper.style\";\nimport type { FadeColorSet, FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n\n    const throttledScrollHandler = throttle(handleScroll, 50);\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n        };\n    }, []);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleScroll() {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        let fadeColorSet: FadeColorSet;\n\n        if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n            // Single array, apply same color\n            fadeColorSet = {\n                left: fadeColor,\n                right: fadeColor,\n            };\n        } else if (!fadeColor) {\n            fadeColorSet = {\n                left: undefined,\n                right: undefined,\n            };\n        } else {\n            fadeColorSet = fadeColor as FadeColorSet;\n        }\n\n        return (\n            <>\n                {showFadeLeft && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.left}\n                        $position=\"left\"\n                        $showIndicator={showIndicator}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"left\"\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n                {showFadeRight && (\n                    <Fade\n                        $backgroundColor={fadeColorSet.right}\n                        $position=\"right\"\n                        $showIndicator={showIndicator}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <FadeIndicatorButton\n                                $position=\"right\"\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </FadeIndicatorButton>\n                        )}\n                    </Fade>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <Wrapper ref={wrapperRef} {...otherProps}>\n            <Content ref={contentRef}>{children}</Content>\n            {renderFade()}\n        </Wrapper>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","throttledScrollHandler","throttle","handleScroll","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","handleResize","useResizeDetector","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","useEffect","addEventListener","removeEventListener","_jsxs","Wrapper","Object","assign","_jsx","Content","fadeColorSet","Array","isArray","length","left","right","undefined","_Fragment","Fade","$backgroundColor","$position","FadeIndicatorButton","ChevronLeftIcon","$showIndicator","ChevronRightIcon","renderFade"],"mappings":"8kBAqBA,MA2KaA,EAAcC,GA3KT,CACdC,EAQAC,KARA,IAAAC,SACIA,EAAQC,UACRA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQN,EACLO,EAAUC,EAAAR,EANjB,oEAaA,MAAOS,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MAEpCE,EAAyBC,EAASC,EAAc,IAyCtD,SAASA,IACL,MAAMC,EAAUN,EAAWO,QACrBC,EAAUN,EAAWK,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpDX,EACIY,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtCd,EAAgBY,EAAQK,YAAc,KAEtCd,GAAiB,GACjBH,GAAgB,GAExB,CAEA,SAASkB,IACLT,IAEIb,GACAA,EAAS,CACLgB,QAASN,EAAWK,QACpBD,QAASN,EAAWO,SAQhC,CAzEAQ,EAAkB,CACdvB,SAAUsB,EACVE,UAAWhB,EACXiB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIN,GACJ,MAORO,GAAU,KACN,MAAMb,EAAUN,EAAWK,QAQ3B,OANAF,IAEIG,GACAA,EAAQc,iBAAiB,SAAUnB,GAGhC,KACCK,GACAA,EAAQe,oBAAoB,SAAUpB,EAC1C,CACH,GACF,IAwGH,OACIqB,EAACC,EAAOC,OAAAC,OAAA,CAACxC,IAAKa,GAAgBP,EAAU,CAAAL,SAAA,CACpCwC,EAACC,GAAQ1C,IAAKe,EAAUd,SAAGA,IA5DhB,MACf,IAAI0C,EAiBJ,OAbIA,EAFAC,MAAMC,QAAQ3C,IAAcA,EAAU4C,OAAS,EAEhC,CACXC,KAAM7C,EACN8C,MAAO9C,GAEHA,GACO,CACX6C,UAAME,EACND,WAAOC,GAOXZ,EAAAa,EAAA,CAAAjD,SAAA,CACKO,GACGiC,EAACU,EAAI,CAAAC,iBACiBT,EAAaI,KAAIM,UACzB,sBACMjD,EAAa,UACrB,YAAWH,SAElBG,GACGqC,EAACa,EAAmB,CAAAD,UACN,OAAM,UACR,sCAERZ,EAACc,EAAe,CAAA,OAK/B5C,GACG8B,EAACU,oBACqBR,EAAaK,MAAKK,UAC1B,QAAOG,eACDpD,EAAa,UACrB,sBAEPA,GACGqC,EAACa,EAAmB,CAAAD,UACN,QAAO,UACT,8BAA6BpD,SAErCwC,EAACgB,EAAgB,CAAA,SAKlC,EAOFC,MACK"}
+{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    const fadeColorSet = getFadeColorSet(fadeColor);\n\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.left,\n            showIndicator\n        ),\n    });\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.right,\n            showIndicator\n        ),\n    });\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const handleScroll = useCallback(() => {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }, []);\n\n    const throttledScrollHandler = useMemo(() => {\n        return throttle(handleScroll, 50);\n    }, [handleScroll]);\n\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n\n            throttledScrollHandler.cancel();\n        };\n    }, [handleScroll, throttledScrollHandler]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorLeft\n                                )}\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n                {showFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorRight\n                                )}\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <div ref={contentRef} className={styles.content}>\n                {children}\n            </div>\n            {renderFade()}\n        </div>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"4pCAsBA,MA0LaA,EAAcC,GA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,GAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,GAAQ,IAC5BC,EAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,GAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAKC,EAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,EAAcxD,SAC1CA,IAlDLkD,eACK1C,GACG+C,EAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAKI,EAAaC,GAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAC,GACH,UACO,6BAA4B7D,SAEpCuD,EAACO,EAAe,CAAA,OAK/BnD,GACG4C,EAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAKI,EAAaM,aACrB,aAAY/D,SAEnBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAI,aAEI,8BAA6BhE,SAErCuD,EAACU,EAAgB,CAAA,aAmBnC"}

package/shared/fade-wrapper/fade-wrapper.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const tokens: {
+    backgroundColor: string;
+};
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const fade: import("@linaria/core").LinariaClassName;
+export declare const fadeLeft: import("@linaria/core").LinariaClassName;
+export declare const fadeRight: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;
+export declare const fadeIndicatorButton: import("@linaria/core").LinariaClassName;
+export declare const indicatorLeft: import("@linaria/core").LinariaClassName;
+export declare const indicatorRight: import("@linaria/core").LinariaClassName;

package/shared/fade-wrapper/fade-wrapper.styles.js

@@ -0,0 +1,2 @@
+import"./fade-wrapper.styles_16iug7l.css";const r={backgroundColor:"--fds-internal-fadeWrapper-fade-backgroundColor"},a="wslc1qs",d="f4ndmik",e="f10r53jk",f="f1mdli9d",o="cv4qfjc",s="fgwhr72",c="i135a9q0",p="i18cgy8z";export{o as content,d as fade,s as fadeIndicatorButton,e as fadeLeft,f as fadeRight,c as indicatorLeft,p as indicatorRight,r as tokens,a as wrapper};
+//# sourceMappingURL=fade-wrapper.styles.js.map

package/shared/fade-wrapper/fade-wrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fade-wrapper.styles.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Spacing } from \"../../theme/tokens\";\n\nexport const tokens = {\n    backgroundColor: \"--fds-internal-fadeWrapper-fade-backgroundColor\",\n};\n\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n`;\n\nexport const fade = css`\n    width: 64px;\n    height: 100%;\n    top: 0;\n    position: absolute;\n    pointer-events: none;\n    display: flex;\n    align-items: center;\n`;\n\nexport const fadeLeft = css`\n    left: 0;\n\n    ${MediaQuery.MaxWidth.lg} {\n        background-image: linear-gradient(\n            to right,\n            var(${tokens.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const fadeRight = css`\n    right: 0;\n\n    ${MediaQuery.MaxWidth.lg} {\n        background-image: linear-gradient(\n            to left,\n            var(${tokens.backgroundColor}, ${Colour.bg}),\n            rgba(255, 255, 255, 0.001)\n        );\n    }\n`;\n\nexport const content = css`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    overflow-x: scroll;\n    overflow-y: hidden;\n    white-space: nowrap;\n    scrollbar-width: none; /* Firefox */\n    -ms-overflow-style: none; /* IE 10+ */\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n\nexport const fadeIndicatorButton = css`\n    display: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        height: 100%;\n        width: 100%;\n        padding: unset;\n        align-items: center;\n\n        svg {\n            color: ${Colour[\"icon\"]};\n        }\n    }\n`;\n\nexport const indicatorLeft = css`\n    justify-content: left;\n    padding-left: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const indicatorRight = css`\n    justify-content: right;\n    padding-right: ${Spacing[\"spacing-8\"]};\n`;\n"],"names":["tokens","backgroundColor","wrapper","fade","fadeLeft","fadeRight","content","fadeIndicatorButton","indicatorLeft","indicatorRight"],"mappings":"6EAIO,MAAMA,EAAS,CAClBC,gBAAiB,mDAGRC,EAAO,UAKPC,EAAI,UAUJC,EAAQ,WAYRC,EAAS,WAYTC,EAAO,UAcPC,EAAmB,UAgBnBC,EAAa,WAKbC,EAAc"}

package/shared/fade-wrapper/fade-wrapper.styles_16iug7l.css

@@ -0,0 +1,16 @@
+.wslc1qs{position:relative;width:100%;}
+.f4ndmik{width:64px;height:100%;top:0;position:absolute;pointer-events:none;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.f10r53jk{left:0;}:where(body.fds-breakpoint-lg-max) .f10r53jk{background-image:linear-gradient(
+            to right,
+            var(--fds-internal-fadeWrapper-fade-backgroundColor, var(--fds-colour-bg)),
+            rgba(255, 255, 255, 0.001)
+        );}
+.f1mdli9d{right:0;}:where(body.fds-breakpoint-lg-max) .f1mdli9d{background-image:linear-gradient(
+            to left,
+            var(--fds-internal-fadeWrapper-fade-backgroundColor, var(--fds-colour-bg)),
+            rgba(255, 255, 255, 0.001)
+        );}
+.cv4qfjc{position:relative;width:100%;height:100%;overflow-x:scroll;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;}.cv4qfjc::-webkit-scrollbar{display:none;}
+.fgwhr72{display:none;}:where(body.fds-breakpoint-lg-max) .fgwhr72{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;padding:unset;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}:where(body.fds-breakpoint-lg-max) .fgwhr72 svg{color:var(--fds-colour-icon);}
+.i135a9q0{-webkit-box-pack:left;-ms-flex-pack:left;-webkit-justify-content:left;justify-content:left;padding-left:var(--fds-spacing-8);}
+.i18cgy8z{-webkit-box-pack:right;-ms-flex-pack:right;-webkit-justify-content:right;justify-content:right;padding-right:var(--fds-spacing-8);}

package/shared/fade-wrapper/helpers.d.ts

@@ -0,0 +1,3 @@
+import type { FadeColorSet, FadeWrapperProps } from "./types";
+export declare function getFadeColorSet(fadeColor: FadeWrapperProps["fadeColor"] | undefined): FadeColorSet;
+export declare function getFadeBackgroundColorValue(color: string[] | undefined, showIndicator: boolean): string | null;

package/shared/fade-wrapper/helpers.js

@@ -0,0 +1,2 @@
+import"../../theme/theme-provider/index.js";import"react";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as e}from"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";function t(e){return Array.isArray(e)&&e.length>0?{left:e,right:e}:e||{left:void 0,right:void 0}}function r(t,r){return t&&t.length>0?t.join(", "):r?`${e.bg}, ${e.bg}`:null}export{r as getFadeBackgroundColorValue,t as getFadeColorSet};
+//# sourceMappingURL=helpers.js.map

package/shared/fade-wrapper/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../src/shared/fade-wrapper/helpers.tsx"],"sourcesContent":["import { Colour } from \"../../theme\";\nimport type { FadeColorSet, FadeWrapperProps } from \"./types\";\n\nexport function getFadeColorSet(\n    fadeColor: FadeWrapperProps[\"fadeColor\"] | undefined\n): FadeColorSet {\n    if (Array.isArray(fadeColor) && fadeColor.length > 0) {\n        return {\n            left: fadeColor,\n            right: fadeColor,\n        };\n    }\n\n    if (fadeColor) {\n        return fadeColor as FadeColorSet;\n    }\n\n    return {\n        left: undefined,\n        right: undefined,\n    };\n}\n\nexport function getFadeBackgroundColorValue(\n    color: string[] | undefined,\n    showIndicator: boolean\n) {\n    if (color && color.length > 0) {\n        return color.join(\", \");\n    }\n\n    if (showIndicator) {\n        return `${Colour.bg}, ${Colour.bg}`;\n    }\n\n    return null;\n}\n"],"names":["getFadeColorSet","fadeColor","Array","isArray","length","left","right","undefined","getFadeBackgroundColorValue","color","showIndicator","join","Colour","bg"],"mappings":"idAGM,SAAUA,EACZC,GAEA,OAAIC,MAAMC,QAAQF,IAAcA,EAAUG,OAAS,EACxC,CACHC,KAAMJ,EACNK,MAAOL,GAIXA,GAIG,CACHI,UAAME,EACND,WAAOC,EAEf,CAEM,SAAUC,EACZC,EACAC,GAEA,OAAID,GAASA,EAAML,OAAS,EACjBK,EAAME,KAAK,MAGlBD,EACO,GAAGE,EAAOC,OAAOD,EAAOC,KAG5B,IACX"}

package/shared/hooks/index.d.ts

@@ -1 +1,2 @@
+export * from "./use-state-callback";
 export * from "./useViewport";

package/shared/hooks/use-state-callback.d.ts

@@ -0,0 +1,5 @@
+type SetStateAction<S> = S | ((prevState: S) => S);
+type SetStateCallback<S> = (state: S) => void;
+type SetStateDispatch<S> = (state: SetStateAction<S>, callback?: SetStateCallback<S>) => void;
+export declare const useStateCallback: <S>(initialState: S | (() => S)) => [S, SetStateDispatch<S>];
+export {};

package/shared/hooks/use-state-callback.js

@@ -0,0 +1,2 @@
+import{useState as r,useRef as t,useCallback as c,useEffect as e}from"react";const n=n=>{const[o,u]=r(n),i=t(void 0),d=c(((r,t)=>{i.current=t,u(r)}),[]);return e((()=>{i.current&&(i.current(o),i.current=void 0)}),[o]),[o,d]};export{n as useStateCallback};
+//# sourceMappingURL=use-state-callback.js.map

package/shared/hooks/use-state-callback.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-state-callback.js","sources":["../../../src/shared/hooks/use-state-callback.ts"],"sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\ntype SetStateAction<S> = S | ((prevState: S) => S);\ntype SetStateCallback<S> = (state: S) => void;\ntype SetStateDispatch<S> = (\n    state: SetStateAction<S>,\n    callback?: SetStateCallback<S>\n) => void;\n\nexport const useStateCallback = <S>(\n    initialState: S | (() => S)\n): [S, SetStateDispatch<S>] => {\n    const [state, setState] = useState<S>(initialState);\n    const callbackRef = useRef<SetStateCallback<S> | undefined>(undefined);\n\n    const setStateDispatch = useCallback<SetStateDispatch<S>>(\n        (value, callback) => {\n            callbackRef.current = callback;\n            setState(value);\n        },\n        []\n    );\n\n    useEffect(() => {\n        if (callbackRef.current) {\n            callbackRef.current(state);\n            callbackRef.current = undefined;\n        }\n    }, [state]);\n\n    return [state, setStateDispatch];\n};\n"],"names":["useStateCallback","initialState","state","setState","useState","callbackRef","useRef","undefined","setStateDispatch","useCallback","value","callback","current","useEffect"],"mappings":"6EASO,MAAMA,EACTC,IAEA,MAAOC,EAAOC,GAAYC,EAAYH,GAChCI,EAAcC,OAAwCC,GAEtDC,EAAmBC,GACrB,CAACC,EAAOC,KACJN,EAAYO,QAAUD,EACtBR,EAASO,EAAM,GAEnB,IAUJ,OAPAG,GAAU,KACFR,EAAYO,UACZP,EAAYO,QAAQV,GACpBG,EAAYO,aAAUL,EAC1B,GACD,CAACL,IAEG,CAACA,EAAOM,EAAiB"}

package/shared/hooks/useViewport.js

@@ -1,2 +1,2 @@
-import{useState as e,useCallback as i,useEffect as o}from"react";const t=()=>{const[t,n]=e(),[r,w]=e(),s=i((()=>{const e=.01*window.innerHeight;n(e)}),[]),v=i((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;n(e),w(window.visualViewport.offsetTop)}}),[]);return o((()=>window.visualViewport?(v(),window.visualViewport.addEventListener("resize",v),()=>{var e;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",v)}):(s(),window.addEventListener("resize",s),()=>{window.removeEventListener("resize",s)})),[]),{verticalHeight:t,offsetTop:r}};export{t as useViewport};
+import e from"../../external/lodash/throttle.js";import{useState as i,useCallback as o,useEffect as t}from"react";const r=()=>{const[r,n]=i(),[w,s]=i(),v=o((()=>{const e=.01*window.innerHeight;n(e)}),[]),d=o((()=>{if(window.visualViewport){const e=.01*window.visualViewport.height;n(e),s(window.visualViewport.offsetTop)}}),[]);return t((()=>{if(window.visualViewport){const i=e(d,300);return d(),window.visualViewport.addEventListener("resize",d),window.visualViewport.addEventListener("scroll",i),()=>{var e,o;null===(e=window.visualViewport)||void 0===e||e.removeEventListener("resize",d),null===(o=window.visualViewport)||void 0===o||o.removeEventListener("scroll",i)}}return v(),window.addEventListener("resize",v),()=>{window.removeEventListener("resize",v)}}),[]),{verticalHeight:r,offsetTop:w}};export{r as useViewport};
 //# sourceMappingURL=useViewport.js.map

package/shared/hooks/useViewport.js.map

@@ -1 +1 @@
-{"version":3,"file":"useViewport.js","sources":["../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from \"react\";\n\nexport const useViewport = () => {\n    const [verticalHeight, setVerticalHeight] = useState<number>();\n    const [offsetTop, setOffsetTop] = useState<number>();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = useCallback(() => {\n        const newVerticalHeight = window.innerHeight * 0.01;\n        setVerticalHeight(newVerticalHeight);\n    }, []);\n\n    const handleViewportResize = useCallback(() => {\n        if (window.visualViewport) {\n            const newVerticalHeight = window.visualViewport.height * 0.01;\n            setVerticalHeight(newVerticalHeight);\n            setOffsetTop(window.visualViewport.offsetTop);\n        }\n    }, []);\n\n    useEffect(() => {\n        // set initial vh\n\n        // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n        if (window.visualViewport) {\n            handleViewportResize();\n            window.visualViewport.addEventListener(\n                \"resize\",\n                handleViewportResize\n            );\n            return () => {\n                window.visualViewport?.removeEventListener(\n                    \"resize\",\n                    handleViewportResize\n                );\n            };\n        } else {\n            // fallback to Window API\n            handleWindowResize();\n            window.addEventListener(\"resize\", handleWindowResize);\n            return () => {\n                window.removeEventListener(\"resize\", handleWindowResize);\n            };\n        }\n    }, []);\n\n    return {\n        verticalHeight,\n        offsetTop,\n    };\n};\n"],"names":["useViewport","verticalHeight","setVerticalHeight","useState","offsetTop","setOffsetTop","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","useEffect","addEventListener","_a","removeEventListener"],"mappings":"iEAEO,MAAMA,EAAc,KACvB,MAAOC,EAAgBC,GAAqBC,KACrCC,EAAWC,GAAgBF,IAK5BG,EAAqBC,GAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCR,EAAkBM,EAAkB,GACrC,IAEGG,EAAuBJ,GAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDX,EAAkBM,GAClBH,EAAaI,OAAOG,eAAeR,UACvC,IACD,IA4BH,OA1BAU,GAAU,IAIFL,OAAOG,gBACPD,IACAF,OAAOG,eAAeG,iBAClB,SACAJ,GAEG,WACkB,QAArBK,EAAAP,OAAOG,sBAAc,IAAAI,GAAAA,EAAEC,oBACnB,SACAN,EACH,IAILL,IACAG,OAAOM,iBAAiB,SAAUT,GAC3B,KACHG,OAAOQ,oBAAoB,SAAUX,EAAmB,IAGjE,IAEI,CACHL,iBACAG,YACH"}
+{"version":3,"file":"useViewport.js","sources":["../../../src/shared/hooks/useViewport.tsx"],"sourcesContent":["import throttle from \"lodash/throttle\";\nimport { useCallback, useEffect, useState } from \"react\";\n\nexport const useViewport = () => {\n    const [verticalHeight, setVerticalHeight] = useState<number>();\n    const [offsetTop, setOffsetTop] = useState<number>();\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = useCallback(() => {\n        const newVerticalHeight = window.innerHeight * 0.01;\n        setVerticalHeight(newVerticalHeight);\n    }, []);\n\n    const handleViewportResize = useCallback(() => {\n        if (window.visualViewport) {\n            const newVerticalHeight = window.visualViewport.height * 0.01;\n            setVerticalHeight(newVerticalHeight);\n            setOffsetTop(window.visualViewport.offsetTop);\n        }\n    }, []);\n\n    useEffect(() => {\n        // set initial vh\n\n        // use VisualViewport API if available, it gives more accurate dimensions when iOS software keyboard is active\n        if (window.visualViewport) {\n            const handleViewportScroll = throttle(handleViewportResize, 300);\n            handleViewportResize();\n            window.visualViewport.addEventListener(\n                \"resize\",\n                handleViewportResize\n            );\n            window.visualViewport.addEventListener(\n                \"scroll\",\n                handleViewportScroll\n            );\n\n            return () => {\n                window.visualViewport?.removeEventListener(\n                    \"resize\",\n                    handleViewportResize\n                );\n                window.visualViewport?.removeEventListener(\n                    \"scroll\",\n                    handleViewportScroll\n                );\n            };\n        } else {\n            // fallback to Window API\n            handleWindowResize();\n            window.addEventListener(\"resize\", handleWindowResize);\n            return () => {\n                window.removeEventListener(\"resize\", handleWindowResize);\n            };\n        }\n    }, []);\n\n    return {\n        verticalHeight,\n        offsetTop,\n    };\n};\n"],"names":["useViewport","verticalHeight","setVerticalHeight","useState","offsetTop","setOffsetTop","handleWindowResize","useCallback","newVerticalHeight","window","innerHeight","handleViewportResize","visualViewport","height","useEffect","handleViewportScroll","throttle","addEventListener","_a","removeEventListener","_b"],"mappings":"kHAGO,MAAMA,EAAc,KACvB,MAAOC,EAAgBC,GAAqBC,KACrCC,EAAWC,GAAgBF,IAK5BG,EAAqBC,GAAY,KACnC,MAAMC,EAAyC,IAArBC,OAAOC,YACjCR,EAAkBM,EAAkB,GACrC,IAEGG,EAAuBJ,GAAY,KACrC,GAAIE,OAAOG,eAAgB,CACvB,MAAMJ,EAAmD,IAA/BC,OAAOG,eAAeC,OAChDX,EAAkBM,GAClBH,EAAaI,OAAOG,eAAeR,UACvC,IACD,IAsCH,OApCAU,GAAU,KAIN,GAAIL,OAAOG,eAAgB,CACvB,MAAMG,EAAuBC,EAASL,EAAsB,KAW5D,OAVAA,IACAF,OAAOG,eAAeK,iBAClB,SACAN,GAEJF,OAAOG,eAAeK,iBAClB,SACAF,GAGG,aACkB,QAArBG,EAAAT,OAAOG,sBAAc,IAAAM,GAAAA,EAAEC,oBACnB,SACAR,GAEiB,QAArBS,EAAAX,OAAOG,sBAAc,IAAAQ,GAAAA,EAAED,oBACnB,SACAJ,EACH,CAET,CAII,OAFAT,IACAG,OAAOQ,iBAAiB,SAAUX,GAC3B,KACHG,OAAOU,oBAAoB,SAAUb,EAAmB,CAEhE,GACD,IAEI,CACHL,iBACAG,YACH"}

package/shared/image-placeholder/image-placeholder.d.ts

@@ -1,4 +1,4 @@
 export interface ImagePlaceholderProps {
     className?: string | undefined;
 }
-export declare const ImagePlaceholder: (props: ImagePlaceholderProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ImagePlaceholder: ({ className }: ImagePlaceholderProps) => import("react/jsx-runtime").JSX.Element;

package/shared/image-placeholder/image-placeholder.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import{PlaceholderImageIcon as e}from"@lifesg/react-icons";import{Placeholder as o}from"./image-placeholder.style.js";const t=t=>r(o,Object.assign({},t,{children:r(e,{})}));export{t as ImagePlaceholder};
+import{jsx as r}from"react/jsx-runtime";import{PlaceholderImageIcon as e}from"@lifesg/react-icons";import m from"clsx";import{placeholder as o}from"./image-placeholder.styles.js";const s=({className:s})=>r("div",{className:m(o,s),children:r(e,{})});export{s as ImagePlaceholder};
 //# sourceMappingURL=image-placeholder.js.map

package/shared/image-placeholder/image-placeholder.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-placeholder.js","sources":["../../../src/shared/image-placeholder/image-placeholder.tsx"],"sourcesContent":["import { PlaceholderImageIcon } from \"@lifesg/react-icons\";\n\nimport { Placeholder } from \"./image-placeholder.style\";\n\nexport interface ImagePlaceholderProps {\n    className?: string | undefined;\n}\n\nexport const ImagePlaceholder = (props: ImagePlaceholderProps) => {\n    return (\n        <Placeholder {...props}>\n            <PlaceholderImageIcon />\n        </Placeholder>\n    );\n};\n"],"names":["ImagePlaceholder","props","_jsx","Placeholder","Object","assign","children","PlaceholderImageIcon"],"mappings":"8JAQO,MAAMA,EAAoBC,GAEzBC,EAACC,EAAWC,OAAAC,OAAA,CAAA,EAAKJ,EAAK,CAAAK,SAClBJ,EAACK,EAAoB,CAAA"}
+{"version":3,"file":"image-placeholder.js","sources":["../../../src/shared/image-placeholder/image-placeholder.tsx"],"sourcesContent":["import { PlaceholderImageIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\n\nimport * as styles from \"./image-placeholder.styles\";\n\nexport interface ImagePlaceholderProps {\n    className?: string | undefined;\n}\n\nexport const ImagePlaceholder = ({ className }: ImagePlaceholderProps) => {\n    return (\n        <div className={clsx(styles.placeholder, className)}>\n            <PlaceholderImageIcon />\n        </div>\n    );\n};\n"],"names":["ImagePlaceholder","className","_jsx","clsx","styles.placeholder","children","PlaceholderImageIcon"],"mappings":"yLASaA,EAAmB,EAAGC,eAE3BC,EAAA,MAAA,CAAKD,UAAWE,EAAKC,EAAoBH,GAAUI,SAC/CH,EAACI,EAAoB,CAAA"}

package/shared/image-placeholder/image-placeholder.styles.d.ts

@@ -0,0 +1 @@
+export declare const placeholder: import("@linaria/core").LinariaClassName;

package/shared/image-placeholder/image-placeholder.styles.js

@@ -0,0 +1,2 @@
+import"./image-placeholder.styles_44nwil.css";const e="p74g98x";export{e as placeholder};
+//# sourceMappingURL=image-placeholder.styles.js.map

package/shared/image-placeholder/image-placeholder.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-placeholder.styles.js","sources":["../../../src/shared/image-placeholder/image-placeholder.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../../theme\";\n\nexport const placeholder = css`\n    background-color: ${Colour[\"bg-stronger\"]};\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    padding: 1rem;\n\n    svg {\n        min-width: 48px;\n        width: 18%;\n        height: auto;\n        color: ${Colour[\"icon-subtle\"]};\n    }\n`;\n"],"names":["placeholder"],"mappings":"sFAIO,MAAMA,EAAW"}

package/shared/image-placeholder/image-placeholder.styles_44nwil.css

@@ -0,0 +1 @@
+.p74g98x{background-color:var(--fds-colour-bg-stronger);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;padding:1rem;}.p74g98x svg{min-width:48px;width:18%;height:auto;color:var(--fds-colour-icon-subtle);}

package/shared/image-with-fallback/image-with-fallback.js

@@ -1,2 +1,2 @@
-import{jsx as t}from"react/jsx-runtime";import r from"./default.png.js";const a=({src:a,alt:s,className:e,"data-testid":o})=>t("img",{src:a,alt:s||"",className:e,"data-testid":o,onError:t=>{t.target.onerror=null,t.target.src=r}});export{a as ImageWithFallback};
+import{jsx as r}from"react/jsx-runtime";import{useRef as t,useEffect as a}from"react";import e from"./default.png.js";const o=({src:o,alt:n,className:s,"data-testid":c})=>{const l=t(null);a((()=>{const r=l.current;r&&r.complete&&0===r.naturalHeight&&0===r.naturalWidth&&(r.onerror=null,r.src=e)}),[o]);return r("img",{ref:l,src:o,alt:n||"",className:s,"data-testid":c,onError:r=>{const t=r.target;t.onerror=null,t.src=e}})};export{o as ImageWithFallback};
 //# sourceMappingURL=image-with-fallback.js.map

package/shared/image-with-fallback/image-with-fallback.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-with-fallback.js","sources":["../../../src/shared/image-with-fallback/image-with-fallback.tsx"],"sourcesContent":["import image from \"./default.png\";\n\nexport interface ImageWithFallbackProps {\n    src: string;\n    alt?: string | undefined;\n    className?: string | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ImageWithFallback = ({\n    src,\n    alt,\n    className,\n    \"data-testid\": testId,\n}: ImageWithFallbackProps) => {\n    const handleError = (\n        event: React.SyntheticEvent<HTMLImageElement, Event>\n    ) => {\n        (event.target as HTMLImageElement).onerror = null;\n        (event.target as HTMLImageElement).src = image;\n    };\n\n    return (\n        <img\n            src={src}\n            alt={alt || \"\"}\n            className={className}\n            data-testid={testId}\n            onError={handleError}\n        />\n    );\n};\n"],"names":["ImageWithFallback","src","alt","className","testId","_jsx","onError","event","target","onerror","image"],"mappings":"wEASO,MAAMA,EAAoB,EAC7BC,MACAC,MACAC,YACA,cAAeC,KAUXC,SACIJ,IAAKA,EACLC,IAAKA,GAAO,GACZC,UAAWA,EAAS,cACPC,EACbE,QAZJC,IAECA,EAAMC,OAA4BC,QAAU,KAC5CF,EAAMC,OAA4BP,IAAMS,CAAK"}
+{"version":3,"file":"image-with-fallback.js","sources":["../../../src/shared/image-with-fallback/image-with-fallback.tsx"],"sourcesContent":["import { useEffect, useRef } from \"react\";\n\nimport image from \"./default.png\";\n\nexport interface ImageWithFallbackProps {\n    src: string;\n    alt?: string | undefined;\n    className?: string | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ImageWithFallback = ({\n    src,\n    alt,\n    className,\n    \"data-testid\": testId,\n}: ImageWithFallbackProps) => {\n    const ref = useRef<HTMLImageElement>(null);\n\n    useEffect(() => {\n        // onError does not run if image is loaded from cache, so we need to\n        // check if the image is actually able to render using naturalWidth and\n        // naturalHeight\n        const el = ref.current;\n        if (\n            el &&\n            el.complete &&\n            el.naturalHeight === 0 &&\n            el.naturalWidth === 0\n        ) {\n            el.onerror = null;\n            el.src = image;\n        }\n    }, [src]);\n\n    const handleError = (\n        event: React.SyntheticEvent<HTMLImageElement, Event>\n    ) => {\n        const el = event.target as HTMLImageElement;\n        el.onerror = null;\n        el.src = image;\n    };\n\n    return (\n        <img\n            ref={ref}\n            src={src}\n            alt={alt || \"\"}\n            className={className}\n            data-testid={testId}\n            onError={handleError}\n        />\n    );\n};\n"],"names":["ImageWithFallback","src","alt","className","testId","ref","useRef","useEffect","el","current","complete","naturalHeight","naturalWidth","onerror","image","_jsx","onError","event","target"],"mappings":"sHAWO,MAAMA,EAAoB,EAC7BC,MACAC,MACAC,YACA,cAAeC,MAEf,MAAMC,EAAMC,EAAyB,MAErCC,GAAU,KAIN,MAAMC,EAAKH,EAAII,QAEXD,GACAA,EAAGE,UACkB,IAArBF,EAAGG,eACiB,IAApBH,EAAGI,eAEHJ,EAAGK,QAAU,KACbL,EAAGP,IAAMa,EACb,GACD,CAACb,IAUJ,OACIc,EAAA,MAAA,CACIV,IAAKA,EACLJ,IAAKA,EACLC,IAAKA,GAAO,GACZC,UAAWA,EAAS,cACPC,EACbY,QAdJC,IAEA,MAAMT,EAAKS,EAAMC,OACjBV,EAAGK,QAAU,KACbL,EAAGP,IAAMa,CAAK,GAWZ"}

package/shared/input-wrapper/index.d.ts

@@ -1 +1,2 @@
 export * from "./input-wrapper";
+export * from "./types";

package/shared/input-wrapper/input-wrapper.d.ts

@@ -1,28 +1,19 @@
-export interface InputWrapperStyleProps {
-    $disabled?: boolean | undefined;
-    $error?: boolean | undefined;
-    $readOnly?: boolean | undefined;
-    $focused?: boolean | undefined;
-    $position?: "left" | "right" | undefined;
-    $noBorder?: boolean | undefined;
-}
-export interface InputStyleProps {
-    $variant?: "small" | "default" | undefined;
-}
+import type { BasicButtonProps, BasicInputProps, InputBoxProps, InputWrapperProps } from "./types";
 /**
- * basic wrapper for input fields that provides the border style but does not
- * prescibe any layout for content
+ * Basic wrapper for input fields that provides the border style but does not
+ * prescribe any layout for content
  */
-export declare const InputBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, InputWrapperStyleProps>> & string;
-export declare const InputWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof InputWrapperStyleProps> & InputWrapperStyleProps, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, InputWrapperStyleProps>> & string;
+export declare const InputBox: (props: InputBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 /**
- * standalone native input with stripped-down styles, intended to be used in
+ * Basic wrapper for input fields with spacing and flex layout for content
+ */
+export declare const InputWrapper: (props: InputWrapperProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+/**
+ * Standalone native input with stripped-down styles, intended to be used in
  * combination with `InputWrapper` or other wrappers to build composite widgets
  */
-export declare const BasicInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, InputStyleProps>> & string;
+export declare const BasicInput: (props: BasicInputProps & import("react").RefAttributes<HTMLInputElement>) => React.ReactElement | null;
 /**
- * standalone native button with stripped-down styles
+ * Standalone native button with stripped-down styles
  */
-export declare const BasicButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, InputStyleProps>> & string;
+export declare const BasicButton: (props: BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

package/shared/input-wrapper/input-wrapper.js

@@ -1,117 +1,2 @@
-import o,{css as r}from"styled-components";import{V3_Border as e,V3_Colour as n,V3_Radius as t,V3_Spacing as i,V3_Font as d}from"../../v3_theme/index.js";const a=r`
-    outline-offset: -1px;
-    outline: ${e["width-020"]} ${e.solid}
-        ${n["border-focus"]};
-`,s=r`
-    outline-color: ${n["border-focus"]};
-`,l=r`
-    outline-color: ${n["border-disabled"]};
-`,$=r`
-    outline-color: ${n["border-error-focus"]};
-`,c=r`
-    outline: none;
-`,u=o.div`
-    border: ${e["width-010"]} ${e.solid}
-        ${n.border};
-    border-radius: ${t.sm};
-    background: ${n.bg};
-
-    &:focus-within {
-        ${a}
-    }
-    ${o=>o.$focused&&!o.$noBorder&&a}
-
-    ${o=>o.$readOnly?r`
-                border-color: transparent;
-                padding: 0;
-                background: transparent !important;
-
-                &:focus-within {
-                    ${s}
-                }
-                ${o.$focused&&s}
-            `:o.$disabled?r`
-                background: ${n["bg-disabled"]};
-                cursor: not-allowed;
-
-                &:focus-within {
-                    ${l}
-                }
-                ${o.$focused&&l}
-            `:o.$error?r`
-                border-color: ${n["border-error"]};
-
-                &:focus-within {
-                    ${$}
-                }
-                ${o.$focused&&$}
-            `:void 0}
-    ${o=>{if(o.$noBorder)return r`
-                border-color: transparent;
-                background: transparent;
-                &:focus-within {
-                    ${c}
-                }
-            `}}
-`,b=o(u)`
-    display: flex;
-    align-items: center;
-    position: relative;
-    height: max-content;
-    width: 100%;
-    padding: 0 ${i["spacing-16"]} 0
-        ${o=>o.$readOnly?"0":i["spacing-16"]};
-    flex-direction: ${o=>"right"===o.$position?"row-reverse":"row"};
-`,p=o.input`
-    ${o=>"small"===o.$variant?d["body-md-regular"]:d["body-baseline-regular"]}
-    color: ${n.text};
-    display: block;
-    background: transparent;
-    border: none;
-    outline: none;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-
-    &:disabled {
-        color: ${n["text-subtler"]};
-
-        &:hover {
-            cursor: not-allowed;
-        }
-    }
-
-    &::placeholder,
-    &::-webkit-input-placeholder {
-        color: ${n["text-subtler"]};
-    }
-
-    // Chrome, Safari, Edge, Opera
-    &::-webkit-outer-spin-button,
-    &::-webkit-inner-spin-button {
-        -webkit-appearance: none;
-        margin: 0;
-    }
-
-    // Safari (remove top shadow)
-    --webkit-appearance: none;
-
-    // Firefox
-    --moz-appearance: textfield;
-`,f=o.button`
-    background: transparent;
-    border: none;
-    outline: none;
-
-    &:focus,
-    &:active {
-        outline: none;
-    }
-
-    &:focus-visible {
-        outline: ${e["width-010"]} ${e.solid}
-            ${n["border-focus"]};
-        border-radius: ${t.sm};
-    }
-`;export{f as BasicButton,p as BasicInput,u as InputBox,b as InputWrapper};
+import{__rest as r}from"../../_virtual/_tslib.js";import{jsx as s}from"react/jsx-runtime";import e from"clsx";import{forwardRef as a}from"react";import{inputBox as o,inputBoxDisabled as t,inputBoxError as n,inputBoxReadOnly as c,inputBoxNoBorder as i,inputWrapper as d,inputWrapperReadOnly as l,inputWrapperPositionRight as m,basicInput as f,basicInputSmall as u,basicButton as p}from"./input-wrapper.styles.js";const N=a((function(a,d){const{disabled:l,error:m,readOnly:f,focused:u,noBorder:p,className:N}=a,b=r(a,["disabled","error","readOnly","focused","noBorder","className"]);return s("div",Object.assign({ref:d,"data-focused":u,className:e(o,l&&t,m&&n,f&&c,p&&i,N)},b))})),b=a((function(a,f){const{disabled:u,error:p,readOnly:N,focused:b,noBorder:O,position:j,className:v}=a,g=r(a,["disabled","error","readOnly","focused","noBorder","position","className"]);return s("div",Object.assign({ref:f,"data-focused":b,className:e(o,d,u&&t,p&&n,N&&c,O&&i,N&&l,"right"===j&&m,v)},g))})),O=a((function(a,o){const{variant:t,className:n}=a,c=r(a,["variant","className"]);return s("input",Object.assign({ref:o,className:e(f,"small"===t&&u,n)},c))})),j=a((function(a,o){var{className:t}=a,n=r(a,["className"]);return s("button",Object.assign({ref:o,className:e(p,t)},n))}));export{j as BasicButton,O as BasicInput,N as InputBox,b as InputWrapper};
 //# sourceMappingURL=input-wrapper.js.map

package/shared/input-wrapper/input-wrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-wrapper.js","sources":["../../../src/shared/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_Radius,\n    V3_Spacing,\n} from \"../../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\nexport interface InputWrapperStyleProps {\n    $disabled?: boolean | undefined;\n    $error?: boolean | undefined;\n    $readOnly?: boolean | undefined;\n    $focused?: boolean | undefined;\n    $position?: \"left\" | \"right\" | undefined;\n    $noBorder?: boolean | undefined;\n}\n\nexport interface InputStyleProps {\n    $variant?: \"small\" | \"default\" | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst defaultFocusCss = css`\n    outline-offset: -1px;\n    outline: ${V3_Border[\"width-020\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border-focus\"]};\n`;\n\nconst readOnlyFocusCss = css`\n    outline-color: ${V3_Colour[\"border-focus\"]};\n`;\n\nconst disabledFocusCss = css`\n    outline-color: ${V3_Colour[\"border-disabled\"]};\n`;\n\nconst errorFocusCss = css`\n    outline-color: ${V3_Colour[\"border-error-focus\"]};\n`;\n\nconst noFocusCss = css`\n    outline: none;\n`;\n\n/**\n * basic wrapper for input fields that provides the border style but does not\n * prescibe any layout for content\n */\nexport const InputBox = styled.div<InputWrapperStyleProps>`\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    background: ${V3_Colour[\"bg\"]};\n\n    &:focus-within {\n        ${defaultFocusCss}\n    }\n    ${(props) => props.$focused && !props.$noBorder && defaultFocusCss}\n\n    ${(props) => {\n        if (props.$readOnly) {\n            return css`\n                border-color: transparent;\n                padding: 0;\n                background: transparent !important;\n\n                &:focus-within {\n                    ${readOnlyFocusCss}\n                }\n                ${props.$focused && readOnlyFocusCss}\n            `;\n        } else if (props.$disabled) {\n            return css`\n                background: ${V3_Colour[\"bg-disabled\"]};\n                cursor: not-allowed;\n\n                &:focus-within {\n                    ${disabledFocusCss}\n                }\n                ${props.$focused && disabledFocusCss}\n            `;\n        } else if (props.$error) {\n            return css`\n                border-color: ${V3_Colour[\"border-error\"]};\n\n                &:focus-within {\n                    ${errorFocusCss}\n                }\n                ${props.$focused && errorFocusCss}\n            `;\n        }\n    }}\n    ${(props) => {\n        if (props.$noBorder) {\n            return css`\n                border-color: transparent;\n                background: transparent;\n                &:focus-within {\n                    ${noFocusCss}\n                }\n            `;\n        }\n    }}\n`;\n\nexport const InputWrapper = styled(InputBox)<InputWrapperStyleProps>`\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: max-content;\n    width: 100%;\n    padding: 0 ${V3_Spacing[\"spacing-16\"]} 0\n        ${(props) => (props.$readOnly ? \"0\" : V3_Spacing[\"spacing-16\"])};\n    flex-direction: ${(props) =>\n        props.$position === \"right\" ? \"row-reverse\" : \"row\"};\n`;\n\n/**\n * standalone native input with stripped-down styles, intended to be used in\n * combination with `InputWrapper` or other wrappers to build composite widgets\n */\nexport const BasicInput = styled.input<InputStyleProps>`\n    ${(props) =>\n        props.$variant === \"small\"\n            ? V3_Font[\"body-md-regular\"]\n            : V3_Font[\"body-baseline-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n\n    &:disabled {\n        color: ${V3_Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${V3_Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\n/**\n * standalone native button with stripped-down styles\n */\nexport const BasicButton = styled.button<InputStyleProps>`\n    background: transparent;\n    border: none;\n    outline: none;\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n            ${V3_Colour[\"border-focus\"]};\n        border-radius: ${V3_Radius[\"sm\"]};\n    }\n`;\n"],"names":["defaultFocusCss","css","V3_Border","V3_Colour","readOnlyFocusCss","disabledFocusCss","errorFocusCss","noFocusCss","InputBox","styled","div","V3_Radius","props","$focused","$noBorder","$readOnly","$disabled","$error","InputWrapper","V3_Spacing","$position","BasicInput","input","$variant","V3_Font","BasicButton","button"],"mappings":"0JA8BA,MAAMA,EAAkBC,CAAG;;eAEZC,EAAU,gBAAgBA,EAAiB;UAChDC,EAAU;EAGdC,EAAmBH,CAAG;qBACPE,EAAU;EAGzBE,EAAmBJ,CAAG;qBACPE,EAAU;EAGzBG,EAAgBL,CAAG;qBACJE,EAAU;EAGzBI,EAAaN,CAAG;;EAQTO,EAAWC,EAAOC,GAA2B;cAC5CR,EAAU,gBAAgBA,EAAiB;UAC/CC,EAAkB;qBACPQ,EAAc;kBACjBR,EAAc;;;UAGtBH;;MAEHY,GAAUA,EAAMC,WAAaD,EAAME,WAAad;;MAEhDY,GACKA,EAAMG,UACCd,CAAG;;;;;;sBAMAG;;kBAEJQ,EAAMC,UAAYT;cAEjBQ,EAAMI,UACNf,CAAG;8BACQE,EAAU;;;;sBAIlBE;;kBAEJO,EAAMC,UAAYR;cAEjBO,EAAMK,OACNhB,CAAG;gCACUE,EAAU;;;sBAGpBG;;kBAEJM,EAAMC,UAAYP;mBAPrB;MAWRM,IACC,GAAIA,EAAME,UACN,OAAOb,CAAG;;;;sBAIAM;;aAGd;EAIKW,EAAeT,EAAOD,EAAiC;;;;;;iBAMnDW,EAAW;UACjBP,GAAWA,EAAMG,UAAY,IAAMI,EAAW;sBAClCP,GACK,UAApBA,EAAMQ,UAAwB,cAAgB;EAOzCC,EAAaZ,EAAOa,KAAsB;MAChDV,GACoB,UAAnBA,EAAMW,SACAC,EAAQ,mBACRA,EAAQ;aACTrB,EAAgB;;;;;;;;;;iBAUZA,EAAU;;;;;;;;;iBASVA,EAAU;;;;;;;;;;;;;;;EAoBdsB,EAAchB,EAAOiB,MAAuB;;;;;;;;;;;mBAWtCxB,EAAU,gBAAgBA,EAAiB;cAChDC,EAAU;yBACCQ,EAAc;;"}
+{"version":3,"file":"input-wrapper.js","sources":["../../../src/shared/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./input-wrapper.styles\";\nimport type {\n    BasicButtonProps,\n    BasicInputProps,\n    InputBoxProps,\n    InputWrapperProps,\n} from \"./types\";\n\n/**\n * Basic wrapper for input fields that provides the border style but does not\n * prescribe any layout for content\n */\nexport const InputBox = forwardRef<HTMLDivElement, InputBoxProps>(\n    function InputBox(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Basic wrapper for input fields with spacing and flex layout for content\n */\nexport const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(\n    function InputWrapper(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            position,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    styles.inputWrapper,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    readOnly && styles.inputWrapperReadOnly,\n                    position === \"right\" && styles.inputWrapperPositionRight,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native input with stripped-down styles, intended to be used in\n * combination with `InputWrapper` or other wrappers to build composite widgets\n */\nexport const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(\n    function BasicInput(props, ref) {\n        const { variant, className, ...otherProps } = props;\n        return (\n            <input\n                ref={ref}\n                className={clsx(\n                    styles.basicInput,\n                    variant === \"small\" && styles.basicInputSmall,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native button with stripped-down styles\n */\nexport const BasicButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function BasicButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.basicButton, className)}\n                {...props}\n            />\n        );\n    }\n);\n"],"names":["InputBox","forwardRef","props","ref","disabled","error","readOnly","focused","noBorder","className","otherProps","_jsx","clsx","styles.inputBox","styles.inputBoxDisabled","styles.inputBoxError","styles.inputBoxReadOnly","styles.inputBoxNoBorder","InputWrapper","position","Object","assign","styles.inputWrapper","styles.inputWrapperReadOnly","styles.inputWrapperPositionRight","BasicInput","variant","__rest","styles.basicInput","styles.basicInputSmall","BasicButton","_a","styles.basicButton"],"mappings":"4ZAeO,MAAMA,EAAWC,GACpB,SAAkBC,EAAOC,GACrB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQC,UACRA,GAEAP,EADGQ,IACHR,EARE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,cASN,OACIS,uBACIR,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAT,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZR,IAEAC,GAGhB,IAMSQ,EAAejB,GACxB,SAAsBC,EAAOC,GACzB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQW,SACRA,EAAQV,UACRA,GAEAP,EADGQ,IACHR,EATE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,WAAA,cAUN,OACIS,EAAA,MAAAS,OAAAC,OAAA,CACIlB,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAS,EACAlB,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZX,GAAYiB,EACC,UAAbJ,GAAwBK,EACxBf,IAEAC,GAGhB,IAOSe,EAAaxB,GACtB,SAAoBC,EAAOC,GACvB,MAAMuB,QAAEA,EAAOjB,UAAEA,GAA6BP,EAAfQ,EAAUiB,EAAKzB,EAAxC,CAAA,UAAA,cACN,OACIS,EAAA,QAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EACPgB,EACY,UAAZF,GAAuBG,EACvBpB,IAEAC,GAGhB,IAMSoB,EAAc7B,GACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAI,EAArB,eACjB,OACIpB,0BACIR,IAAKA,EACLM,UAAWG,EAAKoB,EAAoBvB,IAChCP,GAGhB"}

package/shared/input-wrapper/input-wrapper.styles.d.ts

@@ -0,0 +1,11 @@
+export declare const inputBox: import("@linaria/core").LinariaClassName;
+export declare const inputBoxReadOnly: import("@linaria/core").LinariaClassName;
+export declare const inputBoxDisabled: import("@linaria/core").LinariaClassName;
+export declare const inputBoxError: import("@linaria/core").LinariaClassName;
+export declare const inputBoxNoBorder: import("@linaria/core").LinariaClassName;
+export declare const inputWrapper: import("@linaria/core").LinariaClassName;
+export declare const inputWrapperReadOnly: import("@linaria/core").LinariaClassName;
+export declare const inputWrapperPositionRight: import("@linaria/core").LinariaClassName;
+export declare const basicInput: import("@linaria/core").LinariaClassName;
+export declare const basicInputSmall: import("@linaria/core").LinariaClassName;
+export declare const basicButton: import("@linaria/core").LinariaClassName;

package/shared/input-wrapper/input-wrapper.styles.js

@@ -0,0 +1,2 @@
+import"./input-wrapper.styles_1kc4xhb.css";const i="i156rlh",p="irl4gvd",r="iwp8knk",s="i1ec8vtj",t="ijzjlan",e="i2dsxxh",h="i1mziqol",l="iyqh66s",n="b168rpxy",o="b1df0tus",x="b191fi5o";export{x as basicButton,n as basicInput,o as basicInputSmall,i as inputBox,r as inputBoxDisabled,s as inputBoxError,t as inputBoxNoBorder,p as inputBoxReadOnly,e as inputWrapper,l as inputWrapperPositionRight,h as inputWrapperReadOnly};
+//# sourceMappingURL=input-wrapper.styles.js.map

package/shared/input-wrapper/input-wrapper.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"input-wrapper.styles.js","sources":["../../../src/shared/input-wrapper/input-wrapper.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../../theme\";\n\nexport const inputBox = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour[\"bg\"]};\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const inputBoxReadOnly = css`\n    border-color: transparent;\n    padding: 0;\n    background: transparent !important;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const inputBoxDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const inputBoxError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n\nexport const inputBoxNoBorder = css`\n    border-color: transparent;\n    background: transparent;\n\n    &:focus-within,\n    &[data-focused=\"true\"] {\n        outline: none;\n    }\n`;\n\nexport const inputWrapper = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n    height: max-content;\n    width: 100%;\n    padding: 0 ${Spacing[\"spacing-16\"]} 0 ${Spacing[\"spacing-16\"]};\n`;\n\nexport const inputWrapperReadOnly = css`\n    padding-left: 0;\n`;\n\nexport const inputWrapperPositionRight = css`\n    flex-direction: row-reverse;\n`;\n\nexport const basicInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const basicInputSmall = css`\n    ${Font[\"body-md-regular\"]}\n`;\n\nexport const basicButton = css`\n    background: transparent;\n    border: none;\n    outline: none;\n\n    &:focus,\n    &:active {\n        outline: none;\n    }\n\n    &:focus-visible {\n        outline: ${Border[\"width-010\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n        border-radius: ${Radius[\"sm\"]};\n    }\n`;\n"],"names":["inputBox","inputBoxReadOnly","inputBoxDisabled","inputBoxError","inputBoxNoBorder","inputWrapper","inputWrapperReadOnly","inputWrapperPositionRight","basicInput","basicInputSmall","basicButton"],"mappings":"+EAIO,MAAMA,EAAQ,UAaRC,EAAgB,UAWhBC,EAAgB,UAUhBC,EAAa,WASbC,EAAgB,UAUhBC,EAAY,UASZC,EAAoB,WAIpBC,EAAyB,UAIzBC,EAAU,WAsCVC,EAAe,WAIfC,EAAW"}

package/shared/input-wrapper/input-wrapper.styles_1kc4xhb.css

@@ -0,0 +1,11 @@
+.i156rlh{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);}.i156rlh:focus-within,.i156rlh[data-focused="true"]{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}
+.irl4gvd{border-color:transparent;padding:0;background:transparent!important;}.irl4gvd:focus-within,.irl4gvd[data-focused="true"]{outline-color:var(--fds-colour-border-focus);}
+.iwp8knk{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.iwp8knk:focus-within,.iwp8knk[data-focused="true"]{outline-color:var(--fds-colour-border-disabled);}
+.i1ec8vtj{border-color:var(--fds-colour-border-error);}.i1ec8vtj:focus-within,.i1ec8vtj[data-focused="true"]{outline-color:var(--fds-colour-border-error-focus);}
+.ijzjlan{border-color:transparent;background:transparent;}.ijzjlan:focus-within,.ijzjlan[data-focused="true"]{outline:none;}
+.i2dsxxh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;height:-webkit-max-content;height:-moz-max-content;height:max-content;width:100%;padding:0 var(--fds-spacing-16) 0 var(--fds-spacing-16);}
+.i1mziqol{padding-left:0;}
+.iyqh66s{-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;}
+.b168rpxy{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;--webkit-appearance:none;--moz-appearance:textfield;}.b168rpxy:disabled{color:var(--fds-colour-text-subtler);}.b168rpxy:disabled:hover{cursor:not-allowed;}.b168rpxy::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::-webkit-outer-spin-button,.b168rpxy::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b168rpxy::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::placeholder{color:var(--fds-colour-text-subtler);}
+.b1df0tus{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.b191fi5o{background:transparent;border:none;outline:none;}.b191fi5o:focus,.b191fi5o:active{outline:none;}.b191fi5o:focus-visible{outline:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}

package/shared/input-wrapper/types.d.ts

@@ -0,0 +1,15 @@
+export interface InputBoxProps extends React.HTMLAttributes<HTMLDivElement> {
+    disabled?: boolean | undefined;
+    error?: boolean | undefined;
+    readOnly?: boolean | undefined;
+    focused?: boolean | undefined;
+    noBorder?: boolean | undefined;
+}
+export interface InputWrapperProps extends React.HTMLAttributes<HTMLDivElement>, InputBoxProps {
+    position?: "left" | "right" | undefined;
+}
+export interface BasicInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    variant?: "small" | "default" | undefined;
+}
+export interface BasicButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+}

package/shared/internal-calendar/calendar-dropdown.js

@@ -1,2 +1,2 @@
-import{jsx as r}from"react/jsx-runtime";import e from"react";import"../dropdown-wrapper/dropdown-wrapper.styles.js";import{useDropdownRender as t}from"../dropdown-wrapper/element-with-dropdown.js";import{CalendarWrapper as o}from"./calendar-dropdown.style.js";import{InternalCalendar as n}from"./internal-calendar.js";const d=e.forwardRef(((e,d)=>{const{elementWidth:p,setFloatingRef:s,getFloatingProps:a,styles:i}=t();return r(o,Object.assign({$width:p,"data-testid":"calendar-dropdown",ref:s,style:i},a(),{children:r(n,Object.assign({ref:d},e))}))}));export{d as CalendarDropdown};
+import{jsx as e}from"react/jsx-runtime";import t,{useRef as r}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as o}from"../../theme/utils/use-apply-styles.js";import"../../util/calendar-helper.js";import"../../external/dayjs/dayjs.min.js";import{mergeRefs as i}from"../../util/merge-refs.js";import"../../util/simple-id-generator.js";import"../../util/string-helper.js";import"@react-aria/live-announcer";import{useDropdownRender as s}from"../dropdown-wrapper/element-with-dropdown.js";import{tokens as m,calendarWrapper as n}from"./calendar-dropdown.styles.js";import{InternalCalendar as p}from"./internal-calendar.js";const a=t.forwardRef(((t,a)=>{const{elementWidth:l,setFloatingRef:d,getFloatingProps:j,styles:c}=s(),h=r(null);return o(h,Object.assign({[m.width]:`${l}px`},c)),e("div",Object.assign({className:n,"data-testid":"calendar-dropdown",ref:i(d,h)},j(),{children:e(p,Object.assign({ref:a},t))}))}));export{a as CalendarDropdown};
 //# sourceMappingURL=calendar-dropdown.js.map

package/shared/internal-calendar/calendar-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"calendar-dropdown.js","sources":["../../../src/shared/internal-calendar/calendar-dropdown.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport { CalendarWrapper } from \"./calendar-dropdown.style\";\nimport { InternalCalendar } from \"./internal-calendar\";\nimport type { CalendarDropdownProps, InternalCalendarRef } from \"./types\";\n\nconst Component = (\n    props: CalendarDropdownProps,\n    ref: React.ForwardedRef<InternalCalendarRef>\n) => {\n    const { elementWidth, setFloatingRef, getFloatingProps, styles } =\n        useDropdownRender();\n    return (\n        <CalendarWrapper\n            $width={elementWidth}\n            data-testid=\"calendar-dropdown\"\n            ref={setFloatingRef}\n            style={styles}\n            {...getFloatingProps()}\n        >\n            <InternalCalendar ref={ref} {...props} />\n        </CalendarWrapper>\n    );\n};\n\nexport const CalendarDropdown = React.forwardRef(Component);\n"],"names":["CalendarDropdown","React","forwardRef","props","ref","elementWidth","setFloatingRef","getFloatingProps","styles","useDropdownRender","_jsx","CalendarWrapper","Object","assign","$width","style","children","InternalCalendar"],"mappings":"8TAOA,MAmBaA,EAAmBC,EAAMC,YAnBpB,CACdC,EACAC,KAEA,MAAMC,aAAEA,EAAYC,eAAEA,EAAcC,iBAAEA,EAAgBC,OAAEA,GACpDC,IACJ,OACIC,EAACC,EAAeC,OAAAC,OAAA,CAAAC,OACJT,EAAY,cACR,oBACZD,IAAKE,EACLS,MAAOP,GACHD,IAAkB,CAAAS,SAEtBN,EAACO,EAAgBL,OAAAC,OAAA,CAACT,IAAKA,GAASD,MAClB"}
+{"version":3,"file":"calendar-dropdown.js","sources":["../../../src/shared/internal-calendar/calendar-dropdown.tsx"],"sourcesContent":["import React, { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { mergeRefs } from \"../../util\";\nimport { useDropdownRender } from \"../dropdown-wrapper\";\nimport * as styles from \"./calendar-dropdown.styles\";\nimport { InternalCalendar } from \"./internal-calendar\";\nimport type { CalendarDropdownProps, InternalCalendarRef } from \"./types\";\n\nconst Component = (\n    props: CalendarDropdownProps,\n    ref: React.ForwardedRef<InternalCalendarRef>\n) => {\n    const {\n        elementWidth,\n        setFloatingRef,\n        getFloatingProps,\n        styles: positioningStyles,\n    } = useDropdownRender();\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(wrapperRef, {\n        [styles.tokens.width]: `${elementWidth}px`,\n        ...positioningStyles,\n    });\n\n    return (\n        <div\n            className={styles.calendarWrapper}\n            data-testid=\"calendar-dropdown\"\n            ref={mergeRefs(setFloatingRef, wrapperRef)}\n            {...getFloatingProps()}\n        >\n            <InternalCalendar ref={ref} {...props} />\n        </div>\n    );\n};\n\nexport const CalendarDropdown = React.forwardRef(Component);\n"],"names":["CalendarDropdown","React","forwardRef","props","ref","elementWidth","setFloatingRef","getFloatingProps","styles","positioningStyles","useDropdownRender","wrapperRef","useRef","useApplyStyle","Object","assign","styles.tokens","width","_jsx","className","styles.calendarWrapper","mergeRefs","children","InternalCalendar"],"mappings":"80BASA,MA8BaA,EAAmBC,EAAMC,YA9BpB,CACdC,EACAC,KAEA,MAAMC,aACFA,EAAYC,eACZA,EAAcC,iBACdA,EACAC,OAAQC,GACRC,IAEEC,EAAaC,EAAuB,MAO1C,OALAC,EAAcF,EAAUG,OAAAC,OAAA,CACpB,CAACC,EAAcC,OAAQ,GAAGZ,OACvBI,IAIHS,EAAA,MAAAJ,OAAAC,OAAA,CACII,UAAWC,EAAsB,cACrB,oBACZhB,IAAKiB,EAAUf,EAAgBK,IAC3BJ,IAAkB,CAAAe,SAEtBJ,EAACK,EAAgBT,OAAAC,OAAA,CAACX,IAAKA,GAASD,MAC9B"}

package/shared/internal-calendar/calendar-dropdown.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const tokens: {
+    headerBottomSpacing: string;
+    horizontalInset: string;
+    verticalInset: string;
+    width: string;
+};
+export declare const calendarWrapper: import("@linaria/core").LinariaClassName;

package/shared/internal-calendar/calendar-dropdown.styles.js

@@ -0,0 +1,2 @@
+import"./calendar-dropdown.styles_wybjai.css";const a={width:"--fds-internal-calendarDropdown-width"},d="cfbaf44";export{d as calendarWrapper,a as tokens};
+//# sourceMappingURL=calendar-dropdown.styles.js.map

package/shared/internal-calendar/calendar-dropdown.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"calendar-dropdown.styles.js","sources":["../../../src/shared/internal-calendar/calendar-dropdown.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, MediaQuery, Radius, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const tokens = {\n    headerBottomSpacing: \"--fds-internal-calendarDropdown-headerBottomSpacing\",\n    horizontalInset: \"--fds-internal-calendarDropdown-horizontalInset\",\n    verticalInset: \"--fds-internal-calendarDropdown-verticalInset\",\n    width: \"--fds-internal-calendarDropdown-width\",\n};\n\nexport const calendarWrapper = css`\n    ${tokens.verticalInset}: ${Spacing[\"spacing-24\"]};\n    ${tokens.horizontalInset}: ${Spacing[\"spacing-20\"]};\n    ${tokens.headerBottomSpacing}: ${Spacing[\"spacing-4\"]};\n\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    overflow: hidden;\n\n    ${tokens.width}: initial;\n    width: var(${tokens.width});\n    max-width: 41rem;\n    min-width: 21rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        min-width: 17.5rem;\n    }\n`;\n"],"names":["tokens","width","calendarWrapper"],"mappings":"sFAOO,MAAMA,EAAS,CAIlBC,MAAO,yCAGEC,EAAe"}

package/shared/internal-calendar/calendar-dropdown.styles_wybjai.css

@@ -0,0 +1 @@
+.cfbaf44{--fds-internal-calendarDropdown-verticalInset:var(--fds-spacing-24);--fds-internal-calendarDropdown-horizontalInset:var(--fds-spacing-20);--fds-internal-calendarDropdown-headerBottomSpacing:var(--fds-spacing-4);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);overflow:hidden;--fds-internal-calendarDropdown-width:initial;width:var(--fds-internal-calendarDropdown-width);max-width:41rem;min-width:21rem;}:where(body.fds-breakpoint-sm-max) .cfbaf44{min-width:17.5rem;}