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

package/typography/typography.d.ts

@@ -1,45 +1,76 @@
-import type { RefObject } from "react";
-import type { IStyledComponent } from "styled-components";
-import type { TypographyLinkProps, TypographyProps } from "./types";
-export declare const HeadingXXL: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingXL: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingLG: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingMD: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingSM: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingXS: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const BodyBL: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLParagraphElement> | undefined;
-}>;
-export declare const BodyMD: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLParagraphElement> | undefined;
-}>;
-export declare const BodySM: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLParagraphElement> | undefined;
-}>;
-export declare const BodyXS: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLParagraphElement> | undefined;
-}>;
-export declare const LinkBL: IStyledComponent<"web", TypographyLinkProps & {
-    ref?: RefObject<HTMLAnchorElement> | undefined;
-}>;
-export declare const LinkMD: IStyledComponent<"web", TypographyLinkProps & {
-    ref?: RefObject<HTMLAnchorElement> | undefined;
-}>;
-export declare const LinkSM: IStyledComponent<"web", TypographyLinkProps & {
-    ref?: RefObject<HTMLAnchorElement> | undefined;
-}>;
-export declare const LinkXS: IStyledComponent<"web", TypographyLinkProps & {
-    ref?: RefObject<HTMLAnchorElement> | undefined;
-}>;
+import React from "react";
+import type { TypographyLinkProps, TypographyWeight } from "./types";
+export declare const HeadingXXL: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingXL: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingLG: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingMD: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingSM: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingXS: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const BodyBL: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const BodyMD: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const BodySM: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const BodyXS: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const LinkBL: (props: TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkMD: (props: TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkSM: (props: TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkXS: (props: TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;

package/typography/typography.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a,jsxs as i}from"react/jsx-runtime";import n from"react";import{TypographyBase as r,HyperlinkBase as t,StyledExternalIcon as d}from"./typography.styles.js";const s=(i,t,d)=>{const s=(n,d)=>{var{weight:s,inline:g,paragraph:h,maxLines:l}=n,o=e(n,["weight","inline","paragraph","maxLines"]);return a(r,Object.assign({ref:d,as:g?"span":i,$textStyle:t,$weight:s,$inline:g,$paragraph:h,$maxLines:l},o))};return s.displayName=`Typography.${d}`,n.forwardRef(s)},g=s("h1","heading-xxl","HeadingXXL"),h=s("h2","heading-xl","HeadingXL"),l=s("h3","heading-lg","HeadingLG"),o=s("h4","heading-md","HeadingMD"),p=s("h5","heading-sm","HeadingSM"),y=s("h6","heading-xs","HeadingXS"),m=(i,t)=>{const d=(n,t)=>{var{weight:d,inline:s,paragraph:g,maxLines:h}=n,l=e(n,["weight","inline","paragraph","maxLines"]);return a(r,Object.assign({ref:t,as:s?"span":"p",$textStyle:i,$weight:d,$inline:s,$paragraph:g,$maxLines:h},l))};return d.displayName=`Typography.${t}`,n.forwardRef(d)},x=m("body-baseline","BodyBL"),$=m("body-md","BodyMD"),L=m("body-sm","BodySM"),b=m("body-xs","BodyXS"),f=(r,s)=>{const g=(n,s)=>{var{weight:g,children:h,external:l,underlineStyle:o="underline"}=n,p=e(n,["weight","children","external","underlineStyle"]);return i(t,Object.assign({ref:s,$textStyle:r,$weight:g,$underlineStyle:o},p,{children:[h,l&&a(d,{})]}))};return g.displayName=`Typography.${s}`,n.forwardRef(g)},c=f("body-baseline","LinkBL"),u=f("body-md","LinkMD"),w=f("body-sm","LinkSM"),S=f("body-xs","LinkXS");export{x as BodyBL,$ as BodyMD,L as BodySM,b as BodyXS,l as HeadingLG,o as HeadingMD,p as HeadingSM,h as HeadingXL,y as HeadingXS,g as HeadingXXL,c as LinkBL,u as LinkMD,w as LinkSM,S as LinkXS};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{ExternalIcon as i}from"@lifesg/react-icons/external";import s from"clsx";import a from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{mergeRefs as o}from"../util/merge-refs.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{typographyBase as m,hyperlinkBase as l,noUnderline as d,underline as p,externalIcon as h,tokens as y,lineClamp as g,paragraph as c,displayInline as u,displayBlock as f}from"./typography.styles.js";import{typographySize as j,typographyWeight as x}from"./typography-text.styles.js";const b=e=>e||"regular",L=e=>j[e],N=e=>x[e],k=(e,r)=>r?c:e?u:f,S=(r,i,l)=>{const d=a.forwardRef((function(l,d){var{className:p,as:h,inline:c,maxLines:u,paragraph:f,weight:j}=l,x=e(l,["className","as","inline","maxLines","paragraph","weight"]);const S=b(j),B=a.useRef(null),v=o(B,d),w=((e,r,t)=>!!e&&(t||!r))(u,c,f);n(B,{[y.typographyBase.maxLines]:w?u:null});return t(c?"span":h||r,Object.assign({ref:v,className:s(m,L(i),N(S),k(c,f),w&&g,p)},x))}));return d.displayName=`Typography.${l}`,d},B=(e,r,t)=>S(e,r,t),v=B("h1","heading-xxl","HeadingXXL"),w=B("h2","heading-xl","HeadingXL"),H=B("h3","heading-lg","HeadingLG"),M=B("h4","heading-md","HeadingMD"),X=B("h5","heading-sm","HeadingSM"),D=B("h6","heading-xs","HeadingXS"),R=(e,r)=>S("p",e,r),O=R("body-baseline","BodyBL"),T=R("body-md","BodyMD"),$=R("body-sm","BodySM"),_=R("body-xs","BodyXS"),q=(n,o)=>{const y=a.forwardRef((function(a,o){var{weight:y,children:g,external:c,underlineStyle:u="underline",className:f}=a,j=e(a,["weight","children","external","underlineStyle","className"]);const x=b(y);return r("a",Object.assign({ref:o,className:s(m,l,L(n),N(x),"none"===u?d:p,f)},j,{children:[g,c&&t(i,{className:h})]}))}));return y.displayName=`Typography.${o}`,y},G=q("body-baseline","LinkBL"),z=q("body-md","LinkMD"),A=q("body-sm","LinkSM"),C=q("body-xs","LinkXS");export{O as BodyBL,T as BodyMD,$ as BodySM,_ as BodyXS,H as HeadingLG,M as HeadingMD,X as HeadingSM,w as HeadingXL,D as HeadingXS,v as HeadingXXL,G as LinkBL,z as LinkMD,A as LinkSM,C as LinkXS};
 //# sourceMappingURL=typography.js.map

package/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../src/typography/typography.tsx"],"sourcesContent":["import type { RefObject } from \"react\";\nimport React from \"react\";\nimport type { IStyledComponent } from \"styled-components\";\n\nimport type { V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport type { TypographyLinkProps, TypographyProps } from \"./types\";\nimport {\n    HyperlinkBase,\n    StyledExternalIcon,\n    TypographyBase,\n} from \"./typography.styles\";\n\nconst createHeading = (\n    tag: keyof JSX.IntrinsicElements,\n    textStyle: V3_TypographySizeType,\n    displayName: string\n) => {\n    const Header = (\n        { weight, inline, paragraph, maxLines, ...props }: TypographyProps,\n        ref: React.Ref<HTMLHeadingElement>\n    ) => {\n        return (\n            <TypographyBase\n                ref={ref}\n                as={inline ? \"span\" : tag}\n                $textStyle={textStyle}\n                $weight={weight}\n                $inline={inline}\n                $paragraph={paragraph}\n                $maxLines={maxLines}\n                {...props}\n            />\n        );\n    };\n    Header.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Header) as IStyledComponent<\n        \"web\",\n        TypographyProps & {\n            ref?: RefObject<HTMLHeadingElement> | undefined;\n        }\n    >;\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: V3_TypographySizeType, displayName: string) => {\n    const Body = (\n        { weight, inline, paragraph, maxLines, ...props }: TypographyProps,\n        ref: React.Ref<HTMLParagraphElement>\n    ) => {\n        return (\n            <TypographyBase\n                ref={ref}\n                as={inline ? \"span\" : \"p\"}\n                $textStyle={textStyle}\n                $weight={weight}\n                $inline={inline}\n                $paragraph={paragraph}\n                $maxLines={maxLines}\n                {...props}\n            />\n        );\n    };\n    Body.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Body) as IStyledComponent<\n        \"web\",\n        TypographyProps & {\n            ref?: RefObject<HTMLParagraphElement> | undefined;\n        }\n    >;\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n    textStyle: V3_TypographySizeType,\n    displayName: string\n) => {\n    const Hyperlink = (\n        {\n            weight,\n            children,\n            external,\n            underlineStyle = \"underline\",\n            ...props\n        }: TypographyLinkProps,\n        ref: React.Ref<HTMLAnchorElement>\n    ) => {\n        return (\n            <HyperlinkBase\n                ref={ref}\n                $textStyle={textStyle}\n                $weight={weight}\n                $underlineStyle={underlineStyle}\n                {...props}\n            >\n                {children}\n                {external && <StyledExternalIcon />}\n            </HyperlinkBase>\n        );\n    };\n    Hyperlink.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Hyperlink) as IStyledComponent<\n        \"web\",\n        TypographyLinkProps & {\n            ref?: RefObject<HTMLAnchorElement> | undefined;\n        }\n    >;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["createHeading","tag","textStyle","displayName","Header","_a","ref","weight","inline","paragraph","maxLines","props","__rest","_jsx","TypographyBase","Object","assign","as","$textStyle","$weight","$inline","$paragraph","React","forwardRef","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","Body","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","_jsxs","HyperlinkBase","$underlineStyle","StyledExternalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"yNAYA,MAAMA,EAAgB,CAClBC,EACAC,EACAC,KAEA,MAAMC,EAAS,CACXC,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,EAACC,EAAcC,OAAAC,OAAA,CACXV,IAAKA,EACLW,GAAIT,EAAS,OAASP,EAAGiB,WACbhB,EAASiB,QACZZ,EAAMa,QACNZ,EAAMa,WACHZ,YACDC,GACPC,GACN,EAIV,OADAP,EAAOD,YAAc,cAAcA,IAC5BmB,EAAMC,WAAWnB,EAKvB,EAGQoB,EAAaxB,EAAc,KAAM,cAAe,cAChDyB,EAAYzB,EAAc,KAAM,aAAc,aAC9C0B,EAAY1B,EAAc,KAAM,aAAc,aAC9C2B,EAAY3B,EAAc,KAAM,aAAc,aAC9C4B,EAAY5B,EAAc,KAAM,aAAc,aAC9C6B,EAAY7B,EAAc,KAAM,aAAc,aAErD8B,EAAa,CAAC5B,EAAkCC,KAClD,MAAM4B,EAAO,CACT1B,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,EAACC,EAAcC,OAAAC,OAAA,CACXV,IAAKA,EACLW,GAAIT,EAAS,OAAS,IAAGU,WACbhB,EAASiB,QACZZ,EAAMa,QACNZ,EAAMa,WACHZ,YACDC,GACPC,GACN,EAIV,OADAoB,EAAK5B,YAAc,cAAcA,IAC1BmB,EAAMC,WAAWQ,EAKvB,EAGQC,EAASF,EAAW,gBAAiB,UACrCG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAC/BK,EAASL,EAAW,UAAW,UAEtCM,EAAsB,CACxBlC,EACAC,KAEA,MAAMkC,EAAY,CACdhC,EAOAC,KAPA,IAAAC,OACIA,EAAM+B,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,aAAWnC,EACzBM,EAAKC,EAAAP,EALZ,mDASA,OACIoC,EAACC,EAAa3B,OAAAC,OAAA,CACVV,IAAKA,EAAGY,WACIhB,EAASiB,QACZZ,EAAMoC,gBACEH,GACb7B,EAAK,CAAA2B,SAAA,CAERA,EACAC,GAAY1B,EAAC+B,EAAkB,OACpB,EAIxB,OADAP,EAAUlC,YAAc,cAAcA,IAC/BmB,EAAMC,WAAWc,EAKvB,EAGQQ,EAAST,EAAoB,gBAAiB,UAC9CU,EAASV,EAAoB,UAAW,UACxCW,EAASX,EAAoB,UAAW,UACxCY,EAASZ,EAAoB,UAAW"}
+{"version":3,"file":"typography.js","sources":["../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n    TypographyLinkProps,\n    TypographyProps,\n    TypographySize,\n    TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n    weight: TypographyWeight | undefined\n): TypographyWeight => weight || \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n    styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n    styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n    inline: boolean | undefined,\n    paragraph: boolean | undefined\n) => {\n    if (paragraph) {\n        return styles.paragraph;\n    }\n\n    if (inline) {\n        return styles.displayInline;\n    }\n\n    return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n    maxLines: number | undefined,\n    inline: boolean | undefined,\n    paragraph: boolean | undefined\n) => !!maxLines && (paragraph || !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n    tag: TTag,\n    textStyle: TypographySize,\n    displayName: string\n) => {\n    const TypographyText = React.forwardRef<\n        React.ComponentRef<TTag>,\n        TypographyProps\n    >(function TypographyTextComponent(\n        {\n            className,\n            as: asProp,\n            inline,\n            maxLines,\n            paragraph,\n            weight,\n            ...restProps\n        },\n        ref\n    ) {\n        const textWeight = getTextWeight(weight);\n        const textRef = React.useRef<React.ComponentRef<TTag>>(null);\n        const mergedRef = mergeRefs(textRef, ref);\n        const shouldClamp = shouldLineClamp(maxLines, inline, paragraph);\n\n        useApplyStyle(textRef as React.RefObject<HTMLElement | null>, {\n            [styles.tokens.typographyBase.maxLines]: shouldClamp\n                ? maxLines\n                : null,\n        });\n\n        const Element = inline ? \"span\" : asProp || tag;\n\n        return (\n            <Element\n                ref={mergedRef}\n                className={clsx(\n                    styles.typographyBase,\n                    getTypographyTextClassName(textStyle),\n                    getTypographyWeightClassName(textWeight),\n                    getTypographyDisplayClassName(inline, paragraph),\n                    shouldClamp && styles.lineClamp,\n                    className\n                )}\n                {...restProps}\n            />\n        );\n    });\n\n    (\n        TypographyText as NamedExoticComponent\n    ).displayName = `Typography.${displayName}`;\n    return TypographyText;\n};\n\nconst createHeading = (\n    tag: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\",\n    textStyle: TypographySize,\n    displayName: string\n) => {\n    return createTypographyText(tag, textStyle, displayName);\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: TypographySize, displayName: string) => {\n    return createTypographyText(\"p\", textStyle, displayName);\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n    textStyle: TypographySize,\n    displayName: string\n) => {\n    const Hyperlink = React.forwardRef<HTMLAnchorElement, TypographyLinkProps>(\n        function TypographyLink(\n            {\n                weight,\n                children,\n                external,\n                underlineStyle = \"underline\",\n                className,\n                ...props\n            },\n            ref\n        ) {\n            const textWeight = getTextWeight(weight);\n\n            return (\n                <a\n                    ref={ref}\n                    className={clsx(\n                        styles.typographyBase,\n                        styles.hyperlinkBase,\n                        getTypographyTextClassName(textStyle),\n                        getTypographyWeightClassName(textWeight),\n                        underlineStyle === \"none\"\n                            ? styles.noUnderline\n                            : styles.underline,\n                        className\n                    )}\n                    {...props}\n                >\n                    {children}\n                    {external && (\n                        <ExternalIcon className={styles.externalIcon} />\n                    )}\n                </a>\n            );\n        }\n    );\n\n    (\n        Hyperlink as NamedExoticComponent\n    ).displayName = `Typography.${displayName}`;\n    return Hyperlink;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["getTextWeight","weight","getTypographyTextClassName","textStyle","styles.typographySize","getTypographyWeightClassName","styles.typographyWeight","getTypographyDisplayClassName","inline","paragraph","styles.paragraph","styles.displayInline","styles.displayBlock","createTypographyText","tag","displayName","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","_jsx","Object","assign","clsx","styles.typographyBase","styles.lineClamp","createHeading","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","props","_jsxs","styles.hyperlinkBase","styles.noUnderline","styles.underline","ExternalIcon","styles.externalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"8+BAeA,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAGPF,EACOG,EAGJC,EASLC,EAAuB,CACzBC,EACAX,EACAY,KAEA,MAAMC,EAAiBC,EAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,EAAMf,OACVA,EAAMgB,SACNA,EAAQf,UACRA,EAASR,OACTA,GAAMkB,EACHM,EAASC,EAAAP,EAPhB,6DAWA,MAAMQ,EAAa3B,EAAcC,GAC3B2B,EAAUX,EAAMY,OAAiC,MACjDC,EAAYC,EAAUH,EAASR,GAC/BY,EA7BU,EACpBR,EACAhB,EACAC,MACGe,IAAaf,IAAcD,GAyBNyB,CAAgBT,EAAUhB,EAAQC,GAEtDyB,EAAcN,EAAgD,CAC1D,CAACO,EAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAKV,OACIa,EAHY7B,EAAS,OAASe,GAAUT,EAGhCwB,OAAAC,OAAA,CACJnB,IAAKU,EACLT,UAAWmB,EACPC,EACAvC,EAA2BC,GAC3BE,EAA6BsB,GAC7BpB,EAA8BC,EAAQC,GACtCuB,GAAeU,EACfrB,IAEAI,GAGhB,IAKA,OAFIT,EACFD,YAAc,cAAcA,IACvBC,CAAc,EAGnB2B,EAAgB,CAClB7B,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,GAGnC6B,EAAaD,EAAc,KAAM,cAAe,cAChDE,EAAYF,EAAc,KAAM,aAAc,aAC9CG,EAAYH,EAAc,KAAM,aAAc,aAC9CI,EAAYJ,EAAc,KAAM,aAAc,aAC9CK,EAAYL,EAAc,KAAM,aAAc,aAC9CM,EAAYN,EAAc,KAAM,aAAc,aAErDO,EAAa,CAAC/C,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,GAGnCoC,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,CACxBpD,EACAY,KAEA,MAAMyC,EAAYvC,EAAMC,YACpB,SACIC,EAQAC,GARA,IAAAnB,OACIA,EAAMwD,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,YAAWtC,UAC5BA,GAASF,EACNyC,EAAKlC,EAAAP,EANZ,+DAUA,MAAMQ,EAAa3B,EAAcC,GAEjC,OACI4D,EAAA,IAAAvB,OAAAC,OAAA,CACInB,IAAKA,EACLC,UAAWmB,EACPC,EACAqB,EACA5D,EAA2BC,GAC3BE,EAA6BsB,GACV,SAAnBgC,EACMI,EACAC,EACN3C,IAEAuC,EAAK,CAAAH,SAAA,CAERA,EACAC,GACGrB,EAAC4B,EAAY,CAAC5C,UAAW6C,OAIzC,IAMJ,OAFIV,EACFzC,YAAc,cAAcA,IACvByC,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}

package/typography/typography.styles.d.ts

@@ -1,19 +1,15 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
-import type { TypographyWeight } from "./types";
-interface StyledProps {
-    $textStyle: V3_TypographySizeType;
-    $weight?: TypographyWeight | undefined;
-    $inline?: boolean | undefined;
-    $paragraph?: boolean | undefined;
-    $maxLines?: number | undefined;
-    $underlineStyle?: string | undefined;
-}
-export declare const TypographyBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-export declare const HyperlinkBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, StyledProps>> & string;
-export declare const StyledExternalIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export { typographySize, typographyWeight } from "./typography-text.styles";
+export declare const tokens: {
+    readonly typographyBase: {
+        readonly maxLines: "--fds-internal-typography-base-maxLines";
+    };
+};
+export declare const typographyBase: import("@linaria/core").LinariaClassName;
+export declare const displayInline: import("@linaria/core").LinariaClassName;
+export declare const displayBlock: import("@linaria/core").LinariaClassName;
+export declare const paragraph: import("@linaria/core").LinariaClassName;
+export declare const lineClamp: import("@linaria/core").LinariaClassName;
+export declare const hyperlinkBase: import("@linaria/core").LinariaClassName;
+export declare const underline: import("@linaria/core").LinariaClassName;
+export declare const noUnderline: import("@linaria/core").LinariaClassName;
+export declare const externalIcon: import("@linaria/core").LinariaClassName;

package/typography/typography.styles.js

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

package/typography/typography.styles.js.map

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

package/typography/typography.styles_1jqils.css

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

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

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

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

@@ -7,14 +7,46 @@ interface ContentStyleProps {
 interface GridStyleProps extends ContentStyleProps {
     $fullWidth?: boolean | undefined;
 }
-export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>, WrapperStyleProps>> & string & Omit<(props: import("..").ContentProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const FullWidthWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, WrapperStyleProps>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, ContentStyleProps>> & string;
-export declare const Description: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, ContentStyleProps>> & string;
-export declare const CustomSection: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ContentStyleProps>> & string;
-export declare const GridUl: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, GridStyleProps>> & string;
+export 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 {};

package/unit-number/unit-number-input.d.ts

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

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

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as n}from"react/jsx-runtime";import{useState as a,useRef as i,useMemo as o,useEffect as l}from"react";import{VisuallyHidden as d,concatIds as u}from"../shared/accessibility/index.js";import{InputWrapper as s}from"../shared/input-wrapper/input-wrapper.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as c}from"../util/simple-id-generator.js";import{StringHelper as p}from"../util/string-helper.js";import{useNextInputState as f}from"../util/use-next-input-state.js";import{HashContainer as b,ReadOnlyContainer as h,ReadOnlyLabel as m,UnitNumberDivider as y,FloorInput as g,UnitInput as v}from"./unit-number-input.style.js";const j=j=>{var{disabled:C,error:$,value:B,onChange:w,onBlur:O,onChangeRaw:k,onBlurRaw:A,readOnly:L,placeholder:R="00-8888",autoComplete:D,"aria-labelledby":I,"aria-describedby":T,"aria-invalid":V}=j,Z=e(j,["disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","aria-labelledby","aria-describedby","aria-invalid"]);const[E,F]=a(""),[H,P]=a(""),[U,_]=a("none"),[z]=a((()=>c.generate())),K=`${z}-floor-label`,q=`${z}-unit-label`,G=`${z}-live-message`,J=i(null),M=i(null),N=i(null),Q=i(E),S=i(H),W=i(U),X=e=>e.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g,""),Y=f({ref:M,formatter:X}),ee=f({ref:N,formatter:X}),re=o((()=>{let e="";const r=he("Hash",E),t=he("Dash",H);switch(U){case"floor":e=r;break;case"unit":e=E?[r,t].join(" "):t;break;default:e=""}return e}),[U,E,H]),te=e=>{Q.current=e,F(e)},ne=e=>{S.current=e,P(e)},ae=e=>{W.current=e,_(e)};l((()=>{"floor"===U&&3===E.length&&N.current&&N.current.focus()}),[E]),l((()=>{se(B)}),[B]);const ie=e=>{ae(e.target.name),e.target.select()},oe=e=>{const r=e.target.name,t=e.target.value,n=ue(t);"floor"===r?(te(n),n!==E&&ce(n,r)):"unit"===r&&(ne(n),n!==H&&ce(n,r))},le=e=>{const r=e.target.name;if("floor"===r){const e=Y();if(!e)return;const{nextValue:t,updateCaretPosition:n}=e;n(),te(t),ce(t,r)}else if("unit"===r){const e=ee();if(!e)return;const{nextValue:t,updateCaretPosition:n}=e;n(),ne(t),ce(t,r)}},de=e=>{var r;"Backspace"!==e.code&&"Backspace"!==e.key||"unit"===U&&0===H.length&&(null===(r=M.current)||void 0===r||r.focus())},ue=e=>/^[0-9]$/.test(e)?p.padValue(e,!0):e.toLocaleUpperCase(),se=e=>{if(e!==x)if(void 0===e||0===e.length)te(""),ne("");else{const r=e.split("-");if(2===r.length){const e=r[0],t=r[1];te("floor"===U?e:ue(e)),ne("unit"===U?t:ue(t))}}},ce=(e,r)=>{if(!w&&!k)return;const t={floor:Q.current,unit:S.current};if(t[r]=e,w){const e=fe(t);w(e)}k&&k([t.floor,t.unit])},pe=()=>{if(!O&&!A)return;const e={floor:ue(Q.current),unit:ue(S.current)};if(O){const r=fe(e);O(r)}A&&A([e.floor,e.unit])},fe=e=>{const r=[e.floor,e.unit];return e.floor.length>0&&e.unit.length>0?r.join("-"):r.every((e=>""===e))?"":x},be=e=>e.split("-");function he(e,r){return r?`${e} ${Array.from(r).join(" ")}`:""}return r(s,Object.assign({},Z,{ref:J,onClick:()=>{"none"===U&&M.current&&M.current.focus()},$disabled:C,$error:$,$readOnly:L,tabIndex:-1,onBlur:e=>{J.current&&J.current.contains(e.relatedTarget)||"none"!==W.current&&(ae("none"),pe())},children:[t(b,{"data-testid":"addon",$disabled:C,$readOnly:L,children:"#"}),L&&B?(e=>{const n=e.split("-"),a=[he("Hash",n[0]),he("Dash",n[1])].join(" ");return r(h,{"data-testid":"readonly-display",tabIndex:0,role:"textbox","aria-readonly":!0,"aria-labelledby":I,"aria-describedby":T,"aria-invalid":V,children:[t(m,{children:n[0]}),t(y,{children:"-"}),t(m,{children:n[1]}),t(d,{children:a})]})})(B):r(n,{children:[t(g,{name:"floor",maxLength:3,value:E,ref:M,onFocus:ie,onBlur:oe,onChange:le,disabled:C,readOnly:L,type:"text",pattern:"[0-9A-Z]{2,3}","data-testid":"floor-input","aria-labelledby":u(I,K),"aria-describedby":u(T,G),"aria-invalid":V,placeholder:"floor"!==U||L||C?be(R)[0]:"",autoComplete:D,styleType:"no-border"}),t(d,{"aria-hidden":!0,id:K,children:"Enter floor number"}),t(y,{$inactive:0===E.length,children:"-"}),t(v,{name:"unit",maxLength:5,value:H,ref:N,onFocus:ie,onBlur:oe,onChange:le,onKeyDown:de,disabled:C,readOnly:L,type:"text",pattern:"[0-9A-Z]{2,5}","data-testid":"unit-input","aria-labelledby":u(I,q),"aria-describedby":u(T,G),"aria-invalid":V,placeholder:"unit"!==U||L||C?be(R)[1]:"",autoComplete:D,styleType:"no-border"}),t(d,{"aria-hidden":!0,id:q,children:"Enter unit number"}),t(d,{id:G,"aria-live":"polite",children:re})]})]}))},x="Invalid unit number";export{j as UnitNumberInput};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t,Fragment as 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};
 //# 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 type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { concatIds, VisuallyHidden } from \"../shared/accessibility\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { SimpleIdGenerator, StringHelper, useNextInputState } from \"../util\";\nimport type { UnitNumberInputProps } from \"./types\";\nimport {\n    FloorInput,\n    HashContainer,\n    ReadOnlyContainer,\n    ReadOnlyLabel,\n    UnitInput,\n    UnitNumberDivider,\n} from \"./unit-number-input.style\";\n\ntype FieldType = \"floor\" | \"unit\" | \"none\";\ntype ValueFieldTypes = Exclude<FieldType, \"none\">;\n\nexport const UnitNumberInput = ({\n    disabled,\n    error,\n    value,\n    onChange,\n    onBlur,\n    onChangeRaw,\n    onBlurRaw,\n    readOnly,\n    placeholder = \"00-8888\",\n    autoComplete,\n    \"aria-labelledby\": ariaLabelledBy,\n    \"aria-describedby\": ariaDescribedBy,\n    \"aria-invalid\": ariaInvalid,\n    ...otherProps\n}: UnitNumberInputProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const [floorValue, _setFloorValue] = useState<string>(\"\");\n    const [unitValue, _setUnitValue] = useState<string>(\"\");\n    const [currentFocus, _setCurrentFocus] = useState<FieldType>(\"none\");\n    const [internalId] = useState<string>(() => SimpleIdGenerator.generate());\n    const floorLabelId = `${internalId}-floor-label`;\n    const unitLabelId = `${internalId}-unit-label`;\n    const liveMessageId = `${internalId}-live-message`;\n\n    const nodeRef = useRef<HTMLDivElement>(null);\n    const floorInputRef = useRef<HTMLInputElement>(null);\n    const unitInputRef = useRef<HTMLInputElement>(null);\n\n    /**\n     * Have to use refs to allow the state values to be accessible\n     * by the event listener callback functions\n     * Reference:\n     * https://stackoverflow.com/questions/55265255/react-usestate-hook-event-handler-using-initial-state\n     */\n\n    const floorValueStateRef = useRef<string>(floorValue);\n    const unitValueStateRef = useRef<string>(unitValue);\n    const currentFocusStateRef = useRef<FieldType>(currentFocus);\n\n    const formatter = (value: string) =>\n        value.toLocaleUpperCase().replace(/[^0-9A-Za-z]/g, \"\");\n    const getNextFloorInputState = useNextInputState({\n        ref: floorInputRef,\n        formatter,\n    });\n    const getNextUnitInputState = useNextInputState({\n        ref: unitInputRef,\n        formatter,\n    });\n\n    const liveMessage = useMemo(() => {\n        let msg = \"\";\n        const floorMsg = formatPhraseWithPrefix(\"Hash\", floorValue);\n        const unitMsg = formatPhraseWithPrefix(\"Dash\", unitValue);\n        switch (currentFocus) {\n            case \"floor\":\n                msg = floorMsg;\n                break;\n            case \"unit\":\n                msg = floorValue ? [floorMsg, unitMsg].join(\" \") : unitMsg;\n                break;\n            default:\n                msg = \"\";\n        }\n        return msg;\n    }, [currentFocus, floorValue, unitValue]);\n\n    // =============================================================================\n    // REF FUNCTIONS\n    // =============================================================================\n    const setFloorValue = (data: string) => {\n        floorValueStateRef.current = data;\n        _setFloorValue(data);\n    };\n\n    const setUnitValue = (data: string) => {\n        unitValueStateRef.current = data;\n        _setUnitValue(data);\n    };\n\n    const setCurrentFocus = (data: FieldType) => {\n        currentFocusStateRef.current = data;\n        _setCurrentFocus(data);\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        // Auto focus feature\n        if (\n            currentFocus === \"floor\" &&\n            floorValue.length === 3 &&\n            unitInputRef.current\n        ) {\n            unitInputRef.current.focus();\n        }\n    }, [floorValue]);\n\n    useEffect(() => {\n        updateValues(value);\n    }, [value]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement>) => {\n        setCurrentFocus(event.target.name as FieldType);\n        event.target.select();\n    };\n\n    const handleBlur = (event: React.FocusEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n        const targetValue = event.target.value;\n        const formattedInput = formatInput(targetValue);\n\n        if (targetName === \"floor\") {\n            setFloorValue(formattedInput);\n            if (formattedInput !== floorValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        } else if (targetName === \"unit\") {\n            setUnitValue(formattedInput);\n            if (formattedInput !== unitValue) {\n                performOnChangeHandler(formattedInput, targetName);\n            }\n        }\n    };\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        const targetName = event.target.name as FieldType;\n\n        if (targetName === \"floor\") {\n            const nextInputState = getNextFloorInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setFloorValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        } else if (targetName === \"unit\") {\n            const nextInputState = getNextUnitInputState();\n            if (!nextInputState) return;\n\n            const { nextValue, updateCaretPosition } = nextInputState;\n            updateCaretPosition();\n            setUnitValue(nextValue);\n            performOnChangeHandler(nextValue, targetName);\n        }\n    };\n\n    const handleNodeClick = () => {\n        if (currentFocus === \"none\" && floorInputRef.current) {\n            floorInputRef.current.focus();\n        }\n    };\n\n    const handleNodeBlur = (event: React.FocusEvent) => {\n        if (nodeRef.current && nodeRef.current.contains(event.relatedTarget)) {\n            // internal element received focus\n            return;\n        }\n        if (currentFocusStateRef.current !== \"none\") {\n            setCurrentFocus(\"none\");\n            performOnBlurHandler();\n        }\n    };\n\n    const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n        /**\n         * Allow going to the field before if user presses Backspace\n         * on an empty field\n         */\n        if (event.code === \"Backspace\" || event.key === \"Backspace\") {\n            if (currentFocus === \"unit\" && unitValue.length === 0) {\n                floorInputRef.current?.focus();\n            }\n        }\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const formatInput = (value: string) => {\n        return /^[0-9]$/.test(value)\n            ? StringHelper.padValue(value, true)\n            : value.toLocaleUpperCase();\n    };\n\n    const updateValues = (value: string | undefined) => {\n        if (value === INVALID_VALUE) {\n            return;\n        } else if (value === undefined || value.length === 0) {\n            setFloorValue(\"\");\n            setUnitValue(\"\");\n        } else {\n            const valueArr = value.split(\"-\");\n            if (valueArr.length === 2) {\n                // Valid value\n                const floor = valueArr[0];\n                const unit = valueArr[1];\n                setFloorValue(\n                    currentFocus === \"floor\" ? floor : formatInput(floor)\n                );\n                setUnitValue(\n                    currentFocus === \"unit\" ? unit : formatInput(unit)\n                );\n            }\n        }\n    };\n\n    const performOnChangeHandler = (\n        changeValue: string,\n        field: ValueFieldTypes\n    ) => {\n        if (!onChange && !onChangeRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: floorValueStateRef.current,\n            unit: unitValueStateRef.current,\n        };\n\n        // Update the specific field value\n        values[field] = changeValue;\n\n        if (onChange) {\n            const returnValue = getFormattedValue(values);\n            onChange(returnValue);\n        }\n\n        if (onChangeRaw) {\n            onChangeRaw([values.floor, values.unit]);\n        }\n    };\n\n    const performOnBlurHandler = () => {\n        if (!onBlur && !onBlurRaw) {\n            return;\n        }\n\n        const values: Record<ValueFieldTypes, string> = {\n            floor: formatInput(floorValueStateRef.current),\n            unit: formatInput(unitValueStateRef.current),\n        };\n\n        if (onBlur) {\n            const returnValue = getFormattedValue(values);\n            onBlur(returnValue);\n        }\n\n        if (onBlurRaw) {\n            onBlurRaw([values.floor, values.unit]);\n        }\n    };\n\n    const getFormattedValue = (values: Record<ValueFieldTypes, string>) => {\n        const valueArr = [values.floor, values.unit];\n\n        if (values.floor.length > 0 && values.unit.length > 0) {\n            return valueArr.join(\"-\");\n        } else if (valueArr.every((value) => value === \"\")) {\n            return \"\";\n        } else {\n            return INVALID_VALUE;\n        }\n    };\n\n    const getPlaceholder = (value: string) => {\n        return value.split(\"-\");\n    };\n\n    function formatPhraseWithPrefix(prefix: string, v: string) {\n        return v ? `${prefix} ${Array.from(v).join(\" \")}` : \"\";\n    }\n\n    // =============================================================================\n    // RENDER FUNCTION\n    // =============================================================================\n    const renderInputs = () => (\n        <>\n            <FloorInput\n                name=\"floor\"\n                maxLength={3}\n                value={floorValue}\n                ref={floorInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,3}\"\n                data-testid=\"floor-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, floorLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"floor\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[0]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n            />\n            <VisuallyHidden aria-hidden id={floorLabelId}>\n                Enter floor number\n            </VisuallyHidden>\n            <UnitNumberDivider $inactive={floorValue.length === 0}>\n                -\n            </UnitNumberDivider>\n            <UnitInput\n                name=\"unit\"\n                maxLength={5}\n                value={unitValue}\n                ref={unitInputRef}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onChange={handleChange}\n                onKeyDown={handleKeyDown}\n                disabled={disabled}\n                readOnly={readOnly}\n                type=\"text\"\n                pattern=\"[0-9A-Z]{2,5}\"\n                data-testid=\"unit-input\"\n                aria-labelledby={concatIds(ariaLabelledBy, unitLabelId)}\n                aria-describedby={concatIds(ariaDescribedBy, liveMessageId)}\n                aria-invalid={ariaInvalid}\n                placeholder={\n                    currentFocus === \"unit\" && !readOnly && !disabled\n                        ? \"\"\n                        : getPlaceholder(placeholder)[1]\n                }\n                autoComplete={autoComplete}\n                styleType=\"no-border\"\n            />\n            <VisuallyHidden aria-hidden id={unitLabelId}>\n                Enter unit number\n            </VisuallyHidden>\n            {/** Live message for AT reader to read with the combination of prefix and current value for both floor input and unit input */}\n            <VisuallyHidden id={liveMessageId} aria-live=\"polite\">\n                {liveMessage}\n            </VisuallyHidden>\n        </>\n    );\n\n    const renderReadOnly = (displayValue: string) => {\n        const displayValueArr = displayValue.split(\"-\");\n        const liveMessageForReadOnly = [\n            formatPhraseWithPrefix(\"Hash\", displayValueArr[0]),\n            formatPhraseWithPrefix(\"Dash\", displayValueArr[1]),\n        ].join(\" \");\n\n        return (\n            <ReadOnlyContainer\n                data-testid=\"readonly-display\"\n                tabIndex={0}\n                role=\"textbox\"\n                aria-readonly\n                aria-labelledby={ariaLabelledBy}\n                aria-describedby={ariaDescribedBy}\n                aria-invalid={ariaInvalid}\n            >\n                <ReadOnlyLabel>{displayValueArr[0]}</ReadOnlyLabel>\n                <UnitNumberDivider>-</UnitNumberDivider>\n                <ReadOnlyLabel>{displayValueArr[1]}</ReadOnlyLabel>\n                <VisuallyHidden>{liveMessageForReadOnly}</VisuallyHidden>\n            </ReadOnlyContainer>\n        );\n    };\n\n    return (\n        <InputWrapper\n            {...otherProps}\n            ref={nodeRef}\n            onClick={handleNodeClick}\n            $disabled={disabled}\n            $error={error}\n            $readOnly={readOnly}\n            tabIndex={-1}\n            onBlur={handleNodeBlur}\n        >\n            <HashContainer\n                data-testid=\"addon\"\n                $disabled={disabled}\n                $readOnly={readOnly}\n            >\n                #\n            </HashContainer>\n            {readOnly && value ? renderReadOnly(value) : renderInputs()}\n        </InputWrapper>\n    );\n};\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\nconst INVALID_VALUE = \"Invalid unit number\";\n"],"names":["UnitNumberInput","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","SimpleIdGenerator","generate","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","INVALID_VALUE","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","$error","$readOnly","tabIndex","contains","relatedTarget","_jsx","HashContainer","$disabled","children","displayValue","displayValueArr","liveMessageForReadOnly","ReadOnlyContainer","role","ReadOnlyLabel","UnitNumberDivider","VisuallyHidden","renderReadOnly","_Fragment","FloorInput","maxLength","onFocus","type","pattern","concatIds","styleType","id","$inactive","UnitInput","onKeyDown"],"mappings":"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"}
+{"version":3,"file":"unit-number-input.js","sources":["../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport * 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":"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"}