reshaped 3.9.0-canary.0 → 3.9.0-canary.2

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,21 +1,21 @@
 "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);
 const DropdownMenu = (props) => {
     const { children, position = "bottom-start", triggerType = "click", trapFocusMode = "action-menu", borderRadius = "small", ...popoverProps } = props;
-    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, borderRadius: borderRadius, disableHideAnimation: true, children: children }));
+    return (_jsx(Popover, { ...popoverProps, position: position, padding: 0, trapFocusMode: trapFocusMode, triggerType: triggerType, borderRadius: borderRadius, disableHideAnimation: triggerType !== "hover", children: children }));
 };
 export const DropdownMenuContent = (props) => {
     const { children, attributes, className } = props;

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

@@ -1,7 +1,7 @@
-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"> & {
     /** Change component trap focus keyboard behavior and shortcuts */

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.constants.d.ts

@@ -1,6 +1,4 @@
 import type * as T from "./Flyout.types";
-export declare const mouseEnter = 800;
-export declare const mouseEnterShort = 100;
-export declare const mouseLeave = 150;
+export declare const mouseEnter = 600;
 export declare const defaultStyles: T.Styles;
 export declare const resetStyles: T.Styles;

package/dist/components/Flyout/Flyout.constants.js

@@ -1,6 +1,4 @@
-export const mouseEnter = 800;
-export const mouseEnterShort = 100;
-export const mouseLeave = 150;
+export const mouseEnter = 600;
 export const defaultStyles = {
     left: 0,
     top: 0,

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/FlyoutContent.js

@@ -1,14 +1,14 @@
 "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();

package/dist/components/Flyout/FlyoutControlled.js

@@ -1,19 +1,19 @@
 "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 fallbackPositions = props.fallbackPositions === false || forcePosition ? [] : props.fallbackPositions;
@@ -84,7 +84,7 @@ const FlyoutControlled = (props) => {
     const clearTimer = React.useCallback(() => {
         if (timerRef.current)
             clearTimeout(timerRef.current);
-    }, [timerRef]);
+    }, []);
     /**
      * Component open/close handlers
      * Called from the internal actions
@@ -143,16 +143,14 @@ const FlyoutControlled = (props) => {
                 cooldown.warm();
             timerRef.current = setTimeout(() => {
                 handleOpen();
-            }, groupTimeouts && cooldown.status === "warming"
-                ? timeouts.mouseEnter
-                : timeouts.mouseEnterShort);
+            }, groupTimeouts && cooldown.status === "warming" ? timeouts.mouseEnter : 0);
         }
-    }, [clearTimer, timerRef, handleOpen, groupTimeouts]);
+    }, [clearTimer, handleOpen, groupTimeouts]);
     const handleMouseLeave = React.useCallback(() => {
         cooldown.cool();
         clearTimer();
-        timerRef.current = setTimeout(() => handleClose({}), timeouts.mouseLeave);
-    }, [clearTimer, timerRef, handleClose]);
+        handleClose({});
+    }, [clearTimer, handleClose]);
     const handleTriggerClick = React.useCallback(() => {
         if (!isRendered) {
             handleOpen();
@@ -307,7 +305,7 @@ const FlyoutControlled = (props) => {
         shouldReturnFocusRef.current = false;
         handleClose({ reason: "outside-click" });
     }, {
-        disabled: !isRendered || disableCloseOnOutsideClick,
+        disabled: Boolean(status !== "visible" || disableCloseOnOutsideClick),
     });
     return (_jsx(Provider, { value: {
             id,

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/cooldown.js

@@ -1,4 +1,3 @@
-import * as timeouts from "../Flyout.constants.js";
 class Cooldown {
     status = "cold";
     timer;
@@ -12,7 +11,7 @@ class Cooldown {
         this.timer = setTimeout(() => {
             this.status = "warm";
             this.timer = undefined;
-        }, timeouts.mouseEnterShort);
+        }, 100);
     };
     cool = () => {
         clearTimeout(this.timer);

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/Icon/Icon.module.css

@@ -1 +1 @@
-.root{align-items:center;aspect-ratio:1;display:flex;justify-content:center}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;height:100%;min-width:100%;width:auto}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}
+.root{align-items:center;aspect-ratio:1;display:flex;justify-content:center;transition:color var(--rs-duration-fast) var(--rs-easing-standard)}.--auto{aspect-ratio:auto;justify-content:flex-start;width:auto}.root svg{display:block;height:100%;min-width:100%;width:auto}.--color-neutral{color:var(--rs-color-foreground-neutral)}.--color-neutral-faded{color:var(--rs-color-foreground-neutral-faded)}.--color-primary{color:var(--rs-color-foreground-primary)}.--color-positive{color:var(--rs-color-foreground-positive)}.--color-warning{color:var(--rs-color-foreground-warning)}.--color-critical{color:var(--rs-color-foreground-critical)}.--color-disabled{color:var(--rs-color-foreground-disabled)}

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

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.types.d.ts

@@ -1,5 +1,5 @@
-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"> & {
     /** Node for inserting children */

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

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