@dreamcommerce/aurora 2.27.16 → 2.27.18

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_controls.js

@@ -9,8 +9,8 @@ var index = require('../../stack/index.js');
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var context = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
-var use_color_picker = require('../hooks/use_color_picker.js');
 var index$1 = require('../../tooltip/index.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_mode_toggler = require('./color_picker_mode_toggler.js');
 var EyeDropper = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js');
 var color_picker_gradient_angle = require('./color_picker_gradient_controls/color_picker_gradient_angle.js');

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_gradient_controls/color_picker_gradient_controls_constants.js

@@ -9,7 +9,8 @@ var COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES = {
   colorPickerModeTogglerButtonSolid: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_solid"),
   colorPickerModeTogglerButtonLinearGradient: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_gradient_linear"),
   colorPickerModeTogglerButtonSolidRadialGradient: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_gradient_radial"),
-  colorPickerModeTogglerButtonActive: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_active")
+  colorPickerModeTogglerButtonActive: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_active"),
+  colorPickerModeTogglerButtonHover: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_hover")
 };
 
 exports.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES = COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES;

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_header.js

@@ -8,8 +8,8 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var index = require('../../dropdown/context/index.js');
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
-var use_color_picker = require('../hooks/use_color_picker.js');
 var icon_close = require('../../../assets/icon_close.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_inputs/color_picker_inputs_hex.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var input = require('../../../controls/components/input.js');
-var use_color_picker = require('../../hooks/use_color_picker.js');
 var utilities = require('@dreamcommerce/utilities');
+var use_color_picker = require('../../hooks/use_color_picker.js');
 var color_picker_utils = require('../../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_inputs/color_picker_inputs_rgba.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var input = require('../../../controls/components/input.js');
-var use_color_picker = require('../../hooks/use_color_picker.js');
 var utilities = require('@dreamcommerce/utilities');
+var use_color_picker = require('../../hooks/use_color_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_mode_toggler.js

@@ -9,8 +9,8 @@ var classnames = require('classnames');
 var index = require('../../stack/index.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var color_picker_gradient_controls_constants = require('./color_picker_gradient_controls/color_picker_gradient_controls_constants.js');
-var use_color_picker = require('../hooks/use_color_picker.js');
 var index$1 = require('../../tooltip/index.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -30,6 +30,21 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       previousSolidColor = _useColorPicker.previousSolidColor,
       previousGradientColor = _useColorPicker.previousGradientColor;
 
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isHoverSolidMode = _useState2[0],
+      setIsHoverSolidMode = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      isHoverLinearMode = _useState4[0],
+      setIsHoverLinearMode = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      isHoverRadialMode = _useState6[0],
+      setIsHoverRadialMode = _useState6[1];
+
   return /*#__PURE__*/React__default['default'].createElement(index['default'], {
     spacing: 4,
     className: main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeToggler]
@@ -43,7 +58,13 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setSolid(previousSolidColor);
     },
     "aria-label": "Color picker solid mode",
-    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolid], _rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], !isCurrentValueGradient))
+    onMouseEnter: function onMouseEnter() {
+      return setIsHoverSolidMode(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHoverSolidMode(false);
+    },
+    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolid], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], !isCurrentValueGradient), main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonHover], isHoverSolidMode))
   })), /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
     content: t('Linear gradient'),
     left: true,
@@ -54,7 +75,13 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setLinear(previousGradientColor);
     },
     "aria-label": "Color picker linear gradient mode",
-    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonLinearGradient], _rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'linear-gradient'))
+    onMouseEnter: function onMouseEnter() {
+      return setIsHoverLinearMode(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHoverLinearMode(false);
+    },
+    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonLinearGradient], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'linear-gradient'), main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonHover], isHoverLinearMode))
   })), /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
     content: t('Radial gradient'),
     left: true,
@@ -65,7 +92,13 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setRadial(previousGradientColor);
     },
     "aria-label": "Color picker radial gradient mode",
-    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolidRadialGradient], _rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'radial-gradient'))
+    onMouseEnter: function onMouseEnter() {
+      return setIsHoverRadialMode(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHoverRadialMode(false);
+    },
+    className: classnames__default['default'](main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolidRadialGradient], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'radial-gradient'), main_module['default'][color_picker_gradient_controls_constants.COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonHover], isHoverRadialMode))
   })));
 };
 

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_mode_toggler.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_new/components/color_picker_shades.js

@@ -8,8 +8,8 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -92,7 +92,8 @@ var ColorPickerShades = function ColorPickerShades() {
       onClick: handleOnClick,
       key: "".concat(shade, "-").concat(index),
       color: colorHex,
-      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny)
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   })));
 };

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_shades.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_new/components/color_picker_swatch.js

@@ -8,6 +8,8 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var tinycolor = require('../../../../../../external/tinycolor2/esm/tinycolor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -18,8 +20,19 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
       cssColor = _ref.cssColor,
       size = _ref.size,
+      hasActiveBorder = _ref.hasActiveBorder,
       onClick = _ref.onClick;
-  var colorHolderClassNames = classnames__default['default'](main_module['default'][css_classes.cssColorPickerSwatch], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, main_module['default'][css_classes.cssColorPickerSwatchSmall], size === constants.ColorPickerSwatch_SIZES.SMALL), main_module['default'][css_classes.cssColorPickerSwatchBig], size === constants.ColorPickerSwatch_SIZES.BIG));
+
+  var _useColorPicker = use_color_picker.useColorPicker(),
+      activeColor = _useColorPicker.color;
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var shouldApplyActiveBorder = hasActiveBorder && tinycolor['default'](activeColor.value).toHex() === color;
+  var colorHolderClassNames = classnames__default['default'](main_module['default'][css_classes.cssColorPickerSwatch], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, main_module['default'][css_classes.cssColorPickerSwatchSmall], size === constants.ColorPickerSwatch_SIZES.SMALL), main_module['default'][css_classes.cssColorPickerSwatchBig], size === constants.ColorPickerSwatch_SIZES.BIG), main_module['default'][css_classes.cssColorPickerSwatchActive], shouldApplyActiveBorder), main_module['default'][css_classes.cssColorPickerSwatchHover], isHovered));
 
   var handleOnClick = function handleOnClick() {
     onClick === null || onClick === void 0 || onClick(color);
@@ -27,7 +40,13 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: colorHolderClassNames,
-    onClick: handleOnClick
+    onClick: handleOnClick,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    }
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: main_module['default'][css_classes.cssColorPickerSwatchFill],
     style: {

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_swatch.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,wBAAwB,wDAA4D;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_new/components/color_picker_variables.js

@@ -8,8 +8,8 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
 var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -76,15 +76,19 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
       color: colorHex,
-      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny)
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   })), isOpen && /*#__PURE__*/React__default['default'].createElement("div", {
     className: main_module['default'][css_classes.cssColorPickerSwatchesSubContent]
   }, allShades.map(function (variable, index) {
+    var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
+    var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
+
     var handleOnClick = function handleOnClick() {
-      return setColor === null || setColor === void 0 ? void 0 : setColor({
-        value: variable.value,
-        name: variable.name
+      return setColor({
+        value: colorHex,
+        name: "".concat(variable.name)
       });
     };
 
@@ -92,8 +96,9 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
-      color: variable.value,
-      cssColor: variable.value
+      color: colorHex,
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   })));
 };

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color_picker_variables.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_new/components/pure_color_picker.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var css_classes = require('../css_classes.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
-var use_color_picker = require('../hooks/use_color_picker.js');
 var dropdown = require('../../dropdown/components/dropdown.js');
-var color_picker_utils = require('../color_picker_utils.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
 var color_picker_content = require('./color_picker_content.js');
 var color_label_input = require('./color_label_input.js');
 

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

@@ -21,6 +21,8 @@ var cssColorPickerGradientAngleInputWrapper = 'color-picker__gradient-angle-inpu
 var cssColorPickerSwatch = 'color-picker__swatch';
 var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
 var cssColorPickerSwatchBig = 'color-picker__swatch_big';
+var cssColorPickerSwatchActive = 'color-picker__swatch_active';
+var cssColorPickerSwatchHover = 'color-picker__swatch_hover';
 var cssColorPickerSwatchFill = 'color-picker__swatch-fill';
 var cssColorPickerInputColorSwatchContainer = 'color-picker__input-color-swatch-container';
 var cssColorPickerInputContainer = 'color-picker__input-container';
@@ -56,8 +58,10 @@ exports.cssColorPickerOpacity = cssColorPickerOpacity;
 exports.cssColorPickerRbgcp = cssColorPickerRbgcp;
 exports.cssColorPickerSquare = cssColorPickerSquare;
 exports.cssColorPickerSwatch = cssColorPickerSwatch;
+exports.cssColorPickerSwatchActive = cssColorPickerSwatchActive;
 exports.cssColorPickerSwatchBig = cssColorPickerSwatchBig;
 exports.cssColorPickerSwatchFill = cssColorPickerSwatchFill;
+exports.cssColorPickerSwatchHover = cssColorPickerSwatchHover;
 exports.cssColorPickerSwatchSmall = cssColorPickerSwatchSmall;
 exports.cssColorPickerSwatches = cssColorPickerSwatches;
 exports.cssColorPickerSwatchesContent = cssColorPickerSwatchesContent;

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

package/build/cjs/packages/aurora/src/components/modal_new/components/modal/modal.js

@@ -98,7 +98,7 @@ var ModalNew = function ModalNew(_ref) {
     className: "".concat(modalClassNames, " js__modal"),
     style: {
       minWidth: minWidth,
-      maxHeight: maxWidth
+      maxWidth: maxWidth
     }
   }, header && /*#__PURE__*/React__default['default'].createElement(modal_header.ModalHeader, {
     isCloseable: isCloseable,

package/build/cjs/packages/aurora/src/components/modal_new/components/modal/modal_header.js

@@ -20,7 +20,10 @@ var ModalHeader = function ModalHeader(_ref) {
   return /*#__PURE__*/React__default['default'].createElement("header", {
     className: main_module['default'][css_classes.cssModalHeader]
   }, /*#__PURE__*/React__default['default'].createElement("h3", {
-    className: main_module['default'][css_classes.cssModalHeaderTitle]
+    className: main_module['default'][css_classes.cssModalHeaderTitle],
+    style: {
+      marginBottom: '0'
+    }
   }, content), isCloseable && /*#__PURE__*/React__default['default'].createElement("div", {
     className: main_module['default'][css_classes.cssModalHeaderActions]
   }, closeAction && /*#__PURE__*/React__default['default'].createElement(icon_close['default'], {

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

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

@@ -4,7 +4,7 @@ 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_color-picker-impl__1W-fs {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'],\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] {\n  cursor: pointer;\n  border-radius: 4px;\n  width: 24px !important;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #f3f4f8;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn']:hover > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn']:hover > svg * {\n  stroke: #2d3748 !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'] > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] > svg * {\n  stroke: #5c657e !important;\n}\n.main-module_color-picker-impl__1W-fs [id='gradient-bar'] {\n  margin-top: 4px !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] {\n  margin: 0 !important;\n  padding: 0 !important;\n  display: flex;\n  width: auto;\n  height: auto !important;\n  border-radius: 4px;\n  justify-content: center;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] > div:nth-child(1) {\n  display: none;\n}\n.main-module_color-picker-mode-toggler__1f2oJ {\n  list-style: none;\n  display: flex;\n}\n.main-module_color-picker-mode-toggler__button__3vyH- {\n  cursor: pointer;\n  display: block;\n  width: 24px;\n  height: 24px;\n  border: 1px solid #2d3748;\n  border-radius: 4px;\n}\n.main-module_color-picker-mode-toggler__button_solid___X6iZ {\n  background: #5c657e;\n}\n.main-module_color-picker-mode-toggler__button_gradient_linear__3VUoB {\n  background: linear-gradient(90deg, #fff 0%, #5c657e 81.67%);\n}\n.main-module_color-picker-mode-toggler__button_gradient_radial__1BWYE {\n  background: radial-gradient(64.58% 64.58% at 50% 50%, #fff 0%, #9197a8 57.17%, #9197a8 57.18%, #5c657e 100%);\n}\n.main-module_color-picker-mode-toggler__button_active__wWPPx {\n  border: 2px solid #3c83ec;\n}\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 280px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__hue__1ow3q > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__opacity__232os > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__current-color-preview__mxKEu {\n  display: block;\n  border-radius: 4px;\n  border: 1px solid #f3f4f8;\n  width: 28px;\n  height: 28px;\n}\n.main-module_color-picker__gradient-angle__1dUul {\n  padding: 0;\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  height: 24px;\n  border: 2px solid #f3f4f8;\n  border-radius: 4px;\n  background: #f3f4f8;\n  position: relative;\n}\n.main-module_color-picker__gradient-angle__1dUul > svg * {\n  stroke: #5c657e;\n}\n.main-module_color-picker__gradient-angle-input__1nVDi {\n  background: #fff;\n  height: 20px;\n  border-radius: 4px;\n  width: 34px;\n  text-align: center;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__square__omS4M > div > div > div:first-child {\n  pointer-events: none;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n  transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  display: -ms-grid;\n  display: grid;\n  -ms-grid-columns: (1fr)[12];\n  grid-template-columns: repeat(12, 1fr);\n  gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n  flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #abb4cd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n  width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n  width: auto;\n}\n.main-module_color-picker__inputs__3Cmmw .main-module_color-picker__current-color-preview__mxKEu {\n  -ms-grid-row-align: stretch;\n      align-self: stretch;\n  width: 32px;\n  height: 32px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker-impl__1W-fs {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'],\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] {\n  cursor: pointer;\n  border-radius: 4px;\n  width: 24px !important;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #f3f4f8;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn']:hover > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn']:hover > svg * {\n  stroke: #2d3748 !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'] > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] > svg * {\n  stroke: #5c657e !important;\n}\n.main-module_color-picker-impl__1W-fs [id='gradient-bar'] {\n  margin-top: 4px !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] {\n  margin: 0 !important;\n  padding: 0 !important;\n  display: flex;\n  width: auto;\n  height: auto !important;\n  border-radius: 4px;\n  justify-content: center;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] > div:nth-child(1) {\n  display: none;\n}\n.main-module_color-picker-mode-toggler__1f2oJ {\n  list-style: none;\n  display: flex;\n}\n.main-module_color-picker-mode-toggler__button__3vyH- {\n  cursor: pointer;\n  display: block;\n  width: 24px;\n  height: 24px;\n  border: 1px solid #2d3748;\n  border-radius: 4px;\n}\n.main-module_color-picker-mode-toggler__button_solid___X6iZ {\n  background: #5c657e;\n}\n.main-module_color-picker-mode-toggler__button_gradient_linear__3VUoB {\n  background: linear-gradient(90deg, #fff 0%, #5c657e 81.67%);\n}\n.main-module_color-picker-mode-toggler__button_gradient_radial__1BWYE {\n  background: radial-gradient(64.58% 64.58% at 50% 50%, #fff 0%, #9197a8 57.17%, #9197a8 57.18%, #5c657e 100%);\n}\n.main-module_color-picker-mode-toggler__button_active__wWPPx {\n  border: 2px solid #3c83ec !important;\n}\n.main-module_color-picker-mode-toggler__button_hover__3WukS {\n  border: 2px solid #6fb9f7;\n}\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 280px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__hue__1ow3q > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__opacity__232os > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__current-color-preview__mxKEu {\n  display: block;\n  border-radius: 4px;\n  border: 1px solid #f3f4f8;\n  width: 28px;\n  height: 28px;\n}\n.main-module_color-picker__gradient-angle__1dUul {\n  padding: 0;\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  height: 24px;\n  border: 2px solid #f3f4f8;\n  border-radius: 4px;\n  background: #f3f4f8;\n  position: relative;\n}\n.main-module_color-picker__gradient-angle__1dUul > svg * {\n  stroke: #5c657e;\n}\n.main-module_color-picker__gradient-angle-input__1nVDi {\n  background: #fff;\n  height: 20px;\n  border-radius: 4px;\n  width: 34px;\n  text-align: center;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__square__omS4M > div > div > div:first-child {\n  pointer-events: none;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n  transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  display: -ms-grid;\n  display: grid;\n  -ms-grid-columns: (1fr)[12];\n  grid-template-columns: repeat(12, 1fr);\n  gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__swatch_active__1uLXL {\n  border: 2px solid #3c83ec !important;\n}\n.main-module_color-picker__swatch_hover__1DXdb {\n  border: 2px solid #6fb9f7;\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n  flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #abb4cd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n  width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n  width: auto;\n}\n.main-module_color-picker__inputs__3Cmmw .main-module_color-picker__current-color-preview__mxKEu {\n  -ms-grid-row-align: stretch;\n      align-self: stretch;\n  width: 32px;\n  height: 32px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
 var styles = {
   "color-picker-impl": "main-module_color-picker-impl__1W-fs",
   "color-picker-mode-toggler": "main-module_color-picker-mode-toggler__1f2oJ",
@@ -13,6 +13,7 @@ var styles = {
   "color-picker-mode-toggler__button_gradient_linear": "main-module_color-picker-mode-toggler__button_gradient_linear__3VUoB",
   "color-picker-mode-toggler__button_gradient_radial": "main-module_color-picker-mode-toggler__button_gradient_radial__1BWYE",
   "color-picker-mode-toggler__button_active": "main-module_color-picker-mode-toggler__button_active__wWPPx",
+  "color-picker-mode-toggler__button_hover": "main-module_color-picker-mode-toggler__button_hover__3WukS",
   "color-picker__container": "main-module_color-picker__container__14ccI",
   "color-picker__hue": "main-module_color-picker__hue__1ow3q",
   "color-picker__opacity": "main-module_color-picker__opacity__232os",
@@ -33,6 +34,8 @@ var styles = {
   "color-picker__swatch_small": "main-module_color-picker__swatch_small__3Z0pq",
   "color-picker__swatch_big": "main-module_color-picker__swatch_big__2tsQC",
   "color-picker__swatch-fill": "main-module_color-picker__swatch-fill__3D88w",
+  "color-picker__swatch_active": "main-module_color-picker__swatch_active__1uLXL",
+  "color-picker__swatch_hover": "main-module_color-picker__swatch_hover__1DXdb",
   "color-picker__input-container": "main-module_color-picker__input-container__1cC2e",
   "color-picker__input-color-swatch-container": "main-module_color-picker__input-color-swatch-container__3WX9B",
   "color-picker__inputs-type": "main-module_color-picker__inputs-type__1loVJ",

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

@@ -1 +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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_controls.js

@@ -5,8 +5,8 @@ import Stack from '../../stack/index.js';
 import { cssColorPickerControls } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import { usePicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
 import Tooltip from '../../tooltip/index.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerModeToggler } from './color_picker_mode_toggler.js';
 import Dropper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js';
 import { ColorPickerGradientAngle } from './color_picker_gradient_controls/color_picker_gradient_angle.js';

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_gradient_controls/color_picker_gradient_controls_constants.d.ts

@@ -5,4 +5,5 @@ export declare const COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES: {
     colorPickerModeTogglerButtonLinearGradient: string;
     colorPickerModeTogglerButtonSolidRadialGradient: string;
     colorPickerModeTogglerButtonActive: string;
+    colorPickerModeTogglerButtonHover: string;
 };

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_gradient_controls/color_picker_gradient_controls_constants.js

@@ -5,7 +5,8 @@ var COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES = {
   colorPickerModeTogglerButtonSolid: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_solid"),
   colorPickerModeTogglerButtonLinearGradient: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_gradient_linear"),
   colorPickerModeTogglerButtonSolidRadialGradient: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_gradient_radial"),
-  colorPickerModeTogglerButtonActive: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_active")
+  colorPickerModeTogglerButtonActive: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_active"),
+  colorPickerModeTogglerButtonHover: "".concat(colorPickerModeTogglerBaseCssClasses, "__button_hover")
 };
 
 export { COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES };

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_header.js

@@ -4,8 +4,8 @@ import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rol
 import { DropdownContext } from '../../dropdown/context/index.js';
 import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
 import IconClose from '../../../assets/icon_close.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 
 var ColorPickerHeader = function ColorPickerHeader() {
   var _useColorPicker = useColorPicker(),

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_inputs/color_picker_inputs_hex.js

@@ -1,8 +1,8 @@
 import React, { useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import Input from '../../../controls/components/input.js';
-import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { InputUtils } from '@dreamcommerce/utilities';
+import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { ColorPickerUtils } from '../../color_picker_utils.js';
 
 var ColorPickerInputsHex = function ColorPickerInputsHex() {

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_inputs/color_picker_inputs_rgba.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import Input from '../../../controls/components/input.js';
-import { useColorPicker } from '../../hooks/use_color_picker.js';
 import { InputUtils } from '@dreamcommerce/utilities';
+import { useColorPicker } from '../../hooks/use_color_picker.js';
 
 var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
   var _useColorPicker = useColorPicker(),

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_mode_toggler.js

@@ -1,12 +1,12 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
-import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import classnames from 'classnames';
 import Stack from '../../stack/index.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import { COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES } from './color_picker_gradient_controls/color_picker_gradient_controls_constants.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
 import Tooltip from '../../tooltip/index.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 
 var ColorPickerModeToggler = function ColorPickerModeToggler() {
   var _useTranslation = useTranslation(),
@@ -21,6 +21,21 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       previousSolidColor = _useColorPicker.previousSolidColor,
       previousGradientColor = _useColorPicker.previousGradientColor;
 
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHoverSolidMode = _useState2[0],
+      setIsHoverSolidMode = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isHoverLinearMode = _useState4[0],
+      setIsHoverLinearMode = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _slicedToArray(_useState5, 2),
+      isHoverRadialMode = _useState6[0],
+      setIsHoverRadialMode = _useState6[1];
+
   return /*#__PURE__*/React.createElement(Stack, {
     spacing: 4,
     className: styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeToggler]
@@ -34,7 +49,13 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setSolid(previousSolidColor);
     },
     "aria-label": "Color picker solid mode",
-    className: classnames(styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolid], _defineProperty({}, styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], !isCurrentValueGradient))
+    onMouseEnter: function onMouseEnter() {
+      return setIsHoverSolidMode(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHoverSolidMode(false);
+    },
+    className: classnames(styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolid], _defineProperty(_defineProperty({}, styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], !isCurrentValueGradient), styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonHover], isHoverSolidMode))
   })), /*#__PURE__*/React.createElement(Tooltip, {
     content: t('Linear gradient'),
     left: true,
@@ -45,7 +66,13 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setLinear(previousGradientColor);
     },
     "aria-label": "Color picker linear gradient mode",
-    className: classnames(styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonLinearGradient], _defineProperty({}, styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'linear-gradient'))
+    onMouseEnter: function onMouseEnter() {
+      return setIsHoverLinearMode(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHoverLinearMode(false);
+    },
+    className: classnames(styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonLinearGradient], _defineProperty(_defineProperty({}, styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'linear-gradient'), styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonHover], isHoverLinearMode))
   })), /*#__PURE__*/React.createElement(Tooltip, {
     content: t('Radial gradient'),
     left: true,
@@ -56,7 +83,13 @@ var ColorPickerModeToggler = function ColorPickerModeToggler() {
       return setRadial(previousGradientColor);
     },
     "aria-label": "Color picker radial gradient mode",
-    className: classnames(styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolidRadialGradient], _defineProperty({}, styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'radial-gradient'))
+    onMouseEnter: function onMouseEnter() {
+      return setIsHoverRadialMode(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHoverRadialMode(false);
+    },
+    className: classnames(styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButton], styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonSolidRadialGradient], _defineProperty(_defineProperty({}, styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonActive], gradientType === 'radial-gradient'), styles[COLOR_PICKER_MODE_TOGGLER_CSS_CLASSES.colorPickerModeTogglerButtonHover], isHoverRadialMode))
   })));
 };
 

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_mode_toggler.js.map

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_shades.js

@@ -4,8 +4,8 @@ import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rol
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { ColorPickerSwatch } from './color_picker_swatch.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 
 var ColorPickerShades = function ColorPickerShades() {
   var _useColorPicker = useColorPicker(),
@@ -84,7 +84,8 @@ var ColorPickerShades = function ColorPickerShades() {
       onClick: handleOnClick,
       key: "".concat(shade, "-").concat(index),
       color: colorHex,
-      cssColor: ColorPickerUtils.getHexValueString(colorTiny)
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   })));
 };

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_shades.js.map

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_swatch.d.ts

@@ -1,10 +1,11 @@
+import React from 'react';
 import { ColorPickerColorTypes } from '../types';
 import { ColorPickerSwatch_SIZES } from '../constants';
-import React from 'react';
 interface IColorPickerSwatchProps {
     color: string;
     cssColor: string;
     size?: typeof ColorPickerSwatch_SIZES[keyof typeof ColorPickerSwatch_SIZES];
+    hasActiveBorder?: boolean;
     onClick?: (color: ColorPickerColorTypes['hex']) => void;
 }
 export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_swatch.js

@@ -1,16 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ColorPickerSwatch_SIZES } from '../constants.js';
-import { defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import classnames from 'classnames';
-import { cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchSmall, cssColorPickerSwatchFill } from '../css_classes.js';
+import { cssColorPickerSwatch, cssColorPickerSwatchHover, cssColorPickerSwatchSmall, cssColorPickerSwatchBig, cssColorPickerSwatchActive, cssColorPickerSwatchFill } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import tinycolor from '../../../../../../external/tinycolor2/esm/tinycolor.js';
 
 var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
       cssColor = _ref.cssColor,
       size = _ref.size,
+      hasActiveBorder = _ref.hasActiveBorder,
       onClick = _ref.onClick;
-  var colorHolderClassNames = classnames(styles[cssColorPickerSwatch], _defineProperty(_defineProperty({}, styles[cssColorPickerSwatchSmall], size === ColorPickerSwatch_SIZES.SMALL), styles[cssColorPickerSwatchBig], size === ColorPickerSwatch_SIZES.BIG));
+
+  var _useColorPicker = useColorPicker(),
+      activeColor = _useColorPicker.color;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isHovered = _useState2[0],
+      setIsHovered = _useState2[1];
+
+  var shouldApplyActiveBorder = hasActiveBorder && tinycolor(activeColor.value).toHex() === color;
+  var colorHolderClassNames = classnames(styles[cssColorPickerSwatch], _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, styles[cssColorPickerSwatchSmall], size === ColorPickerSwatch_SIZES.SMALL), styles[cssColorPickerSwatchBig], size === ColorPickerSwatch_SIZES.BIG), styles[cssColorPickerSwatchActive], shouldApplyActiveBorder), styles[cssColorPickerSwatchHover], isHovered));
 
   var handleOnClick = function handleOnClick() {
     onClick === null || onClick === void 0 || onClick(color);
@@ -18,7 +31,13 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
 
   return /*#__PURE__*/React.createElement("div", {
     className: colorHolderClassNames,
-    onClick: handleOnClick
+    onClick: handleOnClick,
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    }
   }, /*#__PURE__*/React.createElement("div", {
     className: styles[cssColorPickerSwatchFill],
     style: {

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_swatch.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,sBAAsB,wDAA4D;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_variables.d.ts

@@ -1,5 +1,5 @@
-import { IColorPickerColorVariablesType } from '../types';
 import React from 'react';
+import { IColorPickerColorVariablesType } from '../types';
 interface IColorPickerVariablesProps {
     variables: IColorPickerColorVariablesType;
 }

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_variables.js

@@ -4,8 +4,8 @@ import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArra
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesContent, cssColorPickerSwatchesSubContent } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { ColorPickerSwatch } from './color_picker_swatch.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
 
 var ColorPickerVariables = function ColorPickerVariables(_ref) {
@@ -68,15 +68,19 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
       color: colorHex,
-      cssColor: ColorPickerUtils.getHexValueString(colorTiny)
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   })), isOpen && /*#__PURE__*/React.createElement("div", {
     className: styles[cssColorPickerSwatchesSubContent]
   }, allShades.map(function (variable, index) {
+    var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
+    var colorHex = ColorPickerUtils.getHexValue(colorTiny);
+
     var handleOnClick = function handleOnClick() {
-      return setColor === null || setColor === void 0 ? void 0 : setColor({
-        value: variable.value,
-        name: variable.name
+      return setColor({
+        value: colorHex,
+        name: "".concat(variable.name)
       });
     };
 
@@ -84,8 +88,9 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
-      color: variable.value,
-      cssColor: variable.value
+      color: colorHex,
+      cssColor: ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   })));
 };

package/build/esm/packages/aurora/src/components/color_picker_new/components/color_picker_variables.js.map

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/pure_color_picker.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { cssColorPicker, cssColorPickerInputContainer, cssColorPickerInputColorSwatchContainer } from '../css_classes.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
-import { useColorPicker } from '../hooks/use_color_picker.js';
 import Dropdown from '../../dropdown/components/dropdown.js';
-import { ColorPickerUtils } from '../color_picker_utils.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
 import { ColorPickerSwatch } from './color_picker_swatch.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 import { ColorPickerContent } from './color_picker_content.js';
 import { ColorPickerInput } from './color_label_input.js';
 

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

@@ -17,6 +17,8 @@ export declare const cssColorPickerGradientAngleInputWrapper = "color-picker__gr
 export declare const cssColorPickerSwatch = "color-picker__swatch";
 export declare const cssColorPickerSwatchSmall = "color-picker__swatch_small";
 export declare const cssColorPickerSwatchBig = "color-picker__swatch_big";
+export declare const cssColorPickerSwatchActive = "color-picker__swatch_active";
+export declare const cssColorPickerSwatchHover = "color-picker__swatch_hover";
 export declare const cssColorPickerSwatchFill = "color-picker__swatch-fill";
 export declare const cssColorPickerInputColorSwatchContainer = "color-picker__input-color-swatch-container";
 export declare const cssColorPickerInputContainer = "color-picker__input-container";

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

@@ -17,6 +17,8 @@ var cssColorPickerGradientAngleInputWrapper = 'color-picker__gradient-angle-inpu
 var cssColorPickerSwatch = 'color-picker__swatch';
 var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
 var cssColorPickerSwatchBig = 'color-picker__swatch_big';
+var cssColorPickerSwatchActive = 'color-picker__swatch_active';
+var cssColorPickerSwatchHover = 'color-picker__swatch_hover';
 var cssColorPickerSwatchFill = 'color-picker__swatch-fill';
 var cssColorPickerInputColorSwatchContainer = 'color-picker__input-color-swatch-container';
 var cssColorPickerInputContainer = 'color-picker__input-container';
@@ -30,5 +32,5 @@ var cssColorPickerOpacity = 'color-picker__opacity';
 var cssColorPickerImpl = 'color-picker-impl';
 var cssColorPickerSquare = 'color-picker__square';
 
-export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerControls, cssColorPickerCurrentColorPreview, cssColorPickerFooter, cssColorPickerGradientAngle, cssColorPickerGradientAngleInput, cssColorPickerGradientAngleInputWrapper, cssColorPickerHeader, cssColorPickerHue, cssColorPickerImpl, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerOpacity, cssColorPickerRbgcp, cssColorPickerSquare, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesSubContent };
+export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerControls, cssColorPickerCurrentColorPreview, cssColorPickerFooter, cssColorPickerGradientAngle, cssColorPickerGradientAngleInput, cssColorPickerGradientAngleInputWrapper, cssColorPickerHeader, cssColorPickerHue, cssColorPickerImpl, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerOpacity, cssColorPickerRbgcp, cssColorPickerSquare, cssColorPickerSwatch, cssColorPickerSwatchActive, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchHover, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesSubContent };
 //# sourceMappingURL=css_classes.js.map

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

package/build/esm/packages/aurora/src/components/modal_new/components/modal/modal.js

@@ -89,7 +89,7 @@ var ModalNew = function ModalNew(_ref) {
     className: "".concat(modalClassNames, " js__modal"),
     style: {
       minWidth: minWidth,
-      maxHeight: maxWidth
+      maxWidth: maxWidth
     }
   }, header && /*#__PURE__*/React.createElement(ModalHeader, {
     isCloseable: isCloseable,

package/build/esm/packages/aurora/src/components/modal_new/components/modal/modal_header.js

@@ -12,7 +12,10 @@ var ModalHeader = function ModalHeader(_ref) {
   return /*#__PURE__*/React.createElement("header", {
     className: styles[cssModalHeader]
   }, /*#__PURE__*/React.createElement("h3", {
-    className: styles[cssModalHeaderTitle]
+    className: styles[cssModalHeaderTitle],
+    style: {
+      marginBottom: '0'
+    }
   }, content), isCloseable && /*#__PURE__*/React.createElement("div", {
     className: styles[cssModalHeaderActions]
   }, closeAction && /*#__PURE__*/React.createElement(IconClose, {

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

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

@@ -1,6 +1,6 @@
 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_color-picker-impl__1W-fs {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'],\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] {\n  cursor: pointer;\n  border-radius: 4px;\n  width: 24px !important;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #f3f4f8;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn']:hover > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn']:hover > svg * {\n  stroke: #2d3748 !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'] > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] > svg * {\n  stroke: #5c657e !important;\n}\n.main-module_color-picker-impl__1W-fs [id='gradient-bar'] {\n  margin-top: 4px !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] {\n  margin: 0 !important;\n  padding: 0 !important;\n  display: flex;\n  width: auto;\n  height: auto !important;\n  border-radius: 4px;\n  justify-content: center;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] > div:nth-child(1) {\n  display: none;\n}\n.main-module_color-picker-mode-toggler__1f2oJ {\n  list-style: none;\n  display: flex;\n}\n.main-module_color-picker-mode-toggler__button__3vyH- {\n  cursor: pointer;\n  display: block;\n  width: 24px;\n  height: 24px;\n  border: 1px solid #2d3748;\n  border-radius: 4px;\n}\n.main-module_color-picker-mode-toggler__button_solid___X6iZ {\n  background: #5c657e;\n}\n.main-module_color-picker-mode-toggler__button_gradient_linear__3VUoB {\n  background: linear-gradient(90deg, #fff 0%, #5c657e 81.67%);\n}\n.main-module_color-picker-mode-toggler__button_gradient_radial__1BWYE {\n  background: radial-gradient(64.58% 64.58% at 50% 50%, #fff 0%, #9197a8 57.17%, #9197a8 57.18%, #5c657e 100%);\n}\n.main-module_color-picker-mode-toggler__button_active__wWPPx {\n  border: 2px solid #3c83ec;\n}\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 280px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__hue__1ow3q > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__opacity__232os > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__current-color-preview__mxKEu {\n  display: block;\n  border-radius: 4px;\n  border: 1px solid #f3f4f8;\n  width: 28px;\n  height: 28px;\n}\n.main-module_color-picker__gradient-angle__1dUul {\n  padding: 0;\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  height: 24px;\n  border: 2px solid #f3f4f8;\n  border-radius: 4px;\n  background: #f3f4f8;\n  position: relative;\n}\n.main-module_color-picker__gradient-angle__1dUul > svg * {\n  stroke: #5c657e;\n}\n.main-module_color-picker__gradient-angle-input__1nVDi {\n  background: #fff;\n  height: 20px;\n  border-radius: 4px;\n  width: 34px;\n  text-align: center;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__square__omS4M > div > div > div:first-child {\n  pointer-events: none;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n  transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  display: -ms-grid;\n  display: grid;\n  -ms-grid-columns: (1fr)[12];\n  grid-template-columns: repeat(12, 1fr);\n  gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n  flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #abb4cd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n  width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n  width: auto;\n}\n.main-module_color-picker__inputs__3Cmmw .main-module_color-picker__current-color-preview__mxKEu {\n  -ms-grid-row-align: stretch;\n      align-self: stretch;\n  width: 32px;\n  height: 32px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker-impl__1W-fs {\n  display: flex;\n  flex-direction: column;\n  gap: 8px;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'],\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] {\n  cursor: pointer;\n  border-radius: 4px;\n  width: 24px !important;\n  height: 24px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  background: #f3f4f8;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn']:hover > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn']:hover > svg * {\n  stroke: #2d3748 !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-eyedropper-btn'] > svg *,\n.main-module_color-picker-impl__1W-fs [id='rbgcp-point-delete-btn'] > svg * {\n  stroke: #5c657e !important;\n}\n.main-module_color-picker-impl__1W-fs [id='gradient-bar'] {\n  margin-top: 4px !important;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] {\n  margin: 0 !important;\n  padding: 0 !important;\n  display: flex;\n  width: auto;\n  height: auto !important;\n  border-radius: 4px;\n  justify-content: center;\n}\n.main-module_color-picker-impl__1W-fs [id='rbgcp-gradient-controls-wrap'] > div:nth-child(1) {\n  display: none;\n}\n.main-module_color-picker-mode-toggler__1f2oJ {\n  list-style: none;\n  display: flex;\n}\n.main-module_color-picker-mode-toggler__button__3vyH- {\n  cursor: pointer;\n  display: block;\n  width: 24px;\n  height: 24px;\n  border: 1px solid #2d3748;\n  border-radius: 4px;\n}\n.main-module_color-picker-mode-toggler__button_solid___X6iZ {\n  background: #5c657e;\n}\n.main-module_color-picker-mode-toggler__button_gradient_linear__3VUoB {\n  background: linear-gradient(90deg, #fff 0%, #5c657e 81.67%);\n}\n.main-module_color-picker-mode-toggler__button_gradient_radial__1BWYE {\n  background: radial-gradient(64.58% 64.58% at 50% 50%, #fff 0%, #9197a8 57.17%, #9197a8 57.18%, #5c657e 100%);\n}\n.main-module_color-picker-mode-toggler__button_active__wWPPx {\n  border: 2px solid #3c83ec !important;\n}\n.main-module_color-picker-mode-toggler__button_hover__3WukS {\n  border: 2px solid #6fb9f7;\n}\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 280px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__hue__1ow3q > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__opacity__232os > div {\n  margin-top: 4px !important;\n}\n.main-module_color-picker__current-color-preview__mxKEu {\n  display: block;\n  border-radius: 4px;\n  border: 1px solid #f3f4f8;\n  width: 28px;\n  height: 28px;\n}\n.main-module_color-picker__gradient-angle__1dUul {\n  padding: 0;\n  display: flex;\n  justify-content: space-between;\n  gap: 6px;\n  height: 24px;\n  border: 2px solid #f3f4f8;\n  border-radius: 4px;\n  background: #f3f4f8;\n  position: relative;\n}\n.main-module_color-picker__gradient-angle__1dUul > svg * {\n  stroke: #5c657e;\n}\n.main-module_color-picker__gradient-angle-input__1nVDi {\n  background: #fff;\n  height: 20px;\n  border-radius: 4px;\n  width: 34px;\n  text-align: center;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__square__omS4M > div > div > div:first-child {\n  pointer-events: none;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n  transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  display: -ms-grid;\n  display: grid;\n  -ms-grid-columns: (1fr)[12];\n  grid-template-columns: repeat(12, 1fr);\n  gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n  margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__swatch_active__1uLXL {\n  border: 2px solid #3c83ec !important;\n}\n.main-module_color-picker__swatch_hover__1DXdb {\n  border: 2px solid #6fb9f7;\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n  flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #abb4cd;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n  border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n  width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n  width: auto;\n}\n.main-module_color-picker__inputs__3Cmmw .main-module_color-picker__current-color-preview__mxKEu {\n  -ms-grid-row-align: stretch;\n      align-self: stretch;\n  width: 32px;\n  height: 32px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
 var styles = {
   "color-picker-impl": "main-module_color-picker-impl__1W-fs",
   "color-picker-mode-toggler": "main-module_color-picker-mode-toggler__1f2oJ",
@@ -9,6 +9,7 @@ var styles = {
   "color-picker-mode-toggler__button_gradient_linear": "main-module_color-picker-mode-toggler__button_gradient_linear__3VUoB",
   "color-picker-mode-toggler__button_gradient_radial": "main-module_color-picker-mode-toggler__button_gradient_radial__1BWYE",
   "color-picker-mode-toggler__button_active": "main-module_color-picker-mode-toggler__button_active__wWPPx",
+  "color-picker-mode-toggler__button_hover": "main-module_color-picker-mode-toggler__button_hover__3WukS",
   "color-picker__container": "main-module_color-picker__container__14ccI",
   "color-picker__hue": "main-module_color-picker__hue__1ow3q",
   "color-picker__opacity": "main-module_color-picker__opacity__232os",
@@ -29,6 +30,8 @@ var styles = {
   "color-picker__swatch_small": "main-module_color-picker__swatch_small__3Z0pq",
   "color-picker__swatch_big": "main-module_color-picker__swatch_big__2tsQC",
   "color-picker__swatch-fill": "main-module_color-picker__swatch-fill__3D88w",
+  "color-picker__swatch_active": "main-module_color-picker__swatch_active__1uLXL",
+  "color-picker__swatch_hover": "main-module_color-picker__swatch_hover__1DXdb",
   "color-picker__input-container": "main-module_color-picker__input-container__1cC2e",
   "color-picker__input-color-swatch-container": "main-module_color-picker__input-color-swatch-container__3WX9B",
   "color-picker__inputs-type": "main-module_color-picker__inputs-type__1loVJ",

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/package.json

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