@sellout/ui 0.0.58 → 0.0.61

package/build/Colors.js

@@ -0,0 +1,26 @@
+var Colors;
+(function (Colors) {
+    Colors["White"] = "#FFFFFF";
+    Colors["Black"] = "#000000";
+    Colors["Yellow"] = "#FFBA49";
+    // Green = "#419D78",
+    Colors["Green"] = "#42BB83";
+    Colors["OffWhite"] = "#FCFCFC";
+    Colors["LightBlue"] = "#39159C";
+    Colors["Blue"] = "#2D0E84";
+    Colors["DarkBlue"] = "#1D0858";
+    Colors["Red"] = "#E63946";
+    Colors["Orange"] = "#FF700F";
+    Colors["FadedOrange"] = "#FFF1E7";
+    Colors["LightOrange"] = "#FFBE93";
+    Colors["DarkOrange"] = "#D65600";
+    Colors["Grey1"] = "#333333";
+    Colors["Grey2"] = "#4F4F4F";
+    Colors["Grey3"] = "#828282";
+    Colors["Grey4"] = "#BDBDBD";
+    Colors["Grey5"] = "#E0E0E0";
+    Colors["Grey6"] = "#F2F2F2";
+    Colors["Grey7"] = "#F8F8F8";
+})(Colors || (Colors = {}));
+
+export { Colors };

package/build/_virtual/_tslib.js

@@ -0,0 +1,51 @@
+/*! *****************************************************************************
+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.
+***************************************************************************** */
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+function __rest(s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+}
+
+function __spreadArrays() {
+    for (var s = 0, i = 0, il = arguments.length; i < il; i++) s += arguments[i].length;
+    for (var r = Array(s), k = 0, i = 0; i < il; i++)
+        for (var a = arguments[i], j = 0, jl = a.length; j < jl; j++, k++)
+            r[k] = a[j];
+    return r;
+}
+function __makeTemplateObject(cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+}
+
+export { __assign, __makeTemplateObject, __rest, __spreadArrays };

package/build/components/Button.d.ts

@@ -1,18 +1,32 @@
 /// <reference types="react" />
+import { Colors } from '../Colors';
 export declare enum ButtonTypes {
-    Submit = "Submit"
+    Next = "Next",
+    Regular = "Regular",
+    Thin = "Thin"
 }
 export declare enum ButtonStates {
-    Active = "Active"
+    Active = "Active",
+    Warning = "Warning",
+    Disabled = "Disabled"
+}
+export declare enum ButtonIconPosition {
+    Left = "Left",
+    Right = "Right"
 }
 export declare type ButtonProps = {
-    type?: string;
-    state?: string;
+    type?: ButtonTypes;
+    state?: ButtonStates;
+    bgColor?: Colors;
     text?: string;
     onClick?: any;
     icon?: any;
+    iconPosition?: ButtonIconPosition;
+    iconSize?: number;
     margin?: string;
-    padding?: string;
     loading?: boolean;
+    label?: string;
+    tip?: string;
+    subLabel?: string;
 };
-export default function Button({ type, state, text, onClick, icon, margin, padding, loading, }: ButtonProps): JSX.Element;
+export default function Button({ type, state, bgColor, text, onClick, icon, iconPosition, iconSize, margin, loading, }: ButtonProps): JSX.Element;

package/build/components/Button.js

@@ -0,0 +1,210 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import { lighten, darken } from 'polished';
+import Icon from './Icon.js';
+import Loader, { LoaderSizes } from './Loader.js';
+
+var ButtonTypes;
+(function (ButtonTypes) {
+    ButtonTypes["Next"] = "Next";
+    ButtonTypes["Regular"] = "Regular";
+    ButtonTypes["Thin"] = "Thin";
+})(ButtonTypes || (ButtonTypes = {}));
+var ButtonStates;
+(function (ButtonStates) {
+    ButtonStates["Active"] = "Active";
+    ButtonStates["Warning"] = "Warning";
+    ButtonStates["Disabled"] = "Disabled";
+})(ButtonStates || (ButtonStates = {}));
+var ButtonIconPosition;
+(function (ButtonIconPosition) {
+    ButtonIconPosition["Left"] = "Left";
+    ButtonIconPosition["Right"] = "Right";
+})(ButtonIconPosition || (ButtonIconPosition = {}));
+var StyledButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  white-space: nowrap;\n  box-sizing: border-box;\n  text-align: center;\n  border-radius: 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  background-color: ", ";\n  border: ", ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  height: ",
+    ";\n  width: ",
+    ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n  justify-content: center;\n  white-space: nowrap;\n  box-sizing: border-box;\n  text-align: center;\n  border-radius: 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ",
+    ";\n  background-color: ",
+    ";\n  border: ",
+    ";\n\n  &:hover {\n    cursor: ",
+    ";\n    background-color: ",
+    ";\n  }\n\n  &:active {\n    cursor: ",
+    ";\n    background-color: ",
+    ";\n  }\n"])), function (props) {
+    if (props.type === ButtonTypes.Next) {
+        return "50px";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "40px";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        if (props.state === ButtonStates.Warning) {
+            return "28px";
+        }
+        return "30px";
+    }
+    return null;
+}, function (props) {
+    if (props.type === ButtonTypes.Next) {
+        return "100%";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "fit-content";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        return "fit-content";
+    }
+    return null;
+}, function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) {
+    if (props.type === ButtonTypes.Next) {
+        return "0px";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "0 25px";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        return "0 15px";
+    }
+    return null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return Colors.Grey6;
+    }
+    if (props.state === ButtonStates.Warning) {
+        return Colors.White;
+    }
+    return props.bgColor || Colors.Orange;
+}, function (props) {
+    if (props.state === ButtonStates.Warning) {
+        return "1px solid " + Colors.Grey5;
+    }
+    return null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return null;
+    }
+    return props.onClick ? "pointer" : null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return Colors.Grey6;
+    }
+    if (props.state === ButtonStates.Warning) {
+        return Colors.White;
+    }
+    return lighten(0.05, props.bgColor || Colors.Orange);
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return null;
+    }
+    return props.onClick ? "pointer" : null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return Colors.Grey6;
+    }
+    if (props.state === ButtonStates.Warning) {
+        return Colors.White;
+    }
+    return darken(0.05, props.bgColor || Colors.Orange);
+});
+var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: uppercase;\n  margin: ", ";\n  color: ", ";\n  top: ", ";\n"], ["\n  position: relative;\n  font-size: ",
+    ";\n  font-weight: ",
+    ";\n  text-transform: uppercase;\n  margin: ",
+    ";\n  color: ",
+    ";\n  top: ",
+    ";\n"])), function (props) {
+    if (props.type === ButtonTypes.Next) {
+        return "1.4rem";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "1.4rem";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "1.2rem";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        return "1.2rem";
+    }
+    return null;
+}, function (props) {
+    if (props.type === ButtonTypes.Next) {
+        return "700";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "700";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        return "600";
+    }
+    return null;
+}, function (props) {
+    if (props.type === ButtonTypes.Next) {
+        return "0 10px";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        if (props.iconPosition === ButtonIconPosition.Left) {
+            return "0 0 0 10px";
+        }
+        if (props.iconPosition === ButtonIconPosition.Right) {
+            return "0 10px 0 0";
+        }
+        return "0";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        if (props.iconPosition === ButtonIconPosition.Left) {
+            return "0 0 0 7px";
+        }
+        if (props.iconPosition === ButtonIconPosition.Right) {
+            return "0 7px 0 0";
+        }
+        return "0";
+    }
+    return null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return Colors.Grey3;
+    }
+    if (props.state === ButtonStates.Warning) {
+        return Colors.Grey3;
+    }
+    return Colors.White;
+}, function (props) {
+    if (props.type === ButtonTypes.Thin) {
+        if (props.icon) {
+            return '-1px';
+        }
+        return "0";
+    }
+    return null;
+});
+function Button(_a) {
+    var _b = _a.type, type = _b === void 0 ? ButtonTypes.Next : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, bgColor = _a.bgColor, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, iconPosition = _a.iconPosition, _e = _a.iconSize, iconSize = _e === void 0 ? 14 : _e, 
+    // label,
+    // tip,
+    // subLabel,
+    margin = _a.margin, _f = _a.loading, loading = _f === void 0 ? false : _f;
+    var iconColor = state === ButtonStates.Disabled ? Colors.Grey3 : Colors.White;
+    if (icon && !iconPosition)
+        iconPosition = ButtonIconPosition.Left;
+    var iconEl = (React.createElement(Icon, { icon: icon, color: iconColor, size: iconSize, top: iconSize < 14 ? "-1px" : undefined }));
+    var click = loading || state === ButtonStates.Disabled ? null : function () { return onClick(); };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledButton, { type: type, state: state, onClick: click, margin: margin, bgColor: bgColor }, (function () {
+            return (React.createElement(Fragment, null, (function () {
+                if (loading) {
+                    return (React.createElement(Fragment, null,
+                        React.createElement(Loader, { size: LoaderSizes.VerySmall, color: iconColor })));
+                }
+                return (React.createElement(Fragment, null,
+                    icon && iconPosition === ButtonIconPosition.Left && iconEl,
+                    text && (React.createElement(Text, { type: type, state: state, icon: Boolean(icon), iconPosition: iconPosition }, text)),
+                    icon &&
+                        iconPosition === ButtonIconPosition.Right && iconEl));
+            })()));
+        })())));
+}
+var templateObject_1, templateObject_2;
+
+export default Button;
+export { ButtonIconPosition, ButtonStates, ButtonTypes };

package/build/components/CodeInput.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type CodeInputProps = {
+    length: number;
+    onChange: Function;
+    onComplete: Function;
+};
+declare const CodeInput: React.FC<CodeInputProps>;
+export default CodeInput;

package/build/components/CodeInput.js

@@ -0,0 +1,78 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject, __spreadArrays } from '../_virtual/_tslib.js';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject([" \n  margin: ", ";\n"], [" \n  margin: ", ";\n"])), function (props) { return props.margin; });
+var Input = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: 2px solid ", ";\n  height: 70px;\n  width: 55px;\n  border-radius: 10px;\n  background-color: white;\n  transition: all 0.1s;\n  margin-right: 10px;\n  outline: 0px;\n  font-size: 24px;\n  text-align: center;\n  padding: 0px;\n  box-shadow: none;\n  -moz-appearance: textfield;\n\n  &:focus {\n    border: 2px solid ", ";\n  }\n"], ["\n  border: 2px solid ", ";\n  height: 70px;\n  width: 55px;\n  border-radius: 10px;\n  background-color: white;\n  transition: all 0.1s;\n  margin-right: 10px;\n  outline: 0px;\n  font-size: 24px;\n  text-align: center;\n  padding: 0px;\n  box-shadow: none;\n  -moz-appearance: textfield;\n\n  &:focus {\n    border: 2px solid ", ";\n  }\n"])), Colors.Grey5, Colors.Grey1);
+var CodeInput = function (_a) {
+    var onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.length, length = _b === void 0 ? 4 : _b;
+    var _c = useState(new Array(length).fill('')), value = _c[0], setValue = _c[1];
+    var inputs = [];
+    var change = function (valueAt, index) {
+        var currentValue = __spreadArrays(value);
+        // Single Character Press
+        if (valueAt.length === 1) {
+            currentValue[index] = valueAt;
+            setValue(currentValue);
+            if (inputs[index + 1]) {
+                inputs[index + 1].focus();
+            }
+        }
+        else if (valueAt.length === length) { //code pasted
+            setValue(valueAt.split(''));
+            onComplete(valueAt);
+            if (inputs[index + 1]) {
+                inputs[index + 1].focus();
+            }
+        }
+        else if (valueAt.length > 0 && valueAt.length < length) { // More than 1 character, less than the total number required
+            change(valueAt.charAt(valueAt.length - 1), index);
+        }
+        if (index + 1 === length) {
+            onComplete(currentValue.join(''));
+        }
+    };
+    var renderInput = function (index) {
+        var curValue = value[index];
+        return (React.createElement(Input, { key: index, autoFocus: index === 0, value: curValue, type: "number", pattern: "\\d*", ref: function (ref) { return inputs[index] = ref; }, onChange: function (event) {
+                onChange();
+                change(event.target.value, index);
+            }, onKeyDown: function (event) {
+                if (event.keyCode === 8 || event.keyCode === 46) { // handle backspace or delete
+                    event.preventDefault();
+                    var currentValue = __spreadArrays(value);
+                    currentValue[index] = '';
+                    setValue(currentValue);
+                    if (index !== 0) {
+                        inputs[index - 1].focus();
+                    }
+                }
+                else if (event.keyCode === 37) { // navigate left with left arrow key
+                    event.preventDefault();
+                    if (index !== 0) {
+                        inputs[index - 1].focus();
+                    }
+                }
+                else if (event.keyCode === 39) { // navigate right with right arrow key
+                    event.preventDefault();
+                    if (index !== value.length - 1) {
+                        inputs[index + 1].focus();
+                    }
+                }
+                else if ( // prohibit weird behavior when up, down, +, or - are pressed
+                event.keyCode === 38
+                    || event.keyCode === 40
+                    || event.keyCode === 107
+                    || event.keyCode === 109) {
+                    event.preventDefault();
+                }
+            } }));
+    };
+    return (React.createElement(Container, null, value.map(function (_, index) {
+        return renderInput(index);
+    })));
+};
+var templateObject_1, templateObject_2;
+
+export default CodeInput;

package/build/components/Counter.js

@@ -0,0 +1,28 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React, { Fragment } from 'react';
+import styled from 'styled-components';
+import { lighten } from 'polished';
+import Icon, { Icons } from './Icon.js';
+
+var Container = styled.div(templateObject_1 || (templateObject_1 = __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 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  flex: 1;\n  /* background-color: blue; */\n  height: 100%;\n\n  &:hover {\n    cursor: ", ";\n  }\n\n  .svg-inline--fa {\n    color: ", " !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: ", ";\n  flex: 1;\n  /* background-color: blue; */\n  height: 100%;\n\n  &:hover {\n    cursor: ", ";\n  }\n\n  .svg-inline--fa {\n    color: ",
+    " !important;\n  }\n"])), function (props) { return props.justify; }, function (props) { return (props.active ? "pointer" : null); }, function (props) {
+    return props.active ? lighten(0.025, Colors.Orange) : null;
+});
+var Value = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  font-size: 2.4rem;\n  color: ", ";\n  min-width: 20px;\n  text-align: center;\n"], ["\n  font-size: 2.4rem;\n  color: ", ";\n  min-width: 20px;\n  text-align: center;\n"])), Colors.Grey1);
+function Counter(_a) {
+    var value = _a.value, maxValue = _a.maxValue, _b = _a.minValue, minValue = _b === void 0 ? 0 : _b, onIncrement = _a.onIncrement, onDecrement = _a.onDecrement;
+    var canDecrement = value > minValue;
+    var canIncrement = Boolean(!Boolean(maxValue) || (maxValue && value < maxValue));
+    return (React.createElement(Container, null,
+        value > 0 && (React.createElement(Fragment, null,
+            React.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
+                React.createElement(Icon, { icon: Icons.MinusCircleLight, color: canDecrement ? Colors.Orange : Colors.Grey5 })),
+            React.createElement(Value, null, value))),
+        React.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
+            React.createElement(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? Colors.Orange : Colors.Grey5 }))));
+}
+var templateObject_1, templateObject_2, templateObject_3;
+
+export default Counter;

package/build/components/Dropdown.d.ts

@@ -0,0 +1,24 @@
+import React from "react";
+export interface IDropdownItem {
+    text: string;
+    value: any;
+    icon?: React.ReactNode;
+    color?: string;
+}
+export declare enum DropdownTypes {
+    Regular = "Regular",
+    Small = "Small"
+}
+declare type DropdownProps = {
+    type?: DropdownTypes;
+    value?: string;
+    onChange: Function;
+    placeholder?: string;
+    width?: string;
+    items: IDropdownItem[];
+    label?: string;
+    tip?: string;
+    icon?: React.ReactNode;
+};
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

package/build/components/Dropdown.js

@@ -0,0 +1,49 @@
+import { Colors } from '../Colors.js';
+import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import React from 'react';
+import styled from 'styled-components';
+import { darken } from 'polished';
+import Icon, { Icons } from './Icon.js';
+import Label from './Label.js';
+import Flex from './Flex.js';
+
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: 65px;\n  width: ", ";\n"], ["\n  position: relative;\n  height: 65px;\n  width: ", ";\n"])), function (props) { return props.width; });
+var FieldContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ", ";\n  overflow: hidden;\n  outline: none;\n\n  &:hover {\n    cursor: pointer\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"], ["\n  position: absolute;\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  border-radius: 10px;\n  transition: all 0.2s;\n  z-index: ", ";\n  box-shadow: ",
+    ";\n  overflow: hidden;\n  outline: none;\n\n  &:hover {\n    cursor: pointer\n    border: 1px solid ", ";\n  }\n\n  &:focus {\n    border: 1px solid ", ";\n  }\n"])), function (props) { return (props.open ? props.height : "38px"); }, function (props) { return props.width; }, Colors.White, Colors.Grey5, function (props) { return (props.open ? 100 : 0); }, function (props) {
+    return props.open ? "0px 4px 16px rgba(0, 0, 0, 0.05)" : "";
+}, darken(0.05, Colors.Grey5), Colors.Grey4);
+var TopRow = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  height: 38px;\n  padding: 0 15px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  height: 38px;\n  padding: 0 15px;\n"])));
+var Value = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  margin-right: 10px;\n  white-space: nowrap;\n"], ["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  margin-right: 10px;\n  white-space: nowrap;\n"])), Colors.Grey1);
+var ItemsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  overflow: ", ";\n"], ["\n  position: relative;\n  height: ", ";\n  overflow: ", ";\n"])), function (props) { return (props.open ? props.height : "0px"); }, function (props) { return (props.open ? "scroll" : "hidden"); });
+var Item = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 15px;\n  background-color: ", ";\n  font-size: 1.2rem;\n  color: ", ";\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 15px;\n  background-color: ",
+    ";\n  font-size: 1.2rem;\n  color: ", ";\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ", ";\n  }\n"])), function (props) {
+    return props.selected ? Colors.Grey7 : Colors.White;
+}, Colors.Grey1, Colors.Grey7);
+var DropdownTypes;
+(function (DropdownTypes) {
+    DropdownTypes["Regular"] = "Regular";
+    DropdownTypes["Small"] = "Small";
+})(DropdownTypes || (DropdownTypes = {}));
+var Dropdown = function (_a) {
+    var 
+    // type = DropdownTypes.Regular,
+    value = _a.value, onChange = _a.onChange, _b = _a.width, width = _b === void 0 ? 'auto' : _b, items = _a.items, label = _a.label, tip = _a.tip, icon = _a.icon;
+    var _c = React.useState(false), open = _c[0], setOpen = _c[1];
+    return (React.createElement(Container, { width: width },
+        label && React.createElement(Label, { text: label, tip: tip }),
+        React.createElement(FieldContainer, { tabIndex: 1, open: open, height: items.length > 4 ? "163px" : items.length * 30 + 43 + "px", width: width, onClick: function () { return setOpen(!open); }, onBlur: function () { return setOpen(false); } },
+            React.createElement(TopRow, null,
+                React.createElement(Flex, { align: "center" },
+                    icon && icon,
+                    React.createElement(Value, null, value)),
+                React.createElement(Icon, { icon: Icons.Sort, size: 12, color: Colors.Grey1 })),
+            React.createElement(ItemsContainer, { open: open, height: items.length > 3 ? "120px" : items.length * 30 + "px" }, items === null || items === void 0 ? void 0 : items.map(function (item) {
+                return (React.createElement(Item, { key: item.value, selected: false, onClick: function () { return onChange(item.value); } },
+                    item.icon && item.icon,
+                    item.text));
+            })))));
+};
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;
+
+export default Dropdown;
+export { DropdownTypes };

package/build/components/Flex.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+declare type FlexProps = {
+    direction?: string;
+    justify?: string;
+    align?: string;
+    padding?: string;
+    margin?: string;
+    flex?: string;
+    height?: string;
+};
+declare const Flex: React.FC<FlexProps>;
+export default Flex;

package/build/components/Flex.js

@@ -0,0 +1,12 @@
+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  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  padding: ", ";\n  margin: ", ";\n  flex: ", ";\n  height: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  padding: ", ";\n  margin: ", ";\n  flex: ", ";\n  height: ", ";\n"])), function (props) { return props.direction; }, function (props) { return props.justify; }, function (props) { return props.align; }, function (props) { return props.padding; }, function (props) { return props.margin; }, function (props) { return props.flex; }, function (props) { return props.height; });
+var Flex = function (_a) {
+    var children = _a.children, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, _c = _a.justify, justify = _c === void 0 ? '' : _c, _d = _a.align, align = _d === void 0 ? '' : _d, _e = _a.padding, padding = _e === void 0 ? '' : _e, _f = _a.margin, margin = _f === void 0 ? '' : _f, _g = _a.flex, flex = _g === void 0 ? '' : _g, _h = _a.height, height = _h === void 0 ? '' : _h;
+    return (React.createElement(Container, { direction: direction, justify: justify, align: align, padding: padding, margin: margin, flex: flex, height: height }, children));
+};
+var templateObject_1;
+
+export default Flex;