@sellout/ui 0.0.57 → 0.0.60

package/build/index.js

@@ -1,453 +1,27 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = require('react');
-var React__default = _interopDefault(React);
-var styled = _interopDefault(require('styled-components'));
-var Polished = require('polished');
-var reactFontawesome = require('@fortawesome/react-fontawesome');
-var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
-var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
-var proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
-var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
-var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
-var AnimateHeight = _interopDefault(require('react-animate-height'));
-var PriceUtil = require('@sellout/utils/.dist/price');
-
-(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";
-})(exports.Colors || (exports.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;
-(function (LoaderSizes) {
-    LoaderSizes["FuckingTiny"] = "FuckingTiny";
-    LoaderSizes["SuperSmall"] = "SuperSmall";
-    LoaderSizes["VerySmall"] = "VerySmall";
-    LoaderSizes["Small"] = "Small";
-    LoaderSizes["Medium"] = "Medium";
-    LoaderSizes["Large"] = "Large";
-})(exports.LoaderSizes || (exports.LoaderSizes = {}));
-var LoaderSizesMap = (_a = {},
-    _a[exports.LoaderSizes.FuckingTiny] = 14,
-    _a[exports.LoaderSizes.SuperSmall] = 20,
-    _a[exports.LoaderSizes.VerySmall] = 24,
-    _a[exports.LoaderSizes.Small] = 30,
-    _a[exports.LoaderSizes.Medium] = 40,
-    _a[exports.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 ? exports.LoaderSizes.Medium : _b, _c = _a.color, color = _c === void 0 ? exports.Colors.White : _c;
-    return (React__default.createElement(StyledLoader, { size: LoaderSizesMap[size], color: color },
-        React__default.createElement("div", { className: "lds-ring" },
-            React__default.createElement("div", null),
-            React__default.createElement("div", null),
-            React__default.createElement("div", null))));
-}
-var templateObject_1;
-
-var IconEnum = {
-    AnalyticsLight: proLightSvgIcons.faAnalytics,
-    BellLight: proLightSvgIcons.faBell,
-    BoxOfficeLight: proLightSvgIcons.faCashRegister,
-    BullHornLight: proLightSvgIcons.faBullhorn,
-    CalendarDayLight: proLightSvgIcons.faCalendarDay,
-    CalendarLight: proLightSvgIcons.faCalendarAlt,
-    CalendarStarLight: proLightSvgIcons.faCalendarStar,
-    CheckLight: proLightSvgIcons.faCheck,
-    EnvelopeLight: proLightSvgIcons.faEnvelope,
-    EnvelopeOpenRegular: proLightSvgIcons.faEnvelopeOpenText,
-    ExportLight: proLightSvgIcons.faFileExport,
-    FilterLight: proLightSvgIcons.faFilter,
-    HelpLight: proLightSvgIcons.faQuestionCircle,
-    HomeLight: proLightSvgIcons.faHome,
-    Lock: proLightSvgIcons.faLock,
-    mapPinLight: proLightSvgIcons.faMapMarkerAlt,
-    MicrophoneLight: proLightSvgIcons.faMicrophoneAlt,
-    MinusCircleLight: proLightSvgIcons.faMinusCircle,
-    MobileLight: proLightSvgIcons.faMobileAlt,
-    PlusCircleLight: proLightSvgIcons.faPlusCircle,
-    ReceiptLight: proLightSvgIcons.faReceipt,
-    SearchLight: proLightSvgIcons.faSearch,
-    SortByLight: proLightSvgIcons.faSortAlt,
-    UnlockLight: proLightSvgIcons.faUnlock,
-    UploadLight: proLightSvgIcons.faUpload,
-    UserLight: proLightSvgIcons.faUser,
-    UsersLight: proLightSvgIcons.faUsers,
-    VenueLight: proLightSvgIcons.faLandmark,
-    AnalyticsSolid: proSolidSvgIcons.faAnalytics,
-    CalendarStarSolid: proSolidSvgIcons.faCalendarStar,
-    CreditCardFront: proSolidSvgIcons.faCreditCardFront,
-    FeeSolid: proSolidSvgIcons.faUsdSquare,
-    KeySolid: proSolidSvgIcons.faKey,
-    LongRightArrow: proSolidSvgIcons.faLongArrowRight,
-    ReportSolid: proSolidSvgIcons.faFileChartLine,
-    SortBy: proSolidSvgIcons.faSortAlt,
-    UpgradeSolid: proSolidSvgIcons.faArrowAltSquareUp,
-    AudienceRegular: proRegularSvgIcons.faUserFriends,
-    BoldRegular: proRegularSvgIcons.faBold,
-    CalculatorRegular: proRegularSvgIcons.faCalculator,
-    CheckRegular: proRegularSvgIcons.faCheck,
-    Cheers: proRegularSvgIcons.faGlassCheers,
-    Clipboard: proRegularSvgIcons.faClipboardList,
-    CrownRegular: proRegularSvgIcons.faCrown,
-    DeleteRegular: proRegularSvgIcons.faTrash,
-    Dollar: proRegularSvgIcons.faDollarSign,
-    DownArrow: proRegularSvgIcons.faArrowAltDown,
-    DownloadReport: proRegularSvgIcons.faFileDownload,
-    Embed: proRegularSvgIcons.faCode,
-    FeeRegular: proRegularSvgIcons.faUsdSquare,
-    FilterRegular: proRegularSvgIcons.faFilter,
-    GlobeRegular: proRegularSvgIcons.faGlobeAmericas,
-    GraphGrowth: proRegularSvgIcons.faChartLine,
-    ItalicRegular: proRegularSvgIcons.faItalic,
-    KeyRegular: proRegularSvgIcons.faKey,
-    LeftChevronRegular: proRegularSvgIcons.faChevronLeft,
-    LinkRegular: proRegularSvgIcons.faLink,
-    OListRegular: proRegularSvgIcons.faListOl,
-    PrintRegular: proRegularSvgIcons.faPrint,
-    ReportRegular: proRegularSvgIcons.faFileChartLine,
-    SearchRegular: proRegularSvgIcons.faSearch,
-    Settings: proRegularSvgIcons.faCog,
-    SignOut: proRegularSvgIcons.faSignOut,
-    SyncRegular: proRegularSvgIcons.faSync,
-    TicketRegular: proRegularSvgIcons.faTicketAlt,
-    UListRegular: proRegularSvgIcons.faListUl,
-    UnderlineRegular: proRegularSvgIcons.faUnderline,
-    UnlockRegular: proRegularSvgIcons.faUnlock,
-    UpArrow: proRegularSvgIcons.faArrowAltUp,
-    Update: proRegularSvgIcons.faMegaphone,
-    UpgradeRegular: proRegularSvgIcons.faArrowAltSquareUp,
-    UsersRegular: proRegularSvgIcons.faUsers,
-    GiftRegular: proRegularSvgIcons.faGift,
-    AudienceSolid: freeSolidSvgIcons.faUserFriends,
-    BackArrow: freeSolidSvgIcons.faArrowLeft,
-    BoxOfficeSolid: freeSolidSvgIcons.faCashRegister,
-    BullhornSolid: freeSolidSvgIcons.faBullhorn,
-    CalculatorSolid: freeSolidSvgIcons.faCalculator,
-    CalendarDaySolid: freeSolidSvgIcons.faCalendarDay,
-    Cancel: freeSolidSvgIcons.faTimes,
-    CancelCircle: freeSolidSvgIcons.faTimesCircle,
-    CaretDown: freeSolidSvgIcons.faCaretDown,
-    Cash: freeSolidSvgIcons.faMoneyBill,
-    CheckCircle: freeSolidSvgIcons.faCheckCircle,
-    CopySolid: freeSolidSvgIcons.faCopy,
-    CreditCardBack: freeSolidSvgIcons.faCreditCard,
-    CrownSolid: freeSolidSvgIcons.faCrown,
-    Cursor: freeSolidSvgIcons.faICursor,
-    DeleteSolid: freeSolidSvgIcons.faTrash,
-    EnvelopeSolid: freeSolidSvgIcons.faEnvelope,
-    EyeSolid: freeSolidSvgIcons.faEye,
-    HelpSolid: freeSolidSvgIcons.faQuestionCircle,
-    HomeSolid: freeSolidSvgIcons.faHome,
-    InfotipSolid: freeSolidSvgIcons.faInfoCircle,
-    LeftArrowSolid: freeSolidSvgIcons.faArrowLeft,
-    LeftChevronSolid: freeSolidSvgIcons.faChevronLeft,
-    Menu: freeSolidSvgIcons.faBars,
-    MicrophoneSolid: freeSolidSvgIcons.faMicrophoneAlt,
-    MobileSolid: freeSolidSvgIcons.faMobileAlt,
-    Plus: freeSolidSvgIcons.faPlus,
-    PlusCircle: freeSolidSvgIcons.faPlusCircle,
-    PrintSolid: freeSolidSvgIcons.faPrint,
-    ReceiptSolid: freeSolidSvgIcons.faReceipt,
-    RightChevronCircle: freeSolidSvgIcons.faChevronCircleRight,
-    RightChevronSolid: freeSolidSvgIcons.faChevronRight,
-    SearchSolid: freeSolidSvgIcons.faSearch,
-    Sort: freeSolidSvgIcons.faSort,
-    ThumbsDownSolid: freeSolidSvgIcons.faThumbsDown,
-    ThumbsUpSolid: freeSolidSvgIcons.faThumbsUp,
-    TicketSolid: freeSolidSvgIcons.faTicketAlt,
-    UserCircle: freeSolidSvgIcons.faUserCircle,
-    UserSolid: freeSolidSvgIcons.faUser,
-    UsersSolid: freeSolidSvgIcons.faUsers,
-    VenueSolid: freeSolidSvgIcons.faLandmark,
-    Warning: freeSolidSvgIcons.faExclamationTriangle,
-    CalendarRegular: freeRegularSvgIcons.faCalendarAlt,
-    Clock: freeRegularSvgIcons.faClock,
-    CopyRegular: freeRegularSvgIcons.faCopy,
-    Edit: freeRegularSvgIcons.faEdit,
-    EyeRegular: freeRegularSvgIcons.faEye,
-    EyeSlashRegular: freeRegularSvgIcons.faEyeSlash,
-    Help: freeRegularSvgIcons.faLifeRing,
-    SadTear: freeRegularSvgIcons.faSadTear,
-    UserRegular: freeRegularSvgIcons.faUser,
-};
-
-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 ? exports.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__default.createElement(Container, { color: color, hoverColor: hoverColor, "data-tip": tip },
-        React__default.createElement(reactFontawesome.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;
-
-(function (ButtonTypes) {
-    ButtonTypes["Submit"] = "Submit";
-})(exports.ButtonTypes || (exports.ButtonTypes = {}));
-(function (ButtonStates) {
-    ButtonStates["Active"] = "Active";
-})(exports.ButtonStates || (exports.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 === exports.ButtonTypes.Submit) {
-        return exports.Colors.Orange;
-    }
-    return null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    if (props.onClick && props.type === exports.ButtonTypes.Submit) {
-        return Polished.lighten(0.025, exports.Colors.Orange);
-    }
-    return null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    if (props.onClick && props.type === exports.ButtonTypes.Submit) {
-        return Polished.darken(0.025, exports.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 === exports.ButtonTypes.Submit) {
-        return exports.Colors.White;
-    }
-    return null;
-});
-function Button(_a) {
-    var _b = _a.type, type = _b === void 0 ? exports.ButtonTypes.Submit : _b, _c = _a.state, state = _c === void 0 ? exports.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__default.createElement(StyledButton, { type: type, onClick: loading ? null : function () { return onClick(); }, margin: margin, padding: padding, state: state }, (function () {
-        return (React__default.createElement(React.Fragment, null,
-            icon && (React__default.createElement(Icon, { icon: icon, color: exports.Colors.White })),
-            (function () {
-                if (loading) {
-                    return React__default.createElement(Loader, { size: exports.LoaderSizes.VerySmall });
-                }
-                return (text && (React__default.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 ? Polished.lighten(0.025, exports.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"])), exports.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__default.createElement(Container$1, null,
-        React__default.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
-            React__default.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? exports.Colors.Orange : exports.Colors.Grey5 })),
-        React__default.createElement(Value, null, value),
-        React__default.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
-            React__default.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? exports.Colors.Orange : exports.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 exports.Colors.Grey3;
-    if (props.hovered)
-        return exports.Colors.Grey4;
-    return exports.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"])), exports.Colors.White, function (props) {
-    return props.canSubmit ? exports.Colors.Orange : exports.Colors.Grey6;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    return props.canSubmit ? Polished.lighten(0.025, exports.Colors.Orange) : null;
-}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
-    return props.canSubmit ? Polished.darken(0.025, exports.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"])), exports.Colors.White, exports.Colors.Grey1, function (props) { return props.margin; }, function (props) { return props.padding; }, exports.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 = React.useState(false), hovered = _d[0], setHovered = _d[1];
-    var _e = React.useState(false), focused = _e[0], setFocused = _e[1];
-    var submit = function (event) {
-        event.preventDefault();
-        if (onSubmit && canSubmit && !loading) {
-            onSubmit();
-        }
-    };
-    return (React__default.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); }, width: width },
-        icon && (React__default.createElement(LeftContainer, null,
-            React__default.createElement(Icon, { icon: icon, size: 16, color: focused ? exports.Colors.Grey1 : exports.Colors.Grey4 }))),
-        React__default.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__default.createElement(React.Fragment, null,
-                    React__default.createElement(Spacer, null),
-                    React__default.createElement(Button$1, { canSubmit: canSubmit, onClick: function (event) { return submit(event); } }, (function () {
-                        if (loading) {
-                            return React__default.createElement(Loader, { size: exports.LoaderSizes.VerySmall });
-                        }
-                        return (React__default.createElement(Icon, { icon: Icons.RightChevronCircle, color: canSubmit ? exports.Colors.White : exports.Colors.Grey4, size: 16 }));
-                    })())));
-            }
-            if (Boolean(value) && onClear) {
-                return (React__default.createElement(React.Fragment, null,
-                    React__default.createElement(Spacer, null),
-                    React__default.createElement(RightContainer, { onClick: function () { return onClear(); } },
-                        React__default.createElement(Icon, { icon: Icons.CancelCircle, color: exports.Colors.Grey3, size: 16 }))));
-            }
-            return React__default.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"])), exports.Colors.White, exports.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"])), exports.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"])), exports.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"])), exports.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"])), exports.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"])), exports.Colors.Orange, Polished.lighten(0.025, exports.Colors.Orange), Polished.darken(0.025, exports.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 = React.useState(false), showMore = _f[0], setShowMore = _f[1];
-    var _g = React.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__default.createElement(Container$2, null,
-        React__default.createElement(Row, { justify: "space-between" },
-            React__default.createElement(Column, null,
-                React__default.createElement(Title, null, title),
-                React__default.createElement(Price, null,
-                    "$",
-                    PriceUtil.output(price))),
-            React__default.createElement(Counter, { value: value, minValue: minValue, maxValue: maxValue, onIncrement: onIncrement, onDecrement: onDecrement })),
-        React__default.createElement(Row, null, subtitle && React__default.createElement(Subtitle, null, subtitle)),
-        (function () {
-            if (!description)
-                return;
-            return (React__default.createElement(React.Fragment, null,
-                React__default.createElement(AnimateHeight, { height: showMore ? "auto" : 67 },
-                    React__default.createElement(Ellipsis, { active: showEllipsis },
-                        React__default.createElement(Description, null, description))),
-                React__default.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;
-
-exports.Button = Button;
-exports.Counter = Counter;
-exports.Icon = Icon;
-exports.Icons = Icons$1;
-exports.Input = Input;
-exports.Loader = Loader;
-exports.Product = Product;
-exports.makeEventHandler = makeEventHandler;
+export { Colors } from './Colors.js';
+export { default as Icon, Icons } from './components/Icon.js';
+export { default as Loader, LoaderSizes } from './components/Loader.js';
+export { default as Button } from './components/Button.js';
+export { default as CodeInput } from './components/CodeInput.js';
+export { default as Counter } from './components/Counter.js';
+export { default as Tip } from './components/Tip.js';
+export { default as Label } from './components/Label.js';
+export { default as Flex } from './components/Flex.js';
+export { default as Dropdown } from './components/Dropdown.js';
+export { default as MaxLength } from './components/MaxLength.js';
+import * as Motion from './components/Motion.js';
+export { Motion };
+export { default as ValidationError } from './components/ValidationError.js';
+import * as MediaQuery from './utils/MediaQuery.js';
+export { MediaQuery };
+export { default as Input } from './components/Input.js';
+export { default as PhoneNumberInput } from './components/PhoneNumberInput.js';
+export { default as Product } from './components/Product.js';
+export { default as TextButton } from './components/TextButton.js';
+export { default as UserImage } from './components/UserImage.js';
+export { default as UserInfo } from './components/UserInfo.js';
+import * as ErrorUtil from './utils/ErrorUtil.js';
+export { ErrorUtil };
+export { default as makeEventHandler } from './utils/makeEventHandler.js';
+import * as Validation from './utils/Validation.js';
+export { Validation };

package/build/utils/ErrorUtil.d.ts

@@ -0,0 +1 @@
+export declare function getErrorMessage(error: any): string;

package/build/utils/ErrorUtil.js

@@ -0,0 +1,18 @@
+function getErrorMessage(error) {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;
+    var defaultMessage = 'Something went wrong. Please contact support.';
+    if (!error)
+        return defaultMessage;
+    var errorMsg = (_c = (_b = (_a = error === null || error === void 0 ? void 0 : error.graphQLErrors) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b.message) !== null && _c !== void 0 ? _c : null;
+    if (errorMsg)
+        return errorMsg;
+    errorMsg = (_h = (_g = (_f = (_e = (_d = error.networkError) === null || _d === void 0 ? void 0 : _d.result) === null || _e === void 0 ? void 0 : _e.errors) === null || _f === void 0 ? void 0 : _f[0]) === null || _g === void 0 ? void 0 : _g.message) !== null && _h !== void 0 ? _h : null;
+    if (errorMsg)
+        return errorMsg;
+    errorMsg = (_o = (_m = (_l = (_k = (_j = error === null || error === void 0 ? void 0 : error.graphQLErrors) === null || _j === void 0 ? void 0 : _j[0]) === null || _k === void 0 ? void 0 : _k.extensions) === null || _l === void 0 ? void 0 : _l.exception) === null || _m === void 0 ? void 0 : _m.invalidArgs) !== null && _o !== void 0 ? _o : null;
+    if (errorMsg)
+        return errorMsg;
+    return defaultMessage;
+}
+
+export { getErrorMessage };

package/build/utils/MediaQuery.d.ts

@@ -0,0 +1,17 @@
+export declare const media: {
+    handheld: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    tablet: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    tabletOnly: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    mobile: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    desktop: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    largeDesktop: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    extraLargeDesktop: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    giant: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    print: (rulesTemplate: any, ...rulesRest: any[]) => any;
+    minWidth: (pxValue: any) => (rulesTemplate: any, ...rulesRest: any[]) => any;
+};
+export declare const useMedia: (query: any) => boolean;
+export declare const useMobileMedia: () => boolean;
+export declare const useDesktopMedia: () => boolean;
+export declare const useLargeDesktopMedia: () => boolean;
+export declare const useGiantMedia: () => boolean;

package/build/utils/MediaQuery.js

@@ -0,0 +1,64 @@
+import { __makeTemplateObject, __spreadArrays } from '../_virtual/_tslib.js';
+import { useState, useEffect } from 'react';
+import { css } from 'styled-components';
+
+var mediaQuery = function (queryTemplate) {
+    var queryRest = [];
+    for (var _i = 1; _i < arguments.length; _i++) {
+        queryRest[_i - 1] = arguments[_i];
+    }
+    return function (rulesTemplate) {
+        var rulesRest = [];
+        for (var _i = 1; _i < arguments.length; _i++) {
+            rulesRest[_i - 1] = arguments[_i];
+        }
+        return css(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    @media ", " {\n      ", "\n    }\n  "], ["\n    @media ", " {\n      ", "\n    }\n  "])), css.apply(void 0, __spreadArrays([queryTemplate], queryRest)), css.apply(void 0, __spreadArrays([rulesTemplate], rulesRest)));
+    };
+};
+var sizes = {
+    tablet: 768,
+    desktop: 992,
+    largeDesktop: 1200,
+    extraLargeDesktop: 1536,
+    giant: 1920,
+};
+var queryStrings = {
+    handheld: "(max-width: " + (sizes.tablet - 1) / 16 + "em)",
+    tablet: "(min-width: " + sizes.tablet / 16 + "em)",
+    tabletOnly: "(min-width: " + sizes.tablet / 16 + "em) and (max-width: " + (sizes.desktop - 1) / 16 + "em)",
+    mobile: "(max-width: " + (sizes.desktop - 1) / 16 + "em)",
+    desktop: "(min-width: " + sizes.desktop / 16 + "em)",
+    largeDesktop: "(min-width: " + sizes.largeDesktop / 16 + "em)",
+    extraLargeDesktop: "(min-width: " + sizes.extraLargeDesktop / 16 + "em)",
+    giant: "(min-width: " + sizes.giant / 16 + "em)",
+    print: 'print',
+};
+var media = {
+    handheld: mediaQuery(templateObject_2 || (templateObject_2 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.handheld),
+    tablet: mediaQuery(templateObject_3 || (templateObject_3 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.tablet),
+    tabletOnly: mediaQuery(templateObject_4 || (templateObject_4 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.tabletOnly),
+    mobile: mediaQuery(templateObject_5 || (templateObject_5 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.mobile),
+    desktop: mediaQuery(templateObject_6 || (templateObject_6 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.desktop),
+    largeDesktop: mediaQuery(templateObject_7 || (templateObject_7 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.largeDesktop),
+    extraLargeDesktop: mediaQuery(templateObject_8 || (templateObject_8 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.extraLargeDesktop),
+    giant: mediaQuery(templateObject_9 || (templateObject_9 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.giant),
+    print: mediaQuery(templateObject_10 || (templateObject_10 = __makeTemplateObject(["", ""], ["", ""])), queryStrings.print),
+    minWidth: function (pxValue) { return mediaQuery(templateObject_11 || (templateObject_11 = __makeTemplateObject(["(min-width: ", "em)"], ["(min-width: ", "em)"])), pxValue / 16); },
+};
+var useMedia = function (query) {
+    var matchQuery = window && window.matchMedia(query);
+    var _a = useState(matchQuery.matches), isMatch = _a[0], setIsMatch = _a[1];
+    useEffect(function () {
+        var handler = function () { return setIsMatch(matchQuery.matches); };
+        matchQuery.addListener(handler);
+        return function () { return matchQuery.removeListener(handler); };
+    }, [query, matchQuery]);
+    return isMatch;
+};
+var useMobileMedia = function () { return useMedia("" + queryStrings.mobile); };
+var useDesktopMedia = function () { return useMedia("" + queryStrings.desktop); };
+var useLargeDesktopMedia = function () { return useMedia("" + queryStrings.largeDesktop); };
+var useGiantMedia = function () { return useMedia("" + queryStrings.giant); };
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;
+
+export { media, useDesktopMedia, useGiantMedia, useLargeDesktopMedia, useMedia, useMobileMedia };

package/build/utils/Validation.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="hapi__joi" />
+import Joi from "@hapi/joi";
+export declare const email: Joi.StringSchema;
+export declare const password: Joi.StringSchema;
+export declare const fullName: Joi.StringSchema;
+export declare const phoneNumber: Joi.StringSchema;