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

package/typography/index.d.ts

@@ -1,45 +1,107 @@
+/**
+ * A collection of pre-styled text components covering headings, body copy, and
+ * hyperlinks.
+ *
+ * Use `Typography` sub-components to render consistently sized and weighted
+ * text.
+ *
+ * Sub-components:
+ * - Heading variants (`HeadingXXL` through `HeadingXS`) render semantic heading elements by default.
+ * - Body variants (`BodyBL`, `BodyMD`, `BodySM`, `BodyXS`) render `p` elements.
+ * - Link variants (`LinkBL`, `LinkMD`, `LinkSM`, `LinkXS`) render `a` elements .
+ *
+ * @remarks All text variants accept an `as` prop to
+ * override the rendered element for semantic flexibility.
+ * @keywords text, type scale
+ */
 export declare const Typography: {
-    HeadingXXL: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingXL: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingLG: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingMD: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingSM: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    HeadingXS: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-    }>;
-    BodyBL: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-    }>;
-    BodyMD: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-    }>;
-    BodySM: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-    }>;
-    BodyXS: import("styled-components").IStyledComponent<"web", import("./types").TypographyProps & {
-        ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-    }>;
-    LinkBL: import("styled-components").IStyledComponent<"web", import("./types").TypographyLinkProps & {
-        ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-    }>;
-    LinkMD: import("styled-components").IStyledComponent<"web", import("./types").TypographyLinkProps & {
-        ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-    }>;
-    LinkSM: import("styled-components").IStyledComponent<"web", import("./types").TypographyLinkProps & {
-        ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-    }>;
-    LinkXS: import("styled-components").IStyledComponent<"web", import("./types").TypographyLinkProps & {
-        ref?: import("react").RefObject<HTMLAnchorElement> | undefined;
-    }>;
+    /** Renders the largest heading (`h1`). */
+    HeadingXXL: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders an extra-large heading (`h2`). */
+    HeadingXL: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders a large heading (`h3`). */
+    HeadingLG: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders a medium heading (`h4`). */
+    HeadingMD: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders a small heading (`h5`). */
+    HeadingSM: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders the smallest heading (`h6`). */
+    HeadingXS: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+    /** Renders baseline body text (`p`). */
+    BodyBL: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+    /** Renders medium body text (`p`). */
+    BodyMD: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+    /** Renders small body text (`p`). */
+    BodySM: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+    /** Renders extra-small body text (`p`). */
+    BodyXS: (props: Omit<any, "ref"> & {
+        weight?: import("./types").TypographyWeight | undefined;
+        inline?: boolean | undefined;
+        paragraph?: boolean | undefined;
+        maxLines?: number | undefined;
+        as?: import("react").ElementType<any> | undefined;
+    } & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+    /** Renders a baseline-size hyperlink (`a`). */
+    LinkBL: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    /** Renders a medium-size hyperlink (`a`). */
+    LinkMD: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    /** Renders a small-size hyperlink (`a`). */
+    LinkSM: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+    /** Renders an extra-small hyperlink (`a`). */
+    LinkXS: (props: import("./types").TypographyLinkProps & import("react").RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
 };
 export * from "./types";

package/typography/index.js

@@ -1,2 +1,2 @@
-import{LinkSM as i,BodyBL as n,BodySM as d,BodyMD as o,LinkMD as L,HeadingMD as a,HeadingSM as e,BodyXS as g,LinkXS as y,HeadingXS as B,LinkBL as H,HeadingLG as M,HeadingXL as S,HeadingXXL as X}from"./typography.js";const k={HeadingXXL:X,HeadingXL:S,HeadingLG:M,HeadingMD:a,HeadingSM:e,HeadingXS:B,BodyBL:n,BodyMD:o,BodySM:d,BodyXS:g,LinkBL:H,LinkMD:L,LinkSM:i,LinkXS:y};export{k as Typography};
+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":["../../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\nexport const Typography = {\n    HeadingXXL,\n    HeadingXL,\n    HeadingLG,\n    HeadingMD,\n    HeadingSM,\n    HeadingXS,\n    BodyBL,\n    BodyMD,\n    BodySM,\n    BodyXS,\n    LinkBL,\n    LinkMD,\n    LinkSM,\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":"wNAiBO,MAAMA,EAAa,CACtBC,aACAC,YACAC,YACAC,YACAC,YACAC,YACAC,SACAC,SACAC,SACAC,SACAC,SACAC,SACAC,SACAC"}
+{"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,45 +1,76 @@
-import type { RefObject } from "react";
-import type { IStyledComponent } from "styled-components";
-import type { TypographyLinkProps, TypographyProps } from "./types";
-export declare const HeadingXXL: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingXL: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingLG: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingMD: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingSM: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const HeadingXS: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLHeadingElement> | undefined;
-}>;
-export declare const BodyBL: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLParagraphElement> | undefined;
-}>;
-export declare const BodyMD: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLParagraphElement> | undefined;
-}>;
-export declare const BodySM: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLParagraphElement> | undefined;
-}>;
-export declare const BodyXS: IStyledComponent<"web", TypographyProps & {
-    ref?: RefObject<HTMLParagraphElement> | undefined;
-}>;
-export declare const LinkBL: IStyledComponent<"web", TypographyLinkProps & {
-    ref?: RefObject<HTMLAnchorElement> | undefined;
-}>;
-export declare const LinkMD: IStyledComponent<"web", TypographyLinkProps & {
-    ref?: RefObject<HTMLAnchorElement> | undefined;
-}>;
-export declare const LinkSM: IStyledComponent<"web", TypographyLinkProps & {
-    ref?: RefObject<HTMLAnchorElement> | undefined;
-}>;
-export declare const LinkXS: IStyledComponent<"web", TypographyLinkProps & {
-    ref?: RefObject<HTMLAnchorElement> | undefined;
-}>;
+import React from "react";
+import type { TypographyLinkProps, TypographyWeight } from "./types";
+export declare const HeadingXXL: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingXL: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingLG: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingMD: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingSM: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const HeadingXS: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLHeadingElement>) => React.ReactElement | null;
+export declare const BodyBL: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const BodyMD: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const BodySM: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const BodyXS: (props: Omit<any, "ref"> & {
+    weight?: TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: React.ElementType<any> | undefined;
+} & React.RefAttributes<HTMLParagraphElement>) => React.ReactElement | null;
+export declare const LinkBL: (props: TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkMD: (props: TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkSM: (props: TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;
+export declare const LinkXS: (props: TypographyLinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null;

package/typography/typography.js

@@ -1,2 +1,2 @@
-import{__rest as e}from"../_virtual/_tslib.js";import{jsx as a,jsxs as i}from"react/jsx-runtime";import n from"react";import{TypographyBase as r,HyperlinkBase as t,StyledExternalIcon as d}from"./typography.styles.js";const s=(i,t,d)=>{const s=(n,d)=>{var{weight:s,inline:g,paragraph:h,maxLines:l}=n,o=e(n,["weight","inline","paragraph","maxLines"]);return a(r,Object.assign({ref:d,as:g?"span":i,$textStyle:t,$weight:s,$inline:g,$paragraph:h,$maxLines:l},o))};return s.displayName=`Typography.${d}`,n.forwardRef(s)},g=s("h1","heading-xxl","HeadingXXL"),h=s("h2","heading-xl","HeadingXL"),l=s("h3","heading-lg","HeadingLG"),o=s("h4","heading-md","HeadingMD"),p=s("h5","heading-sm","HeadingSM"),y=s("h6","heading-xs","HeadingXS"),m=(i,t)=>{const d=(n,t)=>{var{weight:d,inline:s,paragraph:g,maxLines:h}=n,l=e(n,["weight","inline","paragraph","maxLines"]);return a(r,Object.assign({ref:t,as:s?"span":"p",$textStyle:i,$weight:d,$inline:s,$paragraph:g,$maxLines:h},l))};return d.displayName=`Typography.${t}`,n.forwardRef(d)},x=m("body-baseline","BodyBL"),$=m("body-md","BodyMD"),L=m("body-sm","BodySM"),b=m("body-xs","BodyXS"),f=(r,s)=>{const g=(n,s)=>{var{weight:g,children:h,external:l,underlineStyle:o="underline"}=n,p=e(n,["weight","children","external","underlineStyle"]);return i(t,Object.assign({ref:s,$textStyle:r,$weight:g,$underlineStyle:o},p,{children:[h,l&&a(d,{})]}))};return g.displayName=`Typography.${s}`,n.forwardRef(g)},c=f("body-baseline","LinkBL"),u=f("body-md","LinkMD"),w=f("body-sm","LinkSM"),S=f("body-xs","LinkXS");export{x as BodyBL,$ as BodyMD,L as BodySM,b as BodyXS,l as HeadingLG,o as HeadingMD,p as HeadingSM,h as HeadingXL,y as HeadingXS,g as HeadingXXL,c as LinkBL,u as LinkMD,w as LinkSM,S as LinkXS};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsxs as r,jsx as t}from"react/jsx-runtime";import{ExternalIcon as i}from"@lifesg/react-icons/external";import s from"clsx";import a from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{useApplyStyle as n}from"../theme/utils/use-apply-styles.js";import"../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 type { RefObject } from \"react\";\nimport React from \"react\";\nimport type { IStyledComponent } from \"styled-components\";\n\nimport type { V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport type { TypographyLinkProps, TypographyProps } from \"./types\";\nimport {\n    HyperlinkBase,\n    StyledExternalIcon,\n    TypographyBase,\n} from \"./typography.styles\";\n\nconst createHeading = (\n    tag: keyof JSX.IntrinsicElements,\n    textStyle: V3_TypographySizeType,\n    displayName: string\n) => {\n    const Header = (\n        { weight, inline, paragraph, maxLines, ...props }: TypographyProps,\n        ref: React.Ref<HTMLHeadingElement>\n    ) => {\n        return (\n            <TypographyBase\n                ref={ref}\n                as={inline ? \"span\" : tag}\n                $textStyle={textStyle}\n                $weight={weight}\n                $inline={inline}\n                $paragraph={paragraph}\n                $maxLines={maxLines}\n                {...props}\n            />\n        );\n    };\n    Header.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Header) as IStyledComponent<\n        \"web\",\n        TypographyProps & {\n            ref?: RefObject<HTMLHeadingElement> | undefined;\n        }\n    >;\n};\n\nexport const HeadingXXL = createHeading(\"h1\", \"heading-xxl\", \"HeadingXXL\");\nexport const HeadingXL = createHeading(\"h2\", \"heading-xl\", \"HeadingXL\");\nexport const HeadingLG = createHeading(\"h3\", \"heading-lg\", \"HeadingLG\");\nexport const HeadingMD = createHeading(\"h4\", \"heading-md\", \"HeadingMD\");\nexport const HeadingSM = createHeading(\"h5\", \"heading-sm\", \"HeadingSM\");\nexport const HeadingXS = createHeading(\"h6\", \"heading-xs\", \"HeadingXS\");\n\nconst createBody = (textStyle: V3_TypographySizeType, displayName: string) => {\n    const Body = (\n        { weight, inline, paragraph, maxLines, ...props }: TypographyProps,\n        ref: React.Ref<HTMLParagraphElement>\n    ) => {\n        return (\n            <TypographyBase\n                ref={ref}\n                as={inline ? \"span\" : \"p\"}\n                $textStyle={textStyle}\n                $weight={weight}\n                $inline={inline}\n                $paragraph={paragraph}\n                $maxLines={maxLines}\n                {...props}\n            />\n        );\n    };\n    Body.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Body) as IStyledComponent<\n        \"web\",\n        TypographyProps & {\n            ref?: RefObject<HTMLParagraphElement> | undefined;\n        }\n    >;\n};\n\nexport const BodyBL = createBody(\"body-baseline\", \"BodyBL\");\nexport const BodyMD = createBody(\"body-md\", \"BodyMD\");\nexport const BodySM = createBody(\"body-sm\", \"BodySM\");\nexport const BodyXS = createBody(\"body-xs\", \"BodyXS\");\n\nconst createLinkComponent = (\n    textStyle: V3_TypographySizeType,\n    displayName: string\n) => {\n    const Hyperlink = (\n        {\n            weight,\n            children,\n            external,\n            underlineStyle = \"underline\",\n            ...props\n        }: TypographyLinkProps,\n        ref: React.Ref<HTMLAnchorElement>\n    ) => {\n        return (\n            <HyperlinkBase\n                ref={ref}\n                $textStyle={textStyle}\n                $weight={weight}\n                $underlineStyle={underlineStyle}\n                {...props}\n            >\n                {children}\n                {external && <StyledExternalIcon />}\n            </HyperlinkBase>\n        );\n    };\n    Hyperlink.displayName = `Typography.${displayName}`;\n    return React.forwardRef(Hyperlink) as IStyledComponent<\n        \"web\",\n        TypographyLinkProps & {\n            ref?: RefObject<HTMLAnchorElement> | undefined;\n        }\n    >;\n};\n\nexport const LinkBL = createLinkComponent(\"body-baseline\", \"LinkBL\");\nexport const LinkMD = createLinkComponent(\"body-md\", \"LinkMD\");\nexport const LinkSM = createLinkComponent(\"body-sm\", \"LinkSM\");\nexport const LinkXS = createLinkComponent(\"body-xs\", \"LinkXS\");\n"],"names":["createHeading","tag","textStyle","displayName","Header","_a","ref","weight","inline","paragraph","maxLines","props","__rest","_jsx","TypographyBase","Object","assign","as","$textStyle","$weight","$inline","$paragraph","React","forwardRef","HeadingXXL","HeadingXL","HeadingLG","HeadingMD","HeadingSM","HeadingXS","createBody","Body","BodyBL","BodyMD","BodySM","BodyXS","createLinkComponent","Hyperlink","children","external","underlineStyle","_jsxs","HyperlinkBase","$underlineStyle","StyledExternalIcon","LinkBL","LinkMD","LinkSM","LinkXS"],"mappings":"yNAYA,MAAMA,EAAgB,CAClBC,EACAC,EACAC,KAEA,MAAMC,EAAS,CACXC,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,EAACC,EAAcC,OAAAC,OAAA,CACXV,IAAKA,EACLW,GAAIT,EAAS,OAASP,EAAGiB,WACbhB,EAASiB,QACZZ,EAAMa,QACNZ,EAAMa,WACHZ,YACDC,GACPC,GACN,EAIV,OADAP,EAAOD,YAAc,cAAcA,IAC5BmB,EAAMC,WAAWnB,EAKvB,EAGQoB,EAAaxB,EAAc,KAAM,cAAe,cAChDyB,EAAYzB,EAAc,KAAM,aAAc,aAC9C0B,EAAY1B,EAAc,KAAM,aAAc,aAC9C2B,EAAY3B,EAAc,KAAM,aAAc,aAC9C4B,EAAY5B,EAAc,KAAM,aAAc,aAC9C6B,EAAY7B,EAAc,KAAM,aAAc,aAErD8B,EAAa,CAAC5B,EAAkCC,KAClD,MAAM4B,EAAO,CACT1B,EACAC,KADA,IAAAC,OAAEA,EAAMC,OAAEA,EAAMC,UAAEA,EAASC,SAAEA,GAAQL,EAAKM,EAAKC,EAAAP,EAA/C,CAAA,SAAA,SAAA,YAAA,aAGA,OACIQ,EAACC,EAAcC,OAAAC,OAAA,CACXV,IAAKA,EACLW,GAAIT,EAAS,OAAS,IAAGU,WACbhB,EAASiB,QACZZ,EAAMa,QACNZ,EAAMa,WACHZ,YACDC,GACPC,GACN,EAIV,OADAoB,EAAK5B,YAAc,cAAcA,IAC1BmB,EAAMC,WAAWQ,EAKvB,EAGQC,EAASF,EAAW,gBAAiB,UACrCG,EAASH,EAAW,UAAW,UAC/BI,EAASJ,EAAW,UAAW,UAC/BK,EAASL,EAAW,UAAW,UAEtCM,EAAsB,CACxBlC,EACAC,KAEA,MAAMkC,EAAY,CACdhC,EAOAC,KAPA,IAAAC,OACIA,EAAM+B,SACNA,EAAQC,SACRA,EAAQC,eACRA,EAAiB,aAAWnC,EACzBM,EAAKC,EAAAP,EALZ,mDASA,OACIoC,EAACC,EAAa3B,OAAAC,OAAA,CACVV,IAAKA,EAAGY,WACIhB,EAASiB,QACZZ,EAAMoC,gBACEH,GACb7B,EAAK,CAAA2B,SAAA,CAERA,EACAC,GAAY1B,EAAC+B,EAAkB,OACpB,EAIxB,OADAP,EAAUlC,YAAc,cAAcA,IAC/BmB,EAAMC,WAAWc,EAKvB,EAGQQ,EAAST,EAAoB,gBAAiB,UAC9CU,EAASV,EAAoB,UAAW,UACxCW,EAASX,EAAoB,UAAW,UACxCY,EAASZ,EAAoB,UAAW"}
+{"version":3,"file":"typography.js","sources":["../../src/typography/typography.tsx"],"sourcesContent":["import { ExternalIcon } from \"@lifesg/react-icons/external\";\nimport clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { useApplyStyle } from \"../theme\";\nimport { mergeRefs } from \"../util\";\nimport type {\n    TypographyLinkProps,\n    TypographyProps,\n    TypographySize,\n    TypographyWeight,\n} from \"./types\";\nimport * as styles from \"./typography.styles\";\n\nconst getTextWeight = (\n    weight: TypographyWeight | undefined\n): TypographyWeight => weight || \"regular\";\n\nconst getTypographyTextClassName = (textStyle: TypographySize) =>\n    styles.typographySize[textStyle];\n\nconst getTypographyWeightClassName = (weight: TypographyWeight) =>\n    styles.typographyWeight[weight];\n\nconst getTypographyDisplayClassName = (\n    inline: boolean | undefined,\n    paragraph: boolean | undefined\n) => {\n    if (paragraph) {\n        return styles.paragraph;\n    }\n\n    if (inline) {\n        return styles.displayInline;\n    }\n\n    return styles.displayBlock;\n};\n\nconst shouldLineClamp = (\n    maxLines: number | undefined,\n    inline: boolean | undefined,\n    paragraph: boolean | undefined\n) => !!maxLines && (paragraph || !inline);\n\nconst createTypographyText = <TTag extends React.ElementType>(\n    tag: TTag,\n    textStyle: TypographySize,\n    displayName: string,\n    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,19 +1,17 @@
-import type { V3_TypographySizeType } from "../v3_theme/font/types";
-import type { TypographyWeight } from "./types";
-interface StyledProps {
-    $textStyle: V3_TypographySizeType;
-    $weight?: TypographyWeight | undefined;
-    $inline?: boolean | undefined;
-    $paragraph?: boolean | undefined;
-    $maxLines?: number | undefined;
-    $underlineStyle?: string | undefined;
-}
-export declare const TypographyBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyledProps>> & string;
-export declare const HyperlinkBase: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, StyledProps>> & string;
-export declare const StyledExternalIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("react").SVGProps<SVGSVGElement>, "ref"> & {
-    ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
-}, never>> & string & Omit<{
-    (props: import("react").SVGProps<SVGSVGElement>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-}, keyof import("react").Component<any, {}, any>>;
-export {};
+export { typographySize, typographyWeight } from "./typography-text.styles";
+export declare const tokens: {
+    readonly typographyBase: {
+        readonly maxLines: "--fds-internal-typography-base-maxLines";
+    };
+};
+export declare const typographyBase: import("@linaria/core").LinariaClassName;
+export declare const 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{V3_Colour as i}from"../v3_theme/index.js";import{createTypographyStyles as o,getTextStyle as l}from"./helper.js";const n=t.div`
-    ${e=>o(e.$textStyle,e.$weight,e.$inline,e.$paragraph,e.$maxLines)}
-`,m=t.a`
-    ${e=>{var t;return r`
-        ${l(e.$textStyle,e.$weight||"regular")}
-        color: ${i.hyperlink};
-        text-decoration: ${null!==(t=e.$underlineStyle)&&void 0!==t?t:"underline"};
-
-        &:hover,
-        &:active,
-        &:focus {
-            color: ${i["text-hover"]};
-        }
-    `}}
-`,a=t(e)`
-    height: 1lh;
-    width: 1em;
-    margin-left: 0.4em;
-    vertical-align: middle;
-`;export{m as HyperlinkBase,a as StyledExternalIcon,n as TypographyBase};
+import"./typography-text.styles_1734x2k.css";import"./typography.styles_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\";\n\nimport { V3_Colour } from \"../v3_theme\";\nimport type { V3_TypographySizeType } from \"../v3_theme/font/types\";\nimport { createTypographyStyles, getTextStyle } from \"./helper\";\nimport type { TypographyWeight } from \"./types\";\n\n// =============================================================================\n// STYLE INTERFACES, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyledProps {\n    $textStyle: V3_TypographySizeType;\n    $weight?: TypographyWeight | undefined;\n    $inline?: boolean | undefined;\n    $paragraph?: boolean | undefined;\n    $maxLines?: number | undefined;\n    $underlineStyle?: string | undefined;\n}\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const TypographyBase = styled.div<StyledProps>`\n    ${(props) =>\n        createTypographyStyles(\n            props.$textStyle,\n            props.$weight,\n            props.$inline,\n            props.$paragraph,\n            props.$maxLines\n        )}\n`;\n\nexport const HyperlinkBase = styled.a<StyledProps>`\n    ${(props) => css`\n        ${getTextStyle(props.$textStyle, props.$weight || \"regular\")}\n        color: ${V3_Colour.hyperlink};\n        text-decoration: ${props.$underlineStyle ?? \"underline\"};\n\n        &:hover,\n        &:active,\n        &:focus {\n            color: ${V3_Colour[\"text-hover\"]};\n        }\n    `}\n`;\n\nexport const StyledExternalIcon = styled(ExternalIcon)`\n    height: 1lh;\n    width: 1em;\n    margin-left: 0.4em;\n    vertical-align: middle;\n`;\n"],"names":["TypographyBase","styled","div","props","createTypographyStyles","$textStyle","$weight","$inline","$paragraph","$maxLines","HyperlinkBase","a","css","getTextStyle","V3_Colour","hyperlink","_a","$underlineStyle","StyledExternalIcon","ExternalIcon"],"mappings":"+NAwBO,MAAMA,EAAiBC,EAAOC,GAAgB;MAC9CC,GACCC,EACID,EAAME,WACNF,EAAMG,QACNH,EAAMI,QACNJ,EAAMK,WACNL,EAAMM;EAILC,EAAgBT,EAAOU,CAAc;MAC3CR,UAAU,OAAAS,CAAG;UACVC,EAAaV,EAAME,WAAYF,EAAMG,SAAW;iBACzCQ,EAAUC;2BACqB,QAArBC,EAAAb,EAAMc,uBAAe,IAAAD,EAAAA,EAAI;;;;;qBAK/BF,EAAU;;KAE1B;EAGQI,EAAqBjB,EAAOkB,EAAa;;;;;"}
+{"version":3,"file":"typography.styles.js","sources":["../../src/typography/typography.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport { lineClampDynamicCss } from \"../shared/styles\";\nimport { Colour, Font } from \"../theme\";\n\nexport { typographySize, typographyWeight } from \"./typography-text.styles\";\n\nexport const tokens = {\n    typographyBase: {\n        maxLines: \"--fds-internal-typography-base-maxLines\",\n    },\n} as const;\n\nexport const typographyBase = css`\n    ${tokens.typographyBase.maxLines}: initial;\n    font-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;}}