@dreamcommerce/aurora 3.0.0-32 → 3.0.0-321

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_gradient_controls.js

@@ -0,0 +1,173 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var formatters = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js');
+var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+var icon = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/icon.js');
+var styles = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js');
+var delete_bin_icon = require('../../../../assets/icons/delete_bin_icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var GradientType = function GradientType() {
+  var _usePicker = context.usePicker(),
+    gradientType = _usePicker.gradientType,
+    onChange = _usePicker.onChange,
+    value = _usePicker.value,
+    defaultStyles = _usePicker.defaultStyles;
+  var isLinear = gradientType === 'linear-gradient';
+  var isRadial = gradientType === 'radial-gradient';
+  var handleLinear = function handleLinear() {
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("linear-gradient(90deg, ".concat(remaining));
+  };
+  var handleRadial = function handleRadial() {
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("radial-gradient(circle, ".concat(remaining));
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: defaultStyles.rbgcpControlBtnWrapper
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: handleLinear,
+    id: "rbgcp-linear-btn",
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpControlBtn), isLinear && defaultStyles.rbgcpControlBtnSelected),
+    tabIndex: 0,
+    role: "button",
+    onKeyDown: function onKeyDown() {
+      return;
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icon.LinearIcon, {
+    color: isLinear ? '#568CF5' : ''
+  })), /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: handleRadial,
+    id: "rbgcp-radial-btn",
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpControlBtn), isRadial && defaultStyles.rbgcpControlBtnSelected),
+    tabIndex: 0,
+    role: "button",
+    onKeyDown: function onKeyDown() {
+      return;
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icon.RadialIcon, {
+    color: isRadial ? '#568CF5' : ''
+  })));
+};
+var StopPicker = function StopPicker() {
+  var _usePicker2 = context.usePicker(),
+    currentLeft = _usePicker2.currentLeft,
+    handleGradient = _usePicker2.handleGradient,
+    currentColor = _usePicker2.currentColor,
+    defaultStyles = _usePicker2.defaultStyles;
+  var handleMove = function handleMove(newVal) {
+    handleGradient(currentColor, formatters.formatInputValues(parseInt(newVal), 0, 100));
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpControlBtnWrapper), defaultStyles.rbgcpControlInputWrap), defaultStyles.rbgcpStopInputWrap), {}, {
+      paddingLeft: 8
+    })
+  }, /*#__PURE__*/React__default['default'].createElement(icon.StopIcon, null), /*#__PURE__*/React__default['default'].createElement("input", {
+    value: currentLeft,
+    id: "rbgcp-stop-input",
+    onChange: function onChange(e) {
+      return handleMove(e.target.value);
+    },
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpControlInput), defaultStyles.rbgcpStopInput)
+  }));
+};
+var DegreePicker = function DegreePicker() {
+  var _usePicker3 = context.usePicker(),
+    degrees = _usePicker3.degrees,
+    onChange = _usePicker3.onChange,
+    value = _usePicker3.value,
+    defaultStyles = _usePicker3.defaultStyles;
+  var handleDegrees = function handleDegrees(e) {
+    var newValue = formatters.formatInputValues(e.target.value, 0, 360);
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpControlBtnWrapper), defaultStyles.rbgcpControlInputWrap), defaultStyles.rbgcpDegreeInputWrap)
+  }, /*#__PURE__*/React__default['default'].createElement(icon.DegreesIcon, null), /*#__PURE__*/React__default['default'].createElement("input", {
+    value: degrees,
+    id: "rbgcp-degree-input",
+    onChange: function onChange(e) {
+      return handleDegrees(e);
+    },
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpControlInput), defaultStyles.rbgcpDegreeInput)
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpDegreeIcon), {}, {
+      position: 'absolute',
+      right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
+      top: 1,
+      fontWeight: 400,
+      fontSize: 13
+    })
+  }, "\xB0"));
+};
+var DeleteBtn = function DeleteBtn() {
+  var _usePicker4 = context.usePicker(),
+    colors = _usePicker4.colors,
+    selectedColor = _usePicker4.selectedColor,
+    createGradientStr = _usePicker4.createGradientStr,
+    defaultStyles = _usePicker4.defaultStyles;
+  var deletePoint = function deletePoint() {
+    if ((colors === null || colors === void 0 ? void 0 : colors.length) > 2) {
+      var formatted = colors === null || colors === void 0 ? void 0 : colors.map(function (fc, i) {
+        return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, fc), {}, {
+          value: i === selectedColor - 1 ? formatters.high(fc) : formatters.low(fc)
+        });
+      });
+      var remaining = formatted === null || formatted === void 0 ? void 0 : formatted.filter(function (_, i) {
+        return i !== selectedColor;
+      });
+      createGradientStr(remaining);
+    }
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: deletePoint,
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, styles.controlBtnStyles(false, defaultStyles)), {}, {
+      width: 28,
+      background: '#F5F6FA'
+    }),
+    id: "rbgcp-point-delete-btn",
+    tabIndex: 0,
+    role: "button",
+    onKeyDown: function onKeyDown() {
+      return;
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(delete_bin_icon.DeleteBinLineIcon, {
+    className: "aurora-w-4 aurora-h-4 aurora-stroke-0"
+  }));
+};
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Zmieniono ikonke smietnika
+ */
+var GradientControls = function GradientControls(_ref) {
+  var hideGradientType = _ref.hideGradientType,
+    hideGradientAngle = _ref.hideGradientAngle,
+    hideGradientStop = _ref.hideGradientStop;
+  var _usePicker5 = context.usePicker(),
+    gradientType = _usePicker5.gradientType,
+    defaultStyles = _usePicker5.defaultStyles;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpControlBtnWrapper), {}, {
+      marginTop: 12,
+      marginBottom: -4,
+      justifyContent: 'space-between',
+      paddingLeft: hideGradientType ? 4 : 0
+    }),
+    id: "rbgcp-gradient-controls-wrap"
+  }, !hideGradientType && /*#__PURE__*/React__default['default'].createElement(GradientType, null), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: 53
+    }
+  }, !hideGradientAngle && gradientType === 'linear-gradient' && /*#__PURE__*/React__default['default'].createElement(DegreePicker, null)), !hideGradientStop && /*#__PURE__*/React__default['default'].createElement(StopPicker, null), /*#__PURE__*/React__default['default'].createElement(DeleteBtn, null));
+};
+
+exports.GradientControls = GradientControls;
+//# sourceMappingURL=color_picker_gradient_controls.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_gradient_controls.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,yBAAyB,6FAAiG;AAC1H,sBAAsB,oFAAwF;AAC9G,mBAAmB,4FAAgG;AACnH,qBAAqB,0FAA8F;AACnH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js

@@ -0,0 +1,119 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var tinycolor = require('../../../../../../../external/tinycolor2/esm/tinycolor.js');
+var utils = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js');
+var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+var usePaintHue = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/usePaintHue.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Wysokosc i marginesy
+ * - Zmiana onClick na onMouseDown
+ */
+var Hue = function Hue() {
+  var barRef = React.useRef(null);
+  var _usePicker = context.usePicker(),
+    handleChange = _usePicker.handleChange,
+    squareWidth = _usePicker.squareWidth,
+    hc = _usePicker.hc,
+    setHc = _usePicker.setHc;
+  usePaintHue['default'](barRef, squareWidth);
+  var containerRef = React.useRef(null);
+  var draggingRef = React.useRef(false);
+  var stopDragging = function stopDragging() {
+    draggingRef.current = false;
+  };
+  var handleDown = function handleDown() {
+    draggingRef.current = true;
+  };
+  var handleHue = React.useCallback(function (e) {
+    var newHue = utils.getHandleValue(e) * 3.6;
+    var tinyHsv = tinycolor['default']({
+      h: newHue,
+      s: hc === null || hc === void 0 ? void 0 : hc.s,
+      v: hc === null || hc === void 0 ? void 0 : hc.v
+    });
+    var _tinyHsv$toRgb = tinyHsv.toRgb(),
+      r = _tinyHsv$toRgb.r,
+      g = _tinyHsv$toRgb.g,
+      b = _tinyHsv$toRgb.b;
+    handleChange("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(hc.a, ")"));
+    setHc(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, hc), {}, {
+      h: newHue
+    }));
+  }, [handleChange, hc, setHc]);
+  var handleBarMouseDown = function handleBarMouseDown(e) {
+    if (draggingRef.current) return;
+    handleHue(e);
+    draggingRef.current = true;
+  };
+  React.useEffect(function () {
+    var handleUp = function handleUp() {
+      stopDragging();
+    };
+    var handleMove = function handleMove(e) {
+      if (!draggingRef.current) return;
+      var newEvent = {
+        target: containerRef.current,
+        clientX: e.clientX
+      };
+      handleHue(newEvent);
+    };
+    window.addEventListener('mouseup', handleUp);
+    window.addEventListener('mousemove', handleMove);
+    return function () {
+      window.removeEventListener('mouseup', handleUp);
+      window.removeEventListener('mousemove', handleMove);
+    };
+  }, [handleHue]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: containerRef,
+    style: {
+      height: 12,
+      cursor: 'ew-resize',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    tabIndex: 0,
+    role: "button",
+    style: {
+      border: '2px solid white',
+      borderRadius: '50%',
+      boxShadow: '0px 0px 3px rgba(0, 0, 0, 0.5)',
+      width: '16px',
+      height: '16px',
+      zIndex: 1000,
+      transition: 'all 10ms linear',
+      position: 'absolute',
+      left: (hc === null || hc === void 0 ? void 0 : hc.h) * ((squareWidth - 18) / 360),
+      top: -2,
+      cursor: 'ew-resize',
+      boxSizing: 'border-box'
+    },
+    onMouseDown: handleDown
+  }), /*#__PURE__*/React__default['default'].createElement("canvas", {
+    ref: barRef,
+    height: "12px",
+    width: "".concat(squareWidth, "px"),
+    onMouseDown: function onMouseDown(e) {
+      return handleBarMouseDown(e);
+    },
+    style: {
+      position: 'relative',
+      borderRadius: 14,
+      verticalAlign: 'top'
+    }
+  }));
+};
+
+exports.Hue = Hue;
+//# sourceMappingURL=color_picker_hue.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_hue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,2DAA+D;AACvF,oBAAoB,wFAA4F;AAChH,sBAAsB,oFAAwF;AAC9G,0BAA0B,8FAAkG;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_opacity.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var utils = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js');
+var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Wysokosc i marginesy
+ * - Zmiana onClick na onMouseDown
+ */
+var Opacity = function Opacity() {
+  var _usePicker = context.usePicker(),
+    handleChange = _usePicker.handleChange,
+    _usePicker$hc = _usePicker.hc,
+    hc = _usePicker$hc === void 0 ? {} : _usePicker$hc,
+    squareWidth = _usePicker.squareWidth,
+    defaultStyles = _usePicker.defaultStyles;
+  var r = hc.r,
+    g = hc.g,
+    b = hc.b;
+  var bg = "linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(".concat(r, ",").concat(g, ",").concat(b, ",.5) 100%)");
+  var containerRef = React.useRef(null);
+  var draggingRef = React.useRef(false);
+  var stopDragging = function stopDragging() {
+    draggingRef.current = false;
+  };
+  var handleDown = function handleDown() {
+    draggingRef.current = true;
+  };
+  var handleOpacity = React.useCallback(function (e) {
+    var newO = utils.getHandleValue(e) / 100;
+    var newColor = "rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(newO, ")");
+    handleChange(newColor);
+  }, [b, g, handleChange, r]);
+  var handleMouseDown = function handleMouseDown(e) {
+    if (draggingRef.current) return;
+    handleOpacity(e);
+    draggingRef.current = true;
+  };
+  var left = squareWidth - 18;
+  React.useEffect(function () {
+    var handleUp = function handleUp() {
+      stopDragging();
+    };
+    var handleMove = function handleMove(e) {
+      if (!draggingRef.current) return;
+      var newEvent = {
+        target: containerRef.current,
+        clientX: e.clientX
+      };
+      handleOpacity(newEvent);
+    };
+    window.addEventListener('mouseup', handleUp);
+    window.addEventListener('mousemove', handleMove);
+    return function () {
+      window.removeEventListener('mouseup', handleUp);
+      window.removeEventListener('mousemove', handleMove);
+    };
+  }, [handleOpacity]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: containerRef,
+    onMouseDown: handleDown,
+    style: {
+      height: 12,
+      cursor: 'ew-resize',
+      position: 'relative'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpCheckered), {}, {
+      width: '100%',
+      height: 12
+    })
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpHandle), {}, {
+      left: left * (hc === null || hc === void 0 ? void 0 : hc.a),
+      top: -2,
+      width: 16,
+      height: 16
+    })
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpOpacityOverlay), {}, {
+      background: bg
+    }),
+    onMouseDown: function onMouseDown(e) {
+      return handleMouseDown(e);
+    }
+  }));
+};
+
+exports.Opacity = Opacity;
+//# sourceMappingURL=color_picker_opacity.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_opacity.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,wFAA4F;AAChH,sBAAsB,oFAAwF;AAC9G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var tinycolor = require('../../../../../../../external/tinycolor2/esm/tinycolor.js');
+var constants = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/constants.js');
+var utils = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js');
+var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+var usePaintSquare = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/usePaintSquare.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var crossSize = constants.config.crossSize;
+/**
+ * Zmieniono wzgledem react-best-gradient-color-picker:
+ * - Przeniesiono handleMove na window
+ * - Usunieto throttle ktore i tak nie dzialalo -.-
+ */
+var Square = function Square() {
+  var _usePicker = context.usePicker(),
+    hc = _usePicker.hc,
+    defaultStyles = _usePicker.defaultStyles,
+    squareWidth = _usePicker.squareWidth,
+    squareHeight = _usePicker.squareHeight,
+    handleChange = _usePicker.handleChange;
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    dragging = _useState2[0],
+    setDragging = _useState2[1];
+  var canvas = React.useRef(null);
+  var _computeSquareXY = utils.computeSquareXY(hc === null || hc === void 0 ? void 0 : hc.s, (hc === null || hc === void 0 ? void 0 : hc.v) * 100, squareWidth, squareHeight),
+    _computeSquareXY2 = _rollupPluginBabelHelpers.slicedToArray(_computeSquareXY, 2),
+    x = _computeSquareXY2[0],
+    y = _computeSquareXY2[1];
+  var _useState3 = React.useState({
+      x: x,
+      y: y
+    }),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    dragPos = _useState4[0],
+    setDragPos = _useState4[1];
+  var squareRef = React.useRef(null);
+  usePaintSquare['default'](canvas, hc === null || hc === void 0 ? void 0 : hc.h, squareWidth, squareHeight);
+  React.useEffect(function () {
+    if (dragging) return;
+    setDragPos({
+      x: (hc === null || hc === void 0 ? void 0 : hc.v) === 0 ? dragPos.x : x,
+      y: y
+    });
+  }, [x, y]);
+  var onMouseMove = React.useCallback(function (e) {
+    var _computePickerPositio = utils.computePickerPosition(e),
+      _computePickerPositio2 = _rollupPluginBabelHelpers.slicedToArray(_computePickerPositio, 2),
+      x = _computePickerPositio2[0],
+      y = _computePickerPositio2[1];
+    if (x && y) {
+      var x1 = Math.min(x + crossSize / 2, squareWidth - 1);
+      var y1 = Math.min(y + crossSize / 2, squareHeight - 1);
+      var newS = x1 / squareWidth * 100;
+      var newY = 100 - y1 / squareHeight * 100;
+      setDragPos({
+        x: newY === 0 ? dragPos === null || dragPos === void 0 ? void 0 : dragPos.x : x,
+        y: y
+      });
+      var updated = tinycolor['default']("hsva(".concat(hc === null || hc === void 0 ? void 0 : hc.h, ", ").concat(newS, "%, ").concat(newY, "%, ").concat(hc === null || hc === void 0 ? void 0 : hc.a, ")"));
+      handleChange(updated.toRgbString());
+    }
+  }, [dragPos.x, handleChange, hc.a, hc.h, squareHeight, squareWidth]);
+  var handleColor = function handleColor(e) {
+    onMouseMove(e);
+  };
+  var stopDragging = function stopDragging() {
+    setDragging(false);
+  };
+  var handleMove = React.useCallback(function (e) {
+    if (!dragging) return;
+    var newEvent = {
+      target: squareRef.current,
+      clientX: e.clientX,
+      clientY: e.clientY,
+      touches: e.touches
+    };
+    onMouseMove(newEvent);
+  }, [dragging, onMouseMove]);
+  var handleClick = function handleClick(e) {
+    if (dragging) return;
+    handleColor(e);
+  };
+  var handleMouseDown = function handleMouseDown() {
+    setDragging(true);
+  };
+  var handleCanvasDown = function handleCanvasDown(e) {
+    setDragging(true);
+    handleColor(e);
+  };
+  React.useEffect(function () {
+    var handleUp = function handleUp() {
+      stopDragging();
+    };
+    window.addEventListener('mouseup', handleUp);
+    window.addEventListener('mousemove', handleMove);
+    return function () {
+      window.removeEventListener('mouseup', handleUp);
+      window.removeEventListener('mousemove', handleMove);
+    };
+  }, [handleMove]);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      position: 'relative'
+    },
+    className: "aurora-cursor-pointer"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    ref: squareRef,
+    onMouseUp: stopDragging,
+    onTouchEnd: stopDragging,
+    onMouseDown: handleCanvasDown,
+    onTouchStart: handleCanvasDown,
+    style: {
+      position: 'relative',
+      cursor: 'ew-cross'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpHandle), {}, {
+      transform: "translate(".concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.x) || 0, "px, ").concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.y) || 0, "px)")
+    }, dragging ? {
+      transition: ''
+    } : {}), {}, {
+      width: 16,
+      height: 16
+    }),
+    onMouseDown: handleMouseDown
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.rbgcpCanvasWrapper), {}, {
+      height: squareHeight
+    }),
+    onClick: function onClick(e) {
+      return handleClick(e);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("canvas", {
+    ref: canvas,
+    id: "paintSquare",
+    width: "".concat(squareWidth, "px"),
+    height: "".concat(squareHeight, "px")
+  }))));
+};
+
+exports.Square = Square;
+//# sourceMappingURL=color_picker_square.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,2DAA+D;AACvF,wBAAwB,sFAA0F;AAClH,oBAAoB,wFAA4F;AAChH,sBAAsB,oFAAwF;AAC9G,6BAA6B,iGAAqG;AAClI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_shades.js

@@ -0,0 +1,100 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerShades = function ColorPickerShades() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    hslArr = _useColorPicker.hslArr,
+    setColor = _useColorPicker.setColor,
+    onPickShade = _useColorPicker.onPickShade;
+  var _useTranslation = useTranslation.useTranslation(),
+    _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  var _hslArr = _rollupPluginBabelHelpers.slicedToArray(hslArr, 2),
+    h = _hslArr[0],
+    s = _hslArr[1];
+  var shades = [{
+    h: h,
+    s: s,
+    l: 95
+  }, {
+    h: h,
+    s: s,
+    l: 90
+  }, {
+    h: h,
+    s: s,
+    l: 80
+  }, {
+    h: h,
+    s: s,
+    l: 70
+  }, {
+    h: h,
+    s: s,
+    l: 60
+  }, {
+    h: h,
+    s: s,
+    l: 50
+  }, {
+    h: h,
+    s: s,
+    l: 40
+  }, {
+    h: h,
+    s: s,
+    l: 30
+  }, {
+    h: h,
+    s: s,
+    l: 20
+  }, {
+    h: h,
+    s: s,
+    l: 10
+  }, {
+    h: h,
+    s: s,
+    l: 5
+  }];
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-pt-0.5"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text"
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "aurora-text-xs aurora-font-medium"
+  }, "".concat(t('Shades of color')))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-grid aurora-grid-cols-12 aurora-gap-1"
+  }, shades.map(function (shade, index) {
+    var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(shade);
+    var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
+    var handleOnClick = function handleOnClick() {
+      setColor(colorHex);
+      onPickShade === null || onPickShade === void 0 ? void 0 : onPickShade(colorHex);
+    };
+    return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
+      size: "small",
+      onClick: handleOnClick,
+      key: "".concat(shade, "-").concat(index),
+      color: colorHex,
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
+    });
+  })));
+};
+
+exports.ColorPickerShades = ColorPickerShades;
+//# sourceMappingURL=color_picker_shades.js.map

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

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