reshaped 2.2.0 → 2.3.0

package/cli/theming/definitions/base.d.ts

@@ -1,3 +1,3 @@
-import { BaseThemeDefinition } from "../tokens/types";
+import { BaseThemeDefinition } from "../../../themes/_generator/tokens/types";
 declare const base: BaseThemeDefinition;
 export default base;

package/cli/theming/definitions/figma.d.ts

@@ -1,3 +1,3 @@
-import { UserThemeDefinition } from "../tokens/types";
+import { UserThemeDefinition } from "../../../themes/_generator/tokens/types";
 declare const theme: UserThemeDefinition;
 export default theme;

package/cli/theming/definitions/reshaped.d.ts

@@ -1,3 +1,3 @@
-import { UserThemeDefinition } from "../tokens/types";
+import { UserThemeDefinition } from "../../../themes/_generator/tokens/types";
 declare const theme: UserThemeDefinition;
 export default theme;

package/cli/theming/definitions/slate.d.ts

@@ -1,3 +1,3 @@
-import { UserThemeDefinition } from "../tokens/types";
+import { UserThemeDefinition } from "../../../themes/_generator/tokens/types";
 declare const theme: UserThemeDefinition;
 export default theme;

package/cli/theming/index.d.ts

@@ -1,4 +1,4 @@
-import { PartialUserThemeDefinition } from "./tokens/types";
-import type * as T from "./types";
-export declare const addThemeFragment: (name: string, definition: PartialUserThemeDefinition, options: T.PublicOptions) => void;
-export declare const addTheme: (name: string, definition: PartialUserThemeDefinition, options: T.PublicOptions) => void;
+import type { PartialUserThemeDefinition } from "../../themes/_generator/tokens/types";
+import type * as T from "../../themes/_generator/types";
+export declare const addThemeFragment: (name: string, definition: PartialUserThemeDefinition, options: T.CLIOptions) => void;
+export declare const addTheme: (name: string, definition: PartialUserThemeDefinition, options: T.CLIOptions) => void;

package/cli/theming/index.js

@@ -1,27 +1,4 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -30,99 +7,22 @@ exports.addTheme = exports.addThemeFragment = void 0;
 const fs_1 = __importDefault(require("fs"));
 const path_1 = __importDefault(require("path"));
 const chalk_1 = __importDefault(require("chalk"));
-const transforms = __importStar(require("./tokens/transforms"));
-const mergeDefinitions_1 = __importDefault(require("./utilities/mergeDefinitions"));
-const color_1 = require("../utilities/color");
-const string_1 = require("../utilities/string");
-const css_1 = require("./utilities/css");
+const mergeDefinitions_1 = __importDefault(require("../../themes/_generator/utilities/mergeDefinitions"));
+const transform_1 = __importDefault(require("../../themes/_generator/transform"));
 const reshaped_1 = __importDefault(require("./definitions/reshaped"));
 const base_1 = __importDefault(require("./definitions/base"));
-const generateBackgroundColors = (definition, themeOptions) => {
-    if (!definition.color)
-        return;
-    Object.keys(definition.color).forEach((tokenName) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
-        const bgToken = (_a = definition.color) === null || _a === void 0 ? void 0 : _a[tokenName];
-        const generatedForegroundName = `on${(0, string_1.capitalize)(tokenName)}`;
-        const generatedRGBName = `rgb${(0, string_1.capitalize)(tokenName)}`;
-        const needsDynamicForeground = (_b = themeOptions === null || themeOptions === void 0 ? void 0 : themeOptions.generateOnColorsFor) === null || _b === void 0 ? void 0 : _b.includes(tokenName);
-        const needsRGB = tokenName.startsWith("background") ||
-            tokenName.endsWith("black") ||
-            tokenName.endsWith("white");
-        if (!bgToken)
-            return;
-        if (needsDynamicForeground) {
-            const hex = (0, color_1.getOnColor)({
-                bgHexColor: bgToken.hex,
-                mode: "light",
-                lightHexColor: (_d = (_c = definition === null || definition === void 0 ? void 0 : definition.color) === null || _c === void 0 ? void 0 : _c.white) === null || _d === void 0 ? void 0 : _d.hex,
-                darkHexColor: (_f = (_e = definition === null || definition === void 0 ? void 0 : definition.color) === null || _e === void 0 ? void 0 : _e.black) === null || _f === void 0 ? void 0 : _f.hex,
-            });
-            const hexDark = (0, color_1.getOnColor)({
-                bgHexColor: bgToken.hexDark || bgToken.hex,
-                mode: "dark",
-                lightHexColor: (_h = (_g = definition === null || definition === void 0 ? void 0 : definition.color) === null || _g === void 0 ? void 0 : _g.white) === null || _h === void 0 ? void 0 : _h.hex,
-                darkHexColor: (_k = (_j = definition === null || definition === void 0 ? void 0 : definition.color) === null || _j === void 0 ? void 0 : _j.black) === null || _k === void 0 ? void 0 : _k.hex,
-            });
-            // eslint-disable-next-line no-param-reassign
-            definition.color[generatedForegroundName] = {
-                hex,
-                hexDark: hex !== hexDark ? hexDark : undefined,
-            };
-        }
-        if (needsRGB) {
-            // eslint-disable-next-line no-param-reassign
-            definition.color[generatedRGBName] = {
-                hex: (0, color_1.hexToRgbString)(bgToken.hex),
-                hexDark: bgToken.hexDark && (0, color_1.hexToRgbString)(bgToken.hexDark),
-            };
-        }
-    });
-};
-const generateUnits = (definition) => {
-    var _a, _b;
-    const baseValue = (_b = (_a = definition.unit) === null || _a === void 0 ? void 0 : _a.base) === null || _b === void 0 ? void 0 : _b.px;
-    // If base value hasn't changed, we don't need to regenerate tokens
-    if (!baseValue)
-        return;
-    for (let i = 1; i <= 10; i += 1) {
-        const generatedName = `x${i}`;
-        // eslint-disable-next-line no-param-reassign
-        definition.unit[generatedName] = {
-            px: baseValue * i,
-        };
-    }
-};
 const transformDefinition = (name, definition, options) => {
-    const { outputPath, isPrivate, isFragment } = options;
-    generateBackgroundColors(definition, options.themeOptions);
-    generateUnits(definition);
-    const transformedStorage = {
-        variable: [],
-        media: [],
-    };
-    Object.entries(definition).forEach(([tokenType, tokenValues]) => {
-        if (!tokenValues)
-            return;
-        const transform = transforms.css[tokenType];
-        Object.entries(tokenValues).forEach(([tokenName, token]) => {
-            const transformedTokens = transform(tokenName, token, definition);
-            transformedTokens.forEach((transformedToken) => {
-                transformedStorage[transformedToken.type].push(transformedToken);
-            });
-        });
-    });
-    const variablesCode = (0, css_1.variablesTemplate)(name, transformedStorage.variable);
+    const { isFragment, outputPath } = options;
+    const code = (0, transform_1.default)(name, definition, options);
     const themeFolderPath = isFragment
         ? path_1.default.resolve(outputPath, "fragments", name)
         : path_1.default.resolve(outputPath, name);
     const themePath = path_1.default.resolve(themeFolderPath, "theme.css");
     fs_1.default.mkdirSync(themeFolderPath, { recursive: true });
-    fs_1.default.writeFileSync(themePath, variablesCode);
-    if (isPrivate && !isFragment) {
-        const mediaCode = (0, css_1.mediaTemplate)(transformedStorage.media);
+    fs_1.default.writeFileSync(themePath, code.variables);
+    if (code.media) {
         const mediaPath = path_1.default.resolve(outputPath, "media.css");
-        fs_1.default.writeFileSync(mediaPath, mediaCode);
+        fs_1.default.writeFileSync(mediaPath, code.media);
     }
     const logOutput = `Compiled ${chalk_1.default.bold(name)} theme${isFragment ? " fragment" : ""}`;
     // eslint-disable-next-line no-console

package/components/Actionable/Actionable.js

@@ -6,6 +6,7 @@ const Actionable = (props, ref) => {
     const { children, href, onClick, type, disabled, insetFocus, borderRadius, as, fullWidth, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], fullWidth && s["--full-width"]);
     const rootAttributes = Object.assign({}, attributes);
+    const repeatRef = React.useRef(false);
     const hasClickHandler = onClick || (attributes === null || attributes === void 0 ? void 0 : attributes.onClick);
     const hasFocusHandler = (attributes === null || attributes === void 0 ? void 0 : attributes.onFocus) || (attributes === null || attributes === void 0 ? void 0 : attributes.onBlur);
     const isLink = Boolean(href || (attributes === null || attributes === void 0 ? void 0 : attributes.href));
@@ -34,13 +35,19 @@ const Actionable = (props, ref) => {
         var _a;
         if (disabled)
             return;
+        /**
+         * - Holding enter keep onClick getting triggered
+         * - Storybook environment is triggering onClick twice on each enter press
+         */
+        if (repeatRef.current)
+            return;
         onClick === null || onClick === void 0 ? void 0 : onClick(event);
         (_a = attributes === null || attributes === void 0 ? void 0 : attributes.onClick) === null || _a === void 0 ? void 0 : _a.call(attributes, event);
     };
-    const handleClick = (event) => handlePress(event);
     const handleKeyDown = (event) => {
         const simulatingButton = rootAttributes.role === "button";
-        if (!simulatingButton || isLink)
+        // These cases are handled correctly by the browsers
+        if (simulatingButton || isLink)
             return;
         const isSpace = event.key === " ";
         const isEnter = event.key === "Enter";
@@ -48,7 +55,11 @@ const Actionable = (props, ref) => {
             return;
         event.preventDefault();
         handlePress(event);
+        repeatRef.current = true;
+    };
+    const handleKeyUp = () => {
+        repeatRef.current = false;
     };
-    return (React.createElement(TagName, Object.assign({ ref: ref }, rootAttributes, { className: rootClassNames, onClick: handleClick, onKeyDown: handleKeyDown }), children));
+    return (React.createElement(TagName, Object.assign({ ref: ref }, rootAttributes, { className: rootClassNames, onClick: handlePress, onKeyDown: handleKeyDown, onKeyUp: handleKeyUp }), children));
 };
 export default React.forwardRef(Actionable);

package/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-.root{-webkit-tap-highlight-color:none;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}
+.root{-webkit-tap-highlight-color:transparent;background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:0;text-align:initial;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:focus{outline:none;z-index:var(--rs-z-index-raised)}[role=button].root,button.root{cursor:pointer}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.--full-width{width:100%}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-focus-inset-shadow)}[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-focus-shadow)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-focus-inset-shadow)}

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

@@ -1,10 +1,12 @@
 import React from "react";
 import { Example } from "../../../utilities/storybook/index.js";
 import Autocomplete from "../index.js";
+import Loader from "../../Loader/index.js";
+import View from "../../View/index.js";
 export default { title: "Components/Autocomplete" };
 const Demo = () => {
     const [value, setValue] = React.useState("");
-    return (<Autocomplete name="fruit" value={value} placeholder="Pick your food" onChange={({ value }) => setValue(value)}>
+    return (<Autocomplete name="fruit" value={value} placeholder="Pick your food" onChange={(args) => setValue(args.value)}>
 			{["Pizza", "Pie", "Ice-cream"].map((v) => {
             if (!v.toLowerCase().includes(value.toLowerCase()))
                 return;
@@ -14,8 +16,32 @@ const Demo = () => {
         })}
 		</Autocomplete>);
 };
+const DemoAsync = () => {
+    const [value, setValue] = React.useState("");
+    const [loading, setLoading] = React.useState(false);
+    return (<Autocomplete name="fruit" value={value} placeholder="Pick your food" onChange={({ value }) => {
+            setLoading(true);
+            setTimeout(() => {
+                setLoading(false);
+            }, 500);
+            setValue(value);
+        }}>
+			{loading ? (<View align="center" justify="center" padding={4}>
+					<Loader />
+				</View>) : (["Pizza", "Pie", "Ice-cream"].map((v) => {
+            if (!v.toLowerCase().includes(value.toLowerCase()))
+                return;
+            return (<Autocomplete.Item key={v} value={v}>
+							{v}
+						</Autocomplete.Item>);
+        }))}
+		</Autocomplete>);
+};
 export const base = () => (<Example>
 		<Example.Item title="Default">
 			<Demo />
 		</Example.Item>
+		<Example.Item title="Async, should keep focus on the first item after reload">
+			<DemoAsync />
+		</Example.Item>
 	</Example>);

package/components/Button/Button.js

@@ -3,6 +3,7 @@ import { classNames, responsiveClassNames, responsivePropDependency } from "../.
 import Icon from "../Icon/index.js";
 import Loader from "../Loader/index.js";
 import Actionable from "../Actionable/index.js";
+import ButtonGroup from "./ButtonGroup.js";
 import ButtonAligner from "./ButtonAligner.js";
 import s from "./Button.module.css";
 const ButtonBase = (props, ref) => {
@@ -33,5 +34,6 @@ const ButtonBase = (props, ref) => {
         renderIcon("end")));
 };
 const Button = React.forwardRef(ButtonBase);
+Button.Group = ButtonGroup;
 Button.Aligner = ButtonAligner;
 export default Button;

package/components/Button/Button.module.css

@@ -1 +1 @@
-.root{--rs-button-border-width:1px;-webkit-tap-highlight-color:transparent;align-items:center;border:var(--rs-button-border-width) solid transparent;box-sizing:border-box;cursor:pointer;display:inline-flex;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);justify-content:center;line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-button-padding-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-padding-h) * 2));overflow:hidden;padding:calc(var(--rs-button-padding-v) - var(--rs-button-border-width)) calc(var(--rs-button-padding-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}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{margin-inline-end:var(--rs-button-icon-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-icon-gap)}.icon:last-child{margin-inline-end:0}.icon,.text{position:relative;z-index:5}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.--elevated{box-shadow:var(--rs-shadow-raised)}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--rounded{border-radius:999px}.--size-small{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-medium,.--size-small{border-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-large{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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)}.--size-large,.--size-xlarge{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-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)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-critical:before,.root.--variant-faded.--color-inherit:before,.root.--variant-faded.--color-neutral:before,.root.--variant-faded.--color-positive:before,.root.--variant-faded.--color-primary:before,.root.--variant-ghost.--color-inherit:before,.root.--variant-outline.--color-inherit:before,.root.--variant-solid.--color-black:before,.root.--variant-solid.--color-white:before{content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-solid.--color-neutral.--highlighted,.root.--variant-solid.--color-neutral:hover:not(.--loading){background-color:var(--rs-color-background-neutral-highlighted)}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted,.root.--variant-solid.--color-primary:hover:not(.--loading){background-color:var(--rs-color-background-primary-highlighted)}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted,.root.--variant-solid.--color-critical:hover:not(.--loading){background-color:var(--rs-color-background-critical-highlighted)}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted,.root.--variant-solid.--color-positive:hover:not(.--loading){background-color:var(--rs-color-background-positive-highlighted)}.root.--variant-solid.--color-white{--rs-button-border-width:0px;background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-white:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-white.--highlighted:before,.root.--variant-solid.--color-white:hover:not(.--loading):before{opacity:.04}.root.--variant-solid.--color-black{--rs-button-border-width:0px;background-color:var(--rs-color-black);color:var(--rs-color-white)}.root.--variant-solid.--color-black:before{background-color:var(--rs-color-white)}.root.--variant-solid.--color-black.--highlighted:before,.root.--variant-solid.--color-black:hover:not(.--loading):before{opacity:.2}.root.--variant-faded.--color-neutral{background-color:var(--rs-color-background-elevation-base);border-color:var(--rs-color-border-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:.06}.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:.06}.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:.06}.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:.24}.root.--variant-faded.--color-black{background-color:rgba(var(--rs-color-rgb-black),28%);color:var(--rs-color-white)}.root.--variant-faded.--color-black.--highlighted,.root.--variant-faded.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),36%)}.root.--variant-faded.--color-white{background-color:rgba(var(--rs-color-rgb-white),28%);color:var(--rs-color-black)}.root.--variant-faded.--color-white.--highlighted,.root.--variant-faded.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),36%)}.root.--variant-outline.--color-neutral{background-color:transparent;border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted,.root.--variant-outline.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),28%)}.root.--variant-outline.--color-primary{background-color:transparent;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted,.root.--variant-outline.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),10%)}.root.--variant-outline.--color-critical{background-color:transparent;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted,.root.--variant-outline.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),10%)}.root.--variant-outline.--color-positive{background-color:transparent;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted,.root.--variant-outline.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),10%)}.root.--variant-outline.--color-white{background-color:transparent;border-color:var(--rs-color-white);color:var(--rs-color-white)}.root.--variant-outline.--color-white.--highlighted,.root.--variant-outline.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),12%)}.root.--variant-outline.--color-black{background-color:transparent;border-color:var(--rs-color-black);color:var(--rs-color-black)}.root.--variant-outline.--color-black.--highlighted,.root.--variant-outline.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),4%)}.root.--variant-outline.--color-inherit{background-color:transparent;border-color:currentcolor;color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor;content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-outline.--color-inherit.--highlighted,.root.--variant-outline.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.1}.root.--variant-ghost{padding-left:var(--rs-button-padding-h-ghost);padding-right:var(--rs-button-padding-h-ghost)}.root.--variant-ghost.--color-neutral{background:transparent;color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral.--highlighted,.root.--variant-ghost.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.root.--variant-ghost.--color-primary{background:transparent;color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary.--highlighted,.root.--variant-ghost.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),12%)}.root.--variant-ghost.--color-critical{background:transparent;color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical.--highlighted,.root.--variant-ghost.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),12%)}.root.--variant-ghost.--color-positive{background:transparent;color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive.--highlighted,.root.--variant-ghost.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),12%)}.root.--variant-ghost.--color-white{background:transparent;color:var(--rs-color-white)}.root.--variant-ghost.--color-white.--highlighted,.root.--variant-ghost.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),8%)}.root.--variant-ghost.--color-black{background:transparent;color:var(--rs-color-black)}.root.--variant-ghost.--color-black.--highlighted,.root.--variant-ghost.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),8%)}.root.--variant-ghost.--color-inherit{background-color:transparent;color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted,.root.--variant-ghost.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--disabled,.root.--disabled:hover:not(.--loading){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:before,.root.--disabled:hover:not(.--loading):before{opacity:0!important}.root.--disabled.--variant-faded,.root.--disabled:hover:not(.--loading).--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--variant-outline,.root.--disabled:hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled.--variant-ghost,.root.--disabled:hover:not(.--loading).--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled:active,.root.--disabled:hover:not(.--loading):active{transform:none!important}.aligner{line-height:0}.aligner.--aligner-position-all .root{margin:calc(var(--rs-button-padding-v) * -1) calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-start .root{margin-inline-start:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-end .root{margin-inline-end:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-top .root{margin-top:calc(var(--rs-button-padding-v) * -1)}.aligner.--aligner-position-bottom .root{margin-bottom:calc(var(--rs-button-padding-v) * -1)}@media (min-width:660px){.--size-small--m{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-medium--m,.--size-small--m{border-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-large--m{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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)}.--size-large--m,.--size-xlarge--m{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-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)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (min-width:900px){.--size-small--l{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-medium--l,.--size-small--l{border-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-large--l{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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)}.--size-large--l,.--size-xlarge--l{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-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)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (min-width:1280px){.--size-small--xl{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-medium--xl,.--size-small--xl{border-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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)}.--size-large--xl{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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)}.--size-large--xl,.--size-xlarge--xl{border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-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)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}
+.root{-webkit-tap-highlight-color:transparent;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;font-family:var(--rs-font-family-body);font-size:var(--rs-button-font-size);font-weight:var(--rs-font-weight-medium);justify-content:center;line-height:var(--rs-button-line-height);min-height:calc(var(--rs-button-line-height) + var(--rs-button-padding-v) * 2);min-width:calc(var(--rs-button-line-height) - (var(--rs-unit-x1) * 2) + (var(--rs-button-padding-h) * 2));overflow:hidden;padding:calc(var(--rs-button-padding-v) - var(--rs-button-border-width)) calc(var(--rs-button-padding-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}.root:active{transform:scale(.98)}.loader{align-items:center;display:none;inset:0;justify-content:center;position:absolute}.icon{margin-inline-end:var(--rs-button-icon-gap)}.icon.--icon-position-end{margin-inline-end:0;margin-inline-start:var(--rs-button-icon-gap)}.icon:last-child{margin-inline-end:0}.icon,.text{position:relative;z-index:5}.root.--loading{cursor:default}.root.--loading:active{transform:none}.root.--loading .icon,.root.--loading .text{visibility:hidden}.root.--loading .loader{display:flex}.--elevated{box-shadow:var(--rs-shadow-raised)}.root.--icon-only .icon{margin:0 calc(var(--rs-unit-x1) * -1)}.root.--rounded{border-radius:999px}.--size-small{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width{text-align:center;width:100%}.root.--variant-faded.--color-critical:before,.root.--variant-faded.--color-inherit:before,.root.--variant-faded.--color-neutral:before,.root.--variant-faded.--color-positive:before,.root.--variant-faded.--color-primary:before,.root.--variant-ghost.--color-inherit:before,.root.--variant-outline.--color-inherit:before,.root.--variant-solid.--color-black:before,.root.--variant-solid.--color-white:before{content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-solid{--rs-button-border-width:0px}.root.--variant-solid.--color-neutral{background-color:var(--rs-color-background-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-solid.--color-neutral.--highlighted,.root.--variant-solid.--color-neutral:hover:not(.--loading){background-color:var(--rs-color-background-neutral-highlighted)}.root.--variant-solid.--color-primary{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--variant-solid.--color-primary.--highlighted,.root.--variant-solid.--color-primary:hover:not(.--loading){background-color:var(--rs-color-background-primary-highlighted)}.root.--variant-solid.--color-critical{background-color:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--variant-solid.--color-critical.--highlighted,.root.--variant-solid.--color-critical:hover:not(.--loading){background-color:var(--rs-color-background-critical-highlighted)}.root.--variant-solid.--color-positive{background-color:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--variant-solid.--color-positive.--highlighted,.root.--variant-solid.--color-positive:hover:not(.--loading){background-color:var(--rs-color-background-positive-highlighted)}.root.--variant-solid.--color-white{background-color:var(--rs-color-white);color:var(--rs-color-black)}.root.--variant-solid.--color-white:before{background-color:var(--rs-color-black)}.root.--variant-solid.--color-white.--highlighted:before,.root.--variant-solid.--color-white:hover:not(.--loading):before{opacity:.04}.root.--variant-solid.--color-black{background-color:var(--rs-color-black);color:var(--rs-color-white)}.root.--variant-solid.--color-black:before{background-color:var(--rs-color-white)}.root.--variant-solid.--color-black.--highlighted:before,.root.--variant-solid.--color-black:hover:not(.--loading):before{opacity:.2}.root.--variant-faded{--rs-button-border-width:0px}.root.--variant-faded.--color-neutral{--rs-button-border-width:1px;background-color:var(--rs-color-background-elevation-base);border-color:var(--rs-color-border-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:.06}.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:.06}.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:.06}.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:.24}.root.--variant-faded.--color-black{background-color:rgba(var(--rs-color-rgb-black),28%);color:var(--rs-color-white)}.root.--variant-faded.--color-black.--highlighted,.root.--variant-faded.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),36%)}.root.--variant-faded.--color-white{background-color:rgba(var(--rs-color-rgb-white),28%);color:var(--rs-color-black)}.root.--variant-faded.--color-white.--highlighted,.root.--variant-faded.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),36%)}.root.--variant-outline{--rs-button-border-width:1px}.root.--variant-outline.--color-neutral{background-color:transparent;border-color:var(--rs-color-border-neutral);color:var(--rs-color-foreground-neutral)}.root.--variant-outline.--color-neutral.--highlighted,.root.--variant-outline.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),28%)}.root.--variant-outline.--color-primary{background-color:transparent;border-color:var(--rs-color-border-primary);color:var(--rs-color-foreground-primary)}.root.--variant-outline.--color-primary.--highlighted,.root.--variant-outline.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),10%)}.root.--variant-outline.--color-critical{background-color:transparent;border-color:var(--rs-color-border-critical);color:var(--rs-color-foreground-critical)}.root.--variant-outline.--color-critical.--highlighted,.root.--variant-outline.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),10%)}.root.--variant-outline.--color-positive{background-color:transparent;border-color:var(--rs-color-border-positive);color:var(--rs-color-foreground-positive)}.root.--variant-outline.--color-positive.--highlighted,.root.--variant-outline.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),10%)}.root.--variant-outline.--color-white{background-color:transparent;border-color:var(--rs-color-white);color:var(--rs-color-white)}.root.--variant-outline.--color-white.--highlighted,.root.--variant-outline.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),12%)}.root.--variant-outline.--color-black{background-color:transparent;border-color:var(--rs-color-black);color:var(--rs-color-black)}.root.--variant-outline.--color-black.--highlighted,.root.--variant-outline.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),4%)}.root.--variant-outline.--color-inherit{background-color:transparent;border-color:currentcolor;color:inherit}.root.--variant-outline.--color-inherit:before{background-color:currentcolor;content:"";inset:0;opacity:0;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--variant-outline.--color-inherit.--highlighted,.root.--variant-outline.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-outline.--color-inherit.--highlighted:before,.root.--variant-outline.--color-inherit:hover:not(.--loading):before{opacity:.1}.root.--variant-ghost{--rs-button-border-width:0px;padding-left:var(--rs-button-padding-h-ghost);padding-right:var(--rs-button-padding-h-ghost)}.root.--variant-ghost.--color-neutral{background:transparent;color:var(--rs-color-foreground-neutral)}.root.--variant-ghost.--color-neutral.--highlighted,.root.--variant-ghost.--color-neutral:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-neutral),40%)}.root.--variant-ghost.--color-primary{background:transparent;color:var(--rs-color-foreground-primary)}.root.--variant-ghost.--color-primary.--highlighted,.root.--variant-ghost.--color-primary:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-primary),12%)}.root.--variant-ghost.--color-critical{background:transparent;color:var(--rs-color-foreground-critical)}.root.--variant-ghost.--color-critical.--highlighted,.root.--variant-ghost.--color-critical:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-critical),12%)}.root.--variant-ghost.--color-positive{background:transparent;color:var(--rs-color-foreground-positive)}.root.--variant-ghost.--color-positive.--highlighted,.root.--variant-ghost.--color-positive:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-background-positive),12%)}.root.--variant-ghost.--color-white{background:transparent;color:var(--rs-color-white)}.root.--variant-ghost.--color-white.--highlighted,.root.--variant-ghost.--color-white:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-white),8%)}.root.--variant-ghost.--color-black{background:transparent;color:var(--rs-color-black)}.root.--variant-ghost.--color-black.--highlighted,.root.--variant-ghost.--color-black:hover:not(.--loading){background-color:rgba(var(--rs-color-rgb-black),8%)}.root.--variant-ghost.--color-inherit{background-color:transparent;color:inherit}.root.--variant-ghost.--color-inherit:before{background-color:currentcolor}.root.--variant-ghost.--color-inherit.--highlighted,.root.--variant-ghost.--color-inherit:hover:not(.--loading){background-color:transparent}.root.--variant-ghost.--color-inherit.--highlighted:before,.root.--variant-ghost.--color-inherit:hover:not(.--loading):before{opacity:.08}.root.--disabled,.root.--disabled:hover:not(.--loading){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:before,.root.--disabled:hover:not(.--loading):before{opacity:0!important}.root.--disabled.--variant-faded,.root.--disabled:hover:not(.--loading).--variant-faded{background-color:var(--rs-color-background-disabled-faded)!important}.root.--disabled.--variant-outline,.root.--disabled:hover:not(.--loading).--variant-outline{background-color:transparent!important}.root.--disabled.--variant-ghost,.root.--disabled:hover:not(.--loading).--variant-ghost{background-color:transparent!important;border-color:transparent!important}.root.--disabled:active,.root.--disabled:hover:not(.--loading):active{transform:none!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}.aligner.--aligner-position-all .root{margin:calc(var(--rs-button-padding-v) * -1) calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-start .root{margin-inline-start:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-end .root{margin-inline-end:calc(var(--rs-button-padding-h) * -1)}.aligner.--aligner-position-top .root{margin-top:calc(var(--rs-button-padding-v) * -1)}.aligner.--aligner-position-bottom .root{margin-bottom:calc(var(--rs-button-padding-v) * -1)}@media (min-width:660px){.--size-small--m{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--m{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--m{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width-true--m{text-align:center;width:100%}.--full-width-false--m{text-align:initial;width:auto}}@media (min-width:900px){.--size-small--l{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--l{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--l{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width-true--l{text-align:center;width:100%}.--full-width-false--l{text-align:initial;width:auto}}@media (min-width:1280px){.--size-small--xl{--rs-button-padding-v:var(--rs-unit-x1);--rs-button-padding-h:var(--rs-unit-x2);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-medium--xl{--rs-button-padding-v:var(--rs-unit-x2);--rs-button-padding-h:var(--rs-unit-x3);--rs-button-padding-h-ghost:var(--rs-unit-x2);--rs-button-icon-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-radius:var(--rs-unit-radius-small)}.--size-large--xl{--rs-button-padding-v:var(--rs-unit-x3);--rs-button-padding-h:var(--rs-unit-x4);--rs-button-padding-h-ghost:var(--rs-unit-x3);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl{--rs-button-padding-v:var(--rs-unit-x4);--rs-button-padding-h:var(--rs-unit-x5);--rs-button-padding-h-ghost:var(--rs-unit-x4);--rs-button-icon-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-radius:var(--rs-unit-radius-medium)}.--full-width-true--xl{text-align:center;width:100%}.--full-width-false--xl{text-align:initial;width:auto}}

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

@@ -18,6 +18,11 @@ type BaseProps = {
     className?: G.ClassName;
 };
 export type Props = Omit<ActionableProps, keyof BaseProps> & BaseProps;
+export type GroupProps = {
+    children: React.ReactNode;
+    className?: G.ClassName;
+    attributes?: G.Attributes<"div", Props>;
+};
 type AlignerPosition = "start" | "end" | "top" | "bottom";
 export type AlignerProps = {
     children: React.ReactElement;
@@ -27,5 +32,6 @@ export type AlignerProps = {
 };
 export type Export = React.ForwardRefExoticComponent<Props> & {
     Aligner: React.ComponentType<AlignerProps>;
+    Group: React.ComponentType<GroupProps>;
 };
 export {};

package/components/Button/ButtonGroup.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type * as T from "./Button.types";
+declare const ButtonGroup: (props: T.GroupProps) => React.JSX.Element;
+export default ButtonGroup;

package/components/Button/ButtonGroup.js

@@ -0,0 +1,9 @@
+import React from "react";
+import { classNames } from "../../utilities/helpers.js";
+import s from "./Button.module.css";
+const ButtonGroup = (props) => {
+    const { children, className, attributes } = props;
+    const groupClassNames = classNames(s.group, className);
+    return (React.createElement("div", Object.assign({}, attributes, { className: groupClassNames, role: "group" }), children));
+};
+export default ButtonGroup;

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

@@ -12,4 +12,5 @@ export declare const fullWidth: () => React.JSX.Element;
 export declare const loading: () => React.JSX.Element;
 export declare const highlighted: () => React.JSX.Element;
 export declare const disabled: () => React.JSX.Element;
+export declare const group: () => React.JSX.Element;
 export declare const aligner: () => React.JSX.Element;

package/components/Button/tests/Button.stories.js

@@ -498,6 +498,69 @@ export const disabled = () => (<Example>
 			</View>
 		</Example.Item>
 	</Example>);
+export const group = () => (<Example>
+		<Example.Item title="with icon">
+			<Button.Group>
+				<Button rounded>Submit</Button>
+				<Button rounded icon={IconZap}/>
+			</Button.Group>
+		</Example.Item>
+		<Example.Item title="variant: solid">
+			<View gap={2}>
+				{["neutral", "primary", "critical", "positive", "black", "white"].map((color) => (<Button.Group>
+							<Button color={color}>One</Button>
+							<Button color={color}>Two</Button>
+							<Button color={color}>Three</Button>
+						</Button.Group>))}
+			</View>
+		</Example.Item>
+		<Example.Item title="variant: outline">
+			<View gap={2}>
+				{["neutral", "primary", "critical", "positive", "black", "white"].map((color) => (<Button.Group>
+							<Button color={color} variant="outline">
+								One
+							</Button>
+							<Button color={color} variant="outline">
+								Two
+							</Button>
+							<Button color={color} variant="outline">
+								Three
+							</Button>
+						</Button.Group>))}
+			</View>
+		</Example.Item>
+		<Example.Item title="variant: faded">
+			<View gap={2}>
+				{["neutral", "primary", "critical", "positive", "black", "white"].map((color) => (<Button.Group>
+							<Button color={color} variant="faded">
+								One
+							</Button>
+							<Button color={color} variant="faded">
+								Two
+							</Button>
+							<Button color={color} variant="faded">
+								Three
+							</Button>
+						</Button.Group>))}
+			</View>
+		</Example.Item>
+
+		<Example.Item title="variant: ghost">
+			<View gap={2}>
+				{["neutral", "primary", "critical", "positive", "black", "white"].map((color) => (<Button.Group>
+							<Button color={color} variant="ghost">
+								One
+							</Button>
+							<Button color={color} variant="ghost">
+								Two
+							</Button>
+							<Button color={color} variant="ghost">
+								Three
+							</Button>
+						</Button.Group>))}
+			</View>
+		</Example.Item>
+	</Example>);
 export const aligner = () => (<Example>
 		<Example.Item title="aligner: all">
 			<View padding={4} borderColor="neutral-faded" direction="row" gap={2}>

package/components/Checkbox/Checkbox.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
+.root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;gap:var(--rs-unit-x2);-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.icon{left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:indeterminate+.decorator,.root.--error .input:indeterminate+.decorator,.root.--error:hover .input:indeterminate+.decorator,.root:hover .input:indeterminate+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary)}.input:indeterminate+.decorator:before,.root.--error .input:indeterminate+.decorator:before,.root.--error:hover .input:indeterminate+.decorator:before,.root:hover .input:indeterminate+.decorator:before{background:var(--rs-color-on-background-primary);border-radius:999px;content:"";height:2px;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%);width:var(--rs-unit-x2)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator,.root:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.input:checked+.decorator .icon,.root.--error .input:checked+.decorator .icon,.root.--error:hover .input:checked+.decorator .icon,.root:hover .input:checked+.decorator .icon{opacity:1;transform:translate(-50%,-50%) scale(1)}.root.--error .decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .decorator,.root.--disabled:hover .input:checked+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator,.root.--disabled .input:indeterminate+.decorator,.root.--disabled:hover .input:checked+.decorator,.root.--disabled:hover .input:indeterminate+.decorator{background:var(--rs-color-background-disabled);border-color:transparent}.root.--disabled .input:indeterminate+.decorator:before{background:var(--rs-color-foreground-disabled)}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

package/components/DropdownMenu/DropdownMenu.js

@@ -57,7 +57,7 @@ const DropdownMenuItem = (props) => {
         if (onClick)
             onClick(e);
     };
-    return (React.createElement(MenuItem, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign(Object.assign({}, props.attributes), { role: "menuitem" }), onClick: handleClick })));
+    return (React.createElement(MenuItem, Object.assign({}, props, { roundedCorners: true, className: s.item, attributes: Object.assign({ role: "menuitem" }, props.attributes), onClick: handleClick })));
 };
 const DropdownMenuSubMenu = (props) => {
     const { children } = props;

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

@@ -42,6 +42,7 @@ export const position = () => (<Example>
 				</DropdownMenu.Content>
 			</DropdownMenu>
 		</Example.Item>
+		<div style={{ height: 2000 }}/>
 	</Example>);
 export const sections = () => (<Example>
 		<Example.Item title="2 sections">

package/components/Overlay/Overlay.js

@@ -14,7 +14,6 @@ const Overlay = (props) => {
     const { active, children, transparent, onClose, className, attributes } = props;
     const [mounted, setMounted] = React.useState(false);
     const contentRef = React.useRef(null);
-    const rootRef = React.useRef(null);
     const isMouseDownValidRef = React.useRef(false);
     const releaseFocusRef = React.useRef(null);
     const { lockScroll, unlockScroll } = useScrollLock();
@@ -101,10 +100,11 @@ const Overlay = (props) => {
     }, []);
     if (!rendered || !mounted)
         return null;
-    return (React.createElement(Portal, { scopeRef: rootRef },
-        React.createElement("div", Object.assign({}, attributes, { ref: rootRef, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd }),
+    return (React.createElement(Portal, null,
+        React.createElement(Portal.Scope, null, (ref) => (React.createElement("div", Object.assign({}, attributes, { ref: ref, role: "button", tabIndex: -1, className: rootClassNames, onMouseDown: handleMouseDown, onMouseUp: handleMouseUp, onTransitionEnd: handleTransitionEnd }),
             React.createElement("div", { className: s.wrapper },
                 React.createElement("div", { className: s.inner },
-                    React.createElement("div", { className: s.content, ref: contentRef }, typeof children === "function" ? children({ active: visible }) : children))))));
+                    React.createElement("div", { className: s.content, ref: contentRef }, typeof children === "function" ? children({ active: visible }) : children)),
+                "P"))))));
 };
 export default Overlay;

package/components/Radio/Radio.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}
+.root{-webkit-tap-highlight-color:transparent;align-items:center;cursor:pointer;display:inline-flex;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:top}.root:hover .input:not(:checked)+.decorator{background:var(--rs-color-background-neutral-faded)}.field{position:relative}.decorator{background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);border-radius:50%;height:var(--rs-line-height-body-3);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color,border-color;width:var(--rs-line-height-body-3)}.decorator:after{background:var(--rs-color-on-background-primary);border-radius:50%;content:"";height:var(--rs-unit-x2);left:50%;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(0);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;width:var(--rs-unit-x2)}[data-rs-keyboard] .input:focus+.decorator{box-shadow:var(--rs-focus-shadow)}.input:checked+.decorator,.root.--error .input:checked+.decorator,.root.--error:hover .input:checked+.decorator{background:var(--rs-color-background-primary);border-color:var(--rs-color-background-primary);border-width:2px}.input:checked+.decorator:after,.root.--error .input:checked+.decorator:after,.root.--error:hover .input:checked+.decorator:after{opacity:1;transform:translate(-50%,-50%) scale(1)}.text{margin-inline-start:var(--rs-unit-x2)}.root.--error .decorator,.root.--error:hover .input+.decorator{border-color:var(--rs-color-border-critical)}.root.--disabled{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.root.--disabled .decorator,.root.--disabled .input:checked+.decorator,.root.--disabled:hover .input+.decorator{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled .input:checked+.decorator{border-color:transparent}.root.--disabled .input:checked+.decorator:after{background:var(--rs-color-border-disabled)}

package/components/Select/Select.js

@@ -52,7 +52,7 @@ const Select = (props) => {
                 children || (placeholder ? React.createElement(Text, { color: "neutral-faded" }, placeholder) : null)),
             React.createElement("input", { type: "hidden", value: value, name: name }))),
         React.createElement("div", { className: s.arrow },
-            React.createElement(Icon, { svg: IconArrow, color: "neutral-faded", size: responsivePropDependency(size, (size) => {
+            React.createElement(Icon, { svg: IconArrow, color: disabled ? "disabled" : "neutral-faded", size: responsivePropDependency(size, (size) => {
                     return size === "large" || size === "xlarge" ? 5 : 4;
                 }) }))));
 };

package/components/Slider/Slider.module.css

@@ -1 +1 @@
-.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4)}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
+.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);-webkit-user-select:none;-moz-user-select:none;user-select:none}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);left:50%;opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);transform:translate(-50%);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;-webkit-user-select:none;-moz-user-select:none;user-select:none}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x9);width:var(--rs-unit-x9)}.thumb:hover .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(-50%,calc(var(--rs-unit-x1) * -1)) scale(1.1)!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}

package/components/Switch/Switch.module.css

@@ -1 +1 @@
-.root{align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;border-radius:calc(var(--rs-unit-x1) * 5 / 2);box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.thumb{background:var(--rs-color-white);border-radius:50%;box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--reversed{flex-direction:row-reverse}
+.root{-webkit-tap-highlight-color:transparent;align-items:center;display:inline-flex;gap:var(--rs-unit-x2);position:relative;vertical-align:top}.input{border:0;height:1px;left:0;opacity:0;outline:none;position:absolute;top:0;width:1px}.input:checked+.area{background:var(--rs-color-background-primary);border-color:transparent}.input:checked+.area .thumb{transform:translateX(var(--rs-unit-x3))}[dir=rtl] .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x3) * -1))}[data-rs-keyboard] .input:focus+.area{box-shadow:var(--rs-focus-shadow)}.input[disabled]+.area{background:var(--rs-color-background-disabled);cursor:not-allowed}.input[disabled]+.area .thumb{opacity:.8}.input[disabled]:checked+.area{background:var(--rs-color-background-primary);opacity:.4}.input[disabled]:checked+.area .thumb{opacity:1}.area{align-items:center;background:var(--rs-color-background-neutral);border:2px solid transparent;border-radius:calc(var(--rs-unit-x1) * 5 / 2);box-sizing:border-box;cursor:pointer;display:flex;height:calc(var(--rs-unit-x1) * 5);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background,border;width:calc(var(--rs-unit-x1) * 8)}.thumb{background:var(--rs-color-white);border-radius:50%;box-shadow:var(--rs-shadow-raised);height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:transform;width:var(--rs-unit-x4)}.root--size-small .area{height:calc(var(--rs-unit-x1) * 4);width:calc(var(--rs-unit-x1) * 6)}.root--size-small .thumb{height:var(--rs-unit-x3);width:var(--rs-unit-x3)}.root--size-small .input:checked+.area .thumb{transform:translateX(var(--rs-unit-x2))}[dir=rtl] .root--size-small .input:checked+.area .thumb{transform:translateX(calc(var(--rs-unit-x2) * -1))}.root--reversed{flex-direction:row-reverse}