@coorpacademy/components 11.24.1 → 11.25.0

package/es/molecule/dashboard/learning-profile-banner/index.d.ts

@@ -0,0 +1,4 @@
+export default LearningProfileBanner;
+declare const LearningProfileBanner: React.NamedExoticComponent<object>;
+import React from "react";
+//# sourceMappingURL=index.d.ts.map

package/es/molecule/dashboard/learning-profile-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/learning-profile-banner/index.js"],"names":[],"mappings":";AASA,wEAsCG"}

package/es/molecule/dashboard/learning-profile-banner/index.js

@@ -0,0 +1,67 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
+
+// this is a clone and adapt of the review-banner component (packages/@coorpacademy-components/src/molecule/dashboard/review-banner/index.js)
+import React from 'react';
+import PropTypes from 'prop-types';
+import ButtonLink from '../../../atom/button-link';
+import style from './style.css';
+const BOOK_IMG_URL = 'https://static.coorpacademy.com/assets/images/section-item-book.png';
+const TARGET_IMG_URL = 'https://static.coorpacademy.com/assets/images/section-item-dart.png';
+const LearningProfileBanner = /*#__PURE__*/React.memo(function LearningProfileBanner(props) {
+  const {
+    title,
+    subtitle,
+    cta
+  } = props;
+
+  const buttonProps = _extends({}, cta, {
+    type: 'primary'
+  });
+
+  return /*#__PURE__*/React.createElement("div", {
+    className: style.root,
+    "data-name": "start-learning-profile-banner"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.container
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.banner
+  }, /*#__PURE__*/React.createElement("div", {
+    className: style.left,
+    role: "img",
+    "aria-label": "Left image container"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: style.image,
+    src: BOOK_IMG_URL,
+    alt: "Notebook image"
+  })), /*#__PURE__*/React.createElement("div", {
+    className: style.middle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: style.title,
+    "data-name": "learning-profile-banner-title",
+    "aria-label": "{title}"
+  }, title), /*#__PURE__*/React.createElement("span", {
+    className: style.subtitle,
+    "data-name": "learning-profile-banner-subtitle",
+    "aria-label": "{subtitle}"
+  }, subtitle), /*#__PURE__*/React.createElement(ButtonLink, _extends({}, buttonProps, {
+    className: style.cta
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: style.right,
+    role: "img",
+    "aria-label": "Right image container"
+  }, /*#__PURE__*/React.createElement("img", {
+    className: style.image,
+    src: TARGET_IMG_URL,
+    alt: "Target image"
+  })))));
+});
+LearningProfileBanner.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: PropTypes.string,
+  subtitle: PropTypes.string,
+  cta: PropTypes.shape({
+    onClick: PropTypes.func,
+    label: PropTypes.string
+  })
+} : {};
+export default LearningProfileBanner;
+//# sourceMappingURL=index.js.map

package/es/molecule/dashboard/learning-profile-banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","PropTypes","ButtonLink","style","BOOK_IMG_URL","TARGET_IMG_URL","LearningProfileBanner","memo","props","title","subtitle","cta","buttonProps","type","root","container","banner","left","image","middle","right","propTypes","string","shape","onClick","func","label"],"sources":["../../../../src/molecule/dashboard/learning-profile-banner/index.js"],"sourcesContent":["// this is a clone and adapt of the review-banner component (packages/@coorpacademy-components/src/molecule/dashboard/review-banner/index.js)\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\n\nconst BOOK_IMG_URL = 'https://static.coorpacademy.com/assets/images/section-item-book.png';\nconst TARGET_IMG_URL = 'https://static.coorpacademy.com/assets/images/section-item-dart.png';\n\nconst LearningProfileBanner = React.memo(function LearningProfileBanner(props) {\n  const {title, subtitle, cta} = props;\n  const buttonProps = {\n    ...cta,\n    type: 'primary'\n  };\n\n  return (\n    <div className={style.root} data-name=\"start-learning-profile-banner\">\n      <div className={style.container}>\n        <div className={style.banner}>\n          <div className={style.left} role=\"img\" aria-label=\"Left image container\">\n            <img className={style.image} src={BOOK_IMG_URL} alt=\"Notebook image\" />\n          </div>\n          <div className={style.middle}>\n            <span\n              className={style.title}\n              data-name=\"learning-profile-banner-title\"\n              aria-label=\"{title}\"\n            >\n              {title}\n            </span>\n            <span\n              className={style.subtitle}\n              data-name=\"learning-profile-banner-subtitle\"\n              aria-label=\"{subtitle}\"\n            >\n              {subtitle}\n            </span>\n            <ButtonLink {...buttonProps} className={style.cta} />\n          </div>\n          <div className={style.right} role=\"img\" aria-label=\"Right image container\">\n            <img className={style.image} src={TARGET_IMG_URL} alt=\"Target image\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nLearningProfileBanner.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  cta: PropTypes.shape({\n    onClick: PropTypes.func,\n    label: PropTypes.string\n  })\n};\n\nexport default LearningProfileBanner;\n"],"mappings":";;AAAA;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,OAAOC,KAAP,MAAkB,aAAlB;AAEA,MAAMC,YAAY,GAAG,qEAArB;AACA,MAAMC,cAAc,GAAG,qEAAvB;AAEA,MAAMC,qBAAqB,gBAAGN,KAAK,CAACO,IAAN,CAAW,SAASD,qBAAT,CAA+BE,KAA/B,EAAsC;EAC7E,MAAM;IAACC,KAAD;IAAQC,QAAR;IAAkBC;EAAlB,IAAyBH,KAA/B;;EACA,MAAMI,WAAW,gBACZD,GADY;IAEfE,IAAI,EAAE;EAFS,EAAjB;;EAKA,oBACE;IAAK,SAAS,EAAEV,KAAK,CAACW,IAAtB;IAA4B,aAAU;EAAtC,gBACE;IAAK,SAAS,EAAEX,KAAK,CAACY;EAAtB,gBACE;IAAK,SAAS,EAAEZ,KAAK,CAACa;EAAtB,gBACE;IAAK,SAAS,EAAEb,KAAK,CAACc,IAAtB;IAA4B,IAAI,EAAC,KAAjC;IAAuC,cAAW;EAAlD,gBACE;IAAK,SAAS,EAAEd,KAAK,CAACe,KAAtB;IAA6B,GAAG,EAAEd,YAAlC;IAAgD,GAAG,EAAC;EAApD,EADF,CADF,eAIE;IAAK,SAAS,EAAED,KAAK,CAACgB;EAAtB,gBACE;IACE,SAAS,EAAEhB,KAAK,CAACM,KADnB;IAEE,aAAU,+BAFZ;IAGE,cAAW;EAHb,GAKGA,KALH,CADF,eAQE;IACE,SAAS,EAAEN,KAAK,CAACO,QADnB;IAEE,aAAU,kCAFZ;IAGE,cAAW;EAHb,GAKGA,QALH,CARF,eAeE,oBAAC,UAAD,eAAgBE,WAAhB;IAA6B,SAAS,EAAET,KAAK,CAACQ;EAA9C,GAfF,CAJF,eAqBE;IAAK,SAAS,EAAER,KAAK,CAACiB,KAAtB;IAA6B,IAAI,EAAC,KAAlC;IAAwC,cAAW;EAAnD,gBACE;IAAK,SAAS,EAAEjB,KAAK,CAACe,KAAtB;IAA6B,GAAG,EAAEb,cAAlC;IAAkD,GAAG,EAAC;EAAtD,EADF,CArBF,CADF,CADF,CADF;AA+BD,CAtC6B,CAA9B;AAwCAC,qBAAqB,CAACe,SAAtB,2CAAkC;EAChCZ,KAAK,EAAER,SAAS,CAACqB,MADe;EAEhCZ,QAAQ,EAAET,SAAS,CAACqB,MAFY;EAGhCX,GAAG,EAAEV,SAAS,CAACsB,KAAV,CAAgB;IACnBC,OAAO,EAAEvB,SAAS,CAACwB,IADA;IAEnBC,KAAK,EAAEzB,SAAS,CAACqB;EAFE,CAAhB;AAH2B,CAAlC;AASA,eAAehB,qBAAf"}

package/es/molecule/dashboard/learning-profile-banner/style.css

@@ -0,0 +1,200 @@
+@value breakpoints: "../../../variables/breakpoints.css";
+@value colors: "../../../variables/colors.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value white from colors;
+@value battle_bg from colors;
+@value cm_primary_blue from colors;
+@value cm_blue_700 from colors;
+@value box_shadow_blue_700 from colors;
+@value cm_grey_400 from colors;
+
+.root {
+  display: flex;
+  justify-content: center;
+  padding: 24px 30px;
+  font-family: Gilroy;
+}
+
+.container {
+  width: 100%;
+  max-width: 1080px;
+  height: 214px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: 0px;
+  left: 0px;
+  background: battle_bg;
+  background-image: url(https://static.coorpacademy.com/assets/images/section-background.png);
+  background-size: cover;
+  border-radius: 16px;
+}
+
+.container:hover .right, .container:hover .left {
+  animation-play-state: running;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left {
+  width: 253.067px;
+  height: 253.067px;
+  transform: rotate(-109.28deg);
+  position: relative;
+  left: -5.639px;
+  top: -60.749px;
+  animation-play-state: paused;
+  animation-name: leftAnimation;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-timing-function: ease-in-out;
+}
+
+.right {
+  position: relative;
+  width: 233.504px;
+  height: 233.504px;
+  transform: rotate(-55.338deg);
+  right: 25.136px;
+  bottom: -15px;
+  animation-play-state: paused;
+  animation-name: rightAnimation;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-timing-function: ease-in-out;
+}
+
+.image {
+  width: 120%;
+  height: 120%;
+}
+
+.middle {
+  display: flex;  
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-family: Gilroy;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 48px;
+  color: white;
+  display: block;
+}
+
+.subtitle {
+  font-family: Gilroy;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 28px;
+  opacity: 0.9;
+  display: block;
+  color: cm_grey_400;
+  text-align: center;
+}
+
+.cta {
+  margin-top: 22px;
+  max-width: 200px;
+  border-radius: 36px;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  background-color: cm_primary_blue;
+  box-shadow: 0px 0px 32px 0px rgba(0, 97, 255, 0.65);
+}
+
+.cta:hover {
+  background-color: cm_blue_700;
+  box-shadow: 0px 0px 32px 0px box_shadow_blue_700;
+}
+
+@media tablet {
+  .left {
+    width: 170px;
+    height: 100px;
+    top: -67px
+  }
+
+  .right {
+    width: 170px;
+    height: 146px;
+    bottom: -45px;
+  }
+
+  .title {
+    font-size: 32px;
+    line-height: 39px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    line-height: 19px;
+  }
+  
+  .cta {
+    max-width: 175px;
+  }
+}
+
+@media mobile {
+  .container {
+    height: 161px;
+    max-width: 327px;
+  }
+
+  .banner {
+    justify-content: center;
+  }
+
+  .right {
+    display: none;
+  }
+
+  .left {
+    display: none;
+  }
+
+  .title {
+    font-size: 32px;
+    line-height: 39px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    line-height: 19px;
+  }
+
+  .cta {
+    max-width: 150px;
+  }
+}
+
+@keyframes rightAnimation {
+  0% {transform: translate3d(0, 10px, 0);}
+  50% {transform: translate3d(0, 0, 0);}
+  100% {transform: translate3d(0, 10px, 0);}
+}
+
+@keyframes leftAnimation {
+  0% {transform: translate3d(0, 0, 0);}
+  50% {transform: translate3d(0, 10px, 0);}
+  100% {transform: translate3d(0, 0, 0);}
+}

package/es/template/common/dashboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/dashboard/index.js"],"names":[],"mappings":";AAqBA,oDAiDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/dashboard/index.js"],"names":[],"mappings":";AAsBA,oDAmDC"}

package/es/template/common/dashboard/index.js

@@ -10,6 +10,7 @@ import NewsList from '../../../molecule/dashboard/news-list';
 import StartBattle from '../../../molecule/dashboard/start-battle';
 import CMPopin from '../../../molecule/cm-popin';
 import ReviewBanner from '../../../molecule/dashboard/review-banner';
+import LearningProfileBanner from '../../../molecule/dashboard/learning-profile-banner';
 import style from './style.css';
 const Hero = /*#__PURE__*/React.memo(function Hero({
   hero,
@@ -63,6 +64,9 @@ const Dashboard = props => {
       case 'review':
         return /*#__PURE__*/React.createElement(ReviewBanner, section);
 
+      case 'learningProfile':
+        return /*#__PURE__*/React.createElement(LearningProfileBanner, section);
+
       default:
         return null;
     }
@@ -92,7 +96,7 @@ const Dashboard = props => {
 Dashboard.propTypes = process.env.NODE_ENV !== "production" ? {
   hero: Hero.propTypes.hero,
   welcome: Hero.propTypes.welcome,
-  sections: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(BattleRequestList.propTypes), PropTypes.shape(CardsList.propTypes), PropTypes.shape(NewsList.propTypes), PropTypes.shape(StartBattle.propTypes), PropTypes.shape(ReviewBanner.propTypes)])),
+  sections: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.shape(BattleRequestList.propTypes), PropTypes.shape(CardsList.propTypes), PropTypes.shape(NewsList.propTypes), PropTypes.shape(StartBattle.propTypes), PropTypes.shape(ReviewBanner.propTypes), PropTypes.shape(LearningProfileBanner.propTypes)])),
   cookie: PropTypes.shape(CMPopin.propTypes),
   'arrows-aria-label': CardsList.propTypes['arrows-aria-label'],
   popinWithCards: PropTypes.shape(CMPopin.propTypes)

package/es/template/common/dashboard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PropTypes","Slide","HeroCard","BattleRequestList","CardsList","NewsList","StartBattle","CMPopin","ReviewBanner","style","Hero","memo","hero","welcome","propTypes","shape","Dashboard","props","sections","cookie","popinWithCards","showMoreOnLeftOrRightAriaLabel","buildSectionComponent","section","type","buildSection","index","sectionView","sectionsList","key","map","wrapper","arrayOf","oneOfType"],"sources":["../../../../src/template/common/dashboard/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Slide from '../../../atom/slide';\nimport HeroCard from '../../../molecule/hero';\nimport BattleRequestList from '../../../molecule/dashboard/battle-request-list';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport NewsList from '../../../molecule/dashboard/news-list';\nimport StartBattle from '../../../molecule/dashboard/start-battle';\nimport CMPopin from '../../../molecule/cm-popin';\nimport ReviewBanner from '../../../molecule/dashboard/review-banner';\nimport style from './style.css';\n\nconst Hero = React.memo(function Hero({hero, welcome}) {\n  return <div className={style.hero}>{hero ? <HeroCard {...hero} /> : <Slide {...welcome} />}</div>;\n});\n\nHero.propTypes = {\n  hero: PropTypes.shape(HeroCard.propTypes),\n  welcome: PropTypes.shape(Slide.propTypes)\n};\n\nconst Dashboard = props => {\n  const {\n    sections = [],\n    hero,\n    welcome,\n    cookie,\n    popinWithCards,\n    'arrows-aria-label': showMoreOnLeftOrRightAriaLabel\n  } = props;\n  const buildSectionComponent = section => {\n    const {type} = section;\n    switch (type) {\n      case 'hero':\n        return <Hero hero={hero} welcome={welcome} />;\n      case 'battleRequests':\n        return <BattleRequestList {...section} />;\n      case 'cards':\n        return <CardsList {...section} arrows-aria-label={showMoreOnLeftOrRightAriaLabel} />;\n      case 'news':\n        return <NewsList {...section} />;\n      case 'battle':\n        return <StartBattle {...section} />;\n      case 'review':\n        return <ReviewBanner {...section} />;\n      default:\n        return null;\n    }\n  };\n\n  const buildSection = (section, index) => {\n    const sectionView = buildSectionComponent(section);\n\n    return <div key={index}>{sectionView}</div>;\n  };\n\n  const sectionsList = [{type: 'hero', key: 'hero'}, ...sections].map(section => (\n    <div key={section.key}>{buildSection(section)}</div>\n  ));\n  return (\n    <div className={style.wrapper} data-name=\"dashboard\">\n      {sectionsList}\n      {cookie ? <CMPopin {...cookie} /> : null}\n      {popinWithCards ? (\n        <div className={style.popinWithCards}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nDashboard.propTypes = {\n  hero: Hero.propTypes.hero,\n  welcome: Hero.propTypes.welcome,\n  sections: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape(BattleRequestList.propTypes),\n      PropTypes.shape(CardsList.propTypes),\n      PropTypes.shape(NewsList.propTypes),\n      PropTypes.shape(StartBattle.propTypes),\n      PropTypes.shape(ReviewBanner.propTypes)\n    ])\n  ),\n  cookie: PropTypes.shape(CMPopin.propTypes),\n  'arrows-aria-label': CardsList.propTypes['arrows-aria-label'],\n  popinWithCards: PropTypes.shape(CMPopin.propTypes)\n};\nexport default Dashboard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","PropTypes","Slide","HeroCard","BattleRequestList","CardsList","NewsList","StartBattle","CMPopin","ReviewBanner","LearningProfileBanner","style","Hero","memo","hero","welcome","propTypes","shape","Dashboard","props","sections","cookie","popinWithCards","showMoreOnLeftOrRightAriaLabel","buildSectionComponent","section","type","buildSection","index","sectionView","sectionsList","key","map","wrapper","arrayOf","oneOfType"],"sources":["../../../../src/template/common/dashboard/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Slide from '../../../atom/slide';\nimport HeroCard from '../../../molecule/hero';\nimport BattleRequestList from '../../../molecule/dashboard/battle-request-list';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport NewsList from '../../../molecule/dashboard/news-list';\nimport StartBattle from '../../../molecule/dashboard/start-battle';\nimport CMPopin from '../../../molecule/cm-popin';\nimport ReviewBanner from '../../../molecule/dashboard/review-banner';\nimport LearningProfileBanner from '../../../molecule/dashboard/learning-profile-banner';\nimport style from './style.css';\n\nconst Hero = React.memo(function Hero({hero, welcome}) {\n  return <div className={style.hero}>{hero ? <HeroCard {...hero} /> : <Slide {...welcome} />}</div>;\n});\n\nHero.propTypes = {\n  hero: PropTypes.shape(HeroCard.propTypes),\n  welcome: PropTypes.shape(Slide.propTypes)\n};\n\nconst Dashboard = props => {\n  const {\n    sections = [],\n    hero,\n    welcome,\n    cookie,\n    popinWithCards,\n    'arrows-aria-label': showMoreOnLeftOrRightAriaLabel\n  } = props;\n  const buildSectionComponent = section => {\n    const {type} = section;\n    switch (type) {\n      case 'hero':\n        return <Hero hero={hero} welcome={welcome} />;\n      case 'battleRequests':\n        return <BattleRequestList {...section} />;\n      case 'cards':\n        return <CardsList {...section} arrows-aria-label={showMoreOnLeftOrRightAriaLabel} />;\n      case 'news':\n        return <NewsList {...section} />;\n      case 'battle':\n        return <StartBattle {...section} />;\n      case 'review':\n        return <ReviewBanner {...section} />;\n      case 'learningProfile':\n        return <LearningProfileBanner {...section} />;\n      default:\n        return null;\n    }\n  };\n\n  const buildSection = (section, index) => {\n    const sectionView = buildSectionComponent(section);\n\n    return <div key={index}>{sectionView}</div>;\n  };\n\n  const sectionsList = [{type: 'hero', key: 'hero'}, ...sections].map(section => (\n    <div key={section.key}>{buildSection(section)}</div>\n  ));\n  return (\n    <div className={style.wrapper} data-name=\"dashboard\">\n      {sectionsList}\n      {cookie ? <CMPopin {...cookie} /> : null}\n      {popinWithCards ? (\n        <div className={style.popinWithCards}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nDashboard.propTypes = {\n  hero: Hero.propTypes.hero,\n  welcome: Hero.propTypes.welcome,\n  sections: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape(BattleRequestList.propTypes),\n      PropTypes.shape(CardsList.propTypes),\n      PropTypes.shape(NewsList.propTypes),\n      PropTypes.shape(StartBattle.propTypes),\n      PropTypes.shape(ReviewBanner.propTypes),\n      PropTypes.shape(LearningProfileBanner.propTypes)\n    ])\n  ),\n  cookie: PropTypes.shape(CMPopin.propTypes),\n  'arrows-aria-label': CardsList.propTypes['arrows-aria-label'],\n  popinWithCards: PropTypes.shape(CMPopin.propTypes)\n};\nexport default Dashboard;\n"],"mappings":"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"}

package/lib/molecule/dashboard/learning-profile-banner/index.d.ts

@@ -0,0 +1,4 @@
+export default LearningProfileBanner;
+declare const LearningProfileBanner: React.NamedExoticComponent<object>;
+import React from "react";
+//# sourceMappingURL=index.d.ts.map

package/lib/molecule/dashboard/learning-profile-banner/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/molecule/dashboard/learning-profile-banner/index.js"],"names":[],"mappings":";AASA,wEAsCG"}

package/lib/molecule/dashboard/learning-profile-banner/index.js

@@ -0,0 +1,80 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _buttonLink = _interopRequireDefault(require("../../../atom/button-link"));
+
+var _style = _interopRequireDefault(require("./style.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 BOOK_IMG_URL = 'https://static.coorpacademy.com/assets/images/section-item-book.png';
+const TARGET_IMG_URL = 'https://static.coorpacademy.com/assets/images/section-item-dart.png';
+
+const LearningProfileBanner = /*#__PURE__*/_react.default.memo(function LearningProfileBanner(props) {
+  const {
+    title,
+    subtitle,
+    cta
+  } = props;
+
+  const buttonProps = _extends({}, cta, {
+    type: 'primary'
+  });
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.root,
+    "data-name": "start-learning-profile-banner"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.banner
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.left,
+    role: "img",
+    "aria-label": "Left image container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: _style.default.image,
+    src: BOOK_IMG_URL,
+    alt: "Notebook image"
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.middle
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.title,
+    "data-name": "learning-profile-banner-title",
+    "aria-label": "{title}"
+  }, title), /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.subtitle,
+    "data-name": "learning-profile-banner-subtitle",
+    "aria-label": "{subtitle}"
+  }, subtitle), /*#__PURE__*/_react.default.createElement(_buttonLink.default, _extends({}, buttonProps, {
+    className: _style.default.cta
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.right,
+    role: "img",
+    "aria-label": "Right image container"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: _style.default.image,
+    src: TARGET_IMG_URL,
+    alt: "Target image"
+  })))));
+});
+
+LearningProfileBanner.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string,
+  cta: _propTypes.default.shape({
+    onClick: _propTypes.default.func,
+    label: _propTypes.default.string
+  })
+} : {};
+var _default = LearningProfileBanner;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/dashboard/learning-profile-banner/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["BOOK_IMG_URL","TARGET_IMG_URL","LearningProfileBanner","React","memo","props","title","subtitle","cta","buttonProps","type","style","root","container","banner","left","image","middle","right","propTypes","PropTypes","string","shape","onClick","func","label"],"sources":["../../../../src/molecule/dashboard/learning-profile-banner/index.js"],"sourcesContent":["// this is a clone and adapt of the review-banner component (packages/@coorpacademy-components/src/molecule/dashboard/review-banner/index.js)\nimport React from 'react';\nimport PropTypes from 'prop-types';\nimport ButtonLink from '../../../atom/button-link';\nimport style from './style.css';\n\nconst BOOK_IMG_URL = 'https://static.coorpacademy.com/assets/images/section-item-book.png';\nconst TARGET_IMG_URL = 'https://static.coorpacademy.com/assets/images/section-item-dart.png';\n\nconst LearningProfileBanner = React.memo(function LearningProfileBanner(props) {\n  const {title, subtitle, cta} = props;\n  const buttonProps = {\n    ...cta,\n    type: 'primary'\n  };\n\n  return (\n    <div className={style.root} data-name=\"start-learning-profile-banner\">\n      <div className={style.container}>\n        <div className={style.banner}>\n          <div className={style.left} role=\"img\" aria-label=\"Left image container\">\n            <img className={style.image} src={BOOK_IMG_URL} alt=\"Notebook image\" />\n          </div>\n          <div className={style.middle}>\n            <span\n              className={style.title}\n              data-name=\"learning-profile-banner-title\"\n              aria-label=\"{title}\"\n            >\n              {title}\n            </span>\n            <span\n              className={style.subtitle}\n              data-name=\"learning-profile-banner-subtitle\"\n              aria-label=\"{subtitle}\"\n            >\n              {subtitle}\n            </span>\n            <ButtonLink {...buttonProps} className={style.cta} />\n          </div>\n          <div className={style.right} role=\"img\" aria-label=\"Right image container\">\n            <img className={style.image} src={TARGET_IMG_URL} alt=\"Target image\" />\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n});\n\nLearningProfileBanner.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  cta: PropTypes.shape({\n    onClick: PropTypes.func,\n    label: PropTypes.string\n  })\n};\n\nexport default LearningProfileBanner;\n"],"mappings":";;;;;AACA;;AACA;;AACA;;AACA;;;;;;AAEA,MAAMA,YAAY,GAAG,qEAArB;AACA,MAAMC,cAAc,GAAG,qEAAvB;;AAEA,MAAMC,qBAAqB,gBAAGC,cAAA,CAAMC,IAAN,CAAW,SAASF,qBAAT,CAA+BG,KAA/B,EAAsC;EAC7E,MAAM;IAACC,KAAD;IAAQC,QAAR;IAAkBC;EAAlB,IAAyBH,KAA/B;;EACA,MAAMI,WAAW,gBACZD,GADY;IAEfE,IAAI,EAAE;EAFS,EAAjB;;EAKA,oBACE;IAAK,SAAS,EAAEC,cAAA,CAAMC,IAAtB;IAA4B,aAAU;EAAtC,gBACE;IAAK,SAAS,EAAED,cAAA,CAAME;EAAtB,gBACE;IAAK,SAAS,EAAEF,cAAA,CAAMG;EAAtB,gBACE;IAAK,SAAS,EAAEH,cAAA,CAAMI,IAAtB;IAA4B,IAAI,EAAC,KAAjC;IAAuC,cAAW;EAAlD,gBACE;IAAK,SAAS,EAAEJ,cAAA,CAAMK,KAAtB;IAA6B,GAAG,EAAEhB,YAAlC;IAAgD,GAAG,EAAC;EAApD,EADF,CADF,eAIE;IAAK,SAAS,EAAEW,cAAA,CAAMM;EAAtB,gBACE;IACE,SAAS,EAAEN,cAAA,CAAML,KADnB;IAEE,aAAU,+BAFZ;IAGE,cAAW;EAHb,GAKGA,KALH,CADF,eAQE;IACE,SAAS,EAAEK,cAAA,CAAMJ,QADnB;IAEE,aAAU,kCAFZ;IAGE,cAAW;EAHb,GAKGA,QALH,CARF,eAeE,6BAAC,mBAAD,eAAgBE,WAAhB;IAA6B,SAAS,EAAEE,cAAA,CAAMH;EAA9C,GAfF,CAJF,eAqBE;IAAK,SAAS,EAAEG,cAAA,CAAMO,KAAtB;IAA6B,IAAI,EAAC,KAAlC;IAAwC,cAAW;EAAnD,gBACE;IAAK,SAAS,EAAEP,cAAA,CAAMK,KAAtB;IAA6B,GAAG,EAAEf,cAAlC;IAAkD,GAAG,EAAC;EAAtD,EADF,CArBF,CADF,CADF,CADF;AA+BD,CAtC6B,CAA9B;;AAwCAC,qBAAqB,CAACiB,SAAtB,2CAAkC;EAChCb,KAAK,EAAEc,kBAAA,CAAUC,MADe;EAEhCd,QAAQ,EAAEa,kBAAA,CAAUC,MAFY;EAGhCb,GAAG,EAAEY,kBAAA,CAAUE,KAAV,CAAgB;IACnBC,OAAO,EAAEH,kBAAA,CAAUI,IADA;IAEnBC,KAAK,EAAEL,kBAAA,CAAUC;EAFE,CAAhB;AAH2B,CAAlC;eASenB,qB"}

package/lib/molecule/dashboard/learning-profile-banner/style.css

@@ -0,0 +1,200 @@
+@value breakpoints: "../../../variables/breakpoints.css";
+@value colors: "../../../variables/colors.css";
+@value tablet from breakpoints;
+@value mobile from breakpoints;
+@value white from colors;
+@value battle_bg from colors;
+@value cm_primary_blue from colors;
+@value cm_blue_700 from colors;
+@value box_shadow_blue_700 from colors;
+@value cm_grey_400 from colors;
+
+.root {
+  display: flex;
+  justify-content: center;
+  padding: 24px 30px;
+  font-family: Gilroy;
+}
+
+.container {
+  width: 100%;
+  max-width: 1080px;
+  height: 214px;
+  display: flex;
+  justify-content: center;
+  position: relative;
+  top: 0px;
+  left: 0px;
+  background: battle_bg;
+  background-image: url(https://static.coorpacademy.com/assets/images/section-background.png);
+  background-size: cover;
+  border-radius: 16px;
+}
+
+.container:hover .right, .container:hover .left {
+  animation-play-state: running;
+}
+
+.banner {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.left {
+  width: 253.067px;
+  height: 253.067px;
+  transform: rotate(-109.28deg);
+  position: relative;
+  left: -5.639px;
+  top: -60.749px;
+  animation-play-state: paused;
+  animation-name: leftAnimation;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-timing-function: ease-in-out;
+}
+
+.right {
+  position: relative;
+  width: 233.504px;
+  height: 233.504px;
+  transform: rotate(-55.338deg);
+  right: 25.136px;
+  bottom: -15px;
+  animation-play-state: paused;
+  animation-name: rightAnimation;
+  animation-duration: 2s;
+  animation-delay: 0;
+  animation-iteration-count: infinite;
+  animation-direction: forward;
+  animation-timing-function: ease-in-out;
+}
+
+.image {
+  width: 120%;
+  height: 120%;
+}
+
+.middle {
+  display: flex;  
+  flex-direction: column;
+  align-items: center;
+}
+
+.title {
+  font-family: Gilroy;
+  font-size: 40px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 48px;
+  color: white;
+  display: block;
+}
+
+.subtitle {
+  font-family: Gilroy;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 28px;
+  opacity: 0.9;
+  display: block;
+  color: cm_grey_400;
+  text-align: center;
+}
+
+.cta {
+  margin-top: 22px;
+  max-width: 200px;
+  border-radius: 36px;
+  font-family: Gilroy;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 600;
+  background-color: cm_primary_blue;
+  box-shadow: 0px 0px 32px 0px rgba(0, 97, 255, 0.65);
+}
+
+.cta:hover {
+  background-color: cm_blue_700;
+  box-shadow: 0px 0px 32px 0px box_shadow_blue_700;
+}
+
+@media tablet {
+  .left {
+    width: 170px;
+    height: 100px;
+    top: -67px
+  }
+
+  .right {
+    width: 170px;
+    height: 146px;
+    bottom: -45px;
+  }
+
+  .title {
+    font-size: 32px;
+    line-height: 39px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    line-height: 19px;
+  }
+  
+  .cta {
+    max-width: 175px;
+  }
+}
+
+@media mobile {
+  .container {
+    height: 161px;
+    max-width: 327px;
+  }
+
+  .banner {
+    justify-content: center;
+  }
+
+  .right {
+    display: none;
+  }
+
+  .left {
+    display: none;
+  }
+
+  .title {
+    font-size: 32px;
+    line-height: 39px;
+  }
+
+  .subtitle {
+    font-size: 16px;
+    line-height: 19px;
+  }
+
+  .cta {
+    max-width: 150px;
+  }
+}
+
+@keyframes rightAnimation {
+  0% {transform: translate3d(0, 10px, 0);}
+  50% {transform: translate3d(0, 0, 0);}
+  100% {transform: translate3d(0, 10px, 0);}
+}
+
+@keyframes leftAnimation {
+  0% {transform: translate3d(0, 0, 0);}
+  50% {transform: translate3d(0, 10px, 0);}
+  100% {transform: translate3d(0, 0, 0);}
+}

package/lib/template/common/dashboard/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/dashboard/index.js"],"names":[],"mappings":";AAqBA,oDAiDC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/template/common/dashboard/index.js"],"names":[],"mappings":";AAsBA,oDAmDC"}

package/lib/template/common/dashboard/index.js

@@ -23,6 +23,8 @@ var _cmPopin = _interopRequireDefault(require("../../../molecule/cm-popin"));
 
 var _reviewBanner = _interopRequireDefault(require("../../../molecule/dashboard/review-banner"));
 
+var _learningProfileBanner = _interopRequireDefault(require("../../../molecule/dashboard/learning-profile-banner"));
+
 var _style = _interopRequireDefault(require("./style.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -82,6 +84,9 @@ const Dashboard = props => {
       case 'review':
         return /*#__PURE__*/_react.default.createElement(_reviewBanner.default, section);
 
+      case 'learningProfile':
+        return /*#__PURE__*/_react.default.createElement(_learningProfileBanner.default, section);
+
       default:
         return null;
     }
@@ -111,7 +116,7 @@ const Dashboard = props => {
 Dashboard.propTypes = process.env.NODE_ENV !== "production" ? {
   hero: Hero.propTypes.hero,
   welcome: Hero.propTypes.welcome,
-  sections: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(_battleRequestList.default.propTypes), _propTypes.default.shape(_cardsList.default.propTypes), _propTypes.default.shape(_newsList.default.propTypes), _propTypes.default.shape(_startBattle.default.propTypes), _propTypes.default.shape(_reviewBanner.default.propTypes)])),
+  sections: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape(_battleRequestList.default.propTypes), _propTypes.default.shape(_cardsList.default.propTypes), _propTypes.default.shape(_newsList.default.propTypes), _propTypes.default.shape(_startBattle.default.propTypes), _propTypes.default.shape(_reviewBanner.default.propTypes), _propTypes.default.shape(_learningProfileBanner.default.propTypes)])),
   cookie: _propTypes.default.shape(_cmPopin.default.propTypes),
   'arrows-aria-label': _cardsList.default.propTypes['arrows-aria-label'],
   popinWithCards: _propTypes.default.shape(_cmPopin.default.propTypes)

package/lib/template/common/dashboard/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["Hero","React","memo","hero","welcome","style","propTypes","PropTypes","shape","HeroCard","Slide","Dashboard","props","sections","cookie","popinWithCards","showMoreOnLeftOrRightAriaLabel","buildSectionComponent","section","type","buildSection","index","sectionView","sectionsList","key","map","wrapper","arrayOf","oneOfType","BattleRequestList","CardsList","NewsList","StartBattle","ReviewBanner","CMPopin"],"sources":["../../../../src/template/common/dashboard/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Slide from '../../../atom/slide';\nimport HeroCard from '../../../molecule/hero';\nimport BattleRequestList from '../../../molecule/dashboard/battle-request-list';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport NewsList from '../../../molecule/dashboard/news-list';\nimport StartBattle from '../../../molecule/dashboard/start-battle';\nimport CMPopin from '../../../molecule/cm-popin';\nimport ReviewBanner from '../../../molecule/dashboard/review-banner';\nimport style from './style.css';\n\nconst Hero = React.memo(function Hero({hero, welcome}) {\n  return <div className={style.hero}>{hero ? <HeroCard {...hero} /> : <Slide {...welcome} />}</div>;\n});\n\nHero.propTypes = {\n  hero: PropTypes.shape(HeroCard.propTypes),\n  welcome: PropTypes.shape(Slide.propTypes)\n};\n\nconst Dashboard = props => {\n  const {\n    sections = [],\n    hero,\n    welcome,\n    cookie,\n    popinWithCards,\n    'arrows-aria-label': showMoreOnLeftOrRightAriaLabel\n  } = props;\n  const buildSectionComponent = section => {\n    const {type} = section;\n    switch (type) {\n      case 'hero':\n        return <Hero hero={hero} welcome={welcome} />;\n      case 'battleRequests':\n        return <BattleRequestList {...section} />;\n      case 'cards':\n        return <CardsList {...section} arrows-aria-label={showMoreOnLeftOrRightAriaLabel} />;\n      case 'news':\n        return <NewsList {...section} />;\n      case 'battle':\n        return <StartBattle {...section} />;\n      case 'review':\n        return <ReviewBanner {...section} />;\n      default:\n        return null;\n    }\n  };\n\n  const buildSection = (section, index) => {\n    const sectionView = buildSectionComponent(section);\n\n    return <div key={index}>{sectionView}</div>;\n  };\n\n  const sectionsList = [{type: 'hero', key: 'hero'}, ...sections].map(section => (\n    <div key={section.key}>{buildSection(section)}</div>\n  ));\n  return (\n    <div className={style.wrapper} data-name=\"dashboard\">\n      {sectionsList}\n      {cookie ? <CMPopin {...cookie} /> : null}\n      {popinWithCards ? (\n        <div className={style.popinWithCards}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nDashboard.propTypes = {\n  hero: Hero.propTypes.hero,\n  welcome: Hero.propTypes.welcome,\n  sections: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape(BattleRequestList.propTypes),\n      PropTypes.shape(CardsList.propTypes),\n      PropTypes.shape(NewsList.propTypes),\n      PropTypes.shape(StartBattle.propTypes),\n      PropTypes.shape(ReviewBanner.propTypes)\n    ])\n  ),\n  cookie: PropTypes.shape(CMPopin.propTypes),\n  'arrows-aria-label': CardsList.propTypes['arrows-aria-label'],\n  popinWithCards: PropTypes.shape(CMPopin.propTypes)\n};\nexport default Dashboard;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["Hero","React","memo","hero","welcome","style","propTypes","PropTypes","shape","HeroCard","Slide","Dashboard","props","sections","cookie","popinWithCards","showMoreOnLeftOrRightAriaLabel","buildSectionComponent","section","type","buildSection","index","sectionView","sectionsList","key","map","wrapper","arrayOf","oneOfType","BattleRequestList","CardsList","NewsList","StartBattle","ReviewBanner","LearningProfileBanner","CMPopin"],"sources":["../../../../src/template/common/dashboard/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Slide from '../../../atom/slide';\nimport HeroCard from '../../../molecule/hero';\nimport BattleRequestList from '../../../molecule/dashboard/battle-request-list';\nimport CardsList from '../../../molecule/dashboard/cards-list';\nimport NewsList from '../../../molecule/dashboard/news-list';\nimport StartBattle from '../../../molecule/dashboard/start-battle';\nimport CMPopin from '../../../molecule/cm-popin';\nimport ReviewBanner from '../../../molecule/dashboard/review-banner';\nimport LearningProfileBanner from '../../../molecule/dashboard/learning-profile-banner';\nimport style from './style.css';\n\nconst Hero = React.memo(function Hero({hero, welcome}) {\n  return <div className={style.hero}>{hero ? <HeroCard {...hero} /> : <Slide {...welcome} />}</div>;\n});\n\nHero.propTypes = {\n  hero: PropTypes.shape(HeroCard.propTypes),\n  welcome: PropTypes.shape(Slide.propTypes)\n};\n\nconst Dashboard = props => {\n  const {\n    sections = [],\n    hero,\n    welcome,\n    cookie,\n    popinWithCards,\n    'arrows-aria-label': showMoreOnLeftOrRightAriaLabel\n  } = props;\n  const buildSectionComponent = section => {\n    const {type} = section;\n    switch (type) {\n      case 'hero':\n        return <Hero hero={hero} welcome={welcome} />;\n      case 'battleRequests':\n        return <BattleRequestList {...section} />;\n      case 'cards':\n        return <CardsList {...section} arrows-aria-label={showMoreOnLeftOrRightAriaLabel} />;\n      case 'news':\n        return <NewsList {...section} />;\n      case 'battle':\n        return <StartBattle {...section} />;\n      case 'review':\n        return <ReviewBanner {...section} />;\n      case 'learningProfile':\n        return <LearningProfileBanner {...section} />;\n      default:\n        return null;\n    }\n  };\n\n  const buildSection = (section, index) => {\n    const sectionView = buildSectionComponent(section);\n\n    return <div key={index}>{sectionView}</div>;\n  };\n\n  const sectionsList = [{type: 'hero', key: 'hero'}, ...sections].map(section => (\n    <div key={section.key}>{buildSection(section)}</div>\n  ));\n  return (\n    <div className={style.wrapper} data-name=\"dashboard\">\n      {sectionsList}\n      {cookie ? <CMPopin {...cookie} /> : null}\n      {popinWithCards ? (\n        <div className={style.popinWithCards}>\n          <CMPopin {...popinWithCards} />\n        </div>\n      ) : null}\n    </div>\n  );\n};\n\nDashboard.propTypes = {\n  hero: Hero.propTypes.hero,\n  welcome: Hero.propTypes.welcome,\n  sections: PropTypes.arrayOf(\n    PropTypes.oneOfType([\n      PropTypes.shape(BattleRequestList.propTypes),\n      PropTypes.shape(CardsList.propTypes),\n      PropTypes.shape(NewsList.propTypes),\n      PropTypes.shape(StartBattle.propTypes),\n      PropTypes.shape(ReviewBanner.propTypes),\n      PropTypes.shape(LearningProfileBanner.propTypes)\n    ])\n  ),\n  cookie: PropTypes.shape(CMPopin.propTypes),\n  'arrows-aria-label': CardsList.propTypes['arrows-aria-label'],\n  popinWithCards: PropTypes.shape(CMPopin.propTypes)\n};\nexport default Dashboard;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@coorpacademy/components",
-  "version": "11.24.1",
+  "version": "11.25.0",
   "description": "",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -168,5 +168,5 @@
     "last 2 versions",
     "IE 11"
   ],
-  "gitHead": "f38adf1e6ee376f1e8c9e6b11ccc8184c93d24c7"
+  "gitHead": "9a1e87b8bdb7a6bb5563cffb014db7c18b4e553a"
 }