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

package/toggle/toggle.styles.js

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

package/toggle/toggle.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.styles.js","sources":["../../src/toggle/toggle.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Alert } from \"../alert\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { ToggleIcon } from \"../shared/toggle-icon/toggle-icon\";\nimport { TextList } from \"../text-list\";\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { ToggleStyleType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $error?: boolean;\n    $selected?: boolean;\n    $disabled?: boolean;\n    $indicator?: boolean;\n}\n\ninterface ContainerStyleProps extends StyleProps {\n    $styleType?: ToggleStyleType;\n    $error?: boolean;\n    $useContentWidth?: boolean;\n}\n\ninterface IndicatorLabelContainerStyleProps {\n    $addPadding?: boolean;\n}\n\ninterface LabelStyleProps {\n    $maxLines?: { desktop?: number; mobile?: number; tablet?: number };\n}\n\ninterface ExpandButtonStyleProps extends StyleProps {\n    $paddingTopRequired?: boolean;\n}\n\ninterface ChildrenStyleProps extends StyleProps {\n    $isFinalItem?: boolean;\n}\n\ninterface InteractiveStyleProps {\n    $disabledVisual?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<ContainerStyleProps>`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${Radius[\"sm\"]};\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${Colour.bg};\n\n    &:has(input:focus-visible) {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n\n    ${(props) => {\n        if (!props.$indicator) {\n            return css`\n                justify-content: center;\n            `;\n        }\n    }}\n\n    // Container min width to fit content\n    ${(props) => {\n        if (props.$useContentWidth) {\n            return css`\n                min-width: unset;\n            `;\n        }\n    }}\n\n    // apply container border and header background color\n    ${(props) => {\n        switch (props.$styleType) {\n            case \"no-border\": {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    }\n\n                    if (props.$selected) {\n                        return css`\n                            border-color: transparent;\n                            background: ${Colour[\"bg-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-error-hover\"]};\n                                }\n                            }\n                        `;\n                    }\n\n                    return css`\n                        border-color: ${Colour[\"border-error\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-hover-subtle\"]};\n                            }\n                        }\n                    `;\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border: none;\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border: none;\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border: none;\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border: none;\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n\n            default: {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                        `;\n                    }\n\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${Colour[\"border-error\"]};\n                            background: ${Colour[\"bg-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${Colour[\"bg-error-hover\"]};\n                                }\n                            }\n                        `;\n                    }\n\n                    return css`\n                        border-color: ${Colour[\"border-error\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-hover-subtle\"]};\n                            }\n                        }\n                    `;\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${Colour[\"border-selected-disabled\"]};\n                            background: ${Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${Colour[\"border-disabled\"]};\n                            background: ${Colour[\"bg-disabled\"]};\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border-color: ${Colour[\"border-selected\"]};\n                        background: ${Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border-color: ${Colour.border};\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n        }\n    }}\n`;\n\nexport const Input = styled.input<InteractiveStyleProps>`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.$disabledVisual ? \"not-allowed\" : \"pointer\")};\n    top: 0;\n    left: 0;\n    opacity: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const InputContainer = styled.div`\n    display: flex;\n`;\n\nexport const TextContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n\n    // apply header container text color\n    ${(props) => {\n        if (props.$selected) {\n            if (props.$disabled) {\n                return css`\n                    color: ${Colour[\"text-selected-disabled\"]};\n                `;\n            }\n\n            if (props.$error) {\n                return css`\n                    color: ${Colour[\"text-error\"]};\n                `;\n            }\n\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        }\n\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n\n        return css`\n            color: ${Colour.text};\n        `;\n    }}\n`;\n\nexport const Label = styled.label<LabelStyleProps & { $selected?: boolean }>`\n    ${(props) =>\n        props.$selected\n            ? Font[\"body-baseline-semibold\"]\n            : Font[\"body-baseline-regular\"]};\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n    -webkit-line-clamp: ${(props) => props.$maxLines?.desktop ?? \"none\"};\n    ${MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? \"none\"};\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? \"none\"};\n    }\n`;\n\nexport const SubLabel = styled.div`\n    ${Font[\"body-md-regular\"]}\n    margin-top: 0.5rem;\n\n    z-index: 1; // forces sublabel to render above the input\n    pointer-events: none; // to allow click events to be passed to the input\n\n    strong,\n    b {\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const HeaderContainer = styled.div<ContainerStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const IndicatorLabelContainer = styled.div<IndicatorLabelContainerStyleProps>`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: ${(props) =>\n        props.$addPadding ? \"0.6875rem 0rem 0.6875rem 1rem\" : \"0.6875rem 1rem\"};\n`;\n\nexport const RemoveButton = styled.button<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${Font[\"body-md-semibold\"]}\n    height: fit-content;\n    padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n    border: none;\n    background: none;\n\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n`;\n\nexport const ExpandButton = styled.button<ExpandButtonStyleProps>`\n    color: ${(props) =>\n        props.disabled ? Colour[\"text-disabled\"] : Colour[\"text-primary\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${Colour.bg};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0 1rem 0.6875rem 1rem;\n    padding-top: ${(props) =>\n        props.$paddingTopRequired ? \"0.6875rem\" : \"0rem\"};\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const ErrorContainer = styled.div<StyleProps>`\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n    border: none;\n    background: ${Colour.bg};\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const AlertContainer = styled(Alert)`\n    width: 100%;\n    user-select: none;\n`;\n\nexport const Children = styled.div<ChildrenStyleProps>`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: ${(props) => (props.$isFinalItem ? \"0.6875rem\" : \"0.5rem\")};\n    background-color: ${Colour.bg};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${Colour[\"text-disabled\"]};\n            `;\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${Colour[\"text-selected\"]};\n            `;\n        }\n\n        return css`\n            color: ${Colour.text};\n        `;\n    }}\n`;\n\nexport const ErrorText = styled(Typography.BodyMD)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const ErrorList = styled(TextList.Ul)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? Colour[\"text-disabled\"] : Colour[\"text-error\"]};\n`;\n\nexport const StyledToggleIcon = styled(ToggleIcon)<StyleProps>`\n    ${(props) => {\n        if (props.$selected) {\n            if (props.$disabled)\n                return css`\n                    color: ${Colour[\"icon-selected-disabled\"]};\n                `;\n\n            if (props.$error)\n                return css`\n                    color: ${Colour[\"icon-error-strong\"]};\n                `;\n\n            return css`\n                color: ${Colour[\"icon-selected\"]};\n            `;\n        }\n\n        if (props.$disabled)\n            return css`\n                color: ${Colour[\"icon-disabled-subtle\"]};\n            `;\n\n        return css`\n            color: ${Colour[\"icon-subtle\"]};\n        `;\n    }};\n`;\n"],"names":["Container","styled","div","Radius","Colour","bg","props","$indicator","css","$useContentWidth","$styleType","$error","$disabled","$selected","HeaderContainer","TextContainer","StyledToggleIcon","border","Input","input","$disabledVisual","InputContainer","text","Label","label","Font","_a","_b","$maxLines","desktop","MediaQuery","MaxWidth","lg","tablet","sm","mobile","SubLabel","IndicatorLabelContainer","$addPadding","RemoveButton","button","ExpandButton","disabled","$paddingTopRequired","ErrorContainer","AlertContainer","Alert","Children","$isFinalItem","applyHtmlContentStyle","textSize","ErrorText","Typography","BodyMD","ErrorList","TextList","Ul","ToggleIcon"],"mappings":"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"}
+{"version":3,"file":"toggle.styles.js","sources":["../../src/toggle/toggle.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport * as toggleIconStyles from \"./toggle-icon.styles\";\n\nexport const tokens = {\n    label: {\n        desktopLineClamp: \"--fds-internal-toggle-label-desktopLineClamp\",\n        tabletLineClamp: \"--fds-internal-toggle-label-tabletLineClamp\",\n        mobileLineClamp: \"--fds-internal-toggle-label-mobileLineClamp\",\n    },\n} as const;\n\n// =============================================================================\n// BASIC STYLING\n// =============================================================================\n\nexport const borderDefault = css`\n    border: solid 1px ${Colour.border};\n`;\n\nexport const borderError = css`\n    border: solid 1px ${Colour[\"border-error\"]};\n`;\n\nexport const borderNone = css`\n    border: solid 1px transparent;\n`;\n\nexport const borderSelected = css`\n    border: solid 1px ${Colour[\"border-selected\"]};\n`;\n\nexport const borderDisabled = css`\n    border: solid 1px ${Colour[\"border-disabled\"]};\n`;\n\nexport const borderSelectedDisabled = css`\n    border: solid 1px ${Colour[\"border-selected-disabled\"]};\n`;\n\nexport const bgDefault = css`\n    background: ${Colour.bg};\n`;\n\nexport const bgSelected = css`\n    background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const bgError = css`\n    background: ${Colour[\"bg-error\"]};\n`;\n\nexport const bgDisabled = css`\n    background: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const bgSelectedDisabled = css`\n    background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const colorTextDefault = css`\n    color: ${Colour.text};\n`;\n\nexport const colorTextPrimary = css`\n    color: ${Colour[\"text-primary\"]};\n`;\n\nexport const colorTextError = css`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const colorTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const headerContainer = css`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n`;\n\nexport const toggleTextContainerSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const toggleTextContainerDisabledSelected = css`\n    color: ${Colour[\"text-selected-disabled\"]};\n`;\n\nexport const container = css`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${Radius[\"sm\"]};\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n\n    &.${borderError}, &.${bgError} {\n        &:focus-within {\n            outline: 2px solid ${Colour[\"border-error-focus\"]};\n        }\n    }\n`;\n\nexport const containerNoIndicator = css`\n    justify-content: center;\n`;\n\nexport const containerUseContentWidth = css`\n    min-width: unset;\n`;\n\nexport const toggleContainerHoverError = css`\n    &:has(.${headerContainer}:hover) {\n        @media (pointer: fine) {\n            background: ${Colour[\"bg-error-hover\"]};\n        }\n    }\n`;\n\nexport const toggleContainerHoverSelected = css`\n    &:has(.${headerContainer}:hover) {\n        @media (pointer: fine) {\n            background: ${Colour[\"bg-selected-hover\"]};\n\n            & .${textContainer} {\n                color: ${Colour[\"text-selected-hover\"]};\n            }\n\n            & .${toggleIconStyles.wrapperBase} {\n                color: ${Colour[\"icon-selected-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const toggleContainerHoverDefault = css`\n    &:has(.${headerContainer}:hover) {\n        @media (pointer: fine) {\n            background: ${Colour[\"bg-hover-subtle\"]};\n        }\n    }\n`;\n\nexport const input = css`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    opacity: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const inputContainer = css`\n    display: flex;\n`;\n\nexport const label = css`\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n\n    ${tokens.label.desktopLineClamp}: initial;\n    ${tokens.label.tabletLineClamp}: initial;\n    ${tokens.label.mobileLineClamp}: initial;\n\n    -webkit-line-clamp: var(${tokens.label.desktopLineClamp}, none);\n    ${MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: var(${tokens.label.tabletLineClamp}, none);\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: var(${tokens.label.mobileLineClamp}, none);\n    }\n`;\n\nexport const toggleLabelDefault = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const toggleLabelSelected = css`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const subLabel = css`\n    ${Font[\"body-md-regular\"]}\n    margin-top: 0.5rem;\n\n    z-index: 1; // forces sublabel to render above the input\n    pointer-events: none; // to allow click events to be passed to the input\n\n    strong,\n    b {\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const indicatorLabelContainer = css`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: 0.6875rem 1rem;\n`;\n\nexport const indicatorLabelContainerAddPadding = css`\n    padding: 0.6875rem 0rem 0.6875rem 1rem;\n`;\n\nexport const removeButton = css`\n    color: ${Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${Font[\"body-md-semibold\"]}\n    height: fit-content;\n    padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n    border: none;\n    background: none;\n    cursor: pointer;\n`;\n\nexport const disabledColorCursor = css`\n    color: ${Colour[\"text-disabled\"]};\n    cursor: not-allowed;\n`;\n\nexport const expandButton = css`\n    ${Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${Colour.bg};\n    cursor: pointer;\n    padding: 0 1rem 0.6875rem 1rem;\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const expandButtonPaddingTopRequired = css`\n    padding-top: 0.6875rem;\n`;\n\nexport const errorContainer = css`\n    width: 100%;\n    border: none;\n    background: ${Colour.bg};\n    cursor: pointer;\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const children = css`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: 0.5rem;\n    background-color: ${Colour.bg};\n`;\n\nexport const childrenIsFinalItem = css`\n    padding-bottom: 0.6875rem;\n`;\n\nexport const alertContainer = css`\n    width: 100%;\n    user-select: none;\n`;\n"],"names":["tokens","label","desktopLineClamp","tabletLineClamp","mobileLineClamp","borderDefault","borderError","borderNone","borderSelected","borderDisabled","borderSelectedDisabled","bgDefault","bgSelected","bgError","bgDisabled","bgSelectedDisabled","colorTextDefault","colorTextPrimary","colorTextError","colorTextDisabled","headerContainer","textContainer","toggleTextContainerSelected","toggleTextContainerDisabledSelected","container","containerNoIndicator","containerUseContentWidth","toggleContainerHoverError","toggleContainerHoverSelected","toggleContainerHoverDefault","input","inputContainer","toggleLabelDefault","toggleLabelSelected","subLabel","indicatorLabelContainer","indicatorLabelContainerAddPadding","removeButton","disabledColorCursor","expandButton","expandButtonPaddingTopRequired","errorContainer","children","childrenIsFinalItem","alertContainer"],"mappings":"0DAKO,MAAMA,EAAS,CAClBC,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB,gDAQZC,EAAa,WAIbC,EAAW,UAIXC,EAAU,UAIVC,EAAc,WAIdC,EAAc,WAIdC,EAAsB,WAItBC,EAAS,WAITC,EAAU,WAIVC,EAAO,UAIPC,EAAU,UAIVC,EAAkB,WAIlBC,EAAgB,UAIhBC,EAAgB,WAIhBC,EAAc,WAIdC,EAAiB,WAQjBC,EAAe,WAMfC,EAAa,WAQbC,EAA2B,WAI3BC,EAAmC,UAInCC,EAAS,WAqBTC,EAAoB,UAIpBC,EAAwB,UAIxBC,EAAyB,WAQzBC,EAA4B,WAgB5BC,EAA2B,UAQ3BC,EAAK,WAeLC,EAAc,WAId9B,EAAK,UAoBL+B,EAAkB,WAIlBC,EAAmB,WAInBC,EAAQ,UAaRC,EAAuB,UAQvBC,EAAiC,WAIjCC,EAAY,WAWZC,EAAmB,UAKnBC,EAAY,WAkBZC,EAA8B,WAI9BC,EAAc,UAQdC,EAAQ,UAORC,EAAmB,WAInBC,EAAc"}

package/toggle/toggle.styles_11tmfsr.css

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

package/toggle/types.d.ts

@@ -1,53 +1,131 @@
+/**
+ * Controls selection behavior and the indicator icon rendered inside the
+ * toggle.
+ *
+ * - `"checkbox"` allows the user to deselect.
+ * - `"radio"`, `"yes"`, and `"no"` only allow selection; once selected,
+ *   they cannot be deselected.
+ */
 export type ToggleType = "checkbox" | "radio" | "yes" | "no";
+/**
+ * Visual border style applied to the toggle container.
+ *
+ * - `"default"` renders the container with a visible border.
+ * - `"no-border"` renders without a border.
+ */
 export type ToggleStyleType = "default" | "no-border";
+/**
+ * Props for the `Toggle` selection control.
+ */
 export interface ToggleProps extends React.AriaAttributes, React.DOMAttributes<HTMLInputElement> {
     /**
-     * The type of toggle. Values: "checkbox" | "radio" | "yes" | "no"
+     * Determines selection behavior and the indicator icon style.
      *
-     * "checkbox" - allows deselection
-     *
-     * "radio", "yes", "no" - does not allow deselection. However they
-     * will determine the indicator to be displayed
+     * @default "checkbox"
      */
     type?: ToggleType | undefined;
-    /** Specifies if the indicator icon should be displayed */
+    /**
+     * Whether to render the selection indicator icon inside the toggle.
+     *
+     * The icon shape depends on `type`:
+     * - `"checkbox"` renders a tick box.
+     * - `"radio"` renders a filled circle.
+     * - `"yes"` renders a tick.
+     * - `"no"` renders a cross.
+     */
     indicator?: boolean | undefined;
-    /** Indicates if the element is checked */
+    /**
+     * Controlled checked state of the toggle.
+     */
     checked?: boolean | undefined;
-    /** The style type of the Toggle. Values: "default" | "no-border" */
+    /**
+     * Visual presentation of the toggle container.
+     *
+     * @default "default"
+     */
     styleType?: ToggleStyleType | undefined;
-    /** The Toggle label */
+    /** Label content for the toggle. */
     children: React.ReactNode;
-    /** The number of lines visible. Additional lines will be truncated */
+    /**
+     * Maximum number of visible label lines at each breakpoint.
+     *
+     * Lines beyond the limit are truncated with an ellipsis. Omit a
+     * breakpoint key to leave that viewport unconstrained.
+     */
     childrenMaxLines?: {
         mobile?: number | undefined;
         desktop?: number | undefined;
         tablet?: number | undefined;
     } | undefined;
+    /**
+     * Secondary content rendered below the main label.
+     */
     subLabel?: (() => JSX.Element) | JSX.Element | string | undefined;
     disabled?: boolean | undefined;
-    /** Specifies if the error display should be present */
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     className?: string | undefined;
     name?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when the toggle selection state changes.
+     *
+     * When provided, the caller is responsible for reflecting
+     * the new value back via `checked`.
+     */
     onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
-    /** The Toggle subsection */
+    /**
+     * Optional collapsible body section rendered below the toggle label.
+     *
+     * The section automatically expands when the toggle becomes selected.
+     */
     compositeSection?: ToggleCompositeSectionProps | undefined;
-    /** Specifies if the remove button should be displayed */
+    /**
+     * Renders a "Remove" button alongside the label.
+     *
+     * Clicking the button calls `onRemove` when the toggle is not disabled.
+     */
     removable?: boolean | undefined;
+    /** Called when the remove button is clicked and the toggle is not disabled. */
     onRemove?: (() => void) | undefined;
-    /** Changes min-width to fit content */
+    /** Constrains the toggle width to its content rather than filling the container. */
     useContentWidth?: boolean | undefined;
+    /**
+     * Keeps the toggle keyboard-focusable when `disabled` is `true`.
+     *
+     * When set alongside `disabled`, the native `disabled` attribute is omitted
+     * in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element
+     * keyboard-reachable. `onChange` is still suppressed.
+     */
     focusableWhenDisabled?: boolean | undefined;
 }
+/**
+ * Configuration for the collapsible body section attached to a `Toggle`.
+ */
 export interface ToggleCompositeSectionProps {
+    /** Content rendered inside the composite section body. */
     children: React.ReactNode;
-    /** Specifies if the subsection is collapsible */
+    /**
+     * Whether the section can be collapsed and expanded by the user.
+     *
+     * @default true
+     */
     collapsible?: boolean | undefined;
-    /** The initial expanded state. Only applicable if collapsible */
+    /**
+     * Whether the composite section starts in the expanded state.
+     *
+     * When the toggle becomes selected, the section automatically expands
+     * regardless of this value. Only applies when `collapsible` is `true`.
+     *
+     * @default false
+     */
     initialExpanded?: boolean | undefined;
-    /** Specifies errors to be displayed when the subsection is collapsed */
+    /**
+     * Errors shown in an alert banner when the section is collapsed.
+     *
+     * Pass a `string[]` to render a titled error list, or a `JSX.Element`
+     * for a custom error presentation.
+     */
     errors?: string[] | JSX.Element | undefined;
 }

package/typography/helper.d.ts

@@ -1,5 +1,6 @@
-import { TypographySizeType } from "../theme/font/types";
-import { TypographyWeight } from "./types";
-export declare const getTextStyle: (type: TypographySizeType, weight: TypographyWeight, paragraph?: boolean) => import("styled-components").RuleSet<object>;
-export declare const getDisplayStyle: (inline?: boolean, paragraph?: boolean, maxLines?: number | undefined) => import("styled-components").RuleSet<object>;
-export declare const createTypographyStyles: (textStyle: TypographySizeType, weight: TypographyWeight | undefined, inline: boolean | undefined, paragraph: boolean | undefined, maxLines: number | undefined) => import("styled-components").RuleSet<object>;
+export declare const createFontSizeStyles: ({ size, lineHeight, letterSpacing, }: {
+    size: string;
+    lineHeight: string;
+    letterSpacing: string;
+}) => string;
+export declare const createFontWeightStyles: (weight: string) => string;

package/typography/index.d.ts

@@ -1,2 +1,107 @@
-export * from "./typography";
+/**
+ * A collection of pre-styled text components covering headings, body copy, and
+ * hyperlinks.
+ *
+ * Use `Typography` sub-components to render consistently sized and weighted
+ * text.
+ *
+ * Sub-components:
+ * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.
+ * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.
+ * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .
+ *
+ * @remarks All text variants accept an `as` prop to
+ * override the rendered element for semantic flexibility.
+ * @keywords text, type scale
+ */
+export declare const Typography: {
+    /** Renders the largest heading (`h1`). */
+    HeadingXXL: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders an extra-large heading (`h2`). */
+    HeadingXL: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders a large heading (`h3`). */
+    HeadingLG: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders a medium heading (`h4`). */
+    HeadingMD: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders a small heading (`h5`). */
+    HeadingSM: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders the smallest heading (`h6`). */
+    HeadingXS: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders baseline body text (`p`). */
+    BodyBL: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+    /** Renders medium body text (`p`). */
+    BodyMD: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+    /** Renders small body text (`p`). */
+    BodySM: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+    /** Renders extra-small body text (`p`). */
+    BodyXS: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+    /** Renders a baseline-size hyperlink (`a`). */
+    LinkBL: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    /** Renders a medium-size hyperlink (`a`). */
+    LinkMD: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    /** Renders a small-size hyperlink (`a`). */
+    LinkSM: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    /** Renders an extra-small hyperlink (`a`). */
+    LinkXS: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+};
 export * from "./types";