@eclass/ui-kit 1.53.5 → 1.53.7

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

@@ -1,4 +1,4 @@
-import { extendTheme, Box, CircularProgress, Icon, Button, Tooltip, Flex, Stack, Center, Image, Text, HStack, Heading, List, ListItem, Link, Modal, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, useMediaQuery, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
+import { extendTheme, Box, CircularProgress, Icon, Button, useMediaQuery, Tooltip, Flex, Stack, Center, Image, Text, HStack, Heading, List, ListItem, Link, Modal, ModalContent, ModalHeader, ModalCloseButton, ModalBody, ModalFooter, ModalOverlay, useDisclosure, LinkBox, LinkOverlay, MenuButton, MenuGroup, Menu, MenuList } from "@chakra-ui/react";
 import * as React from "react";
 import React__default, { useEffect, useCallback, useState } from "react";
 const main = {
@@ -1860,6 +1860,7 @@ const NavBarButton = ({
   type
 }) => {
   var _a;
+  const [isMobile] = useMediaQuery("(max-width: 640px)");
   const buttonType = {
     accessibility: {
       icon: /* @__PURE__ */ jsx(Accessibility, {}),
@@ -1889,27 +1890,31 @@ const NavBarButton = ({
     id: isAccessibility ? "UserWayButton" : "",
     onClick: isAccessibility ? triggerWidget : onClick,
     sx: {
+      background: "none !important",
+      border: "1px transparent !important",
+      cursor: "pointer",
       display: "flex",
       gap: "8px",
       h: "30px",
       maxH: "30px",
+      p: "0",
       _hover: {
-        ".icon": {
+        ".nav-bar-icon": {
           bg: hoverBg
         },
-        ".text": {
+        ".nav-bar-text": {
           color: vars("colors-neutral-white")
         }
       },
       _active: {
-        ".icon": {
+        ".nav-bar-icon": {
           bg: onlyLink || isAccessibility ? hoverBg : activeBg
         },
-        ".text": {
+        ".nav-bar-text": {
           color: vars("colors-neutral-white")
         }
       },
-      ".icon": {
+      ".nav-bar-icon": {
         alignItems: "center",
         bg: vars("colors-main-blueGrey"),
         borderRadius: "100%",
@@ -1921,20 +1926,19 @@ const NavBarButton = ({
         role: "button",
         width: "30px"
       },
-      ".text": {
+      ".nav-bar-text": {
         alignContent: "center",
+        color: vars("colors-neutral-silverSand"),
         fontSize: "12px",
         fontWeight: "500",
-        forntFamily: "Roboto",
-        color: vars("colors-neutral-silverSand")
+        fontFamily: "Roboto"
       }
     },
     children: [/* @__PURE__ */ jsx(Box, {
-      className: "icon",
+      className: "nav-bar-icon",
       children: buttonType[type].icon
-    }), /* @__PURE__ */ jsx(Box, {
-      as: "span",
-      className: "text",
+    }), !isMobile && /* @__PURE__ */ jsx(Box, {
+      className: "nav-bar-text",
       children: buttonType[type].text
     })]
   });
@@ -5955,19 +5959,21 @@ const GoToCalendar = ({
     onClick: () => onlyToCalendar && onClick && onClick(),
     position: "relative",
     sx: {
+      background: "none",
+      border: "1px transparent",
       _hover: {
-        ".icon": {
+        ".nav-bar-icon": {
           bg: hoverBg
         },
-        ".text": {
+        ".nav-bar-text": {
           color: vars("colors-neutral-white")
         }
       },
       _active: {
-        ".icon": {
+        ".nav-bar-icon": {
           bg: onlyToCalendar ? hoverBg : activeBg
         },
-        ".text": {
+        ".nav-bar-text": {
           color: vars("colors-neutral-white")
         }
       }
@@ -6352,7 +6358,7 @@ const CalendarDropdownContainer = ({
         content: '""',
         display: isMenuOpen ? "block" : "none",
         height: "0",
-        left: "14%",
+        left: "11%",
         position: "absolute",
         top: "30px",
         transform: "translateX(-50%)",
@@ -6382,13 +6388,13 @@ const CalendarDropdownContainer = ({
         border: "none",
         borderRadius: isMobile ? "0" : "10px",
         boxShadow: isMobile ? "none" : "rgba(47, 47, 47, 0.2) -1px 6px 40px 0px",
-        left: isMobile ? "auto" : "-30px",
+        left: isMobile ? "auto" : "34pxpx",
         maxHeight: isMobile ? "calc(100vh - 62px)" : "auto",
         opacity: "1 !important",
         overflowY: isMobile ? "auto" : "hidden",
         padding: "0",
         position: "absolute",
-        top: isMobile ? "-6px !important" : "auto",
+        top: isMobile ? "-6px !important" : "1px",
         transform: "none !important",
         transition: "none !important",
         width: isMobile ? "100vw" : "500px"