@dreamcommerce/aurora 3.1.28 → 3.1.30

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default 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';
@@ -8,12 +8,12 @@ var ImagePickerDragOverPlaceholder = function ImagePickerDragOverPlaceholder(_re
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     onDrop: onDropFile,
     className: cn('aurora-absolute aurora-inset-0 aurora-bg-neutral-0 aurora-border-2 aurora-border-primary aurora-rounded-8 aurora-z-20 aurora-w-full aurora-h-full')
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-w-full aurora-h-full aurora-bg-primary-transparent aurora-flex aurora-items-center aurora-justify-center aurora-pointer-events-none"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React__default.createElement("span", {
     className: "aurora-text-xs aurora-text-interactive"
   }, "".concat(t('Drop file here')))));
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default 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';
@@ -14,17 +14,17 @@ var ImagePickerInput = function ImagePickerInput(_ref) {
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.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, {
+  }, isDragOver && /*#__PURE__*/React__default.createElement(ImagePickerDragOverPlaceholder, {
     onDropFile: onDropFile
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.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, {
+  }, /*#__PURE__*/React__default.createElement(UploadLineIcon, {
     className: "aurora-w-5 aurora-h-5 aurora-fill-subtle group-hover/imagePickerInput:aurora-fill-primary aurora-mb-2"
-  }), /*#__PURE__*/React.createElement("div", {
+  }), /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-text-xs aurora-text-interactive aurora-font-semibold"
-  }, "".concat(t('Drag a file here or browse'))), /*#__PURE__*/React.createElement("span", {
+  }, "".concat(t('Drag a file here or browse'))), /*#__PURE__*/React__default.createElement("span", {
     className: "aurora-text-xs aurora-text-subtle-light aurora-font-normal aurora-text-center"
   }, "".concat(allowedExtensionsLabel ? allowedExtensionsLabel : t('Supported formats')), ":", allowedExtensions.map(function (extension) {
     return "*.".concat(extension);

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

@@ -1,12 +1,12 @@
-import React from 'react';
+import React__default from 'react';
 
 var ImagePickerPreview = function ImagePickerPreview(_ref) {
   var file = _ref.file,
     onError = _ref.onError,
     onLoad = _ref.onLoad;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.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", {
+  }, /*#__PURE__*/React__default.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) || '',

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

@@ -1,9 +1,9 @@
-import React from 'react';
+import React__default from 'react';
 
 var ImagePickerPreviewContainer = function ImagePickerPreviewContainer(_ref) {
   var classname = _ref.classname,
     children = _ref.children;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: classname
   }, children);
 };

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { FileUtils } from '@dreamcommerce/utilities';
 import { ImagePickerDeleteButton } from '../image_picker_delete_button.js';
 
@@ -11,11 +11,11 @@ var UploadedImagePickerItem = function UploadedImagePickerItem(_ref) {
   var imageExtension = FileUtils.getFileExtension(file.fileName);
   var imageWidth = imageSize && imageSize.width;
   var imageHeight = imageSize && imageSize.height;
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-justify-between aurora-items-center aurora-pt-2 aurora-px-1 aurora-gap-1"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-text-xs aurora-text-subtle aurora-overflow-hidden aurora-text-ellipsis"
-  }, isValid && (/*#__PURE__*/React.createElement(React.Fragment, null, imageName, "".concat(imageExtension ? '.' : '').concat(imageExtension, " (").concat(imageWidth, "x").concat(imageHeight, "px)")))), /*#__PURE__*/React.createElement(ImagePickerDeleteButton, {
+  }, isValid && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, imageName, "".concat(imageExtension ? '.' : '').concat(imageExtension, " (").concat(imageWidth, "x").concat(imageHeight, "px)")))), /*#__PURE__*/React__default.createElement(ImagePickerDeleteButton, {
     onFileDelete: onFileDelete
   }));
 };

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

@@ -1,3 +1,3 @@
 import { IImagePicker } from './image_picker_types';
 import React from 'react';
-export declare const ImagePicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<IImagePicker & React.RefAttributes<HTMLButtonElement>>>;
+export declare const ImagePicker: React.MemoExoticComponent<React.ForwardRefExoticComponent<IImagePicker & React.RefAttributes<HTMLDivElement>>>;

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

@@ -1,4 +1,4 @@
-import React, { memo, forwardRef, useState, useEffect, createRef } from 'react';
+import React__default, { memo, forwardRef, useState, useEffect, createRef } from 'react';
 import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
@@ -109,9 +109,9 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
     setImageSize(undefined);
     onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(undefined);
   };
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-mb-1"
-  }, /*#__PURE__*/React.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: cn('aurora-block aurora-w-full aurora-rounded-8 aurora-relative aurora-border-strong hover:aurora-border-extraStrong focus-visible:aurora-border-active focus-visible:aurora-outline-none', {
       'aurora-border aurora-border-dashed': !(errors && errors.length > 0 && !isDragOver),
       'aurora-border-2 aurora-border-danger aurora-border-solid hover:aurora-border-danger focus-visible:aurora-border-danger': errors && errors.length > 0,
@@ -121,37 +121,41 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
       var _inputRef$current;
       return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
     },
+    onKeyDown: function onKeyDown(e) {
+      var _inputRef$current2;
+      return e.key === 'Enter' && ((_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.click());
+    },
     ref: ref,
-    type: 'button'
-  }, /*#__PURE__*/React.createElement("div", {
+    role: 'button',
+    tabIndex: 0
+  }, /*#__PURE__*/React__default.createElement("div", {
     onDragOver: onDragOver,
     onDragLeave: onDragLeave
-  }, file && !(errors !== null && errors !== void 0 && errors.length) ? isPreview ? (/*#__PURE__*/React.createElement("div", {
+  }, file && !(errors !== null && errors !== void 0 && errors.length) ? isPreview ? (/*#__PURE__*/React__default.createElement("div", {
     className: "aurora-p-1 aurora-relative"
-  }, /*#__PURE__*/React.createElement(ImagePickerPreviewContainer, {
+  }, /*#__PURE__*/React__default.createElement(ImagePickerPreviewContainer, {
     classname: "aurora-relative aurora-flex aurora-flex-col"
-  }, topButtons && /*#__PURE__*/React.createElement(React.Fragment, null, topButtons), /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
+  }, topButtons && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, topButtons), /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-relative"
-  }, /*#__PURE__*/React.createElement(ImagePickerPreview, {
+  }, /*#__PURE__*/React__default.createElement(ImagePickerPreview, {
     file: file,
     onError: onPreviewError
-  })), /*#__PURE__*/React.createElement(UploadedImagePickerItem, {
+  })), /*#__PURE__*/React__default.createElement(UploadedImagePickerItem, {
     imageSize: imageSize,
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onFileDelete: handleOnFileDelete
-  })), isDragOver && /*#__PURE__*/React.createElement(ImagePickerDragOverPlaceholder, {
+  })), isDragOver && /*#__PURE__*/React__default.createElement(ImagePickerDragOverPlaceholder, {
     onDropFile: onDropFile
-  }))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", null, "".concat(t('No preview'))), /*#__PURE__*/React.createElement(ImagePickerDeleteButton, {
+  }))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "".concat(t('No preview'))), /*#__PURE__*/React__default.createElement(ImagePickerDeleteButton, {
     onFileDelete: onFileDelete
-  }))) : (/*#__PURE__*/React.createElement(ImagePickerInput, {
+  }))) : (/*#__PURE__*/React__default.createElement(ImagePickerInput, {
     isDragOver: isDragOver,
     allowedExtensions: allowedExtensions,
     allowedExtensionsLabel: allowedExtensionsLabel,
     id: id,
     onDropFile: onDropFile
-  })), /*#__PURE__*/React.createElement("input", {
+  })), /*#__PURE__*/React__default.createElement("input", {
     className: "aurora-hidden",
     onChange: onFileChange,
     id: id,
@@ -159,7 +163,7 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
     type: "file",
     name: name,
     accept: acceptFiles
-  }))), errors && /*#__PURE__*/React.createElement(ErrorList, {
+  }))), errors && /*#__PURE__*/React__default.createElement(ErrorList, {
     errors: errors
   }));
 }), function (prev, curr) {

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

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { DeleteBinLineIcon } from '../../assets/icons/delete_bin_icon.js';
@@ -8,18 +8,21 @@ var ImagePickerDeleteButton = function ImagePickerDeleteButton(_ref) {
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
-  return /*#__PURE__*/React.createElement("button", {
+  return /*#__PURE__*/React__default.createElement("button", {
     "data-test-id": "image-picker-remove-button",
     onClick: function onClick(e) {
       e.stopPropagation();
       e.preventDefault();
       onFileDelete();
     },
+    onKeyDown: function onKeyDown(e) {
+      return e.stopPropagation();
+    },
     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, {
+  }, /*#__PURE__*/React__default.createElement(DeleteBinLineIcon, {
     className: "aurora-w-4 aurora-h-4 aurora-fill-danger"
-  }), /*#__PURE__*/React.createElement("span", {
+  }), /*#__PURE__*/React__default.createElement("span", {
     className: "aurora-text-xs aurora-text-danger aurora-font-semibold"
   }, "".concat(t('Remove'))));
 };

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

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { inputVariants } from './input_variants.js';
 
 var _excluded = ["preElement", "postElement", "errors", "className", "id", "name", "value", "defaultValue", "placeholder", "disabled", "readOnly", "type", "hasCursorPointer", "onChange", "onKeyDown", "onKeyUp"];
-var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var Input = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var preElement = _ref.preElement,
     postElement = _ref.postElement,
     errors = _ref.errors,
@@ -23,15 +23,15 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     onKeyDown = _ref.onKeyDown,
     onKeyUp = _ref.onKeyUp,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     className: cn(inputVariants(), {
       'aurora-border-danger aurora-border-2': !!(errors !== null && errors !== void 0 && errors.length),
       'aurora-bg-subtle aurora-text-subtle-light aurora-pointer-events-none aurora-cursor-not-allowed': disabled,
       'aurora-appearance-none': type === 'number'
     }, className)
-  }, preElement && (/*#__PURE__*/React.createElement("div", {
+  }, preElement && (/*#__PURE__*/React__default.createElement("div", {
     className: 'aurora-flex aurora-h-full aurora-items-center aurora-pointer-events-none aurora-pl-2'
-  }, preElement)), /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
+  }, preElement)), /*#__PURE__*/React__default.createElement("input", _objectSpread2(_objectSpread2({}, props), {}, {
     ref: ref,
     id: id,
     name: name,
@@ -47,7 +47,7 @@ var Input = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     className: cn('aurora-h-[40px] aurora-w-full focus:aurora-outline-none focus:aurora-shadow-none aurora-px-2 aurora-rounded-6', {
       'aurora-cursor-pointer': hasCursorPointer
     })
-  })), postElement && /*#__PURE__*/React.createElement("div", {
+  })), postElement && /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-h-full aurora-right-0 aurora-pr-2 aurora-items-center"
   }, postElement));
 });

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { linkVariants } from './link_variants.js';
@@ -11,7 +11,7 @@ var Link = function Link(_ref) {
     variant = _ref.variant,
     decoration = _ref.decoration,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("a", _objectSpread2({
+  return /*#__PURE__*/React__default.createElement("a", _objectSpread2({
     className: cn(linkVariants({
       size: size,
       variant: variant,

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React__default from 'react';
 import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { loaderVariants } from './loader_variants.js';
@@ -8,7 +8,7 @@ var Loader = function Loader(_ref) {
   var className = _ref.className,
     variant = _ref.variant,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("div", _objectSpread2({
+  return /*#__PURE__*/React__default.createElement("div", _objectSpread2({
     "data-test-el": "loader",
     className: cn(loaderVariants({
       variant: variant

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

@@ -1,10 +1,10 @@
-import React from 'react';
+import React__default from 'react';
 import { cn } from '../../utilities/cn.js';
 import { Typography } from '../typography/typography.js';
 import { MESSAGE_BOX_ICONS, MESSAGE_BOX_ICON_COLORS, MESSAGE_BOX_VARIANTS } from './message_box_constants.js';
 import { messageBoxVariants } from './message_box_variants.js';
 
-var MessageBox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var MessageBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
   var _ref$variant = _ref.variant,
     variant = _ref$variant === void 0 ? MESSAGE_BOX_VARIANTS.info : _ref$variant,
     header = _ref.header,
@@ -21,7 +21,7 @@ var MessageBox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     noRadius = _ref$noRadius === void 0 ? false : _ref$noRadius;
   var Icon = MESSAGE_BOX_ICONS[variant];
   var iconColor = MESSAGE_BOX_ICON_COLORS[variant];
-  return /*#__PURE__*/React.createElement("div", {
+  return /*#__PURE__*/React__default.createElement("div", {
     ref: ref,
     className: cn('message-box-link-icon', messageBoxVariants({
       variant: variant
@@ -33,19 +33,19 @@ var MessageBox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
       'aurora-border-none': noBorder,
       'aurora-shadow-l': shadow
     }, className)
-  }, showIcon ? (/*#__PURE__*/React.createElement("div", {
+  }, showIcon ? (/*#__PURE__*/React__default.createElement("div", {
     className: cn(children && !fullWidth && 'aurora-h-full aurora-flex aurora-self-start aurora-mt-1')
-  }, /*#__PURE__*/React.createElement(Icon, {
+  }, /*#__PURE__*/React__default.createElement(Icon, {
     className: cn('aurora-mr-2 aurora-w-4 aurora-h-4', iconColor)
-  }))) : null, /*#__PURE__*/React.createElement("div", {
+  }))) : null, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-justify-between aurora-items-center aurora-w-full"
-  }, /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-flex-col aurora-w-full"
-  }, header && (/*#__PURE__*/React.createElement("div", {
+  }, header && (/*#__PURE__*/React__default.createElement("div", {
     className: "aurora-flex aurora-items-center aurora-w-full"
-  }, /*#__PURE__*/React.createElement("h4", {
+  }, /*#__PURE__*/React__default.createElement("h4", {
     className: "aurora-text-s aurora-font-semibold aurora-text aurora-w-full"
-  }, header))), /*#__PURE__*/React.createElement(Typography, {
+  }, header))), /*#__PURE__*/React__default.createElement(Typography, {
     className: "aurora-w-full",
     size: "xs"
   }, children))));

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

@@ -1,17 +1,10 @@
-import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { slicedToArray as _slicedToArray } from '../../../../../../../_virtual/_rollupPluginBabelHelpers.js';
-import { cn } from '../../../../utilities/cn.js';
-import { useClickOutside } from '../../../../hooks/use_click_outside.js';
-import { createPortal } from 'react-dom';
-import { MODAL_VISIBILITY_STATE, MODAL_SLIDE_FADE_DURATION, MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
-import { ModalFooter } from './modal_footer.js';
-import { ModalHeader } from './modal_header.js';
-import { ModalUtils } from './modal_utils.js';
-import { modalVariants } from '../../modal_variants.js';
+import React__default, { useRef, useCallback, useEffect } from 'react';
+import { MODAL_WIDTH_VARIANT } from '../../modal_constants.js';
+import { Root, Portal, Overlay } from '../../../../../../../external/@radix-ui/react-dialog/dist/index.mjs.js';
 import { useModalsContext } from '../../hooks/use_modals_context.js';
+import { ModalContent } from './modal_content.js';
 
 var Modal = function Modal(_ref) {
-  var _header$hasCloseIcon;
   var name = _ref.name,
     hideAllModalsOnClose = _ref.hideAllModalsOnClose,
     _ref$width = _ref.width,
@@ -26,155 +19,45 @@ var Modal = function Modal(_ref) {
     closeOnEscButton = _ref$closeOnEscButton === void 0 ? true : _ref$closeOnEscButton,
     _ref$initiallyVisible = _ref.initiallyVisible,
     initiallyVisible = _ref$initiallyVisible === void 0 ? false : _ref$initiallyVisible;
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    visibleClass = _useState2[0],
-    setVisibleClass = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isScrolledToBottom = _useState4[0],
-    setIsScrolledToBottom = _useState4[1];
-  var _useState5 = useState(false),
-    _useState6 = _slicedToArray(_useState5, 2),
-    hasScroll = _useState6[0],
-    setHasScroll = _useState6[1];
-  var scrollTimeoutRef = useRef();
-  var contentRef = useRef(null);
-  var modalRef = useRef(null);
   var isInitializedRef = useRef(false);
+  var initiallyVisibleRef = useRef(initiallyVisible);
   var _useModalsContext = useModalsContext(),
-    modalsManagerContainerSelector = _useModalsContext.modalsManagerContainerSelector,
     addModal = _useModalsContext.addModal,
-    getModal = _useModalsContext.getModal,
+    removeModal = _useModalsContext.removeModal,
     hideModal = _useModalsContext.hideModal,
     showModal = _useModalsContext.showModal,
-    hideAllModals = _useModalsContext.hideAllModals;
-  var $modalsManagerContainer = document.querySelector(modalsManagerContainerSelector);
-  var modal = getModal(name);
-  var _useState7 = useState(false),
-    _useState8 = _slicedToArray(_useState7, 2),
-    renderModal = _useState8[0],
-    setRenderModal = _useState8[1];
+    hideAllModals = _useModalsContext.hideAllModals,
+    openModalName = _useModalsContext.openModalName;
   var closeModal = useCallback(function () {
     hideAllModalsOnClose ? hideAllModals(onCloseAction) : hideModal(name, onCloseAction);
   }, [hideAllModalsOnClose, hideAllModals, hideModal, name, onCloseAction]);
-  var checkScroll = useCallback(function () {
-    var contentElement = contentRef.current;
-    if (!contentElement) return;
-    var scrollTop = contentElement.scrollTop,
-      scrollHeight = contentElement.scrollHeight,
-      clientHeight = contentElement.clientHeight;
-    var atBottom = Math.abs(scrollTop + clientHeight - scrollHeight) < 5;
-    var hasScrollableContent = scrollHeight > clientHeight;
-    setIsScrolledToBottom(atBottom);
-    setHasScroll(hasScrollableContent);
-  }, []);
-  var handleScroll = useCallback(function () {
-    if (scrollTimeoutRef.current) {
-      clearTimeout(scrollTimeoutRef.current);
-    }
-    scrollTimeoutRef.current = setTimeout(checkScroll, 50);
-  }, [checkScroll]);
-  // Handle scroll detection
-  useEffect(function () {
-    if (!renderModal || !visibleClass || !children) return;
-    var contentElement = contentRef.current;
-    if (!contentElement) return;
-    checkScroll();
-    contentElement.addEventListener('scroll', handleScroll);
-    return function () {
-      contentElement.removeEventListener('scroll', handleScroll);
-      if (scrollTimeoutRef.current) {
-        clearTimeout(scrollTimeoutRef.current);
-      }
-    };
-  }, [renderModal, visibleClass, handleScroll, checkScroll, children]);
   // Initial setup
   useEffect(function () {
     if (!isInitializedRef.current) {
-      addModal({
-        name: name,
-        visibilityState: MODAL_VISIBILITY_STATE.none,
-        width: width
-      });
-      if (initiallyVisible) showModal(name);
+      addModal(name);
+      if (initiallyVisibleRef.current) showModal(name);
       isInitializedRef.current = true;
     }
     return function () {
-      return closeModal();
+      return removeModal(name);
     };
-  }, []);
-  // Handle visibility changes
-  useEffect(function () {
-    var timeoutId;
-    switch (modal === null || modal === void 0 ? void 0 : modal.visibilityState) {
-      case MODAL_VISIBILITY_STATE.visible:
-        setRenderModal(true);
-        timeoutId = setTimeout(function () {
-          return setVisibleClass(true);
-        }, MODAL_SLIDE_FADE_DURATION);
-        break;
-      case MODAL_VISIBILITY_STATE.hidden:
-        setVisibleClass(false);
-        break;
-      case MODAL_VISIBILITY_STATE.none:
-        setVisibleClass(false);
-        timeoutId = setTimeout(function () {
-          return setRenderModal(false);
-        }, MODAL_SLIDE_FADE_DURATION);
-        break;
-    }
-    return function () {
-      if (timeoutId) {
-        clearTimeout(timeoutId);
-      }
-    };
-  }, [modal === null || modal === void 0 ? void 0 : modal.visibilityState]);
-  // Handle keyboard events
-  var handleKeyDown = useCallback(function (event) {
-    if (event.key === 'Escape' && closeOnEscButton) {
-      closeModal();
-    }
-  }, [closeOnEscButton, closeModal]);
-  useEffect(function () {
-    document.addEventListener('keydown', handleKeyDown);
-    return function () {
-      return document.removeEventListener('keydown', handleKeyDown);
-    };
-  }, [handleKeyDown]);
-  // Handle outside click
-  useClickOutside({
-    refs: [modalRef],
-    callback: function callback() {
-      if (closeOnOutsideClick && (modal === null || modal === void 0 ? void 0 : modal.visibilityState) === MODAL_VISIBILITY_STATE.visible) {
-        closeModal();
-      }
-    }
-  });
-  if (!$modalsManagerContainer) return null;
-  return renderModal ? /*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div", {
-    ref: modalRef,
-    "data-modal-id": name,
-    "data-test-id": "modal",
-    className: cn(modalVariants({
-      width: width
-    }), visibleClass ? 'aurora-opacity-100 aurora-animate-modal-slide-in' : 'aurora-opacity-0 aurora-animate-modal-slide-out')
-  }, header && (/*#__PURE__*/React.createElement(ModalHeader, {
-    hasCloseIcon: ModalUtils.isHeaderObject(header) ? (_header$hasCloseIcon = header.hasCloseIcon) !== null && _header$hasCloseIcon !== void 0 ? _header$hasCloseIcon : true : true,
-    onClose: closeModal
-  }, ModalUtils.isHeaderObject(header) ? header.content : header)), children && (/*#__PURE__*/React.createElement("div", {
-    ref: contentRef,
-    className: cn("aurora-overflow-y-auto custom-scrollbar first:aurora-mt-6 last:aurora-mb-6 aurora-px-6", {
-      'aurora-pb-6': footer && hasScroll
-    }),
-    style: {
-      maxHeight: 'calc(100vh - 200px)'
+  }, [name, addModal, removeModal, showModal]);
+  var renderModal = name === openModalName;
+  return /*#__PURE__*/React__default.createElement(Root, {
+    open: renderModal,
+    onOpenChange: function onOpenChange(open) {
+      if (!open) closeModal();
     }
-  }, children)), footer && (/*#__PURE__*/React.createElement(ModalFooter, {
-    className: cn('', {
-      'aurora-border-t': hasScroll && !isScrolledToBottom
-    })
-  }, footer))), $modalsManagerContainer) : null;
+  }, /*#__PURE__*/React__default.createElement(Portal, null, /*#__PURE__*/React__default.createElement(Overlay, {
+    className: "data-[state=open]:aurora-animate-modal-backdrop-fade-in data-[state=closed]:aurora-animate-modal-backdrop-fade-out aurora-fixed aurora-inset-0 aurora-z-[999] aurora-bg-inverse aurora-opacity-70 js__modal-mask"
+  }), /*#__PURE__*/React__default.createElement(ModalContent, {
+    name: name,
+    width: width,
+    header: header,
+    footer: footer,
+    closeOnOutsideClick: closeOnOutsideClick,
+    closeOnEscButton: closeOnEscButton
+  }, children)));
 };
 
 export { Modal };

package/build/esm/packages/aurora/src/components/modal/components/modal/modal.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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,sCAAsC,wEAA4E;AAClH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/modal/components/modal/modal_close_icon.d.ts

@@ -1,3 +1,2 @@
-import { FC } from 'react';
-import { IModalCloseIconProps } from "../../modal_types";
-export declare const ModalCloseIcon: FC<IModalCloseIconProps>;
+import React from 'react';
+export declare const ModalCloseIcon: () => React.JSX.Element;

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_close_icon.js

@@ -1,15 +1,8 @@
-import React from 'react';
+import React__default from 'react';
 import { CloseLineIcon } from '../../../../assets/icons/close_line_icon.js';
 
-var ModalCloseIcon = function ModalCloseIcon(_ref) {
-  var onClose = _ref.onClose;
-  return /*#__PURE__*/React.createElement("button", {
-    className: "aurora-p-1 aurora-border-0 aurora-bg-none aurora-cursor-pointer aurora-rounded-4 aurora-bg-transparent hover:aurora-bg-hover",
-    onClick: function onClick() {
-      return onClose();
-    },
-    "data-test-id": "close-modal"
-  }, /*#__PURE__*/React.createElement(CloseLineIcon, null));
+var ModalCloseIcon = function ModalCloseIcon() {
+  return /*#__PURE__*/React__default.createElement(CloseLineIcon, null);
 };
 
 export { ModalCloseIcon };

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

package/build/esm/packages/aurora/src/components/modal/components/modal/modal_content.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import * as Dialog from '@radix-ui/react-dialog';
+import { TModalContentProps } from "../../modal_types";
+export declare const ModalContent: React.ForwardRefExoticComponent<TModalContentProps & React.RefAttributes<React.ElementType<React.ForwardRefExoticComponent<Dialog.DialogContentProps & React.RefAttributes<HTMLDivElement>>, keyof React.JSX.IntrinsicElements>>>;