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

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 { useEffect, useRef, useState } from \"react\";\n\nimport { Overlay } from \"../overlay\";\nimport { SimpleIdGenerator } from \"../util\";\nimport {\n    CloseButton,\n    Container,\n    Content,\n    Header,\n    Heading,\n} from \"./drawer.styles\";\nimport type { DrawerProps } from \"./types\";\n\nexport const Drawer = ({\n    children,\n    heading,\n    show,\n    onClose,\n    onOverlayClick,\n    ...otherProps\n}: DrawerProps) => {\n    // =========================================================================\n    // CONST, STATE, REFS\n    // =========================================================================\n    const [showOverlay, setShowOverlay] = useState(show);\n    const [id] = useState(() => SimpleIdGenerator.generate());\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    const handleClick = (event: React.MouseEvent) => {\n        event.stopPropagation();\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                    <Container\n                        ref={refs.setFloating}\n                        $show={show}\n                        data-status={status}\n                        data-testid=\"drawer\"\n                        onClick={handleClick}\n                        aria-modal\n                        role=\"dialog\"\n                        aria-labelledby={id}\n                        onTransitionEnd={handleDialogVisibility}\n                        {...getFloatingProps()}\n                        {...otherProps}\n                    >\n                        <Header>\n                            <Heading\n                                id={id}\n                                ref={initialFocusRef}\n                                tabIndex={-1}\n                                weight=\"bold\"\n                                forwardedAs=\"h2\"\n                            >\n                                {heading}\n                            </Heading>\n                        </Header>\n                        <Content>{children}</Content>\n                        <CloseButton\n                            aria-label=\"Close drawer\"\n                            onClick={onClose}\n                            focusHighlight={false}\n                        >\n                            <CrossIcon aria-hidden />\n                        </CloseButton>\n                    </Container>\n                </FloatingFocusManager>\n            ) : undefined}\n        </Overlay>\n    );\n};\n"],"names":["Drawer","_a","children","heading","show","onClose","onOverlayClick","otherProps","__rest","showOverlay","setShowOverlay","useState","id","SimpleIdGenerator","generate","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","Container","Object","assign","ref","setFloating","$show","onClick","event","stopPropagation","role","onTransitionEnd","e","propertyName","current","focus","Header","Heading","tabIndex","weight","forwardedAs","Content","CloseButton","focusHighlight","CrossIcon","undefined"],"mappings":"gqBAqBO,MAAMA,EAAUC,IAAA,IAAAC,SACnBA,EAAQC,QACRA,EAAOC,KACPA,EAAIC,QACJA,EAAOC,eACPA,GAAcL,EACXM,EAAUC,EAAAP,EANM,0DAWnB,MAAOQ,EAAaC,GAAkBC,EAASP,IACxCQ,GAAMD,GAAS,IAAME,EAAkBC,aACxCC,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,IAAMxB,GAAe,IAAQ,KACtD,MAAO,IAAMyB,aAAaF,EAC9B,CACIvB,GAAe,EACnB,GACD,CAACN,IAmBJ,OACIgC,EAACC,EAAO,CACJjC,KAAMK,EACN6B,oBAAkB,EAClBhC,eAAgBA,EAAcJ,SAE7B0B,EACGQ,EAACG,EAAoB,CACjBtB,QAASA,EACTuB,cAAc,EACdC,aAAa,EAAIvC,SAEjBwC,EAACC,EAASC,OAAAC,OAAA,CACNC,IAAK5B,EAAK6B,YAAWC,MACd5C,EAAI,cACEyB,EAAM,cACP,SACZoB,QAxBCC,IACjBA,EAAMC,iBAAiB,EAuBa,cAAA,EAEpBC,KAAK,SAAQ,kBACIxC,EACjByC,gBAnCYC,UACL,eAAnBA,EAAEC,cAAiCnD,IAEZ,QAAvBH,EAAAc,EAAgByC,eAAO,IAAAvD,GAAAA,EAAEwD,QAC7B,GAgCoB/B,IACAnB,EAAU,CAAAL,SAAA,CAEdkC,EAACsB,EAAM,CAAAxD,SACHkC,EAACuB,EAAO,CACJ/C,GAAIA,EACJkC,IAAK/B,EACL6C,UAAU,EACVC,OAAO,OACPC,YAAY,KAAI5D,SAEfC,MAGTiC,EAAC2B,EAAO,CAAA7D,SAAEA,IACVkC,EAAC4B,EAAW,CAAA,aACG,eACXf,QAAS5C,EACT4D,gBAAgB,EAAK/D,SAErBkC,EAAC8B,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\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"}

package/drawer/drawer.styles.d.ts

@@ -1,11 +1,5 @@
-interface StyleProps {
-    $show?: boolean | undefined;
-}
-export declare const Container: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, StyleProps>> & string;
-export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const CloseButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("../shared/clickable-icon").ClickableIconProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const Heading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLHeadingElement> | undefined;
-}, never>> & string;
-export declare const Content: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export {};
+export declare const container: import("@linaria/core").LinariaClassName;
+export declare const header: import("@linaria/core").LinariaClassName;
+export declare const closeButton: import("@linaria/core").LinariaClassName;
+export declare const heading: import("@linaria/core").LinariaClassName;
+export declare const content: import("@linaria/core").LinariaClassName;

package/drawer/drawer.styles.js

@@ -1,92 +1,2 @@
-import i,{css as t}from"styled-components";import{ClickableIcon as o}from"../shared/clickable-icon/clickable-icon.js";import{Typography as e}from"../typography/index.js";import{V3_Motion as n,V3_Colour as a,V3_Shadow as d,V3_Radius as r,V3_MediaQuery as s,V3_Spacing as l,V3_Font as c,V3_Border as p}from"../v3_theme/index.js";const g=t`
-    transition-property: right, visibility;
-
-    &[data-status="initial"] {
-        right: -100%;
-        visibility: hidden;
-    }
-
-    &[data-status="open"] {
-        transition-duration: ${n["duration-800"]};
-        transition-timing-function: ${n["ease-entrance"]};
-        right: 0;
-        visibility: visible;
-    }
-
-    &[data-status="close"] {
-        transition-duration: ${n["duration-800"]};
-        transition-timing-function: ${n["ease-exit"]};
-        right: -100%;
-        visibility: hidden;
-    }
-`,h=i.div`
-    position: fixed;
-    top: 0;
-
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-
-    background-color: ${a.bg};
-    box-shadow: ${d["lg-subtle"]};
-
-    ${g}
-
-    width: 40%;
-    border-top-left-radius: ${r.md};
-    border-bottom-left-radius: ${r.md};
-    overflow: hidden;
-
-    ${s.MaxWidth.xl} {
-        width: 50%;
-        min-width: 700px;
-    }
-
-    ${s.MaxWidth.lg} {
-        width: 100%;
-        min-width: unset;
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-    }
-`,$=i.div`
-    top: 0;
-    display: flex;
-    align-items: center;
-    gap: ${l["spacing-16"]};
-    padding: ${l["spacing-32"]} ${l["spacing-16"]}
-        ${l["spacing-16"]}
-        calc(${c.Spec["heading-lh-md"]} + ${l["spacing-32"]});
-    background-color: ${a.bg};
-    border-bottom: ${p["width-010"]} ${p.solid}
-        ${a.border};
-
-    ${s.MaxWidth.lg} {
-        gap: ${l["spacing-8"]};
-        padding: ${l["spacing-32"]} ${l["spacing-20"]}
-            ${l["spacing-16"]}
-            calc(${c.Spec["heading-lh-md"]} + ${l["spacing-24"]});
-    }
-`,m=i(o)`
-    color: ${a.icon};
-    padding: 0;
-    position: absolute;
-    top: ${l["spacing-32"]};
-    left: ${l["spacing-16"]};
-    &:active,
-    &:focus {
-        color: ${a["icon-hover"]};
-    }
-
-    svg {
-        height: ${c.Spec["heading-lh-md"]};
-        width: ${c.Spec["heading-lh-md"]};
-    }
-`,b=i(e.HeadingMD)`
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-`,f=i.div`
-    flex: 1;
-    overflow-y: auto;
-`;export{m as CloseButton,h as Container,f as Content,$ as Header,b as Heading};
+import"./drawer.styles_94hx3y.css";const r="c1agands",c="h1kc1wos",s="c1njxz6r",a="hcrz6mg",e="c2k10hw";export{s as closeButton,r as container,e as content,c as header,a as heading};
 //# sourceMappingURL=drawer.styles.js.map

package/drawer/drawer.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"drawer.styles.js","sources":["../../src/drawer/drawer.styles.tsx"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Motion,\n    V3_Radius,\n    V3_Shadow,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACE, transient props are denoted with $\n// See more https://styled-components.com/docs/api#transient-props\n// =============================================================================\ninterface StyleProps {\n    $show?: boolean | undefined;\n}\n\n// =============================================================================\n// STYLING HELPERS\n// =============================================================================\n// FloatingUI transition styles\nconst FLOATING_TRANSITION_STYLES = css`\n    transition-property: right, visibility;\n\n    &[data-status=\"initial\"] {\n        right: -100%;\n        visibility: hidden;\n    }\n\n    &[data-status=\"open\"] {\n        transition-duration: ${V3_Motion[\"duration-800\"]};\n        transition-timing-function: ${V3_Motion[\"ease-entrance\"]};\n        right: 0;\n        visibility: visible;\n    }\n\n    &[data-status=\"close\"] {\n        transition-duration: ${V3_Motion[\"duration-800\"]};\n        transition-timing-function: ${V3_Motion[\"ease-exit\"]};\n        right: -100%;\n        visibility: hidden;\n    }\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Container = styled.div<StyleProps>`\n    position: fixed;\n    top: 0;\n\n    display: flex;\n    flex-direction: column;\n    height: 100%;\n\n    background-color: ${V3_Colour.bg};\n    box-shadow: ${V3_Shadow[\"lg-subtle\"]};\n\n    ${FLOATING_TRANSITION_STYLES}\n\n    width: 40%;\n    border-top-left-radius: ${V3_Radius[\"md\"]};\n    border-bottom-left-radius: ${V3_Radius[\"md\"]};\n    overflow: hidden;\n\n    ${V3_MediaQuery.MaxWidth.xl} {\n        width: 50%;\n        min-width: 700px;\n    }\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        min-width: unset;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n`;\n\nexport const Header = styled.div`\n    top: 0;\n    display: flex;\n    align-items: center;\n    gap: ${V3_Spacing[\"spacing-16\"]};\n    padding: ${V3_Spacing[\"spacing-32\"]} ${V3_Spacing[\"spacing-16\"]}\n        ${V3_Spacing[\"spacing-16\"]}\n        calc(${V3_Font.Spec[\"heading-lh-md\"]} + ${V3_Spacing[\"spacing-32\"]});\n    background-color: ${V3_Colour.bg};\n    border-bottom: ${V3_Border[\"width-010\"]} ${V3_Border.solid}\n        ${V3_Colour.border};\n\n    ${V3_MediaQuery.MaxWidth.lg} {\n        gap: ${V3_Spacing[\"spacing-8\"]};\n        padding: ${V3_Spacing[\"spacing-32\"]} ${V3_Spacing[\"spacing-20\"]}\n            ${V3_Spacing[\"spacing-16\"]}\n            calc(${V3_Font.Spec[\"heading-lh-md\"]} + ${V3_Spacing[\"spacing-24\"]});\n    }\n`;\n\nexport const CloseButton = styled(ClickableIcon)`\n    color: ${V3_Colour.icon};\n    padding: 0;\n    position: absolute;\n    top: ${V3_Spacing[\"spacing-32\"]};\n    left: ${V3_Spacing[\"spacing-16\"]};\n    &:active,\n    &:focus {\n        color: ${V3_Colour[\"icon-hover\"]};\n    }\n\n    svg {\n        height: ${V3_Font.Spec[\"heading-lh-md\"]};\n        width: ${V3_Font.Spec[\"heading-lh-md\"]};\n    }\n`;\n\nexport const Heading = styled(Typography.HeadingMD)`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n\nexport const Content = styled.div`\n    flex: 1;\n    overflow-y: auto;\n`;\n"],"names":["FLOATING_TRANSITION_STYLES","css","V3_Motion","Container","styled","div","V3_Colour","bg","V3_Shadow","V3_Radius","V3_MediaQuery","MaxWidth","xl","lg","Header","V3_Spacing","V3_Font","Spec","V3_Border","solid","border","CloseButton","ClickableIcon","icon","Heading","Typography","HeadingMD","Content"],"mappings":"uUA2BA,MAAMA,EAA6BC,CAAG;;;;;;;;;+BASPC,EAAU;sCACHA,EAAU;;;;;;+BAMjBA,EAAU;sCACHA,EAAU;;;;EASnCC,EAAYC,EAAOC,GAAe;;;;;;;;wBAQvBC,EAAUC;kBAChBC,EAAU;;MAEtBR;;;8BAGwBS,EAAc;iCACXA,EAAc;;;MAGzCC,EAAcC,SAASC;;;;;MAKvBF,EAAcC,SAASE;;;;;;EAQhBC,EAASV,EAAOC,GAAG;;;;WAIrBU,EAAW;eACPA,EAAW,iBAAiBA,EAAW;UAC5CA,EAAW;eACNC,EAAQC,KAAK,sBAAsBF,EAAW;wBACrCT,EAAUC;qBACbW,EAAU,gBAAgBA,EAAUC;UAC/Cb,EAAUc;;MAEdV,EAAcC,SAASE;eACdE,EAAW;mBACPA,EAAW,iBAAiBA,EAAW;cAC5CA,EAAW;mBACNC,EAAQC,KAAK,sBAAsBF,EAAW;;EAIpDM,EAAcjB,EAAOkB,EAAc;aACnChB,EAAUiB;;;WAGZR,EAAW;YACVA,EAAW;;;iBAGNT,EAAU;;;;kBAITU,EAAQC,KAAK;iBACdD,EAAQC,KAAK;;EAIjBO,EAAUpB,EAAOqB,EAAWC,UAAU;;;;EAMtCC,EAAUvB,EAAOC,GAAG;;;"}
+{"version":3,"file":"drawer.styles.js","sources":["../../src/drawer/drawer.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport {\n    Border,\n    Colour,\n    Font,\n    MediaQuery,\n    Motion,\n    Radius,\n    Shadow,\n    Spacing,\n} from \"../theme\";\n\nexport const container = css`\n    position: fixed;\n    top: 0;\n\n    display: flex;\n    flex-direction: column;\n\n    height: 100%;\n    width: 40%;\n    overflow: hidden;\n\n    background-color: ${Colour[\"bg\"]};\n    box-shadow: ${Shadow[\"lg-subtle\"]};\n    border-top-left-radius: ${Radius[\"md\"]};\n    border-bottom-left-radius: ${Radius[\"md\"]};\n\n    transition-property: right, visibility;\n\n    &[data-status=\"initial\"] {\n        right: -100%;\n        visibility: hidden;\n    }\n\n    &[data-status=\"open\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-entrance\"]};\n        right: 0;\n        visibility: visible;\n    }\n\n    &[data-status=\"close\"] {\n        transition-duration: ${Motion[\"duration-800\"]};\n        transition-timing-function: ${Motion[\"ease-exit\"]};\n        right: -100%;\n        visibility: hidden;\n    }\n\n    ${MediaQuery.MaxWidth.xl} {\n        width: 50%;\n        min-width: 700px;\n    }\n\n    ${MediaQuery.MaxWidth.lg} {\n        width: 100%;\n        min-width: unset;\n        border-top-left-radius: 0;\n        border-bottom-left-radius: 0;\n    }\n`;\n\nexport const header = css`\n    top: 0;\n    display: flex;\n    align-items: center;\n    gap: ${Spacing[\"spacing-16\"]};\n    padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-16\"]}\n        ${Spacing[\"spacing-16\"]}\n        calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-32\"]});\n    background-color: ${Colour[\"bg\"]};\n    border-bottom: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n\n    ${MediaQuery.MaxWidth.lg} {\n        gap: ${Spacing[\"spacing-8\"]};\n        padding: ${Spacing[\"spacing-32\"]} ${Spacing[\"spacing-20\"]}\n            ${Spacing[\"spacing-16\"]}\n            calc(${Font.Spec[\"heading-lh-md\"]} + ${Spacing[\"spacing-24\"]});\n    }\n`;\n\nexport const closeButton = css`\n    color: ${Colour[\"icon\"]};\n    padding: 0;\n    position: absolute;\n    top: ${Spacing[\"spacing-32\"]};\n    left: ${Spacing[\"spacing-16\"]};\n    &:active,\n    &:focus {\n        color: ${Colour[\"icon-hover\"]};\n    }\n\n    svg {\n        height: ${Font.Spec[\"heading-lh-md\"]};\n        width: ${Font.Spec[\"heading-lh-md\"]};\n    }\n`;\n\nexport const heading = css`\n    text-overflow: ellipsis;\n    overflow: hidden;\n    white-space: nowrap;\n`;\n\nexport const content = css`\n    flex: 1;\n    overflow-y: auto;\n`;\n"],"names":["container","header","closeButton","heading","content"],"mappings":"yDAaO,MAAMA,EAAS,WAkDTC,EAAM,WAmBNC,EAAW,WAiBXC,EAAO,UAMPC,EAAO"}

package/drawer/drawer.styles_94hx3y.css

@@ -0,0 +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;}
+.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;}

package/e-signature/e-signature.js

@@ -1,2 +1,2 @@
-import{__awaiter as e,__rest as r}from"../_virtual/_tslib.js";import{jsxs as i,jsx as t,Fragment as n}from"react/jsx-runtime";import{PencilIcon as a,EraserIcon as l}from"@lifesg/react-icons";import{lazy as o,useState as s,useRef as d,useContext as c,useEffect as u,Suspense as m}from"react";import{r as p}from"../external/react-responsive/dist/react-responsive.js";import{ThemeContext as h}from"styled-components";import{Button as g}from"../button/button.js";import{ButtonWithIcon as b}from"../button-with-icon/button-with-icon.js";import{ProgressBar as f}from"../shared/progress-bar/progress-bar.js";import{Typography as y}from"../typography/index.js";import{V3_Breakpoint as v}from"../v3_theme/index.js";import{SignatureArea as j,ProgressBox as x,AddSignatureButton as C,SignaturePreviewImage as k,EditSignatureButton as S,ScrollableModal as w,GrowContainer as D,ModalBox as L,ModalTitle as M,ESignatureContainer as T,ESignatureDrawable as _,SignatureLine as A,ModalButtons as E,ModalActionButton as P,Instructions as Q}from"./e-signature.styles.js";const U=o((()=>e(void 0,void 0,void 0,(function*(){return{default:(yield import("./e-signature-canvas.js")).ESignatureCanvas}})))),$=e=>{const{description:o,id:$,loadingProgress:B,loadingLabel:H="Uploading...",onChange:I,value:O,disabled:R}=e,W=r(e,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[q,z]=s(!1),F=d(null),[G,J]=s(O),K=c(h),N=v["sm-max"]({theme:K}),V=p.useMediaQuery({maxWidth:N}),X=p.useMediaQuery({maxHeight:N,orientation:"landscape"}),Y=()=>{var e;null===(e=F.current)||void 0===e||e.clear()},Z=()=>{if(F.current){const e=F.current.export();J(e),z(!1),null==I||I(e)}};u((()=>{J(O)}),[O]);return i("div",Object.assign({},W,{children:[t(j,{$disabled:R,children:"number"==typeof B?i(x,{children:[H&&t(y.BodyMD,{children:H}),t(f,{progress:null!=B?B:0,"data-testid":`${$||"e-signature"}-progress-bar`})]}):G?i(n,{children:[t(k,{src:G,alt:"Signature preview"}),t(S,{styleType:"light",onClick:()=>z(!0),id:$,"aria-label":"Edit signature",disabled:R,children:t(a,{})})]}):t(C,{type:"button",styleType:"secondary","aria-label":"Add signature",id:$,onClick:()=>z(!0),disabled:R,children:"Add signature"})}),t(w,{"data-testid":"signature-modal",show:q,children:t(D,{children:i(L,{onClose:()=>z(!1),children:[t(M,{children:"Signature"}),t(T,{children:i(_,{children:[t(A,{}),t(m,{fallback:null,children:q&&t(U,{ref:F,baseImageDataURL:G})})]})}),i(E,{children:[t(P,{as:X?b.Small:b.Default,type:"button",styleType:V&&!X?"light":"link",icon:t(l,{}),onClick:Y,children:"Clear"}),t(P,{as:X?g.Small:g.Default,type:"button",onClick:Z,children:"Save"})]})]})})}),o?t(Q,{children:o}):null]}))};export{$ as ESignature};
+import{__awaiter as e,__rest as r}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as n}from"react/jsx-runtime";import{PencilIcon as a,EraserIcon as o}from"@lifesg/react-icons";import{lazy as l,useState as s,useRef as d,useEffect as u,Suspense as m}from"react";import{ProgressBar as c}from"../shared/progress-bar/progress-bar.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as p}from"../theme/tokens/breakpoint.js";import"../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{useMaxWidthMediaQuery as g,useResolvedBreakpointToken as h,DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT as b,useMediaQuery as y}from"../theme/utils/use-media-query.js";import{Typography as f}from"../typography/index.js";import*as j from"./e-signature.styles.js";const v=l((()=>e(void 0,void 0,void 0,(function*(){return{default:(yield import("./e-signature-canvas.js")).ESignatureCanvas}})))),{AddSignatureButton:k,EditSignatureButton:S,ESignatureContainer:x,ESignatureDrawable:C,GrowContainer:B,Instructions:M,ModalActionButton:T,ModalBox:w,ModalButtons:A,ModalTitle:E,ProgressBox:L,ScrollableModal:P,SignatureArea:D,SignatureLine:I,SignaturePreviewImage:q}=j,z=e=>{const{description:l,id:j,loadingProgress:z,loadingLabel:U="Uploading...",onChange:$,value:_,disabled:G}=e,O=r(e,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[R,F]=s(!1),H=d(null),[J,K]=s(_),N=g("sm"),Q=h(p["sm-max"],b),V=y({clauses:[{feature:"orientation",value:"landscape"},{feature:"max-height",value:Q}]}),W=()=>{var e;null===(e=H.current)||void 0===e||e.clear()},X=()=>{if(H.current){const e=H.current.export();K(e),F(!1),null==$||$(e)}};u((()=>{K(_)}),[_]);return t("div",Object.assign({},O,{children:[i(D,{$disabled:G,children:"number"==typeof z?t(L,{children:[U&&i(f.BodyMD,{children:U}),i(c,{progress:null!=z?z:0,"data-testid":`${j||"e-signature"}-progress-bar`})]}):J?t(n,{children:[i(q,{src:J,alt:"Signature preview"}),i(S,{styleType:"light",onClick:()=>F(!0),id:j,icon:i(a,{}),"aria-label":"Edit signature",disabled:G})]}):i(k,{type:"button",styleType:"secondary","aria-label":"Add signature",id:j,onClick:()=>F(!0),disabled:G,children:"Add signature"})}),i(P,{"data-testid":"signature-modal",show:R,children:i(B,{children:t(w,{onClose:()=>F(!1),children:[i(E,{children:"Signature"}),i(x,{children:t(C,{children:[i(I,{}),i(m,{fallback:null,children:R&&i(v,{ref:H,baseImageDataURL:J})})]})}),t(A,{children:[i(T,{sizeType:V?"small":"default",type:"button",styleType:N&&!V?"light":"link",icon:i(o,{}),onClick:W,children:"Clear"}),i(T,{sizeType:V?"small":"default",type:"button",onClick:X,children:"Save"})]})]})})}),l?i(M,{children:l}):null]}))};export{z as ESignature};
 //# sourceMappingURL=e-signature.js.map

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, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    AddSignatureButton,\n    EditSignatureButton,\n    ESignatureContainer,\n    ESignatureDrawable,\n    GrowContainer,\n    Instructions,\n    ModalActionButton,\n    ModalBox,\n    ModalButtons,\n    ModalTitle,\n    ProgressBox,\n    ScrollableModal,\n    SignatureArea,\n    SignatureLine,\n    SignaturePreviewImage,\n} 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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const isMobileLandscape = useMediaQuery({\n        maxHeight: mobileBreakpoint,\n        orientation: \"landscape\",\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                <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                </AddSignatureButton>\n            );\n        }\n\n        return (\n            <>\n                <SignaturePreviewImage src={dataURL} alt=\"Signature preview\" />\n                <EditSignatureButton\n                    styleType=\"light\"\n                    onClick={() => setShowModal(true)}\n                    id={id}\n                    aria-label=\"Edit signature\"\n                    disabled={disabled}\n                >\n                    <PencilIcon />\n                </EditSignatureButton>\n            </>\n        );\n    };\n\n    const renderLoadingIndicator = () => {\n        return (\n            <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            </ProgressBox>\n        );\n    };\n\n    const renderModal = () => {\n        return (\n            <ScrollableModal data-testid=\"signature-modal\" show={showModal}>\n                <GrowContainer>\n                    <ModalBox onClose={() => setShowModal(false)}>\n                        <ModalTitle>Signature</ModalTitle>\n                        <ESignatureContainer>\n                            <ESignatureDrawable>\n                                <SignatureLine />\n                                <Suspense fallback={null}>\n                                    {showModal && (\n                                        <ESignatureCanvas\n                                            ref={eSignatureCanvasRef}\n                                            baseImageDataURL={dataURL}\n                                        />\n                                    )}\n                                </Suspense>\n                            </ESignatureDrawable>\n                        </ESignatureContainer>\n                        <ModalButtons>\n                            <ModalActionButton\n                                as={\n                                    isMobileLandscape\n                                        ? ButtonWithIcon.Small\n                                        : ButtonWithIcon.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                            </ModalActionButton>\n                            <ModalActionButton\n                                as={\n                                    isMobileLandscape\n                                        ? Button.Small\n                                        : Button.Default\n                                }\n                                type=\"button\"\n                                onClick={handleClickSave}\n                            >\n                                Save\n                            </ModalActionButton>\n                        </ModalButtons>\n                    </ModalBox>\n                </GrowContainer>\n            </ScrollableModal>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) return null;\n        return <Instructions>{description}</Instructions>;\n    };\n\n    return (\n        <div {...otherProps}>\n            <SignatureArea $disabled={disabled}>\n                {typeof loadingProgress === \"number\"\n                    ? renderLoadingIndicator()\n                    : renderSignatureArea()}\n            </SignatureArea>\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","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","isMobileLandscape","maxHeight","orientation","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","SignatureArea","$disabled","ProgressBox","Typography","BodyMD","ProgressBar","progress","SignaturePreviewImage","src","alt","EditSignatureButton","styleType","onClick","PencilIcon","AddSignatureButton","type","ScrollableModal","show","GrowContainer","ModalBox","onClose","ModalTitle","ESignatureContainer","ESignatureDrawable","SignatureLine","Suspense","fallback","ref","baseImageDataURL","ModalButtons","ModalActionButton","as","ButtonWithIcon","Small","Default","icon","EraserIcon","Button","Instructions"],"mappings":"4hCA+BA,MAAMA,EAAmBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACtCC,eAAgBC,OAAO,4BAAyBJ,iBAClD,MAEWK,EAAcC,IAIvB,MAAMC,YACFA,EAAWC,GACXA,EAAEC,gBACFA,EAAeC,aACfA,EAAe,eAAcC,SAC7BA,EAAQC,MACRA,EAAKC,SACLA,GAEAP,EADGQ,EAAUC,EACbT,EATE,CAAA,cAAA,KAAA,kBAAA,eAAA,WAAA,QAAA,cAUCU,EAAWC,GAAgBC,GAAS,GACrCC,EAAsBC,EAA4B,OACjDC,EAASC,GAAcJ,EAAoCN,GAC5DW,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBF,EAAAA,cAAc,CACpCG,UAAWN,EACXO,YAAa,cAMXC,EAAqB,WACI,QAA3BC,EAAAhB,EAAoBiB,eAAO,IAAAD,GAAAA,EAAEE,OAAO,EAGlCC,EAAkB,KACpB,GAAInB,EAAoBiB,QAAS,CAC7B,MAAMf,EAAUF,EAAoBiB,QAAQG,SAC5CjB,EAAWD,GACXJ,GAAa,GACbN,SAAAA,EAAWU,EACf,GAMJmB,GAAU,KACNlB,EAAWV,EAAM,GAClB,CAACA,IA+GJ,OACI6B,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAAS7B,EAAU,CAAA8B,SAAA,CACfC,EAACC,EAAa,CAAAC,UAAYlC,EAAQ+B,SACF,iBAApBnC,EA3EZgC,EAACO,EAAW,CAAAJ,SAAA,CACPlC,GACGmC,EAACI,EAAWC,OAAM,CAAAN,SAAElC,IAExBmC,EAACM,EAAW,CACRC,SAAU3C,QAAAA,EAAmB,EAAC,cACjB,GAAGD,GAAM,kCAvC7Ba,EAgBDoB,eACII,EAACQ,GAAsBC,IAAKjC,EAASkC,IAAI,sBACzCV,EAACW,GACGC,UAAU,QACVC,QAAS,IAAMzC,GAAa,GAC5BT,GAAIA,EAAE,aACK,iBACXK,SAAUA,EAAQ+B,SAElBC,EAACc,EAAU,CAAA,QAvBfd,EAACe,EAAkB,CACfC,KAAK,SACLJ,UAAU,YAAW,aACV,gBACXjD,GAAIA,EACJkD,QAAS,IAAMzC,GAAa,GAC5BJ,SAAUA,EAAQ+B,SAAA,oBAuC1BC,EAACiB,EAAe,CAAA,cAAa,kBAAkBC,KAAM/C,WACjD6B,EAACmB,EAAa,CAAApB,SACVH,EAACwB,EAAQ,CAACC,QAAS,IAAMjD,GAAa,GAAM2B,SAAA,CACxCC,EAACsB,EAAU,CAAAvB,SAAA,cACXC,EAACuB,EAAmB,CAAAxB,SAChBH,EAAC4B,EAAkB,CAAAzB,SAAA,CACfC,EAACyB,EAAa,CAAA,GACdzB,EAAC0B,EAAQ,CAACC,SAAU,KAAI5B,SACnB5B,GACG6B,EAAC7C,EAAgB,CACbyE,IAAKtD,EACLuD,iBAAkBrD,WAMtCoB,EAACkC,aACG9B,EAAC+B,EAAiB,CACdC,GACI9C,EACM+C,EAAeC,MACfD,EAAeE,QAEzBnB,KAAK,SACLJ,UACI7B,IAAaG,EACP,QACA,OAEVkD,KAAMpC,EAACqC,EAAU,CAAA,GACjBxB,QAASxB,qBAIbW,EAAC+B,EAAiB,CACdC,GACI9C,EACMoD,EAAOJ,MACPI,EAAOH,QAEjBnB,KAAK,SACLH,QAASpB,EAAeM,SAAA,mBAY3CrC,EACEsC,EAACuC,EAAY,CAAAxC,SAAErC,IADG,QAanB"}
+{"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 { ProgressBar } from \"../shared/progress-bar\";\nimport {\n    Breakpoint,\n    DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,\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\nconst {\n    AddSignatureButton,\n    EditSignatureButton,\n    ESignatureContainer,\n    ESignatureDrawable,\n    GrowContainer,\n    Instructions,\n    ModalActionButton,\n    ModalBox,\n    ModalButtons,\n    ModalTitle,\n    ProgressBox,\n    ScrollableModal,\n    SignatureArea,\n    SignatureLine,\n    SignaturePreviewImage,\n} = styles;\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(\n        Breakpoint[\"sm-max\"],\n        DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT\n    );\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                <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                </AddSignatureButton>\n            );\n        }\n\n        return (\n            <>\n                <SignaturePreviewImage src={dataURL} alt=\"Signature preview\" />\n                <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            <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            </ProgressBox>\n        );\n    };\n\n    const renderModal = () => {\n        return (\n            <ScrollableModal data-testid=\"signature-modal\" show={showModal}>\n                <GrowContainer>\n                    <ModalBox onClose={() => setShowModal(false)}>\n                        <ModalTitle>Signature</ModalTitle>\n                        <ESignatureContainer>\n                            <ESignatureDrawable>\n                                <SignatureLine />\n                                <Suspense fallback={null}>\n                                    {showModal && (\n                                        <ESignatureCanvas\n                                            ref={eSignatureCanvasRef}\n                                            baseImageDataURL={dataURL}\n                                        />\n                                    )}\n                                </Suspense>\n                            </ESignatureDrawable>\n                        </ESignatureContainer>\n                        <ModalButtons>\n                            <ModalActionButton\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                            </ModalActionButton>\n                            <ModalActionButton\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                onClick={handleClickSave}\n                            >\n                                Save\n                            </ModalActionButton>\n                        </ModalButtons>\n                    </ModalBox>\n                </GrowContainer>\n            </ScrollableModal>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) return null;\n        return <Instructions>{description}</Instructions>;\n    };\n\n    return (\n        <div {...otherProps}>\n            <SignatureArea $disabled={disabled}>\n                {typeof loadingProgress === \"number\"\n                    ? renderLoadingIndicator()\n                    : renderSignatureArea()}\n            </SignatureArea>\n            {renderModal()}\n            {renderDescription()}\n        </div>\n    );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","import","AddSignatureButton","EditSignatureButton","ESignatureContainer","ESignatureDrawable","GrowContainer","Instructions","ModalActionButton","ModalBox","ModalButtons","ModalTitle","ProgressBox","ScrollableModal","SignatureArea","SignatureLine","SignaturePreviewImage","styles","ESignature","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","isMobile","useMaxWidthMediaQuery","mobileBreakpoint","useResolvedBreakpointToken","Breakpoint","DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT","isMobileLandscape","useMediaQuery","clauses","feature","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","$disabled","Typography","BodyMD","ProgressBar","progress","src","alt","styleType","onClick","icon","PencilIcon","type","show","onClose","Suspense","fallback","ref","baseImageDataURL","sizeType","EraserIcon"],"mappings":"2iCAiBA,MAAMA,EAAmBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACtCC,eAAgBC,OAAO,4BAAyBJ,iBAClD,OAEIK,mBACFA,EAAkBC,oBAClBA,EAAmBC,oBACnBA,EAAmBC,mBACnBA,EAAkBC,cAClBA,EAAaC,aACbA,EAAYC,kBACZA,EAAiBC,SACjBA,EAAQC,aACRA,EAAYC,WACZA,EAAUC,YACVA,EAAWC,gBACXA,EAAeC,cACfA,EAAaC,cACbA,EAAaC,sBACbA,GACAC,EAESC,EAAcC,IAIvB,MAAMC,YACFA,EAAWC,GACXA,EAAEC,gBACFA,EAAeC,aACfA,EAAe,eAAcC,SAC7BA,EAAQC,MACRA,EAAKC,SACLA,GAEAP,EADGQ,EAAUC,EACbT,EATE,CAAA,cAAA,KAAA,kBAAA,eAAA,WAAA,QAAA,cAUCU,EAAWC,GAAgBC,GAAS,GACrCC,EAAsBC,EAA4B,OACjDC,EAASC,GAAcJ,EAAoCN,GAC5DW,EAAWC,EAAsB,MACjCC,EAAmBC,EACrBC,EAAW,UACXC,GAEEC,EAAoBC,EAAc,CACpCC,QAAS,CACL,CACIC,QAAS,cACTpB,MAAO,aAEX,CACIoB,QAAS,aACTpB,MAAOa,MAQbQ,EAAqB,WACI,QAA3BC,EAAAf,EAAoBgB,eAAO,IAAAD,GAAAA,EAAEE,OAAO,EAGlCC,EAAkB,KACpB,GAAIlB,EAAoBgB,QAAS,CAC7B,MAAMd,EAAUF,EAAoBgB,QAAQG,SAC5ChB,EAAWD,GACXJ,GAAa,GACbN,SAAAA,EAAWU,EACf,GAMJkB,GAAU,KACNjB,EAAWV,EAAM,GAClB,CAACA,IA0GJ,OACI4B,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAAS5B,EAAU,CAAA6B,SAAA,CACfC,EAAC3C,EAAa,CAAA4C,UAAYhC,EAAQ8B,SACF,iBAApBlC,EAvEZ+B,EAACzC,EAAW,CAAA4C,SAAA,CACPjC,GACGkC,EAACE,EAAWC,OAAM,CAAAJ,SAAEjC,IAExBkC,EAACI,EAAW,CACRC,SAAUxC,QAAAA,EAAmB,EAAC,cACjB,GAAGD,GAAM,kCAtC7Ba,EAgBDmB,eACII,EAACzC,GAAsB+C,IAAK7B,EAAS8B,IAAI,sBACzCP,EAACtD,EAAmB,CAChB8D,UAAU,QACVC,QAAS,IAAMpC,GAAa,GAC5BT,GAAIA,EACJ8C,KAAMV,EAACW,EAAU,CAAA,GAAG,aACT,iBACX1C,SAAUA,OAtBd+B,EAACvD,EAAkB,CACfmE,KAAK,SACLJ,UAAU,YAAW,aACV,gBACX5C,GAAIA,EACJ6C,QAAS,IAAMpC,GAAa,GAC5BJ,SAAUA,EAAQ8B,SAAA,oBAsC1BC,EAAC5C,EAAe,CAAA,cAAa,kBAAkByD,KAAMzC,EAAS2B,SAC1DC,EAACnD,EAAa,CAAAkD,SACVH,EAAC5C,EAAQ,CAAC8D,QAAS,IAAMzC,GAAa,aAClC2B,EAAC9C,0BACD8C,EAACrD,EAAmB,CAAAoD,SAChBH,EAAChD,EAAkB,CAAAmD,SAAA,CACfC,EAAC1C,EAAa,CAAA,GACd0C,EAACe,EAAQ,CAACC,SAAU,cACf5C,GACG4B,EAAC5D,GACG6E,IAAK1C,EACL2C,iBAAkBzC,WAMtCmB,EAAC3C,EAAY,CAAA8C,SAAA,CACTC,EAACjD,EAAiB,CACdoE,SACIlC,EAAoB,QAAU,UAElC2B,KAAK,SACLJ,UACI7B,IAAaM,EACP,QACA,OAEVyB,KAAMV,EAACoB,EAAU,CAAA,GACjBX,QAASpB,qBAIbW,EAACjD,EAAiB,CACdoE,SACIlC,EAAoB,QAAU,UAElC2B,KAAK,SACLH,QAAShB,EAAeM,SAAA,mBAY3CpC,EACEqC,EAAClD,EAAY,CAAAiD,SAAEpC,IADG,QAanB"}

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

@@ -1,25 +1,45 @@
 interface SignatureAreaProps {
     $disabled: boolean | undefined;
 }
-export declare const SignatureArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("styled-components/dist/types").Substitute<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>>, SignatureAreaProps>, SignatureAreaProps>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const AddSignatureButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const EditSignatureButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").IconButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const SignaturePreviewImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>> & string;
-export declare const ProgressBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Instructions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").TypographyProps & {
-    ref?: import("react").RefObject<HTMLParagraphElement> | undefined;
-}, never>> & string;
-export declare const ScrollableModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalProps, never>> & string & Omit<(({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, ...otherProps }: import("..").ModalProps) => JSX.Element) & {
-    Box: ({ id, children, onClose, showCloseButton, ...otherProps }: import("..").ModalBoxProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SignatureArea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, keyof import("..").DashedBorderProps | keyof import("react").RefAttributes<HTMLDivElement>> & import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, "$disabled"> & SignatureAreaProps, "$disabled"> & SignatureAreaProps, "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "backgroundColor" | "colour" | "enabled" | "radius" | "thickness" | "key" | "$disabled"> & Partial<Pick<import("styled-components").FastOmit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, keyof import("..").DashedBorderProps | keyof import("react").RefAttributes<HTMLDivElement>> & import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>, "$disabled"> & SignatureAreaProps, "$disabled"> & SignatureAreaProps, "slot" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "inert" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "backgroundColor" | "colour" | "enabled" | "radius" | "thickness" | "key" | "$disabled">>> & string & Omit<(props: import("..").DashedBorderProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const AddSignatureButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const EditSignatureButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<((props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null) & {
+    Default: (props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Small: (props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+    Large: (props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 }, keyof import("react").Component<any, {}, any>>;
-export declare const GrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ModalBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalBoxProps, never>> & string & Omit<({ id, children, onClose, showCloseButton, ...otherProps }: import("..").ModalBoxProps) => import("react/jsx-runtime").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const ModalTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
-export declare const ESignatureContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ESignatureDrawable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SignatureLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ModalButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const ModalActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
-export declare const SignatureCanvasContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SignatureCanvas: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never>> & string;
+export declare const SignaturePreviewImage: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, never>>> & string;
+export declare const ProgressBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const Instructions: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never> & Partial<Pick<Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>, never>>> & string & Omit<(props: Omit<any, "ref"> & {
+    weight?: import("..").TypographyWeight | undefined;
+    inline?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    maxLines?: number | undefined;
+    as?: import("react").ElementType<any> | undefined;
+} & import("react").RefAttributes<HTMLParagraphElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const ScrollableModal: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalProps, never> & Partial<Pick<import("..").ModalProps, never>>> & string & Omit<(({ id, show, animationFrom, children, enableOverlayClick, rootComponentId, zIndex, onOverlayClick, dismissKeyboardOnShow, className, ...otherProps }: import("..").ModalProps) => JSX.Element) & {
+    Box: (props: import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+}, keyof import("react").Component<any, {}, any>>;
+export declare const GrowContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ModalBox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>, never> & Partial<Pick<import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>, never>>> & string & Omit<(props: import("..").ModalBoxProps & import("react").RefAttributes<HTMLDivElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const ModalTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>>> & string;
+export declare const ESignatureContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ESignatureDrawable: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SignatureLine: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ModalButtons: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const ModalActionButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never> & Partial<Pick<import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>, never>>> & string & Omit<(props: import("..").ButtonProps & import("react").RefAttributes<HTMLButtonElement>) => React.ReactElement | null, keyof import("react").Component<any, {}, any>>;
+export declare const SignatureCanvasContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
+export declare const SignatureCanvas: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").CanvasHTMLAttributes<HTMLCanvasElement>, HTMLCanvasElement>, never>>> & string;
 export {};