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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"section-item.styles.js","sources":["../../src/uneditable-section/section-item.styles.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport styled, { css } from \"styled-components\";\n\nimport { Alert } from \"../alert\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { V3_Colour, V3_Font, V3_MediaQuery } from \"../v3_theme\";\nimport type { UneditableSectionItemDisplayWidth } from \"./types\";\n\n// =============================================================================\n// STYLING INTERFACES\n// =============================================================================\ninterface ContainerStyleProps {\n    $widthStyle: UneditableSectionItemDisplayWidth;\n    $fullWidth?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.li<ContainerStyleProps>`\n    display: flex;\n    flex-direction: column;\n\n    ${(props) => {\n        switch (props.$widthStyle) {\n            case \"half\":\n                return css`\n                    grid-column: auto / span ${props.$fullWidth ? 1 : 4};\n                `;\n            case \"full\":\n                return css`\n                    grid-column: auto / span ${props.$fullWidth ? 2 : 8};\n                `;\n        }\n    }}\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        grid-column: 1 / -1;\n    }\n\n    overflow-wrap: break-word;\n`;\n\nexport const IconContainer = styled.div`\n    display: flex;\n    height: 100%;\n    align-items: center;\n    justify-content: center;\n    color: ${V3_Colour[\"icon-primary\"]};\n    margin-left: 0.5rem;\n\n    svg {\n        width: ${V3_Font.Spec[\"body-size-baseline\"]};\n        height: ${V3_Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n\nexport const Clickable = styled.button`\n    ${V3_Font[\"body-baseline-regular\"]}\n    color: ${V3_Colour[\"text\"]};\n    border: none;\n    background: transparent;\n    padding: 0;\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    overflow-wrap: anywhere;\n    text-align: left;\n\n    span {\n        overflow-wrap: anywhere;\n        text-align: left;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const LoadingLabel = styled.span`\n    color: ${V3_Colour[\"text-disabled\"]};\n`;\n\nexport const Spinner = styled(ComponentLoadingSpinner)`\n    margin-right: 0.5rem;\n    color: ${V3_Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const ErrorIcon = styled(ExclamationTriangleIcon)`\n    color: ${V3_Colour[\"icon-warning\"]};\n    margin-right: 0.5rem;\n    height: ${V3_Font.Spec[\"body-size-baseline\"]};\n    width: ${V3_Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const ErrorLabel = styled.span`\n    color: ${V3_Colour[\"text-warning\"]};\n`;\n\nexport const TryAgainLabel = styled.span`\n    ${V3_Font[\"body-baseline-semibold\"]}\n    color: ${V3_Colour[\"hyperlink\"]};\n    text-decoration: underline;\n    margin-left: 0.5rem;\n`;\n\nexport const StyledAlert = styled(Alert)`\n    margin-top: 0.5rem;\n`;\n"],"names":["Container","styled","li","props","$widthStyle","css","$fullWidth","V3_MediaQuery","MaxWidth","lg","IconContainer","div","V3_Colour","V3_Font","Spec","Clickable","button","LoadingLabel","span","Spinner","ComponentLoadingSpinner","ErrorIcon","ExclamationTriangleIcon","ErrorLabel","TryAgainLabel","StyledAlert","Alert"],"mappings":"oWAmBO,MAAMA,EAAYC,EAAOC,EAAuB;;;;MAIhDC,IACC,OAAQA,EAAMC,aACV,IAAK,OACD,OAAOC,CAAG;+CACqBF,EAAMG,WAAa,EAAI;kBAE1D,IAAK,OACD,OAAOD,CAAG;+CACqBF,EAAMG,WAAa,EAAI;;;MAKhEC,EAAcC,SAASC;;;;;EAOhBC,EAAgBT,EAAOU,GAAG;;;;;aAK1BC,EAAU;;;;iBAINC,EAAQC,KAAK;kBACZD,EAAQC,KAAK;;EAIlBC,EAAYd,EAAOe,MAAM;MAChCH,EAAQ;aACDD,EAAgB;;;;;;;;;;;;;;EAmBhBK,EAAehB,EAAOiB,IAAI;aAC1BN,EAAU;EAGVO,EAAUlB,EAAOmB,EAAwB;;aAEzCR,EAAU;EAMVS,EAAYpB,EAAOqB,EAAwB;aAC3CV,EAAU;;cAETC,EAAQC,KAAK;aACdD,EAAQC,KAAK;EAGbS,EAAatB,EAAOiB,IAAI;aACxBN,EAAU;EAGVY,EAAgBvB,EAAOiB,IAAI;MAClCL,EAAQ;aACDD,EAAqB;;;EAKrBa,EAAcxB,EAAOyB,EAAM;;"}
+{"version":3,"file":"section-item.styles.js","sources":["../../src/uneditable-section/section-item.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, Font, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const container = css`\n    display: flex;\n    flex-direction: column;\n    overflow-wrap: break-word;\n\n    &[data-width=\"half\"] {\n        grid-column: auto / span 4;\n\n        &[data-full-width=\"true\"] {\n            grid-column: auto / span 1;\n        }\n    }\n\n    &[data-width=\"full\"] {\n        grid-column: auto / span 8;\n\n        &[data-full-width=\"true\"] {\n            grid-column: auto / span 2;\n        }\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        &[data-width=\"half\"],\n        &[data-width=\"full\"] {\n            grid-column: 1 / -1;\n\n            &[data-full-width=\"true\"] {\n                grid-column: 1 / -1;\n            }\n        }\n    }\n`;\n\nexport const iconContainer = css`\n    display: flex;\n    height: 100%;\n    align-items: center;\n    justify-content: center;\n    color: ${Colour[\"icon-primary\"]};\n    margin-left: 0.5rem;\n\n    svg {\n        width: ${Font.Spec[\"body-size-baseline\"]};\n        height: ${Font.Spec[\"body-size-baseline\"]};\n    }\n`;\n\nexport const clickable = css`\n    ${Font[\"body-baseline-regular\"]}\n    color: ${Colour[\"text\"]};\n    border: none;\n    background: transparent;\n    padding: 0;\n    display: flex;\n    cursor: pointer;\n    align-items: center;\n    overflow-wrap: anywhere;\n    text-align: left;\n\n    span {\n        overflow-wrap: anywhere;\n        text-align: left;\n    }\n`;\n\n// -----------------------------------------------------------------------------\n// LOADING DISPLAY\n// -----------------------------------------------------------------------------\nexport const loadingLabel = css`\n    color: ${Colour[\"text-disabled\"]};\n`;\n\nexport const spinner = css`\n    margin-right: 0.5rem;\n    color: ${Colour[\"text-disabled\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// ERROR DISPLAY\n// -----------------------------------------------------------------------------\nexport const errorIcon = css`\n    color: ${Colour[\"icon-warning\"]};\n    margin-right: 0.5rem;\n    height: ${Font.Spec[\"body-size-baseline\"]};\n    width: ${Font.Spec[\"body-size-baseline\"]};\n`;\n\nexport const errorLabel = css`\n    color: ${Colour[\"text-warning\"]};\n`;\n\nexport const tryAgainLabel = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"hyperlink\"]};\n    text-decoration: underline;\n    margin-left: 0.5rem;\n`;\n\nexport const alert = css`\n    margin-top: 0.5rem;\n`;\n"],"names":["container","iconContainer","clickable","loadingLabel","spinner","errorIcon","errorLabel","tryAgainLabel","alert"],"mappings":"4EAOO,MAAMA,EAAS,UAiCTC,EAAa,UAcbC,EAAS,UAqBTC,EAAY,WAIZC,EAAO,WAQPC,EAAS,WAOTC,EAAU,WAIVC,EAAa,WAObC,EAAK"}

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

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

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

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

package/uneditable-section/uneditable-section.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport {\n    CustomSection,\n    Description,\n    FullWidthWrapper,\n    GridUl,\n    Title,\n    Wrapper,\n} from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n    items,\n    title,\n    description,\n    topSection,\n    bottomSection,\n    children,\n    background = true,\n    stretch,\n    fullWidth,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    ...otherProps\n}: UneditableSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <GridUl $stretch={stretch} $fullWidth={fullWidth}>\n                    {renderedItems}\n                </GridUl>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Title\n                        forwardedAs=\"h2\"\n                        weight=\"semibold\"\n                        $stretch={stretch}\n                    >\n                        {title}\n                    </Title>\n                )}\n                {description && (\n                    <Description $stretch={stretch}>{description}</Description>\n                )}\n                {topSection && (\n                    <CustomSection data-id=\"top-section\" $stretch={stretch}>\n                        {topSection}\n                    </CustomSection>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <CustomSection data-id=\"bottom-section\" $stretch={stretch}>\n                        {bottomSection}\n                    </CustomSection>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <FullWidthWrapper $background={background} {...otherProps}>\n                {renderChildren()}\n            </FullWidthWrapper>\n        );\n    }\n    return (\n        <Wrapper $background={background} {...otherProps} type=\"grid\">\n            {renderChildren()}\n        </Wrapper>\n    );\n};\n"],"names":["UneditableSectionBase","_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","GridUl","$stretch","$fullWidth","renderChildren","_jsxs","_Fragment","Title","forwardedAs","weight","Description","CustomSection","FullWidthWrapper","$background","Wrapper","type"],"mappings":"mTAcO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,GAAUZ,EACPa,EAAUC,EAAAd,EAbqB,6IAkBlC,MAAMe,EAAkBC,GAAqC,KACrDN,GAAQA,EAAOM,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDL,GAAUA,EAASK,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDJ,GAAYA,EAAWI,EAAK,EAM9BG,EAAc,KAChB,GAAIlB,GAASA,EAAMmB,OAAS,EAAG,CAC3B,MAAMC,EAAgBpB,EAAMqB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRN,OAAQK,EAAeC,GACvBL,SAAUM,EAAiBD,GAC3BJ,WAAYM,EAAeF,GAC3BP,UAAWA,IALNc,KAUjB,OACIC,EAACI,EAAM,CAAAC,SAAWrB,EAAOsB,WAAcrB,EAASH,SAC3Ce,GAGb,CAEA,OAAO,IAAI,EAGTU,EAAiB,IACfzB,GAKA0B,EAAAC,EAAA,CAAA3B,SAAA,CACKJ,GACGsB,EAACU,EAAK,CACFC,YAAY,KACZC,OAAO,WAAUP,SACPrB,EAAOF,SAEhBJ,IAGRC,GACGqB,EAACa,EAAW,CAAAR,SAAWrB,EAAOF,SAAGH,IAEpCC,GACGoB,EAACc,EAAa,CAAA,UAAS,cAAaT,SAAWrB,EAAOF,SACjDF,IAGRe,IACAd,GACGmB,EAACc,aAAsB,iBAAgBT,SAAWrB,EAAOF,SACpDD,OAOrB,OAAII,EAEIe,EAACe,EAAgBb,OAAAC,OAAA,CAAAa,YAAcjC,GAAgBM,EAAU,CAAAP,SACpDyB,OAKTP,EAACiB,EAAOf,OAAAC,OAAA,CAAAa,YAAcjC,GAAgBM,EAAU,CAAE6B,KAAK,OAAMpC,SACxDyB,MACK"}
+{"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n    items,\n    title,\n    description,\n    topSection,\n    bottomSection,\n    children,\n    background = true,\n    stretch,\n    fullWidth,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    className,\n    ...otherProps\n}: UneditableSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n"],"names":["UneditableSectionBase","_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type"],"mappings":"qdAWO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASb,EACNc,EAAUC,EAAAf,EAdqB,yJAmBlC,MAAMgB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAA,KAAA,CACIZ,UAAWgB,EACPC,EACAtB,GAAWuB,EACXtB,GAAauB,GAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAC,EAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAACW,EAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EACPW,EACAhC,GAAWuB,GACdzB,SAEAJ,IAGRC,GACGsB,EAACW,EAAWK,OAAM,CACd5B,UAAWgB,EACPa,EACAlC,GAAWuB,YAGd5B,IAGRC,GACGqB,EAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAD,OAOrB,OAAII,EAEIgB,uBACIZ,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,YAEHmB,OAKTR,EAACoB,EAAOC,QAAOnB,OAAAC,OAAA,CACXf,UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY"}

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.styles.js","sources":["../../src/uneditable-section/uneditable-section.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour, V3_MediaQuery } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface WrapperStyleProps {\n    $background: boolean;\n}\n\ninterface ContentStyleProps {\n    $stretch: boolean | undefined;\n}\n\ninterface GridStyleProps extends ContentStyleProps {\n    $fullWidth?: boolean | undefined;\n}\n// =============================================================================\n// STYLING\n// =============================================================================\nconst columnWidthStyle = css<ContentStyleProps>`\n    grid-column: ${(props) => (props.$stretch ? \"1 / -1\" : \"span 8\")};\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        grid-column: 1 / -1;\n    }\n`;\n\nexport const Wrapper = styled(Layout.Content)<WrapperStyleProps>`\n    background: ${({ $background }) =>\n        $background ? V3_Colour[\"bg-strong\"] : \"transparent\"};\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n`;\n\nexport const FullWidthWrapper = styled.div<WrapperStyleProps>`\n    background: ${({ $background }) =>\n        $background ? V3_Colour[\"bg-strong\"] : \"transparent\"};\n`;\n\nexport const Title = styled(Typography.HeadingSM)<ContentStyleProps>`\n    margin-bottom: 1rem;\n    ${columnWidthStyle}\n`;\n\nexport const Description = styled(Typography.BodyBL)<ContentStyleProps>`\n    margin-bottom: 2rem;\n    ${columnWidthStyle}\n`;\n\nexport const CustomSection = styled.div<ContentStyleProps>`\n    ${columnWidthStyle}\n`;\n\nexport const GridUl = styled.ul<GridStyleProps>`\n    ${columnWidthStyle}\n    column-gap: 2rem;\n    row-gap: 2rem;\n    display: grid;\n    grid-template-columns: ${({ $fullWidth }) =>\n        $fullWidth ? \"repeat(2, minmax(0, 1fr))\" : \"repeat(8, minmax(0, 1fr))\"};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        column-gap: 1.5rem;\n    }\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        column-gap: 1rem;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: 2rem;\n    }\n`;\n"],"names":["columnWidthStyle","css","props","$stretch","V3_MediaQuery","MaxWidth","sm","Wrapper","styled","Layout","Content","$background","V3_Colour","FullWidthWrapper","div","Title","Typography","HeadingSM","Description","BodyBL","CustomSection","GridUl","ul","$fullWidth","lg"],"mappings":"+MAuBA,MAAMA,EAAmBC,CAAsB;mBAC3BC,GAAWA,EAAMC,SAAW,SAAW;;MAErDC,EAAcC,SAASC;;;EAKhBC,EAAUC,EAAOC,EAAOC,QAA2B;kBAC9C,EAAGC,iBACbA,EAAcC,EAAU,aAAe;;;EAKlCC,EAAmBL,EAAOM,GAAsB;kBAC3C,EAAGH,iBACbA,EAAcC,EAAU,aAAe;EAGlCG,EAAQP,EAAOQ,EAAWC,UAA6B;;MAE9DjB;EAGOkB,EAAcV,EAAOQ,EAAWG,OAA0B;;MAEjEnB;EAGOoB,EAAgBZ,EAAOM,GAAsB;MACpDd;EAGOqB,EAASb,EAAOc,EAAkB;MACzCtB;;;;6BAIuB,EAAGuB,gBACxBA,EAAa,4BAA8B;;MAE7CnB,EAAcC,SAASmB;;;;MAIvBpB,EAAcC,SAASC;;;;;;;"}
+{"version":3,"file":"uneditable-section.styles.js","sources":["../../src/uneditable-section/uneditable-section.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Colour, MediaQuery } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nconst columnWidthBase = `\n    grid-column: span 8;\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-column: 1 / -1;\n    }\n`;\n\nexport const columnWidthStretch = css`\n    grid-column: 1 / -1;\n`;\n\nexport const wrapper = css`\n    padding-top: 2rem;\n    padding-bottom: 2rem;\n`;\n\nexport const wrapperBackground = css`\n    background: ${Colour[\"bg-strong\"]};\n`;\n\nexport const title = css`\n    margin-bottom: 1rem;\n    ${columnWidthBase}\n`;\n\nexport const description = css`\n    margin-bottom: 2rem;\n    ${columnWidthBase}\n`;\n\nexport const customSection = css`\n    ${columnWidthBase}\n`;\n\nexport const gridUl = css`\n    ${columnWidthBase}\n    column-gap: 2rem;\n    row-gap: 2rem;\n    display: grid;\n    grid-template-columns: repeat(8, minmax(0, 1fr));\n\n    ${MediaQuery.MaxWidth.lg} {\n        column-gap: 1.5rem;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        column-gap: 1rem;\n    }\n\n    &:not(:last-child) {\n        margin-bottom: 2rem;\n    }\n`;\n\nexport const gridUlFullWidth = css`\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n\n    ${MediaQuery.MaxWidth.sm} {\n        grid-template-columns: repeat(1, minmax(0, 1fr));\n    }\n`;\n"],"names":["columnWidthStretch","wrapper","wrapperBackground","title","description","customSection","gridUl","gridUlFullWidth"],"mappings":"iFAeO,MAAMA,EAAkB,UAIlBC,EAAO,UAKPC,EAAiB,UAIjBC,EAAK,UAKLC,EAAW,UAKXC,EAAa,UAIbC,EAAM,WAoBNC,EAAe"}

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

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

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

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

package/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 * as inputGroupStyles from \"../input-group/input-group.styles\";\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper\";\nimport { StringHelper, useId, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport {\n    FloorInput,\n    HashContainer,\n    ReadOnlyContainer,\n    ReadOnlyLabel,\n    UnitInput,\n    UnitNumberDivider,\n} from \"./unit-number-input.style\";\n\ntype FieldType = \"floor\" | \"unit\" | \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\nexport const UnitNumberInput = ({\n    disabled,\n    error,\n    value,\n    onChange,\n    onBlur,\n    onChangeRaw,\n    onBlurRaw,\n    readOnly,\n    placeholder = \"00-8888\",\n    autoComplete,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    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            <FloorInput\n                name=\"floor\"\n                maxLength={3}\n                value={floorValue}\n                ref={floorInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,3}\"\n                data-testid=\"floor-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"floor\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[0]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n            />\n            <VisuallyHidden aria-hidden id={floorLabelId}>\n                Enter floor number\n            </VisuallyHidden>\n            <UnitNumberDivider $inactive={floorValue.length === 0}>\n                -\n            </UnitNumberDivider>\n            <UnitInput\n                name=\"unit\"\n                maxLength={5}\n                value={unitValue}\n                ref={unitInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,5}\"\n                data-testid=\"unit-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"unit\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[1]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n            />\n            <VisuallyHidden aria-hidden id={unitLabelId}>\n                Enter unit number\n            </VisuallyHidden>\n            {/** Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n            <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n                {liveMessage}\n            </VisuallyHidden>\n        </>\n    );\n\n    const renderReadOnly = (displayValue: string) => {\n        const displayValueArr = displayValue.split(\"-\");\n        const liveMessageForReadOnly = [\n            formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n            formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n        ].join(\" \");\n\n        return (\n            <ReadOnlyContainer\n                data-testid=\"readonly-display\"\n                tabIndex={0}\n                role=\"textbox\"\n                aria-readonly\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-invalid={ariaInvalid}\n            >\n                <ReadOnlyLabel>{displayValueArr[0]}</ReadOnlyLabel>\n                <UnitNumberDivider>-</UnitNumberDivider>\n                <ReadOnlyLabel>{displayValueArr[1]}</ReadOnlyLabel>\n                <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n            </ReadOnlyContainer>\n        );\n    };\n\n    return (\n        <InputWrapper\n            {...otherProps}\n            ref={nodeRef}\n            onClick={handleNodeClick}\n            disabled={disabled}\n            error={error}\n            readOnly={readOnly}\n            tabIndex={-1}\n            onBlur={handleNodeBlur}\n        >\n            <HashContainer\n                data-testid=\"addon\"\n                className={clsx(\n                    inputGroupStyles.labelAddonContainer,\n                    className\n                )}\n                data-disabled={disabled}\n                data-read-only={readOnly}\n            >\n                #\n            </HashContainer>\n            {readOnly && value ? renderReadOnly(value) : renderInputs()}\n        </InputWrapper>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["UnitNumberInput","_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","INVALID_VALUE","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","HashContainer","clsx","inputGroupStyles.labelAddonContainer","displayValue","displayValueArr","liveMessageForReadOnly","ReadOnlyContainer","role","ReadOnlyLabel","UnitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","FloorInput","maxLength","onFocus","type","pattern","concatIds","styleType","id","$inactive","UnitInput","onKeyDown"],"mappings":"62BAqBO,MAAMA,EAAmBC,IAAA,IAAAC,SAC5BA,EAAQC,MACRA,EAAKC,MACLA,EAAKC,SACLA,EAAQC,OACRA,EAAMC,YACNA,EAAWC,UACXA,EAASC,SACTA,EAAQC,YACRA,EAAc,UAASC,aACvBA,EACA,kBAAmBC,EACnB,mBAAoBC,EACpB,eAAgBC,EAAWC,UAC3BA,GAASd,EACNe,EAAUC,EAAAhB,EAfe,oLAoB5B,MAAOiB,EAAYC,GAAkBC,EAAiB,KAC/CC,EAAWC,GAAiBF,EAAiB,KAC7CG,EAAcC,GAAoBJ,EAAoB,QACvDK,EAAaC,IACbC,EAAe,GAAGF,gBAClBG,EAAc,GAAGH,eACjBI,EAAgB,GAAGJ,iBAEnBK,EAAUC,EAAuB,MACjCC,EAAgBD,EAAyB,MACzCE,EAAeF,EAAyB,MASxCG,EAAqBH,EAAeb,GACpCiB,EAAoBJ,EAAeV,GACnCe,GAAuBL,EAAkBR,GAEzCc,GAAajC,GACfA,EAAMkC,oBAAoBC,QAAQ,gBAAiB,IACjDC,GAAyBC,EAAkB,CAC7CC,IAAKV,EACLK,eAEEM,GAAwBF,EAAkB,CAC5CC,IAAKT,EACLI,eAGEO,GAAcC,GAAQ,KACxB,IAAIC,EAAM,GACV,MAAMC,EAAWC,GAAuB,OAAQ9B,GAC1C+B,EAAUD,GAAuB,OAAQ3B,GAC/C,OAAQE,GACJ,IAAK,QACDuB,EAAMC,EACN,MACJ,IAAK,OACDD,EAAM5B,EAAa,CAAC6B,EAAUE,GAASC,KAAK,KAAOD,EACnD,MACJ,QACIH,EAAM,GAEd,OAAOA,CAAG,GACX,CAACvB,EAAcL,EAAYG,IAKxB8B,GAAiBC,IACnBlB,EAAmBmB,QAAUD,EAC7BjC,EAAeiC,EAAK,EAGlBE,GAAgBF,IAClBjB,EAAkBkB,QAAUD,EAC5B9B,EAAc8B,EAAK,EAGjBG,GAAmBH,IACrBhB,GAAqBiB,QAAUD,EAC/B5B,EAAiB4B,EAAK,EAM1BI,GAAU,KAGe,UAAjBjC,GACsB,IAAtBL,EAAWuC,QACXxB,EAAaoB,SAEbpB,EAAaoB,QAAQK,OACzB,GACD,CAACxC,IAEJsC,GAAU,KACNG,GAAavD,EAAM,GACpB,CAACA,IAKJ,MAAMwD,GAAeC,IACjBN,GAAgBM,EAAMC,OAAOC,MAC7BF,EAAMC,OAAOE,QAAQ,EAGnBC,GAAcJ,IAChB,MAAMK,EAAaL,EAAMC,OAAOC,KAC1BI,EAAcN,EAAMC,OAAO1D,MAC3BgE,EAAiBC,GAAYF,GAEhB,UAAfD,GACAf,GAAciB,GACVA,IAAmBlD,GACnBoD,GAAuBF,EAAgBF,IAErB,SAAfA,IACPZ,GAAac,GACTA,IAAmB/C,GACnBiD,GAAuBF,EAAgBF,GAE/C,EAGEK,GAAgBV,IAClB,MAAMK,EAAaL,EAAMC,OAAOC,KAEhC,GAAmB,UAAfG,EAAwB,CACxB,MAAMM,EAAiBhC,KACvB,IAAKgC,EAAgB,OAErB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAC3CE,IACAvB,GAAcsB,GACdH,GAAuBG,EAAWP,EACtC,MAAO,GAAmB,SAAfA,EAAuB,CAC9B,MAAMM,EAAiB7B,KACvB,IAAK6B,EAAgB,OAErB,MAAMC,UAAEA,EAASC,oBAAEA,GAAwBF,EAC3CE,IACApB,GAAamB,GACbH,GAAuBG,EAAWP,EACtC,GAoBES,GAAiBd,UAKA,cAAfA,EAAMe,MAAsC,cAAdf,EAAMgB,KACf,SAAjBtD,GAAgD,IAArBF,EAAUoC,SAChB,QAArBxD,EAAA+B,EAAcqB,eAAO,IAAApD,GAAAA,EAAEyD,QAE/B,EAMEW,GAAejE,GACV,UAAU0E,KAAK1E,GAChB2E,EAAaC,SAAS5E,GAAO,GAC7BA,EAAMkC,oBAGVqB,GAAgBvD,IAClB,GAAIA,IAAU6E,EAEP,QAAcC,IAAV9E,GAAwC,IAAjBA,EAAMqD,OACpCN,GAAc,IACdG,GAAa,QACV,CACH,MAAM6B,EAAW/E,EAAMgF,MAAM,KAC7B,GAAwB,IAApBD,EAAS1B,OAAc,CAEvB,MAAM4B,EAAQF,EAAS,GACjBG,EAAOH,EAAS,GACtBhC,GACqB,UAAjB5B,EAA2B8D,EAAQhB,GAAYgB,IAEnD/B,GACqB,SAAjB/B,EAA0B+D,EAAOjB,GAAYiB,GAErD,CACJ,GAGEhB,GAAyB,CAC3BiB,EACAC,KAEA,IAAKnF,IAAaE,EACd,OAGJ,MAAMkF,EAA0C,CAC5CJ,MAAOnD,EAAmBmB,QAC1BiC,KAAMnD,EAAkBkB,SAM5B,GAFAoC,EAAOD,GAASD,EAEZlF,EAAU,CACV,MAAMqF,EAAcC,GAAkBF,GACtCpF,EAASqF,EACb,CAEInF,GACAA,EAAY,CAACkF,EAAOJ,MAAOI,EAAOH,MACtC,EAGEM,GAAuB,KACzB,IAAKtF,IAAWE,EACZ,OAGJ,MAAMiF,EAA0C,CAC5CJ,MAAOhB,GAAYnC,EAAmBmB,SACtCiC,KAAMjB,GAAYlC,EAAkBkB,UAGxC,GAAI/C,EAAQ,CACR,MAAMoF,EAAcC,GAAkBF,GACtCnF,EAAOoF,EACX,CAEIlF,GACAA,EAAU,CAACiF,EAAOJ,MAAOI,EAAOH,MACpC,EAGEK,GAAqBF,IACvB,MAAMN,EAAW,CAACM,EAAOJ,MAAOI,EAAOH,MAEvC,OAAIG,EAAOJ,MAAM5B,OAAS,GAAKgC,EAAOH,KAAK7B,OAAS,EACzC0B,EAASjC,KAAK,KACdiC,EAASU,OAAOzF,GAAoB,KAAVA,IAC1B,GAEA6E,CACX,EAGEa,GAAkB1F,GACbA,EAAMgF,MAAM,KAGvB,SAASpC,GAAuB+C,EAAgBC,GAC5C,OAAOA,EAAI,GAAGD,KAAUE,MAAMC,KAAKF,GAAG9C,KAAK,OAAS,EACxD,CAiGA,OACIiD,EAACC,EAAYC,OAAAC,OAAA,GACLtF,EAAU,CACd0B,IAAKZ,EACLyE,QAjOgB,KACC,SAAjBhF,GAA2BS,EAAcqB,SACzCrB,EAAcqB,QAAQK,OAC1B,EA+NIxD,SAAUA,EACVC,MAAOA,EACPM,SAAUA,EACV+F,YACAlG,OAhOgBuD,IAChB/B,EAAQuB,SAAWvB,EAAQuB,QAAQoD,SAAS5C,EAAM6C,gBAIjB,SAAjCtE,GAAqBiB,UACrBE,GAAgB,QAChBqC,KACJ,EAwN0Be,SAAA,CAEtBC,EAACC,EAAa,CAAA,cACE,QACZ9F,UAAW+F,EACPC,EACAhG,GACH,gBACcb,mBACCO,EAAQkG,SAAA,MAI3BlG,GAAYL,EA/CE,CAAC4G,IACpB,MAAMC,EAAkBD,EAAa5B,MAAM,KACrC8B,EAAyB,CAC3BlE,GAAuB,OAAQiE,EAAgB,IAC/CjE,GAAuB,OAAQiE,EAAgB,KACjD/D,KAAK,KAEP,OACIiD,EAACgB,EAAiB,CAAA,cACF,mBACZX,SAAU,EACVY,KAAK,UAAS,iBAAA,EAAA,kBAEGxG,EAAc,mBACbC,iBACJC,EAAW6F,SAAA,CAEzBC,EAACS,EAAa,CAAAV,SAAEM,EAAgB,KAChCL,EAACU,EAAiB,CAAAX,SAAA,MAClBC,EAACS,EAAa,CAAAV,SAAEM,EAAgB,KAChCL,EAACW,YAAgBL,MACD,EA0BCM,CAAepH,GAjHxC+F,EAAAsB,EAAA,CAAAd,SAAA,CACIC,EAACc,EAAU,CACP3D,KAAK,QACL4D,UAAW,EACXvH,MAAOc,EACPwB,IAAKV,EACL4F,QAAShE,GACTtD,OAAQ2D,GACR5D,SAAUkE,GACVrE,SAAUA,EACVO,SAAUA,EACVoH,KAAK,OACLC,QAAQ,8BACI,cAAa,kBACRC,EAAUnH,EAAgBe,GAAa,mBACtCoG,EAAUlH,EAAiBgB,GAAc,eAC7Cf,EACdJ,YACqB,UAAjBa,GAA6Bd,GAAaP,EAEpC4F,GAAepF,GAAa,GAD5B,GAGVC,aAAcA,EACdqH,UAAU,cAEdpB,EAACW,EAAc,CAAA,eAAA,EAAaU,GAAItG,EAAYgF,SAAA,uBAG5CC,EAACU,EAAiB,CAAAY,UAAkC,IAAtBhH,EAAWuC,OAAYkD,SAAA,MAGrDC,EAACuB,EAAS,CACNpE,KAAK,OACL4D,UAAW,EACXvH,MAAOiB,EACPqB,IAAKT,EACL2F,QAAShE,GACTtD,OAAQ2D,GACR5D,SAAUkE,GACV6D,UAAWzD,GACXzE,SAAUA,EACVO,SAAUA,EACVoH,KAAK,OACLC,QAAQ,gBAAe,cACX,aAAY,kBACPC,EAAUnH,EAAgBgB,GAAY,mBACrCmG,EAAUlH,EAAiBgB,kBAC/Bf,EACdJ,YACqB,SAAjBa,GAA4Bd,GAAaP,EAEnC4F,GAAepF,GAAa,GAD5B,GAGVC,aAAcA,EACdqH,UAAU,cAEdpB,EAACW,EAAc,CAAA,eAAA,EAAaU,GAAIrG,iCAIhCgF,EAACW,EAAc,CAACU,GAAIpG,cAAyB,SAAQ8E,SAChD/D,WAqDM,EAOjBqC,EAAgB"}
+{"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":["UnitNumberInput","_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","INVALID_VALUE","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/unit-number/unit-number-input.styles.d.ts

@@ -0,0 +1,7 @@
+export declare const hashContainer: import("@linaria/core").LinariaClassName;
+export declare const input: import("@linaria/core").LinariaClassName;
+export declare const floorInput: import("@linaria/core").LinariaClassName;
+export declare const unitInput: import("@linaria/core").LinariaClassName;
+export declare const unitNumberDivider: import("@linaria/core").LinariaClassName;
+export declare const unitNumberDividerInactive: import("@linaria/core").LinariaClassName;
+export declare const readOnlyContainer: import("@linaria/core").LinariaClassName;

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

@@ -0,0 +1,2 @@
+import"./unit-number-input.styles_8yizj.css";const t="h1ujh1ah",u="i1a7rbgo",r="fqv7th5",i="u1g8qqjx",n="u52196f",s="urthzty",h="rwsbmaf";export{r as floorInput,t as hashContainer,u as input,h as readOnlyContainer,i as unitInput,n as unitNumberDivider,s as unitNumberDividerInactive};
+//# sourceMappingURL=unit-number-input.styles.js.map

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

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

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

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

package/util/styling-helper.js

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

package/util/styling-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"styling-helper.js","sources":["../../src/util/styling-helper.ts"],"sourcesContent":["import type {\n    ColourCSSVariableString,\n    RadiusCSSVariableString,\n} from \"../theme\";\nimport {\n    BorderThickness,\n    isTokenFromSet,\n    isTokenWithPrefix,\n    Radius,\n} from \"../theme\";\nimport type { ValueOf } from \"./utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport const isRadiusToken = (\n    value: unknown\n): value is RadiusCSSVariableString => {\n    return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n    value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n    return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n        value,\n        thicknessTokenSet\n    );\n};\n\nexport const isColourToken = (\n    value: unknown\n): value is ColourCSSVariableString => {\n    return isTokenWithPrefix<ColourCSSVariableString>(\n        value,\n        \"var(--fds-colour-\"\n    );\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","isRadiusToken","value","isTokenFromSet","isThicknessToken","isColourToken","isTokenWithPrefix"],"mappings":"sjBAYA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,IAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,IAE3CC,EACTC,GAEOC,EAAwCD,EAAOR,GAG7CU,EACTF,GAEOC,EACHD,EACAH,GAIKM,EACTH,GAEOI,EACHJ,EACA"}
+{"version":3,"file":"styling-helper.js","sources":["../../src/util/styling-helper.ts"],"sourcesContent":["import type {\n    ColourCSSVariableString,\n    RadiusCSSVariableString,\n} from \"../theme\";\nimport {\n    BorderThickness,\n    isTokenFromSet,\n    isTokenWithPrefix,\n    Radius,\n} from \"../theme\";\nimport type { ValueOf } from \"./utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport const isRadiusToken = (\n    value: unknown\n): value is RadiusCSSVariableString => {\n    return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n    value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n    return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n        value,\n        thicknessTokenSet\n    );\n};\n\nexport const isColourToken = (\n    value: unknown\n): value is ColourCSSVariableString => {\n    return isTokenWithPrefix<ColourCSSVariableString>(\n        value,\n        \"var(--fds-colour-\"\n    );\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","isRadiusToken","value","isTokenFromSet","isThicknessToken","isColourToken","isTokenWithPrefix"],"mappings":"gmBAYA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,IAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,IAE3CC,EACTC,GAEOC,EAAwCD,EAAOR,GAG7CU,EACTF,GAEOC,EACHD,EACAH,GAIKM,EACTH,GAEOI,EACHJ,EACA"}