@dreamcommerce/aurora 3.0.0-53 → 3.0.0-55

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

@@ -0,0 +1,105 @@
+import { Dispatch, SetStateAction } from 'react';
+import { GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES } from "./color_picker_constants";
+import { Any } from 'ts-toolbelt';
+export interface IColorPickerPureProps {
+    id: string;
+    name?: string;
+    colorVariables?: IColorPickerColorVariables;
+    errors?: string | string[];
+}
+export interface IColorPickerColorVariables {
+    isVisible: boolean;
+    variables: IColorPickerColorVariablesType;
+}
+export interface IColorPickerColorVariablesType {
+    primary: ColorPickerVariable;
+    secondary: ColorPickerVariable;
+    neutral: ColorPickerVariable;
+    font: ColorPickerVariable;
+    background: ColorPickerVariable;
+}
+export interface IColorPickerProps {
+    id: string;
+    name?: string;
+    initialColor?: ColorPickerColorTypes['hex'] | ColorPickerVariable | undefined;
+    withGradient?: boolean;
+    colorVariables?: IColorPickerColorVariables;
+    errors?: string | string[];
+    onChange?: (color: IColorPickerColor) => void;
+    onCancel?: () => void;
+    onSave?: (color: IColorPickerColor) => void;
+}
+export interface IColorPickerContext {
+    color: ColorPickerVariable;
+    setColor: Dispatch<SetStateAction<string | ColorPickerVariable>>;
+    hex: string;
+    hslArr: number[];
+    handleOnChangeAlpha: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    alphaValue: string;
+    rgbaArr: number[];
+    setR: (newR: number) => void;
+    setG: (newG: number) => void;
+    setB: (newB: number) => void;
+    handleCancel: () => void;
+    withGradient: boolean;
+    handleSave: (color: IColorPickerColor) => void;
+    colorVariables?: IColorPickerColorVariables;
+    isCurrentValueGradient: boolean;
+    setSolid: (value?: string) => void;
+    setRadial: (value?: string) => void;
+    setLinear: (value?: string) => void;
+    gradientType?: TGradientType;
+    previousSolidColor?: string;
+    previousGradientColor?: string;
+    isColorPickerOpened: boolean;
+    setIsColorPickerOpened: (isOpened: boolean) => void;
+}
+export declare type ColorPickerColorTypes = {
+    hex: string;
+    hsl: {
+        h: number;
+        s: number;
+        l: number;
+    };
+    rgba: {
+        r: number;
+        g: number;
+        b: number;
+        a?: number;
+    };
+};
+export declare type ColorPickerVariable = {
+    value: string;
+    name: string;
+};
+export declare type IColorPickerColor = {
+    rgba: ColorPickerColorTypes['rgba'];
+    hex: string;
+    hexString: string;
+    variable: string;
+    gradient?: TGradientObject;
+};
+export declare type ColorPickerColors = ColorPickerColorTypes['hex'] | ColorPickerColorTypes['hsl'] | ColorPickerColorTypes['rgba'];
+export declare type TGradientType = typeof GRADIENT_TYPES[keyof typeof GRADIENT_TYPES];
+export declare type TGradientColorStop = {
+    stop: number;
+    value: string;
+};
+export declare type TGradientRadialShape = Any.Keys<typeof GRADIENT_RADIAL_SHAPES>;
+export declare type TGradientObject = {
+    gradientType: TGradientType;
+    colors: TGradientColorStop[];
+    radialShape?: TGradientRadialShape;
+    angle?: number;
+};
+export declare type TGradientColoPickerLibGradientObject = {
+    isGradient: boolean;
+    gradientType: string | undefined;
+    degrees: string;
+    colors: any;
+} | {
+    isGradient: boolean;
+    gradientType: null;
+    degrees: null;
+    colors: any;
+};

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

@@ -0,0 +1,4 @@
+import 'react';
+import '@auroraComponents/color_picker/color_picker_constants';
+import 'ts-toolbelt';
+//# sourceMappingURL=color_picker_types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/color_picker/color_picker_types.ts"],"names":[],"mappings":"AAAA,OAAyC,OAAO,CAAC;AACjD,OAAuD,uDAAuD,CAAC;AAE/G,OAAoB,aAAa,CAAC"}

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

@@ -0,0 +1,18 @@
+import { ColorPickerColors, ColorPickerVariable, IColorPickerColor, TGradientColoPickerLibGradientObject, TGradientObject } from './color_picker_types';
+import tinycolor from 'tinycolor2';
+export declare class ColorPickerUtils {
+    static getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
+    static isGradient(color: string): boolean;
+    static getColorPickerValue: (color: string | ColorPickerVariable | undefined) => ColorPickerVariable;
+    static getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
+    static getHexValue: (colorSet: tinycolor.Instance) => string;
+    static getHexValueString: (colorSet: tinycolor.Instance) => string;
+    static isHexChar: (value: string) => boolean;
+    static getAllColorTypes: (color: ColorPickerVariable) => IColorPickerColor;
+    static getVariableShades: ({ color, name }: {
+        color: ColorPickerColors;
+        name: string;
+    }) => ColorPickerVariable[];
+    private static convertVariableShadesToHex;
+    static getColorPickerGradientValue(gradient: TGradientColoPickerLibGradientObject): TGradientObject;
+}

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

@@ -0,0 +1,187 @@
+import { createClass as _createClass, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, classCallCheck as _classCallCheck } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { COLOR_PICKER_INITIAL_STATE, GRADIENT_TYPES, GRADIENT_RADIAL_SHAPES } from './color_picker_constants.js';
+import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
+
+var _ColorPickerUtils;
+var ColorPickerUtils = /*#__PURE__*/function () {
+  function ColorPickerUtils() {
+    _classCallCheck(this, ColorPickerUtils);
+  }
+  return _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 === GRADIENT_TYPES.radial ? undefined : parseFloat((_gradient$degrees = gradient.degrees) !== null && _gradient$degrees !== void 0 ? _gradient$degrees : '90deg'),
+        radialShape: gradient.gradientType === GRADIENT_TYPES.radial ? 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;
+_defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
+  return tinycolor(color);
+});
+_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_INITIAL_STATE,
+    name: ''
+  };
+  var parsedColorValue = initialColorValue ? _ColorPickerUtils.getTinyColorInstance(initialColorValue).toHex8() : 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 : ''
+  };
+});
+_defineProperty(ColorPickerUtils, "getRgbaValue", function (colorSet) {
+  return colorSet.toRgb();
+});
+_defineProperty(ColorPickerUtils, "getHexValue", function (colorSet) {
+  var alphaValue = colorSet.getAlpha();
+  return alphaValue < 1 ? colorSet.toHex8() : colorSet.toHex();
+});
+_defineProperty(ColorPickerUtils, "getHexValueString", function (colorSet) {
+  return "#".concat(_ColorPickerUtils.getHexValue(colorSet));
+});
+_defineProperty(ColorPickerUtils, "isHexChar", function (value) {
+  var hexRegEx = /^$|[0-9a-fA-F]+$/;
+  return hexRegEx.test(value);
+});
+_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 _objectSpread2(_objectSpread2({}, allColorTypes), variableName && variableName);
+});
+_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(_toConsumableArray(isNeutral ? blackShade : []), shades, _toConsumableArray(isNeutral ? whiteShade : []));
+  return _ColorPickerUtils.convertVariableShadesToHex(result);
+});
+_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
+    };
+  });
+});
+
+export { ColorPickerUtils };
+//# sourceMappingURL=color_picker_utils.js.map

package/build/esm/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,sBAAsB,qDAAyD;AAC/E;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface IColorLabelInputProps {
+    id: string;
+    name?: string;
+    errors?: string | string[];
+}
+export declare const ColorPickerInput: React.FC<IColorLabelInputProps>;
+export {};

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

@@ -0,0 +1,33 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Input } from '../../input/input.js';
+import { GRADIENT_TYPES } from '../color_picker_constants.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+
+var ColorPickerInput = function ColorPickerInput(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    errors = _ref.errors;
+  var _useColorPicker = useColorPicker(),
+    hex = _useColorPicker.hex,
+    color = _useColorPicker.color,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient,
+    gradientType = _useColorPicker.gradientType;
+  var _useTranslation = useTranslation(),
+    _useTranslation2 = _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 === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
+  return /*#__PURE__*/React.createElement(Input, {
+    type: "text",
+    id: id,
+    name: name,
+    value: colorName,
+    errors: errors,
+    readOnly: true
+  });
+};
+
+export { ColorPickerInput };
+//# sourceMappingURL=color_label_input.js.map

package/build/esm/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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerContent: () => React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_HEIGHT } from '../color_picker_constants.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerFooter } from './color_picker_footer.js';
+import { ColorPickerHeader } from './color_picker_header.js';
+import { ColorPickerImpl } from './color_picker_impl/color_picker_impl.js';
+import { ColorPickerVariables } from './color_picker_variables.js';
+
+var ColorPickerContent = function ColorPickerContent() {
+  var _useColorPicker = useColorPicker(),
+    color = _useColorPicker.color,
+    setColor = _useColorPicker.setColor,
+    colorVariables = _useColorPicker.colorVariables,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+  var colorValue = typeof color === 'string' ? color : color.value;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerHeader, null), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x"
+  }, /*#__PURE__*/React.createElement(ColorPickerImpl, {
+    value: colorValue,
+    onChange: setColor,
+    width: COLOR_PICKER_WIDTH,
+    height: COLOR_PICKER_HEIGHT
+  }), colorVariables !== null && colorVariables !== void 0 && colorVariables.isVisible && !isCurrentValueGradient ? /*#__PURE__*/React.createElement(ColorPickerVariables, {
+    variables: colorVariables.variables
+  }) : null), /*#__PURE__*/React.createElement(ColorPickerFooter, null));
+};
+
+export { ColorPickerContent };
+//# sourceMappingURL=color_picker_content.js.map

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

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerControls: () => React.JSX.Element;

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { Stack } from '../../stack/stack.js';
+import { Typography } from '../../typography/typography.js';
+import { Tooltip } from '../../tooltip/tooltip.js';
+import { TooltipTrigger } from '../../tooltip/components/tooltip_trigger.js';
+import { TooltipContent } from '../../tooltip/components/tooltip_content.js';
+import { TooltipProvider } from '../../tooltip/context/tooltip_provider.js';
+import { GRADIENT_TYPES } from '../color_picker_constants.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { usePicker } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/context.js';
+import { ColorPickerGradientAngle } from './color_picker_gradient_controls/color_picker_gradient_angle.js';
+import { ColorPickerModeToggler } from './color_picker_mode_toggler.js';
+import Dropper from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/EyeDropper.js';
+import GradientBar from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/GradientBar.js';
+import GradientControls from '../../../../../../external/react-best-gradient-color-picker/dist/esm/components/GradientControls.js';
+
+var ColorPickerControls = function ColorPickerControls() {
+  var _usePicker = usePicker(),
+    handleChange = _usePicker.handleChange;
+  var _useTranslation = useTranslation(),
+    t = _useTranslation.t;
+  var _useColorPicker = useColorPicker(),
+    withGradient = _useColorPicker.withGradient,
+    gradientType = _useColorPicker.gradientType,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+  var isLinearGradient = gradientType === GRADIENT_TYPES.linear;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Stack, {
+    justify: withGradient ? 'between' : 'end'
+  }, withGradient ? (/*#__PURE__*/React.createElement(Stack, {
+    spacing: "8"
+  }, /*#__PURE__*/React.createElement(ColorPickerModeToggler, null))) : null, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(Dropper, {
+    onSelect: handleChange
+  })), /*#__PURE__*/React.createElement(TooltipContent, {
+    variant: "dark"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    size: "xs",
+    weight: "medium"
+  }, "".concat(t('Sample color'))))))), withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, {
+    justify: isLinearGradient ? 'between' : 'end'
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, isLinearGradient ? /*#__PURE__*/React.createElement(ColorPickerGradientAngle, null) : null, /*#__PURE__*/React.createElement(GradientControls, {
+    hideGradientType: true,
+    hideGradientAngle: true,
+    hideGradientStop: true
+  })))) : null, withGradient && isCurrentValueGradient ? (/*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(GradientBar, null)), /*#__PURE__*/React.createElement(TooltipContent, {
+    variant: "dark"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    size: "xs",
+    weight: "medium"
+  }, "".concat(t('Add color')))))))) : null);
+};
+
+export { ColorPickerControls };
+//# sourceMappingURL=color_picker_controls.js.map

package/build/esm/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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,0BAA0B,iFAAqF;AAC/G;AACA;AACA,oBAAoB,+FAAmG;AACvH,wBAAwB,gGAAoG;AAC5H,6BAA6B,qGAAyG;AACtI;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerFooter: () => React.JSX.Element;

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

@@ -0,0 +1,44 @@
+import React, { useContext } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Button } from '../../button/button.js';
+import { ColorPickerContext } from '../color_picker_context.js';
+import { ColorPickerUtils } from '../color_picker_utils.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+
+var ColorPickerFooter = function ColorPickerFooter() {
+  var _useContext = useContext(ColorPickerContext),
+    setIsColorPickerOpened = _useContext.setIsColorPickerOpened;
+  var _useColorPicker = useColorPicker(),
+    color = _useColorPicker.color,
+    handleCancel = _useColorPicker.handleCancel,
+    handleSave = _useColorPicker.handleSave;
+  var _useTranslation = useTranslation(),
+    _useTranslation2 = _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(ColorPickerUtils.getAllColorTypes(color));
+  };
+  return /*#__PURE__*/React.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-rounded-b-16"
+  }, /*#__PURE__*/React.createElement(Button, {
+    className: "aurora-capitalize aurora-flex-1",
+    variant: "secondary",
+    size: "s",
+    type: "button",
+    onClick: handleCancelButton
+  }, "".concat(t('cancel'))), /*#__PURE__*/React.createElement(Button, {
+    className: "aurora-capitalize aurora-flex-1",
+    type: "button",
+    size: "s",
+    onClick: handleSaveButton
+  }, "".concat(t('choose'))));
+};
+
+export { ColorPickerFooter };
+//# sourceMappingURL=color_picker_footer.js.map

package/build/esm/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,+BAA+B,oEAAwE;AACvG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerGradientAngle: () => React.JSX.Element;

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Input } from '../../../input/input.js';
+import { formatInputValues } 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';
+import { DegreesIcon } from '../../../../../../../external/react-best-gradient-color-picker/dist/esm/components/icon.js';
+
+var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
+  var _usePicker = usePicker(),
+    degrees = _usePicker.degrees,
+    onChange = _usePicker.onChange,
+    value = _usePicker.value;
+  var handleDegrees = function handleDegrees(e) {
+    var newValue = formatInputValues(e.target.value, 0, 360);
+    var remaining = value.split(/,(.+)/)[1];
+    onChange("linear-gradient(".concat(newValue || 0, "deg, ").concat(remaining));
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'aurora-relative aurora-p-0 aurora-flex aurora-justify-between aurora-gap-1.5 aurora-h-6 aurora-border-2 aurora-border-solid aurora-rounded-4 aurora-bg-active'
+  }, /*#__PURE__*/React.createElement(DegreesIcon, {
+    color: "#5c657e"
+  }), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Input, {
+    value: degrees,
+    onChange: function onChange(e) {
+      return handleDegrees(e);
+    },
+    className: '!aurora-h-5 !aurora-w-10 !aurora-px-1 !aurora-text-xs aurora-rounded-4 aurora-text-center'
+  }), /*#__PURE__*/React.createElement("div", {
+    style: {
+      position: 'absolute',
+      right: degrees > 99 ? 0 : degrees < 10 ? 7 : 3,
+      top: 1,
+      fontWeight: 400,
+      fontSize: 13
+    }
+  }, "\xB0")));
+};
+
+export { ColorPickerGradientAngle };
+//# sourceMappingURL=color_picker_gradient_angle.js.map

package/build/esm/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,kCAAkC,6FAAiG;AACnI,0BAA0B,oFAAwF;AAClH,4BAA4B,4FAAgG;AAC5H;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerHeader: () => React.JSX.Element;

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

@@ -0,0 +1,46 @@
+import React, { useContext, useEffect } from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { Typography } from '../../typography/typography.js';
+import { CloseLineIcon } from '../../../assets/icons/close_icon.js';
+import { ColorPickerContext } from '../color_picker_context.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+
+var ColorPickerHeader = function ColorPickerHeader() {
+  var _useColorPicker = useColorPicker(),
+    handleCancel = _useColorPicker.handleCancel;
+  var _useTranslation = useTranslation(),
+    _useTranslation2 = _slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  var _useContext = useContext(ColorPickerContext),
+    isColorPickerOpened = _useContext.isColorPickerOpened,
+    setIsColorPickerOpened = _useContext.setIsColorPickerOpened;
+  var handleCancelButton = function handleCancelButton() {
+    closePicker();
+  };
+  var closePicker = function closePicker() {
+    setIsColorPickerOpened(false);
+    handleCancel === null || handleCancel === void 0 ? void 0 : handleCancel();
+  };
+  useEffect(function () {
+    if (!isColorPickerOpened) return;
+    document.addEventListener('visibilitychange', closePicker);
+    return function () {
+      return document.removeEventListener('visibilitychange', closePicker);
+    };
+  }, [isColorPickerOpened]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "aurora-flex aurora-items-center aurora-justify-between aurora-py-2 aurora-px-4 aurora-border aurora-rounded-t-16"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    size: "s",
+    weight: "semibold"
+  }, "".concat(t('Select color'))), /*#__PURE__*/React.createElement("button", {
+    onClick: handleCancelButton,
+    className: "color-picker__close-icon aurora-flex aurora-bg-transparent aurora-cursor-pointer"
+  }, /*#__PURE__*/React.createElement(CloseLineIcon, {
+    className: "aurora-w-4 aurora-h-4"
+  })));
+};
+
+export { ColorPickerHeader };
+//# sourceMappingURL=color_picker_header.js.map

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

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

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const ColorPickerImpl: ({ value, onChange, width, height, style, className }: any) => React.JSX.Element;