flipper-ui 0.30.7 → 0.30.9

package/core/surfaces/step-card/step-card-skeleton.js

@@ -7,7 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = void 0;
 var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
 var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
-var _lab = require("@material-ui/lab");
+var _material = require("@mui/material");
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("./styles");
 var StepCardSkeleton = function StepCardSkeleton(props) {
@@ -19,7 +19,7 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     margin = props.margin,
     fullWidth = props.fullWidth;
   var TextSkeleton = function TextSkeleton() {
-    return /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
+    return /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
       variant: "text",
       style: {
         minWidth: '400px'
@@ -28,7 +28,7 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     });
   };
   var NormalProgress = function NormalProgress() {
-    return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
+    return /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
       variant: "text",
       height: 40,
       style: {
@@ -39,7 +39,7 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
       style: {
         width: '100%'
       }
-    }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
+    }, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
       variant: "text"
     })));
   };
@@ -54,8 +54,8 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     minHeight: expandable ? '100px' : '100%'
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
-  }, showIcon && /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
-    variant: "circle",
+  }, showIcon && /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
+    variant: "circular",
     width: 40,
     height: 40
   }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(TextSkeleton, null), subTitleSkeleton && /*#__PURE__*/_react["default"].createElement(TextSkeleton, null))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
@@ -67,7 +67,7 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     style: {
       width: '100%'
     }
-  }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
+  }, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
     variant: "text"
   }))))));
 };

package/core/surfaces/step-card/styles.d.ts

@@ -13,12 +13,12 @@ interface IContainerProps {
 interface IColumnProps {
     justifyContent: React.CSSProperties['justifyContent'];
 }
-export declare const Container: import("styled-components").StyledComponent<"div", any, IContainerProps, never>;
-export declare const StepCardRow: import("styled-components").StyledComponent<"div", any, IRowProps, never>;
-export declare const StepContainer: import("styled-components").StyledComponent<"div", any, IStepContainerProps, never>;
-export declare const StepCardColumn: import("styled-components").StyledComponent<"div", any, IColumnProps, never>;
-export declare const ListItemContainer: import("styled-components").StyledComponent<"li", any, {}, never>;
-export declare const TitleContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const NormalProgressContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BarWrapper: import("styled-components").StyledComponent<import("react").ComponentType<import("@material-ui/core").BoxProps>, any, {}, never>;
+export declare const Container: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IContainerProps>>;
+export declare const StepCardRow: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IRowProps>>;
+export declare const StepContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IStepContainerProps>>;
+export declare const StepCardColumn: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IColumnProps>>;
+export declare const ListItemContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>>;
+export declare const TitleContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const NormalProgressContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const BarWrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<import("@material-ui/core").BoxProps | (import("@material-ui/core").BoxProps & import("react").RefAttributes<import("react").Component<import("@material-ui/core").BoxProps, any, any>>), import("styled-components/dist/types").BaseObject>> & (Omit<import("react").ComponentClass<import("@material-ui/core").BoxProps, any>, keyof import("react").Component<any, {}, any>> | Omit<import("react").FunctionComponent<import("@material-ui/core").BoxProps>, keyof import("react").Component<any, {}, any>>);
 export {};

package/core/surfaces/step-card/styles.js

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = exports.BarWrapper = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
-var _nginformaticaStyleguide = require("nginformatica-styleguide");
 var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _Box = _interopRequireDefault(require("@material-ui/core/Box"));
+var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
 var Container = exports.Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    max-width: ", ";\n    ", "\n"])), function (props) {
   return props.fullWidth ? '100%' : '1100px';
@@ -35,4 +35,4 @@ var StepCardColumn = exports.StepCardColumn = _styledComponents["default"].div(_
 var ListItemContainer = exports.ListItemContainer = _styledComponents["default"].li(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    height: 30px;\n    margin: 16px 0;\n\n    svg:first-child {\n        margin-right: 16px;\n    }\n"])));
 var TitleContainer = exports.TitleContainer = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n    h6:first-child {\n        padding-inline: 20px;\n    }\n\n    span {\n        margin-left: 20px;\n    }\n"])));
 var NormalProgressContainer = exports.NormalProgressContainer = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    position: relative;\n\n    h6:first-child {\n        margin-bottom: 8px;\n    }\n"])));
-var BarWrapper = exports.BarWrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n\n    & .barColorPrimary {\n        background-color: ", ";\n    }\n"])), _nginformaticaStyleguide.theme.colors.feedback.success);
+var BarWrapper = exports.BarWrapper = (0, _styledComponents["default"])(_Box["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n\n    & .barColorPrimary {\n        background-color: ", ";\n    }\n"])), _theme.theme.colors.feedback.success);

package/experimental/actions/index.d.ts

@@ -25,6 +25,6 @@ interface IWrapper {
     margin?: IProps['margin'];
     align: IProps['align'];
 }
-export declare const Wrapper: import("styled-components").StyledComponent<"div", any, IWrapper, never>;
+export declare const Wrapper: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, IWrapper>>;
 export declare const Actions: (props: IProps) => React.JSX.Element;
 export default Actions;

package/experimental/auto-complete-lab/index.d.ts

@@ -1,4 +1,4 @@
 import { default as MuiAutocomplete } from '@material-ui/lab/Autocomplete';
-export { AutocompleteRenderInputParams, AutocompleteProps, AutocompleteCloseReason, AutocompleteChangeReason, AutocompleteInputChangeReason } from '@material-ui/lab/Autocomplete';
+export { AutocompleteRenderInputParams, AutocompleteProps, AutocompleteCloseReason, AutocompleteChangeReason, AutocompleteInputChangeReason, AutocompleteGetTagProps, AutocompleteRenderOptionState } from '@material-ui/lab/Autocomplete';
 export declare const Autocomplete: typeof MuiAutocomplete;
 export default Autocomplete;

package/experimental/auto-complete-lab/index.js

@@ -18,6 +18,12 @@ Object.defineProperty(exports, "AutocompleteCloseReason", {
     return _Autocomplete.AutocompleteCloseReason;
   }
 });
+Object.defineProperty(exports, "AutocompleteGetTagProps", {
+  enumerable: true,
+  get: function get() {
+    return _Autocomplete.AutocompleteGetTagProps;
+  }
+});
 Object.defineProperty(exports, "AutocompleteInputChangeReason", {
   enumerable: true,
   get: function get() {
@@ -36,13 +42,19 @@ Object.defineProperty(exports, "AutocompleteRenderInputParams", {
     return _Autocomplete.AutocompleteRenderInputParams;
   }
 });
+Object.defineProperty(exports, "AutocompleteRenderOptionState", {
+  enumerable: true,
+  get: function get() {
+    return _Autocomplete.AutocompleteRenderOptionState;
+  }
+});
 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"));
 var _react = _interopRequireDefault(require("react"));
-var _Autocomplete = _interopRequireWildcard(require("@material-ui/lab/Autocomplete"));
 var _styles = require("@material-ui/core/styles");
+var _Autocomplete = _interopRequireWildcard(require("@material-ui/lab/Autocomplete"));
 var _excluded = ["classes"];
 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; }

package/experimental/breadcrumbs/index.js

@@ -7,16 +7,16 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.Breadcrumbs = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
+var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _addIndex = _interopRequireDefault(require("ramda/es/addIndex"));
 var _map = _interopRequireDefault(require("ramda/es/map"));
 var _icons = require("../../icons");
-var _nginformaticaStyleguide = require("nginformatica-styleguide");
-var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _ = require("../..");
+var _theme = require("../../theme");
 var imap = (0, _addIndex["default"])(_map["default"]);
 var LinkStyled = _styledComponents["default"].a({
   textDecoration: 'none',
-  color: _nginformaticaStyleguide.theme.colors.primary.main,
+  color: _theme.theme.colors.primary.main,
   ':hover': {
     textDecoration: 'underline'
   }

package/experimental/card/index.d.ts

@@ -30,8 +30,8 @@ export interface IProps {
     onClickAdd?(): void;
     onToggleEdit?(): void;
 }
-export declare const Content: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const Title: import("styled-components").StyledComponent<({ children, margin, padding, style, variant, ...otherProps }: {
+export declare const Content: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
+export declare const Title: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<{
     /**
      * Children to be rendered inside the card.
      */
@@ -46,6 +46,21 @@ export declare const Title: import("styled-components").StyledComponent<({ child
     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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
-}, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "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" | "ref" | "key"> & import("../../core/types").DefaultProps) => React.JSX.Element, any, {}, never>;
+}, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "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" | "ref" | "key"> & import("../../core/types").DefaultProps, never>> & Omit<({ children, margin, padding, style, variant, ...otherProps }: {
+    /**
+     * Children to be rendered inside the card.
+     */
+    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
+    children?: 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<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "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" | "ref" | "key"> & import("../../core/types").DefaultProps) => React.JSX.Element, keyof React.Component<any, {}, any>>;
 export declare const Card: (props: IProps) => React.JSX.Element;
 export default Card;

package/experimental/dialog/dialog.js

@@ -7,19 +7,20 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.DialogV2 = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _ = require("../..");
 var _react = _interopRequireDefault(require("react"));
-var _nginformaticaStyleguide = require("nginformatica-styleguide");
+var _ = require("../..");
+var _theme = require("../../theme");
 var _excluded = ["open", "title", "titleAction", "text", "primaryButtonColor", "primaryButtonName", "primaryButtonText", "secondaryButtonText", "secondaryButtonName", "snippet", "content", "PaperProps", "omitActionButtons", "primaryButtonAction", "secondaryButtonAction", "onClose"];
-var ACTION_REMOVE = _nginformaticaStyleguide.theme.colors.action.cancel;
-var PRIMARY_DARK = _nginformaticaStyleguide.theme.colors.primary.main;
-var theme = {
+var _theme$colors = _theme.theme.colors,
+  action = _theme$colors.action,
+  primary = _theme$colors.primary;
+var themeDialog = {
   palette: {
     primary: {
-      main: PRIMARY_DARK
+      main: primary.main
     },
     secondary: {
-      main: ACTION_REMOVE
+      main: action.cancel
     },
     typography: {
       useNextVariants: true
@@ -46,7 +47,7 @@ var DialogV2 = exports.DialogV2 = function DialogV2(props) {
     otherProps = (0, _objectWithoutProperties2["default"])(props, _excluded);
   var haveSecondaryButton = secondaryButtonText && secondaryButtonAction;
   return /*#__PURE__*/_react["default"].createElement(_.ThemeProviderFlipper, {
-    options: theme
+    options: themeDialog
   }, /*#__PURE__*/_react["default"].createElement(_.Dialog, (0, _extends2["default"])({}, otherProps, {
     open: open,
     titleAction: titleAction,

package/experimental/sidebar/index.js

@@ -9,20 +9,20 @@ exports["default"] = exports.Sidebar = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _ = require("../..");
 var _react = _interopRequireWildcard(require("react"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _nginformaticaStyleguide = require("nginformatica-styleguide");
+var _ = require("../..");
 var _times = _interopRequireDefault(require("ramda/es/times"));
 var _map = _interopRequireDefault(require("ramda/es/map"));
-var _lab = require("@material-ui/lab");
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _material = require("@mui/material");
+var _theme = require("../../theme");
 var _excluded = ["options", "loading", "handleGoTo", "extraOptions", "top"];
 var _templateObject, _templateObject2, _templateObject3, _templateObject4;
 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 StyledFlipperSidebar = (0, _styledComponents["default"])(_.Sidebar)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        border-right: 1px solid ", ";\n    }\n"])), _nginformaticaStyleguide.theme.colors.grays.g6);
+var StyledFlipperSidebar = (0, _styledComponents["default"])(_.Sidebar)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    & > div {\n        border-right: 1px solid ", ";\n    }\n"])), _theme.theme.colors.grays.g6);
 var MenuItem = (0, _styledComponents["default"])(_.ListItem)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    &&& {\n        & div {\n            padding: 0;\n        }\n    }\n"])));
-var Link = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    text-decoration: none;\n"])), _nginformaticaStyleguide.theme.colors.primary.main);
+var Link = _styledComponents["default"].a(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    color: ", ";\n    text-decoration: none;\n"])), _theme.theme.colors.primary.main);
 var PaperBar = _styledComponents["default"].div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    flex-direction: column;\n    display: flex;\n    justify-content: space-between;\n    flex: 1;\n    padding-bottom: 16px;\n"])));
 var LABEL_TIMEOUT = 300;
 var renderSkeleton = function renderSkeleton(index) {
@@ -33,7 +33,7 @@ var renderSkeleton = function renderSkeleton(index) {
     style: {
       padding: '2px 10px'
     }
-  }, /*#__PURE__*/_react["default"].createElement(_lab.Skeleton, {
+  }, /*#__PURE__*/_react["default"].createElement(_material.Skeleton, {
     width: 36,
     height: 36
   }));

package/experimental/skeleton/index.js

@@ -6,17 +6,16 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Skeleton = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _nginformaticaStyleguide = require("nginformatica-styleguide");
 var _react = _interopRequireDefault(require("react"));
 var _reactLoadingSkeleton = _interopRequireDefault(require("react-loading-skeleton"));
 require("react-loading-skeleton/dist/skeleton.css");
-var mainColor = _nginformaticaStyleguide.theme.colors.grays.g7;
-var subColor = '#CFCFCF';
+var _theme = require("../../theme");
+var grays = _theme.theme.colors.grays;
 var Skeleton = exports.Skeleton = function Skeleton(props) {
   return /*#__PURE__*/_react["default"].createElement(_reactLoadingSkeleton["default"], (0, _extends2["default"])({
     containerTestId: "skeleton-container",
-    baseColor: mainColor,
-    highlightColor: subColor
+    baseColor: grays.g7,
+    highlightColor: grays.g6
   }, props));
 };
 var _default = exports["default"] = Skeleton;

package/icons/index.d.ts

@@ -1 +1 @@
-export * from '@material-ui/icons';
+export * from '@mui/icons-material';

package/icons/index.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-var _icons = require("@material-ui/icons");
-Object.keys(_icons).forEach(function (key) {
+var _iconsMaterial = require("@mui/icons-material");
+Object.keys(_iconsMaterial).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _icons[key]) return;
+  if (key in exports && exports[key] === _iconsMaterial[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _icons[key];
+      return _iconsMaterial[key];
     }
   });
 });

package/index.d.ts

@@ -32,6 +32,7 @@ export { default as ListItem } from './core/data-display/list-item';
 export { default as Menu } from './core/navigation/menu';
 export { default as MaskField } from './core/inputs/mask-field';
 export { default as Node } from './core/data-display/node';
+export { default as MenuItem } from './core/data-display/menu-item';
 export { default as Pagination } from './core/navigation/pagination';
 export { default as Paper } from './core/surfaces/paper';
 export { default as Progress } from './core/feedback/progress';
@@ -62,5 +63,6 @@ export { default as Chapter } from './core/data-display/chapter';
 export { default as DataTable } from './core/data-display/data-table';
 export { default as StepCard } from './core/surfaces/step-card';
 export { default as StepCardSkeleton } from './core/surfaces/step-card/step-card-skeleton';
+export { default as ValidationDialog } from './core/feedback/validation-dialog/';
 export * as Experimental from './experimental';
 export * as Icons from './icons';

package/index.js

@@ -217,6 +217,12 @@ Object.defineProperty(exports, "Menu", {
     return _menu["default"];
   }
 });
+Object.defineProperty(exports, "MenuItem", {
+  enumerable: true,
+  get: function get() {
+    return _menuItem["default"];
+  }
+});
 Object.defineProperty(exports, "Node", {
   enumerable: true,
   get: function get() {
@@ -385,6 +391,12 @@ Object.defineProperty(exports, "Typography", {
     return _typography["default"];
   }
 });
+Object.defineProperty(exports, "ValidationDialog", {
+  enumerable: true,
+  get: function get() {
+    return _validationDialog["default"];
+  }
+});
 Object.defineProperty(exports, "Zoom", {
   enumerable: true,
   get: function get() {
@@ -425,6 +437,7 @@ var _listItem = _interopRequireDefault(require("./core/data-display/list-item"))
 var _menu = _interopRequireDefault(require("./core/navigation/menu"));
 var _maskField = _interopRequireDefault(require("./core/inputs/mask-field"));
 var _node = _interopRequireDefault(require("./core/data-display/node"));
+var _menuItem = _interopRequireDefault(require("./core/data-display/menu-item"));
 var _pagination = _interopRequireDefault(require("./core/navigation/pagination"));
 var _paper = _interopRequireDefault(require("./core/surfaces/paper"));
 var _progress = _interopRequireDefault(require("./core/feedback/progress"));
@@ -455,6 +468,7 @@ var _chapter = _interopRequireDefault(require("./core/data-display/chapter"));
 var _dataTable = _interopRequireDefault(require("./core/data-display/data-table"));
 var _stepCard = _interopRequireDefault(require("./core/surfaces/step-card"));
 var _stepCardSkeleton = _interopRequireDefault(require("./core/surfaces/step-card/step-card-skeleton"));
+var _validationDialog = _interopRequireDefault(require("./core/feedback/validation-dialog/"));
 var _Experimental = _interopRequireWildcard(require("./experimental"));
 exports.Experimental = _Experimental;
 var _Icons = _interopRequireWildcard(require("./icons"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flipper-ui",
-  "version": "0.30.7",
+  "version": "0.30.9",
   "description": "",
   "main": "dist/index.js",
   "homepage": "https://flipper-ui.ngi.com.br/",
@@ -34,46 +34,51 @@
   "license": "MIT",
   "dependencies": {
     "@date-io/date-fns": "1.3.6",
+    "@emotion/react": "11.11.3",
+    "@emotion/styled": "11.11.0",
     "@material-ui/core": "4.12.4",
     "@material-ui/icons": "4.11.3",
     "@material-ui/lab": "4.0.0-alpha.61",
     "@material-ui/pickers": "3.3.11",
+    "@mui/icons-material": "5.15.3",
+    "@mui/material": "5.15.3",
+    "@mui/styles": "5.15.3",
     "date-fns": "2.30.0",
     "faker": "5.5.3",
     "material-table": "1.69.3",
     "material-ui-chip-input": "2.0.0-beta.2",
-    "nginformatica-styleguide": "1.0.2",
     "ramda": "0.25.0",
     "react-loading-skeleton": "3.3.1",
     "react-number-format": "4.4.1",
     "sprintf-js": "1.1.3",
+    "stylis": "4.3.1",
     "uuid": "9.0.1"
   },
   "devDependencies": {
     "@babel/cli": "7.23.4",
-    "@babel/core": "7.23.6",
-    "@babel/plugin-transform-runtime": "7.23.6",
-    "@babel/preset-env": "7.23.6",
+    "@babel/core": "7.23.7",
+    "@babel/plugin-transform-runtime": "7.23.7",
+    "@babel/preset-env": "7.23.7",
     "@babel/preset-typescript": "7.23.3",
-    "@storybook/addon-essentials": "7.6.6",
-    "@storybook/addon-styling-webpack": "0.0.5",
-    "@storybook/react": "7.6.6",
-    "@storybook/react-webpack5": "7.6.6",
-    "@testing-library/react": "14.0.0",
-    "@testing-library/user-event": "14.5.1",
+    "@storybook/addon-essentials": "7.6.7",
+    "@storybook/addon-styling-webpack": "0.0.6",
+    "@storybook/react": "7.6.7",
+    "@storybook/react-webpack5": "7.6.7",
+    "@testing-library/react": "14.1.2",
+    "@testing-library/user-event": "14.5.2",
     "@types/faker": "5.5.3",
     "@types/history": "5.0.0",
     "@types/jest": "29.5.11",
-    "@types/node": "20.10.5",
+    "@types/node": "20.10.6",
     "@types/ramda": "0.25.36",
-    "@types/react": "18.2.45",
+    "@types/react": "18.2.46",
     "@types/react-router": "5.1.20",
     "@types/react-router-dom": "5.3.3",
     "@types/sprintf-js": "1.1.4",
     "@types/styled-components": "5.1.34",
     "@types/uuid": "9.0.7",
-    "@typescript-eslint/eslint-plugin": "6.15.0",
-    "@typescript-eslint/parser": "6.15.0",
+    "@typescript-eslint/eslint-plugin": "6.17.0",
+    "@typescript-eslint/parser": "6.17.0",
     "babel-loader": "9.1.3",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-transform-class-properties": "6.24.1",
@@ -82,7 +87,7 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-prefer-arrow": "1.2.3",
-    "eslint-plugin-prettier": "5.1.0",
+    "eslint-plugin-prettier": "5.1.2",
     "eslint-plugin-ramda": "2.5.1",
     "eslint-plugin-react": "7.33.2",
     "eslint-plugin-react-hooks": "4.6.0",
@@ -95,19 +100,19 @@
     "prettier": "3.1.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "react-router": "6.21.0",
-    "react-router-dom": "6.21.0",
-    "storybook": "7.6.6",
-    "styled-components": "6.1.2",
+    "react-router": "6.21.1",
+    "react-router-dom": "6.21.1",
+    "storybook": "7.6.7",
+    "styled-components": "6.1.6",
     "ts-jest": "29.1.1",
     "ts-loader": "9.5.1",
     "typescript": "5.3.3",
     "webpack": "5.89.0"
   },
   "peerDependencies": {
-    "date-fns": "2.30.0",
-    "react": "16.8.0",
-    "styled-components": "5.0.0"
+    "date-fns": "^2.30.0",
+    "react": "16.x || 17.x || 18.x",
+    "styled-components": "5.x || 6.x"
   },
   "publishConfig": {
     "ignore": [

package/test/mocks/snackbar-mock.js

@@ -10,7 +10,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _ = require("../..");
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
-var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+var _icons = require("../../icons");
 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 Default = function Default(_ref) {
@@ -39,7 +39,7 @@ var Default = function Default(_ref) {
       "aria-label": "Close",
       color: "inherit",
       onClick: (snackProps === null || snackProps === void 0 ? void 0 : snackProps.onClose) || handleClose
-    }, /*#__PURE__*/_react["default"].createElement(_Close["default"], null));
+    }, /*#__PURE__*/_react["default"].createElement(_icons.Close, null));
   };
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_.Button, {
     disabled: btnState,