reshaped 3.3.11 → 3.3.12

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

@@ -11,102 +11,121 @@ export default {
         },
     },
 };
-export const color = () => (<Example>
-		<Example.Item title="color: neutral">
-			<Breadcrumbs 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>
+export const color = {
+    name: "color",
+    render: () => (<Example>
+			<Example.Item title="color: neutral">
+				<Breadcrumbs 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>
 
-		<Example.Item title="color: primary">
-			<Breadcrumbs color="primary" 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>);
-export const item = () => (<Example>
-		<Example.Item title="disabled item">
-			<Breadcrumbs color="primary" ariaLabel="breadcrumb disabled">
-				<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
-				<Breadcrumbs.Item onClick={() => { }} disabled>
-					Disabled item 2
-				</Breadcrumbs.Item>
-				<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
-			</Breadcrumbs>
-		</Example.Item>
-
-		<Example.Item title="item with icon">
-			<Breadcrumbs color="primary" ariaLabel="breadcrumb with icon">
-				<Breadcrumbs.Item icon={IconZap} onClick={() => { }}>
-					Item 1
-				</Breadcrumbs.Item>
-				<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
-				<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
-			</Breadcrumbs>
-		</Example.Item>
-	</Example>);
-export const slots = () => (<Example>
-		<Example.Item title="slot: separator">
-			<Breadcrumbs color="primary" separator="/" 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>
+			<Example.Item title="color: primary">
+				<Breadcrumbs color="primary" 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>),
+};
+export const item = {
+    name: "item, disabled",
+    render: () => (<Example>
+			<Example.Item title="disabled item">
+				<Breadcrumbs color="primary" ariaLabel="breadcrumb disabled">
+					<Breadcrumbs.Item onClick={() => { }}>Item 1</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }} disabled>
+						Disabled item 2
+					</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
+};
+export const icon = {
+    name: "item, icon",
+    render: () => (<Example>
+			<Example.Item title="item with icon">
+				<Breadcrumbs color="primary" ariaLabel="breadcrumb with icon">
+					<Breadcrumbs.Item icon={IconZap} onClick={() => { }}>
+						Item 1
+					</Breadcrumbs.Item>
+					<Breadcrumbs.Item onClick={() => { }}>Item 2</Breadcrumbs.Item>
+					<Breadcrumbs.Item>Item 3</Breadcrumbs.Item>
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
+};
+export const slots = {
+    name: "separator, children",
+    render: () => (<Example>
+			<Example.Item title="slot: separator">
+				<Breadcrumbs color="primary" separator="/" 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>
 
-		<Example.Item title="custom child content">
-			<Breadcrumbs 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>);
-export const collapsed = () => (<Example>
-		<Example.Item title="collapsed, 3 items shown by default">
-			<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumb with 3 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>
+			<Example.Item title="custom child content">
+				<Breadcrumbs 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>),
+};
+export const collapsed = {
+    name: "collapse",
+    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>
 
-		<Example.Item title="collapsed, 4 items shown by default">
-			<Breadcrumbs defaultVisibleItems={4} ariaLabel="breadcrumb with 4 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>
+			<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>
 
-		<Example.Item title="collapsed, 3 items shown by default, not expandable">
-			<Breadcrumbs defaultVisibleItems={3} ariaLabel="breadcrumb with 3 items" 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>);
-export const edgeCases = () => (<Example>
-		<Example.Item title="wraps content when multiline">
-			<Breadcrumbs ariaLabel="breadcrumb multiline">
-				{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (<Breadcrumbs.Item onClick={() => { }} key={i}>
-						Item {i}
-					</Breadcrumbs.Item>))}
-			</Breadcrumbs>
-		</Example.Item>
-	</Example>);
+			<Example.Item title="collapsed, 3 items shown by default, not expandable">
+				<Breadcrumbs defaultVisibleItems={3} 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>),
+};
+export const multiline = {
+    name: "composition, multiline",
+    render: () => (<Example>
+			<Example.Item title="wraps content when multiline">
+				<Breadcrumbs ariaLabel="breadcrumb multiline">
+					{[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((i) => (<Breadcrumbs.Item onClick={() => { }} key={i}>
+							Item {i}
+						</Breadcrumbs.Item>))}
+				</Breadcrumbs>
+			</Example.Item>
+		</Example>),
+};

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

@@ -0,0 +1,23 @@
+import { StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
+declare const _default: {
+    title: string;
+    component: ((props: import("./..").BreadcrumbsProps) => import("react").JSX.Element) & {
+        Item: (props: import("../Breadcrumbs.types").ItemProps) => import("react").JSX.Element;
+    };
+    parameters: {
+        iframe: {
+            url: string;
+        };
+        chromatic: {
+            disableSnapshot: boolean;
+        };
+    };
+};
+export default _default;
+export declare const onClick: StoryObj<{
+    handleClick: ReturnType<typeof fn>;
+}>;
+export declare const href: StoryObj;
+export declare const collapsible: StoryObj;
+export declare const className: StoryObj;

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

@@ -0,0 +1,76 @@
+import { fn, expect, userEvent } from "@storybook/test";
+import Breadcrumbs from "../index.js";
+export default {
+    title: "Components/Breadcrumbs/tests",
+    component: Breadcrumbs,
+    parameters: {
+        iframe: {
+            url: "https://reshaped.so/docs/components/breadcrumbs",
+        },
+        chromatic: { disableSnapshot: true },
+    },
+};
+export const onClick = {
+    name: "item, onClick, disabled",
+    args: {
+        handleClick: fn(),
+    },
+    render: (args) => (<Breadcrumbs>
+			<Breadcrumbs.Item onClick={args.handleClick}>Trigger</Breadcrumbs.Item>
+			<Breadcrumbs.Item onClick={args.handleClick} disabled>
+				Trigger
+			</Breadcrumbs.Item>
+		</Breadcrumbs>),
+    play: async ({ args, canvas }) => {
+        const trigggers = canvas.getAllByRole("button");
+        await userEvent.click(trigggers[0]);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+        expect(args.handleClick).toHaveBeenCalledWith(expect.objectContaining({ target: trigggers[0] }));
+        await userEvent.click(trigggers[1]);
+        expect(args.handleClick).toHaveBeenCalledTimes(1);
+    },
+};
+export const href = {
+    name: "item, href",
+    render: () => (<Breadcrumbs>
+			<Breadcrumbs.Item href="https://reshaped.so">Trigger</Breadcrumbs.Item>
+		</Breadcrumbs>),
+    play: async ({ canvas }) => {
+        const trigggers = canvas.getAllByRole("link");
+        expect(trigggers[0]).toHaveAttribute("href", "https://reshaped.so");
+    },
+};
+export const collapsible = {
+    name: "collapsible",
+    render: () => (<Breadcrumbs defaultVisibleItems={2} expandAriaLabel="Expand">
+			<Breadcrumbs.Item onClick={() => { }}>Trigger 1</Breadcrumbs.Item>
+			<Breadcrumbs.Item onClick={() => { }}>Trigger 2</Breadcrumbs.Item>
+			<Breadcrumbs.Item onClick={() => { }}>Trigger 3</Breadcrumbs.Item>
+			<Breadcrumbs.Item onClick={() => { }}>Trigger 4</Breadcrumbs.Item>
+		</Breadcrumbs>),
+    play: async ({ canvas }) => {
+        let triggers = canvas.getAllByRole("button");
+        expect(triggers[0]).toHaveTextContent("Trigger 1");
+        expect(triggers[1]).toHaveAccessibleName("Expand");
+        expect(triggers[2]).toHaveTextContent("Trigger 4");
+        await userEvent.click(triggers[1]);
+        triggers = canvas.getAllByRole("button");
+        expect(triggers[0]).toHaveTextContent("Trigger 1");
+        expect(triggers[1]).toHaveTextContent("Trigger 2");
+        expect(triggers[2]).toHaveTextContent("Trigger 3");
+        expect(triggers[3]).toHaveTextContent("Trigger 4");
+    },
+};
+export const className = {
+    name: "className, attributes",
+    render: () => (<div data-testid="root">
+			<Breadcrumbs className="test-classname" attributes={{ id: "test-id" }}>
+				<Breadcrumbs.Item>Trigger</Breadcrumbs.Item>
+			</Breadcrumbs>
+		</div>),
+    play: async ({ canvas }) => {
+        const root = canvas.getByTestId("root").firstChild;
+        expect(root).toHaveClass("test-classname");
+        expect(root).toHaveAttribute("id", "test-id");
+    },
+};

package/dist/components/Button/Button.js

@@ -8,7 +8,7 @@ import ButtonGroup from "./ButtonGroup.js";
 import ButtonAligner from "./ButtonAligner.js";
 import s from "./Button.module.css";
 const Button = forwardRef((props, ref) => {
-    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, className, attributes, } = props;
+    const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, loadingAriaLabel, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, className, attributes, } = props;
     const iconOnly = (icon || endIcon) && !children;
     const rootClassName = classNames(s.root, className, color && s[`--color-${color}`], variant && s[`--variant-${variant}`], responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--full-width", fullWidth), elevated && variant !== "ghost" && s["--elevated"], rounded && s["--rounded"], disabled && s["--disabled"], loading && s["--loading"], highlighted && s["--highlighted"], iconOnly && s["--icon-only"]);
     const renderIcon = (position) => {
@@ -27,7 +27,10 @@ const Button = forwardRef((props, ref) => {
         });
         return (_jsx(Icon, { className: iconClassName, svg: (position === "start" ? icon : endIcon), size: iconSize, autoWidth: true }));
     };
-    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: { ...attributes, "data-rs-aligner-target": true }, type: type, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { color: "inherit" }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
+    return (_jsxs(Actionable, { disabled: disabled || loading, className: rootClassName, attributes: {
+            ...attributes,
+            "data-rs-aligner-target": true,
+        }, type: type, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, children: [loading && (_jsx("div", { className: s.loader, children: _jsx(Loader, { color: "inherit", attributes: { "aria-label": loadingAriaLabel } }) })), renderIcon("start"), children && _jsx("span", { className: s.text, children: children }), renderIcon("end")] }));
 });
 Button.Group = ButtonGroup;
 Button.Aligner = ButtonAligner;

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);align-items:center;border:var(--rs-button-border-width) solid transparent;border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:active{transform:scale(.98)}.root:before{content:"";inset:0;opacity:0;position:absolute;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon{margin-inline-end:var(--rs-button-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.icon,.text{position:relative;z-index:5}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded{border-radius:999px}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--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-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--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-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-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-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)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-neutral,.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.root.--variant-faded.--color-neutral:before,.root.--variant-solid.--color-neutral:before{background-color:var(--rs-color-on-background-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before,.root.--variant-solid.--color-neutral.--highlighted:before,.root.--variant-solid.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary:before{background-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted:before,.root.--variant-solid.--color-primary:hover:not(.--loading):before{opacity:.08}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical:before{background-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted:before,.root.--variant-solid.--color-critical:hover:not(.--loading):before{opacity:.08}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive:before{background-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted:before,.root.--variant-solid.--color-positive:hover:not(.--loading):before{opacity:.08}.root.--variant-solid.--color-media{background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-media:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-media.--highlighted:before,.root.--variant-solid.--color-media:hover:not(.--loading,.--disabled):before{opacity:.04}.root.--variant-faded{--rs-button-border-width:0px}.root.--variant-faded.--color-neutral{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-primary{background-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary.--highlighted:before,.root.--variant-faded.--color-primary:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-critical{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical.--highlighted:before,.root.--variant-faded.--color-critical:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-positive{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive.--highlighted:before,.root.--variant-faded.--color-positive:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-media{color:var(--rs-color-white)}.root.--variant-faded.--color-media:before{background-color:var(--rs-color-black);opacity:.28}.root.--variant-faded.--color-media.--highlighted:before,.root.--variant-faded.--color-media:hover:not(.--loading,.--disabled):before{opacity:.32}.root.--variant-faded.--color-inherit{color:inherit}.root.--variant-faded.--color-inherit:before{background-color:currentcolor;opacity:.16}.root.--variant-faded.--color-inherit.--highlighted:before,.root.--variant-faded.--color-inherit:hover:not(.--loading):before{opacity:.2}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline.--color-neutral{border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted:before,.root.--variant-outline.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-outline.--color-primary{border-color:var(--rs-color-border-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted:before,.root.--variant-outline.--color-primary:hover:not(.--loading):before{opacity:.08}.root.--variant-outline.--color-critical{border-color:var(--rs-color-border-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted:before,.root.--variant-outline.--color-critical:hover:not(.--loading):before{opacity:.08}.root.--variant-outline.--color-positive{border-color:var(--rs-color-border-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted:before,.root.--variant-outline.--color-positive:hover:not(.--loading):before{opacity:.08}.root.--variant-outline.--color-inherit{color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor}.root.--variant-outline.--color-inherit:after{border:1px solid;border-radius:var(--rs-button-radius);content:"";inset:0;opacity:.32;pointer-events:none;position:absolute}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--variant-ghost{--rs-button-border-width:0px}.root.--variant-ghost.--color-neutral{color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral:before{background-color:var(--rs-color-background-neutral)}.root.--variant-ghost.--color-neutral.--highlighted:before,.root.--variant-ghost.--color-neutral:hover:not(.--loading):before{opacity:.32}.root.--variant-ghost.--color-primary{color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary:before{background-color:var(--rs-color-background-primary)}.root.--variant-ghost.--color-primary.--highlighted:before,.root.--variant-ghost.--color-primary:hover:not(.--loading):before{opacity:.12}.root.--variant-ghost.--color-critical{color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical:before{background-color:var(--rs-color-background-critical)}.root.--variant-ghost.--color-critical.--highlighted:before,.root.--variant-ghost.--color-critical:hover:not(.--loading):before{opacity:.12}.root.--variant-ghost.--color-positive{color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive:before{background-color:var(--rs-color-background-positive)}.root.--variant-ghost.--color-positive.--highlighted:before,.root.--variant-ghost.--color-positive:hover:not(.--loading):before{opacity:.12}.root.--variant-ghost.--color-inherit{color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}[data-rs-keyboard] .root.--elevated:not(:focus){box-shadow:var(--rs-shadow-raised)}.root.--elevated.--variant-outline.--color-critical,.root.--elevated.--variant-outline.--color-neutral,.root.--elevated.--variant-outline.--color-positive,.root.--elevated.--variant-outline.--color-primary{background:var(--rs-color-background-elevation-raised)}.root.--disabled:active{transform:none!important}.root.--disabled.--color-critical,.root.--disabled.--color-critical.--highlighted,.root.--disabled.--color-critical:hover,.root.--disabled.--color-inherit,.root.--disabled.--color-inherit.--highlighted,.root.--disabled.--color-inherit:hover,.root.--disabled.--color-neutral,.root.--disabled.--color-neutral.--highlighted,.root.--disabled.--color-neutral:hover,.root.--disabled.--color-positive,.root.--disabled.--color-positive.--highlighted,.root.--disabled.--color-positive:hover,.root.--disabled.--color-primary,.root.--disabled.--color-primary.--highlighted,.root.--disabled.--color-primary:hover{background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled.--color-critical.--highlighted:before,.root.--disabled.--color-critical:before,.root.--disabled.--color-critical:hover:before,.root.--disabled.--color-inherit.--highlighted:before,.root.--disabled.--color-inherit:before,.root.--disabled.--color-inherit:hover:before,.root.--disabled.--color-neutral.--highlighted:before,.root.--disabled.--color-neutral:before,.root.--disabled.--color-neutral:hover:before,.root.--disabled.--color-positive.--highlighted:before,.root.--disabled.--color-positive:before,.root.--disabled.--color-positive:hover:before,.root.--disabled.--color-primary.--highlighted:before,.root.--disabled.--color-primary:before,.root.--disabled.--color-primary:hover:before{opacity:0!important}.root.--disabled.--color-critical.--highlighted.--variant-faded,.root.--disabled.--color-critical.--variant-faded,.root.--disabled.--color-critical:hover.--variant-faded,.root.--disabled.--color-inherit.--highlighted.--variant-faded,.root.--disabled.--color-inherit.--variant-faded,.root.--disabled.--color-inherit:hover.--variant-faded,.root.--disabled.--color-neutral.--highlighted.--variant-faded,.root.--disabled.--color-neutral.--variant-faded,.root.--disabled.--color-neutral:hover.--variant-faded,.root.--disabled.--color-positive.--highlighted.--variant-faded,.root.--disabled.--color-positive.--variant-faded,.root.--disabled.--color-positive:hover.--variant-faded,.root.--disabled.--color-primary.--highlighted.--variant-faded,.root.--disabled.--color-primary.--variant-faded,.root.--disabled.--color-primary:hover.--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--color-critical.--highlighted.--variant-outline,.root.--disabled.--color-critical.--variant-outline,.root.--disabled.--color-critical:hover.--variant-outline,.root.--disabled.--color-inherit.--highlighted.--variant-outline,.root.--disabled.--color-inherit.--variant-outline,.root.--disabled.--color-inherit:hover.--variant-outline,.root.--disabled.--color-neutral.--highlighted.--variant-outline,.root.--disabled.--color-neutral.--variant-outline,.root.--disabled.--color-neutral:hover.--variant-outline,.root.--disabled.--color-positive.--highlighted.--variant-outline,.root.--disabled.--color-positive.--variant-outline,.root.--disabled.--color-positive:hover.--variant-outline,.root.--disabled.--color-primary.--highlighted.--variant-outline,.root.--disabled.--color-primary.--variant-outline,.root.--disabled.--color-primary:hover.--variant-outline{background-color:transparent!important}.root.--disabled.--color-critical.--highlighted.--variant-ghost,.root.--disabled.--color-critical.--variant-ghost,.root.--disabled.--color-critical:hover.--variant-ghost,.root.--disabled.--color-inherit.--highlighted.--variant-ghost,.root.--disabled.--color-inherit.--variant-ghost,.root.--disabled.--color-inherit:hover.--variant-ghost,.root.--disabled.--color-neutral.--highlighted.--variant-ghost,.root.--disabled.--color-neutral.--variant-ghost,.root.--disabled.--color-neutral:hover.--variant-ghost,.root.--disabled.--color-positive.--highlighted.--variant-ghost,.root.--disabled.--color-positive.--variant-ghost,.root.--disabled.--color-positive:hover.--variant-ghost,.root.--disabled.--color-primary.--highlighted.--variant-ghost,.root.--disabled.--color-primary.--variant-ghost,.root.--disabled.--color-primary:hover.--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled.--color-media,.root.--disabled.--color-media.--highlighted,.root.--disabled.--color-media:hover{opacity:.4!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--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-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--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-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-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-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)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--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-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--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-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-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-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)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--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-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--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-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-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-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)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
+.root{--rs-p-v:var(--rs-button-p-v);--rs-p-h:var(--rs-button-p-h);align-items:center;border:var(--rs-button-border-width) solid transparent;border-radius:var(--rs-button-radius);box-sizing:border-box;cursor:pointer;display:inline-flex;justify-content:center;overflow:hidden;padding:calc(var(--rs-unit-x1) - var(--rs-button-border-width)) calc(var(--rs-p-h) - var(--rs-button-border-width));position:relative;text-align:initial;text-decoration:none;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,box-shadow,border-color,color,transform;z-index:0;-webkit-tap-highlight-color:transparent;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);letter-spacing:var(--rs-button-letter-spacing);line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-p-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-p-h) * 2))}.root:active{transform:scale(.98)}.root:before{content:"";inset:0;opacity:0;position:absolute;transform:translateZ(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.text{align-items:center;display:flex;gap:var(--rs-button-gap)}.icon{margin-inline-end:var(--rs-button-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-gap)}.icon:last-child{margin-inline-end:0}.icon,.text{position:relative;z-index:5}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.root.--rounded{border-radius:999px}.--size-small{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--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-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--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-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-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-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)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-neutral,.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-on-background-neutral)}.root.--variant-faded.--color-neutral:before,.root.--variant-solid.--color-neutral:before{background-color:var(--rs-color-on-background-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before,.root.--variant-solid.--color-neutral.--highlighted:before,.root.--variant-solid.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary:before{background-color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted:before,.root.--variant-solid.--color-primary:hover:not(.--loading):before{opacity:.08}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical:before{background-color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted:before,.root.--variant-solid.--color-critical:hover:not(.--loading):before{opacity:.08}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive:before{background-color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted:before,.root.--variant-solid.--color-positive:hover:not(.--loading):before{opacity:.08}.root.--variant-solid.--color-media{background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-media:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-media.--highlighted:before,.root.--variant-solid.--color-media:hover:not(.--loading,.--disabled):before{opacity:.04}.root.--variant-faded{--rs-button-border-width:0px}.root.--variant-faded.--color-neutral{background-color:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-faded.--color-neutral.--highlighted:before,.root.--variant-faded.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-primary{background-color:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-faded.--color-primary.--highlighted:before,.root.--variant-faded.--color-primary:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-critical{background-color:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-faded.--color-critical.--highlighted:before,.root.--variant-faded.--color-critical:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-positive{background-color:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-faded.--color-positive.--highlighted:before,.root.--variant-faded.--color-positive:hover:not(.--loading):before{opacity:.04}.root.--variant-faded.--color-media{color:var(--rs-color-white)}.root.--variant-faded.--color-media:before{background-color:var(--rs-color-black);opacity:.28}.root.--variant-faded.--color-media.--highlighted:before,.root.--variant-faded.--color-media:hover:not(.--loading,.--disabled):before{opacity:.32}.root.--variant-faded.--color-inherit{color:inherit}.root.--variant-faded.--color-inherit:before{background-color:currentcolor;opacity:.16}.root.--variant-faded.--color-inherit.--highlighted:before,.root.--variant-faded.--color-inherit:hover:not(.--loading):before{opacity:.2}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline.--color-neutral{border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral:before{background-color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted:before,.root.--variant-outline.--color-neutral:hover:not(.--loading):before{opacity:.04}.root.--variant-outline.--color-primary{border-color:var(--rs-color-border-primary-faded);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary:before{background-color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted:before,.root.--variant-outline.--color-primary:hover:not(.--loading):before{opacity:.08}.root.--variant-outline.--color-critical{border-color:var(--rs-color-border-critical-faded);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical:before{background-color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted:before,.root.--variant-outline.--color-critical:hover:not(.--loading):before{opacity:.08}.root.--variant-outline.--color-positive{border-color:var(--rs-color-border-positive-faded);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive:before{background-color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted:before,.root.--variant-outline.--color-positive:hover:not(.--loading):before{opacity:.08}.root.--variant-outline.--color-inherit{color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor}.root.--variant-outline.--color-inherit:after{border:1px solid;border-radius:var(--rs-button-radius);content:"";inset:0;opacity:.32;pointer-events:none;position:absolute}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--variant-ghost{--rs-button-border-width:0px}.root.--variant-ghost.--color-neutral{color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral:before{background-color:var(--rs-color-background-neutral)}.root.--variant-ghost.--color-neutral.--highlighted:before,.root.--variant-ghost.--color-neutral:hover:not(.--loading):before{opacity:.32}.root.--variant-ghost.--color-primary{color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary:before{background-color:var(--rs-color-background-primary)}.root.--variant-ghost.--color-primary.--highlighted:before,.root.--variant-ghost.--color-primary:hover:not(.--loading):before{opacity:.12}.root.--variant-ghost.--color-critical{color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical:before{background-color:var(--rs-color-background-critical)}.root.--variant-ghost.--color-critical.--highlighted:before,.root.--variant-ghost.--color-critical:hover:not(.--loading):before{opacity:.12}.root.--variant-ghost.--color-positive{color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive:before{background-color:var(--rs-color-background-positive)}.root.--variant-ghost.--color-positive.--highlighted:before,.root.--variant-ghost.--color-positive:hover:not(.--loading):before{opacity:.12}.root.--variant-ghost.--color-inherit{color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--elevated:not(:focus),[data-rs-keyboard] .root.--elevated:not(:focus){box-shadow:var(--rs-shadow-raised)}.root.--elevated.--variant-outline.--color-critical,.root.--elevated.--variant-outline.--color-neutral,.root.--elevated.--variant-outline.--color-positive,.root.--elevated.--variant-outline.--color-primary{background:var(--rs-color-background-elevation-raised)}.root.--disabled:active{transform:none!important}.root.--disabled.--color-critical,.root.--disabled.--color-critical.--highlighted,.root.--disabled.--color-critical:hover,.root.--disabled.--color-inherit,.root.--disabled.--color-inherit.--highlighted,.root.--disabled.--color-inherit:hover,.root.--disabled.--color-neutral,.root.--disabled.--color-neutral.--highlighted,.root.--disabled.--color-neutral:hover,.root.--disabled.--color-positive,.root.--disabled.--color-positive.--highlighted,.root.--disabled.--color-positive:hover,.root.--disabled.--color-primary,.root.--disabled.--color-primary.--highlighted,.root.--disabled.--color-primary:hover{background-color:var(--rs-color-background-disabled)!important;border-color:var(--rs-color-border-disabled)!important;color:var(--rs-color-foreground-disabled)!important}.root.--disabled.--color-critical.--highlighted:before,.root.--disabled.--color-critical:before,.root.--disabled.--color-critical:hover:before,.root.--disabled.--color-inherit.--highlighted:before,.root.--disabled.--color-inherit:before,.root.--disabled.--color-inherit:hover:before,.root.--disabled.--color-neutral.--highlighted:before,.root.--disabled.--color-neutral:before,.root.--disabled.--color-neutral:hover:before,.root.--disabled.--color-positive.--highlighted:before,.root.--disabled.--color-positive:before,.root.--disabled.--color-positive:hover:before,.root.--disabled.--color-primary.--highlighted:before,.root.--disabled.--color-primary:before,.root.--disabled.--color-primary:hover:before{opacity:0!important}.root.--disabled.--color-critical.--highlighted.--variant-faded,.root.--disabled.--color-critical.--variant-faded,.root.--disabled.--color-critical:hover.--variant-faded,.root.--disabled.--color-inherit.--highlighted.--variant-faded,.root.--disabled.--color-inherit.--variant-faded,.root.--disabled.--color-inherit:hover.--variant-faded,.root.--disabled.--color-neutral.--highlighted.--variant-faded,.root.--disabled.--color-neutral.--variant-faded,.root.--disabled.--color-neutral:hover.--variant-faded,.root.--disabled.--color-positive.--highlighted.--variant-faded,.root.--disabled.--color-positive.--variant-faded,.root.--disabled.--color-positive:hover.--variant-faded,.root.--disabled.--color-primary.--highlighted.--variant-faded,.root.--disabled.--color-primary.--variant-faded,.root.--disabled.--color-primary:hover.--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--color-critical.--highlighted.--variant-outline,.root.--disabled.--color-critical.--variant-outline,.root.--disabled.--color-critical:hover.--variant-outline,.root.--disabled.--color-inherit.--highlighted.--variant-outline,.root.--disabled.--color-inherit.--variant-outline,.root.--disabled.--color-inherit:hover.--variant-outline,.root.--disabled.--color-neutral.--highlighted.--variant-outline,.root.--disabled.--color-neutral.--variant-outline,.root.--disabled.--color-neutral:hover.--variant-outline,.root.--disabled.--color-positive.--highlighted.--variant-outline,.root.--disabled.--color-positive.--variant-outline,.root.--disabled.--color-positive:hover.--variant-outline,.root.--disabled.--color-primary.--highlighted.--variant-outline,.root.--disabled.--color-primary.--variant-outline,.root.--disabled.--color-primary:hover.--variant-outline{background-color:transparent!important}.root.--disabled.--color-critical.--highlighted.--variant-ghost,.root.--disabled.--color-critical.--variant-ghost,.root.--disabled.--color-critical:hover.--variant-ghost,.root.--disabled.--color-inherit.--highlighted.--variant-ghost,.root.--disabled.--color-inherit.--variant-ghost,.root.--disabled.--color-inherit:hover.--variant-ghost,.root.--disabled.--color-neutral.--highlighted.--variant-ghost,.root.--disabled.--color-neutral.--variant-ghost,.root.--disabled.--color-neutral:hover.--variant-ghost,.root.--disabled.--color-positive.--highlighted.--variant-ghost,.root.--disabled.--color-positive.--variant-ghost,.root.--disabled.--color-positive:hover.--variant-ghost,.root.--disabled.--color-primary.--highlighted.--variant-ghost,.root.--disabled.--color-primary.--variant-ghost,.root.--disabled.--color-primary:hover.--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled.--color-media,.root.--disabled.--color-media.--highlighted,.root.--disabled.--color-media:hover{opacity:.4!important}.group .root{border-radius:0}.group .root:first-child{border-end-start-radius:var(--rs-button-radius);border-start-start-radius:var(--rs-button-radius)}.group .root:not(:first-child){border-inline-start:1px solid var(--rs-button-group-separator-color)}.group .root:last-child{border-end-end-radius:var(--rs-button-radius);border-start-end-radius:var(--rs-button-radius)}.group .root.--variant-solid.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral)}.group .root.--variant-ghost.--color-neutral{--rs-button-group-separator-color:var(--rs-color-border-neutral-faded)}.group .root.--variant-solid.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive)}.group .root.--variant-ghost.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-solid.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical)}.group .root.--variant-ghost.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-solid.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary)}.group .root.--variant-ghost.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-faded.--color-positive{--rs-button-group-separator-color:var(--rs-color-border-positive-faded)}.group .root.--variant-faded.--color-critical{--rs-button-group-separator-color:var(--rs-color-border-critical-faded)}.group .root.--variant-faded.--color-primary{--rs-button-group-separator-color:var(--rs-color-border-primary-faded)}.group .root.--variant-solid.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.group .root.--variant-faded.--color-black{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.14)}.group .root.--variant-faded.--color-white,.group .root.--variant-ghost.--color-black,.group .root.--variant-solid.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-black),0.2)}.group .root.--variant-ghost.--color-white{--rs-button-group-separator-color:rgba(var(--rs-color-rgb-white),0.28)}.aligner{line-height:0}@media (--rs-viewport-m ){.--size-small--m{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--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-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--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-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-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-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)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (--rs-viewport-l ){.--size-small--l{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--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-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--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-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-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-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)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (--rs-viewport-xl ){.--size-small--xl{--rs-button-p-v:var(--rs-unit-x1);--rs-button-p-h:var(--rs-unit-x2);--rs-button-gap:var(--rs-unit-x1);--rs-button-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--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-line-height:var(--rs-line-height-body-3);--rs-button-font-size:var(--rs-font-size-body-3);--rs-button-letter-spacing:var(--rs-letter-spacing-body-3);--rs-button-radius:var(--rs-radius-small)}.--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-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-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-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)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}

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

@@ -12,6 +12,7 @@ export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled
     size?: G.Responsive<Size>;
     rounded?: boolean;
     loading?: boolean;
+    loadingAriaLabel?: string;
     elevated?: boolean;
     fullWidth?: G.Responsive<boolean>;
     highlighted?: boolean;

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

@@ -8,10 +8,10 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const variant: () => import("react").JSX.Element;
+export declare const variantAndColor: () => import("react").JSX.Element;
 export declare const icon: () => import("react").JSX.Element;
-export declare const elevated: () => import("react").JSX.Element;
 export declare const size: () => import("react").JSX.Element;
+export declare const elevated: () => import("react").JSX.Element;
 export declare const rounded: () => import("react").JSX.Element;
 export declare const fullWidth: () => import("react").JSX.Element;
 export declare const loading: () => import("react").JSX.Element;