@dreamcommerce/aurora 3.0.0-99 → 3.0.0

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

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

package/build/cjs/{external/react-best-gradient-color-picker/dist/esm/components/Square.js.map → packages/aurora/src/components/color_picker/components/color_picker_overrides/color_picker_square.js.map}

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

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

@@ -5,9 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var color_picker_utils = require('../color_picker_utils.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -69,9 +69,9 @@ var ColorPickerShades = function ColorPickerShades() {
     l: 5
   }];
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-mt-3.5"
+    className: "aurora-pt-0.5"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text-info-strong"
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text"
   }, /*#__PURE__*/React__default['default'].createElement("p", {
     className: "aurora-text-xs aurora-font-medium"
   }, "".concat(t('Shades of color')))), /*#__PURE__*/React__default['default'].createElement("div", {
@@ -80,14 +80,16 @@ var ColorPickerShades = function ColorPickerShades() {
     var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(shade);
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      setColor === null || setColor === void 0 ? void 0 : setColor(colorHex);
+      setColor(colorHex);
     };
     return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
       size: "small",
       onClick: handleOnClick,
       key: "".concat(shade, "-").concat(index),
       color: colorHex,
-      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny)
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   })));
 };

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

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

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

@@ -3,7 +3,10 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var cn = require('../../../utilities/cn.js');
 var color_picker_constants = require('../color_picker_constants.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var tinycolor = require('../../../../../../external/tinycolor2/esm/tinycolor.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,15 +16,24 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
     cssColor = _ref.cssColor,
     size = _ref.size,
-    onClick = _ref.onClick;
+    hasActiveBorder = _ref.hasActiveBorder,
+    onClick = _ref.onClick,
+    className = _ref.className;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    activeColor = _useColorPicker.color;
   var handleOnClick = function handleOnClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick(color);
   };
+  var shouldApplyActiveBorder = hasActiveBorder && tinycolor['default'](activeColor).toHex() === color;
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "color-picker__swatch aurora-relative aurora-border aurora-rounded-2 aurora-overflow-hidden \n                ".concat(size === color_picker_constants.COLOR_PICKER_SWATCH_SIZES.small && 'aurora-w-4 aurora-h-4', "\n                ").concat(size === color_picker_constants.COLOR_PICKER_SWATCH_SIZES.big && 'aurora-w-7 aurora-h-7', "\n            "),
+    className: cn.cn("color-picker__swatch aurora-relative aurora-border aurora-rounded-4 aurora-overflow-hidden hover:aurora-border-2 hover:aurora-border-strong", {
+      'aurora-w-4 aurora-h-4': size === color_picker_constants.COLOR_PICKER_SWATCH_SIZES.small,
+      'aurora-w-7 aurora-h-7': size === color_picker_constants.COLOR_PICKER_SWATCH_SIZES.big,
+      '!aurora-border-active aurora-border-2': shouldApplyActiveBorder
+    }, className),
     onClick: handleOnClick
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-absolute aurora-inset-y-0 aurora-inset-x-0 aurora-rounded-2 aurora-shadow-s",
+    className: "aurora-absolute aurora-inset-y-0 aurora-inset-x-0 aurora-shadow-s",
     style: {
       background: "".concat(cssColor)
     }

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_swatch.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAwB,wDAA4D;AACpF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -5,10 +5,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var arrow_down_s_line_icon = require('../../../assets/icons/arrow_down_s_line_icon.js');
-var color_picker_utils = require('../color_picker_utils.js');
+var cn = require('../../../utilities/cn.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
+var arrow_down_s_fill = require('../../../assets/icons/arrow_down_s_fill.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -44,49 +45,49 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-mt-3.5"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text-info-active"
-  }, /*#__PURE__*/React__default['default'].createElement("p", {
-    className: "aurora-text-xs aurora-font-medium"
-  }, "".concat(t('Theme colors'))), /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-flex aurora-items-start aurora-justify-center aurora-p-1",
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text aurora-cursor-pointer",
     onClick: function onClick() {
       return setIsOpen(!isOpen);
     }
-  }, /*#__PURE__*/React__default['default'].createElement(arrow_down_s_line_icon.ArrowDownSLineIcon, {
-    className: "".concat(!isOpen ? 'aurora-rotate-180' : '')
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "aurora-text-xs aurora-font-medium"
+  }, "".concat(t('Theme colors'))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-start aurora-justify-center aurora-h-4 aurora-w-4"
+  }, /*#__PURE__*/React__default['default'].createElement(arrow_down_s_fill.ArrowDownSFillIcon, {
+    className: cn.cn('aurora-h-full aurora-w-full', isOpen && 'aurora-rotate-180')
   }))), /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-grid aurora-grid-cols-12 aurora-gap-1"
   }, Object.values(variables).map(function (variable, index) {
     var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor({
-        value: colorHex,
-        name: "".concat(variable.name)
-      });
+      return setColor(colorHex);
     };
     return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
       color: colorHex,
-      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny)
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   })), isOpen && (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-grid aurora-grid-cols-12 aurora-gap-1 aurora-mt-3"
   }, allShades.map(function (variable, index) {
+    var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
+    var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor === null || setColor === void 0 ? void 0 : setColor({
-        value: variable.value,
-        name: variable.name
-      });
+      return setColor(colorHex, variable.name);
     };
     return /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
       size: "small",
       onClick: handleOnClick,
       key: "".concat(variable, "-").concat(index),
-      color: variable.value,
-      cssColor: variable.value
+      color: colorHex,
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
     });
   }))));
 };

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

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

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var color_picker_utils = require('../color_picker_utils.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -14,10 +13,10 @@ var CurrentColorPreview = function CurrentColorPreview() {
   var _useColorPicker = use_color_picker.useColorPicker(),
     color = _useColorPicker.color;
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-self-stretch aurora-w-6 aurora-border aurora-rounded-4",
+    className: "aurora-w-6 aurora-h-6 aurora-border aurora-rounded-4",
     "aria-label": "color picker current color value",
     style: {
-      background: color_picker_utils.ColorPickerUtils.isGradient(color.value) ? color.value : "#".concat(color.value)
+      background: color
     }
   });
 };

package/build/cjs/packages/aurora/src/components/color_picker/components/current_color_preview.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;"}
+{"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;"}

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

@@ -3,61 +3,78 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../../utilities/cn.js');
 var popover = require('../../popover/popover.js');
 var popover_trigger = require('../../popover/components/popover_trigger.js');
-var color_picker_utils = require('../color_picker_utils.js');
+var color_picker_constants = require('../color_picker_constants.js');
 var use_color_picker = require('../hooks/use_color_picker.js');
 var color_picker_swatch = require('./color_picker_swatch.js');
+var utils = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js');
+var context = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+var styles = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js');
 var color_picker_content = require('./color_picker_content.js');
-var color_label_input = require('./color_label_input.js');
+var color_picker_input = require('./color_picker_input.js');
 var popover_content = require('../../popover/components/popover_content.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
+var _excluded = ["id", "name", "errors", "disabled", "className", "children", "triggerClassName"];
 var ColorPickerPure = function ColorPickerPure(_ref) {
   var id = _ref.id,
     name = _ref.name,
     errors = _ref.errors,
-    disabled = _ref.disabled;
+    disabled = _ref.disabled,
+    className = _ref.className,
+    children = _ref.children,
+    triggerClassName = _ref.triggerClassName,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
   var _useColorPicker = use_color_picker.useColorPicker(),
     color = _useColorPicker.color,
-    handleCancel = _useColorPicker.handleCancel,
+    setColor = _useColorPicker.setColor,
     isColorPickerOpened = _useColorPicker.isColorPickerOpened,
-    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened;
-  var colorValue = typeof color === 'string' ? color : color.value;
-  var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(colorValue);
+    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
+    handleSave = _useColorPicker.handleSave;
+  var safeValue = utils.objectToString(color);
+  var defaultStyles = styles.getStyles(true);
   var handleClosePopover = function handleClosePopover() {
+    handleSave();
     setIsColorPickerOpened(false);
-    handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
   };
-  return /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(popover.Popover, {
+  return /*#__PURE__*/React__default['default'].createElement(popover.Popover, {
     open: isColorPickerOpened,
     onOpenChange: function onOpenChange(value) {
       return !value && handleClosePopover();
     }
+  }, /*#__PURE__*/React__default['default'].createElement(context['default'], {
+    value: safeValue,
+    defaultStyles: defaultStyles,
+    onChange: setColor,
+    squareWidth: color_picker_constants.COLOR_PICKER_WIDTH,
+    squareHeight: color_picker_constants.COLOR_PICKER_HEIGHT,
+    hideOpacity: false
   }, /*#__PURE__*/React__default['default'].createElement(popover_trigger.PopoverTrigger, {
-    onClick: function onClick() {
-      return setIsColorPickerOpened(true);
+    onClick: function onClick(ev) {
+      ev.preventDefault();
+      setIsColorPickerOpened(true);
     },
-    disabled: disabled
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "color-picker__input-container aurora-relative"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-absolute aurora-top-1.5 aurora-left-2.5"
-  }, /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
-    color: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValue(colorTiny),
-    cssColor: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
-    size: "big"
-  })), /*#__PURE__*/React__default['default'].createElement(color_label_input.ColorPickerInput, {
+    disabled: disabled,
+    className: cn.cn('aurora-w-full', triggerClassName)
+  }, !children && (/*#__PURE__*/React__default['default'].createElement(color_picker_input.ColorPickerInput, {
     id: id,
     name: name,
     errors: errors,
-    disabled: disabled
-  }))), /*#__PURE__*/React__default['default'].createElement(popover_content.PopoverContent, {
-    className: "aurora-mt-2 aurora-rounded-16 aurora-overflow-hidden"
-  }, /*#__PURE__*/React__default['default'].createElement(color_picker_content.ColorPickerContent, null))));
+    disabled: disabled,
+    preElement: /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+      color: color,
+      cssColor: color,
+      size: "big"
+    })
+  })), children), /*#__PURE__*/React__default['default'].createElement(popover_content.PopoverContent, _rollupPluginBabelHelpers.objectSpread2({
+    className: cn.cn('aurora-rounded-16 aurora-overflow-hidden aurora-z-[99999] js__aurora-color-picker', className)
+  }, rest), /*#__PURE__*/React__default['default'].createElement(color_picker_content.ColorPickerContent, null))));
 };
 
 exports.default = ColorPickerPure;

package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.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;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,oBAAoB,qFAAyF;AAC7G,sBAAsB,iFAAqF;AAC3G,qBAAqB,uFAA2F;AAChH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/color_picker/hooks/setup_color_picker.js

@@ -0,0 +1,153 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var color_picker_constants = require('../color_picker_constants.js');
+var utils = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js');
+var useColorPicker = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js');
+var color_picker_utils = require('../color_picker_utils.js');
+
+var defaultGradient = 'linear-gradient(90deg, #000000 0%, #FFFFFF 100%)';
+var useSetupColorPicker = function useSetupColorPicker(_ref) {
+  var value = _ref.value,
+    onChange = _ref.onChange,
+    onCancel = _ref.onCancel,
+    onSave = _ref.onSave,
+    colorVariables = _ref.colorVariables,
+    _ref$withGradient = _ref.withGradient,
+    isWithGradient = _ref$withGradient === void 0 ? false : _ref$withGradient;
+  var colorValue = color_picker_utils.ColorPickerUtils.normalizeLinearGradient(value || color_picker_constants.COLOR_PICKER_INITIAL_STATE);
+  var colorValueRef = React.useRef(colorValue);
+  var savedColorRef = React.useRef(colorValue);
+  var _useState = React.useState(!color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_constants.COLOR_PICKER_INITIAL_STATE),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    previousSolidColor = _useState2[0],
+    setPreviousSolidColor = _useState2[1];
+  var _useState3 = React.useState(color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : defaultGradient),
+    _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
+    previousGradientColor = _useState4[0],
+    setPreviousGradientColor = _useState4[1];
+  var withGradient = isWithGradient || color_picker_utils.ColorPickerUtils.isGradient(colorValue);
+  var _useState5 = React.useState(false),
+    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
+    isColorPickerOpened = _useState6[0],
+    setIsColorPickerOpened = _useState6[1];
+  var _useState7 = React.useState(''),
+    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
+    shadeName = _useState8[0],
+    setShadeName = _useState8[1];
+  var _useState9 = React.useState(color_picker_utils.ColorPickerUtils.getHexValueWithoutHash(colorValue)),
+    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+    typedInputValue = _useState10[0],
+    setTypedInputValue = _useState10[1];
+  var _useState11 = React.useState(false),
+    _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
+    isColorPickerCurrentlyUsed = _useState12[0],
+    setIsColorPickerCurrentlyUsed = _useState12[1];
+  var _getDetails = utils.getDetails(colorValue),
+    degrees = _getDetails.degrees;
+  var savedDegRef = React.useRef(isNaN(degrees) ? 180 : degrees);
+  var variables = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables;
+  var setColor = React.useCallback(function (newColor) {
+    var shadeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
+    setShadeName(shadeName);
+    !color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? setPreviousSolidColor(colorValue) : setPreviousGradientColor(colorValue);
+    var isGradient = color_picker_utils.ColorPickerUtils.isGradient(newColor);
+    var newColorVar = {
+      value: newColor,
+      name: variables && !isGradient && color_picker_utils.ColorPickerUtils.findVariable(variables, newColor) || ''
+    };
+    var colorObject = color_picker_utils.ColorPickerUtils.getAllColorTypes(newColorVar);
+    var colorDegrees = newColor.match(/(linear|radial)-gradient\([^)]*?([0-9.]+)deg/);
+    if (isGradient && colorDegrees !== null && colorDegrees !== void 0 && colorDegrees[2]) {
+      savedDegRef.current = Number(colorDegrees[2]);
+    }
+    var hexString = isGradient ? newColor : colorObject.hexString;
+    colorValueRef.current = hexString;
+    onChange === null || onChange === void 0 ? void 0 : onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, colorObject), {}, {
+      hexString: hexString
+    }));
+  }, [colorValue, variables, onChange]);
+  React.useEffect(function () {
+    if (colorValue === colorValueRef.current) return;
+    colorValueRef.current = colorValue;
+    setShadeName('');
+  }, [colorValue]);
+  var _useBestGradientColor = useColorPicker.useColorPicker(colorValue, setColor),
+    hslArr = _useBestGradientColor.hslArr,
+    rgbaArr = _useBestGradientColor.rgbaArr,
+    setR = _useBestGradientColor.setR,
+    setG = _useBestGradientColor.setG,
+    setB = _useBestGradientColor.setB,
+    setA = _useBestGradientColor.setA,
+    isGradient = _useBestGradientColor.isGradient,
+    gradientType = _useBestGradientColor.gradientType;
+  var tinyColor = color_picker_utils.ColorPickerUtils.getTinyColorInstance(colorValue);
+  var hex = color_picker_utils.ColorPickerUtils.getHexValue(tinyColor);
+  var alpha = rgbaArr[3] * 100;
+  var setSolid = function setSolid(value) {
+    setColor(value || color_picker_constants.COLOR_PICKER_INITIAL_STATE);
+  };
+  var setLinear = function setLinear(value) {
+    var gradientColor = value || defaultGradient;
+    var remaining = gradientColor.split(/,(.+)/)[1];
+    setColor("linear-gradient(".concat(savedDegRef.current + 'deg', ", ").concat(remaining));
+  };
+  var setRadial = function setRadial(value) {
+    var gradientColor = value || defaultGradient;
+    var remaining = gradientColor.split(/,(.+)/)[1];
+    setColor("radial-gradient(circle, ".concat(remaining));
+  };
+  var handleOnChangeAlpha = function handleOnChangeAlpha(value) {
+    var val = Math.min(value, color_picker_constants.COLOR_PICKER_ALPHA_MAX_VALUE);
+    setA(val);
+  };
+  var handleCancel = function handleCancel() {
+    setColor(savedColorRef.current);
+    onCancel === null || onCancel === void 0 ? void 0 : onCancel();
+  };
+  var handleSave = function handleSave() {
+    var newColorVar = {
+      value: colorValue,
+      name: variables && color_picker_utils.ColorPickerUtils.findVariable(variables, colorValue) || ''
+    };
+    savedColorRef.current = colorValue;
+    onSave === null || onSave === void 0 ? void 0 : onSave(color_picker_utils.ColorPickerUtils.getAllColorTypes(newColorVar));
+  };
+  return {
+    color: colorValue,
+    previousSolidColor: previousSolidColor,
+    previousGradientColor: previousGradientColor,
+    setColor: setColor,
+    hex: hex,
+    hslArr: hslArr,
+    handleOnChangeAlpha: handleOnChangeAlpha,
+    alpha: alpha,
+    rgbaArr: rgbaArr,
+    setR: setR,
+    setG: setG,
+    setB: setB,
+    handleCancel: handleCancel,
+    handleSave: handleSave,
+    colorVariables: colorVariables,
+    isCurrentValueGradient: isGradient,
+    setSolid: setSolid,
+    setRadial: setRadial,
+    setLinear: setLinear,
+    gradientType: gradientType,
+    withGradient: withGradient,
+    isColorPickerOpened: isColorPickerOpened,
+    setIsColorPickerOpened: setIsColorPickerOpened,
+    typedInputValue: typedInputValue,
+    setTypedInputValue: setTypedInputValue,
+    isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
+    setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
+    degrees: degrees,
+    shadeName: shadeName
+  };
+};
+
+exports.default = useSetupColorPicker;
+//# sourceMappingURL=setup_color_picker.js.map

package/build/cjs/packages/aurora/src/components/color_picker/hooks/{setup_color_piceker.js.map → setup_color_picker.js.map}

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,6BAA6B,8FAAkG;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oBAAoB,qFAAyF;AAC7G,6BAA6B,8FAAkG;AAC/H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}