@dreamcommerce/aurora 0.4.3 → 0.4.4-1

package/build/esm/packages/aurora/src/components/buttons_group/css_classes.js

@@ -1,7 +1,7 @@
-var cssButtonsGroup = 'buttons-group';
-var cssButtonsGroupHCenter = "".concat(cssButtonsGroup, "_hcenter");
-var cssButtonsGroupHRight = "".concat(cssButtonsGroup, "_hright");
-var cssButtonsGroupReverseOrder = "".concat(cssButtonsGroup, "_reverse-order");
+const cssButtonsGroup = 'buttons-group';
+const cssButtonsGroupHCenter = `${cssButtonsGroup}_hcenter`;
+const cssButtonsGroupHRight = `${cssButtonsGroup}_hright`;
+const cssButtonsGroupReverseOrder = `${cssButtonsGroup}_reverse-order`;
 
 export { cssButtonsGroup, cssButtonsGroupHCenter, cssButtonsGroupHRight, cssButtonsGroupReverseOrder };
 //# sourceMappingURL=css_classes.js.map

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

@@ -3,14 +3,12 @@ import classnames from 'classnames';
 import cssClasses from '../../css/buttons_group/main.module.less.js';
 import { cssButtonsGroup, cssButtonsGroupHCenter, cssButtonsGroupHRight, cssButtonsGroupReverseOrder } from './css_classes.js';
 
-var ButtonsGroup = function (_a) {
-    var _b;
-    var _c = _a.align, align = _c === void 0 ? 'right' : _c, isOrderReversed = _a.isOrderReversed, children = _a.children;
-    var classNames = classnames(cssClasses[cssButtonsGroup], (_b = {},
-        _b[cssClasses[cssButtonsGroupHCenter]] = align === 'center',
-        _b[cssClasses[cssButtonsGroupHRight]] = align === 'right',
-        _b[cssClasses[cssButtonsGroupReverseOrder]] = isOrderReversed,
-        _b));
+const ButtonsGroup = ({ align = 'right', isOrderReversed, children }) => {
+    const classNames = classnames(cssClasses[cssButtonsGroup], {
+        [cssClasses[cssButtonsGroupHCenter]]: align === 'center',
+        [cssClasses[cssButtonsGroupHRight]]: align === 'right',
+        [cssClasses[cssButtonsGroupReverseOrder]]: isOrderReversed
+    });
     return React.createElement("div", { className: classNames }, children);
 };
 

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

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

@@ -1,6 +1,5 @@
 import React, { useContext } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
-import { __assign } from '../../../../../../_virtual/_tslib.js';
 import Button from '../../button/index.js';
 import ButtonsGroup from '../../buttons_group/index.js';
 import styles from '../../../css/color_picker/main.module.less.js';
@@ -8,31 +7,30 @@ import { cssColorPickerButtonsGroup } from '../css_classes.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
 import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
 
-var ColorPickerButtons = function (_a) {
-    var restoreInitialColor = _a.restoreInitialColor;
-    var t = useTranslation()[0];
-    var toggleDropdown = useContext(DropdownContext).toggleDropdown;
-    var screenSize = useScreenDetect();
-    var onCancel = function () {
+const ColorPickerButtons = ({ restoreInitialColor }) => {
+    const [t] = useTranslation();
+    const { toggleDropdown } = useContext(DropdownContext);
+    const screenSize = useScreenDetect();
+    const onCancel = () => {
         restoreInitialColor();
         toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
     };
-    var onChoose = function () {
+    const onChoose = () => {
         toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
     };
-    var primaryButtonProps = {
+    const primaryButtonProps = {
         variant: screenSize === 'xs' ? undefined : 'link',
         size: screenSize === 'xs' ? 'small' : undefined
     };
-    var secondaryButtonProps = {
+    const secondaryButtonProps = {
         variant: screenSize === 'xs' ? 'outline' : 'link',
         size: screenSize === 'xs' ? 'small' : undefined,
         color: screenSize === 'xs' ? undefined : 'secondary'
     };
     return (React.createElement("div", { className: styles[cssColorPickerButtonsGroup] },
         React.createElement(ButtonsGroup, null,
-            React.createElement(Button, __assign({ as: "button" }, secondaryButtonProps, { onClick: onCancel }), t('cancel')),
-            React.createElement(Button, __assign({ as: "button" }, primaryButtonProps, { onClick: onChoose }), t('choose')))));
+            React.createElement(Button, { as: "button", ...secondaryButtonProps, onClick: onCancel }, t('cancel')),
+            React.createElement(Button, { as: "button", ...primaryButtonProps, onClick: onChoose }, t('choose')))));
 };
 
 export default ColorPickerButtons;

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

@@ -1 +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;"}
+{"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;"}

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

@@ -1,5 +1,4 @@
 import React, { useContext } from 'react';
-import { __assign } from '../../../../../../_virtual/_tslib.js';
 import styles from '../../../css/color_picker/main.module.less.js';
 import { getIndicatorPositionFromPosition } from '../../../utilities/range/range_mappings.js';
 import { ColorConverter } from '../../../utilities/colors/color_converter.js';
@@ -8,33 +7,36 @@ import { mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition
 import { ColorPickerContext } from '../context.js';
 import { cssColorPickerHuePicker, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
 
-var HuePicker = function (_a) {
-    var hueSliderRef = _a.hueSliderRef, classes = _a.classes;
-    var _b = useContext(ColorPickerContext), setColor = _b.setColor, setHueSliderPointer = _b.setHueSliderPointer, screenName = _b.screenName;
-    var onSliderEvent = function (position) {
+const HuePicker = ({ hueSliderRef, classes }) => {
+    const { setColor, setHueSliderPointer, screenName } = useContext(ColorPickerContext);
+    const onSliderEvent = (position) => {
         if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
             return;
         }
-        var hue = getHueFromPosition({
+        const { hue } = getHueFromPosition({
             hueSliderRect: hueSliderRef.current.getBoundingClientRect(),
-            position: position,
-            screenName: screenName
-        }).hue;
-        var _a = getIndicatorPositionFromPosition({
+            position,
+            screenName
+        });
+        const { positionY, positionX } = getIndicatorPositionFromPosition({
             elementRect: hueSliderRef.current.getBoundingClientRect(),
-            position: position
-        }), positionY = _a.positionY, positionX = _a.positionX;
-        setColor(function (color) { return (__assign(__assign({}, color), { hue: hue, hex: ColorConverter.hsl2hex({ hue: hue, saturation: color.saturation, lightness: color.lightness }) })); });
+            position
+        });
+        setColor((color) => ({
+            ...color,
+            hue,
+            hex: ColorConverter.hsl2hex({ hue, saturation: color.saturation, lightness: color.lightness })
+        }));
         setHueSliderPointer({ top: positionY, left: positionX });
     };
-    var onSliderDown = function (event) {
+    const onSliderDown = (event) => {
         if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
             return;
         }
         onSliderEvent(mapMouseEventToPosition(event));
         registerOnMouseEvents(onSliderEvent);
     };
-    var onTouchStart = function (event) {
+    const onTouchStart = (event) => {
         if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current)) {
             return;
         }
@@ -42,7 +44,7 @@ var HuePicker = function (_a) {
         registerOnTouchEvents(onSliderEvent);
     };
     return (React.createElement("div", { className: styles[cssColorPickerHuePicker], ref: hueSliderRef, onMouseDown: onSliderDown, onTouchStart: onTouchStart },
-        React.createElement("div", { className: "".concat(classes.huePointer, " ").concat(styles[cssColorPickerPointer]), onDrag: onSliderEvent, onTouchStart: onTouchStart },
+        React.createElement("div", { className: `${classes.huePointer} ${styles[cssColorPickerPointer]}`, onDrag: onSliderEvent, onTouchStart: onTouchStart },
             React.createElement("div", { className: styles[cssColorPickerPointerInside] }))));
 };
 

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

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

@@ -6,27 +6,23 @@ import { cssColorPickerInputColorPreview } from '../css_classes.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
 import InputWrapper from '../../controls/components/input_wrapper.js';
 
-var useStyles = createUseStyles({
+const useStyles = createUseStyles({
     colorPreview: {
-        background: function (_a) {
-            var hex = _a.color.hex;
-            return hex;
-        }
+        background: ({ color: { hex } }) => hex
     }
 });
-var ColorPickerLabel = function (_a) {
-    var name = _a.name, isRequired = _a.isRequired, id = _a.id;
-    var _b = useContext(ColorPickerContext), setInitialColor = _b.setInitialColor, color = _b.color;
-    var isOpen = useContext(DropdownContext).isOpen;
-    var classes = useStyles({ color: color });
-    useEffect(function () {
+const ColorPickerLabel = ({ name, isRequired, id }) => {
+    const { setInitialColor, color } = useContext(ColorPickerContext);
+    const { isOpen } = useContext(DropdownContext);
+    const classes = useStyles({ color });
+    useEffect(() => {
         if (isOpen) {
             setInitialColor(color);
         }
         // eslint-disable-next-line
     }, [isOpen]);
     return (React.createElement(React.Fragment, null,
-        React.createElement(InputWrapper, { value: color === null || color === void 0 ? void 0 : color.hex, size: "small", isFocused: isOpen, preElements: React.createElement("div", { className: "".concat(classes.colorPreview, " ").concat(styles[cssColorPickerInputColorPreview]) }) }),
+        React.createElement(InputWrapper, { value: color === null || color === void 0 ? void 0 : color.hex, size: "small", isFocused: isOpen, preElements: React.createElement("div", { className: `${classes.colorPreview} ${styles[cssColorPickerInputColorPreview]}` }) }),
         React.createElement("input", { type: "hidden", id: id, name: name, value: (color === null || color === void 0 ? void 0 : color.hex) || '', "aria-required": isRequired })));
 };
 

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

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

@@ -1,30 +1,33 @@
 import React, { useContext } from 'react';
-import { __assign } from '../../../../../../_virtual/_tslib.js';
 import styles from '../../../css/color_picker/main.module.less.js';
 import { getIndicatorPositionFromPosition } from '../../../utilities/range/range_mappings.js';
 import { ColorConverter } from '../../../utilities/colors/color_converter.js';
 import { getSaturationLightnessFromPosition } from '../utilities.js';
-import { mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../../../utilities/events/event_registration.js';
+import { registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents, mapMouseEventToPosition } from '../../../utilities/events/event_registration.js';
 import { ColorPickerContext } from '../context.js';
 import { cssColorPickerSaturationLightnessPicker, cssColorPickerMask, cssColorPickerMaskWhite, cssColorPickerMaskBlack, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
 
-var SaturationLightnessPicker = function (_a) {
-    var classes = _a.classes, saturationLightnessPanelRef = _a.saturationLightnessPanelRef;
-    var _b = useContext(ColorPickerContext), setColor = _b.setColor, setSaturationLightnessPointer = _b.setSaturationLightnessPointer;
-    var saturationLightnessPickerEvent = function (position) {
+const SaturationLightnessPicker = ({ classes, saturationLightnessPanelRef }) => {
+    const { setColor, setSaturationLightnessPointer } = useContext(ColorPickerContext);
+    const saturationLightnessPickerEvent = (position) => {
         if (!saturationLightnessPanelRef.current) {
             return;
         }
-        var elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();
-        var _a = getIndicatorPositionFromPosition({ elementRect: elementRect, position: position }), positionX = _a.positionX, positionY = _a.positionY;
-        var _b = getSaturationLightnessFromPosition({ elementRect: elementRect, position: position }), lightness = _b.lightness, saturation = _b.saturation;
-        setColor(function (color) { return (__assign(__assign({}, color), { saturation: saturation, lightness: lightness, hex: ColorConverter.hsl2hex({ hue: color.hue, lightness: lightness, saturation: saturation }) })); });
+        const elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();
+        const { positionX, positionY } = getIndicatorPositionFromPosition({ elementRect, position });
+        const { lightness, saturation } = getSaturationLightnessFromPosition({ elementRect, position });
+        setColor((color) => ({
+            ...color,
+            saturation,
+            lightness,
+            hex: ColorConverter.hsl2hex({ hue: color.hue, lightness, saturation })
+        }));
         setSaturationLightnessPointer({
             left: positionX,
             top: positionY
         });
     };
-    var onMouseDown = function (event) {
+    const onMouseDown = (event) => {
         event.preventDefault();
         if (!(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
             return;
@@ -32,7 +35,7 @@ var SaturationLightnessPicker = function (_a) {
         saturationLightnessPickerEvent(mapMouseEventToPosition(event));
         registerOnMouseEvents(saturationLightnessPickerEvent);
     };
-    var onTouchStart = function (event) {
+    const onTouchStart = (event) => {
         event.preventDefault();
         if (!(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
             return;
@@ -40,10 +43,10 @@ var SaturationLightnessPicker = function (_a) {
         saturationLightnessPickerEvent(mapTouchEventToPosition(event));
         registerOnTouchEvents(saturationLightnessPickerEvent);
     };
-    return (React.createElement("div", { className: "".concat(classes.saturationLightnessPanel, " ").concat(styles[cssColorPickerSaturationLightnessPicker]), ref: saturationLightnessPanelRef, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
-        React.createElement("div", { className: "".concat(styles[cssColorPickerMask], " ").concat(styles[cssColorPickerMaskWhite]) }),
-        React.createElement("div", { className: "".concat(styles[cssColorPickerMask], " ").concat(styles[cssColorPickerMaskBlack]) }),
-        React.createElement("div", { className: "".concat(classes.saturationLightnessPointer, " ").concat(styles[cssColorPickerPointer]), onDrag: saturationLightnessPickerEvent, onTouchStart: onTouchStart },
+    return (React.createElement("div", { className: `${classes.saturationLightnessPanel} ${styles[cssColorPickerSaturationLightnessPicker]}`, ref: saturationLightnessPanelRef, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
+        React.createElement("div", { className: `${styles[cssColorPickerMask]} ${styles[cssColorPickerMaskWhite]}` }),
+        React.createElement("div", { className: `${styles[cssColorPickerMask]} ${styles[cssColorPickerMaskBlack]}` }),
+        React.createElement("div", { className: `${classes.saturationLightnessPointer} ${styles[cssColorPickerPointer]}`, onDrag: saturationLightnessPickerEvent, onTouchStart: onTouchStart },
             React.createElement("div", { className: styles[cssColorPickerPointerInside] }))));
 };
 

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

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

@@ -1,7 +1,7 @@
-var MAX_HUE_VALUE = 360;
-var MAX_LIGHTNESS_VALUE = 100;
-var MAX_SATURATION_VALUE = 100;
-var SATURATION_OFFSET = 0.00001; // To avoid package bug
+const MAX_HUE_VALUE = 360;
+const MAX_LIGHTNESS_VALUE = 100;
+const MAX_SATURATION_VALUE = 100;
+const SATURATION_OFFSET = 0.00001; // To avoid package bug
 
 export { MAX_HUE_VALUE, MAX_LIGHTNESS_VALUE, MAX_SATURATION_VALUE, SATURATION_OFFSET };
 //# sourceMappingURL=constants.js.map

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

@@ -1,13 +1,13 @@
 import { createContext } from 'react';
 
-var ColorPickerContext = createContext({
+const ColorPickerContext = createContext({
     color: {
         hue: 0,
         saturation: 0,
         lightness: 0,
         hex: ''
     },
-    setColor: function () { },
+    setColor: () => { },
     initialColor: {
         hue: 0,
         saturation: 0,
@@ -15,11 +15,11 @@ var ColorPickerContext = createContext({
         hex: ''
     },
     screenName: '',
-    setInitialColor: function () { },
+    setInitialColor: () => { },
     hueSliderPointer: { top: 0, left: 0 },
-    setHueSliderPointer: function () { },
+    setHueSliderPointer: () => { },
     saturationLightnessPointer: { top: 0, left: 0 },
-    setSaturationLightnessPointer: function () { }
+    setSaturationLightnessPointer: () => { }
 });
 
 export { ColorPickerContext };

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

@@ -1,15 +1,15 @@
-var cssColorPicker = 'color-picker';
-var cssColorPickerInputColorPreview = "".concat(cssColorPicker, "__input-color-preview");
-var cssColorPickerButtonsGroup = "".concat(cssColorPicker, "__buttons-group");
-var cssColorPickerHuePicker = "".concat(cssColorPicker, "__hue-picker");
-var cssColorPickerPointer = "".concat(cssColorPicker, "__pointer");
-var cssColorPickerPointerInside = "".concat(cssColorPicker, "__pointer-inside");
-var cssColorPickerSaturationLightnessPicker = "".concat(cssColorPicker, "__saturation-lightness-picker");
-var cssColorPickerMask = "".concat(cssColorPicker, "__mask");
-var cssColorPickerMaskWhite = "".concat(cssColorPickerMask, "_white");
-var cssColorPickerMaskBlack = "".concat(cssColorPickerMask, "_black");
-var cssColorPickerPreviewContainer = "".concat(cssColorPicker, "__preview-container");
-var cssColorPickerPreview = "".concat(cssColorPicker, "__preview");
+const cssColorPicker = 'color-picker';
+const cssColorPickerInputColorPreview = `${cssColorPicker}__input-color-preview`;
+const cssColorPickerButtonsGroup = `${cssColorPicker}__buttons-group`;
+const cssColorPickerHuePicker = `${cssColorPicker}__hue-picker`;
+const cssColorPickerPointer = `${cssColorPicker}__pointer`;
+const cssColorPickerPointerInside = `${cssColorPicker}__pointer-inside`;
+const cssColorPickerSaturationLightnessPicker = `${cssColorPicker}__saturation-lightness-picker`;
+const cssColorPickerMask = `${cssColorPicker}__mask`;
+const cssColorPickerMaskWhite = `${cssColorPickerMask}_white`;
+const cssColorPickerMaskBlack = `${cssColorPickerMask}_black`;
+const cssColorPickerPreviewContainer = `${cssColorPicker}__preview-container`;
+const cssColorPickerPreview = `${cssColorPicker}__preview`;
 
 export { cssColorPicker, cssColorPickerButtonsGroup, cssColorPickerHuePicker, cssColorPickerInputColorPreview, cssColorPickerMask, cssColorPickerMaskBlack, cssColorPickerMaskWhite, cssColorPickerPointer, cssColorPickerPointerInside, cssColorPickerPreview, cssColorPickerPreviewContainer, cssColorPickerSaturationLightnessPicker };
 //# sourceMappingURL=css_classes.js.map

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

@@ -1,5 +1,4 @@
 import React, { useContext, useRef } from 'react';
-import { __assign } from '../../../../../_virtual/_tslib.js';
 import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
 import Input from '../controls/components/input.js';
 import styles from '../../css/color_picker/main.module.less.js';
@@ -12,59 +11,37 @@ import ColorPickerButtons from './components/buttons.js';
 import { useColorPicker } from './use_color_picker.js';
 import withTranslation from '../../utilities/translation/with_translation.js';
 
-var useStyles = createUseStyles({
+const useStyles = createUseStyles({
     saturationLightnessPanel: {
-        background: function (_a) {
-            var hue = _a.color.hue;
-            return "hsl(".concat(hue, ",100%, 50%)");
-        }
+        background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`
     },
     saturationLightnessPointer: {
-        transform: function (_a) {
-            var _b = _a.saturationLightnessPointer, left = _b.left, top = _b.top;
-            return "translate3d(".concat(left - 10, "px,").concat(top - 10, "px,0px)");
-        },
+        transform: ({ saturationLightnessPointer: { left, top } }) => `translate3d(${left - 10}px,${top - 10}px,0px)`,
         '& > div': {
-            background: function (_a) {
-                var hex = _a.color.hex;
-                return hex;
-            }
+            background: ({ color: { hex } }) => hex
         }
     },
     preview: {
-        background: function (_a) {
-            var hex = _a.color.hex;
-            return hex;
-        }
+        background: ({ color: { hex } }) => hex
     },
     huePointer: {
-        transform: function (_a) {
-            var _b = _a.hueSliderPointer, top = _b.top, left = _b.left, screenName = _a.screenName;
-            return screenName === 'xs' ? "translate3d(".concat(left - 10, "px,0px,0px)") : "translate3d(0px,".concat(top - 10, "px,0px)");
-        },
+        transform: ({ hueSliderPointer: { top, left }, screenName }) => screenName === 'xs' ? `translate3d(${left - 10}px,0px,0px)` : `translate3d(0px,${top - 10}px,0px)`,
         '& > div': {
-            background: function (_a) {
-                var hue = _a.color.hue;
-                return "hsl(".concat(hue, ",100%, 50%)");
-            }
+            background: ({ color: { hue } }) => `hsl(${hue},100%, 50%)`
         }
     },
     colorPreview: {
-        background: function (_a) {
-            var hex = _a.color.hex;
-            return hex;
-        }
+        background: ({ color: { hex } }) => hex
     }
 });
-var PureColorPicker = function (_a) {
-    var hideChooseCancelButtons = _a.hideChooseCancelButtons;
-    var _b = useContext(ColorPickerContext), color = _b.color, setColor = _b.setColor, initialColor = _b.initialColor, hueSliderPointer = _b.hueSliderPointer, saturationLightnessPointer = _b.saturationLightnessPointer, setHueSliderPointer = _b.setHueSliderPointer, setSaturationLightnessPointer = _b.setSaturationLightnessPointer, screenName = _b.screenName;
-    var saturationLightnessPanelRef = useRef(null);
-    var hueSliderRef = useRef(null);
-    var classes = useStyles({ color: color, saturationLightnessPointer: saturationLightnessPointer, hueSliderPointer: hueSliderPointer, screenName: screenName });
-    var inputOnChange = function (event) {
-        var value = event.target.value;
-        var hexValue = value.charAt(0) !== '#' ? "#".concat(value) : value;
+const PureColorPicker = ({ hideChooseCancelButtons }) => {
+    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 });
+    const inputOnChange = (event) => {
+        const { value } = event.target;
+        const hexValue = value.charAt(0) !== '#' ? `#${value}` : value;
         if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
             return;
         }
@@ -72,35 +49,34 @@ var PureColorPicker = function (_a) {
             event.target.value = hexValue;
         }
         try {
-            var color_1 = getColorFromHex(hexValue);
-            var _a = getIndicatorPositionsFromHEX({
-                hueSliderRef: hueSliderRef,
-                saturationLightnessPanelRef: saturationLightnessPanelRef,
+            const color = getColorFromHex(hexValue);
+            const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({
+                hueSliderRef,
+                saturationLightnessPanelRef,
                 hex: event.target.value
-            }), saturationLightnessPointer_1 = _a.saturationLightnessPointer, hueSliderPointer_1 = _a.hueSliderPointer;
-            setColor(color_1);
-            setSaturationLightnessPointer(saturationLightnessPointer_1);
-            setHueSliderPointer(hueSliderPointer_1);
+            });
+            setColor(color);
+            setSaturationLightnessPointer(saturationLightnessPointer);
+            setHueSliderPointer(hueSliderPointer);
         }
         catch (e) {
-            setColor(__assign(__assign({}, color), { hex: hexValue }));
+            setColor({ ...color, hex: hexValue });
         }
     };
-    var restoreInitialColor = function () {
+    const restoreInitialColor = () => {
         setColor(initialColor);
     };
-    return (React.createElement("div", { className: "".concat(styles[cssColorPicker]) },
+    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: "".concat(classes.preview, " ").concat(styles[cssColorPickerPreview]) }),
+            React.createElement("div", { className: `${classes.preview} ${styles[cssColorPickerPreview]}` }),
             React.createElement("div", null,
                 React.createElement(Input, { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex, onChange: inputOnChange }))),
         !hideChooseCancelButtons && React.createElement(ColorPickerButtons, { restoreInitialColor: restoreInitialColor })));
 };
-var ColorPickerWithContext = function (_a) {
-    var initialColor = _a.initialColor, onChange = _a.onChange, hideChooseCancelButtons = _a.hideChooseCancelButtons, name = _a.name;
-    var colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange: onChange });
+const ColorPickerWithContext = ({ initialColor, onChange, hideChooseCancelButtons, name }) => {
+    const colorPickerContext = useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange });
     return (React.createElement(ColorPickerContext.Provider, { value: colorPickerContext },
         React.createElement("input", { type: "hidden", name: name }),
         React.createElement(PureColorPicker, { hideChooseCancelButtons: hideChooseCancelButtons })));

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;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;"}
+{"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;"}

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

@@ -1,36 +1,34 @@
 import { useState, useEffect } from 'react';
-import { __assign } from '../../../../../_virtual/_tslib.js';
 import { SATURATION_OFFSET } from './constants.js';
 import { useScreenDetect } from '../../hooks/use_screen_detect.js';
 
-var useColorPicker = function (_a) {
-    var initialColorHex = _a.initialColorHex, onChange = _a.onChange;
-    var _b = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex }), color = _b[0], setColor = _b[1];
-    var _c = useState({
+const useColorPicker = ({ initialColorHex, onChange }) => {
+    const [color, setColor] = useState({ hue: 0, saturation: SATURATION_OFFSET, lightness: 100, hex: initialColorHex });
+    const [initialColor, setInitialColor] = useState({
         hue: 0,
         saturation: SATURATION_OFFSET,
         lightness: 100,
         hex: initialColorHex
-    }), initialColor = _c[0], setInitialColor = _c[1];
-    var _d = useState({ top: 0, left: 0 }), hueSliderPointer = _d[0], setHueSliderPointer = _d[1];
-    var _e = useState({ left: 0, top: 0 }), saturationLightnessPointer = _e[0], setSaturationLightnessPointer = _e[1];
-    var screenName = useScreenDetect();
-    useEffect(function () {
+    });
+    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(function () {
-        setColor(function (prevState) { return (__assign(__assign({}, prevState), { hex: initialColorHex })); });
+    useEffect(() => {
+        setColor((prevState) => ({ ...prevState, hex: initialColorHex }));
     }, [initialColorHex]);
     return {
-        color: color,
-        setColor: setColor,
-        initialColor: initialColor,
-        setInitialColor: setInitialColor,
-        hueSliderPointer: hueSliderPointer,
-        setHueSliderPointer: setHueSliderPointer,
-        screenName: screenName,
-        saturationLightnessPointer: saturationLightnessPointer,
-        setSaturationLightnessPointer: setSaturationLightnessPointer
+        color,
+        setColor,
+        initialColor,
+        setInitialColor,
+        hueSliderPointer,
+        setHueSliderPointer,
+        screenName,
+        saturationLightnessPointer,
+        setSaturationLightnessPointer
     };
 };
 

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;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;"}