@sellout/ui 0.0.299 → 0.0.301

package/build/components/CodeInput.js

@@ -3,14 +3,17 @@ 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"], [" \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  &::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\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\n  &::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n"])), Colors.Grey5, Colors.Grey1);
+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;
-    var _d = useState(new Array(length).fill('')), value = _d[0], setValue = _d[1];
+    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(''));
+            setValue(new Array(length).fill(""));
         }
     }, [resetCode]);
     var inputs = [];
@@ -27,18 +30,20 @@ var CodeInput = function (_a) {
                 inputs[index + 1].focus();
             }
         }
-        else if (valueAt.length === length) { //code pasted
-            setValue(valueAt.split(''));
+        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
+        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(''));
+            onComplete(currentValue.join(""));
         }
     };
     useEffect(function () {
@@ -46,41 +51,45 @@ var CodeInput = function (_a) {
     }, [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) {
+        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
+            }, 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] = '';
+                    currentValue[index] = "";
                     setValue(currentValue);
                     if (index !== 0) {
                         inputs[index - 1].focus();
                     }
                 }
-                else if (event.keyCode === 37) { // navigate left with left arrow key
+                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
+                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) {
+                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 (React.createElement(Container, { paddingLeft: paddingLeft }, value.map(function (_, index) {
         return renderInput(index);
     })));
 };

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}\nconst Container = styled.div<ContainerProps>` \n  margin: ${props => props.margin};\n`;\n\nconst Input = styled.input`\n  border: 2px solid ${Colors.Grey5};\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 ${Colors.Grey1};\n  }\n\n  &::-webkit-inner-spin-button, ::-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}\nconst CodeInput: React.FC<CodeInputProps> = ({\n  onChange,\n  onComplete,\n  length = 4,\n  resetCode = false\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\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) { //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) { // 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        onKeyDown={(event) => {\n          if (event.keyCode === 8 || event.keyCode === 46) { // 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) { // 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) { // navigate right with right arrow key\n            event.preventDefault();\n            if (index !== value.length - 1) {\n              inputs[index + 1].focus();\n            }\n          } else if ( // 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            event.preventDefault();\n          }\n        }}\n      />\n    );\n  }\n\n  return (\n    <Container>\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":["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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"}

package/build/components/Counter.js

@@ -3,28 +3,26 @@ import React, { Fragment } from 'react';
 import styled from 'styled-components';
 import * as Polished from 'polished';
 import { Colors } from '../Colors.js';
-import Icon, { Icons } from './Icon.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  /* 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  /* background-color: red; */\n"])));
+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;
 });
-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(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, size: 24 })),
-            React.createElement(Value, null, value))),
+                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(Icon, { icon: Icons.PlusCircleLight, color: canIncrement ? Colors.Orange : Colors.Grey5, size: 24 }))));
+            React.createElement(Button, { type: ButtonTypes.Normal, text: "+", bgColor: Colors.InteractiveBGPrimary }))));
 }
-var templateObject_1, templateObject_2, templateObject_3;
+var templateObject_1, templateObject_2;
 
 export { Counter as default };
 //# sourceMappingURL=Counter.js.map

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 Icon, { Icons } from \"./Icon\";\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  /* 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\nconst Value = styled.div`\n  font-size: 2.4rem;\n  color: ${Colors.Grey1};\n  min-width: 20px;\n  text-align: center;\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      {value > 0 && (\n        <Fragment>\n          <IconContainer\n            active={canDecrement}\n            onClick={() => (canDecrement ? onDecrement() : null)}\n            justify=\"flex-start\"\n          >\n            <Icon\n              icon={Icons.MinusCircleLight}\n              color={canDecrement ? Colors.Orange : Colors.Grey5}\n              size={24}\n            />\n          </IconContainer>\n          <Value>{value}</Value>\n        </Fragment>\n      )}\n      <IconContainer\n        active={canIncrement}\n        onClick={() => (canIncrement ? onIncrement() : null)}\n        justify=\"flex-end\"\n      >\n        <Icon\n          icon={Icons.PlusCircleLight}\n          color={canIncrement ? Colors.Orange : Colors.Grey5}\n          size={24}\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,6KAAA,CAAA,EAAA,CAAA,6KAQ3B,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;AAEF,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,mCAAA,EAAA,gDAAA,CAAA,EAAA,CAAA,mCAEb,EAAY,gDAGtB,CAHU,CAAA,CAAA,EAAA,MAAM,CAAC,KAAK,CAGtB,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;AACP,QAAA,KAAK,GAAG,CAAC,KACR,oBAAC,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,IAAI,EAAA,EACH,IAAI,EAAE,KAAK,CAAC,gBAAgB,EAC5B,KAAK,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAClD,IAAI,EAAE,EAAE,EAAA,CACR,CACY;AAChB,YAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA,EAAE,KAAK,CAAS,CACb,CACZ;QACD,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;AAElB,YAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EACH,IAAI,EAAE,KAAK,CAAC,eAAe,EAC3B,KAAK,EAAE,YAAY,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,CAAC,KAAK,EAClD,IAAI,EAAE,EAAE,EAAA,CACR,CACY,CACN,EACZ;AACJ,CAAC;;;;;"}
+{"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;;;;;"}

package/build/components/Dropdown.d.ts

@@ -16,10 +16,21 @@ declare type DropdownProps = {
     placeholder?: string;
     width?: string;
     items: IDropdownItem[];
-    label?: string;
+    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;
 };
 declare const Dropdown: React.FC<DropdownProps>;
 export default Dropdown;

package/build/components/Dropdown.js

@@ -12,16 +12,20 @@ var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplat
     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  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  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.width; }, Colors.White, Colors.Grey5, function (props) { return (props.open ? 100 : 0); }, function (props) {
+    ";\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; }, 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: 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 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: nowrap;\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: nowrap;\n"])), function (props) { return props.optionsColor || Colors.Grey1; });
 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.selected ? Colors.Grey7 : Colors.White;
-}, Colors.Grey1, Colors.Grey7);
+    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";
@@ -30,18 +34,18 @@ var 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;
+    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;
     var _d = React.useState(false), open = _d[0], setOpen = _d[1];
-    return (React.createElement(Container, { width: width, open: open, height: height },
-        label && React.createElement(Label, { text: label, tip: tip }),
-        React.createElement(FieldContainer, { 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 + 43 + "px", width: width, onClick: function () { return setOpen(!open); }, onBlur: function () { return setOpen(false); } },
+    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 + 43 + "px", width: width, onClick: function () { return setOpen(!open); }, onBlur: function () { return setOpen(false); }, borderColor: borderColor },
             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(Value, { optionsColor: optionsColor }, 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, { key: index, selected: false, onClick: function () { return onChange(item.value); } },
+                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));
             })))));

package/build/components/Dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"Dropdown.js","sources":["../../src/components/Dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\nimport Icon, { Icons } from \"./Icon\";\nimport Label from \"./Label\";\nimport Flex from \"./Flex\";\nimport * as Polished from \"polished\";\n\ntype ContainerProps = {\n  width?: string;\n  open: boolean;\n  height: string;\n};\n\nconst Container = styled.div<ContainerProps>`\n  position: relative;\n  height: ${(props) =>\n    props.open ? (props.height ? props.height : \"65px\") : \"65px\"};\n  width: ${(props) => props.width};\n`;\n\ntype FieldContainerProps = {\n  open: boolean;\n  width: string;\n  height: string;\n};\n\nconst FieldContainer = styled.div<FieldContainerProps>`\n  position: absolute;\n  max-height: ${(props) => (props.open ? props.height : \"38px\")};\n  width: ${(props) => props.width};\n  background-color: ${Colors.White};\n  border: 1px solid ${Colors.Grey5};\n  box-sizing: border-box;\n  border-radius: 8px;\n  transition: all 0.2s;\n  z-index: ${(props) => (props.open ? 100 : 0)};\n  box-shadow: ${(props) =>\n    props.open ? \"0px 4px 16px rgba(0, 0, 0, 0.05)\" : \"\"};\n  overflow: hidden;\n  outline: none;\n\n  &:hover {\n    cursor: pointer;\n    border: 1px solid ${Polished.darken(0.05, Colors.Grey5)};\n  }\n\n  &:focus {\n    border: 1px solid ${Colors.Grey4};\n  }\n`;\n\nconst TopRow = styled.div`\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\nconst Value = styled.div`\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ${Colors.Grey1};\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  margin-right: 10px;\n  white-space: nowrap;\n`;\n\ntype ItemsContainerProps = {\n  open: boolean;\n  height: string;\n};\n\nconst ItemsContainer = styled.div<ItemsContainerProps>`\n  position: relative;\n  max-height: ${(props) => (props.open ? props.height : \"0px\")};\n  overflow: ${(props) => (props.open ? \"auto\" : \"hidden\")};\n`;\n\ntype ItemProps = {\n  selected: boolean;\n};\n\nconst Item = styled.div<ItemProps>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 15px;\n  background-color: ${(props) =>\n    props.selected ? Colors.Grey7 : Colors.White};\n  font-size: 1.2rem;\n  color: ${Colors.Grey1};\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ${Colors.Grey7};\n  }\n`;\n\nexport interface IDropdownItem {\n  text: string;\n  value: any;\n  icon?: React.ReactNode;\n  color?: string;\n}\n\nexport enum DropdownTypes {\n  Regular = \"Regular\",\n  Small = \"Small\",\n}\n\ntype DropdownProps = {\n  type?: DropdownTypes;\n  value?: string;\n  onChange: Function;\n  placeholder?: string;\n  width?: string;\n  items: IDropdownItem[];\n  label?: string;\n  tip?: string;\n  icon?: React.ReactNode;\n  height?: string;\n};\n\nconst Dropdown: React.FC<DropdownProps> = ({\n  // type = DropdownTypes.Regular,\n  value,\n  onChange,\n  width = \"auto\",\n  items,\n  label,\n  tip,\n  icon,\n  height = \"65px\",\n}) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Container width={width} open={open} height={height}>\n      {label && <Label text={label} tip={tip} />}\n      <FieldContainer\n        tabIndex={1}\n        open={open}\n         height={items?.length > 4 ? \"130px\" : `${items?.length * 30 + 43}px`}\n        width={width}\n        onClick={() => setOpen(!open)}\n        onBlur={() => setOpen(false)}\n      >\n        <TopRow>\n          <Flex align=\"center\">\n            {icon && icon}\n            <Value>{value}</Value>\n          </Flex>\n          <Icon icon={Icons.Sort} size={12} color={Colors.Grey1} />\n        </TopRow>\n        <ItemsContainer\n          open={open}\n          height={items?.length > 3 ? \"90px\" : `${items?.length * 30}px`}\n          className=\"dropdown-list-menu  dropdown-list-height\"\n        >\n          {items?.map((item, index) => {\n            return (\n              <Item\n                key={index}\n                selected={false} // don't hightlight selected item in dropdown\n                onClick={() => onChange(item.value)}\n              >\n                {item.icon && item.icon}\n                {item.text}\n              </Item>\n            );\n          })}\n        </ItemsContainer>\n      </FieldContainer>\n    </Container>\n  );\n};\n\nexport default Dropdown;\n"],"names":[],"mappings":";;;;;;;;;AAcA,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,+HAAgB,qCAEhC;AACoD,IAAA,cACrD,EAAsB,KAChC,CAHW,CAAA,CAAA,EAAA,UAAC,KAAK,EAAA;IACd,OAAA,KAAK,CAAC,IAAI,IAAI,KAAK,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,IAAI,MAAM,CAAA;AAA5D,CAA4D,EACrD,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,KAAK,CAAA,EAAA,CAChC,CAAC;AAQF,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,0cAAqB,yCAEtC,EAA+C,cACpD,EAAsB,yBACX,EAAY,yBACZ,EAAY,2FAIrB,EAAiC,mBAC9B;AACwC,IAAA,uGAMhC,EAAmC,+CAInC,EAAY,UAEnC,CArBe,CAAA,CAAA,EAAA,UAAC,KAAK,EAAA,EAAK,QAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,MAAM,EAAnC,EAAoC,EACpD,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,KAAK,CAAA,EAAA,EACX,MAAM,CAAC,KAAK,EACZ,MAAM,CAAC,KAAK,EAIrB,UAAC,KAAK,IAAK,QAAC,KAAK,CAAC,IAAI,GAAG,GAAG,GAAG,CAAC,EAAC,EAAA,EAC9B,UAAC,KAAK,EAAA;IAClB,OAAA,KAAK,CAAC,IAAI,GAAG,kCAAkC,GAAG,EAAE,CAAA;AAApD,CAAoD,EAMhC,QAAQ,CAAC,MAAM,CAAC,IAAI,EAAE,MAAM,CAAC,KAAK,CAAC,EAInC,MAAM,CAAC,KAAK,CAEnC,CAAC;AAEF,IAAM,MAAM,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,8IAAA,CAAA,EAAA,CAAA,8IAOxB,IAAA,CAAC;AAEF,IAAM,KAAK,GAAG,MAAM,CAAC,GAAG,CAAA,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,wDAAA,EAAA,oIAAA,CAAA,EAAA,CAAA,wDAGb,EAAY,oIAKtB,CALU,CAAA,CAAA,EAAA,MAAM,CAAC,KAAK,CAKtB,CAAC;AAOF,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,sIAAqB,yCAEtC,EAA8C,iBAChD,EAA2C,KACxD,CAAA,CAAA,CAAA,EAFe,UAAC,KAAK,EAAA,EAAK,QAAC,KAAK,CAAC,IAAI,GAAG,KAAK,CAAC,MAAM,GAAG,KAAK,EAAC,EAAA,EAChD,UAAC,KAAK,EAAA,EAAK,QAAC,KAAK,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,EAAC,EAAA,CACxD,CAAC;AAMF,IAAM,IAAI,GAAG,MAAM,CAAC,GAAG,8UAAW,8HAMZ;AAC0B,IAAA,oCAErC,EAAY,yFAKC,EAAY,UAEnC,CAAA,CAAA,CAAA,EAVqB,UAAC,KAAK,EAAA;AACxB,IAAA,OAAA,KAAK,CAAC,QAAQ,GAAG,MAAM,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAA;AAA5C,CAA4C,EAErC,MAAM,CAAC,KAAK,EAKC,MAAM,CAAC,KAAK,CAEnC,CAAC;IASU,cAGX;AAHD,CAAA,UAAY,aAAa,EAAA;AACvB,IAAA,aAAA,CAAA,SAAA,CAAA,GAAA,SAAmB,CAAA;AACnB,IAAA,aAAA,CAAA,OAAA,CAAA,GAAA,OAAe,CAAA;AACjB,CAAC,EAHW,aAAa,KAAb,aAAa,GAGxB,EAAA,CAAA,CAAA,CAAA;AAeK,IAAA,QAAQ,GAA4B,UAAC,EAU1C,EAAA;;;AARC,IAAA,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAA,GAAA,EAAA,CAAA,KAAc,EAAd,KAAK,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,MAAM,GAAA,EAAA,EACd,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,EAAe,GAAA,EAAA,CAAA,MAAA,EAAf,MAAM,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,MAAM,GAAA,EAAA,CAAA;AAET,IAAA,IAAA,EAAkB,GAAA,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAtC,IAAI,GAAA,EAAA,CAAA,CAAA,CAAA,EAAE,OAAO,QAAyB,CAAC;AAE9C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,EAAA;QAChD,KAAK,IAAI,KAAC,CAAA,aAAA,CAAA,KAAK,EAAC,EAAA,IAAI,EAAE,KAAK,EAAE,GAAG,EAAE,GAAG,EAAI,CAAA;AAC1C,QAAA,KAAA,CAAA,aAAA,CAAC,cAAc,EAAA,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,IAAI,EACT,MAAM,EAAE,CAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,MAAM,IAAG,CAAC,GAAG,OAAO,GAAM,CAAA,KAAK,aAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,MAAM,IAAG,EAAE,GAAG,EAAE,GAAI,IAAA,EACrE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,cAAM,OAAA,OAAO,CAAC,CAAC,IAAI,CAAC,CAAd,EAAc,EAC7B,MAAM,EAAE,YAAM,EAAA,OAAA,OAAO,CAAC,KAAK,CAAC,GAAA,EAAA;AAE5B,YAAA,KAAA,CAAA,aAAA,CAAC,MAAM,EAAA,IAAA;AACL,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAA,EAAC,KAAK,EAAC,QAAQ,EAAA;AACjB,oBAAA,IAAI,IAAI,IAAI;AACb,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,EAAA,IAAA,EAAE,KAAK,CAAS,CACjB;AACP,gBAAA,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,IAAI,EAAE,KAAK,CAAC,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,GAAI,CAClD;YACT,KAAC,CAAA,aAAA,CAAA,cAAc,EACb,EAAA,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,CAAA,KAAK,KAAL,IAAA,IAAA,KAAK,uBAAL,KAAK,CAAE,MAAM,IAAG,CAAC,GAAG,MAAM,GAAM,CAAA,KAAK,KAAL,IAAA,IAAA,KAAK,KAAL,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,KAAK,CAAE,MAAM,IAAG,EAAE,GAAA,IAAI,EAC9D,SAAS,EAAC,0CAA0C,IAEnD,KAAK,KAAA,IAAA,IAAL,KAAK,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAL,KAAK,CAAE,GAAG,CAAC,UAAC,IAAI,EAAE,KAAK,EAAA;gBACtB,QACE,oBAAC,IAAI,EAAA,EACH,GAAG,EAAE,KAAK,EACV,QAAQ,EAAE,KAAK,EACf,OAAO,EAAE,YAAM,EAAA,OAAA,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA,EAAA,EAAA;AAElC,oBAAA,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI;AACtB,oBAAA,IAAI,CAAC,IAAI,CACL,EACP;AACJ,aAAC,CACc,CAAA,CACF,CACP,EACZ;AACJ,EAAE;;;;;"}
+{"version":3,"file":"Dropdown.js","sources":["../../src/components/Dropdown.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\nimport { Colors } from \"../Colors\";\nimport Icon, { Icons } from \"./Icon\";\nimport Label from \"./Label\";\nimport Flex from \"./Flex\";\nimport * as Polished from \"polished\";\n\ntype ContainerProps = {\n  width?: string;\n  open: boolean;\n  height: string;\n};\ntype FieldContainerProps = {\n  open: boolean;\n  width: string;\n  height: string;\n  bgColor?: string;\n  valueColor?: string;\n  itemColor?: string;\n  borderColor?:string;\n};\n\ntype OptionValueProps = {\n  optionsColor?: string;\n};\nconst Container = styled.div<ContainerProps>`\n  position: relative;\n  height: ${(props) =>\n    props.open ? (props.height ? props.height : \"65px\") : \"65px\"};\n  width: ${(props) => props.width};\n`;\n\nconst FieldContainer = styled.div<FieldContainerProps>`\n  position: absolute;\n  max-height: ${(props) => (props.open ? props.height : \"38px\")};\n  width: ${(props) => props.width};\n  background-color: ${(props) => props.bgColor || Colors.White};\n  border: 1px solid ${(props) => props.borderColor || Colors.Grey5};\n  box-sizing: border-box;\n  border-radius: 8px;\n  transition: all 0.2s;\n  z-index: ${(props) => (props.open ? 100 : 0)};\n  box-shadow: ${(props) =>\n    props.open ? \"0px 4px 16px rgba(0, 0, 0, 0.05)\" : \"\"};\n  overflow: hidden;\n  outline: none;\n\n  &:hover {\n    cursor: pointer;\n    border: 1px solid ${Polished.darken(0.05, Colors.Grey5)};\n  }\n\n  &:focus {\n    border: 1px solid ${Colors.Grey4};\n  }\n`;\n\nconst TopRow = styled.div`\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\nconst Value = styled.div<OptionValueProps>`\n  font-size: 1.4rem;\n  font-weight: 500;\n  color: ${(props) => props.optionsColor || Colors.Grey1};\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  margin-right: 10px;\n  white-space: nowrap;\n`;\n\ntype ItemsContainerProps = {\n  open: boolean;\n  height: string;\n};\n\nconst ItemsContainer = styled.div<ItemsContainerProps>`\n  position: relative;\n  max-height: ${(props) => (props.open ? props.height : \"0px\")};\n  overflow: ${(props) => (props.open ? \"auto\" : \"hidden\")};\n`;\n\ntype ItemProps = {\n  selected: boolean;\n  itemColor?: string;\n  optionsColor?: string;\n  bgColor?: string;\n  hoverColor?:string\n};\n\nconst Item = styled.div<ItemProps>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 30px;\n  padding: 0 15px;\n  background-color: ${(props) =>\n    props.bgColor\n      ? Colors.SurfaceTertiary\n      : props.selected\n      ? props.itemColor || Colors.Grey7\n      : Colors.White};\n  font-size: 1.2rem;\n  color: ${(props) => props.optionsColor || Colors.Grey1};\n  transition: all 0.2s;\n\n  &:hover {\n    cursor: pointer;\n    background-color: ${(props) => props.hoverColor || Colors.Grey7};\n  }\n`;\n\nexport interface IDropdownItem {\n  text: string;\n  value: any;\n  icon?: React.ReactNode;\n  color?: string;\n}\n\nexport enum DropdownTypes {\n  Regular = \"Regular\",\n  Small = \"Small\",\n}\n\ntype DropdownProps = {\n  type?: DropdownTypes;\n  value?: string;\n  onChange: Function;\n  placeholder?: string;\n  width?: string;\n  items: IDropdownItem[];\n  label?: any;\n  tip?: string;\n  icon?: React.ReactNode;\n  height?: string;\n  labelColor?: string;\n  bgColor?: string;\n  itemColor?: string;\n  optionsColor?: string;\n  fontSize?: string;\n  fontFamily?: string;\n  fontWeight?: string;\n  iconColor?: string;\n  hoverColor?:string;\n  letterSpacing?:string;\n  borderColor?:string;\n};\n\nconst Dropdown: React.FC<DropdownProps> = ({\n  // type = DropdownTypes.Regular,\n  value,\n  onChange,\n  width = \"auto\",\n  items,\n  label,\n  tip,\n  icon,\n  height = \"65px\",\n  labelColor,\n  bgColor,\n  itemColor,\n  optionsColor,\n  fontSize,\n  fontFamily,\n  fontWeight,\n  iconColor,\n  hoverColor,\n  letterSpacing,\n  borderColor,\n}) => {\n  const [open, setOpen] = React.useState(false);\n\n  return (\n    <Container width={width} open={true} height={height}>\n      {label && (\n        <Label\n          text={label}\n          tip={tip}\n          labelColor={labelColor}\n          fontFamily={fontFamily}\n          fontSize={fontSize}\n          fontWeight={fontWeight}\n          letterSpacing={letterSpacing}\n        />\n      )}\n      <FieldContainer\n        itemColor={itemColor}\n        bgColor={bgColor}\n        tabIndex={1}\n        open={open}\n        height={items?.length > 4 ? \"130px\" : `${items?.length * 30 + 43}px`}\n        width={width}\n        onClick={() => setOpen(!open)}\n        onBlur={() => setOpen(false)}\n        borderColor={borderColor}\n      >\n        <TopRow>\n          <Flex align=\"center\">\n            {icon && icon}\n            <Value optionsColor={optionsColor}>{value}</Value>\n          </Flex>\n          <Icon icon={Icons.Sort} size={12} color={iconColor} />\n        </TopRow>\n        <ItemsContainer\n          open={open}\n          height={items?.length > 3 ? \"90px\" : `${items?.length * 30}px`}\n          className=\"dropdown-list-menu  dropdown-list-height\"\n        >\n          {items?.map((item, index) => {\n            return (\n              <Item\n                bgColor={bgColor}\n                optionsColor={optionsColor}\n                itemColor={item.color}\n                hoverColor={hoverColor}\n                key={index}\n                selected={false} // don't hightlight selected item in dropdown\n                onClick={() => onChange(item.value)}\n              >\n                {item.icon && item.icon}\n                {item.text}\n              </Item>\n            );\n          })}\n        </ItemsContainer>\n      </FieldContainer>\n    </Container>\n  );\n};\n\nexport default Dropdown;\n"],"names":[],"mappings":"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"}

package/build/components/Flex.d.ts

@@ -7,6 +7,8 @@ declare type FlexProps = {
     margin?: string;
     flex?: string;
     height?: string;
+    color?: string;
+    gap?: string;
 };
 declare const Flex: React.FC<FlexProps>;
 export default Flex;

package/build/components/Flex.js

@@ -2,10 +2,10 @@ 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 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;
-    return (React.createElement(Container, { direction: direction, justify: justify, align: align, padding: padding, margin: margin, flex: flex, height: height }, children));
+    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;
 

package/build/components/Flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"Flex.js","sources":["../../src/components/Flex.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\ntype FlexProps = {\n  direction?: string;\n  justify?: string;\n  align?: string;\n  padding?: string;\n  margin?: string;\n  flex?: string;\n  height?: string;\n};\n\nconst Container = styled.div<FlexProps>`\n  display: flex;\n  flex-direction: ${(props) => props.direction};\n  justify-content: ${(props) => props.justify};\n  align-items: ${(props) => props.align};\n  padding: ${(props) => props.padding};\n  margin: ${(props) => props.margin};\n  flex: ${(props) => props.flex};\n  height: ${(props) => props.height};\n`;\n\nconst Flex: React.FC<FlexProps> = ({ \n  children,\n  direction = 'row',\n  justify = '',\n  align = '',\n  padding = '',\n  margin = '',\n  flex = '',\n  height = '',\n }) => {\n  return (\n    <Container\n      direction={direction}\n      justify={justify}\n      align={align}\n      padding={padding}\n      margin={margin}\n      flex={flex}\n      height={height}\n    >\n      {children}\n    </Container>\n  );\n};\n\nexport default Flex;\n"],"names":[],"mappings":";;;;AAaA,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,KAAA,CAAA,EAAA,CAAA,wCAEnB,EAA0B,wBACzB,EAAwB,oBAC5B,EAAsB,gBAC1B,EAAwB,eACzB,EAAuB,aACzB,EAAqB,eACnB,EAAuB,KAClC,CAAA,CAAA,CAAA,EAPmB,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,SAAS,CAAf,EAAe,EACzB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,OAAO,CAAA,EAAA,EAC5B,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,KAAK,GAAA,EAC1B,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,OAAO,CAAb,EAAa,EACzB,UAAC,KAAK,IAAK,OAAA,KAAK,CAAC,MAAM,CAAA,EAAA,EACzB,UAAC,KAAK,EAAK,EAAA,OAAA,KAAK,CAAC,IAAI,GAAA,EACnB,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,MAAM,CAAZ,EAAY,CAClC,CAAC;AAEI,IAAA,IAAI,GAAwB,UAAC,EASjC,EAAA;QARA,QAAQ,GAAA,EAAA,CAAA,QAAA,EACR,EAAiB,GAAA,EAAA,CAAA,SAAA,EAAjB,SAAS,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,GAAA,EAAA,EACjB,EAAY,GAAA,EAAA,CAAA,OAAA,EAAZ,OAAO,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,KAAA,EACZ,EAAA,GAAA,EAAA,CAAA,KAAU,EAAV,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,EACV,EAAA,GAAA,EAAA,CAAA,OAAY,EAAZ,OAAO,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,EACZ,cAAW,EAAX,MAAM,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAA,EAAA,EACX,YAAS,EAAT,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAA,EAAA,EACT,cAAW,EAAX,MAAM,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,EAAE,GAAA,EAAA,CAAA;AAEX,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EACR,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,EAAA,EAEb,QAAQ,CACC,EACZ;AACJ,EAAE;;;;;"}
+{"version":3,"file":"Flex.js","sources":["../../src/components/Flex.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"styled-components\";\n\ntype FlexProps = {\n  direction?: string;\n  justify?: string;\n  align?: string;\n  padding?: string;\n  margin?: string;\n  flex?: string;\n  height?: string;\n  color?:string;\n  gap?:string;\n};\n\nconst Container = styled.div<FlexProps>`\n  display: flex;\n  flex-direction: ${(props) => props.direction};\n  justify-content: ${(props) => props.justify};\n  align-items: ${(props) => props.align};\n  padding: ${(props) => props.padding};\n  margin: ${(props) => props.margin};\n  flex: ${(props) => props.flex};\n  height: ${(props) => props.height};\n  color: ${(props) => props.color};\n  gap: ${(props) => props.gap};\n`;\n\nconst Flex: React.FC<FlexProps> = ({ \n  children,\n  direction = 'row',\n  justify = '',\n  align = '',\n  padding = '',\n  margin = '',\n  flex = '',\n  height = '',\n  color = '',\n  gap= ''\n }) => {\n  return (\n    <Container\n      direction={direction}\n      justify={justify}\n      align={align}\n      padding={padding}\n      margin={margin}\n      flex={flex}\n      height={height}\n      color={color}\n      gap={gap}\n    >\n      {children}\n    </Container>\n  );\n};\n\nexport default Flex;\n"],"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;;;;;"}

package/build/components/Icon.d.ts

@@ -205,5 +205,15 @@ export declare type IconProps = {
     tip?: string;
     transitionDuration?: string;
     rotation?: number;
+    width?: string | number;
+    height?: string | number;
+    padding?: string;
+    backgroundColor?: string;
+    borderRadius?: string | number;
+    marginRight?: string;
+    display?: string;
+    justifyContent?: string;
+    alignItems?: string;
+    rest?: any;
 };
-export default function Icon({ icon, color, hoverColor, onClick, size, top, left, right, position, zIndex, margin, tip, transitionDuration, rotation, }: IconProps): React.JSX.Element;
+export default function Icon({ icon, color, hoverColor, onClick, size, top, left, right, position, zIndex, margin, tip, transitionDuration, rotation, width, height, padding, backgroundColor, borderRadius, marginRight, display, justifyContent, alignItems, ...rest }: IconProps): React.JSX.Element;

package/build/components/Icon.js

@@ -1,30 +1,30 @@
-import { __makeTemplateObject } from '../_virtual/_tslib.js';
+import { __makeTemplateObject, __rest, __assign } from '../_virtual/_tslib.js';
 import React from 'react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Colors } from '../Colors.js';
 import { IconEnum } from './Icons.js';
 import styled from 'styled-components';
 
-var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n\n  &:hover {\n    color: ",
-    ";\n  }\n"])), function (props) { return props.color; }, function (props) {
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  display: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  &:hover {\n    color: ", ";\n  }\n"], ["\n  color: ", ";\n  width: ", ";\n  height: ", ";\n  padding: ", ";\n  background-color: ", ";\n  border-radius: ", ";\n  margin-right: ", ";\n  display: ", ";\n  align-items: ", ";\n  justify-content: ", ";\n  &:hover {\n    color: ",
+    ";\n  }\n"])), function (props) { return props.color || Colors.Grey1; }, function (props) { return props.width || "auto"; }, function (props) { return props.height || "auto"; }, function (props) { return props.padding || "0"; }, function (props) { return props.backgroundColor || "transparent"; }, function (props) { return props.borderRadius || "0"; }, function (props) { return props.marginRight || "0"; }, function (props) { return props.display || ""; }, function (props) { return props.alignItems || ""; }, function (props) { return props.justifyContent || ""; }, function (props) {
     if (props.color === "inherit")
         return null;
     return props.hoverColor;
 });
 var Icons = IconEnum;
 function Icon(_a) {
-    var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, _c = _a.color, color = _c === void 0 ? Colors.Orange : _c, _d = _a.hoverColor, hoverColor = _d === void 0 ? null : _d, onClick = _a.onClick, _e = _a.size, size = _e === void 0 ? 20 : _e, top = _a.top, left = _a.left, right = _a.right, _f = _a.position, position = _f === void 0 ? "relative" : _f, zIndex = _a.zIndex, margin = _a.margin, tip = _a.tip, transitionDuration = _a.transitionDuration, rotation = _a.rotation;
+    var _b = _a.icon, icon = _b === void 0 ? Icons.AudienceRegular : _b, color = _a.color, _c = _a.hoverColor, hoverColor = _c === void 0 ? null : _c, onClick = _a.onClick, _d = _a.size, size = _d === void 0 ? 20 : _d, top = _a.top, left = _a.left, right = _a.right, _e = _a.position, position = _e === void 0 ? "relative" : _e, zIndex = _a.zIndex, margin = _a.margin, tip = _a.tip, transitionDuration = _a.transitionDuration, rotation = _a.rotation, width = _a.width, height = _a.height, padding = _a.padding, backgroundColor = _a.backgroundColor, borderRadius = _a.borderRadius, marginRight = _a.marginRight, display = _a.display, justifyContent = _a.justifyContent, alignItems = _a.alignItems, rest = __rest(_a, ["icon", "color", "hoverColor", "onClick", "size", "top", "left", "right", "position", "zIndex", "margin", "tip", "transitionDuration", "rotation", "width", "height", "padding", "backgroundColor", "borderRadius", "marginRight", "display", "justifyContent", "alignItems"]);
     var cursor = onClick ? "pointer" : "";
     if (icon === Icons.TicketRegular)
         rotation = 90;
     if (icon === Icons.TicketSolid)
         rotation = 90;
-    return (React.createElement(Container, { color: color, hoverColor: hoverColor, "data-tip": tip },
+    return (React.createElement(Container, __assign({ color: color, hoverColor: hoverColor, width: width, height: height, padding: padding, backgroundColor: backgroundColor, borderRadius: borderRadius, marginRight: marginRight, "data-tip": tip, display: display, alignItems: alignItems, justifyContent: justifyContent }, rest),
         React.createElement(FontAwesomeIcon, { icon: icon, onClick: onClick, style: {
                 top: top,
                 left: left,
                 right: right,
-                position: position,
+                position: !marginRight ? position : "",
                 zIndex: zIndex,
                 fontSize: size,
                 transition: "all " + (transitionDuration || "0.2s"),

package/build/components/Icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"Icon.js","sources":["../../src/components/Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Colors } from \"../Colors\";\nimport { IconEnum } from \"./Icons\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div<any>`\n  color: ${(props) => props.color};\n\n  &:hover {\n    color: ${(props) => {\n      if (props.color === \"inherit\") return null;\n      return props.hoverColor;\n    }};\n  }\n`;\n\nexport const Icons = IconEnum;\n\nexport type IconProps = {\n  icon: any;\n  color?: Colors | string | null;\n  hoverColor?: Colors | string | null;\n  onClick?: any | null;\n  size?: string | number | undefined;\n  position?: string;\n  top?: string | number | undefined;\n  left?: string | number | undefined;\n  right?: string | number | undefined;\n  zIndex?: number | void;\n  margin?: string | number | undefined;\n  tip?: string;\n  transitionDuration?: string;\n  rotation?: number;\n};\n\nexport default function Icon({\n  icon = Icons.AudienceRegular,\n  color = Colors.Orange,\n  hoverColor = null,\n  onClick,\n  size = 20,\n  top,\n  left,\n  right,\n  position = \"relative\" as any,\n  zIndex,\n  margin,\n  tip,\n  transitionDuration,\n  rotation,\n}: IconProps) {\n  const cursor: string = onClick ? \"pointer\" : \"\";\n\n  if (icon === Icons.TicketRegular) rotation = 90;\n  if (icon === Icons.TicketSolid) rotation = 90;\n\n  return (\n    <Container color={color} hoverColor={hoverColor} data-tip={tip}>\n      <FontAwesomeIcon\n        icon={icon as any}\n        onClick={onClick}\n        style={{\n          top,\n          left,\n          right,\n          position: position as any,\n          zIndex: zIndex as any,\n          fontSize: size,\n          transition: `all ${transitionDuration || \"0.2s\"}`,\n          transform: rotation ? `rotate(${rotation}deg)` : undefined,\n          margin,\n          cursor,\n        }}\n      />\n    </Container>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAMA,IAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAK,gBAAA,KAAA,gBAAA,GAAA,oBAAA,CAAA,CAAA,aAAA,EAAA,+BAAA,EAAA,UAAA,CAAA,EAAA,CAAA,aACtB,EAAsB,+BAGpB;AAGR,IAAA,UAEJ,CARU,CAAA,CAAA,EAAA,UAAC,KAAK,EAAA,EAAK,OAAA,KAAK,CAAC,KAAK,CAAX,EAAW,EAGpB,UAAC,KAAK,EAAA;AACb,IAAA,IAAI,KAAK,CAAC,KAAK,KAAK,SAAS;AAAE,QAAA,OAAO,IAAI,CAAC;IAC3C,OAAO,KAAK,CAAC,UAAU,CAAC;AAC1B,CAAC,CAEJ,CAAC;AAEK,IAAM,KAAK,GAAG,SAAS;AAmBN,SAAA,IAAI,CAAC,EAejB,EAAA;AAdV,IAAA,IAAA,EAAA,GAAA,EAAA,CAAA,IAA4B,EAA5B,IAAI,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,KAAK,CAAC,eAAe,GAAA,EAAA,EAC5B,EAAqB,GAAA,EAAA,CAAA,KAAA,EAArB,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,MAAM,CAAC,MAAM,GAAA,EAAA,EACrB,EAAA,GAAA,EAAA,CAAA,UAAiB,EAAjB,UAAU,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,IAAI,GAAA,EAAA,EACjB,OAAO,GAAA,EAAA,CAAA,OAAA,EACP,EAAA,GAAA,EAAA,CAAA,IAAS,EAAT,IAAI,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,EAAE,GAAA,EAAA,EACT,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,IAAI,GAAA,EAAA,CAAA,IAAA,EACJ,KAAK,GAAA,EAAA,CAAA,KAAA,EACL,EAA4B,GAAA,EAAA,CAAA,QAAA,EAA5B,QAAQ,GAAG,EAAA,KAAA,KAAA,CAAA,GAAA,UAAiB,GAAA,EAAA,EAC5B,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,MAAM,GAAA,EAAA,CAAA,MAAA,EACN,GAAG,GAAA,EAAA,CAAA,GAAA,EACH,kBAAkB,GAAA,EAAA,CAAA,kBAAA,EAClB,QAAQ,GAAA,EAAA,CAAA,QAAA,CAAA;IAER,IAAM,MAAM,GAAW,OAAO,GAAG,SAAS,GAAG,EAAE,CAAC;AAEhD,IAAA,IAAI,IAAI,KAAK,KAAK,CAAC,aAAa;QAAE,QAAQ,GAAG,EAAE,CAAC;AAChD,IAAA,IAAI,IAAI,KAAK,KAAK,CAAC,WAAW;QAAE,QAAQ,GAAG,EAAE,CAAC;AAE9C,IAAA,QACE,KAAA,CAAA,aAAA,CAAC,SAAS,EAAA,EAAC,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,UAAU,EAAA,UAAA,EAAY,GAAG,EAAA;QAC5D,KAAC,CAAA,aAAA,CAAA,eAAe,EACd,EAAA,IAAI,EAAE,IAAW,EACjB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE;AACL,gBAAA,GAAG,EAAA,GAAA;AACH,gBAAA,IAAI,EAAA,IAAA;AACJ,gBAAA,KAAK,EAAA,KAAA;AACL,gBAAA,QAAQ,EAAE,QAAe;AACzB,gBAAA,MAAM,EAAE,MAAa;AACrB,gBAAA,QAAQ,EAAE,IAAI;AACd,gBAAA,UAAU,EAAE,MAAA,IAAO,kBAAkB,IAAI,MAAM,CAAE;gBACjD,SAAS,EAAE,QAAQ,GAAG,SAAU,GAAA,QAAQ,GAAM,MAAA,GAAG,SAAS;AAC1D,gBAAA,MAAM,EAAA,MAAA;AACN,gBAAA,MAAM,EAAA,MAAA;aACP,EACD,CAAA,CACQ,EACZ;AACJ,CAAC;;;;;"}
+{"version":3,"file":"Icon.js","sources":["../../src/components/Icon.tsx"],"sourcesContent":["import React from \"react\";\nimport { FontAwesomeIcon } from \"@fortawesome/react-fontawesome\";\nimport { Colors } from \"../Colors\";\nimport { IconEnum } from \"./Icons\";\nimport styled from \"styled-components\";\n\nconst Container = styled.div<any>`\n  color: ${(props) => props.color || Colors.Grey1};\n  width: ${(props) => props.width || \"auto\"};\n  height: ${(props) => props.height || \"auto\"};\n  padding: ${(props) => props.padding || \"0\"};\n  background-color: ${(props) => props.backgroundColor || \"transparent\"};\n  border-radius: ${(props) => props.borderRadius || \"0\"};\n  margin-right: ${(props) => props.marginRight || \"0\"};\n  display: ${(props) => props.display || \"\"};\n  align-items: ${(props) => props.alignItems || \"\"};\n  justify-content: ${(props) => props.justifyContent || \"\"};\n  &:hover {\n    color: ${(props) => {\n    if (props.color === \"inherit\") return null;\n    return props.hoverColor;\n  }};\n  }\n`;\n\nexport const Icons = IconEnum;\n\nexport type IconProps = {\n  icon: any;\n  color?: Colors | string | null;\n  hoverColor?: Colors | string | null;\n  onClick?: any | null;\n  size?: string | number | undefined;\n  position?: string;\n  top?: string | number | undefined;\n  left?: string | number | undefined;\n  right?: string | number | undefined;\n  zIndex?: number | void;\n  margin?: string | number | undefined;\n  tip?: string;\n  transitionDuration?: string;\n  rotation?: number;\n  width?: string | number;\n  height?: string | number;\n  padding?: string;\n  backgroundColor?: string;\n  borderRadius?: string | number;\n  marginRight?: string;\n  display?: string;\n  justifyContent?: string;\n  alignItems?: string\n  rest ?: any\n};\n\nexport default function Icon({\n  icon = Icons.AudienceRegular,\n  color,\n  hoverColor = null,\n  onClick,\n  size = 20,\n  top,\n  left,\n  right,\n  position = \"relative\" as any,\n  zIndex,\n  margin,\n  tip,\n  transitionDuration,\n  rotation,\n  width,\n  height,\n  padding,\n  backgroundColor,\n  borderRadius,\n  marginRight,\n  display,\n  justifyContent,\n  alignItems,\n  ...rest\n}: IconProps) {\n  const cursor: string = onClick ? \"pointer\" : \"\";\n\n  if (icon === Icons.TicketRegular) rotation = 90;\n  if (icon === Icons.TicketSolid) rotation = 90;\n\n  return (\n    <Container color={color}\n      hoverColor={hoverColor}\n      width={width}\n      height={height}\n      padding={padding}\n      backgroundColor={backgroundColor}\n      borderRadius={borderRadius}\n      marginRight={marginRight}\n      data-tip={tip}\n      display={display}\n      alignItems={alignItems}\n      justifyContent={justifyContent}\n      {...rest}\n      >\n      <FontAwesomeIcon\n        icon={icon as any}\n        onClick={onClick}\n        style={{\n          top,\n          left,\n          right,\n          position: !marginRight ? position as any : \"\",\n          zIndex: zIndex as any,\n          fontSize: size,\n          transition: `all ${transitionDuration || \"0.2s\"}`,\n          transform: rotation ? `rotate(${rotation}deg)` : undefined,\n          margin,\n          cursor,\n        }}\n      />\n    </Container>\n  );\n}\n"],"names":[],"mappings":"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"}

package/build/components/Input.d.ts

@@ -1,14 +1,22 @@
 import React from "react";
 import { Colors } from "../Colors";
+import { IconProps } from "./Icon";
 export declare enum InputSizes {
     Large = "Large",
-    Regular = "Regular"
+    Regular = "Regular",
+    CustomInputHeight = "CustomInputHeight"
 }
 declare type StyledInputProps = {
     padding?: string;
     inputSize?: InputSizes;
     disabled: boolean;
     hasIcon: boolean;
+    backgroundColor?: string;
+    textColor?: string;
+    fontSize?: string;
+    fontWeight?: string;
+    placeholderColor?: string;
+    mediaDesktopFontSize?: string;
 };
 export declare const InputStyled: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, StyledInputProps>> & string;
 export declare type InputProps = {
@@ -34,18 +42,36 @@ export declare type InputProps = {
     padding?: string;
     width?: string;
     onEnter?: Function;
-    label?: string;
+    label?: string | any;
     subLabel?: string;
     tip?: string;
     maxLength?: number;
     iconConditionalColor?: any;
-    validationError?: string;
+    validationError?: string | any;
     disabled?: boolean;
     incrementButton?: boolean;
     handleIncrement?: any;
     handleDecrement?: any;
     codeApply?: string;
     discountCode?: string;
+    bgColor?: string;
+    labelColor?: string;
+    fontSize?: string;
+    fontFamily?: string;
+    fontWeight?: string;
+    placeholderTextColor?: string;
+    marginBottam?: string;
+    iconProps?: Partial<IconProps>;
+    letterSpacing?: string;
+    onFocusedColor?: boolean;
+    svgIconName?: string;
+    svgWidth?: string;
+    svgHeight?: string;
+    disableDarkThemeBg?: boolean;
+    validationDarkThemeBorderColor?: boolean;
+    mediaDesktopFontSize?: string;
+    maxLengthDisabled?: boolean;
+    disableValidationErrorBox?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<unknown>>;
 export default _default;