nzk-react-components 0.3.4 → 0.3.5

package/dist/components/DrawingTool/DrawingTool.d.ts

@@ -9,6 +9,8 @@ export interface Props {
     minImageUploadSize?: number;
     disableAutoCache?: boolean;
     openUploadPopupOnStart?: boolean;
+    enableMagicCrop?: boolean;
+    magicCropUploadPreset?: string;
     cacheKey?: string;
 }
 export declare type Orientation = 'LANDSCAPE' | 'PORTRAIT';
@@ -24,6 +26,7 @@ declare const Drawing: {
         disableAutoCache: boolean;
         cacheKey: string;
         openUploadPopupOnStart: boolean;
+        enableMagicCrop: boolean;
     };
 };
 export default Drawing;

package/dist/components/DrawingTool/DrawingTool.js

@@ -15,10 +15,14 @@ var IconButton = require('../IconButton/IconButton.js');
 var ColourToolbar = require('./components/ColourToolbar/ColourToolbar.js');
 var Modal = require('../Modal/Modal.js');
 var DrawingToolProvider = require('./DrawingToolProvider.js');
-var FileInput = require('./components/FileInput/FileInput.js');
+var ImageInputPopup = require('./components/ImageInputPopup/ImageInputPopup.js');
 var index = require('./components/Placeable/index.js');
 var OpacityToggle = require('./components/OpacityToggle/OpacityToggle.js');
 var Header = require('./components/Header/Header.js');
+var CropChoicePopup = require('./components/CropChoicePopup/CropChoicePopup.js');
+var ManualCropPopup = require('./components/ManualCropPopup/ManualCropPopup.js');
+var MagicCropPopup = require('./components/MagicCropPopup/MagicCropPopup.js');
+var Loader = require('./components/Loader.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -47,13 +51,14 @@ var Drawing = function (props) {
     var _g = React.useState(50), buttonSize = _g[0], setButtonSize = _g[1];
     var _h = React.useState(false), isMobile = _h[0], setIsMobile = _h[1];
     var _j = React.useState(true), resizing = _j[0], setResizing = _j[1];
-    var _k = React.useState(false), showRestartConfirmModal = _k[0], setShowRestartConfirmModal = _k[1];
-    var _l = React.useState(props.openUploadPopupOnStart), showFileInput = _l[0], setShowFileInput = _l[1];
-    var _m = React.useState(), imageToCut = _m[0], setImageToCut = _m[1];
-    var _o = React.useState(true), showCutTutorial = _o[0], setShowCutTutorial = _o[1];
-    var _p = React.useState(false), showSaveCutAction = _p[0], setShowSaveCutAction = _p[1];
-    var _q = React.useState(), imageToPlace = _q[0], setImageToPlace = _q[1];
-    var _r = DrawingToolProvider.useDrawingTool(), initSketch = _r.initSketch, initSketchCut = _r.initSketchCut, exportSketchCut = _r.exportSketchCut, currentColour = _r.currentColour, brushSize = _r.brushSize, setBrushSize = _r.setBrushSize, brushType = _r.brushType, setBrushType = _r.setBrushType, undo = _r.undo, redo = _r.redo, restart = _r.restart, setCacheKey = _r.setCacheKey, setAutoCache = _r.setAutoCache, resetCut = _r.resetCut, mergeImage = _r.mergeImage, setToolMode = _r.setToolMode;
+    var _k = React.useState(false), showRestartConfirmPopup = _k[0], setShowRestartConfirmPopup = _k[1];
+    var _l = React.useState(props.openUploadPopupOnStart), showImageInputPopup = _l[0], setShowImageInputPopup = _l[1];
+    var _m = React.useState(false), showCropChoicePopup = _m[0], setShowCropChoicePopup = _m[1];
+    var _o = React.useState(false), showMagicCropPopup = _o[0], setShowMagicCropPopup = _o[1];
+    var _p = React.useState(false), showManualCropPopup = _p[0], setShowManualCropPopup = _p[1];
+    var _q = React.useState(false), showManualCropTool = _q[0], setShowManualCropTool = _q[1];
+    var _r = React.useState(false), showSaveCropAction = _r[0], setShowSaveCropAction = _r[1];
+    var _s = DrawingToolProvider.useDrawingTool(), initSketch = _s.initSketch, initSketchCut = _s.initSketchCut, sketchLoading = _s.sketchLoading, exportSketchCut = _s.exportSketchCut, currentColour = _s.currentColour, brushSize = _s.brushSize, setBrushSize = _s.setBrushSize, brushType = _s.brushType, setBrushType = _s.setBrushType, undo = _s.undo, redo = _s.redo, restart = _s.restart, setCacheKey = _s.setCacheKey, setAutoCache = _s.setAutoCache, resetCut = _s.resetCut, mergeImage = _s.mergeImage, imageToCrop = _s.imageToCrop, setImageToCrop = _s.setImageToCrop, imageToPlace = _s.imageToPlace, setImageToPlace = _s.setImageToPlace;
     React.useEffect(function () {
         if (typeof props.disableAutoCache === 'boolean') {
             setAutoCache(!props.disableAutoCache);
@@ -96,28 +101,22 @@ var Drawing = function (props) {
         }
     }, [containerWidth, containerHeight]);
     React.useEffect(function () {
-        if (!imageToCut && !resizing && sketchInnerRef.current) {
+        if (!showManualCropTool && !resizing && sketchInnerRef.current) {
             initSketch(sketchInnerRef.current);
         }
-    }, [resizing, sketchInnerRef, imageToCut]);
+    }, [resizing, sketchInnerRef, imageToCrop, showManualCropTool]);
     React.useEffect(function () {
-        if (!resizing && sketchCutInnerRef.current && imageToCut) {
-            initSketchCut(sketchCutInnerRef.current, imageToCut, function () {
-                setShowSaveCutAction(true);
+        if (!resizing && sketchCutInnerRef.current && imageToCrop && showManualCropTool) {
+            initSketchCut(sketchCutInnerRef.current, imageToCrop, function () {
+                setShowSaveCropAction(true);
             });
         }
-    }, [resizing, sketchCutInnerRef, imageToCut]);
+    }, [resizing, sketchCutInnerRef, imageToCrop, showManualCropTool]);
     var onClickRestart = function () {
-        setShowRestartConfirmModal(true);
+        setShowRestartConfirmPopup(true);
     };
     var onClickCamera = function () {
-        setShowFileInput(true);
-    };
-    var onImageUploaded = function (image) {
-        setShowFileInput(false);
-        setImageToCut(image);
-        setShowCutTutorial(true);
-        setToolMode("CUT");
+        setShowImageInputPopup(true);
     };
     var getImageToPlaceSize = function (img) {
         var ratio = 0.8;
@@ -156,26 +155,25 @@ var Drawing = function (props) {
             left: '0px'
         };
     }
-    var disableToolbars = (showFileInput || showRestartConfirmModal || imageToCut || imageToPlace);
+    var disableToolbars = (showImageInputPopup || showRestartConfirmPopup || imageToCrop || imageToPlace);
     var inSketchActions = [];
-    if (showSaveCutAction) {
+    if (showSaveCropAction) {
         inSketchActions.push({
             key: 'retry-cut',
             component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "drawing-tool-undo", fill: "white" }), theme: 'orange', size: isMobile ? "small" : "regular", onClick: function () {
-                    setShowSaveCutAction(false);
-                    setShowCutTutorial(true);
+                    setShowSaveCropAction(false);
+                    setShowManualCropPopup(true);
                     resetCut();
                 } }, "Retry")
         }, {
             key: 'save-cut',
             component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
-                    setShowSaveCutAction(false);
-                    setImageToCut(undefined);
+                    setShowSaveCropAction(false);
+                    setShowManualCropTool(false);
+                    setImageToCrop(undefined);
                     var newImage = new Image;
                     newImage.onload = function () {
-                        setShowCutTutorial(true);
                         setImageToPlace(newImage);
-                        setToolMode('PLACE');
                     };
                     newImage.src = exportSketchCut();
                 } }, "Save")
@@ -186,7 +184,6 @@ var Drawing = function (props) {
             key: 'cancel-place',
             component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "close" }), theme: 'red', size: isMobile ? "small" : "regular", onClick: function () {
                     setImageToPlace(undefined);
-                    setToolMode('DRAW');
                 } }, "Cancel")
         }, {
             key: 'save-place',
@@ -202,7 +199,6 @@ var Drawing = function (props) {
                             height: Math.hypot(rect.pos3[0] - rect.pos2[0], rect.pos3[1] - rect.pos2[1]),
                             rotation: rect.rotation
                         });
-                        setToolMode('DRAW');
                         setImageToPlace(undefined);
                     }
                 } }, "Save")
@@ -243,36 +239,64 @@ var Drawing = function (props) {
                     React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, largeLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.large); } }),
                         React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.large ? 'white' : currentColour.hex, name: 'drawing-tool-large-line' })))),
             React__default['default'].createElement(DrawingTool_styles.SketchContainer, { orientation: orientation, ref: sketchOuterRef },
-                props.showPaperBackground && React__default['default'].createElement(DrawingTool_styles.PaperBackground, { cutMode: imageToCut && true }),
-                !imageToCut && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchInnerRef }),
-                imageToCut && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchCutInnerRef }),
+                props.showPaperBackground && React__default['default'].createElement(DrawingTool_styles.PaperBackground, { cutMode: imageToCrop && true }),
+                !showManualCropTool && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchInnerRef }),
+                showManualCropTool && imageToCrop && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchCutInnerRef }),
                 imageToPlace && sketchStyles && (React__default['default'].createElement("div", { style: tslib.__assign(tslib.__assign({}, sketchStyles), { zIndex: '101' }) },
                     React__default['default'].createElement(DrawingTool_styles.ImageToPlaceContainer, null,
                         React__default['default'].createElement(DrawingTool_styles.ImageToPlace, { size: getImageToPlaceSize(imageToPlace), ref: imageToPlaceContainerRef, src: imageToPlace.src })),
                     React__default['default'].createElement(Moveable__default['default'], { ref: moveableRef, target: imageToPlaceContainerRef, ables: [index], props: {
                             placeable: true,
                         }, snappable: true, bounds: { left: 0, top: 0, bottom: (_a = sketchOuterRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight, right: (_b = sketchOuterRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, draggable: true, scalable: true, keepRatio: true, rotatable: true, onDragStart: helper.onDragStart, onDrag: helper.onDrag, onScaleStart: helper.onScaleStart, onScale: helper.onScale, onRotateStart: helper.onRotateStart, onRotate: helper.onRotate }))),
-                inSketchActions.length && (React__default['default'].createElement(DrawingTool_styles.InSketchActions, null, inSketchActions.map(function (action) { return (React__default['default'].createElement(DrawingTool_styles.InSketchAction, { key: action.key }, action.component)); }))),
-                imageToCut && showCutTutorial && React__default['default'].createElement(DrawingTool_styles.CutImageTutorial, { onClick: function () { return setShowCutTutorial(false); } },
-                    React__default['default'].createElement("div", null, "Now cut out your animal: Click, hold and make sure you draw around it."),
-                    React__default['default'].createElement("img", { alt: "crop example", src: "https://cdn.nightzookeeper.com/nzk-assets/crop-tutorial.png" }),
-                    React__default['default'].createElement("div", null,
-                        React__default['default'].createElement(Button, { size: isMobile ? "small" : "regular", theme: "primary" }, "Ok")))),
+                sketchLoading && React__default['default'].createElement(DrawingTool_styles.LoaderOverlay, null,
+                    React__default['default'].createElement(Loader, { placeholder: "Loading drawing...", color: 'white' })),
+                inSketchActions.length && (React__default['default'].createElement(DrawingTool_styles.InSketchActions, null, inSketchActions.map(function (action) { return (React__default['default'].createElement(DrawingTool_styles.InSketchAction, { key: action.key }, action.component)); })))),
             React__default['default'].createElement(DrawingTool_styles.RightToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
                 React__default['default'].createElement(ColourToolbar, { orientation: orientation, size: buttonSize, currentColour: currentColour }),
                 React__default['default'].createElement(OpacityToggle, { orientation: orientation, buttonSize: buttonSize }))),
-        showRestartConfirmModal && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
+        showRestartConfirmPopup && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
             React__default['default'].createElement(Modal, { title: "Are you sure?", actions: [
                     React__default['default'].createElement(Button, { key: 'cancel', size: isMobile ? "small" : "regular", theme: "red", onClick: function () {
-                            setShowRestartConfirmModal(false);
+                            setShowRestartConfirmPopup(false);
                         } }, "No"),
                     React__default['default'].createElement(Button, { key: 'confirm', size: isMobile ? "small" : "regular", theme: "confirm", onClick: function () {
                             restart();
-                            setShowRestartConfirmModal(false);
+                            setShowRestartConfirmPopup(false);
                         } }, "Yes"),
                 ] })),
-        showFileInput && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
-            React__default['default'].createElement(FileInput, { isMobile: isMobile, dismiss: function () { return setShowFileInput(false); }, onImageUploaded: onImageUploaded, minImageSize: props.minImageUploadSize })));
+        showImageInputPopup && React__default['default'].createElement(ImageInputPopup, { isMobile: isMobile, onDismiss: function () { return setShowImageInputPopup(false); }, minImageSize: props.minImageUploadSize, onImageSelected: function () {
+                setShowImageInputPopup(false);
+                if (props.enableMagicCrop) {
+                    setShowCropChoicePopup(true);
+                }
+                else {
+                    setShowManualCropTool(true);
+                    setShowManualCropPopup(true);
+                }
+            } }),
+        showCropChoicePopup && React__default['default'].createElement(CropChoicePopup, { onDismiss: function () {
+                setShowCropChoicePopup(false);
+                setImageToCrop(undefined);
+            }, onMagicCrop: function () {
+                setShowCropChoicePopup(false);
+                setShowMagicCropPopup(true);
+            }, onManualCrop: function () {
+                setShowCropChoicePopup(false);
+                setShowManualCropPopup(true);
+                setShowManualCropTool(true);
+            } }),
+        showMagicCropPopup && props.magicCropUploadPreset && React__default['default'].createElement(MagicCropPopup, { cloudinaryUploadPreset: props.magicCropUploadPreset, onManual: function () {
+                setShowMagicCropPopup(false);
+                setShowManualCropPopup(true);
+                setShowManualCropTool(true);
+            }, onDismiss: function () {
+                setImageToCrop(undefined);
+                setShowMagicCropPopup(false);
+            } }),
+        showManualCropPopup && React__default['default'].createElement(ManualCropPopup, { onNext: function () { return setShowManualCropPopup(false); }, onDismiss: function () {
+                setShowManualCropPopup(false);
+                setImageToCrop(undefined);
+            } }));
 };
 Drawing.defaultProps = {
     prompt: 'Draw your Animal',
@@ -283,7 +307,8 @@ Drawing.defaultProps = {
     disableCameraUpload: false,
     disableAutoCache: false,
     cacheKey: 'nzk-sketch-cache',
-    openUploadPopupOnStart: false
+    openUploadPopupOnStart: false,
+    enableMagicCrop: false
 };
 
 module.exports = Drawing;

package/dist/components/DrawingTool/DrawingTool.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawingTool.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DrawingTool.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/DrawingTool.styles.d.ts

@@ -44,3 +44,4 @@ export declare const ImageToPlace: import("styled-components").StyledComponent<"
     };
 }, never>;
 export declare const CutImageTutorial: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const LoaderOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DrawingTool/DrawingTool.styles.js

@@ -32,20 +32,21 @@ var PaperBackground = styled__default['default'].div(templateObject_9 || (templa
     : '#ebebeb'; });
 var InSketchActions = styled__default['default'].div(templateObject_10 || (templateObject_10 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 102;\n  @media (max-width: 768px) {\n    bottom: 10px;\n  }\n  @media (max-height: 500px) {\n    bottom: 10px;\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 102;\n  @media (max-width: 768px) {\n    bottom: 10px;\n  }\n  @media (max-height: 500px) {\n    bottom: 10px;\n  }\n"])));
 var InSketchAction = styled__default['default'].div(templateObject_11 || (templateObject_11 = tslib.__makeTemplateObject(["\n  position: relative;\n  margin-right: 20px;\n"], ["\n  position: relative;\n  margin-right: 20px;\n"])));
-var ModalOverlay = styled__default['default'].div(templateObject_12 || (templateObject_12 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var ModalOverlay = styled__default['default'].div(templateObject_12 || (templateObject_12 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
 var ImageToPlaceContainer = styled__default['default'].div(templateObject_13 || (templateObject_13 = tslib.__makeTemplateObject(["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 101;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"], ["\n  position: absolute;\n  left: 0;\n  top: 0;\n  z-index: 101;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}"])));
 var ImageToPlace = styled__default['default'].img(templateObject_14 || (templateObject_14 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n}\n"], ["\n  position: absolute;\n  width: ", "px;\n  height: ", "px;\n}\n"])), function (props) { return props.size.width; }, function (props) { return props.size.height; });
-var CutImageTutorial = styled__default['default'].div(templateObject_15 || (templateObject_15 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  left: 50%;\n  top: 50%;\n  width: 90%;\n  height: 90%;\n  transform: translate(-50%, -50%);\n  max-width: 800px;\n  max-height: 600px;\n  background-color: white;\n  z-index: 101;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: white;\n  font-size: 30px;\n  text-align: center;\n\n  @media (max-width: 960px) {\n    font-size: 24px;\n  }\n\n  @media (max-width: 760px), (max-height: 600px) {\n    font-size: 16px;\n    width: 95%;\n    padding: 30px;\n  }\n\n  img {\n    width: 100%;\n    max-width: 350px;\n    @media (max-width: 960px) {\n      max-width: 250px;\n    }\n    @media (max-width: 760px), (max-height: 600px) {\n      max-width: 120px;\n    }\n  }\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n\n"], ["\n  position: absolute;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  left: 50%;\n  top: 50%;\n  width: 90%;\n  height: 90%;\n  transform: translate(-50%, -50%);\n  max-width: 800px;\n  max-height: 600px;\n  background-color: white;\n  z-index: 101;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: white;\n  font-size: 30px;\n  text-align: center;\n\n  @media (max-width: 960px) {\n    font-size: 24px;\n  }\n\n  @media (max-width: 760px), (max-height: 600px) {\n    font-size: 16px;\n    width: 95%;\n    padding: 30px;\n  }\n\n  img {\n    width: 100%;\n    max-width: 350px;\n    @media (max-width: 960px) {\n      max-width: 250px;\n    }\n    @media (max-width: 760px), (max-height: 600px) {\n      max-width: 120px;\n    }\n  }\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+styled__default['default'].div(templateObject_15 || (templateObject_15 = tslib.__makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  left: 50%;\n  top: 50%;\n  width: 90%;\n  height: 90%;\n  transform: translate(-50%, -50%);\n  max-width: 800px;\n  max-height: 600px;\n  background-color: white;\n  z-index: 101;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: white;\n  font-size: 30px;\n  text-align: center;\n\n  @media (max-width: 960px) {\n    font-size: 24px;\n  }\n\n  @media (max-width: 760px), (max-height: 600px) {\n    font-size: 16px;\n    width: 95%;\n    padding: 30px;\n  }\n\n  img {\n    width: 100%;\n    max-width: 350px;\n    @media (max-width: 960px) {\n      max-width: 250px;\n    }\n    @media (max-width: 760px), (max-height: 600px) {\n      max-width: 120px;\n    }\n  }\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  left: 50%;\n  top: 50%;\n  width: 90%;\n  height: 90%;\n  transform: translate(-50%, -50%);\n  max-width: 800px;\n  max-height: 600px;\n  background-color: white;\n  z-index: 101;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  box-sizing: border-box;\n  color: white;\n  font-size: 30px;\n  text-align: center;\n\n  @media (max-width: 960px) {\n    font-size: 24px;\n  }\n\n  @media (max-width: 760px), (max-height: 600px) {\n    font-size: 16px;\n    width: 95%;\n    padding: 30px;\n  }\n\n  img {\n    width: 100%;\n    max-width: 350px;\n    @media (max-width: 960px) {\n      max-width: 250px;\n    }\n    @media (max-width: 760px), (max-height: 600px) {\n      max-width: 120px;\n    }\n  }\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])));
+var LoaderOverlay = styled__default['default'].div(templateObject_16 || (templateObject_16 = tslib.__makeTemplateObject(["\n  background-color: rgba(0,0,0,.5);\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  z-index: 10;\n  font-size: 24px;\n"], ["\n  background-color: rgba(0,0,0,.5);\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n  z-index: 10;\n  font-size: 24px;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
 
 exports.ButtonGroup = ButtonGroup;
 exports.Container = Container;
-exports.CutImageTutorial = CutImageTutorial;
 exports.ImageToPlace = ImageToPlace;
 exports.ImageToPlaceContainer = ImageToPlaceContainer;
 exports.InSketchAction = InSketchAction;
 exports.InSketchActions = InSketchActions;
 exports.LeftToolbarContainer = LeftToolbarContainer;
+exports.LoaderOverlay = LoaderOverlay;
 exports.ModalOverlay = ModalOverlay;
 exports.PaperBackground = PaperBackground;
 exports.RightToolbarContainer = RightToolbarContainer;

package/dist/components/DrawingTool/DrawingTool.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawingTool.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DrawingTool.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/DrawingToolProvider.d.ts

@@ -14,7 +14,6 @@ export interface Colour {
     rgb: number[];
     hex: string;
 }
-declare type ToolMode = 'LOADING' | 'DRAW' | 'CUT' | 'PLACE';
 export interface Props {
     cache?: string;
 }
@@ -22,6 +21,7 @@ export declare const DrawingToolProvider: import("react").ComponentType<import("
 export declare const useDrawingTool: () => {
     initSketch: (containerEl: any) => void;
     initSketchCut: (containerEl: any, imageToCut: HTMLImageElement, onImageCut: () => void) => void;
+    sketchLoading: boolean;
     exportSketch: (options?: {
         crop: boolean;
     }) => string;
@@ -49,8 +49,9 @@ export declare const useDrawingTool: () => {
     clearCache: () => void;
     resetCut: () => void;
     mergeImage: (data: SketchActionMergeData) => void | null;
-    setToolMode: import("react").Dispatch<import("react").SetStateAction<ToolMode>>;
-    toolMode: ToolMode;
     exportCache: () => string | null;
+    imageToCrop: HTMLImageElement | undefined;
+    setImageToCrop: import("react").Dispatch<import("react").SetStateAction<HTMLImageElement | undefined>>;
+    imageToPlace: HTMLImageElement | undefined;
+    setImageToPlace: import("react").Dispatch<import("react").SetStateAction<HTMLImageElement | undefined>>;
 };
-export {};

package/dist/components/DrawingTool/DrawingToolProvider.js

@@ -34,11 +34,13 @@ var DrawingToolState = function (props) {
     var sketchCutRef = React.useRef();
     var _a = React.useState(true), autoCache = _a[0], setAutoCache = _a[1];
     var _b = React.useState('nzk-sketch-cache'), cacheKey = _b[0], setCacheKey = _b[1];
-    var _c = React.useState(BrushSize.small), brushSize = _c[0], setBrushSize = _c[1];
-    var _d = React.useState('line'), brushType = _d[0], setBrushType = _d[1];
-    var _e = React.useState(Colours[0]), currentColour = _e[0], setCurrentColour = _e[1];
-    var _f = React.useState(1), brushOpacity = _f[0], setBruchOpacity = _f[1];
-    var _g = React.useState('LOADING'), toolMode = _g[0], setToolMode = _g[1];
+    var _c = React.useState(false), sketchLoading = _c[0], setSketchLoading = _c[1];
+    var _d = React.useState(BrushSize.small), brushSize = _d[0], setBrushSize = _d[1];
+    var _e = React.useState('line'), brushType = _e[0], setBrushType = _e[1];
+    var _f = React.useState(Colours[0]), currentColour = _f[0], setCurrentColour = _f[1];
+    var _g = React.useState(1), brushOpacity = _g[0], setBruchOpacity = _g[1];
+    var _h = React.useState(), imageToCrop = _h[0], setImageToCrop = _h[1];
+    var _j = React.useState(), imageToPlace = _j[0], setImageToPlace = _j[1];
     var setSketchRef = React.useCallback(function (node) {
         sketchRef.current = node;
         if (sketchRef.current) {
@@ -76,8 +78,8 @@ var DrawingToolState = function (props) {
         return (props && props.cache) || window.localStorage.getItem(cacheKey);
     };
     var initSketch = function (containerEl) {
-        setToolMode('LOADING');
         var data;
+        setSketchLoading(true);
         if (sketchRef.current) {
             data = sketchRef.current.serialize();
         }
@@ -92,7 +94,7 @@ var DrawingToolState = function (props) {
             sketchData: data,
             onChange: onSketchChange,
             onReady: function () {
-                setToolMode('DRAW');
+                setSketchLoading(false);
             }
         }));
     };
@@ -148,6 +150,7 @@ var DrawingToolState = function (props) {
     return {
         initSketch: initSketch,
         initSketchCut: initSketchCut,
+        sketchLoading: sketchLoading,
         exportSketch: exportSketch,
         exportSketchCut: exportSketchCut,
         currentColour: currentColour,
@@ -167,9 +170,11 @@ var DrawingToolState = function (props) {
         clearCache: clearCache,
         resetCut: resetCut,
         mergeImage: mergeImage,
-        setToolMode: setToolMode,
-        toolMode: toolMode,
-        exportCache: exportCache
+        exportCache: exportCache,
+        imageToCrop: imageToCrop,
+        setImageToCrop: setImageToCrop,
+        imageToPlace: imageToPlace,
+        setImageToPlace: setImageToPlace
     };
 };
 var DrawingToolProviderContainer = unstatedNext.createContainer(DrawingToolState);

package/dist/components/DrawingTool/DrawingToolProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"DrawingToolProvider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"DrawingToolProvider.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/CropChoicePopup/CropChoicePopup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+interface Props {
+    onDismiss: () => void;
+    onManualCrop: () => void;
+    onMagicCrop: () => void;
+}
+declare const _default: (props: Props) => JSX.Element;
+export default _default;

package/dist/components/DrawingTool/components/CropChoicePopup/CropChoicePopup.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var React = require('react');
+var CropChoicePopup_styles = require('./CropChoicePopup.styles.js');
+var Button = require('../../../Button/Button.js');
+var Popup = require('../Popup.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CropChoicePopup = (function (props) {
+    return React__default['default'].createElement(Popup['default'], { onDismiss: props.onDismiss },
+        React__default['default'].createElement(CropChoicePopup_styles.Title, null, "Cut-Out Your Drawing"),
+        React__default['default'].createElement(CropChoicePopup_styles.Container, null,
+            React__default['default'].createElement("div", null,
+                React__default['default'].createElement(CropChoicePopup_styles.Image, { src: "https://cdn.nightzookeeper.com/nzk-assets/auto-crop-tutorial.png" }),
+                React__default['default'].createElement(Button, { size: 'regular', theme: 'primary', onClick: props.onMagicCrop }, "Auto cut-out"),
+                React__default['default'].createElement("div", null, "Automatically removes the background.")),
+            React__default['default'].createElement("div", null,
+                React__default['default'].createElement(CropChoicePopup_styles.Image, { src: "https://cdn.nightzookeeper.com/nzk-assets/crop-tutorial.png" }),
+                React__default['default'].createElement(Button, { size: 'regular', theme: 'primary', onClick: props.onManualCrop }, "Manual cut-out"),
+                React__default['default'].createElement("div", null, "Drag round the drawing edge to cut it out."))));
+});
+
+module.exports = CropChoicePopup;
+//# sourceMappingURL=CropChoicePopup.js.map

package/dist/components/DrawingTool/components/CropChoicePopup/CropChoicePopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CropChoicePopup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/CropChoicePopup/CropChoicePopup.styles.d.ts

@@ -0,0 +1,5 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"div", any, {
+    src: string;
+}, never>;

package/dist/components/DrawingTool/components/CropChoicePopup/CropChoicePopup.styles.js

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  align-items: center;\n  @media (max-width: 700px) and (min-height: 400px) {\n    flex-direction: column;\n  }\n  & > div {\n    width: 50%;\n    text-align: center;\n    font-size: 24px;\n    & > :last-child {\n      max-width: 250px;\n      margin-left: auto;\n      margin-right: auto;\n      margin-top: 10px;\n    }\n    @media (max-width: 700px) and (min-height: 400px) {\n      width: 100%;\n    }\n    @media (max-width: 700px) and (max-height: 700px) {\n      font-size: 18px;\n    }\n  }\n"], ["\n  position: relative;\n  width: 100%;\n  display: flex;\n  justify-content: center;\n  flex-wrap: wrap;\n  align-items: center;\n  @media (max-width: 700px) and (min-height: 400px) {\n    flex-direction: column;\n  }\n  & > div {\n    width: 50%;\n    text-align: center;\n    font-size: 24px;\n    & > :last-child {\n      max-width: 250px;\n      margin-left: auto;\n      margin-right: auto;\n      margin-top: 10px;\n    }\n    @media (max-width: 700px) and (min-height: 400px) {\n      width: 100%;\n    }\n    @media (max-width: 700px) and (max-height: 700px) {\n      font-size: 18px;\n    }\n  }\n"])));
+var Title = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  font-size: 44px;\n  font-family: 'Rammetto One';\n  text-shadow: 0px 3px 0px #A6A6A6, 0px 6px 0px rgba(0,0,0, .5);\n  margin-bottom: 20px;\n  text-align: center;\n  width: 100%;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    font-size: 28px;\n    text-shadow: 0px 2px 0px #A6A6A6, 0px 2px 0px rgba(0,0,0, .5);\n    margin-bottom: 10px;\n  }\n  @media (max-width: 500px) {\n    max-width: 250px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n"], ["\n  font-size: 44px;\n  font-family: 'Rammetto One';\n  text-shadow: 0px 3px 0px #A6A6A6, 0px 6px 0px rgba(0,0,0, .5);\n  margin-bottom: 20px;\n  text-align: center;\n  width: 100%;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    font-size: 28px;\n    text-shadow: 0px 2px 0px #A6A6A6, 0px 2px 0px rgba(0,0,0, .5);\n    margin-bottom: 10px;\n  }\n  @media (max-width: 500px) {\n    max-width: 250px;\n    margin-left: auto;\n    margin-right: auto;\n  }\n"])));
+var Image = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  position: relative;\n  background-image: url(", ");\n  background-position: center;\n  background-size: contain;\n  background-repeat: no-repeat;\n  height: 250px;\n  @media (max-width: 850px) and (max-height: 900px) {\n    height: 200px;\n  }\n  @media (max-width: 815px) and (max-height: 900px) {\n    height: 180px;\n  }\n  @media (max-width: 700px) and (max-height: 700px) {\n    height: 120px;\n  }\n"], ["\n  position: relative;\n  background-image: url(", ");\n  background-position: center;\n  background-size: contain;\n  background-repeat: no-repeat;\n  height: 250px;\n  @media (max-width: 850px) and (max-height: 900px) {\n    height: 200px;\n  }\n  @media (max-width: 815px) and (max-height: 900px) {\n    height: 180px;\n  }\n  @media (max-width: 700px) and (max-height: 700px) {\n    height: 120px;\n  }\n"])), function (props) { return props.src; });
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.Container = Container;
+exports.Image = Image;
+exports.Title = Title;
+//# sourceMappingURL=CropChoicePopup.styles.js.map

package/dist/components/DrawingTool/components/CropChoicePopup/CropChoicePopup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CropChoicePopup.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/CropChoicePopup/index.d.ts

@@ -0,0 +1,2 @@
+import CropChoicePopup from "./CropChoicePopup";
+export default CropChoicePopup;

package/dist/components/DrawingTool/components/CropChoicePopup/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var CropChoicePopup = require('./CropChoicePopup.js');
+
+
+
+module.exports = CropChoicePopup;
+//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/CropChoicePopup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/DrawingTool/components/Header/Header.js

@@ -21,8 +21,8 @@ var getButtonSizeForHeight = function (height) {
     return 'regular';
 };
 var Header = (function (props) {
-    var toolMode = DrawingToolProvider.useDrawingTool().toolMode;
-    var disableButtons = toolMode !== 'DRAW';
+    var _a = DrawingToolProvider.useDrawingTool(), imageToCrop = _a.imageToCrop, imageToPlace = _a.imageToPlace;
+    var disableButtons = (imageToCrop || imageToPlace) && true;
     var onSave = function () {
         if (!disableButtons)
             props.onSave();

package/dist/components/DrawingTool/components/ImageInputPopup/ImageInputPopup.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+export interface Props {
+    onDismiss?: () => void;
+    minImageSize?: number;
+    isMobile: boolean;
+    onImageSelected: () => void;
+}
+declare const _default: (props: Props) => JSX.Element;
+export default _default;

package/dist/components/DrawingTool/components/ImageInputPopup/ImageInputPopup.js

@@ -0,0 +1,83 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var reactDropzone = require('react-dropzone');
+var ImageInputPopup_styles = require('./ImageInputPopup.styles.js');
+var Button = require('../../../Button/Button.js');
+var Popup = require('../Popup.js');
+var DrawingToolProvider = require('../../DrawingToolProvider.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var bytesForHuman = function (bytes) {
+    var bytes$ = bytes;
+    var units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
+    var i = 0;
+    for (i; bytes$ > 1024; i += 1) {
+        bytes$ /= 1024;
+    }
+    return "" + parseFloat(bytes$.toFixed(1)) + units[i];
+};
+var ImageInputPopup = (function (props) {
+    function fileSizeValidator(file) {
+        var minSize = props.minImageSize || 1024 * 10;
+        if (file.size < minSize) {
+            return {
+                code: "image-to-small",
+                message: "This image is too small. Please pick an image over " + bytesForHuman(minSize)
+            };
+        }
+        return null;
+    }
+    var _a = reactDropzone.useDropzone({
+        accept: 'image/jpeg, image/png',
+        maxFiles: 1,
+        validator: fileSizeValidator
+    }), acceptedFiles = _a.acceptedFiles, fileRejections = _a.fileRejections, getRootProps = _a.getRootProps, getInputProps = _a.getInputProps, isDragActive = _a.isDragActive;
+    var setImageToCrop = DrawingToolProvider.useDrawingTool().setImageToCrop;
+    var _b = React.useState(true), supportDragAndDrop = _b[0], setSupportDragAndDrop = _b[1];
+    React.useEffect(function () {
+        if ('draggable' in document.createElement('span')) {
+            setSupportDragAndDrop(true);
+        }
+        else {
+            setSupportDragAndDrop(false);
+        }
+    }, []);
+    React.useEffect(function () {
+        if (acceptedFiles && acceptedFiles.length) {
+            var img_1 = new Image();
+            img_1.onload = function () {
+                setImageToCrop(img_1);
+                props.onImageSelected();
+            };
+            var reader = new FileReader();
+            reader.readAsDataURL(acceptedFiles[0]);
+            reader.onloadend = function (e) {
+                if (e.target) {
+                    img_1.src = e.target.result;
+                }
+            };
+        }
+    }, [acceptedFiles]);
+    var ErrorMessage = fileRejections && fileRejections.length
+        ? React__default['default'].createElement(ImageInputPopup_styles.ErrorMessage, null, fileRejections[0].errors[0].message)
+        : null;
+    return React__default['default'].createElement(Popup['default'], { onDismiss: props.onDismiss },
+        React__default['default'].createElement(ImageInputPopup_styles.Container, tslib.__assign({}, getRootProps()),
+            React__default['default'].createElement("input", tslib.__assign({}, getInputProps())),
+            isDragActive
+                ? React__default['default'].createElement("p", null, "Drop your image here...")
+                : (React__default['default'].createElement(ImageInputPopup_styles.Instructions, null,
+                    ErrorMessage,
+                    React__default['default'].createElement("p", null, !supportDragAndDrop ? "Upload a drawing" : "Drag and drop a drawing here"),
+                    supportDragAndDrop && React__default['default'].createElement("p", null, "Or"),
+                    React__default['default'].createElement(Button, { theme: "primary", size: props.isMobile ? "small" : "regular" }, "Select Image"),
+                    React__default['default'].createElement(ImageInputPopup_styles.Copyright, null, "Please do not upload copyrighted images.")))));
+});
+
+module.exports = ImageInputPopup;
+//# sourceMappingURL=ImageInputPopup.js.map

package/dist/components/DrawingTool/components/ImageInputPopup/ImageInputPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageInputPopup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/ImageInputPopup/ImageInputPopup.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Instructions: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Copyright: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DrawingTool/components/ImageInputPopup/ImageInputPopup.styles.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  min-height: 400px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    min-height: 300px;\n    height: 100%;\n  }\n"], ["\n  min-height: 400px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  font-size: 24px;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    min-height: 300px;\n    height: 100%;\n  }\n"])));
+var Instructions = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  text-align: center;\n"], ["\n  text-align: center;\n"])));
+var Copyright = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  margin-top: 20px;\n  text-align: center;\n"], ["\n  margin-top: 20px;\n  text-align: center;\n"])));
+var ErrorMessage = styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  padding: 15px;\n  border-radius: 10px;\n  background-color: #E30514;\n  color: white;\n"], ["\n  padding: 15px;\n  border-radius: 10px;\n  background-color: #E30514;\n  color: white;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+exports.Container = Container;
+exports.Copyright = Copyright;
+exports.ErrorMessage = ErrorMessage;
+exports.Instructions = Instructions;
+//# sourceMappingURL=ImageInputPopup.styles.js.map

package/dist/components/DrawingTool/components/ImageInputPopup/ImageInputPopup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageInputPopup.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/ImageInputPopup/index.d.ts

@@ -0,0 +1,2 @@
+import ImageInputPopup from "./ImageInputPopup";
+export default ImageInputPopup;

package/dist/components/DrawingTool/components/ImageInputPopup/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var ImageInputPopup = require('./ImageInputPopup.js');
+
+
+
+module.exports = ImageInputPopup;
+//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/ImageInputPopup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/DrawingTool/components/Loader.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export interface ILoaderProps {
+    bgColor?: string;
+    color?: string;
+    size?: number;
+    placeholder?: string;
+    minHeight?: number;
+}
+declare const Loader: {
+    (props: ILoaderProps): JSX.Element;
+    defaultProps: {
+        color: string;
+        size: number;
+        bgColor: null;
+        placeholder: null;
+        minHeight: null;
+    };
+};
+export default Loader;

package/dist/components/DrawingTool/components/Loader.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var LoaderWrap = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  color: ", ";\n  width: 100%;\n  min-height: ", "px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  z-index: 99991;\n  animation: fadein 1s;\n  @keyframes fadein {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n"], ["\n  position: relative;\n  color: ", ";\n  width: 100%;\n  min-height: ", "px;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n\n  z-index: 99991;\n  animation: fadein 1s;\n  @keyframes fadein {\n    from { opacity: 0; }\n    to { opacity: 1; }\n  }\n"])), function (props) { return props.color; }, function (props) { return props.minHeight; });
+var LoaderAnimate = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n\tbackground: inherit;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n\tbackground: inherit;\n  flex: 1;\n  width: 100%;\n  height: 100%;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
+var StyledLoader = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  & > svg {\n    display: inline-block;\n    overflow: show;\n    margin: auto;\n    text-indent: -9999em;\n    animation: spin 1.5s linear infinite;\n    fill: ", ";\n    height: ", "px;\n    width: ", "px;\n    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }\n  };\n"], ["\n  & > svg {\n    display: inline-block;\n    overflow: show;\n    margin: auto;\n    text-indent: -9999em;\n    animation: spin 1.5s linear infinite;\n    fill: ", ";\n    height: ", "px;\n    width: ", "px;\n    @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }\n  };\n"])), function (props) { return props.color; }, function (props) { return props.size; }, function (props) { return props.size; });
+var Placeholder = styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  margin-top: 10px;\n"], ["\n  margin-top: 10px;\n"])));
+var Loader = function (props) {
+    var color = props.color, size = props.size, minHeight = props.minHeight, placeholder = props.placeholder;
+    return (React__default['default'].createElement(LoaderWrap, { color: color, minHeight: minHeight || size },
+        React__default['default'].createElement(LoaderAnimate, null,
+            React__default['default'].createElement(StyledLoader, { color: color, size: size },
+                React__default['default'].createElement("svg", { version: "1.1", id: "Layer_1", xmlns: "http://www.w3.org/2000/svg", xmlnsXlink: "http://www.w3.org/1999/xlink", x: "0px", y: "0px", viewBox: "0 0 64 64", xmlSpace: "preserve" },
+                    React__default['default'].createElement("path", { d: "M32,0C14.4,0,0,14.4,0,32s14.3,32,32,32s32-14.3,32-32C64,14.4,49.6,0,32,0z M36.3,21.2L35,22.9c-0.9,1.2-2,2.5-3,3.6c-1-1.2-2-2.5-3-3.6l-1.4-1.7c-3.6-4.4-3.6-10.1-3.3-13.1c4.9-1.6,10.4-1.6,15.2,0C39.9,11.1,39.9,16.8,36.3,21.2z M17.7,11.3c0.1,4,1.2,9.4,4.9,14l1.4,1.7c1.3,1.6,2.6,3.1,3.8,4.7c-2.9,3.5-4.9,6.2-5.2,6.5c-3.9,4.8-4.8,10.3-4.9,14.4C10.9,48,6.8,40.3,6.8,32C6.9,23.7,10.9,16,17.7,11.3z M27.7,42.3L27.7,42.3c0.4-0.4,2.1-2.5,4.3-5.5c2.5,3.1,4.3,5.3,4.3,5.5c3.8,4.7,3.6,10.8,3.3,13.7c-4.9,1.6-10.3,1.6-15.2,0C24.1,53.1,23.8,47.1,27.7,42.3z M46.3,52.7c0-4.2-1-9.6-4.9-14.4v-0.1c-0.4-0.5-2.5-3.1-5.2-6.5c1.3-1.6,2.6-3.1,3.8-4.7l1.4-1.7c3.8-4.7,4.8-10,4.9-14c6.8,4.7,10.9,12.4,10.9,20.7C57.1,40.3,53.1,48,46.3,52.7z" })))),
+        placeholder && React__default['default'].createElement(Placeholder, null, placeholder)));
+};
+Loader.defaultProps = {
+    color: '#EC5E2E',
+    size: 70,
+    bgColor: null,
+    placeholder: null,
+    minHeight: null
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
+
+module.exports = Loader;
+//# sourceMappingURL=Loader.js.map

package/dist/components/DrawingTool/components/Loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Loader.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/MagicCropPopup/MagicCropPopup.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export interface Props {
+    onDismiss: () => void;
+    onManual: () => void;
+    cloudinaryUploadPreset: string;
+}
+declare const _default: (props: Props) => JSX.Element;
+export default _default;

package/dist/components/DrawingTool/components/MagicCropPopup/MagicCropPopup.js

@@ -0,0 +1,82 @@
+'use strict';
+
+var React = require('react');
+var MagicCropPopup_styles = require('./MagicCropPopup.styles.js');
+var Button = require('../../../Button/Button.js');
+var index = require('../../../../hooks/useCloudinary/index.js');
+var DrawingToolProvider = require('../../DrawingToolProvider.js');
+var Loader = require('../Loader.js');
+var Popup = require('../Popup.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+function changeExt(fileName, newExt) {
+    var pos = fileName.includes(".") ? fileName.lastIndexOf(".") : fileName.length;
+    var fileRoot = fileName.substr(0, pos);
+    return fileRoot + "." + newExt;
+}
+var MagicCropPopup = (function (props) {
+    var uploadImage = index({
+        unsignedUploadPreset: props.cloudinaryUploadPreset
+    }).uploadImage;
+    var _a = DrawingToolProvider.useDrawingTool(), imageToCrop = _a.imageToCrop, setImageToCrop = _a.setImageToCrop, setImageToPlace = _a.setImageToPlace;
+    var _b = React.useState(), croppedImage = _b[0], setCroppedImage = _b[1];
+    var checkImageIsReady = function (imageUrl, size, retries) {
+        if (size === void 0) { size = 0; }
+        if (retries === void 0) { retries = 0; }
+        var img = new Image();
+        img.onload = function () {
+            fetch(img.src).then(function (resp) { return resp.blob(); }).then(function (blob) {
+                if (retries === 0 || size === blob.size) {
+                    var delay = retries === 0 ? 10000 : 4000;
+                    setTimeout(function () { return checkImageIsReady(imageUrl, blob.size, retries + 1); }, delay);
+                }
+                else {
+                    var croppedImg_1 = new Image();
+                    croppedImg_1.crossOrigin = "Anonymous";
+                    croppedImg_1.onload = function () {
+                        setCroppedImage(croppedImg_1);
+                    };
+                    croppedImg_1.src = changeExt(imageUrl.replace('/image/upload', '/image/upload/e_trim:10'), 'png');
+                }
+            });
+        };
+        img.crossOrigin = "Anonymous";
+        img.src = changeExt(imageUrl.replace('/image/upload', '/image/upload/w_150'), 'png') + "?" + Date.now();
+    };
+    React.useEffect(function () {
+        if (imageToCrop) {
+            uploadImage(imageToCrop.src, checkImageIsReady);
+        }
+    }, []);
+    var onNext = function () {
+        if (!croppedImage)
+            return;
+        setImageToCrop(undefined);
+        setImageToPlace(croppedImage);
+        props.onDismiss();
+    };
+    return React__default['default'].createElement(Popup['default'], { onDismiss: props.onDismiss },
+        React__default['default'].createElement(MagicCropPopup_styles.Title, null, "Your Drawing"),
+        React__default['default'].createElement(MagicCropPopup_styles.Container, null,
+            React__default['default'].createElement(MagicCropPopup_styles.DrawingContainer, null, croppedImage
+                ? React__default['default'].createElement(MagicCropPopup_styles.Image, { src: croppedImage.src })
+                : React__default['default'].createElement("div", null,
+                    React__default['default'].createElement(Loader, { color: "#fff" }),
+                    React__default['default'].createElement("br", null),
+                    "Processing your image.",
+                    React__default['default'].createElement("br", null),
+                    "This can take a couple of minutes.")),
+            React__default['default'].createElement(MagicCropPopup_styles.Text, null,
+                "Select next to make final edits.",
+                React__default['default'].createElement("br", null),
+                "Not happy? Try manual cut-out instead.")),
+        React__default['default'].createElement(MagicCropPopup_styles.Actions, null,
+            React__default['default'].createElement(Button, { size: 'regular', theme: 'primary', onClick: props.onManual }, "Manual cut-out"),
+            React__default['default'].createElement(Button, { size: 'regular', theme: 'confirm', disabled: !croppedImage, onClick: onNext }, "Next")));
+});
+
+module.exports = MagicCropPopup;
+//# sourceMappingURL=MagicCropPopup.js.map

package/dist/components/DrawingTool/components/MagicCropPopup/MagicCropPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagicCropPopup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/MagicCropPopup/MagicCropPopup.styles.d.ts

@@ -0,0 +1,8 @@
+export declare const Title: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DrawingContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Text: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"div", any, {
+    src: string;
+}, never>;
+export declare const Actions: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DrawingTool/components/MagicCropPopup/MagicCropPopup.styles.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Title = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  font-size: 60px;\n  font-family: 'Rammetto One';\n  text-shadow: 0px 4px 0px #A6A6A6, 0px 8px 0px rgba(0,0,0, .5);\n  margin-bottom: 20px;\n  text-align: center;\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    font-size: 32px;\n    text-shadow: 0px 2px 0px #A6A6A6, 0px 2px 0px rgba(0,0,0, .5);\n  }\n"], ["\n  font-size: 60px;\n  font-family: 'Rammetto One';\n  text-shadow: 0px 4px 0px #A6A6A6, 0px 8px 0px rgba(0,0,0, .5);\n  margin-bottom: 20px;\n  text-align: center;\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    font-size: 32px;\n    text-shadow: 0px 2px 0px #A6A6A6, 0px 2px 0px rgba(0,0,0, .5);\n  }\n"])));
+var Container = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n  font-size: 24px;\n  @media (max-height: 650px) {\n    font-size: 20px;\n  }\n  @media (max-height: 370px) {\n    font-size: 16px;\n  }\n"], ["\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  flex-wrap: wrap;\n  margin-bottom: 20px;\n  font-size: 24px;\n  @media (max-height: 650px) {\n    font-size: 20px;\n  }\n  @media (max-height: 370px) {\n    font-size: 16px;\n  }\n"])));
+var DrawingContainer = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  position: relative;\n  padding: 20px;\n  border-radius: 50px;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 350px;\n  background-color: #701EA8;\n  color: white;\n  text-align: center;\n  margin-bottom: 20px;\n  @media (max-height: 750px) {\n    height: 300px;\n  }\n  @media (max-height: 650px) {\n    width: 50%;\n    margin-bottom: 0px;\n    padding: 10px;\n    height: 220px;\n  }\n  @media (max-width: 400px) {\n    height: 250px;\n    padding: 10px;\n  }\n  @media (max-height: 450px) {\n    height: 200px;\n  }\n  @media (max-height: 370px) {\n    height: 150px;\n  }\n"], ["\n  position: relative;\n  padding: 20px;\n  border-radius: 50px;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 350px;\n  background-color: #701EA8;\n  color: white;\n  text-align: center;\n  margin-bottom: 20px;\n  @media (max-height: 750px) {\n    height: 300px;\n  }\n  @media (max-height: 650px) {\n    width: 50%;\n    margin-bottom: 0px;\n    padding: 10px;\n    height: 220px;\n  }\n  @media (max-width: 400px) {\n    height: 250px;\n    padding: 10px;\n  }\n  @media (max-height: 450px) {\n    height: 200px;\n  }\n  @media (max-height: 370px) {\n    height: 150px;\n  }\n"])));
+var Text = styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\n  color: white;\n  width: 100%;\n  text-align: center;\n  @media (max-height: 650px) {\n    width: 50%;\n    padding-left: 40px;\n  }\n  @media (max-height: 370px) {\n    padding-left: 20px;\n  }\n"], ["\n  color: white;\n  width: 100%;\n  text-align: center;\n  @media (max-height: 650px) {\n    width: 50%;\n    padding-left: 40px;\n  }\n  @media (max-height: 370px) {\n    padding-left: 20px;\n  }\n"])));
+var Image = styled__default['default'].div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  position: relative;\n  background-image: url(", ");\n  background-position: center;\n  background-size: contain;\n  background-repeat: no-repeat;\n  width: 100%;\n  height: 100%;\n"], ["\n  position: relative;\n  background-image: url(", ");\n  background-position: center;\n  background-size: contain;\n  background-repeat: no-repeat;\n  width: 100%;\n  height: 100%;\n"])), function (props) { return props.src; });
+var Actions = styled__default['default'].div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n"], ["\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  width: 100%;\n  max-width: 600px;\n  margin-left: auto;\n  margin-right: auto;\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+exports.Actions = Actions;
+exports.Container = Container;
+exports.DrawingContainer = DrawingContainer;
+exports.Image = Image;
+exports.Text = Text;
+exports.Title = Title;
+//# sourceMappingURL=MagicCropPopup.styles.js.map

package/dist/components/DrawingTool/components/MagicCropPopup/MagicCropPopup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MagicCropPopup.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/MagicCropPopup/index.d.ts

@@ -0,0 +1,2 @@
+import MagicCropPopup from "./MagicCropPopup";
+export default MagicCropPopup;

package/dist/components/DrawingTool/components/MagicCropPopup/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var MagicCropPopup = require('./MagicCropPopup.js');
+
+
+
+module.exports = MagicCropPopup;
+//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/MagicCropPopup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/DrawingTool/components/ManualCropPopup/ManualCropPopup.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface Props {
+    onDismiss: () => void;
+    onNext: () => void;
+}
+declare const _default: (props: Props) => JSX.Element;
+export default _default;

package/dist/components/DrawingTool/components/ManualCropPopup/ManualCropPopup.js

@@ -0,0 +1,25 @@
+'use strict';
+
+var React = require('react');
+var ManualCropPopup_styles = require('./ManualCropPopup.styles.js');
+var Button = require('../../../Button/Button.js');
+var Popup = require('../Popup.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ManualCropPopup = (function (props) {
+    return React__default['default'].createElement(Popup['default'], { onDismiss: props.onDismiss },
+        React__default['default'].createElement(ManualCropPopup_styles.Container, null,
+            React__default['default'].createElement("div", null,
+                "Cut out your animal.",
+                React__default['default'].createElement("br", null),
+                "Click, hold and make sure you draw around it."),
+            React__default['default'].createElement(ManualCropPopup_styles.Image, { src: "https://cdn.nightzookeeper.com/nzk-assets/crop-tutorial.png" }),
+            React__default['default'].createElement("div", null,
+                React__default['default'].createElement(Button, { size: 'regular', theme: "primary", onClick: props.onNext }, "Ok"))));
+});
+
+module.exports = ManualCropPopup;
+//# sourceMappingURL=ManualCropPopup.js.map

package/dist/components/DrawingTool/components/ManualCropPopup/ManualCropPopup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualCropPopup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/ManualCropPopup/ManualCropPopup.styles.d.ts

@@ -0,0 +1,4 @@
+export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const Image: import("styled-components").StyledComponent<"div", any, {
+    src: string;
+}, never>;

package/dist/components/DrawingTool/components/ManualCropPopup/ManualCropPopup.styles.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  flex-wrap: wrap;\n  font-size: 24px;\n  text-align: center;\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  width: 100%;\n  height: 100%;\n  flex-wrap: wrap;\n  font-size: 24px;\n  text-align: center;\n  > :last-child {\n    width: 100%;\n    display: flex;\n    justify-content: center;\n  }\n"])));
+var Image = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  width: 100%;\n  height: 250px;\n  background-image: url(", ");\n  background-size: contain;\n  background-position: center;\n  background-repeat: no-repeat;\n  @media (max-height: 400px) {\n    height: 170px;\n  }\n"], ["\n  width: 100%;\n  height: 250px;\n  background-image: url(", ");\n  background-size: contain;\n  background-position: center;\n  background-repeat: no-repeat;\n  @media (max-height: 400px) {\n    height: 170px;\n  }\n"])), function (props) { return props.src; });
+var templateObject_1, templateObject_2;
+
+exports.Container = Container;
+exports.Image = Image;
+//# sourceMappingURL=ManualCropPopup.styles.js.map

package/dist/components/DrawingTool/components/ManualCropPopup/ManualCropPopup.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ManualCropPopup.styles.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/components/ManualCropPopup/index.d.ts

@@ -0,0 +1,2 @@
+import ManualCropPopup from './ManualCropPopup';
+export default ManualCropPopup;

package/dist/components/DrawingTool/components/ManualCropPopup/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var ManualCropPopup = require('./ManualCropPopup.js');
+
+
+
+module.exports = ManualCropPopup;
+//# sourceMappingURL=index.js.map

package/dist/components/DrawingTool/components/ManualCropPopup/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;"}

package/dist/components/DrawingTool/components/Popup.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const QuitButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+interface Props {
+    children: React.ReactNode;
+    onDismiss?: undefined | (() => void);
+}
+declare const Popup: {
+    (props: Props): JSX.Element;
+    defaultProps: {
+        onDismiss: undefined;
+    };
+};
+export default Popup;

package/dist/components/DrawingTool/components/Popup.js

@@ -0,0 +1,34 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var Button = require('../../Button/Button.js');
+var Icon = require('../../Icon/Icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Overlay = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0,0,0, .4);\n"], ["\n  position: fixed;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background-color: rgba(0,0,0, .4);\n"])));
+var Container = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: 90%;\n  max-width: 900px;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  color: white;\n  * {\n    box-sizing: border-box;\n  }\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    box-shadow: none;\n    padding: 20px;\n  }\n"], ["\n  position: relative;\n  width: 90%;\n  max-width: 900px;\n  border-radius: 50px;\n  padding: 40px;\n  background-color: #341644;\n  box-shadow: 0 -5px 0 #531D75, 0 10px 0 #1C042B, 0 14px 0 rgba(0,0,0,0.3);\n  color: white;\n  * {\n    box-sizing: border-box;\n  }\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    width: 100%;\n    height: 100%;\n    border-radius: 0px;\n    box-shadow: none;\n    padding: 20px;\n  }\n"])));
+var QuitButton = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    top: 15px;\n    right: 15px;\n  }\n"], ["\n  position: absolute;\n  top: -15px;\n  right: -15px;\n  @media (max-width: 850px) and (max-height: 850px), (max-width: 700px) {\n    top: 15px;\n    right: 15px;\n  }\n"])));
+var Popup = function (props) {
+    return React__default['default'].createElement(Overlay, null,
+        React__default['default'].createElement(Container, null,
+            props.onDismiss && React__default['default'].createElement(QuitButton, { onClick: props.onDismiss },
+                React__default['default'].createElement(Button, { size: "regular", round: true, theme: 'red' },
+                    React__default['default'].createElement(Icon, { name: 'close' }))),
+            props.children));
+};
+Popup.defaultProps = {
+    onDismiss: undefined
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+exports.QuitButton = QuitButton;
+exports['default'] = Popup;
+//# sourceMappingURL=Popup.js.map

package/dist/components/DrawingTool/components/Popup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popup.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/DrawingTool/lib/Sketch.js

@@ -124,6 +124,7 @@ var Sketch = (function () {
         }
         else if (data.imageSrc) {
             var img_1 = new Image;
+            img_1.crossOrigin = "Anonymous";
             img_1.onload = function () { doMerge(img_1); };
             img_1.src = data.imageSrc;
         }
@@ -141,15 +142,11 @@ var Sketch = (function () {
             return;
         this.model.lastActionIndex -= 1;
         this.drawingLayer.clear();
-        console.log('Last action Index before undo', this.model.lastActionIndex);
         for (var i = 0; i <= this.model.lastActionIndex; i += 1) {
-            console.log('I=', i);
             if (this.model.actions[i].type === 'STROKE' && this.model.actions[i].model) {
-                console.log('draw stroke');
                 this.drawUndoStroke(this.model.actions[i].model);
             }
             else if (this.model.actions[i].type === 'IMAGE_MERGE' && this.model.actions[i]) {
-                console.log('merge image');
                 this.mergeImage(this.model.actions[i].data, false);
             }
         }

package/dist/components/DrawingTool/lib/Sketch.js.map

@@ -1 +1 @@
-{"version":3,"file":"Sketch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"Sketch.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/hooks/useInterval.js

@@ -0,0 +1,20 @@
+'use strict';
+
+var React = require('react');
+
+function useInterval(callback, delay) {
+    var savedCallback = React.useRef(callback);
+    React.useLayoutEffect(function () {
+        savedCallback.current = callback;
+    }, [callback]);
+    React.useEffect(function () {
+        if (!delay) {
+            return;
+        }
+        var id = setInterval(function () { return savedCallback.current(); }, delay);
+        return function () { return clearInterval(id); };
+    }, [delay]);
+}
+
+module.exports = useInterval;
+//# sourceMappingURL=useInterval.js.map

package/dist/hooks/useInterval.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useInterval.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -8,6 +8,10 @@ import useAsync from './hooks/useAsync';
 import useConfettis from './hooks/useConfettis';
 import useMountState from './hooks/useMountState';
 import useCloudinary from './hooks/useCloudinary';
+import useInterval from './hooks/useInterval';
+import useEventListener from './hooks/useEventListener';
+import useElementSize from './hooks/useElementSize';
+import useDebounce from './hooks/useDebounce';
 import DrawingTool from './components/DrawingTool/DrawingTool';
 import { DrawingToolProvider, useDrawingTool } from './components/DrawingTool/DrawingToolProvider';
-export { Button, IconButton, Modal, Icon, Avatar, ModalProvider, DrawingTool, DrawingToolProvider, useDrawingTool, useModalState, useAsync, useMountState, useConfettis, useCloudinary };
+export { Button, IconButton, Modal, Icon, Avatar, ModalProvider, DrawingTool, DrawingToolProvider, useDrawingTool, useModalState, useAsync, useMountState, useConfettis, useCloudinary, useInterval, useElementSize, useEventListener, useDebounce };

package/dist/index.js

@@ -12,6 +12,10 @@ var useAsync = require('./hooks/useAsync.js');
 var index = require('./hooks/useConfettis/index.js');
 var useMountState = require('./hooks/useMountState.js');
 var index$1 = require('./hooks/useCloudinary/index.js');
+var useInterval = require('./hooks/useInterval.js');
+var useEventListener = require('./hooks/useEventListener.js');
+var useElementSize = require('./hooks/useElementSize.js');
+var useDebounce = require('./hooks/useDebounce.js');
 var DrawingTool = require('./components/DrawingTool/DrawingTool.js');
 var DrawingToolProvider = require('./components/DrawingTool/DrawingToolProvider.js');
 
@@ -28,6 +32,10 @@ exports.useAsync = useAsync;
 exports.useConfettis = index;
 exports.useMountState = useMountState;
 exports.useCloudinary = index$1;
+exports.useInterval = useInterval;
+exports.useEventListener = useEventListener;
+exports.useElementSize = useElementSize;
+exports.useDebounce = useDebounce;
 exports.DrawingTool = DrawingTool;
 exports.DrawingToolProvider = DrawingToolProvider.DrawingToolProvider;
 exports.useDrawingTool = DrawingToolProvider.useDrawingTool;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nzk-react-components",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [