@dreamcommerce/aurora 2.26.0 → 2.27.0

package/build/cjs/packages/aurora/src/hooks/use_screen_detect.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../_virtual/_rollupPluginBabelHelpers.js');
-var use_resize = require('./use_resize.js');
 var responsive_breakpoints = require('../constants/responsive_breakpoints.js');
+var use_resize = require('./use_resize.js');
 
 var useScreenDetect = function useScreenDetect() {
   var _useState = React.useState(''),

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

@@ -3,22 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var constants = require('./components/color_picker_new/constants.js');
+var use_click_outside = require('./hooks/use_click_outside.js');
+var use_toggle = require('./components/dropdown/hooks/use_toggle.js');
+var index$7 = require('./components/stack/index.js');
+var values_syncer = require('./components/controls/components/values_syncer.js');
 var index$u = require('./components/modal/hoc/absolute_modal/index.js');
 var constants$1 = require('./components/accordion/constants.js');
 var use_accordions_group_api = require('./components/accordions_group/hooks/use_accordions_group_api.js');
-var index$7 = require('./components/stack/index.js');
 var index = require('./components/accordion/index.js');
 var index$S = require('./components/breadcrumbs/index.js');
 var index$1 = require('./components/button/index.js');
 var index$3 = require('./components/buttons_group/index.js');
 var index$B = require('./components/dropdown/context/index.js');
 var index$j = require('./components/color_picker/index.js');
-var use_click_outside = require('./hooks/use_click_outside.js');
 var icon_arrow = require('./assets/icon_arrow.js');
 var icon_tick = require('./assets/icon_tick.js');
 var index$6 = require('./components/label/index.js');
 var index$8 = require('./components/controls/index.js');
-var use_toggle = require('./components/dropdown/hooks/use_toggle.js');
 var index$H = require('./components/hint/index.js');
 var index$a = require('./components/controls/hoc/control_checkbox/index.js');
 var dropdown = require('./components/dropdown/components/dropdown.js');
@@ -54,6 +55,7 @@ var index$P = require('./components/xhr_image_picker/index.js');
 var index$p = require('./components/controls/hoc/control_xhr_image_picker/index.js');
 var index$z = require('./components/table/index.js');
 var dataTable = require('./components/table/hoc/data-table.js');
+var index$T = require('./components/controls/hoc/control_values_syncer/index.js');
 var index$C = require('./components/dropdown/index.js');
 var context = require('./components/flash_messenger/context.js');
 var index$J = require('./components/message-box/index.js');
@@ -96,20 +98,22 @@ var tabs_wrapper = require('./components/tabs/components/tabs_wrapper.js');
 var index$Q = require('./components/tree/index.js');
 var tree_hook = require('./components/tree/hooks/tree_hook.js');
 var tree_node = require('./components/tree/components/tree_node.js');
-var values_syncer = require('./components/controls/components/values_syncer.js');
 var index$M = require('./components/with_loader/index.js');
-var index$T = require('./components/accordions_group/index.js');
+var index$U = require('./components/accordions_group/index.js');
 var accordions_group_toggler = require('./components/accordions_group/components/accordions_group_toggler.js');
 
 
 
 exports.GRADIENT_RADIAL_SHAPES = constants.GRADIENT_RADIAL_SHAPES;
 exports.GRADIENT_TYPES = constants.GRADIENT_TYPES;
+exports.useClickOutside = use_click_outside.useClickOutside;
+exports.useToggle = use_toggle.useToggle;
+exports.Stack = index$7['default'];
+exports.ValuesSyncer = values_syncer['default'];
 exports.AbsoluteModal = index$u['default'];
 exports.ACCORDION_TOGGLER_ICON_POSITION = constants$1.ACCORDION_TOGGLER_ICON_POSITION;
 exports.ACCORDION_VARIANTS = constants$1.ACCORDION_VARIANTS;
 exports.useAccordionsGroupApi = use_accordions_group_api.useAccordionsGroupApi;
-exports.Stack = index$7['default'];
 exports.Accordion = index['default'];
 exports.Breadcrumbs = index$S.Breadcrumbs;
 exports.Button = index$1['default'];
@@ -117,12 +121,10 @@ exports.ButtonsGroup = index$3['default'];
 exports.DropdownContext = index$B.DropdownContext;
 exports.useDropdownContext = index$B.useDropdownContext;
 exports.ColorPicker = index$j['default'];
-exports.useClickOutside = use_click_outside.useClickOutside;
 exports.IconArrow = icon_arrow['default'];
 exports.IconTick = icon_tick['default'];
 exports.Label = index$6['default'];
 exports.Control = index$8['default'];
-exports.useToggle = use_toggle.useToggle;
 exports.Hint = index$H['default'];
 exports.ControlCheckbox = index$a['default'];
 exports.Dropdown = dropdown['default'];
@@ -158,6 +160,7 @@ exports.XhrImagePicker = index$P['default'];
 exports.ControlXhrImagePicker = index$p['default'];
 exports.Table = index$z['default'];
 exports.DataTable = dataTable['default'];
+exports.ControlValuesSyncer = index$T['default'];
 exports.DropdownsManager = index$C['default'];
 exports.FlashMessengerContext = context.FlashMessengerContext;
 exports.useFlashMessenger = context.useFlashMessenger;
@@ -201,8 +204,7 @@ exports.TabsWrapper = tabs_wrapper['default'];
 exports.Tree = index$Q.Tree;
 exports.useTree = tree_hook.useTree;
 exports.TreeNode = tree_node.TreeNode;
-exports.ValuesSyncer = values_syncer['default'];
 exports.WithLoader = index$M['default'];
-exports.AccordionsGroup = index$T.AccordionsGroup;
+exports.AccordionsGroup = index$U.AccordionsGroup;
 exports.AccordionsGroupToggler = accordions_group_toggler.AccordionsGroupToggler;
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/index.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;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;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/accordion/index.js

@@ -1,12 +1,12 @@
 import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import classnames from 'classnames';
+import Stack from '../stack/index.js';
 import CSS_CLASSES from './css_classes.js';
 import { ACCORDION_VARIANTS, ACCORDION_TOGGLER_ICON_POSITION } from './constants.js';
 import IconArrowDown from '../../assets/icon_arrow_down.js';
 import cssClasses from '../../css/accordion/main.module.less.js';
 import { useAccordionsGroupApi } from '../accordions_group/hooks/use_accordions_group_api.js';
-import Stack from '../stack/index.js';
 
 var Accordion = function Accordion(_ref) {
   var id = _ref.id,

package/build/esm/packages/aurora/src/components/color_picker/components/buttons.js

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
 import Button from '../../button/index.js';
 import ButtonsGroup from '../../buttons_group/index.js';
 import { cssColorPickerButtonsGroup } from '../css_classes.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
-import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
 import styles from '../../../css/color_picker/main.module.less.js';
 
 var ColorPickerButtons = function ColorPickerButtons(_ref) {

package/build/esm/packages/aurora/src/components/color_picker/use_color_picker.js

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { SATURATION_OFFSET } from './constants.js';
 import { useScreenDetect } from '../../hooks/use_screen_detect.js';
+import { SATURATION_OFFSET } from './constants.js';
 
 var useColorPicker = function useColorPicker(_ref) {
   var initialColorHex = _ref.initialColorHex,

package/build/esm/packages/aurora/src/components/controls/components/checkbox.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import classnames from 'classnames';
 import { checkbox, checkboxDisabled, checkboxControl, checkboxLabel, checkboxIcon } from '../css_classes.js';
+import classnames from 'classnames';
 import cssClasses from '../../../css/checkbox/main.module.less.js';
 import IconTick from '../../../assets/icon_tick.js';
 

package/build/esm/packages/aurora/src/components/controls/components/checkbox_switch.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import classnames from 'classnames';
 import { checkboxSwitch, checkboxSwitchDisabled, checkboxSwitchControl, checkboxSwitchLabel, checkboxSwitchIcon } from '../css_classes.js';
+import classnames from 'classnames';
 import cssClasses from '../../../css/checkbox/main.module.less.js';
 import IconTick from '../../../assets/icon_tick.js';
 

package/build/esm/packages/aurora/src/components/controls/components/element.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { VERTICAL_POSITION } from '../../../constants/positions.js';
-import classnames from 'classnames';
 import { cssControlsElement, cssControlsElementVerticalAlignTop, cssControlsElementPrefix, cssControlsElementPostfix, cssControlsElementCheckbox, cssControlsElementRadio } from '../css_classes.js';
+import classnames from 'classnames';
 import cssStyles from '../../../css/controls/main.module.less.js';
 
 var Element = function Element(_ref) {

package/build/esm/packages/aurora/src/components/controls/components/input.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import classnames from 'classnames';
 import { cssControl, cssControlPreElement, cssControlS, cssControlError, cssControlDisabled, cssControlReadonly } from '../css_classes.js';
+import classnames from 'classnames';
+import cssStyles from '../../../css/controls/main.module.less.js';
 import inputCssClasses from '../../../css/input/main.module.less.js';
 import { useControlContext } from '../context.js';
-import cssStyles from '../../../css/controls/main.module.less.js';
 
 var _excluded = ["id", "name", "padding", "placeholder", "value", "disabled", "readOnly", "onChange", "onKeyPress", "onKeyUp", "children", "preElement"];
 

package/build/esm/packages/aurora/src/components/controls/components/input_wrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import classnames from 'classnames';
 import { cssControl, cssControlWrapper, cssControlError, cssControlS, cssControlFocus, cssControlDisabled, cssControlReadonly, cssControlInput } from '../css_classes.js';
+import classnames from 'classnames';
 import inputCssClasses from '../../../css/input/main.module.less.js';
 import { useControlContext } from '../context.js';
 

package/build/esm/packages/aurora/src/components/controls/components/radio.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import classnames from 'classnames';
 import { radio, radioDisabled, radioControl, radioLabel } from '../css_classes.js';
+import classnames from 'classnames';
 import cssStyles from '../../../css/radio/main.module.less.js';
 import { classNames } from '../../../utilities/styles/classNames.js';
 

package/build/esm/packages/aurora/src/components/controls/components/textarea.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import classnames from 'classnames';
 import { cssControl, cssControlReadonly, cssControlS, cssControlDisabled } from '../css_classes.js';
+import classnames from 'classnames';
 import inputCssClasses from '../../../css/input/main.module.less.js';
 
 var _excluded = ["id", "name", "padding", "placeholder", "value", "disabled", "readOnly", "onChange", "onKeyPress"];

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

@@ -1,11 +1,17 @@
 import React from 'react';
-export declare type TChildrenRenderProps = {
+export declare type TValuesSyncerProps = {
     firstControl: (value: unknown, setValue: (value: unknown) => void) => React.ReactNode;
     secondControl: (value: unknown, setValue: (value: unknown) => void) => React.ReactNode;
     initialFirstValue?: unknown;
     initialSecondValue?: unknown;
     cssClasses?: string;
-    onChange?: (isLocked: boolean) => void;
+    onLock?: (isLocked: boolean) => void;
+    isLocked?: boolean;
+    onChange?: (props: {
+        first: unknown;
+        second: unknown;
+        isLocked: boolean;
+    }) => void;
 };
-declare const ValuesSyncer: ({ firstControl, secondControl, initialFirstValue, initialSecondValue, cssClasses, onChange }: TChildrenRenderProps) => JSX.Element;
+declare const ValuesSyncer: ({ firstControl, secondControl, initialFirstValue, initialSecondValue, onLock, isLocked, onChange }: TValuesSyncerProps) => JSX.Element;
 export default ValuesSyncer;

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

@@ -1,20 +1,23 @@
 import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import classnames from 'classnames';
-import { valuesSyncer, valuesSyncerLockButton } from '../css_classes.js';
 import { useToggle } from '../../dropdown/hooks/use_toggle.js';
 import LockClosed from '../../../assets/lock_closed.js';
 import LockOpened from '../../../assets/lock_opened.js';
+import { valuesSyncerLockButton } from '../css_classes.js';
+import { STACK_ALIGNMENTS } from '../../stack/stack_constants.js';
+import Stack from '../../stack/index.js';
+import cssStyles from '../../../css/controls/main.module.less.js';
 
 var ValuesSyncer = function ValuesSyncer(_ref) {
   var firstControl = _ref.firstControl,
       secondControl = _ref.secondControl,
       initialFirstValue = _ref.initialFirstValue,
       initialSecondValue = _ref.initialSecondValue,
-      cssClasses = _ref.cssClasses,
+      onLock = _ref.onLock,
+      isLocked = _ref.isLocked,
       onChange = _ref.onChange;
 
-  var _useToggle = useToggle(false),
+  var _useToggle = useToggle(isLocked),
       _useToggle2 = _slicedToArray(_useToggle, 2),
       locked = _useToggle2[0],
       toggleLock = _useToggle2[1];
@@ -30,8 +33,23 @@ var ValuesSyncer = function ValuesSyncer(_ref) {
       setSecondControlValue = _useState4[1];
 
   useEffect(function () {
-    onChange === null || onChange === void 0 || onChange(locked);
-  }, [locked, onChange]);
+    onLock === null || onLock === void 0 || onLock(locked);
+
+    if (locked) {
+      setSecondControlValue(firstControlValue);
+    }
+  }, [locked, onLock, firstControlValue]);
+  useEffect(function () {
+    setFirstControlValue(initialFirstValue);
+    setSecondControlValue(initialSecondValue);
+  }, [initialSecondValue, initialFirstValue]);
+  useEffect(function () {
+    onChange === null || onChange === void 0 || onChange({
+      first: firstControlValue,
+      second: secondControlValue,
+      isLocked: locked
+    });
+  }, [firstControlValue, secondControlValue]);
 
   var setFirstControl = function setFirstControl(value) {
     setFirstControlValue(value);
@@ -49,10 +67,11 @@ var ValuesSyncer = function ValuesSyncer(_ref) {
     }
   };
 
-  return /*#__PURE__*/React.createElement("div", {
-    className: classnames(valuesSyncer, cssClasses)
+  return /*#__PURE__*/React.createElement(Stack, {
+    spacing: 16,
+    align: STACK_ALIGNMENTS.end
   }, firstControl(firstControlValue, setFirstControl), /*#__PURE__*/React.createElement("button", {
-    className: valuesSyncerLockButton,
+    className: cssStyles[valuesSyncerLockButton],
     "aria-label": "Lock values",
     type: "button",
     onClick: toggleLock

package/build/esm/packages/aurora/src/components/controls/components/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/controls/hoc/control_values_syncer/index.d.ts

@@ -0,0 +1,4 @@
+import { IControlValuesSyncerProps } from '../../types';
+import React from 'react';
+declare const ControlValuesSyncer: React.FC<IControlValuesSyncerProps>;
+export default ControlValuesSyncer;

package/build/esm/packages/aurora/src/components/controls/hoc/control_values_syncer/index.js

@@ -0,0 +1,43 @@
+import React from 'react';
+import ValuesSyncer from '../../components/values_syncer.js';
+import Control from '../../index.js';
+import Hint from '../../../hint/index.js';
+
+var ControlValuesSyncer = function ControlValuesSyncer(_ref) {
+  var label = _ref.label,
+      id = _ref.id,
+      name = _ref.name,
+      onLock = _ref.onLock,
+      hint = _ref.hint,
+      errors = _ref.errors,
+      labelAdditionalInfo = _ref.labelAdditionalInfo,
+      additionalInfo = _ref.additionalInfo,
+      firstControl = _ref.firstControl,
+      secondControl = _ref.secondControl,
+      isLocked = _ref.isLocked,
+      onChange = _ref.onChange,
+      initialFirstValue = _ref.initialFirstValue,
+      initialSecondValue = _ref.initialSecondValue;
+  return /*#__PURE__*/React.createElement(Control, {
+    errors: errors,
+    name: name,
+    id: id
+  }, (label || hint) && /*#__PURE__*/React.createElement(Control.Label, {
+    id: id,
+    additionalInfo: labelAdditionalInfo
+  }, label, hint && /*#__PURE__*/React.createElement(Hint, {
+    hint: hint,
+    spacingLeft: true
+  })), /*#__PURE__*/React.createElement(Control.Content, null, /*#__PURE__*/React.createElement(Control.Element, null, /*#__PURE__*/React.createElement(ValuesSyncer, {
+    firstControl: firstControl,
+    secondControl: secondControl,
+    initialFirstValue: initialFirstValue,
+    initialSecondValue: initialSecondValue,
+    onLock: onLock,
+    isLocked: isLocked,
+    onChange: onChange
+  }))), /*#__PURE__*/React.createElement(Control.Errors, null), additionalInfo && /*#__PURE__*/React.createElement(Control.AdditionalInfo, null, additionalInfo));
+};
+
+export default ControlValuesSyncer;
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/controls/hoc/control_values_syncer/index.js.map

@@ -0,0 +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;"}

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { cssControls, cssControlsError } from './css_classes.js';
-import { ControlContext } from './context.js';
 import cssStyles from '../../css/controls/main.module.less.js';
+import { ControlContext } from './context.js';
 import Input from './components/input.js';
 import { AdditionalInfo } from './components/additional_info.js';
 import Checkbox from './components/checkbox.js';

package/build/esm/packages/aurora/src/components/controls/types.d.ts

@@ -8,6 +8,7 @@ import { IRange } from "../range/types";
 import React from 'react';
 import { TVerticalPosition } from "../../typings/general";
 import { TUploadedImageData } from "../xhr_image_picker/types";
+import { TValuesSyncerProps } from "./components/values_syncer";
 export declare type TControlErrors = string[] | null | undefined;
 export interface IControlContext {
     errors?: TControlErrors;
@@ -107,6 +108,12 @@ export interface IControlInputProps extends IInputProps, IControlCommonProps {
     isRequired?: boolean;
     labelAdditionalInfo?: string | ReactNode;
 }
+export interface IControlValuesSyncerProps extends IControlCommonProps, TValuesSyncerProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    labelAdditionalInfo?: string | ReactNode;
+}
 export interface IControlCheckboxProps extends ICheckboxProps, IControlCommonProps {
     label: string;
     labelAdditionalInfo?: string | ReactNode;

package/build/esm/packages/aurora/src/components/controls/types.js

@@ -8,4 +8,5 @@ import '@auroraComponents/range/types';
 import 'react';
 import '@auroraTypings/general';
 import '@auroraComponents/xhr_image_picker/types';
+import '@auroraComponents/controls/components/values_syncer';
 //# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/controls/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA0G,OAAO,CAAC;AAClH,OAAoD,qCAAqC,CAAC;AAC1F,OAAyC,sCAAsC,CAAC;AAChF,OAAgD,kCAAkC,CAAC;AAEnF,OAAqC,0CAA0C,CAAC;AAChF,OAAkC,sCAAsC,CAAC;AACzE,OAAuB,+BAA+B,CAAC;AACvD,OAAkB,OAAO,CAAC;AAC1B,OAAkC,wBAAwB,CAAC;AAC3D,OAAmC,0CAA0C,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/controls/types.ts"],"names":[],"mappings":"AAAA,OAA0G,OAAO,CAAC;AAClH,OAAoD,qCAAqC,CAAC;AAC1F,OAAyC,sCAAsC,CAAC;AAChF,OAAgD,kCAAkC,CAAC;AAEnF,OAAqC,0CAA0C,CAAC;AAChF,OAAkC,sCAAsC,CAAC;AACzE,OAAuB,+BAA+B,CAAC;AACvD,OAAkB,OAAO,CAAC;AAC1B,OAAkC,wBAAwB,CAAC;AAC3D,OAAmC,0CAA0C,CAAC;AAC9E,OAAmC,qDAAqD,CAAC"}

package/build/esm/packages/aurora/src/components/date_picker/components/buttons.js

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
 import Button from '../../button/index.js';
 import ButtonsGroup from '../../buttons_group/index.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
-import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
 import DatepickerContext from '../context/value_controller_context.js';
 
 var Buttons = function Buttons() {

package/build/esm/packages/aurora/src/components/dropdown/components/content.js

@@ -1,19 +1,19 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useClickOutside } from '../../../hooks/use_click_outside.js';
+import { SCREEN_XS } from '../../../constants/responsive_breakpoints.js';
+import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
+import cssClasses$3 from '../../../css/icons/main.module.less.js';
 import classnames from 'classnames';
 import { createPortal } from 'react-dom';
-import cssClasses$3 from '../../../css/icons/main.module.less.js';
 import { useDropdownContext } from '../context/index.js';
-import { SCREEN_XS } from '../../../constants/responsive_breakpoints.js';
-import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
 import withTranslation from '../../../utilities/translation/with_translation.js';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
 import { DROPDOWN_Z_INDEX, DROPDOWN_CONTENT_ARROW_HEIGHT, DROPDOWN_ON_MODAL_Z_INDEX } from '../constants.js';
 import { jsDropdownContentClass, cssDropdownContent, cssDropdownContentOnTop, cssDropdownContentOnBottom, cssDropdownArrowHorizontalDirectionRight, cssDropdownArrowVerticalDirectionBottom, cssDropdownHeader, cssDropdownHeaderContent, cssDropdownHeaderTitle } from '../css_classes.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
 import { getBounding, getXYModifiersForNestedDropdowns, isChildOfModal } from '../utilities.js';
-import { useClickOutside } from '../../../hooks/use_click_outside.js';
 import IconArrow from '../../../assets/icon_arrow.js';
 import { UiDomUtils } from '@dreamcommerce/utilities';
 import cssClasses$1 from '../../../css/hint/main.module.less.js';

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

@@ -1,5 +1,6 @@
 import React, { useRef } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useToggle } from '../hooks/use_toggle.js';
 import { DropdownContext } from '../context/index.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
 import { useDropdownsManagerContext } from '../hooks/use_dropdowns_manager_context.js';
@@ -12,7 +13,6 @@ import Label from './label.js';
 import Link from './link.js';
 import List from './list.js';
 import Option from './option.js';
-import { useToggle } from '../hooks/use_toggle.js';
 import OptionMultiple from './option_multiple.js';
 import Search from './search.js';
 import Select from './select.js';

package/build/esm/packages/aurora/src/components/dropdown/components/select.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
-import { useDropdownContext } from '../context/index.js';
 import { cssControlInputRemoveButton } from '../../controls/css_classes.js';
+import { useDropdownContext } from '../context/index.js';
 import inputCssClasses from '../../../css/input/main.module.less.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
 import { filterOptionDuplicatesByProperty } from '../utilities.js';

package/build/esm/packages/aurora/src/components/dropdown/hoc/multiselect/index.js

@@ -1,12 +1,12 @@
 import React, { useRef, useState } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useValues } from '../../hooks/use_values.js';
+import { useToggle } from '../../hooks/use_toggle.js';
+import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
 import { DropdownContext } from '../../context/index.js';
 import { cssDropdown } from '../../css_classes.js';
 import cssClasses from '../../../../css/dropdown/main.module.less.js';
 import { handleSearchKeyUp, isSelected, handleItemClick } from '../../utilities.js';
-import { useValues } from '../../hooks/use_values.js';
-import { useToggle } from '../../hooks/use_toggle.js';
-import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
 import Dropdown from '../../components/dropdown.js';
 
 /**

package/build/esm/packages/aurora/src/components/dropdown/hoc/select/index.js

@@ -1,12 +1,12 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useValue } from '../../hooks/use_value.js';
+import { useToggle } from '../../hooks/use_toggle.js';
+import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
 import { DropdownContext } from '../../context/index.js';
 import { cssDropdown } from '../../css_classes.js';
 import cssClasses from '../../../../css/dropdown/main.module.less.js';
 import { handleSearchKeyUp, isSelected, handleItemClick } from '../../utilities.js';
-import { useValue } from '../../hooks/use_value.js';
-import { useToggle } from '../../hooks/use_toggle.js';
-import { useSetOptionsOnClose } from '../../hooks/use_set_options_on_close.js';
 import Dropdown from '../../components/dropdown.js';
 
 /**

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

@@ -1,10 +1,10 @@
 import React, { useRef } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useToggle } from '../dropdown/hooks/use_toggle.js';
 import { DropdownContext } from '../dropdown/context/index.js';
 import cssClasses from '../../css/hint/main.module.less.js';
 import { classNames } from '../../utilities/styles/classNames.js';
 import IconHint from '../../assets/icon_hint.js';
-import { useToggle } from '../dropdown/hooks/use_toggle.js';
 import Dropdown from '../dropdown/components/dropdown.js';
 
 var Hint = function Hint(_ref) {

package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js

@@ -1,13 +1,13 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useResize } from '../../../../hooks/use_resize.js';
+import classnames from 'classnames';
 import { calculateAbsolutePosition, getTransformFromAnimationDirection } from '../../utilities.js';
 import { DEFAULT_TRANSLATE_MOVE } from '../../constants.js';
 import cssClasses from '../../../../css/modal/main.module.less.js';
 import Modal from '../../components/modal.js';
-import classnames from 'classnames';
 import { createPortal } from 'react-dom';
 import { createUseStyles } from '../../../../../../../external/react-jss/dist/react-jss.esm.js';
-import { useResize } from '../../../../hooks/use_resize.js';
 
 var _excluded = ["vPosition", "hPosition", "offset", "transform", "transformLength", "children", "animationDirection", "isVisible", "style", "withBackground"];
 var useStyles = createUseStyles({

package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gCAAgC,+DAAmE;AACnG;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;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,gCAAgC,+DAAmE;AACnG;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/modal/hoc/relative_modal/index.js

@@ -1,13 +1,13 @@
 import React, { useRef, useState, useEffect } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { useResize } from '../../../../hooks/use_resize.js';
+import classnames from 'classnames';
 import { calculateRelativePosition, getTransformFromAnimationDirection } from '../../utilities.js';
 import { DEFAULT_TRANSLATE_MOVE } from '../../constants.js';
 import cssClasses from '../../../../css/modal/main.module.less.js';
 import Modal from '../../components/modal.js';
-import classnames from 'classnames';
 import { createPortal } from 'react-dom';
 import { createUseStyles } from '../../../../../../../external/react-jss/dist/react-jss.esm.js';
-import { useResize } from '../../../../hooks/use_resize.js';
 
 var _excluded = ["position", "offset", "transformLength", "children", "animationDirection", "isVisible", "relativeTo", "withBackground"];
 var useStyles = createUseStyles({

package/build/esm/packages/aurora/src/components/modal/hoc/relative_modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,gCAAgC,+DAAmE;AACnG;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,gCAAgC,+DAAmE;AACnG;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/slide/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { defineProperty as _defineProperty } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { DIRECTION } from '../../constants/directions.js';
-import classnames from 'classnames';
 import { useClickOutside } from '../../hooks/use_click_outside.js';
+import classnames from 'classnames';
 import CSS_CLASSES from './css_classes.js';
 import cssClasses from '../../css/slide/main.module.less.js';
 

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

@@ -1,7 +1,7 @@
 import React, { useRef, useImperativeHandle, useEffect } from 'react';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import classnames from 'classnames';
 import { STACK_DIRECTIONS_TO_CSS_CLASSES_MAP, STACK_ALIGNMENTS_TO_CSS_CLASSES_MAP, STACK_JUSTIFICATIONS_TO_CSS_CLASSES_MAP, STACK_WRAP_TO_CSS_CLASSES_MAP, STACK_CSS_CLASSES, STACK_DIRECTIONS, STACK_JUSTIFICATIONS, STACK_ALIGNMENTS, STACK_WRAP } from './stack_constants.js';
+import classnames from 'classnames';
 import cssClasses from '../../css/stack/main.module.less.js';
 import { cssStack } from './css_classes.js';