@eclass/ui-kit 1.11.2 → 1.11.3

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

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

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

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

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

@@ -1,8 +1,12 @@
+export * from './AcademicRecord';
 export * from './AlertInfo';
 export * from './ArrowRight';
 export * from './Certificate';
 export * from './CircularCheck';
 export * from './CircularInformation';
+export * from './Download';
+export * from './GoBack';
+export * from './Multimedia';
 export * from './Loader';
 export * from './Profile';
 export * from './Schedule';
@@ -10,11 +14,9 @@ export * from './TinyAlertInfo';
 export * from './TinyAlertError';
 export * from './TinyAlertWarning';
 export * from './TinyAlertSuccess';
-export * from './Multimedia';
-export * from './GoBack';
 export * from './Password';
 export * from './Pen';
 export * from './PlusSign';
 export * from './TrashCan';
 export * from './TextBubble';
-export * from './AcademicRecord';
+export * from './VerticalLine';

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

@@ -26397,6 +26397,25 @@ function Base({
     }), children]
   });
 }
+function AcademicRecord(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    title: "academicRecord",
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M14 0H2C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1V7C1 7.26522 1.10536 7.51957 1.29289 7.70711C1.48043 7.89464 1.73478 8 2 8H14C14.2652 8 14.5196 7.89464 14.7071 7.70711C14.8946 7.51957 15 7.26522 15 7V1C15 0.734784 14.8946 0.48043 14.7071 0.292893C14.5196 0.105357 14.2652 0 14 0V0Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M15 10H1V12H15V10Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M15 14H1V16H15V14Z",
+      fill: "currentColor"
+    })]
+  }));
+}
+AcademicRecord.displayName = "AcademicRecord";
 function AlertInfo(props) {
   return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
     children: /* @__PURE__ */ jsxs("svg", {
@@ -26506,6 +26525,55 @@ function CircularInformation(props) {
   }));
 }
 CircularInformation.displayName = "CircularInformation";
+function Download(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M7.99998 12C8.29998 12 8.49998 11.9 8.69998 11.7L14.4 6L13 4.6L8.99998 8.6V0H6.99998V8.6L2.99998 4.6L1.59998 6L7.29998 11.7C7.49998 11.9 7.69998 12 7.99998 12Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M15 14H1V16H15V14Z",
+      fill: "currentColor"
+    })]
+  }));
+}
+Download.displayName = "Download";
+function GoBack(props) {
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
+    w: "16px",
+    h: "16px",
+    viewBox: "0 0 16 16",
+    title: "goBack",
+    children: /* @__PURE__ */ jsx("path", {
+      d: "M9.92593 2L4 8L9.92593 14L12 11.9L8.14815 8L12 4.1L9.92593 2Z",
+      fill: "currentColor"
+    })
+  }));
+}
+GoBack.displayName = "GoBack";
+function Multimedia(props) {
+  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
+    w: "12px",
+    viewBox: "0 0 14 14",
+    title: "multimedia",
+    children: [/* @__PURE__ */ jsx("path", {
+      d: "M3 6C4.65685 6 6 4.65685 6 3C6 1.34315 4.65685 0 3 0C1.34315 0 0 1.34315 0 3C0 4.65685 1.34315 6 3 6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M11 6C12.6569 6 14 4.65685 14 3C14 1.34315 12.6569 0 11 0C9.34315 0 8 1.34315 8 3C8 4.65685 9.34315 6 11 6Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M3 14C4.65685 14 6 12.6569 6 11C6 9.34315 4.65685 8 3 8C1.34315 8 0 9.34315 0 11C0 12.6569 1.34315 14 3 14Z",
+      fill: "currentColor"
+    }), /* @__PURE__ */ jsx("path", {
+      d: "M11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14Z",
+      fill: "currentColor"
+    })]
+  }));
+}
+Multimedia.displayName = "Multimedia";
 function Loader({
   fill = "#fff"
 }) {
@@ -26694,40 +26762,6 @@ function TinyAlertSuccess(props) {
   }));
 }
 TinyAlertSuccess.displayName = "TinyAlertSuccess";
-function Multimedia(props) {
-  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
-    w: "12px",
-    viewBox: "0 0 14 14",
-    title: "multimedia",
-    children: [/* @__PURE__ */ jsx("path", {
-      d: "M3 6C4.65685 6 6 4.65685 6 3C6 1.34315 4.65685 0 3 0C1.34315 0 0 1.34315 0 3C0 4.65685 1.34315 6 3 6Z",
-      fill: "currentColor"
-    }), /* @__PURE__ */ jsx("path", {
-      d: "M11 6C12.6569 6 14 4.65685 14 3C14 1.34315 12.6569 0 11 0C9.34315 0 8 1.34315 8 3C8 4.65685 9.34315 6 11 6Z",
-      fill: "currentColor"
-    }), /* @__PURE__ */ jsx("path", {
-      d: "M3 14C4.65685 14 6 12.6569 6 11C6 9.34315 4.65685 8 3 8C1.34315 8 0 9.34315 0 11C0 12.6569 1.34315 14 3 14Z",
-      fill: "currentColor"
-    }), /* @__PURE__ */ jsx("path", {
-      d: "M11 14C12.6569 14 14 12.6569 14 11C14 9.34315 12.6569 8 11 8C9.34315 8 8 9.34315 8 11C8 12.6569 9.34315 14 11 14Z",
-      fill: "currentColor"
-    })]
-  }));
-}
-Multimedia.displayName = "Multimedia";
-function GoBack(props) {
-  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
-    w: "16px",
-    h: "16px",
-    viewBox: "0 0 16 16",
-    title: "goBack",
-    children: /* @__PURE__ */ jsx("path", {
-      d: "M9.92593 2L4 8L9.92593 14L12 11.9L8.14815 8L12 4.1L9.92593 2Z",
-      fill: "currentColor"
-    })
-  }));
-}
-GoBack.displayName = "GoBack";
 function Password(props) {
   return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
     w: "16px",
@@ -26803,25 +26837,21 @@ function TextBubble(props) {
   }));
 }
 TextBubble.displayName = "TextBubble";
-function AcademicRecord(props) {
-  return /* @__PURE__ */ jsxs(Base, __spreadProps(__spreadValues({}, props), {
-    w: "16px",
-    h: "16px",
-    viewBox: "0 0 16 16",
-    title: "academicRecord",
-    children: [/* @__PURE__ */ jsx("path", {
-      d: "M14 0H2C1.73478 0 1.48043 0.105357 1.29289 0.292893C1.10536 0.48043 1 0.734784 1 1V7C1 7.26522 1.10536 7.51957 1.29289 7.70711C1.48043 7.89464 1.73478 8 2 8H14C14.2652 8 14.5196 7.89464 14.7071 7.70711C14.8946 7.51957 15 7.26522 15 7V1C15 0.734784 14.8946 0.48043 14.7071 0.292893C14.5196 0.105357 14.2652 0 14 0V0Z",
-      fill: "currentColor"
-    }), /* @__PURE__ */ jsx("path", {
-      d: "M15 10H1V12H15V10Z",
-      fill: "currentColor"
-    }), /* @__PURE__ */ jsx("path", {
-      d: "M15 14H1V16H15V14Z",
-      fill: "currentColor"
-    })]
+function VerticalLine(props) {
+  return /* @__PURE__ */ jsx(Base, __spreadProps(__spreadValues({}, props), {
+    w: "1px",
+    h: "15px",
+    viewBox: "0 0 1 15",
+    title: "verticalLine",
+    children: /* @__PURE__ */ jsx("rect", {
+      y: "-1",
+      width: "1",
+      height: "16",
+      fill: "#D8D8D8"
+    })
   }));
 }
-AcademicRecord.displayName = "AcademicRecord";
+VerticalLine.displayName = "VerticalLine";
 function TinyAlert({
   status,
   text,
@@ -27092,13 +27122,14 @@ function BtnTertiary({
   type = "button",
   tabIndex,
   id: id2,
+  separation = false,
   onClick
 }) {
   var _a;
   const gray = vars("colors-neutral-gray");
   const blue = vars("colors-main-deepSkyBlue");
   const white = vars("colors-neutral-white");
-  const colorIcon = withoutColor ? gray : blue;
+  const colorIcon = withoutColor ? vars("colors-main-blueGrey") : blue;
   const btnIcons = {
     answer: /* @__PURE__ */ jsx(TextBubble, {
       color: colorIcon
@@ -27106,29 +27137,36 @@ function BtnTertiary({
     back: /* @__PURE__ */ jsx(GoBack, {
       color: colorIcon
     }),
-    edit: /* @__PURE__ */ jsx(Pen, {
+    delete: /* @__PURE__ */ jsx(TrashCan, {
       color: colorIcon
     }),
-    delete: /* @__PURE__ */ jsx(TrashCan, {
+    download: /* @__PURE__ */ jsx(Download, {
       color: colorIcon
     }),
-    more: /* @__PURE__ */ jsx(PlusSign, {
+    edit: /* @__PURE__ */ jsx(Pen, {
       color: colorIcon
     }),
-    password: /* @__PURE__ */ jsx(Password, {
+    more: /* @__PURE__ */ jsx(PlusSign, {
       color: colorIcon
     }),
     multimedia: /* @__PURE__ */ jsx(Multimedia, {
       color: colorIcon
     }),
+    password: /* @__PURE__ */ jsx(Password, {
+      color: colorIcon
+    }),
     record: /* @__PURE__ */ jsx(AcademicRecord, {
       color: colorIcon
-    })
+    }),
+    noIcon: /* @__PURE__ */ jsx(Fragment, {})
   };
   const icon = (_a = btnIcons[iconStatus]) != null ? _a : btnIcons.multimedia;
   const rIcon = rightIcon ? icon : void 0;
   const lIcon = !rightIcon ? icon : void 0;
-  return /* @__PURE__ */ jsx(Button, {
+  const verticalLine = separation ? /* @__PURE__ */ jsx(VerticalLine, {
+    m: "0 0 0 8px"
+  }) : void 0;
+  return /* @__PURE__ */ jsxs(Button, {
     id: id2,
     type,
     tabIndex,
@@ -27143,7 +27181,7 @@ function BtnTertiary({
     borderRadius: "12px",
     paddingTop: vars("space-xxs"),
     paddingBottom: vars("space-xxs"),
-    paddingLeft: vars("space-xs"),
+    paddingLeft: !separation ? vars("space-xs") : "0",
     paddingRight: vars("space-xs"),
     color: gray,
     rightIcon: rIcon,
@@ -27153,9 +27191,15 @@ function BtnTertiary({
     _hover: {
       color: blue
     },
-    _focus: {
+    _focusVisible: {
       boxShadow: `inset 0 0 0 2px ${blue}, inset 0 0 0 4px ${white}`
     },
+    _focus: {
+      boxShadow: "none"
+    },
+    _active: {
+      bg: "transparent"
+    },
     sx: {
       "&:hover": {
         "svg path": {
@@ -27163,7 +27207,7 @@ function BtnTertiary({
         }
       }
     },
-    children
+    children: [children, verticalLine]
   });
 }
 BtnTertiary.displayName = "BtnTertiary";