@sellout/ui 0.0.7 → 0.0.9

package/build/Colors.d.ts

@@ -1,5 +1,7 @@
 export declare enum Colors {
     White = "#FFFFFF",
+    Black = "#000000",
+    Green = "#419D78",
     OffWhite = "#FCFCFC",
     Blue = "#020151",
     Red = "#E63946",
@@ -10,5 +12,6 @@ export declare enum Colors {
     Grey3 = "#828282",
     Grey4 = "#BDBDBD",
     Grey5 = "#E0E0E0",
-    Grey6 = "#F2F2F2"
+    Grey6 = "#F2F2F2",
+    Grey7 = "F8F8F8"
 }

package/build/components/Input.d.ts

@@ -1,10 +1,11 @@
-/// <reference types="react" />
+import React from "react";
 export declare type InputProps = {
+    inputRef?: React.Ref<HTMLInputElement>;
     autoFocus?: boolean | undefined;
     placeholder?: string;
     value: string;
     defaultValue?: string;
-    icon?: string;
+    icon?: any;
     type?: string;
     onMouseEnter?: any;
     onMouseLeave?: any;
@@ -17,5 +18,6 @@ export declare type InputProps = {
     loading?: boolean;
     margin?: string;
     padding?: string;
+    width?: string;
 };
-export default function Input({ autoFocus, placeholder, value, defaultValue, icon, type, onMouseEnter, onMouseLeave, onChange, onFocus, onBlur, onSubmit, onClear, canSubmit, loading, margin, padding, }: InputProps): JSX.Element;
+export default function Input({ inputRef, autoFocus, placeholder, value, defaultValue, icon, type, onMouseEnter, onMouseLeave, onChange, onFocus, onBlur, onSubmit, onClear, canSubmit, loading, margin, padding, width, }: InputProps): JSX.Element;

package/build/index.d.ts

@@ -5,6 +5,7 @@ import Icon from "./components/Icon";
 import Input from "./components/Input";
 import Loader, { LoaderSizes } from "./components/Loader";
 import Product from "./components/Product";
+import makeEventHandler from './utils/makeEventHandler';
 declare const Icons: {
     AudienceRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
     BoxOfficeRegular: import("@fortawesome/fontawesome-common-types").IconDefinition;
@@ -99,4 +100,4 @@ declare const Icons: {
     SortBy: import("@fortawesome/fontawesome-common-types").IconDefinition;
     UpgradeSolid: import("@fortawesome/fontawesome-common-types").IconDefinition;
 };
-export { Colors, Button, ButtonTypes, ButtonStates, Counter, Icon, Icons, Input, Loader, LoaderSizes, Product, };
+export { Colors, Button, ButtonTypes, ButtonStates, Counter, Icon, Icons, Input, Loader, LoaderSizes, Product, makeEventHandler };

package/build/index.es.js

@@ -8,10 +8,13 @@ import { faCalendarAlt, faClock, faCopy as faCopy$1, faEdit, faEye as faEye$1, f
 import { faCalendarDay as faCalendarDay$1, faMapMarkerAlt, faMinusCircle, faPlusCircle as faPlusCircle$1 } from '@fortawesome/pro-light-svg-icons';
 import { faCalendarStar as faCalendarStar$1, faCreditCardFront, faTachometer as faTachometer$1, faUsdSquare as faUsdSquare$1, faKeySkeleton as faKeySkeleton$1, faLongArrowRight, faFileChartLine as faFileChartLine$1, faSortAlt, faArrowAltSquareUp as faArrowAltSquareUp$1 } from '@fortawesome/pro-solid-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["Green"] = "#419D78";
     Colors["OffWhite"] = "#FCFCFC";
     Colors["Blue"] = "#020151";
     Colors["Red"] = "#E63946";
@@ -23,6 +26,7 @@ var Colors;
     Colors["Grey4"] = "#BDBDBD";
     Colors["Grey5"] = "#E0E0E0";
     Colors["Grey6"] = "#F2F2F2";
+    Colors["Grey7"] = "F8F8F8";
 })(Colors || (Colors = {}));
 
 /*! *****************************************************************************
@@ -249,8 +253,8 @@ function Counter(_a) {
 }
 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) {
+var Form = styled.form(templateObject_1$3 || (templateObject_1$3 = __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)
@@ -272,7 +276,7 @@ var RightContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTe
 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 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 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) {
@@ -281,10 +285,10 @@ function Input(_a) {
             onSubmit();
         }
     };
-    return (React.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); } },
+    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, { autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: onChange, onFocus: function (event) {
+        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);
@@ -325,7 +329,7 @@ var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4
 
 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"])), Colors.White);
+var Container$1 = 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);
@@ -352,7 +356,7 @@ function Product(_a) {
                 React.createElement(Title, null, title),
                 React.createElement(Price, null,
                     "$",
-                    price)),
+                    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 () {
@@ -367,6 +371,16 @@ function Product(_a) {
 }
 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;
 
+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 };
+export { Button, ButtonStates, ButtonTypes, Colors, Counter, Icon, Icons$1 as Icons, Input, Loader, LoaderSizes, Product, makeEventHandler };

package/build/index.js

@@ -15,9 +15,12 @@ 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'));
+var PriceUtil = require('@sellout/utils/.dist/price');
 
 (function (Colors) {
     Colors["White"] = "#FFFFFF";
+    Colors["Black"] = "#000000";
+    Colors["Green"] = "#419D78";
     Colors["OffWhite"] = "#FCFCFC";
     Colors["Blue"] = "#020151";
     Colors["Red"] = "#E63946";
@@ -29,6 +32,7 @@ var AnimateHeight = _interopDefault(require('react-animate-height'));
     Colors["Grey4"] = "#BDBDBD";
     Colors["Grey5"] = "#E0E0E0";
     Colors["Grey6"] = "#F2F2F2";
+    Colors["Grey7"] = "F8F8F8";
 })(exports.Colors || (exports.Colors = {}));
 
 /*! *****************************************************************************
@@ -251,8 +255,8 @@ function Counter(_a) {
 }
 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) {
+var Form = styled.form(templateObject_1$3 || (templateObject_1$3 = __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)
@@ -274,7 +278,7 @@ var RightContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTe
 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 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) {
@@ -283,10 +287,10 @@ function Input(_a) {
             onSubmit();
         }
     };
-    return (React__default.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); } },
+    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, { autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: onChange, onFocus: function (event) {
+        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);
@@ -327,7 +331,7 @@ var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4
 
 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 Container$1 = 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);
@@ -354,7 +358,7 @@ function Product(_a) {
                 React__default.createElement(Title, null, title),
                 React__default.createElement(Price, null,
                     "$",
-                    price)),
+                    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 () {
@@ -369,6 +373,16 @@ function Product(_a) {
 }
 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;
 
+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;
@@ -378,3 +392,4 @@ exports.Icons = Icons$1;
 exports.Input = Input;
 exports.Loader = Loader;
 exports.Product = Product;
+exports.makeEventHandler = makeEventHandler;

package/build/utils/makeEventHandler.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export default function makeEventHandler(executeOnEvent?: Function): (eventHandler: Function) => (event: import("react").FormEvent<HTMLInputElement>) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sellout/ui",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "main": "build/index.js",
   "module": "build/index.es.js",
   "jsnext:main": "build/index.es.js",
@@ -24,10 +24,7 @@
     "@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.7",
-    "@storybook/addon-actions": "^5.3.17",
-    "@storybook/addon-links": "^5.3.17",
-    "@storybook/react": "^5.2.8",
+    "@sellout/utils": "^0.0.9",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.4.0",
     "@testing-library/user-event": "^7.2.1",
@@ -39,9 +36,7 @@
     "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",
     "rollup": "^1.27.13",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
@@ -51,10 +46,10 @@
     "ts-jest": "^24.2.0",
     "typescript": "^3.7.5"
   },
-  "gitHead": "991f3c469d9cd9754715c231b3c5cc7b7b6bfaf5",
+  "gitHead": "c54a032fe5d7b97ad1ac2532edce24854e063180",
   "peerDependencies": {
-    "react": "^16",
-    "react-dom": "^16",
+    "react": "^16.13.0",
+    "react-dom": "^16.13.0",
     "styled-components": "^5.0.1"
   },
   "jest": {

package/rollup.config.js

@@ -1,6 +1,8 @@
 import typescript from "rollup-plugin-typescript2";
 import pkg from "./package.json";
 
+console.log(Object.keys(pkg.peerDependencies || {}));
+
 export default [
   {
     input: "src/index.ts",

package/src/Colors.ts

@@ -1,7 +1,9 @@
 export enum Colors {
   White = "#FFFFFF",
-  OffWhite  = '#FCFCFC',
-  Blue = '#020151',
+  Black = "#000000",
+  Green = "#419D78",
+  OffWhite = "#FCFCFC",
+  Blue = "#020151",
   Red = "#E63946",
   Orange = "#FF700F",
   DarkOrange = "#D65600",
@@ -11,4 +13,5 @@ export enum Colors {
   Grey4 = "#BDBDBD",
   Grey5 = "#E0E0E0",
   Grey6 = "#F2F2F2",
+  Grey7 = 'F8F8F8',
 }

package/src/components/Input.tsx

@@ -8,9 +8,11 @@ import Loader, { LoaderSizes } from "./Loader";
 type FormProps = {
   hovered: boolean;
   focused: boolean;
+  width?: string;
 };
 
 const Form = styled.form<FormProps>`
+  width: ${props => props.width};
   display: flex;
   flex-direction: row;
   position: relative;
@@ -111,11 +113,12 @@ const InputStyled = styled.input<StyledInputProps>`
 `;
 
 export type InputProps = {
+  inputRef?: React.Ref<HTMLInputElement>;
   autoFocus?: boolean | undefined;
   placeholder?: string;
   value: string;
   defaultValue?: string;
-  icon?: string;
+  icon?: any;
   type?: string;
   onMouseEnter?: any;
   onMouseLeave?: any;
@@ -124,13 +127,15 @@ export type InputProps = {
   onBlur?: any;
   onSubmit?: Function;
   onClear?: Function;
-  canSubmit?: boolean,
+  canSubmit?: boolean;
   loading?: boolean;
   margin?: string;
   padding?: string;
+  width?: string;
 };
 
 export default function Input({
+  inputRef,
   autoFocus,
   placeholder,
   value,
@@ -148,6 +153,7 @@ export default function Input({
   loading,
   margin,
   padding,
+  width,
 }: InputProps) {
   const [hovered, setHovered] = useState(false);
   const [focused, setFocused] = useState(false);
@@ -164,6 +170,7 @@ export default function Input({
       hovered={hovered}
       focused={focused}
       onSubmit={event => submit(event)}
+      width={width}
     >
       {icon && (
         <LeftContainer>
@@ -175,6 +182,7 @@ export default function Input({
         </LeftContainer>
       )}
       <InputStyled
+        ref={inputRef}
         autoFocus={autoFocus}
         placeholder={placeholder}
         value={value}

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 = {
@@ -25,6 +25,7 @@ const Column = styled.div`
 const Container = styled.div`
   background-color: ${Colors.White};
   padding: 15px;
+  border-bottom: 1px solid ${Colors.Grey6};
 `;
 
 const Title = styled.div`
@@ -116,7 +117,6 @@ export default function Product({
   const toggle = () => {
     setShowEllipsis(!showEllipsis);
     setShowMore(!showMore)
-    
   }
   
   return (
@@ -124,7 +124,7 @@ export default function Product({
       <Row justify="space-between">
         <Column>
           <Title>{title}</Title>
-          <Price>${price}</Price>
+          <Price>${PriceUtil.output(price)}</Price>
         </Column>
         <Counter
           value={value}
@@ -134,9 +134,7 @@ export default function Product({
           onDecrement={onDecrement}
         />
       </Row>
-      <Row>
-        {subtitle && <Subtitle>{subtitle}</Subtitle>}
-      </Row>
+      <Row>{subtitle && <Subtitle>{subtitle}</Subtitle>}</Row>
       {(() => {
         if (!description) return;
 

package/src/index.ts

@@ -6,10 +6,12 @@ import { IconEnum } from "./components/Icons";
 import Input from "./components/Input";
 import Loader, { LoaderSizes } from "./components/Loader";
 import Product from "./components/Product";
+import makeEventHandler from './utils/makeEventHandler';
 
 const Icons = IconEnum;
 
-export { 
+export {
+  // Components
   Colors,
   Button,
   ButtonTypes,
@@ -21,4 +23,6 @@ export {
   Loader,
   LoaderSizes,
   Product,
- };
+  // Utils
+  makeEventHandler
+};

package/src/utils/makeEventHandler.ts

@@ -0,0 +1,8 @@
+export default function makeEventHandler(executeOnEvent: Function = () => {}) {
+  return function (eventHandler: Function) {
+    return function(event: React.FormEvent<HTMLInputElement>) {
+      executeOnEvent();
+      eventHandler(event.currentTarget.value as string);
+    };
+  }
+}

package/build/components/Simple.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export default function Simple(): JSX.Element;