reshaped 4.0.2 → 4.1.0-canary.0

package/dist/components/Accordion/Accordion.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import AccordionControlled from "./AccordionControlled.js";
-import AccordionUncontrolled from "./AccordionUncontrolled.js";
+import AccordionControlled from "./AccordionControlled";
+import AccordionUncontrolled from "./AccordionUncontrolled";
 const Accordion = (props) => {
     const { active } = props;
     if (active !== undefined)

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

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

package/dist/components/Accordion/AccordionContent.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Expandable from "../_private/Expandable/index.js";
-import View from "../View/index.js";
-import AccordionContext from "./Accordion.context.js";
+import Expandable from "../../components/_private/Expandable";
+import View from "../../components/View";
+import AccordionContext from "./Accordion.context";
 const AccordionContent = (props) => {
     const { children } = props;
     const { active, triggerId, contentId, gap } = React.useContext(AccordionContext);

package/dist/components/Accordion/AccordionControlled.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 useHandlerRef from "../../hooks/useHandlerRef.js";
-import AccordionContext from "./Accordion.context.js";
+import useElementId from "../../hooks/useElementId";
+import useHandlerRef from "../../hooks/useHandlerRef";
+import AccordionContext from "./Accordion.context";
 const AccordionControlled = (props) => {
     const { children, onToggle, active, iconPosition, iconSize, gap, className, attributes } = props;
     const rootClassNames = classNames(className);

package/dist/components/Accordion/AccordionTrigger.js

@@ -2,11 +2,11 @@
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React 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 IconChevronDown from "../../icons/ChevronDown.js";
-import AccordionContext from "./Accordion.context.js";
+import Actionable from "../../components/Actionable";
+import Icon from "../../components/Icon";
+import View from "../../components/View";
+import IconChevronDown from "../../icons/ChevronDown";
+import AccordionContext from "./Accordion.context";
 import s from "./Accordion.module.css";
 const AccordionTrigger = (props) => {
     const { children } = props;

package/dist/components/Accordion/AccordionUncontrolled.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import AccordionControlled from "./AccordionControlled.js";
+import AccordionControlled from "./AccordionControlled";
 const AccordionUncontrolled = (props) => {
     const { defaultActive, onToggle, ...controlledProps } = props;
     const [active, setActive] = React.useState(defaultActive || false);

package/dist/components/Accordion/index.js

@@ -1,6 +1,6 @@
-import Accordion from "./Accordion.js";
-import AccordionContent from "./AccordionContent.js";
-import AccordionTrigger from "./AccordionTrigger.js";
+import Accordion from "./Accordion";
+import AccordionContent from "./AccordionContent";
+import AccordionTrigger from "./AccordionTrigger";
 const AccordionRoot = Accordion;
 AccordionRoot.Trigger = AccordionTrigger;
 AccordionRoot.Content = AccordionContent;

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

@@ -2,7 +2,7 @@ import { StoryObj } from "@storybook/react-vite";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("./..").AccordionProps> & {
+    component: import("react").FC<import("../../../components/Accordion").AccordionProps> & {
         Trigger: import("react").FC<import("../Accordion.types").TriggerProps>;
         Content: import("react").FC<import("../Accordion.types").ContentProps>;
     };

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

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.renderProps = exports.defaultActive = exports.active = exports.onToggle = exports.gap = exports.iconPosition = exports.iconSize = exports.base = void 0;
 const test_1 = require("storybook/test");
-const Accordion_1 = __importDefault(require("./.."));
-const Button_1 = __importDefault(require("../../Button"));
-const View_1 = __importDefault(require("../../View"));
+const Accordion_1 = __importDefault(require("../../../components/Accordion"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Utility components/Accordion",

package/dist/components/Actionable/Actionable.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import { classNames, keys } from "@reshaped/utilities";
 import s from "./Actionable.module.css";

package/dist/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline);outline-offset:var(--rs-outline-width);z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{outline-offset:calc(var(--rs-outline-width) * -1)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{outline:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{outline:var(--rs-outline);outline-offset:var(--rs-outline-width)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{outline-offset:calc(var(--rs-outline-width) * -1)}[role=button].root,button.root{cursor:pointer;user-select:none}[data-rs-keyboard] label.root:has([data-rs-hidden-input]:focus){box-shadow:var(--rs-outline-shadow);z-index:var(--rs-z-index-relative)}.root.--disabled,.root[disabled]{cursor:default}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
+@layer rs.reset{.root{display:inline-block;vertical-align:top;text-decoration:none;color:inherit;line-height:inherit;font-size:inherit;font-weight:inherit;text-align:initial;padding:0;border:0;margin:0;background:none;position:relative;isolation:isolate;-webkit-tap-highlight-color:transparent}}.touch{position:absolute;inset:50%;height:100%;width:100%;transform:translate(-50%,-50%);min-width:24px;min-height:24px}.root:focus{outline:none}[data-rs-keyboard] .root:focus{outline:var(--rs-outline);outline-offset:var(--rs-outline-width);z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{outline-offset:calc(var(--rs-outline-width) * -1)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{outline:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{outline:var(--rs-outline);outline-offset:var(--rs-outline-width)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{outline-offset:calc(var(--rs-outline-width) * -1)}[role=button].root,button.root{cursor:pointer;user-select:none}[data-rs-keyboard] label.root:has([data-rs-hidden-input]:focus){z-index:var(--rs-z-index-relative);box-shadow:var(--rs-outline-shadow)}.root.--disabled,.root[disabled]{cursor:default}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}

package/dist/components/Actionable/index.js

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

package/dist/components/Actionable/tests/Actionable.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<import("./..").ActionableProps & import("react").RefAttributes<import("./..").ActionableRef>>;
+    component: import("react").ForwardRefExoticComponent<import("../../../components/Actionable").ActionableProps & import("react").RefAttributes<import("../../../components/Actionable").ActionableRef>>;
     parameters: {
         iframe: {
             url: string;

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

@@ -5,9 +5,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.stopPropagation = exports.as = exports.type = exports.borderRadius = exports.disableFocusRing = exports.insetFocus = exports.fullWidth = exports.disabled = exports.base = void 0;
 const test_1 = require("storybook/test");
-const Actionable_1 = __importDefault(require("./.."));
-const Button_1 = __importDefault(require("../../Button"));
-const View_1 = __importDefault(require("../../View"));
+const Actionable_1 = __importDefault(require("../../../components/Actionable"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 exports.default = {
     title: "Utility components/Actionable",

package/dist/components/Alert/Alert.js

@@ -1,7 +1,7 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Icon from "../Icon/index.js";
-import Text from "../Text/index.js";
-import View from "../View/index.js";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Icon from "../../components/Icon";
+import Text from "../../components/Text";
+import View from "../../components/View";
 import s from "./Alert.module.css";
 const Alert = (props) => {
     const { title, children, icon, actionsSlot, color = "neutral", inline, bleed, className, attributes, } = props;

package/dist/components/Alert/Alert.module.css

@@ -1 +1 @@
-.icon{align-items:center;display:flex;height:var(--rs-line-height-body-2)}
+.icon{height:var(--rs-line-height-body-2);display:flex;align-items:center}

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

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

package/dist/components/Alert/index.js

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

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

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

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.bleed = exports.inline = exports.color = void 0;
 const test_1 = require("storybook/test");
-const Alert_1 = __importDefault(require("./.."));
-const Link_1 = __importDefault(require("../../Link"));
+const Alert_1 = __importDefault(require("../../../components/Alert"));
+const Link_1 = __importDefault(require("../../../components/Link"));
 const storybook_1 = require("../../../utilities/storybook");
 const Zap_1 = __importDefault(require("../../../icons/Zap"));
 exports.default = {

package/dist/components/Autocomplete/Autocomplete.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import DropdownMenu from "../DropdownMenu/index.js";
-import TextField from "../TextField/index.js";
-import useElementId from "../../hooks/useElementId.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import * as keys from "../../constants/keys.js";
+import DropdownMenu from "../../components/DropdownMenu";
+import TextField from "../../components/TextField";
+import useElementId from "../../hooks/useElementId";
+import useHandlerRef from "../../hooks/useHandlerRef";
+import useHotkeys from "../../hooks/useHotkeys";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect";
+import * as keys from "../../constants/keys";
 import s from "./Autocomplete.module.css";
 const AutocompleteContext = React.createContext({});
 const Autocomplete = (props) => {

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

@@ -1,6 +1,6 @@
-import type { DropdownMenuInstance, DropdownMenuProps } from "../DropdownMenu";
-import type { MenuItemProps } from "../MenuItem";
-import type { TextFieldProps } from "../TextField";
+import type { DropdownMenuInstance, DropdownMenuProps } from "../../components/DropdownMenu";
+import type { MenuItemProps } from "../../components/MenuItem";
+import type { TextFieldProps } from "../../components/TextField";
 import type * as G from "../../types/global";
 type SelectArgs = {
     /** Value that will be passed to the input on selection */

package/dist/components/Autocomplete/index.js

@@ -1,4 +1,4 @@
-import Autocomplete, { AutocompleteItem } from "./Autocomplete.js";
+import Autocomplete, { AutocompleteItem } from "./Autocomplete";
 const AutocompleteRoot = Autocomplete;
 AutocompleteRoot.Item = AutocompleteItem;
 export default AutocompleteRoot;

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

@@ -3,7 +3,7 @@ import React from "react";
 import { Mock } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.FC<import("./..").AutocompleteProps> & {
+    component: React.FC<import("../../../components/Autocomplete").AutocompleteProps> & {
         Item: typeof import("../Autocomplete").AutocompleteItem;
     };
     parameters: {

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

@@ -6,9 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.multiselect = exports.itemDisabled = exports.itemData = exports.base = exports.active = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Autocomplete_1 = __importDefault(require("./.."));
-const Badge_1 = __importDefault(require("../../Badge"));
-const FormControl_1 = __importDefault(require("../../FormControl"));
+const Autocomplete_1 = __importDefault(require("../../../components/Autocomplete"));
+const Badge_1 = __importDefault(require("../../../components/Badge"));
+const FormControl_1 = __importDefault(require("../../../components/FormControl"));
 const useToggle_1 = __importDefault(require("../../../hooks/useToggle"));
 const helpers_1 = require("../../../utilities/helpers");
 const storybook_1 = require("../../../utilities/storybook");

package/dist/components/Avatar/Avatar.js

@@ -1,10 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { classNames } from "@reshaped/utilities";
-import Icon from "../Icon/index.js";
-import Image from "../Image/index.js";
-import View from "../View/index.js";
-import { responsivePropDependency } from "../../utilities/props.js";
-import { resolveMixin } from "../../styles/mixin.js";
+import Icon from "../../components/Icon";
+import Image from "../../components/Image";
+import View from "../../components/View";
+import { responsivePropDependency } from "../../utilities/props";
+import { resolveMixin } from "../../styles/mixin";
 import s from "./Avatar.module.css";
 const Avatar = (props) => {
     const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, renderImage, imageAttributes, attributes, } = props;

package/dist/components/Avatar/Avatar.module.css

@@ -1 +1 @@
-.root{align-items:center;aspect-ratio:1;display:flex;font-size:calc(var(--rs-h) / 3);font-weight:var(--rs-font-weight-bold);justify-content:center;line-height:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}
+.root{display:flex;align-items:center;justify-content:center;font-size:calc(var(--rs-h) / 3);font-weight:var(--rs-font-weight-bold);aspect-ratio:1;line-height:100%}.--variant-faded.--color-neutral{color:var(--rs-color-foreground-neutral)}.--variant-faded.--color-critical{color:var(--rs-color-foreground-critical)}.--variant-faded.--color-positive{color:var(--rs-color-foreground-positive)}.--variant-faded.--color-warning{color:var(--rs-color-foreground-warning)}.--variant-faded.--color-primary{color:var(--rs-color-foreground-primary)}

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

@@ -1,5 +1,5 @@
 import type { ClassName } from "@reshaped/utilities";
-import type { IconProps } from "../Icon";
+import type { IconProps } from "../../components/Icon";
 import type * as G from "../../types/global";
 import type { Attributes } from "../../types/global";
 export type Props = {

package/dist/components/Avatar/index.js

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

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

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

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

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.renderImage = exports.fallback = exports.colors = exports.squared = exports.size = exports.initials = exports.src = void 0;
 const react_1 = require("react");
 const test_1 = require("storybook/test");
-const Avatar_1 = __importDefault(require("./.."));
-const View_1 = __importDefault(require("../../View"));
+const Avatar_1 = __importDefault(require("../../../components/Avatar"));
+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/Badge/Badge.d.ts

@@ -1,4 +1,4 @@
-import { type ActionableRef } from "../Actionable";
+import { type ActionableRef } from "../../components/Actionable";
 import type * as T from "./Badge.types";
 declare const Badge: import("react").ForwardRefExoticComponent<T.Props & import("react").RefAttributes<ActionableRef>>;
 export default Badge;

package/dist/components/Badge/Badge.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 Text from "../Text/index.js";
-import IconClose from "../../icons/Close.js";
+import Actionable from "../../components/Actionable";
+import Icon from "../../components/Icon";
+import Text from "../../components/Text";
+import IconClose from "../../icons/Close";
 import s from "./Badge.module.css";
 const Badge = forwardRef((props, ref) => {
     const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, as, } = props;

package/dist/components/Badge/Badge.module.css

@@ -1 +1 @@
-.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-on-background-neutral);display:inline-flex;justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color;vertical-align:top}.root.--empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.content{align-items:center;display:inline-flex;gap:var(--rs-badge-gap)}.icon:first-child{margin-inline-start:calc(var(--rs-unit-x0-5) * -1)}.icon:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.dismiss:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{--rs-badge-border-color:var(--rs-color-border-neutral-faded);background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1-5);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:calc(var(--rs-unit-x0-5) * 5);--rs-badge-line-height:var(--rs-line-height-body-2);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1-5)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;padding:var(--rs-badge-p-v) var(--rs-badge-p-h);min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));display:inline-flex;align-items:center;justify-content:center;vertical-align:top;border-radius:var(--rs-radius-small);background:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral);box-sizing:border-box;box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;backface-visibility:hidden;transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color}.root.--empty{width:var(--rs-badge-empty-size);height:var(--rs-badge-empty-size);min-width:auto;min-height:auto;padding:0}.content{display:inline-flex;align-items:center;gap:var(--rs-badge-gap)}.icon:first-child{margin-inline-start:calc(var(--rs-unit-x0-5) * -1)}.icon:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.dismiss:last-child{margin-inline-end:calc(var(--rs-unit-x0-5) * -1)}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{--rs-badge-border-color:var(--rs-color-border-neutral-faded);background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1-5);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:calc(var(--rs-unit-x0-5) * 5);--rs-badge-line-height:var(--rs-line-height-body-2);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1-5)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{transform:scale(.2);opacity:0}.container{position:relative;display:inline-block;vertical-align:top}.container .root{position:absolute;z-index:10;inset-inline-end:0;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

package/dist/components/Badge/Badge.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 { Attributes } from "../../types/global";
 type BaseProps = {
     /** Component color scheme

package/dist/components/Badge/index.js

@@ -1,5 +1,5 @@
-import Badge from "./Badge.js";
-import BadgeContainer from "./BadgeContainer.js";
+import Badge from "./Badge";
+import BadgeContainer from "./BadgeContainer";
 const BadgeRoot = Badge;
 BadgeRoot.Container = BadgeContainer;
 export default BadgeRoot;

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

@@ -3,7 +3,7 @@ import React from "react";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: React.ForwardRefExoticComponent<import("./..").BadgeProps & React.RefAttributes<import("../../Actionable").ActionableRef>> & {
+    component: React.ForwardRefExoticComponent<import("../../../components/Badge").BadgeProps & React.RefAttributes<import("../../Actionable").ActionableRef>> & {
         Container: React.FC<import("../Badge.types").ContainerProps>;
     };
     parameters: {

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

@@ -6,11 +6,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.animated = exports.className = exports.onClick = exports.href = exports.container = exports.highlighted = exports.empty = exports.rounded = exports.onDismiss = exports.icon = exports.size = exports.color = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
-const Avatar_1 = __importDefault(require("../../Avatar"));
-const Badge_1 = __importDefault(require("./.."));
-const Button_1 = __importDefault(require("../../Button"));
-const Icon_1 = __importDefault(require("../../Icon"));
-const View_1 = __importDefault(require("../../View"));
+const Avatar_1 = __importDefault(require("../../../components/Avatar"));
+const Badge_1 = __importDefault(require("../../../components/Badge"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const Icon_1 = __importDefault(require("../../../components/Icon"));
+const View_1 = __importDefault(require("../../../components/View"));
 const storybook_1 = require("../../../utilities/storybook");
 const Checkmark_1 = __importDefault(require("../../../icons/Checkmark"));
 const Plus_1 = __importDefault(require("../../../icons/Plus"));

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -2,12 +2,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import Button from "../Button/index.js";
-import Icon from "../Icon/index.js";
-import Text from "../Text/index.js";
-import View from "../View/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
-import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
+import Button from "../../components/Button";
+import Icon from "../../components/Icon";
+import Text from "../../components/Text";
+import View from "../../components/View";
+import IconChevronRight from "../../icons/ChevronRight";
+import IconDotsHorizontal from "../../icons/DotsHorizontal";
 const Breadcrumbs = (props) => {
     const { children, separator, color, defaultVisibleItems, expandAriaLabel, disableExpand, ariaLabel, className, attributes, } = props;
     const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;

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

@@ -1,6 +1,6 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { LinkProps } from "../Link";
+import type { LinkProps } from "../../components/Link";
 import type { Attributes } from "../../types/global";
 export type Props = {
     /** Node for inserting children to position items */

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import Link from "../Link/index.js";
-import Text from "../Text/index.js";
+import Link from "../../components/Link";
+import Text from "../../components/Text";
 const BreadcrumbsItem = (props) => {
     const { children, onClick, href, icon, disabled } = props;
     if (!href && !onClick && !disabled) {

package/dist/components/Breadcrumbs/index.js

@@ -1,5 +1,5 @@
-import Breadcrumbs from "./Breadcrumbs.js";
-import BreadcrumbsItem from "./BreadcrumbsItem.js";
+import Breadcrumbs from "./Breadcrumbs";
+import BreadcrumbsItem from "./BreadcrumbsItem";
 const BreadcrumbsRoot = Breadcrumbs;
 BreadcrumbsRoot.Item = BreadcrumbsItem;
 export default BreadcrumbsRoot;

package/dist/components/Breadcrumbs/tests/Breadcrumbs.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("./..").BreadcrumbsProps> & {
+    component: import("react").FC<import("../../../components/Breadcrumbs").BreadcrumbsProps> & {
         Item: import("react").FC<import("../Breadcrumbs.types").ItemProps>;
     };
     parameters: {

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

@@ -5,8 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.className = exports.href = exports.onClick = exports.multiline = exports.collapsed = exports.slots = exports.icon = exports.item = exports.color = void 0;
 const test_1 = require("storybook/test");
-const Badge_1 = __importDefault(require("../../Badge"));
-const Breadcrumbs_1 = __importDefault(require("./.."));
+const Badge_1 = __importDefault(require("../../../components/Badge"));
+const Breadcrumbs_1 = __importDefault(require("../../../components/Breadcrumbs"));
 const storybook_1 = require("../../../utilities/storybook");
 const Zap_1 = __importDefault(require("../../../icons/Zap"));
 exports.default = {

package/dist/components/Button/Button.d.ts

@@ -1,11 +1,11 @@
 import React from "react";
-import { type ActionableRef } from "../Actionable";
+import { type ActionableRef } from "../../components/Actionable";
 import type * as T from "./Button.types";
-declare const Button: React.ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "as" | "render" | "onClick" | "type" | "href" | "stopPropagation"> & {
+declare const Button: React.ForwardRefExoticComponent<Pick<import("../../components/Actionable").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
     color?: "primary" | "critical" | "positive" | "neutral" | "warning" | "media" | "inherit";
     variant?: "solid" | "outline" | "ghost";
-    icon?: import("../Icon").IconProps["svg"];
-    endIcon?: import("../Icon").IconProps["svg"];
+    icon?: import("../../components/Icon").IconProps["svg"];
+    endIcon?: import("../../components/Icon").IconProps["svg"];
     size?: import("../..").Responsive<T.Size>;
     rounded?: boolean;
     loading?: boolean;

package/dist/components/Button/Button.js

@@ -2,10 +2,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import React from "react";
 import { classNames } from "@reshaped/utilities";
-import Actionable from "../Actionable/index.js";
-import Icon from "../Icon/index.js";
-import Loader from "../Loader/index.js";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import Actionable from "../../components/Actionable";
+import Icon from "../../components/Icon";
+import Loader from "../../components/Loader";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
 import s from "./Button.module.css";
 const Button = forwardRef((props, ref) => {
     const { variant = "solid", color = "neutral", raised, highlighted, fullWidth, loading, loadingAriaLabel, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, render, className, attributes, } = props;