nzk-react-components 0.3.6 → 0.4.1

package/dist/components/DrawingTool/DrawingToolProvider.js

@@ -1,188 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var unstatedNext = require('unstated-next');
-var Sketch = require('./lib/Sketch.js');
-var SketchCut = require('./lib/SketchCut.js');
-
-var BrushSize = {
-    small: 7,
-    medium: 21,
-    large: 42
-};
-var Colours = [
-    { rgb: [53, 162, 218], hex: '#35a2da' },
-    { rgb: [0, 156, 149], hex: '#009c95' },
-    { rgb: [0, 137, 54], hex: '#008936' },
-    { rgb: [147, 192, 31], hex: '#93c01f' },
-    { rgb: [201, 216, 0], hex: '#c9d800' },
-    { rgb: [255, 236, 0], hex: '#ffec00' },
-    { rgb: [255, 145, 0], hex: '#ff9100' },
-    { rgb: [255, 0, 25], hex: '#ff0019' },
-    { rgb: [255, 0, 164], hex: '#ff00a4' },
-    { rgb: [186, 13, 108], hex: '#ba0d6c' },
-    { rgb: [135, 0, 198], hex: '#8700c6' },
-    { rgb: [104, 59, 17], hex: '#683b11' },
-    { rgb: [29, 29, 27], hex: '#1d1d1b' },
-    { rgb: [134, 134, 134], hex: '#868686' },
-    { rgb: [255, 255, 255], hex: '#FFFFFF' },
-];
-var DrawingToolState = function (props) {
-    var sketchRef = React.useRef();
-    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 setSketchRef = React.useCallback(function (node) {
-        sketchRef.current = node;
-        if (sketchRef.current) {
-            sketchRef.current.setBrush({
-                size: brushSize,
-                colour: currentColour.rgb,
-                opacity: brushOpacity,
-                fill: brushType === 'fill',
-                eraser: brushType === 'eraser'
-            });
-        }
-    }, []);
-    var setSketchCutRef = React.useCallback(function (node) {
-        sketchCutRef.current = node;
-    }, []);
-    React.useEffect(function () {
-        if (sketchRef && sketchRef.current)
-            sketchRef.current.setBrush({
-                size: brushSize,
-                colour: currentColour.rgb,
-                opacity: brushType === 'eraser' ? 1 : brushOpacity,
-                fill: brushType === 'fill',
-                eraser: brushType === 'eraser'
-            });
-    }, [sketchRef.current, brushSize, currentColour, brushOpacity, brushType]);
-    var onSketchChange = function () {
-        if (!autoCache || !sketchRef.current)
-            return;
-        window.localStorage.setItem(cacheKey, JSON.stringify(sketchRef.current.serialize()));
-    };
-    var clearCache = function () {
-        window.localStorage.removeItem(cacheKey);
-    };
-    var getCache = function () {
-        return (props && props.cache) || window.localStorage.getItem(cacheKey);
-    };
-    var initSketch = function (containerEl) {
-        var data;
-        setSketchLoading(true);
-        if (sketchRef.current) {
-            data = sketchRef.current.serialize();
-        }
-        else {
-            var cachedRawData = getCache();
-            if (cachedRawData) {
-                data = JSON.parse(cachedRawData);
-            }
-        }
-        setSketchRef(new Sketch({
-            containerEl: containerEl,
-            sketchData: data,
-            onChange: onSketchChange,
-            onReady: function () {
-                setSketchLoading(false);
-            }
-        }));
-    };
-    var initSketchCut = function (containerEl, imageToCut, onImageCut) {
-        setSketchCutRef(new SketchCut({
-            containerEl: containerEl,
-            imageToCut: imageToCut,
-            onImageCut: onImageCut
-        }));
-    };
-    var resetCut = function () {
-        if (sketchCutRef && sketchCutRef.current) {
-            sketchCutRef.current.resetCut();
-        }
-    };
-    var exportSketch = function (options) {
-        if (options === void 0) { options = { crop: true }; }
-        if (sketchRef.current) {
-            return sketchRef.current.export(options);
-        }
-        return '';
-    };
-    var exportSketchCut = function () {
-        if (sketchCutRef.current) {
-            return sketchCutRef.current.export({ crop: true });
-        }
-        return '';
-    };
-    var exportCache = function () {
-        if (sketchRef.current) {
-            return JSON.stringify(sketchRef.current.serialize());
-        }
-        return null;
-    };
-    var mergeImage = function (data) {
-        if (sketchRef.current) {
-            return sketchRef.current.mergeImage(data);
-        }
-        return null;
-    };
-    var undo = function () {
-        if (sketchRef.current)
-            sketchRef.current.undo();
-    };
-    var redo = function () {
-        if (sketchRef.current)
-            sketchRef.current.redo();
-    };
-    var restart = function () {
-        if (sketchRef.current)
-            sketchRef.current.restart();
-    };
-    return {
-        initSketch: initSketch,
-        initSketchCut: initSketchCut,
-        sketchLoading: sketchLoading,
-        exportSketch: exportSketch,
-        exportSketchCut: exportSketchCut,
-        currentColour: currentColour,
-        setCurrentColour: setCurrentColour,
-        brushOpacity: brushOpacity,
-        setBruchOpacity: setBruchOpacity,
-        brushSize: brushSize,
-        setBrushSize: setBrushSize,
-        brushType: brushType,
-        setBrushType: setBrushType,
-        undo: undo,
-        redo: redo,
-        restart: restart,
-        onSketchChange: onSketchChange,
-        setCacheKey: setCacheKey,
-        setAutoCache: setAutoCache,
-        clearCache: clearCache,
-        resetCut: resetCut,
-        mergeImage: mergeImage,
-        exportCache: exportCache,
-        imageToCrop: imageToCrop,
-        setImageToCrop: setImageToCrop,
-        imageToPlace: imageToPlace,
-        setImageToPlace: setImageToPlace
-    };
-};
-var DrawingToolProviderContainer = unstatedNext.createContainer(DrawingToolState);
-var DrawingToolProvider = DrawingToolProviderContainer.Provider;
-var useDrawingTool = DrawingToolProviderContainer.useContainer;
-
-exports.BrushSize = BrushSize;
-exports.Colours = Colours;
-exports.DrawingToolProvider = DrawingToolProvider;
-exports.useDrawingTool = useDrawingTool;
-//# sourceMappingURL=DrawingToolProvider.js.map

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

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

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

@@ -1,21 +0,0 @@
-/// <reference types="react" />
-import { Orientation } from '../../DrawingTool';
-import { Colour } from '../../DrawingToolProvider';
-export interface Props {
-    size: number;
-    orientation: Orientation;
-    currentColour: Colour;
-}
-declare const ColourToolbar: {
-    (props: Props): JSX.Element;
-    defaultProps: {
-        mode: string;
-        size: number;
-        onSelectColour: () => void;
-        currentColor: {
-            rgb: number[];
-            hex: string;
-        };
-    };
-};
-export default ColourToolbar;

package/dist/components/DrawingTool/components/ColourToolbar/ColourToolbar.js

@@ -1,89 +0,0 @@
-'use strict';
-
-var React = require('react');
-var ColourToolbar_styles = require('./ColourToolbar.styles.js');
-var Button = require('../../../Button/Button.js');
-var Icon = require('../../../Icon/Icon.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 ColourToolbar = function (props) {
-    var scrollRef = React.useRef(null);
-    var _a = React.useState(true), disableScrollUp = _a[0], setDisableScrollUp = _a[1];
-    var _b = React.useState(false), disableScrollDown = _b[0], setDisableScrollDown = _b[1];
-    var _c = DrawingToolProvider.useDrawingTool(), setCurrentColour = _c.setCurrentColour, brushType = _c.brushType, setBrushType = _c.setBrushType;
-    var onSetColour = function (colour) {
-        if (brushType === 'eraser') {
-            setBrushType('line');
-        }
-        setCurrentColour(colour);
-    };
-    var onScroll = function (e) {
-        if (props.orientation === 'LANDSCAPE') {
-            if (e.target.scrollTop === 0) {
-                setDisableScrollUp(true);
-            }
-            else if (disableScrollUp) {
-                setDisableScrollUp(false);
-            }
-            if ((e.target.scrollHeight - e.target.scrollTop) <= e.target.clientHeight + 3) {
-                setDisableScrollDown(true);
-            }
-            else {
-                setDisableScrollDown(false);
-            }
-        }
-        else {
-            if (e.target.scrollLeft === 0) {
-                setDisableScrollUp(true);
-            }
-            else if (disableScrollUp) {
-                setDisableScrollUp(false);
-            }
-            if ((e.target.scrollWidth - e.target.scrollLeft) <= e.target.clientWidth + 3) {
-                setDisableScrollDown(true);
-            }
-            else {
-                setDisableScrollDown(false);
-            }
-        }
-    };
-    var onClickUp = function () {
-        if (!disableScrollUp && scrollRef && scrollRef.current) {
-            if (props.orientation === 'LANDSCAPE') {
-                scrollRef.current.scrollTop = Math.max(0, scrollRef.current.scrollTop - props.size * 3);
-            }
-            else {
-                scrollRef.current.scrollLeft = Math.max(0, scrollRef.current.scrollLeft - props.size * 3);
-            }
-        }
-    };
-    var onClickDown = function () {
-        if (!disableScrollDown && scrollRef && scrollRef.current) {
-            if (props.orientation === 'LANDSCAPE') {
-                scrollRef.current.scrollTop = Math.min(scrollRef.current.scrollHeight, scrollRef.current.scrollTop + props.size * 3);
-            }
-            else {
-                scrollRef.current.scrollLeft = Math.min(scrollRef.current.scrollWidth, scrollRef.current.scrollLeft + props.size * 3);
-            }
-        }
-    };
-    return React__default['default'].createElement(ColourToolbar_styles.Container, { orientation: props.orientation, size: props.size },
-        React__default['default'].createElement(Button, { disabled: disableScrollUp, round: true, height: props.size, theme: "white", onClick: onClickUp },
-            React__default['default'].createElement(Icon, { name: props.orientation === 'LANDSCAPE' ? 'drawing-tool-arrow-up' : 'drawing-tool-arrow-left', fill: disableScrollUp ? '#c2bebe' : props.currentColour.hex })),
-        React__default['default'].createElement(ColourToolbar_styles.ScrollContainer, { ref: scrollRef, onScroll: onScroll, orientation: props.orientation, size: props.size }, DrawingToolProvider.Colours.map(function (c) { return (React__default['default'].createElement(Button, { key: c.hex, height: Math.floor(props.size * .9), round: true, dropShadowColor: "transparent", backgroundColor: c.hex, strokeColor: c.hex, onClick: function () { return onSetColour(c); } })); })),
-        React__default['default'].createElement(Button, { disabled: disableScrollDown, round: true, height: props.size, theme: "white", onClick: onClickDown },
-            React__default['default'].createElement(Icon, { name: props.orientation === 'LANDSCAPE' ? 'drawing-tool-arrow-down' : 'drawing-tool-arrow-right', fill: disableScrollDown ? '#c2bebe' : props.currentColour.hex })));
-};
-ColourToolbar.defaultProps = {
-    mode: 'landcape',
-    size: 80,
-    onSelectColour: function () { },
-    currentColor: DrawingToolProvider.Colours[0]
-};
-
-module.exports = ColourToolbar;
-//# sourceMappingURL=ColourToolbar.js.map

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

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

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

@@ -1,9 +0,0 @@
-import { Orientation } from '../../DrawingTool';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    size: number;
-}, never>;
-export declare const ScrollContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    size: number;
-}, never>;

package/dist/components/DrawingTool/components/ColourToolbar/ColourToolbar.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  align-content: flex-start;\n  flex-wrap: ", ";\n  height: ", ";\n  width: ", ";\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  align-content: flex-start;\n  flex-wrap: ", ";\n  height: ", ";\n  width: ", ";\n"])), function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'PORTRAIT' ? 'auto' : '80%'; }, function (props) { return props.orientation === 'PORTRAIT' ? '80%' : 'auto'; });
-var ScrollContainer = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  height: ", ";\n  background-color: rgba(255, 255, 255, .5);\n  border-radius: ", "px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  padding-left: ", ";\n  padding-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";;\n  align-items: center;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  > div {\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  height: ", ";\n  background-color: rgba(255, 255, 255, .5);\n  border-radius: ", "px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n  padding-left: ", ";\n  padding-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n  margin-right: ", ";\n  position: relative;\n  flex: 1 1 auto;\n  display: flex;\n  flex-wrap: ", ";\n  justify-content: ", ";;\n  align-items: center;\n  -ms-overflow-style: none;\n  scrollbar-width: none;\n  overflow: scroll;\n  scroll-behavior: smooth;\n  &::-webkit-scrollbar {\n    display: none;\n  }\n  > div {\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"])), function (props) { return "calc(100% - " + 3.5 * props.size + "px)"; }, function (props) { return props.size; }, function (props) { return props.orientation === 'PORTRAIT' ? '8px' : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? '8px' : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? '0px' : '7px'; }, function (props) { return props.orientation === 'PORTRAIT' ? '7px' : '0px'; }, function (props) { return props.orientation === 'PORTRAIT' ? '7px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'center' : 'flex-start'; }, function (props) { return props.orientation === 'LANDSCAPE' ? Math.floor(props.size / 5) + "px" : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? Math.floor(props.size / 5) + "px" : 0; });
-var templateObject_1, templateObject_2;
-
-exports.Container = Container;
-exports.ScrollContainer = ScrollContainer;
-//# sourceMappingURL=ColourToolbar.styles.js.map

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

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

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

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

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

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

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

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

package/dist/components/DrawingTool/components/FileInput/FileInput.js

@@ -1,88 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var reactDropzone = require('react-dropzone');
-var FileInput_styles = require('./FileInput.styles.js');
-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 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 FileInput = (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 _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 () {
-                if (props.onImageUploaded) {
-                    props.onImageUploaded(img_1);
-                }
-            };
-            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(FileInput_styles.ErrorMessage, null, fileRejections[0].errors[0].message)
-        : null;
-    var onDismiss = function (ev) {
-        ev.stopPropagation();
-        if (props.dismiss)
-            props.dismiss();
-    };
-    return React__default['default'].createElement(FileInput_styles.Container, tslib.__assign({}, getRootProps()),
-        React__default['default'].createElement(FileInput_styles.QuitButton, { onClick: onDismiss },
-            React__default['default'].createElement(Button, { round: true, theme: 'red', size: props.isMobile ? "small" : "regular" },
-                React__default['default'].createElement(Icon, { name: 'close' }))),
-        React__default['default'].createElement("input", tslib.__assign({}, getInputProps())),
-        isDragActive
-            ? React__default['default'].createElement("p", null, "Drop your image here...")
-            : (React__default['default'].createElement(FileInput_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"))));
-});
-
-module.exports = FileInput;
-//# sourceMappingURL=FileInput.js.map

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

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

package/dist/components/DrawingTool/components/FileInput/FileInput.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 QuitButton: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ErrorMessage: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/DrawingTool/components/FileInput/FileInput.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  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  max-width: 900px;\n  max-height: 675px;\n  border-radius: 50px;\n  justify-content: center;\n  align-items: center;\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: 36px;\n  @media (max-width: 768px) {\n    font-size: 18px;\n    max-width: 95%;\n    max-height: 95%;\n  }\n\n  @media (max-height: 500px) {\n    font-size: 18px;\n    max-width: 90%;\n    max-height: 90%;\n  }\n"], ["\n  position: relative;\n  display: flex;\n  width: 100%;\n  height: 100%;\n  max-width: 900px;\n  max-height: 675px;\n  border-radius: 50px;\n  justify-content: center;\n  align-items: center;\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: 36px;\n  @media (max-width: 768px) {\n    font-size: 18px;\n    max-width: 95%;\n    max-height: 95%;\n  }\n\n  @media (max-height: 500px) {\n    font-size: 18px;\n    max-width: 90%;\n    max-height: 90%;\n  }\n"])));
-var Instructions = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  text-align: center;\n  @media (max-width: 768px) {\n    font-size: 20px;\n  }\n"], ["\n  text-align: center;\n  @media (max-width: 768px) {\n    font-size: 20px;\n  }\n"])));
-var QuitButton = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(15px, -15px);\n  @media (max-width: 768px) {\n    transform: translate(10px, -10px);\n  }\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(15px, -15px);\n  @media (max-width: 768px) {\n    transform: translate(10px, -10px);\n  }\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  font-size: 20px;\n"], ["\n  padding: 15px;\n  border-radius: 10px;\n  background-color: #E30514;\n  color: white;\n  font-size: 20px;\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4;
-
-exports.Container = Container;
-exports.ErrorMessage = ErrorMessage;
-exports.Instructions = Instructions;
-exports.QuitButton = QuitButton;
-//# sourceMappingURL=FileInput.styles.js.map

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

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

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

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

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

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

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

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

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

@@ -1,9 +0,0 @@
-/// <reference types="react" />
-interface Props {
-    onBack: () => void;
-    onSave: () => void;
-    prompt: string;
-    height: number;
-}
-declare const _default: (props: Props) => JSX.Element;
-export default _default;