@sellout/ui 0.0.398 → 0.0.400

package/build/components/CodeInput.d.ts

@@ -1,22 +1,22 @@
-import React from "react";
-declare type CodeInputProps = {
-    length: number;
-    onChange: Function;
-    onComplete: Function;
-    resetCode?: boolean;
-    color?: string;
-    placeholder?: string;
-    height?: string;
-    width?: string;
-    border?: string;
-    bgColor?: string;
-    borderRadius?: string;
-    borderHover?: string;
-    fontSize?: string;
-    marginRight?: string;
-    fontWeight?: string;
-    fontFamily?: string;
-    paddingLeft?: string;
-};
-declare const CodeInput: React.FC<CodeInputProps>;
-export default CodeInput;
+import React from "react";
+type CodeInputProps = {
+    length: number;
+    onChange: Function;
+    onComplete: Function;
+    resetCode?: boolean;
+    color?: string;
+    placeholder?: string;
+    height?: string;
+    width?: string;
+    border?: string;
+    bgColor?: string;
+    borderRadius?: string;
+    borderHover?: string;
+    fontSize?: string;
+    marginRight?: string;
+    fontWeight?: string;
+    fontFamily?: string;
+    paddingLeft?: string;
+};
+declare const CodeInput: React.FC<CodeInputProps>;
+export default CodeInput;

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

@@ -1 +1 @@
-{"version":3,"file":"CodeInput.js","sources":["../../src/components/CodeInput.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\n\ntype ContainerProps = {\n  margin?: string;\n  paddingLeft?: string;\n};\nconst Container = styled.div<ContainerProps>`\n  margin: ${(props) => props.margin};\n  padding-left: ${(props) => props.paddingLeft};\n`;\ntype StyledInputProps = {\n  color?: string;\n  border?: string;\n  width?: string;\n  height?: string;\n  bgColor?: string;\n  borderRadius?: string;\n  borderHover?: string;\n  fontSize?: string;\n  marginRight?: string;\n  fontWeight?: string;\n  fontFamily?: string;\n  \n};\nconst Input = styled.input<StyledInputProps>`\n  border: ${(props) =>\n    props.height ? `${props.border}` : `2px solid ${Colors.Grey5}`};\n  height: ${(props) => props.height || \"70px\"};\n  width: ${(props) => props.width || \"55px\"};\n  background-color: ${(props) => props.bgColor || \"white\"};\n  transition: all 0.1s;\n  margin-right:${(props) => props.marginRight || \"10px\"}; \n  outline: 0px;\n  font-size: ${(props) => props.fontSize || \"24px\"};\n  text-align: center;\n  border-radius: ${(props) => props.borderRadius || \"10px\"};\n  -moz-appearance: textfield;\n  padding: 0px;\n  box-shadow: none;\n  font-weight:${(props) => props.fontWeight}; \n  font-family:${(props) => props.fontFamily};\n  color: ${(props) => props.color};\n  -moz-appearance: textfield;\n\n  &:focus {\n     border: ${(props) => props.borderHover || `2px solid ${Colors.Grey1}`};\n  }\n  &::-webkit-inner-spin-button,\n  ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n`;\n\ntype CodeInputProps = {\n  length: number;\n  onChange: Function;\n  onComplete: Function;\n  resetCode?: boolean;\n  color?: string;\n  placeholder?: string;\n  height?: string;\n  width?: string;\n  border?: string;\n  bgColor?: string;\n  borderRadius?: string;\n  borderHover?: string;\n  fontSize?: string;\n  marginRight?: string;\n  fontWeight?: string;\n  fontFamily?: string;\n  paddingLeft?: string;\n};\nconst CodeInput: React.FC<CodeInputProps> = ({\n  onChange,\n  onComplete,\n  length = 4,\n  resetCode = false,\n  color,\n  placeholder,\n  height,\n  width,\n  border,\n  bgColor,\n  borderRadius,\n  borderHover,\n  fontSize,\n  marginRight,\n  fontWeight,\n  fontFamily,\n  paddingLeft,\n}) => {\n  const [value, setValue] = useState<Array<string>>(new Array(length).fill(\"\"));\n  useEffect(() => {\n    if (resetCode) {\n      setValue(new Array(length).fill(\"\"));\n    }\n  }, [resetCode]);\n\n  const inputs: any[] = [];\n\n  const change = (valueAt: any, index: any) => {\n    const currentValue = [...value];\n    if (valueAt.length > 1) {\n      valueAt = valueAt.substring(1);\n    }\n    // Single Character Press\n    if (valueAt.length === 1) {\n      currentValue[index] = valueAt;\n      setValue(currentValue);\n      if (inputs[index + 1]) {\n        inputs[index + 1].focus();\n      }\n    } else if (valueAt.length === length) {\n      //code pasted\n      setValue(valueAt.split(\"\"));\n      onComplete(valueAt);\n      if (inputs[index + 1]) {\n        inputs[index + 1].focus();\n      }\n    } else if (valueAt.length > 0 && valueAt.length < length) {\n      // More than 1 character, less than the total number required\n\n      change(valueAt.charAt(valueAt.length - 1), index);\n    }\n\n    if (index + 1 === length) {\n      onComplete(currentValue.join(\"\"));\n    }\n  };\n\n  useEffect(() => {\n    onChange && onChange(value);\n  }, [value]);\n\n  const renderInput = (index: any) => {\n    const curValue = value[index];\n    return (\n      <Input\n        key={index}\n        autoFocus={index === 0}\n        value={curValue}\n        type=\"number\"\n        pattern=\"\\d*\"\n        ref={(ref) => (inputs[index] = ref)}\n        onChange={(event) => {\n          onChange();\n          change(event.target.value, index);\n        }}\n        color={color}\n        placeholder={placeholder}\n        height={height}\n        width={width}\n        border={border}\n        bgColor={bgColor}\n        borderRadius={borderRadius}\n        borderHover={borderHover}\n        fontSize={fontSize}\n        marginRight={marginRight}\n        fontWeight={fontWeight}\n        fontFamily={fontFamily}\n        onKeyDown={(event) => {\n          if (event.keyCode === 8 || event.keyCode === 46) {\n            // handle backspace or delete\n            event.preventDefault();\n            const currentValue = [...value];\n            currentValue[index] = \"\";\n            setValue(currentValue);\n            if (index !== 0) {\n              inputs[index - 1].focus();\n            }\n          } else if (event.keyCode === 37) {\n            // navigate left with left arrow key\n            event.preventDefault();\n            if (index !== 0) {\n              inputs[index - 1].focus();\n            }\n          } else if (event.keyCode === 39) {\n            // navigate right with right arrow key\n            event.preventDefault();\n            if (index !== value.length - 1) {\n              inputs[index + 1].focus();\n            }\n          } else if (\n            // prohibit weird behavior when up, down, +, or - are pressed\n            event.keyCode === 38 ||\n            event.keyCode === 40 ||\n            event.keyCode === 107 ||\n            event.keyCode === 109\n          ) {\n            event.preventDefault();\n          }\n        }}\n      />\n    );\n  };\n\n  return (\n    <Container paddingLeft={paddingLeft}>\n      {value.map((_, index) => {\n        return renderInput(index);\n      })}\n    </Container>\n  );\n};\n\nexport default CodeInput;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"CodeInput.js","sources":["../../src/components/CodeInput.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

package/build/components/Counter.d.ts

@@ -1,9 +1,9 @@
-import React from "react";
-export declare type CounterProps = {
-    value: number;
-    maxValue?: number;
-    minValue: number;
-    onIncrement: Function;
-    onDecrement: Function;
-};
-export default function Counter({ value, maxValue, minValue, onIncrement, onDecrement, }: CounterProps): React.JSX.Element;
+import React from "react";
+export type CounterProps = {
+    value: number;
+    maxValue?: number;
+    minValue: number;
+    onIncrement: Function;
+    onDecrement: Function;
+};
+export default function Counter({ value, maxValue, minValue, onIncrement, onDecrement, }: CounterProps): React.JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"Counter.js","sources":["../../src/components/Counter.tsx"],"sourcesContent":["import React, { Fragment } from \"react\";\nimport styled from \"styled-components\";\nimport * as Polished from \"polished\";\nimport { Colors } from \"../Colors\";\nimport Button, { ButtonTypes } from \"./Button\";\n\n// Fixed issue SELLOUT-24\nconst Container = styled.div`\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\ntype IconContainerProps = {\n  active: boolean;\n  justify: string;\n}\n\nconst IconContainer = styled.div<IconContainerProps>`\n  display: flex;\n  align-items: center;\n  justify-content: ${props => props.justify};\n  flex: 1;\n  /* background-color: blue; */\n  height: 100%;\n\n  &:hover {\n    cursor: ${props => (props.active ? \"pointer\" : null)};\n  }\n\n  .svg-inline--fa {\n    color: ${props =>\n      props.active ? Polished.lighten(0.025, Colors.Orange) : null} !important;\n  }\n`;\n\nexport type CounterProps = {\n value: number,\n maxValue?: number,\n minValue: number,\n onIncrement: Function,\n onDecrement: Function,\n};\n\nexport default function Counter({\n  value,\n  maxValue,\n  minValue = 0,\n  onIncrement,\n  onDecrement, \n}: CounterProps) {\n\n  const canDecrement = value > minValue;\n  const canIncrement = Boolean(!Boolean(maxValue) || (maxValue && value < maxValue));\n\n  return (\n    <Container>\n        <Fragment>\n          <IconContainer\n            active={canDecrement}\n            onClick={() => (canDecrement ? onDecrement() : null)}\n            justify=\"flex-start\"\n          >\n            <Button \n             type={ButtonTypes.Normal}\n             text={\"-\"}\n             bgColor={Colors.InteractiveBGSecondary}\n            />\n          </IconContainer>\n        </Fragment>\n      <IconContainer\n        active={canIncrement}\n        onClick={() => (canIncrement ? onIncrement() : null)}\n        justify=\"flex-end\"\n      >\n        <Button \n             type={ButtonTypes.Normal}\n             text={\"+\"}\n             bgColor={Colors.InteractiveBGPrimary}\n            />\n      </IconContainer>\n    </Container>\n  );\n}\n"],"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,ySAAoB,iEAG/B,EAAsB,8FAM7B,EAA0C,4CAI3C;AACqD,IAAA,qBAEjE,CAboB,CAAA,CAAA,EAAA,UAAA,KAAK,EAAA,EAAI,OAAA,KAAK,CAAC,OAAO,CAAA,EAAA,EAM7B,UAAA,KAAK,IAAI,QAAC,KAAK,CAAC,MAAM,GAAG,SAAS,GAAG,IAAI,EAAC,EAAA,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;;;;;"}
+{"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.d.ts

@@ -1,40 +1,40 @@
-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?: any;
-    tip?: string;
-    icon?: React.ReactNode;
-    height?: string;
-    labelColor?: string;
-    bgColor?: string;
-    itemColor?: string;
-    optionsColor?: string;
-    fontSize?: string;
-    fontFamily?: string;
-    fontWeight?: string;
-    iconColor?: string;
-    hoverColor?: string;
-    letterSpacing?: string;
-    borderColor?: string;
-    containerMinHeight?: string;
-    optionsHeight?: string;
-    itemContainerHeight?: string;
-    valueWhiteSpace?: string;
-};
-declare const Dropdown: React.FC<DropdownProps>;
-export default Dropdown;
+import React from "react";
+export interface IDropdownItem {
+    text: string;
+    value: any;
+    icon?: React.ReactNode;
+    color?: string;
+}
+export declare enum DropdownTypes {
+    Regular = "Regular",
+    Small = "Small"
+}
+type DropdownProps = {
+    type?: DropdownTypes;
+    value?: string;
+    onChange: Function;
+    placeholder?: string;
+    width?: string;
+    items: IDropdownItem[];
+    label?: any;
+    tip?: string;
+    icon?: React.ReactNode;
+    height?: string;
+    labelColor?: string;
+    bgColor?: string;
+    itemColor?: string;
+    optionsColor?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    iconColor?: string;
+    hoverColor?: string;
+    letterSpacing?: string;
+    borderColor?: string;
+    containerMinHeight?: string;
+    optionsHeight?: string;
+    itemContainerHeight?: string;
+    valueWhiteSpace?: string;
+};
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

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 };