reshaped 3.9.1-canary.2 → 3.10.0-canary.4

package/dist/components/Accordion/AccordionControlled.js

@@ -1,9 +1,9 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import useElementId from "../../hooks/useElementId.js";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
-import { classNames } from "../../utilities/props.js";
 import AccordionContext from "./Accordion.context.js";
 const AccordionControlled = (props) => {
     const { children, onToggle, active, iconPosition, iconSize, gap, className, attributes } = props;

package/dist/components/Accordion/AccordionTrigger.js

@@ -1,11 +1,11 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import View from "../View/index.js";
 import IconChevronDown from "../../icons/ChevronDown.js";
-import { classNames } from "../../utilities/props.js";
 import AccordionContext from "./Accordion.context.js";
 import s from "./Accordion.module.css";
 const AccordionTrigger = (props) => {

package/dist/components/ActionBar/ActionBar.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import View from "../View/index.js";
-import { classNames, responsiveVariables } from "../../utilities/props.js";
+import { responsiveVariables } from "../../utilities/props.js";
 import s from "./ActionBar.module.css";
 const fullWidthPositions = ["top", "bottom"];
 const ActionBar = (props) => {

package/dist/components/Avatar/Avatar.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import Icon from "../Icon/index.js";
 import Image from "../Image/index.js";
 import View from "../View/index.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsivePropDependency } from "../../utilities/props.js";
+import { responsivePropDependency } from "../../utilities/props.js";
 import s from "./Avatar.module.css";
 const Avatar = (props) => {
     const { color = "neutral", variant, src, size = 12, squared, initials, icon, className, renderImage, imageAttributes, attributes, } = props;

package/dist/components/Badge/Badge.js

@@ -1,23 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import Text from "../Text/index.js";
 import IconClose from "../../icons/Close.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Badge.module.css";
 const Badge = forwardRef((props, ref) => {
     const { children, color, rounded, size = "medium", icon, endIcon, variant, hidden, highlighted, href, onClick, onDismiss, dismissAriaLabel, className, attributes, as, } = props;
     const isActionable = !!(onClick || href);
     const iconSize = size === "small" ? 3 : 4;
-    const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"]);
-    const hnadleDismiss = (e) => {
+    const empty = !children && !icon && !endIcon;
+    const rootClassName = classNames(s.root, className, rounded && s["--rounded"], hidden && s["--hidden"], size && s[`--size-${size}`], color && s[`--color-${color}`], variant && s[`--variant-${variant}`], isActionable && s["--actionable"], highlighted && s["--highlighted"], empty && s["--empty"]);
+    const handleDismiss = (e) => {
         e.stopPropagation();
         onDismiss?.();
     };
-    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: true, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
+    return (_jsxs(Actionable, { onClick: onClick, href: href, className: rootClassName, attributes: attributes, ref: ref, as: as, touchHitbox: isActionable, children: [icon && _jsx(Icon, { svg: icon, autoWidth: true, size: iconSize, className: s.icon }), children && (_jsx(Text, { variant: size === "large" ? "body-3" : "caption-1", weight: "medium", attributes: {
                     "aria-hidden": hidden ? "true" : undefined,
-                }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: hnadleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
+                }, children: children })), endIcon && _jsx(Icon, { svg: endIcon, autoWidth: true, size: iconSize, className: s.icon }), onDismiss && (_jsx(Actionable, { onClick: handleDismiss, className: s.dismiss, as: "span", attributes: { "aria-label": dismissAriaLabel }, touchHitbox: true, children: _jsx(Icon, { svg: IconClose, size: iconSize }) }))] }));
 });
 Badge.displayName = "Badge";
 export default Badge;

package/dist/components/Badge/Badge.module.css

@@ -1 +1 @@
-.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color;vertical-align:top}.root:empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}
+.root{--rs-badge-border-color:transparent;align-items:center;backface-visibility:hidden;background:var(--rs-color-background-neutral);border-radius:var(--rs-radius-small);box-shadow:0 0 0 1px var(--rs-badge-border-color) inset;box-sizing:border-box;color:var(--rs-color-foreground-neutral);display:inline-flex;gap:var(--rs-badge-gap);justify-content:center;min-height:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));min-width:calc(var(--rs-badge-line-height) + (var(--rs-badge-p-v) * 2));padding:var(--rs-badge-p-v) var(--rs-badge-p-h);transition:var(--rs-duration-medium) var(--rs-easing-standard);transition-property:transform,opacity,box-shadow,background-color;vertical-align:top}.root.--empty{height:var(--rs-badge-empty-size);min-height:auto;min-width:auto;padding:0;width:var(--rs-badge-empty-size)}.icon:only-child{margin-inline:calc(var(--rs-unit-x1) * -1)}.dismiss{border-radius:var(--rs-radius-small);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity}.root.--highlighted{opacity:.8}@media (hover:hover) and (pointer:fine){.root .dismiss:hover,.root.--actionable:hover:not(:has(.dismiss:hover)){opacity:.8}}.root.--variant-faded{background:var(--rs-color-background-neutral-faded);color:var(--rs-color-foreground-neutral-faded)}.root.--variant-outline{--rs-badge-border-color:var(--rs-color-border-neutral);background:none}.root.--color-positive{background:var(--rs-color-background-positive);color:var(--rs-color-on-background-positive)}.root.--color-positive.--variant-faded{background:var(--rs-color-background-positive-faded);color:var(--rs-color-foreground-positive)}.root.--color-positive.--variant-outline{--rs-badge-border-color:var(--rs-color-border-positive-faded);background:none;color:var(--rs-color-foreground-positive)}.root.--color-critical{background:var(--rs-color-background-critical);color:var(--rs-color-on-background-critical)}.root.--color-critical.--variant-faded{background:var(--rs-color-background-critical-faded);color:var(--rs-color-foreground-critical)}.root.--color-critical.--variant-outline{--rs-badge-border-color:var(--rs-color-border-critical-faded);background:none;color:var(--rs-color-foreground-critical)}.root.--color-warning{background:var(--rs-color-background-warning);color:var(--rs-color-on-background-warning)}.root.--color-warning.--variant-faded{background:var(--rs-color-background-warning-faded);color:var(--rs-color-foreground-warning)}.root.--color-warning.--variant-outline{--rs-badge-border-color:var(--rs-color-border-warning-faded);background:none;color:var(--rs-color-foreground-warning)}.root.--color-primary{background:var(--rs-color-background-primary);color:var(--rs-color-on-background-primary)}.root.--color-primary.--variant-faded{background:var(--rs-color-background-primary-faded);color:var(--rs-color-foreground-primary)}.root.--color-primary.--variant-outline{--rs-badge-border-color:var(--rs-color-border-primary-faded);background:none;color:var(--rs-color-foreground-primary)}.root.--size-small{--rs-badge-p-v:calc(var(--rs-unit-x1) / 2);--rs-badge-p-h:var(--rs-unit-x1);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x2);--rs-badge-gap:calc(var(--rs-unit-x1) / 2)}.root.--size-medium{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-caption-1);--rs-badge-empty-size:var(--rs-unit-x3);--rs-badge-gap:var(--rs-unit-x1)}.root.--size-large{--rs-badge-p-v:var(--rs-unit-x1);--rs-badge-p-h:var(--rs-unit-x2);--rs-badge-line-height:var(--rs-line-height-body-3);--rs-badge-empty-size:var(--rs-unit-x4);--rs-badge-gap:var(--rs-unit-x1)}.root.--rounded{border-radius:var(--rs-radius-circular)}.root.--hidden{opacity:0;transform:scale(.2)}.container{display:inline-block;position:relative;vertical-align:top}.container .root{inset-inline-end:0;position:absolute;transform:translate(50%,var(--rs-badge-translate-y)) scale(1);user-select:none;z-index:10}.container .root.--hidden{transform:translate(50%,var(--rs-badge-translate-y)) scale(.2)}[dir=rtl] .container .root{transform:translate(-50%,var(--rs-badge-translate-y)) scale(1)}[dir=rtl] .container .root.--hidden{transform:translate(-50%,var(--rs-badge-translate-y)) scale(.2)}.--container-overlap .root{inset-inline-end:14%}.--container-position-top-end .root{--rs-badge-translate-y:-50%;top:0}.--container-position-top-end.--container-overlap .root{top:14%}.--container-position-bottom-end .root{--rs-badge-translate-y:50%;bottom:0}.--container-position-bottom-end.--container-overlap .root{bottom:14%}

package/dist/components/Badge/BadgeContainer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
+import { classNames } from "@reshaped/utilities";
 import s from "./Badge.module.css";
 const BadgeContainer = (props) => {
     const { children, position = "top-end", overlap, className, attributes } = props;

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import Button from "../Button/index.js";
 import Icon from "../Icon/index.js";
@@ -7,7 +8,6 @@ import Text from "../Text/index.js";
 import View from "../View/index.js";
 import IconChevronRight from "../../icons/ChevronRight.js";
 import IconDotsHorizontal from "../../icons/DotsHorizontal.js";
-import { classNames } from "../../utilities/props.js";
 const Breadcrumbs = (props) => {
     const { children, separator, color, defaultVisibleItems, expandAriaLabel, disableExpand, ariaLabel, className, attributes, } = props;
     const visibleItems = defaultVisibleItems && defaultVisibleItems >= 2 ? defaultVisibleItems : null;

package/dist/components/Button/Button.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import Icon from "../Icon/index.js";
 import Loader from "../Loader/index.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Button.module.css";
 const Button = forwardRef((props, ref) => {
     const { variant = "solid", color = "neutral", elevated, highlighted, fullWidth, loading, loadingAriaLabel, disabled, type, href, size = "medium", children, rounded, onClick, icon, endIcon, stopPropagation, as, render, className, attributes, } = props;

package/dist/components/Button/ButtonGroup.js

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

package/dist/components/Calendar/CalendarDate.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import Actionable from "../Actionable/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Calendar.module.css";
 import { getLocalISODate } from "./Calendar.utils.js";
 const CalendarDate = (props) => {

package/dist/components/Card/Card.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { forwardRef } from "react";
 import Actionable from "../Actionable/index.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Card.module.css";
 const Card = forwardRef((props, ref) => {
     const { padding = 4 } = props;

package/dist/components/Carousel/Carousel.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import { rafThrottle } from "@reshaped/utilities/internal";
 import React from "react";
 import View from "../View/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import useRTL from "../../hooks/useRTL.js";
-import { rafThrottle } from "../../utilities/helpers.js";
-import { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
+import { responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Carousel.module.css";
 import CarouselControl from "./CarouselControl.js";
 const Carousel = (props) => {

package/dist/components/Carousel/CarouselControl.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { forwardRef, useState } from "react";
 import Button from "../Button/index.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,5 +1,6 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
@@ -8,7 +9,7 @@ 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 { 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/Container/Container.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 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/Dismissible/Dismissible.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 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.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import Text from "../Text/index.js";
-import { classNames, responsiveClassNames } from "../../utilities/props.js";
+import { 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,5 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import { useFlyoutContext } from "../Flyout/index.js";
 import Icon from "../Icon/index.js";
@@ -9,7 +10,6 @@ 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 s from "./DropdownMenu.module.css";
 const DropdownMenuSubContext = React.createContext(null);
 const DropdownMenuSubTriggerContext = React.createContext(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 "@reshaped/utilities";
 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/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 { TrapMode } from "../../utilities/a11y";
 /**
  * Utility
  */

package/dist/components/Flyout/FlyoutContent.js

@@ -1,26 +1,17 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
-import { findClosestPositionContainer } from "../../utilities/dom/index.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, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, containerRef: passedContainerRef, isSubmenu, } = useFlyoutContext();
+    const { flyout, id, flyoutElRef, handleTransitionEnd, triggerType, handleContentMouseEnter, handleMouseLeave, handleContentMouseDown, handleContentMouseUp, contentClassName, contentAttributes, contentMaxHeight, contentMaxWidth, trapFocusMode, disableContentHover, autoFocus, width, isSubmenu, } = useFlyoutContext();
     const { status, position } = flyout;
     const [mounted, setMounted] = React.useState(false);
-    const closestFixedContainer = React.useMemo(() => {
-        if (!mounted)
-            return null;
-        if (!triggerElRef)
-            return null;
-        return findClosestPositionContainer({ el: triggerElRef.current });
-    }, [mounted, triggerElRef]);
-    const containerRef = passedContainerRef || { current: closestFixedContainer };
     useIsomorphicLayoutEffect(() => {
         setMounted(true);
     }, []);
@@ -53,7 +44,7 @@ const FlyoutContent = (props) => {
                 "--rs-flyout-max-h": contentMaxHeight,
                 "--rs-flyout-max-w": contentMaxWidth,
             }, 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, { targetRef: containerRef, children: content });
+    return _jsx(Portal, { children: content });
 };
 FlyoutContent.displayName = "Flyout.Content";
 export default FlyoutContent;

package/dist/components/Flyout/FlyoutControlled.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { TrapFocus } from "@reshaped/utilities";
+import { checkKeyboardMode } from "@reshaped/utilities/internal";
 import React from "react";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
 import usePrevious from "../../hooks/_private/usePrevious.js";
@@ -8,7 +10,6 @@ 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 { TrapFocus, checkKeyboardMode } from "../../utilities/a11y/index.js";
 import { checkTransitions } from "../../utilities/animation.js";
 import * as timeouts from "./Flyout.constants.js";
 import { Provider, useFlyoutTriggerContext, useFlyoutContext, useFlyoutContentContext, } from "./Flyout.context.js";

package/dist/components/Grid/Grid.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames, responsiveVariables, responsivePropDependency } from "../../utilities/props.js";
+import { 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/Hidden/Hidden.js

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

package/dist/components/HiddenInput/HiddenInput.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { useCheckboxGroup } from "../CheckboxGroup/index.js";
 import { useFormControl } from "../FormControl/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./HiddenInput.module.css";
 const HiddenInput = (props) => {
     const { type, value, className, onBlur, onFocus, onChange, attributes } = props;

package/dist/components/Hotkey/Hotkey.js

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

package/dist/components/Icon/Icon.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 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 { classNames } from "@reshaped/utilities";
 import React from "react";
 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, outline, displayMode = "cover", borderRadius, className, attributes, imageAttributes: passedImageAttributes, renderImage, } = props;

package/dist/components/Link/Link.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { forwardRef } from "react";
 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/Loader/Loader.js

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

package/dist/components/MenuItem/MenuItem.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { forwardRef } from "react";
 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 { 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/Modal/Modal.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import { enableScroll, disableScroll } from "@reshaped/utilities/internal";
 import React from "react";
 import Overlay from "../Overlay/index.js";
 import Text from "../Text/index.js";
@@ -7,8 +9,7 @@ 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 { classNames, responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
-import { enableScroll, disableScroll } from "../../utilities/scroll/index.js";
+import { responsiveVariables, responsiveClassNames } from "../../utilities/props.js";
 import s from "./Modal.module.css";
 const DRAG_THRESHOLD = 32;
 const DRAG_OPPOSITE_THRESHOLD = 100;

package/dist/components/Overlay/Overlay.js

@@ -1,5 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { TrapFocus } from "@reshaped/utilities";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
 import Portal from "../_private/Portal/index.js";
 import useIsDismissible from "../../hooks/_private/useIsDismissible.js";
@@ -8,9 +10,7 @@ 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 { TrapFocus } from "../../utilities/a11y/index.js";
 import { onNextFrame } from "../../utilities/animation.js";
-import { classNames } from "../../utilities/props.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;

package/dist/components/Popover/Popover.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import Dismissible from "../Dismissible/index.js";
 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;

package/dist/components/Progress/Progress.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
+import { classNames } from "@reshaped/utilities";
 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;

package/dist/components/ProgressIndicator/ProgressIndicator.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { classNames } from "../../utilities/props.js";
+import { classNames } from "@reshaped/utilities";
 import s from "./ProgressIndicator.module.css";
 const VISIBLE_ITEMS = 7;
 const HALF_ITEMS = Math.floor(VISIBLE_ITEMS / 2);

package/dist/components/Radio/Radio.js

@@ -1,10 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import { useFormControl } from "../FormControl/index.js";
 import HiddenInput from "../HiddenInput/index.js";
 import { useRadioGroup } from "../RadioGroup/index.js";
 import Text from "../Text/index.js";
-import { classNames, responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
+import { responsiveClassNames, responsivePropDependency } from "../../utilities/props.js";
 import s from "./Radio.module.css";
 const Radio = (props) => {
     const { children, value, onChange, onFocus, onBlur, size = "medium", className, attributes, inputAttributes, } = props;

package/dist/components/Reshaped/Reshaped.js

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

package/dist/components/Resizable/Resizable.js

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

package/dist/components/Resizable/ResizableHandle.js

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

package/dist/components/Scrim/Scrim.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import View from "../View/index.js";
-import { classNames } from "../../utilities/props.js";
 import s from "./Scrim.module.css";
 const Scrim = (props) => {
     const { children, backgroundSlot, position = "cover", paddingInline, paddingBlock, padding, borderRadius, attributes, className, scrimClassName, } = props;

package/dist/components/ScrollArea/ScrollArea.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
+import { disableScroll, enableScroll } from "@reshaped/utilities/internal";
 import React, { forwardRef } from "react";
 import useHandlerRef from "../../hooks/useHandlerRef.js";
 import useIsomorphicLayoutEffect from "../../hooks/useIsomorphicLayoutEffect.js";
 import { resolveMixin } from "../../styles/mixin.js";
-import { classNames } from "../../utilities/props.js";
-import { disableScroll, enableScroll } from "../../utilities/scroll/index.js";
 import s from "./ScrollArea.module.css";
 const ScrollAreaBar = (props) => {
     const { ratio, position, vertical, onThumbMove } = props;

package/dist/components/Select/SelectNative.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { classNames } from "@reshaped/utilities";
 import React from "react";
-import { classNames } from "../../utilities/props.js";
 import s from "./Select.module.css";
 import SelectEndContent from "./SelectEndContent.js";
 import SelectStartContent from "./SelectStartContent.js";

package/dist/components/Select/SelectRoot.js

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