@sellout/ui 0.0.399 → 0.0.401

package/build/components/CodeInput.js

@@ -1,98 +1,97 @@
-import { __makeTemplateObject, __spreadArrays } from '../_virtual/_tslib.js';
+import { __makeTemplateObject, __spreadArray } from '../node_modules/tslib/tslib.es6.js';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 import { Colors } from '../Colors.js';
 
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", ";\n  padding-left: ", ";\n"], ["\n  margin: ", ";\n  padding-left: ", ";\n"])), function (props) { return props.margin; }, function (props) { return props.paddingLeft; });
-var Input = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: ", ";\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  transition: all 0.1s;\n  margin-right:", "; \n  outline: 0px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: ", ";\n  -moz-appearance: textfield;\n  padding: 0px;\n  box-shadow: none;\n  font-weight:", "; \n  font-family:", ";\n  color: ", ";\n  -moz-appearance: textfield;\n\n  &:focus {\n     border: ", ";\n  }\n  &::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  border: ",
-    ";\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  transition: all 0.1s;\n  margin-right:", "; \n  outline: 0px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: ", ";\n  -moz-appearance: textfield;\n  padding: 0px;\n  box-shadow: none;\n  font-weight:", "; \n  font-family:", ";\n  color: ", ";\n  -moz-appearance: textfield;\n\n  &:focus {\n     border: ", ";\n  }\n  &::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (props) {
-    return props.height ? "" + props.border : "2px solid " + Colors.Grey5;
-}, function (props) { return props.height || "70px"; }, function (props) { return props.width || "55px"; }, function (props) { return props.bgColor || "white"; }, function (props) { return props.marginRight || "10px"; }, function (props) { return props.fontSize || "24px"; }, function (props) { return props.borderRadius || "10px"; }, function (props) { return props.fontWeight; }, function (props) { return props.fontFamily; }, function (props) { return props.color; }, function (props) { return props.borderHover || "2px solid " + Colors.Grey1; });
-var CodeInput = function (_a) {
-    var onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.length, length = _b === void 0 ? 4 : _b, _c = _a.resetCode, resetCode = _c === void 0 ? false : _c, color = _a.color, placeholder = _a.placeholder, height = _a.height, width = _a.width, border = _a.border, bgColor = _a.bgColor, borderRadius = _a.borderRadius, borderHover = _a.borderHover, fontSize = _a.fontSize, marginRight = _a.marginRight, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, paddingLeft = _a.paddingLeft;
-    var _d = useState(new Array(length).fill("")), value = _d[0], setValue = _d[1];
-    useEffect(function () {
-        if (resetCode) {
-            setValue(new Array(length).fill(""));
-        }
-    }, [resetCode]);
-    var inputs = [];
-    var change = function (valueAt, index) {
-        var currentValue = __spreadArrays(value);
-        if (valueAt.length > 1) {
-            valueAt = valueAt.substring(1);
-        }
-        // 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(""));
-        }
-    };
-    useEffect(function () {
-        onChange && onChange(value);
-    }, [value]);
-    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);
-            }, color: color, placeholder: placeholder, height: height, width: width, border: border, bgColor: bgColor, borderRadius: borderRadius, borderHover: borderHover, fontSize: fontSize, marginRight: marginRight, fontWeight: fontWeight, fontFamily: fontFamily, 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, { paddingLeft: paddingLeft }, value.map(function (_, index) {
-        return renderInput(index);
-    })));
-};
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: ", ";\n  padding-left: ", ";\n"], ["\n  margin: ", ";\n  padding-left: ", ";\n"])), function (props) { return props.margin; }, function (props) { return props.paddingLeft; });
+var Input = styled.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  border: ", ";\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  transition: all 0.1s;\n  margin-right:", "; \n  outline: 0px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: ", ";\n  -moz-appearance: textfield;\n  padding: 0px;\n  box-shadow: none;\n  font-weight:", "; \n  font-family:", ";\n  color: ", ";\n  -moz-appearance: textfield;\n\n  &:focus {\n     border: ", ";\n  }\n  &::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"], ["\n  border: ", ";\n  height: ", ";\n  width: ", ";\n  background-color: ", ";\n  transition: all 0.1s;\n  margin-right:", "; \n  outline: 0px;\n  font-size: ", ";\n  text-align: center;\n  border-radius: ", ";\n  -moz-appearance: textfield;\n  padding: 0px;\n  box-shadow: none;\n  font-weight:", "; \n  font-family:", ";\n  color: ", ";\n  -moz-appearance: textfield;\n\n  &:focus {\n     border: ", ";\n  }\n  &::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), function (props) {
+    return props.height ? "".concat(props.border) : "2px solid ".concat(Colors.Grey5);
+}, function (props) { return props.height || "70px"; }, function (props) { return props.width || "55px"; }, function (props) { return props.bgColor || "white"; }, function (props) { return props.marginRight || "10px"; }, function (props) { return props.fontSize || "24px"; }, function (props) { return props.borderRadius || "10px"; }, function (props) { return props.fontWeight; }, function (props) { return props.fontFamily; }, function (props) { return props.color; }, function (props) { return props.borderHover || "2px solid ".concat(Colors.Grey1); });
+var CodeInput = function (_a) {
+    var onChange = _a.onChange, onComplete = _a.onComplete, _b = _a.length, length = _b === void 0 ? 4 : _b, _c = _a.resetCode, resetCode = _c === void 0 ? false : _c, color = _a.color, placeholder = _a.placeholder, height = _a.height, width = _a.width, border = _a.border, bgColor = _a.bgColor, borderRadius = _a.borderRadius, borderHover = _a.borderHover, fontSize = _a.fontSize, marginRight = _a.marginRight, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, paddingLeft = _a.paddingLeft;
+    var _d = useState(new Array(length).fill("")), value = _d[0], setValue = _d[1];
+    useEffect(function () {
+        if (resetCode) {
+            setValue(new Array(length).fill(""));
+        }
+    }, [resetCode]);
+    var inputs = [];
+    var change = function (valueAt, index) {
+        var currentValue = __spreadArray([], value, true);
+        if (valueAt.length > 1) {
+            valueAt = valueAt.substring(1);
+        }
+        // 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(""));
+        }
+    };
+    useEffect(function () {
+        onChange && onChange(value);
+    }, [value]);
+    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);
+            }, color: color, placeholder: placeholder, height: height, width: width, border: border, bgColor: bgColor, borderRadius: borderRadius, borderHover: borderHover, fontSize: fontSize, marginRight: marginRight, fontWeight: fontWeight, fontFamily: fontFamily, onKeyDown: function (event) {
+                if (event.keyCode === 8 || event.keyCode === 46) {
+                    // handle backspace or delete
+                    event.preventDefault();
+                    var currentValue = __spreadArray([], value, true);
+                    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, { paddingLeft: paddingLeft }, value.map(function (_, index) {
+        return renderInput(index);
+    })));
+};
 var templateObject_1, templateObject_2;
 
 export { CodeInput as default };

package/build/components/CodeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CodeInput.js","sources":["../../src/components/CodeInput.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/build/components/Counter.js

@@ -1,27 +1,26 @@
-import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import { __makeTemplateObject } from '../node_modules/tslib/tslib.es6.js';
 import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import * as Polished from 'polished';
 import { Colors } from '../Colors.js';
 import Button, { ButtonTypes } from './Button.js';
 
-// Fixed issue SELLOUT-24
-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: auto;\n  min-height: 42px;\n  gap:13px;\n  /* background-color: red; */\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: auto;\n  min-height: 42px;\n  gap:13px;\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 ? Polished.lighten(0.025, Colors.Orange) : null;
-});
-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,
-        React.createElement(Fragment, null,
-            React.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
-                React.createElement(Button, { type: ButtonTypes.Normal, text: "-", bgColor: Colors.InteractiveBGSecondary }))),
-        React.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
-            React.createElement(Button, { type: ButtonTypes.Normal, text: "+", bgColor: Colors.InteractiveBGPrimary }))));
-}
+// Fixed issue SELLOUT-24
+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: auto;\n  min-height: 42px;\n  gap:13px;\n  /* background-color: red; */\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  width: auto;\n  min-height: 42px;\n  gap:13px;\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 ? Polished.lighten(0.025, Colors.Orange) : null;
+});
+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,
+        React.createElement(Fragment, null,
+            React.createElement(IconContainer, { active: canDecrement, onClick: function () { return (canDecrement ? onDecrement() : null); }, justify: "flex-start" },
+                React.createElement(Button, { type: ButtonTypes.Normal, text: "-", bgColor: Colors.InteractiveBGSecondary }))),
+        React.createElement(IconContainer, { active: canIncrement, onClick: function () { return (canIncrement ? onIncrement() : null); }, justify: "flex-end" },
+            React.createElement(Button, { type: ButtonTypes.Normal, text: "+", bgColor: Colors.InteractiveBGPrimary }))));
+}
 var templateObject_1, templateObject_2;
 
 export { Counter as default };

package/build/components/Counter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Counter.js","sources":["../../src/components/Counter.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAMA;AACA,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,0LAAA,CAAA,EAAA,CAAA,0LAS3B,IAAA,CAAC;AAOF,IAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAoB,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,iEAAA,EAAA,8FAAA,EAAA,4CAAA,EAAA,qBAAA,CAAA,EAAA,CAAA,iEAG/B,EAAsB,8FAM7B,EAA0C,4CAI3C,EACqD,qBAEjE,KAboB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,OAAO,CAAA,EAAA,EAM7B,UAAA,KAAK,EAAI,EAAA,QAAC,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,EAAhC,EAAiC,EAI3C,UAAA,KAAK,EAAA;AACZ,IAAA,OAAA,KAAK,CAAC,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,CAAC,GAAG,IAAI,CAAA;AAA5D,CAA4D,CAEjE,CAAC;AAUsB,SAAA,OAAO,CAAC,EAMjB,EAAA;AALb,IAAA,IAAA,KAAK,WAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,gBAAY,EAAZ,QAAQ,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,CAAC,KAAA,EACZ,WAAW,GAAA,EAAA,CAAA,WAAA,EACX,WAAW,GAAA,EAAA,CAAA,WAAA,CAAA;AAGX,IAAA,IAAM,YAAY,GAAG,KAAK,GAAG,QAAQ,CAAC;AACtC,IAAA,IAAM,YAAY,GAAG,OAAO,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,QAAQ,IAAI,KAAK,GAAG,QAAQ,CAAC,CAAC,CAAC;IAEnF,QACE,oBAAC,SAAS,EAAA,IAAA;AACN,QAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,EAAA,IAAA;YACP,KAAC,CAAA,aAAA,CAAA,aAAa,EACZ,EAAA,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,YAAA,EAAM,QAAC,YAAY,GAAG,WAAW,EAAE,GAAG,IAAI,EAAC,EAAA,EACpD,OAAO,EAAC,YAAY,EAAA;AAEpB,gBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EACN,EAAA,IAAI,EAAE,WAAW,CAAC,MAAM,EACxB,IAAI,EAAE,GAAG,EACT,OAAO,EAAE,MAAM,CAAC,sBAAsB,EAAA,CACrC,CACY,CACP;QACb,KAAC,CAAA,aAAA,CAAA,aAAa,EACZ,EAAA,MAAM,EAAE,YAAY,EACpB,OAAO,EAAE,YAAA,EAAM,QAAC,YAAY,GAAG,WAAW,EAAE,GAAG,IAAI,EAAC,EAAA,EACpD,OAAO,EAAC,UAAU,EAAA;YAElB,KAAC,CAAA,aAAA,CAAA,MAAM,IACF,IAAI,EAAE,WAAW,CAAC,MAAM,EACxB,IAAI,EAAE,GAAG,EACT,OAAO,EAAE,MAAM,CAAC,oBAAoB,EACnC,CAAA,CACQ,CACN,EACZ;AACJ,CAAC;;;;;"}

package/build/components/Dropdown.js

@@ -1,4 +1,4 @@
-import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import { __makeTemplateObject } from '../node_modules/tslib/tslib.es6.js';
 import React from 'react';
 import styled from 'styled-components';
 import { Colors } from '../Colors.js';
@@ -7,49 +7,46 @@ import Label from './Label.js';
 import Flex from './Flex.js';
 import * as Polished from 'polished';
 
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"], ["\n  position: relative;\n  height: ",
-    ";\n  width: ", ";\n"])), function (props) {
-    return props.open ? (props.height ? props.height : "65px") : "65px";
-}, function (props) { return props.width; });
-var FieldContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  max-height: ", ";    \n  min-height: ", "; \n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\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  max-height: ", ";    \n  min-height: ", "; \n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\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.containerMinHeight); }, function (props) { return props.width; }, function (props) { return props.bgColor || Colors.White; }, function (props) { return props.borderColor || Colors.Grey5; }, function (props) { return (props.open ? 100 : 0); }, function (props) {
-    return props.open ? "0px 4px 16px rgba(0, 0, 0, 0.05)" : "";
-}, Polished.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: ", ";\n  padding: 0 15px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  height: ", ";\n  padding: 0 15px;\n"])), function (props) { return (props.optionsHeight ? props.optionsHeight : "38px"); });
-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  margin-right: 10px;\n  white-space:", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  margin-right: 10px;\n  white-space:", ";\n"])), function (props) { return props.optionsColor || Colors.Grey1; }, function (props) { return (props.valueWhiteSpace ? props.valueWhiteSpace : "nowrap"); });
-var ItemsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  max-height: ", ";\n  overflow: ", ";\n"], ["\n  position: relative;\n  max-height: ", ";\n  overflow: ", ";\n"])), function (props) { return (props.open ? props.height : "0px"); }, function (props) { return (props.open ? "auto" : "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.bgColor
-        ? Colors.SurfaceTertiary
-        : props.selected
-            ? props.itemColor || Colors.Grey7
-            : Colors.White;
-}, function (props) { return props.optionsColor || Colors.Grey1; }, function (props) { return props.hoverColor || 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, _c = _a.height, height = _c === void 0 ? "65px" : _c, labelColor = _a.labelColor, bgColor = _a.bgColor, itemColor = _a.itemColor, optionsColor = _a.optionsColor, fontSize = _a.fontSize, fontFamily = _a.fontFamily, fontWeight = _a.fontWeight, iconColor = _a.iconColor, hoverColor = _a.hoverColor, letterSpacing = _a.letterSpacing, borderColor = _a.borderColor, containerMinHeight = _a.containerMinHeight, optionsHeight = _a.optionsHeight, itemContainerHeight = _a.itemContainerHeight, valueWhiteSpace = _a.valueWhiteSpace;
-    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
-    return (React.createElement(Container, { width: width, open: true, height: height },
-        label && (React.createElement(Label, { text: label, tip: tip, labelColor: labelColor, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, letterSpacing: letterSpacing })),
-        React.createElement(FieldContainer, { itemColor: itemColor, bgColor: bgColor, tabIndex: 1, open: open, height: (items === null || items === void 0 ? void 0 : items.length) > 4 ? "130px" : (items === null || items === void 0 ? void 0 : items.length) * 30 + (itemContainerHeight ? parseInt(itemContainerHeight) : 43) + "px", width: width, onClick: function () { return setOpen(!open); }, onBlur: function () { return setOpen(false); }, borderColor: borderColor, containerMinHeight: containerMinHeight },
-            React.createElement(TopRow, { optionsHeight: optionsHeight },
-                React.createElement(Flex, { align: "center" },
-                    icon && icon,
-                    React.createElement(Value, { optionsColor: optionsColor, valueWhiteSpace: valueWhiteSpace }, value)),
-                React.createElement(Icon, { icon: Icons.Sort, size: 12, color: iconColor })),
-            React.createElement(ItemsContainer, { open: open, height: (items === null || items === void 0 ? void 0 : items.length) > 3 ? "90px" : (items === null || items === void 0 ? void 0 : items.length) * 30 + "px", className: "dropdown-list-menu  dropdown-list-height" }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
-                return (React.createElement(Item, { bgColor: bgColor, optionsColor: optionsColor, itemColor: item.color, hoverColor: hoverColor, key: index, selected: false, onClick: function () { return onChange(item.value); } },
-                    item.icon && item.icon,
-                    item.text));
-            })))));
-};
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n"])), function (props) {
+    return props.open ? (props.height ? props.height : "65px") : "65px";
+}, function (props) { return props.width; });
+var FieldContainer = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: absolute;\n  max-height: ", ";    \n  min-height: ", "; \n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\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  max-height: ", ";    \n  min-height: ", "; \n  width: ", ";\n  background-color: ", ";\n  border: 1px solid ", ";\n  box-sizing: border-box;\n  border-radius: 8px;\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.containerMinHeight); }, function (props) { return props.width; }, function (props) { return props.bgColor || Colors.White; }, function (props) { return props.borderColor || Colors.Grey5; }, function (props) { return (props.open ? 100 : 0); }, function (props) {
+    return props.open ? "0px 4px 16px rgba(0, 0, 0, 0.05)" : "";
+}, Polished.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: ", ";\n  padding: 0 15px;\n"], ["\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  height: ", ";\n  padding: 0 15px;\n"])), function (props) { return (props.optionsHeight ? props.optionsHeight : "38px"); });
+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  margin-right: 10px;\n  white-space:", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ", ";\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  margin-right: 10px;\n  white-space:", ";\n"])), function (props) { return props.optionsColor || Colors.Grey1; }, function (props) { return (props.valueWhiteSpace ? props.valueWhiteSpace : "nowrap"); });
+var ItemsContainer = styled.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  position: relative;\n  max-height: ", ";\n  overflow: ", ";\n"], ["\n  position: relative;\n  max-height: ", ";\n  overflow: ", ";\n"])), function (props) { return (props.open ? props.height : "0px"); }, function (props) { return (props.open ? "auto" : "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.bgColor
+        ? Colors.SurfaceTertiary
+        : props.selected
+            ? props.itemColor || Colors.Grey7
+            : Colors.White;
+}, function (props) { return props.optionsColor || Colors.Grey1; }, function (props) { return props.hoverColor || 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, _c = _a.height, height = _c === void 0 ? "65px" : _c, labelColor = _a.labelColor, bgColor = _a.bgColor, itemColor = _a.itemColor, optionsColor = _a.optionsColor, fontSize = _a.fontSize, fontFamily = _a.fontFamily, fontWeight = _a.fontWeight, iconColor = _a.iconColor, hoverColor = _a.hoverColor, letterSpacing = _a.letterSpacing, borderColor = _a.borderColor, containerMinHeight = _a.containerMinHeight, optionsHeight = _a.optionsHeight, itemContainerHeight = _a.itemContainerHeight, valueWhiteSpace = _a.valueWhiteSpace;
+    var _d = React.useState(false), open = _d[0], setOpen = _d[1];
+    return (React.createElement(Container, { width: width, open: true, height: height },
+        label && (React.createElement(Label, { text: label, tip: tip, labelColor: labelColor, fontFamily: fontFamily, fontSize: fontSize, fontWeight: fontWeight, letterSpacing: letterSpacing })),
+        React.createElement(FieldContainer, { itemColor: itemColor, bgColor: bgColor, tabIndex: 1, open: open, height: (items === null || items === void 0 ? void 0 : items.length) > 4 ? "130px" : "".concat((items === null || items === void 0 ? void 0 : items.length) * 30 + (itemContainerHeight ? parseInt(itemContainerHeight) : 43), "px"), width: width, onClick: function () { return setOpen(!open); }, onBlur: function () { return setOpen(false); }, borderColor: borderColor, containerMinHeight: containerMinHeight },
+            React.createElement(TopRow, { optionsHeight: optionsHeight },
+                React.createElement(Flex, { align: "center" },
+                    icon && icon,
+                    React.createElement(Value, { optionsColor: optionsColor, valueWhiteSpace: valueWhiteSpace }, value)),
+                React.createElement(Icon, { icon: Icons.Sort, size: 12, color: iconColor })),
+            React.createElement(ItemsContainer, { open: open, height: (items === null || items === void 0 ? void 0 : items.length) > 3 ? "90px" : "".concat((items === null || items === void 0 ? void 0 : items.length) * 30, "px"), className: "dropdown-list-menu  dropdown-list-height" }, items === null || items === void 0 ? void 0 : items.map(function (item, index) {
+                return (React.createElement(Item, { bgColor: bgColor, optionsColor: optionsColor, itemColor: item.color, hoverColor: hoverColor, key: index, 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 { DropdownTypes, Dropdown as default };

package/build/components/Dropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.js","sources":["../../src/components/Dropdown.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/build/components/Flex.js

@@ -1,12 +1,12 @@
-import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import { __makeTemplateObject } from '../node_modules/tslib/tslib.es6.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  color: ", ";\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  padding: ", ";\n  margin: ", ";\n  flex: ", ";\n  height: ", ";\n  color: ", ";\n  gap: ", ";\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; }, function (props) { return props.color; }, function (props) { return props.gap; });
-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, _j = _a.color, color = _j === void 0 ? '' : _j, _k = _a.gap, gap = _k === void 0 ? '' : _k;
-    return (React.createElement(Container, { direction: direction, justify: justify, align: align, padding: padding, margin: margin, flex: flex, height: height, color: color, gap: gap }, children));
-};
+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  color: ", ";\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  padding: ", ";\n  margin: ", ";\n  flex: ", ";\n  height: ", ";\n  color: ", ";\n  gap: ", ";\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; }, function (props) { return props.color; }, function (props) { return props.gap; });
+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, _j = _a.color, color = _j === void 0 ? '' : _j, _k = _a.gap, gap = _k === void 0 ? '' : _k;
+    return (React.createElement(Container, { direction: direction, justify: justify, align: align, padding: padding, margin: margin, flex: flex, height: height, color: color, gap: gap }, children));
+};
 var templateObject_1;
 
 export { Flex as default };

package/build/components/Flex.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Flex.js","sources":["../../src/components/Flex.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;AAeA,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAW,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,wCAAA,EAAA,wBAAA,EAAA,oBAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,aAAA,EAAA,eAAA,EAAA,cAAA,EAAA,YAAA,EAAA,KAAA,CAAA,EAAA,CAAA,wCAEnB,EAA0B,wBACzB,EAAwB,oBAC5B,EAAsB,gBAC1B,EAAwB,eACzB,EAAuB,aACzB,EAAqB,eACnB,EAAuB,cACxB,EAAsB,YACxB,EAAoB,KAC5B,CAAA,CAAA,CAAA,EATmB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,SAAS,CAAf,EAAe,EACzB,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,OAAO,GAAA,EAC5B,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,KAAK,CAAA,EAAA,EAC1B,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,CAAb,EAAa,EACzB,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,MAAM,GAAA,EACzB,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,IAAI,CAAA,EAAA,EACnB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,MAAM,CAAZ,EAAY,EACxB,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,KAAK,GAAA,EACxB,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,GAAG,CAAA,EAAA,CAC5B,CAAC;AAEI,IAAA,IAAI,GAAwB,UAAC,EAWjC,EAAA;AAVA,IAAA,IAAA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAiB,GAAA,EAAA,CAAA,SAAA,EAAjB,SAAS,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAK,GAAA,EAAA,EACjB,EAAA,GAAA,EAAA,CAAA,OAAY,EAAZ,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAA,EAAA,EACZ,EAAU,GAAA,EAAA,CAAA,KAAA,EAAV,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,EACV,EAAA,GAAA,EAAA,CAAA,OAAY,EAAZ,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA,EACZ,EAAA,GAAA,EAAA,CAAA,MAAW,EAAX,MAAM,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAA,EAAA,EACX,EAAS,GAAA,EAAA,CAAA,IAAA,EAAT,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,EACT,EAAA,GAAA,EAAA,CAAA,MAAW,EAAX,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,EACX,EAAA,GAAA,EAAA,CAAA,KAAU,EAAV,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAA,EAAA,EACV,EAAO,GAAA,EAAA,CAAA,GAAA,EAAP,GAAG,GAAA,EAAA,KAAA,KAAA,CAAA,GAAE,EAAE,GAAA,EAAA,CAAA;AAEP,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,SAAS,IACR,SAAS,EAAE,SAAS,EACpB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,OAAO,EAChB,MAAM,EAAE,MAAM,EACd,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,IAEP,QAAQ,CACC,EACZ;AACJ,EAAE;;;;;"}