nzk-react-components 0.4.3 → 0.4.6-0

package/dist/components/DrawingTool/DrawingToolProvider.js

@@ -0,0 +1,182 @@
+'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(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) {
+            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;
+        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 () {
+                setToolMode('DRAW');
+            }
+        }));
+    };
+    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,
+        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,
+        setToolMode: setToolMode,
+        toolMode: toolMode,
+        exportCache: exportCache
+    };
+};
+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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var styled = require('styled-components');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,38 @@
+'use strict';
+
+var tslib = require('tslib');
+var React = require('react');
+var styled = require('styled-components');
+var DrawingToolProvider = require('../../DrawingToolProvider.js');
+var Icon = require('../../../Icon/Icon.js');
+var IconButton = require('../../../IconButton/IconButton.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 Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 36px;\n  color: white;\n  font-family: 'Rammetto One';\n  text-align: center;\n  @media (max-width: 1024px) {\n    font-size: 28px;\n  }\n  @media (max-width: 760px) {\n    font-size: 20px;\n  }\n  @media (max-width: 560px) {\n    > :nth-child(2) {\n      display: none;\n    } \n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 36px;\n  color: white;\n  font-family: 'Rammetto One';\n  text-align: center;\n  @media (max-width: 1024px) {\n    font-size: 28px;\n  }\n  @media (max-width: 760px) {\n    font-size: 20px;\n  }\n  @media (max-width: 560px) {\n    > :nth-child(2) {\n      display: none;\n    } \n  }\n"])), function (props) { return props.height; });
+var getButtonSizeForHeight = function (height) {
+    if (height <= 50)
+        return 'x-small';
+    if (height <= 70)
+        return 'small';
+    return 'regular';
+};
+var Header = (function (props) {
+    var toolMode = DrawingToolProvider.useDrawingTool().toolMode;
+    var disableButtons = toolMode !== 'DRAW';
+    var onSave = function () {
+        if (!disableButtons)
+            props.onSave();
+    };
+    return React__default['default'].createElement(Container, { height: props.height },
+        React__default['default'].createElement(IconButton, { disabled: disableButtons, onClick: props.onBack, size: getButtonSizeForHeight(props.height), icon: React__default['default'].createElement(Icon, { name: 'arrow-left' }), theme: 'primary' }, "Back"),
+        props.prompt && (React__default['default'].createElement("div", null, props.prompt)),
+        React__default['default'].createElement(IconButton, { disabled: disableButtons, onClick: onSave, size: getButtonSizeForHeight(props.height), icon: React__default['default'].createElement(Icon, { name: 'tick' }), theme: 'confirm' }, "Save"));
+});
+var templateObject_1;
+
+module.exports = Header;
+//# sourceMappingURL=Header.js.map

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Orientation } from '../../DrawingTool';
+export interface Props {
+    orientation: Orientation;
+    buttonSize: number;
+}
+declare const _default: (props: Props) => JSX.Element;
+export default _default;

package/dist/components/DrawingTool/components/OpacityToggle/OpacityToggle.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var React = require('react');
+var ReactTooltip = require('react-tooltip');
+var Icon = require('../../../Icon/Icon.js');
+var OpacityToggle_styles = require('./OpacityToggle.styles.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 ReactTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ReactTooltip);
+
+var OpacityToggle = (function (props) {
+    var _a = DrawingToolProvider.useDrawingTool(), brushOpacity = _a.brushOpacity, setBruchOpacity = _a.setBruchOpacity, currentColour = _a.currentColour;
+    var toggleOpacity = function () {
+        setBruchOpacity(brushOpacity === 1 ? 0.5 : 1);
+    };
+    return React__default['default'].createElement("div", null,
+        React__default['default'].createElement(ReactTooltip__default['default'], { effect: "solid", delayShow: 750, multiline: true }),
+        React__default['default'].createElement(OpacityToggle_styles.Container, { "data-tip": brushOpacity === 0.5
+                ? 'Switch OFF color mixer'
+                : 'Switch ON color mixer', orientation: props.orientation, buttonSize: Math.floor(props.buttonSize * .8), onClick: toggleOpacity },
+            React__default['default'].createElement(OpacityToggle_styles.OpacityButton, { orientation: props.orientation, buttonSize: Math.floor(props.buttonSize * .9) },
+                React__default['default'].createElement(Icon, { fill: brushOpacity === 1 ? '#7A7A79' : currentColour.hex, name: 'drawing-tool-opacity-half' })),
+            React__default['default'].createElement(OpacityToggle_styles.OpacityButton, { orientation: props.orientation, buttonSize: Math.floor(props.buttonSize * .9) },
+                React__default['default'].createElement(Icon, { fill: brushOpacity < 1 ? '#7A7A79' : currentColour.hex, name: 'drawing-tool-opacity-full' }))));
+});
+
+module.exports = OpacityToggle;
+//# sourceMappingURL=OpacityToggle.js.map

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

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

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

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