@dreamcommerce/aurora 3.0.0-32 → 3.0.0-320

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

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

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

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

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

@@ -0,0 +1,116 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
+var cn = require('../../../utilities/cn.js');
+var typography = require('../../typography/typography.js');
+var tooltip = require('../../tooltip/tooltip.js');
+var tooltip_trigger = require('../../tooltip/components/tooltip_trigger.js');
+var tooltip_content = require('../../tooltip/components/tooltip_content.js');
+var tooltip_provider = require('../../tooltip/context/tooltip_provider.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var color_picker_swatch = require('./color_picker_swatch.js');
+var color_picker_utils = require('../color_picker_utils.js');
+var arrow_down_s_fill = require('../../../assets/icons/arrow_down_s_fill.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerVariables = function ColorPickerVariables(_ref) {
+  var variables = _ref.variables;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    setColor = _useColorPicker.setColor;
+  var _useTranslation = useTranslation.useTranslation(),
+    _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  var _useState = React.useState(false),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var primary = variables.primary,
+    secondary = variables.secondary,
+    neutral = variables.neutral;
+  var primaryShades = color_picker_utils.ColorPickerUtils.getVariableShades({
+    color: primary.value,
+    name: primary.name
+  });
+  var secondaryShades = color_picker_utils.ColorPickerUtils.getVariableShades({
+    color: secondary.value,
+    name: secondary.name
+  });
+  var neutralShades = color_picker_utils.ColorPickerUtils.getVariableShades({
+    color: neutral.value,
+    name: neutral.name
+  });
+  var allShades = [].concat(_rollupPluginBabelHelpers.toConsumableArray(primaryShades), _rollupPluginBabelHelpers.toConsumableArray(secondaryShades), _rollupPluginBabelHelpers.toConsumableArray(neutralShades));
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-mt-3.5"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-mb-1 aurora-text aurora-cursor-pointer",
+    onClick: function onClick() {
+      return setIsOpen(!isOpen);
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("p", {
+    className: "aurora-text-xs aurora-font-medium"
+  }, "".concat(t('Theme colors'))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-start aurora-justify-center aurora-h-4 aurora-w-4"
+  }, /*#__PURE__*/React__default['default'].createElement(arrow_down_s_fill.ArrowDownSFillIcon, {
+    className: cn.cn('aurora-h-full aurora-w-full', isOpen && 'aurora-rotate-180')
+  }))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-grid aurora-grid-cols-12 aurora-gap-1"
+  }, Object.values(variables).map(function (variable, index) {
+    var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
+    var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
+    var handleOnClick = function handleOnClick() {
+      return setColor(colorHex);
+    };
+    return /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, {
+      key: "".concat(variable, "-").concat(index)
+    }, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
+      size: "small",
+      onClick: handleOnClick,
+      color: colorHex,
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
+    })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
+      variant: "dark"
+    }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
+      size: "xs",
+      weight: "medium",
+      color: css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.inverse
+    }, variable.name))));
+  })), isOpen && (/*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-grid aurora-grid-cols-12 aurora-gap-1 aurora-mt-3"
+  }, allShades.map(function (variable, index) {
+    var colorTiny = color_picker_utils.ColorPickerUtils.getTinyColorInstance(variable.value);
+    var colorHex = color_picker_utils.ColorPickerUtils.getHexValue(colorTiny);
+    var handleOnClick = function handleOnClick() {
+      return setColor(colorHex, variable.name);
+    };
+    return /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, {
+      key: "".concat(variable, "-").concat(index)
+    }, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+      className: "aurora-cursor-pointer",
+      size: "small",
+      onClick: handleOnClick,
+      color: colorHex,
+      cssColor: color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
+      hasActiveBorder: true
+    })), /*#__PURE__*/React__default['default'].createElement(tooltip_content.TooltipContent, {
+      variant: "dark"
+    }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
+      size: "xs",
+      weight: "medium",
+      color: css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.inverse
+    }, variable.name))));
+  }))));
+};
+
+exports.ColorPickerVariables = ColorPickerVariables;
+//# sourceMappingURL=color_picker_variables.js.map

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

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

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

@@ -0,0 +1,25 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var use_color_picker = require('../hooks/use_color_picker.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var CurrentColorPreview = function CurrentColorPreview() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    color = _useColorPicker.color;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-w-6 aurora-h-6 aurora-border aurora-rounded-4",
+    "aria-label": "color picker current color value",
+    style: {
+      background: color
+    }
+  });
+};
+
+exports.CurrentColorPreview = CurrentColorPreview;
+//# sourceMappingURL=current_color_preview.js.map

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

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

@@ -0,0 +1,81 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var cn = require('../../../utilities/cn.js');
+var popover = require('../../popover/popover.js');
+var popover_trigger = require('../../popover/components/popover_trigger.js');
+var color_picker_constants = require('../color_picker_constants.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var color_picker_swatch = require('./color_picker_swatch.js');
+var utils = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/utils.js');
+var context = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+var styles = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js');
+var color_picker_content = require('./color_picker_content.js');
+var color_picker_input = require('./color_picker_input.js');
+var popover_content = require('../../popover/components/popover_content.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["id", "name", "errors", "disabled", "className", "children", "triggerClassName"];
+var ColorPickerPure = function ColorPickerPure(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    errors = _ref.errors,
+    disabled = _ref.disabled,
+    className = _ref.className,
+    children = _ref.children,
+    triggerClassName = _ref.triggerClassName,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    color = _useColorPicker.color,
+    setColor = _useColorPicker.setColor,
+    isColorPickerOpened = _useColorPicker.isColorPickerOpened,
+    setIsColorPickerOpened = _useColorPicker.setIsColorPickerOpened,
+    handleSave = _useColorPicker.handleSave;
+  var safeValue = utils.objectToString(color);
+  var defaultStyles = styles.getStyles(true);
+  var handleClosePopover = function handleClosePopover() {
+    handleSave();
+    setIsColorPickerOpened(false);
+  };
+  return /*#__PURE__*/React__default['default'].createElement(popover.Popover, {
+    open: isColorPickerOpened,
+    onOpenChange: function onOpenChange(value) {
+      return !value && handleClosePopover();
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(context['default'], {
+    value: safeValue,
+    defaultStyles: defaultStyles,
+    onChange: setColor,
+    squareWidth: color_picker_constants.COLOR_PICKER_WIDTH,
+    squareHeight: color_picker_constants.COLOR_PICKER_HEIGHT,
+    hideOpacity: false
+  }, /*#__PURE__*/React__default['default'].createElement(popover_trigger.PopoverTrigger, {
+    onClick: function onClick(ev) {
+      ev.preventDefault();
+      setIsColorPickerOpened(true);
+    },
+    disabled: disabled,
+    className: cn.cn('aurora-w-full', triggerClassName)
+  }, !children && (/*#__PURE__*/React__default['default'].createElement(color_picker_input.ColorPickerInput, {
+    id: id,
+    name: name,
+    errors: errors,
+    disabled: disabled,
+    preElement: /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
+      color: color,
+      cssColor: color,
+      size: "big"
+    })
+  })), children), /*#__PURE__*/React__default['default'].createElement(popover_content.PopoverContent, _rollupPluginBabelHelpers.objectSpread2({
+    className: cn.cn('aurora-rounded-16 aurora-overflow-hidden aurora-z-[99999] js__aurora-color-picker', className)
+  }, rest), /*#__PURE__*/React__default['default'].createElement(color_picker_content.ColorPickerContent, null))));
+};
+
+exports.default = ColorPickerPure;
+//# sourceMappingURL=pure_color_picker.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.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,oBAAoB,qFAAyF;AAC7G,sBAAsB,iFAAqF;AAC3G,qBAAqB,uFAA2F;AAChH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

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

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

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

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

@@ -0,0 +1,17 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var color_picker_context = require('../color_picker_context.js');
+
+var useColorPicker = function useColorPicker() {
+  var context = React.useContext(color_picker_context.ColorPickerContext);
+  if (!context) {
+    throw new Error('ColorPickerContext is missing');
+  }
+  return context;
+};
+
+exports.useColorPicker = useColorPicker;
+//# sourceMappingURL=use_color_picker.js.map

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

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

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var cn = require('../../utilities/cn.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var Control = function Control(_ref) {
+  var children = _ref.children,
+    classname = _ref.classname;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: cn.cn("aurora-flex aurora-gap-1 aurora-w-full", classname)
+  }, children);
+};
+
+exports.Control = Control;
+//# sourceMappingURL=control.js.map

package/build/cjs/packages/aurora/src/components/control/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;"}

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

@@ -0,0 +1,45 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var stack = require('../../stack/stack.js');
+var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
+var anchor_presets = require('../../anchor_presets/anchor_presets.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var AnchorPresetsControl = function AnchorPresetsControl(_ref) {
+  var label$1 = _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__default['default'].createElement(control.Control, {
+    classname: "aurora-flex-col aurora-gap-3"
+  }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    spacing: "0.5",
+    direction: "column"
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+    tooltip: tooltip,
+    className: "aurora-text"
+  }, label$1)) : null, helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText) : null), /*#__PURE__*/React__default['default'].createElement(anchor_presets.AnchorPresets, {
+    value: value,
+    onChange: onChange,
+    className: className,
+    buttonClassName: buttonClassName
+  }), errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+    errors: errors
+  }) : null);
+};
+
+exports.AnchorPresetsControl = AnchorPresetsControl;
+//# sourceMappingURL=anchor_presets_control.js.map

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

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

@@ -0,0 +1,75 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
+var cn = require('../../../utilities/cn.js');
+var stack = require('../../stack/stack.js');
+var control = require('../../control/control.js');
+var error_list = require('../../error_list/error_list.js');
+var helper_text = require('../../helper_text/helper_text.js');
+var label = require('../../label/label.js');
+var checkbox = require('../../checkbox/checkbox.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var _excluded = ["id", "name", "label", "value", "tooltip", "helperText", "errors", "checked", "disabled", "required", "onCheckedChange"];
+var CheckboxControl = function CheckboxControl(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    label$1 = _ref.label,
+    value = _ref.value,
+    tooltip = _ref.tooltip,
+    helperText = _ref.helperText,
+    errors = _ref.errors,
+    _ref$checked = _ref.checked,
+    checked = _ref$checked === void 0 ? false : _ref$checked,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    onCheckedChange = _ref.onCheckedChange,
+    rest = _rollupPluginBabelHelpers.objectWithoutProperties(_ref, _excluded);
+  var _React$useState = React__default['default'].useState(checked),
+    _React$useState2 = _rollupPluginBabelHelpers.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__default['default'].createElement(control.Control, {
+    classname: "aurora-items-start aurora-gap-3"
+  }, /*#__PURE__*/React__default['default'].createElement(checkbox.Checkbox, _rollupPluginBabelHelpers.objectSpread2({
+    id: id,
+    name: name,
+    value: value,
+    checked: checked,
+    onCheckedChange: handleCheckedChange,
+    required: required,
+    disabled: disabled,
+    errors: errors
+  }, rest)), /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    spacing: "0.5",
+    direction: "column"
+  }, label$1 ? (/*#__PURE__*/React__default['default'].createElement(label.Label, {
+    htmlFor: id,
+    required: required,
+    disabled: disabled,
+    tooltip: tooltip,
+    className: cn.cn({
+      'aurora-font-semibold': _checked
+    })
+  }, label$1)) : null, helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, {
+    color: disabled ? css_text_color_tokens.CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+    errors: errors
+  }) : null));
+};
+
+exports.CheckboxControl = CheckboxControl;
+//# sourceMappingURL=checkbox_control.js.map

package/build/cjs/packages/aurora/src/components/controls/checkbox_control/checkbox_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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}