@dreamcommerce/aurora 3.0.0-53 → 3.0.0-55

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js

@@ -0,0 +1,152 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tinycolor = require('../../../external/tinycolor2/tinycolor.js');
+var context = require('../context.js');
+var Portal = require('./Portal.js');
+var html2canvas_esm = require('../../../../html2canvas/dist/html2canvas.esm.js');
+var styles = require('../styles/styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var DropperIcon = function DropperIcon(_a) {
+  var color = _a.color;
+  var defaultStyles = context.usePicker().defaultStyles;
+  var col = color || '';
+  return /*#__PURE__*/React__default['default'].createElement("svg", {
+    id: "Layer_1",
+    "data-name": "Layer 1",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 20 20",
+    style: {
+      width: 16
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: __assign(__assign({
+      fill: 'none',
+      strokeWidth: '1.4px'
+    }, defaultStyles.rbgcpControlIcon), col && {
+      stroke: col
+    }),
+    d: "M15.6,7h0L7.78,14.86c-.37.37-1.61.38-2,.75s-.5,1.53-.76,2a3.53,3.53,0,0,1-.52.52,1.6,1.6,0,0,1-2.27-.06l-.32-.32a1.61,1.61,0,0,1-.06-2.27A3.25,3.25,0,0,1,2.4,15c.47-.26,1.65-.35,2-.73s.34-1.64.71-2c1.68-1.73,5.61-5.65,7.91-7.93h0l1.14,1.38L15.6,7Z"
+  }), /*#__PURE__*/React__default['default'].createElement("polygon", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: __assign(__assign({
+      strokeWidth: '1.4px'
+    }, defaultStyles.rbgcpControlIcon2), col && {
+      stroke: col,
+      fill: col
+    }),
+    points: "15.7 8.87 11.13 4.29 12.69 2.73 17.25 7.31 15.7 8.87"
+  }), /*#__PURE__*/React__default['default'].createElement("path", {
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    style: __assign(__assign({
+      strokeWidth: '1.4px'
+    }, defaultStyles.rbgcpControlIcon2), col && {
+      stroke: col,
+      fill: col
+    }),
+    d: "M18.18,3.71,16.36,5.53a1.33,1.33,0,0,1-1.88,0h0a1.34,1.34,0,0,1,0-1.89l1.81-1.82a1.34,1.34,0,0,1,1.89,0h0A1.34,1.34,0,0,1,18.18,3.71Z"
+  }));
+};
+var Dropper = function Dropper(_a) {
+  var onSelect = _a.onSelect;
+  var defaultStyles = context.usePicker().defaultStyles;
+  var _b = React.useState(null),
+    pickerCanvas = _b[0],
+    setPickerCanvas = _b[1];
+  var _c = React.useState(false),
+    coverUp = _c[0],
+    setCoverUp = _c[1];
+  var _d = React.useState(false),
+    isPicking = _d[0],
+    setIsPicking = _d[1];
+  var takePick = function takePick() {
+    var root = document.getElementById('root');
+    setCoverUp(true);
+    // @ts-expect-error some error with this imported packages types
+    html2canvas_esm['default'](root).then(function (canvas) {
+      var blankCanvas = document.createElement('canvas');
+      var ctx = blankCanvas.getContext('2d', {
+        willReadFrequently: true
+      });
+      if (root && ctx) {
+        blankCanvas.width = root.offsetWidth * 2;
+        blankCanvas.height = root.offsetHeight * 2;
+        ctx.drawImage(canvas, 0, 0);
+      }
+      setPickerCanvas(ctx);
+    });
+  };
+  var getColorLegacy = function getColorLegacy(e) {
+    e.stopPropagation();
+    if (pickerCanvas) {
+      var pageX = e.pageX,
+        pageY = e.pageY;
+      var x1 = pageX * 2;
+      var y1 = pageY * 2;
+      var rgb = pickerCanvas.getImageData(x1, y1, 1, 1).data;
+      onSelect("rgba(".concat(rgb[0], ", ").concat(rgb[1], ", ").concat(rgb[2], ", 1)"));
+    }
+    setIsPicking(false);
+    setCoverUp(false);
+  };
+  var getEyeDrop = function getEyeDrop() {
+    setIsPicking(true);
+    // @ts-expect-error - ts does not evaluate for window.EyeDropper
+    if (!window.EyeDropper) {
+      takePick();
+    } else {
+      // @ts-expect-error - ts does not evaluate for window.EyeDropper
+      var eyeDropper = new window.EyeDropper();
+      var abortController = new window.AbortController();
+      eyeDropper.open({
+        signal: abortController.signal
+      }).then(function (result) {
+        var tinyHex = tinycolor['default'](result.sRGBHex);
+        var _a = tinyHex.toRgb(),
+          r = _a.r,
+          g = _a.g,
+          b = _a.b;
+        onSelect("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 1)"));
+        setIsPicking(false);
+      }).catch(function (e) {
+        console.log(e);
+        setIsPicking(false);
+      });
+    }
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: getEyeDrop,
+    id: "rbgcp-eyedropper-btn",
+    style: __assign(__assign({}, defaultStyles.rbgcpEyedropperBtn), styles.controlBtnStyles(coverUp, defaultStyles))
+  }, /*#__PURE__*/React__default['default'].createElement(DropperIcon, {
+    color: isPicking ? 'rgb(86, 140, 245)' : ''
+  })), coverUp && (/*#__PURE__*/React__default['default'].createElement(Portal['default'], null, /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: function onClick(e) {
+      return getColorLegacy(e);
+    },
+    style: defaultStyles.rbgcpEyedropperCover
+  }))));
+};
+
+exports.default = Dropper;
+//# sourceMappingURL=EyeDropper.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js.map

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

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientBar.js

@@ -0,0 +1,190 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var formatters = require('../utils/formatters.js');
+var utils = require('../utils/utils.js');
+var context = require('../context.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var __spreadArray = undefined && undefined.__spreadArray || function (to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+};
+var Handle = function Handle(_a) {
+  var left = _a.left,
+    i = _a.i,
+    setDragging = _a.setDragging;
+  var _b = context.usePicker(),
+    colors = _b.colors,
+    selectedColor = _b.selectedColor,
+    squareWidth = _b.squareWidth,
+    defaultStyles = _b.defaultStyles,
+    createGradientStr = _b.createGradientStr;
+  var isSelected = selectedColor === i;
+  var leftMultiplyer = (squareWidth - 18) / 100;
+  var setSelectedColor = function setSelectedColor(index) {
+    var newGradStr = colors === null || colors === void 0 ? void 0 : colors.map(function (cc, i) {
+      return __assign(__assign({}, cc), {
+        value: i === index ? formatters.high(cc) : formatters.low(cc)
+      });
+    });
+    createGradientStr(newGradStr);
+  };
+  var handleDown = function handleDown(e) {
+    e.stopPropagation();
+    setSelectedColor(i);
+    setDragging(true);
+  };
+  // const handleFocus = () => {
+  //   setInFocus('gpoint')
+  //   setSelectedColor(i)
+  // }
+  // const handleBlur = () => {
+  //   setInFocus(null)
+  // }
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    // tabIndex={0}
+    // onBlur={handleBlur}
+    // onFocus={handleFocus}
+    id: "gradient-handle-".concat(i),
+    onMouseDown: function onMouseDown(e) {
+      return handleDown(e);
+    },
+    style: __assign(__assign({}, defaultStyles.rbgcpGradientHandleWrap), {
+      left: (left || 0) * leftMultiplyer
+    })
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: __assign(__assign({}, defaultStyles.rbgcpGradientHandle), isSelected ? {
+      boxShadow: '0px 0px 5px 1px rgba(86, 140, 245,.95)',
+      border: '2px solid white'
+    } : {})
+  }, isSelected && (/*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: 5,
+      height: 5,
+      borderRadius: '50%',
+      background: 'white'
+    }
+  }))));
+};
+var GradientBar = function GradientBar() {
+  var _a = context.usePicker(),
+    currentColor = _a.currentColor,
+    createGradientStr = _a.createGradientStr,
+    colors = _a.colors,
+    value = _a.value,
+    handleGradient = _a.handleGradient,
+    squareWidth = _a.squareWidth;
+  var _b = React.useState(false),
+    dragging = _b[0],
+    setDragging = _b[1];
+  // const [inFocus, setInFocus] = useState<string | null>(null)
+  function force90degLinear(color) {
+    return color.replace(/(radial|linear)-gradient\([^,]+,/, 'linear-gradient(90deg,');
+  }
+  var addPoint = function addPoint(e) {
+    var _a;
+    var left = utils.getHandleValue(e);
+    var newColors = (_a = __spreadArray(__spreadArray([], colors.map(function (c) {
+      return __assign(__assign({}, c), {
+        value: formatters.low(c)
+      });
+    }), true), [{
+      value: currentColor,
+      left: left
+    }], false)) === null || _a === void 0 ? void 0 : _a.sort(function (a, b) {
+      return a.left - b.left;
+    });
+    createGradientStr(newColors);
+  };
+  // useEffect(() => {
+  //   const selectedEl = window?.document?.getElementById(
+  //     `gradient-handle-${selectedColor}`
+  //   )
+  //   if (selectedEl) selectedEl.focus()
+  // }, [selectedColor])
+  var stopDragging = function stopDragging() {
+    setDragging(false);
+  };
+  var handleDown = function handleDown(e) {
+    if (dragging) return;
+    addPoint(e);
+    setDragging(true);
+  };
+  var handleMove = function handleMove(e) {
+    if (dragging) handleGradient(currentColor, utils.getHandleValue(e));
+  };
+  // const handleKeyboard = (e: any) => {
+  //   if (isGradient) {
+  //     if (e.keyCode === 8) {
+  //       if (inFocus === 'gpoint') {
+  //         deletePoint()
+  //       }
+  //     }
+  //   }
+  // }
+  var handleUp = function handleUp() {
+    stopDragging();
+  };
+  React.useEffect(function () {
+    window.addEventListener('mouseup', handleUp);
+    // window?.addEventListener('keydown', handleKeyboard)
+    return function () {
+      window.removeEventListener('mouseup', handleUp);
+      // window?.removeEventListener('keydown', handleKeyboard)
+    };
+  });
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: '100%',
+      marginTop: 17,
+      marginBottom: 4,
+      position: 'relative'
+    },
+    id: "gradient-bar"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      height: 14,
+      borderRadius: 10,
+      width: squareWidth,
+      backgroundImage: force90degLinear(value)
+    },
+    onMouseDown: function onMouseDown(e) {
+      return handleDown(e);
+    },
+    onMouseMove: function onMouseMove(e) {
+      return handleMove(e);
+    }
+  }), colors === null || colors === void 0 ? void 0 : colors.map(function (c, i) {
+    return /*#__PURE__*/React__default['default'].createElement(Handle, {
+      i: i,
+      left: c.left,
+      key: "".concat(i, "-").concat(c),
+      setDragging: setDragging
+    });
+  }));
+};
+
+exports.Handle = Handle;
+exports.default = GradientBar;
+//# sourceMappingURL=GradientBar.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientBar.js.map

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

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientControls.js

@@ -0,0 +1,174 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var formatters = require('../utils/formatters.js');
+var context = require('../context.js');
+var icon = require('./icon.js');
+var styles = require('../styles/styles.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var GradientType = function GradientType() {
+  var _a = context.usePicker(),
+    gradientType = _a.gradientType,
+    onChange = _a.onChange,
+    value = _a.value,
+    defaultStyles = _a.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: __assign(__assign({}, 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: __assign(__assign({}, 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 _a = context.usePicker(),
+    currentLeft = _a.currentLeft,
+    handleGradient = _a.handleGradient,
+    currentColor = _a.currentColor,
+    defaultStyles = _a.defaultStyles;
+  var handleMove = function handleMove(newVal) {
+    handleGradient(currentColor, formatters.formatInputValues(parseInt(newVal), 0, 100));
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: __assign(__assign(__assign(__assign({}, 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: __assign(__assign({}, defaultStyles.rbgcpControlInput), defaultStyles.rbgcpStopInput)
+  }));
+};
+var DegreePicker = function DegreePicker() {
+  var _a = context.usePicker(),
+    degrees = _a.degrees,
+    onChange = _a.onChange,
+    value = _a.value,
+    defaultStyles = _a.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: __assign(__assign(__assign({}, 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: __assign(__assign({}, defaultStyles.rbgcpControlInput), defaultStyles.rbgcpDegreeInput)
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: __assign(__assign({}, defaultStyles.rbgcpDegreeIcon), {
+      position: 'absolute',
+      right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
+      top: 1,
+      fontWeight: 400,
+      fontSize: 13
+    })
+  }, "\xB0"));
+};
+var DeleteBtn = function DeleteBtn() {
+  var _a = context.usePicker(),
+    colors = _a.colors,
+    selectedColor = _a.selectedColor,
+    createGradientStr = _a.createGradientStr,
+    defaultStyles = _a.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 __assign(__assign({}, 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: __assign(__assign({}, styles.controlBtnStyles(false, defaultStyles)), {
+      width: 28
+    }),
+    id: "rbgcp-point-delete-btn",
+    tabIndex: 0,
+    role: "button",
+    onKeyDown: function onKeyDown() {
+      return;
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(icon['default'], null));
+};
+var GradientControls = function GradientControls(_a) {
+  var hideGradientType = _a.hideGradientType,
+    hideGradientAngle = _a.hideGradientAngle,
+    hideGradientStop = _a.hideGradientStop;
+  var _b = context.usePicker(),
+    gradientType = _b.gradientType,
+    defaultStyles = _b.defaultStyles;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: __assign(__assign({}, 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.default = GradientControls;
+//# sourceMappingURL=GradientControls.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/GradientControls.js.map

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

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/Hue.js

@@ -0,0 +1,122 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var tinycolor = require('../../../external/tinycolor2/tinycolor.js');
+var utils = require('../utils/utils.js');
+var context = require('../context.js');
+var usePaintHue = require('../hooks/usePaintHue.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var __assign = undefined && undefined.__assign || function () {
+  __assign = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return __assign.apply(this, arguments);
+};
+var Hue = function Hue() {
+  var barRef = React.useRef(null);
+  var _a = context.usePicker(),
+    handleChange = _a.handleChange,
+    squareWidth = _a.squareWidth,
+    hc = _a.hc,
+    setHc = _a.setHc;
+  var _b = React.useState(false),
+    dragging = _b[0],
+    setDragging = _b[1];
+  usePaintHue['default'](barRef, squareWidth);
+  var stopDragging = function stopDragging() {
+    setDragging(false);
+  };
+  var handleDown = function handleDown() {
+    setDragging(true);
+  };
+  var handleHue = function handleHue(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 _a = tinyHsv.toRgb(),
+      r = _a.r,
+      g = _a.g,
+      b = _a.b;
+    handleChange("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(hc.a, ")"));
+    setHc(__assign(__assign({}, hc), {
+      h: newHue
+    }));
+  };
+  var handleMove = function handleMove(e) {
+    if (dragging) {
+      handleHue(e);
+    }
+  };
+  var handleClick = function handleClick(e) {
+    if (!dragging) {
+      handleHue(e);
+    }
+  };
+  React.useEffect(function () {
+    var handleUp = function handleUp() {
+      stopDragging();
+    };
+    window.addEventListener('mouseup', handleUp);
+    return function () {
+      window.removeEventListener('mouseup', handleUp);
+    };
+  }, []);
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      height: 14,
+      marginTop: 17,
+      marginBottom: 4,
+      cursor: 'ew-resize',
+      position: 'relative'
+    },
+    onMouseMove: function onMouseMove(e) {
+      return handleMove(e);
+    }
+  }, /*#__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: '18px',
+      height: '18px',
+      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: "14px",
+    width: "".concat(squareWidth, "px"),
+    onClick: function onClick(e) {
+      return handleClick(e);
+    },
+    style: {
+      position: 'relative',
+      borderRadius: 14,
+      verticalAlign: 'top'
+    }
+  }));
+};
+
+exports.default = Hue;
+//# sourceMappingURL=Hue.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/Hue.js.map

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