@edifice.io/react 2.5.5-develop-b2school.20260116160825 → 2.5.5-develop-pedago.20260121100338

package/dist/components/Badge/Badge.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react';
-import { UserProfile } from '@edifice.io/client';
+import { IWebApp, UserProfile } from '@edifice.io/client';
 export type BadgeRef = HTMLSpanElement;
 /** Badge variant : notification */
 export type NotificationBadgeVariant = {
@@ -29,12 +29,15 @@ export type LinkBadgeVariant = {
 /**
  * Badge variant : beta.
  * Beta Badge is used to indicate that a feature is in beta phase.
- * The color prop allows to customize the badge color to match the app color.
- * Defaults to black if not provided.
+ * Beta Badge has a fixed text 'BÊTA' unless children is provided.
+ * If app is provided, the color of the Beta Badge is derived from the application colors.
+ * Example:
+ * <Badge variant={{ type: 'beta', app: myApp }} />
+ * where myApp is of type IWebApp.
  */
 export type BetaBadgeVariant = {
     type: 'beta';
-    color?: string;
+    app?: IWebApp;
 };
 export type BadgeVariants = NotificationBadgeVariant | ContentBadgeVariant | ProfileBadgeVariant | ChipBadgeVariant | LinkBadgeVariant | BetaBadgeVariant;
 export interface BadgeProps extends React.ComponentPropsWithRef<'span'> {

package/dist/components/Badge/Badge.js

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { forwardRef } from "react";
 import clsx from "clsx";
+import useEdificeIcons from "../../hooks/useEdificeIcons/useEdificeIcons.js";
 const Badge = /* @__PURE__ */ forwardRef(({
   className,
   variant = {
@@ -10,17 +11,19 @@ const Badge = /* @__PURE__ */ forwardRef(({
   children,
   ...restProps
 }, ref) => {
-  const classes = clsx("badge rounded-pill", (variant.type === "content" || variant.type === "user") && "background" in variant ? "bg-gray-200" : (variant.type === "content" || variant.type === "user") && !("background" in variant) ? "border border-0" : "", variant.type === "content" && `text-${variant.level}`, variant.type === "notification" && `badge-notification bg-${variant.level} text-light border border-0`, variant.type === "user" && `badge-profile-${variant.profile.toLowerCase()}`, variant.type === "link" && "badge-link border border-0", variant.type === "chip" && "bg-gray-200", className);
-  return /* @__PURE__ */ jsxs("span", { ref, className: classes, style: (() => {
-    if (variant.type !== "beta") return;
-    const color = variant.color ?? "#000000";
-    return {
-      borderColor: color,
-      color,
-      backgroundColor: `${color}10`
-      // the 2 last hexadecimal numbers are for opacity
-    };
-  })(), ...restProps, children: [
+  const {
+    getIconClass,
+    getBackgroundLightIconClass,
+    getBorderIconClass
+  } = useEdificeIcons();
+  let badgeColorClassName = "";
+  if (variant.type === "beta" && variant.app) {
+    const colorAppClassName = getIconClass(variant.app), backgroundLightAppClassName = getBackgroundLightIconClass(variant.app), borderAppClassName = getBorderIconClass(variant.app);
+    badgeColorClassName = `${colorAppClassName} ${backgroundLightAppClassName} ${borderAppClassName}`;
+  }
+  console.log(badgeColorClassName);
+  const classes = clsx("badge rounded-pill", (variant.type === "content" || variant.type === "user") && "background" in variant ? "bg-gray-200" : (variant.type === "content" || variant.type === "user") && !("background" in variant) ? "border border-0" : "", variant.type === "content" && `text-${variant.level}`, variant.type === "notification" && `badge-notification bg-${variant.level} text-light border border-0`, variant.type === "user" && `badge-profile-${variant.profile.toLowerCase()}`, variant.type === "link" && "badge-link border border-0", variant.type === "chip" && "bg-gray-200", variant.type === "beta" && badgeColorClassName, className);
+  return /* @__PURE__ */ jsxs("span", { ref, className: classes, ...restProps, children: [
     variant.type === "chip" && /* @__PURE__ */ jsx("div", { className: "d-flex fw-800 align-items-center", children }),
     variant.type === "beta" && (children ?? "BÊTA"),
     variant.type !== "chip" && variant.type !== "beta" && children

package/dist/components/DatePicker/DatePicker.js

@@ -16,8 +16,7 @@ const DatePicker = /* @__PURE__ */ forwardRef(({
   onChange,
   dateFormat = "DD / MM / YYYY",
   minDate,
-  maxDate,
-  ...htmlProps
+  maxDate
 }, ref) => {
   const handleChange = (date) => {
     onChange == null || onChange(date ? date.toDate() : void 0);
@@ -27,11 +26,9 @@ const DatePicker = /* @__PURE__ */ forwardRef(({
     format: dateFormat,
     minDate: minDate ? dayjs(minDate) : void 0,
     maxDate: maxDate ? dayjs(maxDate) : void 0,
-    ref,
-    // Cast necessary because AntDatePicker expects a specific type, but our API exposes only HTMLElement to avoid dependency on Ant Design-specific features.
-    ...htmlProps
+    ref
   };
-  return /* @__PURE__ */ jsx(DatePicker$1, { ...antProps, getPopupContainer: (triggerNode) => triggerNode.parentElement || document.body });
+  return /* @__PURE__ */ jsx(DatePicker$1, { ...antProps });
 });
 export {
   DatePicker as default

package/dist/components/MediaViewer/MediaViewer.d.ts

@@ -0,0 +1,17 @@
+import { MediaLibraryType } from 'src/modules/multimedia';
+export interface MediaProps {
+    name: string;
+    url: string;
+    type: MediaLibraryType;
+    mimeType?: string;
+}
+interface MediaViewerProps {
+    onClose: () => void;
+    media: MediaProps[];
+    indexMedia?: number;
+}
+declare const MediaViewer: {
+    ({ onClose, media, indexMedia }: MediaViewerProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default MediaViewer;

package/dist/components/MediaViewer/MediaViewer.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { Carousel } from "antd";
+import ToolbarZoom from "./ToolbarZoom.js";
+import useZoom from "../../hooks/useZoom/useZoom.js";
+import ToolbarViewer from "./ToolbarViewer.js";
+import { useState, useEffect } from "react";
+import { MediaWrapper } from "./MediaWrapper.js";
+import Flex from "../Flex/Flex.js";
+const MediaViewer = ({
+  onClose,
+  media,
+  indexMedia = 0
+}) => {
+  const {
+    zoomIn,
+    zoomOut,
+    setScale,
+    scale
+  } = useZoom(1), [currentIndex, setCurrentIndex] = useState(indexMedia);
+  return useEffect(() => {
+    setCurrentIndex(indexMedia);
+  }, [indexMedia]), /* @__PURE__ */ jsxs("div", { className: "media-viewer", children: [
+    /* @__PURE__ */ jsx(ToolbarViewer, { onClose, mediaUrl: media[currentIndex].url, mediaName: media[currentIndex].name, nbMedia: media.length, currentIndex }),
+    /* @__PURE__ */ jsx(Flex, { className: "media-viewer-inner-overlay", onClick: onClose, children: /* @__PURE__ */ jsxs("div", { className: "media-viewer-inner", onClick: (e) => e.stopPropagation(), children: [
+      /* @__PURE__ */ jsx(Carousel, { initialSlide: indexMedia, dots: !1, arrows: !0, draggable: !0, infinite: !1, afterChange: (current) => {
+        setCurrentIndex(current);
+      }, beforeChange: () => {
+        setScale(1);
+      }, children: media.map((item, index) => /* @__PURE__ */ jsx("div", { className: "viewer-slide", children: /* @__PURE__ */ jsx(MediaWrapper, { mediaUrl: item.url, mediaType: item.type, mimeType: item.mimeType, scale: index === currentIndex ? scale : 1 }) }, index)) }),
+      /* @__PURE__ */ jsx(ToolbarZoom, { zoomIn, zoomOut })
+    ] }) })
+  ] });
+};
+export {
+  MediaViewer as default
+};

package/dist/components/MediaViewer/MediaWrapper.d.ts

@@ -0,0 +1,7 @@
+import { MediaLibraryType } from 'src/modules/multimedia';
+export declare const MediaWrapper: ({ mediaUrl, mediaType, mimeType, scale, }: {
+    mediaUrl: string;
+    mediaType: MediaLibraryType;
+    mimeType?: string;
+    scale?: number;
+}) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/MediaViewer/MediaWrapper.js

@@ -0,0 +1,72 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import SvgIconTextPage from "../../modules/icons/components/IconTextPage.js";
+import SvgIconLink from "../../modules/icons/components/IconLink.js";
+import SvgIconHeadphone from "../../modules/icons/components/IconHeadphone.js";
+import SvgIconDownload from "../../modules/icons/components/IconDownload.js";
+import SvgIconExternalLink from "../../modules/icons/components/IconExternalLink.js";
+import { useTranslation } from "react-i18next";
+import PdfViewer from "./PdfViewer.js";
+import Flex from "../Flex/Flex.js";
+import Button from "../Button/Button.js";
+import Image from "../Image/Image.js";
+const MediaWrapper = ({
+  mediaUrl,
+  mediaType,
+  mimeType,
+  scale
+}) => {
+  const {
+    t
+  } = useTranslation(), imageMediaStyle = {
+    flex: "none",
+    height: "100%",
+    transform: `scale(${scale})`,
+    maxHeight: "70vh"
+  }, audioStyle = {
+    width: "100%",
+    maxWidth: "500px"
+  }, videoMediaStyle = {
+    height: "100%",
+    objectFit: "cover",
+    transform: `scale(${scale})`
+  }, iframeMediaStyle = {
+    width: "100%",
+    height: "600px",
+    maxWidth: "900px",
+    transform: `scale(${scale})`
+  };
+  switch (mediaType) {
+    case "image":
+      return /* @__PURE__ */ jsx(Image, { className: "rounded-2", src: mediaUrl, alt: mediaType, width: "100%", objectFit: "contain", style: imageMediaStyle });
+    case "audio":
+      return /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", style: {
+        height: "200px"
+      }, children: [
+        /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", className: "bg-gray-300 h-100 w-100 rounded-2 mb-8", style: {
+          maxWidth: "500px"
+        }, children: /* @__PURE__ */ jsx(SvgIconHeadphone, { width: 40, height: 40, color: "#B0B0B0" }) }),
+        /* @__PURE__ */ jsx("audio", { src: mediaUrl, className: "media-audio", controls: !0, style: audioStyle })
+      ] });
+    case "video":
+      return /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx("video", { src: mediaUrl, controls: !0, className: "media-video", style: videoMediaStyle }) });
+    case "embedder":
+      return /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", children: /* @__PURE__ */ jsx("iframe", { title: "Embedded media content", src: mediaUrl, className: "media-video", style: iframeMediaStyle }) });
+    case "hyperlink":
+    case "attachment":
+      return mimeType && mimeType === "application/pdf" ? /* @__PURE__ */ jsx(PdfViewer, { mediaUrl, scale }) : /* @__PURE__ */ jsxs(Flex, { direction: "column", align: "center", children: [
+        /* @__PURE__ */ jsx(Flex, { justify: "center", align: "center", className: "bg-gray-300 w-100 rounded-2 mb-8", style: {
+          maxWidth: "500px",
+          height: "200px"
+        }, children: mediaType === "hyperlink" ? /* @__PURE__ */ jsx(SvgIconLink, { width: 40, height: 40, color: "#B0B0B0" }) : /* @__PURE__ */ jsx(SvgIconTextPage, { width: 40, height: 40, color: "#B0B0B0" }) }),
+        /* @__PURE__ */ jsx("a", { className: "w-100 d-flex justify-content-center", href: mediaUrl, download: mediaType !== "hyperlink", target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(Button, { className: "w-100", style: {
+          height: "40px",
+          maxWidth: "500px"
+        }, leftIcon: mediaType === "hyperlink" ? /* @__PURE__ */ jsx(SvgIconExternalLink, {}) : /* @__PURE__ */ jsx(SvgIconDownload, {}), color: "tertiary", children: t(mediaType === "hyperlink" ? "mediaWrapper.attachment.open" : "mediaWrapper.attachment.download") }) })
+      ] });
+    default:
+      return null;
+  }
+};
+export {
+  MediaWrapper
+};

package/dist/components/MediaViewer/PdfViewer.d.ts

@@ -0,0 +1,4 @@
+export default function PdfViewer({ mediaUrl, scale, }: {
+    mediaUrl: string;
+    scale?: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaViewer/PdfViewer.js

@@ -0,0 +1,26 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef } from "react";
+import { Document, Page } from "react-pdf";
+import LoadingScreen from "../LoadingScreen/LoadingScreen.js";
+function PdfViewer({
+  mediaUrl,
+  scale
+}) {
+  const [numPages, setNumPages] = useState(null), pagesRef = useRef([]), onDocumentLoadSuccess = ({
+    numPages: numPages2
+  }) => {
+    setNumPages(numPages2);
+  };
+  return /* @__PURE__ */ jsx("div", { style: {
+    width: `calc(600px * ${scale})`,
+    height: "calc(100vh - 52px)",
+    overflowY: "auto",
+    marginTop: "20px"
+  }, children: /* @__PURE__ */ jsx(Document, { file: mediaUrl, onLoadSuccess: onDocumentLoadSuccess, loading: /* @__PURE__ */ jsx(LoadingScreen, {}), children: Array.from(new Array(numPages), (_, index) => /* @__PURE__ */ jsx("div", { ref: (el) => pagesRef.current[index] = el, style: {
+    marginBottom: 32,
+    transformOrigin: "top center"
+  }, children: /* @__PURE__ */ jsx(Page, { className: "pdf-page", pageNumber: index + 1, renderTextLayer: !1, renderAnnotationLayer: !1, width: 600 * (scale ?? 1), loading: /* @__PURE__ */ jsx(LoadingScreen, {}) }) }, index)) }) });
+}
+export {
+  PdfViewer as default
+};

package/dist/components/MediaViewer/ToolbarViewer.d.ts

@@ -0,0 +1,7 @@
+export default function ToolbarViewer({ onClose, mediaName, mediaUrl, nbMedia, currentIndex, }: {
+    onClose: () => void;
+    mediaName: string;
+    nbMedia?: number;
+    mediaUrl?: string;
+    currentIndex: number;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaViewer/ToolbarViewer.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
+import SvgIconClose from "../../modules/icons/components/IconClose.js";
+import SvgIconDownload from "../../modules/icons/components/IconDownload.js";
+import SvgIconExternalLink from "../../modules/icons/components/IconExternalLink.js";
+import Flex from "../Flex/Flex.js";
+import IconButton from "../Button/IconButton.js";
+import SmartEllipsis from "../SmartEllipsis/SmartEllipsis.js";
+function ToolbarViewer({
+  onClose,
+  mediaName,
+  mediaUrl,
+  nbMedia,
+  currentIndex
+}) {
+  return useEffect(() => {
+    const handleKeyDown = (e) => {
+      e.key === "Escape" && onClose();
+    };
+    return window.addEventListener("keydown", handleKeyDown), () => {
+      window.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [onClose]), /* @__PURE__ */ jsxs(Flex, { className: "media-viewer-toolbar p-8", align: "center", children: [
+    /* @__PURE__ */ jsxs(Flex, { gap: "8", align: "center", style: {
+      minWidth: "50%"
+    }, children: [
+      /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconClose, { color: "#fff" }), onClick: onClose, variant: "ghost" }),
+      /* @__PURE__ */ jsx(SmartEllipsis, { text: mediaName })
+    ] }),
+    /* @__PURE__ */ jsxs(Flex, { gap: "8", align: "center", justify: "between", className: "w-100", children: [
+      nbMedia ? /* @__PURE__ */ jsx("p", { children: `${currentIndex + 1}/${nbMedia} ` }) : /* @__PURE__ */ jsx("p", { children: `${currentIndex + 1}` }),
+      mediaUrl && /* @__PURE__ */ jsxs(Flex, { className: "ms-8", gap: "8", align: "center", children: [
+        /* @__PURE__ */ jsx("a", { href: mediaUrl, download: !0, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconDownload, { color: "#fff" }), variant: "ghost" }) }),
+        /* @__PURE__ */ jsx("a", { href: mediaUrl, target: "_blank", rel: "noopener noreferrer", children: /* @__PURE__ */ jsx(IconButton, { icon: /* @__PURE__ */ jsx(SvgIconExternalLink, { color: "#fff" }), variant: "ghost" }) })
+      ] })
+    ] })
+  ] });
+}
+export {
+  ToolbarViewer as default
+};

package/dist/components/MediaViewer/ToolbarZoom.d.ts

@@ -0,0 +1,4 @@
+export default function ToolbarZoom({ zoomIn, zoomOut, }: {
+    zoomIn: () => void;
+    zoomOut: () => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/MediaViewer/ToolbarZoom.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import SvgIconMinus from "../../modules/icons/components/IconMinus.js";
+import SvgIconPlus from "../../modules/icons/components/IconPlus.js";
+import SvgIconZoomIn from "../../modules/icons/components/IconZoomIn.js";
+import Flex from "../Flex/Flex.js";
+import IconButton from "../Button/IconButton.js";
+function ToolbarZoom({
+  zoomIn,
+  zoomOut
+}) {
+  return /* @__PURE__ */ jsx(Flex, { justify: "center", className: "media-viewer-toolbar-zoom-container", children: /* @__PURE__ */ jsxs(Flex, { gap: "4", className: "p-12 media-viewer-toolbar-zoom", align: "center", children: [
+    /* @__PURE__ */ jsx(IconButton, { variant: "ghost", icon: /* @__PURE__ */ jsx(SvgIconMinus, { color: "#fff" }), onClick: zoomOut }),
+    /* @__PURE__ */ jsx(SvgIconZoomIn, { color: "#fff", className: "m-4" }),
+    /* @__PURE__ */ jsx(IconButton, { variant: "ghost", icon: /* @__PURE__ */ jsx(SvgIconPlus, { color: "#fff" }), onClick: zoomIn })
+  ] }) });
+}
+export {
+  ToolbarZoom as default
+};

package/dist/components/MediaViewer/index.d.ts

@@ -0,0 +1,2 @@
+export * from './MediaViewer';
+export { default as MediaViewer } from './MediaViewer';

package/dist/components/Modal/Modal.d.ts

@@ -5,10 +5,6 @@ export interface ModalProps {
      * Modal id (useful when multiple modal on the same page)
      */
     id: string;
-    /**
-     * Modal testid
-     */
-    ['data-testid']?: string;
     /**
      * Is Modal Open
      */

package/dist/components/Modal/Modal.js

@@ -10,18 +10,17 @@ import ModalSubtitle from "./ModalSubtitle.js";
 import useClickOutside from "../../hooks/useClickOutside/useClickOutside.js";
 import useTrapFocus from "../../hooks/useTrapFocus/useTrapFocus.js";
 import useKeyPress from "../../hooks/useKeyPress/useKeyPress.js";
-const Root = /* @__PURE__ */ forwardRef(({
-  id,
-  isOpen,
-  onModalClose,
-  size = "md",
-  viewport = !1,
-  scrollable = !1,
-  focusId,
-  children,
-  ...otherDivProps
-}, ref) => {
-  const ariaLabelId = `aria_label_${id}`, ariaDescriptionId = `aria_desc_${id}`, modalRef = useClickOutside(onModalClose), trapRef = useTrapFocus(isOpen);
+const Root = /* @__PURE__ */ forwardRef((props, ref) => {
+  const {
+    id,
+    isOpen,
+    onModalClose,
+    size = "md",
+    viewport = !1,
+    scrollable = !1,
+    focusId,
+    children
+  } = props, ariaLabelId = `aria_label_${id}`, ariaDescriptionId = `aria_desc_${id}`, modalRef = useClickOutside(onModalClose), trapRef = useTrapFocus(isOpen);
   useKeyPress(onModalClose, ["Escape"]), useEffect(() => {
     if (isOpen && (document.body.style.overflow = "hidden", focusId)) {
       const elem = document.getElementById(focusId);
@@ -55,7 +54,7 @@ const Root = /* @__PURE__ */ forwardRef(({
     }
   });
   return /* @__PURE__ */ jsx(ModalContext.Provider, { value: modalContextValue, children: transition((style, isOpen2) => /* @__PURE__ */ jsxs(Fragment, { children: [
-    isOpen2 && /* @__PURE__ */ jsx(animated.div, { id, ref, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, className: modalClasses, style, tabIndex: -1, ...otherDivProps, children: /* @__PURE__ */ jsx("div", { id: `${id}_ref`, ref: (node) => {
+    isOpen2 && /* @__PURE__ */ jsx(animated.div, { id, ref, role: "dialog", "aria-modal": "true", "aria-labelledby": ariaLabelId, "aria-describedby": ariaDescriptionId, className: modalClasses, style, tabIndex: -1, children: /* @__PURE__ */ jsx("div", { id: `${id}_ref`, ref: (node) => {
       modalRef.current = node, isOpen2 && (trapRef.current = node);
     }, className: dialogClasses, children: /* @__PURE__ */ jsx("div", { className: "modal-content", children }) }) }),
     isOpen2 && /* @__PURE__ */ jsx(animated.div, { className: "modal-backdrop fade show", style: {

package/dist/components/SmartEllipsis/SmartEllipsis.d.ts

@@ -0,0 +1,5 @@
+interface SmartEllipsisProps {
+    text: string;
+}
+export default function SmartEllipsis({ text }: SmartEllipsisProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/SmartEllipsis/SmartEllipsis.js

@@ -0,0 +1,21 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+function SmartEllipsis({
+  text
+}) {
+  const ref = useRef(null), [displayText, setDisplayText] = useState(text), updateText = () => {
+    const el = ref.current;
+    if (el)
+      if (el.textContent = text, el.scrollWidth > el.clientWidth) {
+        let startText = text.slice(0, Math.ceil(text.length / 2)), endText = text.slice(Math.ceil(text.length / 2));
+        for (; startText.length > 1 && endText.length > 1 && el.scrollWidth > el.clientWidth; )
+          startText = startText.slice(0, -1), endText = endText.slice(1), el.textContent = `${startText}…${endText}`;
+        setDisplayText(el.textContent);
+      } else
+        setDisplayText(text);
+  };
+  return useEffect(() => (updateText(), window.addEventListener("resize", updateText), () => window.removeEventListener("resize", updateText)), [text]), /* @__PURE__ */ jsx("span", { ref, className: "smart-ellipsis", children: displayText });
+}
+export {
+  SmartEllipsis as default
+};

package/dist/components/SmartEllipsis/index.d.ts

@@ -0,0 +1,2 @@
+export * from './SmartEllipsis';
+export { default as SmartEllipsis } from './SmartEllipsis';

package/dist/components/index.d.ts

@@ -29,6 +29,7 @@ export * from './List';
 export * from './Loading';
 export * from './LoadingScreen';
 export * from './Logo';
+export * from './MediaViewer';
 export * from './Menu';
 export * from './Modal';
 export * from './Popover';

package/dist/hooks/useEdificeIcons/useEdificeIcons.d.ts

@@ -3,6 +3,7 @@ export default function useEdificeIcons(): {
     getIconClass: (app: IWebApp | string) => string;
     getBackgroundIconClass: (app: IWebApp | string) => string;
     getBackgroundLightIconClass: (app: IWebApp | string) => string;
+    getBorderIconClass: (app: IWebApp | string) => string;
     getIconCode: (app: IWebApp | string | undefined) => string;
     getWidgetIconClass: (widget: IWidget) => string;
     isIconUrl: (icon: string) => string | boolean;

package/dist/hooks/useEdificeIcons/useEdificeIcons.js

@@ -78,6 +78,10 @@ function useEdificeIcons() {
     const appCode = getIconCode(app);
     return appCode ? `bg-light-${appCode}` : "bg-light-placeholder";
   }
+  function getBorderIconClass(app) {
+    const appCode = getIconCode(app);
+    return appCode ? `border-app-${appCode}` : "border-app-placeholder";
+  }
   function getWidgetIconClass(widget) {
     return iconOfWidget[widget.platformConf.name];
   }
@@ -85,6 +89,7 @@ function useEdificeIcons() {
     getIconClass,
     getBackgroundIconClass,
     getBackgroundLightIconClass,
+    getBorderIconClass,
     getIconCode,
     getWidgetIconClass,
     isIconUrl

package/dist/hooks/useZoom/index.d.ts

@@ -0,0 +1 @@
+export { default as useZoom } from './useZoom';

package/dist/hooks/useZoom/useZoom.d.ts

@@ -0,0 +1,7 @@
+export default function useZoom(initialScale?: number, maxScale?: number, minScale?: number, step?: number): {
+    scale: number;
+    zoomIn: () => void;
+    zoomOut: () => void;
+    resetZoom: () => void;
+    setScale: import('react').Dispatch<import('react').SetStateAction<number>>;
+};

package/dist/hooks/useZoom/useZoom.js

@@ -0,0 +1,14 @@
+import { useState } from "react";
+function useZoom(initialScale = 1, maxScale = 2, minScale = 0.5, step = 0.5) {
+  const [scale, setScale] = useState(initialScale);
+  return {
+    scale,
+    zoomIn: () => setScale((prev) => Math.min(prev + step, maxScale)),
+    zoomOut: () => setScale((prev) => Math.max(prev - step, minScale)),
+    resetZoom: () => setScale(initialScale),
+    setScale
+  };
+}
+export {
+  useZoom as default
+};

package/dist/index.js

@@ -30,85 +30,86 @@ import { default as default30 } from "./components/Label/Label.js";
 import { default as default31 } from "./components/Loading/Loading.js";
 import { default as default32 } from "./components/LoadingScreen/LoadingScreen.js";
 import { default as default33 } from "./components/Logo/Logo.js";
-import { default as default34 } from "./components/Modal/Modal.js";
-import { default as default35 } from "./components/PreventPropagation/PreventPropagation.js";
-import { default as default36 } from "./components/Radio/Radio.js";
-import { default as default37 } from "./components/RadioCard/RadioCard.js";
-import { default as default38 } from "./components/SearchBar/SearchBar.js";
-import { default as default39 } from "./components/SegmentedControl/SegmentedControl.js";
-import { default as default40 } from "./components/Select/Select.js";
-import { default as default41 } from "./components/Skeleton/ButtonSkeleton.js";
-import { default as default42 } from "./components/Skeleton/TextSkeleton.js";
-import { default as default43 } from "./components/StackedGroup/StackedGroup.js";
-import { default as default44 } from "./components/Stepper/Stepper.js";
-import { default as default45 } from "./components/Switch/Switch.js";
-import { default as default46 } from "./components/Table/components/Table.js";
-import { default as default47 } from "./components/TextArea/TextArea.js";
-import { default as default48 } from "./components/Tooltip/Tooltip.js";
+import { default as default34 } from "./components/MediaViewer/MediaViewer.js";
+import { default as default35 } from "./components/Modal/Modal.js";
+import { default as default36 } from "./components/PreventPropagation/PreventPropagation.js";
+import { default as default37 } from "./components/Radio/Radio.js";
+import { default as default38 } from "./components/RadioCard/RadioCard.js";
+import { default as default39 } from "./components/SearchBar/SearchBar.js";
+import { default as default40 } from "./components/SegmentedControl/SegmentedControl.js";
+import { default as default41 } from "./components/Select/Select.js";
+import { default as default42 } from "./components/Skeleton/ButtonSkeleton.js";
+import { default as default43 } from "./components/Skeleton/TextSkeleton.js";
+import { default as default44 } from "./components/StackedGroup/StackedGroup.js";
+import { default as default45 } from "./components/Stepper/Stepper.js";
+import { default as default46 } from "./components/Switch/Switch.js";
+import { default as default47 } from "./components/Table/components/Table.js";
+import { default as default48 } from "./components/TextArea/TextArea.js";
+import { default as default49 } from "./components/Tooltip/Tooltip.js";
 import { DndTree } from "./components/Tree/components/DndTree.js";
-import { default as default49 } from "./components/Tree/components/SortableTree.js";
-import { default as default50 } from "./components/Tree/components/Tree.js";
-import { default as default51 } from "./components/TreeView/TreeView.js";
-import { default as default52 } from "./components/VisuallyHidden/VisuallyHidden.js";
-import { default as default53 } from "./hooks/useBookmark/useBookmark.js";
-import { default as default54 } from "./hooks/useBreakpoint/useBreakpoint.js";
-import { default as default55 } from "./hooks/useBrowserInfo/useBrowserInfo.js";
-import { default as default56 } from "./hooks/useCantoo/useCantoo.js";
-import { default as default57 } from "./hooks/useClickOutside/useClickOutside.js";
-import { default as default58 } from "./hooks/useConversation/useConversation.js";
-import { default as default59 } from "./hooks/useDate/useDate.js";
-import { default as default60 } from "./hooks/useDebounce/useDebounce.js";
-import { default as default61 } from "./hooks/useDirectory/useDirectory.js";
-import { default as default62 } from "./hooks/useDropdown/useDropdown.js";
-import { default as default63 } from "./hooks/useDropzone/useDropzone.js";
-import { default as default64 } from "./hooks/useEdificeIcons/useEdificeIcons.js";
-import { default as default65 } from "./hooks/useHasWorkflow/useHasWorkflow.js";
-import { default as default66 } from "./hooks/useHover/useHover.js";
+import { default as default50 } from "./components/Tree/components/SortableTree.js";
+import { default as default51 } from "./components/Tree/components/Tree.js";
+import { default as default52 } from "./components/TreeView/TreeView.js";
+import { default as default53 } from "./components/VisuallyHidden/VisuallyHidden.js";
+import { default as default54 } from "./hooks/useBookmark/useBookmark.js";
+import { default as default55 } from "./hooks/useBreakpoint/useBreakpoint.js";
+import { default as default56 } from "./hooks/useBrowserInfo/useBrowserInfo.js";
+import { default as default57 } from "./hooks/useCantoo/useCantoo.js";
+import { default as default58 } from "./hooks/useClickOutside/useClickOutside.js";
+import { default as default59 } from "./hooks/useConversation/useConversation.js";
+import { default as default60 } from "./hooks/useDate/useDate.js";
+import { default as default61 } from "./hooks/useDebounce/useDebounce.js";
+import { default as default62 } from "./hooks/useDirectory/useDirectory.js";
+import { default as default63 } from "./hooks/useDropdown/useDropdown.js";
+import { default as default64 } from "./hooks/useDropzone/useDropzone.js";
+import { default as default65 } from "./hooks/useEdificeIcons/useEdificeIcons.js";
+import { default as default66 } from "./hooks/useHasWorkflow/useHasWorkflow.js";
+import { default as default67 } from "./hooks/useHover/useHover.js";
 import { useHttpErrorToast } from "./hooks/useHttpErrorToast/useHttpErrorToast.js";
-import { default as default67 } from "./hooks/useImage/useImage.js";
-import { default as default68 } from "./hooks/useInfiniteScroll/useInfiniteScroll.js";
-import { default as default69 } from "./hooks/useIsAdml/useIsAdml.js";
-import { default as default70 } from "./hooks/useIsAdmc/useIsAdmc.js";
-import { default as default71 } from "./hooks/useIsAdmlcOrAdmc/useIsAdmlcOrAdmc.js";
-import { default as default72 } from "./hooks/useKeyPress/useKeyPress.js";
-import { default as default73 } from "./hooks/useLibraryUrl/useLibraryUrl.js";
-import { default as default74 } from "./hooks/useMediaLibrary/useMediaLibrary.js";
-import { default as default75 } from "./hooks/useScrollToTop/useScrollToTop.js";
-import { default as default76 } from "./hooks/useTitle/useTitle.js";
-import { default as default77 } from "./hooks/useToast/useToast.js";
-import { default as default78 } from "./hooks/useToggle/useToggle.js";
-import { default as default79 } from "./hooks/useTrapFocus/useTrapFocus.js";
-import { default as default80 } from "./hooks/useTrashedResource/useTrashedResource.js";
-import { default as default81 } from "./hooks/useUpload/useUpload.js";
-import { default as default82 } from "./hooks/useUploadFiles/useUploadFiles.js";
-import { default as default83 } from "./hooks/useUser/useUser.js";
-import { default as default84 } from "./hooks/useWorkspaceFile/useWorkspaceFile.js";
-import { default as default85 } from "./hooks/useWorkspaceFolders/useWorkspaceFolders.js";
-import { WORKSPACE_SHARED_FOLDER_ID, WORKSPACE_USER_FOLDER_ID, default as default86 } from "./hooks/useWorkspaceFolders/useWorkspaceFoldersTree.js";
-import { default as default87 } from "./hooks/useWorkspaceSearch/useWorkspaceSearch.js";
-import { default as default88 } from "./hooks/useXitiTrackPageLoad/useXitiTrackPageLoad.js";
-import { default as default89 } from "./hooks/useZendeskGuide/useZendeskGuide.js";
-import { default as default90 } from "./modules/modals/ConfirmModal/ConfirmModal.js";
-import { default as default91 } from "./modules/modals/OnboardingModal/OnboardingModal.js";
-import { default as default92 } from "./modules/modals/PublishModal/PublishModal.js";
-import { default as default93 } from "./modules/modals/ResourceModal/apps/BlogPublic.js";
-import { default as default94 } from "./modules/modals/ResourceModal/hooks/useUpdateMutation.js";
-import { default as default95 } from "./modules/modals/ShareModal/apps/ShareBlog.js";
-import { default as default96 } from "./modules/modals/ShareModal/hooks/useShareMutation.js";
-import { default as default97 } from "./modules/modals/ShareModal/ShareModal.js";
-import { default as default98 } from "./modules/modals/ShareModal/ShareResources.js";
-import { default as default99 } from "./modules/multimedia/AudioRecorder/AudioRecorder.js";
-import { default as default100 } from "./modules/multimedia/Embed/Embed.js";
-import { default as default101 } from "./modules/multimedia/ImageEditor/components/ImageEditor.js";
-import { default as default102 } from "./modules/multimedia/ImagePicker/ImagePicker.js";
-import { default as default103 } from "./modules/multimedia/FileCard/FileCard.js";
-import { default as default104 } from "./modules/multimedia/MediaLibrary/MediaLibrary.js";
-import { default as default105 } from "./modules/multimedia/UploadFiles/UploadFiles.js";
-import { default as default106 } from "./modules/multimedia/UploadCard/UploadCard.js";
-import { default as default107 } from "./modules/multimedia/VideoEmbed/VideoEmbed.js";
-import { default as default108 } from "./modules/multimedia/VideoRecorder/VideoRecorder.js";
-import { default as default109 } from "./modules/multimedia/Workspace/Workspace.js";
-import { default as default110 } from "./modules/multimedia/WorkspaceFolders/WorkspaceFolders.js";
+import { default as default68 } from "./hooks/useImage/useImage.js";
+import { default as default69 } from "./hooks/useInfiniteScroll/useInfiniteScroll.js";
+import { default as default70 } from "./hooks/useIsAdml/useIsAdml.js";
+import { default as default71 } from "./hooks/useIsAdmc/useIsAdmc.js";
+import { default as default72 } from "./hooks/useIsAdmlcOrAdmc/useIsAdmlcOrAdmc.js";
+import { default as default73 } from "./hooks/useKeyPress/useKeyPress.js";
+import { default as default74 } from "./hooks/useLibraryUrl/useLibraryUrl.js";
+import { default as default75 } from "./hooks/useMediaLibrary/useMediaLibrary.js";
+import { default as default76 } from "./hooks/useScrollToTop/useScrollToTop.js";
+import { default as default77 } from "./hooks/useTitle/useTitle.js";
+import { default as default78 } from "./hooks/useToast/useToast.js";
+import { default as default79 } from "./hooks/useToggle/useToggle.js";
+import { default as default80 } from "./hooks/useTrapFocus/useTrapFocus.js";
+import { default as default81 } from "./hooks/useTrashedResource/useTrashedResource.js";
+import { default as default82 } from "./hooks/useUpload/useUpload.js";
+import { default as default83 } from "./hooks/useUploadFiles/useUploadFiles.js";
+import { default as default84 } from "./hooks/useUser/useUser.js";
+import { default as default85 } from "./hooks/useWorkspaceFile/useWorkspaceFile.js";
+import { default as default86 } from "./hooks/useWorkspaceFolders/useWorkspaceFolders.js";
+import { WORKSPACE_SHARED_FOLDER_ID, WORKSPACE_USER_FOLDER_ID, default as default87 } from "./hooks/useWorkspaceFolders/useWorkspaceFoldersTree.js";
+import { default as default88 } from "./hooks/useWorkspaceSearch/useWorkspaceSearch.js";
+import { default as default89 } from "./hooks/useXitiTrackPageLoad/useXitiTrackPageLoad.js";
+import { default as default90 } from "./hooks/useZendeskGuide/useZendeskGuide.js";
+import { default as default91 } from "./modules/modals/ConfirmModal/ConfirmModal.js";
+import { default as default92 } from "./modules/modals/OnboardingModal/OnboardingModal.js";
+import { default as default93 } from "./modules/modals/PublishModal/PublishModal.js";
+import { default as default94 } from "./modules/modals/ResourceModal/apps/BlogPublic.js";
+import { default as default95 } from "./modules/modals/ResourceModal/hooks/useUpdateMutation.js";
+import { default as default96 } from "./modules/modals/ShareModal/apps/ShareBlog.js";
+import { default as default97 } from "./modules/modals/ShareModal/hooks/useShareMutation.js";
+import { default as default98 } from "./modules/modals/ShareModal/ShareModal.js";
+import { default as default99 } from "./modules/modals/ShareModal/ShareResources.js";
+import { default as default100 } from "./modules/multimedia/AudioRecorder/AudioRecorder.js";
+import { default as default101 } from "./modules/multimedia/Embed/Embed.js";
+import { default as default102 } from "./modules/multimedia/ImageEditor/components/ImageEditor.js";
+import { default as default103 } from "./modules/multimedia/ImagePicker/ImagePicker.js";
+import { default as default104 } from "./modules/multimedia/FileCard/FileCard.js";
+import { default as default105 } from "./modules/multimedia/MediaLibrary/MediaLibrary.js";
+import { default as default106 } from "./modules/multimedia/UploadFiles/UploadFiles.js";
+import { default as default107 } from "./modules/multimedia/UploadCard/UploadCard.js";
+import { default as default108 } from "./modules/multimedia/VideoEmbed/VideoEmbed.js";
+import { default as default109 } from "./modules/multimedia/VideoRecorder/VideoRecorder.js";
+import { default as default110 } from "./modules/multimedia/Workspace/Workspace.js";
+import { default as default111 } from "./modules/multimedia/WorkspaceFolders/WorkspaceFolders.js";
 import { AccessiblePalette, DefaultPalette } from "./components/ColorPicker/ColorPalette.js";
 import { DropzoneContext, useDropzoneContext } from "./components/Dropzone/DropzoneContext.js";
 import { Column, Grid } from "./components/Grid/Grid.js";
@@ -148,21 +149,21 @@ export {
   default4 as AppHeader,
   default5 as AppIcon,
   default6 as Attachment,
-  default99 as AudioRecorder,
+  default100 as AudioRecorder,
   default7 as Avatar,
   default8 as AvatarGroup,
   default9 as Badge,
-  default93 as BlogPublic,
+  default94 as BlogPublic,
   default10 as Breadcrumb,
   default11 as Button,
-  default41 as ButtonSkeleton,
+  default42 as ButtonSkeleton,
   default14 as Card,
   default15 as Checkbox,
   default16 as ColorPicker,
   default17 as ColorPickerItem,
   Column,
   default18 as Combobox,
-  default90 as ConfirmModal,
+  default91 as ConfirmModal,
   default19 as DatePicker,
   DefaultPalette,
   default20 as Divider,
@@ -174,10 +175,10 @@ export {
   EdificeClientProvider,
   EdificeThemeContext,
   EdificeThemeProvider,
-  default100 as Embed,
+  default101 as Embed,
   default23 as EmptyScreen,
   ExternalLinker,
-  default103 as FileCard,
+  default104 as FileCard,
   default24 as Flex,
   default26 as FormControl,
   default25 as FormText,
@@ -185,8 +186,8 @@ export {
   default27 as Heading,
   default12 as IconButton,
   default28 as Image,
-  default101 as ImageEditor,
-  default102 as ImagePicker,
+  default102 as ImageEditor,
+  default103 as ImagePicker,
   default29 as Input,
   InternalLinker,
   default30 as Label,
@@ -195,51 +196,52 @@ export {
   default31 as Loading,
   default32 as LoadingScreen,
   default33 as Logo,
-  default104 as MediaLibrary,
+  default105 as MediaLibrary,
+  default34 as MediaViewer,
   Menu,
   MockedProvider,
-  default34 as Modal,
-  default91 as OnboardingModal,
+  default35 as Modal,
+  default92 as OnboardingModal,
   Popover,
   PopoverBody,
   PopoverFooter,
   PopoverHeader,
-  default35 as PreventPropagation,
-  default92 as PublishModal,
-  default36 as Radio,
-  default37 as RadioCard,
+  default36 as PreventPropagation,
+  default93 as PublishModal,
+  default37 as Radio,
+  default38 as RadioCard,
   ResourceModal,
-  default38 as SearchBar,
+  default39 as SearchBar,
   default13 as SearchButton,
-  default39 as SegmentedControl,
-  default40 as Select,
-  default95 as ShareBlog,
-  default97 as ShareModal,
-  default98 as ShareResources,
-  default49 as SortableTree,
-  default43 as StackedGroup,
-  default44 as Stepper,
-  default45 as Switch,
-  default46 as Table,
+  default40 as SegmentedControl,
+  default41 as Select,
+  default96 as ShareBlog,
+  default98 as ShareModal,
+  default99 as ShareResources,
+  default50 as SortableTree,
+  default44 as StackedGroup,
+  default45 as Stepper,
+  default46 as Switch,
+  default47 as Table,
   Tabs,
-  default47 as TextArea,
-  default42 as TextSkeleton,
+  default48 as TextArea,
+  default43 as TextSkeleton,
   Toolbar,
-  default48 as Tooltip,
-  default50 as Tree,
+  default49 as Tooltip,
+  default51 as Tree,
   TreeNode,
   TreeNodeFolderWrapper,
-  default51 as TreeView,
+  default52 as TreeView,
   Upload,
-  default106 as UploadCard,
-  default105 as UploadFiles,
-  default107 as VideoEmbed,
-  default108 as VideoRecorder,
-  default52 as VisuallyHidden,
+  default107 as UploadCard,
+  default106 as UploadFiles,
+  default108 as VideoEmbed,
+  default109 as VideoRecorder,
+  default53 as VisuallyHidden,
   WORKSPACE_SHARED_FOLDER_ID,
   WORKSPACE_USER_FOLDER_ID,
-  default109 as Workspace,
-  default110 as WorkspaceFolders,
+  default110 as Workspace,
+  default111 as WorkspaceFolders,
   addNode,
   arrayUnique,
   buildTree,
@@ -268,51 +270,51 @@ export {
   setRef,
   updateNode,
   updateParentIds,
-  default53 as useBookmark,
-  default54 as useBreakpoint,
-  default55 as useBrowserInfo,
-  default56 as useCantoo,
+  default54 as useBookmark,
+  default55 as useBreakpoint,
+  default56 as useBrowserInfo,
+  default57 as useCantoo,
   useCheckable,
-  default57 as useClickOutside,
-  default58 as useConversation,
-  default59 as useDate,
-  default60 as useDebounce,
-  default61 as useDirectory,
-  default62 as useDropdown,
-  default63 as useDropzone,
+  default58 as useClickOutside,
+  default59 as useConversation,
+  default60 as useDate,
+  default61 as useDebounce,
+  default62 as useDirectory,
+  default63 as useDropdown,
+  default64 as useDropzone,
   useDropzoneContext,
   useEdificeClient,
-  default64 as useEdificeIcons,
+  default65 as useEdificeIcons,
   useEdificeTheme,
-  default65 as useHasWorkflow,
-  default66 as useHover,
+  default66 as useHasWorkflow,
+  default67 as useHover,
   useHttpErrorToast,
-  default67 as useImage,
-  default68 as useInfiniteScroll,
-  default70 as useIsAdmc,
-  default69 as useIsAdml,
-  default71 as useIsAdmlcOrAdmc,
-  default72 as useKeyPress,
-  default73 as useLibraryUrl,
-  default74 as useMediaLibrary,
-  default75 as useScrollToTop,
-  default96 as useShareMutation,
-  default76 as useTitle,
-  default77 as useToast,
-  default78 as useToggle,
-  default79 as useTrapFocus,
-  default80 as useTrashedResource,
+  default68 as useImage,
+  default69 as useInfiniteScroll,
+  default71 as useIsAdmc,
+  default70 as useIsAdml,
+  default72 as useIsAdmlcOrAdmc,
+  default73 as useKeyPress,
+  default74 as useLibraryUrl,
+  default75 as useMediaLibrary,
+  default76 as useScrollToTop,
+  default97 as useShareMutation,
+  default77 as useTitle,
+  default78 as useToast,
+  default79 as useToggle,
+  default80 as useTrapFocus,
+  default81 as useTrashedResource,
   useTreeSortable,
   useTreeView,
-  default94 as useUpdateMutation,
-  default81 as useUpload,
-  default82 as useUploadFiles,
-  default83 as useUser,
-  default84 as useWorkspaceFile,
-  default85 as useWorkspaceFolders,
-  default86 as useWorkspaceFoldersTree,
-  default87 as useWorkspaceSearch,
-  default88 as useXitiTrackPageLoad,
-  default89 as useZendeskGuide,
+  default95 as useUpdateMutation,
+  default82 as useUpload,
+  default83 as useUploadFiles,
+  default84 as useUser,
+  default85 as useWorkspaceFile,
+  default86 as useWorkspaceFolders,
+  default87 as useWorkspaceFoldersTree,
+  default88 as useWorkspaceSearch,
+  default89 as useXitiTrackPageLoad,
+  default90 as useZendeskGuide,
   wrapTreeNode
 };

package/dist/modules/comments/components/Comment.js

@@ -50,7 +50,7 @@ const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comm
       /* @__PURE__ */ jsx(CommentReplies, { parentComment: comment })
     ] }),
     !comment.deleted && /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs("div", { "data-testid": "div-comment-read", className: `${isEditing ? "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200  my-16" : "border rounded-3 p-12 pb-8 d-flex gap-12 mt-16"}`, children: [
+      /* @__PURE__ */ jsxs("div", { className: `${isEditing ? "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200  my-16" : "border rounded-3 p-12 pb-8 d-flex gap-12 mt-16"}`, children: [
         /* @__PURE__ */ jsx(CommentAvatar, { id: authorId }),
         /* @__PURE__ */ jsxs("div", { className: "flex flex-fill", children: [
           /* @__PURE__ */ jsxs("div", { className: "d-flex align-items-center gap-12", children: [
@@ -67,7 +67,7 @@ const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comm
               /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: handleReset, children: t("comment.cancel") }),
               /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
                 /* @__PURE__ */ jsx(TextCounter, { content: value, maxLength: options.maxCommentLength }),
-                /* @__PURE__ */ jsx(Button, { "data-testid": "comment-save", type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), disabled: !(content != null && content.length), onClick: () => handleUpdateComment(value), children: t("comment.save") })
+                /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSave, {}), disabled: !(content != null && content.length), onClick: () => handleUpdateComment(value), children: t("comment.save") })
               ] })
             ] })
           ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
@@ -76,10 +76,10 @@ const DeleteModal = /* @__PURE__ */ lazy(() => import("./DeleteModal.js")), Comm
             }, children: content }),
             type === "edit" && /* @__PURE__ */ jsxs("div", { className: "ms-n8", children: [
               !replyTo && options.allowReplies && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => handleReplyToComment(comment.id), children: t("comment.reply") }),
-              userId === authorId && /* @__PURE__ */ jsx(Button, { "data-testid": "comment-edit", variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
+              userId === authorId && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => {
                 handleModifyComment(comment.id), setValue(content);
               }, children: t("comment.edit") }),
-              (userId === authorId || (userRights == null ? void 0 : userRights.manager)) && /* @__PURE__ */ jsx(Button, { "data-testid": "comment-delete", variant: "ghost", color: "tertiary", size: "sm", onClick: () => setIsDeleteModalOpen(!0), children: t("comment.remove") })
+              (userId === authorId || (userRights == null ? void 0 : userRights.manager)) && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", size: "sm", onClick: () => setIsDeleteModalOpen(!0), children: t("comment.remove") })
             ] })
           ] })
         ] })

package/dist/modules/comments/components/CommentDate.js

@@ -9,14 +9,17 @@ const CommentDate = ({
     fromNow
   } = useDate(), {
     t
-  } = useTranslation();
-  return updatedAt || createdAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
+  } = useTranslation(), getPublishedDate = (date) => t("comment.publish.date", {
+    date: fromNow(date)
+  }), getUpdatedDate = (date) => t("comment.update.date", {
+    date: fromNow(date)
+  });
+  return updatedAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx("span", { className: "small text-gray-700", children: "|" }),
-    /* @__PURE__ */ jsx("span", { "data-testid": "comment-info-date", className: "small text-gray-700", children: updatedAt ? ((date) => t("comment.update.date", {
-      date: fromNow(date)
-    }))(updatedAt) : ((date) => t("comment.publish.date", {
-      date: fromNow(date)
-    }))(createdAt) })
+    /* @__PURE__ */ jsx("span", { className: "small text-gray-700", children: getUpdatedDate(updatedAt) })
+  ] }) : createdAt ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "small text-gray-700", children: "|" }),
+    /* @__PURE__ */ jsx("span", { className: "small text-gray-700", children: getPublishedDate(createdAt) })
   ] }) : null;
 };
 export {

package/dist/modules/comments/components/CommentDeleted.js

@@ -4,7 +4,7 @@ const CommentDeleted = () => {
   const {
     t
   } = useTranslation();
-  return /* @__PURE__ */ jsx("div", { "data-testid": "div-comment-deleted", className: "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200 my-16", children: t("comment.deleted") });
+  return /* @__PURE__ */ jsx("div", { className: "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200 my-16", children: t("comment.deleted") });
 };
 export {
   CommentDeleted

package/dist/modules/comments/components/CommentForm.d.ts

@@ -1,4 +1,4 @@
 export declare const CommentForm: ({ userId, replyTo, }: {
     userId: string;
     replyTo?: string;
-}) => false | import("react/jsx-runtime").JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentForm.js

@@ -1,11 +1,11 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useState } from "react";
+import { jsx, Fragment, jsxs } from "react/jsx-runtime";
 import { useTranslation } from "react-i18next";
 import SvgIconSend from "../../icons/components/IconSend.js";
 import { useAutosizeTextarea } from "../hooks/useAutosizeTextarea.js";
 import { useCommentsContext } from "../hooks/useCommentsContext.js";
 import { CommentAvatar } from "./CommentAvatar.js";
 import { TextCounter } from "./TextCounter.js";
+import { useState } from "react";
 import Button from "../../../components/Button/Button.js";
 const CommentForm = ({
   userId,
@@ -22,19 +22,19 @@ const CommentForm = ({
   }, handleSubmit = () => {
     handleCreateComment(content, replyTo), setContent("");
   };
-  return type === "edit" && /* @__PURE__ */ jsxs("div", { "data-testid": "div-comment-create", className: "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200", children: [
+  return /* @__PURE__ */ jsx(Fragment, { children: type === "edit" && /* @__PURE__ */ jsxs("div", { className: "border rounded-3 p-12 pb-8 d-flex gap-12 bg-gray-200", children: [
     /* @__PURE__ */ jsx(CommentAvatar, { id: userId }),
     /* @__PURE__ */ jsxs("div", { className: "d-flex flex-column flex-fill gap-4", children: [
-      /* @__PURE__ */ jsx("textarea", { id: "add-comment", "data-testid": "comment-form", ref, value: content, className: "form-control", placeholder: t("comment.placeholder.textarea"), maxLength: options.maxCommentLength, onChange: handleChangeContent, onFocus, rows: 1, style: {
+      /* @__PURE__ */ jsx("textarea", { id: "add-comment", ref, value: content, className: "form-control", placeholder: t("comment.placeholder.textarea"), maxLength: options.maxCommentLength, onChange: handleChangeContent, onFocus, rows: 1, style: {
         resize: "none",
         overflow: "hidden"
       } }),
       /* @__PURE__ */ jsxs("div", { className: "d-flex justify-content-end align-items-center gap-4", children: [
         /* @__PURE__ */ jsx(TextCounter, { content, maxLength: options.maxCommentLength }),
-        /* @__PURE__ */ jsx(Button, { "data-testid": "comment-publish", type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSend, {}), disabled: !(content != null && content.length), onClick: handleSubmit, children: t("comment.post") })
+        /* @__PURE__ */ jsx(Button, { type: "submit", variant: "ghost", size: "sm", leftIcon: /* @__PURE__ */ jsx(SvgIconSend, {}), disabled: !(content != null && content.length), onClick: handleSubmit, children: t("comment.post") })
       ] })
     ] })
-  ] });
+  ] }) });
 };
 export {
   CommentForm

package/dist/modules/comments/components/CommentHeader.d.ts

@@ -0,0 +1,3 @@
+export declare const CommentHeader: ({ title }: {
+    title: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/modules/comments/components/CommentHeader.js

@@ -0,0 +1,8 @@
+import { jsx } from "react/jsx-runtime";
+import Heading from "../../../components/Heading/Heading.js";
+const CommentHeader = ({
+  title
+}) => /* @__PURE__ */ jsx(Heading, { level: "h3", headingStyle: "h3", children: title });
+export {
+  CommentHeader
+};

package/dist/modules/comments/components/CommentTitle.js

@@ -1,7 +1,7 @@
 import { jsx } from "react/jsx-runtime";
 const CommentTitle = ({
   children
-}) => /* @__PURE__ */ jsx("span", { "data-testid": "comment-info-author", className: "small text-gray-800", children });
+}) => /* @__PURE__ */ jsx("span", { className: "small text-gray-800", children });
 export {
   CommentTitle
 };

package/dist/modules/comments/provider/CommentProvider.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
 import { useMemo } from "react";
 import { CommentForm } from "../components/CommentForm.js";
+import { CommentHeader } from "../components/CommentHeader.js";
 import { CommentList } from "../components/CommentList.js";
 import { DEFAULT_ALLOW_REPLIES, DEFAULT_ADD_REPLIES, DEFAULT_MAX_REPLIES, DEFAULT_ADD_COMMENTS, DEFAULT_MAX_COMMENTS, DEFAULT_MAX_REPLY_LENGTH, DEFAULT_MAX_COMMENT_LENGTH } from "../constants.js";
 import { CommentContext } from "../context/Context.js";
 import { useComments } from "../hooks/useComments.js";
-import Heading from "../../../components/Heading/Heading.js";
 import Button from "../../../components/Button/Button.js";
 import EmptyScreen from "../../../components/EmptyScreen/EmptyScreen.js";
 const CommentProvider = ({
@@ -71,10 +71,10 @@ const CommentProvider = ({
     [displayedComments, editCommentId, profilesQueries, options]
   );
   return /* @__PURE__ */ jsx(CommentContext.Provider, { value: values, children: /* @__PURE__ */ jsxs("div", { className: "my-24", children: [
-    /* @__PURE__ */ jsx(Heading, { "data-testid": "comments-info-count-text", level: "h3", headingStyle: "h3", children: title }),
+    /* @__PURE__ */ jsx(CommentHeader, { title }),
     /* @__PURE__ */ jsxs("div", { className: "my-24", children: [
       user && /* @__PURE__ */ jsx(CommentForm, { userId: user.userId }),
-      !profilesQueries.isLoading && /* @__PURE__ */ jsxs(Fragment, { children: [
+      profilesQueries.isLoading ? null : /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(CommentList, {}),
         showMoreComments && /* @__PURE__ */ jsx(Button, { variant: "ghost", color: "tertiary", onClick: handleMoreComments, className: "my-16", children: t("comment.more") })
       ] })

package/dist/modules/modals/OnboardingModal/OnboardingModal.js

@@ -44,7 +44,7 @@ const OnboardingModal = /* @__PURE__ */ forwardRef(({
   }, handleCloseWithoutPreference = () => {
     setIsOpen(!1), setSwiperprogress(0);
   };
-  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "onboarding-modal", "data-testid": "modal-onboarding", size: "md", isOpen, focusId: "nextButtonId", onModalClose: handleCloseWithoutPreference, children: [
+  return /* @__PURE__ */ createPortal(/* @__PURE__ */ jsxs(Modal, { id: "onboarding-modal", size: "md", isOpen, focusId: "nextButtonId", onModalClose: handleCloseWithoutPreference, children: [
     /* @__PURE__ */ jsx(Modal.Header, { onModalClose: handleCloseWithoutPreference, centered: !0, children: t(currentTitle || "explorer.modal.onboarding.trash.title") }),
     /* @__PURE__ */ jsx(Modal.Body, { children: /* @__PURE__ */ jsx(Swiper, { modules: [Pagination], onSwiper: (swiper) => {
       setSwiperInstance(swiper);
@@ -59,10 +59,10 @@ const OnboardingModal = /* @__PURE__ */ forwardRef(({
       } })
     ] }, index)) }) }),
     /* @__PURE__ */ jsxs(Modal.Footer, { children: [
-      /* @__PURE__ */ jsx(Button, { "data-testid": "modal-onboarding-later", type: "button", color: "tertiary", variant: "ghost", onClick: handleCloseWithoutPreference, children: t("explorer.modal.onboarding.trash.later") }),
-      swiperProgress > 0 && /* @__PURE__ */ jsx(Button, { "data-testid": "modal-onboarding-previous", type: "button", color: "primary", variant: "outline", onClick: () => swiperInstance.slidePrev(), children: t(prevText || "explorer.modal.onboarding.trash.prev") }),
-      swiperProgress < 1 && /* @__PURE__ */ jsx(Button, { id: "nextButtonId", "data-testid": "modal-onboarding-next", type: "button", color: "primary", variant: "filled", onClick: () => swiperInstance.slideNext(), children: t(nextText || "explorer.modal.onboarding.trash.next") }),
-      swiperProgress === 1 && /* @__PURE__ */ jsx(Button, { "data-testid": "modal-onboarding-close", type: "button", color: "primary", variant: "filled", onClick: () => {
+      /* @__PURE__ */ jsx(Button, { type: "button", color: "tertiary", variant: "ghost", onClick: handleCloseWithoutPreference, children: t("explorer.modal.onboarding.trash.later") }),
+      swiperProgress > 0 && /* @__PURE__ */ jsx(Button, { type: "button", color: "primary", variant: "outline", onClick: () => swiperInstance.slidePrev(), children: t(prevText || "explorer.modal.onboarding.trash.prev") }),
+      swiperProgress < 1 && /* @__PURE__ */ jsx(Button, { id: "nextButtonId", type: "button", color: "primary", variant: "filled", onClick: () => swiperInstance.slideNext(), children: t(nextText || "explorer.modal.onboarding.trash.next") }),
+      swiperProgress === 1 && /* @__PURE__ */ jsx(Button, { type: "button", color: "primary", variant: "filled", onClick: () => {
         isOnboarding ? handleCloseWithPreference() : handleCloseWithoutPreference();
       }, children: t(closeText || "explorer.modal.onboarding.trash.close") })
     ] })

package/dist/modules/multimedia/FileCard/FileCard.js

@@ -57,7 +57,7 @@ const FileCard = ({
       },
       ppt: {
         icon: ".PPT",
-        color: "bg-yellow-200"
+        color: "bg-red-200"
       },
       img: {
         icon: /* @__PURE__ */ jsx(SvgIconLandscape, { width: 22, height: 22 }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edifice.io/react",
-  "version": "2.5.5-develop-b2school.20260116160825",
+  "version": "2.5.5-develop-pedago.20260121100338",
   "description": "Edifice React Library",
   "keywords": [
     "react",
@@ -134,9 +134,10 @@
     "react-slugify": "^3.0.3",
     "swiper": "^10.1.0",
     "ua-parser-js": "^1.0.36",
-    "@edifice.io/bootstrap": "2.5.5-develop-b2school.20260116160825",
-    "@edifice.io/utilities": "2.5.5-develop-b2school.20260116160825",
-    "@edifice.io/tiptap-extensions": "2.5.5-develop-b2school.20260116160825"
+    "react-pdf": "10.2.0",
+    "@edifice.io/tiptap-extensions": "2.5.5-develop-pedago.20260121100338",
+    "@edifice.io/utilities": "2.5.5-develop-pedago.20260121100338",
+    "@edifice.io/bootstrap": "2.5.5-develop-pedago.20260121100338"
   },
   "devDependencies": {
     "@babel/plugin-transform-react-pure-annotations": "^7.23.3",
@@ -167,8 +168,8 @@
     "vite": "^5.4.11",
     "vite-plugin-dts": "^4.1.0",
     "vite-tsconfig-paths": "^5.0.1",
-    "@edifice.io/client": "2.5.5-develop-b2school.20260116160825",
-    "@edifice.io/config": "2.5.5-develop-b2school.20260116160825"
+    "@edifice.io/client": "2.5.5-develop-pedago.20260121100338",
+    "@edifice.io/config": "2.5.5-develop-pedago.20260121100338"
   },
   "peerDependencies": {
     "@react-spring/web": "^9.7.5",

package/dist/components/DatePicker/DatePicker.d.ts

@@ -1,57 +0,0 @@
-/**
- * DatePicker component props
- *
- * Minimal interface that only exposes what is necessary.
- * Ant Design implementation is hidden and no Ant Design-specific props are exposed.
- * Standard HTML div attributes are supported (passed through to the underlying DOM element).
- */
-export interface DatePickerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'value' | 'defaultValue'> {
-    /**
-     * Selected date values
-     * @default today's date is setted by ant design if no value is provided
-     */
-    value?: Date;
-    /**
-     * Callback called when date changes
-     */
-    onChange?: (date?: Date) => void;
-    /**
-     * Date format to display in the picker
-     * @default 'DD / MM / YYYY'
-     */
-    dateFormat?: string;
-    /**
-     * Minimum selectable date
-     */
-    minDate?: Date;
-    /**
-     * Maximum selectable date
-     */
-    maxDate?: Date;
-}
-/**
- * Type for DatePicker ref
- */
-/**
- * DatePicker component
- *
- * Date picker component for selecting a date.
- *
- * **Note:** This component uses Ant Design's DatePicker component internally.
- * Only the props defined in DatePickerProps are allowed to prevent
- * dependency on Ant Design-specific features. To replace the implementation,
- * modify the component body below.
- *
- * @example
- * ```tsx
- * <DatePicker
- *   value={date}
- *   onChange={(date) => setDate(date)}
- *   dateFormat="YYYY-MM-DD"
- *   minDate={new Date(today.setDate(today.getDate() - 2))}
- *   maxDate={new Date(today.setDate(today.getDate() + 3))}
- * />
- * ```
- */
-declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLElement>>;
-export default DatePicker;