@capillarytech/blaze-ui 6.1.6 → 6.1.8

package/CapMediaPreview/MediaRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaRenderer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/MediaRenderer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA8B,MAAM,OAAO,CAAC;;AAmEnD,wBAAyC"}
+{"version":3,"file":"MediaRenderer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/MediaRenderer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8B,MAAM,OAAO,CAAC;AAWnD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,SAAS,CAAC;;AAsDlD,wBAAyC"}

package/CapMediaPreview/MediaRenderer.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from "react/jsx-runtime";
-import PropTypes from "prop-types";
 import { useState, useEffect } from "react";
 import { injectIntl } from "react-intl";
 import CapIcon from "../CapIcon/index.js";
@@ -8,8 +7,9 @@ import CapRow from "../CapRow/index.js";
 import { CLASS_PREFIX, MEDIA_TYPES } from "./constants.js";
 import ImageRenderer from "./ImageRenderer.js";
 import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
 import VideoPlayer from "./VideoPlayer.js";
-const MediaRenderer = ({ intl: { formatMessage }, currentMedia }) => {
+const MediaRenderer = ({ intl: { formatMessage }, currentMedia = {} }) => {
   var _a;
   const { type, file, imageProps, videoProps } = currentMedia;
   const [mediaUrl, setMediaUrl] = useState(null);
@@ -24,10 +24,10 @@ const MediaRenderer = ({ intl: { formatMessage }, currentMedia }) => {
         setMediaUrl(null);
       }
     } else {
-      setMediaUrl(file);
+      setMediaUrl(typeof file === "string" ? file : null);
     }
     return () => {
-      if (url) {
+      if (url && typeof URL !== "undefined" && URL.revokeObjectURL) {
         URL.revokeObjectURL(url);
       }
     };
@@ -39,19 +39,21 @@ const MediaRenderer = ({ intl: { formatMessage }, currentMedia }) => {
     case MEDIA_TYPES.VIDEO:
       return /* @__PURE__ */ jsx(VideoPlayer, { src: mediaUrl, videoProps });
     default:
-      return /* @__PURE__ */ jsxs(CapRow, { className: `${CLASS_PREFIX}-unsupported`, type: "flex", align: "middle", justify: "middle", children: [
-        /* @__PURE__ */ jsx(CapIcon, { type: "file", className: `${CLASS_PREFIX}-unsupported-icon` }),
-        /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label16", className: `${CLASS_PREFIX}-unsupported-label`, children: formatMessage(messages.thisFileTypeIsNotSupportedForPreview) })
-      ] });
+      return /* @__PURE__ */ jsxs(
+        CapRow,
+        {
+          className: styles[`${CLASS_PREFIX}-unsupported`],
+          type: "flex",
+          align: "middle",
+          justify: "middle",
+          children: [
+            /* @__PURE__ */ jsx(CapIcon, { type: "file", className: styles[`${CLASS_PREFIX}-unsupported-icon`] }),
+            /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label16", className: styles[`${CLASS_PREFIX}-unsupported-label`], children: formatMessage(messages.thisFileTypeIsNotSupportedForPreview) })
+          ]
+        }
+      );
   }
 };
-MediaRenderer.propTypes = {
-  intl: PropTypes.object.isRequired,
-  currentMedia: PropTypes.object
-};
-MediaRenderer.defaultProps = {
-  currentMedia: {}
-};
 const MediaRenderer$1 = injectIntl(MediaRenderer);
 export {
   MediaRenderer$1 as default

package/CapMediaPreview/VideoPlayer.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
-declare const _default: React.ComponentType<Omit<import("react-intl").WrappedComponentProps, "intl">>;
+import type { VideoPlayerProps } from './types';
+declare const _default: React.ComponentType<Omit<VideoPlayerProps, "intl">>;
 export default _default;
 //# sourceMappingURL=VideoPlayer.d.ts.map

package/CapMediaPreview/VideoPlayer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/VideoPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;;AAsCjD,wBAAuC"}
+{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/VideoPlayer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAQjD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;;AA4BhD,wBAAuC"}

package/CapMediaPreview/VideoPlayer.js

@@ -1,31 +1,32 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import { useRef, useEffect } from "react";
 import { injectIntl } from "react-intl";
 import CapLabelWithStatic from "../CapLabel/index.js";
 import { CLASS_PREFIX } from "./constants.js";
 import messages from "./messages.js";
-const VideoPlayer = ({ intl: { formatMessage }, src, videoProps }) => {
+import styles from "./styles.module.scss.js";
+const VideoPlayer = ({ intl: { formatMessage }, src = "", videoProps = {} }) => {
   const videoRef = useRef(null);
   useEffect(() => {
     if (videoRef.current) {
       videoRef.current.load();
     }
   }, [src]);
-  return /* @__PURE__ */ jsxs("video", { ref: videoRef, className: classNames(`${CLASS_PREFIX}-video`), controls: true, ...videoProps, children: [
-    /* @__PURE__ */ jsx("source", { src }),
-    /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label16", children: formatMessage(messages.yourBrowserDoesNotSupportVideoTag) })
-  ] });
-};
-VideoPlayer.propTypes = {
-  intl: PropTypes.object.isRequired,
-  src: PropTypes.string,
-  videoProps: PropTypes.object
-};
-VideoPlayer.defaultProps = {
-  src: "",
-  videoProps: {}
+  const { className: videoClassName, ...restVideoProps } = videoProps;
+  return /* @__PURE__ */ jsxs(
+    "video",
+    {
+      ref: videoRef,
+      className: classNames(styles[`${CLASS_PREFIX}-video`], videoClassName),
+      controls: true,
+      ...restVideoProps,
+      children: [
+        /* @__PURE__ */ jsx("source", { src: src || void 0 }),
+        /* @__PURE__ */ jsx(CapLabelWithStatic, { type: "label16", children: formatMessage(messages.yourBrowserDoesNotSupportVideoTag) })
+      ]
+    }
+  );
 };
 const VideoPlayer$1 = injectIntl(VideoPlayer);
 export {

package/CapMediaPreview/index.d.ts

@@ -4,57 +4,10 @@
  * A component for displaying enlarged media (images, videos, documents, and more) in a carousel view
  *
  */
-import PropTypes from 'prop-types';
 import React from 'react';
-import './styles.scss';
-export declare const CapMediaPreview: {
-    ({ intl: { formatMessage }, overrideClassName, overrideWrapperClassName, isMediaPreviewVisible, media, startIndex, width, height, topNavigationHeight, onClose, modalProps, }: {
-        intl: {
-            formatMessage: any;
-        };
-        overrideClassName: any;
-        overrideWrapperClassName: any;
-        isMediaPreviewVisible: any;
-        media: any;
-        startIndex: any;
-        width: any;
-        height: any;
-        topNavigationHeight: any;
-        onClose: any;
-        modalProps: any;
-    }): import("react/jsx-runtime").JSX.Element;
-    propTypes: {
-        intl: PropTypes.Validator<object>;
-        overrideClassName: PropTypes.Requireable<string>;
-        overrideWrapperClassName: PropTypes.Requireable<string>;
-        isMediaPreviewVisible: PropTypes.Requireable<boolean>;
-        media: PropTypes.Requireable<PropTypes.InferProps<{
-            type: PropTypes.Validator<string>;
-            file: PropTypes.Validator<NonNullable<NonNullable<string | object>>>;
-            name: PropTypes.Requireable<string>;
-            imageProps: PropTypes.Requireable<object>;
-            videoProps: PropTypes.Requireable<object>;
-        }>[]>;
-        startIndex: PropTypes.Requireable<number>;
-        width: PropTypes.Requireable<string>;
-        height: PropTypes.Requireable<string>;
-        topNavigationHeight: PropTypes.Requireable<string>;
-        onClose: PropTypes.Requireable<(...args: any[]) => any>;
-        modalProps: PropTypes.Requireable<object>;
-    };
-    defaultProps: {
-        overrideClassName: string;
-        overrideWrapperClassName: string;
-        isMediaPreviewVisible: boolean;
-        media: any[];
-        startIndex: number;
-        width: string;
-        height: string;
-        topNavigationHeight: string;
-        onClose: () => void;
-        modalProps: {};
-    };
-};
-declare const _default: React.ComponentType<Omit<import("react-intl").WrappedComponentProps, "intl">>;
+import type { WrappedComponentProps } from 'react-intl';
+import type { CapMediaPreviewProps } from './types';
+export declare const CapMediaPreview: ({ intl: { formatMessage }, overrideClassName, overrideWrapperClassName, isMediaPreviewVisible, media, startIndex, width, height, topNavigationHeight, onClose, modalProps, ...rest }: CapMediaPreviewProps & WrappedComponentProps) => import("react/jsx-runtime").JSX.Element;
+declare const _default: React.ComponentType<Omit<CapMediaPreviewProps & WrappedComponentProps, "intl">>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/CapMediaPreview/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAIH,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,KAA2C,MAAM,OAAO,CAAC;AAUhE,OAAO,eAAe,CAAC;AAEvB,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuI3B,CAAC;;AAqCF,wBAA2C"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/index.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAA2C,MAAM,OAAO,CAAC;AAEhE,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAWxD,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAEpD,eAAO,MAAM,eAAe,GAAI,sLAa7B,oBAAoB,GAAG,qBAAqB,4CAsL9C,CAAC;;AAEF,wBAA2C"}

package/CapMediaPreview/index.js

@@ -1,37 +1,39 @@
 import { jsx, Fragment, jsxs } from "react/jsx-runtime";
-import { Modal } from "antd";
+import { Modal } from "antd-v5";
 import classNames from "classnames";
-import PropTypes from "prop-types";
 import { useState, useEffect, useCallback } from "react";
 import { injectIntl } from "react-intl";
 import CapHeader from "../CapHeader/index.js";
 import CapIcon from "../CapIcon/index.js";
 import CapRow from "../CapRow/index.js";
+import logDeprecationWarning from "../utils/logDeprecationWarning.js";
 import { CLASS_PREFIX } from "./constants.js";
 import MediaRenderer from "./MediaRenderer.js";
 import messages from "./messages.js";
-import './styles.css';/* empty css            */
+import styles from "./styles.module.scss.js";
 const CapMediaPreview = ({
   intl: { formatMessage },
-  overrideClassName,
-  overrideWrapperClassName,
-  isMediaPreviewVisible,
-  media,
-  startIndex,
-  width,
-  height,
-  topNavigationHeight,
-  onClose,
-  modalProps
+  overrideClassName = "",
+  overrideWrapperClassName = "",
+  isMediaPreviewVisible = false,
+  media = [],
+  startIndex = 0,
+  width = "100vw",
+  height = "100vh",
+  topNavigationHeight = "64px",
+  onClose = () => {
+  },
+  modalProps = {},
+  ...rest
 }) => {
-  const [currentIndex, setCurrentIndex] = useState(startIndex || 0);
+  const [currentIndex, setCurrentIndex] = useState(startIndex);
   const mediaLength = (media == null ? void 0 : media.length) || 0;
   const currentMedia = media && media[currentIndex] ? media[currentIndex] : {};
   const showNavigation = mediaLength > 1;
   const isLeftNavDisabled = currentIndex === 0;
   const isRightNavDisabled = currentIndex === mediaLength - 1;
   useEffect(() => {
-    if (isMediaPreviewVisible && startIndex !== void 0) {
+    if (isMediaPreviewVisible) {
       setCurrentIndex(startIndex);
     }
   }, [startIndex, isMediaPreviewVisible]);
@@ -71,64 +73,113 @@ const CapMediaPreview = ({
   if (!isMediaPreviewVisible || !(media == null ? void 0 : media.length)) {
     return /* @__PURE__ */ jsx(Fragment, {});
   }
+  const modalPropsWithDeprecation = modalProps;
+  if (modalPropsWithDeprecation.visible !== void 0) {
+    logDeprecationWarning("CapMediaPreview", "visible", modalPropsWithDeprecation.visible, "open");
+  }
+  if (modalPropsWithDeprecation.onVisibleChange !== void 0) {
+    logDeprecationWarning(
+      "CapMediaPreview",
+      "onVisibleChange",
+      modalPropsWithDeprecation.onVisibleChange,
+      "afterOpenChange"
+    );
+  }
+  const finalOpen = modalPropsWithDeprecation.open ?? modalPropsWithDeprecation.visible ?? isMediaPreviewVisible;
+  const finalOnCancel = modalPropsWithDeprecation.onCancel ?? onClose;
+  const {
+    visible: _visible,
+    onVisibleChange: _onVisibleChange,
+    classNames: _classNames,
+    styles: _styles,
+    style: _style,
+    ...spreadableModalProps
+  } = modalPropsWithDeprecation;
+  const existingClassNames = typeof _classNames === "object" && _classNames && !("call" in _classNames) ? _classNames : {};
+  const modalClassNames = {
+    wrapper: classNames(
+      styles[`${CLASS_PREFIX}-wrapper`],
+      overrideWrapperClassName,
+      existingClassNames.wrapper
+    ),
+    container: classNames(styles[`${CLASS_PREFIX}-modal-content`], existingClassNames.container),
+    body: classNames(styles[`${CLASS_PREFIX}-body`], existingClassNames.body),
+    ...Object.fromEntries(
+      Object.entries(existingClassNames).filter(
+        ([key]) => !["wrapper", "container", "body"].includes(key)
+      )
+    )
+  };
   return /* @__PURE__ */ jsx(
     Modal,
     {
-      visible: isMediaPreviewVisible,
+      open: finalOpen,
       footer: null,
       closable: false,
       centered: true,
       keyboard: false,
       destroyOnClose: true,
-      onCancel: onClose,
+      onCancel: finalOnCancel,
       className: classNames(CLASS_PREFIX, overrideClassName),
-      wrapClassName: classNames(`${CLASS_PREFIX}-wrapper`, overrideWrapperClassName),
+      classNames: modalClassNames,
+      width,
+      styles: _styles,
       style: {
         "--top-navigation-height": topNavigationHeight,
-        "--modal-width": width,
-        "--modal-height": height
+        "--modal-width": width !== void 0 ? String(width) : void 0,
+        "--modal-height": height,
+        ..._style
       },
-      ...modalProps,
-      children: /* @__PURE__ */ jsxs(CapRow, { className: `${CLASS_PREFIX}-container`, children: [
+      ...spreadableModalProps,
+      ...rest,
+      children: /* @__PURE__ */ jsxs(CapRow, { className: styles[`${CLASS_PREFIX}-container`], children: [
         /* @__PURE__ */ jsxs(
           CapRow,
           {
-            className: `${CLASS_PREFIX}-header`,
+            className: styles[`${CLASS_PREFIX}-header`],
             type: "flex",
             justify: "space-between",
             align: "middle",
             children: [
               /* @__PURE__ */ jsx(CapHeader, { title: (currentMedia == null ? void 0 : currentMedia.name) || formatMessage(messages.mediaPreview) }),
-              /* @__PURE__ */ jsx(CapIcon, { type: "close", onClick: onClose })
+              /* @__PURE__ */ jsx(CapIcon, { type: "close", onClick: finalOnCancel })
             ]
           }
         ),
-        /* @__PURE__ */ jsxs(CapRow, { className: `${CLASS_PREFIX}-content`, children: [
+        /* @__PURE__ */ jsxs(CapRow, { className: styles[`${CLASS_PREFIX}-content`], children: [
           showNavigation && /* @__PURE__ */ jsx(
             CapRow,
             {
-              className: classNames(`${CLASS_PREFIX}-nav-button`, "left", {
-                disabled: isLeftNavDisabled
-              }),
+              className: classNames(
+                styles[`${CLASS_PREFIX}-nav-button`],
+                styles[`${CLASS_PREFIX}-nav-button-left`],
+                {
+                  [styles[`${CLASS_PREFIX}-nav-button-disabled`]]: isLeftNavDisabled
+                }
+              ),
               onClick: handlePrevious,
               disabled: isLeftNavDisabled,
-              children: /* @__PURE__ */ jsx(CapIcon, { className: `${CLASS_PREFIX}-nav-button-icon`, type: "chevron-left" })
+              children: /* @__PURE__ */ jsx(CapIcon, { className: styles[`${CLASS_PREFIX}-nav-button-icon`], type: "chevron-left" })
             }
           ),
-          /* @__PURE__ */ jsx(CapRow, { className: `${CLASS_PREFIX}-media-container`, children: /* @__PURE__ */ jsx(MediaRenderer, { currentMedia }) }),
+          /* @__PURE__ */ jsx(CapRow, { className: styles[`${CLASS_PREFIX}-media-container`], children: /* @__PURE__ */ jsx(MediaRenderer, { currentMedia }) }),
           showNavigation && /* @__PURE__ */ jsx(
             CapRow,
             {
-              className: classNames(`${CLASS_PREFIX}-nav-button`, "right", {
-                disabled: isRightNavDisabled
-              }),
+              className: classNames(
+                styles[`${CLASS_PREFIX}-nav-button`],
+                styles[`${CLASS_PREFIX}-nav-button-right`],
+                {
+                  [styles[`${CLASS_PREFIX}-nav-button-disabled`]]: isRightNavDisabled
+                }
+              ),
               onClick: handleNext,
               disabled: isRightNavDisabled,
-              children: /* @__PURE__ */ jsx(CapIcon, { className: `${CLASS_PREFIX}-nav-button-icon`, type: "chevron-right" })
+              children: /* @__PURE__ */ jsx(CapIcon, { className: styles[`${CLASS_PREFIX}-nav-button-icon`], type: "chevron-right" })
             }
           )
         ] }),
-        mediaLength > 1 && /* @__PURE__ */ jsxs(CapRow, { className: `${CLASS_PREFIX}-counter`, children: [
+        mediaLength > 1 && /* @__PURE__ */ jsxs(CapRow, { className: styles[`${CLASS_PREFIX}-counter`], children: [
           currentIndex + 1,
           " / ",
           mediaLength
@@ -137,40 +188,6 @@ const CapMediaPreview = ({
     }
   );
 };
-CapMediaPreview.propTypes = {
-  intl: PropTypes.object.isRequired,
-  overrideClassName: PropTypes.string,
-  overrideWrapperClassName: PropTypes.string,
-  isMediaPreviewVisible: PropTypes.bool,
-  media: PropTypes.arrayOf(
-    PropTypes.shape({
-      type: PropTypes.string.isRequired,
-      file: PropTypes.oneOfType([PropTypes.string, PropTypes.object]).isRequired,
-      name: PropTypes.string,
-      imageProps: PropTypes.object,
-      videoProps: PropTypes.object
-    })
-  ),
-  startIndex: PropTypes.number,
-  width: PropTypes.string,
-  height: PropTypes.string,
-  topNavigationHeight: PropTypes.string,
-  onClose: PropTypes.func,
-  modalProps: PropTypes.object
-};
-CapMediaPreview.defaultProps = {
-  overrideClassName: "",
-  overrideWrapperClassName: "",
-  isMediaPreviewVisible: false,
-  media: [],
-  startIndex: 0,
-  width: "100vw",
-  height: "100vh",
-  topNavigationHeight: "64px",
-  onClose: () => {
-  },
-  modalProps: {}
-};
 const index = injectIntl(CapMediaPreview);
 export {
   CapMediaPreview,

package/CapMediaPreview/styles.css

@@ -15,33 +15,42 @@
   top: 0;
   padding-bottom: 0;
 }
-.cap-media-preview {
+.ant-modal.cap-media-preview,
+.ant-modal-wrap .ant-modal.cap-media-preview {
   width: var(--modal-width) !important;
   height: var(--modal-height) !important;
   top: var(--top-navigation-height) !important;
-  padding: 0;
-  margin: 0;
-}
-.cap-media-preview .ant-modal-content {
-  height: calc(var(--modal-height) - var(--top-navigation-height));
-  background-color: rgba(94, 94, 94, 0.4);
-  backdrop-filter: blur(0.857rem);
-  border-radius: 0;
-  display: flex;
-  flex-direction: column;
-  padding: 0;
 }
-.cap-media-preview .ant-modal-body {
-  flex: 1;
+.cap-media-preview-modal-content {
+  height: calc(var(--modal-height) - var(--top-navigation-height)) !important;
+  background: rgba(94, 94, 94, 0.4) !important;
+  backdrop-filter: blur(0.857rem) !important;
+  border-radius: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  width: 100% !important;
+  margin: 0 !important;
+  border: none !important;
+  outline: none !important;
+  transform: none !important;
+  position: relative !important;
+  color: inherit !important;
+}
+.cap-media-preview-body {
+  flex: 1 !important;
+  flex-direction: column !important;
   display: flex;
   align-items: center;
   justify-content: center;
-  padding: 0;
+  padding: 0 !important;
   overflow: hidden;
 }
 .cap-media-preview-container {
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -61,7 +70,8 @@
 .cap-media-preview-content {
   position: relative;
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -98,16 +108,16 @@
   background-color: #f4f5f7;
   cursor: pointer;
 }
-.cap-media-preview-nav-button.left {
+.cap-media-preview-nav-button.cap-media-preview-nav-button-left {
   left: 1.714rem;
 }
-.cap-media-preview-nav-button.right {
+.cap-media-preview-nav-button.cap-media-preview-nav-button-right {
   right: 1.714rem;
 }
-.cap-media-preview-nav-button.disabled {
+.cap-media-preview-nav-button.cap-media-preview-nav-button-disabled {
   cursor: not-allowed;
 }
-.cap-media-preview-nav-button.disabled .cap-media-preview-nav-button-icon {
+.cap-media-preview-nav-button.cap-media-preview-nav-button-disabled .cap-media-preview-nav-button-icon {
   color: #b3bac5;
 }
 .cap-media-preview-counter {

package/CapMediaPreview/styles.module.scss.js

@@ -0,0 +1,24 @@
+import './styles.css';const styles = {
+  "cap-media-preview-wrapper": "cap-media-preview-wrapper",
+  "cap-media-preview": "cap-media-preview",
+  "cap-media-preview-modal-content": "cap-media-preview-modal-content",
+  "cap-media-preview-body": "cap-media-preview-body",
+  "cap-media-preview-container": "cap-media-preview-container",
+  "cap-media-preview-header": "cap-media-preview-header",
+  "cap-media-preview-content": "cap-media-preview-content",
+  "cap-media-preview-media-container": "cap-media-preview-media-container",
+  "cap-media-preview-image": "cap-media-preview-image",
+  "cap-media-preview-video": "cap-media-preview-video",
+  "cap-media-preview-nav-button": "cap-media-preview-nav-button",
+  "cap-media-preview-nav-button-left": "cap-media-preview-nav-button-left",
+  "cap-media-preview-nav-button-right": "cap-media-preview-nav-button-right",
+  "cap-media-preview-nav-button-disabled": "cap-media-preview-nav-button-disabled",
+  "cap-media-preview-nav-button-icon": "cap-media-preview-nav-button-icon",
+  "cap-media-preview-counter": "cap-media-preview-counter",
+  "cap-media-preview-unsupported": "cap-media-preview-unsupported",
+  "cap-media-preview-unsupported-icon": "cap-media-preview-unsupported-icon",
+  "cap-media-preview-unsupported-label": "cap-media-preview-unsupported-label"
+};
+export {
+  styles as default
+};

package/CapMediaPreview/styles.scss

@@ -12,42 +12,51 @@ $flex-center: (
     #{$property}: $value;
   }
 
-  .ant-modal {
+  :global(.ant-modal) {
     top: 0;
     padding-bottom: 0;
   }
 }
 
-.#{$media-preview} {
+:global(.ant-modal).#{$media-preview},
+:global(.ant-modal-wrap .ant-modal).#{$media-preview} {
   width: var(--modal-width) !important;
   height: var(--modal-height) !important;
   top: var(--top-navigation-height) !important;
-  padding: 0;
-  margin: 0;
-
-  .ant-modal-content {
-    height: calc(var(--modal-height) - var(--top-navigation-height));
-    background-color: rgba(94, 94, 94, 0.4);
-    backdrop-filter: blur($CAP_SPACE_12);
-    border-radius: 0;
-    display: flex;
-    flex-direction: column;
-    padding: 0;
-  }
+}
 
-  .ant-modal-body {
-    flex: 1;
-    @each $property, $value in $flex-center {
-      #{$property}: $value;
-    }
-    padding: 0;
-    overflow: hidden;
+.#{$media-preview}-modal-content {
+  height: calc(var(--modal-height) - var(--top-navigation-height)) !important;
+  background: rgba(94, 94, 94, 0.4) !important;
+  backdrop-filter: blur($CAP_SPACE_12) !important;
+  border-radius: 0 !important;
+  display: flex !important;
+  flex-direction: column !important;
+  padding: 0 !important;
+  box-shadow: none !important;
+  width: 100% !important;
+  margin: 0 !important;
+  border: none !important;
+  outline: none !important;
+  transform: none !important;
+  position: relative !important;
+  color: inherit !important;
+}
+
+.#{$media-preview}-body {
+  flex: 1 !important;
+  flex-direction: column !important;
+  @each $property, $value in $flex-center {
+    #{$property}: $value;
   }
+  padding: 0 !important;
+  overflow: hidden;
 }
 
 .#{$media-preview}-container {
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   display: flex;
   flex-direction: column;
   @each $property, $value in $flex-center {
@@ -73,7 +82,8 @@ $flex-center: (
 .#{$media-preview}-content {
   position: relative;
   width: 100%;
-  height: 100%;
+  flex: 1;
+  min-height: 0;
   @each $property, $value in $flex-center {
     #{$property}: $value;
   }
@@ -100,7 +110,8 @@ $flex-center: (
   flex-shrink: 0;
   aspect-ratio: 964.62/540;
   object-fit: contain;
-  box-shadow: 0 0 0.071rem rgba(9, 30, 66, 0.31),
+  box-shadow:
+    0 0 0.071rem rgba(9, 30, 66, 0.31),
     0 0.286rem 0.571rem -0.143rem rgba(9, 30, 66, 0.25);
 }
 
@@ -115,15 +126,15 @@ $flex-center: (
   background-color: $CAP_G09;
   cursor: pointer;
 
-  &.left {
+  &.#{$media-preview}-nav-button-left {
     left: $CAP_SPACE_24;
   }
 
-  &.right {
+  &.#{$media-preview}-nav-button-right {
     right: $CAP_SPACE_24;
   }
 
-  &.disabled {
+  &.#{$media-preview}-nav-button-disabled {
     cursor: not-allowed;
     .#{$media-preview}-nav-button-icon {
       color: $CAP_G06;