@sellout/ui 0.0.5 → 0.0.7

package/build/index.js

@@ -0,0 +1,380 @@
+'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 proRegularSvgIcons = require('@fortawesome/pro-regular-svg-icons');
+var freeSolidSvgIcons = require('@fortawesome/free-solid-svg-icons');
+var freeRegularSvgIcons = require('@fortawesome/free-regular-svg-icons');
+var proLightSvgIcons = require('@fortawesome/pro-light-svg-icons');
+var proSolidSvgIcons = require('@fortawesome/pro-solid-svg-icons');
+var AnimateHeight = _interopDefault(require('react-animate-height'));
+
+(function (Colors) {
+    Colors["White"] = "#FFFFFF";
+    Colors["OffWhite"] = "#FCFCFC";
+    Colors["Blue"] = "#020151";
+    Colors["Red"] = "#E63946";
+    Colors["Orange"] = "#FF700F";
+    Colors["DarkOrange"] = "#D65600";
+    Colors["Grey1"] = "#333333";
+    Colors["Grey2"] = "#4F4F4F";
+    Colors["Grey3"] = "#828282";
+    Colors["Grey4"] = "#BDBDBD";
+    Colors["Grey5"] = "#E0E0E0";
+    Colors["Grey6"] = "#F2F2F2";
+})(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["VerySmall"] = "VerySmall";
+    LoaderSizes["Small"] = "Small";
+    LoaderSizes["Medium"] = "Medium";
+    LoaderSizes["Large"] = "Large";
+})(exports.LoaderSizes || (exports.LoaderSizes = {}));
+var LoaderSizesMap = (_a = {},
+    _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;
+
+(function (ButtonTypes) {
+    ButtonTypes["Submit"] = "Submit";
+})(exports.ButtonTypes || (exports.ButtonTypes = {}));
+(function (ButtonStates) {
+    ButtonStates["Active"] = "Active";
+})(exports.ButtonStates || (exports.ButtonStates = {}));
+var StyledButton = styled.div(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  position: relative;\n  height: 40px;\n  width: 100%;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: center;\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  justify-content: center;\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, (function () {
+            if (loading) {
+                return React__default.createElement(Loader, { size: exports.LoaderSizes.VerySmall });
+            }
+            return (React__default.createElement(Text, { type: type, icon: Boolean(icon) }, text));
+        })()));
+    })()));
+}
+var templateObject_1$1, templateObject_2;
+
+// import { library } from "@fortawesome/fontawesome-svg-core";
+var IconEnum = {
+    AudienceRegular: proRegularSvgIcons.faUserFriends,
+    BoxOfficeRegular: proRegularSvgIcons.faCashRegister,
+    CalculatorRegular: proRegularSvgIcons.faCalculator,
+    CalendarStarRegular: proRegularSvgIcons.faCalendarStar,
+    Check: proRegularSvgIcons.faCheck,
+    Cheers: proRegularSvgIcons.faGlassCheers,
+    Clipboard: proRegularSvgIcons.faClipboardList,
+    CrownRegular: proRegularSvgIcons.faCrown,
+    DashboardRegular: proRegularSvgIcons.faTachometer,
+    DeleteRegular: proRegularSvgIcons.faTrash,
+    Dollar: proRegularSvgIcons.faDollarSign,
+    DownArrow: proRegularSvgIcons.faArrowAltDown,
+    DownloadReport: proRegularSvgIcons.faFileDownload,
+    Embed: proRegularSvgIcons.faCode,
+    Export: proRegularSvgIcons.faFileExport,
+    FeeRegular: proRegularSvgIcons.faUsdSquare,
+    FilterRegular: proRegularSvgIcons.faFilter,
+    GlobeRegular: proRegularSvgIcons.faGlobeAmericas,
+    GraphGrowth: proRegularSvgIcons.faChartLine,
+    KeyRegular: proRegularSvgIcons.faKeySkeleton,
+    LeftChevron: proRegularSvgIcons.faChevronLeft,
+    Link: proRegularSvgIcons.faLink,
+    MicrophoneRegular: proRegularSvgIcons.faMicrophoneAlt,
+    PrintRegular: proRegularSvgIcons.faPrint,
+    ReceiptRegular: proRegularSvgIcons.faReceipt,
+    ReportRegular: proRegularSvgIcons.faFileChartLine,
+    SearchRegular: proRegularSvgIcons.faSearch,
+    TicketRegular: proRegularSvgIcons.faTicketAlt,
+    Unlock: proRegularSvgIcons.faUnlock,
+    UpArrow: proRegularSvgIcons.faArrowAltUp,
+    UpgradeRegular: proRegularSvgIcons.faArrowAltSquareUp,
+    Upload: proRegularSvgIcons.faUpload,
+    UsersRegular: proRegularSvgIcons.faUsers,
+    VenueRegular: proRegularSvgIcons.faLandmark,
+    AudienceSolid: freeSolidSvgIcons.faUserFriends,
+    BackArrow: freeSolidSvgIcons.faArrowLeft,
+    Bold: freeSolidSvgIcons.faBold,
+    BoxOfficeSolid: freeSolidSvgIcons.faCashRegister,
+    Bullhorn: 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,
+    Italic: freeSolidSvgIcons.faItalic,
+    MicrophoneSolid: freeSolidSvgIcons.faMicrophoneAlt,
+    Mobile: freeSolidSvgIcons.faMobileAlt,
+    PlusCircle: freeSolidSvgIcons.faPlusCircle,
+    PrintSolid: freeSolidSvgIcons.faPrint,
+    ReceiptSolid: freeSolidSvgIcons.faReceipt,
+    RightChevronCircle: freeSolidSvgIcons.faChevronCircleRight,
+    SearchSolid: freeSolidSvgIcons.faSearch,
+    Sort: freeSolidSvgIcons.faSort,
+    TicketSolid: freeSolidSvgIcons.faTicketAlt,
+    Underline: freeSolidSvgIcons.faUnderline,
+    UserCircle: freeSolidSvgIcons.faUserCircle,
+    UserSolid: freeSolidSvgIcons.faUser,
+    UsersSolid: freeSolidSvgIcons.faUsers,
+    VenueSolid: freeSolidSvgIcons.faLandmark,
+    Warning: freeSolidSvgIcons.faExclamationTriangle,
+    Calendar: freeRegularSvgIcons.faCalendarAlt,
+    Clock: freeRegularSvgIcons.faClock,
+    CopyRegular: freeRegularSvgIcons.faCopy,
+    Edit: freeRegularSvgIcons.faEdit,
+    EyeRegular: freeRegularSvgIcons.faEye,
+    EyeSlashRegular: freeRegularSvgIcons.faEyeSlash,
+    HelpRegular: freeRegularSvgIcons.faQuestionCircle,
+    SadTear: freeRegularSvgIcons.faSadTear,
+    UserRegular: freeRegularSvgIcons.faUser,
+    CalendarDayLight: proLightSvgIcons.faCalendarDay,
+    mapPinLight: proLightSvgIcons.faMapMarkerAlt,
+    MinusCircleLight: proLightSvgIcons.faMinusCircle,
+    PlusCircleLight: proLightSvgIcons.faPlusCircle,
+    CalendarStarSolid: proSolidSvgIcons.faCalendarStar,
+    CreditCardFront: proSolidSvgIcons.faCreditCardFront,
+    DashboardSolid: proSolidSvgIcons.faTachometer,
+    FeeSolid: proSolidSvgIcons.faUsdSquare,
+    KeySolid: proSolidSvgIcons.faKeySkeleton,
+    LongRightArrow: proSolidSvgIcons.faLongArrowRight,
+    ReportSolid: proSolidSvgIcons.faFileChartLine,
+    SortBy: proSolidSvgIcons.faSortAlt,
+    UpgradeSolid: proSolidSvgIcons.faArrowAltSquareUp,
+};
+
+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.onClick, onClick = _d === void 0 ? function () { } : _d, _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;
+    return (React__default.createElement(reactFontawesome.FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
+            color: color,
+            top: top,
+            left: left,
+            right: right,
+            position: position,
+            zIndex: zIndex,
+            fontSize: size,
+            transition: "all 0.2s"
+        } }));
+}
+
+var Container = styled.div(templateObject_1$2 || (templateObject_1$2 = __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, 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$2, templateObject_2$1, templateObject_3;
+
+var Form = styled.form(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\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  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) {
+    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 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;
+    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); } },
+        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, { 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$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
+
+var Row = styled.div(templateObject_1$4 || (templateObject_1$4 = __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$1 = styled.div(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  background-color: ", ";\n  padding: 15px;\n"], ["\n  background-color: ", ";\n  padding: 15px;\n"])), exports.Colors.White);
+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$1, null,
+        React__default.createElement(Row, { justify: "space-between" },
+            React__default.createElement(Column, null,
+                React__default.createElement(Title, null, title),
+                React__default.createElement(Price, null,
+                    "$",
+                    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$4, templateObject_2$3, templateObject_3$2, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9;
+
+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;

package/package.json

@@ -1,7 +1,22 @@
 {
   "name": "@sellout/ui",
-  "version": "0.0.5",
-  "dependencies": {
+  "version": "0.0.7",
+  "main": "build/index.js",
+  "module": "build/index.es.js",
+  "jsnext:main": "build/index.es.js",
+  "scripts": {
+    "prepare": "npm run build",
+    "build": "rollup -c",
+    "start": "rollup -c -w",
+    "test": "jest --coverage",
+    "storybook": "start-storybook -p 9009 -s public",
+    "build-storybook": "build-storybook -s public"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.7.7",
     "@fortawesome/fontawesome-svg-core": "^1.2.27",
     "@fortawesome/free-regular-svg-icons": "^5.12.1",
     "@fortawesome/free-solid-svg-icons": "^5.12.1",
@@ -9,55 +24,58 @@
     "@fortawesome/pro-regular-svg-icons": "^5.12.1",
     "@fortawesome/pro-solid-svg-icons": "^5.12.1",
     "@fortawesome/react-fontawesome": "^0.1.9",
-    "@rehooks/component-size": "^1.0.3",
-    "@sellout/utils": "^0.0.5",
+    "@sellout/utils": "^0.0.7",
+    "@storybook/addon-actions": "^5.3.17",
+    "@storybook/addon-links": "^5.3.17",
+    "@storybook/react": "^5.2.8",
     "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
+    "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
-    "@types/jest": "^24.9.1",
-    "@types/node": "^12.12.30",
-    "@types/react": "^16.9.23",
-    "@types/react-dom": "^16.9.5",
+    "@types/jest": "^24.0.24",
+    "@types/react": "^16.9.17",
+    "@types/react-dom": "^16.9.4",
+    "@types/styled-components": "^5.0.1",
+    "awesome-typescript-loader": "^5.2.1",
+    "babel-loader": "^8.0.6",
+    "jest": "^24.9.0",
     "polished": "^3.4.4",
     "react": "^16.13.0",
     "react-animate-height": "^2.0.20",
     "react-dom": "^16.13.0",
-    "react-scripts": "3.4.0",
-    "styled-components": "^5.0.1",
+    "rollup": "^1.27.13",
+    "rollup-plugin-commonjs": "^10.1.0",
+    "rollup-plugin-node-resolve": "^5.2.0",
+    "rollup-plugin-peer-deps-external": "^2.2.0",
+    "rollup-plugin-typescript2": "^0.25.3",
+    "standard": "^14.3.1",
+    "ts-jest": "^24.2.0",
     "typescript": "^3.7.5"
   },
-  "scripts": {
-    "prepare": "npm run build",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 9009 -s public",
-    "build-storybook": "build-storybook -s public"
+  "gitHead": "991f3c469d9cd9754715c231b3c5cc7b7b6bfaf5",
+  "peerDependencies": {
+    "react": "^16",
+    "react-dom": "^16",
+    "styled-components": "^5.0.1"
   },
-  "eslintConfig": {
-    "extends": "react-app"
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "jsdom",
+    "testPathIgnorePatterns": [
+      "build/"
+    ]
   },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
+  "standard": {
+    "ignore": [
+      "node_modules/",
+      "build/"
     ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
+    "globals": [
+      "describe",
+      "it",
+      "test",
+      "expect",
+      "afterAll",
+      "jest"
     ]
-  },
-  "devDependencies": {
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-links": "^5.3.17",
-    "@storybook/addons": "^5.3.17",
-    "@storybook/preset-create-react-app": "^2.0.0",
-    "@storybook/react": "^5.3.17",
-    "@types/styled-components": "^5.0.1",
-    "csvtojson": "^2.0.10"
-  },
-  "gitHead": "5af90cec2aeb461ce24ab03508bd8cb705de8ae3"
+  }
 }

package/rollup.config.js

@@ -0,0 +1,18 @@
+import typescript from "rollup-plugin-typescript2";
+import pkg from "./package.json";
+
+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" },
+    ]
+  }
+];

package/src/Colors.ts

@@ -1,5 +1,7 @@
 export enum Colors {
   White = "#FFFFFF",
+  OffWhite  = '#FCFCFC',
+  Blue = '#020151',
   Red = "#E63946",
   Orange = "#FF700F",
   DarkOrange = "#D65600",

package/src/components/Button.tsx

@@ -38,6 +38,7 @@ const StyledButton = styled.div<StyledButtonProps>`
     if (props.type === ButtonTypes.Submit) {
       return Colors.Orange;
     }
+    return null;
   }};
 
   &:hover {
@@ -46,6 +47,7 @@ const StyledButton = styled.div<StyledButtonProps>`
       if (props.onClick && props.type === ButtonTypes.Submit) {
         return Polished.lighten(0.025, Colors.Orange);
       }
+      return null;
     }};
   }
 
@@ -55,6 +57,7 @@ const StyledButton = styled.div<StyledButtonProps>`
       if (props.onClick && props.type === ButtonTypes.Submit) {
         return Polished.darken(0.025, Colors.Orange);
       }
+      return null;
     }};
   }
 `;
@@ -73,6 +76,7 @@ const Text = styled.span<TextProps>`
     if (props.type === ButtonTypes.Submit) {
       return Colors.White;
     }
+    return null;
   }};
 `;
 

package/src/components/Icon.tsx

@@ -7,7 +7,7 @@ export const Icons = IconEnum;
 
 export type IconProps = {
   icon: any;
-  color?: Colors | null;
+  color?: Colors | string | null;
   onClick?: any | null;
   size?: string | number | undefined;
   position?: string;

package/src/components/Input.tsx

@@ -1,5 +1,5 @@
 import React, { Fragment, useState } from "react";
-import styled from 'styled-components';
+import styled from "styled-components";
 import * as Polished from 'polished';
 import { Colors } from "../Colors";
 import Icon, { Icons } from './Icon'

package/src/components/Product.tsx

@@ -4,7 +4,7 @@ import * as Polished from "polished";
 import AnimateHeight from "react-animate-height";
 import { Colors } from "../Colors";
 import Counter, { CounterProps } from './Counter';
-import * as PriceUtil from '@sellout/utils/.dist/price';
+// import * as PriceUtil from '@sellout/utils/.dist/price';
 // import Icon from "./Icon";
 
 type RowProps = {
@@ -124,7 +124,7 @@ export default function Product({
       <Row justify="space-between">
         <Column>
           <Title>{title}</Title>
-          <Price>{PriceUtil.output(price)}</Price>
+          <Price>${price}</Price>
         </Column>
         <Counter
           value={value}
@@ -136,23 +136,23 @@ export default function Product({
       </Row>
       <Row>
         {subtitle && <Subtitle>{subtitle}</Subtitle>}
-        {(() => {
-          if (!description) return;
-
-          return (
-            <Fragment>
-              <AnimateHeight height={showMore ? "auto" : 67}>
-                <Ellipsis active={showEllipsis}>
-                  <Description>{description}</Description>
-                </Ellipsis>
-              </AnimateHeight>
-              <ShowMore onClick={() => toggle()}>
-                {showMore ? "Show Less" : "Show More"}
-              </ShowMore>
-            </Fragment>
-          );
-        })()}
       </Row>
+      {(() => {
+        if (!description) return;
+
+        return (
+          <Fragment>
+            <AnimateHeight height={showMore ? "auto" : 67}>
+              <Ellipsis active={showEllipsis}>
+                <Description>{description}</Description>
+              </Ellipsis>
+            </AnimateHeight>
+            <ShowMore onClick={() => toggle()}>
+              {showMore ? "Show Less" : "Show More"}
+            </ShowMore>
+          </Fragment>
+        );
+      })()}
     </Container>
   );
 }