reshaped 4.2.0 → 4.3.0-canary.1

package/dist/components/Flyout/useFlyout.d.ts

@@ -1,5 +1,5 @@
 import { type Coordinates } from "@reshaped/utilities/internal";
-import type * as T from "./Flyout.types";
+import type * as T from "./Flyout.types.js";
 type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinHeight" | "contentGap" | "contentShift" | "onClose"> & {
     fallbackPositions?: T.Position[];
     container?: HTMLElement | null;

package/dist/components/Flyout/useFlyout.js

@@ -1,6 +1,6 @@
 import { useCallback, useMemo, useRef, useState } from "react";
 import { Flyout } from "@reshaped/utilities";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const useFlyout = (args) => {
     const { triggerElRef, flyoutElRef, triggerCoordinatesRef, contentGap, contentShift, onClose, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinHeight, width, container, } = options;

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

@@ -1,5 +1,5 @@
 import React from "react";
-import type * as T from "./FormControl.types";
+import type * as T from "./FormControl.types.js";
 export declare const Provider: React.Provider<T.Context>;
 export declare const useFormControlPrivate: () => T.Context;
 export declare const useFormControl: () => {
@@ -284,8 +284,6 @@ export declare const useFormControl: () => {
         is?: string | undefined;
         exportparts?: string | undefined;
         part?: string | undefined;
-    } & {
-        id: string;
     };
     required: boolean | undefined;
     hasError: boolean | undefined;

package/dist/components/FormControl/FormControl.d.ts

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

package/dist/components/FormControl/FormControl.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import useElementId from "../../hooks/useElementId";
-import { Provider } from "./FormControl.context";
-import { getCaptionId } from "./FormControl.utilities";
+import useElementId from "../../hooks/useElementId.js";
+import { Provider } from "./FormControl.context.js";
+import { getCaptionId } from "./FormControl.utilities.js";
 import s from "./FormControl.module.css";
 const FormControl = (props) => {
     const { children, id: passedId, required, hasError, group, disabled, size, gap } = props;
@@ -18,14 +18,23 @@ const FormControl = (props) => {
     ]
         .filter(Boolean)
         .join(" ");
-    const attributes = { id, "aria-describedby": describedby };
-    const errorRef = () => {
-        setErrorRendered(true);
-    };
-    const helperRef = () => {
-        setHelperRendered(true);
-    };
-    return (_jsx(WrapperTagName, { className: classNames(s.root, size && s["--size-large"]), style: { "--rs-form-control-gap": gap }, children: _jsx(Provider, { value: { required, hasError, errorRef, helperRef, attributes, group, disabled, size }, children: children }) }));
+    // Group fields are labelled and described by the fieldset, so they don't receive the attributes
+    const attributes = group
+        ? {}
+        : {
+            id,
+            "aria-describedby": describedby || undefined,
+            "aria-invalid": hasError || undefined,
+            "aria-required": required || undefined,
+        };
+    // Stable refs, so they're only called when the captions mount and unmount
+    const errorRef = React.useCallback((el) => {
+        setErrorRendered(!!el);
+    }, []);
+    const helperRef = React.useCallback((el) => {
+        setHelperRendered(!!el);
+    }, []);
+    return (_jsx(WrapperTagName, { "aria-describedby": group ? describedby || undefined : undefined, className: classNames(s.root, size && s["--size-large"]), style: { "--rs-form-control-gap": gap }, children: _jsx(Provider, { value: { id, required, hasError, errorRef, helperRef, attributes, group, disabled, size }, children: children }) }));
 };
 FormControl.displayName = "FormControl";
 export default FormControl;

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

@@ -35,10 +35,9 @@ type Attributes = {
 export type Context = {
     required?: boolean;
     group?: boolean;
-    attributes: Attributes & {
-        id: string;
-    };
-    helperRef: () => void;
-    errorRef: () => void;
+    id: string;
+    attributes: Attributes;
+    helperRef: (el: HTMLElement | null) => void;
+    errorRef: (el: HTMLElement | null) => void;
 } & Pick<Props, "hasError" | "disabled" | "size">;
 export {};

package/dist/components/FormControl/FormControl.utilities.d.ts

@@ -1,2 +1,2 @@
-import type * as T from "./FormControl.types";
+import type * as T from "./FormControl.types.js";
 export declare const getCaptionId: (id: string, variant?: T.PrivateCaptionProps["variant"]) => string;

package/dist/components/FormControl/FormControlCaption.d.ts

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

package/dist/components/FormControl/FormControlCaption.js

@@ -1,15 +1,21 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import Text from "../../components/Text";
-import { useFormControlPrivate } from "./FormControl.context";
-import { getCaptionId } from "./FormControl.utilities";
+import Text from "../../components/Text/index.js";
+import { useFormControlPrivate } from "./FormControl.context.js";
+import { getCaptionId } from "./FormControl.utilities.js";
 import s from "./FormControl.module.css";
 const FormControlCaption = (props) => {
     const { children, variant, disabled } = props;
-    const { attributes, size, helperRef, errorRef } = useFormControlPrivate();
-    const id = getCaptionId(attributes.id, variant);
-    const color = variant === "error" ? "critical" : "neutral-faded";
-    const ref = variant === "error" ? errorRef : helperRef;
-    return (_jsx(Text, { as: "span", variant: size === "large" ? "body-2" : "caption-1", color: disabled && !variant ? "disabled" : color, attributes: { id, role: color ? "alert" : undefined, "aria-disabled": disabled, ref }, className: s.caption, children: children }));
+    const { id: formControlId, size, helperRef, errorRef } = useFormControlPrivate();
+    const id = getCaptionId(formControlId, variant);
+    const isError = variant === "error";
+    const color = isError ? "critical" : "neutral-faded";
+    const ref = isError ? errorRef : helperRef;
+    return (_jsx(Text, { as: "span", variant: size === "large" ? "body-2" : "caption-1", color: disabled && !variant ? "disabled" : color, attributes: {
+            id,
+            "aria-live": isError ? "polite" : undefined,
+            "aria-disabled": disabled,
+            ref,
+        }, className: s.caption, children: children }));
 };
 export default FormControlCaption;

package/dist/components/FormControl/FormControlError.d.ts

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

package/dist/components/FormControl/FormControlError.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useFormControlPrivate } from "./FormControl.context";
-import FormControlCaption from "./FormControlCaption";
+import { useFormControlPrivate } from "./FormControl.context.js";
+import FormControlCaption from "./FormControlCaption.js";
 const FormControlError = (props) => {
     const { children } = props;
     const { hasError } = useFormControlPrivate();

package/dist/components/FormControl/FormControlHelper.d.ts

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

package/dist/components/FormControl/FormControlHelper.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useFormControlPrivate } from "./FormControl.context";
-import FormControlCaption from "./FormControlCaption";
+import { useFormControlPrivate } from "./FormControl.context.js";
+import FormControlCaption from "./FormControlCaption.js";
 const FormControlHelper = (props) => {
     const { children } = props;
     const { disabled } = useFormControlPrivate();

package/dist/components/FormControl/FormControlLabel.d.ts

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

package/dist/components/FormControl/FormControlLabel.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Text from "../../components/Text";
-import { useFormControlPrivate } from "./FormControl.context";
+import Text from "../../components/Text/index.js";
+import { useFormControlPrivate } from "./FormControl.context.js";
 import s from "./FormControl.module.css";
 const FormControlLabel = (props) => {
     const { children } = props;
-    const { attributes, required, group, disabled, size } = useFormControlPrivate();
-    const id = `${attributes.id}-label`;
+    const { id: formControlId, required, group, disabled, size } = useFormControlPrivate();
+    const id = `${formControlId}-label`;
     const TagName = group ? "legend" : "label";
-    return (_jsxs(Text, { variant: size === "large" ? "body-1" : "body-2", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, "aria-disabled": disabled, children: [_jsx(TagName, { id: id, htmlFor: group ? undefined : attributes.id, children: children }), required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] }));
+    return (_jsxs(Text, { variant: size === "large" ? "body-1" : "body-2", weight: "medium", className: s.label, color: disabled ? "disabled" : undefined, "aria-disabled": disabled, children: [_jsx(TagName, { id: id, htmlFor: group ? undefined : formControlId, children: children }), required && (_jsx(Text, { color: disabled ? "disabled" : "critical", as: "span", children: "*" }))] }));
 };
 FormControlLabel.displayName = "FormControl.Label";
 export default FormControlLabel;

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

@@ -1,12 +1,12 @@
-import FormControl from "./FormControl";
-import FormControlError from "./FormControlError";
-import FormControlHelper from "./FormControlHelper";
-import FormControlLabel from "./FormControlLabel";
+import FormControl from "./FormControl.js";
+import FormControlError from "./FormControlError.js";
+import FormControlHelper from "./FormControlHelper.js";
+import FormControlLabel from "./FormControlLabel.js";
 declare const FormControlRoot: typeof FormControl & {
     Label: typeof FormControlLabel;
     Helper: typeof FormControlHelper;
     Error: typeof FormControlError;
 };
 export default FormControlRoot;
-export { useFormControl } from "./FormControl.context";
-export type { Props as FormControlProps } from "./FormControl.types";
+export { useFormControl } from "./FormControl.context.js";
+export type { Props as FormControlProps } from "./FormControl.types.js";

package/dist/components/FormControl/index.js

@@ -1,10 +1,10 @@
-import FormControl from "./FormControl";
-import FormControlError from "./FormControlError";
-import FormControlHelper from "./FormControlHelper";
-import FormControlLabel from "./FormControlLabel";
+import FormControl from "./FormControl.js";
+import FormControlError from "./FormControlError.js";
+import FormControlHelper from "./FormControlHelper.js";
+import FormControlLabel from "./FormControlLabel.js";
 const FormControlRoot = FormControl;
 FormControlRoot.Label = FormControlLabel;
 FormControlRoot.Helper = FormControlHelper;
 FormControlRoot.Error = FormControlError;
 export default FormControlRoot;
-export { useFormControl } from "./FormControl.context";
+export { useFormControl } from "./FormControl.context.js";

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

@@ -1,10 +1,10 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/FormControl").FormControlProps> & {
-        Label: import("react").FC<import("../FormControl.types").LabelProps>;
-        Helper: import("react").FC<import("../FormControl.types").CaptionProps>;
-        Error: import("react").FC<import("../FormControl.types").CaptionProps>;
+    component: import("react").FC<import("../../../components/FormControl/index.js").FormControlProps> & {
+        Label: import("react").FC<import("../FormControl.types.js").LabelProps>;
+        Helper: import("react").FC<import("../FormControl.types.js").CaptionProps>;
+        Error: import("react").FC<import("../FormControl.types.js").CaptionProps>;
     };
     parameters: {
         iframe: {

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

@@ -1,149 +1,150 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.group = exports.className = exports.composition = exports.required = exports.disabled = exports.size = exports.status = void 0;
-const test_1 = require("storybook/test");
-const FormControl_1 = __importDefault(require("../../../components/FormControl"));
-const Radio_1 = __importDefault(require("../../../components/Radio"));
-const RadioGroup_1 = __importDefault(require("../../../components/RadioGroup"));
-const TextField_1 = __importDefault(require("../../../components/TextField"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect } from "storybook/test";
+import FormControl from "../../../components/FormControl/index.js";
+import Radio from "../../../components/Radio/index.js";
+import RadioGroup from "../../../components/RadioGroup/index.js";
+import TextField from "../../../components/TextField/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/FormControl",
-    component: FormControl_1.default,
+    component: FormControl,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/form-control",
         },
     },
 };
-exports.status = {
+export const status = {
     name: "status",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="status: default">
-				<FormControl_1.default>
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<TextField_1.default name="name"/>
-					<FormControl_1.default.Helper>Caption</FormControl_1.default.Helper>
-					<FormControl_1.default.Error>Error</FormControl_1.default.Error>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="status: default">
+				<FormControl>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+					<FormControl.Error>Error</FormControl.Error>
+				</FormControl>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="status: error">
-				<FormControl_1.default hasError>
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<TextField_1.default name="name"/>
-					<FormControl_1.default.Helper>Caption</FormControl_1.default.Helper>
-					<FormControl_1.default.Error>Error</FormControl_1.default.Error>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="status: error">
+				<FormControl hasError>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+					<FormControl.Error>Error</FormControl.Error>
+				</FormControl>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const inputs = canvas.getAllByRole("textbox");
-        (0, test_1.expect)(inputs[0]).toHaveAccessibleName("Label");
-        (0, test_1.expect)(inputs[0]).toHaveAccessibleDescription("Caption");
-        (0, test_1.expect)(inputs[1]).toHaveAccessibleName("Label");
-        (0, test_1.expect)(inputs[1]).toHaveAccessibleDescription("Caption Error");
+        expect(inputs[0]).toHaveAccessibleName("Label");
+        expect(inputs[0]).toHaveAccessibleDescription("Caption");
+        expect(inputs[1]).toHaveAccessibleName("Label");
+        expect(inputs[1]).toHaveAccessibleDescription("Caption Error");
     },
 };
-exports.size = {
+export const size = {
     name: "size",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="size: medium">
-				<FormControl_1.default size="medium">
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<TextField_1.default name="name"/>
-					<FormControl_1.default.Helper>Caption</FormControl_1.default.Helper>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="size: medium">
+				<FormControl size="medium">
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="size: large">
-				<FormControl_1.default size="large">
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<TextField_1.default name="name" size="large"/>
-					<FormControl_1.default.Helper>Caption</FormControl_1.default.Helper>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="size: large">
+				<FormControl size="large">
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name" size="large"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled">
-				<FormControl_1.default disabled>
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<TextField_1.default name="name"/>
-					<FormControl_1.default.Helper>Caption</FormControl_1.default.Helper>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="disabled">
+				<FormControl disabled>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const input = canvas.getByRole("textbox");
-        (0, test_1.expect)(input).toBeDisabled();
+        expect(input).toBeDisabled();
     },
 };
-exports.required = {
+export const required = {
     name: "required",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="required">
-				<FormControl_1.default required>
-					<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-					<TextField_1.default name="name"/>
-					<FormControl_1.default.Helper>Caption</FormControl_1.default.Helper>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="required">
+				<FormControl required>
+					<FormControl.Label>Label</FormControl.Label>
+					<TextField name="name"/>
+					<FormControl.Helper>Caption</FormControl.Helper>
+				</FormControl>
+			</Example.Item>
+		</Example>),
 };
-exports.composition = {
+export const composition = {
     name: "test: composition",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="horizontal">
-				<FormControl_1.default>
-					<View_1.default direction="row" gap={10} align="center">
-						<View_1.default width="100px">
-							<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-						</View_1.default>
-						<View_1.default.Item grow>
-							<TextField_1.default name="name" placeholder="Enter value"/>
-						</View_1.default.Item>
-					</View_1.default>
-				</FormControl_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="horizontal">
+				<FormControl>
+					<View direction="row" gap={10} align="center">
+						<View width="100px">
+							<FormControl.Label>Label</FormControl.Label>
+						</View>
+						<View.Item grow>
+							<TextField name="name" placeholder="Enter value"/>
+						</View.Item>
+					</View>
+				</FormControl>
+			</Example.Item>
+		</Example>),
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
-    render: () => (<FormControl_1.default id="test-id" hasError>
-			<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-			<TextField_1.default name="name"/>
-			<FormControl_1.default.Helper>Caption</FormControl_1.default.Helper>
-			<FormControl_1.default.Error>Error</FormControl_1.default.Error>
-		</FormControl_1.default>),
+    render: () => (<FormControl id="test-id" hasError>
+			<FormControl.Label>Label</FormControl.Label>
+			<TextField name="name"/>
+			<FormControl.Helper>Caption</FormControl.Helper>
+			<FormControl.Error>Error</FormControl.Error>
+		</FormControl>),
     play: async ({ canvas }) => {
         const input = canvas.getByRole("textbox");
         const label = canvas.getByText("Label");
-        (0, test_1.expect)(input).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(input).toHaveAttribute("aria-describedby", `test-id-caption test-id-error`);
-        (0, test_1.expect)(label).toHaveAttribute("for", "test-id");
-        (0, test_1.expect)(label).toHaveAttribute("id", `test-id-label`);
+        expect(input).toHaveAttribute("id", "test-id");
+        expect(input).toHaveAttribute("aria-describedby", `test-id-caption test-id-error`);
+        expect(label).toHaveAttribute("for", "test-id");
+        expect(label).toHaveAttribute("id", `test-id-label`);
     },
 };
-exports.group = {
+export const group = {
     name: "group, gap",
-    render: () => (<FormControl_1.default group gap={2}>
-			<FormControl_1.default.Label>Label</FormControl_1.default.Label>
-			<RadioGroup_1.default name="name">
-				<View_1.default gap={2}>
-					<Radio_1.default value="1">One</Radio_1.default>
-					<Radio_1.default value="2">Two</Radio_1.default>
-				</View_1.default>
-			</RadioGroup_1.default>
-		</FormControl_1.default>),
+    render: () => (<FormControl group gap={2}>
+			<FormControl.Label>Label</FormControl.Label>
+			<RadioGroup name="name">
+				<View gap={2}>
+					<Radio value="1">One</Radio>
+					<Radio value="2">Two</Radio>
+				</View>
+			</RadioGroup>
+			<FormControl.Helper>Caption</FormControl.Helper>
+		</FormControl>),
     play: async ({ canvas }) => {
         const group = canvas.getByRole("group");
-        (0, test_1.expect)(group).toBeInTheDocument();
+        const radios = canvas.getAllByRole("radio");
+        expect(group).toHaveAccessibleDescription("Caption");
+        // Group fields don't receive the FormControl attributes
+        radios.forEach((radio) => {
+            expect(radio).not.toHaveAttribute("id");
+            expect(radio).not.toHaveAttribute("aria-describedby");
+        });
     },
 };

package/dist/components/Grid/Grid.d.ts

@@ -1,4 +1,4 @@
-import type * as T from "./Grid.types";
+import type * as T from "./Grid.types.js";
 export declare function GridItem<As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): import("react").JSX.Element;
 export declare namespace GridItem {
     var displayName: string;

package/dist/components/Grid/Grid.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import { responsivePropDependency, responsiveVariables } from "../../utilities/props";
-import { resolveMixin } from "../../styles/mixin";
+import { responsivePropDependency, responsiveVariables } from "../../utilities/props.js";
+import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Grid.module.css";
 export const GridItem = (props) => {
     const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, 

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

@@ -1,9 +1,9 @@
 import type { Property } from "csstype";
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type * as TStyles from "../../styles/types";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type * as TStyles from "../../styles/types.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Gap between grid items */
     gap?: G.Responsive<number>;

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

@@ -1,6 +1,6 @@
-import Grid, { GridItem } from "./Grid";
+import Grid, { GridItem } from "./Grid.js";
 declare const GridRoot: typeof Grid & {
     Item: typeof GridItem;
 };
 export default GridRoot;
-export type { ItemProps as GridItemProps, Props as GridProps } from "./Grid.types";
+export type { ItemProps as GridItemProps, Props as GridProps } from "./Grid.types.js";

package/dist/components/Grid/index.js

@@ -1,4 +1,4 @@
-import Grid, { GridItem } from "./Grid";
+import Grid, { GridItem } from "./Grid.js";
 const GridRoot = Grid;
 GridRoot.Item = GridItem;
 export default GridRoot;

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

@@ -2,10 +2,10 @@ import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
     component: {
-        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("../../../components/Grid").GridProps<As>): import("react").JSX.Element;
+        <As extends keyof React.JSX.IntrinsicElements = "div">(props: import("../../../components/Grid/index.js").GridProps<As>): import("react").JSX.Element;
         displayName: string;
     } & {
-        Item: typeof import("../Grid").GridItem;
+        Item: typeof import("../Grid.js").GridItem;
     };
     parameters: {
         iframe: {