nzk-react-components 0.4.0 → 0.4.1

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

@@ -1,54 +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 getToolbarWidth = function (props) {
-    if (props.orientation === 'PORTRAIT')
-        return '100%';
-    return props.buttonSize + 10 + "px";
-};
-var getToolbarHeight = function (props) {
-    if (props.orientation === 'LANDSCAPE')
-        return '100%';
-    return props.buttonSize + 10 + "px";
-};
-var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: calc(100% - 40px);\n  height: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n  max-height: ", "px;\n  * {\n    box-sizing: border-box;\n  }\n"], ["\n  position: relative;\n  width: calc(100% - 40px);\n  height: 100%;\n  margin-left: auto;\n  margin-right: auto;\n  max-width: ", "px;\n  max-height: ", "px;\n  * {\n    box-sizing: border-box;\n  }\n"])), function (props) { return props.maxWidth; }, function (props) { return props.maxHeight; });
-var Tool = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: ", "px;\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-shrink: none;\n  flex-direction: ", ";\n"], ["\n  position: absolute;\n  top: ", "px;\n  height: ", ";\n  width: 100%;\n  display: flex;\n  flex-shrink: none;\n  flex-direction: ", ";\n"])), function (props) { return props.hasHeader ? props.headerHeight : 0; }, function (props) { return props.hasHeader ? "calc(100% - " + (props.headerHeight + 20) + "px)" : 'calc(100% - 20px)'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'row' : 'column'; });
-var ButtonGroup = styled__default['default'].div(templateObject_3 || (templateObject_3 = tslib.__makeTemplateObject(["\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  > div {\n    user-select: none;\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"], ["\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  > div {\n    user-select: none;\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"])), function (props) { return props.orientation === 'LANDSCAPE' ? Math.floor(props.buttonSize / 5) + "px" : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? Math.floor(props.buttonSize / 5) + "px" : 0; });
-styled__default['default'].div(templateObject_4 || (templateObject_4 = tslib.__makeTemplateObject(["\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  display: flex;\n  height: 70%;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  > div {\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"], ["\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  display: flex;\n  height: 70%;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  overflow: hidden;\n  > div {\n    margin-bottom: ", ";\n    margin-right: ", ";\n  }\n"])), function (props) { return props.buttonSize; }, function (props) { return props.orientation === 'PORTRAIT' ? '8px' : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? '8px' : 0; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'LANDSCAPE' ? Math.floor(props.buttonSize / 5) + "px" : 0; }, function (props) { return props.orientation === 'PORTRAIT' ? Math.floor(props.buttonSize / 5) + "px" : 0; });
-styled__default['default'].div(templateObject_5 || (templateObject_5 = tslib.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
-var LeftToolbarContainer = styled__default['default'].div(templateObject_6 || (templateObject_6 = tslib.__makeTemplateObject(["\n  position: relative;\n  pointer-events: ", ";\n  opacity: ", ";\n  filter: ", ";\n  width: ", ";\n  height: ", ";\n  order: ", ";\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: center;\n"], ["\n  position: relative;\n  pointer-events: ", ";\n  opacity: ", ";\n  filter: ", ";\n  width: ", ";\n  height: ", ";\n  order: ", ";\n  display: flex;\n  flex-direction: ", ";\n  justify-content: space-between;\n  align-items: center;\n"])), function (props) { return props.disabled ? 'none' : 'all'; }, function (props) { return props.disabled ? 0.5 : 1; }, function (props) { return props.disabled ? 'grayscale(100%)' : 'none'; }, function (props) { return getToolbarWidth(props); }, function (props) { return getToolbarHeight(props); }, function (props) { return props.orientation === 'LANDSCAPE' ? 1 : 2; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'column' : 'row'; });
-var RightToolbarContainer = styled__default['default'].div(templateObject_7 || (templateObject_7 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: ", ";\n  max-height: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  filter: ", ";\n  order: 3;\n  justify-content: space-between;\n  display: flex;\n  flex-direction: ", ";\n  margin-top: ", ";\n  align-items: center;\n"], ["\n  position: relative;\n  width: ", ";\n  max-height: ", ";\n  opacity: ", ";\n  pointer-events: ", ";\n  filter: ", ";\n  order: 3;\n  justify-content: space-between;\n  display: flex;\n  flex-direction: ", ";\n  margin-top: ", ";\n  align-items: center;\n"])), function (props) { return getToolbarWidth(props); }, function (props) { return getToolbarHeight(props); }, function (props) { return props.disabled ? 0.5 : 1; }, function (props) { return props.disabled ? 'none' : 'all'; }, function (props) { return props.disabled ? 'grayscale(100%)' : 'none'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'column' : 'row'; }, function (props) { return props.orientation === 'PORTRAIT' ? '10px' : '0px'; });
-var SketchContainer = styled__default['default'].div(templateObject_8 || (templateObject_8 = tslib.__makeTemplateObject(["\n  position: relative;\n  flex: 1 1 auto;\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  order: ", ";\n\n  .moveable-rotation .moveable-control.moveable-rotation-control {\n    border: none !important;\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    cursor: alias;\n    opacity: 0;\n  }\n\n  .moveable-control {\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    border: none !important;\n  }\n\n  .moveable-line.moveable-rotation-line {\n    width: 4px !important;\n    height: 40px !important;\n    margin-left: -1px;\n  }\n\n  .moveable-line {\n    height: 4px !important;\n  }\n\n  .moveable-origin {\n    display: none !important;\n  }\n}"], ["\n  position: relative;\n  flex: 1 1 auto;\n  margin-left: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  order: ", ";\n\n  .moveable-rotation .moveable-control.moveable-rotation-control {\n    border: none !important;\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    cursor: alias;\n    opacity: 0;\n  }\n\n  .moveable-control {\n    width: 24px !important;\n    height: 24px !important;\n    margin-top: -12px !important;\n    margin-left: -12px !important;\n    border: none !important;\n  }\n\n  .moveable-line.moveable-rotation-line {\n    width: 4px !important;\n    height: 40px !important;\n    margin-left: -1px;\n  }\n\n  .moveable-line {\n    height: 4px !important;\n  }\n\n  .moveable-origin {\n    display: none !important;\n  }\n}"])), function (props) { return props.orientation === 'LANDSCAPE' ? '10px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '20px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '0px' : '10px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 2 : 1; });
-var PaperBackground = styled__default['default'].div(templateObject_9 || (templateObject_9 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  box-shadow: 0px 4px 0px #C7C7C6;\n  background: ", ";\n\n  &:before, &:after {\n    z-index: -1;\n    position: absolute;\n    content: \"\";\n    bottom: 7px;\n    left: 10px;\n    width: 50%;\n    top: 80%;\n    max-width: 300px;\n    background: rgba(0,0,0,.3);\n    box-shadow: 0 15px 0px rgba(0,0,0,.3);\n    transform: rotate(-3deg);\n  }\n  &:after {\n    transform: rotate(3deg);\n    right: 10px;\n    left: auto;\n  }\n"], ["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  box-shadow: 0px 4px 0px #C7C7C6;\n  background: ", ";\n\n  &:before, &:after {\n    z-index: -1;\n    position: absolute;\n    content: \"\";\n    bottom: 7px;\n    left: 10px;\n    width: 50%;\n    top: 80%;\n    max-width: 300px;\n    background: rgba(0,0,0,.3);\n    box-shadow: 0 15px 0px rgba(0,0,0,.3);\n    transform: rotate(-3deg);\n  }\n  &:after {\n    transform: rotate(3deg);\n    right: 10px;\n    left: auto;\n  }\n"])), function (props) { return props.cutMode
-    ? 'repeating-linear-gradient(-45deg, #ebebeb, #ebebeb 20px, #dfdfdf 20px, #dfdfdf 40px)'
-    : '#ebebeb'; });
-var InSketchActions = styled__default['default'].div(templateObject_10 || (templateObject_10 = tslib.__makeTemplateObject(["\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 102;\n  @media (max-width: 768px) {\n    bottom: 10px;\n  }\n  @media (max-height: 500px) {\n    bottom: 10px;\n  }\n"], ["\n  position: absolute;\n  width: 100%;\n  bottom: 20px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 102;\n  @media (max-width: 768px) {\n    bottom: 10px;\n  }\n  @media (max-height: 500px) {\n    bottom: 10px;\n  }\n"])));
-var InSketchAction = styled__default['default'].div(templateObject_11 || (templateObject_11 = tslib.__makeTemplateObject(["\n  position: relative;\n  margin-right: 20px;\n"], ["\n  position: relative;\n  margin-right: 20px;\n"])));
-var ModalOverlay = styled__default['default'].div(templateObject_12 || (templateObject_12 = tslib.__makeTemplateObject(["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"], ["\n  position: absolute;\n  top: 0px;\n  left: 0px;\n  width: 100%;\n  height: 100%;\n  z-index: 100;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n"])));
-var 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: 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.ModalOverlay = ModalOverlay;
-exports.PaperBackground = PaperBackground;
-exports.RightToolbarContainer = RightToolbarContainer;
-exports.SketchContainer = SketchContainer;
-exports.Tool = Tool;
-//# sourceMappingURL=DrawingTool.styles.js.map

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

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

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

@@ -1,56 +0,0 @@
-/// <reference types="react" />
-import { SketchActionMergeData } from './lib/SketchModel';
-export declare const BrushSize: {
-    small: number;
-    medium: number;
-    large: number;
-};
-export declare type BrushType = 'fill' | 'line' | 'eraser';
-export declare const Colours: {
-    rgb: number[];
-    hex: string;
-}[];
-export interface Colour {
-    rgb: number[];
-    hex: string;
-}
-declare type ToolMode = 'LOADING' | 'DRAW' | 'CUT' | 'PLACE';
-export interface Props {
-    cache?: string;
-}
-export declare const DrawingToolProvider: import("react").ComponentType<import("unstated-next").ContainerProviderProps<Props>>;
-export declare const useDrawingTool: () => {
-    initSketch: (containerEl: any) => void;
-    initSketchCut: (containerEl: any, imageToCut: HTMLImageElement, onImageCut: () => void) => void;
-    exportSketch: (options?: {
-        crop: boolean;
-    }) => string;
-    exportSketchCut: () => string;
-    currentColour: {
-        rgb: number[];
-        hex: string;
-    };
-    setCurrentColour: import("react").Dispatch<import("react").SetStateAction<{
-        rgb: number[];
-        hex: string;
-    }>>;
-    brushOpacity: number;
-    setBruchOpacity: import("react").Dispatch<import("react").SetStateAction<number>>;
-    brushSize: number;
-    setBrushSize: import("react").Dispatch<import("react").SetStateAction<number>>;
-    brushType: string;
-    setBrushType: import("react").Dispatch<import("react").SetStateAction<string>>;
-    undo: () => void;
-    redo: () => void;
-    restart: () => void;
-    onSketchChange: () => void;
-    setCacheKey: import("react").Dispatch<import("react").SetStateAction<string>>;
-    setAutoCache: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    clearCache: () => void;
-    resetCut: () => void;
-    mergeImage: (data: SketchActionMergeData) => void | null;
-    setToolMode: import("react").Dispatch<import("react").SetStateAction<ToolMode>>;
-    toolMode: ToolMode;
-    exportCache: () => string | null;
-};
-export {};

package/dist/components/DrawingTool/DrawingToolProvider.js

@@ -1,182 +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(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

@@ -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/ColourToolbar/index.js.map

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

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;