nzk-react-components 0.2.19-9 → 0.3.0

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

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

package/dist/components/Button/utils.js

@@ -2,13 +2,13 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var polished_esm = require('../../node_modules/polished/dist/polished.esm.js');
+var polished = require('polished');
 
 var getTextColor = function (props) {
     if (props.color) {
         return props.color;
     }
-    if (polished_esm.getLuminance(props.backgroundColor) <= 0.5)
+    if (polished.getLuminance(props.backgroundColor) <= 0.5)
         return '#fff';
     return '#000';
 };

package/dist/components/DrawingTool/DrawingTool.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var React = require('react');
-var polished_esm = require('../../node_modules/polished/dist/polished.esm.js');
-var moveable_esm = require('../../node_modules/react-moveable/dist/moveable.esm.js');
-var moveableHelper_esm = require('../../node_modules/moveable-helper/dist/moveable-helper.esm.js');
-var index_es = require('../../node_modules/react-tooltip/dist/index.es.js');
+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');
@@ -23,6 +23,9 @@ 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;
@@ -33,7 +36,7 @@ var Drawing = function (props) {
     var imageToPlaceContainerRef = React.useRef(null);
     var moveableRef = React.useRef(null);
     var helper = React.useState(function () {
-        return new moveableHelper_esm();
+        return new MoveableHelper__default['default']();
     })[0];
     var _c = useElementSize(containerRef), containerWidth = _c.width, containerHeight = _c.height;
     var debouncedContainerWidth = useDebounce(containerWidth, 1000);
@@ -115,7 +118,7 @@ var Drawing = function (props) {
         setImageToCut(image);
         setToolMode("CUT");
     };
-    var strokeBrushColour = polished_esm.getLuminance(currentColour.hex) > 0.05 ? polished_esm.darken(0.15, currentColour.hex) : polished_esm.lighten(0.1, currentColour.hex);
+    var strokeBrushColour = polished.getLuminance(currentColour.hex) > 0.05 ? polished.darken(0.15, currentColour.hex) : polished.lighten(0.1, currentColour.hex);
     var deselectedButtonColourProps = {
         theme: 'white'
     };
@@ -200,7 +203,7 @@ var Drawing = function (props) {
     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(index_es, { effect: "solid", delayShow: 750, multiline: true }),
+            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 },
@@ -214,26 +217,26 @@ var Drawing = function (props) {
                     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_es6.__assign({ height: buttonSize, round: true }, eraserBrushColourProps, { onClick: function () { return setBrushType('eraser'); } }),
+                    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_es6.__assign({ "data-tip": "Fill brush", height: buttonSize, round: true }, fillBrushColourProps, { onClick: function () { return setBrushType('fill'); } }),
+                    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_es6.__assign({ "data-tip": "Line brush", height: buttonSize, round: true }, lineBrushColourProps, { onClick: function () { return setBrushType('line'); } }),
+                    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_es6.__assign({ height: buttonSize, round: true }, smallLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.small); } }),
+                    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_es6.__assign({ height: buttonSize, round: true }, mediumLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.medium); } }),
+                    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_es6.__assign({ height: buttonSize, round: true }, largeLineColourProps, { onClick: function () { return setBrushSize(DrawingToolProvider.BrushSize.large); } }),
+                    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_es6.__assign(tslib_es6.__assign({}, sketchStyles), { zIndex: '101' }) },
+                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_esm['default'], { ref: moveableRef, target: imageToPlaceContainerRef, ables: [index], props: {
+                    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)); }))),

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

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

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

@@ -2,8 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
-var styledComponents_browser_esm = require('../../node_modules/styled-components/dist/styled-components.browser.esm.js');
+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')
@@ -15,23 +19,23 @@ var getToolbarHeight = function (props) {
         return '100%';
     return props.buttonSize + 10 + "px";
 };
-var Container = styledComponents_browser_esm['default'].div(templateObject_1 || (templateObject_1 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_2 || (templateObject_2 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_3 || (templateObject_3 = tslib_es6.__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; });
-styledComponents_browser_esm['default'].div(templateObject_4 || (templateObject_4 = tslib_es6.__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; });
-styledComponents_browser_esm['default'].div(templateObject_5 || (templateObject_5 = tslib_es6.__makeTemplateObject(["\n  overflow: hidden;\n"], ["\n  overflow: hidden;\n"])));
-var LeftToolbarContainer = styledComponents_browser_esm['default'].div(templateObject_6 || (templateObject_6 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_7 || (templateObject_7 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_8 || (templateObject_8 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_9 || (templateObject_9 = tslib_es6.__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
+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 = styledComponents_browser_esm['default'].div(templateObject_10 || (templateObject_10 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_11 || (templateObject_11 = tslib_es6.__makeTemplateObject(["\n  position: relative;\n  margin-right: 20px;\n"], ["\n  position: relative;\n  margin-right: 20px;\n"])));
-var ModalOverlay = styledComponents_browser_esm['default'].div(templateObject_12 || (templateObject_12 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_13 || (templateObject_13 = tslib_es6.__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 = styledComponents_browser_esm['default'].img(templateObject_14 || (templateObject_14 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_15 || (templateObject_15 = tslib_es6.__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 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;

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

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

package/dist/components/DrawingTool/DrawingToolProvider.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var unstatedNext = require('../../node_modules/unstated-next/dist/unstated-next.mjs.js');
+var unstatedNext = require('unstated-next');
 var Sketch = require('./lib/Sketch.js');
 var SketchCut = require('./lib/SketchCut.js');
 

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

@@ -2,11 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var styledComponents_browser_esm = require('../../../../node_modules/styled-components/dist/styled-components.browser.esm.js');
+var tslib = require('tslib');
+var styled = require('styled-components');
 
-var Container = styledComponents_browser_esm['default'].div(templateObject_1 || (templateObject_1 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_2 || (templateObject_2 = tslib_es6.__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; });
+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;

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

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

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

@@ -1,8 +1,8 @@
 'use strict';
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var React = require('react');
-var index = require('../../../../node_modules/react-dropzone/dist/es/index.js');
+var reactDropzone = require('react-dropzone');
 var FileInput_styles = require('./FileInput.styles.js');
 var Button = require('../../../Button/Button.js');
 var Icon = require('../../../Icon/Icon.js');
@@ -12,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var FileInput = (function (props) {
-    var _a = index.useDropzone({
+    var _a = reactDropzone.useDropzone({
         accept: 'image/jpeg, image/png',
         maxFiles: 2
     }), acceptedFiles = _a.acceptedFiles, fileRejections = _a.fileRejections, getRootProps = _a.getRootProps, getInputProps = _a.getInputProps, isDragActive = _a.isDragActive;
@@ -50,11 +50,11 @@ var FileInput = (function (props) {
         if (props.dismiss)
             props.dismiss();
     };
-    return React__default['default'].createElement(FileInput_styles.Container, tslib_es6.__assign({}, getRootProps()),
+    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_es6.__assign({}, getInputProps())),
+        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,

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

@@ -2,13 +2,17 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var styledComponents_browser_esm = require('../../../../node_modules/styled-components/dist/styled-components.browser.esm.js');
+var tslib = require('tslib');
+var styled = require('styled-components');
 
-var Container = styledComponents_browser_esm['default'].div(templateObject_1 || (templateObject_1 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_2 || (templateObject_2 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_3 || (templateObject_3 = tslib_es6.__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 = styledComponents_browser_esm['default'].div(templateObject_4 || (templateObject_4 = tslib_es6.__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"])));
+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;

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

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

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

@@ -1,16 +1,17 @@
 'use strict';
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var React = require('react');
-var styledComponents_browser_esm = require('../../../../node_modules/styled-components/dist/styled-components.browser.esm.js');
+var styled = require('styled-components');
 var Icon = require('../../../Icon/Icon.js');
 var IconButton = require('../../../IconButton/IconButton.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Container = styledComponents_browser_esm['default'].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 36px;\n  color: white;\n  font-family: 'Rammetto One';\n  text-align: center;\n  @media (max-width: 1024px) {\n    font-size: 28px;\n  }\n  @media (max-width: 760px) {\n    font-size: 20px;\n  }\n  @media (max-width: 560px) {\n    > :nth-child(2) {\n      display: none;\n    } \n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 36px;\n  color: white;\n  font-family: 'Rammetto One';\n  text-align: center;\n  @media (max-width: 1024px) {\n    font-size: 28px;\n  }\n  @media (max-width: 760px) {\n    font-size: 20px;\n  }\n  @media (max-width: 560px) {\n    > :nth-child(2) {\n      display: none;\n    } \n  }\n"])), function (props) { return props.height; });
+var Container = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 36px;\n  color: white;\n  font-family: 'Rammetto One';\n  text-align: center;\n  @media (max-width: 1024px) {\n    font-size: 28px;\n  }\n  @media (max-width: 760px) {\n    font-size: 20px;\n  }\n  @media (max-width: 560px) {\n    > :nth-child(2) {\n      display: none;\n    } \n  }\n"], ["\n  position: relative;\n  width: 100%;\n  height: ", "px;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  font-size: 36px;\n  color: white;\n  font-family: 'Rammetto One';\n  text-align: center;\n  @media (max-width: 1024px) {\n    font-size: 28px;\n  }\n  @media (max-width: 760px) {\n    font-size: 20px;\n  }\n  @media (max-width: 560px) {\n    > :nth-child(2) {\n      display: none;\n    } \n  }\n"])), function (props) { return props.height; });
 var getButtonSizeForHeight = function (height) {
     if (height <= 50)
         return 'x-small';

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

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

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

@@ -1,7 +1,7 @@
 'use strict';
 
 var React = require('react');
-var index_es = require('../../../../node_modules/react-tooltip/dist/index.es.js');
+var ReactTooltip = require('react-tooltip');
 var Icon = require('../../../Icon/Icon.js');
 var OpacityToggle_styles = require('./OpacityToggle.styles.js');
 var DrawingToolProvider = require('../../DrawingToolProvider.js');
@@ -9,6 +9,7 @@ var DrawingToolProvider = require('../../DrawingToolProvider.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactTooltip__default = /*#__PURE__*/_interopDefaultLegacy(ReactTooltip);
 
 var OpacityToggle = (function (props) {
     var _a = DrawingToolProvider.useDrawingTool(), brushOpacity = _a.brushOpacity, setBruchOpacity = _a.setBruchOpacity, currentColour = _a.currentColour;
@@ -16,7 +17,7 @@ var OpacityToggle = (function (props) {
         setBruchOpacity(brushOpacity === 1 ? 0.5 : 1);
     };
     return React__default['default'].createElement("div", null,
-        React__default['default'].createElement(index_es, { effect: "solid", delayShow: 750, multiline: true }),
+        React__default['default'].createElement(ReactTooltip__default['default'], { effect: "solid", delayShow: 750, multiline: true }),
         React__default['default'].createElement(OpacityToggle_styles.Container, { "data-tip": brushOpacity === 0.5
                 ? 'Switch OFF color mixer'
                 : 'Switch ON color mixer', orientation: props.orientation, buttonSize: Math.floor(props.buttonSize * .8), onClick: toggleOpacity },

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

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

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

@@ -2,11 +2,15 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var tslib_es6 = require('../../../../node_modules/tslib/tslib.es6.js');
-var styledComponents_browser_esm = require('../../../../node_modules/styled-components/dist/styled-components.browser.esm.js');
+var tslib = require('tslib');
+var styled = require('styled-components');
 
-var Container = styledComponents_browser_esm['default'].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  custor: pointer;\n  background-color: #ebebeb;\n  border: 6px solid #d9d9d9;\n  box-shadow: 0px 4px 0px rgba(0,0,0, .5);\n  border-radius: ", "px;\n  width: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  > div {\n    transform: scale(1.2);\n    &:first-child {\n      position: relative;\n      top: ", ";\n      left: ", ";\n    }\n  }\n"], ["\n  custor: pointer;\n  background-color: #ebebeb;\n  border: 6px solid #d9d9d9;\n  box-shadow: 0px 4px 0px rgba(0,0,0, .5);\n  border-radius: ", "px;\n  width: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  > div {\n    transform: scale(1.2);\n    &:first-child {\n      position: relative;\n      top: ", ";\n      left: ", ";\n    }\n  }\n"])), function (props) { return props.buttonSize; }, function (props) { return props.orientation === 'LANDSCAPE' ? props.buttonSize + props.buttonSize * 0.2 + "px" : 'auto'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '4px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '0px' : '4px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '4px' : '0px'; }, function (props) { return props.orientation === 'PORTRAIT' ? '4px' : '0px'; });
-var OpacityButton = styledComponents_browser_esm['default'].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  cursor: pointer;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  cursor: pointer;\n"])), function (props) { return props.buttonSize; }, function (props) { return props.buttonSize; });
+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  custor: pointer;\n  background-color: #ebebeb;\n  border: 6px solid #d9d9d9;\n  box-shadow: 0px 4px 0px rgba(0,0,0, .5);\n  border-radius: ", "px;\n  width: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  > div {\n    transform: scale(1.2);\n    &:first-child {\n      position: relative;\n      top: ", ";\n      left: ", ";\n    }\n  }\n"], ["\n  custor: pointer;\n  background-color: #ebebeb;\n  border: 6px solid #d9d9d9;\n  box-shadow: 0px 4px 0px rgba(0,0,0, .5);\n  border-radius: ", "px;\n  width: ", ";\n  padding-bottom: ", ";\n  padding-right: ", ";\n  display: flex;\n  flex-shrink: none;\n  flex-wrap: ", ";\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  > div {\n    transform: scale(1.2);\n    &:first-child {\n      position: relative;\n      top: ", ";\n      left: ", ";\n    }\n  }\n"])), function (props) { return props.buttonSize; }, function (props) { return props.orientation === 'LANDSCAPE' ? props.buttonSize + props.buttonSize * 0.2 + "px" : 'auto'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '4px' : '0px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '0px' : '4px'; }, function (props) { return props.orientation === 'LANDSCAPE' ? 'wrap' : 'no-wrap'; }, function (props) { return props.orientation === 'LANDSCAPE' ? '4px' : '0px'; }, function (props) { return props.orientation === 'PORTRAIT' ? '4px' : '0px'; });
+var OpacityButton = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  width: ", "px;\n  height: ", "px;\n  cursor: pointer;\n"], ["\n  width: ", "px;\n  height: ", "px;\n  cursor: pointer;\n"])), function (props) { return props.buttonSize; }, function (props) { return props.buttonSize; });
 var templateObject_1, templateObject_2;
 
 exports.Container = Container;

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

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

package/dist/components/DrawingTool/lib/Sketch.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var SketchLayer = require('./SketchLayer.js');
 var createInteractionSurface = require('./createInteractionSurface.js');
 var SketchModel = require('./SketchModel.js');
@@ -278,7 +278,7 @@ var Sketch = (function () {
     Sketch.prototype.drawTransparentFillFinal = function (stroke) {
         this.cacheLayer.clear();
         this.cacheLayer.ctx.globalCompositeOperation = "source-over";
-        setDrawingStyle(tslib_es6.__assign(tslib_es6.__assign({}, stroke.style), { opacity: 1 }), this.cacheLayer.ctx);
+        setDrawingStyle(tslib.__assign(tslib.__assign({}, stroke.style), { opacity: 1 }), this.cacheLayer.ctx);
         trace(stroke, this.cacheLayer.ctx);
         this.cacheLayer.ctx.closePath();
         this.cacheLayer.ctx.stroke();
@@ -303,7 +303,7 @@ var Sketch = (function () {
     Sketch.prototype.drawFillAndStroke = function (stroke) {
         this.bufferLayer.clear();
         trace(stroke, this.bufferLayer.ctx);
-        setDrawingStyle(tslib_es6.__assign(tslib_es6.__assign({}, stroke.style), { opacity: 1 }), this.bufferLayer.ctx);
+        setDrawingStyle(tslib.__assign(tslib.__assign({}, stroke.style), { opacity: 1 }), this.bufferLayer.ctx);
         this.bufferLayer.ctx.globalAlpha = stroke.style.opacity;
         if (this.model.fill) {
             this.bufferLayer.ctx.closePath();

package/dist/components/DrawingTool/lib/SketchCut.js

@@ -1,13 +1,13 @@
 'use strict';
 
-var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var Sketch = require('./Sketch.js');
 var SketchCutModel = require('./SketchCutModel.js');
 var SketchLayer = require('./SketchLayer.js');
 var trace = require('./trace.js');
 
 var SketchCut = (function (_super) {
-    tslib_es6.__extends(SketchCut, _super);
+    tslib.__extends(SketchCut, _super);
     function SketchCut(props) {
         var _this = _super.call(this, props) || this;
         _this.model = new SketchCutModel({

package/dist/components/DrawingTool/lib/SketchCutModel.js

@@ -1,10 +1,10 @@
 'use strict';
 
-var tslib_es6 = require('../../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var SketchModel = require('./SketchModel.js');
 
 var SketchCutModel = (function (_super) {
-    tslib_es6.__extends(SketchCutModel, _super);
+    tslib.__extends(SketchCutModel, _super);
     function SketchCutModel() {
         var _this = _super !== null && _super.apply(this, arguments) || this;
         _this.colour = [252, 234, 63];

package/dist/components/Icon/Icon.js

@@ -1,17 +1,18 @@
 'use strict';
 
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var React = require('react');
-var styledComponents_browser_esm = require('../../node_modules/styled-components/dist/styled-components.browser.esm.js');
+var styled = require('styled-components');
 var icons = require('./icons.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var SvgWrapper = styledComponents_browser_esm['default'].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  display: inline-flex;\n\n  svg {\n    width: 100% !important;\n    height: 100% !important;\n  }\n"], ["\n  height: ", ";\n  width: ", ";\n  display: inline-flex;\n\n  svg {\n    width: 100% !important;\n    height: 100% !important;\n  }\n"])), function (props) { return props.size; }, function (props) { return props.size; });
+var SvgWrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  height: ", ";\n  width: ", ";\n  display: inline-flex;\n\n  svg {\n    width: 100% !important;\n    height: 100% !important;\n  }\n"], ["\n  height: ", ";\n  width: ", ";\n  display: inline-flex;\n\n  svg {\n    width: 100% !important;\n    height: 100% !important;\n  }\n"])), function (props) { return props.size; }, function (props) { return props.size; });
 var Icon = function (props) {
-    return React__default['default'].createElement(SvgWrapper, tslib_es6.__assign({}, props), React__default['default'].cloneElement(icons.ICONS[props.name], props));
+    return React__default['default'].createElement(SvgWrapper, tslib.__assign({}, props), React__default['default'].cloneElement(icons.ICONS[props.name], props));
 };
 Icon.defaultProps = {
     size: null

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

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

package/dist/components/IconButton/IconButton.js

@@ -1,21 +1,22 @@
 'use strict';
 
-var tslib_es6 = require('../../node_modules/tslib/tslib.es6.js');
+var tslib = require('tslib');
 var React = require('react');
-var styledComponents_browser_esm = require('../../node_modules/styled-components/dist/styled-components.browser.esm.js');
+var styled = require('styled-components');
 var Button = require('../Button/Button.js');
 var constants = require('../Button/constants.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
 
-var Wrapper = styledComponents_browser_esm['default'].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  display: flex;\n  > :first-child {\n    z-index: 2;\n  }\n  > :nth-child(2) {\n    margin-left: -", "px;\n    z-index: 1;\n  }\n"], ["\n  display: flex;\n  > :first-child {\n    z-index: 2;\n  }\n  > :nth-child(2) {\n    margin-left: -", "px;\n    z-index: 1;\n  }\n"])), function (props) { return props.overlap; });
+var Wrapper = styled__default['default'].div(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n  display: flex;\n  > :first-child {\n    z-index: 2;\n  }\n  > :nth-child(2) {\n    margin-left: -", "px;\n    z-index: 1;\n  }\n"], ["\n  display: flex;\n  > :first-child {\n    z-index: 2;\n  }\n  > :nth-child(2) {\n    margin-left: -", "px;\n    z-index: 1;\n  }\n"])), function (props) { return props.overlap; });
 var IconButton = (function (props) {
     var W = (props.size ? constants.SIZES[props.size] : props.height) || 0;
     return (React__default['default'].createElement(Wrapper, { overlap: 0.3 * W },
-        React__default['default'].createElement(Button, tslib_es6.__assign({}, props, { round: true }), props.icon),
-        React__default['default'].createElement(Button, tslib_es6.__assign({}, props))));
+        React__default['default'].createElement(Button, tslib.__assign({}, props, { round: true }), props.icon),
+        React__default['default'].createElement(Button, tslib.__assign({}, props))));
 });
 var templateObject_1;
 

package/dist/components/IconButton/IconButton.js.map

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