@eclass/ui-kit 1.64.2 → 1.64.4

package/dist/eclass-ui-kit.es.js

@@ -1,6 +1,6 @@
-import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text as Text$1, HStack, Heading, List, ListItem, Link, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList, MenuItem, Divider, IconButton } from "@chakra-ui/react";
+import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text as Text$1, HStack, Heading, List, ListItem, Modal as Modal$1, ModalContent as ModalContent$1, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, Link, MenuButton, MenuGroup, Menu, MenuList, MenuItem, Divider, IconButton } from "@chakra-ui/react";
 import * as React$1 from "react";
-import React__default, { useEffect, useState, useCallback, useRef } from "react";
+import React__default, { useState, useEffect, useCallback, useRef } from "react";
 const main = {
   deepSkyBlue: "#0189FF",
   azureRadiance: "#017BE5",
@@ -1849,6 +1849,7 @@ function BtnLink({
   isDisable = false,
   m: m2 = "0",
   onClick,
+  p: p2,
   role = "link",
   tabIndex,
   target = "_blank",
@@ -1876,6 +1877,7 @@ function BtnLink({
     id,
     onClick: isDisable ? void 0 : onClick,
     opacity: isDisable ? 0.5 : 1,
+    padding: p2 != null ? p2 : ".25em",
     role,
     tabIndex,
     textDecorationLine: textDecorationLine ? "underline" : "none",
@@ -1895,7 +1897,6 @@ const stylesBtnLink = {
   fontStyle: "normal",
   fontWeight: "500",
   lineHeight: "1rem",
-  padding: ".25em",
   textDecorationLine: "underline",
   width: "fit-content",
   _hover: {
@@ -2238,20 +2239,104 @@ function Header$1() {
   });
 }
 Header$1.displayName = "Header";
-function DateStatus({
-  date
-}) {
-  if (date == null || date.length === 0) {
-    return null;
+const AVATAR_COLORS = ["#0076ba", "#229f9c", "#2cb26b", "#30baed", "#95569e", "#9bc03a", "#d84315", "#f5a623", "#f6712f", "#ff6363"];
+const getColorIndex = (fullName) => {
+  var _a;
+  const trimmedNameLength = (_a = fullName == null ? void 0 : fullName.trim().length) != null ? _a : 0;
+  return trimmedNameLength % 10;
+};
+const getAvatarColor = (fullName) => {
+  const position = getColorIndex(fullName);
+  return AVATAR_COLORS[position];
+};
+const getInitials = (fullName) => fullName.split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase();
+const Avatar = ({
+  fullName,
+  picture,
+  size = 50,
+  fontSize = 14,
+  alt = "Avatar",
+  id,
+  borderDecoration = false
+}) => {
+  const [bgColor, setBgColor] = useState("");
+  const [imageValid, setImageValid] = useState(false);
+  useEffect(() => {
+    setBgColor(getAvatarColor(fullName));
+  }, [fullName]);
+  const wrapperStyle = {
+    alignItems: "center",
+    backgroundColor: (fullName == null ? void 0 : fullName.length) === 0 ? "#fff" : bgColor,
+    border: borderDecoration ? `3px solid #0189FF` : "none",
+    borderRadius: "50%",
+    display: "flex",
+    flexShrink: 0,
+    height: `${size}px`,
+    justifyContent: "center",
+    margin: 0,
+    overflow: "hidden",
+    width: `${size}px`,
+    boxSizing: "border-box"
+  };
+  const initialsStyle = {
+    color: "#fff",
+    fontFamily: "Roboto, sans-serif",
+    fontSize: `${fontSize}px`,
+    fontWeight: "bold",
+    lineHeight: "30px",
+    textTransform: "uppercase"
+  };
+  const imgStyle = {
+    height: "100%",
+    width: "100%",
+    objectFit: "cover",
+    display: "block"
+  };
+  if (!fullName || fullName.length === 0) {
+    return /* @__PURE__ */ jsx("figure", {
+      style: wrapperStyle,
+      "data-testid": "Avatar",
+      "aria-hidden": "true",
+      id
+    });
   }
-  return /* @__PURE__ */ jsx(Text$1, {
-    fontSize: ".75rem",
-    color: vars("colors-neutral-darkCharcoal"),
-    m: "0",
-    children: date
+  if (picture) {
+    return /* @__PURE__ */ jsxs("figure", {
+      style: wrapperStyle,
+      "data-testid": "Avatar",
+      role: "presentation",
+      children: [!imageValid && /* @__PURE__ */ jsx("span", {
+        style: initialsStyle,
+        id,
+        "aria-hidden": "true",
+        children: getInitials(fullName)
+      }), /* @__PURE__ */ jsx("img", {
+        src: picture,
+        alt,
+        id: imageValid ? id : void 0,
+        role: "presentation",
+        style: {
+          ...imgStyle,
+          display: imageValid ? "block" : "none"
+        },
+        onLoad: () => setImageValid(true),
+        onError: () => setImageValid(false)
+      })]
+    });
+  }
+  return /* @__PURE__ */ jsx("figure", {
+    style: wrapperStyle,
+    "data-testid": "Avatar",
+    role: "presentation",
+    children: bgColor ? /* @__PURE__ */ jsx("span", {
+      style: initialsStyle,
+      id,
+      "aria-hidden": "true",
+      children: getInitials(fullName)
+    }) : null
   });
-}
-DateStatus.displayName = "DateStatus";
+};
+Avatar.displayName = "Avatar";
 function IconSelection({
   type,
   progressValue = 0
@@ -2300,6 +2385,20 @@ function CourseStatus({
     })]
   });
 }
+function DateStatus({
+  date
+}) {
+  if (date == null || date.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx(Text$1, {
+    fontSize: ".75rem",
+    color: vars("colors-neutral-darkCharcoal"),
+    m: "0",
+    children: date
+  });
+}
+DateStatus.displayName = "DateStatus";
 function Section() {
   const {
     name,
@@ -2360,13 +2459,10 @@ function Section() {
           }), /* @__PURE__ */ jsx(Box, {
             display: "inline-block",
             ml: ".625rem",
-            children: item.href !== void 0 && ((_a = item.href) == null ? void 0 : _a.length) > 0 ? /* @__PURE__ */ jsx(Link, {
-              isExternal: true,
+            children: item.href !== void 0 && ((_a = item.href) == null ? void 0 : _a.length) > 0 ? /* @__PURE__ */ jsx(BtnLink, {
               href: item.href,
-              color: vars("colors-main-deepSkyBlue"),
-              textDecor: "underline",
-              fontWeight: "500",
-              fontSize: ".75rem",
+              p: "0",
+              target: "_self",
               children: item.text
             }) : /* @__PURE__ */ jsx(Text$1, {
               m: "0",
@@ -6862,104 +6958,6 @@ function skipAttributesToProps(node2) {
 })(lib$3);
 var HTMLReactParser = /* @__PURE__ */ getDefaultExportFromCjs(lib$3);
 var ReactParser = HTMLReactParser.default || HTMLReactParser;
-const AVATAR_COLORS = ["#0076ba", "#229f9c", "#2cb26b", "#30baed", "#95569e", "#9bc03a", "#d84315", "#f5a623", "#f6712f", "#ff6363"];
-const getColorIndex = (fullName) => {
-  var _a;
-  const trimmedNameLength = (_a = fullName == null ? void 0 : fullName.trim().length) != null ? _a : 0;
-  return trimmedNameLength % 10;
-};
-const getAvatarColor = (fullName) => {
-  const position = getColorIndex(fullName);
-  return AVATAR_COLORS[position];
-};
-const getInitials = (fullName) => fullName.split(" ").map((word) => word[0]).slice(0, 2).join("").toUpperCase();
-const Avatar = ({
-  fullName,
-  picture,
-  size = 50,
-  fontSize = 14,
-  alt = "Avatar",
-  id,
-  borderDecoration = false
-}) => {
-  const [bgColor, setBgColor] = useState("");
-  const [imageValid, setImageValid] = useState(false);
-  useEffect(() => {
-    setBgColor(getAvatarColor(fullName));
-  }, [fullName]);
-  const wrapperStyle = {
-    alignItems: "center",
-    backgroundColor: (fullName == null ? void 0 : fullName.length) === 0 ? "#fff" : bgColor,
-    border: borderDecoration ? `3px solid #0189FF` : "none",
-    borderRadius: "50%",
-    display: "flex",
-    flexShrink: 0,
-    height: `${size}px`,
-    justifyContent: "center",
-    margin: 0,
-    overflow: "hidden",
-    width: `${size}px`,
-    boxSizing: "border-box"
-  };
-  const initialsStyle = {
-    color: "#fff",
-    fontFamily: "Roboto, sans-serif",
-    fontSize: `${fontSize}px`,
-    fontWeight: "bold",
-    lineHeight: "30px",
-    textTransform: "uppercase"
-  };
-  const imgStyle = {
-    height: "100%",
-    width: "100%",
-    objectFit: "cover",
-    display: "block"
-  };
-  if (!fullName || fullName.length === 0) {
-    return /* @__PURE__ */ jsx("figure", {
-      style: wrapperStyle,
-      "data-testid": "Avatar",
-      "aria-hidden": "true",
-      id
-    });
-  }
-  if (picture) {
-    return /* @__PURE__ */ jsxs("figure", {
-      style: wrapperStyle,
-      "data-testid": "Avatar",
-      role: "presentation",
-      children: [!imageValid && /* @__PURE__ */ jsx("span", {
-        style: initialsStyle,
-        id,
-        "aria-hidden": "true",
-        children: getInitials(fullName)
-      }), /* @__PURE__ */ jsx("img", {
-        src: picture,
-        alt,
-        id: imageValid ? id : void 0,
-        role: "presentation",
-        style: {
-          ...imgStyle,
-          display: imageValid ? "block" : "none"
-        },
-        onLoad: () => setImageValid(true),
-        onError: () => setImageValid(false)
-      })]
-    });
-  }
-  return /* @__PURE__ */ jsx("figure", {
-    style: wrapperStyle,
-    "data-testid": "Avatar",
-    role: "presentation",
-    children: bgColor ? /* @__PURE__ */ jsx("span", {
-      style: initialsStyle,
-      id,
-      "aria-hidden": "true",
-      children: getInitials(fullName)
-    }) : null
-  });
-};
-Avatar.displayName = "Avatar";
 const alertStates = {
   success: {
     icon: /* @__PURE__ */ jsx(SuccessWhite, {}),
@@ -7719,6 +7717,7 @@ const useModalConfig = ({
     }
   };
 };
+const StyledModalContent$1 = ModalContent$1;
 const uiKitModalIsDesktop = 641;
 const ModalPadding = {
   py: "32px",
@@ -7773,7 +7772,7 @@ const Modal = ({
           }
         }
       },
-      children: /* @__PURE__ */ jsx(ModalContent$1, {
+      children: /* @__PURE__ */ jsx(StyledModalContent$1, {
         ...modalConfig.contentProps,
         children: /* @__PURE__ */ jsx(ModalContentBase, {
           fixedButtons,
@@ -11556,8 +11555,9 @@ const SimpleCourseBox = ({
   noBorder = false
 }) => {
   const link = !isEnabled || !href || href === "" ? void 0 : href;
+  const [isDesktop] = useMediaQuery("(min-width: 768px)");
   return /* @__PURE__ */ jsx(StyledLinkBox, {
-    p: "16px 0",
+    p: isDesktop ? "16px 24px" : "16px",
     borderBottom: noBorder ? "none" : `1px solid ${vars("colors-neutral-platinum")}`,
     _hover: {
       backgroundColor: link ? vars("colors-neutral-cultured2") : "none",
@@ -11575,10 +11575,10 @@ const SimpleCourseBox = ({
       gap: "24px",
       alignItems: "center",
       justifyContent: "space-between",
-      pr: "8px",
       children: [/* @__PURE__ */ jsxs(StyledFlex, {
-        gap: "24px",
-        alignItems: "center",
+        gap: isDesktop ? "24px" : "16px",
+        alignItems: isDesktop ? "center" : "flex-start",
+        flexDir: isDesktop ? "row" : "column",
         children: [/* @__PURE__ */ jsx(StyledImage, {
           src: img,
           w: "150px",