@mitodl/smoot-design 1.0.1 → 1.1.0

package/README.md

@@ -11,3 +11,17 @@ To trigger a release, run the "Release" github action. Using [semantic-release](
 1. Inspect the commit history since previous release for [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/) an
 2. Determine whether the version bump should be major, minor, or patch based on commit types. Breaking changes (e.g., `feat!: remove Button variant 'outlined'`) will result in major version bumps.
 3. Publish the package to NPM and the repository's [Github Releases](https://github.com/mitodl/smoot-design/releases).
+
+## Documentation
+
+Documentation for `smoot-design` components is available at https://mitodl.github.io/smoot-design.
+
+### Storybook
+
+Components in `smoot-design` are documented using Storybook's [autodocs](https://storybook.js.org/docs/writing-docs/autodocs) feature.
+
+Autodocs _should_ infer props and comments from Typescript + JSDoc comments. However, autodocs can be a bit finnicky. Tips:
+
+- **Filename should match Component Name:** If you're documenting `Button`, it must be exported from a file called `Button.tsx`.
+- **Component `displayName`:** Some components may need an explicit `displayName`, this can be set by `Button.displayName="Button"`.
+  - _React component display names are not visible to end users; they are used in React's Dev Tools. React automatically adds display names for most components while transpiling, but autodocs uses un-transpiled code to generate documentation._

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

@@ -1,8 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { ActionButton } from "./Button";
-/**
- * A button that should contain a remixicon icon and nothing else.
- */
+import { ActionButton } from "./ActionButton";
 declare const meta: Meta<typeof ActionButton>;
 export default meta;
 type Story = StoryObj<typeof ActionButton>;

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

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Links = exports.Showcase = exports.VariantsAndEdge = void 0;
 const React = require("react");
-const Button_1 = require("./Button");
+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");
@@ -34,61 +34,51 @@ const EDGES = (0, story_utils_1.enumValues)({
     rounded: true,
     none: true,
 });
-/**
- * A button that should contain a remixicon icon and nothing else.
- */
 const meta = {
     title: "smoot-design/ActionButton",
-    component: Button_1.ActionButton,
+    component: ActionButton_1.ActionButton,
     argTypes: {
         variant: {
-            options: VARIANTS,
             control: { type: "select" },
             table: {
-                type: { summary: (0, story_utils_1.docsEnum)(VARIANTS) },
-                defaultValue: { summary: Button_1.DEFAULT_PROPS.variant },
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.variant },
             },
         },
         size: {
-            options: SIZES,
             control: { type: "select" },
             table: {
-                type: { summary: (0, story_utils_1.docsEnum)(SIZES) },
-                defaultValue: { summary: Button_1.DEFAULT_PROPS.size },
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.size },
             },
         },
         edge: {
-            options: EDGES,
             control: { type: "select" },
             table: {
-                type: { summary: (0, story_utils_1.docsEnum)(EDGES) },
-                defaultValue: { summary: Button_1.DEFAULT_PROPS.edge },
+                defaultValue: { summary: ActionButton_1.DEFAULT_PROPS.edge },
             },
         },
     },
     args: {
         onClick: (0, test_1.fn)(),
     },
-    tags: ["autodocs"],
 };
 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(Button_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "primary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "secondary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "tertiary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "none", variant: "text" }), ICONS.DeleteIcon)),
+            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: "text" }), ICONS.DeleteIcon)),
         React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "primary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "secondary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "tertiary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "rounded", variant: "text" }), ICONS.DeleteIcon)),
+            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: "text" }), ICONS.DeleteIcon)),
         React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "primary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "secondary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "tertiary" }), ICONS.DeleteIcon),
-            React.createElement(Button_1.ActionButton, Object.assign({}, args, { edge: "circular", variant: "text" }), ICONS.DeleteIcon)))),
+            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: "text" }), ICONS.DeleteIcon)))),
     tags: ["main"],
 };
 exports.Showcase = {
@@ -103,7 +93,7 @@ exports.Showcase = {
         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(Button_1.ActionButton, Object.assign({ variant: variant, edge: edge, size: size }, args), icon))))))))))),
+            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.
@@ -114,8 +104,8 @@ exports.Showcase = {
  */
 exports.Links = {
     render: () => (React.createElement(Stack_1.default, { direction: "row", gap: 2, sx: { my: 2 } },
-        React.createElement(Button_1.ActionButtonLink, { href: "#fake", variant: "primary" }, ICONS.DeleteIcon),
-        React.createElement(Button_1.ActionButtonLink, { href: "#fake", variant: "secondary" }, ICONS.DeleteIcon),
-        React.createElement(Button_1.ActionButtonLink, { href: "#fake", variant: "tertiary" }, ICONS.DeleteIcon),
-        React.createElement(Button_1.ActionButtonLink, { href: "#fake", variant: "text" }, ICONS.DeleteIcon))),
+        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: "text" }, ICONS.DeleteIcon))),
 };

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

@@ -8,7 +8,7 @@ type ButtonStyleProps = {
     size?: ButtonSize;
     edge?: ButtonEdge;
     /**
-     * Display an icon before the button text.
+     * Display an icon before the button text
      */
     startIcon?: React.ReactNode;
     /**
@@ -26,6 +26,16 @@ type ButtonStyleProps = {
     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<React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    Component?: React.ElementType;
+} & LinkAdapterPropsOverrides, "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).
@@ -42,29 +52,5 @@ type ButtonLinkProps = ButtonStyleProps & React.ComponentProps<"a"> & {
  * 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>>;
-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-button--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;
-} & ButtonStyleProps & React.ClassAttributes<HTMLAnchorElement> & React.AnchorHTMLAttributes<HTMLAnchorElement> & {
-    Component?: React.ElementType;
-} & LinkAdapterPropsOverrides, {}, {}>;
-export { Button, ButtonLink, ActionButton, ActionButtonLink, DEFAULT_PROPS };
-export type { ButtonProps, ButtonLinkProps, ActionButtonProps, ActionButtonLinkProps, };
+export { Button, ButtonLink, ButtonRoot, DEFAULT_PROPS, ButtonLinkRoot, RESPONSIVE_SIZES, };
+export type { ButtonProps, ButtonLinkProps, ButtonStyleProps, ButtonSize };

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DEFAULT_PROPS = exports.ActionButtonLink = exports.ActionButton = exports.ButtonLink = exports.Button = void 0;
+exports.RESPONSIVE_SIZES = exports.ButtonLinkRoot = exports.DEFAULT_PROPS = exports.ButtonRoot = exports.ButtonLink = exports.Button = void 0;
 const React = require("react");
 const styled_1 = require("@emotion/styled");
 const react_1 = require("@emotion/react");
@@ -26,7 +26,7 @@ const styleProps = {
     responsive: true,
     color: true,
 };
-const shouldForwardProp = (prop) => !styleProps[prop];
+const shouldForwardButtonProp = (prop) => !styleProps[prop];
 const DEFAULT_PROPS = {
     variant: "primary",
     size: "medium",
@@ -44,6 +44,7 @@ const RESPONSIVE_SIZES = {
     medium: "small",
     large: "medium",
 };
+exports.RESPONSIVE_SIZES = RESPONSIVE_SIZES;
 const sizeStyles = (size, hasBorder, theme) => {
     const paddingAdjust = hasBorder ? BORDER_WIDTHS[size] : 0;
     return [
@@ -56,7 +57,7 @@ const sizeStyles = (size, hasBorder, theme) => {
         size === "small" && Object.assign({ padding: `${8 - paddingAdjust}px 12px` }, theme.typography.buttonSmall),
     ];
 };
-const buildStyles = (props) => {
+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";
@@ -193,10 +194,14 @@ const buildStyles = (props) => {
         },
     ]);
 };
-const ButtonStyled = (0, styled_1.default)("button", { shouldForwardProp })(buildStyles);
-const LinkStyled = (0, styled_1.default)(LinkAdapter_1.LinkAdapter, {
-    shouldForwardProp,
-})(buildStyles);
+const ButtonRoot = (0, styled_1.default)("button", {
+    shouldForwardProp: shouldForwardButtonProp,
+})(buttonStyles);
+exports.ButtonRoot = ButtonRoot;
+const ButtonLinkRoot = (0, styled_1.default)(LinkAdapter_1.LinkAdapter, {
+    shouldForwardProp: shouldForwardButtonProp,
+})(buttonStyles);
+exports.ButtonLinkRoot = ButtonLinkRoot;
 const IconContainer = styled_1.default.span(({ size, side }) => [
     {
         height: "1em",
@@ -244,68 +249,18 @@ const ButtonInner = (props) => {
  */
 const Button = React.forwardRef((_a, ref) => {
     var { children } = _a, props = __rest(_a, ["children"]);
-    return (React.createElement(ButtonStyled, Object.assign({ ref: ref, type: "button" }, props),
+    return (React.createElement(ButtonRoot, Object.assign({ ref: ref, type: "button" }, props),
         React.createElement(ButtonInner, Object.assign({}, props), children)));
 });
 exports.Button = Button;
+Button.displayName = "Button";
 /**
  * See [ButtonLink docs](https://mitodl.github.io/smoot-design/?path=/docs/smoot-design-button--docs#links)
  */
 const ButtonLink = React.forwardRef((_a, ref) => {
     var { children, Component } = _a, props = __rest(_a, ["children", "Component"]);
-    return (React.createElement(LinkStyled, Object.assign({ Component: Component, ref: ref }, props),
+    return (React.createElement(ButtonLinkRoot, Object.assign({ Component: Component, ref: ref }, props),
         React.createElement(ButtonInner, Object.assign({}, props), children)));
 });
 exports.ButtonLink = ButtonLink;
 ButtonLink.displayName = "ButtonLink";
-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-button--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((props, ref) => (React.createElement(ButtonStyled, Object.assign({ ref: ref, type: "button" }, props)))))(({ size = DEFAULT_PROPS.size, responsive, theme }) => {
-    return [
-        actionStyles(size),
-        responsive && {
-            [theme.breakpoints.down("sm")]: actionStyles(RESPONSIVE_SIZES[size]),
-        },
-    ];
-});
-exports.ActionButton = 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(LinkStyled, Object.assign({ Component: Component }, props));
-});
-exports.ActionButtonLink = ActionButtonLink;
-ActionButtonLink.displayName = "ActionButtonLink";

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

@@ -38,30 +38,6 @@ const meta = {
     title: "smoot-design/Button",
     component: Button_1.Button,
     argTypes: {
-        variant: {
-            options: VARIANTS,
-            control: { type: "select" },
-            table: {
-                type: { summary: (0, story_utils_1.docsEnum)(VARIANTS) },
-                defaultValue: { summary: Button_1.DEFAULT_PROPS.variant },
-            },
-        },
-        size: {
-            options: SIZES,
-            control: { type: "select" },
-            table: {
-                type: { summary: (0, story_utils_1.docsEnum)(SIZES) },
-                defaultValue: { summary: Button_1.DEFAULT_PROPS.size },
-            },
-        },
-        edge: {
-            options: ["circular", "rounded"],
-            control: { type: "select" },
-            table: {
-                type: { summary: (0, story_utils_1.docsEnum)(EDGES) },
-                defaultValue: { summary: Button_1.DEFAULT_PROPS.edge },
-            },
-        },
         startIcon: {
             options: Object.keys(ICONS),
             mapping: ICONS,
@@ -70,16 +46,10 @@ const meta = {
             options: Object.keys(ICONS),
             mapping: ICONS,
         },
-        responsive: {
-            table: {
-                defaultValue: { summary: Button_1.DEFAULT_PROPS.responsive.toString() },
-            },
-        },
     },
     args: {
         onClick: (0, test_1.fn)(),
     },
-    tags: ["autodocs"],
 };
 exports.default = meta;
 exports.VariantsAndEdge = {

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

@@ -4,17 +4,20 @@ const React = require("react");
 const react_1 = require("@testing-library/react");
 const ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
 const Button_1 = require("./Button");
+const ActionButton_1 = require("./ActionButton");
 const withLinkOverride = (0, ThemeProvider_1.createTheme)({
     custom: {
-        LinkAdapter: React.forwardRef((props, ref) => (
-        // eslint-disable-next-line jsx-a11y/anchor-has-content
-        React.createElement("a", Object.assign({ ref: ref, "data-custom": "theme-default" }, props)))),
+        LinkAdapter: React.forwardRef(function LinkAdapter(props, ref) {
+            return (
+            // eslint-disable-next-line jsx-a11y/anchor-has-content
+            React.createElement("a", Object.assign({ ref: ref, "data-custom": "theme-default" }, props)));
+        }),
     },
 });
 describe.each([
     //
     { ButtonComponent: Button_1.ButtonLink },
-    { ButtonComponent: Button_1.ActionButtonLink },
+    { ButtonComponent: ActionButton_1.ActionButtonLink },
 ])("$ButtonComponent.displayName overrides", ({ ButtonComponent }) => {
     test("Uses anchor by default", () => {
         (0, react_1.render)(React.createElement(ButtonComponent, { href: "/test" }, "Link text here"), {

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

@@ -0,0 +1,115 @@
+import * as React from "react";
+import type { InputBaseProps } from "@mui/material/InputBase";
+import type { Theme } from "@mui/material/styles";
+type Size = "small" | "medium" | "large" | "hero";
+type CustomInputProps = {
+    /**
+     * If true, the input will display one size smaller at mobile breakpoint.
+     */
+    responsive?: boolean;
+};
+type MuiDocOverride = {
+    size?: Size;
+    /**
+     * Slot for icon adornments.
+     *
+     * If the icon is a button, use `AdornmentButton` component.
+     */
+    startAdornment?: React.ReactNode;
+    /**
+     * Slot for icon adornments.
+     *
+     * If the icon is a button, use `AdornmentButton` component.
+     */
+    endAdornment?: React.ReactNode;
+};
+type InputProps = CustomInputProps & MuiDocOverride & Omit<InputBaseProps, "color" | keyof MuiDocOverride>;
+/**
+ * Base styles for Input and Select components. Includes border, color, hover effects.
+ */
+declare const baseInputStyles: (theme: Theme) => {
+    backgroundColor: string;
+    color: string;
+    borderColor: string;
+    borderWidth: string;
+    borderStyle: string;
+    borderRadius: string;
+    "&.Mui-disabled": {
+        backgroundColor: string;
+    };
+    "&:hover:not(.Mui-disabled):not(.Mui-focused)": {
+        borderColor: string;
+    };
+    "&.Mui-focused": {
+        /**
+         * When change border width, it affects either the elements outside of it or
+         * inside based on the border-box setting.
+         *
+         * Instead of changing the border width, we hide the border and change width
+         * using outline.
+         */
+        borderColor: string;
+        outline: string;
+        outlineOffset: string;
+    };
+    "&.Mui-error": {
+        borderColor: string;
+        outlineColor: string;
+    };
+    "& input::placeholder, textarea::placeholder": {
+        color: string;
+        opacity: number;
+    };
+    "& input:placeholder-shown, textarea:placeholder-shown": {
+        textOverflow: string;
+    };
+    "& textarea": {
+        paddingTop: string;
+        paddingBottom: string;
+    };
+    "&.MuiInputBase-adornedStart": {
+        paddingLeft: string;
+        input: {
+            paddingLeft: string;
+        };
+    };
+    "&.MuiInputBase-adornedEnd": {
+        paddingRight: string;
+        input: {
+            paddingRight: string;
+        };
+    };
+};
+/**
+ * Use `Input` for a visually unlabelled input field. If used, it should still
+ * have an accessible label, e.g., provided via `aria-label`.
+ * For a labeled input field, use `TextField`. instead.
+ *
+ * **Note:** This component is a styled version of MUI's `InputBase`. See
+ * MUI's documentation for full info.
+ *
+ * - [Smoot Design Input Documentation](https://mitodl.github.io/smoot-design/https://mitodl.github.io/smoot-design/)
+ * - [InputBase Documentation](https://mui.com/api/input-base/)
+ */
+declare const Input: React.FC<InputProps>;
+declare const AdornmentButtonStyled: import("@emotion/styled").StyledComponent<{
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
+}, React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+type AdornmentButtonProps = React.ComponentProps<typeof AdornmentButtonStyled>;
+/**
+ * Button to be used with `startAdornment` and `endAdornment` props on Input and
+ * TextField components. AdornmentButton takes care of positioning and other
+ * styling concerns.
+ *
+ * NOTES:
+ *  - It is generally expected that the content of the AdornmentButton is a
+ *    Remix Icon component. https://remixicon.com/
+ *  - By default, the AdornmentButton calls `preventDefault` on `mouseDown`
+ *    events. This prevents the button from stealing focus from the input on
+ *    click. The button is still focusable via keyboard events. You can override
+ *    this behavior by passing your own `onMouseDown` handler.
+ */
+declare const AdornmentButton: React.FC<AdornmentButtonProps>;
+export { AdornmentButton, Input, baseInputStyles };
+export type { InputProps, AdornmentButtonProps };