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

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\";\n\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\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 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                        <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":"kXAgCqC,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":"qhBAyBqC,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("../v3_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.V3_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.V3_Colour["icon-primary"]};
-    margin-left: 0.5rem;
-
-    svg {
-        width: ${n.V3_Font.Spec["body-size-baseline"]};
-        height: ${n.V3_Font.Spec["body-size-baseline"]};
-    }
-`,d=i.default.button`
-    ${n.V3_Font["body-baseline-regular"]}
-    color: ${n.V3_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.V3_Colour["text-disabled"]};
-`,u=i.default(t.ComponentLoadingSpinner)`
-    margin-right: 0.5rem;
-    color: ${n.V3_Colour["text-disabled"]};
-`,p=i.default(e.ExclamationTriangleIcon)`
-    color: ${n.V3_Colour["icon-warning"]};
-    margin-right: 0.5rem;
-    height: ${n.V3_Font.Spec["body-size-baseline"]};
-    width: ${n.V3_Font.Spec["body-size-baseline"]};
-`,g=i.default.span`
-    color: ${n.V3_Colour["text-warning"]};
-`,f=i.default.span`
-    ${n.V3_Font["body-baseline-semibold"]}
-    color: ${n.V3_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_1dfjzc4.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\";\n\nimport { Alert } from \"../alert\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { V3_Colour, V3_Font, V3_MediaQuery } from \"../v3_theme\";\nimport type { 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    ${V3_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: ${V3_Colour[\"icon-primary\"]};\n    margin-left: 0.5rem;\n\n    svg {\n        width: ${V3_Font.Spec[\"body-size-baseline\"]};\n        height: ${V3_Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n\nexport const Clickable = styled.button`\n    ${V3_Font[\"body-baseline-regular\"]}\n    color: ${V3_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: ${V3_Colour[\"text-disabled\"]};\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: 0.5rem;\n    color: ${V3_Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const ErrorIcon = styled(ExclamationTriangleIcon)`\n    color: ${V3_Colour[\"icon-warning\"]};\n    margin-right: 0.5rem;\n    height: ${V3_Font.Spec[\"body-size-baseline\"]};\n    width: ${V3_Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const ErrorLabel = styled.span`\n    color: ${V3_Colour[\"text-warning\"]};\n`;\n\nexport const TryAgainLabel = styled.span`\n    ${V3_Font[\"body-baseline-semibold\"]}\n    color: ${V3_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","V3_MediaQuery","MaxWidth","lg","IconContainer","div","V3_Colour","V3_Font","Spec","Clickable","button","LoadingLabel","span","Spinner","ComponentLoadingSpinner","ErrorIcon","ExclamationTriangleIcon","ErrorLabel","TryAgainLabel","StyledAlert","Alert"],"mappings":"wUAmBO,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,cAAcC,SAASC;;;;;EAOhBC,EAAgBT,EAAAA,QAAOU,GAAG;;;;;aAK1BC,EAAAA,UAAU;;;;iBAINC,EAAAA,QAAQC,KAAK;kBACZD,EAAAA,QAAQC,KAAK;;EAIlBC,EAAYd,EAAAA,QAAOe,MAAM;MAChCH,EAAAA,QAAQ;aACDD,EAAAA,UAAgB;;;;;;;;;;;;;;EAmBhBK,EAAehB,EAAAA,QAAOiB,IAAI;aAC1BN,EAAAA,UAAU;EAGVO,EAAUlB,EAAAA,QAAOmB,EAAAA,wBAAwB;;aAEzCR,EAAAA,UAAU;EAMVS,EAAYpB,EAAAA,QAAOqB,EAAAA,wBAAwB;aAC3CV,EAAAA,UAAU;;cAETC,EAAAA,QAAQC,KAAK;aACdD,EAAAA,QAAQC,KAAK;EAGbS,EAAatB,EAAAA,QAAOiB,IAAI;aACxBN,EAAAA,UAAU;EAGVY,EAAgBvB,EAAAA,QAAOiB,IAAI;MAClCL,EAAAA,QAAQ;aACDD,EAAAA,UAAqB;;;EAKrBa,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":"0GAyGkB,6BAnDI,4BA/CA,4BAgFA,8BAOC,iCAtDG,+BAmCD,2BAIL,iCAmBM"}

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

@@ -0,0 +1,9 @@
+.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);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);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"),n=require("../layout/index.js"),s=require("../typography/index.js"),r=require("./section-item.js"),a=require("./uneditable-section.styles.js");function c(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=c(i);exports.UneditableSectionBase=i=>{var{items:c,title:o,description:d,topSection:u,bottomSection:h,children:m,background:p=!0,stretch:g,fullWidth:j,onMask:f,onUnmask:y,onTryAgain:b,className:x}=i,S=e.__rest(i,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className"]);const k=e=>()=>{f&&f(e)},N=e=>()=>{y&&y(e)},W=e=>()=>{b&&b(e)},q=()=>{if(c&&c.length>0){const e=c.map(((e,i)=>t.jsx(r.UneditableSectionItem,Object.assign({},e,{onMask:k(e),onUnmask:N(e),onTryAgain:W(e),fullWidth:j}),i)));return t.jsx("ul",{className:l.default(a.gridUl,g&&a.columnWidthStretch,j&&a.gridUlFullWidth),children:e})}return null},v=()=>m||t.jsxs(t.Fragment,{children:[o&&t.jsx(s.Typography.HeadingSM,{as:"h2",weight:"semibold",className:l.default(a.title,g&&a.columnWidthStretch),children:o}),d&&t.jsx(s.Typography.BodyBL,{className:l.default(a.description,g&&a.columnWidthStretch),children:d}),u&&t.jsx("div",{"data-id":"top-section",className:l.default(a.customSection,g&&a.columnWidthStretch),children:u}),q(),h&&t.jsx("div",{"data-id":"bottom-section",className:l.default(a.customSection,g&&a.columnWidthStretch),children:h})]});return j?t.jsx("div",Object.assign({className:l.default(p&&a.wrapperBackground,x)},S,{children:v()})):t.jsx(n.Layout.Content,Object.assign({className:l.default(a.wrapper,p&&a.wrapperBackground,x)},S,{type:"grid",children:v()}))};
 //# 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 type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} 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":"4LAcsCA,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\";\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\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    className,\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                <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                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\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"],"names":["_a","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"],"mappings":"qWAWsCA,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,EAAUC,UACVA,GAASb,EACNc,EAAUC,EAAAA,OAAAf,EAdqB,yJAmBlC,MAAMgB,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,yBACIZ,UAAWgB,UACPtB,GAAcqC,EAAAA,kBACd/B,IAEAC,YAEHmB,OAKTR,EAAAA,IAACoB,EAAAA,OAAOC,QAAOnB,OAAAC,OAAA,CACXf,UAAWgB,EAAAA,QACPkB,UACAxC,GAAcqC,EAAAA,kBACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY"}

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("../typography/index.js"),a=require("../v3_theme/index.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"};
-
-    ${a.V3_MediaQuery.MaxWidth.sm} {
-        grid-column: 1 / -1;
-    }
-`,i=n.default(e.Layout.Content)`
-    background: ${({$background:r})=>r?a.V3_Colour["bg-strong"]:"transparent"};
-    padding-top: 2rem;
-    padding-bottom: 2rem;
-`,u=n.default.div`
-    background: ${({$background:r})=>r?a.V3_Colour["bg-strong"]:"transparent"};
-`,p=n.default(t.Typography.HeadingSM)`
-    margin-bottom: 1rem;
-    ${d}
-`,m=n.default(t.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))"};
-
-    ${a.V3_MediaQuery.MaxWidth.lg} {
-        column-gap: 1.5rem;
-    }
-
-    ${a.V3_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\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery } from \"../v3_theme\";\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    ${V3_MediaQuery.MaxWidth.sm} {\n        grid-column: 1 / -1;\n    }\n`;\n\nexport const Wrapper = styled(Layout.Content)<WrapperStyleProps>`\n    background: ${({ $background }) =>\n        $background ? V3_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 ? V3_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    ${V3_MediaQuery.MaxWidth.lg} {\n        column-gap: 1.5rem;\n    }\n\n    ${V3_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","V3_MediaQuery","MaxWidth","sm","Wrapper","styled","Layout","Content","$background","V3_Colour","FullWidthWrapper","div","Title","Typography","HeadingSM","Description","BodyBL","CustomSection","GridUl","ul","$fullWidth","lg"],"mappings":"yOAuBA,MAAMA,EAAmBC,EAAAA,GAAsB;mBAC3BC,GAAWA,EAAMC,SAAW,SAAW;;MAErDC,EAAAA,cAAcC,SAASC;;;EAKhBC,EAAUC,EAAAA,QAAOC,SAAOC,QAA2B;kBAC9C,EAAGC,iBACbA,EAAcC,EAAAA,UAAU,aAAe;;;EAKlCC,EAAmBL,EAAAA,QAAOM,GAAsB;kBAC3C,EAAGH,iBACbA,EAAcC,EAAAA,UAAU,aAAe;EAGlCG,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,cAAcC,SAASmB;;;;MAIvBpB,EAAAA,cAAcC,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 @@
+.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("../external/dayjs/dayjs.min.js");var i=require("../util/simple-id-generator.js"),l=require("../util/string-helper.js"),o=require("../util/use-next-input-state.js"),s=require("./unit-number-input.style.js");const u="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,R=e.__rest(d,["disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","aria-labelledby","aria-describedby","aria-invalid"]);const[$,q]=t.useState(""),[O,B]=t.useState(""),[w,H]=t.useState("none"),[S]=t.useState((()=>i.SimpleIdGenerator.generate())),V=`${S}-floor-label`,k=`${S}-unit-label`,L=`${S}-live-message`,U=t.useRef(null),D=t.useRef(null),N=t.useRef(null),A=t.useRef($),E=t.useRef(O),F=t.useRef(w),_=e=>e.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g,""),T=o.useNextInputState({ref:D,formatter:_}),Z=o.useNextInputState({ref:N,formatter:_}),P=t.useMemo((()=>{let e="";const r=ae("Hash",$),t=ae("Dash",O);switch(w){case"floor":e=r;break;case"unit":e=$?[r,t].join(" "):t;break;default:e=""}return e}),[w,$,O]),z=e=>{A.current=e,q(e)},G=e=>{E.current=e,B(e)},K=e=>{F.current=e,H(e)};t.useEffect((()=>{"floor"===w&&3===$.length&&N.current&&N.current.focus()}),[$]),t.useEffect((()=>{Y(f)}),[f]);const M=e=>{K(e.target.name),e.target.select()},W=e=>{const r=e.target.name,t=e.target.value,n=X(t);"floor"===r?(z(n),n!==$&&ee(n,r)):"unit"===r&&(G(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(),G(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!==u)if(void 0===e||0===e.length)z(""),G("");else{const r=e.split("-");if(2===r.length){const e=r[0],t=r[1];z("floor"===w?e:X(e)),G("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))?"":u},ne=e=>e.split("-");function ae(e,r){return r?`${e} ${Array.from(r).join(" ")}`:""}return r.jsxs(a.InputWrapper,Object.assign({},R,{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&&(K("none"),re())},children:[r.jsx(s.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(s.ReadOnlyContainer,{"data-testid":"readonly-display",tabIndex:0,role:"textbox","aria-readonly":!0,"aria-labelledby":v,"aria-describedby":C,"aria-invalid":I,children:[r.jsx(s.ReadOnlyLabel,{children:t[0]}),r.jsx(s.UnitNumberDivider,{children:"-"}),r.jsx(s.ReadOnlyLabel,{children:t[1]}),r.jsx(n.VisuallyHidden,{children:a})]})})(f):r.jsxs(r.Fragment,{children:[r.jsx(s.FloorInput,{name:"floor",maxLength:3,value:$,ref:D,onFocus:M,onBlur:W,onChange:J,disabled:c,readOnly:x,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-labelledby":n.concatIds(v,V),"aria-describedby":n.concatIds(C,L),"aria-invalid":I,placeholder:"floor"!==w||x||c?ne(g)[0]:"",autoComplete:m,styleType:"no-border"}),r.jsx(n.VisuallyHidden,{"aria-hidden":!0,id:V,children:"Enter floor number"}),r.jsx(s.UnitNumberDivider,{$inactive:0===$.length,children:"-"}),r.jsx(s.UnitInput,{name:"unit",maxLength:5,value:O,ref:N,onFocus:M,onBlur:W,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,k),"aria-describedby":n.concatIds(C,L),"aria-invalid":I,placeholder:"unit"!==w||x||c?ne(g)[1]:"",autoComplete:m,styleType:"no-border"}),r.jsx(n.VisuallyHidden,{"aria-hidden":!0,id:k,children:"Enter unit number"}),r.jsx(n.VisuallyHidden,{id:L,"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

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

@@ -1 +1 @@
-{"version":3,"file":"unit-number-input.js","sources":["../../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport {\n    FloorInput,\n    HashContainer,\n    ReadOnlyContainer,\n    ReadOnlyLabel,\n    UnitInput,\n    UnitNumberDivider,\n} from \"./unit-number-input.style\";\n\ntype FieldType = \"floor\" | \"unit\" | \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\nexport const UnitNumberInput = ({\n    disabled,\n    error,\n    value,\n    onChange,\n    onBlur,\n    onChangeRaw,\n    onBlurRaw,\n    readOnly,\n    placeholder = \"00-8888\",\n    autoComplete,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: UnitNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [floorValue, _setFloorValue] = useState<string>(\"\");\n    const [unitValue, _setUnitValue] = useState<string>(\"\");\n    const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const floorLabelId = `${internalId}-floor-label`;\n    const unitLabelId = `${internalId}-unit-label`;\n    const liveMessageId = `${internalId}-live-message`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const floorInputRef = useRef<HTMLInputElement>(null);\n    const unitInputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n\n    const floorValueStateRef = useRef<string>(floorValue);\n    const unitValueStateRef = useRef<string>(unitValue);\n    const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n    const formatter = (value: string) =>\n        value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n    const getNextFloorInputState = useNextInputState({\n        ref: floorInputRef,\n        formatter,\n    });\n    const getNextUnitInputState = useNextInputState({\n        ref: unitInputRef,\n        formatter,\n    });\n\n    const liveMessage = useMemo(() => {\n        let msg = \"\";\n        const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n        const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n        switch (currentFocus) {\n            case \"floor\":\n                msg = floorMsg;\n                break;\n            case \"unit\":\n                msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n                break;\n            default:\n                msg = \"\";\n        }\n        return msg;\n    }, [currentFocus, floorValue, unitValue]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setFloorValue = (data: string) => {\n        floorValueStateRef.current = data;\n        _setFloorValue(data);\n    };\n\n    const setUnitValue = (data: string) => {\n        unitValueStateRef.current = data;\n        _setUnitValue(data);\n    };\n\n    const setCurrentFocus = (data: FieldType) => {\n        currentFocusStateRef.current = data;\n        _setCurrentFocus(data);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Auto focus feature\n        if (\n            currentFocus === \"floor\" &&\n            floorValue.length === 3 &&\n            unitInputRef.current\n        ) {\n            unitInputRef.current.focus();\n        }\n    }, [floorValue]);\n\n    useEffect(() => {\n        updateValues(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setCurrentFocus(event.target.name as FieldType);\n        event.target.select();\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value;\n        const formattedInput = formatInput(targetValue);\n\n        if (targetName === \"floor\") {\n            setFloorValue(formattedInput);\n            if (formattedInput !== floorValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        } else if (targetName === \"unit\") {\n            setUnitValue(formattedInput);\n            if (formattedInput !== unitValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n\n        if (targetName === \"floor\") {\n            const nextInputState = getNextFloorInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setFloorValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        } else if (targetName === \"unit\") {\n            const nextInputState = getNextUnitInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setUnitValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        }\n    };\n\n    const handleNodeClick = () => {\n        if (currentFocus === \"none\" && floorInputRef.current) {\n            floorInputRef.current.focus();\n        }\n    };\n\n    const handleNodeBlur = (event: React.FocusEvent) => {\n        if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n            // internal element received focus\n            return;\n        }\n        if (currentFocusStateRef.current !== \"none\") {\n            setCurrentFocus(\"none\");\n            performOnBlurHandler();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === \"unit\" && unitValue.length === 0) {\n                floorInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const formatInput = (value: string) => {\n        return /^[0-9]$/.test(value)\n            ? StringHelper.padValue(value, true)\n            : value.toLocaleUpperCase();\n    };\n\n    const updateValues = (value: string | undefined) => {\n        if (value === INVALID_VALUE) {\n            return;\n        } else if (value === undefined || value.length === 0) {\n            setFloorValue(\"\");\n            setUnitValue(\"\");\n        } else {\n            const valueArr = value.split(\"-\");\n            if (valueArr.length === 2) {\n                // Valid value\n                const floor = valueArr[0];\n                const unit = valueArr[1];\n                setFloorValue(\n                    currentFocus === \"floor\" ? floor : formatInput(floor)\n                );\n                setUnitValue(\n                    currentFocus === \"unit\" ? unit : formatInput(unit)\n                );\n            }\n        }\n    };\n\n    const performOnChangeHandler = (\n        changeValue: string,\n        field: ValueFieldTypes\n    ) => {\n        if (!onChange && !onChangeRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: floorValueStateRef.current,\n            unit: unitValueStateRef.current,\n        };\n\n        // Update the specific field value\n        values[field] = changeValue;\n\n        if (onChange) {\n            const returnValue = getFormattedValue(values);\n            onChange(returnValue);\n        }\n\n        if (onChangeRaw) {\n            onChangeRaw([values.floor, values.unit]);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (!onBlur && !onBlurRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: formatInput(floorValueStateRef.current),\n            unit: formatInput(unitValueStateRef.current),\n        };\n\n        if (onBlur) {\n            const returnValue = getFormattedValue(values);\n            onBlur(returnValue);\n        }\n\n        if (onBlurRaw) {\n            onBlurRaw([values.floor, values.unit]);\n        }\n    };\n\n    const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n        const valueArr = [values.floor, values.unit];\n\n        if (values.floor.length > 0 && values.unit.length > 0) {\n            return valueArr.join(\"-\");\n        } else if (valueArr.every((value) => value === \"\")) {\n            return \"\";\n        } else {\n            return INVALID_VALUE;\n        }\n    };\n\n    const getPlaceholder = (value: string) => {\n        return value.split(\"-\");\n    };\n\n    function formatPhraseWithPrefix(prefix: string, v: string) {\n        return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputs = () => (\n        <>\n            <FloorInput\n                name=\"floor\"\n                maxLength={3}\n                value={floorValue}\n                ref={floorInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,3}\"\n                data-testid=\"floor-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"floor\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[0]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n            />\n            <VisuallyHidden aria-hidden id={floorLabelId}>\n                Enter floor number\n            </VisuallyHidden>\n            <UnitNumberDivider $inactive={floorValue.length === 0}>\n                -\n            </UnitNumberDivider>\n            <UnitInput\n                name=\"unit\"\n                maxLength={5}\n                value={unitValue}\n                ref={unitInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,5}\"\n                data-testid=\"unit-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"unit\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[1]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n            />\n            <VisuallyHidden aria-hidden id={unitLabelId}>\n                Enter unit number\n            </VisuallyHidden>\n            {/** Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n            <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n                {liveMessage}\n            </VisuallyHidden>\n        </>\n    );\n\n    const renderReadOnly = (displayValue: string) => {\n        const displayValueArr = displayValue.split(\"-\");\n        const liveMessageForReadOnly = [\n            formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n            formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n        ].join(\" \");\n\n        return (\n            <ReadOnlyContainer\n                data-testid=\"readonly-display\"\n                tabIndex={0}\n                role=\"textbox\"\n                aria-readonly\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-invalid={ariaInvalid}\n            >\n                <ReadOnlyLabel>{displayValueArr[0]}</ReadOnlyLabel>\n                <UnitNumberDivider>-</UnitNumberDivider>\n                <ReadOnlyLabel>{displayValueArr[1]}</ReadOnlyLabel>\n                <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n            </ReadOnlyContainer>\n        );\n    };\n\n    return (\n        <InputWrapper\n            {...otherProps}\n            ref={nodeRef}\n            onClick={handleNodeClick}\n            $disabled={disabled}\n            $error={error}\n            $readOnly={readOnly}\n            tabIndex={-1}\n            onBlur={handleNodeBlur}\n        >\n            <HashContainer\n                data-testid=\"addon\"\n                $disabled={disabled}\n                $readOnly={readOnly}\n            >\n                #\n            </HashContainer>\n            {readOnly && value ? renderReadOnly(value) : renderInputs()}\n        </InputWrapper>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["INVALID_VALUE","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","SimpleIdGenerator","generate","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","$error","$readOnly","tabIndex","contains","relatedTarget","_jsx","HashContainer","$disabled","children","displayValue","displayValueArr","liveMessageForReadOnly","ReadOnlyContainer","role","ReadOnlyLabel","UnitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","FloorInput","maxLength","onFocus","type","pattern","concatIds","styleType","id","$inactive","UnitInput","onKeyDown"],"mappings":"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"}
+{"version":3,"file":"unit-number-input.js","sources":["../../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Input } from \"../input\";\nimport * as inputGroupStyles from \"../input-group/input-group.styles\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { Typography } from \"../typography\";\nimport { StringHelper, useId, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport * as styles from \"./unit-number-input.styles\";\n\ntype FieldType = \"floor\" | \"unit\" | \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\nexport const UnitNumberInput = ({\n    disabled,\n    error,\n    value,\n    onChange,\n    onBlur,\n    onChangeRaw,\n    onBlurRaw,\n    readOnly,\n    placeholder = \"00-8888\",\n    autoComplete,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    className,\n    ...otherProps\n}: UnitNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [floorValue, _setFloorValue] = useState<string>(\"\");\n    const [unitValue, _setUnitValue] = useState<string>(\"\");\n    const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n    const internalId = useId();\n    const floorLabelId = `${internalId}-floor-label`;\n    const unitLabelId = `${internalId}-unit-label`;\n    const liveMessageId = `${internalId}-live-message`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const floorInputRef = useRef<HTMLInputElement>(null);\n    const unitInputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n\n    const floorValueStateRef = useRef<string>(floorValue);\n    const unitValueStateRef = useRef<string>(unitValue);\n    const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n    const formatter = (value: string) =>\n        value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n    const getNextFloorInputState = useNextInputState({\n        ref: floorInputRef,\n        formatter,\n    });\n    const getNextUnitInputState = useNextInputState({\n        ref: unitInputRef,\n        formatter,\n    });\n\n    const liveMessage = useMemo(() => {\n        let msg = \"\";\n        const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n        const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n        switch (currentFocus) {\n            case \"floor\":\n                msg = floorMsg;\n                break;\n            case \"unit\":\n                msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n                break;\n            default:\n                msg = \"\";\n        }\n        return msg;\n    }, [currentFocus, floorValue, unitValue]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setFloorValue = (data: string) => {\n        floorValueStateRef.current = data;\n        _setFloorValue(data);\n    };\n\n    const setUnitValue = (data: string) => {\n        unitValueStateRef.current = data;\n        _setUnitValue(data);\n    };\n\n    const setCurrentFocus = (data: FieldType) => {\n        currentFocusStateRef.current = data;\n        _setCurrentFocus(data);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Auto focus feature\n        if (\n            currentFocus === \"floor\" &&\n            floorValue.length === 3 &&\n            unitInputRef.current\n        ) {\n            unitInputRef.current.focus();\n        }\n    }, [floorValue]);\n\n    useEffect(() => {\n        updateValues(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setCurrentFocus(event.target.name as FieldType);\n        event.target.select();\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value;\n        const formattedInput = formatInput(targetValue);\n\n        if (targetName === \"floor\") {\n            setFloorValue(formattedInput);\n            if (formattedInput !== floorValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        } else if (targetName === \"unit\") {\n            setUnitValue(formattedInput);\n            if (formattedInput !== unitValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n\n        if (targetName === \"floor\") {\n            const nextInputState = getNextFloorInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setFloorValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        } else if (targetName === \"unit\") {\n            const nextInputState = getNextUnitInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setUnitValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        }\n    };\n\n    const handleNodeClick = () => {\n        if (currentFocus === \"none\" && floorInputRef.current) {\n            floorInputRef.current.focus();\n        }\n    };\n\n    const handleNodeBlur = (event: React.FocusEvent) => {\n        if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n            // internal element received focus\n            return;\n        }\n        if (currentFocusStateRef.current !== \"none\") {\n            setCurrentFocus(\"none\");\n            performOnBlurHandler();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === \"unit\" && unitValue.length === 0) {\n                floorInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const formatInput = (value: string) => {\n        return /^[0-9]$/.test(value)\n            ? StringHelper.padValue(value, true)\n            : value.toLocaleUpperCase();\n    };\n\n    const updateValues = (value: string | undefined) => {\n        if (value === INVALID_VALUE) {\n            return;\n        } else if (value === undefined || value.length === 0) {\n            setFloorValue(\"\");\n            setUnitValue(\"\");\n        } else {\n            const valueArr = value.split(\"-\");\n            if (valueArr.length === 2) {\n                // Valid value\n                const floor = valueArr[0];\n                const unit = valueArr[1];\n                setFloorValue(\n                    currentFocus === \"floor\" ? floor : formatInput(floor)\n                );\n                setUnitValue(\n                    currentFocus === \"unit\" ? unit : formatInput(unit)\n                );\n            }\n        }\n    };\n\n    const performOnChangeHandler = (\n        changeValue: string,\n        field: ValueFieldTypes\n    ) => {\n        if (!onChange && !onChangeRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: floorValueStateRef.current,\n            unit: unitValueStateRef.current,\n        };\n\n        // Update the specific field value\n        values[field] = changeValue;\n\n        if (onChange) {\n            const returnValue = getFormattedValue(values);\n            onChange(returnValue);\n        }\n\n        if (onChangeRaw) {\n            onChangeRaw([values.floor, values.unit]);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (!onBlur && !onBlurRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: formatInput(floorValueStateRef.current),\n            unit: formatInput(unitValueStateRef.current),\n        };\n\n        if (onBlur) {\n            const returnValue = getFormattedValue(values);\n            onBlur(returnValue);\n        }\n\n        if (onBlurRaw) {\n            onBlurRaw([values.floor, values.unit]);\n        }\n    };\n\n    const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n        const valueArr = [values.floor, values.unit];\n\n        if (values.floor.length > 0 && values.unit.length > 0) {\n            return valueArr.join(\"-\");\n        } else if (valueArr.every((value) => value === \"\")) {\n            return \"\";\n        } else {\n            return INVALID_VALUE;\n        }\n    };\n\n    const getPlaceholder = (value: string) => {\n        return value.split(\"-\");\n    };\n\n    function formatPhraseWithPrefix(prefix: string, v: string) {\n        return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputs = () => (\n        <>\n            <Input\n                name=\"floor\"\n                maxLength={3}\n                value={floorValue}\n                ref={floorInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,3}\"\n                data-testid=\"floor-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"floor\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[0]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n                className={clsx(styles.input, styles.floorInput)}\n            />\n            <VisuallyHidden aria-hidden id={floorLabelId}>\n                Enter floor number\n            </VisuallyHidden>\n            <Typography.BodyBL\n                className={clsx(\n                    styles.unitNumberDivider,\n                    floorValue.length === 0 && styles.unitNumberDividerInactive\n                )}\n            >\n                -\n            </Typography.BodyBL>\n            <Input\n                name=\"unit\"\n                maxLength={5}\n                value={unitValue}\n                ref={unitInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,5}\"\n                data-testid=\"unit-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"unit\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[1]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n                className={clsx(\n                    styles.input,\n                    styles.floorInput,\n                    styles.unitInput\n                )}\n            />\n            <VisuallyHidden aria-hidden id={unitLabelId}>\n                Enter unit number\n            </VisuallyHidden>\n            {/** Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n            <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n                {liveMessage}\n            </VisuallyHidden>\n        </>\n    );\n\n    const renderReadOnly = (displayValue: string) => {\n        const displayValueArr = displayValue.split(\"-\");\n        const liveMessageForReadOnly = [\n            formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n            formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n        ].join(\" \");\n\n        return (\n            <div\n                data-testid=\"readonly-display\"\n                tabIndex={0}\n                role=\"textbox\"\n                aria-readonly\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-invalid={ariaInvalid}\n                className={styles.readOnlyContainer}\n            >\n                <Typography.BodyBL>{displayValueArr[0]}</Typography.BodyBL>\n                <Typography.BodyBL className={styles.unitNumberDivider}>\n                    -\n                </Typography.BodyBL>\n                <Typography.BodyBL>{displayValueArr[1]}</Typography.BodyBL>\n                <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n            </div>\n        );\n    };\n\n    return (\n        <InputWrapper\n            {...otherProps}\n            ref={nodeRef}\n            onClick={handleNodeClick}\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            tabIndex={-1}\n            onBlur={handleNodeBlur}\n            className={className}\n        >\n            <div\n                data-testid=\"addon\"\n                className={clsx(\n                    styles.hashContainer,\n                    inputGroupStyles.labelAddonContainer\n                )}\n                data-disabled={disabled}\n                data-read-only={readOnly}\n            >\n                #\n            </div>\n            {readOnly && value ? renderReadOnly(value) : renderInputs()}\n        </InputWrapper>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["INVALID_VALUE","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","className","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","useId","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","tabIndex","contains","relatedTarget","children","_jsx","clsx","styles.hashContainer","inputGroupStyles.labelAddonContainer","displayValue","displayValueArr","liveMessageForReadOnly","role","styles.readOnlyContainer","Typography","BodyBL","styles.unitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","Input","maxLength","onFocus","type","pattern","concatIds","styleType","styles.input","styles.floorInput","id","styles.unitNumberDividerInactive","onKeyDown","styles.unitInput"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+"use strict";require("./unit-number-input.styles_8yizj.css");exports.floorInput="fqv7th5",exports.hashContainer="h1ujh1ah",exports.input="i1a7rbgo",exports.readOnlyContainer="rwsbmaf",exports.unitInput="u1g8qqjx",exports.unitNumberDivider="u52196f",exports.unitNumberDividerInactive="urthzty";
+//# sourceMappingURL=unit-number-input.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"unit-number-input.styles.js","sources":["../../../src/unit-number/unit-number-input.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour } from \"../theme\";\n\nexport const hashContainer = css`\n    margin-right: 0.5rem;\n`;\n\nexport const input = css`\n    input {\n        text-align: center;\n    }\n`;\n\nexport const floorInput = css`\n    width: 2.5rem;\n`;\n\nexport const unitInput = css`\n    /* Cheat to balance the placeholder look while ensuring enough width */\n    margin-left: 0.5rem;\n    width: 6rem;\n\n    input {\n        text-align: left;\n    }\n`;\n\nexport const unitNumberDivider = css`\n    margin: 0 0.25rem;\n`;\n\nexport const unitNumberDividerInactive = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const readOnlyContainer = css`\n    display: flex;\n    align-items: center;\n    height: calc(3rem - 2px); /* exclude top and bottom borders */\n`;\n"],"names":[],"mappings":"2GAcuB,gCAVG,yBAIR,qCA4BY,4BAlBR,qCAUQ,4CAIQ"}

package/cjs/unit-number/unit-number-input.styles_8yizj.css

@@ -0,0 +1,7 @@
+.h1ujh1ah{margin-right:0.5rem;}
+.i1a7rbgo input{text-align:center;}
+.fqv7th5{width:2.5rem;}
+.u1g8qqjx{margin-left:0.5rem;width:6rem;}.u1g8qqjx input{text-align:left;}
+.u52196f{margin:0 0.25rem;}
+.urthzty{color:var(--fds-colour-text-disabled);}
+.rwsbmaf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:calc(3rem - 2px);}

package/cjs/util/simple-id-generator.js

@@ -1,2 +1,2 @@
-"use strict";exports.SimpleIdGenerator=class{static generate(){return Math.random().toString(36).substring(2,9)}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t,r=e(require("react"));class n{static generate(){return Math.random().toString(36).substring(2,9)}}const u=null!==(t=r.default.useId)&&void 0!==t?t:()=>{const[e]=r.default.useState((()=>n.generate()));return e};exports.SimpleIdGenerator=n,exports.useId=u;
 //# sourceMappingURL=simple-id-generator.js.map

package/cjs/util/simple-id-generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-id-generator.js","sources":["../../../src/util/simple-id-generator.ts"],"sourcesContent":["export class SimpleIdGenerator {\n    /**\n     * Generates a simple generator for element ids\n     */\n    public static generate(): string {\n        return Math.random().toString(36).substring(2, 9);\n    }\n}\n"],"names":["generate","Math","random","toString","substring"],"mappings":"6CAIW,eAAOA,GACV,OAAOC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,EACnD"}
+{"version":3,"file":"simple-id-generator.js","sources":["../../../src/util/simple-id-generator.ts"],"sourcesContent":["import React from \"react\";\n\nexport class SimpleIdGenerator {\n    /**\n     * Generates a simple generator for element ids\n     */\n    public static generate(): string {\n        return Math.random().toString(36).substring(2, 9);\n    }\n}\n\nconst useSimpleId = () => {\n    const [id] = React.useState(() => SimpleIdGenerator.generate());\n    return id;\n};\n\n// TODO: can be removed when React 17 support is dropped\n// @ts-expect-error useId is only available in React 18+\nexport const useId: () => string = React.useId ?? useSimpleId;\n"],"names":["SimpleIdGenerator","generate","Math","random","toString","substring","useId","_a","React","id","useState"],"mappings":"uHAEaA,EAIF,eAAOC,GACV,OAAOC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,EACnD,EAGJ,MAOaC,EAAiC,QAAXC,EAAAC,UAAMF,aAAK,IAAAC,EAAAA,EAP1B,KAChB,MAAOE,GAAMD,EAAAA,QAAME,UAAS,IAAMV,EAAkBC,aACpD,OAAOQ,CAAE"}

package/cjs/util/string-helper.js

@@ -1,2 +1,2 @@
-"use strict";class t{static transformWithSpaces(t,e){const n="(.{"+e+"})";return t.replace(/[^\dA-Z]/gi,"").replace(new RegExp(n,"g"),"$1 ").trim()}static padValue(t,e){if("0"===t)return e?t:t.padStart(2,"0");if(""===t)return t;return parseInt(t).toString().padStart(2,"0")}static shouldTruncateToTwoLines(t,e){const n=Math.floor(e/9);return t.length>=2*n||1===t.split(" ").length&&t.length>n}static truncateOneLine(t,e,n,r,s=8){let a=0;e>n&&(a=Math.floor((e-n)/s));const i=r+a;if(i<t.length){const e=Math.floor(i/2);return t.substring(0,e)+" ... "+t.substring(t.length-e,t.length)}return t}static truncateTwoLines(t,e,n,r=1.2){const s=Math.floor(2*e/(.6*n))*(2/r);if(t.length<=s)return t;const a=Math.floor(.6*s),i=Math.floor(.2*s);return`${t.substring(0,a)}...${t.substring(t.length-i)}`}static getTextWidth(e,n){if("undefined"==typeof document)return 0;const r=(t.getTextWidth.canvas||(t.getTextWidth.canvas=document.createElement("canvas"))).getContext("2d");r.font=n;return r.measureText(e).width}static maskValue(e,n){if(!e)return e;const{maskRange:r,unmaskRange:s,maskChar:a="•",maskRegex:i,maskTransformer:u}=n;if(u)return u(e);if(i)return e.replace(i,a);if(r){const{startIndex:n,endIndex:s}=t.determineStartAndEndIndex(r[0],r[1]);return e.substring(0,n)+a.repeat(e.substring(n,s+1).length)+e.substring(s+1)}if(s){const{startIndex:n,endIndex:r}=t.determineStartAndEndIndex(s[0],s[1]);return a.repeat(e.substring(0,n).length)+e.substring(n,r+1)+a.repeat(e.substring(r+1).length)}return e}static determineStartAndEndIndex(t,e){return t<e?{startIndex:t,endIndex:e}:{startIndex:e,endIndex:t}}static formatOrdinal(e){const n=t.ordinalPluralRules.select(e);return`${e}${t.suffixes.get(n)}`}static getMaskedDescription(t,e,n){if(!t||"masked"!==e||!n)return"";const[r,s]=n,a=r>0,i=s<t.length-1,u=a?t.substring(0,r):"",d=i?t.substring(s+1):"";return a&&i?`Starting with ${u} and ending with ${d}`:a?`Starting with ${u}`:i?`Ending with ${d}`:""}}t.ordinalPluralRules=new Intl.PluralRules("en",{type:"ordinal"}),t.suffixes=new Map([["one","st"],["two","nd"],["few","rd"],["other","th"]]),exports.StringHelper=t;
+"use strict";class t{static transformWithSpaces(t,e){const n="(.{"+e+"})";return t.replace(/[^\dA-Z]/gi,"").replace(new RegExp(n,"g"),"$1 ").trim()}static padValue(t,e){if("0"===t)return e?t:t.padStart(2,"0");if(""===t)return t;return parseInt(t).toString().padStart(2,"0")}static shouldTruncateToTwoLines(t,e){const n=Math.floor(e/9);return t.length>=2*n||1===t.split(" ").length&&t.length>n}static truncateOneLine(t,e,n,r,s=8){let a=0;e>n&&(a=Math.floor((e-n)/s));const i=r+a;if(i<t.length){const e=Math.floor(i/2);return t.substring(0,e)+" ... "+t.substring(t.length-e,t.length)}return t}static truncateTwoLines(t,e,n,r=1.2){const s=Math.floor(2*e/(.6*n))*(2/r);if(t.length<=s)return t;const a=Math.floor(.6*s),i=Math.floor(.2*s);return`${t.substring(0,a)}...${t.substring(t.length-i)}`}static getTextWidth(e,n){if("undefined"==typeof document)return 0;const r=(t.getTextWidth.canvas||(t.getTextWidth.canvas=document.createElement("canvas"))).getContext("2d");r.font=n;return r.measureText(e).width}static maskValue(e,n){if(!e)return e;const{maskRange:r,unmaskRange:s,maskChar:a="•",maskRegex:i,maskTransformer:u}=n;if(u)return u(e);if(i)return e.replace(i,a);if(r){const{startIndex:n,endIndex:s}=t.determineStartAndEndIndex(r[0],r[1]);return e.substring(0,n)+a.repeat(e.substring(n,s+1).length)+e.substring(s+1)}if(s){const{startIndex:n,endIndex:r}=t.determineStartAndEndIndex(s[0],s[1]);return a.repeat(e.substring(0,n).length)+e.substring(n,r+1)+a.repeat(e.substring(r+1).length)}return e}static determineStartAndEndIndex(t,e){return t<e?{startIndex:t,endIndex:e}:{startIndex:e,endIndex:t}}static formatOrdinal(e){const n=t.ordinalPluralRules.select(e);return`${e}${t.suffixes.get(n)}`}static getMaskedDescription(t,e,n){if(!t||"masked"!==e||!n)return"";const[r,s]=n,a=r>0,i=s<t.length-1,u=a?t.substring(0,r):"",o=i?t.substring(s+1):"";return a&&i?`Starting with ${u} and ending with ${o}`:a?`Starting with ${u}`:i?`Ending with ${o}`:""}static joinNonEmptyStrings(t,e=", "){return t.filter(Boolean).join(e)}}t.ordinalPluralRules=new Intl.PluralRules("en",{type:"ordinal"}),t.suffixes=new Map([["one","st"],["two","nd"],["few","rd"],["other","th"]]),exports.StringHelper=t;
 //# sourceMappingURL=string-helper.js.map

package/cjs/util/string-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"string-helper.js","sources":["../../../src/util/string-helper.ts"],"sourcesContent":["// =============================================================================\n// TYPINGS\n// =============================================================================\ninterface MaskValueOptions {\n    maskRange?: number[] | undefined;\n    unmaskRange?: number[] | undefined;\n    maskRegex?: RegExp | undefined;\n    maskTransformer?: ((value: string) => string) | undefined;\n    maskChar?: string | undefined;\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport class StringHelper {\n    public static transformWithSpaces(\n        value: string | any,\n        groupLength: number\n    ): string {\n        const regex = \"(.{\" + groupLength + \"})\";\n        return value\n            .replace(/[^\\dA-Z]/gi, \"\")\n            .replace(new RegExp(regex, \"g\"), \"$1 \")\n            .trim();\n    }\n\n    /**\n     * Pads single digit values with a zero and trims leading zero for\n     * values of length more than 2\n     * @param value the string value\n     * @param retainSingleZero setting true will allow single zero value\n     */\n    public static padValue(value: string, retainSingleZero?: boolean): string {\n        if (value === \"0\") {\n            return retainSingleZero ? value : value.padStart(2, \"0\");\n        }\n\n        if (value === \"\") {\n            return value;\n        }\n\n        const trimmedValue = parseInt(value);\n        return trimmedValue.toString().padStart(2, \"0\");\n    }\n\n    /**\n     * Checks if the text is required to be truncated and broken into two lines based\n     * on the available width of container. **Note: This is relevant to font size 18px or 1.125rem only **\n     * @param text input text\n     * @param widthOfElement element width in px\n     */\n    public static shouldTruncateToTwoLines(\n        text: string,\n        widthOfElement: number\n    ): boolean {\n        // This is arbitrary and based on tests to derive that every 9px increment ~= 1 char length.\n        // But this applies to font size 18px or 1.125rem only\n        const estimatedCharOnLine = Math.floor(widthOfElement / 9);\n        return (\n            text.length >= estimatedCharOnLine * 2 ||\n            (text.split(\" \").length === 1 && text.length > estimatedCharOnLine)\n        );\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param minDivSize the minimum container size (using size on mobileS viewport as baseline)\n     * @param baselineCharLength the baseline amount of characters to be displayed before truncation kicks. This\n     * will be increased if there is more space available (derived from `widthOfElement`)\n     * @param incrementFactor the size (in px).\n     */\n    public static truncateOneLine(\n        text: string,\n        widthOfElement: number,\n        minDivSize: number,\n        baselineCharLength: number,\n        incrementFactor = 8 // Arbitrary based on tests and applies to font size of 18px or 1.125rem\n    ): string {\n        let additionalCharAllowed = 0;\n        if (widthOfElement > minDivSize) {\n            additionalCharAllowed = Math.floor(\n                (widthOfElement - minDivSize) / incrementFactor\n            );\n        }\n        const allowedCharLength = baselineCharLength + additionalCharAllowed;\n        if (allowedCharLength < text.length) {\n            const thresholdIndex = Math.floor(allowedCharLength / 2); // We will cut it halfway to derive x num of characters\n            return (\n                text.substring(0, thresholdIndex) + // Use the first x\n                \" ... \" +\n                text.substring(text.length - thresholdIndex, text.length) // Use the last x\n            );\n        }\n\n        return text;\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param fontSize the fontsize of the text\n     * @param lineHeight the line height of the text\n     */\n    public static truncateTwoLines(\n        text: string,\n        widthOfElement: number,\n        fontSize: number,\n        lineHeight = 1.2\n    ): string {\n        // Estimate characters per line based on width and font size\n        const charsPerLine = Math.floor(\n            (widthOfElement * 2) / (fontSize * 0.6) // 0.6 is an approximation for average char width\n        );\n\n        // Calculate total characters allowed in two lines\n        const totalCharsAllowed = charsPerLine * (2 / lineHeight);\n\n        if (text.length <= totalCharsAllowed) {\n            return text; // No truncation needed\n        }\n\n        // Calculate the number of characters to keep\n        const keepFromStart = Math.floor(totalCharsAllowed * 0.6); // Keep 60% from start\n        const keepFromEnd = Math.floor(totalCharsAllowed * 0.2); // Keep 20% from end\n\n        // Truncate the text\n        const start = text.substring(0, keepFromStart);\n        const end = text.substring(text.length - keepFromEnd);\n\n        return `${start}...${end}`;\n    }\n\n    /**\n     * Returns the width of the text in the specified font\n     * https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393\n     */\n    public static getTextWidth(text: string, font: string): number {\n        if (typeof document === \"undefined\") {\n            return 0;\n        }\n\n        // create a reusable canvas object for better performance\n        const canvas =\n            (StringHelper.getTextWidth as any).canvas ||\n            ((StringHelper.getTextWidth as any).canvas =\n                document.createElement(\"canvas\"));\n        const context = canvas.getContext(\"2d\");\n        context.font = font;\n\n        const metrics = context.measureText(text);\n        return metrics.width;\n    }\n\n    public static maskValue(value: string, options: MaskValueOptions): string {\n        if (!value) {\n            return value;\n        }\n\n        const {\n            maskRange,\n            unmaskRange,\n            maskChar = \"•\",\n            maskRegex,\n            maskTransformer,\n        } = options;\n\n        if (maskTransformer) {\n            return maskTransformer(value);\n        } else if (maskRegex) {\n            return value.replace(maskRegex, maskChar);\n        } else if (maskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    maskRange[0],\n                    maskRange[1]\n                );\n            return (\n                value.substring(0, startIndex) +\n                maskChar.repeat(\n                    value.substring(startIndex, endIndex + 1).length\n                ) +\n                value.substring(endIndex + 1)\n            );\n        } else if (unmaskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    unmaskRange[0],\n                    unmaskRange[1]\n                );\n            return (\n                maskChar.repeat(value.substring(0, startIndex).length) +\n                value.substring(startIndex, endIndex + 1) +\n                maskChar.repeat(value.substring(endIndex + 1).length)\n            );\n        }\n\n        return value;\n    }\n\n    private static determineStartAndEndIndex(index0: number, index1: number) {\n        return index0 < index1\n            ? { startIndex: index0, endIndex: index1 }\n            : { startIndex: index1, endIndex: index0 };\n    }\n\n    private static ordinalPluralRules = new Intl.PluralRules(\"en\", {\n        type: \"ordinal\",\n    });\n\n    private static suffixes = new Map([\n        [\"one\", \"st\"],\n        [\"two\", \"nd\"],\n        [\"few\", \"rd\"],\n        [\"other\", \"th\"],\n    ]);\n\n    public static formatOrdinal(n: number) {\n        const rule = StringHelper.ordinalPluralRules.select(n);\n        const suffix = StringHelper.suffixes.get(rule);\n        return `${n}${suffix}`;\n    }\n\n    public static getMaskedDescription(\n        value: string,\n        displayMaskState: \"masked\" | \"unmasked\",\n        maskRange?: number[]\n    ): string {\n        if (!value || displayMaskState !== \"masked\" || !maskRange) return \"\";\n\n        const [startIndex, endIndex] = maskRange;\n        const hasStart = startIndex > 0;\n        const hasEnd = endIndex < value.length - 1;\n\n        const start = hasStart ? value.substring(0, startIndex) : \"\";\n        const end = hasEnd ? value.substring(endIndex + 1) : \"\";\n\n        if (hasStart && hasEnd)\n            return `Starting with ${start} and ending with ${end}`;\n        if (hasStart) return `Starting with ${start}`;\n        if (hasEnd) return `Ending with ${end}`;\n\n        return \"\";\n    }\n}\n"],"names":["StringHelper","transformWithSpaces","value","groupLength","regex","replace","RegExp","trim","padValue","retainSingleZero","padStart","parseInt","toString","shouldTruncateToTwoLines","text","widthOfElement","estimatedCharOnLine","Math","floor","length","split","truncateOneLine","minDivSize","baselineCharLength","incrementFactor","additionalCharAllowed","allowedCharLength","thresholdIndex","substring","truncateTwoLines","fontSize","lineHeight","totalCharsAllowed","keepFromStart","keepFromEnd","getTextWidth","font","document","context","canvas","createElement","getContext","measureText","width","maskValue","options","maskRange","unmaskRange","maskChar","maskRegex","maskTransformer","startIndex","endIndex","determineStartAndEndIndex","repeat","index0","index1","formatOrdinal","n","rule","ordinalPluralRules","select","suffixes","get","getMaskedDescription","displayMaskState","hasStart","hasEnd","start","end","Intl","PluralRules","type","Map"],"mappings":"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"}
+{"version":3,"file":"string-helper.js","sources":["../../../src/util/string-helper.ts"],"sourcesContent":["// =============================================================================\n// TYPINGS\n// =============================================================================\ninterface MaskValueOptions {\n    maskRange?: number[] | undefined;\n    unmaskRange?: number[] | undefined;\n    maskRegex?: RegExp | undefined;\n    maskTransformer?: ((value: string) => string) | undefined;\n    maskChar?: string | undefined;\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport class StringHelper {\n    public static transformWithSpaces(\n        value: string | any,\n        groupLength: number\n    ): string {\n        const regex = \"(.{\" + groupLength + \"})\";\n        return value\n            .replace(/[^\\dA-Z]/gi, \"\")\n            .replace(new RegExp(regex, \"g\"), \"$1 \")\n            .trim();\n    }\n\n    /**\n     * Pads single digit values with a zero and trims leading zero for\n     * values of length more than 2\n     * @param value the string value\n     * @param retainSingleZero setting true will allow single zero value\n     */\n    public static padValue(value: string, retainSingleZero?: boolean): string {\n        if (value === \"0\") {\n            return retainSingleZero ? value : value.padStart(2, \"0\");\n        }\n\n        if (value === \"\") {\n            return value;\n        }\n\n        const trimmedValue = parseInt(value);\n        return trimmedValue.toString().padStart(2, \"0\");\n    }\n\n    /**\n     * Checks if the text is required to be truncated and broken into two lines based\n     * on the available width of container. **Note: This is relevant to font size 18px or 1.125rem only **\n     * @param text input text\n     * @param widthOfElement element width in px\n     */\n    public static shouldTruncateToTwoLines(\n        text: string,\n        widthOfElement: number\n    ): boolean {\n        // This is arbitrary and based on tests to derive that every 9px increment ~= 1 char length.\n        // But this applies to font size 18px or 1.125rem only\n        const estimatedCharOnLine = Math.floor(widthOfElement / 9);\n        return (\n            text.length >= estimatedCharOnLine * 2 ||\n            (text.split(\" \").length === 1 && text.length > estimatedCharOnLine)\n        );\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param minDivSize the minimum container size (using size on mobileS viewport as baseline)\n     * @param baselineCharLength the baseline amount of characters to be displayed before truncation kicks. This\n     * will be increased if there is more space available (derived from `widthOfElement`)\n     * @param incrementFactor the size (in px).\n     */\n    public static truncateOneLine(\n        text: string,\n        widthOfElement: number,\n        minDivSize: number,\n        baselineCharLength: number,\n        incrementFactor = 8 // Arbitrary based on tests and applies to font size of 18px or 1.125rem\n    ): string {\n        let additionalCharAllowed = 0;\n        if (widthOfElement > minDivSize) {\n            additionalCharAllowed = Math.floor(\n                (widthOfElement - minDivSize) / incrementFactor\n            );\n        }\n        const allowedCharLength = baselineCharLength + additionalCharAllowed;\n        if (allowedCharLength < text.length) {\n            const thresholdIndex = Math.floor(allowedCharLength / 2); // We will cut it halfway to derive x num of characters\n            return (\n                text.substring(0, thresholdIndex) + // Use the first x\n                \" ... \" +\n                text.substring(text.length - thresholdIndex, text.length) // Use the last x\n            );\n        }\n\n        return text;\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param fontSize the fontsize of the text\n     * @param lineHeight the line height of the text\n     */\n    public static truncateTwoLines(\n        text: string,\n        widthOfElement: number,\n        fontSize: number,\n        lineHeight = 1.2\n    ): string {\n        // Estimate characters per line based on width and font size\n        const charsPerLine = Math.floor(\n            (widthOfElement * 2) / (fontSize * 0.6) // 0.6 is an approximation for average char width\n        );\n\n        // Calculate total characters allowed in two lines\n        const totalCharsAllowed = charsPerLine * (2 / lineHeight);\n\n        if (text.length <= totalCharsAllowed) {\n            return text; // No truncation needed\n        }\n\n        // Calculate the number of characters to keep\n        const keepFromStart = Math.floor(totalCharsAllowed * 0.6); // Keep 60% from start\n        const keepFromEnd = Math.floor(totalCharsAllowed * 0.2); // Keep 20% from end\n\n        // Truncate the text\n        const start = text.substring(0, keepFromStart);\n        const end = text.substring(text.length - keepFromEnd);\n\n        return `${start}...${end}`;\n    }\n\n    /**\n     * Returns the width of the text in the specified font\n     * https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393\n     */\n    public static getTextWidth(text: string, font: string): number {\n        if (typeof document === \"undefined\") {\n            return 0;\n        }\n\n        // create a reusable canvas object for better performance\n        const canvas =\n            (StringHelper.getTextWidth as any).canvas ||\n            ((StringHelper.getTextWidth as any).canvas =\n                document.createElement(\"canvas\"));\n        const context = canvas.getContext(\"2d\");\n        context.font = font;\n\n        const metrics = context.measureText(text);\n        return metrics.width;\n    }\n\n    public static maskValue(value: string, options: MaskValueOptions): string {\n        if (!value) {\n            return value;\n        }\n\n        const {\n            maskRange,\n            unmaskRange,\n            maskChar = \"•\",\n            maskRegex,\n            maskTransformer,\n        } = options;\n\n        if (maskTransformer) {\n            return maskTransformer(value);\n        } else if (maskRegex) {\n            return value.replace(maskRegex, maskChar);\n        } else if (maskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    maskRange[0],\n                    maskRange[1]\n                );\n            return (\n                value.substring(0, startIndex) +\n                maskChar.repeat(\n                    value.substring(startIndex, endIndex + 1).length\n                ) +\n                value.substring(endIndex + 1)\n            );\n        } else if (unmaskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    unmaskRange[0],\n                    unmaskRange[1]\n                );\n            return (\n                maskChar.repeat(value.substring(0, startIndex).length) +\n                value.substring(startIndex, endIndex + 1) +\n                maskChar.repeat(value.substring(endIndex + 1).length)\n            );\n        }\n\n        return value;\n    }\n\n    private static determineStartAndEndIndex(index0: number, index1: number) {\n        return index0 < index1\n            ? { startIndex: index0, endIndex: index1 }\n            : { startIndex: index1, endIndex: index0 };\n    }\n\n    private static ordinalPluralRules = new Intl.PluralRules(\"en\", {\n        type: \"ordinal\",\n    });\n\n    private static suffixes = new Map([\n        [\"one\", \"st\"],\n        [\"two\", \"nd\"],\n        [\"few\", \"rd\"],\n        [\"other\", \"th\"],\n    ]);\n\n    public static formatOrdinal(n: number) {\n        const rule = StringHelper.ordinalPluralRules.select(n);\n        const suffix = StringHelper.suffixes.get(rule);\n        return `${n}${suffix}`;\n    }\n\n    public static getMaskedDescription(\n        value: string,\n        displayMaskState: \"masked\" | \"unmasked\",\n        maskRange?: number[]\n    ): string {\n        if (!value || displayMaskState !== \"masked\" || !maskRange) return \"\";\n\n        const [startIndex, endIndex] = maskRange;\n        const hasStart = startIndex > 0;\n        const hasEnd = endIndex < value.length - 1;\n\n        const start = hasStart ? value.substring(0, startIndex) : \"\";\n        const end = hasEnd ? value.substring(endIndex + 1) : \"\";\n\n        if (hasStart && hasEnd)\n            return `Starting with ${start} and ending with ${end}`;\n        if (hasStart) return `Starting with ${start}`;\n        if (hasEnd) return `Ending with ${end}`;\n\n        return \"\";\n    }\n\n    public static joinNonEmptyStrings(\n        strings: (string | undefined | null)[],\n        delimiter = \", \"\n    ): string {\n        return strings.filter(Boolean).join(delimiter);\n    }\n}\n"],"names":["StringHelper","transformWithSpaces","value","groupLength","regex","replace","RegExp","trim","padValue","retainSingleZero","padStart","parseInt","toString","shouldTruncateToTwoLines","text","widthOfElement","estimatedCharOnLine","Math","floor","length","split","truncateOneLine","minDivSize","baselineCharLength","incrementFactor","additionalCharAllowed","allowedCharLength","thresholdIndex","substring","truncateTwoLines","fontSize","lineHeight","totalCharsAllowed","keepFromStart","keepFromEnd","getTextWidth","font","document","context","canvas","createElement","getContext","measureText","width","maskValue","options","maskRange","unmaskRange","maskChar","maskRegex","maskTransformer","startIndex","endIndex","determineStartAndEndIndex","repeat","index0","index1","formatOrdinal","n","rule","ordinalPluralRules","select","suffixes","get","getMaskedDescription","displayMaskState","hasStart","hasEnd","start","end","joinNonEmptyStrings","strings","delimiter","filter","Boolean","join","Intl","PluralRules","type","Map"],"mappings":"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"}

package/cjs/util/styling-helper.js

@@ -0,0 +1,2 @@
+"use strict";require("../theme/theme-provider/index.js"),require("react"),require("../theme/theme-provider/context.js");var e=require("../theme/tokens/border.js");require("../theme/tokens/colour.js"),require("../theme/tokens/font.js"),require("../theme/tokens/media-query.js");var r=require("../theme/tokens/radius.js"),s=require("../theme/utils/token-resolver.js");require("./calendar-helper.js"),require("../external/dayjs/dayjs.min.js"),require("./simple-id-generator.js"),require("./string-helper.js"),require("@react-aria/live-announcer"),require("../theme/utils/use-media-query.js");const i=new Set(Object.values(r.Radius)),t=new Set(Object.values(e.BorderThickness));exports.isColourToken=e=>s.isTokenWithPrefix(e,"var(--fds-colour-"),exports.isRadiusToken=e=>s.isTokenFromSet(e,i),exports.isThicknessToken=e=>s.isTokenFromSet(e,t);
+//# sourceMappingURL=styling-helper.js.map