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

package/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { useId } from \"../util\";\nimport {\n    AlertContainer,\n    Children,\n    Container,\n    ErrorContainer,\n    ErrorList,\n    ErrorText,\n    ExpandButton,\n    HeaderContainer,\n    IndicatorLabelContainer,\n    Input,\n    InputContainer,\n    Label,\n    RemoveButton,\n    StyledToggleIcon,\n    SubLabel,\n    TextContainer,\n} from \"./toggle.styles\";\nimport { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    focusableWhenDisabled,\n    useContentWidth,\n    onRemove,\n    onChange,\n    \"data-testid\": testId,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const uniqueId = useId();\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n    const isInteractionBlocked = !!disabled;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInteractionBlocked) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange) {\n            onChange(event);\n            return;\n        }\n\n        switch (type) {\n            case \"checkbox\":\n                setSelected((prevSelected) => {\n                    return !prevSelected;\n                });\n                break;\n            case \"radio\":\n            case \"yes\":\n            case \"no\":\n                if (!selected) {\n                    setSelected(true);\n                }\n                break;\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <StyledToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n                $selected={selected}\n                $disabled={disabled}\n            />\n        );\n    };\n\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <SubLabel\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n            >\n                {component}\n            </SubLabel>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <Children\n                    data-id=\"toggle-composite-children\"\n                    $isFinalItem={!collapsible}\n                    $disabled={disabled}\n                >\n                    {compositeSectionChildren}\n                </Children>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <ExpandButton\n                    $paddingTopRequired={collapsedWithoutErrors}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </ExpandButton>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <HeaderContainer\n                id={`${generatedId}-header-container`}\n                $disabled={disabled}\n                $error={error}\n                $selected={selected}\n                $indicator={indicator}\n                $styleType={styleType}\n            >\n                <IndicatorLabelContainer $addPadding={removable}>\n                    <InputContainer\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                    >\n                        <Input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\n                            $disabledVisual={disabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <TextContainer\n                            $selected={selected}\n                            $disabled={disabled}\n                        >\n                            <Label\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                $maxLines={childrenMaxLines}\n                                $selected={selected}\n                            >\n                                {children}\n                            </Label>\n                            {subLabel && renderSubLabel()}\n                        </TextContainer>\n                    </InputContainer>\n                </IndicatorLabelContainer>\n\n                {removable && (\n                    <RemoveButton\n                        type=\"button\"\n                        $disabled={disabled}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </RemoveButton>\n                )}\n            </HeaderContainer>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <ErrorText weight=\"semibold\" $disabled={disabled}>\n                    Error\n                </ErrorText>\n                <ErrorList $disabled={disabled}>\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <ErrorText\n                                    weight=\"semibold\"\n                                    $disabled={disabled}\n                                >\n                                    {item}\n                                </ErrorText>\n                            </li>\n                        );\n                    })}\n                </ErrorList>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <ErrorContainer\n                    $disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <AlertContainer\n                        type={disabled ? \"description\" : \"error\"}\n                        className={className}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </AlertContainer>\n                </ErrorContainer>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <Container\n            $selected={selected}\n            $disabled={disabled}\n            className={className}\n            $styleType={styleType}\n            $error={error}\n            $indicator={indicator}\n            $useContentWidth={useContentWidth}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </Container>\n    );\n};\n"],"names":["Toggle","_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","renderSubLabel","component","SubLabel","renderErrorList","_jsxs","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","IndicatorLabelContainer","InputContainer","onClick","Input","ref","tabIndex","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon","ExpandButton","$paddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { useId } from \"../util\";\nimport {\n    AlertContainer,\n    Children,\n    Container,\n    ErrorContainer,\n    ErrorList,\n    ErrorText,\n    ExpandButton,\n    HeaderContainer,\n    IndicatorLabelContainer,\n    Input,\n    InputContainer,\n    Label,\n    RemoveButton,\n    StyledToggleIcon,\n    SubLabel,\n    TextContainer,\n} from \"./toggle.styles\";\nimport { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    focusableWhenDisabled,\n    useContentWidth,\n    onRemove,\n    onChange,\n    \"data-testid\": testId,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const uniqueId = useId();\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n    const isInteractionBlocked = !!disabled;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInteractionBlocked) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange) {\n            onChange(event);\n            return;\n        }\n\n        switch (type) {\n            case \"checkbox\":\n                setSelected((prevSelected) => {\n                    return !prevSelected;\n                });\n                break;\n            case \"radio\":\n            case \"yes\":\n            case \"no\":\n                if (!selected) {\n                    setSelected(true);\n                }\n                break;\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <StyledToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n                $selected={selected}\n                $disabled={disabled}\n                $error={error}\n            />\n        );\n    };\n\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <SubLabel\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n            >\n                {component}\n            </SubLabel>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <Children\n                    data-id=\"toggle-composite-children\"\n                    $isFinalItem={!collapsible}\n                    $disabled={disabled}\n                >\n                    {compositeSectionChildren}\n                </Children>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <ExpandButton\n                    $paddingTopRequired={collapsedWithoutErrors}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </ExpandButton>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <HeaderContainer\n                id={`${generatedId}-header-container`}\n                $disabled={disabled}\n                $error={error}\n                $selected={selected}\n                $indicator={indicator}\n                $styleType={styleType}\n            >\n                <IndicatorLabelContainer $addPadding={removable}>\n                    <InputContainer\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                    >\n                        <Input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\n                            $disabledVisual={disabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <TextContainer\n                            $selected={selected}\n                            $disabled={disabled}\n                            $error={error}\n                        >\n                            <Label\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                $maxLines={childrenMaxLines}\n                                $selected={selected}\n                            >\n                                {children}\n                            </Label>\n                            {subLabel && renderSubLabel()}\n                        </TextContainer>\n                    </InputContainer>\n                </IndicatorLabelContainer>\n\n                {removable && (\n                    <RemoveButton\n                        type=\"button\"\n                        $disabled={disabled}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </RemoveButton>\n                )}\n            </HeaderContainer>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <ErrorText weight=\"semibold\" $disabled={disabled}>\n                    Error\n                </ErrorText>\n                <ErrorList $disabled={disabled}>\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <ErrorText\n                                    weight=\"semibold\"\n                                    $disabled={disabled}\n                                >\n                                    {item}\n                                </ErrorText>\n                            </li>\n                        );\n                    })}\n                </ErrorList>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <ErrorContainer\n                    $disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <AlertContainer\n                        type={disabled ? \"description\" : \"error\"}\n                        className={className}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </AlertContainer>\n                </ErrorContainer>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <Container\n            $selected={selected}\n            $disabled={disabled}\n            className={className}\n            $styleType={styleType}\n            $error={error}\n            $indicator={indicator}\n            $useContentWidth={useContentWidth}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </Container>\n    );\n};\n"],"names":["Toggle","_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","$error","renderSubLabel","component","SubLabel","renderErrorList","_jsxs","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","IndicatorLabelContainer","InputContainer","onClick","Input","ref","$disabledVisual","tabIndex","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon","ExpandButton","$paddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

package/toggle/toggle.styles.d.ts

@@ -1,5 +1,6 @@
 import { ToggleStyleType } from "./types";
 interface StyleProps {
+    $error?: boolean;
     $selected?: boolean;
     $disabled?: boolean;
     $indicator?: boolean;

package/toggle/toggle.styles.js

@@ -1,4 +1,4 @@
-import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert.js";import{applyHtmlContentStyle as d}from"../shared/html-content/html-content.js";import{ToggleIcon as t}from"../shared/toggle-icon/toggle-icon.js";import{TextList as i}from"../text-list/index.js";import{Radius as l,Colour as n,Font as a,MediaQuery as s}from"../theme/index.js";import{Typography as b}from"../typography/typography.js";const c=e.div`
+import e,{css as r}from"styled-components";import{Alert as o}from"../alert/alert.js";import{applyHtmlContentStyle as d}from"../shared/html-content/html-content.js";import{ToggleIcon as t}from"../shared/toggle-icon/toggle-icon.js";import{TextList as i}from"../text-list/index.js";import{Radius as l,Colour as n,Font as a,MediaQuery as s}from"../theme/index.js";import{Typography as b}from"../typography/typography.js";const c=e.div`
     position: relative;
     display: inline-flex;
     min-width: 10.375rem;
@@ -15,32 +15,41 @@ import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert
         outline-offset: 0;
     }
 
-    ${e=>{if(!e.$indicator)return o`
+    ${e=>{if(!e.$indicator)return r`
                 justify-content: center;
             `}}
 
     // Container min width to fit content
-    ${e=>{if(e.$useContentWidth)return o`
+    ${e=>{if(e.$useContentWidth)return r`
                 min-width: unset;
             `}}
 
     // apply container border and header background color
-    ${e=>"no-border"===e.$styleType?e.$error?e.$disabled?o`
-                            border-color: ${n["border-error"]};
-                        `:o`
+    ${e=>"no-border"===e.$styleType?e.$error?e.$disabled?r`
                             border-color: ${n["border-error"]};
+                        `:e.$selected?r`
+                            border-color: transparent;
+                            background: ${n["bg-error"]};
 
                             &:has(${h}:hover) {
                                 @media (pointer: fine) {
-                                    background: ${n["bg-hover-subtle"]};
+                                    background: ${n["bg-error-hover"]};
                                 }
                             }
-                        `:e.$disabled?e.$selected?o`
+                        `:r`
+                        border-color: ${n["border-error"]};
+
+                        &:has(${h}:hover) {
+                            @media (pointer: fine) {
+                                background: ${n["bg-hover-subtle"]};
+                            }
+                        }
+                    `:e.$disabled?e.$selected?r`
                             border: none;
                             background: ${n["bg-selected-disabled"]};
-                        `:o`
+                        `:r`
                             border: none;
-                        `:e.$selected?o`
+                        `:e.$selected?r`
                         border: none;
                         background: ${n["bg-selected"]};
 
@@ -57,7 +66,7 @@ import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert
                                 }
                             }
                         }
-                    `:o`
+                    `:r`
                     border: none;
 
                     &:has(${h}:hover) {
@@ -65,23 +74,32 @@ import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert
                             background: ${n["bg-hover-subtle"]};
                         }
                     }
-                `:e.$error?e.$disabled?o`
+                `:e.$error?e.$disabled?r`
                             border-color: ${n["border-error"]};
-                        `:o`
+                        `:e.$selected?r`
                             border-color: ${n["border-error"]};
+                            background: ${n["bg-error"]};
 
                             &:has(${h}:hover) {
                                 @media (pointer: fine) {
-                                    background: ${n["bg-hover-subtle"]};
+                                    background: ${n["bg-error-hover"]};
                                 }
                             }
-                        `:e.$disabled?e.$selected?o`
+                        `:r`
+                        border-color: ${n["border-error"]};
+
+                        &:has(${h}:hover) {
+                            @media (pointer: fine) {
+                                background: ${n["bg-hover-subtle"]};
+                            }
+                        }
+                    `:e.$disabled?e.$selected?r`
                             border-color: ${n["border-selected-disabled"]};
                             background: ${n["bg-selected-disabled"]};
-                        `:o`
+                        `:r`
                             border-color: ${n["border-disabled"]};
                             background: ${n["bg-disabled"]};
-                        `:e.$selected?o`
+                        `:e.$selected?r`
                         border-color: ${n["border-selected"]};
                         background: ${n["bg-selected"]};
 
@@ -98,7 +116,7 @@ import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert
                                 }
                             }
                         }
-                    `:o`
+                    `:r`
                     border-color: ${n.border};
 
                     &:has(${h}:hover) {
@@ -130,30 +148,32 @@ import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert
     overflow: hidden;
 
     // apply header container text color
-    ${e=>e.$disabled?e.$selected?o`
+    ${e=>e.$selected?e.$disabled?r`
                     color: ${n["text-selected-disabled"]};
-                `:o`
-                    color: ${n["text-disabled"]};
-                `:e.$selected?o`
+                `:e.$error?r`
+                    color: ${n["text-error"]};
+                `:r`
                 color: ${n["text-selected"]};
-            `:o`
+            `:e.$disabled?r`
+                color: ${n["text-disabled"]};
+            `:r`
             color: ${n.text};
         `}
-`,u=e.label`
+`,g=e.label`
     ${e=>e.$selected?a["body-baseline-semibold"]:a["body-baseline-regular"]};
     overflow: hidden;
     display: -webkit-box;
     text-overflow: ellipsis;
     -webkit-box-orient: vertical;
     overflow-wrap: break-word;
-    -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.desktop)&&void 0!==r?r:"none"}};
+    -webkit-line-clamp: ${e=>{var r,o;return null!==(o=null===(r=e.$maxLines)||void 0===r?void 0:r.desktop)&&void 0!==o?o:"none"}};
     ${s.MaxWidth.lg} {
-        -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.tablet)&&void 0!==r?r:"none"}};
+        -webkit-line-clamp: ${e=>{var r,o;return null!==(o=null===(r=e.$maxLines)||void 0===r?void 0:r.tablet)&&void 0!==o?o:"none"}};
     }
     ${s.MaxWidth.sm} {
-        -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.mobile)&&void 0!==r?r:"none"}};
+        -webkit-line-clamp: ${e=>{var r,o;return null!==(o=null===(r=e.$maxLines)||void 0===r?void 0:r.mobile)&&void 0!==o?o:"none"}};
     }
-`,g=e.div`
+`,u=e.div`
     ${a["body-md-regular"]}
     margin-top: 0.5rem;
 
@@ -174,7 +194,7 @@ import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert
     width: 100%;
     position: relative;
     padding: ${e=>e.$addPadding?"0.6875rem 0rem 0.6875rem 1rem":"0.6875rem 1rem"};
-`,x=e.button`
+`,f=e.button`
     color: ${e=>e.$disabled?n["text-disabled"]:n["text-error"]};
     white-space: nowrap;
     ${a["body-md-semibold"]}
@@ -184,7 +204,7 @@ import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert
     background: none;
 
     cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-`,f=e.button`
+`,x=e.button`
     color: ${e=>e.disabled?n["text-disabled"]:n["text-primary"]};
     ${a["body-baseline-semibold"]}
     display: flex;
@@ -209,36 +229,38 @@ import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert
     background: ${n.bg};
     cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
     padding: 0.6875rem 1rem 0.5rem 1rem;
-`,y=e(r)`
+`,k=e(o)`
     width: 100%;
     user-select: none;
-`,k=e.div`
+`,y=e.div`
     padding: 0 1rem;
     padding-top: 0.6875rem;
     padding-bottom: ${e=>e.$isFinalItem?"0.6875rem":"0.5rem"};
     background-color: ${n.bg};
     ${d({textSize:"body-md"})}
 
-    ${e=>e.$disabled?o`
+    ${e=>e.$disabled?r`
                 color: ${n["text-disabled"]};
-            `:e.$selected?o`
+            `:e.$selected?r`
                 color: ${n["text-selected"]};
-            `:o`
-                color: ${n.text};
-            `}
+            `:r`
+            color: ${n.text};
+        `}
 `,j=e(b.BodyMD)`
     color: ${e=>e.$disabled?n["text-disabled"]:n["text-error"]};
 `,L=e(i.Ul)`
     color: ${e=>e.$disabled?n["text-disabled"]:n["text-error"]};
 `,M=e(t)`
-    ${e=>e.$disabled?e.$selected?o`
+    ${e=>e.$selected?e.$disabled?r`
                     color: ${n["icon-selected-disabled"]};
-                `:o`
-                    color: ${n["icon-disabled-subtle"]};
-                `:e.$selected?o`
+                `:e.$error?r`
+                    color: ${n["icon-error-strong"]};
+                `:r`
                 color: ${n["icon-selected"]};
-            `:o`
+            `:e.$disabled?r`
+                color: ${n["icon-disabled-subtle"]};
+            `:r`
             color: ${n["icon-subtle"]};
         `};
-`;export{y as AlertContainer,k as Children,c as Container,w as ErrorContainer,L as ErrorList,j as ErrorText,f as ExpandButton,h as HeaderContainer,v as IndicatorLabelContainer,$ as Input,m as InputContainer,u as Label,x as RemoveButton,M as StyledToggleIcon,g as SubLabel,p as TextContainer};
+`;export{k as AlertContainer,y as Children,c as Container,w as ErrorContainer,L as ErrorList,j as ErrorText,x as ExpandButton,h as HeaderContainer,v as IndicatorLabelContainer,$ as Input,m as InputContainer,g as Label,f as RemoveButton,M as StyledToggleIcon,u as SubLabel,p as TextContainer};
 //# sourceMappingURL=toggle.styles.js.map

package/toggle/toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.styles.js","sources":["../../src/toggle/toggle.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Alert } from \"../alert\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { ToggleIcon } from \"../shared/toggle-icon/toggle-icon\";\nimport { TextList } from \"../text-list\";\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { ToggleStyleType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected?: boolean;\n    $disabled?: boolean;\n    $indicator?: boolean;\n}\n\ninterface ContainerStyleProps extends StyleProps {\n    $styleType?: ToggleStyleType;\n    $error?: boolean;\n    $useContentWidth?: boolean;\n}\n\ninterface IndicatorLabelContainerStyleProps {\n    $addPadding?: boolean;\n}\n\ninterface LabelStyleProps {\n    $maxLines?: { desktop?: number; mobile?: number; tablet?: number };\n}\n\ninterface ExpandButtonStyleProps extends StyleProps {\n    $paddingTopRequired?: boolean;\n}\n\ninterface ChildrenStyleProps extends StyleProps {\n    $isFinalItem?: boolean;\n}\n\ninterface InteractiveStyleProps {\n    $disabledVisual?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<ContainerStyleProps>`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${Radius[\"sm\"]};\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${Colour.bg};\n\n    &:has(input:focus-visible) {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n\n    ${(props) => {\n        if (!props.$indicator) {\n            return css`\n                justify-content: center;\n            `;\n        }\n    }}\n\n    // Container min width to fit content\n    ${(props) => {\n        if (props.$useContentWidth) {\n            return css`\n                min-width: unset;\n            `;\n        }\n    }}\n\n    // apply container border and header background color\n    ${(props) => {\n        switch (props.$styleType) {\n            case \"no-border\": {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-hover-subtle\"]};\n                                }\n                            }\n                        `;\n                    }\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border: none;\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border: none;\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border: none;\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border: none;\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n\n            default: {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-hover-subtle\"]};\n                                }\n                            }\n                        `;\n                    }\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${Colour[\"border-selected-disabled\"]};\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-disabled\"]};\n                            background: ${Colour[\"bg-disabled\"]};\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border-color: ${Colour[\"border-selected\"]};\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border-color: ${Colour.border};\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n        }\n    }}\n`;\n\nexport const Input = styled.input<InteractiveStyleProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.$disabledVisual ? \"not-allowed\" : \"pointer\")};\n    top: 0;\n    left: 0;\n    opacity: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n`;\n\nexport const TextContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n\n    // apply header container text color\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$selected) {\n                return css`\n                    color: ${Colour[\"text-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${Colour[\"text-disabled\"]};\n                `;\n            }\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        }\n\n        return css`\n            color: ${Colour.text};\n        `;\n    }}\n`;\n\nexport const Label = styled.label<LabelStyleProps & { $selected?: boolean }>`\n    ${(props) =>\n        props.$selected\n            ? Font[\"body-baseline-semibold\"]\n            : Font[\"body-baseline-regular\"]};\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n    -webkit-line-clamp: ${(props) => props.$maxLines?.desktop ?? \"none\"};\n    ${MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? \"none\"};\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? \"none\"};\n    }\n`;\n\nexport const SubLabel = styled.div`\n    ${Font[\"body-md-regular\"]}\n    margin-top: 0.5rem;\n\n    z-index: 1; // forces sublabel to render above the input\n    pointer-events: none; // to allow click events to be passed to the input\n\n    strong,\n    b {\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const HeaderContainer = styled.div<ContainerStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const IndicatorLabelContainer = styled.div<IndicatorLabelContainerStyleProps>`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: ${(props) =>\n        props.$addPadding ? \"0.6875rem 0rem 0.6875rem 1rem\" : \"0.6875rem 1rem\"};\n`;\n\nexport const RemoveButton = styled.button<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${Font[\"body-md-semibold\"]}\n    height: fit-content;\n    padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n    border: none;\n    background: none;\n\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n`;\n\nexport const ExpandButton = styled.button<ExpandButtonStyleProps>`\n    color: ${(props) =>\n        props.disabled ? Colour[\"text-disabled\"] : Colour[\"text-primary\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${Colour.bg};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0 1rem 0.6875rem 1rem;\n    padding-top: ${(props) =>\n        props.$paddingTopRequired ? \"0.6875rem\" : \"0rem\"};\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const ErrorContainer = styled.div<StyleProps>`\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    border: none;\n    background: ${Colour.bg};\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const AlertContainer = styled(Alert)`\n    width: 100%;\n    user-select: none;\n`;\n\nexport const Children = styled.div<ChildrenStyleProps>`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: ${(props) => (props.$isFinalItem ? \"0.6875rem\" : \"0.5rem\")};\n    background-color: ${Colour.bg};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        } else if (props.$selected) {\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        } else {\n            return css`\n                color: ${Colour.text};\n            `;\n        }\n    }}\n`;\n\nexport const ErrorText = styled(Typography.BodyMD)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const ErrorList = styled(TextList.Ul)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const StyledToggleIcon = styled(ToggleIcon)<StyleProps>`\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$selected) {\n                return css`\n                    color: ${Colour[\"icon-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${Colour[\"icon-disabled-subtle\"]};\n                `;\n            }\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${Colour[\"icon-selected\"]};\n            `;\n        }\n        return css`\n            color: ${Colour[\"icon-subtle\"]};\n        `;\n    }};\n`;\n"],"names":["Container","styled","div","Radius","Colour","bg","props","$indicator","css","$useContentWidth","$styleType","$error","$disabled","HeaderContainer","$selected","TextContainer","StyledToggleIcon","border","Input","input","$disabledVisual","InputContainer","text","Label","label","Font","_a","_b","$maxLines","desktop","MediaQuery","MaxWidth","lg","tablet","sm","mobile","SubLabel","IndicatorLabelContainer","$addPadding","RemoveButton","button","ExpandButton","disabled","$paddingTopRequired","ErrorContainer","AlertContainer","Alert","Children","$isFinalItem","applyHtmlContentStyle","textSize","ErrorText","Typography","BodyMD","ErrorList","TextList","Ul","ToggleIcon"],"mappings":"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"}
+{"version":3,"file":"toggle.styles.js","sources":["../../src/toggle/toggle.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Alert } from \"../alert\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { ToggleIcon } from \"../shared/toggle-icon/toggle-icon\";\nimport { TextList } from \"../text-list\";\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { ToggleStyleType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $error?: boolean;\n    $selected?: boolean;\n    $disabled?: boolean;\n    $indicator?: boolean;\n}\n\ninterface ContainerStyleProps extends StyleProps {\n    $styleType?: ToggleStyleType;\n    $error?: boolean;\n    $useContentWidth?: boolean;\n}\n\ninterface IndicatorLabelContainerStyleProps {\n    $addPadding?: boolean;\n}\n\ninterface LabelStyleProps {\n    $maxLines?: { desktop?: number; mobile?: number; tablet?: number };\n}\n\ninterface ExpandButtonStyleProps extends StyleProps {\n    $paddingTopRequired?: boolean;\n}\n\ninterface ChildrenStyleProps extends StyleProps {\n    $isFinalItem?: boolean;\n}\n\ninterface InteractiveStyleProps {\n    $disabledVisual?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<ContainerStyleProps>`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${Radius[\"sm\"]};\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${Colour.bg};\n\n    &:has(input:focus-visible) {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n\n    ${(props) => {\n        if (!props.$indicator) {\n            return css`\n                justify-content: center;\n            `;\n        }\n    }}\n\n    // Container min width to fit content\n    ${(props) => {\n        if (props.$useContentWidth) {\n            return css`\n                min-width: unset;\n            `;\n        }\n    }}\n\n    // apply container border and header background color\n    ${(props) => {\n        switch (props.$styleType) {\n            case \"no-border\": {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    }\n\n                    if (props.$selected) {\n                        return css`\n                            border-color: transparent;\n                            background: ${Colour[\"bg-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-error-hover\"]};\n                                }\n                            }\n                        `;\n                    }\n\n                    return css`\n                        border-color: ${Colour[\"border-error\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-hover-subtle\"]};\n                            }\n                        }\n                    `;\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border: none;\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border: none;\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border: none;\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border: none;\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n\n            default: {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    }\n\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                            background: ${Colour[\"bg-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-error-hover\"]};\n                                }\n                            }\n                        `;\n                    }\n\n                    return css`\n                        border-color: ${Colour[\"border-error\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-hover-subtle\"]};\n                            }\n                        }\n                    `;\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${Colour[\"border-selected-disabled\"]};\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-disabled\"]};\n                            background: ${Colour[\"bg-disabled\"]};\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border-color: ${Colour[\"border-selected\"]};\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border-color: ${Colour.border};\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n        }\n    }}\n`;\n\nexport const Input = styled.input<InteractiveStyleProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.$disabledVisual ? \"not-allowed\" : \"pointer\")};\n    top: 0;\n    left: 0;\n    opacity: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n`;\n\nexport const TextContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n\n    // apply header container text color\n    ${(props) => {\n        if (props.$selected) {\n            if (props.$disabled) {\n                return css`\n                    color: ${Colour[\"text-selected-disabled\"]};\n                `;\n            }\n\n            if (props.$error) {\n                return css`\n                    color: ${Colour[\"text-error\"]};\n                `;\n            }\n\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n\n        return css`\n            color: ${Colour.text};\n        `;\n    }}\n`;\n\nexport const Label = styled.label<LabelStyleProps & { $selected?: boolean }>`\n    ${(props) =>\n        props.$selected\n            ? Font[\"body-baseline-semibold\"]\n            : Font[\"body-baseline-regular\"]};\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n    -webkit-line-clamp: ${(props) => props.$maxLines?.desktop ?? \"none\"};\n    ${MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? \"none\"};\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? \"none\"};\n    }\n`;\n\nexport const SubLabel = styled.div`\n    ${Font[\"body-md-regular\"]}\n    margin-top: 0.5rem;\n\n    z-index: 1; // forces sublabel to render above the input\n    pointer-events: none; // to allow click events to be passed to the input\n\n    strong,\n    b {\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const HeaderContainer = styled.div<ContainerStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const IndicatorLabelContainer = styled.div<IndicatorLabelContainerStyleProps>`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: ${(props) =>\n        props.$addPadding ? \"0.6875rem 0rem 0.6875rem 1rem\" : \"0.6875rem 1rem\"};\n`;\n\nexport const RemoveButton = styled.button<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${Font[\"body-md-semibold\"]}\n    height: fit-content;\n    padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n    border: none;\n    background: none;\n\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n`;\n\nexport const ExpandButton = styled.button<ExpandButtonStyleProps>`\n    color: ${(props) =>\n        props.disabled ? Colour[\"text-disabled\"] : Colour[\"text-primary\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${Colour.bg};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0 1rem 0.6875rem 1rem;\n    padding-top: ${(props) =>\n        props.$paddingTopRequired ? \"0.6875rem\" : \"0rem\"};\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const ErrorContainer = styled.div<StyleProps>`\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    border: none;\n    background: ${Colour.bg};\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const AlertContainer = styled(Alert)`\n    width: 100%;\n    user-select: none;\n`;\n\nexport const Children = styled.div<ChildrenStyleProps>`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: ${(props) => (props.$isFinalItem ? \"0.6875rem\" : \"0.5rem\")};\n    background-color: ${Colour.bg};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        }\n\n        return css`\n            color: ${Colour.text};\n        `;\n    }}\n`;\n\nexport const ErrorText = styled(Typography.BodyMD)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const ErrorList = styled(TextList.Ul)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const StyledToggleIcon = styled(ToggleIcon)<StyleProps>`\n    ${(props) => {\n        if (props.$selected) {\n            if (props.$disabled)\n                return css`\n                    color: ${Colour[\"icon-selected-disabled\"]};\n                `;\n\n            if (props.$error)\n                return css`\n                    color: ${Colour[\"icon-error-strong\"]};\n                `;\n\n            return css`\n                color: ${Colour[\"icon-selected\"]};\n            `;\n        }\n\n        if (props.$disabled)\n            return css`\n                color: ${Colour[\"icon-disabled-subtle\"]};\n            `;\n\n        return css`\n            color: ${Colour[\"icon-subtle\"]};\n        `;\n    }};\n`;\n"],"names":["Container","styled","div","Radius","Colour","bg","props","$indicator","css","$useContentWidth","$styleType","$error","$disabled","$selected","HeaderContainer","TextContainer","StyledToggleIcon","border","Input","input","$disabledVisual","InputContainer","text","Label","label","Font","_a","_b","$maxLines","desktop","MediaQuery","MaxWidth","lg","tablet","sm","mobile","SubLabel","IndicatorLabelContainer","$addPadding","RemoveButton","button","ExpandButton","disabled","$paddingTopRequired","ErrorContainer","AlertContainer","Alert","Children","$isFinalItem","applyHtmlContentStyle","textSize","ErrorText","Typography","BodyMD","ErrorList","TextList","Ul","ToggleIcon"],"mappings":"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"}