@mitodl/smoot-design 0.0.0-355a925

package/dist/cjs/components/AiChat/test-utils/api.js

@@ -0,0 +1,125 @@
+"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 });
+exports.handlers = void 0;
+const msw_1 = require("msw");
+const SAMPLE_RESPONSES = [
+    `For exploring AI applications in business, I recommend the following course from MIT:
+
+1. **[Machine Learning, Modeling, and Simulation Principles](https://xpro.mit.edu/courses/course-v1:xPRO+MLx1/)**: Offered by MIT xPRO, this course is part of the program "Machine Learning, Modeling, and Simulation: Engineering Problem-Solving in the Age of AI." It focuses on the principles of machine learning and how they can be applied to solve engineering problems, which is highly relevant for business applications of AI.
+
+This course is not free, but it provides a certification upon completion, which can be valuable for professionals looking to apply AI in business contexts. It covers essential concepts that can help you understand how AI can be leveraged to improve business processes and decision-making.
+<!-- Comment! -->
+`,
+    `
+To understand global warming, I recommend the following resources from MIT:
+
+1. **[Global Warming Science](https://www.edx.org/learn/global-warming/massachusetts-institute-of-technology-global-warming-science)**: This course offered by MITx covers the physics, chemistry, biology, and geology of the earth’s climate system. It's a comprehensive introduction to the scientific principles underlying global warming.
+
+2. **[Global Warming Science](https://openlearninglibrary.mit.edu/courses/course-v1:MITx+12.340x+1T2020/about)**: Another offering of the same course by MITx, available through the Open Learning Library. It provides the same in-depth exploration of the earth's climate system.
+
+These courses are free and provide a solid foundation in understanding the scientific aspects of global warming. They are suitable for anyone interested in the topic, regardless of prior knowledge.
+<!-- Comment! -->
+`,
+    `
+Here are some courses on linear algebra that you can explore:
+
+1. **[Linear Algebra (MIT OpenCourseWare)](https://openlearninglibrary.mit.edu/courses/course-v1:OCW+18.06SC+2T2019/about)**: This course covers matrix theory and linear algebra, emphasizing topics useful in various disciplines such as physics, economics, social sciences, natural sciences, and engineering. It parallels the combination of theory and applications in Professor Strang's textbook "Introduction to Linear Algebra." This course is free and available through MIT OpenCourseWare.
+
+2. **[Mathematical Methods for Quantitative Finance (MITx)](https://www.edx.org/learn/finance/massachusetts-institute-of-technology-mathematical-methods-for-quantitative-finance)**: This course covers the mathematical foundations essential for financial engineering and quantitative finance, including linear algebra, optimization, probability, stochastic processes, statistics, and applied computational techniques in R. It is free and offers certification upon completion.
+
+3. **[Quantum Information Science I, Part 1 (MITx)](https://openlearninglibrary.mit.edu/courses/course-v1:MITx+8.370.1x+1T2018/about)**: While primarily focused on quantum information science, this course requires some knowledge of linear algebra and is suitable for those interested in quantum mechanics. It is free and available through MITx.
+
+These courses provide a comprehensive introduction to linear algebra and its applications across various fields.
+<!-- Comment! -->
+`,
+    `Here are some courses on quantum computing that offer certificates:
+
+1. [Introduction to Quantum Computing](https://xpro.mit.edu/courses/course-v1:xPRO+QCFx1/)
+   - **Description**: This is the first course in the Quantum Computing Fundamentals professional certificate program. You can earn a Professional Certificate and CEUs by completing both courses in the program. Alternatively, you can take this course individually for a certificate of completion and CEUs.
+   - **Offered by**: MIT xPRO
+   - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
+
+2. [Practical Realities of Quantum Computation and Quantum Communication](https://xpro.mit.edu/courses/course-v1:xPRO+QCRx1/)
+   - **Description**: This course is part of the Quantum Computing Realities professional certificate program. Completing both courses in the program will earn you a Professional Certificate and CEUs. You can also take this course individually for a certificate of completion and CEUs.
+   - **Offered by**: MIT xPRO
+   - **Instructors**: Isaac Chuang, William Oliver, Peter Shor, Aram Harrow
+
+These courses are part of professional certificate programs, and you can choose to complete the entire program or take individual courses for certification.`,
+];
+const rand = (min, max) => {
+    // min and max included
+    return Math.floor(Math.random() * (max - min + 1) + min);
+};
+const getReadableStream = () => {
+    let timerId;
+    const response = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+    const chunks = response.split(" ").reduce((acc, word) => {
+        const last = acc[acc.length - 1];
+        if (acc.length === 0) {
+            acc.push(word);
+        }
+        else if (Math.random() < 0.75) {
+            acc[acc.length - 1] = `${last} ${word}`;
+        }
+        else {
+            acc.push(` ${word}`);
+        }
+        return acc;
+    }, []);
+    const num = chunks.length;
+    let i = 0;
+    return new ReadableStream({
+        start(controller) {
+            timerId = setInterval(() => {
+                const msg = new TextEncoder().encode(chunks[i]);
+                controller.enqueue(msg);
+                i++;
+                if (i === num) {
+                    controller.close();
+                    clearInterval(timerId);
+                }
+            }, 100);
+        },
+        cancel() {
+            if (timerId) {
+                clearInterval(timerId);
+            }
+        },
+    });
+};
+const handlers = [
+    msw_1.http.post("http://localhost:4567/streaming", (_a) => __awaiter(void 0, [_a], void 0, function* ({ request }) {
+        yield (0, msw_1.delay)(600);
+        const body = getReadableStream();
+        const requestBody = yield request.json();
+        if (Array.isArray(requestBody)) {
+            const last = requestBody[requestBody.length - 1];
+            const { content } = last;
+            if (content === "error") {
+                return new msw_1.HttpResponse("Internal Server Error", {
+                    status: 500,
+                });
+            }
+        }
+        return new msw_1.HttpResponse(body, {
+            headers: {
+                "Content-Type": "text/plain",
+            },
+        });
+    })),
+    msw_1.http.post("http://localhost:4567/json", () => __awaiter(void 0, void 0, void 0, function* () {
+        const message = SAMPLE_RESPONSES[rand(0, SAMPLE_RESPONSES.length - 1)];
+        yield (0, msw_1.delay)(800);
+        return msw_1.HttpResponse.json({ message });
+    })),
+];
+exports.handlers = handlers;

package/dist/cjs/components/AiChat/types.d.ts

@@ -0,0 +1,86 @@
+import { RefAttributes } from "react";
+type Role = "assistant" | "user";
+type AiChatMessage = {
+    id: string;
+    content: string;
+    role: Role;
+};
+type RequestOpts = {
+    apiUrl: string;
+    /**
+     * Transforms array of chat messages into request body. Messages
+     * are ordered oldest to newest.
+     *
+     * JSON.stringify is applied to the return value.
+     */
+    transformBody?: (messages: AiChatMessage[]) => unknown;
+    /**
+     * Extra options to pass to fetch.
+     */
+    fetchOpts?: RequestInit;
+    onFinish?: (message: AiChatMessage) => void;
+};
+type AiChatContextProps = {
+    /**
+     * Changing the `chatId` will reset the chat. Changing the `chatId` to a
+     * previously used value will restore the session state.
+     */
+    chatId?: string;
+    /**
+     * Options for making requests to the AI service.
+     */
+    requestOpts: RequestOpts;
+    parseContent?: (content: unknown) => string;
+    /**
+     * Initial messages to display on the chat. If not provided, the entry screen title will be used as the initial message.
+     */
+    initialMessages?: Omit<AiChatMessage, "id">[];
+    children?: React.ReactNode;
+};
+type AiChatDisplayProps = {
+    /**
+     * If provided, renders the "AskTIM" title motif followed by the text.
+     */
+    askTimTitle?: string;
+    /**
+     * Placeholder message for chat input.
+     */
+    placeholder?: string;
+    className?: string;
+    /**
+     * Set to false to disable the entry screen and load the chat immediately.
+     * Defaults to true.
+     */
+    entryScreenEnabled?: boolean;
+    /**
+     * Title to display on the entry screen, also the initial assistant message if not overridden by `initialMessages`.
+     */
+    entryScreenTitle?: string;
+    /**
+     * Prompt suggestions for the user, clickable on the entry screen or in the chat if the entry screen is not enabled.
+     */
+    conversationStarters?: {
+        content: string;
+    }[];
+    /**
+     * A message to display while the component is in a loading state.
+     *
+     * Identical consecutive messages may not be read on some screen readers.
+     */
+    srLoadingMessages?: {
+        delay: number;
+        text: string;
+    }[];
+    /**
+     * If provided, element to use for rendering avatar images.
+     * By default, the theme's ImageAdater is used.
+     */
+    ImgComponent?: React.ElementType;
+    /**
+     * Where the scroll container is provided by the component,
+     * the AiChat will scroll to the bottom as chat messages are added.
+     */
+    scrollElement?: HTMLElement | null;
+} & RefAttributes<HTMLDivElement>;
+type AiChatProps = AiChatContextProps & AiChatDisplayProps;
+export type { RequestOpts, AiChatMessage, AiChatContextProps, AiChatDisplayProps, AiChatProps, };

package/dist/cjs/components/AiChat/types.js

@@ -0,0 +1,3 @@
+"use strict";
+// Some of these are based on (compatible, but simplified / restricted) versions of ai/react types.
+Object.defineProperty(exports, "__esModule", { value: true });

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

@@ -0,0 +1,15 @@
+import * as React from "react";
+import type { AlertColor } from "@mui/material/Alert";
+type AlertProps = {
+    visible?: boolean;
+    closable?: boolean;
+    className?: string;
+    severity?: AlertColor;
+    /**
+     * Alert Content
+     */
+    children?: React.ReactNode;
+};
+declare const Alert: React.FC<AlertProps>;
+export { Alert };
+export type { AlertProps };

package/dist/cjs/components/Alert/Alert.js

@@ -0,0 +1,62 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Alert = void 0;
+const React = require("react");
+const styled_1 = require("@emotion/styled");
+const Alert_1 = require("@mui/material/Alert");
+const getColor = (theme, severity) => {
+    return {
+        info: theme.custom.colors.blue,
+        success: theme.custom.colors.green,
+        warning: theme.custom.colors.orange,
+        error: theme.custom.colors.lightRed,
+    }[severity];
+};
+const AlertStyled = (0, styled_1.default)(Alert_1.default)(({ theme, severity }) => ({
+    padding: "11px 16px",
+    borderRadius: 4,
+    borderWidth: 2,
+    borderStyle: "solid",
+    borderColor: getColor(theme, severity),
+    background: "#FFF",
+    ".MuiAlert-message": Object.assign(Object.assign({}, theme.typography.body2), { color: theme.custom.colors.darkGray2, alignSelf: "center" }),
+    "> div": {
+        paddingTop: 0,
+        paddingBottom: 0,
+    },
+    ".MuiAlert-icon": {
+        marginRight: 8,
+        svg: {
+            width: 16,
+            fill: getColor(theme, severity),
+        },
+    },
+    button: {
+        padding: 0,
+        ":hover": {
+            margin: 0,
+            background: "none",
+        },
+    },
+}));
+const Hidden = styled_1.default.span({ display: "none" });
+const Alert = ({ visible = true, severity = "info", closable, children, className, }) => {
+    const [_visible, setVisible] = React.useState(visible);
+    const id = React.useId();
+    const onCloseClick = () => {
+        setVisible(false);
+    };
+    React.useEffect(() => {
+        setVisible(visible);
+    }, [visible]);
+    if (!_visible) {
+        return null;
+    }
+    return (React.createElement(AlertStyled, { severity: severity, onClose: closable ? onCloseClick : undefined, role: "alert", "aria-describedby": id, className: className },
+        children,
+        React.createElement(Hidden, { id: id },
+            severity,
+            " message")));
+};
+exports.Alert = Alert;

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

@@ -0,0 +1,8 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert } from "./Alert";
+declare const meta: Meta<typeof Alert>;
+export default meta;
+type Story = StoryObj<typeof Alert>;
+export declare const Basic: Story;
+export declare const Closable: Story;
+export declare const Variants: Story;

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

@@ -0,0 +1,53 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Variants = exports.Closable = exports.Basic = void 0;
+const React = require("react");
+const Alert_1 = require("./Alert");
+const Stack_1 = require("@mui/material/Stack");
+const meta = {
+    title: "smoot-design/Alert",
+    component: Alert_1.Alert,
+};
+exports.default = meta;
+exports.Basic = {
+    args: {
+        severity: "info",
+    },
+    render: (args) => (React.createElement(Alert_1.Alert, Object.assign({}, args),
+        "Alert with severity \"",
+        args.severity,
+        "\"")),
+};
+exports.Closable = {
+    args: {
+        severity: "warning",
+        closable: true,
+    },
+    render: (args) => (React.createElement(Alert_1.Alert, Object.assign({}, args),
+        "Closable alert with severity \"",
+        args.severity,
+        "\"")),
+};
+exports.Variants = {
+    argTypes: {
+        severity: {
+            table: {
+                disable: true,
+            },
+        },
+        closable: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    render: (args) => (React.createElement(Stack_1.default, { direction: "column", gap: 2, sx: { my: 2 } },
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { severity: "info" }), "Alert with severity \"info\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { closable: true, severity: "info" }), "Closable alert with severity \"info\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { severity: "success" }), "Alert with severity \"success\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { closable: true, severity: "success" }), "Closable alert with severity \"success\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { severity: "warning" }), "Alert with severity \"warning\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { closable: true, severity: "warning" }), "Closable alert with severity \"warning\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { severity: "error" }), "Alert with severity \"error\""),
+        React.createElement(Alert_1.Alert, Object.assign({}, args, { closable: true, severity: "error" }), "Closable alert with severity \"error\""))),
+};

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

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { DEFAULT_PROPS } from "./Button";
+import type { ButtonStyleProps } from "./Button";
+import type { LinkAdapterPropsOverrides } from "../LinkAdapter/LinkAdapter";
+type ActionButtonStyleProps = Omit<ButtonStyleProps, "startIcon" | "endIcon">;
+type ActionButtonProps = ActionButtonStyleProps & React.ComponentProps<"button">;
+/**
+ * A button that should contain a remixicon icon and nothing else.
+ * See [ActionButton docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs).
+ *
+ * See also:
+ * - [ActionButtonLink](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs#links)
+ * - [Button](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs) for text buttons
+ */
+declare const ActionButton: import("@emotion/styled").StyledComponent<Omit<ActionButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+}, {}, {}>;
+type ActionButtonLinkProps = ActionButtonStyleProps & React.ComponentProps<"a"> & {
+    Component?: React.ElementType;
+} & LinkAdapterPropsOverrides;
+/**
+ * See [ActionButtonLink docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs#links)
+ */
+declare const ActionButtonLink: import("@emotion/styled").StyledComponent<Omit<ActionButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme;
+} & ActionButtonStyleProps & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    Component?: React.ElementType;
+} & LinkAdapterPropsOverrides, {}, {}>;
+export { ActionButton, ActionButtonLink, DEFAULT_PROPS };
+export type { ActionButtonProps, ActionButtonLinkProps };

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

@@ -0,0 +1,73 @@
+"use strict";
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DEFAULT_PROPS = exports.ActionButtonLink = exports.ActionButton = void 0;
+const React = require("react");
+const styled_1 = require("@emotion/styled");
+const typography_1 = require("../ThemeProvider/typography");
+const Button_1 = require("./Button");
+Object.defineProperty(exports, "DEFAULT_PROPS", { enumerable: true, get: function () { return Button_1.DEFAULT_PROPS; } });
+const actionStyles = (size) => {
+    return {
+        minWidth: "auto",
+        padding: 0,
+        height: {
+            small: "32px",
+            medium: "40px",
+            large: "48px",
+        }[size],
+        width: {
+            small: "32px",
+            medium: "40px",
+            large: "48px",
+        }[size],
+        "& svg, & .MuiSvgIcon-root": {
+            width: "1em",
+            height: "1em",
+            fontSize: (0, typography_1.pxToRem)({
+                small: 20,
+                medium: 24,
+                large: 32,
+            }[size]),
+        },
+    };
+};
+/**
+ * A button that should contain a remixicon icon and nothing else.
+ * See [ActionButton docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs).
+ *
+ * See also:
+ * - [ActionButtonLink](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs#links)
+ * - [Button](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs) for text buttons
+ */
+const ActionButton = (0, styled_1.default)(React.forwardRef(function Root(props, ref) {
+    return React.createElement(Button_1.ButtonRoot, Object.assign({ ref: ref, type: "button" }, props));
+}))(({ size = Button_1.DEFAULT_PROPS.size, responsive, theme }) => {
+    return [
+        actionStyles(size),
+        responsive && {
+            [theme.breakpoints.down("sm")]: actionStyles(Button_1.RESPONSIVE_SIZES[size]),
+        },
+    ];
+});
+exports.ActionButton = ActionButton;
+ActionButton.displayName = "ActionButton";
+/**
+ * See [ActionButtonLink docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs#links)
+ */
+const ActionButtonLink = ActionButton.withComponent((_a) => {
+    var { Component } = _a, props = __rest(_a, ["Component"]);
+    return React.createElement(Button_1.ButtonLinkRoot, Object.assign({ Component: Component }, props));
+});
+exports.ActionButtonLink = ActionButtonLink;
+ActionButtonLink.displayName = "ActionButtonLink";

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

@@ -0,0 +1,15 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ActionButton } from "./ActionButton";
+declare const meta: Meta<typeof ActionButton>;
+export default meta;
+type Story = StoryObj<typeof ActionButton>;
+export declare const VariantsAndEdge: Story;
+/**
+ * `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
+ *
+ * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
+ * pass it as the `Component` prop. Alternatively, customize the project-wide
+ * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
+ */
+export declare const Links: Story;
+export declare const Showcase: Story;

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

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Showcase = exports.Links = exports.VariantsAndEdge = void 0;
+const React = require("react");
+const ActionButton_1 = require("./ActionButton");
+const Grid2_1 = require("@mui/material/Grid2");
+const Stack_1 = require("@mui/material/Stack");
+const react_1 = require("@remixicon/react");
+const test_1 = require("@storybook/test");
+const story_utils_1 = require("../../story-utils");
+const ICONS = {
+    None: undefined,
+    ArrowBackIcon: React.createElement(react_1.RiArrowLeftLine, null),
+    DeleteIcon: React.createElement(react_1.RiDeleteBinLine, null),
+    TestTubeIcon: React.createElement(react_1.RiTestTubeLine, null),
+};
+const VARIANTS = (0, story_utils_1.enumValues)({
+    primary: true,
+    secondary: true,
+    tertiary: true,
+    bordered: true,
+    text: true,
+});
+const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
+const SIZES = (0, story_utils_1.enumValues)({
+    small: true,
+    medium: true,
+    large: true,
+});
+const EDGES = (0, story_utils_1.enumValues)({
+    circular: true,
+    rounded: true,
+    none: true,
+});
+const meta = {
+    title: "smoot-design/ActionButton",
+    component: ActionButton_1.ActionButton,
+    argTypes: {
+        variant: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.variant },
+            },
+        },
+        size: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.size },
+            },
+        },
+        edge: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.edge },
+            },
+        },
+    },
+    args: {
+        onClick: (0, test_1.fn)(),
+    },
+};
+exports.default = meta;
+exports.VariantsAndEdge = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "text" }), ICONS.DeleteIcon)),
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "text" }), ICONS.DeleteIcon)),
+        React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "text" }), ICONS.DeleteIcon)))),
+    tags: ["main"],
+};
+/**
+ * `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
+ *
+ * To use a custom link component (E.g. `Link` from `react-router` or `next/link`),
+ * pass it as the `Component` prop. Alternatively, customize the project-wide
+ * default link adapter via [Theme's LinkAdapter](../?path=/docs/smoot-design-themeprovider--docs)
+ */
+exports.Links = {
+    render: () => (React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "primary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "secondary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "tertiary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "bordered" }, ICONS.DeleteIcon),
+        React.createElement(ActionButton_1.ActionButtonLink, { href: "#fake", variant: "text" }, ICONS.DeleteIcon))),
+};
+exports.Showcase = {
+    render: (args) => (React.createElement(Grid2_1.default, { container: true, sx: { maxWidth: "750px" }, rowGap: 2 }, STABLE_VARIANTS.flatMap((variant) => EDGES.flatMap((edge) => (React.createElement(React.Fragment, { key: `${variant}-${edge}` },
+        React.createElement(Grid2_1.default, { size: { xs: 12, sm: 3 }, alignItems: "center" },
+            React.createElement("code", null,
+                "variant=",
+                variant,
+                React.createElement("br", null),
+                "edge=",
+                edge)),
+        SIZES.flatMap((size) => Object.entries(ICONS)
+            .filter(([_key, icon]) => icon)
+            .map(([iconKey, icon]) => (React.createElement(Grid2_1.default, { size: { xs: 4, sm: 1 }, key: `${size}-${iconKey}` },
+            React.createElement(ActionButton_1.ActionButton, Object.assign({ variant: variant, edge: edge, size: size }, args), icon))))))))))),
+};

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

@@ -0,0 +1,54 @@
+import * as React from "react";
+import { LinkAdapterPropsOverrides } from "../LinkAdapter/LinkAdapter";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "bordered";
+type ButtonSize = "small" | "medium" | "large";
+type ButtonEdge = "circular" | "rounded" | "none";
+type ButtonStyleProps = {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    edge?: ButtonEdge;
+    /**
+     * Display an icon before the button text
+     */
+    startIcon?: React.ReactNode;
+    /**
+     * Display an icon after the button text.
+     */
+    endIcon?: React.ReactNode;
+    /**
+     * If true (default: `false`), the button will become one size smaller at the
+     * `sm` breakpoint.
+     *  - large -> medium
+     *  - medium -> small
+     *  - small -> small
+     */
+    responsive?: boolean;
+    color?: "secondary";
+};
+declare const DEFAULT_PROPS: Required<Omit<ButtonStyleProps, "startIcon" | "endIcon" | "color">>;
+declare const RESPONSIVE_SIZES: Record<ButtonSize, ButtonSize>;
+declare const ButtonRoot: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & ButtonStyleProps, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+declare const ButtonLinkRoot: import("@emotion/styled").StyledComponent<Omit<import("../LinkAdapter/LinkAdapter").LinkAdapterProps, "ref"> & React.RefAttributes<HTMLAnchorElement> & {
+    theme?: import("@emotion/react").Theme;
+} & ButtonStyleProps, {}, {}>;
+type ButtonProps = ButtonStyleProps & React.ComponentProps<"button">;
+/**
+ * Our standard button component. See [Button Docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs).
+ *
+ * See also:
+ * - [ButtonLink](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs#links)
+ * - [ActionButton](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-actionbutton--docs) for icon-only uses
+ */
+declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+type ButtonLinkProps = ButtonStyleProps & React.ComponentProps<"a"> & {
+    Component?: React.ElementType;
+} & LinkAdapterPropsOverrides;
+/**
+ * See [ButtonLink docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs#links)
+ */
+declare const ButtonLink: React.ForwardRefExoticComponent<Omit<ButtonLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { Button, ButtonLink, ButtonRoot, DEFAULT_PROPS, ButtonLinkRoot, RESPONSIVE_SIZES, };
+export type { ButtonProps, ButtonLinkProps, ButtonStyleProps, ButtonSize };