flipper-ui 0.31.0 → 0.31.3

package/core/inputs/chip-field/styles.js

@@ -0,0 +1,12 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledChipInput = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _materialUiChipInput = _interopRequireDefault(require("material-ui-chip-input"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var StyledChipInput = exports.StyledChipInput = (0, _styledComponents["default"])(_materialUiChipInput["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    & > div > div {\n        padding: 0px !important;\n    }\n    & > div > div > div {\n        margin: 2px;\n    }\n    & > label {\n        top: -6px !important;\n        font-size: 14px !important;\n    }\n    & > label.MuiInputLabel-shrink {\n        top: 0px !important;\n    }\n    & > div > div > input {\n        padding: 10px !important;\n        font-size: 14px !important;\n    }\n"])));

package/core/inputs/date-time/index.js

@@ -11,7 +11,7 @@ var _react = _interopRequireDefault(require("react"));
 var _dateFns = _interopRequireDefault(require("@date-io/date-fns"));
 var _pickers = require("@material-ui/pickers");
 var _textField = require("../text-field");
-var _excluded = ["padding", "margin", "style", "format", "variant", "inputVariant", "ampm", "invalidDateMessage", "minDateMessage", "maxDateMessage", "locale", "type"]; // eslint-disable-next-line @stylistic/max-len
+var _excluded = ["padding", "margin", "style", "format", "variant", "inputVariant", "ampm", "invalidDateMessage", "minDateMessage", "maxDateMessage", "locale", "type"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var DEFAULT_FORMATS = {

package/core/inputs/icon-button/index.d.ts

@@ -8,5 +8,5 @@ export interface IconButtonProps extends DefaultProps {
     role?: string;
     onClick?(event: MouseEvent<HTMLButtonElement>): void;
 }
-export declare const IconButton: ({ children, padding, margin, style, ...otherProps }: IconButtonProps) => React.JSX.Element;
+declare const IconButton: ({ children, padding, margin, style, ...otherProps }: IconButtonProps) => React.JSX.Element;
 export default IconButton;

package/core/inputs/icon-button/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.IconButton = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -13,7 +13,7 @@ var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton")
 var _excluded = ["children", "padding", "margin", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var IconButton = exports.IconButton = function IconButton(_ref) {
+var IconButton = function IconButton(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,

package/core/inputs/input-adornment/index.d.ts

@@ -4,5 +4,5 @@ import type { InputAdornmentProps as MuiInputProps } from '@material-ui/core';
 export interface InputAdornmentProps extends DefaultProps, MuiInputProps {
     position: 'start' | 'end';
 }
-export declare const InputAdornment: ({ children, ...otherProps }: InputAdornmentProps) => React.JSX.Element;
+declare const InputAdornment: ({ children, ...otherProps }: InputAdornmentProps) => React.JSX.Element;
 export default InputAdornment;

package/core/inputs/input-adornment/index.js

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.InputAdornment = void 0;
+exports["default"] = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
 var _excluded = ["children"];
-var InputAdornment = exports.InputAdornment = function InputAdornment(_ref) {
+var InputAdornment = function InputAdornment(_ref) {
   var children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   return /*#__PURE__*/_react["default"].createElement(_InputAdornment["default"], otherProps, children);

package/core/inputs/input-base/index.d.ts

@@ -24,5 +24,5 @@ export interface InputAdornmentProps extends DefaultProps, Omit<MuiInputBaseProp
     type?: string;
     value?: string | number | boolean;
 }
-export declare const InputBase: ({ margin, padding, style, autoComplete, ...otherProps }: InputAdornmentProps) => React.JSX.Element;
+declare const InputBase: ({ margin, padding, style, autoComplete, ...otherProps }: InputAdornmentProps) => React.JSX.Element;
 export default InputBase;

package/core/inputs/input-base/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.InputBase = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -13,7 +13,7 @@ var _InputBase = _interopRequireDefault(require("@material-ui/core/InputBase"));
 var _excluded = ["margin", "padding", "style", "autoComplete"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var InputBase = exports.InputBase = function InputBase(_ref) {
+var InputBase = function InputBase(_ref) {
   var margin = _ref.margin,
     padding = _ref.padding,
     _ref$style = _ref.style,

package/core/inputs/mask-field/index.d.ts

@@ -12,5 +12,5 @@ export interface MaskFieldProps extends NumberFormatProps {
     fixedDecimalScale?: boolean;
     customInput?: ComponentType<TextFieldProps>;
 }
-export declare const MaskField: (props: MaskFieldProps) => React.JSX.Element;
+declare const MaskField: (props: MaskFieldProps) => React.JSX.Element;
 export default MaskField;

package/core/inputs/mask-field/index.js

@@ -4,14 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.MaskField = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _reactNumberFormat = _interopRequireDefault(require("react-number-format"));
 var _textField = require("../text-field");
 var _excluded = ["customInput"];
-var MaskField = exports.MaskField = function MaskField(props) {
+var MaskField = function MaskField(props) {
   var customInput = props.customInput,
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   return (

package/core/inputs/pin-input/index.js

@@ -8,12 +8,10 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.PinInput = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles = require("./styles");
 var _excluded = ["pinLength", "pin", "setPin", "onPinChanged", "validationResult", "isValidating", "size", "style", "inputProps", "variant"];
-var _templateObject;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -21,7 +19,6 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
-var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n"])));
 var PIN_MIN_VALUE = 0;
 var PIN_MAX_VALUE = 9;
 var BACKSPACE_KEY = 'Backspace';
@@ -40,6 +37,9 @@ var PinInput = exports.PinInput = function PinInput(_ref) {
   var inputRefs = (0, _react.useRef)([]);
   var changePinFocus = function changePinFocus(pinIndex) {
     var ref = inputRefs.current[pinIndex];
+
+    // it needs this if, otherwise doesn't work
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     if (ref) {
       ref.focus();
     }
@@ -56,7 +56,7 @@ var PinInput = exports.PinInput = function PinInput(_ref) {
     try {
       for (_iterator.s(); !(_step = _iterator.n()).done;) {
         var value = _step.value;
-        intValues.push(parseInt(value));
+        intValues.push(parseInt(value, 10));
       }
     } catch (err) {
       _iterator.e(err);
@@ -115,7 +115,7 @@ var PinInput = exports.PinInput = function PinInput(_ref) {
     }, inputProps);
     return style;
   };
-  return /*#__PURE__*/_react["default"].createElement(Container, otherProps, Array.from({
+  return /*#__PURE__*/_react["default"].createElement(_styles.Container, otherProps, Array.from({
     length: pinLength
   }, function (_, index) {
     return /*#__PURE__*/_react["default"].createElement(_TextField["default"], {

package/core/inputs/pin-input/styles.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const ValidateContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const ButtonContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/core/inputs/pin-input/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidateContainer = exports.Container = exports.ButtonContainer = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3;
+var Container = exports.Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n"])));
+var ValidateContainer = exports.ValidateContainer = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-bottom: 2rem;\n"])));
+var ButtonContainer = exports.ButtonContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    width: auto;\n    justify-content: center;\n    margin-top: 3rem;\n"])));

package/core/inputs/radio/index.d.ts

@@ -9,5 +9,5 @@ export interface RadioProps extends DefaultProps, MuiRadioProps {
     disabled?: boolean;
     onChange?: (event: ChangeEvent<HTMLElement>) => void;
 }
-export declare const Radio: ({ padding, margin, style, ...otherProps }: RadioProps) => React.JSX.Element;
+declare const Radio: ({ padding, margin, style, ...otherProps }: RadioProps) => React.JSX.Element;
 export default Radio;

package/core/inputs/radio/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Radio = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -13,7 +13,7 @@ var _Radio = _interopRequireDefault(require("@material-ui/core/Radio"));
 var _excluded = ["padding", "margin", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Radio = exports.Radio = function Radio(_ref) {
+var Radio = function Radio(_ref) {
   var padding = _ref.padding,
     margin = _ref.margin,
     style = _ref.style,

package/core/inputs/radio-group/index.d.ts

@@ -16,5 +16,5 @@ export interface IOption {
     label?: ReactNode;
     disabled?: boolean;
 }
-export declare const RadioGroup: ({ row, options, className, padding, margin, style, title, value, spacing, name, onChange, ...otherProps }: RadioGroupProps) => React.JSX.Element;
+declare const RadioGroup: ({ row, options, className, padding, margin, style, title, value, spacing, name, onChange, ...otherProps }: RadioGroupProps) => React.JSX.Element;
 export default RadioGroup;

package/core/inputs/radio-group/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.RadioGroup = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -17,7 +17,7 @@ var _RadioGroup = _interopRequireDefault(require("@material-ui/core/RadioGroup")
 var _excluded = ["row", "options", "className", "padding", "margin", "style", "title", "value", "spacing", "name", "onChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var RadioGroup = exports.RadioGroup = function RadioGroup(_ref) {
+var RadioGroup = function RadioGroup(_ref) {
   var row = _ref.row,
     _ref$options = _ref.options,
     options = _ref$options === void 0 ? [] : _ref$options,

package/core/inputs/select/index.d.ts

@@ -13,5 +13,5 @@ export interface SelectProps extends DefaultProps, Omit<MuiSelectProps, 'margin'
     onClose?: () => void;
     onChange: (event: ChangeEvent<HTMLSelectElement | HTMLInputElement>) => void;
 }
-export declare const Select: ({ children, style, margin, padding, hasClear, onClear, onChange, variant, ...otherProps }: SelectProps) => React.JSX.Element;
+declare const Select: ({ children, style, margin, padding, hasClear, onClear, onChange, variant, ...otherProps }: SelectProps) => React.JSX.Element;
 export default Select;

package/core/inputs/select/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Select = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -33,7 +33,7 @@ var renderEndAdornment = function renderEndAdornment(onClear) {
     }
   })));
 };
-var Select = exports.Select = function Select(_ref) {
+var Select = function Select(_ref) {
   var children = _ref.children,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,

package/core/inputs/slider/index.d.ts

@@ -5,5 +5,5 @@ export interface ISliderProps {
     defaultValue?: number | number[];
 }
 export type FlipperSliderProps = Omit<SliderProps, 'defaultValue'> & DefaultProps & ISliderProps;
-export declare const Slider: ({ padding, margin, style, defaultValue, ...otherProps }: FlipperSliderProps) => React.JSX.Element;
+declare const Slider: ({ padding, margin, style, defaultValue, ...otherProps }: FlipperSliderProps) => React.JSX.Element;
 export default Slider;

package/core/inputs/slider/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Slider = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -13,7 +13,7 @@ var _Slider = _interopRequireDefault(require("@material-ui/core/Slider"));
 var _excluded = ["padding", "margin", "style", "defaultValue"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Slider = exports.Slider = function Slider(_ref) {
+var Slider = function Slider(_ref) {
   var padding = _ref.padding,
     margin = _ref.margin,
     _ref$style = _ref.style,

package/core/inputs/text-field/index.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ChangeEvent, ClipboardEvent, KeyboardEvent, FocusEvent, ReactNode, MouseEvent, Ref, HTMLAttributes } from 'react';
 import type { DefaultProps } from '../../types';
-import type { TextFieldProps as MuiTextFieldProps } from '@material-ui/core';
+import type { InputBaseComponentProps, TextFieldProps as MuiTextFieldProps } from '@material-ui/core';
 export interface IOption {
     label: string;
     name?: string;
@@ -27,7 +27,7 @@ export interface TextFieldProps extends DefaultProps, Omit<MuiTextFieldProps, 'm
     value?: string | number;
     variant?: 'standard' | 'outlined' | 'filled';
     inputRef?: Ref<HTMLInputElement>;
-    inputProps?: object;
+    inputProps?: InputBaseComponentProps;
     InputProps?: object;
     InputLabelProps?: object;
     SelectProps?: object;
@@ -37,6 +37,7 @@ export interface TextFieldProps extends DefaultProps, Omit<MuiTextFieldProps, 'm
     helperIcon?: ReactNode;
     showEdit?: boolean;
     hasClear?: boolean;
+    characters?: boolean;
     onClear?: () => void;
     onHelperClick?: () => void;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
@@ -55,13 +56,11 @@ interface IEditProps extends Pick<TextFieldProps, 'showEdit' | 'style'> {
     editButtonProps?: Partial<Omit<HTMLAttributes<HTMLButtonElement>, 'color'>>;
     saveButtonProps?: Partial<Omit<HTMLAttributes<HTMLButtonElement>, 'color'>>;
 }
-export declare const TextFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
-export declare const StaticTextFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const useStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"input" | "iconOutlined" | "listOptions" | "outlinedInput" | "outlinedLabel" | "outlinedMultiline">;
 export declare const coerceComboOptions: (input: string) => IOption[];
 export declare const toLispCase: (name: string) => string;
 export declare const HelperBox: (props: IHelperProps) => React.JSX.Element;
 export declare const renderOptions: (options: TextFieldProps['options'], classes: Record<string, string>) => "" | React.JSX.Element[] | undefined;
 export declare const EditBox: (props: IEditProps) => React.JSX.Element;
-export declare const TextField: ({ options, margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, children, ...otherProps }: TextFieldProps) => React.JSX.Element;
+export declare const TextField: ({ options, margin, padding, style, error, variant, InputLabelProps, InputProps, SelectProps, autoComplete, onHelperClick, helperIcon, fullWidth, hasClear, onClear, characters, children, ...otherProps }: TextFieldProps) => React.JSX.Element;
 export default TextField;

package/core/inputs/text-field/index.js

@@ -4,11 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useStyles = exports.toLispCase = exports.renderOptions = exports["default"] = exports.coerceComboOptions = exports.TextFieldWrapper = exports.TextField = exports.StaticTextFieldWrapper = exports.HelperBox = exports.EditBox = void 0;
+exports.useStyles = exports.toLispCase = exports.renderOptions = exports["default"] = exports.coerceComboOptions = exports.TextField = exports.HelperBox = exports.EditBox = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _InputAdornment = _interopRequireDefault(require("@material-ui/core/InputAdornment"));
 var _TextField = _interopRequireDefault(require("@material-ui/core/TextField"));
@@ -23,19 +22,15 @@ var _map = _interopRequireDefault(require("ramda/es/map"));
 var _zipObj = _interopRequireDefault(require("ramda/es/zipObj"));
 var _reject = _interopRequireDefault(require("ramda/es/reject"));
 var _propEq = _interopRequireDefault(require("ramda/es/propEq"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _iconButton = _interopRequireDefault(require("../icon-button"));
+var _styles2 = require("./styles");
 var _icons = require("../../../icons");
-var _iconButton = require("../icon-button");
 var _theme = require("../../../theme");
-var _excluded = ["options", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "children"];
-var _templateObject, _templateObject2, _templateObject3;
+var _excluded = ["options", "margin", "padding", "style", "error", "variant", "InputLabelProps", "InputProps", "SelectProps", "autoComplete", "onHelperClick", "helperIcon", "fullWidth", "hasClear", "onClear", "characters", "children"];
 /* eslint-disable @typescript-eslint/ban-ts-comment */
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var primary = _theme.theme.colors.primary;
-var Helper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n"])));
-var TextFieldWrapper = exports.TextFieldWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
-var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n"])));
 var useStyles = exports.useStyles = (0, _styles.makeStyles)({
   listOptions: {
     outline: 'none',
@@ -73,9 +68,9 @@ var toLispCase = exports.toLispCase = function toLispCase(name) {
   }).toLowerCase();
 };
 var HelperBox = exports.HelperBox = function HelperBox(props) {
-  return /*#__PURE__*/_react["default"].createElement(Helper, {
+  return /*#__PURE__*/_react["default"].createElement(_styles2.Helper, {
     role: "helper-box"
-  }, /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, {
+  }, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
     padding: "6px 2px",
     onClick: props.onHelperClick
   }, props.helperIcon || /*#__PURE__*/_react["default"].createElement(_icons.Help, {
@@ -103,12 +98,12 @@ var renderOptions = exports.renderOptions = function renderOptions(options, clas
 var EditBox = exports.EditBox = function EditBox(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     role: "edit-box"
-  }, props.editing ? /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, (0, _extends2["default"])({}, props.saveButtonProps, {
+  }, props.editing ? /*#__PURE__*/_react["default"].createElement(_iconButton["default"], (0, _extends2["default"])({}, props.saveButtonProps, {
     padding: "6px 2px",
     onClick: props.onSaveClick
   }), /*#__PURE__*/_react["default"].createElement(_icons.Save, {
     fontSize: "small"
-  })) : /*#__PURE__*/_react["default"].createElement(_iconButton.IconButton, (0, _extends2["default"])({}, props.editButtonProps, {
+  })) : /*#__PURE__*/_react["default"].createElement(_iconButton["default"], (0, _extends2["default"])({}, props.editButtonProps, {
     padding: "6px 2px",
     onClick: props.onEditClick
   }), /*#__PURE__*/_react["default"].createElement(_icons.Edit, {
@@ -129,6 +124,7 @@ var renderEndAdornment = function renderEndAdornment(onClear) {
   })));
 };
 var TextField = exports.TextField = function TextField(_ref) {
+  var _otherProps$value, _otherProps$inputProp;
   var options = _ref.options,
     margin = _ref.margin,
     padding = _ref.padding,
@@ -150,6 +146,7 @@ var TextField = exports.TextField = function TextField(_ref) {
     fullWidth = _ref.fullWidth,
     hasClear = _ref.hasClear,
     onClear = _ref.onClear,
+    characters = _ref.characters,
     children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var clearStyle = (0, _styles.makeStyles)({
@@ -170,8 +167,9 @@ var TextField = exports.TextField = function TextField(_ref) {
       onHelperClick();
     }
   };
-  var Wrapper = hasClear ? StaticTextFieldWrapper : TextFieldWrapper;
+  var Wrapper = hasClear ? _styles2.StaticTextFieldWrapper : _styles2.TextFieldWrapper;
   return /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(_TextField["default"], (0, _extends2["default"])({
+    title: "",
     select: !!(options !== null && options !== void 0 && options.length),
     fullWidth: fullWidth,
     autoComplete: autoComplete,
@@ -187,7 +185,6 @@ var TextField = exports.TextField = function TextField(_ref) {
       }
     }, InputLabelProps),
     InputProps: _objectSpread({
-      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
       'data-testid': 'text-field',
       classes: {
@@ -199,8 +196,9 @@ var TextField = exports.TextField = function TextField(_ref) {
       classes: {
         iconOutlined: hasClear ? clearClass.iconOutlined : classes.iconOutlined
       }
-    }, endAdornment), SelectProps)
-  }, otherProps), options ? renderOptions(options, classes) : children), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
+    }, endAdornment), SelectProps),
+    characters: characters === null || characters === void 0 ? void 0 : characters.toString()
+  }, otherProps), options ? renderOptions(options, classes) : children), characters && /*#__PURE__*/_react["default"].createElement(_styles2.CharactersCount, null, (_otherProps$value = otherProps.value) === null || _otherProps$value === void 0 ? void 0 : _otherProps$value.toString().length, "/", (_otherProps$inputProp = otherProps.inputProps) === null || _otherProps$inputProp === void 0 ? void 0 : _otherProps$inputProp.maxLength), onHelperClick && /*#__PURE__*/_react["default"].createElement(HelperBox, {
     helperIcon: helperIcon,
     onHelperClick: handleClick
   }));

package/core/inputs/text-field/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Helper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const TextFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const StaticTextFieldWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const CharactersCount: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>;

package/core/inputs/text-field/styles.js

@@ -0,0 +1,17 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Wrapper = exports.TextFieldWrapper = exports.StaticTextFieldWrapper = exports.Helper = exports.CharactersCount = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _theme = require("../../../theme");
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var grays = _theme.theme.colors.grays;
+var Wrapper = exports.Wrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var Helper = exports.Helper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 42px;\n    height: 38px;\n"])));
+var TextFieldWrapper = exports.TextFieldWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n    button {\n        display: none;\n    }\n    :hover button {\n        display: flex;\n    }\n"])));
+var StaticTextFieldWrapper = exports.StaticTextFieldWrapper = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: rows;\n    width: 100%;\n    align-items: center;\n"])));
+var CharactersCount = exports.CharactersCount = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    margin-left: -35px;\n    color: ", ";\n    font-size: 14px;\n    font-family:\n        Roboto,\n        Helvetica,\n        Arial,\n        sans- serif;\n"])), grays.g3);

package/core/inputs/text-field/text-field.stories.d.ts

@@ -7,3 +7,4 @@ export declare const withHelperButton: any;
 export declare const withSelect: () => React.JSX.Element;
 export declare const useWithSelectAndClear: () => React.JSX.Element;
 export declare const combobox: () => React.JSX.Element;
+export declare const withCharacterCount: () => React.JSX.Element;

package/core/navigation/breadcrumb/index.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import type { BreadcrumbsProps } from '@material-ui/core/Breadcrumbs';
-export declare const Breadcrumbs: (props: BreadcrumbsProps) => React.JSX.Element;
+declare const Breadcrumbs: (props: BreadcrumbsProps) => React.JSX.Element;
 export default Breadcrumbs;

package/core/navigation/breadcrumb/index.js

@@ -5,12 +5,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Breadcrumbs = void 0;
+exports["default"] = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _Breadcrumbs = _interopRequireDefault(require("@material-ui/core/Breadcrumbs"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-var Breadcrumbs = exports.Breadcrumbs = function Breadcrumbs(props) {
+var Breadcrumbs = function Breadcrumbs(props) {
   return /*#__PURE__*/React.createElement(_Breadcrumbs["default"], props);
 };
 var _default = exports["default"] = Breadcrumbs;

package/core/navigation/menu/index.d.ts

@@ -6,5 +6,5 @@ export interface MenuProps extends DefaultProps, MuiMenuProps {
     anchorEl?: HTMLElement;
     withWrapper?: boolean;
 }
-export declare const Menu: ({ children, padding, margin, style, withWrapper, ...otherProps }: MenuProps) => React.JSX.Element;
+declare const Menu: ({ children, padding, margin, style, withWrapper, ...otherProps }: MenuProps) => React.JSX.Element;
 export default Menu;

package/core/navigation/menu/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Menu = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
@@ -13,7 +13,7 @@ var _Menu = _interopRequireDefault(require("@material-ui/core/Menu"));
 var _excluded = ["children", "padding", "margin", "style", "withWrapper"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var Menu = exports.Menu = function Menu(_ref) {
+var Menu = function Menu(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,

package/core/navigation/pagination/index.d.ts

@@ -7,5 +7,5 @@ export interface PaginationProps extends DefaultProps {
     onPrevious: () => void;
     onNavigate: (page: number) => void;
 }
-export declare const Pagination: (props: PaginationProps) => React.JSX.Element;
+declare const Pagination: (props: PaginationProps) => React.JSX.Element;
 export default Pagination;