reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,22 +1,16 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testContentEditable = exports.testWithTooltip = exports.testNested = exports.className = exports.autoFocus = exports.dismissible = exports.handlers = exports.activeFalse = exports.active = exports.defaultActive = exports.elevation = exports.padding = exports.widthFull = exports.widthNumber = exports.position = void 0;
-const react_1 = require("react");
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const MenuItem_1 = __importDefault(require("../../../components/MenuItem"));
-const Popover_1 = __importDefault(require("../../../components/Popover"));
-const ScrollArea_1 = __importDefault(require("../../../components/ScrollArea"));
-const Tooltip_1 = __importDefault(require("../../../components/Tooltip"));
-const View_1 = __importDefault(require("../../../components/View"));
-const helpers_1 = require("../../../utilities/helpers");
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { useId, useState } from "react";
+import { expect, fn, userEvent, waitFor, within } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import MenuItem from "../../../components/MenuItem/index.js";
+import Popover from "../../../components/Popover/index.js";
+import ScrollArea from "../../../components/ScrollArea/index.js";
+import Tooltip from "../../../components/Tooltip/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/Popover",
-    component: Popover_1.default,
+    component: Popover,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/popover",
@@ -25,328 +19,328 @@ exports.default = {
 };
 const Demo = (props) => {
     const { position, ...rest } = props;
-    const id = (0, react_1.useId)();
-    return (<Popover_1.default position={position} {...rest}>
-			<Popover_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>{position || "Open"}</Button_1.default>}
-			</Popover_1.default.Trigger>
-			<Popover_1.default.Content attributes={{ "aria-labelledby": id }}>
-				<View_1.default gap={2} align="start">
+    const id = useId();
+    return (<Popover position={position} {...rest}>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>{position || "Open"}</Button>}
+			</Popover.Trigger>
+			<Popover.Content attributes={{ "aria-labelledby": id }}>
+				<View gap={2} align="start">
 					<span id={id}>Popover content</span>
-					<View_1.default direction="row" gap={2}>
-						<Button_1.default onClick={() => { }}>Action 1</Button_1.default>
-						<Button_1.default onClick={() => { }}>Action 2</Button_1.default>
-					</View_1.default>
-				</View_1.default>
-			</Popover_1.default.Content>
-		</Popover_1.default>);
+					<View direction="row" gap={2}>
+						<Button onClick={() => { }}>Action 1</Button>
+						<Button onClick={() => { }}>Action 2</Button>
+					</View>
+				</View>
+			</Popover.Content>
+		</Popover>);
 };
-exports.position = {
+export const position = {
     name: "position",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="position: bottom">
-				<View_1.default align="center" justify="center" gap={8} direction="row">
+    render: () => (<Example>
+			<Example.Item title="position: bottom">
+				<View align="center" justify="center" gap={8} direction="row">
 					<Demo position="bottom-start"/>
 					<Demo position="bottom"/>
 					<Demo position="bottom-end"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: top">
-				<View_1.default align="center" justify="center" gap={8} direction="row">
+				</View>
+			</Example.Item>
+			<Example.Item title="position: top">
+				<View align="center" justify="center" gap={8} direction="row">
 					<Demo position="top-start"/>
 					<Demo position="top"/>
 					<Demo position="top-end"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: start">
-				<View_1.default align="center" justify="center" gap={8} direction="row">
+				</View>
+			</Example.Item>
+			<Example.Item title="position: start">
+				<View align="center" justify="center" gap={8} direction="row">
 					<Demo position="start-top"/>
 					<Demo position="start"/>
 					<Demo position="start-bottom"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="position: end">
-				<View_1.default align="center" justify="center" gap={8} direction="row">
+				</View>
+			</Example.Item>
+			<Example.Item title="position: end">
+				<View align="center" justify="center" gap={8} direction="row">
 					<Demo position="end-top"/>
 					<Demo position="end"/>
 					<Demo position="end-bottom" defaultActive/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</View>
+			</Example.Item>
+		</Example>),
 };
-exports.widthNumber = {
+export const widthNumber = {
     name: "width: px",
     render: () => <Demo width="400px" defaultActive/>,
 };
-exports.widthFull = {
+export const widthFull = {
     name: "width: 100%",
     render: () => <Demo width="100%" defaultActive/>,
 };
-exports.padding = {
+export const padding = {
     name: "padding",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="padding: 0">
+    render: () => (<Example>
+			<Example.Item title="padding: 0">
 				<Demo padding={0}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="padding: 6">
+			</Example.Item>
+			<Example.Item title="padding: 6">
 				<Demo padding={6} defaultActive/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.elevation = {
+export const elevation = {
     name: "elevation",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="elevation: raised">
+    render: () => (<Example>
+			<Example.Item title="elevation: raised">
 				<Demo elevation="raised" defaultActive/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
 };
-exports.defaultActive = {
+export const defaultActive = {
     name: "defaultActive, uncontrolled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
-    render: (args) => (<Popover_1.default onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
-			<Popover_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-			</Popover_1.default.Trigger>
-			<Popover_1.default.Content>Content</Popover_1.default.Content>
-		</Popover_1.default>),
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
         let item = canvas.getByText("Content");
         // Wait for the open animation
-        await (0, helpers_1.sleep)(500);
-        await test_1.userEvent.click(document.body);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
-            (0, test_1.expect)(item).not.toBeInTheDocument();
+        await sleep(500);
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+            expect(item).not.toBeInTheDocument();
         });
-        await test_1.userEvent.click(trigger);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledWith();
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
         });
         item = canvas.getByText("Content");
-        (0, test_1.expect)(item).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
     },
 };
-exports.active = {
+export const active = {
     name: "active, controlled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
-    render: (args) => (<Popover_1.default onOpen={args.handleOpen} onClose={args.handleClose} active>
-			<Popover_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-			</Popover_1.default.Trigger>
-			<Popover_1.default.Content>Content</Popover_1.default.Content>
-		</Popover_1.default>),
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const item = canvas.getByText("Content");
-        await test_1.userEvent.click(document.body);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
+        await userEvent.click(document.body);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "outside-click" });
         });
-        (0, test_1.expect)(item).toBeInTheDocument();
+        expect(item).toBeInTheDocument();
     },
 };
-exports.activeFalse = {
+export const activeFalse = {
     name: "active false, controlled",
     args: {
-        handleOpen: (0, test_1.fn)(),
-        handleClose: (0, test_1.fn)(),
+        handleOpen: fn(),
+        handleClose: fn(),
     },
-    render: (args) => (<Popover_1.default onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
-			<Popover_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-			</Popover_1.default.Trigger>
-			<Popover_1.default.Content>Content</Popover_1.default.Content>
-		</Popover_1.default>),
+    render: (args) => (<Popover onOpen={args.handleOpen} onClose={args.handleClose} active={false}>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>Content</Popover.Content>
+		</Popover>),
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleOpen).toHaveBeenCalledWith();
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(args.handleOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleOpen).toHaveBeenCalledWith();
         });
         const item = canvas.queryByText("Content");
-        (0, test_1.expect)(item).not.toBeInTheDocument();
+        expect(item).not.toBeInTheDocument();
     },
 };
-exports.handlers = {
+export const handlers = {
     name: "onAfterOpen, onAfterClose",
     args: {
-        handleClose: (0, test_1.fn)(),
-        handleAfterOpen: (0, test_1.fn)(),
-        handleAfterClose: (0, test_1.fn)(),
+        handleClose: fn(),
+        handleAfterOpen: fn(),
+        handleAfterClose: fn(),
     },
     render: (args) => {
-        const [active, setActive] = (0, react_1.useState)(false);
-        return (<Popover_1.default active={active} onOpen={() => setActive(true)} onClose={(closeArgs) => {
+        const [active, setActive] = useState(false);
+        return (<Popover active={active} onOpen={() => setActive(true)} onClose={(closeArgs) => {
                 setActive(false);
                 args.handleClose(closeArgs);
             }} onAfterOpen={args.handleAfterOpen} onAfterClose={args.handleAfterClose}>
-				<Popover_1.default.Trigger>
-					{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-				</Popover_1.default.Trigger>
-				<Popover_1.default.Content>Content</Popover_1.default.Content>
-			</Popover_1.default>);
+				<Popover.Trigger>
+					{(attributes) => <Button attributes={attributes}>Open</Button>}
+				</Popover.Trigger>
+				<Popover.Content>Content</Popover.Content>
+			</Popover>);
     },
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
         // Wait for the color mode initialization to re-enable transitions globally
-        await (0, helpers_1.sleep)(100);
-        await test_1.userEvent.click(trigger);
+        await sleep(100);
+        await userEvent.click(trigger);
         // Wait for the open transition
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleAfterOpen).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleAfterOpen).toHaveBeenCalledWith();
+        await waitFor(() => {
+            expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterOpen).toHaveBeenCalledWith();
         });
-        (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(0);
+        expect(args.handleAfterClose).toHaveBeenCalledTimes(0);
         // Close by clicking outside
-        await test_1.userEvent.click(document.body);
+        await userEvent.click(document.body);
         // Wait for the close transition
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleAfterClose).toHaveBeenCalledWith();
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledTimes(1);
+            expect(args.handleAfterClose).toHaveBeenCalledWith();
         });
-        (0, test_1.expect)(args.handleAfterOpen).toHaveBeenCalledTimes(1);
+        expect(args.handleAfterOpen).toHaveBeenCalledTimes(1);
     },
 };
-exports.dismissible = {
+export const dismissible = {
     name: "dismissible, onClose, className, attributes, closeAriaLabel",
     args: {
-        handleClose: (0, test_1.fn)(),
+        handleClose: fn(),
     },
-    render: (args) => (<Popover_1.default onClose={args.handleClose} defaultActive>
-			<Popover_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-			</Popover_1.default.Trigger>
-			<Popover_1.default.Content>
-				<Popover_1.default.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
+    render: (args) => (<Popover onClose={args.handleClose} defaultActive>
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<Popover.Dismissible closeAriaLabel="Close" attributes={{ "data-testid": "test-id" }} className="test-classname">
 					Content
-				</Popover_1.default.Dismissible>
-			</Popover_1.default.Content>
-		</Popover_1.default>),
+				</Popover.Dismissible>
+			</Popover.Content>
+		</Popover>),
     play: async ({ canvasElement, args }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
-        await (0, helpers_1.sleep)(300);
+        const canvas = within(canvasElement.ownerDocument.body);
+        await sleep(300);
         const dismissible = canvas.getByTestId("test-id");
-        const closeButton = (0, test_1.within)(dismissible).getByRole("button");
-        (0, test_1.expect)(dismissible).toHaveClass("test-classname");
-        (0, test_1.expect)(closeButton).toHaveAccessibleName("Close");
-        await test_1.userEvent.click(closeButton);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledTimes(1);
-            (0, test_1.expect)(args.handleClose).toHaveBeenCalledWith({});
+        const closeButton = within(dismissible).getByRole("button");
+        expect(dismissible).toHaveClass("test-classname");
+        expect(closeButton).toHaveAccessibleName("Close");
+        await userEvent.click(closeButton);
+        await waitFor(() => {
+            expect(args.handleClose).toHaveBeenCalledTimes(1);
+            expect(args.handleClose).toHaveBeenCalledWith({ reason: "close-button" });
         });
-        await (0, helpers_1.sleep)(300);
+        await sleep(300);
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
+        await userEvent.click(trigger);
     },
 };
-exports.autoFocus = {
+export const autoFocus = {
     name: "autoFocus",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="autoFocus=false">
+    render: () => (<Example>
+			<Example.Item title="autoFocus=false">
 				{/* oxlint-disable-next-line jsx_a11y/no-autofocus */}
 				<Demo autoFocus={false}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			</Example.Item>
+		</Example>),
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const trigger = canvas.getAllByRole("button")[0];
-        await test_1.userEvent.click(trigger);
-        await (0, test_1.waitFor)(() => {
-            (0, test_1.expect)(document.activeElement).toHaveRole("dialog");
+        await userEvent.click(trigger);
+        await waitFor(() => {
+            expect(document.activeElement).toHaveRole("dialog");
         });
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Popover_1.default active>
-				<Popover_1.default.Trigger>
-					{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-				</Popover_1.default.Trigger>
-				<Popover_1.default.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
+			<Popover active>
+				<Popover.Trigger>
+					{(attributes) => <Button attributes={attributes}>Open</Button>}
+				</Popover.Trigger>
+				<Popover.Content className="test-classname" attributes={{ "data-testid": "test-id" }}>
 					Content
-				</Popover_1.default.Content>
-			</Popover_1.default>
+				</Popover.Content>
+			</Popover>
 		</div>),
     play: async ({ canvasElement }) => {
-        const canvas = (0, test_1.within)(canvasElement.ownerDocument.body);
+        const canvas = within(canvasElement.ownerDocument.body);
         const menu = await canvas.findByTestId("test-id");
-        (0, test_1.expect)(menu).toHaveClass("test-classname");
+        expect(menu).toHaveClass("test-classname");
     },
 };
-exports.testNested = {
+export const testNested = {
     name: "test: nested",
-    render: () => (<Popover_1.default position="bottom">
-			<Popover_1.default.Trigger>
-				{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-			</Popover_1.default.Trigger>
-			<Popover_1.default.Content>
-				<View_1.default gap={2} align="start">
+    render: () => (<Popover position="bottom">
+			<Popover.Trigger>
+				{(attributes) => <Button attributes={attributes}>Open</Button>}
+			</Popover.Trigger>
+			<Popover.Content>
+				<View gap={2} align="start">
 					Popover content
-					<Popover_1.default>
-						<Popover_1.default.Trigger>
-							{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-						</Popover_1.default.Trigger>
-						<Popover_1.default.Content>Hello</Popover_1.default.Content>
-					</Popover_1.default>
-				</View_1.default>
-			</Popover_1.default.Content>
-		</Popover_1.default>),
+					<Popover>
+						<Popover.Trigger>
+							{(attributes) => <Button attributes={attributes}>Open</Button>}
+						</Popover.Trigger>
+						<Popover.Content>Hello</Popover.Content>
+					</Popover>
+				</View>
+			</Popover.Content>
+		</Popover>),
 };
-exports.testWithTooltip = {
+export const testWithTooltip = {
     name: "test: with tooltip",
-    render: () => (<View_1.default paddingTop={10}>
-			<Tooltip_1.default position="top" text="Hello">
-				{(tooltipAttributes) => (<Popover_1.default position="bottom">
-						<Popover_1.default.Trigger>
-							{(attributes) => (<Button_1.default attributes={{
+    render: () => (<View paddingTop={10}>
+			<Tooltip position="top" text="Hello">
+				{(tooltipAttributes) => (<Popover position="bottom">
+						<Popover.Trigger>
+							{(attributes) => (<Button attributes={{
                     ...attributes,
                     ...tooltipAttributes,
                 }}>
 									Open
-								</Button_1.default>)}
-						</Popover_1.default.Trigger>
-						<Popover_1.default.Content>
-							<View_1.default gap={2} align="start">
+								</Button>)}
+						</Popover.Trigger>
+						<Popover.Content>
+							<View gap={2} align="start">
 								Popover content
-								<Button_1.default onClick={() => { }}>Button</Button_1.default>
-							</View_1.default>
-						</Popover_1.default.Content>
-					</Popover_1.default>)}
-			</Tooltip_1.default>
-		</View_1.default>),
+								<Button onClick={() => { }}>Button</Button>
+							</View>
+						</Popover.Content>
+					</Popover>)}
+			</Tooltip>
+		</View>),
 };
-exports.testContentEditable = {
+export const testContentEditable = {
     name: "test: contenteditable",
     render: () => {
-        const [active, setActive] = (0, react_1.useState)(false);
-        return (<Popover_1.default>
-				<Popover_1.default.Trigger>
-					{(attributes) => <Button_1.default attributes={attributes}>Open</Button_1.default>}
-				</Popover_1.default.Trigger>
-				<Popover_1.default.Content>
-					<View_1.default gap={4}>
-						<View_1.default.Item>
-							<Button_1.default onClick={() => { }}>Hello</Button_1.default>
-						</View_1.default.Item>
+        const [active, setActive] = useState(false);
+        return (<Popover>
+				<Popover.Trigger>
+					{(attributes) => <Button attributes={attributes}>Open</Button>}
+				</Popover.Trigger>
+				<Popover.Content>
+					<View gap={4}>
+						<View.Item>
+							<Button onClick={() => { }}>Hello</Button>
+						</View.Item>
 
-						<ScrollArea_1.default height="100px">
+						<ScrollArea height="100px">
 							<div style={{ height: "200px" }} contentEditable 
         // oxlint-disable-next-line jsx-a11y/prefer-tag-over-role
         role="textbox" aria-label="Content editable" tabIndex={0} onInput={(e) => {
@@ -359,18 +353,18 @@ exports.testContentEditable = {
                     setActive(false);
                 }
             }}/>
-						</ScrollArea_1.default>
+						</ScrollArea>
 
-						<Popover_1.default active={active} onClose={() => setActive(false)} originCoordinates={{ x: 300, y: 300 }} trapFocusMode="selection-menu">
-							<Popover_1.default.Content>
-								<View_1.default gap={4}>
-									<MenuItem_1.default onClick={() => { }}>Action</MenuItem_1.default>
-									<MenuItem_1.default onClick={() => { }}>Close</MenuItem_1.default>
-								</View_1.default>
-							</Popover_1.default.Content>
-						</Popover_1.default>
-					</View_1.default>
-				</Popover_1.default.Content>
-			</Popover_1.default>);
+						<Popover active={active} onClose={() => setActive(false)} originCoordinates={{ x: 300, y: 300 }} trapFocusMode="selection-menu">
+							<Popover.Content>
+								<View gap={4}>
+									<MenuItem onClick={() => { }}>Action</MenuItem>
+									<MenuItem onClick={() => { }}>Close</MenuItem>
+								</View>
+							</Popover.Content>
+						</Popover>
+					</View>
+				</Popover.Content>
+			</Popover>);
     },
 };

package/dist/components/ProgressBar/ProgressBar.d.ts

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

package/dist/components/ProgressBar/ProgressBar.js

@@ -6,7 +6,7 @@ const ProgressBar = (props) => {
     const rootClassNames = classNames(s.root, className, color && s[`--color-${color}`], size && s[`--size-${size}`], !!duration && s["--duration"]);
     const total = max - min;
     const normalizedValue = value - min;
-    const resolvedValue = Math.max(min, Math.min(max, normalizedValue));
+    const resolvedValue = Math.max(0, Math.min(total, normalizedValue));
     const width = (resolvedValue / total) * 100;
     const translate = `${width - 100}%`;
     return (_jsx("div", { 

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

@@ -1,5 +1,5 @@
 import type { ClassName } from "@reshaped/utilities";
-import type { Attributes } from "../../types/global";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Value of the progress bar controlling the size of the fill */
     value?: number;

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

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

package/dist/components/ProgressBar/index.js

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