reshaped 3.9.0-canary.1 → 3.9.0-canary.10

package/dist/components/Flyout/useFlyout.js

@@ -1,37 +1,26 @@
 import React from "react";
 import useRTL from "../../hooks/useRTL.js";
 import flyout from "./utilities/flyout.js";
-import { defaultStyles, resetStyles } from "./Flyout.constants.js";
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":
-            if (state.status !== "idle")
-                return state;
             // Disable events before it's positioned to avoid mouseleave getting triggered
-            return { ...state, status: "rendered", styles: { pointerEvents: "none", ...resetStyles } };
+            return { ...state, status: "rendered" };
         case "position":
-            if (!action.payload.sync && state.status !== "rendered")
-                return state;
-            if (action.payload.sync && state.status !== "visible")
-                return state;
             return {
                 ...state,
-                status: action.payload.sync ? "visible" : "positioned",
+                status: action.payload.sync ? state.status : "positioned",
                 position: action.payload.position,
-                styles: { ...defaultStyles, ...action.payload.styles },
             };
         case "show":
+            // Checking because we're positioning inside nextAnimationFrame
             if (state.status !== "positioned")
                 return state;
             return { ...state, status: "visible" };
         case "hide":
-            if (state.status !== "visible")
-                return state;
             return { ...state, status: "hidden" };
         case "remove":
-            if (state.status !== "hidden" && state.status !== "visible")
-                return state;
-            return { ...state, status: "idle", styles: resetStyles };
+            return { ...state, status: "idle" };
         default:
             throw new Error("[Reshaped] Invalid flyout reducer type");
     }
@@ -47,7 +36,6 @@ const useFlyout = (args) => {
     const [isRTL] = useRTL();
     const [state, dispatch] = React.useReducer(flyoutReducer, {
         position: defaultPosition,
-        styles: defaultStyles,
         status: "idle",
     });
     const render = React.useCallback(() => {
@@ -114,13 +102,12 @@ const useFlyout = (args) => {
     }, [state.status, updatePosition]);
     return React.useMemo(() => ({
         position: state.position,
-        styles: state.styles,
         status: state.status,
         updatePosition,
         render,
         hide,
         remove,
         show,
-    }), [render, updatePosition, hide, remove, show, state.position, state.styles, state.status]);
+    }), [render, updatePosition, hide, remove, show, state.position, state.status]);
 };
 export default useFlyout;

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

@@ -13,13 +13,13 @@ declare const calculatePosition: (args: {
 } & Pick<T.Options, "position" | "rtl" | "width" | "contentGap" | "contentShift" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight">) => {
     position: T.Position;
     styles: {
-        left: number | undefined;
-        right: number | undefined;
-        top: number | undefined;
-        bottom: number | undefined;
+        left: string | null;
+        right: string | null;
+        top: string | null;
+        bottom: string | null;
         transform: string;
-        height: number | undefined;
-        width: string | number | undefined;
+        height: string | null;
+        width: string | null;
     };
     boundaries: {
         left: number;

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

@@ -159,13 +159,13 @@ const calculatePosition = (args) => {
     return {
         position,
         styles: {
-            left: right === null ? 0 : undefined,
-            right: right === null ? undefined : 0,
-            top: bottom === null ? 0 : undefined,
-            bottom: bottom === null ? undefined : 0,
+            left: right === null ? "0px" : null,
+            right: right === null ? null : "0px",
+            top: bottom === null ? "0px" : null,
+            bottom: bottom === null ? null : "0px",
             transform: `translate(${translateX}px, ${translateY}px)`,
-            height,
-            width: width ?? passedWidth,
+            height: height !== undefined ? `${height}px` : null,
+            width: width !== undefined ? `${width}px` : (passedWidth ?? null),
         },
         boundaries: {
             left,

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

@@ -1,5 +1,5 @@
-import type * as G from "../../../types/global";
 import type * as T from "../Flyout.types";
+import type * as G from "../../../types/global";
 /**
  * Set position of the target element to fit on the screen
  */

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

@@ -1,8 +1,8 @@
 import { getRectFromCoordinates, getShadowRoot, findClosestPositionContainer } from "../../../utilities/dom/index.js";
+import { resetStyles } from "../Flyout.constants.js";
 import calculatePosition from "./calculatePosition.js";
 import getPositionFallbacks from "./getPositionFallbacks.js";
 import isFullyVisible from "./isFullyVisible.js";
-import { resetStyles } from "../Flyout.constants.js";
 /**
  * Set position of the target element to fit on the screen
  */
@@ -79,6 +79,9 @@ const flyout = (args) => {
         calculated = applyPosition(lastUsedPosition);
     onPositionChoose(calculated.position);
     targetClone.parentNode?.removeChild(targetClone);
-    return calculated;
+    Object.entries(calculated.styles).forEach(([key, value]) => {
+        flyoutEl.style.setProperty(key, value);
+    });
+    return { position: calculated.position };
 };
 export default flyout;

package/dist/components/FormControl/FormControlCaption.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import Text from "../Text/index.js";
 import { useFormControlPrivate } from "./FormControl.context.js";
-import { getCaptionId } from "./FormControl.utilities.js";
 import s from "./FormControl.module.css";
+import { getCaptionId } from "./FormControl.utilities.js";
 const FormControlCaption = (props) => {
     const { children, variant, disabled } = props;
     const { attributes, size, helperRef, errorRef } = useFormControlPrivate();

package/dist/components/FormControl/FormControlLabel.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useFormControlPrivate } from "./FormControl.context.js";
 import Text from "../Text/index.js";
+import { useFormControlPrivate } from "./FormControl.context.js";
 import s from "./FormControl.module.css";
 const FormControlLabel = (props) => {
     const { children } = props;

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

@@ -1,7 +1,7 @@
 import FormControl from "./FormControl";
-import FormControlLabel from "./FormControlLabel";
-import FormControlHelper from "./FormControlHelper";
 import FormControlError from "./FormControlError";
+import FormControlHelper from "./FormControlHelper";
+import FormControlLabel from "./FormControlLabel";
 declare const FormControlRoot: typeof FormControl & {
     Label: typeof FormControlLabel;
     Helper: typeof FormControlHelper;

package/dist/components/FormControl/index.js

@@ -1,7 +1,7 @@
 import FormControl from "./FormControl.js";
-import FormControlLabel from "./FormControlLabel.js";
-import FormControlHelper from "./FormControlHelper.js";
 import FormControlError from "./FormControlError.js";
+import FormControlHelper from "./FormControlHelper.js";
+import FormControlLabel from "./FormControlLabel.js";
 const FormControlRoot = FormControl;
 FormControlRoot.Label = FormControlLabel;
 FormControlRoot.Helper = FormControlHelper;

package/dist/components/Grid/Grid.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Grid.module.css";
 export const GridItem = (props) => {
     const { area, colStart, colEnd, colSpan, rowStart, rowEnd, rowSpan, children, className, 

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

@@ -1,7 +1,7 @@
-import type React from "react";
 import type { Property } from "csstype";
-import type * as G from "../../types/global";
+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"> = {
     /** Gap between grid items */
     gap?: G.Responsive<number>;

package/dist/components/HiddenInput/HiddenInput.js

@@ -0,0 +1,34 @@
+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)) ||
+        (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 }));
+};
+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/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import { resolveMixin } from "../../styles/mixin.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Icon.module.css";
 const Icon = (props) => {
     const { svg: Component, className, color, size = "1em", autoWidth, attributes } = props;

package/dist/components/Image/Image.js

@@ -1,16 +1,18 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 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: imageClassNames,
                 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

@@ -1,6 +1,6 @@
 import type React from "react";
-import type * as G from "../../types/global";
 import type * as TStyles from "../../styles/types";
+import type * as G from "../../types/global";
 export type Props = {
     /** Image URL */
     src?: string;
@@ -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/Link/Link.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Link.module.css";
 const Link = forwardRef((props, ref) => {
     const { icon, disabled, href, color = "primary", variant = "underline", className, children, attributes, type, onClick, stopPropagation, render, } = props;

package/dist/components/MenuItem/MenuItem.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef } from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./MenuItem.module.css";
 const MenuItem = forwardRef((props, ref) => {
     const { icon, startSlot, endSlot, children, color = "primary", selected, highlighted, disabled, onClick, href, size = "medium", roundedCorners, stopPropagation, as, render, className, attributes, } = props;

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

@@ -1,6 +1,6 @@
-import type React from "react";
-import type { IconProps } from "../Icon";
 import type { ActionableProps } from "../Actionable";
+import type { IconProps } from "../Icon";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large";
 export type Props = Pick<ActionableProps, "attributes" | "className" | "disabled" | "children" | "href" | "onClick" | "as" | "stopPropagation" | "render"> & {

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 */