@lifesg/react-design-system 4.0.0-alpha.4 → 4.0.0-alpha.6

package/toggle/types.d.ts

@@ -1,53 +1,131 @@
+/**
+ * Controls selection behavior and the indicator icon rendered inside the
+ * toggle.
+ *
+ * - `"checkbox"` allows the user to deselect.
+ * - `"radio"`, `"yes"`, and `"no"` only allow selection; once selected,
+ *   they cannot be deselected.
+ */
 export type ToggleType = "checkbox" | "radio" | "yes" | "no";
+/**
+ * Visual border style applied to the toggle container.
+ *
+ * - `"default"` renders the container with a visible border.
+ * - `"no-border"` renders without a border.
+ */
 export type ToggleStyleType = "default" | "no-border";
+/**
+ * Props for the `Toggle` selection control.
+ */
 export interface ToggleProps extends React.AriaAttributes, React.DOMAttributes<HTMLInputElement> {
     /**
-     * The type of toggle. Values: "checkbox" | "radio" | "yes" | "no"
+     * Determines selection behavior and the indicator icon style.
      *
-     * "checkbox" - allows deselection
-     *
-     * "radio", "yes", "no" - does not allow deselection. However they
-     * will determine the indicator to be displayed
+     * @default "checkbox"
      */
     type?: ToggleType | undefined;
-    /** Specifies if the indicator icon should be displayed */
+    /**
+     * Whether to render the selection indicator icon inside the toggle.
+     *
+     * The icon shape depends on `type`:
+     * - `"checkbox"` renders a tick box.
+     * - `"radio"` renders a filled circle.
+     * - `"yes"` renders a tick.
+     * - `"no"` renders a cross.
+     */
     indicator?: boolean | undefined;
-    /** Indicates if the element is checked */
+    /**
+     * Controlled checked state of the toggle.
+     */
     checked?: boolean | undefined;
-    /** The style type of the Toggle. Values: "default" | "no-border" */
+    /**
+     * Visual presentation of the toggle container.
+     *
+     * @default "default"
+     */
     styleType?: ToggleStyleType | undefined;
-    /** The Toggle label */
+    /** Label content for the toggle. */
     children: React.ReactNode;
-    /** The number of lines visible. Additional lines will be truncated */
+    /**
+     * Maximum number of visible label lines at each breakpoint.
+     *
+     * Lines beyond the limit are truncated with an ellipsis. Omit a
+     * breakpoint key to leave that viewport unconstrained.
+     */
     childrenMaxLines?: {
         mobile?: number | undefined;
         desktop?: number | undefined;
         tablet?: number | undefined;
     } | undefined;
+    /**
+     * Secondary content rendered below the main label.
+     */
     subLabel?: (() => JSX.Element) | JSX.Element | string | undefined;
     disabled?: boolean | undefined;
-    /** Specifies if the error display should be present */
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     className?: string | undefined;
     name?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when the toggle selection state changes.
+     *
+     * When provided, the caller is responsible for reflecting
+     * the new value back via `checked`.
+     */
     onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
-    /** The Toggle subsection */
+    /**
+     * Optional collapsible body section rendered below the toggle label.
+     *
+     * The section automatically expands when the toggle becomes selected.
+     */
     compositeSection?: ToggleCompositeSectionProps | undefined;
-    /** Specifies if the remove button should be displayed */
+    /**
+     * Renders a "Remove" button alongside the label.
+     *
+     * Clicking the button calls `onRemove` when the toggle is not disabled.
+     */
     removable?: boolean | undefined;
+    /** Called when the remove button is clicked and the toggle is not disabled. */
     onRemove?: (() => void) | undefined;
-    /** Changes min-width to fit content */
+    /** Constrains the toggle width to its content rather than filling the container. */
     useContentWidth?: boolean | undefined;
+    /**
+     * Keeps the toggle keyboard-focusable when `disabled` is `true`.
+     *
+     * When set alongside `disabled`, the native `disabled` attribute is omitted
+     * in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element
+     * keyboard-reachable. `onChange` is still suppressed.
+     */
     focusableWhenDisabled?: boolean | undefined;
 }
+/**
+ * Configuration for the collapsible body section attached to a `Toggle`.
+ */
 export interface ToggleCompositeSectionProps {
+    /** Content rendered inside the composite section body. */
     children: React.ReactNode;
-    /** Specifies if the subsection is collapsible */
+    /**
+     * Whether the section can be collapsed and expanded by the user.
+     *
+     * @default true
+     */
     collapsible?: boolean | undefined;
-    /** The initial expanded state. Only applicable if collapsible */
+    /**
+     * Whether the composite section starts in the expanded state.
+     *
+     * When the toggle becomes selected, the section automatically expands
+     * regardless of this value. Only applies when `collapsible` is `true`.
+     *
+     * @default false
+     */
     initialExpanded?: boolean | undefined;
-    /** Specifies errors to be displayed when the subsection is collapsed */
+    /**
+     * Errors shown in an alert banner when the section is collapsed.
+     *
+     * Pass a `string[]` to render a titled error list, or a `JSX.Element`
+     * for a custom error presentation.
+     */
     errors?: string[] | JSX.Element | undefined;
 }

package/typography/index.d.ts

@@ -1,4 +1,20 @@
+/**
+ * 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.
+ */
 export declare const Typography: {
+    /** Renders the largest heading (`h1`). */
     HeadingXXL: (props: Omit<any, "ref"> & {
         weight?: import("./types").TypographyWeight | undefined;
         inline?: boolean | undefined;
@@ -6,6 +22,7 @@ export declare const Typography: {
         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;
@@ -13,6 +30,7 @@ export declare const Typography: {
         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;
@@ -20,6 +38,7 @@ export declare const Typography: {
         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;
@@ -27,6 +46,7 @@ export declare const Typography: {
         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;
@@ -34,6 +54,7 @@ export declare const Typography: {
         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;
@@ -41,6 +62,7 @@ export declare const Typography: {
         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;
@@ -48,6 +70,7 @@ export declare const Typography: {
         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;
@@ -55,6 +78,7 @@ export declare const Typography: {
         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;
@@ -62,6 +86,7 @@ export declare const Typography: {
         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;
@@ -69,9 +94,13 @@ export declare const Typography: {
         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.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/**\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 */\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":"wNAgCO,MAAMA,EAAa,CAEtBC,aAEAC,YAEAC,YAEAC,YAEAC,YAEAC,YAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC,SAEAC"}

package/typography/types.d.ts

@@ -1,24 +1,67 @@
 import type { FontSize } from "../theme";
+/** Font weight variant applied to a typography element. */
 export type TypographyWeight = "regular" | "semibold" | "bold" | "light";
+/**
+ * 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> & {
-    /** The font weight */
+    /**
+     * 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 rendered element, e.g. `h2` for semantic hierarchy */
+    /**
+     * 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_1734x2k.css

@@ -1,4 +1,4 @@
-.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);}
+@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);}
@@ -11,4 +11,4 @@
 .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);}
+.b1rin8wh{font-weight:var(--fds-font-weight-bold);}}

package/typography/typography.styles.js

@@ -1,2 +1,2 @@
-import"./typography-text.styles_1734x2k.css";import"./typography.styles_1155j4c.css";const t={typographyBase:{maxLines:"--fds-internal-typography-base-maxLines"}},p="ts2ljtd",s="tu0nvfw",y="t1ruq6ql",a="d1cfdq56",o="d4n1hjq",r="p1ydob6f",e="l1w2xa0l",h="hspw24h",l="u3g791q",n="nlbpwo0",_="e1f7dy7t";export{o as displayBlock,a as displayInline,_ as externalIcon,h as hyperlinkBase,e as lineClamp,n as noUnderline,r as paragraph,t as tokens,p as typographyBase,y as typographyBody,s as typographyHeader,l as underline};
+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.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: middle;\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"}
+{"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_1155j4c.css → typography.styles_1wd82dn.css}

@@ -1,4 +1,4 @@
-.ts2ljtd{--fds-internal-typography-base-maxLines:initial;font-variant:var(--fds-font-variant);color:var(--fds-colour-text);}
+@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;}
@@ -8,4 +8,4 @@
 .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:middle;}
+.e1f7dy7t{height:1lh;width:1em;margin-left:0.4em;vertical-align:top;}}

package/uneditable-section/index.d.ts

@@ -1,5 +1,20 @@
 export * from "./types";
-export declare const UneditableSection: (({ items, title, description, topSection, bottomSection, children, background, stretch, fullWidth, onMask, onUnmask, onTryAgain, className, ...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.
+ */
+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/**\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 */\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":"0LAgBaA,EAAoBC,OAAOC,OAAOC,EAAuB,CAKlEC,YAAaC,EAEbC,KAAMC"}

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

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

package/uneditable-section/types.d.ts

@@ -1,63 +1,106 @@
 import type React from "react";
 import type { AlertProps } from "../alert";
 import type { MaskAttributeProps } from "../masked-input";
+/** Grid column span for an item within the section layout. */
 export type UneditableSectionItemDisplayWidth = "half" | "full";
+/** Whether the item value is currently masked or unmasked. */
 export type UneditableSectionItemMaskState = "masked" | "unmasked";
+/** Async loading state during a mask or unmask action. */
 export type UneditableSectionItemMaskLoadingState = "loading" | "fail";
+/**
+ * Props for `UneditableSection` component.
+ */
 export interface UneditableSectionItemProps extends MaskAttributeProps {
     id?: string | undefined;
+    /** Field label shown above the item value. */
     label: string;
-    /** Note: masking is only available for string values */
+    /**
+     * The display value for the field.
+     *
+     * @remarks Masking is only available when `value` is a string.
+     */
     value: string | React.ReactNode;
-    /** The width that the item can span across. Values: "half", "full" */
-    displayWidth?: UneditableSectionItemDisplayWidth | undefined;
     /**
-     * Specifies if value is masked or unmasked.
-     * If undefined, no masking or unmasking controls will be rendered.
+     * Grid column span for the item within the section layout.
      *
-     * Values: "masked" | "unmasked"
+     * @default "full"
+     */
+    displayWidth?: UneditableSectionItemDisplayWidth | undefined;
+    /**
+     * Controls whether the value is masked or unmasked.
+     * When undefined, no mask or unmask controls are rendered.
      */
     maskState?: UneditableSectionItemMaskState | undefined;
     /**
-     * Specifies the state of the component when there is a
-     * loading behaviour from a mask/unmask action. If undefined
-     * the value will be rendered out.
-     *
-     * Values: "loading" | "fail"
+     * Async loading state during a mask or unmask action.
+     * When undefined, the resolved value is rendered directly.
      */
     maskLoadingState?: UneditableSectionItemMaskLoadingState | undefined;
-    /** If specified, one is unable to mask or unmask the value */
+    /** Prevents the user from toggling the mask or unmask control. */
     disableMaskUnmask?: boolean | undefined;
-    /** If specified, an Alert will be rendered below the item */
+    /** Alert rendered below the item value. */
     alert?: AlertProps | undefined;
 }
+/**
+ * Props for `UneditableSection.ItemSection`.
+ */
 export interface UneditableSectionItemSectionProps extends React.HTMLAttributes<HTMLUListElement> {
-    /** Specifies if contents should take up the full width of the section */
+    /** Stretches every child item to fill the full width of the grid. */
     stretch?: boolean | undefined;
 }
+/**
+ * Props for the `UneditableSection` component.
+ */
 export interface UneditableSectionProps {
+    /** List of labeled read-only field items to render in a responsive grid. */
     items?: UneditableSectionItemProps[] | undefined;
+    /** Optional heading rendered above the items grid. */
     title?: string | undefined;
+    /** Optional description rendered below `title` and above the items grid. */
     description?: string | undefined;
-    /** A custom section at the top of the main uneditable items section */
+    /** Custom content rendered above the items grid, below `description`. */
     topSection?: JSX.Element | undefined;
-    /** A custom section at the bottom of the main uneditable items section */
+    /** Custom content rendered below the items grid. */
     bottomSection?: JSX.Element | undefined;
-    /** The body of the entire section */
+    /**
+     * Fully custom section body.
+     *
+     * @remarks When provided, `items`, `title`,`description`,
+     * `topSection`, and `bottomSection` are not rendered.
+     */
     children?: JSX.Element | JSX.Element[] | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
-    /** If specified false, the background will be transparent. Else it is grey by default */
+    /**
+     * Applies a grey background to the section container.
+     * Set to `false` for a transparent background.
+     *
+     * @default true
+     */
     background?: boolean | undefined;
-    /** Specifies if contents should take up the full width of the section */
+    /** Stretches every item to fill the full column width of the grid. */
     stretch?: boolean | undefined;
-    /** If true, removes the default spacing and grid alignment based on `Layout.Content` */
+    /**
+     * When `true`, allows the section to span the full available width of its parent.
+     */
     fullWidth?: boolean | undefined;
-    /** The callback function when the mask icon is clicked */
+    /**
+     * Called when a mask control is activated on an item.
+     *
+     * @param item The item whose mask control was activated.
+     */
     onMask?: ((item: UneditableSectionItemProps) => void) | undefined;
-    /** The callback function when the unmask icon is clicked */
+    /**
+     * Called when an unmask control is activated on an item.
+     *
+     * @param item The item whose unmask control was activated.
+     */
     onUnmask?: ((item: UneditableSectionItemProps) => void) | undefined;
-    /** The callback function when the "Try again" button is clicked in error state */
+    /**
+     * Called when the retry button is clicked on an item in error state.
+     *
+     * @param item The item that encountered the mask/unmask error.
+     */
     onTryAgain?: ((item: UneditableSectionItemProps) => void) | undefined;
 }

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

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

package/uneditable-section/uneditable-section.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nexport const UneditableSectionBase = ({\n    items,\n    title,\n    description,\n    topSection,\n    bottomSection,\n    children,\n    background = true,\n    stretch,\n    fullWidth,\n    onMask,\n    onUnmask,\n    onTryAgain,\n    className,\n    ...otherProps\n}: UneditableSectionProps) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n"],"names":["UneditableSectionBase","_a","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type"],"mappings":"qdAWO,MAAMA,EAAyBC,IAAA,IAAAC,MAClCA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASb,EACNc,EAAUC,EAAAf,EAdqB,yJAmBlC,MAAMgB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAA,KAAA,CACIZ,UAAWgB,EACPC,EACAtB,GAAWuB,EACXtB,GAAauB,GAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAC,EAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAACW,EAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EACPW,EACAhC,GAAWuB,GACdzB,SAEAJ,IAGRC,GACGsB,EAACW,EAAWK,OAAM,CACd5B,UAAWgB,EACPa,EACAlC,GAAWuB,YAGd5B,IAGRC,GACGqB,EAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAD,OAOrB,OAAII,EAEIgB,uBACIZ,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,YAEHmB,OAKTR,EAACoB,EAAOC,QAAOnB,OAAAC,OAAA,CACXf,UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY"}
+{"version":3,"file":"uneditable-section.js","sources":["../../src/uneditable-section/uneditable-section.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type { NamedExoticComponent } from \"react\";\nimport React from \"react\";\n\nimport { Layout } from \"../layout\";\nimport { Typography } from \"../typography\";\nimport { UneditableSectionItem } from \"./section-item\";\nimport type {\n    UneditableSectionItemProps,\n    UneditableSectionProps,\n} from \"./types\";\nimport * as styles from \"./uneditable-section.styles\";\n\nconst Component = (\n    {\n        items,\n        title,\n        description,\n        topSection,\n        bottomSection,\n        children,\n        background = true,\n        stretch,\n        fullWidth,\n        onMask,\n        onUnmask,\n        onTryAgain,\n        className,\n        ...otherProps\n    }: UneditableSectionProps,\n    ref: React.Ref<HTMLDivElement>\n) => {\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleItemMask = (item: UneditableSectionItemProps) => () => {\n        if (onMask) onMask(item);\n    };\n\n    const handleItemUnmask = (item: UneditableSectionItemProps) => () => {\n        if (onUnmask) onUnmask(item);\n    };\n\n    const handleTryAgain = (item: UneditableSectionItemProps) => () => {\n        if (onTryAgain) onTryAgain(item);\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderItems = () => {\n        if (items && items.length > 0) {\n            const renderedItems = items.map((item, index) => {\n                return (\n                    <UneditableSectionItem\n                        key={index}\n                        {...item}\n                        onMask={handleItemMask(item)}\n                        onUnmask={handleItemUnmask(item)}\n                        onTryAgain={handleTryAgain(item)}\n                        fullWidth={fullWidth}\n                    />\n                );\n            });\n\n            return (\n                <ul\n                    className={clsx(\n                        styles.gridUl,\n                        stretch && styles.columnWidthStretch,\n                        fullWidth && styles.gridUlFullWidth\n                    )}\n                >\n                    {renderedItems}\n                </ul>\n            );\n        }\n\n        return null;\n    };\n\n    const renderChildren = () => {\n        if (children) {\n            return children;\n        }\n\n        return (\n            <>\n                {title && (\n                    <Typography.HeadingSM\n                        as=\"h2\"\n                        weight=\"semibold\"\n                        className={clsx(\n                            styles.title,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {title}\n                    </Typography.HeadingSM>\n                )}\n                {description && (\n                    <Typography.BodyBL\n                        className={clsx(\n                            styles.description,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {description}\n                    </Typography.BodyBL>\n                )}\n                {topSection && (\n                    <div\n                        data-id=\"top-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {topSection}\n                    </div>\n                )}\n                {renderItems()}\n                {bottomSection && (\n                    <div\n                        data-id=\"bottom-section\"\n                        className={clsx(\n                            styles.customSection,\n                            stretch && styles.columnWidthStretch\n                        )}\n                    >\n                        {bottomSection}\n                    </div>\n                )}\n            </>\n        );\n    };\n\n    if (fullWidth) {\n        return (\n            <div\n                ref={ref}\n                className={clsx(\n                    background && styles.wrapperBackground,\n                    className\n                )}\n                {...otherProps}\n            >\n                {renderChildren()}\n            </div>\n        );\n    }\n    return (\n        <Layout.Content\n            ref={ref}\n            className={clsx(\n                styles.wrapper,\n                background && styles.wrapperBackground,\n                className\n            )}\n            {...otherProps}\n            type=\"grid\"\n        >\n            {renderChildren()}\n        </Layout.Content>\n    );\n};\n\nexport const UneditableSectionBase = React.forwardRef(Component);\n\n(UneditableSectionBase as NamedExoticComponent).displayName =\n    \"UneditableSection\";\n"],"names":["UneditableSectionBase","React","forwardRef","_a","ref","items","title","description","topSection","bottomSection","children","background","stretch","fullWidth","onMask","onUnmask","onTryAgain","className","otherProps","__rest","handleItemMask","item","handleItemUnmask","handleTryAgain","renderItems","length","renderedItems","map","index","_jsx","UneditableSectionItem","Object","assign","clsx","styles.gridUl","styles.columnWidthStretch","styles.gridUlFullWidth","renderChildren","_jsxs","_Fragment","Typography","HeadingSM","as","weight","styles.title","BodyBL","styles.description","styles.customSection","styles.wrapperBackground","Layout","Content","styles.wrapper","type","displayName"],"mappings":"0eAaA,MA0JaA,EAAwBC,EAAMC,YA1JzB,CACdC,EAgBAC,KAhBA,IAAAC,MACIA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,WACXA,EAAUC,cACVA,EAAaC,SACbA,EAAQC,WACRA,GAAa,EAAIC,QACjBA,EAAOC,UACPA,EAASC,OACTA,EAAMC,SACNA,EAAQC,WACRA,EAAUC,UACVA,GAASd,EACNe,EAAUC,EAAAhB,EAdjB,yJAqBA,MAAMiB,EAAkBC,GAAqC,KACrDP,GAAQA,EAAOO,EAAK,EAGtBC,EAAoBD,GAAqC,KACvDN,GAAUA,EAASM,EAAK,EAG1BE,EAAkBF,GAAqC,KACrDL,GAAYA,EAAWK,EAAK,EAM9BG,EAAc,KAChB,GAAInB,GAASA,EAAMoB,OAAS,EAAG,CAC3B,MAAMC,EAAgBrB,EAAMsB,KAAI,CAACN,EAAMO,IAE/BC,EAACC,EAAqBC,OAAAC,OAAA,GAEdX,EAAI,CACRP,OAAQM,EAAeC,GACvBN,SAAUO,EAAiBD,GAC3BL,WAAYO,EAAeF,GAC3BR,UAAWA,IALNe,KAUjB,OACIC,EAAA,KAAA,CACIZ,UAAWgB,EACPC,EACAtB,GAAWuB,EACXtB,GAAauB,GAChB1B,SAEAgB,GAGb,CAEA,OAAO,IAAI,EAGTW,EAAiB,IACf3B,GAKA4B,EAAAC,EAAA,CAAA7B,SAAA,CACKJ,GACGuB,EAACW,EAAWC,UAAS,CACjBC,GAAG,KACHC,OAAO,WACP1B,UAAWgB,EACPW,EACAhC,GAAWuB,GACdzB,SAEAJ,IAGRC,GACGsB,EAACW,EAAWK,OAAM,CACd5B,UAAWgB,EACPa,EACAlC,GAAWuB,YAGd5B,IAGRC,GACGqB,EAAA,MAAA,CAAA,UACY,cACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAF,IAGRgB,IACAf,GACGoB,EAAA,MAAA,CAAA,UACY,iBACRZ,UAAWgB,EACPc,EACAnC,GAAWuB,GACdzB,SAEAD,OAOrB,OAAII,EAEIgB,EAAA,MAAAE,OAAAC,OAAA,CACI5B,IAAKA,EACLa,UAAWgB,EACPtB,GAAcqC,EACd/B,IAEAC,EAAU,CAAAR,SAEb2B,OAKTR,EAACoB,EAAOC,uBACJ9C,IAAKA,EACLa,UAAWgB,EACPkB,EACAxC,GAAcqC,EACd/B,IAEAC,EAAU,CACdkC,KAAK,OAAM1C,SAEV2B,MACY,IAMxBrC,EAA+CqD,YAC5C"}