@dreamcommerce/aurora 2.19.0-3 → 2.19.1-1

package/build/cjs/packages/aurora/src/assets/icon_list_arrow_down.js

@@ -3,18 +3,22 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var main_module = require('../css/icons/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var IconListArrowDown = function IconListArrowDown() {
+var IconListArrowDown = function IconListArrowDown(_ref) {
+  var className = _ref.className,
+      size = _ref.size;
   return /*#__PURE__*/React__default['default'].createElement("svg", {
     width: "6",
     height: "4",
     viewBox: "0 0 6 4",
     fill: "none",
-    xmlns: "http://www.w3.org/2000/svg"
+    xmlns: "http://www.w3.org/2000/svg",
+    className: "".concat(className || '', " ").concat(main_module['default']["icon_".concat(size)])
   }, /*#__PURE__*/React__default['default'].createElement("path", {
     id: "Polygon 1",
     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",

package/build/cjs/packages/aurora/src/assets/icon_list_arrow_down.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;AACA;"}

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

@@ -0,0 +1,163 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
+
+var _ColorPickerUtils;
+var ColorPickerUtils = /*#__PURE__*/_rollupPluginBabelHelpers.createClass(function ColorPickerUtils() {
+  _rollupPluginBabelHelpers.classCallCheck(this, ColorPickerUtils);
+});
+_ColorPickerUtils = ColorPickerUtils;
+
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
+  return tinycolor['default'](color);
+});
+
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getRgbaValue", function (colorSet) {
+  return colorSet.toRgb();
+});
+
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getHexValue", function (colorSet) {
+  var alphaValue = colorSet.getAlpha();
+  return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
+});
+
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getHexValueString", function (colorSet) {
+  return "#".concat(_ColorPickerUtils.getHexValue(colorSet));
+});
+
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "isHexChar", function (value) {
+  var hexRegEx = /^$|[0-9a-fA-F]+$/;
+  return hexRegEx.test(value);
+});
+
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
+  var tinyColor = typeof color === 'string' ? _ColorPickerUtils.getTinyColorInstance(color) : _ColorPickerUtils.getTinyColorInstance(color.value);
+
+  var rgba = _ColorPickerUtils.getRgbaValue(tinyColor);
+
+  var hex = _ColorPickerUtils.getHexValue(tinyColor);
+
+  var hexString = _ColorPickerUtils.getHexValueString(tinyColor);
+
+  var allColorTypes = {
+    rgba: {
+      r: rgba.r,
+      g: rgba.g,
+      b: rgba.b,
+      a: rgba.a
+    },
+    hex: hex,
+    hexString: hexString
+  };
+  var variableName = {
+    variable: color.name ? "@".concat(color.name) : ''
+  };
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, allColorTypes), variableName && variableName);
+});
+
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getVariableShades", function (_ref) {
+  var color = _ref.color,
+      name = _ref.name;
+
+  var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
+
+  var colorHsl = colorTiny.toHsl();
+  var isNeutral = name.includes('neutral');
+  var blackShade = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 100,
+    name: "".concat(name, "s0")
+  }];
+  var whiteShade = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 0,
+    name: "".concat(name, "s1000")
+  }];
+  var shades = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 99,
+    name: "".concat(name, "s10")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 98,
+    name: "".concat(name, "s20")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 95,
+    name: "".concat(name, "s50")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 90,
+    name: "".concat(name, "s100")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 80,
+    name: "".concat(name, "s200")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 70,
+    name: "".concat(name, "s300")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 60,
+    name: "".concat(name, "s400")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 50,
+    name: "".concat(name, "s500")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 40,
+    name: "".concat(name, "s600")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 30,
+    name: "".concat(name, "s700")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 20,
+    name: "".concat(name, "s800")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 10,
+    name: "".concat(name, "s900")
+  }];
+  var result = [].concat(_rollupPluginBabelHelpers.toConsumableArray(isNeutral ? blackShade : []), shades, _rollupPluginBabelHelpers.toConsumableArray(isNeutral ? whiteShade : []));
+  return _ColorPickerUtils.convertVariableShadesToHex(result);
+});
+
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "convertVariableShadesToHex", function (variables) {
+  return variables.map(function (variable) {
+    var colorTiny = _ColorPickerUtils.getTinyColorInstance({
+      h: variable.h,
+      s: variable.s,
+      l: variable.l
+    });
+
+    var colorHex = colorTiny.toHexString();
+    return {
+      name: variable.name,
+      value: colorHex
+    };
+  });
+});
+
+exports.ColorPickerUtils = ColorPickerUtils;
+//# sourceMappingURL=color_picker_utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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-label-input.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var input = require('../../controls/components/input.js');
 var context = require('../context.js');
 
@@ -15,13 +17,18 @@ var ColorLabelInput = function ColorLabelInput(_ref) {
       name = _ref.name;
 
   var _useContext = React.useContext(context.ColorPickerNewContext),
-      hex = _useContext.hex;
+      hex = _useContext.hex,
+      color = _useContext.color;
+
+  var _useTranslation = useTranslation.useTranslation(),
+      _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
 
   return /*#__PURE__*/React__default['default'].createElement(input['default'], {
     type: "text",
     id: id,
     name: name,
-    value: "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase()),
+    value: color.name ? "".concat(t(color.name)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase()),
     readOnly: true
   });
 };

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-label-input.js.map

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js

@@ -9,7 +9,7 @@ var index$1 = require('../../button/index.js');
 var index = require('../../dropdown/context/index.js');
 var context = require('../context.js');
 var css_classes = require('../css_classes.js');
-var utilities = require('../utilities.js');
+var color_picker_utils = require('../color_picker_utils.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -36,7 +36,7 @@ var ColorPickerFooter = function ColorPickerFooter() {
 
   var handleSaveButton = function handleSaveButton() {
     closeDropdown === null || closeDropdown === void 0 || closeDropdown();
-    handleSave(utilities.getAllColorTypes(color));
+    handleSave(color_picker_utils.ColorPickerUtils.getAllColorTypes(color));
   };
 
   return /*#__PURE__*/React__default['default'].createElement("div", {

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hex.js

@@ -6,7 +6,7 @@ var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var input = require('../../../controls/components/input.js');
 var context = require('../../context.js');
-var utilities$1 = require('../../utilities.js');
+var color_picker_utils = require('../../color_picker_utils.js');
 var utilities = require('@dreamcommerce/utilities');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -33,7 +33,7 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
   var handleOnChange = function handleOnChange(event) {
     var inputValue = event.target.value.replace('%', '');
 
-    if (utilities$1.isHexChar(inputValue)) {
+    if (color_picker_utils.ColorPickerUtils.isHexChar(inputValue)) {
       setValue(inputValue);
       setColor(inputValue);
     }

package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js → color-picker-shades.js}

@@ -7,7 +7,7 @@ var useTranslation = require('../../../../../../external/react-i18next/dist/es/u
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var context = require('../context.js');
 var css_classes = require('../css_classes.js');
-var utilities = require('../utilities.js');
+var color_picker_utils = require('../color_picker_utils.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var colorPickerSwatch = require('./color-picker-swatch.js');
 
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ColorPickerSwatches = function ColorPickerSwatches() {
+var ColorPickerShades = function ColorPickerShades() {
   var _useContext = React.useContext(context.ColorPickerNewContext),
       hslArr = _useContext.hslArr,
       handlePickSwatch = _useContext.handlePickSwatch;
@@ -80,8 +80,8 @@ var ColorPickerSwatches = function ColorPickerSwatches() {
   }, /*#__PURE__*/React__default['default'].createElement("p", null, t('Shades of color'))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: main_module['default'][css_classes.cssColorPickerSwatchesContent]
   }, shades.map(function (shade, index) {
-    var colorTiny = utilities.getTinyColorInstance(shade);
-    var colorHex = utilities.getHexValue(colorTiny);
+    var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(shade);
+    var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
 
     var handleOnClick = function handleOnClick() {
       handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
@@ -96,5 +96,5 @@ var ColorPickerSwatches = function ColorPickerSwatches() {
   })));
 };
 
-exports.ColorPickerSwatches = ColorPickerSwatches;
-//# sourceMappingURL=color-picker-swatches.js.map
+exports.ColorPickerShades = ColorPickerShades;
+//# sourceMappingURL=color-picker-shades.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.js

@@ -7,7 +7,7 @@ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPlugi
 var classnames = require('classnames');
 var constants = require('../constants.js');
 var css_classes = require('../css_classes.js');
-var utilities = require('../utilities.js');
+var color_picker_utils = require('../color_picker_utils.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -19,8 +19,8 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
       size = _ref.size,
       onClick = _ref.onClick;
-  var colorTiny = utilities.getTinyColorInstance(color);
-  var colorHex = utilities.getHexValueString(colorTiny);
+  var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(color);
+  var colorHex = color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny);
   var colorHolderClassNames = classnames__default['default'](main_module['default'][css_classes.cssColorPickerSwatch], _rollupPluginBabelHelpers.defineProperty(_rollupPluginBabelHelpers.defineProperty({}, main_module['default'][css_classes.cssColorPickerSwatchSmall], size === constants.COLOR_PICKER_SWATCH_SIZES.SMALL), main_module['default'][css_classes.cssColorPickerSwatchBig], size === constants.COLOR_PICKER_SWATCH_SIZES.BIG));
 
   var handleOnClick = function handleOnClick() {

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js

@@ -0,0 +1,101 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var context = require('../context.js');
+var css_classes = require('../css_classes.js');
+var color_picker_utils = require('../color_picker_utils.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
+var colorPickerSwatch = require('./color-picker-swatch.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 }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerVariables = function ColorPickerVariables(_ref) {
+  var variables = _ref.variables;
+
+  var _useContext = React.useContext(context.ColorPickerNewContext),
+      handlePickSwatch = _useContext.handlePickSwatch;
+
+  var _useTranslation = useTranslation.useTranslation(),
+      _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      isOpen = _useState2[0],
+      setIsOpen = _useState2[1];
+
+  var primary = variables.primary,
+      secondary = variables.secondary,
+      neutral = variables.neutral;
+  var primaryShades = color_picker_utils.ColorPickerUtils.getVariableShades({
+    color: primary.value,
+    name: primary.name
+  });
+  var secondaryShades = color_picker_utils.ColorPickerUtils.getVariableShades({
+    color: secondary.value,
+    name: secondary.name
+  });
+  var neutralShades = color_picker_utils.ColorPickerUtils.getVariableShades({
+    color: neutral.value,
+    name: neutral.name
+  });
+  var allShades = [].concat(_rollupPluginBabelHelpers.toConsumableArray(primaryShades), _rollupPluginBabelHelpers.toConsumableArray(secondaryShades), _rollupPluginBabelHelpers.toConsumableArray(neutralShades));
+  console.log('allShades', allShades);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerSwatches]
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerSwatchesHeader]
+  }, /*#__PURE__*/React__default['default'].createElement("p", null, t('Theme colors')), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerSwatchesHeaderIcon],
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, {
+    className: "".concat(!isOpen ? main_module['default'][css_classes.cssColorPickerSwatchesHeaderIconRotate] : '')
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerSwatchesContent]
+  }, Object.values(variables).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 handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch({
+        value: colorHex,
+        name: "".concat(variable.name)
+      });
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
+      size: "small",
+      onClick: handleOnClick,
+      key: "".concat(variable, "-").concat(index),
+      color: colorHex
+    });
+  })), isOpen && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes.cssColorPickerSwatchesSubContent]
+  }, allShades.map(function (variable, index) {
+    var handleOnClick = function handleOnClick() {
+      return handlePickSwatch === null || handlePickSwatch === void 0 ? void 0 : handlePickSwatch({
+        value: variable.value,
+        name: variable.name
+      });
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
+      size: "small",
+      onClick: handleOnClick,
+      key: "".concat(variable, "-").concat(index),
+      color: variable.value
+    });
+  })));
+};
+
+exports.ColorPickerVariables = ColorPickerVariables;
+//# sourceMappingURL=color-picker-variables.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js.map

@@ -0,0 +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;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js

@@ -13,7 +13,8 @@ var colorPickerFooter = require('./color-picker-footer.js');
 var colorPickerHeader = require('./color-picker-header.js');
 var colorPickerInputs = require('./color-picker-inputs/color-picker-inputs.js');
 var colorPickerSwatch = require('./color-picker-swatch.js');
-var colorPickerSwatches = require('./color-picker-swatches.js');
+var colorPickerShades = require('./color-picker-shades.js');
+var colorPickerVariables = require('./color-picker-variables.js');
 var dropdown = require('../../dropdown/components/dropdown.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,12 +23,14 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
   var id = _ref.id,
-      name = _ref.name;
+      name = _ref.name,
+      colorVariables = _ref.colorVariables;
 
   var _useContext = React.useContext(context.ColorPickerNewContext),
       color = _useContext.color,
       setColor = _useContext.setColor;
 
+  var colorValue = typeof color === 'string' ? color : color.value;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPicker])
   }, /*#__PURE__*/React__default['default'].createElement(dropdown['default'], null, /*#__PURE__*/React__default['default'].createElement(dropdown['default'].CustomLabel, null, /*#__PURE__*/React__default['default'].createElement("div", {
@@ -35,7 +38,7 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer])
   }, /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
-    color: color
+    color: colorValue
   })), /*#__PURE__*/React__default['default'].createElement(colorLabelInput.ColorLabelInput, {
     id: id,
     name: name
@@ -46,7 +49,7 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
   }, /*#__PURE__*/React__default['default'].createElement(colorPickerHeader.ColorPickerHeader, null), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPickerContainer])
   }, /*#__PURE__*/React__default['default'].createElement(index.ColorPicker, {
-    value: color,
+    value: colorValue,
     onChange: setColor,
     width: constants.COLOR_PICKER_WIDTH,
     height: constants.COLOR_PICKER_HEIGHT,
@@ -57,7 +60,9 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
     hideInputs: true,
     hidePresets: true,
     className: "".concat(main_module['default'][css_classes.cssColorPickerRbgcp])
-  }), /*#__PURE__*/React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null), /*#__PURE__*/React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, null)), /*#__PURE__*/React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null))));
+  }), /*#__PURE__*/React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null), /*#__PURE__*/React__default['default'].createElement(colorPickerShades.ColorPickerShades, null), (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.isVisible) && /*#__PURE__*/React__default['default'].createElement(colorPickerVariables.ColorPickerVariables, {
+    variables: colorVariables.variables
+  })), /*#__PURE__*/React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null))));
 };
 
 exports.default = ColorPickerNewPure;

package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,0FAA8F;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,0FAA8F;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var COLOR_PICKER_INITIAL_STATE = '#000000';
-var COLOR_PICKER_WIDTH = 220;
+var COLOR_PICKER_WIDTH = 247;
 var COLOR_PICKER_HEIGHT = 200;
 var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
 var COLOR_PICKER_TYPES = {

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

@@ -5,7 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 
 var ColorPickerNewContext = /*#__PURE__*/React.createContext({
-  color: '',
+  color: {
+    value: '',
+    name: ''
+  },
   setColor: function setColor() {},
   hex: '',
   hslArr: [],

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

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

@@ -9,7 +9,10 @@ var cssColorPickerHeader = 'color-picker__header';
 var cssColorPickerCloseIcon = 'color-picker__close-icon';
 var cssColorPickerSwatches = 'color-picker__swatches';
 var cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
+var cssColorPickerSwatchesHeaderIcon = 'color-picker__swatches-header-icon';
+var cssColorPickerSwatchesHeaderIconRotate = 'color-picker__swatches-header-icon_rotate-180';
 var cssColorPickerSwatchesContent = 'color-picker__swatches-content';
+var cssColorPickerSwatchesSubContent = 'color-picker__swatches-subcontent';
 var cssColorPickerSwatch = 'color-picker__swatch';
 var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
 var cssColorPickerSwatchBig = 'color-picker__swatch_big';
@@ -41,4 +44,7 @@ exports.cssColorPickerSwatchSmall = cssColorPickerSwatchSmall;
 exports.cssColorPickerSwatches = cssColorPickerSwatches;
 exports.cssColorPickerSwatchesContent = cssColorPickerSwatchesContent;
 exports.cssColorPickerSwatchesHeader = cssColorPickerSwatchesHeader;
+exports.cssColorPickerSwatchesHeaderIcon = cssColorPickerSwatchesHeaderIcon;
+exports.cssColorPickerSwatchesHeaderIconRotate = cssColorPickerSwatchesHeaderIconRotate;
+exports.cssColorPickerSwatchesSubContent = cssColorPickerSwatchesSubContent;
 //# sourceMappingURL=css_classes.js.map

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

package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js

@@ -6,25 +6,42 @@ var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var constants = require('../constants.js');
 var useColorPicker$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js');
-var utilities = require('../utilities.js');
+var color_picker_utils = require('../color_picker_utils.js');
 
 var useColorPicker = function useColorPicker(_ref) {
+  var _initialColor$name;
+
   var initialColor = _ref.initialColor,
       onChange = _ref.onChange,
       onCancel = _ref.onCancel,
       onSave = _ref.onSave;
 
-  var _useState = React.useState(initialColor ? initialColor : constants.COLOR_PICKER_INITIAL_STATE),
+  var _useState = React.useState({
+    value: initialColor ? color_picker_utils.ColorPickerUtils.getTinyColorInstance(typeof initialColor === 'string' ? initialColor : initialColor === null || initialColor === void 0 ? void 0 : initialColor.value).toHex8() : constants.COLOR_PICKER_INITIAL_STATE,
+    name: typeof initialColor === 'string' ? '' : (_initialColor$name = initialColor === null || initialColor === void 0 ? void 0 : initialColor.name) !== null && _initialColor$name !== void 0 ? _initialColor$name : ''
+  }),
       _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
       color = _useState2[0],
-      setColor = _useState2[1];
+      setColor2 = _useState2[1];
+
+  var setColor = function setColor(color) {
+    var hexColor = color_picker_utils.ColorPickerUtils.getTinyColorInstance(typeof color === 'string' ? color : color.value).toHex8();
+    setColor2(function (prevColor) {
+      var _prevColor$value;
+
+      return {
+        value: hexColor,
+        name: ((_prevColor$value = prevColor.value) !== null && _prevColor$value !== void 0 ? _prevColor$value : prevColor) === hexColor ? prevColor === null || prevColor === void 0 ? void 0 : prevColor.name : typeof color === 'string' ? '' : color === null || color === void 0 ? void 0 : color.name
+      };
+    });
+  };
 
   var _useState3 = React.useState(color),
       _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
       choosenColor = _useState4[0],
       setChoosenColor = _useState4[1];
 
-  var _useBestGradientColor = useColorPicker$1.useColorPicker(color, setColor),
+  var _useBestGradientColor = useColorPicker$1.useColorPicker(typeof color === 'string' ? color : color.value, setColor),
       hslArr = _useBestGradientColor.hslArr,
       rgbaArr = _useBestGradientColor.rgbaArr,
       setR = _useBestGradientColor.setR,
@@ -32,8 +49,8 @@ var useColorPicker = function useColorPicker(_ref) {
       setB = _useBestGradientColor.setB,
       setA = _useBestGradientColor.setA;
 
-  var tinyColor = utilities.getTinyColorInstance(color);
-  var hex = utilities.getHexValue(tinyColor);
+  var tinyColor = typeof color === 'string' ? color_picker_utils.ColorPickerUtils.getTinyColorInstance(color) : color_picker_utils.ColorPickerUtils.getTinyColorInstance(color.value);
+  var hex = color_picker_utils.ColorPickerUtils.getHexValue(tinyColor);
 
   var _useState5 = React.useState(rgbaArr[3] * 100),
       _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
@@ -60,7 +77,7 @@ var useColorPicker = function useColorPicker(_ref) {
     setAlphaValue("".concat(Math.round(rgbaArr[3] * 100)));
   }, [rgbaArr[3]]);
   React.useEffect(function () {
-    onChange === null || onChange === void 0 || onChange(utilities.getAllColorTypes(color));
+    onChange === null || onChange === void 0 || onChange(color_picker_utils.ColorPickerUtils.getAllColorTypes(color));
   }, [color]);
 
   var handleCancel = function handleCancel() {
@@ -70,7 +87,7 @@ var useColorPicker = function useColorPicker(_ref) {
 
   var handleSave = function handleSave() {
     setChoosenColor(color);
-    onSave === null || onSave === void 0 || onSave(utilities.getAllColorTypes(color));
+    onSave === null || onSave === void 0 || onSave(color_picker_utils.ColorPickerUtils.getAllColorTypes(color));
   };
 
   var handlePickSwatch = function handlePickSwatch(color) {

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

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