https://app.findalto.com/_next/static/chunks/pages/style-guide/signatures-c20f28a59f22fa08.js

1(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[2701],{41047:function(e,t,n){"use strict";n.d(t,{Z:function(){return m}});var r=n(36822),i=n(69368),o=n(63017),a=n(21477),s=n(59499),c=n(4730),l=n(90044),u=n(67294),d=n(86421),p=n(26613),g=n(25894),h=n(85893),f=["loading","paginationAlign","allowExpandOneRowOnly"];function x(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function v(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?x(Object(n),!0).forEach((function(t){(0,s.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):x(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}var j={indeterminate:function(e){return e}};function b(e){var t={rows:{style:{font:d.Z.typography.body2.font,fontSize:d.Z.typography.body2.fontSize,fontWeight:d.Z.typography.body2.fontWeight}},headCells:{style:{font:d.Z.typography.body2.font,fontSize:d.Z.typography.body2.fontSize,fontWeight:d.Z.typography.fontWeightBold,"@media print":{breakInside:"avoid"}}}};return e.paginationAlign&&("left"===e.paginationAlign?t.pagination={style:{justifyContent:"flex-start"}}:"center"===e.paginationAlign&&(t.pagination={style:{justifyContent:"center"}})),t}function m(e){var t=(0,u.useState)(),n=t[0],s=t[1],d=e.loading,x=e.paginationAlign,m=e.allowExpandOneRowOnly,Z=(0,c.Z)(e,f);return(0,h.jsx)(r.Z,{sx:v({},y.container),children:(0,h.jsx)(l.ZP,v({customStyles:b({paginationAlign:x}),sortIcon:(0,h.jsx)(p.Z,{sx:y.sortIcon}),selectableRowsComponent:i.Z,progressPending:d,progressComponent:(0,h.jsx)(g.Z,{}),highlightOnHover:!0,selectableRowsComponentProps:j,expandableIcon:{collapsed:(0,h.jsx)(a.Z,{}),expanded:(0,h.jsx)(o.Z,{})},expandableRowExpanded:function(e){return!!m&&e===n},onRowExpandToggled:function(e,t){return s(t)}},Z))})}var y={container:{margin:d.Z.spacing(1)},sortIcon:{display:"block",marginLeft:d.Z.spacing(.5)}}},25894:function(e,t,n){"use strict";n.d(t,{Z:function(){return u}});var r=n(36822),i=n(81458),o=n(59499),a=n(86421),s=n(85893);function c(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function l(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?c(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):c(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function u(){return(0,s.jsx)(r.Z,{sx:l({},d),children:(0,s.jsx)(i.Z,{variant:"indeterminate"})})}var d={width:"100%",marginY:a.Z.spacing(3)}},11904:function(e,t,n){"use strict";n.d(t,{Z:function(){return O}});var r=n(59499),i=n(64666),o=n(31425),a=n(6514),s=n(10547),c=n(36822),l=n(37645),u=n(93946),d=n(15861),p=n(86421),g=n(98396),h=n(50594),f=n(69417),x=n(67294),v=n(58877),j=n.n(v),b=n(75617),m=n.n(b),y=n(85893);function Z(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function O(e){var t=e.open,n=e.title,r=e.onSigned,v=e.required,b=e.onCancel,Z=e.onClose,O=e.disableOutsideClick,S=(0,g.Z)(p.Z.breakpoints.down("sm")),C=(0,x.useRef)(null),P=(0,x.useState)(!1),k=P[0],D=P[1],B=function(e,t){O&&t&&("backdropClick"===t||"escapeKeyDown"===t)||(D(!1),Z&&Z())},E=function(){var e;return null===(e=C.current)||void 0===e?void 0:e.isEmpty()};return(0,y.jsxs)(i.Z,{open:t,onClose:B,fullScreen:S,PaperProps:{sx:w.mainContainer},children:[n&&(0,y.jsxs)(l.Z,{sx:w.titleContainer,children:[(0,y.jsx)(d.Z,{sx:w.title,children:null!==n&&void 0!==n?n:"Signature"}),Z&&(0,y.jsx)(u.Z,{onClick:function(){return B(0,"closeButton")},sx:w.closeButton,size:"small",children:(0,y.jsx)(h.Z,{})})]}),(0,y.jsx)(a.Z,{sx:w.contentContainer,children:(0,y.jsxs)(c.Z,{children:[(0,y.jsx)(c.Z,{children:(0,y.jsx)(d.Z,{variant:"button",fontSize:"12px",color:p.Z.palette.grey[500],children:"Please sign in the square below"})}),(0,y.jsx)(c.Z,{sx:{width:"100%",height:"200px",position:"relative",boxShadow:"rgba(0, 0, 0, 0.15) 0px 2px 8px",border:"1px solid ".concat(k?p.Z.palette.error.dark:p.Z.palette.grey[200])},children:(0,y.jsx)(j(),{penColor:p.Z.palette.grey[800],canvasProps:{className:m().signatureCanvas},velocityFilterWeight:.7,minWidth:.5,maxWidth:2.25,minDistance:5,throttle:16,clearOnResize:!0,backgroundColor:p.Z.palette.background.paper,ref:C})}),(0,y.jsxs)(c.Z,{display:"flex",justifyContent:"space-between",alignItems:"center",children:[(0,y.jsx)(d.Z,{variant:"body2",color:"error",children:k&&E()?"a signature is required":""}),(0,y.jsxs)(f.Z,{variant:"text",size:"small",sx:{color:p.Z.palette.grey[500]},onClick:function(){return function(){var e;E()||(null===(e=C.current)||void 0===e||e.clear(),v&&D(!0))}()},children:[(0,y.jsx)(s.Z,{fontSize:"inherit"}),"\xa0Clear"]})]})]})}),(0,y.jsxs)(o.Z,{sx:{margin:p.Z.spacing(0,1.5,1.5)},children:[(0,y.jsx)(f.Z,{variant:"text",onClick:function(){D(!1),b()},children:"Cancel"}),(0,y.jsx)(f.Z,{variant:"contained",onClick:function(){var e;if(v&&E())D(!0);else{D(!1);

1var t=null===(e=C.current)||void 0===e?void 0:e.getTrimmedCanvas().toDataURL("image/png");t&&r(t)}},autoFocus:!0,children:"Sign"})]})]})}var w={mainContainer:{borderRadius:p.Z.spacing(1),border:"1px solid ".concat(p.Z.extendedPalette.lighterGrey),backgroundColor:p.Z.extendedPalette.offWhite},titleContainer:{padding:p.Z.spacing(2,1,1,2),display:"flex",justifyContent:"space-between"},title:function(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?Z(Object(n),!0).forEach((function(t){(0,r.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):Z(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}({},p.Z.typography.h5),contentContainer:(0,r.Z)({marginX:p.Z.spacing(1)},p.Z.breakpoints.up("sm"),{minWidth:"550px"}),closeButton:{marginTop:"-10px"}}},74712:function(e,t,n){"use strict";n.d(t,{c:function(){return m}});var r=n(50029),i=n(82262),o=n(92777),a=n(10748),s=n(81531),c=n(63553),l=n(37247),u=n(46576),d=n(59499),p=n(87794),g=n.n(p),h=n(42609),f=n(65327),x=n(56070);function v(e){var t=function(){if("undefined"===typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"===typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(e){return!1}}();return function(){var n,r=(0,l.Z)(e);if(t){var i=(0,l.Z)(this).constructor;n=Reflect.construct(r,arguments,i)}else n=r.apply(this,arguments);return(0,c.Z)(this,n)}}var j=function(e){(0,s.Z)(n,e);var t=v(n);function n(){var e,r=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",i=arguments.length>1?arguments[1]:void 0;return(0,o.Z)(this,n),e=t.call(this,r),(0,d.Z)((0,a.Z)(e),"errors",void 0),e.name="ImageStorageError",e.errors=i,e}return(0,i.Z)(n)}((0,u.Z)(Error)),b=function(){function e(){(0,o.Z)(this,e),(0,d.Z)(this,"uploadClient",void 0),this.uploadClient=new f.nT({publicKey:h.d.Public.getUploadcareKey()})}return(0,i.Z)(e,[{key:"saveFile",value:function(){var e=(0,r.Z)(g().mark((function e(t,n){var r,i;return g().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return r=null!==n&&void 0!==n?n:t.name,e.prev=1,e.next=4,this.uploadClient.uploadFile(t,{fileName:r});case 4:return i=e.sent,e.abrupt("return",Z(i));case 8:throw e.prev=8,e.t0=e.catch(1),x.Z.error("There was an error saving a file",500,{file:t,fileName:r,error:e.t0}),new j("There was a problem saving the file");case 12:case"end":return e.stop()}}),e,this,[[1,8]])})));return function(t,n){return e.apply(this,arguments)}}()},{key:"saveBase64DataURL",value:function(){var e=(0,r.Z)(g().mark((function e(t,n){var r;return g().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:r=void 0,e.prev=1,r=y(t,n),e.next=9;break;case 5:throw e.prev=5,e.t0=e.catch(1),x.Z.error("There was an error converting a base64 data URL to a file",500,{dataURL:t,fileName:n,error:e.t0}),new j("There was an error converting the base64 data URL to a file.");case 9:return e.abrupt("return",this.saveFile(r));case 10:case"end":return e.stop()}}),e,this,[[1,5]])})));return function(t,n){return e.apply(this,arguments)}}()}],[{key:"getInstance",value:function(){return e.instance||(e.instance=new e),e.instance}}]),e}();(0,d.Z)(b,"instance",void 0);var m=b.getInstance();function y(e,t){for(var n,r,i=e.split(","),o=null===i||void 0===i||null===(n=i[0])||void 0===n||null===(r=n.match(/:(.*?);/))||void 0===r?void 0:r[1],a=window.atob(i[1]),s=a.length,c=new Uint8Array(s);s--;)c[s]=a.charCodeAt(s);return new File([c],t,{type:o})}function Z(e){var t,n,r,i,o,a,s,c;return{id:e.uuid,name:null!==(t=e.name)&&void 0!==t?t:void 0,url:null!==(n=e.cdnUrl)&&void 0!==n?n:void 0,size:null!==(r=e.size)&&void 0!==r?r:void 0,mimeType:null!==(i=e.mimeType)&&void 0!==i?i:void 0,height:null!==(o=null===(a=e.imageInfo)||void 0===a?void 0:a.height)&&void 0!==o?o:void 0,width:null!==(s=null===(c=e.imageInfo)||void 0===c?void 0:c.width)&&void 0!==s?s:void 0}}},15862:function(e,t,n){"use strict";n.r(t),n.d(t,{SectionHeader:function(){return Z}

1,StyleGuideNavBar:function(){return O},default:function(){return y}});var r=n(69417),i=n(36822),o=n(59499),a=n(15861),s=n(16835),c=(n(67294),n(86421)),l=n(5792),u=n(19796),d=n(42609),p=n(22828),g=n(41047),h=n(59889),f=n(41664),x=n.n(f),v=n(52049),j=n(85893);function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?b(Object(n),!0).forEach((function(t){(0,o.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function y(e){var t=e.userId,n=e.user,o={sectionContainer:{margin:c.Z.spacing(7,2)},button:{margin:c.Z.spacing(1,2,1,0)},link:{cursor:"pointer",marginBottom:c.Z.spacing(1)}},f=p.Z.usePersistedNumber("style-guide-number",0),x=(0,s.Z)(f,2),v=x[0],b=x[1],y=p.Z.usePersistedString("style-guide-string",""),w=(0,s.Z)(y,2),S=w[0],C=w[1],P=d.d.Public.isLocal();return(0,j.jsxs)(j.Fragment,{children:[n&&!(0,l.j5)(n.roles)&&!P&&(0,j.jsx)(h.Z,{}),n&&((0,l.j5)(n.roles)||P)&&(0,j.jsxs)(j.Fragment,{children:[(0,j.jsx)(a.Z,{variant:"h3",ml:1,children:"Style Guide for Developers"}),(0,j.jsx)(O,{}),(0,j.jsxs)(i.Z,{sx:m({},o.sectionContainer),children:[(0,j.jsx)(Z,{label:"About you!"}),(0,j.jsxs)(a.Z,{variant:"body2",children:[(0,j.jsx)("strong",{children:"User Id:"})," ",t]}),(0,j.jsxs)(a.Z,{variant:"body2",children:[(0,j.jsx)("strong",{children:"Name:"})," ",n.firstname+" "+n.lastname]}),(0,j.jsxs)(a.Z,{variant:"body2",children:[(0,j.jsx)("strong",{children:"Env name:"})," ",d.d.Public.getEnvironmentName()]})]}),(0,j.jsxs)(i.Z,{sx:m({},o.sectionContainer),children:[(0,j.jsx)(Z,{label:"Typography"}),(0,j.jsx)(a.Z,{variant:"h1",component:"div",gutterBottom:!0,children:"h1. Heading"}),(0,j.jsx)(a.Z,{variant:"h2",gutterBottom:!0,component:"div",children:"h2. Heading"}),(0,j.jsx)(a.Z,{variant:"h3",gutterBottom:!0,component:"div",children:"h3. Heading"}),(0,j.jsx)(a.Z,{variant:"h4",gutterBottom:!0,component:"div",children:"h4. Heading"}),(0,j.jsx)(a.Z,{variant:"h5",gutterBottom:!0,component:"div",children:"h5. Heading"}),(0,j.jsx)(a.Z,{variant:"h6",gutterBottom:!0,component:"div",children:"h6. Heading"}),(0,j.jsx)(a.Z,{variant:"subtitle1",gutterBottom:!0,component:"div",children:"subtitle1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur"}),(0,j.jsx)(a.Z,{variant:"subtitle2",gutterBottom:!0,component:"div",children:"subtitle2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur"}),(0,j.jsx)(a.Z,{variant:"body1",gutterBottom:!0,children:"body1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam."}),(0,j.jsx)(a.Z,{variant:"body2",gutterBottom:!0,children:"body2. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam."}),(0,j.jsx)(a.Z,{variant:"button",display:"block",gutterBottom:!0,children:"button text"}),(0,j.jsx)(a.Z,{variant:"caption",display:"block",gutterBottom:!0,children:"caption text"}),(0,j.jsx)(a.Z,{variant:"overline",display:"block",gutterBottom:!0,children:"overline text"}),(0,j.jsx)("a",{href:u.nB.StyleGuide.Root,children:"Here is a link"})]}),(0,j.jsxs)(i.Z,{sx:m({},o.sectionContainer),children:[(0,j.jsx)(Z,{label:"Datatable"}),(0,j.jsx)(g.Z,{columns:[{name:"Title",selector:function(e){return e.title},sortable:!0},{name:"Year",selector:function(e){return e.year}}],data:[{id:1,title:"Beetlejuice",year:"1988"},{id:2,title:"Ghost busters",year:"1984"}]})]}),(0,j.jsxs)(i.Z,{sx:m({},o.sectionContainer),children:[(0,j.jsx)(Z,{label:"Local Storage"}),(0,j.jsxs)(a.Z,{variant:"body2",children:["This is a number from your local storage: ",(0,j.jsx)("strong",{children:v})]}),(0,j.jsxs)(a.Z,{variant:"body2",mb:2,children:["This is a string from your local storage: ",(0,j.jsx)("strong",{children:S})]}),(0,j.jsx)(r.Z,{variant:"contained",sx:m({},o.button),onClick:function(){var e=Math.floor(11*Math.random()+2);b(e),C(Array(e).join("my-string-")),setTimeout((function(){return window.location.reload()}),1500)},size:"small",children:"Click to set random persisted values (will auto-reload)"}),(0,j.jsx)(r.Z,{variant:"outlined",sx:m({},o.button),onClick:function(){p.Z.clearItem("style-guide-number"),p.Z.clearItem("style-guide-string"),setTimeout((function(){return window.location.reload()}),1e3)},size:"small",children:"Click to clear the values then reload (will auto-reload)"})]})]})]})}function Z(e){var t=e.label,n={container:{borderBottom:"1px solid ".concat(c.Z.palette.grey.A400),lineHeight:"0.1em"},text:{fontWeight:c.Z.typography.fontWeightBold,backgroundColor:c.Z.palette.common.white,lineHeight:"0.1em",padding:c.Z.spacing(0,1.5,0,0),align:"left"}};return(0,j.jsx)(i.Z,{my:3,sx:m({}

1,n.container),children:(0,j.jsx)(a.Z,{variant:"body1",component:"span",sx:m({},n.text),children:t})})}function O(){var e={container:m({display:"flex",margin:c.Z.spacing(3,2),overflowX:"scroll"},c.Z.noScrollBar),link:{cursor:"pointer","&:hover":{textDecoration:"".concat(c.Z.extendedPalette.darkGrey," underline"),textUnderlineOffset:"3px"},whiteSpace:"nowrap"},selectedLink:{fontWeight:c.Z.typography.fontWeightBold}};return(0,j.jsx)(i.Z,{sx:e.container,children:function(){var t=Object.keys(u.nB.StyleGuide);return t.map((function(n,r){var i=r===t.length-1,o=window.location.pathname===u.nB.StyleGuide[n];return(0,j.jsx)(x(),{href:u.nB.StyleGuide[n],passHref:!0,children:(0,j.jsxs)(a.Z,{variant:"body1",sx:[m({},e.link),o&&m({},e.selectedLink)],children:["Root"===n?"Home":(0,v.pI)(n),!i&&(0,j.jsx)(a.Z,{component:"span",mx:1.5,children:"|"})]})},"style-guide-nav-".concat(r))})).sort()}()})}},62747:function(e,t,n){"use strict";n.r(t),n.d(t,{default:function(){return y}});var r=n(16835),i=n(36822),o=n(69417),a=n(59499),s=n(15861),c=n(67294),l=n(86421),u=n(5792),d=n(59889),p=n(42609),g=n(15862),h=n(11904),f=n(74712),x=n(29565),v=n(9324),j=n(85893);function b(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function m(e){for(var t=1;t<arguments.length;t++){var n=null!=arguments[t]?arguments[t]:{};t%2?b(Object(n),!0).forEach((function(t){(0,a.Z)(e,t,n[t])})):Object.getOwnPropertyDescriptors?Object.defineProperties(e,Object.getOwnPropertyDescriptors(n)):b(Object(n)).forEach((function(t){Object.defineProperty(e,t,Object.getOwnPropertyDescriptor(n,t))}))}return e}function y(e){var t,n=e.user,a=(0,x.cV)(),b=(0,c.useState)(void 0),y=b[0],Z=b[1],O=(0,c.useState)(void 0),w=O[0],S=O[1],C=(0,c.useState)(void 0),P=C[0],k=C[1],D=(0,c.useState)(!1),B=D[0],E=D[1],R=(0,c.useState)(void 0),T=R[0],q=R[1],z=(0,c.useState)(!1),_=z[0],H=z[1],I=(0,c.useState)(!1),N=I[0],A=I[1],L=(0,c.useState)(!1),W=L[0],U=L[1],G={sectionContainer:{margin:l.Z.spacing(7,2)}},F=p.d.Public.isLocal();return(0,j.jsxs)(j.Fragment,{children:[n&&!(0,u.j5)(n.roles)&&!F&&(0,j.jsx)(d.Z,{}),n&&((0,u.j5)(n.roles)||F)&&(0,j.jsxs)(i.Z,{children:[(0,j.jsx)(s.Z,{variant:"h3",ml:1,children:"Style Guide: Signatures"}),(0,j.jsx)(g.StyleGuideNavBar,{}),(0,j.jsxs)(i.Z,{sx:m({},G.sectionContainer),children:[(0,j.jsx)(g.SectionHeader,{label:"Alto Signature Dialog"}),(0,j.jsxs)(i.Z,{display:"flex",gap:5,mt:4,children:[(0,j.jsxs)(i.Z,{children:[(0,j.jsx)(o.Z,{variant:"contained",size:"small",onClick:function(){return H(!0)},children:"Open the Dialog"}),(0,j.jsx)(h.Z,{title:"Signature",open:_,onSigned:function(e){Z(e),H(!1)},onCancel:function(){return H(!1)},onClose:function(){return H(!1)},disabled:!0})]}),(0,j.jsx)(i.Z,{children:y&&(0,j.jsx)("img",{src:y,alt:"Your Signature",width:150,height:"100%"})})]})]}),(0,j.jsxs)(i.Z,{sx:m({},G.sectionContainer),children:[(0,j.jsx)(g.SectionHeader,{label:"Alto Signature Dialog - Required & Outside Click Disabled"}),(0,j.jsxs)(i.Z,{display:"flex",gap:5,mt:4,children:[(0,j.jsxs)(i.Z,{children:[(0,j.jsx)(o.Z,{variant:"outlined",size:"small",onClick:function(){return A(!0)},children:"Open the Dialog (required)"}),(0,j.jsx)(h.Z,{title:"Nice",onClose:function(){return A(!1)},open:N,onSigned:function(e){S(e),A(!1)},onCancel:function(){return A(!1)},required:!0,disableOutsideClick:!0})]}),(0,j.jsx)(i.Z,{children:w&&(0,j.jsx)("img",{src:w,alt:"Your Signature",width:150,height:"100%"})})]})]}),(0,j.jsxs)(i.Z,{sx:m({},G.sectionContainer),children:[(0,j.jsx)(g.SectionHeader,{label:"Alto Signature Dialog - No Title & No Close Button"}),(0,j.jsxs)(i.Z,{display:"flex",gap:5,mt:4,children:[(0,j.jsxs)(i.Z,{children:[(0,j.jsx)(o.Z,{variant:"contained",size:"small",onClick:function(){return U(!0)},children:"Open the Dialog"}),(0,j.jsx)(h.Z,{open:W,onSigned:function(e){k(e),U(!1)},onClose:function(){return H(!1)},onCancel:function(){return U(!1)},required:!0})]}),(0,j.jsx)(i.Z,{children:P&&(0,j.jsx)("img",{src:P,alt:"Your Signature",width:150,height:"100%"})})]})]}),(0,j.jsxs)(i.Z,{sx:m({},G.sectionContainer),children:[(0,j.jsx)(g.SectionHeader,{label:"Alto Signature Dialog - Actually Saves to Uploadcare!!"}),(0,j.jsxs)(i.Z,{display:"flex",gap:5,mt:4,children:[(0,j.jsxs)(i.Z,{children:[(0,j.jsx)(o.Z,{variant:"outlined",size:"small",onClick:function(){return U(!0)},disabled:B,children:"Open the Dialog"}),(0,j.jsx)(h.Z,{open:W,onSigned:function(e){var t;t=e,E(!0),f.c.saveBase64DataURL(t,"".concat(n.userId,"_signature.png")).then((function(e){q(e),a.success("The file was saved: ".concat(e.url)),E(!1)})).catch((function(e){a.error("There was an error: ".concat(e)),E(!1)})),U(!1)},onClose:function(){return U(!1)},onCancel:function(){return U(!1)},required:!0})]}),(0,j.jsxs)(i.Z,{children:[B&&(0,j.jsx)(v.Z,{spinnerSize:20}),!B&&T&&(0,j.jsxs)(i.Z,{children:[(0,j.jsxs)(s.Z,{variant:"body2",fontSize:"12px",mb:1,children:["The image below has a `src` of\xa0",(0,j.jsx)("a",{target:"_blank",href:"".concat(T.url),children:T.url})]}),(0,j.jsx)("img",{src:null!==(t=T.url)&&void 0!==t?t:"",alt:"Saved Signature",width:150,height:"100%"}),Object.entries(T).map((function(e,t){var n=(0,r.Z)(e,2),i=n[0],o=n[1];return(0,j.jsxs)(s.Z,{variant:"body2",fontSize:"12px",children:[i,": ",o]},"info-".concat(t))}))]})]})]})]})]})]})}},80095:function(e,t,n){(window.__NEXT_P=window.__NEXT_P||[]).push(["/style-guide/signatures",function(){return n(62747)}])},75617:function(e){e.exports={signatureCanvas:"alto_signature_pad_signatureCanvas__ldQnM"}}},function(e){e.O(0,[1423,28,9774,2888,179],(function(){return t=80095,e(e.s=t);var t}));var t=e.O();_N_E=t}]);