@dreamcommerce/aurora 2.16.2 → 2.16.3

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

@@ -0,0 +1,149 @@
+import React, { useState, useEffect, createContext, useContext } from 'react';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../external/tinycolor2/tinycolor.js';
+import { getColors, high, low } from './utils/formatters.js';
+import { getDetails, getColorObj, isUpperCase } from './utils/utils.js';
+
+var PickerContext = /*#__PURE__*/createContext(null);
+function PickerContextWrapper(_ref) {
+  var value = _ref.value,
+      classes = _ref.classes,
+      children = _ref.children,
+      onChange = _ref.onChange,
+      squareWidth = _ref.squareWidth,
+      hideOpacity = _ref.hideOpacity,
+      squareHeight = _ref.squareHeight;
+  var colors = getColors(value);
+
+  var _getDetails = getDetails(value),
+      degrees = _getDetails.degrees,
+      degreeStr = _getDetails.degreeStr,
+      isGradient = _getDetails.isGradient,
+      gradientType = _getDetails.gradientType;
+
+  var _getColorObj = getColorObj(colors),
+      currentColor = _getColorObj.currentColor,
+      selectedColor = _getColorObj.selectedColor,
+      currentLeft = _getColorObj.currentLeft;
+
+  var _useState = useState('rgb'),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputType = _useState2[0],
+      setInputType = _useState2[1];
+
+  var _useState3 = useState({}),
+      _useState4 = _slicedToArray(_useState3, 2),
+      previous = _useState4[0],
+      setPrevious = _useState4[1];
+
+  var tinyColor = tinycolor(currentColor);
+  var rgba = tinyColor.toRgb();
+  var hsv = tinyColor.toHsv();
+
+  var _useState5 = useState(_objectSpread2(_objectSpread2({}, rgba), hsv)),
+      _useState6 = _slicedToArray(_useState5, 2),
+      hc = _useState6[0],
+      setHc = _useState6[1];
+
+  useEffect(function () {
+    if ((hsv === null || hsv === void 0 ? void 0 : hsv.s) === 0) {
+      setHc(_objectSpread2(_objectSpread2(_objectSpread2({}, rgba), hsv), {}, {
+        h: hc === null || hc === void 0 ? void 0 : hc.h
+      }));
+    } else {
+      setHc(_objectSpread2(_objectSpread2({}, rgba), hsv));
+    }
+  }, [currentColor]);
+
+  var createGradientStr = function createGradientStr(newColors) {
+    var sorted = newColors.sort(function (a, b) {
+      return a.left - b.left;
+    });
+    var colorString = sorted === null || sorted === void 0 ? void 0 : sorted.map(function (cc) {
+      return "".concat(cc === null || cc === void 0 ? void 0 : cc.value, " ").concat(cc.left, "%");
+    });
+    var newGrade = "".concat(gradientType, "(").concat(degreeStr, ", ").concat(colorString.join(', '), ")");
+    setPrevious(_objectSpread2(_objectSpread2({}, previous), {}, {
+      gradient: newGrade
+    }));
+    onChange(newGrade);
+  };
+
+  var handleGradient = function handleGradient(newColor, left) {
+    var remaining = colors === null || colors === void 0 ? void 0 : colors.filter(function (c) {
+      return !isUpperCase(c.value);
+    });
+    var newColors = [{
+      value: newColor.toUpperCase(),
+      left: left || currentLeft
+    }].concat(_toConsumableArray(remaining));
+    createGradientStr(newColors);
+  };
+
+  var handleChange = function handleChange(newColor) {
+    if (isGradient) {
+      handleGradient(newColor);
+    } else {
+      setPrevious(_objectSpread2(_objectSpread2({}, previous), {}, {
+        color: newColor
+      }));
+      onChange(newColor);
+    }
+  };
+
+  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 _objectSpread2(_objectSpread2({}, fc), {}, {
+          value: i === selectedColor - 1 ? high(fc) : low(fc)
+        });
+      });
+      var remaining = formatted === null || formatted === void 0 ? void 0 : formatted.filter(function (_, i) {
+        return i !== selectedColor;
+      });
+      createGradientStr(remaining);
+    }
+  };
+
+  var pickerContext = {
+    hc: hc,
+    setHc: setHc,
+    value: value,
+    colors: colors,
+    degrees: degrees,
+    classes: classes,
+    onChange: onChange,
+    previous: previous,
+    inputType: inputType,
+    tinyColor: tinyColor,
+    isGradient: isGradient,
+    squareWidth: squareWidth,
+    hideOpacity: hideOpacity,
+    currentLeft: currentLeft,
+    deletePoint: deletePoint,
+    squareHeight: squareHeight,
+    setInputType: setInputType,
+    gradientType: gradientType,
+    handleChange: handleChange,
+    currentColor: currentColor,
+    selectedColor: selectedColor,
+    handleGradient: handleGradient,
+    createGradientStr: createGradientStr
+  };
+  return /*#__PURE__*/React.createElement(PickerContext.Provider, {
+    value: pickerContext
+  }, children);
+}
+function usePicker() {
+  var pickerContext = useContext(PickerContext);
+
+  if (!pickerContext) {
+    throw new Error('usePicker has to be used within <PickerContext.Provider>');
+  }
+
+  return pickerContext;
+}
+
+export default PickerContextWrapper;
+export { usePicker };
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA,sBAAsB,wCAA4C;AAClE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/core.module.css.js

@@ -0,0 +1,8 @@
+import styleInject from '../../../style-inject/dist/style-inject.es.js';
+
+var css_248z = "/* coreCss */\n/* body {\n  box-sizing: border-box;\n} */\n\n.core-module_ac__37gse {\n  display: flex;\n  align-items: center;\n}\n\n.core-module_jc__3E6-q {\n  display: flex;\n  justify-content: center;\n}\n\n.core-module_jsb__1jdaj {\n  display: flex;\n  justify-content: space-between;\n}\n\n.core-module_psRl__2LDR1 {\n  position: relative;\n}\n\n.core-module_cResize__2ZFf5 {\n  cursor: ew-resize;\n}\n\n.core-module_cCross__1nX16 {\n  cursor: crosshair;\n}\n\n.core-module_rbgcpControlBtn__1SRcA {\n  padding-left: 8px;\n  padding-right: 8px;\n  line-height: 1;\n  border-radius: 4px;\n  font-weight: 700;\n  font-size: 12px;\n  height: 24px;\n  transition: all 160ms ease;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  background: rgba(255, 255, 255, 0);\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0);\n  color: rgb(86, 86, 86);\n  box-sizing: border-box;\n}\n\n.core-module_rbgcpControlIcon__3qRB_ {\n  stroke: rgb(50, 49, 54);\n}\n\n.core-module_rbgcpControlIconBtn__2fRDy {\n  width: 30px;\n  height: 24px;\n  border-radius: 4px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.core-module_rbgcpControlBtnWrapper__2D0CM {\n  height: 28px;\n  background: #e9e9f5;\n  border-radius: 6px;\n  padding: 2px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  box-sizing: border-box;\n}\n\n.core-module_rbgcpColorModelDropdown__1jpJ7 {\n  position: absolute;\n  right: -2px;\n  top: 34px;\n  padding: 5px;\n  background: #e9e9f5;\n  z-index: 100000000;\n  border-radius: 6px;\n  box-shadow: 1px 1px 14px 1px rgba(0, 0, 0, 0.25);\n}\n\n/* coreCss (continuazione) */\n.core-module_rbgcpEyedropperCover__3DsLX {\n  position: fixed;\n  left: 0px;\n  top: 0px;\n  z-index: 100000000;\n  width: 100vw;\n  height: 100vh;\n  cursor: copy;\n}\n\n.core-module_rbgcpControlInput__1HtU0 {\n  height: 24px;\n  border-radius: 4px;\n  border: none;\n  outline: none;\n  text-align: center;\n  width: 34px;\n  font-weight: 500;\n  color: rgb(50, 49, 54);\n  font-size: 13px;\n  background: transparent;\n  box-sizing: border-box;\n}\n\n.core-module_rbgcpInputLabel__PM2t0 {\n  text-align: center;\n  line-height: 1.2;\n  font-weight: 700;\n  color: rgb(86, 86, 86);\n  font-size: 11px;\n}\n\n.core-module_rbgcpInput__A5enE {\n  height: 32px;\n  border-radius: 6px;\n  border: 1px solid #bebebe;\n  width: 100%;\n  padding: 2px;\n  outline: none;\n  color: black;\n  font-weight: 400;\n  text-align: center;\n  box-sizing: border-box;\n}\n\n.core-module_rbgcpHandle__2hfny {\n  position: absolute;\n  border: 2px solid white;\n  border-radius: 50%;\n  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);\n  width: 18px;\n  height: 18px;\n  z-index: 1000;\n  transition: all 10ms linear;\n  box-sizing: border-box;\n}\n\n.core-module_rbgcpCanvasWrapper__138_2 {\n  border-radius: 6px;\n  overflow: hidden;\n  height: 294px;\n}\n\n.core-module_rbgcpCheckered__Zj2xQ {\n  background: linear-gradient(\n      45deg,\n      rgba(0, 0, 0, 0.18) 25%,\n      transparent 25%,\n      transparent 75%,\n      rgba(0, 0, 0, 0.18) 75%,\n      rgba(0, 0, 0, 0.18) 0\n    ),\n    linear-gradient(\n      45deg,\n      rgba(0, 0, 0, 0.18) 25%,\n      transparent 25%,\n      transparent 75%,\n      rgba(0, 0, 0, 0.18) 75%,\n      rgba(0, 0, 0, 0.18) 0\n    ),\n    white;\n  background-repeat: repeat, repeat;\n  background-position:\n    0px 0,\n    7px 7px;\n  transform-origin: 0 0 0;\n  background-origin: padding-box, padding-box;\n  background-clip: border-box, border-box;\n  background-size:\n    14px 14px,\n    14px 14px;\n  box-shadow: none;\n  text-shadow: none;\n  transition: none;\n  transform: scaleX(1) scaleY(1) scaleZ(1);\n  border-radius: 10px;\n}\n\n.core-module_rbgcpOpacityOverlay__3wzNT {\n  position: absolute;\n  left: 0px;\n  top: 0px;\n  width: 100%;\n  height: 100%;\n  border-radius: 10px;\n}\n\n.core-module_rbgcpGradientHandleWrap__2uFkJ {\n  position: absolute;\n  z-index: 10000;\n  top: -2px;\n  outline: none;\n}\n\n.core-module_rbgcpGradientHandle__28d4H {\n  border: 2px solid white;\n  border-radius: 50%;\n  box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5);\n  width: 18px;\n  height: 18px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n}\n\n.core-module_rbgcpControlIcon2__8p892 {\n  fill: #323136;\n}\n\n.core-module_rbgcpControlBtnSelected__1uBZ6 {\n  background: white;\n  color: #568cf5;\n  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);\n}\n\n.core-module_rbgcpComparibleLabel__LjS5G {\n  color: #323136;\n}\n\n@media (prefers-color-scheme: dark) {\n  .core-module_rbgcpInputLabel__PM2t0 {\n    color: rgb(212, 212, 212);\n  }\n  .core-module_rbgcpControlBtnWrapper__2D0CM {\n    background: rgb(54, 54, 54);\n  }\n  .core-module_rbgcpInput__A5enE {\n    border: none;\n    color: white;\n    background: rgb(54, 54, 54);\n  }\n  .core-module_rbgcpControlBtn__1SRcA {\n    color: rgb(212, 212, 212);\n  }\n  .core-module_rbgcpControlIcon__3qRB_ {\n    stroke: rgb(212, 212, 212);\n  }\n  .core-module_rbgcpControlIcon2__8p892 {\n    fill: rgb(212, 212, 212);\n  }\n  .core-module_rbgcpControlInput__1HtU0 {\n    color: white;\n  }\n  .core-module_rbgcpControlBtnSelected__1uBZ6 {\n    background: black;\n    color: #568cf5;\n  }\n  .core-module_rbgcpDegreeIcon__1ohsU {\n    color: rgb(212, 212, 212);\n  }\n  .core-module_rbgcpColorModelDropdown__1jpJ7 {\n    background: rgb(32, 32, 32);\n  }\n  .core-module_rbgcpComparibleLabel__LjS5G {\n    color: rgb(212, 212, 212);\n  }\n}\n";
+var coreCss = {"ac":"core-module_ac__37gse","jc":"core-module_jc__3E6-q","jsb":"core-module_jsb__1jdaj","psRl":"core-module_psRl__2LDR1","cResize":"core-module_cResize__2ZFf5","cCross":"core-module_cCross__1nX16","rbgcpControlBtn":"core-module_rbgcpControlBtn__1SRcA","rbgcpControlIcon":"core-module_rbgcpControlIcon__3qRB_","rbgcpControlIconBtn":"core-module_rbgcpControlIconBtn__2fRDy","rbgcpControlBtnWrapper":"core-module_rbgcpControlBtnWrapper__2D0CM","rbgcpColorModelDropdown":"core-module_rbgcpColorModelDropdown__1jpJ7","rbgcpEyedropperCover":"core-module_rbgcpEyedropperCover__3DsLX","rbgcpControlInput":"core-module_rbgcpControlInput__1HtU0","rbgcpInputLabel":"core-module_rbgcpInputLabel__PM2t0","rbgcpInput":"core-module_rbgcpInput__A5enE","rbgcpHandle":"core-module_rbgcpHandle__2hfny","rbgcpCanvasWrapper":"core-module_rbgcpCanvasWrapper__138_2","rbgcpCheckered":"core-module_rbgcpCheckered__Zj2xQ","rbgcpOpacityOverlay":"core-module_rbgcpOpacityOverlay__3wzNT","rbgcpGradientHandleWrap":"core-module_rbgcpGradientHandleWrap__2uFkJ","rbgcpGradientHandle":"core-module_rbgcpGradientHandle__28d4H","rbgcpControlIcon2":"core-module_rbgcpControlIcon2__8p892","rbgcpControlBtnSelected":"core-module_rbgcpControlBtnSelected__1uBZ6","rbgcpComparibleLabel":"core-module_rbgcpComparibleLabel__LjS5G","rbgcpDegreeIcon":"core-module_rbgcpDegreeIcon__1ohsU"};
+styleInject(css_248z);
+
+export default coreCss;
+//# sourceMappingURL=core.module.css.js.map

package/build/esm/external/react-best-gradient-color-picker/dist/esm/core.module.css.js.map

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

package/build/esm/external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js

@@ -0,0 +1,324 @@
+import { useState, useEffect } from 'react';
+import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { config } from '../constants.js';
+import tinycolor from '../../../external/tinycolor2/tinycolor.js';
+import { getColors, formatInputValues, high, low } from '../utils/formatters.js';
+import { getDetails, getColorObj, isUpperCase } from '../utils/utils.js';
+import { rgb2cmyk } from '../utils/converters.js';
+
+var defaultColor = config.defaultColor,
+    defaultGradient = config.defaultGradient;
+var useColorPicker = function useColorPicker(value, onChange) {
+  var colors = getColors(value);
+
+  var _getDetails = getDetails(value),
+      degrees = _getDetails.degrees,
+      degreeStr = _getDetails.degreeStr,
+      isGradient = _getDetails.isGradient,
+      gradientType = _getDetails.gradientType;
+
+  var _getColorObj = getColorObj(colors),
+      currentColor = _getColorObj.currentColor,
+      selectedColor = _getColorObj.selectedColor,
+      currentLeft = _getColorObj.currentLeft;
+
+  var _useState = useState([]),
+      _useState2 = _slicedToArray(_useState, 2),
+      previousColors = _useState2[0],
+      setPreviousColors = _useState2[1];
+
+  var getGradientObject = function getGradientObject() {
+    if (value) {
+      if (isGradient) {
+        return {
+          isGradient: true,
+          gradientType: gradientType,
+          degrees: degreeStr,
+          colors: colors === null || colors === void 0 ? void 0 : colors.map(function (c) {
+            var _c$value;
+
+            return _objectSpread2(_objectSpread2({}, c), {}, {
+              value: (_c$value = c.value) === null || _c$value === void 0 ? void 0 : _c$value.toLowerCase()
+            });
+          })
+        };
+      } else {
+        return {
+          isGradient: false,
+          gradientType: null,
+          degrees: null,
+          colors: colors === null || colors === void 0 ? void 0 : colors.map(function (c) {
+            var _c$value2;
+
+            return _objectSpread2(_objectSpread2({}, c), {}, {
+              value: (_c$value2 = c.value) === null || _c$value2 === void 0 ? void 0 : _c$value2.toLowerCase()
+            });
+          })
+        };
+      }
+    } else {
+      console.log('RBGCP ERROR - YOU MUST PASS A VALUE AND CALLBACK TO THE useColorPicker HOOK');
+    }
+  };
+
+  var tiny = tinycolor(currentColor);
+
+  var _tiny$toRgb = tiny.toRgb(),
+      r = _tiny$toRgb.r,
+      g = _tiny$toRgb.g,
+      b = _tiny$toRgb.b,
+      a = _tiny$toRgb.a;
+
+  var _tiny$toHsl = tiny.toHsl(),
+      h = _tiny$toHsl.h,
+      s = _tiny$toHsl.s,
+      l = _tiny$toHsl.l;
+
+  useEffect(function () {
+    var _tc;
+
+    if ((_tc = tinycolor(currentColor)) !== null && _tc !== void 0 && _tc.isValid() && previousColors[0] !== currentColor) {
+      // @ts-expect-error - currentColor type issue
+      setPreviousColors([currentColor].concat(_toConsumableArray(previousColors.slice(0, 19))));
+    }
+  }, [currentColor, previousColors]);
+
+  var setLinear = function setLinear() {
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("linear-gradient(90deg, ".concat(remaining));
+  };
+
+  var setRadial = function setRadial() {
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("radial-gradient(circle, ".concat(remaining));
+  };
+
+  var setDegrees = function setDegrees(newDegrees) {
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("linear-gradient(".concat(formatInputValues(newDegrees, 0, 360), "deg, ").concat(remaining));
+
+    if (gradientType !== 'linear-gradient') {
+      console.log('Warning: you are updating degrees when the gradient type is not linear. This will change the gradients type which may be undesired');
+    }
+  };
+
+  var setSolid = function setSolid(startingColor) {
+    var newValue = startingColor || defaultColor;
+    onChange(newValue);
+  };
+
+  var setGradient = function setGradient(startingGradiant) {
+    var newValue = startingGradiant || defaultGradient;
+    onChange(newValue);
+  };
+
+  var createGradientStr = function createGradientStr(newColors) {
+    var sorted = newColors.sort(function (a, b) {
+      return a.left - b.left;
+    });
+    var colorString = sorted === null || sorted === void 0 ? void 0 : sorted.map(function (cc) {
+      return "".concat(cc === null || cc === void 0 ? void 0 : cc.value, " ").concat(cc.left, "%");
+    });
+    onChange("".concat(gradientType, "(").concat(degreeStr, ", ").concat(colorString.join(', '), ")"));
+  };
+
+  var handleGradient = function handleGradient(newColor, left) {
+    var remaining = colors === null || colors === void 0 ? void 0 : colors.filter(function (c) {
+      return !isUpperCase(c.value);
+    });
+    var newColors = [{
+      value: newColor.toUpperCase(),
+      left: left || currentLeft
+    }].concat(_toConsumableArray(remaining));
+    createGradientStr(newColors);
+  };
+
+  var handleChange = function handleChange(newColor) {
+    if (isGradient) {
+      handleGradient(newColor);
+    } else {
+      onChange(newColor);
+    }
+  };
+
+  var setR = function setR(newR) {
+    var newVal = formatInputValues(newR, 0, 255);
+    handleChange("rgba(".concat(newVal, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")"));
+  };
+
+  var setG = function setG(newG) {
+    var newVal = formatInputValues(newG, 0, 255);
+    handleChange("rgba(".concat(r, ", ").concat(newVal, ", ").concat(b, ", ").concat(a, ")"));
+  };
+
+  var setB = function setB(newB) {
+    var newVal = formatInputValues(newB, 0, 255);
+    handleChange("rgba(".concat(r, ", ").concat(g, ", ").concat(newVal, ", ").concat(a, ")"));
+  };
+
+  var setA = function setA(newA) {
+    var newVal = formatInputValues(newA, 0, 100);
+    handleChange("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(newVal / 100, ")"));
+  };
+
+  var setHue = function setHue(newHue) {
+    var newVal = formatInputValues(newHue, 0, 360);
+    var tinyNew = tinycolor({
+      h: newVal,
+      s: s,
+      l: l
+    });
+
+    var _tinyNew$toRgb = tinyNew.toRgb(),
+        r = _tinyNew$toRgb.r,
+        g = _tinyNew$toRgb.g,
+        b = _tinyNew$toRgb.b;
+
+    handleChange("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")"));
+  };
+
+  var setSaturation = function setSaturation(newSat) {
+    var newVal = formatInputValues(newSat, 0, 100);
+    var tinyNew = tinycolor({
+      h: h,
+      s: newVal / 100,
+      l: l
+    });
+
+    var _tinyNew$toRgb2 = tinyNew.toRgb(),
+        r = _tinyNew$toRgb2.r,
+        g = _tinyNew$toRgb2.g,
+        b = _tinyNew$toRgb2.b;
+
+    handleChange("rgba(".concat(r, ", ").concat(g, ", ").concat(b, ", ").concat(a, ")"));
+  };
+
+  var setLightness = function setLightness(newLight) {
+    var newVal = formatInputValues(newLight, 0, 100);
+    var tinyNew = tinycolor({
+      h: h,
+      s: s,
+      l: newVal / 100
+    });
+
+    if (tinyNew !== null && tinyNew !== void 0 && tinyNew.isValid()) {
+      var _tinyNew$toRgb4 = tinyNew.toRgb(),
+          _r = _tinyNew$toRgb4.r,
+          _g = _tinyNew$toRgb4.g,
+          _b = _tinyNew$toRgb4.b;
+
+      handleChange("rgba(".concat(_r, ", ").concat(_g, ", ").concat(_b, ", ").concat(a, ")"));
+    } else {
+      console.log('The new color was invalid, perhaps the lightness you passed in was a decimal? Please pass the new value between 0 - 100');
+    }
+  };
+
+  var valueToHSL = function valueToHSL() {
+    return tiny.toHslString();
+  };
+
+  var valueToHSV = function valueToHSV() {
+    return tiny.toHsvString();
+  };
+
+  var valueToHex = function valueToHex() {
+    return tiny.toHexString();
+  };
+
+  var valueToCmyk = function valueToCmyk() {
+    var _rgb2cmyk = rgb2cmyk(r, g, b),
+        c = _rgb2cmyk.c,
+        m = _rgb2cmyk.m,
+        y = _rgb2cmyk.y,
+        k = _rgb2cmyk.k;
+
+    return "cmyk(".concat(c, ", ").concat(m, ", ").concat(y, ", ").concat(k, ")");
+  };
+
+  var setSelectedPoint = function setSelectedPoint(index) {
+    if (isGradient) {
+      var newGradStr = colors === null || colors === void 0 ? void 0 : colors.map(function (cc, i) {
+        return _objectSpread2(_objectSpread2({}, cc), {}, {
+          value: i === index ? high(cc) : low(cc)
+        });
+      });
+      createGradientStr(newGradStr);
+    } else {
+      console.log('This function is only relevant when the picker is in gradient mode');
+    }
+  };
+
+  var addPoint = function addPoint(left) {
+    var newColors = [].concat(_toConsumableArray(colors.map(function (c) {
+      return _objectSpread2(_objectSpread2({}, c), {}, {
+        value: low(c)
+      });
+    })), [{
+      value: currentColor,
+      left: left
+    }]);
+    createGradientStr(newColors);
+
+    if (!left) {
+      console.log('You did not pass a stop value (left amount) for the new color point so it defaulted to 50');
+    }
+  };
+
+  var deletePoint = function deletePoint(index) {
+    if ((colors === null || colors === void 0 ? void 0 : colors.length) > 2) {
+      var pointToDelete = index || selectedColor;
+      var remaining = colors === null || colors === void 0 ? void 0 : colors.filter(function (rc, i) {
+        return i !== pointToDelete;
+      });
+      createGradientStr(remaining);
+
+      if (!index) {
+        console.log('You did not pass in the index of the point you wanted to delete so the function default to the currently selected point');
+      }
+    } else {
+      console.log('A gradient must have atleast two colors, disable your delete button when necessary');
+    }
+  };
+
+  var setPointLeft = function setPointLeft(left) {
+    handleGradient(currentColor, formatInputValues(left, 0, 100));
+  };
+
+  var rgbaArr = [r, g, b, a];
+  var hslArr = [h, s, l];
+  return {
+    setR: setR,
+    setG: setG,
+    setB: setB,
+    setA: setA,
+    setHue: setHue,
+    addPoint: addPoint,
+    setSolid: setSolid,
+    setLinear: setLinear,
+    setRadial: setRadial,
+    valueToHSL: valueToHSL,
+    valueToHSV: valueToHSV,
+    valueToHex: valueToHex,
+    valueToCmyk: valueToCmyk,
+    setDegrees: setDegrees,
+    setGradient: setGradient,
+    setLightness: setLightness,
+    setSaturation: setSaturation,
+    setSelectedPoint: setSelectedPoint,
+    deletePoint: deletePoint,
+    isGradient: isGradient,
+    gradientType: gradientType,
+    degrees: degrees,
+    setPointLeft: setPointLeft,
+    currentLeft: currentLeft,
+    rgbaArr: rgbaArr,
+    hslArr: hslArr,
+    handleChange: handleChange,
+    previousColors: previousColors,
+    getGradientObject: getGradientObject,
+    selectedPoint: selectedColor
+  };
+};
+
+export { useColorPicker };
+//# sourceMappingURL=useColorPicker.js.map

package/build/esm/external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/hooks/usePaintHue.js

@@ -0,0 +1,96 @@
+import { useEffect } from 'react';
+import tinycolor from '../../../external/tinycolor2/tinycolor.js';
+
+var usePaintHue = function usePaintHue(canvas, squareWidth) {
+  useEffect(function () {
+    var _canvas$current;
+
+    var ctx = canvas === null || canvas === void 0 || (_canvas$current = canvas.current) === null || _canvas$current === void 0 ? void 0 : _canvas$current.getContext('2d', {
+      willReadFrequently: true
+    });
+
+    if (ctx) {
+      ctx.rect(0, 0, squareWidth, 14);
+      var gradient = ctx.createLinearGradient(0, 0, squareWidth, 0);
+
+      for (var i = 0; i <= 360; i += 30) {
+        gradient.addColorStop(i / 360, "hsl(".concat(i, ", 100%, 50%)"));
+      }
+
+      ctx.fillStyle = gradient;
+      ctx.fill();
+    }
+  }, [canvas, squareWidth]);
+};
+var usePaintSat = function usePaintSat(canvas, h, l, squareWidth) {
+  useEffect(function () {
+    var _canvas$current2;
+
+    var ctx = canvas === null || canvas === void 0 || (_canvas$current2 = canvas.current) === null || _canvas$current2 === void 0 ? void 0 : _canvas$current2.getContext('2d', {
+      willReadFrequently: true
+    });
+
+    if (ctx) {
+      ctx.rect(0, 0, squareWidth, 14);
+      var gradient = ctx.createLinearGradient(0, 0, squareWidth, 0);
+
+      for (var i = 0; i <= 100; i += 10) {
+        gradient.addColorStop(i / 100, "hsl(".concat(h, ", ").concat(i, "%, ").concat(l, "%)"));
+      }
+
+      ctx.fillStyle = gradient;
+      ctx.fill();
+    }
+  }, [canvas, h, l, squareWidth]);
+};
+var usePaintLight = function usePaintLight(canvas, h, s, squareWidth) {
+  useEffect(function () {
+    var _canvas$current3;
+
+    var ctx = canvas === null || canvas === void 0 || (_canvas$current3 = canvas.current) === null || _canvas$current3 === void 0 ? void 0 : _canvas$current3.getContext('2d', {
+      willReadFrequently: true
+    });
+
+    if (ctx) {
+      ctx.rect(0, 0, squareWidth, 14);
+      var gradient = ctx.createLinearGradient(0, 0, squareWidth, 0);
+
+      for (var i = 0; i <= 100; i += 10) {
+        gradient.addColorStop(i / 100, "hsl(".concat(h, ", ").concat(s, "%, ").concat(i, "%)"));
+      }
+
+      ctx.fillStyle = gradient;
+      ctx.fill();
+    }
+  }, [canvas, h, s, squareWidth]);
+};
+var usePaintBright = function usePaintBright(canvas, h, s, squareWidth) {
+  useEffect(function () {
+    var _canvas$current4;
+
+    var ctx = canvas === null || canvas === void 0 || (_canvas$current4 = canvas.current) === null || _canvas$current4 === void 0 ? void 0 : _canvas$current4.getContext('2d', {
+      willReadFrequently: true
+    });
+
+    if (ctx) {
+      ctx.rect(0, 0, squareWidth, 14);
+      var gradient = ctx.createLinearGradient(0, 0, squareWidth, 0);
+
+      for (var i = 0; i <= 100; i += 10) {
+        var hsl = tinycolor({
+          h: h,
+          s: s,
+          v: i
+        });
+        gradient.addColorStop(i / 100, hsl.toHslString());
+      }
+
+      ctx.fillStyle = gradient;
+      ctx.fill();
+    }
+  }, [canvas, h, s, squareWidth]);
+};
+
+export default usePaintHue;
+export { usePaintBright, usePaintLight, usePaintSat };
+//# sourceMappingURL=usePaintHue.js.map

package/build/esm/external/react-best-gradient-color-picker/dist/esm/hooks/usePaintHue.js.map

@@ -0,0 +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;"}

package/build/esm/external/react-best-gradient-color-picker/dist/esm/hooks/usePaintSquare.js

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+
+var usePaintSquare = function usePaintSquare(canvas, hue, squareWidth, squareHeight) {
+  useEffect(function () {
+    if (canvas.current) {
+      var ctx = canvas.current.getContext('2d', {
+        willReadFrequently: true
+      });
+
+      if (ctx) {
+        ctx.fillStyle = "hsl(".concat(hue, ", 100%, 50%)");
+        ctx.fillRect(0, 0, squareWidth, squareHeight);
+        var gradientWhite = ctx.createLinearGradient(0, 0, squareWidth, 0);
+        gradientWhite.addColorStop(0, "rgba(255, 255, 255, 1)");
+        gradientWhite.addColorStop(1, "rgba(255, 255, 255, 0)");
+        ctx.fillStyle = gradientWhite;
+        ctx.fillRect(0, 0, squareWidth, squareHeight);
+        var gradientBlack = ctx.createLinearGradient(0, 0, 0, squareHeight);
+        gradientBlack.addColorStop(0, "rgba(0, 0, 0, 0)");
+        gradientBlack.addColorStop(1, "rgba(0, 0, 0, 1)");
+        ctx.fillStyle = gradientBlack;
+        ctx.fillRect(0, 0, squareWidth, squareHeight);
+      }
+    }
+  }, [canvas, hue, squareWidth, squareHeight]);
+};
+
+export default usePaintSquare;
+//# sourceMappingURL=usePaintSquare.js.map

package/build/esm/external/react-best-gradient-color-picker/dist/esm/hooks/usePaintSquare.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;"}

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

@@ -0,0 +1,3 @@
+import { ColorPicker } from './components/index.js';
+export { ColorPicker as default } from './components/index.js';
+//# sourceMappingURL=index.js.map

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

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