nzk-react-components 0.3.7 → 0.4.0-0

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from 'react';
 export interface BaseProps {
     backgroundColor: string;
     height: number;
@@ -21,6 +21,7 @@ export interface ButtonProps extends BaseProps {
     children?: any;
     disabled?: boolean;
     onClick?: () => void;
+    ref?: ((instance: any | null) => void) | RefObject<any> | null;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+export interface DatePickerProps {
+    primary: string;
+    autoFocus?: boolean;
+    onChange?: (date: Date) => void;
+}
+declare const DatePicker: {
+    (props: DatePickerProps): JSX.Element;
+    defaultProps: {
+        primary: string;
+        autoFocus: boolean;
+        onChange: null;
+        range: boolean;
+    };
+};
+export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,60 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var ReactDatePicker = require('react-datepicker');
+var polished = require('polished');
+var Button = require('../Button/Button.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 ReactDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatePicker);
+
+var getColors = function (props) {
+    var primary = props.primary;
+    var lum = polished.getLuminance(primary);
+    var light = lum >= 0.5;
+    var secondary = light ? polished.darken(0.2, primary) : polished.lighten(0.2, primary);
+    return {
+        primary: primary,
+        secondary: secondary,
+        color: light ? '#000' : '#fff'
+    };
+};
+var Wrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  ", "\n  .react-datepicker {\n    position: relative;\n    width: 300px;\n  }\n  .react-datepicker__navigation {\n    align-items: center;\n    background: none;\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 2px;\n    padding: 0;\n    border: none;\n    z-index: 1;\n    height: 32px;\n    width: 32px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation-icon::before {\n    border-color: var(--color);\n    border-style: solid;\n    border-width: 5px 5px 0 0;\n    content: \"\";\n    display: block;\n    height: 12px;\n    position: absolute;\n    top: 10px;\n    width: 10px;\n  }\n  .react-datepicker__navigation-icon--previous::before {\n    transform: rotate(225deg);\n    right: -7px;\n  }\n\n  .react-datepicker__navigation-icon--next::before {\n    transform: rotate(45deg);\n    left: -7px;\n  }\n  .react-datepicker__navigation--next {\n    right: 2px;\n  }\n  .react-datepicker__month-container {\n    text-align: center;\n    border-radius: 9px;\n    overflow: hidden;\n    box-shadow: 0 3px 9px 1px rgba(0,0,0,0.3);\n    margin-top: 8px;\n  }\n  .react-datepicker__current-month {\n    padding: 5px 0;\n    font-family: 'Rammetto One';\n    color: var(--color);\n    background: var(--primary);\n  }\n  .react-datepicker__day-names {\n    width: 100%;\n    display: flex;\n    font-weight: bold;\n    color: var(--primary);\n    > * { flex: 1; padding: 10px 0; }\n  }\n  .react-datepicker__day {\n    position: relative;\n    background-color: var(--primary);\n    color: var(--color);\n    transition: background-color 0.2s ease-in-out;\n    cursor: pointer;\n    :hover {\n      background-color: var(--secondary);\n      transition: background-color 0.2s ease-in-out;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: var(--secondary);\n    transition: background-color 0.2s ease-in-out;\n  }\n  .react-datepicker__day--outside-month {\n    background-color: #ffffffff;\n    color: var(--primary);\n  }\n  .react-datepicker__week {\n    width: 100%;\n    display: flex;\n    > * { flex: 1; padding: 10px; }\n  }\n"], ["\n  ", "\n  .react-datepicker {\n    position: relative;\n    width: 300px;\n  }\n  .react-datepicker__navigation {\n    align-items: center;\n    background: none;\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 2px;\n    padding: 0;\n    border: none;\n    z-index: 1;\n    height: 32px;\n    width: 32px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation-icon::before {\n    border-color: var(--color);\n    border-style: solid;\n    border-width: 5px 5px 0 0;\n    content: \"\";\n    display: block;\n    height: 12px;\n    position: absolute;\n    top: 10px;\n    width: 10px;\n  }\n  .react-datepicker__navigation-icon--previous::before {\n    transform: rotate(225deg);\n    right: -7px;\n  }\n\n  .react-datepicker__navigation-icon--next::before {\n    transform: rotate(45deg);\n    left: -7px;\n  }\n  .react-datepicker__navigation--next {\n    right: 2px;\n  }\n  .react-datepicker__month-container {\n    text-align: center;\n    border-radius: 9px;\n    overflow: hidden;\n    box-shadow: 0 3px 9px 1px rgba(0,0,0,0.3);\n    margin-top: 8px;\n  }\n  .react-datepicker__current-month {\n    padding: 5px 0;\n    font-family: 'Rammetto One';\n    color: var(--color);\n    background: var(--primary);\n  }\n  .react-datepicker__day-names {\n    width: 100%;\n    display: flex;\n    font-weight: bold;\n    color: var(--primary);\n    > * { flex: 1; padding: 10px 0; }\n  }\n  .react-datepicker__day {\n    position: relative;\n    background-color: var(--primary);\n    color: var(--color);\n    transition: background-color 0.2s ease-in-out;\n    cursor: pointer;\n    :hover {\n      background-color: var(--secondary);\n      transition: background-color 0.2s ease-in-out;\n    }\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: var(--secondary);\n    transition: background-color 0.2s ease-in-out;\n  }\n  .react-datepicker__day--outside-month {\n    background-color: #ffffffff;\n    color: var(--primary);\n  }\n  .react-datepicker__week {\n    width: 100%;\n    display: flex;\n    > * { flex: 1; padding: 10px; }\n  }\n"])), function (props) {
+    var colors = getColors(props);
+    return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n      --primary: ", ";\n      --secondary: ", ";\n      --color: ", ";\n    "], ["\n      --primary: ", ";\n      --secondary: ", ";\n      --color: ", ";\n    "])), colors.primary, colors.secondary, colors.color);
+});
+var DatePicker = function (props) {
+    var datePickerRef = React.useRef(null);
+    var _a = React.useState(new Date()), startDate = _a[0], setStartDate = _a[1];
+    React.useEffect(function () {
+        if (props.autoFocus && datePickerRef.current && datePickerRef.current.input) {
+            datePickerRef.current.input.focus();
+        }
+    }, []);
+    var ButtonInput = React.forwardRef(function (_a, ref) {
+        var value = _a.value, onClick = _a.onClick;
+        return React__default['default'].createElement(Button, { onClick: onClick, ref: ref, theme: 'primary', size: 'small' }, value);
+    });
+    React.useEffect(function () {
+        if (props.onChange) {
+            props.onChange(startDate);
+        }
+    }, [startDate]);
+    return React__default['default'].createElement(Wrapper, { primary: props.primary },
+        React__default['default'].createElement(ReactDatePicker__default['default'], { ref: datePickerRef, dateFormat: "d MMMM yyyy", withPortal: true, selected: startDate, onChange: function (date) { return setStartDate(date); }, customInput: React__default['default'].createElement(ButtonInput, null) }));
+};
+DatePicker.defaultProps = {
+    primary: '#1EA7FD',
+    autoFocus: false,
+    onChange: null,
+    range: false
+};
+var templateObject_1, templateObject_2;
+
+module.exports = DatePicker;
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker/DatePicker.js.map

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

package/dist/components/DatePicker/DatePicker.stories.d.ts

@@ -0,0 +1,6 @@
+import { Story } from "@storybook/react";
+import { Meta } from "@storybook/react/types-6-0";
+import { DatePickerProps } from "./DatePicker";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<DatePickerProps>;

package/dist/components/DatePicker/index.d.ts

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

package/dist/components/DatePicker/index.js

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

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

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

package/dist/components/DrawingTool/DrawingTool.js

@@ -15,14 +15,10 @@ 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 ImageInputPopup = require('./components/ImageInputPopup/ImageInputPopup.js');
+var FileInput = require('./components/FileInput/FileInput.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 }; }
 
@@ -51,14 +47,13 @@ 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), 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;
+    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;
     React.useEffect(function () {
         if (typeof props.disableAutoCache === 'boolean') {
             setAutoCache(!props.disableAutoCache);
@@ -101,33 +96,27 @@ var Drawing = function (props) {
         }
     }, [containerWidth, containerHeight]);
     React.useEffect(function () {
-        if (!showManualCropTool && !resizing && sketchInnerRef.current) {
+        if (!imageToCut && !resizing && sketchInnerRef.current) {
             initSketch(sketchInnerRef.current);
         }
-    }, [resizing, sketchInnerRef, imageToCrop, showManualCropTool]);
+    }, [resizing, sketchInnerRef, imageToCut]);
     React.useEffect(function () {
-        if (!resizing && sketchCutInnerRef.current && imageToCrop && showManualCropTool) {
-            initSketchCut(sketchCutInnerRef.current, imageToCrop, function () {
-                setShowSaveCropAction(true);
+        if (!resizing && sketchCutInnerRef.current && imageToCut) {
+            initSketchCut(sketchCutInnerRef.current, imageToCut, function () {
+                setShowSaveCutAction(true);
             });
         }
-    }, [resizing, sketchCutInnerRef, imageToCrop, showManualCropTool]);
+    }, [resizing, sketchCutInnerRef, imageToCut]);
     var onClickRestart = function () {
-        setShowRestartConfirmPopup(true);
+        setShowRestartConfirmModal(true);
     };
     var onClickCamera = function () {
-        setShowImageInputPopup(true);
+        setShowFileInput(true);
     };
-    var getImageToPlaceSize = function (img) {
-        var ratio = 0.8;
-        if (img.width <= containerWidth * ratio && img.height <= containerHeight * ratio) {
-            return { width: img.width, height: img.height };
-        }
-        var scale = Math.min(1, Math.min(containerWidth / img.width, containerHeight / img.height)) * ratio;
-        return {
-            width: img.width * scale,
-            height: img.height * scale
-        };
+    var onImageUploaded = function (image) {
+        setShowFileInput(false);
+        setImageToCut(image);
+        setToolMode("CUT");
     };
     var strokeBrushColour = polished.getLuminance(currentColour.hex) > 0.05 ? polished.darken(0.15, currentColour.hex) : polished.lighten(0.1, currentColour.hex);
     var deselectedButtonColourProps = {
@@ -155,25 +144,25 @@ var Drawing = function (props) {
             left: '0px'
         };
     }
-    var disableToolbars = (showImageInputPopup || showRestartConfirmPopup || imageToCrop || imageToPlace);
+    var disableToolbars = (showFileInput || showRestartConfirmModal || imageToCut || imageToPlace);
     var inSketchActions = [];
-    if (showSaveCropAction) {
+    if (showSaveCutAction) {
         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 () {
-                    setShowSaveCropAction(false);
-                    setShowManualCropPopup(true);
+                    setShowSaveCutAction(false);
+                    setShowCutTutorial(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 () {
-                    setShowSaveCropAction(false);
-                    setShowManualCropTool(false);
-                    setImageToCrop(undefined);
+                    setShowSaveCutAction(false);
+                    setImageToCut(undefined);
                     var newImage = new Image;
                     newImage.onload = function () {
                         setImageToPlace(newImage);
+                        setToolMode('PLACE');
                     };
                     newImage.src = exportSketchCut();
                 } }, "Save")
@@ -184,6 +173,7 @@ 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',
@@ -199,6 +189,7 @@ 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")
@@ -239,64 +230,36 @@ 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: 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 }),
+                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 }),
                 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(DrawingTool_styles.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 }))),
-                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)); })))),
+                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")))),
             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 }))),
-        showRestartConfirmPopup && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
+        showRestartConfirmModal && 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 () {
-                            setShowRestartConfirmPopup(false);
+                            setShowRestartConfirmModal(false);
                         } }, "No"),
                     React__default['default'].createElement(Button, { key: 'confirm', size: isMobile ? "small" : "regular", theme: "confirm", onClick: function () {
                             restart();
-                            setShowRestartConfirmPopup(false);
+                            setShowRestartConfirmModal(false);
                         } }, "Yes"),
                 ] })),
-        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);
-            } }));
+        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 })));
 };
 Drawing.defaultProps = {
     prompt: 'Draw your Animal',
@@ -307,8 +270,7 @@ Drawing.defaultProps = {
     disableCameraUpload: false,
     disableAutoCache: false,
     cacheKey: 'nzk-sketch-cache',
-    openUploadPopupOnStart: false,
-    enableMagicCrop: false
+    openUploadPopupOnStart: 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

@@ -37,11 +37,5 @@ export declare const InSketchActions: import("styled-components").StyledComponen
 export declare const InSketchAction: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ModalOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ImageToPlaceContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageToPlace: import("styled-components").StyledComponent<"img", any, {
-    size: {
-        width: number;
-        height: number;
-    };
-}, never>;
+export declare const ImageToPlace: import("styled-components").StyledComponent<"img", any, {}, 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,21 +32,20 @@ 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: 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 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 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; });
-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;
+var ImageToPlace = styled__default['default'].img(templateObject_14 || (templateObject_14 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: 80%;\n  max-width: 400px;\n  @media (max-width: 768px) {\n    max-width: 200px;\n  }\n  @media (max-height: 600px) {\n    width: auto;\n    height: 80%;\n    max-width: none;\n    max-height: 200px;\n  }\n}\n"], ["\n  position: absolute;\n  width: 80%;\n  max-width: 400px;\n  @media (max-width: 768px) {\n    max-width: 200px;\n  }\n  @media (max-height: 600px) {\n    width: auto;\n    height: 80%;\n    max-width: none;\n    max-height: 200px;\n  }\n}\n"])));
+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;
 
 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,6 +14,7 @@ export interface Colour {
     rgb: number[];
     hex: string;
 }
+declare type ToolMode = 'LOADING' | 'DRAW' | 'CUT' | 'PLACE';
 export interface Props {
     cache?: string;
 }
@@ -21,7 +22,6 @@ 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,9 +49,8 @@ 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,13 +34,11 @@ 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(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 _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 setSketchRef = React.useCallback(function (node) {
         sketchRef.current = node;
         if (sketchRef.current) {
@@ -79,7 +77,6 @@ var DrawingToolState = function (props) {
     };
     var initSketch = function (containerEl) {
         var data;
-        setSketchLoading(true);
         if (sketchRef.current) {
             data = sketchRef.current.serialize();
         }
@@ -94,7 +91,7 @@ var DrawingToolState = function (props) {
             sketchData: data,
             onChange: onSketchChange,
             onReady: function () {
-                setSketchLoading(false);
+                setToolMode('DRAW');
             }
         }));
     };
@@ -150,7 +147,6 @@ var DrawingToolState = function (props) {
     return {
         initSketch: initSketch,
         initSketchCut: initSketchCut,
-        sketchLoading: sketchLoading,
         exportSketch: exportSketch,
         exportSketchCut: exportSketchCut,
         currentColour: currentColour,
@@ -170,11 +166,9 @@ var DrawingToolState = function (props) {
         clearCache: clearCache,
         resetCut: resetCut,
         mergeImage: mergeImage,
-        exportCache: exportCache,
-        imageToCrop: imageToCrop,
-        setImageToCrop: setImageToCrop,
-        imageToPlace: imageToPlace,
-        setImageToPlace: setImageToPlace
+        setToolMode: setToolMode,
+        toolMode: toolMode,
+        exportCache: exportCache
     };
 };
 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/Header/Header.js

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

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

@@ -124,7 +124,6 @@ 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;
         }
@@ -142,11 +141,15 @@ 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);
             }
         }
@@ -260,7 +263,7 @@ var Sketch = (function () {
                 callback();
             return;
         }
-        var done = after__default['default'](Math.min(this.model.lastActionIndex + 1, this.model.actions.length), function () {
+        var done = after__default['default'](Math.min(this.model.lastActionIndex, this.model.actions.length), function () {
             if (callback)
                 callback();
         });

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/components/Input/Input.d.ts

@@ -0,0 +1,7 @@
+export interface InputProps {
+    borderRadius?: string;
+    borderColor?: string;
+    borderWidth?: string;
+}
+declare const Input: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,19 @@
+'use strict';
+
+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 Input = styled__default['default'].input(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  outline: none;\n  padding: 6px 10px;\n  font-size: 17px;\n  font-family: 'Libre Baskerville';\n  ", "\n"], ["\n  outline: none;\n  padding: 6px 10px;\n  font-size: 17px;\n  font-family: 'Libre Baskerville';\n  ", "\n"])), function (props) { return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n    border-radius: ", ";\n    border: ", " solid ", ";\n  "], ["\n    border-radius: ", ";\n    border: ", " solid ", ";\n  "])), props.borderRadius, props.borderWidth, props.borderColor); });
+Input.defaultProps = {
+    borderRadius: '6px',
+    borderColor: '#000',
+    borderWidth: '2px'
+};
+var templateObject_1, templateObject_2;
+
+module.exports = Input;
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

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