@mitodl/smoot-design 1.2.1 → 2.0.1

package/README.md

@@ -12,6 +12,10 @@ To trigger a release, run the "Release" github action. Using [semantic-release](
 2. Determine whether the version bump should be major, minor, or patch based on commit types. Breaking changes (e.g., `feat!: remove Button variant 'outlined'`) will result in major version bumps.
 3. Publish the package to NPM and the repository's [Github Releases](https://github.com/mitodl/smoot-design/releases).
 
+## Installation
+
+Ensure `peerDependencies` are installed as well. See [`package.json`](./package.json).
+
 ## Documentation
 
 Documentation for `smoot-design` components is available at https://mitodl.github.io/smoot-design.

package/dist/cjs/components/Button/ActionButton.stories.js

@@ -20,9 +20,6 @@ const VARIANTS = (0, story_utils_1.enumValues)({
     tertiary: true,
     bordered: true,
     text: true,
-    unstable_noBorder: true,
-    unstable_inverted: true,
-    unstable_success: true,
 });
 const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
 const SIZES = (0, story_utils_1.enumValues)({

package/dist/cjs/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { LinkAdapterPropsOverrides } from "../LinkAdapter/LinkAdapter";
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "bordered" | "unstable_noBorder" | "unstable_inverted" | "unstable_success";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "bordered";
 type ButtonSize = "small" | "medium" | "large";
 type ButtonEdge = "circular" | "rounded" | "none";
 type ButtonStyleProps = {

package/dist/cjs/components/Button/Button.js

@@ -99,21 +99,6 @@ const buttonStyles = (props) => {
                 boxShadow: "none",
             },
         },
-        variant === "unstable_success" && {
-            backgroundColor: colors.darkGreen,
-            color: colors.white,
-            border: "none",
-            /* Shadow/04dp */
-            boxShadow: "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 3px 8px 0px rgba(37, 38, 43, 0.12)",
-            ":hover:not(:disabled)": {
-                backgroundColor: colors.darkGreen,
-                boxShadow: "none",
-            },
-            ":disabled": {
-                backgroundColor: colors.silverGray,
-                boxShadow: "none",
-            },
-        },
         variant === "secondary" && {
             color: colors.red,
             backgroundColor: "transparent",
@@ -153,18 +138,6 @@ const buttonStyles = (props) => {
                 color: colors.silverGrayDark,
             },
         },
-        variant === "unstable_noBorder" && {
-            backgroundColor: colors.white,
-            color: colors.darkGray2,
-            border: "none",
-            ":hover:not(:disabled)": {
-                // darkGray1 at 6% alpha
-                backgroundColor: "rgba(64, 70, 76, 0.06)",
-            },
-            ":disabled": {
-                color: colors.silverGray,
-            },
-        },
         variant === "tertiary" && {
             color: colors.darkGray2,
             border: "none",
@@ -177,12 +150,6 @@ const buttonStyles = (props) => {
                 color: colors.silverGrayLight,
             },
         },
-        variant === "unstable_inverted" && {
-            backgroundColor: colors.white,
-            color: colors.mitRed,
-            borderColor: colors.mitRed,
-            borderStyle: "solid",
-        },
         // edge
         edge === "rounded" && {
             borderRadius: "4px",

package/dist/cjs/components/Button/Button.stories.js

@@ -20,9 +20,6 @@ const VARIANTS = (0, story_utils_1.enumValues)({
     tertiary: true,
     bordered: true,
     text: true,
-    unstable_noBorder: true,
-    unstable_inverted: true,
-    unstable_success: true,
 });
 const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
 const SIZES = (0, story_utils_1.enumValues)({

package/dist/cjs/components/ThemeProvider/ThemeProvider.d.ts

@@ -6,9 +6,7 @@ import type { ThemeOptions, Theme } from "@mui/material/styles";
  * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
  * for more.
  */
-declare const createTheme: (options?: {
-    custom: Partial<ThemeOptions["custom"]>;
-}) => Theme;
+declare const createTheme: (options?: ThemeOptions) => Theme;
 type ThemeProviderProps = {
     children?: React.ReactNode;
     theme?: Theme;

package/dist/cjs/components/ThemeProvider/ThemeProvider.js

@@ -7,6 +7,7 @@ const typography = require("./typography");
 const buttons = require("./buttons");
 const chips = require("./chips");
 const colors_1 = require("./colors");
+const deepmerge_1 = require("@mui/utils/deepmerge");
 const custom = {
     colors: colors_1.colors,
     dimensions: {
@@ -48,13 +49,6 @@ const defaultThemeOptions = {
     components: {
         MuiButtonBase: buttons.buttonBaseComponent,
         MuiTypography: typography.component,
-        MuiTabPanel: {
-            styleOverrides: {
-                root: {
-                    padding: "0px",
-                },
-            },
-        },
         MuiMenu: {
             styleOverrides: { paper: { borderRadius: "4px" } },
         },
@@ -76,7 +70,9 @@ const defaultThemeOptions = {
  * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
  * for more.
  */
-const createTheme = (options) => (0, styles_1.createTheme)(Object.assign(Object.assign({}, defaultThemeOptions), { custom: Object.assign(Object.assign({}, defaultThemeOptions.custom), options === null || options === void 0 ? void 0 : options.custom) }));
+const createTheme = (options) => {
+    return (0, styles_1.createTheme)((0, deepmerge_1.default)(defaultThemeOptions, options));
+};
 exports.createTheme = createTheme;
 const defaultTheme = createTheme();
 /**

package/dist/cjs/components/ThemeProvider/breakpoints.js

@@ -14,7 +14,6 @@ const BREAKPOINT_VALUES = {
 exports.BREAKPOINT_VALUES = BREAKPOINT_VALUES;
 const { breakpoints } = (0, styles_1.createTheme)({
     breakpoints: BREAKPOINT_VALUES,
-    // @ts-expect-error only using breakpoints
     custom: {},
 });
 exports.breakpoints = breakpoints;

package/dist/cjs/components/ThemeProvider/typography.js

@@ -168,7 +168,6 @@ const component = {
 exports.component = component;
 const { typography } = (0, styles_1.createTheme)({
     typography: globalSettings,
-    // @ts-expect-error: we only care about typography from this theme
     custom: {},
 });
 exports.typography = typography;

package/dist/cjs/index.d.ts

@@ -1,6 +1,5 @@
 export { default as styled } from "@emotion/styled";
 export { css, Global } from "@emotion/react";
-export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
 export { Button, ButtonLink } from "./components/Button/Button";
 export type { ButtonProps, ButtonLinkProps } from "./components/Button/Button";

package/dist/cjs/index.js

@@ -1,14 +1,12 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.VisuallyHidden = exports.SrAnnouncer = exports.TextField = exports.Input = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.NextJsAppRouterCacheProvider = exports.Global = exports.css = exports.styled = void 0;
+exports.VisuallyHidden = exports.SrAnnouncer = exports.TextField = exports.Input = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.Global = exports.css = exports.styled = void 0;
 var styled_1 = require("@emotion/styled");
 Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.default; } });
 var react_1 = require("@emotion/react");
 Object.defineProperty(exports, "css", { enumerable: true, get: function () { return react_1.css; } });
 Object.defineProperty(exports, "Global", { enumerable: true, get: function () { return react_1.Global; } });
-var v15_appRouter_1 = require("@mui/material-nextjs/v15-appRouter");
-Object.defineProperty(exports, "NextJsAppRouterCacheProvider", { enumerable: true, get: function () { return v15_appRouter_1.AppRouterCacheProvider; } });
 var ThemeProvider_1 = require("./components/ThemeProvider/ThemeProvider");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
 Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return ThemeProvider_1.createTheme; } });

package/dist/esm/components/Button/ActionButton.stories.js

@@ -17,9 +17,6 @@ const VARIANTS = enumValues({
     tertiary: true,
     bordered: true,
     text: true,
-    unstable_noBorder: true,
-    unstable_inverted: true,
-    unstable_success: true,
 });
 const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
 const SIZES = enumValues({

package/dist/esm/components/Button/Button.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { LinkAdapterPropsOverrides } from "../LinkAdapter/LinkAdapter";
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "bordered" | "unstable_noBorder" | "unstable_inverted" | "unstable_success";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "bordered";
 type ButtonSize = "small" | "medium" | "large";
 type ButtonEdge = "circular" | "rounded" | "none";
 type ButtonStyleProps = {

package/dist/esm/components/Button/Button.js

@@ -94,21 +94,6 @@ const buttonStyles = (props) => {
                 boxShadow: "none",
             },
         },
-        variant === "unstable_success" && {
-            backgroundColor: colors.darkGreen,
-            color: colors.white,
-            border: "none",
-            /* Shadow/04dp */
-            boxShadow: "0px 2px 4px 0px rgba(37, 38, 43, 0.10), 0px 3px 8px 0px rgba(37, 38, 43, 0.12)",
-            ":hover:not(:disabled)": {
-                backgroundColor: colors.darkGreen,
-                boxShadow: "none",
-            },
-            ":disabled": {
-                backgroundColor: colors.silverGray,
-                boxShadow: "none",
-            },
-        },
         variant === "secondary" && {
             color: colors.red,
             backgroundColor: "transparent",
@@ -148,18 +133,6 @@ const buttonStyles = (props) => {
                 color: colors.silverGrayDark,
             },
         },
-        variant === "unstable_noBorder" && {
-            backgroundColor: colors.white,
-            color: colors.darkGray2,
-            border: "none",
-            ":hover:not(:disabled)": {
-                // darkGray1 at 6% alpha
-                backgroundColor: "rgba(64, 70, 76, 0.06)",
-            },
-            ":disabled": {
-                color: colors.silverGray,
-            },
-        },
         variant === "tertiary" && {
             color: colors.darkGray2,
             border: "none",
@@ -172,12 +145,6 @@ const buttonStyles = (props) => {
                 color: colors.silverGrayLight,
             },
         },
-        variant === "unstable_inverted" && {
-            backgroundColor: colors.white,
-            color: colors.mitRed,
-            borderColor: colors.mitRed,
-            borderStyle: "solid",
-        },
         // edge
         edge === "rounded" && {
             borderRadius: "4px",

package/dist/esm/components/Button/Button.stories.js

@@ -17,9 +17,6 @@ const VARIANTS = enumValues({
     tertiary: true,
     bordered: true,
     text: true,
-    unstable_noBorder: true,
-    unstable_inverted: true,
-    unstable_success: true,
 });
 const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
 const SIZES = enumValues({

package/dist/esm/components/ThemeProvider/ThemeProvider.d.ts

@@ -6,9 +6,7 @@ import type { ThemeOptions, Theme } from "@mui/material/styles";
  * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
  * for more.
  */
-declare const createTheme: (options?: {
-    custom: Partial<ThemeOptions["custom"]>;
-}) => Theme;
+declare const createTheme: (options?: ThemeOptions) => Theme;
 type ThemeProviderProps = {
     children?: React.ReactNode;
     theme?: Theme;

package/dist/esm/components/ThemeProvider/ThemeProvider.js

@@ -4,6 +4,7 @@ import * as typography from "./typography";
 import * as buttons from "./buttons";
 import * as chips from "./chips";
 import { colors } from "./colors";
+import deepmerge from "@mui/utils/deepmerge";
 const custom = {
     colors,
     dimensions: {
@@ -45,13 +46,6 @@ const defaultThemeOptions = {
     components: {
         MuiButtonBase: buttons.buttonBaseComponent,
         MuiTypography: typography.component,
-        MuiTabPanel: {
-            styleOverrides: {
-                root: {
-                    padding: "0px",
-                },
-            },
-        },
         MuiMenu: {
             styleOverrides: { paper: { borderRadius: "4px" } },
         },
@@ -73,7 +67,9 @@ const defaultThemeOptions = {
  * See [ThemeProvider Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-themeprovider--docs#further-customized-theme-with-createtheme)
  * for more.
  */
-const createTheme = (options) => muiCreateTheme(Object.assign(Object.assign({}, defaultThemeOptions), { custom: Object.assign(Object.assign({}, defaultThemeOptions.custom), options === null || options === void 0 ? void 0 : options.custom) }));
+const createTheme = (options) => {
+    return muiCreateTheme(deepmerge(defaultThemeOptions, options));
+};
 const defaultTheme = createTheme();
 /**
  *

package/dist/esm/components/ThemeProvider/breakpoints.js

@@ -10,7 +10,6 @@ const BREAKPOINT_VALUES = {
 };
 const { breakpoints } = createTheme({
     breakpoints: BREAKPOINT_VALUES,
-    // @ts-expect-error only using breakpoints
     custom: {},
 });
 export { BREAKPOINT_VALUES, breakpoints };

package/dist/esm/components/ThemeProvider/typography.js

@@ -162,7 +162,6 @@ const component = {
 };
 const { typography } = createTheme({
     typography: globalSettings,
-    // @ts-expect-error: we only care about typography from this theme
     custom: {},
 });
 export { globalSettings, component, pxToRem, typography };

package/dist/esm/index.d.ts

@@ -1,6 +1,5 @@
 export { default as styled } from "@emotion/styled";
 export { css, Global } from "@emotion/react";
-export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
 export { Button, ButtonLink } from "./components/Button/Button";
 export type { ButtonProps, ButtonLinkProps } from "./components/Button/Button";

package/dist/esm/index.js

@@ -1,7 +1,6 @@
 "use client";
 export { default as styled } from "@emotion/styled";
 export { css, Global } from "@emotion/react";
-export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
 export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
 export { Button, ButtonLink } from "./components/Button/Button";
 export { ActionButton, ActionButtonLink, } from "./components/Button/ActionButton";