@mitodl/smoot-design 0.0.0-355a925

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

@@ -0,0 +1,136 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.States = exports.Adornments = exports.Widths = exports.Sizes = exports.Simple = void 0;
+const React = require("react");
+const TextField_1 = require("./TextField");
+const Input_1 = require("../Input/Input");
+const Stack_1 = require("@mui/material/Stack");
+const Grid_1 = require("@mui/material/Grid");
+const react_1 = require("@remixicon/react");
+const test_1 = require("@storybook/test");
+const story_utils_1 = require("../../story-utils");
+const SIZES = (0, story_utils_1.enumValues)({
+    small: true,
+    medium: true,
+    large: true,
+    chat: true,
+    hero: true,
+});
+const ADORNMENTS = {
+    None: undefined,
+    SearchIcon: (React.createElement(Input_1.AdornmentButton, null,
+        React.createElement(react_1.RiSearchLine, null))),
+    CalendarTodayIcon: (React.createElement(Input_1.AdornmentButton, null,
+        React.createElement(react_1.RiCalendarLine, null))),
+    CloseIcon: (React.createElement(Input_1.AdornmentButton, null,
+        React.createElement(react_1.RiCloseLine, null))),
+    "Close and Calendar": (React.createElement(React.Fragment, null,
+        React.createElement(Input_1.AdornmentButton, null,
+            React.createElement(react_1.RiCloseLine, null)),
+        React.createElement(Input_1.AdornmentButton, null,
+            React.createElement(react_1.RiCalendarLine, null)))),
+};
+const meta = {
+    title: "smoot-design/TextField",
+    component: TextField_1.TextField,
+    argTypes: {
+        size: {
+            options: SIZES,
+            control: { type: "select" },
+        },
+        startAdornment: {
+            options: Object.keys(ADORNMENTS),
+            mapping: ADORNMENTS,
+            control: { type: "select" },
+        },
+        endAdornment: {
+            options: Object.keys(ADORNMENTS),
+            mapping: ADORNMENTS,
+            control: { type: "select" },
+        },
+    },
+    args: {
+        onChange: (0, test_1.fn)(),
+        multiline: false,
+        disabled: false,
+        value: "some value",
+        placeholder: "placeholder",
+        label: "Label",
+        helpText: "Help text the quick brown fox jumps over the lazy dog",
+        errorText: "Error text the quick brown fox jumps over the lazy dog",
+    },
+};
+exports.default = meta;
+exports.Simple = {
+    render: (args) => {
+        return React.createElement(TextField_1.TextField, Object.assign({}, args));
+    },
+};
+exports.Sizes = {
+    render: (args) => {
+        return (React.createElement(Stack_1.default, { direction: "row", gap: 1 },
+            React.createElement(TextField_1.TextField, Object.assign({}, args, { size: "small" })),
+            React.createElement(TextField_1.TextField, Object.assign({}, args, { size: "medium" })),
+            React.createElement(TextField_1.TextField, Object.assign({}, args, { size: "large" })),
+            React.createElement(TextField_1.TextField, Object.assign({}, args, { size: "hero" }))));
+    },
+    argTypes: { size: { table: { disable: true } } },
+};
+exports.Widths = {
+    render: (args) => {
+        return (React.createElement(Stack_1.default, { direction: "column", gap: 1 },
+            React.createElement(TextField_1.TextField, Object.assign({}, args, { label: "default" })),
+            React.createElement(TextField_1.TextField, Object.assign({}, args, { label: "fullWidth", fullWidth: true }))));
+    },
+    argTypes: { fullWidth: { table: { disable: true } } },
+};
+exports.Adornments = {
+    render: (args) => {
+        const adornments = [
+            { startAdornment: ADORNMENTS.SearchIcon },
+            { endAdornment: ADORNMENTS.CloseIcon },
+            {
+                startAdornment: ADORNMENTS.SearchIcon,
+                endAdornment: ADORNMENTS["Close and Calendar"],
+            },
+        ];
+        return (React.createElement(Grid_1.default, { container: true, maxWidth: "600px", spacing: 2 }, Object.values(adornments).flatMap((props, i) => SIZES.map((size) => {
+            return (React.createElement(Grid_1.default, { item: true, xs: 6, key: `${i}-${size}` },
+                React.createElement(TextField_1.TextField, Object.assign({}, args, { size: size }, props))));
+        }))));
+    },
+    argTypes: {
+        startAdornment: { table: { disable: true } },
+        endAdornment: { table: { disable: true } },
+    },
+};
+exports.States = {
+    render: (args) => {
+        return (React.createElement(Grid_1.default, { container: true, spacing: 2, alignItems: "top", maxWidth: "400px" },
+            React.createElement(Grid_1.default, { item: true, xs: 4 }, "Placeholder"),
+            React.createElement(Grid_1.default, { item: true, xs: 8 },
+                React.createElement(TextField_1.TextField, Object.assign({}, args, { value: "" }))),
+            React.createElement(Grid_1.default, { item: true, xs: 4 }, "Default"),
+            React.createElement(Grid_1.default, { item: true, xs: 8 },
+                React.createElement(TextField_1.TextField, Object.assign({}, args))),
+            React.createElement(Grid_1.default, { item: true, xs: 4 }, "Required"),
+            React.createElement(Grid_1.default, { item: true, xs: 8 },
+                React.createElement(TextField_1.TextField, Object.assign({ required: true }, args))),
+            React.createElement(Grid_1.default, { item: true, xs: 4 }, "Error"),
+            React.createElement(Grid_1.default, { item: true, xs: 8 },
+                React.createElement(TextField_1.TextField, Object.assign({}, args, { error: true }))),
+            React.createElement(Grid_1.default, { item: true, xs: 4 }, "Disabled"),
+            React.createElement(Grid_1.default, { item: true, xs: 8 },
+                React.createElement(TextField_1.TextField, Object.assign({}, args, { disabled: true })))));
+    },
+    args: {
+        placeholder: "This is placeholder text.",
+        value: "Some value",
+    },
+    argTypes: {
+        placeholder: { table: { disable: true } },
+        value: { table: { disable: true } },
+        error: { table: { disable: true } },
+        disabled: { table: { disable: true } },
+    },
+};

package/dist/cjs/components/TextField/TextField.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/cjs/components/TextField/TextField.test.js

@@ -0,0 +1,77 @@
+"use strict";
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const React = require("react");
+const react_1 = require("@testing-library/react");
+const user_event_1 = require("@testing-library/user-event");
+const TextField_1 = require("./TextField");
+const ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
+const en_1 = require("@faker-js/faker/locale/en");
+describe("TextField", () => {
+    const setup = (props) => {
+        const defaults = {
+            name: "test-name",
+            value: "test-value",
+            label: "test-label",
+        };
+        const { rerender: _rerender } = (0, react_1.render)(React.createElement(TextField_1.TextField, Object.assign({}, defaults, props)), {
+            wrapper: ThemeProvider_1.ThemeProvider,
+        });
+        const rerender = (newProps) => {
+            _rerender(React.createElement(TextField_1.TextField, Object.assign({}, defaults, newProps)));
+        };
+        return { rerender };
+    };
+    it("Has a label", () => {
+        const label = en_1.faker.lorem.words();
+        setup({ label });
+        const input = react_1.screen.getByRole("textbox", { name: label });
+        expect(input).toBeInstanceOf(HTMLInputElement);
+    });
+    it("Marks the input as required if required", () => {
+        const label = en_1.faker.lorem.words();
+        setup({ label, required: true });
+        const input = react_1.screen.getByRole("textbox", { name: label });
+        expect(input).toBeRequired();
+    });
+    it("Emits the correct value on change", () => __awaiter(void 0, void 0, void 0, function* () {
+        const name = en_1.faker.lorem.word();
+        const value = en_1.faker.lorem.words();
+        const onChange = jest.fn();
+        setup({ name, onChange, value });
+        const input = react_1.screen.getByRole("textbox");
+        yield user_event_1.default.type(input, "x");
+        expect(onChange).toHaveBeenCalledTimes(1);
+        expect(onChange).toHaveBeenCalledWith(expect.objectContaining({
+            target: expect.objectContaining({ name }),
+        }));
+    }));
+    it("Forwards inputProps and InputProps", () => {
+        /**
+         * NOTE: This behavior is important for integrating easily with MUI's
+         * Autocomplete component
+         */
+        const inputRef = jest.fn();
+        const InputRef = jest.fn();
+        setup({
+            inputProps: {
+                ref: inputRef,
+            },
+            InputProps: {
+                ref: InputRef,
+            },
+        });
+        expect(inputRef).toHaveBeenCalledTimes(1);
+        expect(inputRef).toHaveBeenCalledWith(expect.any(HTMLInputElement));
+        expect(InputRef).toHaveBeenCalledTimes(1);
+        expect(InputRef).toHaveBeenCalledWith(expect.any(HTMLDivElement));
+    });
+});

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

@@ -0,0 +1,21 @@
+import * as React from "react";
+import type { ThemeOptions, Theme } from "@mui/material/styles";
+/**
+ * Create a customized Smoot Design theme for use with `ThemeProvider`.
+ *
+ * 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?: ThemeOptions) => Theme;
+type ThemeProviderProps = {
+    children?: React.ReactNode;
+    theme?: Theme;
+};
+/**
+ *
+ * @param param0
+ * @returns
+ */
+declare const ThemeProvider: React.FC<ThemeProviderProps>;
+export { ThemeProvider, createTheme };
+export type { ThemeProviderProps, Theme };

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createTheme = exports.ThemeProvider = void 0;
+const React = require("react");
+const styles_1 = require("@mui/material/styles");
+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: {
+        headerHeight: "72px",
+        headerHeightSm: "60px",
+    },
+};
+const BREAKPOINTS = {
+    values: {
+        xs: 0,
+        sm: 600,
+        md: 900,
+        lg: 1272 + 48,
+        xl: 1536,
+    },
+};
+const defaultThemeOptions = {
+    custom: custom,
+    palette: {
+        primary: {
+            main: colors_1.colors.mitRed,
+            light: colors_1.colors.lightRed,
+            active: colors_1.colors.red,
+            contrastText: colors_1.colors.white,
+        },
+        secondary: {
+            light: colors_1.colors.darkGray2,
+            active: colors_1.colors.silverGrayDark,
+            main: colors_1.colors.black,
+            contrastText: colors_1.colors.white,
+        },
+    },
+    shape: {
+        borderRadius: 8,
+    },
+    spacing: 8,
+    typography: typography.globalSettings,
+    breakpoints: BREAKPOINTS,
+    components: {
+        MuiButtonBase: buttons.buttonBaseComponent,
+        MuiTypography: typography.component,
+        MuiMenu: {
+            styleOverrides: { paper: { borderRadius: "4px" } },
+        },
+        MuiAutocomplete: {
+            styleOverrides: {
+                paper: { borderRadius: "4px" },
+                // Mui puts paddingRight: 2px, marginRight: -2px on the popupIndicator,
+                // which causes the browser to show a horizontal scrollbar on overflow
+                // containers when a scrollbar isn't really necessary.
+                popupIndicator: { paddingRight: 0, marginRight: 0 },
+            },
+        },
+        MuiChip: chips.chipComponent,
+    },
+};
+/**
+ * Create a customized Smoot Design theme for use with `ThemeProvider`.
+ *
+ * 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) => {
+    return (0, styles_1.createTheme)((0, deepmerge_1.default)(defaultThemeOptions, options));
+};
+exports.createTheme = createTheme;
+const defaultTheme = createTheme();
+/**
+ *
+ * @param param0
+ * @returns
+ */
+const ThemeProvider = ({ children, theme = defaultTheme, }) => {
+    return React.createElement(styles_1.ThemeProvider, { theme: theme }, children);
+};
+exports.ThemeProvider = ThemeProvider;

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ThemeProvider } from "./ThemeProvider";
+declare const meta: Meta<typeof ThemeProvider>;
+type Story = StoryObj<typeof ThemeProvider>;
+/**
+ * `ThemeProvider` must wrap all components from `smoot`-design, and allows
+ *  styling any component via [`styled`](https://emotion.sh/docs/styled).
+ *
+ * In general, most useful theme properties are exposed on `theme.custom`. (Root
+ * `theme` properties are used internally by MUI.) See typescript definitions
+ * for more information about `theme.custom`.
+ *
+ * ## Further Customized Theme with `createTheme`
+ * Consuming applications can customize `smoot-design`'s default theme by creating
+ * a theme instance with `createTheme` and passing it to `ThemeProvider`:
+ *
+ * ```tsx
+ * const customTheme = createTheme({...})
+ *
+ * <ThemeProvider theme={customTheme}>
+ *   {children}
+ * </ThemeProvider>
+ * ```
+ *
+ * ### Custom Link Adapter
+ * One particularly notable property is `theme.custom.LinkAdapter`. Some `smoot-design`
+ * components render links. These links are native anchor tags by default. In
+ * order to use these components with custom routing libraries (e.g. `react-router`
+ * or `next/link`), you can provide a custom link adapter.
+ *
+ * Components such as `ButtonLink` will:
+ *   - use `Component` on `ButtonLink` if specified (`<ButtonLink Component={Link} />`)
+ *   - else, use `theme.custom.LinkAdapter` if specified,
+ *   - else, use `a` tag.
+ *
+ * For example, to use `next/link` as the default link implementation:
+ *
+ * ```tsx
+ * import Link from "next/link"
+ * const theme = createTheme({ LinkAdapter: Link })
+ * ```
+ *
+ * You can use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)
+ * to add the custom props to relevant components. For example, to expose
+ * `next/link`'s `scroll` prop on `ButtonLink`:
+ *
+ * ```ts
+ * // Add scroll prop to all components using LinkAdapter
+ * declare module "@mitodl/smoot-design" {
+ *   interface LinkAdapterPropsOverrides {
+ *     scroll?: boolean
+ *   }
+ * }
+ * ```
+ *
+ * ### ImageAdapter
+ * Similarly, `theme.custom.ImageAdapter` can be used to customize the image
+ * component used by `smoot-design`. By default, `ImageAdapter` uses a simple `img`
+ * tag. Interface `ImageAdapterPropsOverrides` is similarly available for
+ * augmentation.
+ */
+export declare const LinkAdapterOverride: Story;
+export default meta;

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

@@ -0,0 +1,102 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LinkAdapterOverride = void 0;
+const React = require("react");
+const ThemeProvider_1 = require("./ThemeProvider");
+const Button_1 = require("../Button/Button");
+const CustomLinkAdapater = React.forwardRef((props, ref) => (
+// eslint-disable-next-line jsx-a11y/anchor-has-content, jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+React.createElement("a", Object.assign({ ref: ref, onClick: (e) => {
+        e.preventDefault();
+        alert(`Custom link to: ${e.currentTarget.href}. (Preventing Navigation.)`);
+    }, "data-custom": "theme-default" }, props))));
+CustomLinkAdapater.displayName = "CustomLinkAdapter";
+const customTheme = (0, ThemeProvider_1.createTheme)({
+    custom: {
+        LinkAdapter: CustomLinkAdapater,
+    },
+});
+const meta = {
+    title: "smoot-design/ThemeProvider",
+    component: ThemeProvider_1.ThemeProvider,
+    argTypes: {
+        theme: {
+            options: ["Default", "Custom Link Adapter"],
+            mapping: {
+                Default: undefined,
+                "Custom Link Adapter": customTheme,
+            },
+        },
+        children: {
+            table: { disable: true },
+        },
+    },
+    id: "smoot-design/ThemeProvider",
+};
+/**
+ * `ThemeProvider` must wrap all components from `smoot`-design, and allows
+ *  styling any component via [`styled`](https://emotion.sh/docs/styled).
+ *
+ * In general, most useful theme properties are exposed on `theme.custom`. (Root
+ * `theme` properties are used internally by MUI.) See typescript definitions
+ * for more information about `theme.custom`.
+ *
+ * ## Further Customized Theme with `createTheme`
+ * Consuming applications can customize `smoot-design`'s default theme by creating
+ * a theme instance with `createTheme` and passing it to `ThemeProvider`:
+ *
+ * ```tsx
+ * const customTheme = createTheme({...})
+ *
+ * <ThemeProvider theme={customTheme}>
+ *   {children}
+ * </ThemeProvider>
+ * ```
+ *
+ * ### Custom Link Adapter
+ * One particularly notable property is `theme.custom.LinkAdapter`. Some `smoot-design`
+ * components render links. These links are native anchor tags by default. In
+ * order to use these components with custom routing libraries (e.g. `react-router`
+ * or `next/link`), you can provide a custom link adapter.
+ *
+ * Components such as `ButtonLink` will:
+ *   - use `Component` on `ButtonLink` if specified (`<ButtonLink Component={Link} />`)
+ *   - else, use `theme.custom.LinkAdapter` if specified,
+ *   - else, use `a` tag.
+ *
+ * For example, to use `next/link` as the default link implementation:
+ *
+ * ```tsx
+ * import Link from "next/link"
+ * const theme = createTheme({ LinkAdapter: Link })
+ * ```
+ *
+ * You can use [module augmentation](https://www.typescriptlang.org/docs/handbook/declaration-merging.html#module-augmentation)
+ * to add the custom props to relevant components. For example, to expose
+ * `next/link`'s `scroll` prop on `ButtonLink`:
+ *
+ * ```ts
+ * // Add scroll prop to all components using LinkAdapter
+ * declare module "@mitodl/smoot-design" {
+ *   interface LinkAdapterPropsOverrides {
+ *     scroll?: boolean
+ *   }
+ * }
+ * ```
+ *
+ * ### ImageAdapter
+ * Similarly, `theme.custom.ImageAdapter` can be used to customize the image
+ * component used by `smoot-design`. By default, `ImageAdapter` uses a simple `img`
+ * tag. Interface `ImageAdapterPropsOverrides` is similarly available for
+ * augmentation.
+ */
+exports.LinkAdapterOverride = {
+    args: {
+        theme: customTheme,
+    },
+    render: (args) => {
+        return (React.createElement(ThemeProvider_1.ThemeProvider, { theme: args.theme },
+            React.createElement(Button_1.ButtonLink, { href: "https://mit.edu" }, args.theme ? "Custom theme in use" : "Default theme in use")));
+    },
+};
+exports.default = meta;

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import Typography from "@mui/material/Typography";
+/**
+ * Typography styles can be controlled via the `theme.typography` object when
+ * using the `styled` helper or via the `<Tyopgraphy variant="..." />` component.
+ *
+ * For the `Typography` component, see [MUI's documentation](https://mui.com/material-ui/react-typography/).
+ *
+ * ```tsx
+ * const MyHeading = styled(({ theme }) => ({
+ *   ...theme.typography.h2,
+ *   [theme.breakpoints.down("sm")]: {
+ *     ...theme.typography.h3,
+ *   },
+ * }))
+ *
+ * // or:
+ * <Typography component="h1" typography={
+ *   {
+ *     xs: "h3",  // above xs
+ *     sm: "h2"   // above sm
+ *   }
+ * }>
+ * Hello, world!
+ * </Typography>
+ * ```
+ *
+ */
+declare const meta: Meta<typeof Typography>;
+export default meta;
+type Story = StoryObj<typeof Typography>;
+/**
+ * Typography variants are shown below.
+ *
+ * **Note:** The typography variant is not related to the HTML element used. A
+ * `variant="h1"` component does not automatically render an `<h1>` element.
+ *
+ */
+export declare const Variants: Story;

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

@@ -0,0 +1,65 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = void 0;
+const React = require("react");
+const Stack_1 = require("@mui/material/Stack");
+const Typography_1 = require("@mui/material/Typography");
+/**
+ * Typography styles can be controlled via the `theme.typography` object when
+ * using the `styled` helper or via the `<Tyopgraphy variant="..." />` component.
+ *
+ * For the `Typography` component, see [MUI's documentation](https://mui.com/material-ui/react-typography/).
+ *
+ * ```tsx
+ * const MyHeading = styled(({ theme }) => ({
+ *   ...theme.typography.h2,
+ *   [theme.breakpoints.down("sm")]: {
+ *     ...theme.typography.h3,
+ *   },
+ * }))
+ *
+ * // or:
+ * <Typography component="h1" typography={
+ *   {
+ *     xs: "h3",  // above xs
+ *     sm: "h2"   // above sm
+ *   }
+ * }>
+ * Hello, world!
+ * </Typography>
+ * ```
+ *
+ */
+const meta = {
+    title: "smoot-design/Typography",
+    component: Typography_1.default,
+};
+exports.default = meta;
+const text = "The quick brown fox jumps over the lazy dog. ".repeat(10);
+const INSTANCES = [
+    { variant: "h1", children: "Heading level 1" },
+    { variant: "h2", children: "Heading level 2" },
+    { variant: "h3", children: "Heading level 3" },
+    { variant: "h4", children: "Heading level 4" },
+    { variant: "h5", children: "Heading level 5" },
+    { variant: "subtitle1", children: "Subtitle level 1" },
+    { variant: "subtitle2", children: "Subtitle level 2" },
+    { variant: "subtitle3", children: "Subtitle level 3" },
+    { variant: "subtitle4", children: "Subtitle level 4" },
+    { variant: "body1", children: `body level 1... ${text}` },
+    { variant: "body2", children: `body level 2... ${text}` },
+    { variant: "body3", children: `body level 3... ${text}` },
+    { variant: "body4", children: `body level 4... ${text}` },
+];
+/**
+ * Typography variants are shown below.
+ *
+ * **Note:** The typography variant is not related to the HTML element used. A
+ * `variant="h1"` component does not automatically render an `<h1>` element.
+ *
+ */
+exports.Variants = {
+    render: () => {
+        return (React.createElement(Stack_1.default, { gap: "1rem" }, INSTANCES.map((props) => (React.createElement(Typography_1.default, Object.assign({ key: props.variant }, props))))));
+    },
+};

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

@@ -0,0 +1,4 @@
+import type { ThemeOptions } from "@mui/material/styles";
+declare const BREAKPOINT_VALUES: ThemeOptions["breakpoints"];
+declare const breakpoints: import("@mui/material/styles").Breakpoints;
+export { BREAKPOINT_VALUES, breakpoints };

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

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.breakpoints = exports.BREAKPOINT_VALUES = void 0;
+const styles_1 = require("@mui/material/styles");
+const BREAKPOINT_VALUES = {
+    values: {
+        xs: 0,
+        sm: 600,
+        md: 900,
+        lg: 1280,
+        xl: 1536,
+    },
+};
+exports.BREAKPOINT_VALUES = BREAKPOINT_VALUES;
+const { breakpoints } = (0, styles_1.createTheme)({
+    breakpoints: BREAKPOINT_VALUES,
+    custom: {},
+});
+exports.breakpoints = breakpoints;

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

@@ -0,0 +1,7 @@
+import type { ThemeOptions } from "@mui/material/styles";
+/**
+ * We don't use MUI's button directly, but ButtonBase does get used internally
+ * by some MUI components, so we override a few styles.
+ */
+declare const buttonBaseComponent: NonNullable<ThemeOptions["components"]>["MuiButtonBase"];
+export { buttonBaseComponent };

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

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buttonBaseComponent = void 0;
+/**
+ * We don't use MUI's button directly, but ButtonBase does get used internally
+ * by some MUI components, so we override a few styles.
+ */
+const buttonBaseComponent = {
+    defaultProps: {
+        disableRipple: true,
+    },
+    styleOverrides: {
+        root: {
+            ":focus-visible": {
+                outline: "revert",
+            },
+        },
+    },
+};
+exports.buttonBaseComponent = buttonBaseComponent;

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

@@ -0,0 +1,3 @@
+import type { ThemeOptions } from "@mui/material/styles";
+declare const chipComponent: NonNullable<ThemeOptions["components"]>["MuiChip"];
+export { chipComponent };