@coorpacademy/components 11.32.32 → 11.32.33-alpha.27

package/lib/molecule/cm-popin/types.d.ts

@@ -20,8 +20,9 @@ declare const propTypes: {
                 type: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<{
-                    [x: string]: string | null | undefined;
+                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                 }>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
             }>>;
         }>>;
         headerIcon: PropTypes.Requireable<string>;

package/lib/molecule/cm-popin/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/cm-popin/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAKnC,OAAO,IAAI,MAAM,iBAAiB,CAAC;AACnC,OAAO,EAAC,UAAU,EAAC,MAAM,wBAAwB,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAO,SAAS,MAAM,2BAA2B,CAAC;AAGlD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoDd,CAAC;AAEF,aAAK,gBAAgB,GAAG;IACtB,KAAK,EAAE,UAAU,CAAC;IAClB,eAAe,EAAE,MAAM,CAAC;IACxB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,oBAAY,eAAe,GAAG;IAC5B,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,WAAW,CAAC,EAAE;QACZ,eAAe,CAAC,EAAE,MAAM,CAAC;QACzB,KAAK,CAAC,EAAE,MAAM,CAAC;KAChB,CAAC;IACF,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B,CAAC;AAEF,oBAAY,YAAY,GAAG;IACzB,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,OAAO,GAAG,aAAa,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;IAC5D,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,gBAAgB,CAAC;IAC/B,eAAe,EAAE,MAAM,CAAC;IACxB,WAAW,CAAC,EAAE,eAAe,CAAC;IAC9B,YAAY,CAAC,EAAE,eAAe,CAAC;IAC/B,KAAK,CAAC,EAAE;QACN,IAAI,EAAE,SAAS,GAAG,MAAM,CAAC;QACzB,IAAI,EACA,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,GAChD,SAAS,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,SAAS,CAAC,CAAC;KACtD,CAAC;IACF,IAAI,CAAC,EAAE,SAAS,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,SAAS,CAAC,CAAC;CACpD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/molecule/progress-bar/index.d.ts

@@ -10,6 +10,7 @@ declare namespace ProgressBar {
         const style: PropTypes.Requireable<{
             [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
         }>;
+        const displayInfo: PropTypes.Requireable<boolean>;
     }
 }
 import PropTypes from "prop-types";

package/lib/molecule/progress-bar/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-bar/index.js"],"names":[],"mappings":";AAMA,sDAuBC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-bar/index.js"],"names":[],"mappings":";AAMA,sDAiCC"}

package/lib/molecule/progress-bar/index.js

@@ -24,7 +24,8 @@ const ProgressBar = props => {
     max,
     desc = '',
     steps = 0,
-    style: propsStyle
+    style: propsStyle,
+    displayInfo = true
   } = props;
   const ratio = value / max;
   const percentage = Math.floor(ratio * 100);
@@ -40,13 +41,13 @@ const ProgressBar = props => {
     style: _extends({}, propsStyle, {
       width: `${ratio * 100}%`
     })
-  }), /*#__PURE__*/_react.default.createElement("p", {
+  }), displayInfo ? /*#__PURE__*/_react.default.createElement("p", {
     className: _style.default.texts
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.description
   }, `${value}/${max} ${desc}`), /*#__PURE__*/_react.default.createElement("span", {
     className: _style.default.percentage
-  }, text)), /*#__PURE__*/_react.default.createElement("div", {
+  }, text)) : null, /*#__PURE__*/_react.default.createElement("div", {
     className: _style.default.steps
   }, stepList));
 };
@@ -57,7 +58,8 @@ ProgressBar.propTypes = process.env.NODE_ENV !== "production" ? {
   max: _propTypes.default.number.isRequired,
   desc: _propTypes.default.string,
   steps: _propTypes.default.number,
-  style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]))
+  style: _propTypes.default.objectOf(_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number])),
+  displayInfo: _propTypes.default.bool
 } : {};
 var _default = ProgressBar;
 exports.default = _default;

package/lib/molecule/progress-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ProgressBar","props","className","value","max","desc","steps","style","propsStyle","ratio","percentage","Math","floor","text","stepList","index","step","classnames","background","progress","width","texts","description","propTypes","PropTypes","string","number","isRequired","objectOf","oneOfType"],"sources":["../../../src/molecule/progress-bar/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {times} from 'lodash/fp';\nimport style from './style.css';\n\nconst ProgressBar = props => {\n  const {className, value, max, desc = '', steps = 0, style: propsStyle} = props;\n\n  const ratio = value / max;\n  const percentage = Math.floor(ratio * 100);\n  const text = `${percentage}%`;\n  const stepList = times(index => <div className={style.step} key={index} />, steps);\n  return (\n    <div className={classnames(style.background, className)}>\n      <div\n        className={style.progress}\n        style={{\n          ...propsStyle,\n          width: `${ratio * 100}%`\n        }}\n      />\n      <p className={style.texts}>\n        <span className={style.description}>{`${value}/${max} ${desc}`}</span>\n        <span className={style.percentage}>{text}</span>\n      </p>\n      <div className={style.steps}>{stepList}</div>\n    </div>\n  );\n};\n\nProgressBar.propTypes = {\n  className: PropTypes.string,\n  value: PropTypes.number.isRequired,\n  max: PropTypes.number.isRequired,\n  desc: PropTypes.string,\n  steps: PropTypes.number,\n  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number]))\n};\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IAACC,SAAD;IAAYC,KAAZ;IAAmBC,GAAnB;IAAwBC,IAAI,GAAG,EAA/B;IAAmCC,KAAK,GAAG,CAA3C;IAA8CC,KAAK,EAAEC;EAArD,IAAmEP,KAAzE;EAEA,MAAMQ,KAAK,GAAGN,KAAK,GAAGC,GAAtB;EACA,MAAMM,UAAU,GAAGC,IAAI,CAACC,KAAL,CAAWH,KAAK,GAAG,GAAnB,CAAnB;EACA,MAAMI,IAAI,GAAI,GAAEH,UAAW,GAA3B;EACA,MAAMI,QAAQ,GAAG,qBAAMC,KAAK,iBAAI;IAAK,SAAS,EAAER,cAAA,CAAMS,IAAtB;IAA4B,GAAG,EAAED;EAAjC,EAAf,EAA2DT,KAA3D,CAAjB;EACA,oBACE;IAAK,SAAS,EAAE,IAAAW,mBAAA,EAAWV,cAAA,CAAMW,UAAjB,EAA6BhB,SAA7B;EAAhB,gBACE;IACE,SAAS,EAAEK,cAAA,CAAMY,QADnB;IAEE,KAAK,eACAX,UADA;MAEHY,KAAK,EAAG,GAAEX,KAAK,GAAG,GAAI;IAFnB;EAFP,EADF,eAQE;IAAG,SAAS,EAAEF,cAAA,CAAMc;EAApB,gBACE;IAAM,SAAS,EAAEd,cAAA,CAAMe;EAAvB,GAAsC,GAAEnB,KAAM,IAAGC,GAAI,IAAGC,IAAK,EAA7D,CADF,eAEE;IAAM,SAAS,EAAEE,cAAA,CAAMG;EAAvB,GAAoCG,IAApC,CAFF,CARF,eAYE;IAAK,SAAS,EAAEN,cAAA,CAAMD;EAAtB,GAA8BQ,QAA9B,CAZF,CADF;AAgBD,CAvBD;;AAyBAd,WAAW,CAACuB,SAAZ,2CAAwB;EACtBrB,SAAS,EAAEsB,kBAAA,CAAUC,MADC;EAEtBtB,KAAK,EAAEqB,kBAAA,CAAUE,MAAV,CAAiBC,UAFF;EAGtBvB,GAAG,EAAEoB,kBAAA,CAAUE,MAAV,CAAiBC,UAHA;EAItBtB,IAAI,EAAEmB,kBAAA,CAAUC,MAJM;EAKtBnB,KAAK,EAAEkB,kBAAA,CAAUE,MALK;EAMtBnB,KAAK,EAAEiB,kBAAA,CAAUI,QAAV,CAAmBJ,kBAAA,CAAUK,SAAV,CAAoB,CAACL,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUE,MAA7B,CAApB,CAAnB;AANe,CAAxB;eASe1B,W"}
+{"version":3,"file":"index.js","names":["ProgressBar","props","className","value","max","desc","steps","style","propsStyle","displayInfo","ratio","percentage","Math","floor","text","stepList","index","step","classnames","background","progress","width","texts","description","propTypes","PropTypes","string","number","isRequired","objectOf","oneOfType","bool"],"sources":["../../../src/molecule/progress-bar/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport classnames from 'classnames';\nimport {times} from 'lodash/fp';\nimport style from './style.css';\n\nconst ProgressBar = props => {\n  const {\n    className,\n    value,\n    max,\n    desc = '',\n    steps = 0,\n    style: propsStyle,\n    displayInfo = true\n  } = props;\n\n  const ratio = value / max;\n  const percentage = Math.floor(ratio * 100);\n  const text = `${percentage}%`;\n  const stepList = times(index => <div className={style.step} key={index} />, steps);\n  return (\n    <div className={classnames(style.background, className)}>\n      <div\n        className={style.progress}\n        style={{\n          ...propsStyle,\n          width: `${ratio * 100}%`\n        }}\n      />\n      {displayInfo ? (\n        <p className={style.texts}>\n          <span className={style.description}>{`${value}/${max} ${desc}`}</span>\n          <span className={style.percentage}>{text}</span>\n        </p>\n      ) : null}\n      <div className={style.steps}>{stepList}</div>\n    </div>\n  );\n};\n\nProgressBar.propTypes = {\n  className: PropTypes.string,\n  value: PropTypes.number.isRequired,\n  max: PropTypes.number.isRequired,\n  desc: PropTypes.string,\n  steps: PropTypes.number,\n  style: PropTypes.objectOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])),\n  displayInfo: PropTypes.bool\n};\n\nexport default ProgressBar;\n"],"mappings":";;;;;;;AAAA;;AACA;;AACA;;AAEA;;;;;;AAEA,MAAMA,WAAW,GAAGC,KAAK,IAAI;EAC3B,MAAM;IACJC,SADI;IAEJC,KAFI;IAGJC,GAHI;IAIJC,IAAI,GAAG,EAJH;IAKJC,KAAK,GAAG,CALJ;IAMJC,KAAK,EAAEC,UANH;IAOJC,WAAW,GAAG;EAPV,IAQFR,KARJ;EAUA,MAAMS,KAAK,GAAGP,KAAK,GAAGC,GAAtB;EACA,MAAMO,UAAU,GAAGC,IAAI,CAACC,KAAL,CAAWH,KAAK,GAAG,GAAnB,CAAnB;EACA,MAAMI,IAAI,GAAI,GAAEH,UAAW,GAA3B;EACA,MAAMI,QAAQ,GAAG,qBAAMC,KAAK,iBAAI;IAAK,SAAS,EAAET,cAAA,CAAMU,IAAtB;IAA4B,GAAG,EAAED;EAAjC,EAAf,EAA2DV,KAA3D,CAAjB;EACA,oBACE;IAAK,SAAS,EAAE,IAAAY,mBAAA,EAAWX,cAAA,CAAMY,UAAjB,EAA6BjB,SAA7B;EAAhB,gBACE;IACE,SAAS,EAAEK,cAAA,CAAMa,QADnB;IAEE,KAAK,eACAZ,UADA;MAEHa,KAAK,EAAG,GAAEX,KAAK,GAAG,GAAI;IAFnB;EAFP,EADF,EAQGD,WAAW,gBACV;IAAG,SAAS,EAAEF,cAAA,CAAMe;EAApB,gBACE;IAAM,SAAS,EAAEf,cAAA,CAAMgB;EAAvB,GAAsC,GAAEpB,KAAM,IAAGC,GAAI,IAAGC,IAAK,EAA7D,CADF,eAEE;IAAM,SAAS,EAAEE,cAAA,CAAMI;EAAvB,GAAoCG,IAApC,CAFF,CADU,GAKR,IAbN,eAcE;IAAK,SAAS,EAAEP,cAAA,CAAMD;EAAtB,GAA8BS,QAA9B,CAdF,CADF;AAkBD,CAjCD;;AAmCAf,WAAW,CAACwB,SAAZ,2CAAwB;EACtBtB,SAAS,EAAEuB,kBAAA,CAAUC,MADC;EAEtBvB,KAAK,EAAEsB,kBAAA,CAAUE,MAAV,CAAiBC,UAFF;EAGtBxB,GAAG,EAAEqB,kBAAA,CAAUE,MAAV,CAAiBC,UAHA;EAItBvB,IAAI,EAAEoB,kBAAA,CAAUC,MAJM;EAKtBpB,KAAK,EAAEmB,kBAAA,CAAUE,MALK;EAMtBpB,KAAK,EAAEkB,kBAAA,CAAUI,QAAV,CAAmBJ,kBAAA,CAAUK,SAAV,CAAoB,CAACL,kBAAA,CAAUC,MAAX,EAAmBD,kBAAA,CAAUE,MAA7B,CAApB,CAAnB,CANe;EAOtBlB,WAAW,EAAEgB,kBAAA,CAAUM;AAPD,CAAxB;eAUe/B,W"}

package/lib/molecule/progress-wrapper/index.d.ts

@@ -0,0 +1,29 @@
+export default ProgressWrapper;
+declare function ProgressWrapper({ completedCourses, completedModules, title, subtitle, progression, sections }: {
+    completedCourses: any;
+    completedModules: any;
+    title: any;
+    subtitle: any;
+    progression: any;
+    sections: any;
+}, context: any): JSX.Element;
+declare namespace ProgressWrapper {
+    namespace contextTypes {
+        const translate: PropTypes.Requireable<(...args: any[]) => any>;
+    }
+    namespace propTypes {
+        const title: PropTypes.Requireable<string>;
+        const subtitle: PropTypes.Requireable<string>;
+        const completedCourses: PropTypes.Requireable<number>;
+        const completedModules: PropTypes.Requireable<number>;
+        const progression: PropTypes.Requireable<number>;
+        const sections: PropTypes.Requireable<(PropTypes.InferProps<{
+            type: PropTypes.Requireable<string>;
+            badgeUrl: PropTypes.Requireable<string>;
+            onDownload: PropTypes.Requireable<(...args: any[]) => any>;
+            stars: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+    }
+}
+import PropTypes from "prop-types";
+//# sourceMappingURL=index.d.ts.map

package/lib/molecule/progress-wrapper/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/progress-wrapper/index.js"],"names":[],"mappings":";AAyFA;;;;;;;8BA8DC"}

package/lib/molecule/progress-wrapper/index.js

@@ -0,0 +1,221 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _map2 = _interopRequireDefault(require("lodash/fp/map"));
+
+var _lowerCase2 = _interopRequireDefault(require("lodash/fp/lowerCase"));
+
+var _isEmpty2 = _interopRequireDefault(require("lodash/fp/isEmpty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _title = _interopRequireDefault(require("../../atom/title"));
+
+var _progressBar = _interopRequireDefault(require("../progress-bar"));
+
+var _colors = require("../../variables/colors");
+
+var _tag = _interopRequireDefault(require("../../atom/tag"));
+
+var _buttonLink = _interopRequireDefault(require("../../atom/button-link"));
+
+var _icon = _interopRequireDefault(require("../../atom/icon"));
+
+var _provider = _interopRequireDefault(require("../../atom/provider"));
+
+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 uncappedMap = _map2.default.convert({
+  cap: false
+});
+
+const DetailSection = ({
+  index,
+  type,
+  isLocked,
+  badgeUrl,
+  onDownload,
+  stars
+}, context) => {
+  const {
+    translate
+  } = context;
+  const isTypeStars = type === 'stars';
+
+  const DownloadButton = /*#__PURE__*/_react.default.createElement(_buttonLink.default, {
+    label: translate('download'),
+    onClick: onDownload,
+    "data-name": "download-button",
+    "aria-label": "download button",
+    customStyle: {
+      backgroundColor: '#F1F6FE',
+      color: '#0061FF'
+    },
+    icon: {
+      position: 'left',
+      faIcon: {
+        name: 'download',
+        color: '#0061FF',
+        size: 14,
+        customStyle: {
+          padding: 0
+        }
+      }
+    },
+    disabled: isLocked
+  });
+
+  const LockedTag = /*#__PURE__*/_react.default.createElement(_tag.default, {
+    label: "Locked",
+    size: "S",
+    icon: {
+      position: 'left',
+      iconName: 'lock',
+      iconColor: '#515161',
+      preset: 's',
+      customStyle: {
+        padding: 0
+      }
+    }
+  });
+
+  return isTypeStars ? /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default[`detailsSection${index}`]
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.detailsInfo
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.detailsInfoText
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.detailsTitle
+  }, translate('bonus_stars')), isLocked ? LockedTag : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.stars
+  }, /*#__PURE__*/_react.default.createElement(_icon.default, {
+    iconName: "star",
+    iconColor: "#FFCE0A",
+    backgroundColor: "#FFF9D1",
+    preset: "xl"
+  }), /*#__PURE__*/_react.default.createElement("span", null, stars)))) : /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default[`detailsSection${index}`]
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    className: _style.default.img,
+    src: badgeUrl || 'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.detailsInfo
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.detailsInfoText
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.detailsTitle
+  }, type === 'diploma' ? translate('diploma') : translate('badge')), isLocked ? LockedTag : null), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.buttonContainer
+  }, DownloadButton)));
+};
+
+const ProgressWrapper = ({
+  completedCourses,
+  completedModules,
+  title,
+  subtitle,
+  progression,
+  sections
+}, context) => {
+  const {
+    translate
+  } = context;
+  const modulesCompletedLocal = translate('modules_completed');
+  const isLocked = progression !== 100;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.container
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.titleContainer
+  }, /*#__PURE__*/_react.default.createElement(_title.default, {
+    type: "form-group",
+    titleSize: "medium",
+    title: title,
+    subtitle: subtitle
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.statscontainer
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.stats
+  }, /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.statsNumber
+  }, completedCourses), (0, _lowerCase2.default)(translate('courses_completed'))), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.divider
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.statsModule
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.statsNumber
+  }, completedModules), modulesCompletedLocal)), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.progression
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.statsNumber
+  }, progression, "%"))), /*#__PURE__*/_react.default.createElement(_progressBar.default, {
+    className: _style.default.customProgressBar,
+    style: {
+      backgroundColor: _colors.COLORS.positive
+    },
+    displayInfo: false,
+    value: progression,
+    max: 100
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.statsMobile
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.statsModuleMobile
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.statsNumber
+  }, completedModules), modulesCompletedLocal), /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.statsProgressionMobile
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: _style.default.statsNumber
+  }, progression, "%"))), (0, _isEmpty2.default)(sections) ? null : /*#__PURE__*/_react.default.createElement("div", {
+    className: _style.default.details
+  }, uncappedMap(({
+    type,
+    stars,
+    badgeUrl,
+    onDownload
+  }, index) => /*#__PURE__*/_react.default.createElement(DetailSection, {
+    type,
+    isLocked,
+    badgeUrl,
+    onDownload,
+    stars,
+    key: `${type}-${index}`,
+    index: index
+  }), sections)));
+};
+
+const commonDetailSectionPropTypes = process.env.NODE_ENV !== "production" ? {
+  type: _propTypes.default.oneOf(['diploma', 'badge', 'stars']),
+  badgeUrl: _propTypes.default.string,
+  onDownload: _propTypes.default.func,
+  stars: _propTypes.default.number
+} : {};
+DetailSection.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+DetailSection.propTypes = process.env.NODE_ENV !== "production" ? _extends({
+  index: _propTypes.default.number,
+  isLocked: _propTypes.default.bool
+}, commonDetailSectionPropTypes) : {};
+ProgressWrapper.contextTypes = {
+  translate: _provider.default.childContextTypes.translate
+};
+ProgressWrapper.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes.default.string,
+  subtitle: _propTypes.default.string,
+  completedCourses: _propTypes.default.number,
+  completedModules: _propTypes.default.number,
+  progression: _propTypes.default.number,
+  sections: _propTypes.default.arrayOf(_propTypes.default.shape(commonDetailSectionPropTypes))
+} : {};
+var _default = ProgressWrapper;
+exports.default = _default;
+//# sourceMappingURL=index.js.map

package/lib/molecule/progress-wrapper/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["uncappedMap","convert","cap","DetailSection","index","type","isLocked","badgeUrl","onDownload","stars","context","translate","isTypeStars","DownloadButton","backgroundColor","color","position","faIcon","name","size","customStyle","padding","LockedTag","iconName","iconColor","preset","style","detailsInfo","detailsInfoText","detailsTitle","img","buttonContainer","ProgressWrapper","completedCourses","completedModules","title","subtitle","progression","sections","modulesCompletedLocal","container","titleContainer","statscontainer","stats","statsNumber","divider","statsModule","customProgressBar","COLORS","positive","statsMobile","statsModuleMobile","statsProgressionMobile","details","commonDetailSectionPropTypes","PropTypes","oneOf","string","func","number","contextTypes","Provider","childContextTypes","propTypes","bool","arrayOf","shape"],"sources":["../../../src/molecule/progress-wrapper/index.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport {isEmpty, lowerCase, map} from 'lodash/fp';\nimport Title from '../../atom/title';\nimport ProgressBar from '../progress-bar';\nimport {COLORS} from '../../variables/colors';\nimport Tag from '../../atom/tag';\nimport ButtonLink from '../../atom/button-link';\nimport Icon from '../../atom/icon';\nimport Provider from '../../atom/provider';\n// eslint-disable-next-line css-modules/no-unused-class\nimport style from './style.css';\n\nconst uncappedMap = map.convert({cap: false});\n\nconst DetailSection = ({index, type, isLocked, badgeUrl, onDownload, stars}, context) => {\n  const {translate} = context;\n  const isTypeStars = type === 'stars';\n\n  const DownloadButton = (\n    <ButtonLink\n      label={translate('download')}\n      onClick={onDownload}\n      data-name=\"download-button\"\n      aria-label=\"download button\"\n      customStyle={{backgroundColor: '#F1F6FE', color: '#0061FF'}}\n      icon={{\n        position: 'left',\n        faIcon: {\n          name: 'download',\n          color: '#0061FF',\n          size: 14,\n          customStyle: {padding: 0}\n        }\n      }}\n      disabled={isLocked}\n    />\n  );\n\n  const LockedTag = (\n    <Tag\n      label=\"Locked\"\n      size=\"S\"\n      icon={{\n        position: 'left',\n        iconName: 'lock',\n        iconColor: '#515161',\n        preset: 's',\n        customStyle: {padding: 0}\n      }}\n    />\n  );\n\n  return isTypeStars ? (\n    <div className={style[`detailsSection${index}`]}>\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>{translate('bonus_stars')}</span>\n          {isLocked ? LockedTag : null}\n        </div>\n        <div className={style.stars}>\n          <Icon iconName=\"star\" iconColor=\"#FFCE0A\" backgroundColor=\"#FFF9D1\" preset=\"xl\" />\n          <span>{stars}</span>\n        </div>\n      </div>\n    </div>\n  ) : (\n    <div className={style[`detailsSection${index}`]}>\n      <img\n        className={style.img}\n        src={\n          badgeUrl ||\n          'https://s3.eu-west-1.amazonaws.com/static.coorpacademy.com/assets/images/diploma.svg'\n        }\n      />\n      <div className={style.detailsInfo}>\n        <div className={style.detailsInfoText}>\n          <span className={style.detailsTitle}>\n            {type === 'diploma' ? translate('diploma') : translate('badge')}\n          </span>\n          {isLocked ? LockedTag : null}\n        </div>\n\n        <div className={style.buttonContainer}>{DownloadButton}</div>\n      </div>\n    </div>\n  );\n};\n\nconst ProgressWrapper = (\n  {completedCourses, completedModules, title, subtitle, progression, sections},\n  context\n) => {\n  const {translate} = context;\n  const modulesCompletedLocal = translate('modules_completed');\n  const isLocked = progression !== 100;\n\n  return (\n    <div className={style.container}>\n      <div className={style.titleContainer}>\n        <Title type=\"form-group\" titleSize=\"medium\" title={title} subtitle={subtitle} />\n      </div>\n      <div className={style.statscontainer}>\n        <div className={style.stats}>\n          <div>\n            <span className={style.statsNumber}>{completedCourses}</span>\n            {lowerCase(translate('courses_completed'))}\n          </div>\n          <div className={style.divider} />\n          <div className={style.statsModule}>\n            <span className={style.statsNumber}>{completedModules}</span>\n            {modulesCompletedLocal}\n          </div>\n        </div>\n        <div className={style.progression}>\n          <span className={style.statsNumber}>{progression}%</span>\n        </div>\n      </div>\n      <ProgressBar\n        className={style.customProgressBar}\n        style={{backgroundColor: COLORS.positive}}\n        displayInfo={false}\n        value={progression}\n        max={100}\n      />\n      <div className={style.statsMobile}>\n        <div className={style.statsModuleMobile}>\n          <span className={style.statsNumber}>{completedModules}</span>\n          {modulesCompletedLocal}\n        </div>\n        <div className={style.statsProgressionMobile}>\n          <span className={style.statsNumber}>{progression}%</span>\n        </div>\n      </div>\n\n      {isEmpty(sections) ? null : (\n        <div className={style.details}>\n          {uncappedMap(\n            ({type, stars, badgeUrl, onDownload}, index) => (\n              <DetailSection\n                {...{type, isLocked, badgeUrl, onDownload, stars}}\n                key={`${type}-${index}`}\n                index={index}\n              />\n            ),\n            sections\n          )}\n        </div>\n      )}\n    </div>\n  );\n};\n\nconst commonDetailSectionPropTypes = {\n  type: PropTypes.oneOf(['diploma', 'badge', 'stars']),\n  badgeUrl: PropTypes.string,\n  onDownload: PropTypes.func,\n  stars: PropTypes.number\n};\n\nDetailSection.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nDetailSection.propTypes = {\n  index: PropTypes.number,\n  isLocked: PropTypes.bool,\n  ...commonDetailSectionPropTypes\n};\n\nProgressWrapper.contextTypes = {\n  translate: Provider.childContextTypes.translate\n};\n\nProgressWrapper.propTypes = {\n  title: PropTypes.string,\n  subtitle: PropTypes.string,\n  completedCourses: PropTypes.number,\n  completedModules: PropTypes.number,\n  progression: PropTypes.number,\n  sections: PropTypes.arrayOf(PropTypes.shape(commonDetailSectionPropTypes))\n};\n\nexport default ProgressWrapper;\n"],"mappings":"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"}

package/lib/molecule/progress-wrapper/style.css

@@ -0,0 +1,185 @@
+@value colors: "../../variables/colors.css";
+@value breakpoints: "../../variables/breakpoints.css";
+@value mobile from breakpoints;
+@value tablet from breakpoints;
+@value white from colors;
+@value xtraLightGrey from colors;
+@value cm_grey_100 from colors;
+@value cm_grey_400 from colors;
+@value cm_grey_500 from colors;
+
+.container {
+  border-radius: 16px;
+  font-family: Gilroy;
+  background-color: xtraLightGrey;
+  padding: 32px;
+}
+
+.titleContainer {
+  padding-bottom: 24px;
+}
+
+.statscontainer {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 16px;
+  color: cm_grey_400;
+  font-weight: 600;
+}
+
+.statsNumber {
+  color: cm_grey_500;
+  padding-right: 4px;
+}
+
+.stats {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.divider {
+  width: 4px;
+  height: 4px;
+  background-color: #d7d7da;
+  border: solid #d7d7da 1px;
+  border-radius: 4px;
+}
+
+.progression {
+  display: flex;
+  justify-content: end;
+}
+
+.customProgressBar {
+  height: 8px;
+  background-color: cm_grey_100;
+}
+
+.details {
+  display: flex;
+  justify-content: space-between;
+  align-items: "center";
+  flex-direction: row;
+  padding-top: 24px;
+  gap: 16px;
+}
+
+.detailsSectionCommon {
+  display: flex;
+  align-items: center;
+  border-radius: 20px;
+  gap: 20px;
+  padding: 16px;
+  background-color: white;
+  height: 114px;
+}
+
+.detailsSection0 {
+  composes: detailsSectionCommon;
+  flex: 1;
+}
+
+.detailsSection1 {
+  composes: detailsSection0;
+}
+
+.detailsSection2 {
+  composes: detailsSectionCommon;
+  width: 245px;
+}
+
+.detailsInfo {
+  height: 100%;
+  width: 100%;
+  background-color: white;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.detailsInfoText {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+.detailsTitle {
+  font-family: Gilroy;
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.img {
+  height: 100%;
+}
+
+.buttonContainer {
+  width: fit-content;
+}
+
+.stars {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  font-size: 32px;
+  font-weight: 700;
+}
+
+.statsMobile {
+  display: none;
+}
+
+.statsModuleMobile {
+  display: none;
+}
+
+.statsProgressionMobile {
+  composes: progression;
+  display: none;
+}
+
+@media mobile, tablet {
+  .details {
+    flex-wrap: wrap;
+  }
+  .detailsSection2 {
+    flex: 1;
+  }
+  .detailsSection0 > img {
+    width: 120px;
+  }
+  .detailsSection1 > img {
+    width: 80px;
+    height: 80px;
+  }
+  .detailsInfo {
+   justify-content: space-around;
+   gap: 0;
+  }
+  .divider {
+    display: none;
+  }
+  .statsModule {
+    display: none;
+  }
+  .progression {
+    display: none;
+  }
+  .statsProgressionMobile {
+    display: block;
+  }
+  .statsModuleMobile {
+    display: block;
+  }
+  .statsMobile {
+    display: flex;
+    justify-content: space-between;
+    padding-top: 16px;
+    color: cm_grey_400;
+    font-weight: 600;
+  }    
+}

package/lib/molecule/title-and-checkbox-wrapper/index.d.ts

@@ -24,8 +24,9 @@ declare namespace TitleAndCheckBoxWrapper {
                 type: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<{
-                    [x: string]: string | null | undefined;
+                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                 }>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
             }>>;
         }>>;
         const child: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{

package/lib/molecule/title-radio-wrapper/index.d.ts

@@ -17,8 +17,9 @@ declare const TitleRadioWrapper: {
                     type: import("prop-types").Requireable<string>;
                     size: import("prop-types").Requireable<string>;
                     customStyle: import("prop-types").Requireable<{
-                        [x: string]: string | null | undefined;
+                        [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                     }>;
+                    icon: import("prop-types").Requireable<import("prop-types").InferProps<any>>;
                 }>>;
             }>>>;
             name: import("prop-types").Requireable<string>;

package/lib/molecule/title-radio-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/title-radio-wrapper/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAqB1D,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/molecule/title-radio-wrapper/index.tsx"],"names":[],"mappings":";AAKA,OAAkB,EAAC,sBAAsB,EAAC,MAAM,SAAS,CAAC;AAqB1D,QAAA,MAAM,iBAAiB;YAAW,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQvD,CAAC;AAIF,eAAe,iBAAiB,CAAC"}

package/lib/molecule/title-radio-wrapper/types.d.ts

@@ -17,8 +17,9 @@ declare const propTypes: {
                 type: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<{
-                    [x: string]: string | null | undefined;
+                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                 }>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
             }>>;
         }>>>;
         name: PropTypes.Requireable<string>;

package/lib/molecule/title-radio-wrapper/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/title-radio-wrapper/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAC;AACtE,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOd,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,cAAc,EAAE,mBAAmB,CAAC;IACpC,KAAK,EAAE,OAAO,cAAc,CAAC,SAAS,GAAG,OAAO,kBAAkB,CAAC,SAAS,CAAC;IAC7E,SAAS,EAAE,iBAAiB,GAAG,gBAAgB,CAAC;CACjD,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/molecule/title-radio-wrapper/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AACnC,OAAO,kBAAkB,MAAM,iCAAiC,CAAC;AAEjE,OAAO,EAAC,mBAAmB,EAAC,MAAM,mCAAmC,CAAC;AACtE,OAAO,cAAc,MAAM,oBAAoB,CAAC;AAEhD,QAAA,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAOd,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,cAAc,EAAE,mBAAmB,CAAC;IACpC,KAAK,EAAE,OAAO,cAAc,CAAC,SAAS,GAAG,OAAO,kBAAkB,CAAC,SAAS,CAAC;IAC7E,SAAS,EAAE,iBAAiB,GAAG,gBAAgB,CAAC;CACjD,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/organism/rewards-form/index.d.ts

@@ -27,8 +27,9 @@ declare namespace RewardsForm {
                     type: PropTypes.Requireable<string>;
                     size: PropTypes.Requireable<string>;
                     customStyle: PropTypes.Requireable<{
-                        [x: string]: string | null | undefined;
+                        [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                     }>;
+                    icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
                 }>>;
             }>>;
             child: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{

package/lib/organism/select-opponents/index.d.ts

@@ -26,8 +26,9 @@ declare const SelectOpponents: {
                     type: import("prop-types").Requireable<string>;
                     size: import("prop-types").Requireable<string>;
                     customStyle: import("prop-types").Requireable<{
-                        [x: string]: string | null | undefined;
+                        [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                     }>;
+                    icon: import("prop-types").Requireable<import("prop-types").InferProps<any>>;
                 }>>;
             }>>;
             child: import("prop-types").Requireable<NonNullable<import("prop-types").InferProps<{

package/lib/organism/select-opponents/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/select-opponents/index.tsx"],"names":[],"mappings":";AAGA,OAAkB,EAAC,oBAAoB,EAA+B,MAAM,SAAS,CAAC;AAMtF,QAAA,MAAM,eAAe;YAAW,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnD,CAAC;AAIF,eAAe,eAAe,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/organism/select-opponents/index.tsx"],"names":[],"mappings":";AAGA,OAAkB,EAAC,oBAAoB,EAA+B,MAAM,SAAS,CAAC;AAMtF,QAAA,MAAM,eAAe;YAAW,oBAAoB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgBnD,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/lib/organism/select-opponents/types.d.ts

@@ -23,8 +23,9 @@ export declare const propTypes: {
                 type: PropTypes.Requireable<string>;
                 size: PropTypes.Requireable<string>;
                 customStyle: PropTypes.Requireable<{
-                    [x: string]: string | null | undefined;
+                    [x: string]: NonNullable<string | number | null | undefined> | null | undefined;
                 }>;
+                icon: PropTypes.Requireable<PropTypes.InferProps<any>>;
             }>>;
         }>>;
         child: PropTypes.Requireable<NonNullable<PropTypes.InferProps<{

package/lib/organism/select-opponents/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/select-opponents/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAErB,CAAC;AAEF,oBAAY,4BAA4B,GAAG;IACzC,KAAK,EAAE;QACL,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAAC;QAC9C,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;KACtB,CAAC;IACF,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,KAAK,EAAE,4BAA4B,EAAE,CAAC;CACvC,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/organism/select-opponents/types.ts"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,YAAY,CAAC;AAGnC,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAErB,CAAC;AAEF,oBAAY,4BAA4B,GAAG;IACzC,KAAK,EAAE;QACL,SAAS,EAAE,iBAAiB,GAAG,cAAc,CAAC;QAC9C,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;KACtB,CAAC;IACF,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,oBAAoB,GAAG;IACjC,KAAK,EAAE,4BAA4B,EAAE,CAAC;CACvC,CAAC;AAEF,eAAe,SAAS,CAAC"}