flipper-ui 0.35.2 → 0.35.3

package/core/data-display/list-item/index.js

@@ -31,11 +31,13 @@ var ListItem = function ListItem(props) {
     }, props.icon), (props.title || props.subtitle) && /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
       primary: props.title,
       secondary: props.subtitle,
-      primaryTypographyProps: {
-        color: 'inherit'
-      },
-      secondaryTypographyProps: {
-        color: 'inherit'
+      slotProps: {
+        primary: {
+          color: 'inherit'
+        },
+        secondary: {
+          color: 'inherit'
+        }
       },
       "data-testid": "list-item-".concat(props.subtitle)
     }), props.action && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {

package/core/feedback/nothing-found/index.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
-import type { TypographyProps } from '@mui/material/Typography';
-export interface IProps extends TypographyProps {
+export interface IProps {
     searchText?: string;
     customText?: string;
     buttonLabel?: string;

package/core/feedback/nothing-found/index.js

@@ -8,7 +8,7 @@ exports["default"] = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
-var _styles = require("./styles");
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _excluded = ["buttonLabel", "readonly"],
   _excluded2 = ["customText", "searchText", "show"];
 var NothingFound = function NothingFound(props) {
@@ -23,9 +23,10 @@ var NothingFound = function NothingFound(props) {
     searchText = _rest$searchText === void 0 ? '' : _rest$searchText,
     show = rest.show,
     otherProps = (0, _objectWithoutProperties2["default"])(rest, _excluded2);
-  return show ? /*#__PURE__*/_react["default"].createElement(_styles.TextTypography, (0, _extends2["default"])({
-    align: "center",
+  return show ? /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
+    flex: 1,
     variant: "h5",
+    align: "center",
     color: "textSecondary",
     padding: "48px 0"
   }, otherProps), searchText !== '' ? "Sua pesquisa \"".concat(searchText, "\" n\xE3o retornou nenhum resultado.") : customText) : null;

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

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports["default"] = exports.ValidationStatus = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _actions = _interopRequireDefault(require("../../data-display/actions"));
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _button = _interopRequireDefault(require("../../inputs/button"));
 var _styles = require("./styles");
 var ValidationStatus = exports.ValidationStatus = /*#__PURE__*/function (ValidationStatus) {
@@ -55,12 +56,18 @@ var ValidationDialog = function ValidationDialog(_ref) {
   };
   var renderDescription = function renderDescription(status, description) {
     if (status === 'Success') {
-      return /*#__PURE__*/_react["default"].createElement(_styles.DialogTypography, null, description.success);
+      return /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+        variant: "body1"
+      }, description.success);
     }
     if (status === 'Error') {
-      return /*#__PURE__*/_react["default"].createElement(_styles.DialogTypography, null, description.error);
+      return /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+        variant: "body1"
+      }, description.error);
     }
-    return /*#__PURE__*/_react["default"].createElement(_styles.DialogTypography, null, description.loading);
+    return /*#__PURE__*/_react["default"].createElement(_typography["default"], {
+      variant: "body1"
+    }, description.loading);
   };
   var renderContent = function renderContent(validations, icons) {
     return validations.map(function (item, i) {

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

@@ -1,7 +1,2 @@
 export declare const MuiDialog: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("../dialog").IDialogProps, never>> & string & 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").IDialogProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
-export declare const DialogTypography: 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" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
-    component?: 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>>;
 export declare const ValidationWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

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

@@ -4,12 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValidationWrapper = exports.MuiDialog = exports.DialogTypography = void 0;
+exports.ValidationWrapper = exports.MuiDialog = 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 = _interopRequireDefault(require("../dialog"));
-var _templateObject, _templateObject2, _templateObject3;
+var _templateObject, _templateObject2;
 var MuiDialog = exports.MuiDialog = (0, _styledComponents["default"])(_dialog["default"])(_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"])));
+var ValidationWrapper = exports.ValidationWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    align-items: center;\n    padding: 15px 0;\n    gap: 15px;\n"])));

package/core/navigation/breadcrumbs/index.js

@@ -10,6 +10,7 @@ var _map2 = _interopRequireDefault(require("ramda/es/map"));
 var _addIndex2 = _interopRequireDefault(require("ramda/es/addIndex"));
 var _react = _interopRequireDefault(require("react"));
 var _Breadcrumbs = _interopRequireDefault(require("@mui/material/Breadcrumbs"));
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _mui = require("../../../icons/mui");
 var _styles = require("./styles");
 var imap = (0, _addIndex2["default"])(_map2["default"]);
@@ -34,7 +35,7 @@ var Breadcrumbs = function Breadcrumbs(_ref) {
   var links = imap(function (term, chunkIndex) {
     var validChunkWord = pathMapping[term];
     var link = '/' + allChunks.slice(1, chunkIndex + 1).join('/');
-    var text = /*#__PURE__*/_react["default"].createElement(_styles.TextTypography, {
+    var text = /*#__PURE__*/_react["default"].createElement(_typography["default"], {
       key: link,
       color: "inherit"
     }, validChunkWord);

package/core/navigation/breadcrumbs/styles.d.ts

@@ -1,6 +1 @@
 export declare const BreadcrumbLink: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
-export declare const TextTypography: 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" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
-    component?: 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/navigation/breadcrumbs/styles.js

@@ -4,12 +4,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TextTypography = exports.BreadcrumbLink = void 0;
+exports.BreadcrumbLink = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _theme = require("../../../theme");
-var _templateObject, _templateObject2;
+var _templateObject;
 var primary = _theme.theme.colors.primary;
-var BreadcrumbLink = exports.BreadcrumbLink = _styledComponents["default"].a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    text-decoration: none;\n    color: ", ";\n\n    &:hover {\n        text-decoration: underline;\n    }\n"])), primary.main);
-var TextTypography = exports.TextTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        display: flex;\n    }\n"])));
+var BreadcrumbLink = exports.BreadcrumbLink = _styledComponents["default"].a(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    text-decoration: none;\n    color: ", ";\n\n    &:hover {\n        text-decoration: underline;\n    }\n"])), primary.main);

package/core/surfaces/card/index.js

@@ -9,6 +9,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _line = _interopRequireDefault(require("../../data-display/line"));
+var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _addButton = _interopRequireDefault(require("../../inputs/add-button"));
 var _paper = _interopRequireDefault(require("../paper"));
 var _mui = require("../../../icons/mui");
@@ -44,8 +45,9 @@ var Card = function Card(props) {
       display: 'flex',
       flexDirection: 'column'
     }
-  }), title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_styles.Header, null, title && /*#__PURE__*/_react["default"].createElement(_styles.Title, {
+  }), title && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_styles.Header, null, title && /*#__PURE__*/_react["default"].createElement(_typography["default"], {
     name: name + '-title',
+    flex: 1,
     variant: "h6",
     color: "primary"
   }, title), action, onRemove && !!renderRemove && /*#__PURE__*/_react["default"].createElement(_styles.CardButton, (0, _extends2["default"])({}, onRemoveProps, {

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

@@ -1,8 +1,3 @@
 export declare const Header: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const CardWrapper: 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<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" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
-    component?: 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>>;
 export declare const CardButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/inputs/icon-button").IconButtonProps, never>> & string & Omit<({ children, padding, margin, size, style, ...otherProps }: import("@/core/inputs/icon-button").IconButtonProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/surfaces/card/styles.js

@@ -4,13 +4,11 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.Header = exports.CardWrapper = exports.CardButton = void 0;
+exports.Header = exports.CardWrapper = exports.CardButton = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _iconButton = _interopRequireDefault(require("../../inputs/icon-button"));
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3;
 var Header = exports.Header = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));
 var CardWrapper = exports.CardWrapper = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    width: 100%;\n"])));
-var Title = exports.Title = (0, _styledComponents["default"])(_typography["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    flex: 1;\n"])));
-var CardButton = exports.CardButton = (0, _styledComponents["default"])(_iconButton["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 36px;\n        height: 36px;\n    }\n"])));
+var CardButton = exports.CardButton = (0, _styledComponents["default"])(_iconButton["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        width: 36px;\n        height: 36px;\n    }\n"])));

package/core/surfaces/panel/index.js

@@ -9,6 +9,7 @@ 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 _typography = _interopRequireDefault(require("../../data-display/typography"));
 var _mui = require("../../../icons/mui");
 var _styles = require("./styles");
 var _excluded = ["hideExpansionIcon", "expanded", "defaultExpanded", "id", "nested", "elevation", "hideSummary", "title", "summary", "details", "actions", "area", "style", "className", "detailsStyle", "onChange", "onClick"];
@@ -53,8 +54,9 @@ var Panel = function Panel(props) {
     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, {
+    summary: !hideSummary && /*#__PURE__*/_react["default"].createElement(_styles.Summary, null, title && /*#__PURE__*/_react["default"].createElement(_typography["default"], {
       noWrap: true,
+      flex: 1,
       variant: "subtitle1"
     }, title), summary),
     expandIcon: !hideExpansionIcon && /*#__PURE__*/_react["default"].createElement(_mui.IconExpandMore, {

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

@@ -1,7 +1,2 @@
 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<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" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & {
-    component?: 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,10 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Title = exports.Summary = exports.ExpansionPaperPanel = void 0;
+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 _templateObject, _templateObject2;
 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"])));
+var Summary = exports.Summary = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex: 1;\n    align-items: center;\n"])));

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

@@ -34,9 +34,9 @@ var StepsList = function StepsList(_ref) {
       }
     }), /*#__PURE__*/_react["default"].createElement(_typography["default"], {
       variant: "body1",
-      style: {
-        color: gray[700],
-        fontWeight: 600
+      fontWeight: 600,
+      sx: {
+        color: gray[700]
       }
     }, step.title), step.url && onStepUrlClick && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_iconButton["default"], {
       "data-testid": "step-card-button-".concat(index),

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

@@ -46,17 +46,17 @@ var StepCardPanel = exports.StepCardPanel = function StepCardPanel(props) {
       color: percentage === 100 ? feedback.success : gray[600]
     }
   }), /*#__PURE__*/_react["default"].createElement(_styles.TitleContainer, null, /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
-    variant: "h6",
-    style: {
-      color: gray[800],
-      fontSize: 24,
-      textAlign: 'center'
+    variant: "h5",
+    align: "center",
+    fontWeight: 500,
+    sx: {
+      color: gray[800]
     }
   }, titleProps), title), subTitle && /*#__PURE__*/_react["default"].createElement(_typography["default"], (0, _extends2["default"])({
     variant: "h6",
-    style: {
-      color: gray[600],
-      textAlign: 'center'
+    align: "center",
+    sx: {
+      color: gray[600]
     }
   }, titleProps), subTitle))), /*#__PURE__*/_react["default"].createElement(_styles.StepCardColumn, {
     justifyContent: "end"

package/icons/mui/index.d.ts

@@ -113,6 +113,7 @@ export { default as IconSearch } from '@mui/icons-material/Search';
 export { default as IconSentimentNeutral } from '@mui/icons-material/SentimentNeutral';
 export { default as IconSentimentSatisfied } from '@mui/icons-material/SentimentSatisfied';
 export { default as IconSentimentSatisfiedAlt } from '@mui/icons-material/SentimentSatisfiedAlt';
+export { default as IconSentimentDissatisfied } from '@mui/icons-material/SentimentDissatisfied';
 export { default as IconSentimentVeryDissatisfied } from '@mui/icons-material/SentimentVeryDissatisfied';
 export { default as IconSentimentVerySatisfied } from '@mui/icons-material/SentimentVerySatisfied';
 export { default as IconSensors } from '@mui/icons-material/Sensors';

package/icons/mui/index.js

@@ -682,6 +682,12 @@ Object.defineProperty(exports, "IconSensors", {
     return _Sensors["default"];
   }
 });
+Object.defineProperty(exports, "IconSentimentDissatisfied", {
+  enumerable: true,
+  get: function get() {
+    return _SentimentDissatisfied["default"];
+  }
+});
 Object.defineProperty(exports, "IconSentimentNeutral", {
   enumerable: true,
   get: function get() {
@@ -923,6 +929,7 @@ var _Search = _interopRequireDefault(require("@mui/icons-material/Search"));
 var _SentimentNeutral = _interopRequireDefault(require("@mui/icons-material/SentimentNeutral"));
 var _SentimentSatisfied = _interopRequireDefault(require("@mui/icons-material/SentimentSatisfied"));
 var _SentimentSatisfiedAlt = _interopRequireDefault(require("@mui/icons-material/SentimentSatisfiedAlt"));
+var _SentimentDissatisfied = _interopRequireDefault(require("@mui/icons-material/SentimentDissatisfied"));
 var _SentimentVeryDissatisfied = _interopRequireDefault(require("@mui/icons-material/SentimentVeryDissatisfied"));
 var _SentimentVerySatisfied = _interopRequireDefault(require("@mui/icons-material/SentimentVerySatisfied"));
 var _Sensors = _interopRequireDefault(require("@mui/icons-material/Sensors"));

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "flipper-ui",
-    "version": "0.35.2",
+    "version": "0.35.3",
     "description": "React UI based on the @mui/material toolkit for the web",
     "main": "dist/index.js",
     "author": "NG",
@@ -32,13 +32,13 @@
     "dependencies": {
         "@emotion/react": "11.14.0",
         "@emotion/styled": "11.14.0",
-        "@mui/icons-material": "6.2.0",
-        "@mui/material": "6.2.0",
-        "@mui/system": "6.2.0",
-        "@mui/x-date-pickers": "7.23.2",
+        "@mui/icons-material": "6.3.0",
+        "@mui/material": "6.3.0",
+        "@mui/system": "6.3.0",
+        "@mui/x-date-pickers": "7.23.3",
         "ramda": "0.30.1",
         "react-loading-skeleton": "3.5.0",
-        "react-number-format": "5.4.2"
+        "react-number-format": "5.4.3"
     },
     "devDependencies": {
         "@babel/cli": "7.26.4",
@@ -49,7 +49,7 @@
         "@babel/preset-typescript": "7.26.0",
         "@faker-js/faker": "9.3.0",
         "@storybook/addon-essentials": "8.4.7",
-        "@storybook/addon-webpack5-compiler-babel": "3.0.3",
+        "@storybook/addon-webpack5-compiler-babel": "3.0.5",
         "@storybook/blocks": "8.4.7",
         "@storybook/react": "8.4.7",
         "@storybook/react-webpack5": "8.4.7",
@@ -63,8 +63,8 @@
         "@types/ramda": "0.30.2",
         "@types/react": "18.3.12",
         "@types/uuid": "10.0.0",
-        "@typescript-eslint/eslint-plugin": "8.18.0",
-        "@typescript-eslint/parser": "8.18.0",
+        "@typescript-eslint/eslint-plugin": "8.19.0",
+        "@typescript-eslint/parser": "8.19.0",
         "babel-loader": "9.2.1",
         "babel-plugin-import": "1.13.8",
         "babel-plugin-module-resolver": "5.0.2",
@@ -74,7 +74,7 @@
         "eslint-import-resolver-typescript": "3.7.0",
         "eslint-plugin-import": "2.31.0",
         "eslint-plugin-prettier": "5.2.1",
-        "eslint-plugin-react": "7.37.2",
+        "eslint-plugin-react": "7.37.3",
         "eslint-plugin-react-hooks": "5.1.0",
         "fs-extra": "11.2.0",
         "identity-obj-proxy": "3.0.0",
@@ -88,7 +88,7 @@
         "ts-jest": "29.2.5",
         "ts-loader": "9.5.1",
         "typescript": "5.7.2",
-        "typescript-eslint": "8.18.0",
+        "typescript-eslint": "8.19.0",
         "uuid": "11.0.3",
         "webpack": "5.97.1"
     },

package/core/feedback/nothing-found/styles.d.ts

@@ -1,3 +0,0 @@
-export declare const TextTypography: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@mui/material/Typography").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" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping">, never>> & string & Omit<import("@mui/material/OverridableComponent").OverridableComponent<import("@mui/material/Typography").TypographyTypeMap<{}, "span">>, keyof import("react").Component<any, {}, any>>;

package/core/feedback/nothing-found/styles.js

@@ -1,12 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TextTypography = void 0;
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-var _Typography = _interopRequireDefault(require("@mui/material/Typography"));
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-var _templateObject;
-var TextTypography = exports.TextTypography = (0, _styledComponents["default"])(_Typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        flex: 1;\n    }\n"])));