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

package/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\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/**\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/masked-input/masked-input.styles_1cm388a.css

@@ -1,4 +1,4 @@
-.ilvnzaw{padding:0 0 0 var(--fds-spacing-16);}.ilvnzaw input{cursor:initial;}
+@layer fds{.ilvnzaw{padding:0 0 0 var(--fds-spacing-16);}.ilvnzaw input{cursor:initial;}
 .i1hq8qtl{padding:0;}
 .itdqc7u input{cursor:pointer;}
 .ij8rwek{--fds-internal-maskedInput-iconContainer-inactiveColor:initial;--fds-internal-maskedInput-iconContainer-activeColor:initial;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;cursor:pointer;color:var(--fds-internal-maskedInput-iconContainer-activeColor, var(--fds-colour-icon-primary));padding:var(--fds-spacing-12) var(--fds-spacing-16);}.ij8rwek svg{height:1em;width:1em;}
@@ -13,4 +13,4 @@
 .c1jw7yzb{width:100%;height:3rem;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border:none;background:transparent;cursor:pointer;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}.c1jw7yzb:hover .t12y77bq,.c1jw7yzb:active .t12y77bq,.c1jw7yzb:focus .t12y77bq{color:var(--fds-colour-text-hover);}
 .r1svptpi{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;cursor:pointer;text-align:left;width:100%;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;min-height:3rem;}
 .r1dgmaf{overflow-wrap:anywhere;}
-.r1mk0cgh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:var(--fds-colour-icon-primary);padding:0 1rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.r1mk0cgh svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}
+.r1mk0cgh{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:var(--fds-colour-icon-primary);padding:0 1rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}.r1mk0cgh svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}}

package/masked-input/types.d.ts

@@ -1,32 +1,107 @@
 import type { InputProps } from "../input/types";
+/**
+ * Load state for `MaskedInput`.
+ */
 export type MaskedInputLoadState = "loading" | "fail" | "success";
+/**
+ * Shared masking configuration used by `MaskedInput` and related components.
+ *
+ * Exactly one masking strategy should be provided. When multiple are supplied
+ * the precedence is: `maskTransformer` → `maskRegex` → `maskRange` /
+ * `unmaskRange`.
+ */
 export interface MaskAttributeProps {
+    /**
+     * Index range `[start, end]` of the characters to mask (inclusive, zero-based).
+     * Characters outside this range remain visible.
+     *
+     * @remarks Ignored when `maskTransformer` or `maskRegex` is provided.
+     */
     maskRange?: number[] | undefined;
+    /**
+     * Index range `[start, end]` of the characters to keep visible (inclusive, zero-based).
+     * Characters outside this range are masked.
+     *
+     * @remarks Ignored when `maskTransformer` or `maskRegex` is provided.
+     */
     unmaskRange?: number[] | undefined;
+    /**
+     * Regular expression whose matches are replaced with `maskChar`.
+     *
+     * @remarks Ignored when `maskTransformer` is provided.
+     */
     maskRegex?: RegExp | undefined;
+    /**
+     * Custom function that receives the raw value and returns the fully
+     * masked string. Takes precedence over `maskRegex`, `maskRange`, and
+     * `unmaskRange`.
+     */
     maskTransformer?: ((value: string) => string) | undefined;
+    /**
+     * Character used to replace each masked character in the displayed value.
+     *
+     * @default "•"
+     */
     maskChar?: string | undefined;
 }
+/**
+ * Props for the `MaskedInput` component.
+ */
 export interface MaskedInputProps extends InputProps, MaskAttributeProps {
     value?: string | undefined;
-    iconMask?: JSX.Element;
+    /**
+     * Icon rendered inside the toggle button while the value is masked
+     *
+     * @default <EyeIcon />
+     */
     iconUnmask?: JSX.Element;
+    /**
+     * Icon rendered inside the toggle button while the value is unmasked
+     *
+     * @default <EyeSlashIcon />
+     */
+    iconMask?: JSX.Element;
+    /**
+     * CSS color value applied to the mask-toggle icon when it is active
+     */
     iconActiveColor?: string | undefined;
+    /**
+     * CSS color value applied to the mask-toggle icon in its default
+     * inactive state.
+     */
     iconInactiveColor?: string | undefined;
+    /**
+     * When `true`, masking is permanently disabled and the raw value is
+     * always shown. The toggle icon is not rendered.
+     *
+     * @default false
+     */
     disableMask?: boolean | undefined;
+    /**
+     * Automatically transforms the typed value before it is stored and
+     * passed to `onChange`.
+     */
     transformInput?: "uppercase" | "lowercase" | undefined;
     /**
-     * Specifies the state of the component when there is a
-     * loading behaviour. Note that this only applies if
-     * the component is in `readOnly` mode.
-     *
-     * Values: "loading" | "fail" | "success"
+     * Retrieval state for the value. Only applies when `readOnly` is `true`.
      */
     loadState?: MaskedInputLoadState | undefined;
+    /**
+     * Called when the value transitions from unmasked to masked.
+     */
     onMask?: (() => void) | undefined;
+    /**
+     * Called when the value transitions from masked to unmasked.
+     */
     onUnmask?: (() => void) | undefined;
-    /** The callback function when the "Try again" button is clicked in error state */
+    /**
+     * Called when the user clicks the "Try again?" button shown in the
+     * `loadState="fail"` state. Only relevant when `readOnly` is `true`.
+     */
     onTryAgain?: (() => void) | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `MaskedInputProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type MaskedInputPartialProps = Omit<MaskedInputProps, "error">;

package/masthead/masthead.d.ts

@@ -1,4 +1,10 @@
 import "@govtechsg/sgds-web-component/themes/day.css";
 import "@govtechsg/sgds-web-component/themes/night.css";
 import type { MastheadProps } from "./types";
+/**
+ * Displays the Singapore Government Design System (SGDS) masthead banner.
+ *
+ * Use `Masthead` at the top of government digital services to meet the SGDS
+ * masthead requirement.
+ */
 export declare const Masthead: import("react").MemoExoticComponent<({ stretch }: MastheadProps) => JSX.Element>;

package/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\";\n\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\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":"wsBAWA,MAiEaA,EAAWC,GAjEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,IACXC,EAAsB,SAATF,EAKnBG,GAAU,KACDC,KACDC,GACJ,GACD,IAEHF,GAAU,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,SACIC,UAAWC,EAAKC,EAAgB1B,GAAW2B,GAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IASJf,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/**\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":"wsBAUA,MAuEaA,EAAWC,GAvEE,EAAGC,WAAU,MACnC,MAAMC,KAAEA,GAASC,IACXC,EAAsB,SAATF,EAKnBG,GAAU,KACDC,KACDC,GACJ,GACD,IAEHF,GAAU,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,SACIC,UAAWC,EAAKC,EAAgB1B,GAAW2B,GAC3CC,wBAVG,CAAEC,OAAQ,oCAWf,IAeJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/masthead/masthead.styles_1huzon9.css

@@ -1,2 +1,2 @@
-.wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-max-width:1440px;}:where(body.fds-breakpoint-xl-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xl);}:where(body.fds-breakpoint-lg-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-lg);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-lg);}:where(body.fds-breakpoint-md-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-md);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-md);}:where(body.fds-breakpoint-sm-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-sm);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxs);}
-.wq9iwwi{--sgds-mainnav-max-width:calc(infinity * 1px);}
+@layer fds{.wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxl);--sgds-mainnav-max-width:1440px;}:where(body.fds-breakpoint-xl-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xl);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xl);}:where(body.fds-breakpoint-lg-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-lg);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-lg);}:where(body.fds-breakpoint-md-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-md);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-md);}:where(body.fds-breakpoint-sm-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-sm);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .wafydue{--sgds-mainnav-padding-x:var(--fds-breakpoint-margin-xxs);--sgds-mainnav-mobile-padding-x:var(--fds-breakpoint-margin-xxs);}
+.wq9iwwi{--sgds-mainnav-max-width:calc(infinity * 1px);}}

package/masthead/types.d.ts

@@ -1,3 +1,12 @@
+/**
+ * Props for the `Masthead` component.
+ */
 export interface MastheadProps {
+    /**
+     * Allows the masthead to span the full width of its container rather than
+     * constraining to the default layout width.
+     *
+     * @default false
+     */
     stretch?: boolean | undefined;
 }

package/menu/menu-content.styles_p7ijll.css

@@ -1,2 +1,2 @@
-.pmssexq{border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-subtle);--fds-internal-menu-panel-maxHeight:initial;--fds-internal-menu-panel-overflow:initial;--fds-internal-menu-panel-xSpacing:0px;--fds-internal-menu-panel-availableWidth:calc(100vw - var(--fds-internal-menu-panel-xSpacing
-              ) * 2);min-width:min(15rem, var(--fds-internal-menu-panel-availableWidth));max-width:min(24rem, var(--fds-internal-menu-panel-availableWidth));max-height:var(--fds-internal-menu-panel-maxHeight);overflow-y:var(--fds-internal-menu-panel-overflow);}:where(body.fds-breakpoint-sm-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xxs);}.pmssexq:focus{outline:none;}.pmssexq::-webkit-scrollbar{width:14px;}.pmssexq::-webkit-scrollbar-track{background:transparent;}.pmssexq::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}
+@layer fds{.pmssexq{border-radius:var(--fds-radius-md);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-md-subtle);--fds-internal-menu-panel-maxHeight:initial;--fds-internal-menu-panel-overflow:initial;--fds-internal-menu-panel-xSpacing:0px;--fds-internal-menu-panel-availableWidth:calc(100vw - var(--fds-internal-menu-panel-xSpacing
+              ) * 2);min-width:min(15rem, var(--fds-internal-menu-panel-availableWidth));max-width:min(24rem, var(--fds-internal-menu-panel-availableWidth));max-height:var(--fds-internal-menu-panel-maxHeight);overflow-y:var(--fds-internal-menu-panel-overflow);}:where(body.fds-breakpoint-sm-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-sm);}:where(body.fds-breakpoint-xs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xs);}:where(body.fds-breakpoint-xxs-max) .pmssexq{--fds-internal-menu-panel-xSpacing:var(--fds-breakpoint-margin-xxs);}.pmssexq:focus{outline:none;}.pmssexq::-webkit-scrollbar{width:14px;}.pmssexq::-webkit-scrollbar-track{background:transparent;}.pmssexq::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}}

package/menu/menu-item.styles_liyed8.css

@@ -1,3 +1,3 @@
-.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-8) var(--fds-spacing-16);}
+@layer fds{.m1ddqpur{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;padding:var(--fds-spacing-8) var(--fds-spacing-16);}
 .tor9xcz{color:var(--fds-colour-text);}
-.s12tso9{color:var(--fds-colour-text-subtler);}
+.s12tso9{color:var(--fds-colour-text-subtler);}}

package/menu/menu-link.styles_hfxoez.css

@@ -1,2 +1,2 @@
-.mmmrhdq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
-.l5rk4za{color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-8) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l5rk4za:hover,.l5rk4za:active,.l5rk4za:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}.l5rk4za:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+@layer fds{.mmmrhdq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}
+.l5rk4za{color:var(--fds-colour-text);margin:0 var(--fds-spacing-8);border:var(--fds-border-style-solid) transparent;border-width:var(--fds-spacing-8) var(--fds-spacing-8);border-radius:var(--fds-radius-md);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;white-space:pre-wrap;}.l5rk4za:hover,.l5rk4za:active,.l5rk4za:focus{background-color:var(--fds-colour-bg-hover);color:var(--fds-colour-text);}.l5rk4za:focus-visible{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}}

package/menu/menu-section.styles_g7my4d.css

@@ -1,3 +1,3 @@
-.s1fmxqsy{padding:var(--fds-spacing-8) 0;margin:0;list-style:none;}
+@layer fds{.s1fmxqsy{padding:var(--fds-spacing-8) 0;margin:0;list-style:none;}
 .s1o971t2{border-top:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}
-.llhca5j{margin:0 var(--fds-spacing-16) var(--fds-spacing-8);color:var(--fds-colour-text-subtler);}
+.llhca5j{margin:0 var(--fds-spacing-16) var(--fds-spacing-8);color:var(--fds-colour-text-subtler);}}

package/menu/menu.d.ts

@@ -1,20 +1,43 @@
 import type { MenuContentProps, MenuProps } from "./types";
+/**
+ * Trigger wrapper that anchors a `Menu.Content` panel to its child element.
+ *
+ * Prefer the `Menu` composite export when building a full menu — it bundles
+ * `Menu.Content`, `Menu.Section`, `Menu.Item`, and `Menu.Link` as named
+ * sub-components alongside the trigger.
+ */
 export declare const MenuTrigger: ({ children, position, menuContent, "data-testid": testId, ...otherProps }: MenuProps) => JSX.Element;
+/**
+ * A popover-anchored menu composed of sections and interactive items.
+ *
+ * Use `Menu` when a trigger element should open a floating panel of actions or
+ * navigation links.
+ *
+ * Sub-components:
+ * - `Menu.Content` — the floating panel that contains menu sections.
+ * - `Menu.Item` — a non-anchor interactive list item with a primary label and optional sub-label.
+ * - `Menu.Link` — an anchor (`<a>`) list item styled as a menu entry.
+ * - `Menu.Section` — a grouping container for `Menu.Item` and `Menu.Link` entries.
+ */
 export declare const Menu: (({ children, position, menuContent, "data-testid": testId, ...otherProps }: MenuProps) => JSX.Element) & {
+    /** Renders the floating panel that contains menu sections. */
     Content: {
         ({ children, className, "data-testid": testId, overflow, maxHeight, ...otherProps }: MenuContentProps): JSX.Element;
         displayName: string;
     };
-    Section: {
-        ({ children, label, showDivider, className, "data-testid": testId, ...otherProps }: import("./types").MenuSectionProps): JSX.Element;
-        displayName: string;
-    };
+    /** Renders a non-anchor interactive list item with a primary label and optional sub-label. */
     Item: {
         ({ label, subLabel, children, className, "data-testid": testId, ...otherProps }: import("./types").MenuItemProps): JSX.Element;
         displayName: string;
     };
+    /** Renders an anchor (`<a>`) list item styled as a menu entry. */
     Link: {
         ({ children, className, "data-testid": testId, ...otherProps }: import("./types").MenuLinkProps): JSX.Element;
         displayName: string;
     };
+    /** Groups related menu entries. */
+    Section: {
+        ({ children, label, showDivider, className, "data-testid": testId, ...otherProps }: import("./types").MenuSectionProps): JSX.Element;
+        displayName: string;
+    };
 };

package/menu/menu.js

@@ -1,2 +1,2 @@
-import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{cloneElement as o}from"react";import"clsx";import"../theme/theme-provider/context.js";import"../typography/typography.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/index.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as r}from"../popover/popover-trigger.js";import"../popover/popover-inline/popover-inline.styles_bkopnt.css";import{MenuContent as i}from"./menu-content.js";import{MenuItem as m}from"./menu-item.js";import{MenuLink as p}from"./menu-link.js";import{MenuSection as s}from"./menu-section.js";const n=i=>{var{children:m,position:p="bottom-start",menuContent:s,"data-testid":n="menu"}=i,a=t(i,["children","position","menuContent","data-testid"]);return e(r,Object.assign({position:p,popoverContent:t=>o(s,{overflow:t.overflow,maxHeight:t.maxHeight}),"data-testid":n},a,{children:m}))},a=Object.assign(n,{Content:i,Section:s,Item:m,Link:p});export{a as Menu,n as MenuTrigger};
+import{__rest as t}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{cloneElement as o}from"react";import"clsx";import"../theme/theme-provider/context.js";import"../typography/typography.js";import"../card/card.styles_1gh9gs3.css";import"../markup/markup.js";import"../modal-v2/modal-v2.js";import"../theme/theme-provider/index.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import"../popover/popover.styles_ujnf0h.css";import{PopoverTrigger as r}from"../popover/popover-trigger.js";import"../popover/popover-inline/popover-inline.styles_bkopnt.css";import{MenuContent as i}from"./menu-content.js";import{MenuItem as m}from"./menu-item.js";import{MenuLink as p}from"./menu-link.js";import{MenuSection as s}from"./menu-section.js";const n=i=>{var{children:m,position:p="bottom-start",menuContent:s,"data-testid":n="menu"}=i,a=t(i,["children","position","menuContent","data-testid"]);return e(r,Object.assign({position:p,popoverContent:t=>o(s,{overflow:t.overflow,maxHeight:t.maxHeight}),"data-testid":n},a,{children:m}))},a=Object.assign(n,{Content:i,Item:m,Link:p,Section:s});export{a as Menu,n as MenuTrigger};
 //# sourceMappingURL=menu.js.map

package/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\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\nexport const Menu = Object.assign(MenuTrigger, {\n    Content: MenuContent,\n    Section: MenuSection,\n    Item: MenuItem,\n    Link: MenuLink,\n});\n"],"names":["MenuTrigger","_a","children","position","menuContent","testId","otherProps","__rest","_jsx","PopoverTrigger","popoverContent","renderProps","cloneElement","overflow","maxHeight","Menu","Object","assign","Content","MenuContent","Section","MenuSection","Item","MenuItem","Link","MenuLink"],"mappings":"ylCAUO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAN,EALW,qDAUxB,OACIO,EAACC,iBACGN,SAAUA,EACVO,eAAiBC,GACbC,EAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAIZa,EAAOC,OAAOC,OAAOjB,EAAa,CAC3CkB,QAASC,EACTC,QAASC,EACTC,KAAMC,EACNC,KAAMC"}
+{"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":"4lCAiBO,MAAMA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,SACRA,EAAW,eAAcC,YACzBA,EACA,cAAeC,EAAS,QAAMJ,EAC3BK,EAAUC,EAAAN,EALW,qDAUxB,OACIO,EAACC,iBACGN,SAAUA,EACVO,eAAiBC,GACbC,EAA+BR,EAAa,CACxCS,SAAUF,EAAYE,SACtBC,UAAWH,EAAYG,YACzB,cAEOT,GACTC,YAEHJ,IACY,EAgBZa,EAAOC,OAAOC,OAAOjB,EAAa,CAE3CkB,QAASC,EAETC,KAAMC,EAENC,KAAMC,EAENC,QAASC"}

package/menu/types.d.ts

@@ -3,25 +3,57 @@ import type { PopoverRenderProps, PopoverTriggerProps } from "../popover";
 import type { MenuItem } from "./menu-item";
 import type { MenuLink } from "./menu-link";
 import type { MenuSection } from "./menu-section";
+/**
+ * Props for the `Menu` component.
+ */
 export interface MenuProps extends Omit<PopoverTriggerProps, "popoverContent"> {
+    /**
+     * The `Menu.Content` element to display inside the popover panel.
+     */
     menuContent: FunctionComponentElement<MenuContentProps>;
 }
+/**
+ * Props for the `Menu.Content` sub-component.
+ */
 export interface MenuContentProps extends HTMLAttributes<HTMLDivElement>, PopoverRenderProps {
+    /** One or more `Menu.Section` elements that make up the panel body. */
     children: ReactElement<typeof MenuSection> | ReactElement<typeof MenuSection>[];
     "data-testid"?: string | undefined;
 }
 type MenuSectionItem = ReactElement<typeof MenuItem> | ReactElement<typeof MenuLink>;
+/**
+ * Props for the `Menu.Section` sub-component.
+ */
 export interface MenuSectionProps extends HTMLAttributes<HTMLUListElement> {
+    /** One or more `Menu.Item` or `Menu.Link` elements within this section. */
     children: MenuSectionItem | MenuSectionItem[];
+    /**
+     * Whether to render a top divider separating this section from the one above.
+     *
+     * @default true
+     */
     showDivider?: boolean | undefined;
+    /**
+     * Accessible group label rendered above the section items.
+     */
     label?: string | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `Menu.Item` sub-component.
+ */
 export interface MenuItemProps extends HTMLAttributes<HTMLLIElement> {
+    /** Primary text label. */
     label?: string | undefined;
+    /**
+     * Secondary descriptive text rendered below `label`.
+     */
     subLabel?: string | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `Menu.Link` sub-component.
+ */
 export interface MenuLinkProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
     "data-testid"?: string | undefined;
 }

package/modal/index.d.ts

@@ -1,4 +1,17 @@
+/**
+ * A full-screen overlay modal with a slide animation.
+ *
+ * Use `Modal` to present content that requires the user's immediate attention
+ * or a focused interaction. Use `ModalV2` for built-in scroll handling and improved accessibility.
+ *
+ * Sub-components:
+ * - `Modal.Box` — a styled content box with an optional close button.
+ */
 export declare const Modal: (({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, className, ...otherProps }: import("./types").ModalProps) => JSX.Element) & {
+    /**
+     * A styled content container for use inside `Modal`. Renders an optional
+     * close button and stops click events from propagating to the overlay.
+     */
     Box: (props: import("./types").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 };
 export * from "./types";

package/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\nexport const Modal = Object.assign(Base, {\n    Box,\n});\n\nexport * from \"./types\";\n"],"names":["Modal","Object","assign","Base","Box"],"mappings":"mFAGaA,EAAQC,OAAOC,OAAOC,EAAM,KACrCC"}
+{"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":"mFAYaA,EAAQC,OAAOC,OAAOC,EAAM,KAKrCC"}

package/modal/modal-box.js

@@ -1,2 +1,2 @@
-import{__rest as o}from"../_virtual/_tslib.js";import{jsxs as s,jsx as t}from"react/jsx-runtime";import{CrossIcon as i}from"@lifesg/react-icons/cross";import r from"clsx";import{forwardRef as e}from"react";import{ClickableIcon as l}from"../shared/clickable-icon/clickable-icon.js";import{box as a,closeButton as c}from"./modal-box.styles.js";const m=e((function(e,m){var{id:n="modal-box",children:d,onClose:f,showCloseButton:p=!0,className:u}=e,h=o(e,["id","children","onClose","showCloseButton","className"]);return s("div",Object.assign({ref:m,"data-testid":n},h,{onClick:o=>{o.stopPropagation()},className:r(a,u),children:[p&&t(l,{onClick:f,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser",className:c,children:t(i,{})}),d]}))}));m.displayName="Modal.Box";export{m as ModalBox};
+import{__rest as o}from"../_virtual/_tslib.js";import{jsxs as e,jsx as r}from"react/jsx-runtime";import{CrossIcon as t}from"@lifesg/react-icons/cross";import i from"clsx";import{forwardRef as s}from"react";import{ClickableIcon as l}from"../shared/clickable-icon/clickable-icon.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as a}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{box as m,closeButton as n}from"./modal-box.styles.js";const c=s((function(s,c){var{id:d="modal-box",children:p,onClose:f,showCloseButton:u=!0,className:j,elementRef:h}=s,b=o(s,["id","children","onClose","showCloseButton","className","elementRef"]);return e("div",Object.assign({ref:a(c,h),"data-testid":d},b,{onClick:o=>{o.stopPropagation()},className:i(m,j),children:[u&&r(l,{onClick:f,"data-testid":"close-button",focusHighlight:!1,focusOutline:"browser",className:n,children:r(t,{})}),p]}))}));c.displayName="Modal.Box";export{c as ModalBox};
 //# sourceMappingURL=modal-box.js.map

package/modal/modal-box.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-box.js","sources":["../../src/modal/modal-box.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport type { NamedExoticComponent } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport * as styles from \"./modal-box.styles\";\nimport type { ModalBoxProps } from \"./types\";\n\nfunction ModalBoxInner(\n    {\n        id = \"modal-box\",\n        children,\n        onClose,\n        showCloseButton = true,\n        className,\n        ...otherProps\n    }: ModalBoxProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCloseButton = () => {\n        return (\n            <ClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                className={styles.closeButton}\n            >\n                <CrossIcon />\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div\n            ref={ref}\n            data-testid={id}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.box, className)}\n        >\n            {showCloseButton && renderCloseButton()}\n            {children}\n        </div>\n    );\n}\n\nexport const ModalBox = forwardRef<HTMLDivElement, ModalBoxProps>(\n    ModalBoxInner\n);\n\n(ModalBox as NamedExoticComponent).displayName = \"Modal.Box\";\n"],"names":["ModalBox","forwardRef","_a","ref","id","children","onClose","showCloseButton","className","otherProps","__rest","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.box","_jsx","ClickableIcon","focusHighlight","focusOutline","styles.closeButton","CrossIcon","displayName"],"mappings":"4VA2DaA,EAAWC,GAjDxB,SACIC,EAQAC,GARA,IAAAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,GAASN,EACNO,EAAUC,EAAAR,EANjB,2DAkCA,OACIS,EAAA,MAAAC,OAAAC,OAAA,CACIV,IAAKA,EAAG,cACKC,GACTK,EAAU,CACdK,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBR,UAAWS,EAAKC,EAAYV,GAAUH,SAAA,CAErCE,GApBDY,EAACC,EAAa,CACVN,QAASR,EAAO,cACJ,eACZe,gBAAgB,EAChBC,aAAa,UACbd,UAAWe,EAAkBlB,SAE7Bc,EAACK,EAAS,CAAA,KAcbnB,KAGb,IAMCL,EAAkCyB,YAAc"}
+{"version":3,"file":"modal-box.js","sources":["../../src/modal/modal-box.tsx"],"sourcesContent":["import { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport type { NamedExoticComponent } from \"react\";\nimport { forwardRef } from \"react\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { mergeRefs } from \"../util\";\nimport * as styles from \"./modal-box.styles\";\nimport type { ModalBoxProps } from \"./types\";\n\nfunction ModalBoxInner(\n    {\n        id = \"modal-box\",\n        children,\n        onClose,\n        showCloseButton = true,\n        className,\n        elementRef,\n        ...otherProps\n    }: ModalBoxProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderCloseButton = () => {\n        return (\n            <ClickableIcon\n                onClick={onClose}\n                data-testid=\"close-button\"\n                focusHighlight={false}\n                focusOutline=\"browser\"\n                className={styles.closeButton}\n            >\n                <CrossIcon />\n            </ClickableIcon>\n        );\n    };\n\n    return (\n        <div\n            ref={mergeRefs(ref, elementRef)}\n            data-testid={id}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.box, className)}\n        >\n            {showCloseButton && renderCloseButton()}\n            {children}\n        </div>\n    );\n}\n\nexport const ModalBox = forwardRef<HTMLDivElement, ModalBoxProps>(\n    ModalBoxInner\n);\n\n(ModalBox as NamedExoticComponent).displayName = \"Modal.Box\";\n"],"names":["ModalBox","forwardRef","_a","ref","id","children","onClose","showCloseButton","className","elementRef","otherProps","__rest","_jsxs","Object","assign","mergeRefs","onClick","event","stopPropagation","clsx","styles.box","_jsx","ClickableIcon","focusHighlight","focusOutline","styles.closeButton","CrossIcon","displayName"],"mappings":"mkBA6DaA,EAAWC,GAlDxB,SACIC,EASAC,OATAC,GACIA,EAAK,YAAWC,SAChBA,EAAQC,QACRA,EAAOC,gBACPA,GAAkB,EAAIC,UACtBA,EAASC,WACTA,GAAUP,EACPQ,EAAUC,EAAAT,EAPjB,wEAmCA,OACIU,EAAA,MAAAC,OAAAC,OAAA,CACIX,IAAKY,EAAUZ,EAAKM,iBACPL,GACTM,EAAU,CACdM,QA1BeC,IACnBA,EAAMC,iBAAiB,EA0BnBV,UAAWW,EAAKC,EAAYZ,GAAUH,SAAA,CAErCE,GApBDc,EAACC,EAAa,CACVN,QAASV,EAAO,cACJ,eACZiB,gBAAgB,EAChBC,aAAa,UACbhB,UAAWiB,EAAkBpB,SAE7BgB,EAACK,EAAS,CAAA,KAcbrB,KAGb,IAMCL,EAAkC2B,YAAc"}

package/modal/modal-box.styles_y52cts.css

@@ -1,4 +1,4 @@
-.b14nv3ev{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:40rem;max-height:70%;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-strong);border-radius:var(--fds-radius-lg);overflow:hidden;}:where(body.fds-breakpoint-md-max) .b14nv3ev{width:90%;max-height:70%;}
+@layer fds{.b14nv3ev{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;width:40rem;max-height:70%;background:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-strong);border-radius:var(--fds-radius-lg);overflow:hidden;}:where(body.fds-breakpoint-md-max) .b14nv3ev{width:90%;max-height:70%;}
 .ccgs01o{position:absolute;top:var(
         --fds-internal-modal-closeButton-topInset,
         var(--fds-spacing-16)
@@ -8,4 +8,4 @@
     );padding:0;color:var(--fds-colour-icon);}.ccgs01o svg{height:2rem;width:2rem;}:where(body.fds-breakpoint-sm-max) .ccgs01o{right:var(
             --fds-internal-modal-closeButton-rightInset,
             var(--fds-spacing-20)
-        );}
+        );}}

package/modal/modal.styles_1lbblx6.css

@@ -1,4 +1,4 @@
-.czahu6t{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:100%;overflow:hidden;--fds-internal-modal-container-verticalHeight:initial;--fds-internal-modal-closeButton-topInset:initial;--fds-internal-modal-closeButton-rightInset:initial;}:where(body.fds-breakpoint-sm-max) .czahu6t{height:calc(var(--fds-internal-modal-container-verticalHeight, 1vh) * 100);}
+@layer fds{.czahu6t{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:100%;width:100%;overflow:hidden;--fds-internal-modal-container-verticalHeight:initial;--fds-internal-modal-closeButton-topInset:initial;--fds-internal-modal-closeButton-rightInset:initial;}:where(body.fds-breakpoint-sm-max) .czahu6t{height:calc(var(--fds-internal-modal-container-verticalHeight, 1vh) * 100);}
 .c16tlthj{top:-3%;}
 .c19r0uwy{bottom:-3%;}
 .c11f2a4r{left:-3%;}
@@ -8,4 +8,4 @@
 .c1jimj00{top:0;}
 .c16qcfjk{bottom:0;}
 .cgnow3g{left:0;}
-.c14dyqe6{right:0;}
+.c14dyqe6{right:0;}}

package/modal/types.d.ts

@@ -1,23 +1,70 @@
 import type { ModalAnimationDirection } from "../modal-v2/types";
+/**
+ * Props for the `Modal` component.
+ */
 export interface ModalProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Controls whether the modal is visible.
+     */
     show: boolean;
-    /** The content of the modal. The parent element must be a valid HTML
-     * element or a component that forwards a ref to a valid HTML element. This
-     * element is used to determine the boundaries for overlay click
-     * detection. Fragments are not supported. */
+    /**
+     * The content of the modal. The parent element must be a valid HTML
+     * element or a component that forwards a ref to a valid HTML element.
+     */
     children: React.JSX.Element;
-    /** Animation direction of appearance and dismissal. Values: "top" | "bottom" | "left" | "right" */
+    /**
+     * Direction from which the modal slides in and out.
+     *
+     * @default "bottom"
+     */
     animationFrom?: ModalAnimationDirection | undefined;
+    /**
+     * Whether clicking the overlay backdrop dismisses the modal.
+     *
+     * @default true
+     */
     enableOverlayClick?: boolean | undefined;
-    /** The identifier of the element to inject the Modal into */
+    /**
+     * The `id` of the DOM element to portal the modal into.
+     *
+     * @default `document.body`
+     */
     rootComponentId?: string | undefined;
+    /**
+     * The z-index applied to the overlay stack.
+     */
     zIndex?: number | undefined;
+    /**
+     * Called when the overlay backdrop is clicked and `enableOverlayClick` is
+     * `true`.
+     */
     onOverlayClick?: (() => void) | undefined;
-    /** Dismiss keyboard to keep modal in fullscreen */
+    /**
+     * Blurs the currently focused element when the modal becomes visible,
+     * dismissing the on-screen keyboard on mobile to prevent it from
+     * obscuring the modal.
+     *
+     * @default true
+     */
     dismissKeyboardOnShow?: boolean | undefined;
 }
+/**
+ * Props for the `Modal.Box` sub-component.
+ */
 export interface ModalBoxProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
+    /**
+     * Whether to render the close button in the top-right corner of the box.
+     *
+     * @default true
+     */
     showCloseButton?: boolean | undefined;
+    /**
+     * Called when the close button is clicked.
+     */
     onClose?: (() => void) | undefined;
+    /**
+     * Ref to the modal box DOM element. When used within `Modal`, the default `ref` is not available and you can specify this instead.
+     */
+    elementRef?: React.Ref<HTMLDivElement> | undefined;
 }