nzk-react-components 1.1.11 → 2.0.0-0

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

@@ -1,7 +1,9 @@
-import { RefObject } from 'react';
-export interface BaseProps {
-    backgroundColor: string;
-    height: number;
+import { ReactHTML } from 'react';
+import { Size, Theme } from './types';
+export declare type BaseProps = {
+    as?: keyof ReactHTML;
+    backgroundColor?: string;
+    height?: number;
     fullWidth?: boolean;
     children: any;
     color?: string;
@@ -12,16 +14,9 @@ export interface BaseProps {
     round?: boolean;
     disabled?: boolean;
     wiggle?: boolean;
-}
-export interface ButtonProps extends BaseProps {
-    size?: 'x-small' | 'small' | 'regular' | 'large' | 'x-large' | 'xx-large';
-    theme?: 'confirm' | 'primary' | 'the-pink' | 'purple' | 'red' | 'orange' | 'green' | 'yellow' | 'white';
-    height?: number;
-    backgroundColor?: string;
-    children?: any;
-    disabled?: boolean;
-    onClick?: () => void;
-    ref?: ((instance: any | null) => void) | RefObject<any> | null;
-}
-declare const Button: (props: ButtonProps) => JSX.Element;
+    size?: Size;
+    theme?: Theme;
+};
+export declare type ButtonProps = {} & BaseProps;
+declare const Button: import("styled-components").StyledComponent<"div", any, BaseProps, never>;
 export default Button;

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

@@ -1,3 +1,4 @@
 import { BaseProps } from './Button';
-export declare const getShadows: (props: BaseProps) => import("styled-components").FlattenSimpleInterpolation;
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, BaseProps, never>;
+export declare const StyledSpanButton: import("styled-components").StyledComponent<"div", any, {
+    role: "button";
+} & BaseProps, "role">;

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

@@ -1,18 +1,14 @@
-interface Theme {
+import { Size, Theme } from './types';
+interface ITheme {
     backgroundColor: string;
     color: string;
     strokeColor: string;
     shadowColor: string;
 }
 export declare const THEMES: {
-    [key: string]: Theme;
+    [key in Theme]: ITheme;
 };
 export declare const SIZES: {
-    'xx-large': number;
-    'x-large': number;
-    large: number;
-    regular: number;
-    small: number;
-    'x-small': number;
+    [key in Size]: number;
 };
 export {};

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

@@ -0,0 +1,21 @@
+export declare const Themes: {
+    readonly primary: "primary";
+    readonly confirm: "confirm";
+    readonly 'the-pink': "the-pink";
+    readonly purple: "purple";
+    readonly red: "red";
+    readonly orange: "orange";
+    readonly green: "green";
+    readonly yellow: "yellow";
+    readonly white: "white";
+};
+export declare type Theme = (typeof Themes)[keyof typeof Themes];
+export declare const Sizes: {
+    'xx-large': string;
+    'x-large': string;
+    large: string;
+    regular: string;
+    small: string;
+    'x-small': string;
+};
+export declare type Size = (typeof Sizes)[keyof typeof Sizes];

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

@@ -1,5 +1,22 @@
-import { BaseProps } from './Button';
-export declare const getTextColor: (props: BaseProps) => string;
-export declare const getTextSize: (props: BaseProps) => string;
-export declare const getPadding: (props: BaseProps) => string;
-export declare const getSizeComparedToBase: (props: BaseProps, originalValue: number) => number;
+export declare const getTextColor: (props: {
+    color?: string;
+    backgroundColor: string;
+}) => string;
+export declare const getTextSize: (props: {
+    height: number;
+} | {
+    fontSize: number;
+}) => string | number;
+export declare const getPadding: (props: {
+    height: number;
+}) => string;
+export declare const getSizeComparedToBase: (props: {
+    height: number;
+}, originalValue: number) => number;
+export declare const getShadows: (props: {
+    backgroundColor: string;
+    shadowColor?: string | undefined;
+    dropShadowColor?: string | undefined;
+    strokeColor?: string | undefined;
+    height: number;
+}) => import("styled-components").FlattenSimpleInterpolation;

package/dist/components/IconButton/IconButton.d.ts

@@ -1,7 +1,9 @@
-/// <reference types="react" />
+import React, { HTMLAttributes } from 'react';
 import { ButtonProps } from '../Button/Button';
-export interface IconButtonProps extends ButtonProps {
+export declare type IconButtonProps = {
     icon: any;
-}
-declare const _default: (props: IconButtonProps) => JSX.Element;
+} & ButtonProps & HTMLAttributes<HTMLDivElement>;
+declare const _default: React.ForwardRefExoticComponent<{
+    icon: any;
+} & import("../Button/Button").BaseProps & React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/dist/components/SyncedText/SyncedText.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ISyncedTextProps } from './types';
+export declare const SyncedText: (props: ISyncedTextProps) => JSX.Element | null;

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

@@ -0,0 +1,2 @@
+export * from './SyncedText';
+export * from './types';

package/dist/components/SyncedText/types.d.ts

@@ -0,0 +1,20 @@
+export interface ISequence {
+    text: string;
+    time: [number, number];
+}
+export interface IAudioSync {
+    audio: string;
+    sequences: ISequence[];
+}
+export interface ISyncedTextRef {
+    play: () => void;
+    pause: () => void;
+    stop: () => void;
+    isPlaying: () => void;
+}
+export interface ISyncedTextProps {
+    value: IAudioSync;
+    setRef?: (ref: ISyncedTextRef) => void;
+    autoPlay?: boolean;
+    onComplete?: () => void;
+}

package/dist/esm/_virtual/_tslib.js

@@ -0,0 +1 @@
+var e=function(){return e=Object.assign||function(e){for(var n,r=1,t=arguments.length;r<t;r++)for(var o in n=arguments[r])Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o]);return e},e.apply(this,arguments)};function n(e,n,r,t){return new(r||(r=Promise))((function(o,a){function u(e){try{i(t.next(e))}catch(e){a(e)}}function c(e){try{i(t.throw(e))}catch(e){a(e)}}function i(e){var n;e.done?o(e.value):(n=e.value,n instanceof r?n:new r((function(e){e(n)}))).then(u,c)}i((t=t.apply(e,n||[])).next())}))}function r(e,n){var r,t,o,a,u={label:0,sent:function(){if(1&o[0])throw o[1];return o[1]},trys:[],ops:[]};return a={next:c(0),throw:c(1),return:c(2)},"function"==typeof Symbol&&(a[Symbol.iterator]=function(){return this}),a;function c(c){return function(i){return function(c){if(r)throw new TypeError("Generator is already executing.");for(;a&&(a=0,c[0]&&(u=0)),u;)try{if(r=1,t&&(o=2&c[0]?t.return:c[0]?t.throw||((o=t.return)&&o.call(t),0):t.next)&&!(o=o.call(t,c[1])).done)return o;switch(t=0,o&&(c=[2&c[0],o.value]),c[0]){case 0:case 1:o=c;break;case 4:return u.label++,{value:c[1],done:!1};case 5:u.label++,t=c[1],c=[0];continue;case 7:c=u.ops.pop(),u.trys.pop();continue;default:if(!(o=u.trys,(o=o.length>0&&o[o.length-1])||6!==c[0]&&2!==c[0])){u=0;continue}if(3===c[0]&&(!o||c[1]>o[0]&&c[1]<o[3])){u.label=c[1];break}if(6===c[0]&&u.label<o[1]){u.label=o[1],o=c;break}if(o&&u.label<o[2]){u.label=o[2],u.ops.push(c);break}o[2]&&u.ops.pop(),u.trys.pop();continue}c=n.call(e,u)}catch(e){c=[6,e],t=0}finally{r=o=0}if(5&c[0])throw c[1];return{value:c[0]?c[1]:void 0,done:!0}}([c,i])}}}function t(e,n){return Object.defineProperty?Object.defineProperty(e,"raw",{value:n}):e.raw=n,e}"function"==typeof SuppressedError&&SuppressedError;export{e as __assign,n as __awaiter,r as __generator,t as __makeTemplateObject};

package/dist/esm/components/Avatar/Avatar.js

@@ -1,43 +1 @@
-import React__default, { useMemo } from 'react';
-import { Wrapper, Flag, AvatarImage } from './Avatar.styles.js';
-
-var Avatar = function (props) {
-    var countryCode = useMemo(function () {
-        var _a;
-        return ((_a = props.user) === null || _a === void 0 ? void 0 : _a.countryCode) || props.countryCode;
-    }, [props]);
-    var avatarUrl = useMemo(function () {
-        var _a, _b, _c;
-        var avatarUrl = ((_b = (_a = props.user) === null || _a === void 0 ? void 0 : _a.avatar) === null || _b === void 0 ? void 0 : _b.url) || props.src;
-        if (avatarUrl)
-            return avatarUrl;
-        if (!avatarUrl && ((_c = props.user) === null || _c === void 0 ? void 0 : _c.type) === 'student')
-            return 'https://cdn.nightzookeeper.com/edu-assets/images/empty-avatar.png';
-        return 'https://cdn.nightzookeeper.com/nzk-assets/empty-avatar.png';
-    }, [props]);
-    var flagUrl = useMemo(function () {
-        if (!countryCode)
-            return undefined;
-        return "https://cdn.nightzookeeper.com/edu-assets/images/flags/" + countryCode + ".png";
-    }, [countryCode]);
-    var flagShown = useMemo(function () {
-        if (flagUrl && !props.flagHidden)
-            return true;
-        return false;
-    }, [flagUrl, props]);
-    return React__default.createElement(Wrapper, { size: props.size, colors: props.colors },
-        flagShown && React__default.createElement(Flag, { src: flagUrl }),
-        React__default.createElement(AvatarImage, { src: avatarUrl }));
-};
-Avatar.defaultProps = {
-    size: '60px',
-    flagHidden: false,
-    colors: {
-        border: '#8B26D4',
-        shadow: '#53167E',
-        dropshadow: 'rgba(0,0,0,0.4)'
-    }
-};
-
-export { Avatar as default };
-//# sourceMappingURL=Avatar.js.map
+import e,{useMemo as r}from"react";import{Wrapper as t,Flag as o,AvatarImage as n}from"./Avatar.styles.js";var s=function(s){var a=r((function(){var e;return(null===(e=s.user)||void 0===e?void 0:e.countryCode)||s.countryCode}),[s]),d=r((function(){var e,r,t,o=(null===(r=null===(e=s.user)||void 0===e?void 0:e.avatar)||void 0===r?void 0:r.url)||s.src;return o||(o||"student"!==(null===(t=s.user)||void 0===t?void 0:t.type)?"https://cdn.nightzookeeper.com/nzk-assets/empty-avatar.png":"https://cdn.nightzookeeper.com/edu-assets/images/empty-avatar.png")}),[s]),i=r((function(){if(a)return"https://cdn.nightzookeeper.com/edu-assets/images/flags/"+a+".png"}),[a]),u=r((function(){return!(!i||s.flagHidden)}),[i,s]);return e.createElement(t,{size:s.size,colors:s.colors},u&&e.createElement(o,{src:i}),e.createElement(n,{src:d}))};s.defaultProps={size:"60px",flagHidden:!1,colors:{border:"#8B26D4",shadow:"#53167E",dropshadow:"rgba(0,0,0,0.4)"}};export{s as default};

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

@@ -1,10 +1 @@
-import { __makeTemplateObject } from 'tslib';
-import styled from 'styled-components';
-
-var Wrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  --border-color: ", ";\n  --shadow-color: ", ";\n  --dropshadow-color: ", ";\n  --size: ", ";\n  height: calc(var(--size) + calc(var(--size) * 0.1));\n  width: var(--size);\n  box-sizing: content-box !important;\n  > * {\n    box-sizing: content-box !important;\n  }\n"], ["\n  position: relative;\n  --border-color: ", ";\n  --shadow-color: ", ";\n  --dropshadow-color: ", ";\n  --size: ", ";\n  height: calc(var(--size) + calc(var(--size) * 0.1));\n  width: var(--size);\n  box-sizing: content-box !important;\n  > * {\n    box-sizing: content-box !important;\n  }\n"])), function (props) { var _a; return (_a = props.colors) === null || _a === void 0 ? void 0 : _a.border; }, function (props) { var _a; return (_a = props.colors) === null || _a === void 0 ? void 0 : _a.shadow; }, function (props) { var _a; return (_a = props.colors) === null || _a === void 0 ? void 0 : _a.dropshadow; }, function (props) { return props.size; });
-var AvatarImage = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  height: calc(var(--size) - calc(var(--size) * 0.1));\n  width: calc(100% - calc(var(--size) * 0.1));\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border: calc(var(--size) * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.1) 0 var(--dropshadow-color);\n  background-color: #ebebeb;\n  border-radius: 50%;\n  overflow: hidden;\n"], ["\n  height: calc(var(--size) - calc(var(--size) * 0.1));\n  width: calc(100% - calc(var(--size) * 0.1));\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border: calc(var(--size) * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.1) 0 var(--dropshadow-color);\n  background-color: #ebebeb;\n  border-radius: 50%;\n  overflow: hidden;\n"])), function (props) { return props.src; });
-var Flag = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  height: calc(var(--size) * 0.35);\n  width: calc(var(--size) * 0.35);\n  top: 0;\n  right: 0;\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border-radius: 50%;\n  border: calc(var(--size) * 0.6 * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.6 * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.6 * 0.1) 0 var(--dropshadow-color);\n  \n"], ["\n  position: absolute;\n  height: calc(var(--size) * 0.35);\n  width: calc(var(--size) * 0.35);\n  top: 0;\n  right: 0;\n  background-image: url(", ");\n  background-size: cover;\n  background-position: center;\n  border-radius: 50%;\n  border: calc(var(--size) * 0.6 * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.6 * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.6 * 0.1) 0 var(--dropshadow-color);\n  \n"])), function (props) { return props.src; });
-var templateObject_1, templateObject_2, templateObject_3;
-
-export { AvatarImage, Flag, Wrapper };
-//# sourceMappingURL=Avatar.styles.js.map
+import{__makeTemplateObject as o}from"../../_virtual/_tslib.js";import r from"styled-components";var n,a,i,c=r.div.withConfig({displayName:"Avatarstyles__Wrapper",componentId:"sc-mm95v8-0"})(n||(n=o(["\n  position: relative;\n  --border-color: ",";\n  --shadow-color: ",";\n  --dropshadow-color: ",";\n  --size: ",";\n  height: calc(var(--size) + calc(var(--size) * 0.1));\n  width: var(--size);\n  box-sizing: content-box !important;\n  > * {\n    box-sizing: content-box !important;\n  }\n"],["\n  position: relative;\n  --border-color: ",";\n  --shadow-color: ",";\n  --dropshadow-color: ",";\n  --size: ",";\n  height: calc(var(--size) + calc(var(--size) * 0.1));\n  width: var(--size);\n  box-sizing: content-box !important;\n  > * {\n    box-sizing: content-box !important;\n  }\n"])),(function(o){var r;return null===(r=o.colors)||void 0===r?void 0:r.border}),(function(o){var r;return null===(r=o.colors)||void 0===r?void 0:r.shadow}),(function(o){var r;return null===(r=o.colors)||void 0===r?void 0:r.dropshadow}),(function(o){return o.size})),e=r.div.withConfig({displayName:"Avatarstyles__AvatarImage",componentId:"sc-mm95v8-1"})(a||(a=o(["\n  height: calc(var(--size) - calc(var(--size) * 0.1));\n  width: calc(100% - calc(var(--size) * 0.1));\n  background-image: url(",");\n  background-size: cover;\n  background-position: center;\n  border: calc(var(--size) * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.1) 0 var(--dropshadow-color);\n  background-color: #ebebeb;\n  border-radius: 50%;\n  overflow: hidden;\n"],["\n  height: calc(var(--size) - calc(var(--size) * 0.1));\n  width: calc(100% - calc(var(--size) * 0.1));\n  background-image: url(",");\n  background-size: cover;\n  background-position: center;\n  border: calc(var(--size) * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.1) 0 var(--dropshadow-color);\n  background-color: #ebebeb;\n  border-radius: 50%;\n  overflow: hidden;\n"])),(function(o){return o.src})),s=r.div.withConfig({displayName:"Avatarstyles__Flag",componentId:"sc-mm95v8-2"})(i||(i=o(["\n  position: absolute;\n  height: calc(var(--size) * 0.35);\n  width: calc(var(--size) * 0.35);\n  top: 0;\n  right: 0;\n  background-image: url(",");\n  background-size: cover;\n  background-position: center;\n  border-radius: 50%;\n  border: calc(var(--size) * 0.6 * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.6 * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.6 * 0.1) 0 var(--dropshadow-color);\n  \n"],["\n  position: absolute;\n  height: calc(var(--size) * 0.35);\n  width: calc(var(--size) * 0.35);\n  top: 0;\n  right: 0;\n  background-image: url(",");\n  background-size: cover;\n  background-position: center;\n  border-radius: 50%;\n  border: calc(var(--size) * 0.6 * 0.05) solid var(--border-color);\n  box-shadow: 0 calc(var(--size) * 0.6 * 0.05) 0 var(--shadow-color), 0 calc(var(--size) * 0.6 * 0.1) 0 var(--dropshadow-color);\n  \n"])),(function(o){return o.src}));export{e as AvatarImage,s as Flag,c as Wrapper};

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

@@ -1,3 +1 @@
-import Avatar from './Avatar.js';
-export { default } from './Avatar.js';
-//# sourceMappingURL=index.js.map
+import a from"./Avatar.js";export{a as default};

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

@@ -1,15 +1 @@
-import { __assign } from 'tslib';
-import React__default from 'react';
-import { Wrapper } from './Button.styles.js';
-import { SIZES, THEMES } from './constants.js';
-
-var Button = function (props) {
-    return (React__default.createElement(Wrapper, __assign({ height: props.size && SIZES[props.size] }, props, (props.theme ? THEMES[props.theme] : {}), { onClick: function () {
-            if (props.onClick) {
-                props.onClick();
-            }
-        } })));
-};
-
-export { Button as default };
-//# sourceMappingURL=Button.js.map
+import{StyledSpanButton as t}from"./Button.styles.js";var o=t;export{o as default};

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

@@ -1,23 +1 @@
-import { __makeTemplateObject } from 'tslib';
-import { getLuminance, darken, lighten } from 'polished';
-import styled, { css } from 'styled-components';
-import { getSizeComparedToBase, getTextColor, getTextSize, getPadding } from './utils.js';
-
-var getShadows = function (props) {
-    var light = getLuminance(props.backgroundColor);
-    var shadowColor = props.shadowColor
-        || light && darken(0.2, props.backgroundColor)
-        || !light && lighten(0.2, props.backgroundColor);
-    var dropShadowColor = props.dropShadowColor || "rgba(0,0,0,0.3)";
-    var strokeColor = props.strokeColor
-        || light && lighten(0.1, props.backgroundColor)
-        || !light && darken(0.1, props.backgroundColor);
-    return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    box-shadow: 0 ", "px 0 ", ",\n      0 ", "px 0 ", ",\n      inset 0 0px 0px ", "px ", ";\n\n    :active {\n      transform: translateY(", "px);\n      box-shadow: 0 ", "px 0 ", ",\n        inset 0 0px 0px ", "px ", ";\n    }\n  "], ["\n    box-shadow: 0 ", "px 0 ", ",\n      0 ", "px 0 ", ",\n      inset 0 0px 0px ", "px ", ";\n\n    :active {\n      transform: translateY(", "px);\n      box-shadow: 0 ", "px 0 ", ",\n        inset 0 0px 0px ", "px ", ";\n    }\n  "])), getSizeComparedToBase(props, 5), shadowColor, getSizeComparedToBase(props, 12), dropShadowColor, getSizeComparedToBase(props, 5), strokeColor, getSizeComparedToBase(props, 7), getSizeComparedToBase(props, 5), shadowColor, getSizeComparedToBase(props, 5), strokeColor);
-};
-var Wrapper = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Rammetto One';\n  border-radius: 1000px;\n  cursor: pointer;\n  user-select: none;\n  ", ";\n  ", "\n  ", "\n  ", "\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"], ["\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  font-family: 'Rammetto One';\n  border-radius: 1000px;\n  cursor: pointer;\n  user-select: none;\n  ", ";\n  ", "\n  ", "\n  ", "\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n"])), function (props) { return css(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    background-color: ", ";\n    height: ", "px;\n    margin-bottom: ", "px;\n    color: ", ";\n    font-size: ", ";\n    padding: ", ";\n    ", ";\n    filter: ", ";\n  "], ["\n    background-color: ", ";\n    height: ", "px;\n    margin-bottom: ", "px;\n    color: ", ";\n    font-size: ", ";\n    padding: ", ";\n    ", ";\n    filter: ", ";\n  "])), props.backgroundColor, props.height, getSizeComparedToBase(props, 12), getTextColor(props), getTextSize(props), getPadding(props), getShadows(props), props.disabled ? 'grayscale(100%)' : 'none'); }, function (props) { return props.fullWidth && css(templateObject_3 || (templateObject_3 = __makeTemplateObject(["width: 100%;"], ["width: 100%;"]))); }, function (props) { return props.wiggle && css(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  animation: wiggle alternate-reverse 2s linear infinite;\n  animation-delay: ", "s;\n    @keyframes wiggle {\n      0% {\n        transform: rotate(-3deg);\n      }\n      10% {\n        transform: rotate(3deg);\n      }\n      20% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(0deg);\n      }\n    }\n  "], ["\n  animation: wiggle alternate-reverse 2s linear infinite;\n  animation-delay: ", "s;\n    @keyframes wiggle {\n      0% {\n        transform: rotate(-3deg);\n      }\n      10% {\n        transform: rotate(3deg);\n      }\n      20% {\n        transform: rotate(0deg);\n      }\n      100% {\n        transform: rotate(0deg);\n      }\n    }\n  "])), Math.random()); }, function (props) {
-    return props.round && css(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n      width: ", "px;\n      padding: 0;\n      flex-shrink: 0;\n    "], ["\n      width: ", "px;\n      padding: 0;\n      flex-shrink: 0;\n    "])), props.height);
-});
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
-
-export { Wrapper, getShadows };
-//# sourceMappingURL=Button.styles.js.map
+import{__makeTemplateObject as n,__assign as o}from"../../_virtual/_tslib.js";import e,{css as r}from"styled-components";import{getShadows as t,getTextColor as i,getTextSize as l,getSizeComparedToBase as s,getPadding as d}from"./utils.js";import{THEMES as a,SIZES as u}from"./constants.js";var c,h,g,m,p,f=e.div.attrs((function(n){return{role:"button"}})).withConfig({displayName:"Buttonstyles__StyledSpanButton",componentId:"sc-1r7fyax-0"})(p||(p=n(["\n  ","\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n\n"],["\n  ","\n\n  svg {\n    height: 100%;\n    width: 100%;\n  }\n\n"])),(function(e){var p=function(n){var o=n.theme?a[n.theme]:void 0,e=a.primary;return{backgroundColor:(null==o?void 0:o.backgroundColor)||n.backgroundColor||e.backgroundColor,color:(null==o?void 0:o.color)||n.color,strokeColor:(null==o?void 0:o.strokeColor)||n.strokeColor,shadowColor:(null==o?void 0:o.shadowColor)||n.shadowColor}}(e),f=function(n){return(n.size?u[n.size]:void 0)||n.height||u.regular}(e);return r(m||(m=n(["\n      // Base\n      ","\n      // COLORS\n      background-color: ",";\n      ",";\n      color: ",";\n      filter: ",";\n\n      // Dimensions\n      ","\n    "],["\n      // Base\n      ","\n      // COLORS\n      background-color: ",";\n      ",";\n      color: ",";\n      filter: ",";\n\n      // Dimensions\n      ","\n    "])),r(c||(c=n(["\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-family: 'Rammetto One';\n    border-radius: 1000px;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n  "],["\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-family: 'Rammetto One';\n    border-radius: 1000px;\n    cursor: pointer;\n    user-select: none;\n    text-decoration: none;\n  "]))),p.backgroundColor,t(o(o({},p),{height:f})),i(p),e.disabled?"grayscale(100%)":"none",function(o){return r(g||(g=n(["\n    outline: none;\n    border: none;\n    height: ","px;\n    font-size: ",";\n    margin-bottom: ","px;\n    padding: ",";\n    ","\n  "],["\n    outline: none;\n    border: none;\n    height: ","px;\n    font-size: ",";\n    margin-bottom: ","px;\n    padding: ",";\n    ","\n  "])),o.height,l(o),s(o,12),d(o),o.round&&r(h||(h=n(["\n      width: ","px;\n      padding: 0;\n      flex-shrink: 0;\n    "],["\n      width: ","px;\n      padding: 0;\n      flex-shrink: 0;\n    "])),o.height))}({height:f,round:e.round}))}));export{f as StyledSpanButton};

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

@@ -1,67 +1 @@
-var THEMES = {
-    primary: {
-        backgroundColor: '#009EE2',
-        color: '#fff',
-        strokeColor: '#00C5ED',
-        shadowColor: '#025899'
-    },
-    confirm: {
-        backgroundColor: '#8CC63F',
-        color: '#fff',
-        strokeColor: '#AFD752',
-        shadowColor: '#579800'
-    },
-    'the-pink': {
-        backgroundColor: '#E40071',
-        color: '',
-        shadowColor: '',
-        strokeColor: ''
-    },
-    'purple': {
-        backgroundColor: '#701EA8',
-        color: '',
-        shadowColor: '#4E1B6D',
-        strokeColor: '#9026C1'
-    },
-    'red': {
-        color: 'white',
-        backgroundColor: '#E20514',
-        strokeColor: '#F60A21',
-        shadowColor: '#931120'
-    },
-    'orange': {
-        color: 'white',
-        backgroundColor: '#F29226',
-        strokeColor: '#F6B230',
-        shadowColor: '#CB6217'
-    },
-    'green': {
-        color: 'white',
-        backgroundColor: '#8DC63F',
-        strokeColor: '#AED752',
-        shadowColor: '#58981F'
-    },
-    'yellow': {
-        color: 'white',
-        backgroundColor: '#FEC532',
-        strokeColor: '#FEE13A',
-        shadowColor: '#C59928'
-    },
-    'white': {
-        color: '',
-        backgroundColor: '#EEEEEE',
-        strokeColor: '#D9D9D9',
-        shadowColor: '#8E9197'
-    }
-};
-var SIZES = {
-    'xx-large': 142,
-    'x-large': 109,
-    large: 71,
-    regular: 50,
-    small: 39,
-    'x-small': 30
-};
-
-export { SIZES, THEMES };
-//# sourceMappingURL=constants.js.map
+var o={primary:{backgroundColor:"#009EE2",color:"#fff",strokeColor:"#00C5ED",shadowColor:"#025899"},confirm:{backgroundColor:"#8CC63F",color:"#fff",strokeColor:"#AFD752",shadowColor:"#579800"},"the-pink":{backgroundColor:"#E40071",color:"",shadowColor:"",strokeColor:""},purple:{backgroundColor:"#701EA8",color:"",shadowColor:"#4E1B6D",strokeColor:"#9026C1"},red:{color:"white",backgroundColor:"#E20514",strokeColor:"#F60A21",shadowColor:"#931120"},orange:{color:"white",backgroundColor:"#F29226",strokeColor:"#F6B230",shadowColor:"#CB6217"},green:{color:"white",backgroundColor:"#8DC63F",strokeColor:"#AED752",shadowColor:"#58981F"},yellow:{color:"white",backgroundColor:"#FEC532",strokeColor:"#FEE13A",shadowColor:"#C59928"},white:{color:"",backgroundColor:"#EEEEEE",strokeColor:"#D9D9D9",shadowColor:"#8E9197"}},r={"xx-large":142,"x-large":109,large:71,regular:50,small:39,"x-small":30};export{r as SIZES,o as THEMES};

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

@@ -1,3 +1 @@
-import Button from './Button.js';
-export { default } from './Button.js';
-//# sourceMappingURL=index.js.map
+import t from"./Button.js";export{t as default};

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

@@ -1,25 +1 @@
-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
+import{__makeTemplateObject as o}from"../../_virtual/_tslib.js";import{css as n}from"styled-components";import{getLuminance as r,darken as t,lighten as p}from"polished";var x,a=function(o){return o.color?o.color:o.backgroundColor&&r(o.backgroundColor)<=.5?"#fff":"#000"},e=function(o){return function(o){return Boolean(o.fontSize)}(o)?o.fontSize:o.height/2.5+"px"},i=function(o){return.001*o.height+"px "+o.height/2+"px"},u=function(o,n){return o.height*n/64},l=function(a){var e=r(a.backgroundColor),i=a.shadowColor||e&&t(.2,a.backgroundColor)||!e&&p(.2,a.backgroundColor),l=a.dropShadowColor||"rgba(0,0,0,0.3)",s=a.strokeColor||e&&p(.1,a.backgroundColor)||!e&&t(.1,a.backgroundColor);return n(x||(x=o(["\n    box-shadow: 0 ","px 0 ",",\n      0 ","px 0 ",",\n      inset 0 0px 0px ","px ",";\n\n    :active {\n      transform: translateY(","px);\n      box-shadow: 0 ","px 0 ",",\n        inset 0 0px 0px ","px ",";\n    }\n  "],["\n    box-shadow: 0 ","px 0 ",",\n      0 ","px 0 ",",\n      inset 0 0px 0px ","px ",";\n\n    :active {\n      transform: translateY(","px);\n      box-shadow: 0 ","px 0 ",",\n        inset 0 0px 0px ","px ",";\n    }\n  "])),u(a,5),i,u(a,12),l,u(a,5),s,u(a,7),u(a,5),i,u(a,5),s)};export{i as getPadding,l as getShadows,u as getSizeComparedToBase,a as getTextColor,e as getTextSize};

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

@@ -1,56 +1 @@
-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
+import{__makeTemplateObject as n}from"../../_virtual/_tslib.js";import{getLuminance as r,darken as e,lighten as o}from"polished";import t,{useRef as a,useState as i,useEffect as c,forwardRef as d}from"react";import p from"react-datepicker";import l,{css as s}from"styled-components";import u from"../Button/Button.js";var f,g,m=l.div.withConfig({displayName:"DatePicker__Wrapper",componentId:"sc-1hk1645-0"})(g||(g=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"],["\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(t){var a=function(n){var t=n.primary,a=r(t)>=.5;return{primary:t,secondary:a?e(.2,t):o(.2,t),color:a?"#000":"#fff"}}(t);return s(f||(f=n(["\n      --primary: ",";\n      --secondary: ",";\n      --color: ",";\n    "],["\n      --primary: ",";\n      --secondary: ",";\n      --color: ",";\n    "])),a.primary,a.secondary,a.color)})),x=function(n){var r=a(null),e=i(n.defaultValue||new Date),o=e[0],l=e[1];c((function(){n.autoFocus&&r.current&&r.current.input&&r.current.input.focus()}),[]);var s=d((function(r,e){var o=r.value,a=r.onClick;return n.input?t.cloneElement(n.input,{onClick:a,ref:e,children:o}):t.createElement(u,{onClick:a,ref:e,theme:"primary",size:"small"},o)}));return c((function(){n.onChange&&n.onChange(o)}),[o]),t.createElement(m,{primary:n.primary},t.createElement(p,{ref:r,dateFormat:"d MMMM yyyy",withPortal:!0,selected:o,onChange:function(n){return l(n)},customInput:t.createElement(s,null)}))};x.defaultProps={primary:"#1EA7FD",autoFocus:!1,onChange:null,range:!1,defaultValue:null,input:null};export{x as default};

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

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

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

@@ -1,17 +1 @@
-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
+import{__makeTemplateObject as o,__assign as n}from"../../_virtual/_tslib.js";import e,{forwardRef as t}from"react";import r from"styled-components";import l from"../Button/Button.js";import{SIZES as i}from"../Button/constants.js";var a,s=r.div.withConfig({displayName:"IconButton__Wrapper",componentId:"sc-1harz0i-0"})(a||(a=o(["\n  display: flex;\n  > .button--icon {\n    z-index: 2;\n  }\n  > .button--label {\n    margin-left: -","px;\n    z-index: 1;\n  }\n"],["\n  display: flex;\n  > .button--icon {\n    z-index: 2;\n  }\n  > .button--label {\n    margin-left: -","px;\n    z-index: 1;\n  }\n"])),(function(o){return o.overlap})),d=t((function(o,t){var r=(o.size?i[o.size]:o.height)||0,a={backgroundColor:o.backgroundColor,height:o.height,fullWidth:o.fullWidth,children:o.children,color:o.color,strokeColor:o.strokeColor,dropShadowColor:o.dropShadowColor,shadowColor:o.shadowColor,fontSize:o.fontSize,round:o.round,disabled:o.disabled,wiggle:o.wiggle,size:o.size,theme:o.theme};return e.createElement(s,n({as:o.as,overlap:.3*r,ref:t},o),e.createElement(l,n({className:"button--icon"},a,{as:"span",round:!0}),o.icon),e.createElement(l,n({className:"button--label"},a,{as:"span"})))}));export{d as default};

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

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

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

@@ -1,13 +1 @@
-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
+import{__makeTemplateObject as n}from"../../_virtual/_tslib.js";import r,{css as o}from"styled-components";var i,e,d=r.input.withConfig({displayName:"Input",componentId:"sc-1pih6it-0"})(e||(e=n(["\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(r){return o(i||(i=n(["\n    border-radius: ",";\n    border: "," solid ",";\n  "],["\n    border-radius: ",";\n    border: "," solid ",";\n  "])),r.borderRadius,r.borderWidth,r.borderColor)}));d.defaultProps={borderRadius:"6px",borderColor:"#000",borderWidth:"2px"};export{d as default};

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

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

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

@@ -1,35 +1 @@
-import React__default, { useMemo } from 'react';
-import 'tslib';
-import SvgClose from '../../icons/Close.js';
-import Button from '../Button/Button.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(SvgClose, null))),
-        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
+import e,{useMemo as r}from"react";import"../../_virtual/_tslib.js";import t from"../../icons/Close.js";import n from"../Button/Button.js";import{Wrapper as s,QuitButton as o,Title as a,Content as l,Actions as i}from"./Modal.styles.js";var m=function(m){var u=r((function(){return m.errorMessage?"Error":m.title}),[]),c=r((function(){return m.errorMessage?m.errorMessage:m.message?m.message:m.children}),[]),f=r((function(){return m.actions?m.actions:null}),[]);return e.createElement(s,null,m.dismiss&&e.createElement(o,{onClick:m.dismiss},e.createElement(n,{round:!0,theme:"red",size:"regular"},e.createElement(t,null))),e.createElement(a,null,u),c&&e.createElement(l,{hasError:Boolean(m.errorMessage&&!0)},c),e.createElement(i,null,Array.isArray(f)&&f.map((function(e){return e}))))};export{m as default};

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

@@ -1,12 +1 @@
-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
+import{__makeTemplateObject as n}from"../../_virtual/_tslib.js";import o,{css as i}from"styled-components";var t,p,a,d,r,e,x=o.div.withConfig({displayName:"Modalstyles__Wrapper",componentId:"sc-1kydg2d-0"})(t||(t=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"],["\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"]))),s=o.div.withConfig({displayName:"Modalstyles__Title",componentId:"sc-1kydg2d-1"})(p||(p=n(["\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"]))),l=o.div.withConfig({displayName:"Modalstyles__Content",componentId:"sc-1kydg2d-2"})(d||(d=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"],["\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(o){return o.hasError&&i(a||(a=n(["\n    box-shadow: 0px 0px 3px 1px #ff000055;\n  "],["\n    box-shadow: 0px 0px 3px 1px #ff000055;\n  "])))})),f=o.div.withConfig({displayName:"Modalstyles__Actions",componentId:"sc-1kydg2d-3"})(r||(r=n(["\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"]))),g=o.div.withConfig({displayName:"Modalstyles__QuitButton",componentId:"sc-1kydg2d-4"})(e||(e=n(["\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"])));export{f as Actions,l as Content,g as QuitButton,s as Title,x as Wrapper};