@stratakit/mui 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# Changelog
+
+## 0.1.0
+
+Initial release 🥳

package/LICENSE.md

@@ -0,0 +1,9 @@
+# MIT License
+
+Copyright © 2025 Bentley Systems, Incorporated. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,85 @@
+# @stratakit/mui
+
+StrataKit theme for [MUI](https://mui.com/material-ui/).
+
+## Installation and setup
+
+Using your package manager of choice, install the latest version of [`@stratakit/mui`](https://www.npmjs.com/package/@stratakit/mui?activeTab=versions).
+
+```console
+npm add @stratakit/mui
+```
+
+Additional setup/considerations:
+
+- `@stratakit/mui` has a direct dependency on [`@stratakit/foundations`](https://www.npmjs.com/package/@stratakit/foundations) and [`@stratakit/icons`](https://www.npmjs.com/package/@stratakit/icons), the latter of which requires [bundler configuration](https://github.com/iTwin/design-system/tree/main/packages/icons#bundler-configuration) to ensure that `.svg` files are not inlined.
+- You should ensure that [StrataKit fonts](#fonts) are loaded in your application.
+- If you are trying to use this package alongside iTwinUI, you will also need to set up the [theme bridge](https://github.com/iTwin/iTwinUI/wiki/StrataKit-theme-bridge).
+
+## Usage
+
+To use the StrataKit MUI theme, you’ll need to wrap your application's entrypoint with the `<Root>` component and set its `colorScheme` (to `"light"` or `"dark"`). This component will automatically configure MUI's `ThemeProvider` with the StrataKit theme.
+
+```jsx
+import { Root } from "@stratakit/mui";
+
+export function App() {
+	return <Root colorScheme={…}>{/* Use @mui/material components here */}</Root>;
+}
+```
+
+Now you can use any components directly from `@mui/material`, and they will be automatically themed to use StrataKit's visual language.
+
+> [!CAUTION]
+> Do not use MUI's `ThemeProvider`, `StyledEngineProvider`, or `CssBaseline` components directly. The `Root` component will handle all global configuration for you.
+
+### Icon component
+
+`@stratakit/mui` also exports an `Icon` component that makes it easy to use `.svg` icons from [`@stratakit/icons`](https://www.npmjs.com/package/@stratakit/icons).
+
+```jsx
+import { Icon } from "@stratakit/mui";
+import svgPlaceholder from "@stratakit/icons/placeholder.svg";
+
+<Icon href={svgPlaceholder} />;
+```
+
+> [!NOTE]
+> `@stratakit/icons` requires [bundler configuration](https://github.com/iTwin/design-system/tree/main/packages/icons#bundler-configuration) to ensure that `.svg` files are not inlined.
+
+## Fonts
+
+StrataKit uses [InterVariable](https://rsms.me/inter/) as its interface font. In the future, other fonts may also be added for different purposes. We recommend self-hosting all fonts for robustness, security and performance reasons.
+
+To self-host `InterVariable`, download the [`InterVariable.woff2`](https://rsms.me/inter/font-files/InterVariable.woff2) and [`InterVariable-Italic.woff2`](https://rsms.me/inter/font-files/InterVariable-Italic.woff2) font files from the official website, and serve them alongside your other assets. Then include the following CSS in the `<head>` of your document, replacing the placeholder paths with the correct path to where the fonts are located:
+
+```html
+<style>
+	@font-face {
+		font-family: InterVariable;
+		font-style: normal;
+		font-weight: 100 900;
+		font-display: swap;
+		src: url("/path/to/InterVariable.woff2") format("woff2");
+	}
+
+	@font-face {
+		font-family: InterVariable;
+		font-style: italic;
+		font-weight: 100 900;
+		font-display: swap;
+		src: url("/path/to/InterVariable-Italic.woff2") format("woff2");
+	}
+</style>
+```
+
+Build tools such as [Vite](https://vite.dev/guide/assets.html#importing-asset-as-url) can handle `url()` references and automatically copy these files into your output directory with hashed file names. These files can then be safely served with [HTTP caching](https://developer.chrome.com/docs/lighthouse/performance/uses-long-cache-ttl/#how_to_cache_static_resources_using_http_caching) without blocking upgrades to newer versions of the fonts.
+
+> [!NOTE]
+> If the `<Root>` component cannot find `InterVariable` as a font in the document, it will automatically add a fallback which uses [Inter’s CDN](https://rsms.me/inter/#faq-cdn). In all cases, we recommend self-hosting to avoid any potential security and reliability issues that may arise from the use of a third-party CDN.
+
+## Contributing
+
+Are you interested in helping StrataKit grow? You can submit feature requests or bugs by creating [issues](https://github.com/iTwin/design-system/issues).
+
+If you're interested in contributing code, please read [`CONTRIBUTING.md`](https://github.com/iTwin/design-system/blob/main/CONTRIBUTING.md) for more information.

package/dist/DEV/Icon.js

@@ -0,0 +1,49 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Icon } from "@stratakit/foundations";
+import svgArrowDown from "@stratakit/icons/arrow-down.svg";
+import svgCaretsUpDown from "@stratakit/icons/carets-up-down.svg";
+import svgChevronDown from "@stratakit/icons/chevron-down.svg";
+import svgChevronLeft from "@stratakit/icons/chevron-left.svg";
+import svgChevronLeftDouble from "@stratakit/icons/chevron-left-double.svg";
+import svgChevronRight from "@stratakit/icons/chevron-right.svg";
+import svgChevronRightDouble from "@stratakit/icons/chevron-right-double.svg";
+import svgDismiss from "@stratakit/icons/dismiss.svg";
+import svgError from "@stratakit/icons/error.svg";
+import svgInfo from "@stratakit/icons/info.svg";
+import svgStatusSuccess from "@stratakit/icons/status-success.svg";
+import svgWarning from "@stratakit/icons/warning.svg";
+function createIconComponent(href) {
+  return React.forwardRef(
+    function IconComponent(props, forwardedRef) {
+      return /* @__PURE__ */ jsx(Icon, { ...props, href, ref: forwardedRef });
+    }
+  );
+}
+const ArrowDownIcon = createIconComponent(svgArrowDown);
+const CaretsUpDownIcon = createIconComponent(svgCaretsUpDown);
+const ChevronDownIcon = createIconComponent(svgChevronDown);
+const ChevronLeftIcon = createIconComponent(svgChevronLeft);
+const ChevronLeftDoubleIcon = createIconComponent(svgChevronLeftDouble);
+const ChevronRightIcon = createIconComponent(svgChevronRight);
+const ChevronRightDoubleIcon = createIconComponent(svgChevronRightDouble);
+const DismissIcon = createIconComponent(svgDismiss);
+const ErrorIcon = createIconComponent(svgError);
+const InfoIcon = createIconComponent(svgInfo);
+const SuccessIcon = createIconComponent(svgStatusSuccess);
+const WarningIcon = createIconComponent(svgWarning);
+export {
+  ArrowDownIcon,
+  CaretsUpDownIcon,
+  ChevronDownIcon,
+  ChevronLeftDoubleIcon,
+  ChevronLeftIcon,
+  ChevronRightDoubleIcon,
+  ChevronRightIcon,
+  DismissIcon,
+  ErrorIcon,
+  Icon,
+  InfoIcon,
+  SuccessIcon,
+  WarningIcon
+};

package/dist/DEV/Root.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import {
+  StyledEngineProvider,
+  ThemeProvider,
+  useColorScheme
+} from "@mui/material/styles";
+import { Root as StrataKitRoot } from "@stratakit/foundations";
+import {
+  RootContext,
+  useSafeContext
+} from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { createTheme } from "./createTheme.js";
+import css from "./styles.css.js";
+const theme = createTheme();
+const packageName = "@stratakit/mui";
+const key = `${packageName}@${"0.1.0"}`;
+const Root = React.forwardRef(
+  (props, forwardedRef) => {
+    const { children, colorScheme, ...rest } = props;
+    return /* @__PURE__ */ jsx(StyledEngineProvider, { enableCssLayer: true, children: /* @__PURE__ */ jsxs(ThemeProvider, { theme, defaultMode: colorScheme, children: [
+      /* @__PURE__ */ jsx(ColorScheme, { colorScheme }),
+      /* @__PURE__ */ jsxs(RootInner, { ...rest, colorScheme, ref: forwardedRef, children: [
+        /* @__PURE__ */ jsx(Styles, {}),
+        children
+      ] })
+    ] }) });
+  }
+);
+DEV: Root.displayName = "Root";
+const RootInner = React.forwardRef(
+  (props, forwardedRef) => {
+    const { children, colorScheme, ...rest } = props;
+    return /* @__PURE__ */ jsx(
+      StrataKitRoot,
+      {
+        ...rest,
+        className: cx("\u{1F95D}MuiRoot", props.className),
+        colorScheme,
+        synchronizeColorScheme: true,
+        ref: forwardedRef,
+        children
+      }
+    );
+  }
+);
+DEV: RootInner.displayName = "RootInner";
+function ColorScheme({ colorScheme }) {
+  const { setColorScheme } = useColorScheme();
+  React.useEffect(() => {
+    setColorScheme(colorScheme);
+  }, [colorScheme, setColorScheme]);
+  return null;
+}
+DEV: ColorScheme.displayName = "ColorScheme";
+function Styles() {
+  const rootContext = useSafeContext(RootContext);
+  if (!rootContext.versions?.has(packageName))
+    rootContext.versions?.set(packageName, "0.1.0");
+  const { rootNode, loadStyles } = rootContext;
+  React.useInsertionEffect(() => {
+    if (!rootNode || !loadStyles) return;
+    const { cleanup } = loadStyles(rootNode, { css, key });
+    return cleanup;
+  }, [rootNode, loadStyles]);
+  return null;
+}
+export {
+  Root
+};

package/dist/DEV/createTheme.js

@@ -0,0 +1,147 @@
+import { jsx } from "react/jsx-runtime";
+import { createTheme as createMuiTheme } from "@mui/material/styles";
+import {
+  ArrowDownIcon,
+  CaretsUpDownIcon,
+  ChevronDownIcon,
+  ChevronLeftDoubleIcon,
+  ChevronLeftIcon,
+  ChevronRightDoubleIcon,
+  ChevronRightIcon,
+  DismissIcon,
+  ErrorIcon,
+  InfoIcon,
+  SuccessIcon,
+  WarningIcon
+} from "./Icon.js";
+function createTheme() {
+  return createMuiTheme({
+    cssVariables: {
+      nativeColor: true,
+      colorSchemeSelector: "[data-color-scheme='%s']",
+      cssVarPrefix: "stratakit-mui"
+    },
+    colorSchemes: {
+      light: true,
+      dark: true
+    },
+    typography: {
+      fontFamily: "var(--stratakit-font-family-sans)",
+      fontSize: 14,
+      button: {
+        textTransform: "none"
+        // Disable all-caps on buttons and tabs
+      }
+    },
+    shadows: [
+      "none",
+      // 0
+      "none",
+      // 1
+      "var(--stratakit-shadow-surface-xs)",
+      // 2
+      "var(--stratakit-shadow-surface-sm)",
+      // 3
+      ...new Array(4).fill("var(--stratakit-shadow-surface-md)"),
+      // 4-7
+      ...new Array(17).fill("var(--stratakit-shadow-surface-lg)")
+      // 8-24
+      // biome-ignore lint/suspicious/noExplicitAny: MUI expects 25 items in the shadows array
+    ],
+    components: {
+      MuiAccordionSummary: {
+        defaultProps: {
+          expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+        }
+      },
+      MuiAlert: {
+        defaultProps: {
+          iconMapping: {
+            error: /* @__PURE__ */ jsx(ErrorIcon, {}),
+            info: /* @__PURE__ */ jsx(InfoIcon, {}),
+            success: /* @__PURE__ */ jsx(SuccessIcon, {}),
+            warning: /* @__PURE__ */ jsx(WarningIcon, {})
+          }
+        }
+      },
+      MuiAutocomplete: {
+        defaultProps: {
+          popupIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+          clearIcon: /* @__PURE__ */ jsx(DismissIcon, {}),
+          slotProps: {
+            paper: {
+              elevation: 8
+              // match Menu elevation
+            }
+          }
+        }
+      },
+      MuiBreadcrumbs: {
+        defaultProps: {
+          separator: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        }
+      },
+      MuiButtonBase: {
+        defaultProps: {
+          disableRipple: true
+          // https://mui.com/material-ui/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally
+        }
+      },
+      MuiButton: {
+        defaultProps: {
+          color: "secondary"
+        }
+      },
+      MuiChip: {
+        defaultProps: {
+          deleteIcon: /* @__PURE__ */ jsx(DismissIcon, {})
+        }
+      },
+      MuiCheckbox: {
+        defaultProps: {
+          disableRipple: true
+          // Checkbox doesn't inherit from ButtonBase
+        }
+      },
+      MuiLink: {
+        defaultProps: {
+          color: "textPrimary"
+        }
+      },
+      MuiPaginationItem: {
+        defaultProps: {
+          slots: {
+            previous: ChevronLeftIcon,
+            next: ChevronRightIcon,
+            first: ChevronLeftDoubleIcon,
+            last: ChevronRightDoubleIcon
+          }
+        }
+      },
+      MuiSelect: {
+        defaultProps: {
+          IconComponent: CaretsUpDownIcon
+        }
+      },
+      MuiTablePaginationActions: {
+        defaultProps: {
+          slots: {
+            previousButtonIcon: ChevronLeftIcon,
+            nextButtonIcon: ChevronRightIcon,
+            firstButtonIcon: ChevronLeftDoubleIcon,
+            lastButtonIcon: ChevronRightDoubleIcon
+          }
+        }
+      },
+      MuiTableSortLabel: {
+        defaultProps: {
+          // TODO: This should use sort-ascending and sort-descending icons, but that requires disabling MUI's built-in icon rotation.
+          IconComponent: ArrowDownIcon
+        }
+      }
+    }
+  });
+}
+export {
+  createTheme
+};

package/dist/DEV/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { createTheme } from "./createTheme.js";
+import { Icon } from "./Icon.js";
+import { Root } from "./Root.js";
+export {
+  Icon,
+  Root,
+  createTheme
+};

package/dist/DEV/styles.css.js

@@ -0,0 +1,8 @@
+// inline-css:/home/runner/work/design-system/design-system/packages/mui/src/styles.css
+var styles_default = String.raw`@layer stratakit{[data-color-scheme],.🥝MuiRoot{--stratakit-mui-palette-background-default:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-divider:var(--stratakit-color-border-page-base);--stratakit-mui-palette-text-primary:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-text-secondary:var(--stratakit-color-text-neutral-secondary);--stratakit-mui-palette-text-disabled:var(--stratakit-color-text-neutral-disabled);--stratakit-mui-palette-primary-main:var(--stratakit-color-bg-accent-base);--stratakit-mui-palette-primary-dark:var(--stratakit-color-bg-accent-faded);--stratakit-mui-palette-primary-light:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-primary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-secondary-main:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-secondary-dark:var(--stratakit-color-bg-mono-faded);--stratakit-mui-palette-secondary-light:var(--stratakit-color-bg-mono-muted);--stratakit-mui-palette-secondary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-action-active:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-action-disabled:var(--stratakit-color-icon-neutral-disabled);--stratakit-mui-palette-action-disabledBackground:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-error-main:var(--stratakit-color-bg-critical-base);--stratakit-mui-palette-error-dark:var(--stratakit-color-bg-critical-faded);--stratakit-mui-palette-error-light:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-error-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-warning-main:var(--stratakit-color-bg-severe-base);--stratakit-mui-palette-warning-dark:var(--stratakit-color-bg-severe-faded);--stratakit-mui-palette-warning-light:var(--stratakit-color-bg-severe-muted);--stratakit-mui-palette-warning-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-success-main:var(--stratakit-color-bg-positive-base);--stratakit-mui-palette-success-dark:var(--stratakit-color-bg-positive-faded);--stratakit-mui-palette-success-light:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-success-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-info-main:var(--stratakit-color-bg-info-base);--stratakit-mui-palette-info-dark:var(--stratakit-color-bg-info-faded);--stratakit-mui-palette-info-light:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-info-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-grey-50:oklch(85.95% .006 255.48);--stratakit-mui-palette-grey-100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-300:oklch(69.04% .014 255.53);--stratakit-mui-palette-grey-400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-500:oklch(55.22% .018 253.99);--stratakit-mui-palette-grey-600:oklch(48.26% .017 254.7);--stratakit-mui-palette-grey-700:oklch(41.45% .013 256.75);--stratakit-mui-palette-grey-800:oklch(34.4% .011 264.42);--stratakit-mui-palette-grey-900:oklch(26.92% .008 268.32);--stratakit-mui-palette-grey-A100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-A200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-A400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-A700:oklch(48.26% .017 254.7)}.MuiAlert-icon{align-items:center}.MuiButton-root:where(.MuiButton-colorSecondary){--variant-containedBg:var(--stratakit-color-bg-neutral-base);--variant-containedColor:var(--stratakit-color-text-neutral-primary);--variant-outlinedColor:var(--stratakit-color-text-neutral-primary);--variant-textColor:var(--stratakit-color-text-neutral-primary)}.MuiButton-root:where(.MuiButton-colorSecondary):where(:hover){--variant-containedBg:color-mix(in oklch,var(--stratakit-color-bg-neutral-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%))}.MuiButton-root:where(.MuiButton-colorPrimary){--variant-outlinedColor:var(--stratakit-color-text-accent-strong);--variant-textColor:var(--stratakit-color-text-accent-strong)}.MuiCheckbox-root:where(.MuiCheckbox-colorPrimary):where(.Mui-checked,.MuiCheckbox-indeterminate):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiCheckbox-root:where(.Mui-focusVisible){outline:2px solid var(--stratakit-color-border-accent-strong)}.MuiFormLabel-colorPrimary.Mui-focused{color:var(--stratakit-mui-palette-primary-dark)}.MuiLink-root{text-underline-offset:var(--stratakit-space-x05);font-weight:500;text-decoration-color:currentColor;transition:text-underline-offset .15s ease-out}.MuiLink-root:where(:hover,:focus-visible){text-underline-offset:var(--stratakit-space-x1)}.MuiMenuItem-root:where(.Mui-focusVisible){outline-offset:-2px}.MuiPaper-root{--Paper-overlay:unset!important}.MuiPaper-root:where(.MuiPaper-elevation1){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-base)}.MuiPaper-root:where(.MuiPaper-elevation2,.MuiPaper-elevation3,.MuiPaper-elevation4,.MuiPaper-elevation5,.MuiPaper-elevation6,.MuiPaper-elevation7){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-base)}.MuiPaper-root:where(.MuiPaper-elevation8,.MuiPaper-elevation9,.MuiPaper-elevation10,.MuiPaper-elevation11,.MuiPaper-elevation12,.MuiPaper-elevation13,.MuiPaper-elevation14,.MuiPaper-elevation15,.MuiPaper-elevation16,.MuiPaper-elevation17,.MuiPaper-elevation18,.MuiPaper-elevation19,.MuiPaper-elevation20,.MuiPaper-elevation21,.MuiPaper-elevation22,.MuiPaper-elevation23,.MuiPaper-elevation24){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-level-1)}.MuiTab-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiTab-root:where(:focus-visible){outline-offset:-4px}.MuiTabs-indicator{background-color:var(--stratakit-color-border-accent-strong)}.MuiTooltip-tooltip{--stratakit-mui-palette-Tooltip-bg:var(--stratakit-color-bg-elevation-emphasis);box-shadow:var(--stratakit-shadow-control-tooltip-base)}.MuiSwitch-root .MuiSwitch-switchBase:where(.MuiSwitch-colorPrimary):where(.Mui-checked):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiSwitch-root:where(:has(.MuiSwitch-switchBase.Mui-focusVisible)){outline:2px solid var(--stratakit-color-border-accent-strong)}}`;
+
+// src/styles.css.ts
+var styles_css_default = styles_default;
+export {
+  styles_css_default as default
+};

package/dist/Icon.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+import { Icon } from "@stratakit/foundations";
+declare const ArrowDownIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const CaretsUpDownIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ChevronDownIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ChevronLeftIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ChevronLeftDoubleIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ChevronRightIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ChevronRightDoubleIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const DismissIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const ErrorIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const InfoIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const SuccessIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+declare const WarningIcon: React.ForwardRefExoticComponent<Omit<React.SVGProps<SVGSVGElement>, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export { Icon, ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftIcon, ChevronLeftDoubleIcon, ChevronRightIcon, ChevronRightDoubleIcon, DismissIcon, InfoIcon, SuccessIcon, WarningIcon, ErrorIcon, };

package/dist/Icon.js

@@ -0,0 +1,51 @@
+import { jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Icon } from "@stratakit/foundations";
+import svgArrowDown from "@stratakit/icons/arrow-down.svg";
+import svgCaretsUpDown from "@stratakit/icons/carets-up-down.svg";
+import svgChevronDown from "@stratakit/icons/chevron-down.svg";
+import svgChevronLeft from "@stratakit/icons/chevron-left.svg";
+import svgChevronLeftDouble from "@stratakit/icons/chevron-left-double.svg";
+import svgChevronRight from "@stratakit/icons/chevron-right.svg";
+import svgChevronRightDouble from "@stratakit/icons/chevron-right-double.svg";
+import svgDismiss from "@stratakit/icons/dismiss.svg";
+import svgError from "@stratakit/icons/error.svg";
+import svgInfo from "@stratakit/icons/info.svg";
+import svgStatusSuccess from "@stratakit/icons/status-success.svg";
+import svgWarning from "@stratakit/icons/warning.svg";
+function createIconComponent(href) {
+  return React.forwardRef(function IconComponent(props, forwardedRef) {
+    return /* @__PURE__ */ jsx(Icon, {
+      ...props,
+      href,
+      ref: forwardedRef
+    });
+  });
+}
+const ArrowDownIcon = createIconComponent(svgArrowDown);
+const CaretsUpDownIcon = createIconComponent(svgCaretsUpDown);
+const ChevronDownIcon = createIconComponent(svgChevronDown);
+const ChevronLeftIcon = createIconComponent(svgChevronLeft);
+const ChevronLeftDoubleIcon = createIconComponent(svgChevronLeftDouble);
+const ChevronRightIcon = createIconComponent(svgChevronRight);
+const ChevronRightDoubleIcon = createIconComponent(svgChevronRightDouble);
+const DismissIcon = createIconComponent(svgDismiss);
+const ErrorIcon = createIconComponent(svgError);
+const InfoIcon = createIconComponent(svgInfo);
+const SuccessIcon = createIconComponent(svgStatusSuccess);
+const WarningIcon = createIconComponent(svgWarning);
+export {
+  ArrowDownIcon,
+  CaretsUpDownIcon,
+  ChevronDownIcon,
+  ChevronLeftDoubleIcon,
+  ChevronLeftIcon,
+  ChevronRightDoubleIcon,
+  ChevronRightIcon,
+  DismissIcon,
+  ErrorIcon,
+  Icon,
+  InfoIcon,
+  SuccessIcon,
+  WarningIcon
+};

package/dist/Root.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+interface RootProps extends React.ComponentPropsWithoutRef<"div"> {
+    children?: React.ReactNode;
+    /**
+     * The color scheme to use for all components on the page.
+     */
+    colorScheme: "light" | "dark";
+}
+/**
+ * Component to be used at the root of your application. It ensures that StrataKit theme for MUI is applied correctly.
+ *
+ * Example:
+ * ```tsx
+ * <Root colorScheme="dark">
+ *   <App />
+ * </Root>
+ * ```
+ */
+declare const Root: React.ForwardRefExoticComponent<RootProps & React.RefAttributes<HTMLDivElement>>;
+export { Root };

package/dist/Root.js

@@ -0,0 +1,115 @@
+import { c as _c } from "react-compiler-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { StyledEngineProvider, ThemeProvider, useColorScheme } from "@mui/material/styles";
+import { Root as StrataKitRoot } from "@stratakit/foundations";
+import { RootContext, useSafeContext } from "@stratakit/foundations/secret-internals";
+import cx from "classnames";
+import { createTheme } from "./createTheme.js";
+import css from "./styles.css.js";
+const theme = createTheme();
+const packageName = "@stratakit/mui";
+const key = `${packageName}@${"0.1.0"}`;
+const Root = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    colorScheme,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(StyledEngineProvider, {
+    enableCssLayer: true,
+    children: /* @__PURE__ */ jsxs(ThemeProvider, {
+      theme,
+      defaultMode: colorScheme,
+      children: [/* @__PURE__ */ jsx(ColorScheme, {
+        colorScheme
+      }), /* @__PURE__ */ jsxs(RootInner, {
+        ...rest,
+        colorScheme,
+        ref: forwardedRef,
+        children: [/* @__PURE__ */ jsx(Styles, {}), children]
+      })]
+    })
+  });
+});
+const RootInner = React.forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    colorScheme,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsx(StrataKitRoot, {
+    ...rest,
+    className: cx("\u{1F95D}MuiRoot", props.className),
+    colorScheme,
+    synchronizeColorScheme: true,
+    ref: forwardedRef,
+    children
+  });
+});
+function ColorScheme(t0) {
+  const $ = _c(4);
+  const {
+    colorScheme
+  } = t0;
+  const {
+    setColorScheme
+  } = useColorScheme();
+  let t1;
+  let t2;
+  if ($[0] !== colorScheme || $[1] !== setColorScheme) {
+    t1 = () => {
+      setColorScheme(colorScheme);
+    };
+    t2 = [colorScheme, setColorScheme];
+    $[0] = colorScheme;
+    $[1] = setColorScheme;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  React.useEffect(t1, t2);
+  return null;
+}
+function Styles() {
+  const $ = _c(4);
+  const rootContext = useSafeContext(RootContext);
+  if (!rootContext.versions?.has(packageName)) {
+    rootContext.versions?.set(packageName, "0.1.0");
+  }
+  const {
+    rootNode,
+    loadStyles
+  } = rootContext;
+  let t0;
+  let t1;
+  if ($[0] !== loadStyles || $[1] !== rootNode) {
+    t0 = () => {
+      if (!rootNode || !loadStyles) {
+        return;
+      }
+      const {
+        cleanup
+      } = loadStyles(rootNode, {
+        css,
+        key
+      });
+      return cleanup;
+    };
+    t1 = [rootNode, loadStyles];
+    $[0] = loadStyles;
+    $[1] = rootNode;
+    $[2] = t0;
+    $[3] = t1;
+  } else {
+    t0 = $[2];
+    t1 = $[3];
+  }
+  React.useInsertionEffect(t0, t1);
+  return null;
+}
+export {
+  Root
+};

package/dist/createTheme.d.ts

@@ -0,0 +1,16 @@
+/**
+ * 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 };

package/dist/createTheme.js

@@ -0,0 +1,134 @@
+import { jsx } from "react/jsx-runtime";
+import { createTheme as createMuiTheme } from "@mui/material/styles";
+import { ArrowDownIcon, CaretsUpDownIcon, ChevronDownIcon, ChevronLeftDoubleIcon, ChevronLeftIcon, ChevronRightDoubleIcon, ChevronRightIcon, DismissIcon, ErrorIcon, InfoIcon, SuccessIcon, WarningIcon } from "./Icon.js";
+function createTheme() {
+  return createMuiTheme({
+    cssVariables: {
+      nativeColor: true,
+      colorSchemeSelector: "[data-color-scheme='%s']",
+      cssVarPrefix: "stratakit-mui"
+    },
+    colorSchemes: {
+      light: true,
+      dark: true
+    },
+    typography: {
+      fontFamily: "var(--stratakit-font-family-sans)",
+      fontSize: 14,
+      button: {
+        textTransform: "none"
+        // Disable all-caps on buttons and tabs
+      }
+    },
+    shadows: [
+      "none",
+      // 0
+      "none",
+      // 1
+      "var(--stratakit-shadow-surface-xs)",
+      // 2
+      "var(--stratakit-shadow-surface-sm)",
+      // 3
+      ...new Array(4).fill("var(--stratakit-shadow-surface-md)"),
+      // 4-7
+      ...new Array(17).fill("var(--stratakit-shadow-surface-lg)")
+      // 8-24
+      // biome-ignore lint/suspicious/noExplicitAny: MUI expects 25 items in the shadows array
+    ],
+    components: {
+      MuiAccordionSummary: {
+        defaultProps: {
+          expandIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {})
+        }
+      },
+      MuiAlert: {
+        defaultProps: {
+          iconMapping: {
+            error: /* @__PURE__ */ jsx(ErrorIcon, {}),
+            info: /* @__PURE__ */ jsx(InfoIcon, {}),
+            success: /* @__PURE__ */ jsx(SuccessIcon, {}),
+            warning: /* @__PURE__ */ jsx(WarningIcon, {})
+          }
+        }
+      },
+      MuiAutocomplete: {
+        defaultProps: {
+          popupIcon: /* @__PURE__ */ jsx(ChevronDownIcon, {}),
+          clearIcon: /* @__PURE__ */ jsx(DismissIcon, {}),
+          slotProps: {
+            paper: {
+              elevation: 8
+              // match Menu elevation
+            }
+          }
+        }
+      },
+      MuiBreadcrumbs: {
+        defaultProps: {
+          separator: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+        }
+      },
+      MuiButtonBase: {
+        defaultProps: {
+          disableRipple: true
+          // https://mui.com/material-ui/getting-started/faq/#how-can-i-disable-the-ripple-effect-globally
+        }
+      },
+      MuiButton: {
+        defaultProps: {
+          color: "secondary"
+        }
+      },
+      MuiChip: {
+        defaultProps: {
+          deleteIcon: /* @__PURE__ */ jsx(DismissIcon, {})
+        }
+      },
+      MuiCheckbox: {
+        defaultProps: {
+          disableRipple: true
+          // Checkbox doesn't inherit from ButtonBase
+        }
+      },
+      MuiLink: {
+        defaultProps: {
+          color: "textPrimary"
+        }
+      },
+      MuiPaginationItem: {
+        defaultProps: {
+          slots: {
+            previous: ChevronLeftIcon,
+            next: ChevronRightIcon,
+            first: ChevronLeftDoubleIcon,
+            last: ChevronRightDoubleIcon
+          }
+        }
+      },
+      MuiSelect: {
+        defaultProps: {
+          IconComponent: CaretsUpDownIcon
+        }
+      },
+      MuiTablePaginationActions: {
+        defaultProps: {
+          slots: {
+            previousButtonIcon: ChevronLeftIcon,
+            nextButtonIcon: ChevronRightIcon,
+            firstButtonIcon: ChevronLeftDoubleIcon,
+            lastButtonIcon: ChevronRightDoubleIcon
+          }
+        }
+      },
+      MuiTableSortLabel: {
+        defaultProps: {
+          // TODO: This should use sort-ascending and sort-descending icons, but that requires disabling MUI's built-in icon rotation.
+          IconComponent: ArrowDownIcon
+        }
+      }
+    }
+  });
+}
+export {
+  createTheme
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { createTheme } from "./createTheme.js";
+export { Icon } from "./Icon.js";
+export { Root } from "./Root.js";

package/dist/index.js

@@ -0,0 +1,9 @@
+"use client";
+import { createTheme } from "./createTheme.js";
+import { Icon } from "./Icon.js";
+import { Root } from "./Root.js";
+export {
+  Icon,
+  Root,
+  createTheme
+};

package/dist/styles.css.d.ts

@@ -0,0 +1,2 @@
+import rawStyles from "./styles.css?inline";
+export default rawStyles;

package/dist/styles.css.js

@@ -0,0 +1,8 @@
+// inline-css:/home/runner/work/design-system/design-system/packages/mui/src/styles.css
+var styles_default = String.raw`@layer stratakit{[data-color-scheme],.🥝MuiRoot{--stratakit-mui-palette-background-default:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-depth);--stratakit-mui-palette-divider:var(--stratakit-color-border-page-base);--stratakit-mui-palette-text-primary:var(--stratakit-color-text-neutral-primary);--stratakit-mui-palette-text-secondary:var(--stratakit-color-text-neutral-secondary);--stratakit-mui-palette-text-disabled:var(--stratakit-color-text-neutral-disabled);--stratakit-mui-palette-primary-main:var(--stratakit-color-bg-accent-base);--stratakit-mui-palette-primary-dark:var(--stratakit-color-bg-accent-faded);--stratakit-mui-palette-primary-light:var(--stratakit-color-bg-accent-muted);--stratakit-mui-palette-primary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-secondary-main:var(--stratakit-color-bg-mono-base);--stratakit-mui-palette-secondary-dark:var(--stratakit-color-bg-mono-faded);--stratakit-mui-palette-secondary-light:var(--stratakit-color-bg-mono-muted);--stratakit-mui-palette-secondary-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-action-active:var(--stratakit-color-icon-neutral-primary);--stratakit-mui-palette-action-disabled:var(--stratakit-color-icon-neutral-disabled);--stratakit-mui-palette-action-disabledBackground:var(--stratakit-color-bg-glow-on-surface-disabled);--stratakit-mui-palette-error-main:var(--stratakit-color-bg-critical-base);--stratakit-mui-palette-error-dark:var(--stratakit-color-bg-critical-faded);--stratakit-mui-palette-error-light:var(--stratakit-color-bg-critical-muted);--stratakit-mui-palette-error-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-warning-main:var(--stratakit-color-bg-severe-base);--stratakit-mui-palette-warning-dark:var(--stratakit-color-bg-severe-faded);--stratakit-mui-palette-warning-light:var(--stratakit-color-bg-severe-muted);--stratakit-mui-palette-warning-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-success-main:var(--stratakit-color-bg-positive-base);--stratakit-mui-palette-success-dark:var(--stratakit-color-bg-positive-faded);--stratakit-mui-palette-success-light:var(--stratakit-color-bg-positive-muted);--stratakit-mui-palette-success-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-info-main:var(--stratakit-color-bg-info-base);--stratakit-mui-palette-info-dark:var(--stratakit-color-bg-info-faded);--stratakit-mui-palette-info-light:var(--stratakit-color-bg-info-muted);--stratakit-mui-palette-info-contrastText:var(--stratakit-color-text-neutral-emphasis);--stratakit-mui-palette-grey-50:oklch(85.95% .006 255.48);--stratakit-mui-palette-grey-100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-300:oklch(69.04% .014 255.53);--stratakit-mui-palette-grey-400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-500:oklch(55.22% .018 253.99);--stratakit-mui-palette-grey-600:oklch(48.26% .017 254.7);--stratakit-mui-palette-grey-700:oklch(41.45% .013 256.75);--stratakit-mui-palette-grey-800:oklch(34.4% .011 264.42);--stratakit-mui-palette-grey-900:oklch(26.92% .008 268.32);--stratakit-mui-palette-grey-A100:oklch(79.56% .008 241.69);--stratakit-mui-palette-grey-A200:oklch(75.82% .01 252.83);--stratakit-mui-palette-grey-A400:oklch(62.09% .017 257.22);--stratakit-mui-palette-grey-A700:oklch(48.26% .017 254.7)}.MuiAlert-icon{align-items:center}.MuiButton-root:where(.MuiButton-colorSecondary){--variant-containedBg:var(--stratakit-color-bg-neutral-base);--variant-containedColor:var(--stratakit-color-text-neutral-primary);--variant-outlinedColor:var(--stratakit-color-text-neutral-primary);--variant-textColor:var(--stratakit-color-text-neutral-primary)}.MuiButton-root:where(.MuiButton-colorSecondary):where(:hover){--variant-containedBg:color-mix(in oklch,var(--stratakit-color-bg-neutral-base)100%,var(--stratakit-color-glow-hue)var(--stratakit-color-bg-glow-base-hover-\%))}.MuiButton-root:where(.MuiButton-colorPrimary){--variant-outlinedColor:var(--stratakit-color-text-accent-strong);--variant-textColor:var(--stratakit-color-text-accent-strong)}.MuiCheckbox-root:where(.MuiCheckbox-colorPrimary):where(.Mui-checked,.MuiCheckbox-indeterminate):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiCheckbox-root:where(.Mui-focusVisible){outline:2px solid var(--stratakit-color-border-accent-strong)}.MuiFormLabel-colorPrimary.Mui-focused{color:var(--stratakit-mui-palette-primary-dark)}.MuiLink-root{text-underline-offset:var(--stratakit-space-x05);font-weight:500;text-decoration-color:currentColor;transition:text-underline-offset .15s ease-out}.MuiLink-root:where(:hover,:focus-visible){text-underline-offset:var(--stratakit-space-x1)}.MuiMenuItem-root:where(.Mui-focusVisible){outline-offset:-2px}.MuiPaper-root{--Paper-overlay:unset!important}.MuiPaper-root:where(.MuiPaper-elevation1){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-page-base)}.MuiPaper-root:where(.MuiPaper-elevation2,.MuiPaper-elevation3,.MuiPaper-elevation4,.MuiPaper-elevation5,.MuiPaper-elevation6,.MuiPaper-elevation7){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-base)}.MuiPaper-root:where(.MuiPaper-elevation8,.MuiPaper-elevation9,.MuiPaper-elevation10,.MuiPaper-elevation11,.MuiPaper-elevation12,.MuiPaper-elevation13,.MuiPaper-elevation14,.MuiPaper-elevation15,.MuiPaper-elevation16,.MuiPaper-elevation17,.MuiPaper-elevation18,.MuiPaper-elevation19,.MuiPaper-elevation20,.MuiPaper-elevation21,.MuiPaper-elevation22,.MuiPaper-elevation23,.MuiPaper-elevation24){--stratakit-mui-palette-background-paper:var(--stratakit-color-bg-elevation-level-1)}.MuiTab-root:where(.Mui-selected){color:var(--stratakit-color-text-accent-strong)}.MuiTab-root:where(:focus-visible){outline-offset:-4px}.MuiTabs-indicator{background-color:var(--stratakit-color-border-accent-strong)}.MuiTooltip-tooltip{--stratakit-mui-palette-Tooltip-bg:var(--stratakit-color-bg-elevation-emphasis);box-shadow:var(--stratakit-shadow-control-tooltip-base)}.MuiSwitch-root .MuiSwitch-switchBase:where(.MuiSwitch-colorPrimary):where(.Mui-checked):where(:not(.Mui-disabled)){color:var(--stratakit-mui-palette-primary-dark)}.MuiSwitch-root:where(:has(.MuiSwitch-switchBase.Mui-focusVisible)){outline:2px solid var(--stratakit-color-border-accent-strong)}}`;
+
+// src/styles.css.ts
+var styles_css_default = styles_default;
+export {
+  styles_css_default as default
+};

package/package.json

@@ -0,0 +1,120 @@
+{
+  "name": "@stratakit/mui",
+  "type": "module",
+  "version": "0.1.0",
+  "license": "MIT",
+  "sideEffects": false,
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "@stratakit/source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "development": "./dist/DEV/index.js",
+      "default": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "CHANGELOG.md",
+    "LICENSE.md"
+  ],
+  "description": "StrataKit theme for Material UI",
+  "author": "Bentley Systems",
+  "homepage": "https://github.com/iTwin/design-system",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/iTwin/design-system.git",
+    "directory": "packages/mui"
+  },
+  "keywords": [
+    "frontend",
+    "itwin",
+    "itwinui",
+    "strata",
+    "stratakit",
+    "react",
+    "react-component",
+    "mui",
+    "material-ui",
+    "design system"
+  ],
+  "dependencies": {
+    "@stratakit/foundations": "^0.4.4",
+    "@stratakit/icons": "^0.2.2",
+    "classnames": "^2.5.1",
+    "react-compiler-runtime": "^1.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "esbuild": "^0.27.0",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "typescript": "~5.9.3"
+  },
+  "peerDependencies": {
+    "@mui/material": "^7.3.6",
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "wireit": {
+    "build": {
+      "dependencies": [
+        "build:js",
+        "build:DEV",
+        "build:types",
+        "../foundations:build"
+      ]
+    },
+    "build:js": {
+      "command": "node scripts/build.js",
+      "files": [
+        "src",
+        "scripts",
+        "../../internal"
+      ],
+      "output": [
+        "dist/**/*.js",
+        "!dist/DEV"
+      ]
+    },
+    "build:DEV": {
+      "command": "node scripts/build.js",
+      "files": [
+        "src",
+        "scripts",
+        "../../internal"
+      ],
+      "output": [
+        "dist/DEV/**/*.js"
+      ],
+      "env": {
+        "NODE_ENV": "development"
+      }
+    },
+    "build:types": {
+      "command": "tsc --outDir dist",
+      "files": [
+        "src"
+      ],
+      "output": [
+        "dist/**/*.d.ts"
+      ],
+      "dependencies": [
+        "../foundations:build:types"
+      ]
+    },
+    "dev": {
+      "command": "tsc --watch --outDir dist",
+      "files": [
+        "src"
+      ],
+      "service": true
+    }
+  },
+  "scripts": {
+    "build": "wireit",
+    "dev": "wireit"
+  }
+}