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

package/shared/dropdown-wrapper/element-with-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"element-with-dropdown.js","sources":["../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n    Middleware,\n    OpenChangeReason,\n    Placement,\n} from \"@floating-ui/react\";\nimport {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport {\n    Breakpoint,\n    useDesignToken,\n    useSafeMaxWidthMediaQuery,\n} from \"../../theme\";\nimport { useInheritedThemeScope } from \"../../theme/theme-provider/hooks\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: () => void | undefined;\n    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;\n    onDismiss?: () => void | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const mobileBreakpoint = useDesignToken(Breakpoint[\"sm-max\"]);\n    const isMobile = useSafeMaxWidthMediaQuery(mobileBreakpoint);\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            return {\n                x:\n                    noGapInBetween && isMobile\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            elementWithDropdownStyles.tokens.availableHeight,\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        elementWithDropdownStyles.tokens.availableHeight,\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            <div {...themeProps} style={themeStyle}>\n                                {renderDropdown(dropdownRenderProps)}\n                            </div>\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","useDropdownRender","useContext","ElementWithDropdown","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","mobileBreakpoint","useDesignToken","Breakpoint","isMobile","useSafeMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"2vCAqEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBpB,YAAY,OACZqB,qBACAC,WACAC,wBAKA,MAAMC,EAAmBC,EAAeC,EAAW,WAC7CC,EAAWC,EAA0BJ,GACrCK,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,CACpDC,UAAWX,QAAAA,EAAeM,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YAGC,CACHD,GAFM,IAANA,GAAWA,EAAIC,EAAMC,SAASV,QAAUW,OAAOC,aAGzBhB,GACXe,OAAOC,WAAaH,EAAMC,SAASV,OAAS,EAC7CQ,MAIhBK,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAY,CAClDC,KAAMrC,EACNsC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACArC,SAAAA,IACOkC,IAASrC,EAChBC,SAAAA,KACQoC,GAAQrC,IAChBE,SAAAA,EAAUsC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWvD,EAAqBC,GAChCuD,WAAY,CACRpC,EAAOC,GACPoC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhB1C,GACDyC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,KAEfC,UAAEA,EAASpE,OAAEA,GAAWqE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAuBP,GAEpDQ,GAAQC,EAASnC,EAAS,CAC5BpC,UACAwE,OAAQhE,EACRiE,iBAAkBjE,IAEhBkE,GAAUC,EAAWvC,EAAS,CAAEpC,aAEhC4E,kBAAEA,GAAiBhF,iBAAEA,IAAqBiF,EAAgB,CAC5DP,GACAI,KAMEI,GAAsB,CACxBrF,aAAc6B,EACd5B,oDACOA,GACAyC,GAAc,CACjB4C,OAAoC,QAA5BC,EAAAzE,QAAAA,EAAgBqD,SAAY,IAAAoB,EAAAA,EA5JxB,KA8JhBrF,eAAgBuC,EAAK+C,YACrBrF,qBAGJ,OACIsF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFpE,EAAWqE,QAAUD,EACrBrD,EAAKuD,aAAaF,EAAK,GAEvBX,KAAmB,CAAAc,SAEtBrF,OAEJyD,GACGqB,EAACQ,EAAc,CAACC,KAAMhF,EAAQ8E,SAC1BP,EAACU,EAAoB,CACjBzD,QAASA,EACT0D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAAC5F,EAAsB0G,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEZ,MAAOa,EAAUsB,SACjCpF,EAAewE,eAMrC"}
+{"version":3,"file":"element-with-dropdown.js","sources":["../../../src/shared/dropdown-wrapper/element-with-dropdown.tsx"],"sourcesContent":["import type {\n    Middleware,\n    OpenChangeReason,\n    Placement,\n} from \"@floating-ui/react\";\nimport {\n    autoUpdate,\n    flip,\n    FloatingFocusManager,\n    FloatingPortal,\n    limitShift,\n    offset,\n    shift,\n    size,\n    useClick,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStyles,\n} from \"@floating-ui/react\";\nimport type { CSSProperties, RefObject } from \"react\";\nimport { createContext, useContext, useRef } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useFloatingChild } from \"../../overlay/use-floating-context\";\nimport { useInheritedThemeScope, useMaxWidthMediaQuery } from \"../../theme\";\nimport * as elementWithDropdownStyles from \"./element-with-dropdown.styles\";\nimport type { DropdownAlignmentType } from \"./types\";\n\nexport interface DropdownRenderProps {\n    elementWidth: number;\n    styles: CSSProperties;\n    setFloatingRef: (node: HTMLElement | null) => void;\n    getFloatingProps: (\n        userProps?: React.HTMLProps<HTMLElement>\n    ) => Record<string, unknown>;\n}\n\ninterface ElementWithDropdownProps {\n    enabled: boolean;\n    isOpen: boolean;\n    onOpen?: () => void | undefined;\n    onClose?: (reason: OpenChangeReason | undefined) => void | undefined;\n    onDismiss?: () => void | undefined;\n    renderElement: () => React.ReactNode;\n    renderDropdown: (props: DropdownRenderProps) => React.ReactNode;\n    customZIndex?: number | undefined;\n    clickToToggle?: boolean | undefined;\n    /* the distance between the reference element and the dropdown */\n    offset?: number | undefined;\n    /* the alignment of the dropdown to the left or right of the reference element */\n    alignment?: DropdownAlignmentType | undefined;\n    fitAvailableHeight?: boolean | undefined;\n    /**\n     * The root element that contains the popover element. Defaults to the document body.\n     *\n     * If the parent that contains the trigger element has a higher z-index than the popover,\n     * the popover may not be visible. Specify the parent element here instead\n     */\n    rootNode?: RefObject<HTMLElement> | undefined;\n    /** If set, the `elementWidth` refers to this instead of the reference element */\n    positionRef?: RefObject<HTMLElement> | undefined;\n}\n\nconst getFloatingPlacement = (alignment: DropdownAlignmentType): Placement => {\n    switch (alignment) {\n        case \"right\":\n            return \"bottom-end\";\n        case \"left\":\n        default:\n            return \"bottom-start\";\n    }\n};\n\nconst DEFAULT_Z_INDEX = 50;\n\nexport const DropdownRenderContext = createContext<DropdownRenderProps>({\n    elementWidth: 0,\n    styles: {},\n    setFloatingRef: () => {\n        // noop\n    },\n    getFloatingProps: () => ({}),\n});\n\nexport const useDropdownRender = () => {\n    return useContext(DropdownRenderContext);\n};\n\n/**\n * A wrapper to handle the common pattern of a field with a card-based dropdown\n * using Floating UI\n *\n * Usage:\n * - Specify `renderElement` for the main field\n * - Specify `renderDropdown` for the dropdown\n * - Use `isOpen` to control the visibility of the dropdown\n * - Handle changes in visibility with `onOpen`, `onClose` and `onDismiss`\n * - If your dropdown can resize, set the css like so: `max-height: var(--available-height);`\n * - If your dropdown has a preferred max-height, set the css like so:\n *   `max-height: min(100px, var(--available-height, infinity * 1px))`\n *\n * Pass the floating props to the dropdown:\n * ```\n * <DropdownContainer\n *   ref={setFloatingRef}\n *   style={styles}\n *   {...getFloatingProps()}\n * >\n * </DropdownContainer>\n * ```\n *\n * If you need event listeners, pass them to `getFloatingProps()`:\n * ```\n * getFloatingProps({\n *   onClick: handleOnClick\n * })\n * ```\n */\nexport const ElementWithDropdown = ({\n    enabled,\n    isOpen,\n    onOpen,\n    onClose,\n    onDismiss,\n    renderElement,\n    renderDropdown,\n    customZIndex,\n    clickToToggle = false,\n    offset: dropdownOffset = 0,\n    alignment = \"left\",\n    fitAvailableHeight,\n    rootNode,\n    positionRef,\n}: ElementWithDropdownProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const elementRef = useRef<HTMLDivElement | null>(null);\n    const { width: referenceWidth = 0 } = useResizeDetector({\n        targetRef: positionRef ?? elementRef,\n        handleHeight: false,\n    });\n    const center: Middleware = {\n        name: \"center\",\n        fn: ({ x, rects }) => {\n            const noGapInBetween =\n                x === 0 || x + rects.floating.width === window.innerWidth;\n            return {\n                x:\n                    noGapInBetween && isMobile\n                        ? (window.innerWidth - rects.floating.width) / 2\n                        : x,\n            };\n        },\n    };\n    const { refs, floatingStyles, context } = useFloating({\n        open: isOpen,\n        onOpenChange: (open, _event, reason) => {\n            if (reason === \"escape-key\") {\n                onDismiss?.();\n            } else if (open && !isOpen) {\n                onOpen?.();\n            } else if (!open && isOpen) {\n                onClose?.(reason);\n            }\n        },\n        whileElementsMounted: autoUpdate,\n        placement: getFloatingPlacement(alignment),\n        middleware: [\n            offset(dropdownOffset),\n            flip(),\n            shift({\n                limiter: limitShift(),\n            }),\n            size({\n                // shrink to fit available vertical space\n                apply({ availableHeight, elements }) {\n                    if (\n                        !fitAvailableHeight ||\n                        availableHeight >= elements.floating.scrollHeight\n                    ) {\n                        // reset this so that dropdown can expand as needed\n                        elements.floating.style.setProperty(\n                            elementWithDropdownStyles.tokens.availableHeight,\n                            \"\"\n                        );\n                        return;\n                    }\n\n                    elements.floating.style.setProperty(\n                        elementWithDropdownStyles.tokens.availableHeight,\n                        `${Math.max(0, availableHeight)}px`\n                    );\n                },\n            }),\n            center,\n        ],\n    });\n    const parentZIndex = useFloatingChild();\n\n    const { isMounted, styles } = useTransitionStyles(context, {\n        initial: { opacity: 0 },\n        open: { opacity: 1 },\n        duration: 300,\n    });\n    const { themeProps, themeStyle } = useInheritedThemeScope(isMounted);\n\n    const click = useClick(context, {\n        enabled,\n        toggle: clickToToggle,\n        keyboardHandlers: clickToToggle,\n    });\n    const dismiss = useDismiss(context, { enabled });\n\n    const { getReferenceProps, getFloatingProps } = useInteractions([\n        click,\n        dismiss,\n    ]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const dropdownRenderProps = {\n        elementWidth: referenceWidth,\n        styles: {\n            ...styles,\n            ...floatingStyles,\n            zIndex: customZIndex ?? parentZIndex ?? DEFAULT_Z_INDEX,\n        },\n        setFloatingRef: refs.setFloating,\n        getFloatingProps,\n    };\n\n    return (\n        <>\n            <div\n                ref={(node) => {\n                    elementRef.current = node;\n                    refs.setReference(node);\n                }}\n                {...getReferenceProps()}\n            >\n                {renderElement()}\n            </div>\n            {isMounted && (\n                <FloatingPortal root={rootNode}>\n                    <FloatingFocusManager\n                        context={context}\n                        modal={false}\n                        initialFocus={-1}\n                        returnFocus={false} // leads to focus trap. parent to handle the final focus state\n                    >\n                        <DropdownRenderContext.Provider\n                            value={dropdownRenderProps}\n                        >\n                            <div {...themeProps} style={themeStyle}>\n                                {renderDropdown(dropdownRenderProps)}\n                            </div>\n                        </DropdownRenderContext.Provider>\n                    </FloatingFocusManager>\n                </FloatingPortal>\n            )}\n        </>\n    );\n};\n"],"names":["getFloatingPlacement","alignment","DropdownRenderContext","createContext","elementWidth","styles","setFloatingRef","getFloatingProps","useDropdownRender","useContext","ElementWithDropdown","enabled","isOpen","onOpen","onClose","onDismiss","renderElement","renderDropdown","customZIndex","clickToToggle","offset","dropdownOffset","fitAvailableHeight","rootNode","positionRef","isMobile","useMaxWidthMediaQuery","elementRef","useRef","width","referenceWidth","useResizeDetector","targetRef","handleHeight","center","name","fn","x","rects","floating","window","innerWidth","refs","floatingStyles","context","useFloating","open","onOpenChange","_event","reason","whileElementsMounted","autoUpdate","placement","middleware","flip","shift","limiter","limitShift","size","apply","availableHeight","elements","scrollHeight","style","setProperty","elementWithDropdownStyles.tokens","Math","max","parentZIndex","useFloatingChild","isMounted","useTransitionStyles","initial","opacity","duration","themeProps","themeStyle","useInheritedThemeScope","click","useClick","toggle","keyboardHandlers","dismiss","useDismiss","getReferenceProps","useInteractions","dropdownRenderProps","zIndex","_a","setFloating","_jsxs","_jsx","Object","assign","ref","node","current","setReference","children","FloatingPortal","root","FloatingFocusManager","modal","initialFocus","returnFocus","Provider","value"],"mappings":"snCAgEA,MAAMA,EAAwBC,GAEjB,UADDA,EAEO,aAGA,eAMNC,EAAwBC,EAAmC,CACpEC,aAAc,EACdC,OAAQ,CAAA,EACRC,eAAgB,OAGhBC,iBAAkB,KAAA,CAAS,KAGlBC,EAAoB,IACtBC,EAAWP,GAiCTQ,EAAsB,EAC/BC,UACAC,SACAC,SACAC,UACAC,YACAC,gBACAC,iBACAC,eACAC,iBAAgB,EAChBC,OAAQC,EAAiB,EACzBpB,YAAY,OACZqB,qBACAC,WACAC,wBAKA,MAAMC,EAAWC,EAAsB,MACjCC,EAAaC,EAA8B,OACzCC,MAAOC,EAAiB,GAAMC,EAAkB,CACpDC,UAAWR,QAAAA,EAAeG,EAC1BM,cAAc,IAEZC,EAAqB,CACvBC,KAAM,SACNC,GAAI,EAAGC,IAAGC,YAGC,CACHD,GAFM,IAANA,GAAWA,EAAIC,EAAMC,SAASV,QAAUW,OAAOC,aAGzBhB,GACXe,OAAOC,WAAaH,EAAMC,SAASV,OAAS,EAC7CQ,MAIhBK,KAAEA,EAAIC,eAAEA,EAAcC,QAAEA,GAAYC,EAAY,CAClDC,KAAMlC,EACNmC,aAAc,CAACD,EAAME,EAAQC,KACV,eAAXA,EACAlC,SAAAA,IACO+B,IAASlC,EAChBC,SAAAA,KACQiC,GAAQlC,IAChBE,SAAAA,EAAUmC,GACd,EAEJC,qBAAsBC,EACtBC,UAAWpD,EAAqBC,GAChCoD,WAAY,CACRjC,EAAOC,GACPiC,IACAC,EAAM,CACFC,QAASC,MAEbC,EAAK,CAED,KAAAC,EAAMC,gBAAEA,EAAeC,SAAEA,KAEhBvC,GACDsC,GAAmBC,EAAStB,SAASuB,aAGrCD,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,IAKRC,EAAStB,SAASwB,MAAMC,YACpBC,EAAiCL,gBACjC,GAAGM,KAAKC,IAAI,EAAGP,OAEvB,IAEJ1B,KAGFkC,EAAeC,KAEfC,UAAEA,EAASjE,OAAEA,GAAWkE,EAAoB3B,EAAS,CACvD4B,QAAS,CAAEC,QAAS,GACpB3B,KAAM,CAAE2B,QAAS,GACjBC,SAAU,OAERC,WAAEA,EAAUC,WAAEA,GAAeC,EAAuBP,GAEpDQ,EAAQC,EAASnC,EAAS,CAC5BjC,UACAqE,OAAQ7D,EACR8D,iBAAkB9D,IAEhB+D,EAAUC,EAAWvC,EAAS,CAAEjC,aAEhCyE,kBAAEA,EAAiB7E,iBAAEA,IAAqB8E,EAAgB,CAC5DP,EACAI,IAMEI,GAAsB,CACxBlF,aAAc0B,EACdzB,oDACOA,GACAsC,GAAc,CACjB4C,OAAoC,QAA5BC,EAAAtE,QAAAA,EAAgBkD,SAAY,IAAAoB,EAAAA,EA3JxB,KA6JhBlF,eAAgBoC,EAAK+C,YACrBlF,qBAGJ,OACImF,eACIC,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAMC,IACFpE,EAAWqE,QAAUD,EACrBrD,EAAKuD,aAAaF,EAAK,GAEvBX,IAAmB,CAAAc,SAEtBlF,OAEJsD,GACGqB,EAACQ,EAAc,CAACC,KAAM7E,EAAQ2E,SAC1BP,EAACU,EAAoB,CACjBzD,QAASA,EACT0D,OAAO,EACPC,cAAc,EACdC,aAAa,EAAKN,SAElBP,EAACzF,EAAsBuG,SAAQ,CAC3BC,MAAOpB,YAEPK,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAASlB,EAAU,CAAEZ,MAAOa,EAAUsB,SACjCjF,EAAeqE,eAMrC"}

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import l from"clsx";import n from"../../external/lodash/throttle.js";import{forwardRef as c,useState as a,useRef as d,useImperativeHandle as m,useCallback as f,useMemo as h,useEffect as p}from"react";import{useResizeDetector as u}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import{ClickableIcon as b}from"../clickable-icon/clickable-icon.js";import{tokens as v,wrapper as g,content as k,fadeIndicatorButton as x,indicatorLeft as N,fade as z,fadeLeft as R,indicatorRight as w,fadeRight as y}from"./fade-wrapper.styles.js";import{getFadeColorSet as C,getFadeBackgroundColorValue as L}from"./helpers.js";const W=c(((c,W)=>{var{children:E,className:I,fadeColor:M,fadePosition:P="both",showIndicator:_=!1,onResize:q}=c,O=e(c,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[A,B]=a("left"===P||"both"===P),[D,F]=a("right"===P||"both"===P),G=d(null),H=d(null),J=d(null),K=d(null),Q=C(M);j(J,{[v.backgroundColor]:L(Q.left,_)}),j(K,{[v.backgroundColor]:L(Q.right,_)}),u({onResize:U,targetRef:G,refreshMode:"debounce",refreshRate:50}),m(W,(()=>({resize(){U()}})));const S=f((()=>{const e=G.current,r=H.current;e&&r&&r.scrollWidth>e.offsetWidth?(F(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),B(r.scrollLeft>=1)):(F(!1),B(!1))}),[]),T=h((()=>n(S,50)),[S]);function U(){S(),q&&q({content:H.current,wrapper:G.current})}p((()=>{const e=H.current;return S(),e&&e.addEventListener("scroll",T),()=>{e&&e.removeEventListener("scroll",T),T.cancel()}}),[S,T]);return r("div",Object.assign({ref:G,className:l(g,I)},O,{children:[t("div",{ref:H,className:k,children:E}),r(o,{children:[A&&t("div",{ref:J,className:l(z,R),"data-id":"left-fade",children:_&&t(b,{className:l(x,N),"data-id":"left-fade-indicator-button",children:t(i,{})})}),D&&t("div",{ref:K,className:l(z,y),"data-id":"right-fade",children:_&&t(b,{className:l(x,w),"data-id":"right-fade-indicator-button",children:t(s,{})})})]})]}))}));export{W as FadeWrapper};
+import{__rest as e}from"../../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as o}from"react/jsx-runtime";import{ChevronLeftIcon as i}from"@lifesg/react-icons/chevron-left";import{ChevronRightIcon as s}from"@lifesg/react-icons/chevron-right";import l from"clsx";import n from"../../external/lodash/throttle.js";import{forwardRef as c,useState as a,useRef as d,useImperativeHandle as m,useCallback as f,useMemo as h,useEffect as p}from"react";import{useResizeDetector as u}from"../../external/react-resize-detector/build/index.esm.js";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as j}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{ClickableIcon as b}from"../clickable-icon/clickable-icon.js";import{tokens as v,wrapper as g,content as k,fadeIndicatorButton as x,indicatorLeft as N,fade as y,fadeLeft as z,indicatorRight as R,fadeRight as w}from"./fade-wrapper.styles.js";import{getFadeColorSet as C,getFadeBackgroundColorValue as L}from"./helpers.js";const W=c(((c,W)=>{var{children:q,className:E,fadeColor:I,fadePosition:M="both",showIndicator:P=!1,onResize:_}=c,O=e(c,["children","className","fadeColor","fadePosition","showIndicator","onResize"]);const[A,B]=a("left"===M||"both"===M),[D,F]=a("right"===M||"both"===M),G=d(null),H=d(null),J=d(null),K=d(null),Q=C(I);j(J,{[v.backgroundColor]:L(Q.left,P)}),j(K,{[v.backgroundColor]:L(Q.right,P)}),u({onResize:U,targetRef:G,refreshMode:"debounce",refreshRate:50}),m(W,(()=>({resize(){U()}})));const S=f((()=>{const e=G.current,r=H.current;e&&r&&r.scrollWidth>e.offsetWidth?(F(Math.round(r.scrollLeft)<r.scrollWidth-r.offsetWidth),B(r.scrollLeft>=1)):(F(!1),B(!1))}),[]),T=h((()=>n(S,50)),[S]);function U(){S(),_&&_({content:H.current,wrapper:G.current})}p((()=>{const e=H.current;return S(),e&&e.addEventListener("scroll",T),()=>{e&&e.removeEventListener("scroll",T),T.cancel()}}),[S,T]);return r("div",Object.assign({ref:G,className:l(g,E)},O,{children:[t("div",{ref:H,className:k,children:q}),r(o,{children:[A&&t("div",{ref:J,className:l(y,z),"data-id":"left-fade",children:P&&t(b,{className:l(x,N),"data-id":"left-fade-indicator-button",children:t(i,{})})}),D&&t("div",{ref:K,className:l(y,w),"data-id":"right-fade",children:P&&t(b,{className:l(x,R),"data-id":"right-fade-indicator-button",children:t(s,{})})})]})]}))}));export{W as FadeWrapper};
 //# sourceMappingURL=fade-wrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    const fadeColorSet = getFadeColorSet(fadeColor);\n\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.left,\n            showIndicator\n        ),\n    });\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.right,\n            showIndicator\n        ),\n    });\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const handleScroll = useCallback(() => {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }, []);\n\n    const throttledScrollHandler = useMemo(() => {\n        return throttle(handleScroll, 50);\n    }, [handleScroll]);\n\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n\n            throttledScrollHandler.cancel();\n        };\n    }, [handleScroll, throttledScrollHandler]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorLeft\n                                )}\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n                {showFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorRight\n                                )}\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <div ref={contentRef} className={styles.content}>\n                {children}\n            </div>\n            {renderFade()}\n        </div>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"4pCAsBA,MA0LaA,EAAcC,GA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,GAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,GAAQ,IAC5BC,EAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,GAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAKC,EAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,EAAcxD,SAC1CA,IAlDLkD,eACK1C,GACG+C,EAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAKI,EAAaC,GAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAC,GACH,UACO,6BAA4B7D,SAEpCuD,EAACO,EAAe,CAAA,OAK/BnD,GACG4C,EAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAKI,EAAaM,aACrB,aAAY/D,SAEnBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAI,aAEI,8BAA6BhE,SAErCuD,EAACU,EAAgB,CAAA,aAmBnC"}
+{"version":3,"file":"fade-wrapper.js","sources":["../../../src/shared/fade-wrapper/fade-wrapper.tsx"],"sourcesContent":["import { ChevronLeftIcon } from \"@lifesg/react-icons/chevron-left\";\nimport { ChevronRightIcon } from \"@lifesg/react-icons/chevron-right\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { useApplyStyle } from \"../../theme\";\nimport { ClickableIcon } from \"../clickable-icon\";\nimport * as styles from \"./fade-wrapper.styles\";\nimport { getFadeBackgroundColorValue, getFadeColorSet } from \"./helpers\";\nimport type { FadeWrapperProps, FadeWrapperRef } from \"./types\";\n\nconst Component = (\n    {\n        children,\n        className,\n        fadeColor,\n        fadePosition = \"both\",\n        showIndicator = false,\n        onResize,\n        ...otherProps\n    }: FadeWrapperProps,\n    ref: React.Ref<FadeWrapperRef>\n) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showFadeLeft, setShowFadeLeft] = useState<boolean>(\n        fadePosition === \"left\" || fadePosition === \"both\"\n    );\n    const [showFadeRight, setShowFadeRight] = useState<boolean>(\n        fadePosition === \"right\" || fadePosition === \"both\"\n    );\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const contentRef = useRef<HTMLDivElement>(null);\n    const fadeLeftRef = useRef<HTMLDivElement>(null);\n    const fadeRightRef = useRef<HTMLDivElement>(null);\n\n    const fadeColorSet = getFadeColorSet(fadeColor);\n\n    useApplyStyle(fadeLeftRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.left,\n            showIndicator\n        ),\n    });\n    useApplyStyle(fadeRightRef, {\n        [styles.tokens.backgroundColor]: getFadeBackgroundColorValue(\n            fadeColorSet.right,\n            showIndicator\n        ),\n    });\n\n    // To scroll left when wrapper resizes\n    useResizeDetector({\n        onResize: handleResize,\n        targetRef: wrapperRef,\n        refreshMode: \"debounce\",\n        refreshRate: 50,\n    });\n\n    useImperativeHandle(ref, () => {\n        return {\n            resize() {\n                handleResize();\n            },\n        };\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    const handleScroll = useCallback(() => {\n        const wrapper = wrapperRef.current;\n        const content = contentRef.current;\n\n        if (wrapper && content && content.scrollWidth > wrapper.offsetWidth) {\n            /**\n             * NOTE: Used Math.round because we observe a 0.5 difference\n             * even when we scroll to the end. This causes the fade right\n             * to not be removed\n             */\n            setShowFadeRight(\n                Math.round(content.scrollLeft) <\n                    content.scrollWidth - content.offsetWidth\n            );\n            setShowFadeLeft(content.scrollLeft >= 1);\n        } else {\n            setShowFadeRight(false);\n            setShowFadeLeft(false);\n        }\n    }, []);\n\n    const throttledScrollHandler = useMemo(() => {\n        return throttle(handleScroll, 50);\n    }, [handleScroll]);\n\n    useEffect(() => {\n        const content = contentRef.current;\n\n        handleScroll();\n\n        if (content) {\n            content.addEventListener(\"scroll\", throttledScrollHandler);\n        }\n\n        return () => {\n            if (content) {\n                content.removeEventListener(\"scroll\", throttledScrollHandler);\n            }\n\n            throttledScrollHandler.cancel();\n        };\n    }, [handleScroll, throttledScrollHandler]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n\n    function handleResize() {\n        handleScroll();\n\n        if (onResize) {\n            onResize({\n                content: contentRef.current!,\n                wrapper: wrapperRef.current!,\n            });\n        }\n\n        // TODO: Will move this out to Breadcrumb when it uses this component\n        // if (content && wrapper && window.innerWidth <= MediaWidths.tablet) {\n        //     content.scrollLeft = content.scrollWidth - wrapper.offsetWidth;\n        // }\n    }\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderFade = () => {\n        return (\n            <>\n                {showFadeLeft && (\n                    <div\n                        ref={fadeLeftRef}\n                        className={clsx(styles.fade, styles.fadeLeft)}\n                        data-id=\"left-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorLeft\n                                )}\n                                data-id=\"left-fade-indicator-button\"\n                            >\n                                <ChevronLeftIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n                {showFadeRight && (\n                    <div\n                        ref={fadeRightRef}\n                        className={clsx(styles.fade, styles.fadeRight)}\n                        data-id=\"right-fade\"\n                    >\n                        {showIndicator && (\n                            <ClickableIcon\n                                className={clsx(\n                                    styles.fadeIndicatorButton,\n                                    styles.indicatorRight\n                                )}\n                                data-id=\"right-fade-indicator-button\"\n                            >\n                                <ChevronRightIcon />\n                            </ClickableIcon>\n                        )}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    return (\n        <div\n            ref={wrapperRef}\n            className={clsx(styles.wrapper, className)}\n            {...otherProps}\n        >\n            <div ref={contentRef} className={styles.content}>\n                {children}\n            </div>\n            {renderFade()}\n        </div>\n    );\n};\n\nexport const FadeWrapper = forwardRef(Component);\n"],"names":["FadeWrapper","forwardRef","_a","ref","children","className","fadeColor","fadePosition","showIndicator","onResize","otherProps","__rest","showFadeLeft","setShowFadeLeft","useState","showFadeRight","setShowFadeRight","wrapperRef","useRef","contentRef","fadeLeftRef","fadeRightRef","fadeColorSet","getFadeColorSet","useApplyStyle","styles.tokens","backgroundColor","getFadeBackgroundColorValue","left","right","useResizeDetector","handleResize","targetRef","refreshMode","refreshRate","useImperativeHandle","resize","handleScroll","useCallback","wrapper","current","content","scrollWidth","offsetWidth","Math","round","scrollLeft","throttledScrollHandler","useMemo","throttle","useEffect","addEventListener","removeEventListener","cancel","_jsxs","Object","assign","clsx","styles.wrapper","_jsx","styles.content","styles.fade","styles.fadeLeft","ClickableIcon","styles.fadeIndicatorButton","styles.indicatorLeft","ChevronLeftIcon","styles.fadeRight","styles.indicatorRight","ChevronRightIcon"],"mappings":"ysCAsBA,MA0LaA,EAAcC,GA1LT,CACdC,EASAC,SATAC,SACIA,EAAQC,UACRA,EAASC,UACTA,EAASC,aACTA,EAAe,OAAMC,cACrBA,GAAgB,EAAKC,SACrBA,GAAQP,EACLQ,EAAUC,EAAAT,EAPjB,gFAcA,MAAOU,EAAcC,GAAmBC,EACnB,SAAjBP,GAA4C,SAAjBA,IAExBQ,EAAeC,GAAoBF,EACrB,UAAjBP,GAA6C,SAAjBA,GAG1BU,EAAaC,EAAuB,MACpCC,EAAaD,EAAuB,MACpCE,EAAcF,EAAuB,MACrCG,EAAeH,EAAuB,MAEtCI,EAAeC,EAAgBjB,GAErCkB,EAAcJ,EAAa,CACvB,CAACK,EAAcC,iBAAkBC,EAC7BL,EAAaM,KACbpB,KAGRgB,EAAcH,EAAc,CACxB,CAACI,EAAcC,iBAAkBC,EAC7BL,EAAaO,MACbrB,KAKRsB,EAAkB,CACdrB,SAAUsB,EACVC,UAAWf,EACXgB,YAAa,WACbC,YAAa,KAGjBC,EAAoBhC,GAAK,KACd,CACH,MAAAiC,GACIL,GACJ,MAOR,MAAMM,EAAeC,GAAY,KAC7B,MAAMC,EAAUtB,EAAWuB,QACrBC,EAAUtB,EAAWqB,QAEvBD,GAAWE,GAAWA,EAAQC,YAAcH,EAAQI,aAMpD3B,EACI4B,KAAKC,MAAMJ,EAAQK,YACfL,EAAQC,YAAcD,EAAQE,aAEtC9B,EAAgB4B,EAAQK,YAAc,KAEtC9B,GAAiB,GACjBH,GAAgB,GACpB,GACD,IAEGkC,EAAyBC,GAAQ,IAC5BC,EAASZ,EAAc,KAC/B,CAACA,IAwBJ,SAASN,IACLM,IAEI5B,GACAA,EAAS,CACLgC,QAAStB,EAAWqB,QACpBD,QAAStB,EAAWuB,SAQhC,CApCAU,GAAU,KACN,MAAMT,EAAUtB,EAAWqB,QAQ3B,OANAH,IAEII,GACAA,EAAQU,iBAAiB,SAAUJ,GAGhC,KACCN,GACAA,EAAQW,oBAAoB,SAAUL,GAG1CA,EAAuBM,QAAQ,CAClC,GACF,CAAChB,EAAcU,IAsElB,OACIO,EAAA,MAAAC,OAAAC,OAAA,CACIrD,IAAKc,EACLZ,UAAWoD,EAAKC,EAAgBrD,IAC5BK,EAAU,CAAAN,SAAA,CAEduD,EAAA,MAAA,CAAKxD,IAAKgB,EAAYd,UAAWuD,EAAcxD,SAC1CA,IAlDLkD,eACK1C,GACG+C,EAAA,MAAA,CACIxD,IAAKiB,EACLf,UAAWoD,EAAKI,EAAaC,GAAgB,UACrC,YAAW1D,SAElBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAC,GACH,UACO,6BAA4B7D,SAEpCuD,EAACO,EAAe,CAAA,OAK/BnD,GACG4C,EAAA,MAAA,CACIxD,IAAKkB,EACLhB,UAAWoD,EAAKI,EAAaM,aACrB,aAAY/D,SAEnBI,GACGmD,EAACI,EAAa,CACV1D,UAAWoD,EACPO,EACAI,aAEI,8BAA6BhE,SAErCuD,EAACU,EAAgB,CAAA,aAmBnC"}

package/shared/fade-wrapper/helpers.js

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

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

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

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

@@ -17,3 +17,8 @@ export declare const BasicInput: (props: BasicInputProps & import("react").RefAt
  * Standalone native button with stripped-down styles
  */
 export declare const BasicButton: (props: BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+/**
+ * Clear button with touch-target padding, offsetting negative margin, and
+ * a fixed 2px focus outline
+ */
+export declare const ClearButton: (props: BasicButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;

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

@@ -1,2 +1,2 @@
-import{__rest as r}from"../../_virtual/_tslib.js";import{jsx as s}from"react/jsx-runtime";import e from"clsx";import{forwardRef as a}from"react";import{inputBox as o,inputBoxDisabled as t,inputBoxError as n,inputBoxReadOnly as c,inputBoxNoBorder as i,inputWrapper as d,inputWrapperReadOnly as l,inputWrapperPositionRight as m,basicInput as f,basicInputSmall as u,basicButton as p}from"./input-wrapper.styles.js";const N=a((function(a,d){const{disabled:l,error:m,readOnly:f,focused:u,noBorder:p,className:N}=a,b=r(a,["disabled","error","readOnly","focused","noBorder","className"]);return s("div",Object.assign({ref:d,"data-focused":u,className:e(o,l&&t,m&&n,f&&c,p&&i,N)},b))})),b=a((function(a,f){const{disabled:u,error:p,readOnly:N,focused:b,noBorder:O,position:j,className:v}=a,g=r(a,["disabled","error","readOnly","focused","noBorder","position","className"]);return s("div",Object.assign({ref:f,"data-focused":b,className:e(o,d,u&&t,p&&n,N&&c,O&&i,N&&l,"right"===j&&m,v)},g))})),O=a((function(a,o){const{variant:t,className:n}=a,c=r(a,["variant","className"]);return s("input",Object.assign({ref:o,className:e(f,"small"===t&&u,n)},c))})),j=a((function(a,o){var{className:t}=a,n=r(a,["className"]);return s("button",Object.assign({ref:o,className:e(p,t)},n))}));export{j as BasicButton,O as BasicInput,N as InputBox,b as InputWrapper};
+import{__rest as s}from"../../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{CrossIcon as a}from"@lifesg/react-icons/cross";import e from"clsx";import{forwardRef as o}from"react";import{inputBox as t,inputBoxDisabled as n,inputBoxError as c,inputBoxReadOnly as i,inputBoxNoBorder as l,inputWrapper as m,inputWrapperReadOnly as d,inputWrapperPositionRight as f,basicInput as u,basicInputSmall as N,basicButton as p,clearButton as b,clearIcon as O}from"./input-wrapper.styles.js";const j=o((function(a,o){const{disabled:m,error:d,readOnly:f,focused:u,noBorder:N,className:p}=a,b=s(a,["disabled","error","readOnly","focused","noBorder","className"]);return r("div",Object.assign({ref:o,"data-focused":u,className:e(t,m&&n,d&&c,f&&i,N&&l,p)},b))})),g=o((function(a,o){const{disabled:u,error:N,readOnly:p,focused:b,noBorder:O,position:j,className:g}=a,v=s(a,["disabled","error","readOnly","focused","noBorder","position","className"]);return r("div",Object.assign({ref:o,"data-focused":b,className:e(t,m,u&&n,N&&c,p&&i,O&&l,p&&d,"right"===j&&f,g)},v))})),v=o((function(a,o){const{variant:t,className:n}=a,c=s(a,["variant","className"]);return r("input",Object.assign({ref:o,className:e(u,"small"===t&&N,n)},c))})),y=o((function(a,o){var{className:t}=a,n=s(a,["className"]);return r("button",Object.assign({ref:o,className:e(p,t)},n))})),B=o((function(o,t){var{className:n}=o,c=s(o,["className"]);return r("button",Object.assign({ref:t,className:e(b,n)},c,{children:r(a,{className:O,"aria-hidden":!0})}))}));export{y as BasicButton,v as BasicInput,B as ClearButton,j as InputBox,g as InputWrapper};
 //# sourceMappingURL=input-wrapper.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-wrapper.js","sources":["../../../src/shared/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./input-wrapper.styles\";\nimport type {\n    BasicButtonProps,\n    BasicInputProps,\n    InputBoxProps,\n    InputWrapperProps,\n} from \"./types\";\n\n/**\n * Basic wrapper for input fields that provides the border style but does not\n * prescribe any layout for content\n */\nexport const InputBox = forwardRef<HTMLDivElement, InputBoxProps>(\n    function InputBox(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Basic wrapper for input fields with spacing and flex layout for content\n */\nexport const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(\n    function InputWrapper(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            position,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    styles.inputWrapper,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    readOnly && styles.inputWrapperReadOnly,\n                    position === \"right\" && styles.inputWrapperPositionRight,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native input with stripped-down styles, intended to be used in\n * combination with `InputWrapper` or other wrappers to build composite widgets\n */\nexport const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(\n    function BasicInput(props, ref) {\n        const { variant, className, ...otherProps } = props;\n        return (\n            <input\n                ref={ref}\n                className={clsx(\n                    styles.basicInput,\n                    variant === \"small\" && styles.basicInputSmall,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native button with stripped-down styles\n */\nexport const BasicButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function BasicButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.basicButton, className)}\n                {...props}\n            />\n        );\n    }\n);\n"],"names":["InputBox","forwardRef","props","ref","disabled","error","readOnly","focused","noBorder","className","otherProps","_jsx","clsx","styles.inputBox","styles.inputBoxDisabled","styles.inputBoxError","styles.inputBoxReadOnly","styles.inputBoxNoBorder","InputWrapper","position","Object","assign","styles.inputWrapper","styles.inputWrapperReadOnly","styles.inputWrapperPositionRight","BasicInput","variant","__rest","styles.basicInput","styles.basicInputSmall","BasicButton","_a","styles.basicButton"],"mappings":"4ZAeO,MAAMA,EAAWC,GACpB,SAAkBC,EAAOC,GACrB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQC,UACRA,GAEAP,EADGQ,IACHR,EARE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,cASN,OACIS,uBACIR,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAT,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZR,IAEAC,GAGhB,IAMSQ,EAAejB,GACxB,SAAsBC,EAAOC,GACzB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQW,SACRA,EAAQV,UACRA,GAEAP,EADGQ,IACHR,EATE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,WAAA,cAUN,OACIS,EAAA,MAAAS,OAAAC,OAAA,CACIlB,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAS,EACAlB,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZX,GAAYiB,EACC,UAAbJ,GAAwBK,EACxBf,IAEAC,GAGhB,IAOSe,EAAaxB,GACtB,SAAoBC,EAAOC,GACvB,MAAMuB,QAAEA,EAAOjB,UAAEA,GAA6BP,EAAfQ,EAAUiB,EAAKzB,EAAxC,CAAA,UAAA,cACN,OACIS,EAAA,QAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EACPgB,EACY,UAAZF,GAAuBG,EACvBpB,IAEAC,GAGhB,IAMSoB,EAAc7B,GACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAI,EAArB,eACjB,OACIpB,0BACIR,IAAKA,EACLM,UAAWG,EAAKoB,EAAoBvB,IAChCP,GAGhB"}
+{"version":3,"file":"input-wrapper.js","sources":["../../../src/shared/input-wrapper/input-wrapper.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { forwardRef } from \"react\";\n\nimport * as styles from \"./input-wrapper.styles\";\nimport type {\n    BasicButtonProps,\n    BasicInputProps,\n    InputBoxProps,\n    InputWrapperProps,\n} from \"./types\";\n\n/**\n * Basic wrapper for input fields that provides the border style but does not\n * prescribe any layout for content\n */\nexport const InputBox = forwardRef<HTMLDivElement, InputBoxProps>(\n    function InputBox(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Basic wrapper for input fields with spacing and flex layout for content\n */\nexport const InputWrapper = forwardRef<HTMLDivElement, InputWrapperProps>(\n    function InputWrapper(props, ref) {\n        const {\n            disabled,\n            error,\n            readOnly,\n            focused,\n            noBorder,\n            position,\n            className,\n            ...otherProps\n        } = props;\n        return (\n            <div\n                ref={ref}\n                data-focused={focused}\n                className={clsx(\n                    styles.inputBox,\n                    styles.inputWrapper,\n                    disabled && styles.inputBoxDisabled,\n                    error && styles.inputBoxError,\n                    readOnly && styles.inputBoxReadOnly,\n                    noBorder && styles.inputBoxNoBorder,\n                    readOnly && styles.inputWrapperReadOnly,\n                    position === \"right\" && styles.inputWrapperPositionRight,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native input with stripped-down styles, intended to be used in\n * combination with `InputWrapper` or other wrappers to build composite widgets\n */\nexport const BasicInput = forwardRef<HTMLInputElement, BasicInputProps>(\n    function BasicInput(props, ref) {\n        const { variant, className, ...otherProps } = props;\n        return (\n            <input\n                ref={ref}\n                className={clsx(\n                    styles.basicInput,\n                    variant === \"small\" && styles.basicInputSmall,\n                    className\n                )}\n                {...otherProps}\n            />\n        );\n    }\n);\n\n/**\n * Standalone native button with stripped-down styles\n */\nexport const BasicButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function BasicButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.basicButton, className)}\n                {...props}\n            />\n        );\n    }\n);\n\n/**\n * Clear button with touch-target padding, offsetting negative margin, and\n * a fixed 2px focus outline\n */\nexport const ClearButton = forwardRef<HTMLButtonElement, BasicButtonProps>(\n    function ClearButton({ className, ...props }, ref) {\n        return (\n            <button\n                ref={ref}\n                className={clsx(styles.clearButton, className)}\n                {...props}\n            >\n                <CrossIcon className={styles.clearIcon} aria-hidden />\n            </button>\n        );\n    }\n);\n"],"names":["InputBox","forwardRef","props","ref","disabled","error","readOnly","focused","noBorder","className","otherProps","_jsx","clsx","styles.inputBox","styles.inputBoxDisabled","styles.inputBoxError","styles.inputBoxReadOnly","styles.inputBoxNoBorder","InputWrapper","position","Object","assign","styles.inputWrapper","styles.inputWrapperReadOnly","styles.inputWrapperPositionRight","BasicInput","variant","__rest","styles.basicInput","styles.basicInputSmall","BasicButton","_a","styles.basicButton","ClearButton","styles.clearButton","children","CrossIcon","styles.clearIcon"],"mappings":"kfAgBO,MAAMA,EAAWC,GACpB,SAAkBC,EAAOC,GACrB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQC,UACRA,GAEAP,EADGQ,IACHR,EARE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,cASN,OACIS,uBACIR,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAT,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZR,IAEAC,GAGhB,IAMSQ,EAAejB,GACxB,SAAsBC,EAAOC,GACzB,MAAMC,SACFA,EAAQC,MACRA,EAAKC,SACLA,EAAQC,QACRA,EAAOC,SACPA,EAAQW,SACRA,EAAQV,UACRA,GAEAP,EADGQ,IACHR,EATE,CAAA,WAAA,QAAA,WAAA,UAAA,WAAA,WAAA,cAUN,OACIS,EAAA,MAAAS,OAAAC,OAAA,CACIlB,IAAKA,EAAG,eACMI,EACdE,UAAWG,EACPC,EACAS,EACAlB,GAAYU,EACZT,GAASU,EACTT,GAAYU,EACZR,GAAYS,EACZX,GAAYiB,EACC,UAAbJ,GAAwBK,EACxBf,IAEAC,GAGhB,IAOSe,EAAaxB,GACtB,SAAoBC,EAAOC,GACvB,MAAMuB,QAAEA,EAAOjB,UAAEA,GAA6BP,EAAfQ,EAAUiB,EAAKzB,EAAxC,CAAA,UAAA,cACN,OACIS,EAAA,QAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EACPgB,EACY,UAAZF,GAAuBG,EACvBpB,IAEAC,GAGhB,IAMSoB,EAAc7B,GACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAI,EAArB,eACjB,OACIpB,0BACIR,IAAKA,EACLM,UAAWG,EAAKoB,EAAoBvB,IAChCP,GAGhB,IAOS+B,EAAchC,GACvB,SAAqB8B,EAAyB5B,GAAzB,IAAAM,UAAEA,GAASsB,EAAK7B,EAAKyB,EAAAI,EAArB,eACjB,OACIpB,EAAA,SAAAS,OAAAC,OAAA,CACIlB,IAAKA,EACLM,UAAWG,EAAKsB,EAAoBzB,IAChCP,EAAK,CAAAiC,SAETxB,EAACyB,EAAS,CAAC3B,UAAW4B,EAAgB,eAAA,MAGlD"}

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

@@ -9,3 +9,6 @@ export declare const inputWrapperPositionRight: import("@linaria/core").LinariaC
 export declare const basicInput: import("@linaria/core").LinariaClassName;
 export declare const basicInputSmall: import("@linaria/core").LinariaClassName;
 export declare const basicButton: import("@linaria/core").LinariaClassName;
+export declare const clearButton: import("@linaria/core").LinariaClassName;
+export declare const clearIcon: import("@linaria/core").LinariaClassName;
+export declare const clearButtonContainer: import("@linaria/core").LinariaClassName;

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

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

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

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

package/shared/input-wrapper/{input-wrapper.styles_1kc4xhb.css → input-wrapper.styles_19fpzb.css}

@@ -9,3 +9,6 @@
 .b168rpxy{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;--webkit-appearance:none;--moz-appearance:textfield;}.b168rpxy:disabled{color:var(--fds-colour-text-subtler);}.b168rpxy:disabled:hover{cursor:not-allowed;}.b168rpxy::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::-webkit-outer-spin-button,.b168rpxy::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b168rpxy::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b168rpxy::placeholder{color:var(--fds-colour-text-subtler);}
 .b1df0tus{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
 .b191fi5o{background:transparent;border:none;outline:none;}.b191fi5o:focus,.b191fi5o:active{outline:none;}.b191fi5o:focus-visible{outline:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}
+.c179s2uy{background:transparent;border:none;outline:none;height:auto;padding:var(--fds-spacing-12) var(--fds-spacing-16);margin:calc(var(--fds-spacing-12) * -1) calc(var(--fds-spacing-16) * -1);cursor:pointer;color:var(--fds-colour-icon);}.c179s2uy:focus,.c179s2uy:active{outline:none;}.c179s2uy:focus-visible{outline:2px solid var(--fds-colour-border-focus);border-radius:var(--fds-radius-sm);}
+.c1buolhy{height:1.25rem;width:1.25rem;vertical-align:middle;}
+.ccmyj2w{position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;right:var(--fds-spacing-16);}

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

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

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

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

package/shared/progress-bar/progress-bar.js

@@ -1,2 +1,2 @@
-import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{useRef as t}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as o}from"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as s}from"../../theme/utils/use-apply-styles.js";import{tokens as m,bar as i}from"./progress-bar.styles.js";const p=({className:p,progress:a,colour:l,"data-testid":n})=>{const c=null!=l?l:o["icon-primary-subtle"],d=t(null);return s(d,{[m.barColour]:c,[m.barWidth]:100*a+"%"}),e("div",{className:r(i,p),"data-testid":n,ref:d,children:e("progress",{value:100*a,max:100})})};export{p as ProgressBar};
+import{jsx as e}from"react/jsx-runtime";import r from"clsx";import{useRef as t}from"react";import"../../theme/theme-provider/index.js";import"../../theme/theme-provider/context.js";import"../../theme/tokens/border.js";import{Colour as o}from"../../theme/tokens/colour.js";import"../../theme/tokens/font.js";import"../../theme/tokens/media-query.js";import{useApplyStyle as s}from"../../theme/utils/use-apply-styles.js";import"../../theme/utils/use-media-query.js";import{tokens as m,bar as i}from"./progress-bar.styles.js";const p=({className:p,progress:a,colour:l,"data-testid":n})=>{const u=null!=l?l:o["icon-primary-subtle"],d=t(null);return s(d,{[m.barColour]:u,[m.barWidth]:100*a+"%"}),e("div",{className:r(i,p),"data-testid":n,ref:d,children:e("progress",{value:100*a,max:100})})};export{p as ProgressBar};
 //# sourceMappingURL=progress-bar.js.map

package/shared/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sources":["../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { ColourCSSVariableString } from \"../../theme\";\nimport { Colour, useApplyStyle } from \"../../theme\";\nimport * as styles from \"./progress-bar.styles\";\n\ninterface Props {\n    className?: string | undefined;\n    /** Progress from 0 to 1 */\n    progress: number;\n    colour?: string | ColourCSSVariableString | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ProgressBar = ({\n    className,\n    progress,\n    colour,\n    \"data-testid\": testId,\n}: Props) => {\n    const colourToUse = colour ?? Colour[\"icon-primary-subtle\"];\n\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        [styles.tokens.barColour]: colourToUse,\n        [styles.tokens.barWidth]: `${progress * 100}%`,\n    });\n\n    return (\n        <div\n            className={clsx(styles.bar, className)}\n            data-testid={testId}\n            ref={barRef}\n        >\n            <progress value={progress * 100} max={100} />\n        </div>\n    );\n};\n"],"names":["ProgressBar","className","progress","colour","testId","colourToUse","Colour","barRef","useRef","useApplyStyle","styles.tokens","barColour","barWidth","_jsx","clsx","styles.bar","ref","children","value","max"],"mappings":"8dAeO,MAAMA,EAAc,EACvBC,YACAC,WACAC,SACA,cAAeC,MAEf,MAAMC,EAAcF,QAAAA,EAAUG,EAAO,uBAE/BC,EAASC,EAAuB,MAOtC,OALAC,EAAcF,EAAQ,CAClB,CAACG,EAAcC,WAAYN,EAC3B,CAACK,EAAcE,UAAyB,IAAXV,EAAH,MAI1BW,EAAA,MAAA,CACIZ,UAAWa,EAAKC,EAAYd,GAAU,cACzBG,EACbY,IAAKT,EAAMU,SAEXJ,EAAA,WAAA,CAAUK,MAAkB,IAAXhB,EAAgBiB,IAAK,OACpC"}
+{"version":3,"file":"progress-bar.js","sources":["../../../src/shared/progress-bar/progress-bar.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport type { ColourCSSVariableString } from \"../../theme\";\nimport { Colour, useApplyStyle } from \"../../theme\";\nimport * as styles from \"./progress-bar.styles\";\n\ninterface Props {\n    className?: string | undefined;\n    /** Progress from 0 to 1 */\n    progress: number;\n    colour?: string | ColourCSSVariableString | undefined;\n    \"data-testid\"?: string | undefined;\n}\n\nexport const ProgressBar = ({\n    className,\n    progress,\n    colour,\n    \"data-testid\": testId,\n}: Props) => {\n    const colourToUse = colour ?? Colour[\"icon-primary-subtle\"];\n\n    const barRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(barRef, {\n        [styles.tokens.barColour]: colourToUse,\n        [styles.tokens.barWidth]: `${progress * 100}%`,\n    });\n\n    return (\n        <div\n            className={clsx(styles.bar, className)}\n            data-testid={testId}\n            ref={barRef}\n        >\n            <progress value={progress * 100} max={100} />\n        </div>\n    );\n};\n"],"names":["ProgressBar","className","progress","colour","testId","colourToUse","Colour","barRef","useRef","useApplyStyle","styles.tokens","barColour","barWidth","_jsx","clsx","styles.bar","ref","children","value","max"],"mappings":"2gBAeO,MAAMA,EAAc,EACvBC,YACAC,WACAC,SACA,cAAeC,MAEf,MAAMC,EAAcF,QAAAA,EAAUG,EAAO,uBAE/BC,EAASC,EAAuB,MAOtC,OALAC,EAAcF,EAAQ,CAClB,CAACG,EAAcC,WAAYN,EAC3B,CAACK,EAAcE,UAAyB,IAAXV,EAAH,MAI1BW,EAAA,MAAA,CACIZ,UAAWa,EAAKC,EAAYd,GAAU,cACzBG,EACbY,IAAKT,EAAMU,SAEXJ,EAAA,WAAA,CAAUK,MAAkB,IAAXhB,EAAgBiB,IAAK,OACpC"}

package/shared/standalone-date-input/standalone-date-input.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"clsx";import a from"../../external/dayjs/dayjs.min.js";import r from"../../external/dayjs/plugin/customParseFormat.js";import o,{useState as l,useRef as u,useEffect as c,useImperativeHandle as s}from"react";import"../../util/calendar-helper.js";import{DateInputHelper as i}from"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as d}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useStateRef as m}from"../../util/use-state-ref.js";import{inputSection as p,inputContainer as f,baseInput as h,baseInputHover as v,inputSizerBase as g,dayInputSizer as y,divider as Y,dividerInactive as b,dividerHover as x,monthInputSizer as D,yearInputSizer as M,placeholder as j,placeholderDisabled as N,placeholderHide as $}from"./standalone-date-input.styles.js";a.extend(r);const C=({disabled:r,readOnly:o,names:C,value:k,focused:w,hoverValue:B,placeholder:F,label:I,onChange:V,onFocus:L,onBlur:O,hideInputKeyboard:E,inputLabels:K=["Date","Month","Year"]},S)=>{const P=E?"none":"numeric",[R,z,T]=m(""),[q,A,G]=m(""),[H,J,Q]=m(""),[U,W]=l("none"),[X,Z]=l(!1),_=u(null),ee=u(null),ne=u(null),te=u(null),[ae,re,oe]=de(B);c((()=>{var e;const[n="",t="",a=""]=de(k);z(n),A(t),J(a),n||t||a||!_.current||!_.current.contains(document.activeElement)||null===(e=ee.current)||void 0===e||e.focus()}),[k]),c((()=>{var e;w||W("none"),w&&(Z(!0),_.current&&!_.current.contains(document.activeElement)&&(null===(e=ee.current)||void 0===e||e.focus()))}),[w]),s(S,(()=>({ref:_,resetPlaceholder(){Z(!1)},resetInput(){const[e="",n="",t=""]=de(k);z(e),A(n),J(t)},focusYearRef(){var e;null===(e=te.current)||void 0===e||e.focus()}})),[z,A,J,k]);const le=e=>{var n;e.preventDefault(),null===(n=ee.current)||void 0===n||n.focus()},ue=e=>{e.target.select();const n=e.target.name;W(n)},ce=e=>{const[n,t,r]=C,o={[n]:T.current,[t]:G.current,[r]:Q.current},l=e.target.name,u=o[l],c=l!==r?d.padValue(u,!0):u;switch(l){case n:o[n]=c,z(c);break;case t:o[t]=c,A(c)}const s=`${o[r]}-${o[t]}-${o[n]}`,i=a(s,"YYYY-MM-DD",!0).isValid(),m=!o[n]&&!o[t]&&!o[r];i&&u!==c&&V(s),_.current&&!_.current.contains(e.relatedTarget)&&(W("none"),null==O||O(m||i))},se=e=>{var n,t;if(B)return;const r=e.target.name,o=e.target.value.replace(/[^0-9]/g,""),l={day:R,month:q,year:H};switch(r){case C[0]:l.day=o,z(o),2===o.length&&(null===(n=ne.current)||void 0===n||n.focus());break;case C[1]:l.month=o,A(o),2===o.length&&(null===(t=te.current)||void 0===t||t.focus());break;case C[2]:l.year=o,J(o)}if(!l.day&&!l.month&&!l.year)return void V("");const u=`${l.year}-${l.month}-${l.day}`;a(u,"YYYY-MM-DD",!0).isValid()&&V(u)},ie=e=>{var n,t;"Backspace"!==e.code&&"Backspace"!==e.key||(U===C[1]&&0===q.length&&(null===(n=ee.current)||void 0===n||n.focus()),U===C[2]&&0===H.length&&(null===(t=ne.current)||void 0===t||t.focus()))};function de(e){if(e){const n=i.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const t=a(n,"YYYY-MM-DD",!0);return[d.padValue(t.date().toString()),d.padValue((t.month()+1).toString()),t.year().toString()]}return[void 0,void 0,void 0]}return e("div",{role:"group","aria-label":I,className:p,onClick:()=>{var e;r||o||(Z(!0),_.current&&!_.current.contains(document.activeElement)&&(null===(e=ee.current)||void 0===e||e.focus()))},onFocus:e=>{r||(Z(!0),w||null==L||L(e))},children:[e("div",{ref:_,className:f,children:[n("span",{className:t(g,y),children:n("input",{ref:ee,name:C[0],maxLength:2,value:null!=ae?ae:R,onFocus:ue,onBlur:ce,onChange:se,type:"text",inputMode:P,pattern:"[0-9]{2}","data-testid":`${C[0]}-input`,"aria-label":K[0],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:U!==C[0]||o?"DD":"",className:t(h,!!B&&v)})}),n("span",{className:t(Y,0===R.length&&b,!!B&&x),children:"/"}),n("span",{className:t(g,D),children:n("input",{ref:ne,name:C[1],maxLength:2,value:null!=re?re:q,onFocus:ue,onBlur:ce,onChange:se,onKeyDown:ie,type:"text",inputMode:P,pattern:"[0-9]{2}","data-testid":`${C[1]}-input`,"aria-label":K[1],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:U!==C[1]||o?"MM":"",className:t(h,!!B&&v)})}),n("span",{className:t(Y,0===q.length&&b,!!B&&x),children:"/"}),n("span",{className:t(g,M),children:n("input",{ref:te,name:C[2],maxLength:4,value:null!=oe?oe:H,onFocus:ue,onBlur:ce,onChange:se,onKeyDown:ie,type:"text",inputMode:P,pattern:"[0-9]{4}","data-testid":`${C[2]}-input`,"aria-label":K[2],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:U!==C[2]||o?"YYYY":"",className:t(h,!!B&&v)})})]}),(()=>{if(!k&&!o&&F)return n("div",{className:t(j,r&&N,X&&$),onMouseDown:le,children:F})})()]})},k=o.forwardRef(C);export{C as Component,k as StandaloneDateInput};
+import{jsxs as e,jsx as n}from"react/jsx-runtime";import t from"clsx";import a from"../../external/dayjs/dayjs.min.js";import r from"../../external/dayjs/plugin/customParseFormat.js";import o,{useState as l,useRef as u,useEffect as c,useImperativeHandle as s}from"react";import"../../util/calendar-helper.js";import{DateInputHelper as i}from"../../util/date-input-helper.js";import"../../util/simple-id-generator.js";import{StringHelper as d}from"../../util/string-helper.js";import"@react-aria/live-announcer";import{useStateRef as m}from"../../util/use-state-ref.js";import{inputSection as p,inputContainer as f,baseInput as h,baseInputHover as v,inputSizerBase as g,dayInputSizer as y,divider as Y,dividerHover as b,monthInputSizer as x,yearInputSizer as D,placeholder as M,placeholderDisabled as j,placeholderHide as N}from"./standalone-date-input.styles.js";a.extend(r);const $=({disabled:r,readOnly:o,names:$,value:C,focused:k,hoverValue:w,placeholder:B,label:F,onChange:I,onFocus:V,onBlur:L,hideInputKeyboard:O,inputLabels:E=["Date","Month","Year"]},K)=>{const S=O?"none":"numeric",[P,R,z]=m(""),[T,q,A]=m(""),[G,H,J]=m(""),[Q,U]=l("none"),[W,X]=l(!1),Z=u(null),_=u(null),ee=u(null),ne=u(null),[te,ae,re]=ie(w);c((()=>{var e;const[n="",t="",a=""]=ie(C);R(n),q(t),H(a),n||t||a||!Z.current||!Z.current.contains(document.activeElement)||null===(e=_.current)||void 0===e||e.focus()}),[C]),c((()=>{var e;k||U("none"),k&&(X(!0),Z.current&&!Z.current.contains(document.activeElement)&&(null===(e=_.current)||void 0===e||e.focus()))}),[k]),s(K,(()=>({ref:Z,resetPlaceholder(){X(!1)},resetInput(){const[e="",n="",t=""]=ie(C);R(e),q(n),H(t)},focusYearRef(){var e;null===(e=ne.current)||void 0===e||e.focus()}})),[R,q,H,C]);const oe=e=>{var n;e.preventDefault(),null===(n=_.current)||void 0===n||n.focus()},le=e=>{e.target.select();const n=e.target.name;U(n)},ue=e=>{const[n,t,r]=$,o={[n]:z.current,[t]:A.current,[r]:J.current},l=e.target.name,u=o[l],c=l!==r?d.padValue(u,!0):u;switch(l){case n:o[n]=c,R(c);break;case t:o[t]=c,q(c)}const s=`${o[r]}-${o[t]}-${o[n]}`,i=a(s,"YYYY-MM-DD",!0).isValid(),m=!o[n]&&!o[t]&&!o[r];i&&u!==c&&I(s),Z.current&&!Z.current.contains(e.relatedTarget)&&(U("none"),null==L||L(m||i))},ce=e=>{var n,t;if(w)return;const r=e.target.name,o=e.target.value.replace(/[^0-9]/g,""),l={day:P,month:T,year:G};switch(r){case $[0]:l.day=o,R(o),2===o.length&&(null===(n=ee.current)||void 0===n||n.focus());break;case $[1]:l.month=o,q(o),2===o.length&&(null===(t=ne.current)||void 0===t||t.focus());break;case $[2]:l.year=o,H(o)}if(!l.day&&!l.month&&!l.year)return void I("");const u=`${l.year}-${l.month}-${l.day}`;a(u,"YYYY-MM-DD",!0).isValid()&&I(u)},se=e=>{var n,t;"Backspace"!==e.code&&"Backspace"!==e.key||(Q===$[1]&&0===T.length&&(null===(n=_.current)||void 0===n||n.focus()),Q===$[2]&&0===G.length&&(null===(t=ee.current)||void 0===t||t.focus()))};function ie(e){if(e){const n=i.sanitizeInput(e);if(!n)return[void 0,void 0,void 0];const t=a(n,"YYYY-MM-DD",!0);return[d.padValue(t.date().toString()),d.padValue((t.month()+1).toString()),t.year().toString()]}return[void 0,void 0,void 0]}return e("div",{role:"group","aria-label":F,className:p,onClick:()=>{var e;r||o||(X(!0),Z.current&&!Z.current.contains(document.activeElement)&&(null===(e=_.current)||void 0===e||e.focus()))},onFocus:e=>{r||(X(!0),k||null==V||V(e))},children:[e("div",{ref:Z,className:f,children:[n("span",{className:t(g,y),children:n("input",{ref:_,name:$[0],maxLength:2,value:null!=te?te:P,onFocus:le,onBlur:ue,onChange:ce,type:"text",inputMode:S,pattern:"[0-9]{2}","data-testid":`${$[0]}-input`,"aria-label":E[0],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:Q!==$[0]||o?"DD":"",className:t(h,!!w&&v)})}),n("span",{className:t(Y,!!w&&b),children:"/"}),n("span",{className:t(g,x),children:n("input",{ref:ee,name:$[1],maxLength:2,value:null!=ae?ae:T,onFocus:le,onBlur:ue,onChange:ce,onKeyDown:se,type:"text",inputMode:S,pattern:"[0-9]{2}","data-testid":`${$[1]}-input`,"aria-label":E[1],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:Q!==$[1]||o?"MM":"",className:t(h,!!w&&v)})}),n("span",{className:t(Y,!!w&&b),children:"/"}),n("span",{className:t(g,D),children:n("input",{ref:ne,name:$[2],maxLength:4,value:null!=re?re:G,onFocus:le,onBlur:ue,onChange:ce,onKeyDown:se,type:"text",inputMode:S,pattern:"[0-9]{4}","data-testid":`${$[2]}-input`,"aria-label":E[2],disabled:r,readOnly:o,tabIndex:o?-1:0,autoComplete:"off",placeholder:Q!==$[2]||o?"YYYY":"",className:t(h,!!w&&v)})})]}),(()=>{if(!C&&!o&&B)return n("div",{className:t(M,r&&j,W&&N),onMouseDown:oe,children:B})})()]})},C=o.forwardRef($);export{$ as Component,C as StandaloneDateInput};
 //# sourceMappingURL=standalone-date-input.js.map

package/shared/standalone-date-input/standalone-date-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone-date-input.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport * as styles from \"./standalone-date-input.styles\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n    | StartInputNames[number]\n    | EndInputNames[number]\n    | \"none\";\n\ninterface Props {\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    hideInputKeyboard?: boolean | undefined;\n    names: StartInputNames | EndInputNames;\n    value: string | undefined;\n    hoverValue?: string | undefined;\n    focused: boolean;\n    placeholder?: string | undefined;\n    label?: string | undefined;\n    inputLabels?: string[] | undefined;\n    onChange: (value: string) => void;\n    onFocus?: ((event: React.FocusEvent) => void) | undefined;\n    onBlur?: ((valid: boolean) => void) | undefined;\n}\n\nexport interface StandaloneDateInputRef {\n    ref: React.RefObject<HTMLDivElement>;\n    resetPlaceholder: () => void;\n    resetInput: () => void;\n    focusYearRef: () => void;\n}\n\nexport const Component = (\n    {\n        disabled,\n        readOnly,\n        names,\n        value,\n        focused,\n        hoverValue,\n        placeholder,\n        label,\n        onChange,\n        onFocus,\n        onBlur,\n        hideInputKeyboard,\n        inputLabels = [\"Date\", \"Month\", \"Year\"],\n    }: Props,\n    ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n    const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n    const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n    const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n    const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n    const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const dayInputRef = useRef<HTMLInputElement>(null);\n    const monthInputRef = useRef<HTMLInputElement>(null);\n    const yearInputRef = useRef<HTMLInputElement>(null);\n\n    const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n        parseToInputValues(hoverValue);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n        setDayValue(day);\n        setMonthValue(month);\n        setYearValue(year);\n\n        // re-focus on day input if all 3 inputs get cleared while typing\n        if (\n            !day &&\n            !month &&\n            !year &&\n            nodeRef.current &&\n            nodeRef.current.contains(document.activeElement)\n        )\n            dayInputRef.current?.focus();\n    }, [value]);\n\n    useEffect(() => {\n        // clear internal focus state\n        if (!focused) {\n            setCurrentFocus(\"none\");\n        }\n\n        // ensure at least one input is focused\n        if (focused) {\n            setHidePlaceholder(true);\n\n            if (\n                nodeRef.current &&\n                !nodeRef.current.contains(document.activeElement)\n            ) {\n                dayInputRef.current?.focus();\n            }\n        }\n    }, [focused]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            ref: nodeRef,\n            resetPlaceholder() {\n                setHidePlaceholder(false);\n            },\n            resetInput() {\n                const [day = \"\", month = \"\", year = \"\"] =\n                    parseToInputValues(value);\n                setDayValue(day);\n                setMonthValue(month);\n                setYearValue(year);\n            },\n            focusYearRef() {\n                yearInputRef.current?.focus();\n            },\n        }),\n        [setDayValue, setMonthValue, setYearValue, value]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSectionClick = () => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (\n            nodeRef.current &&\n            !nodeRef.current.contains(document.activeElement)\n        ) {\n            dayInputRef.current?.focus();\n        }\n    };\n\n    const handleSectionFocus = (event: React.FocusEvent) => {\n        if (disabled) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (!focused) {\n            onFocus?.(event);\n        }\n    };\n\n    const handlePlaceholderClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        dayInputRef.current?.focus();\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n        const targetName = event.target.name as FieldType;\n        setCurrentFocus(targetName);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const [dayName, monthName, yearName] = names;\n        const date = {\n            [dayName]: dayValueRef.current,\n            [monthName]: monthValueRef.current,\n            [yearName]: yearValueRef.current,\n        };\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = date[targetName];\n\n        // pad single digits for day and month inputs\n\n        const paddedValue =\n            targetName !== yearName\n                ? StringHelper.padValue(targetValue, true)\n                : targetValue;\n\n        switch (targetName) {\n            case dayName:\n                date[dayName] = paddedValue;\n                setDayValue(paddedValue);\n                break;\n            case monthName:\n                date[monthName] = paddedValue;\n                setMonthValue(paddedValue);\n                break;\n            case yearName:\n            default:\n                break;\n        }\n\n        const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n        const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n        const isPadded = targetValue !== paddedValue;\n\n        if (isValid && isPadded) {\n            onChange(value);\n        }\n\n        if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n            // entire field was blurred\n            setCurrentFocus(\"none\");\n            onBlur?.(isEmpty || isValid);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (hoverValue) {\n            // do not modify inputs when selecting date from another source\n            return;\n        }\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n        const date = {\n            day: dayValue,\n            month: monthValue,\n            year: yearValue,\n        };\n\n        switch (targetName) {\n            case names[0]:\n                date.day = targetValue;\n                setDayValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    monthInputRef.current?.focus();\n                }\n                break;\n            case names[1]:\n                date.month = targetValue;\n                setMonthValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    yearInputRef.current?.focus();\n                }\n                break;\n            case names[2]:\n                date.year = targetValue;\n                setYearValue(targetValue);\n                break;\n            default:\n                break;\n        }\n\n        if (!date.day && !date.month && !date.year) {\n            onChange(\"\");\n            return;\n        }\n\n        const value = `${date.year}-${date.month}-${date.day}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n        if (isValid) {\n            onChange(value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === names[1] && monthValue.length === 0) {\n                dayInputRef.current?.focus();\n            }\n\n            if (currentFocus === names[2] && yearValue.length === 0) {\n                monthInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function parseToInputValues(stringVal: string | undefined) {\n        if (!stringVal) {\n            return [undefined, undefined, undefined];\n        } else {\n            const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n            if (!sanitized) {\n                return [undefined, undefined, undefined];\n            }\n\n            const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n            return [\n                StringHelper.padValue(day.date().toString()),\n                StringHelper.padValue((day.month() + 1).toString()),\n                day.year().toString(),\n            ];\n        }\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPlaceholder = () => {\n        if (value || readOnly || !placeholder) {\n            return;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.placeholder,\n                    disabled && styles.placeholderDisabled,\n                    hidePlaceholder && styles.placeholderHide\n                )}\n                onMouseDown={handlePlaceholderClick}\n            >\n                {placeholder}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            role=\"group\"\n            aria-label={label}\n            className={styles.inputSection}\n            onClick={handleSectionClick}\n            onFocus={handleSectionFocus}\n        >\n            <div ref={nodeRef} className={styles.inputContainer}>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.dayInputSizer\n                    )}\n                >\n                    <input\n                        ref={dayInputRef}\n                        name={names[0]}\n                        maxLength={2}\n                        value={hoverDayValue ?? dayValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[0]}-input`}\n                        aria-label={inputLabels[0]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        dayValue.length === 0 && styles.dividerInactive,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.monthInputSizer\n                    )}\n                >\n                    <input\n                        ref={monthInputRef}\n                        name={names[1]}\n                        maxLength={2}\n                        value={hoverMonthValue ?? monthValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[1]}-input`}\n                        aria-label={inputLabels[1]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        monthValue.length === 0 && styles.dividerInactive,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.yearInputSizer\n                    )}\n                >\n                    <input\n                        ref={yearInputRef}\n                        name={names[2]}\n                        maxLength={4}\n                        value={hoverYearValue ?? yearValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{4}\"\n                        data-testid={`${names[2]}-input`}\n                        aria-label={inputLabels[2]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n            </div>\n            {renderPlaceholder()}\n        </div>\n    );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","role","className","styles.inputSection","onClick","children","styles.inputContainer","_jsx","clsx","styles.inputSizerBase","styles.dayInputSizer","maxLength","type","pattern","tabIndex","autoComplete","styles.baseInput","styles.baseInputHover","styles.divider","styles.dividerInactive","styles.dividerHover","styles.monthInputSizer","onKeyDown","styles.yearInputSizer","styles.placeholder","styles.placeholderDisabled","styles.placeholderHide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"standalone-date-input.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport dayjs from \"dayjs\";\nimport customParseFormat from \"dayjs/plugin/customParseFormat\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { DateInputHelper, StringHelper, useStateRef } from \"../../util\";\nimport * as styles from \"./standalone-date-input.styles\";\n\ndayjs.extend(customParseFormat);\n\ntype StartInputNames = [\"start-day\", \"start-month\", \"start-year\"];\ntype EndInputNames = [\"end-day\", \"end-month\", \"end-year\"];\n\nexport type FieldType =\n    | StartInputNames[number]\n    | EndInputNames[number]\n    | \"none\";\n\ninterface Props {\n    disabled?: boolean | undefined;\n    readOnly?: boolean | undefined;\n    hideInputKeyboard?: boolean | undefined;\n    names: StartInputNames | EndInputNames;\n    value: string | undefined;\n    hoverValue?: string | undefined;\n    focused: boolean;\n    placeholder?: string | undefined;\n    label?: string | undefined;\n    inputLabels?: string[] | undefined;\n    onChange: (value: string) => void;\n    onFocus?: ((event: React.FocusEvent) => void) | undefined;\n    onBlur?: ((valid: boolean) => void) | undefined;\n}\n\nexport interface StandaloneDateInputRef {\n    ref: React.RefObject<HTMLDivElement>;\n    resetPlaceholder: () => void;\n    resetInput: () => void;\n    focusYearRef: () => void;\n}\n\nexport const Component = (\n    {\n        disabled,\n        readOnly,\n        names,\n        value,\n        focused,\n        hoverValue,\n        placeholder,\n        label,\n        onChange,\n        onFocus,\n        onBlur,\n        hideInputKeyboard,\n        inputLabels = [\"Date\", \"Month\", \"Year\"],\n    }: Props,\n    ref: React.ForwardedRef<StandaloneDateInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const inputMode = hideInputKeyboard ? \"none\" : \"numeric\";\n\n    const [dayValue, setDayValue, dayValueRef] = useStateRef<string>(\"\");\n    const [monthValue, setMonthValue, monthValueRef] = useStateRef<string>(\"\");\n    const [yearValue, setYearValue, yearValueRef] = useStateRef<string>(\"\");\n    const [currentFocus, setCurrentFocus] = useState<FieldType>(\"none\");\n    const [hidePlaceholder, setHidePlaceholder] = useState<boolean>(false);\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const dayInputRef = useRef<HTMLInputElement>(null);\n    const monthInputRef = useRef<HTMLInputElement>(null);\n    const yearInputRef = useRef<HTMLInputElement>(null);\n\n    const [hoverDayValue, hoverMonthValue, hoverYearValue] =\n        parseToInputValues(hoverValue);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        const [day = \"\", month = \"\", year = \"\"] = parseToInputValues(value);\n        setDayValue(day);\n        setMonthValue(month);\n        setYearValue(year);\n\n        // re-focus on day input if all 3 inputs get cleared while typing\n        if (\n            !day &&\n            !month &&\n            !year &&\n            nodeRef.current &&\n            nodeRef.current.contains(document.activeElement)\n        )\n            dayInputRef.current?.focus();\n    }, [value]);\n\n    useEffect(() => {\n        // clear internal focus state\n        if (!focused) {\n            setCurrentFocus(\"none\");\n        }\n\n        // ensure at least one input is focused\n        if (focused) {\n            setHidePlaceholder(true);\n\n            if (\n                nodeRef.current &&\n                !nodeRef.current.contains(document.activeElement)\n            ) {\n                dayInputRef.current?.focus();\n            }\n        }\n    }, [focused]);\n\n    useImperativeHandle(\n        ref,\n        () => ({\n            ref: nodeRef,\n            resetPlaceholder() {\n                setHidePlaceholder(false);\n            },\n            resetInput() {\n                const [day = \"\", month = \"\", year = \"\"] =\n                    parseToInputValues(value);\n                setDayValue(day);\n                setMonthValue(month);\n                setYearValue(year);\n            },\n            focusYearRef() {\n                yearInputRef.current?.focus();\n            },\n        }),\n        [setDayValue, setMonthValue, setYearValue, value]\n    );\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSectionClick = () => {\n        if (disabled || readOnly) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (\n            nodeRef.current &&\n            !nodeRef.current.contains(document.activeElement)\n        ) {\n            dayInputRef.current?.focus();\n        }\n    };\n\n    const handleSectionFocus = (event: React.FocusEvent) => {\n        if (disabled) {\n            return;\n        }\n\n        setHidePlaceholder(true);\n\n        if (!focused) {\n            onFocus?.(event);\n        }\n    };\n\n    const handlePlaceholderClick = (event: React.MouseEvent) => {\n        event.preventDefault();\n        dayInputRef.current?.focus();\n    };\n\n    const handleInputFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        event.target.select();\n        const targetName = event.target.name as FieldType;\n        setCurrentFocus(targetName);\n    };\n\n    const handleInputBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const [dayName, monthName, yearName] = names;\n        const date = {\n            [dayName]: dayValueRef.current,\n            [monthName]: monthValueRef.current,\n            [yearName]: yearValueRef.current,\n        };\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = date[targetName];\n\n        // pad single digits for day and month inputs\n\n        const paddedValue =\n            targetName !== yearName\n                ? StringHelper.padValue(targetValue, true)\n                : targetValue;\n\n        switch (targetName) {\n            case dayName:\n                date[dayName] = paddedValue;\n                setDayValue(paddedValue);\n                break;\n            case monthName:\n                date[monthName] = paddedValue;\n                setMonthValue(paddedValue);\n                break;\n            case yearName:\n            default:\n                break;\n        }\n\n        const value = `${date[yearName]}-${date[monthName]}-${date[dayName]}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n        const isEmpty = !date[dayName] && !date[monthName] && !date[yearName];\n        const isPadded = targetValue !== paddedValue;\n\n        if (isValid && isPadded) {\n            onChange(value);\n        }\n\n        if (nodeRef.current && !nodeRef.current.contains(event.relatedTarget)) {\n            // entire field was blurred\n            setCurrentFocus(\"none\");\n            onBlur?.(isEmpty || isValid);\n        }\n    };\n\n    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (hoverValue) {\n            // do not modify inputs when selecting date from another source\n            return;\n        }\n\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value.replace(/[^0-9]/g, \"\");\n\n        const date = {\n            day: dayValue,\n            month: monthValue,\n            year: yearValue,\n        };\n\n        switch (targetName) {\n            case names[0]:\n                date.day = targetValue;\n                setDayValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    monthInputRef.current?.focus();\n                }\n                break;\n            case names[1]:\n                date.month = targetValue;\n                setMonthValue(targetValue);\n                // auto focus the next input once filled in\n                if (targetValue.length === 2) {\n                    yearInputRef.current?.focus();\n                }\n                break;\n            case names[2]:\n                date.year = targetValue;\n                setYearValue(targetValue);\n                break;\n            default:\n                break;\n        }\n\n        if (!date.day && !date.month && !date.year) {\n            onChange(\"\");\n            return;\n        }\n\n        const value = `${date.year}-${date.month}-${date.day}`;\n        const isValid = dayjs(value, \"YYYY-MM-DD\", true).isValid();\n\n        if (isValid) {\n            onChange(value);\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === names[1] && monthValue.length === 0) {\n                dayInputRef.current?.focus();\n            }\n\n            if (currentFocus === names[2] && yearValue.length === 0) {\n                monthInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    function parseToInputValues(stringVal: string | undefined) {\n        if (!stringVal) {\n            return [undefined, undefined, undefined];\n        } else {\n            const sanitized = DateInputHelper.sanitizeInput(stringVal);\n\n            if (!sanitized) {\n                return [undefined, undefined, undefined];\n            }\n\n            const day = dayjs(sanitized, \"YYYY-MM-DD\", true);\n\n            return [\n                StringHelper.padValue(day.date().toString()),\n                StringHelper.padValue((day.month() + 1).toString()),\n                day.year().toString(),\n            ];\n        }\n    }\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderPlaceholder = () => {\n        if (value || readOnly || !placeholder) {\n            return;\n        }\n\n        return (\n            <div\n                className={clsx(\n                    styles.placeholder,\n                    disabled && styles.placeholderDisabled,\n                    hidePlaceholder && styles.placeholderHide\n                )}\n                onMouseDown={handlePlaceholderClick}\n            >\n                {placeholder}\n            </div>\n        );\n    };\n\n    return (\n        <div\n            role=\"group\"\n            aria-label={label}\n            className={styles.inputSection}\n            onClick={handleSectionClick}\n            onFocus={handleSectionFocus}\n        >\n            <div ref={nodeRef} className={styles.inputContainer}>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.dayInputSizer\n                    )}\n                >\n                    <input\n                        ref={dayInputRef}\n                        name={names[0]}\n                        maxLength={2}\n                        value={hoverDayValue ?? dayValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[0]}-input`}\n                        aria-label={inputLabels[0]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[0] && !readOnly ? \"\" : \"DD\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.monthInputSizer\n                    )}\n                >\n                    <input\n                        ref={monthInputRef}\n                        name={names[1]}\n                        maxLength={2}\n                        value={hoverMonthValue ?? monthValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{2}\"\n                        data-testid={`${names[1]}-input`}\n                        aria-label={inputLabels[1]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[1] && !readOnly ? \"\" : \"MM\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n                <span\n                    className={clsx(\n                        styles.divider,\n                        !!hoverValue && styles.dividerHover\n                    )}\n                >\n                    /\n                </span>\n                <span\n                    className={clsx(\n                        styles.inputSizerBase,\n                        styles.yearInputSizer\n                    )}\n                >\n                    <input\n                        ref={yearInputRef}\n                        name={names[2]}\n                        maxLength={4}\n                        value={hoverYearValue ?? yearValue}\n                        onFocus={handleInputFocus}\n                        onBlur={handleInputBlur}\n                        onChange={handleInputChange}\n                        onKeyDown={handleKeyDown}\n                        type=\"text\"\n                        inputMode={inputMode}\n                        pattern=\"[0-9]{4}\"\n                        data-testid={`${names[2]}-input`}\n                        aria-label={inputLabels[2]}\n                        disabled={disabled}\n                        readOnly={readOnly}\n                        tabIndex={readOnly ? -1 : 0}\n                        autoComplete=\"off\"\n                        placeholder={\n                            currentFocus === names[2] && !readOnly ? \"\" : \"YYYY\"\n                        }\n                        className={clsx(\n                            styles.baseInput,\n                            !!hoverValue && styles.baseInputHover\n                        )}\n                    />\n                </span>\n            </div>\n            {renderPlaceholder()}\n        </div>\n    );\n};\n\nexport const StandaloneDateInput = React.forwardRef(Component);\n"],"names":["dayjs","extend","customParseFormat","Component","disabled","readOnly","names","value","focused","hoverValue","placeholder","label","onChange","onFocus","onBlur","hideInputKeyboard","inputLabels","ref","inputMode","dayValue","setDayValue","dayValueRef","useStateRef","monthValue","setMonthValue","monthValueRef","yearValue","setYearValue","yearValueRef","currentFocus","setCurrentFocus","useState","hidePlaceholder","setHidePlaceholder","nodeRef","useRef","dayInputRef","monthInputRef","yearInputRef","hoverDayValue","hoverMonthValue","hoverYearValue","parseToInputValues","useEffect","day","month","year","current","contains","document","activeElement","_a","focus","useImperativeHandle","resetPlaceholder","resetInput","focusYearRef","handlePlaceholderClick","event","preventDefault","handleInputFocus","target","select","targetName","name","handleInputBlur","dayName","monthName","yearName","date","targetValue","paddedValue","StringHelper","padValue","isValid","isEmpty","relatedTarget","handleInputChange","replace","length","_b","handleKeyDown","code","key","stringVal","sanitized","DateInputHelper","sanitizeInput","undefined","toString","_jsxs","role","className","styles.inputSection","onClick","children","styles.inputContainer","_jsx","clsx","styles.inputSizerBase","styles.dayInputSizer","maxLength","type","pattern","tabIndex","autoComplete","styles.baseInput","styles.baseInputHover","styles.divider","styles.dividerHover","styles.monthInputSizer","onKeyDown","styles.yearInputSizer","styles.placeholder","styles.placeholderDisabled","styles.placeholderHide","onMouseDown","renderPlaceholder","StandaloneDateInput","React","forwardRef"],"mappings":"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"}

package/shared/standalone-date-input/standalone-date-input.styles.d.ts

@@ -2,7 +2,6 @@ export declare const inputSection: import("@linaria/core").LinariaClassName;
 export declare const baseInput: import("@linaria/core").LinariaClassName;
 export declare const baseInputHover: import("@linaria/core").LinariaClassName;
 export declare const divider: import("@linaria/core").LinariaClassName;
-export declare const dividerInactive: import("@linaria/core").LinariaClassName;
 export declare const dividerHover: import("@linaria/core").LinariaClassName;
 export declare const inputContainer: import("@linaria/core").LinariaClassName;
 export declare const inputSizerBase: import("@linaria/core").LinariaClassName;

package/shared/standalone-date-input/standalone-date-input.styles.js

@@ -1,2 +1,2 @@
-import"./standalone-date-input.styles_1mqophx.css";const t="i48x656",d="b11lxf0g",n="b1owk99f",p="d1hrb2q6",o="d1ednuur",s="d12gn07d",a="iay8f6w",e="i1tizbfo",i="d8v7mt3",b="m1nfq8ts",f="y1kizbwh",r="pzrktuq",u="p1jcopfd",c="p10ypbkc";export{d as baseInput,n as baseInputHover,i as dayInputSizer,p as divider,s as dividerHover,o as dividerInactive,a as inputContainer,t as inputSection,e as inputSizerBase,b as monthInputSizer,r as placeholder,u as placeholderDisabled,c as placeholderHide,f as yearInputSizer};
+import"./standalone-date-input.styles_1m0da43.css";const t="i48x656",d="b11lxf0g",n="b1owk99f",a="d1hrb2q6",s="d1ednuur",e="i12gn07d",i="iay8f6w",o="d1tizbfo",p="m8v7mt3",f="y1nfq8ts",r="p1kizbwh",b="pzrktuq",u="p1jcopfd";export{d as baseInput,n as baseInputHover,o as dayInputSizer,a as divider,s as dividerHover,e as inputContainer,t as inputSection,i as inputSizerBase,p as monthInputSizer,r as placeholder,b as placeholderDisabled,u as placeholderHide,f as yearInputSizer};
 //# sourceMappingURL=standalone-date-input.styles.js.map

package/shared/standalone-date-input/standalone-date-input.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"standalone-date-input.styles.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSection = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    flex: 1;\n`;\n\nexport const baseInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    text-align: center;\n    position: absolute;\n    inset: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const baseInputHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const divider = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const dividerInactive = css`\n    color: ${Colour[\"text\"]};\n`;\n\nexport const dividerHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const inputSizerBase = css`\n    display: inline-block;\n    position: relative;\n\n    &::after {\n        ${Font[\"body-baseline-regular\"]}\n        visibility: hidden;\n        pointer-events: none;\n        white-space: pre;\n    }\n`;\n\nexport const dayInputSizer = css`\n    &::after {\n        content: \"DD\";\n    }\n`;\n\nexport const monthInputSizer = css`\n    &::after {\n        content: \"MM\";\n    }\n`;\n\nexport const yearInputSizer = css`\n    &::after {\n        content: \"YYYY\";\n    }\n`;\n\nexport const placeholder = css`\n    ${Font[\"body-baseline-regular\"]}\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text-subtler\"]};\n    position: absolute;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const placeholderDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n`;\n\nexport const placeholderHide = css`\n    display: none;\n`;\n"],"names":["inputSection","baseInput","baseInputHover","divider","dividerInactive","dividerHover","inputContainer","inputSizerBase","dayInputSizer","monthInputSizer","yearInputSizer","placeholder","placeholderDisabled","placeholderHide"],"mappings":"+FAOO,MAAMA,EAAY,UAQZC,EAAS,WAyCTC,EAAc,WAIdC,EAAO,WAIPC,EAAe,WAIfC,EAAY,WAIZC,EAAc,UAMdC,EAAc,WAYdC,EAAa,UAMbC,EAAe,WAMfC,EAAc,WAMdC,EAAW,UAWXC,EAAmB,WAKnBC,EAAe"}
+{"version":3,"file":"standalone-date-input.styles.js","sources":["../../../src/shared/standalone-date-input/standalone-date-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const inputSection = css`\n    display: flex;\n    align-items: center;\n    position: relative;\n\n    flex: 1;\n`;\n\nexport const baseInput = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    display: block;\n    background: transparent;\n    border: none;\n    outline: none;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    text-align: center;\n    position: absolute;\n    inset: 0;\n\n    &:disabled {\n        color: ${Colour[\"text-subtler\"]};\n\n        &:hover {\n            cursor: not-allowed;\n        }\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    // Chrome, Safari, Edge, Opera\n    &::-webkit-outer-spin-button,\n    &::-webkit-inner-spin-button {\n        -webkit-appearance: none;\n        margin: 0;\n    }\n\n    // Safari (remove top shadow)\n    --webkit-appearance: none;\n\n    // Firefox\n    --moz-appearance: textfield;\n`;\n\nexport const baseInputHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const divider = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n`;\n\nexport const dividerHover = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const inputContainer = css`\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-4\"]};\n`;\n\nexport const inputSizerBase = css`\n    display: inline-block;\n    position: relative;\n\n    &::after {\n        ${Font[\"body-baseline-regular\"]}\n        visibility: hidden;\n        pointer-events: none;\n        white-space: pre;\n    }\n`;\n\nexport const dayInputSizer = css`\n    &::after {\n        content: \"DD\";\n    }\n`;\n\nexport const monthInputSizer = css`\n    &::after {\n        content: \"MM\";\n    }\n`;\n\nexport const yearInputSizer = css`\n    &::after {\n        content: \"YYYY\";\n    }\n`;\n\nexport const placeholder = css`\n    ${Font[\"body-baseline-regular\"]}\n    background-color: ${Colour[\"bg\"]};\n    color: ${Colour[\"text-subtler\"]};\n    position: absolute;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    height: 100%;\n`;\n\nexport const placeholderDisabled = css`\n    background-color: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n`;\n\nexport const placeholderHide = css`\n    display: none;\n`;\n"],"names":["inputSection","baseInput","baseInputHover","divider","dividerHover","inputContainer","inputSizerBase","dayInputSizer","monthInputSizer","yearInputSizer","placeholder","placeholderDisabled","placeholderHide"],"mappings":"+FAOO,MAAMA,EAAY,UAQZC,EAAS,WAyCTC,EAAc,WAIdC,EAAO,WAKPC,EAAY,WAIZC,EAAc,WAMdC,EAAc,UAYdC,EAAa,WAMbC,EAAe,UAMfC,EAAc,WAMdC,EAAW,WAWXC,EAAmB,UAKnBC,EAAe"}

package/{cjs/shared/standalone-date-input/standalone-date-input.styles_1mqophx.css → shared/standalone-date-input/standalone-date-input.styles_1m0da43.css}

@@ -1,14 +1,13 @@
 .i48x656{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:relative;-webkit-flex:1;-ms-flex:1;flex:1;}
 .b11lxf0g{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);display:block;background:transparent;border:none;outline:none;box-shadow:none;padding:0;margin:0;text-align:center;position:absolute;inset:0;--webkit-appearance:none;--moz-appearance:textfield;}.b11lxf0g:disabled{color:var(--fds-colour-text-subtler);}.b11lxf0g:disabled:hover{cursor:not-allowed;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-webkit-outer-spin-button,.b11lxf0g::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}.b11lxf0g::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::-moz-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.b11lxf0g::placeholder{color:var(--fds-colour-text-subtler);}
 .b1owk99f{color:var(--fds-colour-text-subtler);}
-.d1hrb2q6{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
-.d1ednuur{color:var(--fds-colour-text);}
-.d12gn07d{color:var(--fds-colour-text-subtler);}
-.iay8f6w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-4);}
-.i1tizbfo{display:inline-block;position:relative;}.i1tizbfo::after{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);visibility:hidden;pointer-events:none;white-space:pre;}
-.d8v7mt3::after{content:"DD";}
-.m1nfq8ts::after{content:"MM";}
-.y1kizbwh::after{content:"YYYY";}
-.pzrktuq{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);background-color:var(--fds-colour-bg);color:var(--fds-colour-text-subtler);position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;}
-.p1jcopfd{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
-.p10ypbkc{display:none;}
+.d1hrb2q6{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}
+.d1ednuur{color:var(--fds-colour-text-subtler);}
+.i12gn07d{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-4);}
+.iay8f6w{display:inline-block;position:relative;}.iay8f6w::after{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);visibility:hidden;pointer-events:none;white-space:pre;}
+.d1tizbfo::after{content:"DD";}
+.m8v7mt3::after{content:"MM";}
+.y1nfq8ts::after{content:"YYYY";}
+.p1kizbwh{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);background-color:var(--fds-colour-bg);color:var(--fds-colour-text-subtler);position:absolute;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:100%;}
+.pzrktuq{background-color:var(--fds-colour-bg-disabled);cursor:not-allowed;}
+.p1jcopfd{display:none;}

package/shared/time-slot/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./time-slot";
+export * from "./types";