@eclass/ui-kit 1.36.0 → 1.38.0

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

@@ -9545,7 +9545,7 @@ function _objectWithoutPropertiesLoose$e(source, excluded) {
   }
   return target;
 }
-var _excluded$g = ["containerRef"];
+var _excluded$h = ["containerRef"];
 var _createContext$5 = createContext({
   strict: false,
   name: "PortalContext"
@@ -9628,7 +9628,7 @@ var ContainerPortal = function ContainerPortal2(props) {
   return null;
 };
 function Portal(props) {
-  var containerRef = props.containerRef, rest = _objectWithoutPropertiesLoose$e(props, _excluded$g);
+  var containerRef = props.containerRef, rest = _objectWithoutPropertiesLoose$e(props, _excluded$h);
   return containerRef ? /* @__PURE__ */ React.createElement(ContainerPortal, _extends$f({
     containerRef
   }, rest)) : /* @__PURE__ */ React.createElement(DefaultPortal, rest);
@@ -11401,7 +11401,7 @@ function _objectWithoutPropertiesLoose$d(source, excluded) {
   }
   return target;
 }
-var _excluded$f = ["__cssMap", "__cssVars", "__breakpoints"];
+var _excluded$g = ["__cssMap", "__cssVars", "__breakpoints"];
 var tokens = ["colors", "borders", "borderWidths", "borderStyles", "fonts", "fontSizes", "fontWeights", "letterSpacings", "lineHeights", "radii", "space", "shadows", "sizes", "zIndices", "transition", "blur"];
 function extractTokens(theme2) {
   var _tokens = tokens;
@@ -11414,7 +11414,7 @@ function omitVars(rawTheme) {
   rawTheme.__cssMap;
   rawTheme.__cssVars;
   rawTheme.__breakpoints;
-  var cleanTheme = _objectWithoutPropertiesLoose$d(rawTheme, _excluded$f);
+  var cleanTheme = _objectWithoutPropertiesLoose$d(rawTheme, _excluded$g);
   return cleanTheme;
 }
 function flattenTokens(_ref2) {
@@ -11917,7 +11917,7 @@ var validHTMLProps = /* @__PURE__ */ new Set(["htmlWidth", "htmlHeight", "htmlSi
 var shouldForwardProp = function shouldForwardProp2(prop2) {
   return validHTMLProps.has(prop2) || !allPropNames.has(prop2);
 };
-var _excluded$1$4 = ["theme", "css", "__css", "sx"], _excluded2$4 = ["baseStyle"];
+var _excluded$1$4 = ["theme", "css", "__css", "sx"], _excluded2$5 = ["baseStyle"];
 var toCSSObject = function toCSSObject2(_ref2) {
   var baseStyle22 = _ref2.baseStyle;
   return function(props) {
@@ -11933,7 +11933,7 @@ var toCSSObject = function toCSSObject2(_ref2) {
   };
 };
 function styled(component, options) {
-  var _ref2 = options != null ? options : {}, baseStyle22 = _ref2.baseStyle, styledOptions = _objectWithoutPropertiesLoose$c(_ref2, _excluded2$4);
+  var _ref2 = options != null ? options : {}, baseStyle22 = _ref2.baseStyle, styledOptions = _objectWithoutPropertiesLoose$c(_ref2, _excluded2$5);
   if (!styledOptions.shouldForwardProp) {
     styledOptions.shouldForwardProp = shouldForwardProp;
   }
@@ -11945,7 +11945,7 @@ function styled(component, options) {
 function forwardRef(component) {
   return /* @__PURE__ */ React.forwardRef(component);
 }
-var _excluded$e = ["styleConfig"];
+var _excluded$f = ["styleConfig"];
 function useStyleConfig(themeKey, props, opts) {
   var _styleConfig$defaultP;
   if (props === void 0) {
@@ -11954,7 +11954,7 @@ function useStyleConfig(themeKey, props, opts) {
   if (opts === void 0) {
     opts = {};
   }
-  var _props = props, styleConfigProp = _props.styleConfig, rest = _objectWithoutPropertiesLoose$c(_props, _excluded$e);
+  var _props = props, styleConfigProp = _props.styleConfig, rest = _objectWithoutPropertiesLoose$c(_props, _excluded$f);
   var _useChakra = useChakra(), theme2 = _useChakra.theme, colorMode = _useChakra.colorMode;
   var themeStyleConfig = memoizedGet(theme2, "components." + themeKey);
   var styleConfig = styleConfigProp || themeStyleConfig;
@@ -16581,7 +16581,7 @@ function _objectWithoutPropertiesLoose$b(source, excluded) {
   }
   return target;
 }
-var _excluded$d = ["as", "viewBox", "color", "focusable", "children", "className", "__css"];
+var _excluded$e = ["as", "viewBox", "color", "focusable", "children", "className", "__css"];
 var fallbackIcon = {
   path: /* @__PURE__ */ React.createElement("g", {
     stroke: "currentColor",
@@ -16604,7 +16604,7 @@ var fallbackIcon = {
   viewBox: "0 0 24 24"
 };
 var Icon = /* @__PURE__ */ forwardRef(function(props, ref) {
-  var element = props.as, viewBox = props.viewBox, _props$color = props.color, color2 = _props$color === void 0 ? "currentColor" : _props$color, _props$focusable = props.focusable, focusable = _props$focusable === void 0 ? false : _props$focusable, children = props.children, className = props.className, __css = props.__css, rest = _objectWithoutPropertiesLoose$b(props, _excluded$d);
+  var element = props.as, viewBox = props.viewBox, _props$color = props.color, color2 = _props$color === void 0 ? "currentColor" : _props$color, _props$focusable = props.focusable, focusable = _props$focusable === void 0 ? false : _props$focusable, children = props.children, className = props.className, __css = props.__css, rest = _objectWithoutPropertiesLoose$b(props, _excluded$e);
   var _className = cx("chakra-icon", className);
   var styles2 = _extends$a({
     w: "1em",
@@ -16917,22 +16917,22 @@ function getVelocity$1(visualElement2) {
   });
   return velocity;
 }
-function resolveVariantFromProps(props, definition, custom, currentValues, currentVelocity) {
+function resolveVariantFromProps(props, definition, custom, currentValues2, currentVelocity) {
   var _a;
-  if (currentValues === void 0) {
-    currentValues = {};
+  if (currentValues2 === void 0) {
+    currentValues2 = {};
   }
   if (currentVelocity === void 0) {
     currentVelocity = {};
   }
   if (typeof definition === "function") {
-    definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
+    definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues2, currentVelocity);
   }
   if (typeof definition === "string") {
     definition = (_a = props.variants) === null || _a === void 0 ? void 0 : _a[definition];
   }
   if (typeof definition === "function") {
-    definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues, currentVelocity);
+    definition = definition(custom !== null && custom !== void 0 ? custom : props.custom, currentValues2, currentVelocity);
   }
   return definition;
 }
@@ -23322,9 +23322,9 @@ function useImage(props) {
   }, [status, load, ignoreFallback]);
   return ignoreFallback ? "loaded" : status;
 }
-var _excluded$c = ["htmlWidth", "htmlHeight", "alt"], _excluded2$3 = ["fallbackSrc", "fallback", "src", "srcSet", "align", "fit", "loading", "ignoreFallback", "crossOrigin"];
+var _excluded$d = ["htmlWidth", "htmlHeight", "alt"], _excluded2$3 = ["fallbackSrc", "fallback", "src", "srcSet", "align", "fit", "loading", "ignoreFallback", "crossOrigin"];
 var NativeImage = /* @__PURE__ */ React.forwardRef(function(props, ref) {
-  var htmlWidth = props.htmlWidth, htmlHeight = props.htmlHeight, alt = props.alt, rest = _objectWithoutPropertiesLoose$9(props, _excluded$c);
+  var htmlWidth = props.htmlWidth, htmlHeight = props.htmlHeight, alt = props.alt, rest = _objectWithoutPropertiesLoose$9(props, _excluded$d);
   return /* @__PURE__ */ React.createElement("img", _extends$8({
     width: htmlWidth,
     height: htmlHeight,
@@ -23406,7 +23406,7 @@ function _objectWithoutPropertiesLoose$8(source, excluded) {
   }
   return target;
 }
-var _excluded$b = ["label", "thickness", "speed", "emptyColor", "className"];
+var _excluded$c = ["label", "thickness", "speed", "emptyColor", "className"];
 var spin$1 = keyframes$2({
   "0%": {
     transform: "rotate(0deg)"
@@ -23417,7 +23417,7 @@ var spin$1 = keyframes$2({
 });
 var Spinner = /* @__PURE__ */ forwardRef(function(props, ref) {
   var styles2 = useStyleConfig("Spinner", props);
-  var _omitThemingProps = omitThemingProps(props), _omitThemingProps$lab = _omitThemingProps.label, label = _omitThemingProps$lab === void 0 ? "Loading..." : _omitThemingProps$lab, _omitThemingProps$thi = _omitThemingProps.thickness, thickness = _omitThemingProps$thi === void 0 ? "2px" : _omitThemingProps$thi, _omitThemingProps$spe = _omitThemingProps.speed, speed = _omitThemingProps$spe === void 0 ? "0.45s" : _omitThemingProps$spe, _omitThemingProps$emp = _omitThemingProps.emptyColor, emptyColor = _omitThemingProps$emp === void 0 ? "transparent" : _omitThemingProps$emp, className = _omitThemingProps.className, rest = _objectWithoutPropertiesLoose$8(_omitThemingProps, _excluded$b);
+  var _omitThemingProps = omitThemingProps(props), _omitThemingProps$lab = _omitThemingProps.label, label = _omitThemingProps$lab === void 0 ? "Loading..." : _omitThemingProps$lab, _omitThemingProps$thi = _omitThemingProps.thickness, thickness = _omitThemingProps$thi === void 0 ? "2px" : _omitThemingProps$thi, _omitThemingProps$spe = _omitThemingProps.speed, speed = _omitThemingProps$spe === void 0 ? "0.45s" : _omitThemingProps$spe, _omitThemingProps$emp = _omitThemingProps.emptyColor, emptyColor = _omitThemingProps$emp === void 0 ? "transparent" : _omitThemingProps$emp, className = _omitThemingProps.className, rest = _objectWithoutPropertiesLoose$8(_omitThemingProps, _excluded$c);
   var _className = cx("chakra-spinner", className);
   var spinnerStyles = _extends$7({
     display: "inline-block",
@@ -23677,6 +23677,32 @@ var Center = chakra("div", {
     justifyContent: "center"
   }
 });
+var _excluded$b = ["borderLeftWidth", "borderBottomWidth", "borderTopWidth", "borderRightWidth", "borderWidth", "borderStyle", "borderColor"], _excluded2$4 = ["className", "orientation", "__css"];
+var Divider = /* @__PURE__ */ forwardRef(function(props, ref) {
+  var _useStyleConfig = useStyleConfig("Divider", props), borderLeftWidth = _useStyleConfig.borderLeftWidth, borderBottomWidth = _useStyleConfig.borderBottomWidth, borderTopWidth = _useStyleConfig.borderTopWidth, borderRightWidth = _useStyleConfig.borderRightWidth, borderWidth = _useStyleConfig.borderWidth, borderStyle = _useStyleConfig.borderStyle, borderColor = _useStyleConfig.borderColor, styles2 = _objectWithoutPropertiesLoose$5(_useStyleConfig, _excluded$b);
+  var _omitThemingProps = omitThemingProps(props), className = _omitThemingProps.className, _omitThemingProps$ori = _omitThemingProps.orientation, orientation = _omitThemingProps$ori === void 0 ? "horizontal" : _omitThemingProps$ori, __css = _omitThemingProps.__css, rest = _objectWithoutPropertiesLoose$5(_omitThemingProps, _excluded2$4);
+  var dividerStyles = {
+    vertical: {
+      borderLeftWidth: borderLeftWidth || borderRightWidth || borderWidth || "1px",
+      height: "100%"
+    },
+    horizontal: {
+      borderBottomWidth: borderBottomWidth || borderTopWidth || borderWidth || "1px",
+      width: "100%"
+    }
+  };
+  return /* @__PURE__ */ React.createElement(chakra.hr, _extends$4({
+    ref,
+    "aria-orientation": orientation
+  }, rest, {
+    __css: _extends$4({}, styles2, {
+      border: "0",
+      borderColor,
+      borderStyle
+    }, dividerStyles[orientation], __css),
+    className: cx("chakra-divider", className)
+  }));
+});
 var _excluded$a = ["direction", "align", "justify", "wrap", "basis", "grow", "shrink"];
 var Flex = /* @__PURE__ */ forwardRef(function(props, ref) {
   var direction2 = props.direction, align = props.align, justify = props.justify, wrap3 = props.wrap, basis = props.basis, grow = props.grow, shrink = props.shrink, rest = _objectWithoutPropertiesLoose$5(props, _excluded$a);
@@ -25834,12 +25860,33 @@ function useCallbackRef(initialValue, callback) {
   ref.callback = callback;
   return ref.facade;
 }
+var currentValues = /* @__PURE__ */ new WeakMap();
 function useMergeRefs(refs, defaultValue) {
-  return useCallbackRef(defaultValue || null, function(newValue) {
+  var callbackRef = useCallbackRef(defaultValue || null, function(newValue) {
     return refs.forEach(function(ref) {
       return assignRef(ref, newValue);
     });
   });
+  React.useLayoutEffect(function() {
+    var oldValue = currentValues.get(callbackRef);
+    if (oldValue) {
+      var prevRefs_1 = new Set(oldValue);
+      var nextRefs_1 = new Set(refs);
+      var current_1 = callbackRef.current;
+      prevRefs_1.forEach(function(ref) {
+        if (!nextRefs_1.has(ref)) {
+          assignRef(ref, null);
+        }
+      });
+      nextRefs_1.forEach(function(ref) {
+        if (!prevRefs_1.has(ref)) {
+          assignRef(ref, current_1);
+        }
+      });
+    }
+    currentValues.set(callbackRef, refs);
+  }, [refs]);
+  return callbackRef;
 }
 var hiddenGuard = {
   width: "1px",
@@ -26100,24 +26147,24 @@ function _typeof(o2) {
     return o3 && "function" == typeof Symbol && o3.constructor === Symbol && o3 !== Symbol.prototype ? "symbol" : typeof o3;
   }, _typeof(o2);
 }
-function _toPrimitive(input, hint) {
-  if (_typeof(input) !== "object" || input === null)
-    return input;
-  var prim = input[Symbol.toPrimitive];
-  if (prim !== void 0) {
-    var res = prim.call(input, hint || "default");
-    if (_typeof(res) !== "object")
-      return res;
+function toPrimitive(t2, r2) {
+  if ("object" != _typeof(t2) || !t2)
+    return t2;
+  var e2 = t2[Symbol.toPrimitive];
+  if (void 0 !== e2) {
+    var i2 = e2.call(t2, r2 || "default");
+    if ("object" != _typeof(i2))
+      return i2;
     throw new TypeError("@@toPrimitive must return a primitive value.");
   }
-  return (hint === "string" ? String : Number)(input);
+  return ("string" === r2 ? String : Number)(t2);
 }
-function _toPropertyKey(arg) {
-  var key = _toPrimitive(arg, "string");
-  return _typeof(key) === "symbol" ? key : String(key);
+function toPropertyKey(t2) {
+  var i2 = toPrimitive(t2, "string");
+  return "symbol" == _typeof(i2) ? i2 : String(i2);
 }
 function _defineProperty(obj, key, value) {
-  key = _toPropertyKey(key);
+  key = toPropertyKey(key);
   if (key in obj) {
     Object.defineProperty(obj, key, {
       value,
@@ -29654,10 +29701,23 @@ function BtnLink({
   children,
   m: m2 = "0",
   onClick,
-  id: id2
+  id: id2,
+  as = "button",
+  href = "",
+  textDecorationLine = true,
+  fontSize = "0.875rem"
 }) {
+  const typeButton = {
+    button: {
+      onClick
+    },
+    a: {
+      href,
+      target: "_blank"
+    }
+  };
   return /* @__PURE__ */ jsx(Box, {
-    as: "button",
+    as,
     id: id2,
     backgroundColor: "transparent",
     borderStyle: "none",
@@ -29667,16 +29727,16 @@ function BtnLink({
     fontFamily: "Roboto",
     fontStyle: "normal",
     fontWeight: "500",
-    fontSize: ".875rem",
+    fontSize,
     lineHeight: "1rem",
-    textDecorationLine: "underline",
+    textDecorationLine: textDecorationLine ? "underline" : "none",
     color: vars("colors-main-deepSkyBlue"),
     m: m2,
-    onClick,
     _hover: {
       color: vars("colors-neutral-darkCharcoal"),
       cursor: "pointer"
     },
+    ...typeButton[as],
     children
   });
 }
@@ -31131,7 +31191,9 @@ function Alert({
   isFlash = false,
   onClick,
   state: state2,
-  m: m2
+  m: m2,
+  endTextLink,
+  onClickLink
 }) {
   const [isMobile] = useMediaQuery("(max-width: 425px)");
   const handleClick = () => {
@@ -31186,7 +31248,12 @@ function Alert({
           fontWeight: "400",
           lineHeight: "28px",
           color: vars("colors-neutral-darkCharcoal"),
-          children
+          children: /* @__PURE__ */ jsxs("p", {
+            children: [children, endTextLink && onClickLink && /* @__PURE__ */ jsx(BtnLink, {
+              onClick: onClickLink,
+              children: endTextLink
+            })]
+          })
         }), buttonType === "link" && /* @__PURE__ */ jsx(BtnLink, {
           onClick: handleClick,
           children: buttonText
@@ -31674,5 +31741,63 @@ const useFlashNotification = ({ state: state2, message }) => {
     }
   };
 };
-export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, CourseStatus, FlashNotification, index as Icons, Label, NewTooltip, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
+function ModalAlert({
+  showModal,
+  typeAlert,
+  title,
+  description,
+  optionsButton
+}) {
+  const [isDesktop] = useMediaQuery("(min-width: 650px)");
+  const showBorder = optionsButton.length > 1;
+  return /* @__PURE__ */ jsxs(Modal, {
+    isOpen: showModal,
+    onClose: () => {
+    },
+    closeOnEsc: false,
+    closeOnOverlayClick: false,
+    size: isDesktop ? "xl" : "sm",
+    children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
+      children: [/* @__PURE__ */ jsxs(Box, {
+        alignItems: "center",
+        justifyContent: "center",
+        textAlign: "center",
+        py: 8,
+        children: [/* @__PURE__ */ jsx(Box, {
+          display: "flex",
+          justifyContent: "center",
+          children: alertStates[typeAlert].icon
+        }), /* @__PURE__ */ jsx(ModalHeader, {
+          children: title
+        }), /* @__PURE__ */ jsx(ModalBody, {
+          children: description
+        })]
+      }), /* @__PURE__ */ jsx(Divider, {
+        colorScheme: "E6E6E6",
+        size: "2",
+        opacity: "1"
+      }), /* @__PURE__ */ jsx(ModalFooter, {
+        justifyContent: "center",
+        padding: "0",
+        children: optionsButton.map((option, index2) => {
+          return /* @__PURE__ */ jsx(Box, {
+            width: "99%",
+            textAlign: "center",
+            padding: "4",
+            borderLeftWidth: showBorder && option.id === optionsButton[1].id ? "1px" : "0",
+            borderLeftColor: "#E6E6E6",
+            children: /* @__PURE__ */ jsx(BtnLink, {
+              textDecorationLine: false,
+              fontSize: "1rem",
+              onClick: () => option.action(),
+              children: option.label
+            })
+          }, index2);
+        })
+      })]
+    })]
+  });
+}
+ModalAlert.displayName = "ModalAlert";
+export { Alert, Btn, BtnLink, BtnPrimary, BtnSecondary, BtnTertiary, CourseList, CourseStatus, FlashNotification, index as Icons, Label, ModalAlert, NewTooltip, Progress, Ripples, TinyAlert, dataFake, maxWidthCoursesList, theme, useFlashNotification, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map