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

package/uneditable-section/index.d.ts

@@ -1,5 +1,21 @@
 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) & {
+/**
+ * A read-only summary section for displaying labeled field values.
+ *
+ * Use `UneditableSection` to present a group of non-editable field–value pairs
+ * in a responsive grid layout
+ *
+ * Sub-components:
+ * - `UneditableSection.Item` — a standalone labeled read-only field with optional masking.
+ * - `UneditableSection.ItemSection` — a standalone grid list for composing items.
+ * @keywords field values, form summary, read-only, review
+ */
+export declare const UneditableSection: ((props: import("./types").UneditableSectionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
+    /**
+     * A standalone grid list for rendering `UneditableSection.Item` elements
+     * outside the full section wrapper.
+     */
     ItemSection: (props: import("./types").UneditableSectionItemSectionProps & import("react").RefAttributes<HTMLUListElement>) => React.ReactElement | null;
+    /** A standalone labeled read-only field with optional masking support. */
     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/index.js.map

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

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 r}from"@lifesg/react-icons/exclamation-triangle";import{EyeIcon as i}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/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(r,{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(i,{"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":"q2BAyBO,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_mwx8ht.css";const t="cfqoxdt",e="i6tvpcl",c="c988p37",l="l1fg6lie",s="s186v6u4",i="e13rb6hl",p="e13pxbfu",o="t1dzpnph",n="a1celal9";export{n as alert,c as clickable,t as container,i as errorIcon,p as errorLabel,e 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":"2EAOO,MAAMA,EAAS,UAiCTC,EAAa,UAcbC,EAAS,UAqBTC,EAAY,WAIZC,EAAO,WAQPC,EAAS,WAOTC,EAAU,WAIVC,EAAa,WAObC,EAAK"}

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

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

package/uneditable-section/types.d.ts

@@ -1,63 +1,106 @@
 import type React from "react";
 import type { AlertProps } from "../alert";
 import type { MaskAttributeProps } from "../masked-input";
+/** Grid column span for an item within the section layout. */
 export type UneditableSectionItemDisplayWidth = "half" | "full";
+/** Whether the item value is currently masked or unmasked. */
 export type UneditableSectionItemMaskState = "masked" | "unmasked";
+/** Async loading state during a mask or unmask action. */
 export type UneditableSectionItemMaskLoadingState = "loading" | "fail";
+/**
+ * Props for the `UneditableSection.Item` sub-component.
+ */
 export interface UneditableSectionItemProps extends MaskAttributeProps {
     id?: string | undefined;
+    /** Field label shown above the item value. */
     label: string;
-    /** Note: masking is only available for string values */
+    /**
+     * The display value for the field.
+     *
+     * @remarks Masking is only available when `value` is a string.
+     */
     value: string | React.ReactNode;
-    /** The width that the item can span across. Values: "half", "full" */
-    displayWidth?: UneditableSectionItemDisplayWidth | undefined;
     /**
-     * Specifies if value is masked or unmasked.
-     * If undefined, no masking or unmasking controls will be rendered.
+     * Grid column span for the item within the section layout.
      *
-     * Values: "masked" | "unmasked"
+     * @default "full"
+     */
+    displayWidth?: UneditableSectionItemDisplayWidth | undefined;
+    /**
+     * Controls whether the value is masked or unmasked.
+     * When undefined, no mask or unmask controls are rendered.
      */
     maskState?: UneditableSectionItemMaskState | undefined;
     /**
-     * Specifies the state of the component when there is a
-     * loading behaviour from a mask/unmask action. If undefined
-     * the value will be rendered out.
-     *
-     * Values: "loading" | "fail"
+     * Async loading state during a mask or unmask action.
+     * When undefined, the resolved value is rendered directly.
      */
     maskLoadingState?: UneditableSectionItemMaskLoadingState | undefined;
-    /** If specified, one is unable to mask or unmask the value */
+    /** Prevents the user from toggling the mask or unmask control. */
     disableMaskUnmask?: boolean | undefined;
-    /** If specified, an Alert will be rendered below the item */
+    /** Alert rendered below the item value. */
     alert?: AlertProps | undefined;
 }
+/**
+ * Props for the `UneditableSection.ItemSection` sub-component.
+ */
 export interface UneditableSectionItemSectionProps extends React.HTMLAttributes<HTMLUListElement> {
-    /** Specifies if contents should take up the full width of the section */
+    /** Stretches every child item to fill the full width of the grid. */
     stretch?: boolean | undefined;
 }
+/**
+ * Props for the `UneditableSection` component.
+ */
 export interface UneditableSectionProps {
+    /** List of labeled read-only field items to render in a responsive grid. */
     items?: UneditableSectionItemProps[] | undefined;
+    /** Optional heading rendered above the items grid. */
     title?: string | undefined;
+    /** Optional description rendered below `title` and above the items grid. */
     description?: string | undefined;
-    /** A custom section at the top of the main uneditable items section */
+    /** Custom content rendered above the items grid, below `description`. */
     topSection?: JSX.Element | undefined;
-    /** A custom section at the bottom of the main uneditable items section */
+    /** Custom content rendered below the items grid. */
     bottomSection?: JSX.Element | undefined;
-    /** The body of the entire section */
+    /**
+     * Fully custom section body.
+     *
+     * @remarks When provided, `items`, `title`,`description`,
+     * `topSection`, and `bottomSection` are not rendered.
+     */
     children?: JSX.Element | JSX.Element[] | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
-    /** If specified false, the background will be transparent. Else it is grey by default */
+    /**
+     * Applies a grey background to the section container.
+     * Set to `false` for a transparent background.
+     *
+     * @default true
+     */
     background?: boolean | undefined;
-    /** Specifies if contents should take up the full width of the section */
+    /** Stretches every item to fill the full column width of the grid. */
     stretch?: boolean | undefined;
-    /** If true, removes the default spacing and grid alignment based on `Layout.Content` */
+    /**
+     * When `true`, allows the section to span the full available width of its parent.
+     */
     fullWidth?: boolean | undefined;
-    /** The callback function when the mask icon is clicked */
+    /**
+     * Called when a mask control is activated on an item.
+     *
+     * @param item The item whose mask control was activated.
+     */
     onMask?: ((item: UneditableSectionItemProps) => void) | undefined;
-    /** The callback function when the unmask icon is clicked */
+    /**
+     * Called when an unmask control is activated on an item.
+     *
+     * @param item The item whose unmask control was activated.
+     */
     onUnmask?: ((item: UneditableSectionItemProps) => void) | undefined;
-    /** The callback function when the "Try again" button is clicked in error state */
+    /**
+     * Called when the retry button is clicked on an item in error state.
+     *
+     * @param item The item that encountered the mask/unmask error.
+     */
     onTryAgain?: ((item: UneditableSectionItemProps) => void) | undefined;
 }

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

@@ -1,2 +1,3 @@
+import React from "react";
 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: (props: UneditableSectionProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;

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 e,jsxs as i,Fragment as n}from"react/jsx-runtime";import o from"clsx";import s from"react";import{Layout as r}from"../layout/index.js";import{Typography as a}from"../typography/index.js";import{UneditableSectionItem as c}from"./section-item.js";import{wrapperBackground as l,wrapper as m,title as d,columnWidthStretch as h,description as p,customSection as f,gridUl as u,gridUlFullWidth as g}from"./uneditable-section.styles.js";const b=s.forwardRef(((s,b)=>{var{items:y,title:N,description:j,topSection:k,bottomSection:S,children:v,background:x=!0,stretch:M,fullWidth:U,onMask:A,onUnmask:O,onTryAgain:T,className:W}=s,w=t(s,["items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className"]);const B=t=>()=>{A&&A(t)},_=t=>()=>{O&&O(t)},C=t=>()=>{T&&T(t)},H=()=>{if(y&&y.length>0){const t=y.map(((t,i)=>e(c,Object.assign({},t,{onMask:B(t),onUnmask:_(t),onTryAgain:C(t),fullWidth:U}),i)));return e("ul",{className:o(u,M&&h,U&&g),children:t})}return null},L=()=>v||i(n,{children:[N&&e(a.HeadingSM,{as:"h2",weight:"semibold",className:o(d,M&&h),children:N}),j&&e(a.BodyBL,{className:o(p,M&&h),children:j}),k&&e("div",{"data-id":"top-section",className:o(f,M&&h),children:k}),H(),S&&e("div",{"data-id":"bottom-section",className:o(f,M&&h),children:S})]});return U?e("div",Object.assign({ref:b,className:o(x&&l,W)},w,{children:L()})):e(r.Content,Object.assign({ref:b,className:o(m,x&&l,W)},w,{type:"grid",children:L()}))}));b.displayName="UneditableSection";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\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nconst Component = (\n    {\n        items,\n        title,\n        description,\n        topSection,\n        bottomSection,\n        children,\n        background = true,\n        stretch,\n        fullWidth,\n        onMask,\n        onUnmask,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: UneditableSectionProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                ref={ref}\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            ref={ref}\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n\nexport const UneditableSectionBase = React.forwardRef(Component);\n\n(UneditableSectionBase as NamedExoticComponent).displayName =\n    \"UneditableSection\";\n"],"names":["UneditableSectionBase","React","forwardRef","_a","ref","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type","displayName"],"mappings":"0eAaA,MA0JaA,EAAwBC,EAAMC,YA1JzB,CACdC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASd,EACNe,EAAUC,EAAAhB,EAdjB,yJAqBA,MAAMiB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,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,EAAA,MAAAE,OAAAC,OAAA,CACI5B,IAAKA,EACLa,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,EAAU,CAAAR,SAEb2B,OAKTR,EAACoB,EAAOC,uBACJ9C,IAAKA,EACLa,UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY,IAMxBrC,EAA+CqD,YAC5C"}

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