nzk-react-components 0.4.6-1 → 0.4.6-2

package/dist/esm/components/Button/utils.js

@@ -0,0 +1,25 @@
+import { getLuminance } from 'polished';
+
+var getTextColor = function (props) {
+    if (props.color) {
+        return props.color;
+    }
+    if (getLuminance(props.backgroundColor) <= 0.5)
+        return '#fff';
+    return '#000';
+};
+var getTextSize = function (props) {
+    if (props.fontSize) {
+        return props.fontSize;
+    }
+    return props.height / 2.5 + "px";
+};
+var getPadding = function (props) {
+    return 0.001 * props.height + "px " + props.height / 2 + "px";
+};
+var getSizeComparedToBase = function (props, originalValue) {
+    return (props.height * originalValue) / 64;
+};
+
+export { getPadding, getSizeComparedToBase, getTextColor, getTextSize };
+//# sourceMappingURL=utils.js.map

package/dist/esm/components/Button/utils.js.map

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

package/dist/esm/components/DatePicker/DatePicker.js

@@ -0,0 +1,56 @@
+import { __makeTemplateObject } from 'tslib';
+import { getLuminance, darken, lighten } from 'polished';
+import React__default, { useRef, useState, useEffect, forwardRef } from 'react';
+import ReactDatePicker from 'react-datepicker';
+import styled, { css } from 'styled-components';
+import Button from '../Button/Button.js';
+
+var getColors = function (props) {
+    var primary = props.primary;
+    var lum = getLuminance(primary);
+    var light = lum >= 0.5;
+    var secondary = light ? darken(0.2, primary) : lighten(0.2, primary);
+    return {
+        primary: primary,
+        secondary: secondary,
+        color: light ? '#000' : '#fff'
+    };
+};
+var Wrapper = styled.div(templateObject_2 || (templateObject_2 = __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 css(templateObject_1 || (templateObject_1 = __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 = useRef(null);
+    var _a = useState(props.defaultValue || new Date()), startDate = _a[0], setStartDate = _a[1];
+    useEffect(function () {
+        if (props.autoFocus && datePickerRef.current && datePickerRef.current.input) {
+            datePickerRef.current.input.focus();
+        }
+    }, []);
+    var ButtonInput = forwardRef(function (_a, ref) {
+        var value = _a.value, onClick = _a.onClick;
+        if (props.input)
+            return React__default.cloneElement(props.input, { onClick: onClick, ref: ref, children: value });
+        return React__default.createElement(Button, { onClick: onClick, ref: ref, theme: 'primary', size: 'small' }, value);
+    });
+    useEffect(function () {
+        if (props.onChange) {
+            props.onChange(startDate);
+        }
+    }, [startDate]);
+    return React__default.createElement(Wrapper, { primary: props.primary },
+        React__default.createElement(ReactDatePicker, { ref: datePickerRef, dateFormat: "d MMMM yyyy", withPortal: true, selected: startDate, onChange: function (date) { return setStartDate(date); }, customInput: React__default.createElement(ButtonInput, null) }));
+};
+DatePicker.defaultProps = {
+    primary: '#1EA7FD',
+    autoFocus: false,
+    onChange: null,
+    range: false,
+    defaultValue: null,
+    input: null,
+};
+var templateObject_1, templateObject_2;
+
+export { DatePicker as default };
+//# sourceMappingURL=DatePicker.js.map

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

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

package/dist/esm/components/DatePicker/index.js

@@ -0,0 +1,3 @@
+import DatePicker from './DatePicker.js';
+export { default } from './DatePicker.js';
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/components/Icon/Icon.js

@@ -0,0 +1,16 @@
+import { __makeTemplateObject, __assign } from 'tslib';
+import React__default from 'react';
+import styled from 'styled-components';
+import ICONS from './icons.js';
+
+var SvgWrapper = styled.div(templateObject_1 || (templateObject_1 = __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.createElement(SvgWrapper, __assign({}, props), React__default.cloneElement(ICONS[props.name], props));
+};
+Icon.defaultProps = {
+    size: null
+};
+var templateObject_1;
+
+export { Icon as default };
+//# sourceMappingURL=Icon.js.map

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

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

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

@@ -0,0 +1,263 @@
+import React__default from 'react';
+import SvgAboutUs from '../../assets/icons/about-us.svg.js';
+import SvgActivities from '../../assets/icons/activities.svg.js';
+import SvgArchive from '../../assets/icons/archive.svg.js';
+import SvgArrowLeft from '../../assets/icons/arrow-left.svg.js';
+import SvgArrowRight from '../../assets/icons/arrow-right.svg.js';
+import SvgAwards from '../../assets/icons/awards.svg.js';
+import SvgCardSkills from '../../assets/icons/card-skills.svg.js';
+import SvgChallenges from '../../assets/icons/challenges.svg.js';
+import SvgChart from '../../assets/icons/chart.svg.js';
+import SvgCheckmark from '../../assets/icons/checkmark.svg.js';
+import SvgClosecopy from '../../assets/icons/close copy.svg.js';
+import SvgCollect from '../../assets/icons/collect.svg.js';
+import SvgComment from '../../assets/icons/comment.svg.js';
+import SvgCompass from '../../assets/icons/compass.svg.js';
+import SvgController from '../../assets/icons/controller.svg.js';
+import SvgCreate from '../../assets/icons/create.svg.js';
+import SvgCustomise from '../../assets/icons/customise.svg.js';
+import SvgDownload from '../../assets/icons/download.svg.js';
+import SvgDraft from '../../assets/icons/draft.svg.js';
+import SvgDrawingTask from '../../assets/icons/drawing-task.svg.js';
+import SvgDrawingToolArrowDown from '../../assets/icons/drawing-tool-arrow-down.svg.js';
+import SvgDrawingToolArrowLeft from '../../assets/icons/drawing-tool-arrow-left.svg.js';
+import SvgDrawingToolArrowRight from '../../assets/icons/drawing-tool-arrow-right.svg.js';
+import SvgDrawingToolArrowUp from '../../assets/icons/drawing-tool-arrow-up.svg.js';
+import SvgDrawingToolCamera from '../../assets/icons/drawing-tool-camera.svg.js';
+import SvgDrawingToolColorMixer from '../../assets/icons/drawing-tool-color-mixer.svg.js';
+import SvgDrawingToolEraser from '../../assets/icons/drawing-tool-eraser.svg.js';
+import SvgDrawingToolFillBrush from '../../assets/icons/drawing-tool-fill-brush.svg.js';
+import SvgDrawingToolLargeLine from '../../assets/icons/drawing-tool-large-line.svg.js';
+import SvgDrawingToolLineBrush from '../../assets/icons/drawing-tool-line-brush.svg.js';
+import SvgDrawingToolMediumLine from '../../assets/icons/drawing-tool-medium-line.svg.js';
+import SvgDrawingToolOpacityFull from '../../assets/icons/drawing-tool-opacity-full.svg.js';
+import SvgDrawingToolOpacityHalf from '../../assets/icons/drawing-tool-opacity-half.svg.js';
+import SvgDrawingToolRedo from '../../assets/icons/drawing-tool-redo.svg.js';
+import SvgDrawingToolSmallLine from '../../assets/icons/drawing-tool-small-line.svg.js';
+import SvgDrawingToolStickers from '../../assets/icons/drawing-tool-stickers.svg.js';
+import SvgDrawingToolUndo from '../../assets/icons/drawing-tool-undo.svg.js';
+import SvgEgg from '../../assets/icons/egg.svg.js';
+import SvgEnclosure from '../../assets/icons/enclosure.svg.js';
+import SvgExclamationGrey from '../../assets/icons/exclamation-grey.svg.js';
+import SvgExclamation from '../../assets/icons/exclamation.svg.js';
+import SvgEye from '../../assets/icons/eye.svg.js';
+import SvgFacebook from '../../assets/icons/facebook.svg.js';
+import SvgFilter from '../../assets/icons/filter.svg.js';
+import SvgFlag from '../../assets/icons/flag.svg.js';
+import SvgForYou from '../../assets/icons/for-you.svg.js';
+import SvgGames from '../../assets/icons/games.svg.js';
+import SvgGift from '../../assets/icons/gift.svg.js';
+import SvgGoals from '../../assets/icons/goals.svg.js';
+import SvgHeart from '../../assets/icons/heart.svg.js';
+import SvgHelp from '../../assets/icons/help.svg.js';
+import SvgIdeaCreator from '../../assets/icons/idea-creator.svg.js';
+import SvgInfo from '../../assets/icons/info.svg.js';
+import SvgInstagram from '../../assets/icons/instagram.svg.js';
+import SvgItems from '../../assets/icons/items.svg.js';
+import SvgLayers from '../../assets/icons/layers.svg.js';
+import SvgLessons from '../../assets/icons/lessons.svg.js';
+import SvgLink from '../../assets/icons/link.svg.js';
+import SvgList from '../../assets/icons/list.svg.js';
+import SvgLock from '../../assets/icons/lock.svg.js';
+import SvgLogout from '../../assets/icons/logout.svg.js';
+import SvgMegaphone from '../../assets/icons/megaphone.svg.js';
+import SvgMenu from '../../assets/icons/menu.svg.js';
+import SvgMessage from '../../assets/icons/message.svg.js';
+import SvgMinus from '../../assets/icons/minus.svg.js';
+import SvgMore from '../../assets/icons/more.svg.js';
+import SvgMyHistory from '../../assets/icons/my-history.svg.js';
+import SvgMyZoo from '../../assets/icons/my-zoo.svg.js';
+import SvgNew from '../../assets/icons/new.svg.js';
+import SvgNotifications from '../../assets/icons/notifications.svg.js';
+import SvgNzkPurple from '../../assets/icons/NZK-purple.svg.js';
+import SvgNzk from '../../assets/icons/NZK.svg.js';
+import SvgNzktvBlue from '../../assets/icons/nzktv-blue.svg.js';
+import SvgNzktvGreen from '../../assets/icons/nzktv-green.svg.js';
+import SvgOrbDisabled from '../../assets/icons/orb-disabled.svg.js';
+import SvgOrb from '../../assets/icons/orb.svg.js';
+import SvgPadlock from '../../assets/icons/padlock.svg.js';
+import SvgPdf from '../../assets/icons/pdf.svg.js';
+import SvgPencil from '../../assets/icons/pencil.svg.js';
+import SvgPending from '../../assets/icons/pending.svg.js';
+import SvgPlayVideo from '../../assets/icons/play-video.svg.js';
+import SvgPlay from '../../assets/icons/play.svg.js';
+import SvgPlus from '../../assets/icons/plus.svg.js';
+import SvgPrivate from '../../assets/icons/private.svg.js';
+import SvgProgress from '../../assets/icons/progress.svg.js';
+import SvgProjects from '../../assets/icons/projects.svg.js';
+import SvgRefresh from '../../assets/icons/refresh.svg.js';
+import SvgRewards from '../../assets/icons/rewards.svg.js';
+import SvgSearch from '../../assets/icons/search.svg.js';
+import SvgSend from '../../assets/icons/send.svg.js';
+import SvgSettings from '../../assets/icons/settings.svg.js';
+import SvgSharing from '../../assets/icons/sharing.svg.js';
+import SvgShop from '../../assets/icons/shop.svg.js';
+import SvgSoundOff from '../../assets/icons/sound-off.svg.js';
+import SvgSoundOn from '../../assets/icons/sound-on.svg.js';
+import SvgStarWriting from '../../assets/icons/star-writing.svg.js';
+import SvgTask from '../../assets/icons/task.svg.js';
+import SvgTextToSpeech from '../../assets/icons/text-to-speech.svg.js';
+import SvgTick from '../../assets/icons/tick.svg.js';
+import SvgTorch from '../../assets/icons/torch.svg.js';
+import SvgTransfer from '../../assets/icons/transfer.svg.js';
+import SvgTrashWhite from '../../assets/icons/trash-white.svg.js';
+import SvgTrash from '../../assets/icons/trash.svg.js';
+import SvgTrophy from '../../assets/icons/trophy.svg.js';
+import SvgTwitter from '../../assets/icons/twitter.svg.js';
+import SvgUpload from '../../assets/icons/upload.svg.js';
+import SvgUser from '../../assets/icons/user.svg.js';
+import SvgUsers from '../../assets/icons/users.svg.js';
+import SvgVideo from '../../assets/icons/video.svg.js';
+import SvgWhatsapp from '../../assets/icons/whatsapp.svg.js';
+import SvgWritingTypeAdventureStory from '../../assets/icons/writing-type-adventure-story.svg.js';
+import SvgWritingTypeBiography from '../../assets/icons/writing-type-biography.svg.js';
+import SvgWritingTypeDiaryEntry from '../../assets/icons/writing-type-diary-entry.svg.js';
+import SvgWritingTypeFreeWrite from '../../assets/icons/writing-type-free-write.svg.js';
+import SvgWritingTypeInstructions from '../../assets/icons/writing-type-instructions.svg.js';
+import SvgWritingTypeLetterWriting from '../../assets/icons/writing-type-letter-writing.svg.js';
+import SvgWritingTypeNewspaperArticle from '../../assets/icons/writing-type-newspaper-article.svg.js';
+import SvgWritingTypePersuasiveWriting from '../../assets/icons/writing-type-persuasive-writing.svg.js';
+import SvgWritingTypePlayscript from '../../assets/icons/writing-type-playscript.svg.js';
+import SvgWritingTypePoem from '../../assets/icons/writing-type-poem.svg.js';
+import SvgWritingTypeReport from '../../assets/icons/writing-type-report.svg.js';
+import SvgWriting from '../../assets/icons/writing.svg.js';
+import SvgZooPoint from '../../assets/icons/zoo-point.svg.js';
+import SvgGiraffe from '../../assets/icons/giraffe.svg.js';
+import SvgPenguin from '../../assets/icons/penguin.svg.js';
+import SvgFlamingo from '../../assets/icons/flamingo.svg.js';
+import SvgBear from '../../assets/icons/bear.svg.js';
+import SvgSealion from '../../assets/icons/sealion.svg.js';
+
+var ICONS = {
+    'activities': React__default.createElement(SvgActivities, null),
+    'archive': React__default.createElement(SvgArchive, null),
+    'arrow-left': React__default.createElement(SvgArrowLeft, null),
+    'arrow-right': React__default.createElement(SvgArrowRight, null),
+    'awards': React__default.createElement(SvgAwards, null),
+    'card-skills': React__default.createElement(SvgCardSkills, null),
+    'challenges': React__default.createElement(SvgChallenges, null),
+    'chart': React__default.createElement(SvgChart, null),
+    'checkmark': React__default.createElement(SvgCheckmark, null),
+    'close': React__default.createElement(SvgClosecopy, null),
+    'collect': React__default.createElement(SvgCollect, null),
+    'comment': React__default.createElement(SvgComment, null),
+    'controller': React__default.createElement(SvgController, null),
+    'create': React__default.createElement(SvgCreate, null),
+    'customise': React__default.createElement(SvgCustomise, null),
+    'draft': React__default.createElement(SvgDraft, null),
+    'drawing-task': React__default.createElement(SvgDrawingTask, null),
+    'egg': React__default.createElement(SvgEgg, null),
+    'enclosure': React__default.createElement(SvgEnclosure, null),
+    'exclamation': React__default.createElement(SvgExclamation, null),
+    'eye': React__default.createElement(SvgEye, null),
+    'filter': React__default.createElement(SvgFilter, null),
+    'for-you': React__default.createElement(SvgForYou, null),
+    'games': React__default.createElement(SvgGames, null),
+    'goals': React__default.createElement(SvgGoals, null),
+    'heart': React__default.createElement(SvgHeart, null),
+    'help': React__default.createElement(SvgHelp, null),
+    'info': React__default.createElement(SvgInfo, null),
+    'items': React__default.createElement(SvgItems, null),
+    'lessons': React__default.createElement(SvgLessons, null),
+    'lock': React__default.createElement(SvgLock, null),
+    'menu': React__default.createElement(SvgMenu, null),
+    'message': React__default.createElement(SvgMessage, null),
+    'minus': React__default.createElement(SvgMinus, null),
+    'book': React__default.createElement(SvgMyHistory, null),
+    'my-zoo': React__default.createElement(SvgMyZoo, null),
+    'new': React__default.createElement(SvgNew, null),
+    'notifications': React__default.createElement(SvgNotifications, null),
+    'NZK': React__default.createElement(SvgNzk, null),
+    'orb-disabled': React__default.createElement(SvgOrbDisabled, null),
+    'orb': React__default.createElement(SvgOrb, null),
+    'padlock': React__default.createElement(SvgPadlock, null),
+    'pdf': React__default.createElement(SvgPdf, null),
+    'pencil': React__default.createElement(SvgPencil, null),
+    'pending': React__default.createElement(SvgPending, null),
+    'play': React__default.createElement(SvgPlay, null),
+    'play-video': React__default.createElement(SvgPlayVideo, null),
+    'plus': React__default.createElement(SvgPlus, null),
+    'private': React__default.createElement(SvgPrivate, null),
+    'progress': React__default.createElement(SvgProgress, null),
+    'projects': React__default.createElement(SvgProjects, null),
+    'refresh': React__default.createElement(SvgRefresh, null),
+    'rewards': React__default.createElement(SvgRewards, null),
+    'settings': React__default.createElement(SvgSettings, null),
+    'sharing': React__default.createElement(SvgSharing, null),
+    'shop': React__default.createElement(SvgShop, null),
+    'sound-off': React__default.createElement(SvgSoundOff, null),
+    'sound-on': React__default.createElement(SvgSoundOn, null),
+    'star-writing': React__default.createElement(SvgStarWriting, null),
+    'transfer': React__default.createElement(SvgTransfer, null),
+    'trash': React__default.createElement(SvgTrash, null),
+    'trophy': React__default.createElement(SvgTrophy, null),
+    'upload': React__default.createElement(SvgUpload, null),
+    'writing': React__default.createElement(SvgWriting, null),
+    'writing-type-adventure-story': React__default.createElement(SvgWritingTypeAdventureStory, null),
+    'writing-type-biography': React__default.createElement(SvgWritingTypeBiography, null),
+    'writing-type-diary-entry': React__default.createElement(SvgWritingTypeDiaryEntry, null),
+    'writing-type-free-write': React__default.createElement(SvgWritingTypeFreeWrite, null),
+    'writing-type-instructions': React__default.createElement(SvgWritingTypeInstructions, null),
+    'writing-type-letter-writing': React__default.createElement(SvgWritingTypeLetterWriting, null),
+    'writing-type-newspaper-article': React__default.createElement(SvgWritingTypeNewspaperArticle, null),
+    'writing-type-persuasive-writing': React__default.createElement(SvgWritingTypePersuasiveWriting, null),
+    'writing-type-playscript': React__default.createElement(SvgWritingTypePlayscript, null),
+    'writing-type-poem': React__default.createElement(SvgWritingTypePoem, null),
+    'writing-type-report': React__default.createElement(SvgWritingTypeReport, null),
+    'zoo-point': React__default.createElement(SvgZooPoint, null),
+    'NZK-purple': React__default.createElement(SvgNzkPurple, null),
+    'about-us': React__default.createElement(SvgAboutUs, null),
+    'compass': React__default.createElement(SvgCompass, null),
+    'download': React__default.createElement(SvgDownload, null),
+    'exclamation-grey': React__default.createElement(SvgExclamationGrey, null),
+    'facebook': React__default.createElement(SvgFacebook, null),
+    'flag': React__default.createElement(SvgFlag, null),
+    'gift': React__default.createElement(SvgGift, null),
+    'instagram': React__default.createElement(SvgInstagram, null),
+    'layers': React__default.createElement(SvgLayers, null),
+    'link': React__default.createElement(SvgLink, null),
+    'list': React__default.createElement(SvgList, null),
+    'logout': React__default.createElement(SvgLogout, null),
+    'megaphone': React__default.createElement(SvgMegaphone, null),
+    'more': React__default.createElement(SvgMore, null),
+    'nzktv-blue': React__default.createElement(SvgNzktvBlue, null),
+    'nzktv-green': React__default.createElement(SvgNzktvGreen, null),
+    'search': React__default.createElement(SvgSearch, null),
+    'task': React__default.createElement(SvgTask, null),
+    'text-to-speech': React__default.createElement(SvgTextToSpeech, null),
+    'torch': React__default.createElement(SvgTorch, null),
+    'trash-white': React__default.createElement(SvgTrashWhite, null),
+    'twitter': React__default.createElement(SvgTwitter, null),
+    'user': React__default.createElement(SvgUser, null),
+    'users': React__default.createElement(SvgUsers, null),
+    'video': React__default.createElement(SvgVideo, null),
+    'whatsapp': React__default.createElement(SvgWhatsapp, null),
+    'tick': React__default.createElement(SvgTick, null),
+    'drawing-tool-undo': React__default.createElement(SvgDrawingToolUndo, null),
+    'drawing-tool-redo': React__default.createElement(SvgDrawingToolRedo, null),
+    'drawing-tool-camera': React__default.createElement(SvgDrawingToolCamera, null),
+    'drawing-tool-eraser': React__default.createElement(SvgDrawingToolEraser, null),
+    'drawing-tool-fill-brush': React__default.createElement(SvgDrawingToolFillBrush, null),
+    'drawing-tool-line-brush': React__default.createElement(SvgDrawingToolLineBrush, null),
+    'drawing-tool-small-line': React__default.createElement(SvgDrawingToolSmallLine, null),
+    'drawing-tool-medium-line': React__default.createElement(SvgDrawingToolMediumLine, null),
+    'drawing-tool-large-line': React__default.createElement(SvgDrawingToolLargeLine, null),
+    'drawing-tool-opacity-half': React__default.createElement(SvgDrawingToolOpacityHalf, null),
+    'drawing-tool-opacity-full': React__default.createElement(SvgDrawingToolOpacityFull, null),
+    'drawing-tool-color-mixer': React__default.createElement(SvgDrawingToolColorMixer, null),
+    'drawing-tool-arrow-up': React__default.createElement(SvgDrawingToolArrowUp, null),
+    'drawing-tool-arrow-down': React__default.createElement(SvgDrawingToolArrowDown, null),
+    'drawing-tool-arrow-left': React__default.createElement(SvgDrawingToolArrowLeft, null),
+    'drawing-tool-arrow-right': React__default.createElement(SvgDrawingToolArrowRight, null),
+    'drawing-tool-sticker': React__default.createElement(SvgDrawingToolStickers, null),
+    'idea-creator': React__default.createElement(SvgIdeaCreator, null),
+    'send': React__default.createElement(SvgSend, null),
+    'giraffe': React__default.createElement(SvgGiraffe, null),
+    'penguin': React__default.createElement(SvgPenguin, null),
+    'flamingo': React__default.createElement(SvgFlamingo, null),
+    'bear': React__default.createElement(SvgBear, null),
+    'sealion': React__default.createElement(SvgSealion, null)
+};
+
+export { ICONS as default };
+//# sourceMappingURL=icons.js.map

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

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

package/dist/esm/components/Icon/index.js

@@ -0,0 +1,3 @@
+import Icon from './Icon.js';
+export { default } from './Icon.js';
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/components/IconButton/IconButton.js

@@ -0,0 +1,17 @@
+import { __makeTemplateObject, __assign } from 'tslib';
+import React__default from 'react';
+import styled from 'styled-components';
+import Button from '../Button/Button.js';
+import { SIZES } from '../Button/constants.js';
+
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __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 ? SIZES[props.size] : props.height) || 0;
+    return (React__default.createElement(Wrapper, { overlap: 0.3 * W },
+        React__default.createElement(Button, __assign({}, props, { round: true }), props.icon),
+        React__default.createElement(Button, __assign({}, props))));
+});
+var templateObject_1;
+
+export { IconButton as default };
+//# sourceMappingURL=IconButton.js.map

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

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

package/dist/esm/components/IconButton/index.js

@@ -0,0 +1,3 @@
+import IconButton from './IconButton.js';
+export { default } from './IconButton.js';
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/components/Input/Input.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from 'tslib';
+import styled, { css } from 'styled-components';
+
+var Input = styled.input(templateObject_2 || (templateObject_2 = __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 css(templateObject_1 || (templateObject_1 = __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;
+
+export { Input as default };
+//# sourceMappingURL=Input.js.map

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

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

package/dist/esm/components/Input/index.js

@@ -0,0 +1,3 @@
+import Input from './Input.js';
+export { default } from './Input.js';
+//# sourceMappingURL=index.js.map

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

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

package/dist/esm/components/Modal/Modal.js

@@ -0,0 +1,34 @@
+import React__default, { useMemo } from 'react';
+import Button from '../Button/Button.js';
+import Icon from '../Icon/Icon.js';
+import { Wrapper, QuitButton, Title, Content, Actions } from './Modal.styles.js';
+
+var Modal = function (props) {
+    var title = useMemo(function () {
+        if (props.errorMessage)
+            return 'Error';
+        return props.title;
+    }, []);
+    var content = useMemo(function () {
+        if (props.errorMessage)
+            return props.errorMessage;
+        if (props.message)
+            return props.message;
+        return props.children;
+    }, []);
+    var actions = useMemo(function () {
+        if (props.actions)
+            return props.actions;
+        return null;
+    }, []);
+    return React__default.createElement(Wrapper, null,
+        props.dismiss && React__default.createElement(QuitButton, { onClick: props.dismiss },
+            React__default.createElement(Button, { round: true, theme: 'red', size: 'regular' },
+                React__default.createElement(Icon, { name: 'close' }))),
+        React__default.createElement(Title, null, title),
+        content && React__default.createElement(Content, { hasError: Boolean(props.errorMessage && true) }, content),
+        React__default.createElement(Actions, null, Array.isArray(actions) && actions.map(function (action) { return action; })));
+};
+
+export { Modal as default };
+//# sourceMappingURL=Modal.js.map

package/dist/esm/components/Modal/Modal.js.map

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

package/dist/esm/components/Modal/Modal.styles.js

@@ -0,0 +1,12 @@
+import { __makeTemplateObject } from 'tslib';
+import styled, { css } from 'styled-components';
+
+var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  background-color: #341644;\n  border-radius: 45px;\n  padding-bottom: 15px;\n  padding: 20px 40px;\n  max-width: 760px;\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: #fff;\n  display: inline-flex;\n  flex-direction: column;\n  min-width: 340px;\n"], ["\n  position: relative;\n  background-color: #341644;\n  border-radius: 45px;\n  padding-bottom: 15px;\n  padding: 20px 40px;\n  max-width: 760px;\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: #fff;\n  display: inline-flex;\n  flex-direction: column;\n  min-width: 340px;\n"])));
+var Title = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  color: #fff;\n  font-family: 'Rammetto One';\n  text-align: center;\n  font-size: 26px;\n  margin-bottom: 10px;\n"], ["\n  color: #fff;\n  font-family: 'Rammetto One';\n  text-align: center;\n  font-size: 26px;\n  margin-bottom: 10px;\n"])));
+var Content = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  background-color: #ffffff0a;\n  flex: 1;\n  border-radius: 20px;\n  font-size: 18px;\n  height: 100%;\n  padding: 20px 15px;\n  ", "\n"], ["\n  background-color: #ffffff0a;\n  flex: 1;\n  border-radius: 20px;\n  font-size: 18px;\n  height: 100%;\n  padding: 20px 15px;\n  ", "\n"])), function (props) { return props.hasError && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    box-shadow: 0px 0px 3px 1px #ff000055;\n  "], ["\n    box-shadow: 0px 0px 3px 1px #ff000055;\n  "]))); });
+var Actions = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n  > * { margin-right: 10px; }\n  > :last-child { margin-right: 0; }\n"], ["\n  display: flex;\n  justify-content: center;\n  margin-top: 15px;\n  > * { margin-right: 10px; }\n  > :last-child { margin-right: 0; }\n"])));
+var QuitButton = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(11px, -16px);\n"], ["\n  position: absolute;\n  top: 0;\n  right: 0;\n  transform: translate(11px, -16px);\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export { Actions, Content, QuitButton, Title, Wrapper };
+//# sourceMappingURL=Modal.styles.js.map

package/dist/esm/components/Modal/Modal.styles.js.map

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

package/dist/esm/components/Modal/ModalState.js

@@ -0,0 +1,55 @@
+import { __makeTemplateObject, __assign } from 'tslib';
+import React__default, { useState, useMemo } from 'react';
+import shortid from 'shortid';
+import styled from 'styled-components';
+import { createContainer } from 'unstated-next';
+
+var Overlay = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 999999999;\n"], ["\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ", ";\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  z-index: 999999999;\n"])), function (props) { return props.active ? 'rgba(0,0,0,0.7)' : 'rgba(0,0,0,0)'; });
+var ModalState = function () {
+    var _a = useState({}), modals = _a[0], setModals = _a[1];
+    var modalsStack = useMemo(function () {
+        return Object.keys(modals).map(function (key) { return modals[key]; });
+    }, [modals]);
+    var lastModalKey = useMemo(function () {
+        return Object.keys(modals)[Object.keys(modals).length - 1];
+    }, [modals]);
+    var close = function (key) {
+        var keyToRemove = key || lastModalKey;
+        setModals(function (modals) {
+            var newModals = __assign({}, modals);
+            delete newModals[keyToRemove];
+            return newModals;
+        });
+    };
+    var open = function (modal, key) {
+        var id = "" + (key || shortid.generate());
+        setModals(function (modals) {
+            var newModals = __assign({}, modals);
+            newModals[id] = React__default.cloneElement(modal, { id: id, dismiss: function () { return close(id); } });
+            return newModals;
+        });
+        return id;
+    };
+    return { open: open, close: close, modals: modalsStack };
+};
+var ModalContainer = createContainer(ModalState);
+var useModalState = ModalContainer.useContainer;
+var Modals = function () {
+    var _a = useModalState(), modals = _a.modals, close = _a.close;
+    if (modals.length === 0)
+        return null;
+    return React__default.createElement(React__default.Fragment, null, modals.map(function (m, i) { return React__default.createElement(Overlay, { onClick: function () { return close(); }, active: i === modals.length - 1 },
+        React__default.createElement("div", { onClick: function (e) {
+                e.stopPropagation();
+                e.preventDefault();
+            }, role: "alert" }, m)); }));
+};
+var ModalProvider = function (props) {
+    return React__default.createElement(ModalContainer.Provider, null,
+        React__default.createElement(Modals, null),
+        React__default.cloneElement(props.children, props));
+};
+var templateObject_1;
+
+export { ModalProvider, useModalState };
+//# sourceMappingURL=ModalState.js.map

package/dist/esm/components/Modal/ModalState.js.map

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

package/dist/esm/components/Modal/index.js

@@ -0,0 +1,3 @@
+import Modal from './Modal.js';
+export { default } from './Modal.js';
+//# sourceMappingURL=index.js.map

package/dist/esm/components/Modal/index.js.map

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