@memori.ai/memori-react 9.0.0-alpha.8 → 9.0.0-rc.0

package/esm/components/ContentPreviewModal/ContentPreviewModal.css

@@ -1,85 +1,158 @@
 /* ContentPreviewModal – modern preview modal for files and media */
-
-/*
- * @memori.ai/ui Modal uses memori-modal__backdrop (z-index 40) and memori-modal__viewport (z-index 50);
- * drawers use z-index 1001. className is applied to the viewport; raise both layers so previews
- * stack above chat history and artifact drawers.
- */
-.memori-modal__backdrop.memori-content-preview-modal-backdrop,
-.memori-content-preview-modal.memori-modal__viewport {
-    z-index: 2147483647 !important;
-}
+/* Stacking above drawers: Modal stacking="stacked" (library z-index 1600). */
 
 .memori-content-preview-modal.memori-modal__viewport .memori-modal__popup {
+    --memori-content-preview-max-height: calc(
+        100dvh - 2 * var(--memori-spacing-md) - env(safe-area-inset-top, 0px) -
+            env(safe-area-inset-bottom, 0px)
+    );
+
+    display: flex;
     overflow: hidden;
     width: min(90vw, 800px);
     min-width: 0;
     max-width: min(90vw, 800px);
-    min-height: min(500px, 80vh);
-    max-height: 80vh;
-    border-radius: var(--memori-radius-box);
-    /* background: var(--memori-content-preview-bg, #fafafa); */
-    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.05);
-    overflow-y: auto;
+    /* Flex item in a centered viewport: content-based min-height grows the
+       popup past the screen and hides the close button. Keep it shrinkable. */
+    min-height: 0;
+    max-height: var(--memori-content-preview-max-height);
+    box-sizing: border-box;
+    flex-direction: column;
+    border-radius: var(--memori-radius-overlay);
+    box-shadow:
+        0 25px 50px -12px rgba(0, 0, 0, 0.25),
+        0 0 0 1px rgba(0, 0, 0, 0.05);
+}
+
+@media (min-width: 769px) {
+    .memori-content-preview-modal.memori-modal__viewport .memori-modal__popup {
+        min-height: min(500px, var(--memori-content-preview-max-height));
+    }
+}
+
+.memori-content-preview-modal.memori-modal__viewport .memori-modal__popup > .memori-spin {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
+    max-height: none;
+    flex: 1 1 auto;
+    flex-direction: column;
+}
+
+.memori-content-preview-modal.memori-modal__viewport .memori-modal__content {
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
+    max-height: none;
+    flex: 1 1 auto;
+    flex-direction: column;
 }
 
 /* Image variant: modal at least 600px wide (capped by viewport on small screens) */
 .memori-content-preview-modal--image.memori-modal__viewport .memori-modal__popup {
     overflow: hidden;
-    min-width: min(600px, 100vw);
+    min-width: min(600px, 100%);
     max-width: min(90vw, 760px);
-    min-height: auto;
+    min-height: 0;
 }
 
 .memori-modal__viewport.memori-content-preview-modal .memori-modal__title {
+    overflow: visible;
+    min-width: 0;
+    max-width: 100%;
+    flex-shrink: 0;
     padding: 1rem 1.25rem 0.75rem;
+    padding-right: calc(var(--memori-icon-button-size, 40px) + 1.5rem);
     border-bottom: 1px solid var(--memori-content-preview-border, rgba(0, 0, 0, 0.06));
+    margin-bottom: 0;
     color: var(--memori-text-color);
-    font-size: var(--memori-text-size-base);
+    font-size: var(--memori-text-size-md);
     font-weight: var(--memori-text-weight-semibold);
     letter-spacing: -0.01em;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+    white-space: normal;
+    word-break: break-word;
 }
 
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close {
-    top: 0.75rem;
-    right: 0.75rem;
+.memori-content-preview-modal--heading {
+    display: flex;
+    min-width: 0;
+    align-items: flex-start;
+    gap: 0.75rem;
 }
 
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button {
-    border-radius: var(--memori-radius-box);
-    background: var(--memori-content-preview-close-bg, rgba(0, 0, 0, 0.05));
-    color: var(--memori-text-color, #111827);
-    transition: background 0.2s ease, transform 0.15s ease;
+.memori-content-preview-modal--heading-icon {
+    display: flex;
+    width: 2.5rem;
+    height: 2.5rem;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    background: var(--memori-primary-subtle);
+    color: var(--memori-primary);
 }
 
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button svg {
-    color: currentColor;
+.memori-content-preview-modal--heading-icon svg {
+    width: 1.125rem;
+    height: 1.125rem;
 }
 
-.memori-modal__viewport.memori-content-preview-modal .memori-modal__close button:hover {
-    background: var(--memori-content-preview-close-hover, rgba(0, 0, 0, 0.1));
-    transform: scale(1.05);
+.memori-content-preview-modal--heading-copy {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    gap: 0.15rem;
 }
 
-[data-theme='dark'] .memori-modal__viewport.memori-content-preview-modal .memori-modal__close button,
-.memori-widget[data-theme='dark'] .memori-modal__viewport.memori-content-preview-modal .memori-modal__close button {
-    background: color-mix(in srgb, var(--memori-main-background, #111) 85%, white);
-    color: var(--memori-text-color, #fff);
+.memori-content-preview-modal--heading-title {
+    min-width: 0;
+    color: var(--memori-text-color);
+    font-size: var(--memori-text-size-md);
+    font-weight: 650;
+    letter-spacing: -0.015em;
+    line-height: 1.3;
+    overflow-wrap: anywhere;
+    white-space: normal;
+    word-break: break-word;
+}
+
+.memori-content-preview-modal--heading-subtitle {
+    color: color-mix(in srgb, var(--memori-text-color) 58%, transparent);
+    font-size: var(--memori-text-size-sm);
+    font-weight: 400;
+    line-height: 1.35;
+    overflow-wrap: anywhere;
+    white-space: normal;
+}
+
+.memori-modal__viewport.memori-content-preview-modal .memori-modal__close {
+    top: 0.75rem;
+    right: 0.75rem;
 }
 
 .memori-content-preview-modal--body--image {
     display: flex;
+    min-width: 0;
+    min-height: 0;
+    flex: 1 1 auto;
     align-items: center;
     justify-content: center;
     padding: 1rem;
-    /* background: var(--memori-content-preview-image-bg, #f3f4f6); */
 }
 
 .memori-content-preview-modal--body--content {
+    display: flex;
     min-width: 0;
     max-width: 100%;
-    padding: 1rem 1.25rem;
-    overflow-x: auto;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+    padding: 0;
 }
 
 /* Image */
@@ -89,6 +162,10 @@
     min-width: 0;
     max-width: 100%;
     height: min(56vh, 420px);
+    height: min(56dvh, 420px);
+    min-height: 0;
+    max-height: 100%;
+    flex: 1 1 auto;
     align-items: center;
     justify-content: center;
 }
@@ -96,7 +173,7 @@
 .memori-content-preview-modal--image {
     width: 100%;
     height: 100%;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     object-fit: contain;
 }
 
@@ -105,31 +182,62 @@
     background: var(--memori-main-background);
 }
 
-@media (max-width: 768px) {
-    .memori-content-preview-modal.memori-modal__viewport .memori-modal__popup {
-        width: min(92vw, 100%) !important;
-        min-width: 0 !important;
-        max-width: 100vw;
-        min-height: auto;
-        max-height: 85vh;
-    }
+.memori-content-preview-modal--scroll-shell {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    min-width: 0;
+    min-height: 0;
+    flex: 1 1 auto;
+    flex-direction: column;
+}
 
-    .memori-content-preview-modal--image.memori-modal__viewport .memori-modal__popup {
-        min-width: min(92vw, 600px);
-    }
+.memori-content-preview-modal--scroll-cue {
+    position: absolute;
+    z-index: 1;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 2.75rem 1rem 0.85rem;
+    border: 0;
+    background: linear-gradient(
+        to top,
+        var(--memori-secondary-background) 0%,
+        var(--memori-secondary-background) 38%,
+        color-mix(in srgb, var(--memori-secondary-background) 55%, transparent) 72%,
+        transparent 100%
+    );
+    color: color-mix(in srgb, var(--memori-text-color) 52%, transparent);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: var(--memori-text-size-sm);
+    font-weight: 500;
+    gap: 0.35rem;
+    letter-spacing: -0.01em;
+}
 
-    .memori-content-preview-modal--image-wrap {
-        width: min(84vw, 520px);
-        height: min(48vh, 320px);
-    }
+.memori-content-preview-modal--scroll-cue:hover,
+.memori-content-preview-modal--scroll-cue:focus-visible {
+    color: color-mix(in srgb, var(--memori-text-color) 78%, transparent);
+}
 
-    .memori-content-preview-modal--body--content {
-        padding: 0.75rem;
-    }
+.memori-content-preview-modal--scroll-cue:focus-visible {
+    outline: 2px solid var(--memori-primary);
+    outline-offset: -2px;
+}
 
-    .memori-content-preview-modal--snippet-wrap .memori-snippet {
-        min-width: 0;
-        max-width: 100%;
+.memori-content-preview-modal--scroll-cue-icon {
+    width: 1rem;
+    height: 1rem;
+    flex-shrink: 0;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .memori-content-preview-modal--scroll-cue-icon {
+        animation: none;
     }
 }
 
@@ -137,23 +245,179 @@
 .memori-content-preview-modal--snippet-wrap {
     min-width: 0;
     max-width: 100%;
-    min-height: 120px;
-    border: 1px solid var(--memori-content-preview-snippet-border, #e2e8f0);
-    border-radius: var(--memori-radius-box);
-    background: var(--memori-content-preview-snippet-bg, #f8fafc);
-    color: var(--memori-content-preview-snippet-text, #334155);
+    min-height: 0;
+    flex: 1 1 auto;
+    padding: 1rem 1.25rem;
+    border: 1px solid var(--memori-border-color);
+    border-radius: var(--memori-radius-surface);
+    margin: 1rem 1.25rem;
+    background: var(--memori-main-background);
+    color: var(--memori-text-color);
     font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
-    font-size: var(--memori-text-size-small);
+    font-size: var(--memori-text-size-sm);
     line-height: var(--memori-text-line-relaxed);
     overflow-x: auto;
+    overflow-y: auto;
+    scrollbar-color: color-mix(in oklch, var(--memori-neutral, #6b7280) 55%, transparent) transparent;
+    scrollbar-width: thin;
     white-space: pre-wrap;
     word-break: break-word;
 }
 
+.memori-content-preview-modal--snippet-wrap--document {
+    padding: 1.25rem 1.5rem 2rem;
+    border: 0;
+    margin: 0;
+    background: transparent;
+    font-family: var(--memori-font-family);
+    font-size: var(--memori-text-size-md);
+    line-height: 1.65;
+    white-space: normal;
+}
+
+.memori-content-preview-modal--scroll-shell--cue .memori-content-preview-modal--snippet-wrap {
+    padding-bottom: 3.75rem;
+}
+
+/* Rendered markdown */
+.memori-content-preview-modal--markdown {
+    min-width: 0;
+    max-width: 100%;
+    color: var(--memori-text-color);
+    font-family: var(--memori-font-family);
+    font-size: var(--memori-text-size-md);
+    line-height: 1.65;
+}
+
+.memori-content-preview-modal--markdown > :first-child {
+    margin-top: 0;
+}
+
+.memori-content-preview-modal--markdown > :last-child {
+    margin-bottom: 0;
+}
+
+.memori-content-preview-modal--markdown h1,
+.memori-content-preview-modal--markdown h2,
+.memori-content-preview-modal--markdown h3,
+.memori-content-preview-modal--markdown h4,
+.memori-content-preview-modal--markdown h5,
+.memori-content-preview-modal--markdown h6 {
+    margin: 1.35rem 0 0.55rem;
+    color: var(--memori-text-color);
+    font-weight: 700;
+    letter-spacing: -0.02em;
+    line-height: 1.25;
+}
+
+.memori-content-preview-modal--markdown h1 {
+    margin-top: 0;
+    margin-bottom: 0.65rem;
+    font-size: 1.75rem;
+}
+
+.memori-content-preview-modal--markdown h2 {
+    font-size: 1.15rem;
+    font-weight: 650;
+}
+
+.memori-content-preview-modal--markdown h3 {
+    font-size: 1.05rem;
+}
+
+.memori-content-preview-modal--markdown p {
+    margin: 0 0 0.9rem;
+}
+
+.memori-content-preview-modal--markdown strong,
+.memori-content-preview-modal--markdown b {
+    font-weight: 650;
+}
+
+.memori-content-preview-modal--markdown em {
+    font-style: italic;
+}
+
+.memori-content-preview-modal--markdown a {
+    color: var(--memori-primary);
+    text-decoration: none;
+}
+
+.memori-content-preview-modal--markdown a:hover,
+.memori-content-preview-modal--markdown a:focus-visible {
+    text-decoration: underline;
+}
+
+.memori-content-preview-modal--markdown code {
+    padding: 0.12em 0.4em;
+    border-radius: 0.4rem;
+    background: color-mix(in srgb, var(--memori-text-color) 8%, transparent);
+    font-family: 'SF Mono', 'Fira Code', 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+    font-size: 0.875em;
+}
+
+.memori-content-preview-modal--markdown pre {
+    padding: 0.9rem 1rem;
+    border-radius: var(--memori-radius-surface);
+    margin: 0 0 1rem;
+    background: color-mix(in srgb, var(--memori-text-color) 6%, transparent);
+    overflow-x: auto;
+}
+
+.memori-content-preview-modal--markdown pre code {
+    padding: 0;
+    background: none;
+    font-size: 0.85em;
+    white-space: pre;
+}
+
+.memori-content-preview-modal--markdown ul,
+.memori-content-preview-modal--markdown ol {
+    padding-left: 1.25rem;
+    margin: 0 0 1rem;
+}
+
+.memori-content-preview-modal--markdown li + li {
+    margin-top: 0.25rem;
+}
+
+.memori-content-preview-modal--markdown blockquote {
+    padding: 0.15rem 0 0.15rem 0.9rem;
+    border-left: 3px solid color-mix(in srgb, var(--memori-text-color) 18%, transparent);
+    margin: 0 0 1rem;
+    color: color-mix(in srgb, var(--memori-text-color) 78%, transparent);
+}
+
+.memori-content-preview-modal--markdown hr {
+    border: 0;
+    border-top: 1px solid color-mix(in srgb, var(--memori-text-color) 12%, transparent);
+    margin: 1.25rem 0;
+}
+
+.memori-content-preview-modal--markdown table {
+    width: 100%;
+    margin: 0 0 1rem;
+    border-collapse: collapse;
+    font-size: 0.95em;
+}
+
+.memori-content-preview-modal--markdown th,
+.memori-content-preview-modal--markdown td {
+    padding: 0.4rem 0.65rem;
+    border-bottom: 1px solid color-mix(in srgb, var(--memori-text-color) 10%, transparent);
+    text-align: left;
+    vertical-align: top;
+}
+
+.memori-content-preview-modal--markdown th {
+    color: color-mix(in srgb, var(--memori-text-color) 62%, transparent);
+    font-weight: 500;
+}
+
 /* When Snippet component is used inside, give it consistent spacing */
 .memori-content-preview-modal--snippet-wrap .memori-snippet {
     border: none;
-    border-radius: var(--memori-radius-box);
+    border-radius: var(--memori-radius-surface);
     background: transparent;
     box-shadow: none;
 }
@@ -171,3 +435,51 @@
     white-space: pre-wrap !important;
     word-break: break-word;
 }
+
+.memori-content-preview-modal .memori-media-item-preview--content,
+.memori-content-preview-modal .memori-media-item--modal-iframe-wrap,
+.memori-content-preview-modal .memori-media-item--modal-iframe {
+    min-height: 0;
+    max-height: none;
+    flex: 1 1 auto;
+}
+
+@media (max-width: 768px) {
+    .memori-content-preview-modal.memori-modal__viewport .memori-modal__popup {
+        width: min(92vw, 100%) !important;
+        min-width: 0 !important;
+        max-width: 100%;
+        min-height: 0;
+        max-height: var(--memori-content-preview-max-height);
+    }
+
+    .memori-content-preview-modal--image.memori-modal__viewport .memori-modal__popup {
+        min-width: 0;
+    }
+
+    .memori-content-preview-modal--image-wrap {
+        width: min(84vw, 520px);
+        height: min(48vh, 320px);
+        height: min(48dvh, 320px);
+        max-height: 100%;
+    }
+
+    .memori-content-preview-modal--snippet-wrap {
+        padding: 0.75rem;
+        margin: 0.75rem;
+    }
+
+    .memori-content-preview-modal--snippet-wrap--document {
+        padding: 1rem 1.1rem 2rem;
+        margin: 0;
+    }
+
+    .memori-content-preview-modal--snippet-wrap .memori-snippet {
+        min-width: 0;
+        max-width: 100%;
+    }
+
+    .memori-content-preview-modal--markdown h1 {
+        font-size: 1.45rem;
+    }
+}

package/esm/components/ContentPreviewModal/ContentPreviewModal.d.ts

@@ -2,12 +2,15 @@ import React, { FC } from 'react';
 export interface ContentPreviewModalProps {
     open: boolean;
     onClose: () => void;
-    title?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    headerIcon?: React.ReactNode;
     isImage?: boolean;
     imageSrc?: string;
     imageAlt?: string;
     children?: React.ReactNode;
     className?: string;
+    contentKind?: 'snippet' | 'document';
 }
 declare const ContentPreviewModal: FC<ContentPreviewModalProps>;
 export default ContentPreviewModal;

package/esm/components/ContentPreviewModal/ContentPreviewModal.js

@@ -1,17 +1,82 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
 import { Modal } from '@memori.ai/ui';
 import cx from 'classnames';
-import { useWidgetSurfaceEl } from '../../context/widgetSurfaceContext';
-const ContentPreviewModal = ({ open, onClose, title, isImage = false, imageSrc, imageAlt, children, className, }) => {
+import { ChevronDown } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+const OVERFLOW_THRESHOLD_PX = 8;
+const ContentPreviewModal = ({ open, onClose, title, description, headerIcon, isImage = false, imageSrc, imageAlt, children, className, contentKind = 'snippet', }) => {
     var _a;
-    const surfaceEl = useWidgetSurfaceEl();
+    const { t } = useTranslation();
     const width = 'min(90vw, 800px)';
-    return (_jsx(Modal, { container: surfaceEl !== null && surfaceEl !== void 0 ? surfaceEl : undefined, open: open, onClose: () => onClose(), width: width, widthMd: width, backdropClassName: "memori-content-preview-modal-backdrop", className: cx('memori-content-preview-modal', className, {
+    const scrollRef = useRef(null);
+    const [canScroll, setCanScroll] = useState(false);
+    const [atBottom, setAtBottom] = useState(true);
+    const updateScrollState = useCallback(() => {
+        const el = scrollRef.current;
+        if (!el) {
+            setCanScroll(false);
+            setAtBottom(true);
+            return;
+        }
+        const overflow = el.scrollHeight - el.clientHeight > OVERFLOW_THRESHOLD_PX;
+        setCanScroll(overflow);
+        setAtBottom(!overflow ||
+            el.scrollTop + el.clientHeight >=
+                el.scrollHeight - OVERFLOW_THRESHOLD_PX);
+    }, []);
+    useLayoutEffect(() => {
+        if (!open || isImage) {
+            setCanScroll(false);
+            setAtBottom(true);
+            return;
+        }
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        el.scrollTop = 0;
+        updateScrollState();
+        el.addEventListener('scroll', updateScrollState, { passive: true });
+        window.addEventListener('resize', updateScrollState);
+        const ResizeObs = typeof ResizeObserver !== 'undefined' ? ResizeObserver : null;
+        const observer = ResizeObs ? new ResizeObs(updateScrollState) : null;
+        observer === null || observer === void 0 ? void 0 : observer.observe(el);
+        if (el.firstElementChild && observer) {
+            observer.observe(el.firstElementChild);
+        }
+        return () => {
+            el.removeEventListener('scroll', updateScrollState);
+            window.removeEventListener('resize', updateScrollState);
+            observer === null || observer === void 0 ? void 0 : observer.disconnect();
+        };
+    }, [open, isImage, children, updateScrollState]);
+    const showScrollCue = !isImage && canScroll && !atBottom;
+    const heading = headerIcon || description ? (_jsxs("div", { className: "memori-content-preview-modal--heading", children: [headerIcon ? (_jsx("div", { className: "memori-content-preview-modal--heading-icon", "aria-hidden": true, children: headerIcon })) : null, _jsxs("div", { className: "memori-content-preview-modal--heading-copy", children: [title ? (_jsx("span", { className: "memori-content-preview-modal--heading-title", children: title })) : null, description ? (_jsx("span", { className: "memori-content-preview-modal--heading-subtitle", children: description })) : null] })] })) : (title);
+    const scrollToContinue = () => {
+        const el = scrollRef.current;
+        if (!el)
+            return;
+        const reduceMotion = typeof window.matchMedia === 'function' &&
+            window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        el.scrollBy({
+            top: Math.max(el.clientHeight * 0.75, 160),
+            behavior: reduceMotion ? 'auto' : 'smooth',
+        });
+    };
+    const imageAltText = (_a = imageAlt !== null && imageAlt !== void 0 ? imageAlt : (typeof title === 'string' ? title : undefined)) !== null && _a !== void 0 ? _a : 'Preview';
+    return (_jsx(Modal, { open: open, onClose: () => onClose(), width: width, widthMd: width, stacking: "stacked", className: cx('memori-content-preview-modal', className, {
             'memori-content-preview-modal--image': isImage,
-        }), closable: true, title: title, footer: null, children: _jsx("div", { className: cx('memori-content-preview-modal--body', {
+            'memori-content-preview-modal--document': !isImage && contentKind === 'document',
+        }), closable: true, title: heading, footer: null, children: _jsx("div", { className: cx('memori-content-preview-modal--body', {
                 'memori-content-preview-modal--body--image': isImage,
                 'memori-content-preview-modal--body--content': !isImage,
-            }), children: isImage && imageSrc ? (_jsx("div", { className: "memori-content-preview-modal--image-wrap", children: _jsx("img", { src: imageSrc, alt: (_a = imageAlt !== null && imageAlt !== void 0 ? imageAlt : title) !== null && _a !== void 0 ? _a : 'Preview', className: "memori-content-preview-modal--image" }) })) : (_jsx("div", { className: "memori-content-preview-modal--snippet-wrap", children: children })) }) }));
+            }), children: isImage && imageSrc ? (_jsx("div", { className: "memori-content-preview-modal--image-wrap", children: _jsx("img", { src: imageSrc, alt: imageAltText, className: "memori-content-preview-modal--image" }) })) : (_jsxs("div", { className: cx('memori-content-preview-modal--scroll-shell', {
+                    'memori-content-preview-modal--scroll-shell--cue': showScrollCue,
+                }), children: [_jsx("div", { ref: scrollRef, className: cx('memori-content-preview-modal--snippet-wrap', {
+                            'memori-content-preview-modal--snippet-wrap--document': contentKind === 'document',
+                        }), "data-testid": "content-preview-scroll-body", onScroll: updateScrollState, children: children }), showScrollCue && (_jsxs("button", { type: "button", className: "memori-content-preview-modal--scroll-cue", onClick: scrollToContinue, children: [_jsx(ChevronDown, { className: "memori-content-preview-modal--scroll-cue-icon", "aria-hidden": true }), _jsx("span", { children: t('scrollToContinueReading', {
+                                    defaultValue: 'Scroll to continue reading',
+                                }) })] }))] })) }) }));
 };
 export default ContentPreviewModal;
 //# sourceMappingURL=ContentPreviewModal.js.map

package/esm/components/ContentPreviewModal/ContentPreviewModal.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentPreviewModal.js","sourceRoot":"","sources":["../../../src/components/ContentPreviewModal/ContentPreviewModal.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,MAAM,YAAY,CAAC;AAC5B,OAAO,EAAE,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAexE,MAAM,mBAAmB,GAAiC,CAAC,EACzD,IAAI,EACJ,OAAO,EACP,KAAK,EACL,OAAO,GAAG,KAAK,EACf,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,SAAS,GACV,EAAE,EAAE;;IACH,MAAM,SAAS,GAAG,kBAAkB,EAAE,CAAC;IACvC,MAAM,KAAK,GAAG,kBAAkB,CAAC;IAEjC,OAAO,CACL,KAAC,KAAK,IACJ,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,SAAS,EACjC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EACxB,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,KAAK,EACd,iBAAiB,EAAC,uCAAuC,EACzD,SAAS,EAAE,EAAE,CAAC,8BAA8B,EAAE,SAAS,EAAE;YACvD,qCAAqC,EAAE,OAAO;SAC/C,CAAC,EACF,QAAQ,QACR,KAAK,EAAE,KAAK,EACZ,MAAM,EAAE,IAAI,YAEZ,cACE,SAAS,EAAE,EAAE,CAAC,oCAAoC,EAAE;gBAClD,2CAA2C,EAAE,OAAO;gBACpD,6CAA6C,EAAE,CAAC,OAAO;aACxD,CAAC,YAED,OAAO,IAAI,QAAQ,CAAC,CAAC,CAAC,CACrB,cAAK,SAAS,EAAC,0CAA0C,YACvD,cACE,GAAG,EAAE,QAAQ,EACb,GAAG,EAAE,MAAA,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,KAAK,mCAAI,SAAS,EACnC,SAAS,EAAC,qCAAqC,GAC/C,GACE,CACP,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,4CAA4C,YACxD,QAAQ,GACL,CACP,GACG,GACA,CACT,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"ContentPreviewModal.js","sourceRoot":"","sources":["../../../src/components/ContentPreviewModal/ContentPreviewModal.tsx"],"names":[],"mappings":"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"}

package/esm/components/ContentPreviewModal/DocumentMarkdown.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function prepareDocumentPreviewContent(content: string): string;
+type DocumentMarkdownProps = {
+    content: string;
+};
+declare const DocumentMarkdown: React.FC<DocumentMarkdownProps>;
+export default DocumentMarkdown;