reshaped 4.0.2 → 4.1.0-canary.0

package/dist/components/Image/Image.js

@@ -2,7 +2,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 "./Image.module.css";
 const Image = (props) => {
     const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, outline, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;

package/dist/components/Image/Image.module.css

@@ -1 +1 @@
-.root{position:relative}.root .image{border-radius:inherit;height:100%;width:100%}.image{display:block;max-width:100%}.fallback{align-items:center;background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;justify-content:center}.--outline:after{border:1px solid var(--rs-color-border-neutral-faded);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.image--display-mode-cover{object-fit:cover!important}.image--display-mode-contain{object-fit:scale-down!important}
+.root{position:relative}.root .image{height:100%;width:100%;border-radius:inherit}.image{max-width:100%;display:block}.fallback{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;align-items:center;justify-content:center}.--outline:after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;border:1px solid var(--rs-color-border-neutral-faded)}.image--display-mode-cover{object-fit:cover!important}.image--display-mode-contain{object-fit:scale-down!important}

package/dist/components/Image/index.js

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

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.imageAttributes = exports.renderImage = exports.ratio = exports.fallback = exports.onError = exports.onLoad = exports.outline = exports.displayMode = exports.radius = exports.size = exports.src = void 0;
 const test_1 = require("storybook/test");
-const Icon_1 = __importDefault(require("../../Icon"));
-const View_1 = __importDefault(require("../../View"));
+const Icon_1 = __importDefault(require("../../../components/Icon"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 const Zap_1 = __importDefault(require("../../../icons/Zap"));
 const Image_1 = __importDefault(require("../Image"));

package/dist/components/Link/Link.d.ts

@@ -1,6 +1,6 @@
-import { type ActionableRef } from "../Actionable";
-declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "render" | "onClick" | "type" | "href" | "stopPropagation"> & {
-    icon?: import("../Icon").IconProps["svg"];
+import { type ActionableRef } from "../../components/Actionable";
+declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../../components/Actionable").ActionableProps, "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
+    icon?: import("../../components/Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";
 } & import("react").RefAttributes<ActionableRef>>;

package/dist/components/Link/Link.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../Actionable/index.js";
-import Icon from "../Icon/index.js";
+import Actionable from "../../components/Actionable";
+import Icon from "../../components/Icon";
 import s from "./Link.module.css";
 const Link = forwardRef((props, ref) => {
     const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, render, } = props;

package/dist/components/Link/Link.module.css

@@ -1 +1 @@
-.root{display:inline;text-underline-offset:calc(var(--rs-unit-x1) / 2)}.root.--color-primary{color:var(--rs-color-foreground-primary)}.root.--color-critical{color:var(--rs-color-foreground-critical)}.root.--color-positive{color:var(--rs-color-foreground-positive)}.root.--color-warning{color:var(--rs-color-foreground-warning)}.root.--color-inherit{color:inherit}.root.--variant-plain{opacity:1;transition:opacity var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.root.--variant-plain:hover:not(.--disabled){opacity:.8}}.root.--variant-underline{text-decoration:underline;text-decoration-color:currentcolor;transition:text-decoration-color var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.root.--variant-underline:hover:not(.--disabled){text-decoration-color:transparent}}.root.--disabled{color:var(--rs-color-foreground-disabled);opacity:1;text-decoration:none}.root.--with-icon{align-items:center;display:inline-flex;gap:round(down,calc(1em / 2.5),var(--rs-unit-x1))}
+.root{display:inline;text-underline-offset:calc(var(--rs-unit-x1) / 2)}.root.--color-primary{color:var(--rs-color-foreground-primary)}.root.--color-critical{color:var(--rs-color-foreground-critical)}.root.--color-positive{color:var(--rs-color-foreground-positive)}.root.--color-warning{color:var(--rs-color-foreground-warning)}.root.--color-inherit{color:inherit}.root.--variant-plain{transition:opacity var(--rs-duration-fast) var(--rs-easing-standard);opacity:1}@media (hover:hover) and (pointer:fine){.root.--variant-plain:hover:not(.--disabled){opacity:.8}}.root.--variant-underline{text-decoration:underline;text-decoration-color:currentcolor;transition:text-decoration-color var(--rs-duration-fast) var(--rs-easing-standard)}@media (hover:hover) and (pointer:fine){.root.--variant-underline:hover:not(.--disabled){text-decoration-color:transparent}}.root.--disabled{text-decoration:none;opacity:1;color:var(--rs-color-foreground-disabled)}.root.--with-icon{display:inline-flex;align-items:center;gap:round(down,calc(1em / 2.5),var(--rs-unit-x1))}

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

@@ -1,5 +1,5 @@
-import type { ActionableProps } from "../Actionable";
-import type { IconProps } from "../Icon";
+import type { ActionableProps } from "../../components/Actionable";
+import type { IconProps } from "../../components/Icon";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation" | "render"> & {
     /** Icon at the start position */
     icon?: IconProps["svg"];

package/dist/components/Link/index.js

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

package/dist/components/Link/tests/Link.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").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "render" | "type" | "onClick" | "href" | "stopPropagation"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
         icon?: import("../../Icon").IconProps["svg"];
         color?: "inherit" | "critical" | "primary" | "positive" | "warning";
         variant?: "plain" | "underline";

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.testMultilineInText = exports.className = exports.render = exports.disabled = exports.hrefOnClick = exports.onClick = exports.href = exports.icon = exports.color = exports.variant = void 0;
 const test_1 = require("storybook/test");
-const Link_1 = __importDefault(require("./.."));
-const Text_1 = __importDefault(require("../../Text"));
+const Link_1 = __importDefault(require("../../../components/Link"));
+const Text_1 = __importDefault(require("../../../components/Text"));
 const storybook_1 = require("../../../utilities/storybook");
 const Zap_1 = __importDefault(require("../../../icons/Zap"));
 exports.default = {

package/dist/components/Loader/Loader.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 "./Loader.module.css";
 const Loader = (props) => {
     const { size = "small", color = "primary", className, attributes } = props;

package/dist/components/Loader/Loader.module.css

@@ -1 +1 @@
-.root{animation:rs-reshaped-loader 2.2s cubic-bezier(.6,.3,.3,.9) infinite;display:block;height:var(--rs-loader-size);position:relative;width:var(--rs-loader-size)}.root:after,.root:before{background:var(--rs-loader-color);border-radius:50%;content:"";height:var(--rs-loader-stroke);position:absolute;top:50%;transform:translateY(-50%);width:var(--rs-loader-stroke);z-index:2}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%;content:"";inset:0;position:absolute}.inner:before{opacity:.28}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}@keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}@media (--rs-viewport-m ){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--m{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}@media (--rs-viewport-l ){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--l{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--xl{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}
+.root{position:relative;display:block;animation:rs-reshaped-loader 2.2s cubic-bezier(.6,.3,.3,.9) infinite;width:var(--rs-loader-size);height:var(--rs-loader-size)}.root:after,.root:before{content:"";background:var(--rs-loader-color);border-radius:50%;position:absolute;z-index:2;width:var(--rs-loader-stroke);height:var(--rs-loader-stroke);transform:translateY(-50%);top:50%}.root:before{left:0}.root:after{right:0}.inner:after,.inner:before{content:"";position:absolute;inset:0;border:var(--rs-loader-stroke) solid var(--rs-loader-color);border-radius:50%}.inner:before{opacity:.28}.inner:after{border-bottom-color:transparent;border-left-color:transparent;transform:rotate(-45deg)}.--color-inherit{--rs-loader-color:currentcolor}.--color-primary{--rs-loader-color:var(--rs-color-border-primary)}.--color-positive{--rs-loader-color:var(--rs-color-border-positive)}.--color-critical{--rs-loader-color:var(--rs-color-border-critical)}.--size-small{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}@keyframes rs-reshaped-loader{0%{transform:rotate(0deg)}50%{transform:rotate(540deg)}to{transform:rotate(3turn)}}@media (--rs-viewport-m ){.--size-small--m{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--m{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--m{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}@media (--rs-viewport-l ){.--size-small--l{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--l{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--l{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-loader-size:var(--rs-unit-x4);--rs-loader-stroke:2px}.--size-medium--xl{--rs-loader-size:var(--rs-unit-x6);--rs-loader-stroke:3px}.--size-large--xl{--rs-loader-size:var(--rs-unit-x10);--rs-loader-stroke:5px}}

package/dist/components/Loader/index.js

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

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

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

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

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.ariaLabel = exports.color = exports.size = void 0;
 const test_1 = require("storybook/test");
-const Loader_1 = __importDefault(require("./.."));
+const Loader_1 = __importDefault(require("../../../components/Loader"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Components/Loader",

package/dist/components/LoaderText/LoaderText.d.ts

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

package/dist/components/LoaderText/LoaderText.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import Text from "../../components/Text";
+import Icon from "../Icon";
+import s from "./LoaderText.module.css";
+const LoaderText = (props) => {
+    const { children, completedText, icon, completed = false, className, ...textProps } = props;
+    return (_jsxs(Text, { color: "neutral-faded", className: [s.root, className, !completed && s["--loading"]], ...textProps, children: [icon && _jsx(Icon, { svg: icon }), _jsxs("span", { className: s.container, children: [_jsx("span", { className: classNames(s.text, completed && !!completedText && s["--hidden"]), children: children }), completedText && (_jsx("span", { className: classNames(s.completedText, !completed && s["--hidden"]), children: completedText }))] })] }));
+};
+LoaderText.displayName = "LoaderText";
+export default LoaderText;

package/dist/components/LoaderText/LoaderText.module.css

@@ -0,0 +1 @@
+.root{display:inline-flex;align-items:center;gap:round(down,calc(1em / 2.5),var(--rs-unit-x1))}.container{display:inline-grid}.container>.completedText,.container>.text{grid-area:1/1}.text{background-image:linear-gradient(100deg,var(--rs-color-foreground-neutral-faded) 0 40%,var(--rs-color-white) 50%,var(--rs-color-foreground-neutral-faded) 60% 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}.completedText,.text{transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:opacity,transform}@media (prefers-reduced-motion){.completedText,.text{transition:none}}.--loading .text{animation:rs-loader-text-shimmer 2.5s linear infinite}@media (prefers-reduced-motion){.--loading .text{animation:none}}.root:has(.completedText) .text{opacity:0;transform:translateY(100%)}.root:has(.completedText) .completedText{opacity:1;transform:translateY(0)}.root:has(.completedText).--loading .text{opacity:1;transform:translateY(0)}.root:has(.completedText).--loading .completedText{opacity:0;transform:translateY(-100%)}@keyframes rs-loader-text-shimmer{0%{background-position:150% 0}50%{background-position:0 0}to{background-position:0 0}}

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

@@ -0,0 +1,10 @@
+import type { TextProps } from "../../components/Text";
+import type { IconProps } from "../Icon";
+export type Props = Pick<TextProps, "children" | "className" | "attributes" | "variant" | "weight"> & {
+    /** SVG component for the icon */
+    icon?: IconProps["svg"];
+    /** Text that cross-fades with the regular children once completed becomes true */
+    completedText?: TextProps["children"];
+    /** Mark the loader as completed, stopping the shimmer */
+    completed?: boolean;
+};

package/dist/components/LoaderText/LoaderText.types.js

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export { default } from "./LoaderText";
+export type { Props as LoaderTextProps } from "./LoaderText.types";

package/dist/components/LoaderText/index.js

@@ -0,0 +1 @@
+export { default } from "./LoaderText";

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

@@ -0,0 +1,12 @@
+import { StoryObj } from "@storybook/react-vite";
+declare const _default: {
+    title: string;
+    component: import("react").FC<import("../../../components/LoaderText").LoaderTextProps>;
+};
+export default _default;
+export declare const base: {
+    name: string;
+    render: () => import("react").JSX.Element;
+};
+export declare const completed: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,60 @@
+"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.completed = exports.base = void 0;
+const test_1 = require("storybook/test");
+const Actionable_1 = __importDefault(require("../../../components/Actionable"));
+const LoaderText_1 = __importDefault(require("../../../components/LoaderText"));
+const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
+const storybook_1 = require("../../../utilities/storybook");
+const Mic_1 = __importDefault(require("../../../icons/Mic"));
+exports.default = {
+    title: "Components/LoaderText",
+    component: LoaderText_1.default,
+};
+exports.base = {
+    name: "icon, completed",
+    render: () => {
+        return (<storybook_1.Example>
+				<storybook_1.Example.Item title="text only">
+					<LoaderText_1.default>Inspecting code</LoaderText_1.default>
+				</storybook_1.Example.Item>
+				<storybook_1.Example.Item title="with icon">
+					<LoaderText_1.default icon={Mic_1.default}>Recording audio</LoaderText_1.default>
+				</storybook_1.Example.Item>
+			</storybook_1.Example>);
+    },
+};
+exports.completed = {
+    name: "completed, completedText",
+    render: () => {
+        const completedToggle = (0, useToggle_1.default)();
+        return (<storybook_1.Example>
+				<storybook_1.Example.Item title="completed">
+					<LoaderText_1.default completed>Inspected 5 files</LoaderText_1.default>
+				</storybook_1.Example.Item>
+				<storybook_1.Example.Item title="completed toggle">
+					<Actionable_1.default onClick={completedToggle.toggle}>
+						<LoaderText_1.default completed={completedToggle.active} completedText="Recorded audio" icon={Mic_1.default}>
+							Recording audio
+						</LoaderText_1.default>
+					</Actionable_1.default>
+				</storybook_1.Example.Item>
+			</storybook_1.Example>);
+    },
+};
+exports.className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<LoaderText_1.default className="test-classname" attributes={{ id: "test-id" }}>
+				Loading
+			</LoaderText_1.default>
+		</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");
+    },
+};

package/dist/components/MenuItem/MenuItem.d.ts

@@ -1,8 +1,8 @@
-import { type ActionableRef } from "../Actionable";
+import { type ActionableRef } from "../../components/Actionable";
 import type * as T from "./MenuItem.types";
-declare const MenuItem: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "as" | "render" | "onClick" | "href" | "stopPropagation"> & {
+declare const MenuItem: import("react").ForwardRefExoticComponent<Pick<import("../../components/Actionable").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation"> & {
     color?: "neutral" | "critical" | "primary";
-    icon?: import("../Icon").IconProps["svg"];
+    icon?: import("../../components/Icon").IconProps["svg"];
     children: React.ReactNode;
     startSlot?: React.ReactNode;
     endSlot?: React.ReactNode;

package/dist/components/MenuItem/MenuItem.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../Actionable/index.js";
-import Icon from "../Icon/index.js";
-import View from "../View/index.js";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import Actionable from "../../components/Actionable";
+import Icon from "../../components/Icon";
+import View from "../../components/View";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
     const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", stopPropagation, as, render, className, attributes, } = props;

package/dist/components/MenuItem/MenuItem.module.css

@@ -1 +1 @@
-.root,button.root{background-color:var(--rs-menu-item-bg-color);border-radius:var(--rs-radius-medium);color:var(--rs-menu-item-color);display:block;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);padding:var(--rs-p-v) var(--rs-p-h);transition:background-color var(--rs-duration-rapid) var(--rs-easing-standard)}.root[role=option],button.root[role=option]{transition:none}[data-rs-keyboard] .root[role=option]:focus,[data-rs-keyboard] button.root[role=option]:focus{background-color:var(--rs-color-background-neutral-highlighted-faded);outline:none}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-rapid) var(--rs-easing-standard);transition-property:color}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-critical-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:var(--rs-color-background-critical-highlighted-faded)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:var(--rs-color-background-primary-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);letter-spacing:var(--rs-letter-spacing-body-1);line-height:var(--rs-line-height-body-1)}}
+.root,button.root{display:block;transition:background-color var(--rs-duration-rapid) var(--rs-easing-standard);padding:var(--rs-p-v) var(--rs-p-h);font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);color:var(--rs-menu-item-color);background-color:var(--rs-menu-item-bg-color);border-radius:var(--rs-radius-medium)}.root[role=option],button.root[role=option]{transition:none}[data-rs-keyboard] .root[role=option]:focus,[data-rs-keyboard] button.root[role=option]:focus{outline:none;background-color:var(--rs-color-background-neutral-highlighted-faded)}.icon{color:var(--rs-menu-item-icon-color,inherit)}.content,.icon{transition:var(--rs-duration-rapid) var(--rs-easing-standard);transition-property:color}.--size-small{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium,.--size-small{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-medium{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium)}.--size-large{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}.--color-neutral{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-neutral.--highlighted,.--color-neutral.--selected,.--color-neutral[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-neutral:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-critical{--rs-menu-item-color:var(--rs-color-foreground-critical)}.--color-critical.--highlighted,.--color-critical.--selected,.--color-critical[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-critical-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-critical:hover{--rs-menu-item-bg-color:var(--rs-color-background-critical-highlighted-faded)}}.--color-primary{--rs-menu-item-icon-color:var(--rs-color-foreground-neutral-faded)}.--color-primary.--highlighted,.--color-primary[data-rs-focus]{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}@media (hover:hover) and (pointer:fine){.--color-primary:hover{--rs-menu-item-bg-color:var(--rs-color-background-neutral-highlighted-faded)}}.--color-primary.--selected,.--color-primary.--selected:hover{--rs-menu-item-bg-color:var(--rs-color-background-primary-highlighted-faded);--rs-menu-item-color:var(--rs-color-foreground-primary);--rs-menu-item-icon-color:var(--rs-color-foreground-primary)}.--selected,.--selected:hover{cursor:default}.--disabled,.--disabled:hover{--rs-menu-item-color:var(--rs-color-foreground-disabled);--rs-menu-item-bg-color:none;--rs-menu-item-icon-color:var(--rs-color-foreground-disabled)}button.root{width:100%}.aligner button.root{box-sizing:initial}@media (--rs-viewport-m ){.--size-small--m{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--m,.--size-small--m{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-medium--m{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium)}.--size-large--m{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-l ){.--size-small--l{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--l,.--size-small--l{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-medium--l{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium)}.--size-large--l{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-p-v:var(--rs-unit-x1);--rs-p-h:var(--rs-unit-x1-5);--rs-menu-item-radius:var(--rs-radius-small)}.--size-medium--xl,.--size-small--xl{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2);letter-spacing:var(--rs-letter-spacing-body-2)}.--size-medium--xl{--rs-p-v:var(--rs-unit-x2);--rs-p-h:var(--rs-unit-x3);--rs-menu-item-radius:var(--rs-radius-medium)}.--size-large--xl{--rs-p-v:var(--rs-unit-x3);--rs-p-h:var(--rs-unit-x4);--rs-menu-item-radius:var(--rs-radius-medium);font-size:var(--rs-font-size-body-1);line-height:var(--rs-line-height-body-1);letter-spacing:var(--rs-letter-spacing-body-1)}}

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

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { ActionableProps } from "../Actionable";
-import type { IconProps } from "../Icon";
+import type { ActionableProps } from "../../components/Actionable";
+import type { IconProps } from "../../components/Icon";
 import type * as G from "../../types/global";
 import type { Attributes } from "../../types/global";
 export type Size = "small" | "medium" | "large";

package/dist/components/MenuItem/MenuItemAligner.d.ts

@@ -1,3 +1,3 @@
-import { type AlignerProps } from "../_private/Aligner";
+import { type AlignerProps } from "../../components/_private/Aligner";
 declare const MenuItemAligner: React.FC<AlignerProps>;
 export default MenuItemAligner;

package/dist/components/MenuItem/MenuItemAligner.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Aligner from "../_private/Aligner/index.js";
+import Aligner from "../../components/_private/Aligner";
 import s from "./MenuItem.module.css";
 const MenuItemAligner = (props) => {
     return (_jsx(Aligner, { ...props, side: props.side || "inline", className: [s.aligner, props.className] }));

package/dist/components/MenuItem/index.js

@@ -1,5 +1,5 @@
-import MenuItem from "./MenuItem.js";
-import MenuItemAligner from "./MenuItemAligner.js";
+import MenuItem from "./MenuItem";
+import MenuItemAligner from "./MenuItemAligner";
 const MenuItemRoot = MenuItem;
 MenuItemRoot.Aligner = MenuItemAligner;
 export default MenuItemRoot;

package/dist/components/MenuItem/tests/MenuItem.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").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "as" | "render" | "onClick" | "href" | "stopPropagation"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation"> & {
         color?: "neutral" | "critical" | "primary";
         icon?: import("../../Icon").IconProps["svg"];
         children: React.ReactNode;

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

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.alignerClassName = exports.className = exports.as = exports.disabled = exports.hrefOnClick = exports.onClick = exports.href = exports.aligner = exports.slots = exports.selected = exports.color = exports.size = void 0;
 const test_1 = require("storybook/test");
-const Badge_1 = __importDefault(require("../../Badge"));
-const MenuItem_1 = __importDefault(require("./.."));
-const Text_1 = __importDefault(require("../../Text"));
-const View_1 = __importDefault(require("../../View"));
+const Badge_1 = __importDefault(require("../../../components/Badge"));
+const MenuItem_1 = __importDefault(require("../../../components/MenuItem"));
+const Text_1 = __importDefault(require("../../../components/Text"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 const Zap_1 = __importDefault(require("../../../icons/Zap"));
 exports.default = {

package/dist/components/Modal/Modal.js

@@ -3,13 +3,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useCallback, createContext, useContext, useEffect, useMemo, useState, useRef, } from "react";
 import { classNames } from "@reshaped/utilities";
 import { enableScroll, disableScroll } from "@reshaped/utilities/internal";
-import Overlay from "../Overlay/index.js";
-import Text from "../Text/index.js";
-import useElementId from "../../hooks/useElementId.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
-import { responsiveClassNames, responsiveVariables } from "../../utilities/props.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import Overlay from "../../components/Overlay";
+import Text from "../../components/Text";
+import useElementId from "../../hooks/useElementId";
+import useHandlerRef from "../../hooks/useHandlerRef";
+import useResponsiveClientValue from "../../hooks/useResponsiveClientValue";
+import { responsiveClassNames, responsiveVariables } from "../../utilities/props";
+import { resolveMixin } from "../../styles/mixin";
 import s from "./Modal.module.css";
 const DRAG_THRESHOLD = 32;
 const DRAG_OPPOSITE_THRESHOLD = 100;

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);outline:none;overscroll-behavior:none;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;will-change:transform,opacity}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;overscroll-behavior:auto;position:relative;transform:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0)}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;overscroll-behavior:none;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;overscroll-behavior:auto;position:relative;transform:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0)}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;overscroll-behavior:none;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;overscroll-behavior:auto;position:relative;transform:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0)}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;overscroll-behavior:none;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;overscroll-behavior:auto;position:relative;transform:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0)}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;overscroll-behavior:none;position:absolute;transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;overscroll-behavior:none;position:absolute;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)}}
+.root{--rs-modal-container-width:100vw;--rs-modal-container-height:100vh;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;background:var(--rs-color-background-elevation-overlay);color:var(--rs-color-foreground-neutral);box-shadow:var(--rs-shadow-overlay);will-change:transform,opacity;outline:none;overscroll-behavior:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline)}.root.--contained{--rs-modal-container-width:100%;--rs-modal-container-height:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center.--active,[dir=rtl] .--position-center.--active{transform:translate(0);opacity:1}.--position-bottom{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{transform:translate(0);opacity:1}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{transform:translate(0);opacity:1}.--position-bottom--m{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--m{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{transform:translate(0);opacity:1}.--position-bottom--l{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--l{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{transform:translate(0);opacity:1}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:auto;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));max-height:none;margin:var(--rs-unit-x4);inset:0;position:relative;border-radius:var(--rs-radius-large);overflow:hidden;overscroll-behavior:auto;opacity:0;transform:translateY(var(--rs-unit-x4))}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{transform:translate(0);opacity:1}.--position-bottom--xl{--rs-modal-size-s:auto;width:100%;height:var(--rs-modal-size);max-width:100%;max-height:calc(var(--rs-modal-container-height) - var(--rs-unit-x4));margin:0;margin-top:var(--rs-unit-x4);inset:0;inset-block-start:auto;transform:translateY(100%);position:absolute;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;overflow:auto;overscroll-behavior:none;opacity:1}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-end:var(--rs-unit-x4);inset:0;inset-inline-end:auto;transform:translate(-100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px))}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);width:var(--rs-modal-size);height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-height:100%;margin:0;margin-inline-start:var(--rs-unit-x4);inset:0;inset-inline-start:auto;transform:translate(100%);position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:1}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px))}.--position-full-screen--xl{--rs-modal-size-s:100%;width:100%;height:100%;max-width:var(--rs-modal-container-width);max-height:100%;margin:0;inset:0;inset-block-start:auto;transform:translateY(var(--rs-unit-x4));position:absolute;border-radius:0;overflow:auto;overscroll-behavior:none;opacity:0}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{transform:translate(0);opacity:1}}

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { OverlayCloseReason, OverlayProps } from "../Overlay";
+import type { OverlayCloseReason, OverlayProps } from "../../components/Overlay";
 import type * as G from "../../types/global";
 import type { Attributes } from "../../types/global";
 export type Context = {

package/dist/components/Modal/index.js

@@ -1,4 +1,4 @@
-import Modal, { ModalSubtitle, ModalTitle } from "./Modal.js";
+import Modal, { ModalSubtitle, ModalTitle } from "./Modal";
 const ModalRoot = Modal;
 ModalRoot.Title = ModalTitle;
 ModalRoot.Subtitle = ModalSubtitle;

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

@@ -1,7 +1,7 @@
 import { StoryObj } from "@storybook/react-vite";
 import React from "react";
 import { fn } from "storybook/test";
-import { type ModalProps } from "./..";
+import { type ModalProps } from "../../../components/Modal";
 declare const _default: {
     title: string;
     component: React.FC<ModalProps> & {

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

@@ -6,14 +6,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.trapFocusEdgeCases = exports.edgeCases = exports.className = exports.handlers = exports.renderProps = exports.containerRef = exports.flags = exports.overlay = exports.composition = exports.overflow = exports.padding = exports.size = exports.position = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Button_1 = __importDefault(require("../../Button"));
-const Dismissible_1 = __importDefault(require("../../Dismissible"));
-const DropdownMenu_1 = __importDefault(require("../../DropdownMenu"));
-const Modal_1 = __importDefault(require("./.."));
-const Radio_1 = __importDefault(require("../../Radio"));
-const Switch_1 = __importDefault(require("../../Switch"));
-const TextField_1 = __importDefault(require("../../TextField"));
-const View_1 = __importDefault(require("../../View"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Dismissible_1 = __importDefault(require("../../../components/Dismissible"));
+const DropdownMenu_1 = __importDefault(require("../../../components/DropdownMenu"));
+const Modal_1 = __importDefault(require("../../../components/Modal"));
+const Radio_1 = __importDefault(require("../../../components/Radio"));
+const Switch_1 = __importDefault(require("../../../components/Switch"));
+const TextField_1 = __importDefault(require("../../../components/TextField"));
+const View_1 = __importDefault(require("../../../components/View"));
 const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
 const helpers_1 = require("../../../utilities/helpers");
 const storybook_1 = require("../../../utilities/storybook");

package/dist/components/NumberField/NumberField.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import NumberFieldControlled from "./NumberFieldControlled.js";
-import NumberFieldUncontrolled from "./NumberFieldUncontrolled.js";
+import NumberFieldControlled from "./NumberFieldControlled";
+import NumberFieldUncontrolled from "./NumberFieldUncontrolled";
 const NumberField = (props) => {
     const { value } = props;
     if (value !== undefined)

package/dist/components/NumberField/NumberField.module.css

@@ -1 +1 @@
-.root{overflow:hidden}.field{font-variant-numeric:tabular-nums}.controls-wrapper{display:block}.controls{--rs-number-field-control-border-color:var(--rs-color-border-neutral);display:flex;flex-direction:column;inset-block:0;inset-inline-end:0;margin-block:calc(var(--rs-unit-x1) * -1);position:absolute;transition:border-color var(--rs-duration-fast) var(--rs-easing-standard)}.controls:has([aria-disabled]+[aria-disabled]){--rs-number-field-control-border-color:var(--rs-color-border-disabled)}.controls--size-small .control,.controls--size-small .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small .controls-wrapper{width:54px}}.controls--size-medium .control,.controls--size-medium .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium .controls-wrapper{width:70px}}.controls--size-large .control{width:var(--rs-unit-x6)}.controls--size-large .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large .controls-wrapper{width:94px}}.controls--size-xlarge .control{width:var(--rs-unit-x7)}.controls--size-xlarge .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge .controls-wrapper{width:110px}}.control{align-items:center;display:flex;flex-grow:1;height:50%;justify-content:center;touch-action:manipulation;transition:color var(--rs-duration-fast) var(--rs-easing-standard);user-select:none;-webkit-user-select:none}.control[aria-disabled]{color:var(--rs-color-foreground-disabled)}@media (hover:hover) and (pointer:fine){.control:not([aria-disabled]):hover{background:var(--rs-color-background-neutral-highlighted-faded)}}.icon--touch{display:none!important}.--outline .controls{border-inline-start:1px solid var(--rs-number-field-control-border-color);inset-block:1px;inset-inline-end:1px}.--outline .control:first-child{box-shadow:0 1px var(--rs-number-field-control-border-color)}@media (pointer:coarse) and (hover:none){.controls{flex-direction:row-reverse}.control{aspect-ratio:1;box-sizing:content-box;height:100%;touch-action:manipulation;width:auto!important}.icon--touch{display:block!important}.icon--mouse{display:none!important}.--outline .control:first-child{border-inline-start:1px solid var(--rs-color-border-neutral);box-shadow:none}}@media (--rs-viewport-m ){.controls--size-small--m .control,.controls--size-small--m .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--m .controls-wrapper{width:54px}}.controls--size-medium--m .control,.controls--size-medium--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--m .controls-wrapper{width:70px}}.controls--size-large--m .control{width:var(--rs-unit-x6)}.controls--size-large--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--m .controls-wrapper{width:94px}}.controls--size-xlarge--m .control{width:var(--rs-unit-x7)}.controls--size-xlarge--m .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--m .controls-wrapper{width:110px}}}@media (--rs-viewport-l ){.controls--size-small--l .control,.controls--size-small--l .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--l .controls-wrapper{width:54px}}.controls--size-medium--l .control,.controls--size-medium--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--l .controls-wrapper{width:70px}}.controls--size-large--l .control{width:var(--rs-unit-x6)}.controls--size-large--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--l .controls-wrapper{width:94px}}.controls--size-xlarge--l .control{width:var(--rs-unit-x7)}.controls--size-xlarge--l .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--l .controls-wrapper{width:110px}}}@media (--rs-viewport-xl ){.controls--size-small--xl .control,.controls--size-small--xl .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--xl .controls-wrapper{width:54px}}.controls--size-medium--xl .control,.controls--size-medium--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--xl .controls-wrapper{width:70px}}.controls--size-large--xl .control{width:var(--rs-unit-x6)}.controls--size-large--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--xl .controls-wrapper{width:94px}}.controls--size-xlarge--xl .control{width:var(--rs-unit-x7)}.controls--size-xlarge--xl .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--xl .controls-wrapper{width:110px}}}
+.root{overflow:hidden}.field{font-variant-numeric:tabular-nums}.controls-wrapper{display:block}.controls{--rs-number-field-control-border-color:var(--rs-color-border-neutral);display:flex;flex-direction:column;position:absolute;inset-block:0;inset-inline-end:0;transition:border-color var(--rs-duration-fast) var(--rs-easing-standard);margin-block:calc(var(--rs-unit-x1) * -1)}.controls:has([aria-disabled]+[aria-disabled]){--rs-number-field-control-border-color:var(--rs-color-border-disabled)}.controls--size-small .control,.controls--size-small .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small .controls-wrapper{width:54px}}.controls--size-medium .control,.controls--size-medium .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium .controls-wrapper{width:70px}}.controls--size-large .control{width:var(--rs-unit-x6)}.controls--size-large .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large .controls-wrapper{width:94px}}.controls--size-xlarge .control{width:var(--rs-unit-x7)}.controls--size-xlarge .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge .controls-wrapper{width:110px}}.control{display:flex;align-items:center;justify-content:center;flex-grow:1;height:50%;touch-action:manipulation;user-select:none;-webkit-user-select:none;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.control[aria-disabled]{color:var(--rs-color-foreground-disabled)}@media (hover:hover) and (pointer:fine){.control:not([aria-disabled]):hover{background:var(--rs-color-background-neutral-highlighted-faded)}}.icon--touch{display:none!important}.--outline .controls{inset-inline-end:1px;inset-block:1px;border-inline-start:1px solid var(--rs-number-field-control-border-color)}.--outline .control:first-child{box-shadow:0 1px var(--rs-number-field-control-border-color)}@media (pointer:coarse) and (hover:none){.controls{flex-direction:row-reverse}.control{touch-action:manipulation;height:100%;width:auto!important;aspect-ratio:1;box-sizing:content-box}.icon--touch{display:block!important}.icon--mouse{display:none!important}.--outline .control:first-child{box-shadow:none;border-inline-start:1px solid var(--rs-color-border-neutral)}}@media (--rs-viewport-m ){.controls--size-small--m .control,.controls--size-small--m .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--m .controls-wrapper{width:54px}}.controls--size-medium--m .control,.controls--size-medium--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--m .controls-wrapper{width:70px}}.controls--size-large--m .control{width:var(--rs-unit-x6)}.controls--size-large--m .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--m .controls-wrapper{width:94px}}.controls--size-xlarge--m .control{width:var(--rs-unit-x7)}.controls--size-xlarge--m .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--m .controls-wrapper{width:110px}}}@media (--rs-viewport-l ){.controls--size-small--l .control,.controls--size-small--l .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--l .controls-wrapper{width:54px}}.controls--size-medium--l .control,.controls--size-medium--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--l .controls-wrapper{width:70px}}.controls--size-large--l .control{width:var(--rs-unit-x6)}.controls--size-large--l .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--l .controls-wrapper{width:94px}}.controls--size-xlarge--l .control{width:var(--rs-unit-x7)}.controls--size-xlarge--l .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--l .controls-wrapper{width:110px}}}@media (--rs-viewport-xl ){.controls--size-small--xl .control,.controls--size-small--xl .controls-wrapper{width:var(--rs-unit-x4)}@media (pointer:coarse) and (hover:none){.controls--size-small--xl .controls-wrapper{width:54px}}.controls--size-medium--xl .control,.controls--size-medium--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-medium--xl .controls-wrapper{width:70px}}.controls--size-large--xl .control{width:var(--rs-unit-x6)}.controls--size-large--xl .controls-wrapper{width:var(--rs-unit-x5)}@media (pointer:coarse) and (hover:none){.controls--size-large--xl .controls-wrapper{width:94px}}.controls--size-xlarge--xl .control{width:var(--rs-unit-x7)}.controls--size-xlarge--xl .controls-wrapper{width:var(--rs-unit-x6)}@media (pointer:coarse) and (hover:none){.controls--size-xlarge--xl .controls-wrapper{width:110px}}}

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

@@ -1,4 +1,4 @@
-import type { TextFieldBaseProps } from "../TextField";
+import type { TextFieldBaseProps } from "../../components/TextField";
 import type * as G from "../../types/global";
 export type BaseProps = Omit<TextFieldBaseProps, "endSlot" | "onChange" | "rounded" | "multiline"> & {
     /** Callback when the component value is changed */