reshaped 3.9.0-canary.1 → 3.9.0-canary.3

package/dist/components/Carousel/Carousel.js

@@ -1,13 +1,13 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
-import { rafThrottle } from "../../utilities/helpers.js";
 import View from "../View/index.js";
-import useRTL from "../../hooks/useRTL.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import CarouselControl from "./CarouselControl.js";
+import useRTL from "../../hooks/useRTL.js";
+import { rafThrottle } from "../../utilities/helpers.js";
+import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
+import CarouselControl from "./CarouselControl.js";
 const Carousel = (props) => {
     const { children, gap = 3, visibleItems, bleed, navigationDisplay, onChange, onScroll, instanceRef, className, attributes, } = props;
     const currentIndexRef = React.useRef(0);

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

@@ -1,6 +1,6 @@
+import type { ActionableRef } from "../Actionable";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { ActionableRef } from "../Actionable";
 export type Instance = {
     /** Scroll to the previous item */
     navigateBack: () => void;

package/dist/components/Carousel/CarouselControl.d.ts

@@ -1,4 +1,4 @@
-import type { ActionableRef } from "../Actionable";
 import * as T from "./Carousel.types";
+import type { ActionableRef } from "../Actionable";
 declare const CarouselControl: import("react").ForwardRefExoticComponent<T.ControlProps & import("react").RefAttributes<ActionableRef>>;
 export default CarouselControl;

package/dist/components/Carousel/CarouselControl.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useState } from "react";
-import { classNames } from "../../utilities/props.js";
 import Button from "../Button/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
-import IconChevronLeft from "../../icons/ChevronLeft.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
+import IconChevronLeft from "../../icons/ChevronLeft.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
 const CarouselControl = forwardRef((props, ref) => {
     const { type, scrollElRef, oppositeControlElRef, scrollPosition, onClick, isRTL, mounted } = props;

package/dist/components/Checkbox/Checkbox.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from "react";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import HiddenInput from "../_private/HiddenInput/index.js";
-import { useFormControl } from "../FormControl/index.js";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
+import { useFormControl } from "../FormControl/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import IconCheckmark from "../../icons/Checkmark.js";
+import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Checkbox.module.css";
 const Checkbox = (props) => {
     const { children, value, onChange, onFocus, onBlur, indeterminate, size = "medium", className, attributes, inputAttributes, } = props;

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

@@ -1,6 +1,6 @@
+import type { CheckboxProps } from "../Checkbox";
 import type React from "react";
 import type * as G from "../../types/global";
-import type { CheckboxProps } from "../Checkbox";
 type BaseProps = {
     /** Component id attribute */
     id?: string;

package/dist/components/Container/Container.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 "./Container.module.css";
 const Container = (props) => {
     const { children, padding = 4, width, align, justify, height, maxHeight, className, attributes, } = props;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = Pick<ViewProps, "align" | "justify" | "height" | "maxHeight"> & {
     /** Component inline padding */

package/dist/components/ContextMenu/ContextMenu.js

@@ -2,9 +2,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
 import DropdownMenu from "../DropdownMenu/index.js";
+import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useScrollLock from "../../hooks/useScrollLock.js";
 import s from "./ContextMenu.module.css";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
 const ContextMenu = (props) => {
     const { position = "end-top", onOpen, onClose, ...dropdownMenuProps } = props;
     const [coordinates, setCoordinates] = React.useState();

package/dist/components/Dismissible/Dismissible.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
 import Button from "../Button/index.js";
 import IconClose from "../../icons/Close.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./Dismissible.module.css";
 const Dismissible = (props) => {
     const { children, align, onClose, hideCloseButton, variant, closeAriaLabel, className, attributes, } = props;

package/dist/components/Divider/Divider.d.ts

@@ -1,4 +1,4 @@
-import type React from "react";
 import type * as T from "./Divider.types";
+import type React from "react";
 declare const Divider: React.FC<T.Props>;
 export default Divider;

package/dist/components/Divider/Divider.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import Text from "../Text/index.js";
+import { classNames, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Divider.module.css";
 const Divider = (props) => {
     const { vertical, blank, children, contentPosition = "center", color, offset, className, attributes, } = props;

package/dist/components/DropdownMenu/DropdownMenu.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import Popover from "../Popover/index.js";
-import MenuItem from "../MenuItem/index.js";
-import Icon from "../Icon/index.js";
 import { useFlyoutContext } from "../Flyout/index.js";
-import IconChevronRight from "../../icons/ChevronRight.js";
+import Icon from "../Icon/index.js";
+import MenuItem from "../MenuItem/index.js";
+import Popover from "../Popover/index.js";
+import * as keys from "../../constants/keys.js";
 import useHotkeys from "../../hooks/useHotkeys.js";
 import useRTL from "../../hooks/useRTL.js";
+import IconChevronRight from "../../icons/ChevronRight.js";
 import { classNames } from "../../utilities/props.js";
-import * as keys from "../../constants/keys.js";
 import s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(false);

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

@@ -1,9 +1,9 @@
-import type React from "react";
-import type { PopoverProps, PopoverInstance } from "../Popover";
-import type { MenuItemProps } from "../MenuItem";
 import type { FlyoutContentProps } from "../Flyout";
+import type { MenuItemProps } from "../MenuItem";
+import type { PopoverProps, PopoverInstance } from "../Popover";
+import type React from "react";
 export type Instance = PopoverInstance;
-export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
+export type Props = Pick<PopoverProps, "children" | "position" | "forcePosition" | "fallbackPositions" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "triggerType" | "contentGap" | "contentShift" | "contentMaxHeight" | "onOpen" | "onClose" | "active" | "defaultActive" | "width" | "disableHideAnimation" | "disableCloseOnOutsideClick" | "instanceRef" | "containerRef" | "positionRef" | "originCoordinates" | "borderRadius" | "elevation" | "initialFocusRef"> & {
     /** Change component trap focus keyboard behavior and shortcuts */
     trapFocusMode?: Extract<PopoverProps["trapFocusMode"], "action-menu" | "selection-menu"> | false;
 };

package/dist/components/FileUpload/FileUpload.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
-import View from "../View/index.js";
 import HiddenVisually from "../HiddenVisually/index.js";
+import View from "../View/index.js";
 import useToggle from "../../hooks/useToggle.js";
+import { classNames } from "../../utilities/props.js";
 import s from "./FileUpload.module.css";
 export const FileUploadTrigger = (props) => {
     const { children } = props;

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

@@ -1,5 +1,5 @@
-import type React from "react";
 import type { ViewProps } from "../View";
+import type React from "react";
 import type * as G from "../../types/global";
 export type Props = {
     /** Name of the input element */

package/dist/components/Flyout/Flyout.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 import FlyoutControlled from "./FlyoutControlled.js";
+import FlyoutUncontrolled from "./FlyoutUncontrolled.js";
 const Flyout = (props) => {
     const { active } = props;
     if (typeof active === "boolean")

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

@@ -1 +1 @@
-.content{--rs-flyout-gap:0;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;height:100%;max-height:100%;max-width:100%;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%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.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-gap:0;--rs-flyout-max-h:100%;--rs-flyout-origin-x:50%;--rs-flyout-origin-y:50%;isolation:isolate;pointer-events:none;position:absolute}.content.--hover{pointer-events:all}.content.--hover-disabled,.content.--hover-disabled .inner{pointer-events:none}.inner{backface-visibility:hidden;height:100%;max-height:var(--rs-flyout-max-h);max-width:100%;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%;padding-bottom:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom,.content.--position-bottom-end,.content.--position-bottom-start{--rs-flyout-origin-y:0%;padding-top:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-bottom-start,.content.--position-top-start{--rs-flyout-origin-x:0%}.content.--position-bottom-end,.content.--position-top-end{--rs-flyout-origin-x:100%}.content.--position-start,.content.--position-start-bottom,.content.--position-start-top{--rs-flyout-origin-x:100%;padding-right:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.content.--position-end,.content.--position-end-bottom,.content.--position-end-top{--rs-flyout-origin-x:0%;padding-left:calc(var(--rs-unit-x1) * var(--rs-flyout-gap))}.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

@@ -132,6 +132,8 @@ type BaseProps = {
     contentGap?: number;
     /** Shift the content on the secondary axis, relative to its original position */
     contentShift?: number;
+    /** Maximum height for the content */
+    contentMaxHeight?: string;
     /** Additional classname for the content element */
     contentClassName?: string;
     /** Additional attributes for the content element */
@@ -189,7 +191,7 @@ export type ContextProps = {
     handleContentMouseDown: () => void;
     handleContentMouseUp: () => void;
     isSubmenu: boolean;
-} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
+} & Pick<Props, "triggerType" | "contentClassName" | "contentAttributes" | "contentGap" | "contentMaxHeight" | "trapFocusMode" | "containerRef" | "disableContentHover" | "autoFocus">;
 export type TriggerContextProps = {
     elRef?: ContextProps["triggerElRef"];
 };

package/dist/components/Flyout/FlyoutContent.js

@@ -1,17 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
-import { rafThrottle } from "../../utilities/helpers.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import Portal from "../_private/Portal/index.js";
+import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { findClosestPositionContainer, findClosestScrollableContainer } from "../../utilities/dom/index.js";
-import cooldown from "./utilities/cooldown.js";
+import { rafThrottle } from "../../utilities/helpers.js";
+import { classNames } from "../../utilities/props.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, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, triggerElRef, handleClose, handleTransitionEnd, handleTransitionStart, triggerType, handleMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentGap, contentMaxHeight, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
     const { styles, status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
     const closestFixedContainer = React.useMemo(() => {
@@ -97,6 +97,7 @@ const FlyoutContent = (props) => {
     const content = (_jsx(ContentProvider, { value: { elRef: flyoutElRef }, children: _jsx("div", { className: rootClassNames, style: {
                 ...styles,
                 "--rs-flyout-gap": contentGap,
+                "--rs-flyout-max-h": contentMaxHeight,
             }, ref: flyoutElRef, onTransitionEnd: handleTransitionEnd, onMouseEnter: triggerType === "hover" ? handleMouseEnter : 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, { targetRef: containerRef, children: content });
 };

package/dist/components/Flyout/FlyoutControlled.js

@@ -1,21 +1,21 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from "react";
-import { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import useElementId from "../../hooks/useElementId.js";
-import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.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 useRTL from "../../hooks/useRTL.js";
+import { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
 import { checkTransitions, onNextFrame } from "../../utilities/animation.js";
-import useFlyout from "./useFlyout.js";
 import * as timeouts from "./Flyout.constants.js";
-import cooldown from "./utilities/cooldown.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";
-import useHandlerRef from "../../hooks/useHandlerRef.js";
+import useFlyout from "./useFlyout.js";
+import cooldown from "./utilities/cooldown.js";
 const FlyoutControlled = (props) => {
-    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentClassName, contentAttributes, position: passedPosition, active: passedActive, id: passedId, instanceRef, containerRef, initialFocusRef, positionRef, } = props;
+    const { triggerType = "click", groupTimeouts, onOpen, onClose, children, disabled, forcePosition, fallbackAdjustLayout, fallbackMinWidth, fallbackMinHeight, trapFocusMode = "dialog", width, disableHideAnimation, disableContentHover, disableCloseOnOutsideClick, autoFocus = true, originCoordinates, contentGap = 2, contentShift, contentMaxHeight, 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);
@@ -305,7 +305,7 @@ const FlyoutControlled = (props) => {
         shouldReturnFocusRef.current = false;
         handleClose({ reason: "outside-click" });
     }, {
-        disabled: Boolean(status !== "visible" || disableCloseOnOutsideClick),
+        disabled: !isRendered || disableCloseOnOutsideClick,
     });
     return (_jsx(Provider, { value: {
             id,
@@ -331,6 +331,7 @@ const FlyoutControlled = (props) => {
             contentClassName,
             contentAttributes,
             contentGap,
+            contentMaxHeight,
             containerRef,
             disableContentHover,
             autoFocus,

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

@@ -1,6 +1,6 @@
 import Flyout from "./Flyout";
-import FlyoutTrigger from "./FlyoutTrigger";
 import FlyoutContent from "./FlyoutContent";
+import FlyoutTrigger from "./FlyoutTrigger";
 declare const FlyoutRoot: typeof Flyout & {
     Trigger: typeof FlyoutTrigger;
     Content: typeof FlyoutContent;

package/dist/components/Flyout/index.js

@@ -1,6 +1,6 @@
 import Flyout from "./Flyout.js";
-import FlyoutTrigger from "./FlyoutTrigger.js";
 import FlyoutContent from "./FlyoutContent.js";
+import FlyoutTrigger from "./FlyoutTrigger.js";
 const FlyoutRoot = Flyout;
 FlyoutRoot.Trigger = FlyoutTrigger;
 FlyoutRoot.Content = FlyoutContent;

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

@@ -1,6 +1,6 @@
 import React from "react";
-import type * as G from "../../types/global";
 import type * as T from "./Flyout.types";
+import type * as G from "../../types/global";
 type UseFlyout = (args: Pick<T.Props, "width" | "position" | "defaultActive" | "fallbackAdjustLayout" | "fallbackMinWidth" | "fallbackMinHeight" | "contentGap" | "contentShift"> & {
     fallbackPositions?: T.Position[];
     container?: HTMLElement | null;

package/dist/components/Flyout/useFlyout.js

@@ -1,7 +1,7 @@
 import React from "react";
 import useRTL from "../../hooks/useRTL.js";
-import flyout from "./utilities/flyout.js";
 import { defaultStyles, resetStyles } from "./Flyout.constants.js";
+import flyout from "./utilities/flyout.js";
 const flyoutReducer = (state, action) => {
     switch (action.type) {
         case "render":

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

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/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,8 +1,8 @@
 "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;

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;

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, responsivePropDependency, } 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;

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 = {