@dreamcommerce/aurora 2.16.2 → 2.16.4

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

@@ -3,6 +3,7 @@
 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');
@@ -19,84 +20,164 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-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 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
+  }));
+};
+
 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,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;"}
+{"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;"}

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

@@ -3,37 +3,72 @@
 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');
 
-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
-    };
+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
+  };
 };
 
 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;"}
+{"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;"}

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

@@ -13,39 +13,88 @@ var color_converter = require('../../utilities/colors/color_converter.js');
  * @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 };
+ */
+
+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
+  };
 };
 
 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;"}
+{"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;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-label-input.js

@@ -0,0 +1,30 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var input = require('../../controls/components/input.js');
+var context = require('../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorLabelInput = function ColorLabelInput(_ref) {
+  var id = _ref.id,
+      name = _ref.name;
+
+  var _useContext = React.useContext(context.ColorPickerNewContext),
+      hex = _useContext.hex;
+
+  return /*#__PURE__*/React__default['default'].createElement(input['default'], {
+    type: "text",
+    id: id,
+    name: name,
+    value: "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase()),
+    readOnly: true
+  });
+};
+
+exports.ColorLabelInput = ColorLabelInput;
+//# sourceMappingURL=color-label-input.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-label-input.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;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js

@@ -0,0 +1,55 @@
+'use strict';
+
+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 index$1 = require('../../button/index.js');
+var index = require('../../dropdown/context/index.js');
+var context = require('../context.js');
+var css_classes = require('../css_classes.js');
+var utilities = require('../utilities.js');
+var main_module = require('../../../css/color_picker_new/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 ColorPickerFooter = function ColorPickerFooter() {
+  var _useContext = React.useContext(index.DropdownContext),
+      closeDropdown = _useContext.closeDropdown;
+
+  var _useContext2 = React.useContext(context.ColorPickerNewContext),
+      color = _useContext2.color,
+      handleCancel = _useContext2.handleCancel,
+      handleSave = _useContext2.handleSave;
+
+  var _useTranslation = useTranslation.useTranslation(),
+      _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
+
+  var handleCancelButton = function handleCancelButton() {
+    closeDropdown === null || closeDropdown === void 0 || closeDropdown();
+    handleCancel === null || handleCancel === void 0 || handleCancel();
+  };
+
+  var handleSaveButton = function handleSaveButton() {
+    closeDropdown === null || closeDropdown === void 0 || closeDropdown();
+    handleSave(utilities.getAllColorTypes(color));
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "".concat(main_module['default'][css_classes.cssColorPickerFooter])
+  }, /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
+    size: "small",
+    variant: "outline",
+    onClick: handleCancelButton
+  }, t('cancel')), /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
+    size: "small",
+    onClick: handleSaveButton
+  }, t('save')));
+};
+
+exports.ColorPickerFooter = ColorPickerFooter;
+//# sourceMappingURL=color-picker-footer.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}