@eclass/ui-kit 1.21.0 → 1.21.2

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

@@ -2760,13 +2760,13 @@ function getValidChildren(children) {
     return /* @__PURE__ */ React.isValidElement(child);
   });
 }
-var useSafeLayoutEffect = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
+var useSafeLayoutEffect$1 = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
 function useCallbackRef$1(fn6, deps) {
   if (deps === void 0) {
     deps = [];
   }
   var ref = React.useRef(fn6);
-  useSafeLayoutEffect(function() {
+  useSafeLayoutEffect$1(function() {
     ref.current = fn6;
   });
   return React.useCallback(function() {
@@ -9571,7 +9571,7 @@ var DefaultPortal = function DefaultPortal2(props) {
   var forceUpdate = useForceUpdate$1();
   var parentPortal = usePortalContext();
   var manager2 = usePortalManager();
-  useSafeLayoutEffect(function() {
+  useSafeLayoutEffect$1(function() {
     if (!tempNode.current)
       return;
     var doc2 = tempNode.current.ownerDocument;
@@ -9609,10 +9609,10 @@ var ContainerPortal = function ContainerPortal2(props) {
     return node2;
   }, [containerEl]);
   var forceUpdate = useForceUpdate$1();
-  useSafeLayoutEffect(function() {
+  useSafeLayoutEffect$1(function() {
     forceUpdate();
   }, []);
-  useSafeLayoutEffect(function() {
+  useSafeLayoutEffect$1(function() {
     if (!portal || !host)
       return;
     host.appendChild(portal);
@@ -23310,7 +23310,7 @@ function useImage(props) {
       imageRef.current = null;
     }
   };
-  useSafeLayoutEffect(function() {
+  useSafeLayoutEffect$1(function() {
     if (ignoreFallback)
       return void 0;
     if (status === "loading") {
@@ -23958,6 +23958,52 @@ var LinkBox = /* @__PURE__ */ forwardRef(function(props, ref) {
     }
   }));
 });
+var useSafeLayoutEffect = isBrowser$1 ? React.useLayoutEffect : React.useEffect;
+function useMediaQuery(query) {
+  var env = useEnvironment();
+  var queries2 = Array.isArray(query) ? query : [query];
+  var isSupported = isBrowser$1 && "matchMedia" in env.window;
+  var _React$useState = React.useState(queries2.map(function(query2) {
+    return isSupported ? !!env.window.matchMedia(query2).matches : false;
+  })), matches = _React$useState[0], setMatches = _React$useState[1];
+  useSafeLayoutEffect(function() {
+    if (!isSupported)
+      return void 0;
+    var mediaQueryList = queries2.map(function(query2) {
+      return env.window.matchMedia(query2);
+    });
+    var listenerList = mediaQueryList.map(function(_2, index2) {
+      var listener = function listener2(mqlEvent) {
+        var queryIndex = mediaQueryList.findIndex(function(mediaQuery) {
+          return mediaQuery.media === mqlEvent.media;
+        });
+        setMatches(function(matches2) {
+          var currentMatches = matches2.map(function(x2) {
+            return x2;
+          });
+          currentMatches[queryIndex] = mqlEvent.matches;
+          return currentMatches;
+        });
+      };
+      if (typeof mediaQueryList[index2].addEventListener === "function") {
+        mediaQueryList[index2].addEventListener("change", listener);
+      } else {
+        mediaQueryList[index2].addListener(listener);
+      }
+      return listener;
+    });
+    return function() {
+      mediaQueryList.forEach(function(_2, index2) {
+        if (typeof mediaQueryList[index2].removeEventListener === "function") {
+          mediaQueryList[index2].removeEventListener("change", listenerList[index2]);
+        } else {
+          mediaQueryList[index2].removeListener(listenerList[index2]);
+        }
+      });
+    };
+  }, []);
+  return matches;
+}
 var top = "top";
 var bottom = "bottom";
 var right = "right";
@@ -31066,19 +31112,39 @@ function Alert({
   buttonText,
   buttonIcon,
   buttonLink = false,
+  isFlash = false,
   onClick,
   state: state2,
   m: m2
 }) {
-  return /* @__PURE__ */ jsx(Box, {
+  const [isMobile] = useMediaQuery("(max-width: 425px)");
+  const handleClick = () => {
+    if (onClick) {
+      onClick();
+    }
+  };
+  let buttonType;
+  if (buttonText) {
+    buttonType = buttonLink ? "link" : "normal";
+  }
+  return /* @__PURE__ */ jsxs(Box, {
+    className: isFlash ? "flashNotification" : "embeddedAlert",
+    alignItems: !isMobile ? "center" : "unset",
     backgroundColor: alertStates[state2].bg,
     borderRadius: "8px",
-    padding: canDismiss ? "16px 28px 16px 16px" : "16px",
-    width: "max-content",
-    maxWidth: "796px",
+    display: "flex",
+    flexFlow: isMobile ? "column" : "row",
+    gap: !isFlash ? "16px" : "",
+    justifyContent: !isMobile ? "space-between" : "",
     margin: m2,
+    width: "100%",
+    maxWidth: "796px",
+    p: "1rem",
+    pr: canDismiss ? "1.75rem" : "1rem",
     position: "relative",
-    children: /* @__PURE__ */ jsxs(HStack, {
+    children: [/* @__PURE__ */ jsxs(HStack, {
+      gap: "10px",
+      className: "alertContent",
       sx: {
         ".linkButton": {
           fontSize: "16px"
@@ -31086,7 +31152,6 @@ function Alert({
       },
       children: [/* @__PURE__ */ jsx(Box, {
         className: "iconContainer",
-        marginRight: "10px",
         sx: {
           svg: {
             width: "auto"
@@ -31099,28 +31164,29 @@ function Alert({
         fontWeight: "400",
         lineHeight: "28px",
         color: vars("colors-neutral-darkCharcoal"),
-        children: [children, buttonText && onClick && buttonLink && /* @__PURE__ */ jsx(BtnLink, {
-          onClick,
+        children: [children, buttonType === "link" && /* @__PURE__ */ jsx(BtnLink, {
+          onClick: handleClick,
           children: buttonText
         })]
-      }), buttonText && onClick && !buttonLink && /* @__PURE__ */ jsx(BtnPrimary, {
-        leftIcon: buttonIcon,
-        onClick,
-        children: buttonText
-      }), canDismiss && /* @__PURE__ */ jsx(Box, {
-        cursor: "pointer",
-        marginLeft: "12px",
-        sx: {
-          svg: {
-            position: "absolute",
-            top: "16px",
-            right: "12px"
-          }
-        },
-        onClick,
-        children: /* @__PURE__ */ jsx(Close, {})
       })]
-    })
+    }), buttonType === "normal" && /* @__PURE__ */ jsx(BtnPrimary, {
+      isFullWidth: !!isMobile,
+      leftIcon: buttonIcon,
+      onClick: handleClick,
+      children: buttonText
+    }), canDismiss && /* @__PURE__ */ jsx(Box, {
+      cursor: "pointer",
+      marginLeft: "12px",
+      sx: {
+        svg: {
+          position: "absolute",
+          top: "16px",
+          right: "12px"
+        }
+      },
+      onClick,
+      children: /* @__PURE__ */ jsx(Close, {})
+    })]
   });
 }
 let e = { data: "" }, t = (t2) => "object" == typeof window ? ((t2 ? t2.querySelector("#_goober") : window._goober) || Object.assign((t2 || document.head).appendChild(document.createElement("style")), { innerHTML: " ", id: "_goober" })).firstChild : t2 || e, l = /(?:([\u0080-\uFFFF\w-%@]+) *:? *([^{;]+?);|([^;}{]*?) *{)|(}\s*)/g, a = /\/\*[^]*?\*\/|  +/g, n$1 = /\n+/g, o = (e2, t2) => {
@@ -31533,6 +31599,7 @@ function FlashNotification({
 }) {
   const showToast = useCallback(() => {
     n((t2) => /* @__PURE__ */ jsx(Alert, {
+      isFlash: true,
       state: state2,
       canDismiss: true,
       onClick: () => n.dismiss(t2.id),