nzk-react-components 0.4.0 → 0.4.1

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

@@ -0,0 +1,137 @@
+'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 _defs, _path, _path2, _path3, _path4, _path5, _path6, _path7, _path8, _path9, _path10, _path11, _path12, _path13, _path14, _path15, _path16, _path17, _path18, _path19, _path20, _path21, _path22, _path23, _path24, _path25, _path26, _path27, _path28, _path29, _path30, _path31, _path32;
+
+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 SvgGames(props) {
+  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 120,
+    height: 120,
+    viewBox: "0 0 120 120"
+  }, props), _defs || (_defs = /*#__PURE__*/React__namespace.createElement("defs", null, /*#__PURE__*/React__namespace.createElement("style", null, ".games_svg__c{fill:#222c3f}.games_svg__d{fill:#1d1e28}.games_svg__e{fill:#4c6284}.games_svg__f{fill:#364760}.games_svg__g{fill:#00c1bc}.games_svg__h{fill:#0ff}.games_svg__i{fill:#94333a}.games_svg__j{fill:#b24352}"))), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M40.343 9.126s-11.546 2.309-23.349 18.73S-2.634 64.932 5.063 70.449s21.168-3.592 25.273-11.033a9.87 9.87 0 007.954 6.414c6.158.77 12.572-2.95 12.572-2.95l5.389 2.18s-1.54 12.7 11.161 13.471l5.26.256s1.924-.256 1.539 3.977-.77 23.606 11.674 26.685 18.6-17.191 21.681-26.813 18.474-40.026-1.154-48.75c0 0-6.286-2.822-11.675-2.181s-7.569 3.079-10.648 2.053-17.19-6.8-17.19-6.8a4.408 4.408 0 01-2.823-3.592c-.385-2.822-1.026-5.131-4.618-7.44S46.629 8.1 40.343 9.126z",
+    opacity: 0.3
+  })), _path2 || (_path2 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M40.343 4.126s-11.546 2.309-23.349 18.73S-2.634 59.932 5.063 65.449s21.168-3.592 25.273-11.033a9.87 9.87 0 007.954 6.414c6.158.77 12.572-2.95 12.572-2.95l5.389 2.18s-1.54 12.7 11.161 13.471l5.26.256s1.924-.256 1.539 3.977-.77 23.606 11.674 26.685 18.6-17.191 21.681-26.813 18.474-40.026-1.154-48.75c0 0-6.286-2.822-11.675-2.181s-7.569 3.079-10.648 2.053-17.19-6.8-17.19-6.8a4.408 4.408 0 01-2.823-3.592c-.385-2.822-1.026-5.131-4.618-7.44S46.629 3.1 40.343 4.126z",
+    fill: "#333e59"
+  })), _path3 || (_path3 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__c",
+    d: "M78.701 65.004a12.687 12.687 0 01-4.109 2.112c-6.158 1.925-12.444 0-15.266-2.822s-3.849-8.595-3.849-8.595-4.1-1.925-5.773-2.566-2.053-.128-2.053-.128a20.849 20.849 0 01-9.75 1.026c-5.9-.642-6.286-2.694-8.724-4.875s-2.565-.642-3.848 2.694-6.8 9.622-10.52 12.572a15.573 15.573 0 01-5.123 2.672c7.614.643 17.279-6.576 20.646-12.678a9.87 9.87 0 007.954 6.414c6.158.77 12.572-2.95 12.572-2.95l5.389 2.18s-1.54 12.7 11.161 13.471l5.26.256s1.924-.256 1.539 3.977a47.232 47.232 0 00.559 11.556 1.708 1.708 0 00.467-1.421c-.256-2.052 1.155-8.082.9-8.98a23.113 23.113 0 01.129-7.826 48.835 48.835 0 012.954-5.835c.309-.548.047-.691-.515-.254zM66.501 21.787a4.4 4.4 0 01-2.423-3.421c-.385-2.822-1.026-5.131-4.618-7.44a9.952 9.952 0 011.668 4.361c.123 2.13-.227 4.138 5.373 6.5z"
+  })), _path4 || (_path4 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__d",
+    d: "M23.591 21.75s-.216 13.157 15.317 12.765c16.878-.425 15.034-13.9 15.034-13.9-.283-4.4-4.255-11.488-15.176-11.488-12.907.001-15.175 9.503-15.175 12.623z"
+  })), _path5 || (_path5 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__e",
+    d: "M22.801 20.175s-.215 13.157 15.318 12.765c16.878-.425 15.034-13.9 15.034-13.9-.284-4.4-4.255-11.489-15.176-11.489-12.905.001-15.176 9.504-15.176 12.624z"
+  })), _path6 || (_path6 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__d",
+    d: "M78.328 45.692s-.233 14.229 16.567 13.806c18.254-.461 16.26-15.034 16.26-15.034-.307-4.755-4.6-12.425-16.414-12.425-13.96 0-16.413 10.278-16.413 13.653z"
+  })), _path7 || (_path7 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__e",
+    d: "M77.54 44.117s-.233 14.229 16.567 13.8c18.255-.46 16.26-15.033 16.26-15.033-.306-4.755-4.6-12.425-16.413-12.425-13.96.008-16.414 10.283-16.414 13.658z"
+  })), _path8 || (_path8 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__d",
+    d: "M29.173 43.455s-.162 9.88 11.5 9.586c12.676-.32 11.291-10.438 11.291-10.438-.213-3.3-3.2-8.628-11.4-8.628-9.687 0-11.391 7.136-11.391 9.48z"
+  })), _path9 || (_path9 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__e",
+    d: "M28.385 42.667s-.161 9.88 11.5 9.586c12.675-.319 11.29-10.438 11.29-10.438-.213-3.3-3.2-8.628-11.4-8.628-9.686 0-11.39 7.137-11.39 9.48z"
+  })), _path10 || (_path10 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__f",
+    d: "M29.627 20.993s-.13 7.933 9.237 7.7c10.177-.256 9.066-8.381 9.066-8.381-.172-2.652-2.566-6.928-9.152-6.928-7.783-.003-9.151 5.727-9.151 7.609z"
+  })), _path11 || (_path11 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__g",
+    d: "M28.839 20.205s-.13 7.934 9.237 7.7c10.178-.257 9.066-8.382 9.066-8.382-.171-2.651-2.566-6.928-9.151-6.928-7.784-.002-9.152 5.729-9.152 7.61z"
+  })), _path12 || (_path12 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__h",
+    d: "M28.839 18.63s-.13 7.934 9.237 7.7c10.178-.256 9.066-8.381 9.066-8.381-.171-2.651-2.566-6.928-9.151-6.928-7.784-.003-9.152 5.727-9.152 7.609z"
+  })), _path13 || (_path13 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__f",
+    d: "M83.851 41.717s-.053 3.234 3.766 3.138c4.149-.1 3.7-3.417 3.7-3.417-.07-1.081-1.046-2.824-3.731-2.824-3.178 0-3.735 2.336-3.735 3.103zM95.401 39.237s-.053 3.234 3.766 3.138c4.149-.1 3.7-3.417 3.7-3.417-.07-1.081-1.046-2.825-3.731-2.825-3.182 0-3.735 2.334-3.735 3.104zM86.16 51.039s-.053 3.235 3.766 3.139c4.149-.1 3.7-3.418 3.7-3.418-.07-1.081-1.046-2.824-3.731-2.824-3.177 0-3.735 2.336-3.735 3.103zM97.701 48.559s-.053 3.235 3.766 3.138c4.149-.1 3.7-3.417 3.7-3.417-.07-1.081-1.046-2.824-3.731-2.824-3.172 0-3.735 2.336-3.735 3.103z"
+  })), _path14 || (_path14 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__g",
+    d: "M83.063 40.929s-.053 3.235 3.766 3.139c4.149-.1 3.7-3.418 3.7-3.418-.07-1.08-1.046-2.824-3.731-2.824-3.177 0-3.735 2.341-3.735 3.103z"
+  })), _path15 || (_path15 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__i",
+    d: "M94.609 38.449s-.053 3.235 3.766 3.138c4.149-.1 3.7-3.417 3.7-3.417-.07-1.081-1.046-2.824-3.731-2.824-3.177 0-3.735 2.336-3.735 3.103zM85.372 50.252s-.053 3.234 3.766 3.138c4.15-.1 3.7-3.417 3.7-3.417-.069-1.081-1.046-2.825-3.731-2.825-3.177 0-3.735 2.337-3.735 3.104z"
+  })), _path16 || (_path16 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__g",
+    d: "M96.918 47.772s-.053 3.234 3.766 3.138c4.15-.105 3.7-3.417 3.7-3.417-.069-1.081-1.046-2.825-3.731-2.825-3.177-.001-3.735 2.336-3.735 3.104z"
+  })), _path17 || (_path17 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__h",
+    d: "M83.063 39.354s-.053 3.235 3.766 3.138c4.149-.1 3.7-3.417 3.7-3.417-.07-1.081-1.046-2.824-3.731-2.824-3.177 0-3.735 2.336-3.735 3.103z"
+  })), _path18 || (_path18 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__j",
+    d: "M94.609 36.874s-.053 3.234 3.766 3.138c4.149-.1 3.7-3.417 3.7-3.417-.07-1.081-1.046-2.824-3.731-2.824-3.177-.004-3.735 2.336-3.735 3.103zM85.372 48.677s-.053 3.234 3.766 3.138c4.15-.105 3.7-3.417 3.7-3.417-.069-1.081-1.046-2.825-3.731-2.825-3.177 0-3.735 2.337-3.735 3.104z"
+  })), _path19 || (_path19 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__h",
+    d: "M96.918 46.196s-.053 3.235 3.766 3.139c4.15-.1 3.7-3.418 3.7-3.418-.069-1.08-1.046-2.824-3.731-2.824-3.177 0-3.735 2.336-3.735 3.103z"
+  })), _path20 || (_path20 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__f",
+    d: "M33.561 45.013s-.1 5.317 6.764 5.159c7.452-.172 6.638-5.617 6.638-5.617-.126-1.777-1.879-4.643-6.7-4.643-5.7 0-6.702 3.84-6.702 5.101z"
+  })), _path21 || (_path21 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__i",
+    d: "M32.774 43.438s-.1 5.317 6.763 5.158c7.452-.171 6.638-5.617 6.638-5.617-.125-1.776-1.879-4.642-6.7-4.642-5.7 0-6.701 3.84-6.701 5.101z"
+  })), _path22 || (_path22 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__i",
+    d: "M32.774 37.653h3.164v6.158h-3.164zM43.037 37.653h3.164v6.158h-3.164z"
+  })), _path23 || (_path23 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__j",
+    d: "M32.774 38.05s-.1 5.317 6.763 5.158c7.452-.172 6.638-5.617 6.638-5.617-.125-1.777-1.879-4.642-6.7-4.642-5.7 0-6.701 3.84-6.701 5.101z"
+  })), _path24 || (_path24 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__d",
+    d: "M58.321 56.441s-.162 10.23 11.507 9.925c12.68-.33 11.295-10.807 11.295-10.807-.213-3.419-3.2-8.933-11.4-8.933-9.698 0-11.402 7.389-11.402 9.815z"
+  })), _path25 || (_path25 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__e",
+    d: "M57.534 55.654s-.162 10.229 11.507 9.925c12.679-.331 11.294-10.812 11.294-10.812-.213-3.418-3.2-8.932-11.4-8.932-9.697.004-11.401 7.393-11.401 9.819z"
+  })), _path26 || (_path26 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__f",
+    d: "M62.711 57.999s-.1 5.5 6.765 5.341c7.455-.178 6.641-5.816 6.641-5.816-.126-1.839-1.88-4.806-6.7-4.806-5.704 0-6.706 3.976-6.706 5.281z"
+  })), _path27 || (_path27 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__i",
+    d: "M61.923 56.424s-.1 5.505 6.766 5.341c7.455-.178 6.64-5.816 6.64-5.816-.125-1.839-1.879-4.807-6.7-4.807-5.704 0-6.706 3.976-6.706 5.282z"
+  })), _path28 || (_path28 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__i",
+    d: "M61.923 50.434h3.166v6.376h-3.166zM72.19 50.434h3.166v6.376H72.19z"
+  })), _path29 || (_path29 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__j",
+    d: "M61.923 50.845s-.1 5.5 6.766 5.341c7.455-.178 6.64-5.815 6.64-5.815-.125-1.84-1.879-4.807-6.7-4.807-5.704.003-6.706 3.976-6.706 5.281z"
+  })), _path30 || (_path30 = /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M9.435 35.699a3.729 3.729 0 00-1.055 1.584q-1.251 2.565-2.357 5.2a61.534 61.534 0 00-2.4 6.644 19.817 19.817 0 00-1 6.1c.233 6.675 5.613 1.973 6.364-2.12a18.377 18.377 0 00.152-4.026c-.085-2.187-.276-4.374-.181-6.564a15.968 15.968 0 01.408-3.132 23.976 23.976 0 00.93-3.1c.032-.31-.04-.715-.346-.771a.584.584 0 00-.4.108c-.032.02-.074.045-.115.077z",
+    fill: "#3e4c66"
+  })), _path31 || (_path31 = /*#__PURE__*/React__namespace.createElement("path", {
+    className: "games_svg__c",
+    d: "M107.566 77.636c1.41-4.4 5.4-13.161 7.427-22.2-.614 1.027-1.081 2.167-1.685 3.183a49.754 49.754 0 01-3.721 5.123 34.8 34.8 0 00-4.023 5.976c-2.031 4.124-2.432 8.832-2.8 13.415l-.748 9.337a112.545 112.545 0 005.55-14.834z"
+  })), _path32 || (_path32 = /*#__PURE__*/React__namespace.createElement("path", {
+    fill: "none",
+    d: "M0 0h120v120H0z"
+  })));
+}
+
+module.exports = SvgGames;
+//# sourceMappingURL=games.svg.js.map

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

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

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

@@ -22,6 +22,7 @@ export declare const ICONS: {
     eye: JSX.Element;
     filter: JSX.Element;
     'for-you': JSX.Element;
+    games: JSX.Element;
     goals: JSX.Element;
     heart: JSX.Element;
     help: JSX.Element;

package/dist/components/Icon/icons.js

@@ -48,6 +48,7 @@ var facebook = require('../../assets/icons/facebook.svg.js');
 var filter = require('../../assets/icons/filter.svg.js');
 var flag = require('../../assets/icons/flag.svg.js');
 var forYou = require('../../assets/icons/for-you.svg.js');
+var games = require('../../assets/icons/games.svg.js');
 var gift = require('../../assets/icons/gift.svg.js');
 var goals = require('../../assets/icons/goals.svg.js');
 var heart = require('../../assets/icons/heart.svg.js');
@@ -152,6 +153,7 @@ var ICONS = {
     'eye': React__default['default'].createElement(eye, null),
     'filter': React__default['default'].createElement(filter, null),
     'for-you': React__default['default'].createElement(forYou, null),
+    'games': React__default['default'].createElement(games, null),
     'goals': React__default['default'].createElement(goals, null),
     'heart': React__default['default'].createElement(heart, null),
     'help': React__default['default'].createElement(help, 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.0",
+  "version": "0.4.1",
   "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>;