reshaped 3.9.0-canary.8 → 3.9.0

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;

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

@@ -2,7 +2,7 @@ import type { Property } from "csstype";
 import type React from "react";
 import type * as TStyles from "../../styles/types";
 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> = {
     /** Gap between grid items */
     gap?: G.Responsive<number>;
     /** Horizontal gap between grid items */
@@ -34,13 +34,13 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Custom root element html tag */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the root element */
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<TagName>;
 };
-export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div"> = {
+export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Grid area for template syntax */
     area?: string;
     /** Starting column position */
@@ -58,7 +58,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements = "div">
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Custom item element html tag */
-    as?: TagName;
+    as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the item element */
     className?: G.ClassName;
     /** Additional attributes for the item element */

package/dist/components/HiddenInput/HiddenInput.js

@@ -0,0 +1,33 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import { useFormControl } from "../FormControl/index.js";
+import { useRadioGroup } from "../RadioGroup/index.js";
+import { classNames } from "../../utilities/props.js";
+import s from "./HiddenInput.module.css";
+const HiddenInput = (props) => {
+    const { type, value, className, onBlur, onFocus, onChange, attributes } = props;
+    const rootClassNames = classNames(s.root, className);
+    const checkboxGroup = useCheckboxGroup();
+    const radioGroup = useRadioGroup();
+    const formControl = useFormControl();
+    const name = checkboxGroup?.name ?? radioGroup?.name ?? props.name;
+    const disabled = formControl?.disabled ?? props.disabled ?? checkboxGroup?.disabled ?? radioGroup?.disabled;
+    const checked = (value && (checkboxGroup?.value?.includes(value) ?? radioGroup?.value === value)) ||
+        props.checked;
+    const defaultChecked = checkboxGroup ? undefined : props.defaultChecked;
+    const handleChange = (event) => {
+        if (!name)
+            return;
+        const { checked } = event.target;
+        const changeArgs = { name, value, checked, event };
+        if (onChange)
+            onChange(changeArgs);
+        if (checkboxGroup?.onChange)
+            checkboxGroup.onChange(changeArgs);
+        if (radioGroup?.onChange)
+            radioGroup.onChange(changeArgs);
+    };
+    return (_jsx("input", { ...attributes, className: rootClassNames, type: type, name: name, value: value, checked: checked, defaultChecked: defaultChecked, disabled: disabled, onChange: handleChange, onFocus: onFocus || attributes?.onFocus, onBlur: onBlur || attributes?.onBlur, "data-rs-hidden-input": true }));
+};
+HiddenInput.displayName = "HiddenInput";
+export default HiddenInput;

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

@@ -0,0 +1,26 @@
+import React from "react";
+import type * as G from "../../types/global";
+export type Props = {
+    /** Name of the input element */
+    name?: string;
+    /** Value of the input element that is used for form submission */
+    value?: string;
+    /** Checked state of the input element, enables controlled mode */
+    checked?: boolean;
+    /** Default checked state of the input element, enables uncontrolled mode */
+    defaultChecked?: boolean;
+    /** Disable the input element */
+    disabled?: boolean;
+    /** Callback when the input value changes */
+    onChange?: G.ChangeHandler<boolean>;
+    /** Callback when the input or label is focused */
+    onFocus?: (e: React.FocusEvent) => void;
+    /** Callback when the input or label is blurred */
+    onBlur?: (e: React.FocusEvent) => void;
+    /** Type of the input element */
+    type: "checkbox" | "radio";
+    /** Additional classname for the root element */
+    className?: G.ClassName;
+    /** Additional attributes for the input element */
+    attributes?: G.Attributes<"input">;
+};

package/dist/components/Image/Image.js

@@ -5,12 +5,14 @@ import { resolveMixin } from "../../styles/mixin.js";
 import { classNames } from "../../utilities/props.js";
 import s from "./Image.module.css";
 const Image = (props) => {
-    const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
+    const { src, alt, width, maxWidth, height, aspectRatio, onLoad, onError, fallback, outline, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;
     const [status, setStatus] = React.useState("loading");
     const mixinStyles = resolveMixin({ radius: borderRadius, width, height, maxWidth, aspectRatio });
-    const baseClassNames = classNames(s.root, mixinStyles.classNames, displayMode && s[`--display-mode-${displayMode}`], className);
-    const imgClassNames = classNames(s.image, baseClassNames);
-    const fallbackClassNames = classNames(s.fallback, baseClassNames);
+    const rootClassNames = classNames(s.root, mixinStyles.classNames, outline && s["--outline"], className);
+    const imageClassNames = classNames([
+        s.image,
+        displayMode && s[`image--display-mode-${displayMode}`],
+    ]);
     const isFallback = (status === "error" || !src) && !!fallback;
     const style = {
         ...attributes?.style,
@@ -19,10 +21,12 @@ const Image = (props) => {
     const handleLoad = (e) => {
         setStatus("success");
         onLoad?.(e);
+        passedImageAttributes?.onLoad?.(e);
     };
     const handleError = (e) => {
         setStatus("error");
         onError?.(e);
+        passedImageAttributes?.onError?.(e);
     };
     React.useEffect(() => {
         setStatus("loading");
@@ -34,13 +38,13 @@ const Image = (props) => {
                 src: fallback ?? "",
                 alt: alt ?? "",
                 role: alt ? undefined : "presentation",
-                className: fallbackClassNames,
+                className: rootClassNames,
                 style,
             };
             // eslint-disable-next-line jsx-a11y/alt-text
             return renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
         }
-        return (_jsx("div", { ...attributes, className: fallbackClassNames, style: style, children: fallback }));
+        return (_jsx("div", { ...attributes, className: classNames([s.fallback, rootClassNames]), style: style, children: fallback }));
     }
     const imageAttributes = {
         ...attributes,
@@ -50,11 +54,12 @@ const Image = (props) => {
         role: alt ? undefined : "presentation",
         onLoad: handleLoad,
         onError: handleError,
-        className: imgClassNames,
+        className: outline ? imageClassNames : classNames([imageClassNames, rootClassNames]),
         style,
     };
     // eslint-disable-next-line jsx-a11y/alt-text
-    return renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
+    const imageNode = renderImage ? renderImage(imageAttributes) : _jsx("img", { ...imageAttributes });
+    return outline ? (_jsx("div", { ...attributes, className: rootClassNames, style: style, children: imageNode })) : (imageNode);
 };
 Image.displayName = "Image";
 export default Image;

package/dist/components/Image/Image.module.css

@@ -1 +1 @@
-.root{display:block;max-width:100%}.fallback{align-items:center;background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;justify-content:center}.--display-mode-cover{object-fit:cover!important}.--display-mode-contain{object-fit:scale-down!important}
+.root{position:relative}.root .image{border-radius:inherit;height:100%;width:100%}.image{display:block;max-width:100%}.fallback{align-items:center;background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-disabled);display:flex;justify-content:center}.--outline:after{border:1px solid var(--rs-color-border-neutral-faded);border-radius:inherit;content:"";inset:0;pointer-events:none;position:absolute}.image--display-mode-cover{object-fit:cover!important}.image--display-mode-contain{object-fit:scale-down!important}

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

@@ -15,9 +15,11 @@ export type Props = {
     /** Image aspect ratio, width / height */
     aspectRatio?: G.Responsive<number>;
     /** Image border radius, based on the radius tokens */
-    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large">;
+    borderRadius?: Extract<TStyles.Radius, "small" | "medium" | "large" | "circular">;
     /** Image display mode for controlling how it fits into the provided boundaries */
     displayMode?: "cover" | "contain";
+    /** Add a semi-transparent border on top of the image for better background contrast */
+    outline?: boolean;
     /** Image on load event */
     onLoad?: (e: React.SyntheticEvent) => void;
     /** Image on error event */

package/dist/components/Modal/Modal.js

@@ -7,8 +7,7 @@ import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
-import { classNames, responsiveVariables, responsiveClassNames, responsivePropDependency, } from "../../utilities/props.js";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
 import s from "./Modal.module.css";
 const DRAG_THRESHOLD = 32;
@@ -90,7 +89,6 @@ const Modal = (props) => {
         // Prevent the drag handling when browser is trying to navigate to a previous page
         if (clientPosition === "start" && e.targetTouches[0].clientX < DRAG_EDGE_BOUNDARY)
             return;
-        disableUserSelect();
         disableScroll();
         setDragging(true);
     };
@@ -108,7 +106,6 @@ const Modal = (props) => {
         if (!dragging)
             return;
         const handleDragEnd = () => {
-            enableUserSelect();
             enableScroll();
             setDragging(false);
             // Close only when dragging in the closing direction
@@ -168,7 +165,7 @@ const Modal = (props) => {
         setHideProgress(progress / 2);
         dragDistanceRef.current = dragDistance;
     }, [dragDistance, clientPosition, rootRef]);
-    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: responsivePropDependency(position, (p) => (p === "center" ? "auto" : "hidden")), className: overlayClassName, containerRef: containerRef, attributes: {
+    return (_jsx(Overlay, { onClose: onClose, onOpen: onOpen, onAfterClose: onAfterClose, onAfterOpen: onAfterOpen, disableCloseOnClick: disableCloseOnOutsideClick, active: active, transparent: transparentOverlay || hideProgress, blurred: blurredOverlay, overflow: clientPosition === "center" ? "auto" : "hidden", className: overlayClassName, containerRef: containerRef, attributes: {
             onTouchStart: handleDragStart,
         }, children: ({ active }) => {
             const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], containerRef && s["--contained"], responsiveClassNames(s, "--position", position), mixinStyles.classNames);

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

@@ -1 +1 @@
-.root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);outline:none;transition:var(--rs-easing-accelerate) var(--rs-duration-fast);transition-property:transform,opacity;will-change:transform}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus)}.root.--contained{--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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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:absolute;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}}
+.root{--rs-modal-container-width:100vw;background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-raised);color:var(--rs-color-foreground-neutral);outline:none;transition:var(--rs-duration-fast) var(--rs-easing-accelerate);transition-property:transform,opacity;will-change:transform,opacity}[data-rs-keyboard] .root:focus{box-shadow:var(--rs-shadow-focus)}.root.--contained{--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:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center.--active,[dir=rtl] .--position-center.--active{opacity:1;transform:translate(0)!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:absolute;transform:translateY(100%);width:100%}.--position-bottom.--active,[dir=rtl] .--position-bottom.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))!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:absolute;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))!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:absolute;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))!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:absolute;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:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--m.--active,[dir=rtl] .--position-center--m.--active{opacity:1;transform:translate(0)!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:absolute;transform:translateY(100%);width:100%}.--position-bottom--m.--active,[dir=rtl] .--position-bottom--m.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))!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:absolute;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))!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:absolute;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))!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:absolute;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:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--l.--active,[dir=rtl] .--position-center--l.--active{opacity:1;transform:translate(0)!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:absolute;transform:translateY(100%);width:100%}.--position-bottom--l.--active,[dir=rtl] .--position-bottom--l.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))!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:absolute;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))!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:absolute;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))!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:absolute;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:translateY(var(--rs-unit-x4));width:var(--rs-modal-size)}.--position-center--xl.--active,[dir=rtl] .--position-center--xl.--active{opacity:1;transform:translate(0)!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:absolute;transform:translateY(100%);width:100%}.--position-bottom--xl.--active,[dir=rtl] .--position-bottom--xl.--active{transform:translateY(max(var(--rs-modal-drag,0px),0px))!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:absolute;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))!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:absolute;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))!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:absolute;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.module.css

@@ -1 +1 @@
-.content{--rs-border-w:1px;border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}
+.content{--rs-border-w:1px;border:var(--rs-border-w) solid var(--rs-color-border-neutral-faded);border-radius:var(--rs-radius-medium);max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);box-shadow:var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:var(--rs-shadow-raised)}.content--variant-headless{border:none}.content--radius-small{border-radius:var(--rs-radius-small)}.content.content--has-width{max-width:none;min-width:0}@media (--rs-viewport-s ){.content{max-width:none}}

package/dist/components/Radio/Radio.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import HiddenInput from "../_private/HiddenInput/index.js";
 import { useFormControl } from "../FormControl/index.js";
+import HiddenInput from "../HiddenInput/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";
 import Text from "../Text/index.js";
 import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
@@ -16,17 +16,7 @@ const Radio = (props) => {
     const defaultChecked = radioGroup ? undefined : props.defaultChecked;
     const name = radioGroup ? radioGroup.name : props.name;
     const rootClassName = classNames(s.root, className, hasError && s["--error"], disabled && s["--disabled"], size && responsiveClassNames(s, "--size", size));
-    const handleChange = (event) => {
-        if (!name)
-            return;
-        const { checked } = event.target;
-        const changeArgs = { name, value, checked, event };
-        if (onChange)
-            onChange(changeArgs);
-        if (radioGroup?.onChange)
-            radioGroup.onChange(changeArgs);
-    };
-    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: handleChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
+    return (_jsxs("label", { ...attributes, className: rootClassName, children: [_jsxs("span", { className: s.field, children: [_jsx(HiddenInput, { className: s.input, type: "radio", checked: checked, defaultChecked: defaultChecked, name: name, disabled: disabled, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, attributes: inputAttributes }), _jsx("div", { className: s.decorator })] }), children && (_jsx(Text, { as: "span", variant: responsivePropDependency(size, (size) => {
                     if (size === "large")
                         return "body-2";
                     if (size === "small")

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-focus:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-shadow-focus-inset:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100vh;scroll-behavior:smooth}}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}
+@layer rs.reset{[data-rs-theme]{--rs-radius-circular:9999px;--rs-shadow-focus:0 0 0 2px var(--rs-color-background-elevation-base),0 0 0 4px var(--rs-color-border-primary);--rs-shadow-focus-inset:inset 0 0 0 2px var(--rs-color-border-primary),inset 0 0 0 4px var(--rs-color-background-elevation-base)}[data-rs-theme] blockquote,[data-rs-theme] body,[data-rs-theme] dd,[data-rs-theme] dl,[data-rs-theme] figcaption,[data-rs-theme] figure,[data-rs-theme] h1,[data-rs-theme] h2,[data-rs-theme] h3,[data-rs-theme] h4,[data-rs-theme] h5,[data-rs-theme] h6,[data-rs-theme] li,[data-rs-theme] ol,[data-rs-theme] p,[data-rs-theme] ul{margin:0;padding:0}[data-rs-theme] ol[class],[data-rs-theme] ul[class]{list-style:none}[data-rs-theme] textarea{resize:vertical}[data-rs-theme] table{border-collapse:collapse;border-spacing:0}[data-rs-theme] fieldset{border:0;margin:0;padding:0}[data-rs-theme] img{display:block;max-width:100%}[data-rs-theme] button,[data-rs-theme] input,[data-rs-theme] select,[data-rs-theme] textarea{font:inherit}[data-rs-theme] option{background:var(--rs-color-background-elevation-base)}[data-rs-theme] label{cursor:pointer}[data-rs-theme] input::placeholder,[data-rs-theme] textarea::placeholder{color:var(--rs-color-foreground-disabled)}html[data-rs-theme]{-webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;font-size:100%;text-rendering:optimizelegibility;touch-action:manipulation}[data-rs-theme] *{box-sizing:border-box}[data-rs-theme] body,html[data-rs-theme]{background:var(--rs-color-background-page);color:var(--rs-color-foreground-neutral);min-height:100dvh;scroll-behavior:smooth}[data-rs-theme] body,[data-rs-theme]:not(html){font-family:var(--rs-font-family-body);font-size:var(--rs-font-size-body-3);font-weight:var(--rs-font-weight-regular);letter-spacing:var(--rs-letter-spacing-body-3);line-height:var(--rs-line-height-body-3)}}[data-rs-color-mode=light]{color-scheme:light}[data-rs-color-mode=dark]{color-scheme:dark}@media (prefers-reduced-motion:reduce){*{animation-duration:0s!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:0s!important}}[data-rs-no-transition] *,[data-rs-no-transition] :after,[data-rs-no-transition] :before{transition:none!important}

package/dist/components/Scrim/Scrim.js

@@ -1,11 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import View from "../View/index.js";
 import { classNames } from "../../utilities/props.js";
 import s from "./Scrim.module.css";
 const Scrim = (props) => {
-    const { children, backgroundSlot, position = "cover", attributes, className, scrimClassName, } = props;
-    const rootClassNames = classNames(s.root, !!backgroundSlot && s["--with-background"], position && s[`--position-${position}`], className);
+    const { children, backgroundSlot, position = "cover", paddingInline, paddingBlock, padding, borderRadius, attributes, className, scrimClassName, } = props;
+    const rootClassNames = classNames(s.root, position && s[`--position-${position}`], className);
     const scrimClassNames = classNames(s.scrim, scrimClassName);
-    return (_jsxs("div", { ...attributes, className: rootClassNames, children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx("div", { className: s.content, children: children }) })] }));
+    return (_jsxs(View, { borderRadius: borderRadius, attributes: attributes, className: rootClassNames, position: backgroundSlot ? "relative" : "absolute", inset: backgroundSlot ? undefined : 0, overflow: "hidden", children: [backgroundSlot, _jsx("div", { className: scrimClassNames, children: _jsx(View, { paddingInline: paddingInline ?? padding ?? 4, paddingBlock: paddingBlock ?? padding ?? 3, zIndex: 5, height: ["start", "end"].includes(position) ? "100%" : undefined, width: ["top", "bottom", "cover"].includes(position) ? "100%" : undefined, textAlign: position === "cover" ? "center" : undefined, children: children }) })] }));
 };
 Scrim.displayName = "Scrim";
 export default Scrim;

package/dist/components/Scrim/Scrim.module.css

@@ -1 +1 @@
-.root,.scrim{inset:0;position:absolute}.root{--rs-overlay-gradient:rgba(var(--rs-color-rgb-black),0%),rgba(var(--rs-color-rgb-black),0.52%),rgba(var(--rs-color-rgb-black),2.13%),rgba(var(--rs-color-rgb-black),4.9%),rgba(var(--rs-color-rgb-black),8.84%),rgba(var(--rs-color-rgb-black),13.91%),rgba(var(--rs-color-rgb-black),19.91%),rgba(var(--rs-color-rgb-black),26.56%),rgba(var(--rs-color-rgb-black),33.44%),rgba(var(--rs-color-rgb-black),40.09%),rgba(var(--rs-color-rgb-black),46.09%),rgba(var(--rs-color-rgb-black),51.16%),rgba(var(--rs-color-rgb-black),55.1%),rgba(var(--rs-color-rgb-black),57.87%),rgba(var(--rs-color-rgb-black),59.48%),rgba(var(--rs-color-rgb-black),60%);pointer-events:none}.scrim{color:var(--rs-color-white);padding:var(--rs-unit-x3) var(--rs-unit-x4);transform:translateZ(0)}.content{pointer-events:all;position:relative;z-index:5}.--position-cover .scrim{align-items:center;display:flex;justify-content:center}.--position-cover .scrim:after{background-color:var(--rs-color-black);content:"";inset:0;opacity:.5;position:absolute}.--position-cover .content{text-align:center}.--position-bottom .content,.--position-cover .content,.--position-top .content{width:100%}.--position-end .content,.--position-start .content{height:100%}.--position-top .scrim{background:linear-gradient(to top,var(--rs-overlay-gradient));inset-block-end:auto;padding-block-end:calc(var(--rs-unit-x10) * 2)}.--position-bottom .scrim{background:linear-gradient(to bottom,var(--rs-overlay-gradient));inset-block-start:auto;padding-block-start:calc(var(--rs-unit-x10) * 2)}.--position-start .scrim{background:linear-gradient(to left,var(--rs-overlay-gradient));inset-inline-end:auto;padding-inline-end:calc(var(--rs-unit-x10) * 2);width:auto}.--position-end .scrim,[dir=rtl] .--position-start .scrim{background:linear-gradient(to right,var(--rs-overlay-gradient))}.--position-end .scrim{inset-inline-start:auto;padding-inline-start:calc(var(--rs-unit-x10) * 2);width:auto}[dir=rtl] .--position-end .scrim{background:linear-gradient(to left,var(--rs-overlay-gradient))}.--with-background{position:relative}
+.root{--rs-scrim-gradient-padding:calc(var(--rs-unit-x1) * 16);--rs-scrim-gradient:rgba(var(--rs-color-rgb-black),0%),rgba(var(--rs-color-rgb-black),0.52%),rgba(var(--rs-color-rgb-black),2.13%),rgba(var(--rs-color-rgb-black),4.9%),rgba(var(--rs-color-rgb-black),8.84%),rgba(var(--rs-color-rgb-black),13.91%),rgba(var(--rs-color-rgb-black),19.91%),rgba(var(--rs-color-rgb-black),26.56%),rgba(var(--rs-color-rgb-black),33.44%),rgba(var(--rs-color-rgb-black),40.09%),rgba(var(--rs-color-rgb-black),46.09%),rgba(var(--rs-color-rgb-black),51.16%),rgba(var(--rs-color-rgb-black),55.1%),rgba(var(--rs-color-rgb-black),57.87%),rgba(var(--rs-color-rgb-black),59.48%),rgba(var(--rs-color-rgb-black),60%);pointer-events:none}.scrim{color:var(--rs-color-white);inset:0;position:absolute;transform:translateZ(0)}.--position-cover .scrim{align-items:center;display:flex;justify-content:center}.--position-cover .scrim:after{background-color:var(--rs-color-black);content:"";inset:0;opacity:.5;position:absolute}.--position-top .scrim{background:linear-gradient(to top,var(--rs-scrim-gradient));inset-block-end:auto;padding-block-end:var(--rs-scrim-gradient-padding)}.--position-bottom .scrim{background:linear-gradient(to bottom,var(--rs-scrim-gradient));inset-block-start:auto;padding-block-start:var(--rs-scrim-gradient-padding)}.--position-start .scrim{background:linear-gradient(to left,var(--rs-scrim-gradient));inset-inline-end:auto;padding-inline-end:var(--rs-scrim-gradient-padding);width:auto}.--position-end .scrim,[dir=rtl] .--position-start .scrim{background:linear-gradient(to right,var(--rs-scrim-gradient))}.--position-end .scrim{inset-inline-start:auto;padding-inline-start:var(--rs-scrim-gradient-padding);width:auto}[dir=rtl] .--position-end .scrim{background:linear-gradient(to left,var(--rs-scrim-gradient))}

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { ViewProps } from "../View";
 import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting content */
@@ -13,4 +14,4 @@ export type Props = {
     className?: G.ClassName;
     /** Additional attributes for the root element */
     attributes?: G.Attributes<"div">;
-};
+} & Pick<ViewProps, "paddingInline" | "paddingBlock" | "padding" | "borderRadius">;

package/dist/components/ScrollArea/ScrollArea.js

@@ -4,8 +4,8 @@ import React, { forwardRef } from "react";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
 import { classNames } from "../../utilities/props.js";
+import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./ScrollArea.module.css";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
@@ -41,14 +41,14 @@ const ScrollAreaBar = (props) => {
         const total = vertical ? elBar.scrollHeight : elBar.scrollWidth;
         onThumbMoveRef.current?.({ value: diff / total, type: "relative" });
     }, [vertical, dragging, onThumbMoveRef]);
-    const handleDragEnd = React.useCallback(() => {
-        setDragging(false);
-        enableUserSelect();
-    }, []);
     const handleDragStart = () => {
         setDragging(true);
-        disableUserSelect();
+        disableScroll();
     };
+    const handleDragEnd = React.useCallback(() => {
+        setDragging(false);
+        enableScroll();
+    }, []);
     React.useEffect(() => {
         if (!dragging)
             return;

package/dist/components/Slider/SliderControlled.js

@@ -5,7 +5,7 @@ import { useFormControl } from "../FormControl/index.js";
 import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useRTL from "../../hooks/useRTL.js";
-import { enableUserSelect, disableUserSelect, triggerChangeEvent } from "../../utilities/dom/index.js";
+import { triggerChangeEvent } from "../../utilities/dom/index.js";
 import { classNames } from "../../utilities/props.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./Slider.module.css";
@@ -144,30 +144,31 @@ const SliderControlled = (props) => {
             handleMinChange(nextValue);
         if (closestId === maxId)
             handleMaxChange(nextValue);
-        disableUserSelect();
-        disableScroll();
         setDraggingId(closestId);
     };
     const handleMinDragStart = (e) => {
         if (disabled)
             return;
         e.stopPropagation();
+        disableScroll();
         setDraggingId(minId);
     };
     const handleMaxDragStart = (e) => {
         if (disabled)
             return;
         e.stopPropagation();
+        disableScroll();
         setDraggingId(maxId);
     };
     const handleDragStop = React.useCallback(() => {
         if (draggingId === minId && minValue !== undefined) {
             handleMinChange(minValue, { commit: true });
+            minInputRef.current?.focus();
         }
         if (draggingId === maxId) {
             handleMaxChange(maxValue, { commit: true });
+            maxInputRef.current?.focus();
         }
-        enableUserSelect();
         enableScroll();
         setDraggingId(null);
     }, [minValue, maxValue, handleMinChange, handleMaxChange, draggingId, minId, maxId]);