@escolalms/components - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

lib/components/atoms/Button/Button.js

@@ -155,3 +155,7 @@ "use strict";
             if (props.mode === "outline") {
-                return "\n              background: ".concat(props.theme.black, ";\n              color: ").concat(props.theme.white, ";\n            ");
+                return "\n              background: ".concat(props.theme.mode !== "dark"
+                    ? props.theme.black
+                    : props.theme.white, ";\n              color: ").concat(props.theme.mode !== "dark"
+                    ? props.theme.white
+                    : props.theme.black, ";\n            ");
             }
@@ -158,0 +162,0 @@ return "\n            background: ".concat((0, chroma_js_1.default)(props.theme.primaryColor).alpha(0.3).hex(), ";\n          ");

lib/components/atoms/Card/Card.js

@@ -24,3 +24,3 @@ "use strict";
 var styled_components_1 = __importDefault(require("styled-components"));
-var StyledCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  display: ", ";\n\n  position: relative;\n\n  padding-top: ", ";\n  .content {\n    position: relative;\n    padding: ", ";\n    z-index: 1;\n    border-radius: ", "px;\n    background: ", ";\n    &:before,\n    &:after {\n      background: ", ";\n      content: \"\";\n      position: absolute;\n      right: 0;\n      width: ", ";\n      opacity: 0.4;\n      border-radius: ", "px;\n      z-index: -1;\n    }\n    &:before {\n      ", "\n    }\n    &:after {\n      ", "\n    }\n  }\n"], ["\n  width: ", ";\n  display: ", ";\n\n  position: relative;\n\n  padding-top: ", ";\n  .content {\n    position: relative;\n    padding: ", ";\n    z-index: 1;\n    border-radius: ", "px;\n    background: ", ";\n    &:before,\n    &:after {\n      background: ", ";\n      content: \"\";\n      position: absolute;\n      right: 0;\n      width: ", ";\n      opacity: 0.4;\n      border-radius: ", "px;\n      z-index: -1;\n    }\n    &:before {\n      ", "\n    }\n    &:after {\n      ", "\n    }\n  }\n"])), function (props) { return (props.inline ? "auto" : "100%"); }, function (props) { return (props.inline ? "inline-block" : "block"); }, function (props) {
+var StyledCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  width: ", ";\n  display: ", ";\n\n  position: relative;\n\n  padding-top: ", ";\n  .content {\n    position: relative;\n    padding: ", ";\n    z-index: 1;\n    border-radius: ", "px;\n    background: ", ";\n    color: ", ";\n    &:before,\n    &:after {\n      background: ", ";\n      content: \"\";\n      position: absolute;\n      right: 0;\n      width: ", ";\n      opacity: 0.4;\n      border-radius: ", "px;\n      z-index: -1;\n    }\n    &:before {\n      ", "\n    }\n    &:after {\n      ", "\n    }\n  }\n"], ["\n  width: ", ";\n  display: ", ";\n\n  position: relative;\n\n  padding-top: ", ";\n  .content {\n    position: relative;\n    padding: ", ";\n    z-index: 1;\n    border-radius: ", "px;\n    background: ", ";\n    color: ", ";\n    &:before,\n    &:after {\n      background: ", ";\n      content: \"\";\n      position: absolute;\n      right: 0;\n      width: ", ";\n      opacity: 0.4;\n      border-radius: ", "px;\n      z-index: -1;\n    }\n    &:before {\n      ", "\n    }\n    &:after {\n      ", "\n    }\n  }\n"])), function (props) { return (props.inline ? "auto" : "100%"); }, function (props) { return (props.inline ? "inline-block" : "block"); }, function (props) {
     switch (props.wings) {
@@ -45,2 +45,4 @@ case "large":
 }, function (props) {
+    return props.theme.mode !== "dark" ? props.theme.gray1 : props.theme.white;
+}, function (props) {
     if (props.wings) {
@@ -47,0 +49,0 @@ return props.theme.mode !== "dark"

lib/components/atoms/Input/Input.js

@@ -54,3 +54,3 @@ "use strict";
 };
-var StyledDiv = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.lsm-input {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    * {\n      outline: none;\n    }\n    .error {\n      color: ", ";\n      padding-left: 12px;\n      font-size: 12px;\n      line-height: 15px;\n    }\n    .required {\n      color: ", ";\n    }\n\n    .input-and-fieldset {\n      box-sizing: border-box;\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      input {\n        font-family: ", ";\n        border: 0px;\n        font-size: 14px;\n        box-sizing: content-box;\n        display: block;\n        width: 100%;\n        padding: 11px 12px 13px;\n        caret-color: #e60037;\n        border-radius: ", "px;\n        background: ", ";\n        color: ", ";\n        &:disabled {\n          cursor: not-allowed;\n        }\n      }\n      fieldset {\n        position: absolute;\n        inset: -5px 0 0;\n        margin: 0px;\n        padding: 0px 8px;\n        border: ", ";\n        pointer-events: none;\n        overflow: hidden;\n        border-radius: ", "px;\n        legend {\n          overflow: hidden;\n          display: block;\n          width: auto;\n          height: 11px;\n          font-size: 0.75em;\n          visibility: hidden;\n          padding: 0;\n        }\n      }\n    }\n\n    .input-container {\n      display: inline-flex;\n      flex-direction: column;\n      position: relative;\n      width: 100%;\n\n      label {\n        pointer-events: none;\n        transform-origin: left top;\n        max-width: calc(100% - 24px);\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        transform: translate(12px, 12px) scale(1);\n        z-index: 1;\n        transition: 0.2s all;\n        color: ", ";\n      }\n\n      &.filled,\n      &:focus-within {\n        legend {\n          width: auto;\n          margin-left: -2px;\n          padding-right: 10px;\n        }\n        label {\n          transform: translate(12px, -7px) scale(0.75);\n          ", "\n        }\n        input {\n          background: ", ";\n        }\n        fieldset {\n          border-color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.lsm-input {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    * {\n      outline: none;\n    }\n    .error {\n      color: ", ";\n      padding-left: 12px;\n      font-size: 12px;\n      line-height: 15px;\n    }\n    .required {\n      color: ", ";\n    }\n\n    .input-and-fieldset {\n      box-sizing: border-box;\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      input {\n        font-family: ", ";\n        border: 0px;\n        font-size: 14px;\n        box-sizing: content-box;\n        display: block;\n        width: 100%;\n        padding: 11px 12px 13px;\n        caret-color: #e60037;\n        border-radius: ", "px;\n        background: ", ";\n        color: ", ";\n        &:disabled {\n          cursor: not-allowed;\n        }\n      }\n      fieldset {\n        position: absolute;\n        inset: -5px 0 0;\n        margin: 0px;\n        padding: 0px 8px;\n        border: ", ";\n        pointer-events: none;\n        overflow: hidden;\n        border-radius: ", "px;\n        legend {\n          overflow: hidden;\n          display: block;\n          width: auto;\n          height: 11px;\n          font-size: 0.75em;\n          visibility: hidden;\n          padding: 0;\n        }\n      }\n    }\n\n    .input-container {\n      display: inline-flex;\n      flex-direction: column;\n      position: relative;\n      width: 100%;\n\n      label {\n        pointer-events: none;\n        transform-origin: left top;\n        max-width: calc(100% - 24px);\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        transform: translate(12px, 12px) scale(1);\n        z-index: 1;\n        transition: 0.2s all;\n        color: ", ";\n      }\n\n      &.filled,\n      &:focus-within {\n        legend {\n          width: auto;\n          margin-left: -2px;\n          padding-right: 10px;\n        }\n        label {\n          transform: translate(12px, -7px) scale(0.75);\n          ", "\n        }\n        input {\n          background: ", ";\n        }\n        fieldset {\n          border-color: ", ";\n        }\n      }\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return props.theme.errorColor; }, function (props) { return props.theme.errorColor; }, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return props.theme.inputRadius; }, function (props) {
+var StyledDiv = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.lsm-input {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    * {\n      outline: none;\n    }\n    .error {\n      color: ", ";\n      padding-left: 12px;\n      font-size: 12px;\n      line-height: 15px;\n    }\n    .required {\n      color: ", ";\n    }\n\n    .input-and-fieldset {\n      box-sizing: border-box;\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      input {\n        font-family: ", ";\n        border: 0px;\n        font-size: 14px;\n        box-sizing: content-box;\n        display: block;\n        width: 100%;\n        padding: 11px 12px 13px;\n        caret-color: #e60037;\n        border-radius: ", "px;\n        background: ", ";\n        color: ", ";\n        &:disabled {\n          cursor: not-allowed;\n        }\n      }\n      .fieldset {\n        position: absolute;\n        inset: ", ";\n        margin: 0px;\n        padding: 0px 8px;\n        border: ", ";\n        pointer-events: none;\n        overflow: hidden;\n        border-radius: ", "px;\n        legend {\n          overflow: hidden;\n          display: block;\n          width: 0;\n          height: 11px;\n          font-size: 0.75em;\n          visibility: hidden;\n          padding: 0;\n        }\n      }\n    }\n\n    .input-container {\n      display: inline-flex;\n      flex-direction: column;\n      position: relative;\n      width: 100%;\n\n      label {\n        pointer-events: none;\n        transform-origin: left top;\n        max-width: calc(100% - 24px);\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        transform: translate(12px, 12px) scale(1);\n        z-index: 1;\n        transition: 0.2s all;\n        color: ", ";\n      }\n\n      &.filled,\n      &:focus-within {\n        legend {\n          width: auto;\n          margin-left: -2px;\n          padding-right: 10px;\n        }\n        label {\n          transform: translate(12px, -7px) scale(0.75);\n          ", "\n        }\n        input {\n          background: ", ";\n        }\n        .fieldset {\n          border-color: ", ";\n        }\n      }\n    }\n  }\n"], ["\n  &.lsm-input {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    * {\n      outline: none;\n    }\n    .error {\n      color: ", ";\n      padding-left: 12px;\n      font-size: 12px;\n      line-height: 15px;\n    }\n    .required {\n      color: ", ";\n    }\n\n    .input-and-fieldset {\n      box-sizing: border-box;\n      display: inline-flex;\n      align-items: center;\n      position: relative;\n      input {\n        font-family: ", ";\n        border: 0px;\n        font-size: 14px;\n        box-sizing: content-box;\n        display: block;\n        width: 100%;\n        padding: 11px 12px 13px;\n        caret-color: #e60037;\n        border-radius: ", "px;\n        background: ", ";\n        color: ", ";\n        &:disabled {\n          cursor: not-allowed;\n        }\n      }\n      .fieldset {\n        position: absolute;\n        inset: ", ";\n        margin: 0px;\n        padding: 0px 8px;\n        border: ", ";\n        pointer-events: none;\n        overflow: hidden;\n        border-radius: ", "px;\n        legend {\n          overflow: hidden;\n          display: block;\n          width: 0;\n          height: 11px;\n          font-size: 0.75em;\n          visibility: hidden;\n          padding: 0;\n        }\n      }\n    }\n\n    .input-container {\n      display: inline-flex;\n      flex-direction: column;\n      position: relative;\n      width: 100%;\n\n      label {\n        pointer-events: none;\n        transform-origin: left top;\n        max-width: calc(100% - 24px);\n        position: absolute;\n        left: 0px;\n        top: 0px;\n        transform: translate(12px, 12px) scale(1);\n        z-index: 1;\n        transition: 0.2s all;\n        color: ", ";\n      }\n\n      &.filled,\n      &:focus-within {\n        legend {\n          width: auto;\n          margin-left: -2px;\n          padding-right: 10px;\n        }\n        label {\n          transform: translate(12px, -7px) scale(0.75);\n          ", "\n        }\n        input {\n          background: ", ";\n        }\n        .fieldset {\n          border-color: ", ";\n        }\n      }\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return props.theme.errorColor; }, function (props) { return props.theme.errorColor; }, function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) { return props.theme.inputRadius; }, function (props) {
     var _a = props.theme, mode = _a.mode, gray1 = _a.gray1, gray5 = _a.gray5;
@@ -63,2 +63,5 @@ if (props.disabled) {
     return props.theme.mode !== "dark" ? props.theme.gray1 : props.theme.white;
+}, function (_a) {
+    var label = _a.label;
+    return "".concat(label ? "-5px " : "0 ", " 0 0");
 }, function (props) {
@@ -113,3 +116,3 @@ var _a = props.theme, mode = _a.mode, gray4 = _a.gray4, gray5 = _a.gray5;
     }, [generateRandomInputId, label, required]);
-    return ((0, jsx_runtime_1.jsxs)(StyledDiv, __assign({}, container, { error: props.error, disabled: props.disabled, required: required, className: "lsm-input ".concat(helper ? "has-helper" : "", " ").concat(error ? "has-error" : "", " ").concat((container === null || container === void 0 ? void 0 : container.className) ? container.className : ""), type: props.type }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "input-container ".concat(addFilledClass()) }, { children: [renderLabel(), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input-and-fieldset" }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, notInputProps, { id: label ? generateRandomInputId : undefined })), label && ((0, jsx_runtime_1.jsx)("fieldset", { children: (0, jsx_runtime_1.jsxs)("legend", { children: [label, required ? "*" : ""] }) }))] }))] })), helper && (0, jsx_runtime_1.jsx)("span", { children: helper }), error && (0, jsx_runtime_1.jsx)("div", __assign({ className: "error" }, { children: error }))] })));
+    return ((0, jsx_runtime_1.jsxs)(StyledDiv, __assign({}, container, { error: props.error, disabled: props.disabled, required: required, label: label, className: "lsm-input ".concat(helper ? "has-helper" : "", " ").concat(error ? "has-error" : "", " ").concat((container === null || container === void 0 ? void 0 : container.className) ? container.className : ""), type: props.type }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "input-container ".concat(addFilledClass()) }, { children: [renderLabel(), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input-and-fieldset" }, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, props, notInputProps, { id: label ? generateRandomInputId : undefined })), label ? ((0, jsx_runtime_1.jsx)("fieldset", __assign({ className: "fieldset" }, { children: (0, jsx_runtime_1.jsxs)("legend", { children: [label, required ? "*" : ""] }) }))) : ((0, jsx_runtime_1.jsx)("span", { className: "fieldset" }))] }))] })), helper && (0, jsx_runtime_1.jsx)("span", { children: helper }), error && (0, jsx_runtime_1.jsx)("div", __assign({ className: "error" }, { children: error }))] })));
 };
@@ -116,0 +119,0 @@ exports.Input = Input;

lib/components/atoms/Modal/Modal.js

@@ -51,3 +51,3 @@ "use strict";
 var CloseBtn = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "14", height: "14", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683417 14.0976 1.31658 13.7071 1.70711L8.41421 7L13.7071 12.2929C14.0976 12.6834 14.0976 13.3166 13.7071 13.7071C13.3166 14.0976 12.6834 14.0976 12.2929 13.7071L7 8.41421L1.70711 13.7071C1.31658 14.0976 0.683417 14.0976 0.292893 13.7071C-0.0976311 13.3166 -0.0976311 12.6834 0.292893 12.2929L5.58579 7L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683417 0.292893 0.292893Z", fill: "#4A4A4A" }) }))); };
-var GlobalStyle = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .rc-dialog {\n    position: relative;\n    \n    &-wrap {\n      position: fixed;\n      overflow: auto;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 1050;\n      -webkit-overflow-scrolling: touch;\n      outline: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &-title {\n      margin: 0;\n      font-size: 14px;\n      line-height: 21px;\n      font-weight: bold;\n    }\n\n    &-content {\n      position: relative;\n      background-color: ", ";\n      border: none;\n      border-radius: ", ";\n      background-clip: padding-box;\n      width: 100%;\n      max-width: 468px;\n      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);\n\n    }\n\n    &-close {\n      cursor: pointer;\n      border: 0;\n      background: transparent;\n      font-size: 21px;\n      position: absolute;\n      right: 20px;\n      top: 12px;\n      font-weight: 700;\n      line-height: 1;\n      color: ", ";\n      text-shadow: 0 1px 0 #fff;\n      opacity: ", ";\n      text-decoration: none;\n      \n      svg path {\n        fill: currentColor;\n      }\n\n      &-x:after {\n        content: \"\u00D7\";\n      }\n\n      &:hover {\n        opacity: 1;\n        text-decoration: none;\n      }\n    }\n\n    &-header {\n      padding: 13px 20px 14px 20px;\n      border-radius: 5px 5px 0 0;\n      background: #fff;\n      color: #666;\n      border-bottom: 1px solid #e9e9e9;\n    }\n\n    &-body {\n      padding: 36px 23px;\n    }\n\n    &-footer {\n      border-top: 1px solid #e9e9e9;\n      padding: 10px 20px;\n      text-align: right;\n      border-radius: 0 0 5px 5px;\n    }\n\n    &-zoom-enter,\n    &-zoom-appear {\n      opacity: 0;\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n      animation-play-state: paused;\n    }\n\n    &-zoom-leave {\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n      animation-play-state: paused;\n    }\n\n    &-zoom-enter&-zoom-enter-active,\n    &-zoom-appear&-zoom-appear-active {\n      animation-name: rcDialogZoomIn;\n      animation-play-state: running;\n    }\n\n    &-zoom-leave&-zoom-leave-active {\n      animation-name: rcDialogZoomOut;\n      animation-play-state: running;\n    }\n\n    @keyframes rcDialogZoomIn {\n      0% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n      100% {\n        opacity: 1;\n        transform: scale(1, 1);\n      }\n    }\n    @keyframes rcDialogZoomOut {\n      0% {\n        transform: scale(1, 1);\n      }\n      100% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n    }\n    &-mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    filter: blur(2px);\n    background-color: ", ";\n    height: 100%;\n    z-index: 1050;\n\n    &-hidden {\n      display: none;\n    }\n  }\n\n\n  &-fade-enter,&-fade-appear {\n    opacity: 0;\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);    animation-play-state: paused;\n  }\n\n  &-fade-leave {\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);    animation-play-state: paused;\n  }\n\n  &-fade-enter&-fade-enter-active,&-fade-appear&-fade-appear-active  {\n    animation-name: rcDialogFadeIn;\n    animation-play-state: running;\n  }\n\n  &-fade-leave&-fade-leave-active {\n    animation-name: rcDialogFadeOut;\n    animation-play-state: running;\n  }\n\n  @keyframes rcDialogFadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes rcDialogFadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n  \n  .modal-title {\n    margin-bottom: 30px;\n    text-align: center;\n    color: ", ";\n  }\n}\n"], ["\n  .rc-dialog {\n    position: relative;\n    \n    &-wrap {\n      position: fixed;\n      overflow: auto;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 1050;\n      -webkit-overflow-scrolling: touch;\n      outline: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &-title {\n      margin: 0;\n      font-size: 14px;\n      line-height: 21px;\n      font-weight: bold;\n    }\n\n    &-content {\n      position: relative;\n      background-color: ", ";\n      border: none;\n      border-radius: ", ";\n      background-clip: padding-box;\n      width: 100%;\n      max-width: 468px;\n      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);\n\n    }\n\n    &-close {\n      cursor: pointer;\n      border: 0;\n      background: transparent;\n      font-size: 21px;\n      position: absolute;\n      right: 20px;\n      top: 12px;\n      font-weight: 700;\n      line-height: 1;\n      color: ", ";\n      text-shadow: 0 1px 0 #fff;\n      opacity: ", ";\n      text-decoration: none;\n      \n      svg path {\n        fill: currentColor;\n      }\n\n      &-x:after {\n        content: \"\u00D7\";\n      }\n\n      &:hover {\n        opacity: 1;\n        text-decoration: none;\n      }\n    }\n\n    &-header {\n      padding: 13px 20px 14px 20px;\n      border-radius: 5px 5px 0 0;\n      background: #fff;\n      color: #666;\n      border-bottom: 1px solid #e9e9e9;\n    }\n\n    &-body {\n      padding: 36px 23px;\n    }\n\n    &-footer {\n      border-top: 1px solid #e9e9e9;\n      padding: 10px 20px;\n      text-align: right;\n      border-radius: 0 0 5px 5px;\n    }\n\n    &-zoom-enter,\n    &-zoom-appear {\n      opacity: 0;\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n      animation-play-state: paused;\n    }\n\n    &-zoom-leave {\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n      animation-play-state: paused;\n    }\n\n    &-zoom-enter&-zoom-enter-active,\n    &-zoom-appear&-zoom-appear-active {\n      animation-name: rcDialogZoomIn;\n      animation-play-state: running;\n    }\n\n    &-zoom-leave&-zoom-leave-active {\n      animation-name: rcDialogZoomOut;\n      animation-play-state: running;\n    }\n\n    @keyframes rcDialogZoomIn {\n      0% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n      100% {\n        opacity: 1;\n        transform: scale(1, 1);\n      }\n    }\n    @keyframes rcDialogZoomOut {\n      0% {\n        transform: scale(1, 1);\n      }\n      100% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n    }\n    &-mask {\n    position: fixed;\n    top: 0;\n    right: 0;\n    left: 0;\n    bottom: 0;\n    filter: blur(2px);\n    background-color: ", ";\n    height: 100%;\n    z-index: 1050;\n\n    &-hidden {\n      display: none;\n    }\n  }\n\n\n  &-fade-enter,&-fade-appear {\n    opacity: 0;\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);    animation-play-state: paused;\n  }\n\n  &-fade-leave {\n    animation-duration: 0.3s;\n    animation-fill-mode: both;\n    animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);    animation-play-state: paused;\n  }\n\n  &-fade-enter&-fade-enter-active,&-fade-appear&-fade-appear-active  {\n    animation-name: rcDialogFadeIn;\n    animation-play-state: running;\n  }\n\n  &-fade-leave&-fade-leave-active {\n    animation-name: rcDialogFadeOut;\n    animation-play-state: running;\n  }\n\n  @keyframes rcDialogFadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @keyframes rcDialogFadeOut {\n    0% {\n      opacity: 1;\n    }\n    100% {\n      opacity: 0;\n    }\n  }\n  \n  .modal-title {\n    margin-bottom: 30px;\n    text-align: center;\n    color: ", ";\n  }\n}\n"])), function (_a) {
+var StyledGlobal = (0, styled_components_1.createGlobalStyle)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .rc-dialog {\n    position: relative;\n\n    &-wrap {\n      position: fixed;\n      overflow: auto;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 1050;\n      -webkit-overflow-scrolling: touch;\n      outline: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &-title {\n      margin: 0;\n      font-size: 14px;\n      line-height: 21px;\n      font-weight: bold;\n    }\n\n    &-content {\n      position: relative;\n      background-color: ", ";\n      border: none;\n      border-radius: ", ";\n      background-clip: padding-box;\n      width: 100%;\n      max-width: 468px;\n      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);\n    }\n\n    &-close {\n      cursor: pointer;\n      border: 0;\n      background: transparent;\n      font-size: 21px;\n      position: absolute;\n      right: 20px;\n      top: 12px;\n      font-weight: 700;\n      line-height: 1;\n      color: ", ";\n      text-shadow: 0 1px 0 #fff;\n      opacity: ", ";\n      text-decoration: none;\n\n      svg path {\n        fill: currentColor;\n      }\n\n      &-x:after {\n        content: \"\u00D7\";\n      }\n\n      &:hover {\n        opacity: 1;\n        text-decoration: none;\n      }\n    }\n\n    &-header {\n      padding: 13px 20px 14px 20px;\n      border-radius: 5px 5px 0 0;\n      background: #fff;\n      color: #666;\n      border-bottom: 1px solid #e9e9e9;\n    }\n\n    &-body {\n      padding: 36px 23px;\n    }\n\n    &-footer {\n      border-top: 1px solid #e9e9e9;\n      padding: 10px 20px;\n      text-align: right;\n      border-radius: 0 0 5px 5px;\n    }\n\n    &-zoom-enter,\n    &-zoom-appear {\n      opacity: 0;\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n      animation-play-state: paused;\n    }\n\n    &-zoom-leave {\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n      animation-play-state: paused;\n    }\n\n    &-zoom-enter&-zoom-enter-active,\n    &-zoom-appear&-zoom-appear-active {\n      animation-name: rcDialogZoomIn;\n      animation-play-state: running;\n    }\n\n    &-zoom-leave&-zoom-leave-active {\n      animation-name: rcDialogZoomOut;\n      animation-play-state: running;\n    }\n\n    @keyframes rcDialogZoomIn {\n      0% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n      100% {\n        opacity: 1;\n        transform: scale(1, 1);\n      }\n    }\n    @keyframes rcDialogZoomOut {\n      0% {\n        transform: scale(1, 1);\n      }\n      100% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n    }\n    &-mask {\n      position: fixed;\n      top: 0;\n      right: 0;\n      left: 0;\n      bottom: 0;\n      background-color: ", ";\n      height: 100%;\n      z-index: 1050;\n\n      &-hidden {\n        display: none;\n      }\n    }\n\n    &-fade-enter,\n    &-fade-appear {\n      opacity: 0;\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);\n      animation-play-state: paused;\n    }\n\n    &-fade-leave {\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);\n      animation-play-state: paused;\n    }\n\n    &-fade-enter&-fade-enter-active,\n    &-fade-appear&-fade-appear-active {\n      animation-name: rcDialogFadeIn;\n      animation-play-state: running;\n    }\n\n    &-fade-leave&-fade-leave-active {\n      animation-name: rcDialogFadeOut;\n      animation-play-state: running;\n    }\n\n    @keyframes rcDialogFadeIn {\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    }\n\n    @keyframes rcDialogFadeOut {\n      0% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n      }\n    }\n\n    .modal-title {\n      margin-bottom: 30px;\n      text-align: center;\n      color: ", ";\n    }\n  }\n"], ["\n  .rc-dialog {\n    position: relative;\n\n    &-wrap {\n      position: fixed;\n      overflow: auto;\n      top: 0;\n      right: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 1050;\n      -webkit-overflow-scrolling: touch;\n      outline: 0;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n    }\n\n    &-title {\n      margin: 0;\n      font-size: 14px;\n      line-height: 21px;\n      font-weight: bold;\n    }\n\n    &-content {\n      position: relative;\n      background-color: ", ";\n      border: none;\n      border-radius: ", ";\n      background-clip: padding-box;\n      width: 100%;\n      max-width: 468px;\n      box-shadow: 0px 0px 24px 0px rgba(0, 0, 0, 0.1);\n    }\n\n    &-close {\n      cursor: pointer;\n      border: 0;\n      background: transparent;\n      font-size: 21px;\n      position: absolute;\n      right: 20px;\n      top: 12px;\n      font-weight: 700;\n      line-height: 1;\n      color: ", ";\n      text-shadow: 0 1px 0 #fff;\n      opacity: ", ";\n      text-decoration: none;\n\n      svg path {\n        fill: currentColor;\n      }\n\n      &-x:after {\n        content: \"\u00D7\";\n      }\n\n      &:hover {\n        opacity: 1;\n        text-decoration: none;\n      }\n    }\n\n    &-header {\n      padding: 13px 20px 14px 20px;\n      border-radius: 5px 5px 0 0;\n      background: #fff;\n      color: #666;\n      border-bottom: 1px solid #e9e9e9;\n    }\n\n    &-body {\n      padding: 36px 23px;\n    }\n\n    &-footer {\n      border-top: 1px solid #e9e9e9;\n      padding: 10px 20px;\n      text-align: right;\n      border-radius: 0 0 5px 5px;\n    }\n\n    &-zoom-enter,\n    &-zoom-appear {\n      opacity: 0;\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.08, 0.82, 0.17, 1);\n      animation-play-state: paused;\n    }\n\n    &-zoom-leave {\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.6, 0.04, 0.98, 0.34);\n      animation-play-state: paused;\n    }\n\n    &-zoom-enter&-zoom-enter-active,\n    &-zoom-appear&-zoom-appear-active {\n      animation-name: rcDialogZoomIn;\n      animation-play-state: running;\n    }\n\n    &-zoom-leave&-zoom-leave-active {\n      animation-name: rcDialogZoomOut;\n      animation-play-state: running;\n    }\n\n    @keyframes rcDialogZoomIn {\n      0% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n      100% {\n        opacity: 1;\n        transform: scale(1, 1);\n      }\n    }\n    @keyframes rcDialogZoomOut {\n      0% {\n        transform: scale(1, 1);\n      }\n      100% {\n        opacity: 0;\n        transform: scale(0, 0);\n      }\n    }\n    &-mask {\n      position: fixed;\n      top: 0;\n      right: 0;\n      left: 0;\n      bottom: 0;\n      background-color: ", ";\n      height: 100%;\n      z-index: 1050;\n\n      &-hidden {\n        display: none;\n      }\n    }\n\n    &-fade-enter,\n    &-fade-appear {\n      opacity: 0;\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);\n      animation-play-state: paused;\n    }\n\n    &-fade-leave {\n      animation-duration: 0.3s;\n      animation-fill-mode: both;\n      animation-timing-function: cubic-bezier(0.55, 0, 0.55, 0.2);\n      animation-play-state: paused;\n    }\n\n    &-fade-enter&-fade-enter-active,\n    &-fade-appear&-fade-appear-active {\n      animation-name: rcDialogFadeIn;\n      animation-play-state: running;\n    }\n\n    &-fade-leave&-fade-leave-active {\n      animation-name: rcDialogFadeOut;\n      animation-play-state: running;\n    }\n\n    @keyframes rcDialogFadeIn {\n      0% {\n        opacity: 0;\n      }\n      100% {\n        opacity: 1;\n      }\n    }\n\n    @keyframes rcDialogFadeOut {\n      0% {\n        opacity: 1;\n      }\n      100% {\n        opacity: 0;\n      }\n    }\n\n    .modal-title {\n      margin-bottom: 30px;\n      text-align: center;\n      color: ", ";\n    }\n  }\n"])), function (_a) {
     var theme = _a.theme;
@@ -75,3 +75,4 @@ return theme.mode === "light" ? theme.white : theme.black;
     var children = props.children;
-    return ((0, jsx_runtime_1.jsxs)(React.Fragment, { children: [(0, jsx_runtime_1.jsx)(GlobalStyle, {}), (0, jsx_runtime_1.jsx)(rc_dialog_1.default, __assign({}, props, { closeIcon: (0, jsx_runtime_1.jsx)(CloseBtn, {}) }, { children: children }))] }));
+    var wrapper = React.useRef(null);
+    return ((0, jsx_runtime_1.jsx)(React.Fragment, { children: (0, jsx_runtime_1.jsx)("div", __assign({ ref: wrapper }, { children: (0, jsx_runtime_1.jsxs)(rc_dialog_1.default, __assign({}, props, { closeIcon: (0, jsx_runtime_1.jsx)(CloseBtn, {}) }, { children: [(0, jsx_runtime_1.jsx)(StyledGlobal, {}), children] })) })) }));
 };
@@ -78,0 +79,0 @@ exports.Modal = Modal;

lib/components/atoms/Note/Note.js

@@ -25,3 +25,3 @@ "use strict";
 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  justify-content: space-between;\n  margin-bottom: 10px;\n  border-radius: ", "px;\n  background: ", ";\n  .description {\n    margin: 0;\n    font-size: 14px;\n  }\n  .time {\n    margin: 0 0 0 20px;\n    font-size: 14px;\n  }\n"], ["\n  border-left: 3px solid ", ";\n  padding: 20px;\n  display: flex;\n  position: relative;\n  width: 100%;\n  justify-content: space-between;\n  margin-bottom: 10px;\n  border-radius: ", "px;\n  background: ", ";\n  .description {\n    margin: 0;\n    font-size: 14px;\n  }\n  .time {\n    margin: 0 0 0 20px;\n    font-size: 14px;\n  }\n"])), function (props) { return (props.color ? props.color : "#F2C94C"); }, function (props) { return props.theme.noteRadius; }, function (props) {
+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  margin-bottom: 10px;\n  border-radius: ", "px;\n  background: ", ";\n  .description {\n    margin: 0;\n    font-size: 14px;\n  }\n  .time {\n    margin: 0 0 0 20px;\n    font-size: 14px;\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  margin-bottom: 10px;\n  border-radius: ", "px;\n  background: ", ";\n  .description {\n    margin: 0;\n    font-size: 14px;\n  }\n  .time {\n    margin: 0 0 0 20px;\n    font-size: 14px;\n  }\n"])), function (props) { return (props.color ? props.color : "#F2C94C"); }, function (props) { return props.theme.noteRadius; }, function (props) {
     return props.theme.mode !== "dark" ? props.theme.gray5 : props.theme.gray1;
@@ -28,0 +28,0 @@ });

lib/components/atoms/ProgressBar/ProgressBar.d.ts

@@ -9,9 +9,1 @@ import * as React from "react";
 export declare const ProgressBar: React.FC<ProgressBarProps>;
-declare const _default: React.ForwardRefExoticComponent<{
-    [x: string]: any;
-    [x: number]: any;
-    [x: symbol]: any;
-} & {
-    theme?: import("styled-components").DefaultTheme | undefined;
-}>;
-export default _default;

lib/components/atoms/ProgressBar/ProgressBar.js

@@ -17,24 +17,4 @@ "use strict";
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -45,3 +25,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
-var styled_components_1 = __importStar(require("styled-components"));
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
 var provider_1 = require("../../../theme/provider");
@@ -61,3 +42,4 @@ var utils_1 = require("../../../utils/utils");
 var ProgressBar = function (props) {
-    var currentProgress = props.currentProgress, maxProgress = props.maxProgress, hideLabel = props.hideLabel, _a = props.label, label = _a === void 0 ? "Progress" : _a;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var currentProgress = props.currentProgress, maxProgress = props.maxProgress, hideLabel = props.hideLabel, _a = props.label, label = _a === void 0 ? t("ProgressBar.defaultLabel") : _a;
     var renderLabel = (0, react_1.useCallback)(function () {
@@ -73,5 +55,2 @@ if (hideLabel) {
 exports.ProgressBar = ProgressBar;
-// https://styled-components.com/docs/api#using-custom-props
-var NewProgressBar = (0, styled_components_1.default)(exports.ProgressBar)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
-exports.default = (0, styled_components_1.withTheme)(NewProgressBar);
-var templateObject_1, templateObject_2;
+var templateObject_1;

lib/components/atoms/Rating/Rating.d.ts

 import * as React from "react";
-export interface RatingProps {
+interface StyledRating {
+    size?: React.CSSProperties["fontSize"];
+}
+export interface RatingProps extends StyledRating {
     ratingValue: number;
     count?: number;
-    readonly?: boolean;
     label?: React.ReactNode;
+    onRateClick?: (rate: number) => void;
+    onIconEnter?: (rate: number) => void;
+    onIconLeave?: (rate: number) => void;
 }
+declare const StyledRating: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, RatingProps, never>;
 export declare const Rating: React.FC<RatingProps>;
+export {};

lib/components/atoms/Rating/Rating.js

@@ -25,5 +25,11 @@ "use strict";
 var provider_1 = require("../../../theme/provider");
-var RatingIconEmpty = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "15", height: "15", viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.00002 0.270996C8.2841 0.270996 8.5438 0.431498 8.67084 0.685586L10.605 4.55394L14.858 5.17256C15.1405 5.21364 15.3751 5.41151 15.4633 5.68299C15.5515 5.95447 15.478 6.25248 15.2736 6.45175L12.1783 9.46971L12.8746 13.7249C12.9206 14.0061 12.8032 14.2891 12.5717 14.4553C12.3403 14.6214 12.0346 14.6421 11.7829 14.5085L8.00002 12.5013L4.21718 14.5085C3.96546 14.6421 3.65979 14.6214 3.4283 14.4553C3.1968 14.2891 3.07947 14.0061 3.12549 13.7249L3.82179 9.46971L0.726447 6.45175C0.522068 6.25248 0.448522 5.95447 0.536727 5.68299C0.624932 5.41151 0.859594 5.21364 1.14207 5.17256L5.39502 4.55394L7.3292 0.685586C7.45625 0.431498 7.71594 0.270996 8.00002 0.270996ZM8.00002 2.69805L6.56147 5.57516C6.45171 5.79468 6.24148 5.94661 5.9986 5.98194L2.86131 6.43827L5.1486 8.66837C5.32386 8.83925 5.40471 9.08492 5.36518 9.32649L4.85003 12.4746L7.64849 10.9897C7.86833 10.8731 8.13172 10.8731 8.35156 10.9897L11.15 12.4746L10.6349 9.32649C10.5953 9.08492 10.6762 8.83925 10.8514 8.66837L13.1387 6.43827L10.0014 5.98194C9.75856 5.94661 9.54834 5.79468 9.43858 5.57516L8.00002 2.69805Z", fill: "currentColor" }) }))); };
-var RatingIconFull = function () { return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: "filled-star-icon" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.00002 0.0209961C8.2841 0.0209961 8.5438 0.181498 8.67084 0.435586L10.605 4.30394L14.858 4.92256C15.1405 4.96364 15.3751 5.16151 15.4633 5.43299C15.5515 5.70447 15.478 6.00248 15.2736 6.20175L12.1783 9.21971L12.8746 13.4749C12.9206 13.7561 12.8032 14.0391 12.5717 14.2053C12.3403 14.3714 12.0346 14.3921 11.7829 14.2585L8.00002 12.2513L4.21718 14.2585C3.96546 14.3921 3.65979 14.3714 3.4283 14.2053C3.1968 14.0391 3.07947 13.7561 3.12549 13.4749L3.82179 9.21971L0.726447 6.20175C0.522068 6.00248 0.448522 5.70447 0.536727 5.43299C0.624932 5.16151 0.859594 4.96364 1.14207 4.92256L5.39502 4.30394L7.3292 0.435586C7.45625 0.181498 7.71594 0.0209961 8.00002 0.0209961Z", fill: "currentColor" }) }))); };
-var StyledRating = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.lsm-rating {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    color: ", ";\n    display: inline-flex;\n    align-items: center;\n    height: 20px;\n    .filled-star-icon {\n      ", "\n    }\n    svg {\n      padding-right: 2px;\n    }\n    .label {\n      margin-left: 5px;\n      font-size: 16px;\n      font-weight: 700;\n    }\n  }\n"], ["\n  &.lsm-rating {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    color: ", ";\n    display: inline-flex;\n    align-items: center;\n    height: 20px;\n    .filled-star-icon {\n      ", "\n    }\n    svg {\n      padding-right: 2px;\n    }\n    .label {\n      margin-left: 5px;\n      font-size: 16px;\n      font-weight: 700;\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
+var RatingIconEmpty = function (props) {
+    var onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, rate = props.rate;
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 15 15", xmlns: "http://www.w3.org/2000/svg", onClick: function () { return (onClick ? onClick(rate) : undefined); }, onMouseEnter: function () { return (onMouseEnter ? onMouseEnter(rate) : undefined); }, onMouseLeave: function () { return (onMouseLeave ? onMouseLeave(rate) : undefined); } }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.00002 0.270996C8.2841 0.270996 8.5438 0.431498 8.67084 0.685586L10.605 4.55394L14.858 5.17256C15.1405 5.21364 15.3751 5.41151 15.4633 5.68299C15.5515 5.95447 15.478 6.25248 15.2736 6.45175L12.1783 9.46971L12.8746 13.7249C12.9206 14.0061 12.8032 14.2891 12.5717 14.4553C12.3403 14.6214 12.0346 14.6421 11.7829 14.5085L8.00002 12.5013L4.21718 14.5085C3.96546 14.6421 3.65979 14.6214 3.4283 14.4553C3.1968 14.2891 3.07947 14.0061 3.12549 13.7249L3.82179 9.46971L0.726447 6.45175C0.522068 6.25248 0.448522 5.95447 0.536727 5.68299C0.624932 5.41151 0.859594 5.21364 1.14207 5.17256L5.39502 4.55394L7.3292 0.685586C7.45625 0.431498 7.71594 0.270996 8.00002 0.270996ZM8.00002 2.69805L6.56147 5.57516C6.45171 5.79468 6.24148 5.94661 5.9986 5.98194L2.86131 6.43827L5.1486 8.66837C5.32386 8.83925 5.40471 9.08492 5.36518 9.32649L4.85003 12.4746L7.64849 10.9897C7.86833 10.8731 8.13172 10.8731 8.35156 10.9897L11.15 12.4746L10.6349 9.32649C10.5953 9.08492 10.6762 8.83925 10.8514 8.66837L13.1387 6.43827L10.0014 5.98194C9.75856 5.94661 9.54834 5.79468 9.43858 5.57516L8.00002 2.69805Z", fill: "currentColor" }) })));
+};
+var RatingIconFull = function (props) {
+    var onClick = props.onClick, onMouseEnter = props.onMouseEnter, onMouseLeave = props.onMouseLeave, rate = props.rate;
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "1em", height: "1em", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", onClick: function () { return (onClick ? onClick(rate) : undefined); }, onMouseEnter: function () { return (onMouseEnter ? onMouseEnter(rate) : undefined); }, onMouseLeave: function () { return (onMouseLeave ? onMouseLeave(rate) : undefined); }, className: "filled-star-icon" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M8.00002 0.0209961C8.2841 0.0209961 8.5438 0.181498 8.67084 0.435586L10.605 4.30394L14.858 4.92256C15.1405 4.96364 15.3751 5.16151 15.4633 5.43299C15.5515 5.70447 15.478 6.00248 15.2736 6.20175L12.1783 9.21971L12.8746 13.4749C12.9206 13.7561 12.8032 14.0391 12.5717 14.2053C12.3403 14.3714 12.0346 14.3921 11.7829 14.2585L8.00002 12.2513L4.21718 14.2585C3.96546 14.3921 3.65979 14.3714 3.4283 14.2053C3.1968 14.0391 3.07947 13.7561 3.12549 13.4749L3.82179 9.21971L0.726447 6.20175C0.522068 6.00248 0.448522 5.70447 0.536727 5.43299C0.624932 5.16151 0.859594 4.96364 1.14207 4.92256L5.39502 4.30394L7.3292 0.435586C7.45625 0.181498 7.71594 0.0209961 8.00002 0.0209961Z", fill: "currentColor" }) })));
+};
+var StyledRating = styled_components_1.default.span(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  &.lsm-rating {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    color: ", ";\n    display: inline-flex;\n    align-items: center;\n    .filled-star-icon {\n      ", "\n    }\n    svg {\n      font-size: ", ";\n      padding-right: 2px;\n    }\n    .label {\n      min-width: 48px;\n      margin-left: 5px;\n      font-size: 16px;\n      font-weight: 700;\n    }\n  }\n"], ["\n  &.lsm-rating {\n    -webkit-font-smoothing: antialiased;\n    -moz-osx-font-smoothing: grayscale;\n    font-family: ", ";\n    color: ", ";\n    display: inline-flex;\n    align-items: center;\n    .filled-star-icon {\n      ", "\n    }\n    svg {\n      font-size: ", ";\n      padding-right: 2px;\n    }\n    .label {\n      min-width: 48px;\n      margin-left: 5px;\n      font-size: 16px;\n      font-weight: 700;\n    }\n  }\n"])), function (props) { return (0, provider_1.getFontFromTheme)(props.theme).fontFamily; }, function (props) {
     if (props.theme.mode === "dark") {
@@ -37,8 +43,8 @@ return props.theme.white;
     }
-});
+}, function (props) { return (props.size ? props.size : "15px"); });
 var Rating = function (props) {
-    var _a = props.count, count = _a === void 0 ? 5 : _a, ratingValue = props.ratingValue, label = props.label;
+    var _a = props.count, count = _a === void 0 ? 5 : _a, ratingValue = props.ratingValue, label = props.label, onRateClick = props.onRateClick, onIconEnter = props.onIconEnter, onIconLeave = props.onIconLeave;
     var startToRender = Array.from(Array(count).keys());
     return ((0, jsx_runtime_1.jsx)(StyledRating, __assign({}, props, { className: "lsm-rating" }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [startToRender.map(function (index) {
-                    return index + 1 <= Math.round(ratingValue) ? ((0, jsx_runtime_1.jsx)(RatingIconFull, {}, index)) : ((0, jsx_runtime_1.jsx)(RatingIconEmpty, {}, index));
+                    return index + 1 <= Math.round(ratingValue) ? ((0, jsx_runtime_1.jsx)(RatingIconFull, { rate: index + 1, onClick: onRateClick ? function (rate) { return onRateClick(rate); } : undefined, onMouseEnter: onIconEnter ? function (rate) { return onIconEnter(rate); } : undefined, onMouseLeave: onIconLeave ? function (rate) { return onIconLeave(rate); } : undefined }, index)) : ((0, jsx_runtime_1.jsx)(RatingIconEmpty, { rate: index + 1, onClick: onRateClick ? function (rate) { return onRateClick(rate); } : undefined, onMouseEnter: onIconEnter ? function (rate) { return onIconEnter(rate); } : undefined, onMouseLeave: onIconLeave ? function (rate) { return onIconLeave(rate); } : undefined }, index));
                 }), label && (0, jsx_runtime_1.jsx)("span", __assign({ className: "label" }, { children: label }))] }) })));
@@ -45,0 +51,0 @@ };

lib/components/atoms/RatioBox/RatioBox.d.ts

@@ -7,2 +7,1 @@ import * as React from "react";
 export declare const RatioBox: React.FC<RatioBoxProps>;
-export default RatioBox;

lib/components/atoms/RatioBox/RatioBox.js

@@ -30,3 +30,2 @@ "use strict";
 exports.RatioBox = RatioBox;
-exports.default = exports.RatioBox;
 var templateObject_1;

lib/components/molecules/CartCard/CartCard.d.ts

@@ -1,2 +0,20 @@
-import ContrastBox from "../../../styleguide/ContrastBox/ContrastBox";
-export default ContrastBox;
+import * as React from "react";
+import { ReactNode } from "react";
+declare type DiscountStatus = "error" | "granted";
+interface Discount {
+    onDiscountClick: (discountValue: string) => void;
+    onDeleteDiscountClick: (id: number) => void;
+    status?: DiscountStatus;
+    isOpen?: boolean;
+}
+interface CartCardProps {
+    id: number;
+    title: string;
+    subtitle?: ReactNode;
+    onBuyClick: (id: number) => void;
+    description?: ReactNode;
+    discount?: Discount;
+    loading?: boolean;
+}
+export declare const CartCard: React.FC<CartCardProps>;
+export {};

lib/components/molecules/CartCard/CartCard.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;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,3 +21,45 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../styleguide/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.CartCard = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var react_markdown_1 = __importDefault(require("react-markdown"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var Button_1 = require("../../atoms/Button/Button");
+var Input_1 = require("../../atoms/Input/Input");
+var Text_1 = require("../../atoms/Typography/Text");
+var ArrowOpenIcon = function () {
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ className: "arrows", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("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" }) })));
+};
+var ArrowClosedIcon = function () {
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ className: "arrows", width: "14", height: "8", viewBox: "0 0 14 8", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M0.292893 0.292893C0.683417 -0.0976311 1.31658 -0.0976311 1.70711 0.292893L7 5.58579L12.2929 0.292893C12.6834 -0.0976311 13.3166 -0.0976311 13.7071 0.292893C14.0976 0.683418 14.0976 1.31658 13.7071 1.70711L7.70711 7.70711C7.31658 8.09763 6.68342 8.09763 6.29289 7.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z", fill: "currentColor" }) })));
+};
+var IconBin = function () {
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M5 2C5 0.89543 5.89543 0 7 0H13C14.1046 0 15 0.895431 15 2V4H16.9897C16.9959 3.99994 17.0021 3.99994 17.0083 4H19C19.5523 4 20 4.44772 20 5C20 5.55228 19.5523 6 19 6H17.9311L17.0638 18.1425C16.989 19.1891 16.1182 20 15.0689 20H4.93112C3.88184 20 3.01096 19.1891 2.9362 18.1425L2.06888 6H1C0.447715 6 0 5.55228 0 5C0 4.44772 0.447715 4 1 4H2.99174C2.99795 3.99994 3.00414 3.99994 3.01032 4H5V2ZM7 4H13V2H7V4ZM4.07398 6L4.93112 18H15.0689L15.926 6H4.07398ZM8 8C8.55228 8 9 8.44772 9 9V15C9 15.5523 8.55228 16 8 16C7.44772 16 7 15.5523 7 15V9C7 8.44772 7.44772 8 8 8ZM12 8C12.5523 8 13 8.44772 13 9V15C13 15.5523 12.5523 16 12 16C11.4477 16 11 15.5523 11 15V9C11 8.44772 11.4477 8 12 8Z", fill: "currentColor" }) })));
+};
+var StyledCardCard = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .title {\n    font-size: 30px;\n    margin-bottom: 20px;\n    font-weight: 700;\n  }\n  border-radius: ", "px;\n  background: ", ";\n  padding: 40px;\n  .buy-button {\n    margin-bottom: 23px;\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: inline-block;\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  .title {\n    font-size: 30px;\n    margin-bottom: 20px;\n    font-weight: 700;\n  }\n  border-radius: ", "px;\n  background: ", ";\n  padding: 40px;\n  .buy-button {\n    margin-bottom: 23px;\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: inline-block;\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"])), function (props) { return props.theme.cardRadius; }, function (props) {
+    return props.theme.mode !== "dark" ? props.theme.white : props.theme.gray1;
+}, function (props) {
+    return props.theme.mode !== "dark" ? props.theme.gray1 : props.theme.white;
+});
+var CartCard = function (props) {
+    var id = props.id, title = props.title, subtitle = props.subtitle, onBuyClick = props.onBuyClick, description = props.description, discount = props.discount, loading = props.loading;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var initialDiscountOpen = (0, react_1.useMemo)(function () {
+        if (discount) {
+            return discount.isOpen ? discount.isOpen : false;
+        }
+        return false;
+    }, [discount]);
+    var _a = (0, react_1.useState)(initialDiscountOpen), isDiscountOpen = _a[0], setIsDiscountOpen = _a[1];
+    var _b = (0, react_1.useState)(""), discountInput = _b[0], setDiscountInput = _b[1];
+    var removeDiscountClick = function () {
+        if (discount) {
+            setDiscountInput("");
+            discount.onDeleteDiscountClick(id);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledCardCard, { children: [(0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "title" }, { children: title })), subtitle, (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") })), 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)(react_markdown_1.default, __assign({ components: { p: "span" } }, { 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, 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: [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") })))] })))] }))] }));
+};
+exports.CartCard = CartCard;
+var templateObject_1;

lib/components/molecules/Certificate/Certificate.js

@@ -40,5 +40,2 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -53,3 +50,3 @@ exports.Certificate = void 0;
 var react_grid_system_1 = require("react-grid-system");
-var RatioBox_1 = __importDefault(require("../../atoms/RatioBox/RatioBox"));
+var RatioBox_1 = require("../../atoms/RatioBox/RatioBox");
 var StyledCertificate = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .certificate-badge {\n    width: 116px;\n    flex-shrink: 0;\n  }\n\n  .certificate-left-col {\n    margin-left: 20px;\n  }\n\n  .certificate-right-col {\n    ", "\n  }\n\n  .certificate-right-col-inner {\n    ", "\n  }\n\n  .certificate-link {\n    display: flex;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-bottom: 24px;\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"], ["\n  .certificate-badge {\n    width: 116px;\n    flex-shrink: 0;\n  }\n\n  .certificate-left-col {\n    margin-left: 20px;\n  }\n\n  .certificate-right-col {\n    ", "\n  }\n\n  .certificate-right-col-inner {\n    ", "\n  }\n\n  .certificate-link {\n    display: flex;\n    align-items: center;\n\n    &:not(:last-child) {\n      margin-bottom: 24px;\n    }\n\n    svg path {\n      fill: ", ";\n    }\n  }\n"])), function (props) {
@@ -76,3 +73,3 @@ return props.mobile
                             alignItems: "center",
-                        } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "certificate-badge" }, { children: React.isValidElement(img) ? ((0, jsx_runtime_1.jsx)(React.Fragment, { children: img })) : ((0, jsx_runtime_1.jsx)(RatioBox_1.default, __assign({ ratio: 1 }, { children: (0, jsx_runtime_1.jsx)("img", { src: img.src, alt: img.alt }) }))) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "certificate-left-col" }, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ as: "h4", level: 4, style: {
+                        } }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "certificate-badge" }, { children: React.isValidElement(img) ? ((0, jsx_runtime_1.jsx)(React.Fragment, { children: img })) : ((0, jsx_runtime_1.jsx)(RatioBox_1.RatioBox, __assign({ ratio: 1 }, { children: (0, jsx_runtime_1.jsx)("img", { src: img.src, alt: img.alt }) }))) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "certificate-left-col" }, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ as: "h4", level: 4, style: {
                                             marginBottom: "5px",
@@ -79,0 +76,0 @@ } }, { children: title })), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ size: "14", noMargin: true }, { children: description }))] }))] })), (0, jsx_runtime_1.jsx)(react_grid_system_1.Col, __assign({ xs: 12, md: mobile ? 12 : 5, className: "certificate-right-col" }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [handleDownload && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "certificate-link" }, { children: [(0, jsx_runtime_1.jsx)(Icon1, {}), (0, jsx_runtime_1.jsx)(Link_1.Link, __assign({ style: { marginLeft: "14px" }, onClick: handleDownload }, { children: "Pobierz lub wydrukuj jako plik PDF" }))] }))), handleShare && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "certificate-link" }, { children: [(0, jsx_runtime_1.jsx)(Icon2, {}), (0, jsx_runtime_1.jsx)(Link_1.Link, __assign({ style: { marginLeft: "14px" }, onClick: handleShare }, { children: "Udost\u0119pnij jako zdj\u0119cie online" }))] })))] }) }))] })] })));

lib/components/molecules/CheckoutCard/CheckoutCard.js

@@ -40,5 +40,2 @@ "use strict";
 };
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
@@ -52,3 +49,3 @@ exports.CheckoutCard = void 0;
 var IconText_1 = require("../../atoms/IconText/IconText");
-var RatioBox_1 = __importDefault(require("../../atoms/RatioBox/RatioBox"));
+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  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  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 (props) {
@@ -81,3 +78,3 @@ return props.theme.mode == "light" ? props.theme.gray5 : props.theme.gray1;
     var thumbnail = function () {
-        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkout-card-img" }, { children: React.isValidElement(img) ? ((0, jsx_runtime_1.jsx)(React.Fragment, { children: img })) : ((0, jsx_runtime_1.jsx)(RatioBox_1.default, __assign({ ratio: 1 }, { children: (0, jsx_runtime_1.jsx)("img", { src: img.src, alt: img.alt }) }))) })));
+        return ((0, jsx_runtime_1.jsx)("div", __assign({ className: "checkout-card-img" }, { children: React.isValidElement(img) ? ((0, jsx_runtime_1.jsx)(React.Fragment, { children: img })) : ((0, jsx_runtime_1.jsx)(RatioBox_1.RatioBox, __assign({ ratio: 1 }, { children: (0, jsx_runtime_1.jsx)("img", { src: img.src, alt: img.alt }) }))) })));
     };
@@ -84,0 +81,0 @@ return ((0, jsx_runtime_1.jsx)(StyledCheckoutCard, __assign({ mobile: mobile }, { children: (0, jsx_runtime_1.jsxs)(react_grid_system_1.Row, __assign({ align: "center" }, { children: [!mobile && ((0, jsx_runtime_1.jsx)(react_grid_system_1.Col, __assign({ xs: 12, md: 2 }, { children: thumbnail() }))), (0, jsx_runtime_1.jsxs)(react_grid_system_1.Col, __assign({ xs: 12, md: mobile ? 12 : 10 }, { children: [(0, jsx_runtime_1.jsxs)(react_grid_system_1.Row, { children: [(0, jsx_runtime_1.jsxs)(react_grid_system_1.Col, __assign({ xs: 12, md: mobile ? 10 : 6 }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ style: { display: "flex", alignItems: "start" } }, { children: [mobile && thumbnail(), (0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ as: "h4", level: 4, style: { marginBottom: mobile ? "23px" : "10px" } }, { children: title }))] })), subtitle && ((0, jsx_runtime_1.jsx)(IconText_1.IconText, { icon: (0, jsx_runtime_1.jsx)(IconBook, {}), className: "checkout-card-subtitle", text: "5 lekcji", styles: {

lib/components/molecules/CourseCard/CourseCard.d.ts

@@ -1,2 +0,36 @@
-import ContrastBox from "../../../styleguide/ContrastBox/ContrastBox";
-export default ContrastBox;
+import * as React from "react";
+import { ReactNode } from "react";
+import { ProgressBarProps } from "../../atoms/ProgressBar/ProgressBar";
+interface Image {
+    path?: string;
+    url?: string;
+    alt?: string;
+}
+interface Tag {
+    id: number;
+    title: string;
+}
+interface Category {
+    id: number;
+    name: string;
+}
+interface Categories {
+    onCategoryClick: (id: number) => void;
+    categoryElements: Category[];
+}
+export interface CourseCardProps {
+    id: number;
+    image?: Image;
+    title: ReactNode;
+    categories: Categories;
+    tags?: Tag[];
+    lessonCount: number;
+    subtitle: ReactNode;
+    hideImage?: boolean;
+    onImageClick?: () => void;
+    onTagClick?: (tagId: number) => void;
+    onButtonClick?: (cardId: number) => void;
+    progress?: ProgressBarProps;
+}
+export declare const CourseCard: React.FC<CourseCardProps>;
+export {};

lib/components/molecules/CourseCard/CourseCard.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;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,3 +21,59 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../styleguide/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.CourseCard = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var chroma_js_1 = require("chroma-js");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Badge_1 = require("../../atoms/Badge/Badge");
+var Button_1 = require("../../atoms/Button/Button");
+var Card_1 = require("../../atoms/Card/Card");
+var ProgressBar_1 = require("../../atoms/ProgressBar/ProgressBar");
+var RatioBox_1 = require("../../atoms/RatioBox/RatioBox");
+var Text_1 = require("../../atoms/Typography/Text");
+var Title_1 = require("../../atoms/Typography/Title");
+var IconOpenBook = function () {
+    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: "18", height: "17", viewBox: "0 0 18 17", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M1.5 1.98621H6C6.79565 1.98621 7.55871 2.30228 8.12132 2.86489C8.68393 3.42749 9 4.19056 9 4.98621V15.4862C9 14.8895 8.76295 14.3172 8.34099 13.8952C7.91903 13.4733 7.34674 13.2362 6.75 13.2362H1.5V1.98621Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M16.5 1.98621H12C11.2044 1.98621 10.4413 2.30228 9.87868 2.86489C9.31607 3.42749 9 4.19056 9 4.98621V15.4862C9 14.8895 9.23705 14.3172 9.65901 13.8952C10.081 13.4733 10.6533 13.2362 11.25 13.2362H16.5V1.98621Z", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })] })));
+};
+var StyledCourseCard = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .image-section {\n    position: relative;\n  }\n  .information-in-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n  }\n  .badges {\n    padding: 16px 8px;\n    align-self: end;\n    display: flex;\n    gap: 10px;\n    z-index: 1;\n  }\n  .card {\n    padding: 13px 10px;\n    font-weight: 700;\n    font-size: 14px;\n  }\n  .image {\n    width: 100%;\n    height: auto;\n  }\n  .course-section {\n    margin-top: 28px;\n  }\n  .title {\n    margin-bottom: 15px;\n  }\n  .categories {\n    font-size: 14px;\n    line-height: 17px;\n    color: ", ";\n    margin-bottom: 15px;\n  }\n  .lesson-container {\n    display: flex;\n    align-items: center;\n    margin-bottom: 30px;\n  }\n  .lessons-count {\n    font-weight: 700;\n    margin: 0 0 0 10px;\n  }\n  .category {\n    cursor: pointer;\n  }\n  .tag {\n    cursor: pointer;\n  }\n"], ["\n  .image-section {\n    position: relative;\n  }\n  .information-in-image {\n    position: absolute;\n    top: 0;\n    left: 0;\n    height: 100%;\n    width: 100%;\n    display: flex;\n    justify-content: space-between;\n    flex-direction: column;\n  }\n  .badges {\n    padding: 16px 8px;\n    align-self: end;\n    display: flex;\n    gap: 10px;\n    z-index: 1;\n  }\n  .card {\n    padding: 13px 10px;\n    font-weight: 700;\n    font-size: 14px;\n  }\n  .image {\n    width: 100%;\n    height: auto;\n  }\n  .course-section {\n    margin-top: 28px;\n  }\n  .title {\n    margin-bottom: 15px;\n  }\n  .categories {\n    font-size: 14px;\n    line-height: 17px;\n    color: ", ";\n    margin-bottom: 15px;\n  }\n  .lesson-container {\n    display: flex;\n    align-items: center;\n    margin-bottom: 30px;\n  }\n  .lessons-count {\n    font-weight: 700;\n    margin: 0 0 0 10px;\n  }\n  .category {\n    cursor: pointer;\n  }\n  .tag {\n    cursor: pointer;\n  }\n"])), function (_a) {
+    var theme = _a.theme;
+    var backgroundColor = theme.mode === "dark"
+        ? theme.cardBackgroundColorDark
+        : theme.cardBackgroundColorLight;
+    return (0, chroma_js_1.contrast)("#fff", backgroundColor) >= 2.5 ? "#fff" : theme.gray3;
+});
+var CourseCard = function (props) {
+    var id = props.id, lessonCount = props.lessonCount, title = props.title, image = props.image, categories = props.categories, _a = props.tags, tags = _a === void 0 ? [] : _a, onImageClick = props.onImageClick, onTagClick = props.onTagClick, onButtonClick = props.onButtonClick, progress = props.progress, hideImage = props.hideImage;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var tagClick = (0, react_1.useCallback)(function (e, id) {
+        e.stopPropagation();
+        if (onTagClick) {
+            onTagClick(id);
+        }
+    }, []);
+    var imageSrc = (0, react_1.useMemo)(function () {
+        if (image) {
+            var path = image.path, url = image.url;
+            return path || url;
+        }
+    }, [image]);
+    var imageSectionProps = (0, react_1.useMemo)(function () {
+        if (onImageClick) {
+            return {
+                onClick: onImageClick,
+                onKeyUp: onImageClick,
+                role: "button",
+                tabIndex: 0,
+            };
+        }
+        return {};
+    }, [onImageClick]);
+    var renderCourseSection = function () {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ level: 4, className: "title" }, { children: title })), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "categories" }, { children: categories.categoryElements.map(function (category, index) {
+                        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", __assign({ className: "category", onClick: function () { return categories.onCategoryClick(category.id); }, onKeyDown: function () { return categories.onCategoryClick(category.id); }, role: "button", tabIndex: 0 }, { children: category.name }), category.id), categories.categoryElements.length !== index + 1 && ((0, jsx_runtime_1.jsx)("span", { children: " / " }))] }));
+                    }) })), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "lesson-container" }, { children: [(0, jsx_runtime_1.jsx)(IconOpenBook, {}), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "lessons-count" }, { children: t("CourseCard.lesson", { count: lessonCount }) }))] })), progress ? ((0, jsx_runtime_1.jsx)(ProgressBar_1.ProgressBar, __assign({}, progress))) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: onButtonClick && ((0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "secondary", onClick: function () { return onButtonClick(id); } }, { children: t("CourseCard.startNow") }))) }))] }));
+    };
+    return ((0, jsx_runtime_1.jsxs)(StyledCourseCard, { children: [!hideImage && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "image-section" }, imageSectionProps, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "information-in-image" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "badges" }, { children: tags.map(function (tag) { return ((0, jsx_runtime_1.jsx)(Badge_1.Badge, __assign({ className: "tag", onClick: function (e) { return tagClick(e, tag.id); } }, { children: tag.title }), tag.id)); }) })), props.subtitle && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "card" }, { children: (0, jsx_runtime_1.jsx)(Card_1.Card, __assign({ wings: "small" }, { children: props.subtitle })) })))] })), (0, jsx_runtime_1.jsx)(RatioBox_1.RatioBox, __assign({ ratio: 1 }, { children: (0, jsx_runtime_1.jsx)("img", { className: "image", src: imageSrc, alt: image ? image.alt : undefined }) }))] }))), hideImage ? ((0, jsx_runtime_1.jsx)(Card_1.Card, __assign({ wings: "large" }, { children: renderCourseSection() }))) : ((0, jsx_runtime_1.jsx)("div", __assign({ className: "course-section" }, { children: renderCourseSection() })))] }));
+};
+exports.CourseCard = CourseCard;
+var templateObject_1;

lib/components/molecules/Notes/Notes.d.ts

@@ -1,2 +0,14 @@
-import ContrastBox from "../../../styleguide/ContrastBox/ContrastBox";
-export default ContrastBox;
+import * as React from "react";
+import { ReactNode } from "react";
+import { NoteProps } from "../../atoms/Note/Note";
+interface NoteGroup {
+    title: ReactNode;
+    notes: NoteProps[];
+}
+export interface NotesProps {
+    noteGroups: NoteGroup[];
+    onAddNoteClick: (event?: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
+    mobile?: boolean;
+}
+export declare const Notes: React.FC<NotesProps>;
+export {};

lib/components/molecules/Notes/Notes.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;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,3 +21,24 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../styleguide/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.Notes = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var styled_components_1 = __importDefault(require("styled-components"));
+var Note_1 = require("../../atoms/Note/Note");
+var IconTitle_1 = require("../../atoms/IconTitle/IconTitle");
+var Text_1 = __importDefault(require("../../atoms/Typography/Text"));
+var Button_1 = require("../../atoms/Button/Button");
+var react_i18next_1 = require("react-i18next");
+var NoteIcon = function () {
+    return ((0, jsx_runtime_1.jsx)("svg", __assign({ width: "18", height: "20", viewBox: "0 0 18 20", xmlns: "http://www.w3.org/2000/svg" }, { children: (0, jsx_runtime_1.jsx)("path", { d: "M16.5013 0.833496H1.5013C1.28029 0.833496 1.06833 0.921293 0.912046 1.07757C0.755766 1.23385 0.667969 1.44582 0.667969 1.66683V18.3335C0.667969 18.5545 0.755766 18.7665 0.912046 18.9228C1.06833 19.079 1.28029 19.1668 1.5013 19.1668H13.168C13.2775 19.1664 13.3859 19.1446 13.4871 19.1027C13.5884 19.0608 13.6805 18.9993 13.758 18.9218L17.0913 15.5885C17.2382 15.4265 17.3242 15.2186 17.3346 15.0002V1.66683C17.3346 1.44582 17.2468 1.23385 17.0906 1.07757C16.9343 0.921293 16.7223 0.833496 16.5013 0.833496ZM12.3346 15.0002V17.5002H2.33464V2.50016H15.668V14.1668H13.168C12.947 14.1668 12.735 14.2546 12.5787 14.4109C12.4224 14.5672 12.3346 14.7791 12.3346 15.0002ZM13.168 8.3335C13.168 8.55451 13.0802 8.76647 12.9239 8.92275C12.7676 9.07903 12.5556 9.16683 12.3346 9.16683H5.66797C5.44696 9.16683 5.23499 9.07903 5.07871 8.92275C4.92243 8.76647 4.83464 8.55451 4.83464 8.3335C4.83464 8.11248 4.92243 7.90052 5.07871 7.74424C5.23499 7.58796 5.44696 7.50016 5.66797 7.50016H12.3346C12.5556 7.50016 12.7676 7.58796 12.9239 7.74424C13.0802 7.90052 13.168 8.11248 13.168 8.3335ZM9.83464 11.6668C9.83464 11.8878 9.74684 12.0998 9.59056 12.2561C9.43428 12.4124 9.22232 12.5002 9.0013 12.5002H5.66797C5.44696 12.5002 5.23499 12.4124 5.07871 12.2561C4.92243 12.0998 4.83464 11.8878 4.83464 11.6668C4.83464 11.4458 4.92243 11.2339 5.07871 11.0776C5.23499 10.9213 5.44696 10.8335 5.66797 10.8335H9.0013C9.22232 10.8335 9.43428 10.9213 9.59056 11.0776C9.74684 11.2339 9.83464 11.4458 9.83464 11.6668Z", fill: "currentColor" }) })));
+};
+var StyledNotes = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  .notes-container {\n    margin-bottom: 50px;\n  }\n  .title {\n    margin: 20px 0 10px;\n  }\n"], ["\n  .notes-container {\n    margin-bottom: 50px;\n  }\n  .title {\n    margin: 20px 0 10px;\n  }\n"])));
+var Notes = function (props) {
+    var noteGroups = props.noteGroups, onAddNoteClick = props.onAddNoteClick, mobile = props.mobile;
+    var t = (0, react_i18next_1.useTranslation)().t;
+    return ((0, jsx_runtime_1.jsx)(StyledNotes, { children: noteGroups.map(function (noteGroup, index) {
+            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "notes-container" }, { children: [!mobile && ((0, jsx_runtime_1.jsx)(IconTitle_1.IconTitle, { level: 4, title: t("note.Title"), icon: (0, jsx_runtime_1.jsx)(NoteIcon, {}), as: "h4" })), (0, jsx_runtime_1.jsx)(Button_1.Button, __assign({ mode: "outline", onClick: onAddNoteClick }, { children: t("Notes.addNew") })), (0, jsx_runtime_1.jsx)(Text_1.default, __assign({ className: "title" }, { children: noteGroup.title })), noteGroup.notes.map(function (note, index) {
+                        return (0, jsx_runtime_1.jsx)(Note_1.Note, __assign({}, note), index);
+                    })] }), index));
+        }) }));
+};
+exports.Notes = Notes;
+var templateObject_1;

lib/components/molecules/Ratings/Ratings.js

@@ -31,3 +31,3 @@ "use strict";
 var Title_1 = require("../../atoms/Typography/Title");
-var StyledRatingsDesktop = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .ratings-container {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n  }\n  .header {\n    margin-bottom: 20px;\n  }\n  .title {\n    ", "\n  }\n  .average-rate-container {\n    background: ", ";\n    padding: 24px 34px;\n    text-align: center;\n    border-radius: ", ";\n  }\n  .average-rate-label {\n    font-size: 14px;\n    margin: 11px 0 0;\n  }\n  .rate-with-interval-container {\n    flex: 1;\n    padding-left: 27px;\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n"], ["\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .ratings-container {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n  }\n  .header {\n    margin-bottom: 20px;\n  }\n  .title {\n    ", "\n  }\n  .average-rate-container {\n    background: ", ";\n    padding: 24px 34px;\n    text-align: center;\n    border-radius: ", ";\n  }\n  .average-rate-label {\n    font-size: 14px;\n    margin: 11px 0 0;\n  }\n  .rate-with-interval-container {\n    flex: 1;\n    padding-left: 27px;\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n"])), function (props) {
+var StyledRatingsDesktop = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .ratings-container {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n  }\n  .header {\n    margin-bottom: 20px;\n  }\n  .title {\n    ", "\n  }\n  .average-rate-container {\n    background: ", ";\n    padding: 24px 34px;\n    text-align: center;\n    border-radius: ", ";\n  }\n  .average-rate-label {\n    font-size: 14px;\n    margin: 3px 0 0;\n  }\n  .rate-with-interval-container {\n    flex: 1;\n    padding-left: 27px;\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n"], ["\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  .ratings-container {\n    display: flex;\n    align-items: center;\n    box-sizing: border-box;\n  }\n  .header {\n    margin-bottom: 20px;\n  }\n  .title {\n    ", "\n  }\n  .average-rate-container {\n    background: ", ";\n    padding: 24px 34px;\n    text-align: center;\n    border-radius: ", ";\n  }\n  .average-rate-label {\n    font-size: 14px;\n    margin: 3px 0 0;\n  }\n  .rate-with-interval-container {\n    flex: 1;\n    padding-left: 27px;\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n"])), function (props) {
     if (props.theme.mode === "dark") {
@@ -44,5 +44,5 @@ return "color: red";
     var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsxs)(StyledRatingsDesktop, { children: [header && ((0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ className: "header", level: 4 }, { children: header }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ratings-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "average-rate-container" }, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ className: "title", level: 1 }, { children: avgRate })), (0, jsx_runtime_1.jsx)(Rating_1.Rating, { ratingValue: avgRate }), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "average-rate-label" }, { children: t("ratings.average.rate.label") }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "rate-with-interval-container" }, { children: renderRateWithInterval() }))] }))] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledRatingsDesktop, { children: [header && ((0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ className: "header", level: 4 }, { children: header }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "ratings-container" }, { children: [(0, jsx_runtime_1.jsxs)("div", __assign({ className: "average-rate-container" }, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ className: "title", level: 1 }, { children: avgRate })), (0, jsx_runtime_1.jsx)(Rating_1.Rating, { ratingValue: avgRate }), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "average-rate-label" }, { children: t("Ratings.averageRateLabel") }))] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "rate-with-interval-container" }, { children: renderRateWithInterval() }))] }))] }));
 };
-var StyledRatingsMobile = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .header {\n    margin-bottom: 14px;\n  }\n  .title {\n    ", "\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n  .average-rate-container {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    padding: 15px 20px;\n    border-radius: ", ";\n    margin-bottom: 20px;\n    > div {\n      padding-left: 20px;\n    }\n  }\n  .average-rate-label {\n    margin-bottom: 0;\n    font-size: 14px;\n  }\n"], ["\n  .header {\n    margin-bottom: 14px;\n  }\n  .title {\n    ", "\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n  .average-rate-container {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    padding: 15px 20px;\n    border-radius: ", ";\n    margin-bottom: 20px;\n    > div {\n      padding-left: 20px;\n    }\n  }\n  .average-rate-label {\n    margin-bottom: 0;\n    font-size: 14px;\n  }\n"])), function (props) {
+var StyledRatingsMobile = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  .header {\n    margin-bottom: 14px;\n  }\n  .title {\n    ", "\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n  .average-rate-container {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    padding: 15px 20px;\n    border-radius: ", ";\n    > div {\n      padding-left: 20px;\n    }\n  }\n  .average-rate-label {\n    margin-bottom: 0;\n    font-size: 14px;\n  }\n"], ["\n  .header {\n    margin-bottom: 14px;\n  }\n  .title {\n    ", "\n  }\n  .rate-row {\n    display: flex;\n    align-items: center;\n    padding-right: 20px;\n  }\n  .interval {\n    flex: 1;\n    padding-right: 20px;\n  }\n  .average-rate-container {\n    display: flex;\n    align-items: center;\n    background: ", ";\n    padding: 15px 20px;\n    border-radius: ", ";\n    > div {\n      padding-left: 20px;\n    }\n  }\n  .average-rate-label {\n    margin-bottom: 0;\n    font-size: 14px;\n  }\n"])), function (props) {
     if (props.theme.mode === "dark") {
@@ -59,3 +59,3 @@ return "color: red";
     var t = (0, react_i18next_1.useTranslation)().t;
-    return ((0, jsx_runtime_1.jsxs)(StyledRatingsMobile, { children: [header && ((0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ className: "header", level: 4 }, { children: header }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "average-rate-container" }, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ className: "title", level: 1 }, { children: avgRate })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Rating_1.Rating, { ratingValue: avgRate }), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "average-rate-label" }, { children: t("ratings.average.rate.label") }))] })] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "rate-with-interval-container" }, { children: renderRateWithInterval() }))] }));
+    return ((0, jsx_runtime_1.jsxs)(StyledRatingsMobile, { children: [header && ((0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ className: "header", level: 4 }, { children: header }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "average-rate-container" }, { children: [(0, jsx_runtime_1.jsx)(Title_1.Title, __assign({ className: "title", level: 1 }, { children: avgRate })), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(Rating_1.Rating, { ratingValue: avgRate }), (0, jsx_runtime_1.jsx)(Text_1.Text, __assign({ className: "average-rate-label" }, { children: t("Ratings.averageRateLabel") }))] })] })), (0, jsx_runtime_1.jsx)("div", __assign({ className: "rate-with-interval-container" }, { children: renderRateWithInterval() }))] }));
 };
@@ -65,9 +65,16 @@ var Ratings = function (props) {
     var renderRateWithInterval = (0, react_1.useCallback)(function () {
-        return Object.keys(rates)
+        var percentagesValues = Object.keys(rates)
             .sort()
-            .reverse()
             .map(function (rateKey) {
             var rate = rates["".concat(rateKey)];
-            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "rate-row" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "interval" }, { children: (0, jsx_runtime_1.jsx)(Interval_1.Interval, { current: rate, max: sumRates }) })), (0, jsx_runtime_1.jsx)(Rating_1.Rating, { label: (0, utils_1.calcPercentage)(rate, sumRates), ratingValue: +rateKey })] })));
+            if (rate === 0) {
+                return 0;
+            }
+            return (rate / sumRates) * 100;
         });
+        return (0, utils_1.roundPercentageList)(percentagesValues)
+            .map(function (rate, index) {
+            return ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "rate-row" }, { children: [(0, jsx_runtime_1.jsx)("div", __assign({ className: "interval" }, { children: (0, jsx_runtime_1.jsx)(Interval_1.Interval, { current: rate, max: 100 }) })), (0, jsx_runtime_1.jsx)(Rating_1.Rating, { label: "".concat(rate, "%"), ratingValue: index + 1 })] })));
+        })
+            .reverse();
     }, [rates, avgRate]);
@@ -74,0 +81,0 @@ return props.mobile ? ((0, jsx_runtime_1.jsx)(RatingsMobile, __assign({}, props, { renderRateWithInterval: renderRateWithInterval }))) : ((0, jsx_runtime_1.jsx)(RatingsDesktop, __assign({}, props, { renderRateWithInterval: renderRateWithInterval })));

lib/components/molecules/VideoPlayer/VideoPlayer.d.ts

@@ -1,2 +0,16 @@
-import ContrastBox from "../../../styleguide/ContrastBox/ContrastBox";
-export default ContrastBox;
+import * as React from "react";
+import { ReactPlayerProps } from "react-player";
+interface StyledVideoPlayerProps {
+    mobile?: boolean;
+}
+export interface VideoPlayerProps extends StyledVideoPlayerProps, ReactPlayerProps {
+}
+export declare const VideoPlayer: React.FC<VideoPlayerProps>;
+declare const _default: React.ForwardRefExoticComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("styled-components").DefaultTheme | undefined;
+}>;
+export default _default;

lib/components/molecules/VideoPlayer/VideoPlayer.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;
+};
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
@@ -6,3 +44,25 @@ return (mod && mod.__esModule) ? mod : { "default": mod };
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../styleguide/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.VideoPlayer = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var React = __importStar(require("react"));
+var styled_components_1 = __importStar(require("styled-components"));
+var react_player_1 = __importDefault(require("react-player"));
+var __1 = require("../../../");
+var StyledVideoPlayer = (0, styled_components_1.default)("div")(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  position: relative;\n\n  .react-player__preview {\n    &:before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.5);\n      content: \"\";\n    }\n\n    > svg {\n      position: relative;\n    }\n  }\n\n  .video-player-overlay {\n    position: absolute;\n    bottom: 40px;\n    display: ", ";\n    left: 18px;\n\n    * {\n      color: ", ";\n    }\n\n    h3 {\n      margin-bottom: 10px;\n      margin-top: 10px;\n    }\n  }\n\n  .video-player-header {\n    display: flex;\n    align-items: center;\n\n    .video-player-badge {\n      margin-right: 10px;\n    }\n  }\n\n  .video-player-footer {\n    display: flex;\n\n    > p:first-child {\n      margin-right: 35px;\n    }\n  }\n\n  .video-player-breadcrumbs {\n    display: inline-flex;\n\n    a {\n      position: relative;\n      margin-right: 36px;\n\n      &:not(:last-child):before {\n        position: absolute;\n        right: -24px;\n\n        content: \">\";\n      }\n    }\n  }\n"], ["\n  position: relative;\n\n  .react-player__preview {\n    &:before {\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      background-color: rgba(0, 0, 0, 0.5);\n      content: \"\";\n    }\n\n    > svg {\n      position: relative;\n    }\n  }\n\n  .video-player-overlay {\n    position: absolute;\n    bottom: 40px;\n    display: ", ";\n    left: 18px;\n\n    * {\n      color: ", ";\n    }\n\n    h3 {\n      margin-bottom: 10px;\n      margin-top: 10px;\n    }\n  }\n\n  .video-player-header {\n    display: flex;\n    align-items: center;\n\n    .video-player-badge {\n      margin-right: 10px;\n    }\n  }\n\n  .video-player-footer {\n    display: flex;\n\n    > p:first-child {\n      margin-right: 35px;\n    }\n  }\n\n  .video-player-breadcrumbs {\n    display: inline-flex;\n\n    a {\n      position: relative;\n      margin-right: 36px;\n\n      &:not(:last-child):before {\n        position: absolute;\n        right: -24px;\n\n        content: \">\";\n      }\n    }\n  }\n"])), function (props) { return (props.mobile ? "none" : "block"); }, function (_a) {
+    var theme = _a.theme;
+    return theme.white;
+});
+var PlayIcon = function () {
+    return ((0, jsx_runtime_1.jsxs)("svg", __assign({ width: "66", height: "66", viewBox: "0 0 66 66", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [(0, jsx_runtime_1.jsx)("path", { d: "M33 65C50.6731 65 65 50.6731 65 33C65 15.3269 50.6731 1 33 1C15.3269 1 1 15.3269 1 33C1 50.6731 15.3269 65 33 65Z", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), (0, jsx_runtime_1.jsx)("path", { d: "M26.6016 20.2L45.8016 33L26.6016 45.8V20.2Z", stroke: "white", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
+};
+var VideoPlayer = function (props) {
+    var children = props.children, mobile = props.mobile;
+    var _a = React.useState(true), visibleOverlay = _a[0], setVisibleOverlay = _a[1];
+    return ((0, jsx_runtime_1.jsxs)(StyledVideoPlayer, __assign({ mobile: mobile }, { children: [(0, jsx_runtime_1.jsx)(__1.RatioBox, __assign({ ratio: 9 / 16 }, { children: (0, jsx_runtime_1.jsx)(react_player_1.default, __assign({}, props, { width: "100%", height: "100%", onPlay: function () {
+                        setVisibleOverlay(false);
+                    }, playIcon: PlayIcon(), playing: true, controls: true })) })), visibleOverlay && (0, jsx_runtime_1.jsx)(React.Fragment, { children: children })] })));
+};
+exports.VideoPlayer = VideoPlayer;
+var NewVideoPlayer = (0, styled_components_1.default)(exports.VideoPlayer)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""])));
+exports.default = (0, styled_components_1.withTheme)(NewVideoPlayer);
+var templateObject_1, templateObject_2;

lib/components/organisms/RegisterForm/RegisterForm.js

@@ -62,4 +62,4 @@ "use strict";
     }), initialValues = _d[0], setInitialValues = _d[1];
-    var t = (0, react_i18next_1.useTranslation)().t;
-    var _e = (0, react_1.useContext)(react_2.EscolaLMSContext), register = _e.register, fields = _e.fields, fetchFields = _e.fetchFields;
+    var _e = (0, react_i18next_1.useTranslation)(), t = _e.t, i18n = _e.i18n;
+    var _f = (0, react_1.useContext)(react_2.EscolaLMSContext), register = _f.register, fields = _f.fields, fetchFields = _f.fetchFields;
     (0, react_1.useEffect)(function () {
@@ -147,4 +147,3 @@ fetchFields({ class_type: "App\\Models\\User" });
                     return ((0, jsx_runtime_1.jsxs)("form", __assign({ onSubmit: handleSubmit }, { children: [errors && errors.error && ((0, jsx_runtime_1.jsx)(__1.Text, __assign({ type: "danger" }, { children: errors.error }))), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("RegisterForm.First name"), type: "text", name: "first_name", onChange: handleChange, onBlur: handleBlur, value: values.first_name, error: touched.first_name && errors.first_name, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("RegisterForm.Last name"), type: "text", name: "last_name", onChange: handleChange, onBlur: handleBlur, value: values.last_name, error: touched.last_name && errors.last_name, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("Email"), className: "form-control grey", type: "email", name: "email", onChange: handleChange, onBlur: handleBlur, value: values.email, error: touched.email && errors.email, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("Password"), type: "password", name: "password", onChange: handleChange, onBlur: handleBlur, value: values.password, error: touched.password && errors.password, helper: t("RegisterForm.Password validation"), required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("RegisterForm.Repeat password"), type: "password", name: "password_confirmation", onChange: handleChange, onBlur: handleBlur, value: values.password_confirmation, error: touched.password_confirmation && errors.password_confirmation, required: true }), (0, jsx_runtime_1.jsx)(__1.Input, { label: t("RegisterForm.Phone"), type: "text", name: "phone", onChange: handleChange, onBlur: handleBlur, value: values.phone, error: touched.phone && errors.phone }), fields &&
-                                fields.list &&
-                                fields.list.length > 0 &&
+                                Array.isArray(fields.list) &&
                                 fields.list
@@ -151,0 +150,0 @@ .filter(function (field) {

lib/components/organisms/ResetPasswordForm/ResetPasswordForm.d.ts

@@ -1,2 +0,19 @@
-import ContrastBox from "../../../styleguide/ContrastBox/ContrastBox";
-export default ContrastBox;
+/// <reference types="react" />
+import type { DefaultResponseError } from "@escolalms/sdk/lib/types/api";
+import type { ResponseError } from "umi-request";
+export declare const ResetPasswordForm: React.FC<{
+    onError?: (err: ResponseError<DefaultResponseError>) => void;
+    onSuccess?: () => void;
+    backToLogin?: () => void;
+    onRegisterLink?: () => void;
+    mobile?: boolean;
+    return_url?: string;
+}>;
+declare const _default: import("react").ForwardRefExoticComponent<{
+    [x: string]: any;
+    [x: number]: any;
+    [x: symbol]: any;
+} & {
+    theme?: import("styled-components").DefaultTheme | undefined;
+}>;
+export default _default;

lib/components/organisms/ResetPasswordForm/ResetPasswordForm.js

 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
 };
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-var ContrastBox_1 = __importDefault(require("../../../styleguide/ContrastBox/ContrastBox"));
-exports.default = ContrastBox_1.default;
+exports.ResetPasswordForm = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var formik_1 = require("formik");
+var react_1 = require("react");
+var react_i18next_1 = require("react-i18next");
+var react_2 = require("@escolalms/sdk/lib/react");
+var styled_components_1 = __importStar(require("styled-components"));
+var __1 = require("../../../");
+var StyledDiv = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  .lsm-input {\n    margin: 30px 0;\n  }\n  button {\n    margin-top: 10px;\n  }\n  p {\n    margin: 15px 0;\n  }\n  p,\n  a {\n    font-size: 14px;\n  }\n  h2,\n  h3,\n  h4 {\n    font-size: ", ";\n  }\n  form {\n    width: 100%;\n    max-width: 440px;\n    margin-bottom: 15px;\n  }\n"], ["\n  margin: 0;\n  padding: 0;\n  width: 100%;\n  display: flex;\n  flex-direction: column;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  align-content: center;\n  .lsm-input {\n    margin: 30px 0;\n  }\n  button {\n    margin-top: 10px;\n  }\n  p {\n    margin: 15px 0;\n  }\n  p,\n  a {\n    font-size: 14px;\n  }\n  h2,\n  h3,\n  h4 {\n    font-size: ", ";\n  }\n  form {\n    width: 100%;\n    max-width: 440px;\n    margin-bottom: 15px;\n  }\n"])), function (props) { return (props.mobile ? "18px" : "28px"); });
+var ResetPasswordForm = function (_a) {
+    var onSuccess = _a.onSuccess, onError = _a.onError, backToLogin = _a.backToLogin, onRegisterLink = _a.onRegisterLink, _b = _a.mobile, mobile = _b === void 0 ? false : _b, return_url = _a.return_url;
+    var initialValues = { email: "" };
+    var t = (0, react_i18next_1.useTranslation)().t;
+    var forgot = (0, react_1.useContext)(react_2.EscolaLMSContext).forgot;
+    return ((0, jsx_runtime_1.jsxs)(StyledDiv, __assign({ mobile: mobile }, { children: [(0, jsx_runtime_1.jsx)(__1.Title, __assign({ level: 3 }, { children: t("ResetForm.ResetPassword") })), " ", (0, jsx_runtime_1.jsx)(formik_1.Formik, __assign({ initialValues: initialValues, validate: function (values) {
+                    var errors = {};
+                    if (!values.email) {
+                        errors.email = t("Required");
+                    }
+                    return errors;
+                }, onSubmit: function (values, _a) {
+                    var setSubmitting = _a.setSubmitting, setErrors = _a.setErrors;
+                    forgot({
+                        email: values.email,
+                        return_url: "".concat(window.location.origin, "/").concat(return_url),
+                    })
+                        .then(function () { return onSuccess && onSuccess(); })
+                        .catch(function (err) {
+                        setErrors(__assign({ error: err.data.message }, err.data.errors));
+                        onError && onError(err);
+                    })
+                        .finally(function () { return setSubmitting(false); });
+                } }, { children: function (_a) {
+                    var values = _a.values, errors = _a.errors, touched = _a.touched, handleChange = _a.handleChange, handleBlur = _a.handleBlur, handleSubmit = _a.handleSubmit, isSubmitting = _a.isSubmitting;
+                    return ((0, jsx_runtime_1.jsxs)("form", __assign({ onSubmit: handleSubmit }, { children: [errors && errors.error && ((0, jsx_runtime_1.jsx)(__1.Text, __assign({ type: "danger" }, { children: errors.error }))), (0, jsx_runtime_1.jsx)(__1.Input, { type: "email", name: "email", label: "email", onChange: handleChange, onBlur: handleBlur, value: values.email, error: touched.email && errors.email }), (0, jsx_runtime_1.jsx)(__1.Button, __assign({ mode: "secondary", type: "submit", loading: isSubmitting, block: true }, { children: t("ResetForm.ResetPassword") }))] })));
+                } })), (0, jsx_runtime_1.jsx)(__1.Text, __assign({ size: "14" }, { children: (0, jsx_runtime_1.jsx)(__1.Link, __assign({ underline: true, onClick: function () { return backToLogin && backToLogin(); } }, { children: t("ResetForm.BackToLogin") })) })), (0, jsx_runtime_1.jsxs)(__1.Text, __assign({ size: "14" }, { children: [t("ResetForm.NotHavingAccount"), " ", (0, jsx_runtime_1.jsx)(__1.Link, __assign({ underline: true, onClick: function () { return onRegisterLink && onRegisterLink(); } }, { children: t("ResetForm.Register") }))] }))] })));
+};
+exports.ResetPasswordForm = ResetPasswordForm;
+// https://styled-components.com/docs/api#using-custom-props
+// Main button with styles
+exports.default = (0, styled_components_1.withTheme)((0, styled_components_1.default)(exports.ResetPasswordForm)(templateObject_2 || (templateObject_2 = __makeTemplateObject([""], [""]))));
+var templateObject_1, templateObject_2;

lib/index.d.ts

@@ -18,6 +18,6 @@ export { default as Avatar } from "./components/atoms/Avatar/Avatar";
 export { Radio as Radio } from "./components/atoms/Option/Radio";
-export { default as ProgressBar } from "./components/atoms/ProgressBar/ProgressBar";
+export { ProgressBar } from "./components/atoms/ProgressBar/ProgressBar";
 export { default as ProgressRing } from "./components/atoms/ProgressRing/ProgressRing";
 export { Rating } from "./components/atoms/Rating/Rating";
-export { default as RatioBox } from "./components/atoms/RatioBox/RatioBox";
+export { RatioBox } from "./components/atoms/RatioBox/RatioBox";
 export { default as Slider } from "./components/atoms/Slider/Slider";
@@ -24,0 +24,0 @@ export { default as Spin } from "./components/atoms/Spin/Spin";

lib/index.js

@@ -43,3 +43,3 @@ "use strict";
 var ProgressBar_1 = require("./components/atoms/ProgressBar/ProgressBar");
-Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return __importDefault(ProgressBar_1).default; } });
+Object.defineProperty(exports, "ProgressBar", { enumerable: true, get: function () { return ProgressBar_1.ProgressBar; } });
 var ProgressRing_1 = require("./components/atoms/ProgressRing/ProgressRing");
@@ -50,3 +50,3 @@ Object.defineProperty(exports, "ProgressRing", { enumerable: true, get: function () { return __importDefault(ProgressRing_1).default; } });
 var RatioBox_1 = require("./components/atoms/RatioBox/RatioBox");
-Object.defineProperty(exports, "RatioBox", { enumerable: true, get: function () { return __importDefault(RatioBox_1).default; } });
+Object.defineProperty(exports, "RatioBox", { enumerable: true, get: function () { return RatioBox_1.RatioBox; } });
 var Slider_1 = require("./components/atoms/Slider/Slider");
@@ -53,0 +53,0 @@ Object.defineProperty(exports, "Slider", { enumerable: true, get: function () { return __importDefault(Slider_1).default; } });

lib/styleguide/i18n.js

@@ -14,8 +14,27 @@ "use strict";
         translation: {
+            "CartCard.addDiscountButton": "Add discount code",
+            "CartCard.buyButton": "I buy and pay",
+            "CartCard.discountError": "The code provided is invalid",
+            "CartCard.discountGranted": "**Discount code** applied",
+            "CartCard.realizeButton": "Realize",
+            "Course.Agenda": "Agenda",
+            "Course.Finished": "Finished",
             "Course.Lesson": "Module",
-            "Course.Finished": "Finished",
-            "Course.Agenda": "Agenda",
             "Course.markAsFinished": "Mark as finished",
-            "ratings.average.rate.label": "Average rate",
-            "Welcome to Wellms": "Welcome to Wellms and react-i18next",
+            "CourseCard.lesson_one": "{{count}} lesson",
+            "CourseCard.lesson_other": "{{count}} lessons",
+            "CourseCard.startNow": "Start now",
+            "I18n.welcomeToWellms": "Welcome to Wellms and react-i18next",
+            "Notes.addNew": "Add new note",
+            "Notes.title": "Notes",
+            "ProgressBar.defaultLabel": "Progress",
+            "Rate.Header": "How do you rate this course",
+            "Rate.Select": "Select rate",
+            "Rate.Select1": "Fatal, disappointments",
+            "Rate.Select2": "Weak, below expectations",
+            "Rate.Select3": "Without a revelation, it could be better",
+            "Rate.Select4": "Good, as expected",
+            "Rate.Select5": "Sensational, I recommend it heartily",
+            "Rate.submitButton": "Rate the course",
+            "Ratings.averageRateLabel": "Average rate",
         },
@@ -25,3 +44,3 @@ },
         translation: {
-            "Welcome to Wellms": "Bienvenue à Wellms et react-i18next",
+            "I18n.welcomeToWellms": "Bienvenue à Wellms et react-i18next",
         },
@@ -31,4 +50,26 @@ },
         translation: {
-            "ratings.average.rate.label": "Średnia ocena",
-            "Welcome to Wellms": "Witaj w Wellms i react-i18next",
+            "CartCard.addDiscountButton": "Dodaj kod rabatowy",
+            "CartCard.buyButton": "Kupuję i płacę",
+            "CartCard.discountError": "Podany kod jest nieprawidłowy",
+            "CartCard.discountGranted": "**Kod rabatowy** zastosowany",
+            "CartCard.realizeButton": "Realizuj",
+            "Course.Agenda": "Plan kursu",
+            "Course.Finished": "Ukończono",
+            "Course.Lesson": "Moduł",
+            "Course.markAsFinished": "Oznacz jako ukończone",
+            "CourseCard.lesson_few": "{{count}} lekcje",
+            "CourseCard.lesson_many": "{{count}} lekcji",
+            "CourseCard.lesson_one": "{{count}} lekcja",
+            "I18n.welcomeToWellms": "Witaj w Wellms i react-i18next",
+            "Notes.addNew": "Dodaj nową notatkę",
+            "ProgressBar.defaultLabel": "Postęp",
+            "Rate.Header": "Jak oceniasz ten kurs",
+            "Rate.Select": "Wybierz ocene",
+            "Rate.Select1": "Fatalny, rozczarowujący",
+            "Rate.Select2": "Słaby, poniżej oczewikań",
+            "Rate.Select3": "Bez, rewelacji, mógłby być lepszy",
+            "Rate.Select4": "Dobry, zgodny z oczekiwaniami",
+            "Rate.Select5": "Rewelacyjny, polecam serdecznie",
+            "Rate.submitButton": "Oceń kurs",
+            "Ratings.averageRateLabel": "Średnia ocena",
         },
@@ -35,0 +76,0 @@ },

lib/utils/utils.d.ts

 export declare const calcPercentage: (current: number, max: number) => string;
+export declare const roundPercentageList: (orig: number[], target?: number | undefined) => number[];

lib/utils/utils.js

 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.calcPercentage = void 0;
+exports.roundPercentageList = exports.calcPercentage = void 0;
 var calcPercentage = function (current, max) {
@@ -14,1 +14,61 @@ if (max === 0) {
 exports.calcPercentage = calcPercentage;
+var roundPercentageList = function (orig, target) {
+    if (!target) {
+        target = 100;
+    }
+    var newVals = [];
+    var len = orig.length;
+    var marginOfErrors = [];
+    var i = orig.length, j = 0, total = 0, change = 0, next, factor1, factor2;
+    while (i--) {
+        total += newVals[i] = Math.round(orig[i]);
+    }
+    change = total < target ? 1 : -1;
+    while (total !== target) {
+        for (i = 0; i < len; i++) {
+            next = i === len - 1 ? 0 : i + 1;
+            factor2 = errorFactor(orig[next], newVals[next] + change);
+            factor1 = errorFactor(orig[i], newVals[i] + change);
+            if (factor1 > factor2) {
+                j = next;
+            }
+        }
+        newVals[j] += change;
+        total += change;
+    }
+    for (var i_1 = 0; i_1 < len; i_1++) {
+        marginOfErrors[i_1] = newVals[i_1] && Math.abs(orig[i_1] - newVals[i_1]) / orig[i_1];
+    }
+    for (var i_2 = 0; i_2 < len; i_2++) {
+        for (var j_1 = 0; j_1 < len; j_1++) {
+            if (j_1 === i_2)
+                continue;
+            var roundUpFactor = errorFactor(orig[i_2], newVals[i_2] + 1) +
+                errorFactor(orig[j_1], newVals[j_1] - 1);
+            var roundDownFactor = errorFactor(orig[i_2], newVals[i_2] - 1) +
+                errorFactor(orig[j_1], newVals[j_1] + 1);
+            var sumMargin = marginOfErrors[i_2] + marginOfErrors[j_1];
+            if (roundUpFactor < sumMargin) {
+                newVals[i_2] = newVals[i_2] + 1;
+                newVals[j_1] = newVals[j_1] - 1;
+                marginOfErrors[i_2] =
+                    newVals[i_2] && Math.abs(orig[i_2] - newVals[i_2]) / orig[i_2];
+                marginOfErrors[j_1] =
+                    newVals[j_1] && Math.abs(orig[j_1] - newVals[j_1]) / orig[j_1];
+            }
+            if (roundDownFactor < sumMargin) {
+                newVals[i_2] = newVals[i_2] - 1;
+                newVals[j_1] = newVals[j_1] + 1;
+                marginOfErrors[i_2] =
+                    newVals[i_2] && Math.abs(orig[i_2] - newVals[i_2]) / orig[i_2];
+                marginOfErrors[j_1] =
+                    newVals[j_1] && Math.abs(orig[j_1] - newVals[j_1]) / orig[j_1];
+            }
+        }
+    }
+    function errorFactor(oldNum, newNum) {
+        return Math.abs(oldNum - newNum) / oldNum;
+    }
+    return newVals;
+};
+exports.roundPercentageList = roundPercentageList;

package.json

 {
   "name": "@escolalms/components",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "main": "lib/index.js",
@@ -51,7 +51,8 @@ "license": "MIT",
     "react-docgen-typescript": "^2.2.2",
+    "react-dom": "^17",
     "react-dropdown": "^1.10.0",
-    "react-dom": "^17",
     "react-grid-system": "^8.1.4",
     "react-i18next": "^11.16.7",
     "react-markdown": "^8.0.3",
+    "react-player": "^2.0.0",
     "react-slick": "^0.29.0",
@@ -58,0 +59,0 @@ "react-styleguidist": "^11.2.0",

src/components/atoms/Card/Card.md

@@ -8,2 +8,3 @@ ```js
 import { useState } from "react";
+import { CourseCard } from "../../molecules/CourseCard/CourseCard";
 import ImageModal from "../../../styleguide/ImageModal";
@@ -23,3 +24,2 @@ import img1 from "./Card.png";
     </Card>
-
     <Card wings={"large"} inline>
@@ -40,2 +40,29 @@ <Text size="14" noMargin>
     </Card>
+    <div style={{ width: 600 }}>
+      <CourseCard
+        id={1}
+        tags={[
+          {
+            title: "Bestseller",
+            id: 1,
+          },
+        ]}
+        lessonCount={1}
+        subtitle={"100% Online"}
+        title={"Best course ever"}
+        hideImage
+        categories={{
+          onCategoryClick: (id) => {
+            console.log("Category click id: ", id);
+          },
+          categoryElements: [
+            { id: 1, name: "Programming" },
+            { id: 2, name: "Front-end" },
+          ],
+        }}
+        onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+        onImageClick={() => console.log("onImageClick")}
+        onButtonClick={(cardId) => console.log("onButtonClick :", { cardId })}
+      />
+    </div>
   </ThemeTester>
@@ -42,0 +69,0 @@ <ImageModal images={[img1]} />

src/components/atoms/Modal/Modal.md

 ```js
 import { useState } from "react";
 import { ImageModal, ThemeTester } from "../../../styleguide";
-import Title from "../../atoms/Typography/Title";
-import Text from "../../atoms/Typography/Text";
 import img1 from "./Modal.png";
+import { Button, Title, Text } from "../../..";
 
-const [visible, setVisible] = useState(false);
-
-const onToggleDialog = () => {
-  setVisible((value) => !value);
+const ModalWrapper = () => {
+  const [visible, setVisible] = useState(false);
+  return (
+    <React.Fragment>
+      <Button
+        onClick={() => setVisible((prevVisible) => !prevVisible)}
+        mode="secondary"
+      >
+        launch modal
+      </Button>
+      <Modal
+        onClose={() => setVisible(false)}
+        visible={visible}
+        animation="zoom"
+        maskAnimation="fade"
+        destroyOnClose={true}
+      >
+        <Title level={4} className="modal-title">
+          Modal title
+        </Title>
+        <Text>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias
+          aliquid autem ea earum id minima necessitatibus nulla perferendis
+          porro, rem, vitae voluptates. Dolor doloremque eum ipsum iusto modi
+          recusandae velit?
+        </Text>
+      </Modal>
+    </React.Fragment>
+  );
 };
@@ -16,19 +40,3 @@
   <ThemeTester>
-    <button onClick={onToggleDialog}>launch modal</button>
-    <Modal
-      onClose={onToggleDialog}
-      visible={visible}
-      animation="zoom"
-      maskAnimation="fade"
-    >
-      <Title level={4} className="modal-title">
-        Modal title
-      </Title>
-      <Text>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aliquid
-        autem ea earum id minima necessitatibus nulla perferendis porro, rem,
-        vitae voluptates. Dolor doloremque eum ipsum iusto modi recusandae
-        velit?
-      </Text>
-    </Modal>
+    <ModalWrapper />
   </ThemeTester>
@@ -35,0 +43,0 @@

src/components/molecules/CourseCard/CourseCard.md

 ```js
 import { GlobalThemeProvider } from "../../../theme/provider";
+import ThemeTester from "../../../styleguide/ThemeTester";
 import ImageModal from "../../../styleguide/ImageModal";
@@ -8,9 +9,76 @@ import img1 from "./CourseCard.png";
 import img4 from "./CourseCard-4.png";
+import backgroundImage1 from "./bgImage1.png";
+import backgroundImage2 from "./bgImage2.png";
+import { Row, Col } from "react-grid-system";
 
 <GlobalThemeProvider>
-    <CourseCard>
-        <pre>This component is not ready yet</pre>
-    </CourseCard>
-    <ImageModal images={[img1, img2, img3, img4]}/>
+  <ThemeTester childrenListStyle={{ display: "block" }}>
+    <Row>
+      <Col xs={6}>
+        <CourseCard
+          id={1}
+          image={{
+            path: backgroundImage1,
+          }}
+          tags={[
+            {
+              title: "Bestseller",
+              id: 1,
+            },
+          ]}
+          lessonCount={1}
+          subtitle={"100% Online"}
+          title={"Best course ever"}
+          hideImage
+          categories={{
+            onCategoryClick: (id) => console.log("Category click id: ", id),
+            categoryElements: [
+              { id: 1, name: "Programming" },
+              { id: 2, name: "Front-end" },
+            ],
+          }}
+          onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+          onImageClick={() => console.log("onImageClick")}
+          onButtonClick={(cardId) => console.log("onButtonClick :", { cardId })}
+        />
+      </Col>
+      <Col xs={6}>
+        <CourseCard
+          id={2}
+          image={{
+            path: backgroundImage2,
+          }}
+          lessonCount={3}
+          tags={[
+            {
+              title: "Bestseller",
+              id: 1,
+            },
+            {
+              title: "Best Price",
+              id: 2,
+            },
+          ]}
+          title={"Best course ever"}
+          categories={{
+            onCategoryClick: (id) => {
+              console.log("Category click id: ", id);
+            },
+            categoryElements: [
+              { id: 1, name: "Programming" },
+              { id: 2, name: "Front-end" },
+            ],
+          }}
+          onTagClick={(tagId) => console.log("onTagClick :", { tagId })}
+          onImageClick={() => console.log("onImageClick")}
+          progress={{
+            currentProgress: 0.43,
+            maxProgress: 1,
+          }}
+        />
+      </Col>
+    </Row>
+  </ThemeTester>
+  <ImageModal images={[img1, img2, img3, img4]} />
 </GlobalThemeProvider>;
 ```

src/components/molecules/Notes/Notes.md

 ```js
-import { GlobalThemeProvider } from "../../../theme/provider";
+import ThemeTester from "../../../styleguide/ThemeTester";
 import ImageModal from "../../../styleguide/ImageModal";
 import img1 from "./Notes.png";
+import { Title } from "../../atoms/Typography/Title";
+const noteGroups = [
+  {
+    title: "lesson 1",
+    notes: [
+      {
+        description: "Simple node",
+        time: "15:10",
+        color: "red",
+      },
+      {
+        description: "Note without color",
+        time: "14:00",
+      },
+      {
+        description: "Note with color",
+        time: "15:10",
+      },
+    ],
+  },
+  {
+    title: "lesson 2",
+    notes: [
+      {
+        description: "Front-end lesson",
+        time: "12:00",
+        color: "blue",
+      },
+      {
+        description: "Back-end lesson",
+        time: "18:00",
+      },
+    ],
+  },
+];
 
-<GlobalThemeProvider>
-  <Notes>
-    <pre>This component is not ready yet</pre>
-  </Notes>
+<ThemeTester childrenListStyle={{ display: "block" }}>
+  <Title level={3}>Desktop View</Title>
+  <Notes
+    noteGroups={noteGroups}
+    onAddNoteClick={() => console.log("On add node click")}
+  />
+  <div style={{ maxWidth: 360, margin: "auto" }}>
+    <div style={{ margin: "0 16px" }}>
+      <Title level={3}>Mobile View</Title>
+      <Notes
+        mobile
+        noteGroups={noteGroups}
+        onAddNoteClick={() => console.log("On add node click")}
+      />
+    </div>
+  </div>
   <ImageModal images={[img1]} />
-</GlobalThemeProvider>;
+</ThemeTester>;
 ```

src/components/molecules/VideoPlayer/VideoPlayer.md

 ```js
-import { GlobalThemeProvider } from "../../../theme/provider";
-import ImageModal from "../../../styleguide/ImageModal";
+import { ImageModal, ThemeTester } from "../../../styleguide";
 import img1 from "./VideoPlayer.png";
+import { Title, Text, Badge, Link } from "../../../";
+import img2 from "./VideoPlayerPoster.png";
 
-<GlobalThemeProvider>
-    <VideoPlayer>
-        <pre>This component is not ready yet</pre>
-    </VideoPlayer>
-    <ImageModal images={[img1]}/>
-</GlobalThemeProvider>;
+<React.Fragment>
+  <ThemeTester>
+    <div style={{ width: "100%" }}>
+      <VideoPlayer
+        url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
+        light={img2}
+      >
+        <div className="video-player-overlay">
+          <div className="video-player-header">
+            <Badge className={"video-player-badge"}>Nowość</Badge>
+            <div className="video-player-breadcrumbs">
+              <Link href="http://onet.pl" target="_blank">
+                Onet
+              </Link>
+              <Link href="http://onet.pl" target="_blank">
+                Onet
+              </Link>
+            </div>
+          </div>
+          <Title level={3}>Księgowość dla początkujących</Title>
+          <div className="video-player-footer">
+            <Text size={"12"} noMargin>
+              26/05/2020
+            </Text>
+            <Text size={"12"} noMargin>
+              2h 12 min
+            </Text>
+          </div>
+        </div>
+      </VideoPlayer>
+    </div>
+    <div style={{ width: 375 }}>
+      <VideoPlayer
+        url="https://bitdash-a.akamaihd.net/content/MI201109210084_1/m3u8s/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.m3u8"
+        light={img2}
+        mobile
+      />
+    </div>
+  </ThemeTester>
+
+  <ImageModal images={[img1]} />
+</React.Fragment>;
 ```

src/components/organisms/ResetPasswordForm/ResetPasswordForm.md

@@ -5,9 +5,18 @@ ```js
 import img1 from "./LoginForm.png";
+import { EscolaLMSContextProvider } from "@escolalms/sdk/lib/react/context";
 
 <GlobalThemeProvider>
-  <ResetPasswordForm>
-    <pre>This component is not ready yet</pre>
-  </ResetPasswordForm>
+  <EscolaLMSContextProvider apiUrl="https://api-stage.escolalms.com/">
+    <ResetPasswordForm
+      onSuccess={() => console.log("onSuccess")}
+      onError={(err) => console.log("onError", err.data)}
+      backToLogin={() => console.log("backToLogin")}
+      onRegisterLink={() => console.log("onRegisterLink")}
+      return_url={"reset"}
+    >
+      <pre>This component is not ready yet</pre>
+    </ResetPasswordForm>{" "}
+  </EscolaLMSContextProvider>
   <ImageModal images={[img1]} />
 </GlobalThemeProvider>;
 ```

src/index.ts

@@ -20,6 +20,6 @@ // ATOMS
 export { Radio as Radio } from "./components/atoms/Option/Radio";
-export { default as ProgressBar } from "./components/atoms/ProgressBar/ProgressBar";
+export { ProgressBar } from "./components/atoms/ProgressBar/ProgressBar";
 export { default as ProgressRing } from "./components/atoms/ProgressRing/ProgressRing";
 export { Rating } from "./components/atoms/Rating/Rating";
-export { default as RatioBox } from "./components/atoms/RatioBox/RatioBox";
+export { RatioBox } from "./components/atoms/RatioBox/RatioBox";
 export { default as Slider } from "./components/atoms/Slider/Slider";
@@ -26,0 +26,0 @@ export { default as Spin } from "./components/atoms/Spin/Spin";

src/styleguide/i18n.ts

@@ -10,9 +10,27 @@ import i18n from "i18next";
     translation: {
+      "CartCard.addDiscountButton": "Add discount code",
+      "CartCard.buyButton": "I buy and pay",
+      "CartCard.discountError": "The code provided is invalid",
+      "CartCard.discountGranted": "**Discount code** applied",
+      "CartCard.realizeButton": "Realize",
+      "Course.Agenda": "Agenda",
+      "Course.Finished": "Finished",
       "Course.Lesson": "Module",
-      "Course.Finished": "Finished",
-      "Course.Agenda": "Agenda",
       "Course.markAsFinished": "Mark as finished",
-      "ratings.average.rate.label": "Average rate",
-
-      "Welcome to Wellms": "Welcome to Wellms and react-i18next",
+      "CourseCard.lesson_one": "{{count}} lesson",
+      "CourseCard.lesson_other": "{{count}} lessons",
+      "CourseCard.startNow": "Start now",
+      "I18n.welcomeToWellms": "Welcome to Wellms and react-i18next",
+      "Notes.addNew": "Add new note",
+      "Notes.title": "Notes",
+      "ProgressBar.defaultLabel": "Progress",
+      "Rate.Header": "How do you rate this course",
+      "Rate.Select": "Select rate",
+      "Rate.Select1": "Fatal, disappointments",
+      "Rate.Select2": "Weak, below expectations",
+      "Rate.Select3": "Without a revelation, it could be better",
+      "Rate.Select4": "Good, as expected",
+      "Rate.Select5": "Sensational, I recommend it heartily",
+      "Rate.submitButton": "Rate the course",
+      "Ratings.averageRateLabel": "Average rate",
     },
@@ -22,3 +40,3 @@ },
     translation: {
-      "Welcome to Wellms": "Bienvenue à Wellms et react-i18next",
+      "I18n.welcomeToWellms": "Bienvenue à Wellms et react-i18next",
     },
@@ -28,4 +46,26 @@ },
     translation: {
-      "ratings.average.rate.label": "Średnia ocena",
-      "Welcome to Wellms": "Witaj w Wellms i react-i18next",
+      "CartCard.addDiscountButton": "Dodaj kod rabatowy",
+      "CartCard.buyButton": "Kupuję i płacę",
+      "CartCard.discountError": "Podany kod jest nieprawidłowy",
+      "CartCard.discountGranted": "**Kod rabatowy** zastosowany",
+      "CartCard.realizeButton": "Realizuj",
+      "Course.Agenda": "Plan kursu",
+      "Course.Finished": "Ukończono",
+      "Course.Lesson": "Moduł",
+      "Course.markAsFinished": "Oznacz jako ukończone",
+      "CourseCard.lesson_few": "{{count}} lekcje",
+      "CourseCard.lesson_many": "{{count}} lekcji",
+      "CourseCard.lesson_one": "{{count}} lekcja",
+      "I18n.welcomeToWellms": "Witaj w Wellms i react-i18next",
+      "Notes.addNew": "Dodaj nową notatkę",
+      "ProgressBar.defaultLabel": "Postęp",
+      "Rate.Header": "Jak oceniasz ten kurs",
+      "Rate.Select": "Wybierz ocene",
+      "Rate.Select1": "Fatalny, rozczarowujący",
+      "Rate.Select2": "Słaby, poniżej oczewikań",
+      "Rate.Select3": "Bez, rewelacji, mógłby być lepszy",
+      "Rate.Select4": "Dobry, zgodny z oczekiwaniami",
+      "Rate.Select5": "Rewelacyjny, polecam serdecznie",
+      "Rate.submitButton": "Oceń kurs",
+      "Ratings.averageRateLabel": "Średnia ocena",
     },
@@ -32,0 +72,0 @@ },

src/utils/utils.ts

@@ -10,1 +10,83 @@ export const calcPercentage = (current: number, max: number): string => {
 };
+
+export const roundPercentageList = (orig: number[], target?: number) => {
+  if (!target) {
+    target = 100;
+  }
+
+  const newVals = [];
+  const len = orig.length;
+  const marginOfErrors = [];
+
+  let i = orig.length,
+    j = 0,
+    total = 0,
+    change = 0,
+    next,
+    factor1,
+    factor2;
+
+  while (i--) {
+    total += newVals[i] = Math.round(orig[i]);
+  }
+
+  change = total < target ? 1 : -1;
+
+  while (total !== target) {
+    for (i = 0; i < len; i++) {
+      next = i === len - 1 ? 0 : i + 1;
+
+      factor2 = errorFactor(orig[next], newVals[next] + change);
+      factor1 = errorFactor(orig[i], newVals[i] + change);
+
+      if (factor1 > factor2) {
+        j = next;
+      }
+    }
+
+    newVals[j] += change;
+    total += change;
+  }
+
+  for (let i = 0; i < len; i++) {
+    marginOfErrors[i] = newVals[i] && Math.abs(orig[i] - newVals[i]) / orig[i];
+  }
+
+  for (let i = 0; i < len; i++) {
+    for (let j = 0; j < len; j++) {
+      if (j === i) continue;
+
+      const roundUpFactor =
+        errorFactor(orig[i], newVals[i] + 1) +
+        errorFactor(orig[j], newVals[j] - 1);
+      const roundDownFactor =
+        errorFactor(orig[i], newVals[i] - 1) +
+        errorFactor(orig[j], newVals[j] + 1);
+      const sumMargin = marginOfErrors[i] + marginOfErrors[j];
+
+      if (roundUpFactor < sumMargin) {
+        newVals[i] = newVals[i] + 1;
+        newVals[j] = newVals[j] - 1;
+        marginOfErrors[i] =
+          newVals[i] && Math.abs(orig[i] - newVals[i]) / orig[i];
+        marginOfErrors[j] =
+          newVals[j] && Math.abs(orig[j] - newVals[j]) / orig[j];
+      }
+
+      if (roundDownFactor < sumMargin) {
+        newVals[i] = newVals[i] - 1;
+        newVals[j] = newVals[j] + 1;
+        marginOfErrors[i] =
+          newVals[i] && Math.abs(orig[i] - newVals[i]) / orig[i];
+        marginOfErrors[j] =
+          newVals[j] && Math.abs(orig[j] - newVals[j]) / orig[j];
+      }
+    }
+  }
+
+  function errorFactor(oldNum: number, newNum: number) {
+    return Math.abs(oldNum - newNum) / oldNum;
+  }
+
+  return newVals;
+};

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

23371558

increased by11.5%

Number of package files

436

increased by2.35%

Lines of code

15082

increased by12.7%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

43

increased by2.38%

Number of low supply chain risk alerts

17

increased by6.25%

No dependency changes