@mitodl/smoot-design 0.0.0-0a23f44

package/dist/cjs/components/Input/Input.js

@@ -0,0 +1,237 @@
+"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.baseInputStyles = exports.Input = exports.AdornmentButton = void 0;
+const React = require("react");
+const styled_1 = require("@emotion/styled");
+const react_1 = require("@emotion/react");
+const InputBase_1 = require("@mui/material/InputBase");
+const classnames_1 = require("classnames");
+const defaultProps = {
+    size: "medium",
+    multiline: false,
+};
+const responsiveSize = {
+    small: "small",
+    medium: "small",
+    large: "medium",
+    chat: "chat",
+    hero: "large",
+};
+const sizeStyles = ({ size, theme, multiline }) => (0, react_1.css)([
+    (size === "small" || size === "medium") && Object.assign({}, theme.typography.body2),
+    (size === "large" || size === "chat" || size === "hero") && Object.assign({ ".remixicon": {
+            width: "24px",
+            height: "24px",
+        } }, theme.typography.body1),
+    size === "medium" && {
+        paddingLeft: "12px",
+        paddingRight: "12px",
+    },
+    size === "small" &&
+        !multiline && {
+        height: "32px",
+    },
+    size === "medium" &&
+        !multiline && {
+        height: "40px",
+    },
+    size === "large" &&
+        !multiline && {
+        height: "48px",
+    },
+    size === "chat" &&
+        !multiline && {
+        height: "56px",
+    },
+    size === "hero" &&
+        !multiline && {
+        height: "72px",
+    },
+    size === "small" && {
+        padding: "0 8px",
+        ".Mit-AdornmentButton": {
+            width: "32px",
+            ".remixicon": {
+                width: "16px",
+                height: "16px",
+            },
+        },
+    },
+    size === "medium" && {
+        padding: "0 12px",
+        ".Mit-AdornmentButton": {
+            width: "40px",
+            ".remixicon": {
+                width: "20px",
+                height: "20px",
+            },
+        },
+    },
+    size === "large" && {
+        padding: "0 16px",
+        ".Mit-AdornmentButton": {
+            width: "48px",
+        },
+    },
+    size === "chat" && {
+        padding: "0 16px",
+        borderRadius: "8px",
+        borderColor: theme.custom.colors.silverGrayLight,
+        backgroundColor: theme.custom.colors.white,
+        ".Mit-AdornmentButton": {
+            padding: "0 16px",
+        },
+    },
+    size === "hero" && {
+        padding: "0 24px",
+        ".Mit-AdornmentButton": {
+            width: "72px",
+        },
+    },
+]);
+/**
+ * Base styles for Input and Select components. Includes border, color, hover effects.
+ */
+const baseInputStyles = (theme) => ({
+    backgroundColor: "white",
+    color: theme.custom.colors.darkGray2,
+    borderColor: theme.custom.colors.silverGrayLight,
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: "4px",
+    overflow: "hidden",
+    "&.Mui-disabled": {
+        backgroundColor: theme.custom.colors.lightGray1,
+    },
+    "&:hover:not(.Mui-disabled):not(.Mui-focused)": {
+        borderColor: theme.custom.colors.darkGray2,
+    },
+    "&.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: "transparent",
+        outline: "2px solid currentcolor",
+        outlineOffset: "-2px",
+    },
+    "&.Mui-error": {
+        borderColor: theme.custom.colors.red,
+        outlineColor: theme.custom.colors.red,
+    },
+    "& input::placeholder, textarea::placeholder": {
+        color: theme.custom.colors.silverGrayDark,
+        opacity: 1, // some browsers apply opacity to placeholder text
+    },
+    "& input:placeholder-shown, textarea:placeholder-shown": {
+        textOverflow: "ellipsis",
+    },
+    "& textarea": {
+        paddingTop: "8px",
+        paddingBottom: "8px",
+    },
+    "&.MuiInputBase-adornedStart": {
+        paddingLeft: "0",
+        input: {
+            paddingLeft: "8px",
+        },
+    },
+    "&.MuiInputBase-adornedEnd": {
+        paddingRight: "0",
+        input: {
+            paddingRight: "8px",
+        },
+    },
+});
+exports.baseInputStyles = baseInputStyles;
+const noForward = Object.keys({
+    responsive: true,
+});
+/**
+ * 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/?path=/docs/smoot-design-input--docs)
+ * - [InputBase Documentation](https://mui.com/api/input-base/)
+ */
+const Input = (0, styled_1.default)(InputBase_1.default, {
+    shouldForwardProp: (prop) => !noForward.includes(prop),
+})(({ theme, size = defaultProps.size, multiline, responsive }) => [
+    baseInputStyles(theme),
+    sizeStyles({ size, theme, multiline }),
+    responsive && {
+        [theme.breakpoints.down("sm")]: sizeStyles({
+            size: responsiveSize[size],
+            theme,
+            multiline,
+        }),
+    },
+]);
+exports.Input = Input;
+const AdornmentButtonStyled = styled_1.default.button(({ theme, disabled }) => (Object.assign(Object.assign({}, theme.typography.button), { 
+    // display
+    display: "flex", flexShrink: 0, justifyContent: "center", alignItems: "center", 
+    // background and border
+    border: "none", background: "transparent", transition: `background ${theme.transitions.duration.short}ms`, 
+    // cursor
+    cursor: disabled ? "default" : "pointer", ":disabled": {
+        cursor: "default",
+        svg: {
+            fill: theme.custom.colors.silverGray,
+        },
+    }, ":hover": {
+        background: disabled ? "inherit" : "rgba(0, 0, 0, 0.06)",
+    }, color: theme.custom.colors.silverGray, ".MuiInputBase-root:hover &": {
+        color: "inherit",
+    }, ".MuiInputBase-root.Mui-focused &": {
+        color: "inherit",
+    }, ".MuiInputBase-root.Mui-disabled &": {
+        color: "inherit",
+    }, height: "100%" })));
+const noFocus = (e) => e.preventDefault();
+/**
+ * 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.
+ */
+const AdornmentButton = (_a) => {
+    var { className } = _a, others = __rest(_a, ["className"]);
+    return (React.createElement(AdornmentButtonStyled
+    /**
+     * If the input is focused and user clicks the AdornmentButton, we don't
+     * want to steal focus from the input.
+     */
+    , Object.assign({ 
+        /**
+         * If the input is focused and user clicks the AdornmentButton, we don't
+         * want to steal focus from the input.
+         */
+        onMouseDown: noFocus, className: (0, classnames_1.default)("Mit-AdornmentButton", className) }, others)));
+};
+exports.AdornmentButton = AdornmentButton;

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

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Input } from "./Input";
+declare const meta: Meta<typeof Input>;
+export default meta;
+type Story = StoryObj<typeof Input>;
+export declare const Sizes: Story;
+/**
+ * **Note:** Adornments should be wrapped in an `AdornmentButton` component.
+ *
+ * ```tsx
+ * <Input startAdornment={
+ *  <AdornmentButton>
+ *    <RiSearchLine />
+ *  </AdornmentButton>
+ * } {...otherProps} />
+ * ```
+ */
+export declare const Adornments: Story;
+export declare const States: Story;

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

@@ -0,0 +1,135 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.States = exports.Adornments = exports.Sizes = void 0;
+const React = require("react");
+const Input_1 = require("./Input");
+const Stack_1 = require("@mui/material/Stack");
+const Grid2_1 = require("@mui/material/Grid2");
+const react_1 = require("@remixicon/react");
+const test_1 = require("@storybook/test");
+const story_utils_1 = require("../../story-utils");
+const Typography_1 = require("@mui/material/Typography");
+const SIZES = (0, story_utils_1.enumValues)({
+    small: true,
+    medium: true,
+    large: true,
+    chat: true,
+    hero: true,
+});
+const ADORNMENTS = {
+    None: undefined,
+    SearchIcon: (React.createElement(Input_1.AdornmentButton, null,
+        React.createElement(react_1.RiSearchLine, null))),
+    CalendarTodayIcon: (React.createElement(Input_1.AdornmentButton, null,
+        React.createElement(react_1.RiCalendarLine, null))),
+    CloseIcon: (React.createElement(Input_1.AdornmentButton, null,
+        React.createElement(react_1.RiCloseLine, null))),
+    "Close and Calendar": (React.createElement(React.Fragment, null,
+        React.createElement(Input_1.AdornmentButton, null,
+            React.createElement(react_1.RiCloseLine, null)),
+        React.createElement(Input_1.AdornmentButton, null,
+            React.createElement(react_1.RiCalendarLine, null)))),
+};
+const meta = {
+    title: "smoot-design/Input",
+    component: Input_1.Input,
+    argTypes: {
+        startAdornment: {
+            options: Object.keys(ADORNMENTS),
+            mapping: ADORNMENTS,
+            control: { type: "select" },
+        },
+        endAdornment: {
+            options: Object.keys(ADORNMENTS),
+            mapping: ADORNMENTS,
+            control: { type: "select" },
+        },
+    },
+    args: {
+        onChange: (0, test_1.fn)(),
+        value: "some value",
+        placeholder: "placeholder",
+    },
+};
+exports.default = meta;
+exports.Sizes = {
+    render: (args) => {
+        return (React.createElement(Stack_1.default, { direction: "row", gap: 1 },
+            React.createElement(Input_1.Input, Object.assign({ size: "small" }, args)),
+            React.createElement(Input_1.Input, Object.assign({ size: "medium" }, args)),
+            React.createElement(Input_1.Input, Object.assign({ size: "large" }, args)),
+            React.createElement(Input_1.Input, Object.assign({ size: "hero" }, args))));
+    },
+};
+/**
+ * **Note:** Adornments should be wrapped in an `AdornmentButton` component.
+ *
+ * ```tsx
+ * <Input startAdornment={
+ *  <AdornmentButton>
+ *    <RiSearchLine />
+ *  </AdornmentButton>
+ * } {...otherProps} />
+ * ```
+ */
+exports.Adornments = {
+    render: (args) => {
+        const adornments = [
+            { startAdornment: ADORNMENTS.SearchIcon },
+            { endAdornment: ADORNMENTS.CloseIcon },
+            {
+                startAdornment: ADORNMENTS.SearchIcon,
+                endAdornment: ADORNMENTS["Close and Calendar"],
+            },
+        ];
+        return (React.createElement(Grid2_1.default, { container: true, maxWidth: "1400px", spacing: 2 }, Object.values(adornments).flatMap((props, i) => SIZES.map((size) => {
+            return (React.createElement(Grid2_1.default, { size: { xs: 3 }, key: `${i}-${size}` },
+                React.createElement(Input_1.Input, Object.assign({}, args, { size: size }, props))));
+        }))));
+    },
+    argTypes: {
+        startAdornment: { table: { disable: true } },
+        endAdornment: { table: { disable: true } },
+    },
+};
+exports.States = {
+    render: (args) => {
+        return (React.createElement(Grid2_1.default, { container: true, spacing: 2, alignItems: "center", maxWidth: "400px" },
+            React.createElement(Grid2_1.default, { size: { xs: 4 } },
+                React.createElement(Typography_1.default, null, "Placeholder")),
+            React.createElement(Grid2_1.default, { size: { xs: 8 } },
+                React.createElement(Input_1.Input, Object.assign({}, args, { value: "" }))),
+            React.createElement(Grid2_1.default, { size: { xs: 4 } },
+                React.createElement(Typography_1.default, null, "Default")),
+            React.createElement(Grid2_1.default, { size: { xs: 8 } },
+                React.createElement(Input_1.Input, Object.assign({}, args))),
+            React.createElement(Grid2_1.default, { size: { xs: 4 } },
+                React.createElement(Typography_1.default, null, "Initially Focused")),
+            React.createElement(Grid2_1.default, { size: { xs: 8 } },
+                React.createElement(Input_1.Input
+                // This is a story just demonstrating the autofocus prop
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                , Object.assign({ 
+                    // This is a story just demonstrating the autofocus prop
+                    // eslint-disable-next-line jsx-a11y/no-autofocus
+                    autoFocus: true }, args))),
+            React.createElement(Grid2_1.default, { size: { xs: 4 } },
+                React.createElement(Typography_1.default, null, "Error")),
+            React.createElement(Grid2_1.default, { size: { xs: 8 } },
+                React.createElement(Input_1.Input, Object.assign({}, args, { error: true }))),
+            React.createElement(Grid2_1.default, { size: { xs: 4 } },
+                React.createElement(Typography_1.default, null, "Disabled")),
+            React.createElement(Grid2_1.default, { size: { xs: 8 } },
+                React.createElement(Input_1.Input, Object.assign({}, args, { disabled: true })))));
+    },
+    args: {
+        placeholder: "This is placeholder text.",
+        value: "Some value",
+    },
+    argTypes: {
+        placeholder: { table: { disable: true } },
+        value: { table: { disable: true } },
+        error: { table: { disable: true } },
+        disabled: { table: { disable: true } },
+    },
+};

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

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

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

@@ -0,0 +1,32 @@
+"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 Input_1 = require("./Input");
+const ThemeProvider_1 = require("../ThemeProvider/ThemeProvider");
+describe("AdornmentButton", () => {
+    it("Does not steal focus from input when clicked", () => __awaiter(void 0, void 0, void 0, function* () {
+        const onClick = jest.fn();
+        (0, react_1.render)(React.createElement(Input_1.Input, { endAdornment: React.createElement(Input_1.AdornmentButton, { onClick: onClick }, "Test") }), { wrapper: ThemeProvider_1.ThemeProvider });
+        const input = react_1.screen.getByRole("textbox");
+        const button = react_1.screen.getByRole("button", { name: "Test" });
+        yield user_event_1.default.click(input);
+        expect(input).toHaveFocus();
+        yield user_event_1.default.click(button);
+        expect(input).toHaveFocus();
+        expect(onClick).toHaveBeenCalledTimes(1);
+        // But it should still be focusable via keyboard
+        yield user_event_1.default.tab();
+        expect(button).toHaveFocus();
+    }));
+});

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

@@ -0,0 +1,23 @@
+import * as React from "react";
+/**
+ * LinkAdapterPropsOverrides can be used with module augmentation to provide
+ * extra props to ButtonLink.
+ *
+ * For example, in a NextJS App, you might set `next/link` as your default
+ * Link implementation, and use LinkAdapterPropsOverrides to provide
+ * `next/link`-specific props.
+ */
+interface LinkAdapterPropsOverrides {
+}
+type LinkAdapterProps = React.ComponentProps<"a"> & {
+    Component?: React.ElementType;
+} & LinkAdapterPropsOverrides;
+/**
+ * Overrideable link component.
+ * - If `Component` is provided, renders as `Component`
+ * - else, if `theme.custom.LinkAdapter` is provided, renders as `theme.custom.LinkAdapter`
+ * - else, renders as `a` tag
+ */
+declare const LinkAdapter: React.ForwardRefExoticComponent<Omit<LinkAdapterProps, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
+export { LinkAdapter };
+export type { LinkAdapterPropsOverrides, LinkAdapterProps };

package/dist/cjs/components/LinkAdapter/LinkAdapter.js

@@ -0,0 +1,34 @@
+"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.LinkAdapter = void 0;
+const React = require("react");
+const react_1 = require("@emotion/react");
+const styled_1 = require("@emotion/styled");
+const PlainLink = styled_1.default.a({
+    color: "inherit",
+    textDecoration: "none",
+});
+/**
+ * Overrideable link component.
+ * - If `Component` is provided, renders as `Component`
+ * - else, if `theme.custom.LinkAdapter` is provided, renders as `theme.custom.LinkAdapter`
+ * - else, renders as `a` tag
+ */
+const LinkAdapter = React.forwardRef(function LinkAdapter(_a, ref) {
+    var { Component } = _a, props = __rest(_a, ["Component"]);
+    const theme = (0, react_1.useTheme)();
+    const LinkComponent = Component !== null && Component !== void 0 ? Component : theme.custom.LinkAdapter;
+    return (React.createElement(PlainLink, Object.assign({ as: LinkComponent, ref: ref }, props), props.children));
+});
+exports.LinkAdapter = LinkAdapter;

package/dist/cjs/components/RadioChoiceField/BooleanRadioChoiceField.stories.d.ts

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

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

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Simple = void 0;
+const React = require("react");
+const RadioChoiceField_1 = require("./RadioChoiceField");
+function StateWrapper(props) {
+    const [value, setValue] = React.useState(props.value);
+    const onChange = (event) => {
+        var _a;
+        const { value } = event;
+        (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, { name: "Test", value });
+        setValue(value);
+    };
+    return (React.createElement(RadioChoiceField_1.BooleanRadioChoiceField, Object.assign({}, props, { value: value, onChange: onChange })));
+}
+const meta = {
+    title: "smoot-design/BooleanRadioChoiceField",
+    component: RadioChoiceField_1.BooleanRadioChoiceField,
+    render: (args) => React.createElement(StateWrapper, Object.assign({}, args)),
+    argTypes: {
+        onChange: {
+            action: "changed",
+        },
+        value: {
+            disabled: true,
+        },
+    },
+};
+exports.default = meta;
+exports.Simple = {
+    args: {
+        label: "Boolean radio choice field label",
+        value: true,
+        defaultValue: "option-1",
+        name: "Radio choice field name",
+        choices: [
+            {
+                value: true,
+                label: "True",
+            },
+            {
+                value: false,
+                label: "False",
+            },
+        ],
+    },
+};

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

@@ -0,0 +1,45 @@
+import * as React from "react";
+import type { RadioGroupProps } from "@mui/material/RadioGroup";
+interface RadioChoiceProps {
+    value: string;
+    label: React.ReactNode;
+    className?: string;
+}
+interface RadioChoiceFieldProps {
+    label: React.ReactNode;
+    value?: string;
+    defaultValue?: string;
+    name: string;
+    choices: RadioChoiceProps[];
+    onChange?: RadioGroupProps["onChange"];
+    className?: string;
+}
+/**
+ * Wrapper around MUI components to make a form field with:
+ *  - radio group input
+ *  - label
+ *  - help text and error message, if any
+ *
+ * Avoid using MUI's Radio and RadioGroup directly. Prefer this component.
+ */
+declare const RadioChoiceField: React.FC<RadioChoiceFieldProps>;
+interface BooleanRadioChoiceProps {
+    value: boolean;
+    label: React.ReactNode;
+    className?: string;
+}
+interface BooleanRadioChoiceFieldProps {
+    label: string;
+    value?: boolean;
+    defaultValue?: string;
+    name: string;
+    choices: BooleanRadioChoiceProps[];
+    onChange?: (event: {
+        name: string;
+        value: boolean;
+    }) => void;
+    className?: string;
+}
+declare const BooleanRadioChoiceField: React.FC<BooleanRadioChoiceFieldProps>;
+export { RadioChoiceField, BooleanRadioChoiceField };
+export type { RadioChoiceFieldProps, RadioChoiceProps, BooleanRadioChoiceFieldProps, BooleanRadioChoiceProps, };

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

@@ -0,0 +1,69 @@
+"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.BooleanRadioChoiceField = exports.RadioChoiceField = void 0;
+const React = require("react");
+const react_1 = require("react");
+const FormControl_1 = require("@mui/material/FormControl");
+const FormControlLabel_1 = require("@mui/material/FormControlLabel");
+const Radio_1 = require("@mui/material/Radio");
+const RadioGroup_1 = require("@mui/material/RadioGroup");
+const styled_1 = require("@emotion/styled");
+const RadioGroupStyled = (0, styled_1.default)(RadioGroup_1.default)(({ theme }) => ({
+    display: "flex",
+    flexDirection: "row",
+    gap: "16px",
+    [theme.breakpoints.down("md")]: {
+        flexDirection: "column",
+    },
+    ".MuiRadio-root:not(.Mui-checked) + .MuiFormControlLabel-label": {
+        color: theme.custom.colors.silverGrayDark,
+    },
+}));
+const Label = styled_1.default.div(({ theme }) => (Object.assign({ marginTop: "0", marginBottom: "16px", width: "100%", cursor: "default", color: theme.custom.colors.darkGray2 }, theme.typography.subtitle2)));
+/**
+ * Wrapper around MUI components to make a form field with:
+ *  - radio group input
+ *  - label
+ *  - help text and error message, if any
+ *
+ * Avoid using MUI's Radio and RadioGroup directly. Prefer this component.
+ */
+const RadioChoiceField = ({ label, value, defaultValue, name, choices, onChange, className, }) => {
+    const labelId = (0, react_1.useId)();
+    return (React.createElement(FormControl_1.default, { className: className },
+        React.createElement(Label, { id: labelId }, label),
+        React.createElement(RadioGroupStyled, { "aria-labelledby": labelId, name: name, defaultValue: defaultValue, value: value, onChange: onChange }, choices.map((choice) => {
+            const { value, label, className } = choice;
+            return (React.createElement(FormControlLabel_1.default, { key: value, value: value, control: React.createElement(Radio_1.default, { sx: {
+                        "&.Mui-focusVisible .MuiSvgIcon-root": {
+                            borderRadius: "100vh",
+                            outline: [
+                                "5px auto rgb(0, 103, 244)",
+                                "5px auto -webkit-focus-ring-color",
+                            ],
+                        },
+                    } }), label: label, slotProps: { typography: { variant: "body2" } }, className: className }));
+        }))));
+};
+exports.RadioChoiceField = RadioChoiceField;
+const BooleanRadioChoiceField = (_a) => {
+    var { choices, onChange, name, value } = _a, others = __rest(_a, ["choices", "onChange", "name", "value"]);
+    const stringifiedChoices = (0, react_1.useMemo)(() => choices.map((choice) => (Object.assign(Object.assign({}, choice), { value: choice.value ? "true" : "false" }))), [choices]);
+    const handleChange = (0, react_1.useCallback)((event) => {
+        const value = event.target.value === "true";
+        onChange === null || onChange === void 0 ? void 0 : onChange({ name: name, value });
+    }, [name, onChange]);
+    return (React.createElement(RadioChoiceField, Object.assign({ value: value === undefined ? undefined : String(value), name: name, onChange: handleChange, choices: stringifiedChoices }, others)));
+};
+exports.BooleanRadioChoiceField = BooleanRadioChoiceField;

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

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