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

package/cjs/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":"6NAYA,MAAMA,EAAgB,CAClBC,EACAC,EACAC,KAEA,MAAMC,EAAS,CACXC,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAA,OAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,MAACC,EAAAA,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,EAAAA,QAAMC,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,EAAAA,OAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,MAACC,EAAAA,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,EAAAA,QAAMC,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,EAAAA,OAAAP,EALZ,mDASA,OACIoC,OAACC,EAAAA,cAAa3B,OAAAC,OAAA,CACVV,IAAKA,EAAGY,WACIhB,EAASiB,QACZZ,EAAMoC,gBACEH,GACb7B,EAAK,CAAA2B,SAAA,CAERA,EACAC,GAAY1B,EAAAA,IAAC+B,EAAAA,mBAAkB,OACpB,EAIxB,OADAP,EAAUlC,YAAc,cAAcA,IAC/BmB,EAAAA,QAAMC,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","Element","_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":"61BAeA,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAAA,eAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAAA,iBAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAAAA,UAGPF,EACOG,EAAAA,cAGJC,EAAAA,aASLC,EAAuB,CACzBC,EACAX,EACAY,KAEA,MAAMC,EAAiBC,EAAAA,QAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,EAAMf,OACVA,EAAMgB,SACNA,EAAQf,UACRA,EAASR,OACTA,GAAMkB,EACHM,EAASC,SAAAP,EAPhB,6DAWA,MAAMQ,EAAa3B,EAAcC,GAC3B2B,EAAUX,EAAAA,QAAMY,OAAiC,MACjDC,EAAYC,EAAAA,UAAUH,EAASR,GAC/BY,EA7BU,EACpBR,EACAhB,EACAC,MACGe,IAAaf,IAAcD,GAyBNyB,CAAgBT,EAAUhB,EAAQC,GAEtDyB,EAAAA,cAAcN,EAAgD,CAC1D,CAACO,EAAAA,OAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAGV,MAAMa,EAAU7B,EAAS,OAASe,GAAUT,EAE5C,OACIwB,MAACD,EAAOE,OAAAC,OAAA,CACJpB,IAAKU,EACLT,UAAWoB,UACPC,EAAAA,eACAxC,EAA2BC,GAC3BE,EAA6BsB,GAC7BpB,EAA8BC,EAAQC,GACtCuB,GAAeW,YACftB,IAEAI,GAGhB,IAKA,OAFIT,EACFD,YAAc,cAAcA,IACvBC,CAAc,EAGnB4B,EAAgB,CAClB9B,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,GAGnC8B,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,CAAChD,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,GAGnCqC,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,CACxBrD,EACAY,KAEA,MAAM0C,EAAYxC,EAAAA,QAAMC,YACpB,SACIC,EAQAC,GARA,IAAAnB,OACIA,EAAMyD,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,YAAWvC,UAC5BA,GAASF,EACN0C,EAAKnC,EAAAA,OAAAP,EANZ,+DAUA,MAAMQ,EAAa3B,EAAcC,GAEjC,OACI6D,EAAAA,KAAA,IAAAvB,OAAAC,OAAA,CACIpB,IAAKA,EACLC,UAAWoB,EAAAA,QACPC,EAAAA,eACAqB,EAAAA,cACA7D,EAA2BC,GAC3BE,EAA6BsB,GACV,SAAnBiC,EACMI,EAAAA,YACAC,EAAAA,UACN5C,IAEAwC,EAAK,CAAAH,SAAA,CAERA,EACAC,GACGrB,EAAAA,IAAC4B,EAAAA,aAAY,CAAC7C,UAAW8C,EAAAA,kBAIzC,IAMJ,OAFIV,EACF1C,YAAc,cAAcA,IACvB0C,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}

package/cjs/typography/typography.styles.js

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

package/cjs/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":"wOAwBO,MAAMA,EAAiBC,EAAAA,QAAOC,GAAgB;MAC9CC,GACCC,EAAAA,uBACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAAA,QAAOU,CAAc;MAC3CR,UAAU,OAAAS,KAAG;UACVC,EAAAA,aAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAAA,UAAUC;2BACqB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAAA,UAAU;;KAE1B;EAGQI,EAAqBjB,EAAAA,QAAOkB,EAAAA,aAAa;;;;;"}
+{"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":["typographyBase","maxLines"],"mappings":"gLAyByB,iCALC,+BAqCD,gCAlBC,6BAJJ,8BAkBE,4BAvBF,0BAvBA,CAClBA,eAAgB,CACZC,SAAU,mEAIS,4BAoCL"}

package/cjs/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/cjs/unit-number/unit-number-input.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"unit-number-input.js","sources":["../../../src/unit-number/unit-number-input.tsx"],"sourcesContent":["import 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":["INVALID_VALUE","_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","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":["INVALID_VALUE","_a","disabled","error","value","onChange","onBlur","onChangeRaw","onBlurRaw","readOnly","placeholder","autoComplete","ariaLabelledBy","ariaDescribedBy","ariaInvalid","className","otherProps","__rest","floorValue","_setFloorValue","useState","unitValue","_setUnitValue","currentFocus","_setCurrentFocus","internalId","useId","floorLabelId","unitLabelId","liveMessageId","nodeRef","useRef","floorInputRef","unitInputRef","floorValueStateRef","unitValueStateRef","currentFocusStateRef","formatter","toLocaleUpperCase","replace","getNextFloorInputState","useNextInputState","ref","getNextUnitInputState","liveMessage","useMemo","msg","floorMsg","formatPhraseWithPrefix","unitMsg","join","setFloorValue","data","current","setUnitValue","setCurrentFocus","useEffect","length","focus","updateValues","handleFocus","event","target","name","select","handleBlur","targetName","targetValue","formattedInput","formatInput","performOnChangeHandler","handleChange","nextInputState","nextValue","updateCaretPosition","handleKeyDown","code","key","test","StringHelper","padValue","undefined","valueArr","split","floor","unit","changeValue","field","values","returnValue","getFormattedValue","performOnBlurHandler","every","getPlaceholder","prefix","v","Array","from","_jsxs","InputWrapper","Object","assign","onClick","tabIndex","contains","relatedTarget","children","_jsx","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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"}

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

@@ -1,4 +1,4 @@
-"use strict";var e=require("styled-components"),t=require("../input/input.js"),r=require("../input-group/input-group.style.js"),n=require("../typography/index.js"),i=require("../v3_theme/index.js");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(e);const u=a.default(r.LabelAddonContainer)`
+"use strict";var e=require("styled-components"),t=require("../input/input.js"),r=require("../typography/index.js"),i=require("../v3_theme/index.js");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=n(e);const o=a.default.div`
     margin-right: 0.5rem;
 `,l=a.default(t.Input)`
     width: 2.5rem;
@@ -14,14 +14,14 @@
     input {
         text-align: left;
     }
-`,p=a.default(n.Typography.BodyBL)`
+`,u=a.default(r.Typography.BodyBL)`
     margin: 0 0.25rem;
     ${t=>{if(t.$inactive)return e.css`
                 color: ${i.V3_Colour["text-disabled"]};
             `}}
-`,s=a.default.div`
+`,p=a.default.div`
     display: flex;
     align-items: center;
     height: calc(3rem - 2px); // exclude top and bottom borders
-`,h=a.default(n.Typography.BodyBL)``;exports.FloorInput=l,exports.HashContainer=u,exports.ReadOnlyContainer=s,exports.ReadOnlyLabel=h,exports.UnitInput=d,exports.UnitNumberDivider=p;
+`,s=a.default(r.Typography.BodyBL)``;exports.FloorInput=l,exports.HashContainer=o,exports.ReadOnlyContainer=p,exports.ReadOnlyLabel=s,exports.UnitInput=d,exports.UnitNumberDivider=u;
 //# sourceMappingURL=unit-number-input.style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"unit-number-input.style.js","sources":["../../../src/unit-number/unit-number-input.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Input } from \"../input\";\nimport { LabelAddonContainer } from \"../input-group/input-group.style\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface LabelStyleProps {\n    $inactive?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HashContainer = styled(LabelAddonContainer)`\n    margin-right: 0.5rem;\n`;\n\nexport const FloorInput = styled(Input)`\n    width: 2.5rem;\n\n    input {\n        text-align: center;\n    }\n`;\n\nexport const UnitInput = styled(FloorInput)`\n    // Cheat to balance the placeholder look while ensuring enough width\n    margin-left: 0.5rem;\n    width: 6rem;\n\n    input {\n        text-align: left;\n    }\n`;\n\nexport const UnitNumberDivider = styled(Typography.BodyBL)<LabelStyleProps>`\n    margin: 0 0.25rem;\n    ${(props) => {\n        if (props.$inactive) {\n            return css`\n                color: ${V3_Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ReadOnlyContainer = styled.div`\n    display: flex;\n    align-items: center;\n    height: calc(3rem - 2px); // exclude top and bottom borders\n`;\n\nexport const ReadOnlyLabel = styled(Typography.BodyBL)<LabelStyleProps>``;\n"],"names":["HashContainer","styled","LabelAddonContainer","FloorInput","Input","UnitInput","UnitNumberDivider","Typography","BodyBL","props","$inactive","css","V3_Colour","ReadOnlyContainer","div","ReadOnlyLabel"],"mappings":"+RAkBaA,EAAgBC,EAAAA,QAAOC,EAAAA,oBAAoB;;EAI3CC,EAAaF,EAAAA,QAAOG,EAAAA,MAAM;;;;;;EAQ1BC,EAAYJ,EAAAA,QAAOE,EAAW;;;;;;;;EAU9BG,EAAoBL,EAAAA,QAAOM,aAAWC,OAAwB;;MAEpEC,IACC,GAAIA,EAAMC,UACN,OAAOC,KAAG;yBACGC,EAAAA,UAAU;aAE3B;EAIKC,EAAoBZ,EAAAA,QAAOa,GAAG;;;;EAM9BC,EAAgBd,EAAAA,QAAOM,aAAWC,OAAwB"}
+{"version":3,"file":"unit-number-input.style.js","sources":["../../../src/unit-number/unit-number-input.style.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Input } from \"../input\";\nimport { Typography } from \"../typography\";\nimport { V3_Colour } from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface LabelStyleProps {\n    $inactive?: boolean;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const HashContainer = styled.div`\n    margin-right: 0.5rem;\n`;\n\nexport const FloorInput = styled(Input)`\n    width: 2.5rem;\n\n    input {\n        text-align: center;\n    }\n`;\n\nexport const UnitInput = styled(FloorInput)`\n    // Cheat to balance the placeholder look while ensuring enough width\n    margin-left: 0.5rem;\n    width: 6rem;\n\n    input {\n        text-align: left;\n    }\n`;\n\nexport const UnitNumberDivider = styled(Typography.BodyBL)<LabelStyleProps>`\n    margin: 0 0.25rem;\n    ${(props) => {\n        if (props.$inactive) {\n            return css`\n                color: ${V3_Colour[\"text-disabled\"]};\n            `;\n        }\n    }}\n`;\n\nexport const ReadOnlyContainer = styled.div`\n    display: flex;\n    align-items: center;\n    height: calc(3rem - 2px); // exclude top and bottom borders\n`;\n\nexport const ReadOnlyLabel = styled(Typography.BodyBL)<LabelStyleProps>``;\n"],"names":["HashContainer","styled","div","FloorInput","Input","UnitInput","UnitNumberDivider","Typography","BodyBL","props","$inactive","css","V3_Colour","ReadOnlyContainer","ReadOnlyLabel"],"mappings":"wOAiBO,MAAMA,EAAgBC,EAAAA,QAAOC,GAAG;;EAI1BC,EAAaF,EAAAA,QAAOG,EAAAA,MAAM;;;;;;EAQ1BC,EAAYJ,EAAAA,QAAOE,EAAW;;;;;;;;EAU9BG,EAAoBL,EAAAA,QAAOM,aAAWC,OAAwB;;MAEpEC,IACC,GAAIA,EAAMC,UACN,OAAOC,KAAG;yBACGC,EAAAA,UAAU;aAE3B;EAIKC,EAAoBZ,EAAAA,QAAOC,GAAG;;;;EAM9BY,EAAgBb,EAAAA,QAAOM,aAAWC,OAAwB"}

package/cjs/util/simple-id-generator.js

@@ -1,2 +1,2 @@
-"use strict";exports.SimpleIdGenerator=class{static generate(){return Math.random().toString(36).substring(2,9)}};
+"use strict";function e(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t,r=e(require("react"));class n{static generate(){return Math.random().toString(36).substring(2,9)}}const u=null!==(t=r.default.useId)&&void 0!==t?t:()=>{const[e]=r.default.useState((()=>n.generate()));return e};exports.SimpleIdGenerator=n,exports.useId=u;
 //# sourceMappingURL=simple-id-generator.js.map

package/cjs/util/simple-id-generator.js.map

@@ -1 +1 @@
-{"version":3,"file":"simple-id-generator.js","sources":["../../../src/util/simple-id-generator.ts"],"sourcesContent":["export class SimpleIdGenerator {\n    /**\n     * Generates a simple generator for element ids\n     */\n    public static generate(): string {\n        return Math.random().toString(36).substring(2, 9);\n    }\n}\n"],"names":["generate","Math","random","toString","substring"],"mappings":"6CAIW,eAAOA,GACV,OAAOC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,EACnD"}
+{"version":3,"file":"simple-id-generator.js","sources":["../../../src/util/simple-id-generator.ts"],"sourcesContent":["import React from \"react\";\n\nexport class SimpleIdGenerator {\n    /**\n     * Generates a simple generator for element ids\n     */\n    public static generate(): string {\n        return Math.random().toString(36).substring(2, 9);\n    }\n}\n\nconst useSimpleId = () => {\n    const [id] = React.useState(() => SimpleIdGenerator.generate());\n    return id;\n};\n\n// TODO: can be removed when React 17 support is dropped\n// @ts-expect-error useId is only available in React 18+\nexport const useId: () => string = React.useId ?? useSimpleId;\n"],"names":["SimpleIdGenerator","generate","Math","random","toString","substring","useId","_a","React","id","useState"],"mappings":"uHAEaA,EAIF,eAAOC,GACV,OAAOC,KAAKC,SAASC,SAAS,IAAIC,UAAU,EAAG,EACnD,EAGJ,MAOaC,EAAiC,QAAXC,EAAAC,UAAMF,aAAK,IAAAC,EAAAA,EAP1B,KAChB,MAAOE,GAAMD,EAAAA,QAAME,UAAS,IAAMV,EAAkBC,aACpD,OAAOQ,CAAE"}

package/cjs/util/string-helper.js

@@ -1,2 +1,2 @@
-"use strict";class t{static transformWithSpaces(t,e){const n="(.{"+e+"})";return t.replace(/[^\dA-Z]/gi,"").replace(new RegExp(n,"g"),"$1 ").trim()}static padValue(t,e){if("0"===t)return e?t:t.padStart(2,"0");if(""===t)return t;return parseInt(t).toString().padStart(2,"0")}static shouldTruncateToTwoLines(t,e){const n=Math.floor(e/9);return t.length>=2*n||1===t.split(" ").length&&t.length>n}static truncateOneLine(t,e,n,r,s=8){let a=0;e>n&&(a=Math.floor((e-n)/s));const i=r+a;if(i<t.length){const e=Math.floor(i/2);return t.substring(0,e)+" ... "+t.substring(t.length-e,t.length)}return t}static truncateTwoLines(t,e,n,r=1.2){const s=Math.floor(2*e/(.6*n))*(2/r);if(t.length<=s)return t;const a=Math.floor(.6*s),i=Math.floor(.2*s);return`${t.substring(0,a)}...${t.substring(t.length-i)}`}static getTextWidth(e,n){if("undefined"==typeof document)return 0;const r=(t.getTextWidth.canvas||(t.getTextWidth.canvas=document.createElement("canvas"))).getContext("2d");r.font=n;return r.measureText(e).width}static maskValue(e,n){if(!e)return e;const{maskRange:r,unmaskRange:s,maskChar:a="•",maskRegex:i,maskTransformer:u}=n;if(u)return u(e);if(i)return e.replace(i,a);if(r){const{startIndex:n,endIndex:s}=t.determineStartAndEndIndex(r[0],r[1]);return e.substring(0,n)+a.repeat(e.substring(n,s+1).length)+e.substring(s+1)}if(s){const{startIndex:n,endIndex:r}=t.determineStartAndEndIndex(s[0],s[1]);return a.repeat(e.substring(0,n).length)+e.substring(n,r+1)+a.repeat(e.substring(r+1).length)}return e}static determineStartAndEndIndex(t,e){return t<e?{startIndex:t,endIndex:e}:{startIndex:e,endIndex:t}}static formatOrdinal(e){const n=t.ordinalPluralRules.select(e);return`${e}${t.suffixes.get(n)}`}static getMaskedDescription(t,e,n){if(!t||"masked"!==e||!n)return"";const[r,s]=n,a=r>0,i=s<t.length-1,u=a?t.substring(0,r):"",d=i?t.substring(s+1):"";return a&&i?`Starting with ${u} and ending with ${d}`:a?`Starting with ${u}`:i?`Ending with ${d}`:""}}t.ordinalPluralRules=new Intl.PluralRules("en",{type:"ordinal"}),t.suffixes=new Map([["one","st"],["two","nd"],["few","rd"],["other","th"]]),exports.StringHelper=t;
+"use strict";class t{static transformWithSpaces(t,e){const n="(.{"+e+"})";return t.replace(/[^\dA-Z]/gi,"").replace(new RegExp(n,"g"),"$1 ").trim()}static padValue(t,e){if("0"===t)return e?t:t.padStart(2,"0");if(""===t)return t;return parseInt(t).toString().padStart(2,"0")}static shouldTruncateToTwoLines(t,e){const n=Math.floor(e/9);return t.length>=2*n||1===t.split(" ").length&&t.length>n}static truncateOneLine(t,e,n,r,s=8){let a=0;e>n&&(a=Math.floor((e-n)/s));const i=r+a;if(i<t.length){const e=Math.floor(i/2);return t.substring(0,e)+" ... "+t.substring(t.length-e,t.length)}return t}static truncateTwoLines(t,e,n,r=1.2){const s=Math.floor(2*e/(.6*n))*(2/r);if(t.length<=s)return t;const a=Math.floor(.6*s),i=Math.floor(.2*s);return`${t.substring(0,a)}...${t.substring(t.length-i)}`}static getTextWidth(e,n){if("undefined"==typeof document)return 0;const r=(t.getTextWidth.canvas||(t.getTextWidth.canvas=document.createElement("canvas"))).getContext("2d");r.font=n;return r.measureText(e).width}static maskValue(e,n){if(!e)return e;const{maskRange:r,unmaskRange:s,maskChar:a="•",maskRegex:i,maskTransformer:u}=n;if(u)return u(e);if(i)return e.replace(i,a);if(r){const{startIndex:n,endIndex:s}=t.determineStartAndEndIndex(r[0],r[1]);return e.substring(0,n)+a.repeat(e.substring(n,s+1).length)+e.substring(s+1)}if(s){const{startIndex:n,endIndex:r}=t.determineStartAndEndIndex(s[0],s[1]);return a.repeat(e.substring(0,n).length)+e.substring(n,r+1)+a.repeat(e.substring(r+1).length)}return e}static determineStartAndEndIndex(t,e){return t<e?{startIndex:t,endIndex:e}:{startIndex:e,endIndex:t}}static formatOrdinal(e){const n=t.ordinalPluralRules.select(e);return`${e}${t.suffixes.get(n)}`}static getMaskedDescription(t,e,n){if(!t||"masked"!==e||!n)return"";const[r,s]=n,a=r>0,i=s<t.length-1,u=a?t.substring(0,r):"",o=i?t.substring(s+1):"";return a&&i?`Starting with ${u} and ending with ${o}`:a?`Starting with ${u}`:i?`Ending with ${o}`:""}static joinNonEmptyStrings(t,e=", "){return t.filter(Boolean).join(e)}}t.ordinalPluralRules=new Intl.PluralRules("en",{type:"ordinal"}),t.suffixes=new Map([["one","st"],["two","nd"],["few","rd"],["other","th"]]),exports.StringHelper=t;
 //# sourceMappingURL=string-helper.js.map

package/cjs/util/string-helper.js.map

@@ -1 +1 @@
-{"version":3,"file":"string-helper.js","sources":["../../../src/util/string-helper.ts"],"sourcesContent":["// =============================================================================\n// TYPINGS\n// =============================================================================\ninterface MaskValueOptions {\n    maskRange?: number[] | undefined;\n    unmaskRange?: number[] | undefined;\n    maskRegex?: RegExp | undefined;\n    maskTransformer?: ((value: string) => string) | undefined;\n    maskChar?: string | undefined;\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport class StringHelper {\n    public static transformWithSpaces(\n        value: string | any,\n        groupLength: number\n    ): string {\n        const regex = \"(.{\" + groupLength + \"})\";\n        return value\n            .replace(/[^\\dA-Z]/gi, \"\")\n            .replace(new RegExp(regex, \"g\"), \"$1 \")\n            .trim();\n    }\n\n    /**\n     * Pads single digit values with a zero and trims leading zero for\n     * values of length more than 2\n     * @param value the string value\n     * @param retainSingleZero setting true will allow single zero value\n     */\n    public static padValue(value: string, retainSingleZero?: boolean): string {\n        if (value === \"0\") {\n            return retainSingleZero ? value : value.padStart(2, \"0\");\n        }\n\n        if (value === \"\") {\n            return value;\n        }\n\n        const trimmedValue = parseInt(value);\n        return trimmedValue.toString().padStart(2, \"0\");\n    }\n\n    /**\n     * Checks if the text is required to be truncated and broken into two lines based\n     * on the available width of container. **Note: This is relevant to font size 18px or 1.125rem only **\n     * @param text input text\n     * @param widthOfElement element width in px\n     */\n    public static shouldTruncateToTwoLines(\n        text: string,\n        widthOfElement: number\n    ): boolean {\n        // This is arbitrary and based on tests to derive that every 9px increment ~= 1 char length.\n        // But this applies to font size 18px or 1.125rem only\n        const estimatedCharOnLine = Math.floor(widthOfElement / 9);\n        return (\n            text.length >= estimatedCharOnLine * 2 ||\n            (text.split(\" \").length === 1 && text.length > estimatedCharOnLine)\n        );\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param minDivSize the minimum container size (using size on mobileS viewport as baseline)\n     * @param baselineCharLength the baseline amount of characters to be displayed before truncation kicks. This\n     * will be increased if there is more space available (derived from `widthOfElement`)\n     * @param incrementFactor the size (in px).\n     */\n    public static truncateOneLine(\n        text: string,\n        widthOfElement: number,\n        minDivSize: number,\n        baselineCharLength: number,\n        incrementFactor = 8 // Arbitrary based on tests and applies to font size of 18px or 1.125rem\n    ): string {\n        let additionalCharAllowed = 0;\n        if (widthOfElement > minDivSize) {\n            additionalCharAllowed = Math.floor(\n                (widthOfElement - minDivSize) / incrementFactor\n            );\n        }\n        const allowedCharLength = baselineCharLength + additionalCharAllowed;\n        if (allowedCharLength < text.length) {\n            const thresholdIndex = Math.floor(allowedCharLength / 2); // We will cut it halfway to derive x num of characters\n            return (\n                text.substring(0, thresholdIndex) + // Use the first x\n                \" ... \" +\n                text.substring(text.length - thresholdIndex, text.length) // Use the last x\n            );\n        }\n\n        return text;\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param fontSize the fontsize of the text\n     * @param lineHeight the line height of the text\n     */\n    public static truncateTwoLines(\n        text: string,\n        widthOfElement: number,\n        fontSize: number,\n        lineHeight = 1.2\n    ): string {\n        // Estimate characters per line based on width and font size\n        const charsPerLine = Math.floor(\n            (widthOfElement * 2) / (fontSize * 0.6) // 0.6 is an approximation for average char width\n        );\n\n        // Calculate total characters allowed in two lines\n        const totalCharsAllowed = charsPerLine * (2 / lineHeight);\n\n        if (text.length <= totalCharsAllowed) {\n            return text; // No truncation needed\n        }\n\n        // Calculate the number of characters to keep\n        const keepFromStart = Math.floor(totalCharsAllowed * 0.6); // Keep 60% from start\n        const keepFromEnd = Math.floor(totalCharsAllowed * 0.2); // Keep 20% from end\n\n        // Truncate the text\n        const start = text.substring(0, keepFromStart);\n        const end = text.substring(text.length - keepFromEnd);\n\n        return `${start}...${end}`;\n    }\n\n    /**\n     * Returns the width of the text in the specified font\n     * https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393\n     */\n    public static getTextWidth(text: string, font: string): number {\n        if (typeof document === \"undefined\") {\n            return 0;\n        }\n\n        // create a reusable canvas object for better performance\n        const canvas =\n            (StringHelper.getTextWidth as any).canvas ||\n            ((StringHelper.getTextWidth as any).canvas =\n                document.createElement(\"canvas\"));\n        const context = canvas.getContext(\"2d\");\n        context.font = font;\n\n        const metrics = context.measureText(text);\n        return metrics.width;\n    }\n\n    public static maskValue(value: string, options: MaskValueOptions): string {\n        if (!value) {\n            return value;\n        }\n\n        const {\n            maskRange,\n            unmaskRange,\n            maskChar = \"•\",\n            maskRegex,\n            maskTransformer,\n        } = options;\n\n        if (maskTransformer) {\n            return maskTransformer(value);\n        } else if (maskRegex) {\n            return value.replace(maskRegex, maskChar);\n        } else if (maskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    maskRange[0],\n                    maskRange[1]\n                );\n            return (\n                value.substring(0, startIndex) +\n                maskChar.repeat(\n                    value.substring(startIndex, endIndex + 1).length\n                ) +\n                value.substring(endIndex + 1)\n            );\n        } else if (unmaskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    unmaskRange[0],\n                    unmaskRange[1]\n                );\n            return (\n                maskChar.repeat(value.substring(0, startIndex).length) +\n                value.substring(startIndex, endIndex + 1) +\n                maskChar.repeat(value.substring(endIndex + 1).length)\n            );\n        }\n\n        return value;\n    }\n\n    private static determineStartAndEndIndex(index0: number, index1: number) {\n        return index0 < index1\n            ? { startIndex: index0, endIndex: index1 }\n            : { startIndex: index1, endIndex: index0 };\n    }\n\n    private static ordinalPluralRules = new Intl.PluralRules(\"en\", {\n        type: \"ordinal\",\n    });\n\n    private static suffixes = new Map([\n        [\"one\", \"st\"],\n        [\"two\", \"nd\"],\n        [\"few\", \"rd\"],\n        [\"other\", \"th\"],\n    ]);\n\n    public static formatOrdinal(n: number) {\n        const rule = StringHelper.ordinalPluralRules.select(n);\n        const suffix = StringHelper.suffixes.get(rule);\n        return `${n}${suffix}`;\n    }\n\n    public static getMaskedDescription(\n        value: string,\n        displayMaskState: \"masked\" | \"unmasked\",\n        maskRange?: number[]\n    ): string {\n        if (!value || displayMaskState !== \"masked\" || !maskRange) return \"\";\n\n        const [startIndex, endIndex] = maskRange;\n        const hasStart = startIndex > 0;\n        const hasEnd = endIndex < value.length - 1;\n\n        const start = hasStart ? value.substring(0, startIndex) : \"\";\n        const end = hasEnd ? value.substring(endIndex + 1) : \"\";\n\n        if (hasStart && hasEnd)\n            return `Starting with ${start} and ending with ${end}`;\n        if (hasStart) return `Starting with ${start}`;\n        if (hasEnd) return `Ending with ${end}`;\n\n        return \"\";\n    }\n}\n"],"names":["StringHelper","transformWithSpaces","value","groupLength","regex","replace","RegExp","trim","padValue","retainSingleZero","padStart","parseInt","toString","shouldTruncateToTwoLines","text","widthOfElement","estimatedCharOnLine","Math","floor","length","split","truncateOneLine","minDivSize","baselineCharLength","incrementFactor","additionalCharAllowed","allowedCharLength","thresholdIndex","substring","truncateTwoLines","fontSize","lineHeight","totalCharsAllowed","keepFromStart","keepFromEnd","getTextWidth","font","document","context","canvas","createElement","getContext","measureText","width","maskValue","options","maskRange","unmaskRange","maskChar","maskRegex","maskTransformer","startIndex","endIndex","determineStartAndEndIndex","repeat","index0","index1","formatOrdinal","n","rule","ordinalPluralRules","select","suffixes","get","getMaskedDescription","displayMaskState","hasStart","hasEnd","start","end","Intl","PluralRules","type","Map"],"mappings":"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"}
+{"version":3,"file":"string-helper.js","sources":["../../../src/util/string-helper.ts"],"sourcesContent":["// =============================================================================\n// TYPINGS\n// =============================================================================\ninterface MaskValueOptions {\n    maskRange?: number[] | undefined;\n    unmaskRange?: number[] | undefined;\n    maskRegex?: RegExp | undefined;\n    maskTransformer?: ((value: string) => string) | undefined;\n    maskChar?: string | undefined;\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\nexport class StringHelper {\n    public static transformWithSpaces(\n        value: string | any,\n        groupLength: number\n    ): string {\n        const regex = \"(.{\" + groupLength + \"})\";\n        return value\n            .replace(/[^\\dA-Z]/gi, \"\")\n            .replace(new RegExp(regex, \"g\"), \"$1 \")\n            .trim();\n    }\n\n    /**\n     * Pads single digit values with a zero and trims leading zero for\n     * values of length more than 2\n     * @param value the string value\n     * @param retainSingleZero setting true will allow single zero value\n     */\n    public static padValue(value: string, retainSingleZero?: boolean): string {\n        if (value === \"0\") {\n            return retainSingleZero ? value : value.padStart(2, \"0\");\n        }\n\n        if (value === \"\") {\n            return value;\n        }\n\n        const trimmedValue = parseInt(value);\n        return trimmedValue.toString().padStart(2, \"0\");\n    }\n\n    /**\n     * Checks if the text is required to be truncated and broken into two lines based\n     * on the available width of container. **Note: This is relevant to font size 18px or 1.125rem only **\n     * @param text input text\n     * @param widthOfElement element width in px\n     */\n    public static shouldTruncateToTwoLines(\n        text: string,\n        widthOfElement: number\n    ): boolean {\n        // This is arbitrary and based on tests to derive that every 9px increment ~= 1 char length.\n        // But this applies to font size 18px or 1.125rem only\n        const estimatedCharOnLine = Math.floor(widthOfElement / 9);\n        return (\n            text.length >= estimatedCharOnLine * 2 ||\n            (text.split(\" \").length === 1 && text.length > estimatedCharOnLine)\n        );\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param minDivSize the minimum container size (using size on mobileS viewport as baseline)\n     * @param baselineCharLength the baseline amount of characters to be displayed before truncation kicks. This\n     * will be increased if there is more space available (derived from `widthOfElement`)\n     * @param incrementFactor the size (in px).\n     */\n    public static truncateOneLine(\n        text: string,\n        widthOfElement: number,\n        minDivSize: number,\n        baselineCharLength: number,\n        incrementFactor = 8 // Arbitrary based on tests and applies to font size of 18px or 1.125rem\n    ): string {\n        let additionalCharAllowed = 0;\n        if (widthOfElement > minDivSize) {\n            additionalCharAllowed = Math.floor(\n                (widthOfElement - minDivSize) / incrementFactor\n            );\n        }\n        const allowedCharLength = baselineCharLength + additionalCharAllowed;\n        if (allowedCharLength < text.length) {\n            const thresholdIndex = Math.floor(allowedCharLength / 2); // We will cut it halfway to derive x num of characters\n            return (\n                text.substring(0, thresholdIndex) + // Use the first x\n                \" ... \" +\n                text.substring(text.length - thresholdIndex, text.length) // Use the last x\n            );\n        }\n\n        return text;\n    }\n\n    /**\n     * Performs a truncation by adding ellipsis in the middle of the text.\n     * @param text input text\n     * @param widthOfElement the dynamic width of the container in px\n     * @param fontSize the fontsize of the text\n     * @param lineHeight the line height of the text\n     */\n    public static truncateTwoLines(\n        text: string,\n        widthOfElement: number,\n        fontSize: number,\n        lineHeight = 1.2\n    ): string {\n        // Estimate characters per line based on width and font size\n        const charsPerLine = Math.floor(\n            (widthOfElement * 2) / (fontSize * 0.6) // 0.6 is an approximation for average char width\n        );\n\n        // Calculate total characters allowed in two lines\n        const totalCharsAllowed = charsPerLine * (2 / lineHeight);\n\n        if (text.length <= totalCharsAllowed) {\n            return text; // No truncation needed\n        }\n\n        // Calculate the number of characters to keep\n        const keepFromStart = Math.floor(totalCharsAllowed * 0.6); // Keep 60% from start\n        const keepFromEnd = Math.floor(totalCharsAllowed * 0.2); // Keep 20% from end\n\n        // Truncate the text\n        const start = text.substring(0, keepFromStart);\n        const end = text.substring(text.length - keepFromEnd);\n\n        return `${start}...${end}`;\n    }\n\n    /**\n     * Returns the width of the text in the specified font\n     * https://stackoverflow.com/questions/118241/calculate-text-width-with-javascript/21015393#21015393\n     */\n    public static getTextWidth(text: string, font: string): number {\n        if (typeof document === \"undefined\") {\n            return 0;\n        }\n\n        // create a reusable canvas object for better performance\n        const canvas =\n            (StringHelper.getTextWidth as any).canvas ||\n            ((StringHelper.getTextWidth as any).canvas =\n                document.createElement(\"canvas\"));\n        const context = canvas.getContext(\"2d\");\n        context.font = font;\n\n        const metrics = context.measureText(text);\n        return metrics.width;\n    }\n\n    public static maskValue(value: string, options: MaskValueOptions): string {\n        if (!value) {\n            return value;\n        }\n\n        const {\n            maskRange,\n            unmaskRange,\n            maskChar = \"•\",\n            maskRegex,\n            maskTransformer,\n        } = options;\n\n        if (maskTransformer) {\n            return maskTransformer(value);\n        } else if (maskRegex) {\n            return value.replace(maskRegex, maskChar);\n        } else if (maskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    maskRange[0],\n                    maskRange[1]\n                );\n            return (\n                value.substring(0, startIndex) +\n                maskChar.repeat(\n                    value.substring(startIndex, endIndex + 1).length\n                ) +\n                value.substring(endIndex + 1)\n            );\n        } else if (unmaskRange) {\n            const { startIndex, endIndex } =\n                StringHelper.determineStartAndEndIndex(\n                    unmaskRange[0],\n                    unmaskRange[1]\n                );\n            return (\n                maskChar.repeat(value.substring(0, startIndex).length) +\n                value.substring(startIndex, endIndex + 1) +\n                maskChar.repeat(value.substring(endIndex + 1).length)\n            );\n        }\n\n        return value;\n    }\n\n    private static determineStartAndEndIndex(index0: number, index1: number) {\n        return index0 < index1\n            ? { startIndex: index0, endIndex: index1 }\n            : { startIndex: index1, endIndex: index0 };\n    }\n\n    private static ordinalPluralRules = new Intl.PluralRules(\"en\", {\n        type: \"ordinal\",\n    });\n\n    private static suffixes = new Map([\n        [\"one\", \"st\"],\n        [\"two\", \"nd\"],\n        [\"few\", \"rd\"],\n        [\"other\", \"th\"],\n    ]);\n\n    public static formatOrdinal(n: number) {\n        const rule = StringHelper.ordinalPluralRules.select(n);\n        const suffix = StringHelper.suffixes.get(rule);\n        return `${n}${suffix}`;\n    }\n\n    public static getMaskedDescription(\n        value: string,\n        displayMaskState: \"masked\" | \"unmasked\",\n        maskRange?: number[]\n    ): string {\n        if (!value || displayMaskState !== \"masked\" || !maskRange) return \"\";\n\n        const [startIndex, endIndex] = maskRange;\n        const hasStart = startIndex > 0;\n        const hasEnd = endIndex < value.length - 1;\n\n        const start = hasStart ? value.substring(0, startIndex) : \"\";\n        const end = hasEnd ? value.substring(endIndex + 1) : \"\";\n\n        if (hasStart && hasEnd)\n            return `Starting with ${start} and ending with ${end}`;\n        if (hasStart) return `Starting with ${start}`;\n        if (hasEnd) return `Ending with ${end}`;\n\n        return \"\";\n    }\n\n    public static joinNonEmptyStrings(\n        strings: (string | undefined | null)[],\n        delimiter = \", \"\n    ): string {\n        return strings.filter(Boolean).join(delimiter);\n    }\n}\n"],"names":["StringHelper","transformWithSpaces","value","groupLength","regex","replace","RegExp","trim","padValue","retainSingleZero","padStart","parseInt","toString","shouldTruncateToTwoLines","text","widthOfElement","estimatedCharOnLine","Math","floor","length","split","truncateOneLine","minDivSize","baselineCharLength","incrementFactor","additionalCharAllowed","allowedCharLength","thresholdIndex","substring","truncateTwoLines","fontSize","lineHeight","totalCharsAllowed","keepFromStart","keepFromEnd","getTextWidth","font","document","context","canvas","createElement","getContext","measureText","width","maskValue","options","maskRange","unmaskRange","maskChar","maskRegex","maskTransformer","startIndex","endIndex","determineStartAndEndIndex","repeat","index0","index1","formatOrdinal","n","rule","ordinalPluralRules","select","suffixes","get","getMaskedDescription","displayMaskState","hasStart","hasEnd","start","end","joinNonEmptyStrings","strings","delimiter","filter","Boolean","join","Intl","PluralRules","type","Map"],"mappings":"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"}

package/cjs/util/styling-helper.js

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

package/cjs/util/styling-helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styling-helper.js","sources":["../../../src/util/styling-helper.ts"],"sourcesContent":["import type {\n    ColourCSSVariableString,\n    RadiusCSSVariableString,\n} from \"../theme\";\nimport {\n    BorderThickness,\n    isTokenFromSet,\n    isTokenWithPrefix,\n    Radius,\n} from \"../theme\";\nimport type { ValueOf } from \"./utility-types\";\n\nconst radiusTokenSet = new Set<string>(Object.values(Radius));\nconst thicknessTokenSet = new Set<string>(Object.values(BorderThickness));\n\nexport const isRadiusToken = (\n    value: unknown\n): value is RadiusCSSVariableString => {\n    return isTokenFromSet<RadiusCSSVariableString>(value, radiusTokenSet);\n};\n\nexport const isThicknessToken = (\n    value: unknown\n): value is ValueOf<typeof BorderThickness> => {\n    return isTokenFromSet<ValueOf<typeof BorderThickness>>(\n        value,\n        thicknessTokenSet\n    );\n};\n\nexport const isColourToken = (\n    value: unknown\n): value is ColourCSSVariableString => {\n    return isTokenWithPrefix<ColourCSSVariableString>(\n        value,\n        \"var(--fds-colour-\"\n    );\n};\n"],"names":["radiusTokenSet","Set","Object","values","Radius","thicknessTokenSet","BorderThickness","value","isTokenWithPrefix","isTokenFromSet"],"mappings":"giBAYA,MAAMA,EAAiB,IAAIC,IAAYC,OAAOC,OAAOC,EAAAA,SAC/CC,EAAoB,IAAIJ,IAAYC,OAAOC,OAAOG,EAAAA,wCAkBpDC,GAEOC,EAAAA,kBACHD,EACA,2CAnBJA,GAEOE,EAAAA,eAAwCF,EAAOP,4BAItDO,GAEOE,EAAAA,eACHF,EACAF"}

package/cjs/util/time-helper.js

@@ -1,2 +1,2 @@
-"use strict";var t,r=require("../external/dayjs/dayjs.min.js"),e=require("./string-helper.js");exports.EPeriod=void 0,(t=exports.EPeriod||(exports.EPeriod={})).AM="AM",t.PM="PM";class o{static roundToNearestInterval(t,r,e){const[o,n]=t.split(":"),i=parseInt(o,10),a=parseInt(n,10);if(isNaN(i)||isNaN(a)||a<0||a>=60)throw new Error("Invalid time format");const s=60*i+a,u=s%r,l=0===u?s:e?s+(r-u):s-u,p=l%60;return`${Math.floor(l/60).toString().padStart(2,"0")}:${p.toString().padStart(2,"0")}`}static generateHourlyIntervals(t,e,o="ha"){const n="HH:mm";let i=r.default(t,n),a=r.default(e,n);i.isSame(a)&&(a=a.add(1,"day"));const s=[];for(;i.isBefore(a);)s.push(i.format(o)),i=i.add(1,"hour");return s}static getTimeValues(t,r){const o={hour:"",minute:"",period:exports.EPeriod.AM};if(!r)return o;try{if("24hr"===t){const n=s(r,t);o.minute=e.StringHelper.padValue(n.minute);const i=parseInt(n.hour);0===Math.floor(i/12)?(o.period=exports.EPeriod.AM,o.hour=0===i?"12":e.StringHelper.padValue(i.toString())):(o.period=exports.EPeriod.PM,o.hour=12===i?i.toString():e.StringHelper.padValue((i-12).toString()))}else{const{hour:n,minute:i,period:a=""}=s(r,t);o.hour=e.StringHelper.padValue(n),o.minute=e.StringHelper.padValue(i),o.period="am"===a.toLowerCase()?exports.EPeriod.AM:exports.EPeriod.PM}return o}catch(t){return o}}static updateMinutes(t,r){const o=parseInt(t);if(isNaN(o))return"add"===r?e.StringHelper.padValue("0"):"55";const n=Math.floor(o/5),i=(("add"===r?n+1:o%5==0?n-1:n)%12+12)%12;return e.StringHelper.padValue((5*i).toString())}static updateHours(t,r){const o=parseInt(t);if(isNaN(o))return"add"===r?e.StringHelper.padValue("1"):"12";const n="add"===r?o+1:o-1;return n<=12&&n>0?e.StringHelper.padValue(n.toString()):13===n?e.StringHelper.padValue("1"):"12"}static convertTo24HourFormat(t){const r=parseInt(t.hour);let e;return e=t.period===exports.EPeriod.PM?12===r?r.toString():(r+12).toString():12===r?"00":t.hour,`${e}:${t.minute}`}static convertHourTo12HourFormat(t){const r=parseInt(t),o=r%12==0?12..toString():(r%12).toString();return e.StringHelper.padValue(o)}static formatDisplayValue(t,r){try{const{hour:o,minute:n,period:i=""}=s(t,r),a=e.StringHelper.padValue(o);let u=`${a}:${e.StringHelper.padValue(n)}`;return"12hr"===r?(u+=i.toLowerCase(),u):u}catch(t){return""}}static toMinutesSeconds(t){return{minutes:Math.floor(t/60),seconds:t%60}}static to24Hour(t){if((null==t?void 0:t.includes("am"))||(null==t?void 0:t.includes("pm"))){const[r,e]=t.split(/(am|pm)/i),[o,n]=r.split(":").map(Number);let i=o;return"pm"===e&&i<12&&(i+=12),"am"===e&&12===i&&(i=0),u(i,n)}return t}static generateTimings(t,r="12hr",e,n){const i=[];let a=0,s=1440-t;for(e&&(a=o.timeToMinutes(e)),n&&(s=o.timeToMinutes(n));a<=s;){let e=Math.floor(a/60);const o=a%60;if("12hr"===r){const t=e>=12?"pm":"am";e%=12,e=e||12;const r=u(e,o,t);i.push(r)}else{const t=u(e,o);i.push(t)}a+=t}return i}static parseInput(t,r="12hr"){if(""===t||void 0===t)return t;const e=t.trim().toLowerCase(),o=/^(?:(\d{1,2})([:.])?(\d{2})?)?(a|p|am|pm)?$/.exec(e);if(!o)return;let n=parseInt(o[1]||"0",10);const i=parseInt(o[3]||"0",10);let a=o[4];if(void 0===o[1]||n>24||i>59)return;if("a"===a?a="am":"p"===a&&(a="pm"),"24hr"===r)return"pm"===a&&n<12?n+=12:("am"===a&&12===n||24===n)&&(n=0),u(n,i);a?0===n||24===n?(a="am",n=12):n>12&&(a="pm",n-=12):(a=0===n||24===n||n>6&&n<12?"am":"pm",n=n%12||12);return u(n,i,a)}static findClosestFlooredTime(t,r){if(!t)return t;const e=o.timeToMinutes(t);let n="",i=1/0;for(const t of r){const r=o.timeToMinutes(t)-e;if(r<=0&&Math.abs(r)<i)i=Math.abs(r),n=t;else if(r>0)break}return n}static timeToMinutes(t){const[r,e]=t.toLowerCase().split(/(am|pm)/),[o,n]=r.split(":").map(Number);let i=o;return"pm"===e&&12!==i&&(i+=12),"am"===e&&12===i&&(i=0),60*i+n}static calculateDuration(t,r){const e=o.timeToMinutes(t);return o.timeToMinutes(r)-e}static calculateScrollPosition(t){const{scrollTime:r,minTime:e,maxTime:i,interval:a,intervalWidth:s,options:u}=t;try{if(!/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(r))return console.warn(`Invalid scrollTime format: "${r}". Expected format: HH:mm.`),null;const t=(null==u?void 0:u.roundToInterval)?o.roundToNearestInterval(r,a):r,[l,p]=n(t);if(isNaN(l)||isNaN(p))return console.warn(`Invalid scrollTime: "${r}".`),null;const c=60*l+p,[d,m]=n(e),h=60*d+m,[f,g]=n(i);(c<h||c>60*f+g)&&console.warn(`scrollTime "${r}" is outside the range (${e} - ${i}).`);return(c-h)/a*s}catch(t){return console.warn(`Error processing scrollTime: "${r}".`,t),null}}}const n=t=>t.split(":").map(Number),i=(t,r)=>{const e=parseInt(t);return"24hr"===r?e>=0&&e<=23:e>=1&&e<=12},a=t=>{const r=parseInt(t);return r>=0&&r<=59},s=(t,r)=>{const e=t?t.split(":"):[],o=new Error("Invalid format");if("12hr"===r){if(2!==e.length||4!==e[1].length)throw o;const t=e[1].substring(0,2),s=e[1].substring(2);if(!i(e[0],r)||!a(t)||"am"!==(n=s).toLowerCase()&&"pm"!==n.toLowerCase())throw o;return{hour:e[0],minute:t,period:e[1].substring(2)}}if(2!==e.length)throw o;if(!i(e[0],r)||!a(e[1]))throw o;return{hour:e[0],minute:e[1]};var n},u=(t,r,e)=>e?`${t}:${r.toString().padStart(2,"0")}${e}`:`${t.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`;exports.TimeHelper=o;
+"use strict";var t,r=require("../external/dayjs/dayjs.min.js"),e=require("./string-helper.js");exports.EPeriod=void 0,(t=exports.EPeriod||(exports.EPeriod={})).AM="AM",t.PM="PM";class o{static roundToNearestInterval(t,r,e){const[o,n]=t.split(":"),i=parseInt(o,10),a=parseInt(n,10);if(isNaN(i)||isNaN(a)||a<0||a>=60)throw new Error("Invalid time format");const s=60*i+a,u=s%r,l=0===u?s:e?s+(r-u):s-u,m=l%60;return`${Math.floor(l/60).toString().padStart(2,"0")}:${m.toString().padStart(2,"0")}`}static generateHourlyIntervals(t,e,o="ha"){const n="HH:mm";let i=r.default(t,n),a=r.default(e,n);i.isSame(a)&&(a=a.add(1,"day"));const s=[];for(;i.isBefore(a);)s.push(i.format(o)),i=i.add(1,"hour");return s}static getTimeValues(t,r){const o={hour:"",minute:"",period:exports.EPeriod.AM};if(!r)return o;try{if("24hr"===t){const n=s(r,t);o.minute=e.StringHelper.padValue(n.minute);const i=parseInt(n.hour);0===Math.floor(i/12)?(o.period=exports.EPeriod.AM,o.hour=0===i?"12":e.StringHelper.padValue(i.toString())):(o.period=exports.EPeriod.PM,o.hour=12===i?i.toString():e.StringHelper.padValue((i-12).toString()))}else{const{hour:n,minute:i,period:a=""}=s(r,t);o.hour=e.StringHelper.padValue(n),o.minute=e.StringHelper.padValue(i),o.period="am"===a.toLowerCase()?exports.EPeriod.AM:exports.EPeriod.PM}return o}catch(t){return o}}static updateMinutes(t,r){const o=parseInt(t);if(isNaN(o))return"add"===r?e.StringHelper.padValue("0"):"55";const n=Math.floor(o/5),i=(("add"===r?n+1:o%5==0?n-1:n)%12+12)%12;return e.StringHelper.padValue((5*i).toString())}static updateHours(t,r){const o=parseInt(t);if(isNaN(o))return"add"===r?e.StringHelper.padValue("1"):"12";const n="add"===r?o+1:o-1;return n<=12&&n>0?e.StringHelper.padValue(n.toString()):13===n?e.StringHelper.padValue("1"):"12"}static convertTo24HourFormat(t){const r=parseInt(t.hour);let e;return e=t.period===exports.EPeriod.PM?12===r?r.toString():(r+12).toString():12===r?"00":t.hour,`${e}:${t.minute}`}static convertHourTo12HourFormat(t){const r=parseInt(t),o=r%12==0?12..toString():(r%12).toString();return e.StringHelper.padValue(o)}static formatTimeRange(t,e){return`${r.default(t,"HH:mm").format("h:mmA")} to ${r.default(e,"HH:mm").format("h:mmA")}`}static isSameTime(t,e){return r.default(t,"H:mm").isSame(r.default(e,"H:mm"),"minute")}static formatDisplayValue(t,r){try{const{hour:o,minute:n,period:i=""}=s(t,r),a=e.StringHelper.padValue(o);let u=`${a}:${e.StringHelper.padValue(n)}`;return"12hr"===r?(u+=i.toLowerCase(),u):u}catch(t){return""}}static toMinutesSeconds(t){return{minutes:Math.floor(t/60),seconds:t%60}}static to24Hour(t){if((null==t?void 0:t.includes("am"))||(null==t?void 0:t.includes("pm"))){const[r,e]=t.split(/(am|pm)/i),[o,n]=r.split(":").map(Number);let i=o;return"pm"===e&&i<12&&(i+=12),"am"===e&&12===i&&(i=0),u(i,n)}return t}static generateTimings(t,r="12hr",e,n){const i=[];let a=0,s=1440-t;for(e&&(a=o.timeToMinutes(e)),n&&(s=o.timeToMinutes(n));a<=s;){let e=Math.floor(a/60);const o=a%60;if("12hr"===r){const t=e>=12?"pm":"am";e%=12,e=e||12;const r=u(e,o,t);i.push(r)}else{const t=u(e,o);i.push(t)}a+=t}return i}static parseInput(t,r="12hr"){if(""===t||void 0===t)return t;const e=t.trim().toLowerCase(),o=/^(?:(\d{1,2})([:.])?(\d{2})?)?(a|p|am|pm)?$/.exec(e);if(!o)return;let n=parseInt(o[1]||"0",10);const i=parseInt(o[3]||"0",10);let a=o[4];if(void 0===o[1]||n>24||i>59)return;if("a"===a?a="am":"p"===a&&(a="pm"),"24hr"===r)return"pm"===a&&n<12?n+=12:("am"===a&&12===n||24===n)&&(n=0),u(n,i);a?0===n||24===n?(a="am",n=12):n>12&&(a="pm",n-=12):(a=0===n||24===n||n>6&&n<12?"am":"pm",n=n%12||12);return u(n,i,a)}static findClosestFlooredTime(t,r){if(!t)return t;const e=o.timeToMinutes(t);let n="",i=1/0;for(const t of r){const r=o.timeToMinutes(t)-e;if(r<=0&&Math.abs(r)<i)i=Math.abs(r),n=t;else if(r>0)break}return n}static timeToMinutes(t){const[r,e]=t.toLowerCase().split(/(am|pm)/),[o,n]=r.split(":").map(Number);let i=o;return"pm"===e&&12!==i&&(i+=12),"am"===e&&12===i&&(i=0),60*i+n}static calculateDuration(t,r){const e=o.timeToMinutes(t);return o.timeToMinutes(r)-e}static calculateScrollPosition(t){const{scrollTime:r,minTime:e,maxTime:i,interval:a,intervalWidth:s,options:u}=t;try{if(!/^([0-1]?[0-9]|2[0-3]):[0-5][0-9]$/.test(r))return console.warn(`Invalid scrollTime format: "${r}". Expected format: HH:mm.`),null;const t=(null==u?void 0:u.roundToInterval)?o.roundToNearestInterval(r,a):r,[l,m]=n(t);if(isNaN(l)||isNaN(m))return console.warn(`Invalid scrollTime: "${r}".`),null;const p=60*l+m,[c,d]=n(e),f=60*c+d,[h,g]=n(i);(p<f||p>60*h+g)&&console.warn(`scrollTime "${r}" is outside the range (${e} - ${i}).`);return(p-f)/a*s}catch(t){return console.warn(`Error processing scrollTime: "${r}".`,t),null}}}const n=t=>t.split(":").map(Number),i=(t,r)=>{const e=parseInt(t);return"24hr"===r?e>=0&&e<=23:e>=1&&e<=12},a=t=>{const r=parseInt(t);return r>=0&&r<=59},s=(t,r)=>{const e=t?t.split(":"):[],o=new Error("Invalid format");if("12hr"===r){if(2!==e.length||4!==e[1].length)throw o;const t=e[1].substring(0,2),s=e[1].substring(2);if(!i(e[0],r)||!a(t)||"am"!==(n=s).toLowerCase()&&"pm"!==n.toLowerCase())throw o;return{hour:e[0],minute:t,period:e[1].substring(2)}}if(2!==e.length)throw o;if(!i(e[0],r)||!a(e[1]))throw o;return{hour:e[0],minute:e[1]};var n},u=(t,r,e)=>e?`${t}:${r.toString().padStart(2,"0")}${e}`:`${t.toString().padStart(2,"0")}:${r.toString().padStart(2,"0")}`;exports.TimeHelper=o;
 //# sourceMappingURL=time-helper.js.map