@dreamcommerce/aurora 3.0.0-26 → 3.0.0-261

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

@@ -0,0 +1,201 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var color_picker_constants = require('./color_picker_constants.js');
+var formatters = require('../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js');
+var tinycolor = require('../../../../../external/tinycolor2/esm/tinycolor.js');
+
+var _ColorPickerUtils;
+var ColorPickerUtils = /*#__PURE__*/function () {
+  function ColorPickerUtils() {
+    _rollupPluginBabelHelpers.classCallCheck(this, ColorPickerUtils);
+  }
+  return _rollupPluginBabelHelpers.createClass(ColorPickerUtils, null, [{
+    key: "isGradient",
+    value: function isGradient(color) {
+      return color.includes('linear-gradient') || color.includes('radial-gradient');
+    }
+  }, {
+    key: "getColorPickerGradientValue",
+    value: function getColorPickerGradientValue(gradient) {
+      var _gradient$degrees;
+      return {
+        gradientType: gradient.gradientType,
+        angle: gradient.gradientType === color_picker_constants.GRADIENT_TYPES.radial ? undefined : parseFloat((_gradient$degrees = gradient.degrees) !== null && _gradient$degrees !== void 0 ? _gradient$degrees : '90deg'),
+        radialShape: gradient.gradientType === color_picker_constants.GRADIENT_TYPES.radial ? color_picker_constants.GRADIENT_RADIAL_SHAPES.circle : undefined,
+        colors: gradient.colors.map(function (_ref) {
+          var left = _ref.left,
+            value = _ref.value;
+          return {
+            stop: left,
+            value: "#".concat(ColorPickerUtils.getTinyColorInstance(value).toHex8())
+          };
+        })
+      };
+    }
+  }]);
+}();
+_ColorPickerUtils = ColorPickerUtils;
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
+  return tinycolor['default'](color);
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getColorPickerValue", function (color) {
+  var _color$name;
+  var initialColorValue = typeof color === 'string' ? color : color === null || color === void 0 ? void 0 : color.value;
+  if (!initialColorValue) return {
+    value: color_picker_constants.COLOR_PICKER_INITIAL_STATE,
+    name: ''
+  };
+  var parsedColorValue = initialColorValue ? _ColorPickerUtils.getTinyColorInstance(initialColorValue).toHex8() : color_picker_constants.COLOR_PICKER_INITIAL_STATE;
+  if (_ColorPickerUtils.isGradient(initialColorValue)) {
+    parsedColorValue = initialColorValue;
+  }
+  return {
+    value: parsedColorValue,
+    name: typeof color === 'string' ? '' : (_color$name = color === null || color === void 0 ? void 0 : color.name) !== null && _color$name !== void 0 ? _color$name : ''
+  };
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getRgbaValue", function (colorSet) {
+  return colorSet.toRgb();
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getHexValue", function (colorSet) {
+  var alphaValue = colorSet.getAlpha();
+  return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getHexValueString", function (colorSet) {
+  return "#".concat(_ColorPickerUtils.getHexValue(colorSet));
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "isHexChar", function (value) {
+  var hexRegEx = /^$|[0-9a-fA-F]+$/;
+  return hexRegEx.test(value);
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
+  var tinyColor = typeof color === 'string' ? _ColorPickerUtils.getTinyColorInstance(color) : _ColorPickerUtils.getTinyColorInstance(color.value);
+  var rgba = _ColorPickerUtils.getRgbaValue(tinyColor);
+  var hex = _ColorPickerUtils.getHexValue(tinyColor);
+  var hexString = _ColorPickerUtils.getHexValueString(tinyColor);
+  var allColorTypes = {
+    rgba: {
+      r: rgba.r,
+      g: rgba.g,
+      b: rgba.b,
+      a: rgba.a
+    },
+    hex: hex,
+    hexString: hexString
+  };
+  var variableName = {
+    variable: color.name ? "@".concat(color.name) : ''
+  };
+  return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, allColorTypes), variableName && variableName);
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "getVariableShades", function (_ref2) {
+  var color = _ref2.color,
+    name = _ref2.name;
+  var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
+  var colorHsl = colorTiny.toHsl();
+  var isNeutral = name.includes('neutral');
+  var blackShade = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 100,
+    name: "".concat(name, "s0")
+  }];
+  var whiteShade = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 0,
+    name: "".concat(name, "s1000")
+  }];
+  var shades = [{
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 99,
+    name: "".concat(name, "s10")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 98,
+    name: "".concat(name, "s20")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 95,
+    name: "".concat(name, "s50")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 90,
+    name: "".concat(name, "s100")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 80,
+    name: "".concat(name, "s200")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 70,
+    name: "".concat(name, "s300")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 60,
+    name: "".concat(name, "s400")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 50,
+    name: "".concat(name, "s500")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 40,
+    name: "".concat(name, "s600")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 30,
+    name: "".concat(name, "s700")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 20,
+    name: "".concat(name, "s800")
+  }, {
+    h: colorHsl.h,
+    s: colorHsl.s,
+    l: 10,
+    name: "".concat(name, "s900")
+  }];
+  var result = [].concat(_rollupPluginBabelHelpers.toConsumableArray(isNeutral ? blackShade : []), shades, _rollupPluginBabelHelpers.toConsumableArray(isNeutral ? whiteShade : []));
+  return _ColorPickerUtils.convertVariableShadesToHex(result);
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "convertVariableShadesToHex", function (variables) {
+  return variables.map(function (variable) {
+    var colorTiny = _ColorPickerUtils.getTinyColorInstance({
+      h: variable.h,
+      s: variable.s,
+      l: variable.l
+    });
+    var colorHex = colorTiny.toHexString();
+    return {
+      name: variable.name,
+      value: colorHex
+    };
+  });
+});
+_rollupPluginBabelHelpers.defineProperty(ColorPickerUtils, "updateGradientWithActiveColor", function (colors, index, newColor) {
+  return colors.map(function (c, i) {
+    return _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, c), {}, {
+      value: i === index ? formatters.high(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, c), {}, {
+        value: tinycolor['default'](newColor).toRgbString()
+      })) : formatters.low(c)
+    });
+  });
+});
+
+exports.ColorPickerUtils = ColorPickerUtils;
+//# sourceMappingURL=color_picker_utils.js.map

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

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

@@ -0,0 +1,45 @@
+'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 input = require('../../input/input.js');
+var color_picker_constants = require('../color_picker_constants.js');
+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 ColorPickerInput = function ColorPickerInput(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    errors = _ref.errors,
+    disabled = _ref.disabled,
+    preElement = _ref.preElement;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    hex = _useColorPicker.hex,
+    color = _useColorPicker.color,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    gradientType = _useColorPicker.gradientType;
+  var _useTranslation = useTranslation.useTranslation(),
+    _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  var colorName = color.name ? "".concat(t(color.name)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
+  if (isCurrentValueGradient) colorName = gradientType === color_picker_constants.GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
+  return /*#__PURE__*/React__default['default'].createElement(input.Input, {
+    preElement: preElement,
+    type: "text",
+    id: id,
+    name: name,
+    value: colorName,
+    errors: errors,
+    disabled: disabled,
+    readOnly: true
+  });
+};
+
+exports.ColorPickerInput = ColorPickerInput;
+//# sourceMappingURL=color_label_input.js.map

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

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

@@ -0,0 +1,62 @@
+'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 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 use_color_picker = require('../hooks/use_color_picker.js');
+var color_picker_footer = require('./color_picker_footer.js');
+var color_picker_variables = require('./color_picker_variables.js');
+var color_picker_controls = require('./color_picker_controls.js');
+var color_picker_impl = require('./color_picker_impl.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerContent = function ColorPickerContent() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    color = _useColorPicker.color,
+    setColor = _useColorPicker.setColor,
+    colorVariables = _useColorPicker.colorVariables,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+  var colorValue = typeof color === 'string' ? color : color.value;
+  var safeValue = utils.objectToString(colorValue);
+  var defaultStyles = styles.getStyles(true);
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__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("div", {
+    className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-pl-2 aurora-pr-2 aurora-pt-3 aurora-border-x aurora-border-t aurora-border-subtle aurora-rounded-t-16 aurora-bg-neutral-0"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-pb-2 aurora-gap-2",
+    style: {
+      width: color_picker_constants.COLOR_PICKER_WIDTH + color_picker_constants.COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: color_picker_constants.COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_controls.ColorPickerControls, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-overflow-y-scroll aurora-overflow-x-visible custom-scrollbar aurora-pr-0.5",
+    style: _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, defaultStyles.body), {}, {
+      maxHeight: isCurrentValueGradient ? color_picker_constants.COLOR_PICKER_CONTENT_MAX_HEIGHT.gradient : color_picker_constants.COLOR_PICKER_CONTENT_MAX_HEIGHT.color
+    })
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-pl-2",
+    style: {
+      width: color_picker_constants.COLOR_PICKER_WIDTH + color_picker_constants.COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: color_picker_constants.COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_impl.ColorPickerImpl, null), colorVariables !== null && colorVariables !== void 0 && colorVariables.isVisible && !isCurrentValueGradient ? (/*#__PURE__*/React__default['default'].createElement(color_picker_variables.ColorPickerVariables, {
+    variables: colorVariables.variables
+  })) : null)))), /*#__PURE__*/React__default['default'].createElement(color_picker_footer.ColorPickerFooter, null));
+};
+
+exports.ColorPickerContent = ColorPickerContent;
+//# sourceMappingURL=color_picker_content.js.map

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

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

@@ -0,0 +1,68 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var css_text_color_tokens = require('../../../constants/css_tokens/css_text_color_tokens.js');
+var stack = require('../../stack/stack.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 color_picker_constants = require('../color_picker_constants.js');
+var context = require('../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var color_picker_gradient_angle = require('./color_picker_gradient_controls/color_picker_gradient_angle.js');
+var color_picker_mode_toggler = require('./color_picker_mode_toggler.js');
+var color_picker_gradient_bar = require('./color_picker_overrides/color_picker_gradient_bar.js');
+var color_picker_eye_dropper = require('./color_picker_overrides/color_picker_eye_dropper.js');
+var color_picker_gradient_controls = require('./color_picker_overrides/color_picker_gradient_controls.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerControls = function ColorPickerControls() {
+  var _usePicker = context.usePicker(),
+    handleChange = _usePicker.handleChange;
+  var _useTranslation = useTranslation.useTranslation(),
+    t = _useTranslation.t;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    withGradient = _useColorPicker.withGradient,
+    gradientType = _useColorPicker.gradientType,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+  var isLinearGradient = gradientType === color_picker_constants.GRADIENT_TYPES.linear;
+  var EyeDropperAvailable = typeof window['EyeDropper'] !== 'undefined';
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    justify: withGradient ? 'between' : 'end'
+  }, withGradient ? (/*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    spacing: "8"
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_mode_toggler.ColorPickerModeToggler, null))) : null, EyeDropperAvailable && (/*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement(color_picker_eye_dropper.EyeDropper, {
+    onSelect: handleChange
+  })), /*#__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
+  }, "".concat(t('Sample color')))))))), withGradient && isCurrentValueGradient ? (/*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    justify: isLinearGradient ? 'between' : 'end'
+  }, /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isLinearGradient ? /*#__PURE__*/React__default['default'].createElement(color_picker_gradient_angle.ColorPickerGradientAngle, null) : null, /*#__PURE__*/React__default['default'].createElement(color_picker_gradient_controls.GradientControls, {
+    hideGradientType: true,
+    hideGradientAngle: true,
+    hideGradientStop: true
+  })))) : null, withGradient && isCurrentValueGradient ? (/*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    className: "aurora-border-b aurora-border-subtle aurora-pb-2 aurora-pl-4 aurora-pr-[1.125rem] -aurora-mb-[1px] -aurora-ml-4 -aurora-mr-[1.125rem]"
+  }, /*#__PURE__*/React__default['default'].createElement(tooltip_provider.TooltipProvider, null, /*#__PURE__*/React__default['default'].createElement(tooltip.Tooltip, null, /*#__PURE__*/React__default['default'].createElement(tooltip_trigger.TooltipTrigger, null, /*#__PURE__*/React__default['default'].createElement(color_picker_gradient_bar.GradientBar, null)), /*#__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
+  }, "".concat(t('Add color')))))))) : null);
+};
+
+exports.ColorPickerControls = ColorPickerControls;
+//# sourceMappingURL=color_picker_controls.js.map

package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_controls.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,sBAAsB,iFAAqF;AAC3G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_footer.js

@@ -0,0 +1,53 @@
+'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 button = require('../../button/button.js');
+var color_picker_context = require('../color_picker_context.js');
+var color_picker_utils = require('../color_picker_utils.js');
+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 ColorPickerFooter = function ColorPickerFooter() {
+  var _useContext = React.useContext(color_picker_context.ColorPickerContext),
+    setIsColorPickerOpened = _useContext.setIsColorPickerOpened;
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    color = _useColorPicker.color,
+    handleCancel = _useColorPicker.handleCancel,
+    handleSave = _useColorPicker.handleSave;
+  var _useTranslation = useTranslation.useTranslation(),
+    _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  var handleCancelButton = function handleCancelButton() {
+    setIsColorPickerOpened(false);
+    handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
+  };
+  var handleSaveButton = function handleSaveButton() {
+    setIsColorPickerOpened(false);
+    handleSave(color_picker_utils.ColorPickerUtils.getAllColorTypes(color));
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-gap-2 aurora-pt-2 aurora-pb-3 aurora-px-4 aurora-border aurora-border-subtle aurora-rounded-b-16 aurora-bg-neutral-0"
+  }, /*#__PURE__*/React__default['default'].createElement(button.Button, {
+    className: "aurora-flex-1",
+    variant: "secondary",
+    size: "s",
+    type: "button",
+    onClick: handleCancelButton
+  }, "".concat(t('Cancel'))), /*#__PURE__*/React__default['default'].createElement(button.Button, {
+    className: "aurora-flex-1",
+    type: "button",
+    size: "s",
+    autoFocus: true,
+    onClick: handleSaveButton
+  }, "".concat(t('Choose'))));
+};
+
+exports.ColorPickerFooter = ColorPickerFooter;
+//# sourceMappingURL=color_picker_footer.js.map

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

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

@@ -0,0 +1,48 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var formatters = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js');
+var context = require('../../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js');
+var angle_icon = require('../../../../assets/icons/angle_icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
+  var _usePicker = context.usePicker(),
+    degrees = _usePicker.degrees,
+    onChange = _usePicker.onChange,
+    value = _usePicker.value;
+  var handleDegrees = function handleDegrees(e) {
+    var newValue = formatters.formatInputValues(e.target.value, 0, 360);
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
+  };
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: 'aurora-relative aurora-flex aurora-justify-between aurora-gap-1.5 aurora-h-6 aurora-border-0 aurora-p-0.5 aurora-rounded-4 aurora-bg-subtle aurora-items-center'
+  }, /*#__PURE__*/React__default['default'].createElement(angle_icon.AngleIcon, {
+    className: "aurora-w-3 aurora-h-3 aurora-stroke-0 aurora-ml-1"
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-center"
+  }, /*#__PURE__*/React__default['default'].createElement("input", {
+    value: degrees,
+    onChange: function onChange(e) {
+      return handleDegrees(e);
+    },
+    className: 'aurora-h-[18px] aurora-w-10 aurora-text-xs aurora-rounded-4 aurora-text-center aurora-outline-none aurora-p-0'
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
+    style: {
+      position: 'absolute',
+      right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
+      top: 1,
+      fontWeight: 400,
+      fontSize: 13
+    }
+  }, "\xB0")));
+};
+
+exports.ColorPickerGradientAngle = ColorPickerGradientAngle;
+//# sourceMappingURL=color_picker_gradient_angle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,yBAAyB,6FAAiG;AAC1H,sBAAsB,oFAAwF;AAC9G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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_impl.js

@@ -0,0 +1,42 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var stack = require('../../stack/stack.js');
+var use_color_picker = require('../hooks/use_color_picker.js');
+var color_picker_inputs = require('./color_picker_inputs/color_picker_inputs.js');
+var color_picker_shades = require('./color_picker_shades.js');
+var color_picker_hue = require('./color_picker_overrides/color_picker_hue.js');
+var color_picker_opacity = require('./color_picker_overrides/color_picker_opacity.js');
+var color_picker_square = require('./color_picker_overrides/color_picker_square.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerImpl = function ColorPickerImpl() {
+  var _useColorPicker = use_color_picker.useColorPicker(),
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-gap-2"
+  }, /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    spacing: "2.5",
+    direction: "column",
+    onMouseDown: function onMouseDown(ev) {
+      return (
+        // Prevents whole page from being selected when dragging
+        ev.preventDefault()
+      );
+    }
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "color-picker__square aurora-overflow-hidden"
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_square.Square, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "color-picker__hue aurora-w-full"
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_hue.Hue, null)), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "color-picker__opacity aurora-w-full"
+  }, /*#__PURE__*/React__default['default'].createElement(color_picker_opacity.Opacity, null))), /*#__PURE__*/React__default['default'].createElement(color_picker_inputs.ColorPickerInputs, null), !isCurrentValueGradient ? /*#__PURE__*/React__default['default'].createElement(color_picker_shades.ColorPickerShades, null) : null);
+};
+
+exports.ColorPickerImpl = ColorPickerImpl;
+//# sourceMappingURL=color_picker_impl.js.map

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

@@ -0,0 +1,57 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var _rollupPluginBabelHelpers = require('../../../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var stack = require('../../../stack/stack.js');
+var color_picker_constants = require('../../color_picker_constants.js');
+var color_picker_inputs_hex = require('./color_picker_inputs_hex.js');
+var color_picker_inputs_rgba = require('./color_picker_inputs_rgba.js');
+var current_color_preview = require('../current_color_preview.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ColorPickerInputs = function ColorPickerInputs() {
+  var _useState = React.useState(color_picker_constants.COLOR_PICKER_TYPES.HEX),
+    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
+    type = _useState2[0],
+    setType = _useState2[1];
+  var handleSelectType = function handleSelectType(e) {
+    setType(e.target.value);
+  };
+  var inputs = function inputs() {
+    switch (type) {
+      case color_picker_constants.COLOR_PICKER_TYPES.HEX:
+        return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_hex.ColorPickerInputsHex, null);
+      case color_picker_constants.COLOR_PICKER_TYPES.RGB:
+        return /*#__PURE__*/React__default['default'].createElement(color_picker_inputs_rgba.ColorPickerInputsRgba, null);
+      default:
+        return false;
+    }
+  };
+  return /*#__PURE__*/React__default['default'].createElement(stack.Stack, {
+    spacing: "1",
+    align: "center",
+    className: "aurora-pt-2"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex aurora-items-center"
+  }, /*#__PURE__*/React__default['default'].createElement("select", {
+    value: type,
+    onChange: handleSelectType,
+    className: "color-picker__inputs-select aurora-text-xs aurora-text-info-strong aurora-uppercase aurora-pr-2.5 aurora-appearance-none"
+  }, /*#__PURE__*/React__default['default'].createElement("option", {
+    value: color_picker_constants.COLOR_PICKER_TYPES.HEX
+  }, color_picker_constants.COLOR_PICKER_TYPES.HEX), /*#__PURE__*/React__default['default'].createElement("option", {
+    value: color_picker_constants.COLOR_PICKER_TYPES.RGB
+  }, color_picker_constants.COLOR_PICKER_TYPES.RGB))), /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "aurora-flex-1"
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: "color-picker__inputs-value-container aurora-flex aurora-border aurora-rounded-4 aurora-overflow-hidden aurora-h-6"
+  }, inputs())), /*#__PURE__*/React__default['default'].createElement(current_color_preview.CurrentColorPreview, null));
+};
+
+exports.ColorPickerInputs = ColorPickerInputs;
+//# sourceMappingURL=color_picker_inputs.js.map