flipper-ui 0.31.0 → 0.31.3

package/core/data-display/typography/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Typography = 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 _Typography = _interopRequireDefault(require("@material-ui/core/Typography")
 var _excluded = ["children", "margin", "padding", "style", "variant"];
 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 Typography = exports.Typography = function Typography(_ref) {
+var Typography = function Typography(_ref) {
   var children = _ref.children,
     margin = _ref.margin,
     padding = _ref.padding,

package/core/feedback/dialog/index.js

@@ -8,7 +8,6 @@ exports["default"] = exports.Dialog = 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"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
 var _Dialog = _interopRequireDefault(require("@material-ui/core/Dialog"));
 var _DialogActions = _interopRequireDefault(require("@material-ui/core/DialogActions"));
@@ -16,15 +15,10 @@ var _DialogContent = _interopRequireDefault(require("@material-ui/core/DialogCon
 var _DialogContentText = _interopRequireDefault(require("@material-ui/core/DialogContentText"));
 var _DialogTitle = _interopRequireDefault(require("@material-ui/core/DialogTitle"));
 var _styles = require("@material-ui/core/styles");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styles2 = require("./styles");
 var _excluded = ["snippet", "style", "padding", "margin", "scroll", "PaperProps", "open", "fullScreen", "fullWidth", "maxWidth", "onClose", "titleAction", "titleWrapperStyle", "titleStyle", "titleActionStyle", "contentStyle", "contentTextStyle", "actionsStyle", "actions", "content", "text", "title", "snippetStyle", "snippetContentStyle", "aria-title"];
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 TitleWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
-var TitleAction = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    padding: 16px 24px;\n    align-items: center;\n    display: flex;\n"])));
-var Snippet = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
-var SnippetContent = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    height: inherit;\n    display: flex;\n"])));
 var useStyles = (0, _styles.makeStyles)({
   root: {
     overflowY: 'unset'
@@ -59,13 +53,13 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   var classes = useStyles();
   var renderTitle = function renderTitle(title) {
-    return titleAction ? /*#__PURE__*/_react["default"].createElement(TitleWrapper, {
+    return titleAction ? /*#__PURE__*/_react["default"].createElement(_styles2.TitleWrapper, {
       style: titleWrapperStyle
     }, /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
       style: _objectSpread({
         flex: 1
       }, titleStyle)
-    }, title), /*#__PURE__*/_react["default"].createElement(TitleAction, {
+    }, title), /*#__PURE__*/_react["default"].createElement(_styles2.TitleAction, {
       style: titleActionStyle
     }, titleAction)) : /*#__PURE__*/_react["default"].createElement(_DialogTitle["default"], {
       style: titleStyle
@@ -94,19 +88,27 @@ var Dialog = exports.Dialog = function Dialog(_ref) {
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, title && renderTitle(title), text ? renderText(text) : renderContent(content), actions && renderActions(actions));
   };
   var renderSnippet = function renderSnippet() {
-    return /*#__PURE__*/_react["default"].createElement(Snippet, {
+    return /*#__PURE__*/_react["default"].createElement(_styles2.Snippet, {
       style: snippetStyle
-    }, /*#__PURE__*/_react["default"].createElement("div", null, renderPaperContent()), /*#__PURE__*/_react["default"].createElement(SnippetContent, {
+    }, /*#__PURE__*/_react["default"].createElement(_styles2.PaperContent, null, renderPaperContent()), /*#__PURE__*/_react["default"].createElement(_styles2.SnippetContent, {
       style: snippetContentStyle
     }, snippet));
   };
-  var scrollMode = scroll === 'unset-body' ? 'body' : scroll === 'unset-paper' ? 'paper' : scroll;
+  var scrollMode = function scrollMode() {
+    if (scroll === 'unset-body') {
+      return 'body';
+    }
+    if (scroll === 'unset-paper') {
+      return 'paper';
+    }
+    return scroll;
+  };
   return /*#__PURE__*/_react["default"].createElement(_Dialog["default"], (0, _extends2["default"])({}, otherProps, {
     open: open,
     fullScreen: fullScreen,
     fullWidth: fullWidth,
     maxWidth: maxWidth,
-    scroll: scrollMode,
+    scroll: scrollMode(),
     PaperProps: _objectSpread(_objectSpread({}, ariaTitle ? {
       title: ariaTitle
     } : {}), {}, {

package/core/feedback/dialog/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const PaperContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const TitleWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const TitleAction: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Snippet: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const SnippetContent: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/core/feedback/dialog/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TitleWrapper = exports.TitleAction = exports.SnippetContent = exports.Snippet = exports.PaperContent = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5;
+var PaperContent = exports.PaperContent = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])([""])));
+var TitleWrapper = exports.TitleWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
+var TitleAction = exports.TitleAction = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    padding: 16px 24px;\n    align-items: center;\n    display: flex;\n"])));
+var Snippet = exports.Snippet = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
+var SnippetContent = exports.SnippetContent = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    position: relative;\n    height: inherit;\n    display: flex;\n"])));

package/core/feedback/grow/index.d.ts

@@ -9,5 +9,5 @@ export interface GrowProps extends DefaultProps {
     } | 'auto';
     children?: ReactElement<Record<string, unknown>>;
 }
-export declare const Grow: ({ children, padding, margin, style, ...otherProps }: GrowProps) => React.JSX.Element;
+declare const Grow: ({ children, padding, margin, style, ...otherProps }: GrowProps) => React.JSX.Element;
 export default Grow;

package/core/feedback/grow/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Grow = 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 _Grow = _interopRequireDefault(require("@material-ui/core/Grow"));
 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 Grow = exports.Grow = function Grow(_ref) {
+var Grow = function Grow(_ref) {
   var children = _ref.children,
     padding = _ref.padding,
     margin = _ref.margin,

package/core/feedback/progress/index.d.ts

@@ -20,5 +20,5 @@ export interface ProgressProps extends DefaultProps {
     value?: number;
     linear?: boolean;
 }
-export declare const Progress: ({ linear, style, margin, padding, ...otherProps }: ProgressProps & ICircular & ILinear) => React.JSX.Element;
+declare const Progress: ({ linear, style, margin, padding, ...otherProps }: ProgressProps & ICircular & ILinear) => React.JSX.Element;
 export default Progress;

package/core/feedback/progress/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Progress = 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"));
@@ -14,7 +14,7 @@ var _LinearProgress = _interopRequireDefault(require("@material-ui/core/LinearPr
 var _excluded = ["linear", "style", "margin", "padding"];
 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 Progress = exports.Progress = function Progress(_ref) {
+var Progress = function Progress(_ref) {
   var linear = _ref.linear,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,

package/core/feedback/slide/index.d.ts

@@ -10,5 +10,5 @@ export interface SlideProps extends DefaultProps {
     };
     children?: ReactElement<Record<string, unknown>>;
 }
-export declare const Slide: ({ children, direction, margin, padding, style, ...otherProps }: SlideProps) => React.JSX.Element;
+declare const Slide: ({ children, direction, margin, padding, style, ...otherProps }: SlideProps) => React.JSX.Element;
 export default Slide;

package/core/feedback/slide/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Slide = 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 _Slide = _interopRequireDefault(require("@material-ui/core/Slide"));
 var _excluded = ["children", "direction", "margin", "padding", "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 Slide = exports.Slide = function Slide(_ref) {
+var Slide = function Slide(_ref) {
   var children = _ref.children,
     direction = _ref.direction,
     margin = _ref.margin,

package/core/feedback/snackbar/index.d.ts

@@ -22,5 +22,5 @@ export interface SnackBarProps extends DefaultProps {
     onClose?(): void;
     onClick?(): void;
 }
-export declare const SnackBar: (props: SnackBarProps) => React.JSX.Element;
+declare const SnackBar: (props: SnackBarProps) => React.JSX.Element;
 export default SnackBar;

package/core/feedback/snackbar/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.SnackBar = 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"));
@@ -49,7 +49,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
     }
   });
 });
-var SnackBar = exports.SnackBar = function SnackBar(props) {
+var SnackBar = function SnackBar(props) {
   var id = props.id,
     action = props.action,
     anchorOrigin = props.anchorOrigin,

package/core/feedback/tooltip/index.d.ts

@@ -12,5 +12,5 @@ export interface TooltipProps extends DefaultProps {
     children: ReactElement<Record<string, unknown>>;
     enterDelay?: number;
 }
-export declare const Tooltip: ({ children, withWrapper, wrapperStyle, enterDelay, title, ...otherProps }: TooltipProps) => React.JSX.Element;
+declare const Tooltip: ({ children, withWrapper, wrapperStyle, enterDelay, title, ...otherProps }: TooltipProps) => React.JSX.Element;
 export default Tooltip;

package/core/feedback/tooltip/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Tooltip = 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 _Tooltip = _interopRequireDefault(require("@material-ui/core/Tooltip"));
 var _excluded = ["children", "withWrapper", "wrapperStyle", "enterDelay", "title"];
 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 Tooltip = exports.Tooltip = function Tooltip(_ref) {
+var Tooltip = function Tooltip(_ref) {
   var children = _ref.children,
     withWrapper = _ref.withWrapper,
     wrapperStyle = _ref.wrapperStyle,

package/core/feedback/validation-dialog/index.js

@@ -5,23 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.ValidationStatus = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireDefault(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _typography = require("../../data-display/typography");
-var _button = require("../../inputs/button");
+var _button = _interopRequireDefault(require("../../inputs/button"));
 var _actions = require("../../../experimental/actions");
-var _dialog = require("../dialog");
-var _templateObject, _templateObject2, _templateObject3;
+var _styles = require("./styles");
 var ValidationStatus = exports.ValidationStatus = /*#__PURE__*/function (ValidationStatus) {
   ValidationStatus["Loading"] = "Loading";
   ValidationStatus["Success"] = "Success";
   ValidationStatus["Error"] = "Error";
   return ValidationStatus;
 }({});
-var MuiDialog = (0, _styledComponents["default"])(_dialog.Dialog)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    div > div > h2 {\n        margin-top: 20px;\n    }\n"])));
-var DialogTypography = (0, _styledComponents["default"])(_typography.Typography)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        font-size: 16px;\n    }\n"])));
-var ValidationWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    padding: 15px 0;\n    gap: 15px;\n"])));
 var ValidationDialog = function ValidationDialog(_ref) {
   var open = _ref.open,
     failed = _ref.failed,
@@ -62,16 +55,16 @@ var ValidationDialog = function ValidationDialog(_ref) {
   };
   var renderDescription = function renderDescription(status, description) {
     if (status === 'Success') {
-      return /*#__PURE__*/_react["default"].createElement(DialogTypography, null, description.success);
+      return /*#__PURE__*/_react["default"].createElement(_styles.DialogTypography, null, description.success);
     }
     if (status === 'Error') {
-      return /*#__PURE__*/_react["default"].createElement(DialogTypography, null, description.error);
+      return /*#__PURE__*/_react["default"].createElement(_styles.DialogTypography, null, description.error);
     }
-    return /*#__PURE__*/_react["default"].createElement(DialogTypography, null, description.loading);
+    return /*#__PURE__*/_react["default"].createElement(_styles.DialogTypography, null, description.loading);
   };
   var renderContent = function renderContent(validations, icons) {
     return validations.map(function (item, i) {
-      return /*#__PURE__*/_react["default"].createElement(ValidationWrapper, {
+      return /*#__PURE__*/_react["default"].createElement(_styles.ValidationWrapper, {
         key: i
       }, renderIcon({
         status: item.status,
@@ -79,13 +72,13 @@ var ValidationDialog = function ValidationDialog(_ref) {
       }), renderDescription(item.status, item.description));
     });
   };
-  return /*#__PURE__*/_react["default"].createElement(MuiDialog, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.MuiDialog, {
     fullWidth: true,
     open: open,
     title: renderTitle(title, responses),
     maxWidth: "sm",
     scroll: "unset-body",
-    actions: failed ? /*#__PURE__*/_react["default"].createElement(_button.Button, {
+    actions: failed ? /*#__PURE__*/_react["default"].createElement(_button["default"], {
       color: "primary",
       variant: "contained",
       margin: "0 12px 12px 0",

package/core/feedback/validation-dialog/styles.d.ts

@@ -0,0 +1,28 @@
+/// <reference types="react" />
+export declare const MuiDialog: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("../dialog").DialogProps, never>> & Omit<({ snippet, style, padding, margin, scroll, PaperProps, open, fullScreen, fullWidth, maxWidth, onClose, titleAction, titleWrapperStyle, titleStyle, titleActionStyle, contentStyle, contentTextStyle, actionsStyle, actions, content, text, title, snippetStyle, snippetContentStyle, "aria-title": ariaTitle, ...otherProps }: import("../dialog").DialogProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const DialogTypography: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<{
+    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
+    children?: import("react").ReactNode;
+    color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | undefined;
+    display?: "initial" | "block" | "inline" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    variant?: "inherit" | (import("@material-ui/core").TypographyVariant | "srOnly") | undefined;
+    variantMapping?: Partial<Record<import("@material-ui/core").TypographyVariant | "srOnly", string>> | undefined;
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").TypographyTypeMap<{}, "span">> & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("../../types").DefaultProps, never>> & Omit<({ children, margin, padding, style, variant, ...otherProps }: {
+    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
+    children?: import("react").ReactNode;
+    color?: "inherit" | "initial" | "primary" | "secondary" | "textPrimary" | "textSecondary" | "error" | undefined;
+    display?: "initial" | "block" | "inline" | undefined;
+    gutterBottom?: boolean | undefined;
+    noWrap?: boolean | undefined;
+    paragraph?: boolean | undefined;
+    variant?: "inherit" | (import("@material-ui/core").TypographyVariant | "srOnly") | undefined;
+    variantMapping?: Partial<Record<import("@material-ui/core").TypographyVariant | "srOnly", string>> | undefined;
+} & import("@material-ui/core/OverridableComponent").CommonProps<import("@material-ui/core").TypographyTypeMap<{}, "span">> & Pick<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "ref" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture"> & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ValidationWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/core/feedback/validation-dialog/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ValidationWrapper = exports.MuiDialog = exports.DialogTypography = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
+var _dialog = require("../dialog");
+var _templateObject, _templateObject2, _templateObject3;
+var MuiDialog = exports.MuiDialog = (0, _styledComponents["default"])(_dialog.Dialog)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    div > div > h2 {\n        margin-top: 20px;\n    }\n"])));
+var DialogTypography = exports.DialogTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        font-size: 16px;\n    }\n"])));
+var ValidationWrapper = exports.ValidationWrapper = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    padding: 15px 0;\n    gap: 15px;\n"])));

package/core/inputs/auto-complete/index.js

@@ -55,7 +55,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(props) {
         }
       }, props.focusDelay);
     }
-  }, []);
+  }, [props.autoFocus, props.focusDelay, props.openOnFocus]);
   var inputValue = (0, _typeof2["default"])(props.value) === 'object' ? props.value.label : props.value || '';
   var handleSelect = function handleSelect(item) {
     if ((0, _typeof2["default"])(item) === 'object' && item.subheader) {
@@ -64,27 +64,27 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(props) {
     setOpen(false);
     props.onChange(item);
   };
-  var getSuggestions = function getSuggestions() {
+  var getSuggestions = (0, _react.useCallback)(function () {
     var value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : inputValue;
     if (props.openOnFocus && !value) {
       return props.suggestions;
     }
-    var items = value && value.length ? props.suggestions : [];
+    var items = value.length ? props.suggestions : [];
     return items.filter(function (item) {
       if (!item.subheader) {
         return props.caseSensitive ? removeAccents(item.label).includes(removeAccents(value)) : removeAccents(item.label).toLocaleLowerCase().includes(removeAccents(value).toLocaleLowerCase());
       }
       return true;
     });
-  };
+  }, [inputValue, props.caseSensitive, props.openOnFocus, props.suggestions]);
   (0, _react.useEffect)(function () {
-    var isFocused = inputRef && inputRef.current ? document.activeElement === inputRef.current : false;
+    var isFocused = inputRef.current ? document.activeElement === inputRef.current : false;
     var isSearching = props.value && typeof props.value === 'string';
     var hasSuggestions = getSuggestions().length > 0;
     if (isSearching && hasSuggestions && isFocused) {
       setOpen(true);
     }
-  }, [getSuggestions(), props.value]);
+  }, [getSuggestions, props.value]);
   var getPaperPosition = function getPaperPosition() {
     if (inputRef.current !== null) {
       var height = props.maxHeight || getSuggestions().length * 48;
@@ -111,9 +111,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(props) {
     }
     if (props.selectTextOnFocus) {
       var input = event.target;
-      if (input.select) {
-        input.select();
-      }
+      input.select();
     }
     if (props.onFocus) {
       props.onFocus(event);

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

@@ -16,5 +16,5 @@ export interface ButtonProps extends DefaultProps {
     'data-testid'?: string;
     onClick?(event: MouseEvent<HTMLButtonElement>): void;
 }
-export declare const Button: ({ children, margin, padding, style, variant, ...otherProps }: ButtonProps) => React.JSX.Element;
+declare const Button: ({ children, margin, padding, style, variant, ...otherProps }: ButtonProps) => React.JSX.Element;
 export default Button;

package/core/inputs/button/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Button = 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 _Button = _interopRequireDefault(require("@material-ui/core/Button"));
 var _excluded = ["children", "margin", "padding", "style", "variant"];
 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 Button = exports.Button = function Button(_ref) {
+var Button = function Button(_ref) {
   var children = _ref.children,
     margin = _ref.margin,
     padding = _ref.padding,

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

@@ -16,5 +16,5 @@ export interface CheckboxProps extends DefaultProps {
     onChange?: (event: ChangeEvent<HTMLElement>) => void;
     checkboxProps?: MuiCheckboxProps;
 }
-export declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
+declare const Checkbox: (props: CheckboxProps) => React.JSX.Element;
 export default Checkbox;

package/core/inputs/checkbox/index.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.Checkbox = void 0;
+exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
@@ -13,13 +13,10 @@ var _FormControlLabel = _interopRequireDefault(require("@material-ui/core/FormCo
 var _Switch = _interopRequireDefault(require("@material-ui/core/Switch"));
 var _Typography = _interopRequireDefault(require("@material-ui/core/Typography"));
 var _textField = require("../text-field");
+var _styles = require("./styles");
 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 DENSE = {
-  padding: '2px',
-  margin: '0px 7px'
-};
-var Checkbox = exports.Checkbox = function Checkbox(props) {
+var Checkbox = function Checkbox(props) {
   var _props$type = props.type,
     type = _props$type === void 0 ? 'checkbox' : _props$type,
     margin = props.margin,
@@ -38,7 +35,7 @@ var Checkbox = exports.Checkbox = function Checkbox(props) {
       checked: props.checked,
       value: props.name,
       color: props.color,
-      style: props.dense ? DENSE : {},
+      style: props.dense ? _styles.DENSE : {},
       disabled: props.disabled,
       onChange: props.onChange
     }));
@@ -62,7 +59,7 @@ var Checkbox = exports.Checkbox = function Checkbox(props) {
       variant: "body2"
     }, props.label) : props.label;
   };
-  return /*#__PURE__*/_react["default"].createElement(_textField.TextFieldWrapper, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.CheckFieldsWrapper, {
     id: props.id
   }, props.label ? /*#__PURE__*/_react["default"].createElement(_FormControlLabel["default"], {
     style: _objectSpread({

package/core/inputs/checkbox/styles.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const DENSE: {
+    padding: string;
+    margin: string;
+};
+export declare const CheckFieldsWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;

package/core/inputs/checkbox/styles.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DENSE = exports.CheckFieldsWrapper = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject;
+var DENSE = exports.DENSE = {
+  padding: '2px',
+  margin: '0px 7px'
+};
+var CheckFieldsWrapper = exports.CheckFieldsWrapper = _styledComponents["default"].div(_templateObject || (_templateObject = (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"])));

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

@@ -21,5 +21,5 @@ export interface ChipFieldProps<T extends TChipValues> {
 export type TChipValues = {
     value: string | number;
 };
-export declare const ChipField: <T extends TChipValues>(props: ChipFieldProps<T>) => React.JSX.Element;
+declare const ChipField: <T extends TChipValues>(props: ChipFieldProps<T>) => React.JSX.Element;
 export default ChipField;

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

@@ -5,23 +5,19 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = exports.ChipField = void 0;
+exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = _interopRequireWildcard(require("react"));
-var _materialUiChipInput = _interopRequireDefault(require("material-ui-chip-input"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
+var _styles = require("./styles");
 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 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"])));
-var ChipField = exports.ChipField = function ChipField(props) {
+var ChipField = function ChipField(props) {
   var values = (0, _react.useMemo)(function () {
     return props.values.map(function (item) {
       return item.value;
     });
   }, [props.values]);
-  return /*#__PURE__*/_react["default"].createElement(StyledChipInput, (0, _extends2["default"])({}, props, {
+  return /*#__PURE__*/_react["default"].createElement(_styles.StyledChipInput, (0, _extends2["default"])({}, props, {
     alwaysShowPlaceholder: true,
     id: "chip-field-root",
     value: values

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const StyledChipInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("material-ui-chip-input").Props | ((Omit<import("material-ui-chip-input").StandardTextFieldProps, "ref"> | Omit<import("material-ui-chip-input").FilledTextFieldProps, "ref"> | Omit<import("material-ui-chip-input").OutlinedTextFieldProps, "ref">) & import("react").RefAttributes<import("react").Component<import("material-ui-chip-input").Props, any, any>>), import("styled-components/dist/types").BaseObject>> & (Omit<import("react").ComponentClass<import("material-ui-chip-input").Props, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<import("material-ui-chip-input").Props>, keyof import("react").Component<any, {}, any>>);