@sellout/ui 0.0.57 → 0.0.60

package/build/components/Input.js

@@ -0,0 +1,177 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React, { useState, Fragment } from 'react';
+import styled from 'styled-components';
+import { darken, lighten } from 'polished';
+import Icon, { Icons } from './Icon.js';
+import Loader, { LoaderSizes } from './Loader.js';
+import Label from './Label.js';
+import Flex from './Flex.js';
+import MaxLength from './MaxLength.js';
+import ValidationError from './ValidationError.js';
+import { media } from '../utils/MediaQuery.js';
+
+var InputSizes;
+(function (InputSizes) {
+    InputSizes["Large"] = "Large";
+    InputSizes["Regular"] = "Regular";
+})(InputSizes || (InputSizes = {}));
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  margin: ", ";\n"], ["\n  width: ", ";\n  margin: ", ";\n"])), function (props) { return props.width; }, function (props) { return props.margin; });
+var Form = styled.form(templateObject_2 || (templateObject_2 = __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  overflow: hidden;\n  background-color: ", ";\n\n  > * {\n    background-color: ", ";\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  overflow: hidden;\n  background-color: ", ";\n\n  > * {\n    background-color: ", ";\n  }\n"])), function (props) { return props.width; }, function (props) {
+    if (props.focused)
+        return Colors.Grey4;
+    if (props.hovered)
+        return darken(0.05, Colors.Grey5);
+    return Colors.Grey5;
+}, function (props) { return props.disabled ? Colors.Grey6 + " !important" : null; }, function (props) { return props.disabled ? Colors.Grey6 + " !important" : null; });
+var Button = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  height: ", ";\n  width: ", ";\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: ",
+    ";\n  width: ",
+    ";\n  border-radius: 0 10px 10px 0;\n  top: -1px;\n  right: -1px;\n  transition: all 0.2s;\n  background-color: ",
+    ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ",
+    ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ",
+    ";\n  }\n"])), Colors.White, function (props) {
+    if (props.size === InputSizes.Large)
+        return "50px";
+    if (props.size === InputSizes.Regular)
+        return "40px";
+    return null;
+}, function (props) {
+    if (props.size === InputSizes.Large)
+        return "50px";
+    if (props.size === InputSizes.Regular)
+        return "40px";
+    return null;
+}, function (props) {
+    return props.canSubmit ? Colors.Orange : Colors.Grey6;
+}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
+    return props.canSubmit ? lighten(0.025, Colors.Orange) : null;
+}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
+    return props.canSubmit ? darken(0.025, Colors.Orange) : null;
+});
+var IconContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 18px;\n"])));
+/* height: ${(props) => {
+    if (props.size === InputSizes.Large) return "50px";
+    if (props.size === InputSizes.Regular) return "40px";
+  }};
+  width: ${(props) => {
+    if (props.size === InputSizes.Large) return "50px";
+    if (props.size === InputSizes.Regular) return "40px";
+  }}; */
+var LeftContainer = styled.div(templateObject_5 || (templateObject_5 = __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  background-color: ", ";\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  background-color: ", ";\n"])), Colors.White);
+var RightContainer = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ", ";\n  width: ", ";\n  top: -1px;\n  right: -1px;\n  background-color: ", ";\n\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: ",
+    ";\n  width: ",
+    ";\n  top: -1px;\n  right: -1px;\n  background-color: ", ";\n\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) {
+    if (props.size === InputSizes.Large)
+        return "50px";
+    if (props.size === InputSizes.Regular)
+        return "40px";
+    return null;
+}, function (props) {
+    if (props.size === InputSizes.Large)
+        return "50px";
+    if (props.size === InputSizes.Regular)
+        return "40px";
+    return null;
+}, Colors.White, function (props) { return (props.onClick ? "pointer" : null); });
+var Spacer = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  width: 50px;\n  background-color: ", ";\n"], ["\n  width: 50px;\n  background-color: ", ";\n"])), Colors.White);
+var InputStyled = styled.input(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  /* border-radius: 10px; */\n  height: ", ";\n  width: fill-available;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  padding: 0 0 0 10px;\n  text-indent: 1px;\n  transition: all 0.2s;\n  padding: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ", ";\n\n  ", ";\n"], ["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  /* border-radius: 10px; */\n  height: ",
+    ";\n  width: fill-available;\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  padding: 0 0 0 10px;\n  text-indent: 1px;\n  transition: all 0.2s;\n  padding: ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n\n  ",
+    ";\n\n  ",
+    ";\n"])), Colors.White, function (props) { return props.disabled ? Colors.Grey4 : Colors.Grey1; }, function (props) {
+    if (props.inputSize === InputSizes.Large)
+        return "48px";
+    if (props.inputSize === InputSizes.Regular)
+        return "38px";
+    return null;
+}, function (props) { return props.padding; }, Colors.Grey4, media.mobile(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  font-size: 1.6rem;\n"], ["\n  font-size: 1.6rem;\n"]))), media.desktop(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 1.4rem;\n"], ["\n  font-size: 1.4rem;\n"]))));
+function Input(_a) {
+    var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, icon = _a.icon, iconColor = _a.iconColor, _b = _a.size, size = _b === void 0 ? InputSizes.Regular : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, onClear = _a.onClear, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, padding = _a.padding, width = _a.width, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, iconConditionalColor = _a.iconConditionalColor, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e;
+    var _f = useState(false), hovered = _f[0], setHovered = _f[1];
+    var _g = useState(false), focused = _g[0], setFocused = _g[1];
+    var submit = function (event) {
+        event.preventDefault();
+        if (onSubmit && canSubmit && !loading) {
+            onSubmit();
+        }
+        else if (onEnter && !loading) {
+            onEnter();
+        }
+    };
+    var iconSize = (function () {
+        if (size === InputSizes.Large)
+            return 16;
+        if (size === InputSizes.Regular)
+            return 14;
+        return 14;
+    })();
+    return (React.createElement(Container, { width: width, margin: margin },
+        React.createElement(Flex, { justify: "space-between" },
+            label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
+            maxLength && React.createElement(MaxLength, { value: value, maxLength: maxLength })),
+        React.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); }, width: width, disabled: disabled, noValidate // disables default html5 validation
+            : true },
+            icon && (React.createElement(LeftContainer, { size: size },
+                React.createElement(IconContainer, null,
+                    React.createElement(Icon, { icon: icon, size: iconSize, color: (function () {
+                            if (iconColor)
+                                return iconColor;
+                            return value
+                                ? iconConditionalColor || Colors.Grey1
+                                : focused
+                                    ? Colors.Grey3
+                                    : Colors.Grey4;
+                        })() })))),
+            React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: function (e) {
+                    if (maxLength && e.currentTarget.value.length > maxLength) ;
+                    else {
+                        onChange(e);
+                    }
+                }, 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);
+                }, padding: padding, inputSize: size }),
+            (function () {
+                if (onSubmit) {
+                    return (React.createElement(Fragment, null,
+                        React.createElement(Spacer, null),
+                        React.createElement(Button, { canSubmit: canSubmit, onClick: function (event) { return submit(event); }, size: size }, (function () {
+                            if (loading) {
+                                return React.createElement(Loader, { size: LoaderSizes.VerySmall });
+                            }
+                            return (React.createElement(Icon, { icon: Icons.RightChevronCircle, color: canSubmit ? Colors.White : Colors.Grey4, size: iconSize }));
+                        })())));
+                }
+                if (loading) {
+                    return (React.createElement(Fragment, null,
+                        React.createElement(Spacer, null),
+                        React.createElement(RightContainer, { size: size },
+                            React.createElement(Loader, { size: LoaderSizes.SuperSmall, color: Colors.Orange }))));
+                }
+                if (Boolean(value) && onClear) {
+                    return (React.createElement(Fragment, null,
+                        React.createElement(Spacer, null),
+                        React.createElement(RightContainer, { onClick: function () { return onClear(); }, size: size },
+                            React.createElement(Icon, { icon: Icons.CancelCircle, color: Colors.Grey4, hoverColor: Colors.Grey3, size: iconSize }))));
+                }
+                return React.createElement(Spacer, null);
+            })()),
+        validationError && React.createElement(ValidationError, { validationError: validationError })));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10;
+
+export default Input;
+export { InputSizes };

package/build/components/InputOld.d.ts

@@ -0,0 +1,23 @@
+import React from "react";
+export declare type InputProps = {
+    inputRef?: React.Ref<HTMLInputElement>;
+    autoFocus?: boolean | undefined;
+    placeholder?: string;
+    value: string;
+    defaultValue?: string;
+    icon?: any;
+    type?: string;
+    onMouseEnter?: any;
+    onMouseLeave?: any;
+    onChange?: any;
+    onFocus?: any;
+    onBlur?: any;
+    onSubmit?: Function;
+    onClear?: Function;
+    canSubmit?: boolean;
+    loading?: boolean;
+    margin?: string;
+    padding?: string;
+    width?: string;
+};
+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/components/InputOld.js

@@ -0,0 +1,83 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React, { useState, Fragment } from 'react';
+import styled from 'styled-components';
+import { lighten, darken } from 'polished';
+import Icon, { Icons } from './Icon.js';
+import Loader, { LoaderSizes } from './Loader.js';
+
+var Form = styled.form(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  border-radius: 10px;\n  transition: all 0.2s;\n  border: 1px solid\n    ", ";\n"], ["\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  position: relative;\n  border-radius: 10px;\n  transition: all 0.2s;\n  border: 1px solid\n    ",
+    ";\n"])), function (props) { return props.width; }, function (props) {
+    if (props.focused)
+        return Colors.Grey3;
+    if (props.hovered)
+        return Colors.Grey4;
+    return Colors.Grey5;
+});
+var Button = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  height: 50px;\n  width: 50px;\n  border-radius: 0 10px 10px 0;\n  top: -1px;\n  right: -1px;\n  transition: all 0.2s;\n  background-color: ", ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ", ";\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: ", ";\n  height: 50px;\n  width: 50px;\n  border-radius: 0 10px 10px 0;\n  top: -1px;\n  right: -1px;\n  transition: all 0.2s;\n  background-color: ",
+    ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ",
+    ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ",
+    ";\n  }\n"])), Colors.White, function (props) {
+    return props.canSubmit ? Colors.Orange : Colors.Grey6;
+}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
+    return props.canSubmit ? lighten(0.025, Colors.Orange) : null;
+}, function (props) { return (props.onClick ? "pointer" : null); }, function (props) {
+    return props.canSubmit ? darken(0.025, Colors.Orange) : null;
+});
+var LeftContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 15px;\n  top: 0px;\n  left: 0px;\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-left: 15px;\n  top: 0px;\n  left: 0px;\n"])));
+var RightContainer = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50px;\n  width: 50px;\n  top: -1px;\n  right: -1px;\n\n  &:hover {\n    cursor: ", ";\n  }\n"], ["\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 50px;\n  width: 50px;\n  top: -1px;\n  right: -1px;\n\n  &:hover {\n    cursor: ", ";\n  }\n"])), function (props) { return (props.onClick ? "pointer" : null); });
+var Spacer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 50px;\n"], ["\n  width: 50px;\n"])));
+var InputStyled = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  border-radius: 10px;\n  height: 48px;\n  width: fill-available;\n  font-size: 1.4rem;\n  font-weight: 500;\n  padding: 0 0 0 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  \n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  border-radius: 10px;\n  height: 48px;\n  width: fill-available;\n  font-size: 1.4rem;\n  font-weight: 500;\n  padding: 0 0 0 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  \n  ::placeholder {\n    color: ", ";\n  }\n"])), Colors.White, Colors.Grey1, function (props) { return props.margin; }, function (props) { return props.padding; }, Colors.Grey4);
+function Input(_a) {
+    var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, icon = _a.icon, _b = _a.type, type = _b === void 0 ? 'text' : _b, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, onClear = _a.onClear, _c = _a.canSubmit, canSubmit = _c === void 0 ? true : _c, loading = _a.loading, margin = _a.margin, padding = _a.padding, width = _a.width;
+    var _d = useState(false), hovered = _d[0], setHovered = _d[1];
+    var _e = useState(false), focused = _e[0], setFocused = _e[1];
+    var submit = function (event) {
+        event.preventDefault();
+        if (onSubmit && canSubmit && !loading) {
+            onSubmit();
+        }
+    };
+    return (React.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); }, width: width },
+        icon && (React.createElement(LeftContainer, null,
+            React.createElement(Icon, { icon: icon, size: 16, color: focused ? Colors.Grey1 : Colors.Grey4 }))),
+        React.createElement(InputStyled, { ref: inputRef, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, onChange: onChange, onFocus: function (event) {
+                setFocused(true);
+                if (onFocus)
+                    onFocus(event);
+            }, onBlur: function (event) {
+                setFocused(false);
+                if (onFocus)
+                    onBlur(event);
+            }, onMouseEnter: function (event) {
+                setHovered(true);
+                if (onMouseEnter)
+                    onMouseEnter(event);
+            }, onMouseLeave: function (event) {
+                setHovered(false);
+                if (onMouseLeave)
+                    onMouseLeave(event);
+            }, margin: margin, padding: padding }),
+        (function () {
+            if (onSubmit) {
+                return (React.createElement(Fragment, null,
+                    React.createElement(Spacer, null),
+                    React.createElement(Button, { canSubmit: canSubmit, onClick: function (event) { return submit(event); } }, (function () {
+                        if (loading) {
+                            return React.createElement(Loader, { size: LoaderSizes.VerySmall });
+                        }
+                        return (React.createElement(Icon, { icon: Icons.RightChevronCircle, color: canSubmit ? Colors.White : Colors.Grey4, size: 16 }));
+                    })())));
+            }
+            if (Boolean(value) && onClear) {
+                return (React.createElement(Fragment, null,
+                    React.createElement(Spacer, null),
+                    React.createElement(RightContainer, { onClick: function () { return onClear(); } },
+                        React.createElement(Icon, { icon: Icons.CancelCircle, color: Colors.Grey3, size: 16 }))));
+            }
+            return React.createElement(Spacer, null);
+        })()));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export default Input;

package/build/components/Label.d.ts

@@ -0,0 +1,9 @@
+import React from "react";
+declare type LabelProps = {
+    text: string;
+    subText?: string;
+    tip?: string;
+    margin?: string;
+};
+declare const Label: React.FC<LabelProps>;
+export default Label;

package/build/components/Label.js

@@ -0,0 +1,22 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React from 'react';
+import styled from 'styled-components';
+import Tip from './Tip.js';
+
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: ", ";\n  height: 15px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  margin: ", ";\n  height: 15px;\n"])), function (props) { return props.margin; });
+var Text = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 7px;\n"], ["\n  font-size: 1.2rem;\n  font-weight: 600;\n  color: ", ";\n  margin-right: 7px;\n"])), Colors.Grey1);
+var SubText = styled.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  color: ", ";\n"], ["\n  color: ", ";\n"])), Colors.Grey3);
+var Label = function (_a) {
+    var text = _a.text, subText = _a.subText, tip = _a.tip, _b = _a.margin, margin = _b === void 0 ? '0 0 10px' : _b;
+    return (React.createElement(Container, { margin: margin },
+        React.createElement(Text, null,
+            text,
+            subText && React.createElement(SubText, null,
+                "\u00A0",
+                subText)),
+        tip && (React.createElement(Tip, { tip: tip }))));
+};
+var templateObject_1, templateObject_2, templateObject_3;
+
+export default Label;

package/build/components/Loader.js

@@ -0,0 +1,37 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React from 'react';
+import styled from 'styled-components';
+
+var _a;
+var LoaderSizes;
+(function (LoaderSizes) {
+    LoaderSizes["FuckingTiny"] = "FuckingTiny";
+    LoaderSizes["SuperSmall"] = "SuperSmall";
+    LoaderSizes["VerySmall"] = "VerySmall";
+    LoaderSizes["Small"] = "Small";
+    LoaderSizes["Medium"] = "Medium";
+    LoaderSizes["Large"] = "Large";
+})(LoaderSizes || (LoaderSizes = {}));
+var LoaderSizesMap = (_a = {},
+    _a[LoaderSizes.FuckingTiny] = 14,
+    _a[LoaderSizes.SuperSmall] = 20,
+    _a[LoaderSizes.VerySmall] = 24,
+    _a[LoaderSizes.Small] = 30,
+    _a[LoaderSizes.Medium] = 40,
+    _a[LoaderSizes.Large] = 60,
+    _a);
+var scale = function (size, scale) { return size * scale + "px"; };
+var StyledLoader = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  top: 1.5px;\n\n  .lds-ring {\n    display: inline-block;\n    position: relative;\n    width: ", ";\n    height: ", ";\n  }\n  .lds-ring div {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: ", ";\n    height: ", ";\n    margin: ", ";\n    border: ", " solid ", ";\n    border-radius: 50%;\n    animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: ", " transparent transparent transparent;\n  }\n  .lds-ring div:nth-child(1) {\n    animation-delay: -0.3s;\n  }\n  .lds-ring div:nth-child(2) {\n    animation-delay: -0.2s;\n  }\n  .lds-ring div:nth-child(3) {\n    animation-delay: -0.1s;\n  }\n  @keyframes lds-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"], ["\n  position: relative;\n  top: 1.5px;\n\n  .lds-ring {\n    display: inline-block;\n    position: relative;\n    width: ", ";\n    height: ", ";\n  }\n  .lds-ring div {\n    box-sizing: border-box;\n    display: block;\n    position: absolute;\n    width: ", ";\n    height: ", ";\n    margin: ", ";\n    border: ", " solid ", ";\n    border-radius: 50%;\n    animation: lds-ring 0.8s cubic-bezier(0.5, 0, 0.5, 1) infinite;\n    border-color: ", " transparent transparent transparent;\n  }\n  .lds-ring div:nth-child(1) {\n    animation-delay: -0.3s;\n  }\n  .lds-ring div:nth-child(2) {\n    animation-delay: -0.2s;\n  }\n  .lds-ring div:nth-child(3) {\n    animation-delay: -0.1s;\n  }\n  @keyframes lds-ring {\n    0% {\n      transform: rotate(0deg);\n    }\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n"])), function (props) { return scale(props.size, 1); }, function (props) { return scale(props.size, 1); }, function (props) { return scale(props.size, .8); }, function (props) { return scale(props.size, .8); }, function (props) { return scale(props.size, .1); }, function (props) { return scale(props.size, 0.066); }, function (props) { return props.color; }, function (props) { return props.color; });
+function Loader(_a) {
+    var _b = _a.size, size = _b === void 0 ? LoaderSizes.Medium : _b, _c = _a.color, color = _c === void 0 ? Colors.White : _c;
+    return (React.createElement(StyledLoader, { size: LoaderSizesMap[size], color: color },
+        React.createElement("div", { className: "lds-ring" },
+            React.createElement("div", null),
+            React.createElement("div", null),
+            React.createElement("div", null))));
+}
+var templateObject_1;
+
+export default Loader;
+export { LoaderSizes };

package/build/components/MaxLength.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+declare type MaxLengthProps = {
+    value: string;
+    maxLength: number;
+};
+declare const MaxLength: React.FC<MaxLengthProps>;
+export default MaxLength;

package/build/components/MaxLength.js

@@ -0,0 +1,16 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React from 'react';
+import styled from 'styled-components';
+
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 10px;\n"], ["\n  display: flex;\n  align-items: center;\n  font-size: 1.2rem;\n  font-weight: 500;\n  color: ", ";\n  margin-bottom: 10px;\n"])), function (props) { return (props.isMax ? Colors.Red : Colors.Grey3); });
+var MaxLength = function (_a) {
+    var value = _a.value, maxLength = _a.maxLength;
+    return (React.createElement(Container, { isMax: value.length === maxLength },
+        value.length,
+        "/",
+        maxLength));
+};
+var templateObject_1;
+
+export default MaxLength;

package/build/components/Motion.d.ts

@@ -0,0 +1,30 @@
+import React from "react";
+/********************************************************************************
+ *  Error Pop
+ *******************************************************************************/
+declare type ErrorPopProps = {
+    duration?: number;
+};
+export declare const ErrorPop: React.FC<ErrorPopProps>;
+/********************************************************************************
+ *  Pop
+ *******************************************************************************/
+declare type PopProps = {
+    duration?: number;
+};
+export declare const Pop: React.FC<PopProps>;
+/********************************************************************************
+ *  Card Pop
+ *******************************************************************************/
+declare type CardPopProps = {
+    duration?: number;
+};
+export declare const CardPop: React.FC<CardPopProps>;
+/********************************************************************************
+ *  Fade In
+ *******************************************************************************/
+declare type FadeInProps = {
+    duration?: number;
+};
+export declare const FadeIn: React.FC<FadeInProps>;
+export {};

package/build/components/Motion.js

@@ -0,0 +1,39 @@
+import { __rest, __assign } from '../_virtual/_tslib.js';
+import React from 'react';
+import { motion } from 'framer-motion';
+
+var ErrorPop = function (_a) {
+    var _b = _a.duration, children = _a.children, props = __rest(_a, ["duration", "children"]);
+    return (React.createElement(motion.div, __assign({}, props, { initial: { right: -100 }, animate: { right: 15 }, transition: {
+            // duration: duration as any,
+            type: "spring",
+            stiffness: 400,
+            damping: 20,
+        } }), children));
+};
+var Pop = function (_a) {
+    var _b = _a.duration, children = _a.children, props = __rest(_a, ["duration", "children"]);
+    return (React.createElement(motion.div, __assign({}, props, { initial: { scale: 0.8 }, animate: { scale: 1 }, transition: {
+            // duration,
+            type: "spring",
+            stiffness: 260,
+            damping: 20,
+        } }), children));
+};
+var CardPop = function (_a) {
+    var _b = _a.duration, duration = _b === void 0 ? 0.2 : _b, children = _a.children, props = __rest(_a, ["duration", "children"]);
+    return (React.createElement(motion.div, __assign({}, props, { initial: { scale: 0.9, opacity: 0 }, animate: { scale: 1, opacity: 1 }, transition: {
+            duration: duration,
+            // type: 'spring',
+            stiffness: 260,
+            damping: 20,
+        } }), children));
+};
+var FadeIn = function (_a) {
+    var _b = _a.duration, duration = _b === void 0 ? 0.2 : _b, children = _a.children, props = __rest(_a, ["duration", "children"]);
+    return (React.createElement(motion.div, __assign({}, props, { initial: { opacity: 0 }, animate: { opacity: 1 }, transition: {
+            duration: duration,
+        } }), children));
+};
+
+export { CardPop, ErrorPop, FadeIn, Pop };

package/build/components/PhoneNumberInput.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import "react-phone-input-2/lib/semantic-ui.css";
+export declare enum PhoneNumberInputSizes {
+    Large = "Large",
+    Regular = "Regular"
+}
+declare type PhoneNumberInputProps = {
+    value: string;
+    onChange: any;
+    onEnter?: any;
+    validationError?: string;
+    subLabel?: string;
+    tip?: string;
+    placeholder?: string;
+    label?: string;
+    phoneNumberInputSize?: string;
+};
+declare const PhoneNumberInput: React.FC<PhoneNumberInputProps>;
+export default PhoneNumberInput;

package/build/components/PhoneNumberInput.js

@@ -0,0 +1,39 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React from 'react';
+import styled from 'styled-components';
+import Label from './Label.js';
+import ValidationError from './ValidationError.js';
+import { useMobileMedia } from '../utils/MediaQuery.js';
+import PhoneInput from 'react-phone-input-2';
+import 'react-phone-input-2/lib/semantic-ui.css';
+
+var PhoneNumberInputSizes;
+(function (PhoneNumberInputSizes) {
+    PhoneNumberInputSizes["Large"] = "Large";
+    PhoneNumberInputSizes["Regular"] = "Regular";
+})(PhoneNumberInputSizes || (PhoneNumberInputSizes = {}));
+// overwrite the preset style imports
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .react-tel-input {\n    font-family: \"neue-haas-grotesk-display\", sans-serif;\n    font-size: ", ";\n    position: relative;\n    width: 100%;\n    :disabled {\n      cursor: not-allowed;\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      text-indent: 15px;\n      transition: all 0.2s;\n      color: ", ";\n      font-weight: 500;\n      position: relative;\n      font-size: ", ";\n      margin-top: 0 !important;\n      margin-bottom: 0 !important;\n      margin-left: 50px;\n      padding-left: 0;\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: 0px 10px 10px 0px;\n      height: ", ";\n      width: calc(100% - 50px);\n      z-index: 1;\n      outline: none;\n      &:hover {\n        border: 1px solid ", ";\n      }\n      &.invalid-number {\n        border: 1px solid ", ";\n        background-color: ", ";\n        border-left-color: ", ";\n        &:focus {\n          border: 1px solid ", ";\n          border-left-color: ", ";\n          background-color: ", ";\n        }\n      }\n      &.open {\n        border-color: ", ";\n        border-radius: 0px 10px 0 0;\n        /* border-bottom: none; */\n        box-shadow: none;\n      }\n      ::placeholder {\n        color: ", ";\n      }\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n\n    .flag-dropdown {\n      outline: none;\n      position: absolute;\n      width: 100%;\n      top: 0;\n      bottom: 0;\n      padding: 0;\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: 10px;\n      &.open {\n        background: ", ";\n        border-radius: 10px 10px 0 0;\n        .selected-flag {\n          background: ", ";\n          border-radius: 10px 0 0 0;\n        }\n      }\n      &:hover, &:focus {\n        cursor: pointer;\n        .selected-flag {\n          background-color: ", ";\n        }\n      }\n    }\n\n    input[disabled] {\n      &+.flag-dropdown {\n        &:hover {\n          cursor: default;\n          .selected-flag {\n            background-color: transparent;\n          }\n        }\n      }\n    }\n\n    .selected-flag {\n      transition: all 0.2s;\n      background: ", ";\n      position: relative;\n      width: 50px;\n      height: 100%;\n      padding: 0 0 0 10px;\n      border-radius: 10px 0 0 10px;\n      .flag {\n        position: absolute;\n        top: 50%;\n        margin-top: -5px;\n      }\n      .arrow {\n        position: relative;\n        top: 50%;\n        margin-top: -2px;\n        left: 25px;\n        width: 0;\n        height: 0;\n        border-left: 3px solid transparent;\n        border-right: 3px solid transparent;\n        border-top: 4px solid #555;\n        &.up {\n          border-top: none;\n          border-bottom: 4px solid #555;\n        }\n      }\n      &.open {\n        z-index: 2;\n      }\n    }\n\n    .country-list {\n      z-index: 2;\n      border-radius: 0 0 10px 10px;\n      border: 1px solid ", ";\n      border-top: none;\n      list-style: none;\n      position: absolute;\n      padding: 0;\n      margin: 0px 0 10px -1px;\n      box-shadow: unset;\n      background-color: ", ";\n      width: calc(100% + 2px);\n      max-height: ", ";\n      overflow-y: scroll;\n      .flag {\n        display: inline-block;\n      }\n      .divider {\n        padding-bottom: 5px;\n        margin-bottom: 5px;\n        border-bottom: 1px solid #ccc;\n      }\n      .country {\n        padding: 7px 9px;\n        .dial-code {\n          color: #6b6b6b;\n        }\n        &:hover {\n          background-color: #f1f1f1;\n        }\n        &.highlight {\n          background-color: #f1f1f1;\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: #fff;\n        padding: 5px 0 6px 10px;\n      }\n      .search-emoji {\n        display: none;\n        font-size: ", ";\n      }\n      .search-box {\n        border: 1px solid #cacaca;\n        border-radius: 3px;\n        font-size: ", ";\n        line-height: 15px;\n        padding: 3px 8px 5px;\n        outline: none;\n      }\n      .no-entries-message {\n        padding: 7px 10px 11px;\n        opacity: .7;\n      }\n      &::-webkit-scrollbar { width: 12px; }\n      &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n      &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n    }\n\n    .invalid-number-message {\n      position: absolute;\n      z-index: 1;\n      font-size: ", ";\n      left: 46px;\n      top: -8px;\n      background: #fff;\n      padding: 0 2px;\n      color: #de0000;\n    }\n  }\n"], ["\n  .react-tel-input {\n    font-family: \"neue-haas-grotesk-display\", sans-serif;\n    font-size: ", ";\n    position: relative;\n    width: 100%;\n    :disabled {\n      cursor: not-allowed;\n    }\n\n    .form-control {\n      font-family: \"neue-haas-grotesk-display\", sans-serif;\n      text-indent: 15px;\n      transition: all 0.2s;\n      color: ", ";\n      font-weight: 500;\n      position: relative;\n      font-size: ", ";\n      margin-top: 0 !important;\n      margin-bottom: 0 !important;\n      margin-left: 50px;\n      padding-left: 0;\n      background: ", ";\n      border: 1px solid ", ";\n      border-radius: 0px 10px 10px 0px;\n      height: ", ";\n      width: calc(100% - 50px);\n      z-index: 1;\n      outline: none;\n      &:hover {\n        border: 1px solid ", ";\n      }\n      &.invalid-number {\n        border: 1px solid ", ";\n        background-color: ", ";\n        border-left-color: ", ";\n        &:focus {\n          border: 1px solid ", ";\n          border-left-color: ", ";\n          background-color: ", ";\n        }\n      }\n      &.open {\n        border-color: ", ";\n        border-radius: 0px 10px 0 0;\n        /* border-bottom: none; */\n        box-shadow: none;\n      }\n      ::placeholder {\n        color: ", ";\n      }\n      &:focus {\n        border: 1px solid ", ";\n      }\n    }\n\n    .flag-dropdown {\n      outline: none;\n      position: absolute;\n      width: 100%;\n      top: 0;\n      bottom: 0;\n      padding: 0;\n      background-color: ", ";\n      border: 1px solid ", ";\n      border-radius: 10px;\n      &.open {\n        background: ", ";\n        border-radius: 10px 10px 0 0;\n        .selected-flag {\n          background: ", ";\n          border-radius: 10px 0 0 0;\n        }\n      }\n      &:hover, &:focus {\n        cursor: pointer;\n        .selected-flag {\n          background-color: ", ";\n        }\n      }\n    }\n\n    input[disabled] {\n      &+.flag-dropdown {\n        &:hover {\n          cursor: default;\n          .selected-flag {\n            background-color: transparent;\n          }\n        }\n      }\n    }\n\n    .selected-flag {\n      transition: all 0.2s;\n      background: ", ";\n      position: relative;\n      width: 50px;\n      height: 100%;\n      padding: 0 0 0 10px;\n      border-radius: 10px 0 0 10px;\n      .flag {\n        position: absolute;\n        top: 50%;\n        margin-top: -5px;\n      }\n      .arrow {\n        position: relative;\n        top: 50%;\n        margin-top: -2px;\n        left: 25px;\n        width: 0;\n        height: 0;\n        border-left: 3px solid transparent;\n        border-right: 3px solid transparent;\n        border-top: 4px solid #555;\n        &.up {\n          border-top: none;\n          border-bottom: 4px solid #555;\n        }\n      }\n      &.open {\n        z-index: 2;\n      }\n    }\n\n    .country-list {\n      z-index: 2;\n      border-radius: 0 0 10px 10px;\n      border: 1px solid ", ";\n      border-top: none;\n      list-style: none;\n      position: absolute;\n      padding: 0;\n      margin: 0px 0 10px -1px;\n      box-shadow: unset;\n      background-color: ", ";\n      width: calc(100% + 2px);\n      max-height: ", ";\n      overflow-y: scroll;\n      .flag {\n        display: inline-block;\n      }\n      .divider {\n        padding-bottom: 5px;\n        margin-bottom: 5px;\n        border-bottom: 1px solid #ccc;\n      }\n      .country {\n        padding: 7px 9px;\n        .dial-code {\n          color: #6b6b6b;\n        }\n        &:hover {\n          background-color: #f1f1f1;\n        }\n        &.highlight {\n          background-color: #f1f1f1;\n        }\n      }\n      .flag {\n        margin-right: 7px;\n        margin-top: 2px;\n      }\n      .country-name {\n        margin-right: 6px;\n      }\n      .search {\n        position: sticky;\n        top: 0;\n        background-color: #fff;\n        padding: 5px 0 6px 10px;\n      }\n      .search-emoji {\n        display: none;\n        font-size: ", ";\n      }\n      .search-box {\n        border: 1px solid #cacaca;\n        border-radius: 3px;\n        font-size: ", ";\n        line-height: 15px;\n        padding: 3px 8px 5px;\n        outline: none;\n      }\n      .no-entries-message {\n        padding: 7px 10px 11px;\n        opacity: .7;\n      }\n      &::-webkit-scrollbar { width: 12px; }\n      &::-webkit-scrollbar-track { background-color: #e6e6e6; }\n      &::-webkit-scrollbar-thumb { background-color: #c5c5c4; border-radius: 5px; }\n    }\n\n    .invalid-number-message {\n      position: absolute;\n      z-index: 1;\n      font-size: ", ";\n      left: 46px;\n      top: -8px;\n      background: #fff;\n      padding: 0 2px;\n      color: #de0000;\n    }\n  }\n"])), function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, Colors.Grey1, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, Colors.White, Colors.Grey5, function (props) { return props.phoneNumberInputSize === PhoneNumberInputSizes.Regular ? '38px' : '48px'; }, Colors.Grey5, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey5, Colors.White, Colors.Grey5, Colors.Grey4, Colors.Grey4, Colors.Grey6, Colors.Grey5, Colors.Grey6, Colors.Grey6, Colors.Grey5, Colors.Grey6, Colors.Grey5, Colors.White, function (props) { return props.isMobile ? '180px' : '200px'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; }, function (props) { return props.isMobile ? '1.6rem' : '1.4rem'; });
+var PhoneNumberInput = function (_a) {
+    var value = _a.value, onChange = _a.onChange, onEnter = _a.onEnter, validationError = _a.validationError, phoneNumberInputSize = _a.phoneNumberInputSize, subLabel = _a.subLabel, tip = _a.tip, label = _a.label;
+    return (React.createElement(React.Fragment, null,
+        label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
+        React.createElement(Container, { isMobile: useMobileMedia(), phoneNumberInputSize: phoneNumberInputSize },
+            React.createElement(PhoneInput, { country: 'us', placeholder: "Enter your mobile phone number", preferredCountries: ['us', 'ca'], value: value, onKeyDown: function (e) {
+                    // quick fix for current issue -> https://github.com/bl00mber/react-phone-input-2/issues/222
+                    if ((e.which === 8 || e.which === 46) && value.length <= 1) {
+                        e.preventDefault();
+                    }
+                    else if (e.which === 13 && onEnter) {
+                        onEnter();
+                    }
+                }, onChange: function (value) {
+                    onChange(value);
+                }, countryCodeEditable: false }),
+            validationError && (React.createElement(ValidationError, { validationError: validationError })))));
+};
+var templateObject_1;
+
+export default PhoneNumberInput;
+export { PhoneNumberInputSizes };

package/build/components/Product.js

@@ -0,0 +1,54 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React, { useState, Fragment } from 'react';
+import styled from 'styled-components';
+import { lighten, darken } from 'polished';
+import Counter from './Counter.js';
+import AnimateHeight from 'react-animate-height';
+import { output } from '@sellout/utils/.dist/price';
+
+var Row = styled.div(templateObject_1 || (templateObject_1 = __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 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n"], ["\n  display: flex;\n  flex-direction: column;\n"])));
+var Container = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  background-color: ", ";\n  margin: 0 30px;\n  padding: 25px 0;\n  border-bottom: 1px solid ", ";\n"], ["\n  background-color: ", ";\n  margin: 0 30px;\n  padding: 25px 0;\n  border-bottom: 1px solid ", ";\n"])), Colors.White, Colors.Grey6);
+var Title = styled.div(templateObject_4 || (templateObject_4 = __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 || (templateObject_5 = __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 || (templateObject_6 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n"])), Colors.Grey3);
+var Description = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  margin-top: 10px;\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  margin-top: 10px;\n"])), Colors.Grey2);
+var Ellipsis = styled.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"], ["\n  display: -webkit-box;\n  -webkit-line-clamp: ", ";\n  -webkit-box-orient: ", ";\n  overflow: hidden;\n  text-overflow: ellipsis;\n"])), function (props) { return props.active ? 3 : null; }, function (props) { return props.active ? 'vertical' : null; });
+var ShowMore = styled.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"], ["\n  font-size: 1.2rem;\n  font-weight: 500;\n  line-height: 160%;\n  color: ", ";\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    color: ", ";\n  }\n\n  &:active {\n    color: ", ";\n  }\n"])), Colors.Orange, lighten(0.025, Colors.Orange), darken(0.025, Colors.Orange));
+function Product(_a) {
+    var _b = _a.title, title = _b === void 0 ? '' : _b, _c = _a.price, price = _c === void 0 ? 0 : _c, _d = _a.subtitle, subtitle = _d === void 0 ? '' : _d, _e = _a.description, description = _e === void 0 ? '' : _e, 
+    // Counter Props
+    value = _a.value, minValue = _a.minValue, maxValue = _a.maxValue, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
+    var _f = useState(false), showMore = _f[0], setShowMore = _f[1];
+    var _g = useState(true), showEllipsis = _g[0], setShowEllipsis = _g[1];
+    var descModified = description;
+    if (descModified.length > 210 && !showMore) {
+        descModified = descModified.substring(0, 210) + '...';
+    }
+    var toggle = function () {
+        setShowEllipsis(!showEllipsis);
+        setShowMore(!showMore);
+    };
+    return (React.createElement(Container, null,
+        React.createElement(Row, { justify: "space-between" },
+            React.createElement(Column, null,
+                React.createElement(Title, null, title),
+                React.createElement(Price, null,
+                    "$",
+                    output(price))),
+            React.createElement(Counter, { value: value, minValue: minValue, maxValue: maxValue, onIncrement: onIncrement, onDecrement: onDecrement })),
+        React.createElement(Row, null, subtitle && React.createElement(Subtitle, null, subtitle)),
+        (function () {
+            if (!description)
+                return;
+            return (React.createElement(Fragment, null,
+                React.createElement(AnimateHeight, { height: showMore ? "auto" : 67 },
+                    React.createElement(Ellipsis, { active: showEllipsis },
+                        React.createElement(Description, null, description))),
+                React.createElement(ShowMore, { onClick: function () { return toggle(); } }, showMore ? "Show Less" : "Show More")));
+        })()));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9;
+
+export default Product;

package/build/components/TextButton.d.ts

@@ -0,0 +1,15 @@
+import React from "react";
+export declare enum TextButtonSizes {
+    Regular = "Regular",
+    Small = "Small"
+}
+declare type TextButtonProps = {
+    children: string;
+    size?: TextButtonSizes;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    margin?: string;
+    icon?: any;
+    iconRotation?: number;
+};
+declare const TextButton: React.FC<TextButtonProps>;
+export default TextButton;