@eclass/ui-kit 1.5.1 → 1.5.2

package/dist/atoms/Icons/ArrowRight.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from './Icon';
+import { BaseProps } from './Base';
 export declare function ArrowRight(props: BaseProps): JSX.Element;
 export declare namespace ArrowRight {
     var displayName: string;

package/dist/atoms/Icons/{Icon.d.ts → Base.d.ts}

@@ -9,5 +9,5 @@ interface IconProps extends BaseProps {
     viewBox?: string;
     children: React.ReactChild | React.ReactChild[];
 }
-export declare function Icon({ w, h, color, m, viewBox, children, }: IconProps): JSX.Element;
+export declare function Base({ w, h, color, m, viewBox, children, }: IconProps): JSX.Element;
 export {};

package/dist/atoms/Icons/Certificate.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from './Icon';
+import { BaseProps } from './Base';
 export declare function Certificate(props: BaseProps): JSX.Element;
 export declare namespace Certificate {
     var displayName: string;

package/dist/atoms/Icons/CircularCheck.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from './Icon';
+import { BaseProps } from './Base';
 export declare function CircularCheck(props: BaseProps): JSX.Element;
 export declare namespace CircularCheck {
     var displayName: string;

package/dist/atoms/Icons/CircularInformation.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from './Icon';
+import { BaseProps } from './Base';
 export declare function CircularInformation(props: BaseProps): JSX.Element;
 export declare namespace CircularInformation {
     var displayName: string;

package/dist/atoms/Icons/Profile.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from './Icon';
+import { BaseProps } from './Base';
 export declare function Profile(props: BaseProps): JSX.Element;
 export declare namespace Profile {
     var displayName: string;

package/dist/atoms/Icons/Schedule.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from './Icon';
+import { BaseProps } from './Base';
 export declare function Schedule(props: BaseProps): JSX.Element;
 export declare namespace Schedule {
     var displayName: string;

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

@@ -2986,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"),
@@ -3100,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];
@@ -6910,7 +6910,7 @@ var Modal = {
   sizes: sizes$d,
   defaultProps: defaultProps$c
 };
-var typography = {
+var typography$1 = {
   letterSpacings: {
     tighter: "-0.05em",
     tight: "-0.025em",
@@ -6968,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) {
@@ -7029,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,
@@ -8393,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",
@@ -8632,7 +8632,7 @@ var colors$1 = {
   }
 };
 var colors$2 = colors$1;
-var radii = {
+var radii$1 = {
   none: "0",
   sm: "0.125rem",
   base: "0.25rem",
@@ -8643,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)",
@@ -8729,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;
@@ -8873,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,
@@ -10001,7 +10001,7 @@ function Ripples({
   });
 }
 Ripples.displayName = "Ripples";
-function Icon({
+function Base({
   w: w2 = "1rem",
   h = "1rem",
   color: color2 = vars("colors-main-ziggurat"),
@@ -10009,7 +10009,7 @@ function Icon({
   viewBox = "0 0 16 16",
   children
 }) {
-  return /* @__PURE__ */ jsx(Icon$1, {
+  return /* @__PURE__ */ jsx(Icon, {
     w: w2,
     h,
     viewBox,
@@ -10019,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", {
@@ -10057,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"
@@ -10071,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",
@@ -10082,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",
@@ -10093,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",
@@ -10105,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",
@@ -10148,7 +10148,7 @@ function Header() {
     bgPos: "center",
     bgSize: "cover",
     height: "8.75rem",
-    borderBottom: `1px solid ${vars("colors-neutral-platinum")}`,
+    borderBottom: vars("borders-light"),
     pos: "relative",
     children: [/* @__PURE__ */ jsxs(Box, {
       p: "1rem",
@@ -10175,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,
@@ -10286,7 +10286,7 @@ function Section() {
       pt: ".625rem",
       m: ".625rem 0 0",
       lineHeight: ".875rem",
-      borderTop: `1px solid ${vars("colors-neutral-platinum")}`,
+      borderTop: vars("borders-light"),
       children: information.map((item, index) => {
         var _a;
         return /* @__PURE__ */ jsxs(ListItem, {
@@ -10375,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,
@@ -10404,7 +10404,7 @@ function CourseList({
   courses,
   m: m2 = "0 auto"
 }) {
-  if ((courses == null ? void 0 : courses.length) === 0) {
+  if (courses === void 0) {
     return null;
   }
   return /* @__PURE__ */ jsx(Box, {
@@ -11019,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,
@@ -11072,25 +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})`;
-const TestVars = ({
-  color: color2 = "main.veryLightBlue"
-}) => {
-  return /* @__PURE__ */ jsx(chakra.button, {
-    px: "3",
-    py: "2",
-    bg: "main.deepSkyBlue",
-    rounded: "md",
-    color: color2,
-    children: "Click me"
-  });
-};
-export { CourseList, Label, Progress, Ripples, TestVars, dataFake, maxWidthCoursesList, theme, vars };
+export { CourseList, Label, Progress, Ripples, dataFake, maxWidthCoursesList, theme, vars };
 //# sourceMappingURL=eclass-ui-kit.es.js.map