@sellout/ui 0.0.57 → 0.0.60

package/build/utils/Validation.js

@@ -0,0 +1,53 @@
+import Joi from '@hapi/joi';
+
+// Email Validation
+var email = Joi
+    .string()
+    .required()
+    .email({ tlds: { allow: false } })
+    .error(function () {
+    return new Error('Please enter a valid email.');
+});
+// Password Validation
+// could force users to be more secure ->
+// https://stackoverflow.com/questions/19605150/regex-for-password-must-contain-at-least-eight-characters-at-least-one-number-a
+var password = Joi
+    .string()
+    .required()
+    .min(8)
+    .max(30)
+    .error(function (errors) {
+    return errors.map(function (error) {
+        console.log(error);
+        switch (error.code) {
+            case "string.min":
+                return new Error('Password must be greater than 8 Characters.');
+            case "string.max":
+                return new Error('Password must be fewer than 30 characters.');
+            case "string.empty":
+                return new Error('Please enter a password.');
+            default:
+                return new Error('Password validation error.');
+        }
+    });
+});
+// full name validation - only checks for first and last name via single space character
+// all characters are valid, gotta support X Æ A-12 now
+// should maybe fix, idk, it accepts stuff like Mike\tPollard
+var fullName = Joi
+    .string()
+    .required()
+    .pattern(new RegExp("^[^\\s]+(\\s[^\\s]+)+$"))
+    .error(function () {
+    return new Error('Please enter your first and last name');
+});
+// Phone number validation, need to test internationally
+var phoneNumber = Joi
+    .string()
+    .required()
+    .pattern(new RegExp("^(\\+\\d{1,2}\\s?)?1?\\-?\\.?\\s?\\(?\\d{3}\\)?[\\s.-]?\\d{3}[\\s.-]?\\d{4}$"))
+    .error(function () {
+    return new Error('Please enter a valid phone number.');
+});
+
+export { email, fullName, password, phoneNumber };

package/build/utils/makeEventHandler.js

@@ -0,0 +1,11 @@
+function makeEventHandler(executeOnEvent) {
+    if (executeOnEvent === void 0) { executeOnEvent = function () { }; }
+    return function (eventHandler) {
+        return function (event) {
+            executeOnEvent();
+            eventHandler(event.currentTarget.value);
+        };
+    };
+}
+
+export default makeEventHandler;

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@sellout/ui",
-  "version": "0.0.57",
+  "version": "0.0.60",
   "main": "build/index.js",
   "module": "build/index.es.js",
-  "jsnext:main": "build/index.es.js",
+  "files": [
+    "build"
+  ],
   "scripts": {
     "prepare": "npm run build",
     "build": "rollup -c",
@@ -31,6 +33,7 @@
     "jest": "^24.9.0",
     "rollup": "^1.27.13",
     "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-multi-input": "^1.1.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.0",
     "rollup-plugin-typescript2": "^0.25.3",
@@ -40,19 +43,24 @@
   },
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
+    "@fortawesome/free-brands-svg-icons": "^5.14.0",
     "@fortawesome/free-regular-svg-icons": "^5.12.1",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
     "@fortawesome/pro-light-svg-icons": "^5.12.1",
     "@fortawesome/pro-regular-svg-icons": "^5.12.1",
     "@fortawesome/pro-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.9",
-    "@sellout/utils": "^0.0.57",
+    "@hapi/joi": "^17.1.1",
+    "@sellout/utils": "^0.0.60",
     "@types/escape-html": "^1.0.0",
+    "@types/hapi__joi": "^16.0.12",
     "csvtojson": "^2.0.10",
+    "framer-motion": "^2.3.0",
     "polished": "^3.4.4",
-    "react-animate-height": "^2.0.20"
+    "react-animate-height": "^2.0.20",
+    "react-phone-input-2": "^2.13.7"
   },
-  "gitHead": "4b7ee38b9638a3026ffeb1ae30d4d10c795da2aa",
+  "gitHead": "551f1a01e488368e342661719a0946ad0071197b",
   "peerDependencies": {
     "react": "^16.13.0",
     "react-dom": "^16.13.0",

package/.storybook/config.js

@@ -1,3 +0,0 @@
-import { configure } from '@storybook/react'
-
-configure(require.context('../src', true, /\.stories\.js$/), module)

package/.storybook/preview-head.html

@@ -1,21 +0,0 @@
-<link href="https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700" rel="stylesheet" />
-<link href="https://use.typekit.net/suf4knx.css" rel="stylesheet" />
-
-<style>
-  html {
-    font-size: 62.5%;
-  }
-
-  body {
-    margin: 0;
-    font-family: 'neue-haas-grotesk-display', sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    font-size: 1.4rem;
-  }
-
-  code {
-    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-      monospace;
-  }
-</style>

package/.storybook/webpack.config.js

@@ -1,19 +0,0 @@
-const path = require('path')
-const SRC_PATH = path.join(__dirname, '../src')
-
-module.exports = ({ config }) => {
-  config.module.rules.push({
-    test: /\.(ts|tsx)$/,
-    include: [SRC_PATH],
-    use: [
-      {
-        loader: require.resolve('awesome-typescript-loader'),
-        options: {
-          configFileName: './tsconfig.json'
-        }
-      }
-    ]
-  })
-  config.resolve.extensions.push('.ts', '.tsx')
-  return config
-}

package/build/index.es.js

@@ -1,443 +0,0 @@
-import React, { Fragment, useState } from 'react';
-import styled from 'styled-components';
-import { lighten, darken } from 'polished';
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faAnalytics, faBell, faCashRegister, faBullhorn, faCalendarDay, faCalendarAlt, faCalendarStar, faCheck, faEnvelope, faEnvelopeOpenText, faFileExport, faFilter, faQuestionCircle, faHome, faLock, faMapMarkerAlt, faMicrophoneAlt, faMinusCircle, faMobileAlt, faPlusCircle, faReceipt, faSearch, faSortAlt, faUnlock, faUpload, faUser, faUsers, faLandmark } from '@fortawesome/pro-light-svg-icons';
-import { faAnalytics as faAnalytics$1, faCalendarStar as faCalendarStar$1, faCreditCardFront, faUsdSquare, faKey, faLongArrowRight, faFileChartLine, faSortAlt as faSortAlt$1, faArrowAltSquareUp } from '@fortawesome/pro-solid-svg-icons';
-import { faUserFriends, faBold, faCalculator, faCheck as faCheck$1, faGlassCheers, faClipboardList, faCrown, faTrash, faDollarSign, faArrowAltDown, faFileDownload, faCode, faUsdSquare as faUsdSquare$1, faFilter as faFilter$1, faGlobeAmericas, faChartLine, faItalic, faKey as faKey$1, faChevronLeft, faLink, faListOl, faPrint, faFileChartLine as faFileChartLine$1, faSearch as faSearch$1, faCog, faSignOut, faSync, faTicketAlt, faListUl, faUnderline, faUnlock as faUnlock$1, faArrowAltUp, faMegaphone, faArrowAltSquareUp as faArrowAltSquareUp$1, faUsers as faUsers$1, faGift } from '@fortawesome/pro-regular-svg-icons';
-import { faUserFriends as faUserFriends$1, faArrowLeft, faCashRegister as faCashRegister$1, faBullhorn as faBullhorn$1, faCalculator as faCalculator$1, faCalendarDay as faCalendarDay$1, faTimes, faTimesCircle, faCaretDown, faMoneyBill, faCheckCircle, faCopy, faCreditCard, faCrown as faCrown$1, faICursor, faTrash as faTrash$1, faEnvelope as faEnvelope$1, faEye, faQuestionCircle as faQuestionCircle$1, faHome as faHome$1, faInfoCircle, faChevronLeft as faChevronLeft$1, faBars, faMicrophoneAlt as faMicrophoneAlt$1, faMobileAlt as faMobileAlt$1, faPlus, faPlusCircle as faPlusCircle$1, faPrint as faPrint$1, faReceipt as faReceipt$1, faChevronCircleRight, faChevronRight, faSearch as faSearch$2, faSort, faThumbsDown, faThumbsUp, faTicketAlt as faTicketAlt$1, faUserCircle, faUser as faUser$1, faUsers as faUsers$2, faLandmark as faLandmark$1, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-import { faCalendarAlt as faCalendarAlt$1, faClock, faCopy as faCopy$1, faEdit, faEye as faEye$1, faEyeSlash, faLifeRing, faSadTear, faUser as faUser$2 } from '@fortawesome/free-regular-svg-icons';
-import AnimateHeight from 'react-animate-height';
-import { output } from '@sellout/utils/.dist/price';
-
-var Colors;
-(function (Colors) {
-    Colors["White"] = "#FFFFFF";
-    Colors["Black"] = "#000000";
-    Colors["Yellow"] = "#FFBA49";
-    // Green = "#419D78",
-    Colors["Green"] = "#42BB83";
-    Colors["OffWhite"] = "#FCFCFC";
-    Colors["LightBlue"] = "#39159C";
-    Colors["Blue"] = "#2D0E84";
-    Colors["DarkBlue"] = "#1D0858";
-    Colors["Red"] = "#E63946";
-    Colors["Orange"] = "#FF700F";
-    Colors["FadedOrange"] = "#FFF1E7";
-    Colors["LightOrange"] = "#FFBE93";
-    Colors["DarkOrange"] = "#D65600";
-    Colors["Grey1"] = "#333333";
-    Colors["Grey2"] = "#4F4F4F";
-    Colors["Grey3"] = "#828282";
-    Colors["Grey4"] = "#BDBDBD";
-    Colors["Grey5"] = "#E0E0E0";
-    Colors["Grey6"] = "#F2F2F2";
-    Colors["Grey7"] = "#F8F8F8";
-})(Colors || (Colors = {}));
-
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-}
-
-var _a;
-var LoaderSizes;
-(function (LoaderSizes) {
-    LoaderSizes["FuckingTiny"] = "FuckingTiny";
-    LoaderSizes["SuperSmall"] = "SuperSmall";
-    LoaderSizes["VerySmall"] = "VerySmall";
-    LoaderSizes["Small"] = "Small";
-    LoaderSizes["Medium"] = "Medium";
-    LoaderSizes["Large"] = "Large";
-})(LoaderSizes || (LoaderSizes = {}));
-var LoaderSizesMap = (_a = {},
-    _a[LoaderSizes.FuckingTiny] = 14,
-    _a[LoaderSizes.SuperSmall] = 20,
-    _a[LoaderSizes.VerySmall] = 24,
-    _a[LoaderSizes.Small] = 30,
-    _a[LoaderSizes.Medium] = 40,
-    _a[LoaderSizes.Large] = 60,
-    _a);
-var scale = function (size, scale) { return size * scale + "px"; };
-var StyledLoader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  top: 1.5px;\n\n  .lds-ring {\n    display: inline-block;\n    position: relative;\n    width: ", ";\n    height: ", ";\n  }\n  .lds-ring div {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: ", ";\n    height: ", ";\n    margin: ", ";\n    border: ", " solid ", ";\n    border-radius: 50%;\n    animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: ", " transparent transparent transparent;\n  }\n  .lds-ring div:nth-child(1) {\n    animation-delay: -0.3s;\n  }\n  .lds-ring div:nth-child(2) {\n    animation-delay: -0.2s;\n  }\n  .lds-ring div:nth-child(3) {\n    animation-delay: -0.1s;\n  }\n  @keyframes lds-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  position: relative;\n  top: 1.5px;\n\n  .lds-ring {\n    display: inline-block;\n    position: relative;\n    width: ", ";\n    height: ", ";\n  }\n  .lds-ring div {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: ", ";\n    height: ", ";\n    margin: ", ";\n    border: ", " solid ", ";\n    border-radius: 50%;\n    animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: ", " transparent transparent transparent;\n  }\n  .lds-ring div:nth-child(1) {\n    animation-delay: -0.3s;\n  }\n  .lds-ring div:nth-child(2) {\n    animation-delay: -0.2s;\n  }\n  .lds-ring div:nth-child(3) {\n    animation-delay: -0.1s;\n  }\n  @keyframes lds-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (props) { return scale(props.size, 1); }, function (props) { return scale(props.size, 1); }, function (props) { return scale(props.size, .8); }, function (props) { return scale(props.size, .8); }, function (props) { return scale(props.size, .1); }, function (props) { return scale(props.size, 0.066); }, function (props) { return props.color; }, function (props) { return props.color; });
-function Loader(_a) {
-    var _b = _a.size, size = _b === void 0 ? LoaderSizes.Medium : _b, _c = _a.color, color = _c === void 0 ? Colors.White : _c;
-    return (React.createElement(StyledLoader, { size: LoaderSizesMap[size], color: color },
-        React.createElement("div", { className: "lds-ring" },
-            React.createElement("div", null),
-            React.createElement("div", null),
-            React.createElement("div", null))));
-}
-var templateObject_1;
-
-var IconEnum = {
-    AnalyticsLight: faAnalytics,
-    BellLight: faBell,
-    BoxOfficeLight: faCashRegister,
-    BullHornLight: faBullhorn,
-    CalendarDayLight: faCalendarDay,
-    CalendarLight: faCalendarAlt,
-    CalendarStarLight: faCalendarStar,
-    CheckLight: faCheck,
-    EnvelopeLight: faEnvelope,
-    EnvelopeOpenRegular: faEnvelopeOpenText,
-    ExportLight: faFileExport,
-    FilterLight: faFilter,
-    HelpLight: faQuestionCircle,
-    HomeLight: faHome,
-    Lock: faLock,
-    mapPinLight: faMapMarkerAlt,
-    MicrophoneLight: faMicrophoneAlt,
-    MinusCircleLight: faMinusCircle,
-    MobileLight: faMobileAlt,
-    PlusCircleLight: faPlusCircle,
-    ReceiptLight: faReceipt,
-    SearchLight: faSearch,
-    SortByLight: faSortAlt,
-    UnlockLight: faUnlock,
-    UploadLight: faUpload,
-    UserLight: faUser,
-    UsersLight: faUsers,
-    VenueLight: faLandmark,
-    AnalyticsSolid: faAnalytics$1,
-    CalendarStarSolid: faCalendarStar$1,
-    CreditCardFront: faCreditCardFront,
-    FeeSolid: faUsdSquare,
-    KeySolid: faKey,
-    LongRightArrow: faLongArrowRight,
-    ReportSolid: faFileChartLine,
-    SortBy: faSortAlt$1,
-    UpgradeSolid: faArrowAltSquareUp,
-    AudienceRegular: faUserFriends,
-    BoldRegular: faBold,
-    CalculatorRegular: faCalculator,
-    CheckRegular: faCheck$1,
-    Cheers: faGlassCheers,
-    Clipboard: faClipboardList,
-    CrownRegular: faCrown,
-    DeleteRegular: faTrash,
-    Dollar: faDollarSign,
-    DownArrow: faArrowAltDown,
-    DownloadReport: faFileDownload,
-    Embed: faCode,
-    FeeRegular: faUsdSquare$1,
-    FilterRegular: faFilter$1,
-    GlobeRegular: faGlobeAmericas,
-    GraphGrowth: faChartLine,
-    ItalicRegular: faItalic,
-    KeyRegular: faKey$1,
-    LeftChevronRegular: faChevronLeft,
-    LinkRegular: faLink,
-    OListRegular: faListOl,
-    PrintRegular: faPrint,
-    ReportRegular: faFileChartLine$1,
-    SearchRegular: faSearch$1,
-    Settings: faCog,
-    SignOut: faSignOut,
-    SyncRegular: faSync,
-    TicketRegular: faTicketAlt,
-    UListRegular: faListUl,
-    UnderlineRegular: faUnderline,
-    UnlockRegular: faUnlock$1,
-    UpArrow: faArrowAltUp,
-    Update: faMegaphone,
-    UpgradeRegular: faArrowAltSquareUp$1,
-    UsersRegular: faUsers$1,
-    GiftRegular: faGift,
-    AudienceSolid: faUserFriends$1,
-    BackArrow: faArrowLeft,
-    BoxOfficeSolid: faCashRegister$1,
-    BullhornSolid: faBullhorn$1,
-    CalculatorSolid: faCalculator$1,
-    CalendarDaySolid: faCalendarDay$1,
-    Cancel: faTimes,
-    CancelCircle: faTimesCircle,
-    CaretDown: faCaretDown,
-    Cash: faMoneyBill,
-    CheckCircle: faCheckCircle,
-    CopySolid: faCopy,
-    CreditCardBack: faCreditCard,
-    CrownSolid: faCrown$1,
-    Cursor: faICursor,
-    DeleteSolid: faTrash$1,
-    EnvelopeSolid: faEnvelope$1,
-    EyeSolid: faEye,
-    HelpSolid: faQuestionCircle$1,
-    HomeSolid: faHome$1,
-    InfotipSolid: faInfoCircle,
-    LeftArrowSolid: faArrowLeft,
-    LeftChevronSolid: faChevronLeft$1,
-    Menu: faBars,
-    MicrophoneSolid: faMicrophoneAlt$1,
-    MobileSolid: faMobileAlt$1,
-    Plus: faPlus,
-    PlusCircle: faPlusCircle$1,
-    PrintSolid: faPrint$1,
-    ReceiptSolid: faReceipt$1,
-    RightChevronCircle: faChevronCircleRight,
-    RightChevronSolid: faChevronRight,
-    SearchSolid: faSearch$2,
-    Sort: faSort,
-    ThumbsDownSolid: faThumbsDown,
-    ThumbsUpSolid: faThumbsUp,
-    TicketSolid: faTicketAlt$1,
-    UserCircle: faUserCircle,
-    UserSolid: faUser$1,
-    UsersSolid: faUsers$2,
-    VenueSolid: faLandmark$1,
-    Warning: faExclamationTriangle,
-    CalendarRegular: faCalendarAlt$1,
-    Clock: faClock,
-    CopyRegular: faCopy$1,
-    Edit: faEdit,
-    EyeRegular: faEye$1,
-    EyeSlashRegular: faEyeSlash,
-    Help: faLifeRing,
-    SadTear: faSadTear,
-    UserRegular: faUser$2,
-};
-
-var Container = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  &:hover {\n    color: ",
-    ";\n  }\n"])), function (props) { return props.color; }, function (props) {
-    if (props.color === "inherit")
-        return null;
-    return props.hoverColor;
-});
-var Icons = IconEnum;
-function Icon(_a) {
-    var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, _d = _a.hoverColor, hoverColor = _d === void 0 ? null : _d, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 20 : _e, top = _a.top, left = _a.left, right = _a.right, _f = _a.position, position = _f === void 0 ? "relative" : _f, zIndex = _a.zIndex, margin = _a.margin, tip = _a.tip, transitionDuration = _a.transitionDuration, rotation = _a.rotation;
-    var cursor = onClick ? "pointer" : "";
-    if (icon === Icons.TicketRegular)
-        rotation = 90;
-    if (icon === Icons.TicketSolid)
-        rotation = 90;
-    return (React.createElement(Container, { color: color, hoverColor: hoverColor, "data-tip": tip },
-        React.createElement(FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
-                top: top,
-                left: left,
-                right: right,
-                position: position,
-                zIndex: zIndex,
-                fontSize: size,
-                transition: "all " + (transitionDuration || "0.2s"),
-                transform: rotation ? "rotate(" + rotation + "deg)" : undefined,
-                margin: margin,
-                cursor: cursor,
-            } })));
-}
-var templateObject_1$1;
-
-var ButtonTypes;
-(function (ButtonTypes) {
-    ButtonTypes["Submit"] = "Submit";
-})(ButtonTypes || (ButtonTypes = {}));
-var ButtonStates;
-(function (ButtonStates) {
-    ButtonStates["Active"] = "Active";
-})(ButtonStates || (ButtonStates = {}));
-var StyledButton = styled.div(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n  position: relative;\n  height: 40px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  border-radius: 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  background-color: ", ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  height: 40px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  white-space: nowrap;\n  text-align: center;\n  border-radius: 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  background-color: ",
-    ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ",
-    ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ",
-    ";\n  }\n"])), function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) { return (Boolean(props.padding) ? props.padding : "0px"); }, function (props) {
-    if (props.type === ButtonTypes.Submit) {
-        return Colors.Orange;
-    }
-    return null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    if (props.onClick && props.type === ButtonTypes.Submit) {
-        return lighten(0.025, Colors.Orange);
-    }
-    return null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    if (props.onClick && props.type === ButtonTypes.Submit) {
-        return darken(0.025, Colors.Orange);
-    }
-    return null;
-});
-var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 600;\n  text-transform: uppercase;\n  margin-left: ", ";\n  color: ",
-    ";\n"])), function (props) { return (props.icon ? "10px" : 0); }, function (props) {
-    if (props.type === ButtonTypes.Submit) {
-        return Colors.White;
-    }
-    return null;
-});
-function Button(_a) {
-    var _b = _a.type, type = _b === void 0 ? ButtonTypes.Submit : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, margin = _a.margin, padding = _a.padding, _e = _a.loading, loading = _e === void 0 ? false : _e;
-    return (React.createElement(StyledButton, { type: type, onClick: loading ? null : function () { return onClick(); }, margin: margin, padding: padding, state: state }, (function () {
-        return (React.createElement(Fragment, null,
-            icon && (React.createElement(Icon, { icon: icon, color: Colors.White })),
-            (function () {
-                if (loading) {
-                    return React.createElement(Loader, { size: LoaderSizes.VerySmall });
-                }
-                return (text && (React.createElement(Text, { type: type, icon: Boolean(icon) }, text)));
-            })()));
-    })()));
-}
-var templateObject_1$2, templateObject_2;
-
-var Container$1 = styled.div(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 85px;\n  min-height: 42px;\n  /* background-color: red; */\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: 85px;\n  min-height: 42px;\n  /* background-color: red; */\n"])));
-var IconContainer = styled.div(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  flex: 1;\n  /* background-color: blue; */\n  height: 100%;\n\n  &:hover {\n    cursor: ", ";\n  }\n\n  .svg-inline--fa {\n    color: ", " !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  flex: 1;\n  /* background-color: blue; */\n  height: 100%;\n\n  &:hover {\n    cursor: ", ";\n  }\n\n  .svg-inline--fa {\n    color: ",
-    " !important;\n  }\n"])), function (props) { return props.justify; }, function (props) { return (props.active ? "pointer" : null); }, function (props) {
-    return props.active ? lighten(0.025, Colors.Orange) : null;
-});
-var Value = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 2.4rem;\n  color: ", ";\n  min-width: 20px;\n  text-align: center;\n"], ["\n  font-size: 2.4rem;\n  color: ", ";\n  min-width: 20px;\n  text-align: center;\n"])), Colors.Grey1);
-function Counter(_a) {
-    var value = _a.value, maxValue = _a.maxValue, _b = _a.minValue, minValue = _b === void 0 ? 0 : _b, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
-    var canDecrement = value > minValue;
-    var canIncrement = Boolean(!Boolean(maxValue) || (maxValue && value < maxValue));
-    return (React.createElement(Container$1, null,
-        React.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
-            React.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? Colors.Orange : Colors.Grey5 })),
-        React.createElement(Value, null, value),
-        React.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
-            React.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? Colors.Orange : Colors.Grey5 }))));
-}
-var templateObject_1$3, templateObject_2$1, templateObject_3;
-
-var Form = styled.form(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  border-radius: 10px;\n  transition: all 0.2s;\n  border: 1px solid\n    ", ";\n"], ["\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  border-radius: 10px;\n  transition: all 0.2s;\n  border: 1px solid\n    ",
-    ";\n"])), function (props) { return props.width; }, function (props) {
-    if (props.focused)
-        return Colors.Grey3;
-    if (props.hovered)
-        return Colors.Grey4;
-    return Colors.Grey5;
-});
-var Button$1 = styled.div(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  height: 50px;\n  width: 50px;\n  border-radius: 0 10px 10px 0;\n  top: -1px;\n  right: -1px;\n  transition: all 0.2s;\n  background-color: ", ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  height: 50px;\n  width: 50px;\n  border-radius: 0 10px 10px 0;\n  top: -1px;\n  right: -1px;\n  transition: all 0.2s;\n  background-color: ",
-    ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ",
-    ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ",
-    ";\n  }\n"])), Colors.White, function (props) {
-    return props.canSubmit ? Colors.Orange : Colors.Grey6;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    return props.canSubmit ? lighten(0.025, Colors.Orange) : null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    return props.canSubmit ? darken(0.025, Colors.Orange) : null;
-});
-var LeftContainer = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 15px;\n  top: 0px;\n  left: 0px;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 15px;\n  top: 0px;\n  left: 0px;\n"])));
-var RightContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50px;\n  width: 50px;\n  top: -1px;\n  right: -1px;\n\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50px;\n  width: 50px;\n  top: -1px;\n  right: -1px;\n\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) { return (props.onClick ? "pointer" : null); });
-var Spacer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 50px;\n"], ["\n  width: 50px;\n"])));
-var InputStyled = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  border-radius: 10px;\n  height: 48px;\n  width: fill-available;\n  font-size: 1.4rem;\n  font-weight: 500;\n  padding: 0 0 0 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  \n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  border-radius: 10px;\n  height: 48px;\n  width: fill-available;\n  font-size: 1.4rem;\n  font-weight: 500;\n  padding: 0 0 0 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  \n  ::placeholder {\n    color: ", ";\n  }\n"])), Colors.White, Colors.Grey1, function (props) { return props.margin; }, function (props) { return props.padding; }, Colors.Grey4);
-function Input(_a) {
-    var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, icon = _a.icon, _b = _a.type, type = _b === void 0 ? 'text' : _b, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, onClear = _a.onClear, _c = _a.canSubmit, canSubmit = _c === void 0 ? true : _c, loading = _a.loading, margin = _a.margin, padding = _a.padding, width = _a.width;
-    var _d = useState(false), hovered = _d[0], setHovered = _d[1];
-    var _e = useState(false), focused = _e[0], setFocused = _e[1];
-    var submit = function (event) {
-        event.preventDefault();
-        if (onSubmit && canSubmit && !loading) {
-            onSubmit();
-        }
-    };
-    return (React.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); }, width: width },
-        icon && (React.createElement(LeftContainer, null,
-            React.createElement(Icon, { icon: icon, size: 16, color: focused ? Colors.Grey1 : Colors.Grey4 }))),
-        React.createElement(InputStyled, { ref: inputRef, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: onChange, onFocus: function (event) {
-                setFocused(true);
-                if (onFocus)
-                    onFocus(event);
-            }, onBlur: function (event) {
-                setFocused(false);
-                if (onFocus)
-                    onBlur(event);
-            }, onMouseEnter: function (event) {
-                setHovered(true);
-                if (onMouseEnter)
-                    onMouseEnter(event);
-            }, onMouseLeave: function (event) {
-                setHovered(false);
-                if (onMouseLeave)
-                    onMouseLeave(event);
-            }, margin: margin, padding: padding }),
-        (function () {
-            if (onSubmit) {
-                return (React.createElement(Fragment, null,
-                    React.createElement(Spacer, null),
-                    React.createElement(Button$1, { canSubmit: canSubmit, onClick: function (event) { return submit(event); } }, (function () {
-                        if (loading) {
-                            return React.createElement(Loader, { size: LoaderSizes.VerySmall });
-                        }
-                        return (React.createElement(Icon, { icon: Icons.RightChevronCircle, color: canSubmit ? Colors.White : Colors.Grey4, size: 16 }));
-                    })())));
-            }
-            if (Boolean(value) && onClear) {
-                return (React.createElement(Fragment, null,
-                    React.createElement(Spacer, null),
-                    React.createElement(RightContainer, { onClick: function () { return onClear(); } },
-                        React.createElement(Icon, { icon: Icons.CancelCircle, color: Colors.Grey3, size: 16 }))));
-            }
-            return React.createElement(Spacer, null);
-        })()));
-}
-var templateObject_1$4, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
-
-var Row = styled.div(templateObject_1$5 || (templateObject_1$5 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n"], ["\n  display: flex;\n  flex-direction: row;\n  justify-content: ", ";\n"])), function (props) { return props.justify; });
-var Column = styled.div(templateObject_2$3 || (templateObject_2$3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
-var Container$2 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 15px;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  padding: 15px;\n  border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
-var Title = styled.div(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n  font-size: 1.8rem;\n  color: ", ";\n  font-weight: 600;\n  margin-bottom: 5px;\n"], ["\n  font-size: 1.8rem;\n  color: ", ";\n  font-weight: 600;\n  margin-bottom: 5px;\n"])), Colors.Grey1);
-var Price = styled.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n"], ["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 5px;\n"])), Colors.Grey2);
-var Subtitle = styled.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n"])), Colors.Grey3);
-var Description = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  margin-top: 10px;\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  margin-top: 10px;\n"])), Colors.Grey2);
-var Ellipsis = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) { return props.active ? 3 : null; }, function (props) { return props.active ? 'vertical' : null; });
-var ShowMore = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), Colors.Orange, lighten(0.025, Colors.Orange), darken(0.025, Colors.Orange));
-function Product(_a) {
-    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.price, price = _c === void 0 ? 0 : _c, _d = _a.subtitle, subtitle = _d === void 0 ? '' : _d, _e = _a.description, description = _e === void 0 ? '' : _e, 
-    // Counter Props
-    value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
-    var _f = useState(false), showMore = _f[0], setShowMore = _f[1];
-    var _g = useState(true), showEllipsis = _g[0], setShowEllipsis = _g[1];
-    var descModified = description;
-    if (descModified.length > 210 && !showMore) {
-        descModified = descModified.substring(0, 210) + '...';
-    }
-    var toggle = function () {
-        setShowEllipsis(!showEllipsis);
-        setShowMore(!showMore);
-    };
-    return (React.createElement(Container$2, null,
-        React.createElement(Row, { justify: "space-between" },
-            React.createElement(Column, null,
-                React.createElement(Title, null, title),
-                React.createElement(Price, null,
-                    "$",
-                    output(price))),
-            React.createElement(Counter, { value: value, minValue: minValue, maxValue: maxValue, onIncrement: onIncrement, onDecrement: onDecrement })),
-        React.createElement(Row, null, subtitle && React.createElement(Subtitle, null, subtitle)),
-        (function () {
-            if (!description)
-                return;
-            return (React.createElement(Fragment, null,
-                React.createElement(AnimateHeight, { height: showMore ? "auto" : 67 },
-                    React.createElement(Ellipsis, { active: showEllipsis },
-                        React.createElement(Description, null, description))),
-                React.createElement(ShowMore, { onClick: function () { return toggle(); } }, showMore ? "Show Less" : "Show More")));
-        })()));
-}
-var templateObject_1$5, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
-
-function makeEventHandler(executeOnEvent) {
-    if (executeOnEvent === void 0) { executeOnEvent = function () { }; }
-    return function (eventHandler) {
-        return function (event) {
-            executeOnEvent();
-            eventHandler(event.currentTarget.value);
-        };
-    };
-}
-
-var Icons$1 = IconEnum;
-
-export { Button, ButtonStates, ButtonTypes, Colors, Counter, Icon, Icons$1 as Icons, Input, Loader, LoaderSizes, Product, makeEventHandler };

package/rollup.config.js

@@ -1,20 +0,0 @@
-import typescript from "rollup-plugin-typescript2";
-import pkg from "./package.json";
-
-console.log(Object.keys(pkg.peerDependencies || {}));
-
-export default [
-  {
-    input: "src/index.ts",
-    external: Object.keys(pkg.peerDependencies || {}),
-    plugins: [
-      typescript({
-        typescript: require("typescript")
-      })
-    ],
-    output: [
-      { file: pkg.main, format: "cjs" },
-      { file: pkg.module, format: "esm" },
-    ]
-  }
-];