@dreamcommerce/aurora 3.1.28 → 3.1.30

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { formatInputValues, high, low } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
 import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
@@ -22,9 +22,9 @@ var GradientType = function GradientType() {
     var remaining = value.split(/,(.+)/)[1];
     onChange("radial-gradient(circle, ".concat(remaining));
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: defaultStyles.rbgcpControlBtnWrapper
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     onClick: handleLinear,
     id: "rbgcp-linear-btn",
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpControlBtn), isLinear && defaultStyles.rbgcpControlBtnSelected),
@@ -33,9 +33,9 @@ var GradientType = function GradientType() {
     onKeyDown: function onKeyDown() {
       return;
     }
-  }, /*#__PURE__*/React.createElement(LinearIcon, {
+  }, /*#__PURE__*/React__default.createElement(LinearIcon, {
     color: isLinear ? '#568CF5' : ''
-  })), /*#__PURE__*/React.createElement("div", {
+  })), /*#__PURE__*/React__default.createElement("div", {
     onClick: handleRadial,
     id: "rbgcp-radial-btn",
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpControlBtn), isRadial && defaultStyles.rbgcpControlBtnSelected),
@@ -44,7 +44,7 @@ var GradientType = function GradientType() {
     onKeyDown: function onKeyDown() {
       return;
     }
-  }, /*#__PURE__*/React.createElement(RadialIcon, {
+  }, /*#__PURE__*/React__default.createElement(RadialIcon, {
     color: isRadial ? '#568CF5' : ''
   })));
 };
@@ -57,11 +57,11 @@ var StopPicker = function StopPicker() {
   var handleMove = function handleMove(newVal) {
     handleGradient(currentColor, formatInputValues(parseInt(newVal), 0, 100));
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.rbgcpControlBtnWrapper), defaultStyles.rbgcpControlInputWrap), defaultStyles.rbgcpStopInputWrap), {}, {
       paddingLeft: 8
     })
-  }, /*#__PURE__*/React.createElement(StopIcon, null), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement(StopIcon, null), /*#__PURE__*/React__default.createElement("input", {
     value: currentLeft,
     id: "rbgcp-stop-input",
     onChange: function onChange(e) {
@@ -81,16 +81,16 @@ var DegreePicker = function DegreePicker() {
     var remaining = value.split(/,(.+)/)[1];
     onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.rbgcpControlBtnWrapper), defaultStyles.rbgcpControlInputWrap), defaultStyles.rbgcpDegreeInputWrap)
-  }, /*#__PURE__*/React.createElement(DegreesIcon, null), /*#__PURE__*/React.createElement("input", {
+  }, /*#__PURE__*/React__default.createElement(DegreesIcon, null), /*#__PURE__*/React__default.createElement("input", {
     value: degrees,
     id: "rbgcp-degree-input",
     onChange: function onChange(e) {
       return handleDegrees(e);
     },
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpControlInput), defaultStyles.rbgcpDegreeInput)
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpDegreeIcon), {}, {
       position: 'absolute',
       right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
@@ -119,7 +119,7 @@ var DeleteBtn = function DeleteBtn() {
       createGradientStr(remaining);
     }
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     onClick: deletePoint,
     style: _objectSpread2(_objectSpread2({}, controlBtnStyles(false, defaultStyles)), {}, {
       width: 28,
@@ -131,7 +131,7 @@ var DeleteBtn = function DeleteBtn() {
     onKeyDown: function onKeyDown() {
       return;
     }
-  }, /*#__PURE__*/React.createElement(DeleteBinLineIcon, {
+  }, /*#__PURE__*/React__default.createElement(DeleteBinLineIcon, {
     className: "aurora-w-4 aurora-h-4 aurora-stroke-0"
   }));
 };
@@ -146,7 +146,7 @@ var GradientControls = function GradientControls(_ref) {
   var _usePicker5 = usePicker(),
     gradientType = _usePicker5.gradientType,
     defaultStyles = _usePicker5.defaultStyles;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpControlBtnWrapper), {}, {
       marginTop: 12,
       marginBottom: -4,
@@ -154,11 +154,11 @@ var GradientControls = function GradientControls(_ref) {
       paddingLeft: hideGradientType ? 4 : 0
     }),
     id: "rbgcp-gradient-controls-wrap"
-  }, !hideGradientType && /*#__PURE__*/React.createElement(GradientType, null), /*#__PURE__*/React.createElement("div", {
+  }, !hideGradientType && /*#__PURE__*/React__default.createElement(GradientType, null), /*#__PURE__*/React__default.createElement("div", {
     style: {
       width: 53
     }
-  }, !hideGradientAngle && gradientType === 'linear-gradient' && /*#__PURE__*/React.createElement(DegreePicker, null)), !hideGradientStop && /*#__PURE__*/React.createElement(StopPicker, null), /*#__PURE__*/React.createElement(DeleteBtn, null));
+  }, !hideGradientAngle && gradientType === 'linear-gradient' && /*#__PURE__*/React__default.createElement(DegreePicker, null)), !hideGradientStop && /*#__PURE__*/React__default.createElement(StopPicker, null), /*#__PURE__*/React__default.createElement(DeleteBtn, null));
 };
 
 export { GradientControls };

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

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useEffect } from 'react';
+import React__default, { useRef, useCallback, useEffect } from 'react';
 import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
 import { getHandleValue } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
@@ -67,14 +67,14 @@ var Hue = function Hue() {
       window.removeEventListener('mousemove', handleMove);
     };
   }, [handleHue]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     ref: containerRef,
     style: {
       height: 12,
       cursor: 'ew-resize',
       position: 'relative'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     tabIndex: 0,
     role: "button",
     style: {
@@ -92,7 +92,7 @@ var Hue = function Hue() {
       boxSizing: 'border-box'
     },
     onMouseDown: handleDown
-  }), /*#__PURE__*/React.createElement("canvas", {
+  }), /*#__PURE__*/React__default.createElement("canvas", {
     ref: barRef,
     height: "12px",
     width: "".concat(squareWidth, "px"),

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

@@ -1,4 +1,4 @@
-import React, { useRef, useCallback, useEffect } from 'react';
+import React__default, { useRef, useCallback, useEffect } from 'react';
 import { objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { getHandleValue } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js';
 import { usePicker } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
@@ -58,7 +58,7 @@ var Opacity = function Opacity() {
       window.removeEventListener('mousemove', handleMove);
     };
   }, [handleOpacity]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     ref: containerRef,
     onMouseDown: handleDown,
     style: {
@@ -66,19 +66,19 @@ var Opacity = function Opacity() {
       cursor: 'ew-resize',
       position: 'relative'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpCheckered), {}, {
       width: '100%',
       height: 12
     })
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpHandle), {}, {
       left: left * (hc === null || hc === void 0 ? void 0 : hc.a),
       top: -2,
       width: 16,
       height: 16
     })
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpOpacityOverlay), {}, {
       background: bg
     }),

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

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, useCallback } from 'react';
+import React__default, { useState, useRef, useEffect, useCallback } from 'react';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import tinycolor from '../../../../../../../external/tinycolor2/esm/tinycolor.js';
 import { config } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/constants.js';
@@ -100,12 +100,12 @@ var Square = function Square() {
       window.removeEventListener('mousemove', handleMove);
     };
   }, [handleMove]);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     style: {
       position: 'relative'
     },
     className: "aurora-cursor-pointer"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     ref: squareRef,
     onMouseUp: stopDragging,
     onTouchEnd: stopDragging,
@@ -115,7 +115,7 @@ var Square = function Square() {
       position: 'relative',
       cursor: 'ew-cross'
     }
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2(_objectSpread2({}, defaultStyles.rbgcpHandle), {}, {
       transform: "translate(".concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.x) || 0, "px, ").concat((dragPos === null || dragPos === void 0 ? void 0 : dragPos.y) || 0, "px)")
     }, dragging ? {
@@ -125,14 +125,14 @@ var Square = function Square() {
       height: 16
     }),
     onMouseDown: handleMouseDown
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     style: _objectSpread2(_objectSpread2({}, defaultStyles.rbgcpCanvasWrapper), {}, {
       height: squareHeight
     }),
     onClick: function onClick(e) {
       return handleClick(e);
     }
-  }, /*#__PURE__*/React.createElement("canvas", {
+  }, /*#__PURE__*/React__default.createElement("canvas", {
     ref: canvas,
     id: "paintSquare",
     width: "".concat(squareWidth, "px"),

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { useColorPicker } from '../hooks/use_color_picker.js';
@@ -61,13 +61,13 @@ var ColorPickerShades = function ColorPickerShades() {
     s: s,
     l: 5
   }];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-pt-0.5"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text"
-  }, /*#__PURE__*/React.createElement("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "aurora-text-xs aurora-font-medium"
-  }, "".concat(t('Shades of color')))), /*#__PURE__*/React.createElement("div", {
+  }, "".concat(t('Shades of color')))), /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-grid aurora-grid-cols-12 aurora-gap-1"
   }, shades.map(function (shade, index) {
     var colorTiny = ColorPickerUtils.getTinyColorInstance(shade);
@@ -76,7 +76,7 @@ var ColorPickerShades = function ColorPickerShades() {
       setColor(colorHex);
       onPickShade === null || onPickShade === void 0 ? void 0 : onPickShade(colorHex);
     };
-    return /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    return /*#__PURE__*/React__default.createElement(ColorPickerSwatch, {
       className: "aurora-cursor-pointer",
       size: "small",
       onClick: handleOnClick,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default 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';
@@ -20,14 +20,14 @@ var ColorPickerSwatch = function ColorPickerSwatch(_ref) {
   };
   var shouldApplyActiveBorder = hasActiveBorder && !variableName && tinycolor(activeColor).toHex() === color;
   var currentSelected = hasActiveBorder && variableName && variableName === currentSelectedVariable;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.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 || currentSelected
     }, className),
     onClick: handleOnClick
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     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_variables.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React__default, { 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 { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
@@ -40,20 +40,20 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     name: neutral.name
   });
   var allShades = [].concat(_toConsumableArray(primaryShades), _toConsumableArray(secondaryShades), _toConsumableArray(neutralShades));
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-mt-3.5"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     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("p", {
+  }, /*#__PURE__*/React__default.createElement("p", {
     className: "aurora-text-xs aurora-font-medium"
-  }, "".concat(t('Theme colors'))), /*#__PURE__*/React.createElement("div", {
+  }, "".concat(t('Theme colors'))), /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-items-start aurora-justify-center aurora-h-4 aurora-w-4"
-  }, /*#__PURE__*/React.createElement(ArrowDownSFillIcon, {
+  }, /*#__PURE__*/React__default.createElement(ArrowDownSFillIcon, {
     className: cn('aurora-h-full aurora-w-full', isOpen && 'aurora-rotate-180')
-  }))), /*#__PURE__*/React.createElement("div", {
+  }))), /*#__PURE__*/React__default.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);
@@ -61,9 +61,9 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var handleOnClick = function handleOnClick() {
       return setColor(colorHex, '', variable.name);
     };
-    return /*#__PURE__*/React.createElement(TooltipProvider, {
+    return /*#__PURE__*/React__default.createElement(TooltipProvider, {
       key: "".concat(variable, "-").concat(index)
-    }, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    }, /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, /*#__PURE__*/React__default.createElement(ColorPickerSwatch, {
       className: "aurora-cursor-pointer",
       size: "small",
       onClick: handleOnClick,
@@ -71,14 +71,14 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
       cssColor: ColorPickerUtils.getHexValueString(colorTiny),
       hasActiveBorder: true,
       variableName: variable.name
-    })), /*#__PURE__*/React.createElement(TooltipContent, {
+    })), /*#__PURE__*/React__default.createElement(TooltipContent, {
       variant: "dark"
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }, /*#__PURE__*/React__default.createElement(Typography, {
       size: "xs",
       weight: "medium",
       color: CSS_TEXT_COLOR_TOKENS.inverse
     }, "".concat(t(variable.name))))));
-  })), isOpen && (/*#__PURE__*/React.createElement("div", {
+  })), isOpen && (/*#__PURE__*/React__default.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);
@@ -86,18 +86,18 @@ var ColorPickerVariables = function ColorPickerVariables(_ref) {
     var handleOnClick = function handleOnClick() {
       return setColor(colorHex, variable.name);
     };
-    return /*#__PURE__*/React.createElement(TooltipProvider, {
+    return /*#__PURE__*/React__default.createElement(TooltipProvider, {
       key: "".concat(variable, "-").concat(index)
-    }, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    }, /*#__PURE__*/React__default.createElement(Tooltip, null, /*#__PURE__*/React__default.createElement(TooltipTrigger, null, /*#__PURE__*/React__default.createElement(ColorPickerSwatch, {
       className: "aurora-cursor-pointer",
       size: "small",
       onClick: handleOnClick,
       color: colorHex,
       cssColor: ColorPickerUtils.getHexValueString(colorTiny),
       hasActiveBorder: true
-    })), /*#__PURE__*/React.createElement(TooltipContent, {
+    })), /*#__PURE__*/React__default.createElement(TooltipContent, {
       variant: "dark"
-    }, /*#__PURE__*/React.createElement(Typography, {
+    }, /*#__PURE__*/React__default.createElement(Typography, {
       size: "xs",
       weight: "medium",
       color: CSS_TEXT_COLOR_TOKENS.inverse

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

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

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

@@ -1,4 +1,4 @@
 import { IColorPickerPureProps } from '../color_picker_types';
 import React from 'react';
-declare const ColorPickerPure: React.FC<IColorPickerPureProps>;
+declare const ColorPickerPure: React.ForwardRefExoticComponent<IColorPickerPureProps & React.RefAttributes<HTMLButtonElement>>;
 export default ColorPickerPure;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default 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';
@@ -14,7 +14,7 @@ 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 ColorPickerPure = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     name = _ref.name,
     errors = _ref.errors,
@@ -35,39 +35,41 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
     handleSave();
     setIsColorPickerOpened(false);
   };
-  return /*#__PURE__*/React.createElement(Popover, {
+  return /*#__PURE__*/React__default.createElement(Popover, {
     open: isColorPickerOpened,
     onOpenChange: function onOpenChange(value) {
       return !value && handleClosePopover();
     }
-  }, /*#__PURE__*/React.createElement(PickerContextWrapper, {
+  }, /*#__PURE__*/React__default.createElement(PickerContextWrapper, {
     value: safeValue,
     defaultStyles: defaultStyles,
     onChange: setColor,
     squareWidth: COLOR_PICKER_WIDTH,
     squareHeight: COLOR_PICKER_HEIGHT,
     hideOpacity: false
-  }, /*#__PURE__*/React.createElement(PopoverTrigger, {
+  }, /*#__PURE__*/React__default.createElement(PopoverTrigger, {
     onClick: function onClick(ev) {
       ev.preventDefault();
       setIsColorPickerOpened(true);
     },
     disabled: disabled,
-    className: cn('aurora-w-full', triggerClassName)
-  }, !children && (/*#__PURE__*/React.createElement(ColorPickerInput, {
+    className: cn('aurora-w-full', triggerClassName),
+    ref: ref
+  }, !children && (/*#__PURE__*/React__default.createElement(ColorPickerInput, {
     id: id,
     name: name,
     errors: errors,
     disabled: disabled,
-    preElement: /*#__PURE__*/React.createElement(ColorPickerSwatch, {
+    preElement: /*#__PURE__*/React__default.createElement(ColorPickerSwatch, {
       color: color,
       cssColor: color,
       size: "big"
     })
-  })), children), /*#__PURE__*/React.createElement(PopoverContent, _objectSpread2({
+  })), children), /*#__PURE__*/React__default.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))));
-};
+  }, rest), /*#__PURE__*/React__default.createElement(ColorPickerContent, null))));
+});
+ColorPickerPure.displayName = 'ColorPickerPure';
 
 export default ColorPickerPure;
 //# sourceMappingURL=pure_color_picker.js.map

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

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { cn } from '../../utilities/cn.js';
 
 var Control = function Control(_ref) {
   var children = _ref.children,
     classname = _ref.classname;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: cn("aurora-flex aurora-gap-1 aurora-w-full", classname)
   }, children);
 };

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

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { Stack } from '../../stack/stack.js';
 import { Control } from '../../control/control.js';
@@ -24,7 +24,7 @@ var CheckboxControl = function CheckboxControl(_ref) {
     required = _ref$required === void 0 ? false : _ref$required,
     onCheckedChange = _ref.onCheckedChange,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var _React$useState = React.useState(checked),
+  var _React$useState = React__default.useState(checked),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     _checked = _React$useState2[0],
     setChecked = _React$useState2[1];
@@ -32,9 +32,9 @@ var CheckboxControl = function CheckboxControl(_ref) {
     setChecked(checked);
     onCheckedChange === null || onCheckedChange === void 0 ? void 0 : onCheckedChange(checked);
   };
-  return /*#__PURE__*/React.createElement(Control, {
+  return /*#__PURE__*/React__default.createElement(Control, {
     classname: "aurora-items-start aurora-gap-3"
-  }, /*#__PURE__*/React.createElement(Checkbox, _objectSpread2({
+  }, /*#__PURE__*/React__default.createElement(Checkbox, _objectSpread2({
     id: id,
     name: name,
     value: value,
@@ -43,15 +43,15 @@ var CheckboxControl = function CheckboxControl(_ref) {
     required: required,
     disabled: disabled,
     errors: errors
-  }, rest)), /*#__PURE__*/React.createElement(Stack, {
+  }, rest)), /*#__PURE__*/React__default.createElement(Stack, {
     spacing: "0.5",
     direction: "column"
-  }, label ? (/*#__PURE__*/React.createElement(Label, {
+  }, label ? (/*#__PURE__*/React__default.createElement(Label, {
     htmlFor: id,
     required: required,
     disabled: disabled,
     tooltip: tooltip
-  }, label)) : null, helperText ? /*#__PURE__*/React.createElement(HelperText, null, helperText) : null, errors ? /*#__PURE__*/React.createElement(ErrorList, {
+  }, label)) : null, helperText ? /*#__PURE__*/React__default.createElement(HelperText, null, helperText) : null, errors ? /*#__PURE__*/React__default.createElement(ErrorList, {
     errors: errors
   }) : null));
 };

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

@@ -1,3 +1,8 @@
 import React from 'react';
-import { TColorPickerControlProps } from './color_picker_control_types';
-export declare const ColorPickerControl: React.FC<TColorPickerControlProps>;
+export declare const ColorPickerControl: React.ForwardRefExoticComponent<import("../../color_picker/color_picker_types").IColorPickerProps & {
+    label?: React.ReactNode;
+    helperText?: React.ReactNode;
+    tooltip?: React.ReactNode;
+    errors?: string | string[] | undefined;
+    required?: boolean | undefined;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> & React.RefAttributes<HTMLButtonElement>>;

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
 import { Control } from '../../control/control.js';
@@ -8,7 +8,7 @@ import { Label } from '../../label/label.js';
 import { ColorPicker } from '../../color_picker/color_picker.js';
 
 var _excluded = ["label", "tooltip", "required", "id", "name", "errors", "value", "colorVariables", "onChange", "onCancel", "onSave", "onPickShade", "withGradient", "helperText", "disabled"];
-var ColorPickerControl = function ColorPickerControl(_ref) {
+var ColorPickerControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var label = _ref.label,
     tooltip = _ref.tooltip,
     _ref$required = _ref.required,
@@ -26,13 +26,13 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
     helperText = _ref.helperText,
     disabled = _ref.disabled,
     rest = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement(Control, {
+  return /*#__PURE__*/React__default.createElement(Control, {
     classname: "aurora-flex-col"
-  }, label ? (/*#__PURE__*/React.createElement(Label, {
+  }, label ? (/*#__PURE__*/React__default.createElement(Label, {
     htmlFor: id,
     tooltip: tooltip,
     required: required
-  }, label)) : null, /*#__PURE__*/React.createElement(ColorPicker, _objectSpread2({
+  }, label)) : null, /*#__PURE__*/React__default.createElement(ColorPicker, _objectSpread2({
     id: id,
     name: name,
     value: value,
@@ -43,13 +43,14 @@ var ColorPickerControl = function ColorPickerControl(_ref) {
     onSave: onSave,
     onPickShade: onPickShade,
     withGradient: withGradient,
-    disabled: disabled
-  }, rest)), helperText ? /*#__PURE__*/React.createElement(HelperText, {
+    disabled: disabled,
+    ref: ref
+  }, rest)), helperText ? /*#__PURE__*/React__default.createElement(HelperText, {
     color: disabled ? CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
-  }, helperText) : null, errors ? /*#__PURE__*/React.createElement(ErrorList, {
+  }, helperText) : null, errors ? /*#__PURE__*/React__default.createElement(ErrorList, {
     errors: errors
   }) : null);
-};
+});
 ColorPickerControl.displayName = 'ColorPickerControl';
 
 export { ColorPickerControl };

package/build/esm/packages/aurora/src/components/controls/color_picker_control/color_picker_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;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;"}