@dreamcommerce/aurora 2.26.0-2 → 2.26.0-20

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var classnames = require('classnames');
+var index = require('../stack/index.js');
 var css_classes = require('./css_classes.js');
 var constants = require('./constants.js');
 var icon_arrow_down = require('../../assets/icon_arrow_down.js');
@@ -27,8 +28,12 @@ var Accordion = function Accordion(_ref) {
       variant = _ref$variant === void 0 ? constants.ACCORDION_VARIANTS.primary : _ref$variant,
       negativeIndentValue = _ref.negativeIndentValue,
       children = _ref.children,
+      _ref$unmountOnExit = _ref.unmountOnExit,
+      unmountOnExit = _ref$unmountOnExit === void 0 ? true : _ref$unmountOnExit,
       _ref$toggleIcon = _ref.toggleIcon,
-      ToggleIcon = _ref$toggleIcon === void 0 ? icon_arrow_down['default'] : _ref$toggleIcon,
+      toggleIcon = _ref$toggleIcon === void 0 ? /*#__PURE__*/React__default['default'].createElement(icon_arrow_down['default'], {
+    size: "m"
+  }) : _ref$toggleIcon,
       _ref$toggleIconPositi = _ref.toggleIconPosition,
       toggleIconPosition = _ref$toggleIconPositi === void 0 ? constants.ACCORDION_TOGGLER_ICON_POSITION.right : _ref$toggleIconPositi;
   var accordionsGroupApi = use_accordions_group_api.useAccordionsGroupApi();
@@ -60,7 +65,7 @@ var Accordion = function Accordion(_ref) {
       return;
     }
 
-    newIsOpen ? accordionsGroupApi === null || accordionsGroupApi === void 0 ? void 0 : accordionsGroupApi.expand(id) : accordionsGroupApi === null || accordionsGroupApi === void 0 ? void 0 : accordionsGroupApi.shrink(id);
+    newIsOpen ? accordionsGroupApi === null || accordionsGroupApi === void 0 ? void 0 : accordionsGroupApi.expand(id) : accordionsGroupApi === null || accordionsGroupApi === void 0 ? void 0 : accordionsGroupApi.collapse(id);
   };
 
   var wrapperIndentStyles = {
@@ -82,14 +87,20 @@ var Accordion = function Accordion(_ref) {
     style: negativeIndentValue ? contentIndentStyles : undefined
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: main_module['default'][css_classes['default'].accordionTitle]
-  }, title), !isStatic && /*#__PURE__*/React__default['default'].createElement(ToggleIcon, {
-    size: "m",
+  }, title), !isStatic && /*#__PURE__*/React__default['default'].createElement(index['default'], {
+    justify: "center",
+    align: "center",
     className: "".concat(isOpen ? main_module['default'][css_classes['default'].accordionIconRotate180] : '')
-  })), isOpen && /*#__PURE__*/React__default['default'].createElement("div", {
+  }, toggleIcon)), unmountOnExit && isOpen ? /*#__PURE__*/React__default['default'].createElement("div", {
     id: id,
     className: main_module['default'][css_classes['default'].accordionContent],
     style: negativeIndentValue ? contentIndentStyles : undefined
-  }, children));
+  }, children) : null, !unmountOnExit ? /*#__PURE__*/React__default['default'].createElement("div", {
+    id: id,
+    hidden: !isOpen,
+    className: main_module['default'][css_classes['default'].accordionContent],
+    style: negativeIndentValue ? contentIndentStyles : undefined
+  }, children) : null);
 };
 
 exports.default = Accordion;

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

package/build/cjs/packages/aurora/src/components/accordions_group/components/accordions_group_toggler.js

@@ -0,0 +1,46 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var use_accordions_group_api = require('../hooks/use_accordions_group_api.js');
+var index = require('../../button/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["expandedContent", "collapsedContent", "onClick"];
+var AccordionsGroupToggler = function AccordionsGroupToggler(_ref) {
+  var expandedContent = _ref.expandedContent,
+      collapsedContent = _ref.collapsedContent,
+      onClick = _ref.onClick,
+      rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+
+  var accordionsGroupApi = use_accordions_group_api.useAccordionsGroupApi();
+
+  var _useState = React.useState(null),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      togglerContent = _useState2[0],
+      setTogglerContent = _useState2[1];
+
+  var areAllExpanded = accordionsGroupApi === null || accordionsGroupApi === void 0 ? void 0 : accordionsGroupApi.areAllExpanded;
+  var areAllCollapsed = accordionsGroupApi === null || accordionsGroupApi === void 0 ? void 0 : accordionsGroupApi.areAllCollapsed;
+  React.useEffect(function () {
+    if (areAllExpanded) setTogglerContent(expandedContent);
+    if (areAllCollapsed) setTogglerContent(collapsedContent);
+  }, [areAllExpanded, areAllCollapsed]);
+
+  var toggleGroups = function toggleGroups(ev) {
+    accordionsGroupApi !== null && accordionsGroupApi !== void 0 && accordionsGroupApi.areAllExpanded ? accordionsGroupApi === null || accordionsGroupApi === void 0 ? void 0 : accordionsGroupApi.collapseAll() : accordionsGroupApi === null || accordionsGroupApi === void 0 ? void 0 : accordionsGroupApi.expandAll();
+    onClick === null || onClick === void 0 || onClick(ev);
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement(index['default'], _rollupPluginBabelHelpers.objectSpread2({
+    onClick: toggleGroups
+  }, rest), togglerContent);
+};
+
+exports.AccordionsGroupToggler = AccordionsGroupToggler;
+//# sourceMappingURL=accordions_group_toggler.js.map

package/build/cjs/packages/aurora/src/components/accordions_group/components/accordions_group_toggler.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;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/accordions_group/context.js

@@ -6,15 +6,17 @@ var React = require('react');
 
 var AccordionsGroupContext = /*#__PURE__*/React.createContext({
   expandAll: function expandAll() {},
-  shrinkAll: function shrinkAll() {},
+  collapseAll: function collapseAll() {},
   expand: function expand() {},
-  shrink: function shrink() {},
+  collapse: function collapse() {},
   add: function add() {},
   remove: function remove() {},
   get: function get() {
     return undefined;
   },
+  toggle: function toggle() {},
   areAllExpanded: false,
+  areAllCollapsed: false,
   accordions: []
 });
 

package/build/cjs/packages/aurora/src/components/accordions_group/context.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;"}
+{"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;"}

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

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+
+var useAccordionsGroup = function useAccordionsGroup() {
+  var _useState = React.useState([]),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      accordions = _useState2[0],
+      setAccordions = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      areAllExpanded = _useState4[0],
+      setAreAllExpanded = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      areAllCollapsed = _useState6[0],
+      setAreAllCollapsed = _useState6[1];
+
+  React.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, accordion), {}, {
+          expanded: true
+        });
+      });
+    });
+  };
+
+  var collapseAll = function collapseAll() {
+    setAccordions(function (accordions) {
+      return accordions.map(function (accordion) {
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, accordion), {}, {
+          expanded: false
+        });
+      });
+    });
+  };
+
+  var expand = function expand(id) {
+    setAccordions(function (accordions) {
+      return accordions.map(function (accordion) {
+        return accordion.id === id ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, accordion), {}, {
+          expanded: true
+        }) : accordion;
+      });
+    });
+  };
+
+  var collapse = function collapse(id) {
+    setAccordions(function (accordions) {
+      return accordions.map(function (accordion) {
+        return accordion.id === id ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.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(_rollupPluginBabelHelpers.toConsumableArray(accordions), [_rollupPluginBabelHelpers.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
+  };
+};
+
+exports.useAccordionsGroup = useAccordionsGroup;
+//# sourceMappingURL=use_accordions_group.js.map

package/build/cjs/packages/aurora/src/components/accordions_group/hooks/use_accordions_group.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/cjs/packages/aurora/src/components/accordions_group/index.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var context = require('./context.js');
+var use_accordions_group = require('./hooks/use_accordions_group.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var AccordionsGroup = function AccordionsGroup(_ref) {
+  var children = _ref.children;
+  var accordionsGroupApi = use_accordions_group.useAccordionsGroup();
+  return /*#__PURE__*/React__default['default'].createElement(context.AccordionsGroupContext.Provider, {
+    value: accordionsGroupApi
+  }, children);
+};
+
+exports.AccordionsGroup = AccordionsGroup;
+//# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/accordions_group/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;"}

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

@@ -5,11 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var use_screen_detect = require('../../../hooks/use_screen_detect.js');
 var index$2 = require('../../button/index.js');
 var index$1 = require('../../buttons_group/index.js');
 var css_classes = require('../css_classes.js');
 var index = require('../../dropdown/context/index.js');
-var use_screen_detect = require('../../../hooks/use_screen_detect.js');
 var main_module = require('../../../css/color_picker/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var constants = require('./constants.js');
 var use_screen_detect = require('../../hooks/use_screen_detect.js');
+var constants = require('./constants.js');
 
 var useColorPicker = function useColorPicker(_ref) {
   var initialColorHex = _ref.initialColorHex,

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
+var classnames = require('classnames');
 var main_module = require('../../../css/checkbox/main.module.less.js');
 var icon_tick = require('../../../assets/icon_tick.js');
 

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
+var classnames = require('classnames');
 var main_module = require('../../../css/checkbox/main.module.less.js');
 var icon_tick = require('../../../assets/icon_tick.js');
 

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var positions = require('../../../constants/positions.js');
-var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
+var classnames = require('classnames');
 var main_module = require('../../../css/controls/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -4,11 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
+var classnames = require('classnames');
+var main_module$1 = require('../../../css/controls/main.module.less.js');
 var main_module = require('../../../css/input/main.module.less.js');
 var context = require('../context.js');
-var main_module$1 = require('../../../css/controls/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
+var classnames = require('classnames');
 var main_module = require('../../../css/input/main.module.less.js');
 var context = require('../context.js');
 

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
+var classnames = require('classnames');
 var main_module = require('../../../css/radio/main.module.less.js');
 var classNames = require('../../../utilities/styles/classNames.js');
 

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
+var classnames = require('classnames');
 var main_module = require('../../../css/input/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -4,26 +4,28 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var classnames = require('classnames');
-var css_classes = require('../css_classes.js');
 var use_toggle = require('../../dropdown/hooks/use_toggle.js');
 var lock_closed = require('../../../assets/lock_closed.js');
 var lock_opened = require('../../../assets/lock_opened.js');
+var css_classes = require('../css_classes.js');
+var stack_constants = require('../../stack/stack_constants.js');
+var index = require('../../stack/index.js');
+var main_module = require('../../../css/controls/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 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 = use_toggle.useToggle(false),
+  var _useToggle = use_toggle.useToggle(isLocked),
       _useToggle2 = _rollupPluginBabelHelpers.slicedToArray(_useToggle, 2),
       locked = _useToggle2[0],
       toggleLock = _useToggle2[1];
@@ -39,8 +41,23 @@ var ValuesSyncer = function ValuesSyncer(_ref) {
       setSecondControlValue = _useState4[1];
 
   React.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]);
+  React.useEffect(function () {
+    setFirstControlValue(initialFirstValue);
+    setSecondControlValue(initialSecondValue);
+  }, [initialSecondValue, initialFirstValue]);
+  React.useEffect(function () {
+    onChange === null || onChange === void 0 || onChange({
+      first: firstControlValue,
+      second: secondControlValue,
+      isLocked: locked
+    });
+  }, [firstControlValue, secondControlValue]);
 
   var setFirstControl = function setFirstControl(value) {
     setFirstControlValue(value);
@@ -58,10 +75,11 @@ var ValuesSyncer = function ValuesSyncer(_ref) {
     }
   };
 
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: classnames__default['default'](css_classes.valuesSyncer, cssClasses)
+  return /*#__PURE__*/React__default['default'].createElement(index['default'], {
+    spacing: 16,
+    align: stack_constants.STACK_ALIGNMENTS.end
   }, firstControl(firstControlValue, setFirstControl), /*#__PURE__*/React__default['default'].createElement("button", {
-    className: css_classes.valuesSyncerLockButton,
+    className: main_module['default'][css_classes.valuesSyncerLockButton],
     "aria-label": "Lock values",
     type: "button",
     onClick: toggleLock

package/build/cjs/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;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;"}

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

@@ -0,0 +1,51 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var values_syncer = require('../../components/values_syncer.js');
+var index = require('../../index.js');
+var index$1 = require('../../../hint/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+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__default['default'].createElement(index['default'], {
+    errors: errors,
+    name: name,
+    id: id
+  }, (label || hint) && /*#__PURE__*/React__default['default'].createElement(index['default'].Label, {
+    id: id,
+    additionalInfo: labelAdditionalInfo
+  }, label, hint && /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
+    hint: hint,
+    spacingLeft: true
+  })), /*#__PURE__*/React__default['default'].createElement(index['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(index['default'].Element, null, /*#__PURE__*/React__default['default'].createElement(values_syncer['default'], {
+    firstControl: firstControl,
+    secondControl: secondControl,
+    initialFirstValue: initialFirstValue,
+    initialSecondValue: initialSecondValue,
+    onLock: onLock,
+    isLocked: isLocked,
+    onChange: onChange
+  }))), /*#__PURE__*/React__default['default'].createElement(index['default'].Errors, null), additionalInfo && /*#__PURE__*/React__default['default'].createElement(index['default'].AdditionalInfo, null, additionalInfo));
+};
+
+exports.default = ControlValuesSyncer;
+//# sourceMappingURL=index.js.map

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var css_classes = require('./css_classes.js');
-var context = require('./context.js');
 var main_module = require('../../css/controls/main.module.less.js');
+var context = require('./context.js');
 var input = require('./components/input.js');
 var additional_info = require('./components/additional_info.js');
 var checkbox = require('./components/checkbox.js');

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var use_screen_detect = require('../../../hooks/use_screen_detect.js');
 var index$2 = require('../../button/index.js');
 var index$1 = require('../../buttons_group/index.js');
 var index = require('../../dropdown/context/index.js');
-var use_screen_detect = require('../../../hooks/use_screen_detect.js');
 var value_controller_context = require('../context/value_controller_context.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -5,19 +5,19 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var use_click_outside = require('../../../hooks/use_click_outside.js');
+var responsive_breakpoints = require('../../../constants/responsive_breakpoints.js');
+var use_screen_detect = require('../../../hooks/use_screen_detect.js');
+var main_module$3 = require('../../../css/icons/main.module.less.js');
 var classnames = require('classnames');
 var reactDom = require('react-dom');
-var main_module$3 = require('../../../css/icons/main.module.less.js');
 var index = require('../context/index.js');
-var responsive_breakpoints = require('../../../constants/responsive_breakpoints.js');
-var use_screen_detect = require('../../../hooks/use_screen_detect.js');
 var with_translation = require('../../../utilities/translation/with_translation.js');
 var reactTransitionGroup = require('react-transition-group');
 var constants = require('../constants.js');
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/dropdown/main.module.less.js');
 var utilities = require('../utilities.js');
-var use_click_outside = require('../../../hooks/use_click_outside.js');
 var icon_arrow = require('../../../assets/icon_arrow.js');
 var utilities$1 = require('@dreamcommerce/utilities');
 var main_module$1 = require('../../../css/hint/main.module.less.js');

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var use_toggle = require('../hooks/use_toggle.js');
 var index = require('../context/index.js');
 var main_module = require('../../../css/dropdown/main.module.less.js');
 var use_dropdowns_manager_context = require('../hooks/use_dropdowns_manager_context.js');
@@ -16,7 +17,6 @@ var label = require('./label.js');
 var link = require('./link.js');
 var list = require('./list.js');
 var option = require('./option.js');
-var use_toggle = require('../hooks/use_toggle.js');
 var option_multiple = require('./option_multiple.js');
 var search = require('./search.js');
 var select = require('./select.js');

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index = require('../context/index.js');
 var css_classes = require('../../controls/css_classes.js');
+var index = require('../context/index.js');
 var main_module$1 = require('../../../css/input/main.module.less.js');
 var main_module = require('../../../css/dropdown/main.module.less.js');
 var utilities = require('../utilities.js');

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

@@ -4,13 +4,13 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var use_values = require('../../hooks/use_values.js');
+var use_toggle = require('../../hooks/use_toggle.js');
+var use_set_options_on_close = require('../../hooks/use_set_options_on_close.js');
 var index = require('../../context/index.js');
 var css_classes = require('../../css_classes.js');
 var main_module = require('../../../../css/dropdown/main.module.less.js');
 var utilities = require('../../utilities.js');
-var use_values = require('../../hooks/use_values.js');
-var use_toggle = require('../../hooks/use_toggle.js');
-var use_set_options_on_close = require('../../hooks/use_set_options_on_close.js');
 var dropdown = require('../../components/dropdown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }