reshaped 3.10.0-canary.5 → 3.10.0-canary.7

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

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

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

@@ -1,6 +1,6 @@
 import React from "react";
-import type { TrapMode } from "@reshaped/utilities/internal";
-import type * as G from "../../types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
+import type { TrapMode, Coordinates } from "@reshaped/headless/internal";
 /**
  * Utility
  */
@@ -115,7 +115,7 @@ type BaseProps = {
      */
     autoFocus?: boolean;
     /** Origin coordinates for the content when there is no trigger element */
-    originCoordinates?: G.Coordinates;
+    originCoordinates?: Coordinates;
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Callback when the content is opened */
@@ -134,10 +134,12 @@ type BaseProps = {
     contentMaxHeight?: string;
     /** Maximum width for the content */
     contentMaxWidth?: string;
+    /** Z-index for the content element */
+    contentZIndex?: number;
     /** Additional classname for the content element */
     contentClassName?: string;
     /** Additional attributes for the content element */
-    contentAttributes?: G.Attributes<"div">;
+    contentAttributes?: Attributes<"div">;
     /** Ref accessor for the flyout methods */
     instanceRef?: React.Ref<Instance>;
     /** Container to render the content in using a portal, position is calculated based on the container bounds
@@ -164,9 +166,9 @@ export type ContentProps = {
     /** Node for inserting children */
     children?: React.ReactNode;
     /** Additional classname for the content element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the content element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type ContextProps = {
     id: string;
@@ -190,7 +192,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "contentMaxWidth" | "contentZIndex" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -1,15 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames, useIsomorphicLayoutEffect } from "@reshaped/headless";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 import cooldown from "./utilities/cooldown.js";
 const FlyoutContent = (props) => {
     const { children, className, attributes } = props;
-    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentMaxHeight, contentMaxWidth, contentZIndex, trapFocusMode, disableContentHover, autoFocus, width, isSubmenu, } = useFlyoutContext();
     const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     useIsomorphicLayoutEffect(() => {
@@ -43,6 +42,7 @@ const FlyoutContent = (props) => {
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
                 "--rs-flyout-max-h": contentMaxHeight,
                 "--rs-flyout-max-w": contentMaxWidth,
+                "--rs-flyout-z-index": contentZIndex,
             }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleContentMouseEnter : undefined, onMouseLeave: triggerType === "hover" ? handleMouseLeave : undefined, onMouseDown: handleContentMouseDown, onTouchStart: handleContentMouseDown, onMouseUp: handleContentMouseUp, onTouchEnd: handleContentMouseUp, children: _jsx("div", { role: role, ...attributes, id: id, tabIndex: !autoFocus ? -1 : undefined, "aria-modal": role === "dialog" ? true : undefined, style: { ...attributes?.style, ...contentAttributes?.style }, className: innerClassNames, children: children }) }) }));
     return _jsx(Portal, { children: content });
 };

package/dist/components/Flyout/FlyoutControlled.js

@@ -1,15 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TrapFocus } from "@reshaped/utilities";
-import { checkKeyboardMode } from "@reshaped/utilities/internal";
+import { TrapFocus, useHotkeys, useIsomorphicLayoutEffect, useHandlerRef, useOnClickOutside, } from "@reshaped/headless";
+import { checkKeyboardMode, } from "@reshaped/headless/internal";
 import React from "react";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import usePrevious from "../../hooks/_private/usePrevious.js";
 import useElementId from "../../hooks/useElementId.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
-import useHotkeys from "../../hooks/useHotkeys.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import useOnClickOutside from "../../hooks/useOnClickOutside.js";
 import { checkTransitions } from "../../utilities/animation.js";
 import * as timeouts from "./Flyout.constants.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
@@ -17,7 +13,7 @@ import useFlyout from "./useFlyout.js";
 import cooldown from "./utilities/cooldown.js";
 import { createSafeArea } from "./utilities/safeArea.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, contentMaxWidth, contentZIndex, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
     const fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
     const onOpenRef = useHandlerRef(onOpen);
     const onCloseRef = useHandlerRef(onClose);
@@ -350,6 +346,7 @@ const FlyoutControlled = (props) => {
             handleContentMouseUp,
             triggerType,
             trapFocusMode,
+            contentZIndex,
             contentClassName,
             contentAttributes,
             contentGap,

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

@@ -1,11 +1,11 @@
+import { type Coordinates } from "@reshaped/headless/internal";
 import type * as T from "./Flyout.types";
-import type * as G from "../../types/global";
 type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinHeight" | "contentGap" | "contentShift" | "onClose"> & {
     fallbackPositions?: T.Position[];
     container?: HTMLElement | null;
     triggerElRef: React.RefObject<HTMLElement | null>;
     flyoutElRef: React.RefObject<HTMLElement | null>;
-    triggerCoordinatesRef: React.RefObject<DOMRect | G.Coordinates | null>;
+    triggerCoordinatesRef: React.RefObject<DOMRect | Coordinates | null>;
 }) => Pick<T.State, "position" | "status"> & {
     updatePosition: (options?: {
         fallback?: boolean;

package/dist/components/Flyout/useFlyout.js

@@ -1,6 +1,6 @@
-import { Flyout } from "@reshaped/utilities";
+import { useIsomorphicLayoutEffect } from "@reshaped/headless";
+import { Flyout } from "@reshaped/headless/internal";
 import { useCallback, useMemo, useRef, useState } from "react";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 const useFlyout = (args) => {
     const { triggerElRef, flyoutElRef, triggerCoordinatesRef, contentGap, contentShift, onClose, ...options } = args;
     const { position: defaultPosition = "bottom", fallbackPositions, fallbackAdjustLayout, fallbackMinHeight, width, container, } = options;

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

@@ -1,10 +1,10 @@
-import type * as G from "../../../types/global";
+import type { Coordinates } from "@reshaped/headless/internal";
 type SafePolygonOptions = {
     contentRef: React.RefObject<HTMLElement | null>;
     triggerRef: React.RefObject<HTMLElement | null>;
     position: string | null | undefined;
     onClose: () => void;
-    origin: G.Coordinates;
+    origin: Coordinates;
 };
 export declare function createSafeArea(options: SafePolygonOptions): () => void;
 export {};

package/dist/components/Grid/Grid.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { resolveMixin } from "../../styles/mixin.js";
 import { responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Grid.module.css";

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { Property } from "csstype";
 import type React from "react";
 import type * as TStyles from "../../styles/types";
@@ -36,9 +37,9 @@ export type Props<TagName extends keyof React.JSX.IntrinsicElements | void = voi
     /** Custom root element html tag */
     as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<TagName>;
+    attributes?: Attributes<TagName>;
 };
 export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void = void> = {
     /** Grid area for template syntax */
@@ -60,7 +61,7 @@ export type ItemProps<TagName extends keyof React.JSX.IntrinsicElements | void =
     /** Custom item element html tag */
     as?: TagName extends keyof React.JSX.IntrinsicElements ? TagName : keyof React.JSX.IntrinsicElements;
     /** Additional classname for the item element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the item element */
-    attributes?: G.Attributes<TagName>;
+    attributes?: Attributes<TagName>;
 };

package/dist/components/Hidden/Hidden.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Hidden.module.css";
 const Hidden = (props) => {

package/dist/components/HiddenInput/HiddenInput.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";

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

@@ -1,4 +1,5 @@
 import React from "react";
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "../../types/global";
 export type Props = {
     /** Name of the input element */
@@ -20,7 +21,7 @@ export type Props = {
     /** Type of the input element */
     type: "checkbox" | "radio";
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the input element */
-    attributes?: G.Attributes<"input">;
+    attributes?: Attributes<"input">;
 };

package/dist/components/Hotkey/Hotkey.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import Text from "../Text/index.js";
 import s from "./Hotkey.module.css";
 const Hotkey = (props) => {

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

@@ -1,12 +1,12 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "../../types/global";
 export type Props = {
     /** Node for inserting children */
     children: React.ReactNode;
     /** Highlight the component, can be used to show when hotkey is pressed */
     active?: boolean;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"span">;
+    attributes?: Attributes<"span">;
 };

package/dist/components/Icon/Icon.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Icon.module.css";

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
@@ -10,7 +11,7 @@ export type Props = {
     /** Use the width of the svg asset instead of providing a square bounding box */
     autoWidth?: boolean;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"span">;
+    attributes?: Attributes<"span">;
 };

package/dist/components/Image/Image.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 import { resolveMixin } from "../../styles/mixin.js";
 import s from "./Image.module.css";

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
 import type * as TStyles from "../../styles/types";
 import type * as G from "../../types/global";
@@ -27,14 +28,14 @@ export type Props = {
     /** Image fallback content if the image fails to load or was not provided */
     fallback?: string | React.ReactNode | boolean;
     /** Image render function, can be used for integrating with Image component in 3rd party frameworks */
-    renderImage?: (attributes: Omit<G.Attributes<"img">, "src" | "alt"> & {
+    renderImage?: (attributes: Omit<Attributes<"img">, "src" | "alt"> & {
         src: string;
         alt: string;
     }) => React.ReactNode;
     /** Additional attributes for the image element */
-    imageAttributes?: G.Attributes<"img">;
+    imageAttributes?: Attributes<"img">;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div"> & G.Attributes<"img">;
+    attributes?: Attributes<"div"> & Attributes<"img">;
 };

package/dist/components/Link/Link.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";

package/dist/components/Loader/Loader.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { responsiveClassNames } from "../../utilities/props.js";
 import s from "./Loader.module.css";
 const Loader = (props) => {

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "../../types/global";
 export type Props = {
     /** Component size */
@@ -7,7 +8,7 @@ export type Props = {
     /** aria-label attribute for the root element */
     ariaLabel?: string;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"span">;
+    attributes?: Attributes<"span">;
 };

package/dist/components/MenuItem/MenuItem.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { ActionableProps } from "../Actionable";
 import type { IconProps } from "../Icon";
 import type React from "react";
@@ -27,7 +28,7 @@ export type AlignerProps = {
     /** Node for inserting children */
     children: React.ReactElement;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };

package/dist/components/Modal/Modal.js

@@ -1,12 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
-import { enableScroll, disableScroll } from "@reshaped/utilities/internal";
+import { classNames, useHandlerRef } from "@reshaped/headless";
+import { enableScroll, disableScroll } from "@reshaped/headless/internal";
 import React from "react";
 import Overlay from "../Overlay/index.js";
 import Text from "../Text/index.js";
 import useElementId from "../../hooks/useElementId.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useResponsiveClientValue from "../../hooks/useResponsiveClientValue.js";
 import { resolveMixin } from "../../styles/mixin.js";
 import { responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
@@ -41,7 +40,7 @@ export const ModalSubtitle = (props) => {
     return (_jsx(Text, { variant: "body-3", color: "neutral-faded", attributes: { id: `${id}-subtitle` }, children: children }));
 };
 const Modal = (props) => {
-    const { children, onClose, onOpen, onAfterClose, onAfterOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, containerRef, overlayClassName, className, attributes, } = props;
+    const { children, onClose, onOpen, onAfterClose, onAfterOpen, active, size, padding = 4, position = "center", overflow, transparentOverlay, blurredOverlay, ariaLabel, autoFocus = true, disableSwipeGesture, disableCloseOnOutsideClick, containerRef, contained, overlayClassName, className, attributes, } = props;
     const onCloseRef = useHandlerRef(onClose);
     const id = useElementId();
     const clientPosition = useResponsiveClientValue(position);
@@ -57,6 +56,7 @@ const Modal = (props) => {
     const [dragDistance, setDragDistance] = React.useState(0);
     const [hideProgress, setHideProgress] = React.useState(0);
     const mixinStyles = resolveMixin({ padding });
+    const shouldBeContained = containerRef && contained !== false;
     const value = React.useMemo(() => ({
         titleMounted,
         setTitleMounted,
@@ -166,10 +166,10 @@ 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: clientPosition === "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, contained: contained, 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);
+            const rootClassNames = classNames(s.root, className, active && s["--active"], dragging && s["--dragging"], overflow && s[`--overflow-${overflow}`], shouldBeContained && s["--contained"], responsiveClassNames(s, "--position", position), mixinStyles.classNames);
             return (_jsx(Context.Provider, { value: value, children: _jsx("div", { ...attributes, style: {
                         ...mixinStyles.variables,
                         ...responsiveVariables("--rs-modal-size", size),

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type { OverlayProps, OverlayCloseReason } from "../Overlay";
 import type React from "react";
 import type * as G from "../../types/global";
@@ -46,11 +47,11 @@ export type Props = {
     /** aria-label attribute for the root element, useful when there is no visible title */
     ariaLabel?: string;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional classname for the overlay element */
-    overlayClassName?: G.ClassName;
+    overlayClassName?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div"> & {
+    attributes?: Attributes<"div"> & {
         ref?: React.RefObject<HTMLDivElement | null>;
     };
-} & Pick<OverlayProps, "onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef">;
+} & Pick<OverlayProps, "onOpen" | "onAfterOpen" | "onAfterClose" | "active" | "containerRef" | "contained">;

package/dist/components/NumberField/NumberFieldControlled.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHotkeys, useHandlerRef } from "@reshaped/headless";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import { useFormControl } from "../FormControl/index.js";
@@ -7,8 +8,6 @@ import Icon from "../Icon/index.js";
 import TextField from "../TextField/index.js";
 import * as keys from "../../constants/keys.js";
 import useElementId from "../../hooks/useElementId.js";
-import useHandlerRef from "../../hooks/useHandlerRef.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";

package/dist/components/Overlay/Overlay.js

@@ -1,19 +1,14 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TrapFocus } from "@reshaped/utilities";
-import { classNames } from "@reshaped/utilities";
+import { TrapFocus, useHotkeys, useIsomorphicLayoutEffect, useHandlerRef, useScrollLock, useToggle, } from "@reshaped/headless";
+import { classNames } from "@reshaped/headless";
 import React from "react";
 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 useToggle from "../../hooks/useToggle.js";
 import { onNextFrame } from "../../utilities/animation.js";
 import s from "./Overlay.module.css";
 const Overlay = (props) => {
-    const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, className, attributes, } = props;
+    const { active, children, transparent, blurred, overflow, onClose, onOpen, onAfterClose, onAfterOpen, disableCloseOnClick, containerRef, contained, className, attributes, } = props;
     // Selectors wrapped with refs to simplify working with useEffect dependency array
     const onCloseRef = useHandlerRef(onClose);
     const onOpenRef = useHandlerRef(onOpen);
@@ -32,7 +27,8 @@ const Overlay = (props) => {
     const { active: rendered, activate: render, deactivate: remove } = useToggle(active || false);
     const { active: visible, activate: show, deactivate: hide } = useToggle(active || false);
     const isDismissible = useIsDismissible({ active, contentRef, hasTrigger: false });
-    const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], containerRef && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
+    const shouldBeContained = containerRef && contained !== false;
+    const rootClassNames = classNames(s.root, visible && s["--visible"], isTransparent && s["--click-through"], blurred && s["--blurred"], animated && s["--animated"], shouldBeContained && s["--contained"], overflow === "auto" && s["--overflow-auto"], className);
     const isInsideContent = (el) => {
         if (!contentRef.current)
             return;
@@ -100,9 +96,8 @@ const Overlay = (props) => {
         const containerEl = containerRef?.current;
         if (containerEl) {
             originalOverflowRef.current = containerEl.style.overflow;
-            // eslint-disable-next-line react-hooks/immutability
-            containerEl.style.overflow = "hidden";
-            containerEl.style.isolation = "isolate";
+            containerEl.style.setProperty("overflow", "hidden");
+            containerEl.style.setProperty("isolation", "isolate");
             setOffset([containerEl.scrollLeft, containerEl.scrollTop]);
         }
         trapFocus.trap(contentRef.current, {

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

@@ -1,5 +1,5 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type React from "react";
-import type * as G from "../../types/global";
 export type CloseReason = "overlay-click" | "escape-key";
 export type Props = {
     /** Make the overlay transparent */
@@ -28,8 +28,10 @@ export type Props = {
     disableCloseOnClick?: boolean;
     /** Element to render the component in */
     containerRef?: React.RefObject<HTMLElement | null>;
+    /** Contain the component within the container element. Defaults to true when containerRef is provided */
+    contained?: boolean;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };

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

@@ -1,4 +1,4 @@
-import type * as G from "../../types/global";
+import type { Attributes, ClassName } from "@reshaped/headless";
 export type BaseProps = {
     /** Total number of pages available */
     total: number;
@@ -15,9 +15,9 @@ export type BaseProps = {
     /** aria-label attribute for the next page button */
     nextAriaLabel: string;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
     /** Currently selected page number, starts with 1, enables controlled mode */

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

@@ -1,3 +1,4 @@
+import type { Attributes, ClassName } from "@reshaped/headless";
 import type * as G from "../../types/global";
 export type Size = "small" | "medium" | "large" | "xlarge";
 type BaseProps = {
@@ -14,11 +15,11 @@ type BaseProps = {
     /** Callback when the input value changes */
     onChange?: G.ChangeHandler<string>;
     /** Additional attributes for the input element */
-    inputAttributes?: G.Attributes<"input">;
+    inputAttributes?: Attributes<"input">;
     /** Additional classname for the root element */
-    className?: G.ClassName;
+    className?: ClassName;
     /** Additional attributes for the root element */
-    attributes?: G.Attributes<"div">;
+    attributes?: Attributes<"div">;
 };
 export type ControlledProps = BaseProps & {
     /** Value of the input element, enables controlled mode */

package/dist/components/PinField/PinFieldControlled.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useHotkeys } from "@reshaped/headless";
 import React from "react";
 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 { onNextFrame } from "../../utilities/animation.js";
 import { responsivePropDependency } from "../../utilities/props.js";
 import { regExpNumericChar, regExpAlphabeticChar, regExpAlphaNumericChar, } from "./PinField.constants.js";

package/dist/components/Popover/Popover.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import Dismissible from "../Dismissible/index.js";
 import Flyout, { useFlyoutContext } from "../Flyout/index.js";
 import { resolveMixin } from "../../styles/mixin.js";

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

@@ -1,7 +1,7 @@
 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" | "contentMaxHeight" | "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" | "contentZIndex" | "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.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "@reshaped/utilities";
+import { classNames } from "@reshaped/headless";
 import s from "./Progress.module.css";
 const Progress = (props) => {
     const { value = 0, min = 0, max = 100, color = "primary", size = "medium", duration, ariaLabel, className, attributes, } = props;