@dreamcommerce/aurora 2.1.4 → 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/controls/components/helper.js

@@ -0,0 +1,18 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/helper/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const Helper = ({ children }) => {
+    return React__default['default'].createElement("p", { className: main_module['default'][css_classes.cssHelper] }, children);
+};
+
+exports.default = Helper;
+//# sourceMappingURL=helper.js.map

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

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

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

@@ -42,7 +42,8 @@ const cellSelector = 'cell-selector';
 const cellSelectorContainer = `${cellSelector}__container`;
 const cellSelectorRow = `${cellSelector}__row`;
 const cellSelectorCell = `${cellSelector}__cell`;
-const cellSelectorCellActive = `${cellSelectorCell}_active`;
+const cellSelectorCellActive = `${cellSelectorCell}_active`;
+const cssHelper = 'helper';
 
 exports.cellSelector = cellSelector;
 exports.cellSelectorCell = cellSelectorCell;
@@ -81,6 +82,7 @@ exports.cssControlsErrors = cssControlsErrors;
 exports.cssControlsErrorsList = cssControlsErrorsList;
 exports.cssControlsErrorsListItem = cssControlsErrorsListItem;
 exports.cssControlsLabel = cssControlsLabel;
+exports.cssHelper = cssHelper;
 exports.radio = radio;
 exports.radioControl = radioControl;
 exports.radioDisabled = radioDisabled;

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

package/build/cjs/packages/aurora/src/components/controls/hoc/control_checkbox/index.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var index$1 = require('../../../label/index.js');
+var index$2 = require('../../../label/index.js');
 var index = require('../../index.js');
-var index$2 = require('../../../hint/index.js');
+var index$1 = require('../../../hint/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -23,15 +23,19 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  *  />
  * )
  */
-const ControlCheckbox = ({ id, hint, hintOptions = { isFixed: true }, label, name, value, initiallyChecked, disabled, onChange, errors }) => {
+const ControlCheckbox = ({ id, hint, hintOptions = { isFixed: true }, label, name, value, initiallyChecked, disabled, onChange, helper, labelTop, hintTop, hintTopOptions = { isFixed: true }, isRequired, errors }) => {
     return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
+        (labelTop || hintTop) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired },
+            labelTop,
+            hintTop && React__default['default'].createElement(index$1['default'], { fixed: hintTopOptions.isFixed, spacingLeft: true, hint: hintTop }))),
+        helper && React__default['default'].createElement(index['default'].Helper, null, helper),
         React__default['default'].createElement(index['default'].Content, null,
             React__default['default'].createElement(index['default'].Element, { type: "checkbox" },
                 React__default['default'].createElement(index['default'].Checkbox, { id: id, name: name, value: value, initiallyChecked: initiallyChecked, disabled: disabled, onChange: onChange }),
-                React__default['default'].createElement(index$1['default'], { htmlFor: id },
+                React__default['default'].createElement(index$2['default'], { htmlFor: id },
                     label,
                     " ",
-                    hint && React__default['default'].createElement(index$2['default'], { fixed: hintOptions.isFixed, hint: hint, spacingLeft: true })))),
+                    hint && React__default['default'].createElement(index$1['default'], { fixed: hintOptions.isFixed, hint: hint, spacingLeft: true })))),
         React__default['default'].createElement(index['default'].Errors, null)));
 };
 

package/build/cjs/packages/aurora/src/components/controls/hoc/control_checkbox/index.js.map

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

package/build/cjs/packages/aurora/src/components/controls/hoc/control_input/index.js

@@ -25,11 +25,12 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  *  />
  * )
  */
-const ControlInput = ({ label, isRequired, id, name, value, placeholder, prefix, postfix, disabled, onChange, onKeyPress, onKeyUp, hint, hintOptions = { isFixed: true }, errors, additionalInfo, ...props }) => {
+const ControlInput = ({ label, isRequired, id, name, value, placeholder, prefix, postfix, disabled, onChange, onKeyPress, onKeyUp, hint, hintOptions = { isFixed: true }, errors, helper, additionalInfo, ...props }) => {
     return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
         (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired },
             label,
             hint && React__default['default'].createElement(index$1['default'], { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+        helper && React__default['default'].createElement(index['default'].Helper, null, helper),
         React__default['default'].createElement(index['default'].Content, null,
             React__default['default'].createElement(index['default'].Element, { prefix: prefix, postfix: postfix },
                 React__default['default'].createElement(index['default'].Input, { id: id, name: name, value: value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyPress: onKeyPress, onKeyUp: onKeyUp, ...props }))),

package/build/cjs/packages/aurora/src/components/controls/hoc/control_input/index.js.map

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

package/build/cjs/packages/aurora/src/components/controls/hoc/control_textarea/index.js

@@ -25,16 +25,18 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
  *  />
  * )
  */
-const ControlTextarea = React__default['default'].forwardRef(({ label, isRequired, id, name, value, defaultValue, placeholder, disabled, readOnly, onChange, onFocus, onBlur, onKeyPress, errors, hint, hintOptions = { isFixed: true } }, ref) => {
+const ControlTextarea = React__default['default'].forwardRef(({ label, isRequired, id, name, value, defaultValue, placeholder, disabled, readOnly, onChange, onFocus, onBlur, onKeyPress, errors, hint, hintOptions = { isFixed: true }, helper }, ref) => {
     return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
         (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired },
             label,
             hint && React__default['default'].createElement(index$1['default'], { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+        helper && React__default['default'].createElement(index['default'].Helper, null, helper),
         React__default['default'].createElement(index['default'].Content, null,
             React__default['default'].createElement(index['default'].Element, null,
                 React__default['default'].createElement(index['default'].Textarea, { id: id, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyPress: onKeyPress, ref: ref }))),
         React__default['default'].createElement(index['default'].Errors, null)));
-});
+});
+ControlTextarea.displayName = 'ControlTextarea';
 
 exports.default = ControlTextarea;
 //# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/controls/hoc/control_textarea/index.js.map

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

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

@@ -14,6 +14,7 @@ var content = require('./components/content.js');
 var label = require('./components/label.js');
 var element = require('./components/element.js');
 var errors = require('./components/errors.js');
+var helper = require('./components/helper.js');
 var radio = require('./components/radio.js');
 var textarea = require('./components/textarea.js');
 
@@ -34,7 +35,8 @@ Control.Content = content['default'];
 Control.Element = element['default'];
 Control.Textarea = textarea['default'];
 Control.Errors = errors['default'];
-Control.AdditionalInfo = additional_info.AdditionalInfo;
+Control.AdditionalInfo = additional_info.AdditionalInfo;
+Control.Helper = helper['default'];
 
 exports.default = Control;
 //# sourceMappingURL=index.js.map

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

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

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/cjs/packages/aurora/src/css/helper/main.module.less.js

@@ -0,0 +1,12 @@
+'use strict';
+
+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.main-module_helper__ZHmAY {\n  font-size: 12px;\n  font-size: 0.8571428571428571rem;\n  line-height: 15px;\n  color: #5c657e;\n  margin-bottom: 0.25rem;\n}\n";
+var cssStyles = {"helper":"main-module_helper__ZHmAY"};
+styleInject_es['default'](css_248z);
+
+exports.default = cssStyles;
+//# sourceMappingURL=main.module.less.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;"}

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/controls/components/helper.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const Helper: React.FC;
+export default Helper;

package/build/esm/packages/aurora/src/components/controls/components/helper.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import { cssHelper } from '../css_classes.js';
+import cssStyles from '../../../css/helper/main.module.less.js';
+
+const Helper = ({ children }) => {
+    return React.createElement("p", { className: cssStyles[cssHelper] }, children);
+};
+
+export default Helper;
+//# sourceMappingURL=helper.js.map

package/build/esm/packages/aurora/src/components/controls/components/helper.js.map

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

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

@@ -40,3 +40,4 @@ export declare const cellSelectorDescription: string;
 export declare const cellSelectorRow: string;
 export declare const cellSelectorCell: string;
 export declare const cellSelectorCellActive: string;
+export declare const cssHelper = "helper";

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

@@ -38,7 +38,8 @@ const cellSelector = 'cell-selector';
 const cellSelectorContainer = `${cellSelector}__container`;
 const cellSelectorRow = `${cellSelector}__row`;
 const cellSelectorCell = `${cellSelector}__cell`;
-const cellSelectorCellActive = `${cellSelectorCell}_active`;
+const cellSelectorCellActive = `${cellSelectorCell}_active`;
+const cssHelper = 'helper';
 
-export { cellSelector, cellSelectorCell, cellSelectorCellActive, cellSelectorContainer, cellSelectorRow, checkbox, checkboxControl, checkboxDisabled, checkboxIcon, checkboxLabel, checkboxSwitch, checkboxSwitchControl, checkboxSwitchDisabled, checkboxSwitchIcon, checkboxSwitchLabel, cssControl, cssControlDisabled, cssControlError, cssControlFocus, cssControlInput, cssControlReadonly, cssControlS, cssControlWrapper, cssControls, cssControlsAdditionalInfo, cssControlsContent, cssControlsElement, cssControlsElementCheckbox, cssControlsElementPostfix, cssControlsElementPrefix, cssControlsElementRadio, cssControlsElementVerticalAlignTop, cssControlsError, cssControlsErrors, cssControlsErrorsList, cssControlsErrorsListItem, cssControlsLabel, radio, radioControl, radioDisabled, radioLabel };
+export { cellSelector, cellSelectorCell, cellSelectorCellActive, cellSelectorContainer, cellSelectorRow, checkbox, checkboxControl, checkboxDisabled, checkboxIcon, checkboxLabel, checkboxSwitch, checkboxSwitchControl, checkboxSwitchDisabled, checkboxSwitchIcon, checkboxSwitchLabel, cssControl, cssControlDisabled, cssControlError, cssControlFocus, cssControlInput, cssControlReadonly, cssControlS, cssControlWrapper, cssControls, cssControlsAdditionalInfo, cssControlsContent, cssControlsElement, cssControlsElementCheckbox, cssControlsElementPostfix, cssControlsElementPrefix, cssControlsElementRadio, cssControlsElementVerticalAlignTop, cssControlsError, cssControlsErrors, cssControlsErrorsList, cssControlsErrorsListItem, cssControlsLabel, cssHelper, radio, radioControl, radioDisabled, radioLabel };
 //# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/controls/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;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/esm/packages/aurora/src/components/controls/hoc/control_checkbox/index.js

@@ -15,8 +15,12 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlCheckbox = ({ id, hint, hintOptions = { isFixed: true }, label, name, value, initiallyChecked, disabled, onChange, errors }) => {
+const ControlCheckbox = ({ id, hint, hintOptions = { isFixed: true }, label, name, value, initiallyChecked, disabled, onChange, helper, labelTop, hintTop, hintTopOptions = { isFixed: true }, isRequired, errors }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
+        (labelTop || hintTop) && (React.createElement(Control.Label, { id: id, isRequired: isRequired },
+            labelTop,
+            hintTop && React.createElement(Hint, { fixed: hintTopOptions.isFixed, spacingLeft: true, hint: hintTop }))),
+        helper && React.createElement(Control.Helper, null, helper),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, { type: "checkbox" },
                 React.createElement(Control.Checkbox, { id: id, name: name, value: value, initiallyChecked: initiallyChecked, disabled: disabled, onChange: onChange }),

package/build/esm/packages/aurora/src/components/controls/hoc/control_checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/esm/packages/aurora/src/components/controls/hoc/control_input/index.js

@@ -17,11 +17,12 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlInput = ({ label, isRequired, id, name, value, placeholder, prefix, postfix, disabled, onChange, onKeyPress, onKeyUp, hint, hintOptions = { isFixed: true }, errors, additionalInfo, ...props }) => {
+const ControlInput = ({ label, isRequired, id, name, value, placeholder, prefix, postfix, disabled, onChange, onKeyPress, onKeyUp, hint, hintOptions = { isFixed: true }, errors, helper, additionalInfo, ...props }) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+        helper && React.createElement(Control.Helper, null, helper),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, { prefix: prefix, postfix: postfix },
                 React.createElement(Control.Input, { id: id, name: name, value: value, placeholder: placeholder, disabled: disabled, onChange: onChange, onKeyPress: onKeyPress, onKeyUp: onKeyUp, ...props }))),

package/build/esm/packages/aurora/src/components/controls/hoc/control_input/index.js.map

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

package/build/esm/packages/aurora/src/components/controls/hoc/control_textarea/index.js

@@ -17,16 +17,18 @@ import Hint from '../../../hint/index.js';
  *  />
  * )
  */
-const ControlTextarea = React.forwardRef(({ label, isRequired, id, name, value, defaultValue, placeholder, disabled, readOnly, onChange, onFocus, onBlur, onKeyPress, errors, hint, hintOptions = { isFixed: true } }, ref) => {
+const ControlTextarea = React.forwardRef(({ label, isRequired, id, name, value, defaultValue, placeholder, disabled, readOnly, onChange, onFocus, onBlur, onKeyPress, errors, hint, hintOptions = { isFixed: true }, helper }, ref) => {
     return (React.createElement(Control, { errors: errors, name: name, id: id },
         (label || hint) && (React.createElement(Control.Label, { id: id, isRequired: isRequired },
             label,
             hint && React.createElement(Hint, { fixed: hintOptions.isFixed, spacingLeft: true, hint: hint }))),
+        helper && React.createElement(Control.Helper, null, helper),
         React.createElement(Control.Content, null,
             React.createElement(Control.Element, null,
                 React.createElement(Control.Textarea, { id: id, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, readOnly: readOnly, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyPress: onKeyPress, ref: ref }))),
         React.createElement(Control.Errors, null)));
-});
+});
+ControlTextarea.displayName = 'ControlTextarea';
 
 export default ControlTextarea;
 //# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/controls/hoc/control_textarea/index.js.map

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

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

@@ -10,6 +10,7 @@ import Content from './components/content.js';
 import ControlLabel from './components/label.js';
 import Element from './components/element.js';
 import Errors from './components/errors.js';
+import Helper from './components/helper.js';
 import Radio from './components/radio.js';
 import Textarea from './components/textarea.js';
 
@@ -26,7 +27,8 @@ Control.Content = Content;
 Control.Element = Element;
 Control.Textarea = Textarea;
 Control.Errors = Errors;
-Control.AdditionalInfo = AdditionalInfo;
+Control.AdditionalInfo = AdditionalInfo;
+Control.Helper = Helper;
 
 export default Control;
 //# sourceMappingURL=index.js.map

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

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

package/build/esm/packages/aurora/src/components/controls/types.d.ts

@@ -21,6 +21,7 @@ export interface IControlComposition {
     Textarea: React.FC<ITextareaProps>;
     Errors: React.FC;
     AdditionalInfo: React.FC;
+    Helper: React.FC<React.ReactNode>;
 }
 export interface IControlProps {
     children: ReactNode;
@@ -100,9 +101,14 @@ export interface IControlInputProps extends IInputProps, IControlCommonProps {
     postfix?: string;
     label?: string;
     isRequired?: boolean;
+    helper?: React.ReactNode;
 }
 export interface IControlCheckboxProps extends ICheckboxProps, IControlCommonProps {
     label: string;
+    helper?: React.ReactNode;
+    hintTopOptions?: TControlHintOptions;
+    labelTop?: string;
+    hintTop?: string;
 }
 export interface IRadioProps extends InputHTMLAttributes<HTMLInputElement> {
     id: string;
@@ -136,6 +142,7 @@ export interface IControlColorPickerProps extends IColorPickerProps, IControlCom
 export interface IControlTextareaProps extends ITextareaProps, IControlCommonProps {
     label?: string;
     isRequired?: boolean;
+    helper?: React.ReactNode;
 }
 export interface IControlSelectProps extends ISelectProps, IControlCommonProps {
     id?: string;

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/build/esm/packages/aurora/src/css/helper/main.module.less.js

@@ -0,0 +1,8 @@
+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.main-module_helper__ZHmAY {\n  font-size: 12px;\n  font-size: 0.8571428571428571rem;\n  line-height: 15px;\n  color: #5c657e;\n  margin-bottom: 0.25rem;\n}\n";
+var cssStyles = {"helper":"main-module_helper__ZHmAY"};
+styleInject(css_248z);
+
+export default cssStyles;
+//# sourceMappingURL=main.module.less.js.map

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

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

package/package.json

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