reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,249 +1,243 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.formControl = exports.className = exports.value = exports.defaultValue = exports.disabled = exports.id = exports.placeholder = exports.render = exports.aligner = exports.size = exports.attachments = exports.error = exports.rounded = exports.variant = void 0;
-const test_1 = require("storybook/test");
-const Badge_1 = __importDefault(require("../../../components/Badge"));
-const Button_1 = __importDefault(require("../../../components/Button"));
-const FormControl_1 = __importDefault(require("../../../components/FormControl"));
-const Text_1 = __importDefault(require("../../../components/Text"));
-const TextField_1 = __importDefault(require("../../../components/TextField"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Badge from "../../../components/Badge/index.js";
+import Button from "../../../components/Button/index.js";
+import FormControl from "../../../components/FormControl/index.js";
+import Text from "../../../components/Text/index.js";
+import TextField from "../../../components/TextField/index.js";
+import View from "../../../components/View/index.js";
+import { Example, Placeholder } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/TextField",
-    component: TextField_1.default,
+    component: TextField,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/text-field",
         },
     },
 };
-exports.variant = {
+export const variant = {
     name: "variant",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="variant: outline">
-				<TextField_1.default name="foo" placeholder="Enter value"/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="variant: outline">
+				<TextField name="foo" placeholder="Enter value"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: faded">
-				<TextField_1.default variant="faded" name="foo" placeholder="Enter value"/>
-			</storybook_1.Example.Item>
+			<Example.Item title="variant: faded">
+				<TextField variant="faded" name="foo" placeholder="Enter value"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: ghost">
-				<TextField_1.default variant="ghost" name="foo" placeholder="Enter value"/>
-			</storybook_1.Example.Item>
+			<Example.Item title="variant: ghost">
+				<TextField variant="ghost" name="foo" placeholder="Enter value"/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="variant: headless">
-				<TextField_1.default variant="headless" name="foo" placeholder="Enter value"/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="variant: headless">
+				<TextField variant="headless" name="foo" placeholder="Enter value"/>
+			</Example.Item>
+		</Example>),
 };
-exports.rounded = {
+export const rounded = {
     name: "rounded",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="rounded">
-				<TextField_1.default rounded name="foo" placeholder="Enter value" icon={Zap_1.default} prefix="+31" endSlot={<Button_1.default rounded size="small" icon={Zap_1.default}/>}/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="rounded">
+				<TextField rounded name="foo" placeholder="Enter value" icon={IconZap} prefix="+31" endSlot={<Button rounded size="small" icon={IconZap}/>}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="rounded, variant: faded">
-				<View_1.default direction="row" gap={2}>
-					<View_1.default.Item grow>
-						<TextField_1.default rounded variant="faded" name="foo" placeholder="Enter value" startSlot={<Badge_1.default rounded size="small">
+			<Example.Item title="rounded, variant: faded">
+				<View direction="row" gap={2}>
+					<View.Item grow>
+						<TextField rounded variant="faded" name="foo" placeholder="Enter value" startSlot={<Badge rounded size="small">
 									Hello
-								</Badge_1.default>}/>
-					</View_1.default.Item>
-					<Button_1.default rounded>Submit</Button_1.default>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
-};
-exports.error = {
+								</Badge>}/>
+					</View.Item>
+					<Button rounded>Submit</Button>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const error = {
     name: "hasError",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="error">
-				<TextField_1.default name="foo" placeholder="Enter value" hasError/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="error">
+				<TextField name="foo" placeholder="Enter value" hasError/>
+			</Example.Item>
+		</Example>),
 };
-exports.attachments = {
+export const attachments = {
     name: "icon, endIcon, suffix, prefix, startSlot, endSlot, startSlotPadding, endSlotPadding",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="icon">
-				<TextField_1.default name="Name" placeholder="Enter your name" value="Reshaped" icon={Zap_1.default}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="endIcon">
-				<TextField_1.default name="Name" placeholder="Enter your name" value="Reshaped" endIcon={Zap_1.default}/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="icon">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" icon={IconZap}/>
+			</Example.Item>
+			<Example.Item title="endIcon">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
-				<TextField_1.default name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<storybook_1.Placeholder h={20}/>}/>
-			</storybook_1.Example.Item>
+			<Example.Item title={["startSlot", "vertical and horizontal padding aligned"]}>
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={<Placeholder h={20}/>}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
-				<TextField_1.default name="Name" placeholder="Enter your name" value="Reshaped" endSlotPadding={1} endSlot={<Button_1.default icon={Zap_1.default} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
-			</storybook_1.Example.Item>
+			<Example.Item title={["endSlot", "vertical and horizontal padding aligned"]}>
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endSlotPadding={1} endSlot={<Button icon={IconZap} size="small" onClick={() => { }} attributes={{ "aria-label": "Action" }}/>}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="paddingSlotStart=4, paddingSlotEnd=2">
-				<TextField_1.default name="Name" placeholder="Enter your name" value="Reshaped" startSlotPadding={4} endSlotPadding={2} startSlot={<storybook_1.Placeholder h={20}/>} endSlot={<storybook_1.Placeholder h={20}/>}/>
-			</storybook_1.Example.Item>
+			<Example.Item title="paddingSlotStart=4, paddingSlotEnd=2">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlotPadding={4} endSlotPadding={2} startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="with all affixes">
-				<TextField_1.default name="Name" placeholder="Enter your name" value="Reshaped" endIcon={Zap_1.default} icon={Zap_1.default} prefix="Estimated value" suffix="m2" startSlot={<storybook_1.Placeholder h={20}/>} endSlot={<storybook_1.Placeholder h={20}/>}/>
-			</storybook_1.Example.Item>
+			<Example.Item title="with all affixes">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" endIcon={IconZap} icon={IconZap} prefix="Estimated value" suffix="m2" startSlot={<Placeholder h={20}/>} endSlot={<Placeholder h={20}/>}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="multiline wrap">
-				<TextField_1.default name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge_1.default key={i}>Item {i + 1}</Badge_1.default>))} multiline/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="multiline wrap">
+				<TextField name="Name" placeholder="Enter your name" value="Reshaped" startSlot={[...Array(10).keys()].map((i) => (<Badge key={i}>Item {i + 1}</Badge>))} multiline/>
+			</Example.Item>
+		</Example>),
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: small">
-				<TextField_1.default name="Name" placeholder="Enter your name" size="small" icon={Zap_1.default}/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="size: small">
+				<TextField name="Name" placeholder="Enter your name" size="small" icon={IconZap}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: medium">
-				<TextField_1.default name="Name" placeholder="Enter your name" size="medium" icon={Zap_1.default}/>
-			</storybook_1.Example.Item>
+			<Example.Item title="size: medium">
+				<TextField name="Name" placeholder="Enter your name" size="medium" icon={IconZap}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: large">
-				<TextField_1.default name="Name" placeholder="Enter your name" size="large" icon={Zap_1.default}/>
-			</storybook_1.Example.Item>
+			<Example.Item title="size: large">
+				<TextField name="Name" placeholder="Enter your name" size="large" icon={IconZap}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: xlarge">
-				<TextField_1.default name="Name" placeholder="Enter your name" size="xlarge" icon={Zap_1.default}/>
-			</storybook_1.Example.Item>
+			<Example.Item title="size: xlarge">
+				<TextField name="Name" placeholder="Enter your name" size="xlarge" icon={IconZap}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
-				<TextField_1.default name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }} icon={Zap_1.default}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title={["responsive size", "[s] xlarge", "[m+] medium"]}>
+				<TextField name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }} icon={IconZap}/>
+			</Example.Item>
+		</Example>),
 };
-exports.aligner = {
+export const aligner = {
     name: "aligner",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="aligner">
-				<View_1.default gap={2}>
-					<Text_1.default variant="featured-5">What problem are you trying to solve?</Text_1.default>
-					<TextField_1.default.Aligner>
-						<TextField_1.default variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
-					</TextField_1.default.Aligner>
-					<View_1.default.Item>
-						<Button_1.default>Next</Button_1.default>
-					</View_1.default.Item>
-				</View_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
-};
-exports.render = {
+    render: () => (<Example>
+			<Example.Item title="aligner">
+				<View gap={2}>
+					<Text variant="featured-5">What problem are you trying to solve?</Text>
+					<TextField.Aligner>
+						<TextField variant="headless" placeholder="Try something like 'I have a job'" name="description"/>
+					</TextField.Aligner>
+					<View.Item>
+						<Button>Next</Button>
+					</View.Item>
+				</View>
+			</Example.Item>
+		</Example>),
+};
+export const render = {
     name: "base",
-    render: () => <TextField_1.default name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
+    render: () => <TextField name="test-name" inputAttributes={{ "aria-label": "Label" }}/>,
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveAttribute("name", "test-name");
-        (0, test_1.expect)(input).toHaveAccessibleName("Label");
+        expect(input).toHaveAttribute("name", "test-name");
+        expect(input).toHaveAccessibleName("Label");
     },
 };
-exports.placeholder = {
+export const placeholder = {
     name: "placeholder",
-    render: () => (<TextField_1.default name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
+    render: () => (<TextField name="test-name" placeholder="Placeholder" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveValue("");
-        (0, test_1.expect)(input).toHaveAttribute("placeholder", "Placeholder");
+        expect(input).toHaveValue("");
+        expect(input).toHaveAttribute("placeholder", "Placeholder");
     },
 };
-exports.id = {
+export const id = {
     name: "id",
-    render: () => (<TextField_1.default name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
+    render: () => (<TextField name="test-name" id="test-id" inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-id");
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => <TextField_1.default name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
+    render: () => <TextField name="test-name" disabled inputAttributes={{ "aria-label": "Label" }}/>,
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toBeDisabled();
+        expect(input).toBeDisabled();
     },
 };
-exports.defaultValue = {
+export const defaultValue = {
     name: "defaultValue, uncontrolled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<TextField_1.default name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    render: (args) => (<TextField name="test-name" defaultValue="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveValue("value");
+        expect(input).toHaveValue("value");
         input.focus();
-        await test_1.userEvent.keyboard("2");
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: "value2",
-            event: test_1.expect.objectContaining({ target: input }),
+            event: expect.objectContaining({ target: input }),
         });
-        (0, test_1.expect)(input).toHaveValue("value2");
+        expect(input).toHaveValue("value2");
     },
 };
-exports.value = {
+export const value = {
     name: "value, controlled",
     args: {
-        handleChange: (0, test_1.fn)(),
+        handleChange: fn(),
     },
-    render: (args) => (<TextField_1.default name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
+    render: (args) => (<TextField name="test-name" value="value" onChange={args.handleChange} inputAttributes={{ "aria-label": "Label" }}/>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toHaveValue("value");
+        expect(input).toHaveValue("value");
         input.focus();
-        await test_1.userEvent.keyboard("2");
-        (0, test_1.expect)(args.handleChange).toBeCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        await userEvent.keyboard("2");
+        expect(args.handleChange).toBeCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             name: "test-name",
             value: "value2",
-            event: test_1.expect.objectContaining({ target: input }),
+            event: expect.objectContaining({ target: input }),
         });
-        (0, test_1.expect)(input).toHaveValue("value");
+        expect(input).toHaveValue("value");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<TextField_1.default className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
+			<TextField className="test-classname" attributes={{ id: "test-id" }} name="name" inputAttributes={{ id: "test-input-id", "aria-label": "Label" }}/>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(input).toHaveAttribute("id", "test-input-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("id", "test-input-id");
     },
 };
-exports.formControl = {
+export const formControl = {
     name: "test: form control",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="with helper">
-				<FormControl_1.default>
-					<FormControl_1.default.Label>Name</FormControl_1.default.Label>
-					<TextField_1.default name="name" placeholder="Enter your name"/>
-					<FormControl_1.default.Helper>Helper</FormControl_1.default.Helper>
-					<FormControl_1.default.Error>This field is required</FormControl_1.default.Error>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="with error">
-				<FormControl_1.default hasError>
-					<FormControl_1.default.Label>Name</FormControl_1.default.Label>
-					<TextField_1.default name="name" placeholder="Enter your name"/>
-					<FormControl_1.default.Error>This field is required</FormControl_1.default.Error>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="with helper">
+				<FormControl>
+					<FormControl.Label>Name</FormControl.Label>
+					<TextField name="name" placeholder="Enter your name"/>
+					<FormControl.Helper>Helper</FormControl.Helper>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+			<Example.Item title="with error">
+				<FormControl hasError>
+					<FormControl.Label>Name</FormControl.Label>
+					<TextField name="name" placeholder="Enter your name"/>
+					<FormControl.Error>This field is required</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
 };

package/dist/components/Theme/GlobalColorMode.d.ts

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

package/dist/components/Theme/GlobalColorMode.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import { disableTransitions, enableTransitions, onNextFrame } from "../../utilities/animation";
-import { GlobalColorModeContext } from "./Theme.context";
-import { getRootThemeEl } from "./Theme.utilities";
-import { useGlobalColorMode } from "./useTheme";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { disableTransitions, enableTransitions, onNextFrame } from "../../utilities/animation.js";
+import { GlobalColorModeContext } from "./Theme.context.js";
+import { getRootThemeEl } from "./Theme.utilities.js";
+import { useGlobalColorMode } from "./useTheme.js";
 const GlobalColorMode = (props) => {
     const { defaultMode, mode: passedMode, scopeRef, children } = props;
     const [mode, setMode] = React.useState(defaultMode);

package/dist/components/Theme/Theme.context.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
-import type * as T from "./Theme.types";
+import type * as T from "./Theme.types.js";
 export declare const ThemeContext: React.Context<T.ThemeContextData>;
 export declare const GlobalColorModeContext: React.Context<T.GlobalColorModeContextData>;

package/dist/components/Theme/Theme.d.ts

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

package/dist/components/Theme/Theme.js

@@ -2,10 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
-import { ThemeContext } from "./Theme.context";
-import { getRootThemeEl } from "./Theme.utilities";
-import { useGlobalColorMode, useTheme } from "./useTheme";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import { ThemeContext } from "./Theme.context.js";
+import { getRootThemeEl } from "./Theme.utilities.js";
+import { useGlobalColorMode, useTheme } from "./useTheme.js";
 import s from "./Theme.module.css";
 const getThemeAttribute = (theme) => {
     if (typeof theme === "string")

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import * as G from "../../types/global";
+import * as G from "../../types/global.js";
 export type GlobalColorModeContextData = {
     mode: G.ColorMode;
     setMode: (mode: G.ColorMode) => void;

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

@@ -1,4 +1,4 @@
-export { default as GlobalColorMode } from "./GlobalColorMode";
-export { default, PrivateTheme } from "./Theme";
-export type { GlobalColorModeProps, Props as ThemeProps } from "./Theme.types";
-export { useTheme } from "./useTheme";
+export { default as GlobalColorMode } from "./GlobalColorMode.js";
+export { default, PrivateTheme } from "./Theme.js";
+export type { GlobalColorModeProps, Props as ThemeProps } from "./Theme.types.js";
+export { useTheme } from "./useTheme.js";

package/dist/components/Theme/index.js

@@ -1,3 +1,3 @@
-export { default as GlobalColorMode } from "./GlobalColorMode";
-export { default, PrivateTheme } from "./Theme";
-export { useTheme } from "./useTheme";
+export { default as GlobalColorMode } from "./GlobalColorMode.js";
+export { default, PrivateTheme } from "./Theme.js";
+export { useTheme } from "./useTheme.js";

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

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