@eclass/ui-kit 1.41.3 → 1.42.1

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

@@ -28616,6 +28616,8 @@ function Base({
     viewBox,
     color: color2,
     m: m2,
+    "aria-label": " ",
+    "aria-hidden": true,
     children: [/* @__PURE__ */ jsxs("title", {
       children: ["icon", title && `-${title}`]
     }), children]
@@ -29526,24 +29528,26 @@ function TinyAlert({
 }
 TinyAlert.displayName = "TinyAlert";
 function Btn({
+  ariaLabel,
   bg: bg2,
   borderColorActive = [vars("colors-main-deepSkyBlue"), vars("colors-neutral-white")],
   children,
   color: color2 = vars("colors-neutral-white"),
   disabled: disabled2 = false,
   fillLoader = vars("colors-neutral-white"),
+  id: id2,
   isFullWidth = false,
+  isLoading = false,
   leftIcon,
   m: m2 = "0",
-  isLoading = false,
   onClick,
   rightIcon,
+  role = "button",
   rounded = false,
   size: size2 = "regular",
   touchDark = false,
   type = "button",
-  tabIndex,
-  id: id2
+  tabIndex = 0
 }) {
   var _a, _b, _c;
   let showChildren = children != null ? children : null;
@@ -29566,38 +29570,40 @@ function Btn({
     children: /* @__PURE__ */ jsx(Ripples$1, {
       color: touchColor,
       children: /* @__PURE__ */ jsx(Button, {
+        "aria-label": ariaLabel,
         id: id2,
-        fontWeight: "500",
-        fontSize: size2 === "regular" ? "medium" : "small",
+        role,
         bg: colorMain,
-        size: size2 === "regular" ? "md" : "sm",
         borderRadius,
         color: color2,
         className: onlyIcon,
         disabled: disabled2 && isLoading ? false : disabled2,
+        fontWeight: "500",
+        fontSize: size2 === "regular" ? "medium" : "small",
         height: "auto",
-        minHeight: size2 === "regular" ? "2.813rem" : "2rem",
-        minWidth: size2 === "regular" ? "9rem" : "auto",
-        lineHeight: "initial",
         iconSpacing: vars("space-xs"),
         isActive: false,
         isLoading,
+        isFullWidth,
+        lineHeight: "initial",
         leftIcon,
+        minHeight: size2 === "regular" ? "2.813rem" : "2rem",
+        minWidth: size2 === "regular" ? "9rem" : "auto",
         onClick: (e2) => {
           !isLoading && !disabled2 && (onClick == null ? void 0 : onClick(e2));
         },
-        type,
-        tabIndex,
+        position: "relative",
         paddingTop: size2 === "regular" ? paddingTopBottom : onlyIcon ? vars("space-xs") : vars("space-xxs"),
         paddingBottom: size2 === "regular" ? paddingTopBottom : onlyIcon ? vars("space-xs") : vars("space-xxs"),
         paddingLeft: size2 === "regular" ? vars("space-s") : vars("space-xs"),
         paddingRight: size2 === "regular" ? vars("space-s") : vars("space-xs"),
-        position: "relative",
-        isFullWidth,
         rightIcon,
+        type,
+        size: size2 === "regular" ? "md" : "sm",
         spinner: /* @__PURE__ */ jsx(Loader, {
           fill: fillLoader
         }),
+        tabIndex: disabled2 || isLoading ? -1 : tabIndex,
         _active: {
           bg: (_b = bg2 == null ? void 0 : bg2.main) != null ? _b : vars("colors-main-azureRadiance")
         },
@@ -29633,6 +29639,7 @@ function Btn({
 }
 Btn.displayName = "Btn";
 function BtnPrimary({
+  ariaLabel,
   children,
   disabled: disabled2 = false,
   isFullWidth = false,
@@ -29641,12 +29648,14 @@ function BtnPrimary({
   isLoading = false,
   onClick,
   rightIcon,
+  role = "button",
   size: size2 = "regular",
   type = "button",
   tabIndex,
   id: id2
 }) {
   return /* @__PURE__ */ jsx(Btn, {
+    ariaLabel,
     id: id2,
     disabled: disabled2,
     isFullWidth,
@@ -29655,6 +29664,7 @@ function BtnPrimary({
     m: m2,
     onClick,
     rightIcon,
+    role,
     size: size2,
     type,
     tabIndex,
@@ -29663,6 +29673,7 @@ function BtnPrimary({
 }
 BtnPrimary.displayName = "BtnPrimary";
 function BtnSecondary({
+  ariaLabel,
   children,
   disabled: disabled2 = false,
   isFullWidth = false,
@@ -29671,27 +29682,30 @@ function BtnSecondary({
   isLoading = false,
   onClick,
   rightIcon,
+  role = "button",
   size: size2 = "regular",
   type = "button",
   tabIndex,
   id: id2
 }) {
   return /* @__PURE__ */ jsx(Btn, {
+    ariaLabel,
     id: id2,
     bg: {
       main: vars("colors-main-veryLightBlue"),
       hover: vars("colors-main-linkWater")
     },
-    fillLoader: vars("colors-main-deepSkyBlue"),
     borderColorActive: [vars("colors-main-deepSkyBlue"), vars("colors-neutral-white")],
     color: vars("colors-main-deepSkyBlue"),
     disabled: disabled2,
+    fillLoader: vars("colors-main-deepSkyBlue"),
     isFullWidth,
     isLoading,
     leftIcon,
     m: m2,
     onClick,
     rightIcon,
+    role,
     size: size2,
     touchDark: true,
     type,
@@ -29701,19 +29715,21 @@ function BtnSecondary({
 }
 BtnSecondary.displayName = "BtnSecondary";
 function BtnTertiary({
+  ariaLabel,
+  activeWhenPress = false,
   children,
+  id: id2,
   iconStatus = "multimedia",
   iconCustom,
-  rightIcon,
-  withoutColor = false,
   m: m2 = "0",
-  type = "button",
-  tabIndex,
-  id: id2,
-  activeWhenPress = false,
   onClick,
   onMouseEnter,
-  onMouseLeave
+  onMouseLeave,
+  rightIcon,
+  role = "button",
+  type = "button",
+  tabIndex,
+  withoutColor = false
 }) {
   const gray = vars("colors-neutral-gray");
   const blue = vars("colors-main-deepSkyBlue");
@@ -29762,30 +29778,32 @@ function BtnTertiary({
   const rIcon = rightIcon ? icon : void 0;
   const lIcon = !rightIcon ? icon : void 0;
   return /* @__PURE__ */ jsx(Button, {
+    "aria-label": ariaLabel,
     id: id2,
+    role,
     type,
     tabIndex,
-    height: "24px",
     background: "transparent",
+    borderRadius: "12px",
+    color: gray,
     fontFamily: "Roboto",
     fontStyle: "normal",
     fontWeight: "500",
     fontSize: "14px",
-    lineHeight: "16px",
-    textDecorationLine: "underline",
-    borderRadius: "12px",
     gap: "0.5rem",
-    paddingTop: vars("space-xxs"),
-    paddingBottom: vars("space-xxs"),
-    paddingLeft: vars("space-xs"),
-    paddingRight: vars("space-xs"),
-    color: gray,
-    rightIcon: rIcon,
+    height: "24px",
+    lineHeight: "16px",
     leftIcon: lIcon,
+    rightIcon: rIcon,
     m: m2,
     onClick,
     onMouseEnter,
     onMouseLeave,
+    paddingTop: vars("space-xxs"),
+    paddingBottom: vars("space-xxs"),
+    paddingLeft: vars("space-xs"),
+    paddingRight: vars("space-xs"),
+    textDecorationLine: "underline",
     _hover: {
       color: `${blue}`
     },
@@ -29809,14 +29827,17 @@ function BtnTertiary({
 }
 BtnTertiary.displayName = "BtnTertiary";
 function BtnLink({
+  as = "a",
+  ariaLabel,
   children,
+  fontSize = "0.875rem",
+  href = "",
+  id: id2,
   m: m2 = "0",
   onClick,
-  id: id2,
-  as = "button",
-  href = "",
-  textDecorationLine = true,
-  fontSize = "0.875rem"
+  role = "link",
+  tabIndex,
+  textDecorationLine = true
 }) {
   const typeButton = {
     button: {
@@ -29829,19 +29850,23 @@ function BtnLink({
   };
   return /* @__PURE__ */ jsx(Box, {
     as,
+    "aria-label": ariaLabel,
     id: id2,
+    role,
     backgroundColor: "transparent",
     borderStyle: "none",
     className: "linkButton",
-    width: "fit-content",
-    padding: ".25em",
+    color: vars("colors-main-deepSkyBlue"),
     fontFamily: "Roboto",
     fontStyle: "normal",
     fontWeight: "500",
     fontSize,
     lineHeight: "1rem",
+    onClick,
+    padding: ".25em",
+    tabIndex,
     textDecorationLine: textDecorationLine ? "underline" : "none",
-    color: vars("colors-main-deepSkyBlue"),
+    width: "fit-content",
     m: m2,
     _hover: {
       color: vars("colors-neutral-darkCharcoal"),