flipper-ui 0.34.7 → 0.34.9

package/core/data-display/advertise/advertise.stories.d.ts

@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Advertise from '.';
-declare const _default: Meta<typeof Advertise>;
-export default _default;
-export declare const Default: any;
+declare const meta: Meta<typeof Advertise>;
+export default meta;
+type Story = StoryObj<typeof Advertise>;
+export declare const advertise: Story;

package/core/data-display/chapter/chapter.stories.d.ts

@@ -1,6 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Chapter from '.';
-declare const _default: Meta<typeof Chapter>;
-export default _default;
-export declare const Default: any;
-export declare const WithCustomStyle: any;
+declare const meta: Meta<typeof Chapter>;
+export default meta;
+type Story = StoryObj<typeof Chapter>;
+export declare const chapter: Story;

package/core/data-display/chip/chip.stories.d.ts

@@ -1,10 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Chip from '.';
-declare const _default: Meta<typeof Chip>;
-export default _default;
-export declare const Default: any;
-export declare const Squared: any;
-export declare const WithInitialsAvatar: any;
-export declare const WithIconAvatar: any;
-export declare const WithImageAvatar: any;
-export declare const SecondaryColor: any;
+declare const meta: Meta<typeof Chip>;
+export default meta;
+type Story = StoryObj<typeof Chip>;
+export declare const chip: Story;

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

@@ -8,22 +8,11 @@ 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 _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _Chip = _interopRequireDefault(require("@mui/material/Chip"));
 var _excluded = ["square", "padding", "margin", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return {
-    root: {
-      borderRadius: '4px'
-    },
-    avatar: {
-      borderRadius: '2px'
-    }
-  };
-});
 var Chip = function Chip(_ref) {
   var square = _ref.square,
     padding = _ref.padding,
@@ -31,13 +20,17 @@ var Chip = function Chip(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useStyles();
   return /*#__PURE__*/_react["default"].createElement(_Chip["default"], (0, _extends2["default"])({
-    classes: square ? classes : undefined,
     style: _objectSpread({
       padding: padding,
       margin: margin
-    }, style)
+    }, style),
+    sx: {
+      borderRadius: square ? '4px' : '16px',
+      '.MuiChip-avatar': {
+        borderRadius: square ? '4px' : '16px'
+      }
+    }
   }, otherProps));
 };
 var _default = exports["default"] = Chip;

package/core/data-display/data-table/data-table-field.js

@@ -121,7 +121,7 @@ var DataTableField = exports.DataTableField = function DataTableField(props) {
   };
   return /*#__PURE__*/_react["default"].createElement(_Table["default"], {
     "data-testid": "data-table-field"
-  }, /*#__PURE__*/_react["default"].createElement(_TableHead["default"], null, checkbox && /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
+  }, /*#__PURE__*/_react["default"].createElement(_TableHead["default"], null, /*#__PURE__*/_react["default"].createElement(_styles.RowTable, null, checkbox && /*#__PURE__*/_react["default"].createElement(_TableCell["default"], {
     padding: "checkbox"
   }, /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
     color: "primary",
@@ -136,6 +136,6 @@ var DataTableField = exports.DataTableField = function DataTableField(props) {
       key: i,
       align: "center"
     }, item.title);
-  })), /*#__PURE__*/_react["default"].createElement(_TableBody["default"], null, tableBody(rows, header)));
+  }))), /*#__PURE__*/_react["default"].createElement(_TableBody["default"], null, tableBody(rows, header)));
 };
 var _default = exports["default"] = DataTableField;

package/core/data-display/data-table/data-table-query-paginated.stories.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
 import { DataTableQueryPaginated } from './data-table-query-paginated';
-declare const _default: Meta<typeof DataTableQueryPaginated>;
-export default _default;
+declare const meta: Meta<typeof DataTableQueryPaginated>;
+export default meta;
 export declare const Default: () => React.JSX.Element;
 export declare const Empty: () => React.JSX.Element;
 export declare const NoHeader: () => React.JSX.Element;

package/core/data-display/data-table/data-table.js

@@ -274,11 +274,13 @@ var DataTable = exports.DataTable = function DataTable(props) {
     rowsPerPage: rowsPerPage,
     labelRowsPerPage: hideSelect ? '' : pagination.labelRowsPerPage,
     labelDisplayedRows: pagination.labelDisplayedRows,
-    SelectProps: hideSelect ? {
-      style: {
-        display: 'none'
+    slotProps: {
+      select: {
+        style: hideSelect ? {
+          display: 'none'
+        } : {}
       }
-    } : {},
+    },
     ActionsComponent: paginationActionsComponent,
     onPageChange: function onPageChange(_, page) {
       setPage(page);

package/core/data-display/data-table/data-table.stories.d.ts

@@ -1,8 +1,8 @@
 import React from 'react';
 import type { Meta } from '@storybook/react';
 import { default as DataTable } from './data-table';
-declare const _default: Meta<typeof DataTable>;
-export default _default;
+declare const meta: Meta<typeof DataTable>;
+export default meta;
 export declare const Default: () => React.JSX.Element;
 export declare const Custom: () => React.JSX.Element;
 export declare const Empty: () => React.JSX.Element;

package/core/data-display/fab/fab.stories.d.ts

@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Fab from '.';
-declare const _default: Meta<typeof Fab>;
-export default _default;
-export declare const Default: any;
+declare const meta: Meta<typeof Fab>;
+export default meta;
+type Story = StoryObj<typeof Fab>;
+export declare const fab: Story;

package/core/data-display/fab/index.d.ts

@@ -4,7 +4,7 @@ import type { DefaultProps } from '../../types';
 import type { FabProps } from '@mui/material/Fab';
 export interface IFabProps extends DefaultProps, FabProps {
     onClick?: (event?: MouseEvent<HTMLElement>) => void;
-    children: ReactElement<Record<string, unknown>>;
+    children: ReactElement<Record<string, unknown>> | string;
 }
 declare const Fab: ({ children, margin, padding, style, ...otherProps }: IFabProps) => React.JSX.Element;
 export default Fab;

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

@@ -8,21 +8,13 @@ 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 _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _Fab = _interopRequireDefault(require("@mui/material/Fab"));
+var _theme = require("../../../theme");
 var _excluded = ["children", "margin", "padding", "style"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return {
-    root: {
-      '&:hover': {
-        backgroundColor: '#d5d5d5'
-      }
-    }
-  };
-});
+var gray = _theme.theme.colors.gray;
 var Fab = function Fab(_ref) {
   var children = _ref.children,
     margin = _ref.margin,
@@ -30,14 +22,17 @@ var Fab = function Fab(_ref) {
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useStyles();
   return /*#__PURE__*/_react["default"].createElement(_Fab["default"], (0, _extends2["default"])({}, otherProps, {
     color: "inherit",
-    classes: classes,
     style: _objectSpread({
       margin: margin,
       padding: padding
-    }, style)
+    }, style),
+    sx: {
+      '&:hover': {
+        backgroundColor: "".concat(gray[500], "80")
+      }
+    }
   }), children);
 };
 var _default = exports["default"] = Fab;

package/core/data-display/list/index.d.ts

@@ -5,5 +5,5 @@ export interface ListProps extends DefaultProps {
     dense?: boolean;
     color?: 'default' | 'inherit';
 }
-declare const List: ({ title, padding, margin, style, color, className, children, ...otherProps }: ListProps) => React.JSX.Element;
+declare const List: ({ title, padding, margin, style, children, ...otherProps }: ListProps) => React.JSX.Element;
 export default List;

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

@@ -8,48 +8,35 @@ 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 _createStyles2 = _interopRequireDefault(require("@mui/styles/createStyles"));
-var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _List = _interopRequireDefault(require("@mui/material/List"));
 var _ListSubheader = _interopRequireDefault(require("@mui/material/ListSubheader"));
 var _theme = require("../../../theme");
-var _excluded = ["title", "padding", "margin", "style", "color", "className", "children"];
+var _excluded = ["title", "padding", "margin", "style", "children"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var neutral = _theme.theme.colors.neutral;
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return (0, _createStyles2["default"])({
-    "default": {
-      backgroundColor: neutral[100]
-    },
-    inherit: {
-      backgroundColor: 'inherit',
-      color: 'inherit'
-    }
-  });
-});
 var List = function List(_ref) {
   var title = _ref.title,
     padding = _ref.padding,
     margin = _ref.margin,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
-    _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'default' : _ref$color,
-    className = _ref.className,
     children = _ref.children,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useStyles();
   return /*#__PURE__*/_react["default"].createElement(_List["default"], (0, _extends2["default"])({
     subheader: title && /*#__PURE__*/_react["default"].createElement(_ListSubheader["default"], {
-      className: classes[color]
+      sx: {
+        backgroundColor: neutral[100]
+      }
     }, title),
-    className: "".concat(classes[color], " ").concat(className),
     style: _objectSpread({
       padding: padding,
       margin: margin
-    }, style)
+    }, style),
+    sx: {
+      backgroundColor: neutral[100]
+    }
   }, otherProps), children);
 };
 var _default = exports["default"] = List;

package/core/data-display/list/list.stories.d.ts

@@ -1,7 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import List from '.';
-declare const _default: Meta<typeof List>;
-export default _default;
-export declare const Default: any;
-export declare const WithIcons: any;
-export declare const WithAvatar: any;
+declare const meta: Meta<typeof List>;
+export default meta;
+type Story = StoryObj<typeof List>;
+export declare const list: Story;

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

@@ -6,65 +6,57 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
+var _ListItem = _interopRequireDefault(require("@mui/material/ListItem"));
 var _ListItemAvatar = _interopRequireDefault(require("@mui/material/ListItemAvatar"));
 var _ListItemButton = _interopRequireDefault(require("@mui/material/ListItemButton"));
 var _ListItemIcon = _interopRequireDefault(require("@mui/material/ListItemIcon"));
-var _ListItemSecondaryAction = _interopRequireDefault(require("@mui/material/ListItemSecondaryAction"));
 var _ListItemText = _interopRequireDefault(require("@mui/material/ListItemText"));
 var _MenuItem = _interopRequireDefault(require("@mui/material/MenuItem"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return {
-    root: {
-      color: 'inherit',
-      minHeight: '48px'
-    },
-    "default": {
-      color: 'inherit'
-    }
-  };
-});
 var ListItem = function ListItem(props) {
   var padding = props.padding,
     margin = props.margin,
     style = props.style;
-  var classes = useStyles();
-  var className = props.className;
   var renderCustomItem = function renderCustomItem() {
     var minWidth = props.title || props.subtitle ? '42px' : '0px';
-    var className = classes["default"];
-    var typographyProps = {
-      className: className
-    };
     return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, props.avatar && /*#__PURE__*/_react["default"].createElement(_ListItemAvatar["default"], null, props.avatar), props.icon && /*#__PURE__*/_react["default"].createElement(_ListItemIcon["default"], {
-      className: className,
       style: {
         minWidth: minWidth
+      },
+      sx: {
+        color: 'inherit'
       }
     }, props.icon), (props.title || props.subtitle) && /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
       primary: props.title,
       secondary: props.subtitle,
-      primaryTypographyProps: typographyProps,
-      secondaryTypographyProps: typographyProps,
-      "data-testid": "list-item-".concat(props.subtitle),
-      style: props.action ? {
-        marginRight: '36px'
-      } : {}
-    }), props.action && /*#__PURE__*/_react["default"].createElement(_ListItemSecondaryAction["default"], {
-      className: className
-    }, props.action));
+      primaryTypographyProps: {
+        color: 'inherit'
+      },
+      secondaryTypographyProps: {
+        color: 'inherit'
+      },
+      "data-testid": "list-item-".concat(props.subtitle)
+    }), props.action && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+      secondaryAction: props.action,
+      sx: {
+        width: 'auto',
+        color: 'inherit',
+        position: 'initial',
+        paddingRight: '26px'
+      }
+    }));
   };
   return props.children ? /*#__PURE__*/_react["default"].createElement(_MenuItem["default"], {
     id: props.id,
     value: props.value,
-    className: className,
     selected: props.selected,
     disabled: props.disabled,
-    classes: {
-      root: classes.root
+    className: props.className,
+    sx: {
+      color: 'inherit',
+      minHeight: '48px'
     },
     style: _objectSpread({
       padding: padding,
@@ -73,11 +65,12 @@ var ListItem = function ListItem(props) {
     onClick: props.onClick
   }, props.children) : /*#__PURE__*/_react["default"].createElement(_ListItemButton["default"], {
     id: props.id,
-    className: className,
     selected: props.selected,
     disabled: props.disabled,
-    classes: {
-      root: classes.root
+    className: props.className,
+    sx: {
+      color: 'inherit',
+      minHeight: '48px'
     },
     style: _objectSpread({
       padding: padding,

package/core/data-display/table/table.stories.d.ts

@@ -1,5 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Table from '.';
-declare const _default: Meta<typeof Table>;
-export default _default;
-export declare const Default: any;
+declare const meta: Meta<typeof Table>;
+export default meta;
+type Story = StoryObj<typeof Table>;
+export declare const table: Story;

package/core/data-display/typography/typography.stories.d.ts

@@ -1,22 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Typography from '.';
-declare const _default: Meta<typeof Typography>;
-export default _default;
-export declare const Default: any;
-export declare const ErrorText: any;
-export declare const Primary: any;
-export declare const Secondary: any;
-export declare const TextPrimary: any;
-export declare const TextSecondary: any;
-export declare const Button: any;
-export declare const Caption: any;
-export declare const Body1: any;
-export declare const Body2: any;
-export declare const Subtitle1: any;
-export declare const Subtitle2: any;
-export declare const h1: any;
-export declare const h2: any;
-export declare const h3: any;
-export declare const h4: any;
-export declare const h5: any;
-export declare const h6: any;
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+export declare const typography: Story;

package/core/feedback/dialog/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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _Dialog = _interopRequireDefault(require("@mui/material/Dialog"));
 var _DialogActions = _interopRequireDefault(require("@mui/material/DialogActions"));
@@ -19,11 +18,6 @@ var _styles = require("./styles");
 var _excluded = ["snippet", "style", "padding", "margin", "scroll", "PaperProps", "open", "fullScreen", "fullWidth", "maxWidth", "onClose", "titleAction", "titleWrapperStyle", "titleStyle", "titleActionStyle", "contentStyle", "contentTextStyle", "actionsStyle", "actions", "content", "text", "title", "snippetStyle", "snippetContentStyle", "aria-title"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useStyles = (0, _makeStyles2["default"])({
-  root: {
-    overflowY: 'unset'
-  }
-});
 var Dialog = function Dialog(_ref) {
   var snippet = _ref.snippet,
     style = _ref.style,
@@ -51,7 +45,6 @@ var Dialog = function Dialog(_ref) {
     snippetContentStyle = _ref.snippetContentStyle,
     ariaTitle = _ref['aria-title'],
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useStyles();
   var renderTitle = function renderTitle(title) {
     return titleAction ? /*#__PURE__*/_react["default"].createElement(_styles.TitleWrapper, {
       style: titleWrapperStyle
@@ -103,13 +96,13 @@ var Dialog = function Dialog(_ref) {
       padding: padding,
       margin: margin
     }, style),
-    PaperProps: _objectSpread(_objectSpread({}, ariaTitle ? {
-      title: ariaTitle
-    } : {}), {}, {
-      classes: {
-        root: classes.root
+    PaperProps: _objectSpread(_objectSpread({
+      sx: {
+        overflowY: 'unset'
       }
-    }, PaperProps),
+    }, ariaTitle ? {
+      title: ariaTitle
+    } : {}), PaperProps),
     onClose: onClose
   }), snippet ? renderSnippet() : renderPaperContent());
 };

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

@@ -2,15 +2,8 @@ import React from 'react';
 import type { DefaultProps } from '../../types';
 export interface ILinear {
     color?: 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning' | 'inherit';
-    classes?: {
-        root?: string;
-        colorPrimary?: string;
-        barColorPrimary?: string;
-        barColorSecondary?: string;
-    };
     variant?: 'buffer' | 'determinate' | 'indeterminate' | 'query';
     valueBuffer?: number;
-    rootColor?: string;
     primaryColor?: string;
     barPrimaryColor?: string;
     barSecondaryColor?: string;
@@ -25,10 +18,9 @@ export interface ProgressProps extends DefaultProps {
     linear?: boolean;
 }
 export interface IColors {
-    rootColor?: string;
     primaryColor?: string;
     barPrimaryColor?: string;
     barSecondaryColor?: string;
 }
-declare const Progress: ({ linear, style, margin, padding, rootColor, primaryColor, barPrimaryColor, barSecondaryColor, ...otherProps }: ProgressProps & ICircular & ILinear) => React.JSX.Element;
+declare const Progress: ({ linear, style, margin, padding, primaryColor, barPrimaryColor, barSecondaryColor, ...otherProps }: ProgressProps & ICircular & ILinear) => React.JSX.Element;
 export default Progress;

package/core/feedback/progress/index.js

@@ -8,64 +8,35 @@ 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 _makeStyles2 = _interopRequireDefault(require("@mui/styles/makeStyles"));
 var _react = _interopRequireDefault(require("react"));
 var _CircularProgress = _interopRequireDefault(require("@mui/material/CircularProgress"));
 var _LinearProgress = _interopRequireDefault(require("@mui/material/LinearProgress"));
-var _excluded = ["linear", "style", "margin", "padding", "rootColor", "primaryColor", "barPrimaryColor", "barSecondaryColor"];
+var _excluded = ["linear", "style", "margin", "padding", "primaryColor", "barPrimaryColor", "barSecondaryColor"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return {
-    root: function root(props) {
-      return {
-        backgroundColor: props.rootColor
-      };
-    },
-    colorPrimary: function colorPrimary(props) {
-      return {
-        backgroundColor: props.primaryColor
-      };
-    },
-    barColorPrimary: function barColorPrimary(props) {
-      return {
-        backgroundColor: props.barPrimaryColor
-      };
-    },
-    barColorSecondary: function barColorSecondary(props) {
-      return {
-        backgroundColor: props.barSecondaryColor
-      };
-    }
-  };
-});
 var Progress = function Progress(_ref) {
   var linear = _ref.linear,
     _ref$style = _ref.style,
     style = _ref$style === void 0 ? {} : _ref$style,
     margin = _ref.margin,
     padding = _ref.padding,
-    rootColor = _ref.rootColor,
     primaryColor = _ref.primaryColor,
     barPrimaryColor = _ref.barPrimaryColor,
     barSecondaryColor = _ref.barSecondaryColor,
     otherProps = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var classes = useStyles({
-    rootColor: rootColor,
-    primaryColor: primaryColor,
-    barPrimaryColor: barPrimaryColor,
-    barSecondaryColor: barSecondaryColor
-  });
   return linear ? /*#__PURE__*/_react["default"].createElement(_LinearProgress["default"], (0, _extends2["default"])({
     style: _objectSpread({
       margin: margin,
       padding: padding
     }, style),
-    classes: {
-      root: classes.root,
-      colorPrimary: classes.colorPrimary,
-      barColorPrimary: classes.barColorPrimary,
-      barColorSecondary: classes.barColorSecondary
+    sx: {
+      backgroundColor: primaryColor,
+      '.MuiLinearProgress-barColorPrimary': {
+        backgroundColor: barPrimaryColor
+      },
+      '.MuiLinearProgress-barColorSecondary': {
+        backgroundColor: barSecondaryColor
+      }
     }
   }, otherProps)) : /*#__PURE__*/_react["default"].createElement(_CircularProgress["default"], (0, _extends2["default"])({
     style: _objectSpread({

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

@@ -1,14 +1,7 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Progress from '.';
-declare const _default: Meta<typeof Progress>;
-export default _default;
-export declare const Default: any;
-export declare const Primary: any;
-export declare const Secondary: any;
-export declare const Inherit: any;
-export declare const Linear: any;
-export declare const LinearSecondary: any;
-export declare const LinearBuffer: any;
-export declare const LinearQuery: any;
-export declare const LinearQuerySecondary: any;
-export declare const LinearWithCustom: any;
+declare const meta: Meta<typeof Progress>;
+export default meta;
+type Story = StoryObj<typeof Progress>;
+export declare const progress: Story;
+export declare const progressCustom: Story;

package/core/feedback/skeleton/skeleton.stories.d.ts

@@ -1,7 +1,6 @@
-import type { Meta } from '@storybook/react';
+import type { Meta, StoryObj } from '@storybook/react';
 import Skeleton from '.';
-declare const _default: Meta<typeof Skeleton>;
-export default _default;
-export declare const Default: any;
-export declare const WithCustomHeight: any;
-export declare const Circle: any;
+declare const meta: Meta<typeof Skeleton>;
+export default meta;
+type Story = StoryObj<typeof Skeleton>;
+export declare const skeleton: Story;