reshaped 4.2.0 → 4.3.0-canary.1

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

@@ -1,283 +1,277 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.testSwipe = exports.testForm = exports.className = exports.rangeValue = exports.rangeDefaultValue = exports.value = exports.defaultValue = exports.renderValue = exports.disabled = exports.step = exports.minMax = exports.orientation = exports.base = void 0;
-const react_1 = __importDefault(require("react"));
-const test_1 = require("storybook/test");
-const Modal_1 = __importDefault(require("../../../components/Modal"));
-const Slider_1 = __importDefault(require("../../../components/Slider"));
-const View_1 = __importDefault(require("../../../components/View"));
-const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
-const storybook_1 = require("../../../utilities/storybook");
-exports.default = {
+import React from "react";
+import { expect, fireEvent, fn } from "storybook/test";
+import Modal from "../../../components/Modal/index.js";
+import Slider from "../../../components/Slider/index.js";
+import View from "../../../components/View/index.js";
+import useToggle from "../../../hooks/useToggle.js";
+import { Example } from "../../../utilities/storybook/index.js";
+export default {
     title: "Components/Slider",
-    component: Slider_1.default,
+    component: Slider,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/slider",
         },
     },
 };
-exports.base = {
+export const base = {
     name: "name, minName, maxName, range",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="single, name">
-				<Slider_1.default name="slider-single" defaultValue={30}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="range, name">
-				<Slider_1.default range name="slider-range" defaultMinValue={30} defaultMaxValue={85}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="range, minName, maxName">
-				<Slider_1.default range minName="slider-min" maxName="slider-max" defaultMinValue={30} defaultMaxValue={85}/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="single, name">
+				<Slider name="slider-single" defaultValue={30}/>
+			</Example.Item>
+			<Example.Item title="range, name">
+				<Slider range name="slider-range" defaultMinValue={30} defaultMaxValue={85}/>
+			</Example.Item>
+			<Example.Item title="range, minName, maxName">
+				<Slider range minName="slider-min" maxName="slider-max" defaultMinValue={30} defaultMaxValue={85}/>
+			</Example.Item>
 			<div style={{ height: 2000 }}/>
-		</storybook_1.Example>),
+		</Example>),
     play: ({ canvas }) => {
         const inputs = canvas.getAllByRole("slider");
-        (0, test_1.expect)(inputs[0]).toHaveAttribute("name", "slider-single");
-        (0, test_1.expect)(inputs[1]).toHaveAttribute("name", "slider-range");
-        (0, test_1.expect)(inputs[2]).toHaveAttribute("name", "slider-range");
-        (0, test_1.expect)(inputs[3]).toHaveAttribute("name", "slider-min");
-        (0, test_1.expect)(inputs[4]).toHaveAttribute("name", "slider-max");
+        expect(inputs[0]).toHaveAttribute("name", "slider-single");
+        expect(inputs[1]).toHaveAttribute("name", "slider-range");
+        expect(inputs[2]).toHaveAttribute("name", "slider-range");
+        expect(inputs[3]).toHaveAttribute("name", "slider-min");
+        expect(inputs[4]).toHaveAttribute("name", "slider-max");
     },
 };
-exports.orientation = {
+export const orientation = {
     name: "orientation",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="orientation: vertical">
-				<View_1.default height="200px">
-					<Slider_1.default range name="slider" defaultMinValue={30} defaultMaxValue={85} orientation="vertical"/>
-				</View_1.default>
-			</storybook_1.Example.Item>
-			<View_1.default height="2000px"/>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="orientation: vertical">
+				<View height="200px">
+					<Slider range name="slider" defaultMinValue={30} defaultMaxValue={85} orientation="vertical"/>
+				</View>
+			</Example.Item>
+			<View height="2000px"/>
+		</Example>),
 };
-exports.minMax = {
+export const minMax = {
     name: "min, max",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="min, max">
-				<Slider_1.default name="name" min={50} max={70} defaultValue={60}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="min, max, value < min">
-				<Slider_1.default name="name" min={50} max={70} defaultValue={30}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="min, max, value > max">
-				<Slider_1.default name="name" min={50} max={70} defaultValue={80}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="min, max">
+				<Slider name="name" min={50} max={70} defaultValue={60}/>
+			</Example.Item>
+			<Example.Item title="min, max, value < min">
+				<Slider name="name" min={50} max={70} defaultValue={30}/>
+			</Example.Item>
+			<Example.Item title="min, max, value > max">
+				<Slider name="name" min={50} max={70} defaultValue={80}/>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const inputs = canvas.getAllByRole("slider");
-        (0, test_1.expect)(inputs[0]).toHaveAttribute("min", "50");
-        (0, test_1.expect)(inputs[0]).toHaveAttribute("max", "70");
-        (0, test_1.expect)(inputs[0]).toHaveValue("60");
-        test_1.fireEvent.change(inputs[0], { target: { value: 30 } });
-        (0, test_1.expect)(inputs[0]).toHaveValue("50");
-        test_1.fireEvent.change(inputs[0], { target: { value: 80 } });
-        (0, test_1.expect)(inputs[0]).toHaveValue("70");
-        (0, test_1.expect)(inputs[1]).toHaveValue("50");
-        (0, test_1.expect)(inputs[2]).toHaveValue("70");
+        expect(inputs[0]).toHaveAttribute("min", "50");
+        expect(inputs[0]).toHaveAttribute("max", "70");
+        expect(inputs[0]).toHaveValue("60");
+        fireEvent.change(inputs[0], { target: { value: 30 } });
+        expect(inputs[0]).toHaveValue("50");
+        fireEvent.change(inputs[0], { target: { value: 80 } });
+        expect(inputs[0]).toHaveValue("70");
+        expect(inputs[1]).toHaveValue("50");
+        expect(inputs[2]).toHaveValue("70");
     },
 };
-exports.step = {
+export const step = {
     name: "step",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="step: 5">
-				<Slider_1.default name="slider" defaultValue={30} step={5}/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="step: 5">
+				<Slider name="slider" defaultValue={30} step={5}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="step: 5, defaultValue: 31, rounded down to 30">
-				<Slider_1.default name="slider" defaultValue={31} step={5}/>
-			</storybook_1.Example.Item>
+			<Example.Item title="step: 5, defaultValue: 31, rounded down to 30">
+				<Slider name="slider" defaultValue={31} step={5}/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="step: 0.01, float">
-				<Slider_1.default name="slider" defaultValue={30} step={0.01}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="step: 0.01, float">
+				<Slider name="slider" defaultValue={30} step={0.01}/>
+			</Example.Item>
+		</Example>),
     play: ({ canvas }) => {
         const inputs = canvas.getAllByRole("slider");
-        (0, test_1.expect)(inputs[0]).toHaveValue("30");
-        test_1.fireEvent.change(inputs[0], { target: { value: 31 } });
-        (0, test_1.expect)(inputs[0]).toHaveValue("30");
-        test_1.fireEvent.change(inputs[0], { target: { value: 34 } });
-        (0, test_1.expect)(inputs[0]).toHaveValue("35");
-        (0, test_1.expect)(inputs[1]).toHaveValue("30");
+        expect(inputs[0]).toHaveValue("30");
+        fireEvent.change(inputs[0], { target: { value: 31 } });
+        expect(inputs[0]).toHaveValue("30");
+        fireEvent.change(inputs[0], { target: { value: 34 } });
+        expect(inputs[0]).toHaveValue("35");
+        expect(inputs[1]).toHaveValue("30");
     },
 };
-exports.disabled = {
+export const disabled = {
     name: "disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled">
-				<Slider_1.default name="slider" defaultValue={30} disabled/>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="disabled">
+				<Slider name="slider" defaultValue={30} disabled/>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="disabled, range">
-				<Slider_1.default name="slider" range defaultMinValue={30} defaultMaxValue={80} disabled/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="disabled, range">
+				<Slider name="slider" range defaultMinValue={30} defaultMaxValue={80} disabled/>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const inputs = canvas.getAllByRole("slider");
-        (0, test_1.expect)(inputs[0]).toBeDisabled();
-        (0, test_1.expect)(inputs[1]).toBeDisabled();
+        expect(inputs[0]).toBeDisabled();
+        expect(inputs[1]).toBeDisabled();
     },
 };
-exports.renderValue = {
+export const renderValue = {
     name: "renderValue",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="renderValue: $">
-				<Slider_1.default name="name" defaultValue={50} renderValue={(args) => `$${args.value}`}/>
-			</storybook_1.Example.Item>
-			<storybook_1.Example.Item title="renderValue: false">
-				<Slider_1.default name="name" defaultValue={50} renderValue={false}/>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+    render: () => (<Example>
+			<Example.Item title="renderValue: $">
+				<Slider name="name" defaultValue={50} renderValue={(args) => `$${args.value}`}/>
+			</Example.Item>
+			<Example.Item title="renderValue: false">
+				<Slider name="name" defaultValue={50} renderValue={false}/>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         const tooltip = canvas.getByText("$50");
         const hiddenTooltip = canvas.queryByText("50");
-        (0, test_1.expect)(tooltip).toBeInTheDocument();
-        (0, test_1.expect)(hiddenTooltip).not.toBeInTheDocument();
+        expect(tooltip).toBeInTheDocument();
+        expect(hiddenTooltip).not.toBeInTheDocument();
     },
 };
-exports.defaultValue = {
+export const defaultValue = {
     name: "defaultValue, onChange, onChangeCommit",
     args: {
-        handleChange: (0, test_1.fn)(),
-        handleChangeCommit: (0, test_1.fn)(),
+        handleChange: fn(),
+        handleChangeCommit: fn(),
     },
-    render: (args) => (<View_1.default paddingTop={10}>
-			<Slider_1.default name="test-name" defaultValue={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
-		</View_1.default>),
+    render: (args) => (<View paddingTop={10}>
+			<Slider name="test-name" defaultValue={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
+		</View>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("slider");
-        (0, test_1.expect)(input).toHaveValue("50");
-        test_1.fireEvent.change(input, { target: { value: 51 } });
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        (0, test_1.expect)(args.handleChangeCommit).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChangeCommit).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        (0, test_1.expect)(input).toHaveValue("51");
+        expect(input).toHaveValue("50");
+        fireEvent.change(input, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
+        expect(args.handleChangeCommit).toHaveBeenCalledTimes(1);
+        expect(args.handleChangeCommit).toHaveBeenCalledWith({ value: 51, name: "test-name" });
+        expect(input).toHaveValue("51");
     },
 };
-exports.value = {
+export const value = {
     name: "value, onChange, onChangeCommit",
     args: {
-        handleChange: (0, test_1.fn)(),
-        handleChangeCommit: (0, test_1.fn)(),
+        handleChange: fn(),
+        handleChangeCommit: fn(),
     },
-    render: (args) => (<View_1.default paddingTop={10}>
-			<Slider_1.default name="test-name" value={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
-		</View_1.default>),
+    render: (args) => (<View paddingTop={10}>
+			<Slider name="test-name" value={50} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
+		</View>),
     play: async ({ canvas, args }) => {
         const input = canvas.getByRole("slider");
-        (0, test_1.expect)(input).toHaveValue("50");
-        test_1.fireEvent.change(input, { target: { value: 51 } });
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        (0, test_1.expect)(args.handleChangeCommit).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChangeCommit).toHaveBeenCalledWith({ value: 51, name: "test-name" });
-        (0, test_1.expect)(input).toHaveValue("50");
+        expect(input).toHaveValue("50");
+        fireEvent.change(input, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({ value: 51, name: "test-name" });
+        expect(args.handleChangeCommit).toHaveBeenCalledTimes(1);
+        expect(args.handleChangeCommit).toHaveBeenCalledWith({ value: 51, name: "test-name" });
+        expect(input).toHaveValue("50");
     },
 };
-exports.rangeDefaultValue = {
+export const rangeDefaultValue = {
     name: "range, defaultValue, onChange, onChangeCommit",
     args: {
-        handleChange: (0, test_1.fn)(),
-        handleChangeCommit: (0, test_1.fn)(),
+        handleChange: fn(),
+        handleChangeCommit: fn(),
     },
-    render: (args) => (<View_1.default paddingTop={10}>
-			<Slider_1.default range name="test-name" defaultMinValue={50} defaultMaxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
-		</View_1.default>),
+    render: (args) => (<View paddingTop={10}>
+			<Slider range name="test-name" defaultMinValue={50} defaultMaxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
+		</View>),
     play: async ({ canvas, args }) => {
         const [minInput, maxInput] = canvas.getAllByRole("slider");
-        (0, test_1.expect)(minInput).toHaveValue("50");
-        (0, test_1.expect)(maxInput).toHaveValue("70");
-        test_1.fireEvent.change(minInput, { target: { value: 51 } });
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
+        fireEvent.change(minInput, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             minValue: 51,
             maxValue: 70,
             name: "test-name",
             minName: "test-name",
             maxName: "test-name",
         });
-        (0, test_1.expect)(args.handleChangeCommit).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChangeCommit).toHaveBeenCalledWith({
+        expect(args.handleChangeCommit).toHaveBeenCalledTimes(1);
+        expect(args.handleChangeCommit).toHaveBeenCalledWith({
             minValue: 51,
             maxValue: 70,
             name: "test-name",
             minName: "test-name",
             maxName: "test-name",
         });
-        (0, test_1.expect)(minInput).toHaveValue("51");
-        (0, test_1.expect)(maxInput).toHaveValue("70");
+        expect(minInput).toHaveValue("51");
+        expect(maxInput).toHaveValue("70");
     },
 };
-exports.rangeValue = {
+export const rangeValue = {
     name: "range, value, onChange, onChangeCommit, minName, maxName",
     args: {
-        handleChange: (0, test_1.fn)(),
-        handleChangeCommit: (0, test_1.fn)(),
+        handleChange: fn(),
+        handleChangeCommit: fn(),
     },
-    render: (args) => (<View_1.default paddingTop={10}>
-			<Slider_1.default range minName="test-name-min" maxName="test-name-max" minValue={50} maxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
-		</View_1.default>),
+    render: (args) => (<View paddingTop={10}>
+			<Slider range minName="test-name-min" maxName="test-name-max" minValue={50} maxValue={70} onChange={args.handleChange} onChangeCommit={args.handleChangeCommit}/>
+		</View>),
     play: async ({ canvas, args }) => {
         const [minInput, maxInput] = canvas.getAllByRole("slider");
-        (0, test_1.expect)(minInput).toHaveValue("50");
-        (0, test_1.expect)(maxInput).toHaveValue("70");
-        test_1.fireEvent.change(minInput, { target: { value: 51 } });
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChange).toHaveBeenCalledWith({
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
+        fireEvent.change(minInput, { target: { value: 51 } });
+        expect(args.handleChange).toHaveBeenCalledTimes(1);
+        expect(args.handleChange).toHaveBeenCalledWith({
             minValue: 51,
             maxValue: 70,
             minName: "test-name-min",
             maxName: "test-name-max",
         });
-        (0, test_1.expect)(args.handleChangeCommit).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleChangeCommit).toHaveBeenCalledWith({
+        expect(args.handleChangeCommit).toHaveBeenCalledTimes(1);
+        expect(args.handleChangeCommit).toHaveBeenCalledWith({
             minValue: 51,
             maxValue: 70,
             minName: "test-name-min",
             maxName: "test-name-max",
         });
-        (0, test_1.expect)(minInput).toHaveValue("50");
-        (0, test_1.expect)(maxInput).toHaveValue("70");
+        expect(minInput).toHaveValue("50");
+        expect(maxInput).toHaveValue("70");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Slider_1.default name="name" className="test-classname" attributes={{ id: "test-id" }}/>
+			<Slider name="name" className="test-classname" attributes={{ id: "test-id" }}/>
 		</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");
     },
 };
-exports.testForm = {
+export const testForm = {
     name: "test: form onChange",
     args: {
-        handleFormChange: (0, test_1.fn)(),
-        handleFormInit: (0, test_1.fn)(),
+        handleFormChange: fn(),
+        handleFormInit: fn(),
     },
     render: (args) => {
-        const formRef = react_1.default.useRef(null);
-        const [data, setData] = react_1.default.useState([]);
+        const formRef = React.useRef(null);
+        const [data, setData] = React.useState([]);
         const handleChange = (e) => {
             const formData = new FormData(e.currentTarget);
             const nextState = [...formData.entries()];
             args.handleFormChange({ formData: nextState });
             setData(nextState);
         };
-        return (<View_1.default paddingTop={10} gap={4}>
+        return (<View paddingTop={10} gap={4}>
 				<form onChange={handleChange} ref={formRef}>
-					<Slider_1.default range minName="slider-min" maxName="slider-max" defaultMinValue={30} defaultMaxValue={50}/>
+					<Slider range minName="slider-min" maxName="slider-max" defaultMinValue={30} defaultMaxValue={50}/>
 				</form>
 
 				{data.map((v) => v.join(": ")).join(", ")}
-			</View_1.default>);
+			</View>);
     },
     play: async () => {
         /**
@@ -290,15 +284,15 @@ exports.testForm = {
          */
     },
 };
-exports.testSwipe = {
+export const testSwipe = {
     name: "test: prevents parent swipe",
     render: () => {
-        const toggle = (0, useToggle_1.default)(true);
-        return (<Modal_1.default active={toggle.active} onClose={toggle.deactivate} position="end">
-				<View_1.default gap={4}>
-					<Modal_1.default.Title>Modal</Modal_1.default.Title>
-					<Slider_1.default name="slider" defaultValue={30}/>
-				</View_1.default>
-			</Modal_1.default>);
+        const toggle = useToggle(true);
+        return (<Modal active={toggle.active} onClose={toggle.deactivate} position="end">
+				<View gap={4}>
+					<Modal.Title>Modal</Modal.Title>
+					<Slider name="slider" defaultValue={30}/>
+				</View>
+			</Modal>);
     },
 };

package/dist/components/Switch/Switch.d.ts

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

package/dist/components/Switch/Switch.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import { useFormControl } from "../../components/FormControl";
-import Text from "../../components/Text";
-import useElementId from "../../hooks/useElementId";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
+import { useFormControl } from "../../components/FormControl/index.js";
+import Text from "../../components/Text/index.js";
+import useElementId from "../../hooks/useElementId.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Switch.module.css";
 const Switch = (props) => {
     const { children, name, checked, size = "medium", reversed, defaultChecked, onChange, className, attributes, } = props;
@@ -22,7 +22,10 @@ const Switch = (props) => {
             checked: event.target.checked,
         });
     };
-    return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, id: id }), _jsxs("span", { className: s.area, "aria-hidden": "true", children: [_jsx("span", { className: s.hitbox }), _jsx("span", { className: s.thumb })] }), children && (_jsx(Text, { variant: responsivePropDependency(size, (value) => {
+    return (_jsxs("label", { ...attributes, className: rootClassNames, children: [_jsx("input", { type: "checkbox", 
+                // Native checkbox already exposes its checked state, so aria-checked isn't needed
+                // oxlint-disable-next-line jsx-a11y/role-has-required-aria-props
+                role: "switch", ...inputAttributes, className: s.input, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, id: id }), _jsxs("span", { className: s.area, "aria-hidden": "true", children: [_jsx("span", { className: s.hitbox }), _jsx("span", { className: s.thumb })] }), children && (_jsx(Text, { variant: responsivePropDependency(size, (value) => {
                     if (value === "large")
                         return "body-1";
                     if (value === "medium")

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

@@ -1,7 +1,7 @@
 import React from "react";
 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";
 type BaseProps = {
     /** Node for inserting children */
     children?: React.ReactNode;

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

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

package/dist/components/Switch/index.js

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

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

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