freemium-ui 1.0.200 → 1.0.201

package/lib/index.cjs.js

@@ -231,7 +231,7 @@ object-assign
     background-color: ${go.palette.S900};
     color: ${go.palette.S10};
   }
-  `;process.env.NODE_ENV;var zo=Ho()?n.useLayoutEffect:n.useEffect,yo={},Mo=Co;if("production"!==process.env.NODE_ENV){var xo=("undefined"!=typeof process?process:{env:{NODE_ENV:"development"}}).env;Mo=function(e){yo[e]||(yo[e]=!0,"test"!==xo.NODE_ENV&&1!==parseInt(window.getComputedStyle(document.body).getPropertyValue("--reach-"+e),10)&&console.warn("@reach/"+e+' styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import "@reach/'+e+'/styles.css";\n\n  Otherwise you\'ll need to include them some other way:\n\n    <link rel="stylesheet" type="text/css" href="node_modules/@reach/'+e+'/styles.css" />\n\n  For more information visit https://ui.reach.tech/styling.\n  '))}}function wo(e,t){if(null!=e)if(function(e){return!(!e||"[object Function]"!={}.toString.call(e))}(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function Ho(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}function Co(){}function Vo(e,t){return function(n){if(e&&e(n),!n.defaultPrevented)return t(n)}}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;var ko=function(e){var r=e.children,a=e.type,o=void 0===a?"reach-portal":a,i=t.useRef(null),s=t.useRef(null),l=t.useState()[1];return zo((function(){if(i.current){var e=i.current.ownerDocument;return s.current=null==e?void 0:e.createElement(o),e.body.appendChild(s.current),l({}),function(){s.current&&s.current.ownerDocument&&s.current.ownerDocument.body.removeChild(s.current)}}}),[o]),s.current?c.createPortal(r,s.current):n.createElement("span",{ref:i})};function Lo(){return Lo=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Lo.apply(this,arguments)}function Eo(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}"production"!==process.env.NODE_ENV&&(ko.displayName="Portal");var So={allowPinchZoom:ro.bool,dangerouslyBypassFocusLock:ro.bool,dangerouslyBypassScrollLock:ro.bool,initialFocusRef:function(){return null},onDismiss:ro.func},_o=t.forwardRef((function(e,r){var a=e.isOpen,o=void 0===a||a,c=Eo(e,["isOpen"]);return t.useEffect((function(){return Mo("dialog")}),[]),t.useEffect((function(){o?window.__REACH_DISABLE_TOOLTIPS=!0:window.requestAnimationFrame((function(){window.__REACH_DISABLE_TOOLTIPS=!1}))}),[o]),o?n.createElement(ko,{"data-reach-dialog-wrapper":""},n.createElement(Ao,Object.assign({ref:r},c))):null}));"production"!==process.env.NODE_ENV&&(_o.displayName="DialogOverlay",_o.propTypes=Lo({},So,{isOpen:ro.bool}));var Ao=t.forwardRef((function(e,r){var a=e.allowPinchZoom,o=e.dangerouslyBypassFocusLock,c=void 0!==o&&o,i=e.dangerouslyBypassScrollLock,h=void 0!==i&&i,u=e.initialFocusRef,p=e.onClick,d=e.onDismiss,m=void 0===d?Co:d,v=e.onKeyDown,f=e.onMouseDown,g=e.unstable_lockFocusAcrossFrames,b=void 0===g||g,z=Eo(e,["allowPinchZoom","dangerouslyBypassFocusLock","dangerouslyBypassScrollLock","initialFocusRef","onClick","onDismiss","onKeyDown","onMouseDown","unstable_lockFocusAcrossFrames"]),y=t.useRef(null),M=t.useRef(null),x=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.useMemo((function(){return n.every((function(e){return null==e}))?null:function(e){n.forEach((function(t){wo(t,e)}))}}),[].concat(n))}(M,r),w=t.useCallback((function(){u&&u.current&&u.current.focus()}),[u]);return t.useEffect((function(){return M.current?function(e){var t=[],n=[],r=(a=e,(a&&a.ownerDocument?a.ownerDocument:Ho()?document:null)||document);var a;if(!e)return"production"!==process.env.NODE_ENV&&console.warn("A ref has not yet been attached to a dialog node when attempting to call `createAriaHider`."),Co;return Array.prototype.forEach.call(r.querySelectorAll("body > *"),(function(r){var a,o;if(r!==(null===(a=e.parentNode)||void 0===a||null===(o=a.parentNode)||void 0===o?void 0:o.parentNode)){var c=r.getAttribute("aria-hidden");null!==c&&"false"!==c||(t.push(c),n.push(r),r.setAttribute("aria-hidden","true"))}})),function(){n.forEach((function(e,n){var r=t[n];null===r?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",r)}))}}(M.current):void 0}),[]),n.createElement(s,{autoFocus:!0,returnFocus:!0,onActivation:w,disabled:c,crossFrame:b},n.createElement(l.RemoveScroll,{allowPinchZoom:a,enabled:!h},n.createElement("div",Object.assign({},z,{ref:x,"data-reach-dialog-overlay":"",onClick:Vo(p,(function(e){y.current===e.target&&(e.stopPropagation(),m(e))})),onKeyDown:Vo(v,(function(e){"Escape"===e.key&&(e.stopPropagation(),m(e))})),onMouseDown:Vo(f,(function(e){y.current=e.target}))}))))}));"production"!==process.env.NODE_ENV&&(_o.displayName="DialogOverlay",_o.propTypes=Lo({},So));var Do=t.forwardRef((function(e,t){var r=e.onClick,a=(e.onKeyDown,Eo(e,["onClick","onKeyDown"]));return n.createElement("div",Object.assign({"aria-modal":"true",role:"dialog",tabIndex:-1},a,{ref:t,"data-reach-dialog-content":"",onClick:Vo(r,(function(e){e.stopPropagation()}))}))}));"production"!==process.env.NODE_ENV&&(Do.displayName="DialogContent",Do.propTypes={"aria-label":Io,"aria-labelledby":Io});var Oo=t.forwardRef((function(e,t){var r=e.allowPinchZoom,a=void 0!==r&&r,o=e.initialFocusRef,c=e.isOpen,i=e.onDismiss,s=void 0===i?Co:i,l=Eo(e,["allowPinchZoom","initialFocusRef","isOpen","onDismiss"]);return n.createElement(_o,{allowPinchZoom:a,initialFocusRef:o,isOpen:c,onDismiss:s},n.createElement(Do,Object.assign({ref:t},l)))}));function Io(e,t,n,r,a){var o="\nSee https://www.w3.org/TR/wai-aria/#aria-label for details.";return e["aria-label"]||e["aria-labelledby"]?e["aria-label"]&&e["aria-labelledby"]?new Error("You provided both `aria-label` and `aria-labelledby` props to a <"+n+">. If the a label for this component is visible on the screen, that label's component should be given a unique ID prop, and that ID should be passed as the `aria-labelledby` prop into <"+n+">. If the label cannot be determined programmatically from the content of the element, an alternative label should be provided as the `aria-label` prop, which will be used as an `aria-label` on the HTML tag."+o):null!=e[t]&&"string"!=typeof e[t]?new Error("Invalid prop `"+t+"` supplied to `"+n+"`. Expected `string`, received `"+(Array.isArray(a)?"array":typeof a)+"`."):null:new Error("A <"+n+"> must have either an `aria-label` or `aria-labelledby` prop.\n      "+o)}function No(e){const{styles:n,in:r,timeout:a=150,transition:c=`all ${a}ms ease-in-out`,children:i,...s}=e;return t.createElement(o,Object.assign({appear:!0,unmountOnExit:!0,in:r,timeout:a},s),(e=>i((e=>({...n.init,transition:c,...n[e]}))(e))))}"production"!==process.env.NODE_ENV&&(Oo.displayName="Dialog",Oo.propTypes={isOpen:ro.bool,onDismiss:ro.func,"aria-label":Io,"aria-labelledby":Io});const Ro={init:{opacity:0},entered:{opacity:1},exiting:{opacity:0}};function Po(e){const{timeout:n=150,...r}=e;return t.createElement(No,Object.assign({transition:`all ${n}ms cubic-bezier(0.175, 0.885, 0.320, 1.175)`,styles:Ro,timeout:{enter:0,exit:n}},r))}function To(e){switch(e){case"bottom":return{maxWidth:"100vw",bottom:0,left:0,right:0};case"top":return{maxWidth:"100vw",top:0,left:0,right:0};case"left":return{height:"100vh",left:0,top:0};case"right":return{right:0,top:0,height:"100vh"}}}const Fo=(e,t)=>{let n="";return"left"!==e&&"right"!==e||(n="X"),"top"!==e&&"bottom"!==e||(n="Y"),`translate${n}(${t})`};function jo(e){const{placement:n="left",timeout:r=150,children:a,...o}=e,c=function(e){const t={bottom:"100%",top:"-100%",left:"-100%",right:"100%"};return{init:{transform:Fo(e,t[e])},entered:{transform:Fo(e,"0%")},exiting:{transform:Fo(e,t[e])}}}(n),i={position:"fixed",willChange:"transform",...To(n)};return t.createElement(No,Object.assign({styles:c,transition:`all ${r}ms cubic-bezier(0, 0, 0.2, 1)`,timeout:{enter:0,exit:r}},o),(e=>a({...i,...e})))}const Bo=e=>{const{initialOffset:n="20px",timeout:r=150,...a}=e,o=function(e){return{init:{opacity:0,transform:`translateY(${e})`},entered:{opacity:1,transform:"translateY(0px)"},exiting:{opacity:0,transform:`translateY(${e})`}}}(n);return t.createElement(No,Object.assign({styles:o,transition:`all ${r}ms cubic-bezier(0.4, 0.14, 0.3, 1)`,timeout:{enter:0,exit:r}},a))},Yo=n.forwardRef(((e,t)=>{const{isOpen:r,title:a="",confirmButtonText:o="",cancelButtonText:c="",contentStyles:i={},bodyStyles:s={},footerStyles:l={},children:h=null,confirmButtonDisabled:u=!1,cancelButtonDisabled:p=!1,onConfirm:d=(()=>{}),onDismiss:m}=e;return n.createElement(Po,{timeout:300,in:r,unmountOnExit:!0},(e=>n.createElement(Wo,{style:e,isOpen:!0,onDismiss:m},n.createElement(Bo,{timeout:150,in:r,unmountOnExit:!0},(e=>n.createElement($o,{style:{...e,...i}},n.createElement(Uo,{style:s},a&&n.createElement("h4",null,a),h&&n.createElement("div",null,h)),(c||o)&&n.createElement(Ko,{style:l},c&&n.createElement(po,{disabled:p,inline:!0,type:"secondary",onClick:m},c),o&&n.createElement(po,{disabled:u,inline:!0,onClick:d},o))))))))})),$o=tt(Do)`
+  `;process.env.NODE_ENV;var zo=Ho()?n.useLayoutEffect:n.useEffect,yo={},Mo=Co;if("production"!==process.env.NODE_ENV){var xo=("undefined"!=typeof process?process:{env:{NODE_ENV:"development"}}).env;Mo=function(e){yo[e]||(yo[e]=!0,"test"!==xo.NODE_ENV&&1!==parseInt(window.getComputedStyle(document.body).getPropertyValue("--reach-"+e),10)&&console.warn("@reach/"+e+' styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import "@reach/'+e+'/styles.css";\n\n  Otherwise you\'ll need to include them some other way:\n\n    <link rel="stylesheet" type="text/css" href="node_modules/@reach/'+e+'/styles.css" />\n\n  For more information visit https://ui.reach.tech/styling.\n  '))}}function wo(e,t){if(null!=e)if(function(e){return!(!e||"[object Function]"!={}.toString.call(e))}(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function Ho(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}function Co(){}function Vo(e,t){return function(n){if(e&&e(n),!n.defaultPrevented)return t(n)}}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;var ko=function(e){var r=e.children,a=e.type,o=void 0===a?"reach-portal":a,i=t.useRef(null),s=t.useRef(null),l=t.useState()[1];return zo((function(){if(i.current){var e=i.current.ownerDocument;return s.current=null==e?void 0:e.createElement(o),e.body.appendChild(s.current),l({}),function(){s.current&&s.current.ownerDocument&&s.current.ownerDocument.body.removeChild(s.current)}}}),[o]),s.current?c.createPortal(r,s.current):n.createElement("span",{ref:i})};function Lo(){return Lo=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},Lo.apply(this,arguments)}function Eo(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}"production"!==process.env.NODE_ENV&&(ko.displayName="Portal");var So={allowPinchZoom:ro.bool,dangerouslyBypassFocusLock:ro.bool,dangerouslyBypassScrollLock:ro.bool,initialFocusRef:function(){return null},onDismiss:ro.func},_o=t.forwardRef((function(e,r){var a=e.isOpen,o=void 0===a||a,c=Eo(e,["isOpen"]);return t.useEffect((function(){return Mo("dialog")}),[]),t.useEffect((function(){o?window.__REACH_DISABLE_TOOLTIPS=!0:window.requestAnimationFrame((function(){window.__REACH_DISABLE_TOOLTIPS=!1}))}),[o]),o?n.createElement(ko,{"data-reach-dialog-wrapper":""},n.createElement(Ao,Object.assign({ref:r},c))):null}));"production"!==process.env.NODE_ENV&&(_o.displayName="DialogOverlay",_o.propTypes=Lo({},So,{isOpen:ro.bool}));var Ao=t.forwardRef((function(e,r){var a=e.allowPinchZoom,o=e.dangerouslyBypassFocusLock,c=void 0!==o&&o,i=e.dangerouslyBypassScrollLock,h=void 0!==i&&i,u=e.initialFocusRef,p=e.onClick,d=e.onDismiss,m=void 0===d?Co:d,v=e.onKeyDown,f=e.onMouseDown,g=e.unstable_lockFocusAcrossFrames,b=void 0===g||g,z=Eo(e,["allowPinchZoom","dangerouslyBypassFocusLock","dangerouslyBypassScrollLock","initialFocusRef","onClick","onDismiss","onKeyDown","onMouseDown","unstable_lockFocusAcrossFrames"]),y=t.useRef(null),M=t.useRef(null),x=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.useMemo((function(){return n.every((function(e){return null==e}))?null:function(e){n.forEach((function(t){wo(t,e)}))}}),[].concat(n))}(M,r),w=t.useCallback((function(){u&&u.current&&u.current.focus()}),[u]);return t.useEffect((function(){return M.current?function(e){var t=[],n=[],r=(a=e,(a&&a.ownerDocument?a.ownerDocument:Ho()?document:null)||document);var a;if(!e)return"production"!==process.env.NODE_ENV&&console.warn("A ref has not yet been attached to a dialog node when attempting to call `createAriaHider`."),Co;return Array.prototype.forEach.call(r.querySelectorAll("body > *"),(function(r){var a,o;if(r!==(null===(a=e.parentNode)||void 0===a||null===(o=a.parentNode)||void 0===o?void 0:o.parentNode)){var c=r.getAttribute("aria-hidden");null!==c&&"false"!==c||(t.push(c),n.push(r),r.setAttribute("aria-hidden","true"))}})),function(){n.forEach((function(e,n){var r=t[n];null===r?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",r)}))}}(M.current):void 0}),[]),n.createElement(s,{autoFocus:!0,returnFocus:!0,onActivation:w,disabled:c,crossFrame:b},n.createElement(l.RemoveScroll,{allowPinchZoom:a,enabled:!h},n.createElement("div",Object.assign({},z,{ref:x,"data-reach-dialog-overlay":"",onClick:Vo(p,(function(e){y.current===e.target&&(e.stopPropagation(),m(e))})),onKeyDown:Vo(v,(function(e){"Escape"===e.key&&(e.stopPropagation(),m(e))})),onMouseDown:Vo(f,(function(e){y.current=e.target}))}))))}));"production"!==process.env.NODE_ENV&&(_o.displayName="DialogOverlay",_o.propTypes=Lo({},So));var Do=t.forwardRef((function(e,t){var r=e.onClick,a=(e.onKeyDown,Eo(e,["onClick","onKeyDown"]));return n.createElement("div",Object.assign({"aria-modal":"true",role:"dialog",tabIndex:-1},a,{ref:t,"data-reach-dialog-content":"",onClick:Vo(r,(function(e){e.stopPropagation()}))}))}));"production"!==process.env.NODE_ENV&&(Do.displayName="DialogContent",Do.propTypes={"aria-label":Io,"aria-labelledby":Io});var Oo=t.forwardRef((function(e,t){var r=e.allowPinchZoom,a=void 0!==r&&r,o=e.initialFocusRef,c=e.isOpen,i=e.onDismiss,s=void 0===i?Co:i,l=Eo(e,["allowPinchZoom","initialFocusRef","isOpen","onDismiss"]);return n.createElement(_o,{allowPinchZoom:a,initialFocusRef:o,isOpen:c,onDismiss:s},n.createElement(Do,Object.assign({ref:t},l)))}));function Io(e,t,n,r,a){var o="\nSee https://www.w3.org/TR/wai-aria/#aria-label for details.";return e["aria-label"]||e["aria-labelledby"]?e["aria-label"]&&e["aria-labelledby"]?new Error("You provided both `aria-label` and `aria-labelledby` props to a <"+n+">. If the a label for this component is visible on the screen, that label's component should be given a unique ID prop, and that ID should be passed as the `aria-labelledby` prop into <"+n+">. If the label cannot be determined programmatically from the content of the element, an alternative label should be provided as the `aria-label` prop, which will be used as an `aria-label` on the HTML tag."+o):null!=e[t]&&"string"!=typeof e[t]?new Error("Invalid prop `"+t+"` supplied to `"+n+"`. Expected `string`, received `"+(Array.isArray(a)?"array":typeof a)+"`."):null:new Error("A <"+n+"> must have either an `aria-label` or `aria-labelledby` prop.\n      "+o)}function No(e){const{styles:n,in:r,timeout:a=150,transition:c=`all ${a}ms ease-in-out`,children:i,...s}=e;return t.createElement(o,Object.assign({appear:!0,unmountOnExit:!0,in:r,timeout:a},s),(e=>i((e=>({...n.init,transition:c,...n[e]}))(e))))}"production"!==process.env.NODE_ENV&&(Oo.displayName="Dialog",Oo.propTypes={isOpen:ro.bool,onDismiss:ro.func,"aria-label":Io,"aria-labelledby":Io});const Ro={init:{opacity:0},entered:{opacity:1},exiting:{opacity:0}};function Po(e){const{timeout:n=150,...r}=e;return t.createElement(No,Object.assign({transition:`all ${n}ms cubic-bezier(0.175, 0.885, 0.320, 1.175)`,styles:Ro,timeout:{enter:0,exit:n}},r))}function To(e){switch(e){case"bottom":return{maxWidth:"100vw",bottom:0,left:0,right:0};case"top":return{maxWidth:"100vw",top:0,left:0,right:0};case"left":return{height:"100vh",left:0,top:0};case"right":return{right:0,top:0,height:"100vh"}}}const Fo=(e,t)=>{let n="";return"left"!==e&&"right"!==e||(n="X"),"top"!==e&&"bottom"!==e||(n="Y"),`translate${n}(${t})`};function jo(e){const{placement:n="left",timeout:r=150,children:a,...o}=e,c=function(e){const t={bottom:"100%",top:"-100%",left:"-100%",right:"100%"};return{init:{transform:Fo(e,t[e])},entered:{transform:Fo(e,"0%")},exiting:{transform:Fo(e,t[e])}}}(n),i={position:"fixed",willChange:"transform",...To(n)};return t.createElement(No,Object.assign({styles:c,transition:`all ${r}ms cubic-bezier(0, 0, 0.2, 1)`,timeout:{enter:0,exit:r}},o),(e=>a({...i,...e})))}const Bo=e=>{const{initialOffset:n="20px",timeout:r=150,...a}=e,o=function(e){return{init:{opacity:0,transform:`translateY(${e})`},entered:{opacity:1,transform:"translateY(0px)"},exiting:{opacity:0,transform:`translateY(${e})`}}}(n);return t.createElement(No,Object.assign({styles:o,transition:`all ${r}ms cubic-bezier(0.4, 0.14, 0.3, 1)`,timeout:{enter:0,exit:r}},a))},Yo=n.forwardRef(((e,t)=>{const{isOpen:r,title:a="",confirmButtonText:o="",cancelButtonText:c="",contentStyles:i={},bodyStyles:s={},footerStyles:l={},children:h=null,confirmButtonDisabled:u=!1,cancelButtonDisabled:p=!1,onConfirm:d=(()=>{}),onDismiss:m}=e;return n.createElement(Po,{timeout:300,in:r,unmountOnExit:!0},(e=>n.createElement(Wo,{style:e,isOpen:!0,onDismiss:m},n.createElement(Bo,{timeout:150,in:r,unmountOnExit:!0},(e=>n.createElement($o,{"aria-label":"confirmation-content",style:{...e,...i}},n.createElement(Uo,{style:s},a&&n.createElement("h4",null,a),h&&n.createElement("div",null,h)),(c||o)&&n.createElement(Ko,{style:l},c&&n.createElement(po,{disabled:p,inline:!0,type:"secondary",onClick:m},c),o&&n.createElement(po,{disabled:u,inline:!0,onClick:d},o))))))))})),$o=tt(Do)`
   width: auto;
   min-width: 512px;
   background: #fff;
@@ -292,7 +292,7 @@ object-assign
   background: ${({theme:e})=>e.palette.elephant};
 `,ac=tt.div`
   ${({theme:{colors:{components:{confirmModal:e}}}})=>`\n    position: fixed;\n    bottom: 0;\n    width: 100%;\n    justify-content: flex-end;\n    display: flex;\n    padding: 12px 16px 12px 16px;\n    border-top: 1px solid ${e.border};\n    background: ${e.background};\n    border-radius: 4px;\n  `}
-`,oc=t.createContext({content:{},overlay:{}}),cc=()=>t.useContext(oc);function ic(e){const{in:n,children:r,placement:a}=e;return t.createElement(jo,{in:n,placement:a,timeout:450},(e=>t.createElement(Po,{in:n,timeout:250},(t=>r({content:e,overlay:t})))))}const sc=({children:e,size:n})=>{const{content:r}=cc();return t.createElement(Qo,{className:"modal-content",size:n,style:r},e)},lc=({isOpen:e,children:n,...r})=>{const{overlay:a}=cc();return t.createElement(qo,Object.assign({className:"model-overlay",isOpen:e,style:a},r),n)},hc=(e,t)=>{const n=()=>(new Date).getTime(),r=()=>o=n();let a,o=n()-t;return(...c)=>new Promise((i=>{const s=o+t-n();a&&clearTimeout(a),o+t<=n()?(r(),i(e(...c))):a=setTimeout((()=>{r(),i(e(...c))}),s)}))},uc={height:0,width:0,x:2e3,y:2e3,bottom:0,left:0,right:0,top:0,toJSON:()=>{}};let pc;const dc=e=>{const{onClose:t=(()=>{}),children:r,autoCloseDuration:a=800,anchorEl:o=null,hoverOutToClose:c=!1,clickOutToClose:s=!0,id:l,anchorOrigin:h={vertical:"bottom",horizontal:"center"},transformOrigin:u={vertical:"top",horizontal:"center"}}=e,p=o&&o.getBoundingClientRect()||uc,[d,m]=n.useState({left:p.y,top:p.x}),v=n.createRef(),f=()=>{const e=v.current&&v.current.getBoundingClientRect()||uc;if(v.current){const t=((e,t,n,r)=>{let a=e.y,o=e.x;const{width:c,height:i}=t;switch(n.vertical){case"center":a+=e.height/2;break;case"bottom":a+=e.height}switch(n.horizontal){case"center":o+=e.width/2;break;case"right":o+=e.width}switch(r.vertical){case"center":a-=i/2;break;case"bottom":a-=i}switch(r.horizontal){case"center":o-=c/2;break;case"right":o-=c}const{innerWidth:s,innerHeight:l}=window;o+c>s&&(o-=o+c-s+16);a+i>l&&(a-=a+i-l+16);return{top:a,left:o}})(p,e,h,u);m(t)}};window.addEventListener("resize",hc(f,500)),window.addEventListener("scroll",hc(f,500)),n.useEffect((()=>{f(),o&&c&&(clearTimeout(pc),pc=setTimeout((()=>{t()}),a))}),[o]);const g=o&&o.getAttribute("aria-describedby");return o&&l===g?i.createPortal(n.createElement(vc,{id:l,onClick:s?e=>t(e):()=>{}},n.createElement(mc,{onMouseEnter:()=>clearTimeout(pc),onMouseLeave:c?e=>t(e):()=>{},ref:v,style:d},r)),document.body):null},mc=tt.div`
+`,oc=t.createContext({content:{},overlay:{}}),cc=()=>t.useContext(oc);function ic(e){const{in:n,children:r,placement:a}=e;return t.createElement(jo,{in:n,placement:a,timeout:450},(e=>t.createElement(Po,{in:n,timeout:250},(t=>r({content:e,overlay:t})))))}const sc=({children:e,size:n})=>{const{content:r}=cc();return t.createElement(Qo,{"aria-label":"modal-content",className:"modal-content",size:n,style:r},e)},lc=({isOpen:e,children:n,...r})=>{const{overlay:a}=cc();return t.createElement(qo,Object.assign({className:"model-overlay",isOpen:e,style:a},r),n)},hc=(e,t)=>{const n=()=>(new Date).getTime(),r=()=>o=n();let a,o=n()-t;return(...c)=>new Promise((i=>{const s=o+t-n();a&&clearTimeout(a),o+t<=n()?(r(),i(e(...c))):a=setTimeout((()=>{r(),i(e(...c))}),s)}))},uc={height:0,width:0,x:2e3,y:2e3,bottom:0,left:0,right:0,top:0,toJSON:()=>{}};let pc;const dc=e=>{const{onClose:t=(()=>{}),children:r,autoCloseDuration:a=800,anchorEl:o=null,hoverOutToClose:c=!1,clickOutToClose:s=!0,id:l,anchorOrigin:h={vertical:"bottom",horizontal:"center"},transformOrigin:u={vertical:"top",horizontal:"center"}}=e,p=o&&o.getBoundingClientRect()||uc,[d,m]=n.useState({left:p.y,top:p.x}),v=n.createRef(),f=()=>{const e=v.current&&v.current.getBoundingClientRect()||uc;if(v.current){const t=((e,t,n,r)=>{let a=e.y,o=e.x;const{width:c,height:i}=t;switch(n.vertical){case"center":a+=e.height/2;break;case"bottom":a+=e.height}switch(n.horizontal){case"center":o+=e.width/2;break;case"right":o+=e.width}switch(r.vertical){case"center":a-=i/2;break;case"bottom":a-=i}switch(r.horizontal){case"center":o-=c/2;break;case"right":o-=c}const{innerWidth:s,innerHeight:l}=window;o+c>s&&(o-=o+c-s+16);a+i>l&&(a-=a+i-l+16);return{top:a,left:o}})(p,e,h,u);m(t)}};window.addEventListener("resize",hc(f,500)),window.addEventListener("scroll",hc(f,500)),n.useEffect((()=>{f(),o&&c&&(clearTimeout(pc),pc=setTimeout((()=>{t()}),a))}),[o]);const g=o&&o.getAttribute("aria-describedby");return o&&l===g?i.createPortal(n.createElement(vc,{id:l,onClick:s?e=>t(e):()=>{}},n.createElement(mc,{onMouseEnter:()=>clearTimeout(pc),onMouseLeave:c?e=>t(e):()=>{},ref:v,style:d},r)),document.body):null},mc=tt.div`
   position: absolute;
 `,vc=tt.div`
   top: 0;

package/lib/index.esm.js

@@ -231,7 +231,7 @@ object-assign
     background-color: ${$o.palette.S900};
     color: ${$o.palette.S10};
   }
-  `;process.env.NODE_ENV;var Uo=Xo()?e.useLayoutEffect:e.useEffect,Ko={},Go=Jo;if("production"!==process.env.NODE_ENV){var qo=("undefined"!=typeof process?process:{env:{NODE_ENV:"development"}}).env;Go=function(e){Ko[e]||(Ko[e]=!0,"test"!==qo.NODE_ENV&&1!==parseInt(window.getComputedStyle(document.body).getPropertyValue("--reach-"+e),10)&&console.warn("@reach/"+e+' styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import "@reach/'+e+'/styles.css";\n\n  Otherwise you\'ll need to include them some other way:\n\n    <link rel="stylesheet" type="text/css" href="node_modules/@reach/'+e+'/styles.css" />\n\n  For more information visit https://ui.reach.tech/styling.\n  '))}}function Zo(e,t){if(null!=e)if(function(e){return!(!e||"[object Function]"!={}.toString.call(e))}(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function Xo(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}function Jo(){}function Qo(e,t){return function(n){if(e&&e(n),!n.defaultPrevented)return t(n)}}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;var ec=function(t){var n=t.children,a=t.type,o=void 0===a?"reach-portal":a,c=r(null),i=r(null),s=l()[1];return Uo((function(){if(c.current){var e=c.current.ownerDocument;return i.current=null==e?void 0:e.createElement(o),e.body.appendChild(i.current),s({}),function(){i.current&&i.current.ownerDocument&&i.current.ownerDocument.body.removeChild(i.current)}}}),[o]),i.current?C(n,i.current):e.createElement("span",{ref:c})};function tc(){return tc=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},tc.apply(this,arguments)}function nc(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}"production"!==process.env.NODE_ENV&&(ec.displayName="Portal");var rc={allowPinchZoom:_o.bool,dangerouslyBypassFocusLock:_o.bool,dangerouslyBypassScrollLock:_o.bool,initialFocusRef:function(){return null},onDismiss:_o.func},ac=s((function(t,n){var r=t.isOpen,a=void 0===r||r,o=nc(t,["isOpen"]);return h((function(){return Go("dialog")}),[]),h((function(){a?window.__REACH_DISABLE_TOOLTIPS=!0:window.requestAnimationFrame((function(){window.__REACH_DISABLE_TOOLTIPS=!1}))}),[a]),a?e.createElement(ec,{"data-reach-dialog-wrapper":""},e.createElement(oc,Object.assign({ref:n},o))):null}));"production"!==process.env.NODE_ENV&&(ac.displayName="DialogOverlay",ac.propTypes=tc({},rc,{isOpen:_o.bool}));var oc=s((function(t,a){var o=t.allowPinchZoom,c=t.dangerouslyBypassFocusLock,i=void 0!==c&&c,s=t.dangerouslyBypassScrollLock,l=void 0!==s&&s,d=t.initialFocusRef,u=t.onClick,m=t.onDismiss,v=void 0===m?Jo:m,f=t.onKeyDown,g=t.onMouseDown,b=t.unstable_lockFocusAcrossFrames,z=void 0===b||b,y=nc(t,["allowPinchZoom","dangerouslyBypassFocusLock","dangerouslyBypassScrollLock","initialFocusRef","onClick","onDismiss","onKeyDown","onMouseDown","unstable_lockFocusAcrossFrames"]),M=r(null),x=r(null),w=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n((function(){return t.every((function(e){return null==e}))?null:function(e){t.forEach((function(t){Zo(t,e)}))}}),[].concat(t))}(x,a),H=p((function(){d&&d.current&&d.current.focus()}),[d]);return h((function(){return x.current?function(e){var t=[],n=[],r=(a=e,(a&&a.ownerDocument?a.ownerDocument:Xo()?document:null)||document);var a;if(!e)return"production"!==process.env.NODE_ENV&&console.warn("A ref has not yet been attached to a dialog node when attempting to call `createAriaHider`."),Jo;return Array.prototype.forEach.call(r.querySelectorAll("body > *"),(function(r){var a,o;if(r!==(null===(a=e.parentNode)||void 0===a||null===(o=a.parentNode)||void 0===o?void 0:o.parentNode)){var c=r.getAttribute("aria-hidden");null!==c&&"false"!==c||(t.push(c),n.push(r),r.setAttribute("aria-hidden","true"))}})),function(){n.forEach((function(e,n){var r=t[n];null===r?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",r)}))}}(x.current):void 0}),[]),e.createElement(S,{autoFocus:!0,returnFocus:!0,onActivation:H,disabled:i,crossFrame:z},e.createElement(_,{allowPinchZoom:o,enabled:!l},e.createElement("div",Object.assign({},y,{ref:w,"data-reach-dialog-overlay":"",onClick:Qo(u,(function(e){M.current===e.target&&(e.stopPropagation(),v(e))})),onKeyDown:Qo(f,(function(e){"Escape"===e.key&&(e.stopPropagation(),v(e))})),onMouseDown:Qo(g,(function(e){M.current=e.target}))}))))}));"production"!==process.env.NODE_ENV&&(ac.displayName="DialogOverlay",ac.propTypes=tc({},rc));var cc=s((function(t,n){var r=t.onClick,a=(t.onKeyDown,nc(t,["onClick","onKeyDown"]));return e.createElement("div",Object.assign({"aria-modal":"true",role:"dialog",tabIndex:-1},a,{ref:n,"data-reach-dialog-content":"",onClick:Qo(r,(function(e){e.stopPropagation()}))}))}));"production"!==process.env.NODE_ENV&&(cc.displayName="DialogContent",cc.propTypes={"aria-label":sc,"aria-labelledby":sc});var ic=s((function(t,n){var r=t.allowPinchZoom,a=void 0!==r&&r,o=t.initialFocusRef,c=t.isOpen,i=t.onDismiss,s=void 0===i?Jo:i,l=nc(t,["allowPinchZoom","initialFocusRef","isOpen","onDismiss"]);return e.createElement(ac,{allowPinchZoom:a,initialFocusRef:o,isOpen:c,onDismiss:s},e.createElement(cc,Object.assign({ref:n},l)))}));function sc(e,t,n,r,a){var o="\nSee https://www.w3.org/TR/wai-aria/#aria-label for details.";return e["aria-label"]||e["aria-labelledby"]?e["aria-label"]&&e["aria-labelledby"]?new Error("You provided both `aria-label` and `aria-labelledby` props to a <"+n+">. If the a label for this component is visible on the screen, that label's component should be given a unique ID prop, and that ID should be passed as the `aria-labelledby` prop into <"+n+">. If the label cannot be determined programmatically from the content of the element, an alternative label should be provided as the `aria-label` prop, which will be used as an `aria-label` on the HTML tag."+o):null!=e[t]&&"string"!=typeof e[t]?new Error("Invalid prop `"+t+"` supplied to `"+n+"`. Expected `string`, received `"+(Array.isArray(a)?"array":typeof a)+"`."):null:new Error("A <"+n+"> must have either an `aria-label` or `aria-labelledby` prop.\n      "+o)}function lc(e){const{styles:t,in:n,timeout:r=150,transition:a=`all ${r}ms ease-in-out`,children:c,...i}=e;return o(H,Object.assign({appear:!0,unmountOnExit:!0,in:n,timeout:r},i),(e=>c((e=>({...t.init,transition:a,...t[e]}))(e))))}"production"!==process.env.NODE_ENV&&(ic.displayName="Dialog",ic.propTypes={isOpen:_o.bool,onDismiss:_o.func,"aria-label":sc,"aria-labelledby":sc});const hc={init:{opacity:0},entered:{opacity:1},exiting:{opacity:0}};function pc(e){const{timeout:t=150,...n}=e;return o(lc,Object.assign({transition:`all ${t}ms cubic-bezier(0.175, 0.885, 0.320, 1.175)`,styles:hc,timeout:{enter:0,exit:t}},n))}function dc(e){switch(e){case"bottom":return{maxWidth:"100vw",bottom:0,left:0,right:0};case"top":return{maxWidth:"100vw",top:0,left:0,right:0};case"left":return{height:"100vh",left:0,top:0};case"right":return{right:0,top:0,height:"100vh"}}}const uc=(e,t)=>{let n="";return"left"!==e&&"right"!==e||(n="X"),"top"!==e&&"bottom"!==e||(n="Y"),`translate${n}(${t})`};function mc(e){const{placement:t="left",timeout:n=150,children:r,...a}=e,c=function(e){const t={bottom:"100%",top:"-100%",left:"-100%",right:"100%"};return{init:{transform:uc(e,t[e])},entered:{transform:uc(e,"0%")},exiting:{transform:uc(e,t[e])}}}(t),i={position:"fixed",willChange:"transform",...dc(t)};return o(lc,Object.assign({styles:c,transition:`all ${n}ms cubic-bezier(0, 0, 0.2, 1)`,timeout:{enter:0,exit:n}},a),(e=>r({...i,...e})))}const vc=e=>{const{initialOffset:t="20px",timeout:n=150,...r}=e,a=function(e){return{init:{opacity:0,transform:`translateY(${e})`},entered:{opacity:1,transform:"translateY(0px)"},exiting:{opacity:0,transform:`translateY(${e})`}}}(t);return o(lc,Object.assign({styles:a,transition:`all ${n}ms cubic-bezier(0.4, 0.14, 0.3, 1)`,timeout:{enter:0,exit:n}},r))},fc=e.forwardRef(((t,n)=>{const{isOpen:r,title:a="",confirmButtonText:o="",cancelButtonText:c="",contentStyles:i={},bodyStyles:s={},footerStyles:l={},children:h=null,confirmButtonDisabled:p=!1,cancelButtonDisabled:d=!1,onConfirm:u=(()=>{}),onDismiss:m}=t;return e.createElement(pc,{timeout:300,in:r,unmountOnExit:!0},(t=>e.createElement(bc,{style:t,isOpen:!0,onDismiss:m},e.createElement(vc,{timeout:150,in:r,unmountOnExit:!0},(t=>e.createElement(gc,{style:{...t,...i}},e.createElement(zc,{style:s},a&&e.createElement("h4",null,a),h&&e.createElement("div",null,h)),(c||o)&&e.createElement(yc,{style:l},c&&e.createElement(Fo,{disabled:d,inline:!0,type:"secondary",onClick:m},c),o&&e.createElement(Fo,{disabled:p,inline:!0,onClick:u},o))))))))})),gc=Et(cc)`
+  `;process.env.NODE_ENV;var Uo=Xo()?e.useLayoutEffect:e.useEffect,Ko={},Go=Jo;if("production"!==process.env.NODE_ENV){var qo=("undefined"!=typeof process?process:{env:{NODE_ENV:"development"}}).env;Go=function(e){Ko[e]||(Ko[e]=!0,"test"!==qo.NODE_ENV&&1!==parseInt(window.getComputedStyle(document.body).getPropertyValue("--reach-"+e),10)&&console.warn("@reach/"+e+' styles not found. If you are using a bundler like webpack or parcel include this in the entry file of your app before any of your own styles:\n\n    import "@reach/'+e+'/styles.css";\n\n  Otherwise you\'ll need to include them some other way:\n\n    <link rel="stylesheet" type="text/css" href="node_modules/@reach/'+e+'/styles.css" />\n\n  For more information visit https://ui.reach.tech/styling.\n  '))}}function Zo(e,t){if(null!=e)if(function(e){return!(!e||"[object Function]"!={}.toString.call(e))}(e))e(t);else try{e.current=t}catch(n){throw new Error('Cannot assign value "'+t+'" to ref "'+e+'"')}}function Xo(){return!("undefined"==typeof window||!window.document||!window.document.createElement)}function Jo(){}function Qo(e,t){return function(n){if(e&&e(n),!n.defaultPrevented)return t(n)}}process.env.NODE_ENV,process.env.NODE_ENV,process.env.NODE_ENV;var ec=function(t){var n=t.children,a=t.type,o=void 0===a?"reach-portal":a,c=r(null),i=r(null),s=l()[1];return Uo((function(){if(c.current){var e=c.current.ownerDocument;return i.current=null==e?void 0:e.createElement(o),e.body.appendChild(i.current),s({}),function(){i.current&&i.current.ownerDocument&&i.current.ownerDocument.body.removeChild(i.current)}}}),[o]),i.current?C(n,i.current):e.createElement("span",{ref:c})};function tc(){return tc=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},tc.apply(this,arguments)}function nc(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)n=o[r],t.indexOf(n)>=0||(a[n]=e[n]);return a}"production"!==process.env.NODE_ENV&&(ec.displayName="Portal");var rc={allowPinchZoom:_o.bool,dangerouslyBypassFocusLock:_o.bool,dangerouslyBypassScrollLock:_o.bool,initialFocusRef:function(){return null},onDismiss:_o.func},ac=s((function(t,n){var r=t.isOpen,a=void 0===r||r,o=nc(t,["isOpen"]);return h((function(){return Go("dialog")}),[]),h((function(){a?window.__REACH_DISABLE_TOOLTIPS=!0:window.requestAnimationFrame((function(){window.__REACH_DISABLE_TOOLTIPS=!1}))}),[a]),a?e.createElement(ec,{"data-reach-dialog-wrapper":""},e.createElement(oc,Object.assign({ref:n},o))):null}));"production"!==process.env.NODE_ENV&&(ac.displayName="DialogOverlay",ac.propTypes=tc({},rc,{isOpen:_o.bool}));var oc=s((function(t,a){var o=t.allowPinchZoom,c=t.dangerouslyBypassFocusLock,i=void 0!==c&&c,s=t.dangerouslyBypassScrollLock,l=void 0!==s&&s,d=t.initialFocusRef,u=t.onClick,m=t.onDismiss,v=void 0===m?Jo:m,f=t.onKeyDown,g=t.onMouseDown,b=t.unstable_lockFocusAcrossFrames,z=void 0===b||b,y=nc(t,["allowPinchZoom","dangerouslyBypassFocusLock","dangerouslyBypassScrollLock","initialFocusRef","onClick","onDismiss","onKeyDown","onMouseDown","unstable_lockFocusAcrossFrames"]),M=r(null),x=r(null),w=function(){for(var e=arguments.length,t=new Array(e),r=0;r<e;r++)t[r]=arguments[r];return n((function(){return t.every((function(e){return null==e}))?null:function(e){t.forEach((function(t){Zo(t,e)}))}}),[].concat(t))}(x,a),H=p((function(){d&&d.current&&d.current.focus()}),[d]);return h((function(){return x.current?function(e){var t=[],n=[],r=(a=e,(a&&a.ownerDocument?a.ownerDocument:Xo()?document:null)||document);var a;if(!e)return"production"!==process.env.NODE_ENV&&console.warn("A ref has not yet been attached to a dialog node when attempting to call `createAriaHider`."),Jo;return Array.prototype.forEach.call(r.querySelectorAll("body > *"),(function(r){var a,o;if(r!==(null===(a=e.parentNode)||void 0===a||null===(o=a.parentNode)||void 0===o?void 0:o.parentNode)){var c=r.getAttribute("aria-hidden");null!==c&&"false"!==c||(t.push(c),n.push(r),r.setAttribute("aria-hidden","true"))}})),function(){n.forEach((function(e,n){var r=t[n];null===r?e.removeAttribute("aria-hidden"):e.setAttribute("aria-hidden",r)}))}}(x.current):void 0}),[]),e.createElement(S,{autoFocus:!0,returnFocus:!0,onActivation:H,disabled:i,crossFrame:z},e.createElement(_,{allowPinchZoom:o,enabled:!l},e.createElement("div",Object.assign({},y,{ref:w,"data-reach-dialog-overlay":"",onClick:Qo(u,(function(e){M.current===e.target&&(e.stopPropagation(),v(e))})),onKeyDown:Qo(f,(function(e){"Escape"===e.key&&(e.stopPropagation(),v(e))})),onMouseDown:Qo(g,(function(e){M.current=e.target}))}))))}));"production"!==process.env.NODE_ENV&&(ac.displayName="DialogOverlay",ac.propTypes=tc({},rc));var cc=s((function(t,n){var r=t.onClick,a=(t.onKeyDown,nc(t,["onClick","onKeyDown"]));return e.createElement("div",Object.assign({"aria-modal":"true",role:"dialog",tabIndex:-1},a,{ref:n,"data-reach-dialog-content":"",onClick:Qo(r,(function(e){e.stopPropagation()}))}))}));"production"!==process.env.NODE_ENV&&(cc.displayName="DialogContent",cc.propTypes={"aria-label":sc,"aria-labelledby":sc});var ic=s((function(t,n){var r=t.allowPinchZoom,a=void 0!==r&&r,o=t.initialFocusRef,c=t.isOpen,i=t.onDismiss,s=void 0===i?Jo:i,l=nc(t,["allowPinchZoom","initialFocusRef","isOpen","onDismiss"]);return e.createElement(ac,{allowPinchZoom:a,initialFocusRef:o,isOpen:c,onDismiss:s},e.createElement(cc,Object.assign({ref:n},l)))}));function sc(e,t,n,r,a){var o="\nSee https://www.w3.org/TR/wai-aria/#aria-label for details.";return e["aria-label"]||e["aria-labelledby"]?e["aria-label"]&&e["aria-labelledby"]?new Error("You provided both `aria-label` and `aria-labelledby` props to a <"+n+">. If the a label for this component is visible on the screen, that label's component should be given a unique ID prop, and that ID should be passed as the `aria-labelledby` prop into <"+n+">. If the label cannot be determined programmatically from the content of the element, an alternative label should be provided as the `aria-label` prop, which will be used as an `aria-label` on the HTML tag."+o):null!=e[t]&&"string"!=typeof e[t]?new Error("Invalid prop `"+t+"` supplied to `"+n+"`. Expected `string`, received `"+(Array.isArray(a)?"array":typeof a)+"`."):null:new Error("A <"+n+"> must have either an `aria-label` or `aria-labelledby` prop.\n      "+o)}function lc(e){const{styles:t,in:n,timeout:r=150,transition:a=`all ${r}ms ease-in-out`,children:c,...i}=e;return o(H,Object.assign({appear:!0,unmountOnExit:!0,in:n,timeout:r},i),(e=>c((e=>({...t.init,transition:a,...t[e]}))(e))))}"production"!==process.env.NODE_ENV&&(ic.displayName="Dialog",ic.propTypes={isOpen:_o.bool,onDismiss:_o.func,"aria-label":sc,"aria-labelledby":sc});const hc={init:{opacity:0},entered:{opacity:1},exiting:{opacity:0}};function pc(e){const{timeout:t=150,...n}=e;return o(lc,Object.assign({transition:`all ${t}ms cubic-bezier(0.175, 0.885, 0.320, 1.175)`,styles:hc,timeout:{enter:0,exit:t}},n))}function dc(e){switch(e){case"bottom":return{maxWidth:"100vw",bottom:0,left:0,right:0};case"top":return{maxWidth:"100vw",top:0,left:0,right:0};case"left":return{height:"100vh",left:0,top:0};case"right":return{right:0,top:0,height:"100vh"}}}const uc=(e,t)=>{let n="";return"left"!==e&&"right"!==e||(n="X"),"top"!==e&&"bottom"!==e||(n="Y"),`translate${n}(${t})`};function mc(e){const{placement:t="left",timeout:n=150,children:r,...a}=e,c=function(e){const t={bottom:"100%",top:"-100%",left:"-100%",right:"100%"};return{init:{transform:uc(e,t[e])},entered:{transform:uc(e,"0%")},exiting:{transform:uc(e,t[e])}}}(t),i={position:"fixed",willChange:"transform",...dc(t)};return o(lc,Object.assign({styles:c,transition:`all ${n}ms cubic-bezier(0, 0, 0.2, 1)`,timeout:{enter:0,exit:n}},a),(e=>r({...i,...e})))}const vc=e=>{const{initialOffset:t="20px",timeout:n=150,...r}=e,a=function(e){return{init:{opacity:0,transform:`translateY(${e})`},entered:{opacity:1,transform:"translateY(0px)"},exiting:{opacity:0,transform:`translateY(${e})`}}}(t);return o(lc,Object.assign({styles:a,transition:`all ${n}ms cubic-bezier(0.4, 0.14, 0.3, 1)`,timeout:{enter:0,exit:n}},r))},fc=e.forwardRef(((t,n)=>{const{isOpen:r,title:a="",confirmButtonText:o="",cancelButtonText:c="",contentStyles:i={},bodyStyles:s={},footerStyles:l={},children:h=null,confirmButtonDisabled:p=!1,cancelButtonDisabled:d=!1,onConfirm:u=(()=>{}),onDismiss:m}=t;return e.createElement(pc,{timeout:300,in:r,unmountOnExit:!0},(t=>e.createElement(bc,{style:t,isOpen:!0,onDismiss:m},e.createElement(vc,{timeout:150,in:r,unmountOnExit:!0},(t=>e.createElement(gc,{"aria-label":"confirmation-content",style:{...t,...i}},e.createElement(zc,{style:s},a&&e.createElement("h4",null,a),h&&e.createElement("div",null,h)),(c||o)&&e.createElement(yc,{style:l},c&&e.createElement(Fo,{disabled:d,inline:!0,type:"secondary",onClick:m},c),o&&e.createElement(Fo,{disabled:p,inline:!0,onClick:u},o))))))))})),gc=Et(cc)`
   width: auto;
   min-width: 512px;
   background: #fff;
@@ -292,7 +292,7 @@ object-assign
   background: ${({theme:e})=>e.palette.elephant};
 `,Oc=Et.div`
   ${({theme:{colors:{components:{confirmModal:e}}}})=>`\n    position: fixed;\n    bottom: 0;\n    width: 100%;\n    justify-content: flex-end;\n    display: flex;\n    padding: 12px 16px 12px 16px;\n    border-top: 1px solid ${e.border};\n    background: ${e.background};\n    border-radius: 4px;\n  `}
-`,Ic=d({content:{},overlay:{}}),Nc=()=>t(Ic);function Pc(e){const{in:t,children:n,placement:r}=e;return o(mc,{in:t,placement:r,timeout:450},(e=>o(pc,{in:t,timeout:250},(t=>n({content:e,overlay:t})))))}function Tc(e){const{isOpen:t,onDismiss:n,hideDismissIcon:r,clickOutToClose:a=!0,size:c="default",placement:i="right",children:s,...l}=e;return o(Pc,{in:t,placement:i},(e=>o(Ic.Provider,{value:e},o(Fc,{isOpen:!0,onDismiss:a?n:()=>{}},o(Rc,{size:c},!r&&o(Dc,{onClick:n},o(er,{glyph:"close",size:"12",viewBox:"-2 -2 10 10"})),s)))))}const Rc=({children:e,size:t})=>{const{content:n}=Nc();return o(kc,{className:"modal-content",size:t,style:n},e)},Fc=({isOpen:e,children:t,...n})=>{const{overlay:r}=Nc();return o(wc,Object.assign({className:"model-overlay",isOpen:e,style:r},n),t)},jc=(e,t)=>{let n=0;return(...r)=>{clearTimeout(n),n=setTimeout((()=>e(...r)),t)}},Yc=(e,t)=>{const n=()=>(new Date).getTime(),r=()=>o=n();let a,o=n()-t;return(...c)=>new Promise((i=>{const s=o+t-n();a&&clearTimeout(a),o+t<=n()?(r(),i(e(...c))):a=setTimeout((()=>{r(),i(e(...c))}),s)}))},Bc={height:0,width:0,x:2e3,y:2e3,bottom:0,left:0,right:0,top:0,toJSON:()=>{}};let $c;const Wc=t=>{const{onClose:n=(()=>{}),children:r,autoCloseDuration:a=800,anchorEl:o=null,hoverOutToClose:c=!1,clickOutToClose:i=!0,id:s,anchorOrigin:l={vertical:"bottom",horizontal:"center"},transformOrigin:h={vertical:"top",horizontal:"center"}}=t,p=o&&o.getBoundingClientRect()||Bc,[d,u]=e.useState({left:p.y,top:p.x}),m=e.createRef(),v=()=>{const e=m.current&&m.current.getBoundingClientRect()||Bc;if(m.current){const t=((e,t,n,r)=>{let a=e.y,o=e.x;const{width:c,height:i}=t;switch(n.vertical){case"center":a+=e.height/2;break;case"bottom":a+=e.height}switch(n.horizontal){case"center":o+=e.width/2;break;case"right":o+=e.width}switch(r.vertical){case"center":a-=i/2;break;case"bottom":a-=i}switch(r.horizontal){case"center":o-=c/2;break;case"right":o-=c}const{innerWidth:s,innerHeight:l}=window;o+c>s&&(o-=o+c-s+16);a+i>l&&(a-=a+i-l+16);return{top:a,left:o}})(p,e,l,h);u(t)}};window.addEventListener("resize",Yc(v,500)),window.addEventListener("scroll",Yc(v,500)),e.useEffect((()=>{v(),o&&c&&(clearTimeout($c),$c=setTimeout((()=>{n()}),a))}),[o]);const f=o&&o.getAttribute("aria-describedby");return o&&s===f?V.createPortal(e.createElement(Kc,{id:s,onClick:i?e=>n(e):()=>{}},e.createElement(Uc,{onMouseEnter:()=>clearTimeout($c),onMouseLeave:c?e=>n(e):()=>{},ref:m,style:d},r)),document.body):null},Uc=Et.div`
+`,Ic=d({content:{},overlay:{}}),Nc=()=>t(Ic);function Pc(e){const{in:t,children:n,placement:r}=e;return o(mc,{in:t,placement:r,timeout:450},(e=>o(pc,{in:t,timeout:250},(t=>n({content:e,overlay:t})))))}function Tc(e){const{isOpen:t,onDismiss:n,hideDismissIcon:r,clickOutToClose:a=!0,size:c="default",placement:i="right",children:s,...l}=e;return o(Pc,{in:t,placement:i},(e=>o(Ic.Provider,{value:e},o(Fc,{isOpen:!0,onDismiss:a?n:()=>{}},o(Rc,{size:c},!r&&o(Dc,{onClick:n},o(er,{glyph:"close",size:"12",viewBox:"-2 -2 10 10"})),s)))))}const Rc=({children:e,size:t})=>{const{content:n}=Nc();return o(kc,{"aria-label":"modal-content",className:"modal-content",size:t,style:n},e)},Fc=({isOpen:e,children:t,...n})=>{const{overlay:r}=Nc();return o(wc,Object.assign({className:"model-overlay",isOpen:e,style:r},n),t)},jc=(e,t)=>{let n=0;return(...r)=>{clearTimeout(n),n=setTimeout((()=>e(...r)),t)}},Yc=(e,t)=>{const n=()=>(new Date).getTime(),r=()=>o=n();let a,o=n()-t;return(...c)=>new Promise((i=>{const s=o+t-n();a&&clearTimeout(a),o+t<=n()?(r(),i(e(...c))):a=setTimeout((()=>{r(),i(e(...c))}),s)}))},Bc={height:0,width:0,x:2e3,y:2e3,bottom:0,left:0,right:0,top:0,toJSON:()=>{}};let $c;const Wc=t=>{const{onClose:n=(()=>{}),children:r,autoCloseDuration:a=800,anchorEl:o=null,hoverOutToClose:c=!1,clickOutToClose:i=!0,id:s,anchorOrigin:l={vertical:"bottom",horizontal:"center"},transformOrigin:h={vertical:"top",horizontal:"center"}}=t,p=o&&o.getBoundingClientRect()||Bc,[d,u]=e.useState({left:p.y,top:p.x}),m=e.createRef(),v=()=>{const e=m.current&&m.current.getBoundingClientRect()||Bc;if(m.current){const t=((e,t,n,r)=>{let a=e.y,o=e.x;const{width:c,height:i}=t;switch(n.vertical){case"center":a+=e.height/2;break;case"bottom":a+=e.height}switch(n.horizontal){case"center":o+=e.width/2;break;case"right":o+=e.width}switch(r.vertical){case"center":a-=i/2;break;case"bottom":a-=i}switch(r.horizontal){case"center":o-=c/2;break;case"right":o-=c}const{innerWidth:s,innerHeight:l}=window;o+c>s&&(o-=o+c-s+16);a+i>l&&(a-=a+i-l+16);return{top:a,left:o}})(p,e,l,h);u(t)}};window.addEventListener("resize",Yc(v,500)),window.addEventListener("scroll",Yc(v,500)),e.useEffect((()=>{v(),o&&c&&(clearTimeout($c),$c=setTimeout((()=>{n()}),a))}),[o]);const f=o&&o.getAttribute("aria-describedby");return o&&s===f?V.createPortal(e.createElement(Kc,{id:s,onClick:i?e=>n(e):()=>{}},e.createElement(Uc,{onMouseEnter:()=>clearTimeout($c),onMouseLeave:c?e=>n(e):()=>{},ref:m,style:d},r)),document.body):null},Uc=Et.div`
   position: absolute;
 `,Kc=Et.div`
   top: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "1.0.200",
+  "version": "1.0.201",
   "description": "React Ui Components for Freemium Apps",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",