@dreamcommerce/aurora 2.16.2 → 2.16.4

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

@@ -1,4 +1,5 @@
 import React, { useContext, useRef, useEffect } from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
 import { cssColorPicker, cssColorPickerPreviewContainer, cssColorPickerPreview, cssColorPickerInputContainer } from './css_classes.js';
 import { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities.js';
@@ -11,84 +12,164 @@ import SaturationLightnessPicker from './components/saturation_lightness_picker.
 import { useColorPicker } from './use_color_picker.js';
 import withTranslation from '../../utilities/translation/with_translation.js';
 
-const useStyles = 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 } = useContext(ColorPickerContext);
-    const saturationLightnessPanelRef = useRef(null);
-    const hueSliderRef = useRef(null);
-    const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });
-    useEffect(() => {
-        var _a;
-        const initialColor = 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 = getColorFromHex(hexValue);
-            setNewColorPickerPositions(color);
-        }
-        catch (e) {
-            setColor({ ...color, hex: hexValue });
-        }
-    };
-    const setNewColorPickerPositions = (newColor) => {
-        const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({
-            hueSliderRef,
-            saturationLightnessPanelRef,
-            hex: newColor.hex
-        });
-        setColor(newColor);
-        setSaturationLightnessPointer(saturationLightnessPointer);
-        setHueSliderPointer(hueSliderPointer);
-    };
-    const restoreInitialColor = () => {
-        setColor(initialColor);
-    };
-    return (React.createElement("div", { className: `${styles[cssColorPicker]}` },
-        React.createElement(SaturationLightnessPicker, { classes: classes, saturationLightnessPanelRef: saturationLightnessPanelRef }),
-        React.createElement(HuePicker, { hueSliderRef: hueSliderRef, classes: classes }),
-        React.createElement("div", { className: styles[cssColorPickerPreviewContainer] },
-            React.createElement("div", { className: `${classes.preview} ${styles[cssColorPickerPreview]}` }),
-            React.createElement("div", { className: styles[cssColorPickerInputContainer] },
-                React.createElement("span", null, "#"),
-                React.createElement(Input, { 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.createElement(ColorPickerButtons, { restoreInitialColor: restoreInitialColor })));
-};
-const ColorPickerWithContext = ({ initialColor, onChange, hideChooseCancelButtons, name }) => {
-    const colorPickerContext = useColorPicker({ initialColorHex: initialColor !== null && initialColor !== void 0 ? initialColor : '', onChange });
-    return (React.createElement(ColorPickerContext.Provider, { value: colorPickerContext },
-        React.createElement("input", { type: "hidden", name: name }),
-        React.createElement(PureColorPicker, { hideChooseCancelButtons: hideChooseCancelButtons })));
-};
+var useStyles = 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 = useContext(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 = useRef(null);
+  var hueSliderRef = useRef(null);
+  var classes = useStyles({
+    color: color,
+    saturationLightnessPointer: saturationLightnessPointer,
+    hueSliderPointer: hueSliderPointer,
+    screenName: screenName
+  });
+  useEffect(function () {
+    var _color$hex;
+
+    var initialColor = 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 = getColorFromHex(hexValue);
+
+      setNewColorPickerPositions(_color);
+    } catch (e) {
+      setColor(_objectSpread2(_objectSpread2({}, color), {}, {
+        hex: hexValue
+      }));
+    }
+  };
+
+  var setNewColorPickerPositions = function setNewColorPickerPositions(newColor) {
+    var _getIndicatorPosition = 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.createElement("div", {
+    className: "".concat(styles[cssColorPicker])
+  }, /*#__PURE__*/React.createElement(SaturationLightnessPicker, {
+    classes: classes,
+    saturationLightnessPanelRef: saturationLightnessPanelRef
+  }), /*#__PURE__*/React.createElement(HuePicker, {
+    hueSliderRef: hueSliderRef,
+    classes: classes
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerPreviewContainer]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "".concat(classes.preview, " ").concat(styles[cssColorPickerPreview])
+  }), /*#__PURE__*/React.createElement("div", {
+    className: styles[cssColorPickerInputContainer]
+  }, /*#__PURE__*/React.createElement("span", null, "#"), /*#__PURE__*/React.createElement(Input, {
+    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.createElement(ColorPickerButtons, {
+    restoreInitialColor: restoreInitialColor
+  }));
+};
+
+var ColorPickerWithContext = function ColorPickerWithContext(_ref9) {
+  var initialColor = _ref9.initialColor,
+      onChange = _ref9.onChange,
+      hideChooseCancelButtons = _ref9.hideChooseCancelButtons,
+      name = _ref9.name;
+  var colorPickerContext = useColorPicker({
+    initialColorHex: initialColor !== null && initialColor !== void 0 ? initialColor : '',
+    onChange: onChange
+  });
+  return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
+    value: colorPickerContext
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "hidden",
+    name: name
+  }), /*#__PURE__*/React.createElement(PureColorPicker, {
+    hideChooseCancelButtons: hideChooseCancelButtons
+  }));
+};
+
 var index = withTranslation(ColorPickerWithContext);
 
 export default index;

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

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

@@ -1,35 +1,70 @@
 import { useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { SATURATION_OFFSET } from './constants.js';
 import { useScreenDetect } from '../../hooks/use_screen_detect.js';
 
-const useColorPicker = ({ initialColorHex, onChange }) => {
-    const [color, setColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : '' });
-    const [initialColor, setInitialColor] = useState({
-        hue: 0,
-        saturation: SATURATION_OFFSET,
-        lightness: 100,
-        hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : ''
-    });
-    const [hueSliderPointer, setHueSliderPointer] = useState({ top: 0, left: 0 });
-    const [saturationLightnessPointer, setSaturationLightnessPointer] = useState({ left: 0, top: 0 });
-    const screenName = useScreenDetect();
-    useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(color);
-    }, [color]);
-    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 = useState({
+    hue: 0,
+    saturation: SATURATION_OFFSET,
+    lightness: 100,
+    hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : ''
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      color = _useState2[0],
+      setColor = _useState2[1];
+
+  var _useState3 = useState({
+    hue: 0,
+    saturation: SATURATION_OFFSET,
+    lightness: 100,
+    hex: initialColorHex !== null && initialColorHex !== void 0 ? initialColorHex : ''
+  }),
+      _useState4 = _slicedToArray(_useState3, 2),
+      initialColor = _useState4[0],
+      setInitialColor = _useState4[1];
+
+  var _useState5 = useState({
+    top: 0,
+    left: 0
+  }),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hueSliderPointer = _useState6[0],
+      setHueSliderPointer = _useState6[1];
+
+  var _useState7 = useState({
+    left: 0,
+    top: 0
+  }),
+      _useState8 = _slicedToArray(_useState7, 2),
+      saturationLightnessPointer = _useState8[0],
+      setSaturationLightnessPointer = _useState8[1];
+
+  var screenName = useScreenDetect();
+  useEffect(function () {
+    onChange === null || onChange === void 0 || onChange(color);
+  }, [color]);
+  useEffect(function () {
+    setColor(function (prevState) {
+      return _objectSpread2(_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
+  };
 };
 
 export { useColorPicker };

package/build/esm/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;"}
+{"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;"}

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

@@ -9,39 +9,88 @@ import { ColorConverter } from '../../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 } = 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: constrainToRange((saturation * width) / MAX_SATURATION_VALUE, 0, width),
-        top: constrainToRange(((MAX_LIGHTNESS_VALUE - value) * height) / MAX_LIGHTNESS_VALUE, 0, height)
-    };
-    const hueSliderPointer = {
-        top: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.height) || 0) / MAX_HUE_VALUE),
-        left: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.width) || 0) / MAX_HUE_VALUE)
-    };
-    return { saturationLightnessPointer, hueSliderPointer };
-};
-const getColorFromHex = (value) => {
-    const { hue, saturation, lightness } = 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' ? constrainToRange(clientX - left, 0, width) : constrainToRange(clientY - top, 0, height);
-    const hue = screenName === 'xs' ? (distance * (MAX_HUE_VALUE - 1)) / width : (distance * (MAX_HUE_VALUE - 1)) / height;
-    return { hue };
-};
-const getSaturationLightnessFromPosition = ({ elementRect, position }) => {
-    const { width, height } = elementRect;
-    const { positionX, positionY } = getIndicatorPositionFromPosition({ elementRect, position });
-    const saturation = (positionX * MAX_SATURATION_VALUE) / width || SATURATION_OFFSET;
-    const lightness = MAX_LIGHTNESS_VALUE - (positionY * (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 = 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: constrainToRange(saturation * width / MAX_SATURATION_VALUE, 0, width),
+    top: constrainToRange((MAX_LIGHTNESS_VALUE - value) * height / MAX_LIGHTNESS_VALUE, 0, height)
+  };
+  var hueSliderPointer = {
+    top: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.height) || 0) / MAX_HUE_VALUE),
+    left: hue * (((hueSliderRect === null || hueSliderRect === void 0 ? void 0 : hueSliderRect.width) || 0) / MAX_HUE_VALUE)
+  };
+  return {
+    saturationLightnessPointer: saturationLightnessPointer,
+    hueSliderPointer: hueSliderPointer
+  };
+};
+var getColorFromHex = function getColorFromHex(value) {
+  var _ColorConverter$hex2h2 = 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' ? constrainToRange(clientX - left, 0, width) : constrainToRange(clientY - top, 0, height);
+  var hue = screenName === 'xs' ? distance * (MAX_HUE_VALUE - 1) / width : distance * (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 = getIndicatorPositionFromPosition({
+    elementRect: elementRect,
+    position: position
+  }),
+      positionX = _getIndicatorPosition.positionX,
+      positionY = _getIndicatorPosition.positionY;
+
+  var saturation = positionX * MAX_SATURATION_VALUE / width || SATURATION_OFFSET;
+  var lightness = MAX_LIGHTNESS_VALUE - positionY * (MAX_LIGHTNESS_VALUE / 2) / height - saturation / 2;
+  return {
+    lightness: lightness,
+    saturation: saturation
+  };
 };
 
 export { getColorFromHex, getHueFromPosition, getIndicatorPositionsFromHEX, getSaturationLightnessFromPosition };

package/build/esm/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-label-input.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface IColorLabelInputProps {
+    id: string;
+    name?: string;
+}
+export declare const ColorLabelInput: React.FC<IColorLabelInputProps>;
+export {};

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

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import Input from '../../controls/components/input.js';
+import { ColorPickerNewContext } from '../context.js';
+
+var ColorLabelInput = function ColorLabelInput(_ref) {
+  var id = _ref.id,
+      name = _ref.name;
+
+  var _useContext = useContext(ColorPickerNewContext),
+      hex = _useContext.hex;
+
+  return /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: id,
+    name: name,
+    value: "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase()),
+    readOnly: true
+  });
+};
+
+export { ColorLabelInput };
+//# sourceMappingURL=color-label-input.js.map

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-footer.d.ts

@@ -0,0 +1 @@
+export declare const ColorPickerFooter: () => JSX.Element;

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

@@ -0,0 +1,47 @@
+import React, { useContext } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import Button from '../../button/index.js';
+import { DropdownContext } from '../../dropdown/context/index.js';
+import { ColorPickerNewContext } from '../context.js';
+import { cssColorPickerFooter } from '../css_classes.js';
+import { getAllColorTypes } from '../utilities.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+
+var ColorPickerFooter = function ColorPickerFooter() {
+  var _useContext = useContext(DropdownContext),
+      closeDropdown = _useContext.closeDropdown;
+
+  var _useContext2 = useContext(ColorPickerNewContext),
+      color = _useContext2.color,
+      handleCancel = _useContext2.handleCancel,
+      handleSave = _useContext2.handleSave;
+
+  var _useTranslation = useTranslation(),
+      _useTranslation2 = _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(getAllColorTypes(color));
+  };
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerFooter])
+  }, /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    variant: "outline",
+    onClick: handleCancelButton
+  }, t('cancel')), /*#__PURE__*/React.createElement(Button, {
+    size: "small",
+    onClick: handleSaveButton
+  }, t('save')));
+};
+
+export { ColorPickerFooter };
+//# sourceMappingURL=color-picker-footer.js.map

package/build/esm/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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color-picker-header.d.ts

@@ -0,0 +1 @@
+export declare const ColorPickerHeader: () => JSX.Element;

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

@@ -0,0 +1,49 @@
+import React, { useContext, useEffect } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { DropdownContext } from '../../dropdown/context/index.js';
+import { ColorPickerNewContext } from '../context.js';
+import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
+import IconClose from '../../../assets/icon_close.js';
+
+var ColorPickerHeader = function ColorPickerHeader() {
+  var _useContext = useContext(ColorPickerNewContext),
+      handleCancel = _useContext.handleCancel;
+
+  var _useTranslation = useTranslation(),
+      _useTranslation2 = _slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
+
+  var _useContext2 = useContext(DropdownContext),
+      closeDropdown = _useContext2.closeDropdown,
+      isOpen = _useContext2.isOpen;
+
+  var handleCancelButton = function handleCancelButton() {
+    closePicker();
+  };
+
+  var closePicker = function closePicker() {
+    closeDropdown === null || closeDropdown === void 0 || closeDropdown();
+    handleCancel === null || handleCancel === void 0 || handleCancel();
+  };
+
+  useEffect(function () {
+    if (!isOpen) return;
+    document.addEventListener('visibilitychange', closePicker);
+    return function () {
+      return document.removeEventListener('visibilitychange', closePicker);
+    };
+  }, [isOpen]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "".concat(styles[cssColorPickerHeader])
+  }, t('Select color'), /*#__PURE__*/React.createElement("button", {
+    onClick: handleCancelButton,
+    className: "".concat(styles[cssColorPickerCloseIcon])
+  }, /*#__PURE__*/React.createElement(IconClose, {
+    size: "m"
+  })));
+};
+
+export { ColorPickerHeader };
+//# sourceMappingURL=color-picker-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color-picker-inputs/color-picker-inputs-hex.d.ts

@@ -0,0 +1 @@
+export declare const ColorPickerInputsHex: () => JSX.Element;