reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,179 +1,173 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testMultilineInText = exports.className = exports.fullWidth = exports.render = exports.disabled = exports.hrefOnClick = exports.onClick = exports.href = exports.icon = exports.color = exports.variant = void 0;
-const test_1 = require("storybook/test");
-const Link_1 = __importDefault(require("../../../components/Link"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Link from "../../../components/Link/index.js";
+import Text from "../../../components/Text/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/Link",
-    component: Link_1.default,
+    component: Link,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/breadcrumbs",
         },
     },
 };
-exports.variant = {
+export const variant = {
     name: "variant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="variant: underline">
-				<Link_1.default href="http://reshaped.so" attributes={{ target: "_blank" }}>
+    render: () => (<Example>
+			<Example.Item title="variant: underline">
+				<Link href="http://reshaped.so" attributes={{ target: "_blank" }}>
 					Reshaped
-				</Link_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: plain">
-				<Link_1.default onClick={() => { }} variant="plain">
+				</Link>
+			</Example.Item>
+			<Example.Item title="variant: plain">
+				<Link onClick={() => { }} variant="plain">
 					Link
-				</Link_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Link>
+			</Example.Item>
+		</Example>),
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: primary">
-				<Link_1.default color="primary" onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="color: primary">
+				<Link color="primary" onClick={() => { }}>
 					Link
-				</Link_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: critical">
-				<Link_1.default color="critical" onClick={() => { }}>
+				</Link>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Link color="critical" onClick={() => { }}>
 					Link
-				</Link_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: positive">
-				<Link_1.default color="positive" onClick={() => { }}>
+				</Link>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Link color="positive" onClick={() => { }}>
 					Link
-				</Link_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: warning">
-				<Link_1.default color="warning" onClick={() => { }}>
+				</Link>
+			</Example.Item>
+			<Example.Item title="color: warning">
+				<Link color="warning" onClick={() => { }}>
 					Link
-				</Link_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: inherit">
-				<Link_1.default color="inherit" onClick={() => { }}>
+				</Link>
+			</Example.Item>
+			<Example.Item title="color: inherit">
+				<Link color="inherit" onClick={() => { }}>
 					Link
-				</Link_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Link>
+			</Example.Item>
+		</Example>),
 };
-exports.icon = {
+export const icon = {
     name: "icon",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="icon, variant: underline">
-				<Link_1.default icon={Zap_1.default} onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="icon, variant: underline">
+				<Link icon={IconZap} onClick={() => { }}>
 					Link
-				</Link_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="icon, variant: plain">
-				<Link_1.default icon={Zap_1.default} variant="plain" onClick={() => { }}>
+				</Link>
+			</Example.Item>
+			<Example.Item title="icon, variant: plain">
+				<Link icon={IconZap} variant="plain" onClick={() => { }}>
 					Link
-				</Link_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title={["icon, variant: underline", "should inherit display-1 size from the parent"]}>
-				<Text_1.default variant="featured-3">
-					<Link_1.default icon={Zap_1.default} variant="underline" onClick={() => { }}>
+				</Link>
+			</Example.Item>
+			<Example.Item title={["icon, variant: underline", "should inherit display-1 size from the parent"]}>
+				<Text variant="featured-3">
+					<Link icon={IconZap} variant="underline" onClick={() => { }}>
 						Instant delivery
-					</Link_1.default>
-				</Text_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Link>
+				</Text>
+			</Example.Item>
+		</Example>),
 };
-exports.href = {
+export const href = {
     name: "href",
-    render: () => <Link_1.default href="https://reshaped.so">Trigger</Link_1.default>,
+    render: () => <Link href="https://reshaped.so">Trigger</Link>,
     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) => <Link_1.default onClick={args.handleClick}>Trigger</Link_1.default>,
+    render: (args) => <Link onClick={args.handleClick}>Trigger</Link>,
     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) => (<Link_1.default onClick={(e) => {
+    render: (args) => (<Link onClick={(e) => {
             e.preventDefault();
             args.handleClick(e);
         }} href="https://reshaped.so">
 			Trigger
-		</Link_1.default>),
+		</Link>),
     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: () => (<Link_1.default disabled onClick={() => { }}>
+    render: () => (<Link disabled onClick={() => { }}>
 			Trigger
-		</Link_1.default>),
+		</Link>),
     play: async ({ canvas }) => {
         const el = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(el).toBeDisabled();
+        expect(el).toBeDisabled();
     },
 };
-exports.render = {
+export const render = {
     name: "render",
-    render: () => <Link_1.default render={(props) => <section {...props}/>}>Trigger</Link_1.default>,
+    render: () => <Link render={(props) => <section {...props}/>}>Trigger</Link>,
     play: async ({ canvas }) => {
         const el = canvas.getByText("Trigger");
-        (0, test_1.expect)(el).toBeInTheDocument();
-        (0, test_1.expect)(el.tagName).toBe("SECTION");
+        expect(el).toBeInTheDocument();
+        expect(el.tagName).toBe("SECTION");
     },
 };
-exports.fullWidth = {
+export const fullWidth = {
     name: "fullWidth",
-    render: () => (<Link_1.default fullWidth onClick={() => { }}>
+    render: () => (<Link fullWidth onClick={() => { }}>
 			Trigger
-		</Link_1.default>),
+		</Link>),
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Link_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<Link className="test-classname" attributes={{ id: "test-id" }}>
 				Trigger
-			</Link_1.default>
+			</Link>
 		</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.testMultilineInText = {
+export const testMultilineInText = {
     name: "test: multiline",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="should wrap inside the text">
+    render: () => (<Example>
+			<Example.Item title="should wrap inside the text">
 				<div>
 					Someone asked me to write this text that is boring to ready for everyone and to add&nbsp;
-					<Link_1.default href="/">this very very long link</Link_1.default> to it.
+					<Link href="/">this very very long link</Link> to it.
 				</div>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };

package/dist/components/Loader/Loader.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./Loader.types";
+import type * as T from "./Loader.types.js";
 declare const Loader: React.FC<T.Props>;
 export default Loader;

package/dist/components/Loader/Loader.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import { responsiveClassNames } from "../../utilities/props";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Loader.module.css";
 const Loader = (props) => {
     const { size = "small", color = "primary", className, attributes } = props;

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

@@ -1,6 +1,6 @@
 import type { ClassName } from "@reshaped/utilities";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Component size */
     size?: G.Responsive<"small" | "medium" | "large">;

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

@@ -1,2 +1,2 @@
-export { default } from "./Loader";
-export type { Props as LoaderProps } from "./Loader.types";
+export { default } from "./Loader.js";
+export type { Props as LoaderProps } from "./Loader.types.js";

package/dist/components/Loader/index.js

@@ -1 +1 @@
-export { default } from "./Loader";
+export { default } from "./Loader.js";

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

@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/Loader").LoaderProps>;
+    component: import("react").FC<import("../../../components/Loader/index.js").LoaderProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -1,74 +1,68 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.className = exports.ariaLabel = exports.color = exports.size = void 0;
-const test_1 = require("storybook/test");
-const Loader_1 = __importDefault(require("../../../components/Loader"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect } from "storybook/test";
+import Loader from "../../../components/Loader/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Loader",
-    component: Loader_1.default,
+    component: Loader,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/loader",
         },
     },
 };
-exports.size = {
+export const size = {
     name: "size",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="size: small">
-					<Loader_1.default size="small" ariaLabel="Loading"/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="size: medium">
-					<Loader_1.default size="medium" ariaLabel="Loading"/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="size: large">
-					<Loader_1.default size="large" ariaLabel="Loading"/>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
-					<Loader_1.default size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+        return (<Example>
+				<Example.Item title="size: small">
+					<Loader size="small" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title="size: medium">
+					<Loader size="medium" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title="size: large">
+					<Loader size="large" ariaLabel="Loading"/>
+				</Example.Item>
+				<Example.Item title={["responsive size", "[s] small", "[m+] medium"]}>
+					<Loader size={{ s: "small", m: "medium" }} ariaLabel="Loading"/>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: primary">
-				<Loader_1.default ariaLabel="Loading"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: critical">
-				<Loader_1.default color="critical" ariaLabel="Loading"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: positive">
-				<Loader_1.default color="positive" ariaLabel="Loading"/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="color: inherit">
-				<Loader_1.default color="inherit" ariaLabel="Loading"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="color: primary">
+				<Loader ariaLabel="Loading"/>
+			</Example.Item>
+			<Example.Item title="color: critical">
+				<Loader color="critical" ariaLabel="Loading"/>
+			</Example.Item>
+			<Example.Item title="color: positive">
+				<Loader color="positive" ariaLabel="Loading"/>
+			</Example.Item>
+			<Example.Item title="color: inherit">
+				<Loader color="inherit" ariaLabel="Loading"/>
+			</Example.Item>
+		</Example>),
 };
-exports.ariaLabel = {
+export const ariaLabel = {
     name: "ariaLabel",
-    render: () => <Loader_1.default ariaLabel="Loading" attributes={{ "data-testid": "root" }}/>,
+    render: () => <Loader ariaLabel="Loading" attributes={{ "data-testid": "root" }}/>,
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root");
-        (0, test_1.expect)(root).toHaveAttribute("aria-live", "assertive");
-        (0, test_1.expect)(root).toHaveAttribute("aria-label", "Loading");
+        expect(root).toHaveAttribute("aria-live", "assertive");
+        expect(root).toHaveAttribute("aria-label", "Loading");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Loader_1.default className="test-classname" attributes={{ id: "test-id" }} ariaLabel="Loading"/>
+			<Loader className="test-classname" attributes={{ id: "test-id" }} ariaLabel="Loading"/>
 		</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/LoaderText/LoaderText.d.ts

@@ -1,3 +1,3 @@
-import type * as T from "./LoaderText.types";
+import type * as T from "./LoaderText.types.js";
 declare const LoaderText: React.FC<T.Props>;
 export default LoaderText;

package/dist/components/LoaderText/LoaderText.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Text from "../../components/Text";
-import Icon from "../Icon";
+import Text from "../../components/Text/index.js";
+import Icon from "../Icon/index.js";
 import s from "./LoaderText.module.css";
 const LoaderText = (props) => {
     const { children, completedText, icon, completed = false, className, ...textProps } = props;

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

@@ -1,5 +1,5 @@
-import type { TextProps } from "../../components/Text";
-import type { IconProps } from "../Icon";
+import type { TextProps } from "../../components/Text/index.js";
+import type { IconProps } from "../Icon/index.js";
 export type Props = Pick<TextProps, "children" | "className" | "attributes" | "variant" | "weight"> & {
     /** SVG component for the icon */
     icon?: IconProps["svg"];

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

@@ -1,2 +1,2 @@
-export { default } from "./LoaderText";
-export type { Props as LoaderTextProps } from "./LoaderText.types";
+export { default } from "./LoaderText.js";
+export type { Props as LoaderTextProps } from "./LoaderText.types.js";

package/dist/components/LoaderText/index.js

@@ -1 +1 @@
-export { default } from "./LoaderText";
+export { default } from "./LoaderText.js";

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

@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/LoaderText").LoaderTextProps>;
+    component: import("react").FC<import("../../../components/LoaderText/index.js").LoaderTextProps>;
 };
 export default _default;
 export declare const base: {

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

@@ -1,60 +1,54 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.className = exports.completed = exports.base = void 0;
-const test_1 = require("storybook/test");
-const Actionable_1 = __importDefault(require("../../../components/Actionable"));
-const LoaderText_1 = __importDefault(require("../../../components/LoaderText"));
-const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
-const storybook_1 = require("../../../utilities/storybook");
-const Mic_1 = __importDefault(require("../../../icons/Mic"));
-exports.default = {
+import { expect } from "storybook/test";
+import Actionable from "../../../components/Actionable/index.js";
+import LoaderText from "../../../components/LoaderText/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconMicrophone from "../../../icons/Mic.js";
+export default {
     title: "Components/LoaderText",
-    component: LoaderText_1.default,
+    component: LoaderText,
 };
-exports.base = {
+export const base = {
     name: "icon, completed",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="text only">
-					<LoaderText_1.default>Inspecting code</LoaderText_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="with icon">
-					<LoaderText_1.default icon={Mic_1.default}>Recording audio</LoaderText_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+        return (<Example>
+				<Example.Item title="text only">
+					<LoaderText>Inspecting code</LoaderText>
+				</Example.Item>
+				<Example.Item title="with icon">
+					<LoaderText icon={IconMicrophone}>Recording audio</LoaderText>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.completed = {
+export const completed = {
     name: "completed, completedText",
     render: () => {
-        const completedToggle = (0, useToggle_1.default)();
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="completed">
-					<LoaderText_1.default completed>Inspected 5 files</LoaderText_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="completed toggle">
-					<Actionable_1.default onClick={completedToggle.toggle}>
-						<LoaderText_1.default completed={completedToggle.active} completedText="Recorded audio" icon={Mic_1.default}>
+        const completedToggle = useToggle();
+        return (<Example>
+				<Example.Item title="completed">
+					<LoaderText completed>Inspected 5 files</LoaderText>
+				</Example.Item>
+				<Example.Item title="completed toggle">
+					<Actionable onClick={completedToggle.toggle}>
+						<LoaderText completed={completedToggle.active} completedText="Recorded audio" icon={IconMicrophone}>
 							Recording audio
-						</LoaderText_1.default>
-					</Actionable_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						</LoaderText>
+					</Actionable>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<LoaderText_1.default className="test-classname" attributes={{ id: "test-id" }}>
+			<LoaderText className="test-classname" attributes={{ id: "test-id" }}>
 				Loading
-			</LoaderText_1.default>
+			</LoaderText>
 		</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/MenuItem/MenuItem.d.ts

@@ -1,14 +1,15 @@
-import { type ActionableRef } from "../../components/Actionable";
-import type * as T from "./MenuItem.types";
-declare const MenuItem: import("react").ForwardRefExoticComponent<Pick<import("../../components/Actionable").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation"> & {
+import { type ActionableRef } from "../../components/Actionable/index.js";
+import type * as T from "./MenuItem.types.js";
+declare const MenuItem: import("react").ForwardRefExoticComponent<Pick<import("../../components/Actionable/index.js").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation"> & {
     color?: "neutral" | "critical" | "primary";
-    icon?: import("../../components/Icon").IconProps["svg"];
+    icon?: import("../../components/Icon/index.js").IconProps["svg"];
     children: React.ReactNode;
     startSlot?: React.ReactNode;
     endSlot?: React.ReactNode;
     highlighted?: boolean;
+    focusIndicator?: T.FocusIndicator;
     selected?: boolean;
-    size?: import("../..").Responsive<T.Size>;
-    roundedCorners?: import("../..").Responsive<boolean>;
+    size?: import("../../index.js").Responsive<T.Size>;
+    roundedCorners?: import("../../index.js").Responsive<boolean>;
 } & import("react").RefAttributes<ActionableRef>>;
 export default MenuItem;