@escolalms/components - npm Package Compare versions

Comparing version 0.0.33 to 0.0.34

lib/components/molecules/MarkdownRenderer/MarkdownRenderer.js

@@ -56,2 +56,3 @@ "use strict";
 var chroma_js_1 = __importDefault(require("chroma-js"));
+var utils_1 = require("../../../utils/utils");
 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  .table-responsive {\n    td,\n    tr,\n    th {\n      border: 1px solid\n        ", ";\n      padding: 5px 10px;\n    }\n    table {\n      border: 1px solid\n        ", ";\n      border-collapse: collapse;\n    }\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\n  .table-responsive {\n    td,\n    tr,\n    th {\n      border: 1px solid\n        ", ";\n      padding: 5px 10px;\n    }\n    table {\n      border: 1px solid\n        ", ";\n      border-collapse: collapse;\n    }\n  }\n"])), function (_a) {
@@ -74,5 +75,6 @@ var theme = _a.theme;
 });
+var LightBoxOverwrite = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n", "\n"], ["\n", "\n"])), utils_1.SharedLightboxStyle);
 var MarkdownImage = function (props) {
     var _a = (0, react_1.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
-    return ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: function () { return setIsOpen(true); }, onKeyDown: function () { return setIsOpen(true); }, role: "button", tabIndex: -1 }, { children: [(0, jsx_runtime_1.jsx)("img", { src: props.src, alt: props.alt, style: { cursor: "pointer" } }), isOpen && props.src && ((0, jsx_runtime_1.jsx)(react_image_lightbox_1.default, { mainSrc: props.src, onCloseRequest: function () { return setIsOpen(false); } }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", __assign({ onClick: function () { return setIsOpen(true); }, onKeyDown: function () { return setIsOpen(true); }, role: "button", tabIndex: -1 }, { children: [(0, jsx_runtime_1.jsx)("img", { src: props.src, alt: props.alt, style: { cursor: "pointer" } }), isOpen && props.src && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LightBoxOverwrite, {}), (0, jsx_runtime_1.jsx)(react_image_lightbox_1.default, { mainSrc: props.src, onCloseRequest: function () { return setIsOpen(false); } })] }))] })));
 };
@@ -96,3 +98,3 @@ exports.MarkdownImage = MarkdownImage;
 exports.MarkdownRenderer = MarkdownRenderer;
-exports.default = (0, styled_components_1.withTheme)((0, styled_components_1.default)(exports.MarkdownRenderer)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))));
-var templateObject_1, templateObject_2;
+exports.default = (0, styled_components_1.withTheme)((0, styled_components_1.default)(exports.MarkdownRenderer)(templateObject_3 || (templateObject_3 = __makeTemplateObject([""], [""]))));
+var templateObject_1, templateObject_2, templateObject_3;

lib/components/molecules/Navigation/Navigation.d.ts

@@ -16,4 +16,5 @@ import * as React from "react";
     menuItems: MenuItem[];
+    search?: ReactNode;
 }
 export declare const Navigation: React.FC<NavigationProps>;
 export {};

lib/components/molecules/Navigation/Navigation.js

@@ -46,2 +46,3 @@ "use strict";
 var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
 var react_1 = require("react");
@@ -53,7 +54,9 @@ var styled_components_1 = __importStar(require("styled-components"));
 var react_grid_system_1 = require("react-grid-system");
+var __1 = require("../../../");
+var chroma_js_1 = __importDefault(require("chroma-js"));
 var ArrowLeftIcon = function () {
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "8", height: "14", viewBox: "0 0 8 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7 1L1 7L7 13", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) })));
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "8", height: "14", viewBox: "0 0 8 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M7 1L1 7L7 13", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 };
-var ArrowRigthIcon = function () {
-    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1.5 11L6.5 6L1.5 1", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }) })));
+var ArrowRightIcon = function () {
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "8", height: "12", viewBox: "0 0 8 12", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M1.5 11L6.5 6L1.5 1", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
 };
@@ -63,5 +66,7 @@ var CrossIcon = function () {
 };
-var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n.drawer-content {\n  background: ", ";\n}\n.drawer-header {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  background: ", ";\n  justify-content: space-between;\n  padding: 15px 16px;\n  box-sizing: border-box;\n  box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.1);\n  ", ";\n  * {\n    color: ", ";\n    font-weight: 700;\n  }\n  \n}\n.menu-drawer-close {\n  cursor: pointer;\n  padding: 0 6px;\n}\n.drawer-menu-item {\n  box-sizing: border-box;\n  display: flex;\n  cursor: pointer;\n  background: ", ";\n    font-weight: 700;\n    \n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border-bottom: ", ";\n}\n.drawer-menu-item__subtitle {\n  padding: 18px 16px;\n  color: ", ";\n}\n.drawer-menu-item__title {\n  width: 100%;\n  * {\n  color: ", ";\n    padding: 18px 16px;\n    display: block;\n    box-sizing: border-box;\n    width: 100%;\n    text-decoration: none;\n  }\n}\n.drawer-nested-submenu-header-container {\n  width: 100%;\n  cursor: pointer;\n}\n.drawer-nested-submenu-header {\n  text-align:center;\n}\n.drawer-menu-list {\n  margin: 0;\n  list-style-type: none;\n  padding: 0;\n}\n.drawer-menu-item__icon {\n  padding-right: 16px;\n  color: ", ";\n}\n"], ["\n.drawer-content {\n  background: ", ";\n}\n.drawer-header {\n  display: inline-flex;\n  width: 100%;\n  align-items: center;\n  background: ", ";\n  justify-content: space-between;\n  padding: 15px 16px;\n  box-sizing: border-box;\n  box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.1);\n  ", ";\n  * {\n    color: ", ";\n    font-weight: 700;\n  }\n  \n}\n.menu-drawer-close {\n  cursor: pointer;\n  padding: 0 6px;\n}\n.drawer-menu-item {\n  box-sizing: border-box;\n  display: flex;\n  cursor: pointer;\n  background: ", ";\n    font-weight: 700;\n    \n  align-items: center;\n  justify-content: space-between;\n  width: 100%;\n  border-bottom: ", ";\n}\n.drawer-menu-item__subtitle {\n  padding: 18px 16px;\n  color: ", ";\n}\n.drawer-menu-item__title {\n  width: 100%;\n  * {\n  color: ", ";\n    padding: 18px 16px;\n    display: block;\n    box-sizing: border-box;\n    width: 100%;\n    text-decoration: none;\n  }\n}\n.drawer-nested-submenu-header-container {\n  width: 100%;\n  cursor: pointer;\n}\n.drawer-nested-submenu-header {\n  text-align:center;\n}\n.drawer-menu-list {\n  margin: 0;\n  list-style-type: none;\n  padding: 0;\n}\n.drawer-menu-item__icon {\n  padding-right: 16px;\n  color: ", ";\n}\n"])), function (_a) {
+var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n\n  svg {\n    transition: opacity 0.2s ease-in-out;\n  \n    &:hover {\n      opacity: 0.65;\n      cursor: pointer;\n    }\n  }\n  \n  .drawer-search {\n    padding: 24px 16px;\n     border-bottom: ", ";\n  }\n\n  .drawer,\n  .drawer-content-wrapper {\n    box-sizing: border-box;\n  }\n\n  .drawer-content-wrapper {\n    width: 100%;\n    box-sizing: border-box;\n  }\n  \n  .drawer-header {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    justify-content: space-between;\n    padding: 15px 16px;\n    box-sizing: border-box;\n    box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.1);\n  }\n\n  .drawer-content {\n    background: ", ";\n  }\n  \n  .drawer-menu-list {\n    margin: 0;\n    list-style-type: none;\n    padding: 0;\n  }\n  \n  .drawer-menu-item {\n    padding: 15px 16px;\n    box-sizing: border-box;\n    display: flex;\n    cursor: pointer;      \n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    border-bottom: ", ";\n      \n    a {\n      text-decoration: none;\n    }\n  }\n  \n  .drawer-nested-submenu-header-container {\n    width: 100%;\n  }\n\n  .drawer-nested-submenu-header {\n    text-align: center;\n  }\n  \n  .drawer-menu-item__icon svg path,\n  .menu-drawer-prev svg path {\n    stroke: ", ";\n  }\n  \n  .menu-drawer-close svg path {\n    fill: ", ";\n  }\n"], ["\n\n  svg {\n    transition: opacity 0.2s ease-in-out;\n  \n    &:hover {\n      opacity: 0.65;\n      cursor: pointer;\n    }\n  }\n  \n  .drawer-search {\n    padding: 24px 16px;\n     border-bottom: ", ";\n  }\n\n  .drawer,\n  .drawer-content-wrapper {\n    box-sizing: border-box;\n  }\n\n  .drawer-content-wrapper {\n    width: 100%;\n    box-sizing: border-box;\n  }\n  \n  .drawer-header {\n    display: inline-flex;\n    width: 100%;\n    align-items: center;\n    justify-content: space-between;\n    padding: 15px 16px;\n    box-sizing: border-box;\n    box-shadow: 0px -2px 15px rgba(0, 0, 0, 0.1);\n  }\n\n  .drawer-content {\n    background: ", ";\n  }\n  \n  .drawer-menu-list {\n    margin: 0;\n    list-style-type: none;\n    padding: 0;\n  }\n  \n  .drawer-menu-item {\n    padding: 15px 16px;\n    box-sizing: border-box;\n    display: flex;\n    cursor: pointer;      \n    align-items: center;\n    justify-content: space-between;\n    width: 100%;\n    border-bottom: ", ";\n      \n    a {\n      text-decoration: none;\n    }\n  }\n  \n  .drawer-nested-submenu-header-container {\n    width: 100%;\n  }\n\n  .drawer-nested-submenu-header {\n    text-align: center;\n  }\n  \n  .drawer-menu-item__icon svg path,\n  .menu-drawer-prev svg path {\n    stroke: ", ";\n  }\n  \n  .menu-drawer-close svg path {\n    fill: ", ";\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return theme.mode !== "dark" ? theme.backgroundLight : theme.backgroundDark;
+    return "1px solid ".concat(theme.mode !== "dark"
+        ? (0, chroma_js_1.default)(theme.backgroundLight).darken(0.3).css()
+        : (0, chroma_js_1.default)(theme.white).alpha(0.15).css());
 }, function (_a) {
@@ -72,27 +77,18 @@ var theme = _a.theme;
     var theme = _a.theme;
-    if (theme.mode === "dark") {
-        return "border-bottom: 1px solid ".concat(theme.gray1);
-    }
+    return "1px solid ".concat(theme.mode !== "dark"
+        ? (0, chroma_js_1.default)(theme.backgroundLight).darken(0.3).css()
+        : (0, chroma_js_1.default)(theme.white).alpha(0.15).css());
 }, function (_a) {
     var theme = _a.theme;
-    return theme.mode !== "dark" ? theme.gray2 : theme.white;
+    return theme.mode === "dark" ? theme.white : theme.gray1;
 }, function (_a) {
     var theme = _a.theme;
-    return theme.mode !== "dark" ? theme.backgroundLight : theme.backgroundDark;
-}, function (_a) {
+    return (theme.mode === "dark" ? theme.white : theme.gray1);
+});
+var StyledNavigation = (0, styled_components_1.default)("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 16px;\n  }\n  .menu-button {\n    cursor: pointer;\n    width: 35px;\n    height: 35px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    transition: opacity 0.2s ease-in-out;\n\n    &:hover {\n      opacity: 0.65;\n    }\n  }\n  .menu-bar {\n    width: 19px;\n    height: 2px;\n    margin: 2px 0;\n    background: ", ";\n    cursor: pointer;\n  }\n"], ["\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 16px;\n  }\n  .menu-button {\n    cursor: pointer;\n    width: 35px;\n    height: 35px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n    transition: opacity 0.2s ease-in-out;\n\n    &:hover {\n      opacity: 0.65;\n    }\n  }\n  .menu-bar {\n    width: 19px;\n    height: 2px;\n    margin: 2px 0;\n    background: ", ";\n    cursor: pointer;\n  }\n"])), function (_a) {
     var theme = _a.theme;
-    return "1px solid ".concat(theme.mode !== "dark" ? theme.gray3 : theme.gray1);
-}, function (_a) {
-    var theme = _a.theme;
-    return (theme.mode !== "dark" ? theme.gray2 : theme.white);
-}, function (_a) {
-    var theme = _a.theme;
-    return (theme.mode !== "dark" ? theme.gray2 : theme.white);
-}, function (_a) {
-    var theme = _a.theme;
-    return (theme.mode !== "dark" ? theme.gray2 : theme.white);
+    return theme.mode === "dark" ? theme.white : theme.gray2;
 });
-var StyledNavigation = (0, styled_components_1.default)("div")(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 16px;\n  }\n  .menu-button {\n    cursor: pointer;\n    width: 35px;\n    height: 35px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n  }\n  .menu-bar {\n    width: 19px;\n    height: 2px;\n    margin: 2px 0;\n    background: ", ";\n    cursor: pointer;\n  }\n"], ["\n  .header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    margin: 0 16px;\n  }\n  .menu-button {\n    cursor: pointer;\n    width: 35px;\n    height: 35px;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex-direction: column;\n  }\n  .menu-bar {\n    width: 19px;\n    height: 2px;\n    margin: 2px 0;\n    background: ", ";\n    cursor: pointer;\n  }\n"])), function (props) { return props.theme.gray1; });
 var Navigation = function (props) {
-    var mobile = props.mobile, logo = props.logo, menuItems = props.menuItems;
+    var mobile = props.mobile, logo = props.logo, menuItems = props.menuItems, search = props.search;
     var _a = (0, react_1.useState)(false), mobileMenuOpen = _a[0], setMobileMenuOpen = _a[1];
@@ -135,8 +131,8 @@ var _b = (0, react_1.useState)({}), drawerSubmenuHistory = _b[0], setDrawerSubmenuHistory = _b[1];
                                     : undefined;
-                            } }, { children: menuItem.children ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "drawer-menu-item__subtitle" }, { children: menuItem.title })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "drawer-menu-item__icon" }, { children: (0, jsx_runtime_1.jsx)(ArrowRigthIcon, {}) }))] })) : ((0, jsx_runtime_1.jsx)("span", __assign({ className: "drawer-menu-item__title", onClick: onCloseDrawer, onKeyUp: onCloseDrawer, tabIndex: 0, role: "link" }, { children: menuItem.title }))) }), menuItem.key) }, i));
+                            } }, { children: menuItem.children ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(__1.Text, __assign({ className: "drawer-menu-item__subtitle", noMargin: true, bold: true }, { children: menuItem.title })), (0, jsx_runtime_1.jsx)("span", __assign({ className: "drawer-menu-item__icon" }, { children: (0, jsx_runtime_1.jsx)(ArrowRightIcon, {}) }))] })) : ((0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14", className: "drawer-menu-item__title", onClick: onCloseDrawer, onKeyUp: onCloseDrawer, tabIndex: 0, role: "link" }, { children: menuItem.title }))) }), menuItem.key) }, i));
                 }) })) }));
     };
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mobile ? ((0, jsx_runtime_1.jsxs)(StyledNavigation, { children: [(0, jsx_runtime_1.jsx)(GlobalStyle, {}), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, __assign({}, logo)), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "menu-button", onClick: function () { return setMobileMenuOpen(true); }, onKeyUp: function () { return setMobileMenuOpen(true); }, role: "menubar", tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "menu-bar" }), (0, jsx_runtime_1.jsx)("span", { className: "menu-bar" }), (0, jsx_runtime_1.jsx)("span", { className: "menu-bar" })] }))] })), (0, jsx_runtime_1.jsxs)(rc_drawer_1.default, __assign({ open: mobileMenuOpen, handler: false, width: "100%" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "drawer-header" }, { children: Object.keys(drawerSubmenuHistory).length > 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "drawer-nested-submenu-header-container", onClick: function () { return onDrawerSubMenuBackClick(); }, onKeyUp: function () { return onDrawerSubMenuBackClick(); }, role: "button", tabIndex: 0 }, { children: (0, jsx_runtime_1.jsxs)(react_grid_system_1.Row, { children: [(0, jsx_runtime_1.jsx)(react_grid_system_1.Col, __assign({ xs: 2 }, { children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon, {}) })), (0, jsx_runtime_1.jsx)(react_grid_system_1.Col, __assign({ xs: 8, className: "drawer-nested-submenu-header" }, { children: drawerSubmenuHistory[Object.keys(drawerSubmenuHistory).length - 1].title }))] }) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, __assign({}, logo)), (0, jsx_runtime_1.jsx)("span", __assign({ className: "menu-drawer-close", onClick: function () { return setMobileMenuOpen(!mobileMenuOpen); }, onKeyUp: function () { return setMobileMenuOpen(!mobileMenuOpen); }, role: "button", tabIndex: 0 }, { children: (0, jsx_runtime_1.jsx)(CrossIcon, {}) }))] })) })), (0, jsx_runtime_1.jsx)("div", { children: renderMobileMenu(currentMenuItems) })] }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: mobile ? ((0, jsx_runtime_1.jsxs)(StyledNavigation, { children: [(0, jsx_runtime_1.jsx)(GlobalStyle, {}), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "header" }, { children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, __assign({}, logo)), (0, jsx_runtime_1.jsxs)("span", __assign({ className: "menu-button", onClick: function () { return setMobileMenuOpen(true); }, onKeyUp: function () { return setMobileMenuOpen(true); }, role: "menubar", tabIndex: 0 }, { children: [(0, jsx_runtime_1.jsx)("span", { className: "menu-bar" }), (0, jsx_runtime_1.jsx)("span", { className: "menu-bar" }), (0, jsx_runtime_1.jsx)("span", { className: "menu-bar" })] }))] })), (0, jsx_runtime_1.jsxs)(rc_drawer_1.default, __assign({ open: mobileMenuOpen, handler: false, className: "drawer" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "drawer-header" }, { children: Object.keys(drawerSubmenuHistory).length > 0 ? ((0, jsx_runtime_1.jsx)("div", __assign({ className: "drawer-nested-submenu-header-container", onClick: function () { return onDrawerSubMenuBackClick(); }, onKeyUp: function () { return onDrawerSubMenuBackClick(); }, role: "button", tabIndex: 0 }, { children: (0, jsx_runtime_1.jsxs)(react_grid_system_1.Row, __assign({ align: "center" }, { children: [(0, jsx_runtime_1.jsx)(react_grid_system_1.Col, __assign({ xs: 2 }, { children: (0, jsx_runtime_1.jsx)("div", __assign({ className: "menu-drawer-prev" }, { children: (0, jsx_runtime_1.jsx)(ArrowLeftIcon, {}) })) })), (0, jsx_runtime_1.jsx)(react_grid_system_1.Col, __assign({ xs: 8, className: "drawer-nested-submenu-header" }, { children: (0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14", bold: true }, { children: drawerSubmenuHistory[Object.keys(drawerSubmenuHistory).length - 1].title })) }))] })) }))) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Logo_1.Logo, __assign({}, logo)), (0, jsx_runtime_1.jsx)("span", __assign({ className: "menu-drawer-close", onClick: function () { return setMobileMenuOpen(!mobileMenuOpen); }, onKeyUp: function () { return setMobileMenuOpen(!mobileMenuOpen); }, role: "button", tabIndex: 0 }, { children: (0, jsx_runtime_1.jsx)(CrossIcon, {}) }))] })) })), search && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "drawer-search" }, { children: (0, jsx_runtime_1.jsx)(React.Fragment, { children: search }) }))), (0, jsx_runtime_1.jsx)("div", { children: renderMobileMenu(currentMenuItems) })] }))] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {})) }));
 };
 exports.Navigation = Navigation;
 var templateObject_1, templateObject_2;

lib/components/players/ImagePlayer/ImagePlayer.js

@@ -41,4 +41,5 @@ "use strict";
 var react_2 = require("@escolalms/sdk/lib/react");
+var utils_1 = require("../../../utils/utils");
 var StyledImagePlayer = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  > div {\n    cursor: pointer;\n\n    img {\n      width: 100%;\n      transition: transform 0.5s ease-out;\n    }\n    &:hover {\n      img {\n        transform: scale(1.02);\n      }\n    }\n  }\n"], ["\n  > div {\n    cursor: pointer;\n\n    img {\n      width: 100%;\n      transition: transform 0.5s ease-out;\n    }\n    &:hover {\n      img {\n        transform: scale(1.02);\n      }\n    }\n  }\n"])));
-var LightBoxOverwrite = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n\n@keyframes closeWindow {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n.ril__outer {\n  background-color: rgba(0, 0, 0, 0.85);\n  outline: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  -ms-content-zooming: none;\n  user-select: none;\n  /* stylelint-disable property-no-vendor-prefix */\n  -ms-user-select: none;\n  -ms-touch-select: none;\n  touch-action: none;\n}\n\n.ril__outerClosing {\n  opacity: 0;\n}\n\n.ril__inner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.ril__image,\n.ril__imagePrev,\n.ril__imageNext {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  max-width: none;\n  -ms-content-zooming: none;\n  user-select: none;\n  -ms-user-select: none;\n  -ms-touch-select: none;\n  touch-action: none;\n}\n\n.ril__imageDiscourager {\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n\n.ril__navButtons {\n  border: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 20px;\n  height: 34px;\n  padding: 40px 30px;\n  margin: auto;\n  cursor: pointer;\n  opacity: 0.7;\n}\n.ril__navButtons:hover {\n  opacity: 1;\n}\n.ril__navButtons:active {\n  opacity: 0.7;\n}\n\n.ril__navButtonPrev {\n  left: 0;\n  background: rgba(0, 0, 0, 0.2)\n    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==')\n    no-repeat center;\n}\n\n.ril__navButtonNext {\n  right: 0;\n  background: rgba(0, 0, 0, 0.2)\n    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+')\n    no-repeat center;\n}\n\n.ril__downloadBlocker {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');\n  background-size: cover;\n}\n\n.ril__caption,\n.ril__toolbar {\n  background-color: rgba(0, 0, 0, 0.5);\n  position: absolute;\n  left: 0;\n  right: 0;\n  display: flex;\n  justify-content: space-between;\n}\n\n.ril__caption {\n  bottom: 0;\n  max-height: 150px;\n  overflow: auto;\n}\n\n.ril__captionContent {\n  padding: 10px 20px;\n  color: #fff;\n}\n\n.ril__toolbar {\n  top: 0;\n  height: 50px;\n}\n\n.ril__toolbarSide {\n  height: 50px;\n  margin: 0;\n}\n\n.ril__toolbarLeftSide {\n  padding-left: 20px;\n  padding-right: 0;\n  flex: 0 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ril__toolbarRightSide {\n  padding-left: 0;\n  padding-right: 20px;\n  flex: 0 0 auto;\n}\n\n.ril__toolbarItem {\n  display: inline-block;\n  line-height: 50px;\n  padding: 0;\n  color: #fff;\n  font-size: 120%;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ril__toolbarItemChild {\n  vertical-align: middle;\n}\n\n.ril__builtinButton {\n  width: 40px;\n  height: 35px;\n  cursor: pointer;\n  border: none;\n  opacity: 0.7;\n}\n.ril__builtinButton:hover {\n  opacity: 1;\n}\n.ril__builtinButton:active {\n  outline: none;\n}\n\n.ril__builtinButtonDisabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.ril__builtinButtonDisabled:hover {\n  opacity: 0.5;\n}\n\n.ril__closeButton {\n  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=')\n    no-repeat center;\n}\n\n.ril__zoomInButton {\n  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')\n    no-repeat center;\n}\n\n.ril__zoomOutButton {\n  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=')\n    no-repeat center;\n}\n\n.ril__outerAnimating {\n  animation-name: closeWindow;\n}\n\n@keyframes pointFade {\n  0%,\n  19.999%,\n  100% {\n    opacity: 0;\n  }\n  20% {\n    opacity: 1;\n  }\n}\n\n.ril__loadingCircle {\n  width: 60px;\n  height: 60px;\n  position: relative;\n}\n\n.ril__loadingCirclePoint {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.ril__loadingCirclePoint::before {\n  content: '';\n  display: block;\n  margin: 0 auto;\n  width: 11%;\n  height: 30%;\n  background-color: #fff;\n  border-radius: 30%;\n  animation: pointFade 800ms infinite ease-in-out both;\n}\n.ril__loadingCirclePoint:nth-of-type(1) {\n  transform: rotate(0deg);\n}\n.ril__loadingCirclePoint:nth-of-type(7) {\n  transform: rotate(180deg);\n}\n.ril__loadingCirclePoint:nth-of-type(1)::before,\n.ril__loadingCirclePoint:nth-of-type(7)::before {\n  animation-delay: -800ms;\n}\n.ril__loadingCirclePoint:nth-of-type(2) {\n  transform: rotate(30deg);\n}\n.ril__loadingCirclePoint:nth-of-type(8) {\n  transform: rotate(210deg);\n}\n.ril__loadingCirclePoint:nth-of-type(2)::before,\n.ril__loadingCirclePoint:nth-of-type(8)::before {\n  animation-delay: -666ms;\n}\n.ril__loadingCirclePoint:nth-of-type(3) {\n  transform: rotate(60deg);\n}\n.ril__loadingCirclePoint:nth-of-type(9) {\n  transform: rotate(240deg);\n}\n.ril__loadingCirclePoint:nth-of-type(3)::before,\n.ril__loadingCirclePoint:nth-of-type(9)::before {\n  animation-delay: -533ms;\n}\n.ril__loadingCirclePoint:nth-of-type(4) {\n  transform: rotate(90deg);\n}\n.ril__loadingCirclePoint:nth-of-type(10) {\n  transform: rotate(270deg);\n}\n.ril__loadingCirclePoint:nth-of-type(4)::before,\n.ril__loadingCirclePoint:nth-of-type(10)::before {\n  animation-delay: -400ms;\n}\n.ril__loadingCirclePoint:nth-of-type(5) {\n  transform: rotate(120deg);\n}\n.ril__loadingCirclePoint:nth-of-type(11) {\n  transform: rotate(300deg);\n}\n.ril__loadingCirclePoint:nth-of-type(5)::before,\n.ril__loadingCirclePoint:nth-of-type(11)::before {\n  animation-delay: -266ms;\n}\n.ril__loadingCirclePoint:nth-of-type(6) {\n  transform: rotate(150deg);\n}\n.ril__loadingCirclePoint:nth-of-type(12) {\n  transform: rotate(330deg);\n}\n\n.ril__loadingCirclePoint:nth-of-type(6)::before,\n.ril__loadingCirclePoint:nth-of-type(12)::before {\n  animation-delay: -133ms;\n}\n\n.ril__loadingCirclePoint:nth-of-type(13) {\n  transform: rotate(360deg);\n}\n.ril__loadingCirclePoint:nth-of-type(7)::before,\n.ril__loadingCirclePoint:nth-of-type(13)::before {\n  animation-delay: 0ms;\n}\n\n.ril__loadingContainer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.ril__imagePrev .ril__loadingContainer,\n.ril__imageNext .ril__loadingContainer {\n  display: none;\n}\n\n.ril__errorContainer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n}\n.ril__imagePrev .ril__errorContainer,\n.ril__imageNext .ril__errorContainer {\n  display: none;\n}\n\n.ril__loadingContainer__icon {\n  color: #fff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n}\n\n"], ["\n\n@keyframes closeWindow {\n  0% {\n    opacity: 1;\n  }\n  100% {\n    opacity: 0;\n  }\n}\n\n.ril__outer {\n  background-color: rgba(0, 0, 0, 0.85);\n  outline: none;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 1000;\n  width: 100%;\n  height: 100%;\n  -ms-content-zooming: none;\n  user-select: none;\n  /* stylelint-disable property-no-vendor-prefix */\n  -ms-user-select: none;\n  -ms-touch-select: none;\n  touch-action: none;\n}\n\n.ril__outerClosing {\n  opacity: 0;\n}\n\n.ril__inner {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n}\n\n.ril__image,\n.ril__imagePrev,\n.ril__imageNext {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  margin: auto;\n  max-width: none;\n  -ms-content-zooming: none;\n  user-select: none;\n  -ms-user-select: none;\n  -ms-touch-select: none;\n  touch-action: none;\n}\n\n.ril__imageDiscourager {\n  background-repeat: no-repeat;\n  background-position: center;\n  background-size: contain;\n}\n\n.ril__navButtons {\n  border: none;\n  position: absolute;\n  top: 0;\n  bottom: 0;\n  width: 20px;\n  height: 34px;\n  padding: 40px 30px;\n  margin: auto;\n  cursor: pointer;\n  opacity: 0.7;\n}\n.ril__navButtons:hover {\n  opacity: 1;\n}\n.ril__navButtons:active {\n  opacity: 0.7;\n}\n\n.ril__navButtonPrev {\n  left: 0;\n  background: rgba(0, 0, 0, 0.2)\n    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==')\n    no-repeat center;\n}\n\n.ril__navButtonNext {\n  right: 0;\n  background: rgba(0, 0, 0, 0.2)\n    url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+')\n    no-repeat center;\n}\n\n.ril__downloadBlocker {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');\n  background-size: cover;\n}\n\n.ril__caption,\n.ril__toolbar {\n  background-color: rgba(0, 0, 0, 0.5);\n  position: absolute;\n  left: 0;\n  right: 0;\n  display: flex;\n  justify-content: space-between;\n}\n\n.ril__caption {\n  bottom: 0;\n  max-height: 150px;\n  overflow: auto;\n}\n\n.ril__captionContent {\n  padding: 10px 20px;\n  color: #fff;\n}\n\n.ril__toolbar {\n  top: 0;\n  height: 50px;\n}\n\n.ril__toolbarSide {\n  height: 50px;\n  margin: 0;\n}\n\n.ril__toolbarLeftSide {\n  padding-left: 20px;\n  padding-right: 0;\n  flex: 0 1 auto;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n\n.ril__toolbarRightSide {\n  padding-left: 0;\n  padding-right: 20px;\n  flex: 0 0 auto;\n}\n\n.ril__toolbarItem {\n  display: inline-block;\n  line-height: 50px;\n  padding: 0;\n  color: #fff;\n  font-size: 120%;\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.ril__toolbarItemChild {\n  vertical-align: middle;\n}\n\n.ril__builtinButton {\n  width: 40px;\n  height: 35px;\n  cursor: pointer;\n  border: none;\n  opacity: 0.7;\n}\n.ril__builtinButton:hover {\n  opacity: 1;\n}\n.ril__builtinButton:active {\n  outline: none;\n}\n\n.ril__builtinButtonDisabled {\n  cursor: default;\n  opacity: 0.5;\n}\n.ril__builtinButtonDisabled:hover {\n  opacity: 0.5;\n}\n\n.ril__closeButton {\n  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=')\n    no-repeat center;\n}\n\n.ril__zoomInButton {\n  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+')\n    no-repeat center;\n}\n\n.ril__zoomOutButton {\n  background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=')\n    no-repeat center;\n}\n\n.ril__outerAnimating {\n  animation-name: closeWindow;\n}\n\n@keyframes pointFade {\n  0%,\n  19.999%,\n  100% {\n    opacity: 0;\n  }\n  20% {\n    opacity: 1;\n  }\n}\n\n.ril__loadingCircle {\n  width: 60px;\n  height: 60px;\n  position: relative;\n}\n\n.ril__loadingCirclePoint {\n  width: 100%;\n  height: 100%;\n  position: absolute;\n  left: 0;\n  top: 0;\n}\n.ril__loadingCirclePoint::before {\n  content: '';\n  display: block;\n  margin: 0 auto;\n  width: 11%;\n  height: 30%;\n  background-color: #fff;\n  border-radius: 30%;\n  animation: pointFade 800ms infinite ease-in-out both;\n}\n.ril__loadingCirclePoint:nth-of-type(1) {\n  transform: rotate(0deg);\n}\n.ril__loadingCirclePoint:nth-of-type(7) {\n  transform: rotate(180deg);\n}\n.ril__loadingCirclePoint:nth-of-type(1)::before,\n.ril__loadingCirclePoint:nth-of-type(7)::before {\n  animation-delay: -800ms;\n}\n.ril__loadingCirclePoint:nth-of-type(2) {\n  transform: rotate(30deg);\n}\n.ril__loadingCirclePoint:nth-of-type(8) {\n  transform: rotate(210deg);\n}\n.ril__loadingCirclePoint:nth-of-type(2)::before,\n.ril__loadingCirclePoint:nth-of-type(8)::before {\n  animation-delay: -666ms;\n}\n.ril__loadingCirclePoint:nth-of-type(3) {\n  transform: rotate(60deg);\n}\n.ril__loadingCirclePoint:nth-of-type(9) {\n  transform: rotate(240deg);\n}\n.ril__loadingCirclePoint:nth-of-type(3)::before,\n.ril__loadingCirclePoint:nth-of-type(9)::before {\n  animation-delay: -533ms;\n}\n.ril__loadingCirclePoint:nth-of-type(4) {\n  transform: rotate(90deg);\n}\n.ril__loadingCirclePoint:nth-of-type(10) {\n  transform: rotate(270deg);\n}\n.ril__loadingCirclePoint:nth-of-type(4)::before,\n.ril__loadingCirclePoint:nth-of-type(10)::before {\n  animation-delay: -400ms;\n}\n.ril__loadingCirclePoint:nth-of-type(5) {\n  transform: rotate(120deg);\n}\n.ril__loadingCirclePoint:nth-of-type(11) {\n  transform: rotate(300deg);\n}\n.ril__loadingCirclePoint:nth-of-type(5)::before,\n.ril__loadingCirclePoint:nth-of-type(11)::before {\n  animation-delay: -266ms;\n}\n.ril__loadingCirclePoint:nth-of-type(6) {\n  transform: rotate(150deg);\n}\n.ril__loadingCirclePoint:nth-of-type(12) {\n  transform: rotate(330deg);\n}\n\n.ril__loadingCirclePoint:nth-of-type(6)::before,\n.ril__loadingCirclePoint:nth-of-type(12)::before {\n  animation-delay: -133ms;\n}\n\n.ril__loadingCirclePoint:nth-of-type(13) {\n  transform: rotate(360deg);\n}\n.ril__loadingCirclePoint:nth-of-type(7)::before,\n.ril__loadingCirclePoint:nth-of-type(13)::before {\n  animation-delay: 0ms;\n}\n\n.ril__loadingContainer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.ril__imagePrev .ril__loadingContainer,\n.ril__imageNext .ril__loadingContainer {\n  display: none;\n}\n\n.ril__errorContainer {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: #fff;\n}\n.ril__imagePrev .ril__errorContainer,\n.ril__imageNext .ril__errorContainer {\n  display: none;\n}\n\n.ril__loadingContainer__icon {\n  color: #fff;\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  transform: translateX(-50%) translateY(-50%);\n}\n\n"])));
+var LightBoxOverwrite = (0, styled_components_1.createGlobalStyle)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n", "\n"], ["\n", "\n"])), utils_1.SharedLightboxStyle);
 var ImagePlayer = function (_a) {
@@ -52,3 +53,3 @@ var topic = _a.topic, onLoad = _a.onLoad;
     }, []);
-    return ((0, jsx_runtime_1.jsxs)(StyledImagePlayer, { children: [(0, jsx_runtime_1.jsx)(LightBoxOverwrite, {}), (0, jsx_runtime_1.jsx)(Image_1.default, { path: topic.topicable.value, srcSizes: [500, 750, 1000], onClick: function () { return setOpen(true); } }), open && ((0, jsx_runtime_1.jsx)(react_image_lightbox_1.default, { wrapperClassName: "", mainSrc: "".concat(apiUrl, "/api/images/img?path=").concat(topic.topicable.value), onCloseRequest: onCloseRequest }))] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledImagePlayer, { children: [(0, jsx_runtime_1.jsx)(Image_1.default, { path: topic.topicable.value, srcSizes: [500, 750, 1000], onClick: function () { return setOpen(true); } }), open && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(LightBoxOverwrite, {}), (0, jsx_runtime_1.jsx)(react_image_lightbox_1.default, { wrapperClassName: "", mainSrc: "".concat(apiUrl, "/api/images/img?path=").concat(topic.topicable.value), onCloseRequest: onCloseRequest })] }))] }));
 };
@@ -55,0 +56,0 @@ exports.ImagePlayer = ImagePlayer;

lib/utils/utils.d.ts

 export declare const calcPercentage: (current: number, max: number) => string;
 export declare const roundPercentageList: (orig: number[], target?: number) => number[];
+export declare const SharedLightboxStyle: import("styled-components").FlattenSimpleInterpolation;

lib/utils/utils.js

 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.roundPercentageList = exports.calcPercentage = void 0;
+exports.SharedLightboxStyle = exports.roundPercentageList = exports.calcPercentage = void 0;
+var styled_components_1 = require("styled-components");
 var calcPercentage = function (current, max) {
@@ -74,1 +79,3 @@ if (max === 0) {
 exports.roundPercentageList = roundPercentageList;
+exports.SharedLightboxStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  @keyframes closeWindow {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n\n  .ril__outer {\n    background-color: rgba(0, 0, 0, 0.85);\n    outline: none;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1000;\n    width: 100%;\n    height: 100%;\n    -ms-content-zooming: none;\n    user-select: none;\n    /* stylelint-disable property-no-vendor-prefix */\n    -ms-user-select: none;\n    -ms-touch-select: none;\n    touch-action: none;\n  }\n\n  .ril__outerClosing {\n    opacity: 0;\n  }\n\n  .ril__inner {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  .ril__image,\n  .ril__imagePrev,\n  .ril__imageNext {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    max-width: none;\n    -ms-content-zooming: none;\n    user-select: none;\n    -ms-user-select: none;\n    -ms-touch-select: none;\n    touch-action: none;\n  }\n\n  .ril__imageDiscourager {\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n  }\n\n  .ril__navButtons {\n    border: none;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n    height: 34px;\n    padding: 40px 30px;\n    margin: auto;\n    cursor: pointer;\n    opacity: 0.7;\n  }\n  .ril__navButtons:hover {\n    opacity: 1;\n  }\n  .ril__navButtons:active {\n    opacity: 0.7;\n  }\n\n  .ril__navButtonPrev {\n    left: 0;\n    background: rgba(0, 0, 0, 0.2)\n      url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==\")\n      no-repeat center;\n  }\n\n  .ril__navButtonNext {\n    right: 0;\n    background: rgba(0, 0, 0, 0.2)\n      url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+\")\n      no-repeat center;\n  }\n\n  .ril__downloadBlocker {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: url(\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\");\n    background-size: cover;\n  }\n\n  .ril__caption,\n  .ril__toolbar {\n    background-color: rgba(0, 0, 0, 0.5);\n    position: absolute;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .ril__caption {\n    bottom: 0;\n    max-height: 150px;\n    overflow: auto;\n  }\n\n  .ril__captionContent {\n    padding: 10px 20px;\n    color: #fff;\n  }\n\n  .ril__toolbar {\n    top: 0;\n    height: 50px;\n  }\n\n  .ril__toolbarSide {\n    height: 50px;\n    margin: 0;\n  }\n\n  .ril__toolbarLeftSide {\n    padding-left: 20px;\n    padding-right: 0;\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .ril__toolbarRightSide {\n    padding-left: 0;\n    padding-right: 20px;\n    flex: 0 0 auto;\n  }\n\n  .ril__toolbarItem {\n    display: inline-block;\n    line-height: 50px;\n    padding: 0;\n    color: #fff;\n    font-size: 120%;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .ril__toolbarItemChild {\n    vertical-align: middle;\n  }\n\n  .ril__builtinButton {\n    width: 40px;\n    height: 35px;\n    cursor: pointer;\n    border: none;\n    opacity: 0.7;\n  }\n  .ril__builtinButton:hover {\n    opacity: 1;\n  }\n  .ril__builtinButton:active {\n    outline: none;\n  }\n\n  .ril__builtinButtonDisabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n  .ril__builtinButtonDisabled:hover {\n    opacity: 0.5;\n  }\n\n  .ril__closeButton {\n    background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=\")\n      no-repeat center;\n  }\n\n  .ril__zoomInButton {\n    background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+\")\n      no-repeat center;\n  }\n\n  .ril__zoomOutButton {\n    background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=\")\n      no-repeat center;\n  }\n\n  .ril__outerAnimating {\n    animation-name: closeWindow;\n  }\n\n  @keyframes pointFade {\n    0%,\n    19.999%,\n    100% {\n      opacity: 0;\n    }\n    20% {\n      opacity: 1;\n    }\n  }\n\n  .ril__loadingCircle {\n    width: 60px;\n    height: 60px;\n    position: relative;\n  }\n\n  .ril__loadingCirclePoint {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n  .ril__loadingCirclePoint::before {\n    content: \"\";\n    display: block;\n    margin: 0 auto;\n    width: 11%;\n    height: 30%;\n    background-color: #fff;\n    border-radius: 30%;\n    animation: pointFade 800ms infinite ease-in-out both;\n  }\n  .ril__loadingCirclePoint:nth-of-type(1) {\n    transform: rotate(0deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(7) {\n    transform: rotate(180deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(1)::before,\n  .ril__loadingCirclePoint:nth-of-type(7)::before {\n    animation-delay: -800ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(2) {\n    transform: rotate(30deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(8) {\n    transform: rotate(210deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(2)::before,\n  .ril__loadingCirclePoint:nth-of-type(8)::before {\n    animation-delay: -666ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(3) {\n    transform: rotate(60deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(9) {\n    transform: rotate(240deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(3)::before,\n  .ril__loadingCirclePoint:nth-of-type(9)::before {\n    animation-delay: -533ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(4) {\n    transform: rotate(90deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(10) {\n    transform: rotate(270deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(4)::before,\n  .ril__loadingCirclePoint:nth-of-type(10)::before {\n    animation-delay: -400ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(5) {\n    transform: rotate(120deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(11) {\n    transform: rotate(300deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(5)::before,\n  .ril__loadingCirclePoint:nth-of-type(11)::before {\n    animation-delay: -266ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(6) {\n    transform: rotate(150deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(12) {\n    transform: rotate(330deg);\n  }\n\n  .ril__loadingCirclePoint:nth-of-type(6)::before,\n  .ril__loadingCirclePoint:nth-of-type(12)::before {\n    animation-delay: -133ms;\n  }\n\n  .ril__loadingCirclePoint:nth-of-type(13) {\n    transform: rotate(360deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(7)::before,\n  .ril__loadingCirclePoint:nth-of-type(13)::before {\n    animation-delay: 0ms;\n  }\n\n  .ril__loadingContainer {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n  .ril__imagePrev .ril__loadingContainer,\n  .ril__imageNext .ril__loadingContainer {\n    display: none;\n  }\n\n  .ril__errorContainer {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #fff;\n  }\n  .ril__imagePrev .ril__errorContainer,\n  .ril__imageNext .ril__errorContainer {\n    display: none;\n  }\n\n  .ril__loadingContainer__icon {\n    color: #fff;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translateX(-50%) translateY(-50%);\n  }\n"], ["\n  @keyframes closeWindow {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n\n  .ril__outer {\n    background-color: rgba(0, 0, 0, 0.85);\n    outline: none;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    z-index: 1000;\n    width: 100%;\n    height: 100%;\n    -ms-content-zooming: none;\n    user-select: none;\n    /* stylelint-disable property-no-vendor-prefix */\n    -ms-user-select: none;\n    -ms-touch-select: none;\n    touch-action: none;\n  }\n\n  .ril__outerClosing {\n    opacity: 0;\n  }\n\n  .ril__inner {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n  }\n\n  .ril__image,\n  .ril__imagePrev,\n  .ril__imageNext {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    margin: auto;\n    max-width: none;\n    -ms-content-zooming: none;\n    user-select: none;\n    -ms-user-select: none;\n    -ms-touch-select: none;\n    touch-action: none;\n  }\n\n  .ril__imageDiscourager {\n    background-repeat: no-repeat;\n    background-position: center;\n    background-size: contain;\n  }\n\n  .ril__navButtons {\n    border: none;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    width: 20px;\n    height: 34px;\n    padding: 40px 30px;\n    margin: auto;\n    cursor: pointer;\n    opacity: 0.7;\n  }\n  .ril__navButtons:hover {\n    opacity: 1;\n  }\n  .ril__navButtons:active {\n    opacity: 0.7;\n  }\n\n  .ril__navButtonPrev {\n    left: 0;\n    background: rgba(0, 0, 0, 0.2)\n      url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==\")\n      no-repeat center;\n  }\n\n  .ril__navButtonNext {\n    right: 0;\n    background: rgba(0, 0, 0, 0.2)\n      url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+\")\n      no-repeat center;\n  }\n\n  .ril__downloadBlocker {\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    background-image: url(\"data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\");\n    background-size: cover;\n  }\n\n  .ril__caption,\n  .ril__toolbar {\n    background-color: rgba(0, 0, 0, 0.5);\n    position: absolute;\n    left: 0;\n    right: 0;\n    display: flex;\n    justify-content: space-between;\n  }\n\n  .ril__caption {\n    bottom: 0;\n    max-height: 150px;\n    overflow: auto;\n  }\n\n  .ril__captionContent {\n    padding: 10px 20px;\n    color: #fff;\n  }\n\n  .ril__toolbar {\n    top: 0;\n    height: 50px;\n  }\n\n  .ril__toolbarSide {\n    height: 50px;\n    margin: 0;\n  }\n\n  .ril__toolbarLeftSide {\n    padding-left: 20px;\n    padding-right: 0;\n    flex: 0 1 auto;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .ril__toolbarRightSide {\n    padding-left: 0;\n    padding-right: 20px;\n    flex: 0 0 auto;\n  }\n\n  .ril__toolbarItem {\n    display: inline-block;\n    line-height: 50px;\n    padding: 0;\n    color: #fff;\n    font-size: 120%;\n    max-width: 100%;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .ril__toolbarItemChild {\n    vertical-align: middle;\n  }\n\n  .ril__builtinButton {\n    width: 40px;\n    height: 35px;\n    cursor: pointer;\n    border: none;\n    opacity: 0.7;\n  }\n  .ril__builtinButton:hover {\n    opacity: 1;\n  }\n  .ril__builtinButton:active {\n    outline: none;\n  }\n\n  .ril__builtinButtonDisabled {\n    cursor: default;\n    opacity: 0.5;\n  }\n  .ril__builtinButtonDisabled:hover {\n    opacity: 0.5;\n  }\n\n  .ril__closeButton {\n    background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=\")\n      no-repeat center;\n  }\n\n  .ril__zoomInButton {\n    background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+\")\n      no-repeat center;\n  }\n\n  .ril__zoomOutButton {\n    background: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=\")\n      no-repeat center;\n  }\n\n  .ril__outerAnimating {\n    animation-name: closeWindow;\n  }\n\n  @keyframes pointFade {\n    0%,\n    19.999%,\n    100% {\n      opacity: 0;\n    }\n    20% {\n      opacity: 1;\n    }\n  }\n\n  .ril__loadingCircle {\n    width: 60px;\n    height: 60px;\n    position: relative;\n  }\n\n  .ril__loadingCirclePoint {\n    width: 100%;\n    height: 100%;\n    position: absolute;\n    left: 0;\n    top: 0;\n  }\n  .ril__loadingCirclePoint::before {\n    content: \"\";\n    display: block;\n    margin: 0 auto;\n    width: 11%;\n    height: 30%;\n    background-color: #fff;\n    border-radius: 30%;\n    animation: pointFade 800ms infinite ease-in-out both;\n  }\n  .ril__loadingCirclePoint:nth-of-type(1) {\n    transform: rotate(0deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(7) {\n    transform: rotate(180deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(1)::before,\n  .ril__loadingCirclePoint:nth-of-type(7)::before {\n    animation-delay: -800ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(2) {\n    transform: rotate(30deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(8) {\n    transform: rotate(210deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(2)::before,\n  .ril__loadingCirclePoint:nth-of-type(8)::before {\n    animation-delay: -666ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(3) {\n    transform: rotate(60deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(9) {\n    transform: rotate(240deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(3)::before,\n  .ril__loadingCirclePoint:nth-of-type(9)::before {\n    animation-delay: -533ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(4) {\n    transform: rotate(90deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(10) {\n    transform: rotate(270deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(4)::before,\n  .ril__loadingCirclePoint:nth-of-type(10)::before {\n    animation-delay: -400ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(5) {\n    transform: rotate(120deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(11) {\n    transform: rotate(300deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(5)::before,\n  .ril__loadingCirclePoint:nth-of-type(11)::before {\n    animation-delay: -266ms;\n  }\n  .ril__loadingCirclePoint:nth-of-type(6) {\n    transform: rotate(150deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(12) {\n    transform: rotate(330deg);\n  }\n\n  .ril__loadingCirclePoint:nth-of-type(6)::before,\n  .ril__loadingCirclePoint:nth-of-type(12)::before {\n    animation-delay: -133ms;\n  }\n\n  .ril__loadingCirclePoint:nth-of-type(13) {\n    transform: rotate(360deg);\n  }\n  .ril__loadingCirclePoint:nth-of-type(7)::before,\n  .ril__loadingCirclePoint:nth-of-type(13)::before {\n    animation-delay: 0ms;\n  }\n\n  .ril__loadingContainer {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n  }\n  .ril__imagePrev .ril__loadingContainer,\n  .ril__imageNext .ril__loadingContainer {\n    display: none;\n  }\n\n  .ril__errorContainer {\n    position: absolute;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    color: #fff;\n  }\n  .ril__imagePrev .ril__errorContainer,\n  .ril__imageNext .ril__errorContainer {\n    display: none;\n  }\n\n  .ril__loadingContainer__icon {\n    color: #fff;\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translateX(-50%) translateY(-50%);\n  }\n"])));
+var templateObject_1;

package.json

 {
   "name": "@escolalms/components",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "main": "lib/index.js",
@@ -5,0 +5,0 @@ "license": "MIT",

src/components/molecules/Navigation/Navigation.md

@@ -6,3 +6,24 @@ ```js
 import logoImage from "./logo-placeholder.png";
+import { useState } from "react";
+import { Text, Search } from "../../../";
 
+const [loading, setLoading] = useState(false);
+
+const onSearch = (value) => {
+  console.log(`Search: ${value}`);
+  setLoading(true);
+
+  setTimeout(() => {
+    setLoading(false);
+  }, 1500);
+};
+
+const onSubmit = (value) => {
+  console.log(`Submit ${value}`);
+};
+
+const onChange = (value) => {
+  console.log(`Change: ${value}`);
+};
+
 const menuItems = [
@@ -12,3 +33,5 @@ {
       <a href="#" target="_blank">
-        menu-1
+        <Text noMargin bold>
+          menu-1
+        </Text>
       </a>
@@ -21,3 +44,5 @@ ),
       <a href="#" target="_blank">
-        menu-2
+        <Text noMargin bold>
+          menu-2
+        </Text>
       </a>
@@ -38,3 +63,5 @@ ),
               <a href="#" target="_blank">
-                subsubmenu-2
+                <Text noMargin bold>
+                  submenu-1
+                </Text>
               </a>
@@ -51,3 +78,3 @@ ),
 <ThemeTester childrenListStyle={{ display: "block" }}>
-  <div style={{ width: 360, margin: "auto" }}>
+  <div style={{ width: 375, margin: "auto" }}>
     <Navigation
@@ -61,2 +88,15 @@ mobile
       menuItems={menuItems}
+      search={
+        <Search
+          onSubmit={(e) => onSubmit(e)}
+          onChange={(e) => onChange(e)}
+          onSearch={(e) => onSearch(e)}
+          placeholder="Select a course"
+          loading={loading}
+        >
+          <Text noMargin>football</Text>
+          <Text noMargin>voleyball</Text>
+          <Text noMargin>basketball</Text>
+        </Search>
+      }
     />
@@ -63,0 +103,0 @@ </div>

src/utils/utils.ts

@@ -0,1 +1,3 @@
+import { css } from "styled-components";
+
 export const calcPercentage = (current: number, max: number): string => {
@@ -92,1 +94,350 @@ if (max === 0) {
 };
+
+export const SharedLightboxStyle = css`
+  @keyframes closeWindow {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+
+  .ril__outer {
+    background-color: rgba(0, 0, 0, 0.85);
+    outline: none;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    width: 100%;
+    height: 100%;
+    -ms-content-zooming: none;
+    user-select: none;
+    /* stylelint-disable property-no-vendor-prefix */
+    -ms-user-select: none;
+    -ms-touch-select: none;
+    touch-action: none;
+  }
+
+  .ril__outerClosing {
+    opacity: 0;
+  }
+
+  .ril__inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  .ril__image,
+  .ril__imagePrev,
+  .ril__imageNext {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    margin: auto;
+    max-width: none;
+    -ms-content-zooming: none;
+    user-select: none;
+    -ms-user-select: none;
+    -ms-touch-select: none;
+    touch-action: none;
+  }
+
+  .ril__imageDiscourager {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: contain;
+  }
+
+  .ril__navButtons {
+    border: none;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    width: 20px;
+    height: 34px;
+    padding: 40px 30px;
+    margin: auto;
+    cursor: pointer;
+    opacity: 0.7;
+  }
+  .ril__navButtons:hover {
+    opacity: 1;
+  }
+  .ril__navButtons:active {
+    opacity: 0.7;
+  }
+
+  .ril__navButtonPrev {
+    left: 0;
+    background: rgba(0, 0, 0, 0.2)
+      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDE5LDMgLTIsLTIgLTE2LDE2IDE2LDE2IDEsLTEgLTE1LC0xNSAxNSwtMTUgeiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==")
+      no-repeat center;
+  }
+
+  .ril__navButtonNext {
+    right: 0;
+    background: rgba(0, 0, 0, 0.2)
+      url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjM0Ij48cGF0aCBkPSJtIDEsMyAyLC0yIDE2LDE2IC0xNiwxNiAtMSwtMSAxNSwtMTUgLTE1LC0xNSB6IiBmaWxsPSIjRkZGIi8+PC9zdmc+")
+      no-repeat center;
+  }
+
+  .ril__downloadBlocker {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7");
+    background-size: cover;
+  }
+
+  .ril__caption,
+  .ril__toolbar {
+    background-color: rgba(0, 0, 0, 0.5);
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .ril__caption {
+    bottom: 0;
+    max-height: 150px;
+    overflow: auto;
+  }
+
+  .ril__captionContent {
+    padding: 10px 20px;
+    color: #fff;
+  }
+
+  .ril__toolbar {
+    top: 0;
+    height: 50px;
+  }
+
+  .ril__toolbarSide {
+    height: 50px;
+    margin: 0;
+  }
+
+  .ril__toolbarLeftSide {
+    padding-left: 20px;
+    padding-right: 0;
+    flex: 0 1 auto;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .ril__toolbarRightSide {
+    padding-left: 0;
+    padding-right: 20px;
+    flex: 0 0 auto;
+  }
+
+  .ril__toolbarItem {
+    display: inline-block;
+    line-height: 50px;
+    padding: 0;
+    color: #fff;
+    font-size: 120%;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .ril__toolbarItemChild {
+    vertical-align: middle;
+  }
+
+  .ril__builtinButton {
+    width: 40px;
+    height: 35px;
+    cursor: pointer;
+    border: none;
+    opacity: 0.7;
+  }
+  .ril__builtinButton:hover {
+    opacity: 1;
+  }
+  .ril__builtinButton:active {
+    outline: none;
+  }
+
+  .ril__builtinButtonDisabled {
+    cursor: default;
+    opacity: 0.5;
+  }
+  .ril__builtinButtonDisabled:hover {
+    opacity: 0.5;
+  }
+
+  .ril__closeButton {
+    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZlcnNpb249IjEuMSIgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIj48cGF0aCBkPSJtIDEsMyAxLjI1LC0xLjI1IDcuNSw3LjUgNy41LC03LjUgMS4yNSwxLjI1IC03LjUsNy41IDcuNSw3LjUgLTEuMjUsMS4yNSAtNy41LC03LjUgLTcuNSw3LjUgLTEuMjUsLTEuMjUgNy41LC03LjUgLTcuNSwtNy41IHoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=")
+      no-repeat center;
+  }
+
+  .ril__zoomInButton {
+    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PHBhdGggZD0iTTEyIDV2NiIvPjwvZz48Y2lyY2xlIGN4PSIxMiIgY3k9IjgiIHI9IjciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLXdpZHRoPSIyIi8+PC9zdmc+")
+      no-repeat center;
+  }
+
+  .ril__zoomOutButton {
+    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCI+PGcgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCI+PHBhdGggZD0iTTEgMTlsNi02Ii8+PHBhdGggZD0iTTkgOGg2Ii8+PC9nPjxjaXJjbGUgY3g9IjEyIiBjeT0iOCIgcj0iNyIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjIiLz48L3N2Zz4=")
+      no-repeat center;
+  }
+
+  .ril__outerAnimating {
+    animation-name: closeWindow;
+  }
+
+  @keyframes pointFade {
+    0%,
+    19.999%,
+    100% {
+      opacity: 0;
+    }
+    20% {
+      opacity: 1;
+    }
+  }
+
+  .ril__loadingCircle {
+    width: 60px;
+    height: 60px;
+    position: relative;
+  }
+
+  .ril__loadingCirclePoint {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+  .ril__loadingCirclePoint::before {
+    content: "";
+    display: block;
+    margin: 0 auto;
+    width: 11%;
+    height: 30%;
+    background-color: #fff;
+    border-radius: 30%;
+    animation: pointFade 800ms infinite ease-in-out both;
+  }
+  .ril__loadingCirclePoint:nth-of-type(1) {
+    transform: rotate(0deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(7) {
+    transform: rotate(180deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(1)::before,
+  .ril__loadingCirclePoint:nth-of-type(7)::before {
+    animation-delay: -800ms;
+  }
+  .ril__loadingCirclePoint:nth-of-type(2) {
+    transform: rotate(30deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(8) {
+    transform: rotate(210deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(2)::before,
+  .ril__loadingCirclePoint:nth-of-type(8)::before {
+    animation-delay: -666ms;
+  }
+  .ril__loadingCirclePoint:nth-of-type(3) {
+    transform: rotate(60deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(9) {
+    transform: rotate(240deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(3)::before,
+  .ril__loadingCirclePoint:nth-of-type(9)::before {
+    animation-delay: -533ms;
+  }
+  .ril__loadingCirclePoint:nth-of-type(4) {
+    transform: rotate(90deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(10) {
+    transform: rotate(270deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(4)::before,
+  .ril__loadingCirclePoint:nth-of-type(10)::before {
+    animation-delay: -400ms;
+  }
+  .ril__loadingCirclePoint:nth-of-type(5) {
+    transform: rotate(120deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(11) {
+    transform: rotate(300deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(5)::before,
+  .ril__loadingCirclePoint:nth-of-type(11)::before {
+    animation-delay: -266ms;
+  }
+  .ril__loadingCirclePoint:nth-of-type(6) {
+    transform: rotate(150deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(12) {
+    transform: rotate(330deg);
+  }
+
+  .ril__loadingCirclePoint:nth-of-type(6)::before,
+  .ril__loadingCirclePoint:nth-of-type(12)::before {
+    animation-delay: -133ms;
+  }
+
+  .ril__loadingCirclePoint:nth-of-type(13) {
+    transform: rotate(360deg);
+  }
+  .ril__loadingCirclePoint:nth-of-type(7)::before,
+  .ril__loadingCirclePoint:nth-of-type(13)::before {
+    animation-delay: 0ms;
+  }
+
+  .ril__loadingContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+  }
+  .ril__imagePrev .ril__loadingContainer,
+  .ril__imageNext .ril__loadingContainer {
+    display: none;
+  }
+
+  .ril__errorContainer {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: #fff;
+  }
+  .ril__imagePrev .ril__errorContainer,
+  .ril__imageNext .ril__errorContainer {
+    display: none;
+  }
+
+  .ril__loadingContainer__icon {
+    color: #fff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translateX(-50%) translateY(-50%);
+  }
+`;

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

16925764

increased by0.04%

Lines of code

25320

increased by0.2%

No dependency changes