flipper-ui 0.33.1 → 0.34.0

package/core/surfaces/panel/index.js

@@ -8,7 +8,6 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _ExpandMore2 = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
-var _defaultTo2 = _interopRequireDefault(require("ramda/es/defaultTo"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _styles = require("./styles");
@@ -20,10 +19,12 @@ var DEFAULT_ELEVATION = 2;
 var Panel = function Panel(props) {
   var hideExpansionIcon = props.hideExpansionIcon,
     expanded = props.expanded,
-    defaultExpanded = props.defaultExpanded,
+    _props$defaultExpande = props.defaultExpanded,
+    defaultExpanded = _props$defaultExpande === void 0 ? true : _props$defaultExpande,
     id = props.id,
     nested = props.nested,
-    elevation = props.elevation,
+    _props$elevation = props.elevation,
+    elevation = _props$elevation === void 0 ? DEFAULT_ELEVATION : _props$elevation,
     hideSummary = props.hideSummary,
     title = props.title,
     summary = props.summary,
@@ -41,28 +42,28 @@ var Panel = function Panel(props) {
       cursor: 'auto'
     }
   } : undefined;
-  return /*#__PURE__*/_react["default"].createElement(_styles.Paper, (0, _extends2["default"])({}, otherProps, {
-    expanded: expanded,
+  return /*#__PURE__*/_react["default"].createElement(_styles.ExpansionPaperPanel, (0, _extends2["default"])({}, otherProps, {
     id: id,
+    margin: "0px",
+    expanded: expanded,
+    className: className,
     "data-testid": "panel-component",
-    defaultExpanded: (0, _defaultTo2["default"])(true, defaultExpanded),
-    elevation: nested ? NESTED_ELEVATION : (0, _defaultTo2["default"])(DEFAULT_ELEVATION, elevation),
+    defaultExpanded: defaultExpanded,
+    actions: actions,
+    details: details,
+    detailsStyle: detailsStyle,
+    elevation: nested ? NESTED_ELEVATION : elevation,
     summary: !hideSummary && /*#__PURE__*/_react["default"].createElement(_styles.Summary, null, title && /*#__PURE__*/_react["default"].createElement(_styles.Title, {
       noWrap: true,
       variant: "subtitle1"
     }, title), summary),
-    details: details,
     expandIcon: !hideExpansionIcon && /*#__PURE__*/_react["default"].createElement(_ExpandMore2["default"], {
       "data-testid": "expand-icon"
     }),
-    actions: actions,
-    margin: "0px",
     style: _objectSpread({
       gridArea: area,
       border: nested ? '1px solid lightgrey' : undefined
     }, style),
-    className: className,
-    detailsStyle: detailsStyle,
     onChange: onChange,
     onClick: onClick
   }, omitCursor));

package/core/surfaces/panel/styles.d.ts

@@ -1,28 +1,7 @@
-/// <reference types="react" />
-export declare const Paper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../expansion-panel").ExpansionPanelProps, never>> & string & Omit<({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, editStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: import("../expansion-panel").ExpansionPanelProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const ExpansionPaperPanel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../expansion-panel").ExpansionPanelProps, never>> & string & Omit<({ actions, details, expandIcon, margin, padding, style, summary, summaryStyle, detailsStyle, actionsStyle, onHelperClick, onEditClick, onSaveClick, onClick, helperIcon, editable, editing, headerProps, helperButtonPosition, ...otherProps }: import("../expansion-panel").ExpansionPanelProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
 export declare const Summary: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<{
-    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
-    children?: import("react").ReactNode;
-    color?: "inherit" | "primary" | "secondary" | "initial" | "error" | "textPrimary" | "textSecondary" | 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;
-}, "color" | "role" | "onClick" | "children" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "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" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key"> & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: {
-    align?: import("@material-ui/core").PropTypes.Alignment | undefined;
-    children?: import("react").ReactNode;
-    color?: "inherit" | "primary" | "secondary" | "initial" | "error" | "textPrimary" | "textSecondary" | 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;
-}, "color" | "role" | "onClick" | "children" | "id" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "nonce" | "slot" | "spellCheck" | "tabIndex" | "title" | "translate" | "radioGroup" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "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" | "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" | "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" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "ref" | "key"> & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const Title: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+}, "color" | "children" | "padding" | "margin" | "style" | "className" | "classes" | "sx" | "p" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "marginBlock" | "marginInline" | "overflow" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "align" | "variant" | "noWrap" | "gutterBottom" | "paragraph" | "variantMapping"> & {
+    component?: import("react").ElementType;
+} & import("../../types").DefaultProps, never>> & string & Omit<({ children, margin, padding, style, variant, ...otherProps }: import("@mui/material").TypographyProps & import("../../types").DefaultProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/surfaces/panel/styles.js

@@ -4,12 +4,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.Summary = exports.Paper = void 0;
+exports.Title = exports.Summary = exports.ExpansionPaperPanel = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _expansionPanel = _interopRequireDefault(require("../expansion-panel"));
 var _templateObject, _templateObject2, _templateObject3;
-var Paper = exports.Paper = (0, _styledComponents["default"])(_expansionPanel["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-radius: 4px;\n        ::before {\n            height: 0px;\n            background-color: transparent;\n        }\n    }\n"])));
+var ExpansionPaperPanel = exports.ExpansionPaperPanel = (0, _styledComponents["default"])(_expansionPanel["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-radius: 4px;\n    }\n\n    &::before {\n        height: 0px !important;\n        top: 0px !important;\n        background-color: transparent;\n    }\n"])));
 var Summary = exports.Summary = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n"])));
 var Title = exports.Title = (0, _styledComponents["default"])(_typography["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        flex: 1;\n    }\n"])));

package/core/surfaces/paper/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
 import type { DefaultProps } from '../../types';
-import type { PaperProps as MuiPaperProps } from '@material-ui/core';
-export interface PaperProps extends DefaultProps, MuiPaperProps {
+import type { PaperProps } from '@mui/material/Paper';
+export interface IPaperProps extends DefaultProps, PaperProps {
     square?: boolean;
     elevation?: number;
 }
-declare const Paper: ({ children, style, padding, margin, ...otherProps }: PaperProps) => React.JSX.Element;
+declare const Paper: ({ children, style, padding, margin, ...otherProps }: IPaperProps) => React.JSX.Element;
 export default Paper;

package/core/surfaces/paper/index.js

@@ -5,11 +5,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Paper2 = _interopRequireDefault(require("@material-ui/core/Paper"));
 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 _Paper = _interopRequireDefault(require("@mui/material/Paper"));
 var _excluded = ["children", "style", "padding", "margin"];
 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; }
@@ -20,7 +20,7 @@ var Paper = function Paper(_ref) {
     padding = _ref.padding,
     margin = _ref.margin,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  return /*#__PURE__*/_react["default"].createElement(_Paper2["default"], (0, _extends2["default"])({}, otherProps, {
+  return /*#__PURE__*/_react["default"].createElement(_Paper["default"], (0, _extends2["default"])({}, otherProps, {
     role: "mui-paper-container",
     style: _objectSpread({
       padding: padding,

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import type { CSSProperties, ChangeEvent, HTMLAttributes } from 'react';
+import type { CSSProperties, ChangeEvent, HTMLAttributes, SyntheticEvent } from 'react';
 import type Typography from '@/core/data-display/typography';
-import type { LinearProgress, AccordionDetails as MuiAccordionDetails } from '@material-ui/core';
+import type { LinearProgress } from '@mui/material';
+import type MuiAccordionDetails from '@mui/material/Accordion';
 export interface IStepCardProps {
     expanded?: boolean;
-    onChange?: (event: ChangeEvent<Record<string, unknown>>, expanded: boolean) => void;
+    onChange?: (event?: ChangeEvent<Record<string, unknown>> | SyntheticEvent<Element, Event>, expanded?: boolean) => void;
     fullWidth?: boolean;
     loading?: boolean;
     percentage: number;

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Accordion2 = _interopRequireDefault(require("@material-ui/core/Accordion"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireDefault(require("react"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
 var _stepCardDetails = require("./step-card-details");
 var _stepCardPanel = require("./step-card-panel");
 var _stepCardSkeleton = _interopRequireDefault(require("./step-card-skeleton"));
@@ -54,7 +54,7 @@ var StepCard = function StepCard(_ref) {
   }) : /*#__PURE__*/_react["default"].createElement(_styles.Container, (0, _extends2["default"])({
     margin: margin,
     fullWidth: fullWidth
-  }, rootProps), /*#__PURE__*/_react["default"].createElement(_Accordion2["default"], (0, _extends2["default"])({}, expanded ? {
+  }, rootProps), /*#__PURE__*/_react["default"].createElement(_Accordion["default"], (0, _extends2["default"])({}, expanded ? {
     expanded: expanded
   } : {}, {
     onChange: onChange

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.StepCardDetails = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _List2 = _interopRequireDefault(require("@material-ui/core/List"));
 var _Help2 = _interopRequireDefault(require("@mui/icons-material/Help"));
 var _CheckCircle2 = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
 var _react = _interopRequireDefault(require("react"));
-var _AccordionDetails = _interopRequireDefault(require("@material-ui/core/AccordionDetails"));
+var _AccordionDetails = _interopRequireDefault(require("@mui/material/AccordionDetails"));
+var _List = _interopRequireDefault(require("@mui/material/List"));
 var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
 var _styles = require("./styles");
@@ -21,7 +21,7 @@ var _theme$colors = _theme.theme.colors,
 var StepsList = function StepsList(_ref) {
   var steps = _ref.steps,
     onStepUrlClick = _ref.onStepUrlClick;
-  return /*#__PURE__*/_react["default"].createElement(_List2["default"], null, (steps || []).map(function (step, index) {
+  return /*#__PURE__*/_react["default"].createElement(_List["default"], null, (steps || []).map(function (step, index) {
     var handleOnClickStepUrl = function handleOnClickStepUrl() {
       if (onStepUrlClick && step.url) {
         onStepUrlClick(step.url);

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

@@ -5,12 +5,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.StepCardPanel = void 0;
-var _LinearProgress2 = _interopRequireDefault(require("@material-ui/core/LinearProgress"));
 var _ExpandMore2 = _interopRequireDefault(require("@mui/icons-material/ExpandMore"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _CheckCircle2 = _interopRequireDefault(require("@mui/icons-material/CheckCircle"));
 var _react = _interopRequireDefault(require("react"));
-var _AccordionSummary = _interopRequireDefault(require("@material-ui/core/AccordionSummary"));
+var _AccordionSummary = _interopRequireDefault(require("@mui/material/AccordionSummary"));
+var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
 var _sprintfJs = require("sprintf-js");
 var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _styles = require("./styles");
@@ -73,39 +73,31 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
     variant: "h6"
   }, summaryProps), (0, _sprintfJs.sprintf)(summary, remainingSteps, time))) : /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, {
     "data-testid": "normal-progress"
-  }, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
+  }, /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContent, null, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
     variant: "h6"
   }, summaryProps), summary), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
-    variant: "subtitle2",
-    style: {
-      position: 'absolute',
-      right: 8
-    }
-  }, "".concat(percentage, "%")), /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(_LinearProgress2["default"], (0, _extends2["default"])({
+    variant: "subtitle2"
+  }, "".concat(percentage, "%"))), /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
     variant: "determinate",
     value: percentage,
-    color: "primary",
-    classes: {
-      barColorPrimary: 'barColorPrimary'
-    },
+    color: "success",
     style: {
-      borderRadius: 10,
+      width: '100%',
       height: '16px',
+      borderRadius: 10,
       backgroundColor: grays.g5
     }
-  }, summaryLinearProgressBarProps)))))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
+  }, summaryLinearProgressBarProps))))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     fullWidth: fullWidth,
     minHeight: "15px"
-  }, /*#__PURE__*/_react["default"].createElement(_styles.BarWrapper, null, /*#__PURE__*/_react["default"].createElement(_LinearProgress2["default"], (0, _extends2["default"])({
-    variant: "determinate",
+  }, /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
     value: percentage,
-    color: "primary",
-    classes: {
-      barColorPrimary: 'barColorPrimary'
-    },
+    color: "success",
+    variant: "determinate",
     style: {
       height: '16px',
+      width: '100%',
       backgroundColor: grays.g5
     }
-  }, linearProgressBarProps)))));
+  }, linearProgressBarProps))));
 };

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

@@ -5,10 +5,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _Box2 = _interopRequireDefault(require("@mui/material/Box"));
-var _Skeleton2 = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _react = _interopRequireDefault(require("react"));
-var _Accordion = _interopRequireDefault(require("@material-ui/core/Accordion"));
+var _Accordion = _interopRequireDefault(require("@mui/material/Accordion"));
+var _Skeleton = _interopRequireDefault(require("@mui/material/Skeleton"));
 var _styles = require("./styles");
 var StepCardSkeleton = function StepCardSkeleton(props) {
   var expandable = props.expandable,
@@ -29,52 +28,49 @@ var StepCardSkeleton = function StepCardSkeleton(props) {
     minHeight: expandable ? '100px' : '100%'
   }, /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "start"
-  }, showIcon && /*#__PURE__*/_react["default"].createElement(_Skeleton2["default"], {
+  }, showIcon && /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
     variant: "circular",
     width: 40,
     height: 40
-  }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Skeleton2["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
     variant: "text",
     style: {
-      minWidth: '400px'
+      minWidth: '300px'
     },
     height: 40
-  }), subTitleSkeleton && /*#__PURE__*/_react["default"].createElement(_Skeleton2["default"], {
+  }), subTitleSkeleton && /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
     variant: "text",
     style: {
-      minWidth: '400px'
+      minWidth: '300px'
     },
     height: 40
   }))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"
-  }, expandable ? /*#__PURE__*/_react["default"].createElement(_Skeleton2["default"], {
+  }, expandable ? /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
     variant: "text",
     style: {
-      minWidth: '400px'
+      minWidth: '300px'
     },
     height: 40
-  }) : /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_Skeleton2["default"], {
+  }) : /*#__PURE__*/_react["default"].createElement(_styles.NormalProgressContainer, null, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
     variant: "text",
     height: 40,
     style: {
-      minWidth: '100px',
-      margin: '4px 0px'
+      minWidth: '200px'
     }
-  }), /*#__PURE__*/_react["default"].createElement(_Box2["default"], {
+  }), /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    variant: "text",
     style: {
       width: '100%'
     }
-  }, /*#__PURE__*/_react["default"].createElement(_Skeleton2["default"], {
-    variant: "text"
-  }))))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
+  })))), showBottomPercentage && /*#__PURE__*/_react["default"].createElement(_styles.StepCardRow, {
     minHeight: "15px",
     fullWidth: fullWidth
-  }, /*#__PURE__*/_react["default"].createElement(_Box2["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_Skeleton["default"], {
+    variant: "text",
     style: {
       width: '100%'
     }
-  }, /*#__PURE__*/_react["default"].createElement(_Skeleton2["default"], {
-    variant: "text"
-  }))))));
+  })))));
 };
 var _default = exports["default"] = StepCardSkeleton;

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

@@ -1,4 +1,6 @@
-declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import(".").IStepCardProps>;
+import type { Meta } from '@storybook/react';
+import StepCard from '.';
+declare const _default: Meta<typeof StepCard>;
 export default _default;
 export declare const Default: any;
 export declare const WithoutExpandable: any;

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 interface IStepContainerProps {
     padding?: string | number;
 }
@@ -20,7 +19,5 @@ export declare const StepCardColumn: import("styled-components/dist/types").ISty
 export declare const ListItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const TitleContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const NormalProgressContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const BarWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>>, never>> & string & Omit<import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", import("@mui/material").Theme>>, keyof import("react").Component<any, {}, any>>;
+export declare const NormalProgressContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export {};

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

@@ -4,13 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = exports.BarWrapper = void 0;
-var _Box2 = _interopRequireDefault(require("@mui/material/Box"));
+exports.TitleContainer = exports.StepContainer = exports.StepCardRow = exports.StepCardColumn = exports.NormalProgressContent = exports.NormalProgressContainer = exports.ListItemContainer = exports.Container = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _theme = require("../../../theme");
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8;
-var feedback = _theme.theme.colors.feedback;
 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';
 }, function (props) {
@@ -34,5 +31,5 @@ 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"])(_Box2["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n\n    & .barColorPrimary {\n        background-color: ", ";\n    }\n"])), feedback.success);
+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"])));
+var NormalProgressContent = exports.NormalProgressContent = _styledComponents["default"].div(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin-bottom: 8px;\n"])));

package/index.d.ts

@@ -1,6 +1,6 @@
 export * from './core/data-display/data-table';
 export * from './core/feedback/dialog-v2';
-export * from './core/inputs/auto-complete-lab';
+export * from './core/inputs/autocomplete';
 export { default as Actions } from './core/data-display/actions';
 export { default as Advertise } from './core/data-display/advertise';
 export { default as Avatar } from './core/data-display/avatar';
@@ -29,14 +29,12 @@ export { default as Loading } from './core/feedback/loading';
 export { default as NothingFound } from './core/feedback/nothing-found';
 export { default as Progress } from './core/feedback/progress';
 export { default as Skeleton } from './core/feedback/skeleton';
-export { default as Slide } from './core/feedback/slide';
 export { default as SnackBar } from './core/feedback/snackbar';
 export { default as Tooltip } from './core/feedback/tooltip';
 export { default as ValidationDialog } from './core/feedback/validation-dialog/';
 export { default as AddButton } from './core/inputs/add-button';
 export { default as Button } from './core/inputs/button';
 export { default as Checkbox } from './core/inputs/checkbox';
-export { default as ChipField } from './core/inputs/chip-field';
 export { default as DateTime } from './core/inputs/date-time';
 export { default as IconButton } from './core/inputs/icon-button';
 export { default as InputAdornment } from './core/inputs/input-adornment';

package/index.js

@@ -33,14 +33,12 @@ var _exportNames = {
   NothingFound: true,
   Progress: true,
   Skeleton: true,
-  Slide: true,
   SnackBar: true,
   Tooltip: true,
   ValidationDialog: true,
   AddButton: true,
   Button: true,
   Checkbox: true,
-  ChipField: true,
   DateTime: true,
   IconButton: true,
   InputAdornment: true,
@@ -139,12 +137,6 @@ Object.defineProperty(exports, "Chip", {
     return _chip["default"];
   }
 });
-Object.defineProperty(exports, "ChipField", {
-  enumerable: true,
-  get: function get() {
-    return _chipField["default"];
-  }
-});
 Object.defineProperty(exports, "Collapse", {
   enumerable: true,
   get: function get() {
@@ -331,12 +323,6 @@ Object.defineProperty(exports, "Skeleton", {
     return _skeleton["default"];
   }
 });
-Object.defineProperty(exports, "Slide", {
-  enumerable: true,
-  get: function get() {
-    return _slide["default"];
-  }
-});
 Object.defineProperty(exports, "Slider", {
   enumerable: true,
   get: function get() {
@@ -457,15 +443,15 @@ Object.keys(_dialogV).forEach(function (key) {
     }
   });
 });
-var _autoCompleteLab = require("./core/inputs/auto-complete-lab");
-Object.keys(_autoCompleteLab).forEach(function (key) {
+var _autocomplete = require("./core/inputs/autocomplete");
+Object.keys(_autocomplete).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
   if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
-  if (key in exports && exports[key] === _autoCompleteLab[key]) return;
+  if (key in exports && exports[key] === _autocomplete[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _autoCompleteLab[key];
+      return _autocomplete[key];
     }
   });
 });
@@ -497,14 +483,12 @@ var _loading = _interopRequireDefault(require("./core/feedback/loading"));
 var _nothingFound = _interopRequireDefault(require("./core/feedback/nothing-found"));
 var _progress = _interopRequireDefault(require("./core/feedback/progress"));
 var _skeleton = _interopRequireDefault(require("./core/feedback/skeleton"));
-var _slide = _interopRequireDefault(require("./core/feedback/slide"));
 var _snackbar = _interopRequireDefault(require("./core/feedback/snackbar"));
 var _tooltip = _interopRequireDefault(require("./core/feedback/tooltip"));
 var _validationDialog = _interopRequireDefault(require("./core/feedback/validation-dialog/"));
 var _addButton = _interopRequireDefault(require("./core/inputs/add-button"));
 var _button = _interopRequireDefault(require("./core/inputs/button"));
 var _checkbox = _interopRequireDefault(require("./core/inputs/checkbox"));
-var _chipField = _interopRequireDefault(require("./core/inputs/chip-field"));
 var _dateTime = _interopRequireDefault(require("./core/inputs/date-time"));
 var _iconButton = _interopRequireDefault(require("./core/inputs/icon-button"));
 var _inputAdornment = _interopRequireDefault(require("./core/inputs/input-adornment"));