reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/MenuItem/MenuItem.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../../components/Actionable";
-import Icon from "../../components/Icon";
-import View from "../../components/View";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
+import Actionable from "../../components/Actionable/index.js";
+import Icon from "../../components/Icon/index.js";
+import View from "../../components/View/index.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
-    const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", stopPropagation, as, render, className, attributes, } = props;
-    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"], highlighted && s["--highlighted"]);
+    const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, focusIndicator = "outline", disabled, onClick, href, size = "medium", stopPropagation, as, render, className, attributes, } = props;
+    const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"], highlighted && s["--highlighted"], focusIndicator === "highlight" && s["--focus-highlight"]);
     const gapSize = responsivePropDependency(size, (size) => {
         if (size === "large")
             return 3;

package/dist/components/MenuItem/MenuItem.module.css

@@ -1 +1 @@
-.root,button.root{display:block;transition:background-color var(--rs-duration-fast) var(--rs-easing-standard);padding:var(--rs-p-v) var(--rs-p-h);font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);color:var(--rs-menu-item-color);background-color:var(--rs-menu-item-bg-color);border-radius:var(--rs-radius-medium)}.root[role=option],button.root[role=option]{transition:none}[data-rs-keyboard] .root[role=option]:focus,[data-rs-keyboard] button.root[role=option]:focus{outline:none;background-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--highlighted,.root.--highlighted .content,.root.--highlighted .icon,button.root.--highlighted,button.root.--highlighted .content,button.root.--highlighted .icon{transition-duration:var(--rs-duration-rapid)}@media (hover:hover) and (pointer:fine){.root:hover,.root:hover .content,.root:hover .icon,button.root:hover,button.root:hover .content,button.root:hover .icon{transition-duration:var(--rs-duration-rapid)}}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-rapid) var(--rs-easing-standard);transition-property:color}.--size-small{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-critical{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-critical);--rs-menu-item-icon-color:var(--rs-color-foreground-critical)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-critical);--rs-menu-item-icon-color:var(--rs-color-foreground-critical)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:var(--rs-color-background-primary-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--size-small--m{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}
+.root,button.root{display:block;transition:background-color var(--rs-duration-fast) var(--rs-easing-standard);padding:var(--rs-p-v) var(--rs-p-h);font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);color:var(--rs-menu-item-color);background-color:var(--rs-menu-item-bg-color);border-radius:var(--rs-radius-medium)}.root[role=option],button.root[role=option]{transition:none}[data-rs-keyboard] .root.--focus-highlight:focus,[data-rs-keyboard] button.root.--focus-highlight:focus{outline:none}.root.--highlighted,.root.--highlighted .content,.root.--highlighted .icon,[data-rs-keyboard] .root.--focus-highlight:focus,[data-rs-keyboard] .root.--focus-highlight:focus .content,[data-rs-keyboard] .root.--focus-highlight:focus .icon,[data-rs-keyboard] button.root.--focus-highlight:focus,[data-rs-keyboard] button.root.--focus-highlight:focus .content,[data-rs-keyboard] button.root.--focus-highlight:focus .icon,button.root.--highlighted,button.root.--highlighted .content,button.root.--highlighted .icon{transition-duration:var(--rs-duration-rapid)}@media (hover:hover) and (pointer:fine){.root:hover,.root:hover .content,.root:hover .icon,button.root:hover,button.root:hover .content,button.root:hover .icon{transition-duration:var(--rs-duration-rapid)}}@media (hover:hover) and (pointer:fine){:is([role=menu],[role=listbox]):has(.root:hover) .root:focus:not(:hover){outline:none}:is([role=menu],[role=listbox]):has(.root:hover) .root:focus:not(:hover).--focus-highlight:not(.--selected,.--highlighted){--rs-menu-item-bg-color:initial;--rs-menu-item-color:initial;--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-rapid) var(--rs-easing-standard);transition-property:color}.--size-small{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,[data-rs-keyboard] .--color-neutral.--focus-highlight:focus{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-critical{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-critical.--highlighted,.--color-critical.--selected,[data-rs-keyboard] .--color-critical.--focus-highlight:focus{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-critical);--rs-menu-item-icon-color:var(--rs-color-foreground-critical)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-critical);--rs-menu-item-icon-color:var(--rs-color-foreground-critical)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,[data-rs-keyboard] .--color-primary.--focus-highlight:focus{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:var(--rs-color-background-primary-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--size-small--m{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-p-h:var(--rs-unit-x2);--rs-menu-item-radius:var(--rs-radius-small);font-size:var(--rs-font-size-caption-1);line-height:var(--rs-line-height-caption-1);letter-spacing:var(--rs-letter-spacing-caption-1)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:calc(var(--rs-unit-x2) + var(--rs-unit-x0-5));--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}

package/dist/components/MenuItem/MenuItem.types.d.ts

@@ -1,10 +1,11 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableProps } from "../../components/Actionable";
-import type { IconProps } from "../../components/Icon";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type { ActionableProps } from "../../components/Actionable/index.js";
+import type { IconProps } from "../../components/Icon/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Size = "small" | "medium" | "large";
+export type FocusIndicator = "outline" | "highlight";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as" | "stopPropagation" | "render"> & {
     /** Component color, based on the color tokens */
     color?: "neutral" | "critical" | "primary";
@@ -18,6 +19,8 @@ export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled
     endSlot?: React.ReactNode;
     /** Highlight the component as hovered or focused. For example, when displaying currently focused item in Autocomplete */
     highlighted?: boolean;
+    /** Visual indicator for the keyboard focus state, highlight uses the same styles as hover */
+    focusIndicator?: FocusIndicator;
     /** Highlight the component as selected */
     selected?: boolean;
     /** Component size */

package/dist/components/MenuItem/MenuItemAligner.d.ts

@@ -1,3 +1,3 @@
-import { type AlignerProps } from "../../components/_private/Aligner";
+import { type AlignerProps } from "../../components/_private/Aligner/index.js";
 declare const MenuItemAligner: React.FC<AlignerProps>;
 export default MenuItemAligner;

package/dist/components/MenuItem/MenuItemAligner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Aligner from "../../components/_private/Aligner";
+import Aligner from "../../components/_private/Aligner/index.js";
 import s from "./MenuItem.module.css";
 const MenuItemAligner = (props) => {
     return (_jsx(Aligner, { ...props, side: props.side || "inline", className: [s.aligner, props.className] }));

package/dist/components/MenuItem/index.d.ts

@@ -1,7 +1,7 @@
-import MenuItem from "./MenuItem";
-import MenuItemAligner from "./MenuItemAligner";
+import MenuItem from "./MenuItem.js";
+import MenuItemAligner from "./MenuItemAligner.js";
 declare const MenuItemRoot: typeof MenuItem & {
     Aligner: typeof MenuItemAligner;
 };
 export default MenuItemRoot;
-export type { Props as MenuItemProps } from "./MenuItem.types";
+export type { Props as MenuItemProps } from "./MenuItem.types.js";

package/dist/components/MenuItem/index.js

@@ -1,5 +1,5 @@
-import MenuItem from "./MenuItem";
-import MenuItemAligner from "./MenuItemAligner";
+import MenuItem from "./MenuItem.js";
+import MenuItemAligner from "./MenuItemAligner.js";
 const MenuItemRoot = MenuItem;
 MenuItemRoot.Aligner = MenuItemAligner;
 export default MenuItemRoot;

package/dist/components/MenuItem/tests/MenuItem.stories.d.ts

@@ -2,18 +2,19 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable/index.js").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation"> & {
         color?: "neutral" | "critical" | "primary";
-        icon?: import("../../Icon").IconProps["svg"];
+        icon?: import("../../Icon/index.js").IconProps["svg"];
         children: React.ReactNode;
         startSlot?: React.ReactNode;
         endSlot?: React.ReactNode;
         highlighted?: boolean;
+        focusIndicator?: import("../MenuItem.types.js").FocusIndicator;
         selected?: boolean;
-        size?: import("../../../types/global").Responsive<import("../MenuItem.types").Size>;
-        roundedCorners?: import("../../../types/global").Responsive<boolean>;
-    } & import("react").RefAttributes<import("../../Actionable").ActionableRef>> & {
-        Aligner: import("react").FC<import("../../Button").ButtonAlignerProps>;
+        size?: import("../../../types/global.js").Responsive<import("../MenuItem.types.js").Size>;
+        roundedCorners?: import("../../../types/global.js").Responsive<boolean>;
+    } & import("react").RefAttributes<import("../../Actionable/index.js").ActionableRef>> & {
+        Aligner: import("react").FC<import("../../Button/index.js").ButtonAlignerProps>;
     };
     parameters: {
         iframe: {
@@ -34,6 +35,10 @@ export declare const selected: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const focusIndicator: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
 export declare const slots: {
     name: string;
     render: () => import("react").JSX.Element;

package/dist/components/MenuItem/tests/MenuItem.stories.js

@@ -1,228 +1,242 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.alignerClassName = exports.className = exports.as = exports.disabled = exports.hrefOnClick = exports.onClick = exports.href = exports.aligner = exports.slots = exports.selected = exports.color = exports.size = void 0;
-const test_1 = require("storybook/test");
-const Badge_1 = __importDefault(require("../../../components/Badge"));
-const MenuItem_1 = __importDefault(require("../../../components/MenuItem"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Badge from "../../../components/Badge/index.js";
+import MenuItem from "../../../components/MenuItem/index.js";
+import Text from "../../../components/Text/index.js";
+import View from "../../../components/View/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/MenuItem",
-    component: MenuItem_1.default,
+    component: MenuItem,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/menu-item",
         },
     },
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small">
-				<MenuItem_1.default size="small" icon={Zap_1.default} onClick={() => { }} endSlot={<Badge_1.default size="small">12</Badge_1.default>}>
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<MenuItem size="small" icon={IconZap} onClick={() => { }} endSlot={<Badge size="small">12</Badge>}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: medium">
-				<MenuItem_1.default icon={Zap_1.default} onClick={() => { }} endSlot={<Badge_1.default size="small">12</Badge_1.default>}>
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="size: medium">
+				<MenuItem icon={IconZap} onClick={() => { }} endSlot={<Badge size="small">12</Badge>}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="size: large">
-				<MenuItem_1.default size="large" icon={Zap_1.default} onClick={() => { }} endSlot={<Badge_1.default size="medium">12</Badge_1.default>}>
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="size: large">
+				<MenuItem size="large" icon={IconZap} onClick={() => { }} endSlot={<Badge size="medium">12</Badge>}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["responsive size", "[s] small", "[m] medium", "[l+] large"]}>
-				<MenuItem_1.default size={{ s: "small", m: "medium", l: "large" }} icon={Zap_1.default} onClick={() => { }}>
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title={["responsive size", "[s] small", "[m] medium", "[l+] large"]}>
+				<MenuItem size={{ s: "small", m: "medium", l: "large" }} icon={IconZap} onClick={() => { }}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</MenuItem>
+			</Example.Item>
+		</Example>),
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: neutral">
-				<MenuItem_1.default color="neutral" icon={Zap_1.default} onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="color: neutral">
+				<MenuItem color="neutral" icon={IconZap} onClick={() => { }}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: primary">
-				<MenuItem_1.default color="primary" icon={Zap_1.default} onClick={() => { }}>
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="color: primary">
+				<MenuItem color="primary" icon={IconZap} onClick={() => { }}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: critical">
-				<MenuItem_1.default color="critical" icon={Zap_1.default} onClick={() => { }}>
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<MenuItem color="critical" icon={IconZap} onClick={() => { }}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</MenuItem>
+			</Example.Item>
+		</Example>),
 };
-exports.selected = {
+export const selected = {
     name: "selected",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="selected, color: neutral">
-				<MenuItem_1.default color="neutral" selected icon={Zap_1.default} onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="selected, color: neutral">
+				<MenuItem color="neutral" selected icon={IconZap} onClick={() => { }}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="selected, color: primary">
+				<MenuItem color="primary" selected icon={IconZap} onClick={() => { }}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="selected, color: critical">
+				<MenuItem color="critical" selected icon={IconZap} onClick={() => { }}>
+					Menu item
+				</MenuItem>
+			</Example.Item>
+		</Example>),
+};
+export const focusIndicator = {
+    name: "focusIndicator",
+    render: () => (<Example>
+			<Example.Item title="focusIndicator: outline">
+				<MenuItem icon={IconZap} onClick={() => { }}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="selected, color: primary">
-				<MenuItem_1.default color="primary" selected icon={Zap_1.default} onClick={() => { }}>
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="focusIndicator: highlight">
+				<MenuItem focusIndicator="highlight" icon={IconZap} onClick={() => { }}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="selected, color: critical">
-				<MenuItem_1.default color="critical" selected icon={Zap_1.default} onClick={() => { }}>
+				</MenuItem>
+			</Example.Item>
+			<Example.Item title="focusIndicator: highlight, color: critical">
+				<MenuItem focusIndicator="highlight" color="critical" icon={IconZap} onClick={() => { }}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</MenuItem>
+			</Example.Item>
+		</Example>),
 };
-exports.slots = {
+export const slots = {
     name: "startSlot, endSlot",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="startSlot, endSlot, selected">
-				<MenuItem_1.default startSlot={<storybook_1.Placeholder h={20}/>} endSlot={<storybook_1.Placeholder h={20}/>} selected onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="startSlot, endSlot, selected">
+				<MenuItem startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>} selected onClick={() => { }}>
 					Menu item
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</MenuItem>
+			</Example.Item>
+		</Example>),
 };
-exports.aligner = {
+export const aligner = {
     name: "aligner",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small">
-				<View_1.default gap={2}>
-					<Text_1.default variant="featured-6">Heading</Text_1.default>
-					<MenuItem_1.default.Aligner>
-						<MenuItem_1.default size="small" selected onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<View gap={2}>
+					<Text variant="featured-6">Heading</Text>
+					<MenuItem.Aligner>
+						<MenuItem size="small" selected onClick={() => { }}>
 							Menu item
-						</MenuItem_1.default>
-					</MenuItem_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
+						</MenuItem>
+					</MenuItem.Aligner>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: medium">
-				<View_1.default gap={2}>
-					<Text_1.default variant="featured-6">Heading</Text_1.default>
-					<MenuItem_1.default.Aligner>
-						<MenuItem_1.default selected onClick={() => { }}>
+			<Example.Item title="size: medium">
+				<View gap={2}>
+					<Text variant="featured-6">Heading</Text>
+					<MenuItem.Aligner>
+						<MenuItem selected onClick={() => { }}>
 							Menu item
-						</MenuItem_1.default>
-					</MenuItem_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
+						</MenuItem>
+					</MenuItem.Aligner>
+				</View>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: large">
-				<View_1.default gap={2}>
-					<Text_1.default variant="featured-6">Heading</Text_1.default>
-					<MenuItem_1.default.Aligner>
-						<MenuItem_1.default size="large" selected onClick={() => { }}>
+			<Example.Item title="size: large">
+				<View gap={2}>
+					<Text variant="featured-6">Heading</Text>
+					<MenuItem.Aligner>
+						<MenuItem size="large" selected onClick={() => { }}>
 							Menu item
-						</MenuItem_1.default>
-					</MenuItem_1.default.Aligner>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						</MenuItem>
+					</MenuItem.Aligner>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.href = {
+export const href = {
     name: "href",
-    render: () => <MenuItem_1.default href="https://reshaped.so">Trigger</MenuItem_1.default>,
+    render: () => <MenuItem href="https://reshaped.so">Trigger</MenuItem>,
     play: async ({ canvas }) => {
         const el = canvas.getByRole("link");
-        (0, test_1.expect)(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
     },
 };
-exports.onClick = {
+export const onClick = {
     name: "onClick",
     args: {
-        handleClick: (0, test_1.fn)(),
+        handleClick: fn(),
     },
-    render: (args) => <MenuItem_1.default onClick={args.handleClick}>Trigger</MenuItem_1.default>,
+    render: (args) => <MenuItem onClick={args.handleClick}>Trigger</MenuItem>,
     play: async ({ canvas, args }) => {
         const { handleClick } = args;
         const el = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(el);
-        (0, test_1.expect)(el).toHaveAttribute("type", "button");
-        (0, test_1.expect)(handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: el }));
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("type", "button");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
     },
 };
-exports.hrefOnClick = {
+export const hrefOnClick = {
     name: "href + onClick",
     args: {
-        handleClick: (0, test_1.fn)(),
+        handleClick: fn(),
     },
-    render: (args) => (<MenuItem_1.default onClick={(e) => {
+    render: (args) => (<MenuItem onClick={(e) => {
             e.preventDefault();
             args.handleClick(e);
         }} href="https://reshaped.so">
 			Trigger
-		</MenuItem_1.default>),
+		</MenuItem>),
     play: async ({ canvas, args }) => {
         const { handleClick } = args;
         const el = canvas.getByRole("link");
-        await test_1.userEvent.click(el);
-        (0, test_1.expect)(el).toHaveAttribute("href", "https://reshaped.so");
-        (0, test_1.expect)(handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: el }));
+        await userEvent.click(el);
+        expect(el).toHaveAttribute("href", "https://reshaped.so");
+        expect(handleClick).toHaveBeenCalledTimes(1);
+        expect(handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: el }));
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<MenuItem_1.default disabled onClick={() => { }}>
+    render: () => (<MenuItem disabled onClick={() => { }}>
 			Trigger
-		</MenuItem_1.default>),
+		</MenuItem>),
     play: async ({ canvas }) => {
         const el = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(el).toBeDisabled();
+        expect(el).toBeDisabled();
     },
 };
-exports.as = {
+export const as = {
     name: "as, render",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="render, disabled">
-				<MenuItem_1.default disabled onClick={() => { }} render={(props) => <section {...props}/>} attributes={{ "data-testid": "render-el" }}>
+    render: () => (<Example>
+			<Example.Item title="render, disabled">
+				<MenuItem disabled onClick={() => { }} render={(props) => <section {...props}/>} attributes={{ "data-testid": "render-el" }}>
 					Trigger
-				</MenuItem_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</MenuItem>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const renderEl = canvas.getByTestId("render-el");
-        (0, test_1.expect)(renderEl.tagName).toBe("SECTION");
-        (0, test_1.expect)(renderEl).toHaveAttribute("aria-disabled", "true");
+        expect(renderEl.tagName).toBe("SECTION");
+        expect(renderEl).toHaveAttribute("aria-disabled", "true");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<MenuItem_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<MenuItem className="test-classname" attributes={{ id: "test-id" }}>
 				Trigger
-			</MenuItem_1.default>
+			</MenuItem>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };
-exports.alignerClassName = {
+export const alignerClassName = {
     name: "aligner, className, attributes",
     render: () => (<div data-testid="root">
-			<MenuItem_1.default.Aligner className="test-classname" attributes={{ id: "test-id" }}>
-				<MenuItem_1.default>Trigger</MenuItem_1.default>
-			</MenuItem_1.default.Aligner>
+			<MenuItem.Aligner className="test-classname" attributes={{ id: "test-id" }}>
+				<MenuItem>Trigger</MenuItem>
+			</MenuItem.Aligner>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };

package/dist/components/Modal/Modal.d.ts

@@ -1,5 +1,5 @@
 import { type FC } from "react";
-import type * as T from "./Modal.types";
+import type * as T from "./Modal.types.js";
 export declare const ModalTitle: FC<T.TitleProps>;
 export declare const ModalSubtitle: FC<T.SubtitleProps>;
 declare const Modal: FC<T.Props>;