@mitodl/smoot-design 1.1.0 → 1.2.0

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Links = exports.Showcase = exports.VariantsAndEdge = void 0;
+exports.Showcase = exports.Links = exports.VariantsAndEdge = void 0;
 const React = require("react");
 const ActionButton_1 = require("./ActionButton");
 const Grid2_1 = require("@mui/material/Grid2");
@@ -18,6 +18,7 @@ const VARIANTS = (0, story_utils_1.enumValues)({
     primary: true,
     secondary: true,
     tertiary: true,
+    bordered: true,
     text: true,
     unstable_noBorder: true,
     unstable_inverted: true,
@@ -68,33 +69,22 @@ exports.VariantsAndEdge = {
             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"],
 };
-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))))))))))),
-};
 /**
  * `ActionButtonLink` is styled as a `ActionButton` that renders an anchor tag.
  *
@@ -107,5 +97,20 @@ exports.Links = {
         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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { LinkAdapterPropsOverrides } from "../LinkAdapter/LinkAdapter";
-type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "unstable_noBorder" | "unstable_inverted" | "unstable_success";
+type ButtonVariant = "primary" | "secondary" | "tertiary" | "text" | "bordered" | "unstable_noBorder" | "unstable_inverted" | "unstable_success";
 type ButtonSize = "small" | "medium" | "large";
 type ButtonEdge = "circular" | "rounded" | "none";
 type ButtonStyleProps = {

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

@@ -60,7 +60,7 @@ const sizeStyles = (size, hasBorder, theme) => {
 const buttonStyles = (props) => {
     const { size, variant, edge, theme, color, responsive } = Object.assign(Object.assign({}, DEFAULT_PROPS), props);
     const { colors } = theme.custom;
-    const hasBorder = variant === "secondary";
+    const hasBorder = variant === "secondary" || variant === "bordered";
     return (0, react_1.css)([
         {
             color: theme.palette.text.primary,
@@ -99,11 +99,6 @@ const buttonStyles = (props) => {
                 boxShadow: "none",
             },
         },
-        hasBorder && {
-            backgroundColor: "transparent",
-            borderColor: "currentcolor",
-            borderStyle: "solid",
-        },
         variant === "unstable_success" && {
             backgroundColor: colors.darkGreen,
             color: colors.white,
@@ -119,13 +114,11 @@ const buttonStyles = (props) => {
                 boxShadow: "none",
             },
         },
-        hasBorder && {
+        variant === "secondary" && {
+            color: colors.red,
             backgroundColor: "transparent",
             borderColor: "currentcolor",
             borderStyle: "solid",
-        },
-        variant === "secondary" && {
-            color: colors.red,
             ":hover:not(:disabled)": {
                 // brightRed at 0.06 alpha
                 backgroundColor: "rgba(255, 20, 35, 0.06)",
@@ -146,6 +139,20 @@ const buttonStyles = (props) => {
                 color: colors.silverGray,
             },
         },
+        variant === "bordered" && {
+            backgroundColor: colors.white,
+            color: colors.silverGrayDark,
+            border: `1px solid ${colors.silverGrayLight}`,
+            ":hover:not(:disabled)": {
+                backgroundColor: colors.lightGray1,
+                color: colors.darkGray2,
+            },
+            ":disabled": {
+                backgroundColor: colors.lightGray2,
+                border: `1px solid ${colors.lightGray2}`,
+                color: colors.silverGrayDark,
+            },
+        },
         variant === "unstable_noBorder" && {
             backgroundColor: colors.white,
             color: colors.darkGray2,

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

@@ -18,6 +18,7 @@ const VARIANTS = (0, story_utils_1.enumValues)({
     primary: true,
     secondary: true,
     tertiary: true,
+    bordered: true,
     text: true,
     unstable_noBorder: true,
     unstable_inverted: true,
@@ -58,16 +59,19 @@ exports.VariantsAndEdge = {
             React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "primary" }, args), "Primary"),
             React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "secondary" }, args), "Secondary"),
             React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "bordered" }, args), "Bordered"),
             React.createElement(Button_1.Button, Object.assign({ edge: "none", variant: "text" }, args), "Text")),
         React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
             React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "primary" }, args), "Primary"),
             React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "secondary" }, args), "Secondary"),
             React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "bordered" }, args), "Bordered"),
             React.createElement(Button_1.Button, Object.assign({ edge: "rounded", variant: "text" }, args), "Text")),
         React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
             React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "primary" }, args), "Primary"),
             React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "secondary" }, args), "Secondary"),
             React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "tertiary" }, args), "Tertiary"),
+            React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "bordered" }, args), "Bordered"),
             React.createElement(Button_1.Button, Object.assign({ edge: "circular", variant: "text" }, args), "Text")))),
     tags: ["main"],
 };
@@ -112,6 +116,7 @@ exports.Links = {
         React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "primary" }, "Link"),
         React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "secondary" }, "Link"),
         React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "tertiary" }, "Link"),
+        React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "bordered" }, "Link"),
         React.createElement(Button_1.ButtonLink, { href: "#fake", variant: "text" }, "Link"))),
 };
 exports.Showcase = {

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,57 @@
+"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();
+    // `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.
+     */
+    React.useEffect(() => {
+        if (!el.current)
+            return;
+        wasAtBottom.current = distanceFromBottom(el.current) < threshold;
+        setContent(children);
+    }, [children, threshold]);
+    React.useEffect(() => {
+        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/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/VisuallyHidden/VisuallyHidden.d.ts

@@ -0,0 +1,24 @@
+/**
+ * VisuallyHidden is a utility component that hides its children from sighted
+ * users, but keeps them accessible to screen readers.
+ *
+ * Often, screenreader-only content can be handled with an `aria-label`. However,
+ * occasionally we need actual elements.
+ *
+ * Example:
+ *  - a visually hidden aria-live section that reads announcements that
+ *    isual users can ascertain in some other way.
+ *  - a visually hidden Heading for a section whose purpose is clear for sighted users
+ *  - a visually hidden description used for aria-describeddby
+ *     - There is an aria-description attribute that can be used to provide a
+ *       without an actual element on the page. However, it is introduced in
+ *       ARIA 1.3 (working draft), not compatible with some screen readers, and
+ *       flagged problematic by our linting.
+ *
+ * The CSS here is based on https://inclusive-components.design/tooltips-toggletips/
+ */
+declare const VisuallyHidden: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export { VisuallyHidden };

package/dist/cjs/components/VisuallyHidden/VisuallyHidden.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisuallyHidden = void 0;
+const styled_1 = require("@emotion/styled");
+/**
+ * VisuallyHidden is a utility component that hides its children from sighted
+ * users, but keeps them accessible to screen readers.
+ *
+ * Often, screenreader-only content can be handled with an `aria-label`. However,
+ * occasionally we need actual elements.
+ *
+ * Example:
+ *  - a visually hidden aria-live section that reads announcements that
+ *    isual users can ascertain in some other way.
+ *  - a visually hidden Heading for a section whose purpose is clear for sighted users
+ *  - a visually hidden description used for aria-describeddby
+ *     - There is an aria-description attribute that can be used to provide a
+ *       without an actual element on the page. However, it is introduced in
+ *       ARIA 1.3 (working draft), not compatible with some screen readers, and
+ *       flagged problematic by our linting.
+ *
+ * The CSS here is based on https://inclusive-components.design/tooltips-toggletips/
+ */
+const VisuallyHidden = styled_1.default.span({
+    clipPath: "inset(100%)",
+    clip: "rect(1px, 1px, 1px, 1px)",
+    height: "1px",
+    overflow: "hidden",
+    position: "absolute",
+    whiteSpace: "nowrap",
+    width: "1px",
+});
+exports.VisuallyHidden = VisuallyHidden;

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

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

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScreenreaderOnly = void 0;
+const VisuallyHidden_1 = require("./VisuallyHidden");
+const meta = {
+    title: "smoot-design/VisuallyHidden",
+    component: VisuallyHidden_1.VisuallyHidden,
+    args: {
+        children: "Not visible, but screen readers can still read this text.",
+    },
+};
+exports.default = meta;
+exports.ScreenreaderOnly = {};

package/dist/cjs/index.d.ts

@@ -7,3 +7,10 @@ export type { ButtonProps, ButtonLinkProps } from "./components/Button/Button";
 export { ActionButton, ActionButtonLink, } from "./components/Button/ActionButton";
 export type { ActionButtonProps, ActionButtonLinkProps, } from "./components/Button/ActionButton";
 export type { LinkAdapterPropsOverrides } from "./components/LinkAdapter/LinkAdapter";
+export { Input } from "./components/Input/Input";
+export type { InputProps } from "./components/Input/Input";
+export { TextField } from "./components/TextField/TextField";
+export type { TextFieldProps } from "./components/TextField/TextField";
+export { SrAnnouncer } from "./components/SrAnnouncer/SrAnnouncer";
+export type { SrAnnouncerProps } from "./components/SrAnnouncer/SrAnnouncer";
+export { VisuallyHidden } from "./components/VisuallyHidden/VisuallyHidden";

package/dist/cjs/index.js

@@ -1,7 +1,7 @@
 "use strict";
 "use client";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.NextJsAppRouterCacheProvider = exports.Global = exports.css = exports.styled = void 0;
+exports.VisuallyHidden = exports.SrAnnouncer = exports.TextField = exports.Input = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = exports.createTheme = exports.ThemeProvider = exports.NextJsAppRouterCacheProvider = exports.Global = exports.css = exports.styled = void 0;
 var styled_1 = require("@emotion/styled");
 Object.defineProperty(exports, "styled", { enumerable: true, get: function () { return styled_1.default; } });
 var react_1 = require("@emotion/react");
@@ -18,3 +18,11 @@ Object.defineProperty(exports, "ButtonLink", { enumerable: true, get: function (
 var ActionButton_1 = require("./components/Button/ActionButton");
 Object.defineProperty(exports, "ActionButton", { enumerable: true, get: function () { return ActionButton_1.ActionButton; } });
 Object.defineProperty(exports, "ActionButtonLink", { enumerable: true, get: function () { return ActionButton_1.ActionButtonLink; } });
+var Input_1 = require("./components/Input/Input");
+Object.defineProperty(exports, "Input", { enumerable: true, get: function () { return Input_1.Input; } });
+var TextField_1 = require("./components/TextField/TextField");
+Object.defineProperty(exports, "TextField", { enumerable: true, get: function () { return TextField_1.TextField; } });
+var SrAnnouncer_1 = require("./components/SrAnnouncer/SrAnnouncer");
+Object.defineProperty(exports, "SrAnnouncer", { enumerable: true, get: function () { return SrAnnouncer_1.SrAnnouncer; } });
+var VisuallyHidden_1 = require("./components/VisuallyHidden/VisuallyHidden");
+Object.defineProperty(exports, "VisuallyHidden", { enumerable: true, get: function () { return VisuallyHidden_1.VisuallyHidden; } });

package/dist/cjs/jest-setup.js

@@ -1,3 +1,18 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 require("@testing-library/jest-dom");
+// eslint-disable-next-line @typescript-eslint/no-require-imports
+const failOnConsole = require("jest-fail-on-console");
+failOnConsole();
+beforeAll(() => {
+    const scrollBy = jest.fn();
+    HTMLElement.prototype.scrollBy = scrollBy;
+});
+afterEach(() => {
+    /**
+     * Clear all mock call counts between tests.
+     * This does NOT clear mock implementations.
+     * Mock implementations are always cleared between test files.
+     */
+    jest.clearAllMocks();
+});

package/dist/cjs/jsdom-extended.d.ts

@@ -0,0 +1,6 @@
+import { TestEnvironment } from "jest-environment-jsdom";
+import { EnvironmentContext, JestEnvironmentConfig } from "@jest/environment";
+declare class JSDOMEnvironmentExtended extends TestEnvironment {
+    constructor(config: JestEnvironmentConfig, context: EnvironmentContext);
+}
+export default JSDOMEnvironmentExtended;