@mitodl/smoot-design 0.0.0-preview215f7ae3fa

package/dist/cjs/components/ThemeProvider/colors.d.ts

@@ -0,0 +1,32 @@
+declare const colors: {
+    mitRed: string;
+    brightRed: string;
+    black: string;
+    white: string;
+    darkGray2: string;
+    darkGray1: string;
+    silverGrayDark: string;
+    silverGray: string;
+    silverGrayLight: string;
+    lightGray2: string;
+    lightGray1: string;
+    navGray: string;
+    darkPink: string;
+    pink: string;
+    lightPink: string;
+    darkPurple: string;
+    purple: string;
+    lightPurple: string;
+    darkBlue: string;
+    blue: string;
+    lightBlue: string;
+    darkGreen: string;
+    green: string;
+    lightGreen: string;
+    darkRed: string;
+    red: string;
+    lightRed: string;
+    orange: string;
+    yellow: string;
+};
+export { colors };

package/dist/cjs/components/ThemeProvider/colors.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colors = void 0;
+const colors = {
+    mitRed: "#750014",
+    brightRed: "#FF1423",
+    black: "#000000",
+    white: "#FFFFFF",
+    darkGray2: "#212326",
+    darkGray1: "#40464C",
+    silverGrayDark: "#626A73",
+    silverGray: "#8B959E",
+    silverGrayLight: "#B8C2CC",
+    lightGray2: "#DDE1E6",
+    lightGray1: "#F3F4F8",
+    navGray: "#303337",
+    darkPink: "#750062",
+    pink: "#FF14F0",
+    lightPink: "#FFB3FF",
+    darkPurple: "#3E006B",
+    purple: "#93F",
+    lightPurple: "#BFB3FF",
+    darkBlue: "#002896",
+    blue: "#1966FF",
+    lightBlue: "#99EBFF",
+    darkGreen: "#004D1A",
+    green: "#00AD00",
+    lightGreen: "#AF3",
+    darkRed: "#83192A",
+    red: "#A31F34",
+    lightRed: "#D02E44",
+    orange: "#FAB005",
+    yellow: "#FFEB00",
+};
+exports.colors = colors;

package/dist/cjs/components/ThemeProvider/typography.d.ts

@@ -0,0 +1,18 @@
+import type { ThemeOptions } from "@mui/material/styles";
+/**
+ * This function converts from pixels to rems, assuming a base font size of 16px
+ * (which is the default for most modern browsers).
+ *
+ * Using this function, we can:
+ * - match desgins that are in pixels for default font size
+ * - allow users to scale the font size up or down by chaning base font size.
+ *
+ * For example, a Chrome user might specify a base font size of 20px ("large")
+ * in their browser settings. Then, `pxToRem(32)` would actually be 40px for
+ * that user.
+ */
+declare const pxToRem: (px: number) => string;
+declare const globalSettings: ThemeOptions["typography"];
+declare const component: NonNullable<ThemeOptions["components"]>["MuiTypography"];
+declare const typography: import("@mui/material/styles").TypographyVariants;
+export { globalSettings, component, pxToRem, typography };

package/dist/cjs/components/ThemeProvider/typography.js

@@ -0,0 +1,174 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.typography = exports.pxToRem = exports.component = exports.globalSettings = void 0;
+const styles_1 = require("@mui/material/styles");
+const fontWeights = {
+    text: {
+        roman: 400,
+        medium: 500,
+        bold: 700,
+    },
+};
+/**
+ * This function converts from pixels to rems, assuming a base font size of 16px
+ * (which is the default for most modern browsers).
+ *
+ * Using this function, we can:
+ * - match desgins that are in pixels for default font size
+ * - allow users to scale the font size up or down by chaning base font size.
+ *
+ * For example, a Chrome user might specify a base font size of 20px ("large")
+ * in their browser settings. Then, `pxToRem(32)` would actually be 40px for
+ * that user.
+ */
+const pxToRem = (px) => `${px / 16}rem`;
+exports.pxToRem = pxToRem;
+const globalSettings = {
+    // Note: Figma calls this "Neue Haas Grotesk Text", but that is incorrect based on Adobe's font family.
+    fontFamily: "neue-haas-grotesk-text, sans-serif",
+    fontWeightLight: fontWeights.text.roman,
+    fontWeightRegular: fontWeights.text.roman,
+    fontWeightMedium: fontWeights.text.medium,
+    fontWeightBold: fontWeights.text.bold,
+    h1: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.bold,
+        fontStyle: "normal",
+        fontSize: pxToRem(52),
+        lineHeight: pxToRem(60),
+    },
+    h2: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.bold,
+        fontStyle: "normal",
+        fontSize: pxToRem(34),
+        lineHeight: pxToRem(40),
+    },
+    h3: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.bold,
+        fontStyle: "normal",
+        fontSize: pxToRem(28),
+        lineHeight: pxToRem(36),
+    },
+    h4: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.bold,
+        fontStyle: "normal",
+        fontSize: pxToRem(24),
+        lineHeight: pxToRem(30),
+    },
+    h5: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(18),
+        lineHeight: pxToRem(22),
+    },
+    subtitle1: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(16),
+        lineHeight: pxToRem(20),
+    },
+    subtitle2: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(14),
+        lineHeight: pxToRem(18),
+    },
+    subtitle3: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(12),
+        lineHeight: pxToRem(16),
+    },
+    subtitle4: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(10),
+        lineHeight: pxToRem(14),
+    },
+    body1: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.roman,
+        fontStyle: "normal",
+        fontSize: pxToRem(16),
+        lineHeight: pxToRem(20),
+    },
+    body2: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.roman,
+        fontStyle: "normal",
+        fontSize: pxToRem(14),
+        lineHeight: pxToRem(18),
+    },
+    body3: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.roman,
+        fontStyle: "normal",
+        fontSize: pxToRem(12),
+        lineHeight: pxToRem(16),
+    },
+    body4: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.roman,
+        fontStyle: "normal",
+        fontSize: pxToRem(10),
+        lineHeight: pxToRem(14),
+    },
+    buttonLarge: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(16),
+        lineHeight: pxToRem(20),
+    },
+    button: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(14),
+        lineHeight: pxToRem(18),
+        textTransform: "none",
+    },
+    buttonSmall: {
+        fontFamily: "neue-haas-grotesk-text, sans-serif",
+        fontWeight: fontWeights.text.medium,
+        fontStyle: "normal",
+        fontSize: pxToRem(12),
+        lineHeight: pxToRem(16),
+    },
+};
+exports.globalSettings = globalSettings;
+const component = {
+    defaultProps: {
+        variantMapping: {
+            h1: "span",
+            h2: "span",
+            h3: "span",
+            h4: "span",
+            h5: "span",
+            body1: "p",
+            body2: "p",
+            body3: "p",
+            body4: "p",
+            subtitle1: "p",
+            subtitle2: "p",
+            subtitle3: "p",
+            subtitle4: "p",
+            button: "span",
+        },
+    },
+};
+exports.component = component;
+const { typography } = (0, styles_1.createTheme)({
+    typography: globalSettings,
+    // @ts-expect-error: we only care about typography from this theme
+    custom: {},
+});
+exports.typography = typography;

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/components/internal/FormHelpers/FormHelpers.d.ts

@@ -0,0 +1,39 @@
+import * as React from "react";
+declare const Description: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+} & {
+    error?: boolean;
+}, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+type ControlLabelProps = {
+    htmlFor: string;
+    label: React.ReactNode;
+    required?: boolean;
+    id?: string;
+    fullWidth?: boolean;
+};
+declare const ControlLabel: React.FC<ControlLabelProps>;
+type FormFieldWrapperProps = {
+    label: React.ReactNode;
+    required?: boolean;
+    helpText?: string;
+    error?: boolean;
+    errorText?: string;
+    className?: string;
+    fullWidth?: boolean;
+    /**
+     * The id of the input element. If not provided, a unique id will be generated.
+     */
+    id?: string;
+    children: (childProps: {
+        id: string;
+        required?: boolean;
+        error?: boolean;
+        fullWidth?: boolean;
+        labelId: string;
+        "aria-describedby"?: string;
+    }) => React.ReactNode;
+};
+declare const FormFieldWrapper: React.FC<FormFieldWrapperProps>;
+export { FormFieldWrapper, ControlLabel, Description };
+export type { FormFieldWrapperProps, ControlLabelProps };

package/dist/cjs/components/internal/FormHelpers/FormHelpers.js

@@ -0,0 +1,78 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Description = exports.ControlLabel = exports.FormFieldWrapper = void 0;
+const React = require("react");
+const styled_1 = require("@emotion/styled");
+const react_1 = require("@remixicon/react");
+const Typography_1 = require("@mui/material/Typography");
+const Required = styled_1.default.span(({ theme }) => ({
+    color: theme.custom.colors.lightRed,
+    marginLeft: "4px",
+}));
+const Description = styled_1.default.div(({ theme, error }) => [
+    Object.assign(Object.assign({}, theme.typography.body2), { color: error
+            ? theme.custom.colors.lightRed
+            : theme.custom.colors.silverGrayDark }),
+    error && {
+        textIndent: "-24px",
+        paddingLeft: "24px",
+        "> svg:first-of-type": {
+            marginRight: "4px",
+            transform: "translateY(2px)",
+            width: "18px",
+            height: "18px",
+            position: "relative",
+            top: "2px",
+        },
+    },
+]);
+exports.Description = Description;
+const Container = styled_1.default.div(({ fullWidth }) => [
+    {
+        display: "inline-flex",
+        flexDirection: "column",
+        alignItems: "start",
+        "> *:not(:last-child)": {
+            marginBottom: "4px",
+        },
+    },
+    fullWidth && {
+        width: "100%",
+    },
+]);
+const ControlLabel = ({ htmlFor, label, required, id, fullWidth, }) => {
+    return (React.createElement(Typography_1.default, { id: id, component: "label", htmlFor: htmlFor, variant: "subtitle2", sx: { marginBottom: "4px", width: fullWidth ? "100%" : "auto" } },
+        label,
+        required ? React.createElement(Required, { "aria-hidden": "true" }, "*") : null));
+};
+exports.ControlLabel = ControlLabel;
+const FormFieldWrapper = ({ label, required, helpText, error, errorText, className, fullWidth, id, children, }) => {
+    const fallbackInputId = React.useId();
+    const inputId = id || fallbackInputId;
+    const helpId = React.useId();
+    const errorId = React.useId();
+    const labelId = React.useId();
+    /**
+     * aria-errormessage would be more semantic for the error message but has
+     * somewhat limited support. See https://github.com/w3c/aria/issues/2048 for
+     * some related information.
+     */
+    const describedBy = [helpText && helpId, error && errorText && errorId]
+        .filter(Boolean)
+        .join(" ") || undefined;
+    return (React.createElement(Container, { className: className, fullWidth: fullWidth },
+        React.createElement(ControlLabel, { htmlFor: inputId, id: labelId, label: label, required: required, fullWidth: fullWidth }),
+        children({
+            id: inputId,
+            error,
+            required,
+            labelId,
+            fullWidth,
+            "aria-describedby": describedBy,
+        }),
+        helpText && React.createElement(Description, { id: helpId }, helpText),
+        error && errorText && (React.createElement(Description, { id: errorId, error: true },
+            React.createElement(react_1.RiErrorWarningLine, { fontSize: "inherit" }),
+            errorText))));
+};
+exports.FormFieldWrapper = FormFieldWrapper;

package/dist/cjs/components/internal/FormHelpers/FormHelpers.test.d.ts

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

package/dist/cjs/components/internal/FormHelpers/FormHelpers.test.js

@@ -0,0 +1,93 @@
+"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 });
+const React = require("react");
+const react_1 = require("@testing-library/react");
+const FormHelpers_1 = require("./FormHelpers");
+const ThemeProvider_1 = require("../../../components/ThemeProvider/ThemeProvider");
+const en_1 = require("@faker-js/faker/locale/en");
+const assertDescription = ({ text, total, exists, }) => {
+    var _a;
+    const input = react_1.screen.getByRole("textbox");
+    const describedBy = input.getAttribute("aria-describedby");
+    const descriptionIds = (_a = describedBy === null || describedBy === void 0 ? void 0 : describedBy.split(" ")) !== null && _a !== void 0 ? _a : [];
+    if (total === 0) {
+        expect(describedBy).toBe(null);
+    }
+    expect(descriptionIds.length).toBe(total);
+    const description = react_1.screen.queryByText(text);
+    expect(!!description).toBe(exists);
+    if (exists) {
+        expect(description).toBeInTheDocument();
+        expect(descriptionIds).toContain(description === null || description === void 0 ? void 0 : description.id);
+    }
+};
+describe("FormFieldWrapper", () => {
+    const setup = (props) => {
+        const defaults = {
+            name: "test-name",
+            value: "test-value",
+            label: "test-label",
+        };
+        const { rerender: _rerender } = (0, react_1.render)(React.createElement(FormHelpers_1.FormFieldWrapper, Object.assign({}, defaults, props), (_a) => {
+            var { error, labelId, fullWidth } = _a, childProps = __rest(_a, ["error", "labelId", "fullWidth"]);
+            return (React.createElement("input", Object.assign({}, childProps)));
+        }), {
+            wrapper: ThemeProvider_1.ThemeProvider,
+        });
+        const rerender = (newProps) => {
+            _rerender(React.createElement(FormHelpers_1.FormFieldWrapper, Object.assign({}, defaults, newProps), (_a) => {
+                var { error, labelId, fullWidth } = _a, childProps = __rest(_a, ["error", "labelId", "fullWidth"]);
+                return (React.createElement("input", Object.assign({}, childProps)));
+            }));
+        };
+        return { rerender };
+    };
+    it("Labels the input", () => {
+        const label = en_1.faker.lorem.words();
+        setup({ label });
+        const input = react_1.screen.getByRole("textbox", { name: label });
+        expect(input).toBeInstanceOf(HTMLInputElement);
+    });
+    it("Has a description only if description provided", () => {
+        const label = en_1.faker.lorem.words();
+        const helpText = en_1.faker.lorem.words();
+        const { rerender } = setup({ label, helpText });
+        assertDescription({ text: helpText, total: 1, exists: true });
+        rerender({ label });
+        assertDescription({ text: helpText, total: 0, exists: false });
+    });
+    it("Has an error message only if errorText provided AND error=true", () => {
+        const label = en_1.faker.lorem.words();
+        const errorText = en_1.faker.lorem.words();
+        const { rerender } = setup({ label, errorText, error: true });
+        assertDescription({ text: errorText, total: 1, exists: true });
+        rerender({ label, errorText });
+        assertDescription({ text: errorText, total: 0, exists: false });
+        rerender({ label, error: true });
+        assertDescription({ text: errorText, total: 0, exists: false });
+        rerender({ label, errorText, error: true });
+        assertDescription({ text: errorText, total: 1, exists: true });
+    });
+    it("Shows both description and errormessage if both provided and error", () => {
+        const label = en_1.faker.lorem.words();
+        const errorText = en_1.faker.lorem.words();
+        const helpText = en_1.faker.lorem.words();
+        const { rerender } = setup({ label, errorText, helpText });
+        assertDescription({ text: helpText, total: 1, exists: true });
+        assertDescription({ text: errorText, total: 1, exists: false });
+        rerender({ label, errorText, helpText, error: true });
+        assertDescription({ text: helpText, total: 2, exists: true });
+        assertDescription({ text: errorText, total: 2, exists: true });
+    });
+});

package/dist/cjs/index.d.ts

@@ -0,0 +1,16 @@
+export { default as styled } from "@emotion/styled";
+export { css, Global } from "@emotion/react";
+export { AppRouterCacheProvider as NextJsAppRouterCacheProvider } from "@mui/material-nextjs/v15-appRouter";
+export { ThemeProvider, createTheme, } from "./components/ThemeProvider/ThemeProvider";
+export { Button, ButtonLink } from "./components/Button/Button";
+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

@@ -0,0 +1,28 @@
+"use strict";
+"use client";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+Object.defineProperty(exports, "css", { enumerable: true, get: function () { return react_1.css; } });
+Object.defineProperty(exports, "Global", { enumerable: true, get: function () { return react_1.Global; } });
+var v15_appRouter_1 = require("@mui/material-nextjs/v15-appRouter");
+Object.defineProperty(exports, "NextJsAppRouterCacheProvider", { enumerable: true, get: function () { return v15_appRouter_1.AppRouterCacheProvider; } });
+var ThemeProvider_1 = require("./components/ThemeProvider/ThemeProvider");
+Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return ThemeProvider_1.ThemeProvider; } });
+Object.defineProperty(exports, "createTheme", { enumerable: true, get: function () { return ThemeProvider_1.createTheme; } });
+var Button_1 = require("./components/Button/Button");
+Object.defineProperty(exports, "Button", { enumerable: true, get: function () { return Button_1.Button; } });
+Object.defineProperty(exports, "ButtonLink", { enumerable: true, get: function () { return Button_1.ButtonLink; } });
+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.d.ts

@@ -0,0 +1 @@
+import "@testing-library/jest-dom";

package/dist/cjs/jest-setup.js

@@ -0,0 +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;

package/dist/cjs/jsdom-extended.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// Jest environment extended with Web APIs para tranbajar con MSW
+const jest_environment_jsdom_1 = require("jest-environment-jsdom");
+class JSDOMEnvironmentExtended extends jest_environment_jsdom_1.TestEnvironment {
+    constructor(config, context) {
+        super(config, context);
+        this.global.TransformStream = TransformStream;
+        this.global.ReadableStream = ReadableStream;
+        this.global.Response = Response;
+        this.global.TextDecoderStream = TextDecoderStream;
+    }
+}
+exports.default = JSDOMEnvironmentExtended;

package/dist/cjs/story-utils/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A type helper just to make sure an array contains union values.
+ */
+declare const enumValues: <T extends string | undefined>(obj: Record<NonNullable<T>, unknown>) => NonNullable<T>[];
+declare const gitLink: (filepath: string) => string;
+export { enumValues, gitLink };