@devseed-ui/modal - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

CHANGELOG.md

 # @devseed-ui/modal
 
-## 1.0.3
+## 1.1.0
 
-### Patch Changes
+### Minor Changes
 
-- retroactive fixes
+- Merge helper and base into theme-provider
 
-## 1.0.2
-
 ### Patch Changes
 
-- Adds fullscreen option to modal
+- Updated dependencies [063ec7a]
+  - @devseed-ui/theme-provider@2.4.0
 
@@ -19,3 +18,3 @@ ## 1.0.1
 
-- Export modal contents for styling edits
+- @devseed-ui/button@2.4.1
 
@@ -34,3 +33,2 @@ ## 1.0.0
 
-- Updated dependencies [undefined]
 - Updated dependencies [7f4f2d9]
@@ -37,0 +35,0 @@ - @devseed-ui/base@2.2.0

dist/index.node.js

@@ -1,2 +0,2 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/base"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom","@devseed-ui/button","styled-components","polished","@devseed-ui/base"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/base")):t(e.react,e["prop-types"],e["react-dom"],e["@devseed-ui/button"],e["styled-components"],e.polished,e["@devseed-ui/base"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(global,(function(e,t,n,r,o,i,a){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return u.ModalHeader}}),Object.defineProperty(t,"ModalHeadline",{enumerable:!0,get:function(){return u.ModalHeadline}}),Object.defineProperty(t,"ModalToolbar",{enumerable:!0,get:function(){return u.ModalToolbar}}),Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return u.ModalBody}}),Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return u.ModalFooter}}),t.Modal=void 0;var r,o=(r=n(0))&&r.__esModule?r:{default:r},i=n(2),a=n(1),l=n(10),s=n(5),u=n(6);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var y=function(e){function t(e){var n,r,o;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),r=this,(n=!(o=f(t).call(this,e))||"object"!==c(o)&&"function"!=typeof o?h(r):o).onOverlayClick=n.onOverlayClick.bind(h(n)),n.onCloseClick=n.onCloseClick.bind(h(n)),n.keyListener=n.keyListener.bind(h(n)),n.el=document.createElement("div"),n.uid=t.generateUUID(),n.el.className="modal-portal-".concat(n.uid),n.rootEl=document.body,!n.rootEl)throw new Error("Portal root element does not exist.");return n}var n,r,a;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(t,e),n=t,(r=[{key:"componentDidMount",value:function(){document.addEventListener("keyup",this.keyListener),this.rootEl.appendChild(this.el)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keyup",this.keyListener),this.rootEl.removeChild(this.el)}},{key:"keyListener",value:function(e){var t=this.props,n=t.revealed,r=t.onCloseClick;n&&27===e.keyCode&&(e.preventDefault(),r())}},{key:"onOverlayClick",value:function(e){var t=this.props.onOverlayClick;e.target===e.currentTarget&&"function"==typeof t&&t.call(this,e)}},{key:"onCloseClick",value:function(e){e.preventDefault(),this.props.onCloseClick(e)}},{key:"renderContents",value:function(){var e=this.props.renderContents;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(o.default.Fragment,null,this.renderHeader(),this.renderBody(),this.renderFooter())}},{key:"renderHeader",value:function(){var e=this.props.renderHeader;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(u.ModalHeader,null,this.renderHeadline(),this.renderToolbar())}},{key:"renderHeadline",value:function(){var e=this.props,t=e.renderHeadline,n=e.title;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalHeadline,null,o.default.createElement("h1",null,n))}},{key:"renderToolbar",value:function(){var e=this.props,t=e.renderToolbar,n=e.closeButton;return"function"==typeof t?t({close:this.onCloseClick}):n&&o.default.createElement(u.ModalToolbar,null,o.default.createElement(s.Button,{useIcon:"xmark--small",size:"small",hideText:!0,onClick:this.onCloseClick},"Close"))}},{key:"renderBody",value:function(){var e=this.props,t=e.renderBody,n=e.content;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalBody,null,n)}},{key:"renderFooter",value:function(){var e=this.props,t=e.renderFooter,n=e.footerContent;return"function"==typeof t?t({close:this.onCloseClick}):n?o.default.createElement(u.ModalFooter,null,n):null}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.revealed,r=e.id,a=e.size,s=["modal"].concat(d(t||[]));return(0,i.createPortal)(o.default.createElement(l.CSSTransition,{in:n,appear:!0,unmountOnExit:!0,classNames:"modal",timeout:{enter:400,exit:400}},o.default.createElement(u.ModalWrapper,{className:s.join(" "),key:"modal-".concat(r),onClick:this.onOverlayClick,id:r},o.default.createElement(u.BodyUnscrollable,{revealed:n}),o.default.createElement(u.ModalContents,{className:"modal__contents",size:a},this.renderContents()))),this.el)}}])&&p(n.prototype,r),a&&p(n,a),t}(o.default.Component);t.Modal=y,y.generateUUID=function(){return Math.random().toString(36).substr(2,5)},y.defaultProps={closeButton:!0,revealed:!1,size:"medium",onOverlayClick:function(){0},onCloseClick:function(){0}},y.propTypes={id:a.PropTypes.string.isRequired,revealed:a.PropTypes.bool,className:a.PropTypes.string,size:a.PropTypes.string,onOverlayClick:a.PropTypes.func,onCloseClick:a.PropTypes.func,closeButton:a.PropTypes.bool,title:a.PropTypes.string,renderContents:a.PropTypes.func,renderHeader:a.PropTypes.func,renderHeadline:a.PropTypes.func,renderToolbar:a.PropTypes.func,renderBody:a.PropTypes.func,content:a.PropTypes.node,renderFooter:a.PropTypes.func,footerContent:a.PropTypes.node}},,function(e,t){e.exports=r},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=t.ModalBody=t.ModalToolbar=t.ModalHeadline=t.ModalHeader=t.BodyUnscrollable=t.ModalWrapper=t.ModalContents=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(7)),i=n(8),a=n(9);function l(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return l=function(){return e},e}function s(){var e=function(e,t){t||(t=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n  ","\n"]);return s=function(){return e},e}var u=(0,a.stylizeFunction)(i.rgba),c={small:"32rem",medium:"48rem",large:"64rem",xlarge:"80rem",full:"100%",fullscreen:"100%"},d=o.default.div.withConfig({displayName:"styled__ModalContents",componentId:"sc-1f8l41k-0"})(["display:grid;grid-template-columns:100%;grid-template-rows:",";background:",";border-radius:",";width:100%;margin:",";box-shadow:0 0 32px 2px ",",0 16px 48px -16px ",";"," > *:last-child{margin-bottom:0;}"],(function(e){return"fullscreen"===e.size?"3rem auto":"auto"}),(0,a.themeVal)("color.surface"),(0,a.themeVal)("shape.rounded"),(function(e){return"fullscreen"===e.size?0:"auto"}),u((0,a.themeVal)("type.base.color"),.04),u((0,a.themeVal)("type.base.color"),.12),(function(e){var t=e.size;return"max-width: ".concat(c[t],";")}));t.ModalContents=d;var p=o.default.section.withConfig({displayName:"styled__ModalWrapper",componentId:"sc-1f8l41k-1"})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9990;overflow-y:auto;opacity:1;visibility:visible;background:",";transform:translate3d(0,0,0);padding:",";&.modal-appear,&.modal-enter{opacity:0;visibility:hidden;}&.modal-enter-appear,&.modal-enter-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:1;visibility:visible;}&.modal-exit{opacity:1;visibility:visible;}&.modal-exit-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:0;visibility:hidden;}"],(0,a.themeVal)("color.smoke"),(function(e){return"fullscreen"===e.size?0:"".concat((0,a.glsp)(2))}));t.ModalWrapper=p;var f=(0,o.createGlobalStyle)(s(),(function(e){return e.revealed&&"\n    body {\n      overflow-y: hidden;\n    }\n  "}));t.BodyUnscrollable=f;var h=o.default.header.withConfig({displayName:"styled__ModalHeader",componentId:"sc-1f8l41k-2"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:"," "," 0 0;& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"));t.ModalHeader=h;var m=o.default.div.withConfig({displayName:"styled__ModalHeadline",componentId:"sc-1f8l41k-3"})(["display:flex;flex-flow:column nowrap;h1{font-size:1.25rem;line-height:2rem;margin:0;}"]);t.ModalHeadline=m;var y=o.default.div.withConfig({displayName:"styled__ModalToolbar",componentId:"sc-1f8l41k-4"})(["display:flex;flex-flow:row nowrap;margin-left:auto;align-items:center;align-self:flex-start;padding:"," 0 "," ",";"],(0,a.glsp)(1/8),(0,a.glsp)(1/8),(0,a.glsp)());t.ModalToolbar=y;var v=o.default.div.withConfig({displayName:"styled__ModalBody",componentId:"sc-1f8l41k-5"})(["padding:0 ",";&:first-child{padding-top:",";}&:last-child{padding-bottom:",";}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.glsp)(2),(0,a.glsp)(2));t.ModalBody=v;var b=o.default.footer.withConfig({displayName:"styled__ModalFooter",componentId:"sc-1f8l41k-6"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:0 0 "," ",";> a,> button{margin-right:",";min-width:7rem;}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("layout.space"));t.ModalFooter=b},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(){return(r=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}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.r(t);n(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var l=n(0),s=n.n(l),u=n(2),c=n.n(u),d={disabled:!1},p=s.a.createContext(null),f="entering",h="entered",m=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o="exited",r.appearStatus=f):o=h:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",r.state={status:o},r.nextCallback=null,r}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==f&&n!==h&&(t=f):n!==f&&n!==h||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=c.a.findDOMNode(this);t===f?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},n.performEnter=function(e,t){var n=this,r=this.props.enter,o=this.context?this.context.isMounting:t,i=this.getTimeouts(),a=o?i.appear:i.enter;!t&&!r||d.disabled?this.safeSetState({status:h},(function(){n.props.onEntered(e)})):(this.props.onEnter(e,o),this.safeSetState({status:f},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,a,(function(){n.safeSetState({status:h},(function(){n.props.onEntered(e,o)}))}))})))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!d.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,n=t.children,r=o(t,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return s.a.createElement(p.Provider,{value:null},n(e,r));var i=s.a.Children.only(n);return(s.a.createElement(p.Provider,{value:null},s.a.cloneElement(i,r)))},t}(s.a.Component);function y(){}m.contextType=p,m.propTypes={},m.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},m.UNMOUNTED=0,m.EXITED=1,m.ENTERING=2,m.ENTERED=3,m.EXITING=4;var v=m,b=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=a(n.className,r):n.setAttribute("class",a(n.className&&n.className.baseVal||"",r)));var n,r}))},E=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,o=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:o,activeClassName:r?o+"-active":n[e+"Active"],doneClassName:r?o+"-done":n[e+"Done"]}},t}i(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.add(r):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(n,r)||("string"==typeof n.className?n.className=n.className+" "+r:n.setAttribute("class",(n.className&&n.className.baseVal||"")+" "+r)));var n,r}))}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,o=n.active,i=n.done;this.appliedClasses[t]={},r&&b(e,r),o&&b(e,o),i&&b(e,i)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return s.a.createElement(v,r({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(s.a.Component);E.defaultProps={classNames:""},E.propTypes={};var g=E;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){var n=Object.create(null);return e&&l.Children.map(e,(function(e){return e})).forEach((function(e){n[e.key]=function(e){return t&&Object(l.isValidElement)(e)?t(e):e}(e)})),n}function k(e,t,n){return null!=n[t]?n[t]:e.props[t]}function O(e,t,n){var r=C(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,o=Object.create(null),i=[];for(var a in e)a in t?i.length&&(o[a]=i,i=[]):i.push(a);var l={};for(var s in t){if(o[s])for(r=0;r<o[s].length;r++){var u=o[s][r];l[o[s][r]]=n(u)}l[s]=n(s)}for(r=0;r<i.length;r++)l[i[r]]=n(i[r]);return l}(t,r);return Object.keys(o).forEach((function(i){var a=o[i];if(Object(l.isValidElement)(a)){var s=i in t,u=i in r,c=t[i],d=Object(l.isValidElement)(c)&&!c.props.in;!u||s&&!d?u||!s||d?u&&s&&Object(l.isValidElement)(c)&&(o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:c.props.in,exit:k(a,"exit",e),enter:k(a,"enter",e)})):o[i]=Object(l.cloneElement)(a,{in:!1}):o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:!0,exit:k(a,"exit",e),enter:k(a,"enter",e)})}})),o}var M=Object.values||function(e){return Object.keys(e).map((function(t){return e[t]}))},S=function(e){function t(t,n){var r,o=(r=e.call(this,t,n)||this).handleExited.bind(x(x(r)));return r.state={contextValue:{isMounting:!0},handleExited:o,firstRender:!0},r}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},n.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(e,t){var n,r,o=t.children,i=t.handleExited;return{children:t.firstRender?(n=e,r=i,C(n.children,(function(e){return Object(l.cloneElement)(e,{onExited:r.bind(null,e),in:!0,appear:k(e,"appear",n),enter:k(e,"enter",n),exit:k(e,"exit",n)})}))):O(e,o,i),firstRender:!1}},n.handleExited=function(e,t){var n=C(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState((function(t){var n=r({},t.children);return delete n[e.key],{children:n}})))},n.render=function(){var e=this.props,t=e.component,n=e.childFactory,r=o(e,["component","childFactory"]),i=this.state.contextValue,a=M(this.state.children).map(n);return delete r.appear,delete r.enter,delete r.exit,null===t?s.a.createElement(p.Provider,{value:i},a):s.a.createElement(p.Provider,{value:i},s.a.createElement(t,r,a))},t}(s.a.Component);S.propTypes={},S.defaultProps={component:"div",childFactory:function(e){return e}};var T=S,w=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}i(t,e);var n=t.prototype;return n.handleLifecycle=function(e,t,n){var r,o=this.props.children,i=s.a.Children.toArray(o)[t];i.props[e]&&(r=i.props)[e].apply(r,n),this.props[e]&&this.props[e](c.a.findDOMNode(this))},n.render=function(){var e=this.props,t=e.children,n=e.in,r=o(e,["children","in"]),i=s.a.Children.toArray(t),a=i[0],l=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,s.a.createElement(T,r,n?s.a.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):s.a.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(s.a.Component);w.propTypes={};var j,P,N=w;var _="out-in",L="in-out",V=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},D=((j={})[_]=function(e){var t=e.current,n=e.changeState;return s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){n(f,null)}))})},j[L]=function(e){var t=e.current,n=e.changeState,r=e.children;return[t,s.a.cloneElement(r,{in:!0,onEntered:V(r,"onEntered",(function(){n(f)}))})]},j),H=((P={})[_]=function(e){var t=e.children,n=e.changeState;return s.a.cloneElement(t,{in:!0,onEntered:V(t,"onEntered",(function(){n(h,s.a.cloneElement(t,{in:!0}))}))})},P[L]=function(e){var t=e.current,n=e.children,r=e.changeState;return[s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){r(h,s.a.cloneElement(n,{in:!0}))}))}),s.a.cloneElement(n,{in:!0})]},P),A=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={status:h,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===f&&e.mode===L?{status:f}:!t.current||(n=t.current,r=e.children,n===r||s.a.isValidElement(n)&&s.a.isValidElement(r)&&null!=n.key&&n.key===r.key)?{current:s.a.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,r},n.render=function(){var e,t=this.props,n=t.children,r=t.mode,o=this.state,i=o.status,a=o.current,l={children:n,current:a,changeState:this.changeState,status:i};switch(i){case f:e=H[r](l);break;case"exiting":e=D[r](l);break;case h:e=a}return s.a.createElement(p.Provider,{value:{isMounting:!this.appeared}},e)},t}(s.a.Component);A.propTypes={},A.defaultProps={mode:_};var F=A;n.d(t,"CSSTransition",(function(){return g})),n.d(t,"ReplaceTransition",(function(){return N})),n.d(t,"SwitchTransition",(function(){return F})),n.d(t,"TransitionGroup",(function(){return T})),n.d(t,"Transition",(function(){return v})),n.d(t,"config",(function(){return d}))}])}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom","@devseed-ui/button","styled-components","polished","@devseed-ui/theme-provider"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider")):t(e.react,e["prop-types"],e["react-dom"],e["@devseed-ui/button"],e["styled-components"],e.polished,e["@devseed-ui/theme-provider"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(global,(function(e,t,n,r,o,i,a){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return u.ModalHeader}}),Object.defineProperty(t,"ModalHeadline",{enumerable:!0,get:function(){return u.ModalHeadline}}),Object.defineProperty(t,"ModalToolbar",{enumerable:!0,get:function(){return u.ModalToolbar}}),Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return u.ModalBody}}),Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return u.ModalFooter}}),t.Modal=void 0;var r,o=(r=n(0))&&r.__esModule?r:{default:r},i=n(2),a=n(1),l=n(10),s=n(5),u=n(6);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var y=function(e){function t(e){var n,r,o;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),r=this,(n=!(o=f(t).call(this,e))||"object"!==c(o)&&"function"!=typeof o?h(r):o).onOverlayClick=n.onOverlayClick.bind(h(n)),n.onCloseClick=n.onCloseClick.bind(h(n)),n.keyListener=n.keyListener.bind(h(n)),n.el=document.createElement("div"),n.uid=t.generateUUID(),n.el.className="modal-portal-".concat(n.uid),n.rootEl=document.body,!n.rootEl)throw new Error("Portal root element does not exist.");return n}var n,r,a;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(t,e),n=t,(r=[{key:"componentDidMount",value:function(){document.addEventListener("keyup",this.keyListener),this.rootEl.appendChild(this.el)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keyup",this.keyListener),this.rootEl.removeChild(this.el)}},{key:"keyListener",value:function(e){var t=this.props,n=t.revealed,r=t.onCloseClick;n&&27===e.keyCode&&(e.preventDefault(),r())}},{key:"onOverlayClick",value:function(e){var t=this.props.onOverlayClick;e.target===e.currentTarget&&"function"==typeof t&&t.call(this,e)}},{key:"onCloseClick",value:function(e){e.preventDefault(),this.props.onCloseClick(e)}},{key:"renderContents",value:function(){var e=this.props.renderContents;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(o.default.Fragment,null,this.renderHeader(),this.renderBody(),this.renderFooter())}},{key:"renderHeader",value:function(){var e=this.props.renderHeader;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(u.ModalHeader,null,this.renderHeadline(),this.renderToolbar())}},{key:"renderHeadline",value:function(){var e=this.props,t=e.renderHeadline,n=e.title;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalHeadline,null,o.default.createElement("h1",null,n))}},{key:"renderToolbar",value:function(){var e=this.props,t=e.renderToolbar,n=e.closeButton;return"function"==typeof t?t({close:this.onCloseClick}):n&&o.default.createElement(u.ModalToolbar,null,o.default.createElement(s.Button,{useIcon:"xmark--small",size:"small",hideText:!0,onClick:this.onCloseClick},"Close"))}},{key:"renderBody",value:function(){var e=this.props,t=e.renderBody,n=e.content;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalBody,null,n)}},{key:"renderFooter",value:function(){var e=this.props,t=e.renderFooter,n=e.footerContent;return"function"==typeof t?t({close:this.onCloseClick}):n?o.default.createElement(u.ModalFooter,null,n):null}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.revealed,r=e.id,a=e.size,s=["modal"].concat(d(t||[]));return(0,i.createPortal)(o.default.createElement(l.CSSTransition,{in:n,appear:!0,unmountOnExit:!0,classNames:"modal",timeout:{enter:400,exit:400}},o.default.createElement(u.ModalWrapper,{className:s.join(" "),key:"modal-".concat(r),onClick:this.onOverlayClick,id:r,size:a},o.default.createElement(u.BodyUnscrollable,{revealed:n}),o.default.createElement(u.ModalContents,{className:"modal__contents",size:a},this.renderContents()))),this.el)}}])&&p(n.prototype,r),a&&p(n,a),t}(o.default.Component);t.Modal=y,y.generateUUID=function(){return Math.random().toString(36).substr(2,5)},y.defaultProps={closeButton:!0,revealed:!1,size:"medium",onOverlayClick:function(){0},onCloseClick:function(){0}},y.propTypes={id:a.PropTypes.string.isRequired,revealed:a.PropTypes.bool,className:a.PropTypes.string,size:a.PropTypes.string,onOverlayClick:a.PropTypes.func,onCloseClick:a.PropTypes.func,closeButton:a.PropTypes.bool,title:a.PropTypes.string,renderContents:a.PropTypes.func,renderHeader:a.PropTypes.func,renderHeadline:a.PropTypes.func,renderToolbar:a.PropTypes.func,renderBody:a.PropTypes.func,content:a.PropTypes.node,renderFooter:a.PropTypes.func,footerContent:a.PropTypes.node}},,function(e,t){e.exports=r},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=t.ModalBody=t.ModalToolbar=t.ModalHeadline=t.ModalHeader=t.BodyUnscrollable=t.ModalWrapper=t.ModalContents=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(7)),i=n(8),a=n(9);function l(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return l=function(){return e},e}function s(){var e=function(e,t){t||(t=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n  ","\n"]);return s=function(){return e},e}var u=(0,a.stylizeFunction)(i.rgba),c={small:"32rem",medium:"48rem",large:"64rem",xlarge:"80rem",full:"100%",fullscreen:"100%"},d=o.default.div.withConfig({displayName:"styled__ModalContents",componentId:"sc-1f8l41k-0"})(["display:grid;grid-template-columns:100%;grid-template-rows:",";background:",";border-radius:",";width:100%;margin:",";box-shadow:0 0 32px 2px ",",0 16px 48px -16px ",";"," > *:last-child{margin-bottom:0;}"],(function(e){return"fullscreen"===e.size?"3rem auto":"auto"}),(0,a.themeVal)("color.surface"),(0,a.themeVal)("shape.rounded"),(function(e){return"fullscreen"===e.size?0:"auto"}),u((0,a.themeVal)("type.base.color"),.04),u((0,a.themeVal)("type.base.color"),.12),(function(e){var t=e.size;return"max-width: ".concat(c[t],";")}));t.ModalContents=d;var p=o.default.section.withConfig({displayName:"styled__ModalWrapper",componentId:"sc-1f8l41k-1"})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9990;overflow-y:auto;opacity:1;visibility:visible;background:",";transform:translate3d(0,0,0);padding:",";&.modal-appear,&.modal-enter{opacity:0;visibility:hidden;}&.modal-enter-appear,&.modal-enter-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:1;visibility:visible;}&.modal-exit{opacity:1;visibility:visible;}&.modal-exit-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:0;visibility:hidden;}"],(0,a.themeVal)("color.smoke"),(function(e){return"fullscreen"===e.size?0:(0,a.glsp)(2)}));t.ModalWrapper=p;var f=(0,o.createGlobalStyle)(s(),(function(e){return e.revealed&&"\n    body {\n      overflow-y: hidden;\n    }\n  "}));t.BodyUnscrollable=f;var h=o.default.header.withConfig({displayName:"styled__ModalHeader",componentId:"sc-1f8l41k-2"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:"," "," 0 0;& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"));t.ModalHeader=h;var m=o.default.div.withConfig({displayName:"styled__ModalHeadline",componentId:"sc-1f8l41k-3"})(["display:flex;flex-flow:column nowrap;h1{font-size:1.25rem;line-height:2rem;margin:0;}"]);t.ModalHeadline=m;var y=o.default.div.withConfig({displayName:"styled__ModalToolbar",componentId:"sc-1f8l41k-4"})(["display:flex;flex-flow:row nowrap;margin-left:auto;align-items:center;align-self:flex-start;padding:"," 0 "," ",";"],(0,a.glsp)(1/8),(0,a.glsp)(1/8),(0,a.glsp)());t.ModalToolbar=y;var v=o.default.div.withConfig({displayName:"styled__ModalBody",componentId:"sc-1f8l41k-5"})(["padding:0 ",";&:first-child{padding-top:",";}&:last-child{padding-bottom:",";}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.glsp)(2),(0,a.glsp)(2));t.ModalBody=v;var E=o.default.footer.withConfig({displayName:"styled__ModalFooter",componentId:"sc-1f8l41k-6"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:0 0 "," ",";> a,> button{margin-right:",";min-width:7rem;}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("layout.space"));t.ModalFooter=E},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(){return(r=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}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.r(t);n(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var l=n(0),s=n.n(l),u=n(2),c=n.n(u),d={disabled:!1},p=s.a.createContext(null),f="entering",h="entered",m=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o="exited",r.appearStatus=f):o=h:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",r.state={status:o},r.nextCallback=null,r}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==f&&n!==h&&(t=f):n!==f&&n!==h||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=c.a.findDOMNode(this);t===f?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},n.performEnter=function(e,t){var n=this,r=this.props.enter,o=this.context?this.context.isMounting:t,i=this.getTimeouts(),a=o?i.appear:i.enter;!t&&!r||d.disabled?this.safeSetState({status:h},(function(){n.props.onEntered(e)})):(this.props.onEnter(e,o),this.safeSetState({status:f},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,a,(function(){n.safeSetState({status:h},(function(){n.props.onEntered(e,o)}))}))})))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!d.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,n=t.children,r=o(t,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return s.a.createElement(p.Provider,{value:null},n(e,r));var i=s.a.Children.only(n);return(s.a.createElement(p.Provider,{value:null},s.a.cloneElement(i,r)))},t}(s.a.Component);function y(){}m.contextType=p,m.propTypes={},m.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},m.UNMOUNTED=0,m.EXITED=1,m.ENTERING=2,m.ENTERED=3,m.EXITING=4;var v=m,E=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=a(n.className,r):n.setAttribute("class",a(n.className&&n.className.baseVal||"",r)));var n,r}))},b=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,o=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:o,activeClassName:r?o+"-active":n[e+"Active"],doneClassName:r?o+"-done":n[e+"Done"]}},t}i(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.add(r):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(n,r)||("string"==typeof n.className?n.className=n.className+" "+r:n.setAttribute("class",(n.className&&n.className.baseVal||"")+" "+r)));var n,r}))}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,o=n.active,i=n.done;this.appliedClasses[t]={},r&&E(e,r),o&&E(e,o),i&&E(e,i)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return s.a.createElement(v,r({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(s.a.Component);b.defaultProps={classNames:""},b.propTypes={};var g=b;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){var n=Object.create(null);return e&&l.Children.map(e,(function(e){return e})).forEach((function(e){n[e.key]=function(e){return t&&Object(l.isValidElement)(e)?t(e):e}(e)})),n}function k(e,t,n){return null!=n[t]?n[t]:e.props[t]}function O(e,t,n){var r=C(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,o=Object.create(null),i=[];for(var a in e)a in t?i.length&&(o[a]=i,i=[]):i.push(a);var l={};for(var s in t){if(o[s])for(r=0;r<o[s].length;r++){var u=o[s][r];l[o[s][r]]=n(u)}l[s]=n(s)}for(r=0;r<i.length;r++)l[i[r]]=n(i[r]);return l}(t,r);return Object.keys(o).forEach((function(i){var a=o[i];if(Object(l.isValidElement)(a)){var s=i in t,u=i in r,c=t[i],d=Object(l.isValidElement)(c)&&!c.props.in;!u||s&&!d?u||!s||d?u&&s&&Object(l.isValidElement)(c)&&(o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:c.props.in,exit:k(a,"exit",e),enter:k(a,"enter",e)})):o[i]=Object(l.cloneElement)(a,{in:!1}):o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:!0,exit:k(a,"exit",e),enter:k(a,"enter",e)})}})),o}var M=Object.values||function(e){return Object.keys(e).map((function(t){return e[t]}))},S=function(e){function t(t,n){var r,o=(r=e.call(this,t,n)||this).handleExited.bind(x(x(r)));return r.state={contextValue:{isMounting:!0},handleExited:o,firstRender:!0},r}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},n.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(e,t){var n,r,o=t.children,i=t.handleExited;return{children:t.firstRender?(n=e,r=i,C(n.children,(function(e){return Object(l.cloneElement)(e,{onExited:r.bind(null,e),in:!0,appear:k(e,"appear",n),enter:k(e,"enter",n),exit:k(e,"exit",n)})}))):O(e,o,i),firstRender:!1}},n.handleExited=function(e,t){var n=C(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState((function(t){var n=r({},t.children);return delete n[e.key],{children:n}})))},n.render=function(){var e=this.props,t=e.component,n=e.childFactory,r=o(e,["component","childFactory"]),i=this.state.contextValue,a=M(this.state.children).map(n);return delete r.appear,delete r.enter,delete r.exit,null===t?s.a.createElement(p.Provider,{value:i},a):s.a.createElement(p.Provider,{value:i},s.a.createElement(t,r,a))},t}(s.a.Component);S.propTypes={},S.defaultProps={component:"div",childFactory:function(e){return e}};var T=S,w=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}i(t,e);var n=t.prototype;return n.handleLifecycle=function(e,t,n){var r,o=this.props.children,i=s.a.Children.toArray(o)[t];i.props[e]&&(r=i.props)[e].apply(r,n),this.props[e]&&this.props[e](c.a.findDOMNode(this))},n.render=function(){var e=this.props,t=e.children,n=e.in,r=o(e,["children","in"]),i=s.a.Children.toArray(t),a=i[0],l=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,s.a.createElement(T,r,n?s.a.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):s.a.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(s.a.Component);w.propTypes={};var j,P,N=w;var _="out-in",L="in-out",V=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},D=((j={})[_]=function(e){var t=e.current,n=e.changeState;return s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){n(f,null)}))})},j[L]=function(e){var t=e.current,n=e.changeState,r=e.children;return[t,s.a.cloneElement(r,{in:!0,onEntered:V(r,"onEntered",(function(){n(f)}))})]},j),H=((P={})[_]=function(e){var t=e.children,n=e.changeState;return s.a.cloneElement(t,{in:!0,onEntered:V(t,"onEntered",(function(){n(h,s.a.cloneElement(t,{in:!0}))}))})},P[L]=function(e){var t=e.current,n=e.children,r=e.changeState;return[s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){r(h,s.a.cloneElement(n,{in:!0}))}))}),s.a.cloneElement(n,{in:!0})]},P),A=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={status:h,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===f&&e.mode===L?{status:f}:!t.current||(n=t.current,r=e.children,n===r||s.a.isValidElement(n)&&s.a.isValidElement(r)&&null!=n.key&&n.key===r.key)?{current:s.a.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,r},n.render=function(){var e,t=this.props,n=t.children,r=t.mode,o=this.state,i=o.status,a=o.current,l={children:n,current:a,changeState:this.changeState,status:i};switch(i){case f:e=H[r](l);break;case"exiting":e=D[r](l);break;case h:e=a}return s.a.createElement(p.Provider,{value:{isMounting:!this.appeared}},e)},t}(s.a.Component);A.propTypes={},A.defaultProps={mode:_};var F=A;n.d(t,"CSSTransition",(function(){return g})),n.d(t,"ReplaceTransition",(function(){return N})),n.d(t,"SwitchTransition",(function(){return F})),n.d(t,"TransitionGroup",(function(){return T})),n.d(t,"Transition",(function(){return v})),n.d(t,"config",(function(){return d}))}])}));
 //# sourceMappingURL=index.node.js.map

dist/index.web.js

@@ -1,2 +0,2 @@
-!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/base"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom","@devseed-ui/button","styled-components","polished","@devseed-ui/base"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/base")):t(e.react,e["prop-types"],e["react-dom"],e["@devseed-ui/button"],e["styled-components"],e.polished,e["@devseed-ui/base"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,(function(e,t,n,r,o,i,a){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return u.ModalHeader}}),Object.defineProperty(t,"ModalHeadline",{enumerable:!0,get:function(){return u.ModalHeadline}}),Object.defineProperty(t,"ModalToolbar",{enumerable:!0,get:function(){return u.ModalToolbar}}),Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return u.ModalBody}}),Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return u.ModalFooter}}),t.Modal=void 0;var r,o=(r=n(0))&&r.__esModule?r:{default:r},i=n(2),a=n(1),l=n(10),s=n(5),u=n(6);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var y=function(e){function t(e){var n,r,o;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),r=this,(n=!(o=f(t).call(this,e))||"object"!==c(o)&&"function"!=typeof o?h(r):o).onOverlayClick=n.onOverlayClick.bind(h(n)),n.onCloseClick=n.onCloseClick.bind(h(n)),n.keyListener=n.keyListener.bind(h(n)),n.el=document.createElement("div"),n.uid=t.generateUUID(),n.el.className="modal-portal-".concat(n.uid),n.rootEl=document.body,!n.rootEl)throw new Error("Portal root element does not exist.");return n}var n,r,a;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(t,e),n=t,(r=[{key:"componentDidMount",value:function(){document.addEventListener("keyup",this.keyListener),this.rootEl.appendChild(this.el)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keyup",this.keyListener),this.rootEl.removeChild(this.el)}},{key:"keyListener",value:function(e){var t=this.props,n=t.revealed,r=t.onCloseClick;n&&27===e.keyCode&&(e.preventDefault(),r())}},{key:"onOverlayClick",value:function(e){var t=this.props.onOverlayClick;e.target===e.currentTarget&&"function"==typeof t&&t.call(this,e)}},{key:"onCloseClick",value:function(e){e.preventDefault(),this.props.onCloseClick(e)}},{key:"renderContents",value:function(){var e=this.props.renderContents;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(o.default.Fragment,null,this.renderHeader(),this.renderBody(),this.renderFooter())}},{key:"renderHeader",value:function(){var e=this.props.renderHeader;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(u.ModalHeader,null,this.renderHeadline(),this.renderToolbar())}},{key:"renderHeadline",value:function(){var e=this.props,t=e.renderHeadline,n=e.title;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalHeadline,null,o.default.createElement("h1",null,n))}},{key:"renderToolbar",value:function(){var e=this.props,t=e.renderToolbar,n=e.closeButton;return"function"==typeof t?t({close:this.onCloseClick}):n&&o.default.createElement(u.ModalToolbar,null,o.default.createElement(s.Button,{useIcon:"xmark--small",size:"small",hideText:!0,onClick:this.onCloseClick},"Close"))}},{key:"renderBody",value:function(){var e=this.props,t=e.renderBody,n=e.content;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalBody,null,n)}},{key:"renderFooter",value:function(){var e=this.props,t=e.renderFooter,n=e.footerContent;return"function"==typeof t?t({close:this.onCloseClick}):n?o.default.createElement(u.ModalFooter,null,n):null}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.revealed,r=e.id,a=e.size,s=["modal"].concat(d(t||[]));return(0,i.createPortal)(o.default.createElement(l.CSSTransition,{in:n,appear:!0,unmountOnExit:!0,classNames:"modal",timeout:{enter:400,exit:400}},o.default.createElement(u.ModalWrapper,{className:s.join(" "),key:"modal-".concat(r),onClick:this.onOverlayClick,id:r},o.default.createElement(u.BodyUnscrollable,{revealed:n}),o.default.createElement(u.ModalContents,{className:"modal__contents",size:a},this.renderContents()))),this.el)}}])&&p(n.prototype,r),a&&p(n,a),t}(o.default.Component);t.Modal=y,y.generateUUID=function(){return Math.random().toString(36).substr(2,5)},y.defaultProps={closeButton:!0,revealed:!1,size:"medium",onOverlayClick:function(){0},onCloseClick:function(){0}},y.propTypes={id:a.PropTypes.string.isRequired,revealed:a.PropTypes.bool,className:a.PropTypes.string,size:a.PropTypes.string,onOverlayClick:a.PropTypes.func,onCloseClick:a.PropTypes.func,closeButton:a.PropTypes.bool,title:a.PropTypes.string,renderContents:a.PropTypes.func,renderHeader:a.PropTypes.func,renderHeadline:a.PropTypes.func,renderToolbar:a.PropTypes.func,renderBody:a.PropTypes.func,content:a.PropTypes.node,renderFooter:a.PropTypes.func,footerContent:a.PropTypes.node}},,function(e,t){e.exports=r},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=t.ModalBody=t.ModalToolbar=t.ModalHeadline=t.ModalHeader=t.BodyUnscrollable=t.ModalWrapper=t.ModalContents=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(7)),i=n(8),a=n(9);function l(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return l=function(){return e},e}function s(){var e=function(e,t){t||(t=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n  ","\n"]);return s=function(){return e},e}var u=(0,a.stylizeFunction)(i.rgba),c={small:"32rem",medium:"48rem",large:"64rem",xlarge:"80rem",full:"100%",fullscreen:"100%"},d=o.default.div.withConfig({displayName:"styled__ModalContents",componentId:"sc-1f8l41k-0"})(["display:grid;grid-template-columns:100%;grid-template-rows:",";background:",";border-radius:",";width:100%;margin:",";box-shadow:0 0 32px 2px ",",0 16px 48px -16px ",";"," > *:last-child{margin-bottom:0;}"],(function(e){return"fullscreen"===e.size?"3rem auto":"auto"}),(0,a.themeVal)("color.surface"),(0,a.themeVal)("shape.rounded"),(function(e){return"fullscreen"===e.size?0:"auto"}),u((0,a.themeVal)("type.base.color"),.04),u((0,a.themeVal)("type.base.color"),.12),(function(e){var t=e.size;return"max-width: ".concat(c[t],";")}));t.ModalContents=d;var p=o.default.section.withConfig({displayName:"styled__ModalWrapper",componentId:"sc-1f8l41k-1"})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9990;overflow-y:auto;opacity:1;visibility:visible;background:",";transform:translate3d(0,0,0);padding:",";&.modal-appear,&.modal-enter{opacity:0;visibility:hidden;}&.modal-enter-appear,&.modal-enter-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:1;visibility:visible;}&.modal-exit{opacity:1;visibility:visible;}&.modal-exit-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:0;visibility:hidden;}"],(0,a.themeVal)("color.smoke"),(function(e){return"fullscreen"===e.size?0:"".concat((0,a.glsp)(2))}));t.ModalWrapper=p;var f=(0,o.createGlobalStyle)(s(),(function(e){return e.revealed&&"\n    body {\n      overflow-y: hidden;\n    }\n  "}));t.BodyUnscrollable=f;var h=o.default.header.withConfig({displayName:"styled__ModalHeader",componentId:"sc-1f8l41k-2"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:"," "," 0 0;& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"));t.ModalHeader=h;var m=o.default.div.withConfig({displayName:"styled__ModalHeadline",componentId:"sc-1f8l41k-3"})(["display:flex;flex-flow:column nowrap;h1{font-size:1.25rem;line-height:2rem;margin:0;}"]);t.ModalHeadline=m;var y=o.default.div.withConfig({displayName:"styled__ModalToolbar",componentId:"sc-1f8l41k-4"})(["display:flex;flex-flow:row nowrap;margin-left:auto;align-items:center;align-self:flex-start;padding:"," 0 "," ",";"],(0,a.glsp)(1/8),(0,a.glsp)(1/8),(0,a.glsp)());t.ModalToolbar=y;var v=o.default.div.withConfig({displayName:"styled__ModalBody",componentId:"sc-1f8l41k-5"})(["padding:0 ",";&:first-child{padding-top:",";}&:last-child{padding-bottom:",";}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.glsp)(2),(0,a.glsp)(2));t.ModalBody=v;var b=o.default.footer.withConfig({displayName:"styled__ModalFooter",componentId:"sc-1f8l41k-6"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:0 0 "," ",";> a,> button{margin-right:",";min-width:7rem;}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("layout.space"));t.ModalFooter=b},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(){return(r=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}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.r(t);n(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var l=n(0),s=n.n(l),u=n(2),c=n.n(u),d={disabled:!1},p=s.a.createContext(null),f="entering",h="entered",m=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o="exited",r.appearStatus=f):o=h:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",r.state={status:o},r.nextCallback=null,r}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==f&&n!==h&&(t=f):n!==f&&n!==h||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=c.a.findDOMNode(this);t===f?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},n.performEnter=function(e,t){var n=this,r=this.props.enter,o=this.context?this.context.isMounting:t,i=this.getTimeouts(),a=o?i.appear:i.enter;!t&&!r||d.disabled?this.safeSetState({status:h},(function(){n.props.onEntered(e)})):(this.props.onEnter(e,o),this.safeSetState({status:f},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,a,(function(){n.safeSetState({status:h},(function(){n.props.onEntered(e,o)}))}))})))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!d.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,n=t.children,r=o(t,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return s.a.createElement(p.Provider,{value:null},n(e,r));var i=s.a.Children.only(n);return(s.a.createElement(p.Provider,{value:null},s.a.cloneElement(i,r)))},t}(s.a.Component);function y(){}m.contextType=p,m.propTypes={},m.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},m.UNMOUNTED=0,m.EXITED=1,m.ENTERING=2,m.ENTERED=3,m.EXITING=4;var v=m,b=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=a(n.className,r):n.setAttribute("class",a(n.className&&n.className.baseVal||"",r)));var n,r}))},E=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,o=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:o,activeClassName:r?o+"-active":n[e+"Active"],doneClassName:r?o+"-done":n[e+"Done"]}},t}i(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.add(r):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(n,r)||("string"==typeof n.className?n.className=n.className+" "+r:n.setAttribute("class",(n.className&&n.className.baseVal||"")+" "+r)));var n,r}))}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,o=n.active,i=n.done;this.appliedClasses[t]={},r&&b(e,r),o&&b(e,o),i&&b(e,i)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return s.a.createElement(v,r({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(s.a.Component);E.defaultProps={classNames:""},E.propTypes={};var g=E;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){var n=Object.create(null);return e&&l.Children.map(e,(function(e){return e})).forEach((function(e){n[e.key]=function(e){return t&&Object(l.isValidElement)(e)?t(e):e}(e)})),n}function k(e,t,n){return null!=n[t]?n[t]:e.props[t]}function O(e,t,n){var r=C(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,o=Object.create(null),i=[];for(var a in e)a in t?i.length&&(o[a]=i,i=[]):i.push(a);var l={};for(var s in t){if(o[s])for(r=0;r<o[s].length;r++){var u=o[s][r];l[o[s][r]]=n(u)}l[s]=n(s)}for(r=0;r<i.length;r++)l[i[r]]=n(i[r]);return l}(t,r);return Object.keys(o).forEach((function(i){var a=o[i];if(Object(l.isValidElement)(a)){var s=i in t,u=i in r,c=t[i],d=Object(l.isValidElement)(c)&&!c.props.in;!u||s&&!d?u||!s||d?u&&s&&Object(l.isValidElement)(c)&&(o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:c.props.in,exit:k(a,"exit",e),enter:k(a,"enter",e)})):o[i]=Object(l.cloneElement)(a,{in:!1}):o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:!0,exit:k(a,"exit",e),enter:k(a,"enter",e)})}})),o}var M=Object.values||function(e){return Object.keys(e).map((function(t){return e[t]}))},w=function(e){function t(t,n){var r,o=(r=e.call(this,t,n)||this).handleExited.bind(x(x(r)));return r.state={contextValue:{isMounting:!0},handleExited:o,firstRender:!0},r}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},n.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(e,t){var n,r,o=t.children,i=t.handleExited;return{children:t.firstRender?(n=e,r=i,C(n.children,(function(e){return Object(l.cloneElement)(e,{onExited:r.bind(null,e),in:!0,appear:k(e,"appear",n),enter:k(e,"enter",n),exit:k(e,"exit",n)})}))):O(e,o,i),firstRender:!1}},n.handleExited=function(e,t){var n=C(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState((function(t){var n=r({},t.children);return delete n[e.key],{children:n}})))},n.render=function(){var e=this.props,t=e.component,n=e.childFactory,r=o(e,["component","childFactory"]),i=this.state.contextValue,a=M(this.state.children).map(n);return delete r.appear,delete r.enter,delete r.exit,null===t?s.a.createElement(p.Provider,{value:i},a):s.a.createElement(p.Provider,{value:i},s.a.createElement(t,r,a))},t}(s.a.Component);w.propTypes={},w.defaultProps={component:"div",childFactory:function(e){return e}};var S=w,T=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}i(t,e);var n=t.prototype;return n.handleLifecycle=function(e,t,n){var r,o=this.props.children,i=s.a.Children.toArray(o)[t];i.props[e]&&(r=i.props)[e].apply(r,n),this.props[e]&&this.props[e](c.a.findDOMNode(this))},n.render=function(){var e=this.props,t=e.children,n=e.in,r=o(e,["children","in"]),i=s.a.Children.toArray(t),a=i[0],l=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,s.a.createElement(S,r,n?s.a.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):s.a.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(s.a.Component);T.propTypes={};var j,P,N=T;var _="out-in",L="in-out",V=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},D=((j={})[_]=function(e){var t=e.current,n=e.changeState;return s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){n(f,null)}))})},j[L]=function(e){var t=e.current,n=e.changeState,r=e.children;return[t,s.a.cloneElement(r,{in:!0,onEntered:V(r,"onEntered",(function(){n(f)}))})]},j),H=((P={})[_]=function(e){var t=e.children,n=e.changeState;return s.a.cloneElement(t,{in:!0,onEntered:V(t,"onEntered",(function(){n(h,s.a.cloneElement(t,{in:!0}))}))})},P[L]=function(e){var t=e.current,n=e.children,r=e.changeState;return[s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){r(h,s.a.cloneElement(n,{in:!0}))}))}),s.a.cloneElement(n,{in:!0})]},P),A=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={status:h,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===f&&e.mode===L?{status:f}:!t.current||(n=t.current,r=e.children,n===r||s.a.isValidElement(n)&&s.a.isValidElement(r)&&null!=n.key&&n.key===r.key)?{current:s.a.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,r},n.render=function(){var e,t=this.props,n=t.children,r=t.mode,o=this.state,i=o.status,a=o.current,l={children:n,current:a,changeState:this.changeState,status:i};switch(i){case f:e=H[r](l);break;case"exiting":e=D[r](l);break;case h:e=a}return s.a.createElement(p.Provider,{value:{isMounting:!this.appeared}},e)},t}(s.a.Component);A.propTypes={},A.defaultProps={mode:_};var F=A;n.d(t,"CSSTransition",(function(){return g})),n.d(t,"ReplaceTransition",(function(){return N})),n.d(t,"SwitchTransition",(function(){return F})),n.d(t,"TransitionGroup",(function(){return S})),n.d(t,"Transition",(function(){return v})),n.d(t,"config",(function(){return d}))}])}));
+!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider"));else if("function"==typeof define&&define.amd)define(["react","prop-types","react-dom","@devseed-ui/button","styled-components","polished","@devseed-ui/theme-provider"],t);else{var n="object"==typeof exports?t(require("react"),require("prop-types"),require("react-dom"),require("@devseed-ui/button"),require("styled-components"),require("polished"),require("@devseed-ui/theme-provider")):t(e.react,e["prop-types"],e["react-dom"],e["@devseed-ui/button"],e["styled-components"],e.polished,e["@devseed-ui/theme-provider"]);for(var r in n)("object"==typeof exports?exports:e)[r]=n[r]}}(window,(function(e,t,n,r,o,i,a){return function(e){var t={};function n(r){if(t[r])return t[r].exports;var o=t[r]={i:r,l:!1,exports:{}};return e[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=e,n.c=t,n.d=function(e,t,r){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:r})},n.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"==typeof e&&e&&e.__esModule)return e;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var o in e)n.d(r,o,function(t){return e[t]}.bind(null,o));return r},n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="",n(n.s=3)}([function(t,n){t.exports=e},function(e,n){e.exports=t},function(e,t){e.exports=n},function(e,t,n){"use strict";Object.defineProperty(t,"__esModule",{value:!0}),Object.defineProperty(t,"ModalHeader",{enumerable:!0,get:function(){return u.ModalHeader}}),Object.defineProperty(t,"ModalHeadline",{enumerable:!0,get:function(){return u.ModalHeadline}}),Object.defineProperty(t,"ModalToolbar",{enumerable:!0,get:function(){return u.ModalToolbar}}),Object.defineProperty(t,"ModalBody",{enumerable:!0,get:function(){return u.ModalBody}}),Object.defineProperty(t,"ModalFooter",{enumerable:!0,get:function(){return u.ModalFooter}}),t.Modal=void 0;var r,o=(r=n(0))&&r.__esModule?r:{default:r},i=n(2),a=n(1),l=n(10),s=n(5),u=n(6);function c(e){return(c="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}function d(e){return function(e){if(Array.isArray(e)){for(var t=0,n=new Array(e.length);t<e.length;t++)n[t]=e[t];return n}}(e)||function(e){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e))return Array.from(e)}(e)||function(){throw new TypeError("Invalid attempt to spread non-iterable instance")}()}function p(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}function f(e){return(f=Object.setPrototypeOf?Object.getPrototypeOf:function(e){return e.__proto__||Object.getPrototypeOf(e)})(e)}function h(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function m(e,t){return(m=Object.setPrototypeOf||function(e,t){return e.__proto__=t,e})(e,t)}var y=function(e){function t(e){var n,r,o;if(function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}(this,t),r=this,(n=!(o=f(t).call(this,e))||"object"!==c(o)&&"function"!=typeof o?h(r):o).onOverlayClick=n.onOverlayClick.bind(h(n)),n.onCloseClick=n.onCloseClick.bind(h(n)),n.keyListener=n.keyListener.bind(h(n)),n.el=document.createElement("div"),n.uid=t.generateUUID(),n.el.className="modal-portal-".concat(n.uid),n.rootEl=document.body,!n.rootEl)throw new Error("Portal root element does not exist.");return n}var n,r,a;return function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function");e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,writable:!0,configurable:!0}}),t&&m(e,t)}(t,e),n=t,(r=[{key:"componentDidMount",value:function(){document.addEventListener("keyup",this.keyListener),this.rootEl.appendChild(this.el)}},{key:"componentWillUnmount",value:function(){document.removeEventListener("keyup",this.keyListener),this.rootEl.removeChild(this.el)}},{key:"keyListener",value:function(e){var t=this.props,n=t.revealed,r=t.onCloseClick;n&&27===e.keyCode&&(e.preventDefault(),r())}},{key:"onOverlayClick",value:function(e){var t=this.props.onOverlayClick;e.target===e.currentTarget&&"function"==typeof t&&t.call(this,e)}},{key:"onCloseClick",value:function(e){e.preventDefault(),this.props.onCloseClick(e)}},{key:"renderContents",value:function(){var e=this.props.renderContents;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(o.default.Fragment,null,this.renderHeader(),this.renderBody(),this.renderFooter())}},{key:"renderHeader",value:function(){var e=this.props.renderHeader;return"function"==typeof e?e({close:this.onCloseClick}):o.default.createElement(u.ModalHeader,null,this.renderHeadline(),this.renderToolbar())}},{key:"renderHeadline",value:function(){var e=this.props,t=e.renderHeadline,n=e.title;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalHeadline,null,o.default.createElement("h1",null,n))}},{key:"renderToolbar",value:function(){var e=this.props,t=e.renderToolbar,n=e.closeButton;return"function"==typeof t?t({close:this.onCloseClick}):n&&o.default.createElement(u.ModalToolbar,null,o.default.createElement(s.Button,{useIcon:"xmark--small",size:"small",hideText:!0,onClick:this.onCloseClick},"Close"))}},{key:"renderBody",value:function(){var e=this.props,t=e.renderBody,n=e.content;return"function"==typeof t?t({close:this.onCloseClick}):o.default.createElement(u.ModalBody,null,n)}},{key:"renderFooter",value:function(){var e=this.props,t=e.renderFooter,n=e.footerContent;return"function"==typeof t?t({close:this.onCloseClick}):n?o.default.createElement(u.ModalFooter,null,n):null}},{key:"render",value:function(){var e=this.props,t=e.className,n=e.revealed,r=e.id,a=e.size,s=["modal"].concat(d(t||[]));return(0,i.createPortal)(o.default.createElement(l.CSSTransition,{in:n,appear:!0,unmountOnExit:!0,classNames:"modal",timeout:{enter:400,exit:400}},o.default.createElement(u.ModalWrapper,{className:s.join(" "),key:"modal-".concat(r),onClick:this.onOverlayClick,id:r,size:a},o.default.createElement(u.BodyUnscrollable,{revealed:n}),o.default.createElement(u.ModalContents,{className:"modal__contents",size:a},this.renderContents()))),this.el)}}])&&p(n.prototype,r),a&&p(n,a),t}(o.default.Component);t.Modal=y,y.generateUUID=function(){return Math.random().toString(36).substr(2,5)},y.defaultProps={closeButton:!0,revealed:!1,size:"medium",onOverlayClick:function(){0},onCloseClick:function(){0}},y.propTypes={id:a.PropTypes.string.isRequired,revealed:a.PropTypes.bool,className:a.PropTypes.string,size:a.PropTypes.string,onOverlayClick:a.PropTypes.func,onCloseClick:a.PropTypes.func,closeButton:a.PropTypes.bool,title:a.PropTypes.string,renderContents:a.PropTypes.func,renderHeader:a.PropTypes.func,renderHeadline:a.PropTypes.func,renderToolbar:a.PropTypes.func,renderBody:a.PropTypes.func,content:a.PropTypes.node,renderFooter:a.PropTypes.func,footerContent:a.PropTypes.node}},,function(e,t){e.exports=r},function(e,t,n){"use strict";function r(e){return(r="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e})(e)}Object.defineProperty(t,"__esModule",{value:!0}),t.ModalFooter=t.ModalBody=t.ModalToolbar=t.ModalHeadline=t.ModalHeader=t.BodyUnscrollable=t.ModalWrapper=t.ModalContents=void 0;var o=function(e){if(e&&e.__esModule)return e;if(null===e||"object"!==r(e)&&"function"!=typeof e)return{default:e};var t=l();if(t&&t.has(e))return t.get(e);var n={},o=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var i in e)if(Object.prototype.hasOwnProperty.call(e,i)){var a=o?Object.getOwnPropertyDescriptor(e,i):null;a&&(a.get||a.set)?Object.defineProperty(n,i,a):n[i]=e[i]}n.default=e,t&&t.set(e,n);return n}(n(7)),i=n(8),a=n(9);function l(){if("function"!=typeof WeakMap)return null;var e=new WeakMap;return l=function(){return e},e}function s(){var e=function(e,t){t||(t=e.slice(0));return Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}))}(["\n  ","\n"]);return s=function(){return e},e}var u=(0,a.stylizeFunction)(i.rgba),c={small:"32rem",medium:"48rem",large:"64rem",xlarge:"80rem",full:"100%",fullscreen:"100%"},d=o.default.div.withConfig({displayName:"styled__ModalContents",componentId:"sc-1f8l41k-0"})(["display:grid;grid-template-columns:100%;grid-template-rows:",";background:",";border-radius:",";width:100%;margin:",";box-shadow:0 0 32px 2px ",",0 16px 48px -16px ",";"," > *:last-child{margin-bottom:0;}"],(function(e){return"fullscreen"===e.size?"3rem auto":"auto"}),(0,a.themeVal)("color.surface"),(0,a.themeVal)("shape.rounded"),(function(e){return"fullscreen"===e.size?0:"auto"}),u((0,a.themeVal)("type.base.color"),.04),u((0,a.themeVal)("type.base.color"),.12),(function(e){var t=e.size;return"max-width: ".concat(c[t],";")}));t.ModalContents=d;var p=o.default.section.withConfig({displayName:"styled__ModalWrapper",componentId:"sc-1f8l41k-1"})(["display:flex;position:fixed;top:0;bottom:0;left:0;right:0;z-index:9990;overflow-y:auto;opacity:1;visibility:visible;background:",";transform:translate3d(0,0,0);padding:",";&.modal-appear,&.modal-enter{opacity:0;visibility:hidden;}&.modal-enter-appear,&.modal-enter-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:1;visibility:visible;}&.modal-exit{opacity:1;visibility:visible;}&.modal-exit-active{transition:opacity 0.32s ease 0.1s,visibility 0.32s linear 0.1s;opacity:0;visibility:hidden;}"],(0,a.themeVal)("color.smoke"),(function(e){return"fullscreen"===e.size?0:(0,a.glsp)(2)}));t.ModalWrapper=p;var f=(0,o.createGlobalStyle)(s(),(function(e){return e.revealed&&"\n    body {\n      overflow-y: hidden;\n    }\n  "}));t.BodyUnscrollable=f;var h=o.default.header.withConfig({displayName:"styled__ModalHeader",componentId:"sc-1f8l41k-2"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:"," "," 0 0;& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"));t.ModalHeader=h;var m=o.default.div.withConfig({displayName:"styled__ModalHeadline",componentId:"sc-1f8l41k-3"})(["display:flex;flex-flow:column nowrap;h1{font-size:1.25rem;line-height:2rem;margin:0;}"]);t.ModalHeadline=m;var y=o.default.div.withConfig({displayName:"styled__ModalToolbar",componentId:"sc-1f8l41k-4"})(["display:flex;flex-flow:row nowrap;margin-left:auto;align-items:center;align-self:flex-start;padding:"," 0 "," ",";"],(0,a.glsp)(1/8),(0,a.glsp)(1/8),(0,a.glsp)());t.ModalToolbar=y;var v=o.default.div.withConfig({displayName:"styled__ModalBody",componentId:"sc-1f8l41k-5"})(["padding:0 ",";&:first-child{padding-top:",";}&:last-child{padding-bottom:",";}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.glsp)(2),(0,a.glsp)(2));t.ModalBody=v;var E=o.default.footer.withConfig({displayName:"styled__ModalFooter",componentId:"sc-1f8l41k-6"})(["display:flex;flex-flow:row nowrap;align-items:center;background:#fff;padding:",";border-radius:0 0 "," ",";> a,> button{margin-right:",";min-width:7rem;}& > *:last-child{margin-bottom:0;}"],(0,a.glsp)(2),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("shape.rounded"),(0,a.themeVal)("layout.space"));t.ModalFooter=E},function(e,t){e.exports=o},function(e,t){e.exports=i},function(e,t){e.exports=a},function(e,t,n){"use strict";function r(){return(r=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}).apply(this,arguments)}function o(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}function i(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.r(t);n(1);function a(e,t){return e.replace(new RegExp("(^|\\s)"+t+"(?:\\s|$)","g"),"$1").replace(/\s+/g," ").replace(/^\s*|\s*$/g,"")}var l=n(0),s=n.n(l),u=n(2),c=n.n(u),d={disabled:!1},p=s.a.createContext(null),f="entering",h="entered",m=function(e){function t(t,n){var r;r=e.call(this,t,n)||this;var o,i=n&&!n.isMounting?t.enter:t.appear;return r.appearStatus=null,t.in?i?(o="exited",r.appearStatus=f):o=h:o=t.unmountOnExit||t.mountOnEnter?"unmounted":"exited",r.state={status:o},r.nextCallback=null,r}i(t,e),t.getDerivedStateFromProps=function(e,t){return e.in&&"unmounted"===t.status?{status:"exited"}:null};var n=t.prototype;return n.componentDidMount=function(){this.updateStatus(!0,this.appearStatus)},n.componentDidUpdate=function(e){var t=null;if(e!==this.props){var n=this.state.status;this.props.in?n!==f&&n!==h&&(t=f):n!==f&&n!==h||(t="exiting")}this.updateStatus(!1,t)},n.componentWillUnmount=function(){this.cancelNextCallback()},n.getTimeouts=function(){var e,t,n,r=this.props.timeout;return e=t=n=r,null!=r&&"number"!=typeof r&&(e=r.exit,t=r.enter,n=void 0!==r.appear?r.appear:t),{exit:e,enter:t,appear:n}},n.updateStatus=function(e,t){if(void 0===e&&(e=!1),null!==t){this.cancelNextCallback();var n=c.a.findDOMNode(this);t===f?this.performEnter(n,e):this.performExit(n)}else this.props.unmountOnExit&&"exited"===this.state.status&&this.setState({status:"unmounted"})},n.performEnter=function(e,t){var n=this,r=this.props.enter,o=this.context?this.context.isMounting:t,i=this.getTimeouts(),a=o?i.appear:i.enter;!t&&!r||d.disabled?this.safeSetState({status:h},(function(){n.props.onEntered(e)})):(this.props.onEnter(e,o),this.safeSetState({status:f},(function(){n.props.onEntering(e,o),n.onTransitionEnd(e,a,(function(){n.safeSetState({status:h},(function(){n.props.onEntered(e,o)}))}))})))},n.performExit=function(e){var t=this,n=this.props.exit,r=this.getTimeouts();n&&!d.disabled?(this.props.onExit(e),this.safeSetState({status:"exiting"},(function(){t.props.onExiting(e),t.onTransitionEnd(e,r.exit,(function(){t.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))}))}))):this.safeSetState({status:"exited"},(function(){t.props.onExited(e)}))},n.cancelNextCallback=function(){null!==this.nextCallback&&(this.nextCallback.cancel(),this.nextCallback=null)},n.safeSetState=function(e,t){t=this.setNextCallback(t),this.setState(e,t)},n.setNextCallback=function(e){var t=this,n=!0;return this.nextCallback=function(r){n&&(n=!1,t.nextCallback=null,e(r))},this.nextCallback.cancel=function(){n=!1},this.nextCallback},n.onTransitionEnd=function(e,t,n){this.setNextCallback(n);var r=null==t&&!this.props.addEndListener;e&&!r?(this.props.addEndListener&&this.props.addEndListener(e,this.nextCallback),null!=t&&setTimeout(this.nextCallback,t)):setTimeout(this.nextCallback,0)},n.render=function(){var e=this.state.status;if("unmounted"===e)return null;var t=this.props,n=t.children,r=o(t,["children"]);if(delete r.in,delete r.mountOnEnter,delete r.unmountOnExit,delete r.appear,delete r.enter,delete r.exit,delete r.timeout,delete r.addEndListener,delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,"function"==typeof n)return s.a.createElement(p.Provider,{value:null},n(e,r));var i=s.a.Children.only(n);return(s.a.createElement(p.Provider,{value:null},s.a.cloneElement(i,r)))},t}(s.a.Component);function y(){}m.contextType=p,m.propTypes={},m.defaultProps={in:!1,mountOnEnter:!1,unmountOnExit:!1,appear:!1,enter:!0,exit:!0,onEnter:y,onEntering:y,onEntered:y,onExit:y,onExiting:y,onExited:y},m.UNMOUNTED=0,m.EXITED=1,m.ENTERING=2,m.ENTERED=3,m.EXITING=4;var v=m,E=function(e,t){return e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.remove(r):"string"==typeof n.className?n.className=a(n.className,r):n.setAttribute("class",a(n.className&&n.className.baseVal||"",r)));var n,r}))},b=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).appliedClasses={appear:{},enter:{},exit:{}},t.onEnter=function(e,n){t.removeClasses(e,"exit"),t.addClass(e,n?"appear":"enter","base"),t.props.onEnter&&t.props.onEnter(e,n)},t.onEntering=function(e,n){var r=n?"appear":"enter";t.addClass(e,r,"active"),t.props.onEntering&&t.props.onEntering(e,n)},t.onEntered=function(e,n){var r=n?"appear":"enter";t.removeClasses(e,r),t.addClass(e,r,"done"),t.props.onEntered&&t.props.onEntered(e,n)},t.onExit=function(e){t.removeClasses(e,"appear"),t.removeClasses(e,"enter"),t.addClass(e,"exit","base"),t.props.onExit&&t.props.onExit(e)},t.onExiting=function(e){t.addClass(e,"exit","active"),t.props.onExiting&&t.props.onExiting(e)},t.onExited=function(e){t.removeClasses(e,"exit"),t.addClass(e,"exit","done"),t.props.onExited&&t.props.onExited(e)},t.getClassNames=function(e){var n=t.props.classNames,r="string"==typeof n,o=r?""+(r&&n?n+"-":"")+e:n[e];return{baseClassName:o,activeClassName:r?o+"-active":n[e+"Active"],doneClassName:r?o+"-done":n[e+"Done"]}},t}i(t,e);var n=t.prototype;return n.addClass=function(e,t,n){var r=this.getClassNames(t)[n+"ClassName"];"appear"===t&&"done"===n&&(r+=" "+this.getClassNames("enter").doneClassName),"active"===n&&e&&e.scrollTop,this.appliedClasses[t][n]=r,function(e,t){e&&t&&t.split(" ").forEach((function(t){return r=t,void((n=e).classList?n.classList.add(r):function(e,t){return e.classList?!!t&&e.classList.contains(t):-1!==(" "+(e.className.baseVal||e.className)+" ").indexOf(" "+t+" ")}(n,r)||("string"==typeof n.className?n.className=n.className+" "+r:n.setAttribute("class",(n.className&&n.className.baseVal||"")+" "+r)));var n,r}))}(e,r)},n.removeClasses=function(e,t){var n=this.appliedClasses[t],r=n.base,o=n.active,i=n.done;this.appliedClasses[t]={},r&&E(e,r),o&&E(e,o),i&&E(e,i)},n.render=function(){var e=this.props,t=(e.classNames,o(e,["classNames"]));return s.a.createElement(v,r({},t,{onEnter:this.onEnter,onEntered:this.onEntered,onEntering:this.onEntering,onExit:this.onExit,onExiting:this.onExiting,onExited:this.onExited}))},t}(s.a.Component);b.defaultProps={classNames:""},b.propTypes={};var g=b;function x(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}function C(e,t){var n=Object.create(null);return e&&l.Children.map(e,(function(e){return e})).forEach((function(e){n[e.key]=function(e){return t&&Object(l.isValidElement)(e)?t(e):e}(e)})),n}function k(e,t,n){return null!=n[t]?n[t]:e.props[t]}function O(e,t,n){var r=C(e.children),o=function(e,t){function n(n){return n in t?t[n]:e[n]}e=e||{},t=t||{};var r,o=Object.create(null),i=[];for(var a in e)a in t?i.length&&(o[a]=i,i=[]):i.push(a);var l={};for(var s in t){if(o[s])for(r=0;r<o[s].length;r++){var u=o[s][r];l[o[s][r]]=n(u)}l[s]=n(s)}for(r=0;r<i.length;r++)l[i[r]]=n(i[r]);return l}(t,r);return Object.keys(o).forEach((function(i){var a=o[i];if(Object(l.isValidElement)(a)){var s=i in t,u=i in r,c=t[i],d=Object(l.isValidElement)(c)&&!c.props.in;!u||s&&!d?u||!s||d?u&&s&&Object(l.isValidElement)(c)&&(o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:c.props.in,exit:k(a,"exit",e),enter:k(a,"enter",e)})):o[i]=Object(l.cloneElement)(a,{in:!1}):o[i]=Object(l.cloneElement)(a,{onExited:n.bind(null,a),in:!0,exit:k(a,"exit",e),enter:k(a,"enter",e)})}})),o}var M=Object.values||function(e){return Object.keys(e).map((function(t){return e[t]}))},w=function(e){function t(t,n){var r,o=(r=e.call(this,t,n)||this).handleExited.bind(x(x(r)));return r.state={contextValue:{isMounting:!0},handleExited:o,firstRender:!0},r}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.mounted=!0,this.setState({contextValue:{isMounting:!1}})},n.componentWillUnmount=function(){this.mounted=!1},t.getDerivedStateFromProps=function(e,t){var n,r,o=t.children,i=t.handleExited;return{children:t.firstRender?(n=e,r=i,C(n.children,(function(e){return Object(l.cloneElement)(e,{onExited:r.bind(null,e),in:!0,appear:k(e,"appear",n),enter:k(e,"enter",n),exit:k(e,"exit",n)})}))):O(e,o,i),firstRender:!1}},n.handleExited=function(e,t){var n=C(this.props.children);e.key in n||(e.props.onExited&&e.props.onExited(t),this.mounted&&this.setState((function(t){var n=r({},t.children);return delete n[e.key],{children:n}})))},n.render=function(){var e=this.props,t=e.component,n=e.childFactory,r=o(e,["component","childFactory"]),i=this.state.contextValue,a=M(this.state.children).map(n);return delete r.appear,delete r.enter,delete r.exit,null===t?s.a.createElement(p.Provider,{value:i},a):s.a.createElement(p.Provider,{value:i},s.a.createElement(t,r,a))},t}(s.a.Component);w.propTypes={},w.defaultProps={component:"div",childFactory:function(e){return e}};var S=w,T=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).handleEnter=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEnter",0,n)},t.handleEntering=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntering",0,n)},t.handleEntered=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onEntered",0,n)},t.handleExit=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExit",1,n)},t.handleExiting=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExiting",1,n)},t.handleExited=function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];return t.handleLifecycle("onExited",1,n)},t}i(t,e);var n=t.prototype;return n.handleLifecycle=function(e,t,n){var r,o=this.props.children,i=s.a.Children.toArray(o)[t];i.props[e]&&(r=i.props)[e].apply(r,n),this.props[e]&&this.props[e](c.a.findDOMNode(this))},n.render=function(){var e=this.props,t=e.children,n=e.in,r=o(e,["children","in"]),i=s.a.Children.toArray(t),a=i[0],l=i[1];return delete r.onEnter,delete r.onEntering,delete r.onEntered,delete r.onExit,delete r.onExiting,delete r.onExited,s.a.createElement(S,r,n?s.a.cloneElement(a,{key:"first",onEnter:this.handleEnter,onEntering:this.handleEntering,onEntered:this.handleEntered}):s.a.cloneElement(l,{key:"second",onEnter:this.handleExit,onEntering:this.handleExiting,onEntered:this.handleExited}))},t}(s.a.Component);T.propTypes={};var j,P,N=T;var _="out-in",L="in-out",V=function(e,t,n){return function(){var r;e.props[t]&&(r=e.props)[t].apply(r,arguments),n()}},D=((j={})[_]=function(e){var t=e.current,n=e.changeState;return s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){n(f,null)}))})},j[L]=function(e){var t=e.current,n=e.changeState,r=e.children;return[t,s.a.cloneElement(r,{in:!0,onEntered:V(r,"onEntered",(function(){n(f)}))})]},j),H=((P={})[_]=function(e){var t=e.children,n=e.changeState;return s.a.cloneElement(t,{in:!0,onEntered:V(t,"onEntered",(function(){n(h,s.a.cloneElement(t,{in:!0}))}))})},P[L]=function(e){var t=e.current,n=e.children,r=e.changeState;return[s.a.cloneElement(t,{in:!1,onExited:V(t,"onExited",(function(){r(h,s.a.cloneElement(n,{in:!0}))}))}),s.a.cloneElement(n,{in:!0})]},P),A=function(e){function t(){for(var t,n=arguments.length,r=new Array(n),o=0;o<n;o++)r[o]=arguments[o];return(t=e.call.apply(e,[this].concat(r))||this).state={status:h,current:null},t.appeared=!1,t.changeState=function(e,n){void 0===n&&(n=t.state.current),t.setState({status:e,current:n})},t}i(t,e);var n=t.prototype;return n.componentDidMount=function(){this.appeared=!0},t.getDerivedStateFromProps=function(e,t){return null==e.children?{current:null}:t.status===f&&e.mode===L?{status:f}:!t.current||(n=t.current,r=e.children,n===r||s.a.isValidElement(n)&&s.a.isValidElement(r)&&null!=n.key&&n.key===r.key)?{current:s.a.cloneElement(e.children,{in:!0})}:{status:"exiting"};var n,r},n.render=function(){var e,t=this.props,n=t.children,r=t.mode,o=this.state,i=o.status,a=o.current,l={children:n,current:a,changeState:this.changeState,status:i};switch(i){case f:e=H[r](l);break;case"exiting":e=D[r](l);break;case h:e=a}return s.a.createElement(p.Provider,{value:{isMounting:!this.appeared}},e)},t}(s.a.Component);A.propTypes={},A.defaultProps={mode:_};var F=A;n.d(t,"CSSTransition",(function(){return g})),n.d(t,"ReplaceTransition",(function(){return N})),n.d(t,"SwitchTransition",(function(){return F})),n.d(t,"TransitionGroup",(function(){return S})),n.d(t,"Transition",(function(){return v})),n.d(t,"config",(function(){return d}))}])}));
 //# sourceMappingURL=index.web.js.map

package.json

 {
   "name": "@devseed-ui/modal",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "devseed UI Kit Modal",
@@ -16,7 +16,5 @@ "browser": "./dist/index.web.js",
   "dependencies": {
-    "@devseed-ui/base": "2.2.0",
-    "@devseed-ui/button": "2.4.0",
-    "@devseed-ui/helpers": "2.3.0",
+    "@devseed-ui/theme-provider": "^2.4.0",
     "react-transition-group": "^4.3.0"
   }
 }

README.md

 # Modal
+
 Displays a modal component which is portaled to the body to ensure is appears over all other elements
 
-## Import 
+## Example
 
-```code
-  import { Modal } from '@devseed-ui/modal';
-```
-
-## Example
 ```react
@@ -15,3 +11,3 @@ state: {revealed: false}
 <DevseedUiThemeProvider>
-  <button onClick={() => setState({revealed: true})}>Open modal</button>
+  <Button variation="primary-raised-dark" onClick={() => setState({revealed: true})}>Open modal</Button>
   <Modal
@@ -35,70 +31,56 @@ id="modal"
 
-## Properties
+### Code Sample
 
-**id**
-`string`
-An id for the modal
+```html
+<div>
+  <iframe
+    src="https://codesandbox.io/embed/modal-sample-ktqel?fontsize=14&hidenavigation=1&theme=dark"
+    style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
+    title="modal-sample"
+    allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
+    sandbox="allow-autoplay allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
+  ></iframe>
+</div>
+```
 
-**size**
-`string` - default `medium`
-Modal size. One of "small", "medium", "large", "xlarge", "full"
+## Properties
 
-**revealed**
-`bool`
-Whether or not the modal is visible
+```table
+rows:
+  - Prop name: "id"
+    Type: "string"
+    Description: "An id for the modal"
+    Default value: "n/a"
+  - Prop name: "size"
+    Type: "oneOf ['small', 'medium', 'large', 'xlarge', 'full']"
+    Description: "Sets the size of the modal"
+    Default value: "medium"
+  - Prop name: "revealed"
+    Type: "bool"
+    Description: "Whether or not the modal is visible"
+    Default value: "false"
+  - Prop name: "className"
+    Type: "string"
+    Description: "Classes for the modal wrapper"
+    Default value: "none"
+  - Prop name: "onOverlayClick"
+    Type: "function"
+    Description: "Callback function for overlay click"
+    Default value: "none"
+  - Prop name: "onCloseClick"
+    Type: "function"
+    Description: "Callback function for close button click"
+    Default value: "none"
+  - Prop name: "closeButton"
+    Type: "bool"
+    Description: "Whether or not the modal should render the default close button"
+    Default value: "true"
+  - Prop name: "title"
+    Type: "string"
+    Description: "Title for the modal. Required unless the header is being overridden"
+    Default value: "none"
+```
 
-**className**
-`string`
-Classes for the modal wrapper
+**Note:** All the render (`render*`) props have the signature `fn(bag) => {}`, where:
 
-**onOverlayClick**
-`function`
-Callback function for overlay click
-
-**onCloseClick**
-`function`
-Callback function for close button click
-
-**closeButton**
-`bool` - default `true`
-Whether or not the modal should render the default close button
-
-**title**
-`string`
-Title for the modal. Required unless the header is being overridden
-
-**content**
-`node`
-Modal body content, rendered inside `ModalBody`. Required unless the body is being overridden
-
-**footerContent**
-`node`
-Modal footer content, rendered inside `ModalFooter`
-
-**renderContents**
-`function`
-Overrides the contents of the modal. Anything returned by this function is rendered inside `ModalContents`
-
-**renderHeader**
-`function`
-Overrides the modal header element. Anything returned by this function is rendered instead of `ModalHeader`
-
-**renderHeadline**
-`function`
-Overrides the modal headline element. Anything returned by this function is rendered instead of `ModalHeadline`
-
-**renderToolbar**
-`function`
-Overrides the modal toolbar element. Anything returned by this function is rendered instead of `ModalToolbar`
-
-**renderBody**
-`function`
-Overrides the modal body element. Anything returned by this function is rendered instead of `ModalBody`
-
-**renderFooter**
-`function`
-Overrides the modal footer element. Anything returned by this function is rendered instead of `ModalFooter`
-
-
-**Note:** All the render (`render*`) props have the signature `fn(bag) => {}`, where:
 ```
@@ -113,2 +95,3 @@ {object} bag Modal functions
 It is listed with styled components and the corresponding html element in front.
+
 ```
@@ -130,5 +113,7 @@ <ModalWrapper>            // article
 ```
+
 The `ModalWrapper` and `ModalContents` are required for positioning and
 styling purposes. All other elements can be replaced via render functions.
 The code that generates the structure above is:
+
 ```
@@ -144,2 +129,2 @@ <Modal
 />
-```
+```

src/index.js

@@ -209,3 +209,3 @@ import React from 'react';
 
-    const klasses = ['modal', ...(className || [])];
+    const klasses = ['modal', ...(className ? className.split(' ') : [])];
 
@@ -225,2 +225,3 @@ return createPortal(
           id={id}
+          size={size}
         >
@@ -227,0 +228,0 @@ <BodyUnscrollable revealed={revealed} />

src/Modal.stories.js

@@ -6,3 +6,3 @@ import React, { useState } from 'react';
 import { Button } from '@devseed-ui/button';
-import { DevseedUiThemeProvider } from '@devseed-ui/helpers';
+import { DevseedUiThemeProvider } from '@devseed-ui/theme-provider';
 
@@ -40,3 +40,3 @@ import { Modal, ModalHeadline, ModalFooter } from '.';
               'Size',
-              ['small', 'medium', 'large', 'xlarge', 'full'],
+              ['small', 'medium', 'large', 'xlarge', 'full', 'fullscreen'],
               'medium',
@@ -43,0 +43,0 @@ )}

src/styled.js

 import styled, { createGlobalStyle } from 'styled-components';
 import { rgba } from 'polished';
 
-import { themeVal, stylizeFunction, glsp } from '@devseed-ui/base';
+import { themeVal, stylizeFunction, glsp } from '@devseed-ui/theme-provider';
 
@@ -50,3 +50,4 @@ const _rgba = stylizeFunction(rgba);
   transform: translate3d(0, 0, 0);
-  padding: ${({ size }) => (size === 'fullscreen' ? 0 : `${glsp(2)}`)};
+  padding: ${({ size }) => (size === 'fullscreen' ? 0 : glsp(2))};
+
   &.modal-appear,
@@ -53,0 +54,0 @@ &.modal-enter {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

293291

increased by0.1%

Dependency count

2

decreased by-50%

Lines of code

1011

increased by0.1%

Worsened metrics

Number of lines in readme file

126

decreased by-10%

Dependency changes

• + Added@devseed-ui/theme-provider@^2.4.0

• + Added@devseed-ui/theme-provider@2.4.0(transitive)

• - Removed@devseed-ui/base@2.2.0

• - Removed@devseed-ui/button@2.4.0

• - Removed@devseed-ui/helpers@2.3.0

• - Removed@devseed-ui/base@2.2.0(transitive)

• - Removed@devseed-ui/button@2.4.0(transitive)

• - Removed@devseed-ui/collecticons@0.12.0(transitive)

• - Removed@devseed-ui/helpers@2.3.0(transitive)

• - Removed@devseed-ui/theme@2.3.0(transitive)

• - Removedcollecticons-lib@2.2.0(transitive)