nzk-react-components 0.4.5 → 0.4.6-2

package/dist/icons/Video.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgVideo: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgVideo;

package/dist/icons/Whatsapp.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWhatsapp: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWhatsapp;

package/dist/icons/Writing.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWriting: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWriting;

package/dist/icons/WritingTypeAdventureStory.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypeAdventureStory: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypeAdventureStory;

package/dist/icons/WritingTypeBiography.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypeBiography: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypeBiography;

package/dist/icons/WritingTypeDiaryEntry.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypeDiaryEntry: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypeDiaryEntry;

package/dist/icons/WritingTypeFreeWrite.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypeFreeWrite: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypeFreeWrite;

package/dist/icons/WritingTypeInstructions.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypeInstructions: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypeInstructions;

package/dist/icons/WritingTypeLetterWriting.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypeLetterWriting: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypeLetterWriting;

package/dist/icons/WritingTypeNewspaperArticle.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypeNewspaperArticle: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypeNewspaperArticle;

package/dist/icons/WritingTypePersuasiveWriting.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypePersuasiveWriting: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypePersuasiveWriting;

package/dist/icons/WritingTypePlayscript.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypePlayscript: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypePlayscript;

package/dist/icons/WritingTypePoem.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypePoem: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypePoem;

package/dist/icons/WritingTypeReport.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgWritingTypeReport: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgWritingTypeReport;

package/dist/icons/ZooPoint.d.ts

@@ -0,0 +1,3 @@
+import { SVGProps } from "react";
+declare const SvgZooPoint: (props: SVGProps<SVGSVGElement>) => JSX.Element;
+export default SvgZooPoint;

package/dist/icons/index.d.ts

@@ -0,0 +1,130 @@
+export { default as NzkPurple } from "./NzkPurple";
+export { default as Nzk } from "./Nzk";
+export { default as AboutUs } from "./AboutUs";
+export { default as Activities } from "./Activities";
+export { default as Archive } from "./Archive";
+export { default as ArrowLeft } from "./ArrowLeft";
+export { default as ArrowRight } from "./ArrowRight";
+export { default as Awards } from "./Awards";
+export { default as Bear } from "./Bear";
+export { default as CardSkills } from "./CardSkills";
+export { default as Challenges } from "./Challenges";
+export { default as Chart } from "./Chart";
+export { default as Checkmark } from "./Checkmark";
+export { default as CloseCopy } from "./CloseCopy";
+export { default as Close } from "./Close";
+export { default as Collect } from "./Collect";
+export { default as Comment } from "./Comment";
+export { default as Compass } from "./Compass";
+export { default as Controller } from "./Controller";
+export { default as Create } from "./Create";
+export { default as Customise } from "./Customise";
+export { default as Download } from "./Download";
+export { default as Draft } from "./Draft";
+export { default as DrawingTask } from "./DrawingTask";
+export { default as DrawingToolArrowDown } from "./DrawingToolArrowDown";
+export { default as DrawingToolArrowLeft } from "./DrawingToolArrowLeft";
+export { default as DrawingToolArrowRight } from "./DrawingToolArrowRight";
+export { default as DrawingToolArrowUp } from "./DrawingToolArrowUp";
+export { default as DrawingToolCamera } from "./DrawingToolCamera";
+export { default as DrawingToolColorMixer } from "./DrawingToolColorMixer";
+export { default as DrawingToolEraser } from "./DrawingToolEraser";
+export { default as DrawingToolFillBrush } from "./DrawingToolFillBrush";
+export { default as DrawingToolLargeLine } from "./DrawingToolLargeLine";
+export { default as DrawingToolLineBrush } from "./DrawingToolLineBrush";
+export { default as DrawingToolMediumLine } from "./DrawingToolMediumLine";
+export { default as DrawingToolOpacityFull } from "./DrawingToolOpacityFull";
+export { default as DrawingToolOpacityHalf } from "./DrawingToolOpacityHalf";
+export { default as DrawingToolRedo } from "./DrawingToolRedo";
+export { default as DrawingToolSmallLine } from "./DrawingToolSmallLine";
+export { default as DrawingToolStickers } from "./DrawingToolStickers";
+export { default as DrawingToolUndo } from "./DrawingToolUndo";
+export { default as Egg } from "./Egg";
+export { default as Enclosure } from "./Enclosure";
+export { default as ExclamationGrey } from "./ExclamationGrey";
+export { default as Exclamation } from "./Exclamation";
+export { default as Eye } from "./Eye";
+export { default as Facebook } from "./Facebook";
+export { default as Filter } from "./Filter";
+export { default as Flag } from "./Flag";
+export { default as Flamingo } from "./Flamingo";
+export { default as ForYou } from "./ForYou";
+export { default as Games } from "./Games";
+export { default as Gift } from "./Gift";
+export { default as Giraffe } from "./Giraffe";
+export { default as Goals } from "./Goals";
+export { default as Heart } from "./Heart";
+export { default as Help } from "./Help";
+export { default as IdeaCreator } from "./IdeaCreator";
+export { default as Info } from "./Info";
+export { default as Instagram } from "./Instagram";
+export { default as Items } from "./Items";
+export { default as Layers } from "./Layers";
+export { default as Lessons } from "./Lessons";
+export { default as Link } from "./Link";
+export { default as List } from "./List";
+export { default as Lock } from "./Lock";
+export { default as Logout } from "./Logout";
+export { default as Megaphone } from "./Megaphone";
+export { default as Menu } from "./Menu";
+export { default as Message } from "./Message";
+export { default as Minus } from "./Minus";
+export { default as More } from "./More";
+export { default as MyHistory } from "./MyHistory";
+export { default as MyZoo } from "./MyZoo";
+export { default as New } from "./New";
+export { default as Notifications } from "./Notifications";
+export { default as NzktvBlue } from "./NzktvBlue";
+export { default as NzktvGreen } from "./NzktvGreen";
+export { default as OrbDisabled } from "./OrbDisabled";
+export { default as Orb } from "./Orb";
+export { default as Padlock } from "./Padlock";
+export { default as Pdf } from "./Pdf";
+export { default as Pencil } from "./Pencil";
+export { default as Pending } from "./Pending";
+export { default as Penguin } from "./Penguin";
+export { default as PlayVideo } from "./PlayVideo";
+export { default as Play } from "./Play";
+export { default as Plus } from "./Plus";
+export { default as Private } from "./Private";
+export { default as Progress } from "./Progress";
+export { default as Projects } from "./Projects";
+export { default as Refresh } from "./Refresh";
+export { default as Rewards } from "./Rewards";
+export { default as Sealion } from "./Sealion";
+export { default as Search } from "./Search";
+export { default as Send } from "./Send";
+export { default as Settings } from "./Settings";
+export { default as Sharing } from "./Sharing";
+export { default as Shop } from "./Shop";
+export { default as SoundOff } from "./SoundOff";
+export { default as SoundOn } from "./SoundOn";
+export { default as StarWriting } from "./StarWriting";
+export { default as Task } from "./Task";
+export { default as TextToSpeech } from "./TextToSpeech";
+export { default as Tick } from "./Tick";
+export { default as Torch } from "./Torch";
+export { default as Transfer } from "./Transfer";
+export { default as TrashCopy } from "./TrashCopy";
+export { default as TrashWhite } from "./TrashWhite";
+export { default as Trash } from "./Trash";
+export { default as Trophy } from "./Trophy";
+export { default as Twitter } from "./Twitter";
+export { default as Upload } from "./Upload";
+export { default as User } from "./User";
+export { default as Users } from "./Users";
+export { default as Video } from "./Video";
+export { default as Whatsapp } from "./Whatsapp";
+export { default as WritingTypeAdventureStory } from "./WritingTypeAdventureStory";
+export { default as WritingTypeBiography } from "./WritingTypeBiography";
+export { default as WritingTypeDiaryEntry } from "./WritingTypeDiaryEntry";
+export { default as WritingTypeFreeWrite } from "./WritingTypeFreeWrite";
+export { default as WritingTypeInstructions } from "./WritingTypeInstructions";
+export { default as WritingTypeLetterWriting } from "./WritingTypeLetterWriting";
+export { default as WritingTypeNewspaperArticle } from "./WritingTypeNewspaperArticle";
+export { default as WritingTypePersuasiveWriting } from "./WritingTypePersuasiveWriting";
+export { default as WritingTypePlayscript } from "./WritingTypePlayscript";
+export { default as WritingTypePoem } from "./WritingTypePoem";
+export { default as WritingTypeReport } from "./WritingTypeReport";
+export { default as Writing } from "./Writing";
+export { default as ZooPoint } from "./ZooPoint";

package/dist/index.d.ts

@@ -14,4 +14,5 @@ import useInterval from './hooks/useInterval';
 import useEventListener from './hooks/useEventListener';
 import useElementSize from './hooks/useElementSize';
 import useDebounce from './hooks/useDebounce';
+export * from './icons';
 export { Avatar, IconButton, Button, DatePicker, Icon, Input, Modal, ModalProvider, useModalState, useAsync, useMountState, useConfettis, useCloudinary, useInterval, useElementSize, useEventListener, useDebounce };

package/package.json

@@ -1,12 +1,14 @@
 {
   "name": "nzk-react-components",
-  "version": "0.4.5",
+  "version": "0.4.6-2",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
   "files": [
     "dist"
   ],
+  "sideEffects": false,
   "types": "dist/index.d.ts",
+  "module": "dist/esm/index.js",
   "devDependencies": {
     "@babel/core": "^7.14.8",
     "@rollup/plugin-commonjs": "^20.0.0",
@@ -16,6 +18,7 @@
     "@storybook/addon-essentials": "^6.3.6",
     "@storybook/addon-links": "^6.3.6",
     "@storybook/react": "^6.3.6",
+    "@svgr/cli": "^6.3.0",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@types/canvas-confetti": "^1.4.2",
@@ -69,8 +72,9 @@
   "scripts": {
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "build": "rollup -c",
+    "build": "rm -rf dist && rollup -c",
     "build:before": "rm -rf dist",
+    "svgr": "svgr --icon --typescript -d src src/assets",
     "deploy:storybook": "npx -p @storybook/storybook-deployer storybook-to-ghpages",
     "chromatic": "npx chromatic --project-token=b61bc9738a0c",
     "prepare": "husky install",

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>;