@lifesg/react-design-system 3.5.0-canary.7 → 4.0.0-alpha.10

package/typography/index.js

@@ -1,2 +1,2 @@
-export{Typography}from"./typography.js";
+import{BodyMD as i,BodyBL as n,BodySM as d,BodyXS as o,LinkMD as L,LinkBL as a,HeadingMD as e,HeadingSM as g,LinkSM as y,LinkXS as B,HeadingXS as H,HeadingLG as M,HeadingXL as S,HeadingXXL as X}from"./typography.js";const k={HeadingXXL:X,HeadingXL:S,HeadingLG:M,HeadingMD:e,HeadingSM:g,HeadingXS:H,BodyBL:n,BodyMD:i,BodySM:d,BodyXS:o,LinkBL:a,LinkMD:L,LinkSM:y,LinkXS:B};export{k as Typography};
 //# sourceMappingURL=index.js.map

package/typography/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.js","sources":["../../src/typography/index.ts"],"sourcesContent":["import {\n    BodyBL,\n    BodyMD,\n    BodySM,\n    BodyXS,\n    HeadingLG,\n    HeadingMD,\n    HeadingSM,\n    HeadingXL,\n    HeadingXS,\n    HeadingXXL,\n    LinkBL,\n    LinkMD,\n    LinkSM,\n    LinkXS,\n} from \"./typography\";\n\n// @catalog\n/**\n * A collection of pre-styled text components covering headings, body copy, and\n * hyperlinks.\n *\n * Use `Typography` sub-components to render consistently sized and weighted\n * text.\n *\n * Sub-components:\n * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.\n * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.\n * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .\n *\n * @remarks All text variants accept an `as` prop to\n * override the rendered element for semantic flexibility.\n * @keywords text, type scale\n */\nexport const Typography = {\n    /** Renders the largest heading (`h1`). */\n    HeadingXXL,\n    /** Renders an extra-large heading (`h2`). */\n    HeadingXL,\n    /** Renders a large heading (`h3`). */\n    HeadingLG,\n    /** Renders a medium heading (`h4`). */\n    HeadingMD,\n    /** Renders a small heading (`h5`). */\n    HeadingSM,\n    /** Renders the smallest heading (`h6`). */\n    HeadingXS,\n    /** Renders baseline body text (`p`). */\n    BodyBL,\n    /** Renders medium body text (`p`). */\n    BodyMD,\n    /** Renders small body text (`p`). */\n    BodySM,\n    /** Renders extra-small body text (`p`). */\n    BodyXS,\n    /** Renders a baseline-size hyperlink (`a`). */\n    LinkBL,\n    /** Renders a medium-size hyperlink (`a`). */\n    LinkMD,\n    /** Renders a small-size hyperlink (`a`). */\n    LinkSM,\n    /** Renders an extra-small hyperlink (`a`). */\n    LinkXS,\n};\n\nexport * from \"./types\";\n"],"names":["Typography","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","BodyBL","BodyMD","BodySM","BodyXS","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"wNAkCO,MAAMA,EAAa,CAEtBC,aAEAC,YAEAC,YAEAC,YAEAC,YAEAC,YAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC"}

package/typography/types.d.ts

@@ -1,20 +1,67 @@
+import type { FontSize } from "../theme";
+/** Font weight variant applied to a typography element. */
 export type TypographyWeight = "regular" | "semibold" | "bold" | "light";
-export interface TypographyProps extends React.HTMLAttributes<HTMLElement> {
-    /** The font weight */
+/**
+ * Text size token for a typography element.
+ */
+export type TypographySize = Exclude<FontSize, "form-label" | "form-description">;
+/**
+ * Props shared by all non-link typography variants.
+ *
+ * The generic `T` narrows the element type for the `as` prop and ensures
+ * forwarded HTML attributes match the rendered element.
+ */
+export type TypographyProps<T extends React.ElementType = React.ElementType> = React.ComponentPropsWithoutRef<T> & {
+    /**
+     * Font weight of the rendered text.
+     *
+     * @default "regular"
+     */
     weight?: TypographyWeight | undefined;
-    /** Specifies if text is displayed inline */
+    /**
+     * Renders the element as an inline `span`. When `true`, the `as` prop
+     * is ignored and `maxLines` clamping is disabled.
+     */
     inline?: boolean | undefined;
-    /** Specifies if text has a bottom margin */
+    /**
+     * Adds a bottom margin to separate the element from following content.
+     */
     paragraph?: boolean | undefined;
-    /** Specify the number of lines visible, the additional lines will be truncated */
+    /**
+     * Clamps visible text to the given number of lines, truncating the
+     * remainder.
+     *
+     * @remarks Has no effect when `inline` is `true`.
+     */
     maxLines?: number | undefined;
-}
+    /**
+     * Overrides the rendered HTML element, e.g. `"h2"`.
+     *
+     * @remarks Has no effect when `inline` is `true`.
+     */
+    as?: T | undefined;
+};
+/** Text-decoration style applied to a link typography element. */
 export type TypographyUnderlineStyle = "none" | "underline";
+/**
+ * Props for all link typography variants.
+ */
 export interface TypographyLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
-    /** The font weight */
+    /**
+     * Font weight of the link text.
+     *
+     * @default "regular"
+     */
     weight?: TypographyWeight | undefined;
-    /** Displays indicator to signal that link leads to an external site */
+    /**
+     * Appends an external-link icon after the link text to signal that the
+     * destination is outside the current site.
+     */
     external?: boolean | undefined;
-    /** Toggle text decoration for hyperlinks, underline by default */
+    /**
+     * Text-decoration style for the link.
+     *
+     * @default "underline"
+     */
     underlineStyle?: TypographyUnderlineStyle | undefined;
 }

package/typography/typography-text.styles.d.ts

@@ -0,0 +1,3 @@
+import type { TypographySize, TypographyWeight } from "./types";
+export declare const typographySize: Record<TypographySize, string>;
+export declare const typographyWeight: Record<TypographyWeight, string>;

package/typography/typography-text.styles.js

@@ -0,0 +1,2 @@
+import"./typography-text.styles_1734x2k.css";const h={"heading-xxl":"hfl3ekz","heading-xl":"h1wbj2xe","heading-lg":"h1ml8c05","heading-md":"h12i879k","heading-sm":"h12v6vm5","heading-xs":"hzwk9ye","body-baseline":"bg0vyh3","body-md":"b1h8qozz","body-sm":"b1n2zaqp","body-xs":"b14pmtsp"},e={light:"lqvxzn1",regular:"r1kcu5nk",semibold:"s1pdcykv",bold:"b1rin8wh"};export{h as typographySize,e as typographyWeight};
+//# sourceMappingURL=typography-text.styles.js.map

package/typography/typography-text.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"typography-text.styles.js","sources":["../../src/typography/typography-text.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { Font } from \"../theme\";\nimport { createFontSizeStyles, createFontWeightStyles } from \"./helper\";\nimport type { TypographySize, TypographyWeight } from \"./types\";\n\nconst typographySizeSpec: Record<\n    TypographySize,\n    { size: string; lineHeight: string; letterSpacing: string }\n> = {\n    \"heading-xxl\": {\n        size: Font.Spec[\"heading-size-xxl\"],\n        lineHeight: Font.Spec[\"heading-lh-xxl\"],\n        letterSpacing: Font.Spec[\"heading-ls-xxl\"],\n    },\n    \"heading-xl\": {\n        size: Font.Spec[\"heading-size-xl\"],\n        lineHeight: Font.Spec[\"heading-lh-xl\"],\n        letterSpacing: Font.Spec[\"heading-ls-xl\"],\n    },\n    \"heading-lg\": {\n        size: Font.Spec[\"heading-size-lg\"],\n        lineHeight: Font.Spec[\"heading-lh-lg\"],\n        letterSpacing: Font.Spec[\"heading-ls-lg\"],\n    },\n    \"heading-md\": {\n        size: Font.Spec[\"heading-size-md\"],\n        lineHeight: Font.Spec[\"heading-lh-md\"],\n        letterSpacing: Font.Spec[\"heading-ls-md\"],\n    },\n    \"heading-sm\": {\n        size: Font.Spec[\"heading-size-sm\"],\n        lineHeight: Font.Spec[\"heading-lh-sm\"],\n        letterSpacing: Font.Spec[\"heading-ls-sm\"],\n    },\n    \"heading-xs\": {\n        size: Font.Spec[\"heading-size-xs\"],\n        lineHeight: Font.Spec[\"heading-lh-xs\"],\n        letterSpacing: Font.Spec[\"heading-ls-xs\"],\n    },\n    \"body-baseline\": {\n        size: Font.Spec[\"body-size-baseline\"],\n        lineHeight: Font.Spec[\"body-lh-baseline\"],\n        letterSpacing: Font.Spec[\"body-ls-baseline\"],\n    },\n    \"body-md\": {\n        size: Font.Spec[\"body-size-md\"],\n        lineHeight: Font.Spec[\"body-lh-md\"],\n        letterSpacing: Font.Spec[\"body-ls-md\"],\n    },\n    \"body-sm\": {\n        size: Font.Spec[\"body-size-sm\"],\n        lineHeight: Font.Spec[\"body-lh-sm\"],\n        letterSpacing: Font.Spec[\"body-ls-sm\"],\n    },\n    \"body-xs\": {\n        size: Font.Spec[\"body-size-xs\"],\n        lineHeight: Font.Spec[\"body-lh-xs\"],\n        letterSpacing: Font.Spec[\"body-ls-xs\"],\n    },\n};\n\nexport const typographySize: Record<TypographySize, string> = {\n    \"heading-xxl\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-xxl\"])}\n    `,\n    \"heading-xl\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-xl\"])}\n    `,\n    \"heading-lg\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-lg\"])}\n    `,\n    \"heading-md\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-md\"])}\n    `,\n    \"heading-sm\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-sm\"])}\n    `,\n    \"heading-xs\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"heading-xs\"])}\n    `,\n    \"body-baseline\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"body-baseline\"])}\n    `,\n    \"body-md\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"body-md\"])}\n    `,\n    \"body-sm\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"body-sm\"])}\n    `,\n    \"body-xs\": css`\n        ${createFontSizeStyles(typographySizeSpec[\"body-xs\"])}\n    `,\n};\n\nexport const typographyWeight: Record<TypographyWeight, string> = {\n    light: css`\n        ${createFontWeightStyles(Font.Spec[\"weight-light\"])}\n    `,\n    regular: css`\n        ${createFontWeightStyles(Font.Spec[\"weight-regular\"])}\n    `,\n    semibold: css`\n        ${createFontWeightStyles(Font.Spec[\"weight-semibold\"])}\n    `,\n    bold: css`\n        ${createFontWeightStyles(Font.Spec[\"weight-bold\"])}\n    `,\n};\n"],"names":["typographySize","typographyWeight","light","regular","semibold","bold"],"mappings":"uEA8DO,MAAMA,EAAiD,CAC1D,cAAa,UAGb,aAAY,WAGZ,aAAY,WAGZ,aAAY,WAGZ,aAAY,WAGZ,aAAY,UAGZ,gBAAe,UAGf,UAAS,WAGT,UAAS,WAGT,UAAS,YAKAC,EAAqD,CAC9DC,MAAK,UAGLC,QAAO,WAGPC,SAAQ,WAGRC,KAAI"}

package/typography/typography-text.styles_1734x2k.css

@@ -0,0 +1,14 @@
+@layer fds{.hfl3ekz{font-size:var(--fds-font-heading-size-xxl);line-height:var(--fds-font-heading-lh-xxl);letter-spacing:var(--fds-font-heading-ls-xxl);}
+.h1wbj2xe{font-size:var(--fds-font-heading-size-xl);line-height:var(--fds-font-heading-lh-xl);letter-spacing:var(--fds-font-heading-ls-xl);}
+.h1ml8c05{font-size:var(--fds-font-heading-size-lg);line-height:var(--fds-font-heading-lh-lg);letter-spacing:var(--fds-font-heading-ls-lg);}
+.h12i879k{font-size:var(--fds-font-heading-size-md);line-height:var(--fds-font-heading-lh-md);letter-spacing:var(--fds-font-heading-ls-md);}
+.h12v6vm5{font-size:var(--fds-font-heading-size-sm);line-height:var(--fds-font-heading-lh-sm);letter-spacing:var(--fds-font-heading-ls-sm);}
+.hzwk9ye{font-size:var(--fds-font-heading-size-xs);line-height:var(--fds-font-heading-lh-xs);letter-spacing:var(--fds-font-heading-ls-xs);}
+.bg0vyh3{font-size:var(--fds-font-body-size-baseline);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);}
+.b1h8qozz{font-size:var(--fds-font-body-size-md);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);}
+.b1n2zaqp{font-size:var(--fds-font-body-size-sm);line-height:var(--fds-font-body-lh-sm);letter-spacing:var(--fds-font-body-ls-sm);}
+.b14pmtsp{font-size:var(--fds-font-body-size-xs);line-height:var(--fds-font-body-lh-xs);letter-spacing:var(--fds-font-body-ls-xs);}
+.lqvxzn1{font-weight:var(--fds-font-weight-light);}
+.r1kcu5nk{font-weight:var(--fds-font-weight-regular);}
+.s1pdcykv{font-weight:var(--fds-font-weight-semibold);}
+.b1rin8wh{font-weight:var(--fds-font-weight-bold);}}

package/typography/typography.d.ts

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

package/typography/typography.js

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

package/typography/typography.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.js","sources":["../../src/typography/typography.tsx"],"sourcesContent":["import React, { RefObject } from \"react\";\nimport { IStyledComponent } from \"styled-components\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { TypographyLinkProps, TypographyProps } from \"./types\";\nimport {\n    HyperlinkBase,\n    StyledExternalIcon,\n    TypographyBase,\n} from \"./typography.styles\";\n\nexport namespace Typography {\n    const createHeading = (\n        tag: keyof JSX.IntrinsicElements,\n        textStyle: 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\n    export const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\n    export const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\n    export const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\n    export const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\n    export const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\n    export const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\n    const createBody = (textStyle: 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\n    export const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\n    export const BodyMD = createBody(\"body-md\", \"BodyMD\");\n    export const BodySM = createBody(\"body-sm\", \"BodySM\");\n    export const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\n    const createLinkComponent = (\n        textStyle: 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\n    export const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\n    export const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\n    export const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\n    export const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n}\n"],"names":["Typography","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":"yNAUM,IAAWA,GAAjB,SAAiBA,GACb,MAAMC,EAAgB,CAClBC,EACAC,EACAC,KAEA,MAAMC,EAAS,CACXC,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,EAACC,EAAcC,OAAAC,OAAA,CACXV,IAAKA,EACLW,GAAIT,EAAS,OAASP,EAAGiB,WACbhB,EAASiB,QACZZ,EAAMa,QACNZ,EAAMa,WACHZ,YACDC,GACPC,GACN,EAIV,OADAP,EAAOD,YAAc,cAAcA,IAC5BmB,EAAMC,WAAWnB,EAKvB,EAGQL,EAAAyB,WAAaxB,EAAc,KAAM,cAAe,cAChDD,EAAA0B,UAAYzB,EAAc,KAAM,aAAc,aAC9CD,EAAA2B,UAAY1B,EAAc,KAAM,aAAc,aAC9CD,EAAA4B,UAAY3B,EAAc,KAAM,aAAc,aAC9CD,EAAA6B,UAAY5B,EAAc,KAAM,aAAc,aAC9CD,EAAA8B,UAAY7B,EAAc,KAAM,aAAc,aAE3D,MAAM8B,EAAa,CAAC5B,EAA+BC,KAC/C,MAAM4B,EAAO,CACT1B,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,EAACC,EAAcC,OAAAC,OAAA,CACXV,IAAKA,EACLW,GAAIT,EAAS,OAAS,IAAGU,WACbhB,EAASiB,QACZZ,EAAMa,QACNZ,EAAMa,WACHZ,YACDC,GACPC,GACN,EAIV,OADAoB,EAAK5B,YAAc,cAAcA,IAC1BmB,EAAMC,WAAWQ,EAKvB,EAGQhC,EAAAiC,OAASF,EAAW,gBAAiB,UACrC/B,EAAAkC,OAASH,EAAW,UAAW,UAC/B/B,EAAAmC,OAASJ,EAAW,UAAW,UAC/B/B,EAAAoC,OAASL,EAAW,UAAW,UAE5C,MAAMM,EAAsB,CACxBlC,EACAC,KAEA,MAAMkC,EAAY,CACdhC,EAOAC,KAPA,IAAAC,OACIA,EAAM+B,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,aAAWnC,EACzBM,EAAKC,EAAAP,EALZ,mDASA,OACIoC,EAACC,EAAa3B,OAAAC,OAAA,CACVV,IAAKA,EAAGY,WACIhB,EAASiB,QACZZ,EAAMoC,gBACEH,GACb7B,EAAK,CAAA2B,SAAA,CAERA,EACAC,GAAY1B,EAAC+B,EAAkB,OACpB,EAIxB,OADAP,EAAUlC,YAAc,cAAcA,IAC/BmB,EAAMC,WAAWc,EAKvB,EAGQtC,EAAA8C,OAAST,EAAoB,gBAAiB,UAC9CrC,EAAA+C,OAASV,EAAoB,UAAW,UACxCrC,EAAAgD,OAASX,EAAoB,UAAW,UACxCrC,EAAAiD,OAASZ,EAAoB,UAAW,SACxD,CA/GD,CAAiBrC,IAAAA,EAAU,CAAA"}
+{"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    isHeading: boolean\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                    isHeading ? styles.typographyHeader : styles.typographyBody,\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, true);\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, false);\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.typographyBody,\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","isHeading","TypographyText","React","forwardRef","_a","ref","className","as","asProp","maxLines","restProps","__rest","textWeight","textRef","useRef","mergedRef","mergeRefs","shouldClamp","shouldLineClamp","useApplyStyle","styles.tokens","typographyBase","_jsx","Object","assign","clsx","styles.typographyBase","styles.typographyHeader","styles.typographyBody","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":"kkCAeA,MAAMA,EACFC,GACmBA,GAAU,UAE3BC,EAA8BC,GAChCC,EAAsBD,GAEpBE,EAAgCJ,GAClCK,EAAwBL,GAEtBM,EAAgC,CAClCC,EACAC,IAEIA,EACOC,EAGPF,EACOG,EAGJC,EASLC,EAAuB,CACzBC,EACAX,EACAY,EACAC,KAEA,MAAMC,EAAiBC,EAAMC,YAG3B,SACEC,EASAC,GATA,IAAAC,UACIA,EACAC,GAAIC,EAAMhB,OACVA,EAAMiB,SACNA,EAAQhB,UACRA,EAASR,OACTA,GAAMmB,EACHM,EAASC,EAAAP,EAPhB,6DAWA,MAAMQ,EAAa5B,EAAcC,GAC3B4B,EAAUX,EAAMY,OAAiC,MACjDC,EAAYC,EAAUH,EAASR,GAC/BY,EA9BU,EACpBR,EACAjB,EACAC,MACGgB,IAAahB,IAAcD,GA0BN0B,CAAgBT,EAAUjB,EAAQC,GAEtD0B,EAAcN,EAAgD,CAC1D,CAACO,EAAcC,eAAeZ,UAAWQ,EACnCR,EACA,OAKV,OACIa,EAHY9B,EAAS,OAASgB,GAAUV,EAGhCyB,OAAAC,OAAA,CACJnB,IAAKU,EACLT,UAAWmB,EACPC,EACA1B,EAAY2B,EAA0BC,EACtC1C,EAA2BC,GAC3BE,EAA6BuB,GAC7BrB,EAA8BC,EAAQC,GACtCwB,GAAeY,EACfvB,IAEAI,GAGhB,IAKA,OAFIT,EACFF,YAAc,cAAcA,IACvBE,CAAc,EAGnB6B,EAAgB,CAClBhC,EACAX,EACAY,IAEOF,EAAqBC,EAAKX,EAAWY,GAAa,GAGhDgC,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,CAAClD,EAA2BY,IACpCF,EAAqB,IAAKV,EAAWY,GAAa,GAGhDuC,EAASD,EAAW,gBAAiB,UACrCE,EAASF,EAAW,UAAW,UAC/BG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAEtCK,EAAsB,CACxBvD,EACAY,KAEA,MAAM4C,EAAYzC,EAAMC,YACpB,SACIC,EAQAC,GARA,IAAApB,OACIA,EAAM2D,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,YAAWxC,UAC5BA,GAASF,EACN2C,EAAKpC,EAAAP,EANZ,+DAUA,MAAMQ,EAAa5B,EAAcC,GAEjC,OACI+D,EAAA,IAAAzB,OAAAC,OAAA,CACInB,IAAKA,EACLC,UAAWmB,EACPC,EACAE,EACAqB,EACA/D,EAA2BC,GAC3BE,EAA6BuB,GACV,SAAnBkC,EACMI,EACAC,EACN7C,IAEAyC,EAAK,CAAAH,SAAA,CAERA,EACAC,GACGvB,EAAC8B,EAAY,CAAC9C,UAAW+C,OAIzC,IAMJ,OAFIV,EACF5C,YAAc,cAAcA,IACvB4C,CAAS,EAGPW,EAASZ,EAAoB,gBAAiB,UAC9Ca,EAASb,EAAoB,UAAW,UACxCc,EAASd,EAAoB,UAAW,UACxCe,EAASf,EAAoB,UAAW"}

package/typography/typography.styles.d.ts

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

package/typography/typography.styles.js

@@ -1,21 +1,2 @@
-import{ExternalIcon as e}from"@lifesg/react-icons/external";import t,{css as r}from"styled-components";import{Colour as i}from"../theme/index.js";import{createTypographyStyles as o,getTextStyle as l}from"./helper.js";const n=t.div`
-    ${e=>o(e.$textStyle,e.$weight,e.$inline,e.$paragraph,e.$maxLines)}
-`,a=t.a`
-    ${e=>{var t;return r`
-        ${l(e.$textStyle,e.$weight||"regular")}
-        color: ${i.hyperlink};
-        text-decoration: ${null!==(t=e.$underlineStyle)&&void 0!==t?t:"underline"};
-
-        &:hover,
-        &:active,
-        &:focus {
-            color: ${i["text-hover"]};
-        }
-    `}}
-`,m=t(e)`
-    height: 1lh;
-    width: 1em;
-    margin-left: 0.4em;
-    vertical-align: top;
-`;export{a as HyperlinkBase,m as StyledExternalIcon,n as TypographyBase};
+import"./typography-text.styles_1734x2k.css";import"./typography.styles_1wd82dn.css";const t={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},p="ts2ljtd",s="tu0nvfw",y="t1ruq6ql",a="d1cfdq56",o="d4n1hjq",r="p1ydob6f",e="l1w2xa0l",d="hspw24h",h="u3g791q",n="nlbpwo0",l="e1f7dy7t";export{o as displayBlock,a as displayInline,l as externalIcon,d as hyperlinkBase,e as lineClamp,n as noUnderline,r as paragraph,t as tokens,p as typographyBase,y as typographyBody,s as typographyHeader,h as underline};
 //# sourceMappingURL=typography.styles.js.map

package/typography/typography.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport styled, { css } from \"styled-components\";\nimport { Colour } from \"../theme\";\nimport { TypographySizeType } from \"../theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport { 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: 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: ${Colour.hyperlink};\n        text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n        &:hover,\n        &:active,\n        &:focus {\n            color: ${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: top;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"yNAuBO,MAAMA,EAAiBC,EAAOC,GAAgB;MAC9CC,GACCC,EACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAOU,CAAc;MAC3CR,UAAU,OAAAS,CAAG;UACVC,EAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAOC;2BACwB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAO;;KAEvB;EAGQI,EAAqBjB,EAAOkB,EAAa;;;;;"}
+{"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n    typographyBase: {\n        maxLines: \"--fds-internal-typography-base-maxLines\",\n    },\n} as const;\n\nexport const typographyBase = css`\n    ${tokens.typographyBase.maxLines}: initial;\n    font-variant: ${Font.Spec[\"font-variant\"]};\n    color: ${Colour.text};\n`;\n\nexport const typographyHeader = css`\n    font-family: ${Font.Spec[\"font-family-heading\"]};\n`;\n\nexport const typographyBody = css`\n    font-family: ${Font.Spec[\"font-family-body\"]};\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: top;\n`;\n"],"names":["tokens","typographyBase","maxLines","typographyHeader","typographyBody","displayInline","displayBlock","paragraph","lineClamp","hyperlinkBase","underline","noUnderline","externalIcon"],"mappings":"yIAOO,MAAMA,EAAS,CAClBC,eAAgB,CACZC,SAAU,4CAILD,EAAc,UAMdE,EAAgB,UAIhBC,EAAc,WAIdC,EAAa,WAKbC,EAAY,UAKZC,EAAS,WAKTC,EAAS,WAITC,EAAa,UAUbC,EAAS,UAITC,EAAW,UAIXC,EAAY"}

package/typography/typography.styles_1wd82dn.css

@@ -0,0 +1,11 @@
+@layer fds{.ts2ljtd{--fds-internal-typography-base-maxLines:initial;font-variant:var(--fds-font-variant);color:var(--fds-colour-text);}
+.tu0nvfw{font-family:var(--fds-font-family-heading);}
+.t1ruq6ql{font-family:var(--fds-font-family-body);}
+.d1cfdq56{display:inline;margin-bottom:0;}
+.d4n1hjq{display:block;margin-bottom:0;}
+.p1ydob6f{display:block;margin-bottom:1.05em;}
+.l1w2xa0l{--fds-internal-typography-base-maxLines:initial;display:-webkit-box;-webkit-line-clamp:var(--fds-internal-typography-base-maxLines);-webkit-box-orient:vertical;overflow:hidden;}
+.hspw24h{color:var(--fds-colour-hyperlink);}.hspw24h:hover,.hspw24h:active,.hspw24h:focus{color:var(--fds-colour-text-hover);}
+.u3g791q{-webkit-text-decoration:underline;text-decoration:underline;}
+.nlbpwo0{-webkit-text-decoration:none;text-decoration:none;}
+.e1f7dy7t{height:1lh;width:1em;margin-left:0.4em;vertical-align:top;}}

package/uneditable-section/index.d.ts

@@ -1,5 +1,21 @@
 export * from "./types";
-export declare const UneditableSection: (({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, ...otherProps }: import("./types").UneditableSectionProps) => import("react/jsx-runtime").JSX.Element) & {
+/**
+ * A read-only summary section for displaying labeled field values.
+ *
+ * Use `UneditableSection` to present a group of non-editable field–value pairs
+ * in a responsive grid layout
+ *
+ * Sub-components:
+ * - `UneditableSection.Item` — a standalone labeled read-only field with optional masking.
+ * - `UneditableSection.ItemSection` — a standalone grid list for composing items.
+ * @keywords field values, form summary, read-only, review
+ */
+export declare const UneditableSection: ((props: import("./types").UneditableSectionProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null) & {
+    /**
+     * A standalone grid list for rendering `UneditableSection.Item` elements
+     * outside the full section wrapper.
+     */
     ItemSection: (props: import("./types").UneditableSectionItemSectionProps & import("react").RefAttributes<HTMLUListElement>) => React.ReactElement | null;
+    /** A standalone labeled read-only field with optional masking support. */
     Item: ({ label, value, displayWidth, maskState, maskLoadingState, maskChar, maskRange, unmaskRange, maskRegex, disableMaskUnmask, alert, maskTransformer, onMask, onUnmask, onTryAgain, fullWidth, }: import("./section-item").UneditableSectionItemComponentProps) => import("react/jsx-runtime").JSX.Element;
 };

package/uneditable-section/index.js.map

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

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

@@ -1,4 +1,4 @@
 import React from "react";
-import { UneditableSectionItemSectionProps } from "./types";
-export declare const Component: ({ stretch, ...otherProps }: UneditableSectionItemSectionProps, ref: React.Ref<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;
+import type { UneditableSectionItemSectionProps } from "./types";
+export declare const Component: ({ stretch, className, ...otherProps }: UneditableSectionItemSectionProps, ref: React.Ref<HTMLUListElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const UneditableItemSection: (props: UneditableSectionItemSectionProps & React.RefAttributes<HTMLUListElement>) => React.ReactElement | null;

package/uneditable-section/item-section.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import e from"react";import{GridUl as s}from"./uneditable-section.styles.js";const o=(e,o)=>{var{stretch:i}=e,m=r(e,["stretch"]);return t(s,Object.assign({ref:o,$stretch:i},m))},i=e.forwardRef(o);export{o as Component,i as UneditableItemSection};
+import{__rest as r}from"../_virtual/_tslib.js";import{jsx as t}from"react/jsx-runtime";import s from"clsx";import e from"react";import{gridUl as m,columnWidthStretch as o}from"./uneditable-section.styles.js";const a=(e,a)=>{var{stretch:c,className:i}=e,l=r(e,["stretch","className"]);return t("ul",Object.assign({ref:a,className:s(m,c&&o,i)},l))},c=e.forwardRef(a);export{a as Component,c as UneditableItemSection};
 //# sourceMappingURL=item-section.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"item-section.js","sources":["../../src/uneditable-section/item-section.tsx"],"sourcesContent":["import React from \"react\";\nimport { UneditableSectionItemSectionProps } from \"./types\";\nimport { GridUl } from \"./uneditable-section.styles\";\n\nexport const Component = (\n    { stretch, ...otherProps }: UneditableSectionItemSectionProps,\n    ref: React.Ref<HTMLUListElement>\n) => {\n    return <GridUl ref={ref} $stretch={stretch} {...otherProps} />;\n};\n\nexport const UneditableItemSection = React.forwardRef(Component);\n"],"names":["Component","_a","ref","stretch","otherProps","__rest","_jsx","GridUl","Object","assign","$stretch","UneditableItemSection","React","forwardRef"],"mappings":"0KAIaA,EAAY,CACrBC,EACAC,KADA,IAAAC,QAAEA,GAAOF,EAAKG,EAAUC,EAAAJ,EAAxB,aAGA,OAAOK,EAACC,EAAMC,OAAAC,OAAA,CAACP,IAAKA,EAAGQ,SAAYP,GAAaC,GAAc,EAGrDO,EAAwBC,EAAMC,WAAWb"}
+{"version":3,"file":"item-section.js","sources":["../../src/uneditable-section/item-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React from \"react\";\n\nimport type { UneditableSectionItemSectionProps } from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const Component = (\n    { stretch, className, ...otherProps }: UneditableSectionItemSectionProps,\n    ref: React.Ref<HTMLUListElement>\n) => {\n    return (\n        <ul\n            ref={ref}\n            className={clsx(\n                styles.gridUl,\n                stretch && styles.columnWidthStretch,\n                className\n            )}\n            {...otherProps}\n        />\n    );\n};\n\nexport const UneditableItemSection = React.forwardRef(Component);\n"],"names":["Component","_a","ref","stretch","className","otherProps","__rest","_jsx","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","UneditableItemSection","React","forwardRef"],"mappings":"sNAMaA,EAAY,CACrBC,EACAC,SADAC,QAAEA,EAAOC,UAAEA,GAASH,EAAKI,EAAUC,EAAAL,EAAnC,yBAGA,OACIM,EAAA,KAAAC,OAAAC,OAAA,CACIP,IAAKA,EACLE,UAAWM,EACPC,EACAR,GAAWS,EACXR,IAEAC,GACN,EAIGQ,EAAwBC,EAAMC,WAAWf"}

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

@@ -1,4 +1,4 @@
-import { UneditableSectionItemProps } from "./types";
+import type { UneditableSectionItemProps } from "./types";
 export interface UneditableSectionItemComponentProps extends UneditableSectionItemProps {
     onMask?: (() => void) | undefined;
     onUnmask?: (() => void) | undefined;

package/uneditable-section/section-item.js

@@ -1,2 +1,2 @@
-import{jsxs as e,jsx as a,Fragment as r}from"react/jsx-runtime";import{EyeIcon as i}from"@lifesg/react-icons/eye";import{EyeSlashIcon as s}from"@lifesg/react-icons/eye-slash";import{useState as t,useEffect as n}from"react";import{FormLabel as l}from"../form/form-label.js";import{Typography as m}from"../typography/typography.js";import{StringHelper as o}from"../util/string-helper.js";import{Container as d,StyledAlert as c,Clickable as k,IconContainer as h,Spinner as f,LoadingLabel as p,ErrorIcon as g,ErrorLabel as y,TryAgainLabel as u}from"./section-item.styles.js";import{VisuallyHidden as b}from"../shared/accessibility/index.js";const j=({label:j,value:R,displayWidth:x="full",maskState:T,maskLoadingState:B,maskChar:$="•",maskRange:v,unmaskRange:w,maskRegex:C,disableMaskUnmask:L,alert:M,maskTransformer:S,onMask:W,onUnmask:D,onTryAgain:U,fullWidth:z})=>{const[A,E]=t(T);n((()=>{E(T)}),[T]);const H=()=>{switch("fail"===B&&U&&U(),A){case"masked":D&&D(),E("unmasked");break;case"unmasked":W&&W(),E("masked")}},O=()=>"string"!=typeof R?R:"masked"===A?o.maskValue(R,{maskChar:$,maskRange:v,unmaskRange:w,maskRegex:C,maskTransformer:S}):R,V=()=>{switch(B){case"fail":return e(r,{children:[a(g,{}),a(y,{children:"Error"}),e(u,{children:["Try again?",a(b,{children:j})]})]});case"loading":return e(r,{children:[a(f,{}),a(p,{children:"Retrieving..."})]});default:return e(r,{children:[O(),a(h,{"aria-label":"masked"===A?`Display ${j}`:`Hide ${j}`,children:"masked"===A?a(i,{"data-testid":"masked-icon"}):a(s,{"data-testid":"unmasked-icon"})})]})}};return e(d,{$widthStyle:x,$fullWidth:z,children:[a(l,{children:j}),"string"!=typeof R?R:A?L?a(m.BodyBL,{children:O()}):a(k,{"data-testid":"clickable-label",onClick:H,"aria-busy":"loading"===B,"aria-live":"polite",type:"button","aria-label":o.getMaskedDescription(R,A,v),children:V()}):a(m.BodyBL,{children:R}),M&&a(c,Object.assign({sizeType:"small"},M))]})};export{j as UneditableSectionItem};
+import{jsxs as a,jsx as e,Fragment as s}from"react/jsx-runtime";import{ExclamationTriangleIcon as r}from"@lifesg/react-icons/exclamation-triangle";import{EyeIcon as i}from"@lifesg/react-icons/eye";import{EyeSlashIcon as t}from"@lifesg/react-icons/eye-slash";import{useState as n,useEffect as l}from"react";import{Alert as m}from"../alert/alert.js";import{FormLabel as o}from"../form/form-label/form-label.js";import{VisuallyHidden as c}from"../shared/accessibility/index.js";import{ComponentLoadingSpinner as d}from"../shared/component-loading-spinner/component-loading-spinner.js";import{Typography as p}from"../typography/index.js";import{StringHelper as k}from"../util/string-helper.js";import{container as f,alert as h,clickable as g,iconContainer as u,spinner as y,loadingLabel as b,errorIcon as j,errorLabel as N,tryAgainLabel as x}from"./section-item.styles.js";const R=({label:R,value:T,displayWidth:v="full",maskState:w,maskLoadingState:B,maskChar:C="•",maskRange:L,unmaskRange:M,maskRegex:D,disableMaskUnmask:S,alert:U,maskTransformer:W,onMask:$,onUnmask:z,onTryAgain:A,fullWidth:E})=>{const[H,O]=n(w);l((()=>{O(w)}),[w]);const V=()=>{switch("fail"===B&&A&&A(),H){case"masked":z&&z(),O("unmasked");break;case"unmasked":$&&$(),O("masked")}},q=()=>"string"!=typeof T?T:"masked"===H?k.maskValue(T,{maskChar:C,maskRange:L,unmaskRange:M,maskRegex:D,maskTransformer:W}):T,F=()=>{switch(B){case"fail":return a(s,{children:[e(r,{className:j}),e("span",{className:N,children:"Error"}),a("span",{className:x,children:["Try again?",e(c,{children:R})]})]});case"loading":return a(s,{children:[e(d,{className:y}),e("span",{className:b,children:"Retrieving..."})]});default:return a(s,{children:[q(),e("div",{className:u,"aria-label":"masked"===H?`Display ${R}`:`Hide ${R}`,children:"masked"===H?e(i,{"data-testid":"masked-icon"}):e(t,{"data-testid":"unmasked-icon"})})]})}};return a("li",{"data-width":v,"data-full-width":E,className:f,children:[e(o,{children:R}),"string"!=typeof T?T:H?S?e(p.BodyBL,{children:q()}):e("button",{className:g,"data-testid":"clickable-label",onClick:V,"aria-busy":"loading"===B,"aria-live":"polite",type:"button","aria-label":k.getMaskedDescription(T,H,L),children:F()}):e(p.BodyBL,{children:T}),U&&e(m,Object.assign({className:h,sizeType:"small"},U))]})};export{R as UneditableSectionItem};
 //# sourceMappingURL=section-item.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"section-item.js","sources":["../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\nimport { FormLabel } from \"../form/form-label\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport {\n    Clickable,\n    Container,\n    ErrorIcon,\n    ErrorLabel,\n    IconContainer,\n    LoadingLabel,\n    Spinner,\n    StyledAlert,\n    TryAgainLabel,\n} from \"./section-item.styles\";\nimport {\n    UneditableSectionItemMaskState,\n    UneditableSectionItemProps,\n} from \"./types\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\n\nexport interface UneditableSectionItemComponentProps\n    extends UneditableSectionItemProps {\n    onMask?: (() => void) | undefined;\n    onUnmask?: (() => void) | undefined;\n    onTryAgain?: (() => void) | undefined;\n    fullWidth?: boolean | undefined;\n}\n\nexport const UneditableSectionItem = ({\n    label,\n    value,\n    displayWidth = \"full\",\n    maskState,\n    maskLoadingState,\n    maskChar = \"•\",\n    maskRange,\n    unmaskRange,\n    maskRegex,\n    disableMaskUnmask,\n    alert,\n    maskTransformer,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    fullWidth,\n}: UneditableSectionItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [displayMaskState, setMaskState] = useState<\n        UneditableSectionItemMaskState | undefined\n    >(maskState);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setMaskState(maskState);\n    }, [maskState]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleClickableClick = () => {\n        if (maskLoadingState === \"fail\") {\n            if (onTryAgain) onTryAgain();\n        }\n\n        switch (displayMaskState) {\n            case \"masked\": {\n                if (onUnmask) {\n                    onUnmask();\n                }\n                setMaskState(\"unmasked\");\n                break;\n            }\n            case \"unmasked\": {\n                if (onMask) {\n                    onMask();\n                }\n                setMaskState(\"masked\");\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        return displayMaskState === \"masked\"\n            ? StringHelper.maskValue(value, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMaskingState = () => {\n        switch (maskLoadingState) {\n            case \"fail\":\n                return (\n                    <>\n                        <ErrorIcon />\n                        <ErrorLabel>Error</ErrorLabel>\n                        <TryAgainLabel>\n                            Try again?\n                            <VisuallyHidden>{label}</VisuallyHidden>\n                        </TryAgainLabel>\n                    </>\n                );\n            case \"loading\":\n                return (\n                    <>\n                        <Spinner />\n                        <LoadingLabel>Retrieving...</LoadingLabel>\n                    </>\n                );\n            default:\n                return (\n                    <>\n                        {getValue()}\n                        <IconContainer\n                            aria-label={\n                                displayMaskState === \"masked\"\n                                    ? `Display ${label}`\n                                    : `Hide ${label}`\n                            }\n                        >\n                            {displayMaskState === \"masked\" ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </IconContainer>\n                    </>\n                );\n        }\n    };\n\n    const renderContent = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        if (!displayMaskState) {\n            return <Typography.BodyBL>{value}</Typography.BodyBL>;\n        }\n\n        if (disableMaskUnmask) {\n            return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n        }\n\n        return (\n            <Clickable\n                data-testid=\"clickable-label\"\n                onClick={handleClickableClick}\n                aria-busy={maskLoadingState === \"loading\"}\n                aria-live=\"polite\"\n                type=\"button\"\n                aria-label={StringHelper.getMaskedDescription(\n                    value,\n                    displayMaskState,\n                    maskRange\n                )}\n            >\n                {renderMaskingState()}\n            </Clickable>\n        );\n    };\n\n    return (\n        <Container $widthStyle={displayWidth} $fullWidth={fullWidth}>\n            <FormLabel>{label}</FormLabel>\n            {renderContent()}\n            {alert && <StyledAlert sizeType=\"small\" {...alert} />}\n        </Container>\n    );\n};\n"],"names":["UneditableSectionItem","label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_jsx","ErrorIcon","ErrorLabel","children","TryAgainLabel","VisuallyHidden","_Fragment","Spinner","LoadingLabel","IconContainer","EyeIcon","EyeSlashIcon","Container","$widthStyle","$fullWidth","FormLabel","Typography","BodyBL","Clickable","onClick","type","getMaskedDescription","StyledAlert","Object","assign","sizeType"],"mappings":"6nBA+BO,MAAMA,EAAwB,EACjCC,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBACAC,QACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAEvCf,GAKFgB,GAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,eACIC,EAACC,MACDD,EAACE,EAAU,CAAAC,SAAA,UACXJ,EAACK,EAAa,CAAAD,SAAA,CAAA,aAEVH,EAACK,EAAc,CAAAF,SAAE7B,UAIjC,IAAK,UACD,OACIyB,EAAAO,EAAA,CAAAH,SAAA,CACIH,EAACO,EAAO,CAAA,GACRP,EAACQ,EAAY,CAAAL,SAAA,qBAGzB,QACI,OACIJ,EAAAO,EAAA,CAAAH,SAAA,CACKR,IACDK,EAACS,EAAa,CAAA,aAEe,WAArBnB,EACM,WAAWhB,IACX,QAAQA,IAAO6B,SAGH,WAArBb,EACGU,EAACU,EAAO,CAAA,cAAa,gBAErBV,EAACW,EAAY,CAAA,cAAa,yBAuCtD,OACIZ,EAACa,EAAS,CAAAC,YAAcrC,EAAYsC,WAAczB,EAASc,SAAA,CACvDH,EAACe,EAAS,CAAAZ,SAAE7B,IAhCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOiB,EAACgB,EAAWC,iBAAQtB,MAI3BK,EAACkB,EAAS,CAAA,cACM,kBACZC,QAASzB,cACuB,YAArBhB,EAA8B,YAC/B,SACV0C,KAAK,sBACOxB,EAAayB,qBACrB9C,EACAe,EACAV,GACHuB,SAEAL,MApBEE,EAACgB,EAAWC,OAAM,CAAAd,SAAE5B,IA6B1BS,GAASgB,EAACsB,EAAWC,OAAAC,OAAA,CAACC,SAAS,SAAYzC,MACpC"}
+{"version":3,"file":"section-item.js","sources":["../../src/uneditable-section/section-item.tsx"],"sourcesContent":["import { ExclamationTriangleIcon } from \"@lifesg/react-icons/exclamation-triangle\";\nimport { EyeIcon } from \"@lifesg/react-icons/eye\";\nimport { EyeSlashIcon } from \"@lifesg/react-icons/eye-slash\";\nimport { useEffect, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { FormLabel } from \"../form/form-label\";\nimport { VisuallyHidden } from \"../shared/accessibility\";\nimport { ComponentLoadingSpinner } from \"../shared/component-loading-spinner\";\nimport { Typography } from \"../typography\";\nimport { StringHelper } from \"../util/string-helper\";\nimport * as styles from \"./section-item.styles\";\nimport type {\n    UneditableSectionItemMaskState,\n    UneditableSectionItemProps,\n} from \"./types\";\n\nexport interface UneditableSectionItemComponentProps\n    extends UneditableSectionItemProps {\n    onMask?: (() => void) | undefined;\n    onUnmask?: (() => void) | undefined;\n    onTryAgain?: (() => void) | undefined;\n    fullWidth?: boolean | undefined;\n}\n\nexport const UneditableSectionItem = ({\n    label,\n    value,\n    displayWidth = \"full\",\n    maskState,\n    maskLoadingState,\n    maskChar = \"•\",\n    maskRange,\n    unmaskRange,\n    maskRegex,\n    disableMaskUnmask,\n    alert,\n    maskTransformer,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    fullWidth,\n}: UneditableSectionItemComponentProps) => {\n    // =========================================================================\n    // CONST, STATE, REF\n    // =========================================================================\n    const [displayMaskState, setMaskState] = useState<\n        UneditableSectionItemMaskState | undefined\n    >(maskState);\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        setMaskState(maskState);\n    }, [maskState]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleClickableClick = () => {\n        if (maskLoadingState === \"fail\") {\n            if (onTryAgain) onTryAgain();\n        }\n\n        switch (displayMaskState) {\n            case \"masked\": {\n                if (onUnmask) {\n                    onUnmask();\n                }\n                setMaskState(\"unmasked\");\n                break;\n            }\n            case \"unmasked\": {\n                if (onMask) {\n                    onMask();\n                }\n                setMaskState(\"masked\");\n                break;\n            }\n        }\n    };\n\n    // =========================================================================\n    // HELPER FUNCTIONS\n    // =========================================================================\n    const getValue = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        return displayMaskState === \"masked\"\n            ? StringHelper.maskValue(value, {\n                  maskChar,\n                  maskRange,\n                  unmaskRange,\n                  maskRegex,\n                  maskTransformer,\n              })\n            : value;\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    const renderMaskingState = () => {\n        switch (maskLoadingState) {\n            case \"fail\":\n                return (\n                    <>\n                        <ExclamationTriangleIcon className={styles.errorIcon} />\n                        <span className={styles.errorLabel}>Error</span>\n                        <span className={styles.tryAgainLabel}>\n                            Try again?\n                            <VisuallyHidden>{label}</VisuallyHidden>\n                        </span>\n                    </>\n                );\n            case \"loading\":\n                return (\n                    <>\n                        <ComponentLoadingSpinner className={styles.spinner} />\n                        <span className={styles.loadingLabel}>\n                            Retrieving...\n                        </span>\n                    </>\n                );\n            default:\n                return (\n                    <>\n                        {getValue()}\n                        <div\n                            className={styles.iconContainer}\n                            aria-label={\n                                displayMaskState === \"masked\"\n                                    ? `Display ${label}`\n                                    : `Hide ${label}`\n                            }\n                        >\n                            {displayMaskState === \"masked\" ? (\n                                <EyeIcon data-testid=\"masked-icon\" />\n                            ) : (\n                                <EyeSlashIcon data-testid=\"unmasked-icon\" />\n                            )}\n                        </div>\n                    </>\n                );\n        }\n    };\n\n    const renderContent = () => {\n        if (typeof value !== \"string\") {\n            return value;\n        }\n\n        if (!displayMaskState) {\n            return <Typography.BodyBL>{value}</Typography.BodyBL>;\n        }\n\n        if (disableMaskUnmask) {\n            return <Typography.BodyBL>{getValue()}</Typography.BodyBL>;\n        }\n\n        return (\n            <button\n                className={styles.clickable}\n                data-testid=\"clickable-label\"\n                onClick={handleClickableClick}\n                aria-busy={maskLoadingState === \"loading\"}\n                aria-live=\"polite\"\n                type=\"button\"\n                aria-label={StringHelper.getMaskedDescription(\n                    value,\n                    displayMaskState,\n                    maskRange\n                )}\n            >\n                {renderMaskingState()}\n            </button>\n        );\n    };\n\n    return (\n        <li\n            data-width={displayWidth}\n            data-full-width={fullWidth}\n            className={styles.container}\n        >\n            <FormLabel>{label}</FormLabel>\n            {renderContent()}\n            {alert && (\n                <Alert className={styles.alert} sizeType=\"small\" {...alert} />\n            )}\n        </li>\n    );\n};\n"],"names":["UneditableSectionItem","label","value","displayWidth","maskState","maskLoadingState","maskChar","maskRange","unmaskRange","maskRegex","disableMaskUnmask","alert","maskTransformer","onMask","onUnmask","onTryAgain","fullWidth","displayMaskState","setMaskState","useState","useEffect","handleClickableClick","getValue","StringHelper","maskValue","renderMaskingState","_jsxs","_Fragment","children","_jsx","ExclamationTriangleIcon","className","styles.errorIcon","styles.errorLabel","styles.tryAgainLabel","VisuallyHidden","ComponentLoadingSpinner","styles.spinner","styles.loadingLabel","styles.iconContainer","EyeIcon","EyeSlashIcon","styles.container","FormLabel","Typography","BodyBL","styles.clickable","onClick","type","getMaskedDescription","Alert","styles.alert","sizeType"],"mappings":"q2BAyBO,MAAMA,EAAwB,EACjCC,QACAC,QACAC,eAAe,OACfC,YACAC,mBACAC,WAAW,IACXC,YACAC,cACAC,YACAC,oBAAiBC,MACjBA,EACAC,kBACAC,SACAC,WACAC,aACAC,gBAKA,MAAOC,EAAkBC,GAAgBC,EAEvCf,GAKFgB,GAAU,KACNF,EAAad,EAAU,GACxB,CAACA,IAKJ,MAAMiB,EAAuB,KAKzB,OAJyB,SAArBhB,GACIU,GAAYA,IAGZE,GACJ,IAAK,SACGH,GACAA,IAEJI,EAAa,YACb,MAEJ,IAAK,WACGL,GACAA,IAEJK,EAAa,YASnBI,EAAW,IACQ,iBAAVpB,EACAA,EAGiB,WAArBe,EACDM,EAAaC,UAAUtB,EAAO,CAC1BI,WACAC,YACAC,cACAC,YACAG,oBAEJV,EAMJuB,EAAqB,KACvB,OAAQpB,GACJ,IAAK,OACD,OACIqB,EAAAC,EAAA,CAAAC,SAAA,CACIC,EAACC,GAAwBC,UAAWC,IACpCH,EAAA,OAAA,CAAME,UAAWE,EAAiBL,SAAA,UAClCF,EAAA,OAAA,CAAMK,UAAWG,EAAoBN,SAAA,CAAA,aAEjCC,EAACM,YAAgBlC,UAIjC,IAAK,UACD,OACIyB,eACIG,EAACO,GAAwBL,UAAWM,IACpCR,EAAA,OAAA,CAAME,UAAWO,EAAmBV,SAAA,qBAKhD,QACI,OACIF,EAAAC,EAAA,CAAAC,SAAA,CACKN,IACDO,EAAA,MAAA,CACIE,UAAWQ,EAAoB,aAEN,WAArBtB,EACM,WAAWhB,IACX,QAAQA,IAAO2B,SAGH,WAArBX,EACGY,EAACW,EAAO,CAAA,cAAa,gBAErBX,EAACY,EAAY,CAAA,cAAa,yBAwCtD,OACIf,EAAA,KAAA,CAAA,aACgBvB,oBACKa,EACjBe,UAAWW,EAAgBd,SAAA,CAE3BC,EAACc,EAAS,CAAAf,SAAE3B,IArCK,iBAAVC,EACAA,EAGNe,EAIDP,EACOmB,EAACe,EAAWC,iBAAQvB,MAI3BO,EAAA,SAAA,CACIE,UAAWe,EAAgB,cACf,kBACZC,QAAS1B,cACuB,YAArBhB,EAA8B,YAC/B,SACV2C,KAAK,SAAQ,aACDzB,EAAa0B,qBACrB/C,EACAe,EACAV,GACHqB,SAEAH,MArBEI,EAACe,EAAWC,OAAM,CAAAjB,SAAE1B,IAkC1BS,GACGkB,EAACqB,iBAAMnB,UAAWoB,EAAcC,SAAS,SAAYzC,MAExD"}