nzk-react-components 0.3.5-2 → 0.4.0-0

package/dist/index.js

@@ -4,23 +4,29 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Avatar = require('./components/Avatar/Avatar.js');
 var Button = require('./components/Button/Button.js');
+var DatePicker = require('./components/DatePicker/DatePicker.js');
 var Icon = require('./components/Icon/Icon.js');
 var IconButton = require('./components/IconButton/IconButton.js');
+var Input = require('./components/Input/Input.js');
 var Modal = require('./components/Modal/Modal.js');
 var ModalState = require('./components/Modal/ModalState.js');
 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 DrawingTool = require('./components/DrawingTool/DrawingTool.js');
-var DrawingToolProvider = require('./components/DrawingTool/DrawingToolProvider.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');
 
 
 
 exports.Avatar = Avatar;
 exports.Button = Button;
+exports.DatePicker = DatePicker;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.Input = Input;
 exports.Modal = Modal;
 exports.ModalProvider = ModalState.ModalProvider;
 exports.useModalState = ModalState.useModalState;
@@ -28,7 +34,8 @@ exports.useAsync = useAsync;
 exports.useConfettis = index;
 exports.useMountState = useMountState;
 exports.useCloudinary = index$1;
-exports.DrawingTool = DrawingTool;
-exports.DrawingToolProvider = DrawingToolProvider.DrawingToolProvider;
-exports.useDrawingTool = DrawingToolProvider.useDrawingTool;
+exports.useInterval = useInterval;
+exports.useEventListener = useEventListener;
+exports.useElementSize = useElementSize;
+exports.useDebounce = useDebounce;
 //# sourceMappingURL=index.js.map

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.5-2",
+  "version": "0.4.0-0",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -59,12 +59,9 @@
     "add": "^2.0.6",
     "canvas-confetti": "^1.4.0",
     "lodash.after": "^4.0.4",
-    "moveable-helper": "^0.4.0",
     "polished": "^4.1.3",
-    "react-dropzone": "^11.4.2",
+    "react-datepicker": "^4.5.0",
     "react-moveable": "^0.29.0",
-    "react-tooltip": "^4.2.21",
-    "resize-observer-polyfill": "^1.5.1",
     "shortid": "^2.2.16",
     "styled-components": "^5.3.0",
     "unstated-next": "^1.1.0"

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

@@ -1,8 +0,0 @@
-/// <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

@@ -1,27 +0,0 @@
-'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

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

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

@@ -1,5 +0,0 @@
-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

@@ -1,20 +0,0 @@
-'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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-/// <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

@@ -1,83 +0,0 @@
-'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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,22 +0,0 @@
-'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

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

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

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

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

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

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

@@ -1,19 +0,0 @@
-/// <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

@@ -1,35 +0,0 @@
-'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

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

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

@@ -1,8 +0,0 @@
-/// <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

@@ -1,82 +0,0 @@
-'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

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

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

@@ -1,8 +0,0 @@
-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

@@ -1,26 +0,0 @@
-'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

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

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-/// <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

@@ -1,25 +0,0 @@
-'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

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

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

@@ -1,4 +0,0 @@
-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

@@ -1,18 +0,0 @@
-'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

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

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

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

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

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