@dreamcommerce/aurora 3.0.0-98 → 3.0.0

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

@@ -1,19 +1,31 @@
 import React from 'react';
+import { cn } from '../../../utilities/cn.js';
 import { COLOR_PICKER_SWATCH_SIZES } from '../color_picker_constants.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import tinycolor from '../../../../../../external/tinycolor2/esm/tinycolor.js';
 
 var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   var color = _ref.color,
     cssColor = _ref.cssColor,
     size = _ref.size,
-    onClick = _ref.onClick;
+    hasActiveBorder = _ref.hasActiveBorder,
+    onClick = _ref.onClick,
+    className = _ref.className;
+  var _useColorPicker = useColorPicker(),
+    activeColor = _useColorPicker.color;
   var handleOnClick = function handleOnClick() {
     onClick === null || onClick === void 0 ? void 0 : onClick(color);
   };
+  var shouldApplyActiveBorder = hasActiveBorder && tinycolor(activeColor).toHex() === color;
   return /*#__PURE__*/React.createElement("div", {
-    className: "color-picker__swatch aurora-relative aurora-border aurora-rounded-2 aurora-overflow-hidden \n                ".concat(size === COLOR_PICKER_SWATCH_SIZES.small && 'aurora-w-4 aurora-h-4', "\n                ").concat(size === COLOR_PICKER_SWATCH_SIZES.big && 'aurora-w-7 aurora-h-7', "\n            "),
+    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
+    }, className),
     onClick: handleOnClick
   }, /*#__PURE__*/React.createElement("div", {
-    className: "aurora-absolute aurora-inset-y-0 aurora-inset-x-0 aurora-rounded-2 aurora-shadow-s",
+    className: "aurora-absolute aurora-inset-y-0 aurora-inset-x-0 aurora-shadow-s",
     style: {
       background: "".concat(cssColor)
     }

package/build/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;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;"}

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

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

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

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

@@ -1,15 +1,14 @@
 import React from 'react';
-import { ColorPickerUtils } from '../color_picker_utils.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
 
 var CurrentColorPreview = function CurrentColorPreview() {
   var _useColorPicker = useColorPicker(),
     color = _useColorPicker.color;
   return /*#__PURE__*/React.createElement("div", {
-    className: "aurora-self-stretch aurora-w-6 aurora-border aurora-rounded-4",
+    className: "aurora-w-6 aurora-h-6 aurora-border aurora-rounded-4",
     "aria-label": "color picker current color value",
     style: {
-      background: ColorPickerUtils.isGradient(color.value) ? color.value : "#".concat(color.value)
+      background: color
     }
   });
 };

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+BAA+B,qFAAyF;AACxH,iCAAiC,iFAAqF;AACtH,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;"}

package/build/esm/packages/aurora/src/components/color_picker/hooks/{setup_color_piceker.d.ts → setup_color_picker.d.ts}

@@ -1,22 +1,22 @@
 /// <reference types="react" />
-import { ColorPickerVariable, IColorPickerColor, IColorPickerColorVariables, TGradientType } from '../color_picker_types';
+import { IColorPickerColor, IColorPickerColorVariables, TGradientType } from '../color_picker_types';
 export declare type ColorPickerHookProps = {
-    initialColor?: string | ColorPickerVariable;
+    value?: string;
     onChange?: (color: IColorPickerColor) => void;
     onCancel?: () => void;
     onSave?: (color: IColorPickerColor) => void;
     colorVariables?: IColorPickerColorVariables;
     withGradient?: boolean;
 };
-declare const useSetupColorPicker: ({ initialColor, onChange, onCancel, onSave, colorVariables, withGradient: isWithGradient }: ColorPickerHookProps) => {
-    color: ColorPickerVariable;
-    previousSolidColor: string | undefined;
-    previousGradientColor: string | undefined;
-    setColor: (newColor: string | ColorPickerVariable) => void;
+declare const useSetupColorPicker: ({ value, onChange, onCancel, onSave, colorVariables, withGradient: isWithGradient }: ColorPickerHookProps) => {
+    color: string;
+    previousSolidColor: string;
+    previousGradientColor: string;
+    setColor: (newColor: string, shadeName?: string) => void;
     hex: string;
     hslArr: number[];
-    handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    alphaValue: string;
+    handleOnChangeAlpha: (value: number) => void;
+    alpha: number;
     rgbaArr: number[];
     setR: (newR: number) => void;
     setG: (newG: number) => void;
@@ -32,5 +32,11 @@ declare const useSetupColorPicker: ({ initialColor, onChange, onCancel, onSave,
     withGradient: boolean;
     isColorPickerOpened: boolean;
     setIsColorPickerOpened: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    typedInputValue: string;
+    setTypedInputValue: import("react").Dispatch<import("react").SetStateAction<string>>;
+    isColorPickerCurrentlyUsed: boolean;
+    setIsColorPickerCurrentlyUsed: import("react").Dispatch<import("react").SetStateAction<boolean>>;
+    degrees: number;
+    shadeName: string;
 };
 export default useSetupColorPicker;

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

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

package/build/{cjs/external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js.map → 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;AACA;AACA,wBAAwB,2CAA+C;AACvE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

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

@@ -2,7 +2,11 @@ import { useContext } from 'react';
 import { ColorPickerContext } from '../color_picker_context.js';
 
 var useColorPicker = function useColorPicker() {
-  return useContext(ColorPickerContext);
+  var context = useContext(ColorPickerContext);
+  if (!context) {
+    throw new Error('ColorPickerContext is missing');
+  }
+  return context;
 };
 
 export { useColorPicker };

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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;"}

package/build/esm/packages/aurora/src/components/controls/anchor_presets_control/anchor_presets_control.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { TAnchorPresetsControlProps } from "./anchor_presets_control_types";
+export declare const AnchorPresetsControl: React.FC<TAnchorPresetsControlProps>;

package/build/esm/packages/aurora/src/components/controls/anchor_presets_control/anchor_presets_control.js

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Stack } from '../../stack/stack.js';
+import { Control } from '../../control/control.js';
+import { ErrorList } from '../../error_list/error_list.js';
+import { HelperText } from '../../helper_text/helper_text.js';
+import { Label } from '../../label/label.js';
+import { AnchorPresets } from '../../anchor_presets/anchor_presets.js';
+
+var AnchorPresetsControl = function AnchorPresetsControl(_ref) {
+  var label = _ref.label,
+    value = _ref.value,
+    tooltip = _ref.tooltip,
+    helperText = _ref.helperText,
+    errors = _ref.errors,
+    onChange = _ref.onChange,
+    className = _ref.className,
+    buttonClassName = _ref.buttonClassName;
+  return /*#__PURE__*/React.createElement(Control, {
+    classname: "aurora-flex-col aurora-gap-3"
+  }, /*#__PURE__*/React.createElement(Stack, {
+    spacing: "0.5",
+    direction: "column"
+  }, label ? (/*#__PURE__*/React.createElement(Label, {
+    tooltip: tooltip,
+    className: "aurora-text"
+  }, label)) : null, helperText ? /*#__PURE__*/React.createElement(HelperText, null, helperText) : null), /*#__PURE__*/React.createElement(AnchorPresets, {
+    value: value,
+    onChange: onChange,
+    className: className,
+    buttonClassName: buttonClassName
+  }), errors ? /*#__PURE__*/React.createElement(ErrorList, {
+    errors: errors
+  }) : null);
+};
+
+export { AnchorPresetsControl };
+//# sourceMappingURL=anchor_presets_control.js.map

package/build/esm/packages/aurora/src/components/controls/anchor_presets_control/anchor_presets_control.js.map

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

package/build/esm/packages/aurora/src/components/controls/anchor_presets_control/anchor_presets_control_types.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { TAnchorPresetsProps } from "../../anchor_presets/anchor_presets_types";
+export declare type TAnchorPresetsControlProps = TAnchorPresetsProps & {
+    label?: string | React.ReactNode;
+    tooltip?: string | React.ReactNode;
+    helperText?: string | React.ReactNode;
+    errors?: string | string[];
+};

package/build/esm/packages/aurora/src/components/controls/anchor_presets_control/anchor_presets_control_types.js

@@ -0,0 +1,3 @@
+import 'react';
+import '@auroraComponents/anchor_presets/anchor_presets_types';
+//# sourceMappingURL=anchor_presets_control_types.js.map

package/build/esm/packages/aurora/src/components/controls/anchor_presets_control/anchor_presets_control_types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"anchor_presets_control_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/anchor_presets_control/anchor_presets_control_types.ts"],"names":[],"mappings":"AAAA,OAAkB,OAAO,CAAC;AAE1B,OAAoC,uDAAuD,CAAC"}

package/build/esm/packages/aurora/src/components/controls/checkbox_control/checkbox_control.js

@@ -1,9 +1,12 @@
 import React from 'react';
-import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { Label } from '../../label/label.js';
-import { HelperText } from '../../helper_text/helper_text.js';
-import { ErrorList } from '../../error_list/error_list.js';
+import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
+import { cn } from '../../../utilities/cn.js';
+import { Stack } from '../../stack/stack.js';
 import { Control } from '../../control/control.js';
+import { ErrorList } from '../../error_list/error_list.js';
+import { HelperText } from '../../helper_text/helper_text.js';
+import { Label } from '../../label/label.js';
 import { Checkbox } from '../../checkbox/checkbox.js';
 
 var _excluded = ["id", "name", "label", "value", "tooltip", "helperText", "errors", "checked", "disabled", "required", "onCheckedChange"];
@@ -23,28 +26,41 @@ var CheckboxControl = function CheckboxControl(_ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     onCheckedChange = _ref.onCheckedChange,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Control, null, /*#__PURE__*/React.createElement(Checkbox, _objectSpread2({
+  var _React$useState = React.useState(checked),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    _checked = _React$useState2[0],
+    setChecked = _React$useState2[1];
+  var handleCheckedChange = function handleCheckedChange(checked) {
+    setChecked(checked);
+    onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(checked);
+  };
+  return /*#__PURE__*/React.createElement(Control, {
+    classname: "aurora-items-start aurora-gap-3"
+  }, /*#__PURE__*/React.createElement(Checkbox, _objectSpread2({
     id: id,
     name: name,
     value: value,
     checked: checked,
-    onCheckedChange: onCheckedChange,
+    onCheckedChange: handleCheckedChange,
     required: required,
     disabled: disabled,
     errors: errors
-  }, rest)), /*#__PURE__*/React.createElement("div", {
-    className: "aurora-ml-2 aurora-flex aurora-flex-col aurora-gap-1"
-  }, label && (/*#__PURE__*/React.createElement("div", {
-    className: "aurora-mb-1"
-  }, /*#__PURE__*/React.createElement(Label, {
+  }, rest)), /*#__PURE__*/React.createElement(Stack, {
+    spacing: "0.5",
+    direction: "column"
+  }, label ? (/*#__PURE__*/React.createElement(Label, {
     htmlFor: id,
     required: required,
     disabled: disabled,
     tooltip: tooltip,
-    className: "aurora-text"
-  }, label))), helperText && /*#__PURE__*/React.createElement(HelperText, null, helperText), errors && /*#__PURE__*/React.createElement(ErrorList, {
+    className: cn({
+      'aurora-font-semibold': _checked
+    })
+  }, label)) : null, helperText ? /*#__PURE__*/React.createElement(HelperText, {
+    color: disabled ? CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React.createElement(ErrorList, {
     errors: errors
-  })));
+  }) : null));
 };
 
 export { CheckboxControl };

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