@dreamcommerce/aurora 2.17.21-3 → 2.17.22-1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (60) hide show
  1. package/build/cjs/packages/aurora/src/assets/icon_list_arrow_down.js +6 -2
  2. package/build/cjs/packages/aurora/src/assets/icon_list_arrow_down.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js → color-picker-shades.js} +3 -3
  4. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js +92 -0
  5. package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js.map +1 -0
  6. package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js +7 -3
  7. package/build/cjs/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map +1 -1
  8. package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js +1 -1
  9. package/build/cjs/packages/aurora/src/components/color_picker_new/css_classes.js +6 -0
  10. package/build/cjs/packages/aurora/src/components/color_picker_new/css_classes.js.map +1 -1
  11. package/build/cjs/packages/aurora/src/components/color_picker_new/index.js +3 -1
  12. package/build/cjs/packages/aurora/src/components/color_picker_new/index.js.map +1 -1
  13. package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js +69 -0
  14. package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
  15. package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js +2 -0
  16. package/build/cjs/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js.map +1 -1
  17. package/build/cjs/packages/aurora/src/components/tree/components/tree_node.js +1 -1
  18. package/build/cjs/packages/aurora/src/css/color_picker_new/main.module.less.js +4 -1
  19. package/build/cjs/packages/aurora/src/css/color_picker_new/main.module.less.js.map +1 -1
  20. package/build/cjs/packages/aurora/src/translations/en.json.js +2 -1
  21. package/build/cjs/packages/aurora/src/translations/en.json.js.map +1 -1
  22. package/build/cjs/packages/aurora/src/translations/pl.json.js +2 -1
  23. package/build/cjs/packages/aurora/src/translations/pl.json.js.map +1 -1
  24. package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.d.ts +3 -1
  25. package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.js +6 -2
  26. package/build/esm/packages/aurora/src/assets/icon_list_arrow_down.js.map +1 -1
  27. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-shades.d.ts +1 -0
  28. package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js → color-picker-shades.js} +3 -3
  29. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-variables.d.ts +7 -0
  30. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js +84 -0
  31. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-variables.js.map +1 -0
  32. package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js +7 -3
  33. package/build/esm/packages/aurora/src/components/color_picker_new/components/pure-color-picker.js.map +1 -1
  34. package/build/esm/packages/aurora/src/components/color_picker_new/constants.d.ts +1 -1
  35. package/build/esm/packages/aurora/src/components/color_picker_new/constants.js +1 -1
  36. package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.d.ts +3 -0
  37. package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.js +4 -1
  38. package/build/esm/packages/aurora/src/components/color_picker_new/css_classes.js.map +1 -1
  39. package/build/esm/packages/aurora/src/components/color_picker_new/index.d.ts +1 -1
  40. package/build/esm/packages/aurora/src/components/color_picker_new/index.js +3 -1
  41. package/build/esm/packages/aurora/src/components/color_picker_new/index.js.map +1 -1
  42. package/build/esm/packages/aurora/src/components/color_picker_new/types.d.ts +13 -0
  43. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts +8 -0
  44. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js +69 -1
  45. package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js.map +1 -1
  46. package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js +2 -0
  47. package/build/esm/packages/aurora/src/components/controls/hoc/control_color_picker_new/index.js.map +1 -1
  48. package/build/esm/packages/aurora/src/components/tree/components/tree_node.js +1 -1
  49. package/build/esm/packages/aurora/src/css/color_picker_new/main.module.less.js +4 -1
  50. package/build/esm/packages/aurora/src/css/color_picker_new/main.module.less.js.map +1 -1
  51. package/build/esm/packages/aurora/src/translations/en.json +2 -1
  52. package/build/esm/packages/aurora/src/translations/en.json.js +2 -1
  53. package/build/esm/packages/aurora/src/translations/en.json.js.map +1 -1
  54. package/build/esm/packages/aurora/src/translations/pl.json +2 -1
  55. package/build/esm/packages/aurora/src/translations/pl.json.js +2 -1
  56. package/build/esm/packages/aurora/src/translations/pl.json.js.map +1 -1
  57. package/package.json +1 -1
  58. package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.d.ts +0 -1
  59. /package/build/cjs/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js.map → color-picker-shades.js.map} +0 -0
  60. /package/build/esm/packages/aurora/src/components/color_picker_new/components/{color-picker-swatches.js.map → color-picker-shades.js.map} +0 -0
@@ -3,18 +3,22 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var React = require('react');
6
+ var main_module = require('../css/icons/main.module.less.js');
6
7
 
7
8
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
8
9
 
9
10
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
10
11
 
11
- var IconListArrowDown = function IconListArrowDown() {
12
+ var IconListArrowDown = function IconListArrowDown(_ref) {
13
+ var className = _ref.className,
14
+ size = _ref.size;
12
15
  return /*#__PURE__*/React__default['default'].createElement("svg", {
13
16
  width: "6",
14
17
  height: "4",
15
18
  viewBox: "0 0 6 4",
16
19
  fill: "none",
17
- xmlns: "http://www.w3.org/2000/svg"
20
+ xmlns: "http://www.w3.org/2000/svg",
21
+ className: "".concat(className || '', " ").concat(main_module['default']["icon_".concat(size)])
18
22
  }, /*#__PURE__*/React__default['default'].createElement("path", {
19
23
  id: "Polygon 1",
20
24
  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",
@@ -1 +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;"}
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;"}
@@ -15,7 +15,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
15
15
 
16
16
  var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
17
17
 
18
- var ColorPickerSwatches = function ColorPickerSwatches() {
18
+ var ColorPickerShades = function ColorPickerShades() {
19
19
  var _useContext = React.useContext(context.ColorPickerNewContext),
20
20
  hslArr = _useContext.hslArr,
21
21
  handlePickSwatch = _useContext.handlePickSwatch;
@@ -96,5 +96,5 @@ var ColorPickerSwatches = function ColorPickerSwatches() {
96
96
  })));
97
97
  };
98
98
 
99
- exports.ColorPickerSwatches = ColorPickerSwatches;
100
- //# sourceMappingURL=color-picker-swatches.js.map
99
+ exports.ColorPickerShades = ColorPickerShades;
100
+ //# sourceMappingURL=color-picker-shades.js.map
@@ -0,0 +1,92 @@
1
+ 'use strict';
2
+
3
+ Object.defineProperty(exports, '__esModule', { value: true });
4
+
5
+ var React = require('react');
6
+ var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
7
+ var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
8
+ var context = require('../context.js');
9
+ var css_classes = require('../css_classes.js');
10
+ var utilities = require('../utilities.js');
11
+ var main_module = require('../../../css/color_picker_new/main.module.less.js');
12
+ var colorPickerSwatch = require('./color-picker-swatch.js');
13
+ var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
14
+
15
+ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
16
+
17
+ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
18
+
19
+ var ColorPickerVariables = function ColorPickerVariables(_ref) {
20
+ var variables = _ref.variables;
21
+
22
+ var _useContext = React.useContext(context.ColorPickerNewContext),
23
+ handlePickSwatch = _useContext.handlePickSwatch;
24
+
25
+ var _useTranslation = useTranslation.useTranslation(),
26
+ _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
27
+ t = _useTranslation2[0];
28
+
29
+ var _useState = React.useState(false),
30
+ _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
31
+ isOpen = _useState2[0],
32
+ setIsOpen = _useState2[1];
33
+
34
+ var primaryShades = utilities.getVariableShades({
35
+ color: variables.primary
36
+ });
37
+ var secondaryShades = utilities.getVariableShades({
38
+ color: variables.secondary
39
+ });
40
+ var neutralShades = utilities.getVariableShades({
41
+ color: variables.neutral,
42
+ isNeutral: true
43
+ });
44
+ var allShades = [].concat(_rollupPluginBabelHelpers.toConsumableArray(primaryShades), _rollupPluginBabelHelpers.toConsumableArray(secondaryShades), _rollupPluginBabelHelpers.toConsumableArray(neutralShades));
45
+ return /*#__PURE__*/React__default['default'].createElement("div", {
46
+ className: main_module['default'][css_classes.cssColorPickerSwatches]
47
+ }, /*#__PURE__*/React__default['default'].createElement("div", {
48
+ className: main_module['default'][css_classes.cssColorPickerSwatchesHeader]
49
+ }, /*#__PURE__*/React__default['default'].createElement("p", null, t('Theme colors')), /*#__PURE__*/React__default['default'].createElement("div", {
50
+ className: main_module['default'][css_classes.cssColorPickerSwatchesHeaderIcon],
51
+ onClick: function onClick() {
52
+ return setIsOpen(!isOpen);
53
+ }
54
+ }, /*#__PURE__*/React__default['default'].createElement(icon_list_arrow_down.IconListArrowDown, {
55
+ className: "".concat(!isOpen ? main_module['default'][css_classes.cssColorPickerSwatchesHeaderIconRotate] : '')
56
+ }))), /*#__PURE__*/React__default['default'].createElement("div", {
57
+ className: main_module['default'][css_classes.cssColorPickerSwatchesContent]
58
+ }, Object.values(variables).map(function (variable, index) {
59
+ var colorTiny = utilities.getTinyColorInstance(variable);
60
+ var colorHex = utilities.getHexValue(colorTiny);
61
+
62
+ var handleOnClick = function handleOnClick() {
63
+ handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
64
+ };
65
+
66
+ return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
67
+ size: "small",
68
+ onClick: handleOnClick,
69
+ key: "".concat(variable, "-").concat(index),
70
+ color: colorHex
71
+ });
72
+ })), isOpen && /*#__PURE__*/React__default['default'].createElement("div", {
73
+ className: main_module['default'][css_classes.cssColorPickerSwatchesSubContent]
74
+ }, allShades.map(function (variable, index) {
75
+ var colorTiny = utilities.getTinyColorInstance(variable);
76
+ var colorHex = utilities.getHexValue(colorTiny);
77
+
78
+ var handleOnClick = function handleOnClick() {
79
+ handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
80
+ };
81
+
82
+ return /*#__PURE__*/React__default['default'].createElement(colorPickerSwatch.ColorPickerSwatch, {
83
+ size: "small",
84
+ onClick: handleOnClick,
85
+ key: "".concat(variable, "-").concat(index),
86
+ color: colorHex
87
+ });
88
+ })));
89
+ };
90
+
91
+ exports.ColorPickerVariables = ColorPickerVariables;
92
+ //# sourceMappingURL=color-picker-variables.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -13,7 +13,8 @@ var colorPickerFooter = require('./color-picker-footer.js');
13
13
  var colorPickerHeader = require('./color-picker-header.js');
14
14
  var colorPickerInputs = require('./color-picker-inputs/color-picker-inputs.js');
15
15
  var colorPickerSwatch = require('./color-picker-swatch.js');
16
- var colorPickerSwatches = require('./color-picker-swatches.js');
16
+ var colorPickerShades = require('./color-picker-shades.js');
17
+ var colorPickerVariables = require('./color-picker-variables.js');
17
18
  var dropdown = require('../../dropdown/components/dropdown.js');
18
19
 
19
20
  function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -22,7 +23,8 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
22
23
 
23
24
  var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
24
25
  var id = _ref.id,
25
- name = _ref.name;
26
+ name = _ref.name,
27
+ colorVariables = _ref.colorVariables;
26
28
 
27
29
  var _useContext = React.useContext(context.ColorPickerNewContext),
28
30
  color = _useContext.color,
@@ -57,7 +59,9 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
57
59
  hideInputs: true,
58
60
  hidePresets: true,
59
61
  className: "".concat(main_module['default'][css_classes.cssColorPickerRbgcp])
60
- }), /*#__PURE__*/React__default['default'].createElement(colorPickerInputs.ColorPickerInputs, null), /*#__PURE__*/React__default['default'].createElement(colorPickerSwatches.ColorPickerSwatches, null)), /*#__PURE__*/React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null))));
62
+ }), /*#__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, {
63
+ variables: colorVariables.variables
64
+ })), /*#__PURE__*/React__default['default'].createElement(colorPickerFooter.ColorPickerFooter, null))));
61
65
  };
62
66
 
63
67
  exports.default = ColorPickerNewPure;
@@ -1 +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;"}
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;AACA;AACA;AACA;AACA;"}
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var COLOR_PICKER_INITIAL_STATE = '#000000';
6
- var COLOR_PICKER_WIDTH = 220;
6
+ var COLOR_PICKER_WIDTH = 247;
7
7
  var COLOR_PICKER_HEIGHT = 200;
8
8
  var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
9
9
  var COLOR_PICKER_TYPES = {
@@ -9,7 +9,10 @@ var cssColorPickerHeader = 'color-picker__header';
9
9
  var cssColorPickerCloseIcon = 'color-picker__close-icon';
10
10
  var cssColorPickerSwatches = 'color-picker__swatches';
11
11
  var cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
12
+ var cssColorPickerSwatchesHeaderIcon = 'color-picker__swatches-header-icon';
13
+ var cssColorPickerSwatchesHeaderIconRotate = 'color-picker__swatches-header-icon_rotate-180';
12
14
  var cssColorPickerSwatchesContent = 'color-picker__swatches-content';
15
+ var cssColorPickerSwatchesSubContent = 'color-picker__swatches-subcontent';
13
16
  var cssColorPickerSwatch = 'color-picker__swatch';
14
17
  var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
15
18
  var cssColorPickerSwatchBig = 'color-picker__swatch_big';
@@ -41,4 +44,7 @@ exports.cssColorPickerSwatchSmall = cssColorPickerSwatchSmall;
41
44
  exports.cssColorPickerSwatches = cssColorPickerSwatches;
42
45
  exports.cssColorPickerSwatchesContent = cssColorPickerSwatchesContent;
43
46
  exports.cssColorPickerSwatchesHeader = cssColorPickerSwatchesHeader;
47
+ exports.cssColorPickerSwatchesHeaderIcon = cssColorPickerSwatchesHeaderIcon;
48
+ exports.cssColorPickerSwatchesHeaderIconRotate = cssColorPickerSwatchesHeaderIconRotate;
49
+ exports.cssColorPickerSwatchesSubContent = cssColorPickerSwatchesSubContent;
44
50
  //# sourceMappingURL=css_classes.js.map
@@ -1 +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;"}
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;"}
@@ -15,6 +15,7 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
15
15
  var id = _ref.id,
16
16
  name = _ref.name,
17
17
  initialColor = _ref.initialColor,
18
+ colorVariables = _ref.colorVariables,
18
19
  onChange = _ref.onChange,
19
20
  onCancel = _ref.onCancel,
20
21
  onSave = _ref.onSave;
@@ -60,7 +61,8 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
60
61
  value: value
61
62
  }, /*#__PURE__*/React__default['default'].createElement(pureColorPicker['default'], {
62
63
  id: id,
63
- name: name
64
+ name: name,
65
+ colorVariables: colorVariables
64
66
  }));
65
67
  };
66
68
 
@@ -1 +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;"}
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;"}
@@ -2,6 +2,7 @@
2
2
 
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
+ var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
5
6
  var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
6
7
 
7
8
  var getTinyColorInstance = function getTinyColorInstance(color) {
@@ -37,11 +38,79 @@ var getAllColorTypes = function getAllColorTypes(color) {
37
38
  hexString: hexString
38
39
  };
39
40
  };
41
+ var getVariableShades = function getVariableShades(_ref) {
42
+ var color = _ref.color,
43
+ _ref$isNeutral = _ref.isNeutral,
44
+ isNeutral = _ref$isNeutral === void 0 ? false : _ref$isNeutral;
45
+ var colorTiny = getTinyColorInstance(color);
46
+ var colorHsl = colorTiny.toHsl();
47
+ var blackShade = [{
48
+ h: colorHsl.h,
49
+ s: colorHsl.s,
50
+ l: 100
51
+ }];
52
+ var whiteShade = [{
53
+ h: colorHsl.h,
54
+ s: colorHsl.s,
55
+ l: 0
56
+ }];
57
+ var shades = [{
58
+ h: colorHsl.h,
59
+ s: colorHsl.s,
60
+ l: 99
61
+ }, {
62
+ h: colorHsl.h,
63
+ s: colorHsl.s,
64
+ l: 98
65
+ }, {
66
+ h: colorHsl.h,
67
+ s: colorHsl.s,
68
+ l: 95
69
+ }, {
70
+ h: colorHsl.h,
71
+ s: colorHsl.s,
72
+ l: 90
73
+ }, {
74
+ h: colorHsl.h,
75
+ s: colorHsl.s,
76
+ l: 80
77
+ }, {
78
+ h: colorHsl.h,
79
+ s: colorHsl.s,
80
+ l: 70
81
+ }, {
82
+ h: colorHsl.h,
83
+ s: colorHsl.s,
84
+ l: 60
85
+ }, {
86
+ h: colorHsl.h,
87
+ s: colorHsl.s,
88
+ l: 50
89
+ }, {
90
+ h: colorHsl.h,
91
+ s: colorHsl.s,
92
+ l: 40
93
+ }, {
94
+ h: colorHsl.h,
95
+ s: colorHsl.s,
96
+ l: 30
97
+ }, {
98
+ h: colorHsl.h,
99
+ s: colorHsl.s,
100
+ l: 20
101
+ }, {
102
+ h: colorHsl.h,
103
+ s: colorHsl.s,
104
+ l: 10
105
+ }];
106
+ return [].concat(_rollupPluginBabelHelpers.toConsumableArray(isNeutral ? blackShade : []), shades, _rollupPluginBabelHelpers.toConsumableArray(isNeutral ? whiteShade : []));
107
+ };
40
108
 
41
109
  exports.getAllColorTypes = getAllColorTypes;
42
110
  exports.getHexValue = getHexValue;
43
111
  exports.getHexValueString = getHexValueString;
44
112
  exports.getRgbaValue = getRgbaValue;
45
113
  exports.getTinyColorInstance = getTinyColorInstance;
114
+ exports.getVariableShades = getVariableShades;
46
115
  exports.isHexChar = isHexChar;
47
116
  //# sourceMappingURL=utilities.js.map
@@ -1 +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;"}
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;"}
@@ -20,6 +20,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
20
20
  errors = _ref.errors,
21
21
  labelAdditionalInfo = _ref.labelAdditionalInfo,
22
22
  initialColor = _ref.initialColor,
23
+ colorVariables = _ref.colorVariables,
23
24
  onChange = _ref.onChange,
24
25
  onCancel = _ref.onCancel,
25
26
  onSave = _ref.onSave;
@@ -38,6 +39,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
38
39
  id: id,
39
40
  name: name,
40
41
  initialColor: initialColor,
42
+ colorVariables: colorVariables,
41
43
  onChange: onChange,
42
44
  onCancel: onCancel,
43
45
  onSave: onSave
@@ -1 +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;"}
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;"}
@@ -5,10 +5,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
7
7
  var classnames = require('classnames');
8
+ var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
8
9
  var reactTransitionGroup = require('react-transition-group');
9
10
  var css_classes = require('../css_classes.js');
10
11
  var main_module = require('../../../css/tree/main.module.less.js');
11
- var icon_list_arrow_down = require('../../../assets/icon_list_arrow_down.js');
12
12
  var tree_hook = require('../hooks/tree_hook.js');
13
13
  var tree_node_hook = require('../hooks/tree_node_hook.js');
14
14
 
@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
6
6
 
7
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n display: flex;\n flex-direction: column;\n max-width: 250px;\n padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n display: flex;\n flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n order: -1;\n padding: 0 !important;\n margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n width: 24px;\n height: 24px;\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div:hover {\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy43NTc5IDQuNTgwMjFMMTIuNTg4OCA1Ljc0OTI1TDEzLjc1NzkgNi45MTgzTDEyLjU4ODggOC4wODczNEwxMi4wMDQzIDcuNTAyODJMNS43NDkyNSAxMy43NTc5QzUuNTg5OCAxMy45MTczIDUuMzcyMTMgMTQuMDA0NyA1LjE0NjY5IDEzLjk5OThMMi44NTg1NiAxMy45NDk4QzIuNDE2MTUgMTMuOTQwMiAyLjA1OTgyIDEzLjU4MzggMi4wNTAxNiAxMy4xNDE0TDIuMDAwMiAxMC44NTMzQzEuOTk1MjcgMTAuNjI3OSAyLjA4MjY3IDEwLjQxMDIgMi4yNDIxMiAxMC4yNTA3TDguNDk3MTggMy45OTU2OUw3LjkxMjY2IDMuNDExMTZMOS4wODE3IDIuMjQyMTJMMTAuMjUwNyAzLjQxMTE2TDExLjQxOTggMi4yNDIxMkMxMS43NDI2IDEuOTE5MjkgMTIuMjY2IDEuOTE5MjkgMTIuNTg4OCAyLjI0MjEyTDEzLjc1NzkgMy40MTExNkMxNC4wODA3IDMuNzMzOTggMTQuMDgwNyA0LjI1NzM4IDEzLjc1NzkgNC41ODAyMVpNOS42NjYyMyA1LjE2NDczTDQuMDc3NyAxMC43NTMzTDUuMjQ2NzQgMTEuOTIyM0wxMC44MzUzIDYuMzMzNzhMOS42NjYyMyA1LjE2NDczWiIgZmlsbD0iIzJEMzc0OCIvPgo8L3N2Zz4K) center;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 16px 9px 16px;\n border-bottom: 1px solid #f3f4f8;\n color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 8px;\n padding: 6px 16px 0 16px;\n border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n margin-bottom: 4px;\n color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n display: flex;\n justify-content: space-between;\n gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n position: relative;\n width: 26px;\n height: 26px;\n border-radius: 3px;\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n width: 16px;\n height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n width: 30px;\n height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 3px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n position: absolute;\n top: 7px;\n left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n font-size: 12px;\n color: #2d3748;\n text-transform: uppercase;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center right;\n padding-right: 10px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n display: flex;\n border: 1px solid #abb4cd;\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n border-color: transparent;\n border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n width: auto;\n}\n.main-module_color-picker__close-icon__JcWAL {\n display: flex;\n background-color: transparent;\n cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n fill: #2d3748;\n}\n";
7
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n display: flex;\n flex-direction: column;\n max-width: 280px;\n padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n display: flex;\n flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n order: -1;\n padding: 0 !important;\n margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n width: 24px;\n height: 24px;\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div:hover {\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy43NTc5IDQuNTgwMjFMMTIuNTg4OCA1Ljc0OTI1TDEzLjc1NzkgNi45MTgzTDEyLjU4ODggOC4wODczNEwxMi4wMDQzIDcuNTAyODJMNS43NDkyNSAxMy43NTc5QzUuNTg5OCAxMy45MTczIDUuMzcyMTMgMTQuMDA0NyA1LjE0NjY5IDEzLjk5OThMMi44NTg1NiAxMy45NDk4QzIuNDE2MTUgMTMuOTQwMiAyLjA1OTgyIDEzLjU4MzggMi4wNTAxNiAxMy4xNDE0TDIuMDAwMiAxMC44NTMzQzEuOTk1MjcgMTAuNjI3OSAyLjA4MjY3IDEwLjQxMDIgMi4yNDIxMiAxMC4yNTA3TDguNDk3MTggMy45OTU2OUw3LjkxMjY2IDMuNDExMTZMOS4wODE3IDIuMjQyMTJMMTAuMjUwNyAzLjQxMTE2TDExLjQxOTggMi4yNDIxMkMxMS43NDI2IDEuOTE5MjkgMTIuMjY2IDEuOTE5MjkgMTIuNTg4OCAyLjI0MjEyTDEzLjc1NzkgMy40MTExNkMxNC4wODA3IDMuNzMzOTggMTQuMDgwNyA0LjI1NzM4IDEzLjc1NzkgNC41ODAyMVpNOS42NjYyMyA1LjE2NDczTDQuMDc3NyAxMC43NTMzTDUuMjQ2NzQgMTEuOTIyM0wxMC44MzUzIDYuMzMzNzhMOS42NjYyMyA1LjE2NDczWiIgZmlsbD0iIzJEMzc0OCIvPgo8L3N2Zz4K) center;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 16px 9px 16px;\n border-bottom: 1px solid #f3f4f8;\n color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 8px;\n padding: 6px 16px 0 16px;\n border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[12];\n grid-template-columns: repeat(12, 1fr);\n gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n position: relative;\n width: 26px;\n height: 26px;\n border-radius: 3px;\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n width: 16px;\n height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n width: 30px;\n height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 3px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n position: absolute;\n top: 7px;\n left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n font-size: 12px;\n color: #2d3748;\n text-transform: uppercase;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center right;\n padding-right: 10px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n display: flex;\n border: 1px solid #abb4cd;\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n border-color: transparent;\n border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n width: auto;\n}\n.main-module_color-picker__close-icon__JcWAL {\n display: flex;\n background-color: transparent;\n cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n fill: #2d3748;\n}\n";
8
8
  var styles = {
9
9
  "color-picker__container": "main-module_color-picker__container__14ccI",
10
10
  "color-picker__rbgcp": "main-module_color-picker__rbgcp__2FKdw",
@@ -12,7 +12,10 @@ var styles = {
12
12
  "color-picker__footer": "main-module_color-picker__footer__3JvEl",
13
13
  "color-picker__swatches": "main-module_color-picker__swatches__1s2pY",
14
14
  "color-picker__swatches-header": "main-module_color-picker__swatches-header__187FL",
15
+ "color-picker__swatches-header-icon": "main-module_color-picker__swatches-header-icon__3RQMl",
16
+ "color-picker__swatches-header-icon_rotate-180": "main-module_color-picker__swatches-header-icon_rotate-180__1R-dA",
15
17
  "color-picker__swatches-content": "main-module_color-picker__swatches-content__3EFZR",
18
+ "color-picker__swatches-subcontent": "main-module_color-picker__swatches-subcontent__1uyUb",
16
19
  "color-picker__swatch": "main-module_color-picker__swatch__2IbgR",
17
20
  "color-picker__swatch_small": "main-module_color-picker__swatch_small__3Z0pq",
18
21
  "color-picker__swatch_big": "main-module_color-picker__swatch_big__2tsQC",
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -90,7 +90,8 @@ var en = {
90
90
  "Shades of color": "Shades of color",
91
91
  "Select color": "Select color",
92
92
  Edit: Edit,
93
- "Edit image": "Edit image"
93
+ "Edit image": "Edit image",
94
+ "Theme colors": "Theme colors"
94
95
  };
95
96
 
96
97
  exports.Add = Add;
@@ -1 +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;"}
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;"}
@@ -90,7 +90,8 @@ var pl = {
90
90
  "Shades of color": "Odcienie koloru",
91
91
  "Select color": "Wybierz kolor",
92
92
  Edit: Edit,
93
- "Edit image": "Edytuj obrazek"
93
+ "Edit image": "Edytuj obrazek",
94
+ "Theme colors": "Kolory szablonu"
94
95
  };
95
96
 
96
97
  exports.Add = Add;
@@ -1 +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;"}
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;"}
@@ -1 +1,3 @@
1
- export declare const IconListArrowDown: () => JSX.Element;
1
+ import { IIconProps } from './types';
2
+ import React from 'react';
3
+ export declare const IconListArrowDown: React.FC<IIconProps>;
@@ -1,12 +1,16 @@
1
1
  import React from 'react';
2
+ import cssClasses from '../css/icons/main.module.less.js';
2
3
 
3
- var IconListArrowDown = function IconListArrowDown() {
4
+ var IconListArrowDown = function IconListArrowDown(_ref) {
5
+ var className = _ref.className,
6
+ size = _ref.size;
4
7
  return /*#__PURE__*/React.createElement("svg", {
5
8
  width: "6",
6
9
  height: "4",
7
10
  viewBox: "0 0 6 4",
8
11
  fill: "none",
9
- xmlns: "http://www.w3.org/2000/svg"
12
+ xmlns: "http://www.w3.org/2000/svg",
13
+ className: "".concat(className || '', " ").concat(cssClasses["icon_".concat(size)])
10
14
  }, /*#__PURE__*/React.createElement("path", {
11
15
  id: "Polygon 1",
12
16
  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",
@@ -1 +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;"}
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;"}
@@ -0,0 +1 @@
1
+ export declare const ColorPickerShades: () => JSX.Element;
@@ -7,7 +7,7 @@ import { getTinyColorInstance, getHexValue } from '../utilities.js';
7
7
  import styles from '../../../css/color_picker_new/main.module.less.js';
8
8
  import { ColorPickerSwatch } from './color-picker-swatch.js';
9
9
 
10
- var ColorPickerSwatches = function ColorPickerSwatches() {
10
+ var ColorPickerShades = function ColorPickerShades() {
11
11
  var _useContext = useContext(ColorPickerNewContext),
12
12
  hslArr = _useContext.hslArr,
13
13
  handlePickSwatch = _useContext.handlePickSwatch;
@@ -88,5 +88,5 @@ var ColorPickerSwatches = function ColorPickerSwatches() {
88
88
  })));
89
89
  };
90
90
 
91
- export { ColorPickerSwatches };
92
- //# sourceMappingURL=color-picker-swatches.js.map
91
+ export { ColorPickerShades };
92
+ //# sourceMappingURL=color-picker-shades.js.map
@@ -0,0 +1,7 @@
1
+ import { IColorPickerColorVariablesType } from '../types';
2
+ import React from 'react';
3
+ interface IColorPickerVariablesProps {
4
+ variables: IColorPickerColorVariablesType;
5
+ }
6
+ export declare const ColorPickerVariables: React.FC<IColorPickerVariablesProps>;
7
+ export {};
@@ -0,0 +1,84 @@
1
+ import React, { useContext, useState } from 'react';
2
+ import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
3
+ import { slicedToArray as _slicedToArray, toConsumableArray as _toConsumableArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
4
+ import { ColorPickerNewContext } from '../context.js';
5
+ import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesContent, cssColorPickerSwatchesSubContent } from '../css_classes.js';
6
+ import { getVariableShades, getTinyColorInstance, getHexValue } from '../utilities.js';
7
+ import styles from '../../../css/color_picker_new/main.module.less.js';
8
+ import { ColorPickerSwatch } from './color-picker-swatch.js';
9
+ import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
10
+
11
+ var ColorPickerVariables = function ColorPickerVariables(_ref) {
12
+ var variables = _ref.variables;
13
+
14
+ var _useContext = useContext(ColorPickerNewContext),
15
+ handlePickSwatch = _useContext.handlePickSwatch;
16
+
17
+ var _useTranslation = useTranslation(),
18
+ _useTranslation2 = _slicedToArray(_useTranslation, 1),
19
+ t = _useTranslation2[0];
20
+
21
+ var _useState = useState(false),
22
+ _useState2 = _slicedToArray(_useState, 2),
23
+ isOpen = _useState2[0],
24
+ setIsOpen = _useState2[1];
25
+
26
+ var primaryShades = getVariableShades({
27
+ color: variables.primary
28
+ });
29
+ var secondaryShades = getVariableShades({
30
+ color: variables.secondary
31
+ });
32
+ var neutralShades = getVariableShades({
33
+ color: variables.neutral,
34
+ isNeutral: true
35
+ });
36
+ var allShades = [].concat(_toConsumableArray(primaryShades), _toConsumableArray(secondaryShades), _toConsumableArray(neutralShades));
37
+ return /*#__PURE__*/React.createElement("div", {
38
+ className: styles[cssColorPickerSwatches]
39
+ }, /*#__PURE__*/React.createElement("div", {
40
+ className: styles[cssColorPickerSwatchesHeader]
41
+ }, /*#__PURE__*/React.createElement("p", null, t('Theme colors')), /*#__PURE__*/React.createElement("div", {
42
+ className: styles[cssColorPickerSwatchesHeaderIcon],
43
+ onClick: function onClick() {
44
+ return setIsOpen(!isOpen);
45
+ }
46
+ }, /*#__PURE__*/React.createElement(IconListArrowDown, {
47
+ className: "".concat(!isOpen ? styles[cssColorPickerSwatchesHeaderIconRotate] : '')
48
+ }))), /*#__PURE__*/React.createElement("div", {
49
+ className: styles[cssColorPickerSwatchesContent]
50
+ }, Object.values(variables).map(function (variable, index) {
51
+ var colorTiny = getTinyColorInstance(variable);
52
+ var colorHex = getHexValue(colorTiny);
53
+
54
+ var handleOnClick = function handleOnClick() {
55
+ handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
56
+ };
57
+
58
+ return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
59
+ size: "small",
60
+ onClick: handleOnClick,
61
+ key: "".concat(variable, "-").concat(index),
62
+ color: colorHex
63
+ });
64
+ })), isOpen && /*#__PURE__*/React.createElement("div", {
65
+ className: styles[cssColorPickerSwatchesSubContent]
66
+ }, allShades.map(function (variable, index) {
67
+ var colorTiny = getTinyColorInstance(variable);
68
+ var colorHex = getHexValue(colorTiny);
69
+
70
+ var handleOnClick = function handleOnClick() {
71
+ handlePickSwatch === null || handlePickSwatch === void 0 || handlePickSwatch(colorHex);
72
+ };
73
+
74
+ return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
75
+ size: "small",
76
+ onClick: handleOnClick,
77
+ key: "".concat(variable, "-").concat(index),
78
+ color: colorHex
79
+ });
80
+ })));
81
+ };
82
+
83
+ export { ColorPickerVariables };
84
+ //# sourceMappingURL=color-picker-variables.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -9,12 +9,14 @@ import { ColorPickerFooter } from './color-picker-footer.js';
9
9
  import { ColorPickerHeader } from './color-picker-header.js';
10
10
  import { ColorPickerInputs } from './color-picker-inputs/color-picker-inputs.js';
11
11
  import { ColorPickerSwatch } from './color-picker-swatch.js';
12
- import { ColorPickerSwatches } from './color-picker-swatches.js';
12
+ import { ColorPickerShades } from './color-picker-shades.js';
13
+ import { ColorPickerVariables } from './color-picker-variables.js';
13
14
  import Dropdown from '../../dropdown/components/dropdown.js';
14
15
 
15
16
  var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
16
17
  var id = _ref.id,
17
- name = _ref.name;
18
+ name = _ref.name,
19
+ colorVariables = _ref.colorVariables;
18
20
 
19
21
  var _useContext = useContext(ColorPickerNewContext),
20
22
  color = _useContext.color,
@@ -49,7 +51,9 @@ var ColorPickerNewPure = function ColorPickerNewPure(_ref) {
49
51
  hideInputs: true,
50
52
  hidePresets: true,
51
53
  className: "".concat(styles[cssColorPickerRbgcp])
52
- }), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(ColorPickerSwatches, null)), /*#__PURE__*/React.createElement(ColorPickerFooter, null))));
54
+ }), /*#__PURE__*/React.createElement(ColorPickerInputs, null), /*#__PURE__*/React.createElement(ColorPickerShades, null), colorVariables.isVisible && /*#__PURE__*/React.createElement(ColorPickerVariables, {
55
+ variables: colorVariables.variables
56
+ })), /*#__PURE__*/React.createElement(ColorPickerFooter, null))));
53
57
  };
54
58
 
55
59
  export default ColorPickerNewPure;
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,4BAA4B,0FAA8F;AAC1H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -1,5 +1,5 @@
1
1
  export declare const COLOR_PICKER_INITIAL_STATE = "#000000";
2
- export declare const COLOR_PICKER_WIDTH = 220;
2
+ export declare const COLOR_PICKER_WIDTH = 247;
3
3
  export declare const COLOR_PICKER_HEIGHT = 200;
4
4
  export declare const COLOR_PICKER_ALPHA_MAX_VALUE = 100;
5
5
  export declare const COLOR_PICKER_TYPES: {
@@ -1,5 +1,5 @@
1
1
  var COLOR_PICKER_INITIAL_STATE = '#000000';
2
- var COLOR_PICKER_WIDTH = 220;
2
+ var COLOR_PICKER_WIDTH = 247;
3
3
  var COLOR_PICKER_HEIGHT = 200;
4
4
  var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
5
5
  var COLOR_PICKER_TYPES = {
@@ -5,7 +5,10 @@ export declare const cssColorPickerHeader = "color-picker__header";
5
5
  export declare const cssColorPickerCloseIcon = "color-picker__close-icon";
6
6
  export declare const cssColorPickerSwatches = "color-picker__swatches";
7
7
  export declare const cssColorPickerSwatchesHeader = "color-picker__swatches-header";
8
+ export declare const cssColorPickerSwatchesHeaderIcon = "color-picker__swatches-header-icon";
9
+ export declare const cssColorPickerSwatchesHeaderIconRotate = "color-picker__swatches-header-icon_rotate-180";
8
10
  export declare const cssColorPickerSwatchesContent = "color-picker__swatches-content";
11
+ export declare const cssColorPickerSwatchesSubContent = "color-picker__swatches-subcontent";
9
12
  export declare const cssColorPickerSwatch = "color-picker__swatch";
10
13
  export declare const cssColorPickerSwatchSmall = "color-picker__swatch_small";
11
14
  export declare const cssColorPickerSwatchBig = "color-picker__swatch_big";
@@ -5,7 +5,10 @@ var cssColorPickerHeader = 'color-picker__header';
5
5
  var cssColorPickerCloseIcon = 'color-picker__close-icon';
6
6
  var cssColorPickerSwatches = 'color-picker__swatches';
7
7
  var cssColorPickerSwatchesHeader = 'color-picker__swatches-header';
8
+ var cssColorPickerSwatchesHeaderIcon = 'color-picker__swatches-header-icon';
9
+ var cssColorPickerSwatchesHeaderIconRotate = 'color-picker__swatches-header-icon_rotate-180';
8
10
  var cssColorPickerSwatchesContent = 'color-picker__swatches-content';
11
+ var cssColorPickerSwatchesSubContent = 'color-picker__swatches-subcontent';
9
12
  var cssColorPickerSwatch = 'color-picker__swatch';
10
13
  var cssColorPickerSwatchSmall = 'color-picker__swatch_small';
11
14
  var cssColorPickerSwatchBig = 'color-picker__swatch_big';
@@ -18,5 +21,5 @@ var cssColorPickerInputsValue = 'color-picker__inputs-value';
18
21
  var cssColorPickerInputsValueContainer = 'color-picker__inputs-value-container';
19
22
  var cssColorPickerFooter = 'color-picker__footer';
20
23
 
21
- export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader };
24
+ export { cssColorPicker, cssColorPickerCloseIcon, cssColorPickerContainer, cssColorPickerFooter, cssColorPickerHeader, cssColorPickerInputColorSwatchContainer, cssColorPickerInputContainer, cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer, cssColorPickerRbgcp, cssColorPickerSwatch, cssColorPickerSwatchBig, cssColorPickerSwatchFill, cssColorPickerSwatchSmall, cssColorPickerSwatches, cssColorPickerSwatchesContent, cssColorPickerSwatchesHeader, cssColorPickerSwatchesHeaderIcon, cssColorPickerSwatchesHeaderIconRotate, cssColorPickerSwatchesSubContent };
22
25
  //# sourceMappingURL=css_classes.js.map
@@ -1 +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;"}
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;"}
@@ -1,3 +1,3 @@
1
1
  import { IColorPickerNewProps } from './types';
2
- declare const ColorPickerNewWithContext: ({ id, name, initialColor, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
2
+ declare const ColorPickerNewWithContext: ({ id, name, initialColor, colorVariables, onChange, onCancel, onSave }: IColorPickerNewProps) => JSX.Element;
3
3
  export default ColorPickerNewWithContext;
@@ -7,6 +7,7 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
7
7
  var id = _ref.id,
8
8
  name = _ref.name,
9
9
  initialColor = _ref.initialColor,
10
+ colorVariables = _ref.colorVariables,
10
11
  onChange = _ref.onChange,
11
12
  onCancel = _ref.onCancel,
12
13
  onSave = _ref.onSave;
@@ -52,7 +53,8 @@ var ColorPickerNewWithContext = function ColorPickerNewWithContext(_ref) {
52
53
  value: value
53
54
  }, /*#__PURE__*/React.createElement(ColorPickerNewPure, {
54
55
  id: id,
55
- name: name
56
+ name: name,
57
+ colorVariables: colorVariables
56
58
  }));
57
59
  };
58
60
 
@@ -1 +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;"}
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;"}
@@ -2,11 +2,24 @@ import { Dispatch, SetStateAction } from 'react';
2
2
  export interface IColorPickerNewPureProps {
3
3
  id: string;
4
4
  name?: string;
5
+ colorVariables: IColorPickerColorVariables;
6
+ }
7
+ export interface IColorPickerColorVariables {
8
+ isVisible: boolean;
9
+ variables: IColorPickerColorVariablesType;
10
+ }
11
+ export interface IColorPickerColorVariablesType {
12
+ primary: string;
13
+ secondary: string;
14
+ neutral: string;
15
+ text: string;
16
+ background: string;
5
17
  }
6
18
  export interface IColorPickerNewProps {
7
19
  id: string;
8
20
  name?: string;
9
21
  initialColor?: ColorPickerColorTypes['hex'] | undefined;
22
+ colorVariables: IColorPickerColorVariables;
10
23
  onChange?: (color: IColorPickerColor) => void;
11
24
  onCancel?: () => void;
12
25
  onSave?: (color: IColorPickerColor) => void;
@@ -6,3 +6,11 @@ export declare const getHexValue: (colorSet: tinycolor.Instance) => string;
6
6
  export declare const getHexValueString: (colorSet: tinycolor.Instance) => string;
7
7
  export declare const isHexChar: (value: string) => boolean;
8
8
  export declare const getAllColorTypes: (color: string) => IColorPickerColor;
9
+ export declare const getVariableShades: ({ color, isNeutral }: {
10
+ color: string;
11
+ isNeutral?: boolean | undefined;
12
+ }) => {
13
+ h: number;
14
+ s: number;
15
+ l: number;
16
+ }[];
@@ -1,3 +1,4 @@
1
+ import { toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
1
2
  import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
2
3
 
3
4
  var getTinyColorInstance = function getTinyColorInstance(color) {
@@ -33,6 +34,73 @@ var getAllColorTypes = function getAllColorTypes(color) {
33
34
  hexString: hexString
34
35
  };
35
36
  };
37
+ var getVariableShades = function getVariableShades(_ref) {
38
+ var color = _ref.color,
39
+ _ref$isNeutral = _ref.isNeutral,
40
+ isNeutral = _ref$isNeutral === void 0 ? false : _ref$isNeutral;
41
+ var colorTiny = getTinyColorInstance(color);
42
+ var colorHsl = colorTiny.toHsl();
43
+ var blackShade = [{
44
+ h: colorHsl.h,
45
+ s: colorHsl.s,
46
+ l: 100
47
+ }];
48
+ var whiteShade = [{
49
+ h: colorHsl.h,
50
+ s: colorHsl.s,
51
+ l: 0
52
+ }];
53
+ var shades = [{
54
+ h: colorHsl.h,
55
+ s: colorHsl.s,
56
+ l: 99
57
+ }, {
58
+ h: colorHsl.h,
59
+ s: colorHsl.s,
60
+ l: 98
61
+ }, {
62
+ h: colorHsl.h,
63
+ s: colorHsl.s,
64
+ l: 95
65
+ }, {
66
+ h: colorHsl.h,
67
+ s: colorHsl.s,
68
+ l: 90
69
+ }, {
70
+ h: colorHsl.h,
71
+ s: colorHsl.s,
72
+ l: 80
73
+ }, {
74
+ h: colorHsl.h,
75
+ s: colorHsl.s,
76
+ l: 70
77
+ }, {
78
+ h: colorHsl.h,
79
+ s: colorHsl.s,
80
+ l: 60
81
+ }, {
82
+ h: colorHsl.h,
83
+ s: colorHsl.s,
84
+ l: 50
85
+ }, {
86
+ h: colorHsl.h,
87
+ s: colorHsl.s,
88
+ l: 40
89
+ }, {
90
+ h: colorHsl.h,
91
+ s: colorHsl.s,
92
+ l: 30
93
+ }, {
94
+ h: colorHsl.h,
95
+ s: colorHsl.s,
96
+ l: 20
97
+ }, {
98
+ h: colorHsl.h,
99
+ s: colorHsl.s,
100
+ l: 10
101
+ }];
102
+ return [].concat(_toConsumableArray(isNeutral ? blackShade : []), shades, _toConsumableArray(isNeutral ? whiteShade : []));
103
+ };
36
104
 
37
- export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance, isHexChar };
105
+ export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance, getVariableShades, isHexChar };
38
106
  //# sourceMappingURL=utilities.js.map
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,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;"}
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;"}
@@ -12,6 +12,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
12
12
  errors = _ref.errors,
13
13
  labelAdditionalInfo = _ref.labelAdditionalInfo,
14
14
  initialColor = _ref.initialColor,
15
+ colorVariables = _ref.colorVariables,
15
16
  onChange = _ref.onChange,
16
17
  onCancel = _ref.onCancel,
17
18
  onSave = _ref.onSave;
@@ -30,6 +31,7 @@ var ControlColorPickerNew = function ControlColorPickerNew(_ref) {
30
31
  id: id,
31
32
  name: name,
32
33
  initialColor: initialColor,
34
+ colorVariables: colorVariables,
33
35
  onChange: onChange,
34
36
  onCancel: onCancel,
35
37
  onSave: onSave
@@ -1 +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;"}
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;"}
@@ -1,10 +1,10 @@
1
1
  import React, { useRef, Children } from 'react';
2
2
  import { objectWithoutProperties as _objectWithoutProperties, defineProperty as _defineProperty } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
3
3
  import classnames from 'classnames';
4
+ import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
4
5
  import { CSSTransition } from 'react-transition-group';
5
6
  import { TREE_NODE_CSS_CLASSES } from '../css_classes.js';
6
7
  import cssClasses from '../../../css/tree/main.module.less.js';
7
- import { IconListArrowDown } from '../../../assets/icon_list_arrow_down.js';
8
8
  import { useTree } from '../hooks/tree_hook.js';
9
9
  import { useTreeNode } from '../hooks/tree_node_hook.js';
10
10
 
@@ -1,6 +1,6 @@
1
1
  import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
2
2
 
3
- var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n display: flex;\n flex-direction: column;\n max-width: 250px;\n padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n display: flex;\n flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n order: -1;\n padding: 0 !important;\n margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n width: 24px;\n height: 24px;\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div:hover {\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy43NTc5IDQuNTgwMjFMMTIuNTg4OCA1Ljc0OTI1TDEzLjc1NzkgNi45MTgzTDEyLjU4ODggOC4wODczNEwxMi4wMDQzIDcuNTAyODJMNS43NDkyNSAxMy43NTc5QzUuNTg5OCAxMy45MTczIDUuMzcyMTMgMTQuMDA0NyA1LjE0NjY5IDEzLjk5OThMMi44NTg1NiAxMy45NDk4QzIuNDE2MTUgMTMuOTQwMiAyLjA1OTgyIDEzLjU4MzggMi4wNTAxNiAxMy4xNDE0TDIuMDAwMiAxMC44NTMzQzEuOTk1MjcgMTAuNjI3OSAyLjA4MjY3IDEwLjQxMDIgMi4yNDIxMiAxMC4yNTA3TDguNDk3MTggMy45OTU2OUw3LjkxMjY2IDMuNDExMTZMOS4wODE3IDIuMjQyMTJMMTAuMjUwNyAzLjQxMTE2TDExLjQxOTggMi4yNDIxMkMxMS43NDI2IDEuOTE5MjkgMTIuMjY2IDEuOTE5MjkgMTIuNTg4OCAyLjI0MjEyTDEzLjc1NzkgMy40MTExNkMxNC4wODA3IDMuNzMzOTggMTQuMDgwNyA0LjI1NzM4IDEzLjc1NzkgNC41ODAyMVpNOS42NjYyMyA1LjE2NDczTDQuMDc3NyAxMC43NTMzTDUuMjQ2NzQgMTEuOTIyM0wxMC44MzUzIDYuMzMzNzhMOS42NjYyMyA1LjE2NDczWiIgZmlsbD0iIzJEMzc0OCIvPgo8L3N2Zz4K) center;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 16px 9px 16px;\n border-bottom: 1px solid #f3f4f8;\n color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 8px;\n padding: 6px 16px 0 16px;\n border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n margin-bottom: 4px;\n color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n display: flex;\n justify-content: space-between;\n gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n position: relative;\n width: 26px;\n height: 26px;\n border-radius: 3px;\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n width: 16px;\n height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n width: 30px;\n height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 3px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n position: absolute;\n top: 7px;\n left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n font-size: 12px;\n color: #2d3748;\n text-transform: uppercase;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center right;\n padding-right: 10px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n display: flex;\n border: 1px solid #abb4cd;\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n border-color: transparent;\n border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n width: auto;\n}\n.main-module_color-picker__close-icon__JcWAL {\n display: flex;\n background-color: transparent;\n cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n fill: #2d3748;\n}\n";
3
+ var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n display: flex;\n flex-direction: column;\n max-width: 280px;\n padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n display: flex;\n flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n order: -1;\n padding: 0 !important;\n margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n width: 24px;\n height: 24px;\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div:hover {\n background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZpZXdCb3g9IjAgMCAxNiAxNiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMy43NTc5IDQuNTgwMjFMMTIuNTg4OCA1Ljc0OTI1TDEzLjc1NzkgNi45MTgzTDEyLjU4ODggOC4wODczNEwxMi4wMDQzIDcuNTAyODJMNS43NDkyNSAxMy43NTc5QzUuNTg5OCAxMy45MTczIDUuMzcyMTMgMTQuMDA0NyA1LjE0NjY5IDEzLjk5OThMMi44NTg1NiAxMy45NDk4QzIuNDE2MTUgMTMuOTQwMiAyLjA1OTgyIDEzLjU4MzggMi4wNTAxNiAxMy4xNDE0TDIuMDAwMiAxMC44NTMzQzEuOTk1MjcgMTAuNjI3OSAyLjA4MjY3IDEwLjQxMDIgMi4yNDIxMiAxMC4yNTA3TDguNDk3MTggMy45OTU2OUw3LjkxMjY2IDMuNDExMTZMOS4wODE3IDIuMjQyMTJMMTAuMjUwNyAzLjQxMTE2TDExLjQxOTggMi4yNDIxMkMxMS43NDI2IDEuOTE5MjkgMTIuMjY2IDEuOTE5MjkgMTIuNTg4OCAyLjI0MjEyTDEzLjc1NzkgMy40MTExNkMxNC4wODA3IDMuNzMzOTggMTQuMDgwNyA0LjI1NzM4IDEzLjc1NzkgNC41ODAyMVpNOS42NjYyMyA1LjE2NDczTDQuMDc3NyAxMC43NTMzTDUuMjQ2NzQgMTEuOTIyM0wxMC44MzUzIDYuMzMzNzhMOS42NjYyMyA1LjE2NDczWiIgZmlsbD0iIzJEMzc0OCIvPgo8L3N2Zz4K) center;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n display: flex;\n align-items: center;\n justify-content: space-between;\n padding: 4px 16px 9px 16px;\n border-bottom: 1px solid #f3f4f8;\n color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: 8px;\n margin-top: 8px;\n padding: 6px 16px 0 16px;\n border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n margin-top: 14px;\n}\n.main-module_color-picker__swatches-header__187FL {\n display: flex;\n align-items: center;\n justify-content: space-between;\n margin-bottom: 4px;\n color: #2d3748;\n}\n.main-module_color-picker__swatches-header-icon__3RQMl {\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 5px;\n}\n.main-module_color-picker__swatches-header-icon_rotate-180__1R-dA {\n transform: rotate(180deg);\n}\n.main-module_color-picker__swatches-content__3EFZR,\n.main-module_color-picker__swatches-subcontent__1uyUb {\n display: -ms-grid;\n display: grid;\n -ms-grid-columns: (1fr)[12];\n grid-template-columns: repeat(12, 1fr);\n gap: 4px;\n}\n.main-module_color-picker__swatches-subcontent__1uyUb {\n margin-top: 12px;\n}\n.main-module_color-picker__swatch__2IbgR {\n position: relative;\n width: 26px;\n height: 26px;\n border-radius: 3px;\n background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n width: 16px;\n height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n width: 30px;\n height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n border-radius: 3px;\n box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n position: absolute;\n top: 7px;\n left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n display: flex;\n align-items: center;\n gap: 8px;\n margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n font-size: 12px;\n color: #2d3748;\n text-transform: uppercase;\n background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n background-position: center right;\n padding-right: 10px;\n -moz-appearance: none;\n -webkit-appearance: none;\n appearance: none;\n}\n.main-module_color-picker__inputs-value__Rig14 {\n flex: 1;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n display: flex;\n border: 1px solid #abb4cd;\n border-radius: 4px;\n overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div {\n border-color: transparent;\n border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:hover {\n border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child) {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:not(:last-child):hover {\n border-right: 1px solid #abb4cd;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:last-child {\n width: 44px;\n}\n.main-module_color-picker__inputs-value-container__3ErVj > div:nth-child(n + 4):last-child {\n width: auto;\n}\n.main-module_color-picker__close-icon__JcWAL {\n display: flex;\n background-color: transparent;\n cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n fill: #2d3748;\n}\n";
4
4
  var styles = {
5
5
  "color-picker__container": "main-module_color-picker__container__14ccI",
6
6
  "color-picker__rbgcp": "main-module_color-picker__rbgcp__2FKdw",
@@ -8,7 +8,10 @@ var styles = {
8
8
  "color-picker__footer": "main-module_color-picker__footer__3JvEl",
9
9
  "color-picker__swatches": "main-module_color-picker__swatches__1s2pY",
10
10
  "color-picker__swatches-header": "main-module_color-picker__swatches-header__187FL",
11
+ "color-picker__swatches-header-icon": "main-module_color-picker__swatches-header-icon__3RQMl",
12
+ "color-picker__swatches-header-icon_rotate-180": "main-module_color-picker__swatches-header-icon_rotate-180__1R-dA",
11
13
  "color-picker__swatches-content": "main-module_color-picker__swatches-content__3EFZR",
14
+ "color-picker__swatches-subcontent": "main-module_color-picker__swatches-subcontent__1uyUb",
12
15
  "color-picker__swatch": "main-module_color-picker__swatch__2IbgR",
13
16
  "color-picker__swatch_small": "main-module_color-picker__swatch_small__3Z0pq",
14
17
  "color-picker__swatch_big": "main-module_color-picker__swatch_big__2tsQC",
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1
+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
@@ -57,5 +57,6 @@
57
57
  "Shades of color": "Shades of color",
58
58
  "Select color": "Select color",
59
59
  "Edit": "Edit",
60
- "Edit image": "Edit image"
60
+ "Edit image": "Edit image",
61
+ "Theme colors": "Theme colors"
61
62
  }
@@ -86,7 +86,8 @@ var en = {
86
86
  "Shades of color": "Shades of color",
87
87
  "Select color": "Select color",
88
88
  Edit: Edit,
89
- "Edit image": "Edit image"
89
+ "Edit image": "Edit image",
90
+ "Theme colors": "Theme colors"
90
91
  };
91
92
 
92
93
  export default en;
@@ -1 +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;"}
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;"}
@@ -57,5 +57,6 @@
57
57
  "Shades of color": "Odcienie koloru",
58
58
  "Select color": "Wybierz kolor",
59
59
  "Edit": "Edytuj",
60
- "Edit image": "Edytuj obrazek"
60
+ "Edit image": "Edytuj obrazek",
61
+ "Theme colors": "Kolory szablonu"
61
62
  }
@@ -86,7 +86,8 @@ var pl = {
86
86
  "Shades of color": "Odcienie koloru",
87
87
  "Select color": "Wybierz kolor",
88
88
  Edit: Edit,
89
- "Edit image": "Edytuj obrazek"
89
+ "Edit image": "Edytuj obrazek",
90
+ "Theme colors": "Kolory szablonu"
90
91
  };
91
92
 
92
93
  export default pl;
@@ -1 +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;"}
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;"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dreamcommerce/aurora",
3
3
  "packageManager": "yarn@3.2.0",
4
4
  "sideEffects": false,
5
- "version": "2.17.21-3",
5
+ "version": "2.17.22-1",
6
6
  "description": "aurora",
7
7
  "author": "k0ssak",
8
8
  "license": "MIT",
@@ -1 +0,0 @@
1
- export declare const ColorPickerSwatches: () => JSX.Element;