@escolalms/components - npm Package Compare versions

Comparing version 0.0.23 to 0.0.24

lib/components/atoms/Avatar/Avatar.js

@@ -45,3 +45,3 @@ "use strict";
 var avatarUtils_1 = require("../../../utils/components/primitives/avatarUtils");
-var StyledAvatar = (0, styled_components_1.default)("img")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n"], ["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n"])), function (props) { return (0, avatarUtils_1.setAvatarBySize)(props.size); }, function (props) { return (0, avatarUtils_1.setAvatarBySize)(props.size); });
+var StyledAvatar = (0, styled_components_1.default)("img")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  object-fit: cover;\n"], ["\n  border-radius: 50%;\n  width: ", ";\n  height: ", ";\n  object-fit: cover;\n"])), function (props) { return (0, avatarUtils_1.setAvatarBySize)(props.size); }, function (props) { return (0, avatarUtils_1.setAvatarBySize)(props.size); });
 var Avatar = function (props) {
@@ -48,0 +48,0 @@ var size = props.size;

lib/components/atoms/Button/Button.d.ts

@@ -5,3 +5,3 @@ import * as React from "react";
     children?: React.ReactNode;
-    mode?: "primary" | "secondary" | "outline" | "white";
+    mode?: "primary" | "secondary" | "outline" | "white" | "icon";
     invert?: boolean;
@@ -8,0 +8,0 @@ loading?: boolean;

lib/components/atoms/Button/Button.js

@@ -62,3 +62,3 @@ "use strict";
 var Spin_1 = __importDefault(require("../Spin/Spin"));
-var StyledButton = (0, styled_components_1.default)("button")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  font-size: ", ";\n  line-height: 1.55em;\n  cursor: pointer;\n  padding: ", ";\n  border-radius: ", "px;\n  -webkit-font-smoothing: antialiased;\n  box-sizing: border-box;\n  border-style: solid;\n  border-width: 2px;\n  border-color: ", ";\n  transition: box-shadow 0.2s ease-in-out, border 0.2s ease-in,\n    background 0.2s ease-in, color 0.2s ease-in;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n\n  ", "\n\n  pointer-events: ", ";\n\n  & > svg {\n    margin: 0 9px;\n    height: ", ";\n    width: auto;\n  }\n\n  &:focus,\n  &:active {\n    border-style: solid;\n    border-width: 2px;\n    border-color: ", ";\n    box-shadow: none !important;\n  }\n\n  &:hover {\n    color: ", ";\n    border-color: transparent;\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border-color: transparent;\n    ", "\n    ", "\n    &,\n    &:hover,\n    &:focus,\n    &:active {\n      ", "\n      color: ", "\n    }\n  }\n"], ["\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  font-size: ", ";\n  line-height: 1.55em;\n  cursor: pointer;\n  padding: ", ";\n  border-radius: ", "px;\n  -webkit-font-smoothing: antialiased;\n  box-sizing: border-box;\n  border-style: solid;\n  border-width: 2px;\n  border-color: ", ";\n  transition: box-shadow 0.2s ease-in-out, border 0.2s ease-in,\n    background 0.2s ease-in, color 0.2s ease-in;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n\n  ", "\n\n  pointer-events: ", ";\n\n  & > svg {\n    margin: 0 9px;\n    height: ", ";\n    width: auto;\n  }\n\n  &:focus,\n  &:active {\n    border-style: solid;\n    border-width: 2px;\n    border-color: ", ";\n    box-shadow: none !important;\n  }\n\n  &:hover {\n    color: ", ";\n    border-color: transparent;\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border-color: transparent;\n    ", "\n    ", "\n    &,\n    &:hover,\n    &:focus,\n    &:active {\n      ", "\n      color: ", "\n    }\n  }\n"])), function (props) {
+var StyledButton = (0, styled_components_1.default)("button")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  font-size: ", ";\n  line-height: 1.55em;\n  cursor: pointer;\n  padding: ", ";\n  border-radius: ", "px;\n  -webkit-font-smoothing: antialiased;\n  box-sizing: border-box;\n  border-style: solid;\n  border-width: 2px;\n  border-color: ", ";\n  transition: box-shadow 0.2s ease-in-out, border 0.2s ease-in,\n    background 0.2s ease-in, color 0.2s ease-in, opacity 0.2s ease-in;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  flex-shrink: 0;\n\n  ", "\n\n  pointer-events: ", ";\n\n  & > svg {\n    margin: ", ";\n    height: ", ";\n    width: ", ";\n  }\n\n  &:focus,\n  &:active {\n    border-style: solid;\n    border-width: 2px;\n    border-color: ", ";\n    box-shadow: none !important;\n  }\n\n  &:hover {\n    color: ", ";\n    border-color: transparent;\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border-color: transparent;\n    ", "\n    ", "\n    &,\n    &:hover,\n    &:focus,\n    &:active {\n      ", "\n      color: ", "\n    }\n  }\n"], ["\n  background: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-weight: bold;\n  font-size: ", ";\n  line-height: 1.55em;\n  cursor: pointer;\n  padding: ", ";\n  border-radius: ", "px;\n  -webkit-font-smoothing: antialiased;\n  box-sizing: border-box;\n  border-style: solid;\n  border-width: 2px;\n  border-color: ", ";\n  transition: box-shadow 0.2s ease-in-out, border 0.2s ease-in,\n    background 0.2s ease-in, color 0.2s ease-in, opacity 0.2s ease-in;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  flex-shrink: 0;\n\n  ", "\n\n  pointer-events: ", ";\n\n  & > svg {\n    margin: ", ";\n    height: ", ";\n    width: ", ";\n  }\n\n  &:focus,\n  &:active {\n    border-style: solid;\n    border-width: 2px;\n    border-color: ", ";\n    box-shadow: none !important;\n  }\n\n  &:hover {\n    color: ", ";\n    border-color: transparent;\n    ", "\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    border-color: transparent;\n    ", "\n    ", "\n    &,\n    &:hover,\n    &:focus,\n    &:active {\n      ", "\n      color: ", "\n    }\n  }\n"])), function (props) {
     var _a;
@@ -74,2 +74,5 @@ if (props.mode === "outline") {
     }
+    if (props.mode === "icon") {
+        return "transparent";
+    }
     return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.primaryColor) || "black";
@@ -89,2 +92,7 @@ }, function (props) {
     }
+    if (props.mode === "icon") {
+        return props.theme.mode === "light"
+            ? props.theme.gray1
+            : props.theme.white;
+    }
     return props.theme.white;
@@ -105,3 +113,9 @@ }, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
 }, function (props) {
-    return props.mode === "primary" ? "0.75em 2em" : "0.65em 1.3em";
+    if (props.mode === "primary") {
+        return "0.75em 2em";
+    }
+    else if (props.mode === "icon") {
+        return "4px";
+    }
+    return "0.65em 1.3em";
 }, function (props) { var _a; return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.buttonRadius) || 2; }, function (props) {
@@ -123,2 +137,5 @@ var _a;
     }
+    if (props.mode === "icon") {
+        return "transparent";
+    }
     return ((_a = props.theme) === null || _a === void 0 ? void 0 : _a.primaryColor) || "black";
@@ -131,2 +148,7 @@ }, function (props) { return (props.block ? "width:100%;" : ""); }, function (props) {
 }, function (props) {
+    if (props.mode === "icon") {
+        return "0";
+    }
+    return "0 9px";
+}, function (props) {
     if (props.mode) {
@@ -144,7 +166,19 @@ switch (props.mode) {
 }, function (props) {
+    if (props.mode === "icon") {
+        return "14px";
+    }
+    return "18px";
+}, function (props) {
     if (props.invert && props.mode !== "outline") {
         return props.theme.gray1;
     }
+    else if (props.mode === "icon") {
+        return "transparent";
+    }
     return props.theme.white;
-}, function (props) { return props.theme.primaryColor; }, function (props) {
+}, function (props) {
+    if (props.mode !== "icon") {
+        return props.theme.primaryColor;
+    }
+}, function (props) {
     if (props.theme) {
@@ -160,2 +194,5 @@ if (props.invert) {
         }
+        else if (props.mode === "icon") {
+            return "\n            background: transparent;\n            opacity: 0.6;\n            ";
+        }
         else {
@@ -162,0 +199,0 @@ if (props.mode === "outline") {

lib/components/atoms/NoteAction/NoteAction.js

@@ -24,4 +24,3 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var Text_1 = require("../Typography/Text");
-var StyledNote = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-left: 3px solid ", ";\n  padding: 20px;\n  display: flex;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n  border-radius: ", "px;\n  background: ", ";\n  > div:first-child {\n    padding-right: 30px;\n  }\n  .title {\n    margin: 0;\n    font-size: 20px;\n    font-weight: bold;\n    color: ", ";\n  }\n  .subtitle {\n    margin: 0;\n    font-size: 14px;\n    color: ", ";\n  }\n"], ["\n  border-left: 3px solid ", ";\n  padding: 20px;\n  display: flex;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n  border-radius: ", "px;\n  background: ", ";\n  > div:first-child {\n    padding-right: 30px;\n  }\n  .title {\n    margin: 0;\n    font-size: 20px;\n    font-weight: bold;\n    color: ", ";\n  }\n  .subtitle {\n    margin: 0;\n    font-size: 14px;\n    color: ", ";\n  }\n"])), function (props) { return (props.color ? props.color : "#F2C94C"); }, function (props) { return props.theme.cardRadius; }, function (_a) {
+var StyledNote = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-left: 3px solid ", ";\n  padding: 20px;\n  display: flex;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n  border-radius: ", "px;\n  background: ", ";\n  > div:first-child {\n    padding-right: 30px;\n  }\n\n  .subtitle {\n    opacity: 0.8;\n  }\n"], ["\n  border-left: 3px solid ", ";\n  padding: 20px;\n  display: flex;\n  position: relative;\n  width: 100%;\n  box-sizing: border-box;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 10px;\n  border-radius: ", "px;\n  background: ", ";\n  > div:first-child {\n    padding-right: 30px;\n  }\n\n  .subtitle {\n    opacity: 0.8;\n  }\n"])), function (props) { return (props.color ? props.color : "#F2C94C"); }, function (props) { return props.theme.cardRadius; }, function (_a) {
     var theme = _a.theme;
@@ -31,14 +30,8 @@ return theme.mode === "light"
         : theme.cardBackgroundColorLight;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.gray1;
-}, function (_a) {
-    var theme = _a.theme;
-    return theme.gray3;
 });
 var NoteAction = function (props) {
     var title = props.title, subtitle = props.subtitle, color = props.color, actions = props.actions;
-    return ((0, jsx_runtime_1.jsxs)(StyledNote, __assign({ color: color }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "subtitle" }, { children: subtitle }))] }), (0, jsx_runtime_1.jsx)("div", { children: actions })] })));
+    return ((0, jsx_runtime_1.jsxs)(StyledNote, __assign({ color: color }, { children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("div", { children: title }), subtitle && (0, jsx_runtime_1.jsx)("div", __assign({ className: "subtitle" }, { children: subtitle }))] }), (0, jsx_runtime_1.jsx)("div", { children: actions })] })));
 };
 exports.NoteAction = NoteAction;
 var templateObject_1;

lib/components/molecules/CartCard/CartCard.js

@@ -65,3 +65,3 @@ "use strict";
 };
-var StyledCardCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  background: ", ";\n  padding: ", ";\n\n  .title {\n    font-size: ", ";\n    margin-bottom: ", ";\n    font-weight: 700;\n  }\n\n  .buy-button {\n    margin-bottom: ", ";\n  }\n\n  .separator {\n    height: 1px;\n    width: 24px;\n    background: ", ";\n    margin: 20px 0 14px 0;\n  }\n  .open-discount-state-container {\n    margin-left: 24px;\n  }\n  .discount-form-container {\n    margin-top: 17px;\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n  }\n  .discount-toggle {\n    display: flex;\n    padding: 6px 0;\n    cursor: pointer;\n  }\n  .discount-granted-info {\n    margin-bottom: 23px;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    white-space: pre-wrap;\n  }\n  .discount-remove {\n    display: flex;\n    margin-left: 12px;\n    cursor: pointer;\n  }\n  .granted-info {\n    margin-left: 12px;\n    color: #27ae60;\n    font-size: 12px;\n  }\n\n  .cart-card-subtitle {\n    margin-bottom: ", ";\n    padding-bottom: ", ";\n    border-bottom: ", ";\n  }\n"], ["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  background: ", ";\n  padding: ", ";\n\n  .title {\n    font-size: ", ";\n    margin-bottom: ", ";\n    font-weight: 700;\n  }\n\n  .buy-button {\n    margin-bottom: ", ";\n  }\n\n  .separator {\n    height: 1px;\n    width: 24px;\n    background: ", ";\n    margin: 20px 0 14px 0;\n  }\n  .open-discount-state-container {\n    margin-left: 24px;\n  }\n  .discount-form-container {\n    margin-top: 17px;\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n  }\n  .discount-toggle {\n    display: flex;\n    padding: 6px 0;\n    cursor: pointer;\n  }\n  .discount-granted-info {\n    margin-bottom: 23px;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    white-space: pre-wrap;\n  }\n  .discount-remove {\n    display: flex;\n    margin-left: 12px;\n    cursor: pointer;\n  }\n  .granted-info {\n    margin-left: 12px;\n    color: #27ae60;\n    font-size: 12px;\n  }\n\n  .cart-card-subtitle {\n    margin-bottom: ", ";\n    padding-bottom: ", ";\n    border-bottom: ", ";\n  }\n"])), function (props) { return props.theme.cardRadius; }, function (_a) {
+var StyledCardCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  background: ", ";\n  padding: ", ";\n\n  .title {\n    font-size: ", ";\n    margin-bottom: ", ";\n    font-weight: 700;\n  }\n\n  .buy-button {\n    margin-bottom: ", ";\n  }\n\n  .separator {\n    height: 1px;\n    width: 24px;\n    background: ", ";\n    margin: 20px 0 14px 0;\n  }\n  .open-discount-state-container {\n    margin-left: 24px;\n  }\n  .discount-form-container {\n    margin-top: 17px;\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n  }\n  .discount-toggle {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .discount-granted-info {\n    margin-bottom: 23px;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    white-space: pre-wrap;\n  }\n  .discount-remove {\n    display: flex;\n    margin-left: 12px;\n    cursor: pointer;\n  }\n  .granted-info {\n    margin-left: 12px;\n    color: #27ae60;\n    font-size: 12px;\n  }\n\n  .cart-card-subtitle {\n    margin-bottom: ", ";\n    padding-bottom: ", ";\n    border-bottom: ", ";\n  }\n"], ["\n  border-radius: ", "px;\n  box-shadow: ", ";\n  background: ", ";\n  padding: ", ";\n\n  .title {\n    font-size: ", ";\n    margin-bottom: ", ";\n    font-weight: 700;\n  }\n\n  .buy-button {\n    margin-bottom: ", ";\n  }\n\n  .separator {\n    height: 1px;\n    width: 24px;\n    background: ", ";\n    margin: 20px 0 14px 0;\n  }\n  .open-discount-state-container {\n    margin-left: 24px;\n  }\n  .discount-form-container {\n    margin-top: 17px;\n    display: flex;\n    flex-direction: column;\n    gap: 28px;\n  }\n  .discount-toggle {\n    display: flex;\n    align-items: center;\n    cursor: pointer;\n  }\n  .discount-granted-info {\n    margin-bottom: 23px;\n    font-size: 14px;\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    white-space: pre-wrap;\n  }\n  .discount-remove {\n    display: flex;\n    margin-left: 12px;\n    cursor: pointer;\n  }\n  .granted-info {\n    margin-left: 12px;\n    color: #27ae60;\n    font-size: 12px;\n  }\n\n  .cart-card-subtitle {\n    margin-bottom: ", ";\n    padding-bottom: ", ";\n    border-bottom: ", ";\n  }\n"])), function (props) { return props.theme.cardRadius; }, function (_a) {
     var mobile = _a.mobile;
@@ -112,5 +112,5 @@ return mobile && "0px -2px 15px 0px #0000001A;";
                             textAlign: mobile ? "center" : "left",
-                        } }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "secondary", block: true, className: "buy-button", loading: loading, onClick: function () { return onBuyClick(id); } }, { children: t("CartCard.buyButton") })), !mobile && discount && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: discount.status === "granted" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Text_1.Text, __assign({ className: "discount-granted-info" }, { children: [(0, jsx_runtime_1.jsx)(MarkdownRenderer_1.MarkdownRenderer, __assign({ components: { p: React.Fragment } }, { children: t("CartCard.discountGranted") })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "discount-remove", onClick: removeDiscountClick, onKeyUp: removeDiscountClick, role: "button", tabIndex: 0 }, { children: (0, jsx_runtime_1.jsx)(IconBin, {}) }))] })) })) })), description] }))] })), !mobile && discount && discount.status !== "granted" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "separator" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discount-toggle", onClick: function () { return setIsDiscountOpen(!isDiscountOpen); }, onKeyUp: function () { return setIsDiscountOpen(!isDiscountOpen); }, role: "button", tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ size: "12", noMargin: true }, { children: t("CartCard.addDiscountButton") })), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "open-discount-state-container" }, { children: [isDiscountOpen ? (0, jsx_runtime_1.jsx)(ArrowOpenIcon, {}) : (0, jsx_runtime_1.jsx)(ArrowClosedIcon, {}), " "] }))] })), isDiscountOpen && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "discount-form-container" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { type: "text", value: discountInput, onChange: function (e) { return setDiscountInput(e.target.value); }, error: discount.status === "error" && t("CartCard.discountError"), disabled: loading }), discountInput.length !== 0 && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "outline", block: true, loading: loading, onClick: function () { return discount.onDiscountClick(discountInput); } }, { children: t("CartCard.realizeButton") })))] })))] }))] })));
+                        } }, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "secondary", block: true, className: "buy-button", loading: loading, onClick: function () { return onBuyClick(id); } }, { children: t("CartCard.buyButton") })), !mobile && discount && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: discount.status === "granted" && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)(Text_1.Text, __assign({ className: "discount-granted-info" }, { children: [(0, jsx_runtime_1.jsx)(MarkdownRenderer_1.MarkdownRenderer, __assign({ components: { p: React.Fragment } }, { children: t("CartCard.discountGranted") })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "discount-remove", onClick: removeDiscountClick, onKeyUp: removeDiscountClick, role: "button", tabIndex: 0 }, { children: (0, jsx_runtime_1.jsx)(IconBin, {}) }))] })) })) })), description] }))] })), !mobile && discount && discount.status !== "granted" && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "separator" }), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "discount-toggle", onClick: function () { return setIsDiscountOpen(!isDiscountOpen); }, onKeyUp: function () { return setIsDiscountOpen(!isDiscountOpen); }, role: "button", tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ size: "12", noMargin: true }, { children: t("CartCard.addDiscountButton") })), (0, jsx_runtime_1.jsxs)(Button_1.Button, __assign({ mode: "icon", className: "open-discount-state-container" }, { children: [isDiscountOpen ? (0, jsx_runtime_1.jsx)(ArrowOpenIcon, {}) : (0, jsx_runtime_1.jsx)(ArrowClosedIcon, {}), " "] }))] })), isDiscountOpen && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "discount-form-container" }, { children: [(0, jsx_runtime_1.jsx)(Input_1.Input, { type: "text", value: discountInput, onChange: function (e) { return setDiscountInput(e.target.value); }, error: discount.status === "error" && t("CartCard.discountError"), disabled: loading }), discountInput.length !== 0 && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "outline", block: true, loading: loading, onClick: function () { return discount.onDiscountClick(discountInput); } }, { children: t("CartCard.realizeButton") })))] })))] }))] })));
 };
 exports.CartCard = CartCard;
 var templateObject_1;

lib/components/molecules/Categories/Categories.js

@@ -69,3 +69,3 @@ "use strict";
 };
-var StyledCategoriesDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: bold;\n    cursor: pointer;\n    color: currentColor;\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"], ["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: bold;\n    cursor: pointer;\n    color: currentColor;\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"])), function (props) {
+var StyledCategoriesDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: bold;\n    cursor: pointer;\n    color: currentColor;\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"], ["\n  position: relative;\n  min-width: 150px;\n  color: ", ";\n  border: ", ";\n  background-color: ", ";\n\n  .categories-dropdown-button {\n    position: relative;\n    justify-content: space-between;\n    padding: 7px 10px;\n    display: flex;\n    align-items: center;\n    width: 100%;\n    text-align: left;\n    appearance: none;\n    background-color: transparent;\n    border: none;\n    font-weight: bold;\n    cursor: pointer;\n    color: currentColor;\n\n    svg {\n      margin-left: 10px;\n      transform: ", ";\n      transition: opacity 0.2s ease-in-out;\n\n      path {\n        stroke: currentColor;\n      }\n    }\n\n    &:hover svg {\n      opacity: 0.6;\n    }\n\n    &:after {\n      position: absolute;\n      bottom: 0;\n      left: 10px;\n      right: 10px;\n      height: 1px;\n      display: ", ";\n      background-color: currentColor;\n      content: \"\";\n    }\n  }\n\n  > .categories-dropdown-options {\n    padding: 7px 10px;\n    position: absolute;\n    top: 100%;\n    left: -1px;\n    width: calc(100% + 2px);\n    max-height: ", ";\n    height: ", ";\n    overflow-y: ", ";\n    display: ", ";\n    box-sizing: border-box;\n    background-color: ", ";\n    border: 1px solid currentColor;\n    border-top: none;\n    z-index: ", ";\n\n    input {\n      color: currentColor;\n    }\n\n    span {\n      word-break: break-word;\n    }\n  }\n\n  .categories-dropdown-options .categories-dropdown-options {\n    margin-left: 20px;\n  }\n"])), function (props) {
     return props.lightContrast ? props.theme.gray4 : props.theme.gray2;
@@ -72,0 +72,0 @@ }, function (props) {

lib/components/molecules/CheckoutCard/CheckoutCard.js

@@ -49,3 +49,4 @@ "use strict";
 var RatioBox_1 = require("../../atoms/RatioBox/RatioBox");
-var StyledCheckoutCard = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 15px;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  background-color: ", ";\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  .checkout-card-discount {\n    color: ", ";\n    text-decoration: line-through;\n  }\n\n  .checkout-card-top {\n    border-bottom: 1px solid ", ";\n  }\n\n  .checkout-card-remove {\n    margin-left: 40px;\n    cursor: pointer;\n  }\n\n  .checkout-card-summary {\n    padding-top: 20px;\n    display: flex;\n    border-top: 1px solid ", ";\n  }\n\n  .checkout-card-img {\n    width: ", ";\n    margin-right: ", ";\n    flex-shrink: 0;\n    background-color: ", ";\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  .checkout-card-summary-item {\n    margin-right: ", ";\n  }\n\n  svg {\n    path {\n      fill: currentColor;\n    }\n\n    &.icon-primary {\n      path {\n        fill: ", ";\n      }\n    }\n\n    &.icon-stroke {\n      path {\n        stroke: currentColor;\n        fill: none;\n      }\n    }\n  }\n"], ["\n  padding: 15px;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  background-color: ", ";\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  .checkout-card-discount {\n    color: ", ";\n    text-decoration: line-through;\n  }\n\n  .checkout-card-top {\n    border-bottom: 1px solid ", ";\n  }\n\n  .checkout-card-remove {\n    margin-left: 40px;\n    cursor: pointer;\n  }\n\n  .checkout-card-summary {\n    padding-top: 20px;\n    display: flex;\n    border-top: 1px solid ", ";\n  }\n\n  .checkout-card-img {\n    width: ", ";\n    margin-right: ", ";\n    flex-shrink: 0;\n    background-color: ", ";\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  .checkout-card-summary-item {\n    margin-right: ", ";\n  }\n\n  svg {\n    path {\n      fill: currentColor;\n    }\n\n    &.icon-primary {\n      path {\n        fill: ", ";\n      }\n    }\n\n    &.icon-stroke {\n      path {\n        stroke: currentColor;\n        fill: none;\n      }\n    }\n  }\n"])), function (_a) {
+var Button_1 = require("../../atoms/Button/Button");
+var StyledCheckoutCard = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  padding: 15px;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  background-color: ", ";\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  .checkout-card-discount {\n    color: ", ";\n    text-decoration: line-through;\n  }\n\n  .checkout-card-top {\n    border-bottom: 1px solid ", ";\n  }\n\n  .checkout-card-remove {\n    margin-left: 40px;\n  }\n\n  .checkout-card-summary {\n    padding-top: 20px;\n    display: flex;\n    border-top: 1px solid ", ";\n  }\n\n  .checkout-card-img {\n    width: ", ";\n    margin-right: ", ";\n    flex-shrink: 0;\n    background-color: ", ";\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  .checkout-card-summary-item {\n    margin-right: ", ";\n  }\n\n  svg {\n    path {\n      fill: currentColor;\n    }\n\n    &.icon-primary {\n      path {\n        fill: ", ";\n      }\n    }\n\n    &.icon-stroke {\n      path {\n        stroke: currentColor;\n        fill: none;\n      }\n    }\n  }\n"], ["\n  padding: 15px;\n  width: 100%;\n  box-sizing: border-box;\n  border-radius: ", "px;\n  background-color: ", ";\n\n  &:not(:last-child) {\n    margin-bottom: 20px;\n  }\n\n  .checkout-card-discount {\n    color: ", ";\n    text-decoration: line-through;\n  }\n\n  .checkout-card-top {\n    border-bottom: 1px solid ", ";\n  }\n\n  .checkout-card-remove {\n    margin-left: 40px;\n  }\n\n  .checkout-card-summary {\n    padding-top: 20px;\n    display: flex;\n    border-top: 1px solid ", ";\n  }\n\n  .checkout-card-img {\n    width: ", ";\n    margin-right: ", ";\n    flex-shrink: 0;\n    background-color: ", ";\n\n    img {\n      max-width: 100%;\n      height: auto;\n    }\n  }\n\n  .checkout-card-summary-item {\n    margin-right: ", ";\n  }\n\n  svg {\n    path {\n      fill: currentColor;\n    }\n\n    &.icon-primary {\n      path {\n        fill: ", ";\n      }\n    }\n\n    &.icon-stroke {\n      path {\n        stroke: currentColor;\n        fill: none;\n      }\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -93,3 +94,3 @@ return theme.cardRadius;
                                             justifyContent: "flex-end",
-                                        } }, { children: [!mobile && ((0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && ((0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ as: "h5", level: 5, className: "checkout-card-discount" }, { children: oldPrice }))), (0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ as: "h4", level: 4 }, { children: price }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ tabIndex: 0, role: "button", className: "checkout-card-remove", onClick: handleDelete, onKeyDown: function (e) { return e.key === "Enter" && handleDelete(); } }, { children: (0, jsx_runtime_1.jsx)(IconBin, {}) }))] })) }))] }), (0, jsx_runtime_1.jsx)(react_grid_system_1.Row, { children: (0, jsx_runtime_1.jsx)(react_grid_system_1.Col, __assign({ xs: 12 }, { children: summary && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkout-card-summary" }, { children: summary.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkout-card-summary-item" }, { children: (0, jsx_runtime_1.jsx)(React.Fragment, { children: item }) }), index)); }) }))) })) })] }))] })) })));
+                                        } }, { children: [!mobile && ((0, jsx_runtime_1.jsxs)("div", { children: [oldPrice && ((0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ as: "h5", level: 5, className: "checkout-card-discount" }, { children: oldPrice }))), (0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ as: "h4", level: 4 }, { children: price }))] })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "icon", className: "checkout-card-remove", onClick: handleDelete, onKeyDown: function (e) { return e.key === "Enter" && handleDelete(); } }, { children: (0, jsx_runtime_1.jsx)(IconBin, {}) })) })] })) }))] }), (0, jsx_runtime_1.jsx)(react_grid_system_1.Row, { children: (0, jsx_runtime_1.jsx)(react_grid_system_1.Col, __assign({ xs: 12 }, { children: summary && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkout-card-summary" }, { children: summary.map(function (item, index) { return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkout-card-summary-item" }, { children: (0, jsx_runtime_1.jsx)(React.Fragment, { children: item }) }), index)); }) }))) })) })] }))] })) })));
 };
@@ -96,0 +97,0 @@ exports.CheckoutCard = CheckoutCard;

lib/components/molecules/Dropdown/Dropdown.js

@@ -28,3 +28,3 @@ "use strict";
 var chroma_js_1 = __importDefault(require("chroma-js"));
-var StyledDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  line-height: 20px;\n  .control {\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 6px 39px 6px 10px;\n    background: ", ";\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n  .is-open {\n    .control {\n      border-color: ", ";\n      border-bottom-color: transparent;\n      &:after {\n        height: 1px;\n      }\n    }\n  }\n  .Dropdown-option {\n    padding: 5px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n  .menu {\n    border-color: ", ";\n    border-top: 0;\n    font-size: 14px;\n    background: ", ";\n  }\n  .arrows {\n    position: absolute;\n    right: 10px;\n    top: calc(50% - 4px);\n  }\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  line-height: 20px;\n  .control {\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 6px 39px 6px 10px;\n    background: ", ";\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n  .is-open {\n    .control {\n      border-color: ", ";\n      border-bottom-color: transparent;\n      &:after {\n        height: 1px;\n      }\n    }\n  }\n  .Dropdown-option {\n    padding: 5px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n  .menu {\n    border-color: ", ";\n    border-top: 0;\n    font-size: 14px;\n    background: ", ";\n  }\n  .arrows {\n    position: absolute;\n    right: 10px;\n    top: calc(50% - 4px);\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
+var StyledDropdown = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  font-family: ", ";\n  font-size: 16px;\n  line-height: 20px;\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 6px 39px 6px 10px;\n    background: ", ";\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n  .is-open {\n    .control {\n      border-color: ", ";\n      border-bottom-color: transparent;\n      &:after {\n        height: 1px;\n      }\n    }\n  }\n\n  .arrows {\n    position: absolute;\n    right: 10px;\n    top: calc(50% - 4px);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-option {\n    padding: 5px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n  .menu {\n    border-color: ", ";\n    border-top: 0;\n    font-size: 14px;\n    background: ", ";\n  }\n"], ["\n  font-family: ", ";\n  font-size: 16px;\n  line-height: 20px;\n  .control {\n    cursor: pointer;\n    transition: none;\n    border-color: transparent;\n    color: ", ";\n    padding: 6px 39px 6px 10px;\n    background: ", ";\n    &:after {\n      position: absolute;\n      content: \"\";\n      bottom: 0;\n      left: 10px;\n      width: calc(100% - 20px);\n      background: ", ";\n    }\n  }\n  .is-open {\n    .control {\n      border-color: ", ";\n      border-bottom-color: transparent;\n      &:after {\n        height: 1px;\n      }\n    }\n  }\n\n  .arrows {\n    position: absolute;\n    right: 10px;\n    top: calc(50% - 4px);\n    transition: opacity 0.2s ease-in-out;\n  }\n\n  &:hover .arrows {\n    opacity: 0.6;\n  }\n\n  .Dropdown-option {\n    padding: 5px 10px;\n    color: ", ";\n    &:hover {\n      background: ", ";\n    }\n    &.is-selected {\n      background: ", ";\n    }\n  }\n  .menu {\n    border-color: ", ";\n    border-top: 0;\n    font-size: 14px;\n    background: ", ";\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
     return props.theme.mode !== "dark" ? props.theme.gray1 : props.theme.white;
@@ -31,0 +31,0 @@ }, function (props) {

lib/components/molecules/MarkdownRenderer/MarkdownRenderer.js

@@ -51,2 +51,3 @@ "use strict";
 var rehype_raw_1 = __importDefault(require("rehype-raw"));
+var markdown_1 = require("../../../utils/components/markdown");
 var StyledMarkdownRenderer = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  color: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 1.55em;\n\n  h1 {\n    font-size: ", ";\n  }\n\n  h2 {\n    font-size: ", ";\n  }\n\n  h3 {\n    font-size: ", ";\n  }\n\n  h4 {\n    font-size: ", ";\n  }\n\n  h5 {\n    font-size: ", ";\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-bottom: 0;\n    font-weight: bold;\n    line-height: 125%;\n    color: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  strong,\n  b {\n    font-weight: bold;\n  }\n"], ["\n  color: ", ";\n  font-family: ", ";\n  font-size: 14px;\n  line-height: 1.55em;\n\n  h1 {\n    font-size: ", ";\n  }\n\n  h2 {\n    font-size: ", ";\n  }\n\n  h3 {\n    font-size: ", ";\n  }\n\n  h4 {\n    font-size: ", ";\n  }\n\n  h5 {\n    font-size: ", ";\n  }\n\n  h1,\n  h2,\n  h3,\n  h4,\n  h5,\n  h6 {\n    margin-bottom: 0;\n    font-weight: bold;\n    line-height: 125%;\n    color: ", ";\n\n    &:first-child {\n      margin-top: 0;\n    }\n  }\n\n  strong,\n  b {\n    font-weight: bold;\n  }\n"])), function (_a) {
@@ -61,3 +62,3 @@ var theme = _a.theme;
     var _a = props.mobile, mobile = _a === void 0 ? false : _a;
-    return ((0, jsx_runtime_1.jsx)(StyledMarkdownRenderer, __assign({ mobile: mobile }, { children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, __assign({ rehypePlugins: [rehype_raw_1.default] }, props)) })));
+    return ((0, jsx_runtime_1.jsx)(StyledMarkdownRenderer, __assign({ mobile: mobile }, { children: (0, jsx_runtime_1.jsx)(react_markdown_1.default, __assign({ rehypePlugins: [rehype_raw_1.default] }, props, { children: (0, markdown_1.fixContentForMarkdown)(props.children) })) })));
 };
@@ -64,0 +65,0 @@ exports.MarkdownRenderer = MarkdownRenderer;

lib/components/organisms/CourseAgenda/CourseAgenda.js

@@ -64,4 +64,4 @@ "use strict";
 var PendingIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "13", height: "13", viewBox: "0 0 13 13", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "pending-icon" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1.54036 12.1668H11.457C11.6449 12.1668 11.8251 12.0922 11.9579 11.9594C12.0907 11.8265 12.1654 11.6464 12.1654 11.4585V1.54183C12.1654 1.35397 12.0907 1.1738 11.9579 1.04096C11.8251 0.908124 11.6449 0.833496 11.457 0.833496H1.54036C1.3525 0.833496 1.17234 0.908124 1.0395 1.04096C0.906659 1.1738 0.832031 1.35397 0.832031 1.54183V11.4585C0.832031 11.6464 0.906659 11.8265 1.0395 11.9594C1.17234 12.0922 1.3525 12.1668 1.54036 12.1668ZM2.2487 2.25016H10.7487V10.7502H2.2487V2.25016Z", fill: "#6D6D6D" }) }))); };
-var ChevronIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "13", height: "8", viewBox: "0 0 13 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.88128 0.381282C6.22299 0.0395728 6.77701 0.0395728 7.11872 0.381282L12.3687 5.63128C12.7104 5.97299 12.7104 6.52701 12.3687 6.86872C12.027 7.21043 11.473 7.21043 11.1313 6.86872L6.5 2.23744L1.86872 6.86872C1.52701 7.21043 0.97299 7.21043 0.631282 6.86872C0.289573 6.52701 0.289573 5.97299 0.631282 5.63128L5.88128 0.381282Z", fill: "#4A4A4A" }) }))); };
-var StyledSection = (0, styled_components_1.default)("section")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  & > header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: flex-start;\n    align-content: flex-start;\n    margin-bottom: 20px;\n\n    .lms-icon-title {\n      margin: 0;\n      flex-wrap: nowrap;\n    }\n    & > div {\n      display: inline-flex;\n      align-items: center;\n\n      p {\n        margin-right: 6px;\n      }\n    }\n  }\n  .lesson__item {\n    background: ", ";\n    border-left: 2px solid ", ";\n    padding: 10px;\n    margin: 10px 0;\n    overflow: hidden;\n    border-radius: ", "px;\n\n    .duration {\n      margin: 1px 0;\n    }\n\n    & > header {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      align-content: flex-start;\n\n      button {\n        margin-left: auto;\n        margin-top: 7px;\n        display: flex;\n        flex-shrink: 0;\n        appearance: none;\n        border: none;\n        background: transparent;\n        cursor: pointer;\n        svg {\n          transition: transform 0.2s ease-in;\n          transform: rotate(180deg);\n\n          path {\n            fill: ", ";\n          }\n        }\n      }\n\n      .lesson__details {\n        flex-shrink: 0;\n        margin-right: 10px;\n\n        > p:first-child {\n          margin-bottom: 2px;\n          margin-top: 3px;\n          text-transform: uppercase;\n          color: ", ";\n        }\n      }\n\n      .lesson__title {\n        font-size: 14px;\n        color: ", ";\n        margin: 0;\n        font-weight: bold;\n        display: flex;\n        small {\n          font-size: 12px;\n          font-weight: 300;\n          .lesson__index {\n            text-transform: uppercase;\n            color: ", ";\n            white-space: nowrap;\n          }\n          .lesson__duration {\n            color: ", ";\n          }\n          margin-right: 12px;\n        }\n      }\n    }\n    &.open > header button svg {\n      transform: rotate(180deg);\n    }\n    &.closed > header button svg {\n      transform: rotate(0);\n    }\n    &.closed {\n      cursor: pointer;\n    }\n\n    .lesson__topics {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      transition: all 0.5s;\n      li {\n        padding: 10px;\n        background: transparent;\n        position: relative;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n        &:first-child {\n          margin-top: 10px;\n        }\n\n        &:last-child:not(.lesson__topic-current) {\n          padding-bottom: 0;\n          border-bottom: none;\n        }\n\n        &:not(.lesson__topic-current):not(:last-child) {\n          border-bottom: 2px solid\n            ", ";\n        }\n\n        &:hover p:last-child {\n          text-decoration: underline;\n        }\n\n        &.lesson__topic-pending svg {\n          margin-top: 4px;\n\n          path {\n            fill: ", ";\n          }\n        }\n\n        &.lesson__topic-finished svg {\n          margin-top: 7px;\n        }\n\n        .lesson__description {\n          display: flex;\n\n          svg {\n            margin-right: 7px;\n            width: 17px;\n            flex-shrink: 0;\n\n            &.current-icon path {\n              fill: ", ";\n            }\n          }\n\n          .lesson__index {\n            opacity: 0.5;\n            margin-right: 4px;\n          }\n        }\n\n        &.lesson__topic-current {\n          background: ", ";\n          border-radius: ", "px;\n          cursor: default;\n          button {\n            margin-top: 10px;\n            border-width: 1px;\n            font-weight: normal;\n          }\n          &:hover,\n          .lesson__description p:last-child {\n            text-decoration: none;\n          }\n\n          svg {\n            margin-top: 2px;\n          }\n        }\n      }\n    }\n  }\n\n  .lesson__item.open .lesson__topics {\n    max-height: 100vh;\n    transition: all 0.35s ease-in;\n  }\n\n  .lesson__item.closed .lesson__topics {\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.35s ease-out;\n  }\n"], ["\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  & > header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: flex-start;\n    align-content: flex-start;\n    margin-bottom: 20px;\n\n    .lms-icon-title {\n      margin: 0;\n      flex-wrap: nowrap;\n    }\n    & > div {\n      display: inline-flex;\n      align-items: center;\n\n      p {\n        margin-right: 6px;\n      }\n    }\n  }\n  .lesson__item {\n    background: ", ";\n    border-left: 2px solid ", ";\n    padding: 10px;\n    margin: 10px 0;\n    overflow: hidden;\n    border-radius: ", "px;\n\n    .duration {\n      margin: 1px 0;\n    }\n\n    & > header {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      align-content: flex-start;\n\n      button {\n        margin-left: auto;\n        margin-top: 7px;\n        display: flex;\n        flex-shrink: 0;\n        appearance: none;\n        border: none;\n        background: transparent;\n        cursor: pointer;\n        svg {\n          transition: transform 0.2s ease-in;\n          transform: rotate(180deg);\n\n          path {\n            fill: ", ";\n          }\n        }\n      }\n\n      .lesson__details {\n        flex-shrink: 0;\n        margin-right: 10px;\n\n        > p:first-child {\n          margin-bottom: 2px;\n          margin-top: 3px;\n          text-transform: uppercase;\n          color: ", ";\n        }\n      }\n\n      .lesson__title {\n        font-size: 14px;\n        color: ", ";\n        margin: 0;\n        font-weight: bold;\n        display: flex;\n        small {\n          font-size: 12px;\n          font-weight: 300;\n          .lesson__index {\n            text-transform: uppercase;\n            color: ", ";\n            white-space: nowrap;\n          }\n          .lesson__duration {\n            color: ", ";\n          }\n          margin-right: 12px;\n        }\n      }\n    }\n    &.open > header button svg {\n      transform: rotate(180deg);\n    }\n    &.closed > header button svg {\n      transform: rotate(0);\n    }\n    &.closed {\n      cursor: pointer;\n    }\n\n    .lesson__topics {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      transition: all 0.5s;\n      li {\n        padding: 10px;\n        background: transparent;\n        position: relative;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n        &:first-child {\n          margin-top: 10px;\n        }\n\n        &:last-child:not(.lesson__topic-current) {\n          padding-bottom: 0;\n          border-bottom: none;\n        }\n\n        &:not(.lesson__topic-current):not(:last-child) {\n          border-bottom: 2px solid\n            ", ";\n        }\n\n        &:hover p:last-child {\n          text-decoration: underline;\n        }\n\n        &.lesson__topic-pending svg {\n          margin-top: 4px;\n\n          path {\n            fill: ", ";\n          }\n        }\n\n        &.lesson__topic-finished svg {\n          margin-top: 7px;\n        }\n\n        .lesson__description {\n          display: flex;\n\n          svg {\n            margin-right: 7px;\n            width: 17px;\n            flex-shrink: 0;\n\n            &.current-icon path {\n              fill: ", ";\n            }\n          }\n\n          .lesson__index {\n            opacity: 0.5;\n            margin-right: 4px;\n          }\n        }\n\n        &.lesson__topic-current {\n          background: ", ";\n          border-radius: ", "px;\n          cursor: default;\n          button {\n            margin-top: 10px;\n            border-width: 1px;\n            font-weight: normal;\n          }\n          &:hover,\n          .lesson__description p:last-child {\n            text-decoration: none;\n          }\n\n          svg {\n            margin-top: 2px;\n          }\n        }\n      }\n    }\n  }\n\n  .lesson__item.open .lesson__topics {\n    max-height: 100vh;\n    transition: all 0.35s ease-in;\n  }\n\n  .lesson__item.closed .lesson__topics {\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.35s ease-out;\n  }\n"])), function (_a) {
+var ChevronIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "13", height: "8", viewBox: "0 0 13 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.88128 0.381282C6.22299 0.0395728 6.77701 0.0395728 7.11872 0.381282L12.3687 5.63128C12.7104 5.97299 12.7104 6.52701 12.3687 6.86872C12.027 7.21043 11.473 7.21043 11.1313 6.86872L6.5 2.23744L1.86872 6.86872C1.52701 7.21043 0.97299 7.21043 0.631282 6.86872C0.289573 6.52701 0.289573 5.97299 0.631282 5.63128L5.88128 0.381282Z", fill: "currentColor" }) }))); };
+var StyledSection = (0, styled_components_1.default)("section")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  & > header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: flex-start;\n    align-content: flex-start;\n    margin-bottom: 20px;\n\n    .lms-icon-title {\n      margin: 0;\n      flex-wrap: nowrap;\n    }\n    & > div {\n      display: inline-flex;\n      align-items: center;\n\n      p {\n        margin-right: 6px;\n      }\n    }\n  }\n  .lesson__item {\n    background: ", ";\n    border-left: 2px solid ", ";\n    padding: 10px;\n    margin: 10px 0;\n    overflow: hidden;\n    border-radius: ", "px;\n\n    .duration {\n      margin: 1px 0;\n    }\n\n    & > header {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      align-content: flex-start;\n\n      button {\n        margin-left: auto;\n        margin-top: -4px;\n\n        svg {\n          transition: transform 0.2s ease-in;\n          transform: rotate(180deg);\n        }\n      }\n\n      .lesson__details {\n        flex-shrink: 0;\n        margin-right: 10px;\n\n        > p:first-child {\n          margin-bottom: 2px;\n          margin-top: 3px;\n          text-transform: uppercase;\n          color: ", ";\n        }\n      }\n\n      .lesson__title {\n        font-size: 14px;\n        color: ", ";\n        margin: 0;\n        font-weight: bold;\n        display: flex;\n        small {\n          font-size: 12px;\n          font-weight: 300;\n          .lesson__index {\n            text-transform: uppercase;\n            color: ", ";\n            white-space: nowrap;\n          }\n          .lesson__duration {\n            color: ", ";\n          }\n          margin-right: 12px;\n        }\n      }\n    }\n    &.open > header button svg {\n      transform: rotate(180deg);\n    }\n    &.closed > header button svg {\n      transform: rotate(0);\n    }\n    &.closed {\n      cursor: pointer;\n    }\n\n    .lesson__topics {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      transition: all 0.5s;\n      li {\n        padding: 10px;\n        background: transparent;\n        position: relative;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n        &:first-child {\n          margin-top: 10px;\n        }\n\n        &:last-child:not(.lesson__topic-current) {\n          padding-bottom: 0;\n          border-bottom: none;\n        }\n\n        &:not(.lesson__topic-current):not(:last-child) {\n          border-bottom: 2px solid\n            ", ";\n        }\n\n        &:hover p:last-child {\n          text-decoration: underline;\n        }\n\n        &.lesson__topic-pending svg {\n          margin-top: 4px;\n\n          path {\n            fill: ", ";\n          }\n        }\n\n        &.lesson__topic-finished svg {\n          margin-top: 7px;\n        }\n\n        .lesson__description {\n          display: flex;\n\n          svg {\n            margin-right: 7px;\n            width: 17px;\n            flex-shrink: 0;\n\n            &.current-icon path {\n              fill: ", ";\n            }\n          }\n\n          .lesson__index {\n            opacity: 0.5;\n            margin-right: 4px;\n          }\n        }\n\n        &.lesson__topic-current {\n          background: ", ";\n          border-radius: ", "px;\n          cursor: default;\n          button {\n            margin-top: 10px;\n            border-width: 1px;\n            font-weight: normal;\n          }\n          &:hover,\n          .lesson__description p:last-child {\n            text-decoration: none;\n          }\n\n          svg {\n            margin-top: 2px;\n          }\n        }\n      }\n    }\n  }\n\n  .lesson__item.open .lesson__topics {\n    max-height: 100vh;\n    transition: all 0.35s ease-in;\n  }\n\n  .lesson__item.closed .lesson__topics {\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.35s ease-out;\n  }\n"], ["\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  & > header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: flex-start;\n    align-content: flex-start;\n    margin-bottom: 20px;\n\n    .lms-icon-title {\n      margin: 0;\n      flex-wrap: nowrap;\n    }\n    & > div {\n      display: inline-flex;\n      align-items: center;\n\n      p {\n        margin-right: 6px;\n      }\n    }\n  }\n  .lesson__item {\n    background: ", ";\n    border-left: 2px solid ", ";\n    padding: 10px;\n    margin: 10px 0;\n    overflow: hidden;\n    border-radius: ", "px;\n\n    .duration {\n      margin: 1px 0;\n    }\n\n    & > header {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      align-content: flex-start;\n\n      button {\n        margin-left: auto;\n        margin-top: -4px;\n\n        svg {\n          transition: transform 0.2s ease-in;\n          transform: rotate(180deg);\n        }\n      }\n\n      .lesson__details {\n        flex-shrink: 0;\n        margin-right: 10px;\n\n        > p:first-child {\n          margin-bottom: 2px;\n          margin-top: 3px;\n          text-transform: uppercase;\n          color: ", ";\n        }\n      }\n\n      .lesson__title {\n        font-size: 14px;\n        color: ", ";\n        margin: 0;\n        font-weight: bold;\n        display: flex;\n        small {\n          font-size: 12px;\n          font-weight: 300;\n          .lesson__index {\n            text-transform: uppercase;\n            color: ", ";\n            white-space: nowrap;\n          }\n          .lesson__duration {\n            color: ", ";\n          }\n          margin-right: 12px;\n        }\n      }\n    }\n    &.open > header button svg {\n      transform: rotate(180deg);\n    }\n    &.closed > header button svg {\n      transform: rotate(0);\n    }\n    &.closed {\n      cursor: pointer;\n    }\n\n    .lesson__topics {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      transition: all 0.5s;\n      li {\n        padding: 10px;\n        background: transparent;\n        position: relative;\n        cursor: pointer;\n        display: flex;\n        flex-direction: column;\n\n        &:first-child {\n          margin-top: 10px;\n        }\n\n        &:last-child:not(.lesson__topic-current) {\n          padding-bottom: 0;\n          border-bottom: none;\n        }\n\n        &:not(.lesson__topic-current):not(:last-child) {\n          border-bottom: 2px solid\n            ", ";\n        }\n\n        &:hover p:last-child {\n          text-decoration: underline;\n        }\n\n        &.lesson__topic-pending svg {\n          margin-top: 4px;\n\n          path {\n            fill: ", ";\n          }\n        }\n\n        &.lesson__topic-finished svg {\n          margin-top: 7px;\n        }\n\n        .lesson__description {\n          display: flex;\n\n          svg {\n            margin-right: 7px;\n            width: 17px;\n            flex-shrink: 0;\n\n            &.current-icon path {\n              fill: ", ";\n            }\n          }\n\n          .lesson__index {\n            opacity: 0.5;\n            margin-right: 4px;\n          }\n        }\n\n        &.lesson__topic-current {\n          background: ", ";\n          border-radius: ", "px;\n          cursor: default;\n          button {\n            margin-top: 10px;\n            border-width: 1px;\n            font-weight: normal;\n          }\n          &:hover,\n          .lesson__description p:last-child {\n            text-decoration: none;\n          }\n\n          svg {\n            margin-top: 2px;\n          }\n        }\n      }\n    }\n  }\n\n  .lesson__item.open .lesson__topics {\n    max-height: 100vh;\n    transition: all 0.35s ease-in;\n  }\n\n  .lesson__item.closed .lesson__topics {\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.35s ease-out;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -73,5 +73,2 @@ return theme.mode === "light"
     var theme = _a.theme;
-    return theme.mode === "light" ? theme.gray1 : theme.white;
-}, function (_a) {
-    var theme = _a.theme;
     return theme.primaryColor;
@@ -129,7 +126,7 @@ }, function (props) { return props.theme.gray1; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.gray2; }, function (_a) {
     }, [defaultOpen, open]);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__item ".concat(open ? "open" : "closed"), onClick: onClick, onKeyDown: function (e) { return e.key === "Enter" && onClick(); }, role: "button", tabIndex: 0 }, { children: [!mobile && ((0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__details" }, { children: [(0, jsx_runtime_1.jsxs)(__1.Text, __assign({ noMargin: true, size: "12" }, { children: [t("Course.Lesson"), " ", index + 1] })), (0, jsx_runtime_1.jsx)(__1.Text, __assign({ noMargin: true, size: "12" }, { children: lesson.duration && lesson.duration }))] })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14", bold: true, noMargin: true }, { children: lesson.title })) }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (e) {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__item ".concat(open ? "open" : "closed"), onClick: onClick, onKeyDown: function (e) { return e.key === "Enter" && onClick(); }, role: "button", tabIndex: 0 }, { children: [!mobile && ((0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__details" }, { children: [(0, jsx_runtime_1.jsxs)(__1.Text, __assign({ noMargin: true, size: "12" }, { children: [t("Course.Lesson"), " ", index + 1] })), (0, jsx_runtime_1.jsx)(__1.Text, __assign({ noMargin: true, size: "12" }, { children: lesson.duration && lesson.duration }))] })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14", bold: true, noMargin: true }, { children: lesson.title })) }), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ onClick: function (e) {
                             e.stopPropagation();
                             e.preventDefault();
                             setOpen(!open);
-                        } }, { children: (0, jsx_runtime_1.jsx)(ChevronIcon, {}) }))] })), (0, jsx_runtime_1.jsx)("ul", __assign({ className: "lesson__topics" }, { children: (_a = lesson.topics) === null || _a === void 0 ? void 0 : _a.map(function (topic, topicIndex) {
+                        }, mode: "icon" }, { children: (0, jsx_runtime_1.jsx)(ChevronIcon, {}) }))] })), (0, jsx_runtime_1.jsx)("ul", __assign({ className: "lesson__topics" }, { children: (_a = lesson.topics) === null || _a === void 0 ? void 0 : _a.map(function (topic, topicIndex) {
                     var mode = "pending";
@@ -136,0 +133,0 @@ if (finishedTopicIds.includes(topic.id)) {

lib/components/organisms/CourseProgram/CourseProgram.js

@@ -89,3 +89,3 @@ "use strict";
 var ChevronIcon = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "13", height: "8", viewBox: "0 0 13 8", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5.88128 0.381282C6.22299 0.0395728 6.77701 0.0395728 7.11872 0.381282L12.3687 5.63128C12.7104 5.97299 12.7104 6.52701 12.3687 6.86872C12.027 7.21043 11.473 7.21043 11.1313 6.86872L6.5 2.23744L1.86872 6.86872C1.52701 7.21043 0.97299 7.21043 0.631282 6.86872C0.289573 6.52701 0.289573 5.97299 0.631282 5.63128L5.88128 0.381282Z", fill: "#4A4A4A" }) }))); };
-var StyledSection = (0, styled_components_1.default)("section")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  & > header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: flex-start;\n    align-content: flex-start;\n    margin-bottom: 20px;\n\n    .lms-icon-title {\n      margin: 0;\n      flex-wrap: nowrap;\n    }\n    & > div {\n      display: inline-flex;\n      align-items: center;\n\n      p {\n        margin-right: 6px;\n      }\n    }\n  }\n  .lesson__item {\n    background: ", ";\n    border-left: 2px solid ", ";\n    padding: 10px;\n    margin: 10px 0;\n    overflow: hidden;\n    border-radius: ", "px;\n\n    .duration {\n      margin: 1px 0;\n    }\n\n    & > header {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      align-content: flex-start;\n\n      button {\n        margin-left: auto;\n        margin-top: 7px;\n        display: flex;\n        flex-shrink: 0;\n        appearance: none;\n        border: none;\n        background: transparent;\n        cursor: pointer;\n        svg {\n          transition: transform 0.2s ease-in;\n          transform: rotate(180deg);\n\n          path {\n            fill: ", ";\n          }\n        }\n      }\n\n      .lesson__details {\n        flex-shrink: 0;\n        margin-right: 10px;\n\n        > p:first-child {\n          margin-bottom: 2px;\n          margin-top: 3px;\n          text-transform: uppercase;\n          color: ", ";\n        }\n      }\n\n      .lesson__title {\n        font-size: 14px;\n        color: ", ";\n        margin: 0;\n        font-weight: bold;\n        display: flex;\n        small {\n          font-size: 12px;\n          font-weight: 300;\n          .lesson__index {\n            text-transform: uppercase;\n            color: ", ";\n            white-space: nowrap;\n          }\n          .lesson__duration {\n            color: ", ";\n          }\n          margin-right: 12px;\n        }\n      }\n    }\n    &.open > header button svg {\n      transform: rotate(180deg);\n    }\n    &.closed > header button svg {\n      transform: rotate(0);\n    }\n\n    .lesson__topics {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      transition: all 0.5s;\n\n      li {\n        padding: 10px;\n        position: relative;\n        display: flex;\n        flex-direction: ", ";\n\n        &:first-child {\n          margin-top: 10px;\n        }\n\n        &:last-child:not(.lesson__topic-current) {\n          padding-bottom: 0;\n          border-bottom: none;\n        }\n\n        &:not(.lesson__topic-current):not(:last-child) {\n          border-bottom: 2px solid\n            ", ";\n        }\n\n        button {\n          margin-left: ", ";\n          margin-top: ", ";\n          font-size: 12px;\n          padding: 3px 10px;\n        }\n\n        &.lesson__topic-pending svg {\n          margin-top: 4px;\n\n          path {\n            fill: ", ";\n          }\n        }\n\n        &.lesson__topic-finished svg {\n          margin-top: 7px;\n        }\n\n        .lesson__description {\n          display: flex;\n          align-items: center;\n\n          svg {\n            margin-right: 7px;\n            width: 17px;\n            flex-shrink: 0;\n\n            path {\n              fill: ", ";\n            }\n          }\n\n          .lesson__index {\n            opacity: 0.5;\n            margin-right: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  .lesson__item.open .lesson__topics {\n    max-height: 100vh;\n    transition: all 0.35s ease-in;\n  }\n\n  .lesson__item.closed .lesson__topics {\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.35s ease-out;\n  }\n"], ["\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  & > header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: flex-start;\n    align-content: flex-start;\n    margin-bottom: 20px;\n\n    .lms-icon-title {\n      margin: 0;\n      flex-wrap: nowrap;\n    }\n    & > div {\n      display: inline-flex;\n      align-items: center;\n\n      p {\n        margin-right: 6px;\n      }\n    }\n  }\n  .lesson__item {\n    background: ", ";\n    border-left: 2px solid ", ";\n    padding: 10px;\n    margin: 10px 0;\n    overflow: hidden;\n    border-radius: ", "px;\n\n    .duration {\n      margin: 1px 0;\n    }\n\n    & > header {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      align-content: flex-start;\n\n      button {\n        margin-left: auto;\n        margin-top: 7px;\n        display: flex;\n        flex-shrink: 0;\n        appearance: none;\n        border: none;\n        background: transparent;\n        cursor: pointer;\n        svg {\n          transition: transform 0.2s ease-in;\n          transform: rotate(180deg);\n\n          path {\n            fill: ", ";\n          }\n        }\n      }\n\n      .lesson__details {\n        flex-shrink: 0;\n        margin-right: 10px;\n\n        > p:first-child {\n          margin-bottom: 2px;\n          margin-top: 3px;\n          text-transform: uppercase;\n          color: ", ";\n        }\n      }\n\n      .lesson__title {\n        font-size: 14px;\n        color: ", ";\n        margin: 0;\n        font-weight: bold;\n        display: flex;\n        small {\n          font-size: 12px;\n          font-weight: 300;\n          .lesson__index {\n            text-transform: uppercase;\n            color: ", ";\n            white-space: nowrap;\n          }\n          .lesson__duration {\n            color: ", ";\n          }\n          margin-right: 12px;\n        }\n      }\n    }\n    &.open > header button svg {\n      transform: rotate(180deg);\n    }\n    &.closed > header button svg {\n      transform: rotate(0);\n    }\n\n    .lesson__topics {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      transition: all 0.5s;\n\n      li {\n        padding: 10px;\n        position: relative;\n        display: flex;\n        flex-direction: ", ";\n\n        &:first-child {\n          margin-top: 10px;\n        }\n\n        &:last-child:not(.lesson__topic-current) {\n          padding-bottom: 0;\n          border-bottom: none;\n        }\n\n        &:not(.lesson__topic-current):not(:last-child) {\n          border-bottom: 2px solid\n            ", ";\n        }\n\n        button {\n          margin-left: ", ";\n          margin-top: ", ";\n          font-size: 12px;\n          padding: 3px 10px;\n        }\n\n        &.lesson__topic-pending svg {\n          margin-top: 4px;\n\n          path {\n            fill: ", ";\n          }\n        }\n\n        &.lesson__topic-finished svg {\n          margin-top: 7px;\n        }\n\n        .lesson__description {\n          display: flex;\n          align-items: center;\n\n          svg {\n            margin-right: 7px;\n            width: 17px;\n            flex-shrink: 0;\n\n            path {\n              fill: ", ";\n            }\n          }\n\n          .lesson__index {\n            opacity: 0.5;\n            margin-right: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  .lesson__item.open .lesson__topics {\n    max-height: 100vh;\n    transition: all 0.35s ease-in;\n  }\n\n  .lesson__item.closed .lesson__topics {\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.35s ease-out;\n  }\n"])), function (_a) {
+var StyledSection = (0, styled_components_1.default)("section")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  & > header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: flex-start;\n    align-content: flex-start;\n    margin-bottom: 20px;\n\n    .lms-icon-title {\n      margin: 0;\n      flex-wrap: nowrap;\n    }\n    & > div {\n      display: inline-flex;\n      align-items: center;\n\n      p {\n        margin-right: 6px;\n      }\n    }\n  }\n  .lesson__item {\n    background: ", ";\n    border-left: 2px solid ", ";\n    padding: 10px;\n    margin: 10px 0;\n    overflow: hidden;\n    border-radius: ", "px;\n\n    .duration {\n      margin: 1px 0;\n    }\n\n    & > header {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      align-content: flex-start;\n\n      button {\n        margin-top: -4px;\n        svg {\n          transition: transform 0.2s ease-in;\n          transform: rotate(180deg);\n        }\n      }\n\n      .lesson__details {\n        flex-shrink: 0;\n        margin-right: 10px;\n\n        > p:first-child {\n          margin-bottom: 2px;\n          margin-top: 3px;\n          text-transform: uppercase;\n          color: ", ";\n        }\n      }\n\n      .lesson__title {\n        font-size: 14px;\n        color: ", ";\n        margin: 0;\n        font-weight: bold;\n        display: flex;\n        small {\n          font-size: 12px;\n          font-weight: 300;\n          .lesson__index {\n            text-transform: uppercase;\n            color: ", ";\n            white-space: nowrap;\n          }\n          .lesson__duration {\n            color: ", ";\n          }\n          margin-right: 12px;\n        }\n      }\n    }\n    &.open > header button svg {\n      transform: rotate(180deg);\n    }\n    &.closed > header button svg {\n      transform: rotate(0);\n    }\n\n    .lesson__topics {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      transition: all 0.5s;\n\n      li {\n        padding: 10px;\n        position: relative;\n        display: flex;\n        flex-direction: ", ";\n\n        &:first-child {\n          margin-top: 10px;\n        }\n\n        &:last-child:not(.lesson__topic-current) {\n          padding-bottom: 0;\n          border-bottom: none;\n        }\n\n        &:not(.lesson__topic-current):not(:last-child) {\n          border-bottom: 2px solid\n            ", ";\n        }\n\n        button {\n          margin-left: ", ";\n          margin-top: ", ";\n          font-size: 12px;\n          padding: 3px 10px;\n        }\n\n        &.lesson__topic-pending svg {\n          margin-top: 4px;\n\n          path {\n            fill: ", ";\n          }\n        }\n\n        &.lesson__topic-finished svg {\n          margin-top: 7px;\n        }\n\n        .lesson__description {\n          display: flex;\n          align-items: center;\n\n          svg {\n            margin-right: 7px;\n            width: 17px;\n            flex-shrink: 0;\n\n            path {\n              fill: ", ";\n            }\n          }\n\n          .lesson__index {\n            opacity: 0.5;\n            margin-right: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  .lesson__item.open .lesson__topics {\n    max-height: 100vh;\n    transition: all 0.35s ease-in;\n  }\n\n  .lesson__item.closed .lesson__topics {\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.35s ease-out;\n  }\n"], ["\n  width: 100%;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n\n  & > header {\n    display: flex;\n    flex-direction: row;\n    flex-wrap: nowrap;\n    justify-content: space-between;\n    align-items: flex-start;\n    align-content: flex-start;\n    margin-bottom: 20px;\n\n    .lms-icon-title {\n      margin: 0;\n      flex-wrap: nowrap;\n    }\n    & > div {\n      display: inline-flex;\n      align-items: center;\n\n      p {\n        margin-right: 6px;\n      }\n    }\n  }\n  .lesson__item {\n    background: ", ";\n    border-left: 2px solid ", ";\n    padding: 10px;\n    margin: 10px 0;\n    overflow: hidden;\n    border-radius: ", "px;\n\n    .duration {\n      margin: 1px 0;\n    }\n\n    & > header {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: nowrap;\n      align-items: flex-start;\n      align-content: flex-start;\n\n      button {\n        margin-top: -4px;\n        svg {\n          transition: transform 0.2s ease-in;\n          transform: rotate(180deg);\n        }\n      }\n\n      .lesson__details {\n        flex-shrink: 0;\n        margin-right: 10px;\n\n        > p:first-child {\n          margin-bottom: 2px;\n          margin-top: 3px;\n          text-transform: uppercase;\n          color: ", ";\n        }\n      }\n\n      .lesson__title {\n        font-size: 14px;\n        color: ", ";\n        margin: 0;\n        font-weight: bold;\n        display: flex;\n        small {\n          font-size: 12px;\n          font-weight: 300;\n          .lesson__index {\n            text-transform: uppercase;\n            color: ", ";\n            white-space: nowrap;\n          }\n          .lesson__duration {\n            color: ", ";\n          }\n          margin-right: 12px;\n        }\n      }\n    }\n    &.open > header button svg {\n      transform: rotate(180deg);\n    }\n    &.closed > header button svg {\n      transform: rotate(0);\n    }\n\n    .lesson__topics {\n      list-style: none;\n      margin: 0;\n      padding: 0;\n      transition: all 0.5s;\n\n      li {\n        padding: 10px;\n        position: relative;\n        display: flex;\n        flex-direction: ", ";\n\n        &:first-child {\n          margin-top: 10px;\n        }\n\n        &:last-child:not(.lesson__topic-current) {\n          padding-bottom: 0;\n          border-bottom: none;\n        }\n\n        &:not(.lesson__topic-current):not(:last-child) {\n          border-bottom: 2px solid\n            ", ";\n        }\n\n        button {\n          margin-left: ", ";\n          margin-top: ", ";\n          font-size: 12px;\n          padding: 3px 10px;\n        }\n\n        &.lesson__topic-pending svg {\n          margin-top: 4px;\n\n          path {\n            fill: ", ";\n          }\n        }\n\n        &.lesson__topic-finished svg {\n          margin-top: 7px;\n        }\n\n        .lesson__description {\n          display: flex;\n          align-items: center;\n\n          svg {\n            margin-right: 7px;\n            width: 17px;\n            flex-shrink: 0;\n\n            path {\n              fill: ", ";\n            }\n          }\n\n          .lesson__index {\n            opacity: 0.5;\n            margin-right: 4px;\n          }\n        }\n      }\n    }\n  }\n\n  .lesson__item.open .lesson__topics {\n    max-height: 100vh;\n    transition: all 0.35s ease-in;\n  }\n\n  .lesson__item.closed .lesson__topics {\n    max-height: 0;\n    overflow: hidden;\n    transition: all 0.35s ease-out;\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -97,5 +97,2 @@ return theme.mode === "light"
     var theme = _a.theme;
-    return theme.mode === "light" ? theme.gray1 : theme.white;
-}, function (_a) {
-    var theme = _a.theme;
     return theme.primaryColor;
@@ -127,7 +124,7 @@ }, function (props) { return props.theme.gray1; }, function (props) { return props.theme.primaryColor; }, function (props) { return props.theme.gray2; }, function (props) { return (props.mobile ? "column" : "row"); }, function (_a) {
     }, []);
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__item ".concat(open ? "open" : "closed"), onClick: onClick, onKeyDown: function (e) { return e.key === "Enter" && onClick(); }, role: "button", tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__details" }, { children: [(0, jsx_runtime_1.jsxs)(__2.Text, __assign({ noMargin: true, size: "12" }, { children: [t("Course.Lesson"), " ", index + 1] })), (0, jsx_runtime_1.jsx)(__2.Text, __assign({ noMargin: true, size: "12" }, { children: lesson.duration && lesson.duration }))] })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__2.Text, __assign({ size: "14", bold: true, noMargin: true }, { children: lesson.title })) }), (0, jsx_runtime_1.jsx)("button", __assign({ onClick: function (e) {
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__item ".concat(open ? "open" : "closed"), onClick: onClick, onKeyDown: function (e) { return e.key === "Enter" && onClick(); }, role: "button", tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsxs)("header", { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson__details" }, { children: [(0, jsx_runtime_1.jsxs)(__2.Text, __assign({ noMargin: true, size: "12" }, { children: [t("Course.Lesson"), " ", index + 1] })), (0, jsx_runtime_1.jsx)(__2.Text, __assign({ noMargin: true, size: "12" }, { children: lesson.duration && lesson.duration }))] })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(__2.Text, __assign({ size: "14", bold: true, noMargin: true }, { children: lesson.title })) }), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ onClick: function (e) {
                             e.stopPropagation();
                             e.preventDefault();
                             setOpen(!open);
-                        } }, { children: (0, jsx_runtime_1.jsx)(ChevronIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("ul", __assign({ className: "lesson__topics" }, { children: (_a = lesson.topics) === null || _a === void 0 ? void 0 : _a.map(function (topic, topicIndex) {
+                        }, mode: "icon" }, { children: (0, jsx_runtime_1.jsx)(ChevronIcon, {}) }))] }), (0, jsx_runtime_1.jsx)("ul", __assign({ className: "lesson__topics" }, { children: (_a = lesson.topics) === null || _a === void 0 ? void 0 : _a.map(function (topic, topicIndex) {
                     return ((0, jsx_runtime_1.jsx)(CourseProgramTopic, { topic: topic, index: topicIndex + 1, onTopicClick: onTopicClick }, topicIndex));
@@ -134,0 +131,0 @@ }) }))] })));

package.json

 {
   "name": "@escolalms/components",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "main": "lib/index.js",
@@ -32,2 +32,3 @@ "license": "MIT",
     "@types/react-slick": "^0.23.8",
+    "@types/lodash.flow": "^3.5.6",
     "@types/styled-components": "^5.1.25",
@@ -46,2 +47,3 @@ "@typescript-eslint/eslint-plugin": "^5.22.0",
     "leva": "^0.9.24",
+    "lodash.flow": "^3.5.0",
     "postcss": "^8.4.13",
@@ -48,0 +50,0 @@ "postcss-scss": "^4.0.4",

src/components/atoms/Button/Button.md

@@ -10,2 +10,19 @@ React component example:
 
+const Icon = () => {
+  return (
+    <svg
+      className="arrows"
+      width="14"
+      height="8"
+      viewBox="0 0 14 8"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M6.29289 0.292893C6.68342 -0.0976311 7.31658 -0.0976311 7.70711 0.292893L13.7071 6.29289C14.0976 6.68342 14.0976 7.31658 13.7071 7.70711C13.3166 8.09763 12.6834 8.09763 12.2929 7.70711L7 2.41421L1.70711 7.70711C1.31658 8.09763 0.683417 8.09763 0.292893 7.70711C-0.0976311 7.31658 -0.0976311 6.68342 0.292893 6.29289L6.29289 0.292893Z"
+        fill="currentColor"
+      />
+    </svg>
+  );
+};
+
 <React.Fragment>
@@ -44,2 +61,5 @@ <ThemeTester flexDirection="column">
     </Button>
+    <Button mode="icon">
+      <Icon />
+    </Button>
   </ThemeTester>
@@ -46,0 +66,0 @@

src/components/atoms/NoteAction/NoteAction.md

 ```js
 import { ImageModal, ThemeTester } from "../../../styleguide";
-import { Link } from "../../../";
+import { Link, Title, Text } from "../../../";
 const DownloadIcon = () => (
@@ -37,4 +37,4 @@ <svg
     <NoteAction
-      title={"Note without color"}
-      subtitle="luty 2018"
+      title={<Title level={4}>"Note without color"</Title>}
+      subtitle={<Text size={"14"}>"luty 2018"</Text>}
       actions={
@@ -51,7 +51,17 @@ <React.Fragment>
     />
-    <NoteAction title={"Note with color"} actions={"action"} color={"red"} />
     <NoteAction
-      subtitle="luty 2018"
+      title={<Title level={4}>"Note with color"</Title>}
+      actions={"action"}
+      color={"red"}
+    />
+    <NoteAction
+      subtitle={<Text size={"14"}>"luty 2018"</Text>}
       title={
-        "Note with color and long text t is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English."
+        <Title level={4}>
+          "Note with color and long text t is a long established fact that a
+          reader will be distracted by the readable content of a page when
+          looking at its layout. The point of using Lorem Ipsum is that it has a
+          more-or-less normal distribution of letters, as opposed to using
+          'Content here, content here', making it look like readable English."
+        </Title>
       }
@@ -58,0 +68,0 @@ actions={"15:20"}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16905611

increased by0.04%

Number of package files

461

increased by0.66%

Lines of code

25075

increased by0.76%

Worsened metrics

Dev dependency count

53

increased by3.92%

No dependency changes