reshaped 3.9.0-canary.9 → 3.9.0

package/dist/components/Actionable/Actionable.module.css

@@ -1 +1 @@
-@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-shadow-focus-inset)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-shadow-focus)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-shadow-focus-inset)}[role=button].root,button.root{cursor:pointer;user-select:none}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}
+@layer rs.reset{.root{background:none;border:0;color:inherit;display:inline-block;font-size:inherit;font-weight:inherit;isolation:isolate;line-height:inherit;margin:0;padding:0;position:relative;text-align:initial;text-decoration:none;vertical-align:top;-webkit-tap-highlight-color:transparent}}.touch{height:100%;inset:50%;min-height:24px;min-width:24px;position:absolute;transform:translate(-50%,-50%);width:100%}.root:focus{outline:none}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus);outline:none;z-index:var(--rs-z-index-relative)}[data-rs-keyboard] .root.--inset:focus{box-shadow:var(--rs-shadow-focus-inset)}[data-rs-keyboard] .root.--disabled-focus-ring:focus,[data-rs-keyboard] .root.--radius-inherit:focus{box-shadow:none}[data-rs-keyboard] .root.--radius-inherit:focus>*{box-shadow:var(--rs-shadow-focus)}[data-rs-keyboard] .root.--radius-inherit.--inset:focus>*{box-shadow:var(--rs-shadow-focus-inset)}[role=button].root,button.root{cursor:pointer;user-select:none}[data-rs-keyboard] label.root:has([data-rs-hidden-input]:focus){box-shadow:var(--rs-shadow-focus);z-index:var(--rs-z-index-relative)}.root.--disabled,.root[disabled]{cursor:not-allowed}.root.--disabled:active,.root[disabled]:active{transform:none}.root.--full-width{width:100%}

package/dist/components/Badge/Badge.js

@@ -7,7 +7,7 @@ import IconClose from "../../icons/Close.js";
 import { classNames } from "../../utilities/props.js";
 import s from "./Badge.module.css";
 const Badge = forwardRef((props, ref) => {
-    const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, } = props;
+    const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, as, } = props;
     const isActionable = !!(onClick || href);
     const iconSize = size === "small" ? 3 : 4;
     const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"]);
@@ -15,7 +15,7 @@ const Badge = forwardRef((props, ref) => {
         e.stopPropagation();
         onDismiss?.();
     };
-    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, touchHitbox: true, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
+    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: true, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
                     "aria-hidden": hidden ? "true" : undefined,
                 }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
 });

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

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

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

@@ -21,7 +21,7 @@ type BaseProps = {
     hidden?: boolean;
     /** Additional classname for the root element */
     className?: G.ClassName;
-} & Pick<ActionableProps, "href" | "onClick" | "attributes">;
+} & Pick<ActionableProps, "href" | "onClick" | "attributes" | "as">;
 type WithChildren = BaseProps & {
     /** Node for inserting text or other content */
     children?: React.ReactNode;

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

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

package/dist/components/Calendar/Calendar.module.css

@@ -1 +1 @@
-@layer rs.calendar.base;@layer rs.calendar.range;@layer rs.calendar.disabled;@layer rs.calendar.base{.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{isolation:isolate;padding:2px}@media (hover:hover) and (pointer:fine){.cell:hover .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.cell.--active .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);position:relative;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell-button:before{content:"";inset-block:0;inset-inline-start:-4px;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color;width:4px}}@layer rs.calendar.selection{.cell.--selection-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%);color:var(--rs-color-foreground-neutral)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-end-end-radius:0;border-start-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-end-start-radius:0;border-start-start-radius:0}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}}@layer rs.calendar.disabled{.cell-button[disabled]{background-color:transparent;color:var(--rs-color-foreground-disabled)}}
+.selection{table-layout:fixed;width:100%}.weekday{color:var(--rs-color-foreground-neutral-faded);font-weight:var(--rs-font-weight-regular);padding-bottom:var(--rs-unit-x2)}[dir=rtl] .control{transform:scaleX(-1)}.cell{isolation:isolate;padding:2px}@media (hover:hover) and (pointer:fine){.cell:hover .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.cell.--active .cell-button{background-color:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.cell.--selection-range .cell-button{background-color:rgba(var(--rs-color-rgb-background-neutral),32%);color:var(--rs-color-foreground-neutral)}.cell.--selection-range:not(:last-child) .cell-button,.cell.--selection-start:not(:last-child) .cell-button{border-end-end-radius:0;border-start-end-radius:0}.cell.--selection-end:not(:first-child) .cell-button,.cell.--selection-range+:hover .cell-button,.cell.--selection-range:not(:first-child) .cell-button,.cell.--selection-start+:hover .cell-button{border-end-start-radius:0;border-start-start-radius:0}.cell.--selection-range+.--selection-end .cell-button:before,.cell.--selection-range+.--selection-range .cell-button:before,.cell.--selection-start+.--selection-range .cell-button:before{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}@media (hover:hover) and (pointer:fine){.cell.--selection-range+:hover .cell-button:before,.cell.--selection-start+:hover .cell-button:before{background-color:rgba(var(--rs-color-rgb-background-neutral),32%)}}.cell-button{border-radius:var(--rs-radius-small);padding:var(--rs-unit-x2);position:relative;text-align:center;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:color,background-color,border-radius}.cell-button:before{content:"";inset-block:0;inset-inline-start:-4px;position:absolute;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:background-color;width:4px}.cell-button[disabled]{background-color:transparent!important;color:var(--rs-color-foreground-disabled)!important}

package/dist/components/Card/Card.d.ts

@@ -7,10 +7,10 @@ declare const Card: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
     onClick?: import("../Actionable").ActionableProps["onClick"];
     href?: string;
-    as?: keyof React.JSX.IntrinsicElements | undefined;
     className?: import("../../types/global").ClassName;
     attributes?: (import("../..").Attributes<keyof React.JSX.IntrinsicElements> & ((import("../..").Attributes<"button"> & Omit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "form" | "slot" | "style" | "title" | "disabled" | "key" | "value" | "hidden" | "color" | "content" | "children" | "className" | "ref" | "aria-orientation" | "role" | "translate" | "suppressHydrationWarning" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dir" | "name" | "type" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "popover" | "popoverTargetAction" | "popoverTarget" | "inert" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onScrollEnd" | "onScrollEndCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onToggle" | "onBeforeToggle" | "onTransitionCancel" | "onTransitionCancelCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "onTransitionRun" | "onTransitionRunCapture" | "onTransitionStart" | "onTransitionStartCapture"> & {
         ref?: import("../Actionable/Actionable.types").AttributesRef;
     }) | undefined)) | undefined;
+    as?: keyof React.JSX.IntrinsicElements | undefined;
 } & Pick<import("../View").ViewProps, "height"> & React.RefAttributes<HTMLElement>>;
 export default Card;

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

@@ -2,7 +2,7 @@ import type { ActionableProps } from "../Actionable";
 import type { ViewProps } from "../View";
 import type React from "react";
 import type * as G from "../../types/global";
-export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Component padding, base unit multiplier */
     padding?: G.Responsive<number>;
     /** Remove side borders and apply negative margins, base unit multiplier */
@@ -17,12 +17,12 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     onClick?: ActionableProps["onClick"];
     /** URL to navigate to when the component is clicked, turns component into a link */
     href?: string;
-    /** Custom component tag name
-     * @default "div"
-     */
-    as?: TagName;
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName> & ActionableProps["attributes"];
+    /** Custom component tag name
+     * @default "div"
+     */
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
 } & Pick<ViewProps, "height">;

package/dist/components/Flyout/Flyout.constants.d.ts

@@ -1,3 +1,4 @@
 export declare const mouseEnter = 600;
+export declare const mouseLeave = 150;
 export declare const defaultStyles: React.CSSProperties;
 export declare const resetStyles: React.CSSProperties;

package/dist/components/Flyout/Flyout.constants.js

@@ -1,4 +1,5 @@
 export const mouseEnter = 600;
+export const mouseLeave = 150;
 export const defaultStyles = {
     left: 0,
     top: 0,

package/dist/components/Flyout/Flyout.module.css

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:100%;opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}
+.content{--rs-flyout-gap:0;--rs-flyout-max-h:100%;--rs-flyout-max-w:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;display:flex;flex-direction:column;isolation:isolate;pointer-events:none;position:absolute;z-index:var(--rs-z-index-absolute)}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;flex-grow:1;height:100%;max-height:var(--rs-flyout-max-h);max-width:var(--rs-flyout-max-w);opacity:0;outline:none;overflow:auto;pointer-events:all;transform:scale(.92) translateY(0);transform-origin:var(--rs-flyout-origin-x) var(--rs-flyout-origin-y);transition:1ms var(--rs-easing-accelerate)}[data-rs-keyboard] .inner:focus{box-shadow:var(--rs-shadow-focus)}.content.--width-trigger .inner{transform:scale(1) translateY(var(--rs-unit-x2))}.content.--position-top,.content.--position-top-end,.content.--position-top-start{--rs-flyout-origin-y:100%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end-top,.content.--position-start-top{--rs-flyout-origin-y:0%}.content.--position-end-bottom,.content.--position-start-bottom{--rs-flyout-origin-y:100%}.content.--visible .inner{opacity:1;transform:scale(1) translateY(0)}.content.--animated .inner{transition-duration:var(--rs-duration-rapid);transition-property:opacity,transform}.content.--animated.--visible .inner{transition-duration:var(--rs-duration-fast);transition-timing-function:var(--rs-easing-decelerate)}

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

@@ -131,6 +131,8 @@ type BaseProps = {
     contentShift?: number;
     /** Maximum height for the content */
     contentMaxHeight?: string;
+    /** Maximum width for the content */
+    contentMaxWidth?: string;
     /** Additional classname for the content element */
     contentClassName?: string;
     /** Additional attributes for the content element */
@@ -188,7 +190,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -11,7 +11,7 @@ import s from "./Flyout.module.css";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
     const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
@@ -97,6 +97,7 @@ const FlyoutContent = (props) => {
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
                 "--rs-flyout-gap": contentGap,
                 "--rs-flyout-max-h": contentMaxHeight,
+                "--rs-flyout-max-w": contentMaxWidth,
             }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
     return _jsx(Portal, { targetRef: containerRef, children: content });
 };

package/dist/components/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentCo
 import useFlyout from "./useFlyout.js";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -55,12 +55,13 @@ const FlyoutControlled = (props) => {
     // Touch devices trigger onMouseEnter but we don't need to apply regular hover timeouts
     // So we're saving a flag on touch start and then change the mouse enter behavior
     const hoverTriggeredWithTouchEventRef = React.useRef(false);
+    const originCoordinatesRef = React.useRef(originCoordinates ?? null);
     // eslint-disable-next-line react-hooks/refs
+    originCoordinatesRef.current = originCoordinates ?? null;
     const flyout = useFlyout({
         triggerElRef: positionRef ?? triggerElRef,
         flyoutElRef,
-        // eslint-disable-next-line react-hooks/refs
-        triggerBounds: originCoordinates ?? triggerBoundsRef.current,
+        triggerBoundsRef: originCoordinates ? originCoordinatesRef : triggerBoundsRef,
         width,
         position: passedPosition,
         defaultActive: resolvedActive,
@@ -103,7 +104,7 @@ const FlyoutControlled = (props) => {
             return;
         onCloseRef.current?.({ reason: options.reason });
         if (options?.closeParents) {
-            parentFlyoutContext?.handleClose?.({});
+            parentFlyoutContext?.handleClose?.({ closeParents: true, reason: options.reason });
         }
     }, [isRendered, isDismissible, triggerType, onCloseRef, disabled, parentFlyoutContext]);
     /**
@@ -143,18 +144,31 @@ const FlyoutControlled = (props) => {
                 cooldown.warm();
             timerRef.current = setTimeout(() => {
                 handleOpen();
-            }, groupTimeouts && cooldown.status === "warming" ? timeouts.mouseEnter : 0);
+            }, groupTimeouts && cooldown.status === "warming"
+                ? timeouts.mouseEnter
+                : isSubmenu
+                    ? timeouts.mouseEnter
+                    : 0);
         }
-    }, [clearTimer, handleOpen, groupTimeouts]);
+    }, [clearTimer, handleOpen, groupTimeouts, isSubmenu]);
     const handleMouseLeave = React.useCallback((e) => {
-        if (e.relatedTarget === flyoutElRef.current)
+        if (e.relatedTarget === flyoutElRef.current ||
+            (e.relatedTarget instanceof Node && flyoutElRef.current?.contains(e.relatedTarget)))
             return;
-        if (e.relatedTarget === triggerElRef.current)
+        if (e.relatedTarget === triggerElRef.current ||
+            (e.relatedTarget instanceof Node && triggerElRef.current?.contains(e.relatedTarget)))
             return;
         cooldown.cool();
         clearTimer();
-        handleClose({});
-    }, [clearTimer, handleClose, triggerElRef, flyoutElRef]);
+        if (isSubmenu) {
+            timerRef.current = setTimeout(() => {
+                handleClose({});
+            }, timeouts.mouseLeave);
+        }
+        else {
+            handleClose({});
+        }
+    }, [clearTimer, handleClose, triggerElRef, flyoutElRef, isSubmenu]);
     const handleTriggerClick = React.useCallback(() => {
         if (!isRendered) {
             handleOpen();
@@ -290,8 +304,10 @@ const FlyoutControlled = (props) => {
         resizeObserver.observe(document.body);
         if (triggerElRef.current)
             resizeObserver.observe(triggerElRef.current);
+        if (flyoutElRef.current)
+            resizeObserver.observe(flyoutElRef.current);
         return () => resizeObserver.disconnect();
-    }, [updatePosition, triggerElRef, isRendered]);
+    }, [updatePosition, triggerElRef, isRendered, flyoutElRef]);
     React.useEffect(() => {
         updatePosition({ sync: true });
     }, [isRTL, updatePosition]);
@@ -336,6 +352,7 @@ const FlyoutControlled = (props) => {
             contentAttributes,
             contentGap,
             contentMaxHeight,
+            contentMaxWidth,
             containerRef,
             disableContentHover,
             autoFocus,

package/dist/components/Flyout/useFlyout.d.ts

@@ -6,7 +6,7 @@ type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
-    triggerBounds?: DOMRect | G.Coordinates | null;
+    triggerBoundsRef: React.RefObject<DOMRect | G.Coordinates | null>;
 }) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

package/dist/components/Flyout/useFlyout.js

@@ -26,7 +26,7 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBounds, contentGap, contentShift, ...options } = args;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, width, container, } = options;
     const lastUsedPositionRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
@@ -60,7 +60,7 @@ const useFlyout = (args) => {
         const nextFlyoutData = flyout({
             triggerEl: triggerElRef.current,
             flyoutEl: flyoutElRef.current,
-            triggerBounds,
+            triggerBounds: triggerBoundsRef.current,
             width,
             position: changePositon ? defaultPosition : lastUsedPositionRef.current,
             fallbackPositions: changePositon ? cachedFallbackPositions : [],
@@ -88,7 +88,7 @@ const useFlyout = (args) => {
         isRTL,
         flyoutElRef,
         triggerElRef,
-        triggerBounds,
+        triggerBoundsRef,
         width,
         contentGap,
         contentShift,

package/dist/components/Flyout/utilities/calculatePosition.js

@@ -1,10 +1,12 @@
+import { SCREEN_OFFSET } from "./constants.js";
 import { getRTLPosition, centerBySize } from "./helpers.js";
-const SCREEN_OFFSET = 8;
 /**
  * Calculate styles for the current position
  */
 const calculatePosition = (args) => {
-    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, } = args;
+    const { triggerBounds, flyoutBounds, containerBounds, position: passedPosition, rtl, width: passedWidth, contentGap = 0, contentShift = 0, passedContainer, fallbackAdjustLayout, 
+    // fallbackMinWidth,
+    fallbackMinHeight, } = args;
     const isFullWidth = passedWidth === "full" || passedWidth === "100%";
     let left = 0;
     let top = 0;
@@ -137,15 +139,20 @@ const calculatePosition = (args) => {
             if (bottom !== null)
                 bottom = bottom + (flyoutHeight - height);
         }
-        if (updatedOverflow.left > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.left);
-            left = left + (flyoutWidth - width);
-        }
-        else if (updatedOverflow.right > 0) {
-            width = Math.max(fallbackMinWidth ? parseInt(fallbackMinWidth) : 0, flyoutWidth - updatedOverflow.right);
-            if (right !== null)
-                right = right + (flyoutWidth - width);
-        }
+        // TODO: Decide if we need horizontal scrolling for the fallbacks, might be a bad practice anyways
+        // if (updatedOverflow.left > 0) {
+        // 	width = Math.max(
+        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
+        // 		flyoutWidth - updatedOverflow.left
+        // 	);
+        // 	left = left + (flyoutWidth - width);
+        // } else if (updatedOverflow.right > 0) {
+        // 	width = Math.max(
+        // 		fallbackMinWidth ? parseInt(fallbackMinWidth) : 0,
+        // 		flyoutWidth - updatedOverflow.right
+        // 	);
+        // 	if (right !== null) right = right + (flyoutWidth - width);
+        // }
     }
     if (isFullWidth) {
         left = SCREEN_OFFSET;

package/dist/components/Flyout/utilities/constants.d.ts

@@ -0,0 +1 @@
+export declare const SCREEN_OFFSET = 8;

package/dist/components/Flyout/utilities/constants.js

@@ -0,0 +1 @@
+export const SCREEN_OFFSET = 8;

package/dist/components/Flyout/utilities/flyout.js

@@ -1,6 +1,7 @@
 import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
 import { resetStyles } from "../Flyout.constants.js";
 import calculatePosition from "./calculatePosition.js";
+import { SCREEN_OFFSET } from "./constants.js";
 import getPositionFallbacks from "./getPositionFallbacks.js";
 import isFullyVisible from "./isFullyVisible.js";
 /**
@@ -33,16 +34,26 @@ const flyout = (args) => {
     const shadowRoot = triggerEl && getShadowRoot(triggerEl);
     // Insert inside shadow root if possible to make sure styles are applied correctly
     (shadowRoot || document.body).appendChild(targetClone);
-    const cloneRect = targetClone.getBoundingClientRect();
-    const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
     const closestFixedContainer = !passedContainer && triggerEl ? findClosestPositionContainer({ el: triggerEl }) : undefined;
     const container = passedContainer ||
         // Render inside fixed position container automatically to keep their position synced on scroll
         closestFixedContainer ||
         document.body;
     const renderContainerBounds = container.getBoundingClientRect();
-    const visualContainerBounds = (passedContainer || document.body).getBoundingClientRect();
-    const applyPosition = (position) => {
+    const applyPosition = (position, options) => {
+        const widthOption = options?.width || width;
+        // If there is a width override, apply it to calculate the position and the height correctly
+        if (widthOption === "full") {
+            targetClone.style.width = `calc(100% - ${SCREEN_OFFSET * 2}px)`;
+        }
+        else if (widthOption === "trigger") {
+            targetClone.style.width = `${resolvedTriggerBounds.width}px`;
+        }
+        else {
+            targetClone.style.width = widthOption || "";
+        }
+        const cloneRect = targetClone.getBoundingClientRect();
+        const flyoutBounds = { width: cloneRect.width, height: cloneRect.height };
         return calculatePosition({
             triggerBounds: resolvedTriggerBounds,
             flyoutBounds,
@@ -51,7 +62,7 @@ const flyout = (args) => {
             contentGap: contentGap * unitModifier,
             contentShift: contentShift * unitModifier,
             rtl,
-            width,
+            width: widthOption,
             passedContainer: passedContainer ||
                 (closestFixedContainer !== document.body ? closestFixedContainer : undefined),
             fallbackAdjustLayout,
@@ -60,6 +71,12 @@ const flyout = (args) => {
         });
     };
     const testVisibility = (calculated) => {
+        const visualContainerBounds = passedContainer?.getBoundingClientRect() ?? {
+            width: window.innerWidth,
+            height: window.innerHeight,
+            left: window.scrollX,
+            top: window.scrollY,
+        };
         return isFullyVisible({
             flyoutBounds: calculated.boundaries,
             visualContainerBounds,
@@ -75,6 +92,17 @@ const flyout = (args) => {
             calculated = tested;
         return visible;
     });
+    // Try full width positions in case it doesn't fit on any side
+    if (!calculated) {
+        const smallScreenFallbackPositions = ["top", "bottom"].filter((position) => testOrder.includes(position));
+        smallScreenFallbackPositions.some((position) => {
+            const tested = applyPosition(position, { width: "full" });
+            const visible = testVisibility(tested);
+            if (visible)
+                calculated = tested;
+            return visible;
+        });
+    }
     if (!calculated)
         calculated = applyPosition(lastUsedPosition);
     onPositionChoose(calculated.position);

package/dist/components/Flyout/utilities/isFullyVisible.d.ts

@@ -1,12 +1,13 @@
+type Bounds = Pick<DOMRect, "left" | "top" | "width" | "height">;
 /**
  * Check if element visually fits within its render container
  */
 declare const isFullyVisible: (args: {
     /** Bounds of the flyout content */
-    flyoutBounds: Pick<DOMRect, "left" | "top" | "width" | "height">;
+    flyoutBounds: Bounds;
     /** Bounds of the container where the flyout content should fit */
-    visualContainerBounds: DOMRect;
+    visualContainerBounds: Bounds;
     /** Bounds of the container where flyout content is rendered */
-    renderContainerBounds: DOMRect;
+    renderContainerBounds: Bounds;
 }) => boolean;
 export default isFullyVisible;

package/dist/components/Flyout/utilities/isFullyVisible.js

@@ -1,20 +1,21 @@
+import { SCREEN_OFFSET } from "./constants.js";
 /**
  * Check if element visually fits within its render container
  */
 const isFullyVisible = (args) => {
     const { flyoutBounds, visualContainerBounds, renderContainerBounds } = args;
-    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left) {
+    if (renderContainerBounds.left + flyoutBounds.left < visualContainerBounds.left + SCREEN_OFFSET) {
         return false;
     }
-    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top) {
+    if (renderContainerBounds.top + flyoutBounds.top < visualContainerBounds.top + SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.left + flyoutBounds.left + flyoutBounds.width >
-        visualContainerBounds.right) {
+        visualContainerBounds.left + visualContainerBounds.width - SCREEN_OFFSET) {
         return false;
     }
     if (renderContainerBounds.top + flyoutBounds.top + flyoutBounds.height >
-        visualContainerBounds.bottom) {
+        visualContainerBounds.top + visualContainerBounds.height - SCREEN_OFFSET) {
         return false;
     }
     return true;