@dreamcommerce/aurora 2.16.1-67 → 2.16.2

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var reactJss_esm = require('../../../../../external/react-jss/dist/react-jss.esm.js');
 var css_classes = require('./css_classes.js');
 var utilities = require('./utilities.js');
@@ -20,164 +19,84 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var useStyles = reactJss_esm.createUseStyles({
-  saturationLightnessPanel: {
-    background: function background(_ref) {
-      var hue = _ref.color.hue;
-      return "hsl(".concat(hue, ",100%, 50%)");
-    }
-  },
-  saturationLightnessPointer: {
-    transform: function transform(_ref2) {
-      var _ref2$saturationLight = _ref2.saturationLightnessPointer,
-          left = _ref2$saturationLight.left,
-          top = _ref2$saturationLight.top;
-      return "translate3d(".concat(left - 10, "px,").concat(top - 10, "px,0px)");
-    },
-    '& > div': {
-      background: function background(_ref3) {
-        var hex = _ref3.color.hex;
-        return hex;
-      }
-    }
-  },
-  preview: {
-    background: function background(_ref4) {
-      var hex = _ref4.color.hex;
-      return hex;
-    }
-  },
-  huePointer: {
-    transform: function transform(_ref5) {
-      var _ref5$hueSliderPointe = _ref5.hueSliderPointer,
-          top = _ref5$hueSliderPointe.top,
-          left = _ref5$hueSliderPointe.left,
-          screenName = _ref5.screenName;
-      return screenName === 'xs' ? "translate3d(".concat(left - 10, "px,0px,0px)") : "translate3d(0px,".concat(top - 10, "px,0px)");
-    },
-    '& > div': {
-      background: function background(_ref6) {
-        var hue = _ref6.color.hue;
-        return "hsl(".concat(hue, ",100%, 50%)");
-      }
-    }
-  },
-  colorPreview: {
-    background: function background(_ref7) {
-      var hex = _ref7.color.hex;
-      return hex;
-    }
-  }
-});
-var PureColorPicker = function PureColorPicker(_ref8) {
-  var _color$hex2;
-
-  var hideChooseCancelButtons = _ref8.hideChooseCancelButtons;
-
-  var _useContext = React.useContext(context.ColorPickerContext),
-      color = _useContext.color,
-      setColor = _useContext.setColor,
-      initialColor = _useContext.initialColor,
-      hueSliderPointer = _useContext.hueSliderPointer,
-      saturationLightnessPointer = _useContext.saturationLightnessPointer,
-      setHueSliderPointer = _useContext.setHueSliderPointer,
-      setSaturationLightnessPointer = _useContext.setSaturationLightnessPointer,
-      screenName = _useContext.screenName;
-
-  var saturationLightnessPanelRef = React.useRef(null);
-  var hueSliderRef = React.useRef(null);
-  var classes = useStyles({
-    color: color,
-    saturationLightnessPointer: saturationLightnessPointer,
-    hueSliderPointer: hueSliderPointer,
-    screenName: screenName
-  });
-  React.useEffect(function () {
-    var _color$hex;
-
-    var initialColor = utilities.getColorFromHex((_color$hex = color.hex) !== null && _color$hex !== void 0 ? _color$hex : '');
-    setNewColorPickerPositions(initialColor); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
-  var inputOnChange = function inputOnChange(event) {
-    var value = event.target.value;
-    var hexValue = "#".concat(value);
-
-    if (!(hueSliderRef !== null && hueSliderRef !== void 0 && hueSliderRef.current) || !(saturationLightnessPanelRef !== null && saturationLightnessPanelRef !== void 0 && saturationLightnessPanelRef.current)) {
-      return;
-    }
-
-    try {
-      var _color = utilities.getColorFromHex(hexValue);
-
-      setNewColorPickerPositions(_color);
-    } catch (e) {
-      setColor(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, color), {}, {
-        hex: hexValue
-      }));
-    }
-  };
-
-  var setNewColorPickerPositions = function setNewColorPickerPositions(newColor) {
-    var _getIndicatorPosition = utilities.getIndicatorPositionsFromHEX({
-      hueSliderRef: hueSliderRef,
-      saturationLightnessPanelRef: saturationLightnessPanelRef,
-      hex: newColor.hex
-    }),
-        saturationLightnessPointer = _getIndicatorPosition.saturationLightnessPointer,
-        hueSliderPointer = _getIndicatorPosition.hueSliderPointer;
-
-    setColor(newColor);
-    setSaturationLightnessPointer(saturationLightnessPointer);
-    setHueSliderPointer(hueSliderPointer);
-  };
-
-  var restoreInitialColor = function restoreInitialColor() {
-    setColor(initialColor);
-  };
-
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "".concat(main_module['default'][css_classes.cssColorPicker])
-  }, /*#__PURE__*/React__default['default'].createElement(saturation_lightness_picker['default'], {
-    classes: classes,
-    saturationLightnessPanelRef: saturationLightnessPanelRef
-  }), /*#__PURE__*/React__default['default'].createElement(hue_picker['default'], {
-    hueSliderRef: hueSliderRef,
-    classes: classes
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: main_module['default'][css_classes.cssColorPickerPreviewContainer]
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "".concat(classes.preview, " ").concat(main_module['default'][css_classes.cssColorPickerPreview])
-  }), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: main_module['default'][css_classes.cssColorPickerInputContainer]
-  }, /*#__PURE__*/React__default['default'].createElement("span", null, "#"), /*#__PURE__*/React__default['default'].createElement(input['default'], {
-    id: "color-picker-id",
-    value: ((_color$hex2 = color === null || color === void 0 ? void 0 : color.hex) !== null && _color$hex2 !== void 0 ? _color$hex2 : '').replace(/#/g, ''),
-    onChange: inputOnChange
-  }))), !hideChooseCancelButtons && /*#__PURE__*/React__default['default'].createElement(buttons['default'], {
-    restoreInitialColor: restoreInitialColor
-  }));
-};
-
-var ColorPickerWithContext = function ColorPickerWithContext(_ref9) {
-  var initialColor = _ref9.initialColor,
-      onChange = _ref9.onChange,
-      hideChooseCancelButtons = _ref9.hideChooseCancelButtons,
-      name = _ref9.name;
-  var colorPickerContext = use_color_picker.useColorPicker({
-    initialColorHex: initialColor !== null && initialColor !== void 0 ? initialColor : '',
-    onChange: onChange
-  });
-  return /*#__PURE__*/React__default['default'].createElement(context.ColorPickerContext.Provider, {
-    value: colorPickerContext
-  }, /*#__PURE__*/React__default['default'].createElement("input", {
-    type: "hidden",
-    name: name
-  }), /*#__PURE__*/React__default['default'].createElement(PureColorPicker, {
-    hideChooseCancelButtons: hideChooseCancelButtons
-  }));
-};
-
+const useStyles = reactJss_esm.createUseStyles({
+    saturationLightnessPanel: {
+        background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`
+    },
+    saturationLightnessPointer: {
+        transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,
+        '& > div': {
+            background: ({ color: { hex } }) => hex
+        }
+    },
+    preview: {
+        background: ({ color: { hex } }) => hex
+    },
+    huePointer: {
+        transform: ({ hueSliderPointer: { top, left }, screenName }) => screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,
+        '& > div': {
+            background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`
+        }
+    },
+    colorPreview: {
+        background: ({ color: { hex } }) => hex
+    }
+});
+const PureColorPicker = ({ hideChooseCancelButtons }) => {
+    var _a;
+    const { color, setColor, initialColor, hueSliderPointer, saturationLightnessPointer, setHueSliderPointer, setSaturationLightnessPointer, screenName } = React.useContext(context.ColorPickerContext);
+    const saturationLightnessPanelRef = React.useRef(null);
+    const hueSliderRef = React.useRef(null);
+    const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });
+    React.useEffect(() => {
+        var _a;
+        const initialColor = utilities.getColorFromHex((_a = color.hex) !== null && _a !== void 0 ? _a : '');
+        setNewColorPickerPositions(initialColor);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const inputOnChange = (event) => {
+        const { value } = event.target;
+        const hexValue = `#${value}`;
+        if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
+            return;
+        }
+        try {
+            const color = utilities.getColorFromHex(hexValue);
+            setNewColorPickerPositions(color);
+        }
+        catch (e) {
+            setColor({ ...color, hex: hexValue });
+        }
+    };
+    const setNewColorPickerPositions = (newColor) => {
+        const { saturationLightnessPointer, hueSliderPointer } = utilities.getIndicatorPositionsFromHEX({
+            hueSliderRef,
+            saturationLightnessPanelRef,
+            hex: newColor.hex
+        });
+        setColor(newColor);
+        setSaturationLightnessPointer(saturationLightnessPointer);
+        setHueSliderPointer(hueSliderPointer);
+    };
+    const restoreInitialColor = () => {
+        setColor(initialColor);
+    };
+    return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPicker]}` },
+        React__default['default'].createElement(saturation_lightness_picker['default'], { classes: classes, saturationLightnessPanelRef: saturationLightnessPanelRef }),
+        React__default['default'].createElement(hue_picker['default'], { hueSliderRef: hueSliderRef, classes: classes }),
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerPreviewContainer] },
+            React__default['default'].createElement("div", { className: `${classes.preview} ${main_module['default'][css_classes.cssColorPickerPreview]}` }),
+            React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerInputContainer] },
+                React__default['default'].createElement("span", null, "#"),
+                React__default['default'].createElement(input['default'], { id: "color-picker-id", value: ((_a = color === null || color === void 0 ? void 0 : color.hex) !== null && _a !== void 0 ? _a : '').replace(/#/g, ''), onChange: inputOnChange }))),
+        !hideChooseCancelButtons && React__default['default'].createElement(buttons['default'], { restoreInitialColor: restoreInitialColor })));
+};
+const ColorPickerWithContext = ({ initialColor, onChange, hideChooseCancelButtons, name }) => {
+    const colorPickerContext = use_color_picker.useColorPicker({ initialColorHex: initialColor !== null && initialColor !== void 0 ? initialColor : '', onChange });
+    return (React__default['default'].createElement(context.ColorPickerContext.Provider, { value: colorPickerContext },
+        React__default['default'].createElement("input", { type: "hidden", name: name }),
+        React__default['default'].createElement(PureColorPicker, { hideChooseCancelButtons: hideChooseCancelButtons })));
+};
 var index = with_translation['default'](ColorPickerWithContext);
 
 exports.PureColorPicker = PureColorPicker;

package/build/cjs/packages/aurora/src/components/color_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker/use_color_picker.js

@@ -3,72 +3,37 @@
 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 useColorPicker = function useColorPicker(_ref) {
-  var initialColorHex = _ref.initialColorHex,
-      onChange = _ref.onChange;
-
-  var _useState = React.useState({
-    hue: 0,
-    saturation: constants.SATURATION_OFFSET,
-    lightness: 100,
-    hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : ''
-  }),
-      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-      color = _useState2[0],
-      setColor = _useState2[1];
-
-  var _useState3 = React.useState({
-    hue: 0,
-    saturation: constants.SATURATION_OFFSET,
-    lightness: 100,
-    hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : ''
-  }),
-      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-      initialColor = _useState4[0],
-      setInitialColor = _useState4[1];
-
-  var _useState5 = React.useState({
-    top: 0,
-    left: 0
-  }),
-      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-      hueSliderPointer = _useState6[0],
-      setHueSliderPointer = _useState6[1];
-
-  var _useState7 = React.useState({
-    left: 0,
-    top: 0
-  }),
-      _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-      saturationLightnessPointer = _useState8[0],
-      setSaturationLightnessPointer = _useState8[1];
-
-  var screenName = use_screen_detect.useScreenDetect();
-  React.useEffect(function () {
-    onChange === null || onChange === void 0 || onChange(color);
-  }, [color]);
-  React.useEffect(function () {
-    setColor(function (prevState) {
-      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, prevState), {}, {
-        hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : ''
-      });
-    });
-  }, [initialColorHex]);
-  return {
-    color: color,
-    setColor: setColor,
-    initialColor: initialColor,
-    setInitialColor: setInitialColor,
-    hueSliderPointer: hueSliderPointer,
-    setHueSliderPointer: setHueSliderPointer,
-    screenName: screenName,
-    saturationLightnessPointer: saturationLightnessPointer,
-    setSaturationLightnessPointer: setSaturationLightnessPointer
-  };
+const useColorPicker = ({ initialColorHex, onChange }) => {
+    const [color, setColor] = React.useState({ hue: 0, saturation: constants.SATURATION_OFFSET, lightness: 100, hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : '' });
+    const [initialColor, setInitialColor] = React.useState({
+        hue: 0,
+        saturation: constants.SATURATION_OFFSET,
+        lightness: 100,
+        hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : ''
+    });
+    const [hueSliderPointer, setHueSliderPointer] = React.useState({ top: 0, left: 0 });
+    const [saturationLightnessPointer, setSaturationLightnessPointer] = React.useState({ left: 0, top: 0 });
+    const screenName = use_screen_detect.useScreenDetect();
+    React.useEffect(() => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(color);
+    }, [color]);
+    React.useEffect(() => {
+        setColor((prevState) => ({ ...prevState, hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : '' }));
+    }, [initialColorHex]);
+    return {
+        color,
+        setColor,
+        initialColor,
+        setInitialColor,
+        hueSliderPointer,
+        setHueSliderPointer,
+        screenName,
+        saturationLightnessPointer,
+        setSaturationLightnessPointer
+    };
 };
 
 exports.useColorPicker = useColorPicker;

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

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

@@ -2,97 +2,50 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+require('react');
 var constants = require('./constants.js');
 var range_mappings = require('../../utilities/range/range_mappings.js');
 var color_converter = require('../../utilities/colors/color_converter.js');
 
-/**
- * Function to calculate indicators position based on hex value
- * @param saturationLightnessPanelRef, reference
- * @param hueSliderRef, reference
- * @param hex, string with color
- * @return
- */
-var getIndicatorPositionsFromHEX = function getIndicatorPositionsFromHEX(_ref) {
-  var _saturationLightnessP, _hueSliderRef$current;
-
-  var saturationLightnessPanelRef = _ref.saturationLightnessPanelRef,
-      hueSliderRef = _ref.hueSliderRef,
-      hex = _ref.hex;
-
-  var _ColorConverter$hex2h = color_converter.ColorConverter.hex2hsv(hex),
-      hue = _ColorConverter$hex2h.hue,
-      saturation = _ColorConverter$hex2h.saturation,
-      value = _ColorConverter$hex2h.value;
-
-  var _ref2 = (saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 || (_saturationLightnessP = saturationLightnessPanelRef.current) === null || _saturationLightnessP === void 0 ? void 0 : _saturationLightnessP.getBoundingClientRect()) || {},
-      _ref2$width = _ref2.width,
-      width = _ref2$width === void 0 ? 0 : _ref2$width,
-      _ref2$height = _ref2.height,
-      height = _ref2$height === void 0 ? 0 : _ref2$height;
-
-  var hueSliderRect = hueSliderRef === null || hueSliderRef === void 0 || (_hueSliderRef$current = hueSliderRef.current) === null || _hueSliderRef$current === void 0 ? void 0 : _hueSliderRef$current.getBoundingClientRect();
-  var saturationLightnessPointer = {
-    left: range_mappings.constrainToRange(saturation * width / constants.MAX_SATURATION_VALUE, 0, width),
-    top: range_mappings.constrainToRange((constants.MAX_LIGHTNESS_VALUE - value) * height / constants.MAX_LIGHTNESS_VALUE, 0, height)
-  };
-  var hueSliderPointer = {
-    top: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.height) || 0) / constants.MAX_HUE_VALUE),
-    left: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.width) || 0) / constants.MAX_HUE_VALUE)
-  };
-  return {
-    saturationLightnessPointer: saturationLightnessPointer,
-    hueSliderPointer: hueSliderPointer
-  };
-};
-var getColorFromHex = function getColorFromHex(value) {
-  var _ColorConverter$hex2h2 = color_converter.ColorConverter.hex2hsl(value),
-      hue = _ColorConverter$hex2h2.hue,
-      saturation = _ColorConverter$hex2h2.saturation,
-      lightness = _ColorConverter$hex2h2.lightness;
-
-  return {
-    hue: hue,
-    saturation: saturation,
-    lightness: lightness,
-    hex: value
-  };
-};
-var getHueFromPosition = function getHueFromPosition(_ref3) {
-  var hueSliderRect = _ref3.hueSliderRect,
-      position = _ref3.position,
-      screenName = _ref3.screenName;
-  var clientY = position.clientY,
-      clientX = position.clientX;
-  var top = hueSliderRect.top,
-      height = hueSliderRect.height,
-      width = hueSliderRect.width,
-      left = hueSliderRect.left;
-  var distance = screenName === 'xs' ? range_mappings.constrainToRange(clientX - left, 0, width) : range_mappings.constrainToRange(clientY - top, 0, height);
-  var hue = screenName === 'xs' ? distance * (constants.MAX_HUE_VALUE - 1) / width : distance * (constants.MAX_HUE_VALUE - 1) / height;
-  return {
-    hue: hue
-  };
-};
-var getSaturationLightnessFromPosition = function getSaturationLightnessFromPosition(_ref4) {
-  var elementRect = _ref4.elementRect,
-      position = _ref4.position;
-  var width = elementRect.width,
-      height = elementRect.height;
-
-  var _getIndicatorPosition = range_mappings.getIndicatorPositionFromPosition({
-    elementRect: elementRect,
-    position: position
-  }),
-      positionX = _getIndicatorPosition.positionX,
-      positionY = _getIndicatorPosition.positionY;
-
-  var saturation = positionX * constants.MAX_SATURATION_VALUE / width || constants.SATURATION_OFFSET;
-  var lightness = constants.MAX_LIGHTNESS_VALUE - positionY * (constants.MAX_LIGHTNESS_VALUE / 2) / height - saturation / 2;
-  return {
-    lightness: lightness,
-    saturation: saturation
-  };
+/**
+ * Function to calculate indicators position based on hex value
+ * @param saturationLightnessPanelRef, reference
+ * @param hueSliderRef, reference
+ * @param hex, string with color
+ * @return
+ */
+const getIndicatorPositionsFromHEX = ({ saturationLightnessPanelRef, hueSliderRef, hex }) => {
+    var _a, _b;
+    const { hue, saturation, value } = color_converter.ColorConverter.hex2hsv(hex);
+    const { width = 0, height = 0 } = ((_a = saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) || {};
+    const hueSliderRect = (_b = hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect();
+    const saturationLightnessPointer = {
+        left: range_mappings.constrainToRange((saturation * width) / constants.MAX_SATURATION_VALUE, 0, width),
+        top: range_mappings.constrainToRange(((constants.MAX_LIGHTNESS_VALUE - value) * height) / constants.MAX_LIGHTNESS_VALUE, 0, height)
+    };
+    const hueSliderPointer = {
+        top: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.height) || 0) / constants.MAX_HUE_VALUE),
+        left: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.width) || 0) / constants.MAX_HUE_VALUE)
+    };
+    return { saturationLightnessPointer, hueSliderPointer };
+};
+const getColorFromHex = (value) => {
+    const { hue, saturation, lightness } = color_converter.ColorConverter.hex2hsl(value);
+    return { hue, saturation, lightness, hex: value };
+};
+const getHueFromPosition = ({ hueSliderRect, position, screenName }) => {
+    const { clientY, clientX } = position;
+    const { top, height, width, left } = hueSliderRect;
+    const distance = screenName === 'xs' ? range_mappings.constrainToRange(clientX - left, 0, width) : range_mappings.constrainToRange(clientY - top, 0, height);
+    const hue = screenName === 'xs' ? (distance * (constants.MAX_HUE_VALUE - 1)) / width : (distance * (constants.MAX_HUE_VALUE - 1)) / height;
+    return { hue };
+};
+const getSaturationLightnessFromPosition = ({ elementRect, position }) => {
+    const { width, height } = elementRect;
+    const { positionX, positionY } = range_mappings.getIndicatorPositionFromPosition({ elementRect, position });
+    const saturation = (positionX * constants.MAX_SATURATION_VALUE) / width || constants.SATURATION_OFFSET;
+    const lightness = constants.MAX_LIGHTNESS_VALUE - (positionY * (constants.MAX_LIGHTNESS_VALUE / 2)) / height - saturation / 2;
+    return { lightness, saturation };
 };
 
 exports.getColorFromHex = getColorFromHex;

package/build/cjs/packages/aurora/src/components/color_picker/utilities.js.map

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

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

@@ -10,11 +10,8 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var AdditionalInfo = function AdditionalInfo(_ref) {
-  var children = _ref.children;
-  return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: main_module['default'][css_classes.cssControlsAdditionalInfo]
-  }, children);
+const AdditionalInfo = ({ children }) => {
+    return React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssControlsAdditionalInfo] }, children);
 };
 
 exports.AdditionalInfo = AdditionalInfo;

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