reshaped 4.2.0 → 4.3.0-canary.1

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

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

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 "../../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";
+import Button from "../../components/Button/index.js";
+import Icon from "../../components/Icon/index.js";
+import Text from "../../components/Text/index.js";
+import View from "../../components/View/index.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
 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,7 +1,7 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-import type { LinkProps } from "../../components/Link";
-import type { Attributes } from "../../types/global";
+import type { LinkProps } from "../../components/Link/index.js";
+import type { Attributes } from "../../types/global.js";
 export type Props = {
     /** Node for inserting children to position items */
     children: React.ReactElement | React.ReactElement[];

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

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

package/dist/components/Breadcrumbs/BreadcrumbsItem.js

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

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

@@ -1,7 +1,7 @@
-import Breadcrumbs from "./Breadcrumbs";
-import BreadcrumbsItem from "./BreadcrumbsItem";
+import Breadcrumbs from "./Breadcrumbs.js";
+import BreadcrumbsItem from "./BreadcrumbsItem.js";
 declare const BreadcrumbsRoot: typeof Breadcrumbs & {
     Item: typeof BreadcrumbsItem;
 };
 export default BreadcrumbsRoot;
-export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types";
+export type { Props as BreadcrumbsProps } from "./Breadcrumbs.types.js";

package/dist/components/Breadcrumbs/index.js

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

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

@@ -2,8 +2,8 @@ import { StoryObj } from "@storybook/react-vite";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/Breadcrumbs").BreadcrumbsProps> & {
-        Item: import("react").FC<import("../Breadcrumbs.types").ItemProps>;
+    component: import("react").FC<import("../../../components/Breadcrumbs/index.js").BreadcrumbsProps> & {
+        Item: import("react").FC<import("../Breadcrumbs.types.js").ItemProps>;
     };
     parameters: {
         iframe: {

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

@@ -1,193 +1,187 @@
-"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.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("../../../components/Badge"));
-const Breadcrumbs_1 = __importDefault(require("../../../components/Breadcrumbs"));
-const storybook_1 = require("../../../utilities/storybook");
-const Zap_1 = __importDefault(require("../../../icons/Zap"));
-exports.default = {
+import { expect, fn, userEvent } from "storybook/test";
+import Badge from "../../../components/Badge/index.js";
+import Breadcrumbs from "../../../components/Breadcrumbs/index.js";
+import { Example } from "../../../utilities/storybook/index.js";
+import IconZap from "../../../icons/Zap.js";
+export default {
     title: "Components/Breadcrumbs",
-    component: Breadcrumbs_1.default,
+    component: Breadcrumbs,
     parameters: {
         iframe: {
             url: "https://reshaped.so/docs/components/breadcrumbs",
         },
     },
 };
-exports.color = {
+export const color = {
     name: "color",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="color: neutral">
-				<Breadcrumbs_1.default expandAriaLabel="Expand items" ariaLabel="breadcrumb neutral">
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 1</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 2</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 3</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="color: neutral">
+				<Breadcrumbs expandAriaLabel="Expand items" ariaLabel="breadcrumb neutral">
+					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="color: primary">
-				<Breadcrumbs_1.default color="primary" expandAriaLabel="Expand items" ariaLabel="breadcrumb primary">
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 1</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 2</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 3</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="color: primary">
+				<Breadcrumbs color="primary" expandAriaLabel="Expand items" ariaLabel="breadcrumb primary">
+					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
 };
-exports.item = {
+export const item = {
     name: "item, disabled",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="disabled item">
-				<Breadcrumbs_1.default color="primary" expandAriaLabel="Expand items" ariaLabel="breadcrumb disabled">
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 1</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }} disabled>
+    render: () => (<Example>
+			<Example.Item title="disabled item">
+				<Breadcrumbs color="primary" expandAriaLabel="Expand items" ariaLabel="breadcrumb disabled">
+					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }} disabled>
 						Disabled item 2
-					</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 3</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
 };
-exports.icon = {
+export const icon = {
     name: "item, icon",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="item with icon">
-				<Breadcrumbs_1.default color="primary" expandAriaLabel="Expand items" ariaLabel="breadcrumb with icon">
-					<Breadcrumbs_1.default.Item icon={Zap_1.default} onClick={() => { }}>
+    render: () => (<Example>
+			<Example.Item title="item with icon">
+				<Breadcrumbs color="primary" expandAriaLabel="Expand items" ariaLabel="breadcrumb with icon">
+					<Breadcrumbs.Item icon={IconZap} onClick={() => { }}>
 						Item 1
-					</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 2</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 3</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+					</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
 };
-exports.slots = {
+export const slots = {
     name: "separator, children",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="slot: separator">
-				<Breadcrumbs_1.default color="primary" separator="/" expandAriaLabel="Expand items" ariaLabel="breadcrumb with separator">
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 1</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 2</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 3</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="slot: separator">
+				<Breadcrumbs color="primary" separator="/" expandAriaLabel="Expand items" ariaLabel="breadcrumb with separator">
+					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="custom child content">
-				<Breadcrumbs_1.default expandAriaLabel="Expand items" ariaLabel="breadcrumb with custom children">
-					<Breadcrumbs_1.default.Item onClick={() => { }}>
-						<Badge_1.default>Item 1</Badge_1.default>
-					</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>
-						<Badge_1.default>Item 2</Badge_1.default>
-					</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 3</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="custom child content">
+				<Breadcrumbs expandAriaLabel="Expand items" ariaLabel="breadcrumb with custom children">
+					<Breadcrumbs.Item onClick={() => { }}>
+						<Badge>Item 1</Badge>
+					</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>
+						<Badge>Item 2</Badge>
+					</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
 };
-exports.collapsed = {
+export const collapsed = {
     name: "collapsed",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="collapsed, 3 items shown by default">
-				<Breadcrumbs_1.default defaultVisibleItems={3} ariaLabel="breadcrumbs one" expandAriaLabel="Expand items">
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 1</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 2</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 3</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 4</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 5</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
+    render: () => (<Example>
+			<Example.Item title="collapsed, 3 items shown by default">
+				<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumbs one" expandAriaLabel="Expand items">
+					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="collapsed, 4 items shown by default">
-				<Breadcrumbs_1.default defaultVisibleItems={4} ariaLabel="breadcrumb two" expandAriaLabel="Expand items">
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 1</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 2</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 3</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 4</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 5</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
+			<Example.Item title="collapsed, 4 items shown by default">
+				<Breadcrumbs defaultVisibleItems={4} ariaLabel="breadcrumb two" expandAriaLabel="Expand items">
+					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
 
-			<storybook_1.Example.Item title="collapsed, 3 items shown by default, not expandable">
-				<Breadcrumbs_1.default defaultVisibleItems={3} expandAriaLabel="Expand items" ariaLabel="breadcrumb three" disableExpand>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 1</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 2</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 3</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item onClick={() => { }}>Item 4</Breadcrumbs_1.default.Item>
-					<Breadcrumbs_1.default.Item>Item 5</Breadcrumbs_1.default.Item>
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+			<Example.Item title="collapsed, 3 items shown by default, not expandable">
+				<Breadcrumbs defaultVisibleItems={3} expandAriaLabel="Expand items" ariaLabel="breadcrumb three" disableExpand>
+					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 3</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 4</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 5</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
     play: async ({ canvas }) => {
         let triggers = canvas.getAllByRole("button");
-        (0, test_1.expect)(triggers[0]).toHaveTextContent("Item 1");
-        (0, test_1.expect)(triggers[1]).toHaveAccessibleName("Expand items");
-        (0, test_1.expect)(triggers[2]).toHaveTextContent("Item 4");
-        await test_1.userEvent.click(triggers[1]);
+        expect(triggers[0]).toHaveTextContent("Item 1");
+        expect(triggers[1]).toHaveAccessibleName("Expand items");
+        expect(triggers[2]).toHaveTextContent("Item 4");
+        await userEvent.click(triggers[1]);
         triggers = canvas.getAllByRole("button");
-        (0, test_1.expect)(triggers[0]).toHaveTextContent("Item 1");
-        (0, test_1.expect)(triggers[1]).toHaveTextContent("Item 2");
-        (0, test_1.expect)(triggers[2]).toHaveTextContent("Item 3");
-        (0, test_1.expect)(triggers[3]).toHaveTextContent("Item 4");
+        expect(triggers[0]).toHaveTextContent("Item 1");
+        expect(triggers[1]).toHaveTextContent("Item 2");
+        expect(triggers[2]).toHaveTextContent("Item 3");
+        expect(triggers[3]).toHaveTextContent("Item 4");
     },
 };
-exports.multiline = {
+export const multiline = {
     name: "composition, multiline",
-    render: () => (<storybook_1.Example>
-			<storybook_1.Example.Item title="wraps content when multiline">
-				<Breadcrumbs_1.default expandAriaLabel="Expand items" ariaLabel="breadcrumb multiline">
-					{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (<Breadcrumbs_1.default.Item onClick={() => { }} key={i}>
+    render: () => (<Example>
+			<Example.Item title="wraps content when multiline">
+				<Breadcrumbs expandAriaLabel="Expand items" ariaLabel="breadcrumb multiline">
+					{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (<Breadcrumbs.Item onClick={() => { }} key={i}>
 							Item {i}
-						</Breadcrumbs_1.default.Item>))}
-				</Breadcrumbs_1.default>
-			</storybook_1.Example.Item>
-		</storybook_1.Example>),
+						</Breadcrumbs.Item>))}
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
 };
-exports.onClick = {
+export const onClick = {
     name: "item, onClick, disabled",
     args: {
-        handleClick: (0, test_1.fn)(),
+        handleClick: fn(),
     },
-    render: (args) => (<Breadcrumbs_1.default expandAriaLabel="Expand items">
-			<Breadcrumbs_1.default.Item onClick={args.handleClick}>Trigger</Breadcrumbs_1.default.Item>
-			<Breadcrumbs_1.default.Item onClick={args.handleClick} disabled>
+    render: (args) => (<Breadcrumbs expandAriaLabel="Expand items">
+			<Breadcrumbs.Item onClick={args.handleClick}>Trigger</Breadcrumbs.Item>
+			<Breadcrumbs.Item onClick={args.handleClick} disabled>
 				Trigger
-			</Breadcrumbs_1.default.Item>
-		</Breadcrumbs_1.default>),
+			</Breadcrumbs.Item>
+		</Breadcrumbs>),
     play: async ({ args, canvas }) => {
         const triggers = canvas.getAllByRole("button");
-        await test_1.userEvent.click(triggers[0]);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledTimes(1);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledWith(test_1.expect.objectContaining({ target: triggers[0] }));
-        await test_1.userEvent.click(triggers[1]);
-        (0, test_1.expect)(args.handleClick).toHaveBeenCalledTimes(1);
+        await userEvent.click(triggers[0]);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: triggers[0] }));
+        await userEvent.click(triggers[1]);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
     },
 };
-exports.href = {
+export const href = {
     name: "item, href",
-    render: () => (<Breadcrumbs_1.default expandAriaLabel="Expand items">
-			<Breadcrumbs_1.default.Item href="https://reshaped.so">Trigger</Breadcrumbs_1.default.Item>
-		</Breadcrumbs_1.default>),
+    render: () => (<Breadcrumbs expandAriaLabel="Expand items">
+			<Breadcrumbs.Item href="https://reshaped.so">Trigger</Breadcrumbs.Item>
+		</Breadcrumbs>),
     play: async ({ canvas }) => {
         const triggers = canvas.getAllByRole("link");
-        (0, test_1.expect)(triggers[0]).toHaveAttribute("href", "https://reshaped.so");
+        expect(triggers[0]).toHaveAttribute("href", "https://reshaped.so");
     },
 };
-exports.className = {
+export const className = {
     name: "className, attributes",
     render: () => (<div data-testid="root">
-			<Breadcrumbs_1.default className="test-classname" expandAriaLabel="Expand items" attributes={{ id: "test-id" }}>
-				<Breadcrumbs_1.default.Item>Trigger</Breadcrumbs_1.default.Item>
-			</Breadcrumbs_1.default>
+			<Breadcrumbs className="test-classname" expandAriaLabel="Expand items" attributes={{ id: "test-id" }}>
+				<Breadcrumbs.Item>Trigger</Breadcrumbs.Item>
+			</Breadcrumbs>
 		</div>),
     play: async ({ canvas }) => {
         const root = canvas.getByTestId("root").firstChild;
-        (0, test_1.expect)(root).toHaveClass("test-classname");
-        (0, test_1.expect)(root).toHaveAttribute("id", "test-id");
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
     },
 };

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

@@ -1,17 +1,17 @@
 import React from "react";
-import { type ActionableRef } from "../../components/Actionable";
-import type * as T from "./Button.types";
-declare const Button: React.ForwardRefExoticComponent<Pick<import("../../components/Actionable").ActionableProps, "as" | "attributes" | "children" | "className" | "disabled" | "href" | "onClick" | "render" | "stopPropagation" | "type"> & {
+import { type ActionableRef } from "../../components/Actionable/index.js";
+import type * as T from "./Button.types.js";
+declare const Button: React.ForwardRefExoticComponent<Pick<import("../../components/Actionable/index.js").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("../../components/Icon").IconProps["svg"];
-    endIcon?: import("../../components/Icon").IconProps["svg"];
-    size?: import("../..").Responsive<T.Size>;
+    icon?: import("../../components/Icon/index.js").IconProps["svg"];
+    endIcon?: import("../../components/Icon/index.js").IconProps["svg"];
+    size?: import("../../index.js").Responsive<T.Size>;
     rounded?: boolean;
     loading?: boolean;
     loadingAriaLabel?: string;
     raised?: boolean;
-    fullWidth?: import("../..").Responsive<boolean>;
+    fullWidth?: import("../../index.js").Responsive<boolean>;
     highlighted?: boolean;
 } & React.RefAttributes<ActionableRef>>;
 export default Button;

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 "../../components/Actionable";
-import Icon from "../../components/Icon";
-import Loader from "../../components/Loader";
-import { responsiveClassNames, responsivePropDependency } from "../../utilities/props";
+import Actionable from "../../components/Actionable/index.js";
+import Icon from "../../components/Icon/index.js";
+import Loader from "../../components/Loader/index.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 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;

package/dist/components/Button/Button.module.css

@@ -1 +1 @@
-.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);--rs-button-min-size:calc(var(--rs-button-line-height) + var(--rs-button-p-v) * 2);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform,opacity;padding:var(--rs-unit-x1) var(--rs-p-h);border-radius:var(--rs-button-radius);cursor:pointer;position:relative;z-index:0;text-align:initial;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);font-size:var(--rs-button-font-size);line-height:var(--rs-button-line-height);letter-spacing:var(--rs-button-letter-spacing);box-sizing:border-box;min-height:var(--rs-button-min-size);min-width:var(--rs-button-min-size);background-color:var(--rs-button-background-color);color:var(--rs-button-color);isolation:isolate}.root:active{transform:scale(.985) translateZ(0)}.root.--highlighted{z-index:var(--rs-z-index-relative)}.root.--highlighted .highlight,.root.--highlighted:not(:has(.highlight)){background-color:var(--rs-button-highlight-color)}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading) .highlight,.root:hover:not(:has(.highlight),.--loading){background-color:var(--rs-button-highlight-color)}}.text{display:flex;align-items:center;gap:var(--rs-button-gap)}.text>:is(:first-child):not(.label,:only-child){margin-inline-start:calc(var(--rs-button-icon-align) * -1)}.text:not(:only-child)>:is(:last-child):not(.label,:only-child){margin-inline-end:calc(var(--rs-button-icon-align) * -1)}.icon{margin-inline-end:var(--rs-button-gap);margin-inline-start:calc(var(--rs-button-icon-align) * -1)}.icon.--icon-position-end{margin-inline-end:calc(var(--rs-button-icon-align) * -1);margin-inline-start:var(--rs-button-gap)}.--icon-only .icon{margin:0}.icon,.text{position:relative;z-index:var(--rs-z-index-relative)}.loader{display:none;align-items:center;justify-content:center;z-index:var(--rs-z-index-relative)}.highlight,.loader{position:absolute;inset:0}.highlight{pointer-events:none;border-radius:inherit;background-color:transparent;transition:var(--rs-duration-fast) var(--rs-easing-standard);transform:translateZ(0)}.root.--icon-only{--rs-p-h:calc(var(--rs-button-p-h) - var(--rs-unit-x1) / 2)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded,.root.--rounded:before{border-radius:var(--rs-radius-circular)}.--size-small{--rs-button-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-caption-1);--rs-button-font-size:var(--rs-font-size-caption-1);--rs-button-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width{width:100%;text-align:center}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted);--rs-button-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary);--rs-button-background-color:var(--rs-color-background-primary);--rs-button-highlight-color:var(--rs-color-background-primary-highlighted);--rs-button-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical);--rs-button-background-color:var(--rs-color-background-critical);--rs-button-highlight-color:var(--rs-color-background-critical-highlighted);--rs-button-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive);--rs-button-background-color:var(--rs-color-background-positive);--rs-button-highlight-color:var(--rs-color-background-positive-highlighted);--rs-button-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-group-separator-color:rgb(from var(--rs-color-black) r g b/12%);--rs-button-color:var(--rs-color-black);--rs-button-background-color:var(--rs-color-white);--rs-button-highlight-color:rgb(from var(--rs-color-white) r g b/88%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline:before{content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:calc(var(--rs-z-index-relative) - 1);inset:0;border:var(--rs-button-border-width) solid var(--rs-color-border-neutral)}.root.--variant-outline:after{box-shadow:var(--rs-shadow-outline)}.root.--variant-outline.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-neutral);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-primary);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-critical);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-positive);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-inherit{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:currentcolor;--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-ghost{--rs-button-border-width:0px}.root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-neutral);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-primary);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-primary-highlighted-faded)}.root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-critical);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-critical-highlighted-faded)}.root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-positive);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-positive-highlighted-faded)}.root.--variant-ghost.--color-inherit{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-ghost.--color-inherit .highlight{opacity:.08}.root.--variant-ghost.--color-media{--rs-button-group-separator-color:rgb(from var(--rs-color-white) r g b/12%);--rs-button-color:var(--rs-color-white);--rs-button-background-color:rgb(from var(--rs-color-black) r g b/28%);--rs-button-highlight-color:rgb(from var(--rs-color-black) r g b/12%)}.root.--raised:after,.root.--variant-outline:after{content:"";position:absolute;inset:var(--rs-button-border-width);pointer-events:none;border-radius:inherit;z-index:var(--rs-z-index-relative)}.root.--raised:after{box-shadow:var(--rs-shadow-raised-intense)}.root.--raised.--variant-outline:after,.root.--raised.--variant-solid.--color-neutral:after{box-shadow:var(--rs-shadow-raised)}.root.--raised.--variant-outline{background-color:var(--rs-color-background-elevation-raised)}.root.--disabled:not(.--color-media),.root.--disabled:not(.--color-media).--highlighted,.root.--disabled:not(.--color-media):active:not(.--loading),.root.--disabled:not(.--color-media):hover:not(.--loading){color:var(--rs-color-foreground-disabled)!important;background-color:var(--rs-color-background-disabled)!important}.root.--disabled:not(.--color-media) .highlight,.root.--disabled:not(.--color-media).--highlighted .highlight,.root.--disabled:not(.--color-media):active:not(.--loading) .highlight,.root.--disabled:not(.--color-media):hover:not(.--loading) .highlight{opacity:0!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline,.root.--disabled:not(.--color-media).--variant-outline,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline:before,.root.--disabled:not(.--color-media).--variant-outline:before,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline:before,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline:before{border-color:var(--rs-color-border-disabled)!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline:after,.root.--disabled:not(.--color-media).--variant-outline:after,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline:after,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline:after{content:none!important}.root.--disabled:not(.--color-media).--highlighted.--variant-ghost,.root.--disabled:not(.--color-media).--variant-ghost,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-ghost,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-ghost{background-color:transparent!important}.root.--color-media.--disabled,.root.--color-media.--disabled.--highlighted,.root.--color-media.--disabled:active,.root.--color-media.--disabled:hover{opacity:.6!important;background-color:var(--rs-button-background-color)!important}.group{display:inline-flex;position:relative}.group:has(.--full-width){display:flex}.group:has(.--variant-outline):after,.group:has(.--variant-outline):before{border-radius:var(--rs-radius-medium)}.group:has(.--variant-outline):has(.--size-small){border-radius:var(--rs-radius-small)}.group:has(.--variant-outline):before{content:"";position:absolute;pointer-events:none;z-index:calc(var(--rs-z-index-relative) + 1);inset:0;border:1px solid var(--rs-color-border-neutral);border-radius:6px}.group:has(.--variant-outline):after{content:"";position:absolute;inset:1px;pointer-events:none;border-radius:inherit;z-index:calc(var(--rs-z-index-relative) + 1)}.group .root{flex-shrink:0;width:auto}.group .root:active{transform:scale(1) translateZ(0)}.group .root,.group .root .highlight{border-radius:0}.group .root:first-child,.group .root:first-child .highlight{border-start-start-radius:var(--rs-button-radius);border-end-start-radius:var(--rs-button-radius)}.group .root:last-child,.group .root:last-child .highlight{border-start-end-radius:var(--rs-button-radius);border-end-end-radius:var(--rs-button-radius)}.group .root:before{border:none;inset-inline-end:auto;border-radius:0;transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.group .root:after{content:none}.group .root:not(:first-child):before{content:"";position:absolute;width:1px;inset-block:var(--rs-unit-x1);inset-inline-start:-.5px;border-radius:var(--rs-radius-circular);background-color:var(--rs-button-group-separator-color)}.group .root.--variant-outline{background:transparent}.group .root.--full-width{flex-grow:1}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-caption-1);--rs-button-font-size:var(--rs-font-size-caption-1);--rs-button-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{width:100%;text-align:center}.--full-width-false--m{width:auto;text-align:initial}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-caption-1);--rs-button-font-size:var(--rs-font-size-caption-1);--rs-button-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{width:100%;text-align:center}.--full-width-false--l{width:auto;text-align:initial}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-caption-1);--rs-button-font-size:var(--rs-font-size-caption-1);--rs-button-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{width:100%;text-align:center}.--full-width-false--xl{width:auto;text-align:initial}}
+.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);--rs-button-min-size:calc(var(--rs-button-line-height) + var(--rs-button-p-v) * 2);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform,opacity;padding:var(--rs-unit-x1) var(--rs-p-h);border-radius:var(--rs-button-radius);cursor:pointer;position:relative;z-index:0;text-align:initial;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-medium);font-size:var(--rs-button-font-size);line-height:var(--rs-button-line-height);letter-spacing:var(--rs-button-letter-spacing);box-sizing:border-box;min-height:var(--rs-button-min-size);min-width:var(--rs-button-min-size);background-color:var(--rs-button-background-color);color:var(--rs-button-color);isolation:isolate}.root:active{transform:scale(.985) translateZ(0)}.root.--highlighted{z-index:var(--rs-z-index-relative)}.root.--highlighted .highlight,.root.--highlighted:not(:has(.highlight)){background-color:var(--rs-button-highlight-color)}@media (hover:hover) and (pointer:fine){.root:hover:not(.--loading) .highlight,.root:hover:not(:has(.highlight),.--loading){background-color:var(--rs-button-highlight-color)}}.text{display:flex;align-items:center;gap:var(--rs-button-gap)}.text>:is(:first-child):not(.label,:only-child){margin-inline-start:calc(var(--rs-button-icon-align) * -1)}.text:not(:only-child)>:is(:last-child):not(.label,:only-child){margin-inline-end:calc(var(--rs-button-icon-align) * -1)}.icon{margin-inline-end:var(--rs-button-gap);margin-inline-start:calc(var(--rs-button-icon-align) * -1)}.icon.--icon-position-end{margin-inline-end:calc(var(--rs-button-icon-align) * -1);margin-inline-start:var(--rs-button-gap)}.--icon-only .icon{margin:0}.--icon-only .icon+.icon{margin-inline-start:var(--rs-button-gap)}.icon,.text{position:relative;z-index:var(--rs-z-index-relative)}.loader{display:none;align-items:center;justify-content:center;z-index:var(--rs-z-index-relative)}.highlight,.loader{position:absolute;inset:0}.highlight{pointer-events:none;border-radius:inherit;background-color:transparent;transition:var(--rs-duration-fast) var(--rs-easing-standard);transform:translateZ(0)}.root.--icon-only{--rs-p-h:calc(var(--rs-button-p-h) - var(--rs-unit-x1) / 2)}.root.--loading{cursor:default}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded,.root.--rounded:before{border-radius:var(--rs-radius-circular)}.--size-small{--rs-button-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-caption-1);--rs-button-font-size:var(--rs-font-size-caption-1);--rs-button-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-button-radius:var(--rs-radius-small)}.--size-medium{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width{width:100%;text-align:center}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-background-color:var(--rs-color-background-neutral);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted);--rs-button-color:var(--rs-color-on-background-neutral)}.root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary);--rs-button-background-color:var(--rs-color-background-primary);--rs-button-highlight-color:var(--rs-color-background-primary-highlighted);--rs-button-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical);--rs-button-background-color:var(--rs-color-background-critical);--rs-button-highlight-color:var(--rs-color-background-critical-highlighted);--rs-button-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive);--rs-button-background-color:var(--rs-color-background-positive);--rs-button-highlight-color:var(--rs-color-background-positive-highlighted);--rs-button-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-media{--rs-button-group-separator-color:rgb(from var(--rs-color-black) r g b/12%);--rs-button-color:var(--rs-color-black);--rs-button-background-color:var(--rs-color-white);--rs-button-highlight-color:rgb(from var(--rs-color-white) r g b/88%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline:before{content:"";position:absolute;pointer-events:none;border-radius:inherit;z-index:calc(var(--rs-z-index-relative) - 1);inset:0;border:var(--rs-button-border-width) solid var(--rs-color-border-neutral)}.root.--variant-outline:after{box-shadow:var(--rs-shadow-outline)}.root.--variant-outline.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-neutral);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-primary);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-critical);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:var(--rs-color-foreground-positive);--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-outline.--color-inherit{--rs-button-group-separator-color:var(--rs-color-border-neutral);--rs-button-color:currentcolor;--rs-button-background-color:var(--rs-color-background-elevation-base);--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-ghost{--rs-button-border-width:0px}.root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-neutral);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-neutral-highlighted-faded)}.root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-primary);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-primary-highlighted-faded)}.root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-critical);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-critical-highlighted-faded)}.root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:var(--rs-color-foreground-positive);--rs-button-background-color:transparent;--rs-button-highlight-color:var(--rs-color-background-positive-highlighted-faded)}.root.--variant-ghost.--color-inherit{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded);--rs-button-color:inherit;--rs-button-highlight-color:currentcolor}.root.--variant-ghost.--color-inherit .highlight{opacity:.08}.root.--variant-ghost.--color-media{--rs-button-group-separator-color:rgb(from var(--rs-color-white) r g b/12%);--rs-button-color:var(--rs-color-white);--rs-button-background-color:rgb(from var(--rs-color-black) r g b/28%);--rs-button-highlight-color:rgb(from var(--rs-color-black) r g b/12%)}.root.--raised:after,.root.--variant-outline:after{content:"";position:absolute;inset:var(--rs-button-border-width);pointer-events:none;border-radius:inherit;z-index:var(--rs-z-index-relative)}.root.--raised:after{box-shadow:var(--rs-shadow-raised-intense)}.root.--raised.--variant-outline:after,.root.--raised.--variant-solid.--color-neutral:after{box-shadow:var(--rs-shadow-raised)}.root.--raised.--variant-outline{background-color:var(--rs-color-background-elevation-raised)}.root.--disabled:not(.--color-media),.root.--disabled:not(.--color-media).--highlighted,.root.--disabled:not(.--color-media):active:not(.--loading),.root.--disabled:not(.--color-media):hover:not(.--loading){color:var(--rs-color-foreground-disabled)!important;background-color:var(--rs-color-background-disabled)!important}.root.--disabled:not(.--color-media) .highlight,.root.--disabled:not(.--color-media).--highlighted .highlight,.root.--disabled:not(.--color-media):active:not(.--loading) .highlight,.root.--disabled:not(.--color-media):hover:not(.--loading) .highlight{opacity:0!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline,.root.--disabled:not(.--color-media).--variant-outline,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline:before,.root.--disabled:not(.--color-media).--variant-outline:before,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline:before,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline:before{border-color:var(--rs-color-border-disabled)!important}.root.--disabled:not(.--color-media).--highlighted.--variant-outline:after,.root.--disabled:not(.--color-media).--variant-outline:after,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-outline:after,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-outline:after{content:none!important}.root.--disabled:not(.--color-media).--highlighted.--variant-ghost,.root.--disabled:not(.--color-media).--variant-ghost,.root.--disabled:not(.--color-media):active:not(.--loading).--variant-ghost,.root.--disabled:not(.--color-media):hover:not(.--loading).--variant-ghost{background-color:transparent!important}.root.--color-media.--disabled,.root.--color-media.--disabled.--highlighted,.root.--color-media.--disabled:active,.root.--color-media.--disabled:hover{opacity:.6!important;background-color:var(--rs-button-background-color)!important}.group{display:inline-flex;position:relative}.group:has(.--full-width){display:flex}.group:has(.--variant-outline):after,.group:has(.--variant-outline):before{border-radius:var(--rs-radius-medium)}.group:has(.--variant-outline):has(.--size-small){border-radius:var(--rs-radius-small)}.group:has(.--variant-outline):before{content:"";position:absolute;pointer-events:none;z-index:calc(var(--rs-z-index-relative) + 1);inset:0;border:1px solid var(--rs-color-border-neutral);border-radius:6px}.group:has(.--variant-outline):after{content:"";position:absolute;inset:1px;pointer-events:none;border-radius:inherit;z-index:calc(var(--rs-z-index-relative) + 1)}.group .root{flex-shrink:0;width:auto}.group .root:active{transform:scale(1) translateZ(0)}.group .root,.group .root .highlight{border-radius:0}.group .root:first-child,.group .root:first-child .highlight{border-start-start-radius:var(--rs-button-radius);border-end-start-radius:var(--rs-button-radius)}.group .root:last-child,.group .root:last-child .highlight{border-start-end-radius:var(--rs-button-radius);border-end-end-radius:var(--rs-button-radius)}.group .root:before{border:none;inset-inline-end:auto;border-radius:0;transition:background-color var(--rs-duration-fast) var(--rs-easing-standard)}.group .root:after{content:none}.group .root:not(:first-child):before{content:"";position:absolute;width:1px;inset-block:var(--rs-unit-x1);inset-inline-start:-.5px;border-radius:var(--rs-radius-circular);background-color:var(--rs-button-group-separator-color)}.group .root.--variant-outline{background:transparent}.group .root.--full-width{flex-grow:1}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-caption-1);--rs-button-font-size:var(--rs-font-size-caption-1);--rs-button-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-button-radius:var(--rs-radius-small)}.--size-medium--m{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--m{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--m{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--m{width:100%;text-align:center}.--full-width-false--m{width:auto;text-align:initial}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-caption-1);--rs-button-font-size:var(--rs-font-size-caption-1);--rs-button-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-button-radius:var(--rs-radius-small)}.--size-medium--l{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--l{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--l{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--l{width:100%;text-align:center}.--full-width-false--l{width:auto;text-align:initial}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:calc(var(--rs-unit-x1) + (var(--rs-line-height-body-2) - var(--rs-line-height-caption-1)) / 2);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-caption-1);--rs-button-font-size:var(--rs-font-size-caption-1);--rs-button-letter-spacing:var(--rs-letter-spacing-caption-1);--rs-button-radius:var(--rs-radius-small)}.--size-medium--xl{--rs-button-p-v:var(--rs-unit-x2);--rs-button-p-h:var(--rs-unit-x3);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x0-5);--rs-button-line-height:var(--rs-line-height-body-2);--rs-button-font-size:var(--rs-font-size-body-2);--rs-button-letter-spacing:var(--rs-letter-spacing-body-2);--rs-button-radius:var(--rs-radius-medium)}.--size-large--xl{--rs-button-p-v:var(--rs-unit-x3);--rs-button-p-h:var(--rs-unit-x4);--rs-button-gap:var(--rs-unit-x2);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-1);--rs-button-font-size:var(--rs-font-size-body-1);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--size-xlarge--xl{--rs-button-p-v:var(--rs-unit-x4);--rs-button-p-h:var(--rs-unit-x5);--rs-button-gap:var(--rs-unit-x3);--rs-button-icon-align:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-featured-6);--rs-button-font-size:var(--rs-font-size-featured-6);--rs-button-letter-spacing:var(--rs-letter-spacing-body-1);--rs-button-radius:var(--rs-radius-medium)}.--full-width-true--xl{width:100%;text-align:center}.--full-width-false--xl{width:auto;text-align:initial}}

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

@@ -1,9 +1,9 @@
 import type React from "react";
 import type { ClassName } from "@reshaped/utilities";
-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";
+import type { ActionableProps } from "../../components/Actionable/index.js";
+import type { IconProps } from "../../components/Icon/index.js";
+import type * as G from "../../types/global.js";
+import type { Attributes } from "../../types/global.js";
 export type Size = "xlarge" | "large" | "medium" | "small";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as" | "stopPropagation" | "render"> & {
     /** Component color scheme
@@ -43,4 +43,4 @@ export type GroupProps = {
     /** Additional attributes for the root element */
     attributes?: Attributes<"div">;
 };
-export type { AlignerProps } from "../../components/_private/Aligner";
+export type { AlignerProps } from "../../components/_private/Aligner/index.js";

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

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

package/dist/components/Button/ButtonAligner.js

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

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

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

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

@@ -1,9 +1,9 @@
-import Button from "./Button";
-import ButtonAligner from "./ButtonAligner";
-import ButtonGroup from "./ButtonGroup";
+import Button from "./Button.js";
+import ButtonAligner from "./ButtonAligner.js";
+import ButtonGroup from "./ButtonGroup.js";
 declare const ButtonRoot: typeof Button & {
     Aligner: typeof ButtonAligner;
     Group: typeof ButtonGroup;
 };
 export default ButtonRoot;
-export type { AlignerProps as ButtonAlignerProps, GroupProps as ButtonGroupProps, Props as ButtonProps, } from "./Button.types";
+export type { AlignerProps as ButtonAlignerProps, GroupProps as ButtonGroupProps, Props as ButtonProps, } from "./Button.types.js";