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

package/drawer/drawer.styles.js

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

package/drawer/drawer.styles.js.map

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

package/drawer/drawer.styles_94hx3y.css

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

package/e-signature/e-signature.js

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

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

@@ -1 +1 @@
-{"version":3,"file":"e-signature.js","sources":["../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { Button } from \"../button\";\nimport { ButtonWithIcon } from \"../button-with-icon\";\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\nimport {\n    AddSignatureButton,\n    EditSignatureButton,\n    ESignatureContainer,\n    ESignatureDrawable,\n    GrowContainer,\n    Instructions,\n    ModalActionButton,\n    ModalBox,\n    ModalButtons,\n    ModalTitle,\n    ProgressBox,\n    ScrollableModal,\n    SignatureArea,\n    SignatureLine,\n    SignaturePreviewImage,\n} from \"./e-signature.styles\";\nimport type { ESignatureCanvasRef } from \"./e-signature-canvas\";\nimport type { EsignatureProps } from \"./types\";\n\n// lazy load to fix next.js SSR errors\nconst ESignatureCanvas = lazy(async () => ({\n    default: (await import(\"./e-signature-canvas\")).ESignatureCanvas,\n}));\n\nexport const ESignature = (props: EsignatureProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        description,\n        id,\n        loadingProgress,\n        loadingLabel = \"Uploading...\",\n        onChange,\n        value,\n        disabled,\n        ...otherProps\n    } = props;\n    const [showModal, setShowModal] = useState(false);\n    const eSignatureCanvasRef = useRef<ESignatureCanvasRef>(null);\n    const [dataURL, setDataURL] = useState<string | null | undefined>(value);\n    const theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const isMobileLandscape = useMediaQuery({\n        maxHeight: mobileBreakpoint,\n        orientation: \"landscape\",\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClearDrawing = () => {\n        eSignatureCanvasRef.current?.clear();\n    };\n\n    const handleClickSave = () => {\n        if (eSignatureCanvasRef.current) {\n            const dataURL = eSignatureCanvasRef.current.export();\n            setDataURL(dataURL);\n            setShowModal(false);\n            onChange?.(dataURL);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setDataURL(value);\n    }, [value]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSignatureArea = () => {\n        if (!dataURL) {\n            return (\n                <AddSignatureButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    aria-label=\"Add signature\"\n                    id={id}\n                    onClick={() => setShowModal(true)}\n                    disabled={disabled}\n                >\n                    Add signature\n                </AddSignatureButton>\n            );\n        }\n\n        return (\n            <>\n                <SignaturePreviewImage src={dataURL} alt=\"Signature preview\" />\n                <EditSignatureButton\n                    styleType=\"light\"\n                    onClick={() => setShowModal(true)}\n                    id={id}\n                    aria-label=\"Edit signature\"\n                    disabled={disabled}\n                >\n                    <PencilIcon />\n                </EditSignatureButton>\n            </>\n        );\n    };\n\n    const renderLoadingIndicator = () => {\n        return (\n            <ProgressBox>\n                {loadingLabel && (\n                    <Typography.BodyMD>{loadingLabel}</Typography.BodyMD>\n                )}\n                <ProgressBar\n                    progress={loadingProgress ?? 0}\n                    data-testid={`${id || \"e-signature\"}-progress-bar`}\n                />\n            </ProgressBox>\n        );\n    };\n\n    const renderModal = () => {\n        return (\n            <ScrollableModal data-testid=\"signature-modal\" show={showModal}>\n                <GrowContainer>\n                    <ModalBox onClose={() => setShowModal(false)}>\n                        <ModalTitle>Signature</ModalTitle>\n                        <ESignatureContainer>\n                            <ESignatureDrawable>\n                                <SignatureLine />\n                                <Suspense fallback={null}>\n                                    {showModal && (\n                                        <ESignatureCanvas\n                                            ref={eSignatureCanvasRef}\n                                            baseImageDataURL={dataURL}\n                                        />\n                                    )}\n                                </Suspense>\n                            </ESignatureDrawable>\n                        </ESignatureContainer>\n                        <ModalButtons>\n                            <ModalActionButton\n                                as={\n                                    isMobileLandscape\n                                        ? ButtonWithIcon.Small\n                                        : ButtonWithIcon.Default\n                                }\n                                type=\"button\"\n                                styleType={\n                                    isMobile && !isMobileLandscape\n                                        ? \"light\"\n                                        : \"link\"\n                                }\n                                icon={<EraserIcon />}\n                                onClick={handleClearDrawing}\n                            >\n                                Clear\n                            </ModalActionButton>\n                            <ModalActionButton\n                                as={\n                                    isMobileLandscape\n                                        ? Button.Small\n                                        : Button.Default\n                                }\n                                type=\"button\"\n                                onClick={handleClickSave}\n                            >\n                                Save\n                            </ModalActionButton>\n                        </ModalButtons>\n                    </ModalBox>\n                </GrowContainer>\n            </ScrollableModal>\n        );\n    };\n\n    const renderDescription = () => {\n        if (!description) return null;\n        return <Instructions>{description}</Instructions>;\n    };\n\n    return (\n        <div {...otherProps}>\n            <SignatureArea $disabled={disabled}>\n                {typeof loadingProgress === \"number\"\n                    ? renderLoadingIndicator()\n                    : renderSignatureArea()}\n            </SignatureArea>\n            {renderModal()}\n            {renderDescription()}\n        </div>\n    );\n};\n"],"names":["ESignatureCanvas","lazy","__awaiter","default","import","ESignature","props","description","id","loadingProgress","loadingLabel","onChange","value","disabled","otherProps","__rest","showModal","setShowModal","useState","eSignatureCanvasRef","useRef","dataURL","setDataURL","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","isMobileLandscape","maxHeight","orientation","handleClearDrawing","_a","current","clear","handleClickSave","export","useEffect","_jsxs","Object","assign","children","_jsx","SignatureArea","$disabled","ProgressBox","Typography","BodyMD","ProgressBar","progress","SignaturePreviewImage","src","alt","EditSignatureButton","styleType","onClick","PencilIcon","AddSignatureButton","type","ScrollableModal","show","GrowContainer","ModalBox","onClose","ModalTitle","ESignatureContainer","ESignatureDrawable","SignatureLine","Suspense","fallback","ref","baseImageDataURL","ModalButtons","ModalActionButton","as","ButtonWithIcon","Small","Default","icon","EraserIcon","Button","Instructions"],"mappings":"4hCA+BA,MAAMA,EAAmBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACtCC,eAAgBC,OAAO,4BAAyBJ,iBAClD,MAEWK,EAAcC,IAIvB,MAAMC,YACFA,EAAWC,GACXA,EAAEC,gBACFA,EAAeC,aACfA,EAAe,eAAcC,SAC7BA,EAAQC,MACRA,EAAKC,SACLA,GAEAP,EADGQ,EAAUC,EACbT,EATE,CAAA,cAAA,KAAA,kBAAA,eAAA,WAAA,QAAA,cAUCU,EAAWC,GAAgBC,GAAS,GACrCC,EAAsBC,EAA4B,OACjDC,EAASC,GAAcJ,EAAoCN,GAC5DW,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBF,EAAAA,cAAc,CACpCG,UAAWN,EACXO,YAAa,cAMXC,EAAqB,WACI,QAA3BC,EAAAhB,EAAoBiB,eAAO,IAAAD,GAAAA,EAAEE,OAAO,EAGlCC,EAAkB,KACpB,GAAInB,EAAoBiB,QAAS,CAC7B,MAAMf,EAAUF,EAAoBiB,QAAQG,SAC5CjB,EAAWD,GACXJ,GAAa,GACbN,SAAAA,EAAWU,EACf,GAMJmB,GAAU,KACNlB,EAAWV,EAAM,GAClB,CAACA,IA+GJ,OACI6B,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAAS7B,EAAU,CAAA8B,SAAA,CACfC,EAACC,EAAa,CAAAC,UAAYlC,EAAQ+B,SACF,iBAApBnC,EA3EZgC,EAACO,EAAW,CAAAJ,SAAA,CACPlC,GACGmC,EAACI,EAAWC,OAAM,CAAAN,SAAElC,IAExBmC,EAACM,EAAW,CACRC,SAAU3C,QAAAA,EAAmB,EAAC,cACjB,GAAGD,GAAM,kCAvC7Ba,EAgBDoB,eACII,EAACQ,GAAsBC,IAAKjC,EAASkC,IAAI,sBACzCV,EAACW,GACGC,UAAU,QACVC,QAAS,IAAMzC,GAAa,GAC5BT,GAAIA,EAAE,aACK,iBACXK,SAAUA,EAAQ+B,SAElBC,EAACc,EAAU,CAAA,QAvBfd,EAACe,EAAkB,CACfC,KAAK,SACLJ,UAAU,YAAW,aACV,gBACXjD,GAAIA,EACJkD,QAAS,IAAMzC,GAAa,GAC5BJ,SAAUA,EAAQ+B,SAAA,oBAuC1BC,EAACiB,EAAe,CAAA,cAAa,kBAAkBC,KAAM/C,WACjD6B,EAACmB,EAAa,CAAApB,SACVH,EAACwB,EAAQ,CAACC,QAAS,IAAMjD,GAAa,GAAM2B,SAAA,CACxCC,EAACsB,EAAU,CAAAvB,SAAA,cACXC,EAACuB,EAAmB,CAAAxB,SAChBH,EAAC4B,EAAkB,CAAAzB,SAAA,CACfC,EAACyB,EAAa,CAAA,GACdzB,EAAC0B,EAAQ,CAACC,SAAU,KAAI5B,SACnB5B,GACG6B,EAAC7C,EAAgB,CACbyE,IAAKtD,EACLuD,iBAAkBrD,WAMtCoB,EAACkC,aACG9B,EAAC+B,EAAiB,CACdC,GACI9C,EACM+C,EAAeC,MACfD,EAAeE,QAEzBnB,KAAK,SACLJ,UACI7B,IAAaG,EACP,QACA,OAEVkD,KAAMpC,EAACqC,EAAU,CAAA,GACjBxB,QAASxB,qBAIbW,EAAC+B,EAAiB,CACdC,GACI9C,EACMoD,EAAOJ,MACPI,EAAOH,QAEjBnB,KAAK,SACLH,QAASpB,EAAeM,SAAA,mBAY3CrC,EACEsC,EAACuC,EAAY,CAAAxC,SAAErC,IADG,QAanB"}
+{"version":3,"file":"e-signature.js","sources":["../../src/e-signature/e-signature.tsx"],"sourcesContent":["import { EraserIcon, PencilIcon } from \"@lifesg/react-icons\";\nimport { lazy, Suspense, useContext, useEffect, useRef, useState } from \"react\";\nimport { useMediaQuery } from \"react-responsive\";\nimport { ThemeContext } from \"styled-components\";\n\nimport { ProgressBar } from \"../shared/progress-bar\";\nimport { Typography } from \"../typography\";\nimport { V3_Breakpoint } from \"../v3_theme\";\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 theme = useContext(ThemeContext);\n    const mobileBreakpoint = V3_Breakpoint[\"sm-max\"]({ theme });\n    const isMobile = useMediaQuery({ maxWidth: mobileBreakpoint });\n    const isMobileLandscape = useMediaQuery({\n        maxHeight: mobileBreakpoint,\n        orientation: \"landscape\",\n    });\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleClearDrawing = () => {\n        eSignatureCanvasRef.current?.clear();\n    };\n\n    const handleClickSave = () => {\n        if (eSignatureCanvasRef.current) {\n            const dataURL = eSignatureCanvasRef.current.export();\n            setDataURL(dataURL);\n            setShowModal(false);\n            onChange?.(dataURL);\n        }\n    };\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setDataURL(value);\n    }, [value]);\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderSignatureArea = () => {\n        if (!dataURL) {\n            return (\n                <AddSignatureButton\n                    type=\"button\"\n                    styleType=\"secondary\"\n                    aria-label=\"Add signature\"\n                    id={id}\n                    onClick={() => setShowModal(true)}\n                    disabled={disabled}\n                >\n                    Add signature\n                </AddSignatureButton>\n            );\n        }\n\n        return (\n            <>\n                <SignaturePreviewImage src={dataURL} alt=\"Signature preview\" />\n                <EditSignatureButton\n                    styleType=\"light\"\n                    onClick={() => setShowModal(true)}\n                    id={id}\n                    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","theme","useContext","ThemeContext","mobileBreakpoint","V3_Breakpoint","isMobile","useMediaQuery","maxWidth","isMobileLandscape","maxHeight","orientation","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":"snBAaA,MAAMA,EAAmBC,GAAK,IAAWC,OAAA,OAAA,OAAA,GAAA,YAAC,MAAA,CACtCC,eAAgBC,OAAO,4BAAyBJ,iBAClD,OAEIK,mBACFA,EAAkBC,oBAClBA,EAAmBC,oBACnBA,EAAmBC,mBACnBA,EAAkBC,cAClBA,EAAaC,aACbA,EAAYC,kBACZA,EAAiBC,SACjBA,EAAQC,aACRA,EAAYC,WACZA,EAAUC,YACVA,EAAWC,gBACXA,EAAeC,cACfA,EAAaC,cACbA,EAAaC,sBACbA,GACAC,EAESC,EAAcC,IAIvB,MAAMC,YACFA,EAAWC,GACXA,EAAEC,gBACFA,EAAeC,aACfA,EAAe,eAAcC,SAC7BA,EAAQC,MACRA,EAAKC,SACLA,GAEAP,EADGQ,EAAUC,EACbT,EATE,CAAA,cAAA,KAAA,kBAAA,eAAA,WAAA,QAAA,cAUCU,EAAWC,GAAgBC,GAAS,GACrCC,EAAsBC,EAA4B,OACjDC,EAASC,GAAcJ,EAAoCN,GAC5DW,EAAQC,EAAWC,GACnBC,EAAmBC,EAAc,UAAU,CAAEJ,UAC7CK,EAAWC,EAAAA,cAAc,CAAEC,SAAUJ,IACrCK,EAAoBF,EAAAA,cAAc,CACpCG,UAAWN,EACXO,YAAa,cAMXC,EAAqB,WACI,QAA3BC,EAAAhB,EAAoBiB,eAAO,IAAAD,GAAAA,EAAEE,OAAO,EAGlCC,EAAkB,KACpB,GAAInB,EAAoBiB,QAAS,CAC7B,MAAMf,EAAUF,EAAoBiB,QAAQG,SAC5CjB,EAAWD,GACXJ,GAAa,GACbN,SAAAA,EAAWU,EACf,GAMJmB,GAAU,KACNlB,EAAWV,EAAM,GAClB,CAACA,IA0GJ,OACI6B,EAAA,MAAAC,OAAAC,OAAA,CAAA,EAAS7B,EAAU,CAAA8B,SAAA,CACfC,EAAC5C,EAAa,CAAA6C,UAAYjC,EAAQ+B,SACF,iBAApBnC,EAvEZgC,EAAC1C,EAAW,CAAA6C,SAAA,CACPlC,GACGmC,EAACE,EAAWC,OAAM,CAAAJ,SAAElC,IAExBmC,EAACI,EAAW,CACRC,SAAUzC,QAAAA,EAAmB,EAAC,cACjB,GAAGD,GAAM,kCAtC7Ba,EAgBDoB,eACII,EAAC1C,GAAsBgD,IAAK9B,EAAS+B,IAAI,sBACzCP,EAACvD,EAAmB,CAChB+D,UAAU,QACVC,QAAS,IAAMrC,GAAa,GAC5BT,GAAIA,EACJ+C,KAAMV,EAACW,EAAU,CAAA,GAAG,aACT,iBACX3C,SAAUA,OAtBdgC,EAACxD,EAAkB,CACfoE,KAAK,SACLJ,UAAU,YAAW,aACV,gBACX7C,GAAIA,EACJ8C,QAAS,IAAMrC,GAAa,GAC5BJ,SAAUA,EAAQ+B,SAAA,oBAsC1BC,EAAC7C,EAAe,CAAA,cAAa,kBAAkB0D,KAAM1C,EAAS4B,SAC1DC,EAACpD,EAAa,CAAAmD,SACVH,EAAC7C,EAAQ,CAAC+D,QAAS,IAAM1C,GAAa,aAClC4B,EAAC/C,0BACD+C,EAACtD,EAAmB,CAAAqD,SAChBH,EAACjD,EAAkB,CAAAoD,SAAA,CACfC,EAAC3C,EAAa,CAAA,GACd2C,EAACe,EAAQ,CAACC,SAAU,cACf7C,GACG6B,EAAC7D,GACG8E,IAAK3C,EACL4C,iBAAkB1C,WAMtCoB,EAAC5C,EAAY,CAAA+C,SAAA,CACTC,EAAClD,EAAiB,CACdqE,SACIjC,EAAoB,QAAU,UAElC0B,KAAK,SACLJ,UACIzB,IAAaG,EACP,QACA,OAEVwB,KAAMV,EAACoB,EAAU,CAAA,GACjBX,QAASpB,qBAIbW,EAAClD,EAAiB,CACdqE,SACIjC,EAAoB,QAAU,UAElC0B,KAAK,SACLH,QAAShB,EAAeM,SAAA,mBAY3CrC,EACEsC,EAACnD,EAAY,CAAAkD,SAAErC,IADG,QAanB"}

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

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

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

@@ -1,73 +1,73 @@
-import i,{css as t}from"styled-components";import{Button as e}from"../button/button.js";import{DashedBorder as o}from"../dashed-border/dashed-border.js";import{IconButton as r}from"../icon-button/icon-button.js";import{Modal as n}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 s}from"../theme/tokens/colour.js";import"../theme/tokens/font.js";import"../theme/tokens/media-query.js";import{Radius as d}from"../theme/tokens/radius.js";import"../util/calendar-helper.js";import"../external/dayjs/dayjs.min.js";import"../util/string-helper.js";import{Typography as m}from"../typography/index.js";import{V3_MediaQuery as p,V3_Breakpoint as g,V3_Spacing as h,V3_Colour as c,V3_Border as l,V3_Radius as $,V3_Font as b}from"../v3_theme/index.js";const u=t`
-    ${i=>`\n        ${p.MaxWidth.sm(i)},\n        (orientation: landscape) and (max-height: ${g["sm-max"](i)}px)\n    `}
-`,x=t`
-    ${i=>`\n        @media (orientation: landscape) and (max-height: ${g["sm-max"](i)}px)\n    `}
-`,f=i(o).attrs((i=>({thickness:a["width-040"],radius:d.sm,colour:i.$disabled?s["border-disabled"]:s.border,backgroundColor:i.$disabled?s["bg-disabled"]:s.bg})))`
+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{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;
-`,w=i(e.Default)`
+`,f=i(t.Default)`
     width: fit-content;
-    margin: 0 ${h["spacing-20"]};
+    margin: 0 ${g["spacing-20"]};
 
     &:disabled {
-        border-color: ${c["border-strong"]};
+        border-color: ${h["border-strong"]};
     }
-`,j=i(r)`
+`,w=i(t)`
     position: absolute;
-    top: ${h["spacing-16"]};
-    right: ${h["spacing-16"]};
+    top: ${g["spacing-16"]};
+    right: ${g["spacing-16"]};
 
     &:disabled {
-        border-color: ${c["border-strong"]};
+        border-color: ${h["border-strong"]};
     }
-`,y=i.img`
+`,j=i.img`
     display: block;
     object-fit: contain;
     object-position: center;
-    width: calc(100% - (3rem + ${h["spacing-16"]}) * 2);
+    width: calc(100% - (3rem + ${g["spacing-16"]}) * 2);
     height: 100%;
-`,v=i.div`
-    background: ${c["bg-primary-subtlest"]};
-    border: ${l["width-010"]} ${l.solid}
-        ${c.border};
-    border-radius: ${$.sm};
-    margin: 0 ${h["spacing-20"]};
-    padding: ${h["spacing-16"]};
+`,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: ${h["spacing-16"]};
+    gap: ${g["spacing-16"]};
     flex: 1;
     flex-direction: column;
     align-items: center;
-`,k=i(m.BodySM)`
-    margin-top: ${h["spacing-16"]};
-`,M=i(n)`
+`,v=i(d.BodySM)`
+    margin-top: ${g["spacing-16"]};
+`,k=i(r)`
     /* increase specificity as the styles are overwritten */
     && {
         height: 100%;
         overflow-y: auto;
     }
-`,W=i.div`
+`,M=i.div`
     width: 100%;
     margin: auto;
-    padding: ${h["layout-xxl"]} ${h["layout-sm"]};
+    padding: ${g["layout-xxl"]} ${g["layout-sm"]};
 
-    ${u} {
+    ${b} {
         padding: 0;
         width: 100%;
         height: 100%;
     }
-`,B=i(n.Box)`
+`,W=i(r.Box)`
     width: 100%;
     height: 29rem;
     max-width: 672px;
     max-height: none;
     margin: 0 auto;
-    padding: ${h["spacing-16"]};
+    padding: ${g["spacing-16"]};
 
-    ${u} {
+    ${b} {
         display: flex;
         flex-direction: column;
         max-width: none;
@@ -75,95 +75,95 @@ import i,{css as t}from"styled-components";import{Button as e}from"../button/but
         border-radius: 0;
         padding: 0;
 
-        --close-button-top-inset: ${h["spacing-8"]};
-        --close-button-right-inset: ${h["spacing-20"]};
+        --close-button-top-inset: ${g["spacing-8"]};
+        --close-button-right-inset: ${g["spacing-20"]};
     }
-`,D=i.h2`
-    ${b["body-baseline-semibold"]}
-    color: ${c.text};
-    margin-bottom: ${h["spacing-16"]};
+`,B=i.h2`
+    ${$["body-baseline-semibold"]}
+    color: ${h.text};
+    margin-bottom: ${g["spacing-16"]};
     text-align: center;
 
-    ${u} {
-        ${b["body-md-semibold"]}
-        margin: ${h["spacing-12"]} 0;
+    ${b} {
+        ${$["body-md-semibold"]}
+        margin: ${g["spacing-12"]} 0;
     }
-`,q=i.div`
+`,D=i.div`
     width: 100%;
     height: 20rem;
-    border-radius: ${$.lg};
+    border-radius: ${l.lg};
     overflow: hidden;
 
-    ${u} {
+    ${b} {
         border-radius: 0;
         flex: 1;
     }
 
-    ${x} {
-        background: ${c["bg-strong"]};
+    ${u} {
+        background: ${h["bg-strong"]};
     }
-`,C=i.div`
+`,q=i.div`
     position: relative;
     width: 100%;
     height: 100%;
-    background: ${c["bg-stronger"]};
+    background: ${h["bg-stronger"]};
     margin: auto;
 
-    ${u} {
+    ${b} {
         aspect-ratio: 4/3;
     }
-    ${p.MaxWidth.sm} {
+    ${m.MaxWidth.sm} {
         width: 100%;
         height: auto;
     }
-    ${x} {
+    ${u} {
         width: auto;
         height: 100%;
     }
-`,S=i.div`
+`,C=i.div`
     position: absolute;
     left: 50%;
     top: calc(75% - 1px);
     width: 300px;
     height: 2px;
     transform: translateX(-50%);
-    background-color: ${c["border-strong"]};
+    background-color: ${h["border-strong"]};
     pointer-events: none;
 
-    ${u} {
-        width: calc(100% - ${h["spacing-40"]});
+    ${b} {
+        width: calc(100% - ${g["spacing-40"]});
         max-width: 300px;
         left: 50%;
     }
-`,X=i.div`
+`,S=i.div`
     display: flex;
     justify-content: space-between;
-    margin-top: ${h["spacing-16"]};
+    margin-top: ${g["spacing-16"]};
 
-    ${p.MaxWidth.sm} {
+    ${m.MaxWidth.sm} {
         flex-direction: column-reverse;
-        margin: ${h["spacing-16"]} ${h["spacing-24"]}
-            ${h["spacing-48"]};
-        gap: ${h["spacing-16"]};
+        margin: ${g["spacing-16"]} ${g["spacing-24"]}
+            ${g["spacing-48"]};
+        gap: ${g["spacing-16"]};
     }
 
-    ${x} {
+    ${u} {
         flex-direction: row;
-        margin: ${h["spacing-16"]} ${h["spacing-20"]};
+        margin: ${g["spacing-16"]} ${g["spacing-20"]};
     }
-`,_=i(e.Default)`
+`,X=i(t.Default)`
     width: 8.5rem;
-    ${p.MaxWidth.sm} {
+    ${m.MaxWidth.sm} {
         width: 100%;
     }
-    ${x} {
+    ${u} {
         height: 2.5rem;
     }
-`,z=i.div`
+`,_=i.div`
     width: 100%;
     height: 100%;
     overflow: hidden;
-`,A=i.canvas`
+`,z=i.canvas`
     cursor: crosshair;
-`;export{w as AddSignatureButton,q as ESignatureContainer,C as ESignatureDrawable,j as EditSignatureButton,W as GrowContainer,k as Instructions,_ as ModalActionButton,B as ModalBox,X as ModalButtons,D as ModalTitle,v as ProgressBox,M as ScrollableModal,f as SignatureArea,A as SignatureCanvas,z as SignatureCanvasContainer,S as SignatureLine,y as SignaturePreviewImage};
+`;export{f as AddSignatureButton,D as ESignatureContainer,q as ESignatureDrawable,w as EditSignatureButton,M as GrowContainer,v as Instructions,X as ModalActionButton,W as ModalBox,S as ModalButtons,B as ModalTitle,y as ProgressBox,k as ScrollableModal,x as SignatureArea,z as SignatureCanvas,_ as SignatureCanvasContainer,C as SignatureLine,j as SignaturePreviewImage};
 //# sourceMappingURL=e-signature.styles.js.map