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

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 { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { isEmpty } from \"lodash\";\nimport React, { useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { StringHelper, useId } from \"../util\";\nimport {\n    ClickableErrorWrapper,\n    ErrorIcon,\n    ErrorLabel,\n    ErrorTextContainer,\n    IconContainer,\n    InputGroupWrapper,\n    LoadingLabel,\n    LoadingWrapper,\n    ReadOnlyClickable,\n    ReadOnlyIconContainer,\n    ReadOnlyValueText,\n    Spinner,\n    TryAgainLabel,\n} from \"./masked-input.style\";\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        ...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 isMaskedRef = useRef<boolean>(!disableMask);\n    const ariaLabelledBy = otherProps[\"aria-labelledby\"];\n\n    useImperativeHandle(ref, () => inputRef.current as HTMLInputElement, []);\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            <IconContainer\n                data-testid={`icon-${isMasked ? \"masked\" : \"unmasked\"}`}\n                onMouseDown={!isDisabled ? handleIconMouseDown : undefined}\n                onClick={!isDisabled ? handleToggleMask : undefined}\n                $isDisabled={isDisabled}\n                $inactiveColor={maskIconInactiveColor}\n                $activeColor={maskIconActiveColor}\n                aria-hidden=\"true\"\n            >\n                {isMasked ? iconUnmask : iconMask}\n            </IconContainer>\n        );\n    };\n\n    const renderReadOnlyButton = () => {\n        const isButtonDisabled = shouldDisableMasking() || isEmptyReadOnlyState;\n\n        return (\n            <>\n                <VisuallyHidden id={valueId}>\n                    {getValueDescription()}\n                </VisuallyHidden>\n                <ReadOnlyClickable\n                    ref={readOnlyButtonRef}\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                    <ReadOnlyValueText>{getValue()}</ReadOnlyValueText>\n                    {!isButtonDisabled && (\n                        <ReadOnlyIconContainer>\n                            {isMasked ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </ReadOnlyIconContainer>\n                    )}\n                </ReadOnlyClickable>\n            </>\n        );\n    };\n\n    const renderElement = () => {\n        if (readOnly) {\n            switch (loadState) {\n                case \"fail\":\n                    return (\n                        <ClickableErrorWrapper\n                            ref={tryAgainRef}\n                            onClick={handleTryAgain}\n                            data-testid=\"try-again-button\"\n                            type=\"button\"\n                        >\n                            <ErrorTextContainer>\n                                <ErrorIcon />\n                                <ErrorLabel>Error</ErrorLabel>\n                            </ErrorTextContainer>\n                            <TryAgainLabel>Try again?</TryAgainLabel>\n                        </ClickableErrorWrapper>\n                    );\n                case \"loading\":\n                    return (\n                        <LoadingWrapper>\n                            <Spinner />\n                            <LoadingLabel>Retrieving...</LoadingLabel>\n                        </LoadingWrapper>\n                    );\n                case \"success\":\n                default:\n                    return renderReadOnlyButton();\n            }\n        }\n\n        return (\n            <InputGroupWrapper\n                ref={inputRef}\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                $isDisabled={shouldDisableMasking()}\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","otherProps","__rest","isEmptyReadOnlyState","isEmpty","isMasked","setIsMasked","useState","updatedValue","setUpdatedValue","internalId","useId","valueId","_b","id","inputRef","useRef","tryAgainRef","readOnlyButtonRef","isMaskedRef","ariaLabelledBy","useImperativeHandle","current","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","IconContainer","onMouseDown","undefined","onClick","$isDisabled","$inactiveColor","$activeColor","children","_jsxs","ClickableErrorWrapper","type","ErrorTextContainer","ErrorIcon","ErrorLabel","TryAgainLabel","LoadingWrapper","Spinner","LoadingLabel","isButtonDisabled","_Fragment","VisuallyHidden","ReadOnlyClickable","concatIds","ReadOnlyValueText","ReadOnlyIconContainer","renderReadOnlyButton","InputGroupWrapper","Object","assign","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\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/masked-input/masked-input.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./masked-input.styles_1cm388a.css");exports.clickableErrorWrapper="c1jw7yzb",exports.errorIcon="e1roice1",exports.errorLabel="e1tg5b5m",exports.errorTextContainer="eimq00u",exports.iconContainer="ij8rwek",exports.iconContainerDisabled="i1q5e8sd",exports.inputGroupWrapper="ilvnzaw",exports.loadingLabel="l1o6dphh",exports.loadingWrapper="lsb4klr",exports.readOnlyClickable="r1svptpi",exports.readOnlyIconContainer="r1mk0cgh",exports.readOnlyValueText="r1dgmaf",exports.spinner="s1lksd2c",exports.tokens={iconContainer:{inactiveColor:"--fds-internal-maskedInput-iconContainer-inactiveColor",activeColor:"--fds-internal-maskedInput-iconContainer-activeColor"}},exports.tryAgainLabel="t12y77bq";
+//# sourceMappingURL=masked-input.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"masked-input.styles.js","sources":["../../../src/masked-input/masked-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, Spacing } from \"../theme\";\n\nexport const tokens = {\n    iconContainer: {\n        inactiveColor: \"--fds-internal-maskedInput-iconContainer-inactiveColor\",\n        activeColor: \"--fds-internal-maskedInput-iconContainer-activeColor\",\n    },\n};\n\nexport const inputGroupWrapper = css`\n    padding: 0 0 0 ${Spacing[\"spacing-16\"]};\n\n    input {\n        cursor: initial;\n    }\n`;\n\nexport const inputGroupWrapperReadOnly = css`\n    padding: 0;\n`;\n\nexport const inputGroupWrapperInputPointer = css`\n    input {\n        cursor: pointer;\n    }\n`;\n\nexport const iconContainer = css`\n    ${tokens.iconContainer.inactiveColor}: initial;\n    ${tokens.iconContainer.activeColor}: initial;\n\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    cursor: pointer;\n    color: var(${tokens.iconContainer.activeColor}, ${Colour[\"icon-primary\"]});\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n\n    svg {\n        height: 1em;\n        width: 1em;\n    }\n`;\n\nexport const iconContainerDisabled = css`\n    cursor: initial;\n    color: var(${tokens.iconContainer.inactiveColor}, ${Colour.icon});\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingWrapper = css`\n    display: flex;\n    align-items: center;\n    height: 3rem;\n`;\n\nexport const loadingLabel = css`\n    color: ${Colour[\"text-subtler\"]};\n`;\n\nexport const spinner = css`\n    margin-right: ${Spacing[\"spacing-8\"]};\n    color: ${Colour[\"icon\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const tryAgainLabel = css`\n    color: ${Colour[\"text-primary\"]};\n    text-decoration: underline;\n    font-weight: ${Font.Spec[\"weight-semibold\"]};\n`;\n\nexport const errorTextContainer = css`\n    display: flex;\n    align-items: center;\n    margin-right: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const errorIcon = css`\n    color: ${Colour[\"icon-warning\"]};\n    margin-right: ${Spacing[\"spacing-8\"]};\n    height: 1em;\n    width: 1em;\n`;\n\nexport const errorLabel = css`\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const clickableErrorWrapper = css`\n    width: 100%;\n    height: 3rem;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    border: none;\n    background: transparent;\n    cursor: pointer;\n\n    ${Font[\"body-baseline-regular\"]}\n\n    &:hover,\n    &:active,\n    &:focus {\n        .${tryAgainLabel} {\n            color: ${Colour[\"text-hover\"]};\n        }\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// READONLY MASKED DISPLAY\n// -----------------------------------------------------------------------------\nexport const readOnlyClickable = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    border: none;\n    background: transparent;\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n    text-align: left;\n    width: 100%;\n    justify-content: space-between;\n    min-height: 3rem;\n`;\n\nexport const readOnlyValueText = css`\n    overflow-wrap: anywhere;\n`;\n\nexport const readOnlyIconContainer = css`\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: ${Colour[\"icon-primary\"]};\n    padding: 0 1rem;\n    flex-shrink: 0;\n\n    svg {\n        width: ${Font.Spec[\"body-size-baseline\"]};\n        height: ${Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n"],"names":["iconContainer","inactiveColor","activeColor"],"mappings":"oHA+FkC,6BAXZ,8BAOC,sCAbQ,gCAjDL,wCAiBQ,qCAnCJ,+BAiDL,kCANE,oCAiEG,yCAkBI,qCAJJ,0BArEV,0BA5DE,CAClBA,cAAe,CACXC,cAAe,yDACfC,YAAa,+EAiEK"}

package/cjs/masked-input/masked-input.styles_1cm388a.css

@@ -0,0 +1,16 @@
+.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;}
+.i1q5e8sd{cursor:initial;color:var(--fds-internal-maskedInput-iconContainer-inactiveColor, var(--fds-colour-icon));}
+.lsb4klr{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;height:3rem;}
+.l1o6dphh{color:var(--fds-colour-text-subtler);}
+.s1lksd2c{margin-right:var(--fds-spacing-8);color:var(--fds-colour-icon);}
+.t12y77bq{color:var(--fds-colour-text-primary);-webkit-text-decoration:underline;text-decoration:underline;font-weight:var(--fds-font-weight-semibold);}
+.eimq00u{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;margin-right:var(--fds-spacing-8);}
+.e1roice1{color:var(--fds-colour-icon-warning);margin-right:var(--fds-spacing-8);height:1em;width:1em;}
+.e1tg5b5m{color:var(--fds-colour-text-warning);}
+.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);}

package/cjs/masthead/masthead.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime");require("./sgds-day.css"),require("./sgds-night.css");var t=require("clsx"),s=require("react"),d=require("styled-components"),n=require("./masthead.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=r(t);const a=s.memo((({stretch:t=!1})=>{const r=s.useContext(d.ThemeContext),a="dark"===(null==r?void 0:r.colourMode);s.useEffect((()=>{i()||l()}),[]),s.useEffect((()=>{a?document.documentElement.classList.add(u):document.documentElement.classList.remove(u)}),[a]);const i=()=>document.getElementById(o),l=()=>{if(!document.getElementById(o)){const e=document.createElement("script");e.id=o,e.type="module",e.src=m,document.head.appendChild(e)}};return e.jsx("div",{className:c.default(n.wrapper,t&&n.wrapperStretch),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),o="lifesg-ds-masthead-script",m="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",u="sgds-night-theme";exports.Masthead=a;
+"use strict";var e=require("react/jsx-runtime");require("./sgds-day.css"),require("./sgds-night.css");var t=require("clsx"),r=require("react");require("../theme/theme-provider/index.js");var s=require("../theme/theme-provider/hooks.js");require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");var d=require("./masthead.styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=n(t);const u=r.memo((({stretch:t=!1})=>{const{mode:n}=s.useTheme(),u="dark"===n;r.useEffect((()=>{c()||l()}),[]),r.useEffect((()=>{u?document.documentElement.classList.add(o):document.documentElement.classList.remove(o)}),[u]);const c=()=>document.getElementById(a),l=()=>{if(!document.getElementById(a)){const e=document.createElement("script");e.id=a,e.type="module",e.src=m,document.head.appendChild(e)}};return e.jsx("div",{className:i.default(d.wrapper,t&&d.wrapperStretch),dangerouslySetInnerHTML:{__html:"<sgds-masthead></sgds-masthead>"}})})),a="lifesg-ds-masthead-script",m="https://cdn.jsdelivr.net/npm/@govtechsg/sgds-web-component@3/components/Masthead/index.umd.js",o="sgds-night-theme";exports.Masthead=u;
 //# sourceMappingURL=masthead.js.map

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, useContext, useEffect } from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport * as styles from \"./masthead.styles\";\nimport type { MastheadProps } from \"./types\";\n\nconst MastheadComponent = ({ stretch = false }: MastheadProps): JSX.Element => {\n    const theme = useContext(ThemeContext);\n    const isDarkMode = theme?.colourMode === \"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","theme","useContext","ThemeContext","isDarkMode","colourMode","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":"iUAUA,MAiEaA,EAAWC,EAAAA,MAjEE,EAAGC,WAAU,MACnC,MAAMC,EAAQC,EAAAA,WAAWC,gBACnBC,EAAmC,UAAtBH,aAAK,EAALA,EAAOI,YAK1BC,EAAAA,WAAU,KACDC,KACDC,GACJ,GACD,IAEHF,EAAAA,WAAU,KAEFF,EACAK,SAASC,gBAAgBC,UAAUC,IAAIC,GAEvCJ,SAASC,gBAAgBC,UAAUG,OAC/BD,EAER,GACD,CAACT,IAKJ,MAAMG,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,QAAgB5B,GAAW6B,kBAC3CC,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\";\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":"4wBAWA,MAiEaA,EAAWC,EAAAA,MAjEE,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,IASJf,EAAY,4BACZM,EACF,gGACET,EAA6B"}

package/cjs/menu/menu-content.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),n=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var s=require("../theme/utils/use-apply-styles.js"),o=require("./menu-content.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=i(r);const a=r=>{var{children:i,className:a,"data-testid":u="menu-content",overflow:d,maxHeight:c}=r,m=e.__rest(r,["children","className","data-testid","overflow","maxHeight"]);const h=n.useRef(null);s.useApplyStyle(h,{[o.tokens.panel.maxHeight]:void 0!==c?`${c}px`:null,[o.tokens.panel.overflow]:d||null});return t.jsx("div",Object.assign({ref:h,"data-testid":u,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,n="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!n)return;const s=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!s.length)return;const o=document.activeElement,i=o?s.indexOf(o):-1;e.preventDefault();const l=r?1:-1;null===(t=s[-1===i?r?0:s.length-1:(i+l+s.length)%s.length])||void 0===t||t.focus()},className:l.default(o.panel,a)},m,{children:i}))};a.displayName="Menu.Content",exports.MenuContent=a;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),n=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var s=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var i=require("./menu-content.styles.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=o(r);const a=r=>{var{children:o,className:a,"data-testid":l="menu-content",overflow:d,maxHeight:c}=r,m=e.__rest(r,["children","className","data-testid","overflow","maxHeight"]);const h=n.useRef(null);s.useApplyStyle(h,{[i.tokens.panel.maxHeight]:void 0!==c?`${c}px`:null,[i.tokens.panel.overflow]:d||null});return t.jsx("div",Object.assign({ref:h,"data-testid":l,tabIndex:-1,onKeyDown:e=>{var t;const r="ArrowDown"===e.key||"ArrowRight"===e.key,n="ArrowUp"===e.key||"ArrowLeft"===e.key;if(!r&&!n)return;const s=(e=>Array.from(e.querySelectorAll('a[href], button:not([disabled]), [tabindex]:not([tabindex="-1"])')).filter((e=>!e.hasAttribute("disabled"))))(e.currentTarget);if(!s.length)return;const i=document.activeElement,o=i?s.indexOf(i):-1;e.preventDefault();const u=r?1:-1;null===(t=s[-1===o?r?0:s.length-1:(o+u+s.length)%s.length])||void 0===t||t.focus()},className:u.default(i.panel,a)},m,{children:o}))};a.displayName="Menu.Content",exports.MenuContent=a;
 //# sourceMappingURL=menu-content.js.map

package/cjs/menu/menu-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.js","sources":["../../../src/menu/menu-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./menu-content.styles\";\nimport type { MenuContentProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n    return Array.from(\n        container.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n        )\n    ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n    children,\n    className,\n    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.panel.maxHeight]:\n            maxHeight !== undefined ? `${maxHeight}px` : null,\n        [styles.tokens.panel.overflow]: overflow || null,\n    });\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const isNextKey = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n        const isPrevKey = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n\n        if (!isNextKey && !isPrevKey) return;\n\n        const container = e.currentTarget as HTMLElement;\n        const focusables = getFocusables(container);\n        if (!focusables.length) return;\n\n        const active = document.activeElement as HTMLElement | null;\n        const idx = active ? focusables.indexOf(active) : -1;\n\n        e.preventDefault();\n\n        const delta = isNextKey ? 1 : -1;\n\n        const nextIndex =\n            idx === -1\n                ? isNextKey\n                    ? 0\n                    : focusables.length - 1\n                : (idx + delta + focusables.length) % focusables.length;\n\n        focusables[nextIndex]?.focus();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            ref={panelRef}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            className={clsx(styles.panel, className)}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","className","testId","overflow","maxHeight","otherProps","__rest","panelRef","useRef","useApplyStyle","styles.tokens","panel","undefined","_jsx","Object","assign","ref","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","filter","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","clsx","styles.panel","displayName"],"mappings":"shBAWA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAAA,OAAuB,MAExCC,EAAAA,cAAcF,EAAU,CACpB,CAACG,EAAAA,OAAcC,MAAMP,gBACHQ,IAAdR,EAA0B,GAAGA,MAAgB,KACjD,CAACM,SAAcC,MAAMR,UAAWA,GAAY,OAkChD,OACIU,MAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKT,EAAQ,cACAL,EACbe,UAAU,EACVC,UAlCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EApCQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAENC,QAAQC,IAAQA,EAAGC,aAAa,cA+BXC,CADDZ,EAAEa,eAEpB,IAAKT,EAAWU,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASX,EAAWe,QAAQJ,IAAU,EAElDf,EAAEoB,iBAEF,MAAMC,EAAQpB,EAAY,GAAI,EAST,QAArBrB,EAAAwB,GANY,IAARc,EACMjB,EACI,EACAG,EAAWU,OAAS,GACvBI,EAAMG,EAAQjB,EAAWU,QAAUV,EAAWU,eAEpC,IAAAlC,GAAAA,EAAE0C,OAAO,EAW1BxC,UAAWyC,UAAKC,EAAAA,MAAc1C,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,EAAY8C,YAAc"}
+{"version":3,"file":"menu-content.js","sources":["../../../src/menu/menu-content.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport * as styles from \"./menu-content.styles\";\nimport type { MenuContentProps } from \"./types\";\n\n// =============================================================================\n// HELPERS\n// =============================================================================\nconst getFocusables = (container: HTMLElement) => {\n    return Array.from(\n        container.querySelectorAll<HTMLElement>(\n            'a[href], button:not([disabled]), [tabindex]:not([tabindex=\"-1\"])'\n        )\n    ).filter((el) => !el.hasAttribute(\"disabled\"));\n};\n\nexport const MenuContent = ({\n    children,\n    className,\n    \"data-testid\": testId = \"menu-content\",\n    overflow,\n    maxHeight,\n    ...otherProps\n}: MenuContentProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.panel.maxHeight]:\n            maxHeight !== undefined ? `${maxHeight}px` : null,\n        [styles.tokens.panel.overflow]: overflow || null,\n    });\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {\n        const isNextKey = e.key === \"ArrowDown\" || e.key === \"ArrowRight\";\n        const isPrevKey = e.key === \"ArrowUp\" || e.key === \"ArrowLeft\";\n\n        if (!isNextKey && !isPrevKey) return;\n\n        const container = e.currentTarget as HTMLElement;\n        const focusables = getFocusables(container);\n        if (!focusables.length) return;\n\n        const active = document.activeElement as HTMLElement | null;\n        const idx = active ? focusables.indexOf(active) : -1;\n\n        e.preventDefault();\n\n        const delta = isNextKey ? 1 : -1;\n\n        const nextIndex =\n            idx === -1\n                ? isNextKey\n                    ? 0\n                    : focusables.length - 1\n                : (idx + delta + focusables.length) % focusables.length;\n\n        focusables[nextIndex]?.focus();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div\n            ref={panelRef}\n            data-testid={testId}\n            tabIndex={-1}\n            onKeyDown={handleKeyDown}\n            className={clsx(styles.panel, className)}\n            {...otherProps}\n        >\n            {children}\n        </div>\n    );\n};\n\nMenuContent.displayName = \"Menu.Content\";\n"],"names":["MenuContent","_a","children","className","testId","overflow","maxHeight","otherProps","__rest","panelRef","useRef","useApplyStyle","styles.tokens","panel","undefined","_jsx","Object","assign","ref","tabIndex","onKeyDown","e","isNextKey","key","isPrevKey","focusables","container","Array","from","querySelectorAll","filter","el","hasAttribute","getFocusables","currentTarget","length","active","document","activeElement","idx","indexOf","preventDefault","delta","focus","clsx","styles.panel","displayName"],"mappings":"ukBAWA,MAQaA,EAAeC,IAAA,IAAAC,SACxBA,EAAQC,UACRA,EACA,cAAeC,EAAS,eAAcC,SACtCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EANW,+DAWxB,MAAMQ,EAAWC,EAAAA,OAAuB,MAExCC,EAAAA,cAAcF,EAAU,CACpB,CAACG,EAAAA,OAAcC,MAAMP,gBACHQ,IAAdR,EAA0B,GAAGA,MAAgB,KACjD,CAACM,SAAcC,MAAMR,UAAWA,GAAY,OAkChD,OACIU,MAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKT,EAAQ,cACAL,EACbe,UAAU,EACVC,UAlCeC,UACnB,MAAMC,EAAsB,cAAVD,EAAEE,KAAiC,eAAVF,EAAEE,IACvCC,EAAsB,YAAVH,EAAEE,KAA+B,cAAVF,EAAEE,IAE3C,IAAKD,IAAcE,EAAW,OAE9B,MACMC,EApCQ,CAACC,GACZC,MAAMC,KACTF,EAAUG,iBACN,qEAENC,QAAQC,IAAQA,EAAGC,aAAa,cA+BXC,CADDZ,EAAEa,eAEpB,IAAKT,EAAWU,OAAQ,OAExB,MAAMC,EAASC,SAASC,cAClBC,EAAMH,EAASX,EAAWe,QAAQJ,IAAU,EAElDf,EAAEoB,iBAEF,MAAMC,EAAQpB,EAAY,GAAI,EAST,QAArBrB,EAAAwB,GANY,IAARc,EACMjB,EACI,EACAG,EAAWU,OAAS,GACvBI,EAAMG,EAAQjB,EAAWU,QAAUV,EAAWU,eAEpC,IAAAlC,GAAAA,EAAE0C,OAAO,EAW1BxC,UAAWyC,UAAKC,EAAAA,MAAc1C,IAC1BI,EAAU,CAAAL,SAEbA,IACC,EAIdF,EAAY8C,YAAc"}

package/cjs/menu/menu-content.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./menu-content.styles_1b7d6qf.css");exports.panel="pmssexq",exports.tokens={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",overflow:"--fds-internal-menu-panel-overflow"}};
+"use strict";require("./menu-content.styles_p7ijll.css");exports.panel="pmssexq",exports.tokens={panel:{maxHeight:"--fds-internal-menu-panel-maxHeight",overflow:"--fds-internal-menu-panel-overflow"}};
 //# sourceMappingURL=menu-content.styles.js.map

package/cjs/menu/menu-content.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    panel: {\n        availableWidth: \"--fds-internal-menu-panel-availableWidth\",\n        maxHeight: \"--fds-internal-menu-panel-maxHeight\",\n        overflow: \"--fds-internal-menu-panel-overflow\",\n        xSpacing: \"--fds-internal-menu-panel-xSpacing\",\n    },\n} as const;\n\nexport const panel = css`\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"md-subtle\"]};\n\n    ${tokens.panel.maxHeight}: initial;\n    ${tokens.panel.overflow}: initial;\n    ${tokens.panel.xSpacing}: 0px;\n    ${tokens.panel.availableWidth}: calc(100vw - var(${tokens.panel\n        .xSpacing}) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"sm-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]}px;\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]}px;\n    }\n\n    min-width: min(15rem, var(${tokens.panel.availableWidth}));\n    max-width: min(24rem, var(${tokens.panel.availableWidth}));\n    max-height: var(${tokens.panel.maxHeight});\n    overflow-y: var(${tokens.panel.overflow});\n\n    &:focus {\n        outline: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n"],"names":["panel","maxHeight","overflow"],"mappings":"4FAoBkB,yBATI,CAClBA,MAAO,CAEHC,UAAW,sCACXC,SAAU"}
+{"version":3,"file":"menu-content.styles.js","sources":["../../../src/menu/menu-content.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    MediaQuery,\n    Radius,\n    Shadow,\n} from \"../theme/tokens\";\n\nexport const tokens = {\n    panel: {\n        availableWidth: \"--fds-internal-menu-panel-availableWidth\",\n        maxHeight: \"--fds-internal-menu-panel-maxHeight\",\n        overflow: \"--fds-internal-menu-panel-overflow\",\n        xSpacing: \"--fds-internal-menu-panel-xSpacing\",\n    },\n} as const;\n\nexport const panel = css`\n    border-radius: ${Radius[\"md\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"md-subtle\"]};\n\n    ${tokens.panel.maxHeight}: initial;\n    ${tokens.panel.overflow}: initial;\n    ${tokens.panel.xSpacing}: 0px;\n    ${tokens.panel.availableWidth}: calc(100vw - var(${tokens.panel\n        .xSpacing}) * 2);\n\n    ${MediaQuery.MaxWidth.sm} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"sm-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xs-margin\"]};\n    }\n\n    ${MediaQuery.MaxWidth.xxs} {\n        ${tokens.panel.xSpacing}: ${Breakpoint[\"xxs-margin\"]};\n    }\n\n    min-width: min(15rem, var(${tokens.panel.availableWidth}));\n    max-width: min(24rem, var(${tokens.panel.availableWidth}));\n    max-height: var(${tokens.panel.maxHeight});\n    overflow-y: var(${tokens.panel.overflow});\n\n    &:focus {\n        outline: none;\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n"],"names":["panel","maxHeight","overflow"],"mappings":"2FAoBkB,yBATI,CAClBA,MAAO,CAEHC,UAAW,sCACXC,SAAU"}

package/cjs/menu/menu-content.styles_p7ijll.css

@@ -0,0 +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;}

package/cjs/menu/menu.js

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

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-v2\";\nimport { PopoverTrigger } from \"../popover-v2\";\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":"8gCAUO,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,EAIZa,EAAOC,OAAOC,OAAOjB,EAAa,CAC3CkB,QAASC,EAAAA,YACTC,QAASC,EAAAA,YACTC,KAAMC,EAAAA,SACNC,KAAMC,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\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":"kjCAUO,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,EAIZa,EAAOC,OAAOC,OAAOjB,EAAa,CAC3CkB,QAASC,EAAAA,YACTC,QAASC,EAAAA,YACTC,KAAMC,EAAAA,SACNC,KAAMC,EAAAA"}

package/cjs/modal/modal-box.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./modal-box.styles_1xrlxhd.css");exports.box="b14nv3ev",exports.closeButton="ccgs01o";
+"use strict";require("./modal-box.styles_y52cts.css");exports.box="b14nv3ev",exports.closeButton="ccgs01o";
 //# sourceMappingURL=modal-box.styles.js.map

package/cjs/modal/modal-box.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal-box.styles.js","sources":["../../../src/modal/modal-box.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Shadow, Spacing } from \"../theme\";\n\nexport const box = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 40rem;\n    max-height: 70%;\n    background: ${Colour.bg};\n    box-shadow: ${Shadow[\"lg-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 90%;\n        max-height: 70%;\n    }\n`;\n\nexport const closeButton = css`\n    position: absolute;\n    top: var(--close-button-top-inset, ${Spacing[\"spacing-16\"]});\n    right: var(--close-button-right-inset, ${Spacing[\"spacing-16\"]});\n    padding: 0;\n    color: ${Colour.icon};\n\n    svg {\n        height: 2rem;\n        width: 2rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        right: var(--close-button-right-inset, ${Spacing[\"spacing-20\"]});\n    }\n`;\n"],"names":[],"mappings":"wFAIgB,+BAiBQ"}
+{"version":3,"file":"modal-box.styles.js","sources":["../../../src/modal/modal-box.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery, Radius, Shadow, Spacing } from \"../theme\";\nimport * as modalStyles from \"./modal.styles\";\n\nexport const box = css`\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    width: 40rem;\n    max-height: 70%;\n    background: ${Colour.bg};\n    box-shadow: ${Shadow[\"lg-strong\"]};\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.md} {\n        width: 90%;\n        max-height: 70%;\n    }\n`;\n\nexport const closeButton = css`\n    position: absolute;\n    top: var(\n        ${modalStyles.tokens.closeButton.topInset},\n        ${Spacing[\"spacing-16\"]}\n    );\n    right: var(\n        ${modalStyles.tokens.closeButton.rightInset},\n        ${Spacing[\"spacing-16\"]}\n    );\n    padding: 0;\n    color: ${Colour.icon};\n\n    svg {\n        height: 2rem;\n        width: 2rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        right: var(\n            ${modalStyles.tokens.closeButton.rightInset},\n            ${Spacing[\"spacing-20\"]}\n        );\n    }\n`;\n"],"names":[],"mappings":"uFAKgB,+BAiBQ"}

package/cjs/modal/modal-box.styles_y52cts.css

@@ -0,0 +1,11 @@
+.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)
+    );right:var(
+        --fds-internal-modal-closeButton-rightInset,
+        var(--fds-spacing-16)
+    );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/cjs/modal/modal.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),o=require("react"),i=require("../overlay/overlay.js"),n=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var l=require("../theme/utils/use-apply-styles.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var a=require("../util/use-event.js"),s=require("./modal.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var c=u(t),d=u(o);const m={top:s.containerFromTop,bottom:s.containerFromBottom,left:s.containerFromLeft,right:s.containerFromRight},h={top:s.containerFromTopShow,bottom:s.containerFromBottomShow,left:s.containerFromLeftShow,right:s.containerFromRightShow};exports.Modal=t=>{var{id:u="modal",show:v,animationFrom:j="bottom",children:p,enableOverlayClick:f=!0,rootComponentId:q,zIndex:y,onOverlayClick:b,dismissKeyboardOnShow:k=!0,className:x}=t,w=e.__rest(t,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className"]);const{verticalHeight:F,offsetTop:O}=n.useViewport(),g=o.useRef(null),C=o.useRef(null),S=p&&d.default.cloneElement(p,{ref:g});l.useApplyStyle(C,{[s.tokens.container.verticalHeight]:null==F?null:`${F}px`,[s.tokens.container.offsetTop]:null==O?null:`${O}px`});const I=a.useEvent((()=>{var e,r;k&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))}));return o.useEffect((()=>{v&&I()}),[v,I]),r.jsx(i.Overlay,{"data-testid":`${u}-overlay`,show:v,enableOverlayClick:f,onOverlayClick:b,id:u,rootId:q,containerRef:g,zIndex:y,children:r.jsx("div",Object.assign({ref:C,"data-testid":u},w,{className:c.default(s.container,m[j],v&&h[j],v?s.containerShow:s.containerHide,x),children:S}))})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),o=require("react"),i=require("../overlay/overlay.js"),n=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var a=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("../util/use-event.js"),s=require("./modal.styles.js");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var d=u(t),c=u(o);const m={top:s.containerFromTop,bottom:s.containerFromBottom,left:s.containerFromLeft,right:s.containerFromRight},h={top:s.containerFromTopShow,bottom:s.containerFromBottomShow,left:s.containerFromLeftShow,right:s.containerFromRightShow};exports.Modal=t=>{var{id:u="modal",show:v,animationFrom:j="bottom",children:q,enableOverlayClick:y=!0,rootComponentId:p,zIndex:f,onOverlayClick:b,dismissKeyboardOnShow:k=!0,className:w}=t,x=e.__rest(t,["id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className"]);const F=l.useEvent((()=>{var e,r;k&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:O,ready:g}=n.useViewport({enabled:v,onBeforeStart:F}),S=o.useRef(null),C=o.useRef(null),I=q&&c.default.cloneElement(q,{ref:S});return a.useApplyStyle(C,{[s.tokens.container.verticalHeight]:null==O?null:`${O}px`}),r.jsx(i.Overlay,{"data-testid":`${u}-overlay`,show:v,enableOverlayClick:y,onOverlayClick:b,id:u,rootId:p,containerRef:S,zIndex:f,children:r.jsx("div",Object.assign({ref:C,"data-testid":u},x,{className:d.default(s.container,m[j],v&&g?[h[j],s.containerShow]:s.containerHide,w),children:I}))})};
 //# sourceMappingURL=modal.js.map

package/cjs/modal/modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.js","sources":["../../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTop,\n    bottom: styles.containerFromBottom,\n    left: styles.containerFromLeft,\n    right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTopShow,\n    bottom: styles.containerFromBottomShow,\n    left: styles.containerFromLeftShow,\n    right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    className,\n    ...otherProps\n}: ModalProps): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { verticalHeight, offsetTop } = useViewport();\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        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}px`,\n    });\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-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={id}\n                {...otherProps}\n                className={clsx(\n                    styles.container,\n                    ANIMATION_FROM_CLASS_MAP[animationFrom],\n                    show && ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n                    show ? styles.containerShow : styles.containerHide,\n                    className\n                )}\n            >\n                {childWithRef}\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"+0BAWA,MAAMA,EAAoE,CACtEC,IAAKC,EAAAA,iBACLC,OAAQC,EAAAA,oBACRC,KAAMC,EAAAA,kBACNC,MAAOC,EAAAA,oBAGLC,EAAyE,CAC3ER,IAAKS,EAAAA,qBACLP,OAAQQ,EAAAA,wBACRN,KAAMO,EAAAA,sBACNL,MAAOM,EAAAA,sCAGWC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAA,OAAAZ,EAXK,+IAgBlB,MAAMa,eAAEA,EAAcC,UAAEA,GAAcC,gBAChCC,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFf,GAAYgB,UAAMC,aAAajB,EAAU,CAAEkB,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAAA,OAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,EAAkBC,EAAAA,UAAS,aACzBlB,YACAmB,EAAuC,UAAtCC,SAASC,qBAA6B,IAAA9B,OAAA,EAAAA,EAAE+B,6BAC7C,IAYJ,OATAC,EAAAA,WAAU,KACF9B,GACAwB,GACJ,GACD,CAACxB,EAAMwB,IAMNO,MAACC,EAAAA,uBACgB,GAAGjC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJkC,OAAQ7B,EACRY,aAAcF,EACdT,OAAQA,EAAMH,SAEd6B,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACIf,IAAKJ,gBACQjB,GACTU,EAAU,CACdD,UAAW4B,EAAAA,QACPC,EAAAA,UACArD,EAAyBiB,GACzBD,GAAQP,EAA8BQ,GACtCD,EAAOsC,EAAAA,cAAuBC,EAAAA,cAC9B/B,GACHN,SAEAe,MAEC"}
+{"version":3,"file":"modal.js","sources":["../../../src/modal/modal.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useRef } from \"react\";\n\nimport type { ModalAnimationDirection } from \"../modal-v2/types\";\nimport { Overlay } from \"../overlay/overlay\";\nimport { useViewport } from \"../shared/hooks\";\nimport { useApplyStyle } from \"../theme\";\nimport { useEvent } from \"../util\";\nimport * as styles from \"./modal.styles\";\nimport type { ModalProps } from \"./types\";\n\nconst ANIMATION_FROM_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTop,\n    bottom: styles.containerFromBottom,\n    left: styles.containerFromLeft,\n    right: styles.containerFromRight,\n};\n\nconst ANIMATION_FROM_SHOW_CLASS_MAP: Record<ModalAnimationDirection, string> = {\n    top: styles.containerFromTopShow,\n    bottom: styles.containerFromBottomShow,\n    left: styles.containerFromLeftShow,\n    right: styles.containerFromRightShow,\n};\n\nexport const Modal = ({\n    id = \"modal\",\n    show,\n    animationFrom = \"bottom\",\n    children,\n    enableOverlayClick = true,\n    rootComponentId,\n    zIndex,\n    onOverlayClick,\n    dismissKeyboardOnShow = true,\n    className,\n    ...otherProps\n}: ModalProps): 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, ready } = 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    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <Overlay\n            data-testid={`${id}-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={id}\n                {...otherProps}\n                className={clsx(\n                    styles.container,\n                    ANIMATION_FROM_CLASS_MAP[animationFrom],\n                    show && ready\n                        ? [\n                              ANIMATION_FROM_SHOW_CLASS_MAP[animationFrom],\n                              styles.containerShow,\n                          ]\n                        : styles.containerHide,\n                    className\n                )}\n            >\n                {childWithRef}\n            </div>\n        </Overlay>\n    );\n};\n"],"names":["ANIMATION_FROM_CLASS_MAP","top","styles.containerFromTop","bottom","styles.containerFromBottom","left","styles.containerFromLeft","right","styles.containerFromRight","ANIMATION_FROM_SHOW_CLASS_MAP","styles.containerFromTopShow","styles.containerFromBottomShow","styles.containerFromLeftShow","styles.containerFromRightShow","_a","id","show","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","className","otherProps","__rest","dismissKeyboard","useEvent","_b","document","activeElement","blur","verticalHeight","ready","useViewport","enabled","onBeforeStart","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","styles.containerShow","styles.containerHide"],"mappings":"43BAWA,MAAMA,EAAoE,CACtEC,IAAKC,EAAAA,iBACLC,OAAQC,EAAAA,oBACRC,KAAMC,EAAAA,kBACNC,MAAOC,EAAAA,oBAGLC,EAAyE,CAC3ER,IAAKS,EAAAA,qBACLP,OAAQQ,EAAAA,wBACRN,KAAMO,EAAAA,sBACNL,MAAOM,EAAAA,sCAGWC,IAAA,IAAAC,GAClBA,EAAK,QAAOC,KACZA,EAAIC,cACJA,EAAgB,SAAQC,SACxBA,EAAQC,mBACRA,GAAqB,EAAIC,gBACzBA,EAAeC,OACfA,EAAMC,eACNA,EAAcC,sBACdA,GAAwB,EAAIC,UAC5BA,GAASV,EACNW,EAAUC,EAAAA,OAAAZ,EAXK,+IAgBlB,MAAMa,EAAkBC,EAAAA,UAAS,aACzBL,YACAM,EAAuC,UAAtCC,SAASC,qBAA6B,IAAAjB,OAAA,EAAAA,EAAEkB,6BAC7C,KAEEC,eAAEA,EAAcC,MAAEA,GAAUC,cAAY,CAC1CC,QAASpB,EACTqB,cAAeV,IAEbW,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFvB,GAAYwB,UAAMC,aAAazB,EAAU,CAAE0B,IAAKN,IAUpD,OARAO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUd,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,QAOvCe,EAAAA,IAACC,EAAAA,QAAO,CAAA,cACS,GAAGlC,YAChBC,KAAMA,EACNG,mBAAoBA,EACpBG,eAAgBA,EAChBP,GAAIA,EACJmC,OAAQ9B,EACRoB,aAAcF,EACdjB,OAAQA,EAAMH,SAEd8B,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACIR,IAAKJ,EAAY,cACJzB,GACTU,EAAU,CACdD,UAAW6B,EAAAA,QACPC,EAAAA,UACAtD,EAAyBiB,GACzBD,GAAQkB,EACF,CACIzB,EAA8BQ,GAC9BsC,EAAAA,eAEJC,EAAAA,cACNhC,GACHN,SAEAuB,MAEC"}

package/cjs/modal/modal.styles.js

@@ -1,2 +1,2 @@
-"use strict";require("./modal.styles_1sav73f.css");exports.container="czahu6t",exports.containerFromBottom="c19r0uwy",exports.containerFromBottomShow="c16qcfjk",exports.containerFromLeft="c11f2a4r",exports.containerFromLeftShow="cgnow3g",exports.containerFromRight="ck9rog9",exports.containerFromRightShow="c14dyqe6",exports.containerFromTop="c16tlthj",exports.containerFromTopShow="c1jimj00",exports.containerHide="c1d9ucpb",exports.containerShow="c140nooo",exports.tokens={container:{verticalHeight:"--fds-internal-modal-container-verticalHeight",offsetTop:"--fds-internal-modal-container-offsetTop"}};
+"use strict";require("./modal.styles_1lbblx6.css");exports.container="czahu6t",exports.containerFromBottom="c19r0uwy",exports.containerFromBottomShow="c16qcfjk",exports.containerFromLeft="c11f2a4r",exports.containerFromLeftShow="cgnow3g",exports.containerFromRight="ck9rog9",exports.containerFromRightShow="c14dyqe6",exports.containerFromTop="c16tlthj",exports.containerFromTopShow="c1jimj00",exports.containerHide="c1d9ucpb",exports.containerShow="c140nooo",exports.tokens={container:{verticalHeight:"--fds-internal-modal-container-verticalHeight"}};
 //# sourceMappingURL=modal.styles.js.map

package/cjs/modal/modal.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"modal.styles.js","sources":["../../../src/modal/modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modal-container-verticalHeight\",\n        offsetTop: \"--fds-internal-modal-container-offsetTop\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n\n    ${tokens.container.verticalHeight}: initial;\n    ${tokens.container.offsetTop}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n        top: var(${tokens.container.offsetTop}, 0px);\n    }\n`;\n\nexport const containerFromTop = css`\n    top: -3%;\n`;\n\nexport const containerFromBottom = css`\n    bottom: -3%;\n`;\n\nexport const containerFromLeft = css`\n    left: -3%;\n`;\n\nexport const containerFromRight = css`\n    right: -3%;\n`;\n\nexport const containerShow = css`\n    opacity: 1;\n    transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n    transition-delay: 200ms;\n`;\n\nexport const containerHide = css`\n    opacity: 0;\n    transition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n`;\n\nexport const containerFromTopShow = css`\n    top: 0;\n`;\n\nexport const containerFromBottomShow = css`\n    bottom: 0;\n`;\n\nexport const containerFromLeftShow = css`\n    left: 0;\n`;\n\nexport const containerFromRightShow = css`\n    right: 0;\n`;\n"],"names":["container","verticalHeight","offsetTop"],"mappings":"0FAWsB,sCAsBU,2CA2BI,qCAvBN,yCA2BI,qCAvBH,yCA2BI,oCAvCN,wCA2BI,iCALP,iCANA,0BAzCJ,CAClBA,UAAW,CACPC,eAAgB,gDAChBC,UAAW"}
+{"version":3,"file":"modal.styles.js","sources":["../../../src/modal/modal.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery } from \"../theme\";\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modal-container-verticalHeight\",\n    },\n    closeButton: {\n        topInset: \"--fds-internal-modal-closeButton-topInset\",\n        rightInset: \"--fds-internal-modal-closeButton-rightInset\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n\n    ${tokens.container.verticalHeight}: initial;\n    ${tokens.closeButton.topInset}: initial;\n    ${tokens.closeButton.rightInset}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n    }\n`;\n\nexport const containerFromTop = css`\n    top: -3%;\n`;\n\nexport const containerFromBottom = css`\n    bottom: -3%;\n`;\n\nexport const containerFromLeft = css`\n    left: -3%;\n`;\n\nexport const containerFromRight = css`\n    right: -3%;\n`;\n\nexport const containerShow = css`\n    opacity: 1;\n    transition: all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);\n    transition-delay: 200ms;\n`;\n\nexport const containerHide = css`\n    opacity: 0;\n    transition: all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);\n`;\n\nexport const containerFromTopShow = css`\n    top: 0;\n`;\n\nexport const containerFromBottomShow = css`\n    bottom: 0;\n`;\n\nexport const containerFromLeftShow = css`\n    left: 0;\n`;\n\nexport const containerFromRightShow = css`\n    right: 0;\n`;\n"],"names":["container","verticalHeight"],"mappings":"0FAcsB,sCAsBU,2CA2BI,qCAvBN,yCA2BI,qCAvBH,yCA2BI,oCAvCN,wCA2BI,iCALP,iCANA,0BA5CJ,CAClBA,UAAW,CACPC,eAAgB"}

package/cjs/modal/modal.styles_1lbblx6.css

@@ -0,0 +1,11 @@
+.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%;}
+.ck9rog9{right:-3%;}
+.c140nooo{opacity:1;-webkit-transition:all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);transition:all 300ms cubic-bezier(0.21, 0.79, 0.53, 1);transition-delay:200ms;}
+.c1d9ucpb{opacity:0;-webkit-transition:all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);transition:all 300ms cubic-bezier(0.4, 0.34, 0.38, 1);}
+.c1jimj00{top:0;}
+.c16qcfjk{bottom:0;}
+.cgnow3g{left:0;}
+.c14dyqe6{right:0;}

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

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@floating-ui/react"),i=require("clsx"),t=require("react"),l=require("../overlay/overlay.js"),s=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/utils/use-apply-styles.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../util/use-event.js"),u=require("./modal-context.js"),d=require("./modal-v2.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=c(i),v=c(t);exports.ModalV2=i=>{var{id:c,show:b,onClose:h,animationFrom:j="bottom",children:y,enableOverlayClick:f=!0,rootComponentId:q,zIndex:p,onOverlayClick:x,dismissKeyboardOnShow:g=!0,"data-testid":C="modal","aria-label":k,"aria-labelledby":O,"aria-describedby":F,disableInitialFocus:I=!1,className:w}=i,N=e.__rest(i,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const{verticalHeight:E,offsetTop:M}=s.useViewport(),S=t.useRef(null),_=t.useRef(null),z=y&&v.default.cloneElement(y,{ref:S});n.useApplyStyle(_,{[d.tokens.container.verticalHeight]:null==E?null:`${E}px`,[d.tokens.container.offsetTop]:null==M?null:`${M}px`});const{refs:P,context:R}=a.useFloating({open:b,onOpenChange:e=>{e||null==h||h()}}),{isMounted:T,status:V}=a.useTransitionStatus(R,{duration:300}),$=a.useDismiss(R,{outsidePress:!1,enabled:!!h}),{getFloatingProps:H}=a.useInteractions([$]),K=o.useEvent((()=>{var e,r;g&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))}));return t.useEffect((()=>{b&&K()}),[b,K]),r.jsx(l.Overlay,{"data-testid":`${C}-overlay`,show:T,enableOverlayClick:f,onOverlayClick:x,id:c,rootId:q,containerRef:S,zIndex:p,children:r.jsx("div",Object.assign({ref:_,"data-testid":C,"data-status":V,"data-animation-from":j},N,{className:m.default(d.container,w),children:r.jsx(u.ModalContext.Provider,{value:{onClose:h},children:T&&r.jsx(a.FloatingFocusManager,{context:R,initialFocus:I?-1:P.floating,children:r.jsx("div",{className:d.scrollContainer,children:r.jsx("div",Object.assign({ref:P.setFloating},H(),{role:"dialog","aria-label":k,"aria-labelledby":O,"aria-describedby":F,className:d.modalContainer,children:z}))})})})}))})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@floating-ui/react"),i=require("clsx"),t=require("react"),l=require("../overlay/overlay.js"),s=require("../shared/hooks/useViewport.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var n=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("../util/use-event.js"),d=require("./modal-context.js"),u=require("./modal-v2.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=c(i),v=c(t);exports.ModalV2=i=>{var{id:c,show:b,onClose:h,animationFrom:j="bottom",children:y,enableOverlayClick:q=!0,rootComponentId:x,zIndex:p,onOverlayClick:f,dismissKeyboardOnShow:g=!0,"data-testid":C="modal","aria-label":k,"aria-labelledby":O,"aria-describedby":F,disableInitialFocus:I=!1,className:w}=i,N=e.__rest(i,["id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","data-testid","aria-label","aria-labelledby","aria-describedby","disableInitialFocus","className"]);const S=o.useEvent((()=>{var e,r;g&&(null===(r=null===(e=document.activeElement)||void 0===e?void 0:e.blur)||void 0===r||r.call(e))})),{verticalHeight:M}=s.useViewport({enabled:b,onBeforeStart:S}),_=t.useRef(null),z=t.useRef(null),E=y&&v.default.cloneElement(y,{ref:_});n.useApplyStyle(z,{[u.tokens.container.verticalHeight]:null==M?null:`${M}px`});const{refs:P,context:R}=a.useFloating({open:b,onOpenChange:e=>{e||null==h||h()}}),{isMounted:V,status:H}=a.useTransitionStatus(R,{duration:300}),K=a.useDismiss(R,{outsidePress:!1,enabled:!!h}),{getFloatingProps:$}=a.useInteractions([K]);return r.jsx(l.Overlay,{"data-testid":`${C}-overlay`,show:b,enableOverlayClick:q,onOverlayClick:f,id:c,rootId:x,containerRef:_,zIndex:p,children:r.jsx("div",Object.assign({ref:z,"data-testid":C,"data-status":H,"data-animation-from":j},N,{className:m.default(u.container,w),children:r.jsx(d.ModalContext.Provider,{value:{onClose:h},children:V&&r.jsx(a.FloatingFocusManager,{context:R,initialFocus:I?-1:P.floating,children:r.jsx("div",{className:u.scrollContainer,children:r.jsx("div",Object.assign({ref:P.setFloating},$(),{role:"dialog","aria-label":k,"aria-labelledby":O,"aria-describedby":F,className:u.modalContainer,children:E}))})})})}))})};
 //# sourceMappingURL=modal-v2.js.map

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, { useEffect, 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 type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\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 { verticalHeight, offsetTop } = useViewport();\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        [styles.tokens.container.offsetTop]:\n            offsetTop == null ? null : `${offsetTop}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    // EFFECTS\n    // =========================================================================\n    const dismissKeyboard = useEvent(() => {\n        if (dismissKeyboardOnShow) {\n            (document.activeElement as HTMLElement)?.blur?.();\n        }\n    });\n\n    useEffect(() => {\n        if (show) {\n            dismissKeyboard();\n        }\n    }, [show, dismissKeyboard]);\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            data-testid={`${testId}-overlay`}\n            show={isMounted}\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"],"names":["_a","id","show","onClose","animationFrom","children","enableOverlayClick","rootComponentId","zIndex","onOverlayClick","dismissKeyboardOnShow","testId","ariaLabel","ariaLabelledBy","ariaDescribedBy","disableInitialFocus","className","otherProps","__rest","verticalHeight","offsetTop","useViewport","childRef","useRef","containerRef","childWithRef","React","cloneElement","ref","useApplyStyle","styles.tokens","container","refs","context","useFloating","open","onOpenChange","isOpen","isMounted","status","useTransitionStatus","duration","dismiss","useDismiss","outsidePress","enabled","getFloatingProps","useInteractions","dismissKeyboard","useEvent","_b","document","activeElement","blur","useEffect","_jsx","Overlay","rootId","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"k6BAkBwBA,QAAAC,GACpBA,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,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,MAAMmB,eAAEA,EAAcC,UAAEA,GAAcC,gBAChCC,EAAWC,EAAAA,OAAuB,MAClCC,EAAeD,EAAAA,OAAuB,MACtCE,EACFpB,GAAYqB,UAAMC,aAAatB,EAAU,CAAEuB,IAAKN,IAEpDO,EAAAA,cAAcL,EAAc,CACxB,CAACM,EAAAA,OAAcC,UAAUZ,gBACH,MAAlBA,EAAyB,KAAO,GAAGA,MACvC,CAACW,EAAAA,OAAcC,UAAUX,WACR,MAAbA,EAAoB,KAAO,GAAGA,QAMtC,MAAMY,KAAEA,EAAIC,QAAEA,GAAYC,cAAY,CAClCC,KAAMjC,EACNkC,aAAeC,IACNA,GACDlC,SAAAA,GACJ,KAGFmC,UAAEA,EAASC,OAAEA,GAAWC,EAAAA,oBAAoBP,EAAS,CACvDQ,SAAU,MAERC,EAAUC,EAAAA,WAAWV,EAAS,CAEhCW,cAAc,EACdC,UAAW1C,KAET2C,iBAAEA,GAAqBC,kBAAgB,CAACL,IAKxCM,EAAkBC,EAAAA,UAAS,aACzBvC,YACAwC,EAAuC,UAAtCC,SAASC,qBAA6B,IAAApD,OAAA,EAAAA,EAAEqD,6BAC7C,IAYJ,OATAC,EAAAA,WAAU,KACFpD,GACA8C,GACJ,GACD,CAAC9C,EAAM8C,IAMNO,MAACC,EAAAA,QAAO,CAAA,cACS,GAAG7C,YAChBT,KAAMoC,EACNhC,mBAAoBA,EACpBG,eAAgBA,EAChBR,GAAIA,EACJwD,OAAQlD,EACRiB,aAAcF,EACdd,OAAQA,EAAMH,SAEdkD,EAAAA,IAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKJ,EAAY,cACJb,EAAM,cACN4B,EAAM,sBACEnC,GACjBa,GACJD,UAAW4C,UAAKC,EAAAA,UAAkB7C,GAAUX,SAE5CkD,MAACO,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE7D,WAASE,SACpCiC,GACGiB,EAAAA,IAACU,uBAAoB,CACjBhC,QAASA,EACTiC,aACInD,GAAsB,EAAKiB,EAAKmC,SAAQ9D,SAG5CkD,EAAAA,IAAA,MAAA,CAAKvC,UAAWoD,EAAAA,gBAAsB/D,SAClCkD,MAAA,MAAAG,OAAAC,OAAA,CACI/B,IAAKI,EAAKqC,aACNvB,IAAkB,CACtBwB,KAAK,SAAQ,aACD1D,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWuD,EAAAA,wBAEV9C,eAOnB"}
+{"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 type { ModalV2Props } from \"./types\";\n\nexport const ModalV2 = ({\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"],"names":["_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","Object","assign","clsx","styles.container","ModalContext","Provider","value","FloatingFocusManager","initialFocus","floating","styles.scrollContainer","setFloating","role","styles.modalContainer"],"mappings":"+8BAkBwBA,QAAAC,GACpBA,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,EAjBO,CAAA,KAAA,OAAA,UAAA,gBAAA,WAAA,qBAAA,kBAAA,SAAA,iBAAA,wBAAA,cAAA,aAAA,kBAAA,mBAAA,sBAAA,cAsBpB,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,MAAAG,OAAAC,OAAA,CACIvB,IAAKJ,EAAY,cACJpB,EAAM,cACNmC,EAAM,sBACE1C,GACjBa,GACJD,UAAW2C,UAAKC,EAAAA,UAAkB5C,GAAUX,SAE5CiD,MAACO,EAAAA,aAAaC,SAAQ,CAACC,MAAO,CAAE5D,WAASE,SACpCwC,GACGS,EAAAA,IAACU,uBAAoB,CACjBxB,QAASA,EACTyB,aACIlD,GAAsB,EAAKwB,EAAK2B,SAAQ7D,SAG5CiD,EAAAA,IAAA,MAAA,CAAKtC,UAAWmD,EAAAA,gBAAsB9D,SAClCiD,MAAA,MAAAG,OAAAC,OAAA,CACIvB,IAAKI,EAAK6B,aACNhB,IAAkB,CACtBiB,KAAK,SAAQ,aACDzD,EAAS,kBACJC,EAAc,mBACbC,EAClBE,UAAWsD,EAAAA,wBAEVtC,eAOnB"}

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

@@ -1,2 +1,2 @@
-"use strict";require("./modal-v2.styles_1irpyi6.css");exports.container="c1jrmyjd",exports.modalContainer="mn5ir3",exports.scrollContainer="s1xsiaxz",exports.tokens={container:{verticalHeight:"--fds-internal-modalV2-container-verticalHeight",offsetTop:"--fds-internal-modalV2-container-offsetTop"}};
+"use strict";require("./modal-v2.styles_a8gv5i.css");exports.container="c1jrmyjd",exports.modalContainer="mn5ir3",exports.scrollContainer="s1xsiaxz",exports.tokens={container:{verticalHeight:"--fds-internal-modalV2-container-verticalHeight"}};
 //# sourceMappingURL=modal-v2.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery, Motion } from \"../theme\";\n\nconst CLOSED_POSITION_OFFSET = \"-3%\";\nconst IS_INITIAL_OR_CLOSE =\n    ':is([data-status=\"initial\"], [data-status=\"close\"])';\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modalV2-container-verticalHeight\",\n        offsetTop: \"--fds-internal-modalV2-container-offsetTop\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${tokens.container.verticalHeight}: initial;\n    ${tokens.container.offsetTop}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n        top: var(${tokens.container.offsetTop}, 0px);\n    }\n\n    &[data-status=\"initial\"] {\n        opacity: 0;\n    }\n\n    &[data-status=\"open\"] {\n        opacity: 1;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n        transition-delay: ${Motion[\"duration-150\"]};\n    }\n\n    &[data-status=\"close\"] {\n        opacity: 0;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n    }\n\n    &[data-animation-from=\"top\"]${IS_INITIAL_OR_CLOSE} {\n        top: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"top\"][data-status=\"open\"] {\n        top: 0;\n    }\n\n    &[data-animation-from=\"bottom\"]${IS_INITIAL_OR_CLOSE} {\n        bottom: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"bottom\"][data-status=\"open\"] {\n        bottom: 0;\n    }\n\n    &[data-animation-from=\"left\"]${IS_INITIAL_OR_CLOSE} {\n        left: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"left\"][data-status=\"open\"] {\n        left: 0;\n    }\n\n    &[data-animation-from=\"right\"]${IS_INITIAL_OR_CLOSE} {\n        right: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"right\"][data-status=\"open\"] {\n        right: 0;\n    }\n`;\n\nexport const scrollContainer = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const modalContainer = css`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["container","verticalHeight","offsetTop"],"mappings":"gGAesB,kCAuEK,iCARC,0BAtEN,CAClBA,UAAW,CACPC,eAAgB,kDAChBC,UAAW"}
+{"version":3,"file":"modal-v2.styles.js","sources":["../../../src/modal-v2/modal-v2.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { MediaQuery, Motion } from \"../theme\";\n\nconst CLOSED_POSITION_OFFSET = \"-3%\";\nconst IS_INITIAL_OR_CLOSE =\n    ':is([data-status=\"initial\"], [data-status=\"close\"])';\n\nexport const tokens = {\n    container: {\n        verticalHeight: \"--fds-internal-modalV2-container-verticalHeight\",\n    },\n} as const;\n\nexport const container = css`\n    position: relative;\n    width: 100%;\n    height: 100%;\n\n    overflow: auto;\n\n    ${tokens.container.verticalHeight}: initial;\n\n    ${MediaQuery.MaxWidth.sm} {\n        height: calc(var(${tokens.container.verticalHeight}, 1vh) * 100);\n    }\n\n    @supports (height: 100dvh) {\n        height: 100dvh;\n    }\n\n    &[data-status=\"initial\"] {\n        opacity: 0;\n    }\n\n    &[data-status=\"open\"] {\n        opacity: 1;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-entrance\"]};\n        transition-delay: ${Motion[\"duration-150\"]};\n    }\n\n    &[data-status=\"close\"] {\n        opacity: 0;\n        transition: all ${Motion[\"duration-250\"]} ${Motion[\"ease-exit\"]};\n    }\n\n    &[data-animation-from=\"top\"]${IS_INITIAL_OR_CLOSE} {\n        top: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"top\"][data-status=\"open\"] {\n        top: 0;\n    }\n\n    &[data-animation-from=\"bottom\"]${IS_INITIAL_OR_CLOSE} {\n        bottom: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"bottom\"][data-status=\"open\"] {\n        bottom: 0;\n    }\n\n    &[data-animation-from=\"left\"]${IS_INITIAL_OR_CLOSE} {\n        left: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"left\"][data-status=\"open\"] {\n        left: 0;\n    }\n\n    &[data-animation-from=\"right\"]${IS_INITIAL_OR_CLOSE} {\n        right: ${CLOSED_POSITION_OFFSET};\n    }\n\n    &[data-animation-from=\"right\"][data-status=\"open\"] {\n        right: 0;\n    }\n`;\n\nexport const scrollContainer = css`\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    min-height: 100%;\n    pointer-events: none;\n`;\n\nexport const modalContainer = css`\n    pointer-events: auto;\n    width: 100%;\n    outline: none;\n`;\n"],"names":["container","verticalHeight"],"mappings":"+FAcsB,kCAyEK,iCARC,0BAvEN,CAClBA,UAAW,CACPC,eAAgB"}

package/cjs/modal-v2/modal-v2.styles_a8gv5i.css

@@ -0,0 +1,3 @@
+.c1jrmyjd{position:relative;width:100%;height:100%;overflow:auto;--fds-internal-modalV2-container-verticalHeight:initial;}:where(body.fds-breakpoint-sm-max) .c1jrmyjd{height:calc(var(--fds-internal-modalV2-container-verticalHeight, 1vh) * 100);}@supports (height: 100dvh){.c1jrmyjd{height:100dvh;}}.c1jrmyjd[data-status="initial"]{opacity:0;}.c1jrmyjd[data-status="open"]{opacity:1;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-entrance);transition-delay:var(--fds-motion-duration-150);}.c1jrmyjd[data-status="close"]{opacity:0;-webkit-transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);transition:all var(--fds-motion-duration-250) var(--fds-motion-timing-ease-exit);}.c1jrmyjd[data-animation-from="top"]:is([data-status="initial"], [data-status="close"]){top:-3%;}.c1jrmyjd[data-animation-from="top"][data-status="open"]{top:0;}.c1jrmyjd[data-animation-from="bottom"]:is([data-status="initial"], [data-status="close"]){bottom:-3%;}.c1jrmyjd[data-animation-from="bottom"][data-status="open"]{bottom:0;}.c1jrmyjd[data-animation-from="left"]:is([data-status="initial"], [data-status="close"]){left:-3%;}.c1jrmyjd[data-animation-from="left"][data-status="open"]{left:0;}.c1jrmyjd[data-animation-from="right"]:is([data-status="initial"], [data-status="close"]){right:-3%;}.c1jrmyjd[data-animation-from="right"][data-status="open"]{right:0;}
+.s1xsiaxz{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;min-height:100%;pointer-events:none;}
+.mn5ir3{pointer-events:auto;width:100%;outline:none;}

package/cjs/modal-v2/slots/card.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),a=require("react"),s=require("styled-components"),d=require("./close-button.js"),i=require("./content.js"),o=require("./footer.js"),l=require("./slot-styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(r),c=n(a);const f=c.default.forwardRef((function(r,a){var{id:n,"data-testid":f="modal-card",children:p,className:j}=r,m=e.__rest(r,["id","data-testid","children","className"]);const q=e=>c.default.Children.toArray(p).find((t=>((e,t)=>s.isStyledComponent(e.type)?e.type.target===t:e.type===t)(t,e))),y=q(d.CloseButton),C=q(i.Content),h=q(o.Footer),v=!!y;return t.jsxs("div",Object.assign({ref:a,id:n,"data-testid":f},m,{onClick:e=>{e.stopPropagation()},className:u.default(l.modalCard,j),children:[t.jsxs("div",{"data-has-close-button":v?"true":"false",className:u.default(l.slotSpacer),children:[C,h]}),v&&y]}))}));f.displayName="ModalV2.Card",exports.Card=f;
+"use strict";var e=require("../../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),a=require("react"),s=require("../../util/is-styled-components.js"),i=require("./close-button.js"),d=require("./content.js"),l=require("./footer.js"),o=require("./slot-styles.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=n(r),c=n(a);const f=c.default.forwardRef((function(r,a){var{id:n,"data-testid":f="modal-card",children:j,className:p}=r,m=e.__rest(r,["id","data-testid","children","className"]);const q=e=>c.default.Children.toArray(j).find((t=>((e,t)=>s.default(e.type)?e.type.target===t:e.type===t)(t,e))),y=q(i.CloseButton),C=q(d.Content),h=q(l.Footer),v=!!y;return t.jsxs("div",Object.assign({ref:a,id:n,"data-testid":f},m,{onClick:e=>{e.stopPropagation()},className:u.default(o.modalCard,p),children:[t.jsxs("div",{"data-has-close-button":v?"true":"false",className:u.default(o.slotSpacer),children:[C,h]}),v&&y]}))}));f.displayName="ModalV2.Card",exports.Card=f;
 //# sourceMappingURL=card.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\nimport { isStyledComponent } from \"styled-components\";\n\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <div\n            ref={ref}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasCloseButton && CloseButtonSlot}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"oWAwEO,MAAMA,EAAOC,EAAAA,QAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,UAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAAA,kBAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAAA,QAAKC,EAAAA,UAAkB1B,GAAUD,SAAA,CAE5CoB,EAAAA,KAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAAA,QAAKE,EAAAA,YAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}
+{"version":3,"file":"card.js","sources":["../../../../src/modal-v2/slots/card.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport isStyledComponent from \"../../util/is-styled-components\";\nimport type { ModalCardProps } from \"../types\";\nimport { CloseButton } from \"./close-button\";\nimport { Content } from \"./content\";\nimport { Footer } from \"./footer\";\nimport * as styles from \"./slot-styles\";\n\nfunction CardInner(\n    {\n        id,\n        \"data-testid\": testId = \"modal-card\",\n        children,\n        className,\n        ...otherProps\n    }: ModalCardProps,\n    ref: React.ForwardedRef<HTMLDivElement>\n) {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\n    };\n\n    // =========================================================================\n    // HELPERS\n    // =========================================================================\n    const isComponentType = (child: React.ReactPortal, type: any) =>\n        isStyledComponent(child.type)\n            ? (child.type as unknown as { target: any }).target === type\n            : child.type === type;\n\n    const findComponentOfType = (type: any) => {\n        return React.Children.toArray(children).find((child) =>\n            isComponentType(child as React.ReactPortal, type)\n        );\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const CloseButtonSlot = findComponentOfType(CloseButton);\n    const ContentSlot = findComponentOfType(Content);\n    const FooterSlot = findComponentOfType(Footer);\n\n    const hasCloseButton = !!CloseButtonSlot;\n\n    return (\n        <div\n            ref={ref}\n            id={id}\n            data-testid={testId}\n            {...otherProps}\n            onClick={handleOnClick}\n            className={clsx(styles.modalCard, className)}\n        >\n            <div\n                data-has-close-button={hasCloseButton ? \"true\" : \"false\"}\n                className={clsx(styles.slotSpacer)}\n            >\n                {ContentSlot}\n                {FooterSlot}\n            </div>\n            {hasCloseButton && CloseButtonSlot}\n        </div>\n    );\n}\n\nexport const Card = React.forwardRef<HTMLDivElement, ModalCardProps>(CardInner);\n\n(Card as NamedExoticComponent).displayName = \"ModalV2.Card\";\n"],"names":["Card","React","forwardRef","_a","ref","id","testId","children","className","otherProps","__rest","findComponentOfType","type","Children","toArray","find","child","isStyledComponent","target","isComponentType","CloseButtonSlot","CloseButton","ContentSlot","Content","FooterSlot","Footer","hasCloseButton","_jsxs","Object","assign","onClick","event","stopPropagation","clsx","styles.modalCard","styles.slotSpacer","displayName"],"mappings":"qXAwEO,MAAMA,EAAOC,EAAAA,QAAMC,YA7D1B,SACIC,EAOAC,GAPA,IAAAC,GACIA,EACA,cAAeC,EAAS,aAAYC,SACpCA,EAAQC,UACRA,GAASL,EACNM,EAAUC,EAAAA,OAAAP,EALjB,6CAYA,MAYMQ,EAAuBC,GAClBX,UAAMY,SAASC,QAAQP,GAAUQ,MAAMC,GAN1B,EAACA,EAA0BJ,IAC/CK,EAAAA,QAAkBD,EAAMJ,MACjBI,EAAMJ,KAAoCM,SAAWN,EACtDI,EAAMJ,OAASA,EAIjBO,CAAgBH,EAA4BJ,KAO9CQ,EAAkBT,EAAoBU,eACtCC,EAAcX,EAAoBY,WAClCC,EAAab,EAAoBc,UAEjCC,IAAmBN,EAEzB,OACIO,EAAAA,KAAA,MAAAC,OAAAC,OAAA,CACIzB,IAAKA,EACLC,GAAIA,EAAE,cACOC,GACTG,EAAU,CACdqB,QAjCeC,IACnBA,EAAMC,iBAAiB,EAiCnBxB,UAAWyB,EAAAA,QAAKC,EAAAA,UAAkB1B,GAAUD,SAAA,CAE5CoB,EAAAA,KAAA,MAAA,CAAA,wBAC2BD,EAAiB,OAAS,QACjDlB,UAAWyB,EAAAA,QAAKE,EAAAA,YAAkB5B,SAAA,CAEjCe,EACAE,KAEJE,GAAkBN,KAG/B,IAICpB,EAA8BoC,YAAc"}

package/cjs/navbar/brand.js

@@ -1,2 +1,2 @@
-"use strict";var a=require("react/jsx-runtime"),e=require("../shared/image-with-fallback/image-with-fallback.js"),r=require("./brand.styles.js");exports.Brand=({resources:t,onClick:i,"data-id":s,"data-testid":n="navbar-brand",type:d})=>{const l=!!i,o=l?"primary"===d?`Go to ${t.brandName} homepage`:`Go to ${t.brandName}`:t.brandName,c=l?{role:"link",tabIndex:0,onClick:a=>{i&&(a.preventDefault(),i(a,d))}}:{};return a.jsx(r.Container,Object.assign({"data-id":s,"data-testid":n,$type:d,as:l?"a":"div"},c,{children:a.jsx(e.ImageWithFallback,{src:t.logoSrc,alt:o})}))};
+"use strict";var a=require("react/jsx-runtime"),e=require("../shared/image-with-fallback/image-with-fallback.js"),r=require("./brand.styles.js");exports.Brand=({resources:t,onClick:i,"data-id":s,"data-testid":d="navbar-brand",type:l})=>{const n=a=>{i&&(a.preventDefault(),i(a,l))},c=!!i,o=c?"primary"===l?`Go to ${t.brandName} homepage`:`Go to ${t.brandName}`:t.brandName;return c?a.jsx("a",{"data-id":s,"data-testid":d,className:r.container,role:"link",tabIndex:0,onClick:n,children:a.jsx(e.ImageWithFallback,{src:t.logoSrc,alt:o})}):a.jsx("div",{"data-id":s,"data-testid":d,className:r.container,children:a.jsx(e.ImageWithFallback,{src:t.logoSrc,alt:o})})};
 //# sourceMappingURL=brand.js.map

package/cjs/navbar/brand.js.map

@@ -1 +1 @@
-{"version":3,"file":"brand.js","sources":["../../../src/navbar/brand.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport { Container } from \"./brand.styles\";\nimport type { BrandType, NavbarBrandingProps } from \"./types\";\n\ninterface Props {\n    resources: NavbarBrandingProps;\n    compress?: boolean | undefined;\n    \"data-id\"?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    type: BrandType;\n    onClick?:\n        | ((\n              event: React.MouseEvent<HTMLAnchorElement>,\n              type: BrandType\n          ) => void)\n        | undefined;\n}\n\nexport const Brand = ({\n    resources,\n    onClick,\n    \"data-id\": dataId,\n    \"data-testid\": testId = \"navbar-brand\",\n    type,\n}: Props) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (onClick) {\n            event.preventDefault();\n            onClick(event, type);\n        }\n    };\n\n    // Determine if this should be clickable - brands are clickable by default\n    const isClickable = !!onClick;\n\n    const logoLabel = isClickable\n        ? type === \"primary\"\n            ? `Go to ${resources.brandName} homepage`\n            : `Go to ${resources.brandName}`\n        : resources.brandName;\n\n    const props = isClickable\n        ? {\n              role: \"link\",\n              tabIndex: 0,\n              onClick: handleClick,\n          }\n        : {};\n\n    return (\n        <Container\n            data-id={dataId}\n            data-testid={testId}\n            $type={type}\n            as={isClickable ? \"a\" : \"div\"}\n            {...props}\n        >\n            <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n        </Container>\n    );\n};\n\n// TODO: Fix img size in drawer\n"],"names":["resources","onClick","dataId","testId","type","isClickable","logoLabel","brandName","props","role","tabIndex","event","preventDefault","_jsx","Container","Object","assign","$type","as","children","ImageWithFallback","src","logoSrc","alt"],"mappings":"+JAoBqB,EACjBA,YACAC,UACA,UAAWC,EACX,cAAeC,EAAS,eACxBC,WAKA,MAQMC,IAAgBJ,EAEhBK,EAAYD,EACH,YAATD,EACI,SAASJ,EAAUO,qBACnB,SAASP,EAAUO,YACvBP,EAAUO,UAEVC,EAAQH,EACR,CACII,KAAM,OACNC,SAAU,EACVT,QApBWU,IACbV,IACAU,EAAMC,iBACNX,EAAQU,EAAOP,GACnB,GAkBE,CAAA,EAEN,OACIS,EAAAA,IAACC,EAAAA,UAASC,OAAAC,OAAA,CAAA,UACGd,gBACIC,EAAMc,MACZb,EACPc,GAAIb,EAAc,IAAM,OACpBG,EAAK,CAAAW,SAETN,EAAAA,IAACO,EAAAA,kBAAiB,CAACC,IAAKrB,EAAUsB,QAASC,IAAKjB,MACxC"}
+{"version":3,"file":"brand.js","sources":["../../../src/navbar/brand.tsx"],"sourcesContent":["import type React from \"react\";\n\nimport { ImageWithFallback } from \"../shared/image-with-fallback/image-with-fallback\";\nimport * as styles from \"./brand.styles\";\nimport type { BrandType, NavbarBrandingProps } from \"./types\";\n\ninterface Props {\n    resources: NavbarBrandingProps;\n    compress?: boolean | undefined;\n    \"data-id\"?: string | undefined;\n    \"data-testid\"?: string | undefined;\n    type: BrandType;\n    onClick?:\n        | ((\n              event: React.MouseEvent<HTMLAnchorElement>,\n              type: BrandType\n          ) => void)\n        | undefined;\n}\n\nexport const Brand = ({\n    resources,\n    onClick,\n    \"data-id\": dataId,\n    \"data-testid\": testId = \"navbar-brand\",\n    type,\n}: Props) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {\n        if (onClick) {\n            event.preventDefault();\n            onClick(event, type);\n        }\n    };\n\n    // Determine if this should be clickable - brands are clickable by default\n    const isClickable = !!onClick;\n\n    const logoLabel = isClickable\n        ? type === \"primary\"\n            ? `Go to ${resources.brandName} homepage`\n            : `Go to ${resources.brandName}`\n        : resources.brandName;\n\n    if (isClickable) {\n        return (\n            <a\n                data-id={dataId}\n                data-testid={testId}\n                className={styles.container}\n                role=\"link\"\n                tabIndex={0}\n                onClick={handleClick}\n            >\n                <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n            </a>\n        );\n    }\n\n    return (\n        <div data-id={dataId} data-testid={testId} className={styles.container}>\n            <ImageWithFallback src={resources.logoSrc} alt={logoLabel} />\n        </div>\n    );\n};\n\n// TODO: Fix img size in drawer\n"],"names":["resources","onClick","dataId","testId","type","handleClick","event","preventDefault","isClickable","logoLabel","brandName","_jsx","className","styles.container","role","tabIndex","children","ImageWithFallback","src","logoSrc","alt"],"mappings":"+JAoBqB,EACjBA,YACAC,UACA,UAAWC,EACX,cAAeC,EAAS,eACxBC,WAKA,MAAMC,EAAeC,IACbL,IACAK,EAAMC,iBACNN,EAAQK,EAAOF,GACnB,EAIEI,IAAgBP,EAEhBQ,EAAYD,EACH,YAATJ,EACI,SAASJ,EAAUU,qBACnB,SAASV,EAAUU,YACvBV,EAAUU,UAEhB,OAAIF,EAEIG,MAAA,IAAA,CAAA,UACaT,EAAM,cACFC,EACbS,UAAWC,EAAAA,UACXC,KAAK,OACLC,SAAU,EACVd,QAASI,EAAWW,SAEpBL,EAAAA,IAACM,EAAAA,kBAAiB,CAACC,IAAKlB,EAAUmB,QAASC,IAAKX,MAMxDE,EAAAA,IAAA,MAAA,CAAA,UAAcT,EAAM,cAAeC,EAAQS,UAAWC,EAAAA,UAAgBG,SAClEL,MAACM,EAAAA,kBAAiB,CAACC,IAAKlB,EAAUmB,QAASC,IAAKX,KAC9C"}

package/cjs/navbar/brand.styles.js

@@ -1,13 +1,2 @@
-"use strict";var t=require("styled-components"),e=require("../v3_theme/index.js");function i(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}const n=i(t).default.a`
-    display: flex;
-    justify-content: center;
-    height: 100%;
-
-    img {
-        width: auto;
-        height: 100%;
-        transition: ${e.V3_Motion["duration-150"]} ${e.V3_Motion["ease-default"]};
-        object-fit: contain;
-    }
-`;exports.Container=n;
+"use strict";require("./brand.styles_zcgddp.css");exports.container="cw4lf53";
 //# sourceMappingURL=brand.styles.js.map