@eclass/ui-kit 1.4.4 → 1.5.2

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

@@ -83,7 +83,7 @@ var StyleSheet = /* @__PURE__ */ function() {
   };
   _proto.flush = function flush() {
     this.tags.forEach(function(tag) {
-      return tag.parentNode.removeChild(tag);
+      return tag.parentNode && tag.parentNode.removeChild(tag);
     });
     this.tags = [];
     this.ctr = 0;
@@ -569,6 +569,22 @@ function memoize$1(fn) {
     return cache[arg];
   };
 }
+var identifierWithPointTracking = function identifierWithPointTracking2(begin, points, index) {
+  var previous = 0;
+  var character2 = 0;
+  while (true) {
+    previous = character2;
+    character2 = peek();
+    if (previous === 38 && character2 === 12) {
+      points[index] = 1;
+    }
+    if (token(character2)) {
+      break;
+    }
+    next();
+  }
+  return slice(begin, position$1);
+};
 var toRules = function toRules2(parsed, points) {
   var index = -1;
   var character2 = 44;
@@ -578,7 +594,7 @@ var toRules = function toRules2(parsed, points) {
         if (character2 === 38 && peek() === 12) {
           points[index] = 1;
         }
-        parsed[index] += identifier(position$1 - 1);
+        parsed[index] += identifierWithPointTracking(position$1 - 1, points, index);
         break;
       case 2:
         parsed[index] += delimit(character2);
@@ -2970,7 +2986,7 @@ var transition$2 = {
   transitionProperty: t.prop("transitionProperty", "transition.property"),
   transitionTimingFunction: t.prop("transitionTimingFunction", "transition.easing")
 };
-var typography$2 = {
+var typography$3 = {
   fontFamily: t.prop("fontFamily", "fonts"),
   fontSize: t.prop("fontSize", "fontSizes", transformFunctions.px),
   fontWeight: t.prop("fontWeight", "fontWeights"),
@@ -3084,7 +3100,7 @@ function _extends$p() {
   };
   return _extends$p.apply(this, arguments);
 }
-var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography$2, textDecoration, transform, list, transition$2);
+var systemProps = mergeWith({}, background, border, color, flexbox, layout, filter, ring, interactivity, grid, others, position, effect, space, typography$3, textDecoration, transform, list, transition$2);
 var layoutSystem = Object.assign({}, space, layout, flexbox, grid, position);
 objectKeys(layoutSystem);
 var propNames = [...objectKeys(systemProps), ...pseudoPropNames];
@@ -6894,7 +6910,7 @@ var Modal = {
   sizes: sizes$d,
   defaultProps: defaultProps$c
 };
-var typography = {
+var typography$1 = {
   letterSpacings: {
     tighter: "-0.05em",
     tight: "-0.025em",
@@ -6952,7 +6968,7 @@ var typography = {
     "9xl": "8rem"
   }
 };
-var typography$1 = typography;
+var typography$2 = typography$1;
 var _Input$baseStyle$fiel, _Input$baseStyle;
 function _extends$j() {
   _extends$j = Object.assign || function(target) {
@@ -7013,7 +7029,7 @@ function getSize(size2) {
     xs: "sm"
   };
   var _fontSize = (_sizeStyle$field$font = (_sizeStyle$field = sizeStyle.field) == null ? void 0 : _sizeStyle$field.fontSize) != null ? _sizeStyle$field$font : "md";
-  var fontSize = typography$1.fontSizes[_fontSize.toString()];
+  var fontSize = typography$2.fontSizes[_fontSize.toString()];
   return {
     field: _extends$j({}, sizeStyle.field, {
       paddingInlineEnd: $inputPadding.reference,
@@ -8377,14 +8393,14 @@ var components = {
   Tooltip,
   FormError
 };
-var borders = {
+var borders$1 = {
   none: 0,
   "1px": "1px solid",
   "2px": "2px solid",
   "4px": "4px solid",
   "8px": "8px solid"
 };
-var borders$1 = borders;
+var borders$2 = borders$1;
 var breakpoints = createBreakpoints({
   sm: "30em",
   md: "48em",
@@ -8616,7 +8632,7 @@ var colors$1 = {
   }
 };
 var colors$2 = colors$1;
-var radii = {
+var radii$1 = {
   none: "0",
   sm: "0.125rem",
   base: "0.25rem",
@@ -8627,7 +8643,7 @@ var radii = {
   "3xl": "1.5rem",
   full: "9999px"
 };
-var radii$1 = radii;
+var radii$2 = radii$1;
 var shadows = {
   xs: "0 0 0 1px rgba(0, 0, 0, 0.05)",
   sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
@@ -8713,14 +8729,14 @@ function _extends$b() {
 var foundations = _extends$b({
   breakpoints: breakpoints$1,
   zIndices: zIndices$1,
-  radii: radii$1,
+  radii: radii$2,
   blur: blur$1,
   colors: colors$2
-}, typography$1, {
+}, typography$2, {
   sizes: sizes$m,
   shadows: shadows$1,
   space: spacing,
-  borders: borders$1,
+  borders: borders$2,
   transition: transition$1
 });
 var foundations$1 = foundations;
@@ -8857,7 +8873,7 @@ var fallbackIcon = {
   })),
   viewBox: "0 0 24 24"
 };
-var Icon$1 = /* @__PURE__ */ forwardRef((props, ref) => {
+var Icon = /* @__PURE__ */ forwardRef((props, ref) => {
   var {
     as: element,
     viewBox,
@@ -9338,17 +9354,6 @@ function _extends$3() {
   };
   return _extends$3.apply(this, arguments);
 }
-var StackDivider = (props) => /* @__PURE__ */ React.createElement(chakra.div, _extends$3({
-  className: "chakra-stack__divider"
-}, props, {
-  __css: _extends$3({}, props["__css"], {
-    borderWidth: 0,
-    alignSelf: "stretch",
-    borderColor: "inherit",
-    width: "auto",
-    height: "auto"
-  })
-}));
 var StackItem = (props) => /* @__PURE__ */ React.createElement(chakra.div, _extends$3({
   className: "chakra-stack__item"
 }, props, {
@@ -9810,9 +9815,15 @@ Label.displayName = "Label";
 function Progress({
   value = 0
 }) {
+  let limitedValue = value;
+  if (value > 100) {
+    limitedValue = 100;
+  } else if (value < 0) {
+    limitedValue = 0;
+  }
   return /* @__PURE__ */ jsx(CircularProgress, {
     size: "1rem",
-    value,
+    value: limitedValue,
     thickness: "1rem",
     color: vars("colors-main-deepSkyBlue"),
     trackColor: vars("colors-neutral-platinum")
@@ -9990,7 +10001,7 @@ function Ripples({
   });
 }
 Ripples.displayName = "Ripples";
-function Icon({
+function Base({
   w: w2 = "1rem",
   h = "1rem",
   color: color2 = vars("colors-main-ziggurat"),
@@ -9998,7 +10009,7 @@ function Icon({
   viewBox = "0 0 16 16",
   children
 }) {
-  return /* @__PURE__ */ jsx(Icon$1, {
+  return /* @__PURE__ */ jsx(Icon, {
     w: w2,
     h,
     viewBox,
@@ -10008,7 +10019,7 @@ function Icon({
   });
 }
 function ArrowRight(props) {
-  return /* @__PURE__ */ jsxs(Icon, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
     children: [/* @__PURE__ */ jsxs("g", {
       clipPath: "url(#clip0)",
       children: [/* @__PURE__ */ jsx("mask", {
@@ -10046,7 +10057,7 @@ function ArrowRight(props) {
 }
 ArrowRight.displayName = "ArrowRight";
 function Certificate(props) {
-  return /* @__PURE__ */ jsxs(Icon, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
     children: [/* @__PURE__ */ jsx("path", {
       fill: "currentColor",
       d: "M7 4H9V6H7z"
@@ -10060,7 +10071,7 @@ function Certificate(props) {
 }
 Certificate.displayName = "Certificate";
 function CircularCheck(props) {
-  return /* @__PURE__ */ jsx(Icon, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
     children: /* @__PURE__ */ jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
@@ -10071,7 +10082,7 @@ function CircularCheck(props) {
 }
 CircularCheck.displayName = "CircularCheck";
 function CircularInformation(props) {
-  return /* @__PURE__ */ jsx(Icon, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
     children: /* @__PURE__ */ jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
@@ -10082,7 +10093,7 @@ function CircularInformation(props) {
 }
 CircularInformation.displayName = "CircularInformation";
 function Profile(props) {
-  return /* @__PURE__ */ jsx(Icon, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
     viewBox: "0 0 12 12",
     w: ".625rem",
     h: ".75rem",
@@ -10094,7 +10105,7 @@ function Profile(props) {
 }
 Profile.displayName = "Profile";
 function Schedule(props) {
-  return /* @__PURE__ */ jsxs(Icon, __spreadProps(__spreadValues({}, props), {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
     children: [/* @__PURE__ */ jsx("path", {
       fill: "currentColor",
       fillRule: "evenodd",
@@ -10137,6 +10148,7 @@ function Header() {
     bgPos: "center",
     bgSize: "cover",
     height: "8.75rem",
+    borderBottom: vars("borders-light"),
     pos: "relative",
     children: [/* @__PURE__ */ jsxs(Box, {
       p: "1rem",
@@ -10163,10 +10175,10 @@ function Header() {
       left: ".9375rem",
       transform: "translateY(30%)",
       h: "3.5rem",
-      border: `1px solid ${vars("colors-neutral-platinum")}`,
+      border: vars("borders-light"),
       bg: vars("colors-neutral-white"),
       overflow: "hidden",
-      borderRadius: "0.25em",
+      borderRadius: vars("radii-small"),
       w: "6.25rem",
       children: /* @__PURE__ */ jsx(Image$1, {
         src: logo,
@@ -10180,12 +10192,12 @@ Header.displayName = "Header";
 function DateStatus({
   date
 }) {
-  if (date.length === 0) {
+  if (!date || date.length === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(Text, {
     fontSize: ".75rem",
-    color: "neutral.darkCharcoal",
+    color: vars("colors-neutral-darkCharcoal"),
     m: "0",
     children: date
   });
@@ -10195,23 +10207,31 @@ function IconSelection({
   type,
   progressValue = 0
 }) {
-  const all = {
-    schedule: /* @__PURE__ */ jsx(Schedule, {}),
-    certificate: /* @__PURE__ */ jsx(Certificate, {}),
-    circularCheck: /* @__PURE__ */ jsx(CircularCheck, {}),
-    progress: /* @__PURE__ */ jsx(Progress, {
-      value: progressValue
-    }),
-    circularInformation: /* @__PURE__ */ jsx(CircularInformation, {})
-  };
-  return all[type];
+  switch (type) {
+    case "schedule":
+      return /* @__PURE__ */ jsx(Schedule, {});
+    case "certificate":
+      return /* @__PURE__ */ jsx(Certificate, {});
+    case "circularCheck":
+      return /* @__PURE__ */ jsx(CircularCheck, {});
+    case "progress":
+      return /* @__PURE__ */ jsx(Progress, {
+        value: progressValue
+      });
+    case "circularInformation":
+      return /* @__PURE__ */ jsx(CircularInformation, {});
+    default:
+      return null;
+  }
 }
+const ID_QUALIFIED = 7;
 function Section() {
   const {
     name,
     dateStatus,
     information,
-    progress
+    progress,
+    status
   } = React__default.useContext(CourseBoxContext);
   if (!progress) {
     return null;
@@ -10222,11 +10242,11 @@ function Section() {
     p: "0 .9375rem",
     children: [(dateStatus == null ? void 0 : dateStatus.hasDates) && /* @__PURE__ */ jsxs(HStack, {
       direction: "row",
-      divider: dateStatus.init.length > 0 && dateStatus.end.length > 0 ? /* @__PURE__ */ jsx(StackDivider, {
+      divider: dateStatus.init !== void 0 && dateStatus.init.length > 0 && dateStatus.end !== void 0 && dateStatus.end.length > 0 ? /* @__PURE__ */ jsx(Box, {
         h: ".5rem",
-        borderColor: vars("colors-neutral-silverSand"),
-        alignSelf: "center",
-        variant: "solid"
+        w: "1px",
+        bg: vars("colors-neutral-silverSand"),
+        alignSelf: "center"
       }) : /* @__PURE__ */ jsx(Fragment, {}),
       children: [/* @__PURE__ */ jsx(DateStatus, {
         date: dateStatus.init
@@ -10254,9 +10274,9 @@ function Section() {
           lineHeight: "1.125rem",
           children: progress == null ? void 0 : progress.label
         })]
-      }), (progress == null ? void 0 : progress.finalGrade.length) > 0 && /* @__PURE__ */ jsx(Label, {
+      }), (status == null ? void 0 : status.id) === ID_QUALIFIED && (progress == null ? void 0 : progress.finalGrade.length) > 0 && /* @__PURE__ */ jsx(Label, {
         size: "sm",
-        bg: (progress == null ? void 0 : progress.isApproved) ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
+        bg: progress.isApproved ? vars("colors-alert-jadeGreen") : vars("colors-alert-red"),
         color: vars("colors-neutral-white"),
         children: progress == null ? void 0 : progress.finalGrade
       })]
@@ -10264,10 +10284,9 @@ function Section() {
       spacing: ".625rem",
       paddingInlineStart: "0",
       pt: ".625rem",
-      mt: ".625rem",
+      m: ".625rem 0 0",
       lineHeight: ".875rem",
-      borderTop: "1px solid",
-      borderTopColor: vars("colors-neutral-platinum"),
+      borderTop: vars("borders-light"),
       children: information.map((item, index) => {
         var _a;
         return /* @__PURE__ */ jsxs(ListItem, {
@@ -10277,7 +10296,7 @@ function Section() {
           }), /* @__PURE__ */ jsx(Box, {
             display: "inline-block",
             ml: ".625rem",
-            children: ((_a = item.href) == null ? void 0 : _a.length) > 0 ? /* @__PURE__ */ jsx(Link, {
+            children: item.href !== void 0 && ((_a = item.href) == null ? void 0 : _a.length) > 0 ? /* @__PURE__ */ jsx(Link, {
               isExternal: true,
               href: item.href,
               color: vars("colors-main-deepSkyBlue"),
@@ -10299,10 +10318,11 @@ function Section() {
 }
 Section.displayName = "Section";
 function Footer() {
+  var _a;
   const {
     action
   } = React.useContext(CourseBoxContext);
-  if (action === void 0 || (action == null ? void 0 : action.enabled) && action.href.length === 0) {
+  if (action === void 0 || (action == null ? void 0 : action.enabled) && ((_a = action.href) == null ? void 0 : _a.length) === 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(Center, {
@@ -10320,13 +10340,14 @@ function Footer() {
         lineHeight: "1.172rem",
         isExternal: action.targetBlank,
         children: action.text
-      }), action.hasIcon && /* @__PURE__ */ jsx(ArrowRight, {
+      }), action.hasIcon === true && /* @__PURE__ */ jsx(ArrowRight, {
         color: vars("colors-main-deepSkyBlue")
       })]
     }) : /* @__PURE__ */ jsx(Text, {
       fontWeight: "500",
       lineHeight: "1.172rem",
       color: vars("colors-neutral-spanishGrey"),
+      m: "0",
       children: action.text
     })
   });
@@ -10346,6 +10367,7 @@ function WithRipples({
 function CourseBox({
   data
 }) {
+  var _a, _b;
   const cssActive = {
     boxShadow: `0 2px 7px 0 ${vars("colors-neutral-silverSand")}`
   };
@@ -10353,8 +10375,8 @@ function CourseBox({
     value: data,
     children: /* @__PURE__ */ jsx(LinkBox, {
       as: "article",
-      border: `1px solid ${vars("colors-neutral-platinum")}`,
-      borderRadius: 10,
+      border: vars("borders-light"),
+      borderRadius: vars("radii-big"),
       cursor: "pointer",
       transition: "box-shadow .3s",
       _active: cssActive,
@@ -10362,7 +10384,7 @@ function CourseBox({
       _focus: cssActive,
       overflow: "hidden",
       children: /* @__PURE__ */ jsx(WithRipples, {
-        enabled: data.action.enabled,
+        enabled: (_b = (_a = data.action) == null ? void 0 : _a.enabled) != null ? _b : false,
         children: /* @__PURE__ */ jsxs(Flex, {
           direction: "column",
           justify: "space-between",
@@ -10382,7 +10404,7 @@ function CourseList({
   courses,
   m: m2 = "0 auto"
 }) {
-  if (courses.length === 0) {
+  if (courses === void 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(Box, {
@@ -10392,20 +10414,20 @@ function CourseList({
     gridTemplateColumns: `repeat(auto-fill, minmax(${wCourse}rem, 1fr))`,
     m: m2,
     w: "100%",
-    children: courses.map((course) => /* @__PURE__ */ jsx(CourseBox, {
+    children: courses == null ? void 0 : courses.map((course) => /* @__PURE__ */ jsx(CourseBox, {
       data: course
     }, course.id))
   });
 }
 CourseList.displayName = "CourseList";
-const maxWidthCoursesList = (nCols = 4) => {
+function maxWidthCoursesList(nCols = 4) {
   const maxWidth = nCols * wCourse + columnGap * (nCols - 1);
   return {
     px: `${maxWidth * 16}px`,
     rem: `${maxWidth}rem`,
     remValue: maxWidth
   };
-};
+}
 const dataBase = {
   name: "Orientaci\xF3n en la prevenci\xF3n de contagio de COVID-19",
   background: "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT76y4DAhqWAlCspmGYWcbxSDnLw3p1FzJQKA&usqp=CAU",
@@ -10488,6 +10510,8 @@ const dataStates = {
     labels: []
   }),
   preInscripcion: __spreadProps(__spreadValues({}, dataBase), {
+    logo: "https://cdn.eclass.com/img/productos/logos/logo-utec-square.jpg",
+    background: "https://cdn.eclass.com/img/cursos/default1.png",
     id: 2,
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 2,
@@ -10513,6 +10537,7 @@ const dataStates = {
   }),
   preInscripcion2: __spreadProps(__spreadValues({}, dataBase), {
     id: 3,
+    logo: "",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 2,
       name: "preInscripcion"
@@ -10536,6 +10561,7 @@ const dataStates = {
     labels: []
   }),
   inscripcion: __spreadProps(__spreadValues({}, dataBase), {
+    background: "https://cdn.eclass.com/img/cursos/default2.png",
     id: 4,
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 3,
@@ -10564,10 +10590,6 @@ const dataStates = {
       id: 3,
       name: "inscripcion"
     }),
-    Profile: {
-      id: 1,
-      name: "Administrador"
-    },
     progress: __spreadProps(__spreadValues({}, dataBase.progress), {
       label: "Tienes hasta el Lunes 16 de Enero para de 2022 inscribirte",
       icon: "schedule"
@@ -10575,11 +10597,7 @@ const dataStates = {
     dateStatus: __spreadProps(__spreadValues({}, dataBase.dateStatus), {
       hasDates: true
     }),
-    information: [{
-      icon: "certificate",
-      text: "Certificado por ACHS",
-      href: ""
-    }],
+    information: [],
     action: __spreadProps(__spreadValues({}, dataBase.action), {
       text: "Inscr\xEDbete",
       targetBlank: true
@@ -10594,6 +10612,8 @@ const dataStates = {
   }),
   noDisponible: __spreadProps(__spreadValues({}, dataBase), {
     id: 6,
+    logo: "",
+    background: "https://cdn.eclass.com/img/cursos/default2.png",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 4,
       name: "no disponible"
@@ -10616,15 +10636,11 @@ const dataStates = {
       text: "Ver informaci\xF3n del curso",
       targetBlank: true
     }),
-    labels: [{
-      id: "OBLIGATORY",
-      text: "Obligatorio"
-    }, {
-      id: "NEW",
-      text: "Nuevo"
-    }]
+    labels: []
   }),
   noDisponible2: __spreadProps(__spreadValues({}, dataBase), {
+    background: "https://cdn.eclass.com/img/cursos/default3.png",
+    logo: "https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg",
     id: 7,
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 4,
@@ -10645,8 +10661,7 @@ const dataStates = {
       href: ""
     }],
     action: __spreadProps(__spreadValues({}, dataBase.action), {
-      enabled: false,
-      text: "Ver informaci\xF3n del curso"
+      enabled: false
     }),
     labels: []
   }),
@@ -10684,6 +10699,7 @@ const dataStates = {
   }),
   sinEstudiar: __spreadProps(__spreadValues({}, dataBase), {
     id: 9,
+    logo: "",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 6,
       name: "sinEstudiar"
@@ -10716,6 +10732,7 @@ const dataStates = {
   }),
   sinEstudiar2: __spreadProps(__spreadValues({}, dataBase), {
     id: 10,
+    background: "https://cdn.eclass.com/img/cursos/default2.png",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 6,
       name: "sinEstudiar"
@@ -10848,6 +10865,7 @@ const dataStates = {
       id: 7,
       name: "continuar"
     }),
+    logo: "",
     progress: __spreadProps(__spreadValues({}, dataBase.progress), {
       label: "Has completado un 100% de tu curso",
       icon: "progress",
@@ -10873,6 +10891,7 @@ const dataStates = {
     labels: []
   }),
   pendiente: __spreadProps(__spreadValues({}, dataBase), {
+    background: "https://cdn.eclass.com/img/cursos/default3.png",
     id: 15,
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 8,
@@ -10933,7 +10952,12 @@ const dataStates = {
     labels: []
   }),
   terminado2: __spreadProps(__spreadValues({}, dataBase), {
+    logo: "https://cdn.eclass.com/img/productos/logos/logo-eclass-academy-square.jpg",
     id: 17,
+    Profile: {
+      id: 1,
+      name: "Administrador"
+    },
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 9,
       name: "terminado"
@@ -10965,6 +10989,7 @@ const dataStates = {
   }),
   terminado3: __spreadProps(__spreadValues({}, dataBase), {
     id: 18,
+    logo: "",
     status: __spreadProps(__spreadValues({}, dataBase.status), {
       id: 9,
       name: "terminado"
@@ -10994,16 +11019,13 @@ const dataStates = {
   })
 };
 const dataFake = Object.keys(dataStates).map((key) => dataStates[key]);
-var _700 = "";
-var _500 = "";
-var _400$1 = "";
-var _300 = "";
-var _400 = "";
 const main = {
-  blueGrey: "#60798E",
   deepSkyBlue: "#0189FF",
-  ziggurat: "#B0CFE0",
-  veryLightBlue: "#E0EEFA"
+  azureRadiance: "#017BE5",
+  blueGrey: "#60798E",
+  veryLightBlue: "#E0EEFA",
+  linkWater: "#C7DEF2",
+  ziggurat: "#B0CFE0"
 };
 const colors = {
   main,
@@ -11047,13 +11069,39 @@ const styles = {
     }
   })
 };
-const theme = extendTheme({
-  colors,
+const base = "solid 1px";
+const borders = {
+  normal: `${base} ${colors.neutral.silverSand}`,
+  light: `${base} ${colors.neutral.platinum}`,
+  active: `${base} ${colors.main.deepSkyBlue}`,
+  success: `${base} ${colors.alert.jadeGreen}`,
+  error: `${base} ${colors.alert.red}`
+};
+const radii = {
+  small: ".25rem",
+  big: ".5rem",
+  rounded: "50%"
+};
+const utils = {
+  borders,
+  radii
+};
+var _700 = "";
+var _500 = "";
+var _400$1 = "";
+var _300 = "";
+var _400 = "";
+const typography = {
   fonts: {
-    body: "roboto"
-  },
+    body: "Roboto",
+    outstanding: "Lora"
+  }
+};
+const theme = extendTheme(__spreadProps(__spreadValues(__spreadValues({
+  colors
+}, utils), typography), {
   styles
-});
+}));
 const vars = (value) => `var(--chakra-${value})`;
 export { CourseList, Label, Progress, Ripples, dataFake, maxWidthCoursesList, theme, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map