reshaped 4.2.0-canary.1 → 4.2.0

package/dist/components/Accordion/AccordionContent.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Expandable from "../../components/_private/Expandable";
+import Expandable from "../../components/Expandable";
 import View from "../../components/View";
 import AccordionContext from "./Accordion.context";
 const AccordionContent = (props) => {

package/dist/components/Badge/Badge.js

@@ -18,10 +18,13 @@ const Badge = forwardRef((props, ref) => {
     const empty = !hasText && !icon && !endIcon;
     const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"], empty && s["--empty"]);
     const handleDismiss = (e) => {
+        // Prevent the parent Actionable from handling the click,
+        // including following the link when the badge is rendered as one
+        e.preventDefault();
         e.stopPropagation();
         onDismiss?.();
     };
-    return (_jsx(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: isActionable, children: _jsxs("span", { className: s.content, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), hasText && (_jsx(Text, { variant: size === "large" ? "body-2" : "caption-1", weight: "medium", attributes: {
+    return (_jsx(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: isActionable, children: _jsxs("span", { className: s.content, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), hasText && (_jsx(Text, { variant: size === "large" ? "body-2" : "caption-1", weight: "medium", className: s.text, attributes: {
                         "aria-hidden": hidden ? "true" : undefined,
                     }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: handleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }) }));
 });

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

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

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

@@ -45,6 +45,10 @@ export declare const container: {
     render: () => React.JSX.Element;
 };
 export declare const href: StoryObj;
+export declare const hrefDismissible: StoryObj<{
+    handleDismiss: ReturnType<typeof fn>;
+}>;
+export declare const truncation: StoryObj;
 export declare const onClick: StoryObj<{
     handleClick: ReturnType<typeof fn>;
 }>;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.animated = exports.className = exports.onClick = exports.href = exports.container = exports.highlighted = exports.empty = exports.rounded = exports.onDismiss = exports.icon = exports.size = exports.color = void 0;
+exports.animated = exports.className = exports.onClick = exports.truncation = exports.hrefDismissible = exports.href = exports.container = exports.highlighted = exports.empty = exports.rounded = exports.onDismiss = exports.icon = exports.size = exports.color = void 0;
 const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
 const Avatar_1 = __importDefault(require("../../../components/Avatar"));
@@ -306,6 +306,53 @@ exports.href = {
         (0, test_1.expect)(link).toHaveAttribute("href", "https://reshaped.so");
     },
 };
+exports.hrefDismissible = {
+    name: "test: href, onDismiss",
+    args: {
+        handleDismiss: (0, test_1.fn)(),
+    },
+    render: (args) => (<Badge_1.default href="#badge-dismiss" onDismiss={args.handleDismiss} dismissAriaLabel="Dismiss">
+			Badge
+		</Badge_1.default>),
+    play: async ({ canvas, args }) => {
+        const initialHash = window.location.hash;
+        const dismissTrigger = canvas.getByRole("button", { name: "Dismiss" });
+        (0, test_1.expect)(canvas.getByRole("link")).toHaveAttribute("href", "#badge-dismiss");
+        await test_1.userEvent.click(dismissTrigger);
+        (0, test_1.expect)(args.handleDismiss).toHaveBeenCalledTimes(1);
+        // Dismissing the badge shouldn't follow the link
+        (0, test_1.expect)(window.location.hash).toBe(initialHash);
+    },
+};
+exports.truncation = {
+    name: "test: truncation",
+    render: () => (<storybook_1.Example>
+			<storybook_1.Example.Item title={["truncation", "text is truncated, badge is not wider than 200px"]}>
+				<View_1.default width="200px" align="start" gap={3} attributes={{ "data-testid": "root" }}>
+					<Badge_1.default attributes={{ "data-testid": "badge" }}>
+						Badge with a very long text that should get truncated
+					</Badge_1.default>
+					<Badge_1.default icon={Plus_1.default} endIcon={Plus_1.default} attributes={{ "data-testid": "badge" }}>
+						Badge with a very long text that should get truncated
+					</Badge_1.default>
+					<Badge_1.default onDismiss={() => { }} dismissAriaLabel="Dismiss" attributes={{ "data-testid": "badge" }}>
+						Badge with a very long text that should get truncated
+					</Badge_1.default>
+				</View_1.default>
+			</storybook_1.Example.Item>
+		</storybook_1.Example>),
+    play: async ({ canvas }) => {
+        const badges = canvas.getAllByTestId("badge");
+        badges.forEach((badge) => {
+            // Badge is not growing wider than its parent
+            (0, test_1.expect)(badge.getBoundingClientRect().width).toBeLessThanOrEqual(200);
+            // Badge text is rendered on a single line and gets clipped
+            const text = badge.querySelector("div");
+            (0, test_1.expect)(text.scrollWidth).toBeGreaterThan(text.clientWidth);
+            (0, test_1.expect)(getComputedStyle(text).textOverflow).toBe("ellipsis");
+        });
+    },
+};
 exports.onClick = {
     name: "onClick",
     args: {

package/dist/components/Button/Button.js

@@ -23,6 +23,8 @@ const Button = forwardRef((props, ref) => {
                 return 5;
             if (size === "xlarge")
                 return 6;
+            if (size === "small")
+                return 3.5;
             return 4;
         });
         return (_jsx(Icon, { className: iconClassName, svg: (position === "start" ? icon : endIcon), size: iconSize, autoWidth: true }));

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-5);--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-5);--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-5);--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-5);--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,.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/tests/Button.stories.js

@@ -151,6 +151,7 @@ exports.size = {
 					<Button_1.default size="small" variant="ghost" icon={Zap_1.default}>
 						Button
 					</Button_1.default>
+					<Button_1.default size="small" variant="outline" icon={Zap_1.default}/>
 				</View_1.default>
 			</storybook_1.Example.Item>
 

package/dist/components/ContentToggle/ContentToggle.d.ts

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

package/dist/components/ContentToggle/ContentToggle.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import Presence from "../../components/_private/Presence";
+import s from "./ContentToggle.module.css";
+const ContentToggle = (props) => {
+    const { children, id, direction = "end", className, attributes } = props;
+    const rootClassName = classNames(s.root, s[`--direction-${direction}`], className);
+    return (_jsx(Presence, { as: "div", itemKey: id, className: rootClassName, attributes: attributes, enterClassName: s["--enter"], exitClassName: s["--exit"], children: children }));
+};
+ContentToggle.displayName = "ContentToggle";
+export default ContentToggle;

package/dist/components/ContentToggle/ContentToggle.module.css

@@ -0,0 +1 @@
+.root{--rs-content-toggle-offset:var(--rs-unit-x2);align-items:start}.--direction-start{--rs-content-toggle-direction:-1}.--direction-end,[dir=rtl] .--direction-start{--rs-content-toggle-direction:1}[dir=rtl] .--direction-end{--rs-content-toggle-direction:-1}.--enter{animation:rs-content-toggle-enter var(--rs-duration-slow) var(--rs-easing-standard)}.--exit{animation:rs-content-toggle-exit var(--rs-duration-slow) var(--rs-easing-standard) forwards}@keyframes rs-content-toggle-enter{0%{opacity:0;transform:translateX(calc(var(--rs-content-toggle-offset) * var(--rs-content-toggle-direction) * -1))}}@keyframes rs-content-toggle-exit{to{opacity:0;transform:translateX(calc(var(--rs-content-toggle-offset) * var(--rs-content-toggle-direction)))}}

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

@@ -0,0 +1,16 @@
+import type React from "react";
+import type { ClassName } from "@reshaped/utilities";
+import type { Attributes } from "../../types/global";
+export type Direction = "start" | "end";
+export type Props = {
+    /** Node for inserting the content */
+    children?: React.ReactNode;
+    /** Identity of the currently rendered content, animating the change whenever it changes */
+    id?: string | number | boolean;
+    /** Side the current content slides out to, while the next one slides in from the opposite one */
+    direction?: Direction;
+    /** Additional classname for the root element */
+    className?: ClassName;
+    /** Additional attributes for the root element */
+    attributes?: Attributes<"div">;
+};

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

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

package/dist/components/ContentToggle/index.js

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

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

@@ -0,0 +1,10 @@
+import React from "react";
+declare const _default: {
+    title: string;
+    component: React.FC<import("../../../components/ContentToggle").ContentToggleProps>;
+};
+export default _default;
+export declare const example: {
+    name: string;
+    render: () => React.JSX.Element;
+};

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

@@ -0,0 +1,75 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.example = void 0;
+const react_1 = __importDefault(require("react"));
+const Button_1 = __importDefault(require("../../../components/Button"));
+const ContentToggle_1 = __importDefault(require("../../../components/ContentToggle"));
+const Text_1 = __importDefault(require("../../../components/Text"));
+const View_1 = __importDefault(require("../../../components/View"));
+const ChevronLeft_1 = __importDefault(require("../../../icons/ChevronLeft"));
+const ChevronRight_1 = __importDefault(require("../../../icons/ChevronRight"));
+exports.default = {
+    title: "Utility components/ContentToggle",
+    component: ContentToggle_1.default,
+};
+const chapters = [
+    {
+        paragraphs: [
+            "The troposphere holds almost all of the water vapour on the planet, which makes it the only layer where weather happens. It gets colder the higher you go, right up to the point where the temperature stops falling.",
+            "That point is the tropopause, and it works as a lid. Storm clouds flatten out against it instead of growing taller, which is why the tallest ones spread sideways into an anvil.",
+        ],
+    },
+    {
+        paragraphs: [
+            "The stratosphere reverses the pattern and gets warmer with altitude, because the ozone in it absorbs ultraviolet light. That inversion makes the air very stable, so almost nothing mixes vertically.",
+            "Long-haul aircraft cruise in the lower part of it for exactly that reason: no convection, no turbulence from rising air, and far less drag than the denser layer below.",
+        ],
+    },
+    {
+        paragraphs: [
+            "In the mesosphere the temperature falls again, down to the coldest point anywhere in the atmosphere. Meteors burn up here, far below the altitude most people imagine.",
+            "Higher still, the thermosphere is hot but almost empty, and the aurora forms in it. Somewhere along the way the air simply thins out into space rather than ending at a line.",
+            "That point is the tropopause, and it works as a lid. Storm clouds flatten out against it instead of growing taller, which is why the tallest ones spread sideways into an anvil.",
+        ],
+    },
+];
+exports.example = {
+    name: "example",
+    render: () => {
+        const [index, setIndex] = react_1.default.useState(0);
+        // The content follows the direction it moves in: going forward slides it to the start
+        const [direction, setDirection] = react_1.default.useState("start");
+        const chapter = chapters[index];
+        const handleChange = (nextIndex) => {
+            setDirection(nextIndex > index ? "start" : "end");
+            setIndex(nextIndex);
+        };
+        return (<View_1.default width="480px">
+				<View_1.default gap={3}>
+					<View_1.default direction="row" align="center" gap={2}>
+						<View_1.default.Item grow>
+							<Text_1.default variant="body-2" weight="medium">
+								Layers of the atmosphere
+							</Text_1.default>
+						</View_1.default.Item>
+
+						<View_1.default direction="row" gap={1}>
+							<Button_1.default variant="ghost" size="small" icon={ChevronLeft_1.default} disabled={index === 0} onClick={() => handleChange(index - 1)} attributes={{ "aria-label": "Previous chapter" }}/>
+							<Button_1.default size="small" variant="ghost" icon={ChevronRight_1.default} disabled={index === chapters.length - 1} onClick={() => handleChange(index + 1)} attributes={{ "aria-label": "Next chapter" }}/>
+						</View_1.default>
+					</View_1.default>
+
+					<ContentToggle_1.default id={index} direction={direction}>
+						<View_1.default gap={3}>
+							{chapter.paragraphs.map((paragraph) => (<Text_1.default key={paragraph} variant="body-3" color="neutral-faded">
+									{paragraph}
+								</Text_1.default>))}
+						</View_1.default>
+					</ContentToggle_1.default>
+				</View_1.default>
+			</View_1.default>);
+    },
+};

package/dist/components/ContextMenu/ContextMenu.js

@@ -6,9 +6,10 @@ import useHandlerRef from "../../hooks/useHandlerRef";
 import useScrollLock from "../../hooks/useScrollLock";
 import s from "./ContextMenu.module.css";
 const ContextMenu = (props) => {
-    const { position = "end-top", onOpen, onClose, ...dropdownMenuProps } = props;
+    const { position = "end-top", onOpen, onClose, triggerRef, ...dropdownMenuProps } = props;
     const [coordinates, setCoordinates] = React.useState();
-    const originRef = React.useRef(null);
+    const internalOriginRef = React.useRef(null);
+    const originRef = triggerRef || internalOriginRef;
     const { lockScroll, unlockScroll } = useScrollLock({ originRef });
     const onOpenRef = useHandlerRef(onOpen);
     React.useEffect(() => {
@@ -23,11 +24,11 @@ const ContextMenu = (props) => {
         };
         originEl.addEventListener("contextmenu", handleContextMenu);
         return () => originEl.removeEventListener("contextmenu", handleContextMenu);
-    }, [lockScroll, onOpenRef]);
+    }, [lockScroll, onOpenRef, originRef]);
     React.useEffect(() => {
         return () => unlockScroll();
     }, [unlockScroll]);
-    return (_jsx("div", { className: s.root, ref: originRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: (args) => {
+    return (_jsx("div", { className: s.root, ref: internalOriginRef, children: _jsx(DropdownMenu, { ...dropdownMenuProps, position: position, originCoordinates: coordinates, active: !!coordinates, onClose: (args) => {
                 setCoordinates(undefined);
                 unlockScroll();
                 onClose?.(args);

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

@@ -1,3 +1,7 @@
+import type React from "react";
 import type { DropdownMenuInstance, DropdownMenuProps } from "../../components/DropdownMenu";
 export type Instance = DropdownMenuInstance;
-export type Props = Omit<DropdownMenuProps, "active" | "defaultActive">;
+export type Props = Omit<DropdownMenuProps, "active" | "defaultActive"> & {
+    /** Element that opens the menu on right click, used when it's rendered outside of the ContextMenu */
+    triggerRef?: React.RefObject<HTMLElement | null>;
+};

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

@@ -1,13 +1,14 @@
 import { StoryObj } from "@storybook/react-vite";
+import React from "react";
 import { fn } from "storybook/test";
 declare const _default: {
     title: string;
-    component: import("react").FC<import("../../../components/ContextMenu").ContextMenuProps> & {
-        Content: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ContentProps>;
-        Item: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").ItemProps>;
-        Section: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SectionProps>;
-        SubMenu: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubMenuProps>;
-        SubTrigger: import("react").FC<import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps>;
+    component: React.FC<import("../../../components/ContextMenu").ContextMenuProps> & {
+        Content: React.FC<import("../../DropdownMenu/DropdownMenu.types").ContentProps>;
+        Item: React.FC<import("../../DropdownMenu/DropdownMenu.types").ItemProps>;
+        Section: React.FC<import("../../DropdownMenu/DropdownMenu.types").SectionProps>;
+        SubMenu: React.FC<import("../../DropdownMenu/DropdownMenu.types").SubMenuProps>;
+        SubTrigger: React.FC<import("../../DropdownMenu/DropdownMenu.types").SubTriggerProps>;
     };
     parameters: {
         iframe: {
@@ -18,10 +19,13 @@ declare const _default: {
 export default _default;
 export declare const base: {
     name: string;
-    render: () => import("react").JSX.Element;
+    render: () => React.JSX.Element;
 };
 export declare const handlers: StoryObj<{
     handleOpen: ReturnType<typeof fn>;
     handleClose: ReturnType<typeof fn>;
 }>;
+export declare const triggerRef: StoryObj<{
+    handleOpen: ReturnType<typeof fn>;
+}>;
 export declare const menu: StoryObj;

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

@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.menu = exports.handlers = exports.base = void 0;
+exports.menu = exports.triggerRef = exports.handlers = exports.base = void 0;
+const react_1 = __importDefault(require("react"));
 const test_1 = require("storybook/test");
 const ContextMenu_1 = __importDefault(require("../../../components/ContextMenu"));
 const View_1 = __importDefault(require("../../../components/View"));
@@ -74,6 +75,22 @@ exports.handlers = {
         });
     },
 };
+exports.triggerRef = {
+    name: "triggerRef",
+    render: () => {
+        const triggerRef = react_1.default.useRef(null);
+        return (<>
+				<View_1.default height="200px" backgroundColor="neutral-faded" borderRadius="medium" attributes={{ ref: triggerRef }}/>
+
+				<ContextMenu_1.default triggerRef={triggerRef}>
+					<ContextMenu_1.default.Content>
+						<ContextMenu_1.default.Item onClick={() => { }}>Item</ContextMenu_1.default.Item>
+						<ContextMenu_1.default.Item onClick={() => { }}>Item</ContextMenu_1.default.Item>
+					</ContextMenu_1.default.Content>
+				</ContextMenu_1.default>
+			</>);
+    },
+};
 const menuData = [
     { label: "Action 1" },
     { label: "Action 2" },

package/dist/components/DropdownMenu/DropdownMenu.context.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+import type * as T from "./DropdownMenu.types";
+declare const DropdownMenuContext: React.Context<T.Context>;
+export declare const useDropdownMenu: () => T.Context;
+/**
+ * Shares the root menu configuration with its items and submenus.
+ * Submenus render their own DropdownMenu, so the values they don't
+ * define themselves are inherited from the menu they're nested in.
+ */
+export declare const DropdownMenuProvider: React.FC<T.ProviderProps>;
+export default DropdownMenuContext;

package/dist/components/DropdownMenu/DropdownMenu.context.js

@@ -0,0 +1,19 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import React from "react";
+const DropdownMenuContext = React.createContext({});
+export const useDropdownMenu = () => React.useContext(DropdownMenuContext);
+/**
+ * Shares the root menu configuration with its items and submenus.
+ * Submenus render their own DropdownMenu, so the values they don't
+ * define themselves are inherited from the menu they're nested in.
+ */
+export const DropdownMenuProvider = (props) => {
+    const { size, children } = props;
+    const parentContext = useDropdownMenu();
+    const resolvedSize = size ?? parentContext.size;
+    const value = React.useMemo(() => ({ size: resolvedSize }), [resolvedSize]);
+    return _jsx(DropdownMenuContext.Provider, { value: value, children: children });
+};
+DropdownMenuProvider.displayName = "DropdownMenu.Provider";
+export default DropdownMenuContext;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -9,12 +9,13 @@ import useHotkeys from "../../hooks/useHotkeys";
 import useRTL from "../../hooks/useRTL";
 import * as keys from "../../constants/keys";
 import IconChevronRight from "../../icons/ChevronRight";
+import { DropdownMenuProvider, useDropdownMenu } from "./DropdownMenu.context";
 import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);
 const DropdownMenu = (props) => {
-    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", ...popoverProps } = props;
-    return (_jsx(Popover, { ...popoverProps, position: position, padding: 1, trapFocusMode: trapFocusMode, triggerType: triggerType, disableHideAnimation: triggerType !== "hover", children: children }));
+    const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", size, ...popoverProps } = props;
+    return (_jsx(DropdownMenuProvider, { size: size, children: _jsx(Popover, { ...popoverProps, position: position, padding: 1, trapFocusMode: trapFocusMode, triggerType: triggerType, disableHideAnimation: triggerType !== "hover", children: children }) }));
 };
 export const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;
@@ -44,8 +45,9 @@ export const DropdownMenuSection = (props) => {
     return (_jsx("div", { className: s.section, role: "group", children: children }));
 };
 export const DropdownMenuItem = (props) => {
-    const { onClick } = props;
+    const { onClick, size } = props;
     const { handleClose } = useFlyoutContext();
+    const { size: menuSize } = useDropdownMenu();
     const subTriggerContext = React.useContext(DropdownMenuSubTriggerContext);
     const handleClick = (e) => {
         /**
@@ -57,7 +59,7 @@ export const DropdownMenuItem = (props) => {
         if (onClick)
             onClick(e);
     };
-    return (_jsx(MenuItem, { ...props, roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
+    return (_jsx(MenuItem, { ...props, size: size ?? menuSize, roundedCorners: true, className: [s.item, props.className], attributes: { role: "menuitem", ...props.attributes }, onClick: handleClick }));
 };
 export const DropdownMenuSubMenu = (props) => {
     const { children, position = "end-top", contentGap = 0.5, ...dropdownMenuProps } = props;

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

@@ -3,9 +3,18 @@ import type { FlyoutContentProps } from "../../components/Flyout";
 import type { MenuItemProps } from "../../components/MenuItem";
 import type { PopoverInstance, PopoverProps } from "../../components/Popover";
 export type Instance = PopoverInstance;
+export type Context = {
+    size?: MenuItemProps["size"];
+};
+export type ProviderProps = {
+    children: React.ReactNode;
+    size?: MenuItemProps["size"];
+};
 export type Props = Pick<PopoverProps, "children" | "position" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "contentMaxHeight" | "contentZIndex" | "onOpen" | "onClose" | "onAfterOpen" | "onAfterClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
+    /** Size used by the menu items */
+    size?: MenuItemProps["size"];
 };
 export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;
 export type ItemProps = Omit<MenuItemProps, "roundedCorners">;

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

@@ -26,6 +26,7 @@ export declare const sections: {
     name: string;
     render: () => import("react").JSX.Element;
 };
+export declare const size: StoryObj;
 export declare const submenu: StoryObj;
 export declare const defaultActive: StoryObj<{
     handleOpen: ReturnType<typeof fn>;

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

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.testTheme = exports.testScroll = exports.className = exports.activeFalse = exports.active = exports.defaultActive = exports.submenu = exports.sections = exports.position = void 0;
+exports.testTheme = exports.testScroll = exports.className = exports.activeFalse = exports.active = exports.defaultActive = exports.submenu = exports.size = exports.sections = exports.position = void 0;
 const test_1 = require("storybook/test");
 const Button_1 = __importDefault(require("../../../components/Button"));
 const DropdownMenu_1 = __importDefault(require("../../../components/DropdownMenu"));
@@ -86,6 +86,27 @@ exports.sections = {
 			</storybook_1.Example.Item>
 		</storybook_1.Example>),
 };
+exports.size = {
+    name: "size",
+    render: () => (<storybook_1.Example>
+			<storybook_1.Example.Item title="size: small, inherited by the items and the submenu">
+				<DropdownMenu_1.default size="small">
+					<DropdownMenu_1.default.Trigger>
+						{(attributes) => <Button_1.default attributes={attributes}>Open small</Button_1.default>}
+					</DropdownMenu_1.default.Trigger>
+					<DropdownMenu_1.default.Content>
+						<DropdownMenu_1.default.Item icon={Checkmark_1.default}>Small item</DropdownMenu_1.default.Item>
+						<DropdownMenu_1.default.SubMenu>
+							<DropdownMenu_1.default.SubTrigger>Small submenu</DropdownMenu_1.default.SubTrigger>
+							<DropdownMenu_1.default.Content>
+								<DropdownMenu_1.default.Item>Small subitem</DropdownMenu_1.default.Item>
+							</DropdownMenu_1.default.Content>
+						</DropdownMenu_1.default.SubMenu>
+					</DropdownMenu_1.default.Content>
+				</DropdownMenu_1.default>
+			</storybook_1.Example.Item>
+		</storybook_1.Example>),
+};
 exports.submenu = {
     name: "submenu",
     render: () => (<storybook_1.Example>

package/dist/components/Expandable/Expandable.d.ts

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