@lifesg/react-design-system 4.0.0-alpha.6 → 4.0.0-alpha.8

package/cjs/local-nav/local-nav-menu/local-nav-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\n/**\n * A sidebar navigation list that highlights the currently selected section.\n *\n * Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"uPAQA,MA8GaA,OAAeC,QAAMC,YA9GhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPS,UACAH,GAAcI,EAAAA,iBACjBC,SAEDZ,MAAA,MAAA,CACIJ,UAAWiB,EAAAA,eACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAAAA,IAACwB,EAAAA,WAAWC,OAAM,CACd7B,UAAW8B,EAAAA,UACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}
+{"version":3,"file":"local-nav-menu.js","sources":["../../../../src/local-nav/local-nav-menu/local-nav-menu.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport { Typography } from \"../../typography\";\nimport type { LocalNavMenuItemComponentProps } from \"../internal-types\";\nimport type { LocalNavMenuProps } from \"../types\";\nimport * as styles from \"./local-nav-menu.styles\";\n\nconst Component = (\n    {\n        onNavItemSelect,\n        items,\n        selectedItemIndex,\n        id,\n        \"data-testid\": dataTestId,\n        className,\n        renderItem,\n    }: LocalNavMenuProps,\n    ref: React.Ref<HTMLUListElement>\n): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const localNavMenuId = dataTestId || \"local-nav-menu\";\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // ============================================================================\n    const handleNavItemKeyDown = (\n        e: React.KeyboardEvent<HTMLElement>,\n        handleClick: (\n            e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>\n        ) => void\n    ) => {\n        const { key } = e;\n\n        if (key === \"Enter\" || key === \" \") {\n            e.preventDefault();\n            handleClick(e);\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderLocalNavItem = ({\n        handleClick,\n        isSelected,\n        item,\n        renderItem,\n        index,\n    }: LocalNavMenuItemComponentProps) => {\n        const { id, title } = item;\n\n        const renderTitle = () => {\n            if (renderItem) {\n                return renderItem(item, { selected: isSelected });\n            }\n            return (\n                <Typography.BodyBL\n                    className={styles.textLabel}\n                    weight={isSelected ? \"semibold\" : \"regular\"}\n                >\n                    {title}\n                </Typography.BodyBL>\n            );\n        };\n\n        return (\n            <li\n                id={id}\n                key={index}\n                className={clsx(\n                    styles.navItem,\n                    isSelected && styles.navItemSelected\n                )}\n            >\n                <div\n                    className={styles.navItemContent}\n                    role=\"link\"\n                    onClick={handleClick}\n                    onKeyDown={(e) => handleNavItemKeyDown(e, handleClick)}\n                    tabIndex={0}\n                    aria-current={isSelected ? true : undefined}\n                >\n                    {renderTitle()}\n                </div>\n            </li>\n        );\n    };\n    return (\n        <ul\n            ref={ref}\n            id={id}\n            className={clsx(styles.nav, className)}\n            data-testid={localNavMenuId}\n        >\n            {items.map((item, i) => {\n                const isSelected = i === selectedItemIndex;\n                return renderLocalNavItem({\n                    handleClick: (e) => onNavItemSelect(e, item, i),\n                    isSelected,\n                    item,\n                    renderItem,\n                    index: i,\n                });\n            })}\n        </ul>\n    );\n};\n\n// @catalog\n/**\n * A sidebar navigation list that highlights the currently selected section.\n *\n * Use `LocalNavMenu` for desktop in-page navigation where the list is always\n * visible.\n */\nexport const LocalNavMenu = React.forwardRef(Component);\n"],"names":["LocalNavMenu","React","forwardRef","onNavItemSelect","items","selectedItemIndex","id","dataTestId","className","renderItem","ref","localNavMenuId","_jsx","clsx","styles.nav","map","item","i","handleClick","isSelected","index","title","styles.navItem","styles.navItemSelected","children","styles.navItemContent","role","onClick","onKeyDown","e","key","preventDefault","handleNavItemKeyDown","tabIndex","undefined","selected","Typography","BodyBL","styles.textLabel","weight","renderLocalNavItem"],"mappings":"uPAQA,MA+GaA,OAAeC,QAAMC,YA/GhB,EAEVC,kBACAC,QACAC,oBACAC,KACA,cAAeC,EACfC,YACAC,cAEJC,KAKA,MAAMC,EAAiBJ,GAAc,iBAoErC,OACIK,EAAAA,IAAA,KAAA,CACIF,IAAKA,EACLJ,GAAIA,EACJE,UAAWK,EAAAA,QAAKC,EAAAA,IAAYN,GAAU,cACzBG,WAEZP,EAAMW,KAAI,CAACC,EAAMC,IApDC,GACvBC,cACAC,aACAH,OACAP,aACAW,YAEA,MAAMd,GAAEA,EAAEe,MAAEA,GAAUL,EAgBtB,OACIJ,EAAAA,IAAA,KAAA,CACIN,GAAIA,EAEJE,UAAWK,EAAAA,QACPS,UACAH,GAAcI,EAAAA,iBACjBC,SAEDZ,MAAA,MAAA,CACIJ,UAAWiB,EAAAA,eACXC,KAAK,OACLC,QAAST,EACTU,UAAYC,GAtDC,EACzBA,EACAX,KAIA,MAAMY,IAAEA,GAAQD,EAEJ,UAARC,GAA2B,MAARA,IACnBD,EAAEE,iBACFb,EAAYW,GAChB,EA2C8BG,CAAqBH,EAAGX,GAC1Ce,SAAU,EAAC,iBACGd,QAAoBe,EAASV,SA5B/Cf,EACOA,EAAWO,EAAM,CAAEmB,SAAUhB,IAGpCP,EAAAA,IAACwB,EAAAA,WAAWC,OAAM,CACd7B,UAAW8B,EAAAA,UACXC,OAAQpB,EAAa,WAAa,UAASK,SAE1CH,OAQAD,EAgBJ,EAYMoB,CAAmB,CACtBtB,YAAcW,GAAM1B,EAAgB0B,EAAGb,EAAMC,GAC7CE,WAHeF,IAAMZ,EAIrBW,OACAP,aACAW,MAAOH,OAGd"}

package/cjs/markup/markup.js.map

@@ -1 +1 @@
-{"version":3,"file":"markup.js","sources":["../../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { generateFontProperties } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n        props;\n\n    const containerRef = useRef<HTMLDivElement | HTMLSpanElement>(null);\n    const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n    const fontDeclarations = useMemo(() => {\n        if (!baseTextSize) {\n            return undefined;\n        }\n\n        return generateFontProperties(baseTextSize, \"regular\");\n    }, [baseTextSize]);\n\n    const appliedStyles = useMemo(\n        () => ({\n            color: baseTextColor || null,\n            ...fontDeclarations,\n        }),\n        [baseTextColor, fontDeclarations]\n    );\n\n    useApplyStyle(containerRef, appliedStyles);\n\n    const mergedClassName = clsx(\n        styles.baseMarkup,\n        baseTextSize && styles.sizedMarkup,\n        className\n    );\n\n    const ElementTag = inline ? \"span\" : \"div\";\n\n    return (\n        <ElementTag\n            ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n            className={mergedClassName}\n            {...otherProps}\n        />\n    );\n};\n\n/**\n * A container for rendering rich HTML markup.\n *\n * Use `Markup` to wrap CMS-generated or sanitised HTML content while applying\n * a consistent base font size and colour.\n */\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","ElementTag","_jsx"],"mappings":"m1BAUA,MAmDaA,EAASC,EAAAA,YAnDJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EAAAA,OACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAAA,OAAyC,MACxDC,EAAYC,EAAAA,SAAQ,IAAMC,EAAAA,UAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,EAAAA,SAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAAA,uBAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,EAAAA,SAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBW,IAEP,CAACX,EAAeW,IAGpBM,EAAAA,cAAcX,EAAcO,GAE5B,MAAMK,EAAkBC,EAAAA,QACpBC,EAAAA,WACAnB,GAAgBoB,EAAAA,YAChBlB,GAGEmB,EAAapB,EAAS,OAAS,MAErC,OACIqB,MAACD,EAAUR,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWe,GACPd,GACN"}
+{"version":3,"file":"markup.js","sources":["../../../src/markup/markup.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { forwardRef, useMemo, useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { generateFontProperties } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./markup.style\";\nimport type { MarkupProps } from \"./types\";\n\nconst Component = (props: MarkupProps, ref: React.Ref<HTMLDivElement>) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const { baseTextColor, baseTextSize, inline, className, ...otherProps } =\n        props;\n\n    const containerRef = useRef<HTMLDivElement | HTMLSpanElement>(null);\n    const mergedRef = useMemo(() => mergeRefs(containerRef, ref), [ref]);\n\n    const fontDeclarations = useMemo(() => {\n        if (!baseTextSize) {\n            return undefined;\n        }\n\n        return generateFontProperties(baseTextSize, \"regular\");\n    }, [baseTextSize]);\n\n    const appliedStyles = useMemo(\n        () => ({\n            color: baseTextColor || null,\n            ...fontDeclarations,\n        }),\n        [baseTextColor, fontDeclarations]\n    );\n\n    useApplyStyle(containerRef, appliedStyles);\n\n    const mergedClassName = clsx(\n        styles.baseMarkup,\n        baseTextSize && styles.sizedMarkup,\n        className\n    );\n\n    const ElementTag = inline ? \"span\" : \"div\";\n\n    return (\n        <ElementTag\n            ref={mergedRef as React.Ref<HTMLDivElement & HTMLSpanElement>}\n            className={mergedClassName}\n            {...otherProps}\n        />\n    );\n};\n\n// @catalog\n/**\n * A container for rendering rich HTML markup.\n *\n * Use `Markup` to wrap CMS-generated or sanitised HTML content while applying\n * a consistent base font size and colour.\n */\nexport const Markup = forwardRef(Component);\n"],"names":["Markup","forwardRef","props","ref","baseTextColor","baseTextSize","inline","className","otherProps","__rest","containerRef","useRef","mergedRef","useMemo","mergeRefs","fontDeclarations","generateFontProperties","appliedStyles","Object","assign","color","useApplyStyle","mergedClassName","clsx","styles.baseMarkup","styles.sizedMarkup","ElementTag","_jsx"],"mappings":"m1BAUA,MAoDaA,EAASC,EAAAA,YApDJ,CAACC,EAAoBC,KAInC,MAAMC,cAAEA,EAAaC,aAAEA,EAAYC,OAAEA,EAAMC,UAAEA,GACzCL,EADuDM,EAAUC,EAAAA,OACjEP,EADE,CAAA,gBAAA,eAAA,SAAA,cAGAQ,EAAeC,EAAAA,OAAyC,MACxDC,EAAYC,EAAAA,SAAQ,IAAMC,EAAAA,UAAUJ,EAAcP,IAAM,CAACA,IAEzDY,EAAmBF,EAAAA,SAAQ,KAC7B,GAAKR,EAIL,OAAOW,EAAAA,uBAAuBX,EAAc,UAAU,GACvD,CAACA,IAEEY,EAAgBJ,EAAAA,SAClB,IAAMK,OAAAC,OAAA,CACFC,MAAOhB,GAAiB,MACrBW,IAEP,CAACX,EAAeW,IAGpBM,EAAAA,cAAcX,EAAcO,GAE5B,MAAMK,EAAkBC,EAAAA,QACpBC,EAAAA,WACAnB,GAAgBoB,EAAAA,YAChBlB,GAGEmB,EAAapB,EAAS,OAAS,MAErC,OACIqB,MAACD,EAAUR,OAAAC,OAAA,CACPhB,IAAKS,EACLL,UAAWe,GACPd,GACN"}

package/cjs/masked-input/masked-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"masked-input.js","sources":["../../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./masked-input.styles\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n    {\n        value,\n        readOnly,\n        \"data-testid\": dataTestId,\n        maskRange,\n        unmaskRange,\n        maskRegex,\n        maskTransformer,\n        iconMask = <EyeSlashIcon />,\n        iconUnmask = <EyeIcon />,\n        iconActiveColor: maskIconActiveColor,\n        iconInactiveColor: maskIconInactiveColor,\n        maskChar = \"•\",\n        error,\n        disableMask,\n        transformInput,\n        loadState,\n        onMask,\n        onUnmask,\n        onChange,\n        onFocus,\n        onBlur,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: MaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isEmptyReadOnlyState = readOnly && isEmpty(value);\n    const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n    const [updatedValue, setUpdatedValue] = useState<string>(value || \"\");\n    const internalId = useId();\n    const valueId = `${otherProps.id ?? internalId}-value`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const tryAgainRef = useRef<HTMLButtonElement>(null);\n    const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n    const iconContainerRef = useRef<HTMLDivElement>(null);\n    const isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    useApplyStyle(iconContainerRef, {\n        [styles.tokens.iconContainer.inactiveColor]: maskIconInactiveColor,\n        [styles.tokens.iconContainer.activeColor]: maskIconActiveColor,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setUpdatedValue(value || \"\");\n    }, [value]);\n\n    useEffect(() => {\n        if (!readOnly) return;\n\n        if (loadState === \"fail\") {\n            tryAgainRef.current?.focus();\n        }\n\n        if (loadState === \"success\") {\n            readOnlyButtonRef.current?.focus();\n        }\n    }, [readOnly, loadState]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(false);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(true);\n        onBlur?.(event!);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        let value = event.target.value;\n\n        switch (transformInput) {\n            case \"uppercase\":\n                value = value.toUpperCase();\n                break;\n            case \"lowercase\":\n                value = value.toLowerCase();\n                break;\n            default:\n                break;\n        }\n\n        setUpdatedValue(value);\n        event.target.value = value;\n        onChange?.(event);\n    };\n\n    const handleTryAgain = () => {\n        if (readOnly) {\n            onTryAgain?.();\n        }\n    };\n\n    const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n    };\n\n    const handleToggleMask = () => {\n        const nextMasked = !isMasked;\n\n        toggleMasking(nextMasked);\n\n        if (!nextMasked) {\n            inputRef.current?.focus();\n            return;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const toggleMasking = (mask: boolean) => {\n        if (isMaskedRef.current === mask) return;\n\n        isMaskedRef.current = mask;\n        setIsMasked(mask);\n\n        if (mask) {\n            onMask?.();\n        } else {\n            onUnmask?.();\n        }\n    };\n\n    const getValue = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        return isMasked && !disableMask\n            ? StringHelper.maskValue(updatedValue, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : updatedValue;\n    };\n\n    const shouldDisableMasking = () =>\n        !updatedValue?.toString().length || disableMask;\n\n    const getValueDescription = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        if (isMasked && !disableMask) {\n            const desc = StringHelper.getMaskedDescription(\n                updatedValue,\n                \"masked\",\n                maskRange\n            );\n\n            return desc || \"Masked value\";\n        }\n\n        return updatedValue;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        if (isEmptyReadOnlyState) {\n            return <></>;\n        }\n\n        const isDisabled = shouldDisableMasking();\n\n        return (\n            <div\n                ref={iconContainerRef}\n                className={clsx(\n                    styles.iconContainer,\n                    isDisabled && styles.iconContainerDisabled\n                )}\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </div>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <button\n                    ref={readOnlyButtonRef}\n                    className={styles.readOnlyClickable}\n                    data-testid=\"masked-input-readonly-button\"\n                    onClick={!isButtonDisabled ? handleToggleMask : undefined}\n                    type=\"button\"\n                    aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n                    aria-disabled={isButtonDisabled}\n                >\n                    <span className={styles.readOnlyValueText}>\n                        {getValue()}\n                    </span>\n                    {!isButtonDisabled && (\n                        <span className={styles.readOnlyIconContainer}>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </span>\n                    )}\n                </button>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <BasicButton\n                            ref={tryAgainRef}\n                            className={styles.clickableErrorWrapper}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <span className={styles.errorTextContainer}>\n                                <ExclamationTriangleIcon\n                                    className={styles.errorIcon}\n                                />\n                                <span className={styles.errorLabel}>Error</span>\n                            </span>\n                            <span className={styles.tryAgainLabel}>\n                                Try again?\n                            </span>\n                        </BasicButton>\n                    );\n                case \"loading\":\n                    return (\n                        <div className={styles.loadingWrapper}>\n                            <ComponentLoadingSpinner\n                                className={styles.spinner}\n                            />\n                            <Typography.BodyBL className={styles.loadingLabel}>\n                                Retrieving...\n                            </Typography.BodyBL>\n                        </div>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroup\n                ref={inputRef}\n                className={clsx(styles.inputGroupWrapper, className)}\n                data-testid={`${dataTestId || \"masked-input\"}${\n                    isMasked ? \"-masked\" : \"-unmasked\"\n                }`}\n                addon={{\n                    type: \"custom\",\n                    attributes: {\n                        children: renderIcon(),\n                    },\n                    position: \"right\",\n                }}\n                onFocus={!readOnly ? handleFocus : undefined}\n                onBlur={!readOnly ? handleBlur : undefined}\n                onClick={readOnly ? handleToggleMask : undefined}\n                onChange={handleChange}\n                value={getValue()}\n                readOnly={readOnly}\n                error={error}\n                {...otherProps}\n            />\n        );\n    };\n\n    return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\n/**\n * A text input that masks sensitive values and allows toggling visibility.\n *\n * Use `MaskedInput` when collecting or displaying sensitive data such as\n * identity numbers or passwords.\n */\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","iconContainerRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useApplyStyle","styles.tokens","iconContainer","inactiveColor","activeColor","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","clsx","styles.iconContainer","styles.iconContainerDisabled","onMouseDown","undefined","onClick","children","_jsxs","BasicButton","styles.clickableErrorWrapper","type","styles.errorTextContainer","ExclamationTriangleIcon","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","styles.loadingWrapper","ComponentLoadingSpinner","styles.spinner","Typography","BodyBL","styles.loadingLabel","isButtonDisabled","VisuallyHidden","styles.readOnlyClickable","concatIds","styles.readOnlyValueText","styles.readOnlyIconContainer","renderReadOnlyButton","InputGroup","Object","assign","styles.inputGroupWrapper","addon","attributes","position","renderElement"],"mappings":"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"}
+{"version":3,"file":"masked-input.js","sources":["../../../src/masked-input/masked-input.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport clsx from \"clsx\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { InputGroup } from \"../input-group\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { BasicButton } from \"../shared/input-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./masked-input.styles\";\nimport type { MaskedInputProps } from \"./types\";\n\nconst Component = (\n    {\n        value,\n        readOnly,\n        \"data-testid\": dataTestId,\n        maskRange,\n        unmaskRange,\n        maskRegex,\n        maskTransformer,\n        iconMask = <EyeSlashIcon />,\n        iconUnmask = <EyeIcon />,\n        iconActiveColor: maskIconActiveColor,\n        iconInactiveColor: maskIconInactiveColor,\n        maskChar = \"•\",\n        error,\n        disableMask,\n        transformInput,\n        loadState,\n        onMask,\n        onUnmask,\n        onChange,\n        onFocus,\n        onBlur,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: MaskedInputProps,\n    ref: React.Ref<HTMLInputElement>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const isEmptyReadOnlyState = readOnly && isEmpty(value);\n    const [isMasked, setIsMasked] = useState<boolean>(!disableMask);\n    const [updatedValue, setUpdatedValue] = useState<string>(value || \"\");\n    const internalId = useId();\n    const valueId = `${otherProps.id ?? internalId}-value`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const tryAgainRef = useRef<HTMLButtonElement>(null);\n    const readOnlyButtonRef = useRef<HTMLButtonElement>(null);\n    const iconContainerRef = useRef<HTMLDivElement>(null);\n    const isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\n\n    useApplyStyle(iconContainerRef, {\n        [styles.tokens.iconContainer.inactiveColor]: maskIconInactiveColor,\n        [styles.tokens.iconContainer.activeColor]: maskIconActiveColor,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setUpdatedValue(value || \"\");\n    }, [value]);\n\n    useEffect(() => {\n        if (!readOnly) return;\n\n        if (loadState === \"fail\") {\n            tryAgainRef.current?.focus();\n        }\n\n        if (loadState === \"success\") {\n            readOnlyButtonRef.current?.focus();\n        }\n    }, [readOnly, loadState]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(false);\n        onFocus?.(event);\n    };\n\n    const handleBlur = (event?: React.FocusEvent<HTMLInputElement>) => {\n        toggleMasking(true);\n        onBlur?.(event!);\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        let value = event.target.value;\n\n        switch (transformInput) {\n            case \"uppercase\":\n                value = value.toUpperCase();\n                break;\n            case \"lowercase\":\n                value = value.toLowerCase();\n                break;\n            default:\n                break;\n        }\n\n        setUpdatedValue(value);\n        event.target.value = value;\n        onChange?.(event);\n    };\n\n    const handleTryAgain = () => {\n        if (readOnly) {\n            onTryAgain?.();\n        }\n    };\n\n    const handleIconMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\n        event.preventDefault();\n    };\n\n    const handleToggleMask = () => {\n        const nextMasked = !isMasked;\n\n        toggleMasking(nextMasked);\n\n        if (!nextMasked) {\n            inputRef.current?.focus();\n            return;\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const toggleMasking = (mask: boolean) => {\n        if (isMaskedRef.current === mask) return;\n\n        isMaskedRef.current = mask;\n        setIsMasked(mask);\n\n        if (mask) {\n            onMask?.();\n        } else {\n            onUnmask?.();\n        }\n    };\n\n    const getValue = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        return isMasked && !disableMask\n            ? StringHelper.maskValue(updatedValue, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : updatedValue;\n    };\n\n    const shouldDisableMasking = () =>\n        !updatedValue?.toString().length || disableMask;\n\n    const getValueDescription = () => {\n        if (isEmptyReadOnlyState) {\n            return \"-\";\n        }\n\n        if (isMasked && !disableMask) {\n            const desc = StringHelper.getMaskedDescription(\n                updatedValue,\n                \"masked\",\n                maskRange\n            );\n\n            return desc || \"Masked value\";\n        }\n\n        return updatedValue;\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        if (isEmptyReadOnlyState) {\n            return <></>;\n        }\n\n        const isDisabled = shouldDisableMasking();\n\n        return (\n            <div\n                ref={iconContainerRef}\n                className={clsx(\n                    styles.iconContainer,\n                    isDisabled && styles.iconContainerDisabled\n                )}\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </div>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <button\n                    ref={readOnlyButtonRef}\n                    className={styles.readOnlyClickable}\n                    data-testid=\"masked-input-readonly-button\"\n                    onClick={!isButtonDisabled ? handleToggleMask : undefined}\n                    type=\"button\"\n                    aria-labelledby={concatIds(valueId, ariaLabelledBy)}\n                    aria-disabled={isButtonDisabled}\n                >\n                    <span className={styles.readOnlyValueText}>\n                        {getValue()}\n                    </span>\n                    {!isButtonDisabled && (\n                        <span className={styles.readOnlyIconContainer}>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </span>\n                    )}\n                </button>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <BasicButton\n                            ref={tryAgainRef}\n                            className={styles.clickableErrorWrapper}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <span className={styles.errorTextContainer}>\n                                <ExclamationTriangleIcon\n                                    className={styles.errorIcon}\n                                />\n                                <span className={styles.errorLabel}>Error</span>\n                            </span>\n                            <span className={styles.tryAgainLabel}>\n                                Try again?\n                            </span>\n                        </BasicButton>\n                    );\n                case \"loading\":\n                    return (\n                        <div className={styles.loadingWrapper}>\n                            <ComponentLoadingSpinner\n                                className={styles.spinner}\n                            />\n                            <Typography.BodyBL className={styles.loadingLabel}>\n                                Retrieving...\n                            </Typography.BodyBL>\n                        </div>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroup\n                ref={inputRef}\n                className={clsx(styles.inputGroupWrapper, className)}\n                data-testid={`${dataTestId || \"masked-input\"}${\n                    isMasked ? \"-masked\" : \"-unmasked\"\n                }`}\n                addon={{\n                    type: \"custom\",\n                    attributes: {\n                        children: renderIcon(),\n                    },\n                    position: \"right\",\n                }}\n                onFocus={!readOnly ? handleFocus : undefined}\n                onBlur={!readOnly ? handleBlur : undefined}\n                onClick={readOnly ? handleToggleMask : undefined}\n                onChange={handleChange}\n                value={getValue()}\n                readOnly={readOnly}\n                error={error}\n                {...otherProps}\n            />\n        );\n    };\n\n    return <div aria-busy={loadState === \"loading\"}>{renderElement()}</div>;\n};\n\n// @catalog\n/**\n * A text input that masks sensitive values and allows toggling visibility.\n *\n * Use `MaskedInput` when collecting or displaying sensitive data such as\n * identity numbers or passwords.\n */\nexport const MaskedInput = React.forwardRef(Component);\n"],"names":["MaskedInput","React","forwardRef","_a","ref","value","readOnly","dataTestId","maskRange","unmaskRange","maskRegex","maskTransformer","iconMask","_jsx","EyeSlashIcon","iconUnmask","EyeIcon","iconActiveColor","maskIconActiveColor","iconInactiveColor","maskIconInactiveColor","maskChar","error","disableMask","transformInput","loadState","onMask","onUnmask","onChange","onFocus","onBlur","onTryAgain","className","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","iconContainerRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","useApplyStyle","styles.tokens","iconContainer","inactiveColor","activeColor","useEffect","focus","handleFocus","event","toggleMasking","handleBlur","handleChange","target","toUpperCase","toLowerCase","handleTryAgain","handleIconMouseDown","preventDefault","handleToggleMask","nextMasked","mask","getValue","StringHelper","maskValue","shouldDisableMasking","toString","length","getValueDescription","getMaskedDescription","renderIcon","isDisabled","clsx","styles.iconContainer","styles.iconContainerDisabled","onMouseDown","undefined","onClick","children","_jsxs","BasicButton","styles.clickableErrorWrapper","type","styles.errorTextContainer","ExclamationTriangleIcon","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","styles.loadingWrapper","ComponentLoadingSpinner","styles.spinner","Typography","BodyBL","styles.loadingLabel","isButtonDisabled","VisuallyHidden","styles.readOnlyClickable","concatIds","styles.readOnlyValueText","styles.readOnlyIconContainer","renderReadOnlyButton","InputGroup","Object","assign","styles.inputGroupWrapper","addon","attributes","position","renderElement"],"mappings":"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"}

package/cjs/masthead/masthead.js.map

@@ -1 +1 @@
-{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const { mode } = useTheme();\n    const isDarkMode = mode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\n/**\n * Displays the Singapore Government Design System (SGDS) masthead banner.\n *\n * Use `Masthead` at the top of government digital services to meet the SGDS\n * masthead requirement.\n */\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"4wBAUA,MAuEaA,EAAWC,EAAAA,MAvEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,aACXC,EAAsB,SAATF,EAKnBG,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB1B,GAAW2B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IAeJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}
+{"version":3,"file":"masthead.js","sources":["../../../src/masthead/masthead.tsx"],"sourcesContent":["import \"@govtechsg/sgds-web-component/themes/day.css\";\nimport \"@govtechsg/sgds-web-component/themes/night.css\";\n\nimport clsx from \"clsx\";\nimport { memo, useEffect } from \"react\";\n\nimport { useTheme } from \"../theme\";\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const { mode } = useTheme();\n    const isDarkMode = mode === \"dark\";\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        if (!doAssetsExist()) {\n            addAssets();\n        }\n    }, []);\n\n    useEffect(() => {\n        // SGDS dark mode only takes effect when this class is set on the :root element\n        if (isDarkMode) {\n            document.documentElement.classList.add(SGDS_THEME_NIGHT_CLASSNAME);\n        } else {\n            document.documentElement.classList.remove(\n                SGDS_THEME_NIGHT_CLASSNAME\n            );\n        }\n    }, [isDarkMode]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const doAssetsExist = () => {\n        return document.getElementById(SCRIPT_ID);\n    };\n\n    const addAssets = () => {\n        if (!document.getElementById(SCRIPT_ID)) {\n            const script = document.createElement(\"script\");\n            script.id = SCRIPT_ID;\n            script.type = \"module\";\n            script.src = SCRIPT_SRC;\n\n            document.head.appendChild(script);\n        }\n    };\n\n    const createContent = () => {\n        /**\n         * Note: Had to use this method because we had to create a\n         * custom type to handle Web Components (refer to this guide\n         * https://blog.devgenius.io/how-to-use-web-components-in-react-54c951399bfd)\n         * But we are having troubles exporting the custom type definition\n         * via rollup\n         */\n        return { __html: \"<sgds-masthead></sgds-masthead>\" };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    return (\n        <div\n            className={clsx(styles.wrapper, stretch && styles.wrapperStretch)}\n            dangerouslySetInnerHTML={createContent()}\n        />\n    );\n};\n\n// @catalog\n/**\n * Displays the Singapore Government Design System (SGDS) masthead banner.\n *\n * Use `Masthead` at the top of government digital services to meet the SGDS\n * masthead requirement.\n */\nexport const Masthead = memo(MastheadComponent);\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst SCRIPT_ID = \"lifesg-ds-masthead-script\";\nconst SCRIPT_SRC =\n    \"https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js\";\nconst SGDS_THEME_NIGHT_CLASSNAME = \"sgds-night-theme\";\n"],"names":["Masthead","memo","stretch","mode","useTheme","isDarkMode","useEffect","doAssetsExist","addAssets","document","documentElement","classList","add","SGDS_THEME_NIGHT_CLASSNAME","remove","getElementById","SCRIPT_ID","script","createElement","id","type","src","SCRIPT_SRC","head","appendChild","_jsx","className","clsx","styles.wrapper","styles.wrapperStretch","dangerouslySetInnerHTML","__html"],"mappings":"4wBAUA,MAwEaA,EAAWC,EAAAA,MAxEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,aACXC,EAAsB,SAATF,EAKnBG,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFD,EACAI,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACR,IAKJ,MAAME,EAAgB,IACXE,SAASM,eAAeC,GAG7BR,EAAY,KACd,IAAKC,SAASM,eAAeC,GAAY,CACrC,MAAMC,EAASR,SAASS,cAAc,UACtCD,EAAOE,GAAKH,EACZC,EAAOG,KAAO,SACdH,EAAOI,IAAMC,EAEbb,SAASc,KAAKC,YAAYP,EAC9B,GAkBJ,OACIQ,aACIC,UAAWC,EAAAA,QAAKC,EAAAA,QAAgB1B,GAAW2B,kBAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IAgBJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/cjs/menu/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/menu/menu.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\n\nimport type { PopoverRenderProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { MenuContent } from \"./menu-content\";\nimport { MenuItem } from \"./menu-item\";\nimport { MenuLink } from \"./menu-link\";\nimport { MenuSection } from \"./menu-section\";\nimport type { MenuContentProps, MenuProps } from \"./types\";\n\n/**\n * Trigger wrapper that anchors a `Menu.Content` panel to its child element.\n *\n * Prefer the `Menu` composite export when building a full menu — it bundles\n * `Menu.Content`, `Menu.Section`, `Menu.Item`, and `Menu.Link` as named\n * sub-components alongside the trigger.\n */\nexport const MenuTrigger = ({\n    children,\n    position = \"bottom-start\",\n    menuContent,\n    \"data-testid\": testId = \"menu\",\n    ...otherProps\n}: MenuProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <PopoverTrigger\n            position={position}\n            popoverContent={(renderProps: PopoverRenderProps) =>\n                cloneElement<MenuContentProps>(menuContent, {\n                    overflow: renderProps.overflow,\n                    maxHeight: renderProps.maxHeight,\n                })\n            }\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n        </PopoverTrigger>\n    );\n};\n\n/**\n * A popover-anchored menu composed of sections and interactive items.\n *\n * Use `Menu` when a trigger element should open a floating panel of actions or\n * navigation links.\n *\n * Sub-components:\n * - `Menu.Content` — the floating panel that contains menu sections.\n * - `Menu.Item` — a non-anchor interactive list item with a primary label and optional sub-label.\n * - `Menu.Link` — an anchor (`<a>`) list item styled as a menu entry.\n * - `Menu.Section` — a grouping container for `Menu.Item` and `Menu.Link` entries.\n */\nexport const Menu = Object.assign(MenuTrigger, {\n    /** Renders the floating panel that contains menu sections. */\n    Content: MenuContent,\n    /** Renders a non-anchor interactive list item with a primary label and optional sub-label. */\n    Item: MenuItem,\n    /** Renders an anchor (`<a>`) list item styled as a menu entry. */\n    Link: MenuLink,\n    /** Groups related menu entries. */\n    Section: MenuSection,\n});\n"],"names":["MenuTrigger","_a","children","position","menuContent","testId","otherProps","__rest","_jsx","PopoverTrigger","popoverContent","renderProps","cloneElement","overflow","maxHeight","Menu","Object","assign","Content","MenuContent","Item","MenuItem","Link","MenuLink","Section","MenuSection"],"mappings":"qjCAiBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAA,OAAAN,EALW,qDAUxB,OACIO,MAACC,EAAAA,8BACGN,SAAUA,EACVO,eAAiBC,GACbC,EAAAA,aAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAgBZa,EAAOC,OAAOC,OAAOjB,EAAa,CAE3CkB,QAASC,EAAAA,YAETC,KAAMC,EAAAA,SAENC,KAAMC,EAAAA,SAENC,QAASC,EAAAA"}
+{"version":3,"file":"menu.js","sources":["../../../src/menu/menu.tsx"],"sourcesContent":["import { cloneElement } from \"react\";\n\nimport type { PopoverRenderProps } from \"../popover\";\nimport { PopoverTrigger } from \"../popover\";\nimport { MenuContent } from \"./menu-content\";\nimport { MenuItem } from \"./menu-item\";\nimport { MenuLink } from \"./menu-link\";\nimport { MenuSection } from \"./menu-section\";\nimport type { MenuContentProps, MenuProps } from \"./types\";\n\n/**\n * Trigger wrapper that anchors a `Menu.Content` panel to its child element.\n *\n * Prefer the `Menu` composite export when building a full menu — it bundles\n * `Menu.Content`, `Menu.Section`, `Menu.Item`, and `Menu.Link` as named\n * sub-components alongside the trigger.\n */\nexport const MenuTrigger = ({\n    children,\n    position = \"bottom-start\",\n    menuContent,\n    \"data-testid\": testId = \"menu\",\n    ...otherProps\n}: MenuProps): JSX.Element => {\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <PopoverTrigger\n            position={position}\n            popoverContent={(renderProps: PopoverRenderProps) =>\n                cloneElement<MenuContentProps>(menuContent, {\n                    overflow: renderProps.overflow,\n                    maxHeight: renderProps.maxHeight,\n                })\n            }\n            data-testid={testId}\n            {...otherProps}\n        >\n            {children}\n        </PopoverTrigger>\n    );\n};\n\n// @catalog\n/**\n * A popover-anchored menu composed of sections and interactive items.\n *\n * Use `Menu` when a trigger element should open a floating panel of actions or\n * navigation links.\n *\n * Sub-components:\n * - `Menu.Content` — the floating panel that contains menu sections.\n * - `Menu.Item` — a non-anchor interactive list item with a primary label and optional sub-label.\n * - `Menu.Link` — an anchor (`<a>`) list item styled as a menu entry.\n * - `Menu.Section` — a grouping container for `Menu.Item` and `Menu.Link` entries.\n */\nexport const Menu = Object.assign(MenuTrigger, {\n    /** Renders the floating panel that contains menu sections. */\n    Content: MenuContent,\n    /** Renders a non-anchor interactive list item with a primary label and optional sub-label. */\n    Item: MenuItem,\n    /** Renders an anchor (`<a>`) list item styled as a menu entry. */\n    Link: MenuLink,\n    /** Groups related menu entries. */\n    Section: MenuSection,\n});\n"],"names":["MenuTrigger","_a","children","position","menuContent","testId","otherProps","__rest","_jsx","PopoverTrigger","popoverContent","renderProps","cloneElement","overflow","maxHeight","Menu","Object","assign","Content","MenuContent","Item","MenuItem","Link","MenuLink","Section","MenuSection"],"mappings":"qjCAiBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAA,OAAAN,EALW,qDAUxB,OACIO,MAACC,EAAAA,8BACGN,SAAUA,EACVO,eAAiBC,GACbC,EAAAA,aAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAiBZa,EAAOC,OAAOC,OAAOjB,EAAa,CAE3CkB,QAASC,EAAAA,YAETC,KAAMC,EAAAA,SAENC,KAAMC,EAAAA,SAENC,QAASC,EAAAA"}

package/cjs/modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/modal/index.ts"],"sourcesContent":["import { Modal as Base } from \"./modal\";\nimport { ModalBox as Box } from \"./modal-box\";\n\n/**\n * A full-screen overlay modal with a slide animation.\n *\n * Use `Modal` to present content that requires the user's immediate attention\n * or a focused interaction. Use `ModalV2` for built-in scroll handling and improved accessibility.\n *\n * Sub-components:\n * - `Modal.Box` — a styled content box with an optional close button.\n */\nexport const Modal = Object.assign(Base, {\n    /**\n     * A styled content container for use inside `Modal`. Renders an optional\n     * close button and stops click events from propagating to the overlay.\n     */\n    Box,\n});\n\nexport * from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"2EAYaA,EAAQC,OAAOC,OAAOC,QAAM,KAKrCC,EAAAA"}
+{"version":3,"file":"index.js","sources":["../../../src/modal/index.ts"],"sourcesContent":["import { Modal as Base } from \"./modal\";\nimport { ModalBox as Box } from \"./modal-box\";\n\n// @catalog\n/**\n * A full-screen overlay modal with a slide animation.\n *\n * Use `Modal` to present content that requires the user's immediate attention\n * or a focused interaction. Use `ModalV2` for built-in scroll handling and improved accessibility.\n *\n * Sub-components:\n * - `Modal.Box` — a styled content box with an optional close button.\n */\nexport const Modal = Object.assign(Base, {\n    /**\n     * A styled content container for use inside `Modal`. Renders an optional\n     * close button and stops click events from propagating to the overlay.\n     */\n    Box,\n});\n\nexport * from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"2EAaaA,EAAQC,OAAOC,OAAOC,QAAM,KAKrCC,EAAAA"}

package/cjs/modal-v2/modal-v2.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n\n/**\n * A composable modal dialog with slot-based content layout.\n *\n * Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n *\n * Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n */\nexport const ModalV2 = Object.assign(Base, {\n    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. */\n    Card,\n    /** Renders an accessible close button that invokes the modal's `onClose` callback. */\n    CloseButton,\n    /** Container for the body content of the modal card. */\n    Content,\n    /** Footer area for primary and secondary action buttons. */\n    Footer,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer"],"mappings":"gkCAmBA,MA6HaA,EAAUC,OAAOC,QA7HhBC,QAAAC,GACVA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAA,OAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,EAAAA,UAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACF3B,GAAY4B,UAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAAA,IAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,UAAKC,EAAAA,UAAkB1C,GAAUX,SAE5CiD,MAACK,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAAAA,IAACQ,uBAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWiD,EAAAA,gBAAsB5D,SAClCiD,MAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,EAAAA,wBAEVpC,eAOnB,GAgByB,MAEvCqC,EAAAA,iBAEAC,EAAAA,oBAEAC,EAAAA,eAEAC,EAAAA"}
+{"version":3,"file":"modal-v2.js","sources":["../../../src/modal-v2/modal-v2.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport { ModalContext } from \"./modal-context\";\nimport * as styles from \"./modal-v2.styles\";\nimport { Card, CloseButton, Content, Footer } from \"./slots\";\nimport type { ModalV2Props } from \"./types\";\n\nconst Base = ({\n    id,\n    show,\n    onClose,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    \"data-testid\": testId = \"modal\",\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    disableInitialFocus = false,\n    className,\n    ...otherProps\n}: ModalV2Props): JSX.Element => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n    const { verticalHeight } = useViewport({\n        enabled: show,\n        onBeforeStart: dismissKeyboard,\n    });\n    const childRef = useRef<HTMLDivElement>(null);\n    const containerRef = useRef<HTMLDivElement>(null);\n    const childWithRef =\n        children && React.cloneElement(children, { ref: childRef });\n\n    useApplyStyle(containerRef, {\n        [styles.tokens.container.verticalHeight]:\n            verticalHeight == null ? null : `${verticalHeight}px`,\n    });\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { refs, context } = useFloating({\n        open: show,\n        onOpenChange: (isOpen) => {\n            if (!isOpen) {\n                onClose?.();\n            }\n        },\n    });\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 300,\n    });\n    const dismiss = useDismiss(context, {\n        /* handled by overlayclick */\n        outsidePress: false,\n        enabled: !!onClose,\n    });\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={show}\n            enableOverlayClick={enableOverlayClick}\n            onOverlayClick={onOverlayClick}\n            id={id}\n            rootId={rootComponentId}\n            containerRef={childRef}\n            zIndex={zIndex}\n        >\n            <div\n                ref={containerRef}\n                data-testid={testId}\n                data-status={status}\n                data-animation-from={animationFrom}\n                {...otherProps}\n                className={clsx(styles.container, className)}\n            >\n                <ModalContext.Provider value={{ onClose }}>\n                    {isMounted && (\n                        <FloatingFocusManager\n                            context={context}\n                            initialFocus={\n                                disableInitialFocus ? -1 : refs.floating\n                            }\n                        >\n                            <div className={styles.scrollContainer}>\n                                <div\n                                    ref={refs.setFloating}\n                                    {...getFloatingProps()}\n                                    role=\"dialog\"\n                                    aria-label={ariaLabel}\n                                    aria-labelledby={ariaLabelledBy}\n                                    aria-describedby={ariaDescribedBy}\n                                    className={styles.modalContainer}\n                                >\n                                    {childWithRef}\n                                </div>\n                            </div>\n                        </FloatingFocusManager>\n                    )}\n                </ModalContext.Provider>\n            </div>\n        </Overlay>\n    );\n};\n\n// @catalog\n/**\n * A composable modal dialog with slot-based content layout.\n *\n * Use `ModalV2` when you need a controlled overlay dialog with structured\n * content slots.\n *\n * Sub-components:\n * - `ModalV2.Card` — wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout.\n * - `ModalV2.CloseButton` — renders an accessible close button that invokes the modal's `onClose` callback.\n * - `ModalV2.Content` — container for the body content of the modal card.\n * - `ModalV2.Footer` — footer area for primary and secondary action buttons.\n */\nexport const ModalV2 = Object.assign(Base, {\n    /** Wraps modal content and arranges `Content`, `Footer`, and `CloseButton` slots in the correct layout. */\n    Card,\n    /** Renders an accessible close button that invokes the modal's `onClose` callback. */\n    CloseButton,\n    /** Container for the body content of the modal card. */\n    Content,\n    /** Footer area for primary and secondary action buttons. */\n    Footer,\n});\n"],"names":["ModalV2","Object","assign","_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","getFloatingProps","useInteractions","_jsx","Overlay","rootId","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer","Card","CloseButton","Content","Footer"],"mappings":"gkCAmBA,MA8HaA,EAAUC,OAAOC,QA9HhBC,QAAAC,GACVA,EAAEC,KACFA,EAAIC,QACJA,EAAOC,cACPA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EACxB,cAAeC,EAAS,QACxB,aAAcC,EACd,kBAAmBC,EACnB,mBAAoBC,EAAeC,oBACnCA,GAAsB,EAAKC,UAC3BA,GAAShB,EACNiB,EAAUC,EAAAA,OAAAlB,EAjBH,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBV,MAAMmB,EAAkBC,EAAAA,UAAS,aACzBV,YACAW,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAvB,OAAA,EAAAA,EAAEwB,6BAC7C,KAEEC,eAAEA,GAAmBC,cAAY,CACnCC,QAASzB,EACT0B,cAAeT,IAEbU,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACF3B,GAAY4B,UAAMC,aAAa7B,EAAU,CAAE8B,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUb,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAM3C,MAAMc,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMxC,EACNyC,aAAeC,IACNA,GACDzC,SAAAA,GACJ,KAGF0C,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdxB,UAAWxB,KAETiD,iBAAEA,GAAqBC,kBAAgB,CAACJ,IAK9C,OACIK,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG5C,YAChBT,KAAMA,EACNI,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJuD,OAAQjD,EACRwB,aAAcF,EACdrB,OAAQA,EAAMH,SAEdiD,EAAAA,IAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAWyC,UAAKC,EAAAA,UAAkB1C,GAAUX,SAE5CiD,MAACK,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE1D,WAASE,SACpCwC,GACGS,EAAAA,IAACQ,uBAAoB,CACjBtB,QAASA,EACTuB,aACIhD,GAAsB,EAAKwB,EAAKyB,SAAQ3D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWiD,EAAAA,gBAAsB5D,SAClCiD,MAAA,MAAAxD,OAAAC,OAAA,CACIoC,IAAKI,EAAK2B,aACNd,IAAkB,CACtBe,KAAK,SAAQ,aACDvD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWoD,EAAAA,wBAEVpC,eAOnB,GAiByB,MAEvCqC,EAAAA,iBAEAC,EAAAA,oBAEAC,EAAAA,eAEAC,EAAAA"}

package/cjs/navbar/navbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar.js","sources":["../../../src/navbar/navbar.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    Breakpoint,\n    parsePxOrRemValue,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport * as styles from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n    BrandType,\n    DrawerDismissalMethod,\n    NavbarActionButtonsProps,\n    NavbarButtonProps,\n    NavbarDrawerApi,\n    NavbarDrawerHandle,\n    NavbarProps,\n    NavItemCommonProps,\n    NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n    {\n        items,\n        className,\n        id,\n        selectedId,\n        compress = false,\n        fixed = true,\n        resources,\n        hideNavElements = false,\n        hideNavBranding = false,\n        hideLinkIndicator = false,\n        drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n        actionButtons,\n        onItemClick,\n        onActionButtonClick,\n        onBrandClick,\n        masthead = true,\n        layout = \"default\",\n        headerLabel = \"Main navigation menu\",\n        drawerLabel,\n        ...otherProps\n    }: NavbarProps<T>,\n    ref: React.Ref<NavbarDrawerHandle>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showDrawer, setShowDrawer] = useState<boolean>(false);\n    const [showOverlay, setShowOverlay] = useState<boolean>(false);\n    const mobileMenuRef = useRef<HTMLButtonElement>(null);\n    const isStretch = layout === \"stretch\";\n    const elementRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const defaultResource = getDefaultResourceLogo(theme?.theme);\n    const tabletWidth = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    const primary = resources?.primary || defaultResource.primary;\n    const secondary = resources?.secondary;\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, NavbarDrawerApi>(\n                elementRef.current!,\n                {\n                    dismissDrawer: () => {\n                        dismissDrawer();\n                    },\n                }\n            ),\n        [showDrawer]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const dismissDrawer = () => {\n        setShowDrawer(false);\n        setTimeout(() => {\n            setShowOverlay(false);\n        }, 550); // For drawer animation to complete + buffer\n    };\n\n    const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n        return (\n            showDrawer &&\n            blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n        );\n    };\n\n    const hasCollapsibleActionButtons = (\n        actionButtons: NavbarActionButtonsProps\n    ) => {\n        const drawerActionButtons =\n            actionButtons.mobile || actionButtons.desktop;\n        if (drawerActionButtons) {\n            return (\n                drawerActionButtons.length &&\n                drawerActionButtons.some(\n                    (actionButton) => !actionButton.uncollapsible\n                )\n            );\n        }\n\n        return false;\n    };\n\n    // =============================================================================\n    // EVENT HANDLER\n    // =============================================================================\n    const handleResize = () => {\n        if (window.innerWidth <= tabletWidth && showDrawer) {\n            dismissDrawer();\n        }\n    };\n\n    const handleBrandClick = (\n        _event: React.MouseEvent<HTMLAnchorElement>,\n        type: BrandType\n    ) => {\n        if (onBrandClick) {\n            onBrandClick(type);\n        }\n\n        if (shouldDismissDrawer(\"brand-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleNavItemClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<K> | NavItemCommonProps<K>\n    ) => {\n        if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item);\n        }\n\n        if (\n            NavbarHelper.isNavItemLink(item) &&\n            !item.subMenu &&\n            shouldDismissDrawer(\"item-click\")\n        ) {\n            dismissDrawer();\n        }\n    };\n\n    const handleActionButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => {\n        if (\n            (actionButton.type === \"button\" ||\n                actionButton.type === \"download\") &&\n            actionButton.args?.onClick\n        ) {\n            actionButton.args.onClick(\n                event as React.MouseEvent<HTMLButtonElement>\n            );\n        } else if (onActionButtonClick) {\n            event.preventDefault();\n            onActionButtonClick(actionButton);\n        }\n\n        if (shouldDismissDrawer(\"item-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleMobileMenuButtonClick = () => {\n        setShowDrawer(true);\n        setShowOverlay(true);\n    };\n\n    const handleDrawerClose = () => {\n        if (shouldDismissDrawer(\"close-button-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDrawer = () => (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={handleDrawerClose}\n        >\n            <Drawer\n                show={showDrawer}\n                resources={{ primary, secondary }}\n                onClose={handleDrawerClose}\n                onBrandClick={handleBrandClick}\n                actionButtons={actionButtons}\n                hideNavBranding={hideNavBranding}\n                mobileMenuRef={mobileMenuRef}\n                drawerLabel={drawerLabel}\n            >\n                <NavbarItems\n                    items={items.mobile || items.desktop}\n                    onItemClick={handleNavItemClick}\n                    selectedId={selectedId}\n                    mobile\n                    hideLinkIndicator={hideLinkIndicator}\n                />\n                <NavbarActionButtons\n                    actionButtons={actionButtons}\n                    onActionButtonClick={handleActionButtonClick}\n                    mobile\n                />\n            </Drawer>\n        </Overlay>\n    );\n\n    const renderBrand = () => (\n        <div\n            className={clsx(\n                styles.navBrandContainer,\n                compress\n                    ? styles.navBrandContainerCompressed\n                    : styles.navBrandContainerFull,\n                styles.navBrandContainerResponsive\n            )}\n            data-id=\"brand-container\"\n        >\n            {primary && (\n                <Brand\n                    resources={primary}\n                    onClick={handleBrandClick}\n                    data-id=\"brand-primary\"\n                    data-testid=\"main__brand\"\n                    type=\"primary\"\n                />\n            )}\n            {secondary && (\n                <>\n                    <div\n                        className={clsx(\n                            styles.navSeparator,\n                            compress\n                                ? styles.navSeparatorCompressed\n                                : styles.navSeparatorFull,\n                            styles.navSeparatorResponsive\n                        )}\n                    />\n                    <Brand\n                        resources={secondary}\n                        onClick={handleBrandClick}\n                        data-id=\"brand-secondary\"\n                        data-testid=\"main__brand-secondary\"\n                        type=\"secondary\"\n                    />\n                </>\n            )}\n        </div>\n    );\n\n    const renderMobileMenuButton = () => {\n        const drawerItems = items.mobile || items.desktop;\n        if (\n            (drawerItems && drawerItems.length > 0) ||\n            (actionButtons && hasCollapsibleActionButtons(actionButtons))\n        ) {\n            return (\n                <ClickableIcon\n                    ref={mobileMenuRef}\n                    className={styles.mobileMenuButton}\n                    aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n                    aria-expanded={showDrawer}\n                    data-testid=\"button__mobile-menu\"\n                    onClick={handleMobileMenuButtonClick}\n                    focusHighlight={true}\n                >\n                    <MenuIcon className={styles.mobileMenuIcon} />\n                </ClickableIcon>\n            );\n        }\n\n        return null;\n    };\n\n    const renderNavbar = () => {\n        return (\n            <Layout.Content stretch={isStretch}>\n                <nav\n                    className={clsx(\n                        styles.nav,\n                        compress && styles.navCompressed,\n                        theme?.mode === \"dark\" && styles.navDark\n                    )}\n                    aria-label={headerLabel}\n                >\n                    {!hideNavBranding && renderBrand()}\n                    {!hideNavElements && (\n                        <div\n                            className={clsx(\n                                styles.navElementsContainer,\n                                !hideNavBranding &&\n                                    styles.navElementsContainerWithBranding\n                            )}\n                        >\n                            <NavbarItems\n                                items={items.desktop}\n                                onItemClick={handleNavItemClick}\n                                selectedId={selectedId}\n                                hideNavBranding={hideNavBranding}\n                                hideLinkIndicator={hideLinkIndicator}\n                            />\n                            <NavbarActionButtons\n                                actionButtons={actionButtons}\n                                onActionButtonClick={handleActionButtonClick}\n                            />\n                            {renderMobileMenuButton()}\n                        </div>\n                    )}\n                </nav>\n\n                {!hideNavElements && renderDrawer()}\n            </Layout.Content>\n        );\n    };\n\n    return (\n        <div\n            ref={elementRef}\n            className={clsx(\n                styles.wrapper,\n                fixed ? styles.wrapperFixed : styles.wrapperRelative,\n                theme?.mode === \"dark\"\n                    ? styles.wrapperDark\n                    : styles.wrapperLight,\n                className\n            )}\n            id={id || \"navbar-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"navbar-wrapper\"}\n        >\n            {masthead && <Masthead stretch={isStretch} />}\n            {renderNavbar()}\n        </div>\n    );\n};\n\n/**\n * The main site navigation bar with desktop and mobile drawer views.\n *\n * Use `Navbar` to render the primary navigation header. It displays brand\n * logos, navigation items, and action buttons in a desktop bar, and\n * automatically collapses items into a slide-in drawer for mobile viewports.\n */\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidth","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}
+{"version":3,"file":"navbar.js","sources":["../../../src/navbar/navbar.tsx"],"sourcesContent":["import { MenuIcon } from \"@lifesg/react-icons/menu\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Masthead } from \"../masthead/masthead\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport {\n    Breakpoint,\n    parsePxOrRemValue,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Brand } from \"./brand\";\nimport { Drawer } from \"./drawer\";\nimport * as styles from \"./navbar.styles\";\nimport { NavbarActionButtons } from \"./navbar-action-buttons\";\nimport { NavbarHelper } from \"./navbar-helper\";\nimport { NavbarItems } from \"./navbar-items\";\nimport { getDefaultResourceLogo } from \"./navbar-logo-data\";\nimport type {\n    BrandType,\n    DrawerDismissalMethod,\n    NavbarActionButtonsProps,\n    NavbarButtonProps,\n    NavbarDrawerApi,\n    NavbarDrawerHandle,\n    NavbarProps,\n    NavItemCommonProps,\n    NavItemProps,\n} from \"./types\";\n\nconst Component = <T,>(\n    {\n        items,\n        className,\n        id,\n        selectedId,\n        compress = false,\n        fixed = true,\n        resources,\n        hideNavElements = false,\n        hideNavBranding = false,\n        hideLinkIndicator = false,\n        drawerDismissalExclusions: blockDrawerDismissalMethods = [],\n        actionButtons,\n        onItemClick,\n        onActionButtonClick,\n        onBrandClick,\n        masthead = true,\n        layout = \"default\",\n        headerLabel = \"Main navigation menu\",\n        drawerLabel,\n        ...otherProps\n    }: NavbarProps<T>,\n    ref: React.Ref<NavbarDrawerHandle>\n) => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [showDrawer, setShowDrawer] = useState<boolean>(false);\n    const [showOverlay, setShowOverlay] = useState<boolean>(false);\n    const mobileMenuRef = useRef<HTMLButtonElement>(null);\n    const isStretch = layout === \"stretch\";\n    const elementRef = useRef<HTMLDivElement>(null);\n    const theme = useContext(ThemeContext);\n    const defaultResource = getDefaultResourceLogo(theme?.theme);\n    const tabletWidth = parsePxOrRemValue(\n        useResolvedBreakpointToken(Breakpoint[\"lg-max\"])\n    );\n\n    const primary = resources?.primary || defaultResource.primary;\n    const secondary = resources?.secondary;\n\n    useImperativeHandle(\n        ref,\n        () =>\n            Object.assign<HTMLDivElement, NavbarDrawerApi>(\n                elementRef.current!,\n                {\n                    dismissDrawer: () => {\n                        dismissDrawer();\n                    },\n                }\n            ),\n        [showDrawer]\n    );\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        handleResize();\n        window.addEventListener(\"resize\", handleResize);\n\n        return () => {\n            window.removeEventListener(\"resize\", handleResize);\n        };\n    }, []);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const dismissDrawer = () => {\n        setShowDrawer(false);\n        setTimeout(() => {\n            setShowOverlay(false);\n        }, 550); // For drawer animation to complete + buffer\n    };\n\n    const shouldDismissDrawer = (dismissalMethod: DrawerDismissalMethod) => {\n        return (\n            showDrawer &&\n            blockDrawerDismissalMethods.indexOf(dismissalMethod) === -1\n        );\n    };\n\n    const hasCollapsibleActionButtons = (\n        actionButtons: NavbarActionButtonsProps\n    ) => {\n        const drawerActionButtons =\n            actionButtons.mobile || actionButtons.desktop;\n        if (drawerActionButtons) {\n            return (\n                drawerActionButtons.length &&\n                drawerActionButtons.some(\n                    (actionButton) => !actionButton.uncollapsible\n                )\n            );\n        }\n\n        return false;\n    };\n\n    // =============================================================================\n    // EVENT HANDLER\n    // =============================================================================\n    const handleResize = () => {\n        if (window.innerWidth <= tabletWidth && showDrawer) {\n            dismissDrawer();\n        }\n    };\n\n    const handleBrandClick = (\n        _event: React.MouseEvent<HTMLAnchorElement>,\n        type: BrandType\n    ) => {\n        if (onBrandClick) {\n            onBrandClick(type);\n        }\n\n        if (shouldDismissDrawer(\"brand-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleNavItemClick = <K extends T>(\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<K> | NavItemCommonProps<K>\n    ) => {\n        if (NavbarHelper.isNavItemCommon(item) && item.onClick) {\n            item.onClick(event);\n        } else if (onItemClick) {\n            event.preventDefault();\n            onItemClick(item);\n        }\n\n        if (\n            NavbarHelper.isNavItemLink(item) &&\n            !item.subMenu &&\n            shouldDismissDrawer(\"item-click\")\n        ) {\n            dismissDrawer();\n        }\n    };\n\n    const handleActionButtonClick = (\n        event: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<Element>,\n        actionButton: NavbarButtonProps\n    ) => {\n        if (\n            (actionButton.type === \"button\" ||\n                actionButton.type === \"download\") &&\n            actionButton.args?.onClick\n        ) {\n            actionButton.args.onClick(\n                event as React.MouseEvent<HTMLButtonElement>\n            );\n        } else if (onActionButtonClick) {\n            event.preventDefault();\n            onActionButtonClick(actionButton);\n        }\n\n        if (shouldDismissDrawer(\"item-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    const handleMobileMenuButtonClick = () => {\n        setShowDrawer(true);\n        setShowOverlay(true);\n    };\n\n    const handleDrawerClose = () => {\n        if (shouldDismissDrawer(\"close-button-click\")) {\n            dismissDrawer();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n\n    const renderDrawer = () => (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={handleDrawerClose}\n        >\n            <Drawer\n                show={showDrawer}\n                resources={{ primary, secondary }}\n                onClose={handleDrawerClose}\n                onBrandClick={handleBrandClick}\n                actionButtons={actionButtons}\n                hideNavBranding={hideNavBranding}\n                mobileMenuRef={mobileMenuRef}\n                drawerLabel={drawerLabel}\n            >\n                <NavbarItems\n                    items={items.mobile || items.desktop}\n                    onItemClick={handleNavItemClick}\n                    selectedId={selectedId}\n                    mobile\n                    hideLinkIndicator={hideLinkIndicator}\n                />\n                <NavbarActionButtons\n                    actionButtons={actionButtons}\n                    onActionButtonClick={handleActionButtonClick}\n                    mobile\n                />\n            </Drawer>\n        </Overlay>\n    );\n\n    const renderBrand = () => (\n        <div\n            className={clsx(\n                styles.navBrandContainer,\n                compress\n                    ? styles.navBrandContainerCompressed\n                    : styles.navBrandContainerFull,\n                styles.navBrandContainerResponsive\n            )}\n            data-id=\"brand-container\"\n        >\n            {primary && (\n                <Brand\n                    resources={primary}\n                    onClick={handleBrandClick}\n                    data-id=\"brand-primary\"\n                    data-testid=\"main__brand\"\n                    type=\"primary\"\n                />\n            )}\n            {secondary && (\n                <>\n                    <div\n                        className={clsx(\n                            styles.navSeparator,\n                            compress\n                                ? styles.navSeparatorCompressed\n                                : styles.navSeparatorFull,\n                            styles.navSeparatorResponsive\n                        )}\n                    />\n                    <Brand\n                        resources={secondary}\n                        onClick={handleBrandClick}\n                        data-id=\"brand-secondary\"\n                        data-testid=\"main__brand-secondary\"\n                        type=\"secondary\"\n                    />\n                </>\n            )}\n        </div>\n    );\n\n    const renderMobileMenuButton = () => {\n        const drawerItems = items.mobile || items.desktop;\n        if (\n            (drawerItems && drawerItems.length > 0) ||\n            (actionButtons && hasCollapsibleActionButtons(actionButtons))\n        ) {\n            return (\n                <ClickableIcon\n                    ref={mobileMenuRef}\n                    className={styles.mobileMenuButton}\n                    aria-label={showDrawer ? \"Close nav menu\" : \"Open nav menu\"}\n                    aria-expanded={showDrawer}\n                    data-testid=\"button__mobile-menu\"\n                    onClick={handleMobileMenuButtonClick}\n                    focusHighlight={true}\n                >\n                    <MenuIcon className={styles.mobileMenuIcon} />\n                </ClickableIcon>\n            );\n        }\n\n        return null;\n    };\n\n    const renderNavbar = () => {\n        return (\n            <Layout.Content stretch={isStretch}>\n                <nav\n                    className={clsx(\n                        styles.nav,\n                        compress && styles.navCompressed,\n                        theme?.mode === \"dark\" && styles.navDark\n                    )}\n                    aria-label={headerLabel}\n                >\n                    {!hideNavBranding && renderBrand()}\n                    {!hideNavElements && (\n                        <div\n                            className={clsx(\n                                styles.navElementsContainer,\n                                !hideNavBranding &&\n                                    styles.navElementsContainerWithBranding\n                            )}\n                        >\n                            <NavbarItems\n                                items={items.desktop}\n                                onItemClick={handleNavItemClick}\n                                selectedId={selectedId}\n                                hideNavBranding={hideNavBranding}\n                                hideLinkIndicator={hideLinkIndicator}\n                            />\n                            <NavbarActionButtons\n                                actionButtons={actionButtons}\n                                onActionButtonClick={handleActionButtonClick}\n                            />\n                            {renderMobileMenuButton()}\n                        </div>\n                    )}\n                </nav>\n\n                {!hideNavElements && renderDrawer()}\n            </Layout.Content>\n        );\n    };\n\n    return (\n        <div\n            ref={elementRef}\n            className={clsx(\n                styles.wrapper,\n                fixed ? styles.wrapperFixed : styles.wrapperRelative,\n                theme?.mode === \"dark\"\n                    ? styles.wrapperDark\n                    : styles.wrapperLight,\n                className\n            )}\n            id={id || \"navbar-wrapper\"}\n            data-testid={otherProps[\"data-testid\"] || \"navbar-wrapper\"}\n        >\n            {masthead && <Masthead stretch={isStretch} />}\n            {renderNavbar()}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * The main site navigation bar with desktop and mobile drawer views.\n *\n * Use `Navbar` to render the primary navigation header. It displays brand\n * logos, navigation items, and action buttons in a desktop bar, and\n * automatically collapses items into a slide-in drawer for mobile viewports.\n */\nexport const Navbar = forwardRef(Component);\n"],"names":["Navbar","forwardRef","_a","ref","items","className","id","selectedId","compress","fixed","resources","hideNavElements","hideNavBranding","hideLinkIndicator","drawerDismissalExclusions","blockDrawerDismissalMethods","actionButtons","onItemClick","onActionButtonClick","onBrandClick","masthead","layout","headerLabel","drawerLabel","otherProps","__rest","showDrawer","setShowDrawer","useState","showOverlay","setShowOverlay","mobileMenuRef","useRef","isStretch","elementRef","theme","useContext","ThemeContext","defaultResource","getDefaultResourceLogo","tabletWidth","parsePxOrRemValue","useResolvedBreakpointToken","Breakpoint","primary","secondary","useImperativeHandle","Object","assign","current","dismissDrawer","useEffect","handleResize","window","addEventListener","removeEventListener","setTimeout","shouldDismissDrawer","dismissalMethod","indexOf","innerWidth","handleBrandClick","_event","type","handleNavItemClick","event","item","NavbarHelper","isNavItemCommon","onClick","preventDefault","isNavItemLink","subMenu","handleActionButtonClick","actionButton","args","handleMobileMenuButtonClick","handleDrawerClose","renderMobileMenuButton","drawerItems","mobile","desktop","length","drawerActionButtons","some","uncollapsible","hasCollapsibleActionButtons","_jsx","ClickableIcon","styles.mobileMenuButton","focusHighlight","children","MenuIcon","styles.mobileMenuIcon","_jsxs","clsx","styles.wrapper","styles.wrapperFixed","styles.wrapperRelative","mode","styles.wrapperDark","styles.wrapperLight","Masthead","stretch","Layout","Content","styles.nav","styles.navCompressed","styles.navDark","styles.navBrandContainer","styles.navBrandContainerCompressed","styles.navBrandContainerFull","styles.navBrandContainerResponsive","Brand","_Fragment","styles.navSeparator","styles.navSeparatorCompressed","styles.navSeparatorFull","styles.navSeparatorResponsive","styles.navElementsContainer","styles.navElementsContainerWithBranding","NavbarItems","NavbarActionButtons","Overlay","show","enableOverlayClick","onOverlayClick","Drawer","onClose"],"mappings":"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"}

package/cjs/notification-banner/notification-banner.js.map

@@ -1 +1 @@
-{"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    className,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n    const contentTextRef = useRef<HTMLDivElement>(null);\n\n    const isCollapsed =\n        maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n    useApplyStyle(contentTextRef, {\n        [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n            ? formatUnitValue(maxCollapsedHeight, \"px\")\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <ClickableIcon\n            className={styles.dismissButton}\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </ClickableIcon>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <button\n                className={styles.actionButton}\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </button>\n        );\n    };\n\n    const renderContent = () => (\n        <div\n            className={styles.content}\n            data-testid={formatId(\"text-content\", testId)}\n        >\n            <div className={styles.contentWrapper}>\n                <div\n                    ref={contentTextRef}\n                    className={clsx(\n                        styles.contentText,\n                        isCollapsed && styles.contentTextCollapsed\n                    )}\n                >\n                    <div ref={contentRef}>{children}</div>\n                </div>\n                {renderActionButton()}\n            </div>\n        </div>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <VisuallyHidden>\n            <button aria-label={\"Clickable banner\"} type=\"button\" />\n        </VisuallyHidden>\n    );\n\n    return (\n        <div\n            ref={forwardedRef}\n            className={clsx(\n                styles.wrapper,\n                sticky && styles.wrapperSticky,\n                !!onClick && styles.wrapperClickable,\n                className\n            )}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Layout.Content id={formatId(\"container\", id)}>\n                {icon && (\n                    <div className={styles.iconContainer} aria-hidden>\n                        {icon}\n                    </div>\n                )}\n                <div className={styles.contentContainer}>{renderContent()}</div>\n                {dismissible && renderDismissButton()}\n            </Layout.Content>\n            {onClick && renderAccessibleBannerButton()}\n        </div>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n    HTMLAnchorElement,\n    React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n    return (\n        <Typography.LinkBL\n            ref={ref}\n            className={clsx(styles.contentLink, props.className)}\n            {...props}\n        />\n    );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\n\n/**\n * A full-width informational banner that sits at the top of the page.\n *\n * Use `NotificationBanner` to surface important or persistent messages that\n * should remain visible until the user dismisses them.\n */\nexport const NotificationBanner = Object.assign(Base, {\n    /** Renders an inline link styled for use inside a `NotificationBanner`. */\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"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"}
+{"version":3,"file":"notification-banner.js","sources":["../../../src/notification-banner/notification-banner.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { useResizeDetector } from \"react-resize-detector\";\n\nimport { Layout } from \"../layout\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { formatUnitValue, useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./notification-banner.styles\";\nimport type {\n    NotificationBannerProps,\n    NotificationBannerWithForwardedRefProps,\n} from \"./types\";\n\nexport const NBComponent = ({\n    children,\n    visible = true,\n    dismissible = true,\n    sticky = true,\n    onDismiss,\n    id,\n    forwardedRef,\n    maxCollapsedHeight,\n    onClick,\n    actionButton,\n    icon,\n    className,\n    ...otherProps\n}: NotificationBannerWithForwardedRefProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const testId = otherProps[\"data-testid\"];\n\n    const [isVisible, setVisible] = useState<boolean>(visible);\n    const { height: contentHeight = 0, ref: contentRef } = useResizeDetector();\n    const contentTextRef = useRef<HTMLDivElement>(null);\n\n    const isCollapsed =\n        maxCollapsedHeight && contentHeight > maxCollapsedHeight;\n\n    useApplyStyle(contentTextRef, {\n        [styles.tokens.contentText.maxCollapsedHeight]: isCollapsed\n            ? formatUnitValue(maxCollapsedHeight, \"px\")\n            : undefined,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(visible);\n    }, [visible]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = (event: React.MouseEvent<HTMLButtonElement>) => {\n        event.stopPropagation();\n        setVisible(false);\n\n        if (dismissible && onDismiss) onDismiss();\n    };\n\n    const handleActionButtonOnClick = (\n        event: React.MouseEvent<HTMLButtonElement>\n    ) => {\n        if (!actionButton?.onClick) {\n            // let it bubble\n            return;\n        }\n        event.stopPropagation();\n        actionButton.onClick(event);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    if (!isVisible) return null;\n\n    const renderDismissButton = () => (\n        <ClickableIcon\n            className={styles.dismissButton}\n            tabIndex={0}\n            onClick={handleDismiss}\n            id={formatId(\"dismiss-button\", id)}\n            data-testid={formatId(\"dismiss-button\", testId)}\n            focusOutline=\"browser\"\n            focusHighlight={false}\n            type=\"button\"\n            aria-label=\"close\"\n        >\n            <CrossIcon aria-hidden />\n        </ClickableIcon>\n    );\n\n    const renderActionButton = () => {\n        if (!actionButton) return null;\n\n        return (\n            <button\n                className={styles.actionButton}\n                id={formatId(\"action-button\", id)}\n                data-testid={formatId(\"action-button\", testId)}\n                type=\"button\"\n                {...actionButton}\n                onClick={handleActionButtonOnClick}\n            >\n                {actionButton.children}\n            </button>\n        );\n    };\n\n    const renderContent = () => (\n        <div\n            className={styles.content}\n            data-testid={formatId(\"text-content\", testId)}\n        >\n            <div className={styles.contentWrapper}>\n                <div\n                    ref={contentTextRef}\n                    className={clsx(\n                        styles.contentText,\n                        isCollapsed && styles.contentTextCollapsed\n                    )}\n                >\n                    <div ref={contentRef}>{children}</div>\n                </div>\n                {renderActionButton()}\n            </div>\n        </div>\n    );\n\n    const renderAccessibleBannerButton = () => (\n        <VisuallyHidden>\n            <button aria-label={\"Clickable banner\"} type=\"button\" />\n        </VisuallyHidden>\n    );\n\n    return (\n        <div\n            ref={forwardedRef}\n            className={clsx(\n                styles.wrapper,\n                sticky && styles.wrapperSticky,\n                !!onClick && styles.wrapperClickable,\n                className\n            )}\n            onClick={onClick}\n            role=\"region\"\n            {...otherProps}\n        >\n            <Layout.Content id={formatId(\"container\", id)}>\n                {icon && (\n                    <div className={styles.iconContainer} aria-hidden>\n                        {icon}\n                    </div>\n                )}\n                <div className={styles.contentContainer}>{renderContent()}</div>\n                {dismissible && renderDismissButton()}\n            </Layout.Content>\n            {onClick && renderAccessibleBannerButton()}\n        </div>\n    );\n};\n\n/**\n * Intermediate component to handle passing the ref as a prop\n */\nconst NBWithRef = (\n    props: NotificationBannerProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    return <NBComponent {...props} forwardedRef={ref} />;\n};\n\nconst NBLink = React.forwardRef<\n    HTMLAnchorElement,\n    React.ComponentProps<typeof Typography.LinkBL>\n>(function NotificationBannerLink(props, ref) {\n    return (\n        <Typography.LinkBL\n            ref={ref}\n            className={clsx(styles.contentLink, props.className)}\n            {...props}\n        />\n    );\n});\n(NBLink as NamedExoticComponent).displayName = \"NotificationBanner.Link\";\n\n// =============================================================================\n// HELPER FUNCTIONS\n// =============================================================================\nconst formatId = (componentName: string, id = \"wrapper\"): string => {\n    return `${id}-${componentName}`;\n};\n\n// =============================================================================\n// EXPORTABLE\n// =============================================================================\nconst Base = React.forwardRef(NBWithRef);\n(Base as NamedExoticComponent).displayName = \"NotificationBanner\";\n\n// @catalog\n/**\n * A full-width informational banner that sits at the top of the page.\n *\n * Use `NotificationBanner` to surface important or persistent messages that\n * should remain visible until the user dismisses them.\n */\nexport const NotificationBanner = Object.assign(Base, {\n    /** Renders an inline link styled for use inside a `NotificationBanner`. */\n    Link: NBLink,\n});\n"],"names":["NBComponent","_a","children","visible","dismissible","sticky","onDismiss","id","forwardedRef","maxCollapsedHeight","onClick","actionButton","icon","className","otherProps","__rest","testId","isVisible","setVisible","useState","height","contentHeight","ref","contentRef","useResizeDetector","contentTextRef","useRef","isCollapsed","useApplyStyle","styles.tokens","contentText","formatUnitValue","undefined","useEffect","handleDismiss","event","stopPropagation","handleActionButtonOnClick","_jsxs","clsx","styles.wrapper","styles.wrapperSticky","styles.wrapperClickable","role","Layout","Content","formatId","_jsx","styles.iconContainer","styles.contentContainer","styles.content","styles.contentWrapper","styles.contentText","styles.contentTextCollapsed","Object","assign","styles.actionButton","type","ClickableIcon","styles.dismissButton","tabIndex","focusOutline","focusHighlight","CrossIcon","VisuallyHidden","NBLink","React","forwardRef","props","Typography","LinkBL","styles.contentLink","displayName","componentName","Base","NotificationBanner","Link"],"mappings":"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"}

package/cjs/otp-input/otp-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),n=require("react"),a=require("../button/button.js"),i=require("../form/form-label.js"),s=require("../input/input.js"),o=require("../shared/accessibility/index.js"),l=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js"),d=require("../util/string-helper.js");require("@react-aria/live-announcer");var c=require("./otp-input.styles.js"),p=require("./utils.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=f(t);const y=n.forwardRef(((t,f)=>{var{id:y,value:m=[],"data-testid":g,className:j,cooldownDuration:h,actionButtonProps:b,errorMessage:w,numOfInput:x,prefix:O,onChange:C,onCooldownStart:q,onCooldownEnd:$,otpOnly:D,onCountdownChange:T}=t,I=e.__rest(t,["id","value","data-testid","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange"]);const E=null!=b?b:{},{disabled:P,onClick:R,styleType:B="secondary"}=E,N=e.__rest(E,["disabled","onClick","styleType"]),k=n.useRef([]),A=n.useRef(C),[S,_]=n.useState(new Array(x).fill("")),[H,M]=n.useState(h),[F,L]=n.useState(new Date),V=u.useId(),U=!!w,z=`${V}-error`,K=`${V}-timer`;n.useEffect((()=>{var e;return null===(e=null==k?void 0:k.current[0])||void 0===e||e.focus(),document.addEventListener("paste",W),()=>document.removeEventListener("paste",W)}),[]),n.useEffect((()=>{if(0!==h){q&&q();const e=Y();return()=>e()}}),[F]),n.useImperativeHandle(f,(()=>({startCooldown:()=>{L(new Date),M(h)}}))),n.useEffect((()=>{A.current=C}),[C]),n.useEffect((()=>{m.length===x&&_(m)}),[m]);const G=e=>{if(e&&p.validateUserInput(e,x)){const r=e.split("");return _(r),A.current&&A.current(r),!0}return!1},J=e=>r=>{var t;const n=r.target.value,a=S.every((e=>""===e)),i=p.stripOtpFromAutofill(n,x,O);if(a&&G(i))return;const s=n.replace(/[^0-9]/g,"");if(p.validateUserInput(s)){const r=[...S];r[e]=s.substring(s.length-1),null===(t=k.current[e+1])||void 0===t||t.focus(),_(r),C&&C(r)}},Q=e=>r=>{var t,n,a;const{key:i,code:s}=r;if("Backspace"===i||"Backspace"===s){const r=[...S];""!==r[e]?r[e]="":0!==e&&(r[e-1]="",null===(t=k.current[e-1])||void 0===t||t.focus()),_(r),C&&C(r)}else"ArrowRight"===r.code?null===(n=k.current[e+1])||void 0===n||n.focus():"ArrowLeft"===r.code&&(null===(a=k.current[e-1])||void 0===a||a.focus())},W=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=p.stripOtpFromAutofill(r,x,O);G(t)||e.preventDefault()},X=()=>{const e=Date.now(),r=1e3*h;return e<F.valueOf()+r},Y=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*h,n=Math.ceil((F.valueOf()+t-r)/1e3);M(n),n<=0?($&&$(),clearInterval(e)):T&&T(n)}),1e3);return()=>{clearInterval(e)}},Z=(e,r,t)=>t?`${t}-${r}-${e+1}`:`${r}-${e+1}`,ee=e=>`${e} second${1===e?"":"s"}`;return r.jsxs("div",{id:y,"data-testid":g,className:v.default(c.wrapper,j),children:[r.jsxs("div",{className:c.inputContainer,role:"group","aria-label":`${x}-digit OTP input field`,children:[O&&r.jsxs(l.Typography.BodyBL,{as:"span",className:c.prefix,"data-testid":"otp-prefix",weight:"semibold",children:[r.jsx(o.VisuallyHidden,{children:"O T P prefix"}),`${O.value} ${O.separator}`]}),S.map(((e,t)=>r.jsx(s.Input,Object.assign({className:c.inputField,id:Z(t,"otp-input",y),"data-testid":Z(t,"otp-input",g),"aria-label":`${d.StringHelper.formatOrdinal(t+1)} digit`,"aria-invalid":U,"aria-describedby":U?z:void 0,ref:e=>k.current[t]=e,type:"text",inputMode:"numeric",value:e,error:U,onChange:J(t),onKeyDown:Q(t),autoComplete:"off"},I),t)))]}),w&&r.jsx(i.FormErrorMessage,{id:z,"data-testid":"otp-error-message",children:w}),r.jsxs(o.VisuallyHidden,{role:"timer",id:K,children:[ee(H)," remaining"]}),r.jsx(o.VisuallyHidden,{"aria-live":"polite",children:H>0?"":"Ready to resend OTP"}),!D&&r.jsx(a.Button,Object.assign({className:c.ctaButton,styleType:B,type:"button",sizeType:"small"},N,{onClick:e=>{_(new Array(x).fill("")),X()||(L(new Date),M(h)),R&&R(e)},disabled:P||X()},N.children?{children:N.children}:{children:H>0?`Resend OTP in ${ee(H)}`:"Resend OTP","aria-label":H>0?`Resend OTP in ${ee(h)}`:"Resend OTP","aria-describedby":K}))]})}));exports.OtpInput=y;
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),n=require("react"),a=require("../button/button.js"),i=require("../form/form-label/form-label.js"),s=require("../input/input.js"),o=require("../shared/accessibility/index.js"),l=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js"),d=require("../util/string-helper.js");require("@react-aria/live-announcer");var c=require("./otp-input.styles.js"),p=require("./utils.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var v=f(t);const y=n.forwardRef(((t,f)=>{var{id:y,value:m=[],"data-testid":g,className:j,cooldownDuration:h,actionButtonProps:b,errorMessage:w,numOfInput:x,prefix:O,onChange:C,onCooldownStart:q,onCooldownEnd:$,otpOnly:D,onCountdownChange:T}=t,I=e.__rest(t,["id","value","data-testid","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange"]);const E=null!=b?b:{},{disabled:P,onClick:R,styleType:B="secondary"}=E,N=e.__rest(E,["disabled","onClick","styleType"]),k=n.useRef([]),A=n.useRef(C),[S,_]=n.useState(new Array(x).fill("")),[H,M]=n.useState(h),[F,L]=n.useState(new Date),V=u.useId(),U=!!w,z=`${V}-error`,K=`${V}-timer`;n.useEffect((()=>{var e;return null===(e=null==k?void 0:k.current[0])||void 0===e||e.focus(),document.addEventListener("paste",W),()=>document.removeEventListener("paste",W)}),[]),n.useEffect((()=>{if(0!==h){q&&q();const e=Y();return()=>e()}}),[F]),n.useImperativeHandle(f,(()=>({startCooldown:()=>{L(new Date),M(h)}}))),n.useEffect((()=>{A.current=C}),[C]),n.useEffect((()=>{m.length===x&&_(m)}),[m]);const G=e=>{if(e&&p.validateUserInput(e,x)){const r=e.split("");return _(r),A.current&&A.current(r),!0}return!1},J=e=>r=>{var t;const n=r.target.value,a=S.every((e=>""===e)),i=p.stripOtpFromAutofill(n,x,O);if(a&&G(i))return;const s=n.replace(/[^0-9]/g,"");if(p.validateUserInput(s)){const r=[...S];r[e]=s.substring(s.length-1),null===(t=k.current[e+1])||void 0===t||t.focus(),_(r),C&&C(r)}},Q=e=>r=>{var t,n,a;const{key:i,code:s}=r;if("Backspace"===i||"Backspace"===s){const r=[...S];""!==r[e]?r[e]="":0!==e&&(r[e-1]="",null===(t=k.current[e-1])||void 0===t||t.focus()),_(r),C&&C(r)}else"ArrowRight"===r.code?null===(n=k.current[e+1])||void 0===n||n.focus():"ArrowLeft"===r.code&&(null===(a=k.current[e-1])||void 0===a||a.focus())},W=e=>{if(!e.clipboardData)return;const r=e.clipboardData.getData("text"),t=p.stripOtpFromAutofill(r,x,O);G(t)||e.preventDefault()},X=()=>{const e=Date.now(),r=1e3*h;return e<F.valueOf()+r},Y=()=>{const e=setInterval((()=>{const r=Date.now(),t=1e3*h,n=Math.ceil((F.valueOf()+t-r)/1e3);M(n),n<=0?($&&$(),clearInterval(e)):T&&T(n)}),1e3);return()=>{clearInterval(e)}},Z=(e,r,t)=>t?`${t}-${r}-${e+1}`:`${r}-${e+1}`,ee=e=>`${e} second${1===e?"":"s"}`;return r.jsxs("div",{id:y,"data-testid":g,className:v.default(c.wrapper,j),children:[r.jsxs("div",{className:c.inputContainer,role:"group","aria-label":`${x}-digit OTP input field`,children:[O&&r.jsxs(l.Typography.BodyBL,{as:"span",className:c.prefix,"data-testid":"otp-prefix",weight:"semibold",children:[r.jsx(o.VisuallyHidden,{children:"O T P prefix"}),`${O.value} ${O.separator}`]}),S.map(((e,t)=>r.jsx(s.Input,Object.assign({className:c.inputField,id:Z(t,"otp-input",y),"data-testid":Z(t,"otp-input",g),"aria-label":`${d.StringHelper.formatOrdinal(t+1)} digit`,"aria-invalid":U,"aria-describedby":U?z:void 0,ref:e=>k.current[t]=e,type:"text",inputMode:"numeric",value:e,error:U,onChange:J(t),onKeyDown:Q(t),autoComplete:"off"},I),t)))]}),w&&r.jsx(i.FormErrorMessage,{id:z,"data-testid":"otp-error-message",children:w}),r.jsxs(o.VisuallyHidden,{role:"timer",id:K,children:[ee(H)," remaining"]}),r.jsx(o.VisuallyHidden,{"aria-live":"polite",children:H>0?"":"Ready to resend OTP"}),!D&&r.jsx(a.Button,Object.assign({className:c.ctaButton,styleType:B,type:"button",sizeType:"small"},N,{onClick:e=>{_(new Array(x).fill("")),X()||(L(new Date),M(h)),R&&R(e)},disabled:P||X()},N.children?{children:N.children}:{children:H>0?`Resend OTP in ${ee(H)}`:"Resend OTP","aria-label":H>0?`Resend OTP in ${ee(h)}`:"Resend OTP","aria-describedby":K}))]})}));exports.OtpInput=y;
 //# sourceMappingURL=otp-input.js.map

package/cjs/otp-input/otp-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"otp-input.js","sources":["../../../src/otp-input/otp-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { Input } from \"../input\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n    {\n        id,\n        value = [],\n        \"data-testid\": dataTestId,\n        className,\n        cooldownDuration,\n        actionButtonProps,\n        errorMessage,\n        numOfInput,\n        prefix,\n        onChange,\n        onCooldownStart,\n        onCooldownEnd,\n        otpOnly,\n        onCountdownChange,\n        ...otherProps\n    }: OtpInputProps,\n    ref: React.Ref<OtpInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        disabled,\n        onClick,\n        styleType = \"secondary\",\n        ...otherCtaProps\n    } = actionButtonProps ?? {};\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    const onChangeRef = useRef(onChange);\n\n    const [otpValues, setOtpValues] = useState<string[]>(\n        new Array(numOfInput).fill(\"\")\n    );\n    const [countDown, setCountDown] = useState<number>(cooldownDuration);\n    const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n    const internalId = useId();\n\n    const hasError = !!errorMessage;\n    const errorId = `${internalId}-error`;\n    const timerId = `${internalId}-timer`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        inputRefs?.current[0]?.focus();\n        document.addEventListener(\"paste\", handlePaste);\n        return () => document.removeEventListener(\"paste\", handlePaste);\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n    }, [lastCtaTimestamp]);\n\n    useImperativeHandle(ref, () => ({\n        startCooldown: () => {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        },\n    }));\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    useEffect(() => {\n        if (value.length === numOfInput) {\n            setOtpValues(value);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFullValue = (incomingValue: string) => {\n        if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n            const incomingValueArr = incomingValue.split(\"\");\n            setOtpValues(incomingValueArr);\n            if (onChangeRef.current) {\n                onChangeRef.current(incomingValueArr);\n            }\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleChange =\n        (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const eventValue = event.target.value;\n\n            /* handle autofill */\n            const fieldIsEmpty = otpValues.every((num) => num === \"\");\n            const autofillOtp = stripOtpFromAutofill(\n                eventValue,\n                numOfInput,\n                prefix\n            );\n            if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n                return;\n            }\n\n            /* handle normal input */\n            const value = eventValue.replace(/[^0-9]/g, \"\");\n            if (validateUserInput(value)) {\n                const newOtpValues = [...otpValues];\n\n                newOtpValues[index] = value.substring(value.length - 1);\n                inputRefs.current[index + 1]?.focus();\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            }\n        };\n\n    const handleKeyDown =\n        (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const { key, code } = event;\n\n            if (key === \"Backspace\" || code === \"Backspace\") {\n                const newOtpValues = [...otpValues];\n                if (newOtpValues[index] !== \"\") {\n                    newOtpValues[index] = \"\";\n                } else if (index !== 0) {\n                    newOtpValues[index - 1] = \"\";\n                    inputRefs.current[index - 1]?.focus();\n                }\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            } else if (event.code === \"ArrowRight\") {\n                inputRefs.current[index + 1]?.focus();\n            } else if (event.code === \"ArrowLeft\") {\n                inputRefs.current[index - 1]?.focus();\n            }\n        };\n\n    const handlePaste = (event: ClipboardEvent): void => {\n        if (!event.clipboardData) return;\n\n        const pastedValue = event.clipboardData.getData(\"text\");\n        const autofillOtp = stripOtpFromAutofill(\n            pastedValue,\n            numOfInput,\n            prefix\n        );\n        if (!handleInputFullValue(autofillOtp)) {\n            event.preventDefault();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOtpValues(new Array(numOfInput).fill(\"\"));\n\n        if (!isWithinCooldown()) {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isWithinCooldown = (): boolean => {\n        const currentTime = Date.now();\n        const coolDownInMilliseconds = cooldownDuration * 1000;\n\n        return (\n            currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n        );\n    };\n\n    const beginCountdown = () => {\n        const interval = setInterval(() => {\n            const currentTime = Date.now();\n            const coolDownInMilliseconds = cooldownDuration * 1000;\n\n            const timer = Math.ceil(\n                (lastCtaTimestamp.valueOf() +\n                    coolDownInMilliseconds -\n                    currentTime) /\n                    1000\n            );\n            setCountDown(timer);\n            if (timer <= 0) {\n                if (onCooldownEnd) onCooldownEnd();\n                clearInterval(interval);\n            } else if (onCountdownChange) {\n                onCountdownChange(timer);\n            }\n        }, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    };\n\n    const generateId = (index: number, name: string, prefix?: string) => {\n        return prefix\n            ? `${prefix}-${name}-${index + 1}`\n            : `${name}-${index + 1}`;\n    };\n\n    const displaySeconds = (time: number) => {\n        return `${time} second${time === 1 ? \"\" : \"s\"}`;\n    };\n\n    const getCTALabelProps = (): Partial<\n        React.HTMLAttributes<HTMLButtonElement>\n    > => {\n        return otherCtaProps.children\n            ? { children: otherCtaProps.children }\n            : {\n                  children:\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(countDown)}`\n                          : \"Resend OTP\",\n                  // use a fixed label to avoid repeated screen reader updates when the button is focused\n                  \"aria-label\":\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n                          : \"Resend OTP\",\n                  // use a secondary element to reflect the latest countdown\n                  \"aria-describedby\": timerId,\n              };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            className={clsx(styles.wrapper, className)}\n        >\n            <div\n                className={styles.inputContainer}\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Typography.BodyBL\n                        as=\"span\"\n                        className={styles.prefix}\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Typography.BodyBL>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <Input\n                            className={styles.inputField}\n                            id={generateId(index, \"otp-input\", id)}\n                            data-testid={generateId(\n                                index,\n                                \"otp-input\",\n                                dataTestId\n                            )}\n                            aria-label={`${StringHelper.formatOrdinal(\n                                index + 1\n                            )} digit`}\n                            aria-invalid={hasError}\n                            aria-describedby={hasError ? errorId : undefined}\n                            key={index}\n                            ref={(el) => (inputRefs.current[index] = el)}\n                            type=\"text\"\n                            inputMode=\"numeric\"\n                            value={data}\n                            error={hasError}\n                            onChange={handleChange(index)}\n                            onKeyDown={handleKeyDown(index)}\n                            autoComplete=\"off\"\n                            {...otherProps}\n                        />\n                    );\n                })}\n            </div>\n            {errorMessage && (\n                <FormErrorMessage id={errorId} data-testid=\"otp-error-message\">\n                    {errorMessage}\n                </FormErrorMessage>\n            )}\n            {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button */}\n            <VisuallyHidden role=\"timer\" id={timerId}>\n                {displaySeconds(countDown)} remaining\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"polite\">\n                {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n            </VisuallyHidden>\n            {!otpOnly && (\n                <Button\n                    className={styles.ctaButton}\n                    styleType={styleType}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </div>\n    );\n};\n\n/**\n * A field composed of individual inputs for a numeric one-time password\n * with an in-built countdown mechanism.\n *\n * Use `OtpInput` when users must enter the one-time password (OTP)\n * for multi-factored authentication methods.\n */\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","useId","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","clsx","styles.wrapper","children","styles.inputContainer","role","Typography","BodyBL","as","styles.prefix","weight","_jsx","VisuallyHidden","separator","map","data","Input","Object","assign","styles.inputField","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","Button","styles.ctaButton","sizeType"],"mappings":"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"}
+{"version":3,"file":"otp-input.js","sources":["../../../src/otp-input/otp-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport {\n    forwardRef,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { Button } from \"../button\";\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { Input } from \"../input\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId } from \"../util\";\nimport * as styles from \"./otp-input.styles\";\nimport type { OtpInputProps, OtpInputRef } from \"./types\";\nimport { stripOtpFromAutofill, validateUserInput } from \"./utils\";\n\nconst Component = (\n    {\n        id,\n        value = [],\n        \"data-testid\": dataTestId,\n        className,\n        cooldownDuration,\n        actionButtonProps,\n        errorMessage,\n        numOfInput,\n        prefix,\n        onChange,\n        onCooldownStart,\n        onCooldownEnd,\n        otpOnly,\n        onCountdownChange,\n        ...otherProps\n    }: OtpInputProps,\n    ref: React.Ref<OtpInputRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        disabled,\n        onClick,\n        styleType = \"secondary\",\n        ...otherCtaProps\n    } = actionButtonProps ?? {};\n\n    const inputRefs = useRef<(HTMLInputElement | null)[]>([]);\n    const onChangeRef = useRef(onChange);\n\n    const [otpValues, setOtpValues] = useState<string[]>(\n        new Array(numOfInput).fill(\"\")\n    );\n    const [countDown, setCountDown] = useState<number>(cooldownDuration);\n    const [lastCtaTimestamp, setLastCtaTimestamp] = useState<Date>(new Date());\n    const internalId = useId();\n\n    const hasError = !!errorMessage;\n    const errorId = `${internalId}-error`;\n    const timerId = `${internalId}-timer`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        inputRefs?.current[0]?.focus();\n        document.addEventListener(\"paste\", handlePaste);\n        return () => document.removeEventListener(\"paste\", handlePaste);\n    }, []);\n\n    useEffect(() => {\n        if (cooldownDuration !== 0) {\n            if (onCooldownStart) onCooldownStart();\n            const cleanup = beginCountdown();\n\n            return () => cleanup();\n        }\n    }, [lastCtaTimestamp]);\n\n    useImperativeHandle(ref, () => ({\n        startCooldown: () => {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        },\n    }));\n\n    useEffect(() => {\n        onChangeRef.current = onChange;\n    }, [onChange]);\n\n    useEffect(() => {\n        if (value.length === numOfInput) {\n            setOtpValues(value);\n        }\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleInputFullValue = (incomingValue: string) => {\n        if (incomingValue && validateUserInput(incomingValue, numOfInput)) {\n            const incomingValueArr = incomingValue.split(\"\");\n            setOtpValues(incomingValueArr);\n            if (onChangeRef.current) {\n                onChangeRef.current(incomingValueArr);\n            }\n\n            return true;\n        }\n\n        return false;\n    };\n\n    const handleChange =\n        (index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {\n            const eventValue = event.target.value;\n\n            /* handle autofill */\n            const fieldIsEmpty = otpValues.every((num) => num === \"\");\n            const autofillOtp = stripOtpFromAutofill(\n                eventValue,\n                numOfInput,\n                prefix\n            );\n            if (fieldIsEmpty && handleInputFullValue(autofillOtp)) {\n                return;\n            }\n\n            /* handle normal input */\n            const value = eventValue.replace(/[^0-9]/g, \"\");\n            if (validateUserInput(value)) {\n                const newOtpValues = [...otpValues];\n\n                newOtpValues[index] = value.substring(value.length - 1);\n                inputRefs.current[index + 1]?.focus();\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            }\n        };\n\n    const handleKeyDown =\n        (index: number) => (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const { key, code } = event;\n\n            if (key === \"Backspace\" || code === \"Backspace\") {\n                const newOtpValues = [...otpValues];\n                if (newOtpValues[index] !== \"\") {\n                    newOtpValues[index] = \"\";\n                } else if (index !== 0) {\n                    newOtpValues[index - 1] = \"\";\n                    inputRefs.current[index - 1]?.focus();\n                }\n\n                setOtpValues(newOtpValues);\n\n                if (onChange) {\n                    onChange(newOtpValues);\n                }\n            } else if (event.code === \"ArrowRight\") {\n                inputRefs.current[index + 1]?.focus();\n            } else if (event.code === \"ArrowLeft\") {\n                inputRefs.current[index - 1]?.focus();\n            }\n        };\n\n    const handlePaste = (event: ClipboardEvent): void => {\n        if (!event.clipboardData) return;\n\n        const pastedValue = event.clipboardData.getData(\"text\");\n        const autofillOtp = stripOtpFromAutofill(\n            pastedValue,\n            numOfInput,\n            prefix\n        );\n        if (!handleInputFullValue(autofillOtp)) {\n            event.preventDefault();\n        }\n    };\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n        setOtpValues(new Array(numOfInput).fill(\"\"));\n\n        if (!isWithinCooldown()) {\n            setLastCtaTimestamp(new Date());\n            setCountDown(cooldownDuration);\n        }\n\n        if (onClick) {\n            onClick(event);\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const isWithinCooldown = (): boolean => {\n        const currentTime = Date.now();\n        const coolDownInMilliseconds = cooldownDuration * 1000;\n\n        return (\n            currentTime < lastCtaTimestamp.valueOf() + coolDownInMilliseconds\n        );\n    };\n\n    const beginCountdown = () => {\n        const interval = setInterval(() => {\n            const currentTime = Date.now();\n            const coolDownInMilliseconds = cooldownDuration * 1000;\n\n            const timer = Math.ceil(\n                (lastCtaTimestamp.valueOf() +\n                    coolDownInMilliseconds -\n                    currentTime) /\n                    1000\n            );\n            setCountDown(timer);\n            if (timer <= 0) {\n                if (onCooldownEnd) onCooldownEnd();\n                clearInterval(interval);\n            } else if (onCountdownChange) {\n                onCountdownChange(timer);\n            }\n        }, 1000);\n\n        return () => {\n            clearInterval(interval);\n        };\n    };\n\n    const generateId = (index: number, name: string, prefix?: string) => {\n        return prefix\n            ? `${prefix}-${name}-${index + 1}`\n            : `${name}-${index + 1}`;\n    };\n\n    const displaySeconds = (time: number) => {\n        return `${time} second${time === 1 ? \"\" : \"s\"}`;\n    };\n\n    const getCTALabelProps = (): Partial<\n        React.HTMLAttributes<HTMLButtonElement>\n    > => {\n        return otherCtaProps.children\n            ? { children: otherCtaProps.children }\n            : {\n                  children:\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(countDown)}`\n                          : \"Resend OTP\",\n                  // use a fixed label to avoid repeated screen reader updates when the button is focused\n                  \"aria-label\":\n                      countDown > 0\n                          ? `Resend OTP in ${displaySeconds(cooldownDuration)}`\n                          : \"Resend OTP\",\n                  // use a secondary element to reflect the latest countdown\n                  \"aria-describedby\": timerId,\n              };\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            id={id}\n            data-testid={dataTestId}\n            className={clsx(styles.wrapper, className)}\n        >\n            <div\n                className={styles.inputContainer}\n                role=\"group\"\n                aria-label={`${numOfInput}-digit OTP input field`}\n            >\n                {prefix && (\n                    <Typography.BodyBL\n                        as=\"span\"\n                        className={styles.prefix}\n                        data-testid=\"otp-prefix\"\n                        weight=\"semibold\"\n                    >\n                        <VisuallyHidden>O T P prefix</VisuallyHidden>\n                        {`${prefix.value} ${prefix.separator}`}\n                    </Typography.BodyBL>\n                )}\n                {otpValues.map((data, index) => {\n                    return (\n                        <Input\n                            className={styles.inputField}\n                            id={generateId(index, \"otp-input\", id)}\n                            data-testid={generateId(\n                                index,\n                                \"otp-input\",\n                                dataTestId\n                            )}\n                            aria-label={`${StringHelper.formatOrdinal(\n                                index + 1\n                            )} digit`}\n                            aria-invalid={hasError}\n                            aria-describedby={hasError ? errorId : undefined}\n                            key={index}\n                            ref={(el) => (inputRefs.current[index] = el)}\n                            type=\"text\"\n                            inputMode=\"numeric\"\n                            value={data}\n                            error={hasError}\n                            onChange={handleChange(index)}\n                            onKeyDown={handleKeyDown(index)}\n                            autoComplete=\"off\"\n                            {...otherProps}\n                        />\n                    );\n                })}\n            </div>\n            {errorMessage && (\n                <FormErrorMessage id={errorId} data-testid=\"otp-error-message\">\n                    {errorMessage}\n                </FormErrorMessage>\n            )}\n            {/* visually hidden elements need to be rendered before the button so that Voiceover/Chrome doesn't skip the button */}\n            <VisuallyHidden role=\"timer\" id={timerId}>\n                {displaySeconds(countDown)} remaining\n            </VisuallyHidden>\n            <VisuallyHidden aria-live=\"polite\">\n                {countDown > 0 ? \"\" : \"Ready to resend OTP\"}\n            </VisuallyHidden>\n            {!otpOnly && (\n                <Button\n                    className={styles.ctaButton}\n                    styleType={styleType}\n                    type=\"button\"\n                    sizeType=\"small\"\n                    {...otherCtaProps}\n                    onClick={handleClick}\n                    disabled={disabled || isWithinCooldown()}\n                    {...getCTALabelProps()}\n                />\n            )}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A field composed of individual inputs for a numeric one-time password\n * with an in-built countdown mechanism.\n *\n * Use `OtpInput` when users must enter the one-time password (OTP)\n * for multi-factored authentication methods.\n */\nexport const OtpInput = forwardRef(Component);\n"],"names":["OtpInput","forwardRef","_a","ref","id","value","dataTestId","className","cooldownDuration","actionButtonProps","errorMessage","numOfInput","prefix","onChange","onCooldownStart","onCooldownEnd","otpOnly","onCountdownChange","otherProps","__rest","_b","disabled","onClick","styleType","otherCtaProps","inputRefs","useRef","onChangeRef","otpValues","setOtpValues","useState","Array","fill","countDown","setCountDown","lastCtaTimestamp","setLastCtaTimestamp","Date","internalId","useId","hasError","errorId","timerId","useEffect","current","focus","document","addEventListener","handlePaste","removeEventListener","cleanup","beginCountdown","useImperativeHandle","startCooldown","length","handleInputFullValue","incomingValue","validateUserInput","incomingValueArr","split","handleChange","index","event","eventValue","target","fieldIsEmpty","every","num","autofillOtp","stripOtpFromAutofill","replace","newOtpValues","substring","handleKeyDown","key","code","_c","clipboardData","pastedValue","getData","preventDefault","isWithinCooldown","currentTime","now","coolDownInMilliseconds","valueOf","interval","setInterval","timer","Math","ceil","clearInterval","generateId","name","displaySeconds","time","_jsxs","clsx","styles.wrapper","children","styles.inputContainer","role","Typography","BodyBL","as","styles.prefix","weight","_jsx","VisuallyHidden","separator","map","data","Input","Object","assign","styles.inputField","StringHelper","formatOrdinal","undefined","el","type","inputMode","error","onKeyDown","autoComplete","FormErrorMessage","Button","styles.ctaButton","sizeType"],"mappings":"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"}

package/cjs/otp-verification/contact-input-section.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),t=require("clsx"),i=require("../button/button.js"),r=require("../form/form-label.js"),n=require("../input-group/input-group.js"),o=require("../phone-number-input/phone-number-input.js"),d=require("../shared/accessibility/index.js"),l=require("./contact-input-section.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(t);exports.ContactInputSection=({id:t,"data-testid":c,disabled:u,readOnly:p,inputId:b,type:m,sendOtpPlaceholder:v,emailValue:h,onEmailChange:y,phoneNumberValue:I,onPhoneNumberChange:f,fixedCountry:j,isLoading:g,isVerified:x,countdown:C,onSendOtp:q,onStateReset:N,sendOtpError:O,"aria-labelledby":E,"aria-describedby":P})=>{const S=t?`${t}-contact-error`:void 0,W=e=>{N(),"email"===m&&y&&y(e.target.value)},R=e=>{N(),"phone-number"===m&&f&&f(e)},$=e=>{var a;return`Enter your ${null!==(a=null==e?void 0:e.name)&&void 0!==a?a:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs("div",{id:t,"data-testid":c,className:l.contactSectionWrapper,children:[e.jsxs("div",{className:l.contactInputSectionWrapper,children:[e.jsxs("div",{"data-max-width":"email"===m,className:s.default(l.contactInputWrapper,!!O&&l.contactInputWrapperError,u&&l.contactInputWrapperDisabled,p&&l.contactInputWrapperReadonly),children:["email"===m?e.jsx(n.InputGroup,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter email",value:h,onChange:W,type:"email",noBorder:!0,"aria-invalid":!!O,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.emailContactInput,u&&l.emailContactInputDisabled,p&&l.emailContactInputReadonly)}):e.jsx(o.PhoneNumberInput,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter mobile number",value:I,onChange:R,noBorder:!0,fixedCountry:j,"aria-invalid":!!O,"aria-required":!0,getAriaLabel:$,"aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.phoneContactInput,u&&l.phoneContactInputDisabled,p&&l.phoneContactInputReadonly)}),x&&e.jsx("div",{className:l.verifiedIconWrapper,"aria-label":"Verified",role:"img",children:e.jsx(a.TickCircleFillIcon,{})})]}),!u&&!p&&e.jsx(i.Button,{type:"button","data-testid":c?`${c}-contact-button`:void 0,onClick:q,disabled:C.isRunning||x,loading:g,className:l.contactButton,children:x?"Verified":g?"":C.isRunning?"Sent OTP":"Send OTP"})]}),O&&e.jsx(r.FormErrorMessage,{id:S,"data-testid":c?`${c}-contact-error`:void 0,role:"alert",children:O})]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons"),t=require("clsx"),r=require("../button/button.js"),i=require("../form/form-label/form-label.js"),n=require("../input-group/input-group.js"),o=require("../phone-number-input/phone-number-input.js"),d=require("../shared/accessibility/index.js"),l=require("./contact-input-section.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=c(t);exports.ContactInputSection=({id:t,"data-testid":c,disabled:u,readOnly:p,inputId:b,type:m,sendOtpPlaceholder:v,emailValue:h,onEmailChange:y,phoneNumberValue:f,onPhoneNumberChange:I,fixedCountry:j,isLoading:g,isVerified:x,countdown:C,onSendOtp:q,onStateReset:N,sendOtpError:O,"aria-labelledby":E,"aria-describedby":P})=>{const S=t?`${t}-contact-error`:void 0,W=e=>{N(),"email"===m&&y&&y(e.target.value)},R=e=>{N(),"phone-number"===m&&I&&I(e)},$=e=>{var a;return`Enter your ${null!==(a=null==e?void 0:e.name)&&void 0!==a?a:""} mobile number to receive a verification OTP`.replace(/\s+/g," ")};return e.jsxs("div",{id:t,"data-testid":c,className:l.contactSectionWrapper,children:[e.jsxs("div",{className:l.contactInputSectionWrapper,children:[e.jsxs("div",{"data-max-width":"email"===m,className:s.default(l.contactInputWrapper,!!O&&l.contactInputWrapperError,u&&l.contactInputWrapperDisabled,p&&l.contactInputWrapperReadonly),children:["email"===m?e.jsx(n.InputGroup,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter email",value:h,onChange:W,type:"email",noBorder:!0,"aria-invalid":!!O,"aria-required":!0,"aria-label":"Enter your email address to receive a verification OTP","aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.emailContactInput,u&&l.emailContactInputDisabled,p&&l.emailContactInputReadonly)}):e.jsx(o.PhoneNumberInput,{id:b,"data-testid":c?`${c}-contact-input`:void 0,placeholder:v||"Enter mobile number",value:f,onChange:R,noBorder:!0,fixedCountry:j,"aria-invalid":!!O,"aria-required":!0,getAriaLabel:$,"aria-labelledby":E,"aria-describedby":d.concatIds(O?S:void 0,P),disabled:u,readOnly:p,className:s.default(l.phoneContactInput,u&&l.phoneContactInputDisabled,p&&l.phoneContactInputReadonly)}),x&&e.jsx("div",{className:l.verifiedIconWrapper,"aria-label":"Verified",role:"img",children:e.jsx(a.TickCircleFillIcon,{})})]}),!u&&!p&&e.jsx(r.Button,{type:"button","data-testid":c?`${c}-contact-button`:void 0,onClick:q,disabled:C.isRunning||x,loading:g,className:l.contactButton,children:x?"Verified":g?"":C.isRunning?"Sent OTP":"Send OTP"})]}),O&&e.jsx(i.FormErrorMessage,{id:S,"data-testid":c?`${c}-contact-error`:void 0,role:"alert",children:O})]})};
 //# sourceMappingURL=contact-input-section.js.map