@lifesg/react-design-system 3.5.0-canary.6 → 3.5.0-canary.8

package/cjs/input-range-select/input-range-select.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-range-select.js","sources":["../../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ClearIcon } from \"../input/input.style\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListApi,\n    DropdownListState,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    PlaceholderLabel,\n    ValueLabel,\n    Wrapper,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    ClearIconContainer,\n    RangeSelectorButton,\n    StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" | \"to\";\n\nexport const InputRangeSelect = <T, V>({\n    selectedOptions,\n    placeholders = { from: \"Select\", to: \"Select\" },\n    options,\n    disabled,\n    className,\n    readOnly,\n    error,\n    \"data-testid\": testId,\n    id,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = { from: \"success\", to: \"success\" },\n    optionTruncationType = \"middle\",\n    renderCustomSelectedOption,\n    renderListItem,\n    renderCustomCallToAction,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedFromValue, setSelectedFromValue] = useState<T | undefined>();\n    const [selectedToValue, setSelectedToValue] = useState<T | undefined>();\n    const [focusedInput, setFocusedInput] = useState<RangeType | \"none\">(\n        \"none\"\n    );\n    const isOpen = focusedInput !== \"none\";\n\n    const labelButtonRef = {\n        from: useRef<HTMLButtonElement>(null),\n        to: useRef<HTMLButtonElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const internalId = useId();\n    const listboxId = `${internalId}-range-listbox`;\n    const fromLabelId = `${internalId}-from-label`;\n    const toLabelId = `${internalId}-to-label`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedFromValue(selectedOptions?.from);\n        setSelectedToValue(selectedOptions?.to);\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (!isOpen) return;\n\n        if (focusedInput === \"to\") {\n            dropdownRef.current?.refocus({ index: 0 });\n        }\n    }, [isOpen, focusedInput]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show) onHideOptions?.();\n        if (show) onShowOptions?.();\n    };\n\n    const getDisplayValue = (rangeType: RangeType): string => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) return displayValueExtractor(selected);\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString?.() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (type: RangeType, value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelButtonRef[type]?.current) {\n                widthOfElement =\n                    labelButtonRef[type].current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const getCurrentFocused = (): \"none\" | \"start\" | \"end\" => {\n        switch (focusedInput) {\n            case \"from\":\n                return \"start\";\n            case \"to\":\n                return \"end\";\n            case \"none\":\n                return focusedInput;\n        }\n    };\n\n    const currentOptions = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        return options?.[focusedInput] ?? [];\n    }, [focusedInput, options]);\n\n    const currentSelectedItems = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        const selected =\n            focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n        return selected ? [selected] : [];\n    }, [focusedInput, selectedFromValue, selectedToValue]);\n\n    const openDropdownFor = (rangeType: RangeType) => {\n        if (disabled || readOnly) return;\n\n        const nextFocusedInput =\n            rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n        setFocusedInput(nextFocusedInput);\n        triggerOptionDisplayCallback(true);\n    };\n\n    const focusButton = (type: RangeType) => {\n        labelButtonRef[type].current?.focus();\n    };\n\n    const getButtonLabelledBy = (rangeType: RangeType) => {\n        const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n        return concatIds(rangeLabelId, ariaLabelledBy);\n    };\n\n    const getDropdownAriaLabel = () => {\n        if (focusedInput === \"from\") {\n            return `Selecting for: ${placeholders?.from}`;\n        }\n\n        if (focusedInput === \"to\") {\n            return `Selecting for: ${placeholders?.to}`;\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n            openDropdownFor(rangeType);\n        };\n\n    const handleSelectorKeyDown =\n        (rangeType: RangeType) =>\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (disabled || readOnly) return;\n\n            switch (event.key) {\n                case \"Enter\":\n                case \" \":\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    openDropdownFor(rangeType);\n                    break;\n                default:\n                    break;\n            }\n        };\n\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        if (focusedInput === \"none\") return;\n\n        if (focusedInput === \"from\") {\n            setSelectedFromValue(item);\n            onSelectOption?.({ from: item }, extractedValue);\n\n            setSelectedToValue(undefined);\n            setFocusedInput(\"to\");\n            triggerOptionDisplayCallback(true);\n            focusButton(\"to\");\n            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        focusButton(\"to\");\n    };\n\n    const handleDismiss = () => {\n        const last = focusedInput;\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (last === \"to\") focusButton(\"to\");\n        else focusButton(\"from\");\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleClose = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n\n        if (focusedInput === \"none\") {\n            setFocusedInput(\"from\");\n            triggerOptionDisplayCallback(true);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        setSelectedFromValue(undefined);\n        setSelectedToValue(undefined);\n        onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n        focusButton(\"from\");\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderLabel = (rangeType: RangeType) => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n        if (!selected) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {truncateValue(rangeType, placeholders?.[rangeType] || \"\")}\n                </PlaceholderLabel>\n            );\n        }\n\n        if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        }\n\n        return (\n            <ValueLabel $truncateType={optionTruncationType}>\n                {truncateValue(rangeType, getDisplayValue(rangeType))}\n            </ValueLabel>\n        );\n    };\n\n    const renderSelectorContent = (rangeType: RangeType) => (\n        <RangeSelectorButton\n            type=\"button\"\n            role=\"combobox\"\n            aria-labelledby={getButtonLabelledBy(rangeType)}\n            aria-describedby={ariaDescribedBy}\n            aria-expanded={isOpen && focusedInput === rangeType}\n            aria-controls={listboxId}\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            onClick={handleSelectorClick(rangeType)}\n            onKeyDown={handleSelectorKeyDown(rangeType)}\n            ref={labelButtonRef[rangeType]}\n            tabIndex={0}\n        >\n            {renderLabel(rangeType)}\n        </RangeSelectorButton>\n    );\n\n    const renderElement = () => {\n        return (\n            <StyledInputWrapper\n                className={className}\n                data-testid={testId}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $focused={isOpen}\n            >\n                <VisuallyHidden id={fromLabelId}>\n                    {placeholders?.from || \"Select From\"}\n                </VisuallyHidden>\n                <VisuallyHidden id={toLabelId}>\n                    {placeholders?.to || \"Select To\"}\n                </VisuallyHidden>\n\n                <RangeInputInnerContainer\n                    currentActive={getCurrentFocused()}\n                    error={error}\n                >\n                    {renderSelectorContent(\"from\")}\n                    {renderSelectorContent(\"to\")}\n                </RangeInputInnerContainer>\n\n                {!isOpen &&\n                    selectedFromValue &&\n                    selectedToValue &&\n                    !readOnly &&\n                    !disabled && (\n                        <ClearIconContainer\n                            onClick={handleClear}\n                            type=\"button\"\n                            aria-label=\"Clear\"\n                        >\n                            <ClearIcon aria-hidden />\n                        </ClearIconContainer>\n                    )}\n            </StyledInputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                ref={dropdownRef}\n                data-testid={`${testId}-dropdown`}\n                listboxId={listboxId}\n                ariaLabel={getDropdownAriaLabel()}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                selectedItems={currentSelectedItems}\n                itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                width={dropdownWidth}\n                matchElementWidth={!dropdownWidth}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                renderListItem={renderListItem}\n                renderCustomCallToAction={renderCustomCallToAction}\n            />\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={isOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle={false}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n        </Wrapper>\n    );\n};\n"],"names":["_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","labelButtonRef","useRef","dropdownRef","internalId","useId","listboxId","fromLabelId","toLabelId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","openDropdownFor","focusButton","focus","getButtonLabelledBy","rangeLabelId","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","$truncateType","PlaceholderLabel","renderSelectorContent","RangeSelectorButton","role","onClick","onKeyDown","ref","tabIndex","children","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","$disabled","$readOnly","$focused","VisuallyHidden","RangeInputInnerContainer","currentActive","ClearIconContainer","ClearIcon","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-range-select.js","sources":["../../../src/input-range-select/input-range-select.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ClearIcon } from \"../input/input.style\";\nimport { VisuallyHidden, concatIds } from \"../shared/accessibility\";\nimport {\n    DropdownList,\n    DropdownListApi,\n    DropdownListState,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    PlaceholderLabel,\n    ValueLabel,\n    Wrapper,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { RangeInputInnerContainer } from \"../shared/range-input-inner-container\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    ClearIconContainer,\n    RangeSelectorButton,\n    StyledInputWrapper,\n} from \"./input-range-select.style\";\nimport { InputRangeSelectProps } from \"./types\";\n\ntype RangeType = \"from\" | \"to\";\n\nexport const InputRangeSelect = <T, V>({\n    selectedOptions,\n    placeholders = { from: \"Select\", to: \"Select\" },\n    options,\n    disabled,\n    className,\n    readOnly,\n    error,\n    \"data-testid\": testId,\n    id,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    isOptionDisabled,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = { from: \"success\", to: \"success\" },\n    optionTruncationType = \"middle\",\n    renderCustomSelectedOption,\n    renderListItem,\n    renderCustomCallToAction,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: InputRangeSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [selectedFromValue, setSelectedFromValue] = useState<T | undefined>();\n    const [selectedToValue, setSelectedToValue] = useState<T | undefined>();\n    const [focusedInput, setFocusedInput] = useState<RangeType | \"none\">(\n        \"none\"\n    );\n    const isOpen = focusedInput !== \"none\";\n\n    const labelButtonRef = {\n        from: useRef<HTMLButtonElement>(null),\n        to: useRef<HTMLButtonElement>(null),\n    };\n    const dropdownRef = useRef<DropdownListApi>(null);\n\n    const internalId = useId();\n    const listboxId = `${internalId}-range-listbox`;\n    const fromLabelId = `${internalId}-from-label`;\n    const toLabelId = `${internalId}-to-label`;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelectedFromValue(selectedOptions?.from);\n        setSelectedToValue(selectedOptions?.to);\n    }, [selectedOptions]);\n\n    useEffect(() => {\n        if (!isOpen) return;\n\n        if (focusedInput === \"to\") {\n            dropdownRef.current?.refocus({ index: 0 });\n        }\n    }, [isOpen, focusedInput]);\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (!show) onHideOptions?.();\n        if (show) onShowOptions?.();\n    };\n\n    const getDisplayValue = (rangeType: RangeType): string => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) return displayValueExtractor(selected);\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString?.() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (type: RangeType, value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelButtonRef[type]?.current) {\n                widthOfElement =\n                    labelButtonRef[type].current.getBoundingClientRect().width;\n            }\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const getCurrentFocused = (): \"none\" | \"start\" | \"end\" => {\n        switch (focusedInput) {\n            case \"from\":\n                return \"start\";\n            case \"to\":\n                return \"end\";\n            case \"none\":\n                return focusedInput;\n        }\n    };\n\n    const currentOptions = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        return options?.[focusedInput] ?? [];\n    }, [focusedInput, options]);\n\n    const currentSelectedItems = useMemo(() => {\n        if (focusedInput === \"none\") return [];\n        const selected =\n            focusedInput === \"from\" ? selectedFromValue : selectedToValue;\n        return selected ? [selected] : [];\n    }, [focusedInput, selectedFromValue, selectedToValue]);\n\n    const openDropdownFor = (rangeType: RangeType) => {\n        if (disabled || readOnly) return;\n\n        const nextFocusedInput =\n            rangeType === \"to\" && !selectedFromValue ? \"from\" : rangeType;\n\n        setFocusedInput(nextFocusedInput);\n        triggerOptionDisplayCallback(true);\n    };\n\n    const focusButton = (type: RangeType) => {\n        labelButtonRef[type].current?.focus();\n    };\n\n    const getButtonLabelledBy = (rangeType: RangeType) => {\n        const rangeLabelId = rangeType === \"from\" ? fromLabelId : toLabelId;\n        return concatIds(rangeLabelId, ariaLabelledBy);\n    };\n\n    const getDropdownAriaLabel = () => {\n        if (focusedInput === \"from\") {\n            return `Selecting for: ${placeholders?.from}`;\n        }\n\n        if (focusedInput === \"to\") {\n            return `Selecting for: ${placeholders?.to}`;\n        }\n\n        return undefined;\n    };\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleSelectorClick =\n        (rangeType: RangeType) => (event: React.MouseEvent) => {\n            event.stopPropagation();\n            event.preventDefault();\n            openDropdownFor(rangeType);\n        };\n\n    const handleSelectorKeyDown =\n        (rangeType: RangeType) =>\n        (event: React.KeyboardEvent<HTMLButtonElement>) => {\n            if (disabled || readOnly) return;\n\n            switch (event.key) {\n                case \"Enter\":\n                case \" \":\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    openDropdownFor(rangeType);\n                    break;\n                default:\n                    break;\n            }\n        };\n\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        if (focusedInput === \"none\") return;\n\n        if (focusedInput === \"from\") {\n            setSelectedFromValue(item);\n            onSelectOption?.({ from: item }, extractedValue);\n\n            setSelectedToValue(undefined);\n            setFocusedInput(\"to\");\n            triggerOptionDisplayCallback(true);\n            focusButton(\"to\");\n            return;\n        }\n\n        setSelectedToValue(item);\n        onSelectOption?.({ to: item }, extractedValue);\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n        focusButton(\"to\");\n    };\n\n    const handleDismiss = () => {\n        const last = focusedInput;\n\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (last === \"to\") focusButton(\"to\");\n        else focusButton(\"from\");\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleClose = () => {\n        setFocusedInput(\"none\");\n        triggerOptionDisplayCallback(false);\n\n        if (!selectedFromValue || !selectedToValue) {\n            setSelectedFromValue(undefined);\n            setSelectedToValue(undefined);\n        }\n    };\n\n    const handleOpen = () => {\n        if (disabled || readOnly) return;\n\n        if (focusedInput === \"none\") {\n            setFocusedInput(\"from\");\n            triggerOptionDisplayCallback(true);\n        }\n    };\n\n    const handleClear = (event: React.MouseEvent) => {\n        event.stopPropagation();\n        event.preventDefault();\n        setSelectedFromValue(undefined);\n        setSelectedToValue(undefined);\n        onSelectOption?.({ from: undefined, to: undefined }, undefined);\n\n        focusButton(\"from\");\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    const renderLabel = (rangeType: RangeType) => {\n        const selected =\n            rangeType === \"from\" ? selectedFromValue : selectedToValue;\n\n        if (!selected) {\n            return (\n                <PlaceholderLabel $truncateType={optionTruncationType}>\n                    {truncateValue(rangeType, placeholders?.[rangeType] || \"\")}\n                </PlaceholderLabel>\n            );\n        }\n\n        if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        }\n\n        return (\n            <ValueLabel $truncateType={optionTruncationType}>\n                {truncateValue(rangeType, getDisplayValue(rangeType))}\n            </ValueLabel>\n        );\n    };\n\n    const renderSelectorContent = (rangeType: RangeType) => (\n        <RangeSelectorButton\n            type=\"button\"\n            role=\"combobox\"\n            aria-labelledby={getButtonLabelledBy(rangeType)}\n            aria-describedby={ariaDescribedBy}\n            aria-expanded={isOpen && focusedInput === rangeType}\n            aria-controls={listboxId}\n            aria-disabled={disabled}\n            aria-readonly={readOnly}\n            onClick={handleSelectorClick(rangeType)}\n            onKeyDown={handleSelectorKeyDown(rangeType)}\n            ref={labelButtonRef[rangeType]}\n            tabIndex={0}\n        >\n            {renderLabel(rangeType)}\n        </RangeSelectorButton>\n    );\n\n    const renderElement = () => {\n        return (\n            <StyledInputWrapper\n                className={className}\n                data-testid={testId}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n                $focused={isOpen}\n            >\n                <VisuallyHidden id={fromLabelId}>\n                    {placeholders?.from || \"Select From\"}\n                </VisuallyHidden>\n                <VisuallyHidden id={toLabelId}>\n                    {placeholders?.to || \"Select To\"}\n                </VisuallyHidden>\n\n                <RangeInputInnerContainer\n                    currentActive={getCurrentFocused()}\n                    error={error}\n                >\n                    {renderSelectorContent(\"from\")}\n                    {renderSelectorContent(\"to\")}\n                </RangeInputInnerContainer>\n\n                {!isOpen &&\n                    selectedFromValue &&\n                    selectedToValue &&\n                    !readOnly &&\n                    !disabled && (\n                        <ClearIconContainer\n                            onClick={handleClear}\n                            type=\"button\"\n                            aria-label=\"Clear\"\n                        >\n                            <ClearIcon aria-hidden />\n                        </ClearIconContainer>\n                    )}\n            </StyledInputWrapper>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                ref={dropdownRef}\n                data-testid={`${testId}-dropdown`}\n                listboxId={listboxId}\n                ariaLabel={getDropdownAriaLabel()}\n                listItems={currentOptions}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                selectedItems={currentSelectedItems}\n                itemsLoadState={optionsLoadState[focusedInput as RangeType]}\n                itemTruncationType={optionTruncationType}\n                onRetry={onRetry}\n                width={dropdownWidth}\n                matchElementWidth={!dropdownWidth}\n                enableSearch={enableSearch}\n                searchFunction={searchFunction}\n                searchPlaceholder={searchPlaceholder}\n                renderListItem={renderListItem}\n                renderCustomCallToAction={renderCustomCallToAction}\n            />\n        );\n    };\n\n    return (\n        <Wrapper id={id} {...otherProps}>\n            <DropdownListState>\n                <ElementWithDropdown\n                    enabled={!readOnly && !disabled}\n                    isOpen={isOpen}\n                    renderElement={renderElement}\n                    renderDropdown={renderDropdown}\n                    onOpen={handleOpen}\n                    onClose={handleClose}\n                    onDismiss={handleDismiss}\n                    clickToToggle={false}\n                    offset={8}\n                    alignment={alignment}\n                    fitAvailableHeight\n                    customZIndex={dropdownZIndex}\n                    rootNode={dropdownRootNode}\n                />\n            </DropdownListState>\n        </Wrapper>\n    );\n};\n"],"names":["_a","selectedOptions","placeholders","from","to","options","disabled","className","readOnly","error","testId","id","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","renderCustomCallToAction","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","selectedFromValue","setSelectedFromValue","useState","selectedToValue","setSelectedToValue","focusedInput","setFocusedInput","isOpen","labelButtonRef","useRef","dropdownRef","internalId","useId","listboxId","fromLabelId","toLabelId","useEffect","current","refocus","index","triggerOptionDisplayCallback","show","getDisplayValue","rangeType","selected","value","_b","toString","call","truncateValue","type","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","getCurrentFocused","currentOptions","useMemo","currentSelectedItems","openDropdownFor","focusButton","focus","getButtonLabelledBy","rangeLabelId","concatIds","handleSelectorClick","event","stopPropagation","preventDefault","handleSelectorKeyDown","key","handleListItemClick","item","extractedValue","undefined","handleDismiss","last","handleClear","renderLabel","_jsx","ValueLabel","$truncateType","PlaceholderLabel","renderSelectorContent","RangeSelectorButton","role","onClick","onKeyDown","ref","tabIndex","children","Wrapper","Object","assign","DropdownListState","ElementWithDropdown","enabled","renderElement","_jsxs","StyledInputWrapper","$disabled","$readOnly","$focused","VisuallyHidden","RangeInputInnerContainer","currentActive","ClearIconContainer","ClearIcon","renderDropdown","DropdownList","ariaLabel","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/input-select/input-select.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),r=require("react");require("styled-components"),require("../theme/index.js");var t=require("../util/string-helper.js");require("../shared/dropdown-list/dropdown-label.styles.js");var n=require("../shared/dropdown-list/dropdown-list.js"),s=require("../shared/dropdown-list/dropdown-list-state.js"),i=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var a=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var l=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var o=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),d=require("../shared/input-wrapper/input-wrapper.js");exports.InputSelect=({selectedOption:u,placeholder:c="Select",options:p,disabled:h,error:j,className:m,"data-testid":q,id:w,"aria-labelledby":x,"aria-describedby":b,"aria-invalid":v,enableSearch:y=!1,searchFunction:f,searchPlaceholder:g,valueExtractor:S,valueToStringFunction:T,listExtractor:I,displayValueExtractor:L,onSelectOption:R,onShowOptions:E,onHideOptions:O,onRetry:D,optionsLoadState:C="success",optionTruncationType:$="end",renderCustomSelectedOption:B,renderListItem:N,hideNoResultsDisplay:A,noResultsDescription:_,customLabels:F,renderCustomCallToAction:k,onBlur:H,variant:P="default",readOnly:W,alignment:V,dropdownZIndex:Z,dropdownRootNode:G,dropdownWidth:z})=>{const[J,K]=r.useState(u),[M,Q]=r.useState(!1),[U,X]=r.useState(!1),Y=a.useId(),ee=r.useRef(null),re=r.useRef(null),te=r.useRef(null);r.useEffect((()=>{K(u)}),[u]);const ne=(e,r)=>{var t;null===(t=re.current)||void 0===t||t.focus(),K(e),Q(!1),de(!1),null==R||R(e,r)},se=()=>{M&&(Q(!1),de(!1))},ie=()=>{U||M||X(!0)},ae=e=>{U&&!M&&ee.current&&!ee.current.contains(e.relatedTarget)&&(X(!1),null==H||H())},le=()=>{var e;if(!J)return"";if(L)return L(J);if(S){const r=S(J);return T?T(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return J.toString()},oe=e=>{if("middle"===$){let r=0;return te&&te.current&&(r=te.current.getBoundingClientRect().width),t.StringHelper.truncateOneLine(e,r,120,8)}return e},de=e=>{e?null==E||E():null==O||O()};return e.jsx(s.DropdownListState,{children:e.jsx(l.ElementWithDropdown,{enabled:!W&&!h,isOpen:M,renderElement:()=>e.jsx(d.InputBox,{className:m,"data-testid":q,id:w,ref:ee,tabIndex:-1,onFocus:ie,onBlur:ae,$focused:U,$disabled:h,$readOnly:W,$error:j,children:e.jsx(i.ExpandableElement,{ref:re,disabled:h,expanded:M,listboxId:Y,popupRole:"listbox",readOnly:W,variant:P,"aria-labelledby":x,"aria-describedby":b,"aria-invalid":v,children:e.jsx(o.LabelContainer,{ref:te,$disabled:h,children:J?B?B(J):e.jsx(o.ValueLabel,{$truncateType:$,$variant:P,children:oe(le())}):e.jsx(o.PlaceholderLabel,{$truncateType:$,$variant:P,children:c})})})}),renderDropdown:()=>e.jsx(n.DropdownList,{listboxId:Y,listItems:p,onSelectItem:ne,onDismiss:se,valueExtractor:S,listExtractor:I,enableSearch:y,searchPlaceholder:g,searchFunction:f,selectedItems:J?[J]:[],onRetry:D,itemsLoadState:C,itemTruncationType:$,renderListItem:N,hideNoResultsDisplay:A,noResultsDescription:_,customLabels:F,renderCustomCallToAction:k,variant:P,width:z,matchElementWidth:!0}),onOpen:()=>{Q(!0),de(!0),X(!0)},onClose:e=>{Q(!1),de(!1),"click"!==e&&(X(!1),null==H||H())},onDismiss:()=>{var e;null===(e=re.current)||void 0===e||e.focus(),Q(!1),de(!1)},clickToToggle:!0,offset:8,alignment:V,fitAvailableHeight:!0,customZIndex:Z,rootNode:G})})};
+"use strict";var e=require("react/jsx-runtime"),r=require("react");require("styled-components"),require("../theme/index.js");var t=require("../util/string-helper.js");require("../shared/dropdown-list/dropdown-label.styles.js");var n=require("../shared/dropdown-list/dropdown-list.js"),s=require("../shared/dropdown-list/dropdown-list-state.js"),i=require("../shared/dropdown-list/expandable-element.js");require("@lifesg/react-icons/caret-right"),require("react-virtuoso"),require("../button/button.style.js"),require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var a=require("../util/simple-id-generator.js");require("@react-aria/live-announcer");var l=require("../shared/dropdown-wrapper/element-with-dropdown.js");require("../shared/dropdown-list/dropdown-list.styles.js"),require("../shared/dropdown-list/dropdown-search.js"),require("immer"),require("../external/lodash/_getTag.js"),require("../external/lodash/isArguments.js"),require("../external/lodash/_baseGetTag.js"),require("../external/lodash/isBuffer.js"),require("../external/lodash/isTypedArray.js"),require("../external/lodash/_Stack.js"),require("../external/lodash/_SetCache.js"),require("../external/lodash/_equalByTag.js"),require("../shared/dropdown-list/nested-dropdown-list.styles.js"),require("../shared/dropdown-list/virtuoso-components.js");var o=require("../shared/dropdown-wrapper/dropdown-wrapper.styles.js"),d=require("../shared/input-wrapper/input-wrapper.js");exports.InputSelect=({selectedOption:u,placeholder:c="Select",options:p,disabled:h,error:j,className:m,"data-testid":q,id:w,"aria-labelledby":x,"aria-describedby":b,"aria-invalid":v,enableSearch:y=!1,searchFunction:f,searchPlaceholder:g,valueExtractor:S,valueToStringFunction:T,listExtractor:I,isOptionDisabled:O,displayValueExtractor:D,onSelectOption:L,onShowOptions:R,onHideOptions:E,onRetry:C,optionsLoadState:$="success",optionTruncationType:B="end",renderCustomSelectedOption:N,renderListItem:A,hideNoResultsDisplay:_,noResultsDescription:F,customLabels:k,renderCustomCallToAction:H,onBlur:P,variant:W="default",readOnly:V,alignment:Z,dropdownZIndex:G,dropdownRootNode:z,dropdownWidth:J})=>{const[K,M]=r.useState(u),[Q,U]=r.useState(!1),[X,Y]=r.useState(!1),ee=a.useId(),re=r.useRef(null),te=r.useRef(null),ne=r.useRef(null);r.useEffect((()=>{M(u)}),[u]);const se=(e,r)=>{var t;null===(t=te.current)||void 0===t||t.focus(),M(e),U(!1),ue(!1),null==L||L(e,r)},ie=()=>{Q&&(U(!1),ue(!1))},ae=()=>{X||Q||Y(!0)},le=e=>{X&&!Q&&re.current&&!re.current.contains(e.relatedTarget)&&(Y(!1),null==P||P())},oe=()=>{var e;if(!K)return"";if(D)return D(K);if(S){const r=S(K);return T?T(r):null!==(e=null==r?void 0:r.toString())&&void 0!==e?e:""}return K.toString()},de=e=>{if("middle"===B){let r=0;return ne&&ne.current&&(r=ne.current.getBoundingClientRect().width),t.StringHelper.truncateOneLine(e,r,120,8)}return e},ue=e=>{e?null==R||R():null==E||E()};return e.jsx(s.DropdownListState,{children:e.jsx(l.ElementWithDropdown,{enabled:!V&&!h,isOpen:Q,renderElement:()=>e.jsx(d.InputBox,{className:m,"data-testid":q,id:w,ref:re,tabIndex:-1,onFocus:ae,onBlur:le,$focused:X,$disabled:h,$readOnly:V,$error:j,children:e.jsx(i.ExpandableElement,{ref:te,disabled:h,expanded:Q,listboxId:ee,popupRole:"listbox",readOnly:V,variant:W,"aria-labelledby":x,"aria-describedby":b,"aria-invalid":v,children:e.jsx(o.LabelContainer,{ref:ne,$disabled:h,children:K?N?N(K):e.jsx(o.ValueLabel,{$truncateType:B,$variant:W,children:de(oe())}):e.jsx(o.PlaceholderLabel,{$truncateType:B,$variant:W,children:c})})})}),renderDropdown:()=>e.jsx(n.DropdownList,{listboxId:ee,listItems:p,onSelectItem:se,onDismiss:ie,valueExtractor:S,listExtractor:I,isOptionDisabled:O,enableSearch:y,searchPlaceholder:g,searchFunction:f,selectedItems:K?[K]:[],onRetry:C,itemsLoadState:$,itemTruncationType:B,renderListItem:A,hideNoResultsDisplay:_,noResultsDescription:F,customLabels:k,renderCustomCallToAction:H,variant:W,width:J,matchElementWidth:!0}),onOpen:()=>{U(!0),ue(!0),Y(!0)},onClose:e=>{U(!1),ue(!1),"click"!==e&&(Y(!1),null==P||P())},onDismiss:()=>{var e;null===(e=te.current)||void 0===e||e.focus(),U(!1),ue(!1)},clickToToggle:!0,offset:8,alignment:Z,fitAvailableHeight:!0,customZIndex:G,rootNode:z})})};
 //# sourceMappingURL=input-select.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"input-select.js","sources":["../../../src/input-select/input-select.tsx"],"sourcesContent":["import { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n    selectedOption,\n    placeholder = \"Select\",\n    options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderCustomSelectedOption,\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getDisplayValue = (): string => {\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return (\n                <PlaceholderLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        } else {\n            return (\n                <ValueLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                selectedItems={selected ? [selected] : []}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$truncateType","$variant","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}
+{"version":3,"file":"input-select.js","sources":["../../../src/input-select/input-select.tsx"],"sourcesContent":["import { OpenChangeReason } from \"@floating-ui/react\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport {\n    DropdownList,\n    DropdownListState,\n    ExpandableElement,\n} from \"../shared/dropdown-list\";\nimport { ElementWithDropdown } from \"../shared/dropdown-wrapper\";\nimport {\n    LabelContainer,\n    PlaceholderLabel,\n    ValueLabel,\n} from \"../shared/dropdown-wrapper/dropdown-wrapper.styles\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport { InputSelectProps } from \"./types\";\n\nexport const InputSelect = <T, V>({\n    selectedOption,\n    placeholder = \"Select\",\n    options,\n    disabled,\n    error,\n    className,\n    \"data-testid\": testId,\n    id,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    enableSearch = false,\n    searchFunction,\n    searchPlaceholder,\n    valueExtractor,\n    valueToStringFunction,\n    listExtractor,\n    isOptionDisabled,\n    displayValueExtractor,\n    onSelectOption,\n    onShowOptions,\n    onHideOptions,\n    onRetry,\n    optionsLoadState = \"success\",\n    optionTruncationType = \"end\",\n    renderCustomSelectedOption,\n    renderListItem,\n    hideNoResultsDisplay,\n    noResultsDescription,\n    customLabels,\n    renderCustomCallToAction,\n    onBlur,\n    variant = \"default\",\n    readOnly,\n    alignment,\n    dropdownZIndex,\n    dropdownRootNode,\n    dropdownWidth,\n}: InputSelectProps<T, V>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const [selected, setSelected] = useState<T | undefined>(selectedOption);\n    const [showOptions, setShowOptions] = useState<boolean>(false);\n    const [focused, setFocused] = useState<boolean>(false);\n    const internalId = useId();\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const selectorRef = useRef<HTMLButtonElement>(null);\n    const labelContainerRef = useRef<HTMLDivElement>(null);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(selectedOption);\n    }, [selectedOption]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleListItemClick = (item: T, extractedValue: V) => {\n        selectorRef.current?.focus();\n        setSelected(item);\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        onSelectOption?.(item, extractedValue);\n    };\n\n    const handleListDismiss = () => {\n        if (showOptions) {\n            setShowOptions(false);\n            triggerOptionDisplayCallback(false);\n        }\n    };\n\n    const handleNodeFocus = () => {\n        if (!focused && !showOptions) {\n            setFocused(true);\n        }\n    };\n\n    const handleNodeBlur = (e: React.FocusEvent) => {\n        if (\n            focused &&\n            !showOptions &&\n            nodeRef.current &&\n            !nodeRef.current.contains(e.relatedTarget as Node)\n        ) {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleOpen = () => {\n        setShowOptions(true);\n        triggerOptionDisplayCallback(true);\n        setFocused(true);\n    };\n\n    const handleClose = (reason: OpenChangeReason | undefined) => {\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n\n        // click to toggle should not blur the input\n        if (reason !== \"click\") {\n            setFocused(false);\n            onBlur?.();\n        }\n    };\n\n    const handleDismiss = () => {\n        selectorRef.current?.focus();\n        setShowOptions(false);\n        triggerOptionDisplayCallback(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTION\n    // =============================================================================\n    const getDisplayValue = (): string => {\n        if (!selected) return \"\";\n\n        if (displayValueExtractor) {\n            return displayValueExtractor(selected);\n        }\n\n        if (valueExtractor) {\n            const value = valueExtractor(selected);\n            return valueToStringFunction\n                ? valueToStringFunction(value)\n                : value?.toString() ?? \"\";\n        }\n\n        return selected.toString();\n    };\n\n    const truncateValue = (value: string) => {\n        if (optionTruncationType === \"middle\") {\n            let widthOfElement = 0;\n            if (labelContainerRef && labelContainerRef.current) {\n                widthOfElement =\n                    labelContainerRef.current.getBoundingClientRect().width;\n            }\n\n            return StringHelper.truncateOneLine(value, widthOfElement, 120, 8);\n        }\n        return value;\n    };\n\n    const triggerOptionDisplayCallback = (show: boolean) => {\n        if (show) {\n            onShowOptions?.();\n        } else {\n            onHideOptions?.();\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderLabel = () => {\n        if (!selected) {\n            return (\n                <PlaceholderLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        } else {\n            return (\n                <ValueLabel\n                    $truncateType={optionTruncationType}\n                    $variant={variant}\n                >\n                    {truncateValue(getDisplayValue())}\n                </ValueLabel>\n            );\n        }\n    };\n\n    const renderSelectorContent = () => (\n        <LabelContainer ref={labelContainerRef} $disabled={disabled}>\n            {renderLabel()}\n        </LabelContainer>\n    );\n\n    const renderElement = () => {\n        return (\n            <InputBox\n                className={className}\n                data-testid={testId}\n                id={id}\n                ref={nodeRef}\n                tabIndex={-1}\n                onFocus={handleNodeFocus}\n                onBlur={handleNodeBlur}\n                $focused={focused}\n                $disabled={disabled}\n                $readOnly={readOnly}\n                $error={error}\n            >\n                <ExpandableElement\n                    ref={selectorRef}\n                    disabled={disabled}\n                    expanded={showOptions}\n                    listboxId={internalId}\n                    popupRole=\"listbox\"\n                    readOnly={readOnly}\n                    variant={variant}\n                    aria-labelledby={ariaLabelledBy}\n                    aria-describedby={ariaDescribedBy}\n                    aria-invalid={ariaInvalid}\n                >\n                    {renderSelectorContent()}\n                </ExpandableElement>\n            </InputBox>\n        );\n    };\n\n    const renderDropdown = () => {\n        return (\n            <DropdownList\n                listboxId={internalId}\n                listItems={options}\n                onSelectItem={handleListItemClick}\n                onDismiss={handleListDismiss}\n                valueExtractor={valueExtractor}\n                listExtractor={listExtractor}\n                isOptionDisabled={isOptionDisabled}\n                enableSearch={enableSearch}\n                searchPlaceholder={searchPlaceholder}\n                searchFunction={searchFunction}\n                selectedItems={selected ? [selected] : []}\n                onRetry={onRetry}\n                itemsLoadState={optionsLoadState}\n                itemTruncationType={optionTruncationType}\n                renderListItem={renderListItem}\n                hideNoResultsDisplay={hideNoResultsDisplay}\n                noResultsDescription={noResultsDescription}\n                customLabels={customLabels}\n                renderCustomCallToAction={renderCustomCallToAction}\n                variant={variant}\n                width={dropdownWidth}\n                matchElementWidth\n            />\n        );\n    };\n\n    return (\n        <DropdownListState>\n            <ElementWithDropdown\n                enabled={!readOnly && !disabled}\n                isOpen={showOptions}\n                renderElement={renderElement}\n                renderDropdown={renderDropdown}\n                onOpen={handleOpen}\n                onClose={handleClose}\n                onDismiss={handleDismiss}\n                clickToToggle\n                offset={8}\n                alignment={alignment}\n                fitAvailableHeight\n                customZIndex={dropdownZIndex}\n                rootNode={dropdownRootNode}\n            />\n        </DropdownListState>\n    );\n};\n"],"names":["selectedOption","placeholder","options","disabled","error","className","testId","id","ariaLabelledBy","ariaDescribedBy","ariaInvalid","enableSearch","searchFunction","searchPlaceholder","valueExtractor","valueToStringFunction","listExtractor","isOptionDisabled","displayValueExtractor","onSelectOption","onShowOptions","onHideOptions","onRetry","optionsLoadState","optionTruncationType","renderCustomSelectedOption","renderListItem","hideNoResultsDisplay","noResultsDescription","customLabels","renderCustomCallToAction","onBlur","variant","readOnly","alignment","dropdownZIndex","dropdownRootNode","dropdownWidth","selected","setSelected","useState","showOptions","setShowOptions","focused","setFocused","internalId","useId","nodeRef","useRef","selectorRef","labelContainerRef","useEffect","handleListItemClick","item","extractedValue","_a","current","focus","triggerOptionDisplayCallback","handleListDismiss","handleNodeFocus","handleNodeBlur","e","contains","relatedTarget","getDisplayValue","value","toString","truncateValue","widthOfElement","getBoundingClientRect","width","StringHelper","truncateOneLine","show","_jsx","DropdownListState","children","ElementWithDropdown","enabled","isOpen","renderElement","InputBox","ref","tabIndex","onFocus","$focused","$disabled","$error","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","$truncateType","$variant","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"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"}

package/cjs/navbar/menu.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),r=require("./menu.styles.js");exports.Menu=({items:t,onItemClick:i})=>{const s=e=>n=>{n.stopPropagation(),i(n,e)};return(null==t?void 0:t.length)?n.jsx(r.MobileWrapper,{children:t.map(((t,i)=>{const{children:l,options:o}=t,u=e.__rest(t,["children","options"]),c=`menu__mobile-${i+1}`;return n.jsx(r.MenuItem,{children:n.jsx(r.Link,Object.assign({"data-testid":c},u,o,{onClick:s(t),underlineStyle:"none",children:l}))},i)}))}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("./menu.styles.js");exports.Menu=({items:r,selectedId:n,onItemClick:s})=>{const l=e=>t=>{t.stopPropagation(),s(t,e)};return(null==r?void 0:r.length)?t.jsx(i.MobileWrapper,{children:r.map(((r,s)=>{const{children:o,options:u,weight:a}=r,c=e.__rest(r,["children","options","weight"]),d=`menu__mobile-${s+1}`,h=r.id===n;return t.jsx(i.MenuItem,{children:t.jsx(i.Link,Object.assign({"data-testid":d},c,u,{weight:h?"bold":a,"aria-current":h?"page":void 0,onClick:l(r),underlineStyle:"none",children:o}))},s)}))}):t.jsx(t.Fragment,{})};
 //# sourceMappingURL=menu.js.map

package/cjs/navbar/menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.js","sources":["../../../src/navbar/menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link, MenuItem, MobileWrapper } from \"./menu.styles\";\nimport { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({ items, onItemClick }: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <MobileWrapper>\n            {items.map((item, index) => {\n                const { children, options, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n\n                return (\n                    <MenuItem key={index}>\n                        <Link\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Link>\n                    </MenuItem>\n                );\n            })}\n        </MobileWrapper>\n    );\n};\n"],"names":["items","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","otherItemAttrs","__rest","testId","MenuItem","Link","Object","assign","onClick","underlineStyle"],"mappings":"8HAYoB,EAAOA,QAAOC,kBAC9B,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKH,aAAK,EAALA,EAAOM,QAGRC,EAAAA,IAACC,EAAAA,cAAa,CAAAC,SACTT,EAAMU,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,GAA+BT,EAAnBU,EAAcC,EAAAA,OAAKX,EAA3C,CAAA,WAAA,YACAY,EAAS,gBAAgBJ,EAAQ,IAEvC,OACIJ,MAACS,EAAAA,SAAQ,CAAAP,SACLF,EAAAA,IAACU,OAAIC,OAAAC,OAAA,CAAA,cACYJ,GACTF,EACAD,GACJQ,QAASlB,EAAgBC,GACzBkB,eAAe,OAAMZ,SAEpBA,MARME,EAUJ,MAnBAJ,EAAAA,kBAsBP"}
+{"version":3,"file":"menu.js","sources":["../../../src/navbar/menu.tsx"],"sourcesContent":["import React from \"react\";\nimport { Link, MenuItem, MobileWrapper } from \"./menu.styles\";\nimport { NavItemCommonProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemCommonProps<T>[];\n    selectedId?: string | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const Menu = <T,>({\n    items,\n    selectedId,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    const handleLinkClick = (item: NavItemCommonProps<T>) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation(); // in mobile, this prevents the drawer from intercepting event\n            onItemClick(event, item);\n        };\n    };\n\n    if (!items?.length) return <></>;\n\n    return (\n        <MobileWrapper>\n            {items.map((item, index) => {\n                const { children, options, weight, ...otherItemAttrs } = item;\n                const testId = `menu__mobile-${index + 1}`;\n                const selected = item.id === selectedId;\n\n                return (\n                    <MenuItem key={index}>\n                        <Link\n                            data-testid={testId}\n                            {...otherItemAttrs}\n                            {...options}\n                            weight={selected ? \"bold\" : weight}\n                            aria-current={selected ? \"page\" : undefined}\n                            onClick={handleLinkClick(item)}\n                            underlineStyle=\"none\"\n                        >\n                            {children}\n                        </Link>\n                    </MenuItem>\n                );\n            })}\n        </MobileWrapper>\n    );\n};\n"],"names":["items","selectedId","onItemClick","handleLinkClick","item","event","stopPropagation","length","_jsx","MobileWrapper","children","map","index","options","weight","otherItemAttrs","__rest","testId","selected","id","MenuItem","Link","Object","assign","undefined","onClick","underlineStyle"],"mappings":"8HAaoB,EAChBA,QACAC,aACAC,kBAEA,MAAMC,EAAmBC,GACbC,IACJA,EAAMC,kBACNJ,EAAYG,EAAOD,EAAK,EAIhC,OAAKJ,aAAK,EAALA,EAAOO,QAGRC,EAAAA,IAACC,EAAAA,cAAa,CAAAC,SACTV,EAAMW,KAAI,CAACP,EAAMQ,KACd,MAAMF,SAAEA,EAAQG,QAAEA,EAAOC,OAAEA,GAA8BV,EAAnBW,EAAcC,EAAAA,OAAKZ,EAAnD,CAAA,WAAA,UAAA,WACAa,EAAS,gBAAgBL,EAAQ,IACjCM,EAAWd,EAAKe,KAAOlB,EAE7B,OACIO,EAAAA,IAACY,EAAAA,SAAQ,CAAAV,SACLF,EAAAA,IAACa,EAAAA,KAAIC,OAAAC,OAAA,CAAA,cACYN,GACTF,EACAF,GACJC,OAAQI,EAAW,OAASJ,EAAM,eACpBI,EAAW,YAASM,EAClCC,QAAStB,EAAgBC,GACzBsB,eAAe,OAAMhB,SAEpBA,MAVME,EAYJ,MAtBAJ,EAAAA,kBAyBP"}

package/cjs/navbar/menu.styles.js

@@ -19,7 +19,7 @@
 
     // use border, as padding still shows an extra line after the ellipsis
     border: ${t.Border.solid} transparent;
-    border-width: ${t.Spacing["spacing-12"]} ${t.Spacing["spacing-8"]};
+    border-width: 10px ${t.Spacing["spacing-16"]} 10px ${t.Spacing["spacing-24"]};
     border-radius: ${t.Radius.md};
 
     ${r.lineClampCss(2)}

package/cjs/navbar/menu.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"menu.styles.js","sources":["../../../src/navbar/menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\nexport const MobileWrapper = styled.ul`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"border-selected\"]};\n`;\n\nexport const MenuItem = styled.li`\n    width: 100%;\n    display: flex;\n`;\n\nexport const Link = styled(Typography.LinkBL)`\n    width: 100%;\n    text-align: left;\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    // use border, as padding still shows an extra line after the ellipsis\n    border: ${Border[\"solid\"]} transparent;\n    border-width: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-8\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n`;\n"],"names":["MobileWrapper","styled","ul","Border","Colour","MenuItem","li","Link","Typography","LinkBL","Spacing","Radius","lineClampCss"],"mappings":"kPAKO,MAAMA,EAAgBC,EAAAA,QAAOC,EAAE;;;;;;;;mBAQnBC,EAAAA,OAAO,sBAAsBC,EAAAA,OAAO;EAG1CC,EAAWJ,EAAAA,QAAOK,EAAE;;;EAKpBC,EAAON,EAAAA,QAAOO,aAAWC,OAAO;;;aAGhCL,EAAAA,OAAa;;gBAEVM,EAAAA,QAAQ;;;cAGVP,EAAAA,OAAc;oBACRO,EAAAA,QAAQ,iBAAiBA,EAAAA,QAAQ;qBAChCC,EAAAA,OAAW;;MAE1BC,EAAAA,aAAa;;;;;;4BAMSR,EAAAA,OAAO;iBAClBA,EAAAA,OAAa;;"}
+{"version":3,"file":"menu.styles.js","sources":["../../../src/navbar/menu.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { lineClampCss } from \"../shared/styles\";\nimport { Border, Colour, Radius, Spacing } from \"../theme\";\nimport { Typography } from \"../typography\";\n\nexport const MobileWrapper = styled.ul`\n    list-style: none;\n    display: flex;\n    flex-direction: column;\n\n    margin: 0;\n    padding: 0;\n\n    border-left: ${Border[\"width-040\"]} solid ${Colour[\"border-selected\"]};\n`;\n\nexport const MenuItem = styled.li`\n    width: 100%;\n    display: flex;\n`;\n\nexport const Link = styled(Typography.LinkBL)`\n    width: 100%;\n    text-align: left;\n    color: ${Colour[\"text\"]};\n\n    margin: 0 ${Spacing[\"spacing-8\"]};\n\n    // use border, as padding still shows an extra line after the ellipsis\n    border: ${Border[\"solid\"]} transparent;\n    border-width: 10px ${Spacing[\"spacing-16\"]} 10px ${Spacing[\"spacing-24\"]};\n    border-radius: ${Radius[\"md\"]};\n\n    ${lineClampCss(2)}\n    white-space: pre-wrap;\n\n    &:hover,\n    &:active,\n    &:focus {\n        background-color: ${Colour[\"bg-hover\"]};\n        color: ${Colour[\"text\"]};\n    }\n`;\n"],"names":["MobileWrapper","styled","ul","Border","Colour","MenuItem","li","Link","Typography","LinkBL","Spacing","Radius","lineClampCss"],"mappings":"kPAKO,MAAMA,EAAgBC,EAAAA,QAAOC,EAAE;;;;;;;;mBAQnBC,EAAAA,OAAO,sBAAsBC,EAAAA,OAAO;EAG1CC,EAAWJ,EAAAA,QAAOK,EAAE;;;EAKpBC,EAAON,EAAAA,QAAOO,aAAWC,OAAO;;;aAGhCL,EAAAA,OAAa;;gBAEVM,EAAAA,QAAQ;;;cAGVP,EAAAA,OAAc;yBACHO,EAAAA,QAAQ,sBAAsBA,EAAAA,QAAQ;qBAC1CC,EAAAA,OAAW;;MAE1BC,EAAAA,aAAa;;;;;;4BAMSR,EAAAA,OAAO;iBAClBA,EAAAA,OAAa;;"}

package/cjs/navbar/navbar-items.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),t=require("../menu/menu.js"),r=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:p})=>{const[h,j]=i.useState(-1),[x,m]=i.useState(!1),[b,g]=i.useState(null),v=i.useRef(null),k=s.useId();i.useEffect((()=>{const e=e=>{v.current&&!v.current.contains(e.target)&&(m(!1),j(-1),g(null))};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[]);const $=(e,n)=>i=>{var t;if(i.stopPropagation(),u&&(null===(t=e.subMenu)||void 0===t?void 0:t.length)){const e=!(h===n&&x);j(n),m(e)}p(i,e)},L=(e,n)=>{e.stopPropagation(),p(e,n),m(!1),j(-1)},f=(e,i)=>n.jsx(t.Menu.Content,{id:i,children:n.jsx(t.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(t.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),I=e=>n.jsx(r.Menu,{items:e,onItemClick:L}),q=(i,r)=>{const{children:s,options:p,subMenu:j}=i,m=e.__rest(i,["children","options","subMenu"]),v=!!(null==j?void 0:j.length),L=(e=>{var n;return e.id===d||!!(null===(n=e.subMenu)||void 0===n?void 0:n.length)&&!!e.subMenu.find((e=>e.id===d))})(i),q=u&&v&&h===r&&x,M=!u&&v&&b===r||q,C=null!==b?b===r:L,_=!c&&C,O=C?u?"bold":"semibold":"regular",S=u?`link__mobile-${r+1}`:`link__${r+1}`,w=()=>_?n.jsx(l.LinkIndicator,{"data-testid":`${S}-indicator`,$selected:C}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:v?(e=>{const a=`navbar-submenu-${k}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":S,weight:O,$selected:C,underlineStyle:"none"},m,{"aria-current":L?"page":void 0,"aria-haspopup":"menu","aria-expanded":M,onClick:$(i,r)},p,{children:[n.jsx(l.LinkLabel,{children:s}),w(),u&&v?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${S}-expand-collapse-button`,$selected:C,$expanded:M,focusHighlight:!1,focusOutline:"browser","aria-label":M?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:C})})}):null]})),q&&I(j)]}):n.jsx(t.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:f(j,a),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>g(r),onPopoverDismiss:()=>{g((e=>e===r?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":S,weight:O,$selected:C,"aria-haspopup":"menu","aria-expanded":M},p,{children:[n.jsx(l.LinkLabel,{children:s}),w(),n.jsx(l.ChevronIconDesktop,{$selected:C,$expanded:M})]}))})})(r===a.length-1):n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":S,weight:O,$selected:C,underlineStyle:"none"},m,{"aria-current":L?"page":void 0,onClick:$(i,r)},p,{children:[n.jsx(l.LinkLabel,{children:s}),w()]}))},r)},M=()=>a.map(((e,i)=>{var t;return"component"===e.itemType?n.jsx("li",{children:null!==(t=e.children)&&void 0!==t?t:null},i):q(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:v,children:M()}):n.jsx(l.Wrapper,{ref:v,$alignLeft:o,children:M()}):n.jsx(n.Fragment,{})};
+"use strict";var e=require("../_virtual/_tslib.js"),n=require("react/jsx-runtime"),i=require("react"),r=require("../menu/menu.js"),t=require("./menu.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var l=require("./navbar-items.styles.js");exports.NavbarItems=({items:a,selectedId:d,mobile:u=!1,hideNavBranding:o,hideLinkIndicator:c=!1,onItemClick:p})=>{const[h,j]=i.useState(null),m=i.useRef(null),x=s.useId(),b=e=>{var n;return!!(null===(n=e.subMenu)||void 0===n?void 0:n.some((e=>e.id===d)))},v=u?a.findIndex((e=>"component"!==e.itemType&&b(e))):-1,g=v<0?null:v;i.useEffect((()=>{u&&j(g)}),[u,g]),i.useEffect((()=>{if(u)return;const e=e=>{m.current&&!m.current.contains(e.target)&&j(null)};return document.addEventListener("click",e,!0),()=>{document.removeEventListener("click",e,!0)}}),[u]);const $=(e,n)=>i=>{i.stopPropagation(),u&&j((i=>{var r;return(null===(r=e.subMenu)||void 0===r?void 0:r.length)&&i!==n?n:null})),p(i,e)},k=(e,n)=>{e.stopPropagation(),p(e,n)},L=(e,i)=>n.jsx(r.Menu.Content,{id:i,children:n.jsx(r.Menu.Section,{showDivider:!1,children:e.map(((e,i)=>n.jsx(r.Menu.Link,{href:e.href,children:e.children},`${e.id}-${i}`)))})}),f=e=>n.jsx(t.Menu,{items:e,selectedId:d,onItemClick:k}),I=(i,t)=>{const{children:s,options:p,subMenu:m}=i,v=e.__rest(i,["children","options","subMenu"]),g=!!(null==m?void 0:m.length),k=(e=>e.id===d||b(e))(i),I=u&&g&&h===t,q=!u&&g&&h===t||I,C=u||null===h?k:h===t,M=!c&&C,_=C?u?"bold":"semibold":"regular",E=u?`link__mobile-${t+1}`:`link__${t+1}`,O=()=>M?n.jsx(l.LinkIndicator,{"data-testid":`${E}-indicator`,$selected:C}):null;return n.jsx(l.LinkItem,{$hiddenBranding:o,children:g?(e=>{const a=`navbar-submenu-${x}-${i.id}`;return u?n.jsxs(n.Fragment,{children:[n.jsxs(l.Link,Object.assign({"data-testid":E,$weight:_,$selected:C},v,{"aria-current":k?"page":void 0,"aria-haspopup":"menu","aria-expanded":q,onClick:$(i,t)},p,{children:[n.jsx(l.LinkLabel,{children:s}),O(),u&&g?n.jsx(l.LinkIconContainer,{children:n.jsx(l.ExpandCollapseButton,{"data-testid":`${E}-expand-collapse-button`,$selected:C,$expanded:q,focusHighlight:!1,focusOutline:"browser","aria-label":q?"Collapse":"Expand",children:n.jsx(l.ChevronIcon,{$selected:C})})}):null]})),I&&f(m)]}):n.jsx(r.Menu,{position:e?"bottom-end":"bottom",customOffset:0,menuContent:L(m,a),triggerOnFocus:!0,isModal:!1,onPopoverAppear:()=>{j(t)},onPopoverDismiss:()=>{j((e=>e===t?null:e))},children:n.jsxs(l.LinkButton,Object.assign({type:"button",tabIndex:0,"data-testid":E,$weight:_,$selected:C,"aria-haspopup":"menu","aria-expanded":q},p,{children:[n.jsx(l.LinkLabel,{children:s}),O(),n.jsx(l.ChevronIconDesktop,{$selected:C,$expanded:q})]}))})})(t===a.length-1):n.jsxs(l.Link,Object.assign({tabIndex:0,"data-testid":E,$weight:_,$selected:C},v,{"aria-current":k?"page":void 0,onClick:$(i,t)},p,{children:[n.jsx(l.LinkLabel,{children:s}),O()]}))},t)},q=()=>a.map(((e,i)=>{var r;return"component"===e.itemType?n.jsx("li",{children:null!==(r=e.children)&&void 0!==r?r:null},i):I(e,i)}));return a&&a.length>0?u?n.jsx(l.MobileWrapper,{ref:m,children:q()}):n.jsx(l.Wrapper,{ref:m,$alignLeft:o,children:q()}):n.jsx(n.Fragment,{})};
 //# sourceMappingURL=navbar-items.js.map

package/cjs/navbar/navbar-items.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n    ChevronIcon,\n    ChevronIconDesktop,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number>(-1);\n    const [showSubMenu, setShowSubMenu] = useState<boolean>(false);\n    const [openSubMenuIndex, setOpenSubMenuIndex] = useState<number | null>(\n        null\n    );\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const resetAll = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n        setOpenSubMenuIndex(null);\n    };\n\n    const closeMobileSubMenu = () => {\n        setShowSubMenu(false);\n        setSelectedIndex(-1);\n    };\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean => {\n        if (item.id === selectedId) return true;\n        if (item.subMenu?.length) {\n            return !!item.subMenu.find((s) => s.id === selectedId);\n        }\n        return false;\n    };\n\n    useEffect(() => {\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                resetAll();\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile && item.subMenu?.length) {\n                const nextExpanded = !(selectedIndex === index && showSubMenu);\n                setSelectedIndex(index);\n                setShowSubMenu(nextExpanded);\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n        closeMobileSubMenu();\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu items={subMenu} onItemClick={handleMobileSubLinkClick} />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && openSubMenuIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index && showSubMenu;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            openSubMenuIndex !== null\n                ? openSubMenuIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={selected}\n                        $expanded={isExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                weight={textWeight}\n                $selected={selected}\n                underlineStyle=\"none\"\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            weight={textWeight}\n                            $selected={selected}\n                            underlineStyle=\"none\"\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => setOpenSubMenuIndex(index)}\n                    onPopoverDismiss={() => {\n                        setOpenSubMenuIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                        <ChevronIconDesktop\n                            $selected={selected}\n                            $expanded={isExpanded}\n                        />\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","showSubMenu","setShowSubMenu","openSubMenuIndex","setOpenSubMenuIndex","listRef","useRef","instanceId","useId","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","item","index","stopPropagation","_a","subMenu","length","nextExpanded","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","id","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","find","s","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","weight","underlineStyle","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","prev","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","itemType","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"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"}
+{"version":3,"file":"navbar-items.js","sources":["../../../src/navbar/navbar-items.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from \"react\";\nimport { Menu as DesktopMenu } from \"../menu\";\nimport { TypographyWeight } from \"../typography\";\nimport { Menu as MobileMenu } from \"./menu\";\n\nimport { useId } from \"../util\";\nimport {\n    ChevronIcon,\n    ChevronIconDesktop,\n    ExpandCollapseButton,\n    Link,\n    LinkButton,\n    LinkIconContainer,\n    LinkIndicator,\n    LinkItem,\n    LinkLabel,\n    MobileWrapper,\n    Wrapper,\n} from \"./navbar-items.styles\";\nimport { NavItemCommonProps, NavItemLinkProps, NavItemProps } from \"./types\";\n\ninterface Props<T> {\n    items: NavItemProps<T>[];\n    selectedId?: string | undefined;\n    /** toggle for mobile or desktop view */\n    mobile?: boolean | undefined;\n    hideNavBranding?: boolean | undefined;\n    /** hide the selected LinkIndicator */\n    hideLinkIndicator?: boolean | undefined;\n    onItemClick: (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemProps<T> | NavItemCommonProps<T>\n    ) => void;\n}\n\nexport const NavbarItems = <T,>({\n    items,\n    selectedId,\n    mobile = false,\n    hideNavBranding,\n    hideLinkIndicator = false,\n    onItemClick,\n}: Props<T>): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REFS\n    // =============================================================================\n    const [selectedIndex, setSelectedIndex] = useState<number | null>(null);\n    const listRef = useRef<HTMLUListElement>(null);\n    const instanceId = useId();\n\n    // =============================================================================\n    // HELPERS\n    // =============================================================================\n    const hasSelectedSubMenuItem = (item: NavItemLinkProps<T>): boolean =>\n        !!item.subMenu?.some((subItem) => subItem.id === selectedId);\n\n    const checkSelected = (item: NavItemLinkProps<T>): boolean =>\n        item.id === selectedId || hasSelectedSubMenuItem(item);\n\n    const itemIndexWithSelectedSubItem = mobile\n        ? items.findIndex(\n              (item) =>\n                  item.itemType !== \"component\" &&\n                  hasSelectedSubMenuItem(item as NavItemLinkProps<T>)\n          )\n        : -1;\n    const initialExpandedItemIndex =\n        itemIndexWithSelectedSubItem < 0 ? null : itemIndexWithSelectedSubItem;\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n\n    useEffect(() => {\n        if (!mobile) return;\n\n        setSelectedIndex(initialExpandedItemIndex);\n    }, [mobile, initialExpandedItemIndex]);\n\n    useEffect(() => {\n        if (mobile) return;\n\n        const handleClickOutside = (event: MouseEvent) => {\n            if (\n                listRef.current &&\n                !listRef.current.contains(event.target as Node)\n            ) {\n                setSelectedIndex(null);\n            }\n        };\n        document.addEventListener(\"click\", handleClickOutside, true);\n        return () => {\n            document.removeEventListener(\"click\", handleClickOutside, true);\n        };\n    }, [mobile]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleLinkClick = (item: NavItemLinkProps<T>, index: number) => {\n        return (event: React.MouseEvent<HTMLAnchorElement>) => {\n            event.stopPropagation();\n\n            // mobile expands inline when link has submenu\n            if (mobile) {\n                setSelectedIndex((prev) =>\n                    item.subMenu?.length && prev !== index ? index : null\n                );\n            }\n\n            onItemClick(event, item);\n        };\n    };\n\n    const handleMobileSubLinkClick = (\n        event: React.MouseEvent<HTMLAnchorElement>,\n        item: NavItemCommonProps<T>\n    ) => {\n        event.stopPropagation();\n        onItemClick(event, item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderDesktopSubMenu = (\n        subMenu: NavItemCommonProps<T>[],\n        subMenuId: string\n    ) => (\n        <DesktopMenu.Content id={subMenuId}>\n            <DesktopMenu.Section showDivider={false}>\n                {subMenu.map((item, subIndex) => (\n                    <DesktopMenu.Link\n                        key={`${item.id}-${subIndex}`}\n                        href={item.href}\n                    >\n                        {item.children}\n                    </DesktopMenu.Link>\n                ))}\n            </DesktopMenu.Section>\n        </DesktopMenu.Content>\n    );\n\n    const renderMobileSubMenu = (subMenu: NavItemCommonProps<T>[]) => (\n        <MobileMenu\n            items={subMenu}\n            selectedId={selectedId}\n            onItemClick={handleMobileSubLinkClick}\n        />\n    );\n\n    const renderLinkItem = (item: NavItemLinkProps<T>, index: number) => {\n        const { children, options, subMenu, ...otherItemAttrs } = item;\n\n        const hasSubMenu = !!subMenu?.length;\n\n        const isRouteSelected = checkSelected(item);\n\n        // desktop popover open state\n        const isDesktopExpanded =\n            !mobile && hasSubMenu && selectedIndex === index;\n\n        // mobile inline expanded state\n        const isMobileExpanded =\n            mobile && hasSubMenu && selectedIndex === index;\n\n        const isExpanded = isDesktopExpanded || isMobileExpanded;\n\n        const selected =\n            !mobile && selectedIndex !== null\n                ? selectedIndex === index\n                : isRouteSelected;\n\n        const showIndicator = !hideLinkIndicator && selected;\n\n        const textWeight: TypographyWeight = selected\n            ? mobile\n                ? \"bold\"\n                : \"semibold\"\n            : \"regular\";\n\n        const testId = mobile\n            ? `link__mobile-${index + 1}`\n            : `link__${index + 1}`;\n\n        const renderIndicator = () =>\n            showIndicator ? (\n                <LinkIndicator\n                    data-testid={`${testId}-indicator`}\n                    $selected={selected}\n                />\n            ) : null;\n\n        const renderMobileChevron = () =>\n            mobile && hasSubMenu ? (\n                <LinkIconContainer>\n                    <ExpandCollapseButton\n                        data-testid={`${testId}-expand-collapse-button`}\n                        $selected={selected}\n                        $expanded={isExpanded}\n                        focusHighlight={false}\n                        focusOutline=\"browser\"\n                        aria-label={isExpanded ? \"Collapse\" : \"Expand\"}\n                    >\n                        <ChevronIcon $selected={selected} />\n                    </ExpandCollapseButton>\n                </LinkIconContainer>\n            ) : null;\n\n        const renderLink = () => (\n            <Link\n                tabIndex={0}\n                data-testid={testId}\n                $weight={textWeight}\n                $selected={selected}\n                {...otherItemAttrs}\n                aria-current={isRouteSelected ? \"page\" : undefined}\n                onClick={handleLinkClick(item, index)}\n                {...options}\n            >\n                <LinkLabel>{children}</LinkLabel>\n                {renderIndicator()}\n            </Link>\n        );\n\n        const renderLinkWithSubmenu = (isLastItem: boolean) => {\n            const subMenuId = `navbar-submenu-${instanceId}-${item.id}`;\n\n            if (mobile) {\n                return (\n                    <>\n                        <Link\n                            data-testid={testId}\n                            $weight={textWeight}\n                            $selected={selected}\n                            {...otherItemAttrs}\n                            aria-current={isRouteSelected ? \"page\" : undefined}\n                            aria-haspopup=\"menu\"\n                            aria-expanded={isExpanded}\n                            onClick={handleLinkClick(item, index)}\n                            {...options}\n                        >\n                            <LinkLabel>{children}</LinkLabel>\n                            {renderIndicator()}\n                            {renderMobileChevron()}\n                        </Link>\n\n                        {isMobileExpanded && renderMobileSubMenu(subMenu!)}\n                    </>\n                );\n            }\n\n            return (\n                <DesktopMenu\n                    position={isLastItem ? \"bottom-end\" : \"bottom\"}\n                    customOffset={0}\n                    menuContent={renderDesktopSubMenu(subMenu!, subMenuId)}\n                    triggerOnFocus\n                    isModal={false}\n                    onPopoverAppear={() => {\n                        setSelectedIndex(index);\n                    }}\n                    onPopoverDismiss={() => {\n                        setSelectedIndex((prev) =>\n                            prev === index ? null : prev\n                        );\n                    }}\n                >\n                    <LinkButton\n                        type=\"button\"\n                        tabIndex={0}\n                        data-testid={testId}\n                        $weight={textWeight}\n                        $selected={selected}\n                        aria-haspopup=\"menu\"\n                        aria-expanded={isExpanded}\n                        {...options}\n                    >\n                        <LinkLabel>{children}</LinkLabel>\n                        {renderIndicator()}\n                        <ChevronIconDesktop\n                            $selected={selected}\n                            $expanded={isExpanded}\n                        />\n                    </LinkButton>\n                </DesktopMenu>\n            );\n        };\n\n        return (\n            <LinkItem key={index} $hiddenBranding={hideNavBranding}>\n                {hasSubMenu\n                    ? renderLinkWithSubmenu(index === items.length - 1)\n                    : renderLink()}\n            </LinkItem>\n        );\n    };\n\n    const renderItems = () =>\n        items.map((item, index) => {\n            switch (item.itemType) {\n                case \"component\": {\n                    return <li key={index}>{item.children ?? null}</li>;\n                }\n                case \"link\":\n                default: {\n                    return renderLinkItem(item as NavItemLinkProps<T>, index);\n                }\n            }\n        });\n\n    if (items && items.length > 0) {\n        return mobile ? (\n            <MobileWrapper ref={listRef}>{renderItems()}</MobileWrapper>\n        ) : (\n            <Wrapper ref={listRef} $alignLeft={hideNavBranding}>\n                {renderItems()}\n            </Wrapper>\n        );\n    }\n\n    return <></>;\n};\n"],"names":["items","selectedId","mobile","hideNavBranding","hideLinkIndicator","onItemClick","selectedIndex","setSelectedIndex","useState","listRef","useRef","instanceId","useId","hasSelectedSubMenuItem","item","_a","subMenu","some","subItem","id","itemIndexWithSelectedSubItem","findIndex","itemType","initialExpandedItemIndex","useEffect","handleClickOutside","event","current","contains","target","document","addEventListener","removeEventListener","handleLinkClick","index","stopPropagation","prev","length","handleMobileSubLinkClick","renderDesktopSubMenu","subMenuId","_jsx","DesktopMenu","Content","children","Section","showDivider","map","subIndex","Link","href","renderMobileSubMenu","MobileMenu","renderLinkItem","options","otherItemAttrs","__rest","hasSubMenu","isRouteSelected","checkSelected","isMobileExpanded","isExpanded","selected","showIndicator","textWeight","testId","renderIndicator","LinkIndicator","$selected","LinkItem","$hiddenBranding","isLastItem","_jsxs","_Fragment","Object","assign","$weight","undefined","onClick","LinkLabel","LinkIconContainer","ExpandCollapseButton","$expanded","focusHighlight","focusOutline","ChevronIcon","position","customOffset","menuContent","triggerOnFocus","isModal","onPopoverAppear","onPopoverDismiss","LinkButton","type","tabIndex","ChevronIconDesktop","renderLinkWithSubmenu","renderItems","MobileWrapper","ref","Wrapper","$alignLeft"],"mappings":"kcAmC2B,EACvBA,QACAC,aACAC,UAAS,EACTC,kBACAC,qBAAoB,EACpBC,kBAKA,MAAOC,EAAeC,GAAoBC,EAAAA,SAAwB,MAC5DC,EAAUC,EAAAA,OAAyB,MACnCC,EAAaC,EAAAA,QAKbC,EAA0BC,IAAsC,IAAAC,EAClE,SAAc,QAAZA,EAAAD,EAAKE,eAAO,IAAAD,OAAA,EAAAA,EAAEE,MAAMC,GAAYA,EAAQC,KAAOlB,IAAW,EAK1DmB,EAA+BlB,EAC/BF,EAAMqB,WACDP,GACqB,cAAlBA,EAAKQ,UACLT,EAAuBC,MAE/B,EACAS,EACFH,EAA+B,EAAI,KAAOA,EAM9CI,EAAAA,WAAU,KACDtB,GAELK,EAAiBgB,EAAyB,GAC3C,CAACrB,EAAQqB,IAEZC,EAAAA,WAAU,KACN,GAAItB,EAAQ,OAEZ,MAAMuB,EAAsBC,IAEpBjB,EAAQkB,UACPlB,EAAQkB,QAAQC,SAASF,EAAMG,SAEhCtB,EAAiB,KACrB,EAGJ,OADAuB,SAASC,iBAAiB,QAASN,GAAoB,GAChD,KACHK,SAASE,oBAAoB,QAASP,GAAoB,EAAK,CAClE,GACF,CAACvB,IAKJ,MAAM+B,EAAkB,CAACnB,EAA2BoB,IACxCR,IACJA,EAAMS,kBAGFjC,GACAK,GAAkB6B,IAAQ,IAAArB,EACtB,OAAY,QAAZA,EAAAD,EAAKE,eAAO,IAAAD,OAAA,EAAAA,EAAEsB,SAAUD,IAASF,EAAQA,EAAQ,IAAI,IAI7D7B,EAAYqB,EAAOZ,EAAK,EAI1BwB,EAA2B,CAC7BZ,EACAZ,KAEAY,EAAMS,kBACN9B,EAAYqB,EAAOZ,EAAK,EAMtByB,EAAuB,CACzBvB,EACAwB,IAEAC,EAAAA,IAACC,OAAYC,QAAO,CAACxB,GAAIqB,EAASI,SAC9BH,MAACC,EAAAA,KAAYG,QAAO,CAACC,aAAa,EAAKF,SAClC5B,EAAQ+B,KAAI,CAACjC,EAAMkC,IAChBP,EAAAA,IAACC,EAAAA,KAAYO,KAAI,CAEbC,KAAMpC,EAAKoC,KAAIN,SAEd9B,EAAK8B,UAHD,GAAG9B,EAAKK,MAAM6B,WAUjCG,EAAuBnC,GACzByB,EAAAA,IAACW,EAAAA,KAAU,CACPpD,MAAOgB,EACPf,WAAYA,EACZI,YAAaiC,IAIfe,EAAiB,CAACvC,EAA2BoB,KAC/C,MAAMU,SAAEA,EAAQU,QAAEA,EAAOtC,QAAEA,GAA+BF,EAAnByC,EAAcC,EAAAA,OAAK1C,EAApD,CAAA,WAAA,UAAA,YAEA2C,KAAezC,aAAO,EAAPA,EAASqB,QAExBqB,EApGY,CAAC5C,GACnBA,EAAKK,KAAOlB,GAAcY,EAAuBC,GAmGzB6C,CAAc7C,GAOhC8C,EACF1D,GAAUuD,GAAcnD,IAAkB4B,EAExC2B,GAND3D,GAAUuD,GAAcnD,IAAkB4B,GAMP0B,EAElCE,EACD5D,GAA4B,OAAlBI,EAELoD,EADApD,IAAkB4B,EAGtB6B,GAAiB3D,GAAqB0D,EAEtCE,EAA+BF,EAC/B5D,EACI,OACA,WACJ,UAEA+D,EAAS/D,EACT,gBAAgBgC,EAAQ,IACxB,SAASA,EAAQ,IAEjBgC,EAAkB,IACpBH,EACItB,EAAAA,IAAC0B,EAAAA,6BACgB,GAAGF,cAAkBG,UACvBN,IAEf,KAkGR,OACIrB,EAAAA,IAAC4B,EAAAA,SAAQ,CAAAC,gBAA8BnE,WAClCsD,EAlEqB,CAACc,IAC3B,MAAM/B,EAAY,kBAAkB7B,KAAcG,EAAKK,KAEvD,OAAIjB,EAEIsE,OAAAC,EAAAA,SAAA,CAAA7B,SAAA,CACI4B,EAAAA,KAACvB,EAAAA,KAAIyB,OAAAC,OAAA,CAAA,cACYV,EAAMW,QACVZ,EAAUI,UACRN,GACPP,EAAc,CAAA,eACJG,EAAkB,YAASmB,EAAS,gBACpC,OAAM,gBACLhB,EACfiB,QAAS7C,EAAgBnB,EAAMoB,IAC3BoB,EAAO,CAAAV,SAAA,CAEXH,EAAAA,IAACsC,EAAAA,UAAS,CAAAnC,SAAEA,IACXsB,IAjDjBhE,GAAUuD,EACNhB,EAAAA,IAACuC,EAAAA,kBAAiB,CAAApC,SACdH,EAAAA,IAACwC,EAAAA,qBAAoB,CAAA,cACJ,GAAGhB,2BAA+BG,UACpCN,EAAQoB,UACRrB,EACXsB,gBAAgB,EAChBC,aAAa,UAAS,aACVvB,EAAa,WAAa,kBAEtCpB,EAAAA,IAAC4C,EAAAA,YAAW,CAAAjB,UAAYN,QAGhC,SAwCSF,GAAoBT,EAAoBnC,MAMjDyB,EAAAA,IAACC,EAAAA,KAAW,CACR4C,SAAUf,EAAa,aAAe,SACtCgB,aAAc,EACdC,YAAajD,EAAqBvB,EAAUwB,GAC5CiD,gBAAc,EACdC,SAAS,EACTC,gBAAiB,KACbpF,EAAiB2B,EAAM,EAE3B0D,iBAAkB,KACdrF,GAAkB6B,GACdA,IAASF,EAAQ,KAAOE,GAC3B,WAGLoC,EAAAA,KAACqB,EAAAA,0BACGC,KAAK,SACLC,SAAU,EAAC,cACE9B,EAAMW,QACVZ,YACEF,EAAQ,gBACL,OAAM,gBACLD,GACXP,EAAO,CAAAV,SAAA,CAEXH,EAAAA,IAACsC,EAAAA,UAAS,CAAAnC,SAAEA,IACXsB,IACDzB,EAAAA,IAACuD,EAAAA,mBAAkB,CAAA5B,UACJN,EAAQoB,UACRrB,SAGT,EAORoC,CAAsB/D,IAAUlC,EAAMqC,OAAS,GAlFzDmC,OAACvB,EAAAA,KAAIyB,OAAAC,OAAA,CACDoB,SAAU,gBACG9B,EAAMW,QACVZ,EAAUI,UACRN,GACPP,EAAc,CAAA,eACJG,EAAkB,YAASmB,EACzCC,QAAS7C,EAAgBnB,EAAMoB,IAC3BoB,EAAO,CAAAV,SAAA,CAEXH,EAAAA,IAACsC,EAAAA,UAAS,CAAAnC,SAAEA,IACXsB,SAqEUhC,EAIJ,EAIbgE,EAAc,IAChBlG,EAAM+C,KAAI,CAACjC,EAAMoB,WACb,MACS,cADDpB,EAAKQ,SAEEmB,EAAAA,IAAA,KAAA,CAAAG,iBAAiB7B,EAAAD,EAAK8B,wBAAY,MAAzBV,GAITmB,EAAevC,EAA6BoB,MAKnE,OAAIlC,GAASA,EAAMqC,OAAS,EACjBnC,EACHuC,EAAAA,IAAC0D,gBAAa,CAACC,IAAK3F,EAAOmC,SAAGsD,MAE9BzD,EAAAA,IAAC4D,WAAQD,IAAK3F,EAAO6F,WAAcnG,EAAeyC,SAC7CsD,MAKNzD,EAAAA,kBAAK"}

package/cjs/navbar/navbar-items.styles.js

@@ -1,18 +1,18 @@
-"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),r=require("../shared/clickable-icon/clickable-icon.js"),o=require("../theme/index.js"),i=require("../theme/components/theme-helper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t);const l=a.default.ul`
+"use strict";var e=require("@lifesg/react-icons/chevron-up"),t=require("styled-components"),o=require("../shared/clickable-icon/clickable-icon.js"),r=require("../theme/index.js"),i=require("../theme/components/theme-helper.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(t);const l=a.default.ul`
     display: flex;
     list-style: none;
     position: relative;
 
     ${e=>e.$alignLeft&&"margin-right: auto;"}
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         display: none;
     }
 `,d=a.default.ul`
     display: none;
     list-style: none;
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         display: flex;
         flex-direction: column;
         overflow: hidden;
@@ -26,14 +26,13 @@
         margin-left: ${e=>e.$hiddenBranding?"-0.5rem":"0"};
     }
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         flex-direction: column;
-        padding: 0.125rem 0;
         width: 100%;
         margin-left: 0rem;
     }
 `,c=t.css`
-    ${e=>o.Font[`body-md-${e.weight}`]}
+    ${e=>r.Font[`body-md-${e.$weight}`]}
 
     display: flex;
     position: relative;
@@ -41,7 +40,7 @@
     text-align: center;
     color: ${i.ThemeNavbar["navbar-link-colour-text"]};
     height: 100%;
-    gap: 0.5rem;
+    gap: ${r.Spacing["spacing-16"]};
 
     &:active,
     &:hover,
@@ -50,9 +49,9 @@
         color: ${e=>e.$selected?i.ThemeNavbar["navbar-link-colour-text-selected-hover"]:i.ThemeNavbar["navbar-link-colour-text-hover"]};
     }
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         width: 100%;
-        padding: 0.5rem 1rem;
+        padding: 10px ${r.Spacing["spacing-24"]};
         text-align: left;
     }
 `,u=a.default.a`
@@ -76,13 +75,13 @@
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 3;
     white-space: pre-wrap;
-`,m=a.default.div`
+`,f=a.default.div`
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
     height: 0.25rem;
-    background-color: ${o.Colour["border-selected"]};
+    background-color: ${r.Colour["border-selected"]};
 
     ${e=>e.$selected&&t.css`
             ${u}:active &,
@@ -91,11 +90,11 @@
             ${h}:active &,
             ${h}:hover &,
             ${h}:focus & {
-                background-color: ${o.Colour["border-selected-hover"]};
+                background-color: ${r.Colour["border-selected-hover"]};
             }
         `};
 
-    ${o.MediaQuery.MaxWidth.lg} {
+    ${r.MediaQuery.MaxWidth.lg} {
         left: 0;
         right: unset;
         top: 0;
@@ -103,17 +102,17 @@
         height: 100%;
         width: 0.25rem;
     }
-`,f=a.default.div`
+`,g=a.default.div`
     margin-right: -0.5rem;
-`,g=a.default(r.ClickableIcon)`
+`,$=a.default(o.ClickableIcon)`
     padding: 0.5rem;
     transform: rotate(${e=>e.$expanded?0:180}deg);
     transition: transform 300ms ease-in-out;
-    margin: auto 0.25rem auto 0;
-`,$=a.default(e.ChevronUpIcon)`
+    margin: auto 0;
+`,m=a.default(e.ChevronUpIcon)`
     height: 1.25rem;
     width: 1.25rem;
-    color: ${o.Colour.icon};
+    color: ${r.Colour.icon};
 
     ${u}:active &,
     ${u}:hover &,
@@ -121,13 +120,13 @@
     ${h}:active &,
     ${h}:hover &,
     ${h}:focus & {
-        color: ${e=>e.$selected?o.Colour["icon-selected-hover"]:o.Colour["icon-hover"]};
+        color: ${e=>e.$selected?r.Colour["icon-selected-hover"]:r.Colour["icon-hover"]};
     }
-`,v=a.default($)`
+`,v=a.default(m)`
     transform: rotate(${e=>e.$expanded?0:180}deg);
     transition: transform 300ms ease-in-out;
 
     height: 1.125rem;
     width: 1.125rem;
-`;exports.ChevronIcon=$,exports.ChevronIconDesktop=v,exports.ExpandCollapseButton=g,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=f,exports.LinkIndicator=m,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
+`;exports.ChevronIcon=m,exports.ChevronIconDesktop=v,exports.ExpandCollapseButton=$,exports.Link=u,exports.LinkButton=h,exports.LinkIconContainer=g,exports.LinkIndicator=f,exports.LinkItem=s,exports.LinkLabel=p,exports.MobileWrapper=d,exports.Wrapper=l;
 //# sourceMappingURL=navbar-items.styles.js.map

package/cjs/navbar/navbar-items.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n    $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        padding: 0.125rem 0;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; weight: TypographyWeight }>`\n    ${(props) => Font[`body-md-${props.weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n    gap: 0.5rem;\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${(props) =>\n            props.$selected\n                ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 0.5rem 1rem;\n        text-align: left;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${(props) =>\n        props.$selected &&\n        css`\n            ${Link}:active &,\n            ${Link}:hover &,\n            ${Link}:focus &,\n            ${LinkButton}:active &,\n            ${LinkButton}:hover &,\n            ${LinkButton}:focus & {\n                background-color: ${Colour[\"border-selected-hover\"]};\n            }\n        `};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0.25rem auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    ${Link}:active &,\n    ${Link}:hover &,\n    ${Link}:focus &,\n    ${LinkButton}:active &,\n    ${LinkButton}:hover &,\n    ${LinkButton}:focus & {\n        color: ${(props) =>\n            props.$selected\n                ? Colour[\"icon-selected-hover\"]\n                : Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n\n    height: 1.125rem;\n    width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","weight","ThemeNavbar","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"uTA6BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;;EAQpBK,EAAUC,EAAAA,GAAqD;MAC9DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;;;;;;;iBAQPb,GACNA,EAAMc,UACAD,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;;;;EAMbW,EAAOjB,EAAAA,QAAOkB,CAAmD;MACxEP;EAGOQ,EAAanB,EAAAA,QAAOoB,MAG/B;MACIT;;;;;;;;;;EAYOU,EAAYrB,EAAAA,QAAOsB,GAAG;;;;;;;;EAUtBC,EAAgBvB,EAAAA,QAAOsB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBtB,GACCA,EAAMc,WACNJ,KAAG;cACGK;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCpB,EAAAA,WAAWC,SAASC;;;;;;;;EAUbmB,EAAoBzB,EAAAA,QAAOsB,GAAG;;EAI9BI,EAAuB1B,EAAAA,QAAO2B,EAAAA,cAA0B;;wBAE5CzB,GAAWA,EAAM0B,UAAY,EAAI;;;EAK7CC,EAAc7B,EAAAA,QAAO8B,EAAAA,cAA0B;;;aAG/CN,EAAAA,OAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYjB,GACNA,EAAMc,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;EAIZQ,EAAqBhC,EAAAA,QAAO6B,EAAwB;wBACxC3B,GAAWA,EAAM0B,UAAY,EAAI;;;;;"}
+{"version":3,"file":"navbar-items.styles.js","sources":["../../../src/navbar/navbar-items.styles.tsx"],"sourcesContent":["import { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport styled, { css } from \"styled-components\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Font, MediaQuery, Spacing } from \"../theme\";\nimport { Colour } from \"../theme\";\nimport { ThemeNavbar } from \"../theme/components/theme-helper\";\nimport { TypographyWeight } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected: boolean;\n    $expanded?: boolean;\n}\n\ninterface WrapperStyleProps {\n    $alignLeft: boolean | undefined;\n}\n\ninterface ItemStyleProps {\n    $hiddenBranding: boolean | undefined;\n}\n\n// =============================================================================\n// WRAPPER\n// =============================================================================\n\nexport const Wrapper = styled.ul<WrapperStyleProps>`\n    display: flex;\n    list-style: none;\n    position: relative;\n\n    ${(props) => props.$alignLeft && \"margin-right: auto;\"}\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: none;\n    }\n`;\n\nexport const MobileWrapper = styled.ul`\n    display: none;\n    list-style: none;\n\n    ${MediaQuery.MaxWidth.lg} {\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n    }\n`;\n\n// =============================================================================\n// LINK ITEMS\n// =============================================================================\nexport const LinkItem = styled.li<ItemStyleProps>`\n    display: flex;\n    margin: 0 1rem;\n\n    &:first-child {\n        // negative margin to preserve touch target size for link\n        margin-left: ${(props) => (props.$hiddenBranding ? \"-0.5rem\" : \"0\")};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        flex-direction: column;\n        width: 100%;\n        margin-left: 0rem;\n    }\n`;\n\nconst linkCss = css<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${(props) => Font[`body-md-${props.$weight}`]}\n\n    display: flex;\n    position: relative;\n    align-items: center;\n    text-align: center;\n    color: ${ThemeNavbar[\"navbar-link-colour-text\"]};\n    height: 100%;\n    gap: ${Spacing[\"spacing-16\"]};\n\n    &:active,\n    &:hover,\n    &:focus,\n    &:focus-within {\n        color: ${(props) =>\n            props.$selected\n                ? ThemeNavbar[\"navbar-link-colour-text-selected-hover\"]\n                : ThemeNavbar[\"navbar-link-colour-text-hover\"]};\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        padding: 10px ${Spacing[\"spacing-24\"]};\n        text-align: left;\n    }\n`;\nexport const Link = styled.a<{ $selected: boolean; $weight: TypographyWeight }>`\n    ${linkCss}\n`;\n\nexport const LinkButton = styled.button<{\n    $selected: boolean;\n    $weight: TypographyWeight;\n}>`\n    ${linkCss}\n    background: none;\n    border: 0;\n    padding: 0;\n    cursor: pointer;\n    text-align: left;\n    margin: 0;\n    box-shadow: none;\n    font: inherit;\n    color: inherit;\n`;\n\nexport const LinkLabel = styled.div`\n    flex: 1;\n\n    overflow: hidden;\n    display: -webkit-box;\n    -webkit-box-orient: vertical;\n    -webkit-line-clamp: 3;\n    white-space: pre-wrap;\n`;\n\nexport const LinkIndicator = styled.div<StyleProps>`\n    position: absolute;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    height: 0.25rem;\n    background-color: ${Colour[\"border-selected\"]};\n\n    ${(props) =>\n        props.$selected &&\n        css`\n            ${Link}:active &,\n            ${Link}:hover &,\n            ${Link}:focus &,\n            ${LinkButton}:active &,\n            ${LinkButton}:hover &,\n            ${LinkButton}:focus & {\n                background-color: ${Colour[\"border-selected-hover\"]};\n            }\n        `};\n\n    ${MediaQuery.MaxWidth.lg} {\n        left: 0;\n        right: unset;\n        top: 0;\n        bottom: 0;\n        height: 100%;\n        width: 0.25rem;\n    }\n`;\n\nexport const LinkIconContainer = styled.div`\n    margin-right: -0.5rem;\n`;\n\nexport const ExpandCollapseButton = styled(ClickableIcon)<StyleProps>`\n    padding: 0.5rem;\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n    margin: auto 0;\n`;\n\nexport const ChevronIcon = styled(ChevronUpIcon)<StyleProps>`\n    height: 1.25rem;\n    width: 1.25rem;\n    color: ${Colour.icon};\n\n    ${Link}:active &,\n    ${Link}:hover &,\n    ${Link}:focus &,\n    ${LinkButton}:active &,\n    ${LinkButton}:hover &,\n    ${LinkButton}:focus & {\n        color: ${(props) =>\n            props.$selected\n                ? Colour[\"icon-selected-hover\"]\n                : Colour[\"icon-hover\"]};\n    }\n`;\n\nexport const ChevronIconDesktop = styled(ChevronIcon)<StyleProps>`\n    transform: rotate(${(props) => (props.$expanded ? 0 : 180)}deg);\n    transition: transform 300ms ease-in-out;\n\n    height: 1.125rem;\n    width: 1.125rem;\n`;\n"],"names":["Wrapper","styled","ul","props","$alignLeft","MediaQuery","MaxWidth","lg","MobileWrapper","LinkItem","li","$hiddenBranding","linkCss","css","Font","$weight","ThemeNavbar","Spacing","$selected","Link","a","LinkButton","button","LinkLabel","div","LinkIndicator","Colour","LinkIconContainer","ExpandCollapseButton","ClickableIcon","$expanded","ChevronIcon","ChevronUpIcon","icon","ChevronIconDesktop"],"mappings":"uTA6BO,MAAMA,EAAUC,EAAAA,QAAOC,EAAqB;;;;;MAK5CC,GAAUA,EAAMC,YAAc;;MAE/BC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAgBP,EAAAA,QAAOC,EAAE;;;;MAIhCG,EAAAA,WAAWC,SAASC;;;;;EAUbE,EAAWR,EAAAA,QAAOS,EAAkB;;;;;;uBAMzBP,GAAWA,EAAMQ,gBAAkB,UAAY;;;MAGjEN,EAAAA,WAAWC,SAASC;;;;;EAOpBK,EAAUC,EAAAA,GAAsD;MAC/DV,GAAUW,OAAK,WAAWX,EAAMY;;;;;;aAM1BC,EAAAA,YAAY;;WAEdC,EAAAA,QAAQ;;;;;;iBAMDd,GACNA,EAAMe,UACAF,EAAAA,YAAY,0CACZA,EAAAA,YAAY;;;MAGxBX,EAAAA,WAAWC,SAASC;;wBAEFU,EAAAA,QAAQ;;;EAInBE,EAAOlB,EAAAA,QAAOmB,CAAoD;MACzER;EAGOS,EAAapB,EAAAA,QAAOqB,MAG/B;MACIV;;;;;;;;;;EAYOW,EAAYtB,EAAAA,QAAOuB,GAAG;;;;;;;;EAUtBC,EAAgBxB,EAAAA,QAAOuB,GAAe;;;;;;wBAM3BE,EAAAA,OAAO;;MAExBvB,GACCA,EAAMe,WACNL,KAAG;cACGM;cACAA;cACAA;cACAE;cACAA;cACAA;oCACsBK,EAAAA,OAAO;;;;MAIrCrB,EAAAA,WAAWC,SAASC;;;;;;;;EAUboB,EAAoB1B,EAAAA,QAAOuB,GAAG;;EAI9BI,EAAuB3B,EAAAA,QAAO4B,EAAAA,cAA0B;;wBAE5C1B,GAAWA,EAAM2B,UAAY,EAAI;;;EAK7CC,EAAc9B,EAAAA,QAAO+B,EAAAA,cAA0B;;;aAG/CN,EAAAA,OAAOO;;MAEdd;MACAA;MACAA;MACAE;MACAA;MACAA;iBACYlB,GACNA,EAAMe,UACAQ,EAAAA,OAAO,uBACPA,EAAAA,OAAO;;EAIZQ,EAAqBjC,EAAAA,QAAO8B,EAAwB;wBACxC5B,GAAWA,EAAM2B,UAAY,EAAI;;;;;"}

package/cjs/otp-verification/thumbnail/email-thumbnail.js.map

@@ -1 +1 @@
-{"version":3,"file":"email-thumbnail.js","sources":["../../../../src/otp-verification/thumbnail/email-thumbnail.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colour } from \"../../theme\";\n\ninterface EmailThumbnailProps {\n    width?: number;\n    height?: number;\n    className?: string;\n}\n\nconst StyledSvg = styled.svg`\n    .background-circle {\n        fill: ${Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${Colour[\"bg-available\"]};\n    }\n\n    .accent-light-3 {\n        fill: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    .accent-light-4 {\n        fill: ${Colour[\"icon-primary-subtlest\"]};\n    }\n`;\nexport const EmailThumbnail = ({\n    width = 120,\n    height = 120,\n    className,\n}: EmailThumbnailProps) => {\n    return (\n        <StyledSvg\n            width={width}\n            height={height}\n            viewBox=\"0 0 120 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={className}\n        >\n            <g clipPath=\"url(#clip0_email_icon)\">\n                <circle cx=\"60\" cy=\"60\" r=\"60\" className=\"background-circle\" />\n                <path\n                    d=\"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z\"\n                    className=\"primary-path\"\n                />\n                <path\n                    d=\"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z\"\n                    className=\"accent-light-3\"\n                />\n                <path\n                    d=\"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z\"\n                    className=\"accent-light-4\"\n                />\n                <path\n                    d=\"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z\"\n                    className=\"validation-icon\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_email_icon\">\n                    <rect width=\"120\" height=\"120\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </StyledSvg>\n    );\n};\n"],"names":["StyledSvg","styled","svg","Colour","width","height","className","_jsxs","viewBox","fill","xmlns","children","clipPath","_jsx","cx","cy","r","d","id"],"mappings":"yLAUA,MAAMA,OAAYC,QAAOC,GAAG;;gBAEZC,EAAAA,OAAO;;;;gBAIPA,EAAAA,OAAO;;;;gBAIPA,EAAAA,OAAO;;;;gBAIPA,EAAAA,OAAO;;;;gBAIPA,EAAAA,OAAO;;yBAGO,EAC1BC,QAAQ,IACRC,SAAS,IACTC,eAGIC,OAACP,EAAS,CACNI,MAAOA,EACPC,OAAQA,EACRG,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWA,EAASK,SAAA,CAEpBJ,EAAAA,KAAA,IAAA,CAAGK,SAAS,yBAAwBD,SAAA,CAChCE,EAAAA,IAAA,SAAA,CAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,KAAKV,UAAU,sBACzCO,EAAAA,IAAA,OAAA,CACII,EAAE,mOACFX,UAAU,iBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,iRACFR,KAAK,UAETI,EAAAA,IAAA,OAAA,CACII,EAAE,6RACFX,UAAU,mBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,iWACFX,UAAU,mBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,gzCACFX,UAAU,uBAGlBO,EAAAA,IAAA,OAAA,CAAAF,SACIE,EAAAA,IAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,EAAAA,IAAA,OAAA,CAAMT,MAAM,MAAMC,OAAO,MAAMI,KAAK"}
+{"version":3,"file":"email-thumbnail.js","sources":["../../../../src/otp-verification/thumbnail/email-thumbnail.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { Colour } from \"../../theme\";\n\ninterface EmailThumbnailProps {\n    width?: number;\n    height?: number;\n    className?: string;\n}\n\nconst StyledSvg = styled.svg`\n    .background-circle {\n        fill: ${Colour[\"bg-stronger\"]};\n    }\n\n    .primary-path {\n        fill: ${Colour[\"icon-primary\"]};\n    }\n\n    .validation-icon {\n        fill: ${Colour[\"bg-available\"]};\n    }\n\n    .accent-light-3 {\n        fill: ${Colour[\"icon-primary-subtle\"]};\n    }\n\n    .accent-light-4 {\n        fill: ${Colour[\"icon-primary-subtlest\"]};\n    }\n`;\nexport const EmailThumbnail = ({\n    width = 120,\n    height = 120,\n    className,\n}: EmailThumbnailProps) => {\n    return (\n        <StyledSvg\n            width={width}\n            height={height}\n            viewBox=\"0 0 120 120\"\n            fill=\"none\"\n            xmlns=\"http://www.w3.org/2000/svg\"\n            className={className}\n        >\n            <g clipPath=\"url(#clip0_email_icon)\">\n                <circle cx=\"60\" cy=\"60\" r=\"60\" className=\"background-circle\" />\n                <path\n                    d=\"M22.9744 60.2636L62.1602 72.5619C62.6183 72.7414 63.1075 72.7591 63.5596 72.638C64.0116 72.5169 64.4265 72.2569 64.7334 71.8724L92.5201 41.6289L52.1928 25.0006C51.2645 24.6309 50.2039 24.9151 49.5848 25.6994L22.9744 60.2636Z\"\n                    className=\"primary-path\"\n                />\n                <path\n                    d=\"M72.6935 18.8097L29.2275 30.4564C26.8325 31.0982 25.4042 33.5744 26.0465 35.9714L38.8689 83.8253C39.1907 85.026 40.4254 85.7396 41.6251 85.4182L89.4378 72.6068C90.6374 72.2854 91.3499 71.05 91.0282 69.8493L78.2058 21.9954C77.5635 19.5984 75.0929 18.1668 72.6935 18.8097Z\"\n                    fill=\"white\"\n                />\n                <path\n                    d=\"M64.7456 71.7935C64.4385 72.1773 64.0235 72.4369 63.5715 72.5581C63.1194 72.6792 62.6303 72.6618 62.1724 72.483L23 60.2346L33.4375 99.188C34.0777 101.577 36.5445 102.994 38.9439 102.352L99.7963 86.0462C102.196 85.4033 103.623 82.9425 102.983 80.5533L92.5457 41.5999L64.7456 71.7935Z\"\n                    className=\"accent-light-3\"\n                />\n                <path\n                    d=\"M99.8349 86.0769L38.9824 102.382C36.544 103.036 34.127 101.648 33.4768 99.2216C33.2926 98.5339 33.4491 97.7966 33.8965 97.2409L60.7012 66.8793C61.0084 66.4957 61.4233 66.2361 61.8754 66.115C62.3274 65.9939 62.8166 66.0112 63.2744 66.1898L101.669 79.0814C102.334 79.3389 102.838 79.8992 103.023 80.5869C103.673 83.0134 102.273 85.4235 99.8349 86.0769Z\"\n                    className=\"accent-light-4\"\n                />\n                <path\n                    d=\"M56.1874 49.1387L52.6167 47.0772C52.2767 46.8809 51.9109 46.8352 51.5193 46.9401C51.1288 47.0447 50.8354 47.2671 50.6391 47.6071C50.4263 47.9757 50.3723 48.3558 50.4772 48.7474C50.5819 49.1379 50.8155 49.4283 51.1781 49.6186L55.9386 52.3685C56.2844 52.5863 56.6531 52.6427 57.0447 52.5378C57.4352 52.4332 57.737 52.1971 57.9501 51.8295L63.423 42.35C63.6193 42.01 63.6666 41.65 63.5649 41.2703C63.4628 40.8894 63.2418 40.6009 62.9017 40.4045C62.5617 40.2082 62.1958 40.1625 61.8043 40.2674C61.4138 40.372 61.1204 40.5944 60.924 40.9344L56.1874 49.1387ZM61.0069 59.8842C59.152 60.3812 57.3145 60.4964 55.4942 60.2299C53.674 59.9633 51.9987 59.3883 50.4684 58.5048C48.9382 57.6213 47.6026 56.458 46.4616 55.0148C45.3206 53.5717 44.5017 51.9227 44.0046 50.0678C43.5076 48.2129 43.3924 46.3754 43.6589 44.5551C43.9255 42.7348 44.5005 41.0595 45.384 39.5293C46.2674 37.999 47.4308 36.6634 48.8739 35.5224C50.317 34.3814 51.966 33.5625 53.8208 33.0655C55.6757 32.5685 57.5132 32.4532 59.3335 32.7198C61.1537 32.9863 62.829 33.5613 64.3593 34.4448C65.8895 35.3283 67.2251 36.4917 68.3661 37.9348C69.5071 39.378 70.326 41.027 70.8231 42.8818C71.3201 44.7367 71.4353 46.5743 71.1688 48.3945C70.9023 50.2148 70.3272 51.8901 69.4438 53.4204C68.5603 54.9506 67.3969 56.2863 65.9538 57.4272C64.5107 58.5682 62.8617 59.3872 61.0069 59.8842Z\"\n                    className=\"validation-icon\"\n                />\n            </g>\n            <defs>\n                <clipPath id=\"clip0_email_icon\">\n                    <rect width=\"120\" height=\"120\" fill=\"white\" />\n                </clipPath>\n            </defs>\n        </StyledSvg>\n    );\n};\n"],"names":["StyledSvg","styled","svg","Colour","width","height","className","_jsxs","viewBox","fill","xmlns","children","clipPath","_jsx","cx","cy","r","d","id"],"mappings":"yLASA,MAAMA,OAAYC,QAAOC,GAAG;;gBAEZC,EAAAA,OAAO;;;;gBAIPA,EAAAA,OAAO;;;;gBAIPA,EAAAA,OAAO;;;;gBAIPA,EAAAA,OAAO;;;;gBAIPA,EAAAA,OAAO;;yBAGO,EAC1BC,QAAQ,IACRC,SAAS,IACTC,eAGIC,OAACP,EAAS,CACNI,MAAOA,EACPC,OAAQA,EACRG,QAAQ,cACRC,KAAK,OACLC,MAAM,6BACNJ,UAAWA,EAASK,SAAA,CAEpBJ,EAAAA,KAAA,IAAA,CAAGK,SAAS,yBAAwBD,SAAA,CAChCE,EAAAA,IAAA,SAAA,CAAQC,GAAG,KAAKC,GAAG,KAAKC,EAAE,KAAKV,UAAU,sBACzCO,EAAAA,IAAA,OAAA,CACII,EAAE,mOACFX,UAAU,iBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,iRACFR,KAAK,UAETI,EAAAA,IAAA,OAAA,CACII,EAAE,6RACFX,UAAU,mBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,iWACFX,UAAU,mBAEdO,EAAAA,IAAA,OAAA,CACII,EAAE,gzCACFX,UAAU,uBAGlBO,EAAAA,IAAA,OAAA,CAAAF,SACIE,EAAAA,IAAA,WAAA,CAAUK,GAAG,mBAAkBP,SAC3BE,EAAAA,IAAA,OAAA,CAAMT,MAAM,MAAMC,OAAO,MAAMI,KAAK"}