reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,70 +1,64 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.keyboardMode = exports.testScoped = exports.scoped = exports.darkMode = exports.lightMode = exports.controlledMode = exports.rtl = void 0;
-const react_1 = require("react");
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Theme_1 = require("../../../components/Theme");
-const Reshaped_1 = __importDefault(require("../Reshaped"));
-exports.default = {
+import { useState } from "react";
+import { expect, userEvent } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import { useTheme } from "../../../components/Theme/index.js";
+import Reshaped from "../Reshaped.js";
+export default {
     title: "Utility components/Reshaped",
     parameters: {
         disableWrapper: true,
     },
 };
-exports.rtl = {
+export const rtl = {
     name: "defaultRTL",
-    render: () => (<Reshaped_1.default defaultRTL theme="slate" defaultColorMode="dark">
+    render: () => (<Reshaped defaultRTL theme="slate" defaultColorMode="dark">
 			Hello
-		</Reshaped_1.default>),
+		</Reshaped>),
 };
-exports.controlledMode = {
+export const controlledMode = {
     name: "colorMode, controlled",
     render: () => {
-        const [mode, setMode] = (0, react_1.useState)("dark");
-        return (<Reshaped_1.default theme="slate" colorMode={mode}>
-				<Button_1.default onClick={() => {
+        const [mode, setMode] = useState("dark");
+        return (<Reshaped theme="slate" colorMode={mode}>
+				<Button onClick={() => {
                 setMode(mode === "dark" ? "light" : "dark");
             }}>
 					Toggle color mode
-				</Button_1.default>
-			</Reshaped_1.default>);
+				</Button>
+			</Reshaped>);
     },
     play: async ({ canvas }) => {
         const button = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("dark");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("light");
+        expect(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("dark");
+        await userEvent.click(button);
+        expect(document.documentElement.getAttribute("data-rs-color-mode")).toEqual("light");
     },
 };
-exports.lightMode = {
+export const lightMode = {
     name: "defaultColorMode=light",
-    render: () => <Reshaped_1.default theme="slate">Hello</Reshaped_1.default>,
+    render: () => <Reshaped theme="slate">Hello</Reshaped>,
     play: () => {
         const theme = document.documentElement.getAttribute("data-rs-theme");
         const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
-        (0, test_1.expect)(theme).toEqual("slate");
-        (0, test_1.expect)(colorMode).toEqual("light");
+        expect(theme).toEqual("slate");
+        expect(colorMode).toEqual("light");
     },
 };
-exports.darkMode = {
+export const darkMode = {
     name: "defaultColorMode=dark",
-    render: () => (<Reshaped_1.default theme="slate" defaultColorMode="dark">
+    render: () => (<Reshaped theme="slate" defaultColorMode="dark">
 			Hello
-		</Reshaped_1.default>),
+		</Reshaped>),
     play: () => {
         const theme = document.documentElement.getAttribute("data-rs-theme");
         const colorMode = document.documentElement.getAttribute("data-rs-color-mode");
-        (0, test_1.expect)(theme).toEqual("slate");
-        (0, test_1.expect)(colorMode).toEqual("dark");
+        expect(theme).toEqual("slate");
+        expect(colorMode).toEqual("dark");
     },
 };
-exports.scoped = {
+export const scoped = {
     name: "scoped",
-    render: () => (<Reshaped_1.default theme="slate" defaultColorMode="dark" scoped>
+    render: () => (<Reshaped theme="slate" defaultColorMode="dark" scoped>
 			<div style={{
             backgroundColor: "var(--rs-color-background-page)",
             padding: "var(--rs-unit-x4)",
@@ -72,49 +66,49 @@ exports.scoped = {
         }}>
 				Hello
 			</div>
-		</Reshaped_1.default>),
+		</Reshaped>),
     play: async () => {
         const root = document.querySelector("[data-rs-root]");
-        (0, test_1.expect)(root).toBeInTheDocument();
-        (0, test_1.expect)(root).not.toBe(document.documentElement);
-        (0, test_1.expect)(root).toHaveAttribute("data-rs-theme", "slate");
-        (0, test_1.expect)(document.documentElement).not.toHaveAttribute("data-rs-theme");
+        expect(root).toBeInTheDocument();
+        expect(root).not.toBe(document.documentElement);
+        expect(root).toHaveAttribute("data-rs-theme", "slate");
+        expect(document.documentElement).not.toHaveAttribute("data-rs-theme");
     },
 };
 const ScopedComponent = () => {
-    const { invertColorMode } = (0, Theme_1.useTheme)();
-    return <Button_1.default onClick={invertColorMode}>Invert</Button_1.default>;
+    const { invertColorMode } = useTheme();
+    return <Button onClick={invertColorMode}>Invert</Button>;
 };
-exports.testScoped = {
+export const testScoped = {
     name: "test: scoped switch",
-    render: () => (<Reshaped_1.default theme="slate">
-			<Reshaped_1.default theme="figma" scoped>
+    render: () => (<Reshaped theme="slate">
+			<Reshaped theme="figma" scoped>
 				<ScopedComponent />
-			</Reshaped_1.default>
-		</Reshaped_1.default>),
+			</Reshaped>
+		</Reshaped>),
     play: async ({ canvas }) => {
         const nestedRoot = document.querySelector("[data-rs-root]");
         const button = canvas.getAllByRole("button")[0];
-        (0, test_1.expect)(document.documentElement).toHaveAttribute("data-rs-theme", "slate");
-        (0, test_1.expect)(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
-        (0, test_1.expect)(nestedRoot).toHaveAttribute("data-rs-theme", "figma");
-        (0, test_1.expect)(nestedRoot).toHaveAttribute("data-rs-color-mode", "light");
-        await test_1.userEvent.click(button);
-        (0, test_1.expect)(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
-        (0, test_1.expect)(nestedRoot).toHaveAttribute("data-rs-color-mode", "dark");
+        expect(document.documentElement).toHaveAttribute("data-rs-theme", "slate");
+        expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
+        expect(nestedRoot).toHaveAttribute("data-rs-theme", "figma");
+        expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "light");
+        await userEvent.click(button);
+        expect(document.documentElement).toHaveAttribute("data-rs-color-mode", "light");
+        expect(nestedRoot).toHaveAttribute("data-rs-color-mode", "dark");
     },
 };
-exports.keyboardMode = {
+export const keyboardMode = {
     name: "test: keyboard mode",
-    render: () => (<Reshaped_1.default theme="slate" defaultColorMode="dark">
+    render: () => (<Reshaped theme="slate" defaultColorMode="dark">
 			Hello
-		</Reshaped_1.default>),
+		</Reshaped>),
     play: async () => {
         const attribute = "data-rs-keyboard";
-        (0, test_1.expect)(document.documentElement).not.toHaveAttribute(attribute);
-        await test_1.userEvent.keyboard("{Tab/}");
-        (0, test_1.expect)(document.documentElement).toHaveAttribute(attribute);
-        await test_1.userEvent.click(document.body);
-        (0, test_1.expect)(document.documentElement).not.toHaveAttribute(attribute);
+        expect(document.documentElement).not.toHaveAttribute(attribute);
+        await userEvent.keyboard("{Tab/}");
+        expect(document.documentElement).toHaveAttribute(attribute);
+        await userEvent.click(document.body);
+        expect(document.documentElement).not.toHaveAttribute(attribute);
     },
 };

package/dist/components/Resizable/Resizable.d.ts

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

package/dist/components/Resizable/Resizable.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import View from "../../components/View";
-import { ResizableContext } from "./ResizableContext";
+import View from "../../components/View/index.js";
+import { ResizableContext } from "./ResizableContext.js";
 import s from "./Resizable.module.css";
 export const ResizableItem = (props) => {
     const { children, defaultSize, minSize, maxSize } = props;

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

@@ -1,6 +1,6 @@
 import type React from "react";
-import type { ViewProps } from "../../components/View";
-import type { UseDragCallbackArgs } from "../../hooks/_internal/useDrag";
+import type { ViewProps } from "../../components/View/index.js";
+import type { UseDragCallbackArgs } from "../../hooks/_internal/useDrag.js";
 export type Props = {
     /** Component render variant */
     variant?: "bordered" | "borderless";

package/dist/components/Resizable/ResizableContext.d.ts

@@ -1,3 +1,3 @@
 import React from "react";
-import type * as T from "./Resizable.types";
+import type * as T from "./Resizable.types.js";
 export declare const ResizableContext: React.Context<T.Context>;

package/dist/components/Resizable/ResizableHandle.d.ts

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

package/dist/components/Resizable/ResizableHandle.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import View from "../../components/View";
-import useDrag from "../../hooks/_internal/useDrag";
-import { ResizableContext } from "./ResizableContext";
+import View from "../../components/View/index.js";
+import useDrag from "../../hooks/_internal/useDrag.js";
+import { ResizableContext } from "./ResizableContext.js";
 import s from "./Resizable.module.css";
 const ResizableHandle = (props) => {
     const { children } = props;

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

@@ -1,8 +1,8 @@
-import Resizable, { ResizableItem } from "./Resizable";
-import ResizableHandle from "./ResizableHandle";
+import Resizable, { ResizableItem } from "./Resizable.js";
+import ResizableHandle from "./ResizableHandle.js";
 declare const ResizableRoot: typeof Resizable & {
     Item: typeof ResizableItem;
     Handle: typeof ResizableHandle;
 };
 export default ResizableRoot;
-export type { HandleProps as ResizableHandleProps, ItemProps as ResizableItemProps, Props as ResizableProps, } from "./Resizable.types";
+export type { HandleProps as ResizableHandleProps, ItemProps as ResizableItemProps, Props as ResizableProps, } from "./Resizable.types.js";

package/dist/components/Resizable/index.js

@@ -1,5 +1,5 @@
-import Resizable, { ResizableItem } from "./Resizable";
-import ResizableHandle from "./ResizableHandle";
+import Resizable, { ResizableItem } from "./Resizable.js";
+import ResizableHandle from "./ResizableHandle.js";
 const ResizableRoot = Resizable;
 ResizableRoot.Item = ResizableItem;
 ResizableRoot.Handle = ResizableHandle;

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

@@ -1,9 +1,9 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/Resizable").ResizableProps> & {
-        Item: typeof import("../Resizable").ResizableItem;
-        Handle: import("react").FC<import("../../../components/Resizable").ResizableHandleProps>;
+    component: import("react").FC<import("../../../components/Resizable/index.js").ResizableProps> & {
+        Item: typeof import("../Resizable.js").ResizableItem;
+        Handle: import("react").FC<import("../../../components/Resizable/index.js").ResizableHandleProps>;
     };
     parameters: {
         iframe: {

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

@@ -1,17 +1,11 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testWrapper = exports.className = exports.layout = exports.size = exports.variant = exports.children = exports.direction = void 0;
-const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../../components/Button"));
-const Resizable_1 = __importDefault(require("../../../components/Resizable"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect } from "storybook/test";
+import Button from "../../../components/Button/index.js";
+import Resizable from "../../../components/Resizable/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Resizable",
-    component: Resizable_1.default,
+    component: Resizable,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/resizable",
@@ -22,189 +16,189 @@ exports.default = {
         },
     },
 };
-const Panel = (props) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height={props.height ?? "100%"}>
+const Panel = (props) => (<View backgroundColor="neutral-faded" borderRadius="medium" align="center" justify="center" height={props.height ?? "100%"}>
 		Panel
-	</View_1.default>);
+	</View>);
 const Handle = () => {
-    return (<Resizable_1.default.Handle>
-			{(attributes, props) => (<View_1.default backgroundColor={props.status === "dragging" ? "primary" : "primary-faded"} padding={props.direction === "column" ? 1 : 8} height="100%" align="center" justify="center" borderRadius="small" animated>
-					<Button_1.default attributes={attributes} type="button">
+    return (<Resizable.Handle>
+			{(attributes, props) => (<View backgroundColor={props.status === "dragging" ? "primary" : "primary-faded"} padding={props.direction === "column" ? 1 : 8} height="100%" align="center" justify="center" borderRadius="small" animated>
+					<Button attributes={attributes} type="button">
 						Drag me
-					</Button_1.default>
-				</View_1.default>)}
-		</Resizable_1.default.Handle>);
+					</Button>
+				</View>)}
+		</Resizable.Handle>);
 };
-exports.direction = {
+export const direction = {
     name: "direction",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="row">
-					<Resizable_1.default height="200px">
-						<Resizable_1.default.Item>
+        return (<Example>
+				<Example.Item title="row">
+					<Resizable height="200px">
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-						<Resizable_1.default.Handle />
-						<Resizable_1.default.Item>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-						<Resizable_1.default.Handle />
-						<Resizable_1.default.Item>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-					</Resizable_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="column">
-					<Resizable_1.default height="400px" direction="column">
-						<Resizable_1.default.Item>
+						</Resizable.Item>
+					</Resizable>
+				</Example.Item>
+				<Example.Item title="column">
+					<Resizable height="400px" direction="column">
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-						<Resizable_1.default.Handle />
-						<Resizable_1.default.Item>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-						<Resizable_1.default.Handle />
-						<Resizable_1.default.Item>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-					</Resizable_1.default>
-				</storybook_1.Example.Item>
+						</Resizable.Item>
+					</Resizable>
+				</Example.Item>
 
 				{/* Test that page doesn't scroll on dragging */}
 				<div style={{ height: 2000 }}/>
-			</storybook_1.Example>);
+			</Example>);
     },
 };
-exports.children = {
+export const children = {
     name: "children",
     render: () => {
-        return (<storybook_1.Example>
-				<storybook_1.Example.Item title="render props, row">
-					<Resizable_1.default height="200px">
-						<Resizable_1.default.Item>
+        return (<Example>
+				<Example.Item title="render props, row">
+					<Resizable height="200px">
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-						<Resizable_1.default.Handle />
-						<Resizable_1.default.Item>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
+						</Resizable.Item>
 						<Handle />
-						<Resizable_1.default.Item>
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-					</Resizable_1.default>
-				</storybook_1.Example.Item>
-				<storybook_1.Example.Item title="render props, column">
-					<Resizable_1.default height="400px" direction="column">
-						<Resizable_1.default.Item>
+						</Resizable.Item>
+					</Resizable>
+				</Example.Item>
+				<Example.Item title="render props, column">
+					<Resizable height="400px" direction="column">
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-						<Resizable_1.default.Handle />
-						<Resizable_1.default.Item>
+						</Resizable.Item>
+						<Resizable.Handle />
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
+						</Resizable.Item>
 						<Handle />
-						<Resizable_1.default.Item>
+						<Resizable.Item>
 							<Panel />
-						</Resizable_1.default.Item>
-					</Resizable_1.default>
-				</storybook_1.Example.Item>
-			</storybook_1.Example>);
+						</Resizable.Item>
+					</Resizable>
+				</Example.Item>
+			</Example>);
     },
 };
-exports.variant = {
+export const variant = {
     name: "variant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="bordered, row">
-				<Resizable_1.default height="200px" variant="bordered">
-					<Resizable_1.default.Item>
+    render: () => (<Example>
+			<Example.Item title="bordered, row">
+				<Resizable height="200px" variant="bordered">
+					<Resizable.Item>
 						<Panel />
-					</Resizable_1.default.Item>
-					<Resizable_1.default.Handle />
-					<Resizable_1.default.Item>
+					</Resizable.Item>
+					<Resizable.Handle />
+					<Resizable.Item>
 						<Panel />
-					</Resizable_1.default.Item>
-					<Resizable_1.default.Handle />
-					<Resizable_1.default.Item>
+					</Resizable.Item>
+					<Resizable.Handle />
+					<Resizable.Item>
 						<Panel />
-					</Resizable_1.default.Item>
-				</Resizable_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="bordered, column">
-				<Resizable_1.default height="400px" direction="column" variant="bordered">
-					<Resizable_1.default.Item>
+					</Resizable.Item>
+				</Resizable>
+			</Example.Item>
+			<Example.Item title="bordered, column">
+				<Resizable height="400px" direction="column" variant="bordered">
+					<Resizable.Item>
 						<Panel />
-					</Resizable_1.default.Item>
-					<Resizable_1.default.Handle />
-					<Resizable_1.default.Item>
+					</Resizable.Item>
+					<Resizable.Handle />
+					<Resizable.Item>
 						<Panel />
-					</Resizable_1.default.Item>
-					<Resizable_1.default.Handle />
-					<Resizable_1.default.Item>
+					</Resizable.Item>
+					<Resizable.Handle />
+					<Resizable.Item>
 						<Panel />
-					</Resizable_1.default.Item>
-				</Resizable_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Resizable.Item>
+				</Resizable>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "minSize, maxSize, defaultSize",
-    render: () => (<Resizable_1.default className="test-classname" attributes={{ id: "test-id" }} height="200px">
-			<Resizable_1.default.Item>
+    render: () => (<Resizable className="test-classname" attributes={{ id: "test-id" }} height="200px">
+			<Resizable.Item>
 				<Panel />
-			</Resizable_1.default.Item>
-			<Resizable_1.default.Handle />
-			<Resizable_1.default.Item minSize="200px" maxSize="500px" defaultSize="300px">
+			</Resizable.Item>
+			<Resizable.Handle />
+			<Resizable.Item minSize="200px" maxSize="500px" defaultSize="300px">
 				<Panel />
-			</Resizable_1.default.Item>
-		</Resizable_1.default>),
+			</Resizable.Item>
+		</Resizable>),
 };
-exports.layout = {
+export const layout = {
     name: "height, gap",
-    render: () => (<Resizable_1.default height="100px" gap={8}>
-			<Resizable_1.default.Item>
+    render: () => (<Resizable height="100px" gap={8}>
+			<Resizable.Item>
 				<Panel />
-			</Resizable_1.default.Item>
-			<Resizable_1.default.Handle />
-			<Resizable_1.default.Item>
+			</Resizable.Item>
+			<Resizable.Handle />
+			<Resizable.Item>
 				<Panel />
-			</Resizable_1.default.Item>
-		</Resizable_1.default>),
+			</Resizable.Item>
+		</Resizable>),
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Resizable_1.default className="test-classname" attributes={{ id: "test-id" }} height="200px">
-				<Resizable_1.default.Item>
+			<Resizable className="test-classname" attributes={{ id: "test-id" }} height="200px">
+				<Resizable.Item>
 					<Panel />
-				</Resizable_1.default.Item>
-				<Resizable_1.default.Handle />
-				<Resizable_1.default.Item>
+				</Resizable.Item>
+				<Resizable.Handle />
+				<Resizable.Item>
 					<Panel />
-				</Resizable_1.default.Item>
-			</Resizable_1.default>
+				</Resizable.Item>
+			</Resizable>
 		</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");
     },
 };
 const Wrapper = () => (<>
-		<Resizable_1.default.Item>
+		<Resizable.Item>
 			<Panel />
-		</Resizable_1.default.Item>
-		<Resizable_1.default.Handle />
-		<Resizable_1.default.Item>
+		</Resizable.Item>
+		<Resizable.Handle />
+		<Resizable.Item>
 			<Panel />
-		</Resizable_1.default.Item>
+		</Resizable.Item>
 	</>);
-exports.testWrapper = {
+export const testWrapper = {
     name: "test: compound wrapper",
-    render: () => (<Resizable_1.default height="200px">
-			<Resizable_1.default.Item>
+    render: () => (<Resizable height="200px">
+			<Resizable.Item>
 				<Panel />
-			</Resizable_1.default.Item>
-			<Resizable_1.default.Handle />
+			</Resizable.Item>
+			<Resizable.Handle />
 			<Wrapper />
-		</Resizable_1.default>),
+		</Resizable>),
 };

package/dist/components/ScrollArea/ScrollArea.d.ts

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