npm - @dreamcommerce/aurora - Versions diffs - 2.12.1-23 → 2.12.1-24 - Mend

@dreamcommerce/aurora 2.12.1-23 → 2.12.1-24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (37) hide show

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js CHANGED Viewed

@@ -8,6 +8,7 @@ var index$1 = require('../../button/index.js');
 var index = require('../../dropdown/context/index.js');
 var css_classes = require('../css_classes.js');
 var context = require('../context.js');
+var utilities = require('../utilities.js');
 var main_module = require('../../../css/color_picker_new/main.module.less.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,16 +16,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const ColorPickerFooter = () => {
-    const { toggleDropdown } = React.useContext(index.DropdownContext);
+    const { closeDropdown } = React.useContext(index.DropdownContext);
     const { color, handleCancel, handleSave } = React.useContext(context.ColorPickerNewContext);
     const [t] = useTranslation.useTranslation();
     const handleCancelButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
         handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
     };
     const handleSaveButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-        handleSave(color);
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleSave(utilities.getAllColorTypes(color));
     };
     return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerFooter]}` },
         React__default['default'].createElement(index$1['default'], { size: "small", variant: "outline", onClick: handleCancelButton }, t('cancel')),

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js.map CHANGED Viewed

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js CHANGED Viewed

@@ -17,11 +17,20 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const ColorPickerHeader = () => {
     const { handleCancel } = React.useContext(context.ColorPickerNewContext);
     const [t] = useTranslation.useTranslation();
-    const { toggleDropdown } = React.useContext(index.DropdownContext);
+    const { closeDropdown, isOpen } = React.useContext(index.DropdownContext);
     const handleCancelButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+        closePicker();
+    };
+    const closePicker = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
         handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
     };
+    React.useEffect(() => {
+        if (!isOpen)
+            return;
+        document.addEventListener('visibilitychange', closePicker);
+        return () => document.removeEventListener('visibilitychange', closePicker);
+    }, [isOpen]);
     return (React__default['default'].createElement("div", { className: `${main_module['default'][css_classes.cssColorPickerHeader]}` },
         t('Select color'),
         React__default['default'].createElement("button", { onClick: handleCancelButton, className: `${main_module['default'][css_classes.cssColorPickerCloseIcon]}` },

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-header.js.map CHANGED Viewed

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

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.js CHANGED Viewed

@@ -7,7 +7,6 @@ var constants = require('../../constants.js');
 var css_classes = require('../../css_classes.js');
 var main_module = require('../../../../css/color_picker_new/main.module.less.js');
 var colorPickerInputsHex = require('./color-picker-inputs-hex.js');
-var colorPickerInputsHsl = require('./color-picker-inputs-hsl.js');
 var colorPickerInputsRgba = require('./color-picker-inputs-rgba.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,7 +14,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 const ColorPickerInputs = () => {
-    const [type, setType] = React.useState(constants.COLOR_PICKER_TYPE_RGB);
+    const [type, setType] = React.useState(constants.COLOR_PICKER_TYPE_HEX);
     const handleSelectType = (e) => {
         setType(e.target.value);
     };
@@ -25,8 +24,6 @@ const ColorPickerInputs = () => {
                 return React__default['default'].createElement(colorPickerInputsHex.ColorPickerInputsHex, null);
             case constants.COLOR_PICKER_TYPE_RGB:
                 return React__default['default'].createElement(colorPickerInputsRgba.ColorPickerInputsRgba, null);
-            case constants.COLOR_PICKER_TYPE_HSL:
-                return React__default['default'].createElement(colorPickerInputsHsl.ColorPickerInputsHsl, null);
             default:
                 return false;
         }

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.js.map CHANGED Viewed

	@@ -1 +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;~~"}
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;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.js CHANGED Viewed

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var classnames = require('classnames');
 var css_classes = require('../css_classes.js');
-var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var utilities = require('../utilities.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js CHANGED Viewed

@@ -6,8 +6,8 @@ var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var css_classes = require('../css_classes.js');
 var context = require('../context.js');
-var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var utilities = require('../utilities.js');
+var main_module = require('../../../css/color_picker_new/main.module.less.js');
 var colorPickerSwatch = require('./color-picker-swatch.js');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js CHANGED Viewed

@@ -6,13 +6,11 @@ const COLOR_PICKER_INITIAL_STATE = '000000';
 const COLOR_PICKER_WIDTH = 220;
 const COLOR_PICKER_HEIGHT = 200;
 const COLOR_PICKER_TYPE_HEX = 'hex';
-const COLOR_PICKER_TYPE_RGB = 'rgb';
-const COLOR_PICKER_TYPE_HSL = 'hsl';
+const COLOR_PICKER_TYPE_RGB = 'rgb';
 exports.COLOR_PICKER_HEIGHT = COLOR_PICKER_HEIGHT;
 exports.COLOR_PICKER_INITIAL_STATE = COLOR_PICKER_INITIAL_STATE;
 exports.COLOR_PICKER_TYPE_HEX = COLOR_PICKER_TYPE_HEX;
-exports.COLOR_PICKER_TYPE_HSL = COLOR_PICKER_TYPE_HSL;
 exports.COLOR_PICKER_TYPE_RGB = COLOR_PICKER_TYPE_RGB;
 exports.COLOR_PICKER_WIDTH = COLOR_PICKER_WIDTH;
 //# sourceMappingURL=constants.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/constants.js.map CHANGED Viewed

	@@ -1 +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;~~"}
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;"}

package/build/cjs/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js CHANGED Viewed

@@ -29,7 +29,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
         setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
     }, [rgbaArr[3]]);
     React.useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(hexString);
+        onChange === null || onChange === void 0 ? void 0 : onChange(utilities.getAllColorTypes(color));
     }, [color]);
     const handleCancel = () => {
         setColor(choosenColor);
@@ -37,7 +37,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
     };
     const handleSave = () => {
         setChoosenColor(color);
-        onSave === null || onSave === void 0 ? void 0 : onSave(hexString);
+        onSave === null || onSave === void 0 ? void 0 : onSave(utilities.getAllColorTypes(color));
     };
     const handlePickSwatch = (color) => {
         setColor(color);

package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js CHANGED Viewed

@@ -7,6 +7,9 @@ var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
 const getTinyColorInstance = (color) => {
     return tinycolor['default'](color);
 };
+const getRgbaValue = (colorSet) => {
+    return colorSet.toRgb();
+};
 const getHexValue = (colorSet) => {
     const alphaValue = colorSet.getAlpha();
     return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
@@ -17,10 +20,28 @@ const getHexValueString = (colorSet) => {
 const isHexChar = (value) => {
     const hexRegEx = /^$|[0-9a-fA-F]+$/;
     return hexRegEx.test(value);
+};
+const getAllColorTypes = (color) => {
+    const tinyColor = getTinyColorInstance(color);
+    const rgba = getRgbaValue(tinyColor);
+    const hex = getHexValue(tinyColor);
+    const hexString = getHexValueString(tinyColor);
+    return {
+        rgba: {
+            r: rgba.r,
+            g: rgba.g,
+            b: rgba.b,
+            a: rgba.a
+        },
+        hex: hex,
+        hexString: hexString
+    };
 };
+exports.getAllColorTypes = getAllColorTypes;
 exports.getHexValue = getHexValue;
 exports.getHexValueString = getHexValueString;
+exports.getRgbaValue = getRgbaValue;
 exports.getTinyColorInstance = getTinyColorInstance;
 exports.isHexChar = isHexChar;
 //# sourceMappingURL=utilities.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/utilities.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/css/color_picker_new/main.module.less.js CHANGED Viewed

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 250px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n  display: flex;\n  flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n  order: -1;\n  padding: 0 !important;\n  margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n  margin-top: 5px !important;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #ececec;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child) {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child):hover {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:last-child {\n  width: 44px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 250px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n  display: flex;\n  flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n  order: -1;\n  padding: 0 !important;\n  margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n  background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n  width: 24px;\n  height: 24px;\n  background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n  cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n  display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n  margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #ececec;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child) {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child):hover {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:last-child {\n  width: 44px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
 var styles = {"color-picker__container":"main-module_color-picker__container__14ccI","color-picker__rbgcp":"main-module_color-picker__rbgcp__2FKdw","color-picker__header":"main-module_color-picker__header__NFjKK","color-picker__footer":"main-module_color-picker__footer__3JvEl","color-picker__swatches":"main-module_color-picker__swatches__1s2pY","color-picker__swatches-header":"main-module_color-picker__swatches-header__187FL","color-picker__swatches-content":"main-module_color-picker__swatches-content__3EFZR","color-picker__swatch":"main-module_color-picker__swatch__2IbgR","color-picker__swatch_small":"main-module_color-picker__swatch_small__3Z0pq","color-picker__swatch_big":"main-module_color-picker__swatch_big__2tsQC","color-picker__swatch-fill":"main-module_color-picker__swatch-fill__3D88w","color-picker__input-container":"main-module_color-picker__input-container__1cC2e","color-picker__input-color-swatch-container":"main-module_color-picker__input-color-swatch-container__3WX9B","color-picker__inputs":"main-module_color-picker__inputs__3Cmmw","color-picker__inputs-type":"main-module_color-picker__inputs-type__1loVJ","color-picker__inputs-value-container":"main-module_color-picker__inputs-value-container__3ErVj","color-picker__close-icon":"main-module_color-picker__close-icon__JcWAL"};
 styleInject_es['default'](css_248z);

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js CHANGED Viewed

@@ -4,19 +4,20 @@ import Button from '../../button/index.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
 import { cssColorPickerFooter } from '../css_classes.js';
 import { ColorPickerNewContext } from '../context.js';
+import { getAllColorTypes } from '../utilities.js';
 import styles from '../../../css/color_picker_new/main.module.less.js';
 const ColorPickerFooter = () => {
-    const { toggleDropdown } = useContext(DropdownContext);
+    const { closeDropdown } = useContext(DropdownContext);
     const { color, handleCancel, handleSave } = useContext(ColorPickerNewContext);
     const [t] = useTranslation();
     const handleCancelButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
         handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
     };
     const handleSaveButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
-        handleSave(color);
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
+        handleSave(getAllColorTypes(color));
     };
     return (React.createElement("div", { className: `${styles[cssColorPickerFooter]}` },
         React.createElement(Button, { size: "small", variant: "outline", onClick: handleCancelButton }, t('cancel')),

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-footer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;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/packages/aurora/src/components/color_picker_new/components/color-picker-header.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { DropdownContext } from '../../dropdown/context/index.js';
 import { cssColorPickerHeader, cssColorPickerCloseIcon } from '../css_classes.js';
@@ -9,11 +9,20 @@ import IconClose from '../../../assets/icon_close.js';
 const ColorPickerHeader = () => {
     const { handleCancel } = useContext(ColorPickerNewContext);
     const [t] = useTranslation();
-    const { toggleDropdown } = useContext(DropdownContext);
+    const { closeDropdown, isOpen } = useContext(DropdownContext);
     const handleCancelButton = () => {
-        toggleDropdown === null || toggleDropdown === void 0 ? void 0 : toggleDropdown();
+        closePicker();
+    };
+    const closePicker = () => {
+        closeDropdown === null || closeDropdown === void 0 ? void 0 : closeDropdown();
         handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
     };
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        document.addEventListener('visibilitychange', closePicker);
+        return () => document.removeEventListener('visibilitychange', closePicker);
+    }, [isOpen]);
     return (React.createElement("div", { className: `${styles[cssColorPickerHeader]}` },
         t('Select color'),
         React.createElement("button", { onClick: handleCancelButton, className: `${styles[cssColorPickerCloseIcon]}` },

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;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/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.js CHANGED Viewed

@@ -1,13 +1,12 @@
 import React, { useState } from 'react';
-import { COLOR_PICKER_TYPE_RGB, COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_HSL } from '../../constants.js';
+import { COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_RGB } from '../../constants.js';
 import { cssColorPickerInputs, cssColorPickerInputsType, cssColorPickerInputsValue, cssColorPickerInputsValueContainer } from '../../css_classes.js';
 import styles from '../../../../css/color_picker_new/main.module.less.js';
 import { ColorPickerInputsHex } from './color-picker-inputs-hex.js';
-import { ColorPickerInputsHsl } from './color-picker-inputs-hsl.js';
 import { ColorPickerInputsRgba } from './color-picker-inputs-rgba.js';
 const ColorPickerInputs = () => {
-    const [type, setType] = useState(COLOR_PICKER_TYPE_RGB);
+    const [type, setType] = useState(COLOR_PICKER_TYPE_HEX);
     const handleSelectType = (e) => {
         setType(e.target.value);
     };
@@ -17,8 +16,6 @@ const ColorPickerInputs = () => {
                 return React.createElement(ColorPickerInputsHex, null);
             case COLOR_PICKER_TYPE_RGB:
                 return React.createElement(ColorPickerInputsRgba, null);
-            case COLOR_PICKER_TYPE_HSL:
-                return React.createElement(ColorPickerInputsHsl, null);
             default:
                 return false;
         }

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs.js.map CHANGED Viewed

	@@ -1 +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;~~"}
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;"}

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatch.js CHANGED Viewed

@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
 import { cssColorPickerSwatch, cssColorPickerSwatchSmall, cssColorPickerSwatchBig, cssColorPickerSwatchFill } from '../css_classes.js';
-import styles from '../../../css/color_picker_new/main.module.less.js';
 import { getTinyColorInstance, getHexValueString } from '../utilities.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
 const ColorPickerSwatch = ({ color, size, onClick }) => {
     const colorTiny = getTinyColorInstance(color);

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-swatches.js CHANGED Viewed

@@ -2,8 +2,8 @@ import React, { useContext } from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { cssColorPickerSwatches, cssColorPickerSwatchesHeader, cssColorPickerSwatchesContent } from '../css_classes.js';
 import { ColorPickerNewContext } from '../context.js';
-import styles from '../../../css/color_picker_new/main.module.less.js';
 import { getTinyColorInstance, getHexValue } from '../utilities.js';
+import styles from '../../../css/color_picker_new/main.module.less.js';
 import { ColorPickerSwatch } from './color-picker-swatch.js';
 const ColorPickerSwatches = () => {

package/build/esm/packages/aurora/src/components/color_picker_new/constants.js CHANGED Viewed

@@ -2,8 +2,7 @@ const COLOR_PICKER_INITIAL_STATE = '000000';
 const COLOR_PICKER_WIDTH = 220;
 const COLOR_PICKER_HEIGHT = 200;
 const COLOR_PICKER_TYPE_HEX = 'hex';
-const COLOR_PICKER_TYPE_RGB = 'rgb';
-const COLOR_PICKER_TYPE_HSL = 'hsl';
+const COLOR_PICKER_TYPE_RGB = 'rgb';
-export { COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_HSL, COLOR_PICKER_TYPE_RGB, COLOR_PICKER_WIDTH };
+export { COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_TYPE_HEX, COLOR_PICKER_TYPE_RGB, COLOR_PICKER_WIDTH };
 //# sourceMappingURL=constants.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/constants.js.map CHANGED Viewed

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

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.d.ts CHANGED Viewed

@@ -1,10 +1,10 @@
 /// <reference types="react" />
-import { ColorPickerColorTypes } from '../types';
+import { ColorPickerColorTypes, IColorPickerColor } from '../types';
 export declare type ColorPickerHookProps = {
     initialColor?: ColorPickerColorTypes['hex'];
-    onChange?: (color: ColorPickerColorTypes['hex']) => void;
+    onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
-    onSave?: (color: ColorPickerColorTypes['hex']) => void;
+    onSave?: (color: IColorPickerColor) => void;
 };
 declare const useColorPicker: ({ initialColor, onChange, onCancel, onSave }: ColorPickerHookProps) => {
     color: string;

package/build/esm/packages/aurora/src/components/color_picker_new/hooks/use_color_picker.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import { COLOR_PICKER_INITIAL_STATE } from '../constants.js';
 import { useColorPicker as useColorPicker$1 } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/hooks/useColorPicker.js';
-import { getTinyColorInstance, getHexValue, getHexValueString } from '../utilities.js';
+import { getTinyColorInstance, getHexValue, getHexValueString, getAllColorTypes } from '../utilities.js';
 const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
     const [choosenColor, setChoosenColor] = useState(initialColor ? initialColor : COLOR_PICKER_INITIAL_STATE);
@@ -25,7 +25,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
         setAlphaValue(`${Math.round(rgbaArr[3] * 100)}`);
     }, [rgbaArr[3]]);
     useEffect(() => {
-        onChange === null || onChange === void 0 ? void 0 : onChange(hexString);
+        onChange === null || onChange === void 0 ? void 0 : onChange(getAllColorTypes(color));
     }, [color]);
     const handleCancel = () => {
         setColor(choosenColor);
@@ -33,7 +33,7 @@ const useColorPicker = ({ initialColor, onChange, onCancel, onSave }) => {
     };
     const handleSave = () => {
         setChoosenColor(color);
-        onSave === null || onSave === void 0 ? void 0 : onSave(hexString);
+        onSave === null || onSave === void 0 ? void 0 : onSave(getAllColorTypes(color));
     };
     const handlePickSwatch = (color) => {
         setColor(color);

package/build/esm/packages/aurora/src/components/color_picker_new/types.d.ts CHANGED Viewed

@@ -6,10 +6,10 @@ export interface IColorPickerNewPureProps {
 export interface IColorPickerNewProps {
     id: string;
     name?: string;
-    initialColor?: IColorPickerColor['hex'] | undefined;
-    onChange?: (color: IColorPickerColor['hex']) => void;
+    initialColor?: ColorPickerColorTypes['hex'] | undefined;
+    onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
-    onSave?: (color: IColorPickerColor['hex']) => void;
+    onSave?: (color: IColorPickerColor) => void;
 }
 export interface IColorPickerNewContextProps {
     color: string;
@@ -27,7 +27,7 @@ export interface IColorPickerNewContextProps {
     setG: (newG: number) => void;
     setB: (newB: number) => void;
     handleCancel: () => void;
-    handleSave: (color: IColorPickerColor['hex']) => void;
+    handleSave: (color: IColorPickerColor) => void;
     handlePickSwatch: (color: string) => void;
 }
 export declare type ColorPickerColorTypes = {
@@ -37,13 +37,16 @@ export declare type ColorPickerColorTypes = {
         s: number;
         l: number;
     };
-    rgb: {
+    rgba: {
         r: number;
         g: number;
         b: number;
+        a?: number;
     };
 };
 export declare type IColorPickerColor = {
-    hex: ColorPickerColorTypes['hex'];
+    rgba: ColorPickerColorTypes['rgba'];
+    hex: string;
+    hexString: string;
 };
-export declare type ColorPickerColors = ColorPickerColorTypes['hex'] | ColorPickerColorTypes['hsl'] | ColorPickerColorTypes['rgb'];
+export declare type ColorPickerColors = ColorPickerColorTypes['hex'] | ColorPickerColorTypes['hsl'] | ColorPickerColorTypes['rgba'];

package/build/esm/packages/aurora/src/components/color_picker_new/utilities.d.ts CHANGED Viewed

@@ -1,6 +1,8 @@
-import { ColorPickerColors } from './types';
+import { ColorPickerColors, IColorPickerColor } from './types';
 import tinycolor from 'tinycolor2';
 export declare const getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
+export declare const getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
 export declare const getHexValue: (colorSet: tinycolor.Instance) => string;
 export declare const getHexValueString: (colorSet: tinycolor.Instance) => string;
 export declare const isHexChar: (value: string) => boolean;
+export declare const getAllColorTypes: (color: string) => IColorPickerColor;

package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js CHANGED Viewed

@@ -3,6 +3,9 @@ import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
 const getTinyColorInstance = (color) => {
     return tinycolor(color);
 };
+const getRgbaValue = (colorSet) => {
+    return colorSet.toRgb();
+};
 const getHexValue = (colorSet) => {
     const alphaValue = colorSet.getAlpha();
     return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
@@ -13,7 +16,23 @@ const getHexValueString = (colorSet) => {
 const isHexChar = (value) => {
     const hexRegEx = /^$|[0-9a-fA-F]+$/;
     return hexRegEx.test(value);
+};
+const getAllColorTypes = (color) => {
+    const tinyColor = getTinyColorInstance(color);
+    const rgba = getRgbaValue(tinyColor);
+    const hex = getHexValue(tinyColor);
+    const hexString = getHexValueString(tinyColor);
+    return {
+        rgba: {
+            r: rgba.r,
+            g: rgba.g,
+            b: rgba.b,
+            a: rgba.a
+        },
+        hex: hex,
+        hexString: hexString
+    };
 };
-export { getHexValue, getHexValueString, getTinyColorInstance, isHexChar };
+export { getAllColorTypes, getHexValue, getHexValueString, getRgbaValue, getTinyColorInstance, isHexChar };
 //# sourceMappingURL=utilities.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/utilities.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
1	+ {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/packages/aurora/src/css/color_picker_new/main.module.less.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 250px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n  display: flex;\n  flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n  order: -1;\n  padding: 0 !important;\n  margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n  margin-top: 5px !important;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #ececec;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child) {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child):hover {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:last-child {\n  width: 44px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_color-picker__container__14ccI {\n  display: flex;\n  flex-direction: column;\n  max-width: 250px;\n  padding: 9px 16px;\n}\n.main-module_color-picker__rbgcp__2FKdw canvas {\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__rbgcp__2FKdw > div {\n  display: flex;\n  flex-direction: column;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) {\n  order: -1;\n  padding: 0 !important;\n  margin-bottom: 10px;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div {\n  background-color: #F3F4F8;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div div:nth-child(1) div {\n  width: 24px;\n  height: 24px;\n  background: no-repeat url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIiIGhlaWdodD0iMTIiIHZpZXdCb3g9IjAgMCAxMiAxMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0xMS43NTc5IDIuNTgwMjFMMTAuNTg4OCAzLjc0OTI1TDExLjc1NzkgNC45MTgzTDEwLjU4ODggNi4wODczNEwxMC4wMDQzIDUuNTAyODJMMy43NDkyNSAxMS43NTc5QzMuNTg5OCAxMS45MTczIDMuMzcyMTMgMTIuMDA0NyAzLjE0NjY5IDExLjk5OThMMC44NTg1NTUgMTEuOTQ5OEMwLjQxNjE1MiAxMS45NDAyIDAuMDU5ODE2MiAxMS41ODM4IDAuMDUwMTU2OCAxMS4xNDE0TDAuMDAwMTk3MjMxIDguODUzMzJDLTAuMDA0NzI1MDIgOC42Mjc4NyAwLjA4MjY2NTkgOC40MTAyIDAuMjQyMTE4IDguMjUwNzVMNi40OTcxOCAxLjk5NTY5TDUuOTEyNjYgMS40MTExNkw3LjA4MTcgMC4yNDIxMTlMOC4yNTA3NSAxLjQxMTE2TDkuNDE5NzkgMC4yNDIxMTdDOS43NDI2MSAtMC4wODA3MDU3IDEwLjI2NiAtMC4wODA3MDU3IDEwLjU4ODggMC4yNDIxMTdMMTEuNzU3OSAxLjQxMTE2QzEyLjA4MDcgMS43MzM5OCAxMi4wODA3IDIuMjU3MzggMTEuNzU3OSAyLjU4MDIxWk03LjY2NjIzIDMuMTY0NzNMMi4wNzc3IDguNzUzMjZMMy4yNDY3NCA5LjkyMjNMOC44MzUyNyA0LjMzMzc4TDcuNjY2MjMgMy4xNjQ3M1oiIGZpbGw9IiM1QzY1N0UiLz4KPC9zdmc+Cg==) center;\n  cursor: pointer;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(2) div > div svg {\n  display: none;\n}\n.main-module_color-picker__rbgcp__2FKdw > div > div:nth-child(4) {\n  margin-top: 10px !important;\n}\n.main-module_color-picker__header__NFjKK {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 4px 16px 9px 16px;\n  border-bottom: 1px solid #f3f4f8;\n  color: #2d3748;\n}\n.main-module_color-picker__footer__3JvEl {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 8px;\n  margin-top: 8px;\n  padding: 6px 16px 0 16px;\n  border-top: 1px solid #f3f4f8;\n}\n.main-module_color-picker__swatches__1s2pY {\n  margin-top: 16px;\n}\n.main-module_color-picker__swatches-header__187FL {\n  margin-bottom: 4px;\n  color: #2d3748;\n}\n.main-module_color-picker__swatches-content__3EFZR {\n  display: flex;\n  justify-content: space-between;\n  gap: 4px;\n}\n.main-module_color-picker__swatch__2IbgR {\n  position: relative;\n  width: 26px;\n  height: 26px;\n  border-radius: 3px;\n  background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAADFJREFUOE9jZGBgEGHAD97gk2YcNYBhmIQBgWSAP52AwoAQwJvQRg1gACckQoC2gQgAIF8IscwEtKYAAAAASUVORK5CYII=) left center;\n  overflow: hidden;\n}\n.main-module_color-picker__swatch_small__3Z0pq {\n  width: 16px;\n  height: 16px;\n}\n.main-module_color-picker__swatch_big__2tsQC {\n  width: 30px;\n  height: 30px;\n}\n.main-module_color-picker__swatch-fill__3D88w {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  border-radius: 3px;\n  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);\n}\n.main-module_color-picker__input-container__1cC2e {\n  position: relative;\n}\n.main-module_color-picker__input-container__1cC2e input {\n  padding-left: 41px;\n}\n.main-module_color-picker__input-color-swatch-container__3WX9B {\n  position: absolute;\n  top: 7px;\n  left: 10px;\n}\n.main-module_color-picker__inputs__3Cmmw {\n  display: flex;\n  align-items: center;\n  gap: 8px;\n  margin-top: 15px;\n}\n.main-module_color-picker__inputs-type__1loVJ select {\n  font-size: 12px;\n  color: #2d3748;\n  text-transform: uppercase;\n  background-image: url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='4' viewBox='0 0 6 4' fill='none'%3E%3Cpath d='M3.28615 3.86114C3.12455 4.04629 2.87545 4.04629 2.71385 3.86114L0.136577 0.908383C-0.145619 0.585074 0.0386869 -4.16709e-08 0.422729 0L5.57727 5.59302e-07C5.96131 6.00973e-07 6.14562 0.585074 5.86342 0.908383L3.28615 3.86114Z' fill='%235C657E'/%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  background-position: center right;\n  padding-right: 10px;\n  -moz-appearance: none;\n  -webkit-appearance: none;\n  appearance: none;\n}\n.main-module_color-picker__inputs-value-container__3ErVj {\n  display: flex;\n  border: 1px solid #ececec;\n  border-radius: 4px;\n  overflow: hidden;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input {\n  border-color: transparent;\n  border-radius: 0;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:hover {\n  border-color: transparent;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child) {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:not(:last-child):hover {\n  border-right: 1px solid #ececec;\n}\n.main-module_color-picker__inputs-value-container__3ErVj input:last-child {\n  width: 44px;\n}\n.main-module_color-picker__close-icon__JcWAL {\n  display: flex;\n  background-color: transparent;\n  cursor: pointer;\n}\n.main-module_color-picker__close-icon__JcWAL svg {\n  fill: #2d3748;\n}\n";
 var styles = {"color-picker__container":"main-module_color-picker__container__14ccI","color-picker__rbgcp":"main-module_color-picker__rbgcp__2FKdw","color-picker__header":"main-module_color-picker__header__NFjKK","color-picker__footer":"main-module_color-picker__footer__3JvEl","color-picker__swatches":"main-module_color-picker__swatches__1s2pY","color-picker__swatches-header":"main-module_color-picker__swatches-header__187FL","color-picker__swatches-content":"main-module_color-picker__swatches-content__3EFZR","color-picker__swatch":"main-module_color-picker__swatch__2IbgR","color-picker__swatch_small":"main-module_color-picker__swatch_small__3Z0pq","color-picker__swatch_big":"main-module_color-picker__swatch_big__2tsQC","color-picker__swatch-fill":"main-module_color-picker__swatch-fill__3D88w","color-picker__input-container":"main-module_color-picker__input-container__1cC2e","color-picker__input-color-swatch-container":"main-module_color-picker__input-color-swatch-container__3WX9B","color-picker__inputs":"main-module_color-picker__inputs__3Cmmw","color-picker__inputs-type":"main-module_color-picker__inputs-type__1loVJ","color-picker__inputs-value-container":"main-module_color-picker__inputs-value-container__3ErVj","color-picker__close-icon":"main-module_color-picker__close-icon__JcWAL"};
 styleInject(css_248z);

package/package.json CHANGED Viewed

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.12.1-23",
+  "version": "2.12.1-24",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hsl.js DELETED Viewed

@@ -1,39 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-var React = require('react');
-var utilities = require('@dreamcommerce/utilities');
-var input = require('../../../controls/components/input.js');
-var context = require('../../context.js');
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-const ColorPickerInputsHsl = () => {
-    const { setHue, setSaturation, setLightness, hslArr, handleOnChangeAlpha, alphaValue } = React.useContext(context.ColorPickerNewContext);
-    const handleChangeHue = (event) => {
-        const value = Number(event.target.value);
-        console.log('value - h', value);
-        setHue(value);
-    };
-    const handleChangeSaturation = (event) => {
-        const value = Number(event.target.value);
-        console.log('value - s', value);
-        setSaturation(value);
-    };
-    const handleChangeLightness = (event) => {
-        const value = Number(event.target.value);
-        console.log('value - l', value);
-        setLightness(value);
-    };
-    return (React__default['default'].createElement(React__default['default'].Fragment, null,
-        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: Math.round(hslArr[0]), onChange: handleChangeHue, onKeyPress: utilities.InputUtils.preventTypingLetters }),
-        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: Math.round(hslArr[1] * 100), onChange: handleChangeSaturation, onKeyPress: utilities.InputUtils.preventTypingLetters }),
-        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: Math.round(hslArr[2] * 100), onChange: handleChangeLightness, onKeyPress: utilities.InputUtils.preventTypingLetters }),
-        React__default['default'].createElement(input['default'], { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: utilities.InputUtils.preventTypingLetters })));
-};
-exports.ColorPickerInputsHsl = ColorPickerInputsHsl;
-//# sourceMappingURL=color-picker-inputs-hsl.js.map

package/build/cjs/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hsl.js.map DELETED Viewed

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

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hsl.d.ts DELETED Viewed

	@@ -1 +0,0 @@
1	- export declare const ColorPickerInputsHsl: () => JSX.Element;

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hsl.js DELETED Viewed

@@ -1,31 +0,0 @@
-import React, { useContext } from 'react';
-import { InputUtils } from '@dreamcommerce/utilities';
-import Input from '../../../controls/components/input.js';
-import { ColorPickerNewContext } from '../../context.js';
-const ColorPickerInputsHsl = () => {
-    const { setHue, setSaturation, setLightness, hslArr, handleOnChangeAlpha, alphaValue } = useContext(ColorPickerNewContext);
-    const handleChangeHue = (event) => {
-        const value = Number(event.target.value);
-        console.log('value - h', value);
-        setHue(value);
-    };
-    const handleChangeSaturation = (event) => {
-        const value = Number(event.target.value);
-        console.log('value - s', value);
-        setSaturation(value);
-    };
-    const handleChangeLightness = (event) => {
-        const value = Number(event.target.value);
-        console.log('value - l', value);
-        setLightness(value);
-    };
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Input, { padding: "small", type: "text", value: Math.round(hslArr[0]), onChange: handleChangeHue, onKeyPress: InputUtils.preventTypingLetters }),
-        React.createElement(Input, { padding: "small", type: "text", value: Math.round(hslArr[1] * 100), onChange: handleChangeSaturation, onKeyPress: InputUtils.preventTypingLetters }),
-        React.createElement(Input, { padding: "small", type: "text", value: Math.round(hslArr[2] * 100), onChange: handleChangeLightness, onKeyPress: InputUtils.preventTypingLetters }),
-        React.createElement(Input, { padding: "small", type: "text", value: alphaValue, onChange: handleOnChangeAlpha, onKeyPress: InputUtils.preventTypingLetters })));
-};
-export { ColorPickerInputsHsl };
-//# sourceMappingURL=color-picker-inputs-hsl.js.map

package/build/esm/packages/aurora/src/components/color_picker_new/components/color-picker-inputs/color-picker-inputs-hsl.js.map DELETED Viewed

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