@dreamcommerce/aurora 2.16.2 → 2.16.4

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

@@ -0,0 +1,264 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var constants = require('../constants.js');
+var context = require('../context.js');
+var icon = require('./icon.js');
+var EyeDropper = require('./EyeDropper.js');
+var AdvancedControls = require('./AdvancedControls.js');
+var ComparibleColors = require('./ComparibleColors.js');
+var GradientControls = require('./GradientControls.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var defaultColor = constants.config.defaultColor,
+    defaultGradient = constants.config.defaultGradient;
+
+var Controls = function Controls(_ref) {
+  var locales = _ref.locales,
+      hideEyeDrop = _ref.hideEyeDrop,
+      hideAdvancedSliders = _ref.hideAdvancedSliders,
+      hideColorGuide = _ref.hideColorGuide,
+      hideInputType = _ref.hideInputType,
+      hideColorTypeBtns = _ref.hideColorTypeBtns,
+      hideGradientControls = _ref.hideGradientControls,
+      hideGradientType = _ref.hideGradientType,
+      hideGradientAngle = _ref.hideGradientAngle,
+      hideGradientStop = _ref.hideGradientStop;
+
+  var _usePicker = context.usePicker(),
+      onChange = _usePicker.onChange,
+      isGradient = _usePicker.isGradient,
+      handleChange = _usePicker.handleChange,
+      classes = _usePicker.classes,
+      previous = _usePicker.previous;
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      openComparibles = _useState2[0],
+      setOpenComparibles = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      openInputType = _useState4[0],
+      setOpenInputType = _useState4[1];
+
+  var _useState5 = React.useState(false),
+      _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+      openAdvanced = _useState6[0],
+      setOpenAdvanced = _useState6[1];
+
+  var noTools = hideEyeDrop && hideAdvancedSliders && hideColorGuide && hideInputType;
+  var solidColor = (previous === null || previous === void 0 ? void 0 : previous.color) || defaultColor;
+  var gradientColor = (previous === null || previous === void 0 ? void 0 : previous.gradient) || defaultGradient;
+
+  var setSolid = function setSolid() {
+    onChange(solidColor);
+  };
+
+  var setGradient = function setGradient() {
+    onChange(gradientColor);
+  };
+
+  var allRightControlsHidden = hideEyeDrop && hideAdvancedSliders && hideColorGuide && hideInputType;
+  var allControlsHidden = allRightControlsHidden && hideColorTypeBtns;
+
+  if (allControlsHidden) {
+    if (isGradient && !hideGradientControls) {
+      return /*#__PURE__*/React__default['default'].createElement(GradientControls['default'], {
+        hideGradientType: hideGradientType,
+        hideGradientAngle: hideGradientAngle,
+        hideGradientStop: hideGradientStop
+      });
+    } else {
+      return null;
+    }
+  } else {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      style: {
+        paddingTop: 12,
+        paddingBottom: 4
+      }
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      style: {
+        width: '100%'
+      },
+      className: "".concat(classes.ac, " ").concat(classes.jsb)
+    }, /*#__PURE__*/React__default['default'].createElement(ColorTypeBtns, {
+      hideColorTypeBtns: hideColorTypeBtns,
+      setGradient: setGradient,
+      isGradient: isGradient,
+      setSolid: setSolid,
+      locales: locales
+    }), !allRightControlsHidden && /*#__PURE__*/React__default['default'].createElement("div", {
+      style: {
+        display: noTools ? 'none' : ''
+      },
+      className: classes.rbgcpControlBtnWrapper
+    }, !hideEyeDrop && /*#__PURE__*/React__default['default'].createElement(EyeDropper['default'], {
+      onSelect: handleChange
+    }), /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "rbgcp-advanced-btn",
+      onClick: function onClick() {
+        return setOpenAdvanced(!openAdvanced);
+      },
+      className: controlBtnStyles(openAdvanced, classes),
+      style: {
+        display: hideAdvancedSliders ? 'none' : 'flex'
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(icon.SlidersIcon, {
+      color: openAdvanced ? '#568CF5' : ''
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "rbgcp-comparibles-btn",
+      style: {
+        display: hideColorGuide ? 'none' : 'flex'
+      },
+      onClick: function onClick() {
+        return setOpenComparibles(!openComparibles);
+      },
+      className: controlBtnStyles(openComparibles, classes)
+    }, /*#__PURE__*/React__default['default'].createElement(icon.PaletteIcon, {
+      color: openComparibles ? '#568CF5' : ''
+    })), /*#__PURE__*/React__default['default'].createElement("div", {
+      id: "rbgcp-color-model-btn",
+      onClick: function onClick() {
+        return setOpenInputType(!openInputType);
+      },
+      className: controlBtnStyles(openInputType, classes),
+      style: {
+        display: hideInputType ? 'none' : 'flex'
+      }
+    }, /*#__PURE__*/React__default['default'].createElement(icon.InputsIcon, {
+      color: openInputType ? '#568CF5' : ''
+    }), /*#__PURE__*/React__default['default'].createElement(InputTypeDropdown, {
+      openInputType: openInputType,
+      setOpenInputType: setOpenInputType
+    })))), !hideAdvancedSliders && /*#__PURE__*/React__default['default'].createElement(AdvancedControls['default'], {
+      openAdvanced: openAdvanced
+    }), !hideColorGuide && /*#__PURE__*/React__default['default'].createElement(ComparibleColors['default'], {
+      openComparibles: openComparibles
+    }), isGradient && !hideGradientControls && /*#__PURE__*/React__default['default'].createElement(GradientControls['default'], {
+      hideGradientType: hideGradientType,
+      hideGradientAngle: hideGradientAngle,
+      hideGradientStop: hideGradientStop
+    }));
+  }
+};
+
+var InputTypeDropdown = function InputTypeDropdown(_ref2) {
+  var openInputType = _ref2.openInputType,
+      setOpenInputType = _ref2.setOpenInputType;
+
+  var _usePicker2 = context.usePicker(),
+      inputType = _usePicker2.inputType,
+      setInputType = _usePicker2.setInputType,
+      classes = _usePicker2.classes;
+
+  var vTrans = openInputType ? 'visibility 0ms linear' : 'visibility 100ms linear 150ms';
+  var zTrans = openInputType ? 'z-index 0ms linear' : 'z-index 100ms linear 150ms';
+  var oTrans = openInputType ? 'opacity 120ms linear' : 'opacity 150ms linear 50ms';
+
+  var handleInputType = function handleInputType(e, val) {
+    if (openInputType) {
+      e.stopPropagation();
+      setInputType(val);
+      setOpenInputType(false);
+    }
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      visibility: openInputType ? 'visible' : 'hidden',
+      zIndex: openInputType ? '' : -100,
+      opacity: openInputType ? 1 : 0,
+      transition: "".concat(oTrans, ", ").concat(vTrans, ", ").concat(zTrans)
+    },
+    className: classes.rbgcpColorModelDropdown
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: function onClick(e) {
+      return handleInputType(e, 'rgb');
+    },
+    className: modalBtnStyles(inputType === 'rgb', classes)
+  }, "RGB"), /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: function onClick(e) {
+      return handleInputType(e, 'hsl');
+    },
+    className: modalBtnStyles(inputType === 'hsl', classes)
+  }, "HSL"), /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: function onClick(e) {
+      return handleInputType(e, 'hsv');
+    },
+    className: modalBtnStyles(inputType === 'hsv', classes)
+  }, "HSV"), /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: function onClick(e) {
+      return handleInputType(e, 'cmyk');
+    },
+    className: modalBtnStyles(inputType === 'cmyk', classes)
+  }, "CMYK"));
+};
+
+var ColorTypeBtns = function ColorTypeBtns(_ref3) {
+  var hideColorTypeBtns = _ref3.hideColorTypeBtns,
+      isGradient = _ref3.isGradient,
+      setSolid = _ref3.setSolid,
+      setGradient = _ref3.setGradient,
+      locales = _ref3.locales;
+
+  var _usePicker3 = context.usePicker(),
+      classes = _usePicker3.classes;
+
+  if (hideColorTypeBtns) {
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      style: {
+        width: 1
+      }
+    });
+  } else {
+    var _locales$CONTROLS, _locales$CONTROLS2;
+
+    return /*#__PURE__*/React__default['default'].createElement("div", {
+      className: classes.rbgcpControlBtnWrapper
+    }, /*#__PURE__*/React__default['default'].createElement("div", {
+      onClick: setSolid,
+      id: "rbgcp-solid-btn",
+      className: colorTypeBtnStyles(!isGradient, classes)
+    }, locales === null || locales === void 0 || (_locales$CONTROLS = locales.CONTROLS) === null || _locales$CONTROLS === void 0 ? void 0 : _locales$CONTROLS.SOLID), /*#__PURE__*/React__default['default'].createElement("div", {
+      onClick: setGradient,
+      id: "rbgcp-gradient-btn",
+      className: colorTypeBtnStyles(isGradient || false, classes)
+    }, locales === null || locales === void 0 || (_locales$CONTROLS2 = locales.CONTROLS) === null || _locales$CONTROLS2 === void 0 ? void 0 : _locales$CONTROLS2.GRADIENT));
+  }
+};
+
+var colorTypeBtnStyles = function colorTypeBtnStyles(selected, classes) {
+  if (selected) {
+    return "".concat(classes.rbgcpControlBtn, " ").concat(classes.rbgcpControlBtnSelected);
+  } else {
+    return classes.rbgcpControlBtn;
+  }
+};
+var controlBtnStyles = function controlBtnStyles(selected, classes) {
+  if (selected) {
+    return "".concat(classes.rbgcpControlIconBtn, " ").concat(classes.rbgcpControlBtnSelected);
+  } else {
+    return classes.rbgcpControlIconBtn;
+  }
+};
+var modalBtnStyles = function modalBtnStyles(selected, classes) {
+  if (selected) {
+    return "".concat(classes.rbgcpControlBtn, " ").concat(classes.rbgcpColorModelDropdownBtn, " ").concat(classes.rbgcpControlBtnSelected);
+  } else {
+    return "".concat(classes.rbgcpControlBtn, " ").concat(classes.rbgcpColorModelDropdownBtn);
+  }
+};
+
+exports.colorTypeBtnStyles = colorTypeBtnStyles;
+exports.controlBtnStyles = controlBtnStyles;
+exports.default = Controls;
+exports.modalBtnStyles = modalBtnStyles;
+//# sourceMappingURL=Controls.js.map

package/build/cjs/external/react-best-gradient-color-picker/dist/esm/components/Controls.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/EyeDropper.js

@@ -0,0 +1,159 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+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 Controls = require('./Controls.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var DropperIcon = function DropperIcon(_ref) {
+  var color = _ref.color;
+
+  var _usePicker = context.usePicker(),
+      classes = _usePicker.classes;
+
+  var col = color || '';
+  var style1 = {
+    fill: 'none',
+    stroke: col,
+    strokeWidth: '1.4px'
+  };
+  var style2 = {
+    fill: col,
+    stroke: col,
+    strokeWidth: '1.4px'
+  };
+  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", {
+    style: style1,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: classes.rbgcpControlIcon,
+    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", {
+    style: style2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: classes.rbgcpControlIcon2,
+    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", {
+    style: style2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: classes.rbgcpControlIcon2,
+    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(_ref2) {
+  var onSelect = _ref2.onSelect;
+
+  var _usePicker2 = context.usePicker(),
+      classes = _usePicker2.classes;
+
+  var _useState = React.useState(null),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      pickerCanvas = _useState2[0],
+      setPickerCanvas = _useState2[1];
+
+  var _useState3 = React.useState(false),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      coverUp = _useState4[0],
+      setCoverUp = _useState4[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 _pickerCanvas$getImag2 = _rollupPluginBabelHelpers.slicedToArray(pickerCanvas.getImageData(x1, y1, 1, 1).data, 3),
+          r = _pickerCanvas$getImag2[0],
+          g = _pickerCanvas$getImag2[1],
+          b = _pickerCanvas$getImag2[2];
+
+      onSelect("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 1)"));
+    }
+
+    setCoverUp(false);
+  };
+
+  var getEyeDrop = function getEyeDrop() {
+    // @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 _tinyHex$toRgb = tinyHex.toRgb(),
+            r = _tinyHex$toRgb.r,
+            g = _tinyHex$toRgb.g,
+            b = _tinyHex$toRgb.b;
+
+        onSelect("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", 1)"));
+      }).catch(function (e) {
+        console.log(e);
+      });
+    }
+  };
+
+  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement("div", {
+    onClick: getEyeDrop,
+    id: "rbgcp-eyedropper-btn",
+    className: "".concat(Controls.controlBtnStyles(coverUp, classes), " ").concat(classes.rbgcpEyedropperBtn)
+  }, /*#__PURE__*/React__default['default'].createElement(DropperIcon, {
+    color: coverUp ? '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);
+    },
+    className: classes.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;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;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,216 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+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 handleStyle = function handleStyle(isSelected) {
+  return {
+    boxShadow: isSelected ? '0px 0px 5px 1px rgba(86, 140, 245,.95)' : '',
+    border: isSelected ? '2px solid white' : '2px solid rgba(255,255,255,.75)'
+  };
+};
+
+var Handle = function Handle(_ref) {
+  var left = _ref.left,
+      i = _ref.i,
+      setDragging = _ref.setDragging,
+      setInFocus = _ref.setInFocus;
+
+  var _usePicker = context.usePicker(),
+      colors = _usePicker.colors,
+      selectedColor = _usePicker.selectedColor,
+      squareWidth = _usePicker.squareWidth,
+      classes = _usePicker.classes,
+      createGradientStr = _usePicker.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 _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, cc), {}, {
+        value: i === index ? formatters.high(cc) : formatters.low(cc)
+      });
+    });
+    createGradientStr(newGradStr);
+  };
+
+  var handleDown = function handleDown(e) {
+    e.stopPropagation();
+    setSelectedColor(i);
+    setDragging(true);
+  };
+
+  var handleFocus = function handleFocus() {
+    // setInFocus('gpoint')
+    setSelectedColor(i);
+  };
+
+  var handleBlur = function 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);
+    },
+    className: classes.rbgcpGradientHandleWrap,
+    style: {
+      left: (left || 0) * leftMultiplyer
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    style: handleStyle(isSelected),
+    className: classes.rbgcpGradientHandle
+  }, isSelected && /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      width: 5,
+      height: 5,
+      borderRadius: '50%',
+      background: 'white'
+    }
+  })));
+};
+
+var GradientBar = function GradientBar() {
+  var _usePicker2 = context.usePicker(),
+      currentColor = _usePicker2.currentColor,
+      createGradientStr = _usePicker2.createGradientStr,
+      colors = _usePicker2.colors,
+      value = _usePicker2.value,
+      handleGradient = _usePicker2.handleGradient,
+      squareWidth = _usePicker2.squareWidth,
+      deletePoint = _usePicker2.deletePoint,
+      isGradient = _usePicker2.isGradient,
+      selectedColor = _usePicker2.selectedColor;
+
+  var _useState = React.useState(false),
+      _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+      dragging = _useState2[0],
+      setDragging = _useState2[1];
+
+  var _useState3 = React.useState(null),
+      _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+      inFocus = _useState4[0],
+      setInFocus = _useState4[1];
+
+  function force90degLinear(color) {
+    return color.replace(/(radial|linear)-gradient\([^,]+,/, 'linear-gradient(90deg,');
+  }
+
+  var addPoint = function addPoint(e) {
+    var _ref2;
+
+    var left = utils.getHandleValue(e);
+    var newColors = (_ref2 = [].concat(_rollupPluginBabelHelpers.toConsumableArray(colors.map(function (c) {
+      return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, c), {}, {
+        value: formatters.low(c)
+      });
+    })), [{
+      value: currentColor,
+      left: left
+    }])) === null || _ref2 === void 0 ? void 0 : _ref2.sort(function (a, b) {
+      return a.left - b.left;
+    });
+    createGradientStr(newColors);
+  };
+
+  React.useEffect(function () {
+    var _window;
+
+    var selectedEl = (_window = window) === null || _window === void 0 || (_window = _window.document) === null || _window === void 0 ? void 0 : _window.getElementById("gradient-handle-".concat(selectedColor));
+
+    if (selectedEl) {
+      selectedEl.focus();
+    }
+  }, [selectedColor]);
+
+  var stopDragging = function stopDragging() {
+    setDragging(false);
+  };
+
+  var handleDown = function handleDown(e) {
+    if (!dragging) {
+      addPoint(e);
+      setDragging(true);
+    }
+  };
+
+  var handleMove = function handleMove(e) {
+    if (dragging) {
+      handleGradient(currentColor, utils.getHandleValue(e));
+    }
+  };
+
+  var handleKeyboard = function handleKeyboard(e) {
+    if (isGradient) {
+      if (e.keyCode === 8) {
+        if (inFocus === 'gpoint') {
+          deletePoint();
+        }
+      }
+    }
+  };
+
+  var handleUp = function handleUp() {
+    stopDragging();
+  };
+
+  React.useEffect(function () {
+    var _window2;
+
+    window.addEventListener('mouseup', handleUp);
+    (_window2 = window) === null || _window2 === void 0 || _window2.addEventListener('keydown', handleKeyboard);
+    return function () {
+      var _window3;
+
+      window.removeEventListener('mouseup', handleUp);
+      (_window3 = window) === null || _window3 === void 0 || _window3.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: {
+      width: squareWidth,
+      height: 14,
+      backgroundImage: force90degLinear(value),
+      borderRadius: 10
+    },
+    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),
+      setInFocus: setInFocus,
+      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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}