@dreamcommerce/aurora 3.0.0-141 → 3.0.0-142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (23) hide show
  1. package/build/cjs/packages/aurora/src/components/color_picker/components/color_label_input.js +3 -1
  2. package/build/cjs/packages/aurora/src/components/color_picker/components/color_label_input.js.map +1 -1
  3. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_content.js +1 -1
  4. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_footer.js +1 -1
  5. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js +1 -1
  6. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_header.js +1 -1
  7. package/build/cjs/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +4 -4
  8. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js +8 -11
  9. package/build/cjs/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  10. package/build/cjs/packages/aurora/src/components/input/input.js +2 -2
  11. package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.d.ts +1 -0
  12. package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.js +3 -1
  13. package/build/esm/packages/aurora/src/components/color_picker/components/color_label_input.js.map +1 -1
  14. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_content.js +1 -1
  15. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_footer.js +1 -1
  16. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_gradient_controls/color_picker_gradient_angle.js +1 -1
  17. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_header.js +1 -1
  18. package/build/esm/packages/aurora/src/components/color_picker/components/color_picker_inputs/color_picker_inputs_rgba.js +4 -4
  19. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js +8 -11
  20. package/build/esm/packages/aurora/src/components/color_picker/components/pure_color_picker.js.map +1 -1
  21. package/build/esm/packages/aurora/src/components/input/input.js +2 -2
  22. package/build/index.css +1 -1
  23. package/package.json +1 -1
@@ -17,7 +17,8 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
17
17
  var id = _ref.id,
18
18
  name = _ref.name,
19
19
  errors = _ref.errors,
20
- disabled = _ref.disabled;
20
+ disabled = _ref.disabled,
21
+ preElement = _ref.preElement;
21
22
  var _useColorPicker = use_color_picker.useColorPicker(),
22
23
  hex = _useColorPicker.hex,
23
24
  color = _useColorPicker.color,
@@ -29,6 +30,7 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
29
30
  var colorName = color.name ? "".concat(t(color.name)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
30
31
  if (isCurrentValueGradient) colorName = gradientType === color_picker_constants.GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
31
32
  return /*#__PURE__*/React__default['default'].createElement(input.Input, {
33
+ preElement: preElement,
32
34
  type: "text",
33
35
  id: id,
34
36
  name: name,
@@ -1 +1 @@
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;"}
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;"}
@@ -22,7 +22,7 @@ var ColorPickerContent = function ColorPickerContent() {
22
22
  isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
23
23
  var colorValue = typeof color === 'string' ? color : color.value;
24
24
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(color_picker_header.ColorPickerHeader, null), /*#__PURE__*/React__default['default'].createElement("div", {
25
- className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x"
25
+ className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x aurora-bg-neutral-0"
26
26
  }, /*#__PURE__*/React__default['default'].createElement(color_picker_impl.ColorPickerImpl, {
27
27
  value: colorValue,
28
28
  onChange: setColor,
@@ -33,7 +33,7 @@ var ColorPickerFooter = function ColorPickerFooter() {
33
33
  handleSave(color_picker_utils.ColorPickerUtils.getAllColorTypes(color));
34
34
  };
35
35
  return /*#__PURE__*/React__default['default'].createElement("div", {
36
- 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"
36
+ 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 aurora-bg-neutral-0"
37
37
  }, /*#__PURE__*/React__default['default'].createElement(button.Button, {
38
38
  className: "aurora-capitalize aurora-flex-1",
39
39
  variant: "secondary",
@@ -31,7 +31,7 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
31
31
  onChange: function onChange(e) {
32
32
  return handleDegrees(e);
33
33
  },
34
- className: '!aurora-h-5 !aurora-w-10 !aurora-px-1 !aurora-text-xs aurora-rounded-4 aurora-text-center'
34
+ className: '!aurora-h-[18px] !aurora-w-10 !aurora-px-1 !aurora-text-xs aurora-rounded-4 aurora-text-center'
35
35
  }), /*#__PURE__*/React__default['default'].createElement("div", {
36
36
  style: {
37
37
  position: 'absolute',
@@ -38,7 +38,7 @@ var ColorPickerHeader = function ColorPickerHeader() {
38
38
  };
39
39
  }, [isColorPickerOpened]);
40
40
  return /*#__PURE__*/React__default['default'].createElement("div", {
41
- className: "aurora-flex aurora-items-center aurora-justify-between aurora-py-2 aurora-px-4 aurora-border aurora-rounded-t-16"
41
+ className: "aurora-flex aurora-items-center aurora-justify-between aurora-py-2 aurora-px-4 aurora-border aurora-rounded-t-16 aurora-bg-neutral-0"
42
42
  }, /*#__PURE__*/React__default['default'].createElement(typography.Typography, {
43
43
  size: "s",
44
44
  weight: "semibold"
@@ -20,7 +20,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
20
20
  alphaValue = _useColorPicker.alphaValue,
21
21
  rgbaArr = _useColorPicker.rgbaArr;
22
22
  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(input.Input, {
23
- className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
23
+ className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
24
24
  type: "text",
25
25
  value: rgbaArr[0],
26
26
  onChange: function onChange(e) {
@@ -28,7 +28,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
28
28
  },
29
29
  onKeyPress: utilities.InputUtils.preventTypingLetters
30
30
  }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
31
- className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
31
+ className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
32
32
  type: "text",
33
33
  value: rgbaArr[1],
34
34
  onChange: function onChange(e) {
@@ -36,7 +36,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
36
36
  },
37
37
  onKeyPress: utilities.InputUtils.preventTypingLetters
38
38
  }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
39
- className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
39
+ className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
40
40
  type: "text",
41
41
  value: rgbaArr[2],
42
42
  onChange: function onChange(e) {
@@ -44,7 +44,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
44
44
  },
45
45
  onKeyPress: utilities.InputUtils.preventTypingLetters
46
46
  }), /*#__PURE__*/React__default['default'].createElement(input.Input, {
47
- className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
47
+ className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
48
48
  type: "text",
49
49
  value: alphaValue,
50
50
  onChange: handleOnChangeAlpha,
@@ -42,20 +42,17 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
42
42
  return setIsColorPickerOpened(true);
43
43
  },
44
44
  disabled: disabled
45
- }, /*#__PURE__*/React__default['default'].createElement("div", {
46
- className: "color-picker__input-container aurora-relative"
47
- }, /*#__PURE__*/React__default['default'].createElement("div", {
48
- className: "aurora-absolute aurora-top-1.5 aurora-left-2.5"
49
- }, /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
50
- color: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValue(colorTiny),
51
- cssColor: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
52
- size: "big"
53
- })), /*#__PURE__*/React__default['default'].createElement(color_label_input.ColorPickerInput, {
45
+ }, /*#__PURE__*/React__default['default'].createElement(color_label_input.ColorPickerInput, {
54
46
  id: id,
55
47
  name: name,
56
48
  errors: errors,
57
- disabled: disabled
58
- }))), /*#__PURE__*/React__default['default'].createElement(popover_content.PopoverContent, {
49
+ disabled: disabled,
50
+ preElement: /*#__PURE__*/React__default['default'].createElement(color_picker_swatch.ColorPickerSwatch, {
51
+ color: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValue(colorTiny),
52
+ cssColor: color_picker_utils.ColorPickerUtils.isGradient(colorValue) ? colorValue : color_picker_utils.ColorPickerUtils.getHexValueString(colorTiny),
53
+ size: "big"
54
+ })
55
+ })), /*#__PURE__*/React__default['default'].createElement(popover_content.PopoverContent, {
59
56
  className: "aurora-mt-2 aurora-rounded-16 aurora-overflow-hidden"
60
57
  }, /*#__PURE__*/React__default['default'].createElement(color_picker_content.ColorPickerContent, null))));
61
58
  };
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
@@ -49,7 +49,7 @@ var Input = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
49
49
  }
50
50
  }, [preElement, postElement]);
51
51
  return /*#__PURE__*/React__default['default'].createElement("div", {
52
- className: cn.cn(input_variants.inputVariants(), errors && 'aurora-border-danger aurora-border-2', disabled && 'aurora-bg-subtle aurora-text-subtle-light aurora-pointer-events-none aurora-cursor-not-allowed', type === 'number' && 'aurora-appearance-none', className)
52
+ className: cn.cn(input_variants.inputVariants(), errors && 'aurora-border-danger aurora-border-2', disabled && 'aurora-bg-subtle aurora-text-subtle-light aurora-pointer-events-none aurora-cursor-not-allowed', type === 'number' && 'aurora-appearance-none')
53
53
  }, preElement && (/*#__PURE__*/React__default['default'].createElement("div", {
54
54
  ref: preElRef,
55
55
  className: 'aurora-absolute aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
@@ -66,7 +66,7 @@ var Input = /*#__PURE__*/React__default['default'].forwardRef(function (_ref, re
66
66
  onKeyDown: onKeyDown,
67
67
  onKeyUp: onKeyUp,
68
68
  type: type,
69
- className: "aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-3 aurora-rounded-6",
69
+ className: cn.cn("aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-3 aurora-rounded-6", className),
70
70
  style: {
71
71
  paddingLeft: preElWidth ? "".concat(preElWidth, "px") : '',
72
72
  paddingRight: postElWidth ? "".concat(postElWidth, "px") : ''
@@ -4,6 +4,7 @@ interface IColorLabelInputProps {
4
4
  name?: string;
5
5
  errors?: string | string[];
6
6
  disabled?: boolean;
7
+ preElement?: React.ReactNode;
7
8
  }
8
9
  export declare const ColorPickerInput: React.FC<IColorLabelInputProps>;
9
10
  export {};
@@ -9,7 +9,8 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
9
9
  var id = _ref.id,
10
10
  name = _ref.name,
11
11
  errors = _ref.errors,
12
- disabled = _ref.disabled;
12
+ disabled = _ref.disabled,
13
+ preElement = _ref.preElement;
13
14
  var _useColorPicker = useColorPicker(),
14
15
  hex = _useColorPicker.hex,
15
16
  color = _useColorPicker.color,
@@ -21,6 +22,7 @@ var ColorPickerInput = function ColorPickerInput(_ref) {
21
22
  var colorName = color.name ? "".concat(t(color.name)) : "# ".concat(hex === null || hex === void 0 ? void 0 : hex.toUpperCase());
22
23
  if (isCurrentValueGradient) colorName = gradientType === GRADIENT_TYPES.linear ? t('Linear gradient') : t('Radial gradient');
23
24
  return /*#__PURE__*/React.createElement(Input, {
25
+ preElement: preElement,
24
26
  type: "text",
25
27
  id: id,
26
28
  name: name,
@@ -1 +1 @@
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;"}
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;"}
@@ -14,7 +14,7 @@ var ColorPickerContent = function ColorPickerContent() {
14
14
  isCurrentValueGradient = _useColorPicker.isCurrentValueGradient;
15
15
  var colorValue = typeof color === 'string' ? color : color.value;
16
16
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorPickerHeader, null), /*#__PURE__*/React.createElement("div", {
17
- className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x"
17
+ className: "aurora-flex aurora-flex-col aurora-max-w-72 aurora-py-2 aurora-px-4 aurora-border-x aurora-bg-neutral-0"
18
18
  }, /*#__PURE__*/React.createElement(ColorPickerImpl, {
19
19
  value: colorValue,
20
20
  onChange: setColor,
@@ -25,7 +25,7 @@ var ColorPickerFooter = function ColorPickerFooter() {
25
25
  handleSave(ColorPickerUtils.getAllColorTypes(color));
26
26
  };
27
27
  return /*#__PURE__*/React.createElement("div", {
28
- 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"
28
+ 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 aurora-bg-neutral-0"
29
29
  }, /*#__PURE__*/React.createElement(Button, {
30
30
  className: "aurora-capitalize aurora-flex-1",
31
31
  variant: "secondary",
@@ -23,7 +23,7 @@ var ColorPickerGradientAngle = function ColorPickerGradientAngle() {
23
23
  onChange: function onChange(e) {
24
24
  return handleDegrees(e);
25
25
  },
26
- className: '!aurora-h-5 !aurora-w-10 !aurora-px-1 !aurora-text-xs aurora-rounded-4 aurora-text-center'
26
+ className: '!aurora-h-[18px] !aurora-w-10 !aurora-px-1 !aurora-text-xs aurora-rounded-4 aurora-text-center'
27
27
  }), /*#__PURE__*/React.createElement("div", {
28
28
  style: {
29
29
  position: 'absolute',
@@ -30,7 +30,7 @@ var ColorPickerHeader = function ColorPickerHeader() {
30
30
  };
31
31
  }, [isColorPickerOpened]);
32
32
  return /*#__PURE__*/React.createElement("div", {
33
- className: "aurora-flex aurora-items-center aurora-justify-between aurora-py-2 aurora-px-4 aurora-border aurora-rounded-t-16"
33
+ className: "aurora-flex aurora-items-center aurora-justify-between aurora-py-2 aurora-px-4 aurora-border aurora-rounded-t-16 aurora-bg-neutral-0"
34
34
  }, /*#__PURE__*/React.createElement(Typography, {
35
35
  size: "s",
36
36
  weight: "semibold"
@@ -12,7 +12,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
12
12
  alphaValue = _useColorPicker.alphaValue,
13
13
  rgbaArr = _useColorPicker.rgbaArr;
14
14
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Input, {
15
- className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
15
+ className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
16
16
  type: "text",
17
17
  value: rgbaArr[0],
18
18
  onChange: function onChange(e) {
@@ -20,7 +20,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
20
20
  },
21
21
  onKeyPress: InputUtils.preventTypingLetters
22
22
  }), /*#__PURE__*/React.createElement(Input, {
23
- className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
23
+ className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
24
24
  type: "text",
25
25
  value: rgbaArr[1],
26
26
  onChange: function onChange(e) {
@@ -28,7 +28,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
28
28
  },
29
29
  onKeyPress: InputUtils.preventTypingLetters
30
30
  }), /*#__PURE__*/React.createElement(Input, {
31
- className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
31
+ className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
32
32
  type: "text",
33
33
  value: rgbaArr[2],
34
34
  onChange: function onChange(e) {
@@ -36,7 +36,7 @@ var ColorPickerInputsRgba = function ColorPickerInputsRgba() {
36
36
  },
37
37
  onKeyPress: InputUtils.preventTypingLetters
38
38
  }), /*#__PURE__*/React.createElement(Input, {
39
- className: "!aurora-h-6 !aurora-px-2 aurora-text-xs",
39
+ className: "!aurora-h-6 !aurora-px-1.5 aurora-text-xs",
40
40
  type: "text",
41
41
  value: alphaValue,
42
42
  onChange: handleOnChangeAlpha,
@@ -34,20 +34,17 @@ var ColorPickerPure = function ColorPickerPure(_ref) {
34
34
  return setIsColorPickerOpened(true);
35
35
  },
36
36
  disabled: disabled
37
- }, /*#__PURE__*/React.createElement("div", {
38
- className: "color-picker__input-container aurora-relative"
39
- }, /*#__PURE__*/React.createElement("div", {
40
- className: "aurora-absolute aurora-top-1.5 aurora-left-2.5"
41
- }, /*#__PURE__*/React.createElement(ColorPickerSwatch, {
42
- color: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValue(colorTiny),
43
- cssColor: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValueString(colorTiny),
44
- size: "big"
45
- })), /*#__PURE__*/React.createElement(ColorPickerInput, {
37
+ }, /*#__PURE__*/React.createElement(ColorPickerInput, {
46
38
  id: id,
47
39
  name: name,
48
40
  errors: errors,
49
- disabled: disabled
50
- }))), /*#__PURE__*/React.createElement(PopoverContent, {
41
+ disabled: disabled,
42
+ preElement: /*#__PURE__*/React.createElement(ColorPickerSwatch, {
43
+ color: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValue(colorTiny),
44
+ cssColor: ColorPickerUtils.isGradient(colorValue) ? colorValue : ColorPickerUtils.getHexValueString(colorTiny),
45
+ size: "big"
46
+ })
47
+ })), /*#__PURE__*/React.createElement(PopoverContent, {
51
48
  className: "aurora-mt-2 aurora-rounded-16 aurora-overflow-hidden"
52
49
  }, /*#__PURE__*/React.createElement(ColorPickerContent, null))));
53
50
  };
@@ -1 +1 @@
1
- {"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
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;"}
@@ -41,7 +41,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
41
41
  }
42
42
  }, [preElement, postElement]);
43
43
  return /*#__PURE__*/React.createElement("div", {
44
- className: cn(inputVariants(), errors && 'aurora-border-danger aurora-border-2', disabled && 'aurora-bg-subtle aurora-text-subtle-light aurora-pointer-events-none aurora-cursor-not-allowed', type === 'number' && 'aurora-appearance-none', className)
44
+ className: cn(inputVariants(), errors && 'aurora-border-danger aurora-border-2', disabled && 'aurora-bg-subtle aurora-text-subtle-light aurora-pointer-events-none aurora-cursor-not-allowed', type === 'number' && 'aurora-appearance-none')
45
45
  }, preElement && (/*#__PURE__*/React.createElement("div", {
46
46
  ref: preElRef,
47
47
  className: 'aurora-absolute aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
@@ -58,7 +58,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
58
58
  onKeyDown: onKeyDown,
59
59
  onKeyUp: onKeyUp,
60
60
  type: type,
61
- className: "aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-3 aurora-rounded-6",
61
+ className: cn("aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-3 aurora-rounded-6", className),
62
62
  style: {
63
63
  paddingLeft: preElWidth ? "".concat(preElWidth, "px") : '',
64
64
  paddingRight: postElWidth ? "".concat(postElWidth, "px") : ''