@stratakit/mui 0.4.1 → 0.5.0

package/dist/~components/MuiAutocomplete.js

@@ -1,22 +1,142 @@
-import { jsx } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { Role } from "@ariakit/react/role";
-import { forwardRef } from "@stratakit/foundations/secret-internals";
+import { ThemeProvider } from "@mui/material/styles";
+import { forwardRef, useEventHandlers, useMergedRefs } from "@stratakit/foundations/secret-internals";
+import { MuiChip, MuiChipDeleteIcon } from "./MuiChip.js";
 import { MuiInputLabelContext } from "./MuiInputLabel.js";
+const MuiAutocompleteContext = React.createContext(void 0);
 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
+  const [inputRootRef, setInputRootRef] = React.useState(null);
+  return /* @__PURE__ */ jsx(ThemeProvider, {
+    theme: (outerTheme) => ({
+      ...outerTheme,
+      components: {
+        ...outerTheme.components,
+        MuiTextField: {
+          defaultProps: {
+            slotProps: {
+              input: {
+                component: MuiAutocompleteTextFieldInput
+              },
+              htmlInput: {
+                slot: "input"
+                // Assign input element to the slot named "input"
+              }
+            }
+          }
+        }
+      }
+    }),
+    children: /* @__PURE__ */ jsx(MuiAutocompleteContext.Provider, {
+      value: {
+        inputRootRef,
+        setInputRootRef
+      },
+      children: /* @__PURE__ */ jsx(MuiInputLabelContext.Provider, {
+        value: {
+          setLabelId
+        },
+        children: /* @__PURE__ */ jsx(Role.div, {
+          role: "group",
+          "aria-labelledby": labelId,
+          ...props,
+          onKeyDown: useEventHandlers((e) => {
+            if (e.key === "ArrowLeft" || e.key === "ArrowRight") {
+              e.defaultMuiPrevented = true;
+            }
+          }, props.onKeyDown),
+          ref: forwardedRef
+        })
+      })
     })
   });
 });
+const MuiAutocompleteClearIndicator = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(Role.button, {
+    ...props,
+    onKeyDown: useEventHandlers(props.onKeyDown, (e) => {
+      e.stopPropagation();
+    }),
+    ref: forwardedRef
+  });
+});
+const MuiAutocompleteChip = forwardRef((props, forwardedRef) => {
+  return /* @__PURE__ */ jsx(MuiChip, {
+    slot: "chips",
+    ...props,
+    role: "listitem",
+    ref: forwardedRef
+  });
+});
+const MuiAutocompleteChipDeleteIcon = forwardRef((props, forwardedRef) => {
+  const {
+    inputRootRef
+  } = React.useContext(MuiAutocompleteContext) ?? {};
+  return /* @__PURE__ */ jsx(MuiChipDeleteIcon, {
+    ...props,
+    onKeyDown: useEventHandlers(props.onKeyDown, (e) => {
+      e.stopPropagation();
+    }),
+    onClick: useEventHandlers(props.onClick, () => {
+      if (!inputRootRef) return;
+      const htmlInput = inputRootRef.getElementsByClassName("MuiAutocomplete-input")[0];
+      if (!htmlInput) return;
+      htmlInput.focus();
+    }),
+    ref: forwardedRef
+  });
+});
+const MuiAutocompleteTextFieldInput = forwardRef((props, forwardedRef) => {
+  const $ = _c(3);
+  const {
+    setInputRootRef
+  } = React.useContext(MuiAutocompleteContext) ?? {};
+  const [host, setHost] = React.useState(null);
+  const [shadow, setShadow] = React.useState(null);
+  let t0;
+  let t1;
+  if ($[0] !== host) {
+    t0 = () => {
+      if (!host) {
+        return;
+      }
+      if (!host.shadowRoot) {
+        host.attachShadow({
+          mode: "open"
+        });
+      }
+      setShadow(host.shadowRoot);
+    };
+    t1 = [host];
+    $[0] = host;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t0 = $[1];
+    t1 = $[2];
+  }
+  React.useEffect(t0, t1);
+  return jsxs(Fragment, {
+    children: [jsx(Role, {
+      ...props,
+      ref: useMergedRefs(setHost, setInputRootRef, forwardedRef)
+    }), shadow && ReactDOM.createPortal(jsxs(Fragment, {
+      children: [jsx("slot", {
+        name: "input"
+      }), jsx("slot", {
+        role: "list",
+        name: "chips"
+      }), jsx("slot", {}), " "]
+    }), shadow)]
+  });
+});
 export {
-  MuiAutocomplete
+  MuiAutocomplete,
+  MuiAutocompleteChip,
+  MuiAutocompleteChipDeleteIcon,
+  MuiAutocompleteClearIndicator
 };

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

@@ -1,7 +1,9 @@
-import { type BaseProps } from "@stratakit/foundations/secret-internals";
+import * as React from "react";
 import type Badge from "@mui/material/Badge";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
 type BadgeProps = React.ComponentProps<typeof Badge>;
 interface MuiBadgeProps extends BaseProps<"span">, Pick<BadgeProps, "inline"> {
 }
-declare const MuiBadge: import("react").ForwardRefExoticComponent<MuiBadgeProps & import("react").RefAttributes<HTMLElement | HTMLSpanElement>>;
-export { MuiBadge };
+declare const MuiBadge: React.ForwardRefExoticComponent<MuiBadgeProps & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+declare const MuiBadgeBadge: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLSpanElement>>;
+export { MuiBadge, MuiBadgeBadge };

package/dist/~components/MuiBadge.js

@@ -1,17 +1,35 @@
 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 { forwardRef, useSafeContext } from "@stratakit/foundations/secret-internals";
+const MuiBadgeContext = React.createContext(void 0);
 const MuiBadge = forwardRef((props, forwardedRef) => {
   const {
     inline,
     ...rest
   } = props;
+  return /* @__PURE__ */ jsx(MuiBadgeContext.Provider, {
+    value: {
+      inline
+    },
+    children: /* @__PURE__ */ jsx(Role.span, {
+      ...rest,
+      "data-_sk-inline": inline ? "" : void 0,
+      ref: forwardedRef
+    })
+  });
+});
+const MuiBadgeBadge = forwardRef((props, forwardedRef) => {
+  const {
+    inline
+  } = useSafeContext(MuiBadgeContext);
   return /* @__PURE__ */ jsx(Role.span, {
-    ...rest,
-    "data-_sk-inline": inline ? "" : void 0,
+    ...props,
+    "aria-hidden": inline ? void 0 : props["aria-hidden"],
     ref: forwardedRef
   });
 });
 export {
-  MuiBadge
+  MuiBadge,
+  MuiBadgeBadge
 };

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

@@ -1,5 +1,6 @@
 import * as React from "react";
 declare const MuiCard: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, "ref">, "render"> & React.RefAttributes<HTMLElement>>;
+declare const MuiCardHeaderTitle: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLHeadingElement>>;
 declare const MuiCardActionArea: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLButtonElement>>;
 declare const MuiCardMedia: React.ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "render"> & React.RefAttributes<HTMLElement | HTMLDivElement>>;
-export { MuiCard, MuiCardActionArea, MuiCardMedia };
+export { MuiCard, MuiCardActionArea, MuiCardHeaderTitle, MuiCardMedia };

package/dist/~components/MuiCard.js

@@ -1,15 +1,12 @@
 import { c as _c } from "react-compiler-runtime";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
+import * as ReactDOM from "react-dom";
 import { Role } from "@ariakit/react/role";
 import { forwardRef, useEventHandlers, useMergedRefs } from "@stratakit/foundations/secret-internals";
 import { MuiButtonBase } from "./MuiButtonBase.js";
 const MuiCardContext = React.createContext(void 0);
 const MuiCard = forwardRef((props, forwardedRef) => {
-  const {
-    role,
-    ...rest
-  } = props;
   const [actionAreaElement, setActionAreaElement] = React.useState(void 0);
   const handleActionAreaClick = (event) => {
     if (!actionAreaElement) return;
@@ -26,24 +23,81 @@ const MuiCard = forwardRef((props, forwardedRef) => {
     },
     children: /* @__PURE__ */ jsx(Role, {
       render: /* @__PURE__ */ jsx("article", {}),
-      ...rest,
+      ...props,
       "data-_sk-actionable": actionAreaElement ? "" : void 0,
       onClick: useEventHandlers(props.onClick, handleActionAreaClick),
       ref: forwardedRef
     })
   });
 });
-const MuiCardActionArea = forwardRef((props, forwardedRef) => {
+const MuiCardHeaderTitle = forwardRef((props, forwardedRef) => {
+  const cardContext = React.useContext(MuiCardContext);
+  const cardActionAreaContext = React.useContext(MuiCardActionAreaContext);
   const {
-    role,
+    children,
     ...rest
   } = props;
-  const context = React.useContext(MuiCardContext);
-  return jsx(MuiButtonBase, {
+  const t0 = useMergedRefs(cardActionAreaContext?.setTitleElement, forwardedRef);
+  let t1;
+  bb0: {
+    if (cardActionAreaContext) {
+      t1 = cardContext?.actionAreaElement ? ReactDOM.createPortal(children, cardContext.actionAreaElement) : null;
+      break bb0;
+    }
+    t1 = children;
+  }
+  return jsx(Role.h2, {
     ...rest,
-    ref: useMergedRefs(context?.setActionAreaElement, forwardedRef)
+    ref: t0,
+    children: t1
+  });
+});
+const MuiCardActionAreaContext = React.createContext(void 0);
+const MuiCardActionArea = forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    ...rest
+  } = props;
+  const [titleElement, setTitleElement] = React.useState(void 0);
+  return /* @__PURE__ */ jsx(MuiCardActionAreaContext.Provider, {
+    value: {
+      setTitleElement
+    },
+    children: (() => {
+      if (titleElement) {
+        return /* @__PURE__ */ jsxs(Fragment, {
+          children: [children, ReactDOM.createPortal(/* @__PURE__ */ jsx(MuiCardActionAreaButton, {
+            ...rest,
+            ref: forwardedRef
+          }), titleElement)]
+        });
+      }
+      return /* @__PURE__ */ jsx(MuiCardActionAreaButton, {
+        ...rest,
+        ref: forwardedRef,
+        children
+      });
+    })()
   });
 });
+const MuiCardActionAreaButton = forwardRef((props, forwardedRef) => {
+  const $ = _c(3);
+  const cardContext = React.useContext(MuiCardContext);
+  const t0 = useMergedRefs(cardContext?.setActionAreaElement, forwardedRef);
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = jsx(MuiButtonBase, {
+      ...props,
+      ref: t0
+    });
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+});
 const MEDIA_COMPONENTS = ["audio", "iframe", "img", "picture", "video"];
 function extractBackgroundImageUrl(style) {
   const backgroundImage = style?.backgroundImage;
@@ -108,5 +162,6 @@ const MuiCardMedia = forwardRef((props, forwardedRef) => {
 export {
   MuiCard,
   MuiCardActionArea,
+  MuiCardHeaderTitle,
   MuiCardMedia
 };

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, 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>>;
+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, "type" | "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" | "type" | "tabIndex" | "children" | "render" | "label" | "classes" | "sx" | "component" | "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/MuiDivider.js

@@ -7,7 +7,7 @@ const MuiDivider = forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const defaultRender = (() => {
-    if (children || props["aria-orientation"] === "vertical") return /* @__PURE__ */ jsx("div", {});
+    if (children || props["aria-orientation"] === "vertical" || props.role === "presentation") return /* @__PURE__ */ jsx("div", {});
     return /* @__PURE__ */ jsx("hr", {});
   })();
   return /* @__PURE__ */ jsx(Role, {

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

@@ -0,0 +1,7 @@
+import type { MenuOwnerState } from "@mui/material/Menu";
+import type { MenuListProps } from "@mui/material/MenuList";
+interface MuiMenuListSlotProps extends MenuListProps {
+    ownerState?: Pick<MenuOwnerState, "anchorEl">;
+}
+declare const MuiMenuListSlot: import("react").ForwardRefExoticComponent<Omit<MuiMenuListSlotProps, "ref"> & import("react").RefAttributes<HTMLElement | HTMLUListElement>>;
+export { MuiMenuListSlot };

package/dist/~components/MuiMenu.js

@@ -0,0 +1,25 @@
+import { c as _c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import MenuList from "@mui/material/MenuList";
+import { forwardRef, useMergedRefs } from "@stratakit/foundations/secret-internals";
+import { useFallbackLabel } from "./MuiPopover.js";
+const MuiMenuListSlot = forwardRef((props, forwardedRef) => {
+  const $ = _c(3);
+  const t0 = useMergedRefs(forwardedRef, useFallbackLabel(props));
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = jsx(MenuList, {
+      ...props,
+      ref: t0
+    });
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+});
+export {
+  MuiMenuListSlot
+};

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

@@ -0,0 +1,10 @@
+import * as React from "react";
+import type { PopoverOwnerState } from "@mui/material/Popover";
+import type { BaseProps } from "@stratakit/foundations/secret-internals";
+/** Returns a callback ref that sets a fallback value for `ariaLabelledByElements` using `ownerState.anchorEl`. */
+export declare function useFallbackLabel(props: Pick<MuiPopoverPaperSlotProps, "aria-label" | "aria-labelledby" | "ownerState">): (element?: HTMLElement) => void;
+interface MuiPopoverPaperSlotProps extends BaseProps {
+    ownerState?: Pick<PopoverOwnerState, "anchorEl">;
+}
+declare const MuiPopoverPaperSlot: React.ForwardRefExoticComponent<MuiPopoverPaperSlotProps & React.RefAttributes<HTMLElement | HTMLDivElement>>;
+export { MuiPopoverPaperSlot };

package/dist/~components/MuiPopover.js

@@ -0,0 +1,62 @@
+import { c as _c } from "react-compiler-runtime";
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { PopoverPaper } from "@mui/material/Popover";
+import { forwardRef, useMergedRefs } from "@stratakit/foundations/secret-internals";
+function useFallbackLabel(props) {
+  const $ = _c(6);
+  const {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    ownerState: t0
+  } = props;
+  let t1;
+  if ($[0] !== t0) {
+    t1 = t0 === void 0 ? {} : t0;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const ownerState = t1;
+  let t2;
+  if ($[2] !== ariaLabel || $[3] !== ariaLabelledBy || $[4] !== ownerState.anchorEl) {
+    t2 = (element) => {
+      if (!element || !(ownerState.anchorEl instanceof HTMLElement)) {
+        return;
+      }
+      if (ariaLabel || ariaLabelledBy || element.ariaLabel || element.ariaLabelledByElements?.length) {
+        return;
+      }
+      element.ariaLabelledByElements = [ownerState.anchorEl];
+    };
+    $[2] = ariaLabel;
+    $[3] = ariaLabelledBy;
+    $[4] = ownerState.anchorEl;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+const MuiPopoverPaperSlot = forwardRef((props, forwardedRef) => {
+  const $ = _c(3);
+  const t0 = useMergedRefs(forwardedRef, useFallbackLabel(props));
+  let t1;
+  if ($[0] !== props || $[1] !== t0) {
+    t1 = jsx(PopoverPaper, {
+      ...props,
+      ref: t0
+    });
+    $[0] = props;
+    $[1] = t0;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  return t1;
+});
+export {
+  MuiPopoverPaperSlot,
+  useFallbackLabel
+};

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

@@ -0,0 +1,8 @@
+import { type BaseProps } from "@stratakit/foundations/secret-internals";
+import type Tabs from "@mui/material/Tabs";
+type TabsProps = React.ComponentProps<typeof Tabs>;
+interface MuiTabsProps extends BaseProps<"div">, Pick<TabsProps, "size"> {
+}
+declare const MuiTabs: import("react").ForwardRefExoticComponent<MuiTabsProps & import("react").RefAttributes<HTMLElement | HTMLDivElement>>;
+declare const MuiTab: import("react").ForwardRefExoticComponent<Pick<import("@ariakit/react/role").RoleProps, "render"> & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "render"> & import("react").RefAttributes<HTMLElement | HTMLButtonElement>>;
+export { MuiTab, MuiTabs };

package/dist/~components/MuiTabs.js

@@ -0,0 +1,33 @@
+import { jsx } from "react/jsx-runtime";
+import { Role } from "@ariakit/react/role";
+import useMediaQuery from "@mui/material/useMediaQuery";
+import { forwardRef, useEventHandlers } from "@stratakit/foundations/secret-internals";
+const MuiTabs = forwardRef((props, forwardedRef) => {
+  const {
+    size = "medium",
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(Role.div, {
+    ...rest,
+    "data-_sk-size": size !== "medium" ? size : void 0,
+    ref: forwardedRef
+  });
+});
+const MuiTab = forwardRef((props, forwardedRef) => {
+  const motionOk = useMediaQuery("(prefers-reduced-motion: no-preference)");
+  return /* @__PURE__ */ jsx(Role.button, {
+    ...props,
+    onFocus: useEventHandlers(props.onFocus, (event) => {
+      event?.currentTarget?.scrollIntoView({
+        block: "nearest",
+        inline: "nearest",
+        behavior: motionOk ? "smooth" : "auto"
+      });
+    }),
+    ref: forwardedRef
+  });
+});
+export {
+  MuiTab,
+  MuiTabs
+};

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

@@ -1,2 +1,18 @@
+declare const variantMapping: {
+    h1: string;
+    h2: string;
+    h3: string;
+    h4: string;
+    h5: string;
+    h6: string;
+    subtitle1: string;
+    subtitle2: string;
+    body1: string;
+    body2: string;
+    inherit: string;
+    button: string;
+    caption: string;
+    overline: string;
+};
 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 };
+export { MuiTypography, variantMapping };

package/dist/~components/MuiTypography.js

@@ -4,12 +4,12 @@ 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",
+  h3: "h2",
+  h4: "h2",
+  h5: "h2",
+  h6: "h2",
+  subtitle1: "h2",
+  subtitle2: "h2",
   body1: "p",
   body2: "p",
   inherit: "p",
@@ -17,16 +17,16 @@ const variantMapping = {
   caption: "span",
   overline: "span"
 };
-const variants = Object.keys(variantMapping);
+const muiVariants = 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 muiVariant = (() => {
+    const variant = muiVariants.find((name) => classList?.includes(`MuiTypography-${name}`));
+    return variant || "body2";
   })();
   const render = (() => {
-    const Element = variantMapping[variant] || "p";
+    const Element = muiVariant in variantMapping ? variantMapping[muiVariant] : "p";
     return /* @__PURE__ */ jsx(Element, {});
   })();
   return /* @__PURE__ */ jsx(Role, {
@@ -36,5 +36,6 @@ const MuiTypography = forwardRef((props, forwardedRef) => {
   });
 });
 export {
-  MuiTypography
+  MuiTypography,
+  variantMapping
 };

package/dist/~createTheme.d.ts

@@ -1,3 +1,6 @@
+interface CreateThemeArgs {
+    portalContainer?: HTMLElement | null;
+}
 /** Creates a StrataKit theme for MUI. Should be used with MUI's `ThemeProvider`. */
-declare function createTheme(): import("@mui/material/styles").Theme;
+declare function createTheme(args: CreateThemeArgs): import("@mui/material/styles").Theme;
 export { createTheme };