@edifice.io/react 2.5.9 → 2.5.10-develop-pedago.20260216173040

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,6 +5,10 @@ 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,17 +10,18 @@ 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((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);
+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);
   useKeyPress(onModalClose, ["Escape"]), useEffect(() => {
     if (isOpen && (document.body.style.overflow = "hidden", focusId)) {
       const elem = document.getElementById(focusId);
@@ -54,7 +55,7 @@ const Root = /* @__PURE__ */ forwardRef((props, ref) => {
     }
   });
   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, 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, ...otherDivProps, 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/PromotionCard/PromotionCard.d.ts

@@ -0,0 +1,74 @@
+export interface PromotionCardProps {
+    children: React.ReactNode;
+    borderColor?: string;
+    backgroundColor?: string;
+    className?: string;
+}
+/**
+ * Promotion Card component to display promotional features in a card format.
+ *
+ * The component PromotionCard is a Compound Component composed of:
+ * - PromotionCardHeader: information on the top right corner
+ * - PromotionCardIcon: Icon on the left side (background color and Icon)
+ * - PromotionCardBody:
+ *   - PromotionCardTitle: Card Title
+ *   - PromotionCardDescription: Card Description
+ *   - PromotionCardAction: Card Action (mainly a button with a onClick action)
+ *
+ * @example
+ * <PromotionCard>
+ *   <PromotionCard.Header backgroundColor="#faea9c">
+ *     header content
+ *   </PromotionCard.Header>
+ *   <PromotionCard.Icon
+ *     backgroundColor="#FFEFE3"
+ *     icon={<IconEdit color="#FF8D2E" />}
+ *   />
+ *   <PromotionCard.Body>
+ *     <PromotionCard.Title>Création Libre</PromotionCard.Title>
+ *     <PromotionCard.Description>
+ *       Vous n'avez pas peur de la "page blanche" ? Lancez-vous pour créer
+ *       votre cours ou votre document !
+ *     </PromotionCard.Description>
+ *     <PromotionCard.Actions>
+ *       <Button
+ *         color="tertiary"
+ *         variant="ghost"
+ *         size="sm"
+ *         onClick={() => {}}
+ *         leftIcon={<IconPlus />}
+ *       >
+ *         Nouvelle page
+ *       </Button>
+ *     </PromotionCard.Actions>
+ *   </PromotionCard.Body>
+ * </PromotionCard>
+ */
+export declare const Root: ({ children, borderColor, backgroundColor, className, }: PromotionCardProps) => import("react/jsx-runtime").JSX.Element;
+declare const PromotionCard: (({ children, borderColor, backgroundColor, className, }: PromotionCardProps) => import("react/jsx-runtime").JSX.Element) & {
+    Header: {
+        ({ backgroundColor, textColor, children, className, }: import('./PromotionCardHeader').PromotionCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Body: {
+        ({ children, textColor, className, }: import('./PromotionCardBody').PromotionCardBodyProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Icon: {
+        ({ icon, backgroundColor, className, }: import('./PromotionCardIcon').PromotionCardIconProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Title: {
+        ({ children, className, }: import('./PromotionCardTitle').PromotionCardTitleProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Description: {
+        ({ children, className, }: import('./PromotionCardDescription').PromotionCardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+    Footer: {
+        ({ children, className, }: import('./PromotionCardFooter').PromotionCardFooterProps): import("react/jsx-runtime").JSX.Element;
+        displayName: string;
+    };
+};
+export default PromotionCard;

package/dist/components/PromotionCard/PromotionCard.js

@@ -0,0 +1,31 @@
+import { jsx } from "react/jsx-runtime";
+import PromotionCardBody from "./PromotionCardBody.js";
+import PromotionCardDescription from "./PromotionCardDescription.js";
+import PromotionCardFooter from "./PromotionCardFooter.js";
+import PromotionCardHeader from "./PromotionCardHeader.js";
+import PromotionCardIcon from "./PromotionCardIcon.js";
+import PromotionCardTitle from "./PromotionCardTitle.js";
+import clsx from "clsx";
+const Root = ({
+  children,
+  borderColor,
+  backgroundColor,
+  className
+}) => {
+  const classNames = clsx("promotion-card", className);
+  return /* @__PURE__ */ jsx("div", { className: classNames, style: {
+    borderColor,
+    backgroundColor
+  }, children });
+}, PromotionCard = /* @__PURE__ */ Object.assign(Root, {
+  Header: PromotionCardHeader,
+  Body: PromotionCardBody,
+  Icon: PromotionCardIcon,
+  Title: PromotionCardTitle,
+  Description: PromotionCardDescription,
+  Footer: PromotionCardFooter
+});
+export {
+  Root,
+  PromotionCard as default
+};

package/dist/components/PromotionCard/PromotionCardBody.d.ts

@@ -0,0 +1,10 @@
+export interface PromotionCardBodyProps {
+    children: React.ReactNode;
+    textColor?: string;
+    className?: string;
+}
+declare const PromotionCardBody: {
+    ({ children, textColor, className, }: PromotionCardBodyProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default PromotionCardBody;

package/dist/components/PromotionCard/PromotionCardBody.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const PromotionCardBody = ({
+  children,
+  textColor,
+  className
+}) => {
+  const classNames = clsx("promotion-card-body", className);
+  return /* @__PURE__ */ jsx("div", { className: classNames, style: {
+    color: textColor
+  }, children });
+};
+export {
+  PromotionCardBody as default
+};

package/dist/components/PromotionCard/PromotionCardDescription.d.ts

@@ -0,0 +1,9 @@
+export interface PromotionCardDescriptionProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const PromotionCardDescription: {
+    ({ children, className, }: PromotionCardDescriptionProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default PromotionCardDescription;

package/dist/components/PromotionCard/PromotionCardDescription.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const PromotionCardDescription = ({
+  children,
+  className
+}) => {
+  const classNames = clsx("promotion-card-description", className);
+  return /* @__PURE__ */ jsx("div", { className: classNames, children });
+};
+export {
+  PromotionCardDescription as default
+};

package/dist/components/PromotionCard/PromotionCardFooter.d.ts

@@ -0,0 +1,9 @@
+export interface PromotionCardFooterProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const PromotionCardFooter: {
+    ({ children, className, }: PromotionCardFooterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default PromotionCardFooter;

package/dist/components/PromotionCard/PromotionCardFooter.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const PromotionCardFooter = ({
+  children,
+  className
+}) => {
+  const classNames = clsx("promotion-card-footer", className);
+  return /* @__PURE__ */ jsx("div", { className: classNames, children });
+};
+export {
+  PromotionCardFooter as default
+};

package/dist/components/PromotionCard/PromotionCardHeader.d.ts

@@ -0,0 +1,11 @@
+export interface PromotionCardHeaderProps {
+    children: React.ReactNode;
+    backgroundColor?: string;
+    textColor?: string;
+    className?: string;
+}
+declare const PromotionCardHeader: {
+    ({ backgroundColor, textColor, children, className, }: PromotionCardHeaderProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default PromotionCardHeader;

package/dist/components/PromotionCard/PromotionCardHeader.js

@@ -0,0 +1,17 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const PromotionCardHeader = ({
+  backgroundColor,
+  textColor,
+  children,
+  className
+}) => {
+  const classNames = clsx("promotion-card-header", className);
+  return /* @__PURE__ */ jsx("div", { className: classNames, style: {
+    backgroundColor,
+    color: textColor
+  }, children });
+};
+export {
+  PromotionCardHeader as default
+};

package/dist/components/PromotionCard/PromotionCardIcon.d.ts

@@ -0,0 +1,10 @@
+export interface PromotionCardIconProps {
+    icon: React.ReactNode;
+    backgroundColor?: string;
+    className?: string;
+}
+declare const PromotionCardIcon: {
+    ({ icon, backgroundColor, className, }: PromotionCardIconProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default PromotionCardIcon;

package/dist/components/PromotionCard/PromotionCardIcon.js

@@ -0,0 +1,15 @@
+import { jsx } from "react/jsx-runtime";
+import { clsx } from "clsx";
+const PromotionCardIcon = ({
+  icon,
+  backgroundColor,
+  className
+}) => {
+  const classNames = clsx("promotion-card-icon", className);
+  return /* @__PURE__ */ jsx("div", { className: classNames, style: {
+    backgroundColor
+  }, children: icon });
+};
+export {
+  PromotionCardIcon as default
+};

package/dist/components/PromotionCard/PromotionCardTitle.d.ts

@@ -0,0 +1,9 @@
+export interface PromotionCardTitleProps {
+    children: React.ReactNode;
+    className?: string;
+}
+declare const PromotionCardTitle: {
+    ({ children, className, }: PromotionCardTitleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export default PromotionCardTitle;

package/dist/components/PromotionCard/PromotionCardTitle.js

@@ -0,0 +1,12 @@
+import { jsx } from "react/jsx-runtime";
+import clsx from "clsx";
+const PromotionCardTitle = ({
+  children,
+  className
+}) => {
+  const classNames = clsx("promotion-card-title", className);
+  return /* @__PURE__ */ jsx("h3", { className: classNames, children });
+};
+export {
+  PromotionCardTitle as default
+};

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

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

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

@@ -1,4 +1,5 @@
 export * from './ActionBar';
+export * from './AddAttachments';
 export * from './Alert';
 export * from './AppHeader';
 export * from './AppIcon';
@@ -29,10 +30,12 @@ export * from './List';
 export * from './Loading';
 export * from './LoadingScreen';
 export * from './Logo';
+export * from './MediaViewer';
 export * from './Menu';
 export * from './Modal';
 export * from './Popover';
 export * from './PreventPropagation';
+export * from './PromotionCard';
 export * from './Radio';
 export * from './RadioCard';
 export * from './SearchBar';

package/dist/hooks/useConf/useConf.d.ts

@@ -1,4 +1,4 @@
 import { App, IGetConf } from '@edifice.io/client';
 export default function useConf({ appCode }: {
     appCode: App;
-}): import('../../node_modules/@tanstack/react-query').UseQueryResult<IGetConf, Error>;
+}): import('../../../node_modules/@tanstack/react-query').UseQueryResult<IGetConf, Error>;

package/dist/hooks/useConversation/useConversation.js

@@ -6,7 +6,9 @@ const useConversation = () => {
   const zimbraWorkflow = useHasWorkflow("fr.openent.zimbra.controllers.ZimbraController|view"), zimbraPreauth = useHasWorkflow("fr.openent.zimbra.controllers.ZimbraController|preauth"), [msgLink, setMsgLink] = useState(""), queryParams = {
     unread: !0,
     _: (/* @__PURE__ */ new Date()).getTime()
-  }, {
+  };
+  zimbraWorkflow || (queryParams.queryparam_token = (/* @__PURE__ */ new Date()).getTime());
+  const {
     data: messages
   } = useQuery({
     queryKey: ["folder", "count", "inbox"],

package/dist/hooks/useDate/useDate.d.ts

@@ -1,10 +1,11 @@
+import { OpUnitType } from 'dayjs';
 export type MongoDate = {
     $date: number | string;
 };
 export type IsoDate = string;
 export type NumberDate = number;
 /** Date formats we are going to deal with. */
-export type CoreDate = IsoDate | MongoDate | NumberDate;
+export type CoreDate = IsoDate | MongoDate | NumberDate | Date;
 /**
  * Custom React hook for date parsing, formatting, and localization.
  *
@@ -25,4 +26,7 @@ export default function useDate(): {
     fromNow: (date: CoreDate) => string;
     formatDate: (date: CoreDate, format?: string) => string;
     formatTimeAgo: (date: CoreDate) => string;
+    dateIsSame: (date: CoreDate, date2: CoreDate, unit?: OpUnitType) => boolean;
+    dateIsSameOrAfter: (date: CoreDate, date2: CoreDate, unit?: OpUnitType) => boolean;
+    dateIsToday: (date: CoreDate) => boolean;
 };

package/dist/hooks/useDate/useDate.js

@@ -1,5 +1,7 @@
 import { useCallback } from "react";
 import dayjs from "dayjs";
+import isSameOrAfter from "../../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/isSameOrAfter.js";
+import isToday from "../../node_modules/.pnpm/dayjs@1.11.19/node_modules/dayjs/plugin/isToday.js";
 import customParseFormat from "dayjs/plugin/customParseFormat.js";
 import localizedFormat from "dayjs/plugin/localizedFormat.js";
 import relativeTime from "dayjs/plugin/relativeTime.js";
@@ -13,6 +15,8 @@ import { useEdificeClient } from "../../providers/EdificeClientProvider/EdificeC
 dayjs.extend(relativeTime);
 dayjs.extend(customParseFormat);
 dayjs.extend(localizedFormat);
+dayjs.extend(isSameOrAfter);
+dayjs.extend(isToday);
 function useDate() {
   const {
     currentLanguage
@@ -29,7 +33,7 @@ function useDate() {
   }, [currentLanguage]), toComputedDate = useCallback((date) => {
     let computedDate = dayjs();
     try {
-      return typeof date > "u" ? void 0 : (typeof date == "string" ? computedDate = parseDate(date) : typeof date == "number" ? computedDate = dayjs(date).locale(currentLanguage) : typeof date.$date == "number" ? computedDate = dayjs(new Date(date.$date)).locale(currentLanguage) : typeof date.$date == "string" && (computedDate = parseDate(date.$date)), computedDate);
+      return typeof date > "u" ? void 0 : (typeof date == "string" ? computedDate = parseDate(date) : date instanceof Date ? computedDate = dayjs(date).locale(currentLanguage) : typeof date == "number" ? computedDate = dayjs(date).locale(currentLanguage) : typeof date.$date == "number" ? computedDate = dayjs(new Date(date.$date)).locale(currentLanguage) : typeof date.$date == "string" && (computedDate = parseDate(date.$date)), computedDate);
     } catch (error) {
       console.error(error);
     }
@@ -59,11 +63,23 @@ function useDate() {
         dayjsFormat = format;
     }
     return computedDate != null && computedDate.isValid() ? computedDate.locale(currentLanguage).format(dayjsFormat) : "";
+  }, [currentLanguage, parseDate]), dateIsSame = useCallback((date, date2, unit = "day") => {
+    const computedDate = toComputedDate(date), computedDate2 = toComputedDate(date2);
+    return (computedDate == null ? void 0 : computedDate.isSame(computedDate2, unit)) ?? !1;
+  }, [currentLanguage, parseDate]), dateIsSameOrAfter = useCallback((date, date2, unit = "day") => {
+    const computedDate = toComputedDate(date), computedDate2 = toComputedDate(date2);
+    return (computedDate == null ? void 0 : computedDate.isSameOrAfter(computedDate2, unit)) ?? !1;
+  }, [currentLanguage, parseDate]), dateIsToday = useCallback((date) => {
+    const computedDate = toComputedDate(date);
+    return (computedDate == null ? void 0 : computedDate.isToday()) ?? !1;
   }, [currentLanguage, parseDate]);
   return {
     fromNow,
     formatDate,
-    formatTimeAgo
+    formatTimeAgo,
+    dateIsSame,
+    dateIsSameOrAfter,
+    dateIsToday
   };
 }
 export {

package/dist/hooks/useDropzone/useDropzone.js

@@ -1,5 +1,5 @@
 import { useState, useRef } from "react";
-import heic2any from "heic2any";
+import { HEIC_MIME_TYPES } from "../../utilities/mime-types/mime-types-utils.js";
 const useDropzone = (props) => {
   const [dragging, setDragging] = useState(!1), [files, setFiles] = useState([]), inputRef = useRef(null), addFile = (file) => {
     addFiles([file]);
@@ -32,21 +32,26 @@ const useDropzone = (props) => {
       })
     ));
     filesToAdd.reverse(), props != null && props.forceFilters ? (filesToAdd = applyInputFiltersOn(filesToAdd), filesToAdd && filesToAdd.length && setFiles((prevFiles) => [...prevFiles, ...filesToAdd])) : setFiles((prevFiles) => [...prevFiles, ...files2]);
-  }, convertHEICImages = async (files2) => Promise.all(files2.map(async (file) => {
-    if (file.type === "image/heic" || file.type === "image/heif")
-      try {
-        const converted = await heic2any({
-          blob: file,
-          toType: "image/jpeg"
-        });
-        return new File([converted], file.name.replace(/\.(heic|heif)$/i, ".jpeg"), {
-          type: "image/jpeg"
-        });
-      } catch (error) {
-        return console.error(`Failed to convert HEIC image: ${file.name}`, error), file;
-      }
-    return file;
-  })), cleanFiles = () => {
+  }, convertHEICImages = async (files2) => {
+    if (files2 === null || files2.length === 0)
+      return [];
+    let heic2any;
+    return files2.some((file) => HEIC_MIME_TYPES.includes(file.type)) && (heic2any = (await import("heic2any")).default), Promise.all(files2.map(async (file) => {
+      if (HEIC_MIME_TYPES.includes(file.type) && heic2any)
+        try {
+          const converted = await heic2any({
+            blob: file,
+            toType: "image/jpeg"
+          });
+          return new File([converted], file.name.replace(/\.(heic|heif)$/i, ".jpeg"), {
+            type: "image/jpeg"
+          });
+        } catch (error) {
+          return console.error(`Failed to convert HEIC image: ${file.name}`, error), file;
+        }
+      return file;
+    }));
+  }, cleanFiles = () => {
     setFiles([]);
   }, handleOnChange = (event) => {
     const files2 = event.target.files;

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/useSession/useSession.d.ts

@@ -1,2 +1,2 @@
 import { IGetSession } from '@edifice.io/client';
-export default function useSession(): import('../../node_modules/@tanstack/react-query').UseQueryResult<IGetSession, Error>;
+export default function useSession(): import('../../../node_modules/@tanstack/react-query').UseQueryResult<IGetSession, Error>;

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
+};