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

package/cjs/toggle/toggle.styles.js

@@ -1,243 +1,2 @@
-"use strict";var e=require("styled-components"),o=require("../alert/alert.js"),r=require("../shared/html-content/html-content.js"),t=require("../shared/toggle-icon/toggle-icon.js"),d=require("../text-list/index.js"),l=require("../typography/index.js"),i=require("../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var s=n(e);const a=s.default.div`
-    position: relative;
-    display: inline-flex;
-    min-width: 10.375rem;
-    border-radius: ${i.V3_Radius.sm};
-    border-width: 1px;
-    border-style: solid;
-    overflow: hidden;
-    flex-direction: column;
-    height: fit-content;
-    background: ${i.V3_Colour.bg};
-
-    &:has(input:focus-visible) {
-        outline: 2px solid ${i.V3_Colour["focus-ring"]};
-        outline-offset: 0;
-    }
-
-    ${o=>{if(!o.$indicator)return e.css`
-                justify-content: center;
-            `}}
-
-    // Container min width to fit content
-    ${o=>{if(o.$useContentWidth)return e.css`
-                min-width: unset;
-            `}}
-
-    // apply container border and header background color
-    ${o=>"no-border"===o.$styleType?o.$error?o.$disabled?e.css`
-                            border-color: ${i.V3_Colour["border-error"]};
-                        `:e.css`
-                            border-color: ${i.V3_Colour["border-error"]};
-
-                            &:has(${g}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${i.V3_Colour["bg-hover-subtle"]};
-                                }
-                            }
-                        `:o.$disabled?o.$selected?e.css`
-                            border: none;
-                            background: ${i.V3_Colour["bg-selected-disabled"]};
-                        `:e.css`
-                            border: none;
-                        `:o.$selected?e.css`
-                        border: none;
-                        background: ${i.V3_Colour["bg-selected"]};
-
-                        &:has(${g}:hover) {
-                            @media (pointer: fine) {
-                                background: ${i.V3_Colour["bg-selected-hover"]};
-
-                                & ${b} {
-                                    color: ${i.V3_Colour["text-selected-hover"]};
-                                }
-
-                                & ${y} {
-                                    color: ${i.V3_Colour["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:e.css`
-                    border: none;
-
-                    &:has(${g}:hover) {
-                        @media (pointer: fine) {
-                            background: ${i.V3_Colour["bg-hover-subtle"]};
-                        }
-                    }
-                `:o.$error?o.$disabled?e.css`
-                            border-color: ${i.V3_Colour["border-error"]};
-                        `:e.css`
-                            border-color: ${i.V3_Colour["border-error"]};
-
-                            &:has(${g}:hover) {
-                                @media (pointer: fine) {
-                                    background: ${i.V3_Colour["bg-hover-subtle"]};
-                                }
-                            }
-                        `:o.$disabled?o.$selected?e.css`
-                            border-color: ${i.V3_Colour["border-selected-disabled"]};
-                            background: ${i.V3_Colour["bg-selected-disabled"]};
-                        `:e.css`
-                            border-color: ${i.V3_Colour["border-disabled"]};
-                            background: ${i.V3_Colour["bg-disabled"]};
-                        `:o.$selected?e.css`
-                        border-color: ${i.V3_Colour["border-selected"]};
-                        background: ${i.V3_Colour["bg-selected"]};
-
-                        &:has(${g}:hover) {
-                            @media (pointer: fine) {
-                                background: ${i.V3_Colour["bg-selected-hover"]};
-
-                                & ${b} {
-                                    color: ${i.V3_Colour["text-selected-hover"]};
-                                }
-
-                                & ${y} {
-                                    color: ${i.V3_Colour["icon-selected-hover"]};
-                                }
-                            }
-                        }
-                    `:e.css`
-                    border-color: ${i.V3_Colour.border};
-
-                    &:has(${g}:hover) {
-                        @media (pointer: fine) {
-                            background: ${i.V3_Colour["bg-hover-subtle"]};
-                        }
-                    }
-                `}
-`,c=s.default.input`
-    position: absolute;
-    height: 100%;
-    width: 100%;
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    top: 0;
-    left: 0;
-
-    /* Hide appearance but keep it focusable using keyboard interactions */
-    appearance: none;
-    background: transparent;
-    border: none;
-`,u=s.default.div`
-    display: flex;
-`,b=s.default.div`
-    display: flex;
-    flex-direction: column;
-    overflow-wrap: anywhere;
-    width: 100%;
-    overflow: hidden;
-
-    // apply header container text color
-    ${o=>o.$disabled?o.$selected?e.css`
-                    color: ${i.V3_Colour["text-selected-disabled"]};
-                `:e.css`
-                    color: ${i.V3_Colour["text-disabled"]};
-                `:o.$selected?e.css`
-                color: ${i.V3_Colour["text-selected"]};
-            `:e.css`
-            color: ${i.V3_Colour.text};
-        `}
-`,$=s.default.label`
-    ${e=>e.$selected?i.V3_Font["body-baseline-semibold"]:i.V3_Font["body-baseline-regular"]};
-    overflow: hidden;
-    display: -webkit-box;
-    text-overflow: ellipsis;
-    -webkit-box-orient: vertical;
-    overflow-wrap: break-word;
-    -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.desktop)&&void 0!==r?r:"none"}};
-    ${i.V3_MediaQuery.MaxWidth.lg} {
-        -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.tablet)&&void 0!==r?r:"none"}};
-    }
-    ${i.V3_MediaQuery.MaxWidth.sm} {
-        -webkit-line-clamp: ${e=>{var o,r;return null!==(r=null===(o=e.$maxLines)||void 0===o?void 0:o.mobile)&&void 0!==r?r:"none"}};
-    }
-`,p=s.default.div`
-    ${i.V3_Font["body-md-regular"]}
-    margin-top: 0.5rem;
-
-    z-index: 1; // forces sublabel to render above the input
-    pointer-events: none; // to allow click events to be passed to the input
-
-    strong,
-    b {
-        ${i.V3_Font["body-md-semibold"]}
-    }
-`,g=s.default.div`
-    display: flex;
-    align-items: flex-start;
-    justify-content: space-between;
-`,m=s.default.div`
-    display: flex;
-    height: 100%;
-    width: 100%;
-    position: relative;
-    padding: ${e=>e.$addPadding?"0.6875rem 0rem 0.6875rem 1rem":"0.6875rem 1rem"};
-`,x=s.default.button`
-    color: ${e=>e.$disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-error"]};
-    white-space: nowrap;
-    ${i.V3_Font["body-md-semibold"]}
-    height: fit-content;
-    padding: 0.6875rem 1rem 0.6875rem 0.5rem;
-    border: none;
-    background: none;
-
-    cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-`,h=s.default.button`
-    color: ${e=>e.disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-primary"]};
-    ${i.V3_Font["body-baseline-semibold"]}
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    border: none;
-    background-color: ${i.V3_Colour.bg};
-    cursor: ${e=>e.disabled?"not-allowed":"pointer"};
-    padding: 0 1rem 0.6875rem 1rem;
-    padding-top: ${e=>e.$paddingTopRequired?"0.6875rem":"0rem"};
-    width: 100%;
-
-    svg {
-        width: 1em;
-        height: 1em;
-        margin-left: 0.5rem;
-    }
-`,C=s.default.div`
-    width: 100%;
-    color: ${e=>e.$disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-error"]};
-    border: none;
-    background: ${i.V3_Colour.bg};
-    cursor: ${e=>e.$disabled?"not-allowed":"pointer"};
-    padding: 0.6875rem 1rem 0.5rem 1rem;
-`,_=s.default(o.Alert)`
-    width: 100%;
-    user-select: none;
-`,f=s.default.div`
-    padding: 0 1rem;
-    padding-top: 0.6875rem;
-    padding-bottom: ${e=>e.$isFinalItem?"0.6875rem":"0.5rem"};
-    background-color: ${i.V3_Colour.bg};
-    ${r.applyHtmlContentStyle({textSize:"body-md"})}
-
-    ${o=>o.$disabled?e.css`
-                color: ${i.V3_Colour["text-disabled"]};
-            `:o.$selected?e.css`
-                color: ${i.V3_Colour["text-selected"]};
-            `:e.css`
-                color: ${i.V3_Colour.text};
-            `}
-`,V=s.default(l.Typography.BodyMD)`
-    color: ${e=>e.$disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-error"]};
-`,v=s.default(d.TextList.Ul)`
-    color: ${e=>e.$disabled?i.V3_Colour["text-disabled"]:i.V3_Colour["text-error"]};
-`,y=s.default(t.ToggleIcon)`
-    ${o=>o.$disabled?o.$selected?e.css`
-                    color: ${i.V3_Colour["icon-selected-disabled"]};
-                `:e.css`
-                    color: ${i.V3_Colour["icon-disabled-subtle"]};
-                `:o.$selected?e.css`
-                color: ${i.V3_Colour["icon-selected"]};
-            `:e.css`
-            color: ${i.V3_Colour["icon-subtle"]};
-        `};
-`;exports.AlertContainer=_,exports.Children=f,exports.Container=a,exports.ErrorContainer=C,exports.ErrorList=v,exports.ErrorText=V,exports.ExpandButton=h,exports.HeaderContainer=g,exports.IndicatorLabelContainer=m,exports.Input=c,exports.InputContainer=u,exports.Label=$,exports.RemoveButton=x,exports.StyledToggleIcon=y,exports.SubLabel=p,exports.TextContainer=b;
+"use strict";require("./toggle.styles_1yzqsu.css");exports.alertContainer="aeqryui",exports.children="c1mf9nso",exports.childrenIsFinalItem="c9t56r4",exports.colorBorderError="c17z2k4k",exports.colorTextDisabled="c1y0x62l",exports.colorTextError="c1gmwtb7",exports.container="c11szvws",exports.disabledColorCursor="d194isif",exports.errorContainer="e1q8ywpe",exports.expandButton="ehwglic",exports.expandButtonPaddingTopRequired="ejwzsce",exports.headerContainer="h1fyul7s",exports.indicatorLabelContainer="i1l466bv",exports.indicatorLabelContainerAddPadding="ih3od2r",exports.input="i14lgw6r",exports.inputContainer="iangfw6",exports.label="l1oixyvr",exports.noIndicatorContainer="n12ofp2c",exports.removeButton="r1izng22",exports.subLabel="s17sf3sp",exports.textContainer="tybgacj",exports.toggleContainer="t1cyflot",exports.toggleContainerDisabled="t1l2ct9g",exports.toggleContainerDisabledSelected="t1qqpl3b",exports.toggleContainerError="t1graj5g",exports.toggleContainerHoverDefault="txm5wyu",exports.toggleContainerHoverSelected="t1nsq3eo",exports.toggleContainerNoBorder="tnwn55u",exports.toggleContainerNoBorderDisabled="td5xote",exports.toggleContainerNoBorderDisabledSelected="tfiow01",exports.toggleContainerNoBorderSelected="t15nuck4",exports.toggleContainerSelected="t1tat3es",exports.toggleInputDisabled="tovnc4j",exports.toggleLabelDefault="t1elmp69",exports.toggleLabelSelected="tv1hw4w",exports.toggleTextContainerDisabledSelected="t1aku79x",exports.toggleTextContainerSelected="tvkjim3",exports.tokens={label:{desktopLineClamp:"--fds-internal-toggle-label-desktopLineClamp",tabletLineClamp:"--fds-internal-toggle-label-tabletLineClamp",mobileLineClamp:"--fds-internal-toggle-label-mobileLineClamp"}},exports.useContentWidthContainer="u1l0nsei";
 //# sourceMappingURL=toggle.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"toggle.styles.js","sources":["../../../src/toggle/toggle.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Alert } from \"../alert\";\nimport { applyHtmlContentStyle } from \"../shared/html-content/html-content\";\nimport { ToggleIcon } from \"../shared/toggle-icon/toggle-icon\";\nimport { TextList } from \"../text-list\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_Font, V3_MediaQuery, V3_Radius } from \"../v3_theme\";\nimport type { ToggleStyleType } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $selected?: boolean;\n    $disabled?: boolean;\n    $indicator?: boolean;\n}\n\ninterface ContainerStyleProps extends StyleProps {\n    $styleType?: ToggleStyleType;\n    $error?: boolean;\n    $useContentWidth?: boolean;\n}\n\ninterface IndicatorLabelContainerStyleProps {\n    $addPadding?: boolean;\n}\n\ninterface LabelStyleProps {\n    $maxLines?: { desktop?: number; mobile?: number; tablet?: number };\n}\n\ninterface ExpandButtonStyleProps extends StyleProps {\n    $paddingTopRequired?: boolean;\n}\n\ninterface ChildrenStyleProps extends StyleProps {\n    $isFinalItem?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const Container = styled.div<ContainerStyleProps>`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${V3_Radius[\"sm\"]};\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${V3_Colour.bg};\n\n    &:has(input:focus-visible) {\n        outline: 2px solid ${V3_Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n\n    ${(props) => {\n        if (!props.$indicator) {\n            return css`\n                justify-content: center;\n            `;\n        }\n    }}\n\n    // Container min width to fit content\n    ${(props) => {\n        if (props.$useContentWidth) {\n            return css`\n                min-width: unset;\n            `;\n        }\n    }}\n\n    // apply container border and header background color\n    ${(props) => {\n        switch (props.$styleType) {\n            case \"no-border\": {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${V3_Colour[\"border-error\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${V3_Colour[\"border-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${V3_Colour[\"bg-hover-subtle\"]};\n                                }\n                            }\n                        `;\n                    }\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border: none;\n                            background: ${V3_Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border: none;\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border: none;\n                        background: ${V3_Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${V3_Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${V3_Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${V3_Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border: none;\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${V3_Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n\n            default: {\n                if (props.$error) {\n                    if (props.$disabled) {\n                        return css`\n                            border-color: ${V3_Colour[\"border-error\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${V3_Colour[\"border-error\"]};\n\n                            &:has(${HeaderContainer}:hover) {\n                                @media (pointer: fine) {\n                                    background: ${V3_Colour[\"bg-hover-subtle\"]};\n                                }\n                            }\n                        `;\n                    }\n                }\n\n                if (props.$disabled) {\n                    if (props.$selected) {\n                        return css`\n                            border-color: ${V3_Colour[\n                                \"border-selected-disabled\"\n                            ]};\n                            background: ${V3_Colour[\"bg-selected-disabled\"]};\n                        `;\n                    } else {\n                        return css`\n                            border-color: ${V3_Colour[\"border-disabled\"]};\n                            background: ${V3_Colour[\"bg-disabled\"]};\n                        `;\n                    }\n                }\n\n                if (props.$selected) {\n                    return css`\n                        border-color: ${V3_Colour[\"border-selected\"]};\n                        background: ${V3_Colour[\"bg-selected\"]};\n\n                        &:has(${HeaderContainer}:hover) {\n                            @media (pointer: fine) {\n                                background: ${V3_Colour[\"bg-selected-hover\"]};\n\n                                & ${TextContainer} {\n                                    color: ${V3_Colour[\"text-selected-hover\"]};\n                                }\n\n                                & ${StyledToggleIcon} {\n                                    color: ${V3_Colour[\"icon-selected-hover\"]};\n                                }\n                            }\n                        }\n                    `;\n                }\n\n                return css`\n                    border-color: ${V3_Colour.border};\n\n                    &:has(${HeaderContainer}:hover) {\n                        @media (pointer: fine) {\n                            background: ${V3_Colour[\"bg-hover-subtle\"]};\n                        }\n                    }\n                `;\n            }\n        }\n    }}\n`;\n\nexport const Input = styled.input`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    top: 0;\n    left: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\nexport const InputContainer = styled.div`\n    display: flex;\n`;\n\nexport const TextContainer = styled.div<StyleProps>`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n\n    // apply header container text color\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$selected) {\n                return css`\n                    color: ${V3_Colour[\"text-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${V3_Colour[\"text-disabled\"]};\n                `;\n            }\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${V3_Colour[\"text-selected\"]};\n            `;\n        }\n\n        return css`\n            color: ${V3_Colour.text};\n        `;\n    }}\n`;\n\nexport const Label = styled.label<LabelStyleProps & { $selected?: boolean }>`\n    ${(props) =>\n        props.$selected\n            ? V3_Font[\"body-baseline-semibold\"]\n            : V3_Font[\"body-baseline-regular\"]};\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n    -webkit-line-clamp: ${(props) => props.$maxLines?.desktop ?? \"none\"};\n    ${V3_MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.tablet ?? \"none\"};\n    }\n    ${V3_MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: ${(props) => props.$maxLines?.mobile ?? \"none\"};\n    }\n`;\n\nexport const SubLabel = styled.div`\n    ${V3_Font[\"body-md-regular\"]}\n    margin-top: 0.5rem;\n\n    z-index: 1; // forces sublabel to render above the input\n    pointer-events: none; // to allow click events to be passed to the input\n\n    strong,\n    b {\n        ${V3_Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const HeaderContainer = styled.div<ContainerStyleProps>`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const IndicatorLabelContainer = styled.div<IndicatorLabelContainerStyleProps>`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: ${(props) =>\n        props.$addPadding ? \"0.6875rem 0rem 0.6875rem 1rem\" : \"0.6875rem 1rem\"};\n`;\n\nexport const RemoveButton = styled.button<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? V3_Colour[\"text-disabled\"] : V3_Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${V3_Font[\"body-md-semibold\"]}\n    height: fit-content;\n    padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n    border: none;\n    background: none;\n\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n`;\n\nexport const ExpandButton = styled.button<ExpandButtonStyleProps>`\n    color: ${(props) =>\n        props.disabled\n            ? V3_Colour[\"text-disabled\"]\n            : V3_Colour[\"text-primary\"]};\n    ${V3_Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${V3_Colour.bg};\n    cursor: ${(props) => (props.disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0 1rem 0.6875rem 1rem;\n    padding-top: ${(props) =>\n        props.$paddingTopRequired ? \"0.6875rem\" : \"0rem\"};\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const ErrorContainer = styled.div<StyleProps>`\n    width: 100%;\n    color: ${(props) =>\n        props.$disabled ? V3_Colour[\"text-disabled\"] : V3_Colour[\"text-error\"]};\n    border: none;\n    background: ${V3_Colour.bg};\n    cursor: ${(props) => (props.$disabled ? \"not-allowed\" : \"pointer\")};\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const AlertContainer = styled(Alert)`\n    width: 100%;\n    user-select: none;\n`;\n\nexport const Children = styled.div<ChildrenStyleProps>`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: ${(props) => (props.$isFinalItem ? \"0.6875rem\" : \"0.5rem\")};\n    background-color: ${V3_Colour.bg};\n    ${applyHtmlContentStyle({ textSize: \"body-md\" })}\n\n    ${(props) => {\n        if (props.$disabled) {\n            return css`\n                color: ${V3_Colour[\"text-disabled\"]};\n            `;\n        } else if (props.$selected) {\n            return css`\n                color: ${V3_Colour[\"text-selected\"]};\n            `;\n        } else {\n            return css`\n                color: ${V3_Colour.text};\n            `;\n        }\n    }}\n`;\n\nexport const ErrorText = styled(Typography.BodyMD)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? V3_Colour[\"text-disabled\"] : V3_Colour[\"text-error\"]};\n`;\n\nexport const ErrorList = styled(TextList.Ul)<StyleProps>`\n    color: ${(props) =>\n        props.$disabled ? V3_Colour[\"text-disabled\"] : V3_Colour[\"text-error\"]};\n`;\n\nexport const StyledToggleIcon = styled(ToggleIcon)<StyleProps>`\n    ${(props) => {\n        if (props.$disabled) {\n            if (props.$selected) {\n                return css`\n                    color: ${V3_Colour[\"icon-selected-disabled\"]};\n                `;\n            } else {\n                return css`\n                    color: ${V3_Colour[\"icon-disabled-subtle\"]};\n                `;\n            }\n        }\n\n        if (props.$selected) {\n            return css`\n                color: ${V3_Colour[\"icon-selected\"]};\n            `;\n        }\n        return css`\n            color: ${V3_Colour[\"icon-subtle\"]};\n        `;\n    }};\n`;\n"],"names":["Container","styled","div","V3_Radius","V3_Colour","bg","props","$indicator","css","$useContentWidth","$styleType","$error","$disabled","HeaderContainer","$selected","TextContainer","StyledToggleIcon","border","Input","input","disabled","InputContainer","text","Label","label","V3_Font","_a","_b","$maxLines","desktop","V3_MediaQuery","MaxWidth","lg","tablet","sm","mobile","SubLabel","IndicatorLabelContainer","$addPadding","RemoveButton","button","ExpandButton","$paddingTopRequired","ErrorContainer","AlertContainer","Alert","Children","$isFinalItem","applyHtmlContentStyle","textSize","ErrorText","Typography","BodyMD","ErrorList","TextList","Ul","ToggleIcon"],"mappings":"iXA8CO,MAAMA,EAAYC,EAAAA,QAAOC,GAAwB;;;;qBAInCC,EAAAA,UAAc;;;;;;kBAMjBC,EAAAA,UAAUC;;;6BAGCD,EAAAA,UAAU;;;;MAIhCE,IACC,IAAKA,EAAMC,WACP,OAAOC,KAAG;;aAGd;;;MAIDF,IACC,GAAIA,EAAMG,iBACN,OAAOD,KAAG;;aAGd;;;MAIDF,GAEU,cADDA,EAAMI,WAEFJ,EAAMK,OACFL,EAAMM,UACCJ,KAAG;4CACUJ,EAAAA,UAAU;0BAGvBI,KAAG;4CACUJ,EAAAA,UAAU;;oCAElBS;;kDAEcT,EAAAA,UAAU;;;0BAOxCE,EAAMM,UACFN,EAAMQ,UACCN,KAAG;;0CAEQJ,EAAAA,UAAU;0BAGrBI,KAAG;;0BAMdF,EAAMQ,UACCN,KAAG;;sCAEQJ,EAAAA,UAAU;;gCAEhBS;;8CAEcT,EAAAA,UAAU;;oCAEpBW;6CACSX,EAAAA,UAAU;;;oCAGnBY;6CACSZ,EAAAA,UAAU;;;;sBAOhCI,KAAG;;;4BAGEK;;0CAEcT,EAAAA,UAAU;;;kBAOhCE,EAAMK,OACFL,EAAMM,UACCJ,KAAG;4CACUJ,EAAAA,UAAU;0BAGvBI,KAAG;4CACUJ,EAAAA,UAAU;;oCAElBS;;kDAEcT,EAAAA,UAAU;;;0BAOxCE,EAAMM,UACFN,EAAMQ,UACCN,KAAG;4CACUJ,EAAAA,UACZ;0CAEUA,EAAAA,UAAU;0BAGrBI,KAAG;4CACUJ,EAAAA,UAAU;0CACZA,EAAAA,UAAU;0BAKhCE,EAAMQ,UACCN,KAAG;wCACUJ,EAAAA,UAAU;sCACZA,EAAAA,UAAU;;gCAEhBS;;8CAEcT,EAAAA,UAAU;;oCAEpBW;6CACSX,EAAAA,UAAU;;;oCAGnBY;6CACSZ,EAAAA,UAAU;;;;sBAOhCI,KAAG;oCACUJ,EAAAA,UAAUa;;4BAElBJ;;0CAEcT,EAAAA,UAAU;;;;EASvCc,EAAQjB,EAAAA,QAAOkB,KAAK;;;;cAIlBb,GAAWA,EAAMc,SAAW,cAAgB;;;;;;;;EAS9CC,EAAiBpB,EAAAA,QAAOC,GAAG;;EAI3Ba,EAAgBd,EAAAA,QAAOC,GAAe;;;;;;;;MAQ5CI,GACKA,EAAMM,UACFN,EAAMQ,UACCN,KAAG;6BACGJ,EAAAA,UAAU;kBAGhBI,KAAG;6BACGJ,EAAAA,UAAU;kBAK3BE,EAAMQ,UACCN,KAAG;yBACGJ,EAAAA,UAAU;cAIpBI,KAAG;qBACGJ,EAAAA,UAAUkB;;EAKlBC,EAAQtB,EAAAA,QAAOuB,KAAgD;MACrElB,GACCA,EAAMQ,UACAW,EAAAA,QAAQ,0BACRA,EAAAA,QAAQ;;;;;;0BAMKnB,IAAS,IAAAoB,EAAAC,EAAC,OAAwB,QAAxBA,EAAe,QAAfD,EAAApB,EAAMsB,iBAAS,IAAAF,OAAA,EAAAA,EAAEG,eAAO,IAAAF,EAAAA,EAAI,MAAM;MACjEG,EAAAA,cAAcC,SAASC;8BACE1B,IAAS,IAAAoB,EAAAC,EAAC,OAAuB,QAAvBA,EAAe,QAAfD,EAAApB,EAAMsB,iBAAS,IAAAF,OAAA,EAAAA,EAAEO,cAAM,IAAAN,EAAAA,EAAI,MAAM;;MAEpEG,EAAAA,cAAcC,SAASG;8BACE5B,IAAS,IAAAoB,EAAAC,EAAC,OAAuB,QAAvBA,EAAe,QAAfD,EAAApB,EAAMsB,iBAAS,IAAAF,OAAA,EAAAA,EAAES,cAAM,IAAAR,EAAAA,EAAI,MAAM;;EAI7DS,EAAWnC,EAAAA,QAAOC,GAAG;MAC5BuB,EAAAA,QAAQ;;;;;;;;UAQJA,EAAAA,QAAQ;;EAILZ,EAAkBZ,EAAAA,QAAOC,GAAwB;;;;EAMjDmC,EAA0BpC,EAAAA,QAAOC,GAAsC;;;;;eAKpEI,GACRA,EAAMgC,YAAc,gCAAkC;EAGjDC,EAAetC,EAAAA,QAAOuC,MAAkB;aACvClC,GACNA,EAAMM,UAAYR,EAAAA,UAAU,iBAAmBA,YAAU;;MAE3DqB,EAAAA,QAAQ;;;;;;cAMCnB,GAAWA,EAAMM,UAAY,cAAgB;EAG/C6B,EAAexC,EAAAA,QAAOuC,MAA8B;aACnDlC,GACNA,EAAMc,SACAhB,EAAAA,UAAU,iBACVA,EAAAA,UAAU;MAClBqB,EAAAA,QAAQ;;;;;wBAKUrB,EAAAA,UAAUC;cACnBC,GAAWA,EAAMc,SAAW,cAAgB;;mBAEvCd,GACZA,EAAMoC,oBAAsB,YAAc;;;;;;;;EAUrCC,EAAiB1C,EAAAA,QAAOC,GAAe;;aAEtCI,GACNA,EAAMM,UAAYR,EAAAA,UAAU,iBAAmBA,YAAU;;kBAE/CA,EAAAA,UAAUC;cACbC,GAAWA,EAAMM,UAAY,cAAgB;;EAI/CgC,EAAiB3C,EAAAA,QAAO4C,EAAAA,MAAM;;;EAK9BC,EAAW7C,EAAAA,QAAOC,GAAuB;;;sBAG/BI,GAAWA,EAAMyC,aAAe,YAAc;wBAC7C3C,EAAAA,UAAUC;MAC5B2C,wBAAsB,CAAEC,SAAU;;MAEjC3C,GACKA,EAAMM,UACCJ,KAAG;yBACGJ,EAAAA,UAAU;cAEhBE,EAAMQ,UACNN,KAAG;yBACGJ,EAAAA,UAAU;cAGhBI,KAAG;yBACGJ,EAAAA,UAAUkB;;EAMtB4B,EAAYjD,EAAAA,QAAOkD,aAAWC,OAAmB;aAChD9C,GACNA,EAAMM,UAAYR,EAAAA,UAAU,iBAAmBA,YAAU;EAGpDiD,EAAYpD,EAAAA,QAAOqD,WAASC,GAAe;aAC1CjD,GACNA,EAAMM,UAAYR,EAAAA,UAAU,iBAAmBA,YAAU;EAGpDY,EAAmBf,EAAAA,QAAOuD,EAAAA,WAAuB;MACvDlD,GACKA,EAAMM,UACFN,EAAMQ,UACCN,KAAG;6BACGJ,EAAAA,UAAU;kBAGhBI,KAAG;6BACGJ,EAAAA,UAAU;kBAK3BE,EAAMQ,UACCN,KAAG;yBACGJ,EAAAA,UAAU;cAGpBI,KAAG;qBACGJ,EAAAA,UAAU;;"}
+{"version":3,"file":"toggle.styles.js","sources":["../../../src/toggle/toggle.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery, Radius } from \"../theme\";\nimport * as toggleIconStyles from \"./toggle-icon.styles\";\n\nexport const tokens = {\n    label: {\n        desktopLineClamp: \"--fds-internal-toggle-label-desktopLineClamp\",\n        tabletLineClamp: \"--fds-internal-toggle-label-tabletLineClamp\",\n        mobileLineClamp: \"--fds-internal-toggle-label-mobileLineClamp\",\n    },\n} as const;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\nexport const headerContainer = css`\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n`;\n\nexport const textContainer = css`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: anywhere;\n    width: 100%;\n    overflow: hidden;\n    color: ${Colour.text};\n`;\n\nexport const toggleTextContainerSelected = css`\n    color: ${Colour[\"text-selected\"]};\n`;\n\nexport const toggleTextContainerDisabledSelected = css`\n    color: ${Colour[\"text-selected-disabled\"]};\n`;\n\nexport const container = css`\n    position: relative;\n    display: inline-flex;\n    min-width: 10.375rem;\n    border-radius: ${Radius[\"sm\"]};\n    border-width: 1px;\n    border-style: solid;\n    overflow: hidden;\n    flex-direction: column;\n    height: fit-content;\n    background: ${Colour.bg};\n\n    &:focus-within {\n        outline: 2px solid ${Colour[\"focus-ring\"]};\n        outline-offset: 0;\n    }\n`;\n\nexport const noIndicatorContainer = css`\n    justify-content: center;\n`;\n\nexport const useContentWidthContainer = css`\n    min-width: unset;\n`;\n\nexport const colorBorderError = css`\n    border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerNoBorderDisabledSelected = css`\n    border: none;\n    background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerNoBorderDisabled = css`\n    border: none;\n`;\n\nexport const toggleContainerNoBorderSelected = css`\n    border: none;\n    background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerNoBorder = css`\n    border: none;\n`;\n\nexport const toggleContainerError = css`\n    border-color: ${Colour[\"border-error\"]};\n`;\n\nexport const toggleContainerDisabledSelected = css`\n    border-color: ${Colour[\"border-selected-disabled\"]};\n    background: ${Colour[\"bg-selected-disabled\"]};\n`;\n\nexport const toggleContainerDisabled = css`\n    border-color: ${Colour[\"border-disabled\"]};\n    background: ${Colour[\"bg-disabled\"]};\n`;\n\nexport const toggleContainerSelected = css`\n    border-color: ${Colour[\"border-selected\"]};\n    background: ${Colour[\"bg-selected\"]};\n`;\n\nexport const toggleContainerHoverSelected = css`\n    &:has(.${headerContainer}:hover) {\n        @media (pointer: fine) {\n            background: ${Colour[\"bg-selected-hover\"]};\n\n            & .${textContainer} {\n                color: ${Colour[\"text-selected-hover\"]};\n            }\n\n            & .${toggleIconStyles.wrapperBase} {\n                color: ${Colour[\"icon-selected-hover\"]};\n            }\n        }\n    }\n`;\n\nexport const toggleContainer = css`\n    border-color: ${Colour.border};\n`;\n\nexport const toggleContainerHoverDefault = css`\n    &:has(.${headerContainer}:hover) {\n        @media (pointer: fine) {\n            background: ${Colour[\"bg-hover-subtle\"]};\n        }\n    }\n`;\n\nexport const input = css`\n    position: absolute;\n    height: 100%;\n    width: 100%;\n    cursor: pointer;\n    top: 0;\n    left: 0;\n    opacity: 0;\n\n    /* Hide appearance but keep it focusable using keyboard interactions */\n    appearance: none;\n    background: transparent;\n    border: none;\n`;\n\nexport const toggleInputDisabled = css`\n    cursor: not-allowed;\n`;\n\nexport const inputContainer = css`\n    display: flex;\n`;\n\nexport const label = css`\n    overflow: hidden;\n    display: -webkit-box;\n    text-overflow: ellipsis;\n    -webkit-box-orient: vertical;\n    overflow-wrap: break-word;\n\n    ${tokens.label.desktopLineClamp}: initial;\n    ${tokens.label.tabletLineClamp}: initial;\n    ${tokens.label.mobileLineClamp}: initial;\n\n    -webkit-line-clamp: var(${tokens.label.desktopLineClamp}, none);\n    ${MediaQuery.MaxWidth.lg} {\n        -webkit-line-clamp: var(${tokens.label.tabletLineClamp}, none);\n    }\n    ${MediaQuery.MaxWidth.sm} {\n        -webkit-line-clamp: var(${tokens.label.mobileLineClamp}, none);\n    }\n`;\n\nexport const toggleLabelDefault = css`\n    ${Font[\"body-baseline-regular\"]}\n`;\n\nexport const toggleLabelSelected = css`\n    ${Font[\"body-baseline-semibold\"]}\n`;\n\nexport const subLabel = css`\n    ${Font[\"body-md-regular\"]}\n    margin-top: 0.5rem;\n\n    z-index: 1; // forces sublabel to render above the input\n    pointer-events: none; // to allow click events to be passed to the input\n\n    strong,\n    b {\n        ${Font[\"body-md-semibold\"]}\n    }\n`;\n\nexport const indicatorLabelContainer = css`\n    display: flex;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    padding: 0.6875rem 1rem;\n`;\n\nexport const indicatorLabelContainerAddPadding = css`\n    padding: 0.6875rem 0rem 0.6875rem 1rem;\n`;\n\nexport const removeButton = css`\n    color: ${Colour[\"text-error\"]};\n    white-space: nowrap;\n    ${Font[\"body-md-semibold\"]}\n    height: fit-content;\n    padding: 0.6875rem 1rem 0.6875rem 0.5rem;\n    border: none;\n    background: none;\n    cursor: pointer;\n`;\n\nexport const disabledColorCursor = css`\n    color: ${Colour[\"text-disabled\"]};\n    cursor: not-allowed;\n`;\n\nexport const expandButton = css`\n    color: ${Colour[\"text-primary\"]};\n    ${Font[\"body-baseline-semibold\"]}\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    border: none;\n    background-color: ${Colour.bg};\n    cursor: pointer;\n    padding: 0 1rem 0.6875rem 1rem;\n    width: 100%;\n\n    svg {\n        width: 1em;\n        height: 1em;\n        margin-left: 0.5rem;\n    }\n`;\n\nexport const expandButtonPaddingTopRequired = css`\n    padding-top: 0.6875rem;\n`;\n\nexport const errorContainer = css`\n    width: 100%;\n    color: ${Colour[\"text-error\"]};\n    border: none;\n    background: ${Colour.bg};\n    cursor: pointer;\n    padding: 0.6875rem 1rem 0.5rem 1rem;\n`;\n\nexport const children = css`\n    padding: 0 1rem;\n    padding-top: 0.6875rem;\n    padding-bottom: 0.5rem;\n    background-color: ${Colour.bg};\n    color: ${Colour.text};\n`;\n\nexport const childrenIsFinalItem = css`\n    padding-bottom: 0.6875rem;\n`;\n\nexport const colorTextDisabled = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const colorTextError = css`\n    color: ${Colour[\"text-error\"]};\n`;\n\nexport const alertContainer = css`\n    width: 100%;\n    user-select: none;\n`;\n"],"names":["label","desktopLineClamp","tabletLineClamp","mobileLineClamp"],"mappings":"gGAuR2B,2BApBN,uCAQW,mCAzMH,qCA6MC,kCAIH,6BA3OL,uCAsLU,kCA4BL,gCAvBF,iDAmBkB,kCArOf,2CAsLQ,qDAQU,wBAxE5B,kCAmBS,wBAIT,wCApGe,gCAyJR,4BAzBJ,iCAnKK,kCAoGE,2CA1BQ,mDALQ,wCAJX,+CAuCO,+CApBC,2CAvBL,kDATQ,0DALQ,kDASR,2CAuBR,uCAgDJ,qCA4BD,uCAIC,sDAlJgB,+CAJR,yBA3BlB,CAClBA,MAAO,CACHC,iBAAkB,+CAClBC,gBAAiB,8CACjBC,gBAAiB,iFAqDY"}

package/cjs/toggle/toggle.styles_1yzqsu.css

@@ -0,0 +1,38 @@
+.h1fyul7s{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:flex-start;-webkit-box-align:flex-start;-ms-flex-align:flex-start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
+.tybgacj{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:anywhere;width:100%;overflow:hidden;color:var(--fds-colour-text);}
+.tvkjim3{color:var(--fds-colour-text-selected);}
+.t1aku79x{color:var(--fds-colour-text-selected-disabled);}
+.c11szvws{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;min-width:10.375rem;border-radius:var(--fds-radius-sm);border-width:1px;border-style:solid;overflow:hidden;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background:var(--fds-colour-bg);}.c11szvws:focus-within{outline:2px solid var(--fds-colour-focus-ring);outline-offset:0;}
+.n12ofp2c{-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;}
+.u1l0nsei{min-width:unset;}
+.c17z2k4k{border-color:var(--fds-colour-border-error);}
+.tfiow01{border:none;background:var(--fds-colour-bg-selected-disabled);}
+.td5xote{border:none;}
+.t15nuck4{border:none;background:var(--fds-colour-bg-selected);}
+.tnwn55u{border:none;}
+.t1graj5g{border-color:var(--fds-colour-border-error);}
+.t1qqpl3b{border-color:var(--fds-colour-border-selected-disabled);background:var(--fds-colour-bg-selected-disabled);}
+.t1l2ct9g{border-color:var(--fds-colour-border-disabled);background:var(--fds-colour-bg-disabled);}
+.t1tat3es{border-color:var(--fds-colour-border-selected);background:var(--fds-colour-bg-selected);}
+@media (pointer: fine){.t1nsq3eo:has(.h1fyul7s:hover){background:var(--fds-colour-bg-selected-hover);}.t1nsq3eo:has(.h1fyul7s:hover) .tybgacj{color:var(--fds-colour-text-selected-hover);}.t1nsq3eo:has(.h1fyul7s:hover) .wxufi5f{color:var(--fds-colour-icon-selected-hover);}}
+.t1cyflot{border-color:var(--fds-colour-border);}
+@media (pointer: fine){.txm5wyu:has(.h1fyul7s:hover){background:var(--fds-colour-bg-hover-subtle);}}
+.i14lgw6r{position:absolute;height:100%;width:100%;cursor:pointer;top:0;left:0;opacity:0;-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;appearance:none;background:transparent;border:none;}
+.tovnc4j{cursor:not-allowed;}
+.iangfw6{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
+.l1oixyvr{overflow:hidden;display:-webkit-box;text-overflow:ellipsis;-webkit-box-orient:vertical;overflow-wrap:break-word;--fds-internal-toggle-label-desktopLineClamp:initial;--fds-internal-toggle-label-tabletLineClamp:initial;--fds-internal-toggle-label-mobileLineClamp:initial;-webkit-line-clamp:var(--fds-internal-toggle-label-desktopLineClamp, none);}:where(body.fds-breakpoint-lg-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-tabletLineClamp, none);}:where(body.fds-breakpoint-sm-max) .l1oixyvr{-webkit-line-clamp:var(--fds-internal-toggle-label-mobileLineClamp, none);}
+.t1elmp69{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.tv1hw4w{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.s17sf3sp{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin-top:0.5rem;z-index:1;pointer-events:none;}.s17sf3sp strong,.s17sf3sp b{font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.i1l466bv{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;width:100%;position:relative;padding:0.6875rem 1rem;}
+.ih3od2r{padding:0.6875rem 0rem 0.6875rem 1rem;}
+.r1izng22{color:var(--fds-colour-text-error);white-space:nowrap;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;padding:0.6875rem 1rem 0.6875rem 0.5rem;border:none;background:none;cursor:pointer;}
+.d194isif{color:var(--fds-colour-text-disabled);cursor:not-allowed;}
+.ehwglic{color:var(--fds-colour-text-primary);font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;border:none;background-color:var(--fds-colour-bg);cursor:pointer;padding:0 1rem 0.6875rem 1rem;width:100%;}.ehwglic svg{width:1em;height:1em;margin-left:0.5rem;}
+.ejwzsce{padding-top:0.6875rem;}
+.e1q8ywpe{width:100%;color:var(--fds-colour-text-error);border:none;background:var(--fds-colour-bg);cursor:pointer;padding:0.6875rem 1rem 0.5rem 1rem;}
+.c1mf9nso{padding:0 1rem;padding-top:0.6875rem;padding-bottom:0.5rem;background-color:var(--fds-colour-bg);color:var(--fds-colour-text);}
+.c9t56r4{padding-bottom:0.6875rem;}
+.c1y0x62l{color:var(--fds-colour-text-disabled);}
+.c1gmwtb7{color:var(--fds-colour-text-error);}
+.aeqryui{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;}

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

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

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

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

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

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

package/cjs/typography/typography.js

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

package/cjs/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../../src/typography/typography.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport React from \"react\";\nimport type { IStyledComponent } from \"styled-components\";\n\nimport type { V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport type { TypographyLinkProps, TypographyProps } from \"./types\";\nimport {\n    HyperlinkBase,\n    StyledExternalIcon,\n    TypographyBase,\n} from \"./typography.styles\";\n\nconst createHeading = (\n    tag: keyof JSX.IntrinsicElements,\n    textStyle: V3_TypographySizeType,\n    displayName: string\n) => {\n    const Header = (\n        { weight, inline, paragraph, maxLines, ...props }: TypographyProps,\n        ref: React.Ref<HTMLHeadingElement>\n    ) => {\n        return (\n            <TypographyBase\n                ref={ref}\n                as={inline ? \"span\" : tag}\n                $textStyle={textStyle}\n                $weight={weight}\n                $inline={inline}\n                $paragraph={paragraph}\n                $maxLines={maxLines}\n                {...props}\n            />\n        );\n    };\n    Header.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Header) as IStyledComponent<\n        \"web\",\n        TypographyProps & {\n            ref?: RefObject<HTMLHeadingElement> | undefined;\n        }\n    >;\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: V3_TypographySizeType, displayName: string) => {\n    const Body = (\n        { weight, inline, paragraph, maxLines, ...props }: TypographyProps,\n        ref: React.Ref<HTMLParagraphElement>\n    ) => {\n        return (\n            <TypographyBase\n                ref={ref}\n                as={inline ? \"span\" : \"p\"}\n                $textStyle={textStyle}\n                $weight={weight}\n                $inline={inline}\n                $paragraph={paragraph}\n                $maxLines={maxLines}\n                {...props}\n            />\n        );\n    };\n    Body.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Body) as IStyledComponent<\n        \"web\",\n        TypographyProps & {\n            ref?: RefObject<HTMLParagraphElement> | undefined;\n        }\n    >;\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n    textStyle: V3_TypographySizeType,\n    displayName: string\n) => {\n    const Hyperlink = (\n        {\n            weight,\n            children,\n            external,\n            underlineStyle = \"underline\",\n            ...props\n        }: TypographyLinkProps,\n        ref: React.Ref<HTMLAnchorElement>\n    ) => {\n        return (\n            <HyperlinkBase\n                ref={ref}\n                $textStyle={textStyle}\n                $weight={weight}\n                $underlineStyle={underlineStyle}\n                {...props}\n            >\n                {children}\n                {external && <StyledExternalIcon />}\n            </HyperlinkBase>\n        );\n    };\n    Hyperlink.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Hyperlink) as IStyledComponent<\n        \"web\",\n        TypographyLinkProps & {\n            ref?: RefObject<HTMLAnchorElement> | undefined;\n        }\n    >;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["createHeading","tag","textStyle","displayName","Header","_a","ref","weight","inline","paragraph","maxLines","props","__rest","_jsx","TypographyBase","Object","assign","as","$textStyle","$weight","$inline","$paragraph","React","forwardRef","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","Body","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","_jsxs","HyperlinkBase","$underlineStyle","StyledExternalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"6NAYA,MAAMA,EAAgB,CAClBC,EACAC,EACAC,KAEA,MAAMC,EAAS,CACXC,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAA,OAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CACXV,IAAKA,EACLW,GAAIT,EAAS,OAASP,EAAGiB,WACbhB,EAASiB,QACZZ,EAAMa,QACNZ,EAAMa,WACHZ,YACDC,GACPC,GACN,EAIV,OADAP,EAAOD,YAAc,cAAcA,IAC5BmB,EAAAA,QAAMC,WAAWnB,EAKvB,EAGQoB,EAAaxB,EAAc,KAAM,cAAe,cAChDyB,EAAYzB,EAAc,KAAM,aAAc,aAC9C0B,EAAY1B,EAAc,KAAM,aAAc,aAC9C2B,EAAY3B,EAAc,KAAM,aAAc,aAC9C4B,EAAY5B,EAAc,KAAM,aAAc,aAC9C6B,EAAY7B,EAAc,KAAM,aAAc,aAErD8B,EAAa,CAAC5B,EAAkCC,KAClD,MAAM4B,EAAO,CACT1B,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAA,OAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,MAACC,EAAAA,eAAcC,OAAAC,OAAA,CACXV,IAAKA,EACLW,GAAIT,EAAS,OAAS,IAAGU,WACbhB,EAASiB,QACZZ,EAAMa,QACNZ,EAAMa,WACHZ,YACDC,GACPC,GACN,EAIV,OADAoB,EAAK5B,YAAc,cAAcA,IAC1BmB,EAAAA,QAAMC,WAAWQ,EAKvB,EAGQC,EAASF,EAAW,gBAAiB,UACrCG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAC/BK,EAASL,EAAW,UAAW,UAEtCM,EAAsB,CACxBlC,EACAC,KAEA,MAAMkC,EAAY,CACdhC,EAOAC,KAPA,IAAAC,OACIA,EAAM+B,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,aAAWnC,EACzBM,EAAKC,EAAAA,OAAAP,EALZ,mDASA,OACIoC,OAACC,EAAAA,cAAa3B,OAAAC,OAAA,CACVV,IAAKA,EAAGY,WACIhB,EAASiB,QACZZ,EAAMoC,gBACEH,GACb7B,EAAK,CAAA2B,SAAA,CAERA,EACAC,GAAY1B,EAAAA,IAAC+B,EAAAA,mBAAkB,OACpB,EAIxB,OADAP,EAAUlC,YAAc,cAAcA,IAC/BmB,EAAAA,QAAMC,WAAWc,EAKvB,EAGQQ,EAAST,EAAoB,gBAAiB,UAC9CU,EAASV,EAAoB,UAAW,UACxCW,EAASX,EAAoB,UAAW,UACxCY,EAASZ,EAAoB,UAAW"}
+{"version":3,"file":"typography.js","sources":["../../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n    TypographyLinkProps,\n    TypographyProps,\n    TypographySize,\n    TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n    weight: TypographyWeight | undefined\n): TypographyWeight => weight || \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n    styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n    styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n    inline: boolean | undefined,\n    paragraph: boolean | undefined\n) => {\n    if (paragraph) {\n        return styles.paragraph;\n    }\n\n    if (inline) {\n        return styles.displayInline;\n    }\n\n    return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n    maxLines: number | undefined,\n    inline: boolean | undefined,\n    paragraph: boolean | undefined\n) => !!maxLines && (paragraph || !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n    tag: TTag,\n    textStyle: TypographySize,\n    displayName: string\n) => {\n    const TypographyText = React.forwardRef<\n        React.ComponentRef<TTag>,\n        TypographyProps\n    >(function TypographyTextComponent(\n        {\n            className,\n            as: asProp,\n            inline,\n            maxLines,\n            paragraph,\n            weight,\n            ...restProps\n        },\n        ref\n    ) {\n        const textWeight = getTextWeight(weight);\n        const textRef = React.useRef<React.ComponentRef<TTag>>(null);\n        const mergedRef = mergeRefs(textRef, ref);\n        const shouldClamp = shouldLineClamp(maxLines, inline, paragraph);\n\n        useApplyStyle(textRef as React.RefObject<HTMLElement | null>, {\n            [styles.tokens.typographyBase.maxLines]: shouldClamp\n                ? maxLines\n                : null,\n        });\n\n        const Element = inline ? \"span\" : asProp || tag;\n\n        return (\n            <Element\n                ref={mergedRef}\n                className={clsx(\n                    styles.typographyBase,\n                    getTypographyTextClassName(textStyle),\n                    getTypographyWeightClassName(textWeight),\n                    getTypographyDisplayClassName(inline, paragraph),\n                    shouldClamp && styles.lineClamp,\n                    className\n                )}\n                {...restProps}\n            />\n        );\n    });\n\n    (\n        TypographyText as NamedExoticComponent\n    ).displayName = `Typography.${displayName}`;\n    return TypographyText;\n};\n\nconst createHeading = (\n    tag: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\",\n    textStyle: TypographySize,\n    displayName: string\n) => {\n    return createTypographyText(tag, textStyle, displayName);\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: TypographySize, displayName: string) => {\n    return createTypographyText(\"p\", textStyle, displayName);\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n    textStyle: TypographySize,\n    displayName: string\n) => {\n    const Hyperlink = React.forwardRef<HTMLAnchorElement, TypographyLinkProps>(\n        function TypographyLink(\n            {\n                weight,\n                children,\n                external,\n                underlineStyle = \"underline\",\n                className,\n                ...props\n            },\n            ref\n        ) {\n            const textWeight = getTextWeight(weight);\n\n            return (\n                <a\n                    ref={ref}\n                    className={clsx(\n                        styles.typographyBase,\n                        styles.hyperlinkBase,\n                        getTypographyTextClassName(textStyle),\n                        getTypographyWeightClassName(textWeight),\n                        underlineStyle === \"none\"\n                            ? styles.noUnderline\n                            : styles.underline,\n                        className\n                    )}\n                    {...props}\n                >\n                    {children}\n                    {external && (\n                        <ExternalIcon className={styles.externalIcon} />\n                    )}\n                </a>\n            );\n        }\n    );\n\n    (\n        Hyperlink as NamedExoticComponent\n    ).displayName = `Typography.${displayName}`;\n    return Hyperlink;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["getTextWeight","weight","getTypographyTextClassName","textStyle","styles.typographySize","getTypographyWeightClassName","styles.typographyWeight","getTypographyDisplayClassName","inline","paragraph","styles.paragraph","styles.displayInline","styles.displayBlock","createTypographyText","tag","displayName","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","Element","_jsx","Object","assign","clsx","styles.typographyBase","styles.lineClamp","createHeading","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","props","_jsxs","styles.hyperlinkBase","styles.noUnderline","styles.underline","ExternalIcon","styles.externalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"04BAeA,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAAA,eAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAAA,iBAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAAAA,UAGPF,EACOG,EAAAA,cAGJC,EAAAA,aASLC,EAAuB,CACzBC,EACAX,EACAY,KAEA,MAAMC,EAAiBC,EAAAA,QAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,EAAMf,OACVA,EAAMgB,SACNA,EAAQf,UACRA,EAASR,OACTA,GAAMkB,EACHM,EAASC,SAAAP,EAPhB,6DAWA,MAAMQ,EAAa3B,EAAcC,GAC3B2B,EAAUX,EAAAA,QAAMY,OAAiC,MACjDC,EAAYC,EAAAA,UAAUH,EAASR,GAC/BY,EA7BU,EACpBR,EACAhB,EACAC,MACGe,IAAaf,IAAcD,GAyBNyB,CAAgBT,EAAUhB,EAAQC,GAEtDyB,EAAAA,cAAcN,EAAgD,CAC1D,CAACO,EAAAA,OAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAGV,MAAMa,EAAU7B,EAAS,OAASe,GAAUT,EAE5C,OACIwB,MAACD,EAAOE,OAAAC,OAAA,CACJpB,IAAKU,EACLT,UAAWoB,UACPC,EAAAA,eACAxC,EAA2BC,GAC3BE,EAA6BsB,GAC7BpB,EAA8BC,EAAQC,GACtCuB,GAAeW,YACftB,IAEAI,GAGhB,IAKA,OAFIT,EACFD,YAAc,cAAcA,IACvBC,CAAc,EAGnB4B,EAAgB,CAClB9B,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,GAGnC8B,EAAaD,EAAc,KAAM,cAAe,cAChDE,EAAYF,EAAc,KAAM,aAAc,aAC9CG,EAAYH,EAAc,KAAM,aAAc,aAC9CI,EAAYJ,EAAc,KAAM,aAAc,aAC9CK,EAAYL,EAAc,KAAM,aAAc,aAC9CM,EAAYN,EAAc,KAAM,aAAc,aAErDO,EAAa,CAAChD,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,GAGnCqC,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,CACxBrD,EACAY,KAEA,MAAM0C,EAAYxC,EAAAA,QAAMC,YACpB,SACIC,EAQAC,GARA,IAAAnB,OACIA,EAAMyD,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,YAAWvC,UAC5BA,GAASF,EACN0C,EAAKnC,EAAAA,OAAAP,EANZ,+DAUA,MAAMQ,EAAa3B,EAAcC,GAEjC,OACI6D,EAAAA,KAAA,IAAAvB,OAAAC,OAAA,CACIpB,IAAKA,EACLC,UAAWoB,EAAAA,QACPC,EAAAA,eACAqB,EAAAA,cACA7D,EAA2BC,GAC3BE,EAA6BsB,GACV,SAAnBiC,EACMI,EAAAA,YACAC,EAAAA,UACN5C,IAEAwC,EAAK,CAAAH,SAAA,CAERA,EACAC,GACGrB,EAAAA,IAAC4B,EAAAA,aAAY,CAAC7C,UAAW8C,EAAAA,kBAIzC,IAMJ,OAFIV,EACF1C,YAAc,cAAcA,IACvB0C,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}

package/cjs/typography/typography.styles.js

@@ -1,21 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/external"),t=require("styled-components"),r=require("../v3_theme/index.js"),l=require("./helper.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=i(t);const n=a.default.div`
-    ${e=>l.createTypographyStyles(e.$textStyle,e.$weight,e.$inline,e.$paragraph,e.$maxLines)}
-`,o=a.default.a`
-    ${e=>{var i;return t.css`
-        ${l.getTextStyle(e.$textStyle,e.$weight||"regular")}
-        color: ${r.V3_Colour.hyperlink};
-        text-decoration: ${null!==(i=e.$underlineStyle)&&void 0!==i?i:"underline"};
-
-        &:hover,
-        &:active,
-        &:focus {
-            color: ${r.V3_Colour["text-hover"]};
-        }
-    `}}
-`,u=a.default(e.ExternalIcon)`
-    height: 1lh;
-    width: 1em;
-    margin-left: 0.4em;
-    vertical-align: middle;
-`;exports.HyperlinkBase=o,exports.StyledExternalIcon=u,exports.TypographyBase=n;
+"use strict";require("./typography-text.styles_1734x2k.css"),require("./typography.styles_1jqils.css");exports.displayBlock="d1ruq6ql",exports.displayInline="du0nvfw",exports.externalIcon="e3g791q",exports.hyperlinkBase="h1ydob6f",exports.lineClamp="l4n1hjq",exports.noUnderline="nspw24h",exports.paragraph="p1cfdq56",exports.tokens={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},exports.typographyBase="ts2ljtd",exports.underline="u1w2xa0l";
 //# sourceMappingURL=typography.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"typography.styles.js","sources":["../../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\nimport type { V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport type { TypographyWeight } 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 StyledProps {\n    $textStyle: V3_TypographySizeType;\n    $weight?: TypographyWeight | undefined;\n    $inline?: boolean | undefined;\n    $paragraph?: boolean | undefined;\n    $maxLines?: number | undefined;\n    $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n    ${(props) =>\n        createTypographyStyles(\n            props.$textStyle,\n            props.$weight,\n            props.$inline,\n            props.$paragraph,\n            props.$maxLines\n        )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n    ${(props) => css`\n        ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n        color: ${V3_Colour.hyperlink};\n        text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n        &:hover,\n        &:active,\n        &:focus {\n            color: ${V3_Colour[\"text-hover\"]};\n        }\n    `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n    height: 1lh;\n    width: 1em;\n    margin-left: 0.4em;\n    vertical-align: middle;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","V3_Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"wOAwBO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAgB;MAC9CC,GACCC,EAAAA,uBACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAAA,QAAOU,CAAc;MAC3CR,UAAU,OAAAS,KAAG;UACVC,EAAAA,aAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAAA,UAAUC;2BACqB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAAA,UAAU;;KAE1B;EAGQI,EAAqBjB,EAAAA,QAAOkB,EAAAA,aAAa;;;;;"}
+{"version":3,"file":"typography.styles.js","sources":["../../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n    typographyBase: {\n        maxLines: \"--fds-internal-typography-base-maxLines\",\n    },\n} as const;\n\nexport const typographyBase = css`\n    ${tokens.typographyBase.maxLines}: initial;\n    font-family: ${Font.Spec[\"font-family\"]};\n    font-variant: ${Font.Spec[\"font-variant\"]};\n    color: ${Colour.text};\n`;\n\nexport const displayInline = css`\n    display: inline;\n    margin-bottom: 0;\n`;\n\nexport const displayBlock = css`\n    display: block;\n    margin-bottom: 0;\n`;\n\nexport const paragraph = css`\n    display: block;\n    margin-bottom: 1.05em;\n`;\n\nexport const lineClamp = css`\n    ${lineClampDynamicCss(tokens.typographyBase.maxLines)}\n`;\n\nexport const hyperlinkBase = css`\n    color: ${Colour.hyperlink};\n\n    &:hover,\n    &:active,\n    &:focus {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const underline = css`\n    text-decoration: underline;\n`;\n\nexport const noUnderline = css`\n    text-decoration: none;\n`;\n\nexport const externalIcon = css`\n    height: 1lh;\n    width: 1em;\n    margin-left: 0.4em;\n    vertical-align: middle;\n`;\n"],"names":["typographyBase","maxLines"],"mappings":"gLAyByB,iCALC,+BAqCD,gCAlBC,6BAJJ,8BAkBE,4BAvBF,0BAvBA,CAClBA,eAAgB,CACZC,SAAU,mEAIS,4BAoCL"}

package/cjs/typography/typography.styles_1jqils.css

@@ -0,0 +1,9 @@
+.ts2ljtd{--fds-internal-typography-base-maxLines:initial;font-family:var(--fds-font-family);font-variant:var(--fds-font-variant);color:var(--fds-colour-text);}
+.du0nvfw{display:inline;margin-bottom:0;}
+.d1ruq6ql{display:block;margin-bottom:0;}
+.p1cfdq56{display:block;margin-bottom:1.05em;}
+.l4n1hjq{--fds-internal-typography-base-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-typography-base-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.h1ydob6f{color:var(--fds-colour-hyperlink);}.h1ydob6f:hover,.h1ydob6f:active,.h1ydob6f:focus{color:var(--fds-colour-text-hover);}
+.u1w2xa0l{-webkit-text-decoration:underline;text-decoration:underline;}
+.nspw24h{-webkit-text-decoration:none;text-decoration:none;}
+.e3g791q{height:1lh;width:1em;margin-left:0.4em;vertical-align:middle;}

package/cjs/uneditable-section/item-section.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("react"),s=require("./uneditable-section.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const n=(r,i)=>{var{stretch:n}=r,u=e.__rest(r,["stretch"]);return t.jsx(s.GridUl,Object.assign({ref:i,$stretch:n},u))},u=i(r).default.forwardRef(n);exports.Component=n,exports.UneditableItemSection=u;
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),r=require("clsx"),s=require("react"),a=require("./uneditable-section.styles.js");function i(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=i(r);const c=(r,s)=>{var{stretch:i,className:c}=r,l=e.__rest(r,["stretch","className"]);return t.jsx("ul",Object.assign({ref:s,className:u.default(a.gridUl,i&&a.columnWidthStretch,c)},l))},l=i(s).default.forwardRef(c);exports.Component=c,exports.UneditableItemSection=l;
 //# sourceMappingURL=item-section.js.map

package/cjs/uneditable-section/item-section.js.map

@@ -1 +1 @@
-{"version":3,"file":"item-section.js","sources":["../../../src/uneditable-section/item-section.tsx"],"sourcesContent":["import React from \"react\";\n\nimport type { UneditableSectionItemSectionProps } from \"./types\";\nimport { GridUl } from \"./uneditable-section.styles\";\n\nexport const Component = (\n    { stretch, ...otherProps }: UneditableSectionItemSectionProps,\n    ref: React.Ref<HTMLUListElement>\n) => {\n    return <GridUl ref={ref} $stretch={stretch} {...otherProps} />;\n};\n\nexport const UneditableItemSection = React.forwardRef(Component);\n"],"names":["Component","_a","ref","stretch","otherProps","__rest","_jsx","GridUl","Object","assign","$stretch","UneditableItemSection","React","forwardRef"],"mappings":"gOAKaA,EAAY,CACrBC,EACAC,KADA,IAAAC,QAAEA,GAAOF,EAAKG,EAAUC,EAAAA,OAAAJ,EAAxB,aAGA,OAAOK,MAACC,EAAAA,OAAMC,OAAAC,OAAA,CAACP,IAAKA,EAAGQ,SAAYP,GAAaC,GAAc,EAGrDO,OAAwBC,QAAMC,WAAWb"}
+{"version":3,"file":"item-section.js","sources":["../../../src/uneditable-section/item-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport type { UneditableSectionItemSectionProps } from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const Component = (\n    { stretch, className, ...otherProps }: UneditableSectionItemSectionProps,\n    ref: React.Ref<HTMLUListElement>\n) => {\n    return (\n        <ul\n            ref={ref}\n            className={clsx(\n                styles.gridUl,\n                stretch && styles.columnWidthStretch,\n                className\n            )}\n            {...otherProps}\n        />\n    );\n};\n\nexport const UneditableItemSection = React.forwardRef(Component);\n"],"names":["Component","_a","ref","stretch","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","UneditableItemSection","React","forwardRef"],"mappings":"6PAMaA,EAAY,CACrBC,EACAC,SADAC,QAAEA,EAAOC,UAAEA,GAASH,EAAKI,EAAUC,EAAAA,OAAAL,EAAnC,yBAGA,OACIM,EAAAA,IAAA,KAAAC,OAAAC,OAAA,CACIP,IAAKA,EACLE,UAAWM,EAAAA,QACPC,EAAAA,OACAR,GAAWS,EAAAA,mBACXR,IAEAC,GACN,EAIGQ,OAAwBC,QAAMC,WAAWf"}

package/cjs/uneditable-section/section-item.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/eye"),s=require("@lifesg/react-icons/eye-slash"),r=require("react"),i=require("../form/form-label.js"),n=require("../shared/accessibility/index.js"),t=require("../typography/index.js"),l=require("../util/string-helper.js"),d=require("./section-item.styles.js");exports.UneditableSectionItem=({label:c,value:o,displayWidth:m="full",maskState:u,maskLoadingState:k,maskChar:g="•",maskRange:h,unmaskRange:y,maskRegex:j,disableMaskUnmask:x,alert:p,maskTransformer:b,onMask:f,onUnmask:S,onTryAgain:q,fullWidth:L})=>{const[T,R]=r.useState(u);r.useEffect((()=>{R(u)}),[u]);const C=()=>{switch("fail"===k&&q&&q(),T){case"masked":S&&S(),R("unmasked");break;case"unmasked":f&&f(),R("masked")}},E=()=>"string"!=typeof o?o:"masked"===T?l.StringHelper.maskValue(o,{maskChar:g,maskRange:h,unmaskRange:y,maskRegex:j,maskTransformer:b}):o,I=()=>{switch(k){case"fail":return e.jsxs(e.Fragment,{children:[e.jsx(d.ErrorIcon,{}),e.jsx(d.ErrorLabel,{children:"Error"}),e.jsxs(d.TryAgainLabel,{children:["Try again?",e.jsx(n.VisuallyHidden,{children:c})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(d.Spinner,{}),e.jsx(d.LoadingLabel,{children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[E(),e.jsx(d.IconContainer,{"aria-label":"masked"===T?`Display ${c}`:`Hide ${c}`,children:"masked"===T?e.jsx(a.EyeIcon,{"data-testid":"masked-icon"}):e.jsx(s.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})}};return e.jsxs(d.Container,{$widthStyle:m,$fullWidth:L,children:[e.jsx(i.FormLabel,{children:c}),"string"!=typeof o?o:T?x?e.jsx(t.Typography.BodyBL,{children:E()}):e.jsx(d.Clickable,{"data-testid":"clickable-label",onClick:C,"aria-busy":"loading"===k,"aria-live":"polite",type:"button","aria-label":l.StringHelper.getMaskedDescription(o,T,h),children:I()}):e.jsx(t.Typography.BodyBL,{children:o}),p&&e.jsx(d.StyledAlert,Object.assign({sizeType:"small"},p))]})};
+"use strict";var e=require("react/jsx-runtime"),a=require("@lifesg/react-icons/exclamation-triangle"),s=require("@lifesg/react-icons/eye"),r=require("@lifesg/react-icons/eye-slash"),i=require("react"),n=require("../alert/alert.js"),l=require("../form/form-label.js"),t=require("../shared/accessibility/index.js"),c=require("../shared/component-loading-spinner/component-loading-spinner.js"),d=require("../typography/index.js"),o=require("../util/string-helper.js"),m=require("./section-item.styles.js");exports.UneditableSectionItem=({label:u,value:g,displayWidth:k="full",maskState:h,maskLoadingState:p,maskChar:j="•",maskRange:x,unmaskRange:y,maskRegex:b,disableMaskUnmask:f,alert:q,maskTransformer:N,onMask:L,onUnmask:S,onTryAgain:T,fullWidth:R})=>{const[v,C]=i.useState(h);i.useEffect((()=>{C(h)}),[h]);const E=()=>{switch("fail"===p&&T&&T(),v){case"masked":S&&S(),C("unmasked");break;case"unmasked":L&&L(),C("masked")}},I=()=>"string"!=typeof g?g:"masked"===v?o.StringHelper.maskValue(g,{maskChar:j,maskRange:x,unmaskRange:y,maskRegex:b,maskTransformer:N}):g,w=()=>{switch(p){case"fail":return e.jsxs(e.Fragment,{children:[e.jsx(a.ExclamationTriangleIcon,{className:m.errorIcon}),e.jsx("span",{className:m.errorLabel,children:"Error"}),e.jsxs("span",{className:m.tryAgainLabel,children:["Try again?",e.jsx(t.VisuallyHidden,{children:u})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(c.ComponentLoadingSpinner,{className:m.spinner}),e.jsx("span",{className:m.loadingLabel,children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[I(),e.jsx("div",{className:m.iconContainer,"aria-label":"masked"===v?`Display ${u}`:`Hide ${u}`,children:"masked"===v?e.jsx(s.EyeIcon,{"data-testid":"masked-icon"}):e.jsx(r.EyeSlashIcon,{"data-testid":"unmasked-icon"})})]})}};return e.jsxs("li",{"data-width":k,"data-full-width":R,className:m.container,children:[e.jsx(l.FormLabel,{children:u}),"string"!=typeof g?g:v?f?e.jsx(d.Typography.BodyBL,{children:I()}):e.jsx("button",{className:m.clickable,"data-testid":"clickable-label",onClick:E,"aria-busy":"loading"===p,"aria-live":"polite",type:"button","aria-label":o.StringHelper.getMaskedDescription(g,v,x),children:w()}):e.jsx(d.Typography.BodyBL,{children:g}),q&&e.jsx(n.Alert,Object.assign({className:m.alert,sizeType:"small"},q))]})};
 //# sourceMappingURL=section-item.js.map