@dreamcommerce/aurora 2.1.5 → 2.1.6

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

@@ -6,10 +6,10 @@ var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var index$2 = require('../../button/index.js');
 var index$1 = require('../../buttons_group/index.js');
-var main_module = require('../../../css/color_picker/main.module.less.js');
 var css_classes = require('../css_classes.js');
 var index = require('../../dropdown/context/index.js');
 var use_screen_detect = require('../../../hooks/use_screen_detect.js');
+var main_module = require('../../../css/color_picker/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var main_module = require('../../../css/color_picker/main.module.less.js');
+var css_classes = require('../css_classes.js');
 var range_mappings = require('../../../utilities/range/range_mappings.js');
 var color_converter = require('../../../utilities/colors/color_converter.js');
 var utilities = require('../utilities.js');
-var event_registration = require('../../../utilities/events/event_registration.js');
+var main_module = require('../../../css/color_picker/main.module.less.js');
 var context = require('../context.js');
-var css_classes = require('../css_classes.js');
+var event_registration = require('../../../utilities/events/event_registration.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactJss_esm = require('../../../../../../external/react-jss/dist/react-jss.esm.js');
-var main_module = require('../../../css/color_picker/main.module.less.js');
-var context = require('../context.js');
 var css_classes = require('../css_classes.js');
 var index = require('../../dropdown/context/index.js');
+var main_module = require('../../../css/color_picker/main.module.less.js');
+var context = require('../context.js');
+var reactJss_esm = require('../../../../../../external/react-jss/dist/react-jss.esm.js');
 var input_wrapper = require('../../controls/components/input_wrapper.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

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

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var main_module = require('../../../css/color_picker/main.module.less.js');
+var css_classes = require('../css_classes.js');
 var range_mappings = require('../../../utilities/range/range_mappings.js');
 var color_converter = require('../../../utilities/colors/color_converter.js');
 var utilities = require('../utilities.js');
-var event_registration = require('../../../utilities/events/event_registration.js');
+var main_module = require('../../../css/color_picker/main.module.less.js');
 var context = require('../context.js');
-var css_classes = require('../css_classes.js');
+var event_registration = require('../../../utilities/events/event_registration.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -4,6 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const cssColorPicker = 'color-picker';
 const cssColorPickerInputColorPreview = `${cssColorPicker}__input-color-preview`;
+const cssColorPickerInputContainer = `${cssColorPicker}__input-container`;
 const cssColorPickerButtonsGroup = `${cssColorPicker}__buttons-group`;
 const cssColorPickerHuePicker = `${cssColorPicker}__hue-picker`;
 const cssColorPickerPointer = `${cssColorPicker}__pointer`;
@@ -19,6 +20,7 @@ exports.cssColorPicker = cssColorPicker;
 exports.cssColorPickerButtonsGroup = cssColorPickerButtonsGroup;
 exports.cssColorPickerHuePicker = cssColorPickerHuePicker;
 exports.cssColorPickerInputColorPreview = cssColorPickerInputColorPreview;
+exports.cssColorPickerInputContainer = cssColorPickerInputContainer;
 exports.cssColorPickerMask = cssColorPickerMask;
 exports.cssColorPickerMaskBlack = cssColorPickerMaskBlack;
 exports.cssColorPickerMaskWhite = cssColorPickerMaskWhite;

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

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

@@ -3,15 +3,15 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-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');
+var css_classes = require('./css_classes.js');
 var utilities = require('./utilities.js');
+var main_module = require('../../css/color_picker/main.module.less.js');
+var buttons = require('./components/buttons.js');
 var context = require('./context.js');
-var css_classes = require('./css_classes.js');
-var saturation_lightness_picker = require('./components/saturation_lightness_picker.js');
 var hue_picker = require('./components/hue_picker.js');
-var buttons = require('./components/buttons.js');
+var input = require('../controls/components/input.js');
+var saturation_lightness_picker = require('./components/saturation_lightness_picker.js');
+var reactJss_esm = require('../../../../../external/react-jss/dist/react-jss.esm.js');
 var use_color_picker = require('./use_color_picker.js');
 var with_translation = require('../../utilities/translation/with_translation.js');
 
@@ -47,30 +47,35 @@ const PureColorPicker = ({ hideChooseCancelButtons }) => {
     const saturationLightnessPanelRef = React.useRef(null);
     const hueSliderRef = React.useRef(null);
     const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });
+    React.useEffect(() => {
+        const initialColor = utilities.getColorFromHex(color.hex);
+        setNewColorPickerPositions(initialColor);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const inputOnChange = (event) => {
         const { value } = event.target;
-        const hexValue = value.charAt(0) !== '#' ? `#${value}` : value;
+        const hexValue = `#${value}`;
         if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
             return;
         }
-        if (value !== hexValue) {
-            event.target.value = hexValue;
-        }
         try {
             const color = utilities.getColorFromHex(hexValue);
-            const { saturationLightnessPointer, hueSliderPointer } = utilities.getIndicatorPositionsFromHEX({
-                hueSliderRef,
-                saturationLightnessPanelRef,
-                hex: event.target.value
-            });
-            setColor(color);
-            setSaturationLightnessPointer(saturationLightnessPointer);
-            setHueSliderPointer(hueSliderPointer);
+            setNewColorPickerPositions(color);
         }
         catch (e) {
             setColor({ ...color, hex: hexValue });
         }
     };
+    const setNewColorPickerPositions = (newColor) => {
+        const { saturationLightnessPointer, hueSliderPointer } = utilities.getIndicatorPositionsFromHEX({
+            hueSliderRef,
+            saturationLightnessPanelRef,
+            hex: newColor.hex
+        });
+        setColor(newColor);
+        setSaturationLightnessPointer(saturationLightnessPointer);
+        setHueSliderPointer(hueSliderPointer);
+    };
     const restoreInitialColor = () => {
         setColor(initialColor);
     };
@@ -79,8 +84,9 @@ const PureColorPicker = ({ hideChooseCancelButtons }) => {
         React__default['default'].createElement(hue_picker['default'], { hueSliderRef: hueSliderRef, classes: classes }),
         React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerPreviewContainer] },
             React__default['default'].createElement("div", { className: `${classes.preview} ${main_module['default'][css_classes.cssColorPickerPreview]}` }),
-            React__default['default'].createElement("div", null,
-                React__default['default'].createElement(input['default'], { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex, onChange: inputOnChange }))),
+            React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssColorPickerInputContainer] },
+                React__default['default'].createElement("span", null, "#"),
+                React__default['default'].createElement(input['default'], { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex.replace(/#/g, ''), onChange: inputOnChange }))),
         !hideChooseCancelButtons && React__default['default'].createElement(buttons['default'], { restoreInitialColor: restoreInitialColor })));
 };
 const ColorPickerWithContext = ({ initialColor, onChange, hideChooseCancelButtons, name }) => {

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

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

package/build/cjs/packages/aurora/src/components/dropdown/components/search.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var input = require('../../controls/components/input.js');
 var index = require('../context/index.js');
+var input = require('../../controls/components/input.js');
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/dropdown/main.module.less.js');
 var use_keyboard_open_close = require('../hooks/use_keyboard_open_close.js');

package/build/cjs/packages/aurora/src/components/modal/hoc/absolute_modal/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactJss_esm = require('../../../../../../../external/react-jss/dist/react-jss.esm.js');
 var use_resize = require('../../../../hooks/use_resize.js');
+var reactJss_esm = require('../../../../../../../external/react-jss/dist/react-jss.esm.js');
 var main_module = require('../../../../css/modal/main.module.less.js');
 var reactDom = require('react-dom');
 var modal = require('../../components/modal.js');

package/build/cjs/packages/aurora/src/components/modal/hoc/absolute_modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,2BAA2B,+DAAmE;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,+DAAmE;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/hoc/relative_modal/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactJss_esm = require('../../../../../../../external/react-jss/dist/react-jss.esm.js');
 var use_resize = require('../../../../hooks/use_resize.js');
+var reactJss_esm = require('../../../../../../../external/react-jss/dist/react-jss.esm.js');
 var main_module = require('../../../../css/modal/main.module.less.js');
 var reactDom = require('react-dom');
 var modal = require('../../components/modal.js');

package/build/cjs/packages/aurora/src/components/modal/hoc/relative_modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,2BAA2B,+DAAmE;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,2BAA2B,+DAAmE;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/range/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var reactJss_esm = require('../../../../../external/react-jss/dist/react-jss.esm.js');
 var range_mappings = require('../../utilities/range/range_mappings.js');
 var event_registration = require('../../utilities/events/event_registration.js');
+var reactJss_esm = require('../../../../../external/react-jss/dist/react-jss.esm.js');
 var main_module = require('../../css/range/main.module.less.js');
 var css_classes = require('./css_classes.js');
 var utilities = require('./utilities.js');

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

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

package/build/cjs/packages/aurora/src/css/color_picker/main.module.less.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@media screen and (max-width: 576px) {\n  .main-module_color-picker__3hU1p {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex-grow: 1;\n  }\n  .main-module_color-picker__hue-picker__2f9fp {\n    margin: 1rem;\n    width: auto;\n    background: linear-gradient(90deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n  }\n  .main-module_color-picker__preview-container__yJd0N {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n}\n@media screen and (min-width: 576px) {\n  .main-module_color-picker__hue-picker__2f9fp {\n    margin: 1rem;\n    width: 1rem;\n    background: linear-gradient(180deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n  }\n  .main-module_color-picker__preview-container__yJd0N {\n    flex-direction: column;\n  }\n}\n.main-module_color-picker__3hU1p {\n  display: flex;\n  flex-wrap: wrap;\n}\n.main-module_color-picker__input-color-preview__2SAcQ {\n  height: 2rem;\n  width: 2rem;\n  border-radius: calc(2rem / 8);\n  border: solid 1px #abb4cd;\n}\n.main-module_color-picker__saturation-lightness-picker__2oEPs {\n  min-height: 15rem;\n  margin: 1rem;\n  flex: 1 1 auto;\n  position: relative;\n  cursor: pointer;\n  border-radius: 0.5rem;\n}\n.main-module_color-picker__preview-container__yJd0N {\n  margin: 1rem;\n  display: flex;\n  flex: 0 0 10%;\n}\n.main-module_color-picker__preview__1A7jV {\n  width: 6rem;\n  height: 6rem;\n  margin-bottom: auto;\n  border-radius: 0.5rem;\n  border: solid 1px #abb4cd;\n}\n.main-module_color-picker__hue-picker__2f9fp {\n  width: auto;\n  cursor: pointer;\n  border-radius: 0.25rem;\n  margin: 1rem;\n}\n.main-module_color-picker__mask__zGH3u {\n  width: 100%;\n  height: 100%;\n  border-radius: 0.5rem;\n  position: absolute;\n}\n.main-module_color-picker__mask_white__25fNT {\n  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);\n}\n.main-module_color-picker__mask_black__3fktq {\n  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);\n}\n.main-module_color-picker__pointer__27Wa_ {\n  border: 1px solid #135cc8;\n  width: 20px;\n  height: 20px;\n  border-radius: calc(20px / 2);\n  background: #ffffff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.main-module_color-picker__pointer-inside__20BXe {\n  width: calc(20px / 2);\n  height: calc(20px / 2);\n  border-radius: calc(20px / 2);\n}\n.main-module_color-picker__buttons-group__2K4rp {\n  flex-grow: 1;\n  min-width: calc(100% - 2rem);\n}\n";
-var styles = {"color-picker":"main-module_color-picker__3hU1p","color-picker__hue-picker":"main-module_color-picker__hue-picker__2f9fp","color-picker__preview-container":"main-module_color-picker__preview-container__yJd0N","color-picker__input-color-preview":"main-module_color-picker__input-color-preview__2SAcQ","color-picker__saturation-lightness-picker":"main-module_color-picker__saturation-lightness-picker__2oEPs","color-picker__preview":"main-module_color-picker__preview__1A7jV","color-picker__mask":"main-module_color-picker__mask__zGH3u","color-picker__mask_white":"main-module_color-picker__mask_white__25fNT","color-picker__mask_black":"main-module_color-picker__mask_black__3fktq","color-picker__pointer":"main-module_color-picker__pointer__27Wa_","color-picker__pointer-inside":"main-module_color-picker__pointer-inside__20BXe","color-picker__buttons-group":"main-module_color-picker__buttons-group__2K4rp"};
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@media screen and (max-width: 576px) {\n  .main-module_color-picker__3hU1p {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex-grow: 1;\n  }\n  .main-module_color-picker__hue-picker__2f9fp {\n    margin: 1rem;\n    width: auto;\n    background: linear-gradient(90deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n  }\n  .main-module_color-picker__preview-container__yJd0N {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n}\n@media screen and (min-width: 576px) {\n  .main-module_color-picker__hue-picker__2f9fp {\n    margin: 1rem;\n    width: 1rem;\n    background: linear-gradient(180deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n  }\n  .main-module_color-picker__preview-container__yJd0N {\n    flex-direction: column;\n  }\n}\n.main-module_color-picker__3hU1p {\n  display: flex;\n  flex-wrap: wrap;\n}\n.main-module_color-picker__input-color-preview__2SAcQ {\n  height: 2rem;\n  width: 2rem;\n  border-radius: calc(2rem / 8);\n  border: solid 1px #abb4cd;\n}\n.main-module_color-picker__input-container__1tAfW {\n  display: flex;\n  align-items: center;\n  -moz-column-gap: 4px;\n       column-gap: 4px;\n}\n.main-module_color-picker__saturation-lightness-picker__2oEPs {\n  min-height: 15rem;\n  margin: 1rem;\n  flex: 1 1 auto;\n  position: relative;\n  cursor: pointer;\n  border-radius: 0.5rem;\n}\n.main-module_color-picker__preview-container__yJd0N {\n  margin: 1rem;\n  display: flex;\n  flex: 0 0 10%;\n}\n.main-module_color-picker__preview__1A7jV {\n  width: 6rem;\n  height: 6rem;\n  margin-bottom: auto;\n  border-radius: 0.5rem;\n  border: solid 1px #abb4cd;\n}\n.main-module_color-picker__hue-picker__2f9fp {\n  width: auto;\n  cursor: pointer;\n  border-radius: 0.25rem;\n  margin: 1rem;\n}\n.main-module_color-picker__mask__zGH3u {\n  width: 100%;\n  height: 100%;\n  border-radius: 0.5rem;\n  position: absolute;\n}\n.main-module_color-picker__mask_white__25fNT {\n  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);\n}\n.main-module_color-picker__mask_black__3fktq {\n  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);\n}\n.main-module_color-picker__pointer__27Wa_ {\n  border: 1px solid #135cc8;\n  width: 20px;\n  height: 20px;\n  border-radius: calc(20px / 2);\n  background: #ffffff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.main-module_color-picker__pointer-inside__20BXe {\n  width: calc(20px / 2);\n  height: calc(20px / 2);\n  border-radius: calc(20px / 2);\n}\n.main-module_color-picker__buttons-group__2K4rp {\n  flex-grow: 1;\n  min-width: calc(100% - 2rem);\n}\n";
+var styles = {"color-picker":"main-module_color-picker__3hU1p","color-picker__hue-picker":"main-module_color-picker__hue-picker__2f9fp","color-picker__preview-container":"main-module_color-picker__preview-container__yJd0N","color-picker__input-color-preview":"main-module_color-picker__input-color-preview__2SAcQ","color-picker__input-container":"main-module_color-picker__input-container__1tAfW","color-picker__saturation-lightness-picker":"main-module_color-picker__saturation-lightness-picker__2oEPs","color-picker__preview":"main-module_color-picker__preview__1A7jV","color-picker__mask":"main-module_color-picker__mask__zGH3u","color-picker__mask_white":"main-module_color-picker__mask_white__25fNT","color-picker__mask_black":"main-module_color-picker__mask_black__3fktq","color-picker__pointer":"main-module_color-picker__pointer__27Wa_","color-picker__pointer-inside":"main-module_color-picker__pointer-inside__20BXe","color-picker__buttons-group":"main-module_color-picker__buttons-group__2K4rp"};
 styleInject_es['default'](css_248z);
 
 exports.default = styles;

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

@@ -2,10 +2,10 @@ import React, { useContext } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import Button from '../../button/index.js';
 import ButtonsGroup from '../../buttons_group/index.js';
-import styles from '../../../css/color_picker/main.module.less.js';
 import { cssColorPickerButtonsGroup } from '../css_classes.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
 import { useScreenDetect } from '../../../hooks/use_screen_detect.js';
+import styles from '../../../css/color_picker/main.module.less.js';
 
 const ColorPickerButtons = ({ restoreInitialColor }) => {
     const [t] = useTranslation();

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

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
-import styles from '../../../css/color_picker/main.module.less.js';
+import { cssColorPickerHuePicker, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
 import { getIndicatorPositionFromPosition } from '../../../utilities/range/range_mappings.js';
 import { ColorConverter } from '../../../utilities/colors/color_converter.js';
 import { getHueFromPosition } from '../utilities.js';
-import { mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../../../utilities/events/event_registration.js';
+import styles from '../../../css/color_picker/main.module.less.js';
 import { ColorPickerContext } from '../context.js';
-import { cssColorPickerHuePicker, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
+import { mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../../../utilities/events/event_registration.js';
 
 const HuePicker = ({ hueSliderRef, classes }) => {
     const { setColor, setHueSliderPointer, screenName } = useContext(ColorPickerContext);

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

@@ -1,9 +1,9 @@
 import React, { useContext, useEffect } from 'react';
-import { createUseStyles } from '../../../../../../external/react-jss/dist/react-jss.esm.js';
-import styles from '../../../css/color_picker/main.module.less.js';
-import { ColorPickerContext } from '../context.js';
 import { cssColorPickerInputColorPreview } from '../css_classes.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
+import styles from '../../../css/color_picker/main.module.less.js';
+import { ColorPickerContext } from '../context.js';
+import { createUseStyles } from '../../../../../../external/react-jss/dist/react-jss.esm.js';
 import InputWrapper from '../../controls/components/input_wrapper.js';
 
 const useStyles = createUseStyles({

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

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

@@ -1,11 +1,11 @@
 import React, { useContext } from 'react';
-import styles from '../../../css/color_picker/main.module.less.js';
+import { cssColorPickerSaturationLightnessPicker, cssColorPickerMask, cssColorPickerMaskWhite, cssColorPickerMaskBlack, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
 import { getIndicatorPositionFromPosition } from '../../../utilities/range/range_mappings.js';
 import { ColorConverter } from '../../../utilities/colors/color_converter.js';
 import { getSaturationLightnessFromPosition } from '../utilities.js';
-import { registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents, mapMouseEventToPosition } from '../../../utilities/events/event_registration.js';
+import styles from '../../../css/color_picker/main.module.less.js';
 import { ColorPickerContext } from '../context.js';
-import { cssColorPickerSaturationLightnessPicker, cssColorPickerMask, cssColorPickerMaskWhite, cssColorPickerMaskBlack, cssColorPickerPointer, cssColorPickerPointerInside } from '../css_classes.js';
+import { registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents, mapMouseEventToPosition } from '../../../utilities/events/event_registration.js';
 
 const SaturationLightnessPicker = ({ classes, saturationLightnessPanelRef }) => {
     const { setColor, setSaturationLightnessPointer } = useContext(ColorPickerContext);

package/build/esm/packages/aurora/src/components/color_picker/css_classes.d.ts

@@ -1,5 +1,6 @@
 export declare const cssColorPicker = "color-picker";
 export declare const cssColorPickerInputColorPreview: string;
+export declare const cssColorPickerInputContainer: string;
 export declare const cssColorPickerButtonsGroup: string;
 export declare const cssColorPickerHuePicker: string;
 export declare const cssColorPickerPointer: string;

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

@@ -1,5 +1,6 @@
 const cssColorPicker = 'color-picker';
 const cssColorPickerInputColorPreview = `${cssColorPicker}__input-color-preview`;
+const cssColorPickerInputContainer = `${cssColorPicker}__input-container`;
 const cssColorPickerButtonsGroup = `${cssColorPicker}__buttons-group`;
 const cssColorPickerHuePicker = `${cssColorPicker}__hue-picker`;
 const cssColorPickerPointer = `${cssColorPicker}__pointer`;
@@ -11,5 +12,5 @@ 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 };
+export { cssColorPicker, cssColorPickerButtonsGroup, cssColorPickerHuePicker, cssColorPickerInputColorPreview, cssColorPickerInputContainer, cssColorPickerMask, cssColorPickerMaskBlack, cssColorPickerMaskWhite, cssColorPickerPointer, cssColorPickerPointerInside, cssColorPickerPreview, cssColorPickerPreviewContainer, cssColorPickerSaturationLightnessPicker };
 //# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/color_picker/css_classes.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;"}
+{"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/index.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import { IColorPickerProps, IPureColorPickerProps } from './types';
+import React from 'react';
 export declare const PureColorPicker: React.FC<IPureColorPickerProps>;
 declare const _default: React.FC<IColorPickerProps>;
 export default _default;

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

@@ -1,13 +1,13 @@
-import React, { useContext, useRef } from 'react';
-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';
+import React, { useContext, useRef, useEffect } from 'react';
+import { cssColorPicker, cssColorPickerPreviewContainer, cssColorPickerPreview, cssColorPickerInputContainer } from './css_classes.js';
 import { getColorFromHex, getIndicatorPositionsFromHEX } from './utilities.js';
+import styles from '../../css/color_picker/main.module.less.js';
+import ColorPickerButtons from './components/buttons.js';
 import { ColorPickerContext } from './context.js';
-import { cssColorPicker, cssColorPickerPreviewContainer, cssColorPickerPreview } from './css_classes.js';
-import SaturationLightnessPicker from './components/saturation_lightness_picker.js';
 import HuePicker from './components/hue_picker.js';
-import ColorPickerButtons from './components/buttons.js';
+import Input from '../controls/components/input.js';
+import SaturationLightnessPicker from './components/saturation_lightness_picker.js';
+import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
 import { useColorPicker } from './use_color_picker.js';
 import withTranslation from '../../utilities/translation/with_translation.js';
 
@@ -39,30 +39,35 @@ const PureColorPicker = ({ hideChooseCancelButtons }) => {
     const saturationLightnessPanelRef = useRef(null);
     const hueSliderRef = useRef(null);
     const classes = useStyles({ color, saturationLightnessPointer, hueSliderPointer, screenName });
+    useEffect(() => {
+        const initialColor = getColorFromHex(color.hex);
+        setNewColorPickerPositions(initialColor);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
     const inputOnChange = (event) => {
         const { value } = event.target;
-        const hexValue = value.charAt(0) !== '#' ? `#${value}` : value;
+        const hexValue = `#${value}`;
         if (!(hueSliderRef === null || hueSliderRef === void 0 ? void 0 : hueSliderRef.current) || !(saturationLightnessPanelRef === null || saturationLightnessPanelRef === void 0 ? void 0 : saturationLightnessPanelRef.current)) {
             return;
         }
-        if (value !== hexValue) {
-            event.target.value = hexValue;
-        }
         try {
             const color = getColorFromHex(hexValue);
-            const { saturationLightnessPointer, hueSliderPointer } = getIndicatorPositionsFromHEX({
-                hueSliderRef,
-                saturationLightnessPanelRef,
-                hex: event.target.value
-            });
-            setColor(color);
-            setSaturationLightnessPointer(saturationLightnessPointer);
-            setHueSliderPointer(hueSliderPointer);
+            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);
     };
@@ -71,8 +76,9 @@ const PureColorPicker = ({ hideChooseCancelButtons }) => {
         React.createElement(HuePicker, { hueSliderRef: hueSliderRef, classes: classes }),
         React.createElement("div", { className: styles[cssColorPickerPreviewContainer] },
             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 }))),
+            React.createElement("div", { className: styles[cssColorPickerInputContainer] },
+                React.createElement("span", null, "#"),
+                React.createElement(Input, { id: "color-picker-id", value: color === null || color === void 0 ? void 0 : color.hex.replace(/#/g, ''), onChange: inputOnChange }))),
         !hideChooseCancelButtons && React.createElement(ColorPickerButtons, { restoreInitialColor: restoreInitialColor })));
 };
 const ColorPickerWithContext = ({ initialColor, onChange, hideChooseCancelButtons, name }) => {

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

package/build/esm/packages/aurora/src/components/color_picker/utilities.d.ts

@@ -1,5 +1,5 @@
-import { RefObject } from 'react';
 import { IPosition } from "./types";
+import { RefObject } from 'react';
 /**
  * Function to calculate indicators position based on hex value
  * @param saturationLightnessPanelRef, reference

package/build/esm/packages/aurora/src/components/dropdown/components/search.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
-import Input from '../../controls/components/input.js';
 import { useDropdownContext } from '../context/index.js';
+import Input from '../../controls/components/input.js';
 import { cssDropdownSearch } from '../css_classes.js';
 import cssClasses from '../../../css/dropdown/main.module.less.js';
 import { useKeyboardOpenClose } from '../hooks/use_keyboard_open_close.js';

package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { createUseStyles } from '../../../../../../../external/react-jss/dist/react-jss.esm.js';
 import { useResize } from '../../../../hooks/use_resize.js';
+import { createUseStyles } from '../../../../../../../external/react-jss/dist/react-jss.esm.js';
 import cssClasses from '../../../../css/modal/main.module.less.js';
 import { createPortal } from 'react-dom';
 import Modal from '../../components/modal.js';

package/build/esm/packages/aurora/src/components/modal/hoc/absolute_modal/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,gCAAgC,+DAAmE;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+DAAmE;AACnG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/hoc/relative_modal/index.js

@@ -1,6 +1,6 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { createUseStyles } from '../../../../../../../external/react-jss/dist/react-jss.esm.js';
 import { useResize } from '../../../../hooks/use_resize.js';
+import { createUseStyles } from '../../../../../../../external/react-jss/dist/react-jss.esm.js';
 import cssClasses from '../../../../css/modal/main.module.less.js';
 import { createPortal } from 'react-dom';
 import Modal from '../../components/modal.js';

package/build/esm/packages/aurora/src/components/modal/hoc/relative_modal/index.js.map

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

@@ -1,7 +1,7 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
 import { getIndicatorPositionFromPosition } from '../../utilities/range/range_mappings.js';
 import { mapMouseEventToPosition, registerOnMouseEvents, mapTouchEventToPosition, registerOnTouchEvents } from '../../utilities/events/event_registration.js';
+import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
 import styles from '../../css/range/main.module.less.js';
 import CSS_CLASSES from './css_classes.js';
 import { getPositionFromValue, getValueFromPosition } from './utilities.js';

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

package/build/esm/packages/aurora/src/css/color_picker/main.module.less.js

@@ -1,7 +1,7 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@media screen and (max-width: 576px) {\n  .main-module_color-picker__3hU1p {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex-grow: 1;\n  }\n  .main-module_color-picker__hue-picker__2f9fp {\n    margin: 1rem;\n    width: auto;\n    background: linear-gradient(90deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n  }\n  .main-module_color-picker__preview-container__yJd0N {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n}\n@media screen and (min-width: 576px) {\n  .main-module_color-picker__hue-picker__2f9fp {\n    margin: 1rem;\n    width: 1rem;\n    background: linear-gradient(180deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n  }\n  .main-module_color-picker__preview-container__yJd0N {\n    flex-direction: column;\n  }\n}\n.main-module_color-picker__3hU1p {\n  display: flex;\n  flex-wrap: wrap;\n}\n.main-module_color-picker__input-color-preview__2SAcQ {\n  height: 2rem;\n  width: 2rem;\n  border-radius: calc(2rem / 8);\n  border: solid 1px #abb4cd;\n}\n.main-module_color-picker__saturation-lightness-picker__2oEPs {\n  min-height: 15rem;\n  margin: 1rem;\n  flex: 1 1 auto;\n  position: relative;\n  cursor: pointer;\n  border-radius: 0.5rem;\n}\n.main-module_color-picker__preview-container__yJd0N {\n  margin: 1rem;\n  display: flex;\n  flex: 0 0 10%;\n}\n.main-module_color-picker__preview__1A7jV {\n  width: 6rem;\n  height: 6rem;\n  margin-bottom: auto;\n  border-radius: 0.5rem;\n  border: solid 1px #abb4cd;\n}\n.main-module_color-picker__hue-picker__2f9fp {\n  width: auto;\n  cursor: pointer;\n  border-radius: 0.25rem;\n  margin: 1rem;\n}\n.main-module_color-picker__mask__zGH3u {\n  width: 100%;\n  height: 100%;\n  border-radius: 0.5rem;\n  position: absolute;\n}\n.main-module_color-picker__mask_white__25fNT {\n  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);\n}\n.main-module_color-picker__mask_black__3fktq {\n  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);\n}\n.main-module_color-picker__pointer__27Wa_ {\n  border: 1px solid #135cc8;\n  width: 20px;\n  height: 20px;\n  border-radius: calc(20px / 2);\n  background: #ffffff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.main-module_color-picker__pointer-inside__20BXe {\n  width: calc(20px / 2);\n  height: calc(20px / 2);\n  border-radius: calc(20px / 2);\n}\n.main-module_color-picker__buttons-group__2K4rp {\n  flex-grow: 1;\n  min-width: calc(100% - 2rem);\n}\n";
-var styles = {"color-picker":"main-module_color-picker__3hU1p","color-picker__hue-picker":"main-module_color-picker__hue-picker__2f9fp","color-picker__preview-container":"main-module_color-picker__preview-container__yJd0N","color-picker__input-color-preview":"main-module_color-picker__input-color-preview__2SAcQ","color-picker__saturation-lightness-picker":"main-module_color-picker__saturation-lightness-picker__2oEPs","color-picker__preview":"main-module_color-picker__preview__1A7jV","color-picker__mask":"main-module_color-picker__mask__zGH3u","color-picker__mask_white":"main-module_color-picker__mask_white__25fNT","color-picker__mask_black":"main-module_color-picker__mask_black__3fktq","color-picker__pointer":"main-module_color-picker__pointer__27Wa_","color-picker__pointer-inside":"main-module_color-picker__pointer-inside__20BXe","color-picker__buttons-group":"main-module_color-picker__buttons-group__2K4rp"};
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n@media screen and (max-width: 576px) {\n  .main-module_color-picker__3hU1p {\n    display: flex;\n    flex-direction: column;\n    justify-content: space-between;\n    flex-grow: 1;\n  }\n  .main-module_color-picker__hue-picker__2f9fp {\n    margin: 1rem;\n    width: auto;\n    background: linear-gradient(90deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n  }\n  .main-module_color-picker__preview-container__yJd0N {\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n  }\n}\n@media screen and (min-width: 576px) {\n  .main-module_color-picker__hue-picker__2f9fp {\n    margin: 1rem;\n    width: 1rem;\n    background: linear-gradient(180deg, hsl(0, 100%, 50%), hsl(60, 100%, 50%), hsl(120, 100%, 50%), hsl(180, 100%, 50%), hsl(240, 100%, 50%), hsl(300, 100%, 50%), hsl(0, 100%, 50%));\n  }\n  .main-module_color-picker__preview-container__yJd0N {\n    flex-direction: column;\n  }\n}\n.main-module_color-picker__3hU1p {\n  display: flex;\n  flex-wrap: wrap;\n}\n.main-module_color-picker__input-color-preview__2SAcQ {\n  height: 2rem;\n  width: 2rem;\n  border-radius: calc(2rem / 8);\n  border: solid 1px #abb4cd;\n}\n.main-module_color-picker__input-container__1tAfW {\n  display: flex;\n  align-items: center;\n  -moz-column-gap: 4px;\n       column-gap: 4px;\n}\n.main-module_color-picker__saturation-lightness-picker__2oEPs {\n  min-height: 15rem;\n  margin: 1rem;\n  flex: 1 1 auto;\n  position: relative;\n  cursor: pointer;\n  border-radius: 0.5rem;\n}\n.main-module_color-picker__preview-container__yJd0N {\n  margin: 1rem;\n  display: flex;\n  flex: 0 0 10%;\n}\n.main-module_color-picker__preview__1A7jV {\n  width: 6rem;\n  height: 6rem;\n  margin-bottom: auto;\n  border-radius: 0.5rem;\n  border: solid 1px #abb4cd;\n}\n.main-module_color-picker__hue-picker__2f9fp {\n  width: auto;\n  cursor: pointer;\n  border-radius: 0.25rem;\n  margin: 1rem;\n}\n.main-module_color-picker__mask__zGH3u {\n  width: 100%;\n  height: 100%;\n  border-radius: 0.5rem;\n  position: absolute;\n}\n.main-module_color-picker__mask_white__25fNT {\n  background: linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);\n}\n.main-module_color-picker__mask_black__3fktq {\n  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.8) 100%);\n}\n.main-module_color-picker__pointer__27Wa_ {\n  border: 1px solid #135cc8;\n  width: 20px;\n  height: 20px;\n  border-radius: calc(20px / 2);\n  background: #ffffff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n.main-module_color-picker__pointer-inside__20BXe {\n  width: calc(20px / 2);\n  height: calc(20px / 2);\n  border-radius: calc(20px / 2);\n}\n.main-module_color-picker__buttons-group__2K4rp {\n  flex-grow: 1;\n  min-width: calc(100% - 2rem);\n}\n";
+var styles = {"color-picker":"main-module_color-picker__3hU1p","color-picker__hue-picker":"main-module_color-picker__hue-picker__2f9fp","color-picker__preview-container":"main-module_color-picker__preview-container__yJd0N","color-picker__input-color-preview":"main-module_color-picker__input-color-preview__2SAcQ","color-picker__input-container":"main-module_color-picker__input-container__1tAfW","color-picker__saturation-lightness-picker":"main-module_color-picker__saturation-lightness-picker__2oEPs","color-picker__preview":"main-module_color-picker__preview__1A7jV","color-picker__mask":"main-module_color-picker__mask__zGH3u","color-picker__mask_white":"main-module_color-picker__mask_white__25fNT","color-picker__mask_black":"main-module_color-picker__mask_black__3fktq","color-picker__pointer":"main-module_color-picker__pointer__27Wa_","color-picker__pointer-inside":"main-module_color-picker__pointer-inside__20BXe","color-picker__buttons-group":"main-module_color-picker__buttons-group__2K4rp"};
 styleInject(css_248z);
 
 export default styles;

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",