@luscii-healthtech/web-ui 42.0.0 → 42.2.0

package/dist/index.development.js

@@ -4130,13 +4130,15 @@ const PageHeader = ({ navigation, breadcrumbs, dataTestId, accessories, isPollin
   }), children: [banner && jsxRuntime.jsx(NotificationBanner, { noBorder: banner.noBorder, color: banner.color, "data-test-id": `page-header-banner-${title}`, className: "ui:mb-m", icon: banner.icon, children: jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-col", children: [banner.title && jsxRuntime.jsx(Text, { color: "current", variant: "strong", children: banner.title }), jsxRuntime.jsx(Text, { color: "current", containsDangerousHtml: banner.text.isHTML, children: banner.text.content })] }) }), jsxRuntime.jsxs("div", { className: classNames__default.default({ "ui:flex ui:flex-col": !contained }), children: [!!(breadcrumbs === null || breadcrumbs === void 0 ? void 0 : breadcrumbs.length) && jsxRuntime.jsx("div", { className: classNames__default.default("ui:mb-m", withContained), children: jsxRuntime.jsx(Breadcrumbs, { crumbs: breadcrumbs, truncateAfter: truncateBreadcrumbsAfter, renderItem: renderBreadcrumbItem }) }), jsxRuntime.jsxs("div", { className: classNames__default.default("ui:flex ui:flex-row ui:items-center ui:justify-between", withContained), children: [jsxRuntime.jsxs("div", { className: "ui:flex ui:flex-row ui:items-center ui:gap-xxs", children: [typeof title === "string" ? jsxRuntime.jsx(PageTitle, { "data-test-id": `${dataTestId}-title`, children: title }) : jsxRuntime.jsx(Box, { width: "full", children: title }), isPolling && jsxRuntime.jsx(LoadingIndicator, { asSpinner: true, className: "page-spinner", spinnerColor: "gray" })] }), accessories && jsxRuntime.jsx("div", { "data-test-id": "page-header-accessories", children: accessories })] })] }), navigation && jsxRuntime.jsx(Tabbar, Object.assign({}, navigation, { className: classNames__default.default(navigation.className, withContained) }))] }), jsxRuntime.jsx(Divider, { version: "v2" })] });
 };
 
-const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, isLoading, isSubmitting, dataTestId = "page", title, header, steps, isMobileFriendly, belowHeader }) => {
+const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, isLoading, isSubmitting, dataTestId = "page", title, header, steps, isMobileFriendly, belowHeader, accessory }) => {
   const mergedClasses = classNames__default.default("cweb-crud-page", "ui:w-full ui:mb-0 ui:mx-auto ui:pb-8", className);
-  const submitButton = submitButtonProps && jsxRuntime.jsx(PrimaryButton, Object.assign({ "data-test-id": "submit-button", role: "primary", isPending: isSubmitting }, submitButtonProps), "submit-button");
-  const cancelButton = cancelButtonProps && jsxRuntime.jsx(TertiaryButton, Object.assign({ "data-test-id": "cancel-button", role: "secondary" }, cancelButtonProps), "cancel-button");
+  const submitButton = accessory !== null && accessory !== void 0 ? accessory : submitButtonProps && jsxRuntime.jsx(PrimaryButton, Object.assign({ "data-test-id": "submit-button", role: "primary", isPending: isSubmitting }, submitButtonProps), "submit-button");
+  const cancelButton = accessory !== null && accessory !== void 0 ? accessory : cancelButtonProps && jsxRuntime.jsx(TertiaryButton, Object.assign({ "data-test-id": "cancel-button", role: "secondary" }, cancelButtonProps), "cancel-button");
   if (isLoading) {
     return jsxRuntime.jsx("div", { className: "cweb-crud-page-container", "data-test-id": dataTestId, children: jsxRuntime.jsxs("div", { className: classNames__default.default(mergedClasses, "ui:relative ui:overflow-y-hidden", "cweb-crud-page-loading-container"), style: { height: "90vh" }, children: [jsxRuntime.jsx(PageHeaderBlock, { header, title }), jsxRuntime.jsx(LoadingIndicator, { className: classNames__default.default("crud-page-loader", "ui:absolute ui:bottom-0 ui:left-0 ui:right-0 ui:top-0 ui:m-auto ui:h-12 ui:w-12"), asModal: false })] }) });
   }
+  const accessoriesAreArray = Array.isArray(accessory);
+  const accessoriesToRender = accessoriesAreArray ? accessory : [accessory];
   return jsxRuntime.jsx("div", { className: classNames__default.default("cweb-crud-page-container", {
     "ui:h-screen ui:overflow-y-auto": isMobileFriendly
   }), "data-test-id": dataTestId, children: jsxRuntime.jsxs("div", { className: mergedClasses, "data-test-id": dataTestId, children: [jsxRuntime.jsx(PageHeaderBlock, { header, title }), belowHeader, jsxRuntime.jsx("div", { className: "ui:flex ui:justify-center", children: jsxRuntime.jsxs("div", { className: classNames__default.default(
@@ -4147,7 +4149,7 @@ const CRUDPage = ({ submitButtonProps, cancelButtonProps, className, children, i
      * since the spacing needed will be occupied by the `belowHeader` component itself.
      */
     { "ui:mt-xl": !belowHeader }
-  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui:mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }), children, jsxRuntime.jsx(Line, { left: [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
+  ), children: [steps && jsxRuntime.jsx(Steps, { className: "ui:mb-4", orderedStepTitles: steps.titles, currentStep: steps.currentStep, localization: steps.localization }), children, jsxRuntime.jsx(Line, { left: accessoriesToRender !== null && accessoriesToRender !== void 0 ? accessoriesToRender : [submitButton, cancelButton], className: classNames__default.default("cweb-crud-page-button-line", "ui:mt-4 ui:border-t ui:border-solid ui:border-color-divider ui:pt-4") })] }) })] }) });
 };
 const PageHeaderBlock = ({ header, title }) => {
   if (!title && !header) {
@@ -4611,6 +4613,113 @@ const Switch = (props) => {
   }), children: jsxRuntime.jsx(RadixSwitch__namespace.Thumb, { className: classNames__default.default("ui:h-[20px] ui:w-[20px]", "ui:bg-white", "ui:transition-transform ui:duration-100 ui:will-change-transform", "ui:translate-x-1 ui:data-[state=checked]:translate-x-[32px]", "ui:block ui:rounded-full") }) });
 };
 
+const context$3 = React.createContext({
+  $dialog: null
+});
+const useModalDialog = () => React.useContext(context$3);
+const ModalDialog = (_a) => {
+  var { open, className, size, onClose, children, variant = "centered-dialog", keepChildrenMountedWhenClosed = false } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children", "variant", "keepChildrenMountedWhenClosed"]);
+  const dialog = React.useRef(null);
+  const transitionsClasses = classNames__default.default("ui:transition-discrete ui:transition-[display,overlay,opacity,scale,translate] ui:duration-[300ms] ui:motion-reduce:duration-[0ms] ui:delay-100", "ui:backdrop:transition-[display,overlay,opacity] ui:backdrop:duration-[300ms] ui:motion-reduce:backdrop:duration-[0ms] ui:delay-0", "ui:opacity-0 ui:open:starting:opacity-0", "ui:open:opacity-100", "ui:backdrop:opacity-0 ui:open:backdrop:starting:opacity-0", "ui:open:backdrop:opacity-100", {
+    "ui:translate-y-[-5px] ui:open:starting:translate-y-[-5px] ui:open:translate-y-0": variant !== "side-modal",
+    "ui:scale-[0.98] ui:open:starting:scale-[0.98] ui:open:scale-100": variant !== "side-modal"
+  }, {
+    "ui:translate-x-[50px] ui:open:starting:translate-x-[50px] ui:open:translate-x-0": variant === "side-modal",
+    "ui:scale-[0.98] ui:open:starting:scale-[0.98] ui:open:scale-100": variant !== "side-modal"
+  });
+  const classes = classNames__default.default("ui:bg-transparent", {
+    "ui:max-w-[calc(100dvw-(var(--ui-spacing-xl)))]": variant !== "full-screen"
+  }, {
+    "ui:my-xl": variant === "centered-dialog",
+    "ui:mx-auto": variant === "centered-dialog"
+  }, "ui:top-0", "ui:bottom-auto", {
+    "ui:md:w-80": size === "s",
+    "ui:md:w-132": size === "m",
+    "ui:md:w-216": size === "l"
+  }, {
+    "ui:right-0": variant === "side-modal",
+    "ui:left-auto": variant === "side-modal",
+    "ui:bottom-0": variant === "side-modal",
+    "ui:max-h-full": variant === "side-modal"
+  }, {
+    "ui:fixed ui:top-0 ui:bottom-0 ui:left-0 ui:right-0": variant === "full-screen",
+    "ui:p-0": variant === "full-screen",
+    "ui:w-screen ui:h-screen": variant === "full-screen",
+    "ui:max-w-screen ui:max-h-screen": variant === "full-screen"
+  }, transitionsClasses, className);
+  React.useEffect(() => {
+    var _a2, _b;
+    if (open) {
+      (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.showModal();
+    } else {
+      (_b = dialog.current) === null || _b === void 0 ? void 0 : _b.close();
+    }
+  }, [open]);
+  const [isTransitioning, setIsTransitioning] = React.useState(false);
+  const createSetIsTransitioning = (yesOrNo) => (event) => {
+    if (event.target !== dialog.current) {
+      return;
+    }
+    setIsTransitioning(yesOrNo);
+  };
+  React.useEffect(() => {
+    const transitionStartEvents = ["transitionrun", "close", "cancel"];
+    const transitionStopEvents = ["transitioncancel", "transitionend"];
+    const setIsTransitioningTrue = createSetIsTransitioning(true);
+    const setIsTransitioningFalse = createSetIsTransitioning(false);
+    transitionStartEvents.forEach((event) => {
+      var _a2;
+      (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.addEventListener(event, setIsTransitioningTrue);
+    });
+    transitionStopEvents.forEach((event) => {
+      var _a2;
+      (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.addEventListener(event, setIsTransitioningFalse);
+    });
+    return () => {
+      transitionStartEvents.forEach((event) => {
+        var _a2;
+        (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.removeEventListener(event, setIsTransitioningTrue);
+      });
+      transitionStopEvents.forEach((event) => {
+        var _a2;
+        (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.removeEventListener(event, setIsTransitioningFalse);
+      });
+    };
+  }, []);
+  const shouldRenderChildren = isTransitioning || open || keepChildrenMountedWhenClosed;
+  return jsxRuntime.jsx(context$3.Provider, { value: { $dialog: dialog.current }, children: jsxRuntime.jsx("dialog", Object.assign({ ref: dialog, className: classes, onClose }, rest, { children: shouldRenderChildren && jsxRuntime.jsx(Stack, { width: "full", align: "stretch", backgroundColor: "surface", borderRadiusLeft: variant === "side-modal" ? "m" : "none", borderRadius: variant === "centered-dialog" ? "m" : "none", className: classNames__default.default({
+    "ui:max-h-[calc(100dvh-(var(--ui-spacing-xl))*2)]": variant === "centered-dialog",
+    "ui:h-screen": variant === "side-modal" || variant === "full-screen",
+    "ui:w-screen": variant === "full-screen"
+  }), children }) })) });
+};
+const Body = (_a) => {
+  var { className } = _a, rest = __rest(_a, ["className"]);
+  const classes = classNames__default.default(className, "ui:overflow-y-auto ui:flex-1");
+  return jsxRuntime.jsx(Box, Object.assign({ className: classes, p: "m" }, rest));
+};
+const Header$1 = (props) => {
+  return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", justify: "between", align: "center", gap: "m", p: "m" }, props));
+};
+const Footer = (props) => {
+  return jsxRuntime.jsx(Stack, Object.assign({ as: "footer", p: "m", backgroundColor: "background", className: "ui:rounded-b-[inherit]" }, props));
+};
+const CloseButton = (props) => {
+  return jsxRuntime.jsx(TertiaryButton, Object.assign({ leadingIcon: jsxRuntime.jsx(CrossIcon, {}) }, props));
+};
+const Actions = (_a) => {
+  var { className } = _a, rest = __rest(_a, ["className"]);
+  const classes = classNames__default.default(className, "ui:self-end");
+  return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", gap: "xs", className: classes }, rest));
+};
+ModalDialog.Header = Header$1;
+ModalDialog.Title = Card.Title;
+ModalDialog.CloseButton = CloseButton;
+ModalDialog.Body = Body;
+ModalDialog.Footer = Footer;
+ModalDialog.Actions = Actions;
+ModalDialog.useModalDialog = useModalDialog;
+
 const ImageCategory = (props) => {
   return jsxRuntime.jsxs("div", { className: "ui:mt-4 ui:w-full", children: [jsxRuntime.jsx(Text, { text: props.category.key }), jsxRuntime.jsx("div", { className: "ui:flex ui:flex-row ui:flex-wrap", children: props.images.map((option, index) => {
     const isSelected = option === props.highlightedImage;
@@ -4656,7 +4765,7 @@ const ImagePickerInner = ({
   const [error, setError] = React.useState(null);
   const fileInputRef = React.useRef(null);
   React.useEffect(() => {
-    if (preselectedImage && typeof preselectedImage === "string") {
+    if (preselectedImage) {
       setSelectedMedia(preselectedImage);
       setSelectedMediaType(preselectedMediaType);
     }
@@ -4675,6 +4784,7 @@ const ImagePickerInner = ({
   };
   const handleImageClick = (event) => {
     var _a2;
+    event.preventDefault();
     const datasetIndex = (_a2 = event.currentTarget) === null || _a2 === void 0 ? void 0 : _a2.dataset["index"];
     if (datasetIndex && parseInt(datasetIndex, 10) === clearImageIndex) {
       handleDeleteClick();
@@ -4699,16 +4809,17 @@ const ImagePickerInner = ({
       fileInput.value = "";
     }
   };
-  function handleConfirmSelection() {
+  function handleConfirmSelection(event) {
     setSelectedMedia(highlightedImage !== null && highlightedImage !== void 0 ? highlightedImage : placeholderImage);
     setSelectedMediaType("image");
     setError(null);
     handleChange({
       target: { name, value: highlightedImage }
     });
-    handleCloseModal();
+    handleCloseModal(event);
   }
-  const handleCloseModal = () => {
+  const handleCloseModal = (event) => {
+    event.stopPropagation();
     setIsImagesPanelOpen(false);
   };
   const mediaType = (mimeType) => mimeType.split("/")[0];
@@ -4731,7 +4842,7 @@ const ImagePickerInner = ({
       }
     }
   });
-  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { type: isTypeCompact ? "row" : "column", horizontalSpacing: isTypeCompact ? "small" : "none", verticalSpacing: !isTypeCompact ? "small" : "none", children: [selectedMedia && jsxRuntime.jsxs("div", { className: classNames__default.default({
+  return jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsxs(FlexContainer, { type: isTypeCompact ? "row" : "column", horizontalSpacing: isTypeCompact ? "small" : "none", verticalSpacing: isTypeCompact ? "none" : "small", children: [selectedMedia && jsxRuntime.jsxs("div", { className: classNames__default.default({
     "ui:h-11 ui:w-11 ui:shrink-0 ui:rounded-full ui:bg-secondary ui:p-3": isTypeCompact,
     "ui:h-44 ui:w-full": !isTypeCompact
   }), children: [isUploading && jsxRuntime.jsx(LoadingIndicator, { className: "ui:my-16" }), !isUploading && selectedMediaType === "image" && jsxRuntime.jsx(Image$1, { className: classNames__default.default("ui:h-full ui:w-full", {
@@ -4741,14 +4852,11 @@ const ImagePickerInner = ({
   }) }), !isUploading && !isErrorUploading && selectedMediaType === "video" && jsxRuntime.jsx("video", { className: classNames__default.default("ui:h-full", {
     "ui:w-full ui:rounded ui:bg-secondary ui:object-contain ui:p-3": !isTypeCompact,
     "ui:w-full": isTypeCompact
-  }), src: selectedMedia, playsInline: true, controls: true, disablePictureInPicture: true, preload: "none", poster: placeholderImage, children: "There is a video, but your browser doesn't support showing the video." }), selectedMediaType !== "image" && selectedMediaType !== "video" && jsxRuntime.jsx(NotificationBanner, { color: "blue", icon: InfoIcon, children: jsxRuntime.jsx(Text, { children: (_a = localisation.unsupportedMediaType) !== null && _a !== void 0 ? _a : "File uploaded successfully but preview not supported." }) })] }), error && jsxRuntime.jsx(NotificationBanner, { color: "red", icon: ExclamationMarkIcon, children: jsxRuntime.jsx(Text, { children: error }) }), jsxRuntime.jsxs(FlexRow, { spacing: "small", children: [jsxRuntime.jsx(SecondaryButton, { "data-test-id": `image-picker-${name}`, id: `image-picker-${name}`, isDisabled, className: "cweb-imagePicker-change", text: localisation.openModalButton, onClick: () => setIsImagesPanelOpen(true), ref: innerRef }), isUploadButtonVisible && jsxRuntime.jsxs("span", { className: "cweb-imagePicker-upload", children: [jsxRuntime.jsx(SecondaryButton, { text: localisation.uploadImage, isDisabled, isPending: isUploading, id: `upload-image-${name}`, onClick: () => {
+  }), src: selectedMedia, playsInline: true, controls: true, disablePictureInPicture: true, preload: "none", poster: placeholderImage, children: "There is a video, but your browser doesn't support showing the video." }), selectedMediaType !== "image" && selectedMediaType !== "video" && jsxRuntime.jsx(NotificationBanner, { color: "blue", icon: InfoIcon, children: jsxRuntime.jsx(Text, { children: (_a = localisation.unsupportedMediaType) !== null && _a !== void 0 ? _a : "File uploaded successfully but preview not supported." }) })] }), error && jsxRuntime.jsx(NotificationBanner, { color: "red", icon: ExclamationMarkIcon, children: jsxRuntime.jsx(Text, { children: error }) }), jsxRuntime.jsxs(FlexRow, { spacing: "small", children: [jsxRuntime.jsx(SecondaryButton, { "data-test-id": `image-picker-${name}`, id: `image-picker-${name}`, disabled: isDisabled, className: "cweb-imagePicker-change", onClick: () => setIsImagesPanelOpen(true), ref: innerRef, children: localisation.openModalButton }), isUploadButtonVisible && jsxRuntime.jsxs("span", { className: "cweb-imagePicker-upload", children: [jsxRuntime.jsx(SecondaryButton, { disabled: isDisabled, isPending: isUploading, id: `upload-image-${name}`, onClick: () => {
     var _a2;
     setIsImagesPanelOpen(false);
     (_a2 = fileInputRef.current) === null || _a2 === void 0 ? void 0 : _a2.click();
-  } }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", disabled: isDisabled, name: `uploaded-${name}`, accept: acceptedMimeTypes.join(","), onChange: uploadImage, className: "ui:hidden" })] }), isClearButtonVisible && selectedMedia !== placeholderImage && !isUploading && jsxRuntime.jsx(SecondaryButton, { text: localisation.clearSelection, isDisabled, isPending: isUploading, onClick: handleDeleteClick })] })] }), jsxRuntime.jsxs(ModalBase, { size: "wide", onCloseClick: handleCloseModal, scrollableContent: true, footerTrailingComponents: {
-    primaryButton: jsxRuntime.jsx(PrimaryButton, { dataTestId: "modal-footer-trailing-primary-button", onClick: handleConfirmSelection, children: localisation.selectButton }),
-    secondaryButton: jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: handleCloseModal, children: localisation.cancel })
-  }, isOpen: isImagesPanelOpen, title: localisation.modalTitle, children: [jsxRuntime.jsx(SearchInput, { name: "searchImages", className: "ui:w-full", value: search, placeholder: localisation.search, onChange: handleSearchChange }), jsxRuntime.jsx("div", { className: "ui:flex ui:w-full ui:flex-row ui:flex-wrap ui:items-center", children: filteredCategories === null || filteredCategories === void 0 ? void 0 : filteredCategories.map((category) => jsxRuntime.jsx(ImageCategory, { category, images: images === null || images === void 0 ? void 0 : images.filter((categoryImage) => categoryImage.includes(category.folder)), highlightedImage, handleImageClick, isTypeCompact }, category.folder)) })] })] });
+  }, children: localisation.uploadImage }), jsxRuntime.jsx("input", { ref: fileInputRef, type: "file", disabled: isDisabled, name: `uploaded-${name}`, accept: acceptedMimeTypes.join(","), onChange: uploadImage, className: "ui:hidden" })] }), isClearButtonVisible && selectedMedia !== placeholderImage && !isUploading && jsxRuntime.jsx(SecondaryButton, { text: localisation.clearSelection, isDisabled, isPending: isUploading, onClick: handleDeleteClick })] })] }), jsxRuntime.jsxs(ModalDialog, { open: isImagesPanelOpen, onClose: handleCloseModal, variant: "centered-dialog", size: "l", children: [jsxRuntime.jsxs(ModalDialog.Header, { children: [jsxRuntime.jsx(ModalDialog.Title, { children: localisation.modalTitle }), jsxRuntime.jsx(ModalDialog.CloseButton, { onClick: handleCloseModal })] }), jsxRuntime.jsx(Divider, {}), jsxRuntime.jsx(ModalDialog.Body, { children: jsxRuntime.jsxs(Stack, { axis: "y", gap: "m", width: "full", className: "ui:max-h-135", children: [jsxRuntime.jsx(SearchInput, { name: "searchImages", className: "ui:w-full", value: search, placeholder: localisation.search, onChange: handleSearchChange }), jsxRuntime.jsx("div", { className: "ui:flex ui:w-full ui:flex-row ui:flex-wrap ui:items-center", children: filteredCategories === null || filteredCategories === void 0 ? void 0 : filteredCategories.map((category) => jsxRuntime.jsx(ImageCategory, { category, images: images === null || images === void 0 ? void 0 : images.filter((categoryImage) => categoryImage.includes(category.folder)), highlightedImage, handleImageClick, isTypeCompact }, category.folder)) })] }) }), jsxRuntime.jsx(ModalDialog.Footer, { children: jsxRuntime.jsx(ModalDialog.Actions, { width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", gap: "s", justify: "end", width: "full", children: [jsxRuntime.jsx(SecondaryButton, { dataTestId: "modal-footer-trailing-secondary-button", onClick: handleCloseModal, children: localisation.cancel }), jsxRuntime.jsx(PrimaryButton, { dataTestId: "modal-footer-trailing-primary-button", onClick: handleConfirmSelection, children: localisation.selectButton })] }) }) })] })] });
 };
 const MediaPicker = React__namespace.default.forwardRef((props, ref) => {
   var _a, _b;
@@ -4978,12 +5086,12 @@ const FullPageModal = ({ children, dataTestId, isOpen = false, onCloseClick, pri
 FullPageModal.Actions = FullPageModalActions;
 FullPageModal.setAppElement = ReactModal__default.default.setAppElement;
 
-const context$3 = React.createContext({ isOpen: false });
+const context$2 = React.createContext({ isOpen: false });
 const DetailsDisclosure = (_a) => {
   var { children, onToggleDetails, name, onToggle, openByDefault, open } = _a, rest = __rest(_a, ["children", "onToggleDetails", "name", "onToggle", "openByDefault", "open"]);
   const [internalIsOpen, setInternalIsOpen] = React.useState(openByDefault !== null && openByDefault !== void 0 ? openByDefault : false);
   const isOpen = open !== null && open !== void 0 ? open : internalIsOpen;
-  return jsxRuntime.jsx(context$3.Provider, { value: { isOpen }, children: jsxRuntime.jsx(Box, Object.assign({
+  return jsxRuntime.jsx(context$2.Provider, { value: { isOpen }, children: jsxRuntime.jsx(Box, Object.assign({
     as: "details",
     /**
      * This "name" attribute triggers a type-error on "details" eventhough it should be valid
@@ -5005,18 +5113,18 @@ const DefaultOpenIndicator = ({ isOpen }) => {
   }) });
 };
 const OpenIndicator = ({ component: Component = DefaultOpenIndicator }) => {
-  const { isOpen } = React.useContext(context$3);
+  const { isOpen } = React.useContext(context$2);
   return jsxRuntime.jsx(Component, { isOpen });
 };
 const Summary = (_a) => {
   var { children, omitOpenIndicator = false } = _a, rest = __rest(_a, ["children", "omitOpenIndicator"]);
-  const { isOpen } = React.useContext(context$3);
+  const { isOpen } = React.useContext(context$2);
   return jsxRuntime.jsx(Stack, Object.assign({ as: "summary", pl: "s", hoverBackgroundColor: "blue", cursor: "pointer" }, rest, { children: jsxRuntime.jsx(Stack, { axis: "x", justify: "between", align: "center", width: "full", children: jsxRuntime.jsxs(Stack, { axis: "x", width: "full", align: "center", gap: "xxs", children: [!omitOpenIndicator && jsxRuntime.jsx(DefaultOpenIndicator, { isOpen }), jsxRuntime.jsx(Box, { width: "full", children })] }) }) }));
 };
 DetailsDisclosure.Summary = Summary;
 Summary.OpenIndicator = OpenIndicator;
 
-const context$2 = React.createContext({
+const context$1 = React.createContext({
   variant: "primary"
 });
 const VerticalMenu = (props) => {
@@ -5026,7 +5134,7 @@ const VerticalMenu = (props) => {
   const shouldShowCollapseButton = localization && Boolean(onCollapseButtonClick);
   const hasHeaderContent = title || shouldShowCollapseButton;
   const contextValue = React.useMemo(() => ({ variant }), [variant]);
-  return jsxRuntime.jsx(context$2.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", px: "xxs", py: "m", align: "normal", className: classNames__default.default("ui:max-w-full ui:text-slate-800", className) }, rest, { children: [header && jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: hasHeaderContent ? "m" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
+  return jsxRuntime.jsx(context$1.Provider, { value: contextValue, children: jsxRuntime.jsxs(Stack, Object.assign({ as: "div", px: "xxs", py: "m", align: "normal", className: classNames__default.default("ui:max-w-full ui:text-slate-800", className) }, rest, { children: [header && jsxRuntime.jsx("div", { children: header }), jsxRuntime.jsxs(Stack, { axis: "x", gap: "xxs", p: hasHeaderContent ? "m" : void 0, align: "start", justify: "between", width: "full", children: [title && jsxRuntime.jsx(Box, { children: jsxRuntime.jsx(Text, { variant: "lg-strong", children: title }) }), shouldShowCollapseButton && jsxRuntime.jsx(
     Box,
     {
       /**
@@ -5062,11 +5170,11 @@ VerticalMenu.NotificationBubble = MenuItemNotificationBubble;
 VerticalMenu.ItemGroup = MenuItemGroup;
 VerticalMenu.SectionTitle = SectionTitle;
 function MenuItemText(props) {
-  const { variant: menuVariant } = React.useContext(context$2);
+  const { variant: menuVariant } = React.useContext(context$1);
   return jsxRuntime.jsx(Text, Object.assign({ as: "span", color: "current", variant: menuVariant === "primary" ? "base" : props.variant }, props, { className: classNames__default.default("ui:sm:leading-[24px]", props.className) }));
 }
 const useGetClassName = () => {
-  const { variant } = React.useContext(context$2);
+  const { variant } = React.useContext(context$1);
   return React.useCallback(
     // eslint-disable-next-line consistent-return
     ({ isActive = false, classNameProp = "" } = {}) => {
@@ -5109,7 +5217,7 @@ function MenuItem(props) {
   return (_a = props.render) === null || _a === void 0 ? void 0 : _a.call(props, { getClassName });
 }
 function MenuItemLayout(props) {
-  const { variant } = React.useContext(context$2);
+  const { variant } = React.useContext(context$1);
   const { icon, text, aside, notificationBubbleText, className, children } = props;
   const isCollapsed = variant === "primary-collapsed";
   if (children) {
@@ -5124,7 +5232,7 @@ function MenuItemLayout(props) {
   jsxRuntime.jsx("span", { "aria-label": itemIsTextOrNumber ? String(text) : void 0, children: icon }), text && !isCollapsed && jsxRuntime.jsx(MenuItemText, { children: text }), aside && jsxRuntime.jsx("span", { className: "ui:ml-auto", children: aside }), notificationBubbleText && !isCollapsed && jsxRuntime.jsx("span", { className: "ui:ml-auto", children: jsxRuntime.jsx(MenuItemNotificationBubble, { children: notificationBubbleText }) }), notificationBubbleText && isCollapsed && jsxRuntime.jsx("span", { "aria-label": notificationBubbleText, className: "ui:absolute ui:right-[-8px] ui:top-[-4px] ui:h-[8px] ui:w-[8px] ui:rounded-full ui:bg-red-500" })] });
 }
 function MenuItemPadding(props) {
-  const { variant } = React.useContext(context$2);
+  const { variant } = React.useContext(context$1);
   const { children, className, paddingX = variant === "primary", paddingY = true } = props;
   return jsxRuntime.jsx("div", { className: classNames__default.default({
     "ui:px-m": paddingX,
@@ -5633,113 +5741,6 @@ const Collapse = (props) => {
   return jsxRuntime.jsx(jsxRuntime.Fragment, { children: jsxRuntime.jsxs("button", { className: buttonClassName, onClick, "aria-expanded": !isCollapsed, children: [jsxRuntime.jsx("div", { className: contentClassName, children }), isCollapsed && showMoreIndicator && moreIndicator] }) });
 };
 
-const context$1 = React.createContext({
-  $dialog: null
-});
-const useModalDialog = () => React.useContext(context$1);
-const ModalDialog = (_a) => {
-  var { open, className, size, onClose, children, variant = "centered-dialog", keepChildrenMountedWhenClosed = false } = _a, rest = __rest(_a, ["open", "className", "size", "onClose", "children", "variant", "keepChildrenMountedWhenClosed"]);
-  const dialog = React.useRef(null);
-  const transitionsClasses = classNames__default.default("ui:transition-discrete ui:transition-[display,overlay,opacity,scale,translate] ui:duration-[300ms] ui:motion-reduce:duration-[0ms] ui:delay-100", "ui:backdrop:transition-[display,overlay,opacity] ui:backdrop:duration-[300ms] ui:motion-reduce:backdrop:duration-[0ms] ui:delay-0", "ui:opacity-0 ui:open:starting:opacity-0", "ui:open:opacity-100", "ui:backdrop:opacity-0 ui:open:backdrop:starting:opacity-0", "ui:open:backdrop:opacity-100", {
-    "ui:translate-y-[-5px] ui:open:starting:translate-y-[-5px] ui:open:translate-y-0": variant !== "side-modal",
-    "ui:scale-[0.98] ui:open:starting:scale-[0.98] ui:open:scale-100": variant !== "side-modal"
-  }, {
-    "ui:translate-x-[50px] ui:open:starting:translate-x-[50px] ui:open:translate-x-0": variant === "side-modal",
-    "ui:scale-[0.98] ui:open:starting:scale-[0.98] ui:open:scale-100": variant !== "side-modal"
-  });
-  const classes = classNames__default.default("ui:bg-transparent", {
-    "ui:max-w-[calc(100dvw-(var(--ui-spacing-xl)))]": variant !== "full-screen"
-  }, {
-    "ui:my-xl": variant === "centered-dialog",
-    "ui:mx-auto": variant === "centered-dialog"
-  }, "ui:top-0", "ui:bottom-auto", {
-    "ui:md:w-80": size === "s",
-    "ui:md:w-132": size === "m",
-    "ui:md:w-216": size === "l"
-  }, {
-    "ui:right-0": variant === "side-modal",
-    "ui:left-auto": variant === "side-modal",
-    "ui:bottom-0": variant === "side-modal",
-    "ui:max-h-full": variant === "side-modal"
-  }, {
-    "ui:fixed ui:top-0 ui:bottom-0 ui:left-0 ui:right-0": variant === "full-screen",
-    "ui:p-0": variant === "full-screen",
-    "ui:w-screen ui:h-screen": variant === "full-screen",
-    "ui:max-w-screen ui:max-h-screen": variant === "full-screen"
-  }, transitionsClasses, className);
-  React.useEffect(() => {
-    var _a2, _b;
-    if (open) {
-      (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.showModal();
-    } else {
-      (_b = dialog.current) === null || _b === void 0 ? void 0 : _b.close();
-    }
-  }, [open]);
-  const [isTransitioning, setIsTransitioning] = React.useState(false);
-  const createSetIsTransitioning = (yesOrNo) => (event) => {
-    if (event.target !== dialog.current) {
-      return;
-    }
-    setIsTransitioning(yesOrNo);
-  };
-  React.useEffect(() => {
-    const transitionStartEvents = ["transitionrun", "close", "cancel"];
-    const transitionStopEvents = ["transitioncancel", "transitionend"];
-    const setIsTransitioningTrue = createSetIsTransitioning(true);
-    const setIsTransitioningFalse = createSetIsTransitioning(false);
-    transitionStartEvents.forEach((event) => {
-      var _a2;
-      (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.addEventListener(event, setIsTransitioningTrue);
-    });
-    transitionStopEvents.forEach((event) => {
-      var _a2;
-      (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.addEventListener(event, setIsTransitioningFalse);
-    });
-    return () => {
-      transitionStartEvents.forEach((event) => {
-        var _a2;
-        (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.removeEventListener(event, setIsTransitioningTrue);
-      });
-      transitionStopEvents.forEach((event) => {
-        var _a2;
-        (_a2 = dialog.current) === null || _a2 === void 0 ? void 0 : _a2.removeEventListener(event, setIsTransitioningFalse);
-      });
-    };
-  }, []);
-  const shouldRenderChildren = isTransitioning || open || keepChildrenMountedWhenClosed;
-  return jsxRuntime.jsx(context$1.Provider, { value: { $dialog: dialog.current }, children: jsxRuntime.jsx("dialog", Object.assign({ ref: dialog, className: classes, onClose }, rest, { children: shouldRenderChildren && jsxRuntime.jsx(Stack, { width: "full", align: "stretch", backgroundColor: "surface", borderRadiusLeft: variant === "side-modal" ? "m" : "none", borderRadius: variant === "centered-dialog" ? "m" : "none", className: classNames__default.default({
-    "ui:max-h-[calc(100dvh-(var(--ui-spacing-xl))*2)]": variant === "centered-dialog",
-    "ui:h-screen": variant === "side-modal" || variant === "full-screen",
-    "ui:w-screen": variant === "full-screen"
-  }), children }) })) });
-};
-const Body = (_a) => {
-  var { className } = _a, rest = __rest(_a, ["className"]);
-  const classes = classNames__default.default(className, "ui:overflow-y-auto ui:flex-1");
-  return jsxRuntime.jsx(Box, Object.assign({ className: classes, p: "m" }, rest));
-};
-const Header$1 = (props) => {
-  return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", justify: "between", align: "center", gap: "m", p: "m" }, props));
-};
-const Footer = (props) => {
-  return jsxRuntime.jsx(Stack, Object.assign({ as: "footer", p: "m", backgroundColor: "background", className: "ui:rounded-b-[inherit]" }, props));
-};
-const CloseButton = (props) => {
-  return jsxRuntime.jsx(TertiaryButton, Object.assign({ leadingIcon: jsxRuntime.jsx(CrossIcon, {}) }, props));
-};
-const Actions = (_a) => {
-  var { className } = _a, rest = __rest(_a, ["className"]);
-  const classes = classNames__default.default(className, "ui:self-end");
-  return jsxRuntime.jsx(Stack, Object.assign({ axis: "x", gap: "xs", className: classes }, rest));
-};
-ModalDialog.Header = Header$1;
-ModalDialog.Title = Card.Title;
-ModalDialog.CloseButton = CloseButton;
-ModalDialog.Body = Body;
-ModalDialog.Footer = Footer;
-ModalDialog.Actions = Actions;
-ModalDialog.useModalDialog = useModalDialog;
-
 const AsideLayout = (_a) => {
   var { aside, children } = _a, rest = __rest(_a, ["aside", "children"]);
   const containerClasses = classNames__default.default("ui:flex-col ui:md:flex-row");