@coorpacademy/components 10.22.7 → 10.22.10

package/lib/organism/review-stacked-slides/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.TOTAL_SLIDES_STACK = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _toString2 = _interopRequireDefault(require("lodash/fp/toString"));
+
+var _reviewSlide = _interopRequireDefault(require("../review-slide"));
+
+var _propTypes = _interopRequireDefault(require("./prop-types"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const TOTAL_SLIDES_STACK = 5;
+exports.TOTAL_SLIDES_STACK = TOTAL_SLIDES_STACK;
+const stylesByPosition = {
+  0: _style.default.position0,
+  1: _style.default.position1,
+  2: _style.default.position2,
+  3: _style.default.position3,
+  4: _style.default.position4
+};
+
+const getSlideAnimation = (action, position, hidden) => {
+  switch (action) {
+    case 'unstack':
+      return _style.default.slideOutHideAndIn;
+
+    case 'restack':
+      return _style.default.slideOutAndIn;
+
+    default:
+      return hidden ? _style.default.hiddenSlide : stylesByPosition[position];
+  }
+};
+
+const StackedSlides = ({
+  slides,
+  endReview,
+  validateButton,
+  correctionPopinProps
+}) => {
+  const stackedSlides = []; // eslint-disable-next-line fp/no-loops
+
+  for (let slideIndex = 0; slideIndex < TOTAL_SLIDES_STACK; slideIndex++) {
+    const slide = slides[(0, _toString2.default)(slideIndex)];
+    const {
+      animationType,
+      hidden,
+      position
+    } = slide;
+
+    const slideView = /*#__PURE__*/_react.default.createElement("div", {
+      key: `slide-${slideIndex}`,
+      "data-name": `slide-${slideIndex}`,
+      className: (0, _classnames.default)(_style.default.slideBase, getSlideAnimation(animationType, position, hidden), endReview ? _style.default.endReview : null)
+    }, /*#__PURE__*/_react.default.createElement(_reviewSlide.default, _extends({
+      slideIndex: (0, _toString2.default)(slideIndex),
+      slide,
+      validateButton,
+      correctionPopinProps
+    }, {
+      key: slideIndex
+    })));
+
+    stackedSlides.push(slideView);
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    key: "stacked-slides-container-y-overflow",
+    className: _style.default.stackedSlidesYAxisOverflowContainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    key: "stacked-slides-container",
+    "data-name": "stacked-slides-container",
+    className: _style.default.stackedSlidesContainer
+  }, stackedSlides));
+};
+
+StackedSlides.propTypes = process.env.NODE_ENV !== "production" ? _propTypes.default : {};
+var _default = StackedSlides;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/organism/review-stacked-slides/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/review-stacked-slides/index.js"],"names":["TOTAL_SLIDES_STACK","stylesByPosition","style","position0","position1","position2","position3","position4","getSlideAnimation","action","position","hidden","slideOutHideAndIn","slideOutAndIn","hiddenSlide","StackedSlides","slides","endReview","validateButton","correctionPopinProps","stackedSlides","slideIndex","slide","animationType","slideView","slideBase","push","stackedSlidesYAxisOverflowContainer","stackedSlidesContainer","propTypes"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,MAAMA,kBAAkB,GAAG,CAA3B;;AAEP,MAAMC,gBAAgB,GAAG;AACvB,KAAGC,eAAMC,SADc;AAEvB,KAAGD,eAAME,SAFc;AAGvB,KAAGF,eAAMG,SAHc;AAIvB,KAAGH,eAAMI,SAJc;AAKvB,KAAGJ,eAAMK;AALc,CAAzB;;AAQA,MAAMC,iBAAiB,GAAG,CAACC,MAAD,EAASC,QAAT,EAAmBC,MAAnB,KAA8B;AACtD,UAAQF,MAAR;AACE,SAAK,SAAL;AACE,aAAOP,eAAMU,iBAAb;;AACF,SAAK,SAAL;AACE,aAAOV,eAAMW,aAAb;;AACF;AACE,aAAOF,MAAM,GAAGT,eAAMY,WAAT,GAAuBb,gBAAgB,CAACS,QAAD,CAApD;AANJ;AAQD,CATD;;AAWA,MAAMK,aAAa,GAAG,CAAC;AAACC,EAAAA,MAAD;AAASC,EAAAA,SAAT;AAAoBC,EAAAA,cAApB;AAAoCC,EAAAA;AAApC,CAAD,KAA+D;AACnF,QAAMC,aAAa,GAAG,EAAtB,CADmF,CAEnF;;AACA,OAAK,IAAIC,UAAU,GAAG,CAAtB,EAAyBA,UAAU,GAAGrB,kBAAtC,EAA0DqB,UAAU,EAApE,EAAwE;AACtE,UAAMC,KAAK,GAAGN,MAAM,CAAC,wBAAUK,UAAV,CAAD,CAApB;AACA,UAAM;AAACE,MAAAA,aAAD;AAAgBZ,MAAAA,MAAhB;AAAwBD,MAAAA;AAAxB,QAAoCY,KAA1C;;AAEA,UAAME,SAAS,gBACb;AACE,MAAA,GAAG,EAAG,SAAQH,UAAW,EAD3B;AAEE,mBAAY,SAAQA,UAAW,EAFjC;AAGE,MAAA,SAAS,EAAE,yBACTnB,eAAMuB,SADG,EAETjB,iBAAiB,CAACe,aAAD,EAAgBb,QAAhB,EAA0BC,MAA1B,CAFR,EAGTM,SAAS,GAAGf,eAAMe,SAAT,GAAqB,IAHrB;AAHb,oBASE,6BAAC,oBAAD,WACM;AACFI,MAAAA,UAAU,EAAE,wBAAUA,UAAV,CADV;AAEFC,MAAAA,KAFE;AAGFJ,MAAAA,cAHE;AAIFC,MAAAA;AAJE,KADN;AAOE,MAAA,GAAG,EAAEE;AAPP,OATF,CADF;;AAqBAD,IAAAA,aAAa,CAACM,IAAd,CAAmBF,SAAnB;AACD;;AAED,sBACE;AACE,IAAA,GAAG,EAAC,qCADN;AAEE,IAAA,SAAS,EAAEtB,eAAMyB;AAFnB,kBAIE;AACE,IAAA,GAAG,EAAC,0BADN;AAEE,iBAAU,0BAFZ;AAGE,IAAA,SAAS,EAAEzB,eAAM0B;AAHnB,KAKGR,aALH,CAJF,CADF;AAcD,CA7CD;;AA+CAL,aAAa,CAACc,SAAd,2CAA0BA,kBAA1B;eAEed,a","sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport _toString from 'lodash/fp/toString';\nimport ReviewSlide from '../review-slide';\nimport propTypes from './prop-types';\nimport style from './style.css';\n\nexport const TOTAL_SLIDES_STACK = 5;\n\nconst stylesByPosition = {\n  0: style.position0,\n  1: style.position1,\n  2: style.position2,\n  3: style.position3,\n  4: style.position4\n};\n\nconst getSlideAnimation = (action, position, hidden) => {\n  switch (action) {\n    case 'unstack':\n      return style.slideOutHideAndIn;\n    case 'restack':\n      return style.slideOutAndIn;\n    default:\n      return hidden ? style.hiddenSlide : stylesByPosition[position];\n  }\n};\n\nconst StackedSlides = ({slides, endReview, validateButton, correctionPopinProps}) => {\n  const stackedSlides = [];\n  // eslint-disable-next-line fp/no-loops\n  for (let slideIndex = 0; slideIndex < TOTAL_SLIDES_STACK; slideIndex++) {\n    const slide = slides[_toString(slideIndex)];\n    const {animationType, hidden, position} = slide;\n\n    const slideView = (\n      <div\n        key={`slide-${slideIndex}`}\n        data-name={`slide-${slideIndex}`}\n        className={classnames(\n          style.slideBase,\n          getSlideAnimation(animationType, position, hidden),\n          endReview ? style.endReview : null\n        )}\n      >\n        <ReviewSlide\n          {...{\n            slideIndex: _toString(slideIndex),\n            slide,\n            validateButton,\n            correctionPopinProps\n          }}\n          key={slideIndex}\n        />\n      </div>\n    );\n    stackedSlides.push(slideView);\n  }\n\n  return (\n    <div\n      key=\"stacked-slides-container-y-overflow\"\n      className={style.stackedSlidesYAxisOverflowContainer}\n    >\n      <div\n        key=\"stacked-slides-container\"\n        data-name=\"stacked-slides-container\"\n        className={style.stackedSlidesContainer}\n      >\n        {stackedSlides}\n      </div>\n    </div>\n  );\n};\n\nStackedSlides.propTypes = propTypes;\n\nexport default StackedSlides;\n"],"file":"index.js"}

package/lib/organism/review-stacked-slides/prop-types.js

@@ -0,0 +1,29 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _propTypes2 = _interopRequireWildcard(require("../review-slide/prop-types"));
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  validateButton: _propTypes2.default.validateButton,
+  correctionPopinProps: _propTypes2.default.correctionPopinProps,
+  slides: _propTypes.default.shape({
+    '0': _propTypes2.SlideProp,
+    '1': _propTypes2.SlideProp,
+    '2': _propTypes2.SlideProp,
+    '3': _propTypes2.SlideProp,
+    '4': _propTypes2.SlideProp
+  }),
+  endReview: _propTypes.default.bool
+};
+exports.default = _default;
+//# sourceMappingURL=prop-types.js.map

package/lib/organism/review-stacked-slides/prop-types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/organism/review-stacked-slides/prop-types.js"],"names":["validateButton","ReviewSlideProps","correctionPopinProps","slides","PropTypes","shape","SlideProp","endReview","bool"],"mappings":";;;;;AAAA;;AACA;;;;;;;;eAEe;AACbA,EAAAA,cAAc,EAAEC,oBAAiBD,cADpB;AAEbE,EAAAA,oBAAoB,EAAED,oBAAiBC,oBAF1B;AAGbC,EAAAA,MAAM,EAAEC,mBAAUC,KAAV,CAAgB;AACtB,SAAKC,qBADiB;AAEtB,SAAKA,qBAFiB;AAGtB,SAAKA,qBAHiB;AAItB,SAAKA,qBAJiB;AAKtB,SAAKA;AALiB,GAAhB,CAHK;AAUbC,EAAAA,SAAS,EAAEH,mBAAUI;AAVR,C","sourcesContent":["import PropTypes from 'prop-types';\nimport ReviewSlideProps, {SlideProp} from '../review-slide/prop-types';\n\nexport default {\n  validateButton: ReviewSlideProps.validateButton,\n  correctionPopinProps: ReviewSlideProps.correctionPopinProps,\n  slides: PropTypes.shape({\n    '0': SlideProp,\n    '1': SlideProp,\n    '2': SlideProp,\n    '3': SlideProp,\n    '4': SlideProp\n  }),\n  endReview: PropTypes.bool\n};\n"],"file":"prop-types.js"}

package/lib/organism/review-stacked-slides/style.css

@@ -0,0 +1,174 @@
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value tablet from breakpoints;
+
+.stackedSlidesYAxisOverflowContainer {
+  width: 100%;
+  padding-top: 20px;
+  height: 100%;
+  min-height: 870px;
+  /* --- ie11 fallback --- */
+  overflow-y: hidden;
+  /* --------------------- */
+  overflow-y: clip;
+  overflow-x: visible;
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.stackedSlidesContainer {
+  position: relative;
+  padding-top: 20px;
+  height: 788px;
+  max-width: 1240px;
+  width: 85%;
+  align-self: center;
+}
+
+.slideBase {
+  box-shadow: 0px 4px 58px rgba(0, 0, 0, 0.05);
+  background: white;
+  height: 706px;
+  border-radius: 24px;
+  overflow: hidden;
+  position: absolute;
+
+  transition: transform 0.5s ease-in;
+  pointer-events: none;
+}
+
+.slideBase.position0 {
+  pointer-events: auto;
+}
+
+.position0 {
+  z-index: 50;
+  width: 100%;
+  transform: translate(0, 0);
+  transition: transform 0.5s ease-in;
+}
+
+.position1 {
+  z-index: 45;
+  width: 98%;
+  transform: translate(0.8%, -8px);
+  transition: transform 0.5s ease-in;
+}
+
+.position2 {
+  z-index: 40;
+  width: 96%;
+  transform: translate(1.6%, -16px);
+  transition: transform 0.5s ease-in;
+}
+
+.position3 {
+  z-index: 35;
+  width: 94%;
+  transform: translate(2.4%, -24px);
+  transition: transform 0.5 ease-in;
+}
+
+.position4 {
+  z-index: 30;
+  width: 92%;
+  transform: translate(3.2%, -32px);
+  transition: transform 0.5 ease-in;
+}
+
+@keyframes slideOutHideAndSlideIn {
+  0% {
+    width: 100%;
+    z-index: 55;
+    transform: translate(0, 0);
+  }
+  50% {
+    width: 100%;
+    z-index: 50;
+    transform: translate(0, 1000px);
+    opacity: 1;
+  }
+  51% {
+    z-index: 30;
+    opacity: 0;
+  }
+  100% {
+    z-index: 30;
+    transform: translate(3.2%, -32px);
+    opacity: 0;
+  }
+}
+
+@keyframes slideOutAndIn {
+  0% {
+    z-index: 55;
+    transform: translate(0, 0);
+  }
+  50% {
+    width: 100%;
+    z-index: 50;
+    transform: translate(0, 1000px);
+  }
+  60% {
+    width: 92%;
+    z-index: 30;
+    transform: translate(3.2%, 900px);
+  }
+  100% {
+    z-index: 30;
+    width: 92%;
+    transform: translate(3.2%, -32px);
+  }
+}
+
+.slideOutHideAndIn {
+  pointer-events: none;
+  animation: slideOutHideAndSlideIn 3s ease forwards;
+}
+
+.slideOutAndIn {
+  pointer-events: none;
+  animation: slideOutAndIn 3s ease forwards;
+}
+
+.hiddenSlide {
+  display: none;
+}
+
+@keyframes slideOut {
+  0% {}
+  90% {
+    transform: translate(0, 1000px);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+
+.endReview {
+  pointer-events: none;
+  animation: slideOut 2.5s ease forwards;
+}
+
+@media tablet {
+  .stackedSlidesContainer {
+    height: 638px;
+    max-width: 960px;
+  }
+
+  .slideBase {
+    height: 606px;
+  }
+}
+
+@media mobile {
+  .stackedSlidesContainer {
+    height: 670px;
+    max-width: 335px;
+  }
+
+  .slideBase {
+    height: 654px;
+  }
+}

package/lib/template/app-player/player/slides/header/learner.css

@@ -88,6 +88,10 @@
   margin-right: 10px;
 }
 
+.innerHTML {
+  composes: innerHTML from '../../../../../atom/label/style.css';
+}
+
 @media mobile {
   .contentWrapper {
     max-width: 90%;

package/lib/template/app-player/player/slides/header/learner.js

@@ -17,8 +17,6 @@ var _link = _interopRequireDefault(require("../../../../../atom/link"));
 
 var _provider = _interopRequireDefault(require("../../../../../atom/provider"));
 
-var _style = require("../../../../../atom/label/style.css");
-
 var _learner = _interopRequireDefault(require("./learner.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -47,7 +45,7 @@ const Content = ({
     }
   }, details), /*#__PURE__*/_react.default.createElement("span", {
     "data-name": "contentTitle",
-    className: (0, _classnames.default)(_learner.default.contentTitle, _style.innerHTML) // eslint-disable-next-line react/no-danger
+    className: (0, _classnames.default)(_learner.default.contentTitle, _learner.default.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: title
@@ -72,7 +70,7 @@ const Subcontent = ({
 }, /*#__PURE__*/_react.default.createElement("div", {
   className: _learner.default.subcontentDetails
 }, details), /*#__PURE__*/_react.default.createElement("div", {
-  className: (0, _classnames.default)(_learner.default.subcontentTitle, _style.innerHTML) // eslint-disable-next-line react/no-danger
+  className: (0, _classnames.default)(_learner.default.subcontentTitle, _learner.default.innerHTML) // eslint-disable-next-line react/no-danger
   ,
   dangerouslySetInnerHTML: {
     __html: title

package/lib/template/app-player/player/slides/header/learner.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["Content","onClick","title","details","context","skin","primarySkinColor","style","contentWrapper","backIcon","content","contentDetails","color","contentTitle","innerHTML","__html","contextTypes","Provider","childContextTypes","propTypes","Link","PropTypes","string","isRequired","Subcontent","subcontent","subcontentDetails","subcontentTitle","LearnerHeader","props","wrapper","shape"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAG,CAAC;AAACC,EAAAA,OAAD;AAAUC,EAAAA,KAAV;AAAiBC,EAAAA;AAAjB,CAAD,EAA4BC,OAA5B,KAAwC;AACtD,QAAM;AAACC,IAAAA;AAAD,MAASD,OAAf;AACA,QAAME,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBD,IAAtB,CAAzB;AAEA,sBACE,6BAAC,aAAD;AAAM,IAAA,OAAO,EAAEJ,OAAf;AAAwB,IAAA,SAAS,EAAEM,iBAAMC;AAAzC,kBACE,6BAAC,6CAAD;AAAU,IAAA,SAAS,EAAED,iBAAME,QAA3B;AAAqC,IAAA,KAAK,EAAC;AAA3C,IADF,eAEE;AAAK,IAAA,SAAS,EAAEF,iBAAMG;AAAtB,kBACE;AACE,IAAA,SAAS,EAAEH,iBAAMI,cADnB;AAEE,IAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEN;AADF;AAFT,KAMGH,OANH,CADF,eAUE;AACE,iBAAU,cADZ;AAEE,IAAA,SAAS,EAAE,yBAAWI,iBAAMM,YAAjB,EAA+BC,gBAA/B,CAFb,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEb;AAAT;AAJ3B,IAVF,CAFF,CADF;AAsBD,CA1BD;;AA4BAF,OAAO,CAACgB,YAAR,GAAuB;AACrBX,EAAAA,IAAI,EAAEY,kBAASC,iBAAT,CAA2Bb;AADZ,CAAvB;AAIAL,OAAO,CAACmB,SAAR,2CAAoB;AAClBlB,EAAAA,OAAO,EAAEmB,cAAKD,SAAL,CAAelB,OADN;AAElBC,EAAAA,KAAK,EAAEmB,mBAAUC,MAAV,CAAiBC,UAFN;AAGlBpB,EAAAA,OAAO,EAAEkB,mBAAUC;AAHD,CAApB;;AAMA,MAAME,UAAU,GAAG,CAAC;AAACtB,EAAAA,KAAD;AAAQC,EAAAA;AAAR,CAAD,EAAmBC,OAAnB,kBACjB;AAAK,EAAA,SAAS,EAAEG,iBAAMkB;AAAtB,gBACE;AAAK,EAAA,SAAS,EAAElB,iBAAMmB;AAAtB,GAA0CvB,OAA1C,CADF,eAEE;AACE,EAAA,SAAS,EAAE,yBAAWI,iBAAMoB,eAAjB,EAAkCb,gBAAlC,CADb,CAEE;AAFF;AAGE,EAAA,uBAAuB,EAAE;AAACC,IAAAA,MAAM,EAAEb;AAAT;AAH3B,EAFF,CADF;;AAWAsB,UAAU,CAACL,SAAX,2CAAuB;AACrBjB,EAAAA,KAAK,EAAEmB,mBAAUC,MAAV,CAAiBC,UADH;AAErBpB,EAAAA,OAAO,EAAEkB,mBAAUC;AAFE,CAAvB;;AAKA,MAAMM,aAAa,GAAG,CAACC,KAAD,EAAQzB,OAAR,KAAoB;AACxC,QAAM;AAACM,IAAAA,OAAD;AAAUe,IAAAA;AAAV,MAAwBI,KAA9B;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEtB,iBAAMuB;AAAtB,kBACE,6BAAC,OAAD,EAAapB,OAAb,CADF,eAEE,6BAAC,UAAD,EAAgBe,UAAhB,CAFF,CADF;AAMD,CATD;;AAWAG,aAAa,CAACT,SAAd,2CAA0B;AACxBT,EAAAA,OAAO,EAAEW,mBAAUU,KAAV,CAAgB/B,OAAO,CAACmB,SAAxB,EAAmCI,UADpB;AAExBE,EAAAA,UAAU,EAAEJ,mBAAUU,KAAV,CAAgBP,UAAU,CAACL,SAA3B,EAAsCI;AAF1B,CAA1B;eAKeK,a","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport Provider from '../../../../../atom/provider';\nimport {innerHTML} from '../../../../../atom/label/style.css';\nimport style from './learner.css';\n\nconst Content = ({onClick, title, details}, context) => {\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <Link onClick={onClick} className={style.contentWrapper}>\n      <BackIcon className={style.backIcon} color=\"inherit\" />\n      <div className={style.content}>\n        <div\n          className={style.contentDetails}\n          style={{\n            color: primarySkinColor\n          }}\n        >\n          {details}\n        </div>\n\n        <span\n          data-name=\"contentTitle\"\n          className={classnames(style.contentTitle, innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n      </div>\n    </Link>\n  );\n};\n\nContent.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nContent.propTypes = {\n  onClick: Link.propTypes.onClick,\n  title: PropTypes.string.isRequired,\n  details: PropTypes.string\n};\n\nconst Subcontent = ({title, details}, context) => (\n  <div className={style.subcontent}>\n    <div className={style.subcontentDetails}>{details}</div>\n    <div\n      className={classnames(style.subcontentTitle, innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  </div>\n);\n\nSubcontent.propTypes = {\n  title: PropTypes.string.isRequired,\n  details: PropTypes.string\n};\n\nconst LearnerHeader = (props, context) => {\n  const {content, subcontent} = props;\n\n  return (\n    <div className={style.wrapper}>\n      <Content {...content} />\n      <Subcontent {...subcontent} />\n    </div>\n  );\n};\n\nLearnerHeader.propTypes = {\n  content: PropTypes.shape(Content.propTypes).isRequired,\n  subcontent: PropTypes.shape(Subcontent.propTypes).isRequired\n};\n\nexport default LearnerHeader;\n"],"file":"learner.js"}
+{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/learner.js"],"names":["Content","onClick","title","details","context","skin","primarySkinColor","style","contentWrapper","backIcon","content","contentDetails","color","contentTitle","innerHTML","__html","contextTypes","Provider","childContextTypes","propTypes","Link","PropTypes","string","isRequired","Subcontent","subcontent","subcontentDetails","subcontentTitle","LearnerHeader","props","wrapper","shape"],"mappings":";;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAG,CAAC;AAACC,EAAAA,OAAD;AAAUC,EAAAA,KAAV;AAAiBC,EAAAA;AAAjB,CAAD,EAA4BC,OAA5B,KAAwC;AACtD,QAAM;AAACC,IAAAA;AAAD,MAASD,OAAf;AACA,QAAME,gBAAgB,GAAG,mBAAI,gBAAJ,EAAsBD,IAAtB,CAAzB;AAEA,sBACE,6BAAC,aAAD;AAAM,IAAA,OAAO,EAAEJ,OAAf;AAAwB,IAAA,SAAS,EAAEM,iBAAMC;AAAzC,kBACE,6BAAC,6CAAD;AAAU,IAAA,SAAS,EAAED,iBAAME,QAA3B;AAAqC,IAAA,KAAK,EAAC;AAA3C,IADF,eAEE;AAAK,IAAA,SAAS,EAAEF,iBAAMG;AAAtB,kBACE;AACE,IAAA,SAAS,EAAEH,iBAAMI,cADnB;AAEE,IAAA,KAAK,EAAE;AACLC,MAAAA,KAAK,EAAEN;AADF;AAFT,KAMGH,OANH,CADF,eAUE;AACE,iBAAU,cADZ;AAEE,IAAA,SAAS,EAAE,yBAAWI,iBAAMM,YAAjB,EAA+BN,iBAAMO,SAArC,CAFb,CAGE;AAHF;AAIE,IAAA,uBAAuB,EAAE;AAACC,MAAAA,MAAM,EAAEb;AAAT;AAJ3B,IAVF,CAFF,CADF;AAsBD,CA1BD;;AA4BAF,OAAO,CAACgB,YAAR,GAAuB;AACrBX,EAAAA,IAAI,EAAEY,kBAASC,iBAAT,CAA2Bb;AADZ,CAAvB;AAIAL,OAAO,CAACmB,SAAR,2CAAoB;AAClBlB,EAAAA,OAAO,EAAEmB,cAAKD,SAAL,CAAelB,OADN;AAElBC,EAAAA,KAAK,EAAEmB,mBAAUC,MAAV,CAAiBC,UAFN;AAGlBpB,EAAAA,OAAO,EAAEkB,mBAAUC;AAHD,CAApB;;AAMA,MAAME,UAAU,GAAG,CAAC;AAACtB,EAAAA,KAAD;AAAQC,EAAAA;AAAR,CAAD,EAAmBC,OAAnB,kBACjB;AAAK,EAAA,SAAS,EAAEG,iBAAMkB;AAAtB,gBACE;AAAK,EAAA,SAAS,EAAElB,iBAAMmB;AAAtB,GAA0CvB,OAA1C,CADF,eAEE;AACE,EAAA,SAAS,EAAE,yBAAWI,iBAAMoB,eAAjB,EAAkCpB,iBAAMO,SAAxC,CADb,CAEE;AAFF;AAGE,EAAA,uBAAuB,EAAE;AAACC,IAAAA,MAAM,EAAEb;AAAT;AAH3B,EAFF,CADF;;AAWAsB,UAAU,CAACL,SAAX,2CAAuB;AACrBjB,EAAAA,KAAK,EAAEmB,mBAAUC,MAAV,CAAiBC,UADH;AAErBpB,EAAAA,OAAO,EAAEkB,mBAAUC;AAFE,CAAvB;;AAKA,MAAMM,aAAa,GAAG,CAACC,KAAD,EAAQzB,OAAR,KAAoB;AACxC,QAAM;AAACM,IAAAA,OAAD;AAAUe,IAAAA;AAAV,MAAwBI,KAA9B;AAEA,sBACE;AAAK,IAAA,SAAS,EAAEtB,iBAAMuB;AAAtB,kBACE,6BAAC,OAAD,EAAapB,OAAb,CADF,eAEE,6BAAC,UAAD,EAAgBe,UAAhB,CAFF,CADF;AAMD,CATD;;AAWAG,aAAa,CAACT,SAAd,2CAA0B;AACxBT,EAAAA,OAAO,EAAEW,mBAAUU,KAAV,CAAgB/B,OAAO,CAACmB,SAAxB,EAAmCI,UADpB;AAExBE,EAAAA,UAAU,EAAEJ,mBAAUU,KAAV,CAAgBP,UAAU,CAACL,SAA3B,EAAsCI;AAF1B,CAA1B;eAKeK,a","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {get} from 'lodash/fp';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport Provider from '../../../../../atom/provider';\nimport style from './learner.css';\n\nconst Content = ({onClick, title, details}, context) => {\n  const {skin} = context;\n  const primarySkinColor = get('common.primary', skin);\n\n  return (\n    <Link onClick={onClick} className={style.contentWrapper}>\n      <BackIcon className={style.backIcon} color=\"inherit\" />\n      <div className={style.content}>\n        <div\n          className={style.contentDetails}\n          style={{\n            color: primarySkinColor\n          }}\n        >\n          {details}\n        </div>\n\n        <span\n          data-name=\"contentTitle\"\n          className={classnames(style.contentTitle, style.innerHTML)}\n          // eslint-disable-next-line react/no-danger\n          dangerouslySetInnerHTML={{__html: title}}\n        />\n      </div>\n    </Link>\n  );\n};\n\nContent.contextTypes = {\n  skin: Provider.childContextTypes.skin\n};\n\nContent.propTypes = {\n  onClick: Link.propTypes.onClick,\n  title: PropTypes.string.isRequired,\n  details: PropTypes.string\n};\n\nconst Subcontent = ({title, details}, context) => (\n  <div className={style.subcontent}>\n    <div className={style.subcontentDetails}>{details}</div>\n    <div\n      className={classnames(style.subcontentTitle, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  </div>\n);\n\nSubcontent.propTypes = {\n  title: PropTypes.string.isRequired,\n  details: PropTypes.string\n};\n\nconst LearnerHeader = (props, context) => {\n  const {content, subcontent} = props;\n\n  return (\n    <div className={style.wrapper}>\n      <Content {...content} />\n      <Subcontent {...subcontent} />\n    </div>\n  );\n};\n\nLearnerHeader.propTypes = {\n  content: PropTypes.shape(Content.propTypes).isRequired,\n  subcontent: PropTypes.shape(Subcontent.propTypes).isRequired\n};\n\nexport default LearnerHeader;\n"],"file":"learner.js"}

package/lib/template/app-player/player/slides/header/microlearning.css

@@ -37,6 +37,10 @@
   max-width: 100%;
 }
 
+.innerHTML {
+  composes: innerHTML from '../../../../../atom/label/style.css';
+}
+
 @media mobile {
   .content {
     max-width: none;

package/lib/template/app-player/player/slides/header/microlearning.js

@@ -13,8 +13,6 @@ var _novaIcons = require("@coorpacademy/nova-icons");
 
 var _link = _interopRequireDefault(require("../../../../../atom/link"));
 
-var _style = require("../../../../../atom/label/style.css");
-
 var _microlearning = _interopRequireDefault(require("./microlearning.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,7 +28,7 @@ const Content = ({
   color: "inherit"
 }), /*#__PURE__*/_react.default.createElement("div", {
   "data-name": "contentTitle",
-  className: (0, _classnames.default)(_microlearning.default.contentTitle, _style.innerHTML) // eslint-disable-next-line react/no-danger
+  className: (0, _classnames.default)(_microlearning.default.contentTitle, _microlearning.default.innerHTML) // eslint-disable-next-line react/no-danger
   ,
   dangerouslySetInnerHTML: {
     __html: title

package/lib/template/app-player/player/slides/header/microlearning.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/microlearning.js"],"names":["Content","onClick","title","context","style","content","backIcon","contentTitle","innerHTML","__html","propTypes","Link","PropTypes","node","MicrolearningHeader","props","shape","string","isRequired"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAG,CAAC;AAACC,EAAAA,OAAD;AAAUC,EAAAA;AAAV,CAAD,EAAmBC,OAAnB,kBACd,6BAAC,aAAD;AAAM,EAAA,OAAO,EAAEF,OAAf;AAAwB,EAAA,SAAS,EAAEG,uBAAMC;AAAzC,gBACE,6BAAC,6CAAD;AAAU,EAAA,SAAS,EAAED,uBAAME,QAA3B;AAAqC,EAAA,KAAK,EAAC;AAA3C,EADF,eAEE;AACE,eAAU,cADZ;AAEE,EAAA,SAAS,EAAE,yBAAWF,uBAAMG,YAAjB,EAA+BC,gBAA/B,CAFb,CAGE;AAHF;AAIE,EAAA,uBAAuB,EAAE;AAACC,IAAAA,MAAM,EAAEP;AAAT;AAJ3B,EAFF,CADF;;AAYAF,OAAO,CAACU,SAAR,2CAAoB;AAClBT,EAAAA,OAAO,EAAEU,cAAKD,SAAL,CAAeT,OADN;AAElBC,EAAAA,KAAK,EAAEU,mBAAUC;AAFC,CAApB;;AAKA,MAAMC,mBAAmB,GAAG,CAACC,KAAD,EAAQZ,OAAR,KAAoB;AAC9C,QAAM;AAACE,IAAAA;AAAD,MAAYU,KAAlB;AACA,sBAAO,6BAAC,OAAD,EAAaV,OAAb,CAAP;AACD,CAHD;;AAKAS,mBAAmB,CAACJ,SAApB,2CAAgC;AAC9BL,EAAAA,OAAO,EAAEO,mBAAUI,KAAV,CAAgB;AACvBf,IAAAA,OAAO,EAAEU,cAAKD,SAAL,CAAeT,OADD;AAEvBC,IAAAA,KAAK,EAAEU,mBAAUK,MAAV,CAAiBC;AAFD,GAAhB;AADqB,CAAhC;eAOeJ,mB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport {innerHTML} from '../../../../../atom/label/style.css';\nimport style from './microlearning.css';\n\nconst Content = ({onClick, title}, context) => (\n  <Link onClick={onClick} className={style.content}>\n    <BackIcon className={style.backIcon} color=\"inherit\" />\n    <div\n      data-name=\"contentTitle\"\n      className={classnames(style.contentTitle, innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  </Link>\n);\n\nContent.propTypes = {\n  onClick: Link.propTypes.onClick,\n  title: PropTypes.node\n};\n\nconst MicrolearningHeader = (props, context) => {\n  const {content} = props;\n  return <Content {...content} />;\n};\n\nMicrolearningHeader.propTypes = {\n  content: PropTypes.shape({\n    onClick: Link.propTypes.onClick,\n    title: PropTypes.string.isRequired\n  })\n};\n\nexport default MicrolearningHeader;\n"],"file":"microlearning.js"}
+{"version":3,"sources":["../../../../../../src/template/app-player/player/slides/header/microlearning.js"],"names":["Content","onClick","title","context","style","content","backIcon","contentTitle","innerHTML","__html","propTypes","Link","PropTypes","node","MicrolearningHeader","props","shape","string","isRequired"],"mappings":";;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;AAEA,MAAMA,OAAO,GAAG,CAAC;AAACC,EAAAA,OAAD;AAAUC,EAAAA;AAAV,CAAD,EAAmBC,OAAnB,kBACd,6BAAC,aAAD;AAAM,EAAA,OAAO,EAAEF,OAAf;AAAwB,EAAA,SAAS,EAAEG,uBAAMC;AAAzC,gBACE,6BAAC,6CAAD;AAAU,EAAA,SAAS,EAAED,uBAAME,QAA3B;AAAqC,EAAA,KAAK,EAAC;AAA3C,EADF,eAEE;AACE,eAAU,cADZ;AAEE,EAAA,SAAS,EAAE,yBAAWF,uBAAMG,YAAjB,EAA+BH,uBAAMI,SAArC,CAFb,CAGE;AAHF;AAIE,EAAA,uBAAuB,EAAE;AAACC,IAAAA,MAAM,EAAEP;AAAT;AAJ3B,EAFF,CADF;;AAYAF,OAAO,CAACU,SAAR,2CAAoB;AAClBT,EAAAA,OAAO,EAAEU,cAAKD,SAAL,CAAeT,OADN;AAElBC,EAAAA,KAAK,EAAEU,mBAAUC;AAFC,CAApB;;AAKA,MAAMC,mBAAmB,GAAG,CAACC,KAAD,EAAQZ,OAAR,KAAoB;AAC9C,QAAM;AAACE,IAAAA;AAAD,MAAYU,KAAlB;AACA,sBAAO,6BAAC,OAAD,EAAaV,OAAb,CAAP;AACD,CAHD;;AAKAS,mBAAmB,CAACJ,SAApB,2CAAgC;AAC9BL,EAAAA,OAAO,EAAEO,mBAAUI,KAAV,CAAgB;AACvBf,IAAAA,OAAO,EAAEU,cAAKD,SAAL,CAAeT,OADD;AAEvBC,IAAAA,KAAK,EAAEU,mBAAUK,MAAV,CAAiBC;AAFD,GAAhB;AADqB,CAAhC;eAOeJ,mB","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {NovaCompositionNavigationArrowLeft as BackIcon} from '@coorpacademy/nova-icons';\nimport Link from '../../../../../atom/link';\nimport style from './microlearning.css';\n\nconst Content = ({onClick, title}, context) => (\n  <Link onClick={onClick} className={style.content}>\n    <BackIcon className={style.backIcon} color=\"inherit\" />\n    <div\n      data-name=\"contentTitle\"\n      className={classnames(style.contentTitle, style.innerHTML)}\n      // eslint-disable-next-line react/no-danger\n      dangerouslySetInnerHTML={{__html: title}}\n    />\n  </Link>\n);\n\nContent.propTypes = {\n  onClick: Link.propTypes.onClick,\n  title: PropTypes.node\n};\n\nconst MicrolearningHeader = (props, context) => {\n  const {content} = props;\n  return <Content {...content} />;\n};\n\nMicrolearningHeader.propTypes = {\n  content: PropTypes.shape({\n    onClick: Link.propTypes.onClick,\n    title: PropTypes.string.isRequired\n  })\n};\n\nexport default MicrolearningHeader;\n"],"file":"microlearning.js"}

package/lib/template/app-player/player/slides/index.js

@@ -53,13 +53,11 @@ var _audio = _interopRequireDefault(require("../../../../molecule/audio"));
 
 var _resourceBrowser = _interopRequireDefault(require("../../../../organism/resource-browser"));
 
-var _style = require("../../../../atom/label/style.css");
-
 var _footer = _interopRequireDefault(require("./footer"));
 
 var _header = _interopRequireDefault(require("./header"));
 
-var _style2 = _interopRequireDefault(require("./style.css"));
+var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -71,7 +69,7 @@ const MediaView = ({
   media
 }) => {
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.contextMedia
+    className: _style.default.contextMedia
   }, /*#__PURE__*/_react.default.createElement(_picture.default, {
     src: media
   }));
@@ -91,7 +89,7 @@ const ClueContent = (props, context) => {
     onClickSeeClue
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.clueWrapper
+    className: _style.default.clueWrapper
   }, /*#__PURE__*/_react.default.createElement(_clue.default, {
     text: text,
     starsDiff: starsDiff,
@@ -118,7 +116,7 @@ const Bar = ({
 
   const stepWidth = _current / total * 100;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.stepBar,
+    className: _style.default.stepBar,
     style: {
       backgroundColor: color,
       width: `${stepWidth}%`
@@ -140,13 +138,13 @@ const Step = ({
     "data-name": "step"
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "counter",
-    className: _style2.default.stepCount
+    className: _style.default.stepCount
   }, /*#__PURE__*/_react.default.createElement("span", {
     style: {
       color
     }
   }, step.current), "/", step.total), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.stepWrapper
+    className: _style.default.stepWrapper
   }, /*#__PURE__*/_react.default.createElement(_swapper.default, _extends({}, step, {
     color: color,
     current: step.current - 1
@@ -173,7 +171,7 @@ const NewMedia = (props, context) => {
   } = props;
   const current = (0, _get2.default)('current', step);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_style2.default.guideWrapper} ${_style2.default.newMedia}`,
+    className: `${_style.default.guideWrapper} ${_style.default.newMedia}`,
     onClick: onClick,
     "data-name": "newMedia"
   }, /*#__PURE__*/_react.default.createElement("span", null, translate(step === null || current === 1 ? 'See lesson' : 'New media')));
@@ -195,7 +193,7 @@ const ReviewLesson = (props, context) => {
     onClick
   } = props;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: `${_style2.default.guideWrapper} ${_style2.default.reviewLesson}`,
+    className: `${_style.default.guideWrapper} ${_style.default.reviewLesson}`,
     onClick: onClick,
     "data-name": "reviewLesson"
   }, /*#__PURE__*/_react.default.createElement("span", null, translate('Review lesson')));
@@ -232,11 +230,11 @@ const MediaContent = (props, context) => {
     count: Math.abs(starsDiff)
   });
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.resourcesWrapper
+    className: _style.default.resourcesWrapper
   }, /*#__PURE__*/_react.default.createElement(_resourceBrowser.default, {
     resources: resources
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.stars
+    className: _style.default.stars
   }, starsToWin));
 };
 
@@ -303,7 +301,7 @@ const ContextMedia = ({
   const ContentType = CONTEXT_MEDIA[media.type];
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "contextMedia",
-    className: (0, _classnames.default)(_style2.default.contextWrapper, media.type === 'pdf' ? _style2.default.contextPdfWrapper : null, media.type === 'audio' ? _style2.default.contextAudioWrapper : null)
+    className: (0, _classnames.default)(_style.default.contextWrapper, media.type === 'pdf' ? _style.default.contextPdfWrapper : null, media.type === 'audio' ? _style.default.contextAudioWrapper : null)
   }, /*#__PURE__*/_react.default.createElement(ContentType, media));
 };
 
@@ -326,14 +324,14 @@ const ContextContent = ({
   const paragraphs = descriptionParagraphs.map((paragraph, index) => /*#__PURE__*/_react.default.createElement("p", {
     key: index,
     "data-name": "contextDescription",
-    className: (0, _classnames.default)(_style2.default.contextDescription, _style.innerHTML) // eslint-disable-next-line react/no-danger
+    className: (0, _classnames.default)(_style.default.contextDescription, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: paragraph
     }
   }));
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.context
+    className: _style.default.context
   }, (0, _get2.default)('media.type', slideContext) ? /*#__PURE__*/_react.default.createElement(ContextMedia, {
     media: slideContext.media
   }) : null, paragraphs);
@@ -356,7 +354,7 @@ const CONTENT_TYPE = {
 const Help = ({
   help
 }) => /*#__PURE__*/_react.default.createElement("div", {
-  className: (0, _classnames.default)(_style2.default.helpView, _style.innerHTML) // eslint-disable-next-line react/no-danger
+  className: (0, _classnames.default)(_style.default.helpView, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
   ,
   dangerouslySetInnerHTML: {
     __html: help
@@ -375,9 +373,9 @@ const ValidateButton = ({
   }
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.ctaWrapper
+    className: _style.default.ctaWrapper
   }, /*#__PURE__*/_react.default.createElement(_cta.default, _extends({}, cta, {
-    className: _style2.default.cta
+    className: _style.default.cta
   })));
 };
 
@@ -398,7 +396,7 @@ const ContentLayout = (props, context) => {
     slideContext
   } = props;
   const ContentType = CONTENT_TYPE[selectedTab];
-  const noPaddingRessources = ContentType === MediaContent ? `${_style2.default.contentWrapperNoPadding}` : `${_style2.default.contentWrapper}`;
+  const noPaddingRessources = ContentType === MediaContent ? `${_style.default.contentWrapperNoPadding}` : `${_style.default.contentWrapper}`;
   return /*#__PURE__*/_react.default.createElement("div", {
     className: noPaddingRessources,
     style: {
@@ -406,7 +404,7 @@ const ContentLayout = (props, context) => {
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
     "data-name": "question",
-    className: (0, _classnames.default)(selectedTab === 'context' ? _style2.default.contextTitle : _style2.default.question, _style.innerHTML) // eslint-disable-next-line react/no-danger
+    className: (0, _classnames.default)(selectedTab === 'context' ? _style.default.contextTitle : _style.default.question, _style.default.innerHTML) // eslint-disable-next-line react/no-danger
     ,
     dangerouslySetInnerHTML: {
       __html: selectedTab === 'context' ? slideContext.title : question
@@ -429,7 +427,7 @@ ContentLayout.propTypes = process.env.NODE_ENV !== "production" ? _extends({
  */
 
 const LoadingLayout = () => /*#__PURE__*/_react.default.createElement("div", {
-  className: _style2.default.loading
+  className: _style.default.loading
 }, /*#__PURE__*/_react.default.createElement(_loader.default, null));
 
 const LoadedLayout = (_ref2) => {
@@ -453,9 +451,9 @@ LoadedLayout.propTypes = process.env.NODE_ENV !== "production" ? _extends(_exten
 const ErrorMessage = ({
   errorMsg
 }) => /*#__PURE__*/_react.default.createElement("div", {
-  className: _style2.default.contentWrapper
+  className: _style.default.contentWrapper
 }, /*#__PURE__*/_react.default.createElement("div", {
-  className: _style2.default.error
+  className: _style.default.error
 }, errorMsg));
 
 ErrorMessage.propTypes = process.env.NODE_ENV !== "production" ? {
@@ -497,10 +495,10 @@ const SlidesPlayer = (props, context) => {
     onClick = _identity2.default
   } = mediaButton;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.wrapper,
+    className: _style.default.wrapper,
     "data-name": "slidesPlayer"
   }, header ? /*#__PURE__*/_react.default.createElement(_header.default, header) : null, /*#__PURE__*/_react.default.createElement("div", {
-    className: _style2.default.contentProgression
+    className: _style.default.contentProgression
   }, step ? /*#__PURE__*/_react.default.createElement(Step, {
     step: step,
     color: stepColor