nzk-react-components 0.4.5 → 0.4.6

package/dist/assets/icons/awards.svg

@@ -0,0 +1,14 @@
+<svg id="icon_-_awards" data-name="icon - awards" xmlns="http://www.w3.org/2000/svg" width="120" height="120" viewBox="0 0 120 120">
+  <path id="Path_1284" data-name="Path 1284" d="M-322.5-304.424l-23.317,67.135,2.8,8.45h28.275l3.679-10.791h20.746l3.681,10.791h28.23l1.586-8.45-23.317-67.135Z" transform="translate(361.312 327.131)" opacity="0.3"/>
+  <path id="Path_722" data-name="Path 722" d="M-322.5-304.424l-23.317,67.135,2.8,8.45h28.275l3.679-10.791h20.746l3.681,10.791h28.23l1.586-8.45-23.317-67.135Z" transform="translate(361.312 320.131)" fill="#ffb600"/>
+  <path id="Path_723" data-name="Path 723" d="M-322.5-304.424h42.366l23.317,67.135h-29.7l-3.873-11.35H-312.2l-3.87,11.35h-29.74Z" transform="translate(361.312 320.131)" fill="#ff0"/>
+  <path id="Path_724" data-name="Path 724" d="M-338.9-240.215a1.01,1.01,0,0,1-.314-.05.992.992,0,0,1-.626-1.255l20-59.66a.994.994,0,0,1,1.256-.625.993.993,0,0,1,.625,1.255l-20,59.659a.99.99,0,0,1-.94.676" transform="translate(361.312 320.131)" fill="#fff"/>
+  <path id="Path_725" data-name="Path 725" d="M-287.574-282.887c.046-1.436.072-2.861.072-4.251h-26.315c0,1.39.027,2.815.073,4.251h-7.35v1.3c0,7.276,1.258,15.442,10.573,20.845a16.169,16.169,0,0,0,4.177,1.6,8.231,8.231,0,0,0,4.388,2.168v1.9a6.85,6.85,0,0,1-6.844,6.844h-1.757v2.6h19.794v-2.6h-1.756a6.851,6.851,0,0,1-6.844-6.844v-1.9a8.237,8.237,0,0,0,4.39-2.168,16.14,16.14,0,0,0,4.176-1.6c9.317-5.4,10.573-13.568,10.573-20.845v-1.3Zm-30.912,2.593h4.859c.373,6.1,1.471,12.256,4.382,17.289-7.62-4.433-9.085-10.855-9.241-17.289m26.412,17.289c2.914-5.035,4.011-11.194,4.384-17.289h4.858c-.155,6.435-1.622,12.856-9.242,17.289" transform="translate(361.312 320.131)" fill="#ffb600"/>
+  <rect id="Rectangle_79" data-name="Rectangle 79" width="26.22" height="0.668" transform="translate(47.502 32.846)" fill="#ffcf30"/>
+  <path id="Path_726" data-name="Path 726" d="M-290.141-247.936h-22.3l.24-.668h21.82Z" transform="translate(361.312 320.131)" fill="#ffcf30"/>
+  <rect id="Rectangle_82" data-name="Rectangle 82" width="7.328" height="0.668" transform="translate(73.723 37.257)" fill="#ffcf30"/>
+  <rect id="Rectangle_84" data-name="Rectangle 84" width="7.328" height="0.668" transform="translate(40.175 37.257)" fill="#ffcf30"/>
+  <path id="Path_727" data-name="Path 727" d="M-280.127-281.319h-.057c-.55,10.306-5.443,16.55-12.215,19.2,3.043-4.884,5-13.157,4.952-25.163h-.035c-.486,18.854-6.233,27.55-13.165,27.55-6.917,0-12.589-9.41-13.151-27.55h-.049c0,11.707,2.006,20.132,5.118,25.133h0c-6.807-2.741-11.586-9.186-12.226-19.166h0c-.409,12.277,6.1,20.021,14.709,22.235a8.541,8.541,0,0,0,4.335,2.242v1.81h2.6v-1.811a8.737,8.737,0,0,0,4.418-2.226c8.556-2.129,14.857-9.3,14.765-22.25m-14.135,21.635c.036-.039.072-.081.107-.121-.035.04-.071.082-.107.121m1.252-1.523c.015-.023.03-.044.045-.065-.015.021-.03.042-.045.065m-.623.811.088-.109-.088.109" transform="translate(361.215 320.131)" fill="#e2a100"/>
+  <path id="Path_728" data-name="Path 728" d="M-287.844-241.205h-26.892l-.549,1.585h27.974Z" transform="translate(361.312 320.131)" fill="#e2a100"/>
+  <rect id="frame" width="120" height="120" fill="none"/>
+</svg>

package/dist/assets/icons/awards.svg.js

@@ -0,0 +1,89 @@
+'use strict';
+
+var React = require('react');
+
+function _interopNamespace(e) {
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () {
+            return e[k];
+          }
+        });
+      }
+    });
+  }
+  n['default'] = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
+
+var _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function SvgAwards(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    "data-name": "icon - awards",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 120,
+    height: 120,
+    viewBox: "0 0 120 120"
+  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Path 1284",
+    d: "M38.812 22.707L15.495 89.842l2.8 8.45H46.57l3.679-10.791h20.746l3.681 10.791h28.23l1.586-8.45-23.317-67.135z",
+    opacity: 0.3
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Path 722",
+    d: "M38.812 15.707L15.495 82.842l2.8 8.45H46.57l3.679-10.791h20.746l3.681 10.791h28.23l1.586-8.45-23.317-67.135z",
+    fill: "#ffb600"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Path 723",
+    d: "M38.812 15.707h42.366l23.317 67.135h-29.7l-3.873-11.35h-21.81l-3.87 11.35h-29.74z",
+    fill: "#ff0"
+  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Path 724",
+    d: "M22.412 79.916a1.01 1.01 0 01-.314-.05.992.992 0 01-.626-1.255l20-59.66a.994.994 0 011.256-.625.993.993 0 01.625 1.255l-20 59.659a.99.99 0 01-.94.676",
+    fill: "#fff"
+  })), _path5 || (_path5 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Path 725",
+    d: "M73.738 37.244c.046-1.436.072-2.861.072-4.251H47.495c0 1.39.027 2.815.073 4.251h-7.35v1.3c0 7.276 1.258 15.442 10.573 20.845a16.169 16.169 0 004.177 1.6 8.231 8.231 0 004.388 2.168v1.9a6.85 6.85 0 01-6.844 6.844h-1.757v2.6h19.794v-2.6h-1.756a6.851 6.851 0 01-6.844-6.844v-1.9a8.237 8.237 0 004.39-2.168 16.14 16.14 0 004.176-1.6c9.317-5.4 10.573-13.568 10.573-20.845v-1.3zm-30.912 2.593h4.859c.373 6.1 1.471 12.256 4.382 17.289-7.62-4.433-9.085-10.855-9.241-17.289m26.412 17.289c2.914-5.035 4.011-11.194 4.384-17.289h4.858c-.155 6.435-1.622 12.856-9.242 17.289",
+    fill: "#ffb600"
+  })), _path6 || (_path6 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Rectangle 79",
+    fill: "#ffcf30",
+    d: "M47.502 32.846h26.22v.668h-26.22z"
+  })), _path7 || (_path7 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Path 726",
+    d: "M71.171 72.195h-22.3l.24-.668h21.82z",
+    fill: "#ffcf30"
+  })), _path8 || (_path8 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Rectangle 82",
+    fill: "#ffcf30",
+    d: "M73.723 37.257h7.328v.668h-7.328z"
+  })), _path9 || (_path9 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Rectangle 84",
+    fill: "#ffcf30",
+    d: "M40.175 37.257h7.328v.668h-7.328z"
+  })), _path10 || (_path10 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Path 727",
+    d: "M81.088 38.812h-.057c-.55 10.306-5.443 16.55-12.215 19.2 3.043-4.884 5-13.157 4.952-25.163h-.035c-.486 18.854-6.233 27.55-13.165 27.55-6.917 0-12.589-9.41-13.151-27.55h-.049c0 11.707 2.006 20.132 5.118 25.133-6.807-2.741-11.586-9.186-12.226-19.166-.409 12.277 6.1 20.021 14.709 22.235a8.541 8.541 0 004.335 2.242v1.81h2.6v-1.811a8.737 8.737 0 004.418-2.226c8.556-2.129 14.857-9.3 14.765-22.25M66.952 60.451c.036-.039.072-.081.107-.121-.035.04-.071.082-.107.121m1.252-1.523l.045-.065a1.83 1.83 0 00-.045.065m-.623.811l.088-.109-.088.109",
+    fill: "#e2a100"
+  })), _path11 || (_path11 = /*#__PURE__*/React__namespace.createElement("path", {
+    "data-name": "Path 728",
+    d: "M73.468 78.926H46.576l-.549 1.585h27.974z",
+    fill: "#e2a100"
+  })), _path12 || (_path12 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    d: "M0 0h120v120H0z"
+  })));
+}
+
+module.exports = SvgAwards;
+//# sourceMappingURL=awards.svg.js.map

package/dist/assets/icons/awards.svg.js.map

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

package/dist/components/Icon/icons.d.ts

@@ -4,6 +4,7 @@ export declare const ICONS: {
     archive: JSX.Element;
     'arrow-left': JSX.Element;
     'arrow-right': JSX.Element;
+    awards: JSX.Element;
     'card-skills': JSX.Element;
     challenges: JSX.Element;
     chart: JSX.Element;

package/dist/components/Icon/icons.js

@@ -8,6 +8,7 @@ var activities = require('../../assets/icons/activities.svg.js');
 var archive = require('../../assets/icons/archive.svg.js');
 var arrowLeft = require('../../assets/icons/arrow-left.svg.js');
 var arrowRight = require('../../assets/icons/arrow-right.svg.js');
+var awards = require('../../assets/icons/awards.svg.js');
 var cardSkills = require('../../assets/icons/card-skills.svg.js');
 var challenges = require('../../assets/icons/challenges.svg.js');
 var chart = require('../../assets/icons/chart.svg.js');
@@ -140,6 +141,7 @@ var ICONS = {
     'archive': React__default['default'].createElement(archive, null),
     'arrow-left': React__default['default'].createElement(arrowLeft, null),
     'arrow-right': React__default['default'].createElement(arrowRight, null),
+    'awards': React__default['default'].createElement(awards, null),
     'card-skills': React__default['default'].createElement(cardSkills, null),
     'challenges': React__default['default'].createElement(challenges, null),
     'chart': React__default['default'].createElement(chart, null),

package/dist/components/Icon/icons.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nzk-react-components",
-  "version": "0.4.5",
+  "version": "0.4.6",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [

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

@@ -1,29 +0,0 @@
-/// <reference types="react" />
-export interface Props {
-    prompt: string;
-    showHeader: boolean;
-    onBack: () => void;
-    onSave: () => void;
-    showPaperBackground?: boolean;
-    disableCameraUpload?: boolean;
-    minImageUploadSize?: number;
-    disableAutoCache?: boolean;
-    openUploadPopupOnStart?: boolean;
-    cacheKey?: string;
-}
-export declare type Orientation = 'LANDSCAPE' | 'PORTRAIT';
-declare const Drawing: {
-    (props: Props): JSX.Element;
-    defaultProps: {
-        prompt: string;
-        showHeader: boolean;
-        onBack: () => void;
-        onSave: () => void;
-        showPaperBackground: boolean;
-        disableCameraUpload: boolean;
-        disableAutoCache: boolean;
-        cacheKey: string;
-        openUploadPopupOnStart: boolean;
-    };
-};
-export default Drawing;

package/dist/components/DrawingTool/DrawingTool.js

@@ -1,277 +0,0 @@
-'use strict';
-
-var tslib = require('tslib');
-var React = require('react');
-var polished = require('polished');
-var Moveable = require('react-moveable');
-var MoveableHelper = require('moveable-helper');
-var ReactTooltip = require('react-tooltip');
-var DrawingTool_styles = require('./DrawingTool.styles.js');
-var useDebounce = require('../../hooks/useDebounce.js');
-var useElementSize = require('../../hooks/useElementSize.js');
-var Button = require('../Button/Button.js');
-var Icon = require('../Icon/Icon.js');
-var IconButton = require('../IconButton/IconButton.js');
-var ColourToolbar = require('./components/ColourToolbar/ColourToolbar.js');
-var Modal = require('../Modal/Modal.js');
-var DrawingToolProvider = require('./DrawingToolProvider.js');
-var FileInput = require('./components/FileInput/FileInput.js');
-var index = require('./components/Placeable/index.js');
-var OpacityToggle = require('./components/OpacityToggle/OpacityToggle.js');
-var Header = require('./components/Header/Header.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var Moveable__default = /*#__PURE__*/_interopDefaultLegacy(Moveable);
-var MoveableHelper__default = /*#__PURE__*/_interopDefaultLegacy(MoveableHelper);
-var ReactTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ReactTooltip);
-
-var Drawing = function (props) {
-    var _a, _b;
-    var containerRef = React.useRef(null);
-    var sketchOuterRef = React.useRef(null);
-    var sketchInnerRef = React.useRef(null);
-    var sketchCutInnerRef = React.useRef(null);
-    var imageToPlaceContainerRef = React.useRef(null);
-    var moveableRef = React.useRef(null);
-    var helper = React.useState(function () {
-        return new MoveableHelper__default['default']();
-    })[0];
-    var _c = useElementSize(containerRef), containerWidth = _c.width, containerHeight = _c.height;
-    var debouncedContainerWidth = useDebounce(containerWidth, 1000);
-    var debouncedContainerHeight = useDebounce(containerHeight, 1000);
-    var _d = React.useState('LANDSCAPE'), orientation = _d[0], setOrientation = _d[1];
-    var _e = React.useState(1280), maxContainerWidth = _e[0], setMaxContainerWidth = _e[1];
-    var _f = React.useState(960), maxContainerHeight = _f[0], setMaxContainerHeight = _f[1];
-    var _g = React.useState(50), buttonSize = _g[0], setButtonSize = _g[1];
-    var _h = React.useState(false), isMobile = _h[0], setIsMobile = _h[1];
-    var _j = React.useState(true), resizing = _j[0], setResizing = _j[1];
-    var _k = React.useState(false), showRestartConfirmModal = _k[0], setShowRestartConfirmModal = _k[1];
-    var _l = React.useState(props.openUploadPopupOnStart), showFileInput = _l[0], setShowFileInput = _l[1];
-    var _m = React.useState(), imageToCut = _m[0], setImageToCut = _m[1];
-    var _o = React.useState(true), showCutTutorial = _o[0], setShowCutTutorial = _o[1];
-    var _p = React.useState(false), showSaveCutAction = _p[0], setShowSaveCutAction = _p[1];
-    var _q = React.useState(), imageToPlace = _q[0], setImageToPlace = _q[1];
-    var _r = DrawingToolProvider.useDrawingTool(), initSketch = _r.initSketch, initSketchCut = _r.initSketchCut, exportSketchCut = _r.exportSketchCut, currentColour = _r.currentColour, brushSize = _r.brushSize, setBrushSize = _r.setBrushSize, brushType = _r.brushType, setBrushType = _r.setBrushType, undo = _r.undo, redo = _r.redo, restart = _r.restart, setCacheKey = _r.setCacheKey, setAutoCache = _r.setAutoCache, resetCut = _r.resetCut, mergeImage = _r.mergeImage, setToolMode = _r.setToolMode;
-    React.useEffect(function () {
-        if (typeof props.disableAutoCache === 'boolean') {
-            setAutoCache(!props.disableAutoCache);
-        }
-        if (props.cacheKey)
-            setCacheKey(props.cacheKey);
-    }, []);
-    React.useLayoutEffect(function () {
-        if (debouncedContainerHeight !== containerHeight || debouncedContainerWidth !== containerWidth) {
-            setResizing(true);
-        }
-        else if (containerWidth > 0 && containerHeight > 0) {
-            setResizing(false);
-            if (containerWidth < 768) {
-                setIsMobile(true);
-            }
-            else {
-                setIsMobile(false);
-            }
-        }
-    }, [debouncedContainerWidth, debouncedContainerHeight, containerWidth, containerHeight]);
-    React.useLayoutEffect(function () {
-        setMaxContainerHeight(containerWidth * 1.4);
-        setMaxContainerWidth(containerHeight * 1.4);
-        if (containerWidth < containerHeight && containerWidth < 1024) {
-            setButtonSize(Math.floor(containerWidth / 11) * 0.85);
-            setOrientation('PORTRAIT');
-        }
-        else {
-            if (containerHeight < 420) {
-                setButtonSize(Math.floor(containerHeight / 13) * 0.85);
-            }
-            else if (containerHeight < 1024) {
-                setButtonSize(Math.floor(containerHeight / 12) * 0.85);
-            }
-            else {
-                setButtonSize(Math.floor(containerHeight / 11) * 0.85);
-            }
-            setOrientation('LANDSCAPE');
-        }
-    }, [containerWidth, containerHeight]);
-    React.useEffect(function () {
-        if (!imageToCut && !resizing && sketchInnerRef.current) {
-            initSketch(sketchInnerRef.current);
-        }
-    }, [resizing, sketchInnerRef, imageToCut]);
-    React.useEffect(function () {
-        if (!resizing && sketchCutInnerRef.current && imageToCut) {
-            initSketchCut(sketchCutInnerRef.current, imageToCut, function () {
-                setShowSaveCutAction(true);
-            });
-        }
-    }, [resizing, sketchCutInnerRef, imageToCut]);
-    var onClickRestart = function () {
-        setShowRestartConfirmModal(true);
-    };
-    var onClickCamera = function () {
-        setShowFileInput(true);
-    };
-    var onImageUploaded = function (image) {
-        setShowFileInput(false);
-        setImageToCut(image);
-        setToolMode("CUT");
-    };
-    var strokeBrushColour = polished.getLuminance(currentColour.hex) > 0.05 ? polished.darken(0.15, currentColour.hex) : polished.lighten(0.1, currentColour.hex);
-    var deselectedButtonColourProps = {
-        theme: 'white'
-    };
-    var selectedButtonColourProps = {
-        backgroundColor: currentColour.hex,
-        strokeColor: strokeBrushColour,
-        dropShadowColor: 'rgba(0,0,0,.3)',
-        shadowColor: 'rgba(0,0,0,.5)'
-    };
-    var eraserBrushColourProps = (brushType === 'eraser' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var fillBrushColourProps = (brushType === 'fill' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var lineBrushColourProps = (brushType === 'line' ? selectedButtonColourProps : deselectedButtonColourProps);
-    var smallLineColourProps = (brushSize === DrawingToolProvider.BrushSize.small ? selectedButtonColourProps : deselectedButtonColourProps);
-    var mediumLineColourProps = (brushSize === DrawingToolProvider.BrushSize.medium ? selectedButtonColourProps : deselectedButtonColourProps);
-    var largeLineColourProps = (brushSize === DrawingToolProvider.BrushSize.large ? selectedButtonColourProps : deselectedButtonColourProps);
-    var sketchStyles;
-    if (!resizing && sketchOuterRef && sketchOuterRef.current) {
-        sketchStyles = {
-            width: sketchOuterRef.current.offsetWidth + "px",
-            height: sketchOuterRef.current.offsetHeight + "px",
-            position: 'absolute',
-            top: '0px',
-            left: '0px'
-        };
-    }
-    var disableToolbars = (showFileInput || showRestartConfirmModal || imageToCut || imageToPlace);
-    var inSketchActions = [];
-    if (showSaveCutAction) {
-        inSketchActions.push({
-            key: 'retry-cut',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "drawing-tool-undo", fill: "white" }), theme: 'orange', size: isMobile ? "small" : "regular", onClick: function () {
-                    setShowSaveCutAction(false);
-                    setShowCutTutorial(true);
-                    resetCut();
-                } }, "Retry")
-        }, {
-            key: 'save-cut',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
-                    setShowSaveCutAction(false);
-                    setImageToCut(undefined);
-                    var newImage = new Image;
-                    newImage.onload = function () {
-                        setImageToPlace(newImage);
-                        setToolMode('PLACE');
-                    };
-                    newImage.src = exportSketchCut();
-                } }, "Save")
-        });
-    }
-    else if (imageToPlace) {
-        inSketchActions.push({
-            key: 'cancel-place',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "close" }), theme: 'red', size: isMobile ? "small" : "regular", onClick: function () {
-                    setImageToPlace(undefined);
-                    setToolMode('DRAW');
-                } }, "Cancel")
-        }, {
-            key: 'save-place',
-            component: React__default['default'].createElement(IconButton, { icon: React__default['default'].createElement(Icon, { name: "tick" }), theme: 'confirm', size: isMobile ? "small" : "regular", onClick: function () {
-                    if (moveableRef.current) {
-                        var rect = moveableRef.current.getRect();
-                        mergeImage({
-                            image: imageToPlace,
-                            x: rect.left,
-                            y: rect.top,
-                            origin: rect.origin,
-                            width: Math.hypot(rect.pos2[0] - rect.pos1[0], rect.pos2[1] - rect.pos1[1]),
-                            height: Math.hypot(rect.pos3[0] - rect.pos2[0], rect.pos3[1] - rect.pos2[1]),
-                            rotation: rect.rotation
-                        });
-                        setToolMode('DRAW');
-                        setImageToPlace(undefined);
-                    }
-                } }, "Save")
-        });
-    }
-    var headerHeight = 90;
-    if (containerHeight < 800 || containerWidth < 728)
-        headerHeight = 70;
-    if (containerHeight < 500 || containerWidth < 500)
-        headerHeight = 50;
-    return React__default['default'].createElement(DrawingTool_styles.Container, { ref: containerRef, maxWidth: maxContainerWidth, maxHeight: maxContainerHeight },
-        props.showHeader && React__default['default'].createElement(Header, { height: headerHeight, prompt: props.prompt, onBack: props.onBack, onSave: props.onSave }),
-        React__default['default'].createElement(DrawingTool_styles.Tool, { hasHeader: props.showHeader, headerHeight: headerHeight, orientation: orientation },
-            React__default['default'].createElement(ReactTooltip__default['default'], { effect: "solid", delayShow: 750, multiline: true }),
-            React__default['default'].createElement(DrawingTool_styles.LeftToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { "data-tip": "Start again?", height: buttonSize, round: true, theme: 'red', onClick: onClickRestart },
-                        React__default['default'].createElement(Icon, { name: 'trash-white' }))),
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { height: buttonSize, round: true, theme: "white", onClick: undo },
-                        React__default['default'].createElement(Icon, { fill: currentColour.hex, name: 'drawing-tool-undo' })),
-                    React__default['default'].createElement(Button, { height: buttonSize, round: true, theme: "white", onClick: redo },
-                        React__default['default'].createElement(Icon, { fill: currentColour.hex, name: 'drawing-tool-redo' }))),
-                !props.disableCameraUpload && React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, { "data-tip": "Upload a drawing", height: buttonSize, round: true, theme: 'purple', onClick: onClickCamera },
-                        React__default['default'].createElement(Icon, { name: 'drawing-tool-camera' }))),
-                React__default['default'].createElement(DrawingTool_styles.ButtonGroup, { orientation: orientation, buttonSize: buttonSize },
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, eraserBrushColourProps, { onClick: function () { return setBrushType('eraser'); } }),
-                        React__default['default'].createElement(Icon, { "data-tip": "Eraser", fill: brushType === 'eraser' ? 'white' : currentColour.hex, name: 'drawing-tool-eraser' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ "data-tip": "Fill brush", height: buttonSize, round: true }, fillBrushColourProps, { onClick: function () { return setBrushType('fill'); } }),
-                        React__default['default'].createElement(Icon, { fill: brushType === 'fill' ? 'white' : currentColour.hex, name: 'drawing-tool-fill-brush' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ "data-tip": "Line brush", height: buttonSize, round: true }, lineBrushColourProps, { onClick: function () { return setBrushType('line'); } }),
-                        React__default['default'].createElement(Icon, { fill: brushType === 'line' ? 'white' : currentColour.hex, name: 'drawing-tool-line-brush' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, smallLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.small); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.small ? 'white' : currentColour.hex, name: 'drawing-tool-small-line' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, mediumLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.medium); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.medium ? 'white' : currentColour.hex, name: 'drawing-tool-medium-line' })),
-                    React__default['default'].createElement(Button, tslib.__assign({ height: buttonSize, round: true }, largeLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.large); } }),
-                        React__default['default'].createElement(Icon, { fill: brushSize === DrawingToolProvider.BrushSize.large ? 'white' : currentColour.hex, name: 'drawing-tool-large-line' })))),
-            React__default['default'].createElement(DrawingTool_styles.SketchContainer, { orientation: orientation, ref: sketchOuterRef },
-                props.showPaperBackground && React__default['default'].createElement(DrawingTool_styles.PaperBackground, { cutMode: imageToCut && true }),
-                !imageToCut && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchInnerRef }),
-                imageToCut && sketchStyles && React__default['default'].createElement("div", { style: sketchStyles, ref: sketchCutInnerRef }),
-                imageToPlace && sketchStyles && (React__default['default'].createElement("div", { style: tslib.__assign(tslib.__assign({}, sketchStyles), { zIndex: '101' }) },
-                    React__default['default'].createElement(DrawingTool_styles.ImageToPlaceContainer, null,
-                        React__default['default'].createElement(DrawingTool_styles.ImageToPlace, { ref: imageToPlaceContainerRef, src: imageToPlace.src })),
-                    React__default['default'].createElement(Moveable__default['default'], { ref: moveableRef, target: imageToPlaceContainerRef, ables: [index], props: {
-                            placeable: true,
-                        }, snappable: true, bounds: { left: 0, top: 0, bottom: (_a = sketchOuterRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight, right: (_b = sketchOuterRef.current) === null || _b === void 0 ? void 0 : _b.offsetWidth }, draggable: true, scalable: true, keepRatio: true, rotatable: true, onDragStart: helper.onDragStart, onDrag: helper.onDrag, onScaleStart: helper.onScaleStart, onScale: helper.onScale, onRotateStart: helper.onRotateStart, onRotate: helper.onRotate }))),
-                inSketchActions.length && (React__default['default'].createElement(DrawingTool_styles.InSketchActions, null, inSketchActions.map(function (action) { return (React__default['default'].createElement(DrawingTool_styles.InSketchAction, { key: action.key }, action.component)); }))),
-                imageToCut && showCutTutorial && React__default['default'].createElement(DrawingTool_styles.CutImageTutorial, { onClick: function () { return setShowCutTutorial(false); } },
-                    React__default['default'].createElement("div", null, "Now cut out your animal: Click, hold and make sure you draw around it."),
-                    React__default['default'].createElement("img", { alt: "crop example", src: "https://cdn.nightzookeeper.com/nzk-assets/crop-tutorial.png" }),
-                    React__default['default'].createElement("div", null,
-                        React__default['default'].createElement(Button, { size: isMobile ? "small" : "regular", theme: "primary" }, "Ok")))),
-            React__default['default'].createElement(DrawingTool_styles.RightToolbarContainer, { orientation: orientation, buttonSize: buttonSize, disabled: disableToolbars },
-                React__default['default'].createElement(ColourToolbar, { orientation: orientation, size: buttonSize, currentColour: currentColour }),
-                React__default['default'].createElement(OpacityToggle, { orientation: orientation, buttonSize: buttonSize }))),
-        showRestartConfirmModal && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
-            React__default['default'].createElement(Modal, { title: "Are you sure?", actions: [
-                    React__default['default'].createElement(Button, { key: 'cancel', size: isMobile ? "small" : "regular", theme: "red", onClick: function () {
-                            setShowRestartConfirmModal(false);
-                        } }, "No"),
-                    React__default['default'].createElement(Button, { key: 'confirm', size: isMobile ? "small" : "regular", theme: "confirm", onClick: function () {
-                            restart();
-                            setShowRestartConfirmModal(false);
-                        } }, "Yes"),
-                ] })),
-        showFileInput && React__default['default'].createElement(DrawingTool_styles.ModalOverlay, null,
-            React__default['default'].createElement(FileInput, { isMobile: isMobile, dismiss: function () { return setShowFileInput(false); }, onImageUploaded: onImageUploaded, minImageSize: props.minImageUploadSize })));
-};
-Drawing.defaultProps = {
-    prompt: 'Draw your Animal',
-    showHeader: true,
-    onBack: function () { },
-    onSave: function () { },
-    showPaperBackground: true,
-    disableCameraUpload: false,
-    disableAutoCache: false,
-    cacheKey: 'nzk-sketch-cache',
-    openUploadPopupOnStart: false
-};
-
-module.exports = Drawing;
-//# sourceMappingURL=DrawingTool.js.map

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

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

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

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

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

@@ -1,41 +0,0 @@
-import { Orientation } from './DrawingTool';
-export declare const Container: import("styled-components").StyledComponent<"div", any, {
-    maxWidth: number;
-    maxHeight: number;
-}, never>;
-export declare const Tool: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    hasHeader: boolean;
-    headerHeight: number;
-}, never>;
-export declare const ButtonGroup: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-}, never>;
-export declare const ColourButtonGroup: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-}, never>;
-export declare const ScrollableColours: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const LeftToolbarContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-    disabled: boolean;
-}, never>;
-export declare const RightToolbarContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-    buttonSize: number;
-    disabled: boolean;
-}, never>;
-export declare const SketchContainer: import("styled-components").StyledComponent<"div", any, {
-    orientation: Orientation;
-}, never>;
-export declare const PaperBackground: import("styled-components").StyledComponent<"div", any, {
-    cutMode?: boolean | undefined;
-}, never>;
-export declare const InSketchActions: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const InSketchAction: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ModalOverlay: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageToPlaceContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ImageToPlace: import("styled-components").StyledComponent<"img", any, {}, never>;
-export declare const CutImageTutorial: import("styled-components").StyledComponent<"div", any, {}, never>;

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":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}