@dreamcommerce/aurora 2.26.0-2 → 2.26.0-25

package/build/esm/packages/aurora/src/components/accordions_group/hooks/use_accordions_group.js

@@ -1,42 +1,118 @@
-import '@auroraComponents/accordions_group/types';
-import { useEffect, useState } from 'react';
-export const useAccordionsGroup = () => {
-    const [accordions, setAccordions] = useState([]);
-    const [areAllExpanded, setAreAllExpanded] = useState(false);
-    useEffect(() => {
-        setAreAllExpanded(accordions.every((accordion) => accordion.expanded));
-    }, []);
-    const expandAll = () => {
-        setAccordions((accordions) => accordions.map((accordion) => ({ ...accordion, expanded: true })));
-    };
-    const shrinkAll = () => {
-        setAccordions((accordions) => accordions.map((accordion) => ({ ...accordion, expanded: false })));
-    };
-    const expand = (id) => {
-        setAccordions((accordions) => accordions.map((accordion) => (accordion.id === id ? { ...accordion, expanded: true } : accordion)));
-    };
-    const shrink = (id) => {
-        setAccordions((accordions) => accordions.map((accordion) => (accordion.id === id ? { ...accordion, expanded: false } : accordion)));
-    };
-    const add = (id, config = { expanded: false }) => {
-        setAccordions((accordions) => [...accordions, { id, ...config }]);
-    };
-    const remove = (id) => {
-        setAccordions(accordions.filter((accordion) => accordion.id !== id));
-    };
-    const get = (id) => {
-        return accordions.find((accordion) => accordion.id === id);
-    };
-    return {
-        expandAll,
-        shrinkAll,
-        expand,
-        shrink,
-        add,
-        remove,
-        get,
-        accordions,
-        areAllExpanded
+import { useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var useAccordionsGroup = function useAccordionsGroup() {
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      accordions = _useState2[0],
+      setAccordions = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      areAllExpanded = _useState4[0],
+      setAreAllExpanded = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      areAllCollapsed = _useState6[0],
+      setAreAllCollapsed = _useState6[1];
+
+  useEffect(function () {
+    setAreAllExpanded(accordions.every(function (accordion) {
+      return accordion.expanded;
+    }));
+    setAreAllCollapsed(accordions.every(function (accordion) {
+      return !accordion.expanded;
+    }));
+  }, [accordions]);
+
+  var expandAll = function expandAll() {
+    setAccordions(function (accordions) {
+      return accordions.map(function (accordion) {
+        return _objectSpread2(_objectSpread2({}, accordion), {}, {
+          expanded: true
+        });
+      });
+    });
+  };
+
+  var collapseAll = function collapseAll() {
+    setAccordions(function (accordions) {
+      return accordions.map(function (accordion) {
+        return _objectSpread2(_objectSpread2({}, accordion), {}, {
+          expanded: false
+        });
+      });
+    });
+  };
+
+  var expand = function expand(id) {
+    setAccordions(function (accordions) {
+      return accordions.map(function (accordion) {
+        return accordion.id === id ? _objectSpread2(_objectSpread2({}, accordion), {}, {
+          expanded: true
+        }) : accordion;
+      });
+    });
+  };
+
+  var collapse = function collapse(id) {
+    setAccordions(function (accordions) {
+      return accordions.map(function (accordion) {
+        return accordion.id === id ? _objectSpread2(_objectSpread2({}, accordion), {}, {
+          expanded: false
+        }) : accordion;
+      });
+    });
+  };
+
+  var add = function add(id) {
+    var config = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+      expanded: false
     };
+    setAccordions(function (accordions) {
+      return [].concat(_toConsumableArray(accordions), [_objectSpread2({
+        id: id
+      }, config)]);
+    });
+  };
+
+  var remove = function remove(id) {
+    setAccordions(accordions.filter(function (accordion) {
+      return accordion.id !== id;
+    }));
+  };
+
+  var get = function get(id) {
+    return accordions.find(function (accordion) {
+      return accordion.id === id;
+    });
+  };
+
+  var toggle = function toggle(id) {
+    var accordion = get(id);
+
+    if (!accordion) {
+      return;
+    }
+
+    accordion.expanded ? collapse(id) : expand(id);
+  };
+
+  return {
+    expandAll: expandAll,
+    collapseAll: collapseAll,
+    expand: expand,
+    collapse: collapse,
+    add: add,
+    remove: remove,
+    get: get,
+    toggle: toggle,
+    accordions: accordions,
+    areAllExpanded: areAllExpanded,
+    areAllCollapsed: areAllCollapsed
+  };
 };
-//# sourceMappingURL=use_accordions_group.js.map
+
+export { useAccordionsGroup };
+//# sourceMappingURL=use_accordions_group.js.map

package/build/esm/packages/aurora/src/components/accordions_group/hooks/use_accordions_group.js.map

@@ -1 +1 @@
-{"version":3,"file":"use_accordions_group.js","sourceRoot":"","sources":["../../../../../../../../src/components/accordions_group/hooks/use_accordions_group.ts"],"names":[],"mappings":"AAAA,OAA2B,0CAA0C,CAAC;AACtE,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,EAAE;IACnC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAe,EAAE,CAAC,CAAC;IAC/D,MAAM,CAAC,cAAc,EAAE,iBAAiB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5D,SAAS,CAAC,GAAG,EAAE;QACX,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC,CAAC;IAC3E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,GAAG,EAAE;QACnB,aAAa,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,CAAC;IACrG,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,GAAG,EAAE;QACnB,aAAa,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,CAAC;IACtG,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE;QAC1B,aAAa,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACvI,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE;QAC1B,aAAa,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,EAAE,GAAG,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC;IACxI,CAAC,CAAC;IAEF,MAAM,GAAG,GAAG,CAAC,EAAU,EAAE,SAAuC,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE;QACnF,aAAa,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,CAAC,GAAG,UAAU,EAAE,EAAE,EAAE,EAAE,GAAG,MAAM,EAAE,CAAC,CAAC,CAAC;IACtE,CAAC,CAAC;IAEF,MAAM,MAAM,GAAG,CAAC,EAAU,EAAE,EAAE;QAC1B,aAAa,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC,CAAC;IACzE,CAAC,CAAC;IAEF,MAAM,GAAG,GAAG,CAAC,EAAU,EAAE,EAAE;QACvB,OAAO,UAAU,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;IAC/D,CAAC,CAAC;IAEF,OAAO;QACH,SAAS;QACT,SAAS;QACT,MAAM;QACN,MAAM;QACN,GAAG;QACH,MAAM;QACN,GAAG;QACH,UAAU;QACV,cAAc;KACjB,CAAC;AACN,CAAC,CAAC"}
+{"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;"}

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

@@ -1,8 +1,14 @@
 import React from 'react';
-import { AccordionsGroupContext } from '@auroraComponents/accordions_group/context';
-import { useAccordionsGroup } from '@auroraComponents/accordions_group/hooks/use_accordions_group';
-export const AccordionsGroup = ({ children }) => {
-    const accordionsGroupApi = useAccordionsGroup();
-    return React.createElement(AccordionsGroupContext.Provider, { value: accordionsGroupApi }, children);
+import { AccordionsGroupContext } from './context.js';
+import { useAccordionsGroup } from './hooks/use_accordions_group.js';
+
+var AccordionsGroup = function AccordionsGroup(_ref) {
+  var children = _ref.children;
+  var accordionsGroupApi = useAccordionsGroup();
+  return /*#__PURE__*/React.createElement(AccordionsGroupContext.Provider, {
+    value: accordionsGroupApi
+  }, children);
 };
-//# sourceMappingURL=index.js.map
+
+export { AccordionsGroup };
+//# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/accordions_group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/components/accordions_group/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4B,MAAM,OAAO,CAAC;AACjD,OAAO,EAAE,sBAAsB,EAAE,MAAM,4CAA4C,CAAC;AACpF,OAAO,EAAE,kBAAkB,EAAE,MAAM,+DAA+D,CAAC;AAEnG,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAA0B,EAAE,EAAE;IACpE,MAAM,kBAAkB,GAAG,kBAAkB,EAAE,CAAC;IAEhD,OAAO,oBAAC,sBAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,kBAAkB,IAAG,QAAQ,CAAmC,CAAC;AACpH,CAAC,CAAC"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -1,17 +1,25 @@
-export interface IAccordionGroupContext {
+import { IButtonProps } from "../button/types";
+import { ReactNode } from 'react';
+export interface IAccordionsGroupContext {
     expandAll(): void;
-    shrinkAll(): void;
+    collapseAll(): void;
     expand(id: string): void;
-    shrink(id: string): void;
+    collapse(id: string): void;
     add(id: string, config?: Pick<TAccordion, 'expanded'>): void;
     remove(id: string): void;
     get(id: string): TAccordion | undefined;
+    toggle(id: string): void;
     accordions: TAccordion[];
     areAllExpanded: boolean;
+    areAllCollapsed: boolean;
 }
-export interface IAccordionsGroupApi extends IAccordionGroupContext {
+export interface IAccordionsGroupApi extends IAccordionsGroupContext {
 }
 export declare type TAccordion = {
     id: string;
     expanded: boolean;
 };
+export interface IAccordionsGroupTogglerProps extends Omit<IButtonProps, 'children'> {
+    expandedContent: ReactNode;
+    collapsedContent: ReactNode;
+}

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

@@ -1,2 +1,3 @@
-export {};
+import '@auroraComponents/button/types';
+import 'react';
 //# sourceMappingURL=types.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/accordions_group/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/accordions_group/types.ts"],"names":[],"mappings":"AAAA,OAA6B,gCAAgC,CAAC;AAC9D,OAA0B,OAAO,CAAC"}

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';
 
 /**