@dreamcommerce/aurora 3.0.0-32 → 3.0.0-321

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

@@ -0,0 +1,102 @@
+import React, { useMemo } from 'react';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { ColorPickerContext } from './color_picker_context.js';
+import ColorPickerPure from './components/pure_color_picker.js';
+import useSetupColorPicker from './hooks/setup_color_picker.js';
+
+var _excluded = ["id", "name", "value", "colorVariables", "errors", "onChange", "onCancel", "onSave", "onPickShade", "withGradient", "disabled"];
+var ColorPicker = function ColorPicker(_ref) {
+  var id = _ref.id,
+    name = _ref.name,
+    value = _ref.value,
+    colorVariables = _ref.colorVariables,
+    errors = _ref.errors,
+    onChange = _ref.onChange,
+    onCancel = _ref.onCancel,
+    onSave = _ref.onSave,
+    onPickShade = _ref.onPickShade,
+    isWithGradient = _ref.withGradient,
+    disabled = _ref.disabled,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var _useSetupColorPicker = useSetupColorPicker({
+      colorVariables: colorVariables,
+      value: value,
+      onChange: onChange,
+      onCancel: onCancel,
+      onSave: onSave,
+      withGradient: isWithGradient
+    }),
+    color = _useSetupColorPicker.color,
+    setColor = _useSetupColorPicker.setColor,
+    hex = _useSetupColorPicker.hex,
+    hslArr = _useSetupColorPicker.hslArr,
+    handleOnChangeAlpha = _useSetupColorPicker.handleOnChangeAlpha,
+    alpha = _useSetupColorPicker.alpha,
+    rgbaArr = _useSetupColorPicker.rgbaArr,
+    setR = _useSetupColorPicker.setR,
+    setG = _useSetupColorPicker.setG,
+    setB = _useSetupColorPicker.setB,
+    handleCancel = _useSetupColorPicker.handleCancel,
+    handleSave = _useSetupColorPicker.handleSave,
+    previousSolidColor = _useSetupColorPicker.previousSolidColor,
+    isCurrentValueGradient = _useSetupColorPicker.isCurrentValueGradient,
+    setLinear = _useSetupColorPicker.setLinear,
+    setRadial = _useSetupColorPicker.setRadial,
+    gradientType = _useSetupColorPicker.gradientType,
+    previousGradientColor = _useSetupColorPicker.previousGradientColor,
+    setSolid = _useSetupColorPicker.setSolid,
+    withGradient = _useSetupColorPicker.withGradient,
+    isColorPickerOpened = _useSetupColorPicker.isColorPickerOpened,
+    setIsColorPickerOpened = _useSetupColorPicker.setIsColorPickerOpened,
+    typedInputValue = _useSetupColorPicker.typedInputValue,
+    setTypedInputValue = _useSetupColorPicker.setTypedInputValue,
+    isColorPickerCurrentlyUsed = _useSetupColorPicker.isColorPickerCurrentlyUsed,
+    setIsColorPickerCurrentlyUsed = _useSetupColorPicker.setIsColorPickerCurrentlyUsed,
+    degrees = _useSetupColorPicker.degrees,
+    shadeName = _useSetupColorPicker.shadeName;
+  var contextVal = useMemo(function () {
+    return {
+      color: color,
+      setColor: setColor,
+      hex: hex,
+      hslArr: hslArr,
+      handleOnChangeAlpha: handleOnChangeAlpha,
+      alpha: alpha,
+      rgbaArr: rgbaArr,
+      setR: setR,
+      setG: setG,
+      setB: setB,
+      handleCancel: handleCancel,
+      handleSave: handleSave,
+      colorVariables: colorVariables,
+      previousSolidColor: previousSolidColor,
+      isCurrentValueGradient: isCurrentValueGradient,
+      setLinear: setLinear,
+      setRadial: setRadial,
+      gradientType: gradientType,
+      setSolid: setSolid,
+      previousGradientColor: previousGradientColor,
+      withGradient: withGradient,
+      isColorPickerOpened: isColorPickerOpened,
+      setIsColorPickerOpened: setIsColorPickerOpened,
+      typedInputValue: typedInputValue,
+      setTypedInputValue: setTypedInputValue,
+      isColorPickerCurrentlyUsed: isColorPickerCurrentlyUsed,
+      setIsColorPickerCurrentlyUsed: setIsColorPickerCurrentlyUsed,
+      degrees: degrees,
+      shadeName: shadeName,
+      onPickShade: onPickShade
+    };
+  }, [color, setColor, hex, hslArr, handleOnChangeAlpha, alpha, rgbaArr, setR, setG, setB, handleCancel, handleSave, previousSolidColor, colorVariables, isCurrentValueGradient, setLinear, setRadial, gradientType, previousGradientColor, setSolid, withGradient, isColorPickerOpened, setIsColorPickerOpened, typedInputValue, setTypedInputValue, isColorPickerCurrentlyUsed, setIsColorPickerCurrentlyUsed, degrees, shadeName, onPickShade]);
+  return /*#__PURE__*/React.createElement(ColorPickerContext.Provider, {
+    value: contextVal
+  }, /*#__PURE__*/React.createElement(ColorPickerPure, _objectSpread2({
+    id: id,
+    name: name,
+    errors: errors,
+    disabled: disabled
+  }, rest)));
+};
+
+export { ColorPicker };
+//# sourceMappingURL=color_picker.js.map

package/build/esm/packages/aurora/src/components/color_picker/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/color_picker_constants.d.ts

@@ -0,0 +1,25 @@
+export declare const COLOR_PICKER_INITIAL_STATE = "#FFFFFF";
+export declare const COLOR_PICKER_WIDTH = 232;
+export declare const COLOR_PICKER_PADDING_LEFT = 8;
+export declare const COLOR_PICKER_HEIGHT = 200;
+export declare const COLOR_PICKER_CONTENT_MAX_HEIGHT: {
+    readonly color: 305;
+    readonly gradient: 245;
+};
+export declare const COLOR_PICKER_ALPHA_MAX_VALUE = 100;
+export declare const COLOR_PICKER_TYPES: {
+    readonly HEX: "hex";
+    readonly RGB: "rgb";
+};
+export declare const COLOR_PICKER_SWATCH_SIZES: {
+    readonly small: "small";
+    readonly big: "big";
+};
+export declare const GRADIENT_TYPES: {
+    readonly linear: "linear-gradient";
+    readonly radial: "radial-gradient";
+};
+export declare const GRADIENT_RADIAL_SHAPES: {
+    readonly circle: "circle";
+    readonly ellipse: "ellipse";
+};

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

@@ -0,0 +1,24 @@
+var COLOR_PICKER_INITIAL_STATE = '#FFFFFF';
+var COLOR_PICKER_WIDTH = 232;
+var COLOR_PICKER_PADDING_LEFT = 8;
+var COLOR_PICKER_HEIGHT = 200;
+var COLOR_PICKER_CONTENT_MAX_HEIGHT = {
+  color: 305,
+  gradient: 245
+};
+var COLOR_PICKER_ALPHA_MAX_VALUE = 100;
+var COLOR_PICKER_TYPES = {
+  HEX: 'hex',
+  RGB: 'rgb'
+};
+var COLOR_PICKER_SWATCH_SIZES = {
+  small: 'small',
+  big: 'big'
+};
+var GRADIENT_TYPES = {
+  linear: 'linear-gradient',
+  radial: 'radial-gradient'
+};
+
+export { COLOR_PICKER_ALPHA_MAX_VALUE, COLOR_PICKER_CONTENT_MAX_HEIGHT, COLOR_PICKER_HEIGHT, COLOR_PICKER_INITIAL_STATE, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_SWATCH_SIZES, COLOR_PICKER_TYPES, COLOR_PICKER_WIDTH, GRADIENT_TYPES };
+//# sourceMappingURL=color_picker_constants.js.map

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

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { IColorPickerContext } from "./color_picker_types";
+export declare const ColorPickerContext: import("react").Context<IColorPickerContext | null>;

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

@@ -0,0 +1,6 @@
+import { createContext } from 'react';
+
+var ColorPickerContext = /*#__PURE__*/createContext(null);
+
+export { ColorPickerContext };
+//# sourceMappingURL=color_picker_context.js.map

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

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

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

@@ -0,0 +1,106 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { GRADIENT_RADIAL_SHAPES, GRADIENT_TYPES } from "./color_picker_constants";
+import { Any } from 'ts-toolbelt';
+export interface IColorPickerPureProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    id: string;
+    name?: string;
+    errors?: string | string[];
+    disabled?: boolean;
+    children?: ReactNode;
+    triggerClassName?: string;
+}
+export interface IColorPickerColorVariables {
+    isVisible: boolean;
+    variables: IColorPickerColorVariablesType;
+}
+export interface IColorPickerColorVariablesType {
+    primary: ColorPickerVariable;
+    secondary: ColorPickerVariable;
+    neutral: ColorPickerVariable;
+    font: ColorPickerVariable;
+    background: ColorPickerVariable;
+}
+export interface IColorPickerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    id: string;
+    name?: string;
+    value?: ColorPickerColorTypes['hex'] | undefined;
+    withGradient?: boolean;
+    colorVariables?: IColorPickerColorVariables;
+    errors?: string | string[];
+    onChange?: (color: IColorPickerColor) => void;
+    onCancel?: () => void;
+    onSave?: (color: IColorPickerColor) => void;
+    onPickShade?: (shadeValue: string) => void;
+    disabled?: boolean;
+    triggerClassName?: string;
+}
+export interface IColorPickerContext {
+    color: string;
+    setColor: (newColor: string, shadeName?: string) => void;
+    hex: string;
+    hslArr: number[];
+    handleOnChangeAlpha: (val: number) => void;
+    alpha: number;
+    rgbaArr: number[];
+    setR: (newR: number) => void;
+    setG: (newG: number) => void;
+    setB: (newB: number) => void;
+    handleCancel: () => void;
+    withGradient: boolean;
+    handleSave: () => 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;
+    typedInputValue: string;
+    setTypedInputValue: (newValue: string) => void;
+    isColorPickerCurrentlyUsed: boolean;
+    setIsColorPickerCurrentlyUsed: (isUsed: boolean) => void;
+    degrees: number;
+    shadeName: string;
+    onPickShade?: (shadeValue: string) => 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;
+};

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,OAA0C,OAAO,CAAC;AAClD,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,22 @@
+/// <reference types="react" />
+import { ColorPickerColors, ColorPickerVariable, IColorPickerColor, IColorPickerColorVariablesType } from './color_picker_types';
+import { GradientProps } from 'react-best-gradient-color-picker';
+import tinycolor from 'tinycolor2';
+export declare class ColorPickerUtils {
+    static getTinyColorInstance: (color: ColorPickerColors) => tinycolor.Instance;
+    static isGradient(color: string): boolean;
+    static getRgbaValue: (colorSet: tinycolor.Instance) => tinycolor.ColorFormats.RGBA;
+    static getHexValue: (colorSet: tinycolor.Instance) => string;
+    static getHexValueWithoutHash: (color: string) => string;
+    static getHexValueString: (colorSet: tinycolor.Instance) => string;
+    static getAllColorTypes: (color: ColorPickerVariable) => IColorPickerColor;
+    static getVariableShades: ({ color, name }: {
+        color: ColorPickerColors;
+        name: string;
+    }) => ColorPickerVariable[];
+    private static convertVariableShadesToHex;
+    static updateGradientWithActiveColor: (colors: GradientProps[], index: number, newColor: string) => GradientProps[];
+    static findVariable: (variables: IColorPickerColorVariablesType | ColorPickerVariable[], color: string) => string | undefined;
+    static normalizeLinearGradient: (color: string) => string;
+    static preventTypingLetters(event: React.KeyboardEvent<HTMLInputElement>): void;
+}

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

@@ -0,0 +1,192 @@
+import { createClass as _createClass, defineProperty as _defineProperty, objectSpread2 as _objectSpread2, toConsumableArray as _toConsumableArray, classCallCheck as _classCallCheck } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import tinycolor from '../../../../../external/tinycolor2/esm/tinycolor.js';
+import { high, low } from '../../../../../external/react-best-gradient-color-picker/dist/esm/utils/formatters.js';
+
+var _ColorPickerUtils;
+var ColorPickerUtils = /*#__PURE__*/function () {
+  function ColorPickerUtils() {
+    _classCallCheck(this, ColorPickerUtils);
+  }
+  return _createClass(ColorPickerUtils, null, [{
+    key: "isGradient",
+    value: function isGradient(color) {
+      return /(linear|radial|conic)-gradient\s*\(/.test(color);
+    }
+  }, {
+    key: "preventTypingLetters",
+    value: function preventTypingLetters(event) {
+      var allowedKeys = ['Backspace', 'ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Delete', 'Tab', 'Home', 'End'];
+      if (allowedKeys.includes(event.key) || event.ctrlKey || event.metaKey || /^[0-9]$/.test(event.key)) {
+        return;
+      } else {
+        event.preventDefault();
+      }
+    }
+  }]);
+}();
+_ColorPickerUtils = ColorPickerUtils;
+_defineProperty(ColorPickerUtils, "getTinyColorInstance", function (color) {
+  return tinycolor(color);
+});
+_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, "getHexValueWithoutHash", function (color) {
+  return color.replace('#', '');
+});
+_defineProperty(ColorPickerUtils, "getHexValueString", function (colorSet) {
+  return "#".concat(_ColorPickerUtils.getHexValue(colorSet));
+});
+_defineProperty(ColorPickerUtils, "getAllColorTypes", function (color) {
+  var tinyColor = _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 (_ref) {
+  var color = _ref.color,
+    name = _ref.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
+    };
+  });
+});
+_defineProperty(ColorPickerUtils, "updateGradientWithActiveColor", function (colors, index, newColor) {
+  return colors.map(function (c, i) {
+    return _objectSpread2(_objectSpread2({}, c), {}, {
+      value: i === index ? high(_objectSpread2(_objectSpread2({}, c), {}, {
+        value: tinycolor(newColor).toRgbString()
+      })) : low(c)
+    });
+  });
+});
+_defineProperty(ColorPickerUtils, "findVariable", function (variables, color) {
+  var _Object$values$find;
+  return (_Object$values$find = Object.values(variables).find(function (v) {
+    var variableTiny = _ColorPickerUtils.getTinyColorInstance(v.value);
+    var colorTiny = _ColorPickerUtils.getTinyColorInstance(color);
+    return variableTiny.toHex8String() === colorTiny.toHex8String();
+  })) === null || _Object$values$find === void 0 ? void 0 : _Object$values$find.name;
+});
+_defineProperty(ColorPickerUtils, "normalizeLinearGradient", function (color) {
+  var gradientRegex = /linear-gradient\s*\((.*?)\)/i;
+  var match = color.match(gradientRegex);
+  if (!match) {
+    return color;
+  }
+  var inner = match[1].trim();
+  var hasAngleOrDirection = /^([0-9.]+(deg|rad|grad|turn)|to\s+(left|right|top|bottom)(\s+(left|right|top|bottom))?)/i;
+  if (!hasAngleOrDirection.test(inner)) {
+    return color.replace(gradientRegex, "linear-gradient(180deg, ".concat(inner, ")"));
+  }
+  return color;
+});
+
+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,sBAAsB,qDAAyD;AAC/E,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,41 @@
+import React from 'react';
+import { objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { COLOR_PICKER_WIDTH, COLOR_PICKER_PADDING_LEFT, COLOR_PICKER_CONTENT_MAX_HEIGHT } from '../color_picker_constants.js';
+import { useColorPicker } from '../hooks/use_color_picker.js';
+import { ColorPickerFooter } from './color_picker_footer.js';
+import { getStyles } from '../../../../../../external/react-best-gradient-color-picker/dist/esm/styles/styles.js';
+import { ColorPickerVariables } from './color_picker_variables.js';
+import { ColorPickerControls } from './color_picker_controls.js';
+import { ColorPickerImpl } from './color_picker_impl.js';
+
+var ColorPickerContent = function ColorPickerContent() {
+  var _useColorPicker = useColorPicker(),
+    colorVariables = _useColorPicker.colorVariables,
+    isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
+  var defaultStyles = getStyles(true);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement("div", {
+    className: "aurora-flex aurora-flex-col aurora-pb-2 aurora-gap-2",
+    style: {
+      width: COLOR_PICKER_WIDTH + COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__PURE__*/React.createElement(ColorPickerControls, null)), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-overflow-y-scroll aurora-overflow-x-visible custom-scrollbar aurora-pr-0.5",
+    style: _objectSpread2(_objectSpread2({}, defaultStyles.body), {}, {
+      maxHeight: isCurrentValueGradient ? COLOR_PICKER_CONTENT_MAX_HEIGHT.gradient : COLOR_PICKER_CONTENT_MAX_HEIGHT.color
+    })
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-pl-2",
+    style: {
+      width: COLOR_PICKER_WIDTH + COLOR_PICKER_PADDING_LEFT,
+      paddingLeft: COLOR_PICKER_PADDING_LEFT
+    }
+  }, /*#__PURE__*/React.createElement(ColorPickerImpl, null), 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,0BAA0B,uFAA2F;AACrH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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,60 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.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 { GradientBar } from './color_picker_overrides/color_picker_gradient_bar.js';
+import { EyeDropper } from './color_picker_overrides/color_picker_eye_dropper.js';
+import { GradientControls } from './color_picker_overrides/color_picker_gradient_controls.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;
+  var EyeDropperAvailable = typeof window['EyeDropper'] !== 'undefined';
+  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, EyeDropperAvailable && (/*#__PURE__*/React.createElement(TooltipProvider, null, /*#__PURE__*/React.createElement(Tooltip, null, /*#__PURE__*/React.createElement(TooltipTrigger, null, /*#__PURE__*/React.createElement(EyeDropper, {
+    onSelect: handleChange
+  })), /*#__PURE__*/React.createElement(TooltipContent, {
+    variant: "dark"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    size: "xs",
+    weight: "medium",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
+  }, "".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, {
+    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.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",
+    color: CSS_TEXT_COLOR_TOKENS.inverse
+  }, "".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;AACA,0BAA0B,iFAAqF;AAC/G;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;