reshaped 3.9.0-canary.0 → 3.9.0-canary.10

package/dist/components/Modal/Modal.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames, responsivePropDependency, } from "../../utilities/props.js";
-import { enableUserSelect, disableUserSelect } from "../../utilities/dom/index.js";
-import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
-import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
-import Text from "../Text/index.js";
 import Overlay from "../Overlay/index.js";
+import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import s from "./Modal.module.css";
-import { resolveMixin } from "../../styles/mixin.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 } from "../../utilities/props.js";
+import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
+import s from "./Modal.module.css";
 const DRAG_THRESHOLD = 32;
 const DRAG_OPPOSITE_THRESHOLD = 100;
 const DRAG_EDGE_BOUNDARY = 32;
@@ -168,7 +168,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/Modal/Modal.types.d.ts

@@ -1,6 +1,6 @@
+import type { OverlayProps, OverlayCloseReason } from "../Overlay";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { OverlayProps, OverlayCloseReason } from "../Overlay";
 export type Context = {
     id: string;
     titleMounted: boolean;

package/dist/components/NumberField/NumberFieldControlled.js

@@ -2,17 +2,17 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import Actionable from "../Actionable/index.js";
+import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/index.js";
 import TextField from "../TextField/index.js";
-import { useFormControl } from "../FormControl/index.js";
-import IconChevronUp from "../../icons/ChevronUp.js";
-import IconChevronDown from "../../icons/ChevronDown.js";
-import IconPlus from "../../icons/Plus.js";
-import IconMinus from "../../icons/Minus.js";
+import * as keys from "../../constants/keys.js";
 import useElementId from "../../hooks/useElementId.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
-import * as keys from "../../constants/keys.js";
+import useHotkeys from "../../hooks/useHotkeys.js";
+import IconChevronDown from "../../icons/ChevronDown.js";
+import IconChevronUp from "../../icons/ChevronUp.js";
+import IconMinus from "../../icons/Minus.js";
+import IconPlus from "../../icons/Plus.js";
 import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./NumberField.module.css";
 const NumberFieldControlled = (props) => {

package/dist/components/Overlay/Overlay.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { onNextFrame } from "../../utilities/animation.js";
-import { classNames } from "../../utilities/props.js";
-import { TrapFocus } from "../../utilities/a11y/index.js";
-import useToggle from "../../hooks/useToggle.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import Portal from "../_private/Portal/index.js";
+import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useScrollLock from "../../hooks/useScrollLock.js";
-import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
-import Portal from "../_private/Portal/index.js";
+import useToggle from "../../hooks/useToggle.js";
+import { TrapFocus } from "../../utilities/a11y/index.js";
+import { onNextFrame } from "../../utilities/animation.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Overlay.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const Overlay = (props) => {
     const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
     // Selectors wrapped with refs to simplify working with useEffect dependency array

package/dist/components/PinField/PinFieldControlled.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { responsivePropDependency } from "../../utilities/props.js";
-import View from "../View/index.js";
+import { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
+import View from "../View/index.js";
+import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
-import { useFormControl } from "../FormControl/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import * as keys from "../../constants/keys.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import { regExpNumericChar, regExpAlphabeticChar, regExpAlphaNumericChar, } from "./PinField.constants.js";
 import s from "./PinField.module.css";
 const sizeMap = {

package/dist/components/Popover/Popover.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
-import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import Dismissible from "../Dismissible/index.js";
-import s from "./Popover.module.css";
+import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames } from "../../utilities/props.js";
+import s from "./Popover.module.css";
 const Popover = (props) => {
     const { width, variant = "elevated", triggerType = "click", position = "bottom", elevation, borderRadius, ...flyoutProps } = props;
     const padding = props.padding ?? (variant === "headless" ? 0 : 4);

package/dist/components/Popover/Popover.module.css

@@ -1 +1 @@
-.content{max-width:360px}.content--variant-elevated{background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-radius-medium);box-shadow:0 0 0 1px var(--rs-color-border-neutral-faded) inset,var(--rs-shadow-overlay);color:var(--rs-color-foreground-neutral);min-width:220px}.content--variant-elevated.content--elevation-raised{box-shadow:0 0 0 1px var(--rs-color-border-neutral-faded) inset,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);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--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/Popover/Popover.types.d.ts

@@ -1,7 +1,7 @@
-import type React from "react";
 import type { FlyoutProps, FlyoutInstance } from "../Flyout";
+import type React from "react";
 export type Instance = FlyoutInstance;
-export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "positionRef" | "initialFocusRef" | "originCoordinates"> & {
+export type Props = Pick<FlyoutProps, "id" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "onOpen" | "onClose" | "width" | "trapFocusMode" | "active" | "defaultActive" | "contentGap" | "contentShift" | "contentMaxHeight" | "instanceRef" | "triggerType" | "disableHideAnimation" | "disableContentHover" | "disableCloseOnOutsideClick" | "autoFocus" | "containerRef" | "positionRef" | "initialFocusRef" | "originCoordinates"> & {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Content element padding, unit token multiplier */

package/dist/components/Progress/Progress.module.css

@@ -1 +1 @@
-.root{align-items:flex-start;display:flex;overflow:hidden}.root,.value{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-radius-small)}.value{height:100%;transform:translateX(var(--rs-progress-value));transition:transform var(--rs-easing-decelerate);transition-duration:var(--rs-progress-duration,var(--rs-duration-slow));width:100%}[dir=rtl] .value{transform:translateX(calc(var(--rs-progress-value) * -1))}.--duration .value{transition-timing-function:linear}.--size-small{height:var(--rs-unit-x1)}.--size-medium{height:var(--rs-unit-x2)}.--color-primary .value{background:var(--rs-color-background-primary)}.--color-critical .value{background:var(--rs-color-background-critical)}.--color-warning .value{background:var(--rs-color-background-warning)}.--color-positive .value{background:var(--rs-color-background-positive)}.--color-media{background:rgba(var(--rs-color-rgb-white),28%)}.--color-media .value{background:var(--rs-color-white)}
+.root{align-items:flex-start;display:flex;overflow:hidden}.root,.value{background:var(--rs-color-background-neutral-faded);border-radius:var(--rs-radius-small)}.value{height:100%;transform:translateX(var(--rs-progress-value));transition:var(--rs-easing-decelerate);transition-duration:var(--rs-progress-duration,var(--rs-duration-medium));transition-property:transform,background-color;width:100%}[dir=rtl] .value{transform:translateX(calc(var(--rs-progress-value) * -1))}.--duration .value{transition-timing-function:linear}.--size-small{height:var(--rs-unit-x1)}.--size-medium{height:var(--rs-unit-x2)}.--color-primary .value{background:var(--rs-color-background-primary)}.--color-critical .value{background:var(--rs-color-background-critical)}.--color-warning .value{background:var(--rs-color-background-warning)}.--color-positive .value{background:var(--rs-color-background-positive)}.--color-media{background:rgba(var(--rs-color-rgb-white),28%)}.--color-media .value{background:var(--rs-color-white)}

package/dist/components/Radio/Radio.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
-import HiddenInput from "../_private/HiddenInput/index.js";
-import Text from "../Text/index.js";
-import { useRadioGroup } from "../RadioGroup/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";
 import s from "./Radio.module.css";
 const Radio = (props) => {
     const { children, value, onChange, onFocus, onBlur, size = "medium", className, attributes, inputAttributes, } = props;
@@ -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/RadioGroup/RadioGroup.types.d.ts

@@ -1,6 +1,6 @@
+import type { RadioProps } from "../Radio";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { RadioProps } from "../Radio";
 type BaseProps = {
     /** Unique identifier for the radio group */
     id?: string;

package/dist/components/Reshaped/Reshaped.css

@@ -1 +1 @@
-@layer rs.reset{[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: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}

package/dist/components/Reshaped/Reshaped.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import { GlobalColorMode, PrivateTheme } from "../Theme/index.js";
-import { ToastProvider } from "../Toast/index.js";
 import { useGlobalColorMode } from "../Theme/useTheme.js";
+import { ToastProvider } from "../Toast/index.js";
 import { SingletonEnvironmentContext, useSingletonEnvironment, } from "../../hooks/_private/useSingletonEnvironment.js";
-import { SingletonKeyboardModeProvider } from "../../hooks/_private/useSingletonKeyboardMode.js";
 import { SingletonHotkeysProvider } from "../../hooks/_private/useSingletonHotkeys.js";
-import "./Reshaped.css";
+import { SingletonKeyboardModeProvider } from "../../hooks/_private/useSingletonKeyboardMode.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Reshaped.module.css";
+import "./Reshaped.css";
 const ReshapedInner = (props) => {
     const { children, defaultRTL, defaultViewport = "s", toastOptions } = props;
     const rtlState = useSingletonEnvironment(defaultRTL);

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { GlobalColorModeProps, ThemeProps } from "../Theme";
 import type { ToastProviderProps } from "../Toast";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting children */

package/dist/components/Resizable/Resizable.js

@@ -1,10 +1,10 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
-import { ResizableHandleContext } from "./ResizableHandle.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Resizable.module.css";
+import { ResizableHandleContext } from "./ResizableHandle.js";
 export const ResizableItem = () => null;
 const PrivateResizableItem = React.forwardRef((props, ref) => {
     const { children, defaultSize, minSize, maxSize } = props;

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

@@ -1,6 +1,6 @@
-import type React from "react";
 import type { ViewProps } from "../View";
 import type { UseDragCallbackArgs } from "../../hooks/_private/useDrag";
+import type React from "react";
 export type Props = {
     /** Component render variant */
     variant?: "bordered" | "borderless";

package/dist/components/Resizable/ResizableHandle.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
 import useDrag from "../../hooks/_private/useDrag.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Resizable.module.css";
 export const ResizableHandleContext = React.createContext({});
 const ResizableHandle = (props) => {

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
-import { disableUserSelect, enableUserSelect } from "../../utilities/dom/index.js";
-import { resolveMixin } from "../../styles/mixin.js";
+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 s from "./ScrollArea.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;
     const onThumbMoveRef = useHandlerRef(onThumbMove);
@@ -109,7 +109,7 @@ const ScrollArea = forwardRef((props, ref) => {
         const scrollableEl = scrollableRef.current;
         if (!scrollableEl)
             return;
-        const value = scrollableEl.clientWidth * args.value;
+        const value = scrollableEl.scrollWidth * args.value;
         if (args.type === "absolute") {
             scrollableEl.scrollLeft = value;
         }

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

@@ -1,9 +1,9 @@
 import React from "react";
-import type * as G from "../../types/global";
-import type { IconProps } from "../Icon";
+import { DropdownMenuProps } from "../DropdownMenu";
 import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
 import type { MenuItemProps } from "../MenuItem";
-import { DropdownMenuProps } from "../DropdownMenu";
+import type * as G from "../../types/global";
 type Size = G.Responsive<"small" | "medium" | "large" | "xlarge">;
 type RenderSingleValue = (args: {
     value: string;

package/dist/components/Select/SelectCustomControlled.js

@@ -3,13 +3,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
 import DropdownMenu from "../DropdownMenu/index.js";
 import Icon from "../Icon/index.js";
+import View from "../View/index.js";
 import CheckmarkIcon from "../../icons/Checkmark.js";
 import { responsivePropDependency } from "../../utilities/props.js";
+import SelectGroup from "./SelectGroup.js";
+import SelectOption from "./SelectOption.js";
 import SelectRoot from "./SelectRoot.js";
 import SelectTrigger from "./SelectTrigger.js";
-import SelectOption from "./SelectOption.js";
-import SelectGroup from "./SelectGroup.js";
-import View from "../View/index.js";
 const SelectCustomControlled = (props) => {
     const { children, value, name, placeholder, size, multiple, width = "trigger", position, fallbackPositions, positionRef, renderValue: passedRenderValue, } = props;
     const initialFocusRef = React.useRef(null);
@@ -72,6 +72,9 @@ const SelectCustomControlled = (props) => {
     const resolvedChildren = traverseOptionList(children);
     const handleKeyDown = (e) => {
         const key = e.key;
+        // Ignore search when user is typing, e.g. if there is a filter input inside the dropdown
+        if (document.activeElement?.tagName === "INPUT")
+            return;
         // Only handle alphanumeric and space characters for type-ahead
         if (key.length !== 1 || !key.match(/[\w\s]/))
             return;

package/dist/components/Select/SelectEndContent.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Icon from "../Icon/index.js";
-import { responsivePropDependency } from "../../utilities/props.js";
 import IconArrow from "../../icons/ChevronVertical.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import s from "./Select.module.css";
 const SelectEndContent = (props) => {
     const { disabled, size } = props;

package/dist/components/Select/SelectGroup.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import View from "../View/index.js";
 import Text from "../Text/index.js";
+import View from "../View/index.js";
 import s from "./Select.module.css";
 const SelectGroup = (props) => {
     const { label, children } = props;

package/dist/components/Select/SelectNative.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import React from "react";
 import { classNames } from "../../utilities/props.js";
-import SelectStartContent from "./SelectStartContent.js";
-import SelectEndContent from "./SelectEndContent.js";
 import s from "./Select.module.css";
+import SelectEndContent from "./SelectEndContent.js";
+import SelectStartContent from "./SelectStartContent.js";
 const SelectNative = (props) => {
     const { startSlot, icon, size, inputAttributes, onFocus, onBlur, disabled, name, value, defaultValue, onChange, onClick, placeholder, id, children, } = props;
     const [empty, setEmpty] = React.useState(value === undefined ? !defaultValue : !value);

package/dist/components/Select/SelectRoot.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import useElementId from "../../hooks/useElementId.js";
 import { useFormControl } from "../FormControl/index.js";
+import useElementId from "../../hooks/useElementId.js";
 import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Select.module.css";
 const SelectRoot = (passedProps) => {

package/dist/components/Select/SelectTrigger.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import Actionable from "../Actionable/index.js";
 import Text from "../Text/index.js";
-import SelectStartContent from "./SelectStartContent.js";
 import s from "./Select.module.css";
 import SelectEndContent from "./SelectEndContent.js";
+import SelectStartContent from "./SelectStartContent.js";
 const SelectTrigger = (props) => {
     const { children, disabled, onClick, onFocus, onBlur, inputAttributes, startSlot, icon, size, placeholder, value, name, id, } = props;
     return (_jsxs(_Fragment, { children: [_jsxs(Actionable, { className: s.input, disabled: disabled, disableFocusRing: true, onClick: onClick, attributes: {

package/dist/components/Select/index.d.ts

@@ -1,7 +1,7 @@
 import Select from "./Select";
 import SelectCustom from "./SelectCustom";
-import SelectOption from "./SelectOption";
 import SelectGroup from "./SelectGroup";
+import SelectOption from "./SelectOption";
 declare const SelectRoot: typeof Select & {
     Custom: typeof SelectCustom;
     Option: typeof SelectOption;

package/dist/components/Select/index.js

@@ -1,7 +1,7 @@
 import Select from "./Select.js";
 import SelectCustom from "./SelectCustom.js";
-import SelectOption from "./SelectOption.js";
 import SelectGroup from "./SelectGroup.js";
+import SelectOption from "./SelectOption.js";
 const SelectRoot = Select;
 SelectRoot.Custom = SelectCustom;
 SelectRoot.Option = SelectOption;

package/dist/components/Skeleton/Skeleton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import View from "../View/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Skeleton.module.css";
 const Skeleton = (props) => {
     const { borderRadius = "small", width, height, className, attributes } = props;

package/dist/components/Slider/SliderControlled.js

@@ -1,16 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
+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 { classNames } from "../../utilities/props.js";
 import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
-import useRTL from "../../hooks/useRTL.js";
-import useElementId from "../../hooks/useElementId.js";
-import { useFormControl } from "../FormControl/index.js";
-import SliderThumb from "./SliderThumb.js";
-import { applyStepToValue, getDragCoord } from "./Slider.utilities.js";
 import s from "./Slider.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
+import { applyStepToValue, getDragCoord } from "./Slider.utilities.js";
+import SliderThumb from "./SliderThumb.js";
 const THUMB_SIZE = 16;
 const SliderControlled = (props) => {
     const { name, range, max, min, step = 1, onChange, onChangeCommit, renderValue, className, attributes, orientation = "horizontal", } = props;

package/dist/components/Slider/SliderThumb.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import Theme from "../Theme/index.js";
 import Text from "../Text/index.js";
-import { getPrecision } from "./Slider.utilities.js";
+import Theme from "../Theme/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Slider.module.css";
+import { getPrecision } from "./Slider.utilities.js";
 const SliderThumb = React.forwardRef((props, ref) => {
     const { name, value, disabled, active, position, max, min, step, onChange, onDragStart, renderValue, tooltipRef, inputRef, orientation, } = props;
     const id = React.useId();

package/dist/components/Stepper/Stepper.js

@@ -1,13 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { responsivePropDependency } from "../../utilities/props.js";
 import Expandable from "../_private/Expandable/index.js";
-import View from "../View/index.js";
-import Text from "../Text/index.js";
 import Divider from "../Divider/index.js";
-import Icon from "../Icon/index.js";
 import Hidden from "../Hidden/index.js";
+import Icon from "../Icon/index.js";
+import Text from "../Text/index.js";
+import View from "../View/index.js";
 import IconCheckmark from "../../icons/Checkmark.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import s from "./Stepper.module.css";
 const StepperItemPrivate = (props) => {
     const { title, subtitle, children, direction, className, attributes, labelDisplay, step, completed, active, last, } = props;

package/dist/components/Switch/Switch.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import { useFormControl } from "../FormControl/index.js";
 import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Switch.module.css";
 const Switch = (props) => {
     const { children, name, checked, size = "medium", reversed, defaultChecked, onChange, onFocus, onBlur, className, attributes, } = props;