@dreamcommerce/aurora 2.20.9 → 2.20.10-0

package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js

@@ -0,0 +1,61 @@
+import React, { useContext } from 'react';
+import { ColorPickerNewContext } from '../context.js';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../constants.js';
+import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer, cssColorPickerContainer, cssColorPickerRbgcp } from '../css_classes.js';
+import { ColorLabelInput } from './color-label-input.js';
+import { ColorPicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import { ColorPickerFooter } from './color-picker-footer.js';
+import { ColorPickerHeader } from './color-picker-header.js';
+import { ColorPickerInputs } from './color-picker-inputs/color-picker-inputs.js';
+import { ColorPickerSwatch } from './color-picker-swatch.js';
+import { ColorPickerShades } from './color-picker-shades.js';
+import { ColorPickerVariables } from './color-picker-variables.js';
+import Dropdown from '../../dropdown/components/dropdown.js';
+
+var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
+  var id = _ref.id,
+      name = _ref.name,
+      colorVariables = _ref.colorVariables;
+
+  var _useContext = useContext(ColorPickerNewContext),
+      color = _useContext.color,
+      setColor = _useContext.setColor;
+
+  var colorValue = typeof color === 'string' ? color : color.value;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPicker])
+  }, /*#__PURE__*/React.createElement(Dropdown, null, /*#__PURE__*/React.createElement(Dropdown.CustomLabel, null, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerInputContainer])
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerInputColorSwatchContainer])
+  }, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    color: colorValue
+  })), /*#__PURE__*/React.createElement(ColorLabelInput, {
+    id: id,
+    name: name
+  }))), /*#__PURE__*/React.createElement(Dropdown.Content, {
+    shouldCloseOnClickOutside: false,
+    shouldCloseOnScroll: false,
+    shouldCloseOthersOnOpen: true
+  }, /*#__PURE__*/React.createElement(ColorPickerHeader, null), /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerContainer])
+  }, /*#__PURE__*/React.createElement(ColorPicker, {
+    value: colorValue,
+    onChange: setColor,
+    width: COLOR_PICKER_WIDTH,
+    height: COLOR_PICKER_HEIGHT,
+    hideColorTypeBtns: true,
+    hideColorGuide: true,
+    hideAdvancedSliders: true,
+    hideInputType: true,
+    hideInputs: true,
+    hidePresets: true,
+    className: "".concat(styles[cssColorPickerRbgcp])
+  }), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(ColorPickerShades, null), (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.isVisible) && /*#__PURE__*/React.createElement(ColorPickerVariables, {
+    variables: colorVariables.variables
+  })), /*#__PURE__*/React.createElement(ColorPickerFooter, null))));
+};
+
+export default ColorPickerNewPure;
+//# sourceMappingURL=pure-color-picker.js.map

package/build/{cjs/packages/aurora/src/components/color_picker_new/components/color_picker_content.js.map → esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.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,sBAAsB,0FAA8F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker_new/constants.d.ts

@@ -1,4 +1,4 @@
-export declare const COLOR_PICKER_INITIAL_STATE = "#FFFFFF";
+export declare const COLOR_PICKER_INITIAL_STATE = "#000000";
 export declare const COLOR_PICKER_WIDTH = 247;
 export declare const COLOR_PICKER_HEIGHT = 200;
 export declare const COLOR_PICKER_ALPHA_MAX_VALUE = 100;

package/build/esm/packages/aurora/src/components/color_picker_new/constants.js

@@ -1,4 +1,4 @@
-var COLOR_PICKER_INITIAL_STATE = '#FFFFFF';
+var COLOR_PICKER_INITIAL_STATE = '#000000';
 var COLOR_PICKER_WIDTH = 247;
 var COLOR_PICKER_HEIGHT = 200;
 var COLOR_PICKER_ALPHA_MAX_VALUE = 100;

package/build/esm/packages/aurora/src/components/color_picker_new/context.js

@@ -16,8 +16,7 @@ var ColorPickerNewContext = /*#__PURE__*/createContext({
   setB: function setB() {},
   handleCancel: function handleCancel() {},
   handleSave: function handleSave() {},
-  handlePickSwatch: function handlePickSwatch() {},
-  setIsColorPickerOpened: function setIsColorPickerOpened() {}
+  handlePickSwatch: function handlePickSwatch() {}
 });
 
 export { ColorPickerNewContext };

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

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts

@@ -1,13 +1,11 @@
-import { ColorPickerColorTypes, ColorPickerVariable, IColorPickerColor, IColorPickerColorVariables } from '../types';
+import { ColorPickerColorTypes, ColorPickerVariable, IColorPickerColor } from '../types';
 export declare type ColorPickerHookProps = {
     initialColor?: ColorPickerColorTypes['hex'] | ColorPickerVariable;
     onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
     onSave?: (color: IColorPickerColor) => void;
-    colorVariables?: IColorPickerColorVariables;
-    isColorPickerOpened?: boolean;
 };
-declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave, colorVariables: initialColorVariables, isColorPickerOpened }: ColorPickerHookProps) => {
+declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
     color: ColorPickerVariable;
     setColor: (color: ColorPickerColorTypes['hex'] | ColorPickerVariable) => void;
     hex: string;
@@ -21,6 +19,5 @@ declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave, color
     handleCancel: () => void;
     handleSave: () => void;
     handlePickSwatch: (color: ColorPickerColorTypes['hex'] | ColorPickerVariable) => void;
-    colorVariables: IColorPickerColorVariables | undefined;
 };
 export default useColorPicker;

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js

@@ -3,7 +3,6 @@ import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rol
 import { COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_ALPHA_MAX_VALUE } from '../constants.js';
 import { useColorPicker as useColorPicker$1 } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
 import { ColorPickerUtils } from '../color_picker_utils.js';
-import isEqual_1 from '../../../../../../external/lodash/isEqual.js';
 
 var useColorPicker = function useColorPicker(_ref) {
   var _initialColor$name;
@@ -11,9 +10,7 @@ var useColorPicker = function useColorPicker(_ref) {
   var initialColor = _ref.initialColor,
       onChange = _ref.onChange,
       onCancel = _ref.onCancel,
-      onSave = _ref.onSave,
-      initialColorVariables = _ref.colorVariables,
-      isColorPickerOpened = _ref.isColorPickerOpened;
+      onSave = _ref.onSave;
 
   var _useState = useState({
     value: initialColor ? ColorPickerUtils.getTinyColorInstance(typeof initialColor === 'string' ? initialColor : initialColor === null || initialColor === void 0 ? void 0 : initialColor.value).toHex8() : COLOR_PICKER_INITIAL_STATE,
@@ -23,15 +20,6 @@ var useColorPicker = function useColorPicker(_ref) {
       color = _useState2[0],
       setColorValue = _useState2[1];
 
-  var _useState3 = useState(initialColorVariables),
-      _useState4 = _slicedToArray(_useState3, 1),
-      colorVariables = _useState4[0];
-
-  var _useState5 = useState(initialColor),
-      _useState6 = _slicedToArray(_useState5, 2),
-      prevInitalColor = _useState6[0],
-      setPrevInitialColor = _useState6[1];
-
   var setColor = function setColor(color) {
     var hexColor = ColorPickerUtils.getTinyColorInstance(typeof color === 'string' ? color : color.value).toHex8();
     setColorValue(function (prevColor) {
@@ -46,17 +34,13 @@ var useColorPicker = function useColorPicker(_ref) {
 
   useEffect(function () {
     if (!initialColor) return;
-
-    if (!isEqual_1(initialColor, prevInitalColor) && !isColorPickerOpened) {
-      setColor(initialColor);
-      setPrevInitialColor(initialColor);
-    }
+    setColor(initialColor);
   }, [initialColor]);
 
-  var _useState7 = useState(color),
-      _useState8 = _slicedToArray(_useState7, 2),
-      choosenColor = _useState8[0],
-      setChoosenColor = _useState8[1];
+  var _useState3 = useState(color),
+      _useState4 = _slicedToArray(_useState3, 2),
+      choosenColor = _useState4[0],
+      setChoosenColor = _useState4[1];
 
   var _useBestGradientColor = useColorPicker$1(typeof color === 'string' ? color : color.value, setColor),
       hslArr = _useBestGradientColor.hslArr,
@@ -69,15 +53,15 @@ var useColorPicker = function useColorPicker(_ref) {
   var tinyColor = typeof color === 'string' ? ColorPickerUtils.getTinyColorInstance(color) : ColorPickerUtils.getTinyColorInstance(color.value);
   var hex = ColorPickerUtils.getHexValue(tinyColor);
 
-  var _useState9 = useState(rgbaArr[3] * 100),
-      _useState10 = _slicedToArray(_useState9, 2),
-      alpha = _useState10[0],
-      setAlpha = _useState10[1];
+  var _useState5 = useState(rgbaArr[3] * 100),
+      _useState6 = _slicedToArray(_useState5, 2),
+      alpha = _useState6[0],
+      setAlpha = _useState6[1];
 
-  var _useState11 = useState("".concat(alpha)),
-      _useState12 = _slicedToArray(_useState11, 2),
-      alphaValue = _useState12[0],
-      setAlphaValue = _useState12[1];
+  var _useState7 = useState("".concat(alpha)),
+      _useState8 = _slicedToArray(_useState7, 2),
+      alphaValue = _useState8[0],
+      setAlphaValue = _useState8[1];
 
   var handleOnChangeAlpha = function handleOnChangeAlpha(event) {
     changeAlphaValue(Number(event.target.value));
@@ -124,8 +108,7 @@ var useColorPicker = function useColorPicker(_ref) {
     setB: setB,
     handleCancel: handleCancel,
     handleSave: handleSave,
-    handlePickSwatch: handlePickSwatch,
-    colorVariables: colorVariables
+    handlePickSwatch: handlePickSwatch
   };
 };
 

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,mDAAmD,8FAAkG;AACrJ;AACA,sBAAsB,8CAAkD;AACxE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,mDAAmD,8FAAkG;AACrJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker_new/index.js

@@ -1,7 +1,6 @@
-import React, { useState, useMemo } from 'react';
-import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import React, { useMemo } from 'react';
 import { ColorPickerNewContext } from './context.js';
-import ColorPickerNewPure from './components/pure_color_picker.js';
+import ColorPickerNewPure from './components/pure-color-picker.js';
 import useColorPicker from './hooks/use_color_picker.js';
 
 var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
@@ -13,18 +12,11 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
       onCancel = _ref.onCancel,
       onSave = _ref.onSave;
 
-  var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isColorPickerOpened = _useState2[0],
-      setIsColorPickerOpened = _useState2[1];
-
   var _useColorPicker = useColorPicker({
-    colorVariables: colorVariables,
     initialColor: initialColor,
     onChange: onChange,
     onCancel: onCancel,
-    onSave: onSave,
-    isColorPickerOpened: isColorPickerOpened
+    onSave: onSave
   }),
       color = _useColorPicker.color,
       setColor = _useColorPicker.setColor,
@@ -54,11 +46,9 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
       setB: setB,
       handleCancel: handleCancel,
       handleSave: handleSave,
-      colorVariables: colorVariables,
-      handlePickSwatch: handlePickSwatch,
-      setIsColorPickerOpened: setIsColorPickerOpened
+      handlePickSwatch: handlePickSwatch
     };
-  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, handlePickSwatch, colorVariables, setIsColorPickerOpened]);
+  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alphaValue, rgbaArr, setR, setG, setB, handleCancel, handleSave, handlePickSwatch]);
   return /*#__PURE__*/React.createElement(ColorPickerNewContext.Provider, {
     value: value
   }, /*#__PURE__*/React.createElement(ColorPickerNewPure, {

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

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

@@ -38,8 +38,6 @@ export interface IColorPickerNewContextProps {
     handleCancel: () => void;
     handleSave: (color: IColorPickerColor) => void;
     handlePickSwatch: (color: string | ColorPickerVariable) => void;
-    colorVariables?: IColorPickerColorVariables;
-    setIsColorPickerOpened: (isOpened: boolean) => void;
 }
 export declare type ColorPickerColorTypes = {
     hex: string;

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,19 @@ 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 () {
+    onChange === null || onChange === void 0 || onChange({
+      first: firstControlValue,
+      second: secondControlValue,
+      isLocked: locked
+    });
+  }, [firstControlValue, secondControlValue]);
 
   var setFirstControl = function setFirstControl(value) {
     setFirstControlValue(value);
@@ -49,10 +63,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;"}

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

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

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

@@ -0,0 +1,45 @@
+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,
+      isRequired = _ref.isRequired,
+      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, {
+    isRequired: isRequired,
+    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/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,13 @@ export interface IControlInputProps extends IInputProps, IControlCommonProps {
     isRequired?: boolean;
     labelAdditionalInfo?: string | ReactNode;
 }
+export interface IControlNumbersSyncerProps extends IControlCommonProps, TValuesSyncerProps {
+    id?: string;
+    name?: string;
+    label?: string;
+    isRequired?: boolean;
+    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,12 +1,13 @@
 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 { UiDomUtils } from '@dreamcommerce/utilities';
 import { TransitionGroup, CSSTransition } from 'react-transition-group';
@@ -14,7 +15,6 @@ import { DROPDOWN_Z_INDEX, DROPDOWN_CONTENT_ARROW_HEIGHT, DROPDOWN_ON_MODAL_Z_IN
 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 cssClasses$1 from '../../../css/hint/main.module.less.js';
 import cssClasses$2 from '../../../css/tooltip/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,11 +13,9 @@ 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';
-import { MemoizedContent } from './memoized_content.js';
 
 /**
  * Dropdown composition component. Provides several Dropdown dependant components which can be composed to create
@@ -78,7 +77,6 @@ var Dropdown = function Dropdown(_ref) {
 
 Dropdown.Select = Select;
 Dropdown.Content = Content;
-Dropdown.MemoizedContent = MemoizedContent;
 Dropdown.ItemWithHover = ItemWithHover;
 Dropdown.Search = Search;
 Dropdown.List = List;

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

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 IconClose from '../../../assets/icon_close.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';