@cgi-learning-hub/ui 1.11.1-dev.1765194222 → 1.11.1-dev.1765288172

package/dist/index.es.js

@@ -6,11 +6,9 @@ import { css as css2, keyframes as keyframes2 } from "@emotion/react";
 import emStyled from "@emotion/styled";
 import * as ReactDOM from "react-dom";
 import ReactDOM__default from "react-dom";
-import { useTheme as useTheme$4, styled as styled$3, Box as Box$1, ClickAwayListener as ClickAwayListener$1, IconButton as IconButton$1, Stack as Stack$1, ListItem as ListItem$1, CircularProgress as CircularProgress$1, ListItemButton as ListItemButton$1, List as List$2, Divider as Divider$1, Card as Card$1, CardMedia as CardMedia$1, CardContent as CardContent$1, Tooltip as Tooltip$1 } from "@mui/material";
 import { CirclePicker } from "react-color";
 import dayjs from "dayjs";
 import { useDropzone } from "react-dropzone";
-import { InsertDriveFileOutlined, OndemandVideoRounded, DescriptionOutlined, PictureAsPdfOutlined, CalendarViewMonthRounded, MovieOutlined, PhotoOutlined, MusicNoteRounded, DownloadRounded, CloseRounded, VisibilityOff, Visibility, Search } from "@mui/icons-material";
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
 }
@@ -42690,10 +42688,7 @@ const StyledButton = styled(Button$1)(({ color: color2, theme }) => {
     }
   };
 });
-const Button2 = ({
-  variant = "outlined",
-  ...otherProps
-}) => {
+const Button2 = ({ variant = "outlined", ...otherProps }) => {
   return /* @__PURE__ */ jsx(StyledButton, { variant, ...otherProps });
 };
 const Root = styled(Stack, {
@@ -42760,7 +42755,7 @@ const ActionBar = ({
   rightActions,
   slotProps = {}
 }) => {
-  const theme = useTheme$4();
+  const theme = useTheme();
   return /* @__PURE__ */ jsxs(Root, { direction: "row", justifyContent: "space-between", ...slotProps.root, children: [
     /* @__PURE__ */ jsx(
       LeftActionsContainer,
@@ -43182,10 +43177,7 @@ process.env.NODE_ENV !== "production" ? Alert$1.propTypes = {
    */
   variant: PropTypes.oneOfType([PropTypes.oneOf(["filled", "outlined", "standard"]), PropTypes.string])
 } : void 0;
-const Alert2 = ({
-  severity = "success",
-  ...otherProps
-}) => {
+const Alert2 = ({ severity = "success", ...otherProps }) => {
   const theme = useTheme();
   return /* @__PURE__ */ jsxs(
     Alert$1,
@@ -43207,7 +43199,7 @@ const Alert2 = ({
 const CheckRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M9 16.17 5.53 12.7a.996.996 0 0 0-1.41 0c-.39.39-.39 1.02 0 1.41l4.18 4.18c.39.39 1.02.39 1.41 0L20.29 7.71c.39-.39.39-1.02 0-1.41a.996.996 0 0 0-1.41 0z"
 }), "CheckRounded");
-const PickerBackgroundBox = styled$3(Box$1)(
+const PickerBackgroundBox = styled(Box)(
   ({ disabled }) => ({
     width: "4.4rem",
     height: "4.4rem",
@@ -43237,7 +43229,7 @@ const checkmarkSwatchBox = {
   gap: "5px",
   width: "15rem"
 };
-const StyledSwatchBox = styled$3(Box$1)(
+const StyledSwatchBox = styled(Box)(
   ({ showBorder = false, backgroundColor: backgroundColor2 }) => ({
     width: 20,
     height: 20,
@@ -43396,7 +43388,7 @@ const ColorPicker = ({
   const currentOption = normalizedOptions.find((opt) => opt.color === value);
   const colorStrings = normalizedOptions.map((opt) => opt.color);
   return /* @__PURE__ */ jsx(
-    ClickAwayListener$1,
+    ClickAwayListener,
     {
       onClickAway: handleClose,
       ...slotProps?.clickAwayListener,
@@ -43416,13 +43408,13 @@ const ColorPicker = ({
               }
             ),
             isCirclePickerVisible && /* @__PURE__ */ jsx(
-              Box$1,
+              Box,
               {
                 sx: {
                   ...circlePickerStyle,
                   ...slotProps?.circlePickerBox?.sx || {}
                 },
-                children: useCheckmarkSwatch ? /* @__PURE__ */ jsx(Box$1, { sx: checkmarkSwatchBox, children: normalizedOptions.map((option) => /* @__PURE__ */ jsx(
+                children: useCheckmarkSwatch ? /* @__PURE__ */ jsx(Box, { sx: checkmarkSwatchBox, children: normalizedOptions.map((option) => /* @__PURE__ */ jsx(
                   CheckmarkSwatch,
                   {
                     color: option.color,
@@ -56677,7 +56669,7 @@ const Dialog2 = ({
   const handleClose = () => otherProps.onClose?.({}, "escapeKeyDown");
   return /* @__PURE__ */ jsxs(Dialog$1, { ...otherProps, children: [
     showCloseButton ? /* @__PURE__ */ jsx(
-      IconButton$1,
+      IconButton,
       {
         "aria-label": "close",
         onClick: handleClose,
@@ -56693,12 +56685,12 @@ const Dialog2 = ({
     children
   ] });
 };
-const FileUploadIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z"
-}), "FileUpload");
-const UploadFileIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5zM8 15.01l1.41 1.41L11 14.84V19h2v-4.16l1.59 1.59L16 15.01 12.01 11z"
-}), "UploadFile");
+const FileUploadRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M7.4 10h1.59v5c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-5h1.59c.89 0 1.34-1.08.71-1.71L12.7 3.7a.996.996 0 0 0-1.41 0L6.7 8.29c-.63.63-.19 1.71.7 1.71M5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1"
+}), "FileUploadRounded");
+const UploadFileRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "m19.41 7.41-4.83-4.83c-.37-.37-.88-.58-1.41-.58H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8.83c0-.53-.21-1.04-.59-1.42M14.8 15H13v3c0 .55-.45 1-1 1s-1-.45-1-1v-3H9.21c-.45 0-.67-.54-.35-.85l2.8-2.79c.2-.19.51-.19.71 0l2.79 2.79c.3.31.08.85-.36.85M14 9c-.55 0-1-.45-1-1V3.5L18.5 9z"
+}), "UploadFileRounded");
 const Dropzone = ({
   defaultLabel = "Glisser et déposer des fichiers ici, ou cliquer pour sélectionner des fichiers",
   dragLabel = "Déposer les fichiers ici",
@@ -56730,10 +56722,10 @@ const Dropzone = ({
       children: [
         /* @__PURE__ */ jsx("input", { ...getInputProps(), ...slotProps.input }),
         isDragActive ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(FileUploadIcon, { color: "primary", ...slotProps.icon }),
+          /* @__PURE__ */ jsx(FileUploadRoundedIcon, { color: "primary", ...slotProps.icon }),
           /* @__PURE__ */ jsx(Typography, { ...slotProps.label, children: dragLabel })
         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx(UploadFileIcon, { color: "primary", ...slotProps.icon }),
+          /* @__PURE__ */ jsx(UploadFileRoundedIcon, { color: "primary", ...slotProps.icon }),
           /* @__PURE__ */ jsx(Typography, { ...slotProps.label, children: defaultLabel }),
           information ? /* @__PURE__ */ jsx(Typography, { variant: "body2", color: "grey", ...slotProps.information, children: information }) : null
         ] })
@@ -56844,44 +56836,71 @@ const EmptyState = ({
     }
   );
 };
+const DownloadRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M16.59 9H15V4c0-.55-.45-1-1-1h-4c-.55 0-1 .45-1 1v5H7.41c-.89 0-1.34 1.08-.71 1.71l4.59 4.59c.39.39 1.02.39 1.41 0l4.59-4.59c.63-.63.19-1.71-.7-1.71M5 19c0 .55.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1H6c-.55 0-1 .45-1 1"
+}), "DownloadRounded");
+const CalendarViewMonthRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2M8 11H4V6h4zm6 0h-4V6h4zm6 0h-4V6h4zM8 18H4v-5h4zm6 0h-4v-5h4zm6 0h-4v-5h4z"
+}), "CalendarViewMonthRounded");
+const DescriptionOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M8 16h8v2H8zm0-4h8v2H8zm6-10H6c-1.1 0-2 .9-2 2v16c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm4 18H6V4h7v5h5z"
+}), "DescriptionOutlined");
+const InsertDriveFileOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zM6 20V4h7v5h5v11z"
+}), "InsertDriveFileOutlined");
+const MovieOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M4 6.47 5.76 10H20v8H4zM22 4h-4l2 4h-3l-2-4h-2l2 4h-3l-2-4H8l2 4H7L5 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2z"
+}), "MovieOutlined");
+const MusicNoteRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M12 5v8.55c-.94-.54-2.1-.75-3.33-.32-1.34.48-2.37 1.67-2.61 3.07-.46 2.74 1.86 5.08 4.59 4.65 1.96-.31 3.35-2.11 3.35-4.1V7h2c1.1 0 2-.9 2-2s-.9-2-2-2h-2c-1.1 0-2 .9-2 2"
+}), "MusicNoteRounded");
+const OndemandVideoRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M21 3H3c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h5v1c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-1h5c1.1 0 1.99-.9 1.99-2L23 5c0-1.11-.9-2-2-2m-1 14H4c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h16c.55 0 1 .45 1 1v10c0 .55-.45 1-1 1m-5.52-5.13-3.98 2.28c-.67.38-1.5-.11-1.5-.87V8.72c0-.77.83-1.25 1.5-.87l3.98 2.28c.67.39.67 1.35 0 1.74"
+}), "OndemandVideoRounded");
+const PhotoOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m-4.86 8.86-3 3.87L9 13.14 6 17h12z"
+}), "PhotoOutlined");
+const PictureAsPdfOutlinedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M20 2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2m0 14H8V4h12zM4 6H2v14c0 1.1.9 2 2 2h14v-2H4zm12 6V9c0-.55-.45-1-1-1h-2v5h2c.55 0 1-.45 1-1m-2-3h1v3h-1zm4 2h1v-1h-1V9h1V8h-2v5h1zm-8 0h1c.55 0 1-.45 1-1V9c0-.55-.45-1-1-1H9v5h1zm0-2h1v1h-1z"
+}), "PictureAsPdfOutlined");
 const FileIcon = ({ extension }) => {
   switch (extension.toUpperCase()) {
     case "MP3":
     case "MIDI":
     case "WAV":
-      return /* @__PURE__ */ jsx(MusicNoteRounded, {});
+      return /* @__PURE__ */ jsx(MusicNoteRoundedIcon, {});
     case "JPG":
     case "JPEG":
     case "PNG":
     case "SVG":
-      return /* @__PURE__ */ jsx(PhotoOutlined, {});
+      return /* @__PURE__ */ jsx(PhotoOutlinedIcon, {});
     case "MP4":
     case "MOV":
     case "AVI":
-      return /* @__PURE__ */ jsx(MovieOutlined, {});
+      return /* @__PURE__ */ jsx(MovieOutlinedIcon, {});
     case "CSV":
     case "ODS":
     case "XLS":
     case "XLSX":
-      return /* @__PURE__ */ jsx(CalendarViewMonthRounded, {});
+      return /* @__PURE__ */ jsx(CalendarViewMonthRoundedIcon, {});
     case "PDF":
-      return /* @__PURE__ */ jsx(PictureAsPdfOutlined, {});
+      return /* @__PURE__ */ jsx(PictureAsPdfOutlinedIcon, {});
     case "ODT":
     case "DOC":
     case "DOCX":
     case "TXT":
-      return /* @__PURE__ */ jsx(DescriptionOutlined, {});
+      return /* @__PURE__ */ jsx(DescriptionOutlinedIcon, {});
     case "ODP":
     case "PPT":
     case "PPTX":
-      return /* @__PURE__ */ jsx(OndemandVideoRounded, {});
+      return /* @__PURE__ */ jsx(OndemandVideoRoundedIcon, {});
     default:
-      return /* @__PURE__ */ jsx(InsertDriveFileOutlined, {});
+      return /* @__PURE__ */ jsx(InsertDriveFileOutlinedIcon, {});
   }
 };
 const FileInfosSeparator = () => {
-  return /* @__PURE__ */ jsx(Stack$1, { height: "100%", children: /* @__PURE__ */ jsx(
-    Stack$1,
+  return /* @__PURE__ */ jsx(Stack, { height: "100%", children: /* @__PURE__ */ jsx(
+    Stack,
     {
       height: "4px",
       width: "4px",
@@ -56901,7 +56920,7 @@ const displayExtension = (name) => {
   const extension = name.split(".").pop();
   return extension ? extension.toUpperCase() : null;
 };
-const ClickableItem = styled$3(ListItemButton$1)(
+const ClickableItem = styled(ListItemButton)(
   ({ isClickable }) => ({
     "&:hover": {
       boxShadow: isClickable ? "0 4px 8px rgba(192, 192, 192, 0.3)" : "none",
@@ -56940,11 +56959,11 @@ const FileListItem = ({
     onDownload?.(file);
   };
   return /* @__PURE__ */ jsx(
-    ListItem$1,
+    ListItem,
     {
-      secondaryAction: /* @__PURE__ */ jsxs(Box$1, { alignItems: "center", display: "flex", gap: "1rem", children: [
-        file.isLoading ? /* @__PURE__ */ jsx(Box$1, { marginRight: 1, children: /* @__PURE__ */ jsx(CircularProgress$1, { size: 24, color: "primary" }) }) : file.isDownloadable ? /* @__PURE__ */ jsx(IconButton$1, { onClick: handleDownload, children: /* @__PURE__ */ jsx(DownloadRounded, { color: "primary" }) }) : null,
-        file.isDeletable && /* @__PURE__ */ jsx(IconButton$1, { onClick: handleDelete, id: "coucou", children: /* @__PURE__ */ jsx(CloseRounded, {}) })
+      secondaryAction: /* @__PURE__ */ jsxs(Box, { alignItems: "center", display: "flex", gap: "1rem", children: [
+        file.isLoading ? /* @__PURE__ */ jsx(Box, { marginRight: 1, children: /* @__PURE__ */ jsx(CircularProgress, { size: 24, color: "primary" }) }) : file.isDownloadable ? /* @__PURE__ */ jsx(IconButton, { onClick: handleDownload, children: /* @__PURE__ */ jsx(DownloadRoundedIcon, { color: "primary" }) }) : null,
+        file.isDeletable && /* @__PURE__ */ jsx(IconButton, { onClick: handleDelete, id: "coucou", children: /* @__PURE__ */ jsx(CloseRoundedIcon, {}) })
       ] }),
       disablePadding: true,
       children: /* @__PURE__ */ jsx(
@@ -56969,7 +56988,7 @@ const FileListItem = ({
                   backgroundColor: "grey.light"
                 },
                 children: /* @__PURE__ */ jsx(
-                  Box$1,
+                  Box,
                   {
                     color: "text.secondary",
                     alignItems: "center",
@@ -57021,7 +57040,7 @@ const FileList = ({
   onClick,
   onDownload
 }) => {
-  return /* @__PURE__ */ jsx(List$2, { sx: { display: "flex", flexDirection: "column" }, children: files.map((file, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx(List, { sx: { display: "flex", flexDirection: "column" }, children: files.map((file, index) => /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       FileListItem,
       {
@@ -57032,16 +57051,16 @@ const FileList = ({
       },
       index
     ),
-    index < files.length - 1 && /* @__PURE__ */ jsx(Divider$1, { variant: "middle" })
+    index < files.length - 1 && /* @__PURE__ */ jsx(Divider, { variant: "middle" })
   ] })) });
 };
-const FolderIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8z"
-}), "Folder");
-const MoreVertIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+const FolderRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M10.59 4.59C10.21 4.21 9.7 4 9.17 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8z"
+}), "FolderRounded");
+const MoreVertRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2m0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2m0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2"
-}), "MoreVert");
-const StyledCard = styled$3(Card$1)(({ selected, size, theme }) => ({
+}), "MoreVertRounded");
+const StyledCard = styled(Card)(({ selected, size, theme }) => ({
   boxShadow: "0px 4px 12px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.06)",
   borderRadius: "0.5rem",
   height: "auto",
@@ -57062,7 +57081,7 @@ const StyledCard = styled$3(Card$1)(({ selected, size, theme }) => ({
     }
   }
 }));
-const SelectedIcon = styled$3(Box$1)(({ selected, hasNoButtonOnFocus, theme }) => ({
+const SelectedIcon = styled(Box)(({ selected, hasNoButtonOnFocus, theme }) => ({
   position: "absolute",
   top: 0,
   right: 0,
@@ -57098,7 +57117,7 @@ const SelectedIcon = styled$3(Box$1)(({ selected, hasNoButtonOnFocus, theme }) =
     color: theme.palette.primary.main
   }
 }));
-const ResourceCardImage = styled$3(CardMedia$1)(({ size, image, defaultImage }) => ({
+const ResourceCardImage = styled(CardMedia)(({ size, image, defaultImage }) => ({
   height: size == "sm" ? 85 : 180,
   width: size == "sm" ? 85 : "calc(100% - 2rem)",
   objectFit: "cover",
@@ -57112,11 +57131,11 @@ const ResourceCardImage = styled$3(CardMedia$1)(({ size, image, defaultImage })
     opacity: "0.7"
   }
 }));
-const ResourceCardBody = styled$3(CardContent$1)(({ size }) => ({
+const ResourceCardBody = styled(CardContent)(({ size }) => ({
   padding: size == "sm" ? ".7rem 5px .7rem 0 !important" : "0 16px 16px 16px !important",
   width: size === "sm" ? "calc(100% - 110px)" : "100%"
 }));
-const ResourcePropertyItem = styled$3(Box$1)(
+const ResourcePropertyItem = styled(Box)(
   ({ size }) => ({
     display: "flex",
     alignItems: "center",
@@ -57129,7 +57148,7 @@ const ResourcePropertyItem = styled$3(Box$1)(
     }
   })
 );
-const ResourcePropertyText = styled$3(Box$1)(({ size, width: width2, isLast }) => ({
+const ResourcePropertyText = styled(Box)(({ size, width: width2, isLast }) => ({
   marginLeft: size === "sm" ? ".3rem" : ".5rem",
   fontSize: size === "sm" ? "12px" : "15px",
   "& .MuiTypography-root": {
@@ -57143,7 +57162,7 @@ const ResourcePropertyText = styled$3(Box$1)(({ size, width: width2, isLast }) =
     maxWidth: size === "sm" ? "110px" : "172px"
   }
 }));
-const ResourceIconItem = styled$3(Box$1)(
+const ResourceIconItem = styled(Box)(
   ({ size }) => ({
     display: "inline-flex",
     alignItems: "center",
@@ -57158,7 +57177,7 @@ const ResourceIconItem = styled$3(Box$1)(
     }
   })
 );
-const PublicIconWrapper = styled$3(Box$1)(
+const PublicIconWrapper = styled(Box)(
   ({ size }) => ({
     position: "absolute",
     bottom: size === "sm" ? ".65rem" : "16px",
@@ -57217,7 +57236,7 @@ const FolderCard = ({
   const handleKeyPress = (e) => {
     return e.key === "Enter" || e.key === " ";
   };
-  return /* @__PURE__ */ jsx(Box$1, { sx: { width: width2 }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { sx: { width: width2 }, children: /* @__PURE__ */ jsxs(
     StyledCard,
     {
       selected: isSelected,
@@ -57255,19 +57274,19 @@ const FolderCard = ({
             "aria-label": isSelected ? "Unselect folder" : "Select folder",
             "aria-pressed": isSelected,
             hasNoButtonOnFocus,
-            children: /* @__PURE__ */ jsx(MoreVertIcon, {})
+            children: /* @__PURE__ */ jsx(MoreVertRoundedIcon, {})
           }
         ),
-        /* @__PURE__ */ jsxs(CardContent$1, { sx: FolderBodyStyle, children: [
-          /* @__PURE__ */ jsx(Box$1, { fontSize: iconSize, sx: IconContainerStyle, children: /* @__PURE__ */ jsx(
-            FolderIcon,
+        /* @__PURE__ */ jsxs(CardContent, { sx: FolderBodyStyle, children: [
+          /* @__PURE__ */ jsx(Box, { fontSize: iconSize, sx: IconContainerStyle, children: /* @__PURE__ */ jsx(
+            FolderRoundedIcon,
             {
               color: "primary",
               sx: FolderIconStyle,
               "aria-hidden": "true"
             }
           ) }),
-          /* @__PURE__ */ jsxs(Box$1, { sx: TextContainerStyle, children: [
+          /* @__PURE__ */ jsxs(Box, { sx: TextContainerStyle, children: [
             /* @__PURE__ */ jsx(
               EllipsisWithTooltip,
               {
@@ -57335,26 +57354,26 @@ const Heading = ({
     }
   );
 };
-const AddPhotoAlternateIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M19 7v2.99s-1.99.01-2 0V7h-3s.01-1.99 0-2h3V2h2v3h3v2zm-3 4V8h-3V5H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8zM5 19l3-4 2 3 3-4 4 5z"
-}), "AddPhotoAlternate");
-const CreateIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
-}), "Create");
-const DeleteIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6zM19 4h-3.5l-1-1h-5l-1 1H5v2h14z"
-}), "Delete");
+const AddPhotoAlternateRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M21.02 5H19V2.98c0-.54-.44-.98-.98-.98h-.03c-.55 0-.99.44-.99.98V5h-2.01c-.54 0-.98.44-.99.98v.03c0 .55.44.99.99.99H17v2.01c0 .54.44.99.99.98h.03c.54 0 .98-.44.98-.98V7h2.02c.54 0 .98-.44.98-.98v-.04c0-.54-.44-.98-.98-.98M16 9.01V8h-1.01c-.53 0-1.03-.21-1.41-.58-.37-.38-.58-.88-.58-1.44 0-.36.1-.69.27-.98H5c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-8.28c-.3.17-.64.28-1.02.28-1.09-.01-1.98-.9-1.98-1.99M15.96 19H6c-.41 0-.65-.47-.4-.8l1.98-2.63c.21-.28.62-.26.82.02L10 18l2.61-3.48c.2-.26.59-.27.79-.01l2.95 3.68c.26.33.03.81-.39.81"
+}), "AddPhotoAlternateRounded");
+const CreateRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1q-.15.15-.15.36M20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75z"
+}), "CreateRounded");
+const DeleteRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1"
+}), "DeleteRounded");
 const ImagePickerDefaultLabel = () => /* @__PURE__ */ jsxs(Typography, { textAlign: "center", fontSize: "14px", color: "grey.darker", children: [
-  /* @__PURE__ */ jsx(Box$1, { component: "span", fontWeight: "bold", children: "Glissez-déposez" }),
+  /* @__PURE__ */ jsx(Box, { component: "span", fontWeight: "bold", children: "Glissez-déposez" }),
   " ",
   "ou",
   " ",
-  /* @__PURE__ */ jsx(Box$1, { component: "span", fontWeight: "bold", children: "cliquez" }),
+  /* @__PURE__ */ jsx(Box, { component: "span", fontWeight: "bold", children: "cliquez" }),
   " ",
   "pour choisir une image"
 ] });
 const ImagePickerDefaultDragLabel = () => /* @__PURE__ */ jsxs(Typography, { textAlign: "center", fontSize: "14px", color: "grey.darker", children: [
-  /* @__PURE__ */ jsx(Box$1, { component: "span", fontWeight: "bold", children: "Glissez" }),
+  /* @__PURE__ */ jsx(Box, { component: "span", fontWeight: "bold", children: "Glissez" }),
   " ",
   "une image"
 ] });
@@ -57429,7 +57448,7 @@ const ImagePicker = ({
         /* @__PURE__ */ jsx("input", { ...getInputProps() }),
         !currentFile ? /* @__PURE__ */ jsx(Fragment, { children: isDragActive && !disabled ? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsx(
-            AddPhotoAlternateIcon,
+            AddPhotoAlternateRoundedIcon,
             {
               color: "primary",
               style: {
@@ -57441,7 +57460,7 @@ const ImagePicker = ({
           dragLabel,
           information && /* @__PURE__ */ jsx(Typography, { textAlign: "center", fontSize: "12px", color: "grey", children: information })
         ] }) : /* @__PURE__ */ jsxs(
-          Box$1,
+          Box,
           {
             sx: {
               display: "flex",
@@ -57452,7 +57471,7 @@ const ImagePicker = ({
             },
             children: [
               /* @__PURE__ */ jsx(
-                AddPhotoAlternateIcon,
+                AddPhotoAlternateRoundedIcon,
                 {
                   color: "primary",
                   style: {
@@ -57467,7 +57486,7 @@ const ImagePicker = ({
           }
         ) }) : /* @__PURE__ */ jsxs(Fragment, { children: [
           !disabled && /* @__PURE__ */ jsxs(
-            Box$1,
+            Box,
             {
               sx: {
                 position: "absolute",
@@ -57478,7 +57497,7 @@ const ImagePicker = ({
               },
               children: [
                 /* @__PURE__ */ jsx(
-                  Box$1,
+                  Box,
                   {
                     onClick: handleEdit,
                     sx: {
@@ -57498,11 +57517,11 @@ const ImagePicker = ({
                         }
                       }
                     },
-                    children: /* @__PURE__ */ jsx(CreateIcon, { fontSize: "small" })
+                    children: /* @__PURE__ */ jsx(CreateRoundedIcon, { fontSize: "small" })
                   }
                 ),
                 /* @__PURE__ */ jsx(
-                  Box$1,
+                  Box,
                   {
                     onClick: handleDelete,
                     sx: {
@@ -57522,7 +57541,7 @@ const ImagePicker = ({
                         }
                       }
                     },
-                    children: /* @__PURE__ */ jsx(DeleteIcon, { fontSize: "small" })
+                    children: /* @__PURE__ */ jsx(DeleteRoundedIcon, { fontSize: "small" })
                   }
                 )
               ]
@@ -57613,9 +57632,7 @@ const StyledLoaderBackdropInner = styled(Box)({
     "100%": { opacity: 0, transform: "translateX(300px)" }
   }
 });
-const LoaderBackdrop = ({
-  slotProps = {}
-}) => {
+const LoaderBackdrop = ({ slotProps = {} }) => {
   return /* @__PURE__ */ jsx(
     Backdrop,
     {
@@ -57631,6 +57648,12 @@ const LoaderBackdrop = ({
     }
   );
 };
+const VisibilityOffRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M12 6.5c2.76 0 5 2.24 5 5 0 .51-.1 1-.24 1.46l3.06 3.06c1.39-1.23 2.49-2.77 3.18-4.53C21.27 7.11 17 4 12 4c-1.27 0-2.49.2-3.64.57l2.17 2.17c.47-.14.96-.24 1.47-.24M2.71 3.16c-.39.39-.39 1.02 0 1.41l1.97 1.97C3.06 7.83 1.77 9.53 1 11.5 2.73 15.89 7 19 12 19c1.52 0 2.97-.3 4.31-.82l2.72 2.72c.39.39 1.02.39 1.41 0s.39-1.02 0-1.41L4.13 3.16c-.39-.39-1.03-.39-1.42 0M12 16.5c-2.76 0-5-2.24-5-5 0-.77.18-1.5.49-2.14l1.57 1.57c-.03.18-.06.37-.06.57 0 1.66 1.34 3 3 3 .2 0 .38-.03.57-.07L14.14 16c-.65.32-1.37.5-2.14.5m2.97-5.33c-.15-1.4-1.25-2.49-2.64-2.64z"
+}), "VisibilityOffRounded");
+const VisibilityRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M12 4C7 4 2.73 7.11 1 11.5 2.73 15.89 7 19 12 19s9.27-3.11 11-7.5C21.27 7.11 17 4 12 4m0 12.5c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5m0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3"
+}), "VisibilityRounded");
 const PasswordInput = (props) => {
   const [showPassword, setShowPassword] = useState(false);
   const handleClickShowPassword = () => setShowPassword((show) => !show);
@@ -57651,7 +57674,7 @@ const PasswordInput = (props) => {
               onClick: handleClickShowPassword,
               onMouseDown: handleMouseDownPassword,
               edge: "end",
-              children: showPassword ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {})
+              children: showPassword ? /* @__PURE__ */ jsx(VisibilityRoundedIcon, {}) : /* @__PURE__ */ jsx(VisibilityOffRoundedIcon, {})
             }
           ) })
         }
@@ -58507,7 +58530,7 @@ const ResourceCard = ({
   hasNoButtonOnFocus = false
 }) => {
   infoIcons = infoIcons.slice(0, 3);
-  return /* @__PURE__ */ jsx(Box$1, { sx: { width: width2 && size === "md" ? width2 : "320px" }, children: /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ jsx(Box, { sx: { width: width2 && size === "md" ? width2 : "320px" }, children: /* @__PURE__ */ jsxs(
     StyledCard,
     {
       selected: isSelected,
@@ -58544,11 +58567,11 @@ const ResourceCard = ({
             tabIndex: 0,
             "aria-label": isSelected ? "Unselect card" : "Select card",
             hasNoButtonOnFocus,
-            children: /* @__PURE__ */ jsx(MoreVertIcon, {})
+            children: /* @__PURE__ */ jsx(MoreVertRoundedIcon, {})
           }
         ),
         /* @__PURE__ */ jsx(
-          Stack$1,
+          Stack,
           {
             sx: {
               width: size == "sm" ? 110 : "100%",
@@ -58600,7 +58623,7 @@ const ResourceCard = ({
             `property-${index}`
           )),
           /* @__PURE__ */ jsx(PublicIconWrapper, { size, children: infoIcons.length > 0 && infoIcons.map((infoItem, index) => /* @__PURE__ */ jsx(
-            Tooltip$1,
+            Tooltip,
             {
               title: infoItem.text,
               placement: "top",
@@ -58623,8 +58646,10 @@ const ResourceCard = ({
     }
   ) });
 };
+const SearchRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M15.5 14h-.79l-.28-.27c1.2-1.4 1.82-3.31 1.48-5.34-.47-2.78-2.79-5-5.59-5.34-4.23-.52-7.79 3.04-7.27 7.27.34 2.8 2.56 5.12 5.34 5.59 2.03.34 3.94-.28 5.34-1.48l.27.28v.79l4.25 4.25c.41.41 1.08.41 1.49 0s.41-1.08 0-1.49zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14"
+}), "SearchRounded");
 const StyledInput = styled(InputBase)(({ theme }) => ({
-  width: "auto",
   padding: "0px 12px",
   backgroundColor: theme.palette.grey[50],
   borderRadius: 30,
@@ -58638,15 +58663,18 @@ const StyledInput = styled(InputBase)(({ theme }) => ({
   }
 }));
 const SearchInput = ({
+  name = "search",
   placeholder = "Rechercher",
+  loading = false,
   ...otherProps
 }) => {
   return /* @__PURE__ */ jsx(
     StyledInput,
     {
       ...otherProps,
+      name,
       placeholder,
-      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", disablePointerEvents: true, children: /* @__PURE__ */ jsx(Search, {}) }),
+      startAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "start", disablePointerEvents: true, children: loading ? /* @__PURE__ */ jsx(CircularProgress, { size: "16px", sx: { mx: 0.5 } }) : /* @__PURE__ */ jsx(SearchRoundedIcon, {}) }),
       type: "search",
       autoComplete: "off",
       autoCorrect: "off",
@@ -63345,14 +63373,14 @@ process.env.NODE_ENV !== "production" ? RichTreeView.propTypes = {
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
 } : void 0;
-const KeyboardArrowDownIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z"
-}), "KeyboardArrowDown");
-const KeyboardArrowRightIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
-  d: "M8.59 16.59 13.17 12 8.59 7.41 10 6l6 6-6 6z"
-}), "KeyboardArrowRight");
+const KeyboardArrowDownRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M8.12 9.29 12 13.17l3.88-3.88c.39-.39 1.02-.39 1.41 0s.39 1.02 0 1.41l-4.59 4.59c-.39.39-1.02.39-1.41 0L6.7 10.7a.996.996 0 0 1 0-1.41c.39-.38 1.03-.39 1.42 0"
+}), "KeyboardArrowDownRounded");
+const KeyboardArrowRightRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+  d: "M9.29 15.88 13.17 12 9.29 8.12a.996.996 0 0 1 0-1.41c.39-.39 1.02-.39 1.41 0l4.59 4.59c.39.39.39 1.02 0 1.41L10.7 17.3c-.39.39-1.02.39-1.41 0-.38-.39-.39-1.03 0-1.42"
+}), "KeyboardArrowRightRounded");
 const DEFAULT_CHILDREN_INDENT = "50px";
-const TreeContainer = styled$3(Box$1, {
+const TreeContainer = styled(Box, {
   shouldForwardProp: (prop) => prop !== "maxHeight"
 })(({ maxHeight: maxHeight2 }) => ({
   maxHeight: typeof maxHeight2 === "number" ? `${maxHeight2}px` : maxHeight2,
@@ -63382,9 +63410,9 @@ const iconStyle = {
   width: "24px",
   height: "24px"
 };
-const ShareIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
+const ShareRoundedIcon = createSvgIcon(/* @__PURE__ */ jsx("path", {
   d: "M18 16.08c-.76 0-1.44.3-1.96.77L8.91 12.7c.05-.23.09-.46.09-.7s-.04-.47-.09-.7l7.05-4.11c.54.5 1.25.81 2.04.81 1.66 0 3-1.34 3-3s-1.34-3-3-3-3 1.34-3 3c0 .24.04.47.09.7L8.04 9.81C7.5 9.31 6.79 9 6 9c-1.66 0-3 1.34-3 3s1.34 3 3 3c.79 0 1.5-.31 2.04-.81l7.12 4.16c-.05.21-.08.43-.08.65 0 1.61 1.31 2.92 2.92 2.92s2.92-1.31 2.92-2.92-1.31-2.92-2.92-2.92"
-}), "Share");
+}), "ShareRounded");
 var ICON_TYPE = /* @__PURE__ */ ((ICON_TYPE2) => {
   ICON_TYPE2["FOLDER"] = "FOLDER";
   ICON_TYPE2["SHARE"] = "SHARE";
@@ -63393,18 +63421,18 @@ var ICON_TYPE = /* @__PURE__ */ ((ICON_TYPE2) => {
   return ICON_TYPE2;
 })(ICON_TYPE || {});
 const getIconComponent = (iconType, customIcon) => {
-  if (!iconType) return FolderIcon;
+  if (!iconType) return FolderRoundedIcon;
   if (typeof iconType !== "string") return iconType;
   switch (iconType) {
     case ICON_TYPE.SHARE:
-      return ShareIcon;
+      return ShareRoundedIcon;
     case ICON_TYPE.TRASH:
-      return DeleteIcon;
+      return DeleteRoundedIcon;
     case ICON_TYPE.CUSTOM:
-      return customIcon || FolderIcon;
+      return customIcon || FolderRoundedIcon;
     case ICON_TYPE.FOLDER:
     default:
-      return FolderIcon;
+      return FolderRoundedIcon;
   }
 };
 const getItemId = (item) => item.internalId;
@@ -63483,7 +63511,7 @@ function CustomTreeItem(props) {
               typographyProps: labelStyle
             }
           ),
-          /* @__PURE__ */ jsx(Box, { sx: arrowContainerStyle, children: status.expandable && (status.expanded ? /* @__PURE__ */ jsx(KeyboardArrowDownIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(KeyboardArrowRightIcon, { fontSize: "small" })) })
+          /* @__PURE__ */ jsx(Box, { sx: arrowContainerStyle, children: status.expandable && (status.expanded ? /* @__PURE__ */ jsx(KeyboardArrowDownRoundedIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx(KeyboardArrowRightRoundedIcon, { fontSize: "small" })) })
         ] }),
         children && /* @__PURE__ */ jsx(
           TreeItemGroupTransition,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cgi-learning-hub/ui",
-  "version": "1.11.1-dev.1765194222",
+  "version": "1.11.1-dev.1765288172",
   "description": "React component library for Hub's design system, built on Material UI with custom and extended components.",
   "keywords": [
     "cgi-learning-hub",