@mitodl/smoot-design 0.0.0-0a23f44

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

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Simple = void 0;
+const React = require("react");
+const preview_api_1 = require("@storybook/preview-api");
+const RadioChoiceField_1 = require("./RadioChoiceField");
+const meta = {
+    title: "smoot-design/RadioChoiceField",
+    argTypes: {
+        onChange: {
+            action: "changed",
+        },
+    },
+};
+exports.default = meta;
+exports.Simple = {
+    args: {
+        label: "Radio choice field label",
+        value: "option-1",
+        name: "simple-story",
+        choices: [
+            {
+                value: "option-1",
+                label: "Option 1",
+            },
+            {
+                value: "option-2",
+                label: "Option 2",
+            },
+            {
+                value: "option-3",
+                label: "Option 3",
+            },
+        ],
+    },
+    argTypes: {
+        value: {
+            options: ["option-1", "option-2", "option-3"],
+            defaultValue: "option-1",
+            control: {
+                type: "select",
+            },
+        },
+    },
+    render: function Render(args) {
+        const [_args, setArgs] = (0, preview_api_1.useArgs)();
+        const onChange = (event) => {
+            var _a;
+            const { currentTarget } = event;
+            (_a = args.onChange) === null || _a === void 0 ? void 0 : _a.call(args, event, currentTarget.value);
+            setArgs({ value: currentTarget.value });
+        };
+        return React.createElement(RadioChoiceField_1.RadioChoiceField, Object.assign({}, args, { onChange: onChange }));
+    },
+};

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

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

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

@@ -0,0 +1,53 @@
+"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 RadioChoiceField_1 = require("./RadioChoiceField");
+const ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
+describe("BooleanRadioChoiceField", () => {
+    it.each([
+        {
+            value: true,
+            expectedChecks: { yes: true, no: false },
+        },
+        {
+            value: false,
+            expectedChecks: { yes: false, no: true },
+        },
+        {
+            value: undefined,
+            expectedChecks: { yes: false, no: false },
+        },
+    ])("renders correctly", ({ value, expectedChecks }) => {
+        const onChange = jest.fn();
+        (0, react_1.render)(React.createElement(RadioChoiceField_1.BooleanRadioChoiceField, { value: value, label: "Test", name: "test", choices: [
+                { label: "Yes", value: true },
+                { label: "No", value: false },
+            ], onChange: onChange }), { wrapper: ThemeProvider_1.ThemeProvider });
+        const yes = react_1.screen.getByLabelText("Yes");
+        const no = react_1.screen.getByLabelText("No");
+        expect(yes.checked).toBe(expectedChecks.yes);
+        expect(no.checked).toBe(expectedChecks.no);
+    });
+    it("calls onChange when clicking and converts value to boolean", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onChange = jest.fn();
+        (0, react_1.render)(React.createElement(RadioChoiceField_1.BooleanRadioChoiceField, { label: "Test", name: "test", choices: [
+                { label: "Yes", value: true },
+                { label: "No", value: false },
+            ], onChange: onChange }), { wrapper: ThemeProvider_1.ThemeProvider });
+        yield user_event_1.default.click(react_1.screen.getByLabelText("Yes"));
+        expect(onChange).toHaveBeenCalledWith({ name: "test", value: true });
+        yield user_event_1.default.click(react_1.screen.getByLabelText("No"));
+        expect(onChange).toHaveBeenCalledWith({ name: "test", value: false });
+    }));
+});

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

@@ -0,0 +1,19 @@
+import * as React from "react";
+type ScrollSnapProps = {
+    /**
+     * Tolerance within which scroll will be considered "at the bottom" of the element.
+     */
+    threshold?: number;
+    /**
+     * Content to be displayed
+     */
+    children: React.ReactNode;
+    className?: string;
+};
+/**
+ * Component that automatically scrolls to the bottom of the element when new
+ * content is added, unless the user has scrolled up.
+ */
+declare const ScrollSnap: React.ForwardRefExoticComponent<ScrollSnapProps & React.RefAttributes<HTMLDivElement>>;
+export { ScrollSnap };
+export type { ScrollSnapProps };

package/dist/cjs/components/ScrollSnap/ScrollSnap.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScrollSnap = void 0;
+const composeRefs_1 = require("../../utils/composeRefs");
+const styled_1 = require("@emotion/styled");
+const React = require("react");
+/**
+ * Returns the distance between visible content and the bottom of the element.
+ */
+const distanceFromBottom = (el) => {
+    return el.scrollHeight - el.clientHeight - el.scrollTop;
+};
+/**
+ * Scrolls to the bottom of the element.
+ */
+const scrollToBottom = (el) => {
+    el.scrollTop = el.scrollHeight;
+};
+const Scroller = styled_1.default.div({
+    overflow: "auto",
+});
+/**
+ * Component that automatically scrolls to the bottom of the element when new
+ * content is added, unless the user has scrolled up.
+ */
+const ScrollSnap = React.forwardRef(function ScrollSnap({ children, threshold = 2, className }, ref) {
+    const el = React.useRef(null);
+    // `content` a delayed version of children to allow measuring scroll position
+    // using the old children.
+    const [content, setContent] = React.useState(children);
+    const wasAtBottom = React.useRef(null);
+    /**
+     * The next two effects:
+     * 1. Check if the element is at the bottom.
+     * 2. Then set children -> content
+     * 3. Then scroll to bottom (if needed)
+     *
+     * In this way, we can measure the scroll position before the new content is set.
+     *
+     * In React 19, this started requiring useLayoutEffect.
+     */
+    React.useLayoutEffect(() => {
+        if (!el.current)
+            return;
+        wasAtBottom.current = distanceFromBottom(el.current) < threshold;
+        setContent(children);
+    }, [children, threshold]);
+    React.useLayoutEffect(() => {
+        if (!el.current)
+            return;
+        const atBottom = distanceFromBottom(el.current) < threshold;
+        if (wasAtBottom.current && !atBottom) {
+            scrollToBottom(el.current);
+            wasAtBottom.current = null;
+        }
+    }, [content, threshold]);
+    return (React.createElement(Scroller, { className: className, ref: (0, composeRefs_1.composeRefs)(el, ref) }, content));
+});
+exports.ScrollSnap = ScrollSnap;

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollSnap } from "./ScrollSnap";
+declare const meta: Meta<typeof ScrollSnap>;
+export default meta;
+type Story = StoryObj<typeof ScrollSnap>;
+export declare const Chat: Story;

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

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Chat = void 0;
+const React = require("react");
+const ScrollSnap_1 = require("./ScrollSnap");
+const styled_1 = require("@emotion/styled");
+const en_1 = require("@faker-js/faker/locale/en");
+const useInterval_1 = require("../../utils/useInterval");
+const Slider_1 = require("@mui/material/Slider");
+const Stack_1 = require("@mui/material/Stack");
+const Typography_1 = require("@mui/material/Typography");
+const Button_1 = require("../Button/Button");
+const Scroller = (0, styled_1.default)(ScrollSnap_1.ScrollSnap)({
+    width: "200px",
+    height: "350px",
+    border: "1pt solid black",
+});
+const meta = {
+    title: "smoot-design/ScrollSnap",
+    component: ScrollSnap_1.ScrollSnap,
+    render: function Render(args) {
+        const MAX = 3000;
+        const [updateInterval, setUpdateInterval] = React.useState(MAX);
+        const [children, setChildren] = React.useState(en_1.faker.lorem.sentence());
+        const appendText = () => setChildren((current) => {
+            return `${current} ${en_1.faker.lorem.sentence()}`;
+        });
+        (0, useInterval_1.useInterval)(() => {
+            appendText();
+        }, updateInterval === MAX ? null : updateInterval);
+        return (React.createElement(Stack_1.default, { gap: "12px", alignItems: "start" },
+            React.createElement(Typography_1.default, null, "Update interval (ms)"),
+            React.createElement(Slider_1.default, { sx: { width: "350px" }, marks: [
+                    { value: 100, label: "0.1s" },
+                    { value: 2000, label: "2s" },
+                    { value: MAX, label: "off" },
+                ], value: updateInterval, min: 100, max: MAX, onChange: (_e, val) => setUpdateInterval(val) }),
+            React.createElement(Scroller, Object.assign({}, args), children),
+            React.createElement(Button_1.Button, { onClick: appendText }, "Append Sentence")));
+    },
+};
+exports.default = meta;
+exports.Chat = {};

package/dist/cjs/components/ScrollSnap/useScrollSnap.d.ts

@@ -0,0 +1,6 @@
+declare const useScrollSnap: ({ scrollElement, contentElement, threshold, }: {
+    scrollElement: HTMLElement | null;
+    contentElement?: HTMLElement | null;
+    threshold?: number;
+}) => void;
+export { useScrollSnap };

package/dist/cjs/components/ScrollSnap/useScrollSnap.js

@@ -0,0 +1,36 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useScrollSnap = void 0;
+const react_1 = require("react");
+/**
+ * Returns the distance between visible content and the bottom of the element.
+ */
+const distanceFromBottom = (el) => {
+    return el.scrollHeight - el.clientHeight - el.scrollTop;
+};
+/**
+ * Scrolls to the bottom of the element.
+ */
+const scrollToBottom = (el) => {
+    el.scrollTop = el.scrollHeight;
+};
+const useScrollSnap = ({ scrollElement, contentElement, threshold = 2, }) => {
+    (0, react_1.useEffect)(() => {
+        const onGrow = () => {
+            if (!scrollElement)
+                return;
+            if (distanceFromBottom(scrollElement) < threshold) {
+                scrollToBottom(scrollElement);
+            }
+        };
+        onGrow();
+        const resizeObserver = new ResizeObserver(onGrow);
+        if (contentElement) {
+            resizeObserver.observe(contentElement);
+        }
+        return () => {
+            resizeObserver.disconnect();
+        };
+    }, [scrollElement, contentElement, threshold]);
+};
+exports.useScrollSnap = useScrollSnap;

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

@@ -0,0 +1,25 @@
+import * as React from "react";
+type SrAnnouncerProps = {
+    /**
+     * Message text to be read to user.
+     *
+     * Cannot contain HTML elements—only text.
+     */
+    message: string;
+    /**
+     * Messages to display while the component is in a loading state.
+     *
+     * Identical consecutive messages may not be read on some screen readers.
+     */
+    loadingMessages?: {
+        delay: number;
+        text: string;
+    }[];
+    isLoading: boolean;
+};
+/**
+ * A component that announces messages to screen readers as they come in.
+ */
+declare const SrAnnouncer: React.FC<SrAnnouncerProps>;
+export { SrAnnouncer };
+export type { SrAnnouncerProps };

package/dist/cjs/components/SrAnnouncer/SrAnnouncer.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SrAnnouncer = void 0;
+const React = require("react");
+const VisuallyHidden_1 = require("../VisuallyHidden/VisuallyHidden");
+const react_1 = require("react");
+const useDevCheckStable_1 = require("../../utils/useDevCheckStable");
+const DEFAULT_PROPS = {
+    loadingMessages: [
+        { delay: 1500, text: "Loading" },
+        { delay: 4000, text: "Still loading" },
+    ],
+};
+/**
+ * A component that announces messages to screen readers as they come in.
+ */
+const SrAnnouncer = ({ message, isLoading, loadingMessages = DEFAULT_PROPS.loadingMessages, }) => {
+    var _a;
+    const [loadingMsgIndex, setLoadingMsgIndex] = React.useState(-1);
+    /**
+     * If loadingMessages changes, the timeouts are reset.
+     * Desirable if the change is real, undesirable if it's a mistake (e.g., by
+     * passing an array literal as a prop).
+     */
+    (0, useDevCheckStable_1.useDevCheckStable)(loadingMessages, "SrAnnouncer: loadingMessages changed (by ===) unexpectedly. This may interfere with loading message visibility");
+    (0, react_1.useEffect)(() => {
+        setLoadingMsgIndex(-1);
+    }, [isLoading, loadingMessages]);
+    (0, react_1.useEffect)(() => {
+        const next = loadingMessages[loadingMsgIndex + 1];
+        if (!isLoading || !next)
+            return () => { };
+        const id = setTimeout(() => {
+            setLoadingMsgIndex(loadingMsgIndex + 1);
+        }, next.delay);
+        return () => {
+            clearTimeout(id);
+        };
+    }, [isLoading, loadingMsgIndex, loadingMessages]);
+    const loadingTxt = (_a = loadingMessages[loadingMsgIndex]) === null || _a === void 0 ? void 0 : _a.text;
+    return (React.createElement(VisuallyHidden_1.VisuallyHidden, { "aria-atomic": "true", "aria-live": "polite" }, isLoading ? loadingTxt : message));
+};
+exports.SrAnnouncer = SrAnnouncer;

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

@@ -0,0 +1,6 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { SrAnnouncer } from "./SrAnnouncer";
+declare const meta: Meta<typeof SrAnnouncer>;
+export default meta;
+type Story = StoryObj<typeof SrAnnouncer>;
+export declare const ScreenreaderAnnouncements: Story;

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

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenreaderAnnouncements = void 0;
+const React = require("react");
+const SrAnnouncer_1 = require("./SrAnnouncer");
+const styled_1 = require("@emotion/styled");
+const Container = styled_1.default.div(({ forceVisible }) => [
+    forceVisible && {
+        width: "100% !important",
+        height: "100px !important",
+        "& > *:first-of-type": {
+            width: "unset !important",
+            height: "unset !important",
+            clipPath: "none !important",
+            clip: "unset !important",
+            position: "unset !important",
+        },
+    },
+]);
+const meta = {
+    title: "smoot-design/ScreenreaderAnnouncer",
+    component: SrAnnouncer_1.SrAnnouncer,
+    decorators: function Decorator(Story) {
+        const [forceVisible, setForceVisible] = React.useState(true);
+        return (React.createElement(React.Fragment, null,
+            React.createElement("label", null,
+                "Force Visible:",
+                React.createElement("input", { type: "checkbox", checked: forceVisible, onChange: (e) => setForceVisible(e.target.checked) }),
+                React.createElement("p", null, "By default, the content of this story is visually hidden.")),
+            React.createElement("hr", null),
+            React.createElement(Container, { forceVisible: forceVisible },
+                React.createElement(Story, null))));
+    },
+    args: {
+        message: "A message to read to user",
+        isLoading: true,
+        loadingMessages: [
+            { delay: 1000, text: "Loading" },
+            { delay: 3000, text: "Still loading" },
+        ],
+    },
+};
+exports.default = meta;
+exports.ScreenreaderAnnouncements = {};

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

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

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

@@ -0,0 +1,62 @@
+"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 SrAnnouncer_1 = require("./SrAnnouncer");
+const sleep = (ms) => {
+    (0, react_1.act)(() => {
+        jest.advanceTimersByTime(ms);
+    });
+};
+describe("SrAnnouncer", () => {
+    beforeEach(() => {
+        jest.useFakeTimers();
+        jest.clearAllTimers();
+    });
+    test("Renders a message when not loading", () => {
+        const { container } = (0, react_1.render)(React.createElement(SrAnnouncer_1.SrAnnouncer, { message: "Hello, world!", isLoading: false }));
+        expect(container.textContent).toBe("Hello, world!");
+    });
+    test("Renders a loading message when loading", () => __awaiter(void 0, void 0, void 0, function* () {
+        const loadingMessages = [
+            { delay: 100, text: "Loading 1" },
+            { delay: 200, text: "Loading 2" },
+        ];
+        const { container, rerender } = (0, react_1.render)(React.createElement(SrAnnouncer_1.SrAnnouncer, { message: "Hello, world!", loadingMessages: loadingMessages, isLoading: true }));
+        expect(container.textContent).toBe("");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 1");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 1");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 2");
+        sleep(1000);
+        expect(container.textContent).toBe("Loading 2");
+        rerender(React.createElement(SrAnnouncer_1.SrAnnouncer, { message: "Hello, world!", loadingMessages: loadingMessages, isLoading: false }));
+        expect(container.textContent).toBe("Hello, world!");
+        rerender(React.createElement(SrAnnouncer_1.SrAnnouncer, { message: "Hello, world!", loadingMessages: loadingMessages, isLoading: true }));
+        expect(container.textContent).toBe("");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 1");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 1");
+        sleep(100);
+        expect(container.textContent).toBe("Loading 2");
+    }));
+    test("Warns if loadingMessages changes unexpectedly", () => {
+        const error = jest.spyOn(console, "error").mockImplementation(() => { });
+        const { rerender } = (0, react_1.render)(React.createElement(SrAnnouncer_1.SrAnnouncer, { message: "Hello, world!", isLoading: true }));
+        rerender(React.createElement(SrAnnouncer_1.SrAnnouncer, { message: "Hello, world!", isLoading: true, loadingMessages: [{ delay: 100, text: "Loading" }] }));
+        expect(error).toHaveBeenCalled();
+        error.mockRestore();
+    });
+});

package/dist/cjs/components/TabButtons/TabButtonList.d.ts

@@ -0,0 +1,25 @@
+import * as React from "react";
+import type { TabProps } from "@mui/material/Tab";
+import type { TabListProps } from "@mui/lab/TabList";
+import type { ButtonLinkProps } from "../Button/Button";
+type StyleVariant = "chat";
+type TabButtonListProps = TabListProps & {
+    styleVariant?: StyleVariant;
+};
+declare const TabButtonList: React.FC<TabButtonListProps>;
+declare const TabLinkInner: React.ForwardRefExoticComponent<Omit<ButtonLinkProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+type TabButtonProps = Omit<TabProps<"button">, "color"> & {
+    styleVariant?: StyleVariant;
+};
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * Button as the `component` implementation.
+ */
+declare const TabButton: (props: TabButtonProps) => React.JSX.Element;
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * ButtonLink as the `component` implementation.
+ */
+declare const TabButtonLink: ({ ...props }: TabProps<typeof TabLinkInner>) => React.JSX.Element;
+export { TabButtonList, TabButton, TabButtonLink };
+export type { TabButtonListProps, TabButtonProps };

package/dist/cjs/components/TabButtons/TabButtonList.js

@@ -0,0 +1,97 @@
+"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.TabButtonLink = exports.TabButton = exports.TabButtonList = void 0;
+const React = require("react");
+const Tab_1 = require("@mui/material/Tab");
+const TabList_1 = require("@mui/lab/TabList");
+const styled_1 = require("@emotion/styled");
+const Button_1 = require("../Button/Button");
+const react_1 = require("@emotion/react");
+const defaultTabListProps = {
+    variant: "scrollable",
+    allowScrollButtonsMobile: true,
+    scrollButtons: "auto",
+};
+const TabButtonList = (0, styled_1.default)((_a) => {
+    var { styleVariant } = _a, props = __rest(_a, ["styleVariant"]);
+    return (React.createElement(TabList_1.default, Object.assign({}, defaultTabListProps, props)));
+})(({ theme, styleVariant }) => (Object.assign({ minHeight: "unset", ".MuiTabs-indicator": {
+        display: "none",
+    }, ".MuiTabs-flexContainer": {
+        gap: "8px",
+        alignItems: "center",
+    }, ".MuiTabs-scroller": {
+        display: "flex",
+    } }, (styleVariant === "chat" && {
+    flexGrow: 1,
+    ".MuiTabs-flexContainer": {
+        flexGrow: 1,
+        gap: "8px",
+        alignItems: "center",
+        backgroundColor: theme.custom.colors.lightGray1,
+        padding: "4px",
+        borderRadius: "8px",
+    },
+    button: Object.assign({ flexGrow: 1, backgroundColor: "transparent" }, theme.typography.body2),
+    "button[aria-selected=true], button[aria-selected=true]:hover": {
+        backgroundColor: theme.custom.colors.darkGray1,
+        color: theme.custom.colors.white,
+        cursor: "default",
+    },
+}))));
+exports.TabButtonList = TabButtonList;
+const tabStyles = ({ theme }) => (0, react_1.css)({
+    minWidth: "auto",
+    ":focus-visible": {
+        outlineOffset: "-1px",
+    },
+    '&[aria-selected="true"]': {
+        backgroundColor: theme.custom.colors.white,
+        borderColor: theme.custom.colors.darkGray2,
+    },
+});
+const TabButtonStyled = (0, styled_1.default)(Button_1.Button)(tabStyles);
+const TabLinkStyled = (0, styled_1.default)(Button_1.ButtonLink)(tabStyles);
+const defaultTabButtonProps = {
+    variant: "tertiary",
+    size: "small",
+};
+const TabButtonInner = React.forwardRef(
+// Omits the `className` prop from the underlying Button so that MUI does not
+// style it. We style it ourselves.
+(props, ref) => {
+    const { className } = props, others = __rest(props, ["className"]);
+    return React.createElement(TabButtonStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }));
+});
+TabButtonInner.displayName = "TabButtonInner";
+const TabLinkInner = React.forwardRef((props, ref) => {
+    const { className } = props, others = __rest(props, ["className"]);
+    return (React.createElement(TabLinkStyled, Object.assign({}, defaultTabButtonProps, others, { ref: ref }), props.children));
+});
+TabLinkInner.displayName = "TabLinkInner";
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * Button as the `component` implementation.
+ */
+const TabButton = (props) => (React.createElement(Tab_1.default, Object.assign({}, props, { component: TabButtonInner })));
+exports.TabButton = TabButton;
+/**
+ * Wrapper around [MUI Tab](https://mui.com/material-ui/api/tab/) using our
+ * ButtonLink as the `component` implementation.
+ */
+const TabButtonLink = (_a) => {
+    var props = __rest(_a, []);
+    return (React.createElement(Tab_1.default, Object.assign({}, props, { component: TabLinkInner })));
+};
+exports.TabButtonLink = TabButtonLink;

package/dist/cjs/components/TabButtons/TabButtonList.stories.d.ts

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import type { TabButtonListProps } from "./TabButtonList";
+type StoryProps = TabButtonListProps & {
+    count: number;
+};
+declare const meta: Meta<StoryProps>;
+export default meta;
+type Story = StoryObj<StoryProps>;
+/**
+ * Use `TabButtonList` and `TabButton` to render a list of tabs styled as our tertiary buttons:
+ */
+export declare const ButtonTabs: Story;
+/**
+ * `TabButtonList` chat style variant:
+ */
+export declare const ButtonTabsChatVariant: Story;
+/**
+ * By default, the tabs will be scrollable if there are too many to fit in the container:
+ */
+export declare const ManyButtonTabs: Story;
+/**
+ * Use `TabButtonLink` for tabs that should affect the URL:
+ */
+export declare const LinkTabs: Story;