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

package/date-range-input/types.d.ts

@@ -1,52 +1,88 @@
 import type { RefObject } from "react";
 import type { CommonCalendarProps, Variant, YearMonthDisplay } from "../shared/internal-calendar/types";
+/** Props for `DateRangeInput`. */
 export interface DateRangeInputProps extends CommonCalendarProps {
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * When `true`, suppresses the native on-screen keyboard on mobile devices
+     * while still allowing the calendar picker to open.
+     */
     hideInputKeyboard?: boolean | undefined;
     /**
-     * The value of the start date input in "YYYY-MM-DD" or "YYYY-M-D" string format.
+     * The controlled value of the date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.
+     *
+     * @remarks Passing `undefined` or an invalid string clears the selection.
      */
     value?: string | undefined;
     /**
-     * The value of the end date input in "YYYY-MM-DD" or "YYYY-M-D" string format.
+     * The controlled value of the end date input in `"YYYY-MM-DD"` or `"YYYY-M-D"` string format.
+     *
+     * @remarks Passing `undefined` or an invalid string clears the selection.
      */
     valueEnd?: string | undefined;
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     disabled?: boolean | undefined;
     readOnly?: boolean | undefined;
-    /** Indicate calendar variant from the date input component. */
+    /**
+     * Selection model used by the calendar.
+     * - `"range"` — user picks a free-form start and end date independently.
+     * - `"week"` — selecting any day automatically expands the selection to the full calendar week.
+     * - `"fixed-range"` — selecting a start date automatically sets the end date to `numberOfDays - 1` days later.
+     *
+     * @default "range"
+     */
     variant?: Exclude<Variant, "single" | "multi"> | undefined;
-    /** Set the number of days for fixed-range variant */
+    /**
+     * Number of days in the selection window when `variant` is `"fixed-range"`.
+     * The end date is calculated as the selected start date plus `numberOfDays - 1` days.
+     *
+     * @default 7
+     */
     numberOfDays?: number;
     /**
-     * Specifies if the "Done" and "Cancel" action buttons should be rendered.
-     * Is restricted to `true` on mobile viewports
+     * Whether to show "Done" and "Cancel" action buttons inside the calendar dropdown.
+     * When `false`, a selection immediately commits and closes the calendar.
+     *
+     * @default true
      */
     withButton?: boolean | undefined;
     /** The z-index of the calendar dropdown */
     zIndex?: number | undefined;
     /**
-     * The root element that contains the dropdown element. Defaults to the document body.
+     * The root element that contains the dropdown element.
+     *
+     * @remarks Specify this if you need to change the parent of the
+     * dropdown in the HTML DOM.
+     * Possible use case: sharing a stacking context.
      *
-     * If the parent that contains the trigger element has a higher z-index than the dropdown,
-     * the dropdown may not be visible. Specify the parent element here instead
+     * Note: if a parent of the trigger has a higher `z-index` than the dropdown,
+     * the dropdown may be obscured.
+     *
+     * @default `document.body`
      */
     dropdownRootNode?: RefObject<HTMLElement> | undefined;
     /**
-     * Function that returns when a valid selection is made. Returns the start and
-     * end date in "YYYY-MM-DD" string format.
+     * Called when the user completes a valid date range selection.
+     * Both dates are provided in `"YYYY-MM-DD"` format. An empty string is passed
+     * for either date when the selection is cleared.
+     *
+     * @remarks When `withButton` is `true`, this fires only after the user
+     * confirms via the "Done" button.
      */
     onChange?: ((startDate: string, endDate: string) => void) | undefined;
     /**
-     * Called when field is focused
+     * Called when the input receives focus.
      */
     onFocus?: (() => void) | undefined;
     /**
-     * Function that returns when a defocus is made on the field
+     * Called when focus leaves both the input and the calendar dropdown.
      */
     onBlur?: (() => void) | undefined;
-    /** Called when there is a change in the current visible month and year */
+    /**
+     * Called when the visible month or year in the calendar changes.
+     */
     onYearMonthDisplayChange?: ((value: YearMonthDisplay) => void) | undefined;
 }

package/divider/divider.d.ts

@@ -1,2 +1,8 @@
 import type { DividerProps } from "./types";
+/**
+ * A horizontal line that visually separates sections of content.
+ *
+ * Use `Divider` to draw a clear boundary between distinct groups of content on
+ * a page or within a layout.
+ */
 export declare const Divider: ({ thickness, lineStyle, layoutType, color, className, xxsCols, xsCols, smCols, mdCols, lgCols, xlCols, xxlCols, ...otherProps }: DividerProps) => import("react/jsx-runtime").JSX.Element;

package/divider/divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"divider.js","sources":["../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport { useResolvedTokenValue } from \"../theme/utils\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n    solid: styles.solidLine,\n    dashed: styles.dashedLine,\n};\n\nexport const Divider = ({\n    thickness = 1,\n    lineStyle = \"solid\",\n    layoutType = \"flex\",\n    color,\n    className,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    ...otherProps\n}: DividerProps) => {\n    const ref = useRef<HTMLHRElement>(null);\n\n    const effectiveColor = useResolvedTokenValue({\n        value: color,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const encodedColor = encodeURIComponent(effectiveColor);\n    const strokeWidth = thickness + 1; // best fit\n\n    useApplyStyle(ref, {\n        [styles.tokens.thickness]: `${thickness}px`,\n        [styles.tokens.color]: color,\n        [styles.tokens.backgroundImage]: `\n            url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n    });\n\n    const getColumnProps = () => {\n        const xxsColsProp = xxsCols || [1, -1];\n        const xsColsProp = xsCols || xxsColsProp;\n        const smColsProp = smCols || xsColsProp;\n        const mdColsProp = mdCols || smColsProp;\n        const lgColsProp = lgCols || mdColsProp;\n        const xlColsProp = xlCols || lgColsProp;\n        const xxlColsProp = xxlCols || xlColsProp;\n\n        return {\n            xxlCols: xxlColsProp,\n            xlCols: xlColsProp,\n            lgCols: lgColsProp,\n            mdCols: mdColsProp,\n            smCols: smColsProp,\n            xsCols: xsColsProp,\n            xxsCols: xxsColsProp,\n        };\n    };\n\n    const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n    switch (layoutType) {\n        case \"flex\":\n            return (\n                <hr\n                    ref={ref}\n                    className={clsx(lineClass, className)}\n                    {...otherProps}\n                />\n            );\n        case \"grid\":\n            return (\n                <ColDiv\n                    className={className}\n                    {...getColumnProps()}\n                    {...otherProps}\n                >\n                    <hr ref={ref} className={lineClass} />\n                </ColDiv>\n            );\n    }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","Divider","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"ovBAUA,MAAMA,EAAqD,CACvDC,MAAOC,EACPC,OAAQC,GAGCC,EAAWC,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAsB,MAE5BC,EAAiBC,EAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAe,OACzBC,QAASC,EACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAcd,EAAK,CACf,CAACe,EAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAc1B,OAAQA,EACvB,CAAC0B,EAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAKC,EAAiBxC,EAAaQ,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAACG,EAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}
+{"version":3,"file":"divider.js","sources":["../../src/divider/divider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport { useRef } from \"react\";\n\nimport { ColDiv } from \"../layout/col-div\";\nimport { Colour, useApplyStyle } from \"../theme\";\nimport { useResolvedTokenValue } from \"../theme/utils\";\nimport { isColourToken } from \"../util/styling-helper\";\nimport * as styles from \"./divider.styles\";\nimport type { DividerLineStyleType, DividerProps } from \"./types\";\n\nconst lineStyleMap: Record<DividerLineStyleType, string> = {\n    solid: styles.solidLine,\n    dashed: styles.dashedLine,\n};\n\n/**\n * A horizontal line that visually separates sections of content.\n *\n * Use `Divider` to draw a clear boundary between distinct groups of content on\n * a page or within a layout.\n */\nexport const Divider = ({\n    thickness = 1,\n    lineStyle = \"solid\",\n    layoutType = \"flex\",\n    color,\n    className,\n    xxsCols,\n    xsCols,\n    smCols,\n    mdCols,\n    lgCols,\n    xlCols,\n    xxlCols,\n    ...otherProps\n}: DividerProps) => {\n    const ref = useRef<HTMLHRElement>(null);\n\n    const effectiveColor = useResolvedTokenValue({\n        value: color,\n        fallback: Colour[\"border\"],\n        isToken: isColourToken,\n        normalizeCustom: String,\n    });\n\n    const encodedColor = encodeURIComponent(effectiveColor);\n    const strokeWidth = thickness + 1; // best fit\n\n    useApplyStyle(ref, {\n        [styles.tokens.thickness]: `${thickness}px`,\n        [styles.tokens.color]: color,\n        [styles.tokens.backgroundImage]: `\n            url('data:image/svg+xml,<svg width=\"8\" height=\"${thickness}\" viewBox=\"0 0 8 1\" xmlns=\"http://www.w3.org/2000/svg\"><line x1=\"2\" y1=\"1\" x2=\"6\" y2=\"1\" stroke=\"${encodedColor}\" stroke-width=\"${strokeWidth}\" stroke-dasharray=\"4 4\" /></svg>')`,\n    });\n\n    const getColumnProps = () => {\n        const xxsColsProp = xxsCols || [1, -1];\n        const xsColsProp = xsCols || xxsColsProp;\n        const smColsProp = smCols || xsColsProp;\n        const mdColsProp = mdCols || smColsProp;\n        const lgColsProp = lgCols || mdColsProp;\n        const xlColsProp = xlCols || lgColsProp;\n        const xxlColsProp = xxlCols || xlColsProp;\n\n        return {\n            xxlCols: xxlColsProp,\n            xlCols: xlColsProp,\n            lgCols: lgColsProp,\n            mdCols: mdColsProp,\n            smCols: smColsProp,\n            xsCols: xsColsProp,\n            xxsCols: xxsColsProp,\n        };\n    };\n\n    const lineClass = clsx(styles.lineBase, lineStyleMap[lineStyle]);\n\n    switch (layoutType) {\n        case \"flex\":\n            return (\n                <hr\n                    ref={ref}\n                    className={clsx(lineClass, className)}\n                    {...otherProps}\n                />\n            );\n        case \"grid\":\n            return (\n                <ColDiv\n                    className={className}\n                    {...getColumnProps()}\n                    {...otherProps}\n                >\n                    <hr ref={ref} className={lineClass} />\n                </ColDiv>\n            );\n    }\n};\n"],"names":["lineStyleMap","solid","styles.solidLine","dashed","styles.dashedLine","Divider","_a","thickness","lineStyle","layoutType","color","className","xxsCols","xsCols","smCols","mdCols","lgCols","xlCols","xxlCols","otherProps","__rest","ref","useRef","effectiveColor","useResolvedTokenValue","value","fallback","Colour","isToken","isColourToken","normalizeCustom","String","encodedColor","encodeURIComponent","strokeWidth","useApplyStyle","styles.tokens","backgroundImage","lineClass","clsx","styles.lineBase","_jsx","Object","assign","ColDiv","xxsColsProp","xsColsProp","smColsProp","mdColsProp","lgColsProp","xlColsProp","getColumnProps"],"mappings":"ovBAUA,MAAMA,EAAqD,CACvDC,MAAOC,EACPC,OAAQC,GASCC,EAAWC,IAAA,IAAAC,UACpBA,EAAY,EAACC,UACbA,EAAY,QAAOC,WACnBA,EAAa,OAAMC,MACnBA,EAAKC,UACLA,EAASC,QACTA,EAAOC,OACPA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,OACNA,EAAMC,QACNA,GAAOZ,EACJa,EAAUC,EAAAd,EAbO,6HAepB,MAAMe,EAAMC,EAAsB,MAE5BC,EAAiBC,EAAsB,CACzCC,MAAOf,EACPgB,SAAUC,EAAe,OACzBC,QAASC,EACTC,gBAAiBC,SAGfC,EAAeC,mBAAmBV,GAClCW,EAAc3B,EAAY,EAEhC4B,EAAcd,EAAK,CACf,CAACe,EAAc7B,WAAY,GAAGA,MAC9B,CAAC6B,EAAc1B,OAAQA,EACvB,CAAC0B,EAAcC,iBAAkB,gEACoB9B,qGAA6GyB,oBAA+BE,yCAGrM,MAoBMI,EAAYC,EAAKC,EAAiBxC,EAAaQ,IAErD,OAAQC,GACJ,IAAK,OACD,OACIgC,EAAA,KAAAC,OAAAC,OAAA,CACItB,IAAKA,EACLV,UAAW4B,EAAKD,EAAW3B,IACvBQ,IAGhB,IAAK,OACD,OACIsB,EAACG,EAAMF,OAAAC,OAAA,CACHhC,UAAWA,GAlCJ,MACnB,MAAMkC,EAAcjC,GAAW,CAAC,GAAG,GAC7BkC,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EACvBE,EAAajC,GAAUgC,EAG7B,MAAO,CACH/B,QAHgBA,GAAWgC,EAI3BjC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,OAAQiC,EACRlC,QAASiC,EACZ,EAkBeM,GACAhC,YAEJsB,EAAA,KAAA,CAAIpB,IAAKA,EAAKV,UAAW2B"}

package/divider/divider.styles_1xpzh8p.css

@@ -1,3 +1,3 @@
-.l1oo3ku9{width:100%;margin:0;border:none;--fds-internal-divider-line-thickness:initial;height:var(--fds-internal-divider-line-thickness, 1px);}
+@layer fds{.l1oo3ku9{width:100%;margin:0;border:none;--fds-internal-divider-line-thickness:initial;height:var(--fds-internal-divider-line-thickness, 1px);}
 .s7a32sz{--fds-internal-divider-line-color:initial;background-color:var(--fds-internal-divider-line-color, var(--fds-colour-border));}
-.d1etlddg{background-color:transparent;background-repeat:repeat-x;background-image:var(--fds-internal-divider-line-backgroundImage);}
+.d1etlddg{background-color:transparent;background-repeat:repeat-x;background-image:var(--fds-internal-divider-line-backgroundImage);}}

package/divider/types.d.ts

@@ -1,14 +1,37 @@
 import type { ColProps } from "../layout";
+/** Visual style of the line. */
 export type DividerLineStyleType = "solid" | "dashed";
 type DividerLayoutType = "flex" | "grid";
+/** Props for the `Divider` component. */
 export interface DividerProps extends ColProps, Omit<React.HTMLAttributes<HTMLElement>, "color"> {
-    /** The thickness of the Divider in px */
+    /**
+     * Thickness of the line in pixels.
+     *
+     * @default 1
+     */
     thickness?: number | undefined;
-    /** The line display style type. Values: "solid" | "dashed" */
+    /**
+     * Visual style of the line.
+     *
+     * @default "solid"
+     */
     lineStyle?: DividerLineStyleType | undefined;
-    /** The layout type. Values: "flex" | "grid" */
+    /**
+     * Controls how the divider is rendered relative to its parent layout.
+     *
+     * Use `"flex"` when the divider is a direct child of a flex container.
+     * Use `"grid"` to wrap the line in a `ColDiv`, enabling responsive
+     * column-span control via the `xxsCols`–`xxlCols` props.
+     *
+     * @default "flex"
+     */
     layoutType?: DividerLayoutType | undefined;
-    /** The line color */
+    /**
+     * Color of the line. Accepts a design-system colour token or any valid CSS
+     * color value.
+     *
+     * @default `Colour["border"]`
+     */
     color?: string | undefined;
 }
 export {};

package/drawer/drawer.d.ts

@@ -1,2 +1,9 @@
 import type { DrawerProps } from "./types";
+/**
+ * A slide-in panel that overlays the page content.
+ *
+ * Use `Drawer` to surface supplementary content or navigation options without
+ * navigating away from the current page. Focus is trapped inside the dialog
+ * while it is open and returns to the triggering element on close.
+ */
 export declare const Drawer: ({ children, heading, show, onClose, onOverlayClick, className, ...otherProps }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/drawer/drawer.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.js","sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Overlay } from \"../overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./drawer.styles\";\nimport type { DrawerProps } from \"./types\";\n\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    className,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    const id = useId();\n    const initialFocusRef = useRef<HTMLHeadingElement>(null);\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        outsidePress: false, // defer to Overlay click\n    });\n\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 800,\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!show) {\n            const timer = setTimeout(() => setShowOverlay(false), 800);\n            return () => clearTimeout(timer);\n        } else {\n            setShowOverlay(true);\n        }\n    }, [show]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDialogVisibility = (e: React.TransitionEvent) => {\n        if (e.propertyName === \"visibility\" && show) {\n            // focus the first element so that the screenreader enters the dialog\n            initialFocusRef.current?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={onOverlayClick}\n        >\n            {isMounted ? (\n                <FloatingFocusManager\n                    context={context}\n                    initialFocus={-1}\n                    returnFocus={true}\n                >\n                    <div\n                        ref={refs.setFloating}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        className={clsx(styles.container, className)}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <div className={styles.header}>\n                            <Typography.HeadingMD\n                                as=\"h2\"\n                                className={styles.heading}\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                            >\n                                {heading}\n                            </Typography.HeadingMD>\n                        </div>\n                        <div className={styles.content}>{children}</div>\n                        <ClickableIcon\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                            className={styles.closeButton}\n                        >\n                            <CrossIcon aria-hidden />\n                        </ClickableIcon>\n                    </div>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["Drawer","_a","children","heading","show","onClose","onOverlayClick","className","otherProps","__rest","showOverlay","setShowOverlay","useState","id","useId","initialFocusRef","useRef","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","ref","setFloating","role","onTransitionEnd","e","propertyName","current","focus","clsx","styles.container","styles.header","Typography","HeadingMD","as","styles.heading","tabIndex","weight","styles.content","ClickableIcon","onClick","focusHighlight","styles.closeButton","CrossIcon","undefined"],"mappings":"00BAkBO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,UACdA,GAASN,EACNO,EAAUC,EAAAR,EAPM,sEAYnB,MAAOS,EAAaC,GAAkBC,EAASR,GACzCS,EAAKC,IACLC,EAAkBC,EAA2B,OAK7CC,QAAEA,EAAOC,KAAEA,GAASC,EAAY,CAClCC,KAAMhB,EACNiB,aAAeD,KACNA,GAAQf,GACTA,GACJ,IAIFiB,EAAUC,EAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,EAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAoBb,EAAS,CACvDc,SAAU,MAMdC,GAAU,KACN,IAAK5B,EAAM,CACP,MAAM6B,EAAQC,YAAW,IAAMvB,GAAe,IAAQ,KACtD,MAAO,IAAMwB,aAAaF,EAC9B,CACItB,GAAe,EACnB,GACD,CAACP,IAeJ,OACIgC,EAACC,EAAO,CACJjC,KAAMM,EACN4B,oBAAkB,EAClBhC,eAAgBA,EAAcJ,SAE7B0B,EACGQ,EAACG,EAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAIvC,SAEjBwC,uBACIC,IAAKzB,EAAK0B,YAAW,cACRf,EAAM,cACP,yBAEZgB,KAAK,SAAQ,kBACIhC,EACjBiC,gBA7BYC,UACL,eAAnBA,EAAEC,cAAiC5C,IAEZ,QAAvBH,EAAAc,EAAgBkC,eAAO,IAAAhD,GAAAA,EAAEiD,QAC7B,EA0BgB3C,UAAW4C,EAAKC,EAAkB7C,IAC9BmB,IACAlB,EAAU,CAAAN,SAAA,CAEdkC,EAAA,MAAA,CAAK7B,UAAW8C,EAAanD,SACzBkC,EAACkB,EAAWC,UAAS,CACjBC,GAAG,KACHjD,UAAWkD,EACX5C,GAAIA,EACJ8B,IAAK5B,EACL2C,UAAU,EACVC,OAAO,gBAENxD,MAGTiC,SAAK7B,UAAWqD,EAAc1D,SAAGA,IACjCkC,EAACyB,EAAa,CAAA,aACC,eACXC,QAASzD,EACT0D,gBAAgB,EAChBxD,UAAWyD,EAAkB9D,SAE7BkC,EAAC6B,EAAS,CAAA,eAAA,iBAItBC,GACE"}
+{"version":3,"file":"drawer.js","sources":["../../src/drawer/drawer.tsx"],"sourcesContent":["import {\n    FloatingFocusManager,\n    useDismiss,\n    useFloating,\n    useInteractions,\n    useTransitionStatus,\n} from \"@floating-ui/react\";\nimport { CrossIcon } from \"@lifesg/react-icons/cross\";\nimport clsx from \"clsx\";\nimport { useEffect, useRef, useState } from \"react\";\n\nimport { Overlay } from \"../overlay\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./drawer.styles\";\nimport type { DrawerProps } from \"./types\";\n\n/**\n * A slide-in panel that overlays the page content.\n *\n * Use `Drawer` to surface supplementary content or navigation options without\n * navigating away from the current page. Focus is trapped inside the dialog\n * while it is open and returns to the triggering element on close.\n */\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    className,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    const id = useId();\n    const initialFocusRef = useRef<HTMLHeadingElement>(null);\n\n    // =========================================================================\n    // FLOATING UI CONFIG\n    // =========================================================================\n    const { context, refs } = useFloating({\n        open: show,\n        onOpenChange: (open) => {\n            if (!open && onClose) {\n                onClose();\n            }\n        },\n    });\n\n    const dismiss = useDismiss(context, {\n        escapeKey: true,\n        outsidePress: false, // defer to Overlay click\n    });\n\n    const { getFloatingProps } = useInteractions([dismiss]);\n\n    const { isMounted, status } = useTransitionStatus(context, {\n        duration: 800,\n    });\n\n    // =========================================================================\n    // EFFECTS\n    // =========================================================================\n    useEffect(() => {\n        if (!show) {\n            const timer = setTimeout(() => setShowOverlay(false), 800);\n            return () => clearTimeout(timer);\n        } else {\n            setShowOverlay(true);\n        }\n    }, [show]);\n\n    // =========================================================================\n    // EVENT HANDLERS\n    // =========================================================================\n    const handleDialogVisibility = (e: React.TransitionEvent) => {\n        if (e.propertyName === \"visibility\" && show) {\n            // focus the first element so that the screenreader enters the dialog\n            initialFocusRef.current?.focus();\n        }\n    };\n\n    // =========================================================================\n    // RENDER FUNCTIONS\n    // =========================================================================\n    return (\n        <Overlay\n            show={showOverlay}\n            enableOverlayClick\n            onOverlayClick={onOverlayClick}\n        >\n            {isMounted ? (\n                <FloatingFocusManager\n                    context={context}\n                    initialFocus={-1}\n                    returnFocus={true}\n                >\n                    <div\n                        ref={refs.setFloating}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        className={clsx(styles.container, className)}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <div className={styles.header}>\n                            <Typography.HeadingMD\n                                as=\"h2\"\n                                className={styles.heading}\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                            >\n                                {heading}\n                            </Typography.HeadingMD>\n                        </div>\n                        <div className={styles.content}>{children}</div>\n                        <ClickableIcon\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                            className={styles.closeButton}\n                        >\n                            <CrossIcon aria-hidden />\n                        </ClickableIcon>\n                    </div>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["Drawer","_a","children","heading","show","onClose","onOverlayClick","className","otherProps","__rest","showOverlay","setShowOverlay","useState","id","useId","initialFocusRef","useRef","context","refs","useFloating","open","onOpenChange","dismiss","useDismiss","escapeKey","outsidePress","getFloatingProps","useInteractions","isMounted","status","useTransitionStatus","duration","useEffect","timer","setTimeout","clearTimeout","_jsx","Overlay","enableOverlayClick","FloatingFocusManager","initialFocus","returnFocus","_jsxs","ref","setFloating","role","onTransitionEnd","e","propertyName","current","focus","clsx","styles.container","styles.header","Typography","HeadingMD","as","styles.heading","tabIndex","weight","styles.content","ClickableIcon","onClick","focusHighlight","styles.closeButton","CrossIcon","undefined"],"mappings":"00BAyBO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,EAAcC,UACdA,GAASN,EACNO,EAAUC,EAAAR,EAPM,sEAYnB,MAAOS,EAAaC,GAAkBC,EAASR,GACzCS,EAAKC,IACLC,EAAkBC,EAA2B,OAK7CC,QAAEA,EAAOC,KAAEA,GAASC,EAAY,CAClCC,KAAMhB,EACNiB,aAAeD,KACNA,GAAQf,GACTA,GACJ,IAIFiB,EAAUC,EAAWN,EAAS,CAChCO,WAAW,EACXC,cAAc,KAGZC,iBAAEA,GAAqBC,EAAgB,CAACL,KAExCM,UAAEA,EAASC,OAAEA,GAAWC,EAAoBb,EAAS,CACvDc,SAAU,MAMdC,GAAU,KACN,IAAK5B,EAAM,CACP,MAAM6B,EAAQC,YAAW,IAAMvB,GAAe,IAAQ,KACtD,MAAO,IAAMwB,aAAaF,EAC9B,CACItB,GAAe,EACnB,GACD,CAACP,IAeJ,OACIgC,EAACC,EAAO,CACJjC,KAAMM,EACN4B,oBAAkB,EAClBhC,eAAgBA,EAAcJ,SAE7B0B,EACGQ,EAACG,EAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAIvC,SAEjBwC,uBACIC,IAAKzB,EAAK0B,YAAW,cACRf,EAAM,cACP,yBAEZgB,KAAK,SAAQ,kBACIhC,EACjBiC,gBA7BYC,UACL,eAAnBA,EAAEC,cAAiC5C,IAEZ,QAAvBH,EAAAc,EAAgBkC,eAAO,IAAAhD,GAAAA,EAAEiD,QAC7B,EA0BgB3C,UAAW4C,EAAKC,EAAkB7C,IAC9BmB,IACAlB,EAAU,CAAAN,SAAA,CAEdkC,EAAA,MAAA,CAAK7B,UAAW8C,EAAanD,SACzBkC,EAACkB,EAAWC,UAAS,CACjBC,GAAG,KACHjD,UAAWkD,EACX5C,GAAIA,EACJ8B,IAAK5B,EACL2C,UAAU,EACVC,OAAO,gBAENxD,MAGTiC,SAAK7B,UAAWqD,EAAc1D,SAAGA,IACjCkC,EAACyB,EAAa,CAAA,aACC,eACXC,QAASzD,EACT0D,gBAAgB,EAChBxD,UAAWyD,EAAkB9D,SAE7BkC,EAAC6B,EAAS,CAAA,eAAA,iBAItBC,GACE"}

package/drawer/drawer.styles_94hx3y.css

@@ -1,5 +1,5 @@
-.c1agands{position:fixed;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;width:40%;overflow:hidden;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-subtle);border-top-left-radius:var(--fds-radius-md);border-bottom-left-radius:var(--fds-radius-md);transition-property:right,visibility;}.c1agands[data-status="initial"]{right:-100%;visibility:hidden;}.c1agands[data-status="open"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-entrance);right:0;visibility:visible;}.c1agands[data-status="close"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-exit);right:-100%;visibility:hidden;}:where(body.fds-breakpoint-xl-max) .c1agands{width:50%;min-width:700px;}:where(body.fds-breakpoint-lg-max) .c1agands{width:100%;min-width:unset;border-top-left-radius:0;border-bottom-left-radius:0;}
+@layer fds{.c1agands{position:fixed;top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;height:100%;width:40%;overflow:hidden;background-color:var(--fds-colour-bg);box-shadow:var(--fds-shadow-lg-subtle);border-top-left-radius:var(--fds-radius-md);border-bottom-left-radius:var(--fds-radius-md);transition-property:right,visibility;}.c1agands[data-status="initial"]{right:-100%;visibility:hidden;}.c1agands[data-status="open"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-entrance);right:0;visibility:visible;}.c1agands[data-status="close"]{transition-duration:var(--fds-motion-duration-800);transition-timing-function:var(--fds-motion-timing-ease-exit);right:-100%;visibility:hidden;}:where(body.fds-breakpoint-xl-max) .c1agands{width:50%;min-width:700px;}:where(body.fds-breakpoint-lg-max) .c1agands{width:100%;min-width:unset;border-top-left-radius:0;border-bottom-left-radius:0;}
 .h1kc1wos{top:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--fds-spacing-16);padding:var(--fds-spacing-32) var(--fds-spacing-16) var(--fds-spacing-16) calc(var(--fds-font-heading-lh-md) + var(--fds-spacing-32));background-color:var(--fds-colour-bg);border-bottom:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);}:where(body.fds-breakpoint-lg-max) .h1kc1wos{gap:var(--fds-spacing-8);padding:var(--fds-spacing-32) var(--fds-spacing-20) var(--fds-spacing-16) calc(var(--fds-font-heading-lh-md) + var(--fds-spacing-24));}
 .c1njxz6r{color:var(--fds-colour-icon);padding:0;position:absolute;top:var(--fds-spacing-32);left:var(--fds-spacing-16);}.c1njxz6r:active,.c1njxz6r:focus{color:var(--fds-colour-icon-hover);}.c1njxz6r svg{height:var(--fds-font-heading-lh-md);width:var(--fds-font-heading-lh-md);}
 .hcrz6mg{text-overflow:ellipsis;overflow:hidden;white-space:nowrap;}
-.c2k10hw{-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;}
+.c2k10hw{-webkit-flex:1;-ms-flex:1;flex:1;overflow-y:auto;}}

package/drawer/types.d.ts

@@ -1,14 +1,26 @@
+/** Props for the `Drawer` slide-in panel component. */
 export interface DrawerProps {
     children?: React.ReactNode | undefined;
     className?: string | undefined;
     "data-testid"?: string | undefined;
     id?: string | undefined;
-    /** The drawer header text */
+    /**
+     * Text rendered as the drawer title and used as the accessible label for
+     * the dialog.
+     */
     heading?: string | undefined;
-    /** Toggles the visibility of the drawer */
+    /**
+     * Controls whether the drawer is visible.
+     *
+     * @remarks This is a controlled prop; the parent is responsible for
+     * updating it in response to `onClose` and `onOverlayClick`.
+     */
     show?: boolean | undefined;
-    /** Called when the close button is clicked */
+    /**
+     * Called when the user requests to close the drawer via the close button
+     * or the Escape key.
+     */
     onClose?: (() => void) | undefined;
-    /** Called when the overlay is clicked */
+    /** Called when the user clicks the background overlay. */
     onOverlayClick?: (() => void) | undefined;
 }

package/e-signature/e-signature-canvas.js

@@ -1,2 +1,2 @@
-import{__awaiter as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{Canvas as t,PencilBrush as n,FabricImage as i}from"fabric";import{forwardRef as o,useRef as c,useImperativeHandle as u,useCallback as s,useEffect as a}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as l}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useDesignToken as m}from"../theme/utils/use-design-token.js";import"../theme/utils/use-media-query.js";import{signatureCanvasContainer as d,signatureCanvas as h}from"./e-signature.styles.js";const v=o(((o,v)=>{const{baseImageDataURL:p}=o,f=c(null),j=c(null),g=c(),w=c(),b=m(l.text);u(v,(()=>({clear:()=>{var e;return null===(e=g.current)||void 0===e?void 0:e.clear()},export:()=>y()})));const y=()=>{if(!g.current)return null;if(!g.current.getObjects().length)return null;return g.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},x=s((()=>e(void 0,void 0,void 0,(function*(){if(yield new Promise((e=>setTimeout(e))),f.current&&j.current&&g.current){const e=f.current.clientWidth,r=f.current.clientHeight;j.current.width=e,j.current.height=r,g.current.setDimensions({width:e,height:r}),g.current.forEachObject((e=>{g.current&&g.current.centerObject(e)}))}}))),[]);return a((()=>{if(f.current&&j.current)return g.current=new t("eSignatureCanvas"),g.current.selection=!1,g.current.isDrawingMode=!0,w.current=new n(g.current),w.current.color=b||"#000000",w.current.width=3,g.current.freeDrawingBrush=w.current,()=>{var e;null===(e=g.current)||void 0===e||e.dispose()}}),[]),a((()=>{var e;if(window)return window.addEventListener("resize",x),null===(e=screen.orientation)||void 0===e||e.addEventListener("change",x),x(),()=>{var e;window.removeEventListener("resize",x),null===(e=screen.orientation)||void 0===e||e.removeEventListener("change",x)}}),[x]),a((()=>{e(void 0,void 0,void 0,(function*(){if(p){const e=yield i.fromURL(p);g.current&&(g.current.clear(),e.selectable=!1,e.hoverCursor="default",g.current.width&&e.width&&e.scale(g.current.width/e.width),g.current.add(e),g.current.centerObject(e))}}))}),[p]),r("div",{className:d,ref:f,children:r("canvas",{className:h,id:"eSignatureCanvas",ref:j})})}));export{v as ESignatureCanvas};
+import{__awaiter as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{Canvas as t,PencilBrush as n,FabricImage as i}from"fabric";import{forwardRef as o,useRef as c,useImperativeHandle as u,useCallback as s,useEffect as a}from"react";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Colour as l}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import"../theme/utils/use-media-query.js";import{useDesignTokenOverride as m}from"../theme/utils/use-design-token-override.js";import{signatureCanvasContainer as d,signatureCanvas as h}from"./e-signature.styles.js";const v=o(((o,v)=>{const{baseImageDataURL:p}=o,f=c(null),j=c(null),g=c(),w=c(),b=m({token:l.text});u(v,(()=>({clear:()=>{var e;return null===(e=g.current)||void 0===e?void 0:e.clear()},export:()=>y()})));const y=()=>{if(!g.current)return null;if(!g.current.getObjects().length)return null;return g.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},x=s((()=>e(void 0,void 0,void 0,(function*(){if(yield new Promise((e=>setTimeout(e))),f.current&&j.current&&g.current){const e=f.current.clientWidth,r=f.current.clientHeight;j.current.width=e,j.current.height=r,g.current.setDimensions({width:e,height:r}),g.current.forEachObject((e=>{g.current&&g.current.centerObject(e)}))}}))),[]);return a((()=>{if(f.current&&j.current)return g.current=new t("eSignatureCanvas"),g.current.selection=!1,g.current.isDrawingMode=!0,w.current=new n(g.current),w.current.color=b||"#000000",w.current.width=3,g.current.freeDrawingBrush=w.current,()=>{var e;null===(e=g.current)||void 0===e||e.dispose()}}),[]),a((()=>{w.current&&b&&(w.current.color=b)}),[b]),a((()=>{var e;if(window)return window.addEventListener("resize",x),null===(e=screen.orientation)||void 0===e||e.addEventListener("change",x),x(),()=>{var e;window.removeEventListener("resize",x),null===(e=screen.orientation)||void 0===e||e.removeEventListener("change",x)}}),[x]),a((()=>{e(void 0,void 0,void 0,(function*(){if(p){const e=yield i.fromURL(p);g.current&&(g.current.clear(),e.selectable=!1,e.hoverCursor="default",g.current.width&&e.width&&e.scale(g.current.width/e.width),g.current.add(e),g.current.centerObject(e))}}))}),[p]),r("div",{className:d,ref:f,children:r("canvas",{className:h,id:"eSignatureCanvas",ref:j})})}));export{v as ESignatureCanvas};
 //# sourceMappingURL=e-signature-canvas.js.map

package/e-signature/e-signature-canvas.js.map

@@ -1 +1 @@
-{"version":3,"file":"e-signature-canvas.js","sources":["../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport type { Ref } from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\n\nimport { Colour, useDesignToken } from \"../theme\";\nimport * as styles from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n    baseImageDataURL?: string | null | undefined;\n    forwardedRef?: Ref<ESignatureCanvasRef> | undefined;\n}\n\nexport interface ESignatureCanvasRef {\n    clear: VoidFunction;\n    export: () => string | null;\n}\n\nconst Component = (\n    props: ESignatureCanvasProps,\n    ref: Ref<ESignatureCanvasRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { baseImageDataURL } = props;\n    const containerRef = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const fabricCanvas = useRef<FabricCanvas>();\n    const pencilBrush = useRef<PencilBrush>();\n    const resolvedColor = useDesignToken(Colour[\"text\"]);\n\n    // =============================================================================\n    // HOOKS\n    // =============================================================================\n    useImperativeHandle(ref, () => ({\n        clear: () => fabricCanvas.current?.clear(),\n        export: () => exportAsImage(),\n    }));\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const exportAsImage = () => {\n        if (!fabricCanvas.current) return null;\n        if (!fabricCanvas.current.getObjects().length) return null;\n        const dataURL = fabricCanvas.current.toDataURL({\n            multiplier: 1,\n            format: \"png\",\n            quality: 1,\n            enableRetinaScaling: true,\n        });\n        return dataURL;\n    };\n\n    const handleResize = useCallback(async () => {\n        // slight delay for fabricjs to update on orientation change\n        await new Promise((resolve) => setTimeout(resolve));\n        if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n            const canvasWidth = containerRef.current.clientWidth;\n            const canvasHeight = containerRef.current.clientHeight;\n            canvasRef.current.width = canvasWidth;\n            canvasRef.current.height = canvasHeight;\n            fabricCanvas.current.setDimensions({\n                width: canvasWidth,\n                height: canvasHeight,\n            });\n\n            fabricCanvas.current.forEachObject((obj) => {\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.centerObject(obj);\n                }\n            });\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    // initialise fabric and brushes\n    useEffect(() => {\n        if (containerRef.current && canvasRef.current) {\n            fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n            fabricCanvas.current.selection = false;\n            fabricCanvas.current.isDrawingMode = true;\n\n            pencilBrush.current = new PencilBrush(fabricCanvas.current);\n            pencilBrush.current.color = resolvedColor || \"#000000\";\n            pencilBrush.current.width = 3;\n\n            fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n            return () => {\n                fabricCanvas.current?.dispose();\n            };\n        }\n    }, []);\n\n    // resize\n    useEffect(() => {\n        if (window) {\n            window.addEventListener(\"resize\", handleResize);\n            screen.orientation?.addEventListener(\"change\", handleResize);\n            handleResize();\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n                screen.orientation?.removeEventListener(\"change\", handleResize);\n            };\n        }\n    }, [handleResize]);\n\n    // update base image\n    useEffect(() => {\n        const updateImage = async () => {\n            if (baseImageDataURL) {\n                const img = await FabricImage.fromURL(baseImageDataURL);\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.clear();\n                    img.selectable = false;\n                    img.hoverCursor = \"default\";\n\n                    if (fabricCanvas.current.width && img.width) {\n                        img.scale(fabricCanvas.current.width / img.width);\n                    }\n                    fabricCanvas.current.add(img);\n                    fabricCanvas.current.centerObject(img);\n                }\n            }\n        };\n\n        updateImage();\n    }, [baseImageDataURL]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div className={styles.signatureCanvasContainer} ref={containerRef}>\n            <canvas\n                className={styles.signatureCanvas}\n                id=\"eSignatureCanvas\"\n                ref={canvasRef}\n            />\n        </div>\n    );\n};\n\nexport const ESignatureCanvas = forwardRef<\n    ESignatureCanvasRef,\n    ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","resolvedColor","useDesignToken","Colour","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","className","styles.signatureCanvasContainer","children","styles.signatureCanvas","id"],"mappings":"+2BAuBA,MAiIaA,EAAmBC,GAjId,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAuB,MACtCC,EAAYD,EAA0B,MACtCE,EAAeF,IACfG,EAAcH,IACdI,EAAgBC,EAAeC,EAAa,MAKlDC,EAAoBV,GAAK,KAAA,CACrBW,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAP,EAAaQ,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKV,EAAaQ,QAAS,OAAO,KAClC,IAAKR,EAAaQ,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBZ,EAAaQ,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,GAAY,IAAWC,OAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtCzB,EAAaW,SAAWT,EAAUS,SAAWR,EAAaQ,QAAS,CACnE,MAAMgB,EAAc3B,EAAaW,QAAQiB,YACnCC,EAAe7B,EAAaW,QAAQmB,aAC1C5B,EAAUS,QAAQoB,MAAQJ,EAC1BzB,EAAUS,QAAQqB,OAASH,EAC3B1B,EAAaQ,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ1B,EAAaQ,QAAQuB,eAAeC,IAC5BhC,EAAaQ,SACbR,EAAaQ,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IA8DH,OAxDAE,GAAU,KACN,GAAIrC,EAAaW,SAAWT,EAAUS,QAWlC,OAVAR,EAAaQ,QAAU,IAAI2B,EAAa,oBACxCnC,EAAaQ,QAAQ4B,WAAY,EACjCpC,EAAaQ,QAAQ6B,eAAgB,EAErCpC,EAAYO,QAAU,IAAI8B,EAAYtC,EAAaQ,SACnDP,EAAYO,QAAQ+B,MAAQrC,GAAiB,UAC7CD,EAAYO,QAAQoB,MAAQ,EAE5B5B,EAAaQ,QAAQgC,iBAAmBvC,EAAYO,QAE7C,WACiB,QAApBD,EAAAP,EAAaQ,eAAO,IAAAD,GAAAA,EAAEkC,SAAS,CAEvC,GACD,IAGHP,GAAU,WACN,GAAIQ,OAIA,OAHAA,OAAOC,iBAAiB,SAAUzB,GAChB,QAAlBX,EAAAqC,OAAOC,mBAAW,IAAAtC,GAAAA,EAAEoC,iBAAiB,SAAUzB,GAC/CA,IACO,WACHwB,OAAOI,oBAAoB,SAAU5B,GACnB,QAAlBX,EAAAqC,OAAOC,mBAAW,IAAAtC,GAAAA,EAAEuC,oBAAoB,SAAU5B,EAAa,CAEvE,GACD,CAACA,IAGJgB,GAAU,KACyBd,OAAA,OAAA,OAAA,GAAA,YAC3B,GAAIxB,EAAkB,CAClB,MAAMmD,QAAYC,EAAYC,QAAQrD,GAClCI,EAAaQ,UACbR,EAAaQ,QAAQF,QACrByC,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdnD,EAAaQ,QAAQoB,OAASmB,EAAInB,OAClCmB,EAAIK,MAAMpD,EAAaQ,QAAQoB,MAAQmB,EAAInB,OAE/C5B,EAAaQ,QAAQ6C,IAAIN,GACzB/C,EAAaQ,QAAQyB,aAAac,GAE1C,CACJ,GAEa,GACd,CAACnD,IAMA0D,EAAA,MAAA,CAAKC,UAAWC,EAAiC7D,IAAKE,EAAY4D,SAC9DH,EAAA,SAAA,CACIC,UAAWG,EACXC,GAAG,mBACHhE,IAAKI,KAEP"}
+{"version":3,"file":"e-signature-canvas.js","sources":["../../src/e-signature/e-signature-canvas.tsx"],"sourcesContent":["import { Canvas as FabricCanvas, FabricImage, PencilBrush } from \"fabric\";\nimport type { Ref } from \"react\";\nimport {\n    forwardRef,\n    useCallback,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\n\nimport { Colour } from \"../theme\";\nimport { useDesignTokenOverride } from \"../theme/utils\";\nimport * as styles from \"./e-signature.styles\";\n\ninterface ESignatureCanvasProps {\n    baseImageDataURL?: string | null | undefined;\n    forwardedRef?: Ref<ESignatureCanvasRef> | undefined;\n}\n\nexport interface ESignatureCanvasRef {\n    clear: VoidFunction;\n    export: () => string | null;\n}\n\nconst Component = (\n    props: ESignatureCanvasProps,\n    ref: Ref<ESignatureCanvasRef>\n) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const { baseImageDataURL } = props;\n    const containerRef = useRef<HTMLDivElement>(null);\n    const canvasRef = useRef<HTMLCanvasElement>(null);\n    const fabricCanvas = useRef<FabricCanvas>();\n    const pencilBrush = useRef<PencilBrush>();\n    const resolvedColor = useDesignTokenOverride({ token: Colour[\"text\"] });\n\n    // =============================================================================\n    // HOOKS\n    // =============================================================================\n    useImperativeHandle(ref, () => ({\n        clear: () => fabricCanvas.current?.clear(),\n        export: () => exportAsImage(),\n    }));\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const exportAsImage = () => {\n        if (!fabricCanvas.current) return null;\n        if (!fabricCanvas.current.getObjects().length) return null;\n        const dataURL = fabricCanvas.current.toDataURL({\n            multiplier: 1,\n            format: \"png\",\n            quality: 1,\n            enableRetinaScaling: true,\n        });\n        return dataURL;\n    };\n\n    const handleResize = useCallback(async () => {\n        // slight delay for fabricjs to update on orientation change\n        await new Promise((resolve) => setTimeout(resolve));\n        if (containerRef.current && canvasRef.current && fabricCanvas.current) {\n            const canvasWidth = containerRef.current.clientWidth;\n            const canvasHeight = containerRef.current.clientHeight;\n            canvasRef.current.width = canvasWidth;\n            canvasRef.current.height = canvasHeight;\n            fabricCanvas.current.setDimensions({\n                width: canvasWidth,\n                height: canvasHeight,\n            });\n\n            fabricCanvas.current.forEachObject((obj) => {\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.centerObject(obj);\n                }\n            });\n        }\n    }, []);\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    // initialise fabric and brushes\n    useEffect(() => {\n        if (containerRef.current && canvasRef.current) {\n            fabricCanvas.current = new FabricCanvas(\"eSignatureCanvas\");\n            fabricCanvas.current.selection = false;\n            fabricCanvas.current.isDrawingMode = true;\n\n            pencilBrush.current = new PencilBrush(fabricCanvas.current);\n            pencilBrush.current.color = resolvedColor || \"#000000\";\n            pencilBrush.current.width = 3;\n\n            fabricCanvas.current.freeDrawingBrush = pencilBrush.current;\n\n            return () => {\n                fabricCanvas.current?.dispose();\n            };\n        }\n    }, []);\n\n    useEffect(() => {\n        if (pencilBrush.current && resolvedColor) {\n            pencilBrush.current.color = resolvedColor;\n        }\n    }, [resolvedColor]);\n\n    // resize\n    useEffect(() => {\n        if (window) {\n            window.addEventListener(\"resize\", handleResize);\n            screen.orientation?.addEventListener(\"change\", handleResize);\n            handleResize();\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n                screen.orientation?.removeEventListener(\"change\", handleResize);\n            };\n        }\n    }, [handleResize]);\n\n    // update base image\n    useEffect(() => {\n        const updateImage = async () => {\n            if (baseImageDataURL) {\n                const img = await FabricImage.fromURL(baseImageDataURL);\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.clear();\n                    img.selectable = false;\n                    img.hoverCursor = \"default\";\n\n                    if (fabricCanvas.current.width && img.width) {\n                        img.scale(fabricCanvas.current.width / img.width);\n                    }\n                    fabricCanvas.current.add(img);\n                    fabricCanvas.current.centerObject(img);\n                }\n            }\n        };\n\n        updateImage();\n    }, [baseImageDataURL]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div className={styles.signatureCanvasContainer} ref={containerRef}>\n            <canvas\n                className={styles.signatureCanvas}\n                id=\"eSignatureCanvas\"\n                ref={canvasRef}\n            />\n        </div>\n    );\n};\n\nexport const ESignatureCanvas = forwardRef<\n    ESignatureCanvasRef,\n    ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","resolvedColor","useDesignTokenOverride","token","Colour","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","className","styles.signatureCanvasContainer","children","styles.signatureCanvas","id"],"mappings":"g4BAwBA,MAuIaA,EAAmBC,GAvId,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAuB,MACtCC,EAAYD,EAA0B,MACtCE,EAAeF,IACfG,EAAcH,IACdI,EAAgBC,EAAuB,CAAEC,MAAOC,EAAa,OAKnEC,EAAoBX,GAAK,KAAA,CACrBY,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAR,EAAaS,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKX,EAAaS,QAAS,OAAO,KAClC,IAAKT,EAAaS,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBb,EAAaS,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,GAAY,IAAWC,OAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtC1B,EAAaY,SAAWV,EAAUU,SAAWT,EAAaS,QAAS,CACnE,MAAMgB,EAAc5B,EAAaY,QAAQiB,YACnCC,EAAe9B,EAAaY,QAAQmB,aAC1C7B,EAAUU,QAAQoB,MAAQJ,EAC1B1B,EAAUU,QAAQqB,OAASH,EAC3B3B,EAAaS,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ3B,EAAaS,QAAQuB,eAAeC,IAC5BjC,EAAaS,SACbT,EAAaS,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IAoEH,OA9DAE,GAAU,KACN,GAAItC,EAAaY,SAAWV,EAAUU,QAWlC,OAVAT,EAAaS,QAAU,IAAI2B,EAAa,oBACxCpC,EAAaS,QAAQ4B,WAAY,EACjCrC,EAAaS,QAAQ6B,eAAgB,EAErCrC,EAAYQ,QAAU,IAAI8B,EAAYvC,EAAaS,SACnDR,EAAYQ,QAAQ+B,MAAQtC,GAAiB,UAC7CD,EAAYQ,QAAQoB,MAAQ,EAE5B7B,EAAaS,QAAQgC,iBAAmBxC,EAAYQ,QAE7C,WACiB,QAApBD,EAAAR,EAAaS,eAAO,IAAAD,GAAAA,EAAEkC,SAAS,CAEvC,GACD,IAEHP,GAAU,KACFlC,EAAYQ,SAAWP,IACvBD,EAAYQ,QAAQ+B,MAAQtC,EAChC,GACD,CAACA,IAGJiC,GAAU,WACN,GAAIQ,OAIA,OAHAA,OAAOC,iBAAiB,SAAUzB,GAChB,QAAlBX,EAAAqC,OAAOC,mBAAW,IAAAtC,GAAAA,EAAEoC,iBAAiB,SAAUzB,GAC/CA,IACO,WACHwB,OAAOI,oBAAoB,SAAU5B,GACnB,QAAlBX,EAAAqC,OAAOC,mBAAW,IAAAtC,GAAAA,EAAEuC,oBAAoB,SAAU5B,EAAa,CAEvE,GACD,CAACA,IAGJgB,GAAU,KACyBd,OAAA,OAAA,OAAA,GAAA,YAC3B,GAAIzB,EAAkB,CAClB,MAAMoD,QAAYC,EAAYC,QAAQtD,GAClCI,EAAaS,UACbT,EAAaS,QAAQF,QACrByC,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdpD,EAAaS,QAAQoB,OAASmB,EAAInB,OAClCmB,EAAIK,MAAMrD,EAAaS,QAAQoB,MAAQmB,EAAInB,OAE/C7B,EAAaS,QAAQ6C,IAAIN,GACzBhD,EAAaS,QAAQyB,aAAac,GAE1C,CACJ,GAEa,GACd,CAACpD,IAMA2D,EAAA,MAAA,CAAKC,UAAWC,EAAiC9D,IAAKE,EAAY6D,SAC9DH,EAAA,SAAA,CACIC,UAAWG,EACXC,GAAG,mBACHjE,IAAKI,KAEP"}

package/e-signature/e-signature.d.ts

@@ -1,2 +1,7 @@
 import type { EsignatureProps } from "./types";
+/**
+ * A field that lets users draw and save a signature.
+ *
+ * Use in forms that require a handwritten signature.
+ */
 export declare const ESignature: (props: EsignatureProps) => import("react/jsx-runtime").JSX.Element;

package/e-signature/e-signature.js.map

@@ -1 +1 @@
-{"version":3,"file":"e-signature.js","sources":["../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { DashedBorder } from \"../dashed-border\";\nimport { Modal } from \"../modal\";\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Radius,\n    useMaxWidthMediaQuery,\n    useMediaQuery,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n    default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\nexport const ESignature = (props: EsignatureProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        description,\n        id,\n        loadingProgress,\n        loadingLabel = \"Uploading...\",\n        onChange,\n        value,\n        disabled,\n        ...otherProps\n    } = props;\n    const [showModal, setShowModal] = useState(false);\n    const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n    const [dataURL, setDataURL] = useState<string | null | undefined>(value);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const mobileBreakpoint = useResolvedBreakpointToken(Breakpoint[\"sm-max\"]);\n    const isMobileLandscape = useMediaQuery({\n        clauses: [\n            {\n                feature: \"orientation\",\n                value: \"landscape\",\n            },\n            {\n                feature: \"max-height\",\n                value: mobileBreakpoint,\n            },\n        ],\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClearDrawing = () => {\n        eSignatureCanvasRef.current?.clear();\n    };\n\n    const handleClickSave = () => {\n        if (eSignatureCanvasRef.current) {\n            const dataURL = eSignatureCanvasRef.current.export();\n            setDataURL(dataURL);\n            setShowModal(false);\n            onChange?.(dataURL);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setDataURL(value);\n    }, [value]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSignatureArea = () => {\n        if (!dataURL) {\n            return (\n                <Button\n                    className={styles.addSignatureButton}\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    aria-label=\"Add signature\"\n                    id={id}\n                    onClick={() => setShowModal(true)}\n                    disabled={disabled}\n                >\n                    Add signature\n                </Button>\n            );\n        }\n\n        return (\n            <>\n                <img\n                    className={styles.signaturePreviewImage}\n                    src={dataURL}\n                    alt=\"Signature preview\"\n                />\n                <Button\n                    className={styles.editSignatureButton}\n                    styleType=\"light\"\n                    onClick={() => setShowModal(true)}\n                    id={id}\n                    icon={<PencilIcon />}\n                    aria-label=\"Edit signature\"\n                    disabled={disabled}\n                />\n            </>\n        );\n    };\n\n    const renderLoadingIndicator = () => {\n        return (\n            <div className={styles.progressBox}>\n                {loadingLabel && (\n                    <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n                )}\n                <ProgressBar\n                    progress={loadingProgress ?? 0}\n                    data-testid={`${id || \"e-signature\"}-progress-bar`}\n                />\n            </div>\n        );\n    };\n\n    const renderModal = () => {\n        return (\n            <Modal\n                className={styles.scrollableModal}\n                data-testid=\"signature-modal\"\n                show={showModal}\n            >\n                <div\n                    className={styles.growContainer}\n                    data-mobile-landscape={isMobileLandscape}\n                >\n                    <Modal.Box\n                        className={styles.modalBox}\n                        data-mobile-landscape={isMobileLandscape}\n                        onClose={() => setShowModal(false)}\n                    >\n                        <h2\n                            className={styles.modalTitle}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            Signature\n                        </h2>\n                        <div\n                            className={styles.eSignatureContainer}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            <div\n                                className={styles.eSignatureDrawable}\n                                data-mobile-landscape={isMobileLandscape}\n                            >\n                                <div\n                                    className={styles.signatureLine}\n                                    data-mobile-landscape={isMobileLandscape}\n                                />\n                                <Suspense fallback={null}>\n                                    {showModal && (\n                                        <ESignatureCanvas\n                                            ref={eSignatureCanvasRef}\n                                            baseImageDataURL={dataURL}\n                                        />\n                                    )}\n                                </Suspense>\n                            </div>\n                        </div>\n                        <div\n                            className={styles.modalButtons}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            <Button\n                                className={styles.modalActionButton}\n                                data-mobile-landscape={isMobileLandscape}\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                styleType={\n                                    isMobile && !isMobileLandscape\n                                        ? \"light\"\n                                        : \"link\"\n                                }\n                                icon={<EraserIcon />}\n                                onClick={handleClearDrawing}\n                            >\n                                Clear\n                            </Button>\n                            <Button\n                                className={styles.modalActionButton}\n                                data-mobile-landscape={isMobileLandscape}\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                onClick={handleClickSave}\n                            >\n                                Save\n                            </Button>\n                        </div>\n                    </Modal.Box>\n                </div>\n            </Modal>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) return null;\n        return (\n            <Typography.BodySM className={styles.instructions}>\n                {description}\n            </Typography.BodySM>\n        );\n    };\n\n    return (\n        <div {...otherProps}>\n            <DashedBorder\n                className={styles.signatureArea}\n                thickness={Border[\"width-040\"]}\n                radius={Radius[\"sm\"]}\n                colour={disabled ? Colour[\"border-disabled\"] : Colour[\"border\"]}\n                backgroundColor={\n                    disabled ? Colour[\"bg-disabled\"] : Colour[\"bg\"]\n                }\n            >\n                {typeof loadingProgress === \"number\"\n                    ? renderLoadingIndicator()\n                    : renderSignatureArea()}\n            </DashedBorder>\n            {renderModal()}\n            {renderDescription()}\n        </div>\n    );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","import","ESignature","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","isMobile","useMaxWidthMediaQuery","mobileBreakpoint","useResolvedBreakpointToken","Breakpoint","isMobileLandscape","useMediaQuery","clauses","feature","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","DashedBorder","className","styles.signatureArea","thickness","Border","radius","Radius","colour","Colour","backgroundColor","styles.progressBox","Typography","BodyMD","ProgressBar","progress","_Fragment","styles.signaturePreviewImage","src","alt","Button","styles.editSignatureButton","styleType","onClick","icon","PencilIcon","styles.addSignatureButton","type","Modal","styles.scrollableModal","show","styles.growContainer","Box","styles.modalBox","onClose","styles.modalTitle","styles.eSignatureContainer","styles.eSignatureDrawable","styles.signatureLine","Suspense","fallback","ref","baseImageDataURL","styles.modalButtons","styles.modalActionButton","sizeType","EraserIcon","BodySM","styles.instructions"],"mappings":"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"}
+{"version":3,"file":"e-signature.js","sources":["../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { DashedBorder } from \"../dashed-border\";\nimport { Modal } from \"../modal\";\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Radius,\n    useMaxWidthMediaQuery,\n    useMediaQuery,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n    default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\n/**\n * A field that lets users draw and save a signature.\n *\n * Use in forms that require a handwritten signature.\n */\nexport const ESignature = (props: EsignatureProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        description,\n        id,\n        loadingProgress,\n        loadingLabel = \"Uploading...\",\n        onChange,\n        value,\n        disabled,\n        ...otherProps\n    } = props;\n    const [showModal, setShowModal] = useState(false);\n    const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n    const [dataURL, setDataURL] = useState<string | null | undefined>(value);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const mobileBreakpoint = useResolvedBreakpointToken(Breakpoint[\"sm-max\"]);\n    const isMobileLandscape = useMediaQuery({\n        clauses: [\n            {\n                feature: \"orientation\",\n                value: \"landscape\",\n            },\n            {\n                feature: \"max-height\",\n                value: mobileBreakpoint,\n            },\n        ],\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClearDrawing = () => {\n        eSignatureCanvasRef.current?.clear();\n    };\n\n    const handleClickSave = () => {\n        if (eSignatureCanvasRef.current) {\n            const dataURL = eSignatureCanvasRef.current.export();\n            setDataURL(dataURL);\n            setShowModal(false);\n            onChange?.(dataURL);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setDataURL(value);\n    }, [value]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSignatureArea = () => {\n        if (!dataURL) {\n            return (\n                <Button\n                    className={styles.addSignatureButton}\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    aria-label=\"Add signature\"\n                    id={id}\n                    onClick={() => setShowModal(true)}\n                    disabled={disabled}\n                >\n                    Add signature\n                </Button>\n            );\n        }\n\n        return (\n            <>\n                <img\n                    className={styles.signaturePreviewImage}\n                    src={dataURL}\n                    alt=\"Signature preview\"\n                />\n                <Button\n                    className={styles.editSignatureButton}\n                    styleType=\"light\"\n                    onClick={() => setShowModal(true)}\n                    id={id}\n                    icon={<PencilIcon />}\n                    aria-label=\"Edit signature\"\n                    disabled={disabled}\n                />\n            </>\n        );\n    };\n\n    const renderLoadingIndicator = () => {\n        return (\n            <div className={styles.progressBox}>\n                {loadingLabel && (\n                    <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n                )}\n                <ProgressBar\n                    progress={loadingProgress ?? 0}\n                    data-testid={`${id || \"e-signature\"}-progress-bar`}\n                />\n            </div>\n        );\n    };\n\n    const renderModal = () => {\n        return (\n            <Modal\n                className={styles.scrollableModal}\n                data-testid=\"signature-modal\"\n                show={showModal}\n            >\n                <div\n                    className={styles.growContainer}\n                    data-mobile-landscape={isMobileLandscape}\n                >\n                    <Modal.Box\n                        className={styles.modalBox}\n                        data-mobile-landscape={isMobileLandscape}\n                        onClose={() => setShowModal(false)}\n                    >\n                        <h2\n                            className={styles.modalTitle}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            Signature\n                        </h2>\n                        <div\n                            className={styles.eSignatureContainer}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            <div\n                                className={styles.eSignatureDrawable}\n                                data-mobile-landscape={isMobileLandscape}\n                            >\n                                <div\n                                    className={styles.signatureLine}\n                                    data-mobile-landscape={isMobileLandscape}\n                                />\n                                <Suspense fallback={null}>\n                                    {showModal && (\n                                        <ESignatureCanvas\n                                            ref={eSignatureCanvasRef}\n                                            baseImageDataURL={dataURL}\n                                        />\n                                    )}\n                                </Suspense>\n                            </div>\n                        </div>\n                        <div\n                            className={styles.modalButtons}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            <Button\n                                className={styles.modalActionButton}\n                                data-mobile-landscape={isMobileLandscape}\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                styleType={\n                                    isMobile && !isMobileLandscape\n                                        ? \"light\"\n                                        : \"link\"\n                                }\n                                icon={<EraserIcon />}\n                                onClick={handleClearDrawing}\n                            >\n                                Clear\n                            </Button>\n                            <Button\n                                className={styles.modalActionButton}\n                                data-mobile-landscape={isMobileLandscape}\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                onClick={handleClickSave}\n                            >\n                                Save\n                            </Button>\n                        </div>\n                    </Modal.Box>\n                </div>\n            </Modal>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) return null;\n        return (\n            <Typography.BodySM className={styles.instructions}>\n                {description}\n            </Typography.BodySM>\n        );\n    };\n\n    return (\n        <div {...otherProps}>\n            <DashedBorder\n                className={styles.signatureArea}\n                thickness={Border[\"width-040\"]}\n                radius={Radius[\"sm\"]}\n                colour={disabled ? Colour[\"border-disabled\"] : Colour[\"border\"]}\n                backgroundColor={\n                    disabled ? Colour[\"bg-disabled\"] : Colour[\"bg\"]\n                }\n            >\n                {typeof loadingProgress === \"number\"\n                    ? renderLoadingIndicator()\n                    : renderSignatureArea()}\n            </DashedBorder>\n            {renderModal()}\n            {renderDescription()}\n        </div>\n    );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","import","ESignature","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","isMobile","useMaxWidthMediaQuery","mobileBreakpoint","useResolvedBreakpointToken","Breakpoint","isMobileLandscape","useMediaQuery","clauses","feature","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","DashedBorder","className","styles.signatureArea","thickness","Border","radius","Radius","colour","Colour","backgroundColor","styles.progressBox","Typography","BodyMD","ProgressBar","progress","_Fragment","styles.signaturePreviewImage","src","alt","Button","styles.editSignatureButton","styleType","onClick","icon","PencilIcon","styles.addSignatureButton","type","Modal","styles.scrollableModal","show","styles.growContainer","Box","styles.modalBox","onClose","styles.modalTitle","styles.eSignatureContainer","styles.eSignatureDrawable","styles.signatureLine","Suspense","fallback","ref","baseImageDataURL","styles.modalButtons","styles.modalActionButton","sizeType","EraserIcon","BodySM","styles.instructions"],"mappings":"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"}

package/e-signature/e-signature.styles_lukd9f.css

@@ -1,4 +1,4 @@
-.sf6ex5f{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;height:14.125rem;}
+@layer fds{.sf6ex5f{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-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;height:14.125rem;}
 .ar63c10{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 var(--fds-spacing-20);}.ar63c10:disabled{border-color:var(--fds-colour-border-strong);}
 .ewm2h5q{position:absolute;top:var(--fds-spacing-16);right:var(--fds-spacing-16);}.ewm2h5q:disabled{border-color:var(--fds-colour-border-strong);}
 .s10kgaon{display:block;object-fit:contain;object-position:center;width:calc(100% - (3rem + var(--fds-spacing-16)) * 2);height:100%;}[data-fds-theme-mode="dark"] .s10kgaon{-webkit-filter:invert(1);filter:invert(1);}
@@ -14,4 +14,4 @@
 .mkkmrzr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;margin-top:var(--fds-spacing-16);}:where(body.fds-breakpoint-sm-max) .mkkmrzr{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;margin:var(--fds-spacing-16) var(--fds-spacing-24) var(--fds-spacing-48);gap:var(--fds-spacing-16);}.mkkmrzr[data-mobile-landscape="true"]{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin:var(--fds-spacing-16) var(--fds-spacing-20);}
 .m19bpnkq{width:8.5rem;}:where(body.fds-breakpoint-sm-max) .m19bpnkq{width:100%;}.m19bpnkq[data-mobile-landscape="true"]{height:2.5rem;}
 .s1ngo83b{width:100%;height:100%;overflow:hidden;}
-.s13sbvhj{cursor:crosshair;}[data-fds-theme-mode="dark"] .s13sbvhj{-webkit-filter:invert(1);filter:invert(1);}
+.s13sbvhj{cursor:crosshair;}[data-fds-theme-mode="dark"] .s13sbvhj{-webkit-filter:invert(1);filter:invert(1);}}

package/e-signature/types.d.ts

@@ -1,12 +1,34 @@
+/** Props for the `ESignature` signature-capture field. */
 export interface EsignatureProps {
     className?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
     disabled?: boolean | undefined;
+    /**
+     * Text rendered below the signature area.
+     */
     description?: string | undefined;
+    /**
+     * Label displayed alongside the upload progress bar.
+     *
+     * @default "Uploading..."
+     */
     loadingLabel?: string | undefined;
+    /**
+     * When set to a number, replaces the signature area with an upload progress
+     * indicator. Remove or set to `undefined` to restore the signature area.
+     */
     loadingProgress?: number | undefined;
-    /** image dataURL */
+    /**
+     * The current signature as a base64 image dataURL.
+     * Pass `undefined` or omit to render the empty "Add signature" state.
+     */
     value?: string | undefined;
+    /**
+     * Called when the user saves a signature.
+     *
+     * @param value The new signature as a base64 image dataURL, or `null` if
+     * the canvas was empty when saved.
+     */
     onChange?: ((value: string | null) => void) | undefined;
 }

package/error-display/error-display.d.ts

@@ -1,2 +1,9 @@
 import type { ErrorDisplayProps } from "./types";
+/**
+ * Displays a predefined error or status state with an illustration, title,
+ * description, and optional action button.
+ *
+ * Use `ErrorDisplay` to communicate HTTP error codes, session lifecycle states,
+ * maintenance windows, and other system-level statuses to users.
+ */
 export declare const ErrorDisplay: ({ type, img, title, description, actionButton, additionalProps, imageOnly, illustrationScheme, className, ...otherProps }: ErrorDisplayProps) => import("react/jsx-runtime").JSX.Element | null;

package/error-display/error-display.js.map

@@ -1 +1 @@
-{"version":3,"file":"error-display.js","sources":["../../src/error-display/error-display.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useContext } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./error-display.styles\";\nimport { getErrorDisplayData } from \"./error-display-data\";\nimport { InactivityTimer } from \"./inactivity-timer\";\nimport type {\n    ErrorDisplayProps,\n    InactivityAdditionalAttributes,\n    MaintenanceAdditionalAttributes,\n} from \"./types\";\n\nexport const ErrorDisplay = ({\n    type,\n    img,\n    title,\n    description,\n    actionButton,\n    additionalProps,\n    imageOnly,\n    illustrationScheme,\n    className,\n    ...otherProps\n}: ErrorDisplayProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const defaultAssets = getErrorDisplayData(\n        type,\n        illustrationScheme || theme?.theme || \"lifesg\"\n    );\n    const inactivityAttrs =\n        type === \"inactivity\"\n            ? (additionalProps as InactivityAdditionalAttributes | undefined)\n            : undefined;\n\n    const secondsLeft = inactivityAttrs?.secondsLeft;\n    const reminderInterval = inactivityAttrs?.reminderInterval;\n    const testId = otherProps[\"data-testid\"] || \"error-display\";\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCustomDescription = (): string | JSX.Element | undefined => {\n        switch (type) {\n            case \"maintenance\": {\n                const typecastProps =\n                    additionalProps as MaintenanceAdditionalAttributes;\n                return additionalProps && typecastProps.dateString\n                    ? defaultAssets?.renderDescription?.(typecastProps)\n                    : description || undefined;\n            }\n            case \"inactivity\": {\n                const typecastProps =\n                    additionalProps as InactivityAdditionalAttributes;\n                return additionalProps && typecastProps.secondsLeft\n                    ? defaultAssets?.renderDescription?.(typecastProps)\n                    : description || undefined;\n            }\n            default:\n                return description || undefined;\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!defaultAssets) {\n        return null;\n    }\n\n    const renderActionButton = () => {\n        const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n            children: \"Proceed\",\n            ...actionButton,\n        };\n\n        return <Button className={styles.actionButton} {...buttonProps} />;\n    };\n\n    const updatedAssets = {\n        ...defaultAssets,\n        ...(img && { img }),\n        ...(title && { title }),\n        ...(getCustomDescription() && { description: getCustomDescription() }),\n    };\n\n    const renderContentDisplay = () => {\n        if (updatedAssets.title || updatedAssets.description) {\n            return (\n                <div className={styles.textContainer}>\n                    {updatedAssets.title &&\n                        (typeof updatedAssets.title === \"string\" ? (\n                            <Typography.HeadingMD\n                                className={styles.title}\n                                data-testid={`${testId}--title`}\n                                data-id=\"error-display-title\"\n                                as=\"h2\"\n                                weight=\"semibold\"\n                            >\n                                {updatedAssets.title}\n                            </Typography.HeadingMD>\n                        ) : (\n                            updatedAssets.title\n                        ))}\n                    {updatedAssets.description && (\n                        <Markup\n                            className={styles.descriptionContainer}\n                            data-testid={`${testId}--description`}\n                            data-id=\"error-display-description\"\n                            baseTextSize=\"body-baseline\"\n                        >\n                            {typeof updatedAssets.description === \"string\" ? (\n                                <p>{updatedAssets.description}</p>\n                            ) : (\n                                updatedAssets.description\n                            )}\n                        </Markup>\n                    )}\n                </div>\n            );\n        }\n\n        return null;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(styles.container, className)}\n        >\n            {type === \"inactivity\" && (\n                <InactivityTimer\n                    secondsLeft={secondsLeft}\n                    reminderInterval={reminderInterval}\n                    imageOnly={imageOnly}\n                    hasCustomDescription={!!description}\n                />\n            )}\n            <img\n                {...updatedAssets.img}\n                alt=\"\"\n                data-id=\"error-display-image\"\n                className={clsx(styles.img, updatedAssets.img?.className)}\n            />\n            {!imageOnly && renderContentDisplay()}\n            {actionButton && renderActionButton()}\n        </div>\n    );\n};\n"],"names":["ErrorDisplay","_a","type","img","title","description","actionButton","additionalProps","imageOnly","illustrationScheme","className","otherProps","__rest","theme","useContext","ThemeContext","defaultAssets","getErrorDisplayData","inactivityAttrs","undefined","secondsLeft","reminderInterval","testId","getCustomDescription","typecastProps","dateString","renderDescription","call","_b","updatedAssets","Object","assign","_jsxs","clsx","styles.container","children","_jsx","InactivityTimer","hasCustomDescription","alt","styles.img","styles.textContainer","Typography","HeadingMD","styles.title","as","weight","Markup","styles.descriptionContainer","baseTextSize","buttonProps","Button","styles.actionButton","renderActionButton"],"mappings":"umBAiBO,MAAMA,EAAgBC,WAAAC,KACzBA,EAAIC,IACJA,EAAGC,MACHA,EAAKC,YACLA,EAAWC,aACXA,EAAYC,gBACZA,EAAeC,UACfA,EAASC,mBACTA,EAAkBC,UAClBA,KACGC,EAAUC,EAAAX,EAVY,CAAA,OAAA,MAAA,QAAA,cAAA,eAAA,kBAAA,YAAA,qBAAA,cAezB,MAAMY,EAAQC,EAAWC,GACnBC,EAAgBC,EAClBf,EACAO,IAAsBI,aAAK,EAALA,EAAOA,QAAS,UAEpCK,EACO,eAAThB,EACOK,OACDY,EAEJC,EAAcF,aAAe,EAAfA,EAAiBE,YAC/BC,EAAmBH,aAAe,EAAfA,EAAiBG,iBACpCC,EAASX,EAAW,gBAAkB,gBAKtCY,EAAuB,aACzB,OAAQrB,GACJ,IAAK,cAAe,CAChB,MAAMsB,EACFjB,EACJ,OAAOA,GAAmBiB,EAAcC,WACF,QAAhCxB,EAAAe,aAAa,EAAbA,EAAeU,yBAAiB,IAAAzB,OAAA,EAAAA,EAAA0B,KAAAX,EAAGQ,GACnCnB,QAAec,CACzB,CACA,IAAK,aAAc,CACf,MAAMK,EACFjB,EACJ,OAAOA,GAAmBiB,EAAcJ,YACF,QAAhCQ,EAAAZ,aAAa,EAAbA,EAAeU,yBAAiB,IAAAE,OAAA,EAAAA,EAAAD,KAAAX,EAAGQ,GACnCnB,QAAec,CACzB,CACA,QACI,OAAOd,QAAec,IAOlC,IAAKH,EACD,OAAO,KAGX,MASMa,EAAaC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACZf,GACCb,GAAO,KAAEA,IACTC,GAAS,CAAAA,MAAEA,IACXmB,KAA0B,CAAElB,YAAakB,MA0CjD,OACIS,EAAA,MAAAF,OAAAC,OAAA,CAAA,EACQpB,iBACSW,EACbZ,UAAWuB,EAAKC,EAAkBxB,GAAUyB,SAAA,CAElC,eAATjC,GACGkC,EAACC,EAAe,CACZjB,YAAaA,EACbC,iBAAkBA,EAClBb,UAAWA,EACX8B,uBAAwBjC,IAGhC+B,EAAA,MAAAN,OAAAC,OAAA,CAAA,EACQF,EAAc1B,IAAG,CACrBoC,IAAI,GAAE,UACE,sBACR7B,UAAWuB,EAAKO,EAA6B,QAAjBZ,EAAAC,EAAc1B,WAAG,IAAAyB,OAAA,EAAAA,EAAElB,eAEjDF,IA1DFqB,EAAczB,OAASyB,EAAcxB,YAEjC2B,EAAA,MAAA,CAAKtB,UAAW+B,EAAoBN,SAAA,CAC/BN,EAAczB,QACqB,iBAAxByB,EAAczB,MAClBgC,EAACM,EAAWC,WACRjC,UAAWkC,EAAY,cACV,GAAGtB,qBACR,sBACRuB,GAAG,KACHC,OAAO,WAAUX,SAEhBN,EAAczB,QAGnByB,EAAmB,OAE1BA,EAAcxB,aACX+B,EAACW,GACGrC,UAAWsC,EAA2B,cACzB,GAAG1B,2BACR,4BACR2B,aAAa,gBAAed,SAEU,iBAA9BN,EAAcxB,YAClB+B,EAAA,IAAA,CAAAD,SAAIN,EAAcxB,cAElBwB,EAAyB,iBAQ1C,MAwBFvB,GA5EkB,MACvB,MAAM4C,iBACFf,SAAU,WACP7B,GAGP,OAAO8B,EAACe,EAAMrB,OAAAC,OAAA,CAACrB,UAAW0C,GAAyBF,GAAe,EAsE7CG,MACf"}
+{"version":3,"file":"error-display.js","sources":["../../src/error-display/error-display.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport type React from \"react\";\nimport { useContext } from \"react\";\n\nimport { Button } from \"../button\";\nimport { Markup } from \"../markup\";\nimport { ThemeContext } from \"../theme/theme-provider/context\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./error-display.styles\";\nimport { getErrorDisplayData } from \"./error-display-data\";\nimport { InactivityTimer } from \"./inactivity-timer\";\nimport type {\n    ErrorDisplayProps,\n    InactivityAdditionalAttributes,\n    MaintenanceAdditionalAttributes,\n} from \"./types\";\n\n/**\n * Displays a predefined error or status state with an illustration, title,\n * description, and optional action button.\n *\n * Use `ErrorDisplay` to communicate HTTP error codes, session lifecycle states,\n * maintenance windows, and other system-level statuses to users.\n */\nexport const ErrorDisplay = ({\n    type,\n    img,\n    title,\n    description,\n    actionButton,\n    additionalProps,\n    imageOnly,\n    illustrationScheme,\n    className,\n    ...otherProps\n}: ErrorDisplayProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const theme = useContext(ThemeContext);\n    const defaultAssets = getErrorDisplayData(\n        type,\n        illustrationScheme || theme?.theme || \"lifesg\"\n    );\n    const inactivityAttrs =\n        type === \"inactivity\"\n            ? (additionalProps as InactivityAdditionalAttributes | undefined)\n            : undefined;\n\n    const secondsLeft = inactivityAttrs?.secondsLeft;\n    const reminderInterval = inactivityAttrs?.reminderInterval;\n    const testId = otherProps[\"data-testid\"] || \"error-display\";\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const getCustomDescription = (): string | JSX.Element | undefined => {\n        switch (type) {\n            case \"maintenance\": {\n                const typecastProps =\n                    additionalProps as MaintenanceAdditionalAttributes;\n                return additionalProps && typecastProps.dateString\n                    ? defaultAssets?.renderDescription?.(typecastProps)\n                    : description || undefined;\n            }\n            case \"inactivity\": {\n                const typecastProps =\n                    additionalProps as InactivityAdditionalAttributes;\n                return additionalProps && typecastProps.secondsLeft\n                    ? defaultAssets?.renderDescription?.(typecastProps)\n                    : description || undefined;\n            }\n            default:\n                return description || undefined;\n        }\n    };\n\n    // =============================================================================\n    // RENDER\n    // =============================================================================\n    if (!defaultAssets) {\n        return null;\n    }\n\n    const renderActionButton = () => {\n        const buttonProps: React.ButtonHTMLAttributes<HTMLButtonElement> = {\n            children: \"Proceed\",\n            ...actionButton,\n        };\n\n        return <Button className={styles.actionButton} {...buttonProps} />;\n    };\n\n    const updatedAssets = {\n        ...defaultAssets,\n        ...(img && { img }),\n        ...(title && { title }),\n        ...(getCustomDescription() && { description: getCustomDescription() }),\n    };\n\n    const renderContentDisplay = () => {\n        if (updatedAssets.title || updatedAssets.description) {\n            return (\n                <div className={styles.textContainer}>\n                    {updatedAssets.title &&\n                        (typeof updatedAssets.title === \"string\" ? (\n                            <Typography.HeadingMD\n                                className={styles.title}\n                                data-testid={`${testId}--title`}\n                                data-id=\"error-display-title\"\n                                as=\"h2\"\n                                weight=\"semibold\"\n                            >\n                                {updatedAssets.title}\n                            </Typography.HeadingMD>\n                        ) : (\n                            updatedAssets.title\n                        ))}\n                    {updatedAssets.description && (\n                        <Markup\n                            className={styles.descriptionContainer}\n                            data-testid={`${testId}--description`}\n                            data-id=\"error-display-description\"\n                            baseTextSize=\"body-baseline\"\n                        >\n                            {typeof updatedAssets.description === \"string\" ? (\n                                <p>{updatedAssets.description}</p>\n                            ) : (\n                                updatedAssets.description\n                            )}\n                        </Markup>\n                    )}\n                </div>\n            );\n        }\n\n        return null;\n    };\n\n    return (\n        <div\n            {...otherProps}\n            data-testid={testId}\n            className={clsx(styles.container, className)}\n        >\n            {type === \"inactivity\" && (\n                <InactivityTimer\n                    secondsLeft={secondsLeft}\n                    reminderInterval={reminderInterval}\n                    imageOnly={imageOnly}\n                    hasCustomDescription={!!description}\n                />\n            )}\n            <img\n                {...updatedAssets.img}\n                alt=\"\"\n                data-id=\"error-display-image\"\n                className={clsx(styles.img, updatedAssets.img?.className)}\n            />\n            {!imageOnly && renderContentDisplay()}\n            {actionButton && renderActionButton()}\n        </div>\n    );\n};\n"],"names":["ErrorDisplay","_a","type","img","title","description","actionButton","additionalProps","imageOnly","illustrationScheme","className","otherProps","__rest","theme","useContext","ThemeContext","defaultAssets","getErrorDisplayData","inactivityAttrs","undefined","secondsLeft","reminderInterval","testId","getCustomDescription","typecastProps","dateString","renderDescription","call","_b","updatedAssets","Object","assign","_jsxs","clsx","styles.container","children","_jsx","InactivityTimer","hasCustomDescription","alt","styles.img","styles.textContainer","Typography","HeadingMD","styles.title","as","weight","Markup","styles.descriptionContainer","baseTextSize","buttonProps","Button","styles.actionButton","renderActionButton"],"mappings":"umBAwBO,MAAMA,EAAgBC,WAAAC,KACzBA,EAAIC,IACJA,EAAGC,MACHA,EAAKC,YACLA,EAAWC,aACXA,EAAYC,gBACZA,EAAeC,UACfA,EAASC,mBACTA,EAAkBC,UAClBA,KACGC,EAAUC,EAAAX,EAVY,CAAA,OAAA,MAAA,QAAA,cAAA,eAAA,kBAAA,YAAA,qBAAA,cAezB,MAAMY,EAAQC,EAAWC,GACnBC,EAAgBC,EAClBf,EACAO,IAAsBI,aAAK,EAALA,EAAOA,QAAS,UAEpCK,EACO,eAAThB,EACOK,OACDY,EAEJC,EAAcF,aAAe,EAAfA,EAAiBE,YAC/BC,EAAmBH,aAAe,EAAfA,EAAiBG,iBACpCC,EAASX,EAAW,gBAAkB,gBAKtCY,EAAuB,aACzB,OAAQrB,GACJ,IAAK,cAAe,CAChB,MAAMsB,EACFjB,EACJ,OAAOA,GAAmBiB,EAAcC,WACF,QAAhCxB,EAAAe,aAAa,EAAbA,EAAeU,yBAAiB,IAAAzB,OAAA,EAAAA,EAAA0B,KAAAX,EAAGQ,GACnCnB,QAAec,CACzB,CACA,IAAK,aAAc,CACf,MAAMK,EACFjB,EACJ,OAAOA,GAAmBiB,EAAcJ,YACF,QAAhCQ,EAAAZ,aAAa,EAAbA,EAAeU,yBAAiB,IAAAE,OAAA,EAAAA,EAAAD,KAAAX,EAAGQ,GACnCnB,QAAec,CACzB,CACA,QACI,OAAOd,QAAec,IAOlC,IAAKH,EACD,OAAO,KAGX,MASMa,EAAaC,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACZf,GACCb,GAAO,KAAEA,IACTC,GAAS,CAAAA,MAAEA,IACXmB,KAA0B,CAAElB,YAAakB,MA0CjD,OACIS,EAAA,MAAAF,OAAAC,OAAA,CAAA,EACQpB,iBACSW,EACbZ,UAAWuB,EAAKC,EAAkBxB,GAAUyB,SAAA,CAElC,eAATjC,GACGkC,EAACC,EAAe,CACZjB,YAAaA,EACbC,iBAAkBA,EAClBb,UAAWA,EACX8B,uBAAwBjC,IAGhC+B,EAAA,MAAAN,OAAAC,OAAA,CAAA,EACQF,EAAc1B,IAAG,CACrBoC,IAAI,GAAE,UACE,sBACR7B,UAAWuB,EAAKO,EAA6B,QAAjBZ,EAAAC,EAAc1B,WAAG,IAAAyB,OAAA,EAAAA,EAAElB,eAEjDF,IA1DFqB,EAAczB,OAASyB,EAAcxB,YAEjC2B,EAAA,MAAA,CAAKtB,UAAW+B,EAAoBN,SAAA,CAC/BN,EAAczB,QACqB,iBAAxByB,EAAczB,MAClBgC,EAACM,EAAWC,WACRjC,UAAWkC,EAAY,cACV,GAAGtB,qBACR,sBACRuB,GAAG,KACHC,OAAO,WAAUX,SAEhBN,EAAczB,QAGnByB,EAAmB,OAE1BA,EAAcxB,aACX+B,EAACW,GACGrC,UAAWsC,EAA2B,cACzB,GAAG1B,2BACR,4BACR2B,aAAa,gBAAed,SAEU,iBAA9BN,EAAcxB,YAClB+B,EAAA,IAAA,CAAAD,SAAIN,EAAcxB,cAElBwB,EAAyB,iBAQ1C,MAwBFvB,GA5EkB,MACvB,MAAM4C,iBACFf,SAAU,WACP7B,GAGP,OAAO8B,EAACe,EAAMrB,OAAAC,OAAA,CAACrB,UAAW0C,GAAyBF,GAAe,EAsE7CG,MACf"}

package/error-display/error-display.styles_d3tql1.css

@@ -1,6 +1,6 @@
-.c3ln52v{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;position:relative;}
+@layer fds{.c3ln52v{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;position:relative;}
 .i1z0ejqa{position:relative;width:400px;height:auto;}:where(body.fds-breakpoint-sm-max) .i1z0ejqa{width:320px;}:where(body.fds-breakpoint-xs-max) .i1z0ejqa{width:288px;}:where(body.fds-breakpoint-xxs-max) .i1z0ejqa{width:240px;}
 .t13aw2m4{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-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;max-width:656px;white-space:pre-wrap;}
 .twamush{margin:var(--fds-spacing-32) 0 var(--fds-spacing-16);text-align:center;}
 .d1h7mokv{color:var(--fds-colour-text);text-align:center;}.d1h7mokv p+p{margin-top:var(--fds-spacing-16);}
-.akp6wv{margin:var(--fds-spacing-32) auto 0;width:21rem;}:where(body.fds-breakpoint-sm-max) .akp6wv{width:100%;}
+.akp6wv{margin:var(--fds-spacing-32) auto 0;width:21rem;}:where(body.fds-breakpoint-sm-max) .akp6wv{width:100%;}}