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

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    }, []);\n\n    useEffect(() => {\n        if (pencilBrush.current && resolvedColor) {\n            pencilBrush.current.color = resolvedColor;\n        }\n    }, [resolvedColor]);\n\n    // resize\n    useEffect(() => {\n        if (window) {\n            window.addEventListener(\"resize\", handleResize);\n            screen.orientation?.addEventListener(\"change\", handleResize);\n            handleResize();\n            return () => {\n                window.removeEventListener(\"resize\", handleResize);\n                screen.orientation?.removeEventListener(\"change\", handleResize);\n            };\n        }\n    }, [handleResize]);\n\n    // update base image\n    useEffect(() => {\n        const updateImage = async () => {\n            if (baseImageDataURL) {\n                const img = await FabricImage.fromURL(baseImageDataURL);\n                if (fabricCanvas.current) {\n                    fabricCanvas.current.clear();\n                    img.selectable = false;\n                    img.hoverCursor = \"default\";\n\n                    if (fabricCanvas.current.width && img.width) {\n                        img.scale(fabricCanvas.current.width / img.width);\n                    }\n                    fabricCanvas.current.add(img);\n                    fabricCanvas.current.centerObject(img);\n                }\n            }\n        };\n\n        updateImage();\n    }, [baseImageDataURL]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    return (\n        <div className={styles.signatureCanvasContainer} ref={containerRef}>\n            <canvas\n                className={styles.signatureCanvas}\n                id=\"eSignatureCanvas\"\n                ref={canvasRef}\n            />\n        </div>\n    );\n};\n\nexport const ESignatureCanvas = forwardRef<\n    ESignatureCanvasRef,\n    ESignatureCanvasProps\n>(Component);\n"],"names":["ESignatureCanvas","forwardRef","props","ref","baseImageDataURL","containerRef","useRef","canvasRef","fabricCanvas","pencilBrush","resolvedColor","useDesignTokenOverride","token","Colour","useImperativeHandle","clear","_a","current","export","exportAsImage","getObjects","length","toDataURL","multiplier","format","quality","enableRetinaScaling","handleResize","useCallback","__awaiter","Promise","resolve","setTimeout","canvasWidth","clientWidth","canvasHeight","clientHeight","width","height","setDimensions","forEachObject","obj","centerObject","useEffect","FabricCanvas","selection","isDrawingMode","PencilBrush","color","freeDrawingBrush","dispose","window","addEventListener","screen","orientation","removeEventListener","img","FabricImage","fromURL","selectable","hoverCursor","scale","add","_jsx","className","styles.signatureCanvasContainer","children","styles.signatureCanvas","id"],"mappings":"g4BAwBA,MAuIaA,EAAmBC,GAvId,CACdC,EACAC,KAKA,MAAMC,iBAAEA,GAAqBF,EACvBG,EAAeC,EAAuB,MACtCC,EAAYD,EAA0B,MACtCE,EAAeF,IACfG,EAAcH,IACdI,EAAgBC,EAAuB,CAAEC,MAAOC,EAAa,OAKnEC,EAAoBX,GAAK,KAAA,CACrBY,MAAO,KAAK,IAAAC,EAAC,OAAoB,QAApBA,EAAAR,EAAaS,eAAO,IAAAD,OAAA,EAAAA,EAAED,OAAO,EAC1CG,OAAQ,IAAMC,QAMlB,MAAMA,EAAgB,KAClB,IAAKX,EAAaS,QAAS,OAAO,KAClC,IAAKT,EAAaS,QAAQG,aAAaC,OAAQ,OAAO,KAOtD,OANgBb,EAAaS,QAAQK,UAAU,CAC3CC,WAAY,EACZC,OAAQ,MACRC,QAAS,EACTC,qBAAqB,GAEX,EAGZC,EAAeC,GAAY,IAAWC,OAAA,OAAA,OAAA,GAAA,YAGxC,SADM,IAAIC,SAASC,GAAYC,WAAWD,KACtC1B,EAAaY,SAAWV,EAAUU,SAAWT,EAAaS,QAAS,CACnE,MAAMgB,EAAc5B,EAAaY,QAAQiB,YACnCC,EAAe9B,EAAaY,QAAQmB,aAC1C7B,EAAUU,QAAQoB,MAAQJ,EAC1B1B,EAAUU,QAAQqB,OAASH,EAC3B3B,EAAaS,QAAQsB,cAAc,CAC/BF,MAAOJ,EACPK,OAAQH,IAGZ3B,EAAaS,QAAQuB,eAAeC,IAC5BjC,EAAaS,SACbT,EAAaS,QAAQyB,aAAaD,EACtC,GAER,CACJ,KAAG,IAoEH,OA9DAE,GAAU,KACN,GAAItC,EAAaY,SAAWV,EAAUU,QAWlC,OAVAT,EAAaS,QAAU,IAAI2B,EAAa,oBACxCpC,EAAaS,QAAQ4B,WAAY,EACjCrC,EAAaS,QAAQ6B,eAAgB,EAErCrC,EAAYQ,QAAU,IAAI8B,EAAYvC,EAAaS,SACnDR,EAAYQ,QAAQ+B,MAAQtC,GAAiB,UAC7CD,EAAYQ,QAAQoB,MAAQ,EAE5B7B,EAAaS,QAAQgC,iBAAmBxC,EAAYQ,QAE7C,WACiB,QAApBD,EAAAR,EAAaS,eAAO,IAAAD,GAAAA,EAAEkC,SAAS,CAEvC,GACD,IAEHP,GAAU,KACFlC,EAAYQ,SAAWP,IACvBD,EAAYQ,QAAQ+B,MAAQtC,EAChC,GACD,CAACA,IAGJiC,GAAU,WACN,GAAIQ,OAIA,OAHAA,OAAOC,iBAAiB,SAAUzB,GAChB,QAAlBX,EAAAqC,OAAOC,mBAAW,IAAAtC,GAAAA,EAAEoC,iBAAiB,SAAUzB,GAC/CA,IACO,WACHwB,OAAOI,oBAAoB,SAAU5B,GACnB,QAAlBX,EAAAqC,OAAOC,mBAAW,IAAAtC,GAAAA,EAAEuC,oBAAoB,SAAU5B,EAAa,CAEvE,GACD,CAACA,IAGJgB,GAAU,KACyBd,OAAA,OAAA,OAAA,GAAA,YAC3B,GAAIzB,EAAkB,CAClB,MAAMoD,QAAYC,EAAYC,QAAQtD,GAClCI,EAAaS,UACbT,EAAaS,QAAQF,QACrByC,EAAIG,YAAa,EACjBH,EAAII,YAAc,UAEdpD,EAAaS,QAAQoB,OAASmB,EAAInB,OAClCmB,EAAIK,MAAMrD,EAAaS,QAAQoB,MAAQmB,EAAInB,OAE/C7B,EAAaS,QAAQ6C,IAAIN,GACzBhD,EAAaS,QAAQyB,aAAac,GAE1C,CACJ,GAEa,GACd,CAACpD,IAMA2D,EAAA,MAAA,CAAKC,UAAWC,EAAiC9D,IAAKE,EAAY6D,SAC9DH,EAAA,SAAA,CACIC,UAAWG,EACXC,GAAG,mBACHjE,IAAKI,KAEP"}

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

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

package/e-signature/e-signature.js

@@ -1,2 +1,2 @@
-import{__awaiter as e,__rest as r}from"../_virtual/_tslib.js";import{jsxs as t,jsx as i,Fragment as n}from"react/jsx-runtime";import{PencilIcon as a,EraserIcon as o}from"@lifesg/react-icons";import{lazy as l,useState as s,useRef as d,useEffect as u,Suspense as m}from"react";import{ProgressBar as c}from"../shared/progress-bar/progress-bar.js";import"../theme/theme-provider/index.js";import"../theme/theme-provider/context.js";import"../theme/tokens/border.js";import{Breakpoint as p}from"../theme/tokens/breakpoint.js";import"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/simple-id-generator.js";import"../util/string-helper.js";import"@react-aria/live-announcer";import{useMaxWidthMediaQuery as g,useResolvedBreakpointToken as h,DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT as b,useMediaQuery as y}from"../theme/utils/use-media-query.js";import{Typography as f}from"../typography/index.js";import*as j from"./e-signature.styles.js";const v=l((()=>e(void 0,void 0,void 0,(function*(){return{default:(yield import("./e-signature-canvas.js")).ESignatureCanvas}})))),{AddSignatureButton:k,EditSignatureButton:S,ESignatureContainer:x,ESignatureDrawable:C,GrowContainer:B,Instructions:M,ModalActionButton:T,ModalBox:w,ModalButtons:A,ModalTitle:E,ProgressBox:L,ScrollableModal:P,SignatureArea:D,SignatureLine:I,SignaturePreviewImage:q}=j,z=e=>{const{description:l,id:j,loadingProgress:z,loadingLabel:U="Uploading...",onChange:$,value:_,disabled:G}=e,O=r(e,["description","id","loadingProgress","loadingLabel","onChange","value","disabled"]),[R,F]=s(!1),H=d(null),[J,K]=s(_),N=g("sm"),Q=h(p["sm-max"],b),V=y({clauses:[{feature:"orientation",value:"landscape"},{feature:"max-height",value:Q}]}),W=()=>{var e;null===(e=H.current)||void 0===e||e.clear()},X=()=>{if(H.current){const e=H.current.export();K(e),F(!1),null==$||$(e)}};u((()=>{K(_)}),[_]);return t("div",Object.assign({},O,{children:[i(D,{$disabled:G,children:"number"==typeof z?t(L,{children:[U&&i(f.BodyMD,{children:U}),i(c,{progress:null!=z?z:0,"data-testid":`${j||"e-signature"}-progress-bar`})]}):J?t(n,{children:[i(q,{src:J,alt:"Signature preview"}),i(S,{styleType:"light",onClick:()=>F(!0),id:j,icon:i(a,{}),"aria-label":"Edit signature",disabled:G})]}):i(k,{type:"button",styleType:"secondary","aria-label":"Add signature",id:j,onClick:()=>F(!0),disabled:G,children:"Add signature"})}),i(P,{"data-testid":"signature-modal",show:R,children:i(B,{children:t(w,{onClose:()=>F(!1),children:[i(E,{children:"Signature"}),i(x,{children:t(C,{children:[i(I,{}),i(m,{fallback:null,children:R&&i(v,{ref:H,baseImageDataURL:J})})]})}),t(A,{children:[i(T,{sizeType:V?"small":"default",type:"button",styleType:N&&!V?"light":"link",icon:i(o,{}),onClick:W,children:"Clear"}),i(T,{sizeType:V?"small":"default",type:"button",onClick:X,children:"Save"})]})]})})}),l?i(M,{children:l}):null]}))};export{z as ESignature};
+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, useEffect, useRef, useState } from \"react\";\n\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport {\n    Breakpoint,\n    DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT,\n    useMaxWidthMediaQuery,\n    useMediaQuery,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n    default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\nconst {\n    AddSignatureButton,\n    EditSignatureButton,\n    ESignatureContainer,\n    ESignatureDrawable,\n    GrowContainer,\n    Instructions,\n    ModalActionButton,\n    ModalBox,\n    ModalButtons,\n    ModalTitle,\n    ProgressBox,\n    ScrollableModal,\n    SignatureArea,\n    SignatureLine,\n    SignaturePreviewImage,\n} = styles;\n\nexport const ESignature = (props: EsignatureProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        description,\n        id,\n        loadingProgress,\n        loadingLabel = \"Uploading...\",\n        onChange,\n        value,\n        disabled,\n        ...otherProps\n    } = props;\n    const [showModal, setShowModal] = useState(false);\n    const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n    const [dataURL, setDataURL] = useState<string | null | undefined>(value);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const mobileBreakpoint = useResolvedBreakpointToken(\n        Breakpoint[\"sm-max\"],\n        DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT\n    );\n    const isMobileLandscape = useMediaQuery({\n        clauses: [\n            {\n                feature: \"orientation\",\n                value: \"landscape\",\n            },\n            {\n                feature: \"max-height\",\n                value: mobileBreakpoint,\n            },\n        ],\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClearDrawing = () => {\n        eSignatureCanvasRef.current?.clear();\n    };\n\n    const handleClickSave = () => {\n        if (eSignatureCanvasRef.current) {\n            const dataURL = eSignatureCanvasRef.current.export();\n            setDataURL(dataURL);\n            setShowModal(false);\n            onChange?.(dataURL);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setDataURL(value);\n    }, [value]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSignatureArea = () => {\n        if (!dataURL) {\n            return (\n                <AddSignatureButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    aria-label=\"Add signature\"\n                    id={id}\n                    onClick={() => setShowModal(true)}\n                    disabled={disabled}\n                >\n                    Add signature\n                </AddSignatureButton>\n            );\n        }\n\n        return (\n            <>\n                <SignaturePreviewImage src={dataURL} alt=\"Signature preview\" />\n                <EditSignatureButton\n                    styleType=\"light\"\n                    onClick={() => setShowModal(true)}\n                    id={id}\n                    icon={<PencilIcon />}\n                    aria-label=\"Edit signature\"\n                    disabled={disabled}\n                />\n            </>\n        );\n    };\n\n    const renderLoadingIndicator = () => {\n        return (\n            <ProgressBox>\n                {loadingLabel && (\n                    <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n                )}\n                <ProgressBar\n                    progress={loadingProgress ?? 0}\n                    data-testid={`${id || \"e-signature\"}-progress-bar`}\n                />\n            </ProgressBox>\n        );\n    };\n\n    const renderModal = () => {\n        return (\n            <ScrollableModal data-testid=\"signature-modal\" show={showModal}>\n                <GrowContainer>\n                    <ModalBox onClose={() => setShowModal(false)}>\n                        <ModalTitle>Signature</ModalTitle>\n                        <ESignatureContainer>\n                            <ESignatureDrawable>\n                                <SignatureLine />\n                                <Suspense fallback={null}>\n                                    {showModal && (\n                                        <ESignatureCanvas\n                                            ref={eSignatureCanvasRef}\n                                            baseImageDataURL={dataURL}\n                                        />\n                                    )}\n                                </Suspense>\n                            </ESignatureDrawable>\n                        </ESignatureContainer>\n                        <ModalButtons>\n                            <ModalActionButton\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                styleType={\n                                    isMobile && !isMobileLandscape\n                                        ? \"light\"\n                                        : \"link\"\n                                }\n                                icon={<EraserIcon />}\n                                onClick={handleClearDrawing}\n                            >\n                                Clear\n                            </ModalActionButton>\n                            <ModalActionButton\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                onClick={handleClickSave}\n                            >\n                                Save\n                            </ModalActionButton>\n                        </ModalButtons>\n                    </ModalBox>\n                </GrowContainer>\n            </ScrollableModal>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) return null;\n        return <Instructions>{description}</Instructions>;\n    };\n\n    return (\n        <div {...otherProps}>\n            <SignatureArea $disabled={disabled}>\n                {typeof loadingProgress === \"number\"\n                    ? renderLoadingIndicator()\n                    : renderSignatureArea()}\n            </SignatureArea>\n            {renderModal()}\n            {renderDescription()}\n        </div>\n    );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","import","AddSignatureButton","EditSignatureButton","ESignatureContainer","ESignatureDrawable","GrowContainer","Instructions","ModalActionButton","ModalBox","ModalButtons","ModalTitle","ProgressBox","ScrollableModal","SignatureArea","SignatureLine","SignaturePreviewImage","styles","ESignature","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","isMobile","useMaxWidthMediaQuery","mobileBreakpoint","useResolvedBreakpointToken","Breakpoint","DEFAULT_MOBILE_MAX_WIDTH_BREAKPOINT","isMobileLandscape","useMediaQuery","clauses","feature","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","$disabled","Typography","BodyMD","ProgressBar","progress","src","alt","styleType","onClick","icon","PencilIcon","type","show","onClose","Suspense","fallback","ref","baseImageDataURL","sizeType","EraserIcon"],"mappings":"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"}
+{"version":3,"file":"e-signature.js","sources":["../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { DashedBorder } from \"../dashed-border\";\nimport { Modal } from \"../modal\";\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport {\n    Border,\n    Breakpoint,\n    Colour,\n    Radius,\n    useMaxWidthMediaQuery,\n    useMediaQuery,\n    useResolvedBreakpointToken,\n} from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n    default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\n/**\n * A field that lets users draw and save a signature.\n *\n * Use in forms that require a handwritten signature.\n */\nexport const ESignature = (props: EsignatureProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        description,\n        id,\n        loadingProgress,\n        loadingLabel = \"Uploading...\",\n        onChange,\n        value,\n        disabled,\n        ...otherProps\n    } = props;\n    const [showModal, setShowModal] = useState(false);\n    const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n    const [dataURL, setDataURL] = useState<string | null | undefined>(value);\n    const isMobile = useMaxWidthMediaQuery(\"sm\");\n    const mobileBreakpoint = useResolvedBreakpointToken(Breakpoint[\"sm-max\"]);\n    const isMobileLandscape = useMediaQuery({\n        clauses: [\n            {\n                feature: \"orientation\",\n                value: \"landscape\",\n            },\n            {\n                feature: \"max-height\",\n                value: mobileBreakpoint,\n            },\n        ],\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClearDrawing = () => {\n        eSignatureCanvasRef.current?.clear();\n    };\n\n    const handleClickSave = () => {\n        if (eSignatureCanvasRef.current) {\n            const dataURL = eSignatureCanvasRef.current.export();\n            setDataURL(dataURL);\n            setShowModal(false);\n            onChange?.(dataURL);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setDataURL(value);\n    }, [value]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSignatureArea = () => {\n        if (!dataURL) {\n            return (\n                <Button\n                    className={styles.addSignatureButton}\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    aria-label=\"Add signature\"\n                    id={id}\n                    onClick={() => setShowModal(true)}\n                    disabled={disabled}\n                >\n                    Add signature\n                </Button>\n            );\n        }\n\n        return (\n            <>\n                <img\n                    className={styles.signaturePreviewImage}\n                    src={dataURL}\n                    alt=\"Signature preview\"\n                />\n                <Button\n                    className={styles.editSignatureButton}\n                    styleType=\"light\"\n                    onClick={() => setShowModal(true)}\n                    id={id}\n                    icon={<PencilIcon />}\n                    aria-label=\"Edit signature\"\n                    disabled={disabled}\n                />\n            </>\n        );\n    };\n\n    const renderLoadingIndicator = () => {\n        return (\n            <div className={styles.progressBox}>\n                {loadingLabel && (\n                    <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n                )}\n                <ProgressBar\n                    progress={loadingProgress ?? 0}\n                    data-testid={`${id || \"e-signature\"}-progress-bar`}\n                />\n            </div>\n        );\n    };\n\n    const renderModal = () => {\n        return (\n            <Modal\n                className={styles.scrollableModal}\n                data-testid=\"signature-modal\"\n                show={showModal}\n            >\n                <div\n                    className={styles.growContainer}\n                    data-mobile-landscape={isMobileLandscape}\n                >\n                    <Modal.Box\n                        className={styles.modalBox}\n                        data-mobile-landscape={isMobileLandscape}\n                        onClose={() => setShowModal(false)}\n                    >\n                        <h2\n                            className={styles.modalTitle}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            Signature\n                        </h2>\n                        <div\n                            className={styles.eSignatureContainer}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            <div\n                                className={styles.eSignatureDrawable}\n                                data-mobile-landscape={isMobileLandscape}\n                            >\n                                <div\n                                    className={styles.signatureLine}\n                                    data-mobile-landscape={isMobileLandscape}\n                                />\n                                <Suspense fallback={null}>\n                                    {showModal && (\n                                        <ESignatureCanvas\n                                            ref={eSignatureCanvasRef}\n                                            baseImageDataURL={dataURL}\n                                        />\n                                    )}\n                                </Suspense>\n                            </div>\n                        </div>\n                        <div\n                            className={styles.modalButtons}\n                            data-mobile-landscape={isMobileLandscape}\n                        >\n                            <Button\n                                className={styles.modalActionButton}\n                                data-mobile-landscape={isMobileLandscape}\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                styleType={\n                                    isMobile && !isMobileLandscape\n                                        ? \"light\"\n                                        : \"link\"\n                                }\n                                icon={<EraserIcon />}\n                                onClick={handleClearDrawing}\n                            >\n                                Clear\n                            </Button>\n                            <Button\n                                className={styles.modalActionButton}\n                                data-mobile-landscape={isMobileLandscape}\n                                sizeType={\n                                    isMobileLandscape ? \"small\" : \"default\"\n                                }\n                                type=\"button\"\n                                onClick={handleClickSave}\n                            >\n                                Save\n                            </Button>\n                        </div>\n                    </Modal.Box>\n                </div>\n            </Modal>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) return null;\n        return (\n            <Typography.BodySM className={styles.instructions}>\n                {description}\n            </Typography.BodySM>\n        );\n    };\n\n    return (\n        <div {...otherProps}>\n            <DashedBorder\n                className={styles.signatureArea}\n                thickness={Border[\"width-040\"]}\n                radius={Radius[\"sm\"]}\n                colour={disabled ? Colour[\"border-disabled\"] : Colour[\"border\"]}\n                backgroundColor={\n                    disabled ? Colour[\"bg-disabled\"] : Colour[\"bg\"]\n                }\n            >\n                {typeof loadingProgress === \"number\"\n                    ? renderLoadingIndicator()\n                    : renderSignatureArea()}\n            </DashedBorder>\n            {renderModal()}\n            {renderDescription()}\n        </div>\n    );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","import","ESignature","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","isMobile","useMaxWidthMediaQuery","mobileBreakpoint","useResolvedBreakpointToken","Breakpoint","isMobileLandscape","useMediaQuery","clauses","feature","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","DashedBorder","className","styles.signatureArea","thickness","Border","radius","Radius","colour","Colour","backgroundColor","styles.progressBox","Typography","BodyMD","ProgressBar","progress","_Fragment","styles.signaturePreviewImage","src","alt","Button","styles.editSignatureButton","styleType","onClick","icon","PencilIcon","styles.addSignatureButton","type","Modal","styles.scrollableModal","show","styles.growContainer","Box","styles.modalBox","onClose","styles.modalTitle","styles.eSignatureContainer","styles.eSignatureDrawable","styles.signatureLine","Suspense","fallback","ref","baseImageDataURL","styles.modalButtons","styles.modalActionButton","sizeType","EraserIcon","BodySM","styles.instructions"],"mappings":"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"}

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

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

package/e-signature/e-signature.styles.js

@@ -1,169 +1,2 @@
-import i,{css as e}from"styled-components";import{Button as t}from"../button/button.js";import{DashedBorder as o}from"../dashed-border/dashed-border.js";import{Modal as r}from"../modal/index.js";import"../theme/theme-provider/index.js";import"react";import"../theme/theme-provider/context.js";import{Border as a}from"../theme/tokens/border.js";import{Colour as n}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as s}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"../theme/utils/use-media-query.js";import{Typography as d}from"../typography/index.js";import{V3_MediaQuery as m,V3_Breakpoint as p,V3_Spacing as g,V3_Colour as h,V3_Border as c,V3_Radius as l,V3_Font as $}from"../v3_theme/index.js";const b=e`
-    ${i=>`\n        ${m.MaxWidth.sm(i)},\n        (orientation: landscape) and (max-height: ${p["sm-max"](i)}px)\n    `}
-`,u=e`
-    ${i=>`\n        @media (orientation: landscape) and (max-height: ${p["sm-max"](i)}px)\n    `}
-`,x=i(o).attrs((i=>({thickness:a["width-040"],radius:s.sm,colour:i.$disabled?n["border-disabled"]:n.border,backgroundColor:i.$disabled?n["bg-disabled"]:n.bg})))`
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 14.125rem;
-`,f=i(t.Default)`
-    width: fit-content;
-    margin: 0 ${g["spacing-20"]};
-
-    &:disabled {
-        border-color: ${h["border-strong"]};
-    }
-`,w=i(t)`
-    position: absolute;
-    top: ${g["spacing-16"]};
-    right: ${g["spacing-16"]};
-
-    &:disabled {
-        border-color: ${h["border-strong"]};
-    }
-`,j=i.img`
-    display: block;
-    object-fit: contain;
-    object-position: center;
-    width: calc(100% - (3rem + ${g["spacing-16"]}) * 2);
-    height: 100%;
-`,y=i.div`
-    background: ${h["bg-primary-subtlest"]};
-    border: ${c["width-010"]} ${c.solid}
-        ${h.border};
-    border-radius: ${l.sm};
-    margin: 0 ${g["spacing-20"]};
-    padding: ${g["spacing-16"]};
-    display: flex;
-    gap: ${g["spacing-16"]};
-    flex: 1;
-    flex-direction: column;
-    align-items: center;
-`,v=i(d.BodySM)`
-    margin-top: ${g["spacing-16"]};
-`,k=i(r)`
-    /* increase specificity as the styles are overwritten */
-    && {
-        height: 100%;
-        overflow-y: auto;
-    }
-`,M=i.div`
-    width: 100%;
-    margin: auto;
-    padding: ${g["layout-xxl"]} ${g["layout-sm"]};
-
-    ${b} {
-        padding: 0;
-        width: 100%;
-        height: 100%;
-    }
-`,W=i(r.Box)`
-    width: 100%;
-    height: 29rem;
-    max-width: 672px;
-    max-height: none;
-    margin: 0 auto;
-    padding: ${g["spacing-16"]};
-
-    ${b} {
-        display: flex;
-        flex-direction: column;
-        max-width: none;
-        height: 100%;
-        border-radius: 0;
-        padding: 0;
-
-        --close-button-top-inset: ${g["spacing-8"]};
-        --close-button-right-inset: ${g["spacing-20"]};
-    }
-`,q=i.h2`
-    ${$["body-baseline-semibold"]}
-    color: ${h.text};
-    margin-bottom: ${g["spacing-16"]};
-    text-align: center;
-
-    ${b} {
-        ${$["body-md-semibold"]}
-        margin: ${g["spacing-12"]} 0;
-    }
-`,B=i.div`
-    width: 100%;
-    height: 20rem;
-    border-radius: ${l.lg};
-    overflow: hidden;
-
-    ${b} {
-        border-radius: 0;
-        flex: 1;
-    }
-
-    ${u} {
-        background: ${h["bg-strong"]};
-    }
-`,D=i.div`
-    position: relative;
-    width: 100%;
-    height: 100%;
-    background: ${h["bg-stronger"]};
-    margin: auto;
-
-    ${b} {
-        aspect-ratio: 4/3;
-    }
-    ${m.MaxWidth.sm} {
-        width: 100%;
-        height: auto;
-    }
-    ${u} {
-        width: auto;
-        height: 100%;
-    }
-`,C=i.div`
-    position: absolute;
-    left: 50%;
-    top: calc(75% - 1px);
-    width: 300px;
-    height: 2px;
-    transform: translateX(-50%);
-    background-color: ${h["border-strong"]};
-    pointer-events: none;
-
-    ${b} {
-        width: calc(100% - ${g["spacing-40"]});
-        max-width: 300px;
-        left: 50%;
-    }
-`,S=i.div`
-    display: flex;
-    justify-content: space-between;
-    margin-top: ${g["spacing-16"]};
-
-    ${m.MaxWidth.sm} {
-        flex-direction: column-reverse;
-        margin: ${g["spacing-16"]} ${g["spacing-24"]}
-            ${g["spacing-48"]};
-        gap: ${g["spacing-16"]};
-    }
-
-    ${u} {
-        flex-direction: row;
-        margin: ${g["spacing-16"]} ${g["spacing-20"]};
-    }
-`,X=i(t.Default)`
-    width: 8.5rem;
-    ${m.MaxWidth.sm} {
-        width: 100%;
-    }
-    ${u} {
-        height: 2.5rem;
-    }
-`,_=i.div`
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-`,z=i.canvas`
-    cursor: crosshair;
-`;export{f as AddSignatureButton,B as ESignatureContainer,D as ESignatureDrawable,w as EditSignatureButton,M as GrowContainer,v as Instructions,X as ModalActionButton,W as ModalBox,S as ModalButtons,q as ModalTitle,y as ProgressBox,k as ScrollableModal,x as SignatureArea,z as SignatureCanvas,_ as SignatureCanvasContainer,C as SignatureLine,j as SignaturePreviewImage};
+import"./e-signature.styles_lukd9f.css";const s="sf6ex5f",e="ar63c10",m="ewm2h5q",n="s10kgaon",i="pvyk01w",j="i1djtjln",k="s4jcnfi",o="g1i75dqj",r="mokviza",t="ml7zlxm",g="e7vuxoj",a="e17mguy2",l="sv01snj",u="mkkmrzr",v="m19bpnkq",c="s1ngo83b",f="s13sbvhj";export{e as addSignatureButton,g as eSignatureContainer,a as eSignatureDrawable,m as editSignatureButton,o as growContainer,j as instructions,v as modalActionButton,r as modalBox,u as modalButtons,t as modalTitle,i as progressBox,k as scrollableModal,s as signatureArea,f as signatureCanvas,c as signatureCanvasContainer,l as signatureLine,n as signaturePreviewImage};
 //# sourceMappingURL=e-signature.styles.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"e-signature.styles.js","sources":["../../src/e-signature/e-signature.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { DashedBorder } from \"../dashed-border\";\nimport { Modal } from \"../modal\";\nimport { Border, Colour, Radius } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport {\n    V3_Border,\n    V3_Breakpoint,\n    V3_Colour,\n    V3_Font,\n    V3_MediaQuery,\n    V3_Radius,\n    V3_Spacing,\n} from \"../v3_theme\";\n\n// =============================================================================\n// STYLE INTERFACES\n// =============================================================================\ninterface SignatureAreaProps {\n    $disabled: boolean | undefined;\n}\n\n// =============================================================================\n// CUSTOM MEDIA QUERIES\n// =============================================================================\n// for mobileL and below in both orientations\nconst mobileMediaQuery = css`\n    ${(props) => `\n        ${V3_MediaQuery.MaxWidth.sm(props)},\n        (orientation: landscape) and (max-height: ${V3_Breakpoint[\"sm-max\"](\n            props\n        )}px)\n    `}\n`;\nconst mobileLandscapeMediaQuery = css`\n    ${(props) => `\n        @media (orientation: landscape) and (max-height: ${V3_Breakpoint[\n            \"sm-max\"\n        ](props)}px)\n    `}\n`;\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN FIELD\n// -----------------------------------------------------------------------------\n\nexport const SignatureArea = styled(DashedBorder).attrs<SignatureAreaProps>(\n    (props) => ({\n        thickness: Border[\"width-040\"],\n        radius: Radius[\"sm\"],\n        colour: props.$disabled ? Colour[\"border-disabled\"] : Colour[\"border\"],\n        backgroundColor: props.$disabled ? Colour[\"bg-disabled\"] : Colour[\"bg\"],\n    })\n)<SignatureAreaProps>`\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 14.125rem;\n`;\n\nexport const AddSignatureButton = styled(Button.Default)`\n    width: fit-content;\n    margin: 0 ${V3_Spacing[\"spacing-20\"]};\n\n    &:disabled {\n        border-color: ${V3_Colour[\"border-strong\"]};\n    }\n`;\n\nexport const EditSignatureButton = styled(Button)`\n    position: absolute;\n    top: ${V3_Spacing[\"spacing-16\"]};\n    right: ${V3_Spacing[\"spacing-16\"]};\n\n    &:disabled {\n        border-color: ${V3_Colour[\"border-strong\"]};\n    }\n`;\n\nexport const SignaturePreviewImage = styled.img`\n    display: block;\n    object-fit: contain;\n    object-position: center;\n    width: calc(100% - (3rem + ${V3_Spacing[\"spacing-16\"]}) * 2);\n    height: 100%;\n`;\n\nexport const ProgressBox = styled.div`\n    background: ${V3_Colour[\"bg-primary-subtlest\"]};\n    border: ${V3_Border[\"width-010\"]} ${V3_Border[\"solid\"]}\n        ${V3_Colour[\"border\"]};\n    border-radius: ${V3_Radius[\"sm\"]};\n    margin: 0 ${V3_Spacing[\"spacing-20\"]};\n    padding: ${V3_Spacing[\"spacing-16\"]};\n    display: flex;\n    gap: ${V3_Spacing[\"spacing-16\"]};\n    flex: 1;\n    flex-direction: column;\n    align-items: center;\n`;\n\nexport const Instructions = styled(Typography.BodySM)`\n    margin-top: ${V3_Spacing[\"spacing-16\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// SIGNATURE MODAL\n// -----------------------------------------------------------------------------\n\nexport const ScrollableModal = styled(Modal)`\n    /* increase specificity as the styles are overwritten */\n    && {\n        height: 100%;\n        overflow-y: auto;\n    }\n`;\n\nexport const GrowContainer = styled.div`\n    width: 100%;\n    margin: auto;\n    padding: ${V3_Spacing[\"layout-xxl\"]} ${V3_Spacing[\"layout-sm\"]};\n\n    ${mobileMediaQuery} {\n        padding: 0;\n        width: 100%;\n        height: 100%;\n    }\n`;\n\nexport const ModalBox = styled(Modal.Box)`\n    width: 100%;\n    height: 29rem;\n    max-width: 672px;\n    max-height: none;\n    margin: 0 auto;\n    padding: ${V3_Spacing[\"spacing-16\"]};\n\n    ${mobileMediaQuery} {\n        display: flex;\n        flex-direction: column;\n        max-width: none;\n        height: 100%;\n        border-radius: 0;\n        padding: 0;\n\n        --close-button-top-inset: ${V3_Spacing[\"spacing-8\"]};\n        --close-button-right-inset: ${V3_Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const ModalTitle = styled.h2`\n    ${V3_Font[\"body-baseline-semibold\"]}\n    color: ${V3_Colour[\"text\"]};\n    margin-bottom: ${V3_Spacing[\"spacing-16\"]};\n    text-align: center;\n\n    ${mobileMediaQuery} {\n        ${V3_Font[\"body-md-semibold\"]}\n        margin: ${V3_Spacing[\"spacing-12\"]} 0;\n    }\n`;\n\nexport const ESignatureContainer = styled.div`\n    width: 100%;\n    height: 20rem;\n    border-radius: ${V3_Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${mobileMediaQuery} {\n        border-radius: 0;\n        flex: 1;\n    }\n\n    ${mobileLandscapeMediaQuery} {\n        background: ${V3_Colour[\"bg-strong\"]};\n    }\n`;\n\nexport const ESignatureDrawable = styled.div`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    background: ${V3_Colour[\"bg-stronger\"]};\n    margin: auto;\n\n    ${mobileMediaQuery} {\n        aspect-ratio: 4/3;\n    }\n    ${V3_MediaQuery.MaxWidth.sm} {\n        width: 100%;\n        height: auto;\n    }\n    ${mobileLandscapeMediaQuery} {\n        width: auto;\n        height: 100%;\n    }\n`;\n\nexport const SignatureLine = styled.div`\n    position: absolute;\n    left: 50%;\n    top: calc(75% - 1px);\n    width: 300px;\n    height: 2px;\n    transform: translateX(-50%);\n    background-color: ${V3_Colour[\"border-strong\"]};\n    pointer-events: none;\n\n    ${mobileMediaQuery} {\n        width: calc(100% - ${V3_Spacing[\"spacing-40\"]});\n        max-width: 300px;\n        left: 50%;\n    }\n`;\n\nexport const ModalButtons = styled.div`\n    display: flex;\n    justify-content: space-between;\n    margin-top: ${V3_Spacing[\"spacing-16\"]};\n\n    ${V3_MediaQuery.MaxWidth.sm} {\n        flex-direction: column-reverse;\n        margin: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-24\"]}\n            ${V3_Spacing[\"spacing-48\"]};\n        gap: ${V3_Spacing[\"spacing-16\"]};\n    }\n\n    ${mobileLandscapeMediaQuery} {\n        flex-direction: row;\n        margin: ${V3_Spacing[\"spacing-16\"]} ${V3_Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const ModalActionButton = styled(Button.Default)`\n    width: 8.5rem;\n    ${V3_MediaQuery.MaxWidth.sm} {\n        width: 100%;\n    }\n    ${mobileLandscapeMediaQuery} {\n        height: 2.5rem;\n    }\n`;\n\nexport const SignatureCanvasContainer = styled.div`\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const SignatureCanvas = styled.canvas`\n    cursor: crosshair;\n`;\n"],"names":["mobileMediaQuery","css","props","V3_MediaQuery","MaxWidth","sm","V3_Breakpoint","mobileLandscapeMediaQuery","SignatureArea","styled","DashedBorder","attrs","thickness","Border","radius","Radius","colour","$disabled","Colour","backgroundColor","AddSignatureButton","Button","Default","V3_Spacing","V3_Colour","EditSignatureButton","SignaturePreviewImage","img","ProgressBox","div","V3_Border","V3_Radius","Instructions","Typography","BodySM","ScrollableModal","Modal","GrowContainer","ModalBox","Box","ModalTitle","h2","V3_Font","ESignatureContainer","ESignatureDrawable","SignatureLine","ModalButtons","ModalActionButton","SignatureCanvasContainer","SignatureCanvas","canvas"],"mappings":"06BA4BA,MAAMA,EAAmBC,CAAG;MACrBC,GAAU,aACPC,EAAcC,SAASC,GAAGH,0DACgBI,EAAc,UACtDJ;EAINK,EAA4BN,CAAG;MAC9BC,GAAU,8DAC0CI,EAC/C,UACFJ;EAYGM,EAAgBC,EAAOC,GAAcC,OAC7CT,IAAK,CACFU,UAAWC,EAAO,aAClBC,OAAQC,EAAW,GACnBC,OAAQd,EAAMe,UAAYC,EAAO,mBAAqBA,EAAe,OACrEC,gBAAiBjB,EAAMe,UAAYC,EAAO,eAAiBA,EAAW,MAEzD;;;;;;EAQRE,EAAqBX,EAAOY,EAAOC,QAAQ;;gBAExCC,EAAW;;;wBAGHC,EAAU;;EAIrBC,EAAsBhB,EAAOY,EAAO;;WAEtCE,EAAW;aACTA,EAAW;;;wBAGAC,EAAU;;EAIrBE,EAAwBjB,EAAOkB,GAAG;;;;iCAIdJ,EAAW;;EAI/BK,EAAcnB,EAAOoB,GAAG;kBACnBL,EAAU;cACdM,EAAU,gBAAgBA,EAAiB;UAC/CN,EAAkB;qBACPO,EAAc;gBACnBR,EAAW;eACZA,EAAW;;WAEfA,EAAW;;;;EAMTS,EAAevB,EAAOwB,EAAWC,OAAO;kBACnCX,EAAW;EAOhBY,EAAkB1B,EAAO2B,EAAM;;;;;;EAQ/BC,EAAgB5B,EAAOoB,GAAG;;;eAGxBN,EAAW,iBAAiBA,EAAW;;MAEhDvB;;;;;EAOOsC,EAAW7B,EAAO2B,EAAMG,IAAI;;;;;;eAM1BhB,EAAW;;MAEpBvB;;;;;;;;oCAQ8BuB,EAAW;sCACTA,EAAW;;EAIpCiB,EAAa/B,EAAOgC,EAAE;MAC7BC,EAAQ;aACDlB,EAAgB;qBACRD,EAAW;;;MAG1BvB;UACI0C,EAAQ;kBACAnB,EAAW;;EAIhBoB,EAAsBlC,EAAOoB,GAAG;;;qBAGxBE,EAAc;;;MAG7B/B;;;;;MAKAO;sBACgBiB,EAAU;;EAInBoB,EAAqBnC,EAAOoB,GAAG;;;;kBAI1BL,EAAU;;;MAGtBxB;;;MAGAG,EAAcC,SAASC;;;;MAIvBE;;;;EAMOsC,EAAgBpC,EAAOoB,GAAG;;;;;;;wBAOfL,EAAU;;;MAG5BxB;6BACuBuB,EAAW;;;;EAM3BuB,EAAerC,EAAOoB,GAAG;;;kBAGpBN,EAAW;;MAEvBpB,EAAcC,SAASC;;kBAEXkB,EAAW,iBAAiBA,EAAW;cAC3CA,EAAW;eACVA,EAAW;;;MAGpBhB;;kBAEYgB,EAAW,iBAAiBA,EAAW;;EAI5CwB,EAAoBtC,EAAOY,EAAOC,QAAQ;;MAEjDnB,EAAcC,SAASC;;;MAGvBE;;;EAKOyC,EAA2BvC,EAAOoB,GAAG;;;;EAMrCoB,EAAkBxC,EAAOyC,MAAM;;"}
+{"version":3,"file":"e-signature.styles.js","sources":["../../src/e-signature/e-signature.styles.ts"],"sourcesContent":["import { css } from \"@linaria/core\";\n\nimport * as modalStyles from \"../modal/modal.styles\";\nimport { Border, Colour, Font, MediaQuery, Radius, Spacing } from \"../theme\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\n\n// -----------------------------------------------------------------------------\n// MAIN FIELD\n// -----------------------------------------------------------------------------\n\nexport const signatureArea = css`\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    height: 14.125rem;\n`;\n\nexport const addSignatureButton = css`\n    width: fit-content;\n    margin: 0 ${Spacing[\"spacing-20\"]};\n\n    &:disabled {\n        border-color: ${Colour[\"border-strong\"]};\n    }\n`;\n\nexport const editSignatureButton = css`\n    position: absolute;\n    top: ${Spacing[\"spacing-16\"]};\n    right: ${Spacing[\"spacing-16\"]};\n\n    &:disabled {\n        border-color: ${Colour[\"border-strong\"]};\n    }\n`;\n\nexport const signaturePreviewImage = css`\n    display: block;\n    object-fit: contain;\n    object-position: center;\n    width: calc(100% - (3rem + ${Spacing[\"spacing-16\"]}) * 2);\n    height: 100%;\n\n    [data-fds-theme-mode=\"dark\"] & {\n        filter: invert(1);\n    }\n`;\n\nexport const progressBox = css`\n    background: ${Colour[\"bg-primary-subtlest\"]};\n    border: ${Border[\"width-010\"]} ${Border[\"solid\"]} ${Colour[\"border\"]};\n    border-radius: ${Radius[\"sm\"]};\n    margin: 0 ${Spacing[\"spacing-20\"]};\n    padding: ${Spacing[\"spacing-16\"]};\n    display: flex;\n    gap: ${Spacing[\"spacing-16\"]};\n    flex: 1;\n    flex-direction: column;\n    align-items: center;\n`;\n\nexport const instructions = css`\n    margin-top: ${Spacing[\"spacing-16\"]};\n`;\n\n// -----------------------------------------------------------------------------\n// SIGNATURE MODAL\n// -----------------------------------------------------------------------------\n\nexport const scrollableModal = css`\n    /* increase specificity as the styles are overwritten */\n    && {\n        height: 100%;\n        overflow-y: auto;\n    }\n`;\n\nexport const growContainer = css`\n    width: 100%;\n    margin: auto;\n    padding: ${Spacing[\"layout-xxl\"]} ${Spacing[\"layout-sm\"]};\n\n    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape=\"true\"] {\n        padding: 0;\n        width: 100%;\n        height: 100%;\n    }\n`;\n\nexport const modalBox = css`\n    width: 100%;\n    height: 29rem;\n    max-width: 672px;\n    max-height: none;\n    margin: 0 auto;\n    padding: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape=\"true\"] {\n        display: flex;\n        flex-direction: column;\n        max-width: none;\n        height: 100%;\n        border-radius: 0;\n        padding: 0;\n\n        ${modalStyles.tokens.closeButton.topInset}: ${Spacing[\"spacing-8\"]};\n        ${modalStyles.tokens.closeButton.rightInset}: ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const modalTitle = css`\n    ${Font[\"body-baseline-semibold\"]}\n    color: ${Colour[\"text\"]};\n    margin-bottom: ${Spacing[\"spacing-16\"]};\n    text-align: center;\n\n    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape=\"true\"] {\n        ${Font[\"body-md-semibold\"]}\n        margin: ${Spacing[\"spacing-12\"]} 0;\n    }\n`;\n\nexport const eSignatureContainer = css`\n    width: 100%;\n    height: 20rem;\n    border-radius: ${Radius[\"lg\"]};\n    overflow: hidden;\n\n    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape=\"true\"] {\n        border-radius: 0;\n        flex: 1;\n    }\n\n    &[data-mobile-landscape=\"true\"] {\n        background: ${Colour[\"bg-strong\"]};\n    }\n`;\n\nexport const eSignatureDrawable = css`\n    position: relative;\n    width: 100%;\n    height: 100%;\n    background: ${Colour[\"bg-stronger\"]};\n    margin: auto;\n\n    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape=\"true\"] {\n        aspect-ratio: 4/3;\n    }\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n        height: auto;\n    }\n\n    &[data-mobile-landscape=\"true\"] {\n        width: auto;\n        height: 100%;\n    }\n`;\n\nexport const signatureLine = css`\n    position: absolute;\n    left: 50%;\n    top: calc(75% - 1px);\n    width: 300px;\n    height: 2px;\n    transform: translateX(-50%);\n    background-color: ${Colour[\"border-strong\"]};\n    pointer-events: none;\n\n    ${MediaQuery.MaxWidth.sm}, &[data-mobile-landscape=\"true\"] {\n        width: calc(100% - ${Spacing[\"spacing-40\"]});\n        max-width: 300px;\n        left: 50%;\n    }\n`;\n\nexport const modalButtons = css`\n    display: flex;\n    justify-content: space-between;\n    margin-top: ${Spacing[\"spacing-16\"]};\n\n    ${MediaQuery.MaxWidth.sm} {\n        flex-direction: column-reverse;\n        margin: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-24\"]}\n            ${Spacing[\"spacing-48\"]};\n        gap: ${Spacing[\"spacing-16\"]};\n    }\n\n    &[data-mobile-landscape=\"true\"] {\n        flex-direction: row;\n        margin: ${Spacing[\"spacing-16\"]} ${Spacing[\"spacing-20\"]};\n    }\n`;\n\nexport const modalActionButton = css`\n    width: 8.5rem;\n\n    ${MediaQuery.MaxWidth.sm} {\n        width: 100%;\n    }\n\n    &[data-mobile-landscape=\"true\"] {\n        height: 2.5rem;\n    }\n`;\n\nexport const signatureCanvasContainer = css`\n    width: 100%;\n    height: 100%;\n    overflow: hidden;\n`;\n\nexport const signatureCanvas = css`\n    cursor: crosshair;\n\n    [data-fds-theme-mode=\"dark\"] & {\n        filter: invert(1);\n    }\n`;\n"],"names":["signatureArea","addSignatureButton","editSignatureButton","signaturePreviewImage","progressBox","instructions","scrollableModal","growContainer","modalBox","modalTitle","eSignatureContainer","eSignatureDrawable","signatureLine","modalButtons","modalActionButton","signatureCanvasContainer","signatureCanvas"],"mappings":"mEAaO,MAAMA,EAAa,UAQbC,EAAkB,UASlBC,EAAmB,UAUnBC,EAAqB,WAYrBC,EAAW,UAaXC,EAAY,WAQZC,EAAe,UAQfC,EAAa,WAYbC,EAAQ,UAqBRC,EAAU,UAYVC,EAAmB,UAgBnBC,EAAkB,WAsBlBC,EAAa,UAiBbC,EAAY,UAkBZC,EAAiB,WAYjBC,EAAwB,WAMxBC,EAAe"}

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

@@ -0,0 +1,17 @@
+@layer fds{.sf6ex5f{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;height:14.125rem;}
+.ar63c10{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;margin:0 var(--fds-spacing-20);}.ar63c10:disabled{border-color:var(--fds-colour-border-strong);}
+.ewm2h5q{position:absolute;top:var(--fds-spacing-16);right:var(--fds-spacing-16);}.ewm2h5q:disabled{border-color:var(--fds-colour-border-strong);}
+.s10kgaon{display:block;object-fit:contain;object-position:center;width:calc(100% - (3rem + var(--fds-spacing-16)) * 2);height:100%;}[data-fds-theme-mode="dark"] .s10kgaon{-webkit-filter:invert(1);filter:invert(1);}
+.pvyk01w{background:var(--fds-colour-bg-primary-subtlest);border:var(--fds-border-width-010) var(--fds-border-style-solid) var(--fds-colour-border);border-radius:var(--fds-radius-sm);margin:0 var(--fds-spacing-20);padding:var(--fds-spacing-16);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;gap:var(--fds-spacing-16);-webkit-flex:1;-ms-flex:1;flex:1;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}
+.i1djtjln{margin-top:var(--fds-spacing-16);}
+.s4jcnfi.s4jcnfi{height:100%;overflow-y:auto;}
+.g1i75dqj{width:100%;margin:auto;padding:var(--fds-layout-xxl) var(--fds-layout-sm);}:where(body.fds-breakpoint-sm-max) .g1i75dqj,.g1i75dqj[data-mobile-landscape="true"]{padding:0;width:100%;height:100%;}
+.mokviza{width:100%;height:29rem;max-width:672px;max-height:none;margin:0 auto;padding:var(--fds-spacing-16);}:where(body.fds-breakpoint-sm-max) .mokviza,.mokviza[data-mobile-landscape="true"]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;max-width:none;height:100%;border-radius:0;padding:0;--fds-internal-modal-closeButton-topInset:var(--fds-spacing-8);--fds-internal-modal-closeButton-rightInset:var(--fds-spacing-20);}
+.ml7zlxm{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-baseline);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-baseline);letter-spacing:var(--fds-font-body-ls-baseline);color:var(--fds-colour-text);margin-bottom:var(--fds-spacing-16);text-align:center;}:where(body.fds-breakpoint-sm-max) .ml7zlxm,.ml7zlxm[data-mobile-landscape="true"]{font-family:var(--fds-font-family-body);font-variant:var(--fds-font-variant);font-size:var(--fds-font-body-size-md);font-weight:var(--fds-font-weight-semibold);line-height:var(--fds-font-body-lh-md);letter-spacing:var(--fds-font-body-ls-md);margin:var(--fds-spacing-12) 0;}
+.e7vuxoj{width:100%;height:20rem;border-radius:var(--fds-radius-lg);overflow:hidden;}:where(body.fds-breakpoint-sm-max) .e7vuxoj,.e7vuxoj[data-mobile-landscape="true"]{border-radius:0;-webkit-flex:1;-ms-flex:1;flex:1;}.e7vuxoj[data-mobile-landscape="true"]{background:var(--fds-colour-bg-strong);}
+.e17mguy2{position:relative;width:100%;height:100%;background:var(--fds-colour-bg-stronger);margin:auto;}:where(body.fds-breakpoint-sm-max) .e17mguy2,.e17mguy2[data-mobile-landscape="true"]{aspect-ratio:4/3;}:where(body.fds-breakpoint-sm-max) .e17mguy2{width:100%;height:auto;}.e17mguy2[data-mobile-landscape="true"]{width:auto;height:100%;}
+.sv01snj{position:absolute;left:50%;top:calc(75% - 1px);width:300px;height:2px;-webkit-transform:translateX(-50%);-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);background-color:var(--fds-colour-border-strong);pointer-events:none;}:where(body.fds-breakpoint-sm-max) .sv01snj,.sv01snj[data-mobile-landscape="true"]{width:calc(100% - var(--fds-spacing-40));max-width:300px;left:50%;}
+.mkkmrzr{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:space-between;-webkit-justify-content:space-between;justify-content:space-between;margin-top:var(--fds-spacing-16);}:where(body.fds-breakpoint-sm-max) .mkkmrzr{-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;margin:var(--fds-spacing-16) var(--fds-spacing-24) var(--fds-spacing-48);gap:var(--fds-spacing-16);}.mkkmrzr[data-mobile-landscape="true"]{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;margin:var(--fds-spacing-16) var(--fds-spacing-20);}
+.m19bpnkq{width:8.5rem;}:where(body.fds-breakpoint-sm-max) .m19bpnkq{width:100%;}.m19bpnkq[data-mobile-landscape="true"]{height:2.5rem;}
+.s1ngo83b{width:100%;height:100%;overflow:hidden;}
+.s13sbvhj{cursor:crosshair;}[data-fds-theme-mode="dark"] .s13sbvhj{-webkit-filter:invert(1);filter:invert(1);}}

package/e-signature/types.d.ts

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