@dreamcommerce/aurora 2.20.10-1 → 2.20.10

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

@@ -1,153 +1,49 @@
 import React, { useState } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { config } from '../constants.js';
 import { usePicker } from '../context.js';
 import { SlidersIcon, PaletteIcon, InputsIcon } from './icon.js';
-import { controlBtnStyles, colorTypeBtnStyles, modalBtnStyles } from '../styles/styles.js';
 import Dropper from './EyeDropper.js';
 import AdvancedControls from './AdvancedControls.js';
 import ComparibleColors from './ComparibleColors.js';
 import GradientControls from './GradientControls.js';
 
-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 defaultColor = config.defaultColor,
     defaultGradient = config.defaultGradient;
 
-var ColorTypeBtns = function ColorTypeBtns(_a) {
-  var _b, _c;
-
-  var hideColorTypeBtns = _a.hideColorTypeBtns,
-      isGradient = _a.isGradient,
-      setSolid = _a.setSolid,
-      setGradient = _a.setGradient,
-      locales = _a.locales;
-  var defaultStyles = usePicker().defaultStyles;
-
-  if (hideColorTypeBtns) {
-    return /*#__PURE__*/React.createElement("div", {
-      style: {
-        width: 1
-      }
-    });
-  } else {
-    return /*#__PURE__*/React.createElement("div", {
-      style: __assign({
-        display: 'flex',
-        alignItems: 'center'
-      }, defaultStyles.rbgcpControlBtnWrapper)
-    }, /*#__PURE__*/React.createElement("div", {
-      onClick: setSolid,
-      id: "rbgcp-solid-btn",
-      style: colorTypeBtnStyles(!isGradient, defaultStyles)
-    }, (_b = locales === null || locales === void 0 ? void 0 : locales.CONTROLS) === null || _b === void 0 ? void 0 : _b.SOLID), /*#__PURE__*/React.createElement("div", {
-      onClick: setGradient,
-      id: "rbgcp-gradient-btn",
-      style: colorTypeBtnStyles(isGradient || false, defaultStyles)
-    }, (_c = locales === null || locales === void 0 ? void 0 : locales.CONTROLS) === null || _c === void 0 ? void 0 : _c.GRADIENT));
-  }
-};
-
-var InputTypeDropdown = function InputTypeDropdown(_a) {
-  var openInputType = _a.openInputType,
-      setOpenInputType = _a.setOpenInputType;
-
-  var _b = usePicker(),
-      inputType = _b.inputType,
-      setInputType = _b.setInputType,
-      defaultStyles = _b.defaultStyles;
-
-  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.createElement("div", {
-    style: __assign({
-      visibility: openInputType ? 'visible' : 'hidden',
-      zIndex: openInputType ? '' : -100,
-      opacity: openInputType ? 1 : 0,
-      transition: "".concat(oTrans, ", ").concat(vTrans, ", ").concat(zTrans)
-    }, defaultStyles.rbgcpColorModelDropdown)
-  }, /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(e) {
-      return handleInputType(e, 'rgb');
-    },
-    style: modalBtnStyles(inputType === 'rgb', defaultStyles)
-  }, "RGB"), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(e) {
-      return handleInputType(e, 'hsl');
-    },
-    style: modalBtnStyles(inputType === 'hsl', defaultStyles)
-  }, "HSL"), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(e) {
-      return handleInputType(e, 'hsv');
-    },
-    style: modalBtnStyles(inputType === 'hsv', defaultStyles)
-  }, "HSV"), /*#__PURE__*/React.createElement("div", {
-    onClick: function onClick(e) {
-      return handleInputType(e, 'cmyk');
-    },
-    style: modalBtnStyles(inputType === 'cmyk', defaultStyles)
-  }, "CMYK"));
-};
-
-var Controls = function Controls(_a) {
-  var locales = _a.locales,
-      _b = _a.hideEyeDrop,
-      hideEyeDrop = _b === void 0 ? false : _b,
-      _c = _a.hideAdvancedSliders,
-      hideAdvancedSliders = _c === void 0 ? false : _c,
-      _d = _a.hideColorGuide,
-      hideColorGuide = _d === void 0 ? false : _d,
-      _e = _a.hideInputType,
-      hideInputType = _e === void 0 ? false : _e,
-      _f = _a.hideColorTypeBtns,
-      hideColorTypeBtns = _f === void 0 ? false : _f,
-      _g = _a.hideGradientControls,
-      hideGradientControls = _g === void 0 ? false : _g,
-      _h = _a.hideGradientType,
-      hideGradientType = _h === void 0 ? false : _h,
-      _j = _a.hideGradientAngle,
-      hideGradientAngle = _j === void 0 ? false : _j,
-      _k = _a.hideGradientStop,
-      hideGradientStop = _k === void 0 ? false : _k;
-
-  var _l = usePicker(),
-      onChange = _l.onChange,
-      isGradient = _l.isGradient,
-      handleChange = _l.handleChange,
-      previous = _l.previous,
-      defaultStyles = _l.defaultStyles;
-
-  var _m = useState(false),
-      openComparibles = _m[0],
-      setOpenComparibles = _m[1];
-
-  var _o = useState(false),
-      openInputType = _o[0],
-      setOpenInputType = _o[1];
-
-  var _p = useState(false),
-      openAdvanced = _p[0],
-      setOpenAdvanced = _p[1];
+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 = usePicker(),
+      onChange = _usePicker.onChange,
+      isGradient = _usePicker.isGradient,
+      handleChange = _usePicker.handleChange,
+      classes = _usePicker.classes,
+      previous = _usePicker.previous;
+
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      openComparibles = _useState2[0],
+      setOpenComparibles = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      openInputType = _useState4[0],
+      setOpenInputType = _useState4[1];
+
+  var _useState5 = useState(false),
+      _useState6 = _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;
@@ -182,11 +78,9 @@ var Controls = function Controls(_a) {
       }
     }, /*#__PURE__*/React.createElement("div", {
       style: {
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'space-between'
-      }
+        width: '100%'
+      },
+      className: "".concat(classes.ac, " ").concat(classes.jsb)
     }, /*#__PURE__*/React.createElement(ColorTypeBtns, {
       hideColorTypeBtns: hideColorTypeBtns,
       setGradient: setGradient,
@@ -194,9 +88,10 @@ var Controls = function Controls(_a) {
       setSolid: setSolid,
       locales: locales
     }), !allRightControlsHidden && /*#__PURE__*/React.createElement("div", {
-      style: __assign({
+      style: {
         display: noTools ? 'none' : ''
-      }, defaultStyles.rbgcpControlBtnWrapper)
+      },
+      className: classes.rbgcpControlBtnWrapper
     }, !hideEyeDrop && /*#__PURE__*/React.createElement(Dropper, {
       onSelect: handleChange
     }), /*#__PURE__*/React.createElement("div", {
@@ -204,19 +99,21 @@ var Controls = function Controls(_a) {
       onClick: function onClick() {
         return setOpenAdvanced(!openAdvanced);
       },
-      style: __assign({
+      className: controlBtnStyles(openAdvanced, classes),
+      style: {
         display: hideAdvancedSliders ? 'none' : 'flex'
-      }, controlBtnStyles(openAdvanced, defaultStyles))
+      }
     }, /*#__PURE__*/React.createElement(SlidersIcon, {
       color: openAdvanced ? '#568CF5' : ''
     })), /*#__PURE__*/React.createElement("div", {
       id: "rbgcp-comparibles-btn",
-      style: __assign({
+      style: {
         display: hideColorGuide ? 'none' : 'flex'
-      }, controlBtnStyles(openComparibles, defaultStyles)),
+      },
       onClick: function onClick() {
         return setOpenComparibles(!openComparibles);
-      }
+      },
+      className: controlBtnStyles(openComparibles, classes)
     }, /*#__PURE__*/React.createElement(PaletteIcon, {
       color: openComparibles ? '#568CF5' : ''
     })), /*#__PURE__*/React.createElement("div", {
@@ -224,9 +121,10 @@ var Controls = function Controls(_a) {
       onClick: function onClick() {
         return setOpenInputType(!openInputType);
       },
-      style: __assign({
+      className: controlBtnStyles(openInputType, classes),
+      style: {
         display: hideInputType ? 'none' : 'flex'
-      }, controlBtnStyles(openInputType, defaultStyles))
+      }
     }, /*#__PURE__*/React.createElement(InputsIcon, {
       color: openInputType ? '#568CF5' : ''
     }), /*#__PURE__*/React.createElement(InputTypeDropdown, {
@@ -244,5 +142,113 @@ var Controls = function Controls(_a) {
   }
 };
 
+var InputTypeDropdown = function InputTypeDropdown(_ref2) {
+  var openInputType = _ref2.openInputType,
+      setOpenInputType = _ref2.setOpenInputType;
+
+  var _usePicker2 = 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.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.createElement("div", {
+    onClick: function onClick(e) {
+      return handleInputType(e, 'rgb');
+    },
+    className: modalBtnStyles(inputType === 'rgb', classes)
+  }, "RGB"), /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return handleInputType(e, 'hsl');
+    },
+    className: modalBtnStyles(inputType === 'hsl', classes)
+  }, "HSL"), /*#__PURE__*/React.createElement("div", {
+    onClick: function onClick(e) {
+      return handleInputType(e, 'hsv');
+    },
+    className: modalBtnStyles(inputType === 'hsv', classes)
+  }, "HSV"), /*#__PURE__*/React.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 = usePicker(),
+      classes = _usePicker3.classes;
+
+  if (hideColorTypeBtns) {
+    return /*#__PURE__*/React.createElement("div", {
+      style: {
+        width: 1
+      }
+    });
+  } else {
+    var _locales$CONTROLS, _locales$CONTROLS2;
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: classes.rbgcpControlBtnWrapper
+    }, /*#__PURE__*/React.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.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);
+  }
+};
+
 export default Controls;
+export { colorTypeBtnStyles, controlBtnStyles, modalBtnStyles };
 //# sourceMappingURL=Controls.js.map

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

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

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

@@ -1,28 +1,28 @@
 import React, { useState } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import tinycolor from '../../../external/tinycolor2/tinycolor.js';
 import { usePicker } from '../context.js';
 import Portal from './Portal.js';
 import html2canvas from '../../../../html2canvas/dist/html2canvas.esm.js';
-import { controlBtnStyles } from '../styles/styles.js';
+import { controlBtnStyles } from './Controls.js';
 
-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];
+var DropperIcon = function DropperIcon(_ref) {
+  var color = _ref.color;
 
-      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-    }
-
-    return t;
-  };
-
-  return __assign.apply(this, arguments);
-};
+  var _usePicker = usePicker(),
+      classes = _usePicker.classes;
 
-var DropperIcon = function DropperIcon(_a) {
-  var color = _a.color;
-  var defaultStyles = usePicker().defaultStyles;
   var col = color || '';
+  var style1 = {
+    fill: 'none',
+    stroke: col,
+    strokeWidth: '1.4px'
+  };
+  var style2 = {
+    fill: col,
+    stroke: col,
+    strokeWidth: '1.4px'
+  };
   return /*#__PURE__*/React.createElement("svg", {
     id: "Layer_1",
     "data-name": "Layer 1",
@@ -32,53 +32,41 @@ var DropperIcon = function DropperIcon(_a) {
       width: 16
     }
   }, /*#__PURE__*/React.createElement("path", {
+    style: style1,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    style: __assign(__assign({
-      fill: 'none',
-      strokeWidth: '1.4px'
-    }, defaultStyles.rbgcpControlIcon), col && {
-      stroke: col
-    }),
+    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.createElement("polygon", {
+    style: style2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    style: __assign(__assign({
-      strokeWidth: '1.4px'
-    }, defaultStyles.rbgcpControlIcon2), col && {
-      stroke: col,
-      fill: col
-    }),
+    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.createElement("path", {
+    style: style2,
     strokeLinecap: "round",
     strokeLinejoin: "round",
-    style: __assign(__assign({
-      strokeWidth: '1.4px'
-    }, defaultStyles.rbgcpControlIcon2), col && {
-      stroke: col,
-      fill: col
-    }),
+    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(_a) {
-  var onSelect = _a.onSelect;
-  var defaultStyles = usePicker().defaultStyles;
+var Dropper = function Dropper(_ref2) {
+  var onSelect = _ref2.onSelect;
 
-  var _b = useState(null),
-      pickerCanvas = _b[0],
-      setPickerCanvas = _b[1];
+  var _usePicker2 = usePicker(),
+      classes = _usePicker2.classes;
 
-  var _c = useState(false),
-      coverUp = _c[0],
-      setCoverUp = _c[1];
+  var _useState = useState(null),
+      _useState2 = _slicedToArray(_useState, 2),
+      pickerCanvas = _useState2[0],
+      setPickerCanvas = _useState2[1];
 
-  var _d = useState(false),
-      isPicking = _d[0],
-      setIsPicking = _d[1];
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      coverUp = _useState4[0],
+      setCoverUp = _useState4[1];
 
   var takePick = function takePick() {
     var root = document.getElementById('root');
@@ -108,17 +96,20 @@ var Dropper = function Dropper(_a) {
           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)"));
+
+      var _pickerCanvas$getImag2 = _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)"));
     }
 
-    setIsPicking(false);
     setCoverUp(false);
   };
 
   var getEyeDrop = function getEyeDrop() {
-    setIsPicking(true); // @ts-expect-error - ts does not evaluate for window.EyeDropper
-
+    // @ts-expect-error - ts does not evaluate for window.EyeDropper
     if (!window.EyeDropper) {
       takePick();
     } else {
@@ -130,16 +121,14 @@ var Dropper = function Dropper(_a) {
       }).then(function (result) {
         var tinyHex = tinycolor(result.sRGBHex);
 
-        var _a = tinyHex.toRgb(),
-            r = _a.r,
-            g = _a.g,
-            b = _a.b;
+        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)"));
-        setIsPicking(false);
       }).catch(function (e) {
         console.log(e);
-        setIsPicking(false);
       });
     }
   };
@@ -147,14 +136,14 @@ var Dropper = function Dropper(_a) {
   return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
     onClick: getEyeDrop,
     id: "rbgcp-eyedropper-btn",
-    style: __assign(__assign({}, defaultStyles.rbgcpEyedropperBtn), controlBtnStyles(coverUp, defaultStyles))
+    className: "".concat(controlBtnStyles(coverUp, classes), " ").concat(classes.rbgcpEyedropperBtn)
   }, /*#__PURE__*/React.createElement(DropperIcon, {
-    color: isPicking ? 'rgb(86, 140, 245)' : ''
+    color: coverUp ? 'rgb(86, 140, 245)' : ''
   })), coverUp && /*#__PURE__*/React.createElement(Portal, null, /*#__PURE__*/React.createElement("div", {
     onClick: function onClick(e) {
       return getColorLegacy(e);
     },
-    style: defaultStyles.rbgcpEyedropperCover
+    className: classes.rbgcpEyedropperCover
   })));
 };
 

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

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