@sellout/ui 0.0.397 → 0.0.399

package/build/src/components/Button.js

@@ -0,0 +1,264 @@
+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 Icon from './Icon.js';
+import Loader, { LoaderSizes } from './Loader.js';
+import SvgRenderer from './SvgRendrer.js';
+
+var ButtonTypes;
+(function (ButtonTypes) {
+    ButtonTypes["Next"] = "Next";
+    ButtonTypes["Regular"] = "Regular";
+    ButtonTypes["Thin"] = "Thin";
+    ButtonTypes["Normal"] = "Normal";
+    ButtonTypes["CustomInputHeight"] = "CustomInputHeight";
+})(ButtonTypes || (ButtonTypes = {}));
+var ButtonStates;
+(function (ButtonStates) {
+    ButtonStates["Active"] = "Active";
+    ButtonStates["Warning"] = "Warning";
+    ButtonStates["Disabled"] = "Disabled";
+})(ButtonStates || (ButtonStates = {}));
+var ButtonIconPosition;
+(function (ButtonIconPosition) {
+    ButtonIconPosition["Left"] = "Left";
+    ButtonIconPosition["Right"] = "Right";
+})(ButtonIconPosition || (ButtonIconPosition = {}));
+var StyledButton = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n  justify-content: ", ";\n  white-space: nowrap;\n  box-sizing: border-box;\n  text-align: center;\n  border-radius: 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  background-color: ", ";\n  border: ", ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ", ";\n  }\n"], ["\n  position: relative;\n  height: ", ";\n  width: ", ";\n  margin-bottom: ", ";\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  overflow: hidden;\n  justify-content: ", ";\n  white-space: nowrap;\n  box-sizing: border-box;\n  text-align: center;\n  border-radius: 10px;\n  transition: all 0.2s;\n  margin: ", ";\n  padding: ", ";\n  background-color: ", ";\n  border: ", ";\n\n  &:hover {\n    cursor: ", ";\n    background-color: ", ";\n  }\n\n  &:active {\n    cursor: ", ";\n    background-color: ", ";\n  }\n"])), function (props) {
+    if (props.CustomInputHeight) {
+        return "55px";
+    }
+    if (props.type === ButtonTypes.Next) {
+        return "48px";
+    }
+    if (props.type === ButtonTypes.CustomInputHeight) {
+        return "55px";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "40px";
+    }
+    if (props.type === ButtonTypes.Normal) {
+        return "50px";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        if (props.state === ButtonStates.Warning) {
+            return "30px";
+        }
+        return "30px";
+    }
+    return null;
+}, function (props) {
+    if (props.type === ButtonTypes.Next) {
+        return "100%";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "fit-content";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        return "fit-content";
+    }
+    if (props.type === ButtonTypes.Normal) {
+        return "50px";
+    }
+    return null;
+}, function (props) {
+    return props.marginBottam ? "".concat(props.marginBottam, " !important") : "0px !important";
+}, function (props) { return props.contentAlign || "center"; }, function (props) { return (Boolean(props.margin) ? props.margin : "0px"); }, function (props) {
+    if (props.type === ButtonTypes.Next && props.paddingAround) {
+        return props.paddingAround;
+    }
+    if (props.type === ButtonTypes.Next) {
+        return "0px";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "0 25px";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        return "0 15px";
+    }
+    if (props.type === ButtonTypes.Normal) {
+        return "0 25px";
+    }
+    return null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled && props.disabledbuttonTheme) {
+        return Colors.InteractiveBGSecondary;
+    }
+    if (props.state === ButtonStates.Disabled) {
+        return Colors.Grey6;
+    }
+    if (props.state === ButtonStates.Warning) {
+        return Colors.White;
+    }
+    return props.bgColor || Colors.Orange;
+}, function (props) {
+    if (props.state === ButtonStates.Warning) {
+        return "1px solid ".concat(Colors.Grey5);
+    }
+    return null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return null;
+    }
+    return props.onClick ? "pointer" : null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled && props.disabledbuttonTheme) {
+        return Colors.Grey1;
+    }
+    if (props.state === ButtonStates.Disabled) {
+        return Colors.Grey6;
+    }
+    if (props.state === ButtonStates.Warning) {
+        return Colors.White;
+    }
+    return Polished.lighten(0.025, props.bgColor || Colors.Orange);
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return null;
+    }
+    return props.onClick ? "pointer" : null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled) {
+        return Colors.Grey6;
+    }
+    if (props.state === ButtonStates.Warning) {
+        return Colors.White;
+    }
+    return Polished.darken(0.025, props.bgColor || Colors.Orange);
+});
+var Text = styled.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  position: relative;\n  line-height:", ";\n  font-family: ", ";\n  letter-spacing: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  margin: ", ";\n  color: ", ";\n  top: ", ";\n  white-space: ", ";\n"], ["\n  position: relative;\n  line-height:", ";\n  font-family: ", ";\n  letter-spacing: ", ";\n  font-size: ", ";\n  font-weight: ", ";\n  text-transform: ", ";\n  margin: ", ";\n  color: ", ";\n  top: ", ";\n  white-space: ", ";\n"])), function (props) { return props.lineHeight; }, function (props) { return props.fontFamily; }, function (props) { return props.letterSpacing; }, function (props) {
+    if (props.type === ButtonTypes.Next && props.fontSize) {
+        return props.fontSize;
+    }
+    if (props.type === ButtonTypes.Regular && props.fontSize) {
+        return props.fontSize;
+    }
+    if (props.type === ButtonTypes.Next) {
+        return "1.4rem";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "1.4rem";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "1.2rem";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        return "1.2rem";
+    }
+    if (props.type === ButtonTypes.Normal) {
+        return "2.5rem";
+    }
+    return null;
+}, function (props) {
+    if (props.type === ButtonTypes.Next && props.fontWeight) {
+        return props.fontWeight;
+    }
+    if (props.type === ButtonTypes.Regular && props.fontWeight) {
+        return props.fontWeight;
+    }
+    if (props.type === ButtonTypes.Next) {
+        return "600";
+        // return "700";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        return "600";
+        // return "700";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        return "600";
+    }
+    if (props.type === ButtonTypes.Normal) {
+        return "500";
+    }
+    return null;
+}, function (props) { return props.textTransform || "uppercase"; }, function (props) {
+    if (props.type === ButtonTypes.Next && props.marginOnButtonText) {
+        return "0 10px 0 0";
+    }
+    if (props.type === ButtonTypes.Next) {
+        return "0 10px";
+    }
+    if (props.type === ButtonTypes.Regular) {
+        if (props.iconPosition === ButtonIconPosition.Left) {
+            return "0 0 0 10px";
+        }
+        if (props.iconPosition === ButtonIconPosition.Right) {
+            return "0 10px 0 0";
+        }
+        return "0";
+    }
+    if (props.type === ButtonTypes.Normal) {
+        if (props.iconPosition === ButtonIconPosition.Left) {
+            return "0 0 0 10px";
+        }
+        if (props.iconPosition === ButtonIconPosition.Right) {
+            return "0 10px 0 0";
+        }
+        return "0";
+    }
+    if (props.type === ButtonTypes.Thin) {
+        if (props.iconPosition === ButtonIconPosition.Left) {
+            return "0 0 0 7px";
+        }
+        if (props.iconPosition === ButtonIconPosition.Right) {
+            return "0 7px 0 0";
+        }
+        return "0";
+    }
+    return null;
+}, function (props) {
+    if (props.state === ButtonStates.Disabled && props.disabledbuttonTheme) {
+        return Colors.Grey3;
+    }
+    if (props.state)
+        if (props.state === ButtonStates.Disabled) {
+            return Colors.Grey5;
+        }
+    if (props.state === ButtonStates.Warning) {
+        return Colors.Grey3;
+    }
+    return props.textColor || Colors.White;
+}, function (props) {
+    if (props.type === ButtonTypes.Thin) {
+        if (props.icon) {
+            return "-1px";
+        }
+        return "0";
+    }
+    return null;
+}, function (props) { return props.innerTextWhiteSpace; });
+function Button(_a) {
+    var _b = _a.type, type = _b === void 0 ? ButtonTypes.Next : _b, _c = _a.state, state = _c === void 0 ? ButtonStates.Active : _c, bgColor = _a.bgColor, textColor = _a.textColor, text = _a.text, _d = _a.onClick, onClick = _d === void 0 ? function () { } : _d, icon = _a.icon, iconPosition = _a.iconPosition, _e = _a.iconSize, iconSize = _e === void 0 ? 14 : _e, 
+    // label,
+    // tip,
+    // subLabel,
+    margin = _a.margin, marginBottam = _a.marginBottam, _f = _a.loading, loading = _f === void 0 ? false : _f, paddingAround = _a.paddingAround, contentAlign = _a.contentAlign, textTransform = _a.textTransform, fontSize = _a.fontSize, fontWeight = _a.fontWeight, fontFamily = _a.fontFamily, letterSpacing = _a.letterSpacing, disabledbuttonTheme = _a.disabledbuttonTheme, CustomInputHeight = _a.CustomInputHeight, lineHeight = _a.lineHeight, svgIconName = _a.svgIconName, svgHeight = _a.svgHeight, svgWidth = _a.svgWidth, marginOnButtonText = _a.marginOnButtonText, innerTextWhiteSpace = _a.innerTextWhiteSpace;
+    var iconColor = state === ButtonStates.Disabled ? Colors.Grey3 : Colors.White;
+    if (icon && !iconPosition)
+        iconPosition = ButtonIconPosition.Left;
+    var iconEl = (React.createElement(Icon, { icon: icon, color: iconColor, size: iconSize, top: iconSize < 14 ? "-1px" : undefined }));
+    var click = loading || state === ButtonStates.Disabled ? null : function () { return onClick(); };
+    return (React.createElement(React.Fragment, null,
+        React.createElement(StyledButton, { type: type, state: state, onClick: click, margin: margin, bgColor: bgColor, marginBottam: marginBottam, paddingAround: paddingAround, contentAlign: contentAlign, disabledbuttonTheme: disabledbuttonTheme, CustomInputHeight: CustomInputHeight }, (function () {
+            return (React.createElement(Fragment, null, (function () {
+                if (loading) {
+                    return (React.createElement(Fragment, null,
+                        React.createElement(Loader, { size: LoaderSizes.VerySmall, color: iconColor })));
+                }
+                return (React.createElement(Fragment, null,
+                    icon && iconPosition === ButtonIconPosition.Left && iconEl,
+                    text && (React.createElement(Text, { type: type, state: state, icon: Boolean(icon), iconPosition: iconPosition, textColor: textColor, textTransform: textTransform, fontSize: fontSize, fontWeight: fontWeight, fontFamily: fontFamily, letterSpacing: letterSpacing, disabledbuttonTheme: disabledbuttonTheme, lineHeight: lineHeight, marginOnButtonText: marginOnButtonText, innerTextWhiteSpace: innerTextWhiteSpace }, text)),
+                    icon &&
+                        iconPosition === ButtonIconPosition.Right &&
+                        iconEl,
+                    svgIconName &&
+                        React.createElement(SvgRenderer, { iconName: svgIconName, width: svgWidth, height: svgHeight, style: { margin: '2px 0px' } })));
+            })()));
+        })())));
+}
+var templateObject_1, templateObject_2;
+
+export { ButtonIconPosition, ButtonStates, ButtonTypes, Button as default };
+//# sourceMappingURL=Button.js.map

package/build/src/components/Button.js.map

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

package/build/src/components/CodeInput.js

@@ -0,0 +1,98 @@
+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 ? "".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 };
+//# sourceMappingURL=CodeInput.js.map

package/build/src/components/CodeInput.js.map

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

package/build/src/components/Counter.js

@@ -0,0 +1,27 @@
+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 }))));
+}
+var templateObject_1, templateObject_2;
+
+export { Counter as default };
+//# sourceMappingURL=Counter.js.map

package/build/src/components/Counter.js.map

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

package/build/src/components/Dropdown.js

@@ -0,0 +1,53 @@
+import { __makeTemplateObject } from '../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import styled from 'styled-components';
+import { Colors } from '../Colors.js';
+import Icon, { Icons } from './Icon.js';
+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" : "".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 };
+//# sourceMappingURL=Dropdown.js.map

package/build/src/components/Dropdown.js.map

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

package/build/src/components/Flex.js

@@ -0,0 +1,13 @@
+import { __makeTemplateObject } from '../../node_modules/tslib/tslib.es6.js';
+import React from 'react';
+import styled from 'styled-components';
+
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  padding: ", ";\n  margin: ", ";\n  flex: ", ";\n  height: ", ";\n  color: ", ";\n  gap: ", ";\n"], ["\n  display: flex;\n  flex-direction: ", ";\n  justify-content: ", ";\n  align-items: ", ";\n  padding: ", ";\n  margin: ", ";\n  flex: ", ";\n  height: ", ";\n  color: ", ";\n  gap: ", ";\n"])), function (props) { return props.direction; }, function (props) { return props.justify; }, function (props) { return props.align; }, function (props) { return props.padding; }, function (props) { return props.margin; }, function (props) { return props.flex; }, function (props) { return props.height; }, function (props) { return props.color; }, function (props) { return props.gap; });
+var Flex = function (_a) {
+    var children = _a.children, _b = _a.direction, direction = _b === void 0 ? 'row' : _b, _c = _a.justify, justify = _c === void 0 ? '' : _c, _d = _a.align, align = _d === void 0 ? '' : _d, _e = _a.padding, padding = _e === void 0 ? '' : _e, _f = _a.margin, margin = _f === void 0 ? '' : _f, _g = _a.flex, flex = _g === void 0 ? '' : _g, _h = _a.height, height = _h === void 0 ? '' : _h, _j = _a.color, color = _j === void 0 ? '' : _j, _k = _a.gap, gap = _k === void 0 ? '' : _k;
+    return (React.createElement(Container, { direction: direction, justify: justify, align: align, padding: padding, margin: margin, flex: flex, height: height, color: color, gap: gap }, children));
+};
+var templateObject_1;
+
+export { Flex as default };
+//# sourceMappingURL=Flex.js.map

package/build/src/components/Flex.js.map

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

package/build/src/components/FormattedInput.js

@@ -0,0 +1,81 @@
+import { __makeTemplateObject } from '../../node_modules/tslib/tslib.es6.js';
+import React, { useState } from 'react';
+import styled from 'styled-components';
+import * as Polished from 'polished';
+import { Colors } from '../Colors.js';
+import Icon, { Icons } from './Icon.js';
+import Label from './Label.js';
+import Flex from './Flex.js';
+import MaxLength from './MaxLength.js';
+import ValidationError from './ValidationError.js';
+import { media } from '../utils/MediaQuery.js';
+
+var InputFormats;
+(function (InputFormats) {
+    InputFormats["Price"] = "Price";
+    InputFormats["Percent"] = "Percent";
+})(InputFormats || (InputFormats = {}));
+var Container = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n"], ["\n  width: ", ";\n"])), function (props) { return props.width; });
+var Form = styled.form(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  margin: ", ";\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: relative;\n  border-radius: 10px;\n  transition: all 0.2s;\n  border: 1px solid\n    ", ";\n  overflow: hidden;\n"], ["\n  margin: ", ";\n  width: ", ";\n  display: flex;\n  flex-direction: row;\n  justify-content: space-between;\n  position: relative;\n  border-radius: 10px;\n  transition: all 0.2s;\n  border: 1px solid\n    ", ";\n  overflow: hidden;\n"])), function (props) { return props.margin; }, function (props) { return props.width; }, function (props) {
+    if (props.focused)
+        return Colors.Grey4;
+    if (props.hovered)
+        return Polished.darken(0.05, Colors.Grey5);
+    return Colors.Grey5;
+});
+var PriceContainer = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 25px;\n  background-color: ", ";\n"], ["\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 25px;\n  background-color: ", ";\n"])), Colors.Grey5);
+var InputStyled = styled.input(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  height: 38px;\n  width: ", ";\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  text-indent: 1px;\n  transition: all 0.2s;\n  padding: ", ";\n  text-align: right;\n\n  ", ";\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n"], ["\n  background-color: ", ";\n  color: ", ";\n  outline: none;\n  border: 0px;\n  height: 38px;\n  width: ", ";\n  font-family: \"neue-haas-grotesk-display\", sans-serif;\n  font-weight: 500;\n  text-indent: 1px;\n  transition: all 0.2s;\n  padding: ", ";\n  text-align: right;\n\n  ", ";\n\n  ", ";\n\n  ::placeholder {\n    color: ", ";\n  }\n"])), function (props) {
+    return props.disabled ? "".concat(Colors.Grey6, " !important") : null;
+}, function (props) { return (props.disabled ? Colors.Grey4 : Colors.Grey1); }, function (props) { return props.inputWidth ? "90px" : "60px"; }, function (props) { return props.inputInnerPadding ? props.inputInnerPadding : "0 16px"; }, media.mobile(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-size: 1.6rem;\n  "], ["\n    font-size: 1.6rem;\n  "]))), media.desktop(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-size: 1.4rem;\n  "], ["\n    font-size: 1.4rem;\n  "]))), Colors.Grey4);
+var IconText = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  font-size: 1.4rem;\n  font-weight: 600;\n  color: ", ";\n"], ["\n  font-size: 1.4rem;\n  font-weight: 600;\n  color: ", ";\n"])), Colors.Grey3);
+function Input(_a) {
+    var inputRef = _a.inputRef, autoFocus = _a.autoFocus, placeholder = _a.placeholder, value = _a.value, defaultValue = _a.defaultValue, _b = _a.format, format = _b === void 0 ? InputFormats.Price : _b, _c = _a.type, type = _c === void 0 ? "text" : _c, onMouseEnter = _a.onMouseEnter, onMouseLeave = _a.onMouseLeave, onChange = _a.onChange, onFocus = _a.onFocus, onBlur = _a.onBlur, onSubmit = _a.onSubmit, _d = _a.canSubmit, canSubmit = _d === void 0 ? true : _d, loading = _a.loading, margin = _a.margin, width = _a.width, inputWidth = _a.inputWidth, onEnter = _a.onEnter, label = _a.label, subLabel = _a.subLabel, tip = _a.tip, maxLength = _a.maxLength, validationError = _a.validationError, _e = _a.disabled, disabled = _e === void 0 ? false : _e, inputInnerPadding = _a.inputInnerPadding;
+    var _f = useState(false), hovered = _f[0], setHovered = _f[1];
+    var _g = useState(false), focused = _g[0], setFocused = _g[1];
+    var submit = function (event) {
+        event.preventDefault();
+        if (onSubmit && canSubmit && !loading) {
+            onSubmit();
+        }
+        else if (onEnter && !loading) {
+            onEnter();
+        }
+    };
+    return (React.createElement(Container, { width: width },
+        React.createElement(Flex, { justify: "space-between" },
+            label && React.createElement(Label, { text: label, subText: subLabel, tip: tip }),
+            maxLength && React.createElement(MaxLength, { value: value, maxLength: maxLength })),
+        React.createElement(Form, { hovered: hovered, focused: focused, onSubmit: function (event) { return submit(event); }, width: width, margin: margin, noValidate // disables default html5 validation
+            : true, disabled: disabled },
+            format === InputFormats.Price && (React.createElement(PriceContainer, null,
+                React.createElement(Icon, { icon: Icons.Dollar, size: 14, color: Colors.Grey3 }))),
+            React.createElement(InputStyled, { ref: inputRef, disabled: disabled, autoFocus: autoFocus, placeholder: placeholder, value: value, defaultValue: defaultValue, type: type, inputWidth: inputWidth, inputInnerPadding: inputInnerPadding, onChange: function (e) {
+                    if (maxLength && e.currentTarget.value.length > maxLength) ;
+                    else {
+                        onChange(e);
+                    }
+                }, onFocus: function (event) {
+                    setFocused(true);
+                    if (onFocus)
+                        onFocus(event);
+                }, onBlur: function (event) {
+                    setFocused(false);
+                    if (onFocus)
+                        onBlur(event);
+                }, onMouseEnter: function (event) {
+                    setHovered(true);
+                    if (onMouseEnter)
+                        onMouseEnter(event);
+                }, onMouseLeave: function (event) {
+                    setHovered(false);
+                    if (onMouseLeave)
+                        onMouseLeave(event);
+                } }),
+            format === InputFormats.Percent && (React.createElement(PriceContainer, null,
+                React.createElement(IconText, null, "%")))),
+        validationError && (React.createElement(ValidationError, { validationError: validationError }))));
+}
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
+
+export { InputFormats, Input as default };
+//# sourceMappingURL=FormattedInput.js.map