@vodafone_de/brix-components 3.1.6 → 3.1.7

package/styles/props.d.ts

@@ -0,0 +1,241 @@
+import { AlertProps } from "../Alert/index.js";
+import { AlertTitleProps } from "../AlertTitle/index.js";
+import { AppBarProps } from "../AppBar/index.js";
+import { AutocompleteProps } from "../Autocomplete/index.js";
+import { AvatarProps } from "../Avatar/index.js";
+import { AvatarGroupProps } from "../AvatarGroup/index.js";
+import { BackdropProps } from "../Backdrop/index.js";
+import { BadgeProps } from "../Badge/index.js";
+import { BottomNavigationActionProps } from "../BottomNavigationAction/index.js";
+import { BottomNavigationProps } from "../BottomNavigation/index.js";
+import { BreadcrumbsProps } from "../Breadcrumbs/index.js";
+import { ButtonBaseProps } from "../ButtonBase/index.js";
+import { ButtonGroupProps } from "../ButtonGroup/index.js";
+import { ButtonProps } from "../Button/index.js";
+import { CardActionAreaProps } from "../CardActionArea/index.js";
+import { CardActionsProps } from "../CardActions/index.js";
+import { CardContentProps } from "../CardContent/index.js";
+import { CardHeaderProps } from "../CardHeader/index.js";
+import { CardMediaProps } from "../CardMedia/index.js";
+import { CardProps } from "../Card/index.js";
+import { CheckboxProps } from "../Checkbox/index.js";
+import { ChipProps } from "../Chip/index.js";
+import { CircularProgressProps } from "../CircularProgress/index.js";
+import { CollapseProps } from "../Collapse/index.js";
+import { ContainerProps } from "../Container/index.js";
+import { CssBaselineProps } from "../CssBaseline/index.js";
+import { DialogActionsProps } from "../DialogActions/index.js";
+import { DialogContentProps } from "../DialogContent/index.js";
+import { DialogContentTextProps } from "../DialogContentText/index.js";
+import { DialogProps } from "../Dialog/index.js";
+import { DialogTitleProps } from "../DialogTitle/index.js";
+import { DividerProps } from "../Divider/index.js";
+import { DrawerProps } from "../Drawer/index.js";
+import { AccordionActionsProps } from "../AccordionActions/index.js";
+import { AccordionDetailsProps } from "../AccordionDetails/index.js";
+import { AccordionProps } from "../Accordion/index.js";
+import { AccordionSummaryProps } from "../AccordionSummary/index.js";
+import { FabProps } from "../Fab/index.js";
+import { FilledInputProps } from "../FilledInput/index.js";
+import { FormControlLabelProps } from "../FormControlLabel/index.js";
+import { FormControlProps } from "../FormControl/index.js";
+import { FormGroupProps } from "../FormGroup/index.js";
+import { FormHelperTextProps } from "../FormHelperText/index.js";
+import { FormLabelProps } from "../FormLabel/index.js";
+import { GridLegacyProps } from "../GridLegacy/index.js";
+import { GridProps } from "../Grid/index.js";
+import { IconButtonProps } from "../IconButton/index.js";
+import { IconProps } from "../Icon/index.js";
+import { ImageListProps } from "../ImageList/index.js";
+import { ImageListItemBarProps } from "../ImageListItemBar/index.js";
+import { ImageListItemProps } from "../ImageListItem/index.js";
+import { InputAdornmentProps } from "../InputAdornment/index.js";
+import { InputBaseProps } from "../InputBase/index.js";
+import { InputLabelProps } from "../InputLabel/index.js";
+import { InputProps } from "../Input/index.js";
+import { LinearProgressProps } from "../LinearProgress/index.js";
+import { LinkProps } from "../Link/index.js";
+import { ListItemAvatarProps } from "../ListItemAvatar/index.js";
+import { ListItemIconProps } from "../ListItemIcon/index.js";
+import { ListItemProps } from "../ListItem/index.js";
+import { ListItemButtonProps } from "../ListItemButton/index.js";
+import { ListItemSecondaryActionProps } from "../ListItemSecondaryAction/index.js";
+import { ListItemTextProps } from "../ListItemText/index.js";
+import { ListProps } from "../List/index.js";
+import { ListSubheaderProps } from "../ListSubheader/index.js";
+import { MenuItemProps } from "../MenuItem/index.js";
+import { MenuListProps } from "../MenuList/index.js";
+import { MenuProps } from "../Menu/index.js";
+import { MobileStepperProps } from "../MobileStepper/index.js";
+import { ModalProps } from "../Modal/index.js";
+import { NativeSelectProps } from "../NativeSelect/index.js";
+import { UseMediaQueryOptions } from "../useMediaQuery/index.js";
+import { OutlinedInputProps } from "../OutlinedInput/index.js";
+import { PaginationProps } from "../Pagination/index.js";
+import { PaginationItemProps } from "../PaginationItem/index.js";
+import { PaperProps } from "../Paper/index.js";
+import { PopoverProps } from "../Popover/index.js";
+import { RadioGroupProps } from "../RadioGroup/index.js";
+import { RadioProps } from "../Radio/index.js";
+import { RatingProps } from "../Rating/index.js";
+import { ScopedCssBaselineProps } from "../ScopedCssBaseline/index.js";
+import { SelectProps } from "../Select/index.js";
+import { SkeletonProps } from "../Skeleton/index.js";
+import { SliderProps } from "../Slider/index.js";
+import { SnackbarContentProps } from "../SnackbarContent/index.js";
+import { SnackbarProps } from "../Snackbar/index.js";
+import { SpeedDialProps } from "../SpeedDial/index.js";
+import { SpeedDialActionProps } from "../SpeedDialAction/index.js";
+import { SpeedDialIconProps } from "../SpeedDialIcon/index.js";
+import { StackProps } from "../Stack/index.js";
+import { StepButtonProps } from "../StepButton/index.js";
+import { StepConnectorProps } from "../StepConnector/index.js";
+import { StepContentProps } from "../StepContent/index.js";
+import { StepIconProps } from "../StepIcon/index.js";
+import { StepLabelProps } from "../StepLabel/index.js";
+import { StepperProps } from "../Stepper/index.js";
+import { StepProps } from "../Step/index.js";
+import { SvgIconProps } from "../SvgIcon/index.js";
+import { SwipeableDrawerProps } from "../SwipeableDrawer/index.js";
+import { SwitchProps } from "../Switch/index.js";
+import { TableBodyProps } from "../TableBody/index.js";
+import { TableCellProps } from "../TableCell/index.js";
+import { TableContainerProps } from "../TableContainer/index.js";
+import { TableHeadProps } from "../TableHead/index.js";
+import { TablePaginationProps } from "../TablePagination/index.js";
+import { TableProps } from "../Table/index.js";
+import { TableRowProps } from "../TableRow/index.js";
+import { TableSortLabelProps } from "../TableSortLabel/index.js";
+import { TableFooterProps } from "../TableFooter/index.js";
+import { TabProps } from "../Tab/index.js";
+import { TabsProps } from "../Tabs/index.js";
+import { TextFieldProps } from "../TextField/index.js";
+import { ToggleButtonProps } from "../ToggleButton/index.js";
+import { ToggleButtonGroupProps } from "../ToggleButtonGroup/index.js";
+import { ToolbarProps } from "../Toolbar/index.js";
+import { TooltipProps } from "../Tooltip/index.js";
+import { TouchRippleProps } from "../ButtonBase/TouchRipple.js";
+import { TypographyProps } from "../Typography/index.js";
+import { PopperProps } from "../Popper/index.js";
+export type ComponentsProps = { [Name in keyof ComponentsPropsList]?: Partial<ComponentsPropsList[Name]> };
+export interface ComponentsPropsList {
+  MuiAlert: AlertProps;
+  MuiAlertTitle: AlertTitleProps;
+  MuiAppBar: AppBarProps;
+  MuiAutocomplete: AutocompleteProps<any, any, any, any>;
+  MuiAvatar: AvatarProps;
+  MuiAvatarGroup: AvatarGroupProps;
+  MuiBackdrop: BackdropProps;
+  MuiBadge: BadgeProps;
+  MuiBottomNavigation: BottomNavigationProps;
+  MuiBottomNavigationAction: BottomNavigationActionProps;
+  MuiBreadcrumbs: BreadcrumbsProps;
+  MuiButton: ButtonProps;
+  MuiButtonBase: ButtonBaseProps;
+  MuiButtonGroup: ButtonGroupProps;
+  MuiCard: CardProps;
+  MuiCardActionArea: CardActionAreaProps;
+  MuiCardActions: CardActionsProps;
+  MuiCardContent: CardContentProps;
+  MuiCardHeader: CardHeaderProps;
+  MuiCardMedia: CardMediaProps;
+  MuiCheckbox: CheckboxProps;
+  MuiChip: ChipProps;
+  MuiCircularProgress: CircularProgressProps;
+  MuiCollapse: CollapseProps;
+  MuiContainer: ContainerProps;
+  MuiCssBaseline: CssBaselineProps;
+  MuiDialog: DialogProps;
+  MuiDialogActions: DialogActionsProps;
+  MuiDialogContent: DialogContentProps;
+  MuiDialogContentText: DialogContentTextProps;
+  MuiDialogTitle: DialogTitleProps;
+  MuiDivider: DividerProps;
+  MuiDrawer: DrawerProps;
+  MuiAccordion: AccordionProps;
+  MuiAccordionActions: AccordionActionsProps;
+  MuiAccordionDetails: AccordionDetailsProps;
+  MuiAccordionSummary: AccordionSummaryProps;
+  MuiFab: FabProps;
+  MuiFilledInput: FilledInputProps;
+  MuiFormControl: FormControlProps;
+  MuiFormControlLabel: FormControlLabelProps;
+  MuiFormGroup: FormGroupProps;
+  MuiFormHelperText: FormHelperTextProps;
+  MuiFormLabel: FormLabelProps;
+  MuiGridLegacy: GridLegacyProps;
+  MuiGrid: GridProps;
+  MuiImageList: ImageListProps;
+  MuiImageListItem: ImageListItemProps;
+  MuiImageListItemBar: ImageListItemBarProps;
+  MuiIcon: IconProps;
+  MuiIconButton: IconButtonProps;
+  MuiInput: InputProps;
+  MuiInputAdornment: InputAdornmentProps;
+  MuiInputBase: InputBaseProps;
+  MuiInputLabel: InputLabelProps;
+  MuiLinearProgress: LinearProgressProps;
+  MuiLink: LinkProps;
+  MuiList: ListProps;
+  MuiListItem: ListItemProps;
+  MuiListItemButton: ListItemButtonProps;
+  MuiListItemAvatar: ListItemAvatarProps;
+  MuiListItemIcon: ListItemIconProps;
+  MuiListItemSecondaryAction: ListItemSecondaryActionProps;
+  MuiListItemText: ListItemTextProps;
+  MuiListSubheader: ListSubheaderProps;
+  MuiMenu: MenuProps;
+  MuiMenuItem: MenuItemProps;
+  MuiMenuList: MenuListProps;
+  MuiMobileStepper: MobileStepperProps;
+  MuiModal: ModalProps;
+  MuiNativeSelect: NativeSelectProps;
+  MuiOutlinedInput: OutlinedInputProps;
+  MuiPagination: PaginationProps;
+  MuiPaginationItem: PaginationItemProps;
+  MuiPaper: PaperProps;
+  MuiPopper: PopperProps;
+  MuiPopover: PopoverProps;
+  MuiRadio: RadioProps;
+  MuiRadioGroup: RadioGroupProps;
+  MuiRating: RatingProps;
+  MuiScopedCssBaseline: ScopedCssBaselineProps;
+  MuiSelect: SelectProps;
+  MuiSkeleton: SkeletonProps;
+  MuiSlider: SliderProps;
+  MuiSnackbar: SnackbarProps;
+  MuiSnackbarContent: SnackbarContentProps;
+  MuiSpeedDial: SpeedDialProps;
+  MuiSpeedDialAction: SpeedDialActionProps;
+  MuiSpeedDialIcon: SpeedDialIconProps;
+  MuiStack: StackProps;
+  MuiStep: StepProps;
+  MuiStepButton: StepButtonProps;
+  MuiStepConnector: StepConnectorProps;
+  MuiStepContent: StepContentProps;
+  MuiStepIcon: StepIconProps;
+  MuiStepLabel: StepLabelProps;
+  MuiStepper: StepperProps;
+  MuiSvgIcon: SvgIconProps;
+  MuiSwipeableDrawer: SwipeableDrawerProps;
+  MuiSwitch: SwitchProps;
+  MuiTab: TabProps;
+  MuiTable: TableProps;
+  MuiTableBody: TableBodyProps;
+  MuiTableCell: TableCellProps;
+  MuiTableContainer: TableContainerProps;
+  MuiTableFooter: TableFooterProps;
+  MuiTableHead: TableHeadProps;
+  MuiTablePagination: TablePaginationProps;
+  MuiTableRow: TableRowProps;
+  MuiTableSortLabel: TableSortLabelProps;
+  MuiTabs: TabsProps;
+  MuiTextField: TextFieldProps;
+  MuiToggleButton: ToggleButtonProps;
+  MuiToggleButtonGroup: ToggleButtonGroupProps;
+  MuiToolbar: ToolbarProps;
+  MuiTooltip: TooltipProps;
+  MuiTouchRipple: TouchRippleProps;
+  MuiTypography: TypographyProps;
+  MuiUseMediaQuery: UseMediaQueryOptions;
+}

package/styles/props.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styles/responsiveFontSizes.d.ts

@@ -0,0 +1,11 @@
+import { Breakpoint } from '@mui/system';
+import { TypographyVariants } from "./createTypography.js";
+export interface ResponsiveFontSizesOptions {
+  breakpoints?: Breakpoint[];
+  disableAlign?: boolean;
+  factor?: number;
+  variants?: Array<keyof TypographyVariants>;
+}
+export default function responsiveFontSizes<T extends {
+  typography: TypographyVariants;
+}>(theme: T, options?: ResponsiveFontSizesOptions): T;

package/styles/responsiveFontSizes.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = responsiveFontSizes;
+var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMuiErrorMessage"));
+var _cssUtils = require("./cssUtils");
+function responsiveFontSizes(themeInput, options = {}) {
+  const {
+    breakpoints = ['sm', 'md', 'lg'],
+    disableAlign = false,
+    factor = 2,
+    variants = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline']
+  } = options;
+  const theme = {
+    ...themeInput
+  };
+  theme.typography = {
+    ...theme.typography
+  };
+  const typography = theme.typography;
+
+  // Convert between CSS lengths e.g. em->px or px->rem
+  // Set the baseFontSize for your project. Defaults to 16px (also the browser default).
+  const convert = (0, _cssUtils.convertLength)(typography.htmlFontSize);
+  const breakpointValues = breakpoints.map(x => theme.breakpoints.values[x]);
+  variants.forEach(variant => {
+    const style = typography[variant];
+    if (!style) {
+      return;
+    }
+    const remFontSize = parseFloat(convert(style.fontSize, 'rem'));
+    if (remFontSize <= 1) {
+      return;
+    }
+    const maxFontSize = remFontSize;
+    const minFontSize = 1 + (maxFontSize - 1) / factor;
+    let {
+      lineHeight
+    } = style;
+    if (!(0, _cssUtils.isUnitless)(lineHeight) && !disableAlign) {
+      throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: Unsupported non-unitless line height with grid alignment.\n' + 'Use unitless line heights instead.' : (0, _formatMuiErrorMessage.default)(6));
+    }
+    if (!(0, _cssUtils.isUnitless)(lineHeight)) {
+      // make it unitless
+      lineHeight = parseFloat(convert(lineHeight, 'rem')) / parseFloat(remFontSize);
+    }
+    let transform = null;
+    if (!disableAlign) {
+      transform = value => (0, _cssUtils.alignProperty)({
+        size: value,
+        grid: (0, _cssUtils.fontGrid)({
+          pixels: 4,
+          lineHeight,
+          htmlFontSize: typography.htmlFontSize
+        })
+      });
+    }
+    typography[variant] = {
+      ...style,
+      ...(0, _cssUtils.responsiveProperty)({
+        cssProperty: 'fontSize',
+        min: minFontSize,
+        max: maxFontSize,
+        unit: 'rem',
+        breakpoints: breakpointValues,
+        transform
+      })
+    };
+  });
+  return theme;
+}

package/styles/rootShouldForwardProp.d.ts

@@ -0,0 +1,2 @@
+declare const rootShouldForwardProp: (prop: string) => boolean;
+export default rootShouldForwardProp;

package/styles/rootShouldForwardProp.js

@@ -0,0 +1,10 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _slotShouldForwardProp = _interopRequireDefault(require("./slotShouldForwardProp"));
+const rootShouldForwardProp = prop => (0, _slotShouldForwardProp.default)(prop) && prop !== 'classes';
+var _default = exports.default = rootShouldForwardProp;

package/styles/shadows.d.ts

@@ -0,0 +1,3 @@
+export type Shadows = ['none', string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string, string];
+declare const shadows: Shadows;
+export default shadows;

package/styles/shadows.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+const shadowKeyUmbraOpacity = 0.2;
+const shadowKeyPenumbraOpacity = 0.14;
+const shadowAmbientShadowOpacity = 0.12;
+function createShadow(...px) {
+  return [`${px[0]}px ${px[1]}px ${px[2]}px ${px[3]}px rgba(0,0,0,${shadowKeyUmbraOpacity})`, `${px[4]}px ${px[5]}px ${px[6]}px ${px[7]}px rgba(0,0,0,${shadowKeyPenumbraOpacity})`, `${px[8]}px ${px[9]}px ${px[10]}px ${px[11]}px rgba(0,0,0,${shadowAmbientShadowOpacity})`].join(',');
+}
+
+// Values from https://github.com/material-components/material-components-web/blob/be8747f94574669cb5e7add1a7c54fa41a89cec7/packages/mdc-elevation/_variables.scss
+const shadows = ['none', createShadow(0, 2, 1, -1, 0, 1, 1, 0, 0, 1, 3, 0), createShadow(0, 3, 1, -2, 0, 2, 2, 0, 0, 1, 5, 0), createShadow(0, 3, 3, -2, 0, 3, 4, 0, 0, 1, 8, 0), createShadow(0, 2, 4, -1, 0, 4, 5, 0, 0, 1, 10, 0), createShadow(0, 3, 5, -1, 0, 5, 8, 0, 0, 1, 14, 0), createShadow(0, 3, 5, -1, 0, 6, 10, 0, 0, 1, 18, 0), createShadow(0, 4, 5, -2, 0, 7, 10, 1, 0, 2, 16, 1), createShadow(0, 5, 5, -3, 0, 8, 10, 1, 0, 3, 14, 2), createShadow(0, 5, 6, -3, 0, 9, 12, 1, 0, 3, 16, 2), createShadow(0, 6, 6, -3, 0, 10, 14, 1, 0, 4, 18, 3), createShadow(0, 6, 7, -4, 0, 11, 15, 1, 0, 4, 20, 3), createShadow(0, 7, 8, -4, 0, 12, 17, 2, 0, 5, 22, 4), createShadow(0, 7, 8, -4, 0, 13, 19, 2, 0, 5, 24, 4), createShadow(0, 7, 9, -4, 0, 14, 21, 2, 0, 5, 26, 4), createShadow(0, 8, 9, -5, 0, 15, 22, 2, 0, 6, 28, 5), createShadow(0, 8, 10, -5, 0, 16, 24, 2, 0, 6, 30, 5), createShadow(0, 8, 11, -5, 0, 17, 26, 2, 0, 6, 32, 5), createShadow(0, 9, 11, -5, 0, 18, 28, 2, 0, 7, 34, 6), createShadow(0, 9, 12, -6, 0, 19, 29, 2, 0, 7, 36, 6), createShadow(0, 10, 13, -6, 0, 20, 31, 3, 0, 8, 38, 7), createShadow(0, 10, 13, -6, 0, 21, 33, 3, 0, 8, 40, 7), createShadow(0, 10, 14, -6, 0, 22, 35, 3, 0, 8, 42, 7), createShadow(0, 11, 14, -7, 0, 23, 36, 3, 0, 9, 44, 8), createShadow(0, 11, 15, -7, 0, 24, 38, 3, 0, 9, 46, 8)];
+var _default = exports.default = shadows;

package/styles/shouldSkipGeneratingVar.d.ts

@@ -0,0 +1 @@
+export default function shouldSkipGeneratingVar(keys: string[]): boolean;

package/styles/shouldSkipGeneratingVar.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = shouldSkipGeneratingVar;
+function shouldSkipGeneratingVar(keys) {
+  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  // ends with sxConfig
+  keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
+}

package/styles/slotShouldForwardProp.d.ts

@@ -0,0 +1,2 @@
+declare function slotShouldForwardProp(prop: string): boolean;
+export default slotShouldForwardProp;

package/styles/slotShouldForwardProp.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+// copied from @mui/system/createStyled
+function slotShouldForwardProp(prop) {
+  return prop !== 'ownerState' && prop !== 'theme' && prop !== 'sx' && prop !== 'as';
+}
+var _default = exports.default = slotShouldForwardProp;

package/styles/stringifyTheme.d.ts

@@ -0,0 +1,20 @@
+/**
+ * `baseTheme` usually comes from `createTheme()` or `extendTheme()`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+export declare function stringifyTheme(baseTheme?: Record<string, any>): string;

package/styles/stringifyTheme.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.stringifyTheme = stringifyTheme;
+var _deepmerge = require("@mui/utils/deepmerge");
+/* eslint-disable import/prefer-default-export */
+
+function isSerializable(val) {
+  return (0, _deepmerge.isPlainObject)(val) || typeof val === 'undefined' || typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number' || Array.isArray(val);
+}
+
+/**
+ * `baseTheme` usually comes from `createTheme()` or `extendTheme()`.
+ *
+ * This function is intended to be used with zero-runtime CSS-in-JS like Pigment CSS
+ * For example, in a Next.js project:
+ *
+ * ```js
+ * // next.config.js
+ * const { extendTheme } = require('@mui/material/styles');
+ *
+ * const theme = extendTheme();
+ * // `.toRuntimeSource` is Pigment CSS specific to create a theme that is available at runtime.
+ * theme.toRuntimeSource = stringifyTheme;
+ *
+ * module.exports = withPigment({
+ *  theme,
+ * });
+ * ```
+ */
+function stringifyTheme(baseTheme = {}) {
+  const serializableTheme = {
+    ...baseTheme
+  };
+  function serializeTheme(object) {
+    const array = Object.entries(object);
+    // eslint-disable-next-line no-plusplus
+    for (let index = 0; index < array.length; index++) {
+      const [key, value] = array[index];
+      if (!isSerializable(value) || key.startsWith('unstable_')) {
+        delete object[key];
+      } else if ((0, _deepmerge.isPlainObject)(value)) {
+        object[key] = {
+          ...value
+        };
+        serializeTheme(object[key]);
+      }
+    }
+  }
+  serializeTheme(serializableTheme);
+  return `import { unstable_createBreakpoints as createBreakpoints, createTransitions } from '@mui/material/styles';
+
+const theme = ${JSON.stringify(serializableTheme, null, 2)};
+
+theme.breakpoints = createBreakpoints(theme.breakpoints || {});
+theme.transitions = createTransitions(theme.transitions || {});
+
+export default theme;`;
+}

package/styles/styled.d.ts

@@ -0,0 +1,13 @@
+import { CreateMUIStyled } from '@mui/system';
+import { Theme } from "./createTheme.js";
+export { default as slotShouldForwardProp } from "./slotShouldForwardProp.js";
+export { default as rootShouldForwardProp } from "./rootShouldForwardProp.js";
+
+/**
+ * Custom styled utility that has a default MUI theme.
+ * @param tag HTML tag or component that should serve as base.
+ * @param options Styled options for the created component.
+ * @returns React component that has styles attached to it.
+ */
+declare const styled: CreateMUIStyled<Theme>;
+export default styled;

package/styles/styled.js

@@ -0,0 +1,31 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+Object.defineProperty(exports, "rootShouldForwardProp", {
+  enumerable: true,
+  get: function () {
+    return _rootShouldForwardProp.default;
+  }
+});
+Object.defineProperty(exports, "slotShouldForwardProp", {
+  enumerable: true,
+  get: function () {
+    return _slotShouldForwardProp.default;
+  }
+});
+var _createStyled = _interopRequireDefault(require("@mui/system/createStyled"));
+var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
+var _identifier = _interopRequireDefault(require("./identifier"));
+var _rootShouldForwardProp = _interopRequireDefault(require("./rootShouldForwardProp"));
+var _slotShouldForwardProp = _interopRequireDefault(require("./slotShouldForwardProp"));
+const styled = (0, _createStyled.default)({
+  themeId: _identifier.default,
+  defaultTheme: _defaultTheme.default,
+  rootShouldForwardProp: _rootShouldForwardProp.default
+});
+var _default = exports.default = styled;

package/styles/useTheme.d.ts

@@ -0,0 +1,2 @@
+import { Theme } from "./createTheme.js";
+export default function useTheme<T = Theme>(): T;

package/styles/useTheme.js

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useTheme;
+var React = _interopRequireWildcard(require("react"));
+var _system = require("@mui/system");
+var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
+var _identifier = _interopRequireDefault(require("./identifier"));
+function useTheme() {
+  const theme = (0, _system.useTheme)(_defaultTheme.default);
+  if (process.env.NODE_ENV !== 'production') {
+    // TODO: uncomment once we enable eslint-plugin-react-compiler // eslint-disable-next-line react-compiler/react-compiler
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    React.useDebugValue(theme);
+  }
+  return theme[_identifier.default] || theme;
+}

package/styles/useThemeProps.d.ts

@@ -0,0 +1,42 @@
+import { Theme } from "./createTheme.js";
+import { Components } from "./components.js";
+export interface ThemeWithProps {
+  components?: Components<Omit<Theme, 'components'>>;
+}
+export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+  components: Record<Name, {
+    defaultProps: infer Props;
+  }>;
+} ? Props : {};
+
+/**
+ * Merges input `props` with the `defaultProps` for a component that were defined in the theme.
+ *
+ * The `defaultProps` are defined in the theme under `theme.components[componentName].defaultProps`.
+ *
+ * @example
+ *
+ * ```tsx
+ * const createTheme = () => ({
+ *   components: {
+ *     MuiStat: {
+ *       defaultProps: {
+ *         variant: 'outlined',
+ *       },
+ *     },
+ *   },
+ * });
+ *
+ * function Stat(props) {
+ *   const themeProps = useThemeProps({ props, name: 'MuiStat' });
+ *   return <div {...themeProps} />;
+ * }
+ * ```
+ *
+ * @param params.props The input props
+ * @param params.name The name of the component as defined in the theme
+ */
+export default function useThemeProps<Theme extends ThemeWithProps, Props, Name extends keyof any>(params: {
+  props: Props;
+  name: Name;
+}): Props & ThemedProps<Theme, Name>;

package/styles/useThemeProps.js

@@ -0,0 +1,22 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useThemeProps;
+var _useThemeProps = _interopRequireDefault(require("@mui/system/useThemeProps"));
+var _defaultTheme = _interopRequireDefault(require("./defaultTheme"));
+var _identifier = _interopRequireDefault(require("./identifier"));
+function useThemeProps({
+  props,
+  name
+}) {
+  return (0, _useThemeProps.default)({
+    props,
+    name,
+    defaultTheme: _defaultTheme.default,
+    themeId: _identifier.default
+  });
+}

package/styles/variants.d.ts

@@ -0,0 +1,10 @@
+import { Interpolation } from '@mui/system';
+import { ComponentsPropsList } from "./props.js";
+export type ComponentsVariants<Theme = unknown> = { [Name in keyof ComponentsPropsList]?: Array<{
+  props: Partial<ComponentsPropsList[Name]> | ((props: Partial<ComponentsPropsList[Name]> & {
+    ownerState: Partial<ComponentsPropsList[Name]>;
+  }) => boolean);
+  style: Interpolation<{
+    theme: Theme;
+  }>;
+}> };

package/styles/variants.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/styles/withStyles.d.ts

@@ -0,0 +1 @@
+export default function withStyles(stylesCreator: any, options?: object): never;