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

package/cjs/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../../src/typography/typography.tsx"],"sourcesContent":["import React, { RefObject } from \"react\";\nimport { IStyledComponent } from \"styled-components\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { TypographyLinkProps, TypographyProps } from \"./types\";\nimport {\n    HyperlinkBase,\n    StyledExternalIcon,\n    TypographyBase,\n} from \"./typography.styles\";\n\nexport namespace Typography {\n    const createHeading = (\n        tag: keyof JSX.IntrinsicElements,\n        textStyle: 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\n    export const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\n    export const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\n    export const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\n    export const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\n    export const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\n    export const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\n    const createBody = (textStyle: 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\n    export const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\n    export const BodyMD = createBody(\"body-md\", \"BodyMD\");\n    export const BodySM = createBody(\"body-sm\", \"BodySM\");\n    export const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\n    const createLinkComponent = (\n        textStyle: 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\n    export const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\n    export const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\n    export const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\n    export const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n}\n"],"names":["Typography","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":"6NAUiBA,QAAAA,gBAAAA,EAAjB,SAAiBA,GACb,MAAMC,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,EAGQL,EAAAyB,WAAaxB,EAAc,KAAM,cAAe,cAChDD,EAAA0B,UAAYzB,EAAc,KAAM,aAAc,aAC9CD,EAAA2B,UAAY1B,EAAc,KAAM,aAAc,aAC9CD,EAAA4B,UAAY3B,EAAc,KAAM,aAAc,aAC9CD,EAAA6B,UAAY5B,EAAc,KAAM,aAAc,aAC9CD,EAAA8B,UAAY7B,EAAc,KAAM,aAAc,aAE3D,MAAM8B,EAAa,CAAC5B,EAA+BC,KAC/C,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,EAGQhC,EAAAiC,OAASF,EAAW,gBAAiB,UACrC/B,EAAAkC,OAASH,EAAW,UAAW,UAC/B/B,EAAAmC,OAASJ,EAAW,UAAW,UAC/B/B,EAAAoC,OAASL,EAAW,UAAW,UAE5C,MAAMM,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,EAGQtC,EAAA8C,OAAST,EAAoB,gBAAiB,UAC9CrC,EAAA+C,OAASV,EAAoB,UAAW,UACxCrC,EAAAgD,OAASX,EAAoB,UAAW,UACxCrC,EAAAiD,OAASZ,EAAoB,UAAW,SACxD,CA/GD,CAAiBrC,QAAAA,aAAAA,mBAAU,CAAA"}
+{"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    isHeading: boolean\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                    isHeading ? styles.typographyHeader : styles.typographyBody,\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, true);\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, false);\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.typographyBody,\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","isHeading","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.typographyHeader","styles.typographyBody","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,EACAC,KAEA,MAAMC,EAAiBC,EAAAA,QAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,EAAMhB,OACVA,EAAMiB,SACNA,EAAQhB,UACRA,EAASR,OACTA,GAAMmB,EACHM,EAASC,SAAAP,EAPhB,6DAWA,MAAMQ,EAAa5B,EAAcC,GAC3B4B,EAAUX,EAAAA,QAAMY,OAAiC,MACjDC,EAAYC,EAAAA,UAAUH,EAASR,GAC/BY,EA9BU,EACpBR,EACAjB,EACAC,MACGgB,IAAahB,IAAcD,GA0BN0B,CAAgBT,EAAUjB,EAAQC,GAEtD0B,EAAAA,cAAcN,EAAgD,CAC1D,CAACO,EAAAA,OAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAGV,MAAMa,EAAU9B,EAAS,OAASgB,GAAUV,EAE5C,OACIyB,EAAAA,IAACD,EAAOE,OAAAC,OAAA,CACJpB,IAAKU,EACLT,UAAWoB,EAAAA,QACPC,EAAAA,eACA3B,EAAY4B,EAAAA,iBAA0BC,EAAAA,eACtC3C,EAA2BC,GAC3BE,EAA6BuB,GAC7BrB,EAA8BC,EAAQC,GACtCwB,GAAea,EAAAA,UACfxB,IAEAI,GAGhB,IAKA,OAFIT,EACFF,YAAc,cAAcA,IACvBE,CAAc,EAGnB8B,EAAgB,CAClBjC,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,GAAa,GAGhDiC,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,CAACnD,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,GAAa,GAGhDwC,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,CACxBxD,EACAY,KAEA,MAAM6C,EAAY1C,EAAAA,QAAMC,YACpB,SACIC,EAQAC,GARA,IAAApB,OACIA,EAAM4D,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,YAAWzC,UAC5BA,GAASF,EACN4C,EAAKrC,EAAAA,OAAAP,EANZ,+DAUA,MAAMQ,EAAa5B,EAAcC,GAEjC,OACIgE,EAAAA,KAAA,IAAAzB,OAAAC,OAAA,CACIpB,IAAKA,EACLC,UAAWoB,EAAAA,QACPC,EAAAA,eACAE,EAAAA,eACAqB,EAAAA,cACAhE,EAA2BC,GAC3BE,EAA6BuB,GACV,SAAnBmC,EACMI,EAAAA,YACAC,EAAAA,UACN9C,IAEA0C,EAAK,CAAAH,SAAA,CAERA,EACAC,GACGvB,EAAAA,IAAC8B,EAAAA,aAAY,CAAC/C,UAAWgD,EAAAA,kBAIzC,IAMJ,OAFIV,EACF7C,YAAc,cAAcA,IACvB6C,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("../theme/index.js"),l=require("./helper.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(t);const i=a.default.div`
-    ${e=>l.createTypographyStyles(e.$textStyle,e.$weight,e.$inline,e.$paragraph,e.$maxLines)}
-`,n=a.default.a`
-    ${e=>{var o;return t.css`
-        ${l.getTextStyle(e.$textStyle,e.$weight||"regular")}
-        color: ${r.Colour.hyperlink};
-        text-decoration: ${null!==(o=e.$underlineStyle)&&void 0!==o?o:"underline"};
-
-        &:hover,
-        &:active,
-        &:focus {
-            color: ${r.Colour["text-hover"]};
-        }
-    `}}
-`,u=a.default(e.ExternalIcon)`
-    height: 1lh;
-    width: 1em;
-    margin-left: 0.4em;
-    vertical-align: top;
-`;exports.HyperlinkBase=n,exports.StyledExternalIcon=u,exports.TypographyBase=i;
+"use strict";require("./typography-text.styles_1734x2k.css"),require("./typography.styles_1wd82dn.css");exports.displayBlock="d4n1hjq",exports.displayInline="d1cfdq56",exports.externalIcon="e1f7dy7t",exports.hyperlinkBase="hspw24h",exports.lineClamp="l1w2xa0l",exports.noUnderline="nlbpwo0",exports.paragraph="p1ydob6f",exports.tokens={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},exports.typographyBase="ts2ljtd",exports.typographyBody="t1ruq6ql",exports.typographyHeader="tu0nvfw",exports.underline="u3g791q";
 //# 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\";\nimport { Colour } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport { 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: 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: ${Colour.hyperlink};\n        text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n        &:hover,\n        &:active,\n        &:focus {\n            color: ${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: top;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"qOAuBO,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,OAAOC;2BACwB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAAA,OAAO;;KAEvB;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-variant: ${Font.Spec[\"font-variant\"]};\n    color: ${Colour.text};\n`;\n\nexport const typographyHeader = css`\n    font-family: ${Font.Spec[\"font-family-heading\"]};\n`;\n\nexport const typographyBody = css`\n    font-family: ${Font.Spec[\"font-family-body\"]};\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: top;\n`;\n"],"names":["typographyBase","maxLines"],"mappings":"iLAgCyB,gCALC,gCAqCD,iCAlBC,4BAJJ,+BAkBE,4BAvBF,0BA9BA,CAClBA,eAAgB,CACZC,SAAU,mEAIS,iCAUA,oCAJE,4BAqCP"}

package/cjs/typography/typography.styles_1wd82dn.css

@@ -0,0 +1,11 @@
+@layer fds{.ts2ljtd{--fds-internal-typography-base-maxLines:initial;font-variant:var(--fds-font-variant);color:var(--fds-colour-text);}
+.tu0nvfw{font-family:var(--fds-font-family-heading);}
+.t1ruq6ql{font-family:var(--fds-font-family-body);}
+.d1cfdq56{display:inline;margin-bottom:0;}
+.d4n1hjq{display:block;margin-bottom:0;}
+.p1ydob6f{display:block;margin-bottom:1.05em;}
+.l1w2xa0l{--fds-internal-typography-base-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-typography-base-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.hspw24h{color:var(--fds-colour-hyperlink);}.hspw24h:hover,.hspw24h:active,.hspw24h:focus{color:var(--fds-colour-text-hover);}
+.u3g791q{-webkit-text-decoration:underline;text-decoration:underline;}
+.nlbpwo0{-webkit-text-decoration:none;text-decoration:none;}
+.e1f7dy7t{height:1lh;width:1em;margin-left:0.4em;vertical-align:top;}}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/uneditable-section/index.ts"],"sourcesContent":["import { UneditableItemSection } from \"./item-section\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionBase } from \"./uneditable-section\";\n\nexport * from \"./types\";\nexport const UneditableSection = Object.assign(UneditableSectionBase, {\n    ItemSection: UneditableItemSection,\n    Item: UneditableSectionItem,\n});\n"],"names":["UneditableSection","Object","assign","UneditableSectionBase","ItemSection","UneditableItemSection","Item","UneditableSectionItem"],"mappings":"0HAKaA,EAAoBC,OAAOC,OAAOC,wBAAuB,CAClEC,YAAaC,EAAAA,sBACbC,KAAMC,EAAAA"}
+{"version":3,"file":"index.js","sources":["../../../src/uneditable-section/index.ts"],"sourcesContent":["import { UneditableItemSection } from \"./item-section\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionBase } from \"./uneditable-section\";\n\nexport * from \"./types\";\n\n// @catalog\n/**\n * A read-only summary section for displaying labeled field values.\n *\n * Use `UneditableSection` to present a group of non-editable field–value pairs\n * in a responsive grid layout\n *\n * Sub-components:\n * - `UneditableSection.Item` — a standalone labeled read-only field with optional masking.\n * - `UneditableSection.ItemSection` — a standalone grid list for composing items.\n * @keywords field values, form summary, read-only, review\n */\nexport const UneditableSection = Object.assign(UneditableSectionBase, {\n    /**\n     * A standalone grid list for rendering `UneditableSection.Item` elements\n     * outside the full section wrapper.\n     */\n    ItemSection: UneditableItemSection,\n    /** A standalone labeled read-only field with optional masking support. */\n    Item: UneditableSectionItem,\n});\n"],"names":["UneditableSection","Object","assign","UneditableSectionBase","ItemSection","UneditableItemSection","Item","UneditableSectionItem"],"mappings":"0HAkBaA,EAAoBC,OAAOC,OAAOC,wBAAuB,CAKlEC,YAAaC,EAAAA,sBAEbC,KAAMC,EAAAA"}

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\";\nimport { 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":"gOAIaA,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("../typography/typography.js"),t=require("../util/string-helper.js"),l=require("./section-item.styles.js"),d=require("../shared/accessibility/index.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?t.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(l.ErrorIcon,{}),e.jsx(l.ErrorLabel,{children:"Error"}),e.jsxs(l.TryAgainLabel,{children:["Try again?",e.jsx(d.VisuallyHidden,{children:c})]})]});case"loading":return e.jsxs(e.Fragment,{children:[e.jsx(l.Spinner,{}),e.jsx(l.LoadingLabel,{children:"Retrieving..."})]});default:return e.jsxs(e.Fragment,{children:[E(),e.jsx(l.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(l.Container,{$widthStyle:m,$fullWidth:L,children:[e.jsx(i.FormLabel,{children:c}),"string"!=typeof o?o:T?x?e.jsx(n.Typography.BodyBL,{children:E()}):e.jsx(l.Clickable,{"data-testid":"clickable-label",onClick:C,"aria-busy":"loading"===k,"aria-live":"polite",type:"button","aria-label":t.StringHelper.getMaskedDescription(o,T,h),children:I()}):e.jsx(n.Typography.BodyBL,{children:o}),p&&e.jsx(l.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/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

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

@@ -1 +1 @@
-{"version":3,"file":"section-item.js","sources":["../../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\nimport { FormLabel } from \"../form/form-label\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    Clickable,\n    Container,\n    ErrorIcon,\n    ErrorLabel,\n    IconContainer,\n    LoadingLabel,\n    Spinner,\n    StyledAlert,\n    TryAgainLabel,\n} from \"./section-item.styles\";\nimport {\n    UneditableSectionItemMaskState,\n    UneditableSectionItemProps,\n} from \"./types\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\n\nexport interface UneditableSectionItemComponentProps\n    extends UneditableSectionItemProps {\n    onMask?: (() => void) | undefined;\n    onUnmask?: (() => void) | undefined;\n    onTryAgain?: (() => void) | undefined;\n    fullWidth?: boolean | undefined;\n}\n\nexport const UneditableSectionItem = ({\n    label,\n    value,\n    displayWidth = \"full\",\n    maskState,\n    maskLoadingState,\n    maskChar = \"•\",\n    maskRange,\n    unmaskRange,\n    maskRegex,\n    disableMaskUnmask,\n    alert,\n    maskTransformer,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    fullWidth,\n}: UneditableSectionItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [displayMaskState, setMaskState] = useState<\n        UneditableSectionItemMaskState | undefined\n    >(maskState);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setMaskState(maskState);\n    }, [maskState]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleClickableClick = () => {\n        if (maskLoadingState === \"fail\") {\n            if (onTryAgain) onTryAgain();\n        }\n\n        switch (displayMaskState) {\n            case \"masked\": {\n                if (onUnmask) {\n                    onUnmask();\n                }\n                setMaskState(\"unmasked\");\n                break;\n            }\n            case \"unmasked\": {\n                if (onMask) {\n                    onMask();\n                }\n                setMaskState(\"masked\");\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        return displayMaskState === \"masked\"\n            ? StringHelper.maskValue(value, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMaskingState = () => {\n        switch (maskLoadingState) {\n            case \"fail\":\n                return (\n                    <>\n                        <ErrorIcon />\n                        <ErrorLabel>Error</ErrorLabel>\n                        <TryAgainLabel>\n                            Try again?\n                            <VisuallyHidden>{label}</VisuallyHidden>\n                        </TryAgainLabel>\n                    </>\n                );\n            case \"loading\":\n                return (\n                    <>\n                        <Spinner />\n                        <LoadingLabel>Retrieving...</LoadingLabel>\n                    </>\n                );\n            default:\n                return (\n                    <>\n                        {getValue()}\n                        <IconContainer\n                            aria-label={\n                                displayMaskState === \"masked\"\n                                    ? `Display ${label}`\n                                    : `Hide ${label}`\n                            }\n                        >\n                            {displayMaskState === \"masked\" ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </IconContainer>\n                    </>\n                );\n        }\n    };\n\n    const renderContent = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        if (!displayMaskState) {\n            return <Typography.BodyBL>{value}</Typography.BodyBL>;\n        }\n\n        if (disableMaskUnmask) {\n            return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n        }\n\n        return (\n            <Clickable\n                data-testid=\"clickable-label\"\n                onClick={handleClickableClick}\n                aria-busy={maskLoadingState === \"loading\"}\n                aria-live=\"polite\"\n                type=\"button\"\n                aria-label={StringHelper.getMaskedDescription(\n                    value,\n                    displayMaskState,\n                    maskRange\n                )}\n            >\n                {renderMaskingState()}\n            </Clickable>\n        );\n    };\n\n    return (\n        <Container $widthStyle={displayWidth} $fullWidth={fullWidth}>\n            <FormLabel>{label}</FormLabel>\n            {renderContent()}\n            {alert && <StyledAlert sizeType=\"small\" {...alert} />}\n        </Container>\n    );\n};\n"],"names":["label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_jsx","ErrorIcon","ErrorLabel","children","TryAgainLabel","VisuallyHidden","_Fragment","Spinner","LoadingLabel","IconContainer","EyeIcon","EyeSlashIcon","Container","$widthStyle","$fullWidth","FormLabel","Typography","BodyBL","Clickable","onClick","type","getMaskedDescription","StyledAlert","Object","assign","sizeType"],"mappings":"uXA+BqC,EACjCA,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBACAC,QACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAAAA,SAEvCf,GAKFgB,EAAAA,WAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAAA,aAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAA,2BACIC,EAAAA,IAACC,EAAAA,cACDD,EAAAA,IAACE,EAAAA,WAAU,CAAAC,SAAA,UACXJ,EAAAA,KAACK,EAAAA,cAAa,CAAAD,SAAA,CAAA,aAEVH,EAAAA,IAACK,EAAAA,eAAc,CAAAF,SAAE7B,UAIjC,IAAK,UACD,OACIyB,EAAAA,KAAAO,EAAAA,SAAA,CAAAH,SAAA,CACIH,EAAAA,IAACO,EAAAA,QAAO,CAAA,GACRP,EAAAA,IAACQ,EAAAA,aAAY,CAAAL,SAAA,qBAGzB,QACI,OACIJ,OAAAO,EAAAA,SAAA,CAAAH,SAAA,CACKR,IACDK,EAAAA,IAACS,EAAAA,cAAa,CAAA,aAEe,WAArBnB,EACM,WAAWhB,IACX,QAAQA,IAAO6B,SAGH,WAArBb,EACGU,MAACU,EAAAA,QAAO,CAAA,cAAa,gBAErBV,MAACW,EAAAA,aAAY,CAAA,cAAa,yBAuCtD,OACIZ,EAAAA,KAACa,EAAAA,UAAS,CAAAC,YAAcrC,EAAYsC,WAAczB,EAASc,SAAA,CACvDH,EAAAA,IAACe,YAAS,CAAAZ,SAAE7B,IAhCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOiB,EAAAA,IAACgB,EAAAA,WAAWC,iBAAQtB,MAI3BK,MAACkB,EAAAA,UAAS,CAAA,cACM,kBACZC,QAASzB,cACuB,YAArBhB,EAA8B,YAC/B,SACV0C,KAAK,sBACOxB,EAAAA,aAAayB,qBACrB9C,EACAe,EACAV,GACHuB,SAEAL,MApBEE,EAAAA,IAACgB,EAAAA,WAAWC,OAAM,CAAAd,SAAE5B,IA6B1BS,GAASgB,MAACsB,EAAAA,YAAWC,OAAAC,OAAA,CAACC,SAAS,SAAYzC,MACpC"}
+{"version":3,"file":"section-item.js","sources":["../../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n    UneditableSectionItemMaskState,\n    UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n    extends UneditableSectionItemProps {\n    onMask?: (() => void) | undefined;\n    onUnmask?: (() => void) | undefined;\n    onTryAgain?: (() => void) | undefined;\n    fullWidth?: boolean | undefined;\n}\n\nexport const UneditableSectionItem = ({\n    label,\n    value,\n    displayWidth = \"full\",\n    maskState,\n    maskLoadingState,\n    maskChar = \"•\",\n    maskRange,\n    unmaskRange,\n    maskRegex,\n    disableMaskUnmask,\n    alert,\n    maskTransformer,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    fullWidth,\n}: UneditableSectionItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [displayMaskState, setMaskState] = useState<\n        UneditableSectionItemMaskState | undefined\n    >(maskState);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setMaskState(maskState);\n    }, [maskState]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleClickableClick = () => {\n        if (maskLoadingState === \"fail\") {\n            if (onTryAgain) onTryAgain();\n        }\n\n        switch (displayMaskState) {\n            case \"masked\": {\n                if (onUnmask) {\n                    onUnmask();\n                }\n                setMaskState(\"unmasked\");\n                break;\n            }\n            case \"unmasked\": {\n                if (onMask) {\n                    onMask();\n                }\n                setMaskState(\"masked\");\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        return displayMaskState === \"masked\"\n            ? StringHelper.maskValue(value, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMaskingState = () => {\n        switch (maskLoadingState) {\n            case \"fail\":\n                return (\n                    <>\n                        <ExclamationTriangleIcon className={styles.errorIcon} />\n                        <span className={styles.errorLabel}>Error</span>\n                        <span className={styles.tryAgainLabel}>\n                            Try again?\n                            <VisuallyHidden>{label}</VisuallyHidden>\n                        </span>\n                    </>\n                );\n            case \"loading\":\n                return (\n                    <>\n                        <ComponentLoadingSpinner className={styles.spinner} />\n                        <span className={styles.loadingLabel}>\n                            Retrieving...\n                        </span>\n                    </>\n                );\n            default:\n                return (\n                    <>\n                        {getValue()}\n                        <div\n                            className={styles.iconContainer}\n                            aria-label={\n                                displayMaskState === \"masked\"\n                                    ? `Display ${label}`\n                                    : `Hide ${label}`\n                            }\n                        >\n                            {displayMaskState === \"masked\" ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </div>\n                    </>\n                );\n        }\n    };\n\n    const renderContent = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        if (!displayMaskState) {\n            return <Typography.BodyBL>{value}</Typography.BodyBL>;\n        }\n\n        if (disableMaskUnmask) {\n            return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n        }\n\n        return (\n            <button\n                className={styles.clickable}\n                data-testid=\"clickable-label\"\n                onClick={handleClickableClick}\n                aria-busy={maskLoadingState === \"loading\"}\n                aria-live=\"polite\"\n                type=\"button\"\n                aria-label={StringHelper.getMaskedDescription(\n                    value,\n                    displayMaskState,\n                    maskRange\n                )}\n            >\n                {renderMaskingState()}\n            </button>\n        );\n    };\n\n    return (\n        <li\n            data-width={displayWidth}\n            data-full-width={fullWidth}\n            className={styles.container}\n        >\n            <FormLabel>{label}</FormLabel>\n            {renderContent()}\n            {alert && (\n                <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n            )}\n        </li>\n    );\n};\n"],"names":["label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"giBAyBqC,EACjCA,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAAAA,SAEvCf,GAKFgB,EAAAA,WAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAAA,aAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACIC,EAAAA,IAACC,EAAAA,yBAAwBC,UAAWC,EAAAA,YACpCH,EAAAA,IAAA,OAAA,CAAME,UAAWE,EAAAA,WAAiBL,SAAA,UAClCF,EAAAA,KAAA,OAAA,CAAMK,UAAWG,EAAAA,cAAoBN,SAAA,CAAA,aAEjCC,EAAAA,IAACM,EAAAA,yBAAgBlC,UAIjC,IAAK,UACD,OACIyB,EAAAA,2BACIG,EAAAA,IAACO,EAAAA,yBAAwBL,UAAWM,EAAAA,UACpCR,MAAA,OAAA,CAAME,UAAWO,EAAAA,aAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAA,KAAAC,EAAAA,SAAA,CAAAC,SAAA,CACKN,IACDO,MAAA,MAAA,CACIE,UAAWQ,gBAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,MAACW,EAAAA,QAAO,CAAA,cAAa,gBAErBX,MAACY,EAAAA,aAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAAA,KAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAAA,UAAgBd,SAAA,CAE3BC,EAAAA,IAACc,EAAAA,UAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAAAA,IAACe,EAAAA,WAAWC,iBAAQvB,MAI3BO,MAAA,SAAA,CACIE,UAAWe,EAAAA,UAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAAA,aAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAAAA,IAACe,EAAAA,WAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAAAA,IAACqB,EAAAA,qBAAMnB,UAAWoB,EAAAA,MAAcC,SAAS,SAAYzC,MAExD"}

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

@@ -1,64 +1,2 @@
-"use strict";var e=require("@lifesg/react-icons/exclamation-triangle"),r=require("styled-components"),o=require("../alert/alert.js"),t=require("../shared/component-loading-spinner/component-loading-spinner.js"),n=require("../theme/index.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var i=l(r);const a=i.default.li`
-    display: flex;
-    flex-direction: column;
-
-    ${e=>{switch(e.$widthStyle){case"half":return r.css`
-                    grid-column: auto / span ${e.$fullWidth?1:4};
-                `;case"full":return r.css`
-                    grid-column: auto / span ${e.$fullWidth?2:8};
-                `}}}
-
-    ${n.MediaQuery.MaxWidth.lg} {
-        grid-column: 1 / -1;
-    }
-
-    overflow-wrap: break-word;
-`,s=i.default.div`
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    color: ${n.Colour["icon-primary"]};
-    margin-left: 0.5rem;
-
-    svg {
-        width: ${n.Font.Spec["body-size-baseline"]};
-        height: ${n.Font.Spec["body-size-baseline"]};
-    }
-`,d=i.default.button`
-    ${n.Font["body-baseline-regular"]}
-    color: ${n.Colour.text};
-    border: none;
-    background: transparent;
-    padding: 0;
-    display: flex;
-    cursor: pointer;
-    align-items: center;
-    overflow-wrap: anywhere;
-    text-align: left;
-
-    span {
-        overflow-wrap: anywhere;
-        text-align: left;
-    }
-`,c=i.default.span`
-    color: ${n.Colour["text-disabled"]};
-`,u=i.default(t.ComponentLoadingSpinner)`
-    margin-right: 0.5rem;
-    color: ${n.Colour["text-disabled"]};
-`,p=i.default(e.ExclamationTriangleIcon)`
-    color: ${n.Colour["icon-warning"]};
-    margin-right: 0.5rem;
-    height: ${n.Font.Spec["body-size-baseline"]};
-    width: ${n.Font.Spec["body-size-baseline"]};
-`,g=i.default.span`
-    color: ${n.Colour["text-warning"]};
-`,f=i.default.span`
-    ${n.Font["body-baseline-semibold"]}
-    color: ${n.Colour.hyperlink};
-    text-decoration: underline;
-    margin-left: 0.5rem;
-`,m=i.default(o.Alert)`
-    margin-top: 0.5rem;
-`;exports.Clickable=d,exports.Container=a,exports.ErrorIcon=p,exports.ErrorLabel=g,exports.IconContainer=s,exports.LoadingLabel=c,exports.Spinner=u,exports.StyledAlert=m,exports.TryAgainLabel=f;
+"use strict";require("./section-item.styles_mwx8ht.css");exports.alert="a1celal9",exports.clickable="c988p37",exports.container="cfqoxdt",exports.errorIcon="e13rb6hl",exports.errorLabel="e13pxbfu",exports.iconContainer="i6tvpcl",exports.loadingLabel="l1fg6lie",exports.spinner="s186v6u4",exports.tryAgainLabel="t1dzpnph";
 //# sourceMappingURL=section-item.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"section-item.styles.js","sources":["../../../src/uneditable-section/section-item.styles.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport styled, { css } from \"styled-components\";\nimport { Alert } from \"../alert\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Colour, Font, MediaQuery } from \"../theme\";\nimport { UneditableSectionItemDisplayWidth } from \"./types\";\n\n// =============================================================================\n// STYLING INTERFACES\n// =============================================================================\ninterface ContainerStyleProps {\n    $widthStyle: UneditableSectionItemDisplayWidth;\n    $fullWidth?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.li<ContainerStyleProps>`\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        switch (props.$widthStyle) {\n            case \"half\":\n                return css`\n                    grid-column: auto / span ${props.$fullWidth ? 1 : 4};\n                `;\n            case \"full\":\n                return css`\n                    grid-column: auto / span ${props.$fullWidth ? 2 : 8};\n                `;\n        }\n    }}\n\n    ${MediaQuery.MaxWidth.lg} {\n        grid-column: 1 / -1;\n    }\n\n    overflow-wrap: break-word;\n`;\n\nexport const IconContainer = styled.div`\n    display: flex;\n    height: 100%;\n    align-items: center;\n    justify-content: center;\n    color: ${Colour[\"icon-primary\"]};\n    margin-left: 0.5rem;\n\n    svg {\n        width: ${Font.Spec[\"body-size-baseline\"]};\n        height: ${Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n\nexport const Clickable = styled.button`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    border: none;\n    background: transparent;\n    padding: 0;\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    overflow-wrap: anywhere;\n    text-align: left;\n\n    span {\n        overflow-wrap: anywhere;\n        text-align: left;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const LoadingLabel = styled.span`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: 0.5rem;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const ErrorIcon = styled(ExclamationTriangleIcon)`\n    color: ${Colour[\"icon-warning\"]};\n    margin-right: 0.5rem;\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const ErrorLabel = styled.span`\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const TryAgainLabel = styled.span`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"hyperlink\"]};\n    text-decoration: underline;\n    margin-left: 0.5rem;\n`;\n\nexport const StyledAlert = styled(Alert)`\n    margin-top: 0.5rem;\n`;\n"],"names":["Container","styled","li","props","$widthStyle","css","$fullWidth","MediaQuery","MaxWidth","lg","IconContainer","div","Colour","Font","Spec","Clickable","button","LoadingLabel","span","Spinner","ComponentLoadingSpinner","ErrorIcon","ExclamationTriangleIcon","ErrorLabel","TryAgainLabel","StyledAlert","Alert"],"mappings":"qUAkBO,MAAMA,EAAYC,EAAAA,QAAOC,EAAuB;;;;MAIhDC,IACC,OAAQA,EAAMC,aACV,IAAK,OACD,OAAOC,KAAG;+CACqBF,EAAMG,WAAa,EAAI;kBAE1D,IAAK,OACD,OAAOD,KAAG;+CACqBF,EAAMG,WAAa,EAAI;;;MAKhEC,EAAAA,WAAWC,SAASC;;;;;EAObC,EAAgBT,EAAAA,QAAOU,GAAG;;;;;aAK1BC,EAAAA,OAAO;;;;iBAIHC,EAAAA,KAAKC,KAAK;kBACTD,EAAAA,KAAKC,KAAK;;EAIfC,EAAYd,EAAAA,QAAOe,MAAM;MAChCH,EAAAA,KAAK;aACED,EAAAA,OAAa;;;;;;;;;;;;;;EAmBbK,EAAehB,EAAAA,QAAOiB,IAAI;aAC1BN,EAAAA,OAAO;EAGPO,EAAUlB,EAAAA,QAAOmB,EAAAA,wBAAwB;;aAEzCR,EAAAA,OAAO;EAMPS,EAAYpB,EAAAA,QAAOqB,EAAAA,wBAAwB;aAC3CV,EAAAA,OAAO;;cAENC,EAAAA,KAAKC,KAAK;aACXD,EAAAA,KAAKC,KAAK;EAGVS,EAAatB,EAAAA,QAAOiB,IAAI;aACxBN,EAAAA,OAAO;EAGPY,EAAgBvB,EAAAA,QAAOiB,IAAI;MAClCL,EAAAA,KAAK;aACED,EAAAA,OAAkB;;;EAKlBa,EAAcxB,EAAAA,QAAOyB,EAAAA,MAAM;;"}
+{"version":3,"file":"section-item.styles.js","sources":["../../../src/uneditable-section/section-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: break-word;\n\n    &[data-width=\"half\"] {\n        grid-column: auto / span 4;\n\n        &[data-full-width=\"true\"] {\n            grid-column: auto / span 1;\n        }\n    }\n\n    &[data-width=\"full\"] {\n        grid-column: auto / span 8;\n\n        &[data-full-width=\"true\"] {\n            grid-column: auto / span 2;\n        }\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &[data-width=\"half\"],\n        &[data-width=\"full\"] {\n            grid-column: 1 / -1;\n\n            &[data-full-width=\"true\"] {\n                grid-column: 1 / -1;\n            }\n        }\n    }\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    height: 100%;\n    align-items: center;\n    justify-content: center;\n    color: ${Colour[\"icon-primary\"]};\n    margin-left: 0.5rem;\n\n    svg {\n        width: ${Font.Spec[\"body-size-baseline\"]};\n        height: ${Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n\nexport const clickable = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    border: none;\n    background: transparent;\n    padding: 0;\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    overflow-wrap: anywhere;\n    text-align: left;\n\n    span {\n        overflow-wrap: anywhere;\n        text-align: left;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingLabel = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const spinner = css`\n    margin-right: 0.5rem;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const errorIcon = css`\n    color: ${Colour[\"icon-warning\"]};\n    margin-right: 0.5rem;\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const errorLabel = css`\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const tryAgainLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"hyperlink\"]};\n    text-decoration: underline;\n    margin-left: 0.5rem;\n`;\n\nexport const alert = css`\n    margin-top: 0.5rem;\n`;\n"],"names":[],"mappings":"yGAyGkB,6BAnDI,4BA/CA,4BAgFA,8BAOC,iCAtDG,+BAmCD,2BAIL,iCAmBM"}

package/cjs/uneditable-section/section-item.styles_mwx8ht.css

@@ -0,0 +1,9 @@
+@layer fds{.cfqoxdt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;overflow-wrap:break-word;}.cfqoxdt[data-width="half"]{grid-column:auto/span 4;}.cfqoxdt[data-width="half"][data-full-width="true"]{grid-column:auto/span 1;}.cfqoxdt[data-width="full"]{grid-column:auto/span 8;}.cfqoxdt[data-width="full"][data-full-width="true"]{grid-column:auto/span 2;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"]{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="half"][data-full-width="true"],:where(body.fds-breakpoint-lg-max) .cfqoxdt[data-width="full"][data-full-width="true"]{-ms-grid-column:1/-1;grid-column:1/-1;}
+.i6tvpcl{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;height:100%;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;color:var(--fds-colour-icon-primary);margin-left:0.5rem;}.i6tvpcl svg{width:var(--fds-font-body-size-baseline);height:var(--fds-font-body-size-baseline);}
+.c988p37{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-regular);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);border:none;background:transparent;padding:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;cursor:pointer;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow-wrap:anywhere;text-align:left;}.c988p37 span{overflow-wrap:anywhere;text-align:left;}
+.l1fg6lie{color:var(--fds-colour-text-disabled);}
+.s186v6u4{margin-right:0.5rem;color:var(--fds-colour-text-disabled);}
+.e13rb6hl{color:var(--fds-colour-icon-warning);margin-right:0.5rem;height:var(--fds-font-body-size-baseline);width:var(--fds-font-body-size-baseline);}
+.e13pxbfu{color:var(--fds-colour-text-warning);}
+.t1dzpnph{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-hyperlink);-webkit-text-decoration:underline;text-decoration:underline;margin-left:0.5rem;}
+.a1celal9{margin-top:0.5rem;}}

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

@@ -1,2 +1,2 @@
-"use strict";var t=require("../_virtual/_tslib.js"),e=require("react/jsx-runtime"),i=require("./section-item.js"),n=require("./uneditable-section.styles.js");exports.UneditableSectionBase=r=>{var{items:s,title:o,description:c,topSection:l,bottomSection:a,children:d,background:h=!0,stretch:u,fullWidth:j,onMask:m,onUnmask:b,onTryAgain:g}=r,p=t.__rest(r,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain"]);const x=t=>()=>{m&&m(t)},k=t=>()=>{b&&b(t)},S=t=>()=>{g&&g(t)},$=()=>{if(s&&s.length>0){const t=s.map(((t,n)=>e.jsx(i.UneditableSectionItem,Object.assign({},t,{onMask:x(t),onUnmask:k(t),onTryAgain:S(t),fullWidth:j}),n)));return e.jsx(n.GridUl,{$stretch:u,$fullWidth:j,children:t})}return null},W=()=>d||e.jsxs(e.Fragment,{children:[o&&e.jsx(n.Title,{forwardedAs:"h2",weight:"semibold",$stretch:u,children:o}),c&&e.jsx(n.Description,{$stretch:u,children:c}),l&&e.jsx(n.CustomSection,{"data-id":"top-section",$stretch:u,children:l}),$(),a&&e.jsx(n.CustomSection,{"data-id":"bottom-section",$stretch:u,children:a})]});return j?e.jsx(n.FullWidthWrapper,Object.assign({$background:h},p,{children:W()})):e.jsx(n.Wrapper,Object.assign({$background:h},p,{type:"grid",children:W()}))};
+"use strict";var e=require("../_virtual/_tslib.js"),t=require("react/jsx-runtime"),i=require("clsx"),r=require("react"),n=require("../layout/index.js"),a=require("../typography/index.js"),s=require("./section-item.js"),c=require("./uneditable-section.styles.js");function l(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=l(i);const d=l(r).default.forwardRef(((i,r)=>{var{items:l,title:d,description:u,topSection:h,bottomSection:m,children:p,background:f=!0,stretch:g,fullWidth:j,onMask:y,onUnmask:b,onTryAgain:S,className:x}=i,k=e.__rest(i,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className"]);const N=e=>()=>{y&&y(e)},W=e=>()=>{b&&b(e)},q=e=>()=>{S&&S(e)},U=()=>{if(l&&l.length>0){const e=l.map(((e,i)=>t.jsx(s.UneditableSectionItem,Object.assign({},e,{onMask:N(e),onUnmask:W(e),onTryAgain:q(e),fullWidth:j}),i)));return t.jsx("ul",{className:o.default(c.gridUl,g&&c.columnWidthStretch,j&&c.gridUlFullWidth),children:e})}return null},v=()=>p||t.jsxs(t.Fragment,{children:[d&&t.jsx(a.Typography.HeadingSM,{as:"h2",weight:"semibold",className:o.default(c.title,g&&c.columnWidthStretch),children:d}),u&&t.jsx(a.Typography.BodyBL,{className:o.default(c.description,g&&c.columnWidthStretch),children:u}),h&&t.jsx("div",{"data-id":"top-section",className:o.default(c.customSection,g&&c.columnWidthStretch),children:h}),U(),m&&t.jsx("div",{"data-id":"bottom-section",className:o.default(c.customSection,g&&c.columnWidthStretch),children:m})]});return j?t.jsx("div",Object.assign({ref:r,className:o.default(f&&c.wrapperBackground,x)},k,{children:v()})):t.jsx(n.Layout.Content,Object.assign({ref:r,className:o.default(c.wrapper,f&&c.wrapperBackground,x)},k,{type:"grid",children:v()}))}));d.displayName="UneditableSection",exports.UneditableSectionBase=d;
 //# sourceMappingURL=uneditable-section.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.js","sources":["../../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import { UneditableSectionItem } from \"./section-item\";\nimport { UneditableSectionItemProps, UneditableSectionProps } from \"./types\";\nimport {\n    CustomSection,\n    Description,\n    FullWidthWrapper,\n    GridUl,\n    Title,\n    Wrapper,\n} from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n    items,\n    title,\n    description,\n    topSection,\n    bottomSection,\n    children,\n    background = true,\n    stretch,\n    fullWidth,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    ...otherProps\n}: UneditableSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <GridUl $stretch={stretch} $fullWidth={fullWidth}>\n                    {renderedItems}\n                </GridUl>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Title\n                        forwardedAs=\"h2\"\n                        weight=\"semibold\"\n                        $stretch={stretch}\n                    >\n                        {title}\n                    </Title>\n                )}\n                {description && (\n                    <Description $stretch={stretch}>{description}</Description>\n                )}\n                {topSection && (\n                    <CustomSection data-id=\"top-section\" $stretch={stretch}>\n                        {topSection}\n                    </CustomSection>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <CustomSection data-id=\"bottom-section\" $stretch={stretch}>\n                        {bottomSection}\n                    </CustomSection>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <FullWidthWrapper $background={background} {...otherProps}>\n                {renderChildren()}\n            </FullWidthWrapper>\n        );\n    }\n    return (\n        <Wrapper $background={background} {...otherProps} type=\"grid\">\n            {renderChildren()}\n        </Wrapper>\n    );\n};\n"],"names":["_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","GridUl","$stretch","$fullWidth","renderChildren","_jsxs","_Fragment","Title","forwardedAs","weight","Description","CustomSection","FullWidthWrapper","$background","Wrapper","type"],"mappings":"4LAWsCA,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,GAAUZ,EACPa,EAAUC,EAAAA,OAAAd,EAbqB,6IAkBlC,MAAMe,EAAkBC,GAAqC,KACrDN,GAAQA,EAAOM,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDL,GAAUA,EAASK,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDJ,GAAYA,EAAWI,EAAK,EAM9BG,EAAc,KAChB,GAAIlB,GAASA,EAAMmB,OAAS,EAAG,CAC3B,MAAMC,EAAgBpB,EAAMqB,KAAI,CAACN,EAAMO,IAE/BC,EAAAA,IAACC,wBAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRN,OAAQK,EAAeC,GACvBL,SAAUM,EAAiBD,GAC3BJ,WAAYM,EAAeF,GAC3BP,UAAWA,IALNc,KAUjB,OACIC,EAAAA,IAACI,SAAM,CAAAC,SAAWrB,EAAOsB,WAAcrB,EAASH,SAC3Ce,GAGb,CAEA,OAAO,IAAI,EAGTU,EAAiB,IACfzB,GAKA0B,OAAAC,EAAAA,SAAA,CAAA3B,SAAA,CACKJ,GACGsB,MAACU,EAAAA,MAAK,CACFC,YAAY,KACZC,OAAO,WAAUP,SACPrB,EAAOF,SAEhBJ,IAGRC,GACGqB,MAACa,EAAAA,YAAW,CAAAR,SAAWrB,EAAOF,SAAGH,IAEpCC,GACGoB,EAAAA,IAACc,EAAAA,cAAa,CAAA,UAAS,cAAaT,SAAWrB,EAAOF,SACjDF,IAGRe,IACAd,GACGmB,EAAAA,IAACc,2BAAsB,iBAAgBT,SAAWrB,EAAOF,SACpDD,OAOrB,OAAII,EAEIe,EAAAA,IAACe,EAAAA,iBAAgBb,OAAAC,OAAA,CAAAa,YAAcjC,GAAgBM,EAAU,CAAAP,SACpDyB,OAKTP,EAAAA,IAACiB,EAAAA,QAAOf,OAAAC,OAAA,CAAAa,YAAcjC,GAAgBM,EAAU,CAAE6B,KAAK,OAAMpC,SACxDyB,MACK"}
+{"version":3,"file":"uneditable-section.js","sources":["../../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nconst Component = (\n    {\n        items,\n        title,\n        description,\n        topSection,\n        bottomSection,\n        children,\n        background = true,\n        stretch,\n        fullWidth,\n        onMask,\n        onUnmask,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: UneditableSectionProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                ref={ref}\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            ref={ref}\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n\nexport const UneditableSectionBase = React.forwardRef(Component);\n\n(UneditableSectionBase as NamedExoticComponent).displayName =\n    \"UneditableSection\";\n"],"names":["UneditableSectionBase","React","forwardRef","_a","ref","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type","displayName"],"mappings":"0VAaA,MA0JaA,OAAwBC,QAAMC,YA1JzB,CACdC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASd,EACNe,EAAUC,EAAAA,OAAAhB,EAdjB,yJAqBA,MAAMiB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAAAA,IAACC,wBAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAAA,IAAA,KAAA,CACIZ,UAAWgB,EAAAA,QACPC,EAAAA,OACAtB,GAAWuB,EAAAA,mBACXtB,GAAauB,EAAAA,iBAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAA,KAAAC,EAAAA,SAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAAAA,IAACW,EAAAA,WAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EAAAA,QACPW,EAAAA,MACAhC,GAAWuB,EAAAA,oBACdzB,SAEAJ,IAGRC,GACGsB,MAACW,EAAAA,WAAWK,OAAM,CACd5B,UAAWgB,EAAAA,QACPa,EAAAA,YACAlC,GAAWuB,EAAAA,6BAGd5B,IAGRC,GACGqB,EAAAA,IAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAAA,IAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAD,OAOrB,OAAII,EAEIgB,EAAAA,IAAA,MAAAE,OAAAC,OAAA,CACI5B,IAAKA,EACLa,UAAWgB,EAAAA,QACPtB,GAAcqC,EAAAA,kBACd/B,IAEAC,EAAU,CAAAR,SAEb2B,OAKTR,EAAAA,IAACoB,SAAOC,uBACJ9C,IAAKA,EACLa,UAAWgB,UACPkB,EAAAA,QACAxC,GAAcqC,oBACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY,IAMxBrC,EAA+CqD,YAC5C"}

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

@@ -1,40 +1,2 @@
-"use strict";var r=require("styled-components"),e=require("../layout/index.js"),t=require("../theme/index.js"),a=require("../typography/typography.js");function o(r){return r&&"object"==typeof r&&"default"in r?r:{default:r}}var n=o(r);const d=r.css`
-    grid-column: ${r=>r.$stretch?"1 / -1":"span 8"};
-
-    ${t.MediaQuery.MaxWidth.sm} {
-        grid-column: 1 / -1;
-    }
-`,i=n.default(e.Layout.Content)`
-    background: ${({$background:r})=>r?t.Colour["bg-strong"]:"transparent"};
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-`,u=n.default.div`
-    background: ${({$background:r})=>r?t.Colour["bg-strong"]:"transparent"};
-`,p=n.default(a.Typography.HeadingSM)`
-    margin-bottom: 1rem;
-    ${d}
-`,m=n.default(a.Typography.BodyBL)`
-    margin-bottom: 2rem;
-    ${d}
-`,l=n.default.div`
-    ${d}
-`,s=n.default.ul`
-    ${d}
-    column-gap: 2rem;
-    row-gap: 2rem;
-    display: grid;
-    grid-template-columns: ${({$fullWidth:r})=>r?"repeat(2, minmax(0, 1fr))":"repeat(8, minmax(0, 1fr))"};
-
-    ${t.MediaQuery.MaxWidth.lg} {
-        column-gap: 1.5rem;
-    }
-
-    ${t.MediaQuery.MaxWidth.sm} {
-        column-gap: 1rem;
-    }
-
-    &:not(:last-child) {
-        margin-bottom: 2rem;
-    }
-`;exports.CustomSection=l,exports.Description=m,exports.FullWidthWrapper=u,exports.GridUl=s,exports.Title=p,exports.Wrapper=i;
+"use strict";require("./uneditable-section.styles_aj9zun.css");exports.columnWidthStretch="cd0nwth",exports.customSection="ctukz41",exports.description="dkpvxbb",exports.gridUl="g11duom5",exports.gridUlFullWidth="gc97tp4",exports.title="t29kg6u",exports.wrapper="wbsp4gm",exports.wrapperBackground="w3q0cqh";
 //# sourceMappingURL=uneditable-section.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.styles.js","sources":["../../../src/uneditable-section/uneditable-section.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Layout } from \"../layout\";\nimport { Colour, MediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface WrapperStyleProps {\n    $background: boolean;\n}\n\ninterface ContentStyleProps {\n    $stretch: boolean | undefined;\n}\n\ninterface GridStyleProps extends ContentStyleProps {\n    $fullWidth?: boolean | undefined;\n}\n// =============================================================================\n// STYLING\n// =============================================================================\nconst columnWidthStyle = css<ContentStyleProps>`\n    grid-column: ${(props) => (props.$stretch ? \"1 / -1\" : \"span 8\")};\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: 1 / -1;\n    }\n`;\n\nexport const Wrapper = styled(Layout.Content)<WrapperStyleProps>`\n    background: ${({ $background }) =>\n        $background ? Colour[\"bg-strong\"] : \"transparent\"};\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n`;\n\nexport const FullWidthWrapper = styled.div<WrapperStyleProps>`\n    background: ${({ $background }) =>\n        $background ? Colour[\"bg-strong\"] : \"transparent\"};\n`;\n\nexport const Title = styled(Typography.HeadingSM)<ContentStyleProps>`\n    margin-bottom: 1rem;\n    ${columnWidthStyle}\n`;\n\nexport const Description = styled(Typography.BodyBL)<ContentStyleProps>`\n    margin-bottom: 2rem;\n    ${columnWidthStyle}\n`;\n\nexport const CustomSection = styled.div<ContentStyleProps>`\n    ${columnWidthStyle}\n`;\n\nexport const GridUl = styled.ul<GridStyleProps>`\n    ${columnWidthStyle}\n    column-gap: 2rem;\n    row-gap: 2rem;\n    display: grid;\n    grid-template-columns: ${({ $fullWidth }) =>\n        $fullWidth ? \"repeat(2, minmax(0, 1fr))\" : \"repeat(8, minmax(0, 1fr))\"};\n\n    ${MediaQuery.MaxWidth.lg} {\n        column-gap: 1.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        column-gap: 1rem;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: 2rem;\n    }\n`;\n"],"names":["columnWidthStyle","css","props","$stretch","MediaQuery","MaxWidth","sm","Wrapper","styled","Layout","Content","$background","Colour","FullWidthWrapper","div","Title","Typography","HeadingSM","Description","BodyBL","CustomSection","GridUl","ul","$fullWidth","lg"],"mappings":"2OAsBA,MAAMA,EAAmBC,EAAAA,GAAsB;mBAC3BC,GAAWA,EAAMC,SAAW,SAAW;;MAErDC,EAAAA,WAAWC,SAASC;;;EAKbC,EAAUC,EAAAA,QAAOC,SAAOC,QAA2B;kBAC9C,EAAGC,iBACbA,EAAcC,EAAAA,OAAO,aAAe;;;EAK/BC,EAAmBL,EAAAA,QAAOM,GAAsB;kBAC3C,EAAGH,iBACbA,EAAcC,EAAAA,OAAO,aAAe;EAG/BG,EAAQP,EAAAA,QAAOQ,aAAWC,UAA6B;;MAE9DjB;EAGOkB,EAAcV,EAAAA,QAAOQ,aAAWG,OAA0B;;MAEjEnB;EAGOoB,EAAgBZ,EAAAA,QAAOM,GAAsB;MACpDd;EAGOqB,EAASb,EAAAA,QAAOc,EAAkB;MACzCtB;;;;6BAIuB,EAAGuB,gBACxBA,EAAa,4BAA8B;;MAE7CnB,EAAAA,WAAWC,SAASmB;;;;MAIpBpB,EAAAA,WAAWC,SAASC;;;;;;;"}
+{"version":3,"file":"uneditable-section.styles.js","sources":["../../../src/uneditable-section/uneditable-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst columnWidthBase = `\n    grid-column: span 8;\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: 1 / -1;\n    }\n`;\n\nexport const columnWidthStretch = css`\n    grid-column: 1 / -1;\n`;\n\nexport const wrapper = css`\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n`;\n\nexport const wrapperBackground = css`\n    background: ${Colour[\"bg-strong\"]};\n`;\n\nexport const title = css`\n    margin-bottom: 1rem;\n    ${columnWidthBase}\n`;\n\nexport const description = css`\n    margin-bottom: 2rem;\n    ${columnWidthBase}\n`;\n\nexport const customSection = css`\n    ${columnWidthBase}\n`;\n\nexport const gridUl = css`\n    ${columnWidthBase}\n    column-gap: 2rem;\n    row-gap: 2rem;\n    display: grid;\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n\n    ${MediaQuery.MaxWidth.lg} {\n        column-gap: 1.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        column-gap: 1rem;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: 2rem;\n    }\n`;\n\nexport const gridUlFullWidth = css`\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n`;\n"],"names":[],"mappings":"4HAe+B,gCAuBL,8BALF,yBASL,mCAoBS,wBAlCV,0BATE,oCAKU"}

package/cjs/uneditable-section/uneditable-section.styles_aj9zun.css

@@ -0,0 +1,8 @@
+@layer fds{.cd0nwth{-ms-grid-column:1/-1;grid-column:1/-1;}
+.wbsp4gm{padding-top:2rem;padding-bottom:2rem;}
+.w3q0cqh{background:var(--fds-colour-bg-strong);}
+.t29kg6u{margin-bottom:1rem;grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .t29kg6u{-ms-grid-column:1/-1;grid-column:1/-1;}
+.dkpvxbb{margin-bottom:2rem;grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .dkpvxbb{-ms-grid-column:1/-1;grid-column:1/-1;}
+.ctukz41{grid-column:span 8;}:where(body.fds-breakpoint-sm-max) .ctukz41{-ms-grid-column:1/-1;grid-column:1/-1;}
+.g11duom5{grid-column:span 8;-webkit-column-gap:2rem;column-gap:2rem;row-gap:2rem;display:-ms-grid;display:grid;-ms-grid-columns:repeat(8, minmax(0, 1fr));grid-template-columns:repeat(8, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .g11duom5{-ms-grid-column:1/-1;grid-column:1/-1;}:where(body.fds-breakpoint-lg-max) .g11duom5{-webkit-column-gap:1.5rem;column-gap:1.5rem;}:where(body.fds-breakpoint-sm-max) .g11duom5{-webkit-column-gap:1rem;column-gap:1rem;}.g11duom5:not(:last-child){margin-bottom:2rem;}
+.gc97tp4{-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .gc97tp4{-ms-grid-columns:repeat(1, minmax(0, 1fr));grid-template-columns:repeat(1, minmax(0, 1fr));}}

package/cjs/unit-number/unit-number-input.js

@@ -1,2 +1,2 @@
-"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("react"),n=require("../shared/accessibility/index.js"),a=require("../shared/input-wrapper/input-wrapper.js");require("../util/calendar-helper.js"),require("../util/date-helper.js"),require("../util/date-input-helper.js");var i=require("../util/simple-id-generator.js"),l=require("../util/string-helper.js");require("@react-aria/live-announcer");var u=require("../util/use-next-input-state.js"),o=require("./unit-number-input.style.js");const s="Invalid unit number";exports.UnitNumberInput=d=>{var{disabled:c,error:p,value:f,onChange:b,onBlur:h,onChangeRaw:y,onBlurRaw:j,readOnly:x,placeholder:g="00-8888",autoComplete:m,"aria-labelledby":v,"aria-describedby":C,"aria-invalid":I}=d,q=e.__rest(d,["disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","aria-labelledby","aria-describedby","aria-invalid"]);const[R,$]=t.useState(""),[O,B]=t.useState(""),[w,H]=t.useState("none"),V=i.useId(),k=`${V}-floor-label`,L=`${V}-unit-label`,S=`${V}-live-message`,U=t.useRef(null),D=t.useRef(null),N=t.useRef(null),A=t.useRef(R),E=t.useRef(O),F=t.useRef(w),_=e=>e.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g,""),T=u.useNextInputState({ref:D,formatter:_}),Z=u.useNextInputState({ref:N,formatter:_}),P=t.useMemo((()=>{let e="";const r=ae("Hash",R),t=ae("Dash",O);switch(w){case"floor":e=r;break;case"unit":e=R?[r,t].join(" "):t;break;default:e=""}return e}),[w,R,O]),z=e=>{A.current=e,$(e)},K=e=>{E.current=e,B(e)},M=e=>{F.current=e,H(e)};t.useEffect((()=>{"floor"===w&&3===R.length&&N.current&&N.current.focus()}),[R]),t.useEffect((()=>{Y(f)}),[f]);const W=e=>{M(e.target.name),e.target.select()},G=e=>{const r=e.target.name,t=e.target.value,n=X(t);"floor"===r?(z(n),n!==R&&ee(n,r)):"unit"===r&&(K(n),n!==O&&ee(n,r))},J=e=>{const r=e.target.name;if("floor"===r){const e=T();if(!e)return;const{nextValue:t,updateCaretPosition:n}=e;n(),z(t),ee(t,r)}else if("unit"===r){const e=Z();if(!e)return;const{nextValue:t,updateCaretPosition:n}=e;n(),K(t),ee(t,r)}},Q=e=>{var r;"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===w&&0===O.length&&(null===(r=D.current)||void 0===r||r.focus())},X=e=>/^[0-9]$/.test(e)?l.StringHelper.padValue(e,!0):e.toLocaleUpperCase(),Y=e=>{if(e!==s)if(void 0===e||0===e.length)z(""),K("");else{const r=e.split("-");if(2===r.length){const e=r[0],t=r[1];z("floor"===w?e:X(e)),K("unit"===w?t:X(t))}}},ee=(e,r)=>{if(!b&&!y)return;const t={floor:A.current,unit:E.current};if(t[r]=e,b){const e=te(t);b(e)}y&&y([t.floor,t.unit])},re=()=>{if(!h&&!j)return;const e={floor:X(A.current),unit:X(E.current)};if(h){const r=te(e);h(r)}j&&j([e.floor,e.unit])},te=e=>{const r=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?r.join("-"):r.every((e=>""===e))?"":s},ne=e=>e.split("-");function ae(e,r){return r?`${e} ${Array.from(r).join(" ")}`:""}return r.jsxs(a.InputWrapper,Object.assign({},q,{ref:U,onClick:()=>{"none"===w&&D.current&&D.current.focus()},$disabled:c,$error:p,$readOnly:x,tabIndex:-1,onBlur:e=>{U.current&&U.current.contains(e.relatedTarget)||"none"!==F.current&&(M("none"),re())},children:[r.jsx(o.HashContainer,{"data-testid":"addon",$disabled:c,$readOnly:x,children:"#"}),x&&f?(e=>{const t=e.split("-"),a=[ae("Hash",t[0]),ae("Dash",t[1])].join(" ");return r.jsxs(o.ReadOnlyContainer,{"data-testid":"readonly-display",tabIndex:0,role:"textbox","aria-readonly":!0,"aria-labelledby":v,"aria-describedby":C,"aria-invalid":I,children:[r.jsx(o.ReadOnlyLabel,{children:t[0]}),r.jsx(o.UnitNumberDivider,{children:"-"}),r.jsx(o.ReadOnlyLabel,{children:t[1]}),r.jsx(n.VisuallyHidden,{children:a})]})})(f):r.jsxs(r.Fragment,{children:[r.jsx(o.FloorInput,{name:"floor",maxLength:3,value:R,ref:D,onFocus:W,onBlur:G,onChange:J,disabled:c,readOnly:x,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-labelledby":n.concatIds(v,k),"aria-describedby":n.concatIds(C,S),"aria-invalid":I,placeholder:"floor"!==w||x||c?ne(g)[0]:"",autoComplete:m,styleType:"no-border"}),r.jsx(n.VisuallyHidden,{"aria-hidden":!0,id:k,children:"Enter floor number"}),r.jsx(o.UnitNumberDivider,{$inactive:0===R.length,children:"-"}),r.jsx(o.UnitInput,{name:"unit",maxLength:5,value:O,ref:N,onFocus:W,onBlur:G,onChange:J,onKeyDown:Q,disabled:c,readOnly:x,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-labelledby":n.concatIds(v,L),"aria-describedby":n.concatIds(C,S),"aria-invalid":I,placeholder:"unit"!==w||x||c?ne(g)[1]:"",autoComplete:m,styleType:"no-border"}),r.jsx(n.VisuallyHidden,{"aria-hidden":!0,id:L,children:"Enter unit number"}),r.jsx(n.VisuallyHidden,{id:S,"aria-live":"polite",children:P})]})]}))};
+"use strict";var e=require("../_virtual/_tslib.js"),r=require("react/jsx-runtime"),t=require("clsx"),a=require("react"),n=require("../input/input.js"),i=require("../input-group/input-group.styles.js"),l=require("../shared/accessibility/index.js"),u=require("../shared/input-wrapper/input-wrapper.js"),s=require("../typography/index.js");require("../util/calendar-helper.js"),require("../external/dayjs/dayjs.min.js");var o=require("../util/simple-id-generator.js"),d=require("../util/string-helper.js");require("@react-aria/live-announcer");var c=require("../util/use-next-input-state.js"),p=require("./unit-number-input.styles.js");function f(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var y=f(t);const h="Invalid unit number";exports.UnitNumberInput=t=>{var{disabled:f,error:b,value:m,onChange:g,onBlur:j,onChangeRaw:x,onBlurRaw:v,readOnly:C,placeholder:I="00-8888",autoComplete:B,"aria-labelledby":q,"aria-describedby":N,"aria-invalid":R,className:w}=t,L=e.__rest(t,["disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","aria-labelledby","aria-describedby","aria-invalid","className"]);const[H,O]=a.useState(""),[T,V]=a.useState(""),[k,D]=a.useState("none"),S=o.useId(),$=`${S}-floor-label`,A=`${S}-unit-label`,E=`${S}-live-message`,_=a.useRef(null),F=a.useRef(null),U=a.useRef(null),Z=a.useRef(H),P=a.useRef(T),z=a.useRef(k),K=e=>e.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g,""),M=c.useNextInputState({ref:F,formatter:K}),W=c.useNextInputState({ref:U,formatter:K}),G=a.useMemo((()=>{let e="";const r=oe("Hash",H),t=oe("Dash",T);switch(k){case"floor":e=r;break;case"unit":e=H?[r,t].join(" "):t;break;default:e=""}return e}),[k,H,T]),J=e=>{Z.current=e,O(e)},Q=e=>{P.current=e,V(e)},X=e=>{z.current=e,D(e)};a.useEffect((()=>{"floor"===k&&3===H.length&&U.current&&U.current.focus()}),[H]),a.useEffect((()=>{ne(m)}),[m]);const Y=e=>{X(e.target.name),e.target.select()},ee=e=>{const r=e.target.name,t=e.target.value,a=ae(t);"floor"===r?(J(a),a!==H&&ie(a,r)):"unit"===r&&(Q(a),a!==T&&ie(a,r))},re=e=>{const r=e.target.name;if("floor"===r){const e=M();if(!e)return;const{nextValue:t,updateCaretPosition:a}=e;a(),J(t),ie(t,r)}else if("unit"===r){const e=W();if(!e)return;const{nextValue:t,updateCaretPosition:a}=e;a(),Q(t),ie(t,r)}},te=e=>{var r;"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===k&&0===T.length&&(null===(r=F.current)||void 0===r||r.focus())},ae=e=>/^[0-9]$/.test(e)?d.StringHelper.padValue(e,!0):e.toLocaleUpperCase(),ne=e=>{if(e!==h)if(void 0===e||0===e.length)J(""),Q("");else{const r=e.split("-");if(2===r.length){const e=r[0],t=r[1];J("floor"===k?e:ae(e)),Q("unit"===k?t:ae(t))}}},ie=(e,r)=>{if(!g&&!x)return;const t={floor:Z.current,unit:P.current};if(t[r]=e,g){const e=ue(t);g(e)}x&&x([t.floor,t.unit])},le=()=>{if(!j&&!v)return;const e={floor:ae(Z.current),unit:ae(P.current)};if(j){const r=ue(e);j(r)}v&&v([e.floor,e.unit])},ue=e=>{const r=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?r.join("-"):r.every((e=>""===e))?"":h},se=e=>e.split("-");function oe(e,r){return r?`${e} ${Array.from(r).join(" ")}`:""}return r.jsxs(u.InputWrapper,Object.assign({},L,{ref:_,onClick:()=>{"none"===k&&F.current&&F.current.focus()},disabled:f,error:b,readOnly:C,tabIndex:-1,onBlur:e=>{_.current&&_.current.contains(e.relatedTarget)||"none"!==z.current&&(X("none"),le())},className:w,children:[r.jsx("div",{"data-testid":"addon",className:y.default(p.hashContainer,i.labelAddonContainer),"data-disabled":f,"data-read-only":C,children:"#"}),C&&m?(e=>{const t=e.split("-"),a=[oe("Hash",t[0]),oe("Dash",t[1])].join(" ");return r.jsxs("div",{"data-testid":"readonly-display",tabIndex:0,role:"textbox","aria-readonly":!0,"aria-labelledby":q,"aria-describedby":N,"aria-invalid":R,className:p.readOnlyContainer,children:[r.jsx(s.Typography.BodyBL,{children:t[0]}),r.jsx(s.Typography.BodyBL,{className:p.unitNumberDivider,children:"-"}),r.jsx(s.Typography.BodyBL,{children:t[1]}),r.jsx(l.VisuallyHidden,{children:a})]})})(m):r.jsxs(r.Fragment,{children:[r.jsx(n.Input,{name:"floor",maxLength:3,value:H,ref:F,onFocus:Y,onBlur:ee,onChange:re,disabled:f,readOnly:C,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-labelledby":l.concatIds(q,$),"aria-describedby":l.concatIds(N,E),"aria-invalid":R,placeholder:"floor"!==k||C||f?se(I)[0]:"",autoComplete:B,styleType:"no-border",className:y.default(p.input,p.floorInput)}),r.jsx(l.VisuallyHidden,{"aria-hidden":!0,id:$,children:"Enter floor number"}),r.jsx(s.Typography.BodyBL,{className:y.default(p.unitNumberDivider,0===H.length&&p.unitNumberDividerInactive),children:"-"}),r.jsx(n.Input,{name:"unit",maxLength:5,value:T,ref:U,onFocus:Y,onBlur:ee,onChange:re,onKeyDown:te,disabled:f,readOnly:C,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-labelledby":l.concatIds(q,A),"aria-describedby":l.concatIds(N,E),"aria-invalid":R,placeholder:"unit"!==k||C||f?se(I)[1]:"",autoComplete:B,styleType:"no-border",className:y.default(p.input,p.floorInput,p.unitInput)}),r.jsx(l.VisuallyHidden,{"aria-hidden":!0,id:A,children:"Enter unit number"}),r.jsx(l.VisuallyHidden,{id:E,"aria-live":"polite",children:G})]})]}))};
 //# sourceMappingURL=unit-number-input.js.map