flipper-ui 0.34.6 → 0.34.8

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/advertise/styles.d.ts

@@ -1,6 +1,6 @@
 export declare const AdvertiseTypography: 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?: import("react").ElementType;
+    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 AdvertiseContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@/core/surfaces/paper").IPaperProps, never>> & string & Omit<({ children, style, padding, margin, ...otherProps }: import("@/core/surfaces/paper").IPaperProps) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/core/data-display/advertise/styles.js

@@ -11,6 +11,6 @@ var _typography = _interopRequireDefault(require("../typography"));
 var _paper = _interopRequireDefault(require("../../surfaces/paper"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2;
-var grays = _theme.theme.colors.grays;
-var AdvertiseTypography = exports.AdvertiseTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), grays.g5);
+var gray = _theme.theme.colors.gray;
+var AdvertiseTypography = exports.AdvertiseTypography = (0, _styledComponents["default"])(_typography["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    && {\n        border-left: 1px solid ", ";\n    }\n"])), gray[400]);
 var AdvertiseContainer = exports.AdvertiseContainer = (0, _styledComponents["default"])(_paper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n    flex-direction: column;\n"])));

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/chapter/styles.js

@@ -9,8 +9,8 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 var _theme = require("../../../theme");
 var _templateObject, _templateObject2;
-var grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var Line = exports.Line = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n    height: 1px;\n    flex: 1;\n    min-height: 0.75px;\n    max-height: 3px;\n    align-self: center;\n    background-color: ", ";\n"])), function (props) {
-  return props.primary ? grays.g4 : grays.g6;
+  return props.primary ? gray[500] : gray[300];
 });
 var Container = exports.Container = _styledComponents["default"].div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n    display: flex;\n"])));

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/line/index.js

@@ -14,7 +14,7 @@ var _excluded = ["padding", "margin", "style", "primary"];
 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 _theme$colors = _theme.theme.colors,
-  grays = _theme$colors.grays,
+  gray = _theme$colors.gray,
   secondary = _theme$colors.secondary;
 var Line = function Line(_ref) {
   var padding = _ref.padding,
@@ -27,7 +27,7 @@ var Line = function Line(_ref) {
       flex: 1,
       padding: padding,
       margin: margin,
-      border: "1px solid ".concat(primary ? secondary.light : grays.g6)
+      border: "1px solid ".concat(primary ? secondary.light : gray[300])
     }, style)
   }, otherProps));
 };

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 app = _theme.theme.colors.app;
-var useStyles = (0, _makeStyles2["default"])(function () {
-  return (0, _createStyles2["default"])({
-    "default": {
-      backgroundColor: app.background.main
-    },
-    inherit: {
-      backgroundColor: 'inherit',
-      color: 'inherit'
-    }
-  });
-});
+var neutral = _theme.theme.colors.neutral;
 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/index.js

@@ -14,7 +14,7 @@ var _theme = require("../../../theme");
 var _excluded = ["style", "margin", "padding", "spacing", "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 grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var Table = function Table(_ref) {
   var style = _ref.style,
     margin = _ref.margin,
@@ -25,7 +25,7 @@ var Table = function Table(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_Table["default"], (0, _extends2["default"])({}, otherProps, {
     padding: spacing,
     style: _objectSpread({
-      border: "1px solid ".concat(grays.g6),
+      border: "1px solid ".concat(gray[300]),
       padding: padding,
       margin: margin
     }, style)

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

@@ -11,7 +11,7 @@ var _TableFooter = _interopRequireDefault(require("@mui/material/TableFooter"));
 var _theme = require("../../../theme");
 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 grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var TableFooter = function TableFooter(_ref) {
   var style = _ref.style,
     margin = _ref.margin,
@@ -19,7 +19,7 @@ var TableFooter = function TableFooter(_ref) {
     children = _ref.children;
   return /*#__PURE__*/_react["default"].createElement(_TableFooter["default"], {
     style: _objectSpread({
-      borderColor: grays.g7,
+      borderColor: gray[200],
       margin: margin,
       padding: padding
     }, style)

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

@@ -14,7 +14,7 @@ var _theme = require("../../../theme");
 var _excluded = ["count", "page", "rowsPerPage", "rowsPerPageOptions", "onPageChange", "onRowsPerPageChange", "style", "padding"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
-var grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var TablePagination = function TablePagination(_ref) {
   var count = _ref.count,
     page = _ref.page,
@@ -38,11 +38,11 @@ var TablePagination = function TablePagination(_ref) {
       return "".concat(from, "-").concat(to, " de ").concat(count !== -1 ? count : "mais que ".concat(to));
     },
     style: _objectSpread({
-      borderColor: grays.g7,
+      borderColor: gray[200],
       padding: padding
     }, style),
     sx: {
-      borderBottom: "1px solid ".concat(grays.g7, " !important;")
+      borderBottom: "1px solid ".concat(gray[200], " !important;")
     },
     onPageChange: onPageChange,
     onRowsPerPageChange: onRowsPerPageChange

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

@@ -14,7 +14,7 @@ var _theme = require("../../../theme");
 var _excluded = ["style", "margin", "padding", "children", "background"];
 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 grays = _theme.theme.colors.grays;
+var gray = _theme.theme.colors.gray;
 var TableRow = function TableRow(_ref) {
   var style = _ref.style,
     margin = _ref.margin,
@@ -25,7 +25,7 @@ var TableRow = function TableRow(_ref) {
   return /*#__PURE__*/_react["default"].createElement(_TableRow["default"], (0, _extends2["default"])({}, otherProps, {
     style: _objectSpread({
       background: background,
-      borderColor: grays.g7,
+      borderColor: gray[200],
       margin: margin,
       padding: padding
     }, style)

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;