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

package/typography/typography.styles.js

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

package/typography/typography.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\nimport type { V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport type { TypographyWeight } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledProps {\n    $textStyle: V3_TypographySizeType;\n    $weight?: TypographyWeight | undefined;\n    $inline?: boolean | undefined;\n    $paragraph?: boolean | undefined;\n    $maxLines?: number | undefined;\n    $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n    ${(props) =>\n        createTypographyStyles(\n            props.$textStyle,\n            props.$weight,\n            props.$inline,\n            props.$paragraph,\n            props.$maxLines\n        )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n    ${(props) => css`\n        ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n        color: ${V3_Colour.hyperlink};\n        text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n        &:hover,\n        &:active,\n        &:focus {\n            color: ${V3_Colour[\"text-hover\"]};\n        }\n    `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n    height: 1lh;\n    width: 1em;\n    margin-left: 0.4em;\n    vertical-align: middle;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","V3_Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"+NAwBO,MAAMA,EAAiBC,EAAOC,GAAgB;MAC9CC,GACCC,EACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAOU,CAAc;MAC3CR,UAAU,OAAAS,CAAG;UACVC,EAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAUC;2BACqB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAU;;KAE1B;EAGQI,EAAqBjB,EAAOkB,EAAa;;;;;"}
+{"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n    typographyBase: {\n        maxLines: \"--fds-internal-typography-base-maxLines\",\n    },\n} as const;\n\nexport const typographyBase = css`\n    ${tokens.typographyBase.maxLines}: initial;\n    font-family: ${Font.Spec[\"font-family\"]};\n    font-variant: ${Font.Spec[\"font-variant\"]};\n    color: ${Colour.text};\n`;\n\nexport const displayInline = css`\n    display: inline;\n    margin-bottom: 0;\n`;\n\nexport const displayBlock = css`\n    display: block;\n    margin-bottom: 0;\n`;\n\nexport const paragraph = css`\n    display: block;\n    margin-bottom: 1.05em;\n`;\n\nexport const lineClamp = css`\n    ${lineClampDynamicCss(tokens.typographyBase.maxLines)}\n`;\n\nexport const hyperlinkBase = css`\n    color: ${Colour.hyperlink};\n\n    &:hover,\n    &:active,\n    &:focus {\n        color: ${Colour[\"text-hover\"]};\n    }\n`;\n\nexport const underline = css`\n    text-decoration: underline;\n`;\n\nexport const noUnderline = css`\n    text-decoration: none;\n`;\n\nexport const externalIcon = css`\n    height: 1lh;\n    width: 1em;\n    margin-left: 0.4em;\n    vertical-align: middle;\n`;\n"],"names":["tokens","typographyBase","maxLines","displayInline","displayBlock","paragraph","lineClamp","hyperlinkBase","underline","noUnderline","externalIcon"],"mappings":"wIAOO,MAAMA,EAAS,CAClBC,eAAgB,CACZC,SAAU,4CAILD,EAAc,UAOdE,EAAa,UAKbC,EAAY,WAKZC,EAAS,WAKTC,EAAS,UAITC,EAAa,WAUbC,EAAS,WAITC,EAAW,UAIXC,EAAY"}

package/typography/typography.styles_1jqils.css

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

package/uneditable-section/index.d.ts

@@ -1,5 +1,5 @@
 export * from "./types";
-export declare const UneditableSection: (({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, ...otherProps }: import("./types").UneditableSectionProps) => import("react/jsx-runtime").JSX.Element) & {
+export declare const UneditableSection: (({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, className, ...otherProps }: import("./types").UneditableSectionProps) => import("react/jsx-runtime").JSX.Element) & {
     ItemSection: (props: import("./types").UneditableSectionItemSectionProps & import("react").RefAttributes<HTMLUListElement>) => React.ReactElement | null;
     Item: ({ label, value, displayWidth, maskState, maskLoadingState, maskChar, maskRange, unmaskRange, maskRegex, disableMaskUnmask, alert, maskTransformer, onMask, onUnmask, onTryAgain, fullWidth, }: import("./section-item").UneditableSectionItemComponentProps) => import("react/jsx-runtime").JSX.Element;
 };

package/uneditable-section/item-section.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { UneditableSectionItemSectionProps } from "./types";
-export declare const Component: ({ stretch, ...otherProps }: UneditableSectionItemSectionProps, ref: React.Ref<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;
+export declare const Component: ({ stretch, className, ...otherProps }: UneditableSectionItemSectionProps, ref: React.Ref<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const UneditableItemSection: (props: UneditableSectionItemSectionProps & React.RefAttributes<HTMLUListElement>) => React.ReactElement | null;

package/uneditable-section/item-section.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import e from"react";import{GridUl as s}from"./uneditable-section.styles.js";const o=(e,o)=>{var{stretch:i}=e,m=r(e,["stretch"]);return t(s,Object.assign({ref:o,$stretch:i},m))},i=e.forwardRef(o);export{o as Component,i as UneditableItemSection};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import s from"clsx";import e from"react";import{gridUl as m,columnWidthStretch as o}from"./uneditable-section.styles.js";const a=(e,a)=>{var{stretch:c,className:i}=e,l=r(e,["stretch","className"]);return t("ul",Object.assign({ref:a,className:s(m,c&&o,i)},l))},c=e.forwardRef(a);export{a as Component,c as UneditableItemSection};
 //# sourceMappingURL=item-section.js.map

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

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

package/uneditable-section/section-item.js

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

package/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":["UneditableSectionItem","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":"wnBAgCO,MAAMA,EAAwB,EACjCC,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBACAC,QACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAEvCf,GAKFgB,GAAU,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,EAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,eACIC,EAACC,MACDD,EAACE,EAAU,CAAAC,SAAA,UACXJ,EAACK,EAAa,CAAAD,SAAA,CAAA,aAEVH,EAACK,EAAc,CAAAF,SAAE7B,UAIjC,IAAK,UACD,OACIyB,EAAAO,EAAA,CAAAH,SAAA,CACIH,EAACO,EAAO,CAAA,GACRP,EAACQ,EAAY,CAAAL,SAAA,qBAGzB,QACI,OACIJ,EAAAO,EAAA,CAAAH,SAAA,CACKR,IACDK,EAACS,EAAa,CAAA,aAEe,WAArBnB,EACM,WAAWhB,IACX,QAAQA,IAAO6B,SAGH,WAArBb,EACGU,EAACU,EAAO,CAAA,cAAa,gBAErBV,EAACW,EAAY,CAAA,cAAa,yBAuCtD,OACIZ,EAACa,EAAS,CAAAC,YAAcrC,EAAYsC,WAAczB,EAASc,SAAA,CACvDH,EAACe,EAAS,CAAAZ,SAAE7B,IAhCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOiB,EAACgB,EAAWC,iBAAQtB,MAI3BK,EAACkB,EAAS,CAAA,cACM,kBACZC,QAASzB,cACuB,YAArBhB,EAA8B,YAC/B,SACV0C,KAAK,sBACOxB,EAAayB,qBACrB9C,EACAe,EACAV,GACHuB,SAEAL,MApBEE,EAACgB,EAAWC,OAAM,CAAAd,SAAE5B,IA6B1BS,GAASgB,EAACsB,EAAWC,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":["UneditableSectionItem","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":"01BAyBO,MAAMA,EAAwB,EACjCC,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAEvCf,GAKFgB,GAAU,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,EAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,GAAwBC,UAAWC,IACpCH,EAAA,OAAA,CAAME,UAAWE,EAAiBL,SAAA,UAClCF,EAAA,OAAA,CAAMK,UAAWG,EAAoBN,SAAA,CAAA,aAEjCC,EAACM,YAAgBlC,UAIjC,IAAK,UACD,OACIyB,eACIG,EAACO,GAAwBL,UAAWM,IACpCR,EAAA,OAAA,CAAME,UAAWO,EAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAC,EAAA,CAAAC,SAAA,CACKN,IACDO,EAAA,MAAA,CACIE,UAAWQ,EAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,EAACW,EAAO,CAAA,cAAa,gBAErBX,EAACY,EAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAgBd,SAAA,CAE3BC,EAACc,EAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAACe,EAAWC,iBAAQvB,MAI3BO,EAAA,SAAA,CACIE,UAAWe,EAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAACe,EAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAACqB,iBAAMnB,UAAWoB,EAAcC,SAAS,SAAYzC,MAExD"}

package/uneditable-section/section-item.styles.d.ts

@@ -1,20 +1,9 @@
-import type { UneditableSectionItemDisplayWidth } from "./types";
-interface ContainerStyleProps {
-    $widthStyle: UneditableSectionItemDisplayWidth;
-    $fullWidth?: boolean | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, ContainerStyleProps>> & string;
-export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Clickable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
-export declare const LoadingLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const Spinner: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps, never>> & string & Omit<({ color, className, size, }: import("../shared/component-loading-spinner").ComponentLoadingSpinnerProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export declare const ErrorLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const TryAgainLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const StyledAlert: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").AlertProps, never>> & string & Omit<({ type, className, children, actionLink, actionLinkIcon, sizeType, showIcon, customIcon, maxCollapsedHeight, role, ...otherProps }: import("..").AlertProps) => JSX.Element, keyof import("react").Component<any, {}, any>>;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const iconContainer: import("@linaria/core").LinariaClassName;
+export declare const clickable: import("@linaria/core").LinariaClassName;
+export declare const loadingLabel: import("@linaria/core").LinariaClassName;
+export declare const spinner: import("@linaria/core").LinariaClassName;
+export declare const errorIcon: import("@linaria/core").LinariaClassName;
+export declare const errorLabel: import("@linaria/core").LinariaClassName;
+export declare const tryAgainLabel: import("@linaria/core").LinariaClassName;
+export declare const alert: import("@linaria/core").LinariaClassName;

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

@@ -1,64 +1,2 @@
-import{ExclamationTriangleIcon as e}from"@lifesg/react-icons/exclamation-triangle";import r,{css as i}from"styled-components";import{Alert as n}from"../alert/alert.js";import{ComponentLoadingSpinner as o}from"../shared/component-loading-spinner/component-loading-spinner.js";import{V3_MediaQuery as t,V3_Colour as l,V3_Font as a}from"../v3_theme/index.js";const s=r.li`
-    display: flex;
-    flex-direction: column;
-
-    ${e=>{switch(e.$widthStyle){case"half":return i`
-                    grid-column: auto / span ${e.$fullWidth?1:4};
-                `;case"full":return i`
-                    grid-column: auto / span ${e.$fullWidth?2:8};
-                `}}}
-
-    ${t.MaxWidth.lg} {
-        grid-column: 1 / -1;
-    }
-
-    overflow-wrap: break-word;
-`,d=r.div`
-    display: flex;
-    height: 100%;
-    align-items: center;
-    justify-content: center;
-    color: ${l["icon-primary"]};
-    margin-left: 0.5rem;
-
-    svg {
-        width: ${a.Spec["body-size-baseline"]};
-        height: ${a.Spec["body-size-baseline"]};
-    }
-`,c=r.button`
-    ${a["body-baseline-regular"]}
-    color: ${l.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;
-    }
-`,m=r.span`
-    color: ${l["text-disabled"]};
-`,p=r(o)`
-    margin-right: 0.5rem;
-    color: ${l["text-disabled"]};
-`,g=r(e)`
-    color: ${l["icon-warning"]};
-    margin-right: 0.5rem;
-    height: ${a.Spec["body-size-baseline"]};
-    width: ${a.Spec["body-size-baseline"]};
-`,f=r.span`
-    color: ${l["text-warning"]};
-`,h=r.span`
-    ${a["body-baseline-semibold"]}
-    color: ${l.hyperlink};
-    text-decoration: underline;
-    margin-left: 0.5rem;
-`,$=r(n)`
-    margin-top: 0.5rem;
-`;export{c as Clickable,s as Container,g as ErrorIcon,f as ErrorLabel,d as IconContainer,m as LoadingLabel,p as Spinner,$ as StyledAlert,h as TryAgainLabel};
+import"./section-item.styles_1dfjzc4.css";const e="cfqoxdt",t="i6tvpcl",c="c988p37",l="l1fg6lie",s="s186v6u4",i="e13rb6hl",p="e13pxbfu",o="t1dzpnph",n="a1celal9";export{n as alert,c as clickable,e as container,i as errorIcon,p as errorLabel,t as iconContainer,l as loadingLabel,s as spinner,o as tryAgainLabel};
 //# sourceMappingURL=section-item.styles.js.map

package/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":"oWAmBO,MAAMA,EAAYC,EAAOC,EAAuB;;;;MAIhDC,IACC,OAAQA,EAAMC,aACV,IAAK,OACD,OAAOC,CAAG;+CACqBF,EAAMG,WAAa,EAAI;kBAE1D,IAAK,OACD,OAAOD,CAAG;+CACqBF,EAAMG,WAAa,EAAI;;;MAKhEC,EAAcC,SAASC;;;;;EAOhBC,EAAgBT,EAAOU,GAAG;;;;;aAK1BC,EAAU;;;;iBAINC,EAAQC,KAAK;kBACZD,EAAQC,KAAK;;EAIlBC,EAAYd,EAAOe,MAAM;MAChCH,EAAQ;aACDD,EAAgB;;;;;;;;;;;;;;EAmBhBK,EAAehB,EAAOiB,IAAI;aAC1BN,EAAU;EAGVO,EAAUlB,EAAOmB,EAAwB;;aAEzCR,EAAU;EAMVS,EAAYpB,EAAOqB,EAAwB;aAC3CV,EAAU;;cAETC,EAAQC,KAAK;aACdD,EAAQC,KAAK;EAGbS,EAAatB,EAAOiB,IAAI;aACxBN,EAAU;EAGVY,EAAgBvB,EAAOiB,IAAI;MAClCL,EAAQ;aACDD,EAAqB;;;EAKrBa,EAAcxB,EAAOyB,EAAM;;"}
+{"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":["container","iconContainer","clickable","loadingLabel","spinner","errorIcon","errorLabel","tryAgainLabel","alert"],"mappings":"4EAOO,MAAMA,EAAS,UAiCTC,EAAa,UAcbC,EAAS,UAqBTC,EAAY,WAIZC,EAAO,WAQPC,EAAS,WAOTC,EAAU,WAIVC,EAAa,WAObC,EAAK"}

package/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/uneditable-section/uneditable-section.d.ts

@@ -1,2 +1,2 @@
 import type { UneditableSectionProps } from "./types";
-export declare const UneditableSectionBase: ({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, ...otherProps }: UneditableSectionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UneditableSectionBase: ({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, className, ...otherProps }: UneditableSectionProps) => import("react/jsx-runtime").JSX.Element;

package/uneditable-section/uneditable-section.js

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

package/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":["UneditableSectionBase","_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":"mTAcO,MAAMA,EAAyBC,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,EAAAd,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,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRN,OAAQK,EAAeC,GACvBL,SAAUM,EAAiBD,GAC3BJ,WAAYM,EAAeF,GAC3BP,UAAWA,IALNc,KAUjB,OACIC,EAACI,EAAM,CAAAC,SAAWrB,EAAOsB,WAAcrB,EAASH,SAC3Ce,GAGb,CAEA,OAAO,IAAI,EAGTU,EAAiB,IACfzB,GAKA0B,EAAAC,EAAA,CAAA3B,SAAA,CACKJ,GACGsB,EAACU,EAAK,CACFC,YAAY,KACZC,OAAO,WAAUP,SACPrB,EAAOF,SAEhBJ,IAGRC,GACGqB,EAACa,EAAW,CAAAR,SAAWrB,EAAOF,SAAGH,IAEpCC,GACGoB,EAACc,EAAa,CAAA,UAAS,cAAaT,SAAWrB,EAAOF,SACjDF,IAGRe,IACAd,GACGmB,EAACc,aAAsB,iBAAgBT,SAAWrB,EAAOF,SACpDD,OAOrB,OAAII,EAEIe,EAACe,EAAgBb,OAAAC,OAAA,CAAAa,YAAcjC,GAAgBM,EAAU,CAAAP,SACpDyB,OAKTP,EAACiB,EAAOf,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":["UneditableSectionBase","_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":"qdAWO,MAAMA,EAAyBC,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,EAAAf,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,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAA,KAAA,CACIZ,UAAWgB,EACPC,EACAtB,GAAWuB,EACXtB,GAAauB,GAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAC,EAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAACW,EAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EACPW,EACAhC,GAAWuB,GACdzB,SAEAJ,IAGRC,GACGsB,EAACW,EAAWK,OAAM,CACd5B,UAAWgB,EACPa,EACAlC,GAAWuB,YAGd5B,IAGRC,GACGqB,EAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAD,OAOrB,OAAII,EAEIgB,uBACIZ,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,YAEHmB,OAKTR,EAACoB,EAAOC,QAAOnB,OAAAC,OAAA,CACXf,UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY"}

package/uneditable-section/uneditable-section.styles.d.ts

@@ -1,20 +1,8 @@
-interface WrapperStyleProps {
-    $background: boolean;
-}
-interface ContentStyleProps {
-    $stretch: boolean | undefined;
-}
-interface GridStyleProps extends ContentStyleProps {
-    $fullWidth?: boolean | undefined;
-}
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>, WrapperStyleProps>> & string & Omit<(props: import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const FullWidthWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperStyleProps>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, ContentStyleProps>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, ContentStyleProps>> & string;
-export declare const CustomSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentStyleProps>> & string;
-export declare const GridUl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, GridStyleProps>> & string;
-export {};
+export declare const columnWidthStretch: import("@linaria/core").LinariaClassName;
+export declare const wrapper: import("@linaria/core").LinariaClassName;
+export declare const wrapperBackground: import("@linaria/core").LinariaClassName;
+export declare const title: import("@linaria/core").LinariaClassName;
+export declare const description: import("@linaria/core").LinariaClassName;
+export declare const customSection: import("@linaria/core").LinariaClassName;
+export declare const gridUl: import("@linaria/core").LinariaClassName;
+export declare const gridUlFullWidth: import("@linaria/core").LinariaClassName;

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

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

package/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":"+MAuBA,MAAMA,EAAmBC,CAAsB;mBAC3BC,GAAWA,EAAMC,SAAW,SAAW;;MAErDC,EAAcC,SAASC;;;EAKhBC,EAAUC,EAAOC,EAAOC,QAA2B;kBAC9C,EAAGC,iBACbA,EAAcC,EAAU,aAAe;;;EAKlCC,EAAmBL,EAAOM,GAAsB;kBAC3C,EAAGH,iBACbA,EAAcC,EAAU,aAAe;EAGlCG,EAAQP,EAAOQ,EAAWC,UAA6B;;MAE9DjB;EAGOkB,EAAcV,EAAOQ,EAAWG,OAA0B;;MAEjEnB;EAGOoB,EAAgBZ,EAAOM,GAAsB;MACpDd;EAGOqB,EAASb,EAAOc,EAAkB;MACzCtB;;;;6BAIuB,EAAGuB,gBACxBA,EAAa,4BAA8B;;MAE7CnB,EAAcC,SAASmB;;;;MAIvBpB,EAAcC,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":["columnWidthStretch","wrapper","wrapperBackground","title","description","customSection","gridUl","gridUlFullWidth"],"mappings":"iFAeO,MAAMA,EAAkB,UAIlBC,EAAO,UAKPC,EAAiB,UAIjBC,EAAK,UAKLC,EAAW,UAKXC,EAAa,UAIbC,EAAM,WAoBNC,EAAe"}

package/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/unit-number/unit-number-input.d.ts

@@ -1,2 +1,2 @@
 import type { UnitNumberInputProps } from "./types";
-export declare const UnitNumberInput: ({ disabled, error, value, onChange, onBlur, onChangeRaw, onBlurRaw, readOnly, placeholder, autoComplete, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, ...otherProps }: UnitNumberInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UnitNumberInput: ({ disabled, error, value, onChange, onBlur, onChangeRaw, onBlurRaw, readOnly, placeholder, autoComplete, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, className, ...otherProps }: UnitNumberInputProps) => import("react/jsx-runtime").JSX.Element;

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

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