@dreamcommerce/aurora 3.1.28 → 3.1.30

package/build/esm/packages/aurora/src/components/sidebar/components/temporal_sidebar.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
+import React__default, { useRef, useState, useEffect, useLayoutEffect, useImperativeHandle } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 import { SIDEBAR_SIDE } from '../sidebar_constants.js';
@@ -7,7 +7,7 @@ import { useSidebar } from '../hooks/use_sidebar.js';
 import { createPortal } from 'react-dom';
 
 var _excluded = ["children", "container", "className", "width", "side", "closeOnOutsideClick", "onClickOutside", "TriggerButton", "onScroll"];
-var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TemporalSidebar = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     _ref$container = _ref.container,
     container = _ref$container === void 0 ? document.body : _ref$container,
@@ -82,7 +82,7 @@ var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return sidebarRef.current;
   });
   if (destroyed) return null;
-  return /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", _objectSpread2({
+  return /*#__PURE__*/createPortal(/*#__PURE__*/React__default.createElement("div", _objectSpread2({
     className: cn('aurora-absolute aurora-z-20 aurora-top-0 aurora-h-full', {
       'aurora-left-0': side === SIDEBAR_SIDE.left,
       'aurora-right-0': side === SIDEBAR_SIDE.right
@@ -92,7 +92,7 @@ var TemporalSidebar = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       maxWidth: width ? width : 'auto',
       minWidth: width ? width : 'auto'
     }
-  }, props), TriggerButton ? TriggerButton : null, /*#__PURE__*/React.createElement("aside", {
+  }, props), TriggerButton ? TriggerButton : null, /*#__PURE__*/React__default.createElement("aside", {
     onScroll: onScroll,
     ref: sidebarRef,
     className: cn(' aurora-w-full aurora-h-full -aurora-translate-x-full aurora-duration-300 aurora-transition-[transform] aurora-overflow-auto custom-scrollbar', {

package/build/esm/packages/aurora/src/components/sidebar/context/sidebar_context.js

@@ -1,6 +1,6 @@
-import React from 'react';
+import React__default from 'react';
 
-var SidebarContext = /*#__PURE__*/React.createContext(null);
+var SidebarContext = /*#__PURE__*/React__default.createContext(null);
 
 export { SidebarContext };
 //# sourceMappingURL=sidebar_context.js.map

package/build/esm/packages/aurora/src/components/sidebar/hooks/use_sidebar.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { SidebarContext } from '../context/sidebar_context.js';
 
 var useSidebar = function useSidebar() {
-  var context = React.useContext(SidebarContext);
+  var context = React__default.useContext(SidebarContext);
   if (!context) {
     throw new Error('useSidebar must be used within a SidebarProvider.');
   }

package/build/esm/packages/aurora/src/components/sidebar/sidebar.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { SIDEBAR_VARIANTS } from './sidebar_constants.js';
 import { PersistentSidebar } from './components/persistent_sidebar.js';
@@ -14,15 +14,15 @@ var Sidebar = function Sidebar(_ref) {
     defaultOpen = _ref.defaultOpen,
     storageKey = _ref.storageKey,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(SidebarProvider, {
+  return /*#__PURE__*/React__default.createElement(SidebarProvider, {
     variant: variant,
     open: open,
     onOpenChange: onOpenChange,
     defaultOpen: defaultOpen,
     storageKey: storageKey
-  }, variant === SIDEBAR_VARIANTS.persistent ? (/*#__PURE__*/React.createElement(PersistentSidebar, _objectSpread2({
+  }, variant === SIDEBAR_VARIANTS.persistent ? (/*#__PURE__*/React__default.createElement(PersistentSidebar, _objectSpread2({
     variant: variant
-  }, rest), children)) : (/*#__PURE__*/React.createElement(TemporalSidebar, _objectSpread2({
+  }, rest), children)) : (/*#__PURE__*/React__default.createElement(TemporalSidebar, _objectSpread2({
     variant: variant
   }, rest), children)));
 };

package/build/esm/packages/aurora/src/components/stack/stack.js

@@ -1,4 +1,4 @@
-import React, { useRef, useImperativeHandle } from 'react';
+import React__default, { useRef, useImperativeHandle } from 'react';
 import { defineProperty as _defineProperty, objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
@@ -18,7 +18,7 @@ var stackVariants = cva('aurora-flex', {
     shrink: _defineProperty(_defineProperty({}, STACK_SHRINK_TYPES['0'], 'aurora-flex-shrink-0'), STACK_SHRINK_TYPES['1'], 'aurora-flex-shrink')
   }
 });
-var Stack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Stack = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     spacing = _ref.spacing,
     className = _ref.className,
@@ -51,7 +51,7 @@ var Stack = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     return internalRef.current;
   }, []);
   var display = inline ? 'inline' : null;
-  return /*#__PURE__*/React.createElement(as, _objectSpread2({
+  return /*#__PURE__*/React__default.createElement(as, _objectSpread2({
     ref: internalRef,
     className: cn(stackVariants({
       direction: direction,

package/build/esm/packages/aurora/src/components/switch/switch.js

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { Root, SwitchThumb } from '@radix-ui/react-switch';
 
 var _excluded = ["id", "name", "value", "className", "disabled", "checked", "defaultChecked", "errors", "onCheckedChange"];
-var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Switch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     name = _ref.name,
     value = _ref.value,
@@ -16,7 +16,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     errors = _ref$errors === void 0 ? [] : _ref$errors,
     onCheckedChange = _ref.onCheckedChange,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Root, _objectSpread2({
+  return /*#__PURE__*/React__default.createElement(Root, _objectSpread2({
     id: id,
     name: name,
     value: value,
@@ -29,7 +29,7 @@ var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     defaultChecked: defaultChecked,
     checked: checked,
     onCheckedChange: onCheckedChange
-  }, props), /*#__PURE__*/React.createElement(SwitchThumb, {
+  }, props), /*#__PURE__*/React__default.createElement(SwitchThumb, {
     className: cn('aurora-block aurora-w-[16px] aurora-h-[16px] aurora-rounded-full aurora-transition-transform', disabled ? 'aurora-bg-subtle' : 'aurora-bg', 'data-[state=checked]:aurora-translate-x-[18px] aurora-translate-x-[2px]')
   }));
 });

package/build/esm/packages/aurora/src/components/tabs/context/tabs_context.js

@@ -1,7 +1,7 @@
-import React from 'react';
+import React__default from 'react';
 import { TABS_SIZE_TYPES, TABS_VARIANT_TYPES } from '../tabs_constants.js';
 
-var TabsContext = /*#__PURE__*/React.createContext({
+var TabsContext = /*#__PURE__*/React__default.createContext({
   size: TABS_SIZE_TYPES.basic,
   variant: TABS_VARIANT_TYPES.basic
 });

package/build/esm/packages/aurora/src/components/tabs/tabs.js

@@ -1,18 +1,18 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { TabsContext } from './context/tabs_context.js';
 import { Root, Tabs as Tabs$1 } from '@radix-ui/react-tabs';
 
 var _excluded = ["className", "size", "variant", "children"];
-var Tabs = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Tabs = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var className = _ref.className,
     size = _ref.size,
     variant = _ref.variant,
     children = _ref.children,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Root, _objectSpread2({
+  return /*#__PURE__*/React__default.createElement(Root, _objectSpread2({
     ref: ref
-  }, props), /*#__PURE__*/React.createElement(TabsContext.Provider, {
+  }, props), /*#__PURE__*/React__default.createElement(TabsContext.Provider, {
     value: {
       size: size,
       variant: variant

package/build/esm/packages/aurora/src/components/text_area/text_area.js

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 
 var _excluded = ["errors", "className", "id", "name", "value", "placeholder", "disabled", "readOnly", "onChange", "onKeyDown", "onKeyUp"];
-var TextArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var errors = _ref.errors,
     className = _ref.className,
     id = _ref.id,
@@ -17,7 +17,7 @@ var TextArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown = _ref.onKeyDown,
     onKeyUp = _ref.onKeyUp,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("textarea", _objectSpread2(_objectSpread2({}, props), {}, {
+  return /*#__PURE__*/React__default.createElement("textarea", _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     id: id,
     name: name,

package/build/esm/packages/aurora/src/components/toast/components/toast.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 import { Stack } from '../../stack/stack.js';
@@ -17,27 +17,27 @@ var Toast = function Toast(_ref) {
     _ref$closeable = _ref.closeable,
     closeable = _ref$closeable === void 0 ? true : _ref$closeable,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Root, _objectSpread2(_objectSpread2({}, rest), {}, {
+  return /*#__PURE__*/React__default.createElement(Root, _objectSpread2(_objectSpread2({}, rest), {}, {
     className: cn({
       'data-[state=open]:aurora-animate-toast-slide-in-from-right data-[state=closed]:aurora-animate-toast-swipe-out-from-left data-[state=hide]:aurora-animate-toast-hide': slideSide === TOAST_SLIDE_SIDE.fromRight,
       'data-[state=open]:aurora-animate-toast-slide-in-from-bottom data-[state=closed]:aurora-animate-toast-swipe-out-from-top data-[state=hide]:aurora-animate-toast-hide': slideSide === TOAST_SLIDE_SIDE.fromBottom
     })
-  }), /*#__PURE__*/React.createElement(MessageBox, {
+  }), /*#__PURE__*/React__default.createElement(MessageBox, {
     showIcon: true,
     variant: type
-  }, /*#__PURE__*/React.createElement(Stack, {
+  }, /*#__PURE__*/React__default.createElement(Stack, {
     justify: "between",
     align: "start"
-  }, /*#__PURE__*/React.createElement(Box, {
+  }, /*#__PURE__*/React__default.createElement(Box, {
     backgroundColor: "transparent",
     className: "aurora-mt-1"
-  }, children), closeable ? (/*#__PURE__*/React.createElement(Box, {
+  }, children), closeable ? (/*#__PURE__*/React__default.createElement(Box, {
     width: "auto",
     backgroundColor: "transparent",
     paddings: {
       pt: '1'
     }
-  }, /*#__PURE__*/React.createElement(Close, null, /*#__PURE__*/React.createElement(CloseLineIcon, {
+  }, /*#__PURE__*/React__default.createElement(Close, null, /*#__PURE__*/React__default.createElement(CloseLineIcon, {
     size: 16
   })))) : null)));
 };

package/build/esm/packages/aurora/src/components/toast/components/toast_viewport.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 import { Viewport } from '@radix-ui/react-toast';
@@ -10,7 +10,7 @@ var ToastViewport = function ToastViewport(_ref) {
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? TOASTS_SIDE.right : _ref$side,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Viewport, _objectSpread2({
+  return /*#__PURE__*/React__default.createElement(Viewport, _objectSpread2({
     className: cn('aurora-fixed aurora-bottom-0 aurora-list-none aurora-flex aurora-flex-col aurora-gap-2.5 aurora-p-4 aurora-z-[99999]', {
       'aurora-right-0': side === TOASTS_SIDE.right,
       'aurora-left-1/2 -aurora-translate-x-1/2': side === TOASTS_SIDE.center

package/build/esm/packages/aurora/src/components/tree/components/tree_node.js

@@ -1,4 +1,4 @@
-import React, { useRef, Children } from 'react';
+import React__default, { useRef, Children } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 import { ArrowDownSFillIcon } from '../../../assets/icons/arrow_down_s_fill.js';
@@ -26,7 +26,7 @@ var TreeNode = function TreeNode(_ref) {
   var toggleNode = function toggleNode() {
     treeApi.toggleNode(node.id);
   };
-  var Label = LabelComponent ? (/*#__PURE__*/React.createElement("div", {
+  var Label = LabelComponent ? (/*#__PURE__*/React__default.createElement("div", {
     className: cn('aurora-w-full aurora-px-2 aurora-rounded-4 hover:aurora-bg-hover', {
       'hover:aurora-bg-transparent': hasDisabledHover,
       'aurora-bg-hover': isHighlighted
@@ -34,7 +34,7 @@ var TreeNode = function TreeNode(_ref) {
   }, LabelComponent === null || LabelComponent === void 0 ? void 0 : LabelComponent({
     node: node,
     isLeaf: !children
-  }))) : (/*#__PURE__*/React.createElement("div", {
+  }))) : (/*#__PURE__*/React__default.createElement("div", {
     tabIndex: !children ? 0 : -1,
     className: cn('aurora-w-full aurora-px-2 aurora-rounded-4 hover:aurora-bg-hover', {
       'hover:aurora-bg-transparent': hasDisabledHover,
@@ -45,27 +45,27 @@ var TreeNode = function TreeNode(_ref) {
     node: node,
     toggleNode: toggleNode,
     isLeaf: !childrenCount
-  }) : (/*#__PURE__*/React.createElement("div", {
+  }) : (/*#__PURE__*/React__default.createElement("div", {
     className: cn('aurora-flex aurora-items-center aurora-rounded-4 hover:aurora-bg-hover', {
       'hover:aurora-bg-transparent': hasDisabledHover,
       'aurora-bg-hover': isHighlighted
     }, labelClassName)
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement("button", {
     className: "aurora-flex aurora-items-center aurora-p-1 aurora-cursor-pointer",
     onClick: toggleNode
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "aurora-flex"
-  }, /*#__PURE__*/React.createElement(ArrowDownSFillIcon, {
+  }, /*#__PURE__*/React__default.createElement(ArrowDownSFillIcon, {
     className: cn('aurora-h-4 aurora-w-4 aurora-text-inverse-subtle-light -aurora-rotate-90 aurora-transition-transform aurora-duration-200 aurora-ease-out', {
       'aurora-rotate-0': node.expanded
     })
   }))), Label));
-  return /*#__PURE__*/React.createElement("li", {
+  return /*#__PURE__*/React__default.createElement("li", {
     className: cn('aurora-flex aurora-flex-col aurora-gap-2', className),
     role: "treeitem",
     "aria-expanded": node.expanded,
     "data-disabled": !!disabled
-  }, childrenCount ? Content : Label, childrenCount ? (/*#__PURE__*/React.createElement(CSSTransition, {
+  }, childrenCount ? Content : Label, childrenCount ? (/*#__PURE__*/React__default.createElement(CSSTransition, {
     unmountOnExit: true,
     in: node.expanded,
     timeout: 50,
@@ -75,7 +75,7 @@ var TreeNode = function TreeNode(_ref) {
       exit: 'aurora-opacity-100 aurora-scale-100',
       exitActive: 'tree__children-exit-active'
     }
-  }, /*#__PURE__*/React.createElement("ul", {
+  }, /*#__PURE__*/React__default.createElement("ul", {
     className: "aurora-flex aurora-flex-col aurora-gap-2 aurora-pl-4 aurora-scale-100 aurora-origin-top aurora-will-change-auto aurora-duration-200 aurora-ease-out aurora-transition-all aurora-m-0 aurora-p-0 aurora-list-none",
     ref: nodeChildrenRef
   }, children))) : null);

package/build/esm/packages/aurora/src/components/tree/context/tree_provider.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React__default, { useState } from 'react';
 import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { TreeContextProvider } from './tree_context.js';
 
@@ -57,7 +57,7 @@ var TreeProvider = function TreeProvider(_ref) {
       });
     }
   };
-  return /*#__PURE__*/React.createElement(TreeContextProvider, {
+  return /*#__PURE__*/React__default.createElement(TreeContextProvider, {
     value: value
   }, children);
 };

package/build/esm/packages/aurora/src/components/tree/hooks/tree_hook.js

@@ -1,8 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { TreeContext } from '../context/tree_context.js';
 
 var useTree = function useTree() {
-  var context = React.useContext(TreeContext);
+  var context = React__default.useContext(TreeContext);
   if (!context) {
     throw new Error('useTree must be used within a TreeContextProvider');
   }

package/build/esm/packages/aurora/src/components/tree/tree.js

@@ -1,15 +1,15 @@
-import React from 'react';
+import React__default from 'react';
 import { cn } from '../../utilities/cn.js';
 import { TREE_ROLE_ATTRIBUTE } from './constants.js';
 import { TreeProvider } from './context/tree_provider.js';
 
-var Tree = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Tree = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var children = _ref.children,
     cssClassNames = _ref.cssClassNames,
     cssStyles = _ref.cssStyles,
     onMouseEnter = _ref.onMouseEnter,
     onMouseLeave = _ref.onMouseLeave;
-  return /*#__PURE__*/React.createElement(TreeProvider, null, /*#__PURE__*/React.createElement("ul", {
+  return /*#__PURE__*/React__default.createElement(TreeProvider, null, /*#__PURE__*/React__default.createElement("ul", {
     role: TREE_ROLE_ATTRIBUTE,
     onMouseEnter: onMouseEnter,
     onMouseLeave: onMouseLeave,

package/build/esm/packages/aurora/src/components/typography/typography.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { typographyVariants } from './typography_variants.js';
@@ -17,7 +17,7 @@ var Typography = function Typography(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(as, _objectSpread2({
+  return /*#__PURE__*/React__default.createElement(as, _objectSpread2({
     className: cn(typographyVariants({
       variant: variant,
       transform: transform,

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { TValuesSyncerProps } from './values_syncer_types';
-export declare const ValuesSyncer: <T>({ firstControl, secondControl, firstValue, secondValue, isLocked, onLock, disableLockButton, onChange, className }: TValuesSyncerProps<T>) => React.JSX.Element;
+export declare const ValuesSyncer: React.ForwardRefExoticComponent<TValuesSyncerProps<unknown> & React.RefAttributes<HTMLDivElement>>;

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.js

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import React__default, { useState, useRef, useCallback, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { CSS_ICON_COLOR_TOKENS_VALUES } from '../../constants/css_tokens/css_icon_color_tokens.js';
 import { cn } from '../../utilities/cn.js';
@@ -6,7 +6,7 @@ import { Stack } from '../stack/stack.js';
 import { LockLineIcon } from '../../assets/icons/lock_icon.js';
 import { LockUnlockLineIcon } from '../../assets/icons/lock_unlock_icon.js';
 
-var ValuesSyncer = function ValuesSyncer(_ref) {
+var ValuesSyncerInternal = function ValuesSyncerInternal(_ref, ref) {
   var firstControl = _ref.firstControl,
     secondControl = _ref.secondControl,
     firstValue = _ref.firstValue,
@@ -83,25 +83,28 @@ var ValuesSyncer = function ValuesSyncer(_ref) {
       handleLockedChange(false);
     }
   }, [firstValue, secondValue, handleLockedChange]);
-  return /*#__PURE__*/React.createElement(Stack, {
+  return /*#__PURE__*/React__default.createElement(Stack, {
     spacing: "3",
     align: "end",
-    className: cn('aurora-items-end', className)
-  }, firstControl(firstValue, handleFirstControlChange), /*#__PURE__*/React.createElement("button", {
+    className: cn('aurora-items-end', className),
+    ref: ref
+  }, firstControl(firstValue, handleFirstControlChange), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     disabled: disableLockButton,
     className: cn(locked ? 'aurora-bg-hover aurora-rounded-4' : 'hover:aurora-bg-hover', disableLockButton && 'aurora-bg-subtle', 'aurora-h-6 aurora-w-6 aurora-p-1 aurora-mb-2 aurora-rounded-4 focus'),
     onClick: function onClick() {
       return handleLockedChange(!locked);
     }
-  }, locked ? (/*#__PURE__*/React.createElement(LockLineIcon, {
+  }, locked ? (/*#__PURE__*/React__default.createElement(LockLineIcon, {
     className: "aurora-h-4 aurora-w-4",
     color: !disableLockButton ? CSS_ICON_COLOR_TOKENS_VALUES.primary : CSS_ICON_COLOR_TOKENS_VALUES.subtle
-  })) : (/*#__PURE__*/React.createElement(LockUnlockLineIcon, {
+  })) : (/*#__PURE__*/React__default.createElement(LockUnlockLineIcon, {
     className: "aurora-h-4 aurora-w-4",
     color: !disableLockButton ? CSS_ICON_COLOR_TOKENS_VALUES.base : CSS_ICON_COLOR_TOKENS_VALUES.subtle
   }))), secondControl(secondValue, handleSecondControlChange));
 };
+var ValuesSyncer = /*#__PURE__*/React__default.forwardRef(ValuesSyncerInternal);
+ValuesSyncer.displayName = 'ValuesSyncer';
 
 export { ValuesSyncer };
 //# sourceMappingURL=values_syncer.js.map

package/build/esm/packages/aurora/src/components/values_syncer/values_syncer.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/xhr_image_picker/xhr_image_picker.d.ts

@@ -1,3 +1,3 @@
 import { IXhrImagePickerProps } from './xhr_image_picker_types';
 import React from 'react';
-export declare const XhrImagePicker: React.ForwardRefExoticComponent<IXhrImagePickerProps & React.RefAttributes<HTMLButtonElement>>;
+export declare const XhrImagePicker: React.ForwardRefExoticComponent<IXhrImagePickerProps & React.RefAttributes<HTMLDivElement>>;

package/build/esm/packages/aurora/src/components/xhr_image_picker/xhr_image_picker.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
 import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Loader } from '../loader/loader.js';
@@ -29,7 +29,7 @@ var XhrImagePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
   var httpApi = useHttpApi();
-  var pendingRequestRef = React.useRef();
+  var pendingRequestRef = React__default.useRef();
   var initialImageFile = useRef();
   var _useModalsContext = useModalsContext(),
     showModal = _useModalsContext.showModal,
@@ -187,17 +187,17 @@ var XhrImagePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     };
   }, []);
   var renderImageEditor = function renderImageEditor(defaultProps) {
-    return ImageEditor ? (/*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageEditor, _objectSpread2({}, defaultProps)))) : null;
+    return ImageEditor ? (/*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ImageEditor, _objectSpread2({}, defaultProps)))) : null;
   };
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-relative"
-  }, isLoading && (/*#__PURE__*/React.createElement("div", {
+  }, isLoading && (/*#__PURE__*/React__default.createElement("div", {
     className: "aurora-absolute aurora-z-30 aurora-h-full aurora-w-full"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-bg aurora-h-full aurora-w-full aurora-border aurora-border-dashed aurora-rounded-8 aurora-flex aurora-flex-col aurora-items-center aurora-justify-center"
-  }, /*#__PURE__*/React.createElement(Loader, null), /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement(Loader, null), /*#__PURE__*/React__default.createElement("span", {
     className: "aurora-text-subtle-light aurora-text-xs aurora-pt-2"
-  }, "".concat(t('Transfering file...')))))), /*#__PURE__*/React.createElement(ImagePicker, {
+  }, "".concat(t('Transfering file...')))))), /*#__PURE__*/React__default.createElement(ImagePicker, {
     id: id,
     name: name,
     onChange: handleControlChange,
@@ -207,7 +207,7 @@ var XhrImagePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     allowedExtensionsLabel: allowedExtensionsLabel,
     initialFile: initialImageFile.current,
     onImageSizeUpdated: onImageSizeUpdated,
-    topButtons: !!ImageEditor && imageExtenstion !== 'svg' && (/*#__PURE__*/React.createElement("button", {
+    topButtons: !!ImageEditor && imageExtenstion !== 'svg' && (/*#__PURE__*/React__default.createElement("button", {
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -215,16 +215,16 @@ var XhrImagePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
       },
       type: "button",
       className: "aurora-absolute aurora-top-2 aurora-right-2 aurora-z-10 aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-rounded-full aurora-px-3 aurora-py-[6px] aurora-bg"
-    }, /*#__PURE__*/React.createElement(ImageEditLineIcon, {
+    }, /*#__PURE__*/React__default.createElement(ImageEditLineIcon, {
       className: "aurora-w-4 aurora-h-4 aurora-fill"
-    }), /*#__PURE__*/React.createElement("span", {
+    }), /*#__PURE__*/React__default.createElement("span", {
       className: "aurora-text-xs aurora-text aurora-font-semibold"
     }, "".concat(t('Edit'))))),
     editedImageResult: imageEditorResult,
     ref: ref
-  })), !!ImageEditor && (/*#__PURE__*/React.createElement(Modal, {
+  })), !!ImageEditor && (/*#__PURE__*/React__default.createElement(Modal, {
     name: modalId,
-    header: /*#__PURE__*/React.createElement(React.Fragment, null, t('Edit image')),
+    header: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, t('Edit image')),
     width: "l"
   }, renderImageEditor({
     src: imageEditorSrc,

package/build/esm/packages/aurora/src/hooks/use_scroll.d.ts

@@ -2,4 +2,5 @@ import { RefObject } from 'react';
 export declare function useScroll(elRef: RefObject<HTMLDivElement | null>): {
     atTop: boolean;
     atBottom: boolean;
+    hasScroll: boolean;
 };

package/build/esm/packages/aurora/src/hooks/use_scroll.js

@@ -1,4 +1,4 @@
-import { useState, useEffect, useMemo } from 'react';
+import { useState, useEffect, useLayoutEffect, useMemo } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
 
 function useScroll(elRef) {
@@ -10,6 +10,10 @@ function useScroll(elRef) {
     _useState4 = _slicedToArray(_useState3, 2),
     atBottom = _useState4[0],
     setAtBottom = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    hasScroll = _useState6[0],
+    setHasScroll = _useState6[1];
   useEffect(function () {
     var element = elRef.current;
     if (!element) return;
@@ -25,12 +29,35 @@ function useScroll(elRef) {
       return element.removeEventListener('scroll', handleScroll);
     };
   }, [elRef]);
+  useLayoutEffect(function () {
+    var element = elRef.current;
+    if (!element) return;
+    function getScroll() {
+      if (!element) return;
+      var hasScroll = element.scrollHeight > element.clientHeight;
+      setHasScroll(hasScroll);
+    }
+    var resizeObserver = new ResizeObserver(getScroll);
+    var mutationObserver = new MutationObserver(getScroll);
+    resizeObserver.observe(element);
+    mutationObserver.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+    getScroll();
+    return function () {
+      resizeObserver.disconnect();
+      mutationObserver.disconnect();
+    };
+  }, [elRef]);
   return useMemo(function () {
     return {
       atTop: atTop,
-      atBottom: atBottom
+      atBottom: atBottom,
+      hasScroll: hasScroll
     };
-  }, [atTop, atBottom]);
+  }, [atTop, atBottom, hasScroll]);
 }
 
 export { useScroll };

package/build/esm/packages/aurora/src/hooks/use_scroll.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/index.js

@@ -79,6 +79,7 @@ export { PopoverTrigger } from './components/popover/components/popover_trigger.
 export { LINK_DECORATION_TYPES, LINK_SIZE_TYPES, LINK_VARIANT_TYPES } from './components/link/link_constants.js';
 export { Link } from './components/link/link.js';
 export { useModalsContext } from './components/modal/hooks/use_modals_context.js';
+export { useScroll } from './hooks/use_scroll.js';
 export { Modal } from './components/modal/components/modal/modal.js';
 export { ModalsManager } from './components/modal/modals_manager.js';
 export { MESSAGE_BOX_ICONS, MESSAGE_BOX_ICON_COLORS, MESSAGE_BOX_VARIANTS } from './components/message_box/message_box_constants.js';
@@ -113,7 +114,6 @@ export { XhrImagePickerControl } from './components/controls/xhr_image_picker_co
 export { ValuesSyncer } from './components/values_syncer/values_syncer.js';
 export { ValuesSyncerControl } from './components/controls/values_syncer_control/values_syncer_control.js';
 export { useToggle } from './hooks/use_toggle.js';
-export { useScroll } from './hooks/use_scroll.js';
 export { useTimeout } from './hooks/use_timeout.js';
 export { useResizeObserver } from './hooks/use_resize_observer.js';
 export { Tree } from './components/tree/tree.js';