reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,96 +1,190 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.menu = exports.triggerRef = exports.handlers = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const ContextMenu_1 = __importDefault(require("../../../components/ContextMenu"));
-const View_1 = __importDefault(require("../../../components/View"));
-const helpers_1 = require("../../../utilities/helpers");
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import ContextMenu from "../../../components/ContextMenu/index.js";
+import Popover from "../../../components/Popover/index.js";
+import View from "../../../components/View/index.js";
+import { sleep } from "../../../utilities/helpers.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/ContextMenu",
-    component: ContextMenu_1.default,
+    component: ContextMenu,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/context-menu",
         },
     },
 };
-exports.base = {
+export const base = {
     name: "base",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="base">
+    render: () => (<Example>
+			<Example.Item title="base">
 				<div style={{ height: 200, overflow: "auto" }}>
-					<ContextMenu_1.default>
-						<View_1.default height="400px" backgroundColor="neutral-faded" borderRadius="medium"/>
+					<ContextMenu>
+						<View height="400px" backgroundColor="neutral-faded" borderRadius="medium"/>
 
-						<ContextMenu_1.default.Content>
-							<ContextMenu_1.default.Item>Item 1</ContextMenu_1.default.Item>
-							<ContextMenu_1.default.Item>Item 2</ContextMenu_1.default.Item>
-						</ContextMenu_1.default.Content>
-					</ContextMenu_1.default>
+						<ContextMenu.Content>
+							<ContextMenu.Item>Item 1</ContextMenu.Item>
+							<ContextMenu.Item>Item 2</ContextMenu.Item>
+						</ContextMenu.Content>
+					</ContextMenu>
 				</div>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.handlers = {
+export const handlers = {
     name: "handleOpen, handleClose",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
     render: (args) => (<div style={{ height: 200, overflow: "auto" }} data-testid="scroll">
-			<ContextMenu_1.default onOpen={args.handleOpen} onClose={args.handleClose}>
-				<View_1.default height="400px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "root" }}/>
+			<ContextMenu onOpen={args.handleOpen} onClose={args.handleClose}>
+				<View height="400px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "root" }}/>
 
-				<ContextMenu_1.default.Content>
-					<ContextMenu_1.default.Item>Item</ContextMenu_1.default.Item>
-				</ContextMenu_1.default.Content>
-			</ContextMenu_1.default>
+				<ContextMenu.Content>
+					<ContextMenu.Item>Item</ContextMenu.Item>
+				</ContextMenu.Content>
+			</ContextMenu>
 		</div>),
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const root = canvas.getByTestId("root");
         const scroll = canvas.getByTestId("scroll");
-        await test_1.userEvent.pointer({ keys: "[MouseRight>]", target: root });
-        (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleOpen).toHaveBeenCalledWith();
+        await userEvent.pointer({ keys: "[MouseRight>]", target: root });
+        expect(args.handleOpen).toHaveBeenCalledTimes(1);
+        expect(args.handleOpen).toHaveBeenCalledWith({
+            event: expect.objectContaining({ type: "contextmenu", target: root }),
+        });
         const item = canvas.getByText("Item");
-        (0, test_1.expect)(item).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
         // Context menu locks the scroll of the closest scrollable parent
-        (0, test_1.expect)(scroll).toHaveStyle("overflow: hidden");
+        expect(scroll).toHaveStyle("overflow: hidden");
         // Wait for the open animation to finish
-        await (0, helpers_1.sleep)(500);
-        await test_1.userEvent.click(root);
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(item).not.toBeInTheDocument();
-            (0, test_1.expect)(scroll).not.toHaveStyle("overflow: hidden");
+        await sleep(500);
+        await userEvent.click(root);
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+        await waitFor(() => {
+            expect(item).not.toBeInTheDocument();
+            expect(scroll).not.toHaveStyle("overflow: hidden");
         }, {
             timeout: 1000,
         });
     },
 };
-exports.triggerRef = {
+export const triggerRef = {
     name: "triggerRef",
     render: () => {
-        const triggerRef = react_1.default.useRef(null);
+        const triggerRef = React.useRef(null);
         return (<>
-				<View_1.default height="200px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ ref: triggerRef }}/>
+				<View height="200px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ ref: triggerRef }}/>
 
-				<ContextMenu_1.default triggerRef={triggerRef}>
-					<ContextMenu_1.default.Content>
-						<ContextMenu_1.default.Item onClick={() => { }}>Item</ContextMenu_1.default.Item>
-						<ContextMenu_1.default.Item onClick={() => { }}>Item</ContextMenu_1.default.Item>
-					</ContextMenu_1.default.Content>
-				</ContextMenu_1.default>
+				<ContextMenu triggerRef={triggerRef}>
+					<ContextMenu.Content>
+						<ContextMenu.Item onClick={() => { }}>Item</ContextMenu.Item>
+						<ContextMenu.Item onClick={() => { }}>Item</ContextMenu.Item>
+					</ContextMenu.Content>
+				</ContextMenu>
 			</>);
     },
 };
+export const sameMenuRightClick = {
+    name: "test: right click on the same context menu",
+    args: {
+        handleOpen: fn(),
+        handleClose: fn(),
+    },
+    render: (args) => {
+        const triggerRef = React.useRef(null);
+        return (<View gap={4}>
+				<ContextMenu onOpen={args.handleOpen} onClose={args.handleClose}>
+					<View height="60px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "children" }}/>
+
+					<ContextMenu.Content>
+						<ContextMenu.Item>Children item</ContextMenu.Item>
+					</ContextMenu.Content>
+				</ContextMenu>
+
+				<View height="60px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ ref: triggerRef, "data-testid": "trigger-ref" }}/>
+
+				<ContextMenu triggerRef={triggerRef} onOpen={args.handleOpen} onClose={args.handleClose}>
+					<ContextMenu.Content>
+						<ContextMenu.Item>Trigger ref item</ContextMenu.Item>
+					</ContextMenu.Content>
+				</ContextMenu>
+			</View>);
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        for (const [testId, text] of [
+            ["children", "Children item"],
+            ["trigger-ref", "Trigger ref item"],
+        ]) {
+            const trigger = canvas.getByTestId(testId);
+            args.handleOpen.mockClear();
+            args.handleClose.mockClear();
+            const { left, top } = trigger.getBoundingClientRect();
+            await userEvent.pointer({
+                keys: "[MouseRight]",
+                target: trigger,
+                coords: { clientX: left + 10, clientY: top + 10 },
+            });
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            const menu = canvas.getByRole("menu");
+            const initialLeft = menu.getBoundingClientRect().left;
+            // Wait for the open animation to finish
+            await sleep(500);
+            await userEvent.pointer({
+                keys: "[MouseRight]",
+                target: trigger,
+                coords: { clientX: left + 210, clientY: top + 10 },
+            });
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+            expect(args.handleOpen).toHaveBeenCalledTimes(2);
+            await sleep(500);
+            expect(canvas.getByText(text)).toBeInTheDocument();
+            expect(canvas.getByRole("menu").getBoundingClientRect().left).toBe(initialLeft + 200);
+            await userEvent.click(trigger);
+            expect(args.handleClose).toHaveBeenCalledTimes(2);
+            await waitFor(() => {
+                expect(canvas.queryByText(text)).not.toBeInTheDocument();
+            }, {
+                timeout: 1000,
+            });
+        }
+    },
+};
+export const insideFlyoutRightClick = {
+    name: "test: right click inside another flyout",
+    args: {
+        handlePopoverClose: fn(),
+    },
+    render: (args) => (<Popover onClose={args.handlePopoverClose}>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open popover</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<ContextMenu>
+					<View width="200px" height="60px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ "data-testid": "popover-area" }}/>
+
+					<ContextMenu.Content>
+						<ContextMenu.Item>Context menu item</ContextMenu.Item>
+					</ContextMenu.Content>
+				</ContextMenu>
+			</Popover.Content>
+		</Popover>),
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement.ownerDocument.body);
+        await userEvent.click(canvas.getByText("Open popover"));
+        await sleep(500);
+        await userEvent.pointer({ keys: "[MouseRight]", target: canvas.getByTestId("popover-area") });
+        expect(canvas.getByText("Context menu item")).toBeInTheDocument();
+        expect(canvas.getByTestId("popover-area")).toBeInTheDocument();
+        expect(args.handlePopoverClose).not.toHaveBeenCalled();
+    },
+};
 const menuData = [
     { label: "Action 1" },
     { label: "Action 2" },
@@ -178,22 +272,22 @@ const menuData = [
 const renderMenuItems = (items) => {
     return items.map((item, idx) => {
         if (item.children) {
-            return (<ContextMenu_1.default.SubMenu key={idx} fallbackAdjustLayout>
-					<ContextMenu_1.default.SubTrigger>{item.label}</ContextMenu_1.default.SubTrigger>
-					<ContextMenu_1.default.Content>{renderMenuItems(item.children)}</ContextMenu_1.default.Content>
-				</ContextMenu_1.default.SubMenu>);
+            return (<ContextMenu.SubMenu key={idx} fallbackAdjustLayout>
+					<ContextMenu.SubTrigger>{item.label}</ContextMenu.SubTrigger>
+					<ContextMenu.Content>{renderMenuItems(item.children)}</ContextMenu.Content>
+				</ContextMenu.SubMenu>);
         }
-        return <ContextMenu_1.default.Item key={idx}>{item.label}</ContextMenu_1.default.Item>;
+        return <ContextMenu.Item key={idx}>{item.label}</ContextMenu.Item>;
     });
 };
-exports.menu = {
+export const menu = {
     name: "test: nested menu items",
-    render: () => (<View_1.default padding={4}>
-			<ContextMenu_1.default fallbackAdjustLayout>
-				<View_1.default height={50} width={50} backgroundColor="neutral-faded" borderRadius="medium" justify="center" align="center">
+    render: () => (<View padding={4}>
+			<ContextMenu fallbackAdjustLayout>
+				<View height={50} width={50} backgroundColor="neutral-faded" borderRadius="medium" justify="center" align="center">
 					Right Click Here
-				</View_1.default>
-				<ContextMenu_1.default.Content>{renderMenuItems(menuData)}</ContextMenu_1.default.Content>
-			</ContextMenu_1.default>
-		</View_1.default>),
+				</View>
+				<ContextMenu.Content>{renderMenuItems(menuData)}</ContextMenu.Content>
+			</ContextMenu>
+		</View>),
 };

package/dist/components/Dismissible/Dismissible.d.ts

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

package/dist/components/Dismissible/Dismissible.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Button from "../../components/Button";
-import IconClose from "../../icons/Close";
+import Button from "../../components/Button/index.js";
+import IconClose from "../../icons/Close.js";
 import s from "./Dismissible.module.css";
 const Dismissible = (props) => {
     const { children, align, onClose, hideCloseButton, variant, closeAriaLabel, className, attributes, } = props;

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../types/global";
+import type { Attributes } from "../../types/global.js";
 type WithClose = {
     /** Hide the close button */
     hideCloseButton: true;

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

@@ -1,2 +1,2 @@
-export { default } from "./Dismissible";
-export type { CloseProps as DismissibleCloseProps, Props as DismissibleProps, } from "./Dismissible.types";
+export { default } from "./Dismissible.js";
+export type { CloseProps as DismissibleCloseProps, Props as DismissibleProps, } from "./Dismissible.types.js";

package/dist/components/Dismissible/index.js

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

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

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    components: import("react").FC<import("../../../components/Dismissible").DismissibleProps>;
+    components: import("react").FC<import("../../../components/Dismissible/index.js").DismissibleProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -1,99 +1,93 @@
-"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.closeAriaLabel = exports.hideCloseButton = exports.align = exports.variant = void 0;
-const test_1 = require("storybook/test");
-const Dismissible_1 = __importDefault(require("../../../components/Dismissible"));
-const Image_1 = __importDefault(require("../../../components/Image"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect, fn, userEvent, within } from "storybook/test";
+import Dismissible from "../../../components/Dismissible/index.js";
+import Image from "../../../components/Image/index.js";
+import View from "../../../components/View/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Dismissible",
-    components: Dismissible_1.default,
+    components: Dismissible,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/dismissible",
         },
     },
 };
-exports.variant = {
+export const variant = {
     name: "variant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="variant: default">
-				<Dismissible_1.default closeAriaLabel="Close banner" onClose={() => { }}>
-					<storybook_1.Placeholder />
-				</Dismissible_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="variant: media">
-				<View_1.default width="300px">
-					<Dismissible_1.default variant="media" closeAriaLabel="Close banner" onClose={() => { }}>
-						<Image_1.default aspectRatio={16 / 9} height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
-					</Dismissible_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="variant: default">
+				<Dismissible closeAriaLabel="Close banner" onClose={() => { }}>
+					<Placeholder />
+				</Dismissible>
+			</Example.Item>
+			<Example.Item title="variant: media">
+				<View width="300px">
+					<Dismissible variant="media" closeAriaLabel="Close banner" onClose={() => { }}>
+						<Image aspectRatio={16 / 9} height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
+					</Dismissible>
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.align = {
+export const align = {
     name: "align",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="align: center">
-				<Dismissible_1.default align="center" closeAriaLabel="Close" onClose={() => { }}>
-					<storybook_1.Placeholder />
-				</Dismissible_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="align: center">
+				<Dismissible align="center" closeAriaLabel="Close" onClose={() => { }}>
+					<Placeholder />
+				</Dismissible>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="align: center, variant: media">
-				<Dismissible_1.default align="center" closeAriaLabel="Close" variant="media" onClose={() => { }}>
-					<Image_1.default aspectRatio={16 / 9} height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
-				</Dismissible_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="align: center, variant: media">
+				<Dismissible align="center" closeAriaLabel="Close" variant="media" onClose={() => { }}>
+					<Image aspectRatio={16 / 9} height="100%" src="https://images.unsplash.com/photo-1607030529528-ca6923e27f77?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=1867&q=80)"/>
+				</Dismissible>
+			</Example.Item>
+		</Example>),
 };
-exports.hideCloseButton = {
+export const hideCloseButton = {
     name: "hideCloseButton",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="hide close button">
+    render: () => (<Example>
+			<Example.Item title="hide close button">
 				<div id="root">
-					<Dismissible_1.default hideCloseButton>
-						<storybook_1.Placeholder />
-					</Dismissible_1.default>
+					<Dismissible hideCloseButton>
+						<Placeholder />
+					</Dismissible>
 				</div>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
     play: ({ canvasElement }) => {
-        const root = (0, test_1.within)(canvasElement.querySelector("#root"));
+        const root = within(canvasElement.querySelector("#root"));
         const button = root.queryByRole("button");
-        (0, test_1.expect)(button).not.toBeInTheDocument();
+        expect(button).not.toBeInTheDocument();
     },
 };
-exports.closeAriaLabel = {
+export const closeAriaLabel = {
     args: {
-        handleClose: (0, test_1.fn)(),
+        handleClose: fn(),
     },
     name: "onClose, closeAriaLabel",
-    render: (args) => (<Dismissible_1.default closeAriaLabel="Close" onClose={args.handleClose}>
-			<storybook_1.Placeholder />
-		</Dismissible_1.default>),
+    render: (args) => (<Dismissible closeAriaLabel="Close" onClose={args.handleClose}>
+			<Placeholder />
+		</Dismissible>),
     play: async ({ canvas, args }) => {
         const button = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(button).toHaveAttribute("aria-label", "Close");
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith();
+        await userEvent.click(button);
+        expect(button).toHaveAttribute("aria-label", "Close");
+        expect(args.handleClose).toHaveBeenCalledTimes(1);
+        expect(args.handleClose).toHaveBeenCalledWith();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Dismissible_1.default closeAriaLabel="Close" onClose={() => { }} className="test-classname" attributes={{ id: "test-id" }}>
-				<storybook_1.Placeholder />
-			</Dismissible_1.default>
+			<Dismissible closeAriaLabel="Close" onClose={() => { }} className="test-classname" attributes={{ id: "test-id" }}>
+				<Placeholder />
+			</Dismissible>
 		</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/Divider/Divider.d.ts

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

package/dist/components/Divider/Divider.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Text from "../../components/Text";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import Text from "../../components/Text/index.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Divider.module.css";
 const Divider = (props) => {
     const { vertical, blank, children, contentPosition = "center", color, inset, className, attributes, } = props;

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

@@ -1,7 +1,7 @@
 import type React from "react";
 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 = {
     /** Change component to take no space, useful for using it as a border in components like Tabs */
     blank?: boolean;

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

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

package/dist/components/Divider/index.js

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

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

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