@dreamcommerce/aurora 0.4.1 → 0.4.4-1

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

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _tslib = require('../../../../../../_virtual/_tslib.js');
 var main_module = require('../../../css/color_picker/main.module.less.js');
 var range_mappings = require('../../../utilities/range/range_mappings.js');
 var color_converter = require('../../../utilities/colors/color_converter.js');
@@ -16,23 +15,27 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var SaturationLightnessPicker = function (_a) {
-    var classes = _a.classes, saturationLightnessPanelRef = _a.saturationLightnessPanelRef;
-    var _b = React.useContext(context.ColorPickerContext), setColor = _b.setColor, setSaturationLightnessPointer = _b.setSaturationLightnessPointer;
-    var saturationLightnessPickerEvent = function (position) {
+const SaturationLightnessPicker = ({ classes, saturationLightnessPanelRef }) => {
+    const { setColor, setSaturationLightnessPointer } = React.useContext(context.ColorPickerContext);
+    const saturationLightnessPickerEvent = (position) => {
         if (!saturationLightnessPanelRef.current) {
             return;
         }
-        var elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();
-        var _a = range_mappings.getIndicatorPositionFromPosition({ elementRect: elementRect, position: position }), positionX = _a.positionX, positionY = _a.positionY;
-        var _b = utilities.getSaturationLightnessFromPosition({ elementRect: elementRect, position: position }), lightness = _b.lightness, saturation = _b.saturation;
-        setColor(function (color) { return (_tslib.__assign(_tslib.__assign({}, color), { saturation: saturation, lightness: lightness, hex: color_converter.ColorConverter.hsl2hex({ hue: color.hue, lightness: lightness, saturation: saturation }) })); });
+        const elementRect = saturationLightnessPanelRef.current.getBoundingClientRect();
+        const { positionX, positionY } = range_mappings.getIndicatorPositionFromPosition({ elementRect, position });
+        const { lightness, saturation } = utilities.getSaturationLightnessFromPosition({ elementRect, position });
+        setColor((color) => ({
+            ...color,
+            saturation,
+            lightness,
+            hex: color_converter.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;
@@ -40,7 +43,7 @@ var SaturationLightnessPicker = function (_a) {
         saturationLightnessPickerEvent(event_registration.mapMouseEventToPosition(event));
         event_registration.registerOnMouseEvents(saturationLightnessPickerEvent);
     };
-    var onTouchStart = function (event) {
+    const onTouchStart = (event) => {
         event.preventDefault();
         if (!(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
             return;
@@ -48,10 +51,10 @@ var SaturationLightnessPicker = function (_a) {
         saturationLightnessPickerEvent(event_registration.mapTouchEventToPosition(event));
         event_registration.registerOnTouchEvents(saturationLightnessPickerEvent);
     };
-    return (React__default['default'].createElement("div", { className: "".concat(classes.saturationLightnessPanel, " ").concat(main_module['default'][css_classes.cssColorPickerSaturationLightnessPicker]), ref: saturationLightnessPanelRef, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
-        React__default['default'].createElement("div", { className: "".concat(main_module['default'][css_classes.cssColorPickerMask], " ").concat(main_module['default'][css_classes.cssColorPickerMaskWhite]) }),
-        React__default['default'].createElement("div", { className: "".concat(main_module['default'][css_classes.cssColorPickerMask], " ").concat(main_module['default'][css_classes.cssColorPickerMaskBlack]) }),
-        React__default['default'].createElement("div", { className: "".concat(classes.saturationLightnessPointer, " ").concat(main_module['default'][css_classes.cssColorPickerPointer]), onDrag: saturationLightnessPickerEvent, onTouchStart: onTouchStart },
+    return (React__default['default'].createElement("div", { className: `${classes.saturationLightnessPanel} ${main_module['default'][css_classes.cssColorPickerSaturationLightnessPicker]}`, ref: saturationLightnessPanelRef, onMouseDown: onMouseDown, onTouchStart: onTouchStart },
+        React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerMask]} ${main_module['default'][css_classes.cssColorPickerMaskWhite]}` }),
+        React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerMask]} ${main_module['default'][css_classes.cssColorPickerMaskBlack]}` }),
+        React__default['default'].createElement("div", { className: `${classes.saturationLightnessPointer} ${main_module['default'][css_classes.cssColorPickerPointer]}`, onDrag: saturationLightnessPickerEvent, onTouchStart: onTouchStart },
             React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerPointerInside] }))));
 };
 

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

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

@@ -2,10 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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
 
 exports.MAX_HUE_VALUE = MAX_HUE_VALUE;
 exports.MAX_LIGHTNESS_VALUE = MAX_LIGHTNESS_VALUE;

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

@@ -4,14 +4,14 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 
-var ColorPickerContext = React.createContext({
+const ColorPickerContext = React.createContext({
     color: {
         hue: 0,
         saturation: 0,
         lightness: 0,
         hex: ''
     },
-    setColor: function () { },
+    setColor: () => { },
     initialColor: {
         hue: 0,
         saturation: 0,
@@ -19,11 +19,11 @@ var ColorPickerContext = React.createContext({
         hex: ''
     },
     screenName: '',
-    setInitialColor: function () { },
+    setInitialColor: () => { },
     hueSliderPointer: { top: 0, left: 0 },
-    setHueSliderPointer: function () { },
+    setHueSliderPointer: () => { },
     saturationLightnessPointer: { top: 0, left: 0 },
-    setSaturationLightnessPointer: function () { }
+    setSaturationLightnessPointer: () => { }
 });
 
 exports.ColorPickerContext = ColorPickerContext;

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

@@ -2,18 +2,18 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-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`;
 
 exports.cssColorPicker = cssColorPicker;
 exports.cssColorPickerButtonsGroup = cssColorPickerButtonsGroup;

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _tslib = require('../../../../../_virtual/_tslib.js');
 var reactJss_esm = require('../../../../../external/react-jss/dist/react-jss.esm.js');
 var input = require('../controls/components/input.js');
 var main_module = require('../../css/color_picker/main.module.less.js');
@@ -20,59 +19,37 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var useStyles = reactJss_esm.createUseStyles({
+const useStyles = reactJss_esm.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 = React.useContext(context.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 = React.useRef(null);
-    var hueSliderRef = React.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 } = React.useContext(context.ColorPickerContext);
+    const saturationLightnessPanelRef = React.useRef(null);
+    const hueSliderRef = React.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;
         }
@@ -80,35 +57,34 @@ var PureColorPicker = function (_a) {
             event.target.value = hexValue;
         }
         try {
-            var color_1 = utilities.getColorFromHex(hexValue);
-            var _a = utilities.getIndicatorPositionsFromHEX({
-                hueSliderRef: hueSliderRef,
-                saturationLightnessPanelRef: saturationLightnessPanelRef,
+            const color = utilities.getColorFromHex(hexValue);
+            const { saturationLightnessPointer, hueSliderPointer } = utilities.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(_tslib.__assign(_tslib.__assign({}, color), { hex: hexValue }));
+            setColor({ ...color, hex: hexValue });
         }
     };
-    var restoreInitialColor = function () {
+    const restoreInitialColor = () => {
         setColor(initialColor);
     };
-    return (React__default['default'].createElement("div", { className: "".concat(main_module['default'][css_classes.cssColorPicker]) },
+    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: "".concat(classes.preview, " ").concat(main_module['default'][css_classes.cssColorPickerPreview]) }),
+            React__default['default'].createElement("div", { className: `${classes.preview} ${main_module['default'][css_classes.cssColorPickerPreview]}` }),
             React__default['default'].createElement("div", null,
                 React__default['default'].createElement(input['default'], { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex, onChange: inputOnChange }))),
         !hideChooseCancelButtons && React__default['default'].createElement(buttons['default'], { restoreInitialColor: restoreInitialColor })));
 };
-var ColorPickerWithContext = function (_a) {
-    var initialColor = _a.initialColor, onChange = _a.onChange, hideChooseCancelButtons = _a.hideChooseCancelButtons, name = _a.name;
-    var colorPickerContext = use_color_picker.useColorPicker({ initialColorHex: initialColor || '#ffffff', onChange: onChange });
+const ColorPickerWithContext = ({ initialColor, onChange, hideChooseCancelButtons, name }) => {
+    const colorPickerContext = use_color_picker.useColorPicker({ initialColorHex: initialColor || '#ffffff', 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 })));

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

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

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

@@ -3,38 +3,36 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _tslib = require('../../../../../_virtual/_tslib.js');
 var constants = require('./constants.js');
 var use_screen_detect = require('../../hooks/use_screen_detect.js');
 
-var useColorPicker = function (_a) {
-    var initialColorHex = _a.initialColorHex, onChange = _a.onChange;
-    var _b = React.useState({ hue: 0, saturation: constants.SATURATION_OFFSET, lightness: 100, hex: initialColorHex }), color = _b[0], setColor = _b[1];
-    var _c = React.useState({
+const useColorPicker = ({ initialColorHex, onChange }) => {
+    const [color, setColor] = React.useState({ hue: 0, saturation: constants.SATURATION_OFFSET, lightness: 100, hex: initialColorHex });
+    const [initialColor, setInitialColor] = React.useState({
         hue: 0,
         saturation: constants.SATURATION_OFFSET,
         lightness: 100,
         hex: initialColorHex
-    }), initialColor = _c[0], setInitialColor = _c[1];
-    var _d = React.useState({ top: 0, left: 0 }), hueSliderPointer = _d[0], setHueSliderPointer = _d[1];
-    var _e = React.useState({ left: 0, top: 0 }), saturationLightnessPointer = _e[0], setSaturationLightnessPointer = _e[1];
-    var screenName = use_screen_detect.useScreenDetect();
-    React.useEffect(function () {
+    });
+    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(function () {
-        setColor(function (prevState) { return (_tslib.__assign(_tslib.__assign({}, prevState), { hex: initialColorHex })); });
+    React.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/cjs/packages/aurora/src/components/color_picker/use_color_picker.js.map

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

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

@@ -14,41 +14,38 @@ var color_converter = require('../../utilities/colors/color_converter.js');
  * @param hex, string with color
  * @return
  */
-var getIndicatorPositionsFromHEX = function (_a) {
-    var _b, _c;
-    var saturationLightnessPanelRef = _a.saturationLightnessPanelRef, hueSliderRef = _a.hueSliderRef, hex = _a.hex;
-    var _d = color_converter.ColorConverter.hex2hsl(hex), hue = _d.hue, saturation = _d.saturation, lightness = _d.lightness;
-    var _e = ((_b = saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) || {}, _f = _e.width, width = _f === void 0 ? 0 : _f, _g = _e.height, height = _g === void 0 ? 0 : _g;
-    var hueSliderRect = (_c = hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) === null || _c === void 0 ? void 0 : _c.getBoundingClientRect();
-    var saturationLightnessPointer = {
+const getIndicatorPositionsFromHEX = ({ saturationLightnessPanelRef, hueSliderRef, hex }) => {
+    var _a, _b;
+    const { hue, saturation, lightness } = color_converter.ColorConverter.hex2hsl(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((lightness * height) / constants.MAX_LIGHTNESS_VALUE, 0, height)
     };
-    var hueSliderPointer = {
+    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: saturationLightnessPointer, hueSliderPointer: hueSliderPointer };
+    return { saturationLightnessPointer, hueSliderPointer };
 };
-var getColorFromHex = function (value) {
-    var _a = color_converter.ColorConverter.hex2hsl(value), hue = _a.hue, saturation = _a.saturation, lightness = _a.lightness;
-    return { hue: hue, saturation: saturation, lightness: lightness, hex: value };
+const getColorFromHex = (value) => {
+    const { hue, saturation, lightness } = color_converter.ColorConverter.hex2hsl(value);
+    return { hue, saturation, lightness, hex: value };
 };
-var getHueFromPosition = function (_a) {
-    var hueSliderRect = _a.hueSliderRect, position = _a.position, screenName = _a.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 };
+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 };
 };
-var getSaturationLightnessFromPosition = function (_a) {
-    var elementRect = _a.elementRect, position = _a.position;
-    var width = elementRect.width, height = elementRect.height;
-    var _b = range_mappings.getIndicatorPositionFromPosition({ elementRect: elementRect, position: position }), positionX = _b.positionX, positionY = _b.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 };
+const getSaturationLightnessFromPosition = ({ elementRect, position }) => {
+    const { width, height } = elementRect;
+    const { positionX, positionY } = range_mappings.getIndicatorPositionFromPosition({ elementRect, position });
+    const saturation = (positionX * constants.MAX_SATURATION_VALUE) / width || constants.SATURATION_OFFSET;
+    const lightness = constants.MAX_LIGHTNESS_VALUE - (positionY * (constants.MAX_LIGHTNESS_VALUE / 2)) / height - saturation / 2;
+    return { lightness, saturation };
 };
 
 exports.getColorFromHex = getColorFromHex;

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

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

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

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

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

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

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

@@ -10,10 +10,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var CellSelector = function (_a) {
-    var _b = _a.rows, rows = _b === void 0 ? 3 : _b, _c = _a.cols, cols = _c === void 0 ? 3 : _c, name = _a.name, initialSelected = _a.initialSelected, _d = _a.withValueOffset, withValueOffset = _d === void 0 ? true : _d, onChange = _a.onChange, _e = _a.className, className = _e === void 0 ? '' : _e;
-    var _f = React.useState(initialSelected), selectedCell = _f[0], setSelectedCell = _f[1];
-    React.useEffect(function () {
+const CellSelector = ({ rows = 3, cols = 3, name, initialSelected, withValueOffset = true, onChange, className = '' }) => {
+    const [selectedCell, setSelectedCell] = React.useState(initialSelected);
+    React.useEffect(() => {
         if (initialSelected === undefined) {
             setSelectedCell(initialSelected);
         }
@@ -21,11 +20,11 @@ var CellSelector = function (_a) {
             setSelectedCell(initialSelected - (withValueOffset ? 1 : 0));
         }
     }, [setSelectedCell, withValueOffset, initialSelected]);
-    var isSelected = function (row, col) {
+    const isSelected = (row, col) => {
         if (selectedCell === undefined) {
             return false;
         }
-        if (parseInt("".concat(selectedCell / cols)) !== row) {
+        if (parseInt(`${selectedCell / cols}`) !== row) {
             return false;
         }
         if (selectedCell % cols !== col) {
@@ -33,13 +32,13 @@ var CellSelector = function (_a) {
         }
         return true;
     };
-    var onClick = function (row, col) {
-        var cellIndex = row * cols + col;
+    const onClick = (row, col) => {
+        const cellIndex = row * cols + col;
         setSelectedCell(cellIndex);
         onChange === null || onChange === void 0 ? void 0 : onChange(cellIndex + (withValueOffset ? 1 : 0));
     };
-    return (React__default['default'].createElement("div", { className: "".concat(main_module['default'][css_classes.cellSelector], " ").concat(className) },
-        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cellSelectorContainer] }, Array.from({ length: rows }).map(function (_, rowIndex) { return (React__default['default'].createElement("div", { key: "CellSelector-".concat(name, "-Row-").concat(rowIndex), className: main_module['default'][css_classes.cellSelectorRow] }, Array.from({ length: cols }).map(function (_, colIndex) { return (React__default['default'].createElement("div", { key: "CellSelector-".concat(name, "-Row-").concat(rowIndex, "-Col-").concat(colIndex), className: "".concat(main_module['default'][css_classes.cellSelectorCell], " ").concat(isSelected(rowIndex, colIndex) ? main_module['default'][css_classes.cellSelectorCellActive] : ''), onClick: function () { return onClick(rowIndex, colIndex); } })); }))); }))));
+    return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cellSelector]} ${className}` },
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes.cellSelectorContainer] }, Array.from({ length: rows }).map((_, rowIndex) => (React__default['default'].createElement("div", { key: `CellSelector-${name}-Row-${rowIndex}`, className: main_module['default'][css_classes.cellSelectorRow] }, Array.from({ length: cols }).map((_, colIndex) => (React__default['default'].createElement("div", { key: `CellSelector-${name}-Row-${rowIndex}-Col-${colIndex}`, className: `${main_module['default'][css_classes.cellSelectorCell]} ${isSelected(rowIndex, colIndex) ? main_module['default'][css_classes.cellSelectorCellActive] : ''}`, onClick: () => onClick(rowIndex, colIndex) })))))))));
 };
 
 exports.default = CellSelector;

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

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

@@ -13,18 +13,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var Checkbox = function (_a) {
-    var _b;
-    var id = _a.id, name = _a.name, value = _a.value, _c = _a.initiallyChecked, initiallyChecked = _c === void 0 ? false : _c, isDisabled = _a.disabled, onChange = _a.onChange;
-    var _d = React.useState(initiallyChecked), isChecked = _d[0], setIsChecked = _d[1];
-    var checkboxClasses = classnames__default['default'](main_module['default'][css_classes.checkbox], (_b = {},
-        _b[main_module['default'][css_classes.checkboxDisabled]] = isDisabled,
-        _b));
-    var handleCheckboxChange = function (ev) {
+const Checkbox = ({ id, name, value, initiallyChecked = false, disabled: isDisabled, onChange }) => {
+    const [isChecked, setIsChecked] = React.useState(initiallyChecked);
+    const checkboxClasses = classnames__default['default'](main_module['default'][css_classes.checkbox], {
+        [main_module['default'][css_classes.checkboxDisabled]]: isDisabled
+    });
+    const handleCheckboxChange = (ev) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(ev);
-        setIsChecked(function (prevState) { return !prevState; });
+        setIsChecked((prevState) => !prevState);
     };
-    React.useEffect(function () {
+    React.useEffect(() => {
         setIsChecked(initiallyChecked);
     }, [initiallyChecked]);
     return (React__default['default'].createElement("span", { className: checkboxClasses },

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

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

@@ -13,18 +13,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
-var CheckboxSwitch = function (_a) {
-    var _b;
-    var id = _a.id, name = _a.name, value = _a.value, _c = _a.initiallyChecked, initiallyChecked = _c === void 0 ? false : _c, isDisabled = _a.disabled, onChange = _a.onChange;
-    var _d = React.useState(initiallyChecked), isChecked = _d[0], setIsChecked = _d[1];
-    var checkboxClasses = classnames__default['default'](main_module['default'][css_classes.checkboxSwitch], (_b = {},
-        _b[main_module['default'][css_classes.checkboxSwitchDisabled]] = isDisabled,
-        _b));
-    var handleCheckboxChange = function (ev) {
+const CheckboxSwitch = ({ id, name, value, initiallyChecked = false, disabled: isDisabled, onChange }) => {
+    const [isChecked, setIsChecked] = React.useState(initiallyChecked);
+    const checkboxClasses = classnames__default['default'](main_module['default'][css_classes.checkboxSwitch], {
+        [main_module['default'][css_classes.checkboxSwitchDisabled]]: isDisabled
+    });
+    const handleCheckboxChange = (ev) => {
         onChange === null || onChange === void 0 ? void 0 : onChange(ev);
-        setIsChecked(function (prevState) { return !prevState; });
+        setIsChecked((prevState) => !prevState);
     };
-    React.useEffect(function () {
+    React.useEffect(() => {
         setIsChecked(initiallyChecked);
     }, [initiallyChecked]);
     return (React__default['default'].createElement("span", { className: checkboxClasses },

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

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

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

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