@stratakit/mui 0.3.1 → 0.4.1

package/dist/types.d.ts

@@ -4,6 +4,7 @@ import type { IconButtonProps } from "@mui/material/IconButton";
 import type { CommonProps } from "@mui/material/OverridableComponent";
 import type { TableCellProps as MuiTableCellProps } from "@mui/material/TableCell";
 import type { TextFieldProps, TextFieldVariants } from "@mui/material/TextField";
+import type { TooltipProps } from "@mui/material/Tooltip";
 import type { TypographyProps } from "@mui/material/Typography";
 import type * as React from "react";
 declare module "@mui/material/OverridableComponent" {
@@ -125,6 +126,12 @@ declare module "@mui/material/Chip" {
         warning: false;
     }
 }
+declare module "@mui/material/Dialog" {
+    interface DialogProps extends Pick<CommonProps, "render"> {
+        /** @deprecated Use `render` prop instead. */
+        component?: React.ElementType;
+    }
+}
 declare module "@mui/material/Fab" {
     interface FabPropsColorOverrides {
         info: false;
@@ -179,6 +186,12 @@ declare module "@mui/material/IconButton" {
          * If not specified, the accessible name and tooltip must be wired up manually.
          */
         label?: string;
+        /**
+         * Placement of the tooltip that is shown when the `label` prop is specified.
+         *
+         * @default 'top'
+         */
+        labelPlacement?: TooltipProps["placement"];
     }
 }
 declare module "@mui/material/InputBase" {
@@ -253,6 +266,12 @@ declare module "@mui/material/TableCell" {
         component?: MuiTableCellProps["component"];
     }
 }
+declare module "@mui/material/TableRow" {
+    interface TableRowOwnProps {
+        /** The default with `@stratakit/mui` is `true`, except when used inside `TableHead`. */
+        hover?: boolean;
+    }
+}
 declare module "@mui/material/TextField" {
     interface TextFieldPropsColorOverrides {
         secondary: false;
@@ -268,7 +287,18 @@ declare module "@mui/material/TextField" {
 declare module "@mui/material/ToggleButton" {
     interface ToggleButtonOwnProps {
         LinkComponent?: never;
+        /**
+         * The accessible name of the button, which is also shown as a tooltip on hover/focus.
+         *
+         * Should only be provided when the toggle button does not have visible text content that can serve as an accessible name.
+         */
         label?: IconButtonProps["label"];
+        /**
+         * Placement of the tooltip that is shown when the `label` prop is specified.
+         *
+         * @default 'top'
+         */
+        labelPlacement?: TooltipProps["placement"];
     }
 }
 declare module "@mui/material/Tooltip" {

package/dist/~components/MuiAutocomplete.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const MuiAutocomplete: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { MuiAutocomplete };

package/dist/~components/MuiAutocomplete.js

@@ -0,0 +1,22 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { MuiInputLabelContext } from "./MuiInputLabel.js";
+const MuiAutocomplete = forwardRef((props, forwardedRef) => {
+  const [labelId, setLabelId] = React.useState(void 0);
+  return /* @__PURE__ */ jsx(MuiInputLabelContext.Provider, {
+    value: {
+      setLabelId
+    },
+    children: /* @__PURE__ */ jsx(Role.div, {
+      role: "group",
+      "aria-labelledby": labelId,
+      ...props,
+      ref: forwardedRef
+    })
+  });
+});
+export {
+  MuiAutocomplete
+};

package/dist/~components/MuiAvatarGroup.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface MuiAvatarGroupProps extends BaseProps<"div"> {
+}
+declare const MuiAvatarGroup: React.ForwardRefExoticComponent<MuiAvatarGroupProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { MuiAvatarGroup };

package/dist/~components/MuiAvatarGroup.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const MuiAvatarGroup = forwardRef((props, forwardedRef) => {
+  const {
+    children: childrenProp,
+    ...rest
+  } = props;
+  const children = React.Children.map(childrenProp, (child) => {
+    return /* @__PURE__ */ jsx("div", {
+      className: "\u{1F95D}MuiAvatarGroupItem",
+      role: "listitem",
+      children: child
+    });
+  })?.reverse();
+  return /* @__PURE__ */ jsx(Role.div, {
+    role: "list",
+    ...rest,
+    ref: forwardedRef,
+    children
+  });
+});
+export {
+  MuiAvatarGroup
+};

package/dist/~components/MuiButtonBase.js

@@ -8,9 +8,10 @@ const MuiButtonBase = forwardRef((props, forwardedRef) => {
   const {
     href,
     "aria-disabled": ariaDisabled,
+    disabled,
     ...rest
   } = props;
-  const isDisabled = ariaDisabled === true || ariaDisabled === "true";
+  const isDisabled = disabled || ariaDisabled === true || ariaDisabled === "true";
   const [tagName, setTagName] = React.useState(void 0);
   let t0;
   if ($[0] === /* @__PURE__ */ Symbol.for("react.memo_cache_sentinel")) {

package/dist/~components/MuiChip.d.ts

@@ -6,5 +6,5 @@ interface MuiChipProps extends BaseProps<"div">, Pick<ChipProps, "deleteLabel">
 }
 declare const MuiChip: React.ForwardRefExoticComponent<MuiChipProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
 declare const MuiChipLabel: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
-declare const MuiChipDeleteIcon: React.ForwardRefExoticComponent<Omit<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "color" | "style" | "tabIndex" | "children" | "render" | "label" | "component" | "classes" | "sx" | "disabled" | "disableFocusRipple" | "loading" | "loadingIndicator" | "size" | "LinkComponent" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "edge">, "ref"> & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
-export { MuiChip, MuiChipLabel, MuiChipDeleteIcon };
+declare const MuiChipDeleteIcon: React.ForwardRefExoticComponent<Omit<import("@mui/material/IconButton").IconButtonOwnProps & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, keyof import("@mui/material/IconButton").IconButtonOwnProps> & Omit<import("@mui/material/ButtonBase").ButtonBaseOwnProps, "tabIndex" | "nativeButton" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | keyof import("@mui/material/IconButton").IconButtonOwnProps> & import("@mui/material/OverridableComponent").CommonProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "className" | "color" | "style" | "tabIndex" | "children" | "render" | "label" | "component" | "classes" | "sx" | "disabled" | "disableFocusRipple" | "loading" | "loadingIndicator" | "size" | "LinkComponent" | "nativeButton" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "edge" | "labelPlacement">, "ref"> & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { MuiChip, MuiChipDeleteIcon, MuiChipLabel };

package/dist/~components/MuiIconButton.d.ts

@@ -1,6 +1,6 @@
 import type { IconButtonOwnProps } from "@mui/material/IconButton";
 import type { BaseProps } from "@stratakit/foundations/secret-internals";
-interface MuiIconButtonProps extends BaseProps<"button">, Pick<IconButtonOwnProps, "label"> {
+interface MuiIconButtonProps extends BaseProps<"button">, Pick<IconButtonOwnProps, "label" | "labelPlacement"> {
 }
 declare const MuiIconButton: import("react").ForwardRefExoticComponent<MuiIconButtonProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
 export { MuiIconButton };

package/dist/~components/MuiIconButton.js

@@ -5,12 +5,14 @@ import { MuiButtonBase } from "./MuiButtonBase.js";
 const MuiIconButton = forwardRef((props, forwardedRef) => {
   const {
     label,
+    labelPlacement,
     ...rest
   } = props;
   if (label) {
     return /* @__PURE__ */ jsx(Tooltip, {
       title: label,
       describeChild: false,
+      placement: labelPlacement,
       children: /* @__PURE__ */ jsx(MuiButtonBase, {
         ...rest,
         ref: forwardedRef

package/dist/~components/MuiInputLabel.d.ts

@@ -0,0 +1,6 @@
+import * as React from "react";
+declare const MuiInputLabelContext: React.Context<{
+    setLabelId: (id: string | undefined) => void;
+} | undefined>;
+declare const MuiInputLabel: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLLabelElement>>;
+export { MuiInputLabel, MuiInputLabelContext };

package/dist/~components/MuiInputLabel.js

@@ -0,0 +1,23 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const MuiInputLabelContext = React.createContext(void 0);
+const MuiInputLabel = forwardRef((props, forwardedRef) => {
+  const {
+    setLabelId
+  } = React.useContext(MuiInputLabelContext) ?? {};
+  React.useEffect(() => {
+    if (!setLabelId) return;
+    setLabelId(props.id);
+    return () => setLabelId(void 0);
+  }, [props.id, setLabelId]);
+  return /* @__PURE__ */ jsx(Role.label, {
+    ...props,
+    ref: forwardedRef
+  });
+});
+export {
+  MuiInputLabel,
+  MuiInputLabelContext
+};

package/dist/~components/MuiTable.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
 declare const MuiTableHead: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLTableSectionElement>>;
+declare const MuiTableBody: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableSectionElement>, HTMLTableSectionElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLTableSectionElement>>;
 declare const MuiTableCell: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLTableDataCellElement>>;
-export { MuiTableHead, MuiTableCell };
+export { MuiTableBody, MuiTableCell, MuiTableHead };

package/dist/~components/MuiTable.js

@@ -1,6 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Role } from "@ariakit/react/role";
+import { ThemeProvider } from "@mui/material/styles";
 import { forwardRef } from "@stratakit/foundations/secret-internals";
 const MuiTableHeadContext = React.createContext(false);
 const MuiTableHead = forwardRef((props, forwardedRef) => {
@@ -13,6 +14,28 @@ const MuiTableHead = forwardRef((props, forwardedRef) => {
     })
   });
 });
+const MuiTableBody = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(ThemeProvider, {
+    theme: (outerTheme) => ({
+      ...outerTheme,
+      components: {
+        ...outerTheme.components,
+        MuiTableRow: {
+          defaultProps: {
+            ...outerTheme.components?.MuiTableRow?.defaultProps,
+            hover: true
+            // Only enable `hover` for rows inside TableBody.
+          }
+        }
+      }
+    }),
+    children: /* @__PURE__ */ jsx(Role, {
+      render: /* @__PURE__ */ jsx("tbody", {}),
+      ...props,
+      ref: forwardedRef
+    })
+  });
+});
 const MuiTableCell = forwardRef((props, forwardedRef) => {
   const inHeader = React.useContext(MuiTableHeadContext);
   const Component = inHeader ? "th" : "td";
@@ -23,6 +46,7 @@ const MuiTableCell = forwardRef((props, forwardedRef) => {
   });
 });
 export {
+  MuiTableBody,
   MuiTableCell,
   MuiTableHead
 };

package/dist/~components/MuiToggleButton.d.ts

@@ -0,0 +1,6 @@
+import type { ToggleButtonOwnProps } from "@mui/material/ToggleButton";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+interface MuiToggleButtonProps extends BaseProps<"button">, Pick<ToggleButtonOwnProps, "label" | "labelPlacement"> {
+}
+declare const MuiToggleButton: import("react").ForwardRefExoticComponent<MuiToggleButtonProps & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { MuiToggleButton };

package/dist/~components/MuiToggleButton.js

@@ -0,0 +1,43 @@
+import { jsx } from "react/jsx-runtime";
+import IconButton from "@mui/material/IconButton";
+import Tooltip from "@mui/material/Tooltip";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { MuiButtonBase } from "./MuiButtonBase.js";
+const MuiToggleButton = forwardRef((props, forwardedRef) => {
+  const {
+    label,
+    labelPlacement,
+    ...rest
+  } = props;
+  const classList = props.className?.split(" ") ?? [];
+  const size = (() => {
+    if (classList.includes("MuiToggleButton-sizeSmall")) return "small";
+    if (classList.includes("MuiToggleButton-sizeLarge")) return "large";
+    if (classList.includes("MuiToggleButton-sizeMedium")) return "medium";
+    return void 0;
+  })();
+  if (label) {
+    return /* @__PURE__ */ jsx(Tooltip, {
+      title: label,
+      describeChild: false,
+      placement: labelPlacement,
+      children: /* @__PURE__ */ jsx(MuiButtonBase, {
+        ...rest,
+        render: props.render ?? /* @__PURE__ */ jsx(IconButton, {
+          size
+        }),
+        ref: forwardedRef
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx(MuiButtonBase, {
+    ...rest,
+    render: props.render ?? /* @__PURE__ */ jsx(IconButton, {
+      size
+    }),
+    ref: forwardedRef
+  });
+});
+export {
+  MuiToggleButton
+};

package/dist/~components/MuiTypography.d.ts

@@ -0,0 +1,2 @@
+declare const MuiTypography: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref">, "render"> & import("react").RefAttributes<HTMLElement | HTMLParagraphElement>>;
+export { MuiTypography };

package/dist/~components/MuiTypography.js

@@ -0,0 +1,40 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import { forwardRef } from "@stratakit/foundations/secret-internals";
+const variantMapping = {
+  h1: "h1",
+  h2: "h2",
+  h3: "h3",
+  h4: "h4",
+  h5: "h5",
+  h6: "h6",
+  subtitle1: "h6",
+  subtitle2: "h6",
+  body1: "p",
+  body2: "p",
+  inherit: "p",
+  button: "span",
+  caption: "span",
+  overline: "span"
+};
+const variants = Object.keys(variantMapping);
+const headings = ["h1", "h2", "h3", "h4", "h5", "h6", "subtitle1", "subtitle2"];
+const MuiTypography = forwardRef((props, forwardedRef) => {
+  const classList = props.className?.split(" ").filter(Boolean);
+  const variant = (() => {
+    const variant2 = variants.find((name) => classList?.includes(`MuiTypography-${name}`));
+    return variant2 || "body2";
+  })();
+  const render = (() => {
+    const Element = variantMapping[variant] || "p";
+    return /* @__PURE__ */ jsx(Element, {});
+  })();
+  return /* @__PURE__ */ jsx(Role, {
+    render,
+    ...props,
+    ref: forwardedRef
+  });
+});
+export {
+  MuiTypography
+};

package/dist/~createTheme.d.ts

@@ -0,0 +1,3 @@
+/** Creates a StrataKit theme for MUI. Should be used with MUI's `ThemeProvider`. */
+declare function createTheme(): import("@mui/material/styles").Theme;
+export { createTheme };

package/dist/{createTheme.js → ~createTheme.js}

@@ -2,7 +2,11 @@ import { jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Role } from "@ariakit/react/role";
 import OutlinedInput from "@mui/material/OutlinedInput";
+import StepConnector from "@mui/material/StepConnector";
 import { createTheme as createMuiTheme } from "@mui/material/styles";
+import cx from "classnames";
+import { MuiAutocomplete } from "./~components/MuiAutocomplete.js";
+import { MuiAvatarGroup } from "./~components/MuiAvatarGroup.js";
 import { MuiBadge } from "./~components/MuiBadge.js";
 import { MuiBottomNavigationAction } from "./~components/MuiBottomNavigation.js";
 import { MuiButtonBase } from "./~components/MuiButtonBase.js";
@@ -10,9 +14,12 @@ import { MuiCard, MuiCardActionArea, MuiCardMedia } from "./~components/MuiCard.
 import { MuiChip, MuiChipDeleteIcon, MuiChipLabel } from "./~components/MuiChip.js";
 import { MuiDivider } from "./~components/MuiDivider.js";
 import { MuiIconButton } from "./~components/MuiIconButton.js";
+import { MuiInputLabel } from "./~components/MuiInputLabel.js";
 import { MuiSnackbar } from "./~components/MuiSnackbar.js";
 import { MuiStepIcon } from "./~components/MuiStepper.js";
-import { MuiTableCell, MuiTableHead } from "./~components/MuiTable.js";
+import { MuiTableBody, MuiTableCell, MuiTableHead } from "./~components/MuiTable.js";
+import { MuiToggleButton } from "./~components/MuiToggleButton.js";
+import { MuiTypography } from "./~components/MuiTypography.js";
 import { ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, DismissIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./Icon.js";
 function createTheme() {
   const palette = {
@@ -127,6 +134,7 @@ function createTheme() {
       MuiAccordionSummary: {
         defaultProps: {
           component: Role.div,
+          nativeButton: false,
           expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {})
         }
       },
@@ -151,7 +159,18 @@ function createTheme() {
         defaultProps: {
           popupIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
           clearIcon: /* @__PURE__ */ jsx(DismissIcon, {}),
+          renderOption: ({
+            key,
+            ...props
+          }, option, _, ownerState) => /* @__PURE__ */ jsx("li", {
+            ...props,
+            className: cx("MuiMenuItem-root", props.className),
+            children: ownerState.getOptionLabel(option)
+          }, key),
           slotProps: {
+            root: {
+              component: MuiAutocomplete
+            },
             paper: {
               elevation: 8
               // match Menu elevation
@@ -173,8 +192,10 @@ function createTheme() {
       MuiAvatar: {
         defaultProps: {
           component: Role.div,
-          imgProps: {
-            draggable: false
+          slotProps: {
+            img: {
+              draggable: false
+            }
           }
         },
         styleOverrides: {
@@ -186,7 +207,12 @@ function createTheme() {
       },
       MuiAvatarGroup: {
         defaultProps: {
-          component: Role.div
+          component: MuiAvatarGroup,
+          slotProps: {
+            surplus: {
+              ["data-_sk-surplus"]: ``
+            }
+          }
         }
       },
       MuiBackdrop: {
@@ -258,6 +284,7 @@ function createTheme() {
           component: Role.div,
           slotProps: {
             title: {
+              // biome-ignore lint/suspicious/noExplicitAny: MUI's CardHeader.title.component is hardcoded to "span"
               component: Role.h2
             }
           }
@@ -301,7 +328,8 @@ function createTheme() {
       },
       MuiDialogContentText: {
         defaultProps: {
-          component: Role.p
+          component: Role.p,
+          variant: "inherit"
         }
       },
       MuiDialogTitle: {
@@ -345,11 +373,6 @@ function createTheme() {
           component: Role.div
         }
       },
-      MuiGridLegacy: {
-        defaultProps: {
-          component: Role.div
-        }
-      },
       MuiIcon: {
         defaultProps: {
           component: Role.span
@@ -378,7 +401,7 @@ function createTheme() {
       },
       MuiInputLabel: {
         defaultProps: {
-          component: Role.label,
+          component: MuiInputLabel,
           shrink: true
           // Removes label animation and masked border from TextField
         }
@@ -444,7 +467,8 @@ function createTheme() {
       },
       MuiListItemButton: {
         defaultProps: {
-          component: MuiButtonBase
+          component: MuiButtonBase,
+          nativeButton: true
         }
       },
       MuiListItemText: {
@@ -516,7 +540,12 @@ function createTheme() {
       },
       MuiPopover: {
         defaultProps: {
-          component: Role.div
+          component: Role.div,
+          slotProps: {
+            paper: {
+              role: "dialog"
+            }
+          }
         }
       },
       MuiRadio: {
@@ -551,7 +580,12 @@ function createTheme() {
       },
       MuiSlider: {
         defaultProps: {
-          component: Role.span
+          component: Role.span,
+          slotProps: {
+            valueLabel: {
+              className: "MuiTooltip-tooltip"
+            }
+          }
         }
       },
       MuiSnackbar: {
@@ -575,7 +609,7 @@ function createTheme() {
       },
       MuiStep: {
         defaultProps: {
-          component: Role.div
+          component: Role.li
         }
       },
       MuiSwitch: {
@@ -585,7 +619,11 @@ function createTheme() {
       },
       MuiStepper: {
         defaultProps: {
-          component: Role.div
+          component: Role.ol,
+          connector: /* @__PURE__ */ jsx(StepConnector, {
+            "aria-hidden": "true"
+          })
+          // hiding the connector to prevent invalid markup
         }
       },
       MuiStepLabel: {
@@ -622,7 +660,7 @@ function createTheme() {
       },
       MuiTableBody: {
         defaultProps: {
-          component: withRenderProp(Role, "tbody"),
+          component: MuiTableBody,
           role: void 0
           // Removing role="rowgroup". See https://github.com/iTwin/stratakit/pull/1361
         }
@@ -686,7 +724,7 @@ function createTheme() {
       },
       MuiToggleButton: {
         defaultProps: {
-          component: MuiIconButton
+          component: MuiToggleButton
         }
       },
       MuiToolbar: {
@@ -696,28 +734,24 @@ function createTheme() {
       },
       MuiTooltip: {
         defaultProps: {
-          describeChild: true
+          placement: "top",
+          describeChild: true,
+          slotProps: {
+            popper: {
+              modifiers: [{
+                name: "offset",
+                options: {
+                  offset: [0, 2]
+                }
+              }]
+            }
+          }
         }
       },
       MuiTypography: {
         defaultProps: {
           variant: "body2",
-          variantMapping: {
-            h1: Role.h1,
-            h2: Role.h2,
-            h3: Role.h3,
-            h4: Role.h4,
-            h5: Role.h5,
-            h6: Role.h6,
-            subtitle1: Role.h6,
-            subtitle2: Role.h6,
-            body1: Role.p,
-            body2: Role.p,
-            inherit: Role.p,
-            button: Role.span,
-            caption: Role.span,
-            overline: Role.span
-          }
+          component: MuiTypography
         }
       }
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stratakit/mui",
   "type": "module",
-  "version": "0.3.1",
+  "version": "0.4.1",
   "license": "MIT",
   "sideEffects": false,
   "types": "./dist/index.d.ts",
@@ -45,11 +45,11 @@
     "design system"
   ],
   "dependencies": {
-    "@ariakit/react": "^0.4.21",
+    "@ariakit/react": "^0.4.25",
     "@emotion/cache": "^11.14.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@stratakit/foundations": "^0.4.7",
+    "@stratakit/foundations": "^0.4.8",
     "@stratakit/icons": "^0.3.1",
     "classnames": "^2.5.1",
     "react-compiler-runtime": "^1.0.0"
@@ -57,13 +57,13 @@
   "devDependencies": {
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
-    "esbuild": "^0.27.3",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "esbuild": "^0.27.7",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "typescript": "~5.9.3"
   },
   "peerDependencies": {
-    "@mui/material": "^7.3.6",
+    "@mui/material": "^9.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0"
   },

package/dist/createTheme.d.ts

@@ -1,16 +0,0 @@
-/**
- * Creates a StrataKit theme for MUI. Should be used with MUI's `ThemeProvider`.
- *
- * Example:
- * ```tsx
- * import { ThemeProvider } from "@mui/material/styles";
- * import { createTheme } from "@stratakit/mui";
- *
- * const theme = createTheme();
- * <ThemeProvider theme={theme}>
- *   <App />
- * </ThemeProvider>
- * ```
- */
-declare function createTheme(): import("@mui/material/styles").Theme;
-export { createTheme };