reshaped 3.9.1-canary.3 → 3.10.0-canary.5

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,10 +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 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;

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,9 +1,9 @@
 "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 { classNames } from "../../utilities/props.js";
 import { useFlyoutContext, ContentProvider } from "./Flyout.context.js";
 import s from "./Flyout.module.css";
 import cooldown from "./utilities/cooldown.js";

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/Flyout/useFlyout.js

@@ -38,7 +38,7 @@ const useFlyout = (args) => {
             fallbackMinHeight,
             contentGap: (contentGap ?? 0) * unitModifier,
             contentShift: (contentShift ?? 0) * unitModifier,
-            onClose: handleClose,
+            onDeactivate: handleClose,
         };
     }, [
         cachedFallbackPositions,
@@ -60,14 +60,14 @@ const useFlyout = (args) => {
         if (!flyoutOptions)
             return;
         flyoutRef.current = new Flyout(flyoutOptions);
-        const result = flyoutRef.current.open();
+        const result = flyoutRef.current.activate();
         setPosition(result.position);
         setStatus("visible");
     }, [getFlyoutOptions]);
     const remove = useCallback(() => {
         if (!flyoutRef.current)
             return;
-        flyoutRef.current.close();
+        flyoutRef.current.deactivate();
         setStatus("idle");
     }, []);
     const updatePosition = useCallback(() => {

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();

package/dist/components/Skeleton/Skeleton.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 "./Skeleton.module.css";
 const Skeleton = (props) => {
     const { borderRadius = "small", width, height, className, attributes } = props;

package/dist/components/Slider/Slider.utilities.d.ts

@@ -4,3 +4,10 @@ export declare const getDragCoord: ({ event, vertical, }: {
     event: MouseEvent | TouchEvent;
     vertical?: boolean;
 }) => number;
+/**
+ * Workaround for changing a hidden input value with triggering
+ * React input onChange and form onChange handlers
+ *
+ * Based on https://stackoverflow.com/a/60378508
+ */
+export declare const triggerChangeEvent: (el: HTMLInputElement, value: string) => void;

package/dist/components/Slider/Slider.utilities.js

@@ -22,3 +22,14 @@ export const getDragCoord = ({ event, vertical, }) => {
         return event.clientX;
     return event.changedTouches[0].clientX;
 };
+/**
+ * Workaround for changing a hidden input value with triggering
+ * React input onChange and form onChange handlers
+ *
+ * Based on https://stackoverflow.com/a/60378508
+ */
+export const triggerChangeEvent = (el, value) => {
+    const nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, "value").set;
+    nativeInputValueSetter.call(el, value);
+    el.dispatchEvent(new Event("change", { bubbles: true }));
+};