@dreamcommerce/aurora 2.17.21 → 2.17.22-1

package/build/cjs/external/uuid/dist/esm-browser/regex.js

@@ -0,0 +1,8 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var REGEX = /^(?:[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}|00000000-0000-0000-0000-000000000000)$/i;
+
+exports.default = REGEX;
+//# sourceMappingURL=regex.js.map

package/build/cjs/external/uuid/dist/esm-browser/regex.js.map

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

package/build/cjs/external/uuid/dist/esm-browser/rng.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+// Unique ID creation requires a high quality random # generator. In the browser we therefore
+// require the crypto API and do not support built-in fallback to lower quality random number
+// generators (like Math.random()).
+var getRandomValues;
+var rnds8 = new Uint8Array(16);
+function rng() {
+  // lazy load so that environments that need to polyfill have a chance to do so
+  if (!getRandomValues) {
+    // getRandomValues needs to be invoked in a context where "this" is a Crypto implementation. Also,
+    // find the complete implementation of crypto (msCrypto) on IE11.
+    getRandomValues = typeof crypto !== 'undefined' && crypto.getRandomValues && crypto.getRandomValues.bind(crypto) || typeof msCrypto !== 'undefined' && typeof msCrypto.getRandomValues === 'function' && msCrypto.getRandomValues.bind(msCrypto);
+
+    if (!getRandomValues) {
+      throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');
+    }
+  }
+
+  return getRandomValues(rnds8);
+}
+
+exports.default = rng;
+//# sourceMappingURL=rng.js.map

package/build/cjs/external/uuid/dist/esm-browser/rng.js.map

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

package/build/cjs/external/uuid/dist/esm-browser/stringify.js

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var validate = require('./validate.js');
+
+/**
+ * Convert array of 16 byte values to UUID string format of the form:
+ * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
+ */
+
+var byteToHex = [];
+
+for (var i = 0; i < 256; ++i) {
+  byteToHex.push((i + 0x100).toString(16).substr(1));
+}
+
+function stringify(arr) {
+  var offset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0; // Note: Be careful editing this code!  It's been tuned for performance
+  // and works in ways you may not expect. See https://github.com/uuidjs/uuid/pull/434
+
+  var uuid = (byteToHex[arr[offset + 0]] + byteToHex[arr[offset + 1]] + byteToHex[arr[offset + 2]] + byteToHex[arr[offset + 3]] + '-' + byteToHex[arr[offset + 4]] + byteToHex[arr[offset + 5]] + '-' + byteToHex[arr[offset + 6]] + byteToHex[arr[offset + 7]] + '-' + byteToHex[arr[offset + 8]] + byteToHex[arr[offset + 9]] + '-' + byteToHex[arr[offset + 10]] + byteToHex[arr[offset + 11]] + byteToHex[arr[offset + 12]] + byteToHex[arr[offset + 13]] + byteToHex[arr[offset + 14]] + byteToHex[arr[offset + 15]]).toLowerCase(); // Consistency check for valid UUID.  If this throws, it's likely due to one
+  // of the following:
+  // - One or more input array values don't map to a hex octet (leading to
+  // "undefined" in the uuid)
+  // - Invalid input values for the RFC `version` or `variant` fields
+
+  if (!validate['default'](uuid)) {
+    throw TypeError('Stringified UUID is invalid');
+  }
+
+  return uuid;
+}
+
+exports.default = stringify;
+//# sourceMappingURL=stringify.js.map

package/build/cjs/external/uuid/dist/esm-browser/stringify.js.map

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

package/build/cjs/external/uuid/dist/esm-browser/v4.js

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var rng = require('./rng.js');
+var stringify = require('./stringify.js');
+
+function v4(options, buf, offset) {
+  options = options || {};
+  var rnds = options.random || (options.rng || rng['default'])(); // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
+
+  rnds[6] = rnds[6] & 0x0f | 0x40;
+  rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
+
+  if (buf) {
+    offset = offset || 0;
+
+    for (var i = 0; i < 16; ++i) {
+      buf[offset + i] = rnds[i];
+    }
+
+    return buf;
+  }
+
+  return stringify['default'](rnds);
+}
+
+exports.default = v4;
+//# sourceMappingURL=v4.js.map

package/build/cjs/external/uuid/dist/esm-browser/v4.js.map

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

package/build/cjs/external/uuid/dist/esm-browser/validate.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var regex = require('./regex.js');
+
+function validate(uuid) {
+  return typeof uuid === 'string' && regex['default'].test(uuid);
+}
+
+exports.default = validate;
+//# sourceMappingURL=validate.js.map

package/build/cjs/external/uuid/dist/esm-browser/validate.js.map

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

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/components/{color-picker-swatches.js → color-picker-shades.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;
@@ -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-variables.js

@@ -0,0 +1,92 @@
+'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 utilities = require('../utilities.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 primaryShades = utilities.getVariableShades({
+    color: variables.primary
+  });
+  var secondaryShades = utilities.getVariableShades({
+    color: variables.secondary
+  });
+  var neutralShades = utilities.getVariableShades({
+    color: variables.neutral,
+    isNeutral: true
+  });
+  var allShades = [].concat(_rollupPluginBabelHelpers.toConsumableArray(primaryShades), _rollupPluginBabelHelpers.toConsumableArray(secondaryShades), _rollupPluginBabelHelpers.toConsumableArray(neutralShades));
+  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 = utilities.getTinyColorInstance(variable);
+    var colorHex = utilities.getHexValue(colorTiny);
+
+    var handleOnClick = function handleOnClick() {
+      handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
+    };
+
+    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 colorTiny = utilities.getTinyColorInstance(variable);
+    var colorHex = utilities.getHexValue(colorTiny);
+
+    var handleOnClick = function handleOnClick() {
+      handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
+    };
+
+    return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
+      size: "small",
+      onClick: handleOnClick,
+      key: "".concat(variable, "-").concat(index),
+      color: colorHex
+    });
+  })));
+};
+
+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;"}

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

@@ -7,14 +7,15 @@ var context = require('../context.js');
 var constants = require('../constants.js');
 var css_classes = require('../css_classes.js');
 var colorLabelInput = require('./color-label-input.js');
-var index$1 = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
+var index = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/components/index.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 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 index = require('../../dropdown/index.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,7 +23,8 @@ 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,
@@ -30,7 +32,7 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
 
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPicker])
-  }, /*#__PURE__*/React__default['default'].createElement(index['default'], null, /*#__PURE__*/React__default['default'].createElement(index['default'].CustomLabel, null, /*#__PURE__*/React__default['default'].createElement("div", {
+  }, /*#__PURE__*/React__default['default'].createElement(dropdown['default'], null, /*#__PURE__*/React__default['default'].createElement(dropdown['default'].CustomLabel, null, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputContainer])
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "".concat(main_module['default'][css_classes.cssColorPickerInputColorSwatchContainer])
@@ -39,12 +41,13 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
   })), /*#__PURE__*/React__default['default'].createElement(colorLabelInput.ColorLabelInput, {
     id: id,
     name: name
-  }))), /*#__PURE__*/React__default['default'].createElement(index['default'].Content, {
+  }))), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Content, {
     shouldCloseOnClickOutside: false,
-    shouldCloseOnScroll: false
+    shouldCloseOnScroll: false,
+    shouldCloseOthersOnOpen: true
   }, /*#__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$1.ColorPicker, {
+  }, /*#__PURE__*/React__default['default'].createElement(index.ColorPicker, {
     value: color,
     onChange: setColor,
     width: constants.COLOR_PICKER_WIDTH,
@@ -56,7 +59,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.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,sBAAsB,0FAA8F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

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/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/index.js

@@ -15,6 +15,7 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
   var id = _ref.id,
       name = _ref.name,
       initialColor = _ref.initialColor,
+      colorVariables = _ref.colorVariables,
       onChange = _ref.onChange,
       onCancel = _ref.onCancel,
       onSave = _ref.onSave;
@@ -60,7 +61,8 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
     value: value
   }, /*#__PURE__*/React__default['default'].createElement(pureColorPicker['default'], {
     id: id,
-    name: name
+    name: name,
+    colorVariables: colorVariables
   }));
 };
 

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

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

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

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
 
 var getTinyColorInstance = function getTinyColorInstance(color) {
@@ -37,11 +38,79 @@ var getAllColorTypes = function getAllColorTypes(color) {
     hexString: hexString
   };
 };
+var getVariableShades = function getVariableShades(_ref) {
+  var color = _ref.color,
+      _ref$isNeutral = _ref.isNeutral,
+      isNeutral = _ref$isNeutral === void 0 ? false : _ref$isNeutral;
+  var colorTiny = getTinyColorInstance(color);
+  var colorHsl = colorTiny.toHsl();
+  var blackShade = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 100
+  }];
+  var whiteShade = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 0
+  }];
+  var shades = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 99
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 98
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 95
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 90
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 80
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 70
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 60
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 50
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 40
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 30
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 20
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 10
+  }];
+  return [].concat(_rollupPluginBabelHelpers.toConsumableArray(isNeutral ? blackShade : []), shades, _rollupPluginBabelHelpers.toConsumableArray(isNeutral ? whiteShade : []));
+};
 
 exports.getAllColorTypes = getAllColorTypes;
 exports.getHexValue = getHexValue;
 exports.getHexValueString = getHexValueString;
 exports.getRgbaValue = getRgbaValue;
 exports.getTinyColorInstance = getTinyColorInstance;
+exports.getVariableShades = getVariableShades;
 exports.isHexChar = isHexChar;
 //# sourceMappingURL=utilities.js.map

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

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

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

@@ -6,10 +6,10 @@ var React = require('react');
 var context = require('../../../color_picker/context.js');
 var use_color_picker = require('../../../color_picker/use_color_picker.js');
 var with_translation = require('../../../../utilities/translation/with_translation.js');
-var index$4 = require('../../../color_picker/index.js');
-var index$2 = require('../../index.js');
-var index$3 = require('../../../hint/index.js');
-var index$1 = require('../../../dropdown/index.js');
+var index$3 = require('../../../color_picker/index.js');
+var index$1 = require('../../index.js');
+var index$2 = require('../../../hint/index.js');
+var dropdown = require('../../../dropdown/components/dropdown.js');
 var label = require('../../../color_picker/components/label.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -46,23 +46,23 @@ var ControlColorPicker = function ControlColorPicker(_ref) {
   });
   return /*#__PURE__*/React__default['default'].createElement(context.ColorPickerContext.Provider, {
     value: colorPickerContext
-  }, /*#__PURE__*/React__default['default'].createElement(index$1['default'], null, /*#__PURE__*/React__default['default'].createElement(index$1['default'].CustomLabel, null, /*#__PURE__*/React__default['default'].createElement(index$2['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(dropdown['default'], null, /*#__PURE__*/React__default['default'].createElement(dropdown['default'].CustomLabel, null, /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
     errors: errors,
     name: name,
     id: id
-  }, (label$1 || hint) && /*#__PURE__*/React__default['default'].createElement(index$2['default'].Label, {
+  }, (label$1 || hint) && /*#__PURE__*/React__default['default'].createElement(index$1['default'].Label, {
     id: id,
     isRequired: isRequired,
     additionalInfo: labelAdditionalInfo
-  }, label$1, hint && /*#__PURE__*/React__default['default'].createElement(index$3['default'], {
+  }, label$1, hint && /*#__PURE__*/React__default['default'].createElement(index$2['default'], {
     hint: hint,
     spacingLeft: true
-  })), /*#__PURE__*/React__default['default'].createElement(index$2['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(index$2['default'].Element, null, /*#__PURE__*/React__default['default'].createElement(label['default'], {
+  })), /*#__PURE__*/React__default['default'].createElement(index$1['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(index$1['default'].Element, null, /*#__PURE__*/React__default['default'].createElement(label['default'], {
     name: name || '',
     isRequired: isRequired,
     id: id,
     label: label$1
-  }))), /*#__PURE__*/React__default['default'].createElement(index$2['default'].Errors, null))), /*#__PURE__*/React__default['default'].createElement(index$1['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(index$4.PureColorPicker, {
+  }))), /*#__PURE__*/React__default['default'].createElement(index$1['default'].Errors, null))), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(index$3.PureColorPicker, {
     hideChooseCancelButtons: hideChooseCancelButtons
   }))));
 };

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

@@ -20,6 +20,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
       errors = _ref.errors,
       labelAdditionalInfo = _ref.labelAdditionalInfo,
       initialColor = _ref.initialColor,
+      colorVariables = _ref.colorVariables,
       onChange = _ref.onChange,
       onCancel = _ref.onCancel,
       onSave = _ref.onSave;
@@ -38,6 +39,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
     id: id,
     name: name,
     initialColor: initialColor,
+    colorVariables: colorVariables,
     onChange: onChange,
     onCancel: onCancel,
     onSave: onSave

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

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var with_translation = require('../../../../utilities/translation/with_translation.js');
-var index$2 = require('../../index.js');
-var index$3 = require('../../../hint/index.js');
-var index$1 = require('../../../dropdown/index.js');
+var index$1 = require('../../index.js');
+var index$2 = require('../../../hint/index.js');
+var dropdown = require('../../../dropdown/components/dropdown.js');
 var use_value_controller = require('../../../date_picker/hooks/use_value_controller.js');
 var value_controller_context = require('../../../date_picker/context/value_controller_context.js');
 var range_picker = require('../../../date_picker/hoc/range_picker.js');
@@ -75,21 +75,21 @@ var ControlDatepicker = function ControlDatepicker(_ref) {
   var DatePickerComponent = DatepickerViews[type];
   return /*#__PURE__*/React__default['default'].createElement(value_controller_context['default'].Provider, {
     value: valueController
-  }, /*#__PURE__*/React__default['default'].createElement(index$1['default'].CustomLabel, null, /*#__PURE__*/React__default['default'].createElement(index$2['default'], {
+  }, /*#__PURE__*/React__default['default'].createElement(dropdown['default'].CustomLabel, null, /*#__PURE__*/React__default['default'].createElement(index$1['default'], {
     errors: errors,
     name: name,
     id: id
-  }, (label$1 || hint) && /*#__PURE__*/React__default['default'].createElement(index$2['default'].Label, {
+  }, (label$1 || hint) && /*#__PURE__*/React__default['default'].createElement(index$1['default'].Label, {
     id: id,
     isRequired: isRequired,
     additionalInfo: labelAdditionalInfo
-  }, label$1, hint && /*#__PURE__*/React__default['default'].createElement(index$3['default'], {
+  }, label$1, hint && /*#__PURE__*/React__default['default'].createElement(index$2['default'], {
     hint: hint,
     spacingLeft: true
-  })), /*#__PURE__*/React__default['default'].createElement(index$2['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(index$2['default'].Element, null, /*#__PURE__*/React__default['default'].createElement(label['default'], {
+  })), /*#__PURE__*/React__default['default'].createElement(index$1['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(index$1['default'].Element, null, /*#__PURE__*/React__default['default'].createElement(label['default'], {
     name: name,
     id: id
-  }))), /*#__PURE__*/React__default['default'].createElement(index$2['default'].Errors, null))), /*#__PURE__*/React__default['default'].createElement(index$1['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(DatePickerComponent, {
+  }))), /*#__PURE__*/React__default['default'].createElement(index$1['default'].Errors, null))), /*#__PURE__*/React__default['default'].createElement(dropdown['default'].Content, null, /*#__PURE__*/React__default['default'].createElement(DatePickerComponent, {
     className: className,
     showButtons: showButtons,
     showDefaultRanges: showDefaultRanges
@@ -97,7 +97,7 @@ var ControlDatepicker = function ControlDatepicker(_ref) {
 };
 
 var DatePickerWithDropdown = function DatePickerWithDropdown(props) {
-  return /*#__PURE__*/React__default['default'].createElement(index$1['default'], null, /*#__PURE__*/React__default['default'].createElement(ControlDatepicker, _rollupPluginBabelHelpers.objectSpread2({}, props)));
+  return /*#__PURE__*/React__default['default'].createElement(dropdown['default'], null, /*#__PURE__*/React__default['default'].createElement(ControlDatepicker, _rollupPluginBabelHelpers.objectSpread2({}, props)));
 };
 
 var index = with_translation['default'](DatePickerWithDropdown);