reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,251 +1,245 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.className = exports.as = exports.auto = exports.areas = exports.itemLayout = exports.layout = exports.base = void 0;
-const test_1 = require("storybook/test");
-const Grid_1 = __importDefault(require("../../../components/Grid"));
-const View_1 = __importDefault(require("../../../components/View"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect } from "storybook/test";
+import Grid from "../../../components/Grid/index.js";
+import View from "../../../components/View/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Grid",
-    component: Grid_1.default,
+    component: Grid,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/grid",
         },
     },
 };
-exports.base = {
+export const base = {
     name: "gap, columnGap, rowGap, align, justify, maxWidth, width, height",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="gap: 2">
-				<Grid_1.default gap={2} columns={2}>
-					{[1, 2].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+    render: () => (<Example>
+			<Example.Item title="gap: 2">
+				<Grid gap={2} columns={2}>
+					{[1, 2].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="columnGap: 2, rowGap: 4">
-				<Grid_1.default columnGap={2} rowGap={4} columns={2}>
-					{[1, 2, 3, 4].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="columnGap: 2, rowGap: 4">
+				<Grid columnGap={2} rowGap={4} columns={2}>
+					{[1, 2, 3, 4].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="align: center">
-				<Grid_1.default gap={2} columns={2} align="center">
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="align: center">
+				<Grid gap={2} columns={2} align="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						1
-					</View_1.default>
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={8}>
+					</View>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={8}>
 						2
-					</View_1.default>
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="justify: center">
-				<Grid_1.default gap={2} columns="200px 200px" justify="center">
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					</View>
+				</Grid>
+			</Example.Item>
+			<Example.Item title="justify: center">
+				<Grid gap={2} columns="200px 200px" justify="center">
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						1
-					</View_1.default>
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					</View>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						2
-					</View_1.default>
-				</Grid_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</Grid>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="maxWidth: 400px">
-				<Grid_1.default gap={2} columns="200px 200px" maxWidth="400px">
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+			<Example.Item title="maxWidth: 400px">
+				<Grid gap={2} columns="200px 200px" maxWidth="400px">
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						1
-					</View_1.default>
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					</View>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						2
-					</View_1.default>
-				</Grid_1.default>
-			</storybook_1.Example.Item>
+					</View>
+				</Grid>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="width: 400px, height: 200px">
-				<Grid_1.default gap={2} columns={2} width="400px" height="200px">
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+			<Example.Item title="width: 400px, height: 200px">
+				<Grid gap={2} columns={2} width="400px" height="200px">
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						1
-					</View_1.default>
-					<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
+					</View>
+					<View backgroundColor="neutral-faded" borderRadius="medium" padding={4}>
 						2
-					</View_1.default>
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</View>
+				</Grid>
+			</Example.Item>
+		</Example>),
 };
-exports.layout = {
+export const layout = {
     name: "rows, columns",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="simple: 2 rows, 3 columns">
-				<Grid_1.default gap={4} columns={3} rows={2}>
-					{[1, 2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+    render: () => (<Example>
+			<Example.Item title="simple: 2 rows, 3 columns">
+				<Grid gap={4} columns={3} rows={2}>
+					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="columns template, 1fr 2fr 1fr">
-				<Grid_1.default gap={4} columns="1fr 2fr 1fr" rows={2}>
-					{[1, 2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="columns template, 1fr 2fr 1fr">
+				<Grid gap={4} columns="1fr 2fr 1fr" rows={2}>
+					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="rows template, 1fr 2fr">
-				<Grid_1.default gap={4} columns={3} rows="1fr 2fr">
-					{[1, 2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="rows template, 1fr 2fr">
+				<Grid gap={4} columns={3} rows="1fr 2fr">
+					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="responsive">
-				<Grid_1.default gap={4} columns={{ s: 3, m: "1fr 2fr 1fr" }} rows={{ s: 2, m: "1fr 2fr" }}>
-					{[1, 2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="responsive">
+				<Grid gap={4} columns={{ s: 3, m: "1fr 2fr 1fr" }} rows={{ s: 2, m: "1fr 2fr" }}>
+					{[1, 2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						</View>))}
+				</Grid>
+			</Example.Item>
+		</Example>),
 };
-exports.itemLayout = {
+export const itemLayout = {
     name: "colStart, colEnd, rowStart, rowEnd",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="column, start 1, end 3">
-				<Grid_1.default gap={4} columns={3} rows={2}>
-					<Grid_1.default.Item colStart={1} colEnd={3}>
-						<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+    render: () => (<Example>
+			<Example.Item title="column, start 1, end 3">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item colStart={1} colEnd={3}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
 							1
-						</View_1.default>
-					</Grid_1.default.Item>
-					{[2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="column, start 1, span 2">
-				<Grid_1.default gap={4} columns={3} rows={2}>
-					<Grid_1.default.Item colStart={1} colSpan={2}>
-						<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="column, start 1, span 2">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item colStart={1} colSpan={2}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
 							1
-						</View_1.default>
-					</Grid_1.default.Item>
-					{[2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
+						</View>))}
+				</Grid>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="row, start 1, end 3">
-				<Grid_1.default gap={4} columns={3} rows={2}>
-					<Grid_1.default.Item rowStart={1} rowEnd={3}>
-						<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+			<Example.Item title="row, start 1, end 3">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item rowStart={1} rowEnd={3}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
 							1
-						</View_1.default>
-					</Grid_1.default.Item>
-					{[2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
+						</View>))}
+				</Grid>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="row, start 1, span 2">
-				<Grid_1.default gap={4} columns={3} rows={2}>
-					<Grid_1.default.Item rowStart={1} rowSpan={2}>
-						<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+			<Example.Item title="row, start 1, span 2">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item rowStart={1} rowSpan={2}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
 							1
-						</View_1.default>
-					</Grid_1.default.Item>
-					{[2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
+						</View>))}
+				</Grid>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="responsive">
-				<Grid_1.default gap={4} columns={3} rows={2}>
-					<Grid_1.default.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>
-						<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+			<Example.Item title="responsive">
+				<Grid gap={4} columns={3} rows={2}>
+					<Grid.Item rowStart={1} rowSpan={{ s: 1, m: 2 }} colStart={1} colSpan={{ s: 1, m: 2 }}>
+						<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
 							1
-						</View_1.default>
-					</Grid_1.default.Item>
-					{[2, 3, 4, 5].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>
+					</Grid.Item>
+					{[2, 3, 4, 5].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						</View>))}
+				</Grid>
+			</Example.Item>
+		</Example>),
 };
-exports.areas = {
+export const areas = {
     name: "areas",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="simple: 2 rows, 3 columns">
-				<Grid_1.default gap={4} rows={2} areas={["a .", "a b"]}>
-					{["a", "b"].map((area) => (<Grid_1.default.Item area={area} key={area}>
-							<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
+    render: () => (<Example>
+			<Example.Item title="simple: 2 rows, 3 columns">
+				<Grid gap={4} rows={2} areas={["a .", "a b"]}>
+					{["a", "b"].map((area) => (<Grid.Item area={area} key={area}>
+							<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} height="100%">
 								{area}
-							</View_1.default>
-						</Grid_1.default.Item>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+							</View>
+						</Grid.Item>))}
+				</Grid>
+			</Example.Item>
+		</Example>),
 };
-exports.auto = {
+export const auto = {
     name: "autoFlow, autoColumns, autoRows",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="auto flow: column">
-				<Grid_1.default gap={4} autoFlow="column" rows={2} columns={2}>
-					{[1, 2, 3].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+    render: () => (<Example>
+			<Example.Item title="auto flow: column">
+				<Grid gap={4} autoFlow="column" rows={2} columns={2}>
+					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="auto rows">
-				<Grid_1.default gap={4} autoRows="100px" columns={2}>
-					{[1, 2, 3].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="auto rows">
+				<Grid gap={4} autoRows="100px" columns={2}>
+					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="auto columns">
-				<Grid_1.default gap={4} autoColumns="100px" autoFlow="column">
-					{[1, 2, 3].map((i) => (<View_1.default backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
+						</View>))}
+				</Grid>
+			</Example.Item>
+			<Example.Item title="auto columns">
+				<Grid gap={4} autoColumns="100px" autoFlow="column">
+					{[1, 2, 3].map((i) => (<View backgroundColor="neutral-faded" borderRadius="medium" padding={4} key={i}>
 							{i}
-						</View_1.default>))}
-				</Grid_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						</View>))}
+				</Grid>
+			</Example.Item>
+		</Example>),
 };
-exports.as = {
+export const as = {
     name: "as",
-    render: () => (<Grid_1.default as="ul">
-			<Grid_1.default.Item as="li">Content</Grid_1.default.Item>
-		</Grid_1.default>),
+    render: () => (<Grid as="ul">
+			<Grid.Item as="li">Content</Grid.Item>
+		</Grid>),
     play: ({ canvas }) => {
         const ul = canvas.getByRole("list");
         const li = canvas.getByRole("listitem");
-        (0, test_1.expect)(ul).toBeInTheDocument();
-        (0, test_1.expect)(li).toBeInTheDocument();
+        expect(ul).toBeInTheDocument();
+        expect(li).toBeInTheDocument();
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Grid_1.default className="test-class" attributes={{ id: "test-id" }}>
-				<Grid_1.default.Item className="test-item-class" attributes={{ id: "test-item-id" }}>
+			<Grid className="test-class" attributes={{ id: "test-id" }}>
+				<Grid.Item className="test-item-class" attributes={{ id: "test-item-id" }}>
 					Content
-				</Grid_1.default.Item>
-			</Grid_1.default>
+				</Grid.Item>
+			</Grid>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
         const item = root?.firstChild;
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
-        (0, test_1.expect)(root).toHaveClass("test-class");
-        (0, test_1.expect)(item).toHaveAttribute("id", "test-item-id");
-        (0, test_1.expect)(item).toHaveClass("test-item-class");
+        expect(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-class");
+        expect(item).toHaveAttribute("id", "test-item-id");
+        expect(item).toHaveClass("test-item-class");
     },
 };

package/dist/components/Hidden/Hidden.d.ts

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

package/dist/components/Hidden/Hidden.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import { responsiveClassNames } from "../../utilities/props";
+import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Hidden.module.css";
 const Hidden = (props) => {
     const { as: TagName = "div", children, visibility, hide } = props;

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

@@ -1,5 +1,5 @@
 import type React from "react";
-import type * as G from "../../types/global";
+import type * as G from "../../types/global.js";
 export type Props = {
     /** Pick at which viewport sizes to hide the children*/
     hide?: G.Responsive<boolean>;

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

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

package/dist/components/Hidden/index.js

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

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

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

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

@@ -1,54 +1,48 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.as = exports.visibility = void 0;
-const test_1 = require("storybook/test");
-const Hidden_1 = __importDefault(require("../../../components/Hidden"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import { expect } from "storybook/test";
+import Hidden from "../../../components/Hidden/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Utility components/Hidden",
-    component: Hidden_1.default,
+    component: Hidden,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/utilities/hidden",
         },
     },
 };
-exports.visibility = {
+export const visibility = {
     name: "visibility",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="hide: always">
-				<Hidden_1.default hide={true}>Content</Hidden_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="shown on s">
-				<Hidden_1.default hide={{ s: false, m: true }}>Content</Hidden_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="shown on l/xl">
-				<Hidden_1.default hide={{ s: true, l: false }}>Content</Hidden_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="shown on m/l/xl">
-				<Hidden_1.default hide={{ s: true, m: false }}>Content</Hidden_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="shown on m">
-				<Hidden_1.default hide={{ s: true, m: false, l: true }}>Content</Hidden_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="shown on s/xl">
-				<Hidden_1.default hide={{ s: false, m: true, xl: false }}>Content</Hidden_1.default>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="hide: always, visibility">
-				<Hidden_1.default hide visibility>
+    render: () => (<Example>
+			<Example.Item title="hide: always">
+				<Hidden hide={true}>Content</Hidden>
+			</Example.Item>
+			<Example.Item title="shown on s">
+				<Hidden hide={{ s: false, m: true }}>Content</Hidden>
+			</Example.Item>
+			<Example.Item title="shown on l/xl">
+				<Hidden hide={{ s: true, l: false }}>Content</Hidden>
+			</Example.Item>
+			<Example.Item title="shown on m/l/xl">
+				<Hidden hide={{ s: true, m: false }}>Content</Hidden>
+			</Example.Item>
+			<Example.Item title="shown on m">
+				<Hidden hide={{ s: true, m: false, l: true }}>Content</Hidden>
+			</Example.Item>
+			<Example.Item title="shown on s/xl">
+				<Hidden hide={{ s: false, m: true, xl: false }}>Content</Hidden>
+			</Example.Item>
+			<Example.Item title="hide: always, visibility">
+				<Hidden hide visibility>
 					Content
-				</Hidden_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+				</Hidden>
+			</Example.Item>
+		</Example>),
 };
-exports.as = {
+export const as = {
     name: "as",
-    render: () => <Hidden_1.default as="span">Content</Hidden_1.default>,
+    render: () => <Hidden as="span">Content</Hidden>,
     play: ({ canvas }) => {
         const el = canvas.getByText("Content");
-        (0, test_1.expect)(el.tagName).toEqual("SPAN");
+        expect(el.tagName).toEqual("SPAN");
     },
 };

package/dist/components/HiddenInput/HiddenInput.d.ts

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

package/dist/components/HiddenInput/HiddenInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import { useCheckboxGroup } from "../../components/CheckboxGroup";
-import { useFormControl } from "../../components/FormControl";
-import { useRadioGroup } from "../../components/RadioGroup";
+import { useCheckboxGroup } from "../../components/CheckboxGroup/index.js";
+import { useFormControl } from "../../components/FormControl/index.js";
+import { useRadioGroup } from "../../components/RadioGroup/index.js";
 import s from "./HiddenInput.module.css";
 const HiddenInput = (props) => {
     const { type, value, className, onChange, attributes } = props;
@@ -11,15 +11,13 @@ const HiddenInput = (props) => {
     const radioGroup = useRadioGroup();
     const formControl = useFormControl();
     const name = checkboxGroup?.name ?? radioGroup?.name ?? props.name;
-    const disabled = formControl?.disabled ?? props.disabled ?? checkboxGroup?.disabled ?? radioGroup?.disabled;
+    const disabled = formControl?.disabled || props.disabled || checkboxGroup?.disabled || radioGroup?.disabled;
     const checked = (value && (checkboxGroup?.value?.includes(value) ?? radioGroup?.value === value)) ||
         props.checked;
     const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
     const handleChange = (event) => {
-        if (!name)
-            return;
         const { checked } = event.target;
-        const changeArgs = { name, value, checked, event };
+        const changeArgs = { name: name ?? "", value, checked, event };
         if (onChange)
             onChange(changeArgs);
         if (checkboxGroup?.onChange)

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

@@ -1,6 +1,6 @@
 import type { ClassName } from "@reshaped/utilities";
-import type * as G from "../../types/global";
-import type { Attributes } from "../../types/global";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Name of the input element */
     name?: string;

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

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

package/dist/components/HiddenInput/index.js

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