@dreamcommerce/aurora 3.1.2 → 3.1.4-2

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

@@ -61,7 +61,8 @@ var ColorPicker = function ColorPicker(_ref) {
     isColorPickerCurrentlyUsed = _useSetupColorPicker.isColorPickerCurrentlyUsed,
     setIsColorPickerCurrentlyUsed = _useSetupColorPicker.setIsColorPickerCurrentlyUsed,
     degrees = _useSetupColorPicker.degrees,
-    shadeName = _useSetupColorPicker.shadeName;
+    shadeName = _useSetupColorPicker.shadeName,
+    currentSelectedVariable = _useSetupColorPicker.currentSelectedVariable;
   var contextVal = React.useMemo(function () {
     return {
       color: color,
@@ -93,9 +94,10 @@ var ColorPicker = function ColorPicker(_ref) {
       setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
       degrees: degrees,
       shadeName: shadeName,
-      onPickShade: onPickShade
+      onPickShade: onPickShade,
+      currentSelectedVariable: currentSelectedVariable
     };
-  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName, onPickShade]);
+  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName, onPickShade, currentSelectedVariable]);
   return /*#__PURE__*/React__default['default'].createElement(color_picker_context.ColorPickerContext.Provider, {
     value: contextVal
   }, /*#__PURE__*/React__default['default'].createElement(pure_color_picker['default'], _rollupPluginBabelHelpers.objectSpread2({

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

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

@@ -178,6 +178,12 @@ _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "findVariable", funct
     return variableTiny.toHex8String() === colorTiny.toHex8String();
   })) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.name;
 });
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "findVariableByName", function (variables, name) {
+  var _Object$values$find2;
+  return (_Object$values$find2 = Object.values(variables).find(function (v) {
+    return v.name === name;
+  })) === null || _Object$values$find2 === void 0 ? void 0 : _Object$values$find2.name;
+});
 _rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "normalizeLinearGradient", function (color) {
   var gradientRegex = /linear-gradient\s*\((.*?)\)/i;
   var match = color.match(gradientRegex);

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,wBAAwB,qDAAyD;AACjF,yBAAyB,uFAA2F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,wBAAwB,qDAAyD;AACjF,yBAAyB,uFAA2F;AACpH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_input.js

@@ -21,17 +21,17 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
     disabled = _ref.disabled,
     preElement = _ref.preElement;
   var _useColorPicker = use_color_picker.useColorPicker(),
-    color = _useColorPicker.color,
     typedInputValue = _useColorPicker.typedInputValue,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
     colorVariables = _useColorPicker.colorVariables,
-    shadeName = _useColorPicker.shadeName;
+    shadeName = _useColorPicker.shadeName,
+    currentSelectedVariable = _useColorPicker.currentSelectedVariable;
   var _useTranslation = useTranslation.useTranslation(),
     _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
   var typedInputValueHasFullHexLength = typedInputValue.length >= 6;
-  var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && color_picker_utils.ColorPickerUtils.findVariable(colorVariables.variables, color) || shadeName || '';
+  var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && currentSelectedVariable && color_picker_utils.ColorPickerUtils.findVariableByName(colorVariables.variables, currentSelectedVariable) || shadeName || '';
   var colorName = undefined;
   if (isCurrentValueGradient) {
     colorName = gradientType === color_picker_constants.GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');

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

@@ -18,18 +18,21 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
     size = _ref.size,
     hasActiveBorder = _ref.hasActiveBorder,
     onClick = _ref.onClick,
-    className = _ref.className;
+    className = _ref.className,
+    variableName = _ref.variableName;
   var _useColorPicker = use_color_picker.useColorPicker(),
-    activeColor = _useColorPicker.color;
+    activeColor = _useColorPicker.color,
+    currentSelectedVariable = _useColorPicker.currentSelectedVariable;
   var handleOnClick = function handleOnClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick(color);
   };
-  var shouldApplyActiveBorder = hasActiveBorder && tinycolor['default'](activeColor).toHex() === color;
+  var shouldApplyActiveBorder = hasActiveBorder && !variableName && tinycolor['default'](activeColor).toHex() === color;
+  var currentSelected = hasActiveBorder && variableName && variableName === currentSelectedVariable;
   return /*#__PURE__*/React__default['default'].createElement("div", {
     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
+      '!aurora-border-active aurora-border-2': shouldApplyActiveBorder || currentSelected
     }, className),
     onClick: handleOnClick
   }, /*#__PURE__*/React__default['default'].createElement("div", {

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,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;"}
+{"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;AACA;AACA;AACA;"}

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

@@ -67,7 +67,7 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor(colorHex);
+      return setColor(colorHex, '', variable.name);
     };
     return /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, {
       key: "".concat(variable, "-").concat(index)
@@ -77,7 +77,8 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       onClick: handleOnClick,
       color: colorHex,
       cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
-      hasActiveBorder: true
+      hasActiveBorder: true,
+      variableName: variable.name
     })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
       variant: "dark"
     }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {

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;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;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

@@ -19,8 +19,12 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     _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 currentSelectedVariable = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.selectedVariable;
   var colorValueRef = React.useRef(colorValue);
-  var savedColorRef = React.useRef(colorValue);
+  var savedColorRef = React.useRef({
+    value: colorValue,
+    name: currentSelectedVariable || ''
+  });
   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],
@@ -52,12 +56,13 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
   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);
+    var variableName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    setShadeName(variableName || 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) || ''
+      name: variableName || ''
     };
     var colorObject = color_picker_utils.ColorPickerUtils.getAllColorTypes(newColorVar);
     var colorDegrees = newColor.match(/(linear|radial)-gradient\([^)]*?([0-9.]+)deg/);
@@ -105,15 +110,21 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     setA(val);
   };
   var handleCancel = function handleCancel() {
-    setColor(savedColorRef.current);
+    var _savedColorRef$curren = savedColorRef.current,
+      value = _savedColorRef$curren.value,
+      name = _savedColorRef$curren.name;
+    setColor(value, '', name || '');
     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) || ''
+      name: variables && color_picker_utils.ColorPickerUtils.findVariable(variables, colorValue) || currentSelectedVariable || ''
+    };
+    savedColorRef.current = {
+      value: colorValue,
+      name: newColorVar.name
     };
-    savedColorRef.current = colorValue;
     onSave === null || onSave === void 0 ? void 0 : onSave(color_picker_utils.ColorPickerUtils.getAllColorTypes(newColorVar));
   };
   return {
@@ -145,7 +156,8 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
     setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
     degrees: degrees,
-    shadeName: shadeName
+    shadeName: shadeName,
+    currentSelectedVariable: currentSelectedVariable
   };
 };
 

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

package/build/cjs/packages/aurora/src/components/toast/components/toast.js

@@ -6,6 +6,7 @@ var React = require('react');
 var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var cn = require('../../../utilities/cn.js');
 var stack = require('../../stack/stack.js');
+var box = require('../../box/box.js');
 var close_line_icon = require('../../../assets/icons/close_line_icon.js');
 var message_box = require('../../message_box/message_box.js');
 var reactToast = require('@radix-ui/react-toast');
@@ -15,10 +16,9 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var _excluded = ["type", "header", "children", "slideSide", "closeable"];
+var _excluded = ["type", "children", "slideSide", "closeable"];
 var Toast = function Toast(_ref) {
   var type = _ref.type,
-    header = _ref.header,
     children = _ref.children,
     _ref$slideSide = _ref.slideSide,
     slideSide = _ref$slideSide === void 0 ? toast_constants.TOAST_SLIDE_SIDE.fromRight : _ref$slideSide,
@@ -32,14 +32,22 @@ var Toast = function Toast(_ref) {
     })
   }), /*#__PURE__*/React__default['default'].createElement(message_box.MessageBox, {
     showIcon: true,
-    variant: type,
-    header: header
+    variant: type
   }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
     justify: "between",
-    align: "center"
-  }, children, closeable ? (/*#__PURE__*/React__default['default'].createElement(reactToast.Close, null, /*#__PURE__*/React__default['default'].createElement(close_line_icon.CloseLineIcon, {
+    align: "start"
+  }, /*#__PURE__*/React__default['default'].createElement(box.Box, {
+    backgroundColor: "transparent",
+    className: "aurora-mt-1"
+  }, children), closeable ? (/*#__PURE__*/React__default['default'].createElement(box.Box, {
+    width: "auto",
+    backgroundColor: "transparent",
+    paddings: {
+      pt: '1'
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(reactToast.Close, null, /*#__PURE__*/React__default['default'].createElement(close_line_icon.CloseLineIcon, {
     size: 16
-  }))) : null)));
+  })))) : null)));
 };
 
 exports.Toast = Toast;

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

package/build/esm/packages/aurora/src/components/color_picker/color_picker.js

@@ -53,7 +53,8 @@ var ColorPicker = function ColorPicker(_ref) {
     isColorPickerCurrentlyUsed = _useSetupColorPicker.isColorPickerCurrentlyUsed,
     setIsColorPickerCurrentlyUsed = _useSetupColorPicker.setIsColorPickerCurrentlyUsed,
     degrees = _useSetupColorPicker.degrees,
-    shadeName = _useSetupColorPicker.shadeName;
+    shadeName = _useSetupColorPicker.shadeName,
+    currentSelectedVariable = _useSetupColorPicker.currentSelectedVariable;
   var contextVal = useMemo(function () {
     return {
       color: color,
@@ -85,9 +86,10 @@ var ColorPicker = function ColorPicker(_ref) {
       setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
       degrees: degrees,
       shadeName: shadeName,
-      onPickShade: onPickShade
+      onPickShade: onPickShade,
+      currentSelectedVariable: currentSelectedVariable
     };
-  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName, onPickShade]);
+  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName, onPickShade, currentSelectedVariable]);
   return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
     value: contextVal
   }, /*#__PURE__*/React.createElement(ColorPickerPure, _objectSpread2({

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

package/build/esm/packages/aurora/src/components/color_picker/color_picker_types.d.ts

@@ -12,6 +12,7 @@ export interface IColorPickerPureProps extends Omit<HTMLAttributes<HTMLDivElemen
 export interface IColorPickerColorVariables {
     isVisible: boolean;
     variables: IColorPickerColorVariablesType;
+    selectedVariable?: string;
 }
 export interface IColorPickerColorVariablesType {
     primary: ColorPickerVariable;
@@ -36,7 +37,7 @@ export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>,
 }
 export interface IColorPickerContext {
     color: string;
-    setColor: (newColor: string, shadeName?: string) => void;
+    setColor: (newColor: string, shadeName?: string, variableName?: string) => void;
     hex: string;
     hslArr: number[];
     handleOnChangeAlpha: (val: number) => void;
@@ -65,6 +66,7 @@ export interface IColorPickerContext {
     degrees: number;
     shadeName: string;
     onPickShade?: (shadeValue: string) => void;
+    currentSelectedVariable?: string;
 }
 export declare type ColorPickerColorTypes = {
     hex: string;

package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.d.ts

@@ -17,6 +17,7 @@ export declare class ColorPickerUtils {
     private static convertVariableShadesToHex;
     static updateGradientWithActiveColor: (colors: GradientProps[], index: number, newColor: string) => GradientProps[];
     static findVariable: (variables: IColorPickerColorVariablesType | ColorPickerVariable[], color: string) => string | undefined;
+    static findVariableByName: (variables: IColorPickerColorVariablesType | ColorPickerVariable[], name: string) => string | undefined;
     static normalizeLinearGradient: (color: string) => string;
     static preventTypingLetters(event: React.KeyboardEvent<HTMLInputElement>): void;
 }

package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js

@@ -174,6 +174,12 @@ _defineProperty(ColorPickerUtils, "findVariable", function (variables, color) {
     return variableTiny.toHex8String() === colorTiny.toHex8String();
   })) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.name;
 });
+_defineProperty(ColorPickerUtils, "findVariableByName", function (variables, name) {
+  var _Object$values$find2;
+  return (_Object$values$find2 = Object.values(variables).find(function (v) {
+    return v.name === name;
+  })) === null || _Object$values$find2 === void 0 ? void 0 : _Object$values$find2.name;
+});
 _defineProperty(ColorPickerUtils, "normalizeLinearGradient", function (color) {
   var gradientRegex = /linear-gradient\s*\((.*?)\)/i;
   var match = color.match(gradientRegex);

package/build/esm/packages/aurora/src/components/color_picker/color_picker_utils.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,sBAAsB,qDAAyD;AAC/E,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,qDAAyD;AAC/E,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_input.js

@@ -13,17 +13,17 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
     disabled = _ref.disabled,
     preElement = _ref.preElement;
   var _useColorPicker = useColorPicker(),
-    color = _useColorPicker.color,
     typedInputValue = _useColorPicker.typedInputValue,
     isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
     gradientType = _useColorPicker.gradientType,
     colorVariables = _useColorPicker.colorVariables,
-    shadeName = _useColorPicker.shadeName;
+    shadeName = _useColorPicker.shadeName,
+    currentSelectedVariable = _useColorPicker.currentSelectedVariable;
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
   var typedInputValueHasFullHexLength = typedInputValue.length >= 6;
-  var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && ColorPickerUtils.findVariable(colorVariables.variables, color) || shadeName || '';
+  var variableName = (colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables) && currentSelectedVariable && ColorPickerUtils.findVariableByName(colorVariables.variables, currentSelectedVariable) || shadeName || '';
   var colorName = undefined;
   if (isCurrentValueGradient) {
     colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');

package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_swatch.d.ts

@@ -8,6 +8,7 @@ interface IColorPickerSwatchProps {
     hasActiveBorder?: boolean;
     onClick?: (color: ColorPickerColorTypes['hex']) => void;
     className?: string;
+    variableName?: string;
 }
 export declare const ColorPickerSwatch: React.FC<IColorPickerSwatchProps>;
 export {};

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

@@ -10,18 +10,21 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
     size = _ref.size,
     hasActiveBorder = _ref.hasActiveBorder,
     onClick = _ref.onClick,
-    className = _ref.className;
+    className = _ref.className,
+    variableName = _ref.variableName;
   var _useColorPicker = useColorPicker(),
-    activeColor = _useColorPicker.color;
+    activeColor = _useColorPicker.color,
+    currentSelectedVariable = _useColorPicker.currentSelectedVariable;
   var handleOnClick = function handleOnClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick(color);
   };
-  var shouldApplyActiveBorder = hasActiveBorder && tinycolor(activeColor).toHex() === color;
+  var shouldApplyActiveBorder = hasActiveBorder && !variableName && tinycolor(activeColor).toHex() === color;
+  var currentSelected = hasActiveBorder && variableName && variableName === currentSelectedVariable;
   return /*#__PURE__*/React.createElement("div", {
     className: 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_SWATCH_SIZES.small,
       'aurora-w-7 aurora-h-7': size === COLOR_PICKER_SWATCH_SIZES.big,
-      '!aurora-border-active aurora-border-2': shouldApplyActiveBorder
+      '!aurora-border-active aurora-border-2': shouldApplyActiveBorder || currentSelected
     }, className),
     onClick: handleOnClick
   }, /*#__PURE__*/React.createElement("div", {

package/build/esm/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,sBAAsB,wDAA4D;AAClF;AACA;AACA;AACA;AACA;AACA;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,sBAAsB,wDAA4D;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/components/color_picker_variables.js

@@ -59,7 +59,7 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var colorTiny = ColorPickerUtils.getTinyColorInstance(variable.value);
     var colorHex = ColorPickerUtils.getHexValue(colorTiny);
     var handleOnClick = function handleOnClick() {
-      return setColor(colorHex);
+      return setColor(colorHex, '', variable.name);
     };
     return /*#__PURE__*/React.createElement(TooltipProvider, {
       key: "".concat(variable, "-").concat(index)
@@ -69,7 +69,8 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       onClick: handleOnClick,
       color: colorHex,
       cssColor: ColorPickerUtils.getHexValueString(colorTiny),
-      hasActiveBorder: true
+      hasActiveBorder: true,
+      variableName: variable.name
     })), /*#__PURE__*/React.createElement(TooltipContent, {
       variant: "dark"
     }, /*#__PURE__*/React.createElement(Typography, {

package/build/esm/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,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/hooks/setup_color_picker.d.ts

@@ -12,7 +12,7 @@ declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVa
     color: string;
     previousSolidColor: string;
     previousGradientColor: string;
-    setColor: (newColor: string, shadeName?: string) => void;
+    setColor: (newColor: string, shadeName?: string, variableName?: string) => void;
     hex: string;
     hslArr: number[];
     handleOnChangeAlpha: (value: number) => void;
@@ -38,5 +38,6 @@ declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVa
     setIsColorPickerCurrentlyUsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
     degrees: number;
     shadeName: string;
+    currentSelectedVariable: string | undefined;
 };
 export default useSetupColorPicker;

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

@@ -15,8 +15,12 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     _ref$withGradient = _ref.withGradient,
     isWithGradient = _ref$withGradient === void 0 ? false : _ref$withGradient;
   var colorValue = ColorPickerUtils.normalizeLinearGradient(value || COLOR_PICKER_INITIAL_STATE);
+  var currentSelectedVariable = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.selectedVariable;
   var colorValueRef = useRef(colorValue);
-  var savedColorRef = useRef(colorValue);
+  var savedColorRef = useRef({
+    value: colorValue,
+    name: currentSelectedVariable || ''
+  });
   var _useState = useState(!ColorPickerUtils.isGradient(colorValue) ? colorValue : COLOR_PICKER_INITIAL_STATE),
     _useState2 = _slicedToArray(_useState, 2),
     previousSolidColor = _useState2[0],
@@ -48,12 +52,13 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
   var variables = colorVariables === null || colorVariables === void 0 ? void 0 : colorVariables.variables;
   var setColor = useCallback(function (newColor) {
     var shadeName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : '';
-    setShadeName(shadeName);
+    var variableName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : '';
+    setShadeName(variableName || shadeName);
     !ColorPickerUtils.isGradient(colorValue) ? setPreviousSolidColor(colorValue) : setPreviousGradientColor(colorValue);
     var isGradient = ColorPickerUtils.isGradient(newColor);
     var newColorVar = {
       value: newColor,
-      name: variables && !isGradient && ColorPickerUtils.findVariable(variables, newColor) || ''
+      name: variableName || ''
     };
     var colorObject = ColorPickerUtils.getAllColorTypes(newColorVar);
     var colorDegrees = newColor.match(/(linear|radial)-gradient\([^)]*?([0-9.]+)deg/);
@@ -101,15 +106,21 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     setA(val);
   };
   var handleCancel = function handleCancel() {
-    setColor(savedColorRef.current);
+    var _savedColorRef$curren = savedColorRef.current,
+      value = _savedColorRef$curren.value,
+      name = _savedColorRef$curren.name;
+    setColor(value, '', name || '');
     onCancel === null || onCancel === void 0 ? void 0 : onCancel();
   };
   var handleSave = function handleSave() {
     var newColorVar = {
       value: colorValue,
-      name: variables && ColorPickerUtils.findVariable(variables, colorValue) || ''
+      name: variables && ColorPickerUtils.findVariable(variables, colorValue) || currentSelectedVariable || ''
+    };
+    savedColorRef.current = {
+      value: colorValue,
+      name: newColorVar.name
     };
-    savedColorRef.current = colorValue;
     onSave === null || onSave === void 0 ? void 0 : onSave(ColorPickerUtils.getAllColorTypes(newColorVar));
   };
   return {
@@ -141,7 +152,8 @@ var useSetupColorPicker = function useSetupColorPicker(_ref) {
     isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
     setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
     degrees: degrees,
-    shadeName: shadeName
+    shadeName: shadeName,
+    currentSelectedVariable: currentSelectedVariable
   };
 };
 

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,2BAA2B,qFAAyF;AACpH,+BAA+B,8FAAkG;AACjI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/toast/components/toast.d.ts

@@ -1,4 +1,4 @@
 import { TToastProps } from "./toast_components_types";
 import React from 'react';
 import { PropsWithChildren } from 'react';
-export declare const Toast: ({ type, header, children, slideSide, closeable, ...rest }: PropsWithChildren<TToastProps>) => React.JSX.Element;
+export declare const Toast: ({ type, children, slideSide, closeable, ...rest }: PropsWithChildren<TToastProps>) => React.JSX.Element;

package/build/esm/packages/aurora/src/components/toast/components/toast.js

@@ -2,15 +2,15 @@ import React from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
 import { Stack } from '../../stack/stack.js';
+import { Box } from '../../box/box.js';
 import { CloseLineIcon } from '../../../assets/icons/close_line_icon.js';
 import { MessageBox } from '../../message_box/message_box.js';
 import { Root, Close } from '@radix-ui/react-toast';
 import { TOAST_SLIDE_SIDE } from '../toast_constants.js';
 
-var _excluded = ["type", "header", "children", "slideSide", "closeable"];
+var _excluded = ["type", "children", "slideSide", "closeable"];
 var Toast = function Toast(_ref) {
   var type = _ref.type,
-    header = _ref.header,
     children = _ref.children,
     _ref$slideSide = _ref.slideSide,
     slideSide = _ref$slideSide === void 0 ? TOAST_SLIDE_SIDE.fromRight : _ref$slideSide,
@@ -24,14 +24,22 @@ var Toast = function Toast(_ref) {
     })
   }), /*#__PURE__*/React.createElement(MessageBox, {
     showIcon: true,
-    variant: type,
-    header: header
+    variant: type
   }, /*#__PURE__*/React.createElement(Stack, {
     justify: "between",
-    align: "center"
-  }, children, closeable ? (/*#__PURE__*/React.createElement(Close, null, /*#__PURE__*/React.createElement(CloseLineIcon, {
+    align: "start"
+  }, /*#__PURE__*/React.createElement(Box, {
+    backgroundColor: "transparent",
+    className: "aurora-mt-1"
+  }, children), closeable ? (/*#__PURE__*/React.createElement(Box, {
+    width: "auto",
+    backgroundColor: "transparent",
+    paddings: {
+      pt: '1'
+    }
+  }, /*#__PURE__*/React.createElement(Close, null, /*#__PURE__*/React.createElement(CloseLineIcon, {
     size: 16
-  }))) : null)));
+  })))) : null)));
 };
 
 export { Toast };

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

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "3.1.2",
+  "version": "3.1.4-2",
   "description": "aurora",
   "author": "zefirek",
   "license": "MIT",