nzk-react-components 0.3.6 → 0.4.1

package/dist/components/Button/Button.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from 'react';
 export interface BaseProps {
     backgroundColor: string;
     height: number;
@@ -21,6 +21,7 @@ export interface ButtonProps extends BaseProps {
     children?: any;
     disabled?: boolean;
     onClick?: () => void;
+    ref?: ((instance: any | null) => void) | RefObject<any> | null;
 }
 declare const Button: (props: ButtonProps) => JSX.Element;
 export default Button;

package/dist/components/DatePicker/DatePicker.d.ts

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react';
+export interface DatePickerProps {
+    primary: string;
+    autoFocus?: boolean;
+    onChange?: (date: Date) => void;
+    defaultValue?: Date;
+    input?: ReactElement<{
+        onClick: any;
+        ref: any;
+        children: any;
+    }>;
+}
+declare const DatePicker: {
+    (props: DatePickerProps): JSX.Element;
+    defaultProps: {
+        primary: string;
+        autoFocus: boolean;
+        onChange: null;
+        range: boolean;
+        defaultValue: null;
+        input: null;
+    };
+};
+export default DatePicker;

package/dist/components/DatePicker/DatePicker.js

@@ -0,0 +1,64 @@
+'use strict';
+
+var tslib = require('tslib');
+var polished = require('polished');
+var React = require('react');
+var ReactDatePicker = require('react-datepicker');
+var styled = require('styled-components');
+var Button = require('../Button/Button.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var ReactDatePicker__default = /*#__PURE__*/_interopDefaultLegacy(ReactDatePicker);
+var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);
+
+var getColors = function (props) {
+    var primary = props.primary;
+    var lum = polished.getLuminance(primary);
+    var light = lum >= 0.5;
+    var secondary = light ? polished.darken(0.2, primary) : polished.lighten(0.2, primary);
+    return {
+        primary: primary,
+        secondary: secondary,
+        color: light ? '#000' : '#fff'
+    };
+};
+var Wrapper = styled__default['default'].div(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  ", "\n  .react-datepicker {\n    position: relative;\n    width: 300px;\n  }\n  .react-datepicker__navigation {\n    align-items: center;\n    background: none;\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 2px;\n    padding: 0;\n    border: none;\n    z-index: 1;\n    height: 32px;\n    width: 32px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation-icon::before {\n    border-color: var(--color);\n    border-style: solid;\n    border-width: 5px 5px 0 0;\n    content: \"\";\n    display: block;\n    height: 12px;\n    position: absolute;\n    top: 10px;\n    width: 10px;\n  }\n  .react-datepicker__navigation-icon--previous::before {\n    transform: rotate(225deg);\n    right: -7px;\n  }\n\n  .react-datepicker__navigation-icon--next::before {\n    transform: rotate(45deg);\n    left: -7px;\n  }\n  .react-datepicker__navigation--next {\n    right: 2px;\n  }\n  .react-datepicker__month-container {\n    text-align: center;\n    border-radius: 9px;\n    overflow: hidden;\n    box-shadow: 0 3px 9px 1px rgba(0,0,0,0.3);\n    margin-top: 8px;\n  }\n  .react-datepicker__current-month {\n    padding: 5px 0;\n    font-family: 'Rammetto One';\n    color: var(--color);\n    background: var(--primary);\n  }\n  .react-datepicker__day-names {\n    width: 100%;\n    display: flex;\n    font-weight: bold;\n    color: var(--primary);\n    background-color: var(--secondary);\n    > * { flex: 1; padding: 10px 0; }\n  }\n  .react-datepicker__day {\n    position: relative;\n    background-color: var(--primary);\n    color: var(--color);\n    transition: background-color 0.2s ease-in-out;\n    cursor: pointer;\n    :hover {\n      background-color: var(--secondary);\n      transition: background-color 0.2s ease-in-out;\n    }\n  }\n  .react-datepicker__day--selected {\n    background-color: var(--secondary);\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: var(--secondary);\n    transition: background-color 0.2s ease-in-out;\n  }\n  .react-datepicker__day--outside-month {\n    background-color: #ffffffff;\n    color: var(--primary);\n  }\n  .react-datepicker__week {\n    width: 100%;\n    display: flex;\n    > * { flex: 1; padding: 10px; }\n  }\n"], ["\n  ", "\n  .react-datepicker {\n    position: relative;\n    width: 300px;\n  }\n  .react-datepicker__navigation {\n    align-items: center;\n    background: none;\n    display: flex;\n    justify-content: center;\n    text-align: center;\n    cursor: pointer;\n    position: absolute;\n    top: 2px;\n    padding: 0;\n    border: none;\n    z-index: 1;\n    height: 32px;\n    width: 32px;\n    text-indent: -999em;\n    overflow: hidden;\n  }\n  .react-datepicker__navigation-icon::before {\n    border-color: var(--color);\n    border-style: solid;\n    border-width: 5px 5px 0 0;\n    content: \"\";\n    display: block;\n    height: 12px;\n    position: absolute;\n    top: 10px;\n    width: 10px;\n  }\n  .react-datepicker__navigation-icon--previous::before {\n    transform: rotate(225deg);\n    right: -7px;\n  }\n\n  .react-datepicker__navigation-icon--next::before {\n    transform: rotate(45deg);\n    left: -7px;\n  }\n  .react-datepicker__navigation--next {\n    right: 2px;\n  }\n  .react-datepicker__month-container {\n    text-align: center;\n    border-radius: 9px;\n    overflow: hidden;\n    box-shadow: 0 3px 9px 1px rgba(0,0,0,0.3);\n    margin-top: 8px;\n  }\n  .react-datepicker__current-month {\n    padding: 5px 0;\n    font-family: 'Rammetto One';\n    color: var(--color);\n    background: var(--primary);\n  }\n  .react-datepicker__day-names {\n    width: 100%;\n    display: flex;\n    font-weight: bold;\n    color: var(--primary);\n    background-color: var(--secondary);\n    > * { flex: 1; padding: 10px 0; }\n  }\n  .react-datepicker__day {\n    position: relative;\n    background-color: var(--primary);\n    color: var(--color);\n    transition: background-color 0.2s ease-in-out;\n    cursor: pointer;\n    :hover {\n      background-color: var(--secondary);\n      transition: background-color 0.2s ease-in-out;\n    }\n  }\n  .react-datepicker__day--selected {\n    background-color: var(--secondary);\n  }\n  .react-datepicker__day--keyboard-selected {\n    background-color: var(--secondary);\n    transition: background-color 0.2s ease-in-out;\n  }\n  .react-datepicker__day--outside-month {\n    background-color: #ffffffff;\n    color: var(--primary);\n  }\n  .react-datepicker__week {\n    width: 100%;\n    display: flex;\n    > * { flex: 1; padding: 10px; }\n  }\n"])), function (props) {
+    var colors = getColors(props);
+    return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n      --primary: ", ";\n      --secondary: ", ";\n      --color: ", ";\n    "], ["\n      --primary: ", ";\n      --secondary: ", ";\n      --color: ", ";\n    "])), colors.primary, colors.secondary, colors.color);
+});
+var DatePicker = function (props) {
+    var datePickerRef = React.useRef(null);
+    var _a = React.useState(props.defaultValue || new Date()), startDate = _a[0], setStartDate = _a[1];
+    React.useEffect(function () {
+        if (props.autoFocus && datePickerRef.current && datePickerRef.current.input) {
+            datePickerRef.current.input.focus();
+        }
+    }, []);
+    var ButtonInput = React.forwardRef(function (_a, ref) {
+        var value = _a.value, onClick = _a.onClick;
+        if (props.input)
+            return React__default['default'].cloneElement(props.input, { onClick: onClick, ref: ref, children: value });
+        return React__default['default'].createElement(Button, { onClick: onClick, ref: ref, theme: 'primary', size: 'small' }, value);
+    });
+    React.useEffect(function () {
+        if (props.onChange) {
+            props.onChange(startDate);
+        }
+    }, [startDate]);
+    return React__default['default'].createElement(Wrapper, { primary: props.primary },
+        React__default['default'].createElement(ReactDatePicker__default['default'], { ref: datePickerRef, dateFormat: "d MMMM yyyy", withPortal: true, selected: startDate, onChange: function (date) { return setStartDate(date); }, customInput: React__default['default'].createElement(ButtonInput, null) }));
+};
+DatePicker.defaultProps = {
+    primary: '#1EA7FD',
+    autoFocus: false,
+    onChange: null,
+    range: false,
+    defaultValue: null,
+    input: null,
+};
+var templateObject_1, templateObject_2;
+
+module.exports = DatePicker;
+//# sourceMappingURL=DatePicker.js.map

package/dist/components/DatePicker/DatePicker.js.map

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

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

@@ -0,0 +1,8 @@
+import { Story } from "@storybook/react";
+import { Meta } from "@storybook/react/types-6-0";
+import { DatePickerProps } from "./DatePicker";
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Primary: Story<DatePickerProps>;
+export declare const DefaultValue: Story<DatePickerProps>;
+export declare const CustomInput: Story<DatePickerProps>;

package/dist/components/DatePicker/index.d.ts

@@ -0,0 +1,2 @@
+import DatePicker from './DatePicker';
+export default DatePicker;

package/dist/components/DatePicker/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var DatePicker = require('./DatePicker.js');
+
+
+
+module.exports = DatePicker;
+//# sourceMappingURL=index.js.map

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

@@ -22,6 +22,7 @@ export declare const ICONS: {
     eye: JSX.Element;
     filter: JSX.Element;
     'for-you': JSX.Element;
+    games: JSX.Element;
     goals: JSX.Element;
     heart: JSX.Element;
     help: JSX.Element;
@@ -113,10 +114,13 @@ export declare const ICONS: {
     'drawing-tool-large-line': JSX.Element;
     'drawing-tool-opacity-half': JSX.Element;
     'drawing-tool-opacity-full': JSX.Element;
+    'drawing-tool-color-mixer': JSX.Element;
     'drawing-tool-arrow-up': JSX.Element;
     'drawing-tool-arrow-down': JSX.Element;
     'drawing-tool-arrow-left': JSX.Element;
     'drawing-tool-arrow-right': JSX.Element;
+    'drawing-tool-sticker': JSX.Element;
     'idea-creator': JSX.Element;
+    send: JSX.Element;
 };
 export default ICONS;

package/dist/components/Icon/icons.js

@@ -22,6 +22,23 @@ var customise = require('../../assets/icons/customise.svg.js');
 var download = require('../../assets/icons/download.svg.js');
 var draft = require('../../assets/icons/draft.svg.js');
 var drawingTask = require('../../assets/icons/drawing-task.svg.js');
+var drawingToolArrowDown = require('../../assets/icons/drawing-tool-arrow-down.svg.js');
+var drawingToolArrowLeft = require('../../assets/icons/drawing-tool-arrow-left.svg.js');
+var drawingToolArrowRight = require('../../assets/icons/drawing-tool-arrow-right.svg.js');
+var drawingToolArrowUp = require('../../assets/icons/drawing-tool-arrow-up.svg.js');
+var drawingToolCamera = require('../../assets/icons/drawing-tool-camera.svg.js');
+var drawingToolColorMixer = require('../../assets/icons/drawing-tool-color-mixer.svg.js');
+var drawingToolEraser = require('../../assets/icons/drawing-tool-eraser.svg.js');
+var drawingToolFillBrush = require('../../assets/icons/drawing-tool-fill-brush.svg.js');
+var drawingToolLargeLine = require('../../assets/icons/drawing-tool-large-line.svg.js');
+var drawingToolLineBrush = require('../../assets/icons/drawing-tool-line-brush.svg.js');
+var drawingToolMediumLine = require('../../assets/icons/drawing-tool-medium-line.svg.js');
+var drawingToolOpacityFull = require('../../assets/icons/drawing-tool-opacity-full.svg.js');
+var drawingToolOpacityHalf = require('../../assets/icons/drawing-tool-opacity-half.svg.js');
+var drawingToolRedo = require('../../assets/icons/drawing-tool-redo.svg.js');
+var drawingToolSmallLine = require('../../assets/icons/drawing-tool-small-line.svg.js');
+var drawingToolStickers = require('../../assets/icons/drawing-tool-stickers.svg.js');
+var drawingToolUndo = require('../../assets/icons/drawing-tool-undo.svg.js');
 var egg = require('../../assets/icons/egg.svg.js');
 var enclosure = require('../../assets/icons/enclosure.svg.js');
 var exclamationGrey = require('../../assets/icons/exclamation-grey.svg.js');
@@ -31,10 +48,12 @@ var facebook = require('../../assets/icons/facebook.svg.js');
 var filter = require('../../assets/icons/filter.svg.js');
 var flag = require('../../assets/icons/flag.svg.js');
 var forYou = require('../../assets/icons/for-you.svg.js');
+var games = require('../../assets/icons/games.svg.js');
 var gift = require('../../assets/icons/gift.svg.js');
 var goals = require('../../assets/icons/goals.svg.js');
 var heart = require('../../assets/icons/heart.svg.js');
 var help = require('../../assets/icons/help.svg.js');
+var ideaCreator = require('../../assets/icons/idea-creator.svg.js');
 var info = require('../../assets/icons/info.svg.js');
 var instagram = require('../../assets/icons/instagram.svg.js');
 var items = require('../../assets/icons/items.svg.js');
@@ -72,6 +91,7 @@ var projects = require('../../assets/icons/projects.svg.js');
 var refresh = require('../../assets/icons/refresh.svg.js');
 var rewards = require('../../assets/icons/rewards.svg.js');
 var search = require('../../assets/icons/search.svg.js');
+var send = require('../../assets/icons/send.svg.js');
 var settings = require('../../assets/icons/settings.svg.js');
 var sharing = require('../../assets/icons/sharing.svg.js');
 var shop = require('../../assets/icons/shop.svg.js');
@@ -80,6 +100,7 @@ var soundOn = require('../../assets/icons/sound-on.svg.js');
 var starWriting = require('../../assets/icons/star-writing.svg.js');
 var task = require('../../assets/icons/task.svg.js');
 var textToSpeech = require('../../assets/icons/text-to-speech.svg.js');
+var tick = require('../../assets/icons/tick.svg.js');
 var torch = require('../../assets/icons/torch.svg.js');
 var transfer = require('../../assets/icons/transfer.svg.js');
 var trashWhite = require('../../assets/icons/trash-white.svg.js');
@@ -104,23 +125,6 @@ var writingTypePoem = require('../../assets/icons/writing-type-poem.svg.js');
 var writingTypeReport = require('../../assets/icons/writing-type-report.svg.js');
 var writing = require('../../assets/icons/writing.svg.js');
 var zooPoint = require('../../assets/icons/zoo-point.svg.js');
-var tick = require('../../assets/icons/tick.svg.js');
-var drawingToolCamera = require('../../assets/icons/drawing-tool-camera.svg.js');
-var drawingToolUndo = require('../../assets/icons/drawing-tool-undo.svg.js');
-var drawingToolRedo = require('../../assets/icons/drawing-tool-redo.svg.js');
-var drawingToolEraser = require('../../assets/icons/drawing-tool-eraser.svg.js');
-var drawingToolFillBrush = require('../../assets/icons/drawing-tool-fill-brush.svg.js');
-var drawingToolLineBrush = require('../../assets/icons/drawing-tool-line-brush.svg.js');
-var drawingToolSmallLine = require('../../assets/icons/drawing-tool-small-line.svg.js');
-var drawingToolMediumLine = require('../../assets/icons/drawing-tool-medium-line.svg.js');
-var drawingToolLargeLine = require('../../assets/icons/drawing-tool-large-line.svg.js');
-var drawingToolOpacityHalf = require('../../assets/icons/drawing-tool-opacity-half.svg.js');
-var drawingToolOpacityFull = require('../../assets/icons/drawing-tool-opacity-full.svg.js');
-var drawingToolArrowUp = require('../../assets/icons/drawing-tool-arrow-up.svg.js');
-var drawingToolArrowDown = require('../../assets/icons/drawing-tool-arrow-down.svg.js');
-var drawingToolArrowLeft = require('../../assets/icons/drawing-tool-arrow-left.svg.js');
-var drawingToolArrowRight = require('../../assets/icons/drawing-tool-arrow-right.svg.js');
-var ideaCreator = require('../../assets/icons/idea-creator.svg.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -149,6 +153,7 @@ var ICONS = {
     'eye': React__default['default'].createElement(eye, null),
     'filter': React__default['default'].createElement(filter, null),
     'for-you': React__default['default'].createElement(forYou, null),
+    'games': React__default['default'].createElement(games, null),
     'goals': React__default['default'].createElement(goals, null),
     'heart': React__default['default'].createElement(heart, null),
     'help': React__default['default'].createElement(help, null),
@@ -240,11 +245,14 @@ var ICONS = {
     'drawing-tool-large-line': React__default['default'].createElement(drawingToolLargeLine, null),
     'drawing-tool-opacity-half': React__default['default'].createElement(drawingToolOpacityHalf, null),
     'drawing-tool-opacity-full': React__default['default'].createElement(drawingToolOpacityFull, null),
+    'drawing-tool-color-mixer': React__default['default'].createElement(drawingToolColorMixer, null),
     'drawing-tool-arrow-up': React__default['default'].createElement(drawingToolArrowUp, null),
     'drawing-tool-arrow-down': React__default['default'].createElement(drawingToolArrowDown, null),
     'drawing-tool-arrow-left': React__default['default'].createElement(drawingToolArrowLeft, null),
     'drawing-tool-arrow-right': React__default['default'].createElement(drawingToolArrowRight, null),
-    'idea-creator': React__default['default'].createElement(ideaCreator, null)
+    'drawing-tool-sticker': React__default['default'].createElement(drawingToolStickers, null),
+    'idea-creator': React__default['default'].createElement(ideaCreator, null),
+    'send': React__default['default'].createElement(send, null),
 };
 
 exports.ICONS = ICONS;

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

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

package/dist/components/Input/Input.d.ts

@@ -0,0 +1,7 @@
+export interface InputProps {
+    borderRadius?: string;
+    borderColor?: string;
+    borderWidth?: string;
+}
+declare const Input: import("styled-components").StyledComponent<"input", any, InputProps, never>;
+export default Input;

package/dist/components/Input/Input.js

@@ -0,0 +1,19 @@
+'use strict';
+
+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 Input = styled__default['default'].input(templateObject_2 || (templateObject_2 = tslib.__makeTemplateObject(["\n  outline: none;\n  padding: 6px 10px;\n  font-size: 17px;\n  font-family: 'Libre Baskerville';\n  ", "\n"], ["\n  outline: none;\n  padding: 6px 10px;\n  font-size: 17px;\n  font-family: 'Libre Baskerville';\n  ", "\n"])), function (props) { return styled.css(templateObject_1 || (templateObject_1 = tslib.__makeTemplateObject(["\n    border-radius: ", ";\n    border: ", " solid ", ";\n  "], ["\n    border-radius: ", ";\n    border: ", " solid ", ";\n  "])), props.borderRadius, props.borderWidth, props.borderColor); });
+Input.defaultProps = {
+    borderRadius: '6px',
+    borderColor: '#000',
+    borderWidth: '2px'
+};
+var templateObject_1, templateObject_2;
+
+module.exports = Input;
+//# sourceMappingURL=Input.js.map

package/dist/components/Input/Input.js.map

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

package/dist/components/{DrawingTool/DrawingTool.stories.d.ts → Input/Input.stories.d.ts}

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

package/dist/components/Input/index.d.ts

@@ -0,0 +1,2 @@
+import Input from './Input';
+export default Input;

package/dist/components/Input/index.js

@@ -0,0 +1,8 @@
+'use strict';
+
+var Input = require('./Input.js');
+
+
+
+module.exports = Input;
+//# sourceMappingURL=index.js.map

package/dist/index.d.ts

@@ -1,7 +1,9 @@
 import Avatar from './components/Avatar';
 import Button from "./components/Button";
+import DatePicker from './components/DatePicker';
 import Icon from './components/Icon';
 import IconButton from './components/IconButton';
+import Input from './components/Input';
 import Modal from './components/Modal';
 import { ModalProvider, useModalState } from './components/Modal/ModalState';
 import useAsync from './hooks/useAsync';
@@ -12,6 +14,4 @@ import useInterval from './hooks/useInterval';
 import useEventListener from './hooks/useEventListener';
 import useElementSize from './hooks/useElementSize';
 import useDebounce from './hooks/useDebounce';
-import DrawingTool from './components/DrawingTool/DrawingTool';
-import { DrawingToolProvider, useDrawingTool } from './components/DrawingTool/DrawingToolProvider';
-export { Button, IconButton, Modal, Icon, Avatar, ModalProvider, DrawingTool, DrawingToolProvider, useDrawingTool, useModalState, useAsync, useMountState, useConfettis, useCloudinary, useInterval, useElementSize, useEventListener, useDebounce };
+export { Avatar, IconButton, Button, DatePicker, Icon, Input, Modal, ModalProvider, useModalState, useAsync, useMountState, useConfettis, useCloudinary, useInterval, useElementSize, useEventListener, useDebounce };

package/dist/index.js

@@ -4,8 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var Avatar = require('./components/Avatar/Avatar.js');
 var Button = require('./components/Button/Button.js');
+var DatePicker = require('./components/DatePicker/DatePicker.js');
 var Icon = require('./components/Icon/Icon.js');
 var IconButton = require('./components/IconButton/IconButton.js');
+var Input = require('./components/Input/Input.js');
 var Modal = require('./components/Modal/Modal.js');
 var ModalState = require('./components/Modal/ModalState.js');
 var useAsync = require('./hooks/useAsync.js');
@@ -16,15 +18,15 @@ var useInterval = require('./hooks/useInterval.js');
 var useEventListener = require('./hooks/useEventListener.js');
 var useElementSize = require('./hooks/useElementSize.js');
 var useDebounce = require('./hooks/useDebounce.js');
-var DrawingTool = require('./components/DrawingTool/DrawingTool.js');
-var DrawingToolProvider = require('./components/DrawingTool/DrawingToolProvider.js');
 
 
 
 exports.Avatar = Avatar;
 exports.Button = Button;
+exports.DatePicker = DatePicker;
 exports.Icon = Icon;
 exports.IconButton = IconButton;
+exports.Input = Input;
 exports.Modal = Modal;
 exports.ModalProvider = ModalState.ModalProvider;
 exports.useModalState = ModalState.useModalState;
@@ -36,7 +38,4 @@ exports.useInterval = useInterval;
 exports.useEventListener = useEventListener;
 exports.useElementSize = useElementSize;
 exports.useDebounce = useDebounce;
-exports.DrawingTool = DrawingTool;
-exports.DrawingToolProvider = DrawingToolProvider.DrawingToolProvider;
-exports.useDrawingTool = DrawingToolProvider.useDrawingTool;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nzk-react-components",
-  "version": "0.3.6",
+  "version": "0.4.1",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -59,12 +59,9 @@
     "add": "^2.0.6",
     "canvas-confetti": "^1.4.0",
     "lodash.after": "^4.0.4",
-    "moveable-helper": "^0.4.0",
     "polished": "^4.1.3",
-    "react-dropzone": "^11.4.2",
+    "react-datepicker": "^4.5.0",
     "react-moveable": "^0.29.0",
-    "react-tooltip": "^4.2.21",
-    "resize-observer-polyfill": "^1.5.1",
     "shortid": "^2.2.16",
     "styled-components": "^5.3.0",
     "unstated-next": "^1.1.0"

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

@@ -1,32 +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;
-    enableMagicCrop?: boolean;
-    magicCropUploadPreset?: string;
-    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;
-        enableMagicCrop: boolean;
-    };
-};
-export default Drawing;