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

package/toggle/toggle.styles.js

@@ -1,243 +1,2 @@
-import e,{css as o}from"styled-components";import{Alert as r}from"../alert/alert.js";import{applyHtmlContentStyle as d}from"../shared/html-content/html-content.js";import{ToggleIcon as t}from"../shared/toggle-icon/toggle-icon.js";import{TextList as i}from"../text-list/index.js";import{Typography as l}from"../typography/index.js";import{V3_Radius as n,V3_Colour as a,V3_Font as s,V3_MediaQuery as b}from"../v3_theme/index.js";const c=e.div`
-    position: relative;
-    display: inline-flex;
-    min-width: 10.375rem;
-    border-radius: ${n.sm};
-    border-width: 1px;
-    border-style: solid;
-    overflow: hidden;
-    flex-direction: column;
-    height: fit-content;
-    background: ${a.bg};
-
-    &:has(input:focus-visible) {
-        outline: 2px solid ${a["focus-ring"]};
-        outline-offset: 0;
-    }
-
-    ${e=>{if(!e.$indicator)return o`
-                justify-content: center;
-            `}}
-
-    // Container min width to fit content
-    ${e=>{if(e.$useContentWidth)return o`
-                min-width: unset;
-            `}}
-
-    // apply container border and header background color
-    ${e=>"no-border"===e.$styleType?e.$error?e.$disabled?o`
-                            border-color: ${a["border-error"]};
-                        `:o`
-                            border-color: ${a["border-error"]};
-
-                            &:has(${h}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${a["bg-hover-subtle"]};
-                                }
-                            }
-                        `:e.$disabled?e.$selected?o`
-                            border: none;
-                            background: ${a["bg-selected-disabled"]};
-                        `:o`
-                            border: none;
-                        `:e.$selected?o`
-                        border: none;
-                        background: ${a["bg-selected"]};
-
-                        &:has(${h}:hover) {
-                            @media (pointer: fine) {
-                                background: ${a["bg-selected-hover"]};
-
-                                & ${p} {
-                                    color: ${a["text-selected-hover"]};
-                                }
-
-                                & ${M} {
-                                    color: ${a["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:o`
-                    border: none;
-
-                    &:has(${h}:hover) {
-                        @media (pointer: fine) {
-                            background: ${a["bg-hover-subtle"]};
-                        }
-                    }
-                `:e.$error?e.$disabled?o`
-                            border-color: ${a["border-error"]};
-                        `:o`
-                            border-color: ${a["border-error"]};
-
-                            &:has(${h}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${a["bg-hover-subtle"]};
-                                }
-                            }
-                        `:e.$disabled?e.$selected?o`
-                            border-color: ${a["border-selected-disabled"]};
-                            background: ${a["bg-selected-disabled"]};
-                        `:o`
-                            border-color: ${a["border-disabled"]};
-                            background: ${a["bg-disabled"]};
-                        `:e.$selected?o`
-                        border-color: ${a["border-selected"]};
-                        background: ${a["bg-selected"]};
-
-                        &:has(${h}:hover) {
-                            @media (pointer: fine) {
-                                background: ${a["bg-selected-hover"]};
-
-                                & ${p} {
-                                    color: ${a["text-selected-hover"]};
-                                }
-
-                                & ${M} {
-                                    color: ${a["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:o`
-                    border-color: ${a.border};
-
-                    &:has(${h}:hover) {
-                        @media (pointer: fine) {
-                            background: ${a["bg-hover-subtle"]};
-                        }
-                    }
-                `}
-`,$=e.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;
-`,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.$disabled?e.$selected?o`
-                    color: ${a["text-selected-disabled"]};
-                `:o`
-                    color: ${a["text-disabled"]};
-                `:e.$selected?o`
-                color: ${a["text-selected"]};
-            `:o`
-            color: ${a.text};
-        `}
-`,u=e.label`
-    ${e=>e.$selected?s["body-baseline-semibold"]:s["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"}};
-    ${b.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"}};
-    }
-    ${b.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"}};
-    }
-`,g=e.div`
-    ${s["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 {
-        ${s["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"};
-`,x=e.button`
-    color: ${e=>e.$disabled?a["text-disabled"]:a["text-error"]};
-    white-space: nowrap;
-    ${s["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"};
-`,f=e.button`
-    color: ${e=>e.disabled?a["text-disabled"]:a["text-primary"]};
-    ${s["body-baseline-semibold"]}
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    border: none;
-    background-color: ${a.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?a["text-disabled"]:a["text-error"]};
-    border: none;
-    background: ${a.bg};
-    cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-    padding: 0.6875rem 1rem 0.5rem 1rem;
-`,y=e(r)`
-    width: 100%;
-    user-select: none;
-`,k=e.div`
-    padding: 0 1rem;
-    padding-top: 0.6875rem;
-    padding-bottom: ${e=>e.$isFinalItem?"0.6875rem":"0.5rem"};
-    background-color: ${a.bg};
-    ${d({textSize:"body-md"})}
-
-    ${e=>e.$disabled?o`
-                color: ${a["text-disabled"]};
-            `:e.$selected?o`
-                color: ${a["text-selected"]};
-            `:o`
-                color: ${a.text};
-            `}
-`,j=e(l.BodyMD)`
-    color: ${e=>e.$disabled?a["text-disabled"]:a["text-error"]};
-`,L=e(i.Ul)`
-    color: ${e=>e.$disabled?a["text-disabled"]:a["text-error"]};
-`,M=e(t)`
-    ${e=>e.$disabled?e.$selected?o`
-                    color: ${a["icon-selected-disabled"]};
-                `:o`
-                    color: ${a["icon-disabled-subtle"]};
-                `:e.$selected?o`
-                color: ${a["icon-selected"]};
-            `:o`
-            color: ${a["icon-subtle"]};
-        `};
-`;export{y as AlertContainer,k as Children,c as Container,w as ErrorContainer,L as ErrorList,j as ErrorText,f as ExpandButton,h as HeaderContainer,v as IndicatorLabelContainer,$ as Input,m as InputContainer,u as Label,x as RemoveButton,M as StyledToggleIcon,g as SubLabel,p as TextContainer};
+import"./toggle.styles_1yzqsu.css";const t={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}},l="h1fyul7s",e="tybgacj",i="tvkjim3",n="t1aku79x",s="c11szvws",a="n12ofp2c",o="u1l0nsei",g="c17z2k4k",c="tfiow01",p="td5xote",m="t15nuck4",b="tnwn55u",r="t1graj5g",w="t1qqpl3b",f="t1l2ct9g",y="t1tat3es",d="t1nsq3eo",u="t1cyflot",k="txm5wyu",C="i14lgw6r",q="tovnc4j",v="iangfw6",x="l1oixyvr",L="t1elmp69",j="tv1hw4w",z="s17sf3sp",h="i1l466bv",_="ih3od2r",A="r1izng22",G="d194isif",H="ehwglic",I="ejwzsce",M="e1q8ywpe",P="c1mf9nso",T="c9t56r4",B="c1y0x62l",D="c1gmwtb7",E="aeqryui";export{E as alertContainer,P as children,T as childrenIsFinalItem,g as colorBorderError,B as colorTextDisabled,D as colorTextError,s as container,G as disabledColorCursor,M as errorContainer,H as expandButton,I as expandButtonPaddingTopRequired,l as headerContainer,h as indicatorLabelContainer,_ as indicatorLabelContainerAddPadding,C as input,v as inputContainer,x as label,a as noIndicatorContainer,A as removeButton,z as subLabel,e as textContainer,u as toggleContainer,f as toggleContainerDisabled,w as toggleContainerDisabledSelected,r as toggleContainerError,k as toggleContainerHoverDefault,d as toggleContainerHoverSelected,b as toggleContainerNoBorder,p as toggleContainerNoBorderDisabled,c as toggleContainerNoBorderDisabledSelected,m as toggleContainerNoBorderSelected,y as toggleContainerSelected,q as toggleInputDisabled,L as toggleLabelDefault,j as toggleLabelSelected,n as toggleTextContainerDisabledSelected,i as toggleTextContainerSelected,t as tokens,o as useContentWidthContainer};
 //# 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\";\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":["tokens","label","desktopLineClamp","tabletLineClamp","mobileLineClamp","headerContainer","textContainer","toggleTextContainerSelected","toggleTextContainerDisabledSelected","container","noIndicatorContainer","useContentWidthContainer","colorBorderError","toggleContainerNoBorderDisabledSelected","toggleContainerNoBorderDisabled","toggleContainerNoBorderSelected","toggleContainerNoBorder","toggleContainerError","toggleContainerDisabledSelected","toggleContainerDisabled","toggleContainerSelected","toggleContainerHoverSelected","toggleContainer","toggleContainerHoverDefault","input","toggleInputDisabled","inputContainer","toggleLabelDefault","toggleLabelSelected","subLabel","indicatorLabelContainer","indicatorLabelContainerAddPadding","removeButton","disabledColorCursor","expandButton","expandButtonPaddingTopRequired","errorContainer","children","childrenIsFinalItem","colorTextDisabled","colorTextError","alertContainer"],"mappings":"yDAKO,MAAMA,EAAS,CAClBC,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB,gDAQZC,EAAe,WAMfC,EAAa,UASbC,EAA2B,UAI3BC,EAAmC,WAInCC,EAAS,WAkBTC,EAAoB,WAIpBC,EAAwB,WAIxBC,EAAgB,WAIhBC,EAAuC,UAKvCC,EAA+B,UAI/BC,EAA+B,WAK/BC,EAAuB,UAIvBC,EAAoB,WAIpBC,EAA+B,WAK/BC,EAAuB,WAKvBC,EAAuB,WAKvBC,EAA4B,WAgB5BC,EAAe,WAIfC,EAA2B,UAQ3BC,EAAK,WAeLC,EAAmB,UAInBC,EAAc,UAIdzB,EAAK,WAoBL0B,EAAkB,WAIlBC,EAAmB,UAInBC,EAAQ,WAaRC,EAAuB,WAQvBC,EAAiC,UAIjCC,EAAY,WAWZC,EAAmB,WAKnBC,EAAY,UAmBZC,EAA8B,UAI9BC,EAAc,WASdC,EAAQ,WAQRC,EAAmB,UAInBC,EAAiB,WAIjBC,EAAc,WAIdC,EAAc"}

package/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/toggle/types.d.ts

@@ -40,6 +40,7 @@ export interface ToggleProps extends React.AriaAttributes, React.DOMAttributes<H
     onRemove?: (() => void) | undefined;
     /** Changes min-width to fit content */
     useContentWidth?: boolean | undefined;
+    focusableWhenDisabled?: boolean | undefined;
 }
 export interface ToggleCompositeSectionProps {
     children: React.ReactNode;

package/tooltip/tooltip.styles.d.ts

@@ -3,8 +3,8 @@ interface TooltipStyleProps {
     position?: TooltipPosition;
     visible?: boolean;
 }
-export declare const BubbleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipStyleProps>> & string;
-export declare const Bubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../card/types").CardProps, never>> & string & Omit<({ children, ...otherProps }: import("../card/types").CardProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, TooltipStyleProps>> & string;
-export declare const HOCWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const BubbleWrap: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TooltipStyleProps> & TooltipStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TooltipStyleProps> & TooltipStyleProps, never>>> & string;
+export declare const Bubble: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../card/types").CardProps, never> & Partial<Pick<import("../card/types").CardProps, never>>> & string & Omit<({ children, className, "data-testid": dataTestId, ...otherProps }: import("../card/types").CardProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Arrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TooltipStyleProps> & TooltipStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof TooltipStyleProps> & TooltipStyleProps, never>>> & string;
+export declare const HOCWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
 export {};

package/typography/helper.d.ts

@@ -1,5 +1,6 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
-import type { TypographyWeight } from "./types";
-export declare const getTextStyle: (type: V3_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: V3_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,45 +1,77 @@
 export declare const Typography: {
-    HeadingXXL: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingXL: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingLG: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingMD: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingSM: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingXS: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    BodyBL: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-    }>;
-    BodyMD: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-    }>;
-    BodySM: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-    }>;
-    BodyXS: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-    }>;
-    LinkBL: import("styled-components").IStyledComponent<"web", import("./types").TypographyLinkProps & {
-        ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-    }>;
-    LinkMD: import("styled-components").IStyledComponent<"web", import("./types").TypographyLinkProps & {
-        ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-    }>;
-    LinkSM: import("styled-components").IStyledComponent<"web", import("./types").TypographyLinkProps & {
-        ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-    }>;
-    LinkXS: import("styled-components").IStyledComponent<"web", import("./types").TypographyLinkProps & {
-        ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-    }>;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    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;
+    LinkBL: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    LinkMD: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    LinkSM: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    LinkXS: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
 };
 export * from "./types";

package/typography/index.js

@@ -1,2 +1,2 @@
-import{LinkSM as i,BodyBL as n,BodySM as d,BodyMD as o,LinkMD as L,HeadingMD as a,HeadingSM as e,BodyXS as g,LinkXS as y,HeadingXS as B,LinkBL as H,HeadingLG as M,HeadingXL as S,HeadingXXL as X}from"./typography.js";const k={HeadingXXL:X,HeadingXL:S,HeadingLG:M,HeadingMD:a,HeadingSM:e,HeadingXS:B,BodyBL:n,BodyMD:o,BodySM:d,BodyXS:g,LinkBL:H,LinkMD:L,LinkSM:i,LinkXS:y};export{k as Typography};
+import{BodyBL as i,HeadingSM as n,BodySM as d,BodyMD as o,LinkSM as L,BodyXS as a,HeadingXS as e,LinkMD as g,LinkBL as y,HeadingMD as B,LinkXS as H,HeadingLG as M,HeadingXL as S,HeadingXXL as X}from"./typography.js";const k={HeadingXXL:X,HeadingXL:S,HeadingLG:M,HeadingMD:B,HeadingSM:n,HeadingXS:e,BodyBL:i,BodyMD:o,BodySM:d,BodyXS:a,LinkBL:y,LinkMD:g,LinkSM:L,LinkXS:H};export{k as Typography};
 //# sourceMappingURL=index.js.map

package/typography/types.d.ts

@@ -1,5 +1,7 @@
+import type { FontSize } from "../theme";
 export type TypographyWeight = "regular" | "semibold" | "bold" | "light";
-export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
+export type TypographySize = Exclude<FontSize, "form-label" | "form-description">;
+export type TypographyProps<T extends React.ElementType = React.ElementType> = React.ComponentPropsWithoutRef<T> & {
     /** The font weight */
     weight?: TypographyWeight | undefined;
     /** Specifies if text is displayed inline */
@@ -8,7 +10,9 @@ export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
     paragraph?: boolean | undefined;
     /** Specify the number of lines visible, the additional lines will be truncated */
     maxLines?: number | undefined;
-}
+    /** Overrides rendered element, e.g. `h2` for semantic hierarchy */
+    as?: T | undefined;
+};
 export type TypographyUnderlineStyle = "none" | "underline";
 export interface TypographyLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** The font weight */

package/typography/typography-text.styles.d.ts

@@ -0,0 +1,3 @@
+import type { TypographySize, TypographyWeight } from "./types";
+export declare const typographySize: Record<TypographySize, string>;
+export declare const typographyWeight: Record<TypographyWeight, string>;

package/typography/typography-text.styles.js

@@ -0,0 +1,2 @@
+import"./typography-text.styles_1734x2k.css";const h={"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"},e={light:"lqvxzn1",regular:"r1kcu5nk",semibold:"s1pdcykv",bold:"b1rin8wh"};export{h as typographySize,e as typographyWeight};
+//# sourceMappingURL=typography-text.styles.js.map

package/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":["typographySize","typographyWeight","light","regular","semibold","bold"],"mappings":"uEA8DO,MAAMA,EAAiD,CAC1D,cAAa,UAGb,aAAY,WAGZ,aAAY,WAGZ,aAAY,WAGZ,aAAY,WAGZ,aAAY,UAGZ,gBAAe,UAGf,UAAS,WAGT,UAAS,WAGT,UAAS,YAKAC,EAAqD,CAC9DC,MAAK,UAGLC,QAAO,WAGPC,SAAQ,WAGRC,KAAI"}

package/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);}