@capillarytech/blaze-ui 6.4.0 → 6.6.0

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;

package/CapMediaPreview/types.d.ts

@@ -0,0 +1,48 @@
+import type { ModalProps } from 'antd-v5';
+import type { WrappedComponentProps } from 'react-intl';
+export interface MediaItem {
+    type: string;
+    file: string | File;
+    name?: string;
+    imageProps?: Record<string, unknown>;
+    videoProps?: Record<string, unknown>;
+}
+export interface CapMediaPreviewProps extends Omit<ModalProps, 'open' | 'visible' | 'onVisibleChange' | 'onOpenChange'> {
+    /** Override className for Modal */
+    overrideClassName?: string;
+    /** Override className for Modal wrapper */
+    overrideWrapperClassName?: string;
+    /** Whether the media preview modal is visible */
+    isMediaPreviewVisible?: boolean;
+    /** Array of media items to display */
+    media?: MediaItem[];
+    /** Starting index for media carousel */
+    startIndex?: number;
+    /** Width of the modal */
+    width?: ModalProps['width'];
+    /** Height of the modal */
+    height?: string;
+    /** Top navigation height (used for CSS variable) */
+    topNavigationHeight?: string;
+    /** Callback when modal is closed */
+    onClose?: () => void;
+    /** Additional props to pass to Modal component */
+    modalProps?: Omit<ModalProps, 'open' | 'visible' | 'onVisibleChange' | 'onOpenChange'>;
+}
+export interface MediaRendererProps extends WrappedComponentProps {
+    /** Current media item to render */
+    currentMedia?: MediaItem;
+}
+export interface ImageRendererProps {
+    /** Image source URL */
+    src?: string | null;
+    /** Additional props to pass to CapImage */
+    imageProps?: Record<string, unknown>;
+}
+export interface VideoPlayerProps extends WrappedComponentProps {
+    /** Video source URL */
+    src?: string | null;
+    /** Additional props to pass to video element */
+    videoProps?: Record<string, unknown>;
+}
+//# sourceMappingURL=types.d.ts.map

package/CapMediaPreview/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../components/CapMediaPreview/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,YAAY,CAAC;AAExD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACrC,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,oBACf,SAAQ,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,cAAc,CAAC;IACjF,mCAAmC;IACnC,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,2CAA2C;IAC3C,wBAAwB,CAAC,EAAE,MAAM,CAAC;IAClC,iDAAiD;IACjD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,sCAAsC;IACtC,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,wCAAwC;IACxC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yBAAyB;IACzB,KAAK,CAAC,EAAE,UAAU,CAAC,OAAO,CAAC,CAAC;IAC5B,0BAA0B;IAC1B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,oDAAoD;IACpD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,oCAAoC;IACpC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,kDAAkD;IAClD,UAAU,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,MAAM,GAAG,SAAS,GAAG,iBAAiB,GAAG,cAAc,CAAC,CAAC;CACxF;AAED,MAAM,WAAW,kBAAmB,SAAQ,qBAAqB;IAC/D,mCAAmC;IACnC,YAAY,CAAC,EAAE,SAAS,CAAC;CAC1B;AAED,MAAM,WAAW,kBAAkB;IACjC,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC;AAED,MAAM,WAAW,gBAAiB,SAAQ,qBAAqB;IAC7D,uBAAuB;IACvB,GAAG,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACpB,gDAAgD;IAChD,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACtC"}

package/CapMediaPreview/types.js

@@ -0,0 +1 @@
+

package/CapMobileDateRangePicker/DateRangeInputSelectors.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { DateRangeInputSelectorsProps, IntlShape } from './types';
+declare const _default: React.ComponentType<Omit<DateRangeInputSelectorsProps & {
+    intl: IntlShape;
+}, "intl">>;
+export default _default;
+//# sourceMappingURL=DateRangeInputSelectors.d.ts.map

package/CapMobileDateRangePicker/DateRangeInputSelectors.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInputSelectors.d.ts","sourceRoot":"","sources":["../../components/CapMobileDateRangePicker/DateRangeInputSelectors.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAY1B,OAAO,KAAK,EAAE,4BAA4B,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;;UAIQ,SAAS;;AAuDxF,wBAAmD"}

package/CapMobileDateRangePicker/DateRangeInputSelectors.js

@@ -0,0 +1,68 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import moment from "moment";
+import { injectIntl } from "react-intl";
+import { RANGE_PICKER } from "../utils/dayjs.js";
+import CapColumn from "../CapColumn/index.js";
+import InputFinal from "../CapInput/index.js";
+import CapLabelWithStatic from "../CapLabel/index.js";
+import CapRow from "../CapRow/index.js";
+import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
+import { clsPrefix } from "./index.js";
+const DateRangeInputSelectors = ({
+  intl: { formatMessage },
+  focusedInput,
+  startDate,
+  endDate,
+  dateDisplayFormat,
+  handleStartDateClick,
+  handleEndDateClick,
+  showPlaceholders = false
+}) => {
+  return /* @__PURE__ */ jsxs(CapRow, { className: styles[`${clsPrefix}-inputs`], children: [
+    /* @__PURE__ */ jsxs(CapColumn, { span: 10, children: [
+      showPlaceholders && /* @__PURE__ */ jsx(CapLabelWithStatic, { className: styles[`${clsPrefix}-inputs-label`], children: formatMessage(messages.startDate) }),
+      /* @__PURE__ */ jsx(
+        InputFinal,
+        {
+          className: classNames({
+            [styles[`${clsPrefix}-inputs-focused`]]: focusedInput === RANGE_PICKER.START_DATE
+          }),
+          value: moment(startDate).format(dateDisplayFormat),
+          size: "middle",
+          readOnly: true,
+          onClick: handleStartDateClick
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      CapColumn,
+      {
+        className: classNames(styles[`${clsPrefix}-inputs-date-range-hyphen`], {
+          [styles[`${clsPrefix}-inputs-date-range-hyphen-vertical-align`]]: showPlaceholders
+        }),
+        children: "-"
+      }
+    ),
+    /* @__PURE__ */ jsxs(CapColumn, { span: 10, children: [
+      showPlaceholders && /* @__PURE__ */ jsx(CapLabelWithStatic, { className: styles[`${clsPrefix}-inputs-label`], children: formatMessage(messages.endDate) }),
+      /* @__PURE__ */ jsx(
+        InputFinal,
+        {
+          className: classNames({
+            [styles[`${clsPrefix}-inputs-focused`]]: focusedInput === RANGE_PICKER.END_DATE
+          }),
+          value: moment(endDate).format(dateDisplayFormat),
+          size: "middle",
+          readOnly: true,
+          onClick: handleEndDateClick
+        }
+      )
+    ] })
+  ] });
+};
+const DateRangeInputSelectors_default = injectIntl(DateRangeInputSelectors);
+export {
+  DateRangeInputSelectors_default as default
+};

package/CapMobileDateRangePicker/ReactMobileDatePickerModule.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ReactMobileDatePickerModule.d.ts","sourceRoot":"","sources":["../../components/CapMobileDateRangePicker/ReactMobileDatePickerModule.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,QAAA,MAAM,qBAAqB,KAAqC,CAAC;AACjE,eAAe,qBAAqB,CAAC"}
+{"version":3,"file":"ReactMobileDatePickerModule.d.ts","sourceRoot":"","sources":["../../components/CapMobileDateRangePicker/ReactMobileDatePickerModule.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAGH,QAAA,MAAM,qBAAqB,KAA4C,CAAC;AACxE,eAAe,qBAAqB,CAAC"}