reshaped 3.2.3 → 3.2.5

package/dist/components/Actionable/Actionable.js

@@ -5,7 +5,7 @@ import { classNames } from "../../utilities/helpers.js";
 import * as keys from "../../constants/keys.js";
 import s from "./Actionable.module.css";
 const Actionable = forwardRef((props, ref) => {
-    const { children, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, fullWidth, className, attributes, } = props;
+    const { children, href, onClick, type, disabled, insetFocus, disableFocusRing, borderRadius, as, stopPropagation, fullWidth, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], borderRadius && s[`--radius-${borderRadius}`], insetFocus && s["--inset"], disableFocusRing && s["--disabled-focus-ring"], fullWidth && s["--full-width"]);
     const rootAttributes = { ...attributes };
     const hasClickHandler = onClick || attributes?.onClick;
@@ -38,6 +38,8 @@ const Actionable = forwardRef((props, ref) => {
     const handlePress = (event) => {
         if (disabled)
             return;
+        if (stopPropagation)
+            event.stopPropagation();
         onClick?.(event);
         attributes?.onClick?.(event);
     };
@@ -48,6 +50,8 @@ const Actionable = forwardRef((props, ref) => {
             return;
         if (rootAttributes.role !== "button")
             return;
+        if (stopPropagation)
+            event.stopPropagation();
         event.preventDefault();
         handlePress(event);
     };

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

@@ -10,6 +10,7 @@ export type Props = {
     insetFocus?: boolean;
     disableFocusRing?: boolean;
     borderRadius?: "inherit";
+    stopPropagation?: boolean;
     as?: keyof JSX.IntrinsicElements;
     className?: G.ClassName;
     attributes?: G.Attributes<"button"> & Omit<JSX.IntrinsicElements["a"], keyof G.Attributes<"button">> & {

package/dist/components/Button/Button.js

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

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

@@ -4,7 +4,7 @@ import type { ActionableProps } from "../Actionable";
 import type { AlignerProps as BaseAlignerProps } from "../_private/Aligner";
 import type * as G from "../../types/global";
 export type Size = "xlarge" | "large" | "medium" | "small";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "as" | "stopPropagation"> & {
     color?: "primary" | "critical" | "positive" | "neutral" | "media" | "inherit";
     variant?: "solid" | "outline" | "ghost" | "faded";
     icon?: IconProps["svg"];

package/dist/components/Carousel/Carousel.module.css

@@ -1 +1 @@
-.root{position:relative}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-raised)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:inline;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}
+.root{position:relative}.control{display:none;opacity:0;position:absolute;top:50%;transform:translate(-50%,-50%) scale(.75);transform-origin:50%;transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;z-index:var(--rs-z-index-raised)}.--control-prev{left:0}.--control-next{left:100%}.--control-visible{opacity:1;transform:translate(-50%,-50%) scale(1)}.scroll{overflow:auto;-ms-overflow-style:none;overflow:-moz-scrollbars-none;-webkit-overflow-scrolling:touch;backface-visibility:hidden;margin:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed) * -1);padding:0 calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-behavior:smooth;scroll-padding-inline-start:calc(var(--rs-unit-x1) * var(--rs-carousel-bleed));scroll-snap-type:x mandatory;scrollbar-width:none}.scroll::-webkit-scrollbar{display:none;height:0;width:0}.item{--rs-carousel-item-width:calc(100% / var(--rs-carousel-items) - var(--rs-view-gap-value) * (var(--rs-carousel-items) - 1) / var(--rs-carousel-items));position:relative;scroll-snap-align:start;width:var(--rs-carousel-item-width)}@media (--rs-viewport-l ),(hover:hover){.--control-rendered{display:block}}@media (hover:none){.--bleed .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}}@media (--rs-viewport-m ) and (hover:none){.--bleed-true--m .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--m .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-l ) and (hover:none){.--bleed-true--l .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--l .item{width:var(--rs-carousel-item-width)}}@media (--rs-viewport-xl ) and (hover:none){.--bleed-true--xl .item{width:calc(var(--rs-carousel-item-width) - 10% / var(--rs-carousel-items))}.--bleed-false--xl .item{width:var(--rs-carousel-item-width)}}.root{--rs-carousel-items-s:unset;--rs-carousel-items-m:var(--rs-carousel-items-s);--rs-carousel-items-l:var(--rs-carousel-items-m);--rs-carousel-items-xl:var(--rs-carousel-items-l);--rs-carousel-items:var(--rs-carousel-items-s);--rs-carousel-bleed-s:0;--rs-carousel-bleed-m:var(--rs-carousel-bleed-s);--rs-carousel-bleed-l:var(--rs-carousel-bleed-m);--rs-carousel-bleed-xl:var(--rs-carousel-bleed-l);--rs-carousel-bleed:var(--rs-carousel-bleed-s)}@media (--rs-viewport-m ){.root{--rs-carousel-items:var(--rs-carousel-items-m);--rs-carousel-bleed:var(--rs-carousel-bleed-m)}}@media (--rs-viewport-l ){.root{--rs-carousel-items:var(--rs-carousel-items-l);--rs-carousel-bleed:var(--rs-carousel-bleed-l)}}@media (--rs-viewport-xl ){.root{--rs-carousel-items:var(--rs-carousel-items-xl);--rs-carousel-bleed:var(--rs-carousel-bleed-xl)}}

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -27,6 +27,7 @@ const DropdownMenuContent = (props) => {
         },
     }, [subMenuInstance?.current], {
         disabled: flyout.status === "idle",
+        ref: attributes?.ref,
     });
     const contentClassName = classNames(s.menu, className);
     return (_jsx(Popover.Content, { className: contentClassName, attributes: { ...attributes, ref }, children: children }));

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

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

package/dist/components/Link/Link.d.ts

@@ -1,4 +1,4 @@
-declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "type" | "onClick" | "href"> & {
+declare const Link: import("react").ForwardRefExoticComponent<Pick<import("../Actionable").ActionableProps, "disabled" | "className" | "attributes" | "children" | "type" | "onClick" | "href" | "stopPropagation"> & {
     icon?: import("../Icon").IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";

package/dist/components/Link/Link.js

@@ -5,8 +5,8 @@ import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import s from "./Link.module.css";
 const Link = forwardRef((props, ref) => {
-    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, } = props;
+    const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, } = props;
     const rootClassNames = classNames(s.root, className, disabled && s["--disabled"], variant && s[`--variant-${variant}`], color && s[`--color-${color}`], icon && s["--with-icon"]);
-    return (_jsxs(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, children: [icon && _jsx(Icon, { svg: icon }), children] }));
+    return (_jsxs(Actionable, { href: href, disabled: disabled, className: rootClassNames, attributes: attributes, type: type, onClick: onClick, ref: ref, stopPropagation: stopPropagation, children: [icon && _jsx(Icon, { svg: icon }), children] }));
 });
 export default Link;

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

@@ -1,6 +1,6 @@
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "type" | "stopPropagation"> & {
     icon?: IconProps["svg"];
     color?: "inherit" | "critical" | "primary" | "positive" | "warning";
     variant?: "plain" | "underline";

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

@@ -1,6 +1,6 @@
 declare const _default: {
     title: string;
-    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "type" | "onClick" | "href"> & {
+    component: import("react").ForwardRefExoticComponent<Pick<import("../../Actionable").ActionableProps, "children" | "disabled" | "className" | "attributes" | "type" | "onClick" | "href" | "stopPropagation"> & {
         icon?: import("../../Icon").IconProps["svg"];
         color?: "inherit" | "critical" | "primary" | "positive" | "warning";
         variant?: "plain" | "underline";

package/dist/components/MenuItem/MenuItem.js

@@ -7,11 +7,11 @@ import View from "../View/index.js";
 import MenuItemAligner from "./MenuItemAligner.js";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
-    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, as, className, attributes, } = props;
+    const { icon, startSlot, endSlot, children, color = "primary", selected, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, className, attributes, } = props;
     const rootClassNames = classNames(s.root, className, responsiveClassNames(s, "--size", size), responsiveClassNames(s, "--rounded-corners", roundedCorners), color && s[`--color-${color}`], selected && s["--selected"], disabled && s["--disabled"]);
     const gapSize = responsivePropDependency(size, (size) => (size === "large" ? 3 : 2));
     const iconSize = responsivePropDependency(size, (size) => (size === "large" ? 5 : 4));
-    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
+    return (_jsx(Actionable, { disabled: disabled, className: rootClassNames, attributes: { ...attributes, "data-rs-aligner-target": true }, onClick: onClick, href: href, ref: ref, as: as, stopPropagation: stopPropagation, children: _jsxs(View, { direction: "row", gap: gapSize, align: "center", children: [icon && _jsx(Icon, { svg: icon, className: s.icon, size: iconSize }), !icon && startSlot, children && (_jsx(View.Item, { grow: true, className: s.content, children: children })), endSlot] }) }));
 });
 MenuItem.Aligner = MenuItemAligner;
 export default MenuItem;

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

@@ -3,7 +3,7 @@ import type { IconProps } from "../Icon";
 import type { ActionableProps } from "../Actionable";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large";
-export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as"> & {
+export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as" | "stopPropagation"> & {
     color?: "neutral" | "critical" | "primary";
     icon?: IconProps["svg"];
     startSlot?: React.ReactNode;

package/dist/components/Modal/Modal.module.css

@@ -1 +1 @@
-.root{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100% - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100% - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom.--contained{position:absolute}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-start.--contained{position:absolute}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}.--position-end.--contained{position:absolute}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--contained{position:absolute}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100% - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100% - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--m.--contained{position:absolute}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-start--m.--contained{position:absolute}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}.--position-end--m.--contained{position:absolute}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--contained{position:absolute}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100% - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100% - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--l.--contained{position:absolute}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-start--l.--contained{position:absolute}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}.--position-end--l.--contained{position:absolute}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--contained{position:absolute}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(100% - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(100% - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:fixed;transform:translateY(100%);width:100%}.--position-bottom--xl.--contained{position:absolute}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(-100%);width:var(--rs-modal-size)}.--position-start--xl.--contained{position:absolute}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(100% - var(--rs-unit-x4));opacity:1;overflow:auto;position:fixed;transform:translate(100%);width:var(--rs-modal-size)}.--position-end--xl.--contained{position:absolute}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:100%;opacity:0;overflow:auto;position:fixed;transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--contained{position:absolute}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}
+.root{--rs-modal-container-width:100vw;--rs-modal-position:fixed;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);transition:var(--rs-easing-accelerate) var(--rs-duration-medium);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-focus-shadow);outline:none}.root.--contained{--rs-modal-position:absolute;--rs-modal-container-width:100%}.root{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);--rs-modal-size-m:var(--rs-modal-size-s);--rs-modal-size-l:var(--rs-modal-size-m);--rs-modal-size-xl:var(--rs-modal-size-l);--rs-modal-size:var(--rs-modal-size-s)}.--position-center{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start{transform:translate(100%)}.--position-start.--active,[dir=rtl] .--position-start.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end{transform:translate(-100%)}.--position-end.--active,[dir=rtl] .--position-end.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen.--active,[dir=rtl] .--position-full-screen.--active{opacity:1;transform:translate(0)!important}.--active,[dir=rtl] .--active{transition-timing-function:var(--rs-easing-decelerate)}.--dragging{transition:none}.--overflow-visible{overflow:visible}@media (--rs-viewport-m ){.root{--rs-modal-size:var(--rs-modal-size-m)}.--position-center--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--m{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--m{transform:translate(100%)}.--position-start--m.--active,[dir=rtl] .--position-start--m.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--m{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--m{transform:translate(-100%)}.--position-end--m.--active,[dir=rtl] .--position-end--m.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--m{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--m.--active,[dir=rtl] .--position-full-screen--m.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-l ){.root{--rs-modal-size:var(--rs-modal-size-l)}.--position-center--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--l{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--l{transform:translate(100%)}.--position-start--l.--active,[dir=rtl] .--position-start--l.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--l{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--l{transform:translate(-100%)}.--position-end--l.--active,[dir=rtl] .--position-end--l.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--l{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--l.--active,[dir=rtl] .--position-full-screen--l.--active{opacity:1;transform:translate(0)!important}}@media (--rs-viewport-xl ){.root{--rs-modal-size:var(--rs-modal-size-xl)}.--position-center--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:var(--rs-radius-large);height:auto;inset:0;margin:var(--rs-unit-x4);max-height:none;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x8));opacity:0;overflow:hidden;position:relative;transform:scale(.96);width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0) scale(1)!important}.--position-bottom--xl{--rs-modal-size-s:auto;border-radius:var(--rs-radius-large) var(--rs-radius-large) 0 0;height:var(--rs-modal-size);inset:0;inset-block-start:auto;margin:0;margin-top:var(--rs-unit-x4);max-height:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));max-width:100%;opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-start--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-end:auto;margin:0;margin-inline-end:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(-100%);width:var(--rs-modal-size)}[dir=rtl] .--position-start--xl{transform:translate(100%)}.--position-start--xl.--active,[dir=rtl] .--position-start--xl.--active{transform:translate(min(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-end--xl{--rs-modal-size-s:calc(var(--rs-unit-x1) * 100);border-radius:0;height:100%;inset:0;inset-inline-start:auto;margin:0;margin-inline-start:var(--rs-unit-x4);max-height:100%;max-width:calc(var(--rs-modal-container-width) - var(--rs-unit-x4));opacity:1;overflow:auto;position:var(--rs-modal-position);transform:translate(100%);width:var(--rs-modal-size)}[dir=rtl] .--position-end--xl{transform:translate(-100%)}.--position-end--xl.--active,[dir=rtl] .--position-end--xl.--active{transform:translate(max(var(--rs-modal-drag,0px),0px)) scale(1)!important}.--position-full-screen--xl{--rs-modal-size-s:100%;border-radius:0;height:100%;inset:0;inset-block-start:auto;margin:0;max-height:100%;max-width:var(--rs-modal-container-width);opacity:0;overflow:auto;position:var(--rs-modal-position);transform:translateY(var(--rs-unit-x4));width:100%}.--position-full-screen--xl.--active,[dir=rtl] .--position-full-screen--xl.--active{opacity:1;transform:translate(0)!important}}

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

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

package/dist/components/TextField/TextField.js

@@ -35,14 +35,14 @@ const TextFieldSlot = (props) => {
     return content.filter(Boolean);
 };
 const TextField = (props) => {
-    const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, icon, endIcon, startSlot, endSlot, prefix, suffix, size = "medium", variant = "outline", focused, multiline, className, attributes, } = props;
+    const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, icon, endIcon, startSlot, endSlot, prefix, suffix, size = "medium", variant = "outline", focused, multiline, rounded, className, attributes, } = props;
     const formControl = useFormControl();
     const id = useElementId(props.id);
     const inputId = formControl?.attributes.id || props.inputAttributes?.id || id;
     const disabled = formControl?.disabled || props.disabled;
     const hasError = formControl?.hasError || props.hasError;
     const inputAttributes = { ...props.inputAttributes, ...formControl?.attributes };
-    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], focused && s["--focused"], multiline && s["--multiline"], variant && s[`--variant-${variant}`]);
+    const rootClassName = classNames(s.root, className, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], focused && s["--focused"], multiline && s["--multiline"], rounded && s["--rounded"], variant && s[`--variant-${variant}`]);
     const handleChange = (event) => {
         if (!onChange)
             return;

package/dist/components/TextField/TextField.module.css

@@ -1 +1 @@
-.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;gap:var(--rs-text-field-gap);padding:calc(var(--rs-unit-x1) - 1px) var(--rs-text-field-gap);position:relative;row-gap:var(--rs-unit-x1);z-index:0}.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) calc(var(--rs-text-field-gap) * -1);outline:none;padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x1) * 2);position:relative;z-index:5}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-unit-x1) * -1)}.icon{pointer-events:none}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium .input{padding-block:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large .input{padding-block:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{padding-block:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--m .input{padding-block:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--m .input{padding-block:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--l .input{padding-block:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--l .input{padding-block:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{padding-block:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{padding-block:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}
+.root{--rs-p-h:var(--rs-text-field-gap);align-items:center;background:var(--rs-color-background-elevation-base);border:1px solid var(--rs-color-border-neutral);display:flex;gap:var(--rs-text-field-gap);padding:calc(var(--rs-unit-x1) - 1px) var(--rs-text-field-gap);position:relative;row-gap:var(--rs-unit-x1);z-index:0}.root:not(:has(button:focus,a:focus,[tabindex="0"]:focus)):focus-within{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--multiline{flex-wrap:wrap}.root.--multiline .input{width:auto}.root.--rounded{border-radius:999px}.root.--rounded .affix:first-child,.root.--rounded .icon:first-child{padding-inline-start:var(--rs-unit-x1)}.root.--rounded .input:first-child{padding-inline-start:calc(var(--rs-text-field-gap) + var(--rs-unit-x1))}.input{background:none;border:none;box-sizing:border-box;color:var(--rs-color-foreground-neutral);flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);margin:calc(var(--rs-unit-x1) * -1) calc(var(--rs-text-field-gap) * -1);outline:none;padding-inline:var(--rs-text-field-gap);position:relative;width:100%;z-index:1}.input:-webkit-autofill{-webkit-background-clip:text;-webkit-text-fill-color:var(--rs-color-foreground-neutral)}.affix,.icon,.slot{align-items:center;display:flex;flex-shrink:0;min-height:calc(var(--rs-text-field-line-height) + var(--rs-unit-x1) * 2);position:relative;z-index:5}.slot--position-end:last-child{margin-inline-end:calc(var(--rs-unit-x1) * -1)}.icon{pointer-events:none}.affix{color:var(--rs-color-foreground-neutral-faded)}.affix.affix--position-start{padding-inline-end:var(--rs-text-field-gap)}.affix.affix--position-start:after{border-inline-end:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-end:0;position:absolute}.affix.affix--position-end{padding-inline-start:var(--rs-text-field-gap)}.affix.affix--position-end:after{border-inline-start:1px solid var(--rs-color-border-neutral-faded);content:"";inset-block:var(--rs-unit-x1);inset-inline-start:0;position:absolute}.root.--disabled{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled)}.root.--disabled,.root.--disabled .input{color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium .input{padding-block:var(--rs-unit-x2)}.--size-medium .affix,.--size-medium .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large .input{padding-block:var(--rs-unit-x3)}.--size-large .affix,.--size-large .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge .input{padding-block:var(--rs-unit-x4)}.--size-xlarge .affix,.--size-xlarge .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded:focus-within{border-color:var(--rs-color-border-primary)}.root.--variant-headless{background:transparent;border-color:transparent}.root.--variant-headless.--status-error,.root.--variant-headless.--status-error:focus-within,.root.--variant-headless:focus-within{border-color:transparent;box-shadow:none}.root.--status-error{border-color:var(--rs-color-border-critical)}.root.--status-error:focus-within{border-color:var(--rs-color-border-primary)}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--m .input{padding-block:var(--rs-unit-x2)}.--size-medium--m .affix,.--size-medium--m .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--m .input{padding-block:var(--rs-unit-x3)}.--size-large--m .affix,.--size-large--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--m .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--m .affix,.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--l .input{padding-block:var(--rs-unit-x2)}.--size-medium--l .affix,.--size-medium--l .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--l .input{padding-block:var(--rs-unit-x3)}.--size-large--l .affix,.--size-large--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--l .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--l .affix,.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-text-field-gap:var(--rs-unit-x2);--rs-text-field-line-height:var(--rs-line-height-body-3);border-radius:var(--rs-radius-small)}.--size-medium--xl .input{padding-block:var(--rs-unit-x2)}.--size-medium--xl .affix,.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-text-field-gap:var(--rs-unit-x3);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-large--xl .input{padding-block:var(--rs-unit-x3)}.--size-large--xl .affix,.--size-large--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-text-field-gap:var(--rs-unit-x4);--rs-text-field-line-height:var(--rs-line-height-body-2);border-radius:var(--rs-radius-medium)}.--size-xlarge--xl .input{padding-block:var(--rs-unit-x4)}.--size-xlarge--xl .affix,.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);letter-spacing:var(--rs-letter-spacing-body-2);line-height:var(--rs-line-height-body-2)}}

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

@@ -10,6 +10,7 @@ type BaseProps = {
     disabled?: boolean;
     focused?: boolean;
     multiline?: boolean;
+    rounded?: boolean;
     placeholder?: string;
     icon?: SlotProps["icon"];
     endIcon?: SlotProps["icon"];

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

@@ -13,6 +13,7 @@ declare const _default: {
 export default _default;
 export declare const value: () => import("react").JSX.Element;
 export declare const variants: () => import("react").JSX.Element;
+export declare const rounded: () => import("react").JSX.Element;
 export declare const disabled: () => import("react").JSX.Element;
 export declare const error: () => import("react").JSX.Element;
 export declare const attachments: () => import("react").JSX.Element;

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

@@ -37,6 +37,22 @@ export const variants = () => (<Example>
 			<TextField variant="headless" name="Name" placeholder="Enter your name"/>
 		</Example.Item>
 	</Example>);
+export const rounded = () => (<Example>
+		<Example.Item title="rounded">
+			<TextField rounded name="Name" placeholder="Enter your name" icon={IconZap} prefix="+31" endSlot={<Button rounded size="small" icon={IconZap}/>}/>
+		</Example.Item>
+
+		<Example.Item title="rounded, variant: faded">
+			<View direction="row" gap={2}>
+				<View.Item grow>
+					<TextField rounded variant="faded" name="Name" placeholder="Enter your name" startSlot={<Badge rounded size="small">
+								Hello
+							</Badge>}/>
+				</View.Item>
+				<Button rounded>Submit</Button>
+			</View>
+		</Example.Item>
+	</Example>);
 export const disabled = () => (<Example>
 		<Example.Item title="disabled, no value">
 			<TextField name="Name" placeholder="Enter your name" disabled/>

package/dist/components/Tooltip/Tooltip.js

@@ -5,9 +5,9 @@ import Text from "../Text/index.js";
 import Flyout from "../_private/Flyout/index.js";
 import s from "./Tooltip.module.css";
 const Tooltip = (props) => {
-    const { id, text, children, onOpen, onClose, position = "bottom", containerRef, active, disabled, disableContentHover, } = props;
+    const { id, text, children, onOpen, onClose, position = "bottom", containerRef, contentGap, contentShift, active, disabled, disableContentHover, } = props;
     if (!text)
         return _jsx(_Fragment, { children: children({}) });
-    return (_jsxs(Flyout, { id: id, active: active, position: position, disabled: disabled, onOpen: onOpen, onClose: onClose, disableContentHover: disableContentHover, containerRef: containerRef, triggerType: "hover", groupTimeouts: true, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
+    return (_jsxs(Flyout, { id: id, active: active, position: position, disabled: disabled, contentGap: contentGap, contentShift: contentShift, onOpen: onOpen, onClose: onClose, disableContentHover: disableContentHover, containerRef: containerRef, triggerType: "hover", groupTimeouts: true, children: [_jsx(Flyout.Trigger, { children: children }), _jsx(Flyout.Content, { children: _jsx(Theme, { colorMode: "inverted", children: _jsx(Text, { variant: "caption-1", className: s.root, children: text }) }) })] }));
 };
 export default Tooltip;

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

@@ -1,6 +1,6 @@
 import React from "react";
 import type { FlyoutProps, FlyoutTriggerProps } from "../_private/Flyout";
-export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "onOpen" | "onClose" | "active" | "disabled" | "disableContentHover" | "containerRef" | "contentGap" | "contentShift"> & {
     children: (attributes: Parameters<FlyoutTriggerProps["children"]>[0] | {}) => React.ReactNode;
     text?: React.ReactNode;
 };

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

@@ -18,6 +18,7 @@ export type Options = {
     lastUsedFallback: Position;
     onFallback: (position: Position) => void;
     contentGap?: number;
+    contentShift?: number;
 };
 export type Styles = React.CSSProperties;
 export type State = {
@@ -72,6 +73,9 @@ type BaseProps = {
     triggerType?: "hover" | "click" | "focus";
     groupTimeouts?: boolean;
     position?: Position;
+    /**
+     * @deprecated Use fallbackPosition={false} instead
+     */
     forcePosition?: boolean;
     fallbackPositions?: Position[] | false;
     trapFocusMode?: TrapMode;
@@ -84,6 +88,7 @@ type BaseProps = {
     onClose?: () => void;
     width?: Width;
     contentGap?: number;
+    contentShift?: number;
     contentClassName?: string;
     contentAttributes?: G.Attributes<"div">;
     instanceRef?: React.Ref<Instance>;
@@ -127,6 +132,6 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap" | "containerRef" | "disableContentHover">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "trapFocusMode" | "contentGap" | "contentShift" | "containerRef" | "disableContentHover">;
 export type TriggerContextProps = Pick<ContextProps, "triggerElRef">;
 export {};

package/dist/components/_private/Flyout/FlyoutControlled.js

@@ -15,7 +15,7 @@ import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
 import useHandlerRef from "../../../hooks/useHandlerRef.js";
 const FlyoutRoot = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, contentGap = 2, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, trapFocusMode, width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -59,6 +59,7 @@ const FlyoutRoot = (props) => {
         container: containerRef?.current,
         fallbackPositions,
         contentGap,
+        contentShift,
     });
     const { status, updatePosition, render, hide, remove, show } = flyout;
     const isRendered = status !== "idle";

package/dist/components/_private/Flyout/tests/Flyout.stories.d.ts

@@ -3,15 +3,15 @@ declare const _default: {
     title: string;
 };
 export default _default;
-export declare const positions: () => React.JSX.Element;
+export declare const position: () => React.JSX.Element;
 export declare const dynamicPosition: () => React.JSX.Element;
 export declare const modes: () => React.JSX.Element;
-export declare const widthTrigger: () => React.JSX.Element;
+export declare const width: () => React.JSX.Element;
+export declare const offset: () => React.JSX.Element;
 export declare const disableFlags: () => React.JSX.Element;
 export declare const initialFocus: () => React.JSX.Element;
 export declare const customPortalTarget: () => React.JSX.Element;
-export declare const testWidthOverflowOnMobile: () => React.JSX.Element;
 export declare const testInsideFixed: () => React.JSX.Element;
 export declare const testDynamicBounds: () => React.JSX.Element;
 export declare const testDisableOutsideClick: () => React.JSX.Element;
-export declare const scopedTheming: () => React.JSX.Element;
+export declare const testScopedTheming: () => React.JSX.Element;

package/dist/components/_private/Flyout/tests/Flyout.stories.js

@@ -7,7 +7,6 @@ import Theme from "../../../Theme/index.js";
 import Button from "../../../Button/index.js";
 import Flyout from "../index.js";
 import TextField from "../../../TextField/index.js";
-import useToggle from "../../../../hooks/useToggle.js";
 export default { title: "Utilities/Internal/Flyout" };
 const Demo = (props) => {
     const { position = "bottom-start", children, ...rest } = props;
@@ -20,7 +19,7 @@ const Demo = (props) => {
             background: "var(--rs-color-background-elevation-overlay)",
             padding: "var(--rs-unit-x4)",
             height: 150,
-            width: 160,
+            minWidth: 160,
             borderRadius: "var(--rs-radius-medium)",
             border: "1px solid var(--rs-color-border-neutral-faded)",
             boxSizing: "border-box",
@@ -30,7 +29,7 @@ const Demo = (props) => {
 			</Flyout.Content>
 		</Flyout>);
 };
-export const positions = () => (<div style={{ paddingTop: 200 }}>
+export const position = () => (<div style={{ paddingTop: 200 }}>
 		<View gap={3} direction="row">
 			<Demo position="bottom-start"/>
 			<Demo position="bottom-end"/>
@@ -107,20 +106,35 @@ export const modes = () => (<Example>
 			</Demo>
 		</Example.Item>
 	</Example>);
-export const widthTrigger = () => (<Flyout triggerType="click" width="trigger" position="bottom">
-		<Flyout.Trigger>
-			{(attributes) => <button {...attributes}>Trigger with long text</button>}
-		</Flyout.Trigger>
-		<Flyout.Content>
-			<div style={{
+export const width = () => (<Example>
+		<Example.Item title="width: 300px">
+			<Demo width="300px" position="bottom"/>
+		</Example.Item>
+		<Example.Item title="width: trigger">
+			<Flyout triggerType="click" width="trigger" position="bottom">
+				<Flyout.Trigger>
+					{(attributes) => <Button attributes={attributes}>Trigger with long text</Button>}
+				</Flyout.Trigger>
+				<Flyout.Content>
+					<div style={{
         background: "var(--rs-color-background-elevation-overlay)",
         padding: "var(--rs-unit-x4)",
         borderRadius: "var(--rs-radius-medium)",
         border: "1px solid var(--rs-color-border-neutral-faded)",
         boxSizing: "border-box",
     }}></div>
-		</Flyout.Content>
-	</Flyout>);
+				</Flyout.Content>
+			</Flyout>
+		</Example.Item>
+	</Example>);
+export const offset = () => (<Example>
+		<Example.Item title="contentGap: x10">
+			<Demo contentGap={10}/>
+		</Example.Item>
+		<Example.Item title="contentShift: x10">
+			<Demo contentShift={10}/>
+		</Example.Item>
+	</Example>);
 export const disableFlags = () => (<Example>
 		<Example.Item title="disableContentHover">
 			<Demo triggerType="hover" disableContentHover>
@@ -198,12 +212,6 @@ export const customPortalTarget = () => {
 			</Example.Item>
 		</Example>);
 };
-export const testWidthOverflowOnMobile = () => (<Demo position="bottom-start" width={600}>
-		Should work on mobile
-		<button type="button">Item 1</button>
-		<button type="button">Item 2</button>
-		<button type="button">Close</button>
-	</Demo>);
 export const testInsideFixed = () => (<Example>
 		<Example.Item title="should move the content on page scroll">
 			<View position="fixed" insetTop={20} insetStart={0} insetEnd={0} backgroundColor="neutral-faded" padding={4}>
@@ -277,7 +285,6 @@ export const testDynamicBounds = () => {
 		</View>);
 };
 export const testDisableOutsideClick = () => {
-    const toggle = useToggle();
     return (<Example>
 			<Example.Item title="opening second flyout shouldn't block the first one from closing">
 				<View direction="row" gap={4}>
@@ -287,7 +294,7 @@ export const testDisableOutsideClick = () => {
 			</Example.Item>
 		</Example>);
 };
-export const scopedTheming = () => (<View gap={3} align="start">
+export const testScopedTheming = () => (<View gap={3} align="start">
 		<Button color="primary">Reshaped button</Button>
 		<Theme name="twitter">
 			<Flyout triggerType="click" active position="bottom-start">

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

@@ -16,6 +16,7 @@ type UseFlyout = (args: PassedFlyoutOptions & {
     flyoutElRef: ElementRef;
     triggerBoundsRef: React.RefObject<DOMRect | undefined>;
     contentGap?: number;
+    contentShift?: number;
 }) => Pick<T.State, "styles" | "position" | "status"> & {
     updatePosition: (options?: {
         sync?: boolean;

package/dist/components/_private/Flyout/useFlyout.js

@@ -43,12 +43,12 @@ const resetStyles = {
  * Set position of the target element to fit on the screen
  */
 const flyout = (args) => {
-    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentGap = 0, ...options } = args;
+    const { triggerEl, flyoutEl, triggerBounds: passedTriggerBounds, contentShift = 0, contentGap = 0, ...options } = args;
     const { position, fallbackPositions, width, container, lastUsedFallback, onFallback } = options;
     const targetClone = flyoutEl.cloneNode(true);
     const triggerBounds = passedTriggerBounds || triggerEl.getBoundingClientRect();
     const baseUnit = getComputedStyle(flyoutEl).getPropertyValue("--rs-unit-x1");
-    const contentGapModifier = baseUnit ? parseInt(baseUnit) : 0;
+    const unitModifier = baseUnit ? parseInt(baseUnit) : 0;
     // Reset all styles applied on the previous hook execution
     targetClone.style.cssText = "";
     Object.keys(resetStyles).forEach((key) => {
@@ -83,7 +83,8 @@ const flyout = (args) => {
             flyoutBounds,
             scopeOffset,
             position: currentPosition,
-            contentGap: contentGap * contentGapModifier,
+            contentGap: contentGap * unitModifier,
+            contentShift: contentShift * unitModifier,
         });
         const visible = fullyVisible(tested);
         const validPosition = visible || fallbackPositions?.length === 0;
@@ -135,7 +136,7 @@ const flyoutReducer = (state, action) => {
     }
 };
 const useFlyout = (args) => {
-    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, ...options } = args;
+    const { triggerElRef, flyoutElRef, triggerBoundsRef, contentGap, contentShift, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, width, container } = options;
     const lastUsedFallbackRef = React.useRef(defaultPosition);
     // Memo the array internally to avoid new arrays triggering useCallback
@@ -178,6 +179,7 @@ const useFlyout = (args) => {
             rtl: isRTL,
             container,
             contentGap,
+            contentShift,
         });
         if (nextFlyoutData)
             dispatch({ type: "position", payload: { ...nextFlyoutData, sync: options?.sync } });
@@ -191,6 +193,7 @@ const useFlyout = (args) => {
         triggerBoundsRef,
         width,
         contentGap,
+        contentShift,
         handleFallback,
     ]);
     React.useEffect(() => {