@mitodl/smoot-design 0.0.0-7bc0c0f

package/dist/cjs/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/cjs/components/AiChat/utils.js

@@ -0,0 +1,41 @@
+"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.useAiChat = void 0;
+const react_1 = require("ai/react");
+const react_2 = require("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 = (0, react_2.useMemo)(() => getFetcher(requestOpts), [requestOpts]);
+    return (0, react_1.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));
+};
+exports.useAiChat = useAiChat;

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 };