@dreamcommerce/aurora 2.19.0-30 → 2.19.1-2

package/build/cjs/packages/aurora/src/translations/pl.json.js

@@ -31,6 +31,49 @@ var Remove = "Usuń";
 var Search = "Szukaj";
 var save = "zapisz";
 var Edit = "Edytuj";
+var primaryColor = "Kolor główny";
+var secondaryColor = "Kolor akcentowy";
+var neutralColor = "Kolor neutralny";
+var globalFontColor = "Kolor tekstu";
+var globalBodyBackgroundColor = "Kolor tła strony";
+var primaryColors10 = "Kolor główny 10";
+var primaryColors20 = "Kolor główny 20";
+var primaryColors50 = "Kolor główny 50";
+var primaryColors100 = "Kolor główny 100";
+var primaryColors200 = "Kolor główny 200";
+var primaryColors300 = "Kolor główny 300";
+var primaryColors400 = "Kolor główny 400";
+var primaryColors500 = "Kolor główny 500";
+var primaryColors600 = "Kolor główny 600";
+var primaryColors700 = "Kolor główny 700";
+var primaryColors800 = "Kolor główny 800";
+var primaryColors900 = "Kolor główny 900";
+var secondaryColors10 = "Kolor akcentowy 10";
+var secondaryColors20 = "Kolor akcentowy 20";
+var secondaryColors50 = "Kolor akcentowy 50";
+var secondaryColors100 = "Kolor akcentowy 100";
+var secondaryColors200 = "Kolor akcentowy 200";
+var secondaryColors300 = "Kolor akcentowy 300";
+var secondaryColors400 = "Kolor akcentowy 400";
+var secondaryColors500 = "Kolor akcentowy 500";
+var secondaryColors600 = "Kolor akcentowy 600";
+var secondaryColors700 = "Kolor akcentowy 700";
+var secondaryColors800 = "Kolor akcentowy 800";
+var secondaryColors900 = "Kolor akcentowy 900";
+var neutralColors0 = "Kolor neutralny 0";
+var neutralColors10 = "Kolor neutralny 10";
+var neutralColors20 = "Kolor neutralny 20";
+var neutralColors50 = "Kolor neutralny 50";
+var neutralColors100 = "Kolor neutralny 100";
+var neutralColors200 = "Kolor neutralny 200";
+var neutralColors300 = "Kolor neutralny 300";
+var neutralColors400 = "Kolor neutralny 400";
+var neutralColors500 = "Kolor neutralny 500";
+var neutralColors600 = "Kolor neutralny 600";
+var neutralColors700 = "Kolor neutralny 700";
+var neutralColors800 = "Kolor neutralny 800";
+var neutralColors900 = "Kolor neutralny 900";
+var neutralColors1000 = "Kolor neutralny 1000";
 var pl = {
 	date: date,
 	cancel: cancel,
@@ -91,7 +134,50 @@ var pl = {
 	"Select color": "Wybierz kolor",
 	Edit: Edit,
 	"Edit image": "Edytuj obrazek",
-	"Transfering file...": "Wgrywanie pliku..."
+	"Theme colors": "Kolory szablonu",
+	primaryColor: primaryColor,
+	secondaryColor: secondaryColor,
+	neutralColor: neutralColor,
+	globalFontColor: globalFontColor,
+	globalBodyBackgroundColor: globalBodyBackgroundColor,
+	primaryColors10: primaryColors10,
+	primaryColors20: primaryColors20,
+	primaryColors50: primaryColors50,
+	primaryColors100: primaryColors100,
+	primaryColors200: primaryColors200,
+	primaryColors300: primaryColors300,
+	primaryColors400: primaryColors400,
+	primaryColors500: primaryColors500,
+	primaryColors600: primaryColors600,
+	primaryColors700: primaryColors700,
+	primaryColors800: primaryColors800,
+	primaryColors900: primaryColors900,
+	secondaryColors10: secondaryColors10,
+	secondaryColors20: secondaryColors20,
+	secondaryColors50: secondaryColors50,
+	secondaryColors100: secondaryColors100,
+	secondaryColors200: secondaryColors200,
+	secondaryColors300: secondaryColors300,
+	secondaryColors400: secondaryColors400,
+	secondaryColors500: secondaryColors500,
+	secondaryColors600: secondaryColors600,
+	secondaryColors700: secondaryColors700,
+	secondaryColors800: secondaryColors800,
+	secondaryColors900: secondaryColors900,
+	neutralColors0: neutralColors0,
+	neutralColors10: neutralColors10,
+	neutralColors20: neutralColors20,
+	neutralColors50: neutralColors50,
+	neutralColors100: neutralColors100,
+	neutralColors200: neutralColors200,
+	neutralColors300: neutralColors300,
+	neutralColors400: neutralColors400,
+	neutralColors500: neutralColors500,
+	neutralColors600: neutralColors600,
+	neutralColors700: neutralColors700,
+	neutralColors800: neutralColors800,
+	neutralColors900: neutralColors900,
+	neutralColors1000: neutralColors1000
 };
 
 exports.Add = Add;
@@ -109,16 +195,59 @@ exports.december = december;
 exports.default = pl;
 exports.february = february;
 exports.friday = friday;
+exports.globalBodyBackgroundColor = globalBodyBackgroundColor;
+exports.globalFontColor = globalFontColor;
 exports.january = january;
 exports.july = july;
 exports.june = june;
 exports.march = march;
 exports.may = may;
 exports.monday = monday;
+exports.neutralColor = neutralColor;
+exports.neutralColors0 = neutralColors0;
+exports.neutralColors10 = neutralColors10;
+exports.neutralColors100 = neutralColors100;
+exports.neutralColors1000 = neutralColors1000;
+exports.neutralColors20 = neutralColors20;
+exports.neutralColors200 = neutralColors200;
+exports.neutralColors300 = neutralColors300;
+exports.neutralColors400 = neutralColors400;
+exports.neutralColors50 = neutralColors50;
+exports.neutralColors500 = neutralColors500;
+exports.neutralColors600 = neutralColors600;
+exports.neutralColors700 = neutralColors700;
+exports.neutralColors800 = neutralColors800;
+exports.neutralColors900 = neutralColors900;
 exports.november = november;
 exports.october = october;
+exports.primaryColor = primaryColor;
+exports.primaryColors10 = primaryColors10;
+exports.primaryColors100 = primaryColors100;
+exports.primaryColors20 = primaryColors20;
+exports.primaryColors200 = primaryColors200;
+exports.primaryColors300 = primaryColors300;
+exports.primaryColors400 = primaryColors400;
+exports.primaryColors50 = primaryColors50;
+exports.primaryColors500 = primaryColors500;
+exports.primaryColors600 = primaryColors600;
+exports.primaryColors700 = primaryColors700;
+exports.primaryColors800 = primaryColors800;
+exports.primaryColors900 = primaryColors900;
 exports.saturday = saturday;
 exports.save = save;
+exports.secondaryColor = secondaryColor;
+exports.secondaryColors10 = secondaryColors10;
+exports.secondaryColors100 = secondaryColors100;
+exports.secondaryColors20 = secondaryColors20;
+exports.secondaryColors200 = secondaryColors200;
+exports.secondaryColors300 = secondaryColors300;
+exports.secondaryColors400 = secondaryColors400;
+exports.secondaryColors50 = secondaryColors50;
+exports.secondaryColors500 = secondaryColors500;
+exports.secondaryColors600 = secondaryColors600;
+exports.secondaryColors700 = secondaryColors700;
+exports.secondaryColors800 = secondaryColors800;
+exports.secondaryColors900 = secondaryColors900;
 exports.september = september;
 exports.sunday = sunday;
 exports.thursday = thursday;

package/build/cjs/packages/aurora/src/translations/pl.json.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/star_core/build/esm/packages/star_core/src/classes/axios_http_client/axios_http_client.js

@@ -39,11 +39,6 @@ var AxiosClient = /*#__PURE__*/function () {
         cancelRequest: cancelRequest
       };
     }
-  }, {
-    key: "isCancelError",
-    value: function isCancelError(error) {
-      return index['default'].isCancel(error);
-    }
   }]);
 }();
 

package/build/cjs/packages/star_core/build/esm/packages/star_core/src/classes/axios_http_client/axios_http_client.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;"}
+{"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;"}

package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.d.ts

@@ -1 +1,3 @@
-export declare const IconListArrowDown: () => JSX.Element;
+import { IIconProps } from './types';
+import React from 'react';
+export declare const IconListArrowDown: React.FC<IIconProps>;

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

@@ -1,12 +1,16 @@
 import React from 'react';
+import cssClasses from '../css/icons/main.module.less.js';
 
-var IconListArrowDown = function IconListArrowDown() {
+var IconListArrowDown = function IconListArrowDown(_ref) {
+  var className = _ref.className,
+      size = _ref.size;
   return /*#__PURE__*/React.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(cssClasses["icon_".concat(size)])
   }, /*#__PURE__*/React.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/esm/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;"}
+{"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;"}

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

@@ -0,0 +1,15 @@
+import { ColorPickerColors, ColorPickerVariable, IColorPickerColor } from './types';
+import tinycolor from 'tinycolor2';
+export declare class ColorPickerUtils {
+    static getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
+    static getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
+    static getHexValue: (colorSet: tinycolor.Instance) => string;
+    static getHexValueString: (colorSet: tinycolor.Instance) => string;
+    static isHexChar: (value: string) => boolean;
+    static getAllColorTypes: (color: ColorPickerVariable) => IColorPickerColor;
+    static getVariableShades: ({ color, name }: {
+        color: ColorPickerColors;
+        name: string;
+    }) => ColorPickerVariable[];
+    private static convertVariableShadesToHex;
+}

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

@@ -0,0 +1,159 @@
+import { createClass as _createClass, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, classCallCheck as _classCallCheck } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
+
+var _ColorPickerUtils;
+var ColorPickerUtils = /*#__PURE__*/_createClass(function ColorPickerUtils() {
+  _classCallCheck(this, ColorPickerUtils);
+});
+_ColorPickerUtils = ColorPickerUtils;
+
+_defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
+  return tinycolor(color);
+});
+
+_defineProperty(ColorPickerUtils, "getRgbaValue", function (colorSet) {
+  return colorSet.toRgb();
+});
+
+_defineProperty(ColorPickerUtils, "getHexValue", function (colorSet) {
+  var alphaValue = colorSet.getAlpha();
+  return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
+});
+
+_defineProperty(ColorPickerUtils, "getHexValueString", function (colorSet) {
+  return "#".concat(_ColorPickerUtils.getHexValue(colorSet));
+});
+
+_defineProperty(ColorPickerUtils, "isHexChar", function (value) {
+  var hexRegEx = /^$|[0-9a-fA-F]+$/;
+  return hexRegEx.test(value);
+});
+
+_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 _objectSpread2(_objectSpread2({}, allColorTypes), variableName && variableName);
+});
+
+_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(_toConsumableArray(isNeutral ? blackShade : []), shades, _toConsumableArray(isNeutral ? whiteShade : []));
+  return _ColorPickerUtils.convertVariableShadesToHex(result);
+});
+
+_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
+    };
+  });
+});
+
+export { ColorPickerUtils };
+//# sourceMappingURL=color_picker_utils.js.map

package/build/esm/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,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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-label-input.js

@@ -1,4 +1,6 @@
 import React, { useContext } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import Input from '../../controls/components/input.js';
 import { ColorPickerNewContext } from '../context.js';
 
@@ -7,13 +9,18 @@ var ColorLabelInput = function ColorLabelInput(_ref) {
       name = _ref.name;
 
   var _useContext = useContext(ColorPickerNewContext),
-      hex = _useContext.hex;
+      hex = _useContext.hex,
+      color = _useContext.color;
+
+  var _useTranslation = useTranslation(),
+      _useTranslation2 = _slicedToArray(_useTranslation, 1),
+      t = _useTranslation2[0];
 
   return /*#__PURE__*/React.createElement(Input, {
     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/esm/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;"}
+{"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;"}

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

@@ -5,7 +5,7 @@ import Button from '../../button/index.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
 import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerFooter } from '../css_classes.js';
-import { getAllColorTypes } from '../utilities.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 
 var ColorPickerFooter = function ColorPickerFooter() {
@@ -28,7 +28,7 @@ var ColorPickerFooter = function ColorPickerFooter() {
 
   var handleSaveButton = function handleSaveButton() {
     closeDropdown === null || closeDropdown === void 0 || closeDropdown();
-    handleSave(getAllColorTypes(color));
+    handleSave(ColorPickerUtils.getAllColorTypes(color));
   };
 
   return /*#__PURE__*/React.createElement("div", {

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

@@ -2,7 +2,7 @@ import React, { useContext, useState, useEffect } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import Input from '../../../controls/components/input.js';
 import { ColorPickerNewContext } from '../../context.js';
-import { isHexChar } from '../../utilities.js';
+import { ColorPickerUtils } from '../../color_picker_utils.js';
 import { InputUtils } from '@dreamcommerce/utilities';
 
 var ColorPickerInputsHex = function ColorPickerInputsHex() {
@@ -25,7 +25,7 @@ var ColorPickerInputsHex = function ColorPickerInputsHex() {
   var handleOnChange = function handleOnChange(event) {
     var inputValue = event.target.value.replace('%', '');
 
-    if (isHexChar(inputValue)) {
+    if (ColorPickerUtils.isHexChar(inputValue)) {
       setValue(inputValue);
       setColor(inputValue);
     }

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-shades.d.ts

@@ -0,0 +1 @@
+export declare const ColorPickerShades: () => JSX.Element;

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

@@ -3,11 +3,11 @@ import { useTranslation } from '../../../../../../external/react-i18next/dist/es
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { ColorPickerNewContext } from '../context.js';
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
-import { getTinyColorInstance, getHexValue } from '../utilities.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 import { ColorPickerSwatch } from './color-picker-swatch.js';
 
-var ColorPickerSwatches = function ColorPickerSwatches() {
+var ColorPickerShades = function ColorPickerShades() {
   var _useContext = useContext(ColorPickerNewContext),
       hslArr = _useContext.hslArr,
       handlePickSwatch = _useContext.handlePickSwatch;
@@ -72,8 +72,8 @@ var ColorPickerSwatches = function ColorPickerSwatches() {
   }, /*#__PURE__*/React.createElement("p", null, t('Shades of color'))), /*#__PURE__*/React.createElement("div", {
     className: styles[cssColorPickerSwatchesContent]
   }, shades.map(function (shade, index) {
-    var colorTiny = getTinyColorInstance(shade);
-    var colorHex = getHexValue(colorTiny);
+    var colorTiny = ColorPickerUtils.getTinyColorInstance(shade);
+    var colorHex = ColorPickerUtils.getHexValue(colorTiny);
 
     var handleOnClick = function handleOnClick() {
       handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
@@ -88,5 +88,5 @@ var ColorPickerSwatches = function ColorPickerSwatches() {
   })));
 };
 
-export { ColorPickerSwatches };
-//# sourceMappingURL=color-picker-swatches.js.map
+export { ColorPickerShades };
+//# sourceMappingURL=color-picker-shades.js.map

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

@@ -3,15 +3,15 @@ import { defineProperty as _defineProperty } from '../../../../../../_virtual/_r
 import classnames from 'classnames';
 import { COLOR_PICKER_SWATCH_SIZES } from '../constants.js';
 import { cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchSmall, cssColorPickerSwatchFill } from '../css_classes.js';
-import { getTinyColorInstance, getHexValueString } from '../utilities.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 
 var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
       size = _ref.size,
       onClick = _ref.onClick;
-  var colorTiny = getTinyColorInstance(color);
-  var colorHex = getHexValueString(colorTiny);
+  var colorTiny = ColorPickerUtils.getTinyColorInstance(color);
+  var colorHex = ColorPickerUtils.getHexValueString(colorTiny);
   var colorHolderClassNames = classnames(styles[cssColorPickerSwatch], _defineProperty(_defineProperty({}, styles[cssColorPickerSwatchSmall], size === COLOR_PICKER_SWATCH_SIZES.SMALL), styles[cssColorPickerSwatchBig], size === COLOR_PICKER_SWATCH_SIZES.BIG));
 
   var handleOnClick = function handleOnClick() {

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-variables.d.ts

@@ -0,0 +1,7 @@
+import { IColorPickerColorVariablesType } from '../types';
+import React from 'react';
+interface IColorPickerVariablesProps {
+    variables: IColorPickerColorVariablesType;
+}
+export declare const ColorPickerVariables: React.FC<IColorPickerVariablesProps>;
+export {};

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

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

package/build/esm/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,+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;"}