@lifesg/react-design-system 4.0.0-alpha.4 → 4.0.0-alpha.6

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

@@ -1,4 +1,4 @@
-.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;}
+@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);}
@@ -6,4 +6,4 @@
 .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;}
+.a1celal9{margin-top:0.5rem;}}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.js","sources":["../../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n    items,\n    title,\n    description,\n    topSection,\n    bottomSection,\n    children,\n    background = true,\n    stretch,\n    fullWidth,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    className,\n    ...otherProps\n}: UneditableSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n"],"names":["_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type"],"mappings":"qWAWsCA,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASb,EACNc,EAAUC,EAAAA,OAAAf,EAdqB,yJAmBlC,MAAMgB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAAAA,IAACC,wBAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAAA,IAAA,KAAA,CACIZ,UAAWgB,EAAAA,QACPC,EAAAA,OACAtB,GAAWuB,EAAAA,mBACXtB,GAAauB,EAAAA,iBAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAA,KAAAC,EAAAA,SAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAAAA,IAACW,EAAAA,WAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EAAAA,QACPW,EAAAA,MACAhC,GAAWuB,EAAAA,oBACdzB,SAEAJ,IAGRC,GACGsB,MAACW,EAAAA,WAAWK,OAAM,CACd5B,UAAWgB,EAAAA,QACPa,EAAAA,YACAlC,GAAWuB,EAAAA,6BAGd5B,IAGRC,GACGqB,EAAAA,IAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAAA,IAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAD,OAOrB,OAAII,EAEIgB,EAAAA,yBACIZ,UAAWgB,UACPtB,GAAcqC,EAAAA,kBACd/B,IAEAC,YAEHmB,OAKTR,EAAAA,IAACoB,EAAAA,OAAOC,QAAOnB,OAAAC,OAAA,CACXf,UAAWgB,EAAAA,QACPkB,UACAxC,GAAcqC,EAAAA,kBACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY"}
+{"version":3,"file":"uneditable-section.js","sources":["../../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nconst Component = (\n    {\n        items,\n        title,\n        description,\n        topSection,\n        bottomSection,\n        children,\n        background = true,\n        stretch,\n        fullWidth,\n        onMask,\n        onUnmask,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: UneditableSectionProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                ref={ref}\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            ref={ref}\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n\nexport const UneditableSectionBase = React.forwardRef(Component);\n\n(UneditableSectionBase as NamedExoticComponent).displayName =\n    \"UneditableSection\";\n"],"names":["UneditableSectionBase","React","forwardRef","_a","ref","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type","displayName"],"mappings":"0VAaA,MA0JaA,OAAwBC,QAAMC,YA1JzB,CACdC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASd,EACNe,EAAUC,EAAAA,OAAAhB,EAdjB,yJAqBA,MAAMiB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAAAA,IAACC,wBAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAAA,IAAA,KAAA,CACIZ,UAAWgB,EAAAA,QACPC,EAAAA,OACAtB,GAAWuB,EAAAA,mBACXtB,GAAauB,EAAAA,iBAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAA,KAAAC,EAAAA,SAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAAAA,IAACW,EAAAA,WAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EAAAA,QACPW,EAAAA,MACAhC,GAAWuB,EAAAA,oBACdzB,SAEAJ,IAGRC,GACGsB,MAACW,EAAAA,WAAWK,OAAM,CACd5B,UAAWgB,EAAAA,QACPa,EAAAA,YACAlC,GAAWuB,EAAAA,6BAGd5B,IAGRC,GACGqB,EAAAA,IAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAAA,IAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EAAAA,QACPc,EAAAA,cACAnC,GAAWuB,EAAAA,oBACdzB,SAEAD,OAOrB,OAAII,EAEIgB,EAAAA,IAAA,MAAAE,OAAAC,OAAA,CACI5B,IAAKA,EACLa,UAAWgB,EAAAA,QACPtB,GAAcqC,EAAAA,kBACd/B,IAEAC,EAAU,CAAAR,SAEb2B,OAKTR,EAAAA,IAACoB,SAAOC,uBACJ9C,IAAKA,EACLa,UAAWgB,UACPkB,EAAAA,QACAxC,GAAcqC,oBACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY,IAMxBrC,EAA+CqD,YAC5C"}

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

@@ -1,8 +1,8 @@
-.cd0nwth{-ms-grid-column:1/-1;grid-column:1/-1;}
+@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));}
+.gc97tp4{-ms-grid-columns:repeat(2, minmax(0, 1fr));grid-template-columns:repeat(2, minmax(0, 1fr));}:where(body.fds-breakpoint-sm-max) .gc97tp4{-ms-grid-columns:repeat(1, minmax(0, 1fr));grid-template-columns:repeat(1, minmax(0, 1fr));}}

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

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

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

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

package/cjs/util/merge-refs.js.map

@@ -1 +1 @@
-{"version":3,"file":"merge-refs.js","sources":["../../../src/util/merge-refs.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nimport { isReact19 } from \"./version\";\n\nexport const mergeRefs = <T>(...refs: Ref<T>[]) => {\n    return (value: T | null) => {\n        const cleanups: (() => void)[] = [];\n\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                const cleanup = ref(value);\n                const isCleanup = typeof cleanup === \"function\";\n                cleanups.push(isCleanup ? cleanup : () => ref(null));\n            } else if (ref) {\n                (ref as MutableRefObject<T | null>).current = value;\n                cleanups.push(() => {\n                    (ref as MutableRefObject<T | null>).current = null;\n                });\n            }\n        }\n\n        if (isReact19()) {\n            return () => {\n                for (const cleanup of cleanups) cleanup();\n            };\n        }\n    };\n};\n"],"names":["refs","value","cleanups","ref","cleanup","isCleanup","push","current","isReact19"],"mappings":"6DAIyB,IAAOA,IACpBC,IACJ,MAAMC,EAA2B,GAEjC,IAAK,MAAMC,KAAOH,EACd,GAAmB,mBAARG,EAAoB,CAC3B,MAAMC,EAAUD,EAAIF,GACdI,EAA+B,mBAAZD,EACzBF,EAASI,KAAKD,EAAYD,EAAU,IAAMD,EAAI,MAClD,MAAWA,IACNA,EAAmCI,QAAUN,EAC9CC,EAASI,MAAK,KACTH,EAAmCI,QAAU,IAAI,KAK9D,GAAIC,EAAAA,YACA,MAAO,KACH,IAAK,MAAMJ,KAAWF,EAAUE,GAAS,CAEjD"}
+{"version":3,"file":"merge-refs.js","sources":["../../../src/util/merge-refs.ts"],"sourcesContent":["import type { MutableRefObject, Ref } from \"react\";\n\nimport { isReact19 } from \"./version\";\n\nexport const mergeRefs = <T>(...refs: (Ref<T> | undefined)[]) => {\n    return (value: T | null) => {\n        const cleanups: (() => void)[] = [];\n\n        for (const ref of refs) {\n            if (typeof ref === \"function\") {\n                const cleanup = ref(value);\n                const isCleanup = typeof cleanup === \"function\";\n                cleanups.push(isCleanup ? cleanup : () => ref(null));\n            } else if (ref) {\n                (ref as MutableRefObject<T | null>).current = value;\n                cleanups.push(() => {\n                    (ref as MutableRefObject<T | null>).current = null;\n                });\n            }\n        }\n\n        if (isReact19()) {\n            return () => {\n                for (const cleanup of cleanups) cleanup();\n            };\n        }\n    };\n};\n"],"names":["refs","value","cleanups","ref","cleanup","isCleanup","push","current","isReact19"],"mappings":"6DAIyB,IAAOA,IACpBC,IACJ,MAAMC,EAA2B,GAEjC,IAAK,MAAMC,KAAOH,EACd,GAAmB,mBAARG,EAAoB,CAC3B,MAAMC,EAAUD,EAAIF,GACdI,EAA+B,mBAAZD,EACzBF,EAASI,KAAKD,EAAYD,EAAU,IAAMD,EAAI,MAClD,MAAWA,IACNA,EAAmCI,QAAUN,EAC9CC,EAASI,MAAK,KACTH,EAAmCI,QAAU,IAAI,KAK9D,GAAIC,EAAAA,YACA,MAAO,KACH,IAAK,MAAMJ,KAAWF,EAAUE,GAAS,CAEjD"}

package/cjs/util/use-throttle.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react");exports.useThrottle=function(r,u){const t=e.useRef(r),n=e.useRef(0),c=e.useRef(null);return e.useEffect((()=>{t.current=r}),[r]),e.useEffect((()=>()=>{null!==c.current&&clearTimeout(c.current)}),[]),e.useCallback(((...e)=>{const r=Date.now(),l=r-n.current;null!==c.current&&(clearTimeout(c.current),c.current=null),l>=u?(n.current=r,t.current(...e)):c.current=setTimeout((()=>{n.current=Date.now(),c.current=null,t.current(...e)}),u-l)}),[u])};
+//# sourceMappingURL=use-throttle.js.map

package/cjs/util/use-throttle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-throttle.js","sources":["../../../src/util/use-throttle.ts"],"sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function useThrottle<T extends (...args: any[]) => any>(\n    callback: T,\n    wait: number\n): T {\n    const callbackRef = useRef<T>(callback);\n    const lastCalledRef = useRef<number>(0);\n    const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    useEffect(() => {\n        callbackRef.current = callback;\n    }, [callback]);\n\n    useEffect(() => {\n        return () => {\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n            }\n        };\n    }, []);\n\n    return useCallback(\n        (...args: Parameters<T>) => {\n            const now = Date.now();\n            const elapsed = now - lastCalledRef.current;\n\n            if (timeoutRef.current !== null) {\n                clearTimeout(timeoutRef.current);\n                timeoutRef.current = null;\n            }\n\n            if (elapsed >= wait) {\n                lastCalledRef.current = now;\n                callbackRef.current(...args);\n            } else {\n                timeoutRef.current = setTimeout(() => {\n                    lastCalledRef.current = Date.now();\n                    timeoutRef.current = null;\n                    callbackRef.current(...args);\n                }, wait - elapsed);\n            }\n        },\n        [wait]\n    ) as T;\n}\n"],"names":["callback","wait","callbackRef","useRef","lastCalledRef","timeoutRef","useEffect","current","clearTimeout","useCallback","args","now","Date","elapsed","setTimeout"],"mappings":"wDAGM,SACFA,EACAC,GAEA,MAAMC,EAAcC,EAAAA,OAAUH,GACxBI,EAAgBD,EAAAA,OAAe,GAC/BE,EAAaF,EAAAA,OAA6C,MAchE,OAZAG,EAAAA,WAAU,KACNJ,EAAYK,QAAUP,CAAQ,GAC/B,CAACA,IAEJM,EAAAA,WAAU,IACC,KACwB,OAAvBD,EAAWE,SACXC,aAAaH,EAAWE,QAC5B,GAEL,IAEIE,EAAAA,aACH,IAAIC,KACA,MAAMC,EAAMC,KAAKD,MACXE,EAAUF,EAAMP,EAAcG,QAET,OAAvBF,EAAWE,UACXC,aAAaH,EAAWE,SACxBF,EAAWE,QAAU,MAGrBM,GAAWZ,GACXG,EAAcG,QAAUI,EACxBT,EAAYK,WAAWG,IAEvBL,EAAWE,QAAUO,YAAW,KAC5BV,EAAcG,QAAUK,KAAKD,MAC7BN,EAAWE,QAAU,KACrBL,EAAYK,WAAWG,EAAK,GAC7BT,EAAOY,EACd,GAEJ,CAACZ,GAET"}

package/countdown-timer/countdown-timer.d.ts

@@ -1,2 +1,8 @@
 import type { CountdownTimerProps } from "./types";
+/**
+ * Displays a live countdown of time remaining until a deadline.
+ *
+ * Use when a time-limited interaction — such as a session timeout or a timed
+ * form — needs a persistent visual reminder.
+ */
 export declare const CountdownTimer: ({ className, align, timer, timestamp, notifyTimer, offset, mobileOffset, show, fixed, reminderInterval, "data-testid": testId, onFinish, onNotify, onTick, ...otherProps }: CountdownTimerProps) => import("react/jsx-runtime").JSX.Element;

package/countdown-timer/countdown-timer.js.map

@@ -1 +1 @@
-{"version":3,"file":"countdown-timer.js","sources":["../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    formatUnitValue,\n    useApplyStyle,\n    useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const isMounted = useIsMounted();\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useApplyStyle(fixedCountdownRef, {\n        [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n        [styles.tokens.fixedCountdown.left]: formatUnitValue(\n            getOffsetLeft(),\n            \"px\"\n        ),\n        [styles.tokens.fixedCountdown.right]: formatUnitValue(\n            getOffsetRight(),\n            \"px\"\n        ),\n    });\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    function getOffsetLeft() {\n        if (!isMounted || align !== \"left\") return undefined;\n        return offset?.left ?? clientRectX;\n    }\n\n    function getOffsetRight() {\n        if (!isMounted || align !== \"right\") return undefined;\n        return (\n            offset?.right ??\n            Math.floor(document.body.clientWidth - clientRectRight)\n        );\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n                <div className={styles.timeLeft}>Time left:</div>\n                <div\n                    className={styles.timer}\n                    aria-label={getAccessibleTimeText(remainingSeconds)}\n                >\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </div>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderInlineCountdown = () => {\n        return (\n            <div\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                data-warn={!!warn}\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                className={clsx(\n                    styles.countdown,\n                    styles.countdownInline,\n                    !isVisible && styles.countdownHidden\n                )}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        return (\n            <div\n                ref={fixedCountdownRef}\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                data-warn={!!warn}\n                className={clsx(styles.countdown, styles.countdownFixed)}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderInlineCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </div>\n    );\n};\n"],"names":["CountdownTimer","_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}
+{"version":3,"file":"countdown-timer.js","sources":["../../src/countdown-timer/countdown-timer.tsx"],"sourcesContent":["import { ClockIcon } from \"@lifesg/react-icons\";\nimport clsx from \"clsx\";\nimport throttle from \"lodash/throttle\";\nimport { useEffect, useRef, useState } from \"react\";\nimport { useInView } from \"react-intersection-observer\";\n\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport {\n    formatUnitValue,\n    useApplyStyle,\n    useMaxWidthMediaQuery,\n} from \"../theme\";\nimport { useIsMounted } from \"../util\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport * as styles from \"./countdown-timer.styles\";\nimport type { CountdownTimerProps } from \"./types\";\nimport { useTimer } from \"./use-timer\";\n\n/**\n * Displays a live countdown of time remaining until a deadline.\n *\n * Use when a time-limited interaction — such as a session timeout or a timed\n * form — needs a persistent visual reminder.\n */\nexport const CountdownTimer = ({\n    className,\n    align = \"right\",\n    timer,\n    timestamp,\n    notifyTimer,\n    offset,\n    mobileOffset,\n    show,\n    fixed = true,\n    reminderInterval = 120,\n    \"data-testid\": testId,\n    onFinish,\n    onNotify,\n    onTick,\n    ...otherProps\n}: CountdownTimerProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n\n    const wrapperRef = useRef<HTMLDivElement>(null);\n    const fixedCountdownRef = useRef<HTMLDivElement>(null);\n\n    const isNotified = useRef<boolean>(false);\n    const [offsetY, setOffsetY] = useState<number>(0);\n    const [clientRectRight, setClientRectRight] = useState<number>(0);\n    const [clientRectX, setClientRectX] = useState<number>(0);\n    const [isPlaying, setIsPlaying] = useState(false);\n    const [announcement, setAnnouncement] = useState<string>(\"\");\n\n    const isMounted = useIsMounted();\n    const [remainingSeconds, initialSeconds] = useTimer(\n        timer,\n        timestamp,\n        isPlaying\n    );\n    const { ref: stickyRef, inView } = useInView({\n        threshold: 1,\n        rootMargin: `${offsetY * -1}px 0px 0px 0px`,\n        initialInView: true,\n    });\n    const isVisible = !fixed || inView;\n    const warn =\n        typeof notifyTimer === \"number\" && remainingSeconds <= notifyTimer;\n\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n\n    useApplyStyle(fixedCountdownRef, {\n        [styles.tokens.fixedCountdown.top]: formatUnitValue(offsetY, \"px\"),\n        [styles.tokens.fixedCountdown.left]: formatUnitValue(\n            getOffsetLeft(),\n            \"px\"\n        ),\n        [styles.tokens.fixedCountdown.right]: formatUnitValue(\n            getOffsetRight(),\n            \"px\"\n        ),\n    });\n\n    useEffect(() => {\n        setIsPlaying(show);\n    }, [show]);\n\n    useEffect(() => {\n        if (remainingSeconds === 0) {\n            performOnFinishHandler();\n        } else if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds <= notifyTimer\n        ) {\n            performOnTickHandler();\n            performOnNotifyHandler();\n        }\n    }, [remainingSeconds]);\n\n    useEffect(() => {\n        const y = getOffsetY();\n        setOffsetY(y);\n    }, [isMobile, offset?.top, mobileOffset?.top]);\n\n    useEffect(() => {\n        if (wrapperRef.current) {\n            const handleResize = throttle(handleWindowResize, 300);\n            handleWindowResize();\n\n            window.addEventListener(\"resize\", handleResize);\n\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n            };\n        }\n    }, [wrapperRef.current]);\n\n    // Announcements\n    useEffect(() => {\n        const timeElapsed = initialSeconds - remainingSeconds;\n        if (timeElapsed === 0) return;\n        // Polite notification\n        if (timeElapsed % reminderInterval === 0) {\n            if (\n                typeof notifyTimer !== \"number\" ||\n                remainingSeconds > notifyTimer\n            ) {\n                setAnnouncement(getAccessibleTimeText(remainingSeconds));\n            }\n        }\n\n        // Assertive notification\n        if (\n            typeof notifyTimer === \"number\" &&\n            remainingSeconds === notifyTimer\n        ) {\n            setAnnouncement(getAccessibleTimeText(remainingSeconds));\n        }\n    }, [remainingSeconds, initialSeconds, reminderInterval, notifyTimer]);\n\n    useEffect(() => {\n        // reset\n        isNotified.current = false;\n    }, [initialSeconds, show]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleWindowResize = () => {\n        if (!wrapperRef.current) return;\n\n        const clientRect = wrapperRef.current.getBoundingClientRect();\n\n        setClientRectX(clientRect.x);\n        setClientRectRight(clientRect.right);\n    };\n\n    const handleOnFocus = () => {\n        const focusMessage = getAccessibleTimeText(remainingSeconds);\n        setAnnouncement(focusMessage);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const performOnTickHandler = () => {\n        if (onTick) {\n            onTick(remainingSeconds);\n        }\n    };\n\n    const performOnNotifyHandler = () => {\n        if (onNotify && !isNotified.current) {\n            isNotified.current = true;\n            onNotify();\n        }\n    };\n\n    const performOnFinishHandler = () => {\n        setIsPlaying(false);\n\n        if (onFinish) onFinish();\n    };\n\n    function getOffsetY() {\n        const desktopTop = offset?.top ?? 168;\n        const mobileTop = mobileOffset?.top ?? 80;\n        const offsetY = isMobile ? mobileTop : desktopTop;\n\n        return offsetY;\n    }\n\n    function getOffsetLeft() {\n        if (!isMounted || align !== \"left\") return undefined;\n        return offset?.left ?? clientRectX;\n    }\n\n    function getOffsetRight() {\n        if (!isMounted || align !== \"right\") return undefined;\n        return (\n            offset?.right ??\n            Math.floor(document.body.clientWidth - clientRectRight)\n        );\n    }\n\n    const getAccessibleTimeText = (seconds: number): string => {\n        const { minutes, seconds: secs } = TimeHelper.toMinutesSeconds(seconds);\n\n        const minuteText = minutes === 1 ? \"minute\" : \"minutes\";\n        const secondText = secs === 1 ? \"second\" : \"seconds\";\n\n        if (minutes > 0 && secs > 0) {\n            return `Time left: ${minutes} ${minuteText} and ${secs} ${secondText}`;\n        } else if (minutes > 0) {\n            return `Time left: ${minutes} ${minuteText}`;\n        } else {\n            return `Time left: ${secs} ${secondText}`;\n        }\n    };\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n\n    const renderPeriodicAndWarningAnnouncement = () => (\n        <VisuallyHidden\n            aria-live={\n                typeof notifyTimer === \"number\" &&\n                remainingSeconds <= notifyTimer\n                    ? \"assertive\"\n                    : \"polite\"\n            }\n            aria-atomic=\"true\"\n        >\n            {announcement}\n        </VisuallyHidden>\n    );\n\n    const renderTimer = () => {\n        const { minutes, seconds } =\n            TimeHelper.toMinutesSeconds(remainingSeconds);\n        const m = minutes !== 1 ? \"mins\" : \"min\";\n        const s = seconds !== 1 ? \"secs\" : \"sec\";\n        return (\n            <>\n                <ClockIcon className={styles.timerIcon} data-warn={!!warn} />\n                <div className={styles.timeLeft}>Time left:</div>\n                <div\n                    className={styles.timer}\n                    aria-label={getAccessibleTimeText(remainingSeconds)}\n                >\n                    {minutes} {m} {String(seconds).padStart(2, \"0\")} {s}\n                </div>\n                {renderPeriodicAndWarningAnnouncement()}\n            </>\n        );\n    };\n\n    const renderInlineCountdown = () => {\n        return (\n            <div\n                data-testid={testId}\n                data-id=\"countdown-wrapper\"\n                data-warn={!!warn}\n                ref={wrapperRef}\n                inert={inertValue(!isVisible)}\n                className={clsx(\n                    styles.countdown,\n                    styles.countdownInline,\n                    !isVisible && styles.countdownHidden\n                )}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    const renderFixedCountdown = () => {\n        return (\n            <div\n                ref={fixedCountdownRef}\n                data-testid={testId}\n                data-id=\"fixed-countdown-wrapper\"\n                data-warn={!!warn}\n                className={clsx(styles.countdown, styles.countdownFixed)}\n                tabIndex={0}\n                role=\"timer\"\n                aria-label=\"Countdown timer\"\n                onFocus={handleOnFocus}\n            >\n                {renderTimer()}\n            </div>\n        );\n    };\n\n    if (!isPlaying && remainingSeconds !== 0) return <></>;\n\n    return (\n        <div className={clsx(styles.wrapper, className)} {...otherProps}>\n            <div ref={stickyRef}></div>\n            {renderInlineCountdown()}\n            {wrapperRef.current && !isVisible && renderFixedCountdown()}\n        </div>\n    );\n};\n"],"names":["CountdownTimer","_a","className","align","timer","timestamp","notifyTimer","offset","mobileOffset","show","fixed","reminderInterval","testId","onFinish","onNotify","onTick","otherProps","__rest","wrapperRef","useRef","fixedCountdownRef","isNotified","offsetY","setOffsetY","useState","clientRectRight","setClientRectRight","clientRectX","setClientRectX","isPlaying","setIsPlaying","announcement","setAnnouncement","isMounted","useIsMounted","remainingSeconds","initialSeconds","useTimer","ref","stickyRef","inView","useInView","threshold","rootMargin","initialInView","isVisible","warn","isMobile","useMaxWidthMediaQuery","useApplyStyle","styles.tokens","fixedCountdown","top","formatUnitValue","left","getOffsetLeft","right","Math","floor","document","body","clientWidth","getOffsetRight","useEffect","performOnFinishHandler","performOnTickHandler","performOnNotifyHandler","y","desktopTop","mobileTop","_b","getOffsetY","current","handleResize","throttle","handleWindowResize","window","addEventListener","removeEventListener","timeElapsed","getAccessibleTimeText","clientRect","getBoundingClientRect","x","handleOnFocus","focusMessage","seconds","minutes","secs","TimeHelper","toMinutesSeconds","minuteText","secondText","renderTimer","m","s","_jsxs","_Fragment","children","_jsx","ClockIcon","styles.timerIcon","styles.timeLeft","styles.timer","String","padStart","VisuallyHidden","Object","assign","clsx","styles.wrapper","inert","inertValue","styles.countdown","styles.countdownInline","styles.countdownHidden","tabIndex","role","onFocus","styles.countdownFixed"],"mappings":"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"}

package/countdown-timer/countdown-timer.styles_ipn1b0.css

@@ -1,8 +1,8 @@
-.wav7a6b{width:100%;}
+@layer fds{.wav7a6b{width:100%;}
 .c1ji5mw9{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);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:var(--fds-spacing-8) var(--fds-spacing-16);border-radius:var(--fds-radius-sm);color:var(--fds-colour-text-primary);border:var(--fds-border-width-010) var(--fds-border-style-solid);border-color:var(--fds-colour-border-primary);background-color:var(--fds-colour-bg);}:where(body.fds-breakpoint-sm-max) .c1ji5mw9{padding:var(--fds-spacing-16);}.c1ji5mw9[data-warn="true"]{color:var(--fds-colour-text-error);border-color:var(--fds-colour-border-error);}
 .csdqyky{opacity:0;}
 .cibq1kp{position:relative;}
 .c1ehax2j{position:fixed;z-index:10;--fds-internal-countdownTimer-fixedCountdown-top:initial;--fds-internal-countdownTimer-fixedCountdown-left:initial;--fds-internal-countdownTimer-fixedCountdown-right:initial;top:var(--fds-internal-countdownTimer-fixedCountdown-top);left:var(--fds-internal-countdownTimer-fixedCountdown-left);right:var(--fds-internal-countdownTimer-fixedCountdown-right);box-shadow:var(--fds-shadow-xs-focus-strong);}:where(body.fds-breakpoint-sm-max) .c1ehax2j{left:0;right:0;border-radius:0;border-left:none;border-right:none;box-shadow:none;}.c1ehax2j[data-warn="true"]{box-shadow:var(--fds-shadow-xs-error-strong);}
 .t6f42l5{font-weight:var(--fds-font-weight-bold);margin-left:var(--fds-spacing-8);margin-right:var(--fds-spacing-24);}:where(body.fds-breakpoint-sm-max) .t6f42l5{margin-right:var(--fds-spacing-48);}
 .t19x1azi{font-weight:var(--fds-font-weight-semibold);margin-left:auto;}
-.t1pvvziw{color:var(--fds-colour-icon-primary);}.t1pvvziw[data-warn="true"]{color:var(--fds-colour-icon-error);}
+.t1pvvziw{color:var(--fds-colour-icon-primary);}.t1pvvziw[data-warn="true"]{color:var(--fds-colour-icon-error);}}

package/countdown-timer/types.d.ts

@@ -8,37 +8,81 @@ interface Offset {
 interface MobileOffset {
     top?: number | undefined;
 }
+/** Base props shared by both the `timer`-based and `timestamp`-based variants. */
 interface CountdownTimerBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     "data-testid"?: string | undefined;
-    /** To show/play the countdown timer */
+    /** Controls whether the timer is visible and actively counting down. */
     show: boolean;
+    /**
+     * When `true`, the timer switches to a fixed viewport overlay once its
+     * inline position scrolls out of view, keeping the countdown visible at
+     * all times.
+     *
+     * @default true
+     */
     fixed?: boolean | undefined;
-    /** Specifies a timer (in seconds) for notifications */
+    /**
+     * Remaining-seconds threshold at which the warning state activates.
+     * Once the countdown reaches this value, `onNotify` fires once and
+     * `onTick` fires every second until the timer finishes.
+     */
     notifyTimer?: number | undefined;
-    /** Allows customization of the sticky position in tablet/desktop view */
+    /**
+     * Fine-tunes the fixed overlay position on tablet and desktop viewports.
+     *
+     * @remarks `top` defaults to 168 when not provided; `left`/`right`
+     * fall back to the bounding-rect of the inline wrapper.
+     */
     offset?: Offset | undefined;
-    /** Allows customization of the sticky position in mobile only */
+    /**
+     * Fine-tunes the fixed overlay position on mobile viewports.
+     *
+     * @default { top: 80 }
+     */
     mobileOffset?: MobileOffset | undefined;
-    /** Specifies if the component is aligned to its left or right in its sticky position */
+    /**
+     * Side of the inline wrapper the fixed overlay is pinned to when
+     * scrolled into sticky mode.
+     *
+     * @default "right"
+     */
     align?: AlignPosition | undefined;
-    /** Called every second with the remaining time left when the timer value falls below the `notifyTimer` threshold */
+    /**
+     * Called every second with the remaining seconds once the countdown falls
+     * at or below `notifyTimer`.
+     */
     onTick?: ((seconds: number) => void) | undefined;
-    /** Called when the timer value falls below the specified `notifyTimer` threshold */
+    /**
+     * Called once when the remaining seconds first reach the `notifyTimer`
+     * threshold.
+     *
+     * @remarks Fires at most once per timer session; resets when `show` or
+     * `timer`/`timestamp` changes.
+     */
     onNotify?: (() => void) | undefined;
-    /** Called when countdown reaches 0 */
+    /** Called when the countdown reaches zero. */
     onFinish?: (() => void) | undefined;
-    /** Specifies the interval (in seconds) between polite announcements of the remaining time left */
+    /**
+     * Interval in seconds between polite screen-reader announcement of the
+     * remaining time while the timer is above the `notifyTimer`
+     * threshold.
+     *
+     * @default 120
+     */
     reminderInterval?: number | undefined;
 }
+/** Props for the duration-based variant. */
 interface TimerProps extends CountdownTimerBaseProps {
-    /** Specifies the countdown timer (in seconds) */
+    /** Duration of the countdown in seconds. */
     timer: number;
     timestamp?: number | undefined;
 }
+/** Props for the deadline-based variant. */
 interface TimestampProps extends CountdownTimerBaseProps {
-    /** Specifies the timestamp at which the countdown ends (milliseconds since Jan 1, 1970) */
+    /** Unix timestamp (milliseconds since Jan 1, 1970) at which the countdown ends. */
     timestamp: number;
     timer?: number | undefined;
 }
+/** Props for `CountdownTimer` component. */
 export type CountdownTimerProps = TimerProps | TimestampProps;
 export {};

package/dashed-border/dashed-border.d.ts

@@ -1,2 +1,8 @@
 import type { DashedBorderProps } from "./types";
+/**
+ * A container that renders a dashed border using an SVG overlay.
+ *
+ * Use when you need a dashed visual boundary around content — for example, drop zones,
+ * placeholder regions, or empty-state containers.
+ */
 export declare const DashedBorder: (props: DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;

package/dashed-border/dashed-border.js.map

@@ -1 +1 @@
-{"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+qCAeA,MAqFaA,EAAeC,GArFV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}
+{"version":3,"file":"dashed-border.js","sources":["../../src/dashed-border/dashed-border.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { forwardRef, useRef } from \"react\";\n\nimport { BorderThickness, Colour, Radius, useApplyStyle } from \"../theme\";\nimport { toCssValue, useResolvedTokenValue } from \"../theme/utils\";\nimport { mergeRefs } from \"../util\";\nimport {\n    isColourToken,\n    isRadiusToken,\n    isThicknessToken,\n} from \"../util/styling-helper\";\nimport * as styles from \"./dashed-border.styles\";\nimport { createSvgBackgroundImage } from \"./dashed-border.utils\";\nimport type { DashedBorderProps } from \"./types\";\n\nconst Component = (\n    props: DashedBorderProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    const {\n        enabled = true,\n        thickness = BorderThickness[\"width-010\"],\n        radius = Radius[\"none\"],\n        colour = Colour[\"border\"],\n        backgroundColor,\n        className,\n        children,\n        ...otherProps\n    } = props;\n\n    const effectiveThickness = useResolvedTokenValue({\n        value: thickness,\n        fallback: BorderThickness[\"width-010\"],\n        isToken: isThicknessToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveRadius = useResolvedTokenValue({\n        value: radius,\n        fallback: Radius[\"none\"],\n        isToken: isRadiusToken,\n        normalizeCustom: toCssValue,\n    });\n\n    const effectiveColour = useResolvedTokenValue({\n        value: colour,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const effectiveBackgroundColor = useResolvedTokenValue({\n        value: backgroundColor,\n        fallback: \"none\",\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const showSvg = enabled || !!backgroundColor;\n    const overlayBackgroundImage = createSvgBackgroundImage({\n        radius: effectiveRadius,\n        colour: effectiveColour,\n        thickness: effectiveThickness,\n        enabled,\n    });\n    const rootRef = useRef<HTMLDivElement>(null);\n    const overlayRef = useRef<HTMLDivElement>(null);\n    const mergedRootRef = ref ? mergeRefs(rootRef, ref) : rootRef;\n\n    useApplyStyle(rootRef, {\n        [styles.tokens.rootRadius]: effectiveRadius,\n        [styles.tokens.rootBackgroundColor]: backgroundColor\n            ? effectiveBackgroundColor\n            : null,\n    });\n\n    useApplyStyle(overlayRef, {\n        [styles.tokens.overlayBackgroundImage]: showSvg\n            ? overlayBackgroundImage\n            : null,\n    });\n\n    return (\n        <div\n            ref={mergedRootRef}\n            className={clsx(styles.root, className)}\n            {...otherProps}\n        >\n            {showSvg && (\n                <div\n                    aria-hidden=\"true\"\n                    className={styles.overlay}\n                    ref={overlayRef}\n                />\n            )}\n            {children}\n        </div>\n    );\n};\n\n/**\n * A container that renders a dashed border using an SVG overlay.\n *\n * Use when you need a dashed visual boundary around content — for example, drop zones,\n * placeholder regions, or empty-state containers.\n */\nexport const DashedBorder = forwardRef(Component);\n"],"names":["DashedBorder","forwardRef","props","ref","enabled","thickness","BorderThickness","radius","Radius","colour","Colour","backgroundColor","className","children","otherProps","__rest","effectiveThickness","useResolvedTokenValue","value","fallback","isToken","isThicknessToken","normalizeCustom","toCssValue","effectiveRadius","isRadiusToken","effectiveColour","isColourToken","String","effectiveBackgroundColor","showSvg","overlayBackgroundImage","createSvgBackgroundImage","rootRef","useRef","overlayRef","mergedRootRef","mergeRefs","useApplyStyle","styles.tokens","rootRadius","rootBackgroundColor","_jsxs","Object","assign","clsx","styles.root","_jsx","styles.overlay"],"mappings":"+qCAeA,MA2FaA,EAAeC,GA3FV,CACdC,EACAC,KAEA,MAAMC,QACFA,GAAU,EAAIC,UACdA,EAAYC,EAAgB,aAAYC,OACxCA,EAASC,EAAa,KAACC,OACvBA,EAASC,EAAe,OAACC,gBACzBA,EAAeC,UACfA,EAASC,SACTA,GAEAX,EADGY,EAAUC,EACbb,EATE,CAAA,UAAA,YAAA,SAAA,SAAA,kBAAA,YAAA,aAWAc,EAAqBC,EAAsB,CAC7CC,MAAOb,EACPc,SAAUb,EAAgB,aAC1Bc,QAASC,EACTC,gBAAiBC,IAGfC,EAAkBP,EAAsB,CAC1CC,MAAOX,EACPY,SAAUX,EAAa,KACvBY,QAASK,EACTH,gBAAiBC,IAGfG,EAAkBT,EAAsB,CAC1CC,MAAOT,EACPU,SAAUT,EAAe,OACzBU,QAASO,EACTL,gBAAiBM,SAGfC,EAA2BZ,EAAsB,CACnDC,MAAOP,EACPQ,SAAU,OACVC,QAASO,EACTL,gBAAiBM,SAGfE,EAAU1B,KAAaO,EACvBoB,EAAyBC,EAAyB,CACpDzB,OAAQiB,EACRf,OAAQiB,EACRrB,UAAWW,EACXZ,YAEE6B,EAAUC,EAAuB,MACjCC,EAAaD,EAAuB,MACpCE,EAAgBjC,EAAMkC,EAAUJ,EAAS9B,GAAO8B,EAetD,OAbAK,EAAcL,EAAS,CACnB,CAACM,EAAcC,YAAahB,EAC5B,CAACe,EAAcE,qBAAsB9B,EAC/BkB,EACA,OAGVS,EAAcH,EAAY,CACtB,CAACI,EAAcR,wBAAyBD,EAClCC,EACA,OAINW,EAAA,MAAAC,OAAAC,OAAA,CACIzC,IAAKiC,EACLxB,UAAWiC,EAAKC,EAAalC,IACzBE,EAAU,CAAAD,SAAA,CAEbiB,GACGiB,uBACgB,OACZnC,UAAWoC,EACX7C,IAAKgC,IAGZtB,KACC"}

package/dashed-border/dashed-border.styles_zszoox.css

@@ -1,2 +1,2 @@
-.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
-.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}
+@layer fds{.r1c3yh16{position:relative;overflow:hidden;border-radius:var(--fds-internal-dashedBorder-root-radius, 0);background-color:var(--fds-internal-dashedBorder-root-backgroundColor, transparent);}
+.okel4vg{position:absolute;inset:0;width:100%;height:100%;background-image:var(--fds-internal-dashedBorder-overlay-backgroundImage, none);background-repeat:no-repeat;-webkit-background-position:center;background-position:center;-webkit-background-size:100% 100%;background-size:100% 100%;pointer-events:none;}}

package/dashed-border/types.d.ts

@@ -2,16 +2,38 @@ import type { BorderThickness, ColourCSSVariableString, RadiusCSSVariableString
 import type { ValueOf } from "../util/utility-types";
 type CustomCssValue = number | (string & {});
 type CustomCssString = string & {};
+/** Props for the `DashedBorder` component. */
 export interface DashedBorderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "color" | "style"> {
-    /** Optional background fill behind the dashed overlay. */
+    /**
+     * Optional background fill applied inside the container, behind the dashed overlay.
+     *
+     * @remarks If this prop is provided, the background colour remains
+     * visible even when `enabled` is `false`
+     */
     backgroundColor?: ColourCSSVariableString | CustomCssString | undefined;
-    /** Border stroke colour for the dashed border. */
+    /**
+     * Stroke colour for the dashed border.
+     *
+     * @default Colour["border"]
+     */
     colour?: ColourCSSVariableString | CustomCssString | undefined;
-    /** Enables or disables rendering of the dashed stroke. */
+    /**
+     * Whether the dashed stroke is rendered.
+     *
+     * @default true
+     */
     enabled?: boolean | undefined;
-    /** Border radius of the dashed container. */
+    /**
+     * Corner radius of the container and the dashed stroke.
+     *
+     * @default Radius["none"]
+     */
     radius?: RadiusCSSVariableString | CustomCssValue | undefined;
-    /** Border thickness of the dashed stroke. */
+    /**
+     * Width of the dashed stroke.
+     *
+     * @default BorderThickness["width-010"]
+     */
     thickness?: ValueOf<typeof BorderThickness> | CustomCssValue | undefined;
 }
 export {};

package/data-table/data-table.d.ts

@@ -1,2 +1,10 @@
 import type { DataTableProps } from "./types";
+/**
+ * Renders a sortable, selectable data table with scroll-aware action bar and loading state support.
+ *
+ * Use `DataTable` when presenting structured multi-column data that users may need to sort by
+ * column or select rows for bulk actions. Row selection, sort indicators, and the action bar
+ * content are all externally controlled; the component manages scroll detection, sticky-header
+ * positioning, and floating action bar behaviour internally.
+ */
 export declare const DataTable: ({ id, headers, rows, className, sortIndicators, alternatingRows, loadState, enableMultiSelect, selectedIds, disabledIds, enableActionBar, enableSelectAll, enableStickyHeader, emptyView, actionBarContent, renderCustomEmptyView, onHeaderClick, onSelect, onSelectAll, onClearSelectionClick, ...otherProps }: DataTableProps) => import("react/jsx-runtime").JSX.Element;