@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/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    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":["InputSelect","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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"}
+{"version":3,"file":"input-select.js","sources":["../../src/input-select/input-select.tsx"],"sourcesContent":["import type { OpenChangeReason } from \"@floating-ui/react\";\nimport type React from \"react\";\nimport { useEffect, useRef, useState } from \"react\";\n\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\";\nimport { InputBox } from \"../shared/input-wrapper/input-wrapper\";\nimport { useId } from \"../util\";\nimport { StringHelper } from \"../util/string-helper\";\nimport type { InputSelectProps } from \"./types\";\n\n// @catalog\n/**\n * A single-selection dropdown input.\n *\n * Use `InputSelect` when the user must pick exactly one item from a list.\n * @keywords combobox, dropdown, field, form, input, picker\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                    variant={variant}\n                    truncateType={optionTruncationType}\n                >\n                    {placeholder}\n                </PlaceholderLabel>\n            );\n        } else if (renderCustomSelectedOption) {\n            return renderCustomSelectedOption(selected);\n        } else {\n            return (\n                <ValueLabel\n                    variant={variant}\n                    truncateType={optionTruncationType}\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":["InputSelect","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","ExpandableElement","expanded","listboxId","popupRole","LabelContainer","ValueLabel","truncateType","PlaceholderLabel","renderDropdown","DropdownList","listItems","onSelectItem","onDismiss","selectedItems","itemsLoadState","itemTruncationType","matchElementWidth","onOpen","onClose","reason","clickToToggle","offset","fitAvailableHeight","customZIndex","rootNode"],"mappings":"4rEA2BaA,EAAc,EACvBC,iBACAC,cAAc,SACdC,UACAC,WACAC,QACAC,YACA,cAAeC,EACfC,KACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAChBC,gBAAe,EACfC,iBACAC,oBACAC,iBACAC,wBACAC,gBACAC,mBACAC,wBACAC,iBACAC,gBACAC,gBACAC,UACAC,mBAAmB,UACnBC,uBAAuB,MACvBC,6BACAC,iBACAC,uBACAC,uBACAC,eACAC,2BACAC,SACAC,UAAU,UACVC,WACAC,YACAC,iBACAC,mBACAC,oBAKA,MAAOC,EAAUC,GAAeC,EAAwBxC,IACjDyC,GAAaC,IAAkBF,GAAkB,IACjDG,GAASC,IAAcJ,GAAkB,GAC1CK,GAAaC,IAEbC,GAAUC,EAAuB,MACjCC,GAAcD,EAA0B,MACxCE,GAAoBF,EAAuB,MAKjDG,GAAU,KACNZ,EAAYvC,EAAe,GAC5B,CAACA,IAKJ,MAAMoD,GAAsB,CAACC,EAASC,WACf,QAAnBC,EAAAN,GAAYO,eAAO,IAAAD,GAAAA,EAAEE,QACrBlB,EAAYc,GACZX,IAAe,GACfgB,IAA6B,GAE7BvC,SAAAA,EAAiBkC,EAAMC,EAAe,EAGpCK,GAAoB,KAClBlB,KACAC,IAAe,GACfgB,IAA6B,GACjC,EAGEE,GAAkB,KACfjB,IAAYF,IACbG,IAAW,EACf,EAGEiB,GAAkBC,IAEhBnB,KACCF,IACDM,GAAQS,UACPT,GAAQS,QAAQO,SAASD,EAAEE,iBAE5BpB,IAAW,GACXb,SAAAA,IACJ,EA6BEkC,GAAkB,WACpB,IAAK3B,EAAU,MAAO,GAEtB,GAAIpB,EACA,OAAOA,EAAsBoB,GAGjC,GAAIxB,EAAgB,CAChB,MAAMoD,EAAQpD,EAAewB,GAC7B,OAAOvB,EACDA,EAAsBmD,GACL,QAAjBX,EAAAW,aAAK,EAALA,EAAOC,kBAAU,IAAAZ,EAAAA,EAAI,EAC/B,CAEA,OAAOjB,EAAS6B,UAAU,EAGxBC,GAAiBF,IACnB,GAA6B,WAAzB1C,EAAmC,CACnC,IAAI6C,EAAiB,EAMrB,OALInB,IAAqBA,GAAkBM,UACvCa,EACInB,GAAkBM,QAAQc,wBAAwBC,OAGnDC,EAAaC,gBAAgBP,EAAOG,EAAgB,IAAK,EACpE,CACA,OAAOH,CAAK,EAGVR,GAAgCgB,IAC9BA,EACAtD,SAAAA,IAEAC,SAAAA,GACJ,EAkGJ,OACIsD,EAACC,EAAiB,CAAAC,SACdF,EAACG,EAAmB,CAChBC,SAAU9C,IAAa9B,EACvB6E,OAAQvC,GACRwC,cAnEU,IAEdN,EAACO,GACG7E,UAAWA,EAAS,cACPC,EACbC,GAAIA,EACJ4E,IAAKpC,GACLqC,UAAU,EACVC,QAASzB,GACT7B,OAAQ8B,GACRlB,QAASA,GACTxC,SAAUA,EACV8B,SAAUA,EACV7B,MAAOA,WAEPuE,EAACW,GACGH,IAAKlC,GACL9C,SAAUA,EACVoF,SAAU9C,GACV+C,UAAW3C,GACX4C,UAAU,UACVxD,SAAUA,EACVD,QAASA,EAAO,kBACCxB,qBACCC,EAAe,eACnBC,EAAWmE,SA9BrCF,EAACe,EAAc,CAACP,IAAKjC,GAAmB/C,SAAUA,WAxB7CmC,EASMb,EACAA,EAA2Ba,GAG9BqC,EAACgB,GACG3D,QAASA,EACT4D,aAAcpE,EAAoBqD,SAEjCT,GAAcH,QAfnBU,EAACkB,EAAgB,CACb7D,QAASA,EACT4D,aAAcpE,EAAoBqD,SAEjC5E,UA2FL6F,eAnCW,IAEfnB,EAACoB,EAAY,CACTP,UAAW3C,GACXmD,UAAW9F,EACX+F,aAAc7C,GACd8C,UAAWvC,GACX7C,eAAgBA,EAChBE,cAAeA,EACfC,iBAAkBA,EAClBN,aAAcA,EACdE,kBAAmBA,EACnBD,eAAgBA,EAChBuF,cAAe7D,EAAW,CAACA,GAAY,GACvChB,QAASA,EACT8E,eAAgB7E,EAChB8E,mBAAoB7E,EACpBE,eAAgBA,EAChBC,qBAAsBA,EACtBC,qBAAsBA,EACtBC,aAAcA,EACdC,yBAA0BA,EAC1BE,QAASA,EACTuC,MAAOlC,EACPiE,mBAAiB,IAYjBC,OAtKO,KACf7D,IAAe,GACfgB,IAA6B,GAC7Bd,IAAW,EAAK,EAoKR4D,QAjKSC,IACjB/D,IAAe,GACfgB,IAA6B,GAGd,UAAX+C,IACA7D,IAAW,GACXb,SAAAA,IACJ,EA0JQmE,UAvJU,WACC,QAAnB3C,EAAAN,GAAYO,eAAO,IAAAD,GAAAA,EAAEE,QACrBf,IAAe,GACfgB,IAA6B,EAAM,EAqJ3BgD,eAAa,EACbC,OAAQ,EACRzE,UAAWA,EACX0E,oBAAkB,EAClBC,aAAc1E,EACd2E,SAAU1E,KAEE"}

package/input-select/types.d.ts

@@ -1,56 +1,112 @@
-import { RefObject } from "react";
-import { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list/types";
-import { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+import type { RefObject } from "react";
+import type { DropdownCustomLabelProps, DropdownDisplayProps, DropdownSearchProps, DropdownVariantType, ItemsLoadStateType, TruncateType } from "../shared/dropdown-list/types";
+import type { DropdownAlignmentType } from "../shared/dropdown-wrapper";
+/**
+ * Options configuration for `InputSelect`.
+ */
 export interface InputSelectOptionsProps<T> {
+    /** The list of selectable options rendered in the dropdown. */
     options: T[];
     /**
-     * Used when options are loaded from an api call.
-     * Values: "loading" | "fail" | "success"
+     * Indicates the load state of options fetched asynchronously.
+     * Renders a loading spinner, error retry, or the list depending on the state.
+     *
+     * @default "success"
      */
     optionsLoadState?: ItemsLoadStateType | undefined;
-    /** Specifies the truncation type. Truncated text will be replaced with ellipsis. Values: "middle" | "end" */
+    /**
+     * Controls how long option labels are truncated when they overflow.
+     *
+     * @default "end"
+     */
     optionTruncationType?: TruncateType | undefined;
+    /** Called when the dropdown list becomes visible. */
     onShowOptions?: (() => void) | undefined;
+    /** Called when the dropdown list is hidden. */
     onHideOptions?: (() => void) | undefined;
+    /** Called when the user activates the retry action after a load failure. */
     onRetry?: (() => void) | undefined;
 }
+/** Common presentation and state props shared across select components. */
 export interface InputSelectSharedProps<T> {
-    /** HTML button props */
+    /** Name attribute forwarded to the underlying button element. */
     name?: string | undefined;
-    /** Component specific props */
+    /** The list of selectable options. */
     options: T[];
+    /** Placeholder text shown when no option is selected. */
     placeholder?: string | undefined;
     disabled?: boolean | undefined;
+    /** Renders the trigger in an error state. */
     error?: boolean | undefined;
     "data-testid"?: string | undefined;
 }
+/**
+ * Props for the `InputSelect` component.
+ *
+ * `T` is the option item type; `V` is the extracted value type returned by
+ * `valueExtractor`.
+ */
 export interface InputSelectProps<T, V> extends React.HTMLAttributes<HTMLElement>, InputSelectOptionsProps<T>, InputSelectSharedProps<T>, DropdownDisplayProps<T, V>, DropdownSearchProps<T> {
     readOnly?: boolean | undefined;
+    /** The currently selected option. The component syncs to this value on each render. */
     selectedOption?: T | undefined;
+    /**
+     * Called when the user picks an item from the dropdown.
+     *
+     * @param option The full option object that was selected.
+     * @param extractedValue The value derived from the option via `valueExtractor`.
+     */
     onSelectOption?: ((option: T, extractedValue: V) => void) | undefined;
-    /** Function to derive display value for selected option */
+    /**
+     * Derives the display string shown in the trigger for the selected option.
+     * Takes precedence over `valueExtractor` + `valueToStringFunction`.
+     */
     displayValueExtractor?: ((option: T) => string) | undefined;
-    /** Function to convert value into a string */
+    /** Function to convert selected value into a display string */
     valueToStringFunction?: ((value: V) => string) | undefined;
-    /** Function to render selected custom component */
+    /**
+     * Renders a custom element for the currently selected option.
+     */
     renderCustomSelectedOption?: ((option: T) => JSX.Element) | undefined;
+    /**
+     * Called when focus leaves both the trigger and dropdown.
+     */
     onBlur?: (() => void) | undefined;
+    /**
+     * Visual size variant of the trigger and dropdown.
+     *
+     * @default "default"
+     */
     variant?: DropdownVariantType | undefined;
+    /** Aligns the dropdown relative to the trigger element. */
     alignment?: DropdownAlignmentType | undefined;
+    /** CSS `z-index` applied to the dropdown overlay. */
     dropdownZIndex?: number | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
+     *
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * @default document.body
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Custom width for the dropdown in pixels. When specified, the dropdown will use this
-     * width instead of matching the input element width.
+     * Custom width for the dropdown. When specified, the dropdown uses this
+     * width instead of matching the trigger element width.
      */
     dropdownWidth?: string | undefined;
+    /**
+     * Overrides the default labels shown inside the dropdown and on the trigger.
+     */
     customLabels?: DropdownCustomLabelProps | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `InputSelectProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type InputSelectPartialProps<T, V> = Omit<InputSelectProps<T, V>, "error">;

package/input-slider/input-slider.d.ts

@@ -1,2 +1,9 @@
-import { InputSliderProps } from "./types";
+import type { InputSliderProps } from "./types";
+/**
+ * A single-thumb slider for selecting one numeric value within a range.
+ *
+ * Use `InputSlider` when a user needs to pick a single point on a continuous
+ * scale without a precise value. For selecting a range between two values, use `InputRangeSlider` instead.
+ * @keywords field, form, input, range, slider
+ */
 export declare const InputSlider: ({ value, ariaLabel, onChange, onChangeEnd, ...otherProps }: InputSliderProps) => import("react/jsx-runtime").JSX.Element;

package/input-slider/input-slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"input-slider.js","sources":["../../src/input-slider/input-slider.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport { InputSliderProps } from \"./types\";\n\nexport const InputSlider = ({\n    value,\n    ariaLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection[0]) {\n            setSelection(initialiseSelection());\n        }\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChange?.(newVal);\n    };\n\n    const handleChangeEnd = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChangeEnd?.(newVal);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        return value != undefined ? [value] : [0];\n    }\n\n    return (\n        <InputRangeSlider\n            {...otherProps}\n            value={selection}\n            numOfThumbs={1}\n            onChange={handleChange}\n            onChangeEnd={handleChangeEnd}\n            ariaLabels={ariaLabel ? [ariaLabel] : undefined}\n        />\n    );\n};\n"],"names":["InputSlider","_a","value","ariaLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","useEffect","undefined","_jsx","InputRangeSlider","Object","assign","numOfThumbs","newVal","ariaLabels"],"mappings":"sNAIO,MAAMA,EAAeC,IAAA,IAAAC,MACxBA,EAAKC,UACLA,EAASC,SACTA,EAAQC,YACRA,GAAWJ,EACRK,EAAUC,EAAAN,EALW,CAAA,QAAA,YAAA,WAAA,gBAUxB,MAAOO,EAAWC,GAAgBC,EAAmBC,KAKrDC,GAAU,KACFV,IAAUM,EAAU,IACpBC,EAAaE,IACjB,GACD,CAACT,IAoBJ,SAASS,IACL,OAAgBE,MAATX,EAAqB,CAACA,GAAS,CAAC,EAC3C,CAEA,OACIY,EAACC,EAAgBC,OAAAC,OAAA,CAAA,EACTX,GACJJ,MAAOM,EACPU,YAAa,EACbd,SAxBcF,IAClB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdf,SAAAA,EAAWe,EAAO,EAsBdd,YAnBiBH,IACrB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdd,SAAAA,EAAcc,EAAO,EAiBjBC,WAAYjB,EAAY,CAACA,QAAaU,IACxC"}
+{"version":3,"file":"input-slider.js","sources":["../../src/input-slider/input-slider.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nimport { InputRangeSlider } from \"../input-range-slider\";\nimport type { InputSliderProps } from \"./types\";\n\n// @catalog\n/**\n * A single-thumb slider for selecting one numeric value within a range.\n *\n * Use `InputSlider` when a user needs to pick a single point on a continuous\n * scale without a precise value. For selecting a range between two values, use `InputRangeSlider` instead.\n * @keywords field, form, input, range, slider\n */\nexport const InputSlider = ({\n    value,\n    ariaLabel,\n    onChange,\n    onChangeEnd,\n    ...otherProps\n}: InputSliderProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [selection, setSelection] = useState<number[]>(initialiseSelection());\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (value !== selection[0]) {\n            setSelection(initialiseSelection());\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleChange = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChange?.(newVal);\n    };\n\n    const handleChangeEnd = (value: number[]) => {\n        const [newVal] = value;\n        setSelection([newVal]);\n        onChangeEnd?.(newVal);\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    function initialiseSelection() {\n        return value != undefined ? [value] : [0];\n    }\n\n    return (\n        <InputRangeSlider\n            {...otherProps}\n            value={selection}\n            numOfThumbs={1}\n            onChange={handleChange}\n            onChangeEnd={handleChangeEnd}\n            ariaLabels={ariaLabel ? [ariaLabel] : undefined}\n        />\n    );\n};\n"],"names":["InputSlider","_a","value","ariaLabel","onChange","onChangeEnd","otherProps","__rest","selection","setSelection","useState","initialiseSelection","useEffect","undefined","_jsx","InputRangeSlider","Object","assign","numOfThumbs","newVal","ariaLabels"],"mappings":"sNAaO,MAAMA,EAAeC,IAAA,IAAAC,MACxBA,EAAKC,UACLA,EAASC,SACTA,EAAQC,YACRA,GAAWJ,EACRK,EAAUC,EAAAN,EALW,CAAA,QAAA,YAAA,WAAA,gBAUxB,MAAOO,EAAWC,GAAgBC,EAAmBC,KAKrDC,GAAU,KACFV,IAAUM,EAAU,IACpBC,EAAaE,IACjB,GAED,CAACT,IAoBJ,SAASS,IACL,OAAgBE,MAATX,EAAqB,CAACA,GAAS,CAAC,EAC3C,CAEA,OACIY,EAACC,EAAgBC,OAAAC,OAAA,CAAA,EACTX,GACJJ,MAAOM,EACPU,YAAa,EACbd,SAxBcF,IAClB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdf,SAAAA,EAAWe,EAAO,EAsBdd,YAnBiBH,IACrB,MAAOiB,GAAUjB,EACjBO,EAAa,CAACU,IACdd,SAAAA,EAAcc,EAAO,EAiBjBC,WAAYjB,EAAY,CAACA,QAAaU,IACxC"}

package/input-slider/types.d.ts

@@ -1,9 +1,28 @@
-import { BaseSliderProps } from "../input-range-slider/types";
+import type { BaseSliderProps } from "../input-range-slider/types";
+/**
+ * Props for the `InputSlider` component.
+ */
 export interface InputSliderProps extends BaseSliderProps {
+    /**
+     * The controlled value of the thumb.
+     *
+     * @default 0
+     */
     value?: number | undefined;
+    /**
+     * Accessible label for the thumb.
+     */
     ariaLabel?: string | undefined;
-    /** Called on every selection change */
+    /**
+     * Called on every selection change.
+     *
+     * @param value The updated thumb value.
+     */
     onChange?: ((value: number) => void) | undefined;
-    /** Called when the thumb is released after selection is complete */
+    /**
+     * Called when a thumb is released after selection is complete.
+     *
+     * @param value The final thumb value.
+     */
     onChangeEnd?: ((value: number) => void) | undefined;
 }

package/input-textarea/textarea-counter.js

@@ -1,2 +1,2 @@
-import{jsx as t,Fragment as r}from"react/jsx-runtime";import e,{useState as n,useEffect as o}from"react";import{CounterLabel as a}from"./textara-counter.style.js";const c=({value:c,maxLength:i,renderCustomCounter:l})=>{const[s,m]=n("");o((()=>{m(u(`${c||""}`))}),[c,i]);const u=t=>{if(l)return l(i,t.toString().length);{const r=i-t.toString().length;return 1===r?`${r} character left`:`${r.toLocaleString()} characters left`}};return t(r,{children:e.isValidElement(s)?s:t(a,{"data-testid":"counter-label",children:s})})};export{c as TextareaCounter};
+import{jsx as t,Fragment as e}from"react/jsx-runtime";import r,{useState as n,useEffect as o}from"react";import{counterLabel as a}from"./textarea-counter.styles.js";const c=({value:c,maxLength:l,renderCustomCounter:s})=>{const[i,m]=n("");o((()=>{m(u(`${c||""}`))}),[c,l]);const u=t=>{if(s)return s(l,t.toString().length);{const e=l-t.toString().length;return 1===e?`${e} character left`:`${e.toLocaleString()} characters left`}};return t(e,{children:r.isValidElement(i)?i:t("p",{className:a,"data-testid":"counter-label",children:i})})};export{c as TextareaCounter};
 //# sourceMappingURL=textarea-counter.js.map

package/input-textarea/textarea-counter.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea-counter.js","sources":["../../src/input-textarea/textarea-counter.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { CounterLabel } from \"./textara-counter.style\";\n\ninterface Props {\n    value: string | number | readonly string[] | undefined;\n    maxLength: number;\n    renderCustomCounter?: (\n        maxLength: number,\n        currentValueLength: number\n    ) => JSX.Element;\n}\n\nexport const TextareaCounter = ({\n    value,\n    maxLength,\n    renderCustomCounter,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [counterLabel, setCounterLabel] = useState<\n        string | number | readonly string[] | JSX.Element\n    >(\"\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setCounterLabel(getCounterLabel(`${value || \"\"}`));\n    }, [value, maxLength]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCounterLabel = (value: string | number | readonly string[]) => {\n        if (renderCustomCounter) {\n            return renderCustomCounter(maxLength, value.toString().length);\n        } else {\n            const remainingLength = maxLength - value.toString().length;\n            if (remainingLength === 1) {\n                return `${remainingLength} character left`;\n            } else {\n                return `${remainingLength.toLocaleString()} characters left`;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <>\n            {React.isValidElement(counterLabel) ? (\n                counterLabel\n            ) : (\n                <CounterLabel data-testid=\"counter-label\">\n                    {counterLabel}\n                </CounterLabel>\n            )}\n        </>\n    );\n};\n"],"names":["TextareaCounter","value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","CounterLabel"],"mappings":"mKAYO,MAAMA,EAAkB,EAC3BC,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAEtC,IAKFC,GAAU,KACNF,EAAgBG,EAAgB,GAAGP,GAAS,MAAM,GACnD,CAACA,EAAOC,IAKX,MAAMM,EAAmBP,IACrB,GAAIE,EACA,OAAOA,EAAoBD,EAAWD,EAAMQ,WAAWC,QACpD,CACH,MAAMC,EAAkBT,EAAYD,EAAMQ,WAAWC,OACrD,OAAwB,IAApBC,EACO,GAAGA,mBAEH,GAAGA,EAAgBC,kCAElC,GAMJ,OACIC,EAAAC,EAAA,CAAAC,SACKC,EAAMC,eAAeb,GAAa,EAG/BS,EAACK,EAAY,CAAA,cAAa,gBAAeH,SACpCX,KAGV"}
+{"version":3,"file":"textarea-counter.js","sources":["../../src/input-textarea/textarea-counter.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\n\nimport * as styles from \"./textarea-counter.styles\";\n\ninterface Props {\n    value: string | number | readonly string[] | undefined;\n    maxLength: number;\n    renderCustomCounter?: (\n        maxLength: number,\n        currentValueLength: number\n    ) => JSX.Element;\n}\n\nexport const TextareaCounter = ({\n    value,\n    maxLength,\n    renderCustomCounter,\n}: Props): JSX.Element => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [counterLabel, setCounterLabel] = useState<\n        string | number | readonly string[] | JSX.Element\n    >(\"\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setCounterLabel(getCounterLabel(`${value || \"\"}`));\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, [value, maxLength]);\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCounterLabel = (value: string | number | readonly string[]) => {\n        if (renderCustomCounter) {\n            return renderCustomCounter(maxLength, value.toString().length);\n        } else {\n            const remainingLength = maxLength - value.toString().length;\n            if (remainingLength === 1) {\n                return `${remainingLength} character left`;\n            } else {\n                return `${remainingLength.toLocaleString()} characters left`;\n            }\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <>\n            {React.isValidElement(counterLabel) ? (\n                counterLabel\n            ) : (\n                <p className={styles.counterLabel} data-testid=\"counter-label\">\n                    {counterLabel}\n                </p>\n            )}\n        </>\n    );\n};\n"],"names":["TextareaCounter","value","maxLength","renderCustomCounter","counterLabel","setCounterLabel","useState","useEffect","getCounterLabel","toString","length","remainingLength","toLocaleString","_jsx","_Fragment","children","React","isValidElement","className","styles.counterLabel"],"mappings":"qKAaO,MAAMA,EAAkB,EAC3BC,QACAC,YACAC,0BAKA,MAAOC,EAAcC,GAAmBC,EAEtC,IAKFC,GAAU,KACNF,EAAgBG,EAAgB,GAAGP,GAAS,MAAM,GAEnD,CAACA,EAAOC,IAKX,MAAMM,EAAmBP,IACrB,GAAIE,EACA,OAAOA,EAAoBD,EAAWD,EAAMQ,WAAWC,QACpD,CACH,MAAMC,EAAkBT,EAAYD,EAAMQ,WAAWC,OACrD,OAAwB,IAApBC,EACO,GAAGA,mBAEH,GAAGA,EAAgBC,kCAElC,GAMJ,OACIC,EAAAC,EAAA,CAAAC,SACKC,EAAMC,eAAeb,GAAa,EAG/BS,EAAA,IAAA,CAAGK,UAAWC,EAAmB,cAAc,gBAAeJ,SACzDX,KAGV"}

package/input-textarea/textarea-counter.styles.d.ts

@@ -0,0 +1 @@
+export declare const counterLabel: import("@linaria/core").LinariaClassName;

package/input-textarea/textarea-counter.styles.js

@@ -0,0 +1,2 @@
+import"./textarea-counter.styles_1n3wsnv.css";const t="c1d4l1yp";export{t as counterLabel};
+//# sourceMappingURL=textarea-counter.styles.js.map

package/input-textarea/textarea-counter.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea-counter.styles.js","sources":["../../src/input-textarea/textarea-counter.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font } from \"../theme\";\n\nexport const counterLabel = css`\n    text-align: right;\n    ${Font[\"body-sm-semibold\"]}\n    color: ${Colour[\"text-subtler\"]};\n`;\n"],"names":["counterLabel"],"mappings":"4EAIO,MAAMA,EAAY"}

package/input-textarea/textarea-counter.styles_1n3wsnv.css

@@ -0,0 +1 @@
+@layer fds{.c1d4l1yp{text-align:right;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-sm);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);color:var(--fds-colour-text-subtler);}}

package/input-textarea/textarea.d.ts

@@ -1,4 +1,8 @@
 import React from "react";
-import { TextareaProps } from "./types";
+import type { TextareaProps } from "./types";
 export declare const TextareaBase: (props: TextareaProps & React.RefAttributes<HTMLTextAreaElement>) => React.ReactElement | null;
+/**
+ * A multi-line text input with an optional character counter and prefix.
+ * @keywords field, form, input, multiline, text field
+ */
 export declare const Textarea: (props: TextareaProps & React.RefAttributes<HTMLTextAreaElement>) => React.ReactElement | null;

package/input-textarea/textarea.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as t,jsxs as r}from"react/jsx-runtime";import a,{useState as n,useEffect as o}from"react";import{TextareaCounter as s}from"./textarea-counter.js";import{Element as l,Wrapper as i}from"./textarea.style.js";const u=a.forwardRef(((r,a)=>{var{value:s,disabled:i,error:u,rows:g=5,prefix:f,transformValue:m,onChange:c,maxLength:h}=r,v=e(r,["value","disabled","error","rows","prefix","transformValue","onChange","maxLength"]);const[d,p]=n(s);o((()=>{p(s)}),[s]);return t(l,Object.assign({ref:a,disabled:i,value:f?f+(null!=d?d:""):d,onChange:e=>{let t=e.target.value;if(f){t.startsWith(f)||(t=f+t.trimStart()),t.length<f.length&&(t=f);if((e.target.selectionStart||0)<f.length)return void e.preventDefault();const r=t.slice(f.length),a=m?m(r):r;if(p(a),e.target.value=f+a,c){const t=Object.assign(Object.assign({},e),{target:Object.assign(Object.assign({},e.target),{value:a})});c(t)}}else{const r=m?m(null!=t?t:""):t;p(r),e.target.value=r,c&&c(e)}},onKeyDown:e=>{if(!f)return;const{selectionStart:t}=e.currentTarget;"Backspace"===e.key&&t<=f.length&&e.preventDefault(),"ArrowLeft"===e.key&&t<=f.length&&e.preventDefault(),"Home"===e.key&&(e.preventDefault(),requestAnimationFrame((()=>{e.currentTarget.setSelectionRange(f.length,f.length)})))},$error:u,rows:g,maxLength:f&&h?f.length+h:h},v))})),g=a.forwardRef(((a,l)=>{var{value:g,disabled:f,rows:m=5,onChange:c,transformValue:h,prefix:v,maxLength:d,renderCustomCounter:p}=a,x=e(a,["value","disabled","rows","onChange","transformValue","prefix","maxLength","renderCustomCounter"]);const[b,C]=n(g);o((()=>{C(g)}),[g]);return r(i,{children:[t(u,Object.assign({ref:l,disabled:f,value:b,rows:m||5,onChange:e=>{const t=e.target.value;C(t),c&&c(e)},prefix:v,transformValue:h,maxLength:d},x)),d&&t(s,{value:b,maxLength:d,renderCustomCounter:p})]})}));export{g as Textarea,u as TextareaBase};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as t}from"react/jsx-runtime";import a from"clsx";import n,{useState as s,useEffect as o}from"react";import{FormErrorMessage as i}from"../form/form-label/form-label.js";import{concatIds as l}from"../shared/accessibility/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as m}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{element as d,elementReadOnly as u,elementDisabled as c,elementError as g,wrapper as f,labelContainer as h,errorMessage as p}from"./textarea.styles.js";import{TextareaCounter as v}from"./textarea-counter.js";const b=n.forwardRef(((t,n)=>{var{className:i,disabled:l,error:m,maxLength:f,onChange:h,prefix:p,readOnly:v,rows:b=5,transformValue:x,value:j}=t,y=e(t,["className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value"]);const[C,w]=s(j);o((()=>{w(j)}),[j]);return r("textarea",Object.assign({ref:n,disabled:l,value:p?p+(null!=C?C:""):C,onChange:e=>{let r=e.target.value;if(p){r.startsWith(p)||(r=p+r.trimStart()),r.length<p.length&&(r=p);if((e.target.selectionStart||0)<p.length)return void e.preventDefault();const t=r.slice(p.length),a=x?x(t):t;if(w(a),e.target.value=p+a,h){const r=Object.assign(Object.assign({},e),{target:Object.assign(Object.assign({},e.target),{value:a})});h(r)}}else{const t=x?x(null!=r?r:""):r;w(t),e.target.value=t,h&&h(e)}},onKeyDown:e=>{if(!p)return;const{selectionStart:r}=e.currentTarget;"Backspace"===e.key&&r<=p.length&&e.preventDefault(),"ArrowLeft"===e.key&&r<=p.length&&e.preventDefault(),"Home"===e.key&&(e.preventDefault(),requestAnimationFrame((()=>{e.currentTarget.setSelectionRange(p.length,p.length)})))},readOnly:v,className:a(d,v&&u||l&&c||m&&g,i),rows:b,maxLength:p&&f?p.length+f:f},y))})),x=n.forwardRef(((a,n)=>{var d,{value:u,id:c,disabled:g,rows:x=5,onChange:j,transformValue:y,prefix:C,maxLength:w,renderCustomCounter:O,errorMessage:L,"data-error-testid":N,error:D}=a,V=e(a,["value","id","disabled","rows","onChange","transformValue","prefix","maxLength","renderCustomCounter","errorMessage","data-error-testid","error"]);const[k,S]=s(u),R=m();o((()=>{S(u)}),[u]);const A=c?`${c}-error-message`:R,M=null!==(d=V["aria-invalid"])&&void 0!==d?d:!!L||!!D,T=l(V["aria-describedby"],L?A:void 0);return t("div",{className:f,children:[r(b,Object.assign({ref:n,disabled:g,value:k,rows:x||5,onChange:e=>{const r=e.target.value;S(r),j&&j(e)},prefix:C,transformValue:y,maxLength:w,error:!!L||D},V,{id:c,"aria-invalid":M,"aria-describedby":T})),L||w?t("div",{className:h,children:[L&&r(i,{className:p,"data-testid":N,id:A,children:L}),w&&r(v,{value:k,maxLength:w,renderCustomCounter:O})]}):null]})}));export{x as Textarea,b as TextareaBase};
 //# sourceMappingURL=textarea.js.map

package/input-textarea/textarea.js.map

@@ -1 +1 @@
-{"version":3,"file":"textarea.js","sources":["../../src/input-textarea/textarea.tsx"],"sourcesContent":["import React, { useEffect, useState } from \"react\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport { Element, Wrapper } from \"./textarea.style\";\nimport { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n    {\n        value,\n        disabled,\n        error,\n        rows = 5,\n        prefix,\n        transformValue,\n        onChange,\n        maxLength,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    const [stateValue, setStateValue] = useState(value);\n\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        let newValue = event.target.value;\n        if (prefix) {\n            // Ensure prefix is always present\n            if (!newValue.startsWith(prefix)) {\n                newValue = prefix + newValue.trimStart();\n            }\n\n            // Prevent deleting the prefix\n            if (newValue.length < prefix.length) {\n                newValue = prefix;\n            }\n\n            const cursorPosition = event.target.selectionStart || 0;\n\n            // Ensure backspace does not delete the prefix\n            if (cursorPosition < prefix.length) {\n                event.preventDefault();\n                return;\n            }\n\n            // Extract user input\n            const userInput = newValue.slice(prefix.length);\n\n            // Transform the input if needed\n            const transformedValue = transformValue\n                ? transformValue(userInput)\n                : userInput;\n\n            // Update state and input field\n            setStateValue(transformedValue);\n            event.target.value = prefix + transformedValue;\n\n            // Pass only the user input (without prefix) to `onChange`\n            if (onChange) {\n                const syntheticEvent = {\n                    ...event,\n                    target: { ...event.target, value: transformedValue },\n                };\n                onChange(\n                    syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n                );\n            }\n        } else {\n            const transformedValue = transformValue\n                ? transformValue(newValue ?? \"\")\n                : newValue;\n\n            setStateValue(transformedValue);\n            event.target.value = transformedValue;\n            if (onChange) onChange(event);\n        }\n    };\n\n    const getDisplayValue = () => {\n        return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!prefix) return;\n\n        const { selectionStart } = event.currentTarget;\n\n        // Prevent backspace in prefix\n        if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent left arrow from moving into prefix\n        if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent \"Home\" key from moving cursor to beginning\n        if (event.key === \"Home\") {\n            event.preventDefault();\n            requestAnimationFrame(() => {\n                event.currentTarget.setSelectionRange(\n                    prefix.length,\n                    prefix.length\n                );\n            });\n        }\n    };\n\n    return (\n        <Element\n            ref={ref}\n            disabled={disabled}\n            value={getDisplayValue()}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            $error={error}\n            rows={rows}\n            maxLength={\n                prefix && maxLength ? prefix.length + maxLength : maxLength\n            }\n            {...otherProps}\n        />\n    );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n    {\n        value,\n        disabled,\n        rows = 5,\n        onChange,\n        transformValue,\n        prefix,\n        maxLength,\n        renderCustomCounter,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    // -------------------------------------------------------------------------\n    // CONST, STATE, REF\n    // -------------------------------------------------------------------------\n    const [stateValue, setStateValue] = useState<\n        string | number | readonly string[] | undefined\n    >(value);\n\n    // -------------------------------------------------------------------------\n    // EFFECTS\n    // -------------------------------------------------------------------------\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    // -------------------------------------------------------------------------\n    // EVENT HANDLER\n    // -------------------------------------------------------------------------\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = event.target.value;\n        setStateValue(newValue);\n        if (onChange) onChange(event);\n    };\n\n    // -------------------------------------------------------------------------\n    // RENDER FUNCTIONS\n    // -------------------------------------------------------------------------\n    return (\n        <Wrapper>\n            <TextareaBase\n                ref={ref}\n                disabled={disabled}\n                value={stateValue}\n                rows={rows || 5}\n                onChange={handleChange}\n                prefix={prefix}\n                transformValue={transformValue}\n                maxLength={maxLength}\n                {...otherProps}\n            />\n            {maxLength && (\n                <TextareaCounter\n                    value={stateValue}\n                    maxLength={maxLength}\n                    renderCustomCounter={renderCustomCounter}\n                />\n            )}\n        </Wrapper>\n    );\n};\n\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","value","disabled","error","rows","prefix","transformValue","onChange","maxLength","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Element","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","$error","Textarea","renderCustomCounter","_jsxs","Wrapper","children","TextareaCounter"],"mappings":"uQAQA,MA0HaA,EAAeC,EAAMC,YA1HJ,CAC1BC,EAWAC,SAXAC,MACIA,EAAKC,SACLA,EAAQC,MACRA,EAAKC,KACLA,EAAO,EAACC,OACRA,EAAMC,eACNA,EAAcC,SACdA,EAAQC,UACRA,KACGC,EAAUC,EAAAX,EATjB,CAAA,QAAA,WAAA,QAAA,OAAA,SAAA,iBAAA,WAAA,cAaA,MAAOY,EAAYC,GAAiBC,EAASZ,GAE7Ca,GAAU,KACNF,EAAcX,EAAM,GACrB,CAACA,IAuFJ,OACIc,EAACC,EAAOC,OAAAC,OAAA,CACJlB,IAAKA,EACLE,SAAUA,EACVD,MAlCGI,EAASA,GAAUM,QAAAA,EAAc,IAAMA,EAmC1CJ,SA1FcY,IAClB,IAAIC,EAAWD,EAAME,OAAOpB,MAC5B,GAAII,EAAQ,CAEHe,EAASE,WAAWjB,KACrBe,EAAWf,EAASe,EAASG,aAI7BH,EAASI,OAASnB,EAAOmB,SACzBJ,EAAWf,GAMf,IAHuBc,EAAME,OAAOI,gBAAkB,GAGjCpB,EAAOmB,OAExB,YADAL,EAAMO,iBAKV,MAAMC,EAAYP,EAASQ,MAAMvB,EAAOmB,QAGlCK,EAAmBvB,EACnBA,EAAeqB,GACfA,EAON,GAJAf,EAAciB,GACdV,EAAME,OAAOpB,MAAQI,EAASwB,EAG1BtB,EAAU,CACV,MAAMuB,EAAcb,OAAAC,OAAAD,OAAAC,OAAA,GACbC,GAAK,CACRE,OAAMJ,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAAOC,EAAME,QAAM,CAAEpB,MAAO4B,MAEtCtB,EACIuB,EAER,CACJ,KAAO,CACH,MAAMD,EAAmBvB,EACnBA,EAAec,QAAAA,EAAY,IAC3BA,EAENR,EAAciB,GACdV,EAAME,OAAOpB,MAAQ4B,EACjBtB,GAAUA,EAASY,EAC3B,GAwCIY,UAjCeZ,IACnB,IAAKd,EAAQ,OAEb,MAAMoB,eAAEA,GAAmBN,EAAMa,cAGf,cAAdb,EAAMc,KAAuBR,GAAkBpB,EAAOmB,QACtDL,EAAMO,iBAIQ,cAAdP,EAAMc,KAAuBR,GAAkBpB,EAAOmB,QACtDL,EAAMO,iBAIQ,SAAdP,EAAMc,MACNd,EAAMO,iBACNQ,uBAAsB,KAClBf,EAAMa,cAAcG,kBAChB9B,EAAOmB,OACPnB,EAAOmB,OACV,IAET,EAS4BY,OAChBjC,EACRC,KAAMA,EACNI,UACIH,GAAUG,EAAYH,EAAOmB,OAAShB,EAAYA,GAElDC,GACN,IA0EG4B,EAAWxC,EAAMC,YAhEJ,CACtBC,EAWAC,SAXAC,MACIA,EAAKC,SACLA,EAAQE,KACRA,EAAO,EAACG,SACRA,EAAQD,eACRA,EAAcD,OACdA,EAAMG,UACNA,EAAS8B,oBACTA,KACG7B,EAAUC,EAAAX,EATjB,CAAA,QAAA,WAAA,OAAA,WAAA,iBAAA,SAAA,YAAA,wBAgBA,MAAOY,EAAYC,GAAiBC,EAElCZ,GAKFa,GAAU,KACNF,EAAcX,EAAM,GACrB,CAACA,IAcJ,OACIsC,EAACC,EAAO,CAAAC,SAAA,CACJ1B,EAACnB,EAAYqB,OAAAC,OAAA,CACTlB,IAAKA,EACLE,SAAUA,EACVD,MAAOU,EACPP,KAAMA,GAAQ,EACdG,SAhBUY,IAClB,MAAMC,EAAWD,EAAME,OAAOpB,MAC9BW,EAAcQ,GACVb,GAAUA,EAASY,EAAM,EAcrBd,OAAQA,EACRC,eAAgBA,EAChBE,UAAWA,GACPC,IAEPD,GACGO,EAAC2B,EAAe,CACZzC,MAAOU,EACPH,UAAWA,EACX8B,oBAAqBA,MAGvB"}
+{"version":3,"file":"textarea.js","sources":["../../src/input-textarea/textarea.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, { useEffect, useState } from \"react\";\n\nimport { FormErrorMessage } from \"../form/form-label\";\nimport { concatIds } from \"../shared/accessibility\";\nimport { useId } from \"../util\";\nimport * as styles from \"./textarea.styles\";\nimport { TextareaCounter } from \"./textarea-counter\";\nimport type { TextareaProps, TextareaRef } from \"./types\";\n\n// =============================================================================\n// BASE COMPONENT\n// =============================================================================\nconst TextareaBaseComponent = (\n    {\n        className,\n        disabled,\n        error,\n        maxLength,\n        onChange,\n        prefix,\n        readOnly,\n        rows = 5,\n        transformValue,\n        value,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    const [stateValue, setStateValue] = useState(value);\n\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        let newValue = event.target.value;\n        if (prefix) {\n            // Ensure prefix is always present\n            if (!newValue.startsWith(prefix)) {\n                newValue = prefix + newValue.trimStart();\n            }\n\n            // Prevent deleting the prefix\n            if (newValue.length < prefix.length) {\n                newValue = prefix;\n            }\n\n            const cursorPosition = event.target.selectionStart || 0;\n\n            // Ensure backspace does not delete the prefix\n            if (cursorPosition < prefix.length) {\n                event.preventDefault();\n                return;\n            }\n\n            // Extract user input\n            const userInput = newValue.slice(prefix.length);\n\n            // Transform the input if needed\n            const transformedValue = transformValue\n                ? transformValue(userInput)\n                : userInput;\n\n            // Update state and input field\n            setStateValue(transformedValue);\n            event.target.value = prefix + transformedValue;\n\n            // Pass only the user input (without prefix) to `onChange`\n            if (onChange) {\n                const syntheticEvent = {\n                    ...event,\n                    target: { ...event.target, value: transformedValue },\n                };\n                onChange(\n                    syntheticEvent as React.ChangeEvent<HTMLTextAreaElement>\n                );\n            }\n        } else {\n            const transformedValue = transformValue\n                ? transformValue(newValue ?? \"\")\n                : newValue;\n\n            setStateValue(transformedValue);\n            event.target.value = transformedValue;\n            if (onChange) onChange(event);\n        }\n    };\n\n    const getDisplayValue = () => {\n        return prefix ? prefix + (stateValue ?? \"\") : stateValue;\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        if (!prefix) return;\n\n        const { selectionStart } = event.currentTarget;\n\n        // Prevent backspace in prefix\n        if (event.key === \"Backspace\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent left arrow from moving into prefix\n        if (event.key === \"ArrowLeft\" && selectionStart <= prefix.length) {\n            event.preventDefault();\n        }\n\n        // Prevent \"Home\" key from moving cursor to beginning\n        if (event.key === \"Home\") {\n            event.preventDefault();\n            requestAnimationFrame(() => {\n                event.currentTarget.setSelectionRange(\n                    prefix.length,\n                    prefix.length\n                );\n            });\n        }\n    };\n\n    return (\n        <textarea\n            ref={ref}\n            disabled={disabled}\n            value={getDisplayValue()}\n            onChange={handleChange}\n            onKeyDown={handleKeyDown}\n            readOnly={readOnly}\n            className={clsx(\n                styles.element,\n                (readOnly && styles.elementReadOnly) ||\n                    (disabled && styles.elementDisabled) ||\n                    (error && styles.elementError),\n                className\n            )}\n            rows={rows}\n            maxLength={\n                prefix && maxLength ? prefix.length + maxLength : maxLength\n            }\n            {...otherProps}\n        />\n    );\n};\n\nexport const TextareaBase = React.forwardRef(TextareaBaseComponent);\n\n// =============================================================================\n// MODULE COMPONENT (comes with the counter)\n// =============================================================================\n\nconst TextareaComponent = (\n    {\n        value,\n        id,\n        disabled,\n        rows = 5,\n        onChange,\n        transformValue,\n        prefix,\n        maxLength,\n        renderCustomCounter,\n        errorMessage,\n        \"data-error-testid\": errorTestId,\n        error,\n        ...otherProps\n    }: TextareaProps,\n    ref: TextareaRef\n) => {\n    // -------------------------------------------------------------------------\n    // CONST, STATE, REF\n    // -------------------------------------------------------------------------\n    const [stateValue, setStateValue] = useState<\n        string | number | readonly string[] | undefined\n    >(value);\n    const defaultErrorMessageID = useId();\n\n    // -------------------------------------------------------------------------\n    // EFFECTS\n    // -------------------------------------------------------------------------\n    useEffect(() => {\n        setStateValue(value);\n    }, [value]);\n\n    // -------------------------------------------------------------------------\n    // EVENT HANDLER\n    // -------------------------------------------------------------------------\n    const handleChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {\n        const newValue = event.target.value;\n        setStateValue(newValue);\n        if (onChange) onChange(event);\n    };\n\n    const errorMessageId = id ? `${id}-error-message` : defaultErrorMessageID;\n    const ariaInvalid =\n        otherProps[\"aria-invalid\"] ?? (!!errorMessage || !!error);\n    const ariaDescribedBy = concatIds(\n        otherProps[\"aria-describedby\"],\n        errorMessage ? errorMessageId : undefined\n    );\n\n    // -------------------------------------------------------------------------\n    // RENDER FUNCTIONS\n    // -------------------------------------------------------------------------\n    const renderBottomLabels = () => {\n        if (!errorMessage && !maxLength) return null;\n        return (\n            <div className={styles.labelContainer}>\n                {errorMessage && (\n                    <FormErrorMessage\n                        className={styles.errorMessage}\n                        data-testid={errorTestId}\n                        id={errorMessageId}\n                    >\n                        {errorMessage}\n                    </FormErrorMessage>\n                )}\n                {maxLength && (\n                    <TextareaCounter\n                        value={stateValue}\n                        maxLength={maxLength}\n                        renderCustomCounter={renderCustomCounter}\n                    />\n                )}\n            </div>\n        );\n    };\n\n    return (\n        <div className={styles.wrapper}>\n            <TextareaBase\n                ref={ref}\n                disabled={disabled}\n                value={stateValue}\n                rows={rows || 5}\n                onChange={handleChange}\n                prefix={prefix}\n                transformValue={transformValue}\n                maxLength={maxLength}\n                error={!!errorMessage || error}\n                {...otherProps}\n                id={id}\n                aria-invalid={ariaInvalid}\n                aria-describedby={ariaDescribedBy}\n            />\n            {renderBottomLabels()}\n        </div>\n    );\n};\n\n// @catalog\n/**\n * A multi-line text input with an optional character counter and prefix.\n * @keywords field, form, input, multiline, text field\n */\nexport const Textarea = React.forwardRef(TextareaComponent);\n"],"names":["TextareaBase","React","forwardRef","_a","ref","className","disabled","error","maxLength","onChange","prefix","readOnly","rows","transformValue","value","otherProps","__rest","stateValue","setStateValue","useState","useEffect","_jsx","Object","assign","event","newValue","target","startsWith","trimStart","length","selectionStart","preventDefault","userInput","slice","transformedValue","syntheticEvent","onKeyDown","currentTarget","key","requestAnimationFrame","setSelectionRange","clsx","styles.element","styles.elementReadOnly","styles.elementDisabled","styles.elementError","Textarea","id","renderCustomCounter","errorMessage","errorTestId","defaultErrorMessageID","useId","errorMessageId","ariaInvalid","_b","ariaDescribedBy","concatIds","undefined","_jsxs","styles.wrapper","children","styles.labelContainer","FormErrorMessage","styles.errorMessage","TextareaCounter"],"mappings":"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"}

package/input-textarea/textarea.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const element: import("@linaria/core").LinariaClassName;
+export declare const elementReadOnly: import("@linaria/core").LinariaClassName;
+export declare const elementDisabled: import("@linaria/core").LinariaClassName;
+export declare const elementError: import("@linaria/core").LinariaClassName;
+export declare const labelContainer: import("@linaria/core").LinariaClassName;
+export declare const errorMessage: import("@linaria/core").LinariaClassName;

package/input-textarea/textarea.styles.js

@@ -0,0 +1,2 @@
+import"./textarea.styles_6we7bs.css";const e="w1xqauhq",t="e10c6rk9",s="e1kovz0t",a="e9uwuyt",r="etmlvbn",w="l1npkv4w",n="e1mvywhi";export{t as element,a as elementDisabled,r as elementError,s as elementReadOnly,n as errorMessage,w as labelContainer,e as wrapper};
+//# sourceMappingURL=textarea.styles.js.map

package/input-textarea/textarea.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textarea.styles.js","sources":["../../src/input-textarea/textarea.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const wrapper = css`\n    display: flex;\n    flex-direction: column;\n    gap: ${Spacing[\"spacing-8\"]};\n`;\n\nexport const element = css`\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    background: ${Colour.bg};\n    outline: none;\n    overflow: auto;\n\n    display: block;\n    padding: ${Spacing[\"spacing-12\"]} ${Spacing[\"spacing-16\"]};\n    width: 100%;\n\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:focus,\n    &:active {\n        outline-offset: -1px;\n        outline: ${Border[\"width-020\"]} ${Border[\"solid\"]}\n            ${Colour[\"border-focus\"]};\n    }\n\n    &::placeholder,\n    &::-webkit-input-placeholder {\n        color: ${Colour[\"text-subtler\"]};\n    }\n\n    &::-webkit-scrollbar {\n        width: 14px;\n    }\n\n    &::-webkit-scrollbar-track {\n        background: transparent;\n    }\n\n    &::-webkit-scrollbar-thumb {\n        background: ${Colour[\"bg-inverse-subtlest\"]};\n        border: 5px solid transparent;\n        border-radius: ${Radius[\"full\"]};\n        background-clip: padding-box;\n    }\n`;\n\nexport const elementReadOnly = css`\n    border-color: transparent;\n    background: transparent !important;\n    padding: ${Spacing[\"spacing-12\"]} 0;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-focus\"]};\n    }\n`;\n\nexport const elementDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n    cursor: not-allowed;\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-disabled\"]};\n    }\n`;\n\nexport const elementError = css`\n    border-color: ${Colour[\"border-error\"]};\n\n    &:focus,\n    &:active {\n        outline-color: ${Colour[\"border-error-focus\"]};\n    }\n`;\n\nexport const labelContainer = css`\n    display: flex;\n    justify-content: flex-end;\n    gap: ${Spacing[\"spacing-12\"]};\n`;\n\nexport const errorMessage = css`\n    flex: 1;\n    margin-top: 0;\n    align-items: flex-start;\n`;\n"],"names":["wrapper","element","elementReadOnly","elementDisabled","elementError","labelContainer","errorMessage"],"mappings":"mEAIO,MAAMA,EAAO,WAMPC,EAAO,WA0CPC,EAAe,WAWfC,EAAe,UAUfC,EAAY,UASZC,EAAc,WAMdC,EAAY"}

package/input-textarea/textarea.styles_6we7bs.css

@@ -0,0 +1,7 @@
+@layer fds{.w1xqauhq{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;gap:var(--fds-spacing-8);}
+.e10c6rk9{border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);background:var(--fds-colour-bg);outline:none;overflow:auto;display:block;padding:var(--fds-spacing-12) var(--fds-spacing-16);width:100%;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);}.e10c6rk9:focus,.e10c6rk9:active{outline-offset:-1px;outline:var(--fds-border-width-020) var(--fds-border-style-solid) var(--fds-colour-border-focus);}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-webkit-scrollbar{width:14px;}.e10c6rk9::-webkit-scrollbar-track{background:transparent;}.e10c6rk9::-webkit-scrollbar-thumb{background:var(--fds-colour-bg-inverse-subtlest);border:5px solid transparent;border-radius:var(--fds-radius-full);-webkit-background-clip:padding-box;background-clip:padding-box;}.e10c6rk9::-webkit-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::-moz-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9:-ms-input-placeholder{color:var(--fds-colour-text-subtler);}.e10c6rk9::placeholder{color:var(--fds-colour-text-subtler);}
+.e1kovz0t{border-color:transparent;background:transparent!important;padding:var(--fds-spacing-12) 0;}.e1kovz0t:focus,.e1kovz0t:active{outline-color:var(--fds-colour-border-focus);}
+.e9uwuyt{background:var(--fds-colour-bg-disabled);cursor:not-allowed;}.e9uwuyt:focus,.e9uwuyt:active{outline-color:var(--fds-colour-border-disabled);}
+.etmlvbn{border-color:var(--fds-colour-border-error);}.etmlvbn:focus,.etmlvbn:active{outline-color:var(--fds-colour-border-error-focus);}
+.l1npkv4w{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;gap:var(--fds-spacing-12);}
+.e1mvywhi{-webkit-flex:1;-ms-flex:1;flex:1;margin-top:0;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;}}

package/input-textarea/types.d.ts

@@ -1,11 +1,41 @@
-import React from "react";
+import type React from "react";
+/**
+ * Props for the `Textarea` component.
+ */
 export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Inline error text rendered below the textarea.
+     * Also sets the input into an error state.
+     */
+    errorMessage?: string | React.ReactNode | undefined;
+    /** Test id for the error message element. */
+    "data-error-testid"?: string | undefined;
+    /**
+     * Transforms user input on every change event.
+     */
     transformValue?: ((value: string) => string) | undefined;
+    /**
+     * A read-only string permanently displayed at the start of the textarea.
+     */
     prefix?: string | undefined;
+    /**
+     * Replaces the built-in character counter displayed below the textarea.
+     * Called only when `maxLength` is provided.
+     *
+     * @param maxLength The maximum number of user-input characters allowed.
+     * @param currentValueLength The current length of the user's input.
+     */
     renderCustomCounter?: ((maxLength: number, currentValueLength: number) => JSX.Element) | undefined;
 }
-/** To be exposed for Form component inheritance */
+/**
+ * A subset of `TextareaProps` used by form components that manage
+ * the `error` state themselves.
+ */
 export type TextareaPartialProps = Omit<TextareaProps, "error">;
+/**
+ * Ref type for programmatic access to the underlying `HTMLTextAreaElement`.
+ */
 export type TextareaRef = React.Ref<HTMLTextAreaElement>;

package/language-switcher/data.d.ts

@@ -1,4 +1,4 @@
-import { LanguageSwitcherCode } from "./types";
+import type { LanguageSwitcherCode } from "./types";
 export declare const LANGUAGE_DISPLAY_MAP: Record<LanguageSwitcherCode, string>;
 export declare const LANGUAGE_CODES: LanguageSwitcherCode[];
 export declare const ARIA_LABEL = "Choose language / \u9009\u62E9\u8BED\u8A00 / Pilih bahasa / \u0BAE\u0BCA\u0BB4\u0BBF\u0BAF\u0BC8 \u0BA4\u0BC7\u0BB0\u0BCD\u0BA8\u0BCD\u0BA4\u0BC6\u0B9F\u0BC1\u0B95\u0BCD\u0B95\u0BB5\u0BC1\u0BAE\u0BCD";

package/language-switcher/data.js.map

@@ -1 +1 @@
-{"version":3,"file":"data.js","sources":["../../src/language-switcher/data.ts"],"sourcesContent":["import { LanguageSwitcherCode } from \"./types\";\n\nexport const LANGUAGE_DISPLAY_MAP: Record<LanguageSwitcherCode, string> = {\n    en: \"English\",\n    zh: \"中文\",\n    ms: \"Melayu\",\n    ta: \"தமிழ்\",\n};\n\nexport const LANGUAGE_CODES: LanguageSwitcherCode[] = [\"en\", \"zh\", \"ms\", \"ta\"];\n\nexport const ARIA_LABEL =\n    \"Choose language / 选择语言 / Pilih bahasa / மொழியை தேர்ந்தெடுக்கவும்\";\n"],"names":["LANGUAGE_DISPLAY_MAP","en","zh","ms","ta","LANGUAGE_CODES","ARIA_LABEL"],"mappings":"AAEO,MAAMA,EAA6D,CACtEC,GAAI,UACJC,GAAI,KACJC,GAAI,SACJC,GAAI,SAGKC,EAAyC,CAAC,KAAM,KAAM,KAAM,MAE5DC,EACT"}
+{"version":3,"file":"data.js","sources":["../../src/language-switcher/data.ts"],"sourcesContent":["import type { LanguageSwitcherCode } from \"./types\";\n\nexport const LANGUAGE_DISPLAY_MAP: Record<LanguageSwitcherCode, string> = {\n    en: \"English\",\n    zh: \"中文\",\n    ms: \"Melayu\",\n    ta: \"தமிழ்\",\n};\n\nexport const LANGUAGE_CODES: LanguageSwitcherCode[] = [\"en\", \"zh\", \"ms\", \"ta\"];\n\nexport const ARIA_LABEL =\n    \"Choose language / 选择语言 / Pilih bahasa / மொழியை தேர்ந்தெடுக்கவும்\";\n"],"names":["LANGUAGE_DISPLAY_MAP","en","zh","ms","ta","LANGUAGE_CODES","ARIA_LABEL"],"mappings":"AAEO,MAAMA,EAA6D,CACtEC,GAAI,UACJC,GAAI,KACJC,GAAI,SACJC,GAAI,SAGKC,EAAyC,CAAC,KAAM,KAAM,KAAM,MAE5DC,EACT"}

package/language-switcher/dropdown-panel.d.ts

@@ -0,0 +1,13 @@
+import type React from "react";
+import type { LanguageSwitcherCode } from "./types";
+interface DropdownPanelProps {
+    focusedIndex: number;
+    handleItemSelect: (code: LanguageSwitcherCode) => void;
+    handleListKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;
+    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;
+    listboxId: string;
+    selectedLanguage: LanguageSwitcherCode;
+    testId: string;
+}
+export declare const DropdownPanel: ({ focusedIndex, handleItemSelect, handleListKeyDown, itemRefs, listboxId, selectedLanguage, testId, }: DropdownPanelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/language-switcher/dropdown-panel.js

@@ -0,0 +1,2 @@
+import{jsx as e,jsxs as t}from"react/jsx-runtime";import{TickIcon as r}from"@lifesg/react-icons/tick";import o from"clsx";import{useRef as s}from"react";import{baseIndicatorStyle as i,selectedIndicator as m,listItem as a,listItemActiveSelected as l,listItemActive as n}from"../shared/dropdown-list/dropdown-list.styles.js";import{useDropdownRender as d}from"../shared/dropdown-wrapper/element-with-dropdown.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as p}from"../theme/utils/use-apply-styles.js";import"../theme/utils/use-media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as c}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{ARIA_LABEL as h,LANGUAGE_CODES as j,LANGUAGE_DISPLAY_MAP as u}from"./data.js";import{tokens as f,dropdownPanel as y,dropdownList as g,dropdownItem as x,dropdownItemSelected as w}from"./dropdown-panel.styles.js";const b=({focusedIndex:b,handleItemSelect:k,handleListKeyDown:v,itemRefs:I,listboxId:N,selectedLanguage:$,testId:q})=>{const{elementWidth:D,styles:F,setFloatingRef:K,getFloatingProps:L}=d(),R=s(null);return p(R,{[f.width]:`${D}px`}),e("div",Object.assign({ref:c(K,R),className:y,style:F,"data-testid":`${q}--panel`},L(),{children:e("ul",{className:g,role:"listbox",id:N,"aria-label":h,onKeyDown:v,children:j.map(((s,d)=>{const p=s===$,c=d===b;return t("li",{ref:e=>{I.current[d]=e},role:"option",lang:s,className:o(x,a,c&&p&&l,c&&!p&&n,p&&w),"aria-selected":p,tabIndex:c?0:-1,onClick:()=>k(s),"data-testid":`${q}--item-${s}`,children:[p?e(r,{className:o(i,m),"aria-hidden":!0}):e("div",{className:i}),u[s]]},s)}))})}))};export{b as DropdownPanel};
+//# sourceMappingURL=dropdown-panel.js.map

package/language-switcher/dropdown-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-panel.js","sources":["../../src/language-switcher/dropdown-panel.tsx"],"sourcesContent":["import { TickIcon } from \"@lifesg/react-icons/tick\";\nimport clsx from \"clsx\";\nimport type React from \"react\";\nimport { useRef } from \"react\";\n\nimport {\n    baseIndicatorStyle,\n    listItem,\n    listItemActive,\n    listItemActiveSelected,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\nimport { useDropdownRender } from \"../shared/dropdown-wrapper\";\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport { ARIA_LABEL, LANGUAGE_CODES, LANGUAGE_DISPLAY_MAP } from \"./data\";\nimport * as styles from \"./dropdown-panel.styles\";\nimport type { LanguageSwitcherCode } from \"./types\";\n\ninterface DropdownPanelProps {\n    focusedIndex: number;\n    handleItemSelect: (code: LanguageSwitcherCode) => void;\n    handleListKeyDown: (event: React.KeyboardEvent<HTMLUListElement>) => void;\n    itemRefs: React.MutableRefObject<(HTMLLIElement | null)[]>;\n    listboxId: string;\n    selectedLanguage: LanguageSwitcherCode;\n    testId: string;\n}\n\nexport const DropdownPanel = ({\n    focusedIndex,\n    handleItemSelect,\n    handleListKeyDown,\n    itemRefs,\n    listboxId,\n    selectedLanguage,\n    testId,\n}: DropdownPanelProps) => {\n    const {\n        elementWidth,\n        styles: floatingStyles,\n        setFloatingRef,\n        getFloatingProps,\n    } = useDropdownRender();\n    const panelRef = useRef<HTMLDivElement>(null);\n\n    useApplyStyle(panelRef, {\n        [styles.tokens.width]: `${elementWidth}px`,\n    });\n\n    return (\n        <div\n            ref={mergeRefs(setFloatingRef, panelRef)}\n            className={styles.dropdownPanel}\n            style={floatingStyles}\n            data-testid={`${testId}--panel`}\n            {...getFloatingProps()}\n        >\n            <ul\n                className={styles.dropdownList}\n                role=\"listbox\"\n                id={listboxId}\n                aria-label={ARIA_LABEL}\n                onKeyDown={handleListKeyDown}\n            >\n                {LANGUAGE_CODES.map((code, index) => {\n                    const isSelected = code === selectedLanguage;\n                    const isFocused = index === focusedIndex;\n\n                    return (\n                        <li\n                            key={code}\n                            ref={(element: HTMLLIElement | null) => {\n                                itemRefs.current[index] = element;\n                            }}\n                            role=\"option\"\n                            lang={code}\n                            className={clsx(\n                                styles.dropdownItem,\n                                listItem,\n                                isFocused &&\n                                    isSelected &&\n                                    listItemActiveSelected,\n                                isFocused && !isSelected && listItemActive,\n                                isSelected && styles.dropdownItemSelected\n                            )}\n                            aria-selected={isSelected}\n                            tabIndex={isFocused ? 0 : -1}\n                            onClick={() => handleItemSelect(code)}\n                            data-testid={`${testId}--item-${code}`}\n                        >\n                            {isSelected ? (\n                                <TickIcon\n                                    className={clsx(\n                                        baseIndicatorStyle,\n                                        styles.selectedIndicator\n                                    )}\n                                    aria-hidden\n                                />\n                            ) : (\n                                <div className={baseIndicatorStyle} />\n                            )}\n                            {LANGUAGE_DISPLAY_MAP[code]}\n                        </li>\n                    );\n                })}\n            </ul>\n        </div>\n    );\n};\n"],"names":["DropdownPanel","focusedIndex","handleItemSelect","handleListKeyDown","itemRefs","listboxId","selectedLanguage","testId","elementWidth","styles","floatingStyles","setFloatingRef","getFloatingProps","useDropdownRender","panelRef","useRef","useApplyStyle","styles.tokens","width","_jsx","Object","assign","ref","mergeRefs","className","styles.dropdownPanel","style","children","styles.dropdownList","role","id","ARIA_LABEL","onKeyDown","LANGUAGE_CODES","map","code","index","isSelected","isFocused","_jsxs","element","current","lang","clsx","styles.dropdownItem","listItem","listItemActiveSelected","listItemActive","styles.dropdownItemSelected","tabIndex","onClick","TickIcon","baseIndicatorStyle","styles.selectedIndicator","LANGUAGE_DISPLAY_MAP"],"mappings":"8qCA4BaA,EAAgB,EACzBC,eACAC,mBACAC,oBACAC,WACAC,YACAC,mBACAC,aAEA,MAAMC,aACFA,EACAC,OAAQC,EAAcC,eACtBA,EAAcC,iBACdA,GACAC,IACEC,EAAWC,EAAuB,MAMxC,OAJAC,EAAcF,EAAU,CACpB,CAACG,EAAcC,OAAQ,GAAGV,QAI1BW,EAAA,MAAAC,OAAAC,OAAA,CACIC,IAAKC,EAAUZ,EAAgBG,GAC/BU,UAAWC,EACXC,MAAOhB,EAAc,cACR,GAAGH,YACZK,IAAkB,CAAAe,SAEtBR,EAAA,KAAA,CACIK,UAAWI,EACXC,KAAK,UACLC,GAAIzB,EAAS,aACD0B,EACZC,UAAW7B,EAAiBwB,SAE3BM,EAAeC,KAAI,CAACC,EAAMC,KACvB,MAAMC,EAAaF,IAAS7B,EACtBgC,EAAYF,IAAUnC,EAE5B,OACIsC,EAAA,KAAA,CAEIjB,IAAMkB,IACFpC,EAASqC,QAAQL,GAASI,CAAO,EAErCX,KAAK,SACLa,KAAMP,EACNX,UAAWmB,EACPC,EACAC,EACAP,GACID,GACAS,EACJR,IAAcD,GAAcU,EAC5BV,GAAcW,mBAEHX,EACfY,SAAUX,EAAY,KACtBY,QAAS,IAAMhD,EAAiBiC,iBACnB,GAAG5B,WAAgB4B,IAAMR,SAAA,CAErCU,EACGlB,EAACgC,EAAQ,CACL3B,UAAWmB,EACPS,EACAC,GACH,eAAA,IAILlC,EAAA,MAAA,CAAKK,UAAW4B,IAEnBE,EAAqBnB,KA/BjBA,EAgCJ,QAIf"}

package/language-switcher/dropdown-panel.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const tokens: {
+    readonly width: "--fds-internal-languageSwitcher-dropdown-width";
+};
+export declare const dropdownPanel: import("@linaria/core").LinariaClassName;
+export declare const dropdownList: import("@linaria/core").LinariaClassName;
+export { baseIndicatorStyle, selectedIndicator, } from "../shared/dropdown-list/dropdown-list.styles";
+export declare const dropdownItem: import("@linaria/core").LinariaClassName;
+export declare const dropdownItemSelected: import("@linaria/core").LinariaClassName;

package/language-switcher/dropdown-panel.styles.js

@@ -0,0 +1,2 @@
+import"../shared/dropdown-list/dropdown-list.styles_konwm.css";import"./dropdown-panel.styles_1qsjf8d.css";const d={width:"--fds-internal-languageSwitcher-dropdown-width"},s="dbl9jc4",o="dogrnw8",t="d4xkcjy",n="ddiq5up";export{t as dropdownItem,n as dropdownItemSelected,o as dropdownList,s as dropdownPanel,d as tokens};
+//# sourceMappingURL=dropdown-panel.styles.js.map

package/language-switcher/dropdown-panel.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-panel.styles.js","sources":["../../src/language-switcher/dropdown-panel.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Border, Colour, Font, Radius, Spacing } from \"../theme\";\n\nexport const tokens = {\n    width: \"--fds-internal-languageSwitcher-dropdown-width\",\n} as const;\n\nexport const dropdownPanel = css`\n    ${tokens.width}: initial;\n\n    width: var(${tokens.width});\n    border-radius: ${Radius[\"sm\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    background: ${Colour[\"bg\"]};\n    overflow: hidden;\n`;\n\nexport const dropdownList = css`\n    list-style: none;\n    margin: 0;\n    padding: ${Spacing[\"spacing-8\"]};\n`;\n\nexport {\n    baseIndicatorStyle,\n    selectedIndicator,\n} from \"../shared/dropdown-list/dropdown-list.styles\";\n\nexport const dropdownItem = css`\n    align-items: center;\n    ${Font[\"body-md-regular\"]}\n    color: ${Colour[\"text\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-hover-subtle\"]};\n    }\n`;\n\nexport const dropdownItemSelected = css`\n    background: transparent;\n    color: ${Colour[\"text-selected\"]};\n\n    &:hover {\n        background: ${Colour[\"bg-hover\"]};\n    }\n`;\n"],"names":["tokens","width","dropdownPanel","dropdownList","dropdownItem","dropdownItemSelected"],"mappings":"0JAIO,MAAMA,EAAS,CAClBC,MAAO,kDAGEC,EAAa,UAUbC,EAAY,UAWZC,EAAY,UAUZC,EAAoB"}

package/language-switcher/dropdown-panel.styles_1qsjf8d.css

@@ -0,0 +1,4 @@
+@layer fds{.dbl9jc4{--fds-internal-languageSwitcher-dropdown-width:initial;width:var(--fds-internal-languageSwitcher-dropdown-width);border-radius:var(--fds-radius-sm);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);background:var(--fds-colour-bg);overflow:hidden;}
+.dogrnw8{list-style:none;margin:0;padding:var(--fds-spacing-8);}
+.d4xkcjy{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);color:var(--fds-colour-text);}.d4xkcjy:hover{background:var(--fds-colour-bg-hover-subtle);}
+.ddiq5up{background:transparent;color:var(--fds-colour-text-selected);}.ddiq5up:hover{background:var(--fds-colour-bg-hover);}}

package/language-switcher/dropdown-variant.d.ts

@@ -1,2 +1,2 @@
-import { VariantInternalProps } from "./internal-types";
+import type { VariantInternalProps } from "./internal-types";
 export declare const DropdownVariant: ({ selectedLanguage, onSelectLanguage, testId, ...otherProps }: VariantInternalProps) => JSX.Element;