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

package/cjs/toggle/toggle.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),i=require("@lifesg/react-icons/chevron-down"),t=require("@lifesg/react-icons/chevron-up"),a=require("react");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var n=require("./toggle.styles.js");exports.Toggle=d=>{var{type:l="checkbox",indicator:o,checked:c,styleType:u="default",children:b,childrenMaxLines:h,subLabel:p,disabled:$,error:x,name:j,id:g,className:m,compositeSection:y,removable:v,focusableWhenDisabled:C,useContentWidth:f,onRemove:k,onChange:q,"data-testid":I,"aria-describedby":T}=d,w=e.__rest(d,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:E=!0,errors:L,children:S,initialExpanded:A}=y||{},[R,W]=a.useState(c),[D,N]=a.useState(!!A),_=a.useMemo((()=>{const e=Array.isArray(L)&&(null==L?void 0:L.length)>0,r=!Array.isArray(L)&&!!L;return e||r}),[L]),B=s.useId(),F=g?`${g}`:`tg-${B}`,M=a.useRef(null),P=!!$&&!!C,H=!!$&&!C,O=!!$;a.useEffect((()=>{W(c)}),[c]),a.useEffect((()=>{R&&N(null==A||A)}),[R]);const U=e=>{if(O)e.preventDefault();else if(q)q(e);else switch(l){case"checkbox":W((e=>!e));break;case"radio":case"yes":case"no":R||W(!0)}},V=()=>{$||N(!D)},z=()=>{$||!k||k()},G=()=>{var e;null===(e=null==M?void 0:M.current)||void 0===e||e.click()},J=e=>{e.stopPropagation()},K=()=>{let e;switch(l){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=l}return r.jsx(n.StyledToggleIcon,{type:e,active:R,disabled:$,$selected:R,$disabled:$,$error:x})},Q=()=>{if(!p)return null;let e;return e="function"==typeof p?p():p,r.jsx(n.SubLabel,{"data-id":"toggle-sublabel",id:`${F}-sublabel`,"aria-hidden":!0,children:e})},X=()=>{const e=!D&&!_;return E&&r.jsxs(n.ExpandButton,{$paddingTopRequired:e,disabled:$,onClick:V,"data-testid":D?"collapse-button":"expand-button",children:[D?"Show less":"Show more",D?r.jsx(t.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(i.ChevronDownIcon,{"aria-hidden":!0})]})},Y=e=>r.jsxs(r.Fragment,{children:[r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:"Error"}),r.jsx(n.ErrorList,{$disabled:$,children:null==e?void 0:e.map(((e,i)=>r.jsx("li",{id:`${F}-error-list-item-${i}`,children:r.jsx(n.ErrorText,{weight:"semibold",$disabled:$,children:e})},i)))})]});return r.jsxs(n.Container,{$selected:R,$disabled:$,className:m,$styleType:u,$error:x,$indicator:o,$useContentWidth:f,id:g,"data-testid":I,children:[(()=>{const e=["string"==typeof p?`${F}-sublabel`:null,T].filter(Boolean).join(" ")||void 0;return r.jsxs(n.HeaderContainer,{id:`${F}-header-container`,$disabled:$,$error:x,$selected:R,$indicator:o,$styleType:u,children:[r.jsx(n.IndicatorLabelContainer,{$addPadding:v,children:r.jsxs(n.InputContainer,{id:`${F}-input-container`,onClick:G,children:[r.jsx(n.Input,Object.assign({ref:M,name:j,id:`${F}-input`,type:"checkbox"===l?"checkbox":"radio","data-testid":"toggle-input",disabled:H,"aria-disabled":P,$disabledVisual:$,onChange:U,onClick:J,checked:R,tabIndex:P?0:void 0,"aria-describedby":e},w)),o&&K(),r.jsxs(n.TextContainer,{$selected:R,$disabled:$,$error:x,children:[r.jsx(n.Label,{htmlFor:`${F}-input`,"data-testid":"toggle-label",id:`${F}-label`,$maxLines:h,$selected:R,children:b}),p&&Q()]})]})}),v&&r.jsx(n.RemoveButton,{type:"button",$disabled:$,onClick:z,id:`${F}-remove-button`,children:"Remove"})]})})(),S&&r.jsxs("div",{children:[(!E||D)&&r.jsx(n.Children,{"data-id":"toggle-composite-children",$isFinalItem:!E,$disabled:$,children:S}),E&&!D&&_&&r.jsx(n.ErrorContainer,{$disabled:$,onClick:V,id:`${F}-error-alert`,children:r.jsx(n.AlertContainer,{type:$?"description":"error",className:m,showIcon:!0,children:Array.isArray(L)?Y(L):L})}),X()]})]})};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("@lifesg/react-icons/chevron-down"),l=require("@lifesg/react-icons/chevron-up"),i=require("clsx"),a=require("react"),o=require("../alert/alert.js"),s=require("../markup/markup.js"),n=require("../text-list/index.js");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var d=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js");var c=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var u=require("../util/simple-id-generator.js");require("../util/string-helper.js"),require("@react-aria/live-announcer");var b=require("./toggle.styles.js"),h=require("./toggle-icon.js");function m(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=m(i);exports.Toggle=i=>{var{type:m="checkbox",indicator:x,checked:g,styleType:j="default",children:v,childrenMaxLines:f,subLabel:y,disabled:C,error:k,name:q,id:D,className:N,compositeSection:T,removable:S,focusableWhenDisabled:$,useContentWidth:L,onRemove:E,onChange:w,"data-testid":A,"aria-describedby":I}=i,B=e.__rest(i,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","data-testid","aria-describedby"]);const{collapsible:M=!0,errors:R,children:F,initialExpanded:W}=T||{},[P,_]=a.useState(g),[H,U]=a.useState(!!W),z=a.useMemo((()=>{const e=Array.isArray(R)&&(null==R?void 0:R.length)>0,r=!Array.isArray(R)&&!!R;return e||r}),[R]),O=u.useId(),G=D?`${D}`:`tg-${O}`,J=a.useRef(null),K=a.useRef(null);d.useApplyStyle(K,{[b.tokens.label.desktopLineClamp]:null==(null==f?void 0:f.desktop)?null:`${f.desktop}`,[b.tokens.label.tabletLineClamp]:null==(null==f?void 0:f.tablet)?null:`${f.tablet}`,[b.tokens.label.mobileLineClamp]:null==(null==f?void 0:f.mobile)?null:`${f.mobile}`});const Q=!!C&&!!$,V=!!C&&!$,X=!!C;a.useEffect((()=>{_(g)}),[g]),a.useEffect((()=>{P&&U(null==W||W)}),[P]);const Y=e=>{if(X)e.preventDefault();else if(w)w(e);else switch(m){case"checkbox":_((e=>!e));break;case"radio":case"yes":case"no":P||_(!0)}},Z=()=>{C||U(!H)},ee=()=>{C||!E||E()},re=()=>{var e;null===(e=null==J?void 0:J.current)||void 0===e||e.click()},te=e=>{e.stopPropagation()},le=()=>{let e;switch(m){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=m}return r.jsx(h.ToggleIcon,{type:e,active:P,disabled:C,error:k})},ie=()=>{if(!y)return null;let e;return e="function"==typeof y?y():y,r.jsx("div",{"data-id":"toggle-sublabel",id:`${G}-sublabel`,"aria-hidden":!0,className:b.subLabel,children:e})},ae=()=>{const e=!H&&!z;return M&&r.jsx("button",{className:p.default(b.expandButton,C?b.disabledColorCursor:b.colorTextPrimary,e&&b.expandButtonPaddingTopRequired),disabled:C,onClick:Z,"data-testid":H?"collapse-button":"expand-button",children:H?r.jsxs(r.Fragment,{children:["Show less",r.jsx(l.ChevronUpIcon,{"aria-hidden":!0})]}):r.jsxs(r.Fragment,{children:["Show more",r.jsx(t.ChevronDownIcon,{"aria-hidden":!0})]})})},oe=e=>{const t=p.default(b.colorTextError,C&&b.colorTextDisabled);return r.jsxs(r.Fragment,{children:[r.jsx(c.Typography.BodyMD,{weight:"semibold",className:t,children:"Error"}),r.jsx(n.TextList.Ul,{className:t,children:null==e?void 0:e.map(((e,l)=>r.jsx("li",{id:`${G}-error-list-item-${l}`,children:r.jsx(c.Typography.BodyMD,{weight:"semibold",className:t,children:e})},l)))})]})};return r.jsxs("div",{className:p.default(b.container,!P&&k?b.borderError:"no-border"===j?b.borderNone:P&&C?b.borderSelectedDisabled:C?b.borderDisabled:k?b.borderError:P?b.borderSelected:b.borderDefault,P?k?b.bgError:C?b.bgSelectedDisabled:b.bgSelected:C&&"no-border"!==j?b.bgDisabled:b.bgDefault,C?null:P?k?b.toggleContainerHoverError:b.toggleContainerHoverSelected:b.toggleContainerHoverDefault,!x&&b.containerNoIndicator,L&&b.containerUseContentWidth,N),id:D,"data-testid":A,children:[(()=>{const e=["string"==typeof y?`${G}-sublabel`:null,I].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{id:`${G}-header-container`,className:b.headerContainer,children:[r.jsx("div",{className:p.default(b.indicatorLabelContainer,S&&b.indicatorLabelContainerAddPadding),children:r.jsxs("div",{id:`${G}-input-container`,onClick:re,className:b.inputContainer,children:[r.jsx("input",Object.assign({ref:J,name:q,id:`${G}-input`,type:"checkbox"===m?"checkbox":"radio","data-testid":"toggle-input",className:p.default(b.input,C&&b.disabledColorCursor),disabled:V,"aria-disabled":Q,onChange:Y,onClick:te,checked:P,tabIndex:Q?0:void 0,"aria-describedby":e},B)),x&&le(),r.jsxs("div",{className:p.default(b.textContainer,P?k?b.colorTextError:C?b.toggleTextContainerDisabledSelected:b.toggleTextContainerSelected:C?b.colorTextDisabled:b.colorTextDefault),children:[r.jsx("label",{ref:K,htmlFor:`${G}-input`,"data-testid":"toggle-label",id:`${G}-label`,className:p.default(b.label,P?b.toggleLabelSelected:b.toggleLabelDefault),children:v}),y&&ie()]})]})}),S&&r.jsx("button",{type:"button",className:p.default(b.removeButton,C&&b.disabledColorCursor),onClick:ee,id:`${G}-remove-button`,children:"Remove"})]})})(),F&&r.jsxs("div",{children:[(!M||H)&&r.jsx("div",{"data-id":"toggle-composite-children",className:p.default(b.children,!M&&b.childrenIsFinalItem,C?b.colorTextDisabled:b.colorTextDefault),children:r.jsx(s.Markup,{baseTextSize:"body-md",children:F})}),M&&!H&&z&&r.jsx("div",{className:p.default(b.errorContainer,C?b.disabledColorCursor:b.colorTextDefault),onClick:Z,id:`${G}-error-alert`,children:r.jsx(o.Alert,{type:C?"description":"error",className:b.alertContainer,showIcon:!0,children:Array.isArray(R)?oe(R):R})}),ae()]})]})};
 //# sourceMappingURL=toggle.js.map

package/cjs/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                $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":["_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","renderExpandButton","collapsedWithoutErrors","_jsxs","ExpandButton","$paddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","ErrorText","weight","ErrorList","map","item","index","Container","$styleType","$indicator","$useContentWidth","ariaDescriptions","filter","Boolean","join","undefined","HeaderContainer","IndicatorLabelContainer","InputContainer","Input","ref","$disabledVisual","tabIndex","TextContainer","Label","htmlFor","$maxLines","RemoveButton","renderToggleWithRemoveButton","Children","$isFinalItem","ErrorContainer","AlertContainer","showIcon"],"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 clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\n// @catalog\n/**\n * A selectable control for checkbox and radio interaction patterns.\n *\n * Use `Toggle` to present a labeled option that the user can select or\n * deselect.\n * @keywords checkbox, choice, field, form, input, option, radio\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    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useApplyStyle(labelRef, {\n        [styles.tokens.label.desktopLineClamp]:\n            childrenMaxLines?.desktop == null\n                ? null\n                : `${childrenMaxLines.desktop}`,\n        [styles.tokens.label.tabletLineClamp]:\n            childrenMaxLines?.tablet == null\n                ? null\n                : `${childrenMaxLines.tablet}`,\n        [styles.tokens.label.mobileLineClamp]:\n            childrenMaxLines?.mobile == null\n                ? null\n                : `${childrenMaxLines.mobile}`,\n    });\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        // eslint-disable-next-line react-hooks/exhaustive-deps\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    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const getContainerBorderClass = () => {\n        if (!selected && error) return styles.borderError;\n        if (styleType === \"no-border\") return styles.borderNone;\n        if (selected && disabled) return styles.borderSelectedDisabled;\n        if (disabled) return styles.borderDisabled;\n        if (error) return styles.borderError;\n        if (selected) return styles.borderSelected;\n        return styles.borderDefault;\n    };\n\n    const getContainerBgClass = () => {\n        if (selected) {\n            if (error) return styles.bgError;\n            return disabled ? styles.bgSelectedDisabled : styles.bgSelected;\n        }\n\n        if (disabled && styleType !== \"no-border\") return styles.bgDisabled;\n        return styles.bgDefault;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) return null;\n        if (selected)\n            return error\n                ? styles.toggleContainerHoverError\n                : styles.toggleContainerHoverSelected;\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerClass = () => {\n        if (selected) {\n            if (error) return styles.colorTextError;\n\n            if (disabled) return styles.toggleTextContainerDisabledSelected;\n\n            return styles.toggleTextContainerSelected;\n        }\n\n        if (disabled) return styles.colorTextDisabled;\n        return styles.colorTextDefault;\n    };\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            <ToggleIcon\n                type={toggleIconType}\n                active={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            <div\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n                className={styles.subLabel}\n            >\n                {component}\n            </div>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <div\n                    data-id=\"toggle-composite-children\"\n                    className={clsx(\n                        styles.children,\n                        !collapsible && styles.childrenIsFinalItem,\n                        disabled\n                            ? styles.colorTextDisabled\n                            : styles.colorTextDefault\n                    )}\n                >\n                    <Markup baseTextSize=\"body-md\">\n                        {compositeSectionChildren}\n                    </Markup>\n                </div>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <button\n                    className={clsx(\n                        styles.expandButton,\n                        disabled\n                            ? styles.disabledColorCursor\n                            : styles.colorTextPrimary,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? (\n                        <>\n                            Show less\n                            <ChevronUpIcon aria-hidden />\n                        </>\n                    ) : (\n                        <>\n                            Show more\n                            <ChevronDownIcon aria-hidden />\n                        </>\n                    )}\n                </button>\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            <div\n                id={`${generatedId}-header-container`}\n                className={styles.headerContainer}\n            >\n                <div\n                    className={clsx(\n                        styles.indicatorLabelContainer,\n                        removable && styles.indicatorLabelContainerAddPadding\n                    )}\n                >\n                    <div\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                        className={styles.inputContainer}\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                            className={clsx(\n                                styles.input,\n                                disabled && styles.disabledColorCursor\n                            )}\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\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                        <div\n                            className={clsx(\n                                styles.textContainer,\n                                getTextContainerClass()\n                            )}\n                        >\n                            <label\n                                ref={labelRef}\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                className={clsx(\n                                    styles.label,\n                                    selected\n                                        ? styles.toggleLabelSelected\n                                        : styles.toggleLabelDefault\n                                )}\n                            >\n                                {children}\n                            </label>\n                            {subLabel && renderSubLabel()}\n                        </div>\n                    </div>\n                </div>\n                {removable && (\n                    <button\n                        type=\"button\"\n                        className={clsx(\n                            styles.removeButton,\n                            disabled && styles.disabledColorCursor\n                        )}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </button>\n                )}\n            </div>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        const className = clsx(\n            styles.colorTextError,\n            disabled && styles.colorTextDisabled\n        );\n\n        return (\n            <>\n                <Typography.BodyMD weight=\"semibold\" className={className}>\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul className={className}>\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <Typography.BodyMD\n                                    weight=\"semibold\"\n                                    className={className}\n                                >\n                                    {item}\n                                </Typography.BodyMD>\n                            </li>\n                        );\n                    })}\n                </TextList.Ul>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <div\n                    className={clsx(\n                        styles.errorContainer,\n                        disabled\n                            ? styles.disabledColorCursor\n                            : styles.colorTextDefault\n                    )}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <Alert\n                        type={disabled ? \"description\" : \"error\"}\n                        className={styles.alertContainer}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </Alert>\n                </div>\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        <div\n            className={clsx(\n                styles.container,\n                getContainerBorderClass(),\n                getContainerBgClass(),\n                getContainerHoverClass(),\n                !indicator && styles.containerNoIndicator,\n                useContentWidth && styles.containerUseContentWidth,\n                className\n            )}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </div>\n    );\n};\n"],"names":["_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","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderExpandButton","collapsedWithoutErrors","clsx","styles.expandButton","styles.disabledColorCursor","styles.colorTextPrimary","styles.expandButtonPaddingTopRequired","onClick","_jsxs","_Fragment","ChevronUpIcon","ChevronDownIcon","renderErrorList","styles.colorTextError","styles.colorTextDisabled","Typography","BodyMD","weight","TextList","Ul","map","item","index","styles.container","styles.borderError","styles.borderNone","styles.borderSelectedDisabled","styles.borderDisabled","styles.borderSelected","styles.borderDefault","styles.bgError","styles.bgSelectedDisabled","styles.bgSelected","styles.bgDisabled","styles.bgDefault","styles.toggleContainerHoverError","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","styles.containerNoIndicator","styles.containerUseContentWidth","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","styles.colorTextDefault","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"6hCAwBuBA,QAAAC,KACnBA,EAAO,WAAUC,UACjBA,EAASC,QACTA,EAAOC,UACPA,EAAY,UAASC,SACrBA,EAAQC,iBACRA,EAAgBC,SAChBA,EAAQC,SACRA,EAAQC,MACRA,EAAKC,KACLA,EAAIC,GACJA,EAAEC,UACFA,EAASC,iBACTA,EAAgBC,UAChBA,EAASC,sBACTA,EAAqBC,gBACrBA,EAAeC,SACfA,EAAQC,SACRA,EACA,cAAeC,EACf,mBAAoBC,KACjBC,EAAUC,EAAAA,OAAAtB,EArBM,CAAA,OAAA,YAAA,UAAA,YAAA,WAAA,mBAAA,WAAA,WAAA,QAAA,OAAA,KAAA,YAAA,mBAAA,YAAA,wBAAA,kBAAA,WAAA,WAAA,cAAA,qBA0BnB,MAAMuB,YACFA,GAAc,EAAIC,OAClBA,EACAnB,SAAUoB,EAAwBC,gBAClCA,GACAb,GAAoB,CAAA,GACjBc,EAAUC,GAAeC,EAAAA,SAA8B1B,IACvD2B,EAAUC,GAAeF,EAAAA,WAAoBH,GAC9CM,EAA2BC,EAAAA,SAAQ,KACrC,MAAMC,EAAeC,MAAMC,QAAQZ,KAAWA,aAAM,EAANA,EAAQa,QAAS,EACzDC,GAAmBH,MAAMC,QAAQZ,MAAaA,EACpD,OAAOU,GAAgBI,CAAe,GACvC,CAACd,IACEe,EAAWC,EAAAA,QACXC,EAAc9B,EAAK,GAAGA,IAAO,MAAM4B,IAEnCG,EAAWC,EAAAA,OAAyB,MACpCC,EAAWD,EAAAA,OAAyB,MAE1CE,EAAAA,cAAcD,EAAU,CACpB,CAACE,SAAcC,MAAMC,kBACY,OAA7B1C,aAAgB,EAAhBA,EAAkB2C,SACZ,KACA,GAAG3C,EAAiB2C,UAC9B,CAACH,SAAcC,MAAMG,iBACW,OAA5B5C,aAAgB,EAAhBA,EAAkB6C,QACZ,KACA,GAAG7C,EAAiB6C,SAC9B,CAACL,SAAcC,MAAMK,iBACW,OAA5B9C,aAAgB,EAAhBA,EAAkB+C,QACZ,KACA,GAAG/C,EAAiB+C,WAGlC,MAAMC,IAA4B9C,KAAcO,EAC1CwC,IAAqB/C,IAAaO,EAClCyC,IAAyBhD,EAK/BiD,EAAAA,WAAU,KACN7B,EAAYzB,EAAQ,GACrB,CAACA,IAEJsD,EAAAA,WAAU,KACF9B,GACAI,EAAYL,SAAAA,EAChB,GAED,CAACC,IAKJ,MAAM+B,EAAkBC,IACpB,GAAIH,EACAG,EAAMC,sBAIV,GAAI1C,EACAA,EAASyC,QAIb,OAAQ1D,GACJ,IAAK,WACD2B,GAAaiC,IACDA,IAEZ,MACJ,IAAK,QACL,IAAK,MACL,IAAK,KACIlC,GACDC,GAAY,KAMtBkC,EAA4B,KACzBtD,GACDuB,GAAaD,EACjB,EAGEiC,GAAiB,KACdvD,IACGS,GACAA,GAGR,EAGE+C,GAAuB,WACR,QAAjBhE,EAAA0C,aAAQ,EAARA,EAAUuB,eAAO,IAAAjE,GAAAA,EAAEkE,OAAO,EAGxBC,GAAoBC,IACtBA,EAAEC,iBAAiB,EAoDjBC,GAAkB,KACpB,IAAIC,EAEJ,OAAQtE,GACJ,IAAK,MACDsE,EAAiB,OACjB,MACJ,IAAK,KACDA,EAAiB,QACjB,MACJ,IAAK,WACL,IAAK,QACDA,EAAiBtE,EAIzB,OACIuE,MAACC,EAAAA,WAAU,CACPxE,KAAMsE,EACNG,OAAQ/C,EACRnB,SAAUA,EACVC,MAAOA,GACT,EAIJkE,GAAiB,KACnB,IAAKpE,EACD,OAAO,KAGX,IAAIqE,EASJ,OANIA,EADoB,mBAAbrE,EACKA,IAEAA,EAKZiE,EAAAA,IAAA,MAAA,CAAA,UACY,kBACR7D,GAAI,GAAG8B,8BAEP7B,UAAWiE,EAAAA,kBAEVD,GACC,EAyBRE,GAAqB,KACvB,MAAMC,GAA0BjD,IAAaE,EAE7C,OACIT,GACIiD,EAAAA,IAAA,SAAA,CACI5D,UAAWoE,EAAAA,QACPC,eACAzE,EACM0E,EAAAA,oBACAC,EAAAA,iBACNJ,GACIK,EAAAA,gCAER5E,SAAUA,EACV6E,QAASvB,EAAyB,cACrBhC,EAAW,kBAAoB,gBAAezB,SAE1DyB,EACGwD,OAAAC,EAAAA,SAAA,CAAAlF,SAAA,CAAA,YAEImE,MAACgB,EAAAA,cAAa,CAAA,eAAA,OAGlBF,OAAAC,EAAAA,SAAA,CAAAlF,SAAA,CAAA,YAEImE,MAACiB,EAAAA,gBAAe,CAAA,eAAA,QAI/B,EA0FHC,GAAmBlE,IACrB,MAAMZ,EAAYoE,EAAAA,QACdW,iBACAnF,GAAYoF,EAAAA,mBAGhB,OACIN,EAAAA,KAAAC,EAAAA,SAAA,CAAAlF,SAAA,CACImE,EAAAA,IAACqB,EAAAA,WAAWC,OAAM,CAACC,OAAO,WAAWnF,UAAWA,EAASP,SAAA,UAGzDmE,EAAAA,IAACwB,EAAAA,SAASC,GAAE,CAACrF,UAAWA,EAASP,SAC5BmB,aAAM,EAANA,EAAQ0E,KAAI,CAACC,EAAMC,IAEZ5B,EAAAA,IAAA,KAAA,CAEI7D,GAAI,GAAG8B,qBAA+B2D,IAAO/F,SAE7CmE,EAAAA,IAACqB,EAAAA,WAAWC,OAAM,CACdC,OAAO,WACPnF,UAAWA,EAASP,SAEnB8F,KAPAC,SAatB,EA6CX,OACId,cACI1E,UAAWoE,EAAAA,QACPqB,EAAAA,WAzTH1E,GAAYlB,EAAc6F,EAAAA,YACb,cAAdlG,EAAkCmG,EAAAA,WAClC5E,GAAYnB,EAAiBgG,EAAAA,uBAC7BhG,EAAiBiG,EAAAA,eACjBhG,EAAc6F,EAAAA,YACd3E,EAAiB+E,EAAAA,eACdC,EAAAA,cAIHhF,EACIlB,EAAcmG,EAAAA,QACXpG,EAAWqG,EAAAA,mBAA4BC,EAAAA,WAG9CtG,GAA0B,cAAdJ,EAAkC2G,EAAAA,WAC3CC,EAAAA,UAIHxG,EAAiB,KACjBmB,EACOlB,EACDwG,EAAAA,0BACAC,EAAAA,6BACHC,EAAAA,6BAoSEjH,GAAakH,EAAAA,qBACdpG,GAAmBqG,EAAAA,yBACnBzG,GAEJD,GAAIA,EAAE,cACOQ,YA3KgB,MACjC,MAAMmG,EACF,CACwB,iBAAb/G,EAAwB,GAAGkC,aAAyB,KAC3DrB,GAECmG,OAAOC,SACPC,KAAK,WAAQC,EAEtB,OACIpC,OAAA,MAAA,CACI3E,GAAI,GAAG8B,qBACP7B,UAAW+G,EAAAA,gBAAsBtH,SAAA,CAEjCmE,EAAAA,WACI5D,UAAWoE,EAAAA,QACP4C,0BACA9G,GAAa+G,EAAAA,mCAChBxH,SAEDiF,EAAAA,KAAA,MAAA,CACI3E,GAAI,GAAG8B,oBACP4C,QAASrB,GACTpD,UAAWkH,EAAAA,eAAqBzH,SAAA,CAEhCmE,6BACIuD,IAAKrF,EACLhC,KAAMA,EACNC,GAAI,GAAG8B,UACPxC,KAAe,aAATA,EAAsB,WAAa,QAAO,cACpC,eACZW,UAAWoE,UACPgD,EAAAA,MACAxH,GAAY0E,uBAEhB1E,SAAU+C,EAAgB,gBACXD,EACfpC,SAAUwC,EACV2B,QAASlB,GACThE,QAASwB,EACTsG,SAAU3E,EAA0B,OAAIoE,EAAS,mBAC/BJ,GACdjG,IAEPnB,GAAaoE,KACdgB,EAAAA,KAAA,MAAA,CACI1E,UAAWoE,EAAAA,QACPkD,gBAzKpBvG,EACIlB,EAAckF,EAAAA,eAEdnF,EAAiB2H,EAAAA,oCAEdC,EAAAA,4BAGP5H,EAAiBoF,EAAAA,kBACdyC,EAAAA,kBAkKchI,SAAA,CAEDmE,EAAAA,aACIuD,IAAKnF,EACL0F,QAAS,GAAG7F,UAAmB,cAClB,eACb9B,GAAI,GAAG8B,UACP7B,UAAWoE,EAAAA,QACPuD,EAAAA,MACA5G,EACM6G,EAAAA,oBACAC,EAAAA,6BAGTpI,IAEJE,GAAYoE,aAIxB7D,GACG0D,EAAAA,IAAA,SAAA,CACIvE,KAAK,SACLW,UAAWoE,EAAAA,QACP0D,EAAAA,aACAlI,GAAY0E,EAAAA,qBAEhBG,QAAStB,GACTpD,GAAI,GAAG8B,kBAA2BpC,SAAA,aAKxC,EA2FLsI,GAxBDlH,GACI6D,EAAAA,KAAA,MAAA,CAAAjF,SAAA,GA3MFkB,GAAeO,IACb0C,EAAAA,IAAA,MAAA,CAAA,UACY,4BACR5D,UAAWoE,EAAAA,QACP4D,EAAAA,UACCrH,GAAesH,EAAAA,oBAChBrI,EACMoF,EAAAA,kBACAyC,EAAAA,kBACThI,SAEDmE,EAAAA,IAACsE,SAAM,CAACC,aAAa,UAAS1I,SACzBoB,MAiKbF,IACCO,GACDE,GACIwC,EAAAA,IAAA,MAAA,CACI5D,UAAWoE,EAAAA,QACPgE,EAAAA,eACAxI,EACM0E,EAAAA,oBACAmD,EAAAA,kBAEVhD,QAASvB,EACTnD,GAAI,GAAG8B,gBAAyBpC,SAEhCmE,EAAAA,IAACyE,EAAAA,MAAK,CACFhJ,KAAMO,EAAW,cAAgB,QACjCI,UAAWsI,EAAAA,eACXC,UAAQ,EAAA9I,SAEP8B,MAAMC,QAAQZ,GACTkE,GAAgBlE,GAChBA,MAaTsD,UAsBP"}

package/cjs/toggle/toggle.styles.js

@@ -1,266 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../alert/alert.js"),r=require("../shared/html-content/html-content.js"),t=require("../shared/toggle-icon/toggle-icon.js"),l=require("../text-list/index.js"),d=require("../theme/index.js"),i=require("../typography/typography.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(e);const a=s.default.div`
-    position: relative;
-    display: inline-flex;
-    min-width: 10.375rem;
-    border-radius: ${d.Radius.sm};
-    border-width: 1px;
-    border-style: solid;
-    overflow: hidden;
-    flex-direction: column;
-    height: fit-content;
-    background: ${d.Colour.bg};
-
-    &:has(input:focus-visible) {
-        outline: 2px solid ${d.Colour["focus-ring"]};
-        outline-offset: 0;
-    }
-
-    ${o=>{if(!o.$indicator)return e.css`
-                justify-content: center;
-            `}}
-
-    // Container min width to fit content
-    ${o=>{if(o.$useContentWidth)return e.css`
-                min-width: unset;
-            `}}
-
-    // apply container border and header background color
-    ${o=>"no-border"===o.$styleType?o.$error?o.$disabled?e.css`
-                            border-color: ${d.Colour["border-error"]};
-                        `:o.$selected?e.css`
-                            border-color: transparent;
-                            background: ${d.Colour["bg-error"]};
-
-                            &:has(${g}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${d.Colour["bg-error-hover"]};
-                                }
-                            }
-                        `:e.css`
-                        border-color: ${d.Colour["border-error"]};
-
-                        &:has(${g}:hover) {
-                            @media (pointer: fine) {
-                                background: ${d.Colour["bg-hover-subtle"]};
-                            }
-                        }
-                    `:o.$disabled?o.$selected?e.css`
-                            border: none;
-                            background: ${d.Colour["bg-selected-disabled"]};
-                        `:e.css`
-                            border: none;
-                        `:o.$selected?e.css`
-                        border: none;
-                        background: ${d.Colour["bg-selected"]};
-
-                        &:has(${g}:hover) {
-                            @media (pointer: fine) {
-                                background: ${d.Colour["bg-selected-hover"]};
-
-                                & ${b} {
-                                    color: ${d.Colour["text-selected-hover"]};
-                                }
-
-                                & ${k} {
-                                    color: ${d.Colour["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:e.css`
-                    border: none;
-
-                    &:has(${g}:hover) {
-                        @media (pointer: fine) {
-                            background: ${d.Colour["bg-hover-subtle"]};
-                        }
-                    }
-                `:o.$error?o.$disabled?e.css`
-                            border-color: ${d.Colour["border-error"]};
-                        `:o.$selected?e.css`
-                            border-color: ${d.Colour["border-error"]};
-                            background: ${d.Colour["bg-error"]};
-
-                            &:has(${g}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${d.Colour["bg-error-hover"]};
-                                }
-                            }
-                        `:e.css`
-                        border-color: ${d.Colour["border-error"]};
-
-                        &:has(${g}:hover) {
-                            @media (pointer: fine) {
-                                background: ${d.Colour["bg-hover-subtle"]};
-                            }
-                        }
-                    `:o.$disabled?o.$selected?e.css`
-                            border-color: ${d.Colour["border-selected-disabled"]};
-                            background: ${d.Colour["bg-selected-disabled"]};
-                        `:e.css`
-                            border-color: ${d.Colour["border-disabled"]};
-                            background: ${d.Colour["bg-disabled"]};
-                        `:o.$selected?e.css`
-                        border-color: ${d.Colour["border-selected"]};
-                        background: ${d.Colour["bg-selected"]};
-
-                        &:has(${g}:hover) {
-                            @media (pointer: fine) {
-                                background: ${d.Colour["bg-selected-hover"]};
-
-                                & ${b} {
-                                    color: ${d.Colour["text-selected-hover"]};
-                                }
-
-                                & ${k} {
-                                    color: ${d.Colour["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:e.css`
-                    border-color: ${d.Colour.border};
-
-                    &:has(${g}:hover) {
-                        @media (pointer: fine) {
-                            background: ${d.Colour["bg-hover-subtle"]};
-                        }
-                    }
-                `}
-`,c=s.default.input`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: ${e=>e.$disabledVisual?"not-allowed":"pointer"};
-    top: 0;
-    left: 0;
-    opacity: 0;
-
-    /* Hide appearance but keep it focusable using keyboard interactions */
-    appearance: none;
-    background: transparent;
-    border: none;
-`,u=s.default.div`
-    display: flex;
-`,b=s.default.div`
-    display: flex;
-    flex-direction: column;
-    overflow-wrap: anywhere;
-    width: 100%;
-    overflow: hidden;
-
-    // apply header container text color
-    ${o=>o.$selected?o.$disabled?e.css`
-                    color: ${d.Colour["text-selected-disabled"]};
-                `:o.$error?e.css`
-                    color: ${d.Colour["text-error"]};
-                `:e.css`
-                color: ${d.Colour["text-selected"]};
-            `:o.$disabled?e.css`
-                color: ${d.Colour["text-disabled"]};
-            `:e.css`
-            color: ${d.Colour.text};
-        `}
-`,$=s.default.label`
-    ${e=>e.$selected?d.Font["body-baseline-semibold"]:d.Font["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"}};
-    ${d.MediaQuery.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"}};
-    }
-    ${d.MediaQuery.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"}};
-    }
-`,p=s.default.div`
-    ${d.Font["body-md-regular"]}
-    margin-top: 0.5rem;
-
-    z-index: 1; // forces sublabel to render above the input
-    pointer-events: none; // to allow click events to be passed to the input
-
-    strong,
-    b {
-        ${d.Font["body-md-semibold"]}
-    }
-`,g=s.default.div`
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-`,h=s.default.div`
-    display: flex;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    padding: ${e=>e.$addPadding?"0.6875rem 0rem 0.6875rem 1rem":"0.6875rem 1rem"};
-`,m=s.default.button`
-    color: ${e=>e.$disabled?d.Colour["text-disabled"]:d.Colour["text-error"]};
-    white-space: nowrap;
-    ${d.Font["body-md-semibold"]}
-    height: fit-content;
-    padding: 0.6875rem 1rem 0.6875rem 0.5rem;
-    border: none;
-    background: none;
-
-    cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-`,C=s.default.button`
-    color: ${e=>e.disabled?d.Colour["text-disabled"]:d.Colour["text-primary"]};
-    ${d.Font["body-baseline-semibold"]}
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    border: none;
-    background-color: ${d.Colour.bg};
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    padding: 0 1rem 0.6875rem 1rem;
-    padding-top: ${e=>e.$paddingTopRequired?"0.6875rem":"0rem"};
-    width: 100%;
-
-    svg {
-        width: 1em;
-        height: 1em;
-        margin-left: 0.5rem;
-    }
-`,x=s.default.div`
-    width: 100%;
-    color: ${e=>e.$disabled?d.Colour["text-disabled"]:d.Colour["text-error"]};
-    border: none;
-    background: ${d.Colour.bg};
-    cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-    padding: 0.6875rem 1rem 0.5rem 1rem;
-`,f=s.default(o.Alert)`
-    width: 100%;
-    user-select: none;
-`,v=s.default.div`
-    padding: 0 1rem;
-    padding-top: 0.6875rem;
-    padding-bottom: ${e=>e.$isFinalItem?"0.6875rem":"0.5rem"};
-    background-color: ${d.Colour.bg};
-    ${r.applyHtmlContentStyle({textSize:"body-md"})}
-
-    ${o=>o.$disabled?e.css`
-                color: ${d.Colour["text-disabled"]};
-            `:o.$selected?e.css`
-                color: ${d.Colour["text-selected"]};
-            `:e.css`
-            color: ${d.Colour.text};
-        `}
-`,y=s.default(i.Typography.BodyMD)`
-    color: ${e=>e.$disabled?d.Colour["text-disabled"]:d.Colour["text-error"]};
-`,w=s.default(l.TextList.Ul)`
-    color: ${e=>e.$disabled?d.Colour["text-disabled"]:d.Colour["text-error"]};
-`,k=s.default(t.ToggleIcon)`
-    ${o=>o.$selected?o.$disabled?e.css`
-                    color: ${d.Colour["icon-selected-disabled"]};
-                `:o.$error?e.css`
-                    color: ${d.Colour["icon-error-strong"]};
-                `:e.css`
-                color: ${d.Colour["icon-selected"]};
-            `:o.$disabled?e.css`
-                color: ${d.Colour["icon-disabled-subtle"]};
-            `:e.css`
-            color: ${d.Colour["icon-subtle"]};
-        `};
-`;exports.AlertContainer=f,exports.Children=v,exports.Container=a,exports.ErrorContainer=x,exports.ErrorList=w,exports.ErrorText=y,exports.ExpandButton=C,exports.HeaderContainer=g,exports.IndicatorLabelContainer=h,exports.Input=c,exports.InputContainer=u,exports.Label=$,exports.RemoveButton=m,exports.StyledToggleIcon=k,exports.SubLabel=p,exports.TextContainer=b;
+"use strict";require("./toggle.styles_11tmfsr.css");exports.alertContainer="a15al1qe",exports.bgDefault="b1l0nsei",exports.bgDisabled="bd5xote",exports.bgError="bfiow01",exports.bgSelected="b17z2k4k",exports.bgSelectedDisabled="b15nuck4",exports.borderDefault="b1fyul7s",exports.borderDisabled="b11szvws",exports.borderError="bybgacj",exports.borderNone="bvkjim3",exports.borderSelected="b1aku79x",exports.borderSelectedDisabled="b12ofp2c",exports.children="cz4bsiy",exports.childrenIsFinalItem="c1k186w3",exports.colorTextDefault="cnwn55u",exports.colorTextDisabled="c1l2ct9g",exports.colorTextError="c1qqpl3b",exports.colorTextPrimary="c1graj5g",exports.container="c14lgw6r",exports.containerNoIndicator="covnc4j",exports.containerUseContentWidth="cangfw6",exports.disabledColorCursor="d9t56r4",exports.errorContainer="eeqryui",exports.expandButton="e1y0x62l",exports.expandButtonPaddingTopRequired="e1gmwtb7",exports.headerContainer="h1tat3es",exports.indicatorLabelContainer="ijwzsce",exports.indicatorLabelContainerAddPadding="i1q8ywpe",exports.input="i17sf3sp",exports.inputContainer="i1l466bv",exports.label="lh3od2r",exports.removeButton="r1mf9nso",exports.subLabel="shwglic",exports.textContainer="t1nsq3eo",exports.toggleContainerHoverDefault="tv1hw4w",exports.toggleContainerHoverError="t1oixyvr",exports.toggleContainerHoverSelected="t1elmp69",exports.toggleLabelDefault="t1izng22",exports.toggleLabelSelected="t194isif",exports.toggleTextContainerDisabledSelected="txm5wyu",exports.toggleTextContainerSelected="t1cyflot",exports.tokens={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}};
 //# sourceMappingURL=toggle.styles.js.map

package/cjs/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    $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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"}
+{"version":3,"file":"toggle.styles.js","sources":["../../../src/toggle/toggle.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport * as toggleIconStyles from \"./toggle-icon.styles\";\n\nexport const tokens = {\n    label: {\n        desktopLineClamp: \"--fds-internal-toggle-label-desktopLineClamp\",\n        tabletLineClamp: \"--fds-internal-toggle-label-tabletLineClamp\",\n        mobileLineClamp: \"--fds-internal-toggle-label-mobileLineClamp\",\n    },\n} as const;\n\n// =============================================================================\n// BASIC STYLING\n// =============================================================================\n\nexport const borderDefault = css`\n    border: solid 1px ${Colour.border};\n`;\n\nexport const borderError = css`\n    border: solid 1px ${Colour[\"border-error\"]};\n`;\n\nexport const borderNone = css`\n    border: solid 1px transparent;\n`;\n\nexport const borderSelected = css`\n    border: solid 1px ${Colour[\"border-selected\"]};\n`;\n\nexport const borderDisabled = css`\n    border: solid 1px ${Colour[\"border-disabled\"]};\n`;\n\nexport const borderSelectedDisabled = css`\n    border: solid 1px ${Colour[\"border-selected-disabled\"]};\n`;\n\nexport const bgDefault = css`\n    background: ${Colour.bg};\n`;\n\nexport const bgSelected = css`\n    background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const bgError = css`\n    background: ${Colour[\"bg-error\"]};\n`;\n\nexport const bgDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const bgSelectedDisabled = css`\n    background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const colorTextDefault = css`\n    color: ${Colour.text};\n`;\n\nexport const colorTextPrimary = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const colorTextError = css`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const colorTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const headerContainer = css`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n`;\n\nexport const toggleTextContainerSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const toggleTextContainerDisabledSelected = css`\n    color: ${Colour[\"text-selected-disabled\"]};\n`;\n\nexport const container = css`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${Radius[\"sm\"]};\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n\n    &.${borderError}, &.${bgError} {\n        &:focus-within {\n            outline: 2px solid ${Colour[\"border-error-focus\"]};\n        }\n    }\n`;\n\nexport const containerNoIndicator = css`\n    justify-content: center;\n`;\n\nexport const containerUseContentWidth = css`\n    min-width: unset;\n`;\n\nexport const toggleContainerHoverError = css`\n    &:has(.${headerContainer}:hover) {\n        @media (pointer: fine) {\n            background: ${Colour[\"bg-error-hover\"]};\n        }\n    }\n`;\n\nexport const toggleContainerHoverSelected = css`\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            & .${toggleIconStyles.wrapperBase} {\n                color: ${Colour[\"icon-selected-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const toggleContainerHoverDefault = css`\n    &:has(.${headerContainer}:hover) {\n        @media (pointer: fine) {\n            background: ${Colour[\"bg-hover-subtle\"]};\n        }\n    }\n`;\n\nexport const input = css`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: 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 = css`\n    display: flex;\n`;\n\nexport const label = css`\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n\n    ${tokens.label.desktopLineClamp}: initial;\n    ${tokens.label.tabletLineClamp}: initial;\n    ${tokens.label.mobileLineClamp}: initial;\n\n    -webkit-line-clamp: var(${tokens.label.desktopLineClamp}, none);\n    ${MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: var(${tokens.label.tabletLineClamp}, none);\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: var(${tokens.label.mobileLineClamp}, none);\n    }\n`;\n\nexport const toggleLabelDefault = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const toggleLabelSelected = css`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const subLabel = css`\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 indicatorLabelContainer = css`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: 0.6875rem 1rem;\n`;\n\nexport const indicatorLabelContainerAddPadding = css`\n    padding: 0.6875rem 0rem 0.6875rem 1rem;\n`;\n\nexport const removeButton = css`\n    color: ${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    cursor: pointer;\n`;\n\nexport const disabledColorCursor = css`\n    color: ${Colour[\"text-disabled\"]};\n    cursor: not-allowed;\n`;\n\nexport const expandButton = css`\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: pointer;\n    padding: 0 1rem 0.6875rem 1rem;\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const expandButtonPaddingTopRequired = css`\n    padding-top: 0.6875rem;\n`;\n\nexport const errorContainer = css`\n    width: 100%;\n    border: none;\n    background: ${Colour.bg};\n    cursor: pointer;\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const children = css`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: 0.5rem;\n    background-color: ${Colour.bg};\n`;\n\nexport const childrenIsFinalItem = css`\n    padding-bottom: 0.6875rem;\n`;\n\nexport const alertContainer = css`\n    width: 100%;\n    user-select: none;\n`;\n"],"names":["label","desktopLineClamp","tabletLineClamp","mobileLineClamp"],"mappings":"iGAqS2B,6BA5PL,8BAYC,0BAJH,6BAJG,sCAYQ,iCAxCL,kCAgBC,+BAZH,6BAID,iCAII,0CAQQ,4BAqPd,sCAOW,oCApOH,oCAYC,kCAJH,oCAJE,6BAsCP,wCAqBW,2CAII,sCAuHL,iCA2BL,+BAtBF,kDAkBkB,mCA7Lf,2CA+IQ,oDAQU,yBApE5B,kCAeS,yBAIT,+BAqDO,4BAzBJ,gCA5HK,+CAqEc,4CAxBF,gDAQG,sCA+DV,uCAIC,uDA5GgB,8CAJR,0BA1FlB,CAClBA,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB"}

package/cjs/toggle/toggle.styles_11tmfsr.css

@@ -0,0 +1,41 @@
+@layer fds{.b1fyul7s{border:solid 1px var(--fds-colour-border);}
+.bybgacj{border:solid 1px var(--fds-colour-border-error);}
+.bvkjim3{border:solid 1px transparent;}
+.b1aku79x{border:solid 1px var(--fds-colour-border-selected);}
+.b11szvws{border:solid 1px var(--fds-colour-border-disabled);}
+.b12ofp2c{border:solid 1px var(--fds-colour-border-selected-disabled);}
+.b1l0nsei{background:var(--fds-colour-bg);}
+.b17z2k4k{background:var(--fds-colour-bg-selected);}
+.bfiow01{background:var(--fds-colour-bg-error);}
+.bd5xote{background:var(--fds-colour-bg-disabled);}
+.b15nuck4{background:var(--fds-colour-bg-selected-disabled);}
+.cnwn55u{color:var(--fds-colour-text);}
+.c1graj5g{color:var(--fds-colour-text-primary);}
+.c1qqpl3b{color:var(--fds-colour-text-error);}
+.c1l2ct9g{color:var(--fds-colour-text-disabled);}
+.h1tat3es{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
+.t1nsq3eo{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:anywhere;width:100%;overflow:hidden;}
+.t1cyflot{color:var(--fds-colour-text-selected);}
+.txm5wyu{color:var(--fds-colour-text-selected-disabled);}
+.c14lgw6r{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:10.375rem;border-radius:var(--fds-radius-sm);overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;}.c14lgw6r:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}.c14lgw6r.bybgacj:focus-within,.c14lgw6r.bfiow01:focus-within{outline:2px solid var(--fds-colour-border-error-focus);}
+.covnc4j{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.cangfw6{min-width:unset;}
+@media (pointer: fine){.t1oixyvr:has(.h1tat3es:hover){background:var(--fds-colour-bg-error-hover);}}
+@media (pointer: fine){.t1elmp69:has(.h1tat3es:hover){background:var(--fds-colour-bg-selected-hover);}.t1elmp69:has(.h1tat3es:hover) .t1nsq3eo{color:var(--fds-colour-text-selected-hover);}.t1elmp69:has(.h1tat3es:hover) .wxufi5f{color:var(--fds-colour-icon-selected-hover);}}
+@media (pointer: fine){.tv1hw4w:has(.h1tat3es:hover){background:var(--fds-colour-bg-hover-subtle);}}
+.i17sf3sp{position:absolute;height:100%;width:100%;cursor:pointer;top:0;left:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
+.i1l466bv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.lh3od2r{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;overflow-wrap:break-word;--fds-internal-toggle-label-desktopLineClamp:initial;--fds-internal-toggle-label-tabletLineClamp:initial;--fds-internal-toggle-label-mobileLineClamp:initial;-webkit-line-clamp:var(--fds-internal-toggle-label-desktopLineClamp, none);}:where(body.fds-breakpoint-lg-max) .lh3od2r{-webkit-line-clamp:var(--fds-internal-toggle-label-tabletLineClamp, none);}:where(body.fds-breakpoint-sm-max) .lh3od2r{-webkit-line-clamp:var(--fds-internal-toggle-label-mobileLineClamp, none);}
+.t1izng22{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);}
+.t194isif{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-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.shwglic{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);margin-top:0.5rem;z-index:1;pointer-events:none;}.shwglic strong,.shwglic b{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-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.ijwzsce{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;position:relative;padding:0.6875rem 1rem;}
+.i1q8ywpe{padding:0.6875rem 0rem 0.6875rem 1rem;}
+.r1mf9nso{color:var(--fds-colour-text-error);white-space:nowrap;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-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.6875rem 1rem 0.6875rem 0.5rem;border:none;background:none;cursor:pointer;}
+.d9t56r4{color:var(--fds-colour-text-disabled);cursor:not-allowed;}
+.e1y0x62l{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-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;border:none;background-color:var(--fds-colour-bg);cursor:pointer;padding:0 1rem 0.6875rem 1rem;width:100%;}.e1y0x62l svg{width:1em;height:1em;margin-left:0.5rem;}
+.e1gmwtb7{padding-top:0.6875rem;}
+.eeqryui{width:100%;border:none;background:var(--fds-colour-bg);cursor:pointer;padding:0.6875rem 1rem 0.5rem 1rem;}
+.cz4bsiy{padding:0 1rem;padding-top:0.6875rem;padding-bottom:0.5rem;background-color:var(--fds-colour-bg);}
+.c1k186w3{padding-bottom:0.6875rem;}
+.a15al1qe{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}}

package/cjs/typography/index.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("./typography.js");Object.defineProperty(exports,"Typography",{enumerable:!0,get:function(){return e.Typography}});
+"use strict";var i=require("./typography.js");const n={HeadingXXL:i.HeadingXXL,HeadingXL:i.HeadingXL,HeadingLG:i.HeadingLG,HeadingMD:i.HeadingMD,HeadingSM:i.HeadingSM,HeadingXS:i.HeadingXS,BodyBL:i.BodyBL,BodyMD:i.BodyMD,BodySM:i.BodySM,BodyXS:i.BodyXS,LinkBL:i.LinkBL,LinkMD:i.LinkMD,LinkSM:i.LinkSM,LinkXS:i.LinkXS};exports.Typography=n;
 //# sourceMappingURL=index.js.map

package/cjs/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../../src/typography/index.ts"],"sourcesContent":["import {\n    BodyBL,\n    BodyMD,\n    BodySM,\n    BodyXS,\n    HeadingLG,\n    HeadingMD,\n    HeadingSM,\n    HeadingXL,\n    HeadingXS,\n    HeadingXXL,\n    LinkBL,\n    LinkMD,\n    LinkSM,\n    LinkXS,\n} from \"./typography\";\n\n// @catalog\n/**\n * A collection of pre-styled text components covering headings, body copy, and\n * hyperlinks.\n *\n * Use `Typography` sub-components to render consistently sized and weighted\n * text.\n *\n * Sub-components:\n * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.\n * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.\n * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .\n *\n * @remarks All text variants accept an `as` prop to\n * override the rendered element for semantic flexibility.\n * @keywords text, type scale\n */\nexport const Typography = {\n    /** Renders the largest heading (`h1`). */\n    HeadingXXL,\n    /** Renders an extra-large heading (`h2`). */\n    HeadingXL,\n    /** Renders a large heading (`h3`). */\n    HeadingLG,\n    /** Renders a medium heading (`h4`). */\n    HeadingMD,\n    /** Renders a small heading (`h5`). */\n    HeadingSM,\n    /** Renders the smallest heading (`h6`). */\n    HeadingXS,\n    /** Renders baseline body text (`p`). */\n    BodyBL,\n    /** Renders medium body text (`p`). */\n    BodyMD,\n    /** Renders small body text (`p`). */\n    BodySM,\n    /** Renders extra-small body text (`p`). */\n    BodyXS,\n    /** Renders a baseline-size hyperlink (`a`). */\n    LinkBL,\n    /** Renders a medium-size hyperlink (`a`). */\n    LinkMD,\n    /** Renders a small-size hyperlink (`a`). */\n    LinkSM,\n    /** Renders an extra-small hyperlink (`a`). */\n    LinkXS,\n};\n\nexport * from \"./types\";\n"],"names":["Typography","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","BodyBL","BodyMD","BodySM","BodyXS","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"8CAkCO,MAAMA,EAAa,YAEtBC,EAAAA,qBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,oBAEAC,EAAAA,iBAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA,cAEAC,EAAAA"}

package/cjs/typography/typography-text.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./typography-text.styles_1734x2k.css");exports.typographySize={"heading-xxl":"hfl3ekz","heading-xl":"h1wbj2xe","heading-lg":"h1ml8c05","heading-md":"h12i879k","heading-sm":"h12v6vm5","heading-xs":"hzwk9ye","body-baseline":"bg0vyh3","body-md":"b1h8qozz","body-sm":"b1n2zaqp","body-xs":"b14pmtsp"},exports.typographyWeight={light:"lqvxzn1",regular:"r1kcu5nk",semibold:"s1pdcykv",bold:"b1rin8wh"};
+//# sourceMappingURL=typography-text.styles.js.map

package/cjs/typography/typography-text.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-text.styles.js","sources":["../../../src/typography/typography-text.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Font } from \"../theme\";\nimport { createFontSizeStyles, createFontWeightStyles } from \"./helper\";\nimport type { TypographySize, TypographyWeight } from \"./types\";\n\nconst typographySizeSpec: Record<\n    TypographySize,\n    { size: string; lineHeight: string; letterSpacing: string }\n> = {\n    \"heading-xxl\": {\n        size: Font.Spec[\"heading-size-xxl\"],\n        lineHeight: Font.Spec[\"heading-lh-xxl\"],\n        letterSpacing: Font.Spec[\"heading-ls-xxl\"],\n    },\n    \"heading-xl\": {\n        size: Font.Spec[\"heading-size-xl\"],\n        lineHeight: Font.Spec[\"heading-lh-xl\"],\n        letterSpacing: Font.Spec[\"heading-ls-xl\"],\n    },\n    \"heading-lg\": {\n        size: Font.Spec[\"heading-size-lg\"],\n        lineHeight: Font.Spec[\"heading-lh-lg\"],\n        letterSpacing: Font.Spec[\"heading-ls-lg\"],\n    },\n    \"heading-md\": {\n        size: Font.Spec[\"heading-size-md\"],\n        lineHeight: Font.Spec[\"heading-lh-md\"],\n        letterSpacing: Font.Spec[\"heading-ls-md\"],\n    },\n    \"heading-sm\": {\n        size: Font.Spec[\"heading-size-sm\"],\n        lineHeight: Font.Spec[\"heading-lh-sm\"],\n        letterSpacing: Font.Spec[\"heading-ls-sm\"],\n    },\n    \"heading-xs\": {\n        size: Font.Spec[\"heading-size-xs\"],\n        lineHeight: Font.Spec[\"heading-lh-xs\"],\n        letterSpacing: Font.Spec[\"heading-ls-xs\"],\n    },\n    \"body-baseline\": {\n        size: Font.Spec[\"body-size-baseline\"],\n        lineHeight: Font.Spec[\"body-lh-baseline\"],\n        letterSpacing: Font.Spec[\"body-ls-baseline\"],\n    },\n    \"body-md\": {\n        size: Font.Spec[\"body-size-md\"],\n        lineHeight: Font.Spec[\"body-lh-md\"],\n        letterSpacing: Font.Spec[\"body-ls-md\"],\n    },\n    \"body-sm\": {\n        size: Font.Spec[\"body-size-sm\"],\n        lineHeight: Font.Spec[\"body-lh-sm\"],\n        letterSpacing: Font.Spec[\"body-ls-sm\"],\n    },\n    \"body-xs\": {\n        size: Font.Spec[\"body-size-xs\"],\n        lineHeight: Font.Spec[\"body-lh-xs\"],\n        letterSpacing: Font.Spec[\"body-ls-xs\"],\n    },\n};\n\nexport const typographySize: Record<TypographySize, string> = {\n    \"heading-xxl\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-xxl\"])}\n    `,\n    \"heading-xl\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-xl\"])}\n    `,\n    \"heading-lg\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-lg\"])}\n    `,\n    \"heading-md\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-md\"])}\n    `,\n    \"heading-sm\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-sm\"])}\n    `,\n    \"heading-xs\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-xs\"])}\n    `,\n    \"body-baseline\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"body-baseline\"])}\n    `,\n    \"body-md\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"body-md\"])}\n    `,\n    \"body-sm\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"body-sm\"])}\n    `,\n    \"body-xs\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"body-xs\"])}\n    `,\n};\n\nexport const typographyWeight: Record<TypographyWeight, string> = {\n    light: css`\n        ${createFontWeightStyles(Font.Spec[\"weight-light\"])}\n    `,\n    regular: css`\n        ${createFontWeightStyles(Font.Spec[\"weight-regular\"])}\n    `,\n    semibold: css`\n        ${createFontWeightStyles(Font.Spec[\"weight-semibold\"])}\n    `,\n    bold: css`\n        ${createFontWeightStyles(Font.Spec[\"weight-bold\"])}\n    `,\n};\n"],"names":["light","regular","semibold","bold"],"mappings":"8GA8D8D,CAC1D,cAAa,UAGb,aAAY,WAGZ,aAAY,WAGZ,aAAY,WAGZ,aAAY,WAGZ,aAAY,UAGZ,gBAAe,UAGf,UAAS,WAGT,UAAS,WAGT,UAAS,qCAKqD,CAC9DA,MAAK,UAGLC,QAAO,WAGPC,SAAQ,WAGRC,KAAI"}

package/cjs/typography/typography-text.styles_1734x2k.css

@@ -0,0 +1,14 @@
+@layer fds{.hfl3ekz{font-size:var(--fds-font-heading-size-xxl);line-height:var(--fds-font-heading-lh-xxl);letter-spacing:var(--fds-font-heading-ls-xxl);}
+.h1wbj2xe{font-size:var(--fds-font-heading-size-xl);line-height:var(--fds-font-heading-lh-xl);letter-spacing:var(--fds-font-heading-ls-xl);}
+.h1ml8c05{font-size:var(--fds-font-heading-size-lg);line-height:var(--fds-font-heading-lh-lg);letter-spacing:var(--fds-font-heading-ls-lg);}
+.h12i879k{font-size:var(--fds-font-heading-size-md);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}
+.h12v6vm5{font-size:var(--fds-font-heading-size-sm);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
+.hzwk9ye{font-size:var(--fds-font-heading-size-xs);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.bg0vyh3{font-size:var(--fds-font-body-size-baseline);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.b1h8qozz{font-size:var(--fds-font-body-size-md);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.b1n2zaqp{font-size:var(--fds-font-body-size-sm);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.b14pmtsp{font-size:var(--fds-font-body-size-xs);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.lqvxzn1{font-weight:var(--fds-font-weight-light);}
+.r1kcu5nk{font-weight:var(--fds-font-weight-regular);}
+.s1pdcykv{font-weight:var(--fds-font-weight-semibold);}
+.b1rin8wh{font-weight:var(--fds-font-weight-bold);}}

package/cjs/typography/typography.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),a=require("react/jsx-runtime"),n=require("react"),i=require("./typography.styles.js");function r(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=r(n);exports.Typography=void 0,function(n){const r=(n,r,d)=>{const s=(t,d)=>{var{weight:s,inline:y,paragraph:g,maxLines:o}=t,p=e.__rest(t,["weight","inline","paragraph","maxLines"]);return a.jsx(i.TypographyBase,Object.assign({ref:d,as:y?"span":n,$textStyle:r,$weight:s,$inline:y,$paragraph:g,$maxLines:o},p))};return s.displayName=`Typography.${d}`,t.default.forwardRef(s)};n.HeadingXXL=r("h1","heading-xxl","HeadingXXL"),n.HeadingXL=r("h2","heading-xl","HeadingXL"),n.HeadingLG=r("h3","heading-lg","HeadingLG"),n.HeadingMD=r("h4","heading-md","HeadingMD"),n.HeadingSM=r("h5","heading-sm","HeadingSM"),n.HeadingXS=r("h6","heading-xs","HeadingXS");const d=(n,r)=>{const d=(r,t)=>{var{weight:d,inline:s,paragraph:y,maxLines:g}=r,o=e.__rest(r,["weight","inline","paragraph","maxLines"]);return a.jsx(i.TypographyBase,Object.assign({ref:t,as:s?"span":"p",$textStyle:n,$weight:d,$inline:s,$paragraph:y,$maxLines:g},o))};return d.displayName=`Typography.${r}`,t.default.forwardRef(d)};n.BodyBL=d("body-baseline","BodyBL"),n.BodyMD=d("body-md","BodyMD"),n.BodySM=d("body-sm","BodySM"),n.BodyXS=d("body-xs","BodyXS");const s=(n,r)=>{const d=(r,t)=>{var{weight:d,children:s,external:y,underlineStyle:g="underline"}=r,o=e.__rest(r,["weight","children","external","underlineStyle"]);return a.jsxs(i.HyperlinkBase,Object.assign({ref:t,$textStyle:n,$weight:d,$underlineStyle:g},o,{children:[s,y&&a.jsx(i.StyledExternalIcon,{})]}))};return d.displayName=`Typography.${r}`,t.default.forwardRef(d)};n.LinkBL=s("body-baseline","LinkBL"),n.LinkMD=s("body-md","LinkMD"),n.LinkSM=s("body-sm","LinkSM"),n.LinkXS=s("body-xs","LinkXS")}(exports.Typography||(exports.Typography={}));
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),a=require("@lifesg/react-icons/external"),s=require("clsx"),i=require("react");require("../theme/theme-provider/index.js"),require("../theme/theme-provider/context.js"),require("../theme/tokens/border.js"),require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var t=require("../theme/utils/use-apply-styles.js");require("../theme/utils/use-media-query.js"),require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var n=require("../util/merge-refs.js");require("../util/simple-id-generator.js"),require("../util/string-helper.js"),require("@react-aria/live-announcer");var o=require("./typography.styles.js"),l=require("./typography-text.styles.js");function d(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var p=d(s),u=d(i);const y=e=>e||"regular",h=e=>l.typographySize[e],g=e=>l.typographyWeight[e],x=(e,r)=>r?o.paragraph:e?o.displayInline:o.displayBlock,c=(a,s,i,l)=>{const d=u.default.forwardRef((function(i,d){var{className:c,as:m,inline:j,maxLines:q,paragraph:f,weight:L}=i,B=e.__rest(i,["className","as","inline","maxLines","paragraph","weight"]);const S=y(L),b=u.default.useRef(null),k=n.mergeRefs(b,d),H=((e,r,a)=>!!e&&(a||!r))(q,j,f);t.useApplyStyle(b,{[o.tokens.typographyBase.maxLines]:H?q:null});const M=j?"span":m||a;return r.jsx(M,Object.assign({ref:k,className:p.default(o.typographyBase,l?o.typographyHeader:o.typographyBody,h(s),g(S),x(j,f),H&&o.lineClamp,c)},B))}));return d.displayName=`Typography.${i}`,d},m=(e,r,a)=>c(e,r,a,!0),j=m("h1","heading-xxl","HeadingXXL"),q=m("h2","heading-xl","HeadingXL"),f=m("h3","heading-lg","HeadingLG"),L=m("h4","heading-md","HeadingMD"),B=m("h5","heading-sm","HeadingSM"),S=m("h6","heading-xs","HeadingXS"),b=(e,r)=>c("p",e,r,!1),k=b("body-baseline","BodyBL"),H=b("body-md","BodyMD"),M=b("body-sm","BodySM"),X=b("body-xs","BodyXS"),v=(s,i)=>{const t=u.default.forwardRef((function(i,t){var{weight:n,children:l,external:d,underlineStyle:u="underline",className:x}=i,c=e.__rest(i,["weight","children","external","underlineStyle","className"]);const m=y(n);return r.jsxs("a",Object.assign({ref:t,className:p.default(o.typographyBase,o.typographyBody,o.hyperlinkBase,h(s),g(m),"none"===u?o.noUnderline:o.underline,x)},c,{children:[l,d&&r.jsx(a.ExternalIcon,{className:o.externalIcon})]}))}));return t.displayName=`Typography.${i}`,t},N=v("body-baseline","LinkBL"),w=v("body-md","LinkMD"),D=v("body-sm","LinkSM"),_=v("body-xs","LinkXS");exports.BodyBL=k,exports.BodyMD=H,exports.BodySM=M,exports.BodyXS=X,exports.HeadingLG=f,exports.HeadingMD=L,exports.HeadingSM=B,exports.HeadingXL=q,exports.HeadingXS=S,exports.HeadingXXL=j,exports.LinkBL=N,exports.LinkMD=w,exports.LinkSM=D,exports.LinkXS=_;
 //# sourceMappingURL=typography.js.map