@dreamcommerce/aurora 3.0.0-99 → 3.0.0

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js

@@ -1,8 +1,9 @@
 import React from 'react';
-import { Label } from '../../label/label.js';
-import { HelperText } from '../../helper_text/helper_text.js';
-import { ErrorList } from '../../error_list/error_list.js';
+import { CSS_TEXT_COLOR_TOKENS } from '../../../constants/css_tokens/css_text_color_tokens.js';
 import { Control } from '../../control/control.js';
+import { ErrorList } from '../../error_list/error_list.js';
+import { HelperText } from '../../helper_text/helper_text.js';
+import { Label } from '../../label/label.js';
 import { ValuesSyncer } from '../../values_syncer/values_syncer.js';
 
 var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
@@ -13,29 +14,35 @@ var ValuesSyncerControl = function ValuesSyncerControl(_ref) {
     errors = _ref.errors,
     firstControl = _ref.firstControl,
     secondControl = _ref.secondControl,
-    initialFirstValue = _ref.initialFirstValue,
-    initialSecondValue = _ref.initialSecondValue,
+    firstValue = _ref.firstValue,
+    secondValue = _ref.secondValue,
     isLocked = _ref.isLocked,
     onLock = _ref.onLock,
+    disableLockButton = _ref.disableLockButton,
     onChange = _ref.onChange,
-    helperText = _ref.helperText;
+    disabled = _ref.disabled,
+    helperText = _ref.helperText,
+    className = _ref.className;
   return /*#__PURE__*/React.createElement(Control, {
     classname: "aurora-flex-col"
-  }, label && (/*#__PURE__*/React.createElement(Label, {
-    required: required,
-    tooltip: tooltip
-  }, label)), /*#__PURE__*/React.createElement(ValuesSyncer, {
+  }, label ? (/*#__PURE__*/React.createElement(Label, {
+    tooltip: tooltip,
+    required: required
+  }, label)) : null, /*#__PURE__*/React.createElement(ValuesSyncer, {
     firstControl: firstControl,
     secondControl: secondControl,
-    initialFirstValue: initialFirstValue,
-    initialSecondValue: initialSecondValue,
+    firstValue: firstValue,
+    secondValue: secondValue,
     isLocked: isLocked,
     onLock: onLock,
-    onChange: onChange
-  }), helperText && /*#__PURE__*/React.createElement(HelperText, null, helperText), errors && /*#__PURE__*/React.createElement(ErrorList, {
-    errors: errors,
-    className: "aurora-text-danger aurora-text-sm"
-  }));
+    disableLockButton: disableLockButton,
+    onChange: onChange,
+    className: className
+  }), helperText ? /*#__PURE__*/React.createElement(HelperText, {
+    color: disabled ? CSS_TEXT_COLOR_TOKENS.subtleLight : undefined
+  }, helperText) : null, errors ? /*#__PURE__*/React.createElement(ErrorList, {
+    errors: errors
+  }) : null);
 };
 ValuesSyncerControl.displayName = 'ValuesSyncerControl';
 

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control.js.map

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

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control_types.d.ts

@@ -1,9 +1,10 @@
-/// <reference types="react" />
 import { TValuesSyncerProps } from "../../values_syncer/values_syncer_types";
-export declare type TValuesSyncerControlProps = TValuesSyncerProps & {
+import React from 'react';
+export declare type TValuesSyncerControlProps<T> = TValuesSyncerProps<T> & {
     label?: string | React.ReactNode;
     required?: boolean;
     tooltip?: string | React.ReactNode;
     helperText?: string | React.ReactNode;
     errors?: string | string[];
+    disabled?: boolean;
 };

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control_types.js

@@ -1,2 +1,3 @@
 import '@auroraComponents/values_syncer/values_syncer_types';
+import 'react';
 //# sourceMappingURL=values_syncer_control_types.js.map

package/build/esm/packages/aurora/src/components/controls/values_syncer_control/values_syncer_control_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"values_syncer_control_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/values_syncer_control/values_syncer_control_types.ts"],"names":[],"mappings":"AAAA,OAAmC,qDAAqD,CAAC"}
+{"version":3,"file":"values_syncer_control_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/values_syncer_control/values_syncer_control_types.ts"],"names":[],"mappings":"AAAA,OAAmC,qDAAqD,CAAC;AACzF,OAAkB,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control.js

@@ -1,9 +1,8 @@
 import React, { useState } from 'react';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { Label } from '../../label/label.js';
-import { HelperText } from '../../helper_text/helper_text.js';
-import { ErrorList } from '../../error_list/error_list.js';
 import { Control } from '../../control/control.js';
+import { HelperText } from '../../helper_text/helper_text.js';
+import { Label } from '../../label/label.js';
 import { XhrImagePicker } from '../../xhr_image_picker/xhr_image_picker.js';
 
 var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
@@ -14,6 +13,7 @@ var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
     name = _ref.name,
     onChange = _ref.onChange,
     allowedExtensions = _ref.allowedExtensions,
+    allowedExtensionsLabel = _ref.allowedExtensionsLabel,
     initialFile = _ref.initialFile,
     className = _ref.className,
     errors = _ref.errors,
@@ -39,26 +39,25 @@ var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
   };
   return /*#__PURE__*/React.createElement(Control, {
     classname: "aurora-flex-col"
-  }, label && (/*#__PURE__*/React.createElement(Label, {
+  }, label ? (/*#__PURE__*/React.createElement(Label, {
     htmlFor: id,
-    required: required,
-    tooltip: tooltip
-  }, label)), /*#__PURE__*/React.createElement(XhrImagePicker, {
+    tooltip: tooltip,
+    required: required
+  }, label)) : null, /*#__PURE__*/React.createElement(XhrImagePicker, {
     url: url,
     id: id,
     name: name,
     onChange: handleControlChange,
     onError: handleControlError,
     allowedExtensions: allowedExtensions,
+    allowedExtensionsLabel: allowedExtensionsLabel,
     initialFile: initialFile,
     className: className,
     errors: errors,
     onUploaded: onUploaded,
     onImageSizeUpdated: onImageSizeUpdated,
     ImageEditor: ImageEditor
-  }), helperText && /*#__PURE__*/React.createElement(HelperText, null, helperText), errors && /*#__PURE__*/React.createElement(ErrorList, {
-    errors: errors
-  }));
+  }), helperText ? /*#__PURE__*/React.createElement(HelperText, null, helperText) : null);
 };
 
 export { XhrImagePickerControl };

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control.js.map

@@ -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;AACA;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/divider/divider_constants.d.ts

@@ -9,6 +9,7 @@ export declare const DIVIDER_THICKNESS: {
     readonly 8: "8";
 };
 export declare const DIVIDER_VARIANTS: {
+    readonly default: "default";
     readonly subtle: "subtle";
     readonly strong: "strong";
     readonly transparent: "transparent";

package/build/esm/packages/aurora/src/components/divider/divider_constants.js

@@ -9,6 +9,7 @@ var DIVIDER_THICKNESS = {
   8: '8'
 };
 var DIVIDER_VARIANTS = {
+  default: 'default',
   subtle: 'subtle',
   strong: 'strong',
   transparent: 'transparent'

package/build/esm/packages/aurora/src/components/divider/divider_constants.js.map

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

package/build/esm/packages/aurora/src/components/divider/divider_variants.d.ts

@@ -1,5 +1,5 @@
 export declare const dividerVariants: (props?: ({
     thickness?: "1" | "2" | "4" | "8" | null | undefined;
-    variant?: "subtle" | "strong" | "transparent" | null | undefined;
+    variant?: "default" | "subtle" | "strong" | "transparent" | null | undefined;
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;

package/build/esm/packages/aurora/src/components/divider/divider_variants.js

@@ -6,8 +6,8 @@ import { DIVIDER_THICKNESS, DIVIDER_VARIANTS, DIVIDER_ORIENTATION } from './divi
 var dividerVariants = cva('', {
   variants: {
     thickness: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DIVIDER_THICKNESS['1'], ''), DIVIDER_THICKNESS['2'], ''), DIVIDER_THICKNESS['4'], ''), DIVIDER_THICKNESS['8'], ''),
-    variant: _defineProperty(_defineProperty(_defineProperty({}, DIVIDER_VARIANTS.subtle, "aurora-bg-neutral-100"), DIVIDER_VARIANTS.strong, 'aurora-bg--neutral-500'), DIVIDER_VARIANTS.transparent, 'aurora-bg-transparent'),
-    orientation: _defineProperty(_defineProperty({}, DIVIDER_ORIENTATION.horizontal, ''), DIVIDER_ORIENTATION.vertical, 'aurora-h-full')
+    variant: _defineProperty(_defineProperty(_defineProperty(_defineProperty({}, DIVIDER_VARIANTS.default, "aurora-bg-neutral-200"), DIVIDER_VARIANTS.subtle, "aurora-bg-neutral-100"), DIVIDER_VARIANTS.strong, 'aurora-bg--neutral-500'), DIVIDER_VARIANTS.transparent, 'aurora-bg-transparent'),
+    orientation: _defineProperty(_defineProperty({}, DIVIDER_ORIENTATION.horizontal, 'aurora-w-full'), DIVIDER_ORIENTATION.vertical, 'aurora-h-full')
   },
   compoundVariants: [{
     orientation: DIVIDER_ORIENTATION.horizontal,
@@ -44,7 +44,7 @@ var dividerVariants = cva('', {
   }],
   defaultVariants: {
     thickness: CSS_BORDER_WIDTH_TOKENS['1'],
-    variant: DIVIDER_VARIANTS.subtle,
+    variant: DIVIDER_VARIANTS.default,
     orientation: DIVIDER_ORIENTATION.horizontal
   }
 });

package/build/esm/packages/aurora/src/components/error_list/components/error_list_item.js

@@ -1,16 +1,16 @@
 import { createElement } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { cn } from '../../../utilities/cn.js';
-import { errorListItemVariants } from './error_list_item_variants.js';
+import { Typography } from '../../typography/typography.js';
 
 var _excluded = ["children", "className"];
 var ErrorListItem = function ErrorListItem(_ref) {
   var children = _ref.children,
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/createElement("li", _objectSpread2({
-    className: cn(errorListItemVariants(), className)
-  }, props), children);
+  return /*#__PURE__*/createElement("li", _objectSpread2({}, props), /*#__PURE__*/createElement(Typography, {
+    color: "danger",
+    size: "s"
+  }, children));
 };
 
 export { ErrorListItem };

package/build/esm/packages/aurora/src/components/error_list/error_list.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { TErrorListProps } from './error_list_types';
-export declare const ErrorList: ({ errors, className, ...props }: PropsWithChildren<TErrorListProps>) => React.JSX.Element;
+export declare const ErrorList: ({ errors, className, ...props }: PropsWithChildren<TErrorListProps>) => React.JSX.Element | null;

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

@@ -10,6 +10,7 @@ var ErrorList = function ErrorList(_ref) {
     className = _ref.className,
     props = _objectWithoutProperties(_ref, _excluded);
   var singleError = typeof errors === 'string';
+  if (!(errors !== null && errors !== void 0 && errors.length)) return null;
   return /*#__PURE__*/createElement("ul", _objectSpread2({
     className: cn(errorListVariants(), className)
   }, props), singleError ? (/*#__PURE__*/createElement(ErrorListItem, null, errors)) : errors.map(function (error, index) {

package/build/esm/packages/aurora/src/components/error_list/error_list.js.map

@@ -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;"}
+{"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/error_list/error_list_variants.js

@@ -1,6 +1,6 @@
 import { cva } from '../../../../../external/class-variance-authority/dist/index.mjs.js';
 
-var errorListVariants = cva('aurora-list-none');
+var errorListVariants = cva('aurora-m-0 aurora-p-0 aurora-list-none');
 
 export { errorListVariants };
 //# sourceMappingURL=error_list_variants.js.map

package/build/esm/packages/aurora/src/components/helper_text/helper_text.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
 import { PropsWithChildren } from 'react';
 import { THelperTextProps } from './helper_text_types';
-export declare const HelperText: ({ className, ...props }: PropsWithChildren<THelperTextProps>) => React.JSX.Element;
+export declare const HelperText: ({ className, children, color, ...props }: PropsWithChildren<THelperTextProps>) => React.JSX.Element;

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

@@ -1,15 +1,18 @@
 import { createElement } from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { cn } from '../../utilities/cn.js';
-import { helperTextVariants } from './helper_text_variants.js';
+import { Typography } from '../typography/typography.js';
 
-var _excluded = ["className"];
+var _excluded = ["className", "children", "color"];
 var HelperText = function HelperText(_ref) {
   var className = _ref.className,
+    children = _ref.children,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'subtle' : _ref$color,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/createElement("p", _objectSpread2({
-    className: cn(helperTextVariants(), className)
-  }, props));
+  return /*#__PURE__*/createElement(Typography, _objectSpread2({
+    size: "s",
+    color: color
+  }, props), children);
 };
 
 export { HelperText };

package/build/esm/packages/aurora/src/components/helper_text/helper_text.js.map

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

package/build/esm/packages/aurora/src/components/helper_text/helper_text_types.d.ts

@@ -1,3 +1,5 @@
 import * as React from 'react';
-export interface THelperTextProps extends React.HTMLAttributes<HTMLParagraphElement> {
-}
+import { TCssTextColorTokens } from "../../constants/css_tokens/css_tokens_types";
+export declare type THelperTextProps = React.HTMLAttributes<HTMLParagraphElement> & {
+    color?: TCssTextColorTokens;
+};

package/build/esm/packages/aurora/src/components/helper_text/helper_text_types.js

@@ -1,2 +1,3 @@
 import 'react';
+import '@auroraConstants/css_tokens/css_tokens_types';
 //# sourceMappingURL=helper_text_types.js.map

package/build/esm/packages/aurora/src/components/helper_text/helper_text_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"helper_text_types.js","sourceRoot":"","sources":["../../../../../../../src/components/helper_text/helper_text_types.ts"],"names":[],"mappings":"AAAA,OAAuB,OAAO,CAAC"}
+{"version":3,"file":"helper_text_types.js","sourceRoot":"","sources":["../../../../../../../src/components/helper_text/helper_text_types.ts"],"names":[],"mappings":"AAAA,OAAuB,OAAO,CAAC;AAC/B,OAAoC,8CAA8C,CAAC"}

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_drag_over_placeholder.d.ts

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

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_drag_over_placeholder.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { cn } from '../../../utilities/cn.js';
+
+var ImagePickerDragOverPlaceholder = function ImagePickerDragOverPlaceholder() {
+  var _useTranslation = useTranslation(),
+    _useTranslation2 = _slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  return /*#__PURE__*/React.createElement("div", {
+    className: cn('aurora-absolute aurora-inset-0 aurora-bg-neutral-0 aurora-border-2 aurora-border-primary aurora-rounded-8 aurora-z-20 aurora-pointer-events-none aurora-w-full aurora-h-full')
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "aurora-w-full aurora-h-full aurora-bg-primary-transparent aurora-flex aurora-items-center aurora-justify-center"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "aurora-text-xs aurora-text-interactive"
+  }, "".concat(t('Drop file here')))));
+};
+
+export { ImagePickerDragOverPlaceholder };
+//# sourceMappingURL=image_picker_drag_over_placeholder.js.map

package/build/esm/packages/aurora/src/components/{color_picker/components/color_label_input.js.map → image_picker/components/image_picker_drag_over_placeholder.js.map}

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

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_input.d.ts

@@ -4,6 +4,7 @@ declare type ImagePickerInput = {
     onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
     onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
     onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    allowedExtensionsLabel?: string;
     allowedExtensions: string[];
     isDragOver: boolean;
 };

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_input.js

@@ -2,6 +2,7 @@ import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../../utilities/cn.js';
+import { ImagePickerDragOverPlaceholder } from './image_picker_drag_over_placeholder.js';
 import { UploadLineIcon } from '../../../assets/icons/upload_icon.js';
 
 var ImagePickerInput = function ImagePickerInput(_ref) {
@@ -9,6 +10,7 @@ var ImagePickerInput = function ImagePickerInput(_ref) {
     onDropFile = _ref.onDropFile,
     onDragOver = _ref.onDragOver,
     onDragLeave = _ref.onDragLeave,
+    allowedExtensionsLabel = _ref.allowedExtensionsLabel,
     allowedExtensions = _ref.allowedExtensions,
     isDragOver = _ref.isDragOver;
   var _useTranslation = useTranslation(),
@@ -19,22 +21,16 @@ var ImagePickerInput = function ImagePickerInput(_ref) {
     onDrop: onDropFile,
     onDragOver: onDragOver,
     onDragLeave: onDragLeave,
-    className: "aurora-relative aurora-flex aurora-items-center aurora-justify-center aurora-w-full aurora-h-full aurora-cursor-pointer aurora-p-1 aurora-pb-2 aurora-group"
-  }, isDragOver && (/*#__PURE__*/React.createElement("div", {
-    className: cn('aurora-absolute aurora-inset-0 aurora-bg-neutral-0 aurora-border-2 aurora-border-primary aurora-rounded-8 aurora-z-1 aurora-pointer-events-none')
-  }, /*#__PURE__*/React.createElement("div", {
-    className: " aurora-w-full aurora-h-full aurora-bg-primary-transparent aurora-flex aurora-items-center aurora-justify-center"
-  }, /*#__PURE__*/React.createElement("span", {
-    className: "aurora-text-xs aurora-text-interactive"
-  }, "".concat(t('Drop file here')))))), /*#__PURE__*/React.createElement("div", {
+    className: "aurora-relative aurora-flex aurora-items-center aurora-justify-center aurora-w-full aurora-h-full aurora-cursor-pointer aurora-p-1 aurora-pb-2 aurora-group/imagePickerInput"
+  }, isDragOver && /*#__PURE__*/React.createElement(ImagePickerDragOverPlaceholder, null), /*#__PURE__*/React.createElement("div", {
     className: cn('aurora-flex aurora-flex-col aurora-items-center aurora-w-full aurora-h-full aurora-pt-4 aurora-pb-3 aurora-px-1')
   }, /*#__PURE__*/React.createElement(UploadLineIcon, {
-    className: "aurora-w-5 aurora-h-5 aurora-fill-subtle group-hover:aurora-fill-primary aurora-mb-2"
+    className: "aurora-w-5 aurora-h-5 aurora-fill-subtle group-hover/imagePickerInput:aurora-fill-primary aurora-mb-2"
   }), /*#__PURE__*/React.createElement("div", {
     className: "aurora-text-xs aurora-text-interactive aurora-font-semibold"
   }, "".concat(t('Drag a file here or browse'))), /*#__PURE__*/React.createElement("span", {
     className: "aurora-text-xs aurora-text-subtle-light aurora-font-normal aurora-text-center"
-  }, "".concat(t('Supported formats')), ": ", allowedExtensions.map(function (extension) {
+  }, "".concat(allowedExtensionsLabel ? allowedExtensionsLabel : t('Supported formats')), ":", allowedExtensions.map(function (extension) {
     return "*.".concat(extension);
   }).join(', '))));
 };

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_input.js.map

@@ -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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview.js

@@ -4,13 +4,15 @@ var ImagePickerPreview = function ImagePickerPreview(_ref) {
   var file = _ref.file,
     onError = _ref.onError,
     onLoad = _ref.onLoad;
-  return /*#__PURE__*/React.createElement("img", {
-    className: "aurora-rounded-4 aurora-w-full aurora-h-full",
+  return /*#__PURE__*/React.createElement("div", {
+    className: 'aurora-rounded-4 aurora-w-full aurora-h-full aurora-min-h-16 aurora-flex aurora-justify-center aurora-items-center'
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-object-contain",
     alt: file.fileName,
     src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '',
     onError: onError,
     onLoad: onLoad
-  });
+  }));
 };
 
 export { ImagePickerPreview };

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview.js.map

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

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview_container.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { IImagePickerPreviewContainer } from '../image_picker_types';
+export declare const ImagePickerPreviewContainer: React.FC<IImagePickerPreviewContainer>;

package/build/esm/packages/aurora/src/components/image_picker/components/image_picker_preview_container.js

@@ -0,0 +1,18 @@
+import React from 'react';
+
+var ImagePickerPreviewContainer = function ImagePickerPreviewContainer(_ref) {
+  var classname = _ref.classname,
+    children = _ref.children,
+    onDragLeave = _ref.onDragLeave,
+    onDragOver = _ref.onDragOver,
+    onDropFile = _ref.onDropFile;
+  return /*#__PURE__*/React.createElement("label", {
+    className: classname,
+    onDragLeave: onDragLeave,
+    onDragOver: onDragOver,
+    onDrop: onDropFile
+  }, children);
+};
+
+export { ImagePickerPreviewContainer };
+//# sourceMappingURL=image_picker_preview_container.js.map

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

package/build/esm/packages/aurora/src/components/image_picker/components/uploaded_image_picker_item.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { FileUtils } from '@dreamcommerce/utilities';
 import { DeleteBinLineIcon } from '../../../assets/icons/delete_bin_icon.js';
+import { FileUtils } from '@dreamcommerce/utilities';
 
 var UploadedImagePickerItem = function UploadedImagePickerItem(_ref) {
   var imageSize = _ref.imageSize,
@@ -17,17 +17,18 @@ var UploadedImagePickerItem = function UploadedImagePickerItem(_ref) {
   var imageWidth = imageSize && imageSize.width;
   var imageHeight = imageSize && imageSize.height;
   return /*#__PURE__*/React.createElement("div", {
-    className: 'aurora-flex aurora-justify-between aurora-items-center aurora-pt-2 aurora-px-1 aurora-gap-1'
+    className: "aurora-flex aurora-justify-between aurora-items-center aurora-pt-2 aurora-px-1 aurora-gap-1"
   }, /*#__PURE__*/React.createElement("div", {
-    className: 'aurora-text-xs aurora-text-subtle aurora-overflow-hidden aurora-text-ellipsis'
+    className: "aurora-text-xs aurora-text-subtle aurora-overflow-hidden aurora-text-ellipsis"
   }, isValid && (/*#__PURE__*/React.createElement(React.Fragment, null, imageName, ".".concat(imageExtension, " (").concat(imageWidth, "x").concat(imageHeight, "px)")))), /*#__PURE__*/React.createElement("button", {
     "data-test-id": "image-picker-remove-button",
     onClick: onFileDelete,
-    className: 'aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-border-danger aurora-rounded-full aurora-px-3 aurora-py-[6px]'
+    className: "aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-border-danger aurora-rounded-full aurora-px-3 aurora-py-[6px]",
+    type: "button"
   }, /*#__PURE__*/React.createElement(DeleteBinLineIcon, {
     className: "aurora-w-4 aurora-h-4 aurora-fill-danger"
   }), /*#__PURE__*/React.createElement("span", {
-    className: 'aurora-text-xs aurora-text-danger aurora-font-semibold'
+    className: "aurora-text-xs aurora-text-danger aurora-font-semibold"
   }, "".concat(t('Remove')))));
 };
 

package/build/esm/packages/aurora/src/components/image_picker/components/uploaded_image_picker_item.js.map

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

package/build/esm/packages/aurora/src/components/image_picker/image_picker.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
 import { IImagePicker } from './image_picker_types';
+import React from 'react';
 export declare const ImagePicker: React.FC<IImagePicker>;

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

@@ -4,8 +4,10 @@ import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator,
 import { cn } from '../../utilities/cn.js';
 import { ErrorList } from '../error_list/error_list.js';
 import { IMAGE_PICKER_EXTENSIONS } from './image_picker_constants.js';
-import { ImagePickerPreview } from './components/image_picker_preview.js';
+import { ImagePickerDragOverPlaceholder } from './components/image_picker_drag_over_placeholder.js';
 import { ImagePickerInput } from './components/image_picker_input.js';
+import { ImagePickerPreview } from './components/image_picker_preview.js';
+import { ImagePickerPreviewContainer } from './components/image_picker_preview_container.js';
 import { UploadedImagePickerItem } from './components/uploaded_image_picker_item.js';
 import { getAcceptFilesParametersFromAllowedExtensions } from './image_picker_utils.js';
 import { useImagePicker } from './use_image_picker.js';
@@ -17,6 +19,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     initialErrors = _ref.errors,
     _ref$allowedExtension = _ref.allowedExtensions,
     allowedExtensions = _ref$allowedExtension === void 0 ? [IMAGE_PICKER_EXTENSIONS.WEBP, IMAGE_PICKER_EXTENSIONS.JPG, IMAGE_PICKER_EXTENSIONS.PNG, IMAGE_PICKER_EXTENSIONS.GIF, IMAGE_PICKER_EXTENSIONS.SVG, IMAGE_PICKER_EXTENSIONS.JPEG] : _ref$allowedExtension,
+    allowedExtensionsLabel = _ref.allowedExtensionsLabel,
     initialFile = _ref.initialFile,
     name = _ref.name,
     onImageSizeUpdated = _ref.onImageSizeUpdated,
@@ -57,9 +60,6 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
     imageSize = _useState2[0],
     setImageSize = _useState2[1];
   var acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
-  useEffect(function () {
-    onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(imageSize);
-  }, [imageSize]);
   useEffect(function () {
     initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
   }, [initialFile]);
@@ -75,10 +75,12 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   };
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
     createImageFromUrl(fileUrl).then(function (image) {
-      setImageSize({
+      var size = {
         width: image.naturalWidth,
         height: image.naturalHeight
-      });
+      };
+      setImageSize(size);
+      onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(size);
     });
   };
   var createImageFromUrl = /*#__PURE__*/function () {
@@ -106,6 +108,7 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   var handleOnFileDelete = function handleOnFileDelete() {
     onFileDelete();
     setImageSize(undefined);
+    onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(undefined);
   };
   return /*#__PURE__*/React.createElement("div", {
     className: "aurora-mb-1"
@@ -116,20 +119,29 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
       'aurora-border-none': isDragOver
     })
   }, file && !(errors !== null && errors !== void 0 && errors.length) ? isPreview ? (/*#__PURE__*/React.createElement("div", {
-    className: "aurora-p-1 aurora-pb-2 aurora-relative"
-  }, topButtons && /*#__PURE__*/React.createElement("div", null, topButtons), /*#__PURE__*/React.createElement(ImagePickerPreview, {
+    className: "aurora-p-1 aurora-relative"
+  }, /*#__PURE__*/React.createElement(ImagePickerPreviewContainer, {
+    classname: "aurora-relative aurora-flex aurora-flex-col",
+    onDragLeave: onDragLeave,
+    onDragOver: onDragOver,
+    onDropFile: onDropFile
+  }, topButtons && /*#__PURE__*/React.createElement(React.Fragment, null, topButtons), /*#__PURE__*/React.createElement("label", {
+    htmlFor: id,
+    className: "aurora-relative"
+  }, /*#__PURE__*/React.createElement(ImagePickerPreview, {
     file: file,
     onError: onPreviewError
-  }), /*#__PURE__*/React.createElement(UploadedImagePickerItem, {
+  })), /*#__PURE__*/React.createElement(UploadedImagePickerItem, {
     imageSize: imageSize,
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onFileDelete: handleOnFileDelete
-  }))) : (/*#__PURE__*/React.createElement("div", null, "".concat(t('No preview')))) : (/*#__PURE__*/React.createElement(ImagePickerInput, {
+  })), isDragOver && /*#__PURE__*/React.createElement(ImagePickerDragOverPlaceholder, null))) : (/*#__PURE__*/React.createElement("div", null, "".concat(t('No preview')))) : (/*#__PURE__*/React.createElement(ImagePickerInput, {
     onDragLeave: onDragLeave,
     onDragOver: onDragOver,
     isDragOver: isDragOver,
     allowedExtensions: allowedExtensions,
+    allowedExtensionsLabel: allowedExtensionsLabel,
     id: id,
     onDropFile: onDropFile
   })), /*#__PURE__*/React.createElement("input", {
@@ -143,6 +155,9 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   })), errors && /*#__PURE__*/React.createElement(ErrorList, {
     errors: errors
   }));
+}, function (prev, curr) {
+  var _prev$initialFile, _curr$initialFile, _prev$initialFile2, _curr$initialFile2;
+  return ((_prev$initialFile = prev.initialFile) === null || _prev$initialFile === void 0 ? void 0 : _prev$initialFile.fileUrl) === ((_curr$initialFile = curr.initialFile) === null || _curr$initialFile === void 0 ? void 0 : _curr$initialFile.fileUrl) && ((_prev$initialFile2 = prev.initialFile) === null || _prev$initialFile2 === void 0 ? void 0 : _prev$initialFile2.fileName) === ((_curr$initialFile2 = curr.initialFile) === null || _curr$initialFile2 === void 0 ? void 0 : _curr$initialFile2.fileName) && prev.errors === curr.errors && prev.editedImageResult === curr.editedImageResult && prev.topButtons === curr.topButtons;
 });
 
 export { ImagePicker };

package/build/esm/packages/aurora/src/components/image_picker/image_picker.js.map

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