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

package/cjs/toggle/toggle-icon.styles.js

@@ -0,0 +1,2 @@
+"use strict";require("./toggle-icon.styles_ba71y.css");exports.wrapperActive="w1tlwg9n",exports.wrapperActiveDisabled="w1d4lch6",exports.wrapperBase="wxufi5f",exports.wrapperDisabled="wo9gzbp";
+//# sourceMappingURL=toggle-icon.styles.js.map

package/cjs/toggle/toggle-icon.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toggle-icon.styles.js","sources":["../../../src/toggle/toggle-icon.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const wrapperBase = css`\n    height: 1.625rem;\n    width: 1.625rem;\n    margin-right: 0.5rem;\n    flex-shrink: 0;\n    color: ${Colour[\"icon-subtle\"]};\n\n    svg {\n        height: 100%;\n        width: 100%;\n    }\n`;\n\nexport const wrapperDisabled = css`\n    color: ${Colour[\"icon-disabled-subtle\"]};\n`;\n\nexport const wrapperActive = css`\n    color: ${Colour[\"icon-selected\"]};\n`;\n\nexport const wrapperActiveDisabled = css`\n    color: ${Colour[\"icon-selected-disabled\"]};\n`;\n"],"names":[],"mappings":"mGAwB0B,yCAIQ,+BArBV,kCAaI"}

package/cjs/toggle/toggle-icon.styles_ba71y.css

@@ -0,0 +1,4 @@
+.wxufi5f{height:1.625rem;width:1.625rem;margin-right:0.5rem;-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;color:var(--fds-colour-icon-subtle);}.wxufi5f svg{height:100%;width:100%;}
+.wo9gzbp{color:var(--fds-colour-icon-disabled-subtle);}
+.w1tlwg9n{color:var(--fds-colour-icon-selected);}
+.w1d4lch6{color:var(--fds-colour-icon-selected-disabled);}

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"),n=require("react");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var s=require("../util/simple-id-generator.js");require("../util/string-helper.js");var a=require("./toggle.styles.js");exports.Toggle=d=>{var{type:l="checkbox",indicator:o,checked:c,styleType:u="default",children:h,childrenMaxLines:b,subLabel:p,disabled:x,error:$,name:j,id:g,className:m,compositeSection:y,removable:v,onRemove:C,"data-testid":k,onChange:f,useContentWidth:q,"aria-describedby":S}=d,T=e.__rest(d,["type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","onRemove","data-testid","onChange","useContentWidth","aria-describedby"]);const{collapsible:w=!0,errors:E,children:I,initialExpanded:L}=y||{},[A,R]=n.useState(c),[N,_]=n.useState(!!L),B=n.useMemo((()=>{const e=Array.isArray(E)&&(null==E?void 0:E.length)>0,r=!Array.isArray(E)&&!!E;return e||r}),[E]),[F]=n.useState(s.SimpleIdGenerator.generate()),M=g?`${g}`:`tg-${F}`,W=n.useRef(null);n.useEffect((()=>{R(c)}),[c]),n.useEffect((()=>{A&&_(null==L||L)}),[A]);const P=e=>{if(!x){if(f)return void f(e);switch(l){case"checkbox":R((e=>!e));break;case"radio":case"yes":case"no":A||R(!0)}}},D=()=>{x||_(!N)},G=()=>{x||!C||C()},H=()=>{var e;null===(e=null==W?void 0:W.current)||void 0===e||e.click()},O=e=>{e.stopPropagation()},U=()=>{let e;switch(l){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=l}return r.jsx(a.StyledToggleIcon,{type:e,active:A,disabled:x,$selected:A,$disabled:x})},z=()=>{if(!p)return null;let e;return e="function"==typeof p?p():p,r.jsx(a.SubLabel,{"data-id":"toggle-sublabel",id:`${M}-sublabel`,"aria-hidden":!0,children:e})},J=()=>{const e=!N&&!B;return w&&r.jsxs(a.ExpandButton,{$paddingTopRequired:e,disabled:x,onClick:D,"data-testid":N?"collapse-button":"expand-button",children:[N?"Show less":"Show more",N?r.jsx(t.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(i.ChevronDownIcon,{"aria-hidden":!0})]})},K=e=>r.jsxs(r.Fragment,{children:[r.jsx(a.ErrorText,{weight:"semibold",$disabled:x,children:"Error"}),r.jsx(a.ErrorList,{$disabled:x,children:null==e?void 0:e.map(((e,i)=>r.jsx("li",{id:`${M}-error-list-item-${i}`,children:r.jsx(a.ErrorText,{weight:"semibold",$disabled:x,children:e})},i)))})]});return r.jsxs(a.Container,{$selected:A,$disabled:x,className:m,$styleType:u,$error:$,$indicator:o,$useContentWidth:q,id:g,"data-testid":k,children:[(()=>{const e=["string"==typeof p?`${M}-sublabel`:null,S].filter(Boolean).join(" ")||void 0;return r.jsxs(a.HeaderContainer,{id:`${M}-header-container`,$disabled:x,$error:$,$selected:A,$indicator:o,$styleType:u,children:[r.jsx(a.IndicatorLabelContainer,{$addPadding:v,children:r.jsxs(a.InputContainer,{id:`${M}-input-container`,onClick:H,children:[r.jsx(a.Input,Object.assign({ref:W,name:j,id:`${M}-input`,type:"checkbox"===l?"checkbox":"radio","data-testid":"toggle-input",disabled:x,onChange:P,onClick:O,checked:A,"aria-describedby":e},T)),o&&U(),r.jsxs(a.TextContainer,{$selected:A,$disabled:x,children:[r.jsx(a.Label,{htmlFor:`${M}-input`,"data-testid":"toggle-label",id:`${M}-label`,$maxLines:b,$selected:A,children:h}),p&&z()]})]})}),v&&r.jsx(a.RemoveButton,{type:"button",$disabled:x,onClick:G,id:`${M}-remove-button`,children:"Remove"})]})})(),I&&r.jsxs("div",{children:[(!w||N)&&r.jsx(a.Children,{"data-id":"toggle-composite-children",$isFinalItem:!w,$disabled:x,children:I}),w&&!N&&B&&r.jsx(a.ErrorContainer,{$disabled:x,onClick:D,id:`${M}-error-alert`,children:r.jsx(a.AlertContainer,{type:x?"description":"error",className:m,showIcon:!0,children:Array.isArray(E)?K(E):E})}),J()]})]})};
+"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"),n=require("../markup/markup.js"),s=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"),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 g(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var m=g(i);exports.Toggle=i=>{var{type:g="checkbox",indicator:p,checked:x,styleType:j="default",children:v,childrenMaxLines:C,subLabel:f,disabled:y,error:k,name:q,id:N,className:D,compositeSection:T,removable:S,focusableWhenDisabled:$,useContentWidth:L,onRemove:B,onChange:E,"data-testid":I,"aria-describedby":w}=i,A=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:W,initialExpanded:_}=T||{},[F,P]=a.useState(x),[H,U]=a.useState(!!_),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=N?`${N}`:`tg-${O}`,J=a.useRef(null),K=a.useRef(null);d.useApplyStyle(K,{[b.tokens.label.desktopLineClamp]:null==(null==C?void 0:C.desktop)?null:`${C.desktop}`,[b.tokens.label.tabletLineClamp]:null==(null==C?void 0:C.tablet)?null:`${C.tablet}`,[b.tokens.label.mobileLineClamp]:null==(null==C?void 0:C.mobile)?null:`${C.mobile}`});const Q=!!y&&!!$,V=!!y&&!$,X=!!y;a.useEffect((()=>{P(x)}),[x]),a.useEffect((()=>{F&&U(null==_||_)}),[F]);const Y=e=>{if(X)e.preventDefault();else if(E)E(e);else switch(g){case"checkbox":P((e=>!e));break;case"radio":case"yes":case"no":F||P(!0)}},Z=()=>{y||U(!H)},ee=()=>{y||!B||B()},re=()=>{var e;null===(e=null==J?void 0:J.current)||void 0===e||e.click()},te=e=>{e.stopPropagation()},le=()=>{let e;switch(g){case"yes":e="tick";break;case"no":e="cross";break;case"checkbox":case"radio":e=g}return r.jsx(h.ToggleIcon,{type:e,active:F,disabled:y})},ie=()=>{if(!f)return null;let e;return e="function"==typeof f?f():f,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.jsxs("button",{className:m.default(b.expandButton,y&&b.disabledColorCursor,e&&b.expandButtonPaddingTopRequired),disabled:y,onClick:Z,"data-testid":H?"collapse-button":"expand-button",children:[H?"Show less":"Show more",H?r.jsx(l.ChevronUpIcon,{"aria-hidden":!0}):r.jsx(t.ChevronDownIcon,{"aria-hidden":!0})]})},oe=e=>r.jsxs(r.Fragment,{children:[r.jsx(c.Typography.BodyMD,{weight:"semibold",className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:"Error"}),r.jsx(s.TextList.Ul,{className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:null==e?void 0:e.map(((e,t)=>r.jsx("li",{id:`${G}-error-list-item-${t}`,children:r.jsx(c.Typography.BodyMD,{weight:"semibold",className:m.default(b.colorTextError,y&&b.colorTextDisabled),children:e})},t)))})]});return r.jsxs("div",{className:m.default(b.container,"no-border"===j?k?m.default(b.colorBorderError,!y&&b.toggleContainerError):y?F?b.toggleContainerNoBorderDisabledSelected:b.toggleContainerNoBorderDisabled:F?b.toggleContainerNoBorderSelected:b.toggleContainerNoBorder:k?y?b.colorBorderError:b.toggleContainerError:y?F?b.toggleContainerDisabledSelected:b.toggleContainerDisabled:F?b.toggleContainerSelected:b.toggleContainer,(()=>{if(!y)return!k&&F?b.toggleContainerHoverSelected:b.toggleContainerHoverDefault})(),!p&&b.noIndicatorContainer,L&&b.useContentWidthContainer,D),id:N,"data-testid":I,children:[(()=>{const e=["string"==typeof f?`${G}-sublabel`:null,w].filter(Boolean).join(" ")||void 0;return r.jsxs("div",{id:`${G}-header-container`,className:b.headerContainer,children:[r.jsx("div",{className:m.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"===g?"checkbox":"radio","data-testid":"toggle-input",className:m.default(b.input,y&&b.toggleInputDisabled),disabled:V,"aria-disabled":Q,onChange:Y,onClick:te,checked:F,tabIndex:Q?0:void 0,"aria-describedby":e},A)),p&&le(),r.jsxs("div",{className:m.default(b.textContainer,y?F?b.toggleTextContainerDisabledSelected:b.colorTextDisabled:F?b.toggleTextContainerSelected:void 0),children:[r.jsx("label",{ref:K,htmlFor:`${G}-input`,"data-testid":"toggle-label",id:`${G}-label`,className:m.default(b.label,F?b.toggleLabelSelected:b.toggleLabelDefault),children:v}),f&&ie()]})]})}),S&&r.jsx("button",{type:"button",className:m.default(b.removeButton,y&&b.disabledColorCursor),onClick:ee,id:`${G}-remove-button`,children:"Remove"})]})})(),W&&r.jsxs("div",{children:[(!M||H)&&r.jsx("div",{"data-id":"toggle-composite-children",className:m.default(b.children,!M&&b.childrenIsFinalItem,y&&b.colorTextDisabled),children:r.jsx(n.Markup,{baseTextSize:"body-md",children:W})}),M&&!H&&z&&r.jsx("div",{className:m.default(b.errorContainer,y&&b.disabledColorCursor),onClick:Z,id:`${G}-error-alert`,children:r.jsx(o.Alert,{type:y?"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\";\n\nimport type { ToggleIconType } from \"../shared/toggle-icon/toggle-icon\";\nimport { SimpleIdGenerator } 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 type { 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    onRemove,\n    \"data-testid\": testId,\n    onChange,\n    useContentWidth,\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] = useState(SimpleIdGenerator.generate());\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\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 (!disabled) {\n            if (onChange) {\n                onChange(event);\n                return;\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                    {\n                        if (!selected) {\n                            setSelected(true);\n                        }\n                    }\n                    break;\n            }\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    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <StyledToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n                $selected={selected}\n                $disabled={disabled}\n            />\n        );\n    };\n    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        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={disabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <TextContainer\n                            $selected={selected}\n                            $disabled={disabled}\n                        >\n                            <Label\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                $maxLines={childrenMaxLines}\n                                $selected={selected}\n                            >\n                                {children}\n                            </Label>\n                            {subLabel && renderSubLabel()}\n                        </TextContainer>\n                    </InputContainer>\n                </IndicatorLabelContainer>\n\n                {removable && (\n                    <RemoveButton\n                        type=\"button\"\n                        $disabled={disabled}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </RemoveButton>\n                )}\n            </HeaderContainer>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <ErrorText weight=\"semibold\" $disabled={disabled}>\n                    Error\n                </ErrorText>\n                <ErrorList $disabled={disabled}>\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <ErrorText\n                                    weight=\"semibold\"\n                                    $disabled={disabled}\n                                >\n                                    {item}\n                                </ErrorText>\n                            </li>\n                        );\n                    })}\n                </ErrorList>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <ErrorContainer\n                    $disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <AlertContainer\n                        type={disabled ? \"description\" : \"error\"}\n                        className={className}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </AlertContainer>\n                </ErrorContainer>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <Container\n            $selected={selected}\n            $disabled={disabled}\n            className={className}\n            $styleType={styleType}\n            $error={error}\n            $indicator={indicator}\n            $useContentWidth={useContentWidth}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </Container>\n    );\n};\n"],"names":["_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","onRemove","testId","onChange","useContentWidth","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","SimpleIdGenerator","generate","generatedId","inputRef","useRef","useEffect","handleOnChange","event","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","StyledToggleIcon","active","$selected","$disabled","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","$error","IndicatorLabelContainer","$addPadding","InputContainer","Input","Object","assign","ref","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\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    }, [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 getContainerStateClass = () => {\n        if (styleType === \"no-border\") {\n            if (error) {\n                return clsx(\n                    styles.colorBorderError,\n                    !disabled && styles.toggleContainerError\n                );\n            }\n\n            if (disabled) {\n                return selected\n                    ? styles.toggleContainerNoBorderDisabledSelected\n                    : styles.toggleContainerNoBorderDisabled;\n            }\n\n            if (selected) {\n                return styles.toggleContainerNoBorderSelected;\n            }\n\n            return styles.toggleContainerNoBorder;\n        }\n\n        if (error) {\n            return disabled\n                ? styles.colorBorderError\n                : styles.toggleContainerError;\n        }\n\n        if (disabled) {\n            return selected\n                ? styles.toggleContainerDisabledSelected\n                : styles.toggleContainerDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleContainerSelected;\n        }\n\n        return styles.toggleContainer;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) {\n            return undefined;\n        }\n\n        if (!error && selected) {\n            return styles.toggleContainerHoverSelected;\n        }\n\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerStateClass = () => {\n        if (disabled) {\n            return selected\n                ? styles.toggleTextContainerDisabledSelected\n                : styles.colorTextDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleTextContainerSelected;\n        }\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            />\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 && styles.colorTextDisabled\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 && styles.disabledColorCursor,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\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                </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.toggleInputDisabled\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                                getTextContainerStateClass()\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        return (\n            <>\n                <Typography.BodyMD\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\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={clsx(\n                                        styles.colorTextError,\n                                        disabled && styles.colorTextDisabled\n                                    )}\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 && styles.disabledColorCursor\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                getContainerStateClass(),\n                getContainerHoverClass(),\n                !indicator && styles.noIndicatorContainer,\n                useContentWidth && styles.useContentWidthContainer,\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","_jsxs","clsx","styles.expandButton","styles.disabledColorCursor","styles.expandButtonPaddingTopRequired","onClick","ChevronUpIcon","ChevronDownIcon","renderErrorList","_Fragment","Typography","BodyMD","weight","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon"],"mappings":"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"}

package/cjs/toggle/toggle.styles.js

@@ -1,243 +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"),d=require("../text-list/index.js"),l=require("../typography/index.js"),i=require("../v3_theme/index.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: ${i.V3_Radius.sm};
-    border-width: 1px;
-    border-style: solid;
-    overflow: hidden;
-    flex-direction: column;
-    height: fit-content;
-    background: ${i.V3_Colour.bg};
-
-    &:has(input:focus-visible) {
-        outline: 2px solid ${i.V3_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: ${i.V3_Colour["border-error"]};
-                        `:e.css`
-                            border-color: ${i.V3_Colour["border-error"]};
-
-                            &:has(${g}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${i.V3_Colour["bg-hover-subtle"]};
-                                }
-                            }
-                        `:o.$disabled?o.$selected?e.css`
-                            border: none;
-                            background: ${i.V3_Colour["bg-selected-disabled"]};
-                        `:e.css`
-                            border: none;
-                        `:o.$selected?e.css`
-                        border: none;
-                        background: ${i.V3_Colour["bg-selected"]};
-
-                        &:has(${g}:hover) {
-                            @media (pointer: fine) {
-                                background: ${i.V3_Colour["bg-selected-hover"]};
-
-                                & ${b} {
-                                    color: ${i.V3_Colour["text-selected-hover"]};
-                                }
-
-                                & ${y} {
-                                    color: ${i.V3_Colour["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:e.css`
-                    border: none;
-
-                    &:has(${g}:hover) {
-                        @media (pointer: fine) {
-                            background: ${i.V3_Colour["bg-hover-subtle"]};
-                        }
-                    }
-                `:o.$error?o.$disabled?e.css`
-                            border-color: ${i.V3_Colour["border-error"]};
-                        `:e.css`
-                            border-color: ${i.V3_Colour["border-error"]};
-
-                            &:has(${g}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${i.V3_Colour["bg-hover-subtle"]};
-                                }
-                            }
-                        `:o.$disabled?o.$selected?e.css`
-                            border-color: ${i.V3_Colour["border-selected-disabled"]};
-                            background: ${i.V3_Colour["bg-selected-disabled"]};
-                        `:e.css`
-                            border-color: ${i.V3_Colour["border-disabled"]};
-                            background: ${i.V3_Colour["bg-disabled"]};
-                        `:o.$selected?e.css`
-                        border-color: ${i.V3_Colour["border-selected"]};
-                        background: ${i.V3_Colour["bg-selected"]};
-
-                        &:has(${g}:hover) {
-                            @media (pointer: fine) {
-                                background: ${i.V3_Colour["bg-selected-hover"]};
-
-                                & ${b} {
-                                    color: ${i.V3_Colour["text-selected-hover"]};
-                                }
-
-                                & ${y} {
-                                    color: ${i.V3_Colour["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:e.css`
-                    border-color: ${i.V3_Colour.border};
-
-                    &:has(${g}:hover) {
-                        @media (pointer: fine) {
-                            background: ${i.V3_Colour["bg-hover-subtle"]};
-                        }
-                    }
-                `}
-`,c=s.default.input`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    top: 0;
-    left: 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.$disabled?o.$selected?e.css`
-                    color: ${i.V3_Colour["text-selected-disabled"]};
-                `:e.css`
-                    color: ${i.V3_Colour["text-disabled"]};
-                `:o.$selected?e.css`
-                color: ${i.V3_Colour["text-selected"]};
-            `:e.css`
-            color: ${i.V3_Colour.text};
-        `}
-`,$=s.default.label`
-    ${e=>e.$selected?i.V3_Font["body-baseline-semibold"]:i.V3_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"}};
-    ${i.V3_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"}};
-    }
-    ${i.V3_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`
-    ${i.V3_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 {
-        ${i.V3_Font["body-md-semibold"]}
-    }
-`,g=s.default.div`
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-`,m=s.default.div`
-    display: flex;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    padding: ${e=>e.$addPadding?"0.6875rem 0rem 0.6875rem 1rem":"0.6875rem 1rem"};
-`,x=s.default.button`
-    color: ${e=>e.$disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-error"]};
-    white-space: nowrap;
-    ${i.V3_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"};
-`,h=s.default.button`
-    color: ${e=>e.disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-primary"]};
-    ${i.V3_Font["body-baseline-semibold"]}
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    border: none;
-    background-color: ${i.V3_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;
-    }
-`,C=s.default.div`
-    width: 100%;
-    color: ${e=>e.$disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-error"]};
-    border: none;
-    background: ${i.V3_Colour.bg};
-    cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-    padding: 0.6875rem 1rem 0.5rem 1rem;
-`,_=s.default(o.Alert)`
-    width: 100%;
-    user-select: none;
-`,f=s.default.div`
-    padding: 0 1rem;
-    padding-top: 0.6875rem;
-    padding-bottom: ${e=>e.$isFinalItem?"0.6875rem":"0.5rem"};
-    background-color: ${i.V3_Colour.bg};
-    ${r.applyHtmlContentStyle({textSize:"body-md"})}
-
-    ${o=>o.$disabled?e.css`
-                color: ${i.V3_Colour["text-disabled"]};
-            `:o.$selected?e.css`
-                color: ${i.V3_Colour["text-selected"]};
-            `:e.css`
-                color: ${i.V3_Colour.text};
-            `}
-`,V=s.default(l.Typography.BodyMD)`
-    color: ${e=>e.$disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-error"]};
-`,v=s.default(d.TextList.Ul)`
-    color: ${e=>e.$disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-error"]};
-`,y=s.default(t.ToggleIcon)`
-    ${o=>o.$disabled?o.$selected?e.css`
-                    color: ${i.V3_Colour["icon-selected-disabled"]};
-                `:e.css`
-                    color: ${i.V3_Colour["icon-disabled-subtle"]};
-                `:o.$selected?e.css`
-                color: ${i.V3_Colour["icon-selected"]};
-            `:e.css`
-            color: ${i.V3_Colour["icon-subtle"]};
-        `};
-`;exports.AlertContainer=_,exports.Children=f,exports.Container=a,exports.ErrorContainer=C,exports.ErrorList=v,exports.ErrorText=V,exports.ExpandButton=h,exports.HeaderContainer=g,exports.IndicatorLabelContainer=m,exports.Input=c,exports.InputContainer=u,exports.Label=$,exports.RemoveButton=x,exports.StyledToggleIcon=y,exports.SubLabel=p,exports.TextContainer=b;
+"use strict";require("./toggle.styles_1yzqsu.css");exports.alertContainer="aeqryui",exports.children="c1mf9nso",exports.childrenIsFinalItem="c9t56r4",exports.colorBorderError="c17z2k4k",exports.colorTextDisabled="c1y0x62l",exports.colorTextError="c1gmwtb7",exports.container="c11szvws",exports.disabledColorCursor="d194isif",exports.errorContainer="e1q8ywpe",exports.expandButton="ehwglic",exports.expandButtonPaddingTopRequired="ejwzsce",exports.headerContainer="h1fyul7s",exports.indicatorLabelContainer="i1l466bv",exports.indicatorLabelContainerAddPadding="ih3od2r",exports.input="i14lgw6r",exports.inputContainer="iangfw6",exports.label="l1oixyvr",exports.noIndicatorContainer="n12ofp2c",exports.removeButton="r1izng22",exports.subLabel="s17sf3sp",exports.textContainer="tybgacj",exports.toggleContainer="t1cyflot",exports.toggleContainerDisabled="t1l2ct9g",exports.toggleContainerDisabledSelected="t1qqpl3b",exports.toggleContainerError="t1graj5g",exports.toggleContainerHoverDefault="txm5wyu",exports.toggleContainerHoverSelected="t1nsq3eo",exports.toggleContainerNoBorder="tnwn55u",exports.toggleContainerNoBorderDisabled="td5xote",exports.toggleContainerNoBorderDisabledSelected="tfiow01",exports.toggleContainerNoBorderSelected="t15nuck4",exports.toggleContainerSelected="t1tat3es",exports.toggleInputDisabled="tovnc4j",exports.toggleLabelDefault="t1elmp69",exports.toggleLabelSelected="tv1hw4w",exports.toggleTextContainerDisabledSelected="t1aku79x",exports.toggleTextContainerSelected="tvkjim3",exports.tokens={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}},exports.useContentWidthContainer="u1l0nsei";
 //# 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\";\n\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 { Typography } from \"../typography\";\nimport { V3_Colour, V3_Font, V3_MediaQuery, V3_Radius } from \"../v3_theme\";\nimport type { ToggleStyleType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected?: boolean;\n    $disabled?: boolean;\n    $indicator?: boolean;\n}\n\ninterface ContainerStyleProps extends StyleProps {\n    $styleType?: ToggleStyleType;\n    $error?: boolean;\n    $useContentWidth?: boolean;\n}\n\ninterface IndicatorLabelContainerStyleProps {\n    $addPadding?: boolean;\n}\n\ninterface LabelStyleProps {\n    $maxLines?: { desktop?: number; mobile?: number; tablet?: number };\n}\n\ninterface ExpandButtonStyleProps extends StyleProps {\n    $paddingTopRequired?: boolean;\n}\n\ninterface ChildrenStyleProps extends StyleProps {\n    $isFinalItem?: boolean;\n}\n\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: ${V3_Radius[\"sm\"]};\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${V3_Colour.bg};\n\n    &:has(input:focus-visible) {\n        outline: 2px solid ${V3_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: ${V3_Colour[\"border-error\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${V3_Colour[\"border-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${V3_Colour[\"bg-hover-subtle\"]};\n                                }\n                            }\n                        `;\n                    }\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border: none;\n                            background: ${V3_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: ${V3_Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${V3_Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${V3_Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${V3_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: ${V3_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: ${V3_Colour[\"border-error\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${V3_Colour[\"border-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${V3_Colour[\"bg-hover-subtle\"]};\n                                }\n                            }\n                        `;\n                    }\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${V3_Colour[\n                                \"border-selected-disabled\"\n                            ]};\n                            background: ${V3_Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${V3_Colour[\"border-disabled\"]};\n                            background: ${V3_Colour[\"bg-disabled\"]};\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border-color: ${V3_Colour[\"border-selected\"]};\n                        background: ${V3_Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${V3_Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${V3_Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${V3_Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border-color: ${V3_Colour.border};\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${V3_Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n        }\n    }}\n`;\n\nexport const Input = styled.input`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    top: 0;\n    left: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\nexport const InputContainer = styled.div`\n    display: flex;\n`;\n\nexport const TextContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n\n    // apply header container text color\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$selected) {\n                return css`\n                    color: ${V3_Colour[\"text-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${V3_Colour[\"text-disabled\"]};\n                `;\n            }\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${V3_Colour[\"text-selected\"]};\n            `;\n        }\n\n        return css`\n            color: ${V3_Colour.text};\n        `;\n    }}\n`;\n\nexport const Label = styled.label<LabelStyleProps & { $selected?: boolean }>`\n    ${(props) =>\n        props.$selected\n            ? V3_Font[\"body-baseline-semibold\"]\n            : V3_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    ${V3_MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? \"none\"};\n    }\n    ${V3_MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? \"none\"};\n    }\n`;\n\nexport const SubLabel = styled.div`\n    ${V3_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        ${V3_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 ? V3_Colour[\"text-disabled\"] : V3_Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${V3_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\n            ? V3_Colour[\"text-disabled\"]\n            : V3_Colour[\"text-primary\"]};\n    ${V3_Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${V3_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 ? V3_Colour[\"text-disabled\"] : V3_Colour[\"text-error\"]};\n    border: none;\n    background: ${V3_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: ${V3_Colour.bg};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"text-disabled\"]};\n            `;\n        } else if (props.$selected) {\n            return css`\n                color: ${V3_Colour[\"text-selected\"]};\n            `;\n        } else {\n            return css`\n                color: ${V3_Colour.text};\n            `;\n        }\n    }}\n`;\n\nexport const ErrorText = styled(Typography.BodyMD)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? V3_Colour[\"text-disabled\"] : V3_Colour[\"text-error\"]};\n`;\n\nexport const ErrorList = styled(TextList.Ul)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? V3_Colour[\"text-disabled\"] : V3_Colour[\"text-error\"]};\n`;\n\nexport const StyledToggleIcon = styled(ToggleIcon)<StyleProps>`\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$selected) {\n                return css`\n                    color: ${V3_Colour[\"icon-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${V3_Colour[\"icon-disabled-subtle\"]};\n                `;\n            }\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${V3_Colour[\"icon-selected\"]};\n            `;\n        }\n        return css`\n            color: ${V3_Colour[\"icon-subtle\"]};\n        `;\n    }};\n`;\n"],"names":["Container","styled","div","V3_Radius","V3_Colour","bg","props","$indicator","css","$useContentWidth","$styleType","$error","$disabled","HeaderContainer","$selected","TextContainer","StyledToggleIcon","border","Input","input","disabled","InputContainer","text","Label","label","V3_Font","_a","_b","$maxLines","desktop","V3_MediaQuery","MaxWidth","lg","tablet","sm","mobile","SubLabel","IndicatorLabelContainer","$addPadding","RemoveButton","button","ExpandButton","$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// 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    color: ${Colour.text};\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    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${Colour.bg};\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n\nexport const noIndicatorContainer = css`\n    justify-content: center;\n`;\n\nexport const useContentWidthContainer = css`\n    min-width: unset;\n`;\n\nexport const colorBorderError = css`\n    border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerNoBorderDisabledSelected = css`\n    border: none;\n    background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerNoBorderDisabled = css`\n    border: none;\n`;\n\nexport const toggleContainerNoBorderSelected = css`\n    border: none;\n    background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerNoBorder = css`\n    border: none;\n`;\n\nexport const toggleContainerError = css`\n    border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerDisabledSelected = css`\n    border-color: ${Colour[\"border-selected-disabled\"]};\n    background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerDisabled = css`\n    border-color: ${Colour[\"border-disabled\"]};\n    background: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const toggleContainerSelected = css`\n    border-color: ${Colour[\"border-selected\"]};\n    background: ${Colour[\"bg-selected\"]};\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 toggleContainer = css`\n    border-color: ${Colour.border};\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 toggleInputDisabled = css`\n    cursor: not-allowed;\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    color: ${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: 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    color: ${Colour[\"text-error\"]};\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    color: ${Colour.text};\n`;\n\nexport const childrenIsFinalItem = css`\n    padding-bottom: 0.6875rem;\n`;\n\nexport const colorTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const colorTextError = css`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const alertContainer = css`\n    width: 100%;\n    user-select: none;\n`;\n"],"names":["label","desktopLineClamp","tabletLineClamp","mobileLineClamp"],"mappings":"gGAuR2B,2BApBN,uCAQW,mCAzMH,qCA6MC,kCAIH,6BA3OL,uCAsLU,kCA4BL,gCAvBF,iDAmBkB,kCArOf,2CAsLQ,qDAQU,wBAxE5B,kCAmBS,wBAIT,wCApGe,gCAyJR,4BAzBJ,iCAnKK,kCAoGE,2CA1BQ,mDALQ,wCAJX,+CAuCO,+CApBC,2CAvBL,kDATQ,0DALQ,kDASR,2CAuBR,uCAgDJ,qCA4BD,uCAIC,sDAlJgB,+CAJR,yBA3BlB,CAClBA,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB,iFAqDY"}

package/cjs/toggle/toggle.styles_1yzqsu.css

@@ -0,0 +1,38 @@
+.h1fyul7s{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;}
+.tybgacj{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;color:var(--fds-colour-text);}
+.tvkjim3{color:var(--fds-colour-text-selected);}
+.t1aku79x{color:var(--fds-colour-text-selected-disabled);}
+.c11szvws{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);border-width:1px;border-style:solid;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:var(--fds-colour-bg);}.c11szvws:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+.n12ofp2c{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.u1l0nsei{min-width:unset;}
+.c17z2k4k{border-color:var(--fds-colour-border-error);}
+.tfiow01{border:none;background:var(--fds-colour-bg-selected-disabled);}
+.td5xote{border:none;}
+.t15nuck4{border:none;background:var(--fds-colour-bg-selected);}
+.tnwn55u{border:none;}
+.t1graj5g{border-color:var(--fds-colour-border-error);}
+.t1qqpl3b{border-color:var(--fds-colour-border-selected-disabled);background:var(--fds-colour-bg-selected-disabled);}
+.t1l2ct9g{border-color:var(--fds-colour-border-disabled);background:var(--fds-colour-bg-disabled);}
+.t1tat3es{border-color:var(--fds-colour-border-selected);background:var(--fds-colour-bg-selected);}
+@media (pointer: fine){.t1nsq3eo:has(.h1fyul7s:hover){background:var(--fds-colour-bg-selected-hover);}.t1nsq3eo:has(.h1fyul7s:hover) .tybgacj{color:var(--fds-colour-text-selected-hover);}.t1nsq3eo:has(.h1fyul7s:hover) .wxufi5f{color:var(--fds-colour-icon-selected-hover);}}
+.t1cyflot{border-color:var(--fds-colour-border);}
+@media (pointer: fine){.txm5wyu:has(.h1fyul7s:hover){background:var(--fds-colour-bg-hover-subtle);}}
+.i14lgw6r{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;}
+.tovnc4j{cursor:not-allowed;}
+.iangfw6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.l1oixyvr{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) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-tabletLineClamp, none);}:where(body.fds-breakpoint-sm-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-mobileLineClamp, none);}
+.t1elmp69{font-family:var(--fds-font-family);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);}
+.tv1hw4w{font-family:var(--fds-font-family);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);}
+.s17sf3sp{font-family:var(--fds-font-family);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;}.s17sf3sp strong,.s17sf3sp b{font-family:var(--fds-font-family);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);}
+.i1l466bv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;position:relative;padding:0.6875rem 1rem;}
+.ih3od2r{padding:0.6875rem 0rem 0.6875rem 1rem;}
+.r1izng22{color:var(--fds-colour-text-error);white-space:nowrap;font-family:var(--fds-font-family);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;}
+.d194isif{color:var(--fds-colour-text-disabled);cursor:not-allowed;}
+.ehwglic{color:var(--fds-colour-text-primary);font-family:var(--fds-font-family);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%;}.ehwglic svg{width:1em;height:1em;margin-left:0.5rem;}
+.ejwzsce{padding-top:0.6875rem;}
+.e1q8ywpe{width:100%;color:var(--fds-colour-text-error);border:none;background:var(--fds-colour-bg);cursor:pointer;padding:0.6875rem 1rem 0.5rem 1rem;}
+.c1mf9nso{padding:0 1rem;padding-top:0.6875rem;padding-bottom:0.5rem;background-color:var(--fds-colour-bg);color:var(--fds-colour-text);}
+.c9t56r4{padding-bottom:0.6875rem;}
+.c1y0x62l{color:var(--fds-colour-text-disabled);}
+.c1gmwtb7{color:var(--fds-colour-text-error);}
+.aeqryui{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

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