reshaped 3.0.9 → 3.0.10

package/dist/cjs/themes/_generator/utilities/color.d.ts

@@ -81,9 +81,25 @@ export declare const getDarkModeColor: (hsl: HslColor) => {
 };
 export declare const getLuminanceDelta: (luminance: number) => number;
 export declare function getRgbLuminance({ r, g, b }: RgbColor): number;
+export declare const getOnColorWCAG: (args: {
+    bgHexColor: string;
+    lightHexColor?: string;
+    darkHexColor?: string;
+}) => string;
+export declare const getOnColorAPCA: (args: {
+    bgHexColor: string;
+    mode: "light" | "dark";
+    lightHexColor?: string;
+    darkHexColor?: string;
+}) => string;
+/**
+ * On color resolver
+ */
 export declare const getOnColor: (args: {
     bgHexColor: string;
     lightHexColor?: string;
     darkHexColor?: string;
+    mode: "light" | "dark";
+    algorithm?: "wcag" | "apca";
 }) => string;
 export {};

package/dist/cjs/themes/_generator/utilities/color.js

@@ -4,7 +4,7 @@
  * They have been rewritten for easier color transformations in the theme generation case
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getOnColor = exports.getLuminanceDelta = exports.getDarkModeColor = exports.hslToHex = exports.hexToHsluv = exports.hexToHsl = exports.hsluvToHex = exports.hsluvToLch = exports.lchToHsluv = exports.lchToLuv = exports.luvToLch = exports.luvToXyz = exports.xyzToLuv = exports.lToY = exports.yToL = exports.xyzToRgb = exports.rgbToXyz = exports.fromLinear = exports.toLinear = exports.rgbToHex = exports.hslToRgb = exports.rgbToHsl = exports.calcMaxChromaHsluv = exports.distanceFromOriginAngle = exports.calculateBoundingLines = void 0;
+exports.getOnColor = exports.getOnColorAPCA = exports.getOnColorWCAG = exports.getLuminanceDelta = exports.getDarkModeColor = exports.hslToHex = exports.hexToHsluv = exports.hexToHsl = exports.hsluvToHex = exports.hsluvToLch = exports.lchToHsluv = exports.lchToLuv = exports.luvToLch = exports.luvToXyz = exports.xyzToLuv = exports.lToY = exports.yToL = exports.xyzToRgb = exports.rgbToXyz = exports.fromLinear = exports.toLinear = exports.rgbToHex = exports.hslToRgb = exports.rgbToHsl = exports.calcMaxChromaHsluv = exports.distanceFromOriginAngle = exports.calculateBoundingLines = void 0;
 exports.hexToRgb = hexToRgb;
 exports.getRgbLuminance = getRgbLuminance;
 /**
@@ -330,30 +330,80 @@ function getRgbLuminance({ r, g, b }) {
         return Math.pow(y, 1 / 3) * 116 - 16;
     }
 }
+/**
+ * WCAG contrast
+ */
 const RED = 0.2126;
 const GREEN = 0.7152;
 const BLUE = 0.0722;
 const GAMMA = 2.4;
-function luminance(r, g, b) {
+function luminanceWCAG(r, g, b) {
     var a = [r, g, b].map((v) => {
         v /= 255;
         return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
     });
     return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
 }
-function contrast(rgb1, rgb2) {
-    var lum1 = luminance(...rgb1);
-    var lum2 = luminance(...rgb2);
+function contrastWCAG(rgb1, rgb2) {
+    var lum1 = luminanceWCAG(...rgb1);
+    var lum2 = luminanceWCAG(...rgb2);
     var brightest = Math.max(lum1, lum2);
     var darkest = Math.min(lum1, lum2);
     return (brightest + 0.05) / (darkest + 0.05);
 }
-const getOnColor = (args) => {
+const getOnColorWCAG = (args) => {
     const { bgHexColor, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
     const bgRgb = hexToRgb(bgHexColor);
     const lightRgb = hexToRgb(lightHexColor);
-    return contrast([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
+    return contrastWCAG([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
         ? lightHexColor
         : darkHexColor;
 };
+exports.getOnColorWCAG = getOnColorWCAG;
+/**
+ * APCA contrast
+ */
+function luminanceAPCA({ r, g, b }) {
+    return (0.2126 * Math.pow(r / 255, 2.2) +
+        0.7152 * Math.pow(g / 255, 2.2) +
+        0.0722 * Math.pow(b / 255, 2.2));
+}
+function contrastAPCA(backgroundLuminance, textLuminance) {
+    // Calculate the contrast based on APCA
+    let Lc = textLuminance - backgroundLuminance;
+    return Math.abs(Lc); // Return the absolute value of contrast
+}
+const getOnColorAPCA = (args) => {
+    const { bgHexColor, mode, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
+    const bgHexAlpha = bgHexColor.slice(7);
+    const bgAlpha = bgHexAlpha ? Number((parseInt(bgHexAlpha, 16) / 255).toFixed(2)) : 1;
+    const bgColor = hexToRgb(bgHexColor.slice(0, 7));
+    const baseColor = mode === "light" ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 };
+    const { r, g, b } = {
+        r: (1 - bgAlpha) * baseColor.r + bgAlpha * bgColor.r,
+        g: (1 - bgAlpha) * baseColor.g + bgAlpha * bgColor.g,
+        b: (1 - bgAlpha) * baseColor.b + bgAlpha * bgColor.b,
+    };
+    // Calculate luminance for background and for white & black
+    let backgroundLuminance = luminanceAPCA({ r, g, b });
+    let whiteLuminance = luminanceAPCA({ r: 255, g: 255, b: 255 });
+    let blackLuminance = luminanceAPCA({ r: 0, g: 0, b: 0 });
+    // Calculate contrast
+    let contrastWithWhite = contrastAPCA(backgroundLuminance, whiteLuminance);
+    let contrastWithBlack = contrastAPCA(backgroundLuminance, blackLuminance);
+    // Choose the color with higher contrast
+    return contrastWithWhite > contrastWithBlack ? lightHexColor : darkHexColor;
+};
+exports.getOnColorAPCA = getOnColorAPCA;
+/**
+ * On color resolver
+ */
+const getOnColor = (args) => {
+    if (args.algorithm === "apca") {
+        return (0, exports.getOnColorAPCA)(args);
+    }
+    else {
+        return (0, exports.getOnColorWCAG)(args);
+    }
+};
 exports.getOnColor = getOnColor;

package/dist/cjs/themes/_generator/utilities/generateBackgroundColors.js

@@ -31,10 +31,14 @@ const generateBackgroundColors = (definition, themeOptions) => {
             };
             const hex = (0, color_1.getOnColor)({
                 bgHexColor: bgToken.hex,
+                mode: "light",
+                algorithm: themeOptions?.colorContrastAlgorithm,
                 ...onColorHexMap,
             });
             const hexDark = (0, color_1.getOnColor)({
                 bgHexColor: bgToken.hexDark || bgToken.hex,
+                mode: "dark",
+                algorithm: themeOptions?.colorContrastAlgorithm,
                 ...onColorHexMap,
             });
             // eslint-disable-next-line no-param-reassign

package/dist/cjs/themes/_generator/utilities/tests/color.test.js

@@ -2,48 +2,79 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const color_1 = require("../color");
 describe("cli/utilities/color", () => {
-    test("returns white for black background", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#000000" })).toBe("#ffffff");
+    describe("wcag", () => {
+        test("returns white for black background", () => {
+            expect((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light" })).toBe("#ffffff");
+        });
+        test("returns white for dark colored background", () => {
+            expect((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light" })).toBe("#ffffff");
+        });
+        test("returns black for white background", () => {
+            expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light" })).toBe("#000000");
+        });
+        test("returns white for light colored background", () => {
+            expect((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light" })).toBe("#000000");
+        });
+        test("returns #999 for white background", () => {
+            expect((0, color_1.getOnColor)({
+                bgHexColor: "#ffffff",
+                lightHexColor: "#eeeeee",
+                darkHexColor: "#999999",
+                mode: "dark",
+            })).toBe("#999999");
+        });
+        test("returns #eee for black background", () => {
+            expect((0, color_1.getOnColor)({
+                bgHexColor: "#000000",
+                lightHexColor: "#eeeeee",
+                darkHexColor: "#999999",
+                mode: "dark",
+            })).toBe("#eeeeee");
+        });
+        test("returns black for muted green background", () => {
+            expect((0, color_1.getOnColor)({
+                bgHexColor: "#1abc9c",
+                mode: "dark",
+            })).toBe("#000000");
+        });
     });
-    test("returns white for dark colored background", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#aa0000" })).toBe("#ffffff");
-    });
-    test("returns black for white background", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff" })).toBe("#000000");
-    });
-    test("returns white for light colored background", () => {
-        expect((0, color_1.getOnColor)({ bgHexColor: "#dedede" })).toBe("#000000");
-    });
-    /**
-     * 8-digit hex
-     */
-    // test("returns black for dark background with alpha: 0", () => {
-    // 	expect(getOnColor({ bgHexColor: "#00000000",  })).toBe("#000000");
-    // });
-    // test("returns black for light background with alpha: 0", () => {
-    // 	expect(getOnColor({ bgHexColor: "#ffffff00", mode: "light" })).toBe("#000000");
-    // });
-    // test("returns black for dark background with alpha: 25%", () => {
-    // 	expect(getOnColor({ bgHexColor: "#00000040", mode: "light" })).toBe("#000000");
-    // });
-    // test("returns white for dark background with alpha: 30%", () => {
-    // 	expect(getOnColor({ bgHexColor: "#0000004D", mode: "light" })).toBe("#ffffff");
-    // });
-    /**
-     * Custom resolved color
-     */
-    test("returns #999 for white background in dark mode", () => {
-        expect((0, color_1.getOnColor)({
-            bgHexColor: "#ffffff",
-            lightHexColor: "#eeeeee",
-            darkHexColor: "#999999",
-        })).toBe("#999999");
-    });
-    test("returns #eee for black background in dark mode", () => {
-        expect((0, color_1.getOnColor)({
-            bgHexColor: "#000000",
-            lightHexColor: "#eeeeee",
-            darkHexColor: "#999999",
-        })).toBe("#eeeeee");
+    describe("apca", () => {
+        test("returns white for black background", () => {
+            expect((0, color_1.getOnColor)({ bgHexColor: "#000000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
+        });
+        test("returns white for dark colored background", () => {
+            expect((0, color_1.getOnColor)({ bgHexColor: "#aa0000", mode: "light", algorithm: "apca" })).toBe("#ffffff");
+        });
+        test("returns black for white background", () => {
+            expect((0, color_1.getOnColor)({ bgHexColor: "#ffffff", mode: "light", algorithm: "apca" })).toBe("#000000");
+        });
+        test("returns white for light colored background", () => {
+            expect((0, color_1.getOnColor)({ bgHexColor: "#dedede", mode: "light", algorithm: "apca" })).toBe("#000000");
+        });
+        test("returns #999 for white background", () => {
+            expect((0, color_1.getOnColor)({
+                bgHexColor: "#ffffff",
+                lightHexColor: "#eeeeee",
+                darkHexColor: "#999999",
+                mode: "dark",
+                algorithm: "apca",
+            })).toBe("#999999");
+        });
+        test("returns #eee for black background", () => {
+            expect((0, color_1.getOnColor)({
+                bgHexColor: "#000000",
+                lightHexColor: "#eeeeee",
+                darkHexColor: "#999999",
+                mode: "dark",
+                algorithm: "apca",
+            })).toBe("#eeeeee");
+        });
+        test("returns white for muted green background", () => {
+            expect((0, color_1.getOnColor)({
+                bgHexColor: "#1abc9c",
+                mode: "dark",
+                algorithm: "apca",
+            })).toBe("#ffffff");
+        });
     });
 });

package/dist/cjs/themes/index.d.ts

@@ -1,5 +1,22 @@
 import type * as T from "./_generator/types";
 import type { FullThemeDefinition } from "./_generator/tokens/types";
+/**
+ * Exported types
+ */
+export type { FullThemeDefinition } from "./_generator/tokens/types";
+export type { Name as ColorTokenName } from "./_generator/tokens/color/color.types";
+export type { Name as DurationTokenName } from "./_generator/tokens/duration/duration.types";
+export type { Name as EasingTokenName } from "./_generator/tokens/easing/easing.types";
+export type { Name as FontTokenName } from "./_generator/tokens/font/font.types";
+export type { Name as FontFamilyTokenName } from "./_generator/tokens/fontFamily/fontFamily.types";
+export type { Name as FontWeightTokenName } from "./_generator/tokens/fontWeight/fontWeight.types";
+export type { Name as RadiusTokenName } from "./_generator/tokens/radius/radius.types";
+export type { Name as ShadowTokenName } from "./_generator/tokens/shadow/shadow.types";
+export type { GeneratedName as UnitTokenName } from "./_generator/tokens/unit/unit.types";
+export type { Name as ViewportTokenName } from "./_generator/tokens/viewport/viewport.types";
+/**
+ * Exported runtime code
+ */
 export { default as baseThemeDefinition } from "./_generator/definitions/reshaped";
 export declare const generateThemeColors: (options: {
     primary: T.Color;

package/dist/cjs/themes/index.js

@@ -6,6 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getThemeCSS = exports.generateThemeColors = exports.baseThemeDefinition = void 0;
 const transform_1 = __importDefault(require("./_generator/transform"));
 const generateColors_1 = __importDefault(require("./_generator/utilities/generateColors"));
+/**
+ * Exported runtime code
+ */
 var reshaped_1 = require("./_generator/definitions/reshaped");
 Object.defineProperty(exports, "baseThemeDefinition", { enumerable: true, get: function () { return __importDefault(reshaped_1).default; } });
 const generateThemeColors = (options) => {

package/dist/cjs/types/config.d.ts

@@ -4,6 +4,7 @@ export type ReshapedConfig = {
     themeFragments?: Record<string, PartialThemeDefinition>;
     themeOptions?: {
         generateOnColorsFor?: string[];
+        colorContrastAlgorithm?: "wcag" | "apca";
         onColorValues?: {
             [key in ColorHue]?: {
                 hexDark: string;

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

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

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

@@ -125,7 +125,9 @@ export const icon = () => (<Example>
 export const elevated = () => (<Example>
 		<Example.Item title="color: neutral, elevated, variant: solid and outline">
 			<View gap={3} direction="row">
-				<Button elevated>Button</Button>
+				<Button elevated onClick={() => { }}>
+					Button
+				</Button>
 				<Button elevated variant="outline">
 					Button
 				</Button>

package/dist/components/DropdownMenu/DropdownMenu.module.css

@@ -1 +1 @@
-.menu{padding:var(--rs-unit-x1)}.section+.section{border-top:1px solid var(--rs-color-border-neutral-faded);padding-top:var(--rs-unit-x1)}.item+.item,.section+.section{margin-top:var(--rs-unit-x1)}[dir=rtl] .arrow{transform:scaleX(-1)}
+.menu{padding:var(--rs-unit-x1)}.section+.section{border-top:1px solid var(--rs-color-border-neutral-faded);padding-top:var(--rs-unit-x1)}.item,.section+.section{margin-top:var(--rs-unit-x1)}.item:first-child{margin-top:0}[dir=rtl] .arrow{transform:scaleX(-1)}

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

@@ -2,7 +2,7 @@ import type React from "react";
 import type { PopoverProps, PopoverInstance } from "../Popover";
 import type { FlyoutContentProps } from "../_private/Flyout";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "triggerType" | "contentGap" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "instanceRef" | "containerRef"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "triggerType" | "contentGap" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef"> & {
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu">;
 };
 export type ContentProps = Pick<FlyoutContentProps, "attributes" | "children" | "className">;

package/dist/components/Modal/Modal.js

@@ -9,6 +9,7 @@ import Overlay from "../Overlay/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import s from "./Modal.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const DRAG_THRESHOLD = 32;
 const DRAG_OPPOSITE_THRESHOLD = 100;
 const DRAG_EDGE_BOUNDARY = 32;
@@ -40,6 +41,7 @@ const ModalSubtitle = (props) => {
 };
 const Modal = (props) => {
     const { children, onClose, onOpen, active, size, padding = 4, position = "center", transparentOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, overlayClassName, className, attributes, } = props;
+    const onCloseRef = useHandlerRef(onClose);
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
     const [titleMounted, setTitleMounted] = React.useState(false);
@@ -110,7 +112,7 @@ const Modal = (props) => {
             // Changing to a different direction will keep the modal opened
             const shouldClose = clientPosition === "start" ? dragDirectionRef.current < 0 : dragDirectionRef.current > 0;
             if (Math.abs(dragDistanceRef.current) > DRAG_THRESHOLD && shouldClose) {
-                onClose?.();
+                onCloseRef.current?.();
             }
             else {
                 resetDragData();
@@ -151,8 +153,7 @@ const Modal = (props) => {
             document.removeEventListener("touchmove", handleDrag);
             document.removeEventListener("touchend", handleDragEnd);
         };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [dragging, clientPosition]);
+    }, [dragging, clientPosition, onCloseRef, position, rootRef]);
     // Syncing distance to the ref to avoid having a dependency on dragDistance in handleDragEnd
     React.useEffect(() => {
         const rootEl = rootRef.current;

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

@@ -14,7 +14,6 @@ declare const _default: {
     };
 };
 export default _default;
-export declare const foo: () => React.JSX.Element;
 export declare const position: () => React.JSX.Element;
 export declare const size: () => React.JSX.Element;
 export declare const padding: () => React.JSX.Element;

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

@@ -9,7 +9,6 @@ import Switch from "../../Switch/index.js";
 import TextField from "../../TextField/index.js";
 import useToggle from "../../../hooks/useToggle.js";
 import Radio from "../../Radio/index.js";
-import Slider from "../../Slider/index.js";
 export default {
     title: "Components/Modal",
     component: Modal,
@@ -19,21 +18,6 @@ export default {
         },
     },
 };
-export const foo = () => {
-    const { activate, deactivate, active } = useToggle(false);
-    return (<>
-			<Button onClick={console.log}>Other</Button>
-			<Button onClick={activate}>Open modal</Button>
-			<Button onClick={console.log}>Other</Button>
-
-			<Modal active={active} onClose={deactivate}>
-				<Slider name="slider" defaultValue={20} onChange={(args) => console.log(args.value)}/>
-				<Button onClick={console.log}>Btn 1</Button>
-
-				<Button onClick={console.log}>Btn 2</Button>
-			</Modal>
-		</>);
-};
 const Demo = (props) => {
     const { active: activeProp, title, subtitle, children, ...modalProps } = props;
     const { active, activate, deactivate } = useToggle(activeProp);

package/dist/components/Overlay/Overlay.js

@@ -11,8 +11,11 @@ import useScrollLock from "../../hooks/useScrollLock.js";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import Portal from "../_private/Portal/index.js";
 import s from "./Overlay.module.css";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 const Overlay = (props) => {
     const { active, children, transparent, onClose, onOpen, className, attributes } = props;
+    const onCloseRef = useHandlerRef(onClose);
+    const onOpenRef = useHandlerRef(onOpen);
     const clickThrough = transparent === true;
     const opacity = clickThrough ? 0 : (1 - (transparent || 0)) * 0.7;
     const [mounted, setMounted] = React.useState(false);
@@ -35,10 +38,8 @@ const Overlay = (props) => {
     const close = React.useCallback(() => {
         if (!visible || !isDismissible())
             return;
-        if (onClose)
-            onClose();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [visible, isDismissible]);
+        onCloseRef.current?.();
+    }, [visible, isDismissible, onCloseRef]);
     const handleMouseDown = (event) => {
         isMouseDownValidRef.current = !isInsideChild(event.target);
     };
@@ -84,11 +85,10 @@ const Overlay = (props) => {
         trapFocus.trap({
             initialFocusEl: contentRef.current.querySelector("[role=dialog][tabindex='-1']"),
         });
-        onOpen?.();
+        onOpenRef.current?.();
         return () => trapFocus.release();
         // Ignoring onOpen since it might be not memoized when passed
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [rendered]);
+    }, [rendered, onOpenRef]);
     // Unlock scroll on unmount
     React.useEffect(() => {
         return () => {

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

@@ -47,7 +47,9 @@ class CustomElement extends window.HTMLElement {
         root.render(overlay);
     }
 }
-window.customElements.define("custom-element", CustomElement);
+if (!window.customElements.get("custom-element")) {
+    window.customElements.define("custom-element", CustomElement);
+}
 export const shadowDom = () => {
     return (<Example>
 			<Example.Item>

package/dist/components/Popover/Popover.js

@@ -5,14 +5,14 @@ import Dismissible from "../Dismissible/index.js";
 import s from "./Popover.module.css";
 import getPaddingStyles from "../../styles/padding/index.js";
 const Popover = (props) => {
-    const { id, forcePosition, onOpen, onClose, active, defaultActive, children, width, contentGap, variant = "elevated", triggerType = "click", position = "bottom", disableHideAnimation, disableContentHover, instanceRef, containerRef, } = props;
+    const { id, forcePosition, onOpen, onClose, active, defaultActive, children, width, contentGap, variant = "elevated", triggerType = "click", position = "bottom", disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, instanceRef, containerRef, } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);
     const trapFocusMode = props.trapFocusMode || (triggerType === "hover" ? "content-menu" : undefined);
     const paddingStyles = getPaddingStyles(padding);
     const contentClassName = classNames(s.content, !!width && s["content--has-width"], variant && s[`content--variant-${variant}`], paddingStyles?.classNames);
     return (
     // @ts-ignore
-    _jsx(Flyout, { id: id, instanceRef: instanceRef, position: position, forcePosition: forcePosition, onOpen: onOpen, onClose: onClose, trapFocusMode: trapFocusMode, triggerType: triggerType, active: active, defaultActive: defaultActive, width: width, disableHideAnimation: disableHideAnimation, disableContentHover: disableContentHover, contentGap: contentGap, containerRef: containerRef, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } }, children: children }));
+    _jsx(Flyout, { id: id, instanceRef: instanceRef, position: position, forcePosition: forcePosition, onOpen: onOpen, onClose: onClose, trapFocusMode: trapFocusMode, triggerType: triggerType, active: active, defaultActive: defaultActive, width: width, disableHideAnimation: disableHideAnimation, disableContentHover: disableContentHover, disableCloseOnOutsideClick: disableCloseOnOutsideClick, contentGap: contentGap, containerRef: containerRef, contentClassName: contentClassName, contentAttributes: { style: { ...paddingStyles?.variables } }, children: children }));
 };
 const PopoverDismissible = (props) => {
     const { handleClose } = useFlyoutContext();

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

@@ -1,7 +1,7 @@
 import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../_private/Flyout";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "containerRef"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "containerRef"> & {
     children?: React.ReactNode;
     padding?: number;
     variant?: "elevated" | "headless";

package/dist/components/Resizable/Resizable.d.ts

@@ -0,0 +1,8 @@
+import React from "react";
+import type * as T from "./Resizable.types";
+declare const Resizable: {
+    (props: T.Props): import("react/jsx-runtime").JSX.Element;
+    Item: React.FC<T.ItemProps>;
+    Handle: React.FC<T.HandleProps>;
+};
+export default Resizable;