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

package/cjs/popover/popover-trigger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.js","sources":["../../../src/popover/popover-trigger.tsx"],"sourcesContent":["import {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef, useState } from \"react\";\n\nimport { useFloatingChild } from \"../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../theme\";\nimport { useId } from \"../util\";\nimport { Popover } from \"./popover\";\nimport * as styles from \"./popover-trigger.styles\";\nimport type { PopoverTriggerProps, PopoverTriggerType } from \"./types\";\n\nexport const PopoverTrigger = ({\n    children,\n    popoverContent,\n    trigger: _trigger = \"click\",\n    position = \"top\",\n    zIndex,\n    rootNode,\n    customOffset,\n    delay,\n    onPopoverAppear,\n    onPopoverDismiss,\n    popoverAriaLabel,\n    enableFlip = true,\n    enableResize = false,\n    overflow = \"auto\",\n    triggerOnFocus = false,\n    isModal = true,\n    className,\n    ...otherProps\n}: PopoverTriggerProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [visible, setVisible] = useState<boolean>(false);\n    const nodeRef = useRef<HTMLElement | null>(null);\n    const popoverRef = useRef<HTMLElement | null>(null);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const [availableHeight, setAvailableHeight] = useState(0);\n    const internalId = useId();\n    const popoverContainerId = `${internalId}-popover`;\n\n    const { refs, floatingStyles, context } = useFloating({\n        open: visible,\n        placement: position,\n        whileElementsMounted: autoUpdate,\n        middleware: [\n            offset(customOffset ?? 16),\n            enableFlip && flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            enableResize &&\n                size({\n                    apply({ availableHeight }) {\n                        setAvailableHeight(availableHeight);\n                    },\n                }),\n        ],\n        onOpenChange: (isOpen) => {\n            setVisible(isOpen);\n\n            // this callback is triggering twice on hover, the check here prevents extra calls\n            if (visible !== isOpen) {\n                handleVisibilityChange(isOpen);\n            }\n        },\n    });\n    const parentZIndex = useFloatingChild();\n    const { themeProps, themeStyle } = useInheritedThemeScope(visible);\n\n    const trigger: PopoverTriggerType = isMobile ? \"click\" : _trigger;\n    const isTooltip = trigger === \"hover\";\n\n    const click = useClick(context, {\n        // allow trigger by Space/Enter, but disable mouse click in hover mode\n        ignoreMouse: isTooltip,\n    });\n\n    const dismiss = useDismiss(context);\n\n    const hover = useHover(context, {\n        enabled: isTooltip,\n        // short window to enter the floating element without it closing\n        delay: {\n            open: delay?.open ?? 0,\n            close: delay?.close ?? 500,\n        },\n    });\n\n    const focus = useFocus(context, {\n        enabled: triggerOnFocus,\n    });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n        hover,\n        focus,\n    ]);\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isFocusInside = (node: Node | null) => {\n        if (!node) return false;\n\n        if (\n            node instanceof HTMLElement &&\n            node.hasAttribute(\"data-floating-ui-focus-guard\")\n        ) {\n            return true;\n        }\n\n        const refEl = nodeRef.current;\n        const floatingEl = popoverRef.current?.parentElement;\n\n        return (\n            (!!refEl && refEl.contains(node)) ||\n            (!!floatingEl && floatingEl.contains(node))\n        );\n    };\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handlePopoverMobileClose = () => {\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    const handleVisibilityChange = (nextVisible: boolean) => {\n        if (nextVisible && onPopoverAppear) onPopoverAppear();\n        if (!nextVisible && onPopoverDismiss) onPopoverDismiss();\n    };\n\n    const handleBlur = (e: React.FocusEvent<HTMLElement>) => {\n        // On mobile, ModalV2 handles its own dismiss via onMobileClose\n        if (isModal || (isMobile && typeof popoverContent !== \"function\"))\n            return;\n\n        const next =\n            (e.relatedTarget as Node | null) ??\n            (document.activeElement as Node | null);\n\n        if (next && isFocusInside(next)) return;\n\n        setVisible(false);\n        handleVisibilityChange(false);\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderPopover = () => {\n        if (typeof popoverContent === \"function\") {\n            return popoverContent(\n                enableResize ? { maxHeight: availableHeight, overflow } : {}\n            );\n        }\n\n        return (\n            <Popover\n                visible\n                onMobileClose={handlePopoverMobileClose}\n                maxHeight={enableResize ? availableHeight : undefined}\n                overflow={enableResize ? overflow : undefined}\n                ariaLabel={popoverAriaLabel}\n                id={popoverContainerId}\n            >\n                {popoverContent}\n            </Popover>\n        );\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    nodeRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps({\n                    onClick: (event) => {\n                        // prevent popover interaction from triggering click events on parents\n                        event.stopPropagation();\n                        event.preventDefault();\n                    },\n                })}\n                {...otherProps}\n                className={clsx(styles.triggerContainer, className)}\n            >\n                {children}\n            </div>\n            {visible && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        {...(!isModal && {\n                            initialFocus: -1,\n                            returnFocus: false,\n                            modal: false,\n                        })}\n                    >\n                        <div\n                            ref={(node) => {\n                                popoverRef.current = node;\n                                refs.setFloating(node);\n                            }}\n                            {...themeProps}\n                            onBlur={handleBlur}\n                            style={{\n                                ...themeStyle,\n                                ...floatingStyles,\n                                outline: \"none\",\n                                zIndex: zIndex ?? parentZIndex,\n                            }}\n                            {...getFloatingProps()}\n                        >\n                            {renderPopover()}\n                        </div>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","popoverContent","trigger","_trigger","position","zIndex","rootNode","customOffset","delay","onPopoverAppear","onPopoverDismiss","popoverAriaLabel","enableFlip","enableResize","overflow","triggerOnFocus","isModal","className","otherProps","__rest","visible","setVisible","useState","nodeRef","useRef","popoverRef","isMobile","useMaxWidthMediaQuery","availableHeight","setAvailableHeight","popoverContainerId","useId","refs","floatingStyles","context","useFloating","open","placement","whileElementsMounted","autoUpdate","middleware","offset","flip","shift","limiter","limitShift","size","apply","onOpenChange","isOpen","handleVisibilityChange","parentZIndex","useFloatingChild","themeProps","themeStyle","useInheritedThemeScope","isTooltip","click","useClick","ignoreMouse","dismiss","useDismiss","hover","useHover","enabled","_b","close","_c","focus","useFocus","getReferenceProps","getFloatingProps","useInteractions","handlePopoverMobileClose","nextVisible","_jsxs","_jsx","Object","assign","ref","node","current","setReference","onClick","event","stopPropagation","preventDefault","clsx","styles.triggerContainer","FloatingPortal","root","FloatingFocusManager","initialFocus","returnFocus","modal","setFloating","onBlur","e","next","relatedTarget","document","activeElement","HTMLElement","hasAttribute","refEl","floatingEl","parentElement","contains","isFocusInside","style","outline","maxHeight","Popover","onMobileClose","undefined","ariaLabel","id"],"mappings":"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"}

package/cjs/popover/popover-trigger.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./popover-trigger.styles_8zokig.css");exports.triggerContainer="tjxhm5y";
+//# sourceMappingURL=popover-trigger.styles.js.map

package/cjs/popover/popover-trigger.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"popover-trigger.styles.js","sources":["../../../src/popover/popover-trigger.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nexport const triggerContainer = css`\n    display: inline;\n    width: fit-content;\n    cursor: pointer;\n    position: relative;\n`;\n"],"names":[],"mappings":"4GAE6B"}

package/cjs/popover/popover-trigger.styles_8zokig.css

@@ -0,0 +1 @@
+.tjxhm5y{display:inline;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;cursor:pointer;position:relative;}

package/cjs/popover/popover.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),i=require("react"),s=require("../external/react-responsive/dist/react-responsive.js"),n=require("../card/card.js"),o=require("../modal/modal.js"),l=require("../v2_spec/media-spec.js"),d=require("../v2_text/text.js"),a=require("./popover.styles.js");exports.Popover=c=>{var{children:u,visible:p,onMobileClose:h}=c,x=e.__rest(c,["children","visible","onMobileClose"]);const v=x["data-testid"]||"popover",[j,f]=i.useState("none"),b=i.useRef(null),q=s.reactResponsiveExports.useMediaQuery({maxWidth:l.MediaWidths.mobileL}),w=i.useRef(j);i.useEffect((()=>(C(),window.addEventListener("resize",t.default(g,300)),()=>{window.removeEventListener("resize",t.default(g,300))})),[]);const g=()=>{C()},m=()=>{h&&h()},C=()=>{const e=M();var r;e&&(r=e,w.current=r,f(r))},M=()=>{if(b.current){const e=b.current.getBoundingClientRect(),r=24,t=e.y<r,i=window.innerWidth-r;return e.x<r?t?"top-left":"left":e.x+e.width>i?t?"top-right":"right":("top-left"===w.current||"left"===w.current)&&e.x-e.width/2>r||("top-right"===w.current||"right"===w.current)&&e.x+2*e.width<i?t?"top-center":"none":t?"top-center":void 0}},_=()=>"string"==typeof u?r.jsx(d.V2_Text.BodySmall,{children:u}):u;return r.jsxs(r.Fragment,{children:[r.jsx(a.BubbleWrap,Object.assign({ref:b,"data-testid":v,$visible:p,$offset:j},x,{children:r.jsx(n.Card,{children:_()})})),q&&r.jsx(o.Modal,{show:null!=p&&p,onOverlayClick:m,children:r.jsx(a.MobileModalBox,{onClose:m,children:r.jsx(a.ContentWrapper,{children:_()})})})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),o=require("react"),s=require("../card/card.js"),a=require("../markup/markup.js"),t=require("../modal-v2/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js"),d=require("../theme/utils/use-media-query.js"),n=require("../typography/index.js"),u=require("./popover.styles.js");function p(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var h=p(i);exports.Popover=i=>{var{children:p,visible:c=!1,onMobileClose:m,maxHeight:j,overflow:v,ariaLabel:x="More information",id:q,className:y,"data-testid":b="popover"}=i,f=e.__rest(i,["children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","data-testid"]);const C=d.useMaxWidthMediaQuery("sm"),M=o.useRef(null),g=o.useMemo((()=>({[u.tokens.popoverCard.maxHeight]:void 0===j?null:`${j}px`,[u.tokens.popoverCard.overflowY]:null!=v?v:null})),[j,v]);l.useApplyStyle(M,g);const k=()=>{m&&m()},w=()=>"string"==typeof p?r.jsx(n.Typography.BodyMD,{children:p}):p;return r.jsxs(r.Fragment,{children:[c&&!C&&r.jsx("div",Object.assign({ref:M,tabIndex:0,"data-testid":b},f,{className:h.default(u.popoverContainer,y),id:q,role:"dialog","aria-label":x,children:r.jsx(s.Card,{className:h.default(u.popoverCard,void 0!==j&&u.popoverCardWithMaxHeight,v&&u.popoverCardWithOverflow),children:r.jsx(a.Markup,{baseTextSize:"body-md",children:w()})})})),C&&r.jsx(t.ModalV2,{show:c,onOverlayClick:k,onClose:k,id:q,role:"dialog","aria-label":x,children:r.jsxs(t.ModalV2.Card,{children:[r.jsx(t.ModalV2.Content,{children:r.jsx(a.Markup,{children:w()})}),r.jsx(t.ModalV2.CloseButton,{})]})})]})};
 //# sourceMappingURL=popover.js.map

package/cjs/popover/popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.js","sources":["../../../src/popover/popover.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\n\nimport { Card } from \"../card\";\nimport { Modal } from \"../modal/modal\";\nimport { MediaWidths } from \"../v2_spec/media-spec\";\nimport { V2_Text } from \"../v2_text/text\";\nimport type { OffsetPosition } from \"./popover.styles\";\nimport { BubbleWrap, ContentWrapper, MobileModalBox } from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\n/**\n * @deprecated Use `PopoverV2` for improved positioning behaviour. This component will be removed in DS v3.\n */\nexport const Popover = ({\n    children,\n    visible,\n    onMobileClose,\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"] || \"popover\";\n    const [offset, _setOffset] = useState<OffsetPosition>(\"none\");\n    const bubbleRef = useRef<HTMLDivElement>(null);\n    const isMobile = useMediaQuery({\n        maxWidth: MediaWidths.mobileL,\n    });\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n    const offsetStateRef = useRef<OffsetPosition>(offset);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setOffset = (value: OffsetPosition) => {\n        offsetStateRef.current = value;\n        _setOffset(value);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        updateOffsetPosition();\n        window.addEventListener(\"resize\", debounce(handleViewportResize, 300));\n\n        return () => {\n            window.removeEventListener(\n                \"resize\",\n                debounce(handleViewportResize, 300)\n            );\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleViewportResize = () => {\n        updateOffsetPosition();\n    };\n\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const updateOffsetPosition = () => {\n        const newOffsetPosition = getOffsetPosition();\n\n        if (newOffsetPosition) {\n            setOffset(newOffsetPosition);\n        }\n    };\n\n    const getOffsetPosition = (): OffsetPosition | undefined => {\n        if (bubbleRef.current) {\n            const bubbleRect = bubbleRef.current.getBoundingClientRect();\n            const paddingBuffer = 24; // buffer for all sides\n            const hasExceededTop = bubbleRect.y < paddingBuffer;\n            const rightLimit = window.innerWidth - paddingBuffer;\n\n            if (bubbleRect.x < paddingBuffer) {\n                // Exceed left\n                return hasExceededTop ? \"top-left\" : \"left\";\n            } else if (bubbleRect.x + bubbleRect.width > rightLimit) {\n                // Exceed right\n                return hasExceededTop ? \"top-right\" : \"right\";\n            }\n\n            /**\n             * Handle cases where there is more space and we can\n             * shift bubble back to center\n             */\n            if (\n                (offsetStateRef.current === \"top-left\" ||\n                    offsetStateRef.current === \"left\") &&\n                bubbleRect.x - bubbleRect.width / 2 > paddingBuffer\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (\n                (offsetStateRef.current === \"top-right\" ||\n                    offsetStateRef.current === \"right\") &&\n                bubbleRect.x + bubbleRect.width * 2 < rightLimit\n            ) {\n                return hasExceededTop ? \"top-center\" : \"none\";\n            }\n\n            if (hasExceededTop) {\n                return \"top-center\";\n            }\n\n            // All ok, do nothing\n            return undefined;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <V2_Text.BodySmall>{children}</V2_Text.BodySmall>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            <BubbleWrap\n                ref={bubbleRef}\n                data-testid={testId}\n                $visible={visible}\n                $offset={offset}\n                {...otherProps}\n            >\n                <Card>{renderContent()}</Card>\n            </BubbleWrap>\n            {isMobile && (\n                <Modal\n                    show={visible ?? false}\n                    onOverlayClick={handleMobileClose}\n                >\n                    <MobileModalBox onClose={handleMobileClose}>\n                        <ContentWrapper>{renderContent()}</ContentWrapper>\n                    </MobileModalBox>\n                </Modal>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","otherProps","__rest","testId","offset","_setOffset","useState","bubbleRef","useRef","isMobile","useMediaQuery","maxWidth","MediaWidths","mobileL","offsetStateRef","useEffect","updateOffsetPosition","window","addEventListener","debounce","handleViewportResize","removeEventListener","handleMobileClose","newOffsetPosition","getOffsetPosition","value","current","bubbleRect","getBoundingClientRect","paddingBuffer","hasExceededTop","y","rightLimit","innerWidth","x","width","renderContent","_jsx","V2_Text","BodySmall","_jsxs","_Fragment","BubbleWrap","Object","assign","ref","$visible","$offset","Card","Modal","show","onOverlayClick","MobileModalBox","onClose","ContentWrapper"],"mappings":"wYAewBA,QAAAC,SACpBA,EAAQC,QACRA,EAAOC,cACPA,KACGC,EAAUC,EAAAA,OAAAL,EAJO,CAAA,WAAA,UAAA,kBASpB,MAAMM,EAASF,EAAW,gBAAkB,WACrCG,EAAQC,GAAcC,EAAAA,SAAyB,QAChDC,EAAYC,EAAAA,OAAuB,MACnCC,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUC,EAAAA,YAAYC,UASpBC,EAAiBN,EAAAA,OAAuBJ,GAa9CW,EAAAA,WAAU,KACNC,IACAC,OAAOC,iBAAiB,SAAUC,EAAAA,QAASC,EAAsB,MAE1D,KACHH,OAAOI,oBACH,SACAF,EAAAA,QAASC,EAAsB,KAClC,IAEN,IAKH,MAAMA,EAAuB,KACzBJ,GAAsB,EAGpBM,EAAoB,KAClBtB,GACAA,GACJ,EAMEgB,EAAuB,KACzB,MAAMO,EAAoBC,IArCZ,IAACC,EAuCXF,IAvCWE,EAwCDF,EAvCdT,EAAeY,QAAUD,EACzBpB,EAAWoB,GAuCX,EAGED,EAAoB,KACtB,GAAIjB,EAAUmB,QAAS,CACnB,MAAMC,EAAapB,EAAUmB,QAAQE,wBAC/BC,EAAgB,GAChBC,EAAiBH,EAAWI,EAAIF,EAChCG,EAAaf,OAAOgB,WAAaJ,EAEvC,OAAIF,EAAWO,EAAIL,EAERC,EAAiB,WAAa,OAC9BH,EAAWO,EAAIP,EAAWQ,MAAQH,EAElCF,EAAiB,YAAc,SAQV,aAA3BhB,EAAeY,SACe,SAA3BZ,EAAeY,UACnBC,EAAWO,EAAIP,EAAWQ,MAAQ,EAAIN,IAMV,cAA3Bf,EAAeY,SACe,UAA3BZ,EAAeY,UACnBC,EAAWO,EAAuB,EAAnBP,EAAWQ,MAAYH,EAN/BF,EAAiB,aAAe,OAWvCA,EACO,kBAIX,CACJ,GAMEM,EAAgB,IACE,iBAAbtC,EACHuC,EAAAA,IAACC,UAAQC,UAAS,CAAAzC,SAAEA,IAA6B,EAKzD,OACI0C,EAAAA,KAAAC,EAAAA,SAAA,CAAA3C,SAAA,CACIuC,EAAAA,IAACK,EAAAA,WAAUC,OAAAC,OAAA,CACPC,IAAKtC,EAAS,cACDJ,EAAM2C,SACT/C,EAAOgD,QACR3C,GACLH,EAAU,CAAAH,SAEduC,MAACW,EAAAA,KAAI,CAAAlD,SAAEsC,SAEV3B,GACG4B,EAAAA,IAACY,EAAAA,MAAK,CACFC,KAAMnD,SAAAA,EACNoD,eAAgB7B,EAAiBxB,SAEjCuC,EAAAA,IAACe,iBAAc,CAACC,QAAS/B,EAAiBxB,SACtCuC,EAAAA,IAACiB,EAAAA,eAAc,CAAAxD,SAAEsC,YAI9B"}
+{"version":3,"file":"popover.js","sources":["../../../src/popover/popover.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useMemo, useRef } from \"react\";\n\nimport { Card } from \"../card\";\nimport { Markup } from \"../markup\";\nimport { ModalV2 } from \"../modal-v2\";\nimport { useApplyStyle, useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./popover.styles\";\nimport type { PopoverProps } from \"./types\";\n\nexport const Popover = ({\n    children,\n    visible = false,\n    onMobileClose,\n    maxHeight,\n    overflow,\n    ariaLabel = \"More information\",\n    id,\n    className,\n    \"data-testid\": testId = \"popover\",\n    ...otherProps\n}: PopoverProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const popoverContainerRef = useRef<HTMLDivElement>(null);\n    const popoverCardStyle = useMemo(\n        () => ({\n            [styles.tokens.popoverCard.maxHeight]:\n                maxHeight === undefined ? null : `${maxHeight}px`,\n            [styles.tokens.popoverCard.overflowY]: overflow ?? null,\n        }),\n        [maxHeight, overflow]\n    );\n    useApplyStyle(popoverContainerRef, popoverCardStyle);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleMobileClose = () => {\n        if (onMobileClose) {\n            onMobileClose();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderContent = () =>\n        typeof children === \"string\" ? (\n            <Typography.BodyMD>{children}</Typography.BodyMD>\n        ) : (\n            children\n        );\n\n    return (\n        <>\n            {visible && !isMobile && (\n                <div\n                    ref={popoverContainerRef}\n                    tabIndex={0}\n                    data-testid={testId}\n                    {...otherProps}\n                    className={clsx(styles.popoverContainer, className)}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <Card\n                        className={clsx(\n                            styles.popoverCard,\n                            maxHeight !== undefined &&\n                                styles.popoverCardWithMaxHeight,\n                            overflow && styles.popoverCardWithOverflow\n                        )}\n                    >\n                        <Markup baseTextSize=\"body-md\">\n                            {renderContent()}\n                        </Markup>\n                    </Card>\n                </div>\n            )}\n            {isMobile && (\n                <ModalV2\n                    show={visible}\n                    onOverlayClick={handleMobileClose}\n                    onClose={handleMobileClose}\n                    id={id}\n                    role=\"dialog\"\n                    aria-label={ariaLabel}\n                >\n                    <ModalV2.Card>\n                        <ModalV2.Content>\n                            <Markup>{renderContent()}</Markup>\n                        </ModalV2.Content>\n                        <ModalV2.CloseButton />\n                    </ModalV2.Card>\n                </ModalV2>\n            )}\n        </>\n    );\n};\n"],"names":["_a","children","visible","onMobileClose","maxHeight","overflow","ariaLabel","id","className","testId","otherProps","__rest","isMobile","useMaxWidthMediaQuery","popoverContainerRef","useRef","popoverCardStyle","useMemo","styles.tokens","popoverCard","undefined","overflowY","useApplyStyle","handleMobileClose","renderContent","_jsx","Typography","BodyMD","_jsxs","_Fragment","Object","assign","ref","tabIndex","clsx","styles.popoverContainer","role","Card","styles.popoverCard","styles.popoverCardWithMaxHeight","styles.popoverCardWithOverflow","Markup","baseTextSize","ModalV2","show","onOverlayClick","onClose","Content","CloseButton"],"mappings":"otBAWwBA,IAAA,IAAAC,SACpBA,EAAQC,QACRA,GAAU,EAAKC,cACfA,EAAaC,UACbA,EAASC,SACTA,EAAQC,UACRA,EAAY,mBAAkBC,GAC9BA,EAAEC,UACFA,EACA,cAAeC,EAAS,WAAST,EAC9BU,EAAUC,EAAAA,OAAAX,EAVO,0GAepB,MAAMY,EAAWC,EAAAA,sBAAsB,MACjCC,EAAsBC,EAAAA,OAAuB,MAC7CC,EAAmBC,EAAAA,SACrB,KAAA,CACI,CAACC,EAAAA,OAAcC,YAAYf,gBACTgB,IAAdhB,EAA0B,KAAO,GAAGA,MACxC,CAACc,EAAAA,OAAcC,YAAYE,WAAYhB,QAAAA,EAAY,QAEvD,CAACD,EAAWC,IAEhBiB,EAAAA,cAAcR,EAAqBE,GAKnC,MAAMO,EAAoB,KAClBpB,GACAA,GACJ,EAMEqB,EAAgB,IACE,iBAAbvB,EACHwB,EAAAA,IAACC,aAAWC,OAAM,CAAA1B,SAAEA,IAA6B,EAKzD,OACI2B,EAAAA,KAAAC,EAAAA,SAAA,CAAA5B,SAAA,CACKC,IAAYU,GACTa,MAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKlB,EACLmB,SAAU,EAAC,cACExB,GACTC,EAAU,CACdF,UAAW0B,EAAAA,QAAKC,EAAAA,iBAAyB3B,GACzCD,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErBwB,EAAAA,IAACY,OAAI,CACD7B,UAAW0B,UACPI,EAAAA,iBACclB,IAAdhB,GACImC,EAAAA,yBACJlC,GAAYmC,EAAAA,yBACfvC,SAEDwB,EAAAA,IAACgB,EAAAA,OAAM,CAACC,aAAa,mBAChBlB,WAKhBZ,GACGa,EAAAA,IAACkB,EAAAA,QAAO,CACJC,KAAM1C,EACN2C,eAAgBtB,EAChBuB,QAASvB,EACThB,GAAIA,EACJ6B,KAAK,SAAQ,aACD9B,EAASL,SAErB2B,EAAAA,KAACe,EAAAA,QAAQN,KAAI,CAAApC,SAAA,CACTwB,EAAAA,IAACkB,EAAAA,QAAQI,QAAO,CAAA9C,SACZwB,EAAAA,IAACgB,SAAM,CAAAxC,SAAEuB,QAEbC,EAAAA,IAACkB,EAAAA,QAAQK,YAAW,CAAA,UAIjC"}

package/cjs/popover/popover.styles.js

@@ -1,75 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../modal/modal-box.js"),r=require("../v2_media/media.js"),a=require("../v2_transition/index.js");function o(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=o(t);const n=i.default.div`
-    max-width: 30rem;
-    pointer-events: auto;
-    position: absolute;
-
-    ${e=>e.$visible?t.css`
-            visibility: visible;
-            opacity: 1;
-            transition: ${a.V2_Transition.Base};
-            z-index: 50;
-        `:t.css`
-            visibility: hidden;
-            opacity: 0;
-            transition: ${a.V2_Transition.Base};
-            z-index: -1;
-        `}
-    ${e=>(e=>{switch(e){case"top-center":return t.css`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 50%;
-                -moz-transform: translateX(-50%);
-                -webkit-transform: translateX(-50%);
-                transform: translateX(-50%);
-            `;case"top-left":return t.css`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 0;
-            `;case"top-right":return t.css`
-                top: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                right: 0;
-            `;case"left":return t.css`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 0;
-            `;case"right":return t.css`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                right: 0;
-            `;default:return t.css`
-                bottom: calc(100% + 12px);
-                width: max-content;
-                margin: auto;
-                left: 50%;
-                -moz-transform: translateX(-50%);
-                -webkit-transform: translateX(-50%);
-                transform: translateX(-50%);
-            `}})(e.$offset)}
-
-	${r.V2_MediaQuery.MaxWidth.mobileL} {
-        display: none;
-    }
-`,s=i.default(e.ModalBox)`
-    padding: 3.5rem 1.25rem 2.5rem;
-`,l=i.default.div`
-    position: relative;
-    width: fit-content;
-`,c=i.default.button`
-    cursor: pointer;
-    background: none;
-    border: none;
-    padding: 0;
-`,d=i.default.div`
-    overflow-y: scroll;
-
-    &::-webkit-scrollbar {
-        display: none; /* Chrome/Safari/Webkit */
-    }
-`;exports.BubbleWrap=n,exports.ContentWrapper=d,exports.HOCTrigger=c,exports.HOCWrapper=l,exports.MobileModalBox=s;
+"use strict";require("./popover.styles_ujnf0h.css");exports.popoverCard="p1jmdldd",exports.popoverCardWithMaxHeight="p51fygj",exports.popoverCardWithOverflow="p1hzbz92",exports.popoverContainer="p1scb124",exports.tokens={popoverCard:{maxHeight:"--fds-internal-popover-popoverCard-maxHeight",overflowY:"--fds-internal-popover-popoverCard-overflowY"}};
 //# sourceMappingURL=popover.styles.js.map

package/cjs/popover/popover.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"popover.styles.js","sources":["../../../src/popover/popover.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ModalBox } from \"../modal/modal-box\";\nimport { V2_MediaQuery } from \"../v2_media\";\nimport { V2_Transition } from \"../v2_transition\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\nexport type OffsetPosition =\n    | \"top-center\"\n    | \"top-left\"\n    | \"top-right\"\n    | \"left\"\n    | \"right\"\n    | \"none\";\n\ninterface PopoverStyleProps {\n    $visible?: boolean;\n    $offset: OffsetPosition;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst getVisibilityStyle = (visible: boolean | undefined) => {\n    if (visible) {\n        return css`\n            visibility: visible;\n            opacity: 1;\n            transition: ${V2_Transition.Base};\n            z-index: 50;\n        `;\n    } else {\n        return css`\n            visibility: hidden;\n            opacity: 0;\n            transition: ${V2_Transition.Base};\n            z-index: -1;\n        `;\n    }\n};\n\nconst getBubblePosition = (offset: OffsetPosition) => {\n    switch (offset) {\n        case \"top-center\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 50%;\n                -moz-transform: translateX(-50%);\n                -webkit-transform: translateX(-50%);\n                transform: translateX(-50%);\n            `;\n        case \"top-left\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 0;\n            `;\n        case \"top-right\":\n            return css`\n                top: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                right: 0;\n            `;\n        case \"left\":\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 0;\n            `;\n        case \"right\":\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                right: 0;\n            `;\n        default:\n            return css`\n                bottom: calc(100% + 12px);\n                width: max-content;\n                margin: auto;\n                left: 50%;\n                -moz-transform: translateX(-50%);\n                -webkit-transform: translateX(-50%);\n                transform: translateX(-50%);\n            `;\n    }\n};\n\nexport const BubbleWrap = styled.div<PopoverStyleProps>`\n    max-width: 30rem;\n    pointer-events: auto;\n    position: absolute;\n\n    ${(props) => getVisibilityStyle(props.$visible)}\n    ${(props) => getBubblePosition(props.$offset)}\n\n\t${V2_MediaQuery.MaxWidth.mobileL} {\n        display: none;\n    }\n`;\n\nexport const MobileModalBox = styled(ModalBox)`\n    padding: 3.5rem 1.25rem 2.5rem;\n`;\n\nexport const HOCWrapper = styled.div`\n    position: relative;\n    width: fit-content;\n`;\n\nexport const HOCTrigger = styled.button`\n    cursor: pointer;\n    background: none;\n    border: none;\n    padding: 0;\n`;\n\nexport const ContentWrapper = styled.div`\n    overflow-y: scroll;\n\n    &::-webkit-scrollbar {\n        display: none; /* Chrome/Safari/Webkit */\n    }\n`;\n"],"names":["BubbleWrap","styled","div","props","$visible","css","V2_Transition","Base","offset","getBubblePosition","$offset","V2_MediaQuery","MaxWidth","mobileL","MobileModalBox","ModalBox","HOCWrapper","HOCTrigger","button","ContentWrapper"],"mappings":"+OA0BA,MAuEaA,EAAaC,EAAAA,QAAOC,GAAsB;;;;;MAKhDC,GAA6BA,EAAMC,SA1E3BC,KAAG;;;0BAGQC,EAAAA,cAAcC;;UAIzBF,KAAG;;;0BAGQC,EAAAA,cAAcC;;;MAiEjCJ,GA3DmB,CAACK,IACvB,OAAQA,GACJ,IAAK,aACD,OAAOH,KAAG;;;;;;;;cASd,IAAK,WACD,OAAOA,KAAG;;;;;cAMd,IAAK,YACD,OAAOA,KAAG;;;;;cAMd,IAAK,OACD,OAAOA,KAAG;;;;;cAMd,IAAK,QACD,OAAOA,KAAG;;;;;cAMd,QACI,OAAOA,KAAG;;;;;;;;gBAkBLI,CAAkBN,EAAMO;;GAEtCC,EAAAA,cAAcC,SAASC;;;EAKbC,EAAiBb,EAAAA,QAAOc,EAAAA,SAAS;;EAIjCC,EAAaf,EAAAA,QAAOC,GAAG;;;EAKvBe,EAAahB,EAAAA,QAAOiB,MAAM;;;;;EAO1BC,EAAiBlB,EAAAA,QAAOC,GAAG;;;;;;"}
+{"version":3,"file":"popover.styles.js","sources":["../../../src/popover/popover.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius } from \"../theme\";\n\nexport const tokens = {\n    popoverCard: {\n        maxHeight: \"--fds-internal-popover-popoverCard-maxHeight\",\n        overflowY: \"--fds-internal-popover-popoverCard-overflowY\",\n    },\n} as const;\n\nexport const popoverContainer = css`\n    max-width: 30rem;\n    padding: 0 1rem;\n    pointer-events: auto;\n    outline: none;\n`;\n\nexport const popoverCard = css`\n    color: ${Colour.text};\n\n    ${MediaQuery.MaxWidth.sm} {\n        display: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius.full};\n        background-clip: padding-box;\n    }\n`;\n\nexport const popoverCardWithMaxHeight = css`\n    ${tokens.popoverCard.maxHeight}: initial;\n    max-height: var(${tokens.popoverCard.maxHeight});\n`;\n\nexport const popoverCardWithOverflow = css`\n    ${tokens.popoverCard.overflowY}: initial;\n    overflow-y: var(${tokens.popoverCard.overflowY});\n`;\n"],"names":["popoverCard","maxHeight","overflowY"],"mappings":"+FAkBwB,4CAuBa,0CAKD,oCAnCP,0BAPP,CAClBA,YAAa,CACTC,UAAW,+CACXC,UAAW"}

package/cjs/popover/popover.styles_ujnf0h.css

@@ -0,0 +1,4 @@
+.p1scb124{max-width:30rem;padding:0 1rem;pointer-events:auto;outline:none;}
+.p1jmdldd{color:var(--fds-colour-text);}:where(body.fds-breakpoint-sm-max) .p1jmdldd{display:none;}.p1jmdldd::-webkit-scrollbar{width:14px;}.p1jmdldd::-webkit-scrollbar-track{background:transparent;}.p1jmdldd::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+.p51fygj{--fds-internal-popover-popoverCard-maxHeight:initial;max-height:var(--fds-internal-popover-popoverCard-maxHeight);}
+.p1hzbz92{--fds-internal-popover-popoverCard-overflowY:initial;overflow-y:var(--fds-internal-popover-popoverCard-overflowY);}

package/cjs/predictive-text-input/predictive-text-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),a=require("../input/input.js"),i=require("../shared/accessibility/index.js");require("styled-components"),require("../util/string-helper.js"),require("../v3_theme/index.js"),require("../shared/dropdown-list-v2/dropdown-label.styles.js");var o=require("../shared/dropdown-list-v2/dropdown-list.js"),l=require("../shared/dropdown-list-v2/dropdown-list-state.js");require("../shared/dropdown-list-v2/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/simple-id-generator.js");require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list-v2/dropdown-list.styles.js"),require("../shared/dropdown-list-v2/dropdown-search.js"),require("../shared/dropdown-list-v2/nested-dropdown-list.styles.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js");var u=require("../shared/input-wrapper/input-wrapper.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:x,minimumCharacters:j=3,fetchOptions:m,placeholder:v="Enter here...",readOnly:g=!1,disabled:w=!1,error:f,valueExtractor:q,listExtractor:y,displayValueExtractor:b,onSelectOption:S,alignment:E,dropdownZIndex:T,dropdownRootNode:I,dropdownWidth:O,"aria-describedby":_}=c,C=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const D=e=>e?b?b(e):e.toString():"",[N,$]=s.useState((()=>x?D(x):"")),[R,L]=s.useState((()=>x?D(x):"")),[W,k]=s.useState([]),[B,V]=s.useState(!0),[A,F]=s.useState(!1),[H,Z]=s.useState(!!x),[G,P]=s.useState(x),[M,z]=s.useState(!1),[J,K]=s.useState(!1),[Q]=s.useState((()=>n.SimpleIdGenerator.generate())),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(m),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){F(!1),V(!0);try{const e=yield te.current(r);L(r),k(null!=e?e:[]),V(!1)}catch(e){F(!0),V(!1)}}}))),[]),ae=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=m}),[m]),s.useEffect((()=>{N&&N.length>=j?H?N!==R&&ae(N):(z(!0),ae(N)):ae.cancel(),""===N&&G&&(null==S||S(void 0,void 0),pe(),P(void 0)),x&&N!==D(x)&&Z(!1)}),[N,x]),s.useEffect((()=>{$(x?D(x):""),L(x?D(x):""),P(x),k([]),Z(!!x)}),[x]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==W?void 0:W.length)&&void 0!==e?e:0;"loading"===r&&N.length>=j?X("Loading suggested results"):"fail"!==r?!M||B||A||X(0===t?N?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[W,N,A,B]),s.useEffect((()=>()=>{ae.cancel()}),[ae]);const ie=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),$(D(e)),L(e?D(e):""),Z(!0),P(e),z(!1),null==S||S(e,r)},oe=()=>{K(!0)},le=e=>{M||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{$(""),k([]),Z(!1),z(!1),null==S||S(void 0,void 0)},ue=()=>{if(!H)if(G){const e=D(G);$(e),z(!1)}else de()},ce=e=>{$(e.target.value),Z(!1)},pe=e=>{L(""),Z(!1),k([]),V(!0)},he=()=>A?"fail":B?"loading":"success";return r.jsx(l.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!w,isOpen:M,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,$focused:J,$disabled:w,$readOnly:g,$error:f,children:[r.jsxs(i.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",j," or more characters for suggested results."]}),U&&r.jsx(i.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(a.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:N,onChange:ce,placeholder:v,readOnly:g,disabled:w,allowClear:!0,onClear:de,"aria-expanded":M,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:N.length<j?ue:void 0,styleType:"no-border","aria-describedby":i.concatIds(_,Y)},C))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(o.DropdownList,{listboxId:Q,listItems:W,onSelectItem:ie,onDismiss:ne,valueExtractor:q,listExtractor:y,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(N),width:O,matchElementWidth:!0})}),onOpen:()=>{!H&&N.length>=j&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:E,fitAvailableHeight:!0,customZIndex:T,rootNode:I})})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/debounce.js"),s=require("react"),i=require("../input/input.js"),a=require("../shared/accessibility/index.js");require("clsx"),require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js"),require("../shared/dropdown-list/dropdown-label.styles_1dwmd8f.css");var l=require("../shared/dropdown-list/dropdown-list.js"),n=require("../shared/dropdown-list/dropdown-list-state.js");require("../shared/dropdown-list/expandable-element.js"),require("@lifesg/react-icons/caret-right"),require("@lifesg/react-icons/exclamation-circle-fill"),require("@lifesg/react-icons/minus-square-fill"),require("@lifesg/react-icons/square"),require("@lifesg/react-icons/square-tick-fill"),require("@lifesg/react-icons/tick"),require("react-virtuoso"),require("../markup/markup.js"),require("../shared/component-loading-spinner/component-loading-spinner.styles_15eq02i.css");var d=require("../shared/dropdown-wrapper/element-with-dropdown.js"),u=require("../shared/input-wrapper/input-wrapper.js");require("../shared/dropdown-list/dropdown-list.styles_1kt4zhf.css"),require("../shared/dropdown-list/dropdown-search.js"),require("../shared/dropdown-list/nested-dropdown-list.styles_wdhxoe.css"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/virtuoso-components.js");exports.PredictiveTextInput=c=>{var{className:p,"data-testid":h,selectedOption:m,minimumCharacters:q=3,fetchOptions:f,placeholder:x="Enter here...",readOnly:g=!1,disabled:j=!1,error:w,valueExtractor:v,listExtractor:y,displayValueExtractor:b,onSelectOption:_,alignment:S,dropdownZIndex:T,dropdownRootNode:E,dropdownWidth:I,"aria-describedby":k}=c,C=e.__rest(c,["className","data-testid","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","aria-describedby"]);const O=e=>e?b?b(e):e.toString():"",[A,D]=s.useState((()=>m?O(m):"")),[H,N]=s.useState((()=>m?O(m):"")),[P,R]=s.useState([]),[G,L]=s.useState(!0),[M,W]=s.useState(!1),[B,V]=s.useState(!!m),[F,Z]=s.useState(m),[$,z]=s.useState(!1),[J,K]=s.useState(!1),Q=o.useId(),[U,X]=s.useState(null),Y=`${Q}-instruction`,ee=s.useRef(null),re=s.useRef(null),te=s.useRef(f),se=s.useCallback((r=>e.__awaiter(void 0,void 0,void 0,(function*(){if(te.current){W(!1),L(!0);try{const e=yield te.current(r);N(r),R(null!=e?e:[]),L(!1)}catch(e){W(!0),L(!1)}}}))),[]),ie=s.useCallback(t.default((e=>{se(e)}),500),[se]);s.useEffect((()=>{te.current=f}),[f]),s.useEffect((()=>{A&&A.length>=q?B?A!==H&&ie(A):(z(!0),ie(A)):ie.cancel(),""===A&&F&&(null==_||_(void 0,void 0),pe(),Z(void 0)),m&&A!==O(m)&&V(!1)}),[A,m]),s.useEffect((()=>{D(m?O(m):""),N(m?O(m):""),Z(m),R([]),V(!!m)}),[m]),s.useEffect((()=>{var e;const r=he(),t=null!==(e=null==P?void 0:P.length)&&void 0!==e?e:0;"loading"===r&&A.length>=q?X("Loading suggested results"):"fail"!==r?!$||G||M||X(0===t?A?"No results found.":null:`${t} result${t>1?"s":""} found. Press down arrow to scroll through the list.`):X("Suggestions failed to load. Try again.")}),[P,A,M,G]),s.useEffect((()=>()=>{ie.cancel()}),[ie]);const ae=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),D(O(e)),N(e?O(e):""),V(!0),Z(e),z(!1),null==_||_(e,r)},oe=()=>{K(!0)},le=e=>{$||!ee.current||ee.current.contains(e.relatedTarget)||(K(!1),ue())},ne=()=>{z(!1),K(!1)},de=()=>{D(""),R([]),V(!1),z(!1),null==_||_(void 0,void 0)},ue=()=>{if(!B)if(F){const e=O(F);D(e),z(!1)}else de()},ce=e=>{D(e.target.value),V(!1)},pe=e=>{N(""),V(!1),R([]),L(!0)},he=()=>M?"fail":G?"loading":"success";return r.jsx(n.DropdownListState,{children:r.jsx(d.ElementWithDropdown,{enabled:!g&&!j,isOpen:$,renderElement:()=>r.jsxs(u.InputWrapper,{className:p,"data-testid":h,ref:ee,tabIndex:-1,onFocus:oe,onBlur:le,focused:J,disabled:j,readOnly:g,error:w,children:[r.jsxs(a.VisuallyHidden,{id:Y,"aria-hidden":!0,children:["Type in ",q," or more characters for suggested results."]}),U&&r.jsx(a.VisuallyHidden,{"aria-live":"polite",children:U}),r.jsx(i.Input,Object.assign({role:"combobox",ref:re,id:Q,type:"text",value:A,onChange:ce,placeholder:x,readOnly:g,disabled:j,allowClear:!0,onClear:de,"aria-expanded":$,"aria-controls":Q,"aria-autocomplete":"list","aria-haspopup":"listbox",onBlur:A.length<q?ue:void 0,styleType:"no-border","aria-describedby":a.concatIds(k,Y)},C))]}),renderDropdown:()=>r.jsx(r.Fragment,{children:r.jsx(l.DropdownList,{listboxId:Q,listItems:P,onSelectItem:ae,onDismiss:ne,valueExtractor:v,listExtractor:y,itemsLoadState:he(),itemTruncationType:"end",itemMaxLines:1,labelDisplayType:"next-line",disableItemFocus:!0,onRetry:()=>se(A),width:I,matchElementWidth:!0})}),onOpen:()=>{!B&&A.length>=q&&K(!0)},onClose:()=>{z(!1),K(!1),ue()},onDismiss:()=>{var e;z(!1),K(!1),ue(),null===(e=re.current)||void 0===e||e.focus()},clickToToggle:!1,offset:8,alignment:S,fitAvailableHeight:!0,customZIndex:T,rootNode:E})})};
 //# sourceMappingURL=predictive-text-input.js.map

package/cjs/predictive-text-input/predictive-text-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list-v2\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={isFocused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","SimpleIdGenerator","generate","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","$focused","$readOnly","$error","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"predictive-text-input.js","sources":["../../../src/predictive-text-input/predictive-text-input.tsx"],"sourcesContent":["import debounce from \"lodash/debounce\";\nimport type React from \"react\";\nimport { useCallback, useEffect, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { DropdownList, DropdownListState } from \"../shared/dropdown-list\";\nimport type { ItemsLoadStateType } from \"../shared/dropdown-list/types\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { useId } from \"../util\";\nimport type { PredictiveTextInputProps } from \"./types\";\n\nexport const PredictiveTextInput = <T, V>({\n    className,\n    \"data-testid\": testId,\n    selectedOption,\n    minimumCharacters = 3,\n    fetchOptions,\n    placeholder = \"Enter here...\",\n    readOnly = false,\n    disabled = false,\n    error,\n    valueExtractor,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: PredictiveTextInputProps<T, V>): JSX.Element => {\n    const getDisplayValue = (item: T | undefined): string => {\n        if (!item) return \"\";\n        return displayValueExtractor\n            ? displayValueExtractor(item)\n            : item.toString();\n    };\n\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [input, setInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [searchedInput, setSearchedInput] = useState<string>(() =>\n        selectedOption ? getDisplayValue(selectedOption) : \"\"\n    );\n    const [options, setOptions] = useState<T[]>([]);\n    const [isLoading, setIsLoading] = useState<boolean>(true);\n    const [isError, setIsError] = useState<boolean>(false);\n    const [isOptionSelected, setIsOptionSelected] = useState<boolean>(\n        !!selectedOption\n    );\n    const [prevOptionSelected, setPrevOptionSelected] = useState<T | undefined>(\n        selectedOption\n    );\n    const [isOpen, setIsOpen] = useState(false);\n    const [isFocused, setIsFocused] = useState(false);\n\n    const internalId = useId();\n    const [resultAnnouncement, setResultAnnouncement] = useState<string | null>(\n        null\n    );\n    const instructionId = `${internalId}-instruction`;\n\n    const nodeRef = useRef<HTMLDivElement | null>(null);\n    const selectorRef = useRef<HTMLInputElement | null>(null);\n\n    const fetchOptionsRef = useRef(fetchOptions);\n\n    // =============================================================================\n    // DEBOUNCE FUNCTIONS\n    // =============================================================================\n    const handleFetchOptions = useCallback(async (input: string) => {\n        if (!fetchOptionsRef.current) return;\n        setIsError(false);\n        setIsLoading(true);\n        try {\n            const fetchedOptions = await fetchOptionsRef.current(input);\n            setSearchedInput(input);\n            setOptions(fetchedOptions ?? []);\n            setIsLoading(false);\n        } catch {\n            setIsError(true);\n            setIsLoading(false);\n        }\n    }, []);\n\n    const fetchOptionsDebounced = useCallback(\n        debounce((input: string) => {\n            handleFetchOptions(input);\n        }, 500),\n        [handleFetchOptions]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useEffect(() => {\n        fetchOptionsRef.current = fetchOptions;\n    }, [fetchOptions]);\n\n    useEffect(() => {\n        /***\n         * Should not fetch options for the following the scenario :\n         * 1. When input < minimumCharacters\n         * 2. When user selected option from dropdown becomes input\n         * 3. Initial selectedOption passed in as input\n         */\n        if (input && input.length >= minimumCharacters) {\n            if (!isOptionSelected) {\n                setIsOpen(true);\n                fetchOptionsDebounced(input);\n            } else if (input !== searchedInput) {\n                fetchOptionsDebounced(input);\n            }\n        } else {\n            fetchOptionsDebounced.cancel();\n        }\n\n        if (input === \"\" && prevOptionSelected) {\n            onSelectOption?.(undefined, undefined);\n            handleDropdownDismiss();\n            setPrevOptionSelected(undefined);\n        }\n\n        if (selectedOption && input !== getDisplayValue(selectedOption)) {\n            setIsOptionSelected(false);\n        }\n    }, [input, selectedOption]);\n\n    useEffect(() => {\n        setInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setSearchedInput(selectedOption ? getDisplayValue(selectedOption) : \"\");\n        setPrevOptionSelected(selectedOption);\n        setOptions([]);\n        setIsOptionSelected(!!selectedOption);\n    }, [selectedOption]);\n\n    useEffect(() => {\n        const state = getItemsLoadState();\n        const count = options?.length ?? 0;\n\n        if (state === \"loading\" && input.length >= minimumCharacters) {\n            setResultAnnouncement(\"Loading suggested results\");\n            return;\n        }\n\n        if (state === \"fail\") {\n            setResultAnnouncement(\"Suggestions failed to load. Try again.\");\n            return;\n        }\n\n        if (isOpen && !isLoading && !isError) {\n            if (count === 0) {\n                setResultAnnouncement(input ? \"No results found.\" : null);\n            } else {\n                setResultAnnouncement(\n                    `${count} result${\n                        count > 1 ? \"s\" : \"\"\n                    } found. Press down arrow to scroll through the list.`\n                );\n            }\n        }\n    }, [options, input, isError, isLoading]);\n\n    // =============================================================================\n    // Cleanup: cancel debounce on unmount\n    // =============================================================================\n    useEffect(() => {\n        return () => {\n            fetchOptionsDebounced.cancel();\n        };\n    }, [fetchOptionsDebounced]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setInput(getDisplayValue(item));\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(true);\n        setPrevOptionSelected(item);\n        setIsOpen(false);\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleOpen = () => {\n        if (!isOptionSelected && input.length >= minimumCharacters) {\n            setIsFocused(true);\n        }\n    };\n\n    const handleClose = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n    };\n\n    const handleNodeFocus = () => {\n        setIsFocused(true);\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            !isOpen &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setIsFocused(false);\n            handleOnBlur();\n        }\n    };\n\n    const handleListDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n    };\n\n    const handleDismiss = () => {\n        setIsOpen(false);\n        setIsFocused(false);\n        handleOnBlur();\n        selectorRef.current?.focus();\n    };\n\n    const handleOnClear = () => {\n        setInput(\"\");\n        setOptions([]);\n        setIsOptionSelected(false);\n        setIsOpen(false);\n        onSelectOption?.(undefined, undefined);\n    };\n\n    const handleOnBlur = () => {\n        if (!isOptionSelected) {\n            if (prevOptionSelected) {\n                const prevValue = getDisplayValue(prevOptionSelected);\n                setInput(prevValue);\n                setIsOpen(false);\n            } else {\n                handleOnClear();\n            }\n        }\n    };\n\n    const handleTyping = (e: React.ChangeEvent<HTMLInputElement>) => {\n        setInput(e.target.value);\n        setIsOptionSelected(false);\n    };\n\n    const handleDropdownDismiss = (item?: T) => {\n        setSearchedInput(item ? getDisplayValue(item) : \"\");\n        setIsOptionSelected(!!item);\n        setOptions([]);\n        setIsLoading(true);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getItemsLoadState = (): ItemsLoadStateType => {\n        if (isError) return \"fail\";\n        return isLoading ? \"loading\" : \"success\";\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputElement = () => {\n        return (\n            <InputWrapper\n                className={className}\n                data-testid={testId}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                focused={isFocused}\n                disabled={disabled}\n                readOnly={readOnly}\n                error={error}\n            >\n                <VisuallyHidden id={instructionId} aria-hidden>\n                    Type in {minimumCharacters} or more characters for suggested\n                    results.\n                </VisuallyHidden>\n                {resultAnnouncement && (\n                    <VisuallyHidden aria-live=\"polite\">\n                        {resultAnnouncement}\n                    </VisuallyHidden>\n                )}\n                <Input\n                    role=\"combobox\"\n                    ref={selectorRef}\n                    id={internalId}\n                    type=\"text\"\n                    value={input}\n                    onChange={handleTyping}\n                    placeholder={placeholder}\n                    readOnly={readOnly}\n                    disabled={disabled}\n                    allowClear\n                    onClear={handleOnClear}\n                    aria-expanded={isOpen}\n                    aria-controls={internalId}\n                    aria-autocomplete=\"list\"\n                    aria-haspopup=\"listbox\"\n                    onBlur={\n                        input.length < minimumCharacters\n                            ? handleOnBlur\n                            : undefined\n                    }\n                    styleType=\"no-border\"\n                    aria-describedby={concatIds(ariaDescribedBy, instructionId)}\n                    {...otherProps}\n                />\n            </InputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <>\n                <DropdownList\n                    listboxId={internalId}\n                    listItems={options}\n                    onSelectItem={handleListItemClick}\n                    onDismiss={handleListDismiss}\n                    valueExtractor={valueExtractor}\n                    listExtractor={listExtractor}\n                    itemsLoadState={getItemsLoadState()}\n                    itemTruncationType={\"end\"}\n                    itemMaxLines={1}\n                    labelDisplayType={\"next-line\"}\n                    disableItemFocus\n                    onRetry={() => handleFetchOptions(input)}\n                    width={dropdownWidth}\n                    matchElementWidth\n                />\n            </>\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={isOpen}\n                renderElement={renderInputElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle={false}\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["_a","className","testId","selectedOption","minimumCharacters","fetchOptions","placeholder","readOnly","disabled","error","valueExtractor","listExtractor","displayValueExtractor","onSelectOption","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaDescribedBy","otherProps","__rest","getDisplayValue","item","toString","input","setInput","useState","searchedInput","setSearchedInput","options","setOptions","isLoading","setIsLoading","isError","setIsError","isOptionSelected","setIsOptionSelected","prevOptionSelected","setPrevOptionSelected","isOpen","setIsOpen","isFocused","setIsFocused","internalId","useId","resultAnnouncement","setResultAnnouncement","instructionId","nodeRef","useRef","selectorRef","fetchOptionsRef","handleFetchOptions","useCallback","__awaiter","current","fetchedOptions","fetchOptionsDebounced","debounce","useEffect","length","cancel","undefined","handleDropdownDismiss","state","getItemsLoadState","count","handleListItemClick","extractedValue","focus","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","handleOnBlur","handleListDismiss","handleOnClear","prevValue","handleTyping","target","value","_jsx","DropdownListState","children","ElementWithDropdown","enabled","renderElement","_jsxs","InputWrapper","ref","tabIndex","onFocus","onBlur","focused","VisuallyHidden","id","Input","Object","assign","role","type","onChange","allowClear","onClear","styleType","concatIds","renderDropdown","_Fragment","DropdownList","listboxId","listItems","onSelectItem","onDismiss","itemsLoadState","itemTruncationType","itemMaxLines","labelDisplayType","disableItemFocus","onRetry","width","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/progress-indicator/progress-indicator.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("../external/lodash/kebabCase.js"),i=require("react"),s=require("../external/react-responsive/dist/react-responsive.js"),n=require("styled-components"),a=require("../shared/accessibility/index.js"),d=require("../v3_theme/index.js"),l=require("./progress-indicator.style.js");exports.ProgressIndicator=o=>{var{steps:c,currentIndex:u,displayExtractor:h,fadeColor:x,fadePosition:p}=o,j=e.__rest(o,["steps","currentIndex","displayExtractor","fadeColor","fadePosition"]);const g=i.useContext(n.ThemeContext),m=d.V3_Breakpoint["lg-max"]({theme:g}),v=s.reactResponsiveExports.useMediaQuery({maxWidth:m}),I=e=>{var r;return h?h(e):null!==(r=null==e?void 0:e.toString())&&void 0!==r?r:""},b=(e,r)=>e<r?"Completed step":e===r?"Current step":"Upcoming step",q=(e,r)=>t.default(`${b(e,r)} ${e}`);if(!c.length)return null;return r.jsxs(l.Wrapper,Object.assign({},j,{children:[r.jsx(l.Content,{children:c.map(((e,t)=>{const i=t<=u;return r.jsx(l.Indicator,{id:q(t,u),children:r.jsx(l.IndicatorBar,{$highlighted:i})},t)}))}),r.jsx(l.Content,{children:v?r.jsxs(l.Indicator,{id:q(u,u),children:[r.jsxs(l.IndicatorTitleTablet,{weight:"semibold",id:`${q(u,u)}-counter`,children:["Step ",u+1," of ",c.length]}),r.jsx(l.IndicatorTitleTablet,{weight:"regular",id:`${q(u,u)}-title`,children:I(c[u])})]},u):c.map(((e,t)=>{const i=t<=u,s=t===u,n=s?"bold":"regular";return r.jsx(l.Indicator,{id:`${q(t,u)}-title`,children:r.jsxs(l.IndicatorTitleDesktop,{$highlighted:i,weight:n,"aria-current":s,children:[I(e),r.jsx(a.VisuallyHidden,{children:b(t,u)})]})},t)}))})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("clsx"),t=require("../external/lodash/kebabCase.js"),s=require("../shared/accessibility/index.js");require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../theme/utils/use-media-query.js"),l=require("../typography/index.js"),n=require("./progress-indicator.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=d(i);exports.ProgressIndicator=i=>{var{steps:d,currentIndex:u,displayExtractor:o,className:h}=i,j=e.__rest(i,["steps","currentIndex","displayExtractor","className"]);const p=a.useMaxWidthMediaQuery("lg"),m=e=>{var r;return o?o(e):null!==(r=null==e?void 0:e.toString())&&void 0!==r?r:""},x=(e,r)=>e<r?"Completed step":e===r?"Current step":"Upcoming step",g=(e,r)=>t.default(`${x(e,r)} ${e}`);if(!d.length)return null;return r.jsxs("div",Object.assign({className:c.default(n.wrapper,h)},j,{children:[r.jsx("div",{className:n.content,children:d.map(((e,i)=>{const t=i<=u;return r.jsx("div",{id:g(i,u),className:n.indicator,children:r.jsx("div",{className:c.default(n.indicatorBar,t&&n.indicatorBarHighlighted)})},i)}))}),r.jsx("div",{className:n.content,children:p?r.jsxs("div",{id:g(u,u),className:n.indicator,children:[r.jsxs(l.Typography.BodyMD,{className:n.indicatorTitleTablet,weight:"semibold",id:`${g(u,u)}-counter`,children:["Step ",u+1," of ",d.length]}),r.jsx(l.Typography.BodyMD,{className:n.indicatorTitleTablet,weight:"regular",id:`${g(u,u)}-title`,children:m(d[u])})]},u):d.map(((e,i)=>{const t=i<=u,a=i===u,d=a?"bold":"regular";return r.jsx("div",{id:`${g(i,u)}-title`,className:n.indicator,children:r.jsxs(l.Typography.BodyMD,{className:c.default(n.indicatorTitleDesktop,t&&n.indicatorTitleDesktopHighlighted),weight:d,"aria-current":a,children:[m(e),r.jsx(s.VisuallyHidden,{children:x(i,u)})]})},i)}))})]}))};
 //# sourceMappingURL=progress-indicator.js.map

package/cjs/progress-indicator/progress-indicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-indicator.js","sources":["../../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import kebabCase from \"lodash/kebabCase\";\nimport { useContext } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    Content,\n    Indicator,\n    IndicatorBar,\n    IndicatorTitleDesktop,\n    IndicatorTitleTablet,\n    Wrapper,\n} from \"./progress-indicator.style\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    fadeColor: _fadeColor,\n    fadePosition: _fadePosition,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const tabletBreakpoint = V3_Breakpoint[\"lg-max\"]({ theme });\n    const isTablet = useMediaQuery({\n        maxWidth: tabletBreakpoint,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <Indicator key={stepIndex} id={getId(stepIndex, currentIndex)}>\n                    <IndicatorBar $highlighted={highlighted}></IndicatorBar>\n                </Indicator>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <Indicator\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                >\n                    <IndicatorTitleDesktop\n                        $highlighted={highlighted}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </IndicatorTitleDesktop>\n                </Indicator>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <Indicator\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n            >\n                <IndicatorTitleTablet\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </IndicatorTitleTablet>\n                <IndicatorTitleTablet\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </IndicatorTitleTablet>\n            </Indicator>\n        );\n    };\n\n    return (\n        <Wrapper {...otherProps}>\n            <Content>{renderBars()}</Content>\n            <Content>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </Content>\n        </Wrapper>\n    );\n};\n"],"names":["_a","steps","currentIndex","displayExtractor","fadeColor","_fadeColor","fadePosition","_fadePosition","otherProps","__rest","theme","useContext","ThemeContext","tabletBreakpoint","V3_Breakpoint","isTablet","useMediaQuery","maxWidth","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","Wrapper","Object","assign","children","_jsx","Content","map","step","highlighted","Indicator","id","IndicatorBar","$highlighted","IndicatorTitleTablet","weight","current","fontWeight","IndicatorTitleDesktop","VisuallyHidden"],"mappings":"0YAiBsCA,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EACAC,UAAWC,EACXC,aAAcC,GAAaP,EACxBQ,EAAUC,EAAAA,OAAAT,EANqB,wEAWlC,MAAMU,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmBC,EAAAA,cAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,uBAAAA,cAAc,CAC3BC,SAAUJ,IAcRK,EAAmBC,UACrB,OAAIhB,EACOA,EAAiBgB,GAEL,QAAhBnB,EAAAmB,aAAI,EAAJA,EAAMC,kBAAU,IAAApB,EAAAA,EAAI,EAAE,EAG3BqB,EAAmB,CAACC,EAAmBpB,IACrCoB,EAAYpB,EACL,iBACAoB,IAAcpB,EACd,eAEA,gBAITqB,EAAQ,CAACD,EAAmBpB,IACvBsB,EAAAA,QACH,GAAGH,EAAiBC,EAAWpB,MAAiBoB,KAOxD,IAAKrB,EAAMwB,OAAQ,OAAO,KA+D1B,OACIC,OAACC,EAAAA,QAAOC,OAAAC,OAAA,CAAA,EAAKrB,EAAU,CAAAsB,SAAA,CACnBC,MAACC,EAAAA,QAAO,CAAAF,SA9DL7B,EAAMgC,KAAI,CAACC,EAASZ,KAEvB,MAAMa,EAAcb,GAAapB,EAEjC,OACI6B,EAAAA,IAACK,EAAAA,UAAS,CAAiBC,GAAId,EAAMD,EAAWpB,GAAa4B,SACzDC,EAAAA,IAACO,EAAAA,aAAY,CAAAC,aAAeJ,KADhBb,EAEJ,MAwDhBS,EAAAA,IAACC,EAAAA,QAAO,CAAAF,SACHf,EAxBLW,OAACU,EAAAA,UAAS,CAENC,GAAId,EAAMrB,EAAcA,GAAa4B,SAAA,CAErCJ,EAAAA,KAACc,EAAAA,qBAAoB,CACjBC,OAAQ,WACRJ,GAAI,GAAGd,EAAMrB,EAAcA,aAAuB4B,SAAA,CAAA,QAE5C5B,EAAe,EAAC,OAAMD,EAAMwB,UAEtCM,EAAAA,IAACS,EAAAA,qBAAoB,CACjBC,OAAQ,UACRJ,GAAI,GAAGd,EAAMrB,EAAcA,WAAqB4B,SAE/CZ,EAAgBjB,EAAMC,QAbtBA,GA5BND,EAAMgC,KAAI,CAACC,EAASZ,KACvB,MAAMa,EAAcb,GAAapB,EAC3BwC,EAAUpB,IAAcpB,EACxByC,EAAaD,EAAU,OAAS,UAEtC,OACIX,EAAAA,IAACK,EAAAA,UAAS,CAENC,GAAI,GAAGd,EAAMD,EAAWpB,WAAqB4B,SAE7CJ,OAACkB,EAAAA,sBAAqB,CAAAL,aACJJ,EACdM,OAAQE,iBACMD,EAAOZ,SAAA,CAEpBZ,EAAgBgB,GACjBH,EAAAA,IAACc,iBAAc,CAAAf,SACVT,EAAiBC,EAAWpB,SAVhCoB,EAaG,SAiCV"}
+{"version":3,"file":"progress-indicator.js","sources":["../../../src/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport kebabCase from \"lodash/kebabCase\";\n\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./progress-indicator.styles\";\nimport type { ProgressIndicatorProps } from \"./types\";\n\nexport const ProgressIndicator = <T,>({\n    steps,\n    currentIndex,\n    displayExtractor,\n    className,\n    ...otherProps\n}: ProgressIndicatorProps<T>) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isTablet = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getDisplayValue = (item: T): string => {\n        if (displayExtractor) {\n            return displayExtractor(item);\n        }\n        return item?.toString() ?? \"\";\n    };\n\n    const getStepAriaLabel = (stepIndex: number, currentIndex: number) => {\n        if (stepIndex < currentIndex) {\n            return \"Completed step\";\n        } else if (stepIndex === currentIndex) {\n            return \"Current step\";\n        } else {\n            return \"Upcoming step\";\n        }\n    };\n\n    const getId = (stepIndex: number, currentIndex: number) => {\n        return kebabCase(\n            `${getStepAriaLabel(stepIndex, currentIndex)} ${stepIndex}`\n        );\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!steps.length) return null;\n\n    const renderBars = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            // previous and current index elements are highlighted\n            const highlighted = stepIndex <= currentIndex;\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={getId(stepIndex, currentIndex)}\n                    className={styles.indicator}\n                >\n                    <div\n                        className={clsx(\n                            styles.indicatorBar,\n                            highlighted && styles.indicatorBarHighlighted\n                        )}\n                    />\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleDesktop = () => {\n        return steps.map((step: T, stepIndex: number) => {\n            const highlighted = stepIndex <= currentIndex;\n            const current = stepIndex === currentIndex;\n            const fontWeight = current ? \"bold\" : \"regular\";\n\n            return (\n                <div\n                    key={stepIndex}\n                    id={`${getId(stepIndex, currentIndex)}-title`}\n                    className={styles.indicator}\n                >\n                    <Typography.BodyMD\n                        className={clsx(\n                            styles.indicatorTitleDesktop,\n                            highlighted &&\n                                styles.indicatorTitleDesktopHighlighted\n                        )}\n                        weight={fontWeight}\n                        aria-current={current}\n                    >\n                        {getDisplayValue(step)}\n                        <VisuallyHidden>\n                            {getStepAriaLabel(stepIndex, currentIndex)}\n                        </VisuallyHidden>\n                    </Typography.BodyMD>\n                </div>\n            );\n        });\n    };\n\n    const renderStepTitleTablet = () => {\n        return (\n            <div\n                key={currentIndex}\n                id={getId(currentIndex, currentIndex)}\n                className={styles.indicator}\n            >\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"semibold\"}\n                    id={`${getId(currentIndex, currentIndex)}-counter`}\n                >\n                    Step {currentIndex + 1} of {steps.length}\n                </Typography.BodyMD>\n                <Typography.BodyMD\n                    className={styles.indicatorTitleTablet}\n                    weight={\"regular\"}\n                    id={`${getId(currentIndex, currentIndex)}-title`}\n                >\n                    {getDisplayValue(steps[currentIndex])}\n                </Typography.BodyMD>\n            </div>\n        );\n    };\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div className={styles.content}>{renderBars()}</div>\n            <div className={styles.content}>\n                {isTablet ? renderStepTitleTablet() : renderStepTitleDesktop()}\n            </div>\n        </div>\n    );\n};\n"],"names":["_a","steps","currentIndex","displayExtractor","className","otherProps","__rest","isTablet","useMaxWidthMediaQuery","getDisplayValue","item","toString","getStepAriaLabel","stepIndex","getId","kebabCase","length","_jsxs","clsx","styles.wrapper","children","_jsx","styles.content","map","step","highlighted","id","styles.indicator","styles.indicatorBar","styles.indicatorBarHighlighted","Typography","BodyMD","styles.indicatorTitleTablet","weight","current","fontWeight","styles.indicatorTitleDesktop","styles.indicatorTitleDesktopHighlighted","VisuallyHidden"],"mappings":"s3BASsCA,IAAA,IAAAC,MAClCA,EAAKC,aACLA,EAAYC,iBACZA,EAAgBC,UAChBA,GAASJ,EACNK,EAAUC,EAAAA,OAAAN,EALqB,CAAA,QAAA,eAAA,mBAAA,cAUlC,MAAMO,EAAWC,EAAAA,sBAAsB,MAajCC,EAAmBC,UACrB,OAAIP,EACOA,EAAiBO,GAEL,QAAhBV,EAAAU,aAAI,EAAJA,EAAMC,kBAAU,IAAAX,EAAAA,EAAI,EAAE,EAG3BY,EAAmB,CAACC,EAAmBX,IACrCW,EAAYX,EACL,iBACAW,IAAcX,EACd,eAEA,gBAITY,EAAQ,CAACD,EAAmBX,IACvBa,EAAAA,QACH,GAAGH,EAAiBC,EAAWX,MAAiBW,KAOxD,IAAKZ,EAAMe,OAAQ,OAAO,KAgF1B,OACIC,EAAAA,0BAAKb,UAAWc,UAAKC,EAAAA,QAAgBf,IAAgBC,EAAU,CAAAe,SAAA,CAC3DC,EAAAA,IAAA,MAAA,CAAKjB,UAAWkB,EAAAA,QAAcF,SA/E3BnB,EAAMsB,KAAI,CAACC,EAASX,KAEvB,MAAMY,EAAcZ,GAAaX,EAEjC,OACImB,EAAAA,IAAA,MAAA,CAEIK,GAAIZ,EAAMD,EAAWX,GACrBE,UAAWuB,YAAgBP,SAE3BC,EAAAA,IAAA,MAAA,CACIjB,UAAWc,UACPU,EAAAA,aACAH,GAAeI,8BAPlBhB,EAUH,MAgEVQ,EAAAA,WAAKjB,UAAWkB,EAAAA,QAAcF,SACzBb,EA3BLU,EAAAA,KAAA,MAAA,CAEIS,GAAIZ,EAAMZ,EAAcA,GACxBE,UAAWuB,EAAAA,UAAgBP,SAAA,CAE3BH,EAAAA,KAACa,EAAAA,WAAWC,QACR3B,UAAW4B,EAAAA,qBACXC,OAAQ,WACRP,GAAI,GAAGZ,EAAMZ,EAAcA,+BAErBA,EAAe,EAAC,OAAMD,EAAMe,UAEtCK,EAAAA,IAACS,EAAAA,WAAWC,QACR3B,UAAW4B,EAAAA,qBACXC,OAAQ,UACRP,GAAI,GAAGZ,EAAMZ,EAAcA,oBAE1BO,EAAgBR,EAAMC,QAhBtBA,GAjCND,EAAMsB,KAAI,CAACC,EAASX,KACvB,MAAMY,EAAcZ,GAAaX,EAC3BgC,EAAUrB,IAAcX,EACxBiC,EAAaD,EAAU,OAAS,UAEtC,OACIb,EAAAA,IAAA,MAAA,CAEIK,GAAI,GAAGZ,EAAMD,EAAWX,WACxBE,UAAWuB,EAAAA,UAAgBP,SAE3BH,EAAAA,KAACa,EAAAA,WAAWC,OAAM,CACd3B,UAAWc,UACPkB,EAAAA,sBACAX,GACIY,oCAERJ,OAAQE,EAAU,eACJD,EAAOd,SAAA,CAEpBX,EAAgBe,GACjBH,EAAAA,IAACiB,EAAAA,eAAc,CAAAlB,SACVR,EAAiBC,EAAWX,SAfhCW,EAkBH,SAoCR"}

package/cjs/progress-indicator/progress-indicator.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./progress-indicator.styles_1c038s4.css");exports.content="ck7dr6z",exports.indicator="i1vcego5",exports.indicatorBar="i1k6bqsf",exports.indicatorBarHighlighted="inywq69",exports.indicatorTitleDesktop="i1ubzlq2",exports.indicatorTitleDesktopHighlighted="i8ugwdc",exports.indicatorTitleTablet="i8128on",exports.wrapper="w103113g";
+//# sourceMappingURL=progress-indicator.styles.js.map

package/cjs/progress-indicator/progress-indicator.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"progress-indicator.styles.js","sources":["../../../src/progress-indicator/progress-indicator.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Spacing } from \"../theme\";\n\n// Units in rem\nexport const INDICATOR_BAR_MARGIN_RIGHT_TABLET = 0.5;\n\n// =============================================================================\n// STYLE COMPONENTS\n// =============================================================================\nexport const wrapper = css`\n    position: relative;\n    width: 100%;\n\n    margin: 2rem 0;\n\n    ${MediaQuery.MaxWidth.xl} {\n        margin: 1.5rem 0;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        margin: 1rem 0;\n    }\n`;\n\nexport const content = css`\n    display: flex;\n    flex-basis: 0;\n    justify-content: space-between;\n    width: 100%;\n`;\n\nexport const indicatorBar = css`\n    height: 4px;\n    margin-bottom: ${Spacing[\"spacing-8\"]};\n    border-radius: ${Radius[\"full\"]};\n    background-color: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const indicatorBarHighlighted = css`\n    background-color: ${Colour[\"bg-primary-subtle\"]};\n`;\n\nexport const indicatorTitleDesktop = css`\n    overflow-wrap: anywhere;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const indicatorTitleDesktopHighlighted = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const indicatorTitleTablet = css`\n    overflow-wrap: anywhere;\n    color: ${Colour.text};\n`;\n\nexport const indicator = css`\n    display: flex;\n    flex-direction: column;\n    flex: 1;\n\n    &:not(:last-child) {\n        margin-right: ${INDICATOR_BAR_MARGIN_RIGHT_TABLET + \"rem\"};\n    }\n`;\n"],"names":[],"mappings":"kHAyBoB,4BAgCE,gCAzBG,2CAOW,wCAIF,oDAKW,uCAIZ,0BA1Cb"}

package/cjs/progress-indicator/progress-indicator.styles_1c038s4.css

@@ -0,0 +1,8 @@
+.w103113g{position:relative;width:100%;margin:2rem 0;}:where(body.fds-breakpoint-xl-max) .w103113g{margin:1.5rem 0;}:where(body.fds-breakpoint-lg-max) .w103113g{margin:1rem 0;}
+.ck7dr6z{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-basis:0;-ms-flex-preferred-size:0;flex-basis:0;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;width:100%;}
+.i1k6bqsf{height:4px;margin-bottom:var(--fds-spacing-8);border-radius:var(--fds-radius-full);background-color:var(--fds-colour-bg-disabled);}
+.inywq69{background-color:var(--fds-colour-bg-primary-subtle);}
+.i1ubzlq2{overflow-wrap:anywhere;color:var(--fds-colour-text-disabled);}
+.i8ugwdc{color:var(--fds-colour-text-primary);}
+.i8128on{overflow-wrap:anywhere;color:var(--fds-colour-text);}
+.i1vcego5{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-flex:1;-ms-flex:1;flex:1;}.i1vcego5:not(:last-child){margin-right:0.5rem;}

package/cjs/radio-button/radio-button.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),d=require("react/jsx-runtime"),a=require("./radio-button.styles.js");exports.RadioButton=i=>{var{className:s,checked:t,disabled:r,displaySize:n="default",onChange:c}=i,l=e.__rest(i,["className","checked","disabled","displaySize","onChange"]);return d.jsxs(a.Container,{$selected:t,$disabled:r,className:s,$displaySize:n,"data-testid":"radio-button",children:[d.jsx(a.Input,Object.assign({type:"radio","data-testid":"radio-input",onChange:e=>{r||null==c||c(e)},checked:t,disabled:r},l)),t?d.jsx(a.StyledCheckedIcon,{"data-testid":"radio-checked",$disabled:r,"aria-hidden":!0}):d.jsx(a.StyledUnCheckedIcon,{"data-testid":"radio-unchecked",$disabled:r,"aria-hidden":!0})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),d=require("@lifesg/react-icons"),i=require("clsx"),t=require("./radio-button.styles.js");function s(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=s(i);exports.RadioButton=i=>{var{className:s,checked:n,disabled:r,displaySize:l="default",focusableWhenDisabled:u,onChange:o,tabIndex:b}=i,h=e.__rest(i,["className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex"]);const f=!!r&&!!u,p=!!r&&!u;return a.jsxs("div",{className:c.default(t.container,s),"data-display-size":l,"data-testid":"radio-button",children:[a.jsx("input",Object.assign({type:"radio","data-testid":"radio-input",onChange:e=>{r?e.preventDefault():null==o||o(e)},checked:n,disabled:p,"aria-disabled":f,tabIndex:f?0:b,className:c.default(t.input,!r&&t.inputActive)},h)),n?a.jsx(d.CircleDotIcon,{"data-testid":"radio-checked",className:c.default(t.icon,r?t.checkedIconDisabled:t.checkedIcon),"aria-hidden":!0}):a.jsx(d.CircleIcon,{"data-testid":"radio-unchecked",className:c.default(t.icon,r?t.uncheckedIconDisabled:t.uncheckedIcon),"aria-hidden":!0})]})};
 //# sourceMappingURL=radio-button.js.map

package/cjs/radio-button/radio-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.js","sources":["../../../src/radio-button/radio-button.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport {\n    Container,\n    Input,\n    StyledCheckedIcon,\n    StyledUnCheckedIcon,\n} from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    onChange,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (!disabled) {\n            onChange?.(event);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderIcon = () => {\n        return checked ? (\n            <StyledCheckedIcon\n                data-testid=\"radio-checked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        ) : (\n            <StyledUnCheckedIcon\n                data-testid=\"radio-unchecked\"\n                $disabled={disabled}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <Container\n            $selected={checked}\n            $disabled={disabled}\n            className={className}\n            $displaySize={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <Input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={disabled}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </Container>\n    );\n};\n"],"names":["_a","className","checked","disabled","displaySize","onChange","otherProps","__rest","_jsxs","Container","$selected","$disabled","$displaySize","children","_jsx","Input","Object","assign","type","event","StyledCheckedIcon","StyledUnCheckedIcon"],"mappings":"6IAU4BA,IAAA,IAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,SACvBA,GAAQL,EACLM,EAAUC,EAAAA,OAAAP,EANW,6DAqCxB,OACIQ,EAAAA,KAACC,EAAAA,UAAS,CAAAC,UACKR,EAAOS,UACPR,EACXF,UAAWA,EAASW,aACNR,gBACF,eAAcS,SAAA,CAE1BC,EAAAA,IAACC,EAAAA,MAAKC,OAAAC,OAAA,CACFC,KAAK,sBACO,cACZb,SArCYc,IACfhB,GACDE,SAAAA,EAAWc,EACf,EAmCQjB,QAASA,EACTC,SAAUA,GACNG,IA7BLJ,EACHY,MAACM,EAAAA,kBAAiB,CAAA,cACF,gBAAeT,UAChBR,EAAQ,eAAA,IAIvBW,MAACO,EAAAA,oBAAmB,CAAA,cACJ,kBAAiBV,UAClBR,EAAQ,eAAA,MAuBf"}
+{"version":3,"file":"radio-button.js","sources":["../../../src/radio-button/radio-button.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { ChangeEvent } from \"react\";\n\nimport * as styles from \"./radio-button.styles\";\nimport type { RadioButtonProps } from \"./types\";\n\nexport const RadioButton = ({\n    className,\n    checked,\n    disabled,\n    displaySize = \"default\",\n    focusableWhenDisabled,\n    onChange,\n    tabIndex,\n    ...otherProps\n}: RadioButtonProps) => {\n    // =============================================================================\n    // CONST\n    // =============================================================================\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: ChangeEvent<HTMLInputElement>) => {\n        if (disabled) {\n            event.preventDefault();\n            return;\n        }\n\n        onChange?.(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderIcon = () => {\n        return checked ? (\n            <CircleDotIcon\n                data-testid=\"radio-checked\"\n                className={clsx(\n                    styles.icon,\n                    disabled ? styles.checkedIconDisabled : styles.checkedIcon\n                )}\n                aria-hidden\n            />\n        ) : (\n            <CircleIcon\n                data-testid=\"radio-unchecked\"\n                className={clsx(\n                    styles.icon,\n                    disabled\n                        ? styles.uncheckedIconDisabled\n                        : styles.uncheckedIcon\n                )}\n                aria-hidden\n            />\n        );\n    };\n\n    return (\n        <div\n            className={clsx(styles.container, className)}\n            data-display-size={displaySize}\n            data-testid=\"radio-button\"\n        >\n            <input\n                type=\"radio\"\n                data-testid=\"radio-input\"\n                onChange={handleOnChange}\n                checked={checked}\n                disabled={isNativeDisabled}\n                aria-disabled={isFocusableWhenDisabled}\n                tabIndex={isFocusableWhenDisabled ? 0 : tabIndex}\n                className={clsx(styles.input, !disabled && styles.inputActive)}\n                {...otherProps}\n            />\n            {renderIcon()}\n        </div>\n    );\n};\n"],"names":["_a","className","checked","disabled","displaySize","focusableWhenDisabled","onChange","tabIndex","otherProps","__rest","isFocusableWhenDisabled","isNativeDisabled","_jsxs","clsx","styles.container","children","_jsx","Object","assign","type","event","preventDefault","styles.input","styles.inputActive","CircleDotIcon","styles.icon","styles.checkedIconDisabled","styles.checkedIcon","CircleIcon","styles.uncheckedIconDisabled","styles.uncheckedIcon"],"mappings":"mRAO4BA,QAAAC,UACxBA,EAASC,QACTA,EAAOC,SACPA,EAAQC,YACRA,EAAc,UAASC,sBACvBA,EAAqBC,SACrBA,EAAQC,SACRA,GAAQP,EACLQ,EAAUC,SAAAT,EARW,gGAaxB,MAAMU,IAA4BP,KAAcE,EAC1CM,IAAqBR,IAAaE,EAyCxC,OACIO,EAAAA,KAAA,MAAA,CACIX,UAAWY,EAAAA,QAAKC,EAAAA,UAAkBb,GAAU,oBACzBG,gBACP,eAAcW,SAAA,CAE1BC,MAAA,QAAAC,OAAAC,OAAA,CACIC,KAAK,QAAO,cACA,cACZb,SA7CYc,IAChBjB,EACAiB,EAAMC,iBAIVf,SAAAA,EAAWc,EAAM,EAwCTlB,QAASA,EACTC,SAAUQ,EAAgB,gBACXD,EACfH,SAAUG,EAA0B,EAAIH,EACxCN,UAAWY,UAAKS,EAAAA,OAAenB,GAAYoB,EAAAA,cACvCf,IAtCLN,EACHc,EAAAA,IAACQ,EAAAA,cAAa,CAAA,cACE,gBACZvB,UAAWY,EAAAA,QACPY,OACAtB,EAAWuB,EAAAA,oBAA6BC,kCAKhDX,MAACY,EAAAA,WAAU,CAAA,cACK,kBACZ3B,UAAWY,EAAAA,QACPY,EAAAA,KACAtB,EACM0B,EAAAA,sBACAC,EAAAA,eACT,eAAA,MAwBH"}

package/cjs/radio-button/radio-button.styles.js

@@ -1,41 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons"),o=require("styled-components"),t=require("../v3_theme/index.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var n=i(o);const r=n.default.div`
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    ${e=>"small"===e.$displaySize?o.css`
-                height: 1.5rem;
-                width: 1.5rem;
-            `:o.css`
-                height: 2rem;
-                width: 2rem;
-            `}
-    position: relative;
-`,d=n.default(e.CircleIcon)`
-    height: 100%;
-    width: 100%;
-    color: ${e=>e.$disabled?t.V3_Colour["icon-disabled-subtle"](e):t.V3_Colour["icon-subtle"](e)};
-    transition: ${t.V3_Motion["duration-150"]} ${t.V3_Motion["ease-default"]};
-`,l=n.default(e.CircleDotIcon)`
-    height: 100%;
-    width: 100%;
-    color: ${e=>e.$disabled?t.V3_Colour["icon-selected-disabled"](e):t.V3_Colour["icon-selected"](e)};
-
-    transition: ${t.V3_Motion["duration-150"]} ${t.V3_Motion["ease-default"]};
-`,s=n.default.input`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    z-index: 1;
-
-    appearance: none;
-    background: transparent;
-    border: none;
-
-    &:hover + ${d}, &:hover + ${l} {
-        @media (pointer: fine) {
-            color: ${e=>!e.disabled&&t.V3_Colour["icon-hover"](e)};
-        }
-    }
-`;exports.Container=r,exports.Input=s,exports.StyledCheckedIcon=l,exports.StyledUnCheckedIcon=d;
+"use strict";require("./radio-button.styles_1c4v6v.css");exports.checkedIcon="crf4g3g",exports.checkedIconDisabled="c1bv24bs",exports.container="c22ppgr",exports.icon="iwrt33w",exports.input="ie6234c",exports.inputActive="i1pcowd9",exports.uncheckedIcon="u16bhkcz",exports.uncheckedIconDisabled="ubjq3ci";
 //# sourceMappingURL=radio-button.styles.js.map

package/cjs/radio-button/radio-button.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"radio-button.styles.js","sources":["../../../src/radio-button/radio-button.styles.tsx"],"sourcesContent":["import { CircleDotIcon, CircleIcon } from \"@lifesg/react-icons\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour, V3_Motion } from \"../v3_theme\";\nimport type { RadioButtonProps, RadioButtonSize } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected?: boolean;\n    $disabled?: boolean;\n    $displaySize?: RadioButtonSize | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<StyleProps>`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    ${(props) => {\n        if (props.$displaySize === \"small\") {\n            return css`\n                height: 1.5rem;\n                width: 1.5rem;\n            `;\n        } else {\n            return css`\n                height: 2rem;\n                width: 2rem;\n            `;\n        }\n    }}\n    position: relative;\n`;\n\nexport const StyledUnCheckedIcon = styled(CircleIcon)<StyleProps>`\n    height: 100%;\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-disabled-subtle\"](props)\n            : V3_Colour[\"icon-subtle\"](props)};\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const StyledCheckedIcon = styled(CircleDotIcon)<StyleProps>`\n    height: 100%;\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled\n            ? V3_Colour[\"icon-selected-disabled\"](props)\n            : V3_Colour[\"icon-selected\"](props)};\n\n    transition: ${V3_Motion[\"duration-150\"]} ${V3_Motion[\"ease-default\"]};\n`;\n\nexport const Input = styled.input<RadioButtonProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    z-index: 1;\n\n    appearance: none;\n    background: transparent;\n    border: none;\n\n    &:hover + ${StyledUnCheckedIcon}, &:hover + ${StyledCheckedIcon} {\n        @media (pointer: fine) {\n            color: ${(props) =>\n                !props.disabled && V3_Colour[\"icon-hover\"](props)};\n        }\n    }\n`;\n"],"names":["Container","styled","div","props","$displaySize","css","StyledUnCheckedIcon","CircleIcon","$disabled","V3_Colour","V3_Motion","StyledCheckedIcon","CircleDotIcon","Input","input","disabled"],"mappings":"sMAoBO,MAAMA,EAAYC,EAAAA,QAAOC,GAAe;;;;MAIxCC,GAC4B,UAAvBA,EAAMC,aACCC,KAAG;;;cAKHA,KAAG;;;;;EASTC,EAAsBL,EAAAA,QAAOM,EAAAA,WAAuB;;;aAGnDJ,GACNA,EAAMK,UACAC,EAAAA,UAAU,wBAAwBN,GAClCM,YAAU,eAAeN;kBACrBO,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;EAG5CC,EAAoBV,EAAAA,QAAOW,EAAAA,cAA0B;;;aAGpDT,GACNA,EAAMK,UACAC,EAAAA,UAAU,0BAA0BN,GACpCM,YAAU,iBAAiBN;;kBAEvBO,EAAAA,UAAU,mBAAmBA,EAAAA,UAAU;EAG5CG,EAAQZ,EAAAA,QAAOa,KAAuB;;;;cAIpCX,GAAWA,EAAMY,SAAW,cAAgB;;;;;;;gBAO3CT,gBAAkCK;;qBAE5BR,IACLA,EAAMY,UAAYN,EAAAA,UAAU,cAAcN;;;"}
+{"version":3,"file":"radio-button.styles.js","sources":["../../../src/radio-button/radio-button.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Motion } from \"../theme\";\n\nexport const classes = {} as const;\n\nexport const container = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    position: relative;\n\n    &[data-display-size=\"small\"] {\n        height: 1.5rem;\n        width: 1.5rem;\n    }\n\n    &[data-display-size=\"default\"] {\n        height: 2rem;\n        width: 2rem;\n    }\n`;\n\nexport const icon = css`\n    height: 100%;\n    width: 100%;\n    transition: ${Motion[\"duration-150\"]} ${Motion[\"ease-default\"]};\n`;\n\nexport const uncheckedIcon = css`\n    color: ${Colour[\"icon-subtle\"]};\n`;\n\nexport const uncheckedIconDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const checkedIcon = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const checkedIconDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n\nexport const input = css`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: not-allowed;\n    z-index: 1;\n\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const inputActive = css`\n    cursor: pointer;\n\n    &:hover + svg {\n        @media (pointer: fine) {\n            color: ${Colour[\"icon-hover\"]};\n        }\n    }\n`;\n"],"names":[],"mappings":"yGAqCwB,sCAIQ,6BAnCV,uBAiBL,wBAsBC,8BAYM,iCA5BE,yCAIQ"}

package/cjs/radio-button/radio-button.styles_1c4v6v.css

@@ -0,0 +1,8 @@
+.c22ppgr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;}.c22ppgr[data-display-size="small"]{height:1.5rem;width:1.5rem;}.c22ppgr[data-display-size="default"]{height:2rem;width:2rem;}
+.iwrt33w{height:100%;width:100%;-webkit-transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);transition:var(--fds-motion-duration-150) var(--fds-motion-timing-ease-default);}
+.u16bhkcz{color:var(--fds-colour-icon-subtle);}
+.ubjq3ci{color:var(--fds-colour-icon-disabled-subtle);}
+.crf4g3g{color:var(--fds-colour-icon-selected);}
+.c1bv24bs{color:var(--fds-colour-icon-selected-disabled);}
+.ie6234c{position:absolute;height:100%;width:100%;cursor:not-allowed;z-index:1;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
+.i1pcowd9{cursor:pointer;}@media (pointer: fine){.i1pcowd9:hover+svg{color:var(--fds-colour-icon-hover);}}