reshaped 4.0.3 → 4.1.0

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.testChangeSize = exports.testWithoutFocusable = exports.testScopedTheming = exports.testDynamicBounds = exports.testInsideModal = exports.testInsideScrollable = exports.testInsideSticky = exports.testInsideFixed = exports.contentAttributes = exports.instanceRef = exports.initialFocusRef = exports.positionRef = exports.containerRef = exports.disabled = exports.disableHideAnimation = exports.disableCloseOnOutsideClick = exports.disableContentHover = exports.contentMaxHeight = exports.contentZIndex = exports.contentShift = exports.contentGap = exports.width = exports.originCoordinates = exports.fallbackAdjustLayoutSize = exports.fallbackAdjustLayoutShift = exports.fallbackMinHeight = exports.fallbackAdjustLayout = exports.positionFallbacks = exports.modes = exports.activeFalse = exports.active = exports.defaultActive = exports.position = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const Flyout_1 = __importDefault(require("./.."));
-const Modal_1 = __importDefault(require("../../Modal"));
-const Select_1 = __importDefault(require("../../Select"));
-const Switch_1 = __importDefault(require("../../Switch"));
-const TextField_1 = __importDefault(require("../../TextField"));
-const Theme_1 = __importDefault(require("../../Theme"));
-const View_1 = __importDefault(require("../../View"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Flyout_1 = __importDefault(require("../../../components/Flyout"));
+const Modal_1 = __importDefault(require("../../../components/Modal"));
+const Select_1 = __importDefault(require("../../../components/Select"));
+const Switch_1 = __importDefault(require("../../../components/Switch"));
+const TextField_1 = __importDefault(require("../../../components/TextField"));
+const Theme_1 = __importDefault(require("../../../components/Theme"));
+const View_1 = __importDefault(require("../../../components/View"));
 const helpers_1 = require("../../../utilities/helpers");
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = { title: "Utility components/Flyout" };

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.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
 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

@@ -4,118 +4,10 @@ export declare const Provider: React.Provider<T.Context>;
 export declare const useFormControlPrivate: () => T.Context;
 export declare const useFormControl: () => {
     attributes: {
-        defaultChecked?: boolean | undefined | undefined;
-        defaultValue?: string | number | readonly string[] | undefined;
-        suppressContentEditableWarning?: boolean | undefined | undefined;
-        suppressHydrationWarning?: boolean | undefined | undefined;
-        accessKey?: string | undefined | undefined;
-        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {}) | undefined;
-        autoFocus?: boolean | undefined | undefined;
-        className?: string | undefined | undefined;
-        contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
-        contextMenu?: string | undefined | undefined;
-        dir?: string | undefined | undefined;
-        draggable?: (boolean | "false" | "true") | undefined;
-        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
-        hidden?: boolean | undefined | undefined;
-        id?: string | undefined | undefined;
-        lang?: string | undefined | undefined;
-        nonce?: string | undefined | undefined;
-        slot?: string | undefined | undefined;
-        spellCheck?: (boolean | "false" | "true") | undefined;
-        style?: React.CSSProperties | undefined;
-        tabIndex?: number | undefined | undefined;
-        title?: string | undefined | undefined;
-        translate?: "yes" | "no" | undefined | undefined;
-        radioGroup?: string | undefined | undefined;
-        role?: React.AriaRole | undefined;
-        about?: string | undefined | undefined;
-        content?: string | undefined | undefined;
-        datatype?: string | undefined | undefined;
-        inlist?: any;
-        prefix?: string | undefined | undefined;
-        property?: string | undefined | undefined;
-        rel?: string | undefined | undefined;
-        resource?: string | undefined | undefined;
-        rev?: string | undefined | undefined;
-        typeof?: string | undefined | undefined;
-        vocab?: string | undefined | undefined;
-        autoCorrect?: string | undefined | undefined;
-        autoSave?: string | undefined | undefined;
-        color?: string | undefined | undefined;
-        itemProp?: string | undefined | undefined;
-        itemScope?: boolean | undefined | undefined;
-        itemType?: string | undefined | undefined;
-        itemID?: string | undefined | undefined;
-        itemRef?: string | undefined | undefined;
-        results?: number | undefined | undefined;
-        security?: string | undefined | undefined;
-        unselectable?: "on" | "off" | undefined | undefined;
-        popover?: "" | "auto" | "manual" | "hint" | undefined | undefined;
-        popoverTargetAction?: "toggle" | "show" | "hide" | undefined | undefined;
-        popoverTarget?: string | undefined | undefined;
-        inert?: boolean | undefined | undefined;
-        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined | undefined;
-        is?: string | undefined | undefined;
-        exportparts?: string | undefined | undefined;
-        part?: string | undefined | undefined;
-        "aria-activedescendant"?: string | undefined | undefined;
-        "aria-atomic"?: (boolean | "false" | "true") | undefined;
-        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined | undefined;
-        "aria-braillelabel"?: string | undefined | undefined;
-        "aria-brailleroledescription"?: string | undefined | undefined;
-        "aria-busy"?: (boolean | "false" | "true") | undefined;
-        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-colcount"?: number | undefined | undefined;
-        "aria-colindex"?: number | undefined | undefined;
-        "aria-colindextext"?: string | undefined | undefined;
-        "aria-colspan"?: number | undefined | undefined;
-        "aria-controls"?: string | undefined | undefined;
-        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined | undefined;
-        "aria-describedby"?: string | undefined | undefined;
-        "aria-description"?: string | undefined | undefined;
-        "aria-details"?: string | undefined | undefined;
-        "aria-disabled"?: (boolean | "false" | "true") | undefined;
-        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined | undefined;
-        "aria-errormessage"?: string | undefined | undefined;
-        "aria-expanded"?: (boolean | "false" | "true") | undefined;
-        "aria-flowto"?: string | undefined | undefined;
-        "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined | undefined;
-        "aria-hidden"?: (boolean | "false" | "true") | undefined;
-        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined | undefined;
-        "aria-keyshortcuts"?: string | undefined | undefined;
-        "aria-label"?: string | undefined | undefined;
-        "aria-labelledby"?: string | undefined | undefined;
-        "aria-level"?: number | undefined | undefined;
-        "aria-live"?: "off" | "assertive" | "polite" | undefined | undefined;
-        "aria-modal"?: (boolean | "false" | "true") | undefined;
-        "aria-multiline"?: (boolean | "false" | "true") | undefined;
-        "aria-multiselectable"?: (boolean | "false" | "true") | undefined;
-        "aria-orientation"?: "horizontal" | "vertical" | undefined | undefined;
-        "aria-owns"?: string | undefined | undefined;
-        "aria-placeholder"?: string | undefined | undefined;
-        "aria-posinset"?: number | undefined | undefined;
-        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined | undefined;
-        "aria-readonly"?: (boolean | "false" | "true") | undefined;
-        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined | undefined;
-        "aria-required"?: (boolean | "false" | "true") | undefined;
-        "aria-roledescription"?: string | undefined | undefined;
-        "aria-rowcount"?: number | undefined | undefined;
-        "aria-rowindex"?: number | undefined | undefined;
-        "aria-rowindextext"?: string | undefined | undefined;
-        "aria-rowspan"?: number | undefined | undefined;
-        "aria-selected"?: (boolean | "false" | "true") | undefined;
-        "aria-setsize"?: number | undefined | undefined;
-        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined | undefined;
-        "aria-valuemax"?: number | undefined | undefined;
-        "aria-valuemin"?: number | undefined | undefined;
-        "aria-valuenow"?: number | undefined | undefined;
-        "aria-valuetext"?: string | undefined | undefined;
-        children?: React.ReactNode;
+        children?: React.ReactNode | undefined;
         dangerouslySetInnerHTML?: {
             __html: string | TrustedHTML;
-        } | undefined | undefined;
+        } | undefined;
         onCopy?: React.ClipboardEventHandler<HTMLElement> | undefined;
         onCopyCapture?: React.ClipboardEventHandler<HTMLElement> | undefined;
         onCut?: React.ClipboardEventHandler<HTMLElement> | undefined;
@@ -284,6 +176,114 @@ export declare const useFormControl: () => {
         onTransitionRunCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionStart?: React.TransitionEventHandler<HTMLElement> | undefined;
         onTransitionStartCapture?: React.TransitionEventHandler<HTMLElement> | undefined;
+        "aria-activedescendant"?: string | undefined;
+        "aria-atomic"?: ("false" | "true" | boolean) | undefined;
+        "aria-autocomplete"?: "none" | "inline" | "list" | "both" | undefined;
+        "aria-braillelabel"?: string | undefined;
+        "aria-brailleroledescription"?: string | undefined;
+        "aria-busy"?: ("false" | "true" | boolean) | undefined;
+        "aria-checked"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-colcount"?: number | undefined;
+        "aria-colindex"?: number | undefined;
+        "aria-colindextext"?: string | undefined;
+        "aria-colspan"?: number | undefined;
+        "aria-controls"?: string | undefined;
+        "aria-current"?: boolean | "false" | "true" | "page" | "step" | "location" | "date" | "time" | undefined;
+        "aria-describedby"?: string | undefined;
+        "aria-description"?: string | undefined;
+        "aria-details"?: string | undefined;
+        "aria-disabled"?: ("false" | "true" | boolean) | undefined;
+        "aria-dropeffect"?: "none" | "copy" | "execute" | "link" | "move" | "popup" | undefined;
+        "aria-errormessage"?: string | undefined;
+        "aria-expanded"?: ("false" | "true" | boolean) | undefined;
+        "aria-flowto"?: string | undefined;
+        "aria-grabbed"?: ("false" | "true" | boolean) | undefined;
+        "aria-haspopup"?: boolean | "false" | "true" | "menu" | "listbox" | "tree" | "grid" | "dialog" | undefined;
+        "aria-hidden"?: ("false" | "true" | boolean) | undefined;
+        "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
+        "aria-keyshortcuts"?: string | undefined;
+        "aria-label"?: string | undefined;
+        "aria-labelledby"?: string | undefined;
+        "aria-level"?: number | undefined;
+        "aria-live"?: "off" | "assertive" | "polite" | undefined;
+        "aria-modal"?: ("false" | "true" | boolean) | undefined;
+        "aria-multiline"?: ("false" | "true" | boolean) | undefined;
+        "aria-multiselectable"?: ("false" | "true" | boolean) | undefined;
+        "aria-orientation"?: "horizontal" | "vertical" | undefined;
+        "aria-owns"?: string | undefined;
+        "aria-placeholder"?: string | undefined;
+        "aria-posinset"?: number | undefined;
+        "aria-pressed"?: boolean | "false" | "mixed" | "true" | undefined;
+        "aria-readonly"?: ("false" | "true" | boolean) | undefined;
+        "aria-relevant"?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | undefined;
+        "aria-required"?: ("false" | "true" | boolean) | undefined;
+        "aria-roledescription"?: string | undefined;
+        "aria-rowcount"?: number | undefined;
+        "aria-rowindex"?: number | undefined;
+        "aria-rowindextext"?: string | undefined;
+        "aria-rowspan"?: number | undefined;
+        "aria-selected"?: ("false" | "true" | boolean) | undefined;
+        "aria-setsize"?: number | undefined;
+        "aria-sort"?: "none" | "ascending" | "descending" | "other" | undefined;
+        "aria-valuemax"?: number | undefined;
+        "aria-valuemin"?: number | undefined;
+        "aria-valuenow"?: number | undefined;
+        "aria-valuetext"?: string | undefined;
+        defaultChecked?: boolean | undefined;
+        defaultValue?: string | number | readonly string[] | undefined;
+        suppressContentEditableWarning?: boolean | undefined;
+        suppressHydrationWarning?: boolean | undefined;
+        accessKey?: string | undefined;
+        autoCapitalize?: "off" | "none" | "on" | "sentences" | "words" | "characters" | undefined | (string & {});
+        autoFocus?: boolean | undefined;
+        className?: string | undefined;
+        contentEditable?: ("false" | "true" | boolean) | "inherit" | "plaintext-only" | undefined;
+        contextMenu?: string | undefined;
+        dir?: string | undefined;
+        draggable?: ("false" | "true" | boolean) | undefined;
+        enterKeyHint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined;
+        hidden?: boolean | undefined;
+        id?: string | undefined;
+        lang?: string | undefined;
+        nonce?: string | undefined;
+        slot?: string | undefined;
+        spellCheck?: ("false" | "true" | boolean) | undefined;
+        style?: React.CSSProperties | undefined;
+        tabIndex?: number | undefined;
+        title?: string | undefined;
+        translate?: "yes" | "no" | undefined;
+        radioGroup?: string | undefined;
+        role?: React.AriaRole | undefined;
+        about?: string | undefined;
+        content?: string | undefined;
+        datatype?: string | undefined;
+        inlist?: any;
+        prefix?: string | undefined;
+        property?: string | undefined;
+        rel?: string | undefined;
+        resource?: string | undefined;
+        rev?: string | undefined;
+        typeof?: string | undefined;
+        vocab?: string | undefined;
+        autoCorrect?: string | undefined;
+        autoSave?: string | undefined;
+        color?: string | undefined;
+        itemProp?: string | undefined;
+        itemScope?: boolean | undefined;
+        itemType?: string | undefined;
+        itemID?: string | undefined;
+        itemRef?: string | undefined;
+        results?: number | undefined;
+        security?: string | undefined;
+        unselectable?: "on" | "off" | undefined;
+        popover?: "" | "auto" | "manual" | "hint" | undefined;
+        popoverTargetAction?: "toggle" | "show" | "hide" | undefined;
+        popoverTarget?: string | undefined;
+        inert?: boolean | undefined;
+        inputMode?: "none" | "text" | "tel" | "url" | "email" | "numeric" | "decimal" | "search" | undefined;
+        is?: string | undefined;
+        exportparts?: string | undefined;
+        part?: string | undefined;
     } & {
         id: string;
     };

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.js";
-import { Provider } from "./FormControl.context.js";
-import { getCaptionId } from "./FormControl.utilities.js";
+import useElementId from "../../hooks/useElementId";
+import { Provider } from "./FormControl.context";
+import { getCaptionId } from "./FormControl.utilities";
 import s from "./FormControl.module.css";
 const FormControl = (props) => {
     const { children, id: passedId, required, hasError, group, disabled, size, gap } = props;

package/dist/components/FormControl/FormControl.module.css

@@ -1 +1 @@
-.root{--rs-form-control-gap:1;--rs-form-control-gap-value:calc(var(--rs-form-control-gap) * var(--rs-unit-x1));border:none}.label{display:block;margin-bottom:var(--rs-form-control-gap-value)}.label:last-child{margin-bottom:0}.caption{display:block;margin-top:var(--rs-form-control-gap-value)}.caption+.caption{margin-top:0}.--size-large{--rs-form-control-gap:1.5}
+.root{--rs-form-control-gap:1;--rs-form-control-gap-value:calc(var(--rs-form-control-gap) * var(--rs-unit-x1));border:none}.label{display:block;margin-bottom:var(--rs-form-control-gap-value)}.label:last-child{margin-bottom:0}.caption{margin-top:var(--rs-form-control-gap-value);display:block}.caption+.caption{margin-top:0}.--size-large{--rs-form-control-gap:1.5}

package/dist/components/FormControl/FormControlCaption.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import Text from "../Text/index.js";
-import { useFormControlPrivate } from "./FormControl.context.js";
-import { getCaptionId } from "./FormControl.utilities.js";
+import Text from "../../components/Text";
+import { useFormControlPrivate } from "./FormControl.context";
+import { getCaptionId } from "./FormControl.utilities";
 import s from "./FormControl.module.css";
 const FormControlCaption = (props) => {
     const { children, variant, disabled } = props;

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.js";
-import FormControlCaption from "./FormControlCaption.js";
+import { useFormControlPrivate } from "./FormControl.context";
+import FormControlCaption from "./FormControlCaption";
 const FormControlError = (props) => {
     const { children } = props;
     const { hasError } = useFormControlPrivate();

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.js";
-import FormControlCaption from "./FormControlCaption.js";
+import { useFormControlPrivate } from "./FormControl.context";
+import FormControlCaption from "./FormControlCaption";
 const FormControlHelper = (props) => {
     const { children } = props;
     const { disabled } = useFormControlPrivate();

package/dist/components/FormControl/FormControlLabel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Text from "../Text/index.js";
-import { useFormControlPrivate } from "./FormControl.context.js";
+import Text from "../../components/Text";
+import { useFormControlPrivate } from "./FormControl.context";
 import s from "./FormControl.module.css";
 const FormControlLabel = (props) => {
     const { children } = props;

package/dist/components/FormControl/index.js

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

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

@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react-vite";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").FormControlProps> & {
+    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>;

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

@@ -5,11 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (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("./.."));
-const Radio_1 = __importDefault(require("../../Radio"));
-const RadioGroup_1 = __importDefault(require("../../RadioGroup"));
-const TextField_1 = __importDefault(require("../../TextField"));
-const View_1 = __importDefault(require("../../View"));
+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 = {
     title: "Utility components/FormControl",

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

@@ -1,10 +1,10 @@
 import type * as T from "./Grid.types";
-export declare const GridItem: {
-    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.ItemProps<As>): import("react").JSX.Element;
-    displayName: string;
-};
-declare const Grid: {
-    <As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react").JSX.Element;
-    displayName: string;
-};
+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;
+}
+declare function Grid<As extends keyof React.JSX.IntrinsicElements = "div">(props: T.Props<As>): import("react").JSX.Element;
+declare namespace Grid {
+    var displayName: string;
+}
 export default Grid;

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.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import { responsivePropDependency, responsiveVariables } from "../../utilities/props";
+import { resolveMixin } from "../../styles/mixin";
 import s from "./Grid.module.css";
 export const GridItem = (props) => {
     const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, 

package/dist/components/Grid/index.js

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

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

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

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (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("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Grid_1 = __importDefault(require("../../../components/Grid"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Utility components/Grid",

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.js";
+import { responsiveClassNames } from "../../utilities/props";
 import s from "./Hidden.module.css";
 const Hidden = (props) => {
     const { as: TagName = "div", children, visibility, hide } = props;

package/dist/components/Hidden/index.js

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

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("./..").HiddenProps>;
+    component: import("react").FC<import("../../../components/Hidden").HiddenProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.as = exports.visibility = void 0;
 const test_1 = require("storybook/test");
-const Hidden_1 = __importDefault(require("./.."));
+const Hidden_1 = __importDefault(require("../../../components/Hidden"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Utility components/Hidden",

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 "../CheckboxGroup/index.js";
-import { useFormControl } from "../FormControl/index.js";
-import { useRadioGroup } from "../RadioGroup/index.js";
+import { useCheckboxGroup } from "../../components/CheckboxGroup";
+import { useFormControl } from "../../components/FormControl";
+import { useRadioGroup } from "../../components/RadioGroup";
 import s from "./HiddenInput.module.css";
 const HiddenInput = (props) => {
     const { type, value, className, onChange, attributes } = props;

package/dist/components/HiddenInput/HiddenInput.module.css

@@ -1 +1 @@
-.root{border:0;height:1px;left:0;opacity:0;position:absolute;top:0;width:1px}
+.root{position:absolute;top:0;left:0;width:1px;height:1px;border:0;opacity:0}

package/dist/components/HiddenInput/index.js

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

package/dist/components/HiddenInput/tests/HiddenInput.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("./..").HiddenInputProps>;
+    component: import("react").FC<import("../../../components/HiddenInput").HiddenInputProps>;
     parameters: {
         iframe: {
             url: string;

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

@@ -6,12 +6,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.composition = exports.formControl = exports.radioGroup = exports.checkboxGroup = exports.attributesHandlers = exports.className = exports.disabled = exports.defaultChecked = exports.checked = exports.typeCheckbox = void 0;
 const react_1 = require("react");
 const test_1 = require("storybook/test");
-const Badge_1 = __importDefault(require("../../Badge"));
-const CheckboxGroup_1 = __importDefault(require("../../CheckboxGroup"));
-const FormControl_1 = __importDefault(require("../../FormControl"));
-const HiddenInput_1 = __importDefault(require("./.."));
-const RadioGroup_1 = __importDefault(require("../../RadioGroup"));
-const View_1 = __importDefault(require("../../View"));
+const Badge_1 = __importDefault(require("../../../components/Badge"));
+const CheckboxGroup_1 = __importDefault(require("../../../components/CheckboxGroup"));
+const FormControl_1 = __importDefault(require("../../../components/FormControl"));
+const HiddenInput_1 = __importDefault(require("../../../components/HiddenInput"));
+const RadioGroup_1 = __importDefault(require("../../../components/RadioGroup"));
+const View_1 = __importDefault(require("../../../components/View"));
 const Example_1 = __importDefault(require("../../../utilities/storybook/Example"));
 exports.default = {
     title: "Utility components/HiddenInput",

package/dist/components/HiddenVisually/HiddenVisually.module.css

@@ -1 +1 @@
-.root{clip-path:inset(1px);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}
+.root{width:1px;height:1px;clip-path:inset(1px);white-space:nowrap;overflow:hidden;position:absolute}

package/dist/components/HiddenVisually/index.js

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

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

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

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.children = exports.visibility = void 0;
 const test_1 = require("storybook/test");
-const HiddenVisually_1 = __importDefault(require("./.."));
+const HiddenVisually_1 = __importDefault(require("../../../components/HiddenVisually"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Utility components/HiddenVisually",

package/dist/components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import { resolveMixin } from "../../styles/mixin.js";
+import { resolveMixin } from "../../styles/mixin";
 import s from "./Icon.module.css";
 const Icon = (props) => {
     const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;

package/dist/components/Icon/Icon.module.css

@@ -1 +1 @@
-.root{align-items:center;aspect-ratio:1;display:flex;justify-content:center;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;height:100%;min-width:100%;width:auto}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}
+.root{display:flex;justify-content:center;align-items:center;aspect-ratio:1;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;min-width:100%;height:100%;width:auto}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}

package/dist/components/Icon/index.js

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

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

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

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

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.render = exports.className = exports.autoWidth = exports.color = exports.size = void 0;
 const test_1 = require("storybook/test");
-const Icon_1 = __importDefault(require("./.."));
-const Text_1 = __importDefault(require("../../Text"));
-const View_1 = __importDefault(require("../../View"));
+const Icon_1 = __importDefault(require("../../../components/Icon"));
+const Text_1 = __importDefault(require("../../../components/Text"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 const Mic_1 = __importDefault(require("../../../icons/Mic"));
 const Zap_1 = __importDefault(require("../../../icons/Zap"));