@mitodl/smoot-design 0.0.0-7bc0c0f

package/dist/esm/components/AiChat/test-utils/api.d.ts

@@ -0,0 +1,2 @@
+declare const handlers: import("msw").HttpHandler[];
+export { handlers };

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

@@ -0,0 +1,122 @@
+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());
+    });
+};
+import { http, HttpResponse, delay } from "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 = [
+    http.post("http://localhost:4567/streaming", (_a) => __awaiter(void 0, [_a], void 0, function* ({ request }) {
+        yield 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 HttpResponse("Internal Server Error", {
+                    status: 500,
+                });
+            }
+        }
+        return new HttpResponse(body, {
+            headers: {
+                "Content-Type": "text/plain",
+            },
+        });
+    })),
+    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 delay(800);
+        return HttpResponse.json({ message });
+    })),
+];
+export { handlers };

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

@@ -0,0 +1,82 @@
+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 AiChatProps = {
+    /**
+     * Changing the `chatId` will reset the chat. Changing the `chatId` to a
+     * previously used value will restore the session state.
+     */
+    chatId?: string;
+    /**
+     * 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;
+    /**
+     * 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">[];
+    /**
+     * Prompt suggestions for the user, clickable on the entry screen or in the chat if the entry screen is not enabled.
+     */
+    conversationStarters?: {
+        content: string;
+    }[];
+    /**
+     * Options for making requests to the AI service.
+     */
+    requestOpts: RequestOpts;
+    parseContent?: (content: unknown) => 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>;
+export type { RequestOpts, AiChatProps, AiChatMessage };

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

@@ -0,0 +1,2 @@
+// Some of these are based on (compatible, but simplified / restricted) versions of ai/react types.
+export {};

package/dist/esm/components/AiChat/utils.d.ts

@@ -0,0 +1,9 @@
+import { UseChatOptions } from "ai/react";
+import type { RequestOpts } from "./types";
+declare const useAiChat: (requestOpts: RequestOpts, opts: UseChatOptions) => import("@ai-sdk/react").UseChatHelpers & {
+    addToolResult: ({ toolCallId, result, }: {
+        toolCallId: string;
+        result: any;
+    }) => void;
+};
+export { useAiChat };

package/dist/esm/components/AiChat/utils.js

@@ -0,0 +1,38 @@
+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());
+    });
+};
+import { useChat } from "ai/react";
+import { useMemo } from "react";
+const identity = (x) => x;
+const getFetcher = (requestOpts) => (url, opts) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b;
+    if (typeof (opts === null || opts === void 0 ? void 0 : opts.body) !== "string") {
+        console.error("Unexpected body type.");
+        return window.fetch(url, opts);
+    }
+    const messages = JSON.parse(opts === null || opts === void 0 ? void 0 : opts.body).messages;
+    const transformBody = (_a = requestOpts.transformBody) !== null && _a !== void 0 ? _a : identity;
+    const options = Object.assign(Object.assign(Object.assign(Object.assign({}, opts), { body: JSON.stringify(transformBody(messages)) }), requestOpts.fetchOpts), { headers: Object.assign(Object.assign(Object.assign({}, opts === null || opts === void 0 ? void 0 : opts.headers), { "Content-Type": "application/json" }), (_b = requestOpts.fetchOpts) === null || _b === void 0 ? void 0 : _b.headers) });
+    return fetch(url, options);
+});
+const useAiChat = (requestOpts, opts) => {
+    const fetcher = useMemo(() => getFetcher(requestOpts), [requestOpts]);
+    return useChat(Object.assign({ api: requestOpts.apiUrl, streamProtocol: "text", fetch: fetcher, onFinish: (message) => {
+            var _a;
+            if (!requestOpts.onFinish)
+                return;
+            if (message.role === "assistant" || message.role === "user") {
+                (_a = requestOpts.onFinish) === null || _a === void 0 ? void 0 : _a.call(requestOpts, message);
+            }
+            else {
+                console.info("Unexpected message role.", message);
+            }
+        } }, opts));
+};
+export { useAiChat };

package/dist/esm/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/esm/components/Alert/Alert.js

@@ -0,0 +1,59 @@
+"use client";
+import * as React from "react";
+import styled from "@emotion/styled";
+import { default as MuiAlert } from "@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 = styled(MuiAlert)(({ 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.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")));
+};
+export { Alert };

package/dist/esm/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/esm/components/Alert/Alert.stories.js

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Alert } from "./Alert";
+import Stack from "@mui/material/Stack";
+const meta = {
+    title: "smoot-design/Alert",
+    component: Alert,
+};
+export default meta;
+export const Basic = {
+    args: {
+        severity: "info",
+    },
+    render: (args) => (React.createElement(Alert, Object.assign({}, args),
+        "Alert with severity \"",
+        args.severity,
+        "\"")),
+};
+export const Closable = {
+    args: {
+        severity: "warning",
+        closable: true,
+    },
+    render: (args) => (React.createElement(Alert, Object.assign({}, args),
+        "Closable alert with severity \"",
+        args.severity,
+        "\"")),
+};
+export const Variants = {
+    argTypes: {
+        severity: {
+            table: {
+                disable: true,
+            },
+        },
+        closable: {
+            table: {
+                disable: true,
+            },
+        },
+    },
+    render: (args) => (React.createElement(Stack, { direction: "column", gap: 2, sx: { my: 2 } },
+        React.createElement(Alert, Object.assign({}, args, { severity: "info" }), "Alert with severity \"info\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "info" }), "Closable alert with severity \"info\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "success" }), "Alert with severity \"success\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "success" }), "Closable alert with severity \"success\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "warning" }), "Alert with severity \"warning\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "warning" }), "Closable alert with severity \"warning\""),
+        React.createElement(Alert, Object.assign({}, args, { severity: "error" }), "Alert with severity \"error\""),
+        React.createElement(Alert, Object.assign({}, args, { closable: true, severity: "error" }), "Closable alert with severity \"error\""))),
+};

package/dist/esm/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/esm/components/Button/ActionButton.js

@@ -0,0 +1,68 @@
+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;
+};
+import * as React from "react";
+import styled from "@emotion/styled";
+import { pxToRem } from "../ThemeProvider/typography";
+import { ButtonRoot, ButtonLinkRoot, RESPONSIVE_SIZES, DEFAULT_PROPS, } from "./Button";
+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: 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 = styled(React.forwardRef(function Root(props, ref) {
+    return React.createElement(ButtonRoot, Object.assign({ ref: ref, type: "button" }, props));
+}))(({ size = DEFAULT_PROPS.size, responsive, theme }) => {
+    return [
+        actionStyles(size),
+        responsive && {
+            [theme.breakpoints.down("sm")]: actionStyles(RESPONSIVE_SIZES[size]),
+        },
+    ];
+});
+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(ButtonLinkRoot, Object.assign({ Component: Component }, props));
+});
+ActionButtonLink.displayName = "ActionButtonLink";
+export { ActionButton, ActionButtonLink, DEFAULT_PROPS };

package/dist/esm/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/esm/components/Button/ActionButton.stories.js

@@ -0,0 +1,110 @@
+import * as React from "react";
+import { ActionButton, ActionButtonLink, DEFAULT_PROPS } from "./ActionButton";
+import Grid from "@mui/material/Grid2";
+import Stack from "@mui/material/Stack";
+import { RiArrowLeftLine, RiDeleteBinLine, RiTestTubeLine, } from "@remixicon/react";
+import { fn } from "@storybook/test";
+import { enumValues } from "../../story-utils";
+const ICONS = {
+    None: undefined,
+    ArrowBackIcon: React.createElement(RiArrowLeftLine, null),
+    DeleteIcon: React.createElement(RiDeleteBinLine, null),
+    TestTubeIcon: React.createElement(RiTestTubeLine, null),
+};
+const VARIANTS = enumValues({
+    primary: true,
+    secondary: true,
+    tertiary: true,
+    bordered: true,
+    text: true,
+});
+const STABLE_VARIANTS = VARIANTS.filter((v) => !v.startsWith("unstable"));
+const SIZES = enumValues({
+    small: true,
+    medium: true,
+    large: true,
+});
+const EDGES = enumValues({
+    circular: true,
+    rounded: true,
+    none: true,
+});
+const meta = {
+    title: "smoot-design/ActionButton",
+    component: ActionButton,
+    argTypes: {
+        variant: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: DEFAULT_PROPS.variant },
+            },
+        },
+        size: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: DEFAULT_PROPS.size },
+            },
+        },
+        edge: {
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: DEFAULT_PROPS.edge },
+            },
+        },
+    },
+    args: {
+        onClick: fn(),
+    },
+};
+export default meta;
+export const VariantsAndEdge = {
+    render: (args) => (React.createElement(React.Fragment, null,
+        React.createElement(Stack, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "none", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "none", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "none", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "none", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "none", variant: "text" }), ICONS.DeleteIcon)),
+        React.createElement(Stack, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "rounded", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "rounded", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "rounded", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "rounded", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "rounded", variant: "text" }), ICONS.DeleteIcon)),
+        React.createElement(Stack, { direction: "row", gap: 2, sx: { my: 2 } },
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "circular", variant: "primary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "circular", variant: "secondary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "circular", variant: "tertiary" }), ICONS.DeleteIcon),
+            React.createElement(ActionButton, Object.assign({}, args, { edge: "circular", variant: "bordered" }), ICONS.DeleteIcon),
+            React.createElement(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)
+ */
+export const Links = {
+    render: () => (React.createElement(Stack, { direction: "row", gap: 2, sx: { my: 2 } },
+        React.createElement(ActionButtonLink, { href: "#fake", variant: "primary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButtonLink, { href: "#fake", variant: "secondary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButtonLink, { href: "#fake", variant: "tertiary" }, ICONS.DeleteIcon),
+        React.createElement(ActionButtonLink, { href: "#fake", variant: "bordered" }, ICONS.DeleteIcon),
+        React.createElement(ActionButtonLink, { href: "#fake", variant: "text" }, ICONS.DeleteIcon))),
+};
+export const Showcase = {
+    render: (args) => (React.createElement(Grid, { container: true, sx: { maxWidth: "750px" }, rowGap: 2 }, STABLE_VARIANTS.flatMap((variant) => EDGES.flatMap((edge) => (React.createElement(React.Fragment, { key: `${variant}-${edge}` },
+        React.createElement(Grid, { 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(Grid, { size: { xs: 4, sm: 1 }, key: `${size}-${iconKey}` },
+            React.createElement(ActionButton, Object.assign({ variant: variant, edge: edge, size: size }, args), icon))))))))))),
+};