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

package/drawer/drawer.d.ts

@@ -1,2 +1,10 @@
 import type { DrawerProps } from "./types";
-export declare const Drawer: ({ children, heading, show, onClose, onOverlayClick, ...otherProps }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+/**
+ * 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.
+ * @keywords overlay, panel, side panel, tray
+ */
+export declare const Drawer: ({ children, heading, show, onClose, onOverlayClick, className, ...otherProps }: DrawerProps) => import("react/jsx-runtime").JSX.Element;

package/drawer/drawer.js

@@ -1,2 +1,2 @@
-import{__rest as r}from"../_virtual/_tslib.js";import{jsx as e,jsxs as i}from"react/jsx-runtime";import{useFloating as o,useDismiss as t,useInteractions as a,useTransitionStatus as l,FloatingFocusManager as n}from"@floating-ui/react";import{CrossIcon as s}from"@lifesg/react-icons/cross";import{useState as d,useRef as c,useEffect as m}from"react";import{Overlay as h}from"../overlay/overlay.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{SimpleIdGenerator as p}from"../util/simple-id-generator.js";import"../util/string-helper.js";import{Container as u,Header as f,Heading as g,Content as y,CloseButton as v}from"./drawer.styles.js";const j=j=>{var{children:C,heading:b,show:w,onClose:k,onOverlayClick:x}=j,O=r(j,["children","heading","show","onClose","onOverlayClick"]);const[F,P]=d(w),[T]=d((()=>p.generate())),_=c(null),{context:A,refs:E}=o({open:w,onOpenChange:r=>{!r&&k&&k()}}),H=t(A,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:I}=a([H]),{isMounted:K,status:M}=l(A,{duration:800});m((()=>{if(!w){const r=setTimeout((()=>P(!1)),800);return()=>clearTimeout(r)}P(!0)}),[w]);return e(h,{show:F,enableOverlayClick:!0,onOverlayClick:x,children:K?e(n,{context:A,initialFocus:-1,returnFocus:!0,children:i(u,Object.assign({ref:E.setFloating,$show:w,"data-status":M,"data-testid":"drawer",onClick:r=>{r.stopPropagation()},"aria-modal":!0,role:"dialog","aria-labelledby":T,onTransitionEnd:r=>{var e;"visibility"===r.propertyName&&w&&(null===(e=_.current)||void 0===e||e.focus())}},I(),O,{children:[e(f,{children:e(g,{id:T,ref:_,tabIndex:-1,weight:"bold",forwardedAs:"h2",children:b})}),e(y,{children:C}),e(v,{"aria-label":"Close drawer",onClick:k,focusHighlight:!1,children:e(s,{"aria-hidden":!0})})]}))}):void 0})};export{j as Drawer};
+import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r,jsxs as i}from"react/jsx-runtime";import{useFloating as a,useDismiss as o,useInteractions as t,useTransitionStatus as l,FloatingFocusManager as s}from"@floating-ui/react";import{CrossIcon as n}from"@lifesg/react-icons/cross";import c from"clsx";import{useState as d,useRef as m,useEffect as p}from"react";import{Overlay as h}from"../overlay/overlay.js";import{ClickableIcon as u}from"../shared/clickable-icon/clickable-icon.js";import{Typography as f}from"../typography/index.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import{useId as g}from"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{container as v,header as y,heading as j,content as b,closeButton as C}from"./drawer.styles.js";const x=x=>{var{children:N,heading:k,show:w,onClose:O,onOverlayClick:F,className:T}=x,H=e(x,["children","heading","show","onClose","onOverlayClick","className"]);const[M,P]=d(w),_=g(),D=m(null),{context:E,refs:I}=a({open:w,onOpenChange:e=>{!e&&O&&O()}}),K=o(E,{escapeKey:!0,outsidePress:!1}),{getFloatingProps:q}=t([K]),{isMounted:z,status:A}=l(E,{duration:800});p((()=>{if(!w){const e=setTimeout((()=>P(!1)),800);return()=>clearTimeout(e)}P(!0)}),[w]);return r(h,{show:M,enableOverlayClick:!0,onOverlayClick:F,children:z?r(s,{context:E,initialFocus:-1,returnFocus:!0,children:i("div",Object.assign({ref:I.setFloating,"data-status":A,"data-testid":"drawer","aria-modal":!0,role:"dialog","aria-labelledby":_,onTransitionEnd:e=>{var r;"visibility"===e.propertyName&&w&&(null===(r=D.current)||void 0===r||r.focus())},className:c(v,T)},q(),H,{children:[r("div",{className:y,children:r(f.HeadingMD,{as:"h2",className:j,id:_,ref:D,tabIndex:-1,weight:"bold",children:k})}),r("div",{className:b,children:N}),r(u,{"aria-label":"Close drawer",onClick:O,focusHighlight:!1,className:C,children:r(n,{"aria-hidden":!0})})]}))}):void 0})};export{x as Drawer};
 //# sourceMappingURL=drawer.js.map

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\n// @catalog\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 * @keywords overlay, panel, side panel, tray\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":"00BA2BO,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 @@
+@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;}}

package/drawer/types.d.ts

@@ -1,14 +1,26 @@
+/** Props for the `Drawer` 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 r}from"../_virtual/_tslib.js";import{jsx as e}from"react/jsx-runtime";import{Canvas as t,PencilBrush as n,FabricImage as i}from"fabric";import{forwardRef as c,useRef as u,useContext as o,useImperativeHandle as a,useCallback as l,useEffect as s}from"react";import{ThemeContext as d}from"styled-components";import{V3_Colour as m}from"../v3_theme/index.js";import{SignatureCanvasContainer as v,SignatureCanvas as f}from"./e-signature.styles.js";const h=c(((c,h)=>{const{baseImageDataURL:w}=c,g=u(null),p=u(null),b=u(),j=u(),L=o(d);a(h,(()=>({clear:()=>{var r;return null===(r=b.current)||void 0===r?void 0:r.clear()},export:()=>x()})));const x=()=>{if(!b.current)return null;if(!b.current.getObjects().length)return null;return b.current.toDataURL({multiplier:1,format:"png",quality:1,enableRetinaScaling:!0})},y=l((()=>r(void 0,void 0,void 0,(function*(){if(yield new Promise((r=>setTimeout(r))),g.current&&p.current&&b.current){const r=g.current.clientWidth,e=g.current.clientHeight;p.current.width=r,p.current.height=e,b.current.setDimensions({width:r,height:e}),b.current.forEachObject((r=>{b.current&&b.current.centerObject(r)}))}}))),[]);return s((()=>{if(g.current&&p.current)return b.current=new t("eSignatureCanvas"),b.current.selection=!1,b.current.isDrawingMode=!0,j.current=new n(b.current),j.current.color=m.text({theme:L}),j.current.width=3,b.current.freeDrawingBrush=j.current,()=>{var r;null===(r=b.current)||void 0===r||r.dispose()}}),[]),s((()=>{var r;if(window)return window.addEventListener("resize",y),null===(r=screen.orientation)||void 0===r||r.addEventListener("change",y),y(),()=>{var r;window.removeEventListener("resize",y),null===(r=screen.orientation)||void 0===r||r.removeEventListener("change",y)}}),[y]),s((()=>{r(void 0,void 0,void 0,(function*(){if(w){const r=yield i.fromURL(w);b.current&&(b.current.clear(),r.selectable=!1,r.hoverCursor="default",b.current.width&&r.width&&r.scale(b.current.width/r.width),b.current.add(r),b.current.centerObject(r))}}))}),[w]),e(v,{ref:g,children:e(f,{id:"eSignatureCanvas",ref:p})})}));export{h 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    useContext,\n    useEffect,\n    useImperativeHandle,\n    useRef,\n} from \"react\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { V3_Colour } from \"../v3_theme\";\nimport {\n    SignatureCanvas,\n    SignatureCanvasContainer,\n} 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 theme = useContext(ThemeContext);\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 = V3_Colour[\"text\"]({ theme });\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        <SignatureCanvasContainer ref={containerRef}>\n            <SignatureCanvas id=\"eSignatureCanvas\" ref={canvasRef} />\n        </SignatureCanvasContainer>\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","theme","useContext","ThemeContext","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","V3_Colour","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","SignatureCanvasContainer","SignatureCanvas","id"],"mappings":"8cA4BA,MA6HaA,EAAmBC,GA7Hd,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAuB,MACtCC,EAAYD,EAA0B,MACtCE,EAAeF,IACfG,EAAcH,IACdI,EAAQC,EAAWC,GAKzBC,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,MAAQC,EAAgB,KAAE,CAAEtC,UAChDD,EAAYO,QAAQoB,MAAQ,EAE5B5B,EAAaQ,QAAQiC,iBAAmBxC,EAAYO,QAE7C,WACiB,QAApBD,EAAAP,EAAaQ,eAAO,IAAAD,GAAAA,EAAEmC,SAAS,CAEvC,GACD,IAGHR,GAAU,WACN,GAAIS,OAIA,OAHAA,OAAOC,iBAAiB,SAAU1B,GAChB,QAAlBX,EAAAsC,OAAOC,mBAAW,IAAAvC,GAAAA,EAAEqC,iBAAiB,SAAU1B,GAC/CA,IACO,WACHyB,OAAOI,oBAAoB,SAAU7B,GACnB,QAAlBX,EAAAsC,OAAOC,mBAAW,IAAAvC,GAAAA,EAAEwC,oBAAoB,SAAU7B,EAAa,CAEvE,GACD,CAACA,IAGJgB,GAAU,KACyBd,OAAA,OAAA,OAAA,GAAA,YAC3B,GAAIxB,EAAkB,CAClB,MAAMoD,QAAYC,EAAYC,QAAQtD,GAClCI,EAAaQ,UACbR,EAAaQ,QAAQF,QACrB0C,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdpD,EAAaQ,QAAQoB,OAASoB,EAAIpB,OAClCoB,EAAIK,MAAMrD,EAAaQ,QAAQoB,MAAQoB,EAAIpB,OAE/C5B,EAAaQ,QAAQ8C,IAAIN,GACzBhD,EAAaQ,QAAQyB,aAAae,GAE1C,CACJ,GAEa,GACd,CAACpD,IAMA2D,EAACC,EAAwB,CAAC7D,IAAKE,WAC3B0D,EAACE,GAAgBC,GAAG,mBAAmB/D,IAAKI,KACrB"}
+{"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        // eslint-disable-next-line react-hooks/exhaustive-deps\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,MAwIaA,EAAmBC,GAxId,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,IAqEH,OA/DAE,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,GAED,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,8 @@
 import type { EsignatureProps } from "./types";
+/**
+ * A field that lets users draw and save a signature.
+ *
+ * Use in forms that require a handwritten signature.
+ * @keywords field, form, input, sign, signature
+ */
 export declare const ESignature: (props: EsignatureProps) => import("react/jsx-runtime").JSX.Element;

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 a}from"../_virtual/_tslib.js";import{jsxs as r,jsx as i,Fragment as s}from"react/jsx-runtime";import{PencilIcon as t,EraserIcon as l}from"@lifesg/react-icons";import{lazy as o,useState as d,useRef as n,useEffect as m,Suspense as c}from"react";import{Button as p}from"../button/button.js";import{DashedBorder as u}from"../dashed-border/dashed-border.js";import{Modal as h}from"../modal/index.js";import{ProgressBar as b}from"../shared/progress-bar/progress-bar.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import{Border as g}from"../theme/tokens/border.js";import{Breakpoint as f}from"../theme/tokens/breakpoint.js";import{Colour as j}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as v}from"../theme/tokens/radius.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 y,useResolvedBreakpointToken as N,useMediaQuery as k}from"../theme/utils/use-media-query.js";import{Typography as x}from"../typography/index.js";import{signatureArea as C,progressBox as S,addSignatureButton as T,signaturePreviewImage as w,editSignatureButton as B,scrollableModal as L,growContainer as q,modalBox as z,modalTitle as A,eSignatureContainer as D,eSignatureDrawable as E,signatureLine as M,modalButtons as P,modalActionButton as U,instructions as _}from"./e-signature.styles.js";const I=o((()=>e(void 0,void 0,void 0,(function*(){return{default:(yield import("./e-signature-canvas.js")).ESignatureCanvas}})))),O=e=>{const{description:o,id:O,loadingProgress:R,loadingLabel:$="Uploading...",onChange:F,value:G,disabled:H}=e,J=a(e,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[K,Q]=d(!1),V=n(null),[W,X]=d(G),Y=y("sm"),Z=N(f["sm-max"]),ee=k({clauses:[{feature:"orientation",value:"landscape"},{feature:"max-height",value:Z}]}),ae=()=>{var e;null===(e=V.current)||void 0===e||e.clear()},re=()=>{if(V.current){const e=V.current.export();X(e),Q(!1),null==F||F(e)}};m((()=>{X(G)}),[G]);return r("div",Object.assign({},J,{children:[i(u,{className:C,thickness:g["width-040"],radius:v.sm,colour:H?j["border-disabled"]:j.border,backgroundColor:H?j["bg-disabled"]:j.bg,children:"number"==typeof R?r("div",{className:S,children:[$&&i(x.BodyMD,{children:$}),i(b,{progress:null!=R?R:0,"data-testid":`${O||"e-signature"}-progress-bar`})]}):W?r(s,{children:[i("img",{className:w,src:W,alt:"Signature preview"}),i(p,{className:B,styleType:"light",onClick:()=>Q(!0),id:O,icon:i(t,{}),"aria-label":"Edit signature",disabled:H})]}):i(p,{className:T,type:"button",styleType:"secondary","aria-label":"Add signature",id:O,onClick:()=>Q(!0),disabled:H,children:"Add signature"})}),i(h,{className:L,"data-testid":"signature-modal",show:K,children:i("div",{className:q,"data-mobile-landscape":ee,children:r(h.Box,{className:z,"data-mobile-landscape":ee,onClose:()=>Q(!1),children:[i("h2",{className:A,"data-mobile-landscape":ee,children:"Signature"}),i("div",{className:D,"data-mobile-landscape":ee,children:r("div",{className:E,"data-mobile-landscape":ee,children:[i("div",{className:M,"data-mobile-landscape":ee}),i(c,{fallback:null,children:K&&i(I,{ref:V,baseImageDataURL:W})})]})}),r("div",{className:P,"data-mobile-landscape":ee,children:[i(p,{className:U,"data-mobile-landscape":ee,sizeType:ee?"small":"default",type:"button",styleType:Y&&!ee?"light":"link",icon:i(l,{}),onClick:ae,children:"Clear"}),i(p,{className:U,"data-mobile-landscape":ee,sizeType:ee?"small":"default",type:"button",onClick:re,children:"Save"})]})]})})}),o?i(x.BodySM,{className:_,children:o}):null]}))};export{O 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 { 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// @catalog\n/**\n * A field that lets users draw and save a signature.\n *\n * Use in forms that require a handwritten signature.\n * @keywords field, form, input, sign, 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":"+hDAsBA,MAAMA,EAAmBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACtCC,eAAgBC,OAAO,4BAAyBJ,iBAClD,MASWK,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,EAA2BC,EAAW,WACzDC,GAAoBC,EAAc,CACpCC,QAAS,CACL,CACIC,QAAS,cACTnB,MAAO,aAEX,CACImB,QAAS,aACTnB,MAAOa,MAQbO,GAAqB,WACI,QAA3BC,EAAAd,EAAoBe,eAAO,IAAAD,GAAAA,EAAEE,OAAO,EAGlCC,GAAkB,KACpB,GAAIjB,EAAoBe,QAAS,CAC7B,MAAMb,EAAUF,EAAoBe,QAAQG,SAC5Cf,EAAWD,GACXJ,GAAa,GACbN,SAAAA,EAAWU,EACf,GAMJiB,GAAU,KACNhB,EAAWV,EAAM,GAClB,CAACA,IAoJJ,OACI2B,EAAA,MAAAC,OAAAC,OAAA,GAAS3B,EAAU,CAAA4B,SAAA,CACfC,EAACC,EAAY,CACTC,UAAWC,EACXC,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQtC,EAAWuC,EAAO,mBAAqBA,EAAe,OAC9DC,gBACIxC,EAAWuC,EAAO,eAAiBA,EAAW,GAACV,SAGvB,iBAApBjC,EAnHZ8B,EAAA,MAAA,CAAKM,UAAWS,EAAkBZ,SAAA,CAC7BhC,GACGiC,EAACY,EAAWC,OAAM,CAAAd,SAAEhC,IAExBiC,EAACc,GACGC,SAAUjD,QAAAA,EAAmB,EAAC,cACjB,GAAGD,GAAM,kCA5C7Ba,EAiBDkB,EAAAoB,EAAA,CAAAjB,SAAA,CACIC,EAAA,MAAA,CACIE,UAAWe,EACXC,IAAKxC,EACLyC,IAAI,sBAERnB,EAACoB,EAAM,CACHlB,UAAWmB,EACXC,UAAU,QACVC,QAAS,IAAMjD,GAAa,GAC5BT,GAAIA,EACJ2D,KAAMxB,EAACyB,EAAU,CAAA,GAAG,aACT,iBACXvD,SAAUA,OA5Bd8B,EAACoB,EAAM,CACHlB,UAAWwB,EACXC,KAAK,SACLL,UAAU,YAAW,aACV,gBACXzD,GAAIA,EACJ0D,QAAS,IAAMjD,GAAa,GAC5BJ,SAAUA,EAAQ6B,SAAA,oBA2C1BC,EAAC4B,EAAK,CACF1B,UAAW2B,gBACC,kBACZC,KAAMzD,EAAS0B,SAEfC,EAAA,MAAA,CACIE,UAAW6B,EAAoB,wBACR9C,YAEvBW,EAACgC,EAAMI,KACH9B,UAAW+B,EAAe,wBACHhD,GACvBiD,QAAS,IAAM5D,GAAa,GAAMyB,SAAA,CAElCC,QACIE,UAAWiC,EAAiB,wBACLlD,GAAiBc,SAAA,cAI5CC,SACIE,UAAWkC,EAA0B,wBACdnD,GAAiBc,SAExCH,EAAA,MAAA,CACIM,UAAWmC,0BACYpD,GAAiBc,SAAA,CAExCC,EAAA,MAAA,CACIE,UAAWoC,0BACYrD,KAE3Be,EAACuC,EAAQ,CAACC,SAAU,cACfnE,GACG2B,EAAC3C,EAAgB,CACboF,IAAKjE,EACLkE,iBAAkBhE,WAMtCkB,SACIM,UAAWyC,EAAmB,wBACP1D,GAAiBc,SAAA,CAExCC,EAACoB,EAAM,CACHlB,UAAW0C,EAAwB,wBACZ3D,GACvB4D,SACI5D,GAAoB,QAAU,UAElC0C,KAAK,SACLL,UACI1C,IAAaK,GACP,QACA,OAEVuC,KAAMxB,EAAC8C,EAAU,CAAA,GACjBvB,QAASlC,GAAkBU,SAAA,UAI/BC,EAACoB,EAAM,CACHlB,UAAW0C,EAAwB,wBACZ3D,GACvB4D,SACI5D,GAAoB,QAAU,UAElC0C,KAAK,SACLJ,QAAS9B,GAAeM,SAAA,mBAY3CnC,EAEDoC,EAACY,EAAWmC,OAAM,CAAC7C,UAAW8C,EAAmBjD,SAC5CnC,IAHgB,QAyBnB"}

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

@@ -1,25 +1,17 @@
-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;
-}, 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 {};
+export declare const signatureArea: import("@linaria/core").LinariaClassName;
+export declare const addSignatureButton: import("@linaria/core").LinariaClassName;
+export declare const editSignatureButton: import("@linaria/core").LinariaClassName;
+export declare const signaturePreviewImage: import("@linaria/core").LinariaClassName;
+export declare const progressBox: import("@linaria/core").LinariaClassName;
+export declare const instructions: import("@linaria/core").LinariaClassName;
+export declare const scrollableModal: import("@linaria/core").LinariaClassName;
+export declare const growContainer: import("@linaria/core").LinariaClassName;
+export declare const modalBox: import("@linaria/core").LinariaClassName;
+export declare const modalTitle: import("@linaria/core").LinariaClassName;
+export declare const eSignatureContainer: import("@linaria/core").LinariaClassName;
+export declare const eSignatureDrawable: import("@linaria/core").LinariaClassName;
+export declare const signatureLine: import("@linaria/core").LinariaClassName;
+export declare const modalButtons: import("@linaria/core").LinariaClassName;
+export declare const modalActionButton: import("@linaria/core").LinariaClassName;
+export declare const signatureCanvasContainer: import("@linaria/core").LinariaClassName;
+export declare const signatureCanvas: import("@linaria/core").LinariaClassName;